/* ===================================================
   デザインテーマシステム
   カラーテーマ10種 × レイアウトパターン5種
   今後の追加：カラーは [data-color="xxx"] ブロックを追記するだけ
              レイアウトは [data-layout="xxx"] ブロックを追記するだけ
=================================================== */


/* ============================================================
   カラーテーマ（10種）
   body[data-color="テーマ名"] でCSS変数をまとめて上書きする
   デフォルト（ocean）は style.css の :root で定義済み
============================================================ */

/* 1. ocean ─ デフォルト（style.css の :root が適用） */

/* 2. sakura ─ 桜ピンク×深みローズ */
body[data-color="sakura"] {
  --color-primary:         #7B3252;
  --color-primary-dark:    #5C2040;
  --color-primary-light:   #9B4268;
  --color-accent:          #D4739A;
  --color-accent-light:    #F9DCEA;
  --color-ocean:           #FFF0F5;
  --color-bg-dark:         #FFF0F5;
  --color-bg-section:      #FDF5F8;
  --color-border:          #F5D0DE;
  --color-feminine:        #D4739A;
  --color-feminine-light:  #F5D0DE;
  --shadow-sm: 0 2px 8px rgba(123, 50, 82, 0.08);
  --shadow-md: 0 4px 16px rgba(123, 50, 82, 0.12);
  --shadow-lg: 0 8px 32px rgba(123, 50, 82, 0.16);
}

/* 3. forest ─ 深い森グリーン */
body[data-color="forest"] {
  --color-primary:         #2D5A27;
  --color-primary-dark:    #1E3D1A;
  --color-primary-light:   #3E7A38;
  --color-accent:          #5C9A54;
  --color-accent-light:    #C8E6C5;
  --color-ocean:           #F1F8F0;
  --color-bg-dark:         #F1F8F0;
  --color-bg-section:      #F5FAF4;
  --color-border:          #C8E6C5;
  --color-feminine:        #7CB87A;
  --color-feminine-light:  #D8EDDA;
  --shadow-sm: 0 2px 8px rgba(45, 90, 39, 0.08);
  --shadow-md: 0 4px 16px rgba(45, 90, 39, 0.12);
  --shadow-lg: 0 8px 32px rgba(45, 90, 39, 0.16);
}

/* 4. gold ─ 温かいゴールド×アンバー */
body[data-color="gold"] {
  --color-primary:         #7B5200;
  --color-primary-dark:    #5A3C00;
  --color-primary-light:   #A06B00;
  --color-accent:          #C48A00;
  --color-accent-light:    #FFE082;
  --color-ocean:           #FFFDE7;
  --color-bg-dark:         #FFFDE7;
  --color-bg-section:      #FFFCF0;
  --color-border:          #FFE082;
  --color-feminine:        #E8A000;
  --color-feminine-light:  #FFECB3;
  --shadow-sm: 0 2px 8px rgba(123, 82, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(123, 82, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(123, 82, 0, 0.16);
}

/* 5. burgundy ─ ワインレッド×ボルドー */
body[data-color="burgundy"] {
  --color-primary:         #6D1A2C;
  --color-primary-dark:    #4E1220;
  --color-primary-light:   #8B2438;
  --color-accent:          #A83248;
  --color-accent-light:    #FFCDD2;
  --color-ocean:           #FFF5F7;
  --color-bg-dark:         #FFF5F7;
  --color-bg-section:      #FFF8F9;
  --color-border:          #FFCDD2;
  --color-feminine:        #C06070;
  --color-feminine-light:  #F8D7DC;
  --shadow-sm: 0 2px 8px rgba(109, 26, 44, 0.08);
  --shadow-md: 0 4px 16px rgba(109, 26, 44, 0.12);
  --shadow-lg: 0 8px 32px rgba(109, 26, 44, 0.16);
}

/* 6. lavender ─ 癒しのラベンダー×パープル */
body[data-color="lavender"] {
  --color-primary:         #4A3580;
  --color-primary-dark:    #342462;
  --color-primary-light:   #6048A0;
  --color-accent:          #7E57C2;
  --color-accent-light:    #E1D5F5;
  --color-ocean:           #F5F0FF;
  --color-bg-dark:         #F5F0FF;
  --color-bg-section:      #FAF8FF;
  --color-border:          #E1D5F5;
  --color-feminine:        #AB7FD0;
  --color-feminine-light:  #E8D8F5;
  --shadow-sm: 0 2px 8px rgba(74, 53, 128, 0.08);
  --shadow-md: 0 4px 16px rgba(74, 53, 128, 0.12);
  --shadow-lg: 0 8px 32px rgba(74, 53, 128, 0.16);
}

/* 7. charcoal ─ モダンモノクローム */
body[data-color="charcoal"] {
  --color-primary:         #2C2C2C;
  --color-primary-dark:    #1A1A1A;
  --color-primary-light:   #444444;
  --color-accent:          #555555;
  --color-accent-light:    #E0E0E0;
  --color-ocean:           #F5F5F5;
  --color-bg-dark:         #F5F5F5;
  --color-bg-section:      #F8F8F8;
  --color-border:          #DCDCDC;
  --color-feminine:        #888888;
  --color-feminine-light:  #E0E0E0;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
}

/* 8. copper ─ テラコッタ×コパー */
body[data-color="copper"] {
  --color-primary:         #7B3A1E;
  --color-primary-dark:    #5C2A14;
  --color-primary-light:   #9C4E2A;
  --color-accent:          #C0622B;
  --color-accent-light:    #FFCCBC;
  --color-ocean:           #FFF3EE;
  --color-bg-dark:         #FFF3EE;
  --color-bg-section:      #FFF7F4;
  --color-border:          #FFCCBC;
  --color-feminine:        #E08050;
  --color-feminine-light:  #FFDCD0;
  --shadow-sm: 0 2px 8px rgba(123, 58, 30, 0.08);
  --shadow-md: 0 4px 16px rgba(123, 58, 30, 0.12);
  --shadow-lg: 0 8px 32px rgba(123, 58, 30, 0.16);
}

/* 9. sage ─ セージグリーン×ナチュラル */
/* 9d. pink-pale ─ 淡く優しいピンク（美容系サロン向け） */
body[data-color="pink-pale"] {
  --color-primary:         #E8A5B8;
  --color-primary-dark:    #C47A90;
  --color-primary-light:   #F5C4D2;
  --color-accent:          #F0B8C6;
  --color-accent-light:    #FCE4EC;
  --color-ocean:           #FFF5F8;
  --color-bg-dark:         #FCE8EE;
  --color-bg-section:      #FFF9FB;
  --color-border:          #F5D5DE;
  --color-feminine:        #F2C5D0;
  --color-feminine-light:  #FBE5EC;
  --shadow-sm: 0 2px 8px rgba(232, 165, 184, 0.10);
  --shadow-md: 0 4px 16px rgba(232, 165, 184, 0.14);
  --shadow-lg: 0 8px 32px rgba(232, 165, 184, 0.18);
}

/* 9e. gray-soft ─ 上品な薄いグレー×白（モノトーン系） */
body[data-color="gray-soft"] {
  --color-primary:         #7A7A7A;
  --color-primary-dark:    #555555;
  --color-primary-light:   #A8A8A8;
  --color-accent:          #9E9E9E;
  --color-accent-light:    #DADADA;
  --color-ocean:           #F8F8F8;
  --color-bg-dark:         #EEEEEE;
  --color-bg-section:      #F5F5F5;
  --color-border:          #CFCFCF;
  --color-feminine:        #BABABA;
  --color-feminine-light:  #E8E8E8;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* 9f. aqua ─ 清涼な水色（透明感・明るさ重視） */
body[data-color="aqua"] {
  --color-primary:         #5BB4C7;
  --color-primary-dark:    #3B8A9C;
  --color-primary-light:   #8AD1E0;
  --color-accent:          #A3DCE8;
  --color-accent-light:    #D6EEF3;
  --color-ocean:           #F2FAFC;
  --color-bg-dark:         #E6F4F8;
  --color-bg-section:      #F5FBFD;
  --color-border:          #BFE2EB;
  --color-feminine:        #9ED4E0;
  --color-feminine-light:  #DCEFF4;
  --shadow-sm: 0 2px 8px rgba(91, 180, 199, 0.10);
  --shadow-md: 0 4px 16px rgba(91, 180, 199, 0.14);
  --shadow-lg: 0 8px 32px rgba(91, 180, 199, 0.18);
}

/* 9g. skyblue ─ 爽やかな空の青（穏やかで開放的） */
body[data-color="skyblue"] {
  --color-primary:         #6FB5E5;
  --color-primary-dark:    #4890C5;
  --color-primary-light:   #9BCDF0;
  --color-accent:          #B0D8F0;
  --color-accent-light:    #DCEDFB;
  --color-ocean:           #F5FAFE;
  --color-bg-dark:         #E8F2FB;
  --color-bg-section:      #F7FBFE;
  --color-border:          #C5E0F5;
  --color-feminine:        #A9CEEC;
  --color-feminine-light:  #DFEDFA;
  --shadow-sm: 0 2px 8px rgba(111, 181, 229, 0.10);
  --shadow-md: 0 4px 16px rgba(111, 181, 229, 0.14);
  --shadow-lg: 0 8px 32px rgba(111, 181, 229, 0.18);
}

/* 9c. natural ─ 若葉のように明るく温かみのあるナチュラルグリーン */
body[data-color="natural"] {
  --color-primary:         #5FB84A;  /* 若葉のメイングリーン */
  --color-primary-dark:    #3E8F2F;  /* 本文・見出しで視認性を確保 */
  --color-primary-light:   #8FD96A;
  --color-accent:          #A3D97F;
  --color-accent-light:    #E8F5DE;
  --color-ocean:           #F7FCEE;
  --color-bg-dark:         #F2FAE8;
  --color-bg-section:      #FAFDF6;
  --color-border:          #D0E9B3;
  --color-feminine:        #B5DE8E;
  --color-feminine-light:  #E8F3D5;
  --shadow-sm: 0 2px 8px rgba(95, 184, 74, 0.08);
  --shadow-md: 0 4px 16px rgba(95, 184, 74, 0.12);
  --shadow-lg: 0 8px 32px rgba(95, 184, 74, 0.16);
}

/* 9g. luxury ─ チャコールグレー×ゴールド×ホワイト（高級感・院長ユニフォーム由来） */
body[data-color="luxury"] {
  --color-primary:         #1F1F1F;  /* 黒に近いチャコール */
  --color-primary-dark:    #0F0F0F;  /* 強調・本文 */
  --color-primary-light:   #4A4A4A;
  --color-accent:          #C9A14A;  /* 落ち着いたゴールド */
  --color-accent-light:    #F0E2BC;
  --color-ocean:           #FAFAFA;  /* 清潔感のあるオフホワイト */
  --color-bg-dark:         #F2F2F2;
  --color-bg-section:      #FAFAFA;
  --color-border:          #E5E5E5;
  --color-feminine:        #D4B66A;  /* ライトゴールド（派生差し色） */
  --color-feminine-light:  #F4EAC9;
  --shadow-sm: 0 2px 8px rgba(31, 31, 31, 0.10);
  --shadow-md: 0 4px 16px rgba(201, 161, 74, 0.14);
  --shadow-lg: 0 8px 32px rgba(31, 31, 31, 0.20);
}

/* 9f. amber-sky ─ 水色（主色）×アンバー（差し色）のバイカラー */
body[data-color="amber-sky"] {
  --color-primary:         #2A8FBF;  /* 深めの水色（見出し・主要色） */
  --color-primary-dark:    #1E6E9A;  /* 本文強調 */
  --color-primary-light:   #5BB4E5;
  --color-accent:          #B8853B;  /* リッチアンバー（差し色・リンク・CTA） */
  --color-accent-light:    #F0E0C2;
  --color-ocean:           #EFF7FB;
  --color-bg-dark:         #F0F6FA;  /* 寒色寄り淡ブルー */
  --color-bg-section:      #F7FBFD;
  --color-border:          #C9E0EE;
  --color-feminine:        #D4A85F;  /* アンバーの派生 */
  --color-feminine-light:  #F4E6CC;
  --shadow-sm: 0 2px 8px rgba(42, 143, 191, 0.10);
  --shadow-md: 0 4px 16px rgba(184, 133, 59, 0.14);
  --shadow-lg: 0 8px 32px rgba(42, 143, 191, 0.18);
}

/* 9e. vivid ─ モダンネイビー基調 × ヴィヴィッドな青と緑のバイカラー差し色 */
body[data-color="vivid"] {
  --color-primary:         #0E2A4D;  /* ディープネイビー（本文・ヘッダー基調） */
  --color-primary-dark:    #091F3A;  /* より濃い見出し用 */
  --color-primary-light:   #2A4970;
  --color-accent:          #0099FF;  /* ヴィヴィッドブルー（差し色1） */
  --color-accent-light:    #CFEAFD;
  --color-ocean:           #F0F7FF;
  --color-bg-dark:         #F4F7FB;
  --color-bg-section:      #FAFCFE;
  --color-border:          #D4E3F2;
  --color-feminine:        #00C853;  /* ヴィヴィッドグリーン（差し色2） */
  --color-feminine-light:  #C8F1D8;
  --shadow-sm: 0 2px 8px rgba(14, 42, 77, 0.10);
  --shadow-md: 0 4px 16px rgba(14, 42, 77, 0.14);
  --shadow-lg: 0 8px 32px rgba(0, 153, 255, 0.18);
}

/* 9d. suzuran ─ すずらん（鈴蘭）の葉と花。淡くやわらかな緑×クリーム白 */
body[data-color="suzuran"] {
  --color-primary:         #7AAE81;  /* やわらかな緑 */
  --color-primary-dark:    #4F8458;  /* 本文・見出し用に視認性確保 */
  --color-primary-light:   #A8CDAD;
  --color-accent:          #B7D9BB;
  --color-accent-light:    #E4F1E5;
  --color-ocean:           #F6FBF5;
  --color-bg-dark:         #EFF6EE;
  --color-bg-section:      #F8FBF6;
  --color-border:          #CFE3CE;
  --color-feminine:        #C2DEC2;
  --color-feminine-light:  #ECF5EB;
  --shadow-sm: 0 2px 8px rgba(122, 174, 129, 0.10);
  --shadow-md: 0 4px 16px rgba(122, 174, 129, 0.14);
  --shadow-lg: 0 8px 32px rgba(122, 174, 129, 0.18);
}

/* 9b. mint ─ 淡く爽やかなミントグリーン（透明感・清涼感重視） */
body[data-color="mint"] {
  --color-primary:         #4BA898;
  --color-primary-dark:    #378578;
  --color-primary-light:   #82CFBE;
  --color-accent:          #7FCCB8;
  --color-accent-light:    #D4EDE4;
  --color-ocean:           #F3FAF7;
  --color-bg-dark:         #F3FAF7;
  --color-bg-section:      #F7FBF9;
  --color-border:          #D4EDE4;
  --color-feminine:        #A5D8C6;
  --color-feminine-light:  #E6F4EE;
  --shadow-sm: 0 2px 8px rgba(75, 168, 152, 0.08);
  --shadow-md: 0 4px 16px rgba(75, 168, 152, 0.12);
  --shadow-lg: 0 8px 32px rgba(75, 168, 152, 0.16);
}

body[data-color="sage"] {
  --color-primary:         #4A6741;
  --color-primary-dark:    #344B2E;
  --color-primary-light:   #5E8254;
  --color-accent:          #7AA870;
  --color-accent-light:    #D4EDCC;
  --color-ocean:           #F3F8F0;
  --color-bg-dark:         #F3F8F0;
  --color-bg-section:      #F7FAF5;
  --color-border:          #D4EDCC;
  --color-feminine:        #9EC090;
  --color-feminine-light:  #E0F0DA;
  --shadow-sm: 0 2px 8px rgba(74, 103, 65, 0.08);
  --shadow-md: 0 4px 16px rgba(74, 103, 65, 0.12);
  --shadow-lg: 0 8px 32px rgba(74, 103, 65, 0.16);
}

/* 10. warm ─ 白×ベージュ×ウォームブラウン */
body[data-color="warm"] {
  --color-primary:         #6B5344;
  --color-primary-dark:    #4A3728;
  --color-primary-light:   #8B7060;
  --color-accent:          #C4A882;
  --color-accent-light:    #E8DDD0;
  --color-ocean:           #FAF6F1;
  --color-bg:              #FFFDF9;
  --color-bg-dark:         #F5EFE6;
  --color-bg-section:      #FAF6F1;
  --color-border:          #E8DDD0;
  --color-feminine:        #C4A882;
  --color-feminine-light:  #EDE4D8;
  --color-text:            #3D3530;
  --color-text-light:      #6B5F56;
  --color-text-muted:      #9B8E83;
  --shadow-sm: 0 2px 8px rgba(107, 83, 68, 0.06);
  --shadow-md: 0 4px 16px rgba(107, 83, 68, 0.10);
  --shadow-lg: 0 8px 32px rgba(107, 83, 68, 0.14);
}

/* 縦書きキャッチコピー（data-catch-direction="vertical" で有効化） */
.hero-catch.catch-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin: 0 auto 20px;
  line-height: 1.8;
  letter-spacing: 0.12em;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  max-height: 70vh;
}
.hero-catch.catch-vertical + .hero-sub { text-align: center; }
/* 縦書き時はラベル（院名）を非表示 */
.hero-label.catch-vertical-hide { display: none; }
/* 縦書き時のヒーローコンテンツ位置を上寄せ */
.hero-content.catch-vertical-content { padding-top: 40px; }
@media (max-width: 599px) {
  .hero-catch.catch-vertical {
    font-size: 1.3rem;
    max-height: 50vh;
  }
}

/* 11. midnight ─ ミッドナイトブルー×インジゴ */
body[data-color="midnight"] {
  --color-primary:         #1A1A3A;
  --color-primary-dark:    #0E0E26;
  --color-primary-light:   #2E2E5A;
  --color-accent:          #3D5AF1;
  --color-accent-light:    #C5CFFC;
  --color-ocean:           #F0F2FF;
  --color-bg-dark:         #F0F2FF;
  --color-bg-section:      #F5F6FF;
  --color-border:          #C5CFFC;
  --color-feminine:        #6E88F5;
  --color-feminine-light:  #D5DCFD;
  --shadow-sm: 0 2px 8px rgba(26, 26, 58, 0.08);
  --shadow-md: 0 4px 16px rgba(26, 26, 58, 0.12);
  --shadow-lg: 0 8px 32px rgba(26, 26, 58, 0.16);
}


/* ============================================================
   レイアウトパターン（5種）
   body[data-layout="パターン名"] でレイアウトを切り替える
   デフォルト（classic）は style.css がそのまま適用
============================================================ */

/* ──────────────────────────────────────────────
   1. classic ─ デフォルト（style.css がそのまま適用）
────────────────────────────────────────────── */

/* ──────────────────────────────────────────────
   2. minimal ─ 余白重視・ホワイト基調
────────────────────────────────────────────── */

/* ヘッダー: 白背景＋ボーダー */
body[data-layout="minimal"] .site-header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}
body[data-layout="minimal"] .site-logo {
  color: var(--color-primary);
}
body[data-layout="minimal"] .logo-name {
  color: var(--color-primary);
}
body[data-layout="minimal"] .logo-tagline {
  color: var(--color-text-muted);
}
body[data-layout="minimal"] .hamburger-line {
  background-color: var(--color-primary);
}
body[data-layout="minimal"] .nav-link {
  color: var(--color-text);
}
body[data-layout="minimal"] .nav-link:hover,
body[data-layout="minimal"] .nav-link.is-active {
  color: var(--color-primary);
}

/* ヒーロー: 薄いオーバーレイ */
body[data-layout="minimal"] .hero::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 30, 60, 0.15) 0%,
    rgba(0, 30, 60, 0.45) 100%
  );
}

