/*
 * Comparison-media base stylesheet
 * Independently implemented from scratch.
 * Intended to reproduce the general layout language of a large Japanese
 * product-comparison media site without copying its proprietary CSS.
 *
 * Change the values in :root to rebrand the entire site.
 */

:root {
  /* ===== Brand colors: edit these first ===== */
  --color-primary: #315e9b;
  --color-primary-hover: #234879;
  --color-primary-soft: #eef4fa;

  --color-accent: #d0a21b;
  --color-accent-hover: #956f08;
  --color-accent-soft: #fff7d6;
  --color-link: #245b9b;

  --color-text: #162a3d;
  --color-text-sub: #53687a;
  --color-text-muted: #6d7d8c;

  --color-bg: #ffffff;
  --color-bg-sub: #f5f8fb;
  --color-surface: #ffffff;

  --color-border: #dce5ed;
  --color-border-light: #e6edf3;

  /* ===== Layout ===== */
  --container-width: 1180px;
  --content-width: 820px;
  --header-height: 64px;

  /* ===== Radius / shadow ===== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 16px rgba(28, 60, 90, 0.07);
  --shadow-md: 0 14px 36px rgba(28, 60, 90, 0.11);

  /* ===== Spacing ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ===== Typography ===== */
  --font-sans:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
}

/* =========================================================
   Reset
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

/* =========================================================
   Common layout
   ========================================================= */

.site-container {
  width: min(calc(100% - 32px), var(--container-width));
  margin-inline: auto;
}

.content-container {
  width: min(calc(100% - 32px), var(--content-width));
  margin-inline: auto;
}

.page-section {
  padding-block: var(--space-12);
}

.page-section--subtle {
  background: var(--color-bg-sub);
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.section-heading {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.4;
}

.section-heading__lead {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text-sub);
  font-size: 13px;
  font-weight: 500;
}

.section-link {
  flex: 0 0 auto;
  color: var(--color-text-sub);
  font-size: 14px;
  font-weight: 600;
}

.section-link:hover {
  color: var(--color-primary);
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  min-height: var(--header-height);
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--color-border-light);
  backdrop-filter: blur(10px);
}

.site-header__inner {
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  gap: var(--space-6);
}

.site-logo {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.site-logo__mark {
  color: var(--color-primary);
}

.header-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 620px;
}

.header-search__input {
  width: 100%;
  height: 44px;
  padding: 0 48px 0 16px;
  color: var(--color-text);
  background: var(--color-bg-sub);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.header-search__input:focus {
  background: var(--color-bg);
  border-color: var(--color-primary);
}

.header-search__button {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--color-text-sub);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  transform: translateY(-50%);
}

.header-search__button:hover {
  background: var(--color-border-light);
}

.header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-4);
}

.header-action {
  color: var(--color-text-sub);
  font-size: 13px;
  font-weight: 600;
}

/* =========================================================
   Hero / search area
   ========================================================= */

.hero {
  padding: 56px 0 44px;
  text-align: center;
  background: var(--color-bg);
}

.hero__title {
  margin-bottom: var(--space-3);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.hero__description {
  margin-bottom: var(--space-8);
  color: var(--color-text-sub);
  font-size: 15px;
}

.hero-search {
  position: relative;
  width: min(100%, 680px);
  margin-inline: auto;
}

.hero-search__input {
  width: 100%;
  height: 58px;
  padding: 0 64px 0 20px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.hero-search__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.hero-search__button {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-sm);
  transform: translateY(-50%);
}

.hero-search__button:hover {
  background: var(--color-primary-hover);
}

/* =========================================================
   Category navigation
   ========================================================= */

.category-nav {
  padding-bottom: var(--space-10);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}

.category-card {
  display: flex;
  min-height: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.category-card:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.category-card__icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--color-primary);
  font-size: 24px;
}

.category-card__name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.category-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

.category-more__button {
  min-width: 180px;
  padding: 10px 20px;
  color: var(--color-text-sub);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
}

/* =========================================================
   Horizontal cards
   ========================================================= */

.card-scroll {
  display: grid;
  grid-auto-columns: minmax(220px, 1fr);
  grid-auto-flow: column;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scroll-snap-type: inline proximity;
}

