/* ============================================================
   SAIL 大成校LP v12「家庭での伴走」（/shinchu2）追加スタイル
   2026-10-14。lp-v10.css（白地・ゴシック・デジタル庁DSの数値）の上に重ねる。
   方針: 第一画面は1画面で完結（写真→宛名→一言→LINEボタン）／チャット画面を文字より先に見せる／
         声は原文のまま長く載せ、続きは折りたたむ／セクションごとに形を変える
   根拠: 2_集客/冬期LP一式/LP新訴求軸_家庭伴走_構成案_20261014.md
   ============================================================ */

/* ---------- 第一画面（1画面完結） ---------- */
.fv.v12{padding-block:var(--sp-2) var(--sp-4)}
.fv.v12 .fv-photo img{aspect-ratio:5/4;object-position:50% 38%}
.fv.v12 .fv-text{margin-top:var(--sp-2)}
.fv.v12 .fv-photo figcaption{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.fv.v12 .kicker{margin-bottom:6px;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.fv.v12 .kicker span{font-weight:400;color:var(--ink-3)}
.fv.v12 h1{margin-top:4px;font-size:27px;line-height:1.4}
.fv.v12 .sub{margin-top:10px;font-size:var(--fs-16);line-height:1.6}
.fv.v12 .sub b{color:var(--teal-dark)}
.fv.v12 .cta{margin-top:var(--sp-2)}
.fv.v12 .cue{margin-top:12px}
@media (min-width:600px){ .fv.v12 .fv-photo img{aspect-ratio:16/9} .fv.v12 h1{font-size:var(--fs-32)} }
@media (min-width:900px){
  .fv.v12 .shell{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:center}
  .fv.v12 .fv-photo img{aspect-ratio:4/5;object-position:50% 40%}
  .fv.v12 .fv-text{margin-top:0}
  .fv.v12 h1{font-size:var(--fs-36)}
}

/* ---------- チャット画面（横にめくる） ---------- */
.chat-scroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--pad) 12px;margin-inline:calc(-1 * var(--pad));-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.chat-scroll > figure{flex:0 0 min(72vw,280px);scroll-snap-align:start;margin:0}
.chat-scroll img{width:100%;height:auto;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);box-shadow:0 2px 10px rgba(26,26,28,.08)}
.chat-scroll figcaption{margin-top:10px;font-size:var(--fs-14);line-height:1.6;color:var(--ink)}
.chat-scroll figcaption b{display:block;color:var(--teal-dark);font-size:13px;margin-bottom:2px}
.chat-hint{display:flex;align-items:center;gap:8px;font-size:var(--fs-14);color:var(--ink-3);margin-top:4px}
.chat-hint svg{flex:none}
@media (min-width:768px){
  .chat-scroll{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);overflow:visible;padding:0;margin-inline:0}
  .chat-scroll > figure{flex:none}
  .chat-hint{display:none}
}

/* ---------- 伴走の5項目 ---------- */
.support{display:grid;max-width:var(--col);border-top:2px solid var(--ink)}
.support li{display:grid;grid-template-columns:44px 1fr;gap:var(--sp-2);padding:var(--sp-2) 0;border-bottom:1px solid var(--line);align-items:start}
.support .n{font-size:var(--fs-28);font-weight:700;color:var(--teal);line-height:1.1;font-variant-numeric:tabular-nums}
.support h3{font-size:var(--fs-16);line-height:1.5}
.support p{margin-top:4px;color:var(--ink-2);font-size:var(--fs-14);line-height:1.7}
.support-wrap{display:grid;gap:var(--sp-3)}
@media (min-width:900px){ .support-wrap{grid-template-columns:1fr 380px;gap:var(--sp-6);align-items:start} .support{max-width:none} }
.callout{max-width:var(--col);border-left:4px solid var(--teal);padding:4px 0 4px 14px;color:var(--ink);line-height:1.75}
.callout b{color:var(--teal-dark)}

/* ---------- 保護者の声（原文・長文） ---------- */
.vcards{display:grid;gap:var(--sp-3)}
@media (min-width:768px){ .vcards{grid-template-columns:1fr 1fr;align-items:start} }
.vcard{background:#fff;border:1px solid var(--line);padding:var(--sp-3);position:relative}
.vcard .ttl{font-weight:700;font-size:var(--fs-18);line-height:1.5}
.vcard .ttl::before{content:"“";color:var(--teal);opacity:.6;margin-right:4px}
.vcard .src{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:var(--fs-14);color:var(--ink-3);margin-top:6px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.vcard .src b{color:var(--ink-2);font-weight:700}
.vcard .body{margin-top:12px;line-height:1.85}
.vcard .body p + p{margin-top:10px}
.vcard details{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.vcard summary{cursor:pointer;font-weight:700;color:var(--teal-dark);font-size:var(--fs-14);list-style:none;display:inline-flex;align-items:center;gap:8px}
.vcard summary::-webkit-details-marker{display:none}
.vcard summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.vcard details[open] summary::before{transform:rotate(-135deg);margin-top:4px}
.vcard details .more{margin-top:10px;line-height:1.85;color:var(--ink)}
.vcard details .more p + p{margin-top:10px}
.vcard details .more .lab{display:block;font-size:13px;font-weight:700;color:var(--ink-3);margin-bottom:2px}
.vcard.g{border-color:var(--teal)}
.vcard.g .stars{color:#F4B400;letter-spacing:2px;font-size:var(--fs-16)}
.ghead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;max-width:var(--col)}
.ghead .score{font-size:var(--fs-32);font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.ghead .stars{color:#F4B400;letter-spacing:2px;font-size:var(--fs-20)}
.ghead a{font-size:var(--fs-14)}

/* ---------- 数字1枚 ---------- */
.stat{max-width:var(--col);display:grid;gap:0}
.stat .big{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;padding:16px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.stat .big h3{font-size:var(--fs-16);line-height:1.5}
.stat .big h3 small{display:block;font-weight:400;color:var(--ink-2)}
.stat .big .num{font-size:44px;font-weight:700;color:var(--teal-dark);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .big .num small{font-size:var(--fs-14);color:var(--ink-2);font-weight:700;margin-left:4px}
.stat .row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--fs-14);color:var(--ink-2);align-items:center}
.stat .row b{color:var(--ink);font-size:var(--fs-20);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- 人 ---------- */
.person{display:grid;gap:var(--sp-3);max-width:var(--col)}
.person .portrait{margin:0;max-width:300px}
.person .portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border:1px solid var(--line)}
.person .portrait figcaption{font-size:var(--fs-14);color:var(--ink-2);line-height:1.6;margin-top:8px}
.person .words p{line-height:1.9}
.person .words p + p{margin-top:12px}
.person .words .sign{margin-top:14px;font-size:var(--fs-14);color:var(--ink-2)}
@media (min-width:768px){ .person{grid-template-columns:260px 1fr;gap:var(--sp-5);align-items:start;max-width:none} }

/* 体験の中身 */
.trial-box{max-width:var(--col);border:1px solid var(--line);padding:var(--sp-3);background:#fff;display:grid;gap:10px}
.trial-box h3{font-size:var(--fs-18)}
.trial-box ul{display:grid;gap:6px}
.trial-box li{position:relative;padding-left:22px;line-height:1.7}
.trial-box li::before{content:"○";position:absolute;left:0;color:var(--teal);font-weight:700}

/* 教室の写真2枚 */
.pair{display:grid;gap:var(--sp-2)}
@media (min-width:600px){ .pair{grid-template-columns:1.2fr .8fr;gap:var(--sp-3)} }

/* 中間CTA */
.cta.mid{margin-top:var(--sp-3)}