/* 新LP（D案）スマホ用＋モーション低減。**必ずセクションCSSより後に読むこと**（pages/selfcare.php）。 */
/* ==========================================================
   SP
   ========================================================== */
@media (max-width:767px){
  body{font-size:16px}
  .scene{padding:88px 0}
  .fig{max-width:none;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
  .fig img{aspect-ratio:4/5}

  /* 短い文で末尾1〜2文字が孤立するのを防ぐ（改行位置の調整のみ） */
  .h2,.s3-echo,.bub,.m-cap,.s1-lead,.plans-lead,.voice,.chat-label,.role,
  .s9-def .key,.s9-def .body,.s10-lead,.s10-lead2,.s10-end,.s11-key,.s11-sub,.s11-body,.s11-end,
  .s12-body,.s12-end,.s13-place,.s13-end,.s14-link p,.s15-after p,.s17 .note,
  .common li,.plan-list li,.card-s,.card-t,.s13-blk,.s15-lead,.ans{text-wrap:balance}

  .s1-h{margin-bottom:36px}
  .s1-lead{margin-top:36px;text-align:left}

  .s2 .sticky-inner,.s4 .sticky-inner{align-items:flex-end}
  .s2 .sticky-content,.s4 .sticky-content{text-align:center;padding-bottom:11vh}
  .s2 .col,.s4 .col{margin-left:auto;margin-right:auto}
  .s2-h{margin-bottom:26px}

  .s3-echo{margin-top:9vh}

  .clues{margin-bottom:36px}
  .clue{padding:4px 0}
  .s5-lead{margin-bottom:32px}

  .steps{flex-direction:column;align-items:flex-start;border-left:1px solid var(--color-line);padding-left:26px;margin-left:6px;text-align:left}
  .step{border-left:0;padding:13px 0}
  .s6 .sticky-content.center{text-align:left}
  .s6-lead{margin-bottom:40px}

  /* 場面8：SPの .fig 全幅ルールを詳細度で打ち消す（比率も明示） */
  .s8 .fig.portrait{max-width:300px;width:300px;margin:0 auto 36px}
  .s8 .fig.portrait img{width:300px;height:300px;aspect-ratio:1/1;object-fit:cover}
  .s8 .h2{text-align:left}
  .s8-body{text-align:left}

  .s9{padding:96px 0}
  .compare{margin-bottom:48px}
  .compare-row > div{padding:16px 10px}
  .compare-row .was,.compare-row .now{font-size:13px;letter-spacing:.01em}
  .compare-head > div{font-size:11px;letter-spacing:.08em}

  .s10{padding:96px 0}
  .cards{grid-template-columns:1fr;gap:12px}
  .card{padding:20px 18px 20px 17px;gap:8px}
  .card-t{font-size:12px}
  .card-s{font-size:15px}
  .s10-lead{text-align:left;margin-bottom:10px}
  .s10-lead2{text-align:left;margin-bottom:22px}
  .lesson-scale{max-width:none;height:24px;margin-bottom:36px}
  .lesson-scale i{height:7px}
  .lesson-scale i.is-open{height:21px}

  .s11{padding:96px 0}
  .figures{grid-template-columns:1fr 1fr;gap:1px;background:var(--color-line);border:1px solid var(--color-line)}
  .figure-i{border-left:0;background:var(--color-white);padding:16px 8px}
  .s11-sub{margin-bottom:44px}

  /* 場面12：SPで1画面に収める（役割カードを3列化し、行間を圧縮） */
  .s12 .sticky-content{padding-top:0}
  .s12 .h2{margin-bottom:10px}
  .roles{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:11px}
  .role{padding:8px 6px;font-size:11px;line-height:1.65;letter-spacing:.01em}
  .s12-body{font-size:13px;line-height:1.8;margin-bottom:10px}
  .chat-label{margin-bottom:6px}
  .chat{gap:6px}
  .turn{max-width:96%}
  .speaker{font-size:11px;margin-bottom:3px}
  .bub{font-size:12.5px;padding:6px 11px;line-height:1.68}
  .typing{padding:9px 11px}
  .s12-end{margin-top:9px;font-size:16px;line-height:1.85}

  .split{grid-template-columns:1fr;min-height:0}
  .split-media{height:60vh;height:60svh}
  .split-body{padding:72px var(--pad)}

  .m-item img{aspect-ratio:1/1}
  .m-3 img{aspect-ratio:4/5}
  .m-cap{padding:0 var(--pad);margin-bottom:52px}
  .s14-end{margin-top:72px;text-align:left}
  .s14-link{text-align:left}

  /* <br>を含むブロックは text-wrap:balance が効かないため、字幅で1行に収める */
  .s13-blk{font-size:14.5px;letter-spacing:0}
  .s15-lead{font-size:15px;letter-spacing:.008em}
  .s15{padding:96px 0}
  .s15-lead{text-align:left;margin-bottom:48px}
  .plans{grid-template-columns:1fr;gap:36px}
  /* 場面15・案A のスマホ版（2026-09-15）。1列になるので「真ん中」は位置では示せない。
     白い台だけ残し、画面の端からはみ出さない幅に抑える。 */
  .plan--std{margin:-20px -16px;padding:50px 16px 20px}
  /* 2026-09-15 中島さんのご指示。PC 版（css/pricing/e.css の .common）と同じ2点をスマホにも。
     ① リード文との間 … base の p:last-child{margin-bottom:0} に消されるので帯側で持つ
     ② 左右 … 画面が狭いので 16px（PC は 32px）。wrap の 20px と合わせて端から 36px */
  .common{padding:26px 16px;margin:48px auto 56px}

  .s16{padding:180px 0 96px}
}
/* ==========================================================
   モーション低減
   ========================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .rv-a,.js .rv-photo,.js .rv-fade,.js .rv-rise,.js .rv-cut{
    opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;transition:none!important
  }
  .progress{transition:none}
  .m-item img{transform:none!important}

  /* sticky を解除し、全場面の情報を素直に縦へ並べる */
  .scene-tall{height:auto!important;min-height:0}
  .sticky-inner{position:relative;height:auto;min-height:100vh;min-height:100svh}
  .sticky-content{transform:none!important;color:var(--color-text)!important}
  .s2 .sticky-content,.s4 .sticky-content,.s12 .sticky-content{color:#fff!important}

  .swap{display:block}
  .swap-item{opacity:1!important;margin-bottom:1.6em}
  .swap-item:last-child{margin-bottom:0}
  .q-stack{display:block}
  .q{opacity:1!important;transform:none!important;margin-bottom:1.2em}
  .s3-echo,.s2-h,.s5-lead,.s5-end,.s6-lead{opacity:1!important}
  .clue{opacity:1!important;transform:none!important}
  .step-t{opacity:1!important;transform:none!important;filter:none!important}
  .s2 .bg,.s4 .bg,.s12 .bg,.s17 .bg{transform:none!important;opacity:1!important}
  .s2 .veil,.s4 .veil,.s12 .veil,.s17 .veil{opacity:1!important}
  /* 場面5：夜の写真は使わず、明るい地のまま全情報を表示 */
  .s5 .bg,.s5 .veil{display:none!important}

  /* 場面7：濃紺は最初から全面。1行は常時表示 */
  .s7-cover{clip-path:none!important}
  .s7-line{opacity:1!important}

  /* 場面12：会話は全表示。入力中は出さない */
  .s12 .h2,.chat-label,.turn,.roles,.s12-body,.s12-end{opacity:1!important}
  .bubstack{display:block}
  .typing{display:none!important}
  .bubstack .bub:not(.typing){opacity:1!important}

  /* 場面17：夜もCTAも常時表示 */
  .s17 .bg,.s17 .veil,.s17-content .h2,.s17-content .body,
  .s17-content .btn,.s17-content .note{opacity:1!important;transform:none!important}
  .cta-fixed{transition:none}
}