/* カテゴリトップ共通レイアウト。ページ固有CSSより前に読み込む。 */
html {
  scroll-padding-top: 90px;
}

body {
  color: var(--gv-color-text-on-dark);
  background: var(--gv-color-bg-dark);
  font-family: var(--gv-font-family-body);
  -webkit-font-smoothing: antialiased;
}

.wrap,
.category-container {
  width: min(88%, var(--gv-content));
  margin-inline: auto;
}

.hero,
.category-hero {
  min-height: 0;
  width: 100%;
  padding: var(--gv-hero-padding-top) var(--gv-gutter) var(--gv-hero-padding-bottom);
}

.hero h1,
.category-hero__title {
  margin: 0;
  font-family: var(--gv-font-family-display);
  font-size: var(--gv-h1-size);
  font-weight: var(--gv-h1-weight);
  line-height: var(--gv-h1-line-height);
  letter-spacing: var(--gv-h1-letter-spacing);
}

.hero .sub,
.category-hero__subtitle {
  margin-top: var(--gv-h1-subtitle-gap);
  color: var(--gv-color-gold);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
}

.eyebrow,
.category-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--gv-section-heading-gap);
  font-size: var(--gv-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--gv-eyebrow-letter-spacing);
}

.eyebrow::before,
.category-eyebrow::before {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--gv-color-gold);
  content: "";
}

.section-number,
.category-section-number {
  margin: 0 0 var(--gv-section-number-gap);
  font-size: var(--gv-section-number-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
}

.category-section-title {
  margin: 0;
  font-size: var(--gv-section-title-size);
  font-weight: var(--gv-section-title-weight);
  line-height: var(--gv-section-title-line-height);
  letter-spacing: .025em;
}

.copy,
.category-copy {
  font-size: var(--gv-body-size);
  font-weight: var(--gv-body-weight);
  line-height: var(--gv-body-line-height);
  letter-spacing: .04em;
}

.category-surface-light {
  color: var(--gv-color-text-on-light);
  background: var(--gv-background-page-light);
}

.category-surface-light .copy,
.category-surface-light .category-copy {
  color: var(--gv-color-text-on-light-muted);
}

.category-surface-dark {
  color: var(--gv-color-text-on-dark);
}

.category-surface-dark .copy,
.category-surface-dark .category-copy {
  color: var(--gv-color-text-on-dark-muted);
}

@media (max-width: 768px) {
  .hero,
  .category-hero {
    padding-top: 96px;
  }
}

@media (max-width: 600px) {
  .eyebrow,
  .category-eyebrow {
    margin-bottom: 22px;
    font-size: var(--gv-eyebrow-size-mobile);
  }

  .copy,
  .category-copy {
    font-size: var(--gv-body-size-mobile);
  }
}

/* リスト・定義リストも本文と共通のウェイトを使用する。 */
.outcomes,
.outcomes li,
.delivery ul,
.delivery ol,
.delivery li,
.specs dd,
.detail-note {
  font-weight: var(--gv-body-weight);
}

/* FAQ共通UI。SOLUTIONを基準に全カテゴリへ展開する。 */
.faq-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8%; }
.faq-layout > .copy,
.faq-layout > div > .copy { margin-top: 20px; }
.faq-list details { border-top: 1px solid var(--gv-color-border-on-light); }
.faq-list details:last-child { border-bottom: 1px solid var(--gv-color-border-on-light); }
.faq-list details > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  padding: 22px 0;
  font-size: 15px;
  font-weight: var(--gv-body-weight);
  line-height: 1.8;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before {
  content: "Q.";
  font-family: var(--gv-font-family-display);
  align-self: flex-start;
  font-size: 17px;
  flex: none;
}
.faq-list summary > span {
  margin-left: auto;
  font-size: 20px;
  flex: none;
  transition: rotate .35s;
}
.faq-list details[open] > summary > span { rotate: 45deg; }
.faq-list details > summary[aria-expanded="false"] > span { rotate: 0deg; }
.faq-answer { overflow: hidden; }
.faq-list .faq-answer .copy { padding: 24px 30px; }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 600px) {
  .faq-list details > summary { font-size: 14px; gap: 12px; }
  .faq-list .faq-answer .copy { padding-inline: 0; }
}