/* =========================================================================
   article-kv.css — 記事本文デザイン（KYVTS新デザイン・2026-07-19確定）
   記事「歌声のお悩み相談室」ボディの単一の正本CSS。全記事がこれ1本を共有する
   （デザインをバラつかせないため）。HP骨格(header/footer/sticky)は触らず、
   本文は .kv-body スコープに閉じてサイトCSS(svc-common.css)の変数を汚さない。
   ========================================================================= */
.kv-body{
  --paper:#FBF9F3; --ink:#1c1a15; --ink-soft:#6d675b; --line:#e6e1d3;
  --accent:#ffd400; --accent-ink:#1c1a15; --bar-ta:#1c1a15; --bar-ct:#98937f;
  background:var(--paper); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  line-height:2; font-size:15.5px; -webkit-font-smoothing:antialiased;
  margin-top:var(--header-h); /* 固定ヘッダー(66px)分を確保。先頭行がヘッダー裏に隠れるのを防ぐ */
}
.kv-body *{box-sizing:border-box; margin:0; padding:0;}
.kv-body .wrap{max-width:640px; margin:0 auto; padding:0 24px;}
.kv-body a{color:inherit;}
/* 本文中の記事リンク＝下線でリンクだと分かるようにする（.btn / .related a は個別に none 指定で除外） */
.kv-body p a, .kv-body li a{text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-color:var(--accent); font-weight:700;}
.kv-body p a:hover, .kv-body li a:hover{text-decoration-color:var(--ink);}

/* ── ヒーロー ── */
.kv-body .hero{padding:clamp(30px,6vw,56px) 0 clamp(36px,7vw,64px);}
.kv-body .eyebrow{font-size:12.5px; letter-spacing:.14em; color:var(--ink-soft); margin-bottom:26px;}
.kv-body .eyebrow b{color:var(--ink); font-weight:700;}
.kv-body .bubble{position:relative; border:1.5px solid var(--ink); border-radius:16px; padding:20px 22px; margin-bottom:36px; font-weight:700; font-size:clamp(14.5px,3.2vw,16.5px); line-height:1.95;}
.kv-body .bubble::after{content:""; position:absolute; left:40px; bottom:-9.5px; width:16px; height:16px; background:var(--paper); border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:rotate(45deg);}
.kv-body .bubble .who{position:absolute; top:-11px; left:16px; background:var(--accent); color:var(--accent-ink); font-size:11.5px; font-weight:800; letter-spacing:.08em; padding:2px 12px; border-radius:99px;}
.kv-body h1{font-size:clamp(26px,6.4vw,40px); font-weight:800; line-height:1.55; letter-spacing:.01em; margin-bottom:22px;}
.kv-body h1 mark{background:linear-gradient(transparent 68%, var(--accent) 68%); color:inherit;}
.kv-body .hero p{color:var(--ink-soft); max-width:34em;}

/* ── セクション共通 ── */
.kv-body section{padding:clamp(40px,8vw,68px) 0; border-top:1px solid var(--line);}
.kv-body .num{display:block; font-size:12px; letter-spacing:.18em; color:var(--ink-soft); margin-bottom:14px;}
.kv-body h2{font-size:clamp(20px,4.6vw,27px); font-weight:800; line-height:1.7; margin-bottom:20px;}
.kv-body h2 mark{background:linear-gradient(transparent 68%, var(--accent) 68%); color:inherit;}
.kv-body p + p{margin-top:1.2em;}
.kv-body section p{color:var(--ink); max-width:38em;}
.kv-body .term{font-weight:700;}