/* セクションタイトル: 左揃え（PC）、装飾ライン左揃え */
@media (min-width: 600px) {
  body[data-layout="minimal"] .section-title {
    text-align: left;
  }
  body[data-layout="minimal"] .section-title::after {
    margin-left: 0;
    width: 32px;
    height: 1px;
  }
  body[data-layout="minimal"] .section-subtitle {
    text-align: left;
  }
}

/* セクション背景: 代替背景を透明ボーダーで代替 */
body[data-layout="minimal"] .bg-cream-dark {
  background-color: transparent;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* カード: シャドウなし・ボーダーのみ */
body[data-layout="minimal"] .feature-card,
body[data-layout="minimal"] .menu-card,
body[data-layout="minimal"] .case-card,
body[data-layout="minimal"] .reason-card {
  box-shadow: none;
  border: 1px solid var(--color-border);
}

/* フッター: 白背景 */
body[data-layout="minimal"] .site-footer {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}
body[data-layout="minimal"] .footer-clinic-name,
body[data-layout="minimal"] .footer-address,
body[data-layout="minimal"] .footer-nav a {
  color: var(--color-text);
}
body[data-layout="minimal"] .footer-copyright {
  color: var(--color-text-muted);
}

/* ──────────────────────────────────────────────
   3. bold ─ 力強い・コントラスト重視
────────────────────────────────────────────── */

/* ヘッダー: より濃い色 */
body[data-layout="bold"] .site-header {
  background-color: var(--color-primary-dark);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  height: 80px;
}
body[data-layout="bold"] {
  --header-height: 80px;
}

/* ヒーロー: 強いオーバーレイ・大きいキャッチ */
body[data-layout="bold"] .hero {
  min-height: 600px;
}
body[data-layout="bold"] .hero::before {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.35) 60%,
    rgba(0, 0, 0, 0.55) 100%
  );
}
body[data-layout="bold"] .hero-catch {
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: 0.06em;
}
body[data-layout="bold"] .hero-sub {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
}

/* セクションタイトル: 大きく・太く */
body[data-layout="bold"] .section-title {
  font-size: clamp(1.4rem, 4.5vw, 2.2rem);
  letter-spacing: 0.06em;
}
body[data-layout="bold"] .section-title::after {
  width: 56px;
  height: 3px;
  margin-top: 16px;
}

/* 実績バー: 濃い背景 */
body[data-layout="bold"] .achievement-bar {
  background-color: var(--color-primary-dark);
}

/* ボタン: 角を直角に */
body[data-layout="bold"] .btn {
  border-radius: 0;
}
body[data-layout="bold"] .btn-accent {
  border-radius: 0;
}

/* セクション: パディングを広く */
body[data-layout="bold"] .section-padding {
  padding: 80px 0;
}

/* ──────────────────────────────────────────────
   4. split ─ ヒーロー左右分割（PC）
────────────────────────────────────────────── */

@media (min-width: 600px) {
  /* ヒーローを左右グリッドに */
  body[data-layout="split"] .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 75vh;
    overflow: hidden;
    align-items: stretch;
  }

  /* 背景画像を右側のグリッドアイテムに */
  body[data-layout="split"] .hero-bg {
    position: relative;
    inset: auto;
    order: 2;
  }
  body[data-layout="split"] .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* テキストコンテンツを左側に */
  body[data-layout="split"] .hero-content {
    order: 1;
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
  }

  /* 左側のグラデーションオーバーレイを無効化 */
  body[data-layout="split"] .hero::before {
    content: none;
  }

  /* 右側の画像にのみオーバーレイ */
  body[data-layout="split"] .hero-overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
  }

  /* 電話ボタン: split レイアウトでは primary 色で */
  body[data-layout="split"] .btn-outline-white {
    color: var(--color-accent-light);
    border-color: var(--color-accent-light);
  }

  /* 当院について: 2カラムグリッド */
  body[data-layout="split"] .about-intro .container {
    text-align: left;
  }

  /* フィーチャーグリッド: 横並び強調 */
  body[data-layout="split"] .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ──────────────────────────────────────────────
   5. card ─ カード重視・角丸・ソフトシャドウ
