/* =============================================
 * base.css
 * ============================================= */
/*
 * base.css
 * Base Styles — Typography / Container / Button / Section
 * -----------------------------------------------
 */

/* =============================================
 * Root font size
 * ============================================= */
html {
  font-size: 16px;
}

/* =============================================
 * Body
 * ============================================= */
body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-base);
  line-height: var(--lh-base);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--ls-base);
}

/* =============================================
 * Headings
 * ============================================= */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}

h4,
h5,
h6 {
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  color: var(--color-text-base);
  line-height: var(--lh-snug);
}

h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }

/* =============================================
 * Links
 * ============================================= */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

a:hover {
  opacity: 0.8;
}

a:focus-visible {
  outline: 2px solid var(--color-accent-orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* =============================================
 * Container
 * ============================================= */
.container {
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--container-padding-x-pc);
}

.container--narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--container-padding-x-pc);
}

.container--wide {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding-x-pc);
}

@media (max-width: 768px) {
  .container,
  .container--narrow,
  .container--wide {
    padding-inline: var(--container-padding-x-sp);
  }
}

/* =============================================
 * Buttons
 * ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  line-height: 1;
  transition: background-color var(--transition-base),
              opacity var(--transition-base),
              box-shadow var(--transition-base);
  cursor: pointer;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent-orange);
  outline-offset: 3px;
}

.btn--orange {
  background-color: var(--color-accent-orange);
  color: var(--color-text-on-dark);
}

.btn--orange:hover {
  background-color: var(--color-accent-orange-hover);
  opacity: 1;
}

.btn--green {
  background-color: var(--color-accent-green);
  color: var(--color-text-on-dark);
}

.btn--green:hover {
  background-color: var(--color-accent-green-light);
  opacity: 1;
}

.btn--navy {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.btn--navy:hover {
  background-color: var(--color-primary-dark);
  opacity: 1;
}

/* =============================================
 * Section
 * ============================================= */
.section {
  padding-block: var(--space-12);
}

@media (max-width: 768px) {
  .section {
    padding-block: var(--space-10);
  }
}

/* =============================================
 * Section Title
 * 黄色罫線（accent-yellow）によるアンダーライン装飾
 * .section-title__line を子要素として使うか、
 * ::after 疑似要素で実装するベーススタイル
 * ============================================= */
.section-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  position: relative;
  display: inline-block;
}

.section-title__line {
  display: block;
  width: 40px;
  height: 3px;
  background-color: var(--color-accent-yellow);
  margin-top: var(--space-3);
}

/* =============================================
 * Utility — visually-hidden (sr-only)
 * ============================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* =============================================
 * Utility — レスポンシブ改行
 * ============================================= */
.sp-only { display: none; }
@media (max-width: 767px) {
  .sp-only { display: inline; }
  .pc-only { display: none; }
}

/* =============================================
 * header.css
 * ============================================= */
/*
 * header.css
 * Header & Footer共通要素スタイル
 * -----------------------------------------------
 */

/* =============================================
 * Header — 固定ヘッダー
 * ============================================= */
.header {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--header-height-pc);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-header);
  transition: box-shadow var(--transition-base);
}

.header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding-x-pc);
}

/* =============================================
 * Header — Logo
 * ============================================= */
.header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header__logo img {
  width: auto;
  max-width: 200px;
  height: auto;
  max-height: calc(var(--header-height-pc) - 24px);
  loading: eager;
}

/* =============================================
 * Header — Navigation
 * ============================================= */
.header__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__nav-item {}

.header__nav-link {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-base),
              border-color var(--transition-base);
}

.header__nav-link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent-yellow);
  opacity: 1;
}

/* =============================================
 * Header — CTA Button（トール型・右端固定）
 * ============================================= */
.header__cta {
  flex-shrink: 0;
}

.header__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--header-height-pc);
  padding-inline: var(--space-7);
  background-color: var(--color-accent-orange);
  color: var(--color-text-on-dark);
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
  text-decoration: none;
  /* ヘッダー右端からぴったり張り付ける */
  margin-right: calc(var(--container-padding-x-pc) * -1);
}

.header__cta-btn:hover {
  background-color: var(--color-accent-orange-hover);
  opacity: 1;
}

.header__cta-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.header__cta-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* =============================================
 * Header — Hamburger（SP用）
 * ============================================= */
.header__hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.header__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-base),
              opacity var(--transition-base);
  transform-origin: center;
}

/* ハンバーガー → × アニメーション */
.header__hamburger[aria-expanded="true"] .header__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__hamburger[aria-expanded="true"] .header__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header__hamburger[aria-expanded="true"] .header__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =============================================
 * Header — SP ドロワーメニュー
 * ============================================= */
.header__drawer {
  display: none;
  position: fixed;
  top: var(--header-height-sp);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg);
  z-index: calc(var(--z-header) - 1);
  overflow-y: auto;
  padding: var(--space-6) var(--container-padding-x-sp);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
}

.header__drawer.is-open {
  transform: translateX(0);
}

.header__drawer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.header__drawer-nav-item {
  border-bottom: 1px solid var(--color-border-soft);
}

.header__drawer-nav-link {
  display: block;
  padding-block: var(--space-5);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-text-base);
  letter-spacing: var(--ls-wide);
}

.header__drawer-cta {
  margin-top: var(--space-6);
  text-align: center;
}

.header__drawer-cta .btn {
  width: 100%;
  max-width: 320px;
  padding-block: var(--space-5);
  font-size: var(--fs-md);
}

/* =============================================
 * Body scroll lock（メニュー開時）
 * ============================================= */
body.is-menu-open {
  overflow: hidden;
}

/* =============================================
 * SP レスポンシブ（〜768px）
 * ============================================= */
@media (max-width: 768px) {
  .header {
    height: var(--header-height-sp);
  }

  .header__inner {
    padding-inline: var(--container-padding-x-sp);
  }

  /* ロゴ縮小 */
  .header__logo img {
    max-width: 140px;
    max-height: calc(var(--header-height-sp) - 16px);
  }

  /* PC ナビ非表示 */
  .header__nav {
    display: none;
  }

  /* SP ハンバーガー表示（ヘッダー高さに合わせた正方形・右端まで） */
  .header__hamburger {
    display: flex;
    width: var(--header-height-sp);
    height: var(--header-height-sp);
    margin-right: calc(var(--container-padding-x-sp) * -1);
    background-color: var(--color-primary);
  }

  /* SP ではボタン背景がネイビーになるためラインは白に反転 */
  .header__hamburger-line {
    background-color: var(--color-bg);
  }

  /* SP では CTA をハンバーガーと密着させる（ロゴとの間に余白を寄せる） */
  .header__cta {
    margin-left: auto;
  }

  /* SP CTAボタン — アイコンのみの正方形 */
  .header__cta-btn {
    width: var(--header-height-sp);
    height: var(--header-height-sp);
    padding-inline: 0;
    gap: 0;
    margin-right: 0;
  }

  /* SP では文字を非表示にしアイコンのみ表示（aria-label でラベルは保持） */
  .header__cta-label {
    display: none;
  }

  .header__cta-icon {
    width: 20px;
    height: 20px;
  }

  /* SP ドロワー表示 */
  .header__drawer {
    display: block;
  }
}

/* =============================================
 * Footer — 下段共通フッター
 * ============================================= */
.footer {}

.footer__bottom {
  background-color: #ffffff;
  padding-block: var(--space-6);
}

.footer__bottom-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--container-padding-x-pc);
}

/* フッターロゴ */
.footer__logo {
  display: block;
  flex-shrink: 0;
}

.footer__logo img {
  width: auto;
  max-width: 200px;
  height: auto;
}

/* フッターリンク */
.footer__links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  list-style: none;
  padding: 0;
  margin: 0 auto 0 var(--space-8);
  flex-wrap: wrap;
  justify-content: flex-start;
}

.footer__links-item {}

.footer__links-link {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  color: var(--color-text-base);
  letter-spacing: var(--ls-base);
  transition: opacity var(--transition-base);
}

.footer__links-link:hover {
  opacity: 0.6;
}

.footer__links-separator {
  display: none;
}

/* コピーライト */
.footer__copyright {
  font-family: var(--font-en-serif);
  font-size: var(--fs-sm);
  color: var(--color-text-base);
  letter-spacing: var(--ls-base);
  text-align: right;
  flex-shrink: 0;
}

/* =============================================
 * Footer — SP レスポンシブ
 * ============================================= */
