@charset "UTF-8";
/* ============================================================
   健康相談NOZOMI 共通スタイルシート  style.css
   - 全ページ共通で読み込みます
   - 色・余白・フォント等は :root の変数で一元管理
     （ブランドカラー変更は :root を書き換えるだけでOK）
   ============================================================ */

/* ------------------------------------------------------------
   1. デザイントークン（変数）
   ------------------------------------------------------------ */
:root {
  /* --- ブランドカラー（淡いパステル：薄い水色＋薄い黄緑） --- */
  --green-900: #235a8c; /* 見出し・小チップ等：濃い青 */
  --green-800: #2b6aa6;
  --green-700: #235a8c;
  --green-600: #3b7dbf;
  --green-300: #cfe1f2;
  --green-100: #eaf3fb;
  --sky-100:  #eaf6fb;  /* 薄い水色（背景） */
  --sky-200:  #d6edf6;
  --lime-100: #f3f9e4;  /* 薄い黄緑（背景） */
  --lime-200: #e7f3cc;

  /* --- ベースカラー（温かみのあるオフホワイト／クリーム） --- */
  --paper:      #fffdf8;
  --cream:      #fbf6ec; /* ベース背景 */
  --cream-200:  #f5ecdb;
  --cream-300:  #efe1c9;

  /* --- アクセントカラー（ウォームアンバー：CTA等） --- */
  --amber:      #3b7dbf;
  --amber-dark: #2c6098;
  --amber-soft: #b9d8f1;
  --amber-100:  #e6f1fb;

  /* --- テキスト・罫線 --- */
  --ink:       #2b2a24;
  --ink-soft:  #5d5a4f;
  --ink-faint: #8a8678;
  --line:      #e7ddca;
  --line-soft: #f0e8d8;

  /* --- フォント --- */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* --- レイアウト --- */
  --maxw:       1120px;
  --maxw-narrow: 820px;
  --radius:     18px;
  --radius-sm:  12px;
  --shadow-sm:  0 2px 10px rgba(27, 74, 60, .06);
  --shadow:     0 18px 50px -20px rgba(18, 52, 42, .28);
  --shadow-amber: 0 14px 30px -10px rgba(59, 125, 191, .45);

  /* --- モーション --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------
   2. リセット & ベース
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.9;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .02em;
  overflow-x: hidden; /* 横スクロール禁止 */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.45; margin: 0; letter-spacing: .02em; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ------------------------------------------------------------
   3. 共通レイアウト・ユーティリティ
   ------------------------------------------------------------ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.container--narrow { max-width: var(--maxw-narrow); }
.section { padding-block: clamp(64px, 9vw, 120px); position: relative; }
.bg-cream   { background: var(--cream); }
.bg-paper   { background: var(--paper); }
.bg-cream2  { background: var(--cream-200); }
.bg-green   { background: var(--lime-100); color: var(--ink); }
.bg-green-deep { background: var(--sky-100); color: var(--ink); }
.bg-sky    { background: var(--sky-100); }
.bg-lime   { background: var(--lime-100); }
.bg-blush  { background: #fbeef1; }

/* セクション見出し（英字エイブロウ＋日本語見出し） */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700; letter-spacing: .32em;
  color: var(--amber-dark); text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow::before, .eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--amber); opacity: .65; }
.eyebrow--center { justify-content: center; }
.bg-green .eyebrow, .bg-green-deep .eyebrow { color: var(--green-900); }
.bg-green .eyebrow::before, .bg-green .eyebrow::after,
.bg-green-deep .eyebrow::before, .bg-green-deep .eyebrow::after { background: var(--amber-soft); opacity: .55; }