/* ── 図（TA/CTの受け渡し等・記事ごとに中身は差し替え） ── */
.kv-body .fig{margin:34px 0 8px; font-size:12.5px;}
.kv-body .fig-title{font-weight:700; margin-bottom:14px; font-size:13px;}
.kv-body .pitch-axis{display:flex; justify-content:space-between; color:var(--ink-soft); margin-bottom:6px; letter-spacing:.06em;}
.kv-body .row{display:flex; align-items:center; gap:10px; margin:14px 0;}
.kv-body .row-label{flex:0 0 6.5em; font-weight:700; line-height:1.5;}
.kv-body .track{position:relative; flex:1; display:flex; height:34px; border-radius:6px; overflow:hidden;}
.kv-body .seg{display:flex; align-items:center; justify-content:center; color:var(--paper); font-weight:700; letter-spacing:.04em;}
.kv-body .seg.ta{background:var(--bar-ta);}
.kv-body .seg.ct{background:var(--bar-ct);}
.kv-body .seg.empty{background:transparent; border:1.5px dashed var(--line); color:var(--ink-soft);}
.kv-body .wall{flex:0 0 auto; width:5px; background:var(--accent);}
.kv-body .switch-line{position:relative; height:20px; margin:2px 0 2px calc(6.5em + 10px);}
.kv-body .switch-line::before{content:""; position:absolute; left:44%; top:-96px; bottom:0; border-left:2px dashed var(--accent);}
.kv-body .switch-label{position:absolute; left:44%; transform:translateX(-50%); top:2px; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:11.5px; padding:2px 10px; border-radius:99px; white-space:nowrap;}
.kv-body .fig-note{color:var(--ink-soft); margin-top:26px; font-size:12.5px; line-height:1.9;}

/* ── ブランドイラスト（既存 article-<slug>-NN.png を置く枠。記事の「感じ」を伝える図の標準） ── */
.kv-body .figimg{margin:30px 0 8px;}
.kv-body .figimg img{width:100%; height:auto; display:block; border-radius:16px; border:1px solid var(--line); background:#fff;}
.kv-body .figimg figcaption{color:var(--ink-soft); font-size:12.5px; line-height:1.9; margin-top:12px;}

/* ── セルフチェック（心当たり。断定せず「気づきのきっかけ」に留める） ── */
.kv-body .checks{list-style:none; margin-top:26px;}
.kv-body .checks li{display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line);}
.kv-body .checks li:last-child{border-bottom:1px solid var(--line);}
.kv-body .checks .box{flex:0 0 auto; width:20px; height:20px; margin-top:6px; border:2px solid var(--ink); border-radius:4px;}
.kv-body .checks b{display:block;}
.kv-body .checks span{color:var(--ink-soft); font-size:13.5px; line-height:1.9; display:block;}

/* ── 処方（番号ステップ） ── */
.kv-body .steps{list-style:none; margin-top:26px; counter-reset:step;}
.kv-body .steps li{counter-increment:step; padding:14px 0 14px 44px; position:relative;}
.kv-body .steps li::before{content:counter(step); position:absolute; left:0; top:16px; width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--paper); font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center;}
.kv-body .caution{margin-top:30px; padding:18px 20px; border-left:4px solid var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--paper)); font-size:13.5px; line-height:1.95;}
.kv-body .caution b{display:block; margin-bottom:4px;}

/* ── CTA ── */
.kv-body .cta{text-align:center;}
.kv-body .cta h2{max-width:none;}
.kv-body .cta p{margin:0 auto; max-width:32em;}
.kv-body .btn{display:inline-block; margin-top:28px; background:var(--ink); color:var(--paper); font-weight:800; font-size:16px; text-decoration:none; padding:17px 38px; border-radius:99px;}
.kv-body .btn:active{transform:scale(.98);}
.kv-body .cta .hint{font-size:12.5px; color:var(--ink-soft); margin-top:14px;}
.kv-body .ent-note{font-size:11.5px; color:var(--ink-soft); margin-top:34px;}

/* ── 関連 ── */
.kv-body .related{padding-bottom:clamp(48px,9vw,80px);}
.kv-body .related h2{font-size:15px; margin-bottom:6px;}
.kv-body .related a{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 2px; border-bottom:1px solid var(--line); text-decoration:none; font-weight:700; font-size:14.5px;}
.kv-body .related a::after{content:"→"; color:var(--ink-soft);}