@media (max-width: 768px) {
  .footer__bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: var(--container-padding-x-sp);
    gap: var(--space-4);
  }

  .footer__links {
    gap: var(--space-4);
    margin: 0;
    justify-content: center;
  }

  .footer__copyright {
    text-align: center;
  }
}

/* =============================================
 * sections/hero.css
 * ============================================= */
/*
 * sections/hero.css
 * Hero セクション — 02_hero
 * -----------------------------------------------
 * 実装基準: desktop_02_hero.jpg / mobile_02_hero.jpg
 * 基準解像度: 1920px
 *
 * HTML 構成（hero__inner の直接の子）:
 *   [1] .hero__content  — リードコピー + タイトル画像
 *   [2] .hero__product  — 商品箱写真
 *   [3] .hero__meta     — バッジ + 注釈テキスト
 */

/* =============================================
 * Hero セクション — ラッパー
 * フルワイド背景画像 + 最小高さ指定
 * ============================================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 700px;
  background-image: url('../images/hero/bg.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* 左コンテンツエリアの可読性確保 — 半透明グラデーションオーバーレイ */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(250, 246, 232, 1.00) 0%,
    rgba(250, 246, 232, 0.85) 48%,
    rgba(250, 246, 232, 0.20) 62%,
    rgba(255, 255, 255, 0.00) 75%
  );
  z-index: 0;
  pointer-events: none;
}

/* =============================================
 * Hero インナーコンテナ
 * grid 2カラム構成:
 *   第1カラム（最大540px）: テキストコンテンツ
 *   第2カラム（残り）     : 商品写真
 *   第2行（全幅）         : バッジ + 注釈テキスト
 * ============================================= */
.hero__inner {
  position: relative;
  z-index: var(--z-base, 1);
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 40px;
  display: grid;
  grid-template-columns: minmax(0, 540px) 1fr;
  grid-template-rows: auto;
  align-items: center;
  gap: 0;
  min-height: 700px;
}

/* =============================================
 * 左カラム — テキスト塊（content + meta）
 * ヒーロー高さに対して縦中央配置
 * ============================================= */
.hero__main {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  max-width: 540px;
  z-index: var(--z-base, 1);
}

/* =============================================
 * [1] 左カラム — テキストコンテンツ
 * grid-column: 1 / 2 / grid-row: 1 / 2
 * ============================================= */
.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 540px;
  z-index: var(--z-base, 1);
}

/* =============================================
 * リードコピー（2行）
 * 明朝体 / clamp で流動的サイズ / line-height 1.8
 * 上限 19px は line1（1.275em 倍率）も含めて hero__main 540px に
 * 収まる最大値（19 * 1.1 * 1.275 * 19文字 * 1.04(letter-spacing) ≈ 526px）。
 * これ以上大きい画面ではフォントサイズを固定し、
 * 製品画像との重なりが発生しないようにする。
 * ============================================= */
.hero__lead {
  font-family: var(--font-heading);
  font-size: calc(clamp(var(--fs-md), 1.25vw, 19px) * 1.1);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-base);
  margin-bottom: var(--space-3);
  white-space: nowrap;
  text-align: center;
}

/* 1行目だけ大きく（2行目と行頭・行尾が揃う比率） */
.hero__lead-line1 {
  font-size: 1.275em;
}

/* =============================================
 * タイトル画像ブロック（毛筆ロゴ）
 * ============================================= */
.hero__title-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* h1 — visually-hidden（SEO用。視覚非表示・スクリーンリーダー読み上げ有効） */
.hero__h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 毛筆タイトル画像 — product との間に余白を残すため max は 450px（旧500pxから90%）
 * 親ブロック内で中央寄せ */
.hero__title-img {
  display: block;
  width: 100%;
  max-width: 450px;
  height: auto;
  margin-inline: auto;
}

/* =============================================
 * [2] 右カラム — 商品箱写真
 * grid-column: 2 / 3 / grid-row: 1 / 2
 * ============================================= */
.hero__product {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: center;
  justify-self: start;
  display: flex;
  align-items: center;
  z-index: var(--z-base, 1);
}

/* 商品箱写真（透過PNG）
 * scale(0.8) で視覚幅 320px、transform-origin: right bottom で右端基準。
 * translate X = -111px（=-126+15）で全体を 15px 右へ寄せた最終位置。
 * translate Y = -52px は縦方向の上方移動。 */
.hero__product-img {
  display: block;
  width: auto;
  max-width: 400px;
  max-height: 540px;
  height: auto;
  object-fit: contain;
  transform: translate(-111px, -52px) scale(0.8);
  transform-origin: right bottom;
}

/* =============================================
 * [3] 下段全幅 — バッジ + 注釈テキスト
 * grid-column: 1 / 3 / grid-row: 2 / 3
 * ============================================= */
.hero__meta {
  z-index: var(--z-base, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* 「第2類医薬品」バッジ */
.hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-base);
  padding: var(--space-2) var(--space-4);
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 注釈テキスト（効能一覧） */
.hero__tags {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-base);
}


/* =============================================
 * Responsive — 中間幅 (768px〜1329px)
 * テキストはロゴ幅に揃え、商品画像は左カラムの右側に
 * 絶対配置して背景写真の人物との重なりを回避
 * ============================================= */
@media (min-width: 768px) and (max-width: 1329px) {
  .hero {
    min-height: 500px;
  }

  .hero__inner {
    position: relative;
    grid-template-columns: minmax(0, 480px) 1fr;
    min-height: 500px;
    padding: 40px var(--space-7);
  }

  .hero__main {
    max-width: 480px;
  }

  .hero__content {
    max-width: 480px;
    gap: var(--space-3);
  }

  .hero__lead {
    font-size: clamp(13px, 1.3vw, 17px);
  }

  .hero__title-img {
    max-width: 342px;
  }

  /* 商品画像: タイトル右端の右側に絶対配置
     タイトルが main(480px)内で中央寄せされるため右端 = main_left + (480-342)/2 + 342 = 451
     product 左下限 470px で 19px の余白を確保（背景の子供と重なるのは許容） */
  .hero__product {
    position: absolute;
    top: 50%;
    left: clamp(470px, 38%, 500px);
    transform: translateY(-50%);
    grid-column: unset;
    grid-row: unset;
    justify-self: auto;
    align-self: auto;
  }

  /* 中間幅でも極端に小さくならないよう底上げ */
  .hero__product-img {
    max-width: clamp(200px, 19vw, 250px);
    max-height: 340px;
    transform: none;
  }

  .hero__meta {
    padding-bottom: var(--space-8);
  }
}


/* =============================================
 * Responsive — 中間幅 (1330px〜1440px)
 * デスクトップ既定の grid 配置だと product が大きく
 * 背景の子供の頭と被ってしまうため、この帯だけ少し小さく＋
 * タイトル寄りに絶対配置する。
 * 1441px以上(320px)からの段差を抑えるため 290px とする。
 * ============================================= */
@media (min-width: 1330px) and (max-width: 1440px) {
  .hero__inner {
    position: relative;
  }

  .hero__product {
    position: absolute;
    top: 50%;
    left: clamp(530px, calc(50vw - 130px), 580px);
    transform: translateY(-50%);
    grid-column: unset;
    grid-row: unset;
    justify-self: auto;
    align-self: auto;
  }

  .hero__product-img {
    max-width: clamp(260px, 22vw, 290px);
    max-height: 380px;
    transform: none;
  }
}


/* =============================================
 * Responsive — 中間幅 (1100px〜1329px)
 * 上記タブレット @media のサイズだと product が文字側に寄りすぎて
 * 小さく見えるため、この帯だけ product をもう一回り拡大 + 右へ移動。
 * ============================================= */
@media (min-width: 1100px) and (max-width: 1329px) {
  .hero__product {
    left: clamp(440px, 37%, 490px);
  }

  .hero__product-img {
    max-width: clamp(245px, 23vw, 290px);
    max-height: 380px;
  }
}


/* =============================================
 * Responsive — SP (〜767px)
 *
 * SPのデザイン構成（mobile_02_hero.jpg 準拠）:
 *   [order 1] .hero__content  — 白背景 / リードコピー + タイトル画像
 *   [order 2] .hero__product  — 背景写真全幅 + 商品写真オーバーレイ
 *   [order 3] .hero__meta     — 白背景 / バッジ + 注釈
 * ============================================= */
@media (max-width: 767px) {

  /* SP: .hero は背景なし、縦積みブロック */
  .hero {
    min-height: auto;
    background-image: none;
    background-color: var(--color-bg);
    overflow: visible;
  }

  /* SP: innerをflexboxの縦積みに変更（grid から flex へ切り替え） */
  .hero__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    min-height: auto;
    max-width: 100%;
    /* 背景は inner に集約（PC版と同じ薄ベージュ）。hero__content は透明にしてタイトル画像下を背景画像で透ける */
    background-color: var(--color-bg-cream-soft);
  }

  /* SP: hero__main wrapper を解除して子を inner の flex フローに直接展開 */
  .hero__main {
    display: contents;
  }

  /* [1] テキストコンテンツ（透明・タイトル画像が前面） */
  .hero__content {
    order: 1;
    max-width: 100%;
    width: 100%;
    padding-inline: var(--container-padding-x-sp);
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
    gap: var(--space-3);
    background-color: transparent;
    align-self: auto;
    /* タイトル画像を背景写真の上に重ねる */
    position: relative;
    z-index: 2;
  }

  .hero__lead {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    white-space: nowrap;
    text-align: center;
  }

  /* SPでは1行目の拡大率を控えめに（PCの1.275より小さく） */
  .hero__lead-line1 {
    font-size: 1.16em;
  }

  .hero__title-img {
    max-width: 100%;
    width: 100%;
  }

  /* [2] 商品箱写真（背景写真エリア）
     SP: 背景画像は幅でフィット、商品画像は背景の外（下方向）へはみ出す */
  .hero__product {
    grid-column: unset;
    grid-row: unset;
    order: 2;
    width: 100%;
    /* SP専用: 背景写真は contain で幅フィット（上揃え） */
    background-image: url('../images/hero/bg_sp.webp');
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    /* 背景画像の外（画像の下側）は薄グレー */
    background-color: var(--color-bg-alt);
    /* 高さ = 背景画像の高さ(=100vw * 639/1000) + 商品はみ出し分 190px（商品の約2/3が背景外）*/
    min-height: calc(100vw * 639 / 1000 + 190px);
    /* 上方向へオーバーラップ → 背景写真がタイトル画像の下に潜り込む */
    margin-top: -40px;
    /* 商品写真を中央下寄せ（下端は container 下端 = 背景の外） */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    justify-self: auto;
    align-self: auto;
    overflow: visible;
    position: relative;
    z-index: 1;
  }

  .hero__product-img {
    display: block;
    width: auto;
    max-width: min(62vw, 260px);
    max-height: none;
    height: auto;
    align-self: flex-end;
    object-fit: contain;
    position: relative;
    z-index: var(--z-base);
    /* SP: 等倍で中央下寄せ（一部が背景の外へはみ出す） */
    transform: none;
    transform-origin: center bottom;
    margin: 0;
  }

  /* [3] バッジ + 注釈テキスト（薄グレー背景・下段、中央揃え） */
  .hero__meta {
    grid-column: unset;
    grid-row: unset;
    order: 3;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding-inline: var(--container-padding-x-sp);
    padding-top: 0;
    padding-bottom: var(--space-6);
    margin-top: 0;
    background-color: var(--color-bg-alt);
    align-self: auto;
    text-align: center;
  }

  .hero__badge {
    font-size: var(--fs-xs);
    padding: var(--space-2) var(--space-4);
  }

  .hero__tags {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
  }
}

/* =============================================
 * sections/point.css
 * ============================================= */
/*
 * sections/point.css
 * 03_point セクション
 * 御岳百草丸 5種類の生薬 / Pointリスト / 効能効果
 */

/* -----------------------------------------------
 * セクション全体
 * ----------------------------------------------- */
.point {
  background-color: var(--color-bg-alt);
  padding: 0 var(--container-padding-x-pc) var(--space-12);
  position: relative;
  /* マージン相殺を防ぎ、カードだけ上に逃がす */
  display: flow-root;
}

/* -----------------------------------------------
 * カード
 * 白背景・角丸・影・中央寄せ
 * 植物イラストは position: absolute で重ねる
 * ----------------------------------------------- */
.point__card {
  position: relative;
  max-width: var(--container-default);
  margin: 0 auto;
  background-color: var(--color-bg);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  padding: var(--space-10) var(--space-9);
  overflow: visible;
  /* hero セクションへ 50px 被せる（カード本体だけが浮き出る） */
  margin-top: -50px;
  z-index: 2;
}

/* -----------------------------------------------
 * 植物イラスト（装飾）
 * ----------------------------------------------- */
.point__decoration {
  position: absolute;
  top: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.point__decoration--left {
  left: 0;
  width: 200px;
}

.point__decoration--right {
  right: 0;
  width: 190px;
}

/* -----------------------------------------------
 * カード内コンテンツ全体（植物より前面）
 * 左右に植物イラストの幅分だけ余白を確保
 * ----------------------------------------------- */
.point__body {
  position: relative;
  z-index: 1;
  padding-left: 180px;
  padding-right: 170px;
}

/* -----------------------------------------------
 * h2 大見出し
 * ----------------------------------------------- */
.point__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl); /* 32px */
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-snug); /* 1.5 */
  text-align: center;
  letter-spacing: var(--ls-base);
  margin: 0 0 var(--space-5) 0;
}

/* 見出し直下の黄色装飾線 */
.point__heading::after {
  content: '';
  display: block;
  width: 400px;
  max-width: 100%;
  height: 4px;
  background-color: var(--color-accent-yellow);
  margin: var(--space-5) auto 0;
}

/* -----------------------------------------------
 * リードコピー
 * ----------------------------------------------- */
.point__lead {
  font-family: var(--font-heading);
  font-size: var(--fs-lg); /* 18px */
  font-weight: var(--fw-bold);
  color: var(--color-text-base);
  line-height: var(--lh-relaxed); /* 2.0 */
  text-align: center;
  letter-spacing: var(--ls-base);
  margin: 0 0 var(--space-7) 0;
}

/* -----------------------------------------------
 * コールアウト（クリーム背景ボックス）
 * ----------------------------------------------- */
.point__callout {
  background-color: rgba(248, 228, 142, 0.15);
  border-radius: 0;
  /* card 全幅に帯を広げる: card padding (var(--space-9)=64) + body padding (左180 / 右170) を打ち消す */
  margin-left: calc(var(--space-9) * -1 - 180px);
  margin-right: calc(var(--space-9) * -1 - 170px);
  margin-bottom: var(--space-9);
  padding: var(--space-6) var(--space-9);
  max-width: none;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fs-md); /* 16px */
  font-weight: var(--fw-regular);
  color: var(--color-text-base);
  line-height: var(--lh-base); /* 1.8 */
  letter-spacing: var(--ls-base);
}

/* -----------------------------------------------
 * Point リスト — サムネ画像を card 端まで張り出す
 * ----------------------------------------------- */
.point__list {
  list-style: none;
  padding: 0;
  /* card 全幅から両脇 60px 内側に余白を確保 */
  margin-left: calc(-1 * (var(--space-9) + 180px - 60px));
  margin-right: calc(-1 * (var(--space-9) + 170px - 60px));
}

.point__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-9);
  padding-block: 0;
  padding-inline: 0;
  margin-top: -80px;
}

/* 最初の item は callout から 40px 余白を確保 */
.point__item:first-child {
  margin-top: 40px;
}

/* 偶数番目（Point 2）は方向を逆にする */
.point__item--reverse {
  flex-direction: row-reverse;
}

/* サムネイル（丸型）エリア */
.point__thumb-wrap {
  flex: 0 0 240px;
  width: 240px;
  height: 240px;
}

.point__thumb {
  display: block;
  width: 240px;
  height: 240px;
  border-radius: var(--radius-circle); /* 50% */
  object-fit: cover;
}

/* テキストエリア */
.point__item-text {
  flex: 1;
  min-width: 0;
  position: relative;
  /* デフォルト: 画像が左、テキスト右 → 右側に余白 */
  padding-right: 120px;
}

/* reverse: テキストが左、画像が右 → サムネ幅+gap分の左余白で先頭を Point 1/3 と揃える */
.point__item--reverse .point__item-text {
  padding-right: 0;
  padding-left: calc(240px + var(--space-9));
}

/* テキスト側に伸びる横線（サムネ画像の縦中央位置から、サムネと反対方向へ） */
.point__item-text::after {
  content: '';
  position: absolute;
  top: 120px; /* サムネ画像高さ240pxの中央 */
  /* サムネ側 (左) は gap 分まで延長してサムネにくっつける */
  left: calc(-1 * var(--space-9));
  right: 0;
  height: 1px;
  background-color: #999999;
}