────────────────────────────────────────────── */

/* 全体背景を薄いセクション色に */
body[data-layout="card"] {
  background-color: var(--color-bg-section);
}

/* セクション内コンテナをカード化 */
body[data-layout="card"] .section-padding {
  padding: 40px 0;
}
body[data-layout="card"] .section-padding .container,
body[data-layout="card"] .section-padding .container-narrow {
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding-top: 48px;
  padding-bottom: 48px;
}

/* セクション背景: 統一（カード自体で差別化） */
body[data-layout="card"] .bg-cream-dark {
  background-color: var(--color-bg-section);
}

/* カード要素: 角丸を強調 */
body[data-layout="card"] .feature-card,
body[data-layout="card"] .menu-card,
body[data-layout="card"] .case-card,
body[data-layout="card"] .reason-card,
body[data-layout="card"] .review-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* ヒーロー: 角丸ヒーロー */
body[data-layout="card"] .hero {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  margin: 0;
}

/* ボタン: 丸みを強調 */
body[data-layout="card"] .btn {
  border-radius: 100px;
}

/* achievement-bar: カード化 */
body[data-layout="card"] .achievement-bar {
  margin: 0 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* スティッキーCTA: 角丸 */
body[data-layout="card"] .sticky-cta-btn {
  border-radius: var(--radius-md);
}

/* ヘッダー: ソフトシャドウ */
body[data-layout="card"] .site-header {
  box-shadow: var(--shadow-md);
}