/* ============================================================
   からだラボ SORA【美容整体 × 姿勢矯正】 ｜ LP
   ------------------------------------------------------------
   色の使う量は、多い順に  白 ＞ 水色 ＞ 青系の水色 ＞ オレンジ ＞ 緑
   ・差し色はオレンジ。緑は「よく見ると在る」程度まで絞る
   ・全体にパステル（明るく・淡く）。濃い色は文字とボタンだけに使う
   最上部に自社広告用のカルーセル枠（3枚）。
   見出し＝明朝（Zen Old Mincho）／本文＝角ゴシック（Zen Kaku Gothic New）
   ============================================================ */

:root{
  /* ── 1. 白：いちばん広い面 ───────────────────── */
  --paper:    #ffffff;
  --paper-2:  #f7fcff;   /* ごくわずかに水色を含んだ白 */
  --card:     #ffffff;

  /* ── 2. 水色（ロゴの空。パステル寄りに明るく） ──── */
  --sky:      #e4f4fe;   /* セクションの淡い地 */
  --sky-2:    #c4e5f8;   /* 罫・枠 */
  --aqua:     #8ccdf1;   /* 少し濃い空色（図形） */

  /* ── 3. 青系の水色：帯・ボタン・見出しの強調 ──── */
  --blue:     #4aa8de;   /* ロゴの空の色（面・アイコン） */
  --blue-d:   #1c78af;   /* 文字とボタン（白地 4.9:1） */
  --blue-dd:  #14618f;   /* 濃い面（オファー帯・最終CTA） */
  --blue-l:   #ddf1fd;   /* パステルの淡い空色 */

  /* ── 4. オレンジ：差し色（ロゴの太陽） ───────── */
  --orange:   #f0a03c;   /* 太陽のオレンジ（罫・小さな図形） */
  --orange-m: #d97f16;   /* タグ・ボタンの地（白文字を乗せる） */
  --orange-d: #b06510;   /* 白地に置く文字（5.0:1） */
  --orange-l: #fde3bd;   /* パステルオレンジ（下線・マーカー） */

  /* ── 5. 緑：いちばん少ない（ロゴの「からだ」の色） ── */
  --lime:     #85c246;
  --lime-d:   #5f9126;
  --lime-dd:  #47701c;
  --lime-l:   #ecf6e0;

  /* ── 文字（青みのある墨。黒は使わない） ───────── */
  --ink:      #1f3a47;
  --ink-soft: #4a656f;
  --ink-faint:#85a0ab;
  --line:     #e2eef4;

  --shadow-s: 0 4px 14px rgba(24,72,98,.07);
  --shadow-m: 0 12px 34px rgba(24,72,98,.10);
  --shadow-l: 0 30px 70px rgba(24,72,98,.13);
  --shadow-btn: 0 8px 18px rgba(22,113,156,.26);

  --wrap: 1120px;
  --gut: clamp(20px, 5vw, 52px);

  --cs-ratio: 1200 / 400;

  --ff-disp:  "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --ff-body:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --ff-en:    "Fraunces", "Zen Old Mincho", serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:74px; }
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  letter-spacing:.015em;
  overflow-x:hidden;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.sec{ position:relative; padding-block:clamp(70px, 11vw, 138px); }
.center{ text-align:center; }

/* ===== 共通：見出し ===== */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ff-en); font-weight:500; font-style:italic;
  font-size:.82rem; letter-spacing:.14em; color:var(--blue-d);
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--orange); }
.eyebrow--c::before{ display:none; }
.eyebrow--c::after{ content:""; width:26px; height:1.5px; background:var(--orange); }

.h-sec{
  font-family:var(--ff-disp); font-weight:700;
  font-size:clamp(1.8rem, 5vw, 2.9rem); line-height:1.5; letter-spacing:.01em; color:var(--ink);
  margin-top:.55em;
}
.h-sec .g{ color:var(--blue-d); }
.h-sec .u{ background:linear-gradient(transparent 60%, var(--orange-l) 60%); padding-inline:.05em; }
.lead{ font-size:clamp(1rem,2.3vw,1.1rem); color:var(--ink-soft); margin-top:1.3em; line-height:2; }

