/* ==========================================================
   COCOTORE｜トップページ（体験コースのLP）
   layout.css（ヘッダー・フッター・色や文字の大きさの変数）の後に読み込む。トップページだけで使う
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
/* 文字サイズの基準は16px（100%）。本文 --fs-body／補足・注記 --fs-note／見出し --fs-h2／小見出し --fs-h3／英字ラベル --fs-label（値は :root で管理、スマホは値だけ切り替え） */
/* 文字サイズの基準。下層（common.css）と同じ値にして、トップと下層で
   ヘッダー・フッターの大きさが変わらないようにしています */
html{font-size:17px;scroll-behavior:smooth}
@media screen and (max-width:900px){html{font-size:1rem}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.8;letter-spacing:.02em;-webkit-font-smoothing:antialiased;line-break:strict;word-break:normal;text-wrap:pretty;font-synthesis:none}
/* 文節で改行するのは見出しだけ。本文は行の端まで詰めて流す（文節改行だと1行目が短く切れて「改行が入ったように」見えるため）。最後の行が1〜2文字だけになるのは text-wrap:pretty で防ぐ */
h1,h2,h3,.talk-q,.talk-key,.consult-end,.fv-sub{word-break:auto-phrase}
.nw{white-space:nowrap}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
.container{width:100%;max-width:760px;margin:0 auto;padding:0 1.25rem}
.container-wide{width:100%;max-width:1040px;margin:0 auto;padding:0 1.25rem}
.section{padding:5.5rem 0}
.sec-title{text-align:center;font-size:var(--fs-h2);line-height:1.5;font-weight:400;letter-spacing:.06em;margin-bottom:2.75rem}
/* タブレット幅（768〜1100px）：写真の左右が切れて場所が足りないため、左列の4つは出さずにテキストを広げる */
@media (min-width:768px) and (max-width:1100px){
  .bubble.is-left{display:none}
  .fv .fv-copy{max-width:min(32.5rem,40vw)}
  .fv .fv-cta{max-width:25rem}
}
/* ===== S1 FV ===== */
.fv{position:relative;background:var(--fv-bg);overflow:hidden}
/* 背景＝テーマの写真（PC hero-pc.webp 2:1／スマホ hero-sp.webp 6:7）。写真とモヤモヤの言葉を同じ箱（.fv-photo）に入れ、言葉の位置は写真に対する%で決める → 画面幅が変わっても女性とずれない */
.fv-stage{position:absolute;inset:0;z-index:0;overflow:hidden;container-type:size}
.fv-photo{--pw:max(100cqw,200cqh);position:absolute;width:var(--pw);aspect-ratio:2/1;left:calc((100cqw - var(--pw)) * .72);top:calc(100cqh - var(--pw) / 2)}
.fv-pic{position:absolute;inset:0}
.fv-pic img{width:100%;height:100%;max-width:none;object-fit:cover}
.fv-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.46) 30%,rgba(255,255,255,0) 50%)}
.fv-inner{max-width:none;min-height:clamp(560px,min(50vw,max(calc(100svh - 82px),45vw)),960px);margin:0;padding:2.5rem var(--gutter) 5.5rem;display:flex;flex-direction:column;justify-content:center}
.fv-copy,.fv-cta{position:relative;z-index:2}
.fv-copy{max-width:min(32.5rem,calc(41vw - 1.5rem))}
.fv-cta{max-width:min(25rem,calc(36.4vw - 1.5rem));width:100%}
.fv-badges{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:min(31rem,calc(38vw - 1.5rem));margin-top:2.25rem}
.fv-badges img{display:block;width:100%;height:auto}
.fv-cta{margin-top:3rem}
.fv h1{font-size:clamp(2rem,4.2vw,3.375rem);line-height:1.45;font-weight:400;letter-spacing:.06em}
.fv-catch img{display:block;width:100%;max-width:32.5rem;height:auto}
.fv-sub{margin-top:1.375rem;font-size:clamp(1rem,1.75vw,1.3125rem);font-weight:400;color:var(--ink);letter-spacing:.05em;line-height:1.8}
/* モヤモヤの言葉：写真の上に浮かべる（女性の視線の先とまわり。顔にはかけない）。--x・--y は写真に対する% */
.moya{position:absolute;inset:0;z-index:2}
.bubble{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;max-width:none;animation:float 8s ease-in-out infinite}
.bb01{--x:45.60%;--y:28.40%;--w:11.00%;animation-duration:8s;animation-delay:-1s}
.bb02{--x:53.50%;--y:11.50%;--w:15.30%;animation-duration:9s;animation-delay:-3s}
.bb03{--x:70.80%;--y:15.10%;--w:12.95%;animation-duration:7.5s;animation-delay:-5s}
.bb04{--x:45.40%;--y:45.00%;--w:9.50%;animation-duration:8.5s;animation-delay:-2s}
.bb05{--x:59.45%;--y:32.00%;--w:10.25%;animation-duration:7s;animation-delay:-4s}
.bb06{--x:83.40%;--y:41.50%;--w:11.85%;animation-duration:9.5s;animation-delay:-6s}
.bb07{--x:84.80%;--y:24.90%;--w:9.25%;animation-duration:8s;animation-delay:-2.5s}
.bb08{--x:42.45%;--y:60.00%;--w:14.75%;animation-duration:7.5s;animation-delay:-0.5s}
.bb09{--x:82.45%;--y:58.90%;--w:14.20%;animation-duration:9s;animation-delay:-3.5s}
.bb10{--x:43.45%;--y:76.20%;--w:12.05%;animation-duration:8.5s;animation-delay:-1.5s}
.bb11{--x:84.85%;--y:75.20%;--w:10.90%;animation-duration:7s;animation-delay:-4.5s}
.dot{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;border-radius:50%;background:var(--c);animation:float 6.5s ease-in-out infinite}
.dt1{--x:57.16%;--y:42.25%;--w:2.24%;--c:#addbf6;animation-delay:-0.0s}
.dt2{--x:55.44%;--y:51.43%;--w:1.19%;--c:#f9d2dd;animation-delay:-0.8s}
.dt3{--x:68.26%;--y:28.62%;--w:1.70%;--c:#c4e9d0;animation-delay:-1.6s}
.dt4{--x:81.53%;--y:35.84%;--w:1.57%;--c:#f6fbfc;animation-delay:-2.4s}
.dt5{--x:55.24%;--y:77.80%;--w:1.53%;--c:#dbdcff;animation-delay:-3.2s}
.dt6{--x:82.76%;--y:55.71%;--w:1.61%;--c:#b2ddf7;animation-delay:-4.0s}
.dt7{--x:83.66%;--y:77.03%;--w:1.13%;--c:#f9d2dd;animation-delay:-4.8s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (prefers-reduced-motion:reduce){
  .bubble,.dot,.tb{animation:none}
}
.fv-wave{position:absolute;left:0;right:0;bottom:-0.0625rem;width:100%;height:90px;z-index:1}
@media (min-width:768px){
  .fv-wave--sp{display:none}
  .fv-wave--pc{height:64px}
}
.fv .cta-block{align-items:center}
/* ===== S2 仕事も、自分も、人間関係も。 ===== */
.worries{background:var(--bg)}
.worries .sec-title{font-size:var(--fs-h2);color:var(--ink-navy);letter-spacing:.08em;margin-bottom:1.75rem}
.worries-lead{text-align:center;color:var(--ink-sub);font-size:var(--fs-body);line-height:2.1;letter-spacing:.06em}
.worries-lead p + p{margin-top:1.375rem}
/* カード：3つを少しずつ下にずらす。背景はすべて白 */
.wcards{display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:1.75rem;align-items:start;margin-top:3.75rem}
.wcard{background:#fff;border:1px solid #E3ECF5;border-radius:24px;overflow:hidden;box-shadow:0 10px 30px rgba(40,70,100,.06)}
/* スクロールで画面に入ったら、左のカードから順に下からふわっと上がる（1回だけ）。スマホは1枚ずつ、画面に入ったときに上がる。JSが動かない環境・動きを減らす設定では最初から表示 */
.wcards.is-seq .wcard{opacity:0;transform:translateY(48px)}
.wcards.is-seq .wcard.is-in{opacity:1;transform:none;transition:opacity .7s ease-out,transform .9s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){
  .wcards.is-seq .wcard{opacity:1;transform:none}
}
.wcard:nth-child(2){margin-top:3rem}
.wcard:nth-child(3){margin-top:6rem}
.wcard-photo{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.wcard-body{padding:1.75rem 1.875rem 1.875rem}
/* 英字ラベル → 見出し（中央揃え）→ 区切り線 → 項目。字間のぶん左に余白を足して、見た目の中央をそろえる */
.wcard-head{text-align:center;padding-bottom:1.25rem;border-bottom:1px solid #DCE6F0}
.wcard-en{display:block;padding-left:.14em;font-family:"Nunito",var(--ui-font);font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;color:var(--label-blue)}
.wcard-title{margin-top:0.375rem;padding-left:.08em;font-size:var(--fs-h3);font-weight:400;color:var(--ink-navy);letter-spacing:.08em;line-height:1.5}
.wcard-list{margin-top:1.25rem;display:grid;gap:0.75rem}
.wcard-list li{position:relative;padding-left:1.25rem;font-size:var(--fs-body);line-height:1.85;color:var(--ink-sub);letter-spacing:.04em}
.wcard-list li::before{content:"";position:absolute;left:0.1875rem;top:.78em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
/* 線は文字のすぐ下に引き、文字の足元に少しだけ重ねる（線の太さの1/3ほど。下側の字画が埋もれない程度） */
.wcard-list em{font-style:normal;font-weight:400;color:inherit;text-decoration:underline;text-decoration-color:rgba(131,184,221,.55);text-decoration-thickness:.28em;text-underline-position:under;text-underline-offset:-.2em;text-decoration-skip-ink:none}
@media (max-width:1100px){
  .wcards{grid-template-columns:repeat(3,1fr);gap:1.125rem}
  .wcard-body{padding:1.25rem 1.25rem 1.5rem}
}
@media (max-width:1023px){
  .wcards{grid-template-columns:1fr;max-width:35rem;margin-left:auto;margin-right:auto;gap:1.5rem}
  .wcard:nth-child(2),.wcard:nth-child(3){margin-top:0}
  .wcard-body{padding:1.5rem 1.75rem 1.75rem}
}
/* ===== S2-2 カウンセリングに行くほどではない ===== */
.talk{background:var(--bg);padding:0.5rem 0 3.5rem}
/* 左上と右下だけ大きく丸めた、画面幅いっぱいの水色パネル */
.talk-panel{--rad:clamp(40px,5.6vw,96px);--pad-b:clamp(80px,8vw,136px);position:relative;overflow:hidden;background:var(--fv-bg);border-radius:var(--rad) 0 var(--rad) 0;padding:clamp(4.5rem,7.6vw,8rem) 0 var(--pad-b)}
/* 左上の円の線（飾り） */
.talk-circle{--r:clamp(170px,18vw,320px);position:absolute;left:calc(var(--r) * -1);top:calc(var(--r) * -.26);width:calc(var(--r) * 2);height:calc(var(--r) * 2);border:1px solid #CADDED;border-radius:50%;pointer-events:none}
.talk .container-xl{position:relative}
/* 見出し（1カラム・中央揃え）→ 2カラム［イラスト｜本文］→ 2カラム［本文｜イラスト］の互い違い */
.talk-head{text-align:center}
.talk-title{font-size:var(--fs-h2);font-weight:400;line-height:1.7;letter-spacing:.06em;color:var(--ink-navy)}
.talk-q{margin-top:1.375rem;font-size:var(--fs-h3);letter-spacing:.08em;color:var(--ink-navy)}
/* PC：イラストと画像は、となりの本文と同じ高さに合わせる（3:2のまま。列の幅が足りないときは幅に合わせて小さくし、上下中央に置く）。
   本文と絵は、まん中の線をはさんで寄せる（1段目は絵を右寄せ・本文を左寄せ、2段目は本文を右寄せ・絵を左寄せ） */
.talk-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.talk-row--a{margin-top:clamp(4.5rem,7vw,6.5rem)}
.talk-row--b{margin-top:clamp(5rem,8vw,7.5rem)}
.talk-media{align-self:stretch;position:relative;container-type:size;min-height:1px}
.talk-row--a .talk-text{justify-self:start}
.talk-row--b .talk-text{justify-self:end}
/* 1段目のイラストは本文の高さの約1.2倍（列の幅まで）。上下は本文から少しはみ出す */
.talk-stage{position:absolute;top:50%;right:0;translate:0 -50%;width:min(100cqw,180cqh);aspect-ratio:3/2}
/* 2段目の画像：本文の高さの約9割（列の幅まで）で、本文の上下中央に置く。まわりの透明な余白は切り落としてあるので、絵がそのまま本文のとなりに並ぶ */
.talk-illust2{position:absolute;top:50%;left:0;translate:0 -50%;height:min(90cqh,100cqw * 445 / 515);width:auto;max-width:none;aspect-ratio:515/445}
.talk-woman,.tb{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;max-width:none}
.talk-woman{--x:34.44%;--y:5.62%;--w:30.56%}
.tb{animation:float 8s ease-in-out infinite}
.tb01{--x:7.38%;--y:9.06%;--w:30.58%;animation-duration:8s;animation-delay:-1s}
.tb02{--x:60.92%;--y:1.33%;--w:30.57%;animation-duration:9s;animation-delay:-3s}
.tb03{--x:66.11%;--y:38.52%;--w:30.58%;animation-duration:7.5s;animation-delay:-5s}
.tb04{--x:0%;--y:53.26%;--w:34.38%;animation-duration:8.5s;animation-delay:-2s}
/* セリフの出し方：画面に入ったら 01→02→03→04 の順にテンポよく1つずつ表示（女性の方から「ポン」とふくらむ）→ 4つそろったら全部をふよふよ動かす。
   JSが動かない環境・動きを減らす設定では、最初から4つとも表示 */
.tb01{transform-origin:85% 85%}
.tb02{transform-origin:15% 85%}
.tb03{transform-origin:10% 40%}
.tb04{transform-origin:90% 30%}
.talk-stage.is-seq .tb{animation-name:none;opacity:0;transform:scale(.55)}
.talk-stage.is-seq .tb.is-in{opacity:1;transform:none;transition:opacity .25s ease-out,transform .5s cubic-bezier(.34,1.56,.64,1)}
.talk-stage.is-seq.is-done .tb{animation-name:float}
.talk-stage.is-seq.is-done .tb01{animation-delay:0s}
.talk-stage.is-seq.is-done .tb02{animation-delay:.3s}
.talk-stage.is-seq.is-done .tb03{animation-delay:.6s}
.talk-stage.is-seq.is-done .tb04{animation-delay:.9s}
@media (prefers-reduced-motion:reduce){
  .tb{animation:none}
}
.talk-text p{font-size:var(--fs-body);line-height:2.2;letter-spacing:.06em;color:var(--ink-sub)}
.talk-text p + p{margin-top:1.625rem}
/* 強調の2文（その「ほどではない」は、…／それも、…時間です。）は小見出しの大きさ・紺 */
.talk-text .talk-key{margin-top:2.5rem;font-size:var(--fs-h3);line-height:1.95;letter-spacing:.08em;color:var(--ink-navy)}
.talk-text .talk-key + p{margin-top:2.5rem}
/* 「ほどではない」（カギカッコごと）に白い背景。高さは文字の大きさに合わせる。カギカッコの外側の空きがあるので、左右の余白は少なめ */
.talk-hl{display:inline-block;line-height:1;padding:.14em .14em .14em .16em;background:#fff;border-radius:3px}
.talk-hl .kk-o{margin-left:-.48em}
.talk-hl .kk-c{margin-right:-.56em}
/* 1023px以下：1列。見出し → イラスト → 本文 → 画像 → 本文（画像を先に）。本文のまとまりは中央に置き、行は左揃え */
@media (max-width:1023px){
  .talk-row{grid-template-columns:minmax(0,1fr);row-gap:2rem}
  .talk-row--a{margin-top:2.25rem}
  .talk-row--b{margin-top:3.5rem}
  .talk-media{container-type:normal;align-self:auto}
  .talk-row--b .talk-media{order:-1}
  .talk-row .talk-text{justify-self:center}
  .talk-stage{position:relative;top:auto;right:auto;translate:none;width:100%;max-width:35rem;margin:0 auto}
  .talk-illust2{position:static;translate:none;width:min(100%,432px);height:auto;margin:0 auto}
}
/* ===== S2-3 ABOUT COCOTORE ===== */
.about{background:var(--bg)}
/* PC：左に写真（見出しより少し下げる）、右に見出し → 本文。スマホ：見出し → 写真 → 本文 */
.about-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"photo head" "photo body";column-gap:clamp(3rem,6vw,6rem);align-items:start}
.about-head{grid-area:head}
/* 写真は2:3のまま（切らない）で、右のテキストの高さ（見出しの上 〜 最後の行）に収める。
   PCの多くの幅では上下ともテキストにぴったりそろう。テキストの方が高い幅（1024〜1200px前後）では、下の辺を最後の行にそろえる */
.about-photo{grid-area:photo;margin:0;align-self:stretch}
.about-body{grid-area:body;margin-top:clamp(2.25rem,4vw,3.5rem)}
.about-title{font-size:var(--fs-h2);font-weight:400;line-height:1.75;letter-spacing:.06em;color:var(--ink-navy)}
/* 見出しの線（S2-3「人生を良くするための」・S3「モヤモヤ度」）。S2の線と同じ考え方で、文字の足元に少しだけ重ねる。色は --mk で切り替える（標準は #83B8DD の55%） */
.mk{text-decoration:underline;text-decoration-color:var(--mk,rgba(131,184,221,.55));text-decoration-thickness:.24em;text-underline-position:under;text-underline-offset:-.2em;text-decoration-skip-ink:none}
.about-body p{font-size:var(--fs-body);line-height:2.1;letter-spacing:.06em;color:var(--ink-sub)}
.about-body p + p,.about-body p + .about-q,.about-q + p{margin-top:1.75rem}
.about-body .about-lead{color:var(--ink-navy)}
/* 3つの問い：1行ずつ水色の帯＋白文字。帯の高さは「行の高さ＋上下の余白」で決める（書体が変わっても帯と帯の間が変わらないように） */
.about-q{margin:1.375rem 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:0.625rem}
.about-q li{display:flex;font-size:var(--fs-h3);letter-spacing:.08em}
.about-q li > span{display:block;line-height:1.2;padding:.08em .5em .08em .58em;background:var(--band-blue);color:#fff;border-radius:3px}
.br-sp{display:none}
/* 画面に入ったら、上から1行ずつ左→右に現れる（1回だけ）。JSが動かない環境・動きを減らす設定では最初から表示 */
.about-q.is-seq li{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}
.about-q.is-seq li.is-in{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);transition:clip-path .55s cubic-bezier(.22,.61,.36,1),-webkit-clip-path .55s cubic-bezier(.22,.61,.36,1)}
/* 最後の段落（答え）は、3つの問いが出そろってから、ふわっと表示 */
.about-answer.is-wait{opacity:0;transform:translateY(6px)}
.about-answer.is-wait.is-in{opacity:1;transform:none;transition:opacity .6s ease-out,transform .6s ease-out}
@media (prefers-reduced-motion:reduce){
  .about-q.is-seq li{-webkit-clip-path:none;clip-path:none}
  .about-answer.is-wait{opacity:1;transform:none}
}
/* 写真1枚：右上のカーブは写真そのものに入っている（透過）。縦書きの言葉を左上に重ねる（人物の髪にかからないよう、少し左にはみ出させる） */
.about-photos{position:relative;height:100%;container-type:size}
.about-main{position:absolute;left:3cqw;bottom:0;display:block;width:min(97cqw,100cqh * 2 / 3);height:auto;aspect-ratio:2/3;object-fit:cover;object-position:100% 0%}
/* 縦書きの言葉は、写真の上の辺から測って置く（写真の高さ＝min(145.5cqw,100cqh)） */
.about-tags{position:absolute;left:-0.5rem;top:calc(100cqh - min(145.5cqw,100cqh) + clamp(2rem,4.5vw,4rem));display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(0.5rem,1vw,0.875rem)}
.about-tag{writing-mode:vertical-rl;font-size:var(--fs-h3);line-height:1;letter-spacing:.14em;color:var(--ink-navy);background:#fff;padding:0.875rem 0.6875rem 0.75rem}
/* 2つ目（左）の「見えてくる。」は、1つ目より1文字分（1.14em）下げて段差をつける（v111・ともちん指定。S3-2の言葉と同じ） */
.about-tag:nth-child(2){margin-top:1.14em}
@media (max-width:1023px){
  .about-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "photo" "body"}
  .about-photo{margin-top:2.5rem;max-width:35rem;align-self:start}
  .about-photos{height:auto;container-type:normal}
  .about-main{position:static;width:97%;margin-left:3%;aspect-ratio:4/5}
  .about-tags{top:7%}
}
/* 画面幅いっぱいのブランドブルーの帯。右上と左下だけ大きく丸める（S2-2の水色パネルと左右反対）。帯の上の文字はすべて紺（#83B8DD の上で読める濃さ。コントラスト約5.4） */
.check{background:var(--bg)}
.check-panel{--rad:clamp(40px,5.6vw,96px);overflow:hidden;background:var(--brand);border-radius:0 var(--rad) 0 var(--rad);padding:clamp(4.5rem,7.6vw,7.5rem) 0 clamp(4.5rem,7.2vw,7rem)}
.check-head{text-align:center}
.check-pill{display:inline-block;padding:.32em 1.3em .32em 1.42em;border-radius:999px;background:#fff;color:var(--brand-ink);font-size:var(--fs-body);line-height:1.6;letter-spacing:.12em}
.check-title{margin-top:1.25rem;font-size:var(--fs-h2);font-weight:400;line-height:1.6;letter-spacing:.06em;color:var(--ink-navy)}
/* 「モヤモヤ度」に白い線（S2-3の見出しの線と同じ形で、色だけ白。文字は紺のまま） */
.check-title .mk{--mk:rgba(255,255,255,.9)}
/* 問いかけ＋リード（左）と、計測結果シート（右）の2カラム（v87）。文は左揃え。1023px以下は1列・中央揃え */
.check-intro{display:grid;grid-template-columns:minmax(0,540px) 300px;justify-content:center;column-gap:clamp(1.75rem,3vw,2.5rem);align-items:center;margin-top:clamp(2.5rem,4.4vw,3.5rem)}
.check-intro-text{text-align:left}
.check-q{font-size:var(--fs-h3);line-height:1.8;letter-spacing:.08em;color:var(--ink-navy)}
.check-lead{margin-top:1.5rem}
.check-lead p{font-size:var(--fs-body);line-height:2.1;letter-spacing:.06em;color:var(--ink-navy)}
.check-lead p + p{margin-top:1.125rem}
/* カード3枚（v73でカードの上の破線の波と星を削除） */
.check-flow{--gap:clamp(20px,2.4vw,32px);max-width:1040px;margin:clamp(3rem,5vw,4rem) auto 0}
.check-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:start}
.ccard{position:relative;background:#fff;border-radius:24px;padding:2.5rem 1.5rem 2.25rem;text-align:center;box-shadow:0 12px 32px rgba(30,70,110,.10)}
.ccard:nth-child(2){margin-top:2rem}
.ccard-no{position:absolute;left:1.5rem;top:1.125rem;font-family:"Nunito",var(--ui-font);font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:.04em;color:var(--label-blue)}
/* 画像（ともちん作・300×300の丸い絵。PC 150px／スマホ 120px＝PCで2倍）。丸の中は白なので、まわりにブランドブルーのフチ（2px）をつけて、白いカードの上でも丸の形が見えるようにする */
.ccard-img{display:block;width:150px;height:150px;margin:0 auto;border-radius:50%;box-shadow:0 0 0 2px var(--brand)}
/* 見出しは中央揃え（字間のぶん左に余白を足して、見た目の中央をそろえる）。英字ラベルはv74で削除 */
.ccard-title{margin-top:1.25rem;padding-left:.08em;font-size:var(--fs-h3);font-weight:400;line-height:1.5;letter-spacing:.08em;color:var(--ink-navy)}
.ccard-text{margin-top:0.875rem;font-size:var(--fs-body);line-height:1.95;letter-spacing:.04em;color:var(--ink-sub)}
/* v88：後ろに白い丸（カードのイラストの丸と同じ形の言葉）と2枚目の紙（v89で「プレゼント」の丸いシールは削除） */
.check-report{position:relative;margin:0;text-align:center}
.check-report-paper{position:relative;z-index:1;width:250px;margin:0 auto;transform:rotate(-3deg)}
.check-report-paper::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border-radius:2px;transform:rotate(6deg) translate(12px,6px);box-shadow:0 8px 20px rgba(30,70,110,.14)}
.check-report-paper::after{content:"";position:absolute;left:50%;top:50%;z-index:-2;width:360px;height:360px;margin:-11.25rem 0 0 -11.25rem;border-radius:50%;background:rgba(255,255,255,.3);pointer-events:none}
.check-report-paper img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:0 14px 30px rgba(30,70,110,.22),0 2px 6px rgba(30,70,110,.12)}
.check-report-tag{position:absolute;top:0.625rem;right:-0.75rem;padding:.2em .9em .2em 1em;border-radius:999px;background:var(--ink-navy);color:#fff;font-size:var(--fs-note);line-height:1.6;letter-spacing:.1em}
.check-report-cap{position:relative;z-index:1;margin-top:1.75rem;font-size:var(--fs-body);line-height:1.8;letter-spacing:.06em;color:var(--ink-navy)}
/* 予約ボタン → 注意書き（v81でボタンの下へ。v82で夫婦・親子のご相談の一文を追加）。中央揃え・補足の大きさ・紺 */
.check .cta-block.center{margin-top:3rem}
.check-notes{margin-top:1rem;text-align:center;font-size:var(--fs-note);line-height:1.8;letter-spacing:.04em;color:var(--ink-navy)}
.check-notes p + p{margin-top:0.25rem}
.br-pc{display:inline}
/* 1023px以下：カードは縦一列（最大560px・中央）。ずらしはなし */
@media (max-width:1023px){
  .check-intro{grid-template-columns:minmax(0,1fr);row-gap:2.5rem}
  .check-intro-text{text-align:center}
  .check-flow{max-width:35rem}
  .check-cards{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .ccard:nth-child(2){margin-top:0}
}
/* ===== S3-2 どんなことを話しても大丈夫です。 ===== */
.consult{background:var(--bg)}
/* PC：左に見出し → 本文、右に画像（S2-3と左右反対）。v108：画像をS2-3の写真と同じ大きさに（列の97%・最大513px・2:3＝1440pxで約513×769px・ともちん指定）。
   文は画像の上下の真ん中（上と下の空き行〈1fr〉で受ける）。画像の位置もS2-3と左右対称（外側に列の3%をあけ、本文の側に寄せる） */
.consult-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:". media" "head media" "body media" ". media";grid-template-rows:1fr auto auto 1fr;column-gap:clamp(3rem,6vw,6rem);align-items:start}
.consult-head{grid-area:head}
.consult-title{font-size:var(--fs-h2);font-weight:400;line-height:1.75;letter-spacing:.06em;color:var(--ink-navy)}
.consult-body{grid-area:body;margin-top:clamp(1.75rem,3vw,2.5rem)}
.consult-body p{font-size:var(--fs-body);line-height:2.1;letter-spacing:.06em;color:var(--ink-sub);text-spacing-trim:trim-start}
.consult-body p + p{margin-top:1.5rem}
/* 「 」の声は紺（行頭のカギカッコは半分詰めて、ほかの行と頭をそろえる） */
.consult-voice{color:var(--ink-navy)}
/* 結びの一文は、S2-2の「それも、自分の人生を…時間です。」と同じ大きさ（小見出し・紺）（v91） */
.consult-body .consult-end{margin-top:2.5rem;font-size:var(--fs-h3);line-height:1.95;letter-spacing:.08em;color:var(--ink-navy)}
.consult-media{grid-area:media;margin:0;container-type:inline-size;position:relative}
/* 縦書きの言葉（v109・案A）：S2-3の「話してみる。／見えてくる。」と左右対称に、写真の右上（外側）に置く。右から「思いつくままに。」「言葉は、あとから。」。
   右の女性の髪にかからないよう、S2-3より大きめに外へはみ出させる（写真の右端から最大40px。画面の右端に8px以上残る範囲で） */
.consult-tags{--tag-out:min(40px,max(0px,(100vw - 1200px) / 2) + 3cqw + 12px);position:absolute;right:calc(3cqw - var(--tag-out));top:clamp(2rem,4.5vw,4rem);display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(0.5rem,1vw,0.875rem)}
.consult-tag{writing-mode:vertical-rl;font-size:var(--fs-h3);line-height:1;letter-spacing:.14em;color:var(--ink-navy);background:#fff;padding:0.875rem 0.6875rem 0.75rem}
/* 2つ目（左）の「言葉は、あとから。」は、1つ目より1文字分（1文字の送り＝1.14em）下げて段差をつける（v110・ともちん指定。v111でS2-3の言葉も同じ段差に） */
.consult-tag:nth-child(2){margin-top:1.14em}
/* 1024〜1239px：画面の右に余白が少なく、言葉を外へ出しきれないので、写真だけ12px本文の側へずらして髪とのすき間を取る（大きさは変えない） */
@media (min-width:1024px) and (max-width:1239px){
  .consult-main{position:relative;left:-0.75rem}
}
/* 画像：ともちん支給の consult-main.webp（1100×1650・2:3）。左上のカーブは写真そのものに入っている（透過。S2-3の写真〈右上のカーブ〉と対）ので、CSSでは丸めない。カーブが切れないよう、左上を基準に置く */
.consult-main{display:block;width:min(97cqw,513px);height:auto;margin:0 3cqw 0 auto;aspect-ratio:2/3;object-fit:cover;object-position:0% 0%}
@media (max-width:1023px){
  .consult-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "media" "body";grid-template-rows:none}
  .consult-media{container-type:normal;align-self:start;margin-top:2.25rem;max-width:35rem}
  .consult-main{width:100%;margin:0;aspect-ratio:3/4}
  .consult-tags{--tag-out:2.5rem;right:calc(-1 * var(--tag-out));top:7%}
}
/* v127：背景に水色のパネル、内容は白いカード1枚に（ともちん指定）。パネルはS4（体験の流れ）〜S5（予約）の水色パネルにつなげ、
   パネルの始まり（左上の丸み）をここへ移した（S4の上の丸みはなくなる）。カウンセラー紹介 → 体験の流れ → オンライン → 予約 が1枚の水色パネルになる。
   S3-2の本文からパネルの上まで PC 88px／スマホ 64px（S3-2の下の余白）。カードの下からS4の見出しまで PC 128px／スマホ 96px（パネルの中のすき間と同じ） */
.counselor{background:var(--bg)}
.cnsl-panel{--rad:clamp(40px,5.6vw,96px);background:var(--fv-bg);border-radius:var(--rad) 0 0 0;padding:clamp(4.5rem,7.6vw,7.5rem) 0 2.5rem}
.counselor .sec-title{color:var(--ink-navy)}
/* 白いカード：S5の予約カードと同じ形（最大1040px・角丸32px・やわらかい影） */
.cnsl-card{max-width:1040px;margin:0 auto;padding:clamp(3rem,5vw,4.5rem) clamp(1.75rem,5vw,4rem);background:#fff;border-radius:32px;box-shadow:0 16px 40px rgba(40,90,140,.08)}
/* メイン：左に写真、右に文（すぐ上のS3-2〈写真が右〉と左右を入れ替える）。2つをまとめて中央に置き、文は写真の上下の真ん中 */
.cnsl-main{display:grid;grid-template-columns:clamp(220px,26vw,320px) minmax(0,480px);justify-content:center;column-gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.cnsl-photo{margin:0}
/* 写真（3:4）：角丸24px（スマホ 20px）の長方形。v128でアーチ形（窓型）をやめた（ともちん指定） */
.cnsl-img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 0%;border-radius:24px}
/* 役職：S5の場所と同じピル。お名前：小見出しの大きさ・紺。英語名：S2のカードの英字ラベルと同じ（Nunito 600・12px） */
.cnsl-role{display:inline-block;padding:.32em 1.3em .32em 1.4em;border-radius:999px;background:var(--fv-bg);font-size:var(--fs-note);line-height:1.6;letter-spacing:.08em;color:var(--ink-navy)}
.cnsl-name{margin-top:0.875rem;font-size:var(--fs-h3);font-weight:400;line-height:1.5;letter-spacing:.12em;color:var(--ink-navy)}
.cnsl-en{display:block;margin-top:0.125rem;font-family:"Nunito",var(--ui-font);font-size:var(--fs-label);font-weight:600;line-height:1.6;letter-spacing:.14em;color:var(--label-blue)}
/* メッセージ：線で区切って本文の大きさ。「 」の声と結びの一文は紺（S3-2と同じ組み方。行頭のカギカッコは半分詰める） */
.cnsl-msg{margin-top:1.375rem;padding-top:1.375rem;border-top:1px solid #DCE6F0}
.cnsl-msg p{font-size:var(--fs-body);line-height:2.1;letter-spacing:.06em;color:var(--ink-sub);text-spacing-trim:trim-start}
.cnsl-msg p + p{margin-top:0.875rem}
.cnsl-msg .cnsl-voice,.cnsl-msg .cnsl-key{color:var(--ink-navy)}
.cnsl-msg .nw,.cnsl-text .nw,.cnsl-training .nw{display:inline-block;white-space:normal}
/* カードの中で、メインとチームの間に線 */
.cnsl-team{margin-top:clamp(3rem,5vw,4rem);padding-top:clamp(3rem,5vw,4rem);border-top:1px solid #E3ECF5;text-align:center}
.cnsl-quote{font-size:var(--fs-h3);line-height:1.8;letter-spacing:.08em;color:var(--ink-navy);text-spacing-trim:trim-start}
.cnsl-text{margin-top:1rem;font-size:var(--fs-body);line-height:2.1;letter-spacing:.06em;color:var(--ink-sub)}
.cnsl-members{display:flex;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.5rem}
/* v152（テーマ v1.3.2 と同じ）：1列に入りきらない人数になったら折り返す */
.cnsl-members{flex-wrap:wrap;row-gap:2rem}
.cnsl-member{width:136px}
.cnsl-mph{display:flex;align-items:center;justify-content:center;width:112px;aspect-ratio:1;margin:0 auto;border-radius:50%;overflow:hidden;background:linear-gradient(160deg,#DCE9F4 0%,#C2D6E7 100%);color:#5F7F9C;font-family:var(--ui-font);font-size:0.625rem;line-height:1.6}
.cnsl-mph img{display:block;width:100%;height:100%;object-fit:cover}
.cnsl-mrole{margin-top:0.875rem;font-size:var(--fs-note);line-height:1.6;letter-spacing:.06em;color:var(--label-blue)}
.cnsl-mname{margin-top:0.125rem;font-size:var(--fs-body);line-height:1.6;letter-spacing:.08em;color:var(--ink-navy)}
/* 研修の枠：薄い水色の面＋修了のしるし（白い丸に濃い青のチェック・ブランドブルーのリボン）。PCは1行 */
.cnsl-training{display:inline-flex;align-items:center;gap:0.875rem;margin-top:2.5rem;padding:0.875rem 1.75rem 0.875rem 1.25rem;border-radius:16px;background:var(--fv-bg);text-align:left}
.cnsl-badge{flex:none;width:36px;height:40px}
.cnsl-training p{font-size:var(--fs-body);line-height:1.8;letter-spacing:.06em;color:var(--ink-navy)}
/* v127：水色のパネルはS3-3（カウンセラー紹介）から始まるので、S4の左上の丸みはなし（S3-3の上へ移した） */
.flow{background:var(--fv-bg);padding-bottom:2.5rem}
/* 見出しの下の「1回 60分」（v114・ともちん指定。見出しの（60分）はここへ移した）：白いピルに時計のアイコン＋「1回｜60分」。数字は予約カードの「60分」と同じNunito 600 */
.flow .sec-title{margin-bottom:1.125rem}
.flow-time{display:flex;justify-content:center;margin:0 0 clamp(2.25rem,4vw,3rem)}
.flow-time-pill{display:inline-flex;align-items:center;gap:0.75rem;padding:0.5rem 1.625rem 0.5rem 1.375rem;border-radius:999px;background:#fff;box-shadow:0 4px 14px rgba(40,70,100,.05);color:var(--ink-navy)}
.flow-time-icon{flex:none;width:20px;height:20px;color:var(--brand)}
.flow-time-sep{width:1px;height:18px;background:#DCE6F0}
.flow-time-val{display:inline-flex;align-items:baseline;gap:0.1875rem}
.flow-time-num{font-family:"Nunito",var(--ui-font);font-size:1.875rem;font-weight:600;line-height:1;letter-spacing:.02em}
.flow-time-unit{font-size:var(--fs-body);letter-spacing:.06em}
/* 「1回」は数字を小さめに（主役は「60分」） */
.flow-time-val--sm .flow-time-num{font-size:1.3125rem}
/* v102：ステップを作り直し（ともちんの参考デザイン）。v103：並びを「STEPの丸 → 写真 → テキスト」に。
   STEPの丸と線はカードの外（左のレール）に置き、白いカードは写真とテキストだけを包む（丸とカードの間に余白ができる。線はカードに隠れない）。
   スクロールに合わせて、読んでいるステップ（.is-active）の丸を塗って白いカードを出し、通りすぎたステップ（.is-past）から次の丸までの線を青く伸ばす。
   .is-live はJSが動いて、動きを減らす設定でないときだけ付く（付かないときは4つとも同じ見た目） */
.fsteps{--c:72px;--pt:1.75rem;--rg:1.5rem;--gap:1rem;--cg:clamp(24px,3vw,40px);--ph-w:clamp(200px,24vw,280px);position:relative;display:grid;gap:var(--gap);max-width:1040px;margin:0 auto}
.fstep{position:relative;display:grid;grid-template-columns:var(--c) minmax(0,1fr);column-gap:var(--rg);align-items:start}
/* 線：丸の中心から次の丸の中心まで（ステップごと）。下地の薄い線の上に、青い線を重ねて伸ばす */
.fstep:not(:last-child)::before,.fstep:not(:last-child)::after{content:"";position:absolute;left:calc(var(--c) / 2 - 0.0625rem);top:calc(var(--pt) + var(--c) / 2);width:2px;height:calc(100% + var(--gap));pointer-events:none}
.fstep:not(:last-child)::before{background:#CFE0EE}
.fstep:not(:last-child)::after{background:var(--brand);transform:scaleY(0);transform-origin:top center}
/* 丸：カードの内側の上の余白と同じだけ下げて、写真・見出しの上端にそろえる */
.fstep-no{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--c);height:var(--c);margin-top:var(--pt);border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #D6E6F2;color:var(--label-blue);font-family:"Nunito",var(--ui-font);font-weight:600;line-height:1}
.fstep-en{font-size:0.625rem;letter-spacing:.14em;padding-left:.14em}
.fstep-num{margin-top:0.3125rem;font-size:1.625rem;letter-spacing:.02em}
/* カード：左に写真（3:2）、右にテキスト。ふだんは透明（余白だけ取っておき、色づいても中身が動かない） */
.fstep-card{display:grid;grid-template-columns:var(--ph-w) minmax(0,1fr);column-gap:var(--cg);align-items:start;padding:var(--pt);border-radius:24px}
.fstep-body{padding-top:0.25rem}
.fstep-title{font-size:var(--fs-h3);font-weight:400;line-height:1.6;letter-spacing:.06em;color:var(--ink-navy)}
.fstep-body p{margin-top:0.75rem;font-size:var(--fs-body);line-height:2;letter-spacing:.04em;color:var(--ink-sub)}
/* 写真（3:2）。届くまでは仮の枠（水色のパネルの上でも白いカードの上でも見える濃さ） */
.fstep-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#DCE9F4 0%,#C2D6E7 100%);color:#5F7F9C;font-family:var(--ui-font);font-size:0.6875rem;line-height:1.7;text-align:center}
.fstep-ph img{display:block;width:100%;height:100%;object-fit:cover}
/* 動き（.is-live のときだけ） */
.fsteps.is-live .fstep-card{transition:background-color .45s ease,box-shadow .45s ease}
.fsteps.is-live .fstep-no{transition:background-color .45s ease,box-shadow .45s ease,color .45s ease}
.fsteps.is-live .fstep::after{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.fsteps.is-live .fstep.is-past::after{transform:scaleY(1)}
.fsteps.is-live .fstep.is-active .fstep-card{background:#fff;box-shadow:0 4px 14px rgba(40,70,100,.05)}
.fsteps.is-live .fstep.is-active .fstep-no{background:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);color:var(--ink-navy)}
/* 本文の文節：ふだんは文節ごとにまとめて折り返す。1行に入りきらない長い文節（320pxの画面など）だけ、文節の中で折り返す（はみ出さない） */
.fstep-body .nw{display:inline-block;white-space:normal}
/* 背景：S4・S4-2の水色（#EDF6FC）からつながり、下に向かって少しだけ濃く（→ #E3F0FA）。右下を丸める（v95）。右下の大きな丸（飾り）はv96で削除 */
.booking{--rad:clamp(40px,5.6vw,96px);position:relative;overflow:hidden;background:linear-gradient(180deg,var(--fv-bg) 0%,#E3F0FA 100%);border-radius:0 0 var(--rad) 0}
/* 白いカード：左（体験コースと料金・予約ボタン）｜右（説明）。間に縦の線 */
.booking-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;max-width:1040px;margin:0 auto;padding:clamp(3rem,4.4vw,4rem) clamp(2rem,4.4vw,4rem);background:#fff;border-radius:32px;box-shadow:0 16px 40px rgba(40,90,140,.08)}
.booking-main{text-align:center;padding-right:clamp(1.75rem,4vw,3.5rem)}
/* v122：上の丸い写真（アイコン）を削除（ともちん指定）。場所のピルが左の列の先頭になるので、上の余白なし */
.booking-place{display:inline-block;margin-top:0;padding:.32em 1.3em .32em 1.4em;border-radius:999px;background:var(--fv-bg);font-size:var(--fs-note);line-height:1.6;letter-spacing:.08em;color:var(--ink-navy)}
/* v116：「体験コース」と「脳波測定＋カウンセリング」の大きさを入れ替え（ともちん指定）。大きい「体験コース」を小見出し（紺）、小さい「脳波測定＋カウンセリング」を補足（#6B8FB0） */
.booking-name{margin-top:0.875rem;font-size:var(--fs-h3);font-weight:400;line-height:1.6;letter-spacing:.06em;color:var(--ink-navy)}
.booking-kind{margin-top:0.125rem;font-size:var(--fs-note);letter-spacing:.08em;color:var(--label-blue)}
/* 料金：数字はNunito（英字ラベルと同じ書体） */
.booking-price{display:flex;align-items:center;justify-content:center;margin-top:1rem;color:var(--ink-navy)}
.bp-min{display:flex;align-items:baseline;gap:0.25rem;padding-right:1.125rem;margin-right:1.125rem;border-right:1px solid #CFDDEA}
.bp-min .num{font-family:"Nunito",var(--ui-font);font-size:2.75rem;font-weight:600;line-height:1}
.bp-min .unit{font-size:1rem}
.bp-yen{display:flex;align-items:center;gap:0.375rem}
.bp-yen .num{font-family:"Nunito",var(--ui-font);font-size:4rem;font-weight:600;line-height:1;letter-spacing:.01em}
.bp-yen .unit-wrap{display:flex;flex-direction:column;align-items:center}
.bp-yen .unit{font-size:1.25rem;line-height:1.3}
.bp-yen .tax{font-size:0.6875rem;line-height:1.3;color:var(--ink-sub)}
.booking-main .btn-cta{margin:1.875rem auto 0}
.booking-sub{padding-left:clamp(1.75rem,4vw,3.5rem);border-left:1px solid #DCE6F0}
.booking-sub p{font-size:var(--fs-body);line-height:2.1;letter-spacing:.06em;color:var(--ink-sub)}
.booking-sub .booking-ok{margin-top:1.5rem;font-size:var(--fs-h3);line-height:1.6;letter-spacing:.06em;color:var(--ink-navy)}
.booking-checks{margin-top:0.875rem;display:grid;gap:0.5rem}
.booking-checks li{display:flex;align-items:center;gap:0.625rem;font-size:var(--fs-body);line-height:1.8;letter-spacing:.04em;color:var(--ink-sub)}
.booking-checks svg{flex:none;width:22px;height:22px}
.booking-sub .booking-end{margin-top:1.125rem}
.medical-note{max-width:40rem;margin:2rem auto 0;text-align:center;font-size:var(--fs-note);line-height:1.8;color:var(--ink-sub)}
/* 1023px以下：カードの中を縦に（左の列 → 線 → 右の列） */
@media (max-width:1023px){
  .booking-card{grid-template-columns:minmax(0,1fr);max-width:35rem;padding:3rem 2.25rem}
  .booking-main{padding-right:0}
  .booking-sub{padding:2rem 0 0;margin-top:2.25rem;border-left:0;border-top:1px solid #DCE6F0}
}
/* v101：S4（体験の流れ）〜S5（予約）の水色パネルの中に置く。上下のすき間は S4→S4-2、S4-2→S5 とも PC 128px／スマホ 96px（S4の下の余白と同じ考え方）
   v104：白いカードをやめて、文と写真を水色のパネルに直接置く（白いカードは予約だけにして、結びを目立たせる・ともちん指定）。
   文が左、写真（白文字のひと言入り）が右。上の体験の流れ（写真が左）の続きに見えないよう、左右を入れ替えた */
.online{background:var(--fv-bg);padding-bottom:2.5rem}
/* 文（左）と写真（右）の2カラム。幅は予約カードと同じ最大1040px。文は写真の上下の真ん中にそろえる。
   v105：文の列を文の長さに合わせて約420px（見出しが1行に入る幅）にして、文と写真の間の空きをつめた。写真は6:5から3:2（横長）に（ともちん指定） */
.online-card{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);column-gap:clamp(2.5rem,4vw,3.5rem);align-items:center;max-width:1040px;margin:0 auto}
.online-photo{position:relative;aspect-ratio:3/2;border-radius:32px;overflow:hidden}
/* 写真が届くまでの仮の枠（白文字が読めるよう、写真の代わりに青みの面） */
.online-ph{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:1.25rem 1.5rem;background:linear-gradient(160deg,#D3E3EF 0%,#A9C3D8 55%,#7E9CB6 100%);color:rgba(255,255,255,.9);font-family:var(--ui-font);font-size:0.75rem;line-height:1.7;text-align:right}
.online-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 写真の上のひと言（v119・ともちん案）：白文字＋紺のグラデーションをやめて、1行ずつ白い帯に紺の文字（S2-3・S3-2の縦書きの言葉と同じ組み合わせ）。
   写真を暗くしないので、明るい写真のまま見せられる。v120：写真は元の向きのまま（反転しない・ともちん指定）にしたので、右下のノートパソコンの上に右揃えで置く（左下だと女性の手と服にかかる） */
.online-catch{position:absolute;right:clamp(1.25rem,1.8vw,1.625rem);bottom:clamp(1.5rem,2.6vw,2.25rem);z-index:1;font-size:var(--fs-h3);line-height:1;letter-spacing:.08em;color:var(--ink-navy);text-align:right}
.online-catch .nw{display:inline-block;background:#fff;padding:0.6875rem 0.875rem 0.625rem}
.online-catch br+.nw{margin-top:0.5rem}
.online-body{padding:0}
.online-title{font-size:var(--fs-h3);font-weight:400;line-height:1.6;letter-spacing:.06em;color:var(--ink-navy)}
.online-body p{margin-top:1.25rem;font-size:var(--fs-body);line-height:2.1;letter-spacing:.06em;color:var(--ink-sub);text-spacing-trim:trim-start}
/* 文節：ふだんは文節ごとにまとめて折り返す。1行に入りきらない長い文節（320pxの画面のコース名など）だけ、文節の中で折り返す */
.online-body p .nw{display:inline-block;white-space:normal}
.online-body .online-title + p{margin-top:1.5rem}
/* 「60分すべてをカウンセリングにあてます。」は紺（太字のかわり） */
.online-em{color:var(--ink-navy)}
.online-body .online-note{margin-top:0.75rem;font-size:var(--fs-note);line-height:1.8;color:var(--ink-sub)}
/* 線のボタン（予約以外の案内）。予約ボタン（コーラル）とは見た目を分ける */
.btn-line{display:inline-flex;align-items:center;justify-content:center;min-width:16.25rem;margin-top:1.75rem;padding:.95em 2.4em;border:1px solid #8FA6BD;border-radius:999px;font-size:var(--fs-body);letter-spacing:.1em;color:var(--ink-navy);text-decoration:none;transition:background-color .2s,border-color .2s}
.btn-line:hover{background:#fff;border-color:var(--brand-ink)}
/* 1023px以下：写真 → 文の縦並び（最大560px） */
@media (max-width:1023px){
  .online-card{grid-template-columns:minmax(0,1fr);max-width:35rem}
  .online-photo{order:-1}
  .online-body{padding-top:2rem}
}
/* 仕事：予約の手前に残った小さな不安（続けるかどうか・予約と支払い・保険・服薬・服装）を消す。S5（予約カード）のパネルの後。
   質問と答えは今のテーマの文（カスタム投稿 faq から表示できる）。ページの本文で答えている質問は入れない。
   開閉式（details）。開いたときは、対応するブラウザだけ高さをなめらかに変える（対応しないブラウザは、すぐに開く） */
.faq{background:var(--bg)}
.faq .sec-title{color:var(--ink-navy)}
.faq-list{display:grid;gap:0.75rem;max-width:800px;margin:0 auto;interpolate-size:allow-keywords}
.faq-item{background:#fff;border:1px solid #E3ECF5;border-radius:16px;box-shadow:0 4px 14px rgba(40,70,100,.04)}
.faq-q{display:flex;align-items:flex-start;gap:0.875rem;padding:1.25rem 1.5rem 1.25rem 1.625rem;list-style:none;cursor:pointer;border-radius:16px;font-size:var(--fs-body);line-height:1.75;letter-spacing:.06em;color:var(--ink-navy);transition:color .2s}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--brand-ink)}
.faq-q:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}
/* Q・A：Nunito 600（数字・英字と同じ書体）。Qは濃い青、Aはブランドブルー。1行目の高さにそろえる */
.faq-mark{flex:none;width:22px;font-family:"Nunito",var(--ui-font);font-size:1.375rem;font-weight:600;line-height:calc(var(--fs-body) * 1.75);color:var(--brand-ink)}
.faq-q-text{flex:1;min-width:0}
/* 質問は見出しと同じく文節で折り返す（1行に入りきらない長い文節だけ、文節の中で折り返す） */
.faq-q-text .nw{display:inline-block;white-space:normal}
/* 開閉のしるし：薄い水色の丸に＋（開くと−） */
.faq-icon{position:relative;flex:none;width:28px;height:28px;margin-top:calc((var(--fs-body) * 1.75 - 1.75rem) / 2);border-radius:50%;background:var(--fv-bg)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-0.0625rem 0 0 -0.375rem;border-radius:1px;background:var(--brand-ink);transition:transform .3s ease}
.faq-icon::after{transform:rotate(90deg)}
.faq-item[open] .faq-icon::after{transform:rotate(0deg)}
.faq-a{display:flex;align-items:flex-start;gap:0.875rem;margin:0 1.5rem 0 1.625rem;padding:1.125rem 0 1.375rem;border-top:1px dashed #D6E6F2}
.faq-a .faq-mark{line-height:calc(var(--fs-body) * 2);color:var(--brand)}
.faq-a p{flex:1;min-width:0;font-size:var(--fs-body);line-height:2;letter-spacing:.04em;color:var(--ink-sub)}
.faq-item::details-content{block-size:0;overflow:clip;transition:block-size .35s ease,content-visibility .35s;transition-behavior:allow-discrete}
.faq-item[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){
  .faq-item::details-content{transition:none}
  .faq-icon::before,.faq-icon::after{transition:none}
}
/* FAQの一覧ページへ（S4-2と同じ線のボタン） */
.faq-more{margin-top:2.25rem;text-align:center}
.faq-more .btn-line{margin-top:0}
/* 仕事：ページ全体をまとめて、迷っている人の背中をもう一度押す。見出しはFVの手書き文字（スマホ版＝1行目を中央に寄せた版）をもう一度使い、ページの最初と最後をつなげる。
   画面幅いっぱいの水色パネル。丸める角は右上と左下（S2-2 左上・右下 → S3 右上・左下 → S4〜S5 左上・右下 → ここ 右上・左下 と交互になる）。
   右上の円の線はv130、FVの小さな丸（5つ）はv133で削除（ともちん指定） */
.closing{background:var(--bg)}
/* v135：上の余白（--pt）はパネル、下の余白は文の列（.container）が持つ（人物を文の列の中に入れても、パネルの下の辺にそろえられるように） */
.closing-panel{--rad:clamp(40px,5.6vw,96px);--pt:clamp(80px,8vw,128px);position:relative;overflow:hidden;background:var(--fv-bg);border-radius:0 var(--rad) 0 var(--rad);padding:var(--pt) 0 0;text-align:center}
/* v130：背景画像（ともちん指定）。届くまでは仮の枠（空のような水色のグラデーション）。PC closing-bg-pc.webp（2400×1200）／スマホ closing-bg-sp.webp（1080×1920）を、パネルいっぱいに表示（はみ出す分は切る） */
.closing-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#D6EAF9 0%,#E8F3FC 55%,#F3F9FD 100%)}
.closing-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 文の後ろだけ白くやわらかく明るくして、どんな写真でも文が読めるようにする */
.closing-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 34% 56% at 50% 50%,rgba(255,255,255,.75) 0%,rgba(255,255,255,.42) 55%,rgba(255,255,255,0) 100%)}
/* 文の列は最大560px（人物を左右に置くため、ほかのセクションより細く） */
.closing .container{position:relative;z-index:2;max-width:37.5rem;padding-bottom:var(--pt)}
/* v130：メッセージを挟んで男女を置く。v132でともちん支給の写真に（男性が左・女性が右・ともちん指定）。もものあたりまで写った透過の画像（男性 682×1652・女性 635×1650）。
   PC（1024px〜）：文の列（最大560px）の外側に置き、パネルの下の辺にそろえる。高さはパネルの72%（1440pxで約640px・1024〜1279pxは画面幅の52%まで）。文の列から20px外側（1024〜1279pxは画面の端に寄りすぎないよう、少し内側へ）
   v135：スマホで文を挟めるよう、人物を文の中へ移した。PCの位置・大きさはv134と同じ（基準を文の列にして、「パネルの72%」＝「文の列の72%＋上の余白の72%」で計算）。文より後ろに置く */
.closing-person{position:absolute;bottom:0;z-index:-1;height:min(calc(72% + var(--pt) * .72),52vw)}
.closing-person img{display:block;width:auto;height:100%;max-width:none}
/* v134：男性を少し大きく（女性の約1.1倍・ともちん指定）。1024〜1279pxで左下の丸い角にかからないよう、少しだけ内側へ */
.closing-person--m{height:min(calc(79% + var(--pt) * .79),57vw);right:calc(50% + clamp(15rem,19vw,17.5rem))}
.closing-person--w{left:calc(50% + clamp(15.625rem,19.5vw,17.5rem))}
.closing-catch{line-height:1}
.closing-catch img{display:block;width:min(100%,480px);height:auto;margin:0 auto}
/* サブはFVのサブと同じ文・同じ大きさ（PC 約20px） */
.closing-sub{margin-top:1.25rem;font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.8;letter-spacing:.05em;color:var(--ink-navy)}
/* 本文：v135で、スマホで2人が挟めるよう「仕事のこと。…」「答えが…」「ひとりで…」の3つに分けた（PCの見え方はv134と同じ） */
.closing-scope,.closing-ok,.closing-p2{font-size:var(--fs-body);line-height:2.2;letter-spacing:.06em;color:var(--ink-sub)}
.closing-scope{margin-top:clamp(2.5rem,4vw,3.5rem)}
.closing-p2{margin-top:1.5rem}
/* v137：「そこから、ほどけていくものがあります。」は改行なし（ともちん指定）。「ほどけていくものがあります。」をひとかたまりにして、1行に入らないときは「そこから、」の後で折り返す（スマホ 約450px以下。320pxの画面では、かたまりの中で「ほどけていくものが／あります。」） */
.closing-ib{display:inline-block}
.closing-lead{margin-top:clamp(2.5rem,4vw,3.5rem);font-size:var(--fs-h3);line-height:1.6;letter-spacing:.08em;color:var(--ink-navy)}
.closing .cta-block.center{margin-top:1.75rem}
/* 1023px以下（タブレット・スマホ）だけの改行（br-tb）と、そのとき外す文字（hide-tb）。v135で追加（スマホだけは br-sp、PCだけは br-pc） */
.br-tb{display:none}
@media (max-width:1023px){
  .br-tb{display:inline}
  .hide-tb{display:none}
}
@media (max-width:1023px){
  .closing-panel{--pt:5.5rem}
  .closing-row{display:grid;align-items:center;justify-content:center;column-gap:var(--gap,1.75rem)}
  .closing-row--w{grid-template-columns:minmax(0,max-content) var(--fw,184px);margin-top:3rem}
  .closing-row--m{grid-template-columns:var(--fm,198px) minmax(0,max-content);margin-top:2.5rem}
  .closing-row-text{text-align:left}
  .closing-sub{margin-top:0}
  .closing-scope{margin-top:1.25rem}
  .closing-ok{margin-top:2.5rem}
  .closing-p2{margin-top:0}
  .closing-lead{margin-top:3rem}
  .closing-person{position:static;height:auto;aspect-ratio:var(--ar);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
  .closing-person img{width:100%;height:auto}
  /* 枠の縦横比：画像の幅 ÷（画像の高さの82%）＝ 頭からももの上あたりまで */
  .closing-person--w{--ar:635 / 1353}
  .closing-person--m{--ar:682 / 1355}
}
/* 仕事：きちんと運営しているという安心と、検索からの入口。予約の流れを切らないよう、最後のメッセージの後に小さく置く。
   最新3件ずつ・PCは2列・「一覧を見る」だけ。見出しは補助のセクションなので小見出しの大きさ（旧S6と同じ考え方）。
   テーマのカスタム投稿 news（カテゴリ：お知らせ・営業時間）・column（こころ・からだ）から表示。記事が0件のときは、その列ごと出さない */
.info{background:var(--bg)}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start;max-width:1040px;margin:0 auto}
.info-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:0.875rem;border-bottom:1px solid #CFDDEA}
.info-title{font-size:var(--fs-h3);font-weight:400;line-height:1.5;letter-spacing:.08em;color:var(--ink-navy)}
.info-more{display:inline-flex;align-items:center;gap:0.375rem;flex:none;font-size:var(--fs-note);letter-spacing:.06em;color:var(--brand-ink);text-decoration:none}
.info-more svg{width:12px;height:12px}
.info-more:hover{text-decoration:underline}
.news-item,.col-item{display:flex;gap:1rem;padding:1.25rem 0;border-bottom:1px solid #E3ECF5;text-decoration:none;color:inherit}
.news-item{flex-direction:column;gap:0.375rem}
.info-meta{display:flex;align-items:center;gap:0.75rem;line-height:1}
.info-date{font-family:"Nunito",var(--ui-font);font-size:0.8125rem;font-weight:600;letter-spacing:.06em;color:var(--label-blue)}
.info-cat{display:inline-block;padding:.2em .9em;border-radius:999px;background:var(--fv-bg);font-size:0.6875rem;line-height:1.6;letter-spacing:.08em;color:var(--ink-navy)}
.news-ttl,.col-ttl{font-size:var(--fs-body);line-height:1.75;letter-spacing:.04em;color:var(--ink-navy);transition:color .2s}
/* 記事のタイトルはWordPressから入るので、文節で折り返す（対応ブラウザのみ） */
.news-ttl,.col-ttl{word-break:auto-phrase}
.news-item:hover .news-ttl,.col-item:hover .col-ttl{color:var(--brand-ink)}
/* コラムのサムネイル（3:2・テーマの画像サイズ 600×400）。届くまでは仮の枠 */
.col-thumb{display:flex;align-items:center;justify-content:center;flex:none;width:120px;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#DCE9F4 0%,#C2D6E7 100%);color:#5F7F9C;font-family:var(--ui-font);font-size:0.625rem}
.col-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.col-text{display:flex;flex-direction:column;gap:0.5rem;min-width:0;padding-top:0.125rem}
/* 1023px以下：店舗情報 → 地図の縦並び、お知らせ → コラムの縦並び（最大640px） */
@media (max-width:1023px){
  .info-grid{grid-template-columns:minmax(0,1fr);max-width:40rem;row-gap:3.5rem}
}
/* ===== SP ===== */
@media (max-width:767px){
  /* スマホ：本文14px・補足と注記12px・見出し24px・小見出し20px */
  .section{padding:4rem 0}
  .sec-title{margin-bottom:2rem}
  /* v139：スマホのFVを作り変え（ともちん指定）。ともちん作の写真（1399×2000）をFVの背景にし、上の空にコピー、2人のまわりに吹き出し11個、予約ボタンは写真の下の端（境界線）にまたがる */
  .fv{background:var(--bg)}
  /* 写真より上（コピーの後ろ）は、写真の上の端と同じ空の色をのばす。下は予約ボタンの半分（37px）を残して、次のセクションと同じ色に */
  .fv::before{content:"";position:absolute;left:0;right:0;top:0;bottom:2.3125rem;background:#A7DFFE}
  .fv-inner{min-height:0;display:block;padding:1.125rem 1rem 0}
  .fv-copy{text-align:center;max-width:none}
  /* コピーの後ろだけ白くやわらかく明るくして、文と実績が読めるようにする（下へ向かって消える） */
  .fv-copy::before{content:"";position:absolute;z-index:-1;left:-1rem;right:-1rem;top:-1.125rem;bottom:-1.5rem;background:linear-gradient(to bottom,rgba(255,255,255,.8) 0%,rgba(255,255,255,.6) 45%,rgba(255,255,255,0) 100%)}
  /* 写真の箱：画面幅いっぱい（541px以上は540pxで中央）。吹き出しのいちばん上（写真の上から40%）がコピーの下20pxに来るよう、コピーの後ろへ重ねる */
  .fv-stage{--iw:min(calc(100% + 32px),540px);position:relative;inset:auto;width:var(--iw);height:auto;aspect-ratio:1399/2000;margin:calc(1.25rem - var(--iw) * .574) 0 0 calc((100% - var(--iw)) / 2);overflow:visible;container-type:normal}
  .fv-photo{left:0;top:0;width:100%;height:100%;aspect-ratio:auto}
  .fv-pic img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3%);mask-image:linear-gradient(to bottom,transparent 0,#000 3%)}
  .fv-veil{display:none}
  .fv h1{font-size:2.0625rem;line-height:1.45}
  .fv-catch img{width:min(81vw,320px);margin:0 auto}
  .fv-sub{margin-top:0.75rem;font-size:0.9375rem}
  .fv-badges{gap:0.625rem;max-width:21.4375rem;margin:1.375rem auto 0}
  /* 吹き出し11個・小さい丸7個：ともちんの配置どおり（写真に対する%。色はPCと同じ） */
  .bb01{--x:9.85%;--y:49.58%;--w:19.29%}
  .bb02{--x:23.73%;--y:40.15%;--w:26.84%}
  .bb03{--x:54.01%;--y:43.33%;--w:22.71%}
  .bb04{--x:9.52%;--y:59.75%;--w:16.66%}
  .bb05{--x:34.12%;--y:52.65%;--w:17.98%}
  .bb06{--x:74.51%;--y:57.29%;--w:20.79%}
  .bb07{--x:78.57%;--y:47.54%;--w:16.22%}
  .bb08{--x:2.24%;--y:68.60%;--w:25.87%}
  .bb09{--x:69.57%;--y:67.99%;--w:24.91%}
  .bb10{--x:5.22%;--y:78.55%;--w:21.14%}
  .bb11{--x:76.00%;--y:77.94%;--w:19.12%}
  .dt1{--x:30.08%;--y:58.07%;--w:3.93%}
  .dt2{--x:27.16%;--y:63.68%;--w:2.05%}
  .dt3{--x:49.58%;--y:50.68%;--w:2.97%}
  .dt4{--x:72.80%;--y:56.03%;--w:2.76%}
  .dt5{--x:24.65%;--y:78.57%;--w:2.69%}
  .dt6{--x:73.39%;--y:66.02%;--w:2.80%}
  .dt7{--x:73.62%;--y:79.09%;--w:1.98%}
  /* 予約ボタン：写真の下の端（境界線）にまたがる（ボタンの高さ74pxの半分を上へ） */
  .fv-cta{max-width:none;margin-top:-2.3125rem}
  .worries .sec-title{margin-bottom:1.25rem}
  /* v154：導入文は左揃え。改行は句点（。）のところだけで、ほかは行の端まで流す（ともちん指定） */
  .worries-lead{line-height:2;text-align:left}
  .wcards{gap:1.25rem;margin-top:2.25rem}
  .wcard-body{padding:1.25rem 1.375rem 1.5rem}
  .talk{padding:0.25rem 0 2.5rem}
  .talk-panel{padding:4rem 0 4.5rem}
  .talk-q{margin-top:1rem}
  /* v140：1段目のイラストは、スマホもPCと同じ配置（女性のまわりに吹き出し4つ・3:2の枠。ともちん指定。v139までは女性の上に吹き出しを2つずつ2段）。
     吹き出しの文字が小さくなりすぎないよう、左右へ12pxずつ広げる（画面の端から約8px・FVの吹き出しとそろえる。最大560px） */
  .talk-stage{--sw:min(calc(100% + 24px),560px);width:var(--sw);max-width:none;margin:0 0 0 calc((100% - var(--sw)) / 2)}
  .talk-row .talk-text{justify-self:stretch}
  /* v142：2段目のイラストは、文の列の6割の幅（375pxで約201px・最大432px）で中央に（ともちん指定。v141は8割・v140までは列いっぱい） */
  .talk-illust2{width:min(60%,432px)}
  /* v151：女性をもう少し小さく（幅 26% → 22%）、吹き出しを女性のまわりに近づける（吹き出しの大きさはそのまま・ともちん指定）。
     女性は左右の中央・足元を枠の下に。吹き出しは女性の頭と肩のまわりに置き直し、上下の余白を詰めて枠を 13:7 に（375pxで 359×193px） */
  .talk-stage{aspect-ratio:13/7}
  .talk-woman{--x:39%;--y:15.5%;--w:22%}
  .tb01{--x:10.6%;--y:10.4%}
  .tb02{--x:58.2%;--y:0%}
  .tb03{--x:62.1%;--y:49.7%}
  .tb04{--x:5.3%;--y:59.6%}
  /* v144：1段目の本文（大きな悩みが…）と「その「ほどではない」は、…」は中央揃え（ともちん指定）。2段目は左揃えのまま */
  .talk-row--a .talk-text{text-align:center}
  /* v144：3つの問いの文字を少し小さく（20px → 17px・ともちん指定）。360px以上の画面では3つとも1行に入る */
  .about-q li{font-size:1.0625rem}
  /* v144：2段目「それも、自分の人生を…時間です。」は、行の端まで詰めて折り返す（改行なし。375pxで「それも、自分の人生をより良く／していくための時間です。」）。
     見出し用の文節改行（auto-phrase）だと「より良くしていくための」が1つのかたまりになり、前と同じ所で折り返すため、ここだけふつうの折り返しに（文節ごとのまとまりは nw で守る） */
  .talk-row--b .talk-key{word-break:normal;text-wrap:wrap}
  /* v144：S3の説明文（COCOTOREの体験コースでは、…）と3つのカードの文、S3-2の本文は、スマホは改行なし・左揃え（ともちん指定）。
     文節ごとの折り返しをやめて行の端まで流す（文節で折り返すと、改行が入ったように見えるため）。S3-2の「 」の声は1行ずつのまま */
  .check-lead{text-align:left}
  .check-lead .nw,.consult-body p:not(.consult-end) .nw{white-space:normal}
  .ccard-text{text-align:left}
  /* v144：S3-2の結び「うまく話すことより、…始めてみてください。」は中央揃え（ともちん指定） */
  .consult-body .consult-end{text-align:center}
  /* v145：S2-3「COCOTOREは、そんなときに…場所です。」は改行なし（行の端まで流す・ともちん指定） */
  .about-place .nw{white-space:normal}
  /* v145：体験の流れの本文は改行なし（文節ごとのまとまりと、文と文の間の改行をやめて行の端まで流す・ともちん指定） */
  .fstep-body .nw{display:inline;white-space:normal}
  /* v146：説明の本文は、文の途中の改行と文節ごとの折り返しをやめて、行の端まで流す（sp-flow。S2-2・S2-3・S3-3・S4-2・S5。ともちん指定） */
  p.sp-flow .nw{display:inline;white-space:normal}
  .about-photo{margin-top:2rem}
  .about-body{margin-top:2rem}
  .about-q{gap:0.5rem}
  .br-sp{display:inline}
  .about-q li > span{line-height:1.35}
  .about-tag{padding:0.75rem 0.5625rem 0.625rem}
  .about-tags{left:-0.875rem;gap:0.375rem}
  /* v147：写真の縦書きの言葉は、スマホは写真の左上に重ねる（S2-3と同じ置き方・左へ14pxはみ出す）。右に置くと女性の髪にかかるため。v109〜v146はスマホでは出していなかった */
  .consult-tags{left:-0.875rem;right:auto;top:7%;gap:0.375rem}
  .consult-tag{padding:0.75rem 0.5625rem 0.625rem}
  .talk-text p{line-height:2.1}
  .talk-text .talk-key{letter-spacing:.04em}
  .fv-wave{height:50px}
  .fv-wave--pc{display:none}
  .fv-wave--sp{display:none}
  /* 541〜767px：写真は540pxで中央。左右の端は空の色へぼかしてなじませる */
  @media (min-width:33.8125rem){
    .fv-pic img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 3%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
  }
  .container,.container-wide{padding:0 1rem}
  .flow{padding-bottom:2rem}
  .online{padding-bottom:2rem}
  .fsteps{--c:52px;--pt:1rem;--rg:0.875rem;--gap:0.75rem}
  .flow-time-pill{gap:0.625rem;padding:0.4375rem 1.375rem 0.4375rem 1.125rem}
  .flow-time-icon{width:18px;height:18px}
  .flow-time-num{font-size:1.625rem}
  .flow-time-val--sm .flow-time-num{font-size:1.1875rem}
  .fstep-card{grid-template-columns:minmax(0,1fr);row-gap:1rem;border-radius:20px}
  .fstep-en{font-size:0.5625rem}
  .fstep-num{margin-top:0.1875rem;font-size:1.1875rem}
  .fstep-body{padding-top:0}
  .fstep-body p{margin-top:0.5rem}
  .fstep-ph{border-radius:12px}
  .check-panel{padding:4rem 0}
  .check-title{margin-top:1rem}
  .check-intro{margin-top:1.5rem;row-gap:2.25rem}
  .check-q{letter-spacing:.04em}
  .check-lead{margin-top:1.375rem}
  .br-pc{display:none}
  .check-flow{margin-top:2.25rem}
  .ccard{padding:2rem 1.375rem 1.875rem}
  .ccard-no{left:1.25rem;top:1rem;font-size:1.25rem}
  .ccard-img{width:120px;height:120px}
  .ccard-title{margin-top:1rem}
  .check-report-paper{width:220px}
  .check-report-tag{right:-0.5rem}
  .check-report-paper::after{width:310px;height:310px;margin:-9.6875rem 0 0 -9.6875rem}
  .check-report-cap{margin-top:1.25rem}
  .check .cta-block.center{margin-top:2.5rem}
  .check-notes{margin-top:0.875rem}
  .consult-media{margin-top:1.75rem}
  .consult-body{margin-top:1.75rem}
  .consult-body .consult-end{margin-top:2rem;letter-spacing:.04em}
  .booking-card{padding:2.5rem 1.25rem 2.25rem;border-radius:24px}
  /* v150：料金の数字を少し小さく（60：36→30px・2,200：52→42px。ともちん指定）。320pxなど狭い画面では、カードの幅に合わせてさらに小さく（料金の行の幅＝100cqw から、単位・線・余白の約106pxを引いて割り振る）。（税込）は1行に */
  .booking-price{container-type:inline-size}
  .bp-min .num{font-size:min(1.875rem,calc((100cqw - 6.625rem) * .1935))}
  .bp-yen .tax{white-space:nowrap}
  .bp-min{padding-right:0.875rem;margin-right:0.875rem}
  .bp-yen .num{font-size:min(2.625rem,calc((100cqw - 6.625rem) * .2796))}
  .booking-sub{margin-top:2rem;padding-top:1.75rem}
  .booking-sub .booking-ok{margin-top:1.25rem}
  .medical-note{text-align:left}
  .online-photo{border-radius:24px}
  .online-body{padding-top:1.75rem}
  .online-catch{right:0.75rem;bottom:0.75rem;font-size:0.875rem}
  .online-catch .nw{padding:0.4375rem 0.5625rem 0.375rem}
  .online-catch br+.nw{margin-top:0.375rem}
  .btn-line{display:flex;min-width:0;width:100%}
  /* S3-3 カウンセラー紹介：写真 → 役職・お名前（中央揃え）→ メッセージ（左揃え）→「 」の文（中央揃え）→ 本文（左揃え）→ ほかのカウンセラー（3人を横に）→ 研修の枠 */
  .cnsl-panel{padding:4rem 0 2rem}
  .cnsl-card{padding:2rem 1.125rem;border-radius:24px}
  .cnsl-main{grid-template-columns:minmax(0,1fr);row-gap:1.75rem}
  .cnsl-photo{width:min(64%,240px);margin:0 auto}
  .cnsl-img{border-radius:20px}
  .cnsl-body{text-align:center}
  .cnsl-msg{margin-top:1.25rem;padding-top:1.25rem;text-align:left}
  .cnsl-team{margin-top:2.5rem;padding-top:2.5rem}
  .cnsl-quote{letter-spacing:.06em}
  .cnsl-text{text-align:left;letter-spacing:.04em}
  .cnsl-members{gap:0.875rem;margin-top:2rem}
  .cnsl-member{width:auto;flex:1 1 0;max-width:6.5rem}
  .cnsl-mph{width:80px}
  /* v152（テーマ v1.3.2 と同じ）：ほかのカウンセラーが4人以上のときは2人ずつ並べる（写真は80pxのまま・奇数のときの最後の1人は中央）。3人以下は1列のままで、狭い画面では写真を少し小さく */
  .cnsl-member{min-width:0}
  .cnsl-mph{width:min(80px,100%)}
  .cnsl-members:has(> :nth-child(4)){row-gap:1.75rem;max-width:18.75rem;margin-left:auto;margin-right:auto}
  .cnsl-members:has(> :nth-child(4)) .cnsl-member{flex:0 0 calc((100% - 15px) / 2);max-width:none}
  .cnsl-mrole{margin-top:0.625rem}
  .cnsl-training{display:flex;gap:0.875rem;margin-top:2rem;padding:1rem 0.875rem;border-radius:14px}
  .cnsl-training p{letter-spacing:.04em}
  /* S6 よくある質問 */
  .faq-list{gap:0.625rem}
  .faq-item{border-radius:14px}
  .faq-q{gap:0.625rem;padding:1rem 1rem 1rem 1.125rem;border-radius:14px;letter-spacing:.04em}
  .faq-mark{width:18px;font-size:1.1875rem}
  .faq-icon{width:26px;height:26px;margin-top:calc((var(--fs-body) * 1.75 - 1.625rem) / 2)}
  .faq-icon::before,.faq-icon::after{width:10px;margin-left:-0.3125rem}
  .faq-a{gap:0.625rem;margin:0 1rem 0 1.125rem;padding:0.875rem 0 1.125rem}
  .faq-more{margin-top:1.75rem}
  /* S7 最後のメッセージ */
  .closing-panel{--pt:4.5rem}
  .closing-catch img{width:min(88%,300px)}
  /* 人物の大きさ：男性は「ほどけていくものがあります。」が1行に入る幅を残して画面幅に合わせる（375pxで約121px・100〜128px）。女性は男性と同じ縮尺（×0.931） */
  .closing-row{--gap:0.875rem;--fm:clamp(100px,calc(100vw - 254px),128px);--fw:calc(var(--fm) * .931)}
  .closing-row--w{margin-top:2.25rem}
  .closing-row--m{margin-top:1.75rem}
  .closing-sub{font-size:0.9375rem}
  .closing-scope{margin-top:0.875rem}
  .closing-scope,.closing-ok,.closing-p2{line-height:2.1}
  .closing-ok{margin-top:1.75rem}
  .closing-lead{margin-top:2.25rem}
  .closing .cta-block.center{margin-top:1.375rem}
  /* S8 お知らせ・コラム */
  .info-grid{row-gap:3rem}
  .news-item,.col-item{padding:1rem 0}
  .col-item{gap:0.875rem}
  .col-thumb{width:96px;border-radius:10px}
  .col-text{gap:0.375rem;padding-top:0}
}

/* ===== テーマで追加（管理画面のデータを表示するときの形） ===== */
/* よくある質問：答えは管理画面の文（段落・箇条書き・リンク） */
.faq-a-text{flex:1;min-width:0}
.faq-a-text > * + *{margin-top:.6em}
.faq-a-text ul,.faq-a-text ol{padding-left:1.4em;font-size:var(--fs-body);line-height:2;color:var(--ink-sub)}
.faq-a-text ul{list-style:disc}
.faq-a-text ol{list-style:decimal}
.faq-a-text a{color:var(--brand-ink);text-decoration:underline}
/* カウンセラー紹介：写真が未登録のとき・役職とお名前がないとき */
.cnsl-img--none{background:linear-gradient(160deg,#DCE9F4 0%,#C2D6E7 100%)}
.cnsl-body > .cnsl-msg:first-child{margin-top:0;padding-top:0;border-top:0}
/* お知らせ・コラム：片方だけのときは1列 */
.info-grid--single{grid-template-columns:minmax(0,1fr);max-width:40rem}