/* reverse はサムネが右なので、線は右側に gap 分延長 */
.point__item--reverse .point__item-text::after {
  left: 0;
  right: calc(-1 * var(--space-9));
}

/* "Point N" ラベル */
.point__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-md); /* 13px → 16px (2まわり大) */
  font-weight: var(--fw-medium);
  color: var(--color-accent-gold);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-2);
}

/* "Point N" の数字部分（さらに2まわり大） */
.point__label-num {
  font-size: var(--fs-2xl); /* 24px */
  font-weight: var(--fw-medium);
  vertical-align: -2px;
}

/* ポイントタイトル（h3） */
.point__item-title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl); /* 24px */
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-base);
  margin: 0;
}

/* -----------------------------------------------
 * 効能・効果テキスト — Point 3 のテキスト位置に揃える
 * ----------------------------------------------- */
.point__effects {
  /* Point 3 のテキスト x 位置に合わせる:
     body content area 0 から、サムネ width(280) - body padding-left(180) = 100 の位置 */
  padding-left: 100px;
  padding-right: 120px;
  padding-top: 0;
  padding-bottom: var(--space-7);
  margin: 0;
  margin-top: -80px;
}

.point__effects-main {
  font-family: var(--font-base);
  font-size: var(--fs-sm); /* 13px */
  color: var(--color-text-base);
  line-height: 1.8;
  letter-spacing: var(--ls-base);
  margin: 0 0 var(--space-5) 0;
}

.point__effects-main strong {
  font-weight: var(--fw-medium);
}

.point__effects-divider {
  border: none;
  border-top: 1px dashed var(--color-divider);
  margin: var(--space-4) 0;
}

.point__effects-accent {
  font-family: var(--font-heading);
  font-size: var(--fs-md); /* 16px */
  font-weight: var(--fw-bold);
  color: #a06f2e;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-base);
  margin: 0;
}

/* -----------------------------------------------
 * タブレット（768px〜1023px）— SPレイアウトに統一
 * PCの3カラム+装飾パディングが破綻するため SP と同じ縦積みに
 * ----------------------------------------------- */
@media (max-width: 1023px) {

  .point {
    padding: var(--space-9) var(--container-padding-x-sp);
    /* SP は hero に被らせない（PC専用挙動を打ち消し） */
    margin-top: 0;
    background-color: var(--color-bg);
  }

  .point__card {
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-5);
    overflow: hidden; /* SP は植物をカード内に収める */
    /* SP では hero への被せを打ち消し */
    margin-top: 0;
    /* SP は白カードに戻す */
    background-color: var(--color-bg);
  }

  /* SP では見出し下の装飾線は非表示 */
  .point__heading::after {
    display: none;
  }

  /* SP のコールアウトはクリーム枠を維持 */
  .point__callout {
    background-color: var(--color-bg-cream-soft);
    border-radius: var(--radius-md);
  }

  /* SP では植物イラストを小さく */
  .point__decoration--left {
    width: 90px;
  }

  .point__decoration--right {
    width: 80px;
  }

  /* SP では body の内側パディングを解除 */
  .point__body {
    padding-left: 0;
    padding-right: 0;
  }

  .point__heading {
    font-size: var(--fs-xl); /* 20px */
    line-height: var(--lh-snug);
    margin-bottom: var(--space-4);
  }

  .point__lead {
    font-size: var(--fs-base); /* 15px */
    margin-bottom: var(--space-6);
    text-align: left;
  }

  .point__callout {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    font-size: var(--fs-base);
    margin-bottom: var(--space-6);
    margin-left: 0;
    margin-right: 0;
  }

  .point__list {
    margin-left: 0;
    margin-right: 0;
  }

  /* SP: Pointアイテムを縦積み（サムネ中央 → テキスト下） */
  .point__item {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    margin-top: 0;
  }

  .point__item:first-child {
    margin-top: 0;
  }

  /* SP: Point 2（reverse）も縦積みに統一 */
  .point__item--reverse {
    flex-direction: column;
    align-items: center;
  }

  .point__item-text,
  .point__item--reverse .point__item-text {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  .point__item-text::after,
  .point__item--reverse .point__item-text::after {
    display: none;
  }

  .point__thumb-wrap {
    flex: none;
    width: 140px;
    height: 140px;
    align-self: center;
  }

  .point__thumb {
    width: 140px;
    height: 140px;
  }

  .point__item-text {
    width: 100%;
  }

  .point__item-title {
    font-size: var(--fs-xl); /* 20px */
  }

  /* Pointラベルの上下余白を圧縮（約1/3） */
  .point__label {
    margin-top: 0;
    margin-bottom: 3px;
    line-height: 1.2;
  }

  .point__effects {
    margin-top: var(--space-6);
    padding: var(--space-6) 0 var(--space-4);
  }

  .point__effects-main {
    font-size: var(--fs-xs); /* 12px */
  }

  .point__effects-accent {
    font-size: var(--fs-xs); /* 12px */
  }
}

/* =============================================
 * sections/case.css
 * ============================================= */
/*
 * sections/case.css
 * 04_case セクション
 * 上半分: グレー背景 + 4カラムケースリスト
 * 下半分: 自然写真背景 CTA バンド
 */

/* ===============================================
 * セクション全体ラッパー
 * =============================================== */
.case {
  /* 背景は上半分(case__upper)で設定し、下半分(case__cta)は独自背景 */
}

/* ===============================================
 * 上半分 — グレー背景エリア
 * =============================================== */
.case__upper {
  background-color: var(--color-bg);
  padding: var(--space-12) var(--container-padding-x-pc) var(--space-7);
}

/* -----------------------------------------------
 * セクション見出し
 * ----------------------------------------------- */
.case__header {
  text-align: center;
  margin-bottom: var(--space-9); /* 64px */
}

.case__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl); /* 28px */
  font-weight: var(--fw-bold);
  color: #1d5035;
  line-height: var(--lh-tight); /* 1.3 */
  letter-spacing: var(--ls-base);
  text-align: center;
  margin: 0 0 var(--space-3) 0;
}

/* 「ありませんか？」行（2行目を別ブロック表示） */
.case__heading-sub {
  display: block;
}

/* 見出し直下の黄色アクセントライン */
.case__heading-line {
  display: block;
  width: 400px;
  max-width: 100%;
  height: 3px;
  background-color: #1d5035;
  margin: var(--space-3) auto var(--space-5) auto;
}

/* リードテキスト */
.case__lead {
  font-family: var(--font-heading);
  font-size: var(--fs-lg); /* 18px */
  font-weight: var(--fw-bold);
  color: var(--color-text-secondary); /* #666666 */
  line-height: var(--lh-base); /* 1.8 */
  letter-spacing: var(--ls-base);
  text-align: center;
  margin: 0;
}

/* -----------------------------------------------
 * ケースリスト — 4カラム
 * ----------------------------------------------- */
.case__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--container-default); /* 1200px */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6); /* 32px */
}

/* -----------------------------------------------
 * ケースカード — 各アイテム
 * ----------------------------------------------- */
.case__item {
  display: flex;
  flex-direction: column;
}

/* サムネイルラッパー — 数字装飾のアンカー */
.case__thumb-wrap {
  position: relative;
  margin-bottom: var(--space-4); /* 16px */
}

/* 症状イラスト写真 */
.case__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 341 / 317;
  object-fit: cover;
  border-radius: var(--radius-md); /* 8px */
}

/* 装飾数字 — 非表示 */
.case__number {
  display: none;
}

/* -----------------------------------------------
 * カードのテキスト部分
 * ----------------------------------------------- */
.case__item-body {
  flex: 1;
  padding-top: 0;
  text-align: center;
}

/* カードタイトル（症状名）— 下に区切り線 */
.case__item-title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg); /* 18px */
  font-weight: var(--fw-bold);
  color: var(--color-text-base); /* #333333 */
  line-height: var(--lh-snug); /* 1.5 */
  letter-spacing: var(--ls-base);
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* カードサブテキスト（効能名） */
.case__item-sub {
  font-family: var(--font-heading);
  font-size: var(--fs-base); /* 15px */
  font-weight: var(--fw-bold);
  color: var(--color-text-secondary); /* #666666 */
  line-height: var(--lh-base); /* 1.8 */
  letter-spacing: var(--ls-base);
  margin: 0;
  white-space: pre-line;
}