/* ===== ボタン ===== */
.btn{
  --bg:var(--blue-d); --bgd:var(--blue-dd);
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--ff-body); font-weight:700; font-size:clamp(1rem,2.3vw,1.12rem); color:#fff;
  background:var(--bg); padding:1.05em 2.1em; border-radius:14px;
  box-shadow:0 6px 0 var(--bgd), var(--shadow-btn);
  transition:transform .14s ease, box-shadow .14s ease, background .2s; position:relative; top:0;
}
.btn:hover{ background:var(--blue-dd); --bgd:#0e4a6f; top:2px; box-shadow:0 4px 0 var(--bgd), var(--shadow-btn); }
.btn:active{ top:6px; box-shadow:0 0 0 var(--bgd), var(--shadow-btn); }
.btn .arw{ display:inline-flex; transition:transform .2s; }
.btn:hover .arw{ transform:translateX(4px); }
.btn--orange{ --bg:var(--orange-m); --bgd:var(--orange-d); box-shadow:0 6px 0 var(--bgd), 0 8px 18px rgba(217,118,31,.28); }
.btn--orange:hover{ background:var(--orange-d); --bgd:#8a4f0b; }
.btn--lg{ font-size:clamp(1.05rem,2.6vw,1.25rem); padding:1.2em 2.6em; }
.btn--ghost{
  color:var(--blue-d); background:transparent; border:2px solid var(--sky-2);
  box-shadow:none; border-radius:999px; padding:.85em 1.7em; font-size:.95rem;
}
.btn--ghost:hover{ background:var(--blue); color:#fff; border-color:var(--blue); top:0; box-shadow:var(--shadow-s); }

.cta-note{ font-size:.85rem; color:var(--ink-soft); margin-top:1em; }
/* 「初めての方へ｜」は、ボタンが1行に収まる広い画面でだけ出す */
.lbl-full{ display:none; }
@media(min-width:1300px){ .lbl-full{ display:inline; } }
.cta-note b{ color:var(--orange-d); font-weight:700; }

.cs{ width:100%; }
.cs__frame{ position:relative; width:100%; }
.cs__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  border-radius:12px; box-shadow:var(--shadow-s); background:var(--card);
  scrollbar-width:none; -ms-overflow-style:none;
}
.cs__track::-webkit-scrollbar{ display:none; }
.cs__slide{ flex:0 0 100%; scroll-snap-align:start; }
.cs__slide a{ display:block; }
.cs__slide img{ width:100%; aspect-ratio:var(--cs-ratio); object-fit:cover; display:block; }

/* 帯を太らせないよう、矢印と点は画像の上に重ねる */
.cs__arw{ position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:28px; height:28px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.82); color:var(--blue-d); box-shadow:0 2px 6px rgba(20,97,143,.18);
  display:grid; place-items:center; transition:background .2s, color .2s; }
.cs__arw:hover{ background:#fff; color:var(--blue-dd); }
.cs__arw svg{ width:14px; height:14px; }
.cs__arw--prev{ left:8px; }
.cs__arw--next{ right:8px; }

.cs__dots{ position:absolute; left:50%; bottom:7px; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px;
  background:rgba(20,97,143,.34); backdrop-filter:blur(4px); }
.cs__dots button{ width:6px; height:6px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.62); transition:width .2s, background .2s; }
.cs__dots button.is-on{ width:16px; background:#fff; }

@media(max-width:560px){
  .cs__arw{ width:24px; height:24px; }
  .cs__arw svg{ width:12px; height:12px; }
  .cs__arw--prev{ left:6px; } .cs__arw--next{ right:6px; }
}
@media(prefers-reduced-motion:reduce){ .cs__track{ scroll-behavior:auto; } }

/* ===== ヘッダー（カルーセルの下。スクロールすると上に貼りつく） ===== */
.hd{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px clamp(16px,4vw,40px);
  background:rgba(255,255,255,.93); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s;
}
.hd.scrolled{ box-shadow:var(--shadow-s); }
.brand{ display:flex; align-items:baseline; gap:.55em; min-width:0; }
.brand b{ font-family:var(--ff-en); font-weight:600; font-size:clamp(1rem,3.2vw,1.2rem);
  color:var(--blue-d); letter-spacing:.01em; white-space:nowrap; }
.brand small{ font-size:.62rem; letter-spacing:.14em; color:var(--ink-soft); white-space:nowrap; }
.hd__btn{
  font-family:var(--ff-body); font-weight:700; font-size:.92rem; color:#fff; white-space:nowrap;
  background:var(--blue-d); padding:.7em 1.4em; border-radius:11px; box-shadow:0 4px 0 var(--blue-dd);
  transition:.15s; position:relative; top:0; flex:none;
}
.hd__btn:hover{ top:2px; box-shadow:0 2px 0 var(--blue-dd); background:var(--blue-dd); }
@media(max-width:620px){ .brand small{ display:none; } }
@media(max-width:400px){ .brand b{ font-size:.95rem; } .hd__btn{ font-size:.84rem; padding:.7em 1.1em; } }

/* ============================================================
   ① ヒーロー
   ============================================================ */
.hero{ position:relative; overflow:hidden;
  background:
    radial-gradient(112% 66% at 78% -8%, #aedcf7 0%, transparent 62%),
    linear-gradient(180deg, #c9e9fb 0%, #ddf2fd 34%, #f1fafe 68%, #ffffff 100%);
}
/* ゆるやかな草地（地平線）。ヒーロー下端＝オファー帯の上端に接する */
.hero__hills{ position:absolute; z-index:0; left:-8%; right:-8%; bottom:0;
  height:clamp(200px,19vw,258px); pointer-events:none; }
.hero__hills::before,.hero__hills::after{ content:""; position:absolute; bottom:0;
  border-radius:50% 50% 0 0 / 100% 100% 0 0; }
.hero__hills::before{ left:0; width:74%; height:100%;
  background:linear-gradient(180deg,#f1f8e6,#e4f2d2); opacity:.5; }
.hero__hills::after{ right:0; width:66%; height:74%;
  background:linear-gradient(180deg,#f7fbf0,#edf6e0); opacity:.65; }
/* ヒーローの雲の配置 */
.hero .cl-1{ width:min(66vw,780px); aspect-ratio:2.2/1; top:3%;  left:-12%; opacity:.92; }
.hero .cl-2{ width:min(48vw,560px); aspect-ratio:2.4/1; top:21%; right:-8%;  opacity:.8;
  animation-duration:64s; animation-direction:alternate-reverse; }
.hero .cl-3{ width:min(38vw,450px); aspect-ratio:2.1/1; top:36%; left:8%;   opacity:.7;
  animation-duration:74s; }
/* Bパターンでは背景写真を使わず、空・雲・草地で見せる */
.hero__bg{ display:none; }
.hero__bg--unused{ position:absolute; z-index:0; top:0; right:0; width:60%; height:64%;
  background:url("../assets/img/portrait1.png") right 28%/cover no-repeat; opacity:.08;
  filter:blur(3px);
  /* 右上を濃く、左（と下）へなめらかにフェード＝右アンカーで左へ自然に溶ける */
  -webkit-mask-image:radial-gradient(130% 135% at 100% 0%, #000 26%, transparent 72%);
          mask-image:radial-gradient(130% 135% at 100% 0%, #000 26%, transparent 72%); }
/* 切り抜き人物（背景に直接配置） */
.hero__person{ position:absolute; z-index:1; pointer-events:none;
  filter:drop-shadow(0 18px 26px rgba(20,97,143,.22)); }
/* 人物＋テキストを1つの枠に。枠の下辺＝CTAボタンの上辺（幅が変わっても人物下端が必ずボタンに接する） */
.hero__stage{ position:relative; width:100%; z-index:1; }

.hero__inner{ position:relative; z-index:3;
  padding-top:clamp(30px,4vw,58px); padding-bottom:clamp(16px,2.2vw,30px);
  display:flex; flex-direction:column; align-items:flex-start; }
.hero__copy{ position:relative; z-index:2; width:100%; padding-bottom:1.8em; }

.hero__title{ margin-top:0; }
.hero__title .t-sub{ display:block; font-family:var(--ff-disp); font-weight:600;
  font-size:clamp(1.1rem,3vw,1.55rem); line-height:1.45; color:var(--ink-soft); letter-spacing:.04em; }
.hero__title .t-cat{ display:inline-block; font-family:var(--ff-en); font-weight:500;
  font-size:clamp(.82rem,2vw,1rem); letter-spacing:.16em; color:var(--blue); margin:.24em 0 .3em;
  padding-bottom:.18em; border-bottom:2px solid var(--orange); }
.hero__title .t-main{ display:block; font-family:var(--ff-disp); font-weight:900;
  font-size:clamp(2.4rem,6.4vw,4.2rem); line-height:1.22; letter-spacing:.005em; color:var(--ink); white-space:nowrap; }
.hero__rule{ display:block; width:118px; height:3px; border-radius:3px; background:var(--orange); margin-top:1.1em; }
.hero__lead{ margin-top:1.3em; font-size:clamp(1rem,2.4vw,1.12rem); color:var(--ink-soft); line-height:2.05; }

.hero__meta{ list-style:none; margin-top:1.7em; display:flex; flex-wrap:wrap; gap:.7em 1.5em; }
.hero__meta li{ display:inline-flex; align-items:center; gap:.5em; font-size:.86rem; color:var(--ink-soft); }
.hero__meta svg{ width:1.05em; height:1.05em; color:var(--blue); flex:none; }

.hero__actions{ margin-top:0; display:flex; flex-direction:column; align-items:flex-start; gap:1.1em; width:100%; }
.offer-pill{
  display:inline-flex; align-items:center; gap:.7em; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--orange-l); border-radius:999px;
  padding:.6em 1.2em; box-shadow:var(--shadow-s); font-size:.9rem; color:var(--ink);
}
.offer-pill .tag{ font-family:var(--ff-body); font-weight:700; font-size:.74rem; color:#fff;
  background:var(--orange-m); padding:.25em .8em; border-radius:999px; letter-spacing:.04em; }
.offer-pill b{ color:var(--orange-d); }
.pcut{ font-size:.84em; font-weight:700; letter-spacing:0; white-space:nowrap; }
/* 改行出し分け補助：br-sp=モバイル(〜864)のみ / br-xs=スマホ(〜480)のみ / br-pc=PC(865〜)のみ */
.br-sp{ display:none; }
.br-xs{ display:none; }
.br-mini{ display:none; }
.br-pc{ display:inline; }
/* 単語・語句を途中で割らせない補助 */
.nb{ white-space:nowrap; }
/* 本文は最終行の泣き別れ（1〜2文字だけ次行）を自動で抑制、見出しは各行を均等化 */
p, li, .qa__a div, .qa__q{ text-wrap:pretty; }
.h-sec, .edu__split .tx h3, .story__tx h3, .final__h, .final__sub, .stat__l{ text-wrap:balance; }

/* デスクトップ（865px〜）：人物を右に大きく、テキスト左 */
@media(min-width:865px){
  /* 人物を中央枠(1120)から解放し、ビューポート基準で画面幅に合わせて大きく表示 */
  .hero__stage{ position:static; }
  .hero__inner{ position:static; }
  .hero__bg{ z-index:0; }
  .hero__copy{ position:relative; z-index:2; max-width:38%; }
  .hero__actions{ position:relative; z-index:2; max-width:38%; }
  /* 画像が必ず収まりリボンに接地するための最小高さ（頭切れ防止＋接地保証） */
  .hero{ min-height:clamp(880px, 71vw, 1020px); }
  /* 幅1250pxで固定。右位置は1558px以下は-31px（今のまま）、それより広い画面は中央寄りの理想構図へ戻す。
     縦は下端固定（bottom:0）＝ヒーロー下端＝緑バナー上端に必ず接地 */
  .hero__person{ width:1190px; max-width:none; right:max(-31px, calc(50% - 810px)); left:auto; top:auto; bottom:0; transform:none; z-index:1; }
}
/* PCではカルーセルを本文カラムより広げる（比率はそのまま／右の人物には重ねない） */
@media(min-width:1300px){
  .cs{ width:min(136%, 580px); }
}
/* 広い画面（1300px〜MAX）：テロップが頭打ちで小さく見えるので一段大きくする */
@media(min-width:1300px){
  .hero__copy{ max-width:44%; }
  .hero__actions{ max-width:44%; }
  .hero__title .t-sub{ font-size:1.9rem; }
  .hero__title .t-cat{ font-size:1.08rem; }
  .hero__title .t-main{ font-size:5rem; }
  .hero__lead{ font-size:1.34rem; line-height:2; }
  .hero__meta li{ font-size:1rem; }
  .offer-pill{ font-size:1rem; }
}
/* モバイル：人物は右に大きく（右へブリード）、ボタンは下に全幅 */
@media(max-width:864px){
  .br-sp{ display:inline; }
  .br-pc{ display:none; }
  .hero__inner{ padding-top:24px; }
  .hero__bg{ width:80%; height:48%; }
  /* 人物の下端＝stage下端＝CTAボタン上端。どの幅でも必ず接する */
  .hero__person{ width:128%; max-width:none; right:-34%; top:auto; bottom:0; transform:translateX(-30px); }
  .hero__title{ max-width:54%; }
  /* スマホではメインコピーを一段大きく（PCの指定より約30%大きい） */
  .hero__title .t-main{ font-size:clamp(1.95rem,8.05vw,3.9rem); white-space:nowrap; }
  .hero__rule{ width:84px; }
  .hero__lead{ max-width:56%; }
  .hero__meta{ max-width:none; margin-top:1.5em; }
  .hero__meta .br{ flex-basis:100%; }   /* 最寄り駅を必ず2段目に（モバイル） */
  .hero__actions{ margin-top:0; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .btn--lg{ font-size:1.05rem; padding:1.05em 1.4em; }

  .offer-pill{ justify-content:center; text-align:center; }
}
@media(max-width:430px){
  .hero__title{ max-width:56%; }
  .hero__lead{ max-width:58%; }
  .hero__person{ width:150%; right:-46%; top:auto; bottom:0; }
}
/* スマホ幅（〜480）だけで効かせる細かな改行。タブレット幅では自然な折り返しに任せる */
@media(max-width:480px){ .br-xs{ display:inline; } }
/* 「——その感覚自体は、間違っていません。」が収まらない〜399pxでだけ、意味の切れ目でクリーンに改行 */
@media(max-width:399px){ .br-mini{ display:inline; } }

.ribbon{ background:var(--blue-dd); color:#fff; position:relative; z-index:3; }
.ribbon__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.15em 1em; padding:11px var(--gut); text-align:center; }
.ribbon b{ font-family:var(--ff-disp); font-weight:700;
  font-size:clamp(.96rem,2.7vw,1.14rem); letter-spacing:.02em; line-height:1.6; }
.ribbon b em{ font-style:normal; color:var(--orange-l); white-space:nowrap; }
.ribbon .tag{ display:inline-block; font-family:var(--ff-body); font-weight:700; font-size:.72rem;
  color:#fff; background:var(--orange-m); padding:.25em .85em; border-radius:999px;
  margin-right:.65em; letter-spacing:.04em; vertical-align:.12em; }
.ribbon span{ font-size:.76rem; opacity:.82; letter-spacing:.03em; }
@media(max-width:560px){ .ribbon__in{ padding:10px var(--gut); gap:.1em .7em; } }

/* ============================================================
   ② 教育（カイロとは）
   ============================================================ */
.edu{ background:var(--paper); }
.edu__lead{ max-width:720px; margin:2.2em auto 0; text-align:center; }
.edu__lead .big{ font-family:var(--ff-disp); font-weight:700; font-size:clamp(1.3rem,3.8vw,1.8rem);
  color:var(--blue-d); line-height:1.6; }
.edu__lead p{ margin-top:1em; color:var(--ink-soft); }

/* 「すぐ戻る」誤解→本来 の対比カード */
.compare{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,3vw,30px); align-items:center;
  max-width:900px; margin:3em auto 0; }
.compare__card{ background:var(--card); border-radius:22px; padding:1.8em 1.6em; box-shadow:var(--shadow-s);
  border:1px solid var(--line); }
.compare__card .ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:1em; }
.compare__card .ic svg{ width:26px; height:26px; }
.compare__card h4{ font-family:var(--ff-disp); font-size:1.15rem; margin-bottom:.4em; }
.compare__card p{ font-size:.92rem; color:var(--ink-soft); }
.compare__card.miss .ic{ background:#fbeee2; color:var(--orange-d); }
.compare__card.miss h4{ color:var(--orange-d); }
.compare__card.real{ border-color:#d3e7bb; background:var(--lime-l); }
.compare__card.real .ic{ background:var(--lime); color:#fff; }
.compare__card.real h4{ color:var(--lime-dd); }
.compare__arrow{ color:var(--ink-faint); display:grid; place-items:center; }
.compare__arrow svg{ width:34px; height:34px; }
@media(max-width:680px){ .compare{ grid-template-columns:1fr; }
  .compare__arrow{ transform:rotate(90deg); } }

/* 写真＋本文の交互ブロック */
.edu__split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,56px); align-items:center;
  max-width:1000px; margin:3.4em auto 0; }
.edu__split.rev{ direction:rtl; } .edu__split.rev>*{ direction:ltr; }
.edu__split .ph{ border-radius:24px; overflow:hidden; box-shadow:var(--shadow-m); aspect-ratio:4/3; position:relative; }
.edu__split .ph img{ width:100%; height:100%; object-fit:cover; }
.edu__split .ph::after{ content:""; position:absolute; inset:0; border-radius:24px; border:1px solid rgba(255,255,255,.4); }
.edu__split .tx h3{ font-family:var(--ff-disp); font-weight:700; font-size:clamp(1.25rem,3.4vw,1.7rem);
  line-height:1.55; color:var(--ink); }
.edu__split .tx h3 .g{ color:var(--blue-d); }
.edu__split .tx p{ margin-top:1.1em; color:var(--ink-soft); font-size:clamp(.96rem,2.2vw,1.04rem); }
.edu__split .tx p b{ color:var(--ink); }
@media(max-width:680px){ .edu__split{ grid-template-columns:1fr; } }
/* 対比見出しの2文目「——その感覚自体は、間違っていません。」を420〜476pxで1行に収めるため狭幅で微縮小 */
@media(max-width:480px){ .edu__split .tx h3{ font-size:1.1rem; } }

/* 数字カード */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.4vw,22px); max-width:920px; margin:3.4em auto 0; }
.stat{ background:var(--card); border-radius:22px; padding:2em 1.4em 1.7em; text-align:center;
  box-shadow:var(--shadow-s); border:1px solid var(--line); transition:transform .2s, box-shadow .2s; }
.stat:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); }
.stat__ic{ width:58px; height:58px; margin:0 auto .9em; border-radius:50%;
  background:var(--blue-l); color:var(--blue-d); display:grid; place-items:center; }
.stat__ic svg{ width:28px; height:28px; }
.stat__n{ font-family:var(--ff-disp); font-weight:900; font-size:clamp(2.1rem,6vw,2.8rem); line-height:1; color:var(--blue-d); }
.stat__n small{ font-size:.42em; font-weight:700; margin-left:.1em; }
.stat__l{ font-size:.86rem; color:var(--ink-soft); margin-top:.7em; }
@media(max-width:620px){
  .stats{ grid-template-columns:repeat(3,1fr); gap:8px; max-width:none; }
  .stat{ display:block; text-align:center; padding:1.2em .5em 1.05em; border-radius:16px; }
  .stat__ic{ width:42px; height:42px; margin:0 auto .55em; }
  .stat__ic svg{ width:21px; height:21px; }
  .stat__n{ font-size:clamp(1.25rem,5.6vw,1.7rem); }
  .stat__n small{ font-size:.5em; }
  .stat__l{ font-size:.66rem; line-height:1.45; margin-top:.45em; letter-spacing:0; }
}

.edu__why{ max-width:740px; margin:3.6em auto 0; }
.edu__why .qh{ font-family:var(--ff-disp); font-weight:700; font-size:clamp(1.3rem,4.2vw,2rem);
  color:var(--ink); text-align:center; line-height:1.5; }
.edu__why .qh .u{ background:linear-gradient(transparent 58%, var(--orange-l) 58%); }
.edu__why p{ margin-top:1.3em; color:var(--ink-soft); }
.edu__why p b{ color:var(--ink); }
/* 「日本には〜国家資格が無いから。」は一塊で改行させない。狭幅では1行に収まるよう微縮小 */
.edu__why .oneline{ white-space:nowrap; }
@media(max-width:480px){ .edu__why .oneline{ font-size:.94rem; } }
/* さらに狭く収まらない幅では、横スクロールを防ぐため通常折り返しに戻す */
@media(max-width:408px){ .edu__why .oneline{ white-space:normal; font-size:inherit; } }
.edu__why .edu__close{ font-family:var(--ff-disp); font-weight:700; text-align:center;
  font-size:clamp(1.15rem,3.2vw,1.5rem); color:var(--blue-d); margin-top:3em; line-height:1.6; }

/* ============================================================
   ③ 実績
   ============================================================ */
.achieve{ background:linear-gradient(180deg, var(--sky) 0%, var(--paper) 30%); }
.story{ display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(22px,4vw,50px); align-items:center;
  background:var(--card); border-radius:30px; box-shadow:var(--shadow-m); padding:clamp(20px,3vw,34px);
  margin-top:2.6em; }
.story__img{ border-radius:20px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-s); }
.story__img img{ width:100%; height:100%; object-fit:cover; }
.story__tx h3{ font-family:var(--ff-disp); font-weight:700; font-size:clamp(1.3rem,3.4vw,1.7rem);
  color:var(--ink); line-height:1.55; }
.story__tx p{ margin-top:1.05em; color:var(--ink-soft); }
.story__tx p b{ color:var(--ink); }
.conditions{ display:flex; flex-wrap:wrap; gap:.55em; margin:1.3em 0; }
.conditions .c{ font-size:.86rem; font-weight:700; color:var(--blue-d); background:var(--blue-l);
  border:1px solid var(--sky-2); border-radius:999px; padding:.4em 1em; }
@media(max-width:720px){ .story{ grid-template-columns:1fr; } }

.cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:1.8em; }
.case{ background:var(--card); border-radius:20px; padding:1.6em 1.7em; box-shadow:var(--shadow-s);
  border:1px solid var(--line); position:relative; }
.case::before{ content:""; position:absolute; left:0; top:1.7em; width:4px; height:1.6em;
  background:var(--orange); border-radius:0 3px 3px 0; }
.case .ini{ font-family:var(--ff-disp); font-weight:700; color:var(--blue-d); font-size:1.02rem; }
.case p{ margin-top:.6em; font-size:.94rem; color:var(--ink-soft); }
@media(max-width:620px){ .cases{ grid-template-columns:1fr; } }
.disc{ font-size:.78rem; color:var(--ink-soft); background:var(--paper-2);
  display:inline-block; padding:.35em 1.1em; border-radius:999px; }

/* 口コミ */
.voices{ margin-top:3.8em; }
.vgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:1.8em; }
.voice{ background:var(--card); border-radius:20px; padding:1.7em; box-shadow:var(--shadow-s); border:1px solid var(--line); }
.voice__top{ display:flex; align-items:center; gap:.6em; margin-bottom:.9em; }
.voice__stars{ display:flex; gap:1px; color:var(--orange); }
.voice__stars svg{ width:16px; height:16px; }
.voice__g{ margin-left:auto; display:inline-flex; align-items:center; gap:.4em; font-size:.74rem; color:var(--ink-soft); }
.voice__g .gg{ width:16px; height:16px; }
.voice p{ font-size:.92rem; color:var(--ink); line-height:1.85; }
.voice .who{ margin-top:.9em; font-size:.82rem; color:var(--ink-soft); font-family:var(--ff-disp); }
.voices__more{ text-align:center; margin-top:2em; }
@media(max-width:620px){ .vgrid{ grid-template-columns:1fr; } }

/* ============================================================
   ④ プロフィール（明るい面）
   ============================================================ */
.profile{ background:linear-gradient(180deg, var(--paper) 0%, var(--sky) 100%); overflow:hidden; }
.profile__in{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:center; }
.profile__photo{ position:relative; width:min(360px,82%); aspect-ratio:1; margin-inline:auto; }
.profile__photo .circle{ width:100%; height:100%; border-radius:50%; overflow:hidden;
  box-shadow:var(--shadow-m); border:6px solid var(--card); }
.profile__photo .circle img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.profile__photo .ring{ position:absolute; inset:-14px; border-radius:50%; border:1.5px dashed var(--sky-2); }
.profile__photo .tagname{ position:absolute; right:-6%; bottom:8%; background:var(--blue); color:#fff;
  font-family:var(--ff-en); font-size:.74rem; letter-spacing:.12em; padding:.5em 1.1em; border-radius:999px; box-shadow:var(--shadow-s); }
.profile__name .en{ font-family:var(--ff-en); font-style:italic; font-size:.85rem; color:var(--blue-d); letter-spacing:.08em; }
.profile__name .jp{ font-family:var(--ff-disp); font-weight:900; font-size:clamp(1.8rem,5vw,2.4rem); margin-top:.15em; }
.profile__name .jp ruby rt{ font-size:.42em; color:var(--blue-d); font-weight:700; }
.profile__role{ font-size:.9rem; color:var(--ink-soft); margin-top:.5em; }
.profile__bio{ margin-top:1.5em; color:var(--ink-soft); }
.profile__bio p{ margin-top:1em; }
.profile__quote{ margin-top:1.6em; padding-left:1.1em; border-left:4px solid var(--orange);
  font-family:var(--ff-disp); font-weight:700; font-size:clamp(1.1rem,3vw,1.4rem); color:var(--blue-dd); line-height:1.6; }
@media(max-width:720px){ .profile__in{ grid-template-columns:1fr; text-align:center; }
  .profile__quote{ text-align:left; } .profile__photo{ margin-bottom:1.4em; } }

/* ============================================================
   ⑤ Q&A
   ============================================================ */
.qa{ background:var(--paper); }
.qa__list{ max-width:760px; margin:2.6em auto 0; display:flex; flex-direction:column; gap:14px; }
.qa__item{ background:var(--card); border-radius:18px; box-shadow:var(--shadow-s); overflow:hidden; border:1px solid var(--line); transition:box-shadow .2s; }
.qa__item.open{ box-shadow:var(--shadow-m); }
.qa__q{ display:flex; align-items:center; gap:.9em; width:100%; text-align:left; cursor:pointer; background:none; border:0;
  padding:1.25em 1.5em; font-family:var(--ff-body); font-weight:700; font-size:clamp(1rem,2.4vw,1.08rem); color:var(--ink); }
.qa__q .q{ flex:none; width:1.9em; height:1.9em; border-radius:10px; background:var(--blue-l); color:var(--blue-d);
  font-family:var(--ff-disp); display:grid; place-items:center; font-size:.85rem; }
.qa__q .tog{ margin-left:auto; flex:none; width:1.3em; height:1.3em; position:relative; transition:.3s; }
.qa__q .tog::before,.qa__q .tog::after{ content:""; position:absolute; inset:50% 0 auto 0; height:2.5px; background:var(--blue); border-radius:2px; transform:translateY(-50%); }
.qa__q .tog::after{ transform:translateY(-50%) rotate(90deg); transition:.3s; }
.qa__item.open .tog::after{ transform:translateY(-50%) rotate(0); }
.qa__a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.qa__a div{ padding:0 1.5em 1.4em 4em; color:var(--ink-soft); font-size:.95rem; }
.qa__a b{ color:var(--orange-d); }

/* ============================================================
   ⑥ 思い
   ============================================================ */
.feel{ background:var(--paper); overflow:hidden; }
.feel__in{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(26px,5vw,60px); align-items:center; }
.feel__tx p{ margin-top:1.2em; font-size:clamp(.98rem,2.3vw,1.06rem); color:var(--ink-soft); }
.feel__tx .last{ font-family:var(--ff-disp); font-weight:700; color:var(--blue-dd);
  font-size:clamp(1.2rem,3.4vw,1.6rem); line-height:1.6; margin-top:1.5em; }
.feel__ph{ position:relative; }
.feel__ph .frame{ border-radius:30px 30px 30px 90px; overflow:hidden; box-shadow:var(--shadow-m); aspect-ratio:3/4; }
.feel__ph .frame img{ width:100%; height:100%; object-fit:cover; }
.feel__ph .blob{ position:absolute; z-index:-1; inset:-7% -7% auto auto; width:55%; aspect-ratio:1;
  background:var(--blue-l); opacity:.9; border-radius:46% 54% 43% 57%/55% 48% 52% 45%; }
@media(max-width:720px){ .feel__in{ grid-template-columns:1fr; } .feel__ph{ max-width:380px; margin-inline:auto; } }

/* ============================================================
   ⑦ アクセス
   ============================================================ */
.access{ background:linear-gradient(180deg, var(--sky) 0%, var(--paper) 36%); }
.access__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,4vw,44px); margin-top:2.6em; align-items:start; }
.access__map{ border-radius:24px; overflow:hidden; box-shadow:var(--shadow-m); aspect-ratio:4/3; border:6px solid var(--card); }
.access__map iframe{ width:100%; height:100%; border:0; display:block; }
.access__more{ text-align:center; margin-top:1.2em; }
.info{ list-style:none; background:var(--card); border-radius:24px; padding:.6em 1.6em; box-shadow:var(--shadow-s); border:1px solid var(--line); }
.info li{ display:grid; grid-template-columns:6.5em 1fr; gap:1em; padding:1em 0; border-bottom:1px solid var(--line); align-items:baseline; }
.info li:last-child{ border-bottom:0; }
.info .k{ font-family:var(--ff-disp); font-weight:700; color:var(--blue-d); font-size:.92rem; }
.info .v{ color:var(--ink); font-size:.95rem; }
.info .v a{ color:var(--orange-d); font-weight:700; }
@media(max-width:760px){ .access__grid{ grid-template-columns:1fr; } }

/* ============================================================
   ⑧ 最後のCTA
   ============================================================ */
.final{ position:relative; background:linear-gradient(152deg, #2287bd 0%, var(--blue-dd) 100%);
  color:#fff; text-align:center; overflow:hidden; }
.final::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:60px;
  background:var(--paper); border-radius:0 0 50% 50%/0 0 100% 100%; }
/* 最終CTAの雲 */
.final .cl-1{ width:min(74vw,820px); aspect-ratio:2.3/1; top:-6%;  left:-14%; }
.final .cl-2{ width:min(52vw,600px); aspect-ratio:2.4/1; top:38%;  right:-10%; animation-duration:66s; animation-direction:alternate-reverse; }
.final .cl-3{ width:min(40vw,470px); aspect-ratio:2.1/1; bottom:-8%; left:22%; animation-duration:78s; }
.final__in{ position:relative; z-index:2; padding-top:2em; }
.final__h{ font-family:var(--ff-disp); font-weight:900; font-size:clamp(1.7rem,5.2vw,2.8rem); line-height:1.5; }
.final__h .u{ background:linear-gradient(transparent 56%, rgba(217,127,22,.95) 56%); padding-inline:.12em; }
.final__sub{ margin-top:1.1em; color:rgba(255,255,255,.9); }
.final__offer{ display:inline-block; margin-top:1.8em; background:rgba(255,255,255,.12);
  border:1px solid rgba(248,227,198,.5); border-radius:16px; padding:1em 1.8em; font-family:var(--ff-disp); }
.final__offer .tag{ display:inline-block; color:#fff; font-family:var(--ff-body); font-weight:700;
  font-size:.72rem; padding:.3em .9em; border-radius:999px; margin-right:.6em; letter-spacing:.04em; background:var(--orange-m); }
.final__offer b{ color:#fff; font-size:1.15rem; }
.final .btn{ margin-top:2em; }
.final .cta-note{ color:rgba(255,255,255,.85); }
.final .cta-note b{ color:var(--orange-l); }

/* フッター */
.ft{ background:var(--ink); color:rgba(255,255,255,.66); padding:52px var(--gut) 110px; text-align:center; }
.ft b{ font-family:var(--ff-en); font-weight:600; color:#fff; font-size:1.2rem; letter-spacing:.02em; }
.ft__info{ font-size:.82rem; margin-top:1em; line-height:2.1; }
.ft__copy{ font-size:.72rem; margin-top:1.6em; opacity:.6; }

/* 下部固定バー */
.bar{ position:fixed; inset:auto 0 0 0; z-index:55; background:rgba(20,97,143,.97); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px clamp(14px,4vw,30px);
  transform:translateY(115%); transition:transform .4s ease; box-shadow:0 -8px 24px rgba(0,0,0,.16); }
.bar.show{ transform:translateY(0); }
.bar__tx{ color:#fff; line-height:1.4; }
.bar__tx b{ font-family:var(--ff-disp); font-weight:700; display:block; font-size:.95rem; color:var(--orange-l); }
.bar__tx small{ font-size:.7rem; opacity:.85; }
.bar .btn{ flex:none; padding:.75em 1.5em; font-size:.98rem; box-shadow:0 4px 0 var(--orange-d); --bg:var(--orange-m); --bgd:var(--orange-d); }
@media(max-width:520px){ .bar__tx small{ display:none; } .bar .btn{ padding:.75em 1.2em; } }

/* reveal */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.rv.in{ opacity:1; transform:none; }
.d1{ transition-delay:.08s; } .d2{ transition-delay:.16s; } .d3{ transition-delay:.24s; } .d4{ transition-delay:.32s; }
@media(prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } }