/* サイト全体（shared.css の :root 変数を上書き）
 *
 * 配色: html[data-theme="…"]  ← Keystatic「表示・外観」
 *   ocean | nature | clean | sunshine | sakura（default 選択時は data-theme なし＝暖色既定）
 *
 * CTA（見学予約）: shared.css の --cta-banner-bg / --cta-banner-border / --cta-card-shadow を
 *   各 html[data-theme="…"] ブロックで上書き
 *
 * タイポ: html[data-typography="…"]  ← Keystatic「表示・外観」
 *   comfort | comfort2（default 選択時は data-typography なし＝shared.css の既定サイズ）
 *   ※フォント族（--font-sans 等）もここで上書き可能
 */

html[data-theme="ocean"] {
  /* 深みのある紺〜ティール（浅瀬／サンゴ／深海） */
  --ink: #082c38;
  --ink-soft: #2d5a6e;
  --ink-mute: #4a7a8f;
  --line: #7eb8d4;
  --line-soft: #b3d9ea;
  --paper: #f7fcff;
  --paper-2: #e3f3fa;
  --cream: #d4eaf4;
  --green: #1ba8bc;
  --green-2: #4cc5d6;
  --green-3: #9ee0eb;
  --green-pale: #d2f2f7;
  --green-deep: #06748a;
  --coral: #f07868;
  --coral-deep: #d84a3d;
  --coral-pale: #ffd9d4;
  --yellow: #e6c08a;
  --yellow-soft: #efd4a8;
  --yellow-pale: #faf0df;
  --blue: #3a9cc9;
  --blue-pale: #c5e6f5;
  --pink: #b8e0ed;
  --pink-pale: #dff4fa;
  --beige: #ddeef4;

  --text-display-head: var(--ink);
  --text-prose: var(--ink-soft);
  --text-prose-strong: var(--ink);
  --text-secondary: var(--ink-soft);
  --link-color: var(--green-deep);
  --link-hover-color: var(--green-deep);
  --heading-accent: var(--green-deep);

  /* LP 下部 CTA（見学予約バナー） */
  --cta-banner-bg: linear-gradient(180deg, #fbfeff 0%, #e8f5fa 55%, #d4eaf4 100%);
  --cta-banner-border: 1px solid rgba(126, 184, 212, 0.4);
  --cta-card-shadow: 0 8px 22px -10px rgba(6, 60, 80, 0.3);
}

html[data-theme="ocean"] body {
  background: var(--paper);
}

/* 空と水面のグラデーション + 極薄の横線（波のリズム） */
html[data-theme="ocean"] .page-bg {
  background:
    repeating-linear-gradient(
      105deg,
      transparent 0,
      transparent 48px,
      rgba(6, 116, 138, 0.03) 48px,
      rgba(6, 116, 138, 0.03) 49px
    ),
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(180, 230, 255, 0.55), transparent 55%),
    radial-gradient(ellipse at 2% 35%, rgba(27, 168, 188, 0.16), transparent 18%),
    radial-gradient(ellipse at 98% 55%, rgba(6, 116, 138, 0.14), transparent 16%),
    linear-gradient(180deg, #f0fafd 0%, #dceef8 45%, #d0e8f4 100%);
}

html[data-theme="ocean"] .site-header {
  background: rgba(247, 252, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 0 rgba(6, 116, 138, 0.06);
}

/* ===== LP ヒーロー：桜・若草の斑点を海色＋淡い珊瑚ミストに ===== */
html[data-theme="ocean"] .hero {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 200, 190, 0.22), transparent 24%),
    radial-gradient(circle at 88% 78%, rgba(27, 168, 188, 0.2), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(6, 116, 138, 0.08), transparent 45%),
    linear-gradient(180deg, #ffffff 0%, #eef8fc 100%);
}

html[data-theme="ocean"] .hero-heading-rich .quote,
html[data-theme="ocean"] .hero h1 .quote {
  background: linear-gradient(transparent 62%, rgba(27, 168, 188, 0.35) 62%);
}

html[data-theme="ocean"] .hero-img-wrap {
  box-shadow: 0 22px 48px -24px rgba(6, 60, 80, 0.35);
  border: 1px solid rgba(126, 184, 212, 0.35);
}

/* ===== 下層ページヒーロー ===== */
html[data-theme="ocean"] .page-hero {
  background:
    radial-gradient(circle at 10% 28%, rgba(27, 168, 188, 0.14), transparent 24%),
    radial-gradient(circle at 94% 72%, rgba(255, 200, 190, 0.12), transparent 26%),
    linear-gradient(180deg, #fbfeff 0%, #e8f5fa 100%);
  border-bottom-color: var(--line-soft);
}

html[data-theme="ocean"] .news-item {
  border-bottom-color: rgba(6, 116, 138, 0.22);
}

html[data-theme="ocean"] .news-cta a {
  border-color: rgba(216, 74, 61, 0.35);
  background: rgba(255, 255, 255, 0.75);
}

/* ===== ボタン類 ===== */
html[data-theme="ocean"] .btn-green {
  box-shadow: 0 6px 18px -8px rgba(6, 116, 138, 0.55);
}

html[data-theme="ocean"] .btn-coral {
  box-shadow: 0 6px 18px -8px rgba(216, 74, 61, 0.45);
}

html[data-theme="ocean"] .access-btn {
  box-shadow: 0 8px 18px -12px rgba(6, 116, 138, 0.55);
}

html[data-theme="ocean"] .access-card {
  background: linear-gradient(180deg, #ffffff, var(--paper-2));
  box-shadow: 0 12px 28px -18px rgba(6, 60, 80, 0.25);
}

html[data-theme="ocean"] .news-card:hover {
  box-shadow: 0 12px 28px -14px rgba(6, 80, 100, 0.28);
}

/* ===== フッター：フラットな白から海辺のグラデへ ===== */
html[data-theme="ocean"] footer {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-top-color: var(--line-soft);
}

html[data-theme="ocean"] .visit-session {
  box-shadow: 0 4px 20px -12px rgba(6, 80, 100, 0.18);
  border-color: var(--line-soft);
}

/* ============================================================
 * nature — 森・苔・草地・土・花（サイト既定の緑系と親和）
 * ============================================================ */

html[data-theme="nature"] {
  --ink: #2a3326;
  --ink-soft: #4a5640;
  --ink-mute: #6d7a62;
  --line: #c4d1b4;
  --line-soft: #dce5d0;
  --paper: #fafbf6;
  --paper-2: #f0f4ea;
  --cream: #e8efe0;
  --green: #6a9e58;
  --green-2: #8ab87a;
  --green-3: #c4dbb4;
  --green-pale: #e6f0dc;
  --green-deep: #3d6b36;
  --coral: #c86b52;
  --coral-deep: #a34d38;
  --coral-pale: #f2ddd4;
  --yellow: #d4b86a;
  --yellow-soft: #e8d49a;
  --yellow-pale: #f7efd3;
  --blue: #6a9e9a;
  --blue-pale: #d4eae8;
  --pink: #e8b8c8;
  --pink-pale: #f8e6ed;
  --beige: #e8e0d0;

  --text-display-head: var(--ink);
  --text-prose: var(--ink-soft);
  --text-prose-strong: var(--ink);
  --text-secondary: var(--ink-soft);
  --link-color: var(--green-deep);
  --link-hover-color: var(--green-deep);
  --heading-accent: var(--green-deep);

  /* LP 下部 CTA（見学予約バナー） */
  --cta-banner-bg: linear-gradient(180deg, #fdfdf9 0%, #f0f4ea 50%, #e8efe0 100%);
  --cta-banner-border: 1px solid rgba(196, 209, 180, 0.55);
  --cta-card-shadow: 0 8px 20px -10px rgba(61, 107, 54, 0.22);
}

html[data-theme="nature"] body {
  background: var(--paper);
}

/* 木漏れ日・草地のグラデ + 極薄の粒（林床のテクスチャ） */
html[data-theme="nature"] .page-bg {
  background:
    radial-gradient(circle at 1px 1px, rgba(61, 107, 54, 0.04) 1px, transparent 1.5px),
    radial-gradient(circle at 9px 7px, rgba(61, 107, 54, 0.03) 1px, transparent 1.5px),
    radial-gradient(ellipse 130% 70% at 50% -15%, rgba(255, 248, 220, 0.65), transparent 52%),
    radial-gradient(ellipse at 8% 90%, rgba(106, 158, 88, 0.12), transparent 38%),
    radial-gradient(ellipse at 94% 40%, rgba(196, 219, 180, 0.35), transparent 32%),
    linear-gradient(180deg, #fcfdf9 0%, #f3f6ec 42%, #e9efe0 100%);
  background-size:
    18px 18px,
    18px 18px,
    auto,
    auto,
    auto,
    auto;
}

html[data-theme="nature"] .site-header {
  background: rgba(250, 251, 246, 0.94);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 0 rgba(61, 107, 54, 0.08);
}

html[data-theme="nature"] .hero {
  background:
    radial-gradient(circle at 10% 22%, rgba(196, 219, 180, 0.55), transparent 28%),
    radial-gradient(circle at 88% 72%, rgba(255, 236, 190, 0.4), transparent 34%),
    radial-gradient(circle at 48% 100%, rgba(61, 107, 54, 0.07), transparent 46%),
    linear-gradient(180deg, #fffefb 0%, #f4f7ee 100%);
}

html[data-theme="nature"] .hero-heading-rich .quote,
html[data-theme="nature"] .hero h1 .quote {
  background: linear-gradient(transparent 62%, rgba(212, 184, 106, 0.45) 62%);
}

html[data-theme="nature"] .hero-img-wrap {
  box-shadow: 0 22px 44px -22px rgba(42, 51, 38, 0.28);
  border: 1px solid rgba(196, 209, 180, 0.65);
}

html[data-theme="nature"] .page-hero {
  background:
    radial-gradient(circle at 8% 30%, rgba(196, 219, 180, 0.35), transparent 26%),
    radial-gradient(circle at 92% 68%, rgba(255, 240, 200, 0.28), transparent 28%),
    linear-gradient(180deg, #fdfdf9 0%, #eef3e6 100%);
  border-bottom-color: var(--line-soft);
}

html[data-theme="nature"] .news-item {
  border-bottom-color: rgba(61, 107, 54, 0.18);
}

html[data-theme="nature"] .news-cta a {
  border-color: rgba(163, 77, 56, 0.35);
  background: rgba(255, 255, 255, 0.82);
}

html[data-theme="nature"] .btn-green {
  box-shadow: 0 6px 18px -8px rgba(61, 107, 54, 0.45);
}

html[data-theme="nature"] .btn-coral {
  box-shadow: 0 6px 18px -8px rgba(163, 77, 56, 0.38);
}

html[data-theme="nature"] .access-btn {
  box-shadow: 0 8px 18px -12px rgba(61, 107, 54, 0.42);
}

html[data-theme="nature"] .access-card {
  background: linear-gradient(180deg, #ffffff, var(--paper-2));
  box-shadow: 0 12px 28px -18px rgba(42, 51, 38, 0.22);
}

html[data-theme="nature"] .news-card:hover {
  box-shadow: 0 12px 28px -14px rgba(61, 90, 50, 0.22);
}

html[data-theme="nature"] footer {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  border-top-color: var(--line-soft);
}

html[data-theme="nature"] .visit-session {
  box-shadow: 0 4px 20px -12px rgba(42, 51, 38, 0.14);
  border-color: var(--line-soft);
}

/* ============================================================
 * clean — 白基調・無彩に近いライン・控えめな青灰アクセント
 * ============================================================ */

html[data-theme="clean"] {
  --ink: #1c1e21;
  --ink-soft: #5a5d63;
  --ink-mute: #8e9299;
  --line: #e6e8ec;
  --line-soft: #f0f1f4;
  --paper: #ffffff;
  --paper-2: #f7f8fa;
  --cream: #fbfbfc;
  --green: #5b7fa8;
  --green-2: #7c9ab8;
  --green-3: #c9d6e6;
  --green-pale: #e8eef5;
  --green-deep: #3d5a78;
  --coral: #9a8e96;
  --coral-deep: #6d6269;
  --coral-pale: #f0ecee;
  --yellow: #c9b896;
  --yellow-soft: #ddd2b8;
  --yellow-pale: #f5f1e8;
  --blue: #6d8eb2;
  --blue-pale: #e4eaf2;
  --pink: #d4ced2;
  --pink-pale: #f2eef0;
  --beige: #ebe8e4;

  --text-display-head: var(--ink);
  --text-prose: var(--ink-soft);
  --text-prose-strong: var(--ink);
  --text-secondary: var(--ink-soft);
  --link-color: var(--green-deep);
  --link-hover-color: var(--green-deep);
  --heading-accent: var(--green-deep);
  --text-body-size: 15px;

  /* LP 下部 CTA（見学予約バナー） */
  --cta-banner-bg: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
  --cta-banner-border: 1px solid var(--line);
  --cta-card-shadow: 0 4px 20px -12px rgba(0, 0, 0, 0.1);
}

html[data-theme="clean"] body {
  background: var(--paper);
  color: var(--ink);
}

html[data-theme="clean"] .page-bg {
  background: #ffffff;
}

html[data-theme="clean"] .site-header {
  background: #ffffff;
  border-bottom-color: var(--line);
  box-shadow: none;
}

html[data-theme="clean"] .hero {
  background: #ffffff;
}

html[data-theme="clean"] .hero-heading-rich .quote,
html[data-theme="clean"] .hero h1 .quote {
  background: linear-gradient(transparent 62%, rgba(0, 0, 0, 0.06) 62%);
}

html[data-theme="clean"] .hero-img-wrap {
  box-shadow: 0 12px 40px -28px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--line);
}

html[data-theme="clean"] .page-hero {
  background: #ffffff;
  border-bottom-color: var(--line);
}

html[data-theme="clean"] .news-item {
  border-bottom-color: var(--line);
}

html[data-theme="clean"] .news-cta a {
  border-color: var(--line);
  background: var(--paper);
  color: var(--link-color);
}

html[data-theme="clean"] .btn-green {
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.12);
}

html[data-theme="clean"] .btn-coral {
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.1);
}

html[data-theme="clean"] .access-btn {
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.12);
}

html[data-theme="clean"] .access-card {
  background: var(--paper);
  box-shadow: 0 4px 24px -16px rgba(0, 0, 0, 0.08);
  border-color: var(--line);
}

html[data-theme="clean"] .news-card:hover {
  box-shadow: 0 8px 28px -18px rgba(0, 0, 0, 0.1);
}

html[data-theme="clean"] footer {
  background: var(--paper-2);
  border-top-color: var(--line);
}

html[data-theme="clean"] .visit-session {
  box-shadow: 0 2px 16px -10px rgba(0, 0, 0, 0.08);
  border-color: var(--line);
}

/* ============================================================
 * sunshine — ひだまり・はちみつ色（安心感・元気さを抑えめに）
 * ============================================================ */

html[data-theme="sunshine"] {
  --ink: #3a3228;
  --ink-soft: #6b5f4f;
  --ink-mute: #958575;
  --line: #edd9b8;
  --line-soft: #f5ead0;
  --paper: #fffbf5;
  --paper-2: #fff3e4;
  --cream: #ffefdc;
  --green: #e8a93a;
  --green-2: #f0c46a;
  --green-3: #fce3b8;
  --green-pale: #fff4e0;
  --green-deep: #b87a12;
  --coral: #e88a6a;
  --coral-deep: #c45a3c;
  --coral-pale: #ffdccd;
  --yellow: #f0c14d;
  --yellow-soft: #f8da7a;
  --yellow-pale: #fff2cc;
  --blue: #8fb8d4;
  --blue-pale: #e2eef6;
  --pink: #f5c4c4;
  --pink-pale: #fdeaea;
  --beige: #f2e6d4;

  --text-display-head: var(--ink);
  --text-prose: var(--ink-soft);
  --text-prose-strong: var(--ink);
  --text-secondary: var(--ink-soft);
  --link-color: var(--green-deep);
  --link-hover-color: var(--green-deep);
  --heading-accent: var(--green-deep);

  /* LP 下部 CTA（見学予約バナー） */
  --cta-banner-bg: linear-gradient(180deg, #fffefb 0%, #fff0dc 50%, #ffe8c8 100%);
  --cta-banner-border: 1px solid rgba(237, 217, 184, 0.85);
  --cta-card-shadow: 0 8px 20px -10px rgba(120, 80, 30, 0.18);
}

html[data-theme="sunshine"] body {
  background: var(--paper);
  color: var(--ink);
}

html[data-theme="sunshine"] .page-bg {
  background:
    radial-gradient(ellipse 110% 55% at 25% 0%, rgba(255, 220, 160, 0.45), transparent 52%),
    linear-gradient(180deg, #fffefb 0%, #fff4e6 55%, #ffecd8 100%);
}

html[data-theme="sunshine"] .site-header {
  background: rgba(255, 251, 245, 0.96);
  backdrop-filter: blur(6px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 0 rgba(184, 122, 18, 0.06);
}

html[data-theme="sunshine"] .hero {
  background:
    radial-gradient(circle at 10% 22%, rgba(255, 220, 150, 0.55), transparent 30%),
    radial-gradient(circle at 92% 75%, rgba(255, 200, 170, 0.22), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #fff6ea 100%);
}

html[data-theme="sunshine"] .hero-heading-rich .quote,
html[data-theme="sunshine"] .hero h1 .quote {
  background: linear-gradient(transparent 62%, rgba(232, 169, 58, 0.38) 62%);
}

html[data-theme="sunshine"] .hero-img-wrap {
  box-shadow: 0 20px 44px -24px rgba(120, 80, 20, 0.22);
  border: 1px solid rgba(237, 217, 184, 0.9);
}

html[data-theme="sunshine"] .page-hero {
  background:
    radial-gradient(circle at 8% 28%, rgba(255, 220, 160, 0.35), transparent 28%),
    linear-gradient(180deg, #fffefb 0%, #fff0dc 100%);
  border-bottom-color: var(--line-soft);
}

html[data-theme="sunshine"] .news-item {
  border-bottom-color: rgba(184, 122, 18, 0.15);
}

html[data-theme="sunshine"] .news-cta a {
  border-color: rgba(196, 90, 60, 0.35);
  background: rgba(255, 255, 255, 0.85);
  color: var(--coral-deep);
}

html[data-theme="sunshine"] .btn-green {
  box-shadow: 0 6px 16px -8px rgba(184, 122, 18, 0.35);
}

html[data-theme="sunshine"] .btn-coral {
  box-shadow: 0 6px 16px -8px rgba(196, 90, 60, 0.3);
}

html[data-theme="sunshine"] .access-btn {
  box-shadow: 0 8px 16px -10px rgba(184, 122, 18, 0.32);
}

html[data-theme="sunshine"] .access-card {
  background: linear-gradient(180deg, #ffffff, var(--paper-2));
  box-shadow: 0 12px 28px -18px rgba(120, 80, 30, 0.12);
  border-color: var(--line-soft);
}

html[data-theme="sunshine"] .news-card:hover {
  box-shadow: 0 12px 28px -14px rgba(120, 80, 30, 0.14);
}

html[data-theme="sunshine"] footer {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-top-color: var(--line-soft);
}

html[data-theme="sunshine"] .visit-session {
  box-shadow: 0 4px 20px -12px rgba(120, 80, 30, 0.1);
  border-color: var(--line-soft);
}

/* ============================================================
 * sakura — 春・入園の季節（やさしいピンク＋若草でバランス）
 * ============================================================ */

html[data-theme="sakura"] {
  --ink: #453a40;
  --ink-soft: #6d5e66;
  --ink-mute: #958790;
  --line: #efd4dc;
  --line-soft: #f8e6eb;
  --paper: #fffafc;
  --paper-2: #fff2f6;
  --cream: #ffeef3;
  --green: #6aab7a;
  --green-2: #8fc49a;
  --green-3: #c8e6cf;
  --green-pale: #e8f5eb;
  --green-deep: #3d7a52;
  --coral: #d97a8c;
  --coral-deep: #b84d62;
  --coral-pale: #fcd4dc;
  --yellow: #e8c878;
  --yellow-soft: #f2dda0;
  --yellow-pale: #fdf6e4;
  --blue: #8fb4c9;
  --blue-pale: #e4eef5;
  --pink: #e8a4b8;
  --pink-pale: #fde8ef;
  --beige: #f5e8ea;

  --text-display-head: var(--ink);
  --text-prose: var(--ink-soft);
  --text-prose-strong: var(--ink);
  --text-secondary: var(--ink-soft);
  --link-color: var(--green-deep);
  --link-hover-color: var(--green-deep);
  --heading-accent: var(--green-deep);

  /* LP 下部 CTA（見学予約バナー） */
  --cta-banner-bg: linear-gradient(180deg, #fffeff 0%, #fff5f9 50%, #fceef4 100%);
  --cta-banner-border: 1px solid rgba(239, 212, 220, 0.9);
  --cta-card-shadow: 0 8px 22px -10px rgba(90, 50, 65, 0.16);
}

html[data-theme="sakura"] body {
  background: var(--paper);
  color: var(--ink);
}

html[data-theme="sakura"] .page-bg {
  background:
    radial-gradient(ellipse 120% 50% at 50% 0%, rgba(255, 210, 225, 0.5), transparent 55%),
    radial-gradient(ellipse at 100% 80%, rgba(200, 230, 207, 0.25), transparent 40%),
    linear-gradient(180deg, #fffbfd 0%, #fff5f9 45%, #fceef4 100%);
}

html[data-theme="sakura"] .site-header {
  background: rgba(255, 250, 252, 0.95);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 0 rgba(216, 122, 140, 0.08);
}

html[data-theme="sakura"] .hero {
  background:
    radial-gradient(circle at 12% 24%, rgba(255, 210, 225, 0.55), transparent 28%),
    radial-gradient(circle at 88% 72%, rgba(200, 230, 207, 0.35), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fff5f9 100%);
}

html[data-theme="sakura"] .hero-heading-rich .quote,
html[data-theme="sakura"] .hero h1 .quote {
  background: linear-gradient(transparent 62%, rgba(232, 164, 184, 0.42) 62%);
}

html[data-theme="sakura"] .hero-img-wrap {
  box-shadow: 0 22px 44px -22px rgba(100, 50, 70, 0.18);
  border: 1px solid rgba(239, 212, 220, 0.95);
}

html[data-theme="sakura"] .page-hero {
  background:
    radial-gradient(circle at 8% 30%, rgba(255, 218, 230, 0.45), transparent 28%),
    radial-gradient(circle at 94% 65%, rgba(200, 230, 207, 0.2), transparent 30%),
    linear-gradient(180deg, #fffefe 0%, #fff0f5 100%);
  border-bottom-color: var(--line-soft);
}

html[data-theme="sakura"] .news-item {
  border-bottom-color: rgba(216, 122, 140, 0.18);
}

html[data-theme="sakura"] .news-cta a {
  border-color: rgba(184, 77, 98, 0.3);
  background: rgba(255, 255, 255, 0.88);
  color: var(--coral-deep);
}

html[data-theme="sakura"] .btn-green {
  box-shadow: 0 6px 18px -8px rgba(61, 122, 82, 0.28);
}

html[data-theme="sakura"] .btn-coral {
  box-shadow: 0 6px 18px -8px rgba(184, 77, 98, 0.28);
}

html[data-theme="sakura"] .access-btn {
  box-shadow: 0 8px 18px -12px rgba(61, 122, 82, 0.26);
}

html[data-theme="sakura"] .access-card {
  background: linear-gradient(180deg, #ffffff, var(--paper-2));
  box-shadow: 0 12px 28px -18px rgba(90, 50, 65, 0.12);
  border-color: var(--line-soft);
}

html[data-theme="sakura"] .news-card:hover {
  box-shadow: 0 12px 28px -14px rgba(90, 50, 65, 0.14);
}

html[data-theme="sakura"] footer {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  border-top-color: var(--line-soft);
}

html[data-theme="sakura"] .visit-session {
  box-shadow: 0 4px 20px -12px rgba(90, 50, 65, 0.1);
  border-color: var(--line-soft);
}

/* ============================================================
 * comfort — 既定配色のまま、タイポをワンランク上げる
 * ============================================================ */

html[data-typography="comfort"] {
  --text-body-size: 15.5px;
  --text-body-lh: 1.75;
  --text-body-track: 0.025em;
  --text-brand-size: 25px;
  --text-brand-en-size: 10.5px;
  --text-nav-primary-size: 15.5px;
  --text-nav-mega-size: 14.5px;
  --text-btn-size: 15px;
  --text-hero-size: 50px;
  --text-hero-lh: 1.48;
  --text-hero-track: 0.028em;
  --text-hero-lead-size: 16px;
  --text-hero-lead-lh: 2;
  --text-hero-cta-size: 15.5px;
  --text-page-hero-h1-size: 40px;
  --text-page-hero-h1-track: 0.038em;
  --text-page-hero-en-size: 12px;
  --text-page-hero-lead-size: 15px;
  --text-page-hero-lead-lh: 1.88;
  --text-sec-title-size: 25px;
  --text-sec-title-track: 0.038em;
  --text-sec-num-size: 17px;
  --text-sec-sub-size: 14.5px;
  --text-page-desc-size: 15.5px;
  --text-page-desc-lh: 1.9;
  --text-page-desc-h2-size: 20px;
  --text-page-desc-h3-size: 18px;
  --text-page-desc-h4-size: 15.5px;
  --text-page-desc-pre-size: 14.5px;
  --text-page-desc-pre-lh: 1.62;
  --text-breadcrumb-size: 13px;
  --text-site-notice-size: 14.5px;

  /* 段階スケール（--text-md 等を使う UI もまとめて少し大きく） */
  --text-9-5: 10.5px;
  --text-xs: 11px;
  --text-2xs: 11.5px;
  --text-sm: 12px;
  --text-sm-md: 12.5px;
  --text-md: 13px;
  --text-md-lg: 13.5px;
  --text-base: 14px;
  --text-base-lg: 14.5px;
  --text-14-5: 15.5px;
  --text-lg: 15px;
  --text-xl: 16px;
  --text-2xl: 18px;
  --text-3xl: 19px;
  --text-4xl: 20px;
  --text-5xl: 22px;
  --text-6xl: 23px;
  --text-7xl: 24px;
  --text-8xl: 26px;
  --text-9xl: 32px;
  --text-10xl: 36px;
  --text-11xl: 52px;

  /* ≤960px セマンティック（モバイルでも一段） */
  --text-hero-size-mobile: 32px;
  --text-hero-lead-size-mobile: 15.5px;
  --text-hero-btn-size-mobile: 14.5px;
  --text-page-hero-h1-size-mobile: 26px;
  --text-page-hero-en-size-mobile: 11px;
  --text-page-hero-lead-size-mobile: 13.5px;
  --text-sec-num-size-mobile: 14.5px;
  --text-sec-title-size-mobile: 20px;
  --text-sec-sub-size-mobile: 12.5px;
  --text-brand-size-mobile: 20px;
  --text-brand-en-size-mobile: 9px;
  --text-nav-primary-mobile: 16px;
  --text-nav-mega-mobile: 15px;
  --text-pillar-title-mobile: 12.5px;
  --text-pillar-desc-mobile: 11px;
  --text-class-name-mobile: 14.5px;
  --text-class-desc-mobile: 12.5px;
  --text-tl-time-mobile: 13.5px;
  --text-tl-label-mobile: 11.5px;
  --text-season-title-yrr-mobile: 20px;
  --text-season-li-yrr-mobile: 12px;
  --text-season-title-mobile: 22px;
  --text-season-yr-mobile: 12px;
  --text-season-li-mobile: 12.5px;
  --text-map-tag-mobile: 10.5px;
  --text-panel-h-mobile: 14.5px;
  --text-checklist-mobile: 13px;
  --text-fac-cap-mobile: 10px;
  --text-scroll-cue-icon: 27px;
  --text-news-item-mobile: 13px;
  --text-news-date-mobile: 12px;
  --text-cta-h3-mobile: 20px;
  --text-cta-b2-big-mobile: 22px;
  --text-news-card-h3-mobile: 15.5px;
  --text-news-card-p-mobile: 12.5px;
  --text-flow-step-no-mobile: 13px;
  --text-flow-h4-mobile: 13.5px;
  --text-flow-p-mobile: 12px;
  --text-info-table-mobile: 13px;
  --text-info-th-mobile: 13px;
  --text-fee-card-h-mobile: 14.5px;
  --text-fee-card-num-mobile: 27px;
  --text-cal-when-mobile: 13px;
  --text-cal-what-mobile: 12.5px;
  --text-cal-arrow-mobile: 12px;
  --text-year-overview-h2-mobile: 22px;
  --text-month-m-no-mobile: 27px;
  --text-sup-detail-h3-mobile: 15.5px;
  --text-sup-detail-p-mobile: 13px;
  --text-hero-size-xs: 26px;
}

/* ============================================================
 * comfort2 — comfort よりタイポを一律 +5px（既定配色のまま）
 * ============================================================ */

html[data-typography="comfort2"] {
  --text-body-size: 20.5px;
  --text-body-lh: 1.75;
  --text-body-track: 0.025em;
  --text-brand-size: 30px;
  --text-brand-en-size: 15.5px;
  --text-nav-primary-size: 20.5px;
  --text-nav-mega-size: 19.5px;
  --text-btn-size: 20px;
  --text-hero-size: 55px;
  --text-hero-lh: 1.48;
  --text-hero-track: 0.028em;
  --text-hero-lead-size: 21px;
  --text-hero-lead-lh: 2;
  --text-hero-cta-size: 20.5px;
  --text-page-hero-h1-size: 45px;
  --text-page-hero-h1-track: 0.038em;
  --text-page-hero-en-size: 17px;
  --text-page-hero-lead-size: 20px;
  --text-page-hero-lead-lh: 1.88;
  --text-sec-title-size: 30px;
  --text-sec-title-track: 0.038em;
  --text-sec-num-size: 22px;
  --text-sec-sub-size: 19.5px;
  --text-page-desc-size: 20.5px;
  --text-page-desc-lh: 1.9;
  --text-page-desc-h2-size: 25px;
  --text-page-desc-h3-size: 23px;
  --text-page-desc-h4-size: 20.5px;
  --text-page-desc-pre-size: 19.5px;
  --text-page-desc-pre-lh: 1.62;
  --text-breadcrumb-size: 18px;
  --text-site-notice-size: 19.5px;

  --text-9-5: 15.5px;
  --text-xs: 16px;
  --text-2xs: 16.5px;
  --text-sm: 17px;
  --text-sm-md: 17.5px;
  --text-md: 18px;
  --text-md-lg: 18.5px;
  --text-base: 19px;
  --text-base-lg: 19.5px;
  --text-14-5: 20.5px;
  --text-lg: 20px;
  --text-xl: 21px;
  --text-2xl: 23px;
  --text-3xl: 24px;
  --text-4xl: 25px;
  --text-5xl: 27px;
  --text-6xl: 28px;
  --text-7xl: 29px;
  --text-8xl: 31px;
  --text-9xl: 37px;
  --text-10xl: 41px;
  --text-11xl: 57px;

  --text-hero-size-mobile: 37px;
  --text-hero-lead-size-mobile: 20.5px;
  --text-hero-btn-size-mobile: 19.5px;
  --text-page-hero-h1-size-mobile: 31px;
  --text-page-hero-en-size-mobile: 16px;
  --text-page-hero-lead-size-mobile: 18.5px;
  --text-sec-num-size-mobile: 19.5px;
  --text-sec-title-size-mobile: 25px;
  --text-sec-sub-size-mobile: 17.5px;
  --text-brand-size-mobile: 25px;
  --text-brand-en-size-mobile: 14px;
  --text-nav-primary-mobile: 21px;
  --text-nav-mega-mobile: 20px;
  --text-pillar-title-mobile: 17.5px;
  --text-pillar-desc-mobile: 16px;
  --text-class-name-mobile: 19.5px;
  --text-class-desc-mobile: 17.5px;
  --text-tl-time-mobile: 18.5px;
  --text-tl-label-mobile: 16.5px;
  --text-season-title-yrr-mobile: 25px;
  --text-season-li-yrr-mobile: 17px;
  --text-season-title-mobile: 27px;
  --text-season-yr-mobile: 17px;
  --text-season-li-mobile: 17.5px;
  --text-map-tag-mobile: 15.5px;
  --text-panel-h-mobile: 19.5px;
  --text-checklist-mobile: 18px;
  --text-fac-cap-mobile: 15px;
  --text-scroll-cue-icon: 32px;
  --text-news-item-mobile: 18px;
  --text-news-date-mobile: 17px;
  --text-cta-h3-mobile: 25px;
  --text-cta-b2-big-mobile: 27px;
  --text-news-card-h3-mobile: 20.5px;
  --text-news-card-p-mobile: 17.5px;
  --text-flow-step-no-mobile: 18px;
  --text-flow-h4-mobile: 18.5px;
  --text-flow-p-mobile: 17px;
  --text-info-table-mobile: 18px;
  --text-info-th-mobile: 18px;
  --text-fee-card-h-mobile: 19.5px;
  --text-fee-card-num-mobile: 32px;
  --text-cal-when-mobile: 18px;
  --text-cal-what-mobile: 17.5px;
  --text-cal-arrow-mobile: 17px;
  --text-year-overview-h2-mobile: 27px;
  --text-month-m-no-mobile: 32px;
  --text-sup-detail-h3-mobile: 20.5px;
  --text-sup-detail-p-mobile: 18px;
  --text-hero-size-xs: 31px;
}