/* ===============================================
 * 下半分 — CTA バンド（自然写真背景）
 * =============================================== */
.case__cta {
  position: relative;
  background-image: url("../images/case/bg.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding: var(--space-11) var(--container-padding-x-pc); /* 上下 96px */
  text-align: center;
}

/* コンテンツエリア（最大幅制限） */
.case__cta-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-default);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6); /* 32px */
}

/* リードコピー */
.case__cta-lead {
  font-family: var(--font-heading);
  font-size: var(--fs-xl); /* 20px */
  font-weight: var(--fw-bold);
  color: var(--color-text); /* #342F6E */
  line-height: var(--lh-snug); /* 1.5 */
  letter-spacing: var(--ls-base);
  text-align: center;
  margin: 0;
}

/* ロゴ画像（御岳百草丸 毛筆） */
.case__cta-logo {
  display: block;
  width: 313px;
  max-width: 100%;
  height: auto;
}

/* -----------------------------------------------
 * チェック項目リスト
 * ----------------------------------------------- */
.case__checks {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-5); /* 24px */
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/* 各チェック項目 — 白背景ピル型 */
.case__check-item {
  display: flex;
  align-items: center;
  gap: var(--space-2); /* 8px */
  background-color: #ffffff;
  border-radius: var(--radius-pill); /* 9999px */
  padding: 12px 24px;
  box-shadow: var(--shadow-md); /* 0 4px 12px rgba(0,0,0,0.08) */
}

/* チェックアイコン */
.case__check-icon {
  display: block;
  width: 33px;
  height: 31px;
  flex-shrink: 0;
}

/* チェックラベルテキスト */
.case__check-label {
  font-family: var(--font-heading);
  font-size: var(--fs-lg); /* 18px */
  font-weight: var(--fw-bold);
  color: var(--color-text-base); /* #333333 */
  letter-spacing: var(--ls-base);
  white-space: nowrap;
}

/* ===============================================
 * SP レスポンシブ（768px 未満）
 * =============================================== */
@media (max-width: 767px) {

  /* 上半分 */
  .case__upper {
    padding: var(--space-9) var(--container-padding-x-sp); /* 64px 20px */
  }

  .case__header {
    margin-bottom: var(--space-7); /* 40px */
  }

  .case__heading {
    font-size: var(--fs-2xl); /* 24px */
    line-height: var(--lh-snug); /* 1.5 */
  }

  .case__lead {
    font-size: var(--fs-base); /* 15px */
  }

  /* 4カラム → 2カラム */
  .case__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--space-4); /* 行32px / 列16px */
    max-width: 360px;
  }

  .case__number {
    font-size: 40px;
    top: -12px;
    right: 4px;
  }

  .case__thumb-wrap {
    margin-bottom: var(--space-3);
  }

  .case__item-title {
    font-size: var(--fs-sm); /* 13px */
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .case__item-sub {
    font-size: var(--fs-sm); /* 13px */
    line-height: var(--lh-snug);
  }

  /* CTA バンド */
  .case__cta {
    padding: var(--space-9) var(--container-padding-x-sp); /* 64px 20px */
  }

  .case__cta-inner {
    gap: var(--space-5); /* 24px */
  }

  .case__cta-lead {
    font-size: var(--fs-md); /* 16px */
  }

  .case__cta-logo {
    width: 220px;
  }

  /* チェック項目 → 縦積み */
  .case__checks {
    flex-direction: column;
    gap: var(--space-3); /* 12px */
    align-items: stretch;
    width: 100%;
    max-width: 320px;
  }

  .case__check-item {
    justify-content: center;
    padding: 10px 20px;
  }

  .case__check-label {
    font-size: var(--fs-base); /* 15px */
  }
}

/* =============================================
 * sections/secret.css
 * ============================================= */
/*
 * sections/secret.css
 * 05_secret セクション
 * 効果のヒミツ — 5種類の生薬カード
 */

/* -----------------------------------------------
 * セクション全体
 * ----------------------------------------------- */
.secret {
  background-color: var(--color-bg); /* #FFFFFF */
  padding: var(--space-12) var(--container-padding-x-pc);
}

/* -----------------------------------------------
 * コンテナ（max-width 中央寄せ）
 * ----------------------------------------------- */
.secret__inner {
  max-width: var(--container-default); /* 1200px */
  margin: 0 auto;
}

/* -----------------------------------------------
 * 見出しエリア（中央寄せ）
 * ----------------------------------------------- */
.secret__header {
  text-align: center;
  margin-bottom: var(--space-8); /* 48px */
}

/* h2: 効果のヒミツ */
.secret__heading {
  font-family: var(--font-heading); /* Noto Serif JP */
  font-size: var(--fs-4xl);        /* 32px */
  font-weight: var(--fw-bold);     /* 700 */
  color: var(--color-primary);     /* #342F6E */
  text-align: center;
  letter-spacing: var(--ls-base);
  margin: 0 0 var(--space-3) 0;    /* 0 0 12px 0 */
  line-height: var(--lh-tight);    /* 1.3 */
}

/* 黄色アンダーライン */
.secret__heading-line {
  display: block;
  width: 400px;
  max-width: 100%;
  height: 4px;
  background-color: var(--color-accent-yellow); /* #E5D478 */
  margin: 0 auto var(--space-5) auto;           /* 0 auto 24px auto */
  border-radius: var(--radius-pill);
}

/* サブテキスト */
.secret__lead {
  font-family: var(--font-heading); /* Noto Serif JP（明朝） */
  font-size: var(--fs-lg);         /* 18px */
  font-weight: var(--fw-bold);
  color: var(--color-text-base);   /* #333333 */
  text-align: center;
  letter-spacing: var(--ls-base);
  line-height: var(--lh-base);     /* 1.8 */
  margin: 0;
}

/* -----------------------------------------------
 * コールアウト（クリーム背景引用ボックス）
 * ----------------------------------------------- */
.secret__callout {
  background-color: var(--color-bg-cream-soft); /* #FAF6E8 */
  border-radius: 100px;                          /* 半円形 */
  max-width: 800px;
  margin: 0 auto var(--space-11) auto;          /* 0 auto 96px auto */
  padding: var(--space-5) var(--space-7);       /* 24px 40px */
  text-align: center;
}

.secret__callout p {
  font-family: var(--font-heading); /* 明朝 */
  font-size: var(--fs-md);         /* 16px */
  font-weight: var(--fw-bold);
  color: var(--color-text-base);
  line-height: var(--lh-base);     /* 1.8 */
  letter-spacing: var(--ls-base);
  margin: 0;
}

/* -----------------------------------------------
 * 生薬カードグリッド
 * 6カラムグリッドを基底として
 * 1段目（カード1〜3）: 各2カラム分 → 全6カラム埋まり3等分
 * 2段目（カード4〜5）: 各2カラム分をオフセットで中央寄せ
 * ----------------------------------------------- */
.secret__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-9) var(--space-6); /* row: 64px / column: 32px */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* カード1〜3: 1段目（各2カラム分） */
.secret__card:nth-child(1) { grid-column: 1 / 3; }
.secret__card:nth-child(2) { grid-column: 3 / 5; }
.secret__card:nth-child(3) { grid-column: 5 / 7; }

/* カード4〜5: 2段目（各2カラム分、offset で中央寄せ） */
.secret__card:nth-child(4) { grid-column: 2 / 4; }
.secret__card:nth-child(5) { grid-column: 4 / 6; }

/* -----------------------------------------------
 * 生薬カード（個別）
 * ----------------------------------------------- */
.secret__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* -----------------------------------------------
 * カード上部: 英字ラベル + 生薬名 + 植物イラスト
 * ----------------------------------------------- */
.secret__card-top {
  position: static;
  width: 100%;
  /* 見出しは中央寄せ */
  text-align: center;
  margin-bottom: var(--space-5); /* 24px */
  min-height: 80px; /* 植物イラスト分の高さを最低限確保 */
}

/* 英字ラベル「Nature's Secret N」 */
.secret__card-en {
  display: block;
  font-family: var(--font-en-serif);     /* Cormorant Garamond */
  font-size: var(--fs-md);               /* 16px */
  font-weight: var(--fw-bold);
  color: var(--color-accent-gold);       /* #B89968 */
  letter-spacing: normal;
  text-align: center;
  margin-bottom: var(--space-2);         /* 8px */
  line-height: 1;
}

/* 生薬名（大） */
.secret__card-name {
  font-family: var(--font-heading);      /* Noto Serif JP */
  font-size: var(--fs-2xl);             /* 24px */
  font-weight: var(--fw-bold);           /* 700 */
  color: var(--color-text-base);        /* #333333 */
  text-align: center;
  letter-spacing: var(--ls-base);
  line-height: var(--lh-tight);         /* 1.3 */
  margin: 0 0 var(--space-1) 0;        /* 0 0 4px 0 */
}

/* 副名（小） */
.secret__card-subname {
  font-family: var(--font-heading);      /* Noto Serif JP */
  font-size: var(--fs-2xl);             /* 24px — 生薬名と同サイズ */
  font-weight: var(--fw-bold);           /* 700 */
  color: var(--color-text-base);
  text-align: center;
  letter-spacing: var(--ls-base);
  line-height: var(--lh-tight);
  margin: 0;
}

/* 植物イラスト（生薬名右肩に絶対配置） */
.secret__card-plant {
  position: absolute;
  top: 0;
  right: 0;
  /* 6カラムグリッドの2カラム分（約360px）に対してイラスト幅を調整 */
  width: 90px;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* -----------------------------------------------
 * 円形写真
 * ----------------------------------------------- */
.secret__card-photo-wrap {
  width: 220px;
  height: 220px;
  border-radius: var(--radius-circle); /* 50% */
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: var(--space-5);       /* 24px */
  box-shadow: var(--shadow-md);        /* 0 4px 12px rgba(0,0,0,0.08) */
}

.secret__card-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----------------------------------------------
 * 説明文
 * ----------------------------------------------- */
.secret__card-desc {
  font-family: var(--font-base);
  font-size: var(--fs-sm);            /* 13px */
  font-weight: var(--fw-regular);
  color: var(--color-text-base);
  line-height: var(--lh-base);        /* 1.8 */
  letter-spacing: var(--ls-base);
  text-align: justify;
  max-width: 280px;
  margin: 0;
}

/* -----------------------------------------------
 * SP レスポンシブ（768px 未満）
 * 1カラム縦積み
 * ----------------------------------------------- */
@media (max-width: 767px) {

  .secret {
    padding: var(--space-9) var(--container-padding-x-sp);
  }

  .secret__header {
    margin-bottom: var(--space-6); /* 32px */
  }

  .secret__heading {
    font-size: var(--fs-2xl); /* 24px */
  }

  .secret__callout {
    padding: var(--space-4) var(--space-5); /* 16px 24px */
    margin-bottom: var(--space-8);          /* 48px */
  }

  .secret__callout p {
    font-size: var(--fs-base); /* 15px */
    text-align: center;
  }

  /* SP: 全カードを1カラムに統一 */
  .secret__grid {
    grid-template-columns: 1fr;
    gap: var(--space-9);
  }

  .secret__card:nth-child(1),
  .secret__card:nth-child(2),
  .secret__card:nth-child(3),
  .secret__card:nth-child(4),
  .secret__card:nth-child(5) {
    grid-column: 1 / 2;
  }

  /* カード上部: 中央寄せ・植物分のpadding解除 */
  .secret__card-top {
    padding-right: 0;
    min-height: 0;
  }

  /* 植物イラストを写真の右横まで下げる */
  .secret__card-plant {
    width: 80px;
    top: 120px;
    bottom: auto;
    right: 8px;
  }

  /* 写真サイズを SP 向けに調整 */
  .secret__card-photo-wrap {
    width: 180px;
    height: 180px;
  }

  .secret__card-desc {
    max-width: 100%;
    text-align: left;
  }
}

/* =============================================
 * sections/faq.css
 * ============================================= */
/*
 * sections/faq.css
 * 06_FAQ セクション
 * -----------------------------------------------
 * 背景: faq/bg.jpg (forest写真) フルワイドカバー
 * アコーディオン: details/summary ベース
 */

/* =============================================
 * faq — セクション全体
 * ============================================= */
.faq {
  position: relative;
  width: 100%;
  padding: var(--space-12) var(--container-padding-x-pc);
  background-image: url("../images/faq/bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 暗いオーバーレイ */
.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* 内側コンテナ（最大幅 840px, 中央） */
.faq__inner {
  position: relative;
  z-index: 1;
  max-width: 840px;
  margin: 0 auto;
}

/* =============================================
 * faq — 見出しエリア
 * ============================================= */
.faq__header {
  text-align: center;
  margin-bottom: var(--space-8);   /* 48px */
}

.faq__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);         /* 28px */
  font-weight: var(--fw-bold);
  color: var(--color-text-on-dark);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-4);    /* 16px */
}

/* 黄色いアクセントライン */
.faq__heading-line {
  display: block;
  width: 400px;
  max-width: 100%;
  height: 4px;
  background-color: #ffffff;
  margin: 0 auto;
}

/* =============================================
 * faq — アコーディオンリスト
 * ============================================= */
.faq__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq__item {
  margin-bottom: 12px;
}

.faq__item:last-child {
  margin-bottom: 0;
}

/* details 要素 */
.faq__details {
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}

/* details[open] でも角丸は固定 */
.faq__details[open] {
  border-radius: 10px;
}

/* summary — Qラベル + 質問テキスト + プラス/マイナスアイコン */
.faq__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 16px 20px;
  cursor: pointer;
  list-style: none;
  position: relative;
  user-select: none;
  min-height: 56px;
}

/* デフォルトの ▶ マーカーを非表示 */
.faq__summary::-webkit-details-marker {
  display: none;
}
.faq__summary::marker {
  display: none;
}

.faq__summary:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: -2px;
}

/* Q マーク */
.faq__q-mark {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);           /* 18px */
  color: var(--color-accent-green);  /* #2C5530 */
  line-height: 1;
  width: 18px;
  text-align: center;
}

/* 質問テキスト */
.faq__question {
  flex: 1;
  font-family: var(--font-base);
  font-size: var(--fs-base);         /* 15px */
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: var(--lh-snug);
  margin: 0;
}

/* プラス/マイナスアイコン（CSS疑似要素） */
.faq__icon {
  flex-shrink: 0;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--color-accent-green);
  margin-left: auto;
}

/* 水平バー（共通: + / - どちらも表示） */
.faq__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 2px;
  background-color: var(--color-accent-green);
  border-radius: 1px;
}

/* 垂直バー（+ のとき表示 / - のとき非表示） */
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 10px;
  background-color: var(--color-accent-green);
  border-radius: 1px;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* details[open] のとき縦バーを消してマイナス（−）表示 */
.faq__details[open] .faq__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}

/* =============================================
 * faq — 回答エリア
 * ============================================= */
.faq__answer-wrap {
  padding: 0 20px 20px 20px;
}

.faq__answer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* A マーク */
.faq__a-mark {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);           /* 18px */
  color: var(--color-text-error);    /* #C7372F */
  line-height: 1;
  width: 18px;
  text-align: center;
  padding-top: 2px;
}

/* 答えテキスト */
.faq__answer-text {
  font-family: var(--font-base);
  font-size: var(--fs-sm);           /* 13px */
  color: var(--color-text-base);     /* #333 */
  line-height: var(--lh-base);       /* 1.8 */
  margin: 0;
}

/* 答えボディ（複数行 + テーブルなどの複合コンテンツ用） */
.faq__answer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ミネラル含有量テーブル */
.faq__mineral-table {
  margin-top: 4px;
  width: 100%;
  max-width: 360px;
  border-collapse: collapse;
  font-family: var(--font-base);
  font-size: var(--fs-sm);           /* 13px */
  color: var(--color-text-base);
  line-height: 1.6;
}

.faq__mineral-table th,
.faq__mineral-table td {
  padding: 8px 12px;
  border: 1px solid rgba(51, 51, 51, 0.2);
  text-align: left;
  font-weight: var(--fw-regular);
}

.faq__mineral-table thead th {
  background-color: rgba(51, 51, 51, 0.06);
  font-weight: var(--fw-bold);
  text-align: center;
}

.faq__mineral-table tbody th {
  width: 40%;
  background-color: rgba(51, 51, 51, 0.03);
}

.faq__mineral-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =============================================
 * faq — 下端リンク
 * ============================================= */
.faq__link-wrap {
  text-align: center;
  padding-top: var(--space-5);       /* 24px */
}

.faq__link {
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  color: var(--color-text-on-dark);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast), opacity var(--transition-fast);
}

.faq__link:hover {
  text-decoration-color: currentColor;
}

.faq__link:focus-visible {
  outline: 2px solid var(--color-text-on-dark);
  outline-offset: 3px;
}

/* 矢印アイコン */
.faq__link-arrow {
  display: inline-block;
  font-style: normal;
}

/* =============================================
 * faq — レスポンシブ（SP: 768px 以下）
 * ============================================= */
@media (max-width: 768px) {
  .faq {
    padding: var(--space-9) var(--container-padding-x-sp);  /* 64px 20px */
  }

  .faq__heading {
    font-size: var(--fs-2xl);        /* 24px */
  }

  .faq__header {
    margin-bottom: var(--space-6);   /* 32px */
  }

  .faq__summary {
    padding: 13px 14px;
    gap: 10px;
    min-height: 50px;
  }

  .faq__question {
    font-size: var(--fs-sm);         /* 13px */
  }

  .faq__answer-wrap {
    padding: 0 14px 16px 14px;
  }

  .faq__answer-text {
    font-size: var(--fs-xs);         /* 12px */
  }

  .faq__mineral-table {
    font-size: var(--fs-xs);         /* 12px */
    max-width: 100%;
  }

  .faq__mineral-table th,
  .faq__mineral-table td {
    padding: 6px 8px;
  }

  .faq__link {
    font-size: var(--fs-xs);         /* 12px */
  }
}

/* =============================================
 * sections/item.css
 * ============================================= */
/*
 * sections/item.css
 * 07_item セクション — 製品情報
 * -----------------------------------------------
 */

/* =============================================
 * セクション基盤
 * ============================================= */
.item {
  background-color: var(--color-bg);
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.item__inner {
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--container-padding-x-pc);
}

/* =============================================
 * セクション見出し
 * ============================================= */
.item__heading-wrap {
  text-align: center;
  margin-bottom: var(--space-9);
}

.item__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-3);
}

.item__heading-line {
  display: block;
  width: 400px;
  max-width: 100%;
  height: 4px;
  background-color: var(--color-accent-yellow);
  margin-inline: auto;
}

/* =============================================
 * 製品グリッド（瓶 / 分包 2カラム）
 * ============================================= */
.item__products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: var(--space-9);
}

/* 製品カード */
.item__product-card {
  display: flex;
  flex-direction: column;
}

/* --- 写真リンク（カード全体クリック領域 / 写真ラッパーを内包） --- */
.item__product-photo-link {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--space-4);
  border-radius: 16px;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.item__product-photo-link:hover {
  opacity: 0.9;
}

.item__product-photo-link:hover .item__product-photo {
  transform: scale(1.02);
}

.item__product-photo-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* --- 写真エリア（タグラベル + 写真） --- */
.item__product-photo-wrap {
  position: relative;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.item__product-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 646 / 418;
  object-fit: contain;
  background-color: var(--color-bg-alt);
  border-radius: 8px;
  transition: transform var(--transition-fast);
}

/* タグラベル（左上に重ねる — 角丸小さめの矩形） */
.item__product-tag {
  position: absolute;
  top: 39px;
  left: 0;
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  font-family: var(--font-base);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 10px 24px;
  border-radius: 0;
  z-index: var(--z-card);
  white-space: nowrap;
}

/* --- 商品名 --- */
.item__product-name {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.item__product-name-link {
  color: inherit;
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}

.item__product-name-link:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
  color: var(--color-primary);
}

.item__product-name-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* --- 内容量行 --- */
.item__product-amount-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.item__product-amount-label {
  display: inline-block;
  background-color: #6b7280;
  color: var(--color-text-on-dark);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.item__product-amount-value {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  color: var(--color-text-base);
  line-height: var(--lh-snug);
}

/* --- 説明文 --- */
.item__product-desc {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
}

/* =============================================
 * 詳細情報ブロック（白い枠）
 * ============================================= */
.item__detail {
  background-color: #f3f4f6;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
}

.item__table-wrap {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

/* 各ブロック間の区切り */
.item__detail-block + .item__detail-block {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* ブロック見出し */
.item__detail-title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-accent-green);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-3);
}

/* 効能・効果 本文 */
.item__detail-content {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  color: var(--color-text-base);
  line-height: var(--lh-base);
}

/* サブタイトル（成分ブロック） */
.item__detail-subtitle {
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-3);
}

/* =============================================
 * 詳細テーブル
 * ============================================= */
.item__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.item__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-base);
  font-size: var(--fs-base);
}

/* thead */
.item__table thead {
  background-color: var(--color-accent-green);
  color: var(--color-text-on-dark);
}

.item__table thead th {
  padding: var(--space-2) var(--space-4);
  font-weight: var(--fw-bold);
  text-align: left;
  font-size: var(--fs-sm);
  border-top: 1px solid var(--color-accent-green);
  border-bottom: 1px solid var(--color-accent-green);
}

/* thead の右列: 右寄せ */
.item__table thead th:last-child {
  text-align: right;
}

/* tbody */
.item__table tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.item__table tbody tr:last-child {
  border-bottom: none;
}

.item__table tbody td {
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-base);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

/* tbody の右列: 右寄せ */
.item__table tbody td:last-child {
  text-align: right;
}

/* 脚注 */
.item__table-footnote {
  margin-top: var(--space-3);
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
}

/* 注意書きボックス（クリーム色） */
.item__note-box {
  margin-top: var(--space-4);
  background-color: var(--color-bg-cream);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.item__note-box p {
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  color: var(--color-text-base);
  line-height: var(--lh-base);
}

/* =============================================
 * 下部リンク
 * ============================================= */
.item__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-7);
}

.item__link {
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}

.item__link:hover,
.item__link:focus-visible {
  color: var(--color-accent-green);
  text-decoration-color: currentColor;
  outline: none;
}

.item__link:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 3px;
}

/* =============================================
 * SP レスポンシブ (max-width: 767px)
 * ============================================= */
@media (max-width: 767px) {

  .item {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }

  .item__inner {
    padding-inline: var(--container-padding-x-sp);
  }

  .item__heading {
    font-size: var(--fs-2xl);
  }

  .item__heading-wrap {
    margin-bottom: var(--space-7);
  }

  /* 製品グリッド: 1カラム縦並び */
  .item__products {
    grid-template-columns: 1fr;
    gap: var(--space-7);
    margin-bottom: var(--space-7);
  }

  /* 瓶タイプ／分包タイプ ラベル: SP では小さく */
  .item__product-tag {
    top: 24px;
    font-size: var(--fs-xs);
    padding: 6px 14px;
  }

  /* 詳細枠のpadding縮小 */
  .item__detail {
    padding: var(--space-4);
  }

  .item__detail-block + .item__detail-block {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
  }

  /* SPテーブル: PCと同じレイアウトを維持し、サイズだけ詰める */
  .item__table {
    font-size: var(--fs-xs);
  }

  .item__table thead th {
    padding: 6px 8px;
    font-size: var(--fs-xs);
  }

  .item__table tbody td {
    padding: 6px 8px;
    font-size: var(--fs-xs);
  }

  /* data-label の擬似要素は SP では非表示（thead を使用） */
  .item__table td[data-label]::before {
    content: none;
  }

  /* 下部リンク: 縦並び */
  .item__links {
    flex-direction: column;
    gap: var(--space-3);
  }
}

/* =============================================
 * sections/history.css
 * ============================================= */
/*
 * history.css
 * セクション 08_history — 百草丸のこぼれ話
 * -----------------------------------------------
 */

/* ==============================================
 * 1. セクション全体
 * ============================================= */
.history {
  background-color: var(--color-bg);
}

/* ==============================================
 * 2. Part 1: タイトルエリア（背景写真 + テキスト）
 * ============================================= */
.history__hero {
  position: relative;
  min-height: 380px;
  background-image: url("../images/history/title_bg.webp");
  background-size: cover;
  background-position: center top;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.history__hero-inner {
  width: 100%;
  max-width: var(--container-default);
  margin: 0 auto;
  padding: var(--space-10) var(--container-padding-x-pc);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.history__hero-content {
  padding-right: var(--space-9);
}

.history__hero-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-on-dark);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  margin-bottom: var(--space-5);
}

.history__hero-lead {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-on-dark);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

/* ==============================================
 * 3. Part 2: 百草とは？ アークカード
 * ============================================= */
.history__card-arc {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: var(--z-card);
  margin-top: -64px;
}

.history__card-arc-content {
  background-color: var(--color-bg);
  border-radius: 50%;
  width: 220px;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: none;
}

.history__card-label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-accent-green);
  letter-spacing: var(--ls-widest);
  margin-bottom: var(--space-2);
}

.history__card-title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent-green);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  margin-bottom: var(--space-1);
}

.history__card-en {
  display: block;
  font-family: var(--font-en-serif);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-accent-green);
  letter-spacing: var(--ls-wide);
}

/* ==============================================
 * 4. Part 3: 板状薬の説明 + 写真（横並び）
 * ============================================= */
.history__intro {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--container-padding-x-pc);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-7);
  align-items: center;
}

.history__intro-text {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

.history__intro-img {
  display: block;
  width: 200px;
  height: auto;
  transform: rotate(-3deg);
  flex-shrink: 0;
}

/* ==============================================
 * 5. タイムライン 共通（Part 4 & Part 7）
 * ============================================= */
.history__timeline {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-9) var(--container-padding-x-pc);
}

.history__timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* 縦線 */
.history__timeline-list::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 7px;
  width: 2px;
  background-color: var(--color-accent-green);
}

.history__timeline-item {
  position: relative;
  padding-left: var(--space-8);
  margin-bottom: var(--space-9);
}

.history__timeline-item:last-child {
  margin-bottom: 0;
}

/* マーカー（丸） */
.history__timeline-item::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-circle);
  background-color: var(--color-accent-green);
  z-index: var(--z-base);
}

/* 年（"700年頃" — 数字部分+後半テキストで構成） */
.history__timeline-year {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  color: var(--color-accent-green);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2);
}

.history__timeline-year-num {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.history__timeline-year-suffix {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-base);
  margin-left: 2px;
}

.history__timeline-title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-base);
  line-height: var(--lh-snug);
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.history__timeline-body {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

/* ==============================================
 * 6. タイムライン2（navy テーマ：長野県製薬のあゆみ）
 * ============================================= */
.history__timeline--navy .history__timeline-list::before {
  background-color: var(--color-primary);
}

.history__timeline--navy .history__timeline-item::before {
  background-color: var(--color-primary);
}

.history__timeline--navy .history__timeline-year {
  color: var(--color-primary);
}

/* タイムライン2: テキスト + 写真 横並び */
.history__timeline-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: start;
}

.history__timeline-row-text {
  min-width: 0;
}

.history__timeline-photo {
  display: block;
  width: 220px;
  height: auto;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

/* ==============================================
 * 7. CTA ボタン（ピル型 / Part 5 & Part 8）
 * ============================================= */
.history__cta {
  text-align: center;
  padding: var(--space-8) var(--container-padding-x-pc) var(--space-9);
}

.history__cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--space-4) var(--space-9) var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--color-text-on-dark);
  text-decoration: none;
  letter-spacing: var(--ls-base);
  transition: opacity var(--transition-base);
}

.history__cta-btn-text {
  display: block;
  text-align: center;
}

.history__cta-btn-arrow {
  position: absolute;
  top: 50%;
  right: var(--space-5);
  transform: translateY(-50%);
  font-size: 0.85em;
  line-height: 1;
  pointer-events: none;
}

.history__cta-btn:hover,
.history__cta-btn:focus-visible {
  opacity: 0.85;
  outline: 2px solid var(--color-text-on-dark);
  outline-offset: 3px;
}

.history__cta-btn--green {
  background-color: var(--color-accent-green);
  min-width: 220px;
}

.history__cta-btn--navy {
  background-color: var(--color-primary);
  min-width: 260px;
}

/* ==============================================
 * 8. 区切り見出し「長野県製薬のあゆみ」（Part 6）
 * ============================================= */
.history__divider {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-9) var(--container-padding-x-pc) var(--space-7);
}

.history__divider-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.history__divider-line {
  flex: 1;
  height: 1px;
  background-color: var(--color-primary);
  opacity: 0.35;
}

.history__divider-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  color: var(--color-primary);
  letter-spacing: var(--ls-base);
  white-space: nowrap;
}

/* ==============================================
 * 9. テキストリンク「学術情報はこちら」（Part 9）
 * ============================================= */
.history__text-link-wrap {
  text-align: center;
  padding: var(--space-5) var(--container-padding-x-pc) var(--space-10);
}

.history__text-link {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
  text-decoration: none;
  letter-spacing: var(--ls-base);
  transition: color var(--transition-base);
}

.history__text-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.history__text-link:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ==============================================
 * 10. レスポンシブ（SP: 768px以下）
 * ============================================= */
@media (max-width: 768px) {

  /* Part 1: タイトルエリア */
  .history__hero {
    min-height: 260px;
    background-position: right -150px center;
  }

  .history__hero-inner {
    grid-template-columns: 1fr;
    padding: var(--space-8) var(--container-padding-x-sp);
  }

  .history__hero-content {
    padding-right: 0;
  }

  .history__hero-heading {
    font-size: var(--fs-2xl);
  }

  .history__hero-lead {
    font-size: var(--fs-sm);
  }

  /* Part 2: アークカード */
  .history__card-arc {
    margin-top: -40px;
  }

  .history__card-arc-content {
    width: 200px;
    height: 200px;
  }

  .history__card-title {
    font-size: var(--fs-2xl);
  }

  /* Part 3: 板状薬 — テキスト左 / 画像右 */
  .history__intro {
    grid-template-columns: 1fr auto;
    padding: 0 var(--container-padding-x-sp);
    gap: var(--space-4);
    text-align: left;
    align-items: center;
  }

  .history__intro-text {
    text-align: left;
  }

  .history__intro-img {
    width: 110px;
    margin: 0;
  }

  /* タイムライン 共通 */
  .history__timeline {
    padding: var(--space-7) var(--container-padding-x-sp);
  }

  .history__timeline-year-num {
    font-size: var(--fs-2xl);
  }

  /* タイムライン2: 写真は下に */
  .history__timeline-row {
    grid-template-columns: 1fr;
  }

  .history__timeline-photo {
    width: 100%;
    max-width: 260px;
  }

  /* CTA */
  .history__cta {
    padding: var(--space-6) var(--container-padding-x-sp) var(--space-7);
  }

  .history__cta-btn {
    padding: var(--space-4) var(--space-6);
    min-width: 0;
    width: 100%;
    max-width: 300px;
  }

  /* 区切り */
  .history__divider {
    padding: var(--space-7) var(--container-padding-x-sp) var(--space-5);
  }

  .history__divider-heading {
    font-size: var(--fs-md);
  }

  /* テキストリンク */
  .history__text-link-wrap {
    padding: var(--space-4) var(--container-padding-x-sp) var(--space-8);
  }
}

/* =============================================
 * sections/footer-top.css
 * ============================================= */
/*
 * footer-top.css
 * Footer 上段 — 家族写真背景 CTA エリア
 * -----------------------------------------------
 * Phase 3-B 実装 / セクション 09_footer-top
 */

/* =============================================
 * footer__top — 上段ラッパー
 * 背景: footer/bg.jpg をフルワイド cover
 * ============================================= */
.footer__top {
  position: relative;
  width: 100%;
  min-height: 480px;
  background-image: url("../images/footer/bg.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* =============================================
 * footer__top-inner — コンテナ
 * max-width: 1200px、左右 padding
 * ============================================= */
.footer__top-inner {
  display: flex;
  align-items: center;
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--container-padding-x-pc);
  height: 100%;
  min-height: 480px;
}

/* =============================================
 * footer__top-visual — 左カラム（title.png）
 * ============================================= */
.footer__top-visual {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.footer__top-image {
  display: block;
  width: 100%;
  max-width: 580px;
  height: auto;
}

/* =============================================
 * SP レスポンシブ（〜768px）
 * ============================================= */
@media (max-width: 768px) {
  .footer__top {
    min-height: 300px;
    background-position: right -300px center;
    overflow: visible;
    /* タイトル画像が下にはみ出す分のスペースを下マージンで確保 */
    margin-bottom: 100px;
  }

  .footer__top-inner {
    min-height: 300px;
    padding-inline: var(--container-padding-x-sp);
    justify-content: center;
    align-items: flex-end;
  }

  .footer__top-visual {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    justify-content: center;
    /* 背景写真と被らないよう、セクション下端から下に逃がす */
    transform: translateY(50%);
  }

  .footer__top-image {
    width: 100%;
    max-width: 320px;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .footer__top-image {
    max-width: 520px;
  }
}