.section-title { font-size: clamp(26px, 4.2vw, 40px); color: var(--green-900); }
.bg-green .section-title, .bg-green-deep .section-title { color: var(--green-900); }
/* セクション別テーマ：背景＋アクセント＋見出し色を多色に */
.sec--coral  { background: #fdeee9; }
.sec--coral  .eyebrow { color: #d9543f; } .sec--coral .eyebrow::before, .sec--coral .eyebrow::after { background: #d9543f; } .sec--coral .section-title { color: #b8442f; }
.sec--teal   { background: #e7f5f8; }
.sec--teal   .eyebrow { color: #1397b0; } .sec--teal .eyebrow::before, .sec--teal .eyebrow::after { background: #1397b0; } .sec--teal .section-title { color: #155f74; }
.sec--green  { background: #eef7e4; }
.sec--green  .eyebrow { color: #4a9d5f; } .sec--green .eyebrow::before, .sec--green .eyebrow::after { background: #4a9d5f; } .sec--green .section-title { color: #356b35; }
.sec--blue   { background: #eaf3fb; }
.sec--blue   .eyebrow { color: #3b7dbf; } .sec--blue .eyebrow::before, .sec--blue .eyebrow::after { background: #3b7dbf; } .sec--blue .section-title { color: #235a8c; }
.sec--purple { background: #f1edfa; }
.sec--purple .eyebrow { color: #7a5cc8; } .sec--purple .eyebrow::before, .sec--purple .eyebrow::after { background: #7a5cc8; } .sec--purple .section-title { color: #56409a; }
.sec--gold   { background: #fdf2dd; }
.sec--gold   .eyebrow { color: #d59324; } .sec--gold .eyebrow::before, .sec--gold .eyebrow::after { background: #d59324; } .sec--gold .section-title { color: #8f5e10; }
.sec--pink   { background: #fcebf1; }
.sec--pink   .eyebrow { color: #d85a92; } .sec--pink .eyebrow::before, .sec--pink .eyebrow::after { background: #d85a92; } .sec--pink .section-title { color: #a83a6b; }
.sec--orange { background: #fdf0e2; }
.sec--orange .eyebrow { color: #d98a36; } .sec--orange .eyebrow::before, .sec--orange .eyebrow::after { background: #d98a36; } .sec--orange .section-title { color: #a9661c; }
.section-lead { margin-top: 20px; color: var(--ink-soft); font-size: 16px; max-width: 640px; }
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }

.lead-accent { color: var(--amber-dark); font-weight: 700; }
.text-green { color: var(--green-700); }
.mincho { font-family: var(--font-serif); }

/* ------------------------------------------------------------
   4. ボタン / CTA
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 34px; border-radius: 999px; font-weight: 700; font-size: 15.5px;
  letter-spacing: .04em; border: 1.5px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  text-align: center; line-height: 1.4;
}
.btn .ic { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--amber); color: #fff; box-shadow: var(--shadow-amber); }
.btn--primary:hover { background: var(--amber-dark); transform: translateY(-3px); box-shadow: 0 20px 36px -10px rgba(59,125,191,.55); }
.btn--line { background: #06c755; color: #fff; box-shadow: 0 12px 26px -10px rgba(6,199,85,.55); }
.btn--line:hover { background: #05b54d; transform: translateY(-3px); }
.btn--ghost { background: transparent; color: var(--green-800); border-color: var(--green-300); }
.btn--ghost:hover { background: var(--green-900); color: #fff; border-color: var(--green-900); transform: translateY(-3px); }
.btn--light { background: #fff; color: var(--green-900); border: 1px solid var(--green-300); }
.btn--light:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.btn--lg { padding: 19px 44px; font-size: 16.5px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.btn-row--center { justify-content: center; }

/* CTA帯（各セクション後／不安解消文つき） */
.cta-band { background: linear-gradient(135deg, var(--sky-100), var(--lime-100)); color: var(--ink); position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(520px 380px at 12% -10%, rgba(59,125,191,.22), transparent 60%),
    radial-gradient(480px 360px at 96% 120%, rgba(47,117,96,.5), transparent 60%);
}
.cta-band .container { position: relative; }
.cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 36px 56px; align-items: center; }
.cta-title { font-size: clamp(22px, 3.4vw, 32px); color: var(--green-900); }
.cta-sub { margin-top: 14px; color: var(--ink-soft); font-size: 15px; }
.cta-reassure { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13.5px; color: var(--ink-soft); }
.cta-reassure span { display: inline-flex; align-items: center; gap: 7px; }
.cta-reassure span::before { content: "✓"; font-weight: 700; color: #4a9d5f; }

/* ------------------------------------------------------------
   5. ヘッダー / ナビ
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,253,248,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px -14px rgba(18,52,42,.4); background: rgba(255,253,248,.95); }

/* 上部ユーティリティバー（電話番号など） */
.header-bar { background: var(--sky-100); color: var(--ink-soft); }
.header-bar__inner { display: flex; align-items: center; justify-content: space-between; height: 38px; max-width: 1280px; margin-inline: auto; padding-inline: 24px; font-size: 12.5px; }
.header-bar__tagline { letter-spacing: .06em; }
.header-bar__right { display: flex; align-items: center; gap: 20px; }
.header-tel { display: inline-flex; align-items: center; gap: 8px; color: var(--green-900); font-weight: 700; letter-spacing: .03em; }
.header-tel svg { width: 16px; height: 16px; color: var(--green-700); }
.header-tel b { font-size: 14px; }
.header-tel small { font-weight: 400; color: var(--ink-faint); font-size: 11px; }
.header-tel:hover { color: var(--green-700); }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; height: 76px; max-width: 1280px; }

/* ロゴ（インラインSVG） */
.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo { height: 46px; width: auto; display: block; border-radius: 9px; }
.footer-brand .brand__logo { height: 50px; }
.brand__badge { width: 42px; height: 42px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-family: var(--font-serif); font-weight: 700; font-size: 19px; color: var(--green-900); letter-spacing: .04em; }
.brand__name b { color: var(--green-700); }
.brand__sub { font-size: 10.5px; color: var(--ink-faint); letter-spacing: .14em; font-weight: 500; }

/* グローバルナビ */
.gnav { display: flex; align-items: center; gap: 4px; }
.gnav a {
  position: relative; padding: 8px 11px; font-size: 13px; font-weight: 500; color: var(--ink-soft);
  border-radius: 8px; white-space: nowrap;
}
.gnav a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px;
  background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.gnav a:hover { color: var(--green-800); }
.gnav a:hover::after, .gnav a.is-current::after { transform: scaleX(1); }
.gnav a.is-current { color: var(--green-800); font-weight: 700; }

.header-cta { display: flex; align-items: center; gap: 10px; }
.header-cta .btn { padding: 11px 20px; font-size: 13.5px; }

/* ハンバーガー */
.nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 20px; height: 2px;
  background: var(--green-800); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateX(-50%) rotate(45deg); top: 0; }
.nav-toggle.is-open span::after { transform: translateX(-50%) rotate(-45deg); top: 0; }

/* モバイルドロワー */
.mobile-nav {
  position: fixed; inset: 76px 0 0; z-index: 99; background: var(--cream);
  transform: translateX(100%); transition: transform .4s var(--ease); overflow-y: auto;
  padding: 28px 24px 48px; visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav a { display: block; padding: 16px 6px; font-size: 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-weight: 500; }
.mobile-nav a.is-current { color: var(--green-700); font-weight: 700; }
.mobile-nav .btn-row { margin-top: 26px; flex-direction: column; }
.mobile-nav .btn { width: 100%; }
.mobile-nav .btn-row .btn { display: flex !important; justify-content: center !important; align-items: center; gap: 10px; text-align: center !important; padding: 16px 24px; }
.mobile-nav .btn-row .btn--primary, .mobile-nav .btn-row .btn--line { color: #fff; }
.mobile-nav__tel { position: relative; margin-top: 22px; padding: 16px 20px; background: linear-gradient(120deg, var(--sky-100), var(--lime-100)); color: var(--green-900); border-radius: 14px; }
.mobile-nav a.mobile-nav__tel, .mobile-nav a.mobile-nav__tel:hover { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; color: var(--green-900); }
.mobile-nav__tel svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--green-900); flex: none; }
.mobile-nav__tel-info { display: flex; flex-direction: column; align-items: center; line-height: 1.35; }
.mobile-nav__tel-num { font-size: 21px; font-weight: 700; letter-spacing: .02em; }
.mobile-nav__tel small { font-weight: 400; color: var(--ink-soft); font-size: 12.5px; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(18,52,42,.4); opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 98; }
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------
   6. ヒーロー（パララックス）
   ------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; background: var(--sky-100); }
.hero__media { position: absolute; inset: -12% 0 0; z-index: 0; will-change: transform; }
.hero__media img { width: 100%; height: 118%; object-fit: cover; }
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.64) 46%, rgba(255,255,255,.26) 100%),
    linear-gradient(180deg, rgba(234,246,251,.5), rgba(243,249,228,.55));
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(96px, 16vw, 168px); }
.hero__tag {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px; border-radius: 999px;
  background: rgba(255,255,255,.72); border: 1px solid var(--green-300);
  color: var(--green-900); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; margin-bottom: 26px;
}
.hero__title { font-size: clamp(30px, 5.6vw, 56px); color: var(--ink); line-height: 1.5; letter-spacing: .03em; }
.hero__title .hl { position: relative; white-space: nowrap; }
.hero__title .hl::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: .06em; height: .42em; background: rgba(59,125,191,.5); z-index: -1; border-radius: 3px; }
.hero__lead { margin-top: 28px; max-width: 560px; color: var(--ink-soft); font-size: clamp(15px, 1.8vw, 17px); }
.hero__cta { margin-top: 40px; }
.hero__reassure { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13.5px; color: var(--ink-soft); }
.hero__reassure span { display: inline-flex; align-items: center; gap: 7px; }
.hero__reassure span::before { content: "✓"; color: #4a9d5f; font-weight: 700; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; z-index: 2; transform: translateX(-50%); color: var(--ink-faint); font-size: 10px; letter-spacing: .28em; writing-mode: vertical-rl; }
.scroll-cue::after { content: ""; display: block; width: 1px; height: 40px; background: linear-gradient(rgba(120,120,110,.5), transparent); margin: 12px auto 0; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ------------------------------------------------------------
   7. お悩みカード（共感セクション）
   ------------------------------------------------------------ */
.concern-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 54px; }
.concern-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.concern-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.concern-card__img { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.concern-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.concern-card:hover .concern-card__img img { transform: scale(1.06); }
.concern-card__tag { position: absolute; top: 14px; left: 14px; background: var(--green-900); color: #fff; font-size: 11.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; letter-spacing: .06em; }
.concern-card__body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.concern-card__title { font-size: 19px; color: var(--green-900); }
.concern-card__lead { margin-top: 12px; font-size: 14px; color: var(--ink-soft); line-height: 1.85; flex: 1; }
.concern-card__link { margin-top: 18px; font-size: 13.5px; font-weight: 700; color: var(--amber-dark); display: inline-flex; align-items: center; gap: 8px; }
.concern-card__link::after { content: "→"; transition: transform .25s var(--ease); }
.concern-card:hover .concern-card__link::after { transform: translateX(5px); }

.mini-concerns { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.mini-concerns li { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-size: 13.5px; color: var(--ink-soft); }
.mini-concerns li b { color: var(--green-700); font-weight: 700; }

/* ------------------------------------------------------------
   8. 不調の悪循環 / 分子栄養学イントロ
   ------------------------------------------------------------ */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.split__media .badge-float {
  position: absolute; right: -14px; bottom: -18px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow-sm); max-width: 230px;
}
.split__media .badge-float b { display: block; font-family: var(--font-serif); color: var(--green-800); font-size: 26px; }
.split__media .badge-float span { font-size: 12px; color: var(--ink-soft); }
.prose p + p { margin-top: 18px; }
.prose .lead-big { font-size: clamp(19px, 2.6vw, 24px); font-family: var(--font-serif); color: var(--green-900); line-height: 1.7; }

/* 引き算の健康法（2カラム） */
.minus-plus { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.mp-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 30px; position: relative; }
.mp-card__no { font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--amber-dark); letter-spacing: .1em; }
.mp-card__q { font-family: var(--font-serif); font-size: clamp(22px, 3vw, 30px); color: var(--green-900); margin-top: 6px; }
.mp-card__label { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--ink-soft); background: var(--cream-200); padding: 5px 14px; border-radius: 999px; }

/* ------------------------------------------------------------
   9. サービス3本柱
   ------------------------------------------------------------ */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 54px; }
.pillar {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pillar:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.pillar__img { aspect-ratio: 16 / 10; overflow: hidden; }
.pillar__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pillar:hover .pillar__img img { transform: scale(1.06); }
.pillar__body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.pillar__no { font-family: var(--font-serif); font-size: 13px; color: var(--amber-dark); letter-spacing: .14em; font-weight: 700; }
.pillar__title { font-size: 21px; color: var(--green-900); margin-top: 6px; }
.pillar__text { margin-top: 12px; font-size: 14px; color: var(--ink-soft); flex: 1; }
.pillar__link { margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--green-700); display: inline-flex; gap: 8px; align-items: center; }
.pillar__link::after { content: "→"; transition: transform .25s var(--ease); }
.pillar:hover .pillar__link::after { transform: translateX(5px); }

/* ------------------------------------------------------------
   10. カウンセリングの流れ（ステップ）
   ------------------------------------------------------------ */
.flow { margin-top: 50px; }
.flow__phases { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.phase {
  border-radius: var(--radius); padding: 30px 30px 14px; border: 1px solid var(--line);
}
.phase--free { background: linear-gradient(160deg, #fbe7d6, var(--paper)); border-color: #f0cfa0; }
.phase--main { background: linear-gradient(160deg, #e4f1e2, var(--paper)); border-color: #bcdcc0; }
.phase__label { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; padding: 5px 14px; border-radius: 999px; margin-bottom: 22px; }
.phase--free .phase__label { background: #d98a36; color: #fff; }
.phase--main .phase__label { background: #4a9d5f; color: #fff; }
.step { display: flex; gap: 18px; padding-bottom: 22px; position: relative; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 40px; bottom: 0; width: 2px; background: var(--line); }
.step__no { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--green-900); color: #fff; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 16px; z-index: 1; }
.phase--free .step__no { background: #d98a36; }
.phase--main .step__no { background: #4a9d5f; }
.step__title { font-family: var(--font-serif); font-size: 17px; color: var(--green-900); font-weight: 600; }
.step__text { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }
.step__text a { color: var(--amber-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.step__meta { margin-top: 8px; font-size: 12px; color: var(--green-700); font-weight: 600; }

/* ------------------------------------------------------------
   11. お客様の声
   ------------------------------------------------------------ */
.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }
.voice {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px;
  display: flex; flex-direction: column;
}
.voice__stars { color: var(--amber); letter-spacing: 3px; font-size: 15px; }
.voice__quote { margin-top: 16px; font-size: 14px; color: var(--ink); line-height: 1.95; flex: 1; }
.voice__quote .mark { font-family: var(--font-serif); color: var(--green-300); font-size: 34px; line-height: 0; vertical-align: -10px; margin-right: 4px; }
.voice__who { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 13px; font-weight: 700; color: var(--green-700); }
.voice-note { margin-top: 22px; font-size: 11.5px; color: var(--ink-faint); text-align: center; }

/* ------------------------------------------------------------
   12. 代表メッセージ抜粋
   ------------------------------------------------------------ */
.rep { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 6vw, 70px); align-items: center; }
.rep__media { position: relative; }
.rep__media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.rep__media .rep-name { position: absolute; left: 20px; bottom: 20px; background: rgba(35,90,140,.92); color: #fff; padding: 14px 20px; border-radius: 14px; }
.rep__media .rep-name b { font-family: var(--font-serif); font-size: 20px; display: block; }
.rep__media .rep-name span { font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.82); }
.rep__quote { font-family: var(--font-serif); font-size: clamp(20px, 2.8vw, 27px); color: var(--green-900); line-height: 1.75; }
.rep__text { margin-top: 24px; color: var(--ink-soft); font-size: 15.5px; line-height: 2.05; }
.rep__text p + p { margin-top: 16px; }
.bg-green .rep__quote, .bg-green-deep .rep__quote { color: var(--ink); }
.bg-green .rep__text, .bg-green-deep .rep__text { color: var(--ink-soft); }
.rep__credentials { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 9px; }
.rep__credentials li { font-size: 12px; background: var(--cream-200); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: var(--green-700); font-weight: 500; }

/* ------------------------------------------------------------
   13. 山口市プロジェクト バナー
   ------------------------------------------------------------ */
.yproject {
  border-radius: var(--radius); overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--sky-100), var(--lime-100)); color: var(--ink);
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; box-shadow: var(--shadow);
}
.yproject__body { padding: clamp(36px, 5vw, 56px); position: relative; z-index: 1; }
.yproject__ribbon { display: inline-block; background: var(--amber); color: #fff; font-size: 12.5px; font-weight: 700; padding: 6px 16px; border-radius: 999px; letter-spacing: .06em; }
.yproject__logo { display: block; width: min(340px, 82%); height: auto; border-radius: 14px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.yproject__title { font-size: clamp(24px, 3.6vw, 36px); margin-top: 18px; color: var(--green-900); }
.yproject__title .hl { color: var(--amber-dark); }
.yproject__text { margin-top: 16px; color: var(--ink-soft); font-size: 14.5px; }
.yproject__target { margin-top: 16px; font-size: 13px; background: rgba(255,255,255,.6); border: 1px solid var(--green-300); padding: 8px 16px; border-radius: 10px; display: inline-block; }
.yproject__cta { margin-top: 26px; }
.yproject__media { position: relative; display: grid; place-items: center; padding: clamp(22px, 3.5vw, 44px); min-height: 240px; }
.yproject__media img { width: 100%; max-width: 420px; height: auto; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.2); }

/* ------------------------------------------------------------
   14. ブログ＆お知らせ
   ------------------------------------------------------------ */
.news-list { margin-top: 48px; display: grid; gap: 4px; }
.news-row {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 26px; align-items: center;
  padding: 22px 14px; border-bottom: 1px solid var(--line-soft); transition: background .25s var(--ease);
}
.news-row:hover { background: var(--cream-200); }
.news-row__date { font-family: var(--font-serif); font-size: 14px; color: var(--ink-faint); }
.news-row__cat { display: inline-block; font-size: 11px; background: var(--green-100); color: var(--green-700); padding: 3px 11px; border-radius: 999px; margin-bottom: 8px; font-weight: 600; }
.news-row__title { font-size: 15.5px; color: var(--ink); font-weight: 500; line-height: 1.6; }
.news-row:hover .news-row__title { color: var(--green-700); }
.news-row__arrow { color: var(--amber-dark); font-weight: 700; }

/* ニュースカード（一覧ページ用） */
.news-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.news-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.news-card__img { aspect-ratio: 16 / 10; overflow: hidden; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-card:hover .news-card__img img { transform: scale(1.05); }
.news-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.news-card__meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-faint); }
.news-card__title { margin-top: 12px; font-size: 16.5px; color: var(--green-900); line-height: 1.6; flex: 1; }

/* ------------------------------------------------------------
   15. フッター
   ------------------------------------------------------------ */
.site-footer { background: var(--sky-100); color: var(--ink-soft); padding-top: 72px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 52px; border-bottom: 1px solid var(--green-300); }
.footer-brand .brand__name { color: var(--green-900); }
.footer-brand .brand__name b { color: var(--amber-dark); }
.footer-brand .brand__sub { color: var(--ink-faint); }
.footer-about { margin-top: 22px; font-size: 13.5px; line-height: 1.9; max-width: 360px; }
.footer-sns { margin-top: 24px; display: flex; gap: 12px; }
.footer-sns a { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; transition: transform .25s, box-shadow .25s; }
.footer-sns a:hover { transform: translateY(-3px); box-shadow: 0 8px 18px -6px rgba(0,0,0,.35); }
.footer-sns svg { width: 26px; height: 26px; }
.footer-sns .sns-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285aeb 90%); }
.footer-sns .sns-fb { background: #1877f2; }
.footer-sns .sns-line { background: #06c755; }
.footer-col h4 { font-family: var(--font-sans); font-size: 12px; letter-spacing: .2em; color: var(--amber-dark); text-transform: uppercase; margin-bottom: 18px; }
.footer-col li { margin-bottom: 12px; }
.footer-col a { font-size: 14px; color: var(--ink-soft); }
.footer-col a:hover { color: var(--green-900); }
.footer-nap { font-size: 13.5px; line-height: 2; }
.footer-nap dt { color: var(--amber-dark); font-size: 11px; letter-spacing: .1em; margin-top: 12px; }
.footer-nap dd { margin: 0; color: var(--ink); }
.footer-nap dd a { color: var(--green-900); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding: 26px 0 30px; font-size: 12px; color: var(--ink-faint); }
.footer-bottom a { color: var(--ink-faint); }
.footer-bottom a:hover { color: var(--green-900); }

/* フッター地図 */
.footer-map { margin-top: 0; }
.footer-map iframe { width: 100%; height: 260px; border: 0; display: block; filter: grayscale(.2); }

/* ------------------------------------------------------------
   16. 下層ページ共通：ページヘッダー
   ------------------------------------------------------------ */
.page-hero { background: linear-gradient(115deg, var(--sky-100), var(--lime-100)); color: var(--ink); padding-block: clamp(64px, 9vw, 110px); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(560px 360px at 88% -10%, rgba(59,125,191,.22), transparent 60%); }
.page-hero .container { position: relative; }
.page-hero__title { font-size: clamp(28px, 4.6vw, 46px); color: var(--green-900); }
.page-hero__lead { margin-top: 18px; color: var(--ink-soft); max-width: 620px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--ink-faint); margin-bottom: 22px; }
.breadcrumb a:hover { color: var(--green-900); }
.breadcrumb span { color: var(--ink-faint); }

/* ------------------------------------------------------------
   17. スクロール演出（Intersection Observer）
   ※ 標準は「表示」。JSが動く環境でのみ .armed を付与して
     初期非表示→スクロールで表示、という演出にする（no-JSでも必ず見える）
   ------------------------------------------------------------ */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.armed { opacity: 0; transform: translateY(26px); }
.reveal.armed.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }

/* ------------------------------------------------------------
   23. お客様の声 一覧（reviewページ）
   ------------------------------------------------------------ */
.review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 18px; align-items: start; }
.review-disclaimer { margin-top: 18px; font-size: 12.5px; color: var(--ink-faint); background: var(--cream-200); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
@media (max-width: 768px) { .review-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   22. プロフィールページ
   ------------------------------------------------------------ */
.profile-intro { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.profile-intro__media { position: relative; }
.profile-intro__media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.profile-name { font-family: var(--font-serif); margin-top: 6px; }
.profile-name b { font-size: clamp(30px, 5vw, 44px); color: var(--green-900); display: block; line-height: 1.2; }
.profile-name span { font-size: 12px; letter-spacing: .24em; color: var(--ink-faint); }
.profile-quote { margin-top: 24px; background: var(--lime-100); color: var(--ink); border-left: 4px solid var(--green-600); border-radius: 14px; padding: 18px 24px; font-family: var(--font-serif); font-size: clamp(16px, 2vw, 19px); }

/* 年表（立ち上げまで） */
.timeline { margin-top: 46px; }
.timeline__item { position: relative; padding: 0 0 22px 40px; border-left: 2px solid var(--line); }
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__dot { position: absolute; left: -9px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--green-600); border: 3px solid var(--cream); box-shadow: 0 0 0 1px var(--line); }
.timeline__item--key .timeline__dot { background: var(--amber); }
.timeline__card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 15px 20px; }
.timeline__item--key .timeline__card { background: linear-gradient(160deg, var(--amber-100), var(--paper)); border-color: var(--amber-soft); }
.timeline__tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--amber-dark); letter-spacing: .08em; margin-bottom: 4px; }
.timeline__text { font-size: 14.5px; color: var(--ink); line-height: 1.8; }

/* 代表メッセージ（濃緑背景） */
.msg-quote { font-family: var(--font-serif); font-size: clamp(19px, 2.8vw, 27px); color: var(--green-900); line-height: 1.75; text-align: center; max-width: 800px; margin-inline: auto; }
.msg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.msg-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 28px; }
.msg-card h3 { font-size: 17px; color: var(--green-900); margin-bottom: 12px; }
.msg-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.95; }

/* 事業者概要テーブル */
.info-table { width: 100%; border-collapse: collapse; margin-top: 44px; max-width: 760px; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.info-table th, .info-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: top; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: 0; }
.info-table th { width: 30%; color: var(--green-800); font-weight: 700; background: var(--cream-200); font-family: var(--font-sans); white-space: nowrap; }
.info-table td a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }

@media (max-width: 768px) {
  .profile-intro { grid-template-columns: 1fr; }
  .profile-intro__media { max-width: 340px; margin-inline: auto; }
  .msg-grid { grid-template-columns: 1fr; }
  .info-table th { width: 38%; }
}

/* ------------------------------------------------------------
   21. 料金カード（料金ページ）
   ------------------------------------------------------------ */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }
.price-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
.price-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 28px 30px; display: flex; flex-direction: column; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.price-card--featured { border: 2px solid var(--amber); box-shadow: var(--shadow); }
.price-card--free { background: linear-gradient(160deg, var(--amber-100), var(--paper)); border-color: var(--amber-soft); }
.price-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--amber); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 18px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow-amber); }
.price-card__for { font-size: 12.5px; color: var(--amber-dark); font-weight: 700; }
.price-card__name { font-family: var(--font-serif); font-size: 21px; color: var(--green-900); margin-top: 8px; }
.price-card__price { margin-top: 16px; font-family: var(--font-serif); line-height: 1.2; }
.price-card__price .num { font-size: 38px; color: var(--green-800); font-weight: 700; }
.price-card__price .yen { font-size: 17px; color: var(--green-800); }
.price-card__price .strike { font-size: 16px; color: var(--ink-faint); text-decoration: line-through; margin-right: 8px; font-weight: 400; }
.price-card__unit { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }
.price-card__feats { margin-top: 20px; display: grid; gap: 10px; flex: 1; }
.price-card__feats li { font-size: 13.5px; color: var(--ink-soft); display: flex; gap: 9px; line-height: 1.6; }
.price-card__feats li::before { content: "✓"; color: var(--amber-dark); font-weight: 700; flex: none; }
.price-card .btn { margin-top: 24px; width: 100%; }

/* 横長プラン（ファスティング・集中サポート等） */
.plan-wide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 28px; }
.plan-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 32px; position: relative; }
.plan-card--accent { background: linear-gradient(160deg, var(--green-100), var(--paper)); border-color: var(--green-300); }
.plan-card__tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; background: var(--green-700); color: #fff; }
.plan-card__name { font-family: var(--font-serif); font-size: 22px; color: var(--green-900); margin-top: 14px; }
.plan-card__price { font-family: var(--font-serif); margin-top: 10px; }
.plan-card__price .num { font-size: 30px; color: var(--green-800); font-weight: 700; }
.plan-card__price .strike { font-size: 15px; color: var(--ink-faint); text-decoration: line-through; margin-right: 6px; }
.plan-card__text { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.plan-card__feats { margin-top: 14px; display: grid; gap: 9px; }
.plan-card__feats li { font-size: 13.5px; color: var(--ink-soft); display: flex; gap: 9px; }
.plan-card__feats li::before { content: "✓"; color: var(--green-700); font-weight: 700; flex: none; }

.price-note { margin-top: 30px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.9; }

@media (max-width: 768px) { .price-grid, .price-grid--2, .plan-wide { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   20. 汎用：フィーチャーカード / 概念バンド（下層ページ共用）
   ------------------------------------------------------------ */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 46px; }
.feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feature-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.feature-card__head { display: flex; align-items: center; gap: 13px; }
.feature-card__ic { width: 48px; height: 48px; border-radius: 13px; background: var(--green-100); display: grid; place-items: center; font-size: 23px; flex: none; }
.feature-card__title { font-size: 18px; color: var(--green-900); }
.feature-card__text { margin-top: 14px; font-size: 14px; color: var(--ink-soft); line-height: 1.85; }
.feature-card__list { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.feature-card__list li { font-size: 12.5px; color: var(--ink-soft); background: var(--cream-200); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; }
.feature-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--green-700); }
.feature-card__link::after { content: "→"; transition: transform .2s var(--ease); }
.feature-card:hover .feature-card__link::after { transform: translateX(4px); }
a.feature-card { text-decoration: none; color: inherit; display: block; }
.mini-concerns li a { color: inherit; text-decoration: none; display: inline-block; }
.mini-concerns li:hover { border-color: var(--green-600); color: var(--green-900); cursor: pointer; }

/* 概念バンド（キーフレーズ強調） */
.concept-band { text-align: center; }
.concept-phrases { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 28px; }
.concept-phrases span { font-family: var(--font-serif); font-size: clamp(15px, 2vw, 19px); color: var(--green-800); background: var(--green-100); border-radius: 999px; padding: 10px 22px; }
.concept-lead { max-width: 760px; margin-inline: auto; color: var(--ink-soft); }

/* チェックリスト */
.checklist { margin-top: 22px; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; font-size: 14.5px; color: var(--ink-soft); }
.checklist li::before { content: "✓"; color: var(--amber-dark); font-weight: 700; flex: none; }
.bg-green .checklist li, .bg-green-deep .checklist li { color: var(--ink-soft); }
.bg-green .checklist li::before, .bg-green-deep .checklist li::before { color: #4a9d5f; }

/* 料金プランカード */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; }
.plan-grid--2 { grid-template-columns: repeat(2, 1fr); }
.plan-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.plan-card--featured { border-color: var(--amber); box-shadow: var(--shadow-amber); }
.plan-card--featured:hover { box-shadow: 0 20px 40px -12px rgba(59,125,191,.5); }
.plan-card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--amber); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 18px; border-radius: 999px; white-space: nowrap; letter-spacing: .04em; }
.plan-card__for { font-size: 12.5px; color: var(--ink-faint); }
.plan-card__name { font-family: var(--font-serif); font-size: 21px; color: var(--green-900); margin-top: 6px; }
.plan-card__price { margin-top: 16px; font-family: var(--font-serif); color: var(--green-800); display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.plan-card__price b { font-size: 36px; line-height: 1; }
.plan-card__price .yen { font-size: 15px; font-weight: 600; }
.plan-card__price .free { font-size: 32px; color: var(--amber-dark); }
.plan-card__price .strike { text-decoration: line-through; color: var(--ink-faint); font-size: 17px; font-family: var(--font-sans); margin-right: 4px; }
.plan-card__note { font-size: 12px; color: var(--ink-faint); margin-top: 6px; }
.plan-card__desc { font-size: 13.5px; color: var(--ink-soft); margin-top: 14px; line-height: 1.85; }
.plan-card__feats { margin-top: 18px; display: grid; gap: 9px; flex: 1; }
.plan-card__feats li { font-size: 13.5px; color: var(--ink-soft); display: flex; gap: 9px; }
.plan-card__feats li::before { content: "✓"; color: var(--green-600); font-weight: 700; flex: none; }
.plan-card .btn { margin-top: 24px; width: 100%; }
.price-note { margin-top: 30px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.9; }

@media (max-width: 1024px) { .feature-grid--3 { grid-template-columns: repeat(2, 1fr); } .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .feature-grid, .feature-grid--3, .plan-grid, .plan-grid--2 { grid-template-columns: 1fr; } }


.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: 0; background: var(--paper); box-shadow: 0 -6px 24px -12px rgba(18,52,42,.4); }
.sticky-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 8px; font-size: 14px; font-weight: 700; color: #fff; }
.sticky-cta a.s-tel { background: #1397b0; }
.sticky-cta a.s-line { background: #06c755; }
.sticky-cta a.s-form { background: #ec6a52; }
.sticky-cta .ic { width: 18px; height: 18px; }

/* ------------------------------------------------------------
   18b. 山口市プロジェクト特設ページ用パーツ
        （faq / project-logo / lead-box / spec / price-band / doctor）
   ------------------------------------------------------------ */
/* 特設ページ冒頭の公式タイトルロゴ */
.project-logo { display: block; width: min(460px, 88%); height: auto; margin: 0 auto 34px; filter: drop-shadow(0 14px 30px rgba(18,52,42,.12)); }

/* リード強調ボックス（事業趣旨など） */
.lead-box { max-width: 840px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 12px; padding: 22px 26px; font-size: 15px; color: var(--ink-soft); line-height: 1.95; }
.lead-box b { color: var(--green-800); }

/* 対象・内容を示す小見出し付きカード（feature-card を流用） */
.spec-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--green-700); background: var(--green-100); border-radius: 999px; padding: 4px 14px; margin-bottom: 12px; }

/* 料金バンド（コース価格を強調） */
.price-band { max-width: 900px; margin: 36px auto 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: stretch; }
.price-band__cell { border-radius: var(--radius); padding: 30px clamp(24px, 3vw, 34px); display: flex; flex-direction: column; justify-content: center; }
.price-band__cell--main { background: linear-gradient(160deg, var(--amber-100), var(--paper)); border: 1px solid var(--amber-soft); position: relative; }
.price-band__cell--sub { background: var(--paper); border: 1px solid var(--line); }
.price-band__badge { position: absolute; top: -12px; left: 28px; background: var(--amber); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; letter-spacing: .04em; }
.price-band__label { font-size: 14.5px; font-weight: 700; color: var(--green-900); }
.price-band__price { font-family: var(--font-serif); margin-top: 8px; color: var(--green-900); line-height: 1; }
.price-band__price .yen { font-size: 17px; font-weight: 600; }
.price-band__price b { font-size: clamp(34px, 5vw, 44px); color: var(--green-800); }
.price-band__cell--main .price-band__price b { color: var(--amber-dark); }
.price-band__per { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }
.price-note-center { text-align: center; margin-top: 22px; font-size: 12.5px; color: var(--ink-faint); }

/* 監修医師カード */
.doctor-card { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 4vw, 38px); align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 4vw, 40px); box-shadow: var(--shadow-sm); }
.doctor-card__avatar { flex: none; width: 104px; height: 104px; border-radius: 50%; background: linear-gradient(160deg, var(--green-100), var(--green-300)); display: grid; place-items: center; box-shadow: inset 0 0 0 4px var(--paper); }
.doctor-card__role { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--amber-dark); }
.doctor-card__name { font-family: var(--font-serif); font-size: 24px; color: var(--green-900); margin-top: 6px; }
.doctor-card__name span { font-size: 14px; color: var(--ink-soft); margin-left: 10px; font-family: var(--font-sans); }
.doctor-card__text { margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.9; }