.media-card {
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  scroll-snap-align: start;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.media-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.media-card__image {
  aspect-ratio: 16 / 10;
  background: var(--color-bg-sub);
  overflow: hidden;
}

.media-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card__body {
  padding: var(--space-4);
}

.media-card__category {
  margin-bottom: var(--space-1);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

.media-card__title {
  display: -webkit-box;
  margin-bottom: var(--space-2);
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.media-card__meta {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* =========================================================
   Product / review cards
   ========================================================= */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.product-card {
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.product-card__image {
  display: grid;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--space-3);
  place-items: center;
  background: var(--color-bg-sub);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card__label {
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: 11px;
}

.product-card__title {
  margin-bottom: var(--space-3);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.product-card__score {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 800;
}

.product-card__price {
  color: var(--color-text-sub);
  font-size: 13px;
  font-weight: 600;
}

/* =========================================================
   Article lists
   ========================================================= */

.article-list {
  border-top: 1px solid var(--color-border-light);
}

.article-list__item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.article-list__thumb {
  aspect-ratio: 16 / 10;
  background: var(--color-bg-sub);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.article-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-list__date {
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: 12px;
}

.article-list__title {
  margin-bottom: var(--space-2);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
}

.article-list__excerpt {
  display: -webkit-box;
  margin: 0;
  color: var(--color-text-sub);
  font-size: 13px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* =========================================================
   Buttons / badges
   ========================================================= */

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.button--primary {
  color: #fff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.button--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.button--outline {
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.button--outline:hover {
  background: var(--color-bg-sub);
}

.badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  color: var(--color-text-sub);
  background: var(--color-bg-sub);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}

.badge--primary {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  margin-top: var(--space-16);
  padding: 48px 0 28px;
  color: var(--color-text-sub);
  background: var(--color-bg-sub);
  border-top: 1px solid var(--color-border-light);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-8);
}

.footer-heading {
  margin-bottom: var(--space-3);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
}

.footer-links {
  display: grid;
  gap: var(--space-2);
}

.footer-link {
  font-size: 12px;
}

.footer-link:hover {
  color: var(--color-primary);
}

.footer-bottom {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 11px;
}

/* =========================================================
   Utility
   ========================================================= */

.text-primary {
  color: var(--color-primary) !important;
}

.bg-subtle {
  background: var(--color-bg-sub) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--color-border-light) !important;
}

.only-desktop {
  display: initial;
}

.only-mobile {
  display: none;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 56px;
  }

  body {
    font-size: 14px;
  }

  .site-container,
  .content-container {
    width: min(calc(100% - 24px), var(--container-width));
  }

  .site-header__inner {
    gap: var(--space-3);
  }

  .site-logo {
    font-size: 19px;
  }

  .header-search {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  .hero {
    padding: 36px 0 28px;
  }

  .hero__description {
    margin-bottom: var(--space-5);
  }

  .hero-search__input {
    height: 52px;
  }

  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .category-card {
    min-height: 82px;
    padding: var(--space-2);
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .article-list__item {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--space-3);
  }

  .article-list__excerpt {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-4);
  }

  .only-desktop {
    display: none !important;
  }

  .only-mobile {
    display: initial !important;
  }
}

@media (max-width: 480px) {
  .page-section {
    padding-block: var(--space-8);
  }

  .section-header {
    align-items: flex-start;
  }

  .section-heading {
    font-size: 21px;
  }

  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .category-card__name {
    font-size: 11px;
  }

  .card-scroll {
    grid-auto-columns: 78%;
  }

  .product-card {
    padding: var(--space-3);
  }

  .article-list__item {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .article-list__title {
    font-size: 14px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}


/* CMS article page additions */
body { background: #f5f8fb; }
.site-header { box-shadow: 0 1px 10px rgba(28, 60, 90, 0.06); }
.site-header__inner { justify-content: space-between; }
.site-brand { display: flex; align-items: center; gap: var(--space-3); }
.site-logo { display: flex; align-items: center; gap: var(--space-2); color: #17324d; letter-spacing: -0.03em; }
.site-logo__mark { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: var(--color-primary); border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.18); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 15px; }
.site-tagline { margin: 0; color: var(--color-text-muted); font-size: 11px; line-height: 1.4; }
.header-action { padding: 7px 12px; border-radius: var(--radius-pill); }
.header-action:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); padding-block: 14px; color: var(--color-text-muted); font-size: 12px; }
.breadcrumb a:hover { color: var(--color-primary); }
.article-page { padding: 0 0 var(--space-12); }
.article-layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(250px, 300px); gap: var(--space-8); align-items: start; }
.article-card { min-width: 0; padding: clamp(22px, 4vw, 44px); background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.article-page__header { margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border-light); }
.article-page__featured { margin: 0 0 var(--space-8); overflow: hidden; background: #f4f7f9; border-radius: var(--radius-md); }
.article-page__featured img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; }
.article-page__eyebrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.article-page__title { margin: var(--space-4) 0; color: #17324d; font-size: clamp(28px, 4vw, 40px); font-weight: 800; line-height: 1.4; letter-spacing: -0.025em; }
.article-page__lead { margin: 0 0 var(--space-4); color: var(--color-text-sub); font-size: 15px; }
.article-page__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--color-text-muted); font-size: 12px; }
.advertising-disclosure { margin: 0 0 var(--space-5); padding: 10px 13px; color: #5c4b00; background: #fff8d6; border: 1px solid #e7d174; border-radius: var(--radius-xs); font-size: 12px; font-weight: 700; }
.article-page__date::before { content: "更新日 "; font-weight: 700; }
.article-page__body { color: #273849; font-size: 16px; line-height: 1.95; word-break: break-word; }
.article-page__body > * { margin-top: 0; margin-bottom: var(--space-5); }
.article-page__body h2, .article-page__body h3, .article-page__body h4 { color: #17324d; font-weight: 800; line-height: 1.55; scroll-margin-top: 96px; }
.article-page__body h2 { position: relative; margin: var(--space-12) 0 var(--space-6); padding: 15px 18px 15px 22px; background: linear-gradient(90deg, var(--color-primary-soft), #fff 78%); border-left: 5px solid var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 25px; }
.article-page__body h2::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, var(--color-primary), transparent); }
.article-page__body h3 { margin: var(--space-10) 0 var(--space-4); padding-bottom: 9px; border-bottom: 2px solid var(--color-border-light); font-size: 20px; }
.article-page__body h3::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; background: var(--color-primary); border-radius: 50%; vertical-align: 2px; }
.article-page__body h4 { margin: var(--space-8) 0 var(--space-3); font-size: 17px; }
.article-page__body a { color: var(--color-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-link) 35%, transparent); text-underline-offset: 3px; }
.article-page__body a:hover { color: var(--color-primary-hover); }
.article-page__body strong { color: #172b3d; font-weight: 800; background: linear-gradient(transparent 67%, #f0cf5d 67%); }
.article-page__body ul, .article-page__body ol { display: grid; gap: 8px; margin: var(--space-5) 0; padding: 18px 20px; background: #f8fbfd; border: 1px solid #dbe8f0; border-radius: var(--radius-sm); }
.article-page__body li { position: relative; padding-left: 28px; }
.article-page__body ul > li::before { content: "✓"; position: absolute; top: 0.15em; left: 0; display: grid; width: 19px; height: 19px; place-items: center; color: #fff; background: var(--color-primary); border-radius: 50%; font-size: 11px; font-weight: 800; line-height: 1; }
.article-page__body ol { counter-reset: article-list; }
.article-page__body ol > li { counter-increment: article-list; }
.article-page__body ol > li::before { content: counter(article-list); position: absolute; top: 0.1em; left: 0; display: grid; width: 20px; height: 20px; place-items: center; color: #fff; background: var(--color-primary); border-radius: 50%; font-size: 11px; font-weight: 800; }
.article-page__body img { margin: var(--space-6) auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.article-page__body figure { margin: var(--space-6) 0; }
.article-page__body figcaption { margin-top: var(--space-2); color: var(--color-text-muted); font-size: 12px; text-align: center; }
.article-page__body blockquote { position: relative; margin: var(--space-6) 0; padding: 22px 26px 20px 54px; color: var(--color-text-sub); background: #f8fbfd; border: 1px solid #dbe8f0; border-radius: var(--radius-sm); }
.article-page__body blockquote::before { content: "“"; position: absolute; top: 5px; left: 16px; color: var(--color-primary); font-family: Georgia, serif; font-size: 52px; line-height: 1; opacity: 0.55; }
.article-page__body pre { margin: var(--space-6) 0; overflow-x: auto; padding: 22px 24px; color: #f8fafc; background: #17324d; border: 1px solid #234879; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); font-size: 13px; line-height: 1.75; }
.article-page__body code { padding: 0.12em 0.35em; color: #234879; background: #eef4fa; border-radius: var(--radius-xs); font-family: Consolas, Monaco, monospace; }
.article-page__body pre code { padding: 0; color: #f0cf5d; background: transparent; }
.article-page__body hr { margin: var(--space-10) 0; border: 0; border-top: 1px solid var(--color-border); }
.article-page__body table { display: table; width: 100%; margin: var(--space-6) 0; overflow: hidden; border-collapse: separate; border-spacing: 0; border: 1px solid #cbd8e2; border-radius: var(--radius-sm); font-size: 14px; }
.article-page__body th, .article-page__body td { padding: 12px 14px; border-right: 1px solid #dce5eb; border-bottom: 1px solid #dce5eb; text-align: center; }
.article-page__body th { color: #fff; background: #315e9b; font-weight: 700; }
.article-page__body tr:nth-child(even) td { background: #f7fafc; }
.article-page__body tr:last-child > * { border-bottom: 0; }
.article-page__body tr > *:last-child { border-right: 0; }
.article-toc { padding: 18px 20px; background: #fff; border: 1px solid #dbe3e9; border-radius: var(--radius-sm); }
.article-toc__title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 12px; color: #17324d; font-size: 14px; font-weight: 800; }
.article-toc__title::before { content: ""; width: 4px; height: 18px; background: var(--color-primary); border-radius: var(--radius-pill); }
.article-toc--accordion > .article-toc__title { cursor: pointer; margin-bottom: 0; list-style: none; }
.article-toc--accordion > .article-toc__title::-webkit-details-marker { display: none; }
.article-toc--accordion > .article-toc__title::after { content: "+"; margin-left: auto; color: var(--color-primary); font-size: 20px; line-height: 1; }
.article-toc--accordion[open] > .article-toc__title { margin-bottom: 12px; }
.article-toc--accordion[open] > .article-toc__title::after { content: "−"; }
.article-toc > ol { display: grid; gap: 9px; counter-reset: toc; }
.article-toc > ol > li { counter-increment: toc; }
.article-toc a { display: grid; grid-template-columns: 22px 1fr; gap: 7px; color: var(--color-text-sub); font-size: 13px; line-height: 1.55; }
.article-toc > ol > li > a::before { content: counter(toc); display: grid; width: 20px; height: 20px; place-items: center; color: #fff; background: var(--color-primary); border-radius: 50%; font-size: 10px; font-weight: 800; }
.article-toc__sublist { display: grid; gap: 7px; margin: 8px 0 0 12px; padding-left: 17px; border-left: 1px solid #dbe3e9; }
.article-toc__item--h3 > a { grid-template-columns: 10px 1fr; font-size: 12px; }
.article-toc__item--h3 > a::before { content: ""; width: 5px; height: 5px; margin-top: 0.65em; background: var(--color-primary); border-radius: 50%; }
.article-toc a:hover { color: var(--color-primary); }
.article-toc--mobile { display: none; margin-bottom: var(--space-8); background: #f8fbfd; }
.article-page__body .article-toc > ol { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
.article-page__body .article-toc li { padding-left: 0; }
.article-page__body .article-toc ol > li::before { content: none; }
.article-page__body .article-toc .article-toc__sublist { margin: 8px 0 0 12px; padding-left: 17px; background: transparent; border: 0; border-left: 1px solid #dbe3e9; border-radius: 0; }
.article-sidebar { display: grid; align-self: stretch; align-content: start; gap: var(--space-4); }
.sidebar-card { padding: 19px; background: #fff; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.sidebar-card--sticky { position: sticky; top: calc(var(--header-height) + 16px); max-height: calc(100vh - var(--header-height) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.sidebar-card > .article-toc { padding: 0; border: 0; }
.sidebar-card__title { margin: 0 0 12px; color: #17324d; font-size: 15px; font-weight: 800; }
.sidebar-card__text { margin: 0; color: var(--color-text-sub); font-size: 13px; line-height: 1.75; }
.quality-list { display: grid; gap: 10px; }
.quality-list li { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center; color: var(--color-text-sub); font-size: 12px; }
.quality-list span { display: grid; width: 28px; height: 28px; place-items: center; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 8px; font-weight: 800; }
/* Curated article design classes */
.article-page__body .fwb { font-weight: 800; }
.article-page__body .mkr_ylw { background: linear-gradient(transparent 58%, #f0cf5d 58%); }
.article-page__body .mkr_pnk { background: linear-gradient(transparent 58%, #dfe9f5 58%); }
.article-page__body .txt_red { color: #956f08; font-weight: 800; }
.article-page__body .txt_left { text-align: left; }
.article-page__body .txt_center { text-align: center; }
.article-page__body .txt_right { text-align: right; }
.article-page__body .fsz-12 { font-size: 12px; } .article-page__body .fsz-14 { font-size: 14px; } .article-page__body .fsz-18 { font-size: 18px; } .article-page__body .fsz-20 { font-size: 20px; } .article-page__body .fsz-24 { font-size: 24px; }
.article-page__body .txt_large { font-size: 1.25em; font-weight: 700; } .article-page__body .txt_large2 { font-size: 1.5em; font-weight: 800; } .article-page__body .txt_small { font-size: 0.82em; }
.article-page__body .n_title { margin-bottom: 8px; font-weight: 800; }
.article-page__body .n_title2 { display: inline-block; margin-bottom: 10px; padding-bottom: 3px; border-bottom: 3px solid var(--color-primary); font-weight: 800; }
.article-page__body .n_title3 { padding-left: 10px; border-left: 4px solid var(--color-primary); font-weight: 800; }
.article-page__body .mokuji { margin: var(--space-6) 0; padding: 22px; background: #f8fbfd; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); }
.article-page__body .mokuji_title { margin-bottom: 10px; color: #17324d; font-weight: 800; text-align: center; }
.article-page__body .mokuji .n_list { margin: 0; padding: 0; background: transparent; border: 0; }
.article-page__body .n_box, .article-page__body .box_point, .article-page__body .box_merit, .article-page__body .box_demerit, .article-page__body .box_merideme { margin: var(--space-6) 0; padding: 20px; background: #fff; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.article-page__body .box_point { position: relative; padding-top: 28px; border-color: #d0a21b; background: #fffaf0; }
.article-page__body .box_point::before { content: "POINT"; position: absolute; top: -12px; left: 20px; padding: 3px 12px; color: #17324d; background: #f0cf5d; border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.article-page__body .box_merit { border-color: #315e9b; } .article-page__body .box_demerit { border-color: #956f08; }
.article-page__body .box_merit > :first-child { color: #234879; } .article-page__body .box_demerit > :first-child { color: #705200; }
.article-page__body .box_merideme { border-color: var(--color-primary); }
.article-page__body .n_box ul, .article-page__body .box_point ul, .article-page__body .box_merit ul, .article-page__body .box_demerit ul, .article-page__body .box_merideme ul { margin-bottom: 0; padding: 0; background: transparent; border: 0; }
.article-page__body .normal_btn { display: flex; width: min(100%, 470px); min-height: 48px; margin: 18px auto; align-items: center; justify-content: center; padding: 10px 18px; color: #fff; background: var(--color-primary); border: 0; border-radius: var(--radius-xs); box-shadow: 0 3px 0 var(--color-primary-hover); text-decoration: none; font-weight: 800; text-align: center; }
.article-page__body .normal_btn:hover { color: #fff; background: var(--color-primary-hover); transform: translateY(1px); }
.article-page__body .normal_btn.yel { color: #17324d; background: #d0a21b; box-shadow: 0 3px 0 #956f08; }
.article-page__body .normal_btn.blu { background: #315e9b; box-shadow: 0 3px 0 #234879; }
.article-page__body .normal_btn.simple { color: var(--color-text); background: #fff; border: 1px solid var(--color-border); box-shadow: none; }
.article-page__body .normal_btn.line { color: var(--color-text); background: transparent; border: 0; border-bottom: 1px solid var(--color-text-sub); border-radius: 0; box-shadow: none; }
.article-page__body .normal_btn.small { width: min(100%, 300px); min-height: 40px; font-size: 13px; }
.article-page__body .img_wrap { width: min(100%, 640px); margin: var(--space-6) auto; }
.article-page__body .img_flex { display: flex; gap: var(--space-5); align-items: center; margin: var(--space-6) 0; }
.article-page__body .img_flex > * { flex: 1 1 0; min-width: 0; }
.article-page__body .img_flex.reverse { flex-direction: row-reverse; }
.article-page__body .table_container, .article-page__body .wid_scroll_wrap, .article-page__body .scroll_wrap { max-width: 100%; overflow-x: auto; }
.article-page__body .hei_scroll_wrap { max-height: 520px; overflow: auto; }
.article-page__body .table_title { margin-bottom: 0; padding: 9px 12px; color: #fff; background: #315e9b; border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-weight: 800; text-align: center; }
.article-page__body .table_title + table { margin-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.article-page__body .n_h2 { padding: 17px 20px 17px 24px; background: linear-gradient(100deg, #eef4fa, #fff 88%); border-left-color: #315e9b; box-shadow: inset 0 -1px 0 #dfe9f5; }
.article-page__body .n_h3 { padding: 0 0 10px 16px; border-bottom: 2px solid #dfe6ec; }
.article-page__body .n_h3::before { position: absolute; width: 5px; height: 1.35em; margin: 0 0 0 -16px; background: #315e9b; border-radius: 4px; }
.article-page__body .n_h4 { padding-left: 14px; border-left: 3px solid #8eafd2; }
.article-page__body .intro_body { margin: var(--space-6) 0; padding: 20px 22px; background: #f8fafc; border: 1px solid #dce4ea; border-radius: var(--radius-sm); }
.article-page__body .intro_head { margin: -20px -22px 18px; padding: 11px 18px; color: #17324d; background: #eef4f7; border-bottom: 1px solid #dce4ea; border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-weight: 800; }
.article-page__body .intro_source { display: block; margin-top: 9px; color: var(--color-text-muted); font-size: 12px; line-height: 1.7; }
.article-page__body .n_title, .article-page__body .n_title2, .article-page__body .n_title3, .article-page__body .n_title4 { color: #17324d; font-weight: 800; }
.article-page__body .n_title2 { display: inline-block; padding-bottom: 4px; border-bottom: 3px solid #d0a21b; }
.article-page__body .n_title3 { display: flex; gap: 8px; align-items: center; }
.article-page__body .n_title3::before { content: ""; width: 7px; height: 20px; background: #315e9b; border-radius: 4px; }
.article-page__body .n_title4 { padding: 8px 12px; background: #f4f7f9; border-radius: var(--radius-xs); }
.article-page__body .img_scroll { display: grid; grid-auto-columns: minmax(76%, 640px); grid-auto-flow: column; gap: 16px; margin: var(--space-6) 0; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x mandatory; }
.article-page__body .img_scroll > * { scroll-snap-align: start; }
.article-page__body .youtube_iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; margin: var(--space-6) 0; border: 0; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.article-page__body .youtubeshort_iframe { display: block; width: min(100%, 390px); aspect-ratio: 9 / 16; height: auto; margin: var(--space-6) auto; border: 0; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.article-page__body .box_matome { margin: var(--space-8) 0; padding: 24px; background: linear-gradient(145deg, #fff7d6, #fff); border: 1px solid #e2c45e; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.article-page__body .box_matome_title { margin: 0 0 14px; color: #705200; font-size: 18px; font-weight: 800; }
.article-page__body .pickup_box { display: grid; grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.5fr); gap: 22px; margin: var(--space-8) 0; overflow: hidden; padding: 22px; background: #fff; border: 1px solid #dfe5ea; border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(20, 39, 58, 0.08); }
.article-page__body .pickup_content { display: contents; }
.article-page__body .pickup_left, .article-page__body .pickup_right { min-width: 0; }
.article-page__body .pickup_text { color: var(--color-text-sub); font-size: 14px; }
.article-page__body .rank_wrap1, .article-page__body .rank_wrap2, .article-page__body .rank_wrap3, .article-page__body .rank_box1 { position: relative; margin: var(--space-8) 0; padding: 24px; background: #fff; border: 1px solid #dce3e8; border-radius: var(--radius-md); box-shadow: 0 12px 30px rgba(20, 39, 58, 0.08); }
.article-page__body .rank_wrap1 { border-top: 5px solid #dfb73b; } .article-page__body .rank_wrap2 { border-top: 5px solid #aab5bf; } .article-page__body .rank_wrap3 { border-top: 5px solid #b98256; }
.article-page__body .rank_ttl { margin-bottom: 12px; color: #17324d; font-size: 20px; font-weight: 800; }
.article-page__body .rank_desc { color: var(--color-text-sub); }
.article-page__body .rank_pic img { margin-top: 10px; box-shadow: none; }
.article-page__body .rank_btn { margin-top: 16px; }
.article-page__body .star { color: #956f08; letter-spacing: 0.08em; }
.article-page__body .tape, .article-page__body .pr { display: inline-flex; padding: 4px 10px; color: #17324d; background: #d0a21b; border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; }
.article-page__body .balloon-wrap, .article-page__body .balloon-set-box { display: flex; gap: 14px; align-items: flex-start; margin: var(--space-6) 0; }
.article-page__body .balloon { position: relative; flex: 1; padding: 16px 18px; background: #f1f6f9; border: 1px solid #d9e4ea; border-radius: var(--radius-md); }
.article-page__body .balloon::before { content: ""; position: absolute; top: 18px; left: -8px; width: 14px; height: 14px; background: #f1f6f9; border-bottom: 1px solid #d9e4ea; border-left: 1px solid #d9e4ea; transform: rotate(45deg); }
.article-page__body .author_info_wrap, .article-page__body .author_info { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: center; margin: var(--space-8) 0; padding: 20px; background: #f8fafb; border: 1px solid #dce4e9; border-radius: var(--radius-md); }
.article-page__body .author_pic img { margin: 0; border-radius: 50%; box-shadow: none; }
.article-page__body .author_name { color: #17324d; font-weight: 800; }
.article-page__body .author_disc { color: var(--color-text-sub); font-size: 13px; }
.article-page__body .review_scroll_wrap { display: grid; grid-auto-columns: minmax(280px, 72%); grid-auto-flow: column; gap: 16px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x mandatory; }
.article-page__body .review-content { padding: 18px; background: #fff; border: 1px solid #dce3e8; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); scroll-snap-align: start; }
.article-page__body .review-title-bottom, .article-page__body .review-name { color: #17324d; font-weight: 800; }
.article-page__body .review-star { color: #e8a400; }
.article-page__body .review-text, .article-page__body .review-spec { color: var(--color-text-sub); font-size: 13px; }
.article-page__body .service_intro, .article-page__body .single_sv { display: grid; grid-template-columns: minmax(130px, 0.75fr) minmax(0, 1.4fr); gap: 20px; align-items: center; margin: var(--space-7) 0; padding: 20px; background: #fff; border: 1px solid #dce3e8; border-radius: var(--radius-md); }
.article-page__body .btn_wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.article-page__body .nowrap { white-space: nowrap; }
.article-page__body .wid_fixed { table-layout: fixed; }
.article-page__body .hei_fixed { max-height: 520px; overflow-y: auto; }
.article-page__body .triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.article-page__body .normal_btn.ylw { color: #17324d; background: #d0a21b; box-shadow: 0 3px 0 #956f08; }
.article-page__body .arrow::after { content: "›"; margin-left: 0.55em; font-size: 1.3em; line-height: 1; }
.article-page__body button.normal_btn { cursor: pointer; font: inherit; }
.article-page__body .acbox_wrap { margin: var(--space-6) 0; }
.article-page__body .open_btn { cursor: pointer; }
.article-page__body .n_acbox { display: none; margin-top: -10px; padding: 20px; background: #f8fbfd; border: 1px solid #dbe8f0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.article-page__body .n_acbox.is-open { display: block; }
.article-page__body .tab_wrap { margin: var(--space-7) 0; }
.article-page__body .tab_list { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid #315e9b; }
.article-page__body .tab_item { flex: 1 0 auto; min-width: 110px; padding: 11px 16px; cursor: pointer; color: #526273; background: #eef3f7; border: 1px solid #d9e3ea; border-bottom: 0; border-radius: 8px 8px 0 0; font: inherit; font-weight: 800; }
.article-page__body .tab_item.btn_active { color: #fff; background: #315e9b; border-color: #315e9b; }
.article-page__body .tab_content { display: none; padding: 20px; border: 1px solid #d9e3ea; border-top: 0; }
.article-page__body .tab_content.cont_active { display: block; }
.article-page__body .split_tab_box { display: flex; flex-wrap: wrap; margin: var(--space-7) 0; }
.article-page__body .split_tab_box > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.article-page__body .split_tab { flex: 1 0 120px; padding: 11px 14px; cursor: pointer; color: #526273; background: #eef3f7; border: 1px solid #d9e3ea; font-weight: 800; text-align: center; }
.article-page__body .split_tab.is-active { color: #fff; background: #315e9b; border-color: #315e9b; }
.article-page__body .split_tab_content { display: none; order: 2; width: 100%; padding: 20px; border: 1px solid #d9e3ea; }
.article-page__body .split_tab_content.is-active { display: block; }
.article-page__body .point_modal_overlay { position: fixed; z-index: 1900; inset: 0; display: none; place-items: center; padding: 20px; background: rgba(12, 28, 44, 0.66); }
.article-page__body .point_modal_overlay.is-open { display: grid; }
.article-page__body .point_modal_window { display: none; width: min(680px, 100%); max-height: 85vh; overflow-y: auto; padding: 24px; background: #fff; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.article-page__body .point_modal_window.is-open { display: block; }
.article-page__body .modal_close_wrap { display: flex; justify-content: flex-end; }
.article-page__body .modal_close { cursor: pointer; padding: 8px 14px; color: #17324d; background: #fff; border: 1px solid #9eacb8; border-radius: var(--radius-xs); font: inherit; font-weight: 800; }
.article-page__body .faq_list { display: grid; gap: 12px; margin: var(--space-7) 0; }
.article-page__body details.faq_item { overflow: hidden; background: #fff; border: 1px solid #d9e3ea; border-radius: var(--radius-sm); }
.article-page__body .faq_question { position: relative; cursor: pointer; padding: 16px 50px 16px 48px; color: #17324d; font-weight: 800; list-style: none; }
.article-page__body .faq_question::-webkit-details-marker { display: none; }
.article-page__body .faq_question::before { content: "Q"; position: absolute; top: 14px; left: 16px; color: #705200; font-size: 20px; }
.article-page__body .faq_question::after { content: "+"; position: absolute; top: 14px; right: 18px; color: #315e9b; font-size: 22px; }
.article-page__body details[open] > .faq_question::after { content: "−"; }
.article-page__body .faq_answer { position: relative; padding: 16px 18px 18px 48px; background: #f8fbfd; border-top: 1px solid #e3ebf0; }
.article-page__body .faq_answer::before { content: "A"; position: absolute; top: 14px; left: 17px; color: #315e9b; font-size: 20px; font-weight: 800; }
.article-page__body .icon-box { display: flex; gap: 14px; align-items: center; margin: var(--space-6) 0; padding: 17px; background: #f8fafb; border: 1px solid #dce4e9; border-radius: var(--radius-sm); }
.article-page__body .icon-wrap { flex: 0 0 64px; }
.article-page__body .icon-name { color: #17324d; font-size: 13px; font-weight: 800; text-align: center; }
.article-page__body .author_sv_con { margin: var(--space-7) 0; padding: 20px; background: #f8fafb; border: 1px solid #dce4e9; border-radius: var(--radius-md); }
.article-page__body .author_sv_tab { display: inline-flex; margin-bottom: 12px; padding: 4px 10px; color: #17324d; background: #f0cf5d; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; }
.article-page__body .bg01 { background: #eef4fa; }
.article-page__body .bg02 { background: #fff8d6; }
.article-page__body .pad_large { padding: 28px; }
.article-page__body .point_summary { padding: 18px; background: #fff8d6; border-left: 4px solid #d0a21b; }
.article-page__body .coding_example { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-7) 0 var(--space-10); overflow: hidden; background: #fff; border: 1px solid #cfdbe4; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.article-page__body .coding_example__head { display: flex; grid-column: 1; grid-row: 1; gap: 12px; align-items: center; justify-content: space-between; margin: 0; padding: 10px 14px; color: #17324d; background: #eef4fa; border-bottom: 1px solid #d7e2ea; font-size: 13px; font-weight: 800; }
.article-page__body .coding_example__label { display: block; grid-column: 2; grid-row: 1; margin: 0; padding: 12px 14px; color: #526273; background: #f8fafb; border-bottom: 1px solid #e3e9ed; border-left: 1px solid #d7e2ea; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.article-page__body .coding_example__copy { cursor: pointer; padding: 6px 10px; color: #fff; background: #315e9b; border: 0; border-radius: var(--radius-xs); font: inherit; font-size: 12px; font-weight: 800; }
.article-page__body .coding_example > pre { grid-column: 1; grid-row: 2; height: 100%; margin: 0; overflow-x: auto; border: 0; border-radius: 0; box-shadow: none; white-space: pre; }
.article-page__body .coding_example > pre code { white-space: pre; }
.article-page__body .coding_example__preview { grid-column: 2; grid-row: 2; min-width: 0; padding: 20px; border-left: 1px solid #e3e9ed; }
.article-page__body .coding_example__preview > :last-child { margin-bottom: 0; }

/* Public home */
.home-page { min-height: 100vh; color: #1d2f40; background: #f7f8fa; }
.home-page .site-header { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); }
.site-nav { display: flex; gap: 6px; align-items: center; }
.site-nav a { padding: 8px 11px; color: #526273; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; }
.site-nav a:hover { color: #315e9b; background: #eef4fa; }
.home-hero { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 116px) 0 92px; color: #fff; background: linear-gradient(112deg, #17324d 0%, #234879 52%, #315e9b 100%); border-bottom: 1px solid #315e9b; }
.home-hero::before { content: "印"; position: absolute; top: -80px; right: max(4vw, calc((100vw - 1180px) / 2)); color: rgba(255, 255, 255, 0.055); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(280px, 31vw, 480px); font-weight: 700; line-height: 1; }
.home-hero__content { position: relative; z-index: 1; max-width: 760px; }
.home-eyebrow { display: inline-flex; gap: 8px; align-items: center; margin: 0 0 18px; padding: 6px 12px; color: #fff3bd; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(240, 207, 93, 0.52); border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; }
.home-eyebrow::before { content: ""; width: 7px; height: 7px; background: #d0a21b; border-radius: 50%; }
.home-hero__title { max-width: 720px; margin: 0; color: #fff; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(40px, 6vw, 68px); font-weight: 700; line-height: 1.3; letter-spacing: 0.015em; }
.home-hero__title em { color: #f0cf5d; font-style: normal; }
.home-hero__lead { max-width: 640px; margin: 22px 0 0; color: #e1e9f2; font-size: clamp(15px, 2vw, 18px); line-height: 1.95; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.home-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 0 23px; color: #17324d; background: #d0a21b; border: 1px solid #d0a21b; border-radius: var(--radius-pill); box-shadow: 0 10px 26px rgba(7, 25, 44, 0.28); font-size: 14px; font-weight: 800; }
.home-button:hover { color: #17324d; background: #dfb52e; border-color: #dfb52e; transform: translateY(-1px); }
.home-button--secondary { color: #fff; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.42); box-shadow: none; }
.home-button--secondary:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
.home-trust { position: relative; z-index: 2; margin-top: -27px; }
.home-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; background: #fff; border: 1px solid #e1e6ea; border-radius: var(--radius-md); box-shadow: 0 18px 45px rgba(21, 42, 59, 0.09); }
.home-trust__item { display: flex; gap: 13px; align-items: center; padding: 20px 24px; }
.home-trust__item + .home-trust__item { border-left: 1px solid #e8ecef; }
.home-trust__icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; color: #705200; background: #fff7d6; border: 1px solid #ead276; border-radius: 12px; font-size: 15px; font-weight: 900; }
.home-trust__item strong { display: block; color: #20364a; font-size: 14px; }
.home-trust__item span:last-child { display: block; margin-top: 2px; color: #7a8792; font-size: 11px; }
.home-section { padding: clamp(64px, 8vw, 96px) 0; }
.home-section--white { background: #fff; border-block: 1px solid #e8ecef; }
.home-section__header { display: flex; gap: 24px; align-items: end; justify-content: space-between; margin-bottom: 30px; }
.home-section__kicker { margin: 0 0 7px; color: #956f08; font-size: 11px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; }
.home-section__title { margin: 0; color: #172b3d; font-size: clamp(27px, 4vw, 38px); font-weight: 900; letter-spacing: -0.03em; }
.home-section__lead { max-width: 520px; margin: 10px 0 0; color: #687786; font-size: 14px; line-height: 1.8; }
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.topic-card { position: relative; overflow: hidden; min-height: 210px; padding: 24px; background: #fff; border: 1px solid #e0e5e9; border-radius: var(--radius-md); box-shadow: 0 8px 22px rgba(20, 39, 58, 0.05); }
.topic-card::after { content: attr(data-mark); position: absolute; right: -8px; bottom: -32px; color: rgba(49, 94, 155, 0.055); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 118px; font-weight: 900; }
.topic-card__number { display: inline-flex; color: #956f08; font-size: 11px; font-weight: 900; letter-spacing: 0.13em; }
.topic-card h3 { margin: 35px 0 10px; color: #20364a; font-size: 19px; }
.topic-card p { position: relative; z-index: 1; margin: 0; color: #687786; font-size: 13px; line-height: 1.75; }
.home-article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.home-article-card { overflow: hidden; background: #fff; border: 1px solid #e0e5e9; border-radius: var(--radius-md); box-shadow: 0 8px 22px rgba(20, 39, 58, 0.055); transition: transform .2s ease, box-shadow .2s ease; }
.home-article-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20, 39, 58, 0.1); }
.home-article-card__visual { display: grid; height: 150px; place-items: center; color: rgba(255, 255, 255, 0.94); background: linear-gradient(135deg, #17324d, #315e9b); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 54px; font-weight: 900; }
.home-article-card__image { display: block; width: 100%; height: 150px; object-fit: cover; background: #eef2f5; }
.home-article-card__body { padding: 20px; }
.home-article-card__meta { color: #956f08; font-size: 11px; font-weight: 800; }
.home-article-card h3 { margin: 9px 0; color: #20364a; font-size: 18px; line-height: 1.55; }
.home-article-card p { margin: 0; color: #687786; font-size: 13px; line-height: 1.75; }
.home-empty { display: grid; min-height: 245px; place-items: center; padding: 42px 24px; background: linear-gradient(145deg, #fff, #f8fafb); border: 1px dashed #cbd5dc; border-radius: var(--radius-md); text-align: center; }
.home-empty__mark { display: grid; width: 56px; height: 56px; margin: 0 auto 16px; place-items: center; color: #fff; background: linear-gradient(135deg, #17324d, #315e9b); border-radius: 50%; box-shadow: 0 10px 24px rgba(28, 60, 90, 0.18); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 22px; font-weight: 900; }
.home-empty h3 { margin: 0 0 8px; color: #20364a; font-size: 20px; }
.home-empty p { max-width: 510px; margin: 0; color: #71808d; font-size: 13px; line-height: 1.8; }
.show_sp { display: none; }
.preview-toolbar { position: sticky; z-index: 1000; top: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: 46px; padding: var(--space-2) var(--space-4); color: #fff; background: #1d2327; box-shadow: var(--shadow-sm); }
.preview-toolbar a { display: inline-flex; min-height: 30px; align-items: center; padding: 0 var(--space-3); color: #fff; border: 1px solid #fff; border-radius: var(--radius-xs); font-size: 13px; font-weight: 700; }
.preview-toolbar + .site-header { top: 46px; }
@media (max-width: 1000px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } .home-article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } .article-sidebar { display: none; } .article-toc--mobile { display: block; } .site-nav { display: none; } }
@media (max-width: 768px) { .site-tagline, .show_pc { display: none !important; } .show_sp { display: initial !important; } .breadcrumb { padding-block: 10px; } .article-page { padding-bottom: var(--space-8); } .article-card { padding: 20px 16px 28px; border-right: 0; border-left: 0; border-radius: 0; } .article-page__title { font-size: 27px; } .article-page__body { font-size: 15px; } .article-page__body h2 { margin-top: var(--space-10); padding: 13px 14px 13px 17px; font-size: 21px; } .article-page__body h3 { margin-top: var(--space-8); font-size: 18px; } .article-page__body ul, .article-page__body ol { padding: 15px 14px; } .article-page__body table { display: block; overflow-x: auto; white-space: nowrap; } .article-page__body .img_flex, .article-page__body .img_flex.reverse { flex-direction: column; } .article-page__body .pickup_box, .article-page__body .service_intro, .article-page__body .single_sv, .article-page__body .author_info_wrap, .article-page__body .author_info { grid-template-columns: 1fr; } .article-page__body .triple { grid-template-columns: 1fr; } .article-page__body .coding_example { display: block; } .article-page__body .coding_example__label, .article-page__body .coding_example__preview { border-left: 0; } .preview-toolbar { flex-wrap: wrap; gap: var(--space-2); padding-block: 7px; font-size: 12px; } .home-hero { padding-top: 52px; } .home-hero__title { font-size: 38px; } .home-trust__grid { grid-template-columns: 1fr; } .home-trust__item + .home-trust__item { border-top: 1px solid #e8ecef; border-left: 0; } .home-section__header { display: block; } .topic-grid, .home-article-grid { grid-template-columns: 1fr; } .topic-card { min-height: 175px; } }