/* ============================================================
   gen-v2.css  ―― リニューアル共通CSS（新1枚）
   ------------------------------------------------------------
   設計思想
   ・全ページがこの1枚だけを読み込む（既存 gen-renewal.css は当面残す）
   ・部品(見出し/本文/表/FAQ/ステップ等)は全ページ共通クラス gen-*
   ・色は :root のテーマ変数だけを、ページ側ラッパーで上書きして切替
       症状ページ  → 既定（青）
       施術ページ  → .gv-treat（施術共通の温色ベース）
       鍼ページ    → .gv-hari（白＋生成り＋緑1点）
   ・強調は2種のみ： <strong>（太字のみ）と .gv-hl（蛍光マーカー）
   ・囲み枠は使わず、背景の面と余白と細い罫線で塊を作る
   ・1カラム基本／最大2カラム／表は table-layout:fixed で横幅均一
   ============================================================ */

/* ---------- テーマ変数（既定＝症状ページ・青） ---------- */
:root {
  --gv-ink:      #1a1a1a;   /* 本文リッチブラック（全ページ共通） */
  --gv-ink-sub:  #555555;   /* 補足グレー */
  --gv-accent:   #004da0;   /* 主アクセント（見出し等） */
  --gv-accent2:  #1a6fc4;   /* 副アクセント */
  --gv-cream:    #faf9f5;   /* 生成り（基本の面） */
  --gv-cream2:   #f5f2ea;   /* 少し濃い生成り */
  --gv-tint:     #f0f6fc;   /* 極薄アクセント面 */
  --gv-deep:     #004da0;   /* 濃色の決め面（文字は白） */
  --gv-line:     #e7e3d8;   /* 極薄罫線 */
  --gv-hl:       #ffe27a;   /* 蛍光マーカー色 */
}

/* ---------- ページ土台 ---------- */
.gv {
  color: var(--gv-ink);
  font-family: 'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  line-height: 2.0;
}
.gv img { max-width: 100%; }

/* ---------- 面（セクション背景）：この5種だけ ---------- */
.gv-sec        { padding: 56px 20px; }
.gv-sec--white { background:#ffffff; }
.gv-sec--cream { background: var(--gv-cream); }
.gv-sec--cream2{ background: var(--gv-cream2); }
.gv-sec--tint  { background: var(--gv-tint); }
.gv-sec--deep  { background: var(--gv-deep); color:#fff; }
/* コンテンツ幅（読みやすい行長に制限） */
.gv-wrap { max-width: 680px; margin: 0 auto; }

/* ---------- 見出し（全ページ共通の形。色だけテーマで変わる） ---------- */
.gv-eyebrow {
  display:block; text-align:center;
  font-size:13px; font-weight:bold; letter-spacing:.12em;
  color: var(--gv-accent); margin-bottom:10px;
}
.gv-h2 {
  text-align:center; font-size:24px; font-weight:800; line-height:1.5;
  margin:0 0 28px; color: var(--gv-ink);
}
.gv-h2 b { color: var(--gv-accent); font-weight:800; }
.gv-h2::after {
  content:""; display:block; width:48px; height:3px;
  background: var(--gv-accent); margin:14px auto 0; border-radius:2px;
}
.gv-h3 { font-size:18px; font-weight:800; line-height:1.5; margin:36px 0 12px; }

/* 濃色面では見出しも白＋白ライン */
.gv-sec--deep .gv-h2, .gv-sec--deep .gv-h2 b { color:#fff; }
.gv-sec--deep .gv-h2::after { background:#fff; }
.gv-sec--deep .gv-eyebrow { color:#dfeafb; }

/* ---------- 本文 ---------- */
.gv-p { font-size:15px; line-height:2.0; margin:0 0 18px; text-align:left; color:var(--gv-ink); }
.gv-lead { text-align:center; font-size:16px; font-weight:bold; line-height:1.8; margin:0 auto 24px; max-width:600px; }
.gv-sec--deep .gv-p, .gv-sec--deep .gv-lead { color:#eef4fd; }

/* ---------- 強調は2種だけ ---------- */
.gv strong { font-weight:800; color:inherit; }
.gv-hl { background: linear-gradient(transparent 60%, var(--gv-hl) 60%); padding:0 2px; font-weight:bold; }
.gv-sec--deep .gv-hl { background: linear-gradient(transparent 60%, rgba(255,255,255,.42) 60%); }

/* ---------- 画像（インラインstyle撲滅） ---------- */
.gv-img { width:100%; height:auto; display:block; border-radius:12px; }
.gv-img--flat { border-radius:0; }
.gv-banner { display:block; }
.gv-banner img { width:100%; height:auto; display:block; }

/* ---------- 2カラム（画像＋テキスト。最大2列） ---------- */
.gv-cols { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
@media (max-width:600px){ .gv-cols { grid-template-columns:1fr; gap:18px; } }

/* ---------- チェックリスト（囲み枠なし・細罫線） ---------- */
.gv-list { margin:0 auto; padding:0; list-style:none; max-width:560px; }
.gv-list li { display:flex; align-items:baseline; gap:12px; padding:14px 0; border-bottom:1px solid var(--gv-line); font-size:16px; }
.gv-list li:last-child { border-bottom:none; }
.gv-list .gv-check { color:var(--gv-accent); font-weight:bold; flex-shrink:0; }

/* ---------- 番号つき効果リスト（カード枠なし・大きな番号） ---------- */
.gv-effect { display:grid; grid-template-columns:64px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid var(--gv-line); }
.gv-effect:last-child { border-bottom:none; }
.gv-effect-num { font-size:34px; font-weight:800; color:var(--gv-accent); line-height:1; font-feature-settings:"tnum"; }
.gv-effect-ttl { font-size:17px; font-weight:800; margin:0 0 6px; }
.gv-effect-body{ font-size:14px; line-height:1.9; color:var(--gv-ink-sub); margin:0; }

/* ---------- 均一グリッド（症状一覧など・同トーン統一） ---------- */
.gv-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--gv-line); border:1px solid var(--gv-line); border-radius:12px; overflow:hidden; }
@media (max-width:600px){ .gv-grid { grid-template-columns:1fr; } }
.gv-grid-cell { background:#fff; padding:18px; }
.gv-grid-ttl { font-size:15px; font-weight:800; margin:0 0 8px; padding-left:12px; border-left:3px solid var(--gv-accent); }
.gv-grid-body{ font-size:13px; line-height:1.85; color:var(--gv-ink-sub); margin:0; }

/* ---------- 表：横幅均一・線は最小限 ---------- */
.gv-table-wrap { max-width:640px; margin:0 auto; overflow-x:auto; }
.gv-table { width:100%; border-collapse:collapse; font-size:14px; table-layout:fixed; }
.gv-table th, .gv-table td { border-bottom:1px solid var(--gv-line); padding:14px 10px; text-align:center; line-height:1.6; vertical-align:middle; }
.gv-table thead th { border-bottom:2px solid var(--gv-ink); font-weight:800; }
.gv-table .gv-td-label { text-align:left; font-weight:bold; }

/* ---------- 比較表（当院列だけアクセント） ---------- */
.gv-vs { width:100%; border-collapse:collapse; font-size:14px; table-layout:fixed; }
.gv-vs th, .gv-vs td { border:1px solid var(--gv-line); padding:14px 8px; text-align:center; line-height:1.5; }
.gv-vs thead th { font-weight:800; background:var(--gv-cream); }
.gv-vs thead th.is-our { background:var(--gv-accent); color:#fff; }
.gv-vs .gv-vs-label { text-align:left; font-weight:bold; background:var(--gv-cream); width:24%; font-size:13px; }
.gv-vs td.is-our { background: color-mix(in srgb, var(--gv-accent) 10%, #fff); }
.gv-vs .mk-o { color:var(--gv-accent); font-size:18px; font-weight:bold; display:block; }
.gv-vs .mk-t { color:#bbb; font-size:18px; font-weight:bold; display:block; }
.gv-vs .vs-key { font-size:12px; color:var(--gv-ink-sub); display:block; margin-top:2px; }
@media (max-width:600px){
  .gv-vs, .gv-vs thead, .gv-vs tbody, .gv-vs tr, .gv-vs th, .gv-vs td { display:block; width:100%; box-sizing:border-box; }
  .gv-vs thead { display:none; }
  .gv-vs tr { border:1px solid var(--gv-line); border-radius:10px; margin-bottom:14px; overflow:hidden; }
  .gv-vs .gv-vs-label { background:var(--gv-accent); color:#fff; text-align:center; }
  .gv-vs td { border:none; border-top:1px solid var(--gv-line); text-align:left; padding:12px 14px 12px 84px; position:relative; }
  .gv-vs td::before { content:attr(data-l); position:absolute; left:14px; top:12px; width:60px; font-size:12px; font-weight:bold; color:var(--gv-ink-sub); }
  .gv-vs .mk-o, .gv-vs .mk-t { display:inline-block; margin-right:8px; }
  .gv-vs .vs-key { display:inline; }
}

/* ---------- ステップ（枠なし・実写主役・番号バッジのみ） ---------- */
.gv-steps { max-width:620px; margin:0 auto; list-style:none; padding:0; }
.gv-step { padding:28px 0; border-bottom:1px solid var(--gv-line); }
.gv-step:last-child { border-bottom:none; }
.gv-step-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.gv-step-no { width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--gv-accent); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:16px; }
.gv-step-ttl { font-size:18px; font-weight:800; margin:0; }
.gv-step-img { margin:14px 0; }
.gv-step-body{ font-size:14px; line-height:1.9; color:var(--gv-ink-sub); margin:0; }

/* ---------- FAQ（全ページ共通。青の帯を廃し落ち着いた形に） ---------- */
.gv-faq { max-width:620px; margin:0 auto; }
.gv-faq-item { padding:22px 0; border-bottom:1px solid var(--gv-line); }
.gv-faq-q { display:flex; gap:12px; font-size:16px; font-weight:800; margin-bottom:12px; }
.gv-faq-q .q { color:var(--gv-accent); flex-shrink:0; }
.gv-faq-a { font-size:14px; line-height:1.95; color:var(--gv-ink); padding-left:28px; margin:0; }

/* ---------- 担当者からのメッセージ（新コンテンツ型） ---------- */
.gv-message { display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:center; max-width:620px; margin:0 auto; }
@media (max-width:600px){ .gv-message { grid-template-columns:1fr; gap:14px; text-align:center; } }
.gv-message-photo { width:120px; height:120px; border-radius:50%; object-fit:cover; margin:0 auto; }
.gv-message-name { font-size:14px; color:var(--gv-ink-sub); margin:14px 0 0; }
.gv-message-name b { font-size:17px; color:var(--gv-ink); }

/* ---------- 結論（決め面。テーマ色の濃色に載せる） ---------- */
.gv-conc { text-align:center; max-width:620px; margin:0 auto; }
.gv-conc-lead { font-size:15px; margin:0 0 10px; font-weight:bold; }
.gv-conc-main { font-size:22px; font-weight:800; line-height:1.6; margin:0 0 16px; }
.gv-conc-body { font-size:15px; line-height:1.95; margin:0; }

/* ============================================================
   テーマ切替：ページ側ラッパーに付けるだけ
   ============================================================ */

/* 施術ページ共通（温色ベース。産後骨盤・姿勢矯正などで共有） */
.gv-treat {
  --gv-accent:  #E8607A;
  --gv-accent2: #f0a060;
  --gv-tint:    #fff3ee;
  --gv-deep:    #E8607A;
}

/* 鍼ページ（白＋生成りベース＋緑1点） */
.gv-hari {
  --gv-accent:  #4a9d5b;   /* 緑 */
  --gv-accent2: #1a6fc4;   /* 差し色の青はごく一部で使用 */
  --gv-tint:    #eef7f0;
  --gv-deep:    #4a9d5b;   /* 「なぜ効果を実感できるか」の決め面 */
}