/* FAQ アコーディオン */
.faq-list { max-width: 840px; margin: 44px auto 0; display: grid; gap: 14px; }
.faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .25s var(--ease); }
.faq-item.is-open { border-color: var(--amber-soft); }
.faq-item__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 15.5px; color: var(--green-900); padding: 20px 56px 20px 22px; position: relative; display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; }
.faq-item__q::before { content: "Q"; flex: none; font-family: var(--font-serif); color: var(--amber-dark); font-weight: 700; font-size: 18px; line-height: 1.5; }
.faq-item__q::after { content: ""; position: absolute; right: 24px; top: 26px; width: 11px; height: 11px; border-right: 2px solid var(--green-600); border-bottom: 2px solid var(--green-600); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq-item.is-open .faq-item__q::after { transform: rotate(-135deg); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-item.is-open .faq-item__a { max-height: 520px; }
.faq-item__a-inner { padding: 0 24px 22px 50px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.95; }
.faq-item__a-inner a { color: var(--amber-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 768px) {
  .price-band { grid-template-columns: 1fr; }
  .doctor-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* ------------------------------------------------------------
   18c. 山口市プロジェクト：ヒーローの公式ロゴ／電話CTA／お悩み
   ------------------------------------------------------------ */
/* ヒーロー内に大きく置く公式ロゴ（濃色背景用デザイン） */
.hero-logo { display: block; width: min(560px, 92%); height: auto; margin: 0 auto 22px; filter: drop-shadow(0 16px 32px rgba(0,0,0,.28)); }

/* 大きな電話CTA（高齢の方は電話を好むため） */
.tel-cta { max-width: 760px; margin: 30px auto 0; text-align: center; background: var(--amber-100); border: 2px solid var(--amber-soft); border-radius: var(--radius); padding: clamp(24px, 4vw, 34px); }
.tel-cta__label { font-size: 16px; font-weight: 700; color: var(--green-900); }
.tel-cta__num { display: inline-flex; align-items: center; gap: 14px; margin-top: 10px; font-family: var(--font-serif); font-size: clamp(30px, 6.5vw, 46px); font-weight: 700; color: var(--green-900); text-decoration: none; }
.tel-cta__num svg { width: 38px; height: 38px; color: var(--amber-dark); }
.tel-cta__hours { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }

/* お悩みチェック（大きめ・2列） */
.symptom-grid { max-width: 880px; margin: 36px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.symptom-grid li { list-style: none; display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; font-size: 17px; color: var(--ink); font-weight: 500; }
.symptom-grid li::before { content: "✓"; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--green-100); color: var(--green-700); font-weight: 700; display: grid; place-items: center; font-size: 15px; }
@media (max-width: 600px) { .symptom-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   18d. 高齢者向け文字拡大モード（body.senior に付与）
        ※このクラスを付けたページだけ大きく・読みやすく
   ------------------------------------------------------------ */
.senior { font-size: 17.5px; line-height: 1.95; }
.senior .page-hero__lead { font-size: clamp(18px, 2.4vw, 21px); line-height: 2; color: var(--ink-soft); max-width: 680px; }
.senior .section-title { font-size: clamp(27px, 4.6vw, 40px); }
.senior .section-lead { font-size: clamp(16.5px, 2.2vw, 19px); line-height: 1.95; }
.senior .feature-card__title { font-size: 20px; }
.senior .feature-card__text,
.senior .step__text,
.senior .doctor-card__text,
.senior .lead-box { font-size: 17px; line-height: 2; }
.senior .checklist li { font-size: 17px; line-height: 1.9; }
.senior .step__title { font-size: 19px; }
.senior .step__meta { font-size: 14px; }
.senior .faq-item__q { font-size: 18.5px; }
.senior .faq-item__a-inner { font-size: 17px; line-height: 2.05; }
.senior main .btn { font-size: 17px; padding: 18px 38px; border-radius: 14px; }
.senior main .btn--lg { font-size: 20px; padding: 22px 52px; }
.senior .cta-title { font-size: clamp(24px, 4vw, 34px); }
.senior .cta-sub { font-size: 17px; line-height: 1.9; }
.senior .cta-reassure { font-size: 15px; }
.senior .price-band__price b { font-size: clamp(40px, 7vw, 54px); }
.senior .price-band__label { font-size: 16px; }
.senior .price-band__per { font-size: 15px; }
.senior .breadcrumb { font-size: 14px; }
/* このページ（.senior）のみ：各セクションの上下余白を控えめに（既定 clamp(64px,9vw,120px) → 下記） */
.senior .section { padding-block: clamp(40px, 6vw, 68px); }

/* ------------------------------------------------------------
   18e. 山口市プロジェクト：デザイン準拠コンポーネント
   ------------------------------------------------------------ */
/* 公式参加サービス 帯（最上部） */
.pfs-ribbon { background: linear-gradient(90deg, var(--sky-100), var(--lime-100)); color: var(--green-900); text-align: center; font-size: 14.5px; font-weight: 700; padding: 11px 16px; letter-spacing: .02em; }
.senior .pfs-ribbon { font-size: 15.5px; }

/* 切り取った公式ロゴ（ライム背景のまま）を角丸の枠で表示 */
.project-logo { border-radius: 18px; box-shadow: 0 16px 34px -14px rgba(18,52,42,.35); }

/* ヒーロー内の装飾 */
.hero-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(35,90,140,.1); border: 1px solid var(--green-300); color: var(--green-900); border-radius: 999px; padding: 8px 20px; font-size: 14.5px; font-weight: 700; }
.hero-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--amber-soft); }
.hero-h1-mark { background: linear-gradient(transparent 58%, rgba(185,216,241,.75) 58%); padding: 0 .08em; border-radius: 2px; }
.hero-pricecard { max-width: 480px; margin: 30px auto 0; background: var(--paper); border: 2px solid var(--amber-soft); border-radius: var(--radius); padding: 24px 28px; color: var(--ink); text-align: center; }
.hero-pricecard__badge { display: inline-block; background: var(--amber); color: #fff; font-weight: 700; font-size: 13px; padding: 5px 18px; border-radius: 999px; }
.hero-pricecard__price { font-family: var(--font-serif); margin-top: 12px; color: var(--green-900); line-height: 1; }
.hero-pricecard__price b { font-size: clamp(36px, 6.5vw, 48px); color: var(--amber-dark); }
.hero-pricecard__price .yen { font-size: 18px; font-weight: 600; }
.hero-pricecard__sub { font-size: 14.5px; color: var(--ink-soft); margin-top: 8px; }
.hero-targetpill { display: inline-block; margin-top: 24px; background: rgba(255,255,255,.7); border: 1px solid var(--green-300); color: var(--green-900); border-radius: 999px; padding: 11px 24px; font-size: 15px; font-weight: 600; }

/* 白い情報カード＋チェック行（事業趣旨/サービス内容） */
.info-card { max-width: 880px; margin: 32px auto 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-sm); }
.info-card__title { display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-size: 20px; color: var(--amber-dark); font-weight: 700; margin-bottom: 10px; line-height: 1.5; }
.info-card__title .ic { font-size: 26px; }
.info-card__lead { font-size: 16.5px; color: var(--ink-soft); line-height: 1.95; }
.check-rows { margin-top: 10px; }
.check-rows li { list-style: none; position: relative; padding: 16px 2px 16px 42px; border-bottom: 1px dashed var(--line); font-size: 16.5px; color: var(--ink); line-height: 1.85; }
.check-rows li:last-child { border-bottom: 0; }
.check-rows li::before { content: "✓"; position: absolute; left: 0; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--green-600); color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.check-rows b { color: var(--green-800); }
.note-strong { text-align: center; margin-top: 28px; font-size: 17px; font-weight: 700; color: var(--green-900); line-height: 1.95; }
.note-strong .em { color: var(--amber-dark); }

/* 番号つきステップ（栄養チェック手順・利用の流れ） */
.numlist { max-width: 880px; margin: 30px auto 0; display: grid; gap: 16px; }
.numlist__item { display: flex; gap: 18px; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; align-items: flex-start; }
.numlist__no { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--green-700); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 20px; display: grid; place-items: center; }
.numlist--amber .numlist__no { background: var(--amber-dark); }
.numlist__title { font-family: var(--font-serif); font-size: 19px; color: var(--green-900); font-weight: 600; }
.numlist__text { margin-top: 6px; font-size: 16px; color: var(--ink-soft); line-height: 1.85; }
.numlist__text a { color: var(--amber-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 監修医師ライン＆栄養チェックWEBリンク */
.supervisor-line { max-width: 880px; margin: 0 auto; background: var(--amber-100); border: 1px solid var(--amber-soft); border-radius: 14px; padding: 15px 22px; font-weight: 700; color: var(--green-900); display: flex; align-items: center; gap: 12px; font-size: 16.5px; }
.supervisor-line .ic { font-size: 22px; }
.wellness-link { max-width: 880px; margin: 22px auto 0; text-align: center; background: linear-gradient(160deg, var(--green-100), var(--paper)); border: 1px solid var(--green-300); border-radius: var(--radius); padding: 28px; }
.wellness-link__label { font-weight: 700; color: var(--green-900); font-size: 17px; }
.wellness-link .btn { margin-top: 16px; word-break: break-all; max-width: 100%; }
.wellness-link__note { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); }

/* 料金の補足（おトク強調） */
.price-bonus { max-width: 880px; margin: 18px auto 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--green-900); line-height: 1.9; }
.price-bonus .em { color: var(--amber-dark); }

/* お申込み・お問い合わせ（連絡手段カード） */
.contact-methods { max-width: 720px; margin: 30px auto 0; display: grid; gap: 14px; }
.contact-method { display: flex; align-items: center; gap: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.contact-method:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.contact-method__ic { flex: none; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.contact-method__ic svg { width: 28px; height: 28px; }
.cm-tel .contact-method__ic { background: #15a0b0; }
.cm-line .contact-method__ic { background: #06c755; }
.cm-mail .contact-method__ic { background: #e8954a; }
.cm-form .contact-method__ic { background: #7a5cc8; }
.contact-method__label { font-weight: 700; color: var(--green-900); font-size: 18px; }
.cm-tel .contact-method__label { color: #136576; font-family: var(--font-serif); font-size: 24px; }
.contact-method__sub { font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
.contact-fineprint { max-width: 720px; margin: 22px auto 0; font-size: 14px; color: var(--ink-soft); line-height: 1.9; }
.contact-fineprint p { margin-top: 4px; }

/* 提供者プロフィールの「詳しく見る」ボタン余白 */
.provider-actions { margin-top: 24px; }

/* セクション内の写真（角丸・中央） */
.section-photo { display: block; width: 100%; max-width: 760px; margin: 0 auto 4px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* 代表の実体験ビフォーアフター */
.case-photo { max-width: 760px; margin: 40px auto 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.case-photo img { display: block; width: 100%; height: auto; }
.case-photo__cap { padding: 22px clamp(20px, 3vw, 30px); font-size: 15.5px; color: var(--ink-soft); line-height: 1.9; }
.case-photo__badge { display: inline-block; background: var(--amber); color: #fff; font-weight: 700; font-size: 12.5px; padding: 5px 16px; border-radius: 999px; margin-bottom: 12px; }
.case-photo__cap b { color: var(--green-800); }
.case-photo__note { display: block; margin-top: 12px; font-size: 12.5px; color: var(--ink-faint); }

/* ------------------------------------------------------------
   18f. お問い合わせフォーム（mailto方式）
   ------------------------------------------------------------ */
.cform { max-width: 720px; margin: 36px auto 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-sm); }
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: 14px; font-weight: 700; color: var(--green-900); }
.field__label .req { color: var(--amber-dark); font-size: 12px; margin-left: 6px; }
.field__label .opt { color: var(--ink-faint); font-size: 12px; font-weight: 500; margin-left: 6px; }
.cform input[type="text"], .cform input[type="tel"], .cform input[type="email"], .cform input[type="number"], .cform select, .cform textarea {
  width: 100%; font-family: inherit; font-size: 15.5px; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(47,117,96,.14); background: var(--paper); }
.cform textarea { resize: vertical; min-height: 130px; line-height: 1.7; }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 4px; }
.radio-row label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); cursor: pointer; }
.radio-row input { accent-color: var(--green-700); width: 18px; height: 18px; }
.cform__submit { margin-top: 26px; text-align: center; }
.cform__hint { margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.8; text-align: center; }
.cform__done { margin-top: 16px; text-align: center; font-size: 14px; font-weight: 700; color: var(--green-800); background: var(--green-100); border: 1px solid var(--green-300); border-radius: 12px; padding: 14px 18px; }
/* フィールド内の案内（ご紹介割引など） */
.field__note { margin-top: 4px; background: var(--amber-100); border: 1px solid var(--amber-soft); border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.85; color: var(--ink); }
.field__note b { color: var(--amber-dark); }
.field__note small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.8; }
@media (max-width: 600px) {
  .cform__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   18g. プライバシーポリシー・規約（法務ページ）
   ------------------------------------------------------------ */
.legal { max-width: 900px; margin: 0 auto; }
.legal__intro { font-size: 15.5px; color: var(--ink-soft); line-height: 1.95; }
.legal__block { margin-top: 40px; }
.legal__h { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--green-900); padding-left: 16px; border-left: 4px solid var(--amber); line-height: 1.5; }
.legal__block > p { margin-top: 14px; font-size: 15px; color: var(--ink-soft); line-height: 1.95; }
.legal ol, .legal ul { margin-top: 12px; padding-left: 0; list-style: none; counter-reset: legal; }
.legal ol > li { position: relative; padding: 6px 0 6px 30px; font-size: 15px; color: var(--ink); line-height: 1.9; }
.legal ol > li::before { counter-increment: legal; content: counter(legal) "."; position: absolute; left: 0; top: 6px; color: var(--amber-dark); font-weight: 700; }
.legal ul.legal-paren > li { position: relative; padding: 6px 0 6px 34px; font-size: 15px; color: var(--ink); line-height: 1.9; }
.legal ul.legal-paren > li > .pno { position: absolute; left: 0; top: 6px; color: var(--green-700); font-weight: 700; }
.legal__note { margin-top: 14px; font-size: 14px; color: var(--ink-soft); line-height: 1.9; }

/* カウンセリング規約：条文カード */
.clause-list { margin-top: 24px; display: grid; gap: 16px; }
.clause { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px clamp(20px, 3vw, 30px); }
.clause__title { font-family: var(--font-serif); font-size: 17.5px; font-weight: 700; color: var(--green-900); margin-bottom: 4px; }
.clause ol { counter-reset: clause; margin-top: 8px; }
.clause ol > li { position: relative; padding: 6px 0 6px 28px; font-size: 15px; color: var(--ink-soft); line-height: 1.9; list-style: none; }
.clause ol > li::before { counter-increment: clause; content: counter(clause) "."; position: absolute; left: 0; top: 6px; color: var(--amber-dark); font-weight: 700; }
.clause__sub { margin-top: 10px; padding-left: 16px; }
.clause__sub li { font-size: 14.5px; color: var(--ink-soft); line-height: 1.85; padding: 3px 0; }
.clause--highlight { border-color: var(--amber-soft); background: linear-gradient(170deg, var(--amber-100), var(--paper)); }
.clause__plan { margin-top: 10px; display: grid; gap: 10px; }
.clause__plan-row { display: flex; flex-direction: column; gap: 6px; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); }
.clause__plan-row b { display: block; color: var(--green-800); font-size: 14.5px; line-height: 1.6; }
.legal-updated { max-width: 900px; margin: 36px auto 0; font-size: 13.5px; color: var(--ink-faint); text-align: right; }

@media (max-width: 600px) {
  .numlist__item { padding: 18px 18px; gap: 14px; }
  .contact-method { padding: 16px 16px; gap: 14px; }
}

/* ------------------------------------------------------------
   19. レスポンシブ
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .gnav { display: none; }
  .nav-toggle { display: block; }
  .header-bar { display: none; }
  .header-cta .btn--primary { display: none; }
  .header-inner { max-width: var(--maxw); }
}
@media (max-width: 1024px) {
  .concern-grid, .pillar-grid, .voice-grid, .news-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  body { font-size: 15.5px; }
  .split, .rep, .yproject { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .rep__media { max-width: 360px; margin-inline: auto; }
  .minus-plus, .flow__phases { grid-template-columns: 1fr; }
  .cta-inner { grid-template-columns: 1fr; text-align: center; }
  .cta-inner .btn-row { justify-content: center; }
  .cta-reassure { justify-content: center; }
  .yproject__media { min-height: 220px; }
  .news-row { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .news-row__date { grid-column: 1 / -1; }
  .sticky-cta { display: flex; }
  body { padding-bottom: 56px; }
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .concern-grid, .pillar-grid, .voice-grid, .news-cards { grid-template-columns: 1fr; }
  .brand__sub { display: none; }
  .brand__logo { height: 40px; }
  .split__media .badge-float { right: 12px; bottom: -14px; }
}

/* アクセシビリティ：モーション軽減 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   18. ブログ（一覧 / 個別記事）  ※後から差し替えやすいよう独立ブロック
   ------------------------------------------------------------
   - 一覧：ピックアップ大カード + カテゴリタブ + カードグリッド
   - 配色は :root のトークンを使用（色変更は :root だけでOK）
   ============================================================ */

/* --- 共通メタ（カテゴリバッジ・日付） --- */
.blog-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.blog-meta time { font-family: var(--font-serif); font-size: 13px; color: var(--ink-faint); letter-spacing: .04em; }
.blog-cat { display: inline-block; font-size: 11.5px; font-weight: 700; background: var(--green-100); color: var(--green-700); padding: 4px 13px; border-radius: 999px; letter-spacing: .03em; }

/* --- バッジ（カード右上） --- */
.blog-badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 11.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px; letter-spacing: .04em; box-shadow: 0 6px 16px -6px rgba(0,0,0,.3); }
.blog-badge--lp { background: var(--amber); color: #fff; }
.blog-badge--news { background: #fff; color: var(--green-800); }

/* --- ピックアップ（大カード・横並び） --- */
.blog-feature { display: grid; grid-template-columns: 1.05fr 1fr; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.blog-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-feature__media { position: relative; min-height: 320px; overflow: hidden; }
.blog-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.blog-feature:hover .blog-feature__media img { transform: scale(1.04); }
.blog-feature__body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.blog-pick { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--amber-dark); margin-bottom: 16px; }
.blog-pick::before { content: ""; width: 26px; height: 2px; background: var(--amber); }
.blog-feature__title { font-size: clamp(21px, 2.6vw, 28px); color: var(--green-900); line-height: 1.5; }
.blog-feature__excerpt { margin-top: 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.95; }
.blog-feature__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 700; color: var(--green-700); font-size: 14.5px; }
.blog-feature__more svg { transition: transform .25s var(--ease); }
.blog-feature:hover .blog-feature__more svg { transform: translateX(5px); }

/* --- カテゴリタブ --- */
.blog-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(36px, 5vw, 52px); }
.blog-tab { background: transparent; border: 1.5px solid var(--line); color: var(--ink-soft); font-weight: 700; font-size: 13.5px; padding: 9px 20px; border-radius: 999px; transition: all .22s var(--ease); }
.blog-tab:hover { border-color: var(--green-300); color: var(--green-700); }
.blog-tab.is-active { background: var(--green-800); border-color: var(--green-800); color: #fff; }

/* --- カードグリッド --- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 30px); }
.blog-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); display: flex; }
.blog-card.is-hidden { display: none; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.blog-card__link { display: flex; flex-direction: column; height: 100%; width: 100%; }
.blog-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-200); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-card__title { font-size: 17px; color: var(--green-900); line-height: 1.55; }
.blog-card:hover .blog-card__title { color: var(--green-700); }
.blog-card__excerpt { margin-top: 12px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.85; }

.blog-empty { text-align: center; color: var(--ink-faint); padding: 48px 0; font-size: 15px; }

/* --- レスポンシブ --- */
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-feature { grid-template-columns: 1fr; }
  .blog-feature__media { min-height: 230px; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-filter { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin-inline: -4px; }
  .blog-filter::-webkit-scrollbar { height: 0; }
  .blog-tab { flex: none; }
}

/* ============================================================
   19. ブログ記事（コラム個別ページ）
   ------------------------------------------------------------
   - page-hero（共通）＋ 著者ボックス ＋ 目次（追従）＋ 本文
   - 色は :root トークン使用。本文 max-width で可読性を確保
   ============================================================ */

/* 記事ヘッダーのメタ（日付・読了目安・カテゴリ） */
.post-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.post-meta-row time, .post-readtime { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-serif); font-size: 13.5px; color: var(--ink-soft); letter-spacing: .03em; }
.post-readtime svg { opacity: .8; }

/* 本文ラッパ：本文 ＋ 追従目次（PCのみ2カラム） */
.post-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.post-article { min-width: 0; max-width: 760px; }
.post-aside { min-width: 0; }

/* 著者ボックス */
.author-box { display: flex; gap: 18px; align-items: flex-start; background: var(--cream-100); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 36px; }
.author-box__avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.author-box__name { font-weight: 700; color: var(--green-900); font-size: 16px; }
.author-box__role { font-size: 12.5px; color: var(--green-700); margin: 3px 0 8px; font-weight: 700; }
.author-box__bio { font-size: 13px; line-height: 1.85; color: var(--ink-soft); }

/* 目次 */
.post-toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.post-toc__title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--green-900); font-size: 14px; letter-spacing: .06em; margin-bottom: 14px; }
.post-toc__title::before { content: ""; width: 18px; height: 2px; background: var(--amber); }
.post-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
.post-toc li { counter-increment: toc; }
.post-toc a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); border-left: 2px solid transparent; transition: all .2s var(--ease); }
.post-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-serif); color: var(--green-700); font-weight: 700; font-size: 12px; flex: none; }
.post-toc a:hover { background: var(--cream-100); color: var(--green-700); }
.post-toc a.is-active { background: var(--green-50, #eef5f2); color: var(--green-800); border-left-color: var(--amber); font-weight: 700; }

/* 本文タイポグラフィ */
.post-body { font-size: 16px; line-height: 2.0; color: var(--ink); }
.post-body > p { margin-bottom: 1.4em; }
.post-body h2 { font-size: clamp(20px, 2.6vw, 25px); color: var(--green-900); line-height: 1.5; margin: 2.2em 0 .9em; padding-bottom: .5em; border-bottom: 2px solid var(--line); scroll-margin-top: 96px; }
.post-body h3 { font-size: clamp(17px, 2vw, 19px); color: var(--green-800); margin: 1.8em 0 .7em; padding-left: 14px; border-left: 4px solid var(--amber); scroll-margin-top: 96px; }
.post-body strong { color: var(--green-800); font-weight: 700; background: linear-gradient(transparent 62%, var(--amber-soft) 62%); padding: 0 1px; }
.post-body figure { margin: 1.6em 0; }
.post-body figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.post-body figcaption { font-size: 12.5px; color: var(--ink-faint); text-align: center; margin-top: 8px; }
.post-lead { font-size: 17px; line-height: 1.95; color: var(--ink-soft); }

/* 要点ボックス */
.point-box { background: var(--cream-100); border: 1px solid var(--line); border-left: 5px solid var(--amber); border-radius: 12px; padding: 20px 24px; margin: 1.8em 0; }
.point-box__title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--green-900); font-size: 15px; margin-bottom: 10px; }
.point-box p:last-child, .point-box ul:last-child { margin-bottom: 0; }

/* チェックリスト */
.checklist { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; margin: 1.6em 0; }
.checklist__head { font-weight: 700; color: var(--green-900); margin-bottom: 14px; font-size: 15.5px; }
.checklist ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.checklist li { position: relative; padding-left: 34px; font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border: 2px solid var(--green-300); border-radius: 6px; }
.checklist li::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid var(--green-600); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* 番号付き手順（整える方法） */
.step-list { display: flex; flex-direction: column; gap: 16px; margin: 1.4em 0; counter-reset: step; }
.step-item { display: flex; gap: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.step-item__num { counter-increment: step; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--green-700); color: #fff; font-family: var(--font-serif); font-weight: 700; display: grid; place-items: center; }
.step-item__num::before { content: counter(step); }
.step-item__body h4 { font-size: 16px; color: var(--green-900); margin-bottom: 6px; }
.step-item__body p { font-size: 14px; line-height: 1.85; color: var(--ink-soft); margin: 0; }

/* 免責 */
.disclaimer { font-size: 12.5px; line-height: 1.8; color: var(--ink-faint); background: var(--cream-100); border: 1px dashed var(--line-strong, #d8cfc2); border-radius: 12px; padding: 16px 18px; margin: 2em 0 0; }

/* 関連記事 */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.related-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.related-card a { display: flex; flex-direction: column; height: 100%; }
.related-card__media { aspect-ratio: 16/10; overflow: hidden; }
.related-card__media img { width: 100%; height: 100%; object-fit: cover; }
.related-card__body { padding: 16px 18px 20px; }
.related-card__cat { font-size: 11px; font-weight: 700; color: var(--green-700); }
.related-card__title { font-size: 14.5px; line-height: 1.6; color: var(--green-900); margin-top: 6px; }

/* PC：本文 ＋ 追従目次の2カラム */
@media (min-width: 1000px) {
  .post-grid { grid-template-columns: minmax(0,1fr) 270px; align-items: start; gap: 56px; }
  .post-article { grid-column: 1; grid-row: 1; justify-self: center; }
  .post-aside { grid-column: 2; grid-row: 1; position: sticky; top: 100px; }
}
@media (max-width: 999px) {
  .post-aside { order: -1; }
  .post-toc { margin-bottom: 8px; }
}
@media (max-width: 560px) {
  .related { grid-template-columns: 1fr; }
  .author-box { flex-direction: column; gap: 12px; }
}

/* ============================================================
   20. 記事内：栄養素カード ＆ 注意ボックス（コラム共通で再利用可）
   ============================================================ */
.nutrient-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 1.6em 0; }
.nutrient-card { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--green-500, #5a9e86); border-radius: 14px; padding: 18px 20px; }
.nutrient-card__name { display: flex; align-items: baseline; gap: 8px; font-weight: 700; color: var(--green-900); font-size: 16px; margin-bottom: 8px; }
.nutrient-card__name span { font-family: var(--font-serif); font-size: 12px; color: var(--green-500, #5a9e86); }
.nutrient-card__role { font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); margin: 0 0 10px; }
.nutrient-card__food { font-size: 12px; color: var(--green-700); background: var(--green-100); border-radius: 8px; padding: 6px 10px; line-height: 1.6; }
.nutrient-card__food b { font-weight: 700; }

.note-box { background: #fff8ec; border: 1px solid #f0d9a8; border-left: 5px solid var(--amber); border-radius: 12px; padding: 16px 20px; margin: 1.6em 0; font-size: 13.5px; line-height: 1.85; color: var(--ink); }
.note-box__title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--amber-dark); margin-bottom: 6px; font-size: 14px; }

@media (max-width: 560px) { .nutrient-grid { grid-template-columns: 1fr; } }

/* ============================================================
   21. ブログLP（バイタルファスティング等／訴求ページ用）
   ============================================================ */
/* ヒーロー内CTA・安心テキスト */
.lp-hero-actions { margin-top: 30px; }
.lp-reassure { margin-top: 16px; font-size: 13px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lp-reassure span { display: inline-flex; align-items: center; gap: 6px; }

/* リード見出し（LP用の大きめ訴求） */
.lp-catch { font-family: var(--font-serif); font-size: clamp(22px,3.4vw,32px); font-weight: 700; color: var(--green-900); line-height: 1.55; text-align: center; }
.lp-catch em { font-style: normal; color: var(--amber-dark); }

/* 足す vs 引く 比較 */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 1.8em 0; align-items: stretch; }
.compare-col { border-radius: 18px; padding: 28px 26px; }
.compare-col__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }
.compare-col__big { font-family: var(--font-serif); font-size: 28px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; }
.compare-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.compare-col li { padding-left: 24px; position: relative; line-height: 1.7; }
.compare-col--plus { background: var(--cream-100); border: 1px solid var(--line); color: var(--ink-soft); }
.compare-col--plus .compare-col__label { background: #efe6d6; color: var(--ink-soft); }
.compare-col--plus .compare-col__big { color: var(--ink); }
.compare-col--plus li::before { content: "＋"; position: absolute; left: 0; color: var(--ink-faint); font-weight: 700; }
.compare-col--minus { background: var(--sky-100); color: var(--ink); box-shadow: var(--shadow); }
.compare-col--minus .compare-col__label { background: var(--sky-200); color: var(--ink-soft); }
.compare-col--minus .compare-col__big { color: var(--green-900); }
.compare-col--minus li::before { content: "−"; position: absolute; left: 0; color: var(--ink-soft); font-weight: 700; }

/* 変化チップ */
.change-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin: 1.6em 0; }
.change-item { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 14.5px; font-weight: 500; color: var(--green-900); }
.change-item svg { flex: none; color: var(--green-600, #4e9079); }

/* NG（ただの断食）ボックス */
.ng-box { background: #fdf1f0; border: 1px solid #f3c9c4; border-radius: 14px; padding: 20px 24px; margin: 1.4em 0; }
.ng-box__title { font-weight: 700; color: #b4453c; margin-bottom: 12px; font-size: 15px; }
.ng-box ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ng-box li { padding-left: 26px; position: relative; font-size: 14px; line-height: 1.7; color: var(--ink); }
.ng-box li::before { content: "✕"; position: absolute; left: 0; color: #d2645b; font-weight: 700; }

@media (max-width: 560px) { .compare-grid { grid-template-columns: 1fr; } }

/* ============================================================
   22. ブログ：お知らせ（イベント告知）用
   ============================================================ */
.event-meta { display: grid; grid-template-columns: auto 1fr; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 1.6em 0; }
.event-meta dt { background: var(--sky-200); color: var(--green-900); font-weight: 700; font-size: 13.5px; padding: 14px 18px; display: flex; align-items: center; border-bottom: 1px solid var(--green-300); }
.event-meta dd { padding: 14px 18px; font-size: 14.5px; color: var(--ink); border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.event-meta dt:last-of-type, .event-meta dd:last-of-type { border-bottom: 0; }

.schedule-table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.schedule-table th { background: var(--sky-200); color: var(--green-900); font-weight: 700; padding: 12px 12px; text-align: left; font-size: 13px; }
.schedule-table td { padding: 11px 12px; border-top: 1px solid var(--line); line-height: 1.6; vertical-align: top; }
.schedule-table tr:nth-child(even) td { background: var(--cream-100); }
.schedule-table .st-day { white-space: nowrap; font-weight: 700; color: var(--green-800); }
.schedule-table .st-time { white-space: nowrap; color: var(--ink-soft); font-size: 13px; }
.schedule-table .st-special td { background: var(--amber-soft); }
.schedule-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 560px) {
  .event-meta { grid-template-columns: 1fr; }
  .event-meta dt { border-bottom: 0; }
  .schedule-table { font-size: 13px; }
}

/* ============================================================
   22. お知らせ：開催概要リスト
   ============================================================ */
.event-info { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 26px; margin: 1.4em 0; }
.event-info dl { display: grid; grid-template-columns: 7em 1fr; }
.event-info dt { padding: 16px 0; font-weight: 700; color: var(--green-800); font-size: 14px; border-top: 1px solid var(--line); }
.event-info dd { padding: 16px 0; color: var(--ink); font-size: 14.5px; line-height: 1.8; border-top: 1px solid var(--line); }
.event-info dl > dt:first-of-type, .event-info dl > dt:first-of-type + dd { border-top: 0; }
@media (max-width: 560px){ .event-info { padding: 8px 18px; } .event-info dl { grid-template-columns: 5.5em 1fr; } }

/* お知らせ：フライヤー画像は小さめ中央寄せ */
.post-body figure.flyer { max-width: 420px; margin-inline: auto; }
.post-body figure.flyer--wide { max-width: 560px; margin-inline: auto; }

/* ============================================================
   23. ブログLP：画像レイアウト（ヒーロー2カラム／メディア分割／ビフォーアフター）
   ------------------------------------------------------------
   - 画像は images/blog/ に配置（後から差し替え可：src属性のファイル名で対応）
   - 配色は :root トークンを使用
   ============================================================ */

/* --- LPヒーロー：テキスト＋キービジュアルの2カラム --- */
.lp-hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: 26px; }
.lp-hero__text { min-width: 0; }
.lp-hero__media { margin: 0; position: relative; }
.lp-hero__media img { width: 100%; height: auto; display: block; border-radius: 20px; box-shadow: 0 30px 60px -24px rgba(4, 28, 34, .55); }
.lp-hero__media::after { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); pointer-events: none; }
@media (max-width: 860px) {
  .lp-hero { grid-template-columns: 1fr; gap: 26px; }
  .lp-hero__media { max-width: 460px; margin-inline: auto; }
}

/* --- メディア分割：画像＋テキストの2カラム（左右反転可） --- */
.media-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 3.4vw, 44px); align-items: center; margin: 1.8em 0; }
.media-split--reverse { grid-template-columns: 1.1fr .9fr; }
.media-split--reverse .media-split__media { order: 2; }
.media-split__media { margin: 0; }
.media-split__media img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: var(--shadow); }
.media-split__media figcaption { font-size: 12.5px; color: var(--ink-faint); text-align: center; margin-top: 10px; }
.media-split__body > :first-child { margin-top: 0; }
@media (max-width: 760px) {
  .media-split, .media-split--reverse { grid-template-columns: 1fr; gap: 22px; }
  .media-split--reverse .media-split__media { order: 0; }
}

/* --- 単独メディア（キャプション付き・角丸） --- */
.media-figure { margin: 1.6em 0; }
.media-figure img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: var(--shadow-sm); }
.media-figure figcaption { font-size: 12.5px; color: var(--ink-faint); text-align: center; margin-top: 10px; }
.media-figure--narrow { max-width: 560px; margin-inline: auto; }

/* --- ビフォーアフター対（つまり → 浄化） --- */
.ba-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin: 1.8em 0; }
.ba-card { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.ba-card img { width: 100%; height: auto; display: block; }
.ba-card figcaption { padding: 12px 14px; font-size: 13.5px; font-weight: 700; text-align: center; }
.ba-card--before figcaption { color: var(--ink-soft); background: var(--cream-200); }
.ba-card--after figcaption { color: var(--ink); background: var(--lime-100); }
.ba-arrow { color: var(--amber); flex: none; }
@media (max-width: 620px) {
  .ba-pair { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }
}

/* --- 体験談：代表ポートレート --- */
.story-portrait { float: right; width: 168px; margin: 0 0 16px 24px; }
.story-portrait img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: var(--shadow-sm); }
.story-portrait figcaption { font-size: 12px; color: var(--ink-faint); text-align: center; margin-top: 8px; line-height: 1.5; }
@media (max-width: 560px) {
  .story-portrait { float: none; width: 150px; margin: 0 auto 18px; }
}

/* ============================================================
   24. ブログLP：3大特典（オファー）ブロック
   ------------------------------------------------------------
   - お子さんの体質改善LP等のCV訴求用。配色は :root トークン
   ============================================================ */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 1.8em 0; }
.benefit-card { position: relative; background: var(--paper); border: 1px solid var(--amber-100); border-radius: 18px; padding: 40px 24px 28px; text-align: center; box-shadow: var(--shadow-sm); }
.benefit-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--amber), var(--amber-dark)); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .04em; padding: 7px 18px; border-radius: 999px; box-shadow: var(--shadow-amber); white-space: nowrap; }
.benefit-card__icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--amber-100); color: var(--amber-dark); display: flex; align-items: center; justify-content: center; }
.benefit-card__title { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--green-900); line-height: 1.5; margin-bottom: 10px; }
.benefit-card__desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.85; }
@media (max-width: 720px) {
  .benefit-grid { grid-template-columns: 1fr; gap: 26px; }
  .benefit-card { padding: 36px 22px 24px; }
}

/* オファー帯（特典の囲み） */
.offer-band { background: linear-gradient(160deg, #fff8ee, #fdeed6); border: 1px solid var(--amber-soft); border-radius: 22px; padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 40px); }
.offer-band__head { text-align: center; }
.offer-band__free { display: inline-block; background: var(--green-800); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 20px; border-radius: 999px; margin-bottom: 14px; }

/* LP本文の小見出し付きカード（強み等） */
.reason-list { display: grid; gap: 16px; margin: 1.6em 0; }
.reason-item { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow-sm); }
.reason-item__no { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--green-700), var(--green-900)); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.reason-item__title { font-size: 16.5px; font-weight: 700; color: var(--green-900); margin-bottom: 6px; }
.reason-item__text { font-size: 14px; color: var(--ink-soft); line-height: 1.9; }
@media (max-width: 520px) {
  .reason-item { grid-template-columns: 44px 1fr; gap: 14px; padding: 20px 18px; }
  .reason-item__no { width: 44px; height: 44px; font-size: 17px; }
}

/* ============================================================
   25. ブログLP：信頼バー & 無料カウンセリング価値ボックス
   ============================================================ */
.trust-strip { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-strip__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-strip__item { display: flex; align-items: center; gap: 13px; padding: 20px 22px; }
.trust-strip__item + .trust-strip__item { border-left: 1px solid var(--line); }
.trust-strip__ic { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--green-100); color: var(--green-700); display: flex; align-items: center; justify-content: center; }
.trust-strip__t { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.trust-strip__t b { display: block; font-size: 15px; color: var(--green-900); font-weight: 700; }
.trust-strip__t .num { color: var(--amber-dark); }
@media (max-width: 820px) {
  .trust-strip__inner { grid-template-columns: 1fr 1fr; }
  .trust-strip__item { padding: 16px 16px; }
  .trust-strip__item:nth-child(odd) { border-left: none; }
  .trust-strip__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 420px) {
  .trust-strip__t { font-size: 11.5px; }
  .trust-strip__t b { font-size: 13.5px; }
  .trust-strip__item { padding: 14px 12px; gap: 10px; }
  .trust-strip__ic { width: 36px; height: 36px; }
}

/* 無料カウンセリングで分かること */
.value-box { max-width: 720px; margin: 0 auto; background: var(--paper); border: 1px solid var(--amber-100); border-radius: 20px; padding: clamp(26px, 3.6vw, 40px); box-shadow: var(--shadow-sm); }
.value-box__title { text-align: center; font-family: var(--font-serif); font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; color: var(--green-900); margin: 0 0 22px; }
.value-box__title span { color: var(--amber-dark); }
.value-list { display: grid; gap: 16px; }
.value-list__item { display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start; font-size: 15px; line-height: 1.75; color: var(--ink); }
.value-list__item svg { margin-top: 3px; color: var(--green-600); flex: none; }
.value-list__item b { color: var(--green-900); }

/* ============ 山口プロジェクト専用 かんたん相談フォーム ============ */
.lp-form { margin-top: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow); scroll-margin-top: 90px; }
.lp-form__head { font-family: var(--font-serif); font-size: 20px; color: var(--green-900); }
.lp-form__note { margin-top: 8px; font-size: 13px; color: var(--ink-soft); line-height: 1.85; }
.lp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.lp-form label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.lp-form__full { margin-top: 18px; }
.lp-form input, .lp-form select, .lp-form textarea { display: block; margin-top: 6px; font: inherit; font-weight: 400; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
.lp-form input:focus, .lp-form select:focus, .lp-form textarea:focus { outline: 2px solid var(--green-600); outline-offset: 1px; border-color: var(--green-600); }
.lp-form textarea { resize: vertical; }
.lp-form .req { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: #fff; background: #ec6a52; border-radius: 4px; padding: 1px 7px; vertical-align: middle; }
.lp-form__submit { margin-top: 22px; width: 100%; justify-content: center; }
.lp-form__err { margin-top: 12px; color: #c0392b; font-size: 13px; font-weight: 700; text-align: center; }
@media (max-width: 640px) { .lp-form__row { grid-template-columns: 1fr; } }