@charset "UTF-8";

/* =========================================================
   bicaree TOP  top.css  （TOPページ専用。top.js と対。旧: /home/style.css → assets/css/style.css）
   ※下層ページ(privacy/terms)は別ファイル： assets/css/common.css ＋ lower.css
   方針: 1440px 基準でピクセルパーフェクト → リキッド(<1440 等比縮小)＋高さ連動
   黒背景 = bk_bg.png / reasons = 濃いオレンジ＋上下尖り(clip-path)
   ========================================================= */

/* ===== デザイントークン（:root）は common.css に移設（TOP/下層 共通）。common.css を top.css より前に読込 ===== */

/* ===== ベース ===== */
/* ★リキッド：1rem を 幅(1440基準) と 高さ(900基準) の小さい方で決定＝1440×900 の合成が
   ビューポート内に必ず収まる（縦幅が狭い時は Hero/Case の CTA 等が切れないよう縦にも縮小）。
   ≥1440幅 かつ ≥900高 は 1rem=10px 固定＝1440ピクセルパーフェクト保持。
   SP専用デザインは将来 @media で font-size を 375基準等に上書き予定。 */
html{
  -webkit-text-size-adjust:100%;
  /* 縦スクロールバーの出入りで幅が変わらないよう常時ガター確保（“幅変更で全幅帯が飛ぶ”対策の要） */
  scrollbar-gutter: stable;
  font-size:min(10px, calc(100vw / 144), calc(100vh / 90));
}
body{
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--c-black);
  line-height: 1.7;
  background: var(--c-bk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* 固定背景（黒い背景部分は全てこの bk_bg を見せる） */
.site-bk{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--c-bk) url("../img/common/bk_bg.png") center center / cover no-repeat;
}
img,
svg{
  display:block;
  max-width:none;
  height:auto;
}
a{
  color:inherit;
  text-decoration:none;
}
ul,
ol{
  list-style:none;
  margin:0;
  padding:0;
}
button{
  font:inherit;
  color:inherit;
  cursor:pointer;
  background:none;
  border:0;
}

/* フォントユーティリティ */
.en{
  font-family: var(--f-en);
  font-weight:400;
  line-height:1;
}
.num{
  font-family: var(--f-num);
  font-weight:700;
}
.bold{
  font-weight:700;
}
.black{
  font-weight:900;
}
.br-sp{
  display:none;
}   /* SP専用の改行（PC=非表示。SPで display:inline に） */

/* ===== ページ枠：144rem（≥1440=1440px固定・中央／<1440=100vwに追従して等比縮小） ===== */
.home{
  width: 144rem;
  margin-inline: auto;
  position: relative;
}

/* ===== ボタン（CTA / LINE） ===== */
.btn-line{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  background: var(--c-cta);
  color: var(--c-cream);
  font-weight:700;
  border-radius:0.8rem;
  padding:1.8rem 5.6rem;
  line-height:1.4;
  transition: background-color .25s ease;   /* ホバーは色変化のみ（浮き上がりなし） */
}
.btn-line:hover{
  background: var(--c-black);   /* ホバーで貼り付けた色（ダーク）へ。自然にtransition */
}

/* =========================================================
   1. ヒーロー（1440 × 900・px絶対配置でピクセルパーフェクト）
   ========================================================= */
.hero{
  position: relative;
  width: 144rem;
  height: 100vh;
  overflow-x: visible;
  /* 縦方向だけクリップ（緑スプラッシュ等が下にはみ出さない）／横のリード英字ブリードは維持 */
  clip-path: inset(0 -100vw);
}
/* 中身も 100vh。上端基準の要素はそのまま、人物/スプラッシュは下端基準で配置 */
.fv-inner{
  position:absolute;
  left:0;
  top:0;
  width:144rem;
  height:100vh;
}
.fv-inner > *{
  position:absolute;
}

/* 背景：斜めリード英字（全幅マーキー）。器 .fv-lead を rotate(8deg) で傾け、
   中の水平マーキー(.band__rail>.marquee__track＝top.jsが複製)が斜めに流れる＝斜めのままシームレス。
   回転で角が欠けないよう幅は全幅超(vw)・帯高は行高ぶん。縦中央=top、左右中央=left50%+translateX。 */
.fv-lead{
  left:50%;
  top:20rem;   /* 斜め帯の縦中央（旧SVGの縦位置に合わせて実測調整） */
  width:170vw;   /* 回転しても画面幅を覆う全幅超 */
  height:20rem;   /* テキスト行帯（align-items:centerで縦中央・上下に余白） */
  transform:translate(-50%, -50%) rotate(8deg);
  transform-origin:center;
  z-index:1;
  opacity:.95;
  pointer-events:none;
}
.fv-lead__rail{
  align-items:center;
}   /* .band__rail(absolute inset0 overflow hidden)を継承 */
.fv-lead__txt{
  font-family:var(--f-en);
  font-weight:400;
  color:var(--c-marquee);
  font-size:13rem;
  line-height:1;
  white-space:nowrap;
  letter-spacing:-0.01em;
  padding-right:.3em;   /* 反復コピー間の空き */
}
/* 緑の飛沫（人物背後）：人物に沿った下端基準。
   表示実寸 924×730（natural 1638×1294）。design で人物bottom(859)より187px下 → 人物bottom=0 なら bottom:-187 */
.fv-splash{
  left:56.8rem;
  top:auto;
  bottom:-18.7rem;
  width:92.4rem;
  z-index:2;
}
/* 人物：2人を重ねる。.fv-person は右側の人物エリア（下端＝ビューポート下端） */
.fv-person{
  left:56rem;
  top:auto;
  bottom:0;
  width:88rem;
  height:90rem;
  z-index:3;
}
/* 人物の重ね（PC・SP共通）。幅・位置は .fv-trio の幅に対する%。同じ大きさで大きく重ね、顔だけ少しずつずらす。
   右の人ほど手前（顔は左上向きなので、手前の人の透明な左側が奥の人に重なり、奥の顔が左にのぞく） */
.fv-trio{
  position:absolute;
  inset:0;
}
.fv-trio__p{
  position:absolute;
  bottom:0;
  height:auto;
}
/* 奥の男性は小さめ・少し上。浮いた下端が見えないよう下側をフェードで消す */
.fv-trio__p--m1{
  left:2%;
  width:64%;
  bottom:12%;
  z-index:1;
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 92%);
          mask-image:linear-gradient(to bottom, #000 62%, transparent 92%);
}
/* 手前の女性は大きく、右へずらす */
.fv-trio__p--w { left:30%; width:84%; z-index:2; }
/* 登場：女性が先に出て、次に男性が女性の後ろから（右から）スライドして出る */
.fv-trio__p--w{ transform-origin:50% 100%; animation:fv-person-in .4s cubic-bezier(.34,1.56,.64,1) both; }
.fv-trio__p--m1{ transform-origin:50% 100%; animation:fv-person-slide .4s cubic-bezier(.34,1.56,.64,1) .18s both; }
@keyframes fv-person-in{
  from{ opacity:0; transform:scale(.88); }
  to{ opacity:1; transform:none; }
}
@keyframes fv-person-slide{
  from{ opacity:0; transform:translateX(24%) scale(.92); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .fv-trio__p{ animation:none !important; }
}
/* ロゴ */
.fv-logo{
  left:2.4rem;
  top:2.4rem;
  width:14.1rem;
  z-index:6;
}

/* ロゴ下：求人企業様向けページ(/business/)への導線。白地＋オレンジ枠のピル */
.fv-biz{
  left:2.4rem;
  top:7.2rem;
  z-index:6;
}
/* 寸法はロゴ幅（PC 141px）に収まるよう font-size から逆算。padding と gap は em にして
   font-size を触れば全体が相似で伸縮するようにしてある（実測 140.8px） */
.fv-biz__link{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  padding:0.7em 1.2em;
  border:2px solid var(--c-orange);
  border-radius:999px;
  background:var(--c-white);
  color:var(--c-orange);
  font-size:0.95rem;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transition:background-color .25s ease, color .25s ease;
}
/* 右端の山形（画像を足さずCSSで描く。色は currentColor でホバー反転に追従） */
.fv-biz__link::after{
  content:"";
  flex:none;
  width:0.5em;
  height:0.5em;
  border-top:0.12em solid currentColor;
  border-right:0.12em solid currentColor;
  transform:translateX(-0.1em) rotate(45deg);
  transition:transform .25s ease;
}
.fv-biz__link:hover{
  background:var(--c-orange);
  color:var(--c-white);
}
/* ホバーで山形だけ右へ送る（rotate は base と同値で維持＝transform を上書きするため再指定） */
.fv-biz__link:hover::after{
  transform:translateX(0.25em) rotate(45deg);
}

/* 右上サブコピー */
.fv-sub{
  right:3.2rem;
  top:2.4rem;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.4rem;
  color:var(--c-cream);
  text-align:right;
}
.fv-sub__lead{
  font-size:1.4rem;
  font-weight:500;
  letter-spacing:0.112rem;
}
.fv-sub__main{
  display:flex;
  align-items:center;
  gap:1.4rem;
  font-size:2.4rem;
  font-weight:700;
}
.fv-sub__x{
  color:var(--c-yellow);
}

/* メインコピー＋CTA（垂直中央：auto高さのまま中央寄せは top:50% + translateY(-50%)） */
.fv-copy{
  left:7.9rem;
  top:50%;
  transform:translateY(-50%);
  width:52.5rem;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3.6rem;
}
/* メインコピー：2コマ（fv_maintext01/02）を重ね、口だけ開閉する2コマ切替 */
/* h1。ress は margin しか潰さないので、UA既定の font-size:2em / font-weight:bold を戻す。
   SP の width は 26.2em＝自身の font-size 基準なので、2em のままだと幅が倍になる */
.fv-copy__img{
  position:relative;
  width:52.5rem;
  aspect-ratio:525 / 399;
  font-size:inherit;
  font-weight:inherit;
}
.fv-copy__frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;   /* transitionなし＝パッと切替 */
}
.fv-copy__frame.is-active{
  opacity:1;
}
.fv-copy__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.6rem;
  width:100%;
}

/* 右下の実績バッジ3つ（PCのみ。人物より手前）。文字は画像の幅に対する cqw で置く。
   座標は画像（1392×1294）上のリボン・円の中心を % にしたもの */
.fv-awards{
  right:3rem;
  bottom:17rem;
  width:38rem;
  z-index:4;
  container-type:inline-size;
  filter:drop-shadow(0 1rem 2.4rem rgba(60,10,10,.35));
}
/* 実績の注記。PCはボタンの下、SPはバッジと見出しの間 */
.fv-awards__note{
  margin-top:1.4rem;
  text-align:center;
  color:#fff;
  font-size:1.1rem;
  line-height:1.5;
}
.fv-awards-sp__note{
  display:none;
}
.fv-awards__img{
  display:block;
  width:100%;
  height:auto;
}
/* 見出し（dt）はリボンの中心、数字（dd）はリボンの下から円の下端までの中心に置く */
.fv-award{
  position:absolute;
  inset:0;
  margin:0;
}
.fv-award--top{ --x:49.6%; --rib:8.3%; --mid:24.6%; }
.fv-award--left{ --x:24.1%; --rib:58%; --mid:76.6%; }
.fv-award--right{ --x:75.8%; --rib:58%; --mid:75.8%; }
.fv-award dt,
.fv-award dd{
  position:absolute;
  left:var(--x);
  transform:translate(-50%, -50%);
  text-align:center;
  white-space:nowrap;
}
/* リボンの見出し */
.fv-award dt{
  top:var(--rib);
  color:#fff;
  font-size:3.9cqw;
  font-weight:900;
  line-height:1;
  letter-spacing:.08em;
  text-shadow:0 .2cqw .4cqw rgba(60,30,0,.35);
}
/* 円の中 */
.fv-award dd{
  top:var(--mid);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6cqw;
  margin:0;
  color:var(--c-ink);
  font-weight:900;
  line-height:1;
}
.fv-award dd small{
  font-size:4.2cqw;
  letter-spacing:.04em;
}
.fv-award dd span{
  color:var(--c-red);
  font-size:4.4cqw;
}
.fv-award dd b{
  font-family:var(--f-num);
  font-size:4.2em;
  font-weight:700;
  letter-spacing:-.02em;
}
.fv-award--top dd span{ font-size:3.8cqw; }
/* 下の2つは数字の下に補足があるので、数字を少し小さくする */
.fv-award--left dd b,
.fv-award--right dd b{ font-size:4em; }
/* 2行に分けて、「平均」「年収UP」と同じくらいの大きさにする */
.fv-award dd .fv-award__sub{ font-size:3.8cqw; line-height:1.3; }
.fv-award--top dd b{ font-size:2.8em; }

/* SP 用の横1列のバッジ（PC では出さない） */
.fv-awards-sp{
  display:none;
}

/* TOEIC 行 */
.fv-toeic{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:0.4rem;
  color:var(--c-cream);
  font-weight:700;
  font-size:2.2rem;
  line-height:1.5;
  text-align:center;
  white-space:nowrap;
}
.fv-toeic__deco{
  position:absolute;
  left:-3.5rem;
  top:-2rem;
  width:6.4rem;
  pointer-events:none;
}
.fv-toeic__n{
  font-family:var(--f-figtree);
  font-weight:700;
  color:var(--c-yellow);
  font-size:3.6rem;
  line-height:1;
}
.fv-toeic__pt{
  color:var(--c-yellow);
}

/* 星付き注記 */
.fv-starnote{
  display:flex;
  align-items:center;
  gap:0.6rem;
  color:var(--c-cream);
  font-weight:700;
  font-size:1.6rem;
}
.fv-starnote__n{
  font-family:var(--f-num);
  font-size:2rem;
  color:var(--c-cream);
}
.fv-star{
  width:1.6rem;
  flex:none;
}

/* CTAボタン */
.fv-btn{
  font-size:2.4rem;
  padding:2.2rem 4rem;
  margin-top:0.6rem;
}

/* SP専用ヒーロー図版（人物/スプラッシュ/バブル/ライン焼き込み3コマ）。PCでは非表示、SP(≤1100)で表示 */
.fv-figure-sp{
  display:none;
}
/* SPヒーローの縦分配用ラッパ。PCでは無効化（unitは透過＝従来の[maintext][cta]、topspaceは非表示） */
.fv-unit{
  display:contents;
}
.fv-topspace{
  display:none;
}

/* =========================================================
   共通：マーキー見出し帯（cases / jobs / about / reasons / faq）
   ========================================================= */
.band{
  position:relative;
  display:flex;
  align-items:center;
  min-height:24rem;
}
.band__rail{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.marquee__track{
  display:inline-flex;
  flex-wrap:nowrap;
  white-space:nowrap;
  will-change:transform;
}
/* マーキー：左へシームレスに流し続ける。JS(top.js)が .marquee__track を
   「2つの同一ハーフ」に複製し、-50%移動＝1ハーフぶんで完全に途切れず反復。
   animation-duration は内容幅から算出してJSが上書き（全band共通速度＝data-marquee px/s）。 */
@keyframes band-marquee-left{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}
.marquee__track.is-marquee{
  animation: band-marquee-left 30s linear infinite;   /* duration はJSが上書き */
}
@media (prefers-reduced-motion: reduce){
  .marquee__track.is-marquee{
    animation:none;
  }   /* モーション低減時は静止（JS側でも停止） */
}

/* ===== スクロール出現アニメ：data-reveal を IO で .is-revealed 化（ポンと飛び出るポップ＝scaleバウンド）。
   グループは JS が transition-delay で時差表示(stagger)。.js ゲート＝JS無効/失敗時は表示されたまま（未表示で固まらない）。 ===== */
.js [data-reveal]{
  opacity:0;
  transform:scale(.8);
  transition:opacity .3s ease-out, transform .55s cubic-bezier(.34,1.56,.64,1);   /* back-out で少しオーバーシュート＝ポン */
}
.js [data-reveal].is-revealed{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ===== #cases：PC でビューポート進入時に一度だけバウンド（JSが .cases-stage に .is-bounced 付与）。
   translateY のオーバーシュートで「下から入って弾む」。overflow:clip 内なのではみ出さない。 ===== */
@keyframes cases-bounce-in{
  /* 下基準：コンテンツ(bottom-anchored)が下端rest(0)から上へ跳ねて戻る＝床(下端)でバウンド。
     up phase=ease-out(頂点で減速)／down phase=ease-in(床へ加速)で重力感。全て 0(下端) に戻る。 */
  /* 跳ね量は --cb-amp（下記でPC/SP別に設定）。ratio 1 / 0.3 / 0.1 で減衰。 */
  0%{
    transform:translateY(0);
    animation-timing-function:ease-out;
  }
  28%{
    transform:translateY(calc(var(--cb-amp,4rem) * -1));
    animation-timing-function:ease-in;
  }
  52%{
    transform:translateY(0);
    animation-timing-function:ease-out;
  }
  72%{
    transform:translateY(calc(var(--cb-amp,4rem) * -0.3));
    animation-timing-function:ease-in;
  }
  88%{
    transform:translateY(0);
    animation-timing-function:ease-out;
  }
  95%{
    transform:translateY(calc(var(--cb-amp,4rem) * -0.1));
    animation-timing-function:ease-in;
  }
  100%{
    transform:translateY(0);
  }
}
/* PC＝`.cases-stage`（ピン内の中身）／SP＝`.case-slide`（Case本文）＋`.case-nav` を付与。
   SPで cases-sticky 全体を動かすと band(マーキー)が上端ボーダーを突き破るため、band を除いた
   Case本文(.case-slide)とナビ(.case-nav)だけをバウンド（bandは据置）。跳ね量は PC/SP とも 6rem。時間1.1s共通。 */
.cases-stage.is-bounced{
  --cb-amp:6rem;
  animation:cases-bounce-in 1.1s both;
}   /* PC（.cases-stage） */
.case-slide.is-bounced,
.case-nav.is-bounced{
  --cb-amp:6rem;
  animation:cases-bounce-in 0.8s both;
}   /* SP（case-slide+nav）＝少し速く＝跳ね上げ中に下のオレンジが目立たない */
/* SP：前/次でケースを切り替えるときの動き（top.js が .is-out / .is-in と向きの .is-next / .is-prev を付ける）。
   白い吹き出しとタブは据え置き、本文・数字・人物だけを流す。人物は少し遅らせて、奥行きを出す */
@keyframes case-out{ to{ opacity:0; transform:translateX(calc(var(--case-dx) * -1)); } }
@keyframes case-in{ from{ opacity:0; transform:translateX(var(--case-dx)); } }
@keyframes case-photo-in{ from{ opacity:0; transform:translateY(1.6rem) scale(.96); } }
.case-slide.is-next{ --case-dx:3.2rem; }
.case-slide.is-prev{ --case-dx:-3.2rem; }
.case-slide.is-out :is(.case-quote, .case-row, .case-compare, .case-hito){ animation:case-out .22s cubic-bezier(.4, 0, 1, 1) both; }
.case-slide.is-in :is(.case-quote, .case-row, .case-compare){ animation:case-in .44s cubic-bezier(.2, .8, .2, 1) both; }
.case-slide.is-in .case-compare{ animation-delay:.06s; }
.case-slide.is-in .case-hito{ animation:case-photo-in .44s cubic-bezier(.2, .8, .2, 1) .08s both; }
@media (prefers-reduced-motion: reduce){
  .cases-stage.is-bounced,
  .case-slide.is-bounced,
  .case-nav.is-bounced{
    animation:none;
  }
}
.band__big{
  font-family:var(--f-en);
  color:var(--c-marquee);
  font-size:19.2rem;
  line-height:1;
  white-space:nowrap;
  padding-right:.18em;
  letter-spacing:-0.03em;
}
.band__label{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:1rem;
  padding-left:8rem;
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-cream);
  font-size:3.2rem;
  letter-spacing:.06em;   /* 見出しは字間を少し広げる */
  line-height:1.39;
}
.band__mouth{
  width:2.8rem;
  height:auto;
  flex:none;
}
/* band--bleed: マーキー帯（レール）をビューポート全幅でブリード（Case と同様）。
   ラベル/リンクは1440コンテンツ基準のまま。将来ティッカー（横スクロールを流し続ける）化の前提構造＝
   トラックは反復スパンで持ち、JS未導入の現在は静止／導入後に translateX ループへ。
   ※ about / reasons / faq の各 band にも .band--bleed を付与すれば横展開できる。 */
.band--bleed .band__rail{
  left:calc(50% - 50vw);
  right:auto;
  width:100vw;
}

/* =========================================================
   2. モデルケース（1440 × 1028・px絶対配置）
   ========================================================= */
/* セクションはピン留めカルーセルのスクロールトリガ（全幅フルブリード） */
.cases{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);   /* .home(1440中央)の子を全幅ブリード＝左端をビューポート左に合わせる（0だと左に(100vw-1440)/2の余白が出る） */
  color:var(--c-cream);
}
/* ピン留めされる1画面。各要素をビューポート基準で配置：
   マーキー/人物/splash は画面幅に沿わせ、吹き出し（メイン）は中央1440で保つ。 */
.cases-sticky{
  position:relative;
  height:100vh;
  min-height:60rem;
  overflow:hidden;
}
/* 配置レイヤー（全面）。--cb = 下端アンカー量 = 100vh − 合成物高(102.8rem)。
   ラベル/人物/フキダシを常にビューポート下端基準に置く（幅を狭めて合成物が縮んでも下基準を維持
   ＝1440×900 の見え方をキープ）。合成物が画面より高い時は負（上がはみ出す）、低い時は正（上はBK余白）。
   ※マーキーのレールは top 固定（--cb非依存）＝デザインどおり上帯として残す。 */
.cases-stage{
  position:absolute;
  inset:0;
  --cb: calc(100vh - 102.8rem);
}
.cases-stage > .band{
  position:absolute;
}
/* 各スライド＝中央1440レイアウト（人物の右側はオーバーフロー表示＝1440端で切らない）。クロスフェードで切替 */
.case-slide{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:144rem;
  height:100%;
  opacity:0;
  visibility:hidden;
  /* スライド全体はフェードさせず即切替（白い吹き出し・タブは全ケース同じ形なので、切り替えても動かない）。
     中身の出入りは .is-out / .is-in のアニメ（top.js）に任せる。全体をフェードすると、消えた本文が一瞬戻って二重に見えていた */
}
.case-slide.is-active{
  opacity:1;
  visibility:visible;
}
.case-slide > .case-hito,
.case-slide > .case-fukidashi,
.case-slide > .case-note{
  position:absolute;
}
/* Case 番号の下に、そのケースの種類を出す */
.case-head__cat{
  display:inline-block;
  margin-top:.8rem;
  padding:.3rem 1.4rem;
  border-radius:.4rem;
  background:var(--c-orange);
  color:#fff;
  font-size:1.5rem;
  font-weight:900;
  line-height:1.4;
  text-align:center;
}
/* ケースの種類（転職／キャリアアップ／副業）。吹き出しの上段、引用符の右に置く */
.case-cats{
  position:absolute;
  left:12rem;
  top:.6rem;
  z-index:2;
  display:flex;
  gap:.8rem;
}
.case-cat{
  padding:.6rem 1.8rem;
  border:.15rem solid var(--bg-top);
  border-radius:99rem;
  background:#fff;
  color:var(--bg-top);
  font-size:1.5rem;
  font-weight:900;
  cursor:pointer;
}
.case-cat.is-on{ background:var(--bg-top); color:#fff; }
/* ページネーション（画面下中央） */
.case-dots{
  position:absolute;
  left:50%;
  bottom:4rem;
  transform:translateX(-50%);
  display:flex;
  gap:1.4rem;
  z-index:10;
  display: none;
}
.case-dot{
  width:1.2rem;
  height:1.2rem;
  border-radius:50%;
  background:rgba(249,238,218,.45);
  transition:background .3s ease, transform .3s ease;
}
.case-dot.is-active{
  background:var(--c-cream);
  transform:scale(1.25);
}
/* prev/next。PC は白い吹き出しの左右の端（--case-nav-l / -r / -y は Cases.astro のスクリプトで入れる）。SP は @media 内で別配置 */
.case-nav{
  display:none;
}
@media (min-width:1101px){
  .case-nav{ display:block; }
  .case-nav__btn{
    position:absolute;
    z-index:12;
    top:var(--case-nav-y, 50%);
    width:5.6rem;
    height:5.6rem;
    margin:-2.8rem 0 0 -2.8rem;
    border:none;
    border-radius:0;
    background:var(--c-orange) url(../img/top/case_nav_arrow_sq.svg) center/100% no-repeat;
    box-shadow:0 .4rem 1.2rem rgba(0,0,0,.2);
    cursor:pointer;
    transition:background-color .2s;
  }
  .case-nav__btn:hover{ background-color:var(--c-sumi); }
  .case-nav__btn--prev{ left:var(--case-nav-l, 10%); transform:rotate(180deg); }
  .case-nav__btn--next{ left:var(--case-nav-r, 60%); }
}

/* 背景帯：Career Change マーキー（全幅100vw）＋ラベル。
   マーキーは top基準で上に余白を取り、切れないようにレール内で縦中央配置。
   ラベルは下端アンカーで吹き出しの上に保つ。 */
.cases-band{
  top:0;
  left:0;
  width:100vw;
  height:100%;
  min-height:0;
  z-index:0;
}
.cases-band .band__rail{
  top:4rem;
  bottom:auto;
  height:24rem;
  align-items:center;
  /* 縦クリップを外してディセンダ(g等)の下カーブを見せる。横のはみ出し(マーキー周回分)は
     祖先 .cases-sticky{ overflow:hidden/clip } が 100vw でクリップするので二重には要らない。 */
  overflow:visible;
}
/* トラックの縦中央は rail の align-items:center に任せる（＝transform はマーキーJSの
   translateX(0→-50%) 専用に空ける）。以前は top:50%+translateY(-50%) で中央化していたが、
   JSアニメの translateX が transform を丸ごと上書きして translateY が消え、トラックが下降→
   rail の overflow:hidden で下端が切れていた。SPと同じフロー配置方式に統一して解消。 */
.cases-band .marquee__track{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
}
.cases-band .band__label{
  position:absolute;
  top:calc(27.4rem + var(--cb));
  left:calc(50vw - 72rem);
}
.case-baikyari{
  width:10.7rem;
  height:auto;
  flex:none;
}

/* 人物 ＋ 背後の飛沫：1440デザイン座標（slideブロックが1440端で右肩以降をクリップ）。下端アンカー */
.case-hito{
  left:84.5rem;
  top:calc(24.9rem + var(--cb));
  width:59.5rem;
  height:78rem;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
.case-splash{
  position:absolute;
  left:0;
  top:23.5rem;
  width:76.8rem;
  height:auto;
  z-index:1;
}
.case-photo{
  position:absolute;
  left:9.3rem;
  bottom:0;
  width:58.7rem;
  height:auto;
  z-index:2;
}

/* ===== 吹き出し：1440デザイン座標。下端アンカー ===== */
/* コンテンツは中央寄せだとCase毎に本文量で位置がズレる → 固定アンカー（Case1基準 left120/top92）に。
   本文高さ・ボックス幅も固定し、全Caseで引用符〜BEFORE/AFTERの位置を完全一致させる。 */
.case-fukidashi{
  left:7rem;
  top:calc(34.8rem + var(--cb) - 4.8rem);   /* 吹き出しの下端とセクション下端の間に隙間を作るため 4.8rem 持ち上げる */
  width:86.6rem;
  height:68rem;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:9.2rem 0 0 12rem;
  z-index:2;
}
.case-bubble-bg{
  position:absolute;
  left:-1rem;
  top:2.2rem;
  width:99.6rem;
  height:89rem;
  z-index:0;
  pointer-events:none;
}
/* SP専用フキダシ（case_bubble_sp.svg）。PCは非表示。SPは @media で敷く */
.case-bubble-bg-sp{
  display:none;
}
.case-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  color:var(--c-orange);
}
.case-quote{
  width:6.6rem;
  height:auto;
}

/* 行：Case1 列 ｜ 引用文＋プロフィール(w412) */
.case-row{
  display:flex;
  gap:4rem;
  align-items:flex-start;
  padding:3.2rem 0 4rem;
}
.case-head{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.7rem;
  color:var(--c-orange);
  text-align:center;
  white-space:nowrap;
}
.case-head__sub{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:1.2rem;
  line-height:2.4rem;
}
.case-head__no{
  font-size:3.2rem;
  line-height:4rem;
}
.case-voice-col{
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  width:41.2rem;
}
/* 本文は3行ぶんの固定高さ（Case毎の文量差でプロフィール/BEFORE/AFTERがズレないように） */
.case-voice{
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-orange);
  font-size:2rem;
  line-height:3.3rem;
  height:9.9rem;
  overflow:hidden;
}
.case-profile{
  align-self:flex-start;
  display:inline-flex;
  padding:0.2rem 2rem;
  border-radius:10rem;
  background:var(--c-gray-bg);   /* 吹き出し（白）の上で薄グレーのピル */
  color:var(--c-black);
  font-family:var(--f-jp);
  font-weight:700;
  font-size:1.2rem;
  line-height:2.4rem;
  white-space:nowrap;
}

/* BEFORE → AFTER（左揃え・items-end・gap56） */
.case-compare{
  display:flex;
  gap:5.6rem;
  align-items:flex-end;
}
.case-box{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.8rem;
  border-radius:.8rem;
  text-align:center;
}
/* ボックスは固定幅＝BEFORE/AFTER の X位置を全Caseで一致（職種文字数の差で動かない）。高さは下端揃え */
.case-box--before{
  width:21.4rem;
  padding:3.2rem;
  border:0.3rem dashed var(--c-orange);
  color:var(--c-orange);
}
.case-arrow{
  position:absolute;
  right:-4.25rem;
  bottom:-1.35rem;
  width:8.7rem;
  height:9.1rem;
  pointer-events:none;
}
.case-box--after{
  width:34.6rem;
  padding:3.2rem 4.4rem;
  background:var(--c-orange);
  color:var(--c-cream);
}
.case-box__label{
  line-height:1;
}
.case-box--before .case-box__label{
  font-size:1.8rem;
}
.case-box--after  .case-box__label{
  font-size:2.8rem;
  line-height:1.4;
}
.case-box__detail{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.case-box__job{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:1.6rem;
  line-height:2.8rem;
}
.case-box--after .case-box__job{
  line-height:2.2rem;
}
.case-box__salary{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:0.6rem;
}
.case-salary__lbl,
.case-salary__unit{
  font-family:var(--f-jp);
  font-weight:900;
  font-size:1.4rem;
  line-height:1.8rem;
}
.case-salary__num{
  font-family:var(--f-num);
  font-weight:700;
  font-size:4.8rem;
  line-height:1;
}
.case-box__salary--big{
  gap:0.8rem;
}
.case-box__salary--big .case-salary__lbl,
.case-box__salary--big .case-salary__unit{
  font-size:2.4rem;
  line-height:3rem;
}
.case-box__salary--big .case-salary__num{
  font-size:8.8rem;
  line-height:.9;
}

/* 注釈（右下・白文字）。暗グラデは「変な影」に見えるため撤去し、文字に控えめな影で可読性確保 */
.case-note{
  right:0;
  bottom:0;
  width:56.5rem;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:0 3rem 3.1rem 0;
  z-index:3;
  pointer-events:none;
}
.case-note p{
  color:#fff;
  font-size:1rem;
  line-height:1.6rem;
  text-align:right;
  white-space:nowrap;
  text-shadow:0 0.1rem 0.2rem rgba(0,0,0,.45);
}

/* =========================================================
   共通（通常フロー・セクション）  ※1rem = 10px @1440
   ========================================================= */
.section{
  position:relative;
}
.l-1440{
  width:min(100%, 144rem);
  margin-inline:auto;
  padding-inline:7.2rem;
}

/* =========================================================
   3. Featured jobs
   ========================================================= */
.sec-jobs{
  color:var(--c-cream);
  padding-top:6rem;
  padding-bottom:10rem;   /* 次のコーチ紹介（赤）との境目に余白 */
}
.sec-jobs .band{
  min-height:auto;
  padding-top:6rem;
}
/* 求人例の下のCTA（他セクションと同じ LINE予約ボタン） */
.jobs-action{
  display:flex;
  justify-content:center;
  margin-top:5.6rem;
}
/* カルーセル：横スクロール＋scroll-snap。PC=3枚表示、カードは (100% - gap×2) / 3 */
/* 転職／副業のタブ（大きく2分割） */
.jobs-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  margin-block:3.2rem 3.6rem;
}
.jobs-tab{
  position:relative;
  min-height:7.2rem;
  border:.2rem solid var(--bg-top);
  border-radius:.8rem;
  background:#fff;
  color:var(--bg-top);
  font-size:2.4rem;
  font-weight:900;
  letter-spacing:.06em;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.jobs-tab[aria-selected="true"]{ background:var(--bg-top); color:#fff; }
.jobs-tab[aria-selected="true"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1.2rem;
  width:2.4rem;
  height:1.2rem;
  margin-left:-1.2rem;
  background:var(--bg-top);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.jobs-panel[hidden]{ display:none; }
.jobs-carousel{
  margin-top:3.2rem;
}
.jobs-cards{
  --jobs-gap:3.2rem;
  display:flex;
  gap:var(--jobs-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:0.8rem 0 1.6rem;   /* hover の浮き・影が切れない余白 */
  list-style:none;
}
.jobs-cards::-webkit-scrollbar{ display:none; }
/* カード：上＝イラスト窓（cream）、下＝テキスト。hover で少し浮く */
.job-card{
  flex:0 0 calc((100% - var(--jobs-gap) * 2) / 3);
  min-width:0;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  border:0.2rem solid var(--c-orange4);
  border-radius:5.6rem 1.6rem 1.6rem 1.6rem;
  background:linear-gradient(154deg, #D82B00 1.86%, rgba(255, 126, 45, 0.00) 100.91%);
  padding:1.2rem;
  transition:transform .3s ease, box-shadow .3s ease;
}
.job-card:hover{
  transform:translateY(-0.6rem);
  box-shadow:0 1.6rem 3.2rem rgba(80,10,0,.25);
}
.job-card__illust{
  position:relative;
  aspect-ratio:16/10;
  border-radius:4.4rem 1rem 1rem 1rem;
  background:
    radial-gradient(circle at 1.2rem 1.2rem, rgba(204,75,74,.14) 0.2rem, transparent 0.25rem) 0 0/2.4rem 2.4rem,
    var(--c-cream);
  overflow:hidden;
}
.job-card__illust img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;   /* 実写の写真なので枠いっぱいに敷く */
  transition:transform .4s ease;
}
.job-card:hover .job-card__illust img{ transform:scale(1.05); }
/* テキスト部：縦積み gap8（type→title→tags→salary） */
.job-card__body{
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  padding:2.4rem 2rem 2rem;
}
/* ナビ：前後ボタン＋ドット（中央） */
.jobs-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2.4rem;
  margin-top:2.4rem;
}
.jobs-nav__btn{
  position:relative;
  width:5.6rem;
  height:5.6rem;
  border:0.2rem solid var(--c-cream);
  border-radius:50%;
  background:var(--c-cream);
  cursor:pointer;
  transition:background-color .2s, opacity .2s;
}
.jobs-nav__btn::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1.2rem;
  height:1.2rem;
  border-top:0.3rem solid var(--c-orange);
  border-right:0.3rem solid var(--c-orange);
  transform:translate(-65%,-50%) rotate(45deg);
}
.jobs-nav__btn--prev::before{ transform:translate(-35%,-50%) rotate(-135deg); }
.jobs-nav__btn:hover:not(:disabled){ background:var(--c-yellow); border-color:var(--c-yellow); }
.jobs-nav__btn:disabled{ opacity:.35; cursor:default; }
.jobs-nav__dots{
  display:flex;
  gap:1rem;
}
.jobs-nav__dot{
  width:1rem;
  height:1rem;
  padding:0;
  border:0;
  border-radius:99rem;
  background:rgba(249,238,218,.45);
  cursor:pointer;
  transition:width .3s ease, background-color .3s ease;
}
.jobs-nav__dot[aria-current="true"]{
  width:3.2rem;
  background:var(--c-yellow);
}
@media (prefers-reduced-motion: reduce){
  .jobs-cards{ scroll-behavior:auto; }
  .job-card, .job-card__illust img{ transition:none; }
}
.job-card__type{
  font-weight:700;
  font-size:1.4rem;
  line-height:2.4rem;
  color:var(--c-cream);
}
.job-card__title{
  font-weight:900;
  font-size:2.4rem;
  line-height:1.25;
  color:var(--c-cream);
}
/* タグ：カード幅に収まらないときは折り返す。gap4 */
.job-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
}
.job-card__tags .tag{
  font-weight:700;
  font-size:1.2rem;
  line-height:2.4rem;
  padding:0 1rem;
  border-radius:0.2rem;
  background:var(--c-cream);
  color:#b07f46;
  white-space:nowrap;
}
.job-card__tags .tag--en{
  background:#fff;
  color:var(--c-orange);
}
.job-card__salary{
  display:flex;
  align-items:baseline;
  gap:0.2rem;
  color:var(--c-yellow);
}
.job-card__salary .lbl{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:1.6rem;
}
.job-card__salary .num{
  font-size:2.2rem;
  line-height:1.3;
}
.jobs-note{
  margin-top:1.6rem;
  font-size:1rem;
  line-height:1.6;
  text-align:right;
  color:#fff;
  font-weight:400;
}

/* =========================================================
   4. Agitation（problem）
   ========================================================= */
#problem{
  color:var(--c-cream);
  padding-block:12rem 2.4rem;   /* 下は次の #about の矢印に食い込むので詰める */
  overflow:hidden;
}
#problem .problem-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7.2rem;
}
#problem .problem-stage{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:center;
  gap:0.8rem;
  width:100%;
}
#problem .problem-col{
  display:flex;
  flex-direction:column;
  gap:2.8rem;
  flex:none;
  padding-top:4.8rem;
}
#problem .problem-balloon{
  position:relative;
  width:26.4rem;
  aspect-ratio:264/244;
  margin:0;
}
/* ===== #problem 登場アニメ：上端到達で一斉発火（top.js の IO が #problem に .is-problem-in を付与）。
   人物2人＝小さく中央下→外側へ本来サイズに拡大／フキダシ4つ＝pop で飛び出し→1秒ごとに rotate 反転で揺れ続ける。
   個別の data-reveal は撤去済み。初期hidden は .js ゲート（no-JS は即表示）。 ===== */
/* tilt クラスは wiggle の振れ角を保持：--wig-a=静止(=pop着地), --wig-b=反転先。no-JS/reduced用に静的 rotate も当てる */
#problem .problem-balloon--tilt-l{
  --wig-a:-4deg;
  --wig-b:4deg;
  transform:rotate(var(--wig-a));
}
#problem .problem-balloon--tilt-r{
  --wig-a:4deg;
  --wig-b:-4deg;
  transform:rotate(var(--wig-a));
}

/* 初期hidden（JS有効時のみ隠す） */
.js #problem .problem-balloon{
  opacity:0;
  transform:scale(0);
  will-change:transform,opacity;
}
.js #problem .problem-person--man{
  transform:scale(.8);
  transform-origin:right bottom;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.js #problem .problem-person--woman{
  transform:scale(.8);
  transform-origin:left bottom;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.js #problem .problem-heading{
  opacity:0;
  transform:translateY(1.2rem);
  transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}

/* 発火（#problem.is-problem-in）：.js を前置して初期hidden(同詳細度)に確実に勝たせる */
.js #problem.is-problem-in .problem-person{
  transform:scale(1);
}   /* 外側へ拡大（origin は man=右下 / woman=左下） */
.js #problem.is-problem-in .problem-heading{
  opacity:1;
  transform:none;
}
.js #problem.is-problem-in .problem-balloon{
  animation: problem-pop .5s cubic-bezier(.34,1.56,.64,1) both, problem-wiggle 2.4s linear .5s infinite;
}
/* 左col(-4→+4) と右col(+4→-4) は --wig 符号が逆＝左右ミラーで逆に傾く（delay不要） */

/* --pop-scale＝着地スケール（既定1／SPは .9 に絞って傾き時の隣接接触を回避） */
@keyframes problem-pop{   /* 飛び出し：scale .2→着地 を back-out で少しオーバーシュート。着地角は --wig-a で wiggle と一致 */
  0%{
    opacity:0;
    transform:scale(.2) rotate(var(--wig-a));
  }
  100%{
    opacity:1;
    transform:scale(var(--pop-scale,1)) rotate(var(--wig-a));
  }
}
/* 緩急ウィグル：角度がつく2シーン(A=--wig-a / B=--wig-b)で「止まって」、間を勢いよく反転（軽いオーバーシュート）。
   0-40%=Aで静止 → 40-50%=Bへスナップ → 50-90%=Bで静止 → 90-100%=Aへスナップ（2.4sで各ポーズ約1秒ホールド）。
   timing-function はセグメント始点キーフレームに効く＝40%/90%(=move開始)にスナップ用イージングを指定。 */
@keyframes problem-wiggle{
  0%,
  40%{
    transform:scale(var(--pop-scale,1)) rotate(var(--wig-a));
    animation-timing-function:cubic-bezier(.5,-0.2,.35,1.3);
  }
  50%,
  90%{
    transform:scale(var(--pop-scale,1)) rotate(var(--wig-b));
    animation-timing-function:cubic-bezier(.5,-0.2,.35,1.3);
  }
  100%{
    transform:scale(var(--pop-scale,1)) rotate(var(--wig-a));
  }
}
@media (prefers-reduced-motion: reduce){   /* 静止・全表示（tilt だけ残す） */
  .js #problem .problem-balloon{
    opacity:1;
    transform:scale(var(--pop-scale,1)) rotate(var(--wig-a));
    animation:none;
  }
  .js #problem .problem-person--man,
  .js #problem .problem-person--woman{
    transform:none;
  }
  .js #problem .problem-heading{
    opacity:1;
    transform:none;
  }
}
#problem .problem-balloon__frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
}
#problem .problem-balloon__text{
  position:absolute;
  left:14%;
  right:12%;
  top:50%;
  transform:translateY(-50%);
  margin:0;
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-cream);
  font-size:2rem;
  line-height:1.75;
  letter-spacing:-0.01em;
  background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.75em - 0.2rem), rgba(249,238,218,.5) calc(1.75em - 0.2rem), rgba(249,238,218,.5) 1.75em);
  padding-bottom:0.1rem;
}
#problem .problem-balloon--r .problem-balloon__text{
  left:12%;
  right:14%;
}
/* 縦書き2列（右=こんなモヤモヤ / 左=ありませんか？）。vertical-rl では flex-direction:column が横並び（block軸=右→左）になる。
   デザインは1文字=48×1.3≒62px送り → 縦字間を letter-spacing で再現（line-height は縦書きでは列幅なので1.0に） */
/* 見出し＝最上段・全幅・中央の横書き1行（人物・吹き出しはその下に並ぶ） */
#problem .problem-heading{
  order:-1;
  flex-basis:100%;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  margin:0 0 1.6rem;
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-cream);
  font-size:4.8rem;
  line-height:1.3;
  letter-spacing:.08em;
  text-align:center;
  white-space:nowrap;
}
#problem .problem-heading__line{
  display:block;
  margin:0;
}
#problem .problem-person{
  margin:0;
  flex:none;
  align-self:flex-end;
}
#problem .problem-person{ position:relative; }
#problem .problem-person img{
  display:block;
  height:auto;
}
/* 人物の下端の波線（画像の切れ目を隠す）。cream の波を横に繰り返す */
#problem .problem-person::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.6rem;
  height:2rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5q5-6 10 0t10 0' fill='none' stroke='%23f9eeda' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left center / 3rem 100% repeat-x;
}
/* 人物＝透過の切り抜き（302×440）。デザイン同寸 */
#problem .problem-person--man img{
  width:30.2rem;
}
#problem .problem-person--woman img{
  width:30.2rem;
}
#problem .problem-lead{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.8rem;
  text-align:center;
}
#problem .problem-lead__row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.2rem;
  margin:0;
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-cream);
  font-size:4rem;
  line-height:1.38;
  letter-spacing:-0.1rem;
  white-space:nowrap;
}
#problem .problem-lead__logo{
  width:14.7rem;
  height:auto;
}
#problem .problem-lead__em{
  font-size:6rem;
  line-height:1.24;
}

/* =========================================================
   5. WhoWeAre（about）
   ========================================================= */
#about{
  position:relative;
  /* 前（お悩み＝赤）・後（AIスクールとの違い＝白）と区別するため、地を薄グレーにする */
  background:var(--c-gray-bg);
  color:var(--c-black);
  padding-top:16rem;     /* 上端の矢印（下の clip-path）のぶん */
  padding-bottom:8rem;   /* 角丸のカードが次のセクションに接して切れて見えないよう、下に余白 */
}
#about .about-body{
  position:relative;
  z-index:1;
}
#about .about-pill{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4rem;
  min-height:42.2rem;
  padding:6.4rem 8rem;
  background:#fff;
  color:var(--c-black);
  border-radius:2.4rem;
  box-shadow:0 2.4rem 6rem rgba(140,40,39,.1);
}
/* 見出しの下：図（左）と説明（右）の2カラム */
#about .about-cols{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6.4rem;
  width:100%;
}
/* カード上辺にまたがる吹き出し「そもそも」 */
#about .about-bubble{
  position:absolute;
  left:50%;
  top:0;
  z-index:2;
  transform:translate(-50%, -60%);
  padding:1.2rem 3.2rem;
  border-radius:99rem;
  background:var(--c-cta);   /* CTA ボタンと同じ青 */
  color:#fff;
  font-weight:900;
  font-size:2rem;
  letter-spacing:.12em;
  line-height:1.4;
  white-space:nowrap;
}
#about .about-bubble::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  margin-top:-.1rem;
  border-style:solid;
  border-width:1.2rem .9rem 0;
  border-color:var(--c-cta) transparent transparent;
  transform:translateX(-50%);
}
@media (max-width:1100px){
  #about .about-bubble{ padding:.8rem 2.4rem; font-size:1.5rem; }
  #about .about-bubble::after{ border-width:.9rem .7rem 0; }
}
/* --- 図：これまでの経験 × AIスキル → キャリアの武器 --- */
#about .about-visual{
  flex:none;
  width:50rem;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#about .about-eq{
  display:flex;
  align-items:center;
  gap:1.6rem;
  width:100%;
}
#about .about-eq__tile{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  padding:2.8rem 1.6rem 2.4rem;
  border-radius:.8rem;
  text-align:center;
}
#about .about-eq__tile--exp{
  background:var(--c-cream);
  border:.2rem solid #eadccb;
  color:var(--c-black);
}
#about .about-eq__tile--ai{
  background:linear-gradient(180deg, var(--c-red) 0%, #a73433 100%);
  color:var(--c-cream);
}
#about .about-eq__en{
  font-family:var(--f-en);
  font-size:1.1rem;
  line-height:1.6;
  color:var(--c-orange);
}
#about .about-eq__tile--ai .about-eq__en{ color:var(--c-yellow); }
#about .about-eq__ja{
  font-family:var(--f-jp);
  font-weight:900;
  font-size:2.4rem;
  line-height:1.3;
  letter-spacing:-.02em;
}
#about .about-eq__sub{
  font-family:var(--f-jp);
  font-weight:500;
  font-size:1.2rem;
  line-height:1.5;
  opacity:.75;
}
#about .about-eq__op{
  flex:none;
  font-family:var(--f-jp);
  font-weight:900;
  font-size:4rem;
  line-height:1;
  color:var(--c-orange);
}
/* 下向きの矢印（三角＋軸） */
#about .about-eq__arrow{
  position:relative;
  display:block;
  width:.4rem;
  height:4rem;
  margin:1.2rem 0 1.6rem;
  background:var(--c-orange);
}
#about .about-eq__arrow::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1.2rem;
  transform:translateX(-50%);
  border-style:solid;
  border-width:1.4rem 1.2rem 0;
  border-color:var(--c-orange) transparent transparent;
}
#about .about-eq__result{
  position:relative;
  clip-path:inset(-20rem 0 0 0 round .8rem);   /* 上だけはみ出し可（イラストの頭を帯の上に出す）。左右と下は角丸で切る */
  display:flex;
  align-items:center;
  gap:1.2rem;
  width:100%;
  min-height:11rem;
  padding:2.2rem 22rem 2.2rem 2.8rem;
  border-radius:.8rem;
  background:linear-gradient(135deg, #d93a10 0%, #ed5700 60%, #ff8656 120%);
  color:#fff;
}
/* 右端の人物写真（男女・切り抜き）。腰から下は帯の下端で切り、頭は帯の上へ出す */
#about .about-eq__result-illust{
  position:absolute;
  right:1.6rem;
  bottom:-.4rem;
  width:19rem;
  height:auto;
  filter:drop-shadow(0 .8rem 1.6rem rgba(120,30,0,.3));
}
/* 帯の地に光の粒を散らす */
#about .about-eq__result::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 30%, rgba(255,216,77,.45) 0, transparent 26%),
    radial-gradient(circle at 12% 120%, rgba(255,255,255,.18) 0, transparent 40%);
  pointer-events:none;
}
#about .about-eq__result-ja{
  position:relative;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:2rem;
  line-height:1.4;
}
#about .about-eq__result-ja strong{
  font-weight:900;
  font-size:1.25em;
  color:var(--c-yellow);
}
#about .about-eq__result-en{
  position:absolute;
  right:-1.2rem;
  bottom:-2.6rem;
  font-family:var(--f-en);
  font-size:4.8rem;
  line-height:1.3;
  white-space:nowrap;
  color:rgba(255,255,255,.14);
}
/* 本文下の特長3つ */
#about .about-points{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.4rem;
  list-style:none;
}
#about .about-points li{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:.8rem 1.6rem;
  border-radius:99rem;
  background:#fff6f0;
  border:.2rem solid var(--c-orange);
  color:var(--c-orange);
  font-family:var(--f-jp);
  font-weight:700;
  font-size:1.4rem;
  line-height:1.4;
}
#about .about-points li::before{
  content:"";
  width:1rem;
  height:.6rem;
  border-left:.25rem solid currentColor;
  border-bottom:.25rem solid currentColor;
  transform:translateY(-.2rem) rotate(-45deg);
}
#about .about-text{
  flex:0 1 auto;
  max-width:52.8rem;
}
#about .about-h2{
  display:inline-flex;
  align-items:center;
  gap:0.8rem;
  margin:0;
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-orange);
  font-size:3.2rem;
  line-height:1.39;
  letter-spacing:-0.1rem;
  white-space:nowrap;
}
#about .about-mouth{
  width:2.6rem;
  height:auto;
  flex:none;
}
#about .about-mouth--flip{
  transform:scaleX(-1);
}
#about .about-h2__brand,
#about .about-h2__txt{
  color:var(--c-orange);
}
#about .about-lead{
  margin:0 0 2.4rem;
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-orange);
  font-size:4rem;
  line-height:1.38;
  letter-spacing:-0.1rem;
}
#about .about-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 .18em .12em;
  background:var(--c-orange);
  color:#fff;
  vertical-align:middle;
}
#about .about-lead__x{
  display:inline-block;
  width:4rem;
  height:auto;
  margin-inline:1.4rem;
  vertical-align:middle;
}
#about .about-lead__suf{
  margin-left:1.4rem;
  vertical-align:middle;
}
#about .about-lead__line2{
  display:inline-block;
}
#about .about-desc{
  margin:0;
  font-family:var(--f-jp);
  font-weight:500;
  color:var(--c-black);
  font-size:1.6rem;
  line-height:2.8rem;
}

/* =========================================================
   6. Why
   ========================================================= */
#why-now{
  color:var(--c-cream);
  padding-block:8rem 11.2rem;
}
#why-now .why-head{ text-align:center; }
#why-now .why-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4.8rem;
}
#why-now .why-h2{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.8rem;
  margin:0;
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-cream);
  font-size:3.2rem;
  line-height:1.39;
  letter-spacing:.06em;   /* 見出しは字間を少し広げる */
  text-align:center;
}
#why-now .why-h2__text{
  display:inline;
}
#why-now .why-h2__hl{
  color:var(--c-yellow);
}
#why-now .why-mouth{
  flex:0 0 auto;
  width:2.6rem;
  height:2.1rem;
  object-fit:contain;
}
/* =========================================================
   7. 選ばれる3つの理由（reasons）  濃いオレンジ＋上下の尖り
   ========================================================= */
#reasons{
  position:relative;
  color:var(--c-cream);
}
/* 上下の尖りは画像（画面幅フルブリード・cover）／本体ベタも100vw。中のコンテンツは最大1440 */
#reasons .reason-band-top,
#reasons .reason-band-bottom,
#reasons .reason-body{
  width:100vw;
  margin-left:calc(50% - 50vw);
}
#reasons .reason-band-top{
  position:relative;
  z-index:1;
  aspect-ratio:1440/117;
  background:url("../img/top/reason-bg_head.png") center bottom / cover no-repeat;
}
#reasons .reason-band-bottom{
  position:relative;
  z-index:1;
  aspect-ratio:1440/117;
  background:url("../img/top/reason-bg_bottom.png") center top / cover no-repeat;
}
/* 本体（深いオレンジベタ＝画像と同色 #DE3B00 で継ぎ目なし）。尖りの帯のすぐ下に見出しが来るよう、上の余白は小さめ */
#reasons .reason-body{
  position:relative;
  z-index:0;
  background:var(--c-orange);
  padding-top:1.6rem;
  padding-bottom:8rem;
}
/* 中のコンテンツ（マーキー＋カード）は最大1440px・中央 */
#reasons .reason-band{
  min-height:26rem;
  max-width:144rem;
  margin-inline:auto;
}
/* マーキー＝地(#DE3B00)より明るいオレンジ（設計準拠 #ED5700）。他bandと違い地が濃いので暗色にはしない */
#reasons .reason-marquee{
  color:var(--c-orange2);
}
#reasons .reason-heading{
  position:relative;
  z-index:1;
  width:100%;
  justify-content:center;
  padding-left:0;
  text-align:center;
}
/* 日本語見出しの中の数字は本文と同じ和文フォント（Barlow にしない） */
#reasons .reason-heading .num,
#reasons .reason-heading__num{
  font-family:var(--f-jp);
  font-size:1.4em;
  line-height:1;
  font-weight:900;
  margin:0 .04em;
  vertical-align:-0.06em;
}
/* 特徴の行：テキスト ＋ 画面イメージ（偶数行は左右反転） */
#reasons .reason-features{
  display:grid;
  gap:9.6rem;
  max-width:112rem;
  margin:6.4rem auto 0;
  list-style:none;
}
#reasons .reason-feature{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr);
  align-items:center;
  gap:6.4rem;
}
#reasons .reason-feature--rev{ grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); }
#reasons .reason-feature--rev .reason-feature__body{ order:2; }
/* 理由の番号：「Reason」＋ 大きな赤い数字 ＋「/ 03」 */
#reasons .reason-feature__no{
  display:flex;
  align-items:baseline;
  gap:1.2rem;
  line-height:1;
}
#reasons .reason-feature__no-en{
  font-family:var(--f-num);
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bg-top);
}
#reasons .reason-feature__no-num{
  font-family:var(--f-num);
  font-weight:700;
  font-size:9.6rem;
  letter-spacing:-.02em;
  color:var(--bg-top);
}
#reasons .reason-feature__no-total{
  font-family:var(--f-num);
  font-weight:700;
  font-size:1.8rem;
  color:rgba(249,238,218,.4);
}
#reasons .reason-feature__label{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:2.4rem;
  font-weight:700;
  font-size:1.5rem;
  color:#f08a89;
}
#reasons .reason-feature__label-icon{
  display:grid;
  place-items:center;
  width:3.2rem;
  height:3.2rem;
  border-radius:50%;
  background:rgba(204,75,74,.2);
}
#reasons .reason-feature__label-icon svg{ width:1.8rem; height:1.8rem; }
/* 見出し下の線：右端だけ赤 */
#reasons .reason-feature__title{
  position:relative;
  margin-top:1.6rem;
  padding-bottom:2.4rem;
  border-bottom:.3rem solid rgba(249,238,218,.15);
  font-weight:900;
  font-size:3.2rem;
  line-height:1.55;
}
#reasons .reason-feature__title--lg{ font-size:3.6rem; line-height:1.45; }
#reasons .reason-feature__title::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-.3rem;
  width:4.8rem;
  border-bottom:.3rem solid var(--bg-top);
}
#reasons .reason-feature__text{
  margin-top:2.4rem;
  font-weight:500;
  font-size:1.5rem;
  line-height:2;
  opacity:.9;
}

/* ---------- 実写 ＋ インフォグラフィック ---------- */
#reasons .reason-feature__visual{
  position:relative;
  aspect-ratio:46/35;
  border-radius:.8rem;
  overflow:hidden;
  background:var(--c-sumi);
  color:var(--c-ink);
  box-shadow:0 2rem 4rem rgba(0,0,0,.35);
}
#reasons .rv-photo__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* 写真の上にうっすら赤〜墨のグラデとドット柄（カードの読みやすさとトーン合わせ） */
#reasons .rv-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.2px) 0 0 / 1.4rem 1.4rem,
    linear-gradient(160deg, rgba(42,34,35,.05) 40%, rgba(142,42,41,.45));
  mask:linear-gradient(to top, #000, transparent 70%);
  pointer-events:none;
}
#reasons .rv-photo > :not(img){ position:absolute; z-index:1; }
#reasons .rv-tag{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem 1.2rem;
  border-radius:99rem;
  background:rgba(42,34,35,.72);
  backdrop-filter:blur(6px);
  color:#fff;
  font-size:1.2rem;
  font-weight:700;
}
#reasons .rv-tag i{ width:.7rem; height:.7rem; border-radius:50%; background:var(--c-yellow); }
#reasons .rv-tag i.is-live{ background:#ff5a59; box-shadow:0 0 0 .3rem rgba(255,90,89,.3); }
#reasons .rv-card{
  padding:1.4rem 1.6rem;
  border-radius:.8rem;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  box-shadow:0 1.2rem 2.8rem rgba(42,34,35,.28);
  font-size:1.2rem;
  line-height:1.4;
}
#reasons .rv-card__head{ font-size:1.1rem; font-weight:700; color:var(--bg-bottom); letter-spacing:.04em; }
#reasons .rv-card__head::before{ content:""; display:inline-block; width:.6rem; height:.6rem; margin-right:.6rem; border-radius:.2rem; background:var(--bg-top); vertical-align:.1rem; }

/* 01 学習：進み具合のリング＋3ステップ */
#reasons .rv-card--ring{ top:2rem; right:2rem; display:flex; align-items:center; gap:1rem; padding:1.2rem 1.6rem 1.2rem 1.2rem; }
#reasons .rv-card--ring svg{ width:5.6rem; height:5.6rem; transform:rotate(-90deg); }
#reasons .rv-ring__bg{ fill:none; stroke:#f0e4e4; stroke-width:9; }
#reasons .rv-ring__fg{ fill:none; stroke:var(--bg-top); stroke-width:9; stroke-linecap:round; stroke-dasharray:calc(var(--p) * 1) 100; }
#reasons .rv-card--ring small{ display:block; font-size:1rem; font-weight:700; color:#8a8384; }
#reasons .rv-card--ring b{ font-size:2.8rem; font-weight:900; color:var(--bg-top); line-height:1; }
#reasons .rv-card--ring b span{ font-size:1.4rem; }
#reasons .rv-card--steps{ left:2rem; right:2rem; bottom:2rem; }
#reasons .rv-steps{ display:grid; grid-template-columns:repeat(3, 1fr); margin-top:1.2rem; list-style:none; }
#reasons .rv-steps li{ position:relative; display:grid; justify-items:center; gap:.2rem; text-align:center; color:#999; }
/* ステップ間の線（左隣の点から自分の点まで） */
#reasons .rv-steps li + li::before{ content:""; position:absolute; top:.6rem; right:50%; width:100%; height:.3rem; background:#eadede; }
#reasons .rv-steps .is-done + li::before, #reasons .rv-steps .is-now::before{ background:var(--bg-top); }
#reasons .rv-steps i{ position:relative; z-index:1; width:1.5rem; height:1.5rem; border:.3rem solid #eadede; border-radius:50%; background:#fff; }
#reasons .rv-steps .is-done i{ border-color:var(--bg-top); background:var(--bg-top); }
#reasons .rv-steps .is-now i{ border-color:var(--bg-top); box-shadow:0 0 0 .4rem rgba(193,65,64,.2); }
#reasons .rv-steps b{ margin-top:.4rem; font-size:1.3rem; font-weight:900; }
#reasons .rv-steps span{ font-size:1.05rem; }
#reasons .rv-steps .is-done, #reasons .rv-steps .is-now{ color:var(--c-ink); }
#reasons .rv-steps .is-now b{ color:var(--bg-top); }

/* 02 働き方：真ん中のハブから4つの働き方のカード（イラスト）へ点線が広がる図。写真は使わない */
#reasons .rv-photo--paths{ background:transparent; box-shadow:none; overflow:visible; }
#reasons .rv-photo--paths::after{ content:none; }
#reasons .rv-photo > .rv-ways{ inset:0; }
/* ハブ→カードの線：点線が外へ流れる */
/* 線はカードの上に重ねる（カードの内側の角＝文字のない側まで伸ばす）。ハブはさらに上 */
#reasons .rv-ways__lines{ position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; pointer-events:none; }
#reasons .rv-ways .rv-ways__hub{ z-index:2; }
#reasons .rv-ways__lines line{ stroke:rgba(249,238,218,.7); stroke-width:2; stroke-linecap:round; stroke-dasharray:4 6; vector-effect:non-scaling-stroke; animation:rv-flow 1.4s linear infinite; }
@keyframes rv-flow{ to{ stroke-dashoffset:-20; } }
#reasons .rv-ways__grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:4rem 6rem; height:100%; list-style:none; }
#reasons .rv-way{
  --tone:var(--c-yellow);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:.2rem;
  padding:1.6rem 1.6rem 2rem;
  border:1px solid rgba(249,238,218,.14);
  border-radius:.8rem;
  /* 線がカードの下に透けないよう、不透明の地にする */
  background:linear-gradient(160deg, #3a3030, #2b2424);
  color:var(--c-cream);
  overflow:hidden;
}
/* 上辺に色の線（働き方ごとの色） */
#reasons .rv-way::before{ content:""; position:absolute; left:0; right:0; top:0; height:.3rem; background:var(--tone); }
#reasons .rv-way--gold{ --tone:#c9a45c; }
#reasons .rv-way--red{ --tone:var(--bg-top); }
#reasons .rv-way--orange{ --tone:var(--c-orange); }
#reasons .rv-way--cream{ --tone:var(--c-cream); }
/* イラスト：白地の画像をクリーム地に乗算でなじませる。上の段は上に、下の段は下に置き、ハブ側（内側）を文字にする */
#reasons .rv-way__illust{ display:block; margin:0 0 1.2rem; border-radius:.4rem; background:var(--c-cream); overflow:hidden; }
#reasons .rv-way__illust img{ display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; mix-blend-mode:multiply; }
#reasons .rv-way:nth-child(n+3) .rv-way__illust{ order:9; margin:1.2rem 0 0; }
#reasons .rv-way__en{ font-family:var(--f-num); font-size:1.2rem; font-weight:700; letter-spacing:.12em; color:var(--tone); }
#reasons .rv-way__name{ font-size:2.4rem; font-weight:900; line-height:1.2; }
#reasons .rv-way__text{ font-size:1.3rem; font-weight:700; color:rgba(249,238,218,.75); }
/* 右側の2枚は右寄せ（ハブから外へ広がる向きにそろえる） */
#reasons .rv-way:nth-child(even){ align-items:flex-end; text-align:right; }
#reasons .rv-way:nth-child(n+3){ padding:2rem 1.6rem 1.6rem; }
#reasons .rv-way__illust{ align-self:stretch; }
@media (prefers-reduced-motion: reduce){ #reasons .rv-ways__lines line{ animation:none; } }
#reasons .rv-ways__hub{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  display:grid;
  place-content:center;
  justify-items:center;
  box-sizing:border-box;
  width:15rem;
  height:15rem;
  padding-top:1.4rem; /* 英字の小見出しが軽く、下が空いて見えるので文字のかたまりを少し下げる */
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 .8rem rgba(193,65,64,.35), 0 0 0 1.6rem rgba(193,65,64,.15), 0 1.6rem 3.2rem rgba(0,0,0,.4);
  color:var(--c-sumi);
  font-size:1.5rem;
  font-weight:900;
  line-height:1.3;
  text-align:center;
  transform:translate(-50%, -50%);
}
#reasons .rv-ways__hub small{ margin-bottom:.4rem; font-family:var(--f-en, inherit); font-size:1rem; letter-spacing:.12em; color:var(--bg-top); text-transform:uppercase; }
#reasons .rv-ways__hub span{ font-size:1.8rem; color:var(--bg-top); line-height:1; }

/* 03 コーチング：オンライン面談（Zoom 風）の画面＋共有メモ */
#reasons .rv-photo--plan{ background:#1b1718; }
#reasons .rv-photo--plan::after{ content:none; }
#reasons .rv-photo > .rv-meet{ inset:0; display:grid; grid-template-rows:auto 1fr auto; color:#fff; }
#reasons .rv-meet__bar{ display:flex; align-items:center; gap:.6rem; padding:1rem 1.6rem; font-size:1.1rem; font-weight:700; color:rgba(255,255,255,.8); }
#reasons .rv-meet__shield{ color:#3ccf6e; }
#reasons .rv-meet__shield svg{ display:block; width:1.3rem; height:1.3rem; }
#reasons .rv-meet__time{ display:inline-flex; align-items:center; gap:.5rem; margin-left:auto; font-size:1.1rem; }
#reasons .rv-meet__time i{ width:.7rem; height:.7rem; border-radius:50%; background:#ff5a59; box-shadow:0 0 0 .3rem rgba(255,90,89,.3); }
#reasons .rv-meet__main{ display:grid; grid-template-columns:1fr 19rem; gap:.8rem; min-height:0; padding:0 .8rem; }
#reasons .rv-meet__video{ position:relative; min-height:0; overflow:hidden; border-radius:.8rem; outline:.3rem solid #3ccf6e; outline-offset:-.3rem; }
#reasons .rv-meet__video > img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
#reasons .rv-meet__name{ position:absolute; left:1rem; bottom:1rem; display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .8rem; border-radius:.4rem; background:rgba(0,0,0,.6); font-size:1.1rem; font-weight:700; }
#reasons .rv-meet__name svg{ width:1.2rem; height:1.2rem; color:#3ccf6e; }
#reasons .rv-meet__self{ position:absolute; top:1rem; right:1rem; width:28%; overflow:hidden; border:.2rem solid rgba(255,255,255,.85); border-radius:.6rem; box-shadow:0 .6rem 1.6rem rgba(0,0,0,.35); }
#reasons .rv-meet__self img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 25%; }
#reasons .rv-meet__self figcaption{ position:absolute; left:.4rem; bottom:.4rem; padding:.1rem .5rem; border-radius:.3rem; background:rgba(0,0,0,.6); font-size:.9rem; font-weight:700; }
#reasons .rv-meet__panel{ display:grid; align-content:start; gap:1rem; min-height:0; padding:1.2rem 1.4rem; border-radius:.8rem; background:#fff; color:var(--c-ink); font-size:1.1rem; }
#reasons .rv-meet__sub{ font-size:1rem; font-weight:700; color:#8a8384; }
#reasons .rv-meet__radar svg{ display:block; width:100%; max-width:15rem; margin:0 auto; }
#reasons .rv-meet__tools{ display:flex; justify-content:center; align-items:center; gap:2.4rem; padding:.8rem 1.6rem 1rem; list-style:none; font-size:.9rem; color:rgba(255,255,255,.85); }
#reasons .rv-meet__tools li{ display:grid; justify-items:center; gap:.3rem; }
#reasons .rv-meet__tools svg{ width:2rem; height:2rem; }
#reasons .rv-meet__tools .is-share{ color:#3ccf6e; }
#reasons .rv-meet__tools .is-leave{ margin-left:auto; }
#reasons .rv-meet__tools .is-leave span{ padding:.5rem 1.4rem; border-radius:.6rem; background:#e5484d; color:#fff; font-size:1.1rem; font-weight:700; }
#reasons .rv-radar__grid{ fill:none; stroke:#eadede; stroke-width:1; }
#reasons .rv-radar__val{ fill:rgba(193,65,64,.22); stroke:var(--bg-top); stroke-width:2; stroke-linejoin:round; }
#reasons .rv-radar__dot{ fill:var(--bg-top); }
#reasons .rv-radar__label{ font-size:9px; font-weight:700; fill:#6d6566; text-anchor:middle; }
#reasons .rv-flow{ display:grid; gap:.8rem; margin-top:.6rem; list-style:none; }
#reasons .rv-flow li{ position:relative; display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius:.6rem; background:var(--c-gray-bg); font-weight:900; }
#reasons .rv-flow li + li::before{ content:""; position:absolute; left:2.2rem; top:-.8rem; height:.8rem; width:.2rem; background:#d9caca; }
#reasons .rv-flow small{ flex:0 0 4.4rem; padding:.1rem 0; border-radius:99rem; background:#fff; color:var(--bg-bottom); font-size:1rem; text-align:center; }
#reasons .rv-flow .is-goal{ background:var(--bg-top); color:#fff; }
/* 1. の下：講座サムネイルのループスライダー（画面幅いっぱい・左右はフェード） */
#reasons .rv-courses{
  grid-column:1 / -1;
  width:100vw;
  margin:-1.6rem 0 0 calc(50% - 50vw);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
#reasons .rv-courses__rail{ position:relative; inset:auto; display:block; pointer-events:auto; }
#reasons .rv-courses__track{ gap:2rem; padding:.8rem 1rem; list-style:none; }
#reasons .rv-course{
  position:relative;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:30rem;
  aspect-ratio:16 / 9;
  padding:1.8rem 2rem;
  border-radius:.6rem;
  overflow:hidden;
  white-space:normal;
  box-shadow:0 .8rem 2rem rgba(0,0,0,.3);
  /* 地にうっすらドットのテック柄（FV の回路モチーフに合わせる） */
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px), var(--rv-bg);
  background-size:1.2rem 1.2rem, 100% 100%;
  color:var(--rv-fg);
}
#reasons .rv-course--red{ --rv-bg:linear-gradient(135deg, #c94a49, #8f2a29); --rv-fg:#fff; --rv-accent:var(--c-yellow); }
#reasons .rv-course--sumi{ --rv-bg:linear-gradient(135deg, #3a3132, #1f1819); --rv-fg:#fff; --rv-accent:#e0706f; }
#reasons .rv-course--gold{ --rv-bg:linear-gradient(135deg, #dcbb75, #b08537); --rv-fg:#fff; --rv-accent:#fff4dc; }
#reasons .rv-course--cream{ --rv-bg:linear-gradient(135deg, #fbf3e4, #efdcbc); --rv-fg:var(--c-sumi); --rv-accent:var(--bg-bottom); }
#reasons .rv-course--cream{ background-image:radial-gradient(rgba(143,42,41,.12) 1px, transparent 1.2px), var(--rv-bg); }
#reasons .rv-course__cat{
  position:relative;
  z-index:1;
  padding:.2rem 1rem;
  border:1px solid currentColor;
  border-radius:99rem;
  font-size:1.1rem;
  font-weight:700;
  color:var(--rv-accent);
}
#reasons .rv-course__title{
  position:relative;
  z-index:1;
  display:grid;
  margin-top:auto;
  font-size:2.4rem;
  font-weight:900;
  line-height:1.2;
}
#reasons .rv-course__title small{ font-size:1.3rem; font-weight:700; opacity:.85; }
#reasons .rv-course__lessons{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:.8rem;
  font-size:1.2rem;
  font-weight:700;
  color:var(--rv-accent);
}
#reasons .rv-course__lessons svg{ width:1.2rem; height:1.2rem; }
/* ツールのロゴ：白い角丸の台に乗せて右上へ */
#reasons .rv-course__logo{ position:absolute; top:2rem; right:2rem; display:grid; place-items:center; width:7.2rem; height:7.2rem; border-radius:1.6rem; background:#fff; }
#reasons .rv-course__logo img{ width:4.2rem; height:4.2rem; }
#reasons .rv-course__icon{
  position:absolute;
  right:-1.2rem;
  top:-.8rem;
  width:12rem;
  height:12rem;
  opacity:.16;
  transform:rotate(-8deg);
}
#reasons .rv-courses__note{ margin-top:1.2rem; padding-inline:2rem; font-size:1.1rem; color:#8a8384; text-align:center; }
/* ===== REASON 02・03 の下のインフォグラフィック（実写写真＋図） ===== */
#reasons .rx-route,
#reasons .rx-team{
  grid-column:1 / -1;
  display:grid;
  gap:3.2rem;
  margin-top:-1.6rem;
  order:3;   /* 左右反転の行（本文が order:2）でも本文の下に来るように */
}
#reasons .rx-note{ margin-top:1.2rem; font-size:1.1rem; color:#8a8384; }
/* 02：働き方別ロードマップ。タブで切り替え、1枚の大きなカードに写真（左）と横のロードマップ（右）。影はつけない */
#reasons .rx-route{ display:block; }
#reasons .rx-route__title{ display:flex; align-items:baseline; justify-content:center; gap:1.2rem; font-size:2.2rem; font-weight:900; color:var(--c-cream); }
#reasons .rx-route__title small{ font-size:1.2rem; font-weight:700; color:#a59c9c; }
/* タブ：選択中は下のカードと同じ地でつながり、上辺に働き方の色 */
#reasons .rx-route__tabs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.4rem; margin-top:2.4rem; }
#reasons .rx-route__tab{
  --tone:#c9a45c;
  display:grid;
  gap:.2rem;
  padding:1.4rem 1.6rem 1.2rem;
  border:0;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 .3rem 0 rgba(255,255,255,.1);
  color:#a59c9c;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .2s, color .2s;
}
#reasons .rx-route__tab--red{ --tone:var(--bg-top); }
#reasons .rx-route__tab--orange{ --tone:var(--c-orange); }
#reasons .rx-route__tab--cream{ --tone:#8a7a6a; }
#reasons .rx-route__tab span{ font-size:1.1rem; font-weight:700; letter-spacing:.1em; }
#reasons .rx-route__tab b{ font-size:1.8rem; font-weight:900; line-height:1.3; }
#reasons .rx-route__tab:hover{ background:rgba(255,255,255,.12); color:var(--c-cream); }
#reasons .rx-route__tab[aria-selected="true"]{ background:#f4f2f2; box-shadow:inset 0 .5rem 0 var(--tone); color:var(--c-ink); }
#reasons .rx-route__tab[aria-selected="true"] span{ color:var(--tone); }
/* 大きなカード */
#reasons .rx-route__panel{ display:grid; grid-template-columns:30% 1fr; background:#f4f2f2; color:var(--c-ink); }
#reasons .rx-route__panel[hidden]{ display:none; }
#reasons .rx-route__photo{ position:relative; min-height:100%; }
#reasons .rx-route__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#reasons .rx-route__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(40,32,33,.85)); }
#reasons .rx-route__photo figcaption{ position:absolute; left:2.4rem; bottom:2rem; z-index:1; display:grid; color:#fff; }
#reasons .rx-route__photo figcaption span{ font-size:1.2rem; letter-spacing:.1em; color:var(--c-yellow); }
#reasons .rx-route__photo figcaption b{ font-size:2.6rem; font-weight:900; line-height:1.3; }
#reasons .rx-route__body{ padding:3.2rem 3.6rem 3.6rem; }
#reasons .rx-route__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; }
#reasons .rx-route__plan{ padding:.4rem 1.2rem; background:var(--c-sumi); color:var(--c-cream); font-size:1.3rem; font-weight:700; }
#reasons .rx-route__term{ font-size:1.4rem; font-weight:700; }
#reasons .rx-route__term b{ margin-inline:.2rem; font-size:2.8rem; color:var(--bg-bottom); line-height:1; }
/* 横のロードマップ：1列＝1ヶ月。右端の列はゴール */
#reasons .rx-route__plot{
  display:grid;
  grid-template-columns:repeat(var(--m), minmax(0, 1fr)) 15rem;
  grid-template-rows:auto auto 1fr;
  column-gap:0;
  margin-top:2.4rem;
}
#reasons .rx-route__ticks{ grid-column:1 / -2; display:grid; grid-template-columns:repeat(var(--m), minmax(0, 1fr)); list-style:none; }
#reasons .rx-route__ticks li{ padding:0 0 .6rem .2rem; border-left:1px dashed #cfc6c6; font-size:1.6rem; font-weight:700; color:#8a8384; line-height:1; }
#reasons .rx-route__ticks small{ margin-left:.2rem; font-size:1rem; }
/* 期間の帯：矢羽根の形でつなぐ */
#reasons .rx-seg{
  --rx-tone:#c9a45c;
  grid-row:2;
  display:flex;
  align-items:center;
  height:4rem;
  margin-right:-1.2rem;
  padding:0 2rem 0 2.4rem;
  background:var(--rx-tone);
  color:#fff;
  font-size:1.4rem;
  font-weight:900;
  clip-path:polygon(0 0, calc(100% - 1.4rem) 0, 100% 50%, calc(100% - 1.4rem) 100%, 0 100%, 1.4rem 50%);
}
#reasons .rx-seg:first-of-type{ clip-path:polygon(0 0, calc(100% - 1.4rem) 0, 100% 50%, calc(100% - 1.4rem) 100%, 0 100%); padding-left:1.4rem; }
/* ステップ：帯の下に同じ幅で。上辺に帯と同じ色 */
#reasons .rx-stage{
  --rx-tone:#c9a45c;
  grid-row:3;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin:1.6rem .8rem 0 0;
  padding:1.6rem 1.6rem 2rem;
  border-top:.4rem solid var(--rx-tone);
  background:#fff;
}
#reasons .rx-stage__no{ display:flex; align-items:baseline; gap:.4rem; font-size:1.1rem; font-weight:700; letter-spacing:.08em; color:var(--rx-tone); }
#reasons .rx-stage__no b{ font-size:3.2rem; line-height:1; letter-spacing:0; }
#reasons .rx-stage__when{ display:none; }
#reasons .rx-stage__label{ font-size:1.7rem; font-weight:900; line-height:1.45; }
#reasons .rx-stage__text{ font-size:1.3rem; line-height:1.8; color:#5d5556; }
/* 帯とステップの色（基本の金のあとに書いて上書きする） */
#reasons .rx-seg--red, #reasons .rx-stage--red{ --rx-tone:var(--bg-top); }
#reasons .rx-seg--ink, #reasons .rx-stage--ink{ --rx-tone:var(--c-sumi); }
/* ゴール：右端の列。帯からステップの下までの高さ */
#reasons .rx-route__goal{
  grid-column:-2 / -1;
  grid-row:2 / 4;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.8rem;
  margin-left:2rem;
  padding:2rem 1.8rem;
  background:linear-gradient(160deg, var(--bg-top), var(--bg-bottom));
  color:#fff;
  font-size:1.8rem;
  font-weight:900;
  line-height:1.5;
}
#reasons .rx-route__goal svg{ width:3.2rem; height:3.2rem; color:var(--c-yellow); }
#reasons .rx-route__goal span{ font-size:1.2rem; letter-spacing:.14em; color:var(--c-yellow); }
#reasons .rx-route .rx-note{ text-align:center; }
/* 03：上に「コーチ ― あなた ― メンター」の写真カード、下に赤い帯で数字（横棒グラフ＋大きな数字） */
#reasons .rx-team{ display:block; }
#reasons .rx-team__title{ font-size:2.2rem; font-weight:900; text-align:center; color:var(--c-cream); }
/* 3つの円の図（大きな円の上にコーチ・メンター・学習サポート、中央にあなた） */
#reasons .rx-trio{
  position:relative;
  max-width:104rem;
  aspect-ratio:1040 / 560;
  margin:2.4rem auto 0;
}
#reasons .rx-trio__ring{ position:absolute; inset:0; width:100%; height:100%; }
/* 縁を走る光：円の中心(520,300)を軸に回す */
#reasons .rx-ring-run{ transform-box:view-box; transform-origin:520px 300px; animation:rx-ring-run 9s linear infinite; }
@keyframes rx-ring-run{ to{ transform:rotate(360deg); } }
@property --rx-a{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes rx-ring-spin{ to{ --rx-a:360deg; } }
@media (prefers-reduced-motion: reduce){
  #reasons .rx-ring-run{ animation:none; display:none; }
  #reasons .rx-trio::before{ animation:none; }
}
#reasons .rx-node{
  position:absolute;
  display:grid;
  place-items:center;
  width:17.6rem;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:50%;
  border:.4rem solid var(--rx-c);
  background:var(--reason-red);
  transform:translate(-50%, -50%);
  box-shadow:0 0 0 .8rem var(--reason-red), 0 1.6rem 3.2rem rgba(0,0,0,.4);
}
#reasons .rx-node--coach{ --rx-c:var(--bg-top); }
#reasons .rx-node--mentor{ --rx-c:#c9a45c; }
#reasons .rx-node--support{ --rx-c:#8e2a29; }
#reasons .rx-node img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 15%; }
#reasons .rx-node--coach img{ object-position:center 32%; }   /* 縦長の写真なので、顔が下の文字にかからない位置まで下げて見せる */
#reasons .rx-node:has(img)::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(30,22,23,.85));
}
#reasons .rx-node p{ position:relative; z-index:1; display:grid; justify-items:center; align-self:end; margin-bottom:2.4rem; color:#fff; text-align:center; }
#reasons .rx-node p span{ font-size:1.1rem; letter-spacing:.16em; color:var(--c-yellow); }
#reasons .rx-node p b{ font-size:1.8rem; font-weight:900; line-height:1.3; }
#reasons .rx-trio__list{ position:absolute; display:grid; gap:.6rem; list-style:none; color:var(--c-cream); }
#reasons .rx-trio__list li{ font-size:1.4rem; font-weight:700; }
#reasons .rx-trio__list li:not(.rx-trio__view)::before{ content:"・"; color:var(--rx-c); }
#reasons .rx-trio__role{ display:none; }   /* SPのカードだけで出す役割名 */
#reasons .rx-trio__view{ margin-bottom:.4rem; font-size:1.2rem !important; font-weight:900; color:var(--rx-c); letter-spacing:.08em; }
#reasons .rx-trio__list--coach{ --rx-c:#e0706f; left:61%; top:4%; }
#reasons .rx-trio__list--mentor{ --rx-c:#d9b56c; right:80%; top:60%; text-align:right; }
#reasons .rx-trio__list--support{ --rx-c:#e0706f; left:80%; top:60%; }
#reasons .rx-trio__center{
  position:absolute;
  left:50%;
  top:56%;
  display:grid;
  justify-items:center;
  gap:.8rem;
  transform:translate(-50%, -50%);
  color:var(--c-cream);
  text-align:center;
}
#reasons .rx-trio__you{
  width:11.2rem;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:50%;
  border:.3rem solid var(--c-cream);
}
#reasons .rx-trio__you img{ width:100%; height:100%; object-fit:cover; }
#reasons .rx-trio__center b{ font-size:2.2rem; font-weight:900; line-height:1.2; }
/* AIの学習を支える数字（バイテックの数字）：左に写真つきの大きな数字、右に 2×2 のカード */
#reasons .rx-num{ margin-top:5.6rem; }
#reasons .rx-num__head{ text-align:center; }
#reasons .rx-num__en{ font-size:1.3rem; letter-spacing:.24em; color:var(--c-yellow); }
#reasons .rx-num__title{ margin-top:.4rem; font-size:2.6rem; font-weight:900; color:var(--c-cream); }
#reasons .rx-num__lead{ margin-top:.8rem; font-size:1.4rem; color:#bdb3b3; }
#reasons .rx-num__grid{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:1.6rem;
  margin-top:2.8rem;
}
#reasons .rx-num__lead-card{
  position:relative;
  grid-row:1 / 3;
  display:flex;
  align-items:flex-end;
  min-height:36rem;
  overflow:hidden;
  border-radius:.8rem;
  color:#fff;
  box-shadow:0 1.6rem 3.2rem rgba(0,0,0,.3);
}
#reasons .rx-num__lead-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#reasons .rx-num__lead-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(193,65,64,.15) 0%, rgba(167,52,51,.75) 45%, rgba(122,34,33,.96) 100%);
}
#reasons .rx-num__lead-card > div{ position:relative; z-index:1; padding:3.2rem; }
#reasons .rx-num__lead-card .rx-num__value{ font-size:8rem; color:#fff; }
#reasons .rx-num__lead-card .rx-num__label{ color:var(--c-yellow); }
#reasons .rx-num__text{ margin-top:.8rem; font-size:1.3rem; line-height:1.8; }
#reasons .rx-num__card{
  display:grid;
  align-content:center;
  justify-items:start;
  gap:.6rem;
  padding:2.4rem 2.4rem 2.4rem 2.8rem;
  border-radius:.8rem;
  background:#f4f2f2;
  color:var(--c-ink);
}
#reasons .rx-num__label{ font-size:1.4rem; font-weight:900; }
#reasons .rx-num__label sup{ margin-left:.2rem; font-size:.9rem; font-weight:700; opacity:.7; }
#reasons .rx-num__value{ font-size:5.2rem; font-weight:900; line-height:1; color:var(--bg-bottom); }
#reasons .rx-num__value small{ margin-left:.3rem; font-size:1.6rem; }
#reasons .rx-num__value .rx-num__pre{ margin:0 .4rem 0 0; font-size:1.4rem; }
#reasons .rx-num__icon{
  display:grid;
  place-items:center;
  width:4.4rem;
  height:4.4rem;
  border-radius:50%;
  background:#fbe9e9;
  color:var(--bg-top);
}
#reasons .rx-num__icon svg{ width:2.4rem; height:2.4rem; }
/* 割合はドーナツで見せる（--p＝％） */
#reasons .rx-num__ring{
  width:4.4rem;
  height:4.4rem;
  border-radius:50%;
  background:
    radial-gradient(closest-side, #f4f2f2 68%, transparent 70%),
    conic-gradient(var(--bg-top) calc(var(--p) * 1%), #e3dcdc 0);
}
#reasons .rx-num__notes{ display:flex; flex-wrap:wrap; gap:.2rem 1.6rem; margin-top:1.6rem; font-size:1.1rem; color:#8a8384; }

/* =========================================================
   8. Flow
   ========================================================= */
#flow{
  color:var(--c-cream);
  padding-block:12rem;
  overflow:hidden;
}
#flow .flow-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.6rem;
  margin:0;
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-cream);
  font-size:3.2rem;
  letter-spacing:.06em;   /* 見出しは字間を少し広げる */
  line-height:1.39;
}
#flow .flow-title__mouth{
  width:2.6rem;
  height:2.1rem;
  flex:0 0 auto;
}
/* カード4枚を横並び（薄グレーのカード + 幅いっぱいの黒いSTEPピル） */
#flow .flow-steps{
  --flow-gap:4rem;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--flow-gap);
  margin-top:5.6rem;
  list-style:none;
}
#flow .flow-step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:2.4rem 2rem 3.2rem;
  background:var(--c-gray-bg);
  border-radius:.8rem;
  color:var(--c-ink);
  text-align:center;
}
/* カードの間の矢印（右向きの三角） */
#flow .flow-step + .flow-step::before{
  content:"";
  position:absolute;
  left:calc(var(--flow-gap) / -2);
  top:50%;
  transform:translate(-40%, -50%);
  border-style:solid;
  border-width:1.2rem 0 1.2rem 1.6rem;
  border-color:transparent transparent transparent var(--bg-top);
}
#flow .flow-step__no{
  align-self:stretch;
  padding:.8rem 1rem;
  border-radius:99rem;
  background:var(--c-sumi);
  color:#fff;
  font-family:var(--f-num);
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:.06em;
  line-height:1.4;
}
#flow .flow-step__head{
  margin-top:2rem;
  font-family:var(--f-jp);
  font-weight:900;
  font-size:2rem;
  line-height:1.4;
}
#flow .flow-step__text{
  margin-top:2.4rem;
  font-weight:500;
  font-size:1.3rem;
  line-height:1.9;
}

/* 伴走体制の帯：上下に赤い線、上の線の中央にラベル */
#flow .flow-support{
  position:relative;
  margin-top:6.4rem;
  padding:4.8rem 2rem 4rem;
  border-block:.3rem solid var(--bg-top);
  text-align:center;
}
#flow .flow-support__label{
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%, -50%);
  padding:.8rem 2.4rem;
  border-radius:99rem;
  background:var(--bg-top);
  color:#fff;
  font-weight:900;
  font-size:1.6rem;
  line-height:1.4;
  white-space:nowrap;
}
#flow .flow-support__sub{
  font-weight:700;
  font-size:1.8rem;
  line-height:1.5;
}
#flow .flow-support__sub::before{ content:"＼"; margin-right:1.6rem; }
#flow .flow-support__sub::after{ content:"／"; margin-left:1.6rem; }
#flow .flow-support__main{
  margin-top:2rem;
  font-weight:900;
  font-size:2.2rem;
  line-height:1.8;
}
#flow .flow-support__main em{
  display:inline-block;
  margin-inline:.4rem;
  padding:0 1rem;
  border-radius:.6rem;
  background:var(--bg-top);
  color:#fff;
  font-style:normal;
  font-size:2.6rem;
  line-height:1.5;
}
#flow .flow-br-sp{ display:none; }

/* ---------- スマホ画面のイメージ（HTML/CSS で描く） ---------- */
#flow .flow-phone{
  width:17rem;
  margin-top:2.4rem;
  padding:.8rem;
  border-radius:2.8rem;
  background:var(--c-sumi);
  box-shadow:0 1.2rem 2.4rem rgba(0,0,0,.12);
}
#flow .flow-phone__screen{
  position:relative;
  height:30rem;
  overflow:hidden;
  border-radius:2.1rem;
  background:#f6f6f6;
  font-size:1rem;
  line-height:1.5;
  text-align:left;
}
/* 上部のノッチ */
#flow .flow-phone__screen::before{
  content:"";
  position:absolute;
  left:50%;
  top:.6rem;
  z-index:2;
  width:5.6rem;
  height:1.4rem;
  border-radius:99rem;
  background:var(--c-sumi);
  transform:translateX(-50%);
}
#flow .fp-bar{
  padding:2.8rem 1.2rem 1rem;
  background:#fff;
  border-bottom:1px solid #ececec;
  font-weight:700;
  font-size:1.1rem;
  text-align:center;
}
/* 1. 予約フォーム */
#flow .flow-phone--form .flow-phone__screen{ background:#f4f6fa; }
#flow .fp-form{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:1.2rem 1rem;
}
#flow .fp-field span{
  display:block;
  font-size:.85rem;
  font-weight:700;
  color:#555;
}
#flow .fp-field i{
  display:block;
  margin-top:.3rem;
  padding:.5rem .7rem;
  border:1px solid #d6dbe3;
  border-radius:.5rem;
  background:#fff;
  font-style:normal;
  color:#333;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#flow .fp-slots{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
#flow .fp-slots span{
  padding:.5rem;
  border:1px solid #d6dbe3;
  border-radius:.5rem;
  background:#fff;
  font-weight:700;
  text-align:center;
  color:var(--c-cta);
}
#flow .fp-slots .is-on{ background:var(--c-cta); border-color:var(--c-cta); color:#fff; }
#flow .fp-submit{
  margin-top:.4rem;
  padding:.7rem;
  border-radius:99rem;
  background:var(--c-cta);
  box-shadow:0 .25rem 0 #0e3489;
  color:#fff;
  font-weight:900;
  text-align:center;
}
/* 2. オンライン面談 */
#flow .flow-phone--call .flow-phone__screen{ background:#3a3f47; }
#flow .fp-video{
  position:absolute;
  inset:0 0 5.6rem;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, #5b6470 0%, #444b55 100%);
}
/* ビデオ通話の映像（fal.ai で作った写真）。画面いっぱいに敷く */
#flow .fp-video__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
}
#flow .fp-self img{
  width:100%;
  height:100%;
  object-fit:cover;
}
#flow .fp-person{
  position:relative;
  width:7.2rem;
  height:9.6rem;
}
#flow .fp-person::before,
#flow .fp-person::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:#d9dde3;
}
#flow .fp-person::before{ top:0; width:4rem; height:4rem; border-radius:50%; }
#flow .fp-person::after{ bottom:0; width:7.2rem; height:4.8rem; border-radius:3.6rem 3.6rem 0 0; }
#flow .fp-name{
  position:absolute;
  left:1rem;
  bottom:1rem;
  padding:.2rem .8rem;
  border-radius:.4rem;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-weight:700;
}
#flow .fp-self{
  position:absolute;
  right:1rem;
  top:3rem;
  width:4.4rem;
  height:6rem;
  display:grid;
  place-items:center;
  border-radius:.6rem;
  background:#7d8794;
  overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,255,255,.7);
}
#flow .fp-person--s{ width:3rem; height:4rem; }
#flow .fp-person--s::before{ width:1.6rem; height:1.6rem; }
#flow .fp-person--s::after{ width:3rem; height:2rem; border-radius:1.5rem 1.5rem 0 0; }
#flow .fp-controls{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:5.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.2rem;
}
#flow .fp-controls i{
  width:3rem;
  height:3rem;
  border-radius:50%;
  background:#5b6470;
}
#flow .fp-controls .is-end{ background:#e5484d; }
/* 3. プラン提案 */
#flow .fp-plan{
  margin:1.2rem 1rem 0;
  padding:1.2rem;
  border-radius:.8rem;
  background:var(--bg-top);
  color:#fff;
  text-align:center;
}
#flow .fp-plan__label{ font-size:.9rem; color:var(--c-yellow); font-weight:700; }
#flow .fp-plan__name{ margin-top:.2rem; font-size:1.15rem; font-weight:900; white-space:nowrap; }
#flow .fp-plan__period{ font-size:1rem; opacity:.85; }
#flow .fp-list,
#flow .fp-lessons{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin:1.2rem 1rem 0;
  list-style:none;
}
#flow .fp-list li,
#flow .fp-lessons li{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.7rem .8rem;
  border-radius:.6rem;
  background:#fff;
  font-weight:700;
}
#flow .fp-list li::before,
#flow .fp-lessons li::before{
  content:"";
  flex:none;
  width:1.2rem;
  height:1.2rem;
  border-radius:50%;
  background:var(--bg-top);
}
/* 4. 受講スタート */
#flow .fp-progress{
  margin:1.2rem 1rem 0;
  padding:1rem;
  border-radius:.8rem;
  background:#fff;
  font-weight:700;
}
#flow .fp-progress b{ color:var(--bg-bottom); }
#flow .fp-progress__bar{
  display:block;
  height:.6rem;
  margin-top:.6rem;
  border-radius:99rem;
  background:#eee;
  overflow:hidden;
}
#flow .fp-progress__bar i{
  display:block;
  width:35%;
  height:100%;
  background:var(--bg-top);
}
#flow .fp-lessons li::before{ background:#ddd; }
#flow .fp-lessons .is-done::before{ background:#21a366; }
#flow .fp-lessons .is-done{ color:#999; }

/* =========================================================
   9. CTA
   ========================================================= */
#cta{
  padding-block:10rem;   /* 墨地の中にCTAのピルを浮かせる */
}
/* =========================================================
   10. FAQ（橙ピル＝デザイン d10 準拠）
   ========================================================= */
/* overflow:hidden は付けない（band--bleed の全幅マーキーを1440で切らないため。マーキーはレール側でクリップ） */
#faq{
  position:relative;
  color:var(--c-cream);
  padding-bottom:9.6rem;
}
#faq .band{
  min-height:40.5rem;
}
#faq .faq-body{
  padding:0 8rem;
}
#faq .faq-list{
  display:flex;
  flex-direction:column;
  gap:2rem;
}
#faq .faq-item{
  position:relative;
  background:var(--c-orange);
  border-radius:0;   /* 長方形（角丸なし） */
  overflow:hidden;
  transition:background-color .25s ease, box-shadow .25s ease;
}
/* hover / open でクリーム反転（動画準拠）：地→cream、Q.と＋/×→オレンジ、質問・回答→濃色 */
#faq .faq-item:hover,
#faq .faq-item.is-open{
  background:var(--c-cream);
}
/* hover でドロップシャドウ（数値はお好みで調整可） */
#faq .faq-item:hover{
  box-shadow:0 1.2rem 3.2rem rgba(0,0,0,.18);
}
#faq .faq-item:hover .faq-q__label,
#faq .faq-item.is-open .faq-q__label{
  color:var(--c-orange);
}
#faq .faq-item:hover .faq-q__text,
#faq .faq-item.is-open .faq-q__text{
  color:var(--c-black);
}
#faq .faq-item:hover .faq-q__icon::before,
#faq .faq-item:hover .faq-q__icon::after,
#faq .faq-item.is-open .faq-q__icon::before,
#faq .faq-item.is-open .faq-q__icon::after{
  background:var(--c-orange);
}
#faq .faq-q{
  display:flex;
  align-items:flex-start;
  gap:1.4rem;
  width:100%;
  padding:2.4rem 7.2rem 2.4rem 3.2rem;   /* 右は＋アイコン分 */
  border:0;
  background:transparent;
  color:var(--c-cream);
  text-align:left;
  cursor:pointer;
}
#faq .faq-q__label{
  flex:none;
  padding-top:0.8rem;
  font-size:1.6rem;
  line-height:1;
  color:var(--c-cream);
  transition:color .2s ease;
}
#faq .faq-q__text{
  flex:1 1 0;
  min-width:0;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:1.8rem;
  line-height:2.4rem;
  color:var(--c-cream);
  transition:color .2s ease;
}
/* アイコンは faq-item 直下に移動 → item基準で絶対配置（右上・質問行に縦中央）。クリックはボタンへ通す */
#faq .faq-q__icon{
  position:absolute;
  top:40%;
  right:3.2rem;
  width:2rem;
  height:2rem;
  pointer-events:none;
  transition:transform .3s ease;
}
#faq .faq-q__icon::before,
#faq .faq-q__icon::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  background:var(--c-cream);
  transform:translate(-50%,-50%);
  transition:transform .3s ease, background-color .2s ease;
}
#faq .faq-q__icon::before{
  width:100%;
  height:0.24rem;
}
#faq .faq-q__icon::after{
  width:0.24rem;
  height:100%;
}
#faq .is-open .faq-q__icon{
  transform:rotate(45deg);
}
#faq .faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
#faq .is-open .faq-a{
  grid-template-rows:1fr;
}
/* 閉じているときは visibility:hidden で支援技術からも外す。grid-template-rows:0fr ＋
   overflow:hidden だけでは高さ0でもスクリーンリーダーが読み上げてしまうため。
   visibility は離散的に切り替わる＝開くときは即 visible、閉じるときは .35s 後に hidden
   になるので、閉じるアニメーションは従来どおり見える */
#faq .faq-a__inner{
  display:flex;
  align-items:flex-start;
  gap:1.4rem;
  min-height:0;
  overflow:hidden;
  padding:0 6.4rem 0 3.2rem;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, padding .35s ease, visibility .35s;
}
#faq .is-open .faq-a__inner{
  padding:0 6.4rem 2.6rem 3.2rem;
  opacity:1;
  visibility:visible;
}
/* A. ラベルは動画に無いので非表示（幅は残して回答を質問テキストに揃える）。回答はcream地なので濃色 */
#faq .faq-a__label{
  visibility:hidden;
  flex:none;
  padding-top:0.3rem;
  font-weight: 500;
  font-size:1.4rem;
  line-height:1;
}
#faq .faq-a__inner p{
  flex:1 1 0;
  min-width:0;
  font-family:var(--f-jp);
  font-size:1.6rem;
  line-height:1.75;
  color:var(--c-black);
}

/* =========================================================
   11. Footer（クリーム地＝デザイン d11 準拠）
   ========================================================= */
/* フッター（.footer*）は common.css に移設（TOP/下層 共通・rem のまま） */

/* =========================================================
   ★★ レスポンシブ：タブレット / SP（≤1100px）  ※単一DOM＝同じ #hero/.fv-* を再配置・1rem=10px@375 ★★
   ・>1100px           ：PC（上の等比リキッド min(10px,100vw/144,100vh/90)）
   ・800〜1100px        ：タブレット帯 .home 650px 中央（37.5rem×17.33px）＋両サイド bk_bg（iPad Air/Pro）
   ・600〜800px         ：iPad Mini帯 .home 600px 中央（37.5rem×16px）＝フキダシ収まるよう縮小
   ・600px以下          ：スマホ 幅追従フル幅（1rem = 100vw/37.5）
   別DOMは作らない（本文重複回避）。Figma SP = 300:463。
   ========================================================= */
@media (max-width: 1100px){
  /* コンテンツ幅(.home = 1rem×37.5)の4段階制御：
       800〜1100px … 1rem 17.33px → .home 650px 中央（タブレット帯：iPad Air820 / Pro1000+）
       600〜800px  … 1rem 16px → .home 600px 中央（iPad Mini帯：フキダシが収まるよう縮小。実機 Mini6=744 もここ）
       ≤600px      … 1rem 100vw/37.5 → .home 100vw フル幅（スマホ）
     ※ cream/reasonパネル/pill 等は 37.5rem・100%・.home基準なので各段に自動追従。 */
  html{
    font-size: calc(650px / 37.5);
  }   /* .home=650px 中央（旧750px→タブレット縦がゆったり収まるよう縮小・確定） */
  @media (max-width: 800px){
    html{
      font-size: 16px;
    }
  }   /* iPad Mini帯：.home=600px */
  @media (max-width: 600px){
    html{
      font-size: calc(100vw / 37.5);
    }
  }   /* スマホ：幅追従フル幅 */
  /* ページ枠：段階に応じて 750/600/100vw（.home=37.5rem） */
  .home{
    width:37.5rem;
  }
  /* スナップは Case下端のナビ(.case-nav)のみ。#cases自体に付けると背が高く(オーバーサイズ)Chromeが
     上端でもスナップしてしまうため、ビューポートに収まる .case-nav に end で付けて単一の下端スナップにする。 */
  /* .footer-inner / .footer SP は common.css に移設 */

  /* ===== Hero（SP：100dvh を flex縦で埋める。要素サイズ=幅基準(1rem)、余りは .fv-copy の
     space-between でコンテンツ間に分配＝高い端末ほど間隔が広がる。高さ項 min(…,100dvh/K) で
     短い端末は縮小して収める（K≒中身の積み上げ高さ・em。iPad mini縦など幅広短尺の溢れ防止も兼ねる）。 ===== */
  .hero{
    width:37.5rem;
    min-height:100dvh;
    overflow:hidden;
    clip-path:none;
    z-index:1;   /* casesバウンドが上に出た時、casesを手前(z-index:2)に。heroをstacking context化して子要素(person等)も cases より奥に */
    display:flex;
    flex-direction:column;
    align-items:center;   /* 中身(.fv-inner=37.5em)を中央寄せ。タブレット横向き等の低背でfontが縮んでも左寄りにしない（SPは幅一致で実質no-op） */
    font-size:min(1rem, calc(100dvh / 74));   /* K=74（実績バッジを足した分、中身の積み上げ高さが増えたので 66→74） */
  }
  .fv-inner{
    position:relative;
    left:auto;
    top:auto;
    width:37.5em;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-block: max(env(safe-area-inset-top), 2em) max(env(safe-area-inset-bottom), 2em);
  }
  /* SP：斜めリード英字マーキー（器を回転＝base の translate+rotate(8deg) を継承）。
     hero上部の帯として薄く流す。幅は全幅超(vw)・グリフは PC比≈0.41（旧SVGサイズ相当）。 */
  .fv-lead{
    left:50%;
    top:8em;   /* ロゴのすぐ下・人物の頭の後ろ（人物より奥） */
    width:160vw;
    height:14em;
    opacity:.45;   /* 人物を邪魔しないよう薄く */
  }
  .fv-lead__txt{
    font-size:8.4em;
  }
  .fv-logo{
    left:1em;
    top:1.9em;
    width:11em;
  }   /* ロゴ差し替え版 Figma SP 3001:3768 = 110×27 @ (10,19) */
  /* ロゴ下の導線：ロゴ下端(1.9+2.65=4.55em)の下に置く。器は font-size 等倍のまま＝em基準が揃う */
  .fv-biz{
    left:1em;
    top:5.2em;
  }
  /* SP もロゴ幅（375px時 110px）に合わせる。11文字入るので font-size は 0.8em＝8px まで落ちる（実測 114px） */
  .fv-biz__link{
    gap:0.5em;
    padding:0.7em 1.0em;
    border-width:1px;
    font-size:0.8em;
  }
  .fv-sub{
    left:auto;
    right:1.5em;
    top:1.9em;
    align-items:flex-end;
    gap:0.2em;
  }
  .fv-sub__lead{
    font-size:0.9em;
  }
  .fv-sub__main{
    gap:0.7em;
    font-size:1.3em;
  }
  /* コピー枠：100dvh を flex:1 で埋め、[topspace][unit(見出し＋図版)][CTA] を space-between で3分配。
     余りは「topspace↔unit」「unit↔CTA」に入る＝ユニット内は密着のまま、CTAは下固定。 */
  .fv-copy{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    width:33.5em;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;   /* 上詰め：ヘッダー直下から画像を置き、余りは CTA の上に回す */
    align-items:center;
    gap:0;
    z-index:5;
  }
  .fv-copy__cta{ margin-top:auto; padding-top:1.2em; }   /* 低い端末でも見出しとの間を空ける */
  /* 最上グループ：logo/sub の高さ分のスペーサ（logo/subは絶対配置でこの上に乗る） */
  .fv-topspace{
    display:block;
    flex:none;
    height:1.6em;
  }
  /* 中央グループ：見出し＋図版のユニット（内部は密着＝デザイン間隔） */
  .fv-unit{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
    flex:none;
  }
  .fv-copy__img{
    width:26.2em;
    z-index:4;
  }   /* SPコピー＝PC版(fv_maintext01)と同一3行→流用 */
  .fv-copy__cta{
    gap:.5em;
  }
  .fv-toeic{
    font-size:1.4em;
    gap:0.3em;
    line-height:1.4;
  }
  .fv-toeic__n{
    font-size:1.7em;
  }   /* Figma SP: 400=24px / TOEIC=14px ＝ 24/14≒1.7em（2.4emは行が94%幅で右端はみ出し→86%に是正） */
  .fv-toeic__deco{
    display:none;
  }
  .fv-starnote{
    font-size:1.2em;
    gap:0.4em;
  }
  .fv-starnote__n{
    font-size:1.6em;
  }
  .fv-star{
    width:1.6em;
  }
  .fv-btn{
    width:100%;
    height:3.6em;   /* Figma bt=335×56 準拠 */
    padding:0 2em;
    font-size:1.6em;
    margin-top:0;
  }
  /* ===== SPヒーロー図版：PCの個別要素（人物/飛沫）は隠し、焼き込み3コマを表示 ===== */
  .fv-splash,
  .fv-person,
  .fv-awards{
    display:none;
  }
  /* 焼き込み3コマ（em＝キャンバス基準・375=37.5em）。中身は maintext と CTA の間に配置。※位置は要視覚調整 */
  /* SPの人物（2人の重ね）：画面幅いっぱい。下端は背景へフェードさせて切れ目を見せない */
  .fv-figure-sp{
    display:block;
    position:relative;   /* flow配置（maintextとCTAの間）。人物は内部で絶対重ね */
    width:37.5rem;   /* 枠は常に画面幅。低い画面で em が縮んでも、右端で人物が切れないように */
    height:43em;
    margin-inline:calc((100% - 37.5rem) / 2);
    z-index:1;
    -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 72%, transparent 100%);
  }
  /* SPは画像が上・コピーが下。コピーは画像のフェード部分に少し重ねる */
  .fv-figure-sp{ order:-1; margin-top:-5.5em; }   /* 人物を少し上げる（下のフェードも一緒に動く） */
  .fv-unit .fv-copy__text{ margin-top:1em; }
  .fv-awards__note{
    display:none;
  }
  .fv-awards-sp__note{
    display:block;
    position:relative;
    width:35rem;
    flex:none;
    margin-top:.3rem;
    color:#fff;
    font-size:1rem;
    line-height:1.4;
    text-align:center;
    z-index:4;
  }
  /* 実績バッジ（横1列）。人物のフェードに重ねて、見出しの上に置く。
     座標は画像（2111×652）上のリボン・円の中心。文字サイズは PC の約0.74倍（バッジの幅の比） */
  .fv-awards-sp{
    display:block;
    position:relative;
    width:37rem;   /* 低い画面で em が縮んでも、常に画面幅いっぱい（文字は cqw なので一緒に大きくなる） */
    flex:none;
    margin-top:calc(-1.3em - 11.43rem);   /* 人物の胸元に重ねる。バッジの高さ(11.43rem)と注記の分は上に伸ばし、下の見出しやCTAを押し下げない */
    z-index:4;
    container-type:inline-size;
    filter:drop-shadow(0 0.6em 1.2em rgba(60,10,10,.35));
  }
  .fv-award--sp1{ --x:15.85%; }
  .fv-award--sp2{ --x:49.95%; }
  .fv-award--sp3{ --x:84.06%; }
  .fv-awards-sp .fv-award{ --rib:16.1%; --mid:57%; }
  .fv-awards-sp .fv-award dt{ font-size:3.1cqw; }
  .fv-awards-sp .fv-award dd{ gap:1cqw; }
  .fv-awards-sp .fv-award dd small{ font-size:2.6cqw; }
  .fv-awards-sp .fv-award dd span{ font-size:3.1cqw; }
  .fv-awards-sp .fv-award dd b{ font-size:3.1em; }
  .fv-awards-sp .fv-award--sp1 dd span{ font-size:2.8cqw; }
  .fv-awards-sp .fv-award--sp1 dd b{ font-size:2.3em; }
  .fv-awards-sp .fv-award--sp3 dd b{ font-size:3.9em; }   /* 1桁なので大きくしても収まる */
  /* 「受講費用のみ」は円が狭まる下のほうに来て葉に被るので、小さくして中身ごと少し上げる */
  .fv-awards-sp .fv-award--sp3{ --mid:55%; }
  .fv-awards-sp .fv-award--sp3 dd .fv-award__sub{ font-size:2.1cqw; letter-spacing:0; }
  .fv-awards-sp .fv-award dd .fv-award__sub{ font-size:2.4cqw; line-height:1.35; }
  .fv-figure-sp .fv-trio{ left:50%; right:auto; width:37.5em; transform:translateX(-50%); }   /* 人物の大きさは em のまま、中央に置く */
  .fv-figure-sp .fv-trio__p--m1{ left:-2%; width:68%; bottom:8%; }
  /* 画像の右端は画面の外に出る前提。幅が広い画面でも切れ目が見えないよう、右端をぼかす */
  .fv-figure-sp .fv-trio__p--w {
    left:28%;
    width:82%;
    -webkit-mask-image:linear-gradient(to right, #000 88%, transparent 100%);
            mask-image:linear-gradient(to right, #000 88%, transparent 100%);
  }
  .br-sp{
    display:inline;
  }   /* SP専用改行を有効化 */
  .br-pc{
    display:none;
  }   /* PC専用改行を無効化（SP/タブレットは折返しに任せる） */

  /* ===== 共通：帯 / コンテナ（SPは詰める・マーキーは控えめに） ===== */
  .l-1440{
    padding-inline:2rem;
  }
  .band{
    min-height:auto;
  }
  /* 背景の英字が流れる帯は、英字(8.4rem)が上下切れない高さを確保する（レールは帯の高さで切るため） */
  .band:not(.cases-band):has(> .band__rail){
    min-height:10.8rem;
  }
  .band__big{
    font-size:8.4rem;
  }
  .band__label{
    font-size:2.2rem;
    padding-left:2rem;
    gap:0.6rem;
    letter-spacing:-0.05rem;
  }
  .band__mouth{
    width:1.8rem;
  }

  /* ===== #cases（SP：Figma 307:2257「Career Change」を1画面 contain）=====
     構成＝マーキー帯 → クリーム大ブロブ(case_bubble_sp.svg)内にCase内容 → prev/next矢印。
     .cases-sticky に高さ contain 用の font-size を置き、内部は em で組む
     （1rem=root=min(20px,100vw/37.5)、高さ項 100dvh/KC の小さい方でキャンバスを縮小＝どの端末でも1画面）。 */
  /* cases は常に純100vw の全幅。モバイルはスクロールバー幅0なので端まで綺麗に届く
     （PC/タブレットで縦スクロールバーがある時のみ最大バー幅ぶん横に広がるが許容）。 */
  .cases{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }
  /* SP：cases バウンド(translateY)で上に出た分を hero に潜らせず手前に出す（clipで隠さず z-index で前面へ）。
     hero を z-index:1／cases を z-index:2＝casesが手前。バウンドは上方向のみなので下(jobs)は侵食しない。
     ※スクロール位置の揺れ（heroが揺れて見える件）は JS のバウンド中スナップ無効化で別途解決済み。 */
  .cases{
    z-index:2;
  }
  .cases-sticky{
    position:static;
    height:auto;
    min-height:auto;   /* 100dvh強制はやめる（Caseは1画面に収めない方針）＝内容高で流す */
    overflow:clip;   /* hidden だとスクロールコンテナ化して内側 .case-nav の scroll-snap-align がページに効かない。
                        clip はクリップのみ（コンテナ非生成）＝creamのはみ出しは切りつつ Caseの下端スナップは html基準で効く。 */
    padding:0;
    display:flex;
    flex-direction:column;
    /* 幅基準のみ（高さcontainを外す）。em比が幅に依らず一定＝creamが常に幅いっぱい＝両サイド余白が出ない。
       高さは内容なりに流す（SEで収まるかは各要素側で詰める）。 */
    font-size:1rem;
  }
  .cases-stage{
    position:static;
    inset:auto;
    --cb:0rem;
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  /* base の詳細度の高いルール（.cases-stage > .band / .case-slide > .case-fukidashi が
     position:absolute）を打ち消し、SPではフロー配置に戻す */
  .cases-stage > .band.cases-band{
    position:relative;
    margin:7% 0 calc(7% + 2.8em);   /* 下は吹き出しの上に置くタブ（.case-cats）のぶん広げる */
  }
  .case-slide > .case-fukidashi{
    position:relative;
  }

  /* マーキー帯：Career Change ＋ 👄 バイキャリ 転職のモデルケース 👄 */
  .cases-band{
    position:relative;
    width:100vw;
    height:8.4em;   /* SE1で Case1＋ナビまで収めるため帯を圧縮（旧13.3em）＝creanフキダシは不変で余白は出ない */
    min-height:0;
    flex:none;
    /* overflow はかけない：かけると g 等のディセンダ下カーブが切れる。マーキー周回分の
       横はみ出しは祖先 .cases-sticky{ overflow:clip } が 100vw でクリップするので不要。 */
    margin-bottom:-1em;
  }
  .cases-band .band__rail{
    position:relative;
    inset:auto;
    top:auto;
    bottom:auto;
    height:8.4em;
    align-items:center;
  }
  .cases-band .band__big{
    font-size:6.4em;
  }
  .cases-band .marquee__track{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
  }
  .cases-band .band__label{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    transform:translateY(-50%);
    justify-content:center;
    align-items:center;
    padding:0;
    gap:0.8em;
    font-size:1em;   /* PC用の大フォントをリセット＝contain基準に */
    line-height:1;
  }
  .cases-band .band__label span{
    font-size:1.8em;
    letter-spacing:-0.1em;
  }
  .cases-band .band__mouth{
    width:2em;
  }
  .case-baikyari{
    width:6.8em;
  }

  /* スライド＝ブロブが縦を埋める。活性のみ表示。人物/注釈はブロブ上に絶対配置。
     幅は 37.5em（＝contain フォントに連動）で比率を常に一定に保つ。 */
  .case-slide{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:37.5em;
    height:auto;
    margin:0 auto;
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    isolation:isolate;   /* バブル(z0)/内容(z1)/人物(z2) を本スライド内で確実に重ねる */
    opacity:1;
    visibility:visible;
    transition:none;
  }
  .case-slide:not(.is-active){
    display:none;
  }
  .case-slide > .case-hito{
    position:absolute;
  }
  .case-slide > .case-note{
    position:absolute;
  }

  /* ブロブ本体：case_bubble_sp.svg を背景に敷き、内容を内側 padding で収める */
  .case-fukidashi{
    position:static;
    left:auto;
    top:auto;
    width:37.5em;
    height:auto;
    flex:1;
    margin:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:3.4em 2.2em 7.5em 2.6em;   /* 上は圧縮。下は絶対配置の注釈(cream最下部)ぶんを確保して本文と重ならないように。左右は不変でcream端フィット維持 */
  }
  /* フキダシ図版＝case_bubble_sp.svg を img で敷く（背景imageだと一部環境で
     兄弟の人物描画が壊れるため要素で敷く）。内容の背面(z0)。
     ★背景だけ 100vw 全幅（中央）に敷き、内容コンテナ(.case-fukidashi=37.5em)は比率維持で中央。
     ＝「背景は幅いっぱい／内容は正しい比率」を両立。 */
  .case-bubble-bg{
    display:none;
  }
  .case-bubble-bg-sp{
    display:block;
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width:100vw;   /* creamは常に画面幅いっぱいにブリード（.case-slide中央から100vw）。タブレット帯(600〜1100px)で.homeが650/600px中央になっても両サイドにオレンジ地を出さない。内容(.case-fukidashi=37.5em)は中央のまま */
    height:100%;
    object-fit:cover;   /* 箱いっぱいに敷く。はみ出し分はcrop */
    object-position:top center;   /* 上端基準でcrop＝フキダシ上端(ノッチ/丸角)が切れないように */
    z-index:0;
    pointer-events:none;
  }
  .case-cats{
    position:absolute;   /* SPは白い吹き出しの上（見出しとの間の赤い地）に出す。下端を吹き出しの上端（.case-content の上 3.4em）から 1.2em 上に */
    left:0;
    right:0;
    top:auto;
    bottom:calc(100% + 3.4em + 1.2em);
    gap:.5em;
  }
  .case-compare{ order:2; }
  .case-cat{
    flex:1 1 auto;
    padding:.5em .4em;
    font-size:1.2em;
    white-space:nowrap;
  }
  /* 赤い地の上なので色を反転（選択中＝白地に赤字） */
  .case-cat{ border-color:rgba(255,255,255,.7); background:transparent; color:#fff; }
  .case-cat.is-on{ border-color:#fff; background:#fff; color:var(--bg-top); }
  .case-content{
    position:relative;
    z-index:1;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2em;
    color:var(--c-orange);
  }
  /* 引用符：Case1ラベル群の左上（sub「キャリアパスの一例」の高さに合わせて下げる） */
  .case-quote{
    position:absolute;
    left:0;
    top:7.8em;
    width:1.8em;
    height:auto;
  }
  /* 1行目：Caseラベル(左)。人物ぶんの高さを確保して音声を下へ落とす */
  .case-row{
    flex-direction:column;
    align-items:flex-start;
    gap:1.6em;
    padding:0;
    width:100%;
  }
  .case-head{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;   /* Case1ラベルを下端寄せ＝右上の人物画像の下端と高さを揃える（Figma items-end） */
    text-align:left;
    gap:0;
    padding-left:2.6em;
    min-height:13.85em;   /* case-head下端 = 人物画像下端 に揃える（photo top1.2em+height16em ぶん） */
    white-space:normal;
  }
  .case-head__sub{
    font-size:1em;
    line-height:2.4;
  }
  .case-head__no{
    font-size:2.4em;
    line-height:1.4;
  }
  .case-voice-col{
    width:100%;
    gap:1.6em;
  }
  .case-voice{
    font-size:1.6em;
    line-height:1.625;
    height:auto;
    overflow:visible;
  }
  .case-profile{
    align-self:center;   /* SPは中央寄せ（baseの flex-start を上書き） */
    font-size:.92em;
    line-height:2.4;
    max-width:calc(100% - 3.2em);   /* 左右に前/次のボタンが来るので、そのぶん内側に収める */
    padding:0.2em 1.2em;
    white-space:nowrap;
  }

  /* 人物：ブロブ右上（絶対）。高さ揃えした画像の「高さ」で制御（width:auto）。
     ボックスは写真に自動フィット、スプラッシュは背面中央に敷く。 */
  /* 人物：右上に絶対配置（クロップなし＝PC画像をそのまま縮小）。boxは写真に自動フィット、splashは背面 */
  .case-hito{
    left:auto;
    right:3.6em;   /* 少し左へ寄せる */
    top:1.2em;
    width:auto;
    height:auto;
    overflow:visible;
    line-height:0;
    z-index:4;
  }
  .case-splash{
    position:absolute;
    left:50%;
    top:52%;
    transform:translate(-50%, -50%);
    width:19em;
    height:auto;
    z-index:0;
  }
  .case-photo{
    position:relative;
    left:auto;
    top:auto;
    height:16em;   /* 人物サイズ（もう少し大きく） */
    width:auto;
    z-index:1;
  }

  /* BEFORE → AFTER */
  .case-compare{
    width:100%;
    gap:3.2em;
    /* align-items:stretch; */
    justify-content:flex-start;
  }
  .case-box--before{
    width:12.8em;
    flex:none;
    padding:1.6em 1.2em;   /* SPは縦を詰める */
    border-width:0.3em;
    gap:0.4em;
  }
  .case-box--after{
    flex:1 1 0;
    width:auto;
    min-width:0;   /* flex縮小を許可＝内容ぶんに膨らんで画面右へはみ出すのを防ぐ（Figma min-w-px 相当） */
    padding:1.6em 2.4em;   /* 左右をやや詰めて給与行の横スペースを確保。縦も詰める */
    gap:0.4em;
  }
  /* 給与ラベル「想定/年収」「万/円」は横書き2行（<br>）。nowrapで1文字ずつの縦折返しを防ぐ */
  .case-box__salary{
    white-space:nowrap;
  }
  .case-salary__lbl,
  .case-salary__num,
  .case-salary__unit{
    flex:none;
  }
  .case-arrow{
    right:-2.8em;
    bottom:0.05em;
    width:6.2em;
    height:3.6em;   /* Figma 62×36。SVGは preserveAspectRatio:none なので箱に合わせて横長にフィット（height:autoだと縦65pxで縦長になっていた） */
  }
  .case-box--before .case-box__label{
    font-size:1.4em;
  }
  .case-box--after  .case-box__label{
    font-size:2.2em;
    line-height:1.4;
  }
  .case-box__job{
    font-size:1.4em;
    line-height:1.5;
  }
  .case-box--after .case-box__job{
    font-size:1.2em;
    line-height:1.5;
  }
  .case-box--before .case-salary__lbl,
  .case-box--before .case-salary__unit{
    font-size:1.2em;
    line-height:1.2;
  }
  .case-salary__num{
    font-size:3.4em;
  }
  .case-box__salary--big .case-salary__lbl,
  .case-box__salary--big .case-salary__unit{
    font-size:1.4em;
    line-height:1.2;
  }
  .case-box__salary--big .case-salary__num{
    font-size:5em;
    line-height:.9;
  }

  /* 注釈：ブロブ下部（絶対・黒文字・折返し可） */
  .case-note{
    left:2.6em;
    right:2.2em;
    bottom:1.2em;   /* 下へ（compareとの間隔を確保＝くっつき解消） */
    top:auto;
    width:auto;
    justify-content:flex-start;
    align-items:flex-end;
    padding:0;
  }
  .case-note p{
    font-size:1em;
    line-height:1.6;
    text-align:left;
    white-space:normal;
    color:var(--c-black);
    text-shadow:none;
  }

  /* prev/next 矢印（白地バー） */
  .case-dots{
    display:none;
  }
  .case-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:2.4em;
    flex:none;
    padding:0 0 1.6em;   /* ボタンはカードの左右端に出すので、この行はカード下の余白だけ残す */
    background:#fff;   /* 上のCaseカード（白）とつなげる */
    /* スクロールスナップ（カードで止める）はやめた（2026-11-09 ユーザー指示）。自由にスクロールできる */
    margin-top: -1px;
  }
  .case-nav__btn{
    width:4.8em;
    height:4.8em;
    border-radius:50%;
    background:url(../img/top/case_nav_arrow.svg?v=2) center/contain no-repeat;
    cursor:pointer;
  }
  .case-nav__btn--prev{
    transform:rotate(180deg);
  }
  /* SP：前/次のボタンはカードの左右端、プロフィールの行の高さ（--case-nav-y は Cases.astro のスクリプトで入れる）に置く */
  .cases-sticky{ position:relative; }
  .case-nav__btn{
    position:absolute;
    z-index:3;
    top:var(--case-nav-y, 50%);
    width:3.6em;
    height:3.6em;
    margin-top:-1.8em;
    border-radius:0;   /* 正方形・角丸なし。矢印だけのSVGを、塗りの上に重ねる */
    background:var(--c-orange) url(../img/top/case_nav_arrow_sq.svg) center/100% no-repeat;
    box-shadow:0 .4em 1.2em rgba(0,0,0,.18);
  }
  .case-nav__btn--prev{ left:.4em; }
  .case-nav__btn--next{ right:.4em; }

  /* ===== #jobs ===== */
  .sec-jobs{
    padding-top:2rem;
    padding-bottom: 4rem;
  }
  /* 帯：Cases同様＝背景marquee(band__big)が全部見える高さ＋ラベル中央 */
  .sec-jobs .band{
    min-height:auto;
    margin:0;
    padding-top:4rem;
  }
  .sec-jobs .band__label{
    position:relative;
    width:100%;
    justify-content:center;
    padding-left:0;
  }
  .jobs-action{ margin-top:4rem; }
  .jobs-tabs{ gap:.8rem; margin-block:2rem 2.4rem; padding-inline:1.6rem; }
  .jobs-tab{ min-height:5.6rem; font-size:1.4rem; letter-spacing:0; }
  .jobs-carousel{
    margin-top:2rem;
  }
  /* SP：1枚＋次のカードを少しのぞかせる。左右は画面端までブリード */
  .jobs-cards{
    --jobs-gap:1.6rem;
    margin-inline:-2rem;
    padding-inline:2rem;
    scroll-padding-inline:2rem;
  }
  .job-card{
    flex-basis:82%;
    padding:1rem;
    border-radius:4rem 0.8rem 0.8rem 0.8rem;
    text-align:center;
  }
  .job-card:hover{ transform:none; box-shadow:none; }
  .job-card__illust{
    border-radius:3.2rem 0.6rem 0.6rem 0.6rem;
  }
  .job-card__body{
    align-items:center;
    padding:1.6rem 1.2rem 1.4rem;
  }
  .jobs-nav{
    gap:1.6rem;
    margin-top:1.6rem;
  }
  .jobs-nav__btn{
    width:4.4rem;
    height:4.4rem;
  }
  .jobs-nav__dots{ gap:.8rem; }
  .job-card__type{
    font-size:1.2rem;
  }   /* Figma 12px Bold */
  .job-card__title{
    font-size:1.8rem;
    line-height:2.6rem;
  }   /* Figma 18px Black lh26 */
  /* Figmaは10px/px6で375幅なら4タグが1行に収まる（合計約271<287）。中央寄せ。
     wrap維持で320(SE1)では安全に折り返す（nowrapだと320で横はみ出す） */
  .job-card__tags{
    flex-wrap:wrap;
    justify-content:center;
  }
  .job-card__tags .tag{
    font-size:1rem;
    padding:0 0.6rem;
    line-height:2rem;
  }
  .job-card__salary{
    justify-content:center;
  }
  .job-card__salary .lbl{
    font-size:1.4rem;
  }   /* 年収/〜/万円 14px */
  .job-card__salary .num{
    font-size:1.8rem;
  }   /* 380/500 18px */
  .jobs-note{
    font-size:0.95rem;
    margin-top:1.2rem;
    text-align: left;
  }   /* SP幅で1行に収める */

  /* ===== #problem（Figma 300:583：縦書き見出し(上・中央) → 2×2吹き出し → 人物2名(横並び) → リード）=====
     DOM順[左col, 男, 見出し, 女, 右col] を order で並べ替え。背景はオレンジのまま、吹き出しはダーク角丸ボックス。 */
  #problem{
    padding-block:4rem 1rem;
  }
  #problem .problem-inner{
    gap:3.2rem;
    padding-inline:1.2rem;
  }   /* 2列を収めるため左右paddingを詰める */
  #problem .problem-stage{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:center;
    gap:1.6rem 0.8rem;
  }
  /* 見出し＝最上段・全幅・中央（縦書き2列）。flex-basis:100%で確実に1行占有→下に吹き出し2列 */
  #problem .problem-heading{
    order:-1;
    flex-basis:100%;
    width:100%;
    justify-content:center;
    margin-bottom:0.8rem;
    font-size:2.6rem;
    letter-spacing:.06em;
  }
  /* 吹き出し＝左右2列(2×2)。SVGフレーム(problem_balloon_frame)は維持しSPサイズに縮小。
     テキストをフロー(relative)にして可変高＝フレームは背面(absolute inset:0)で伸縮。SPは水平。 */
  #problem .problem-col{
    order:1;
    padding-top:0;
    gap:1.4rem;
    flex:0 0 auto;
  }
  #problem .problem-col--right{
    order:2;
  }
  #problem .problem-balloon{
    width:16.8rem;
    aspect-ratio:auto;
    overflow:visible;
    --pop-scale:.9;
  }   /* 傾いた時に隣とくっつくので着地を90%に絞る */
  /* SVGフレームは可変高テキストに引き伸ばすと潰れて不揃い＝SPではフキダシ形状(角丸＋尻尾)をCSSで再現し、
     自動高さでどのサイズでも確実にテキストを覆う（＝Figmaの実装方法）。 */
  #problem .problem-balloon__frame{
    display:none;
  }
  #problem .problem-balloon__text{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    transform:none;
    margin:0;
    padding:1.6rem 1.4rem;   /* Figma 14/16px。この幅で2行目「TOEIC 800以上ばかり」が収まる */
    background:#202020;   /* base の罫線グラデを解除しダーク地に */
    font-size:1.4rem;
    line-height:2.4rem;
    text-align:center;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:0.18em;
  }
  /* base の `--r/--l .problem-balloon__text{ left/right:% }`（詳細度1,2,0）を同詳細度で打ち消す
     ＝SPは relative フロー配置なので left:% が効くと右バルーンのテキストが右へずれて画面端超過する */
  #problem .problem-balloon--l .problem-balloon__text{
    border-radius:0 2rem 0 2rem;
    left:auto;
    right:auto;
  }   /* 右上・左下が丸（Figma frame_l） */
  #problem .problem-balloon--r .problem-balloon__text{
    border-radius:2rem 0 2rem 0;
    left:auto;
    right:auto;
  }   /* 左上・右下が丸（Figma frame_r） */
  /* 尻尾（中央の人物へ向く：左バブル=右下／右バブル=左下） */
  #problem .problem-balloon__text::after{
    content:'';
    position:absolute;
    top:100%;
    width:1.4rem;
    height:1.6rem;
    background:#202020;
  }
  #problem .problem-balloon--l .problem-balloon__text::after{
    right:0;
    clip-path:polygon(0 0, 100% 0, 100% 100%);
  }
  #problem .problem-balloon--r .problem-balloon__text::after{
    left:0;
    clip-path:polygon(0 0, 100% 0, 0 100%);
  }
  /* 人物＝吹き出しの下に横並び */
  #problem .problem-person{
    order:3;
    align-self:flex-start;
  }
  #problem .problem-person--woman{
    order:4;
  }
  #problem .problem-person--man img,
  #problem .problem-person--woman img{
    width:14rem;
  }
  #problem .problem-person::after{ bottom:-.4rem; height:1.3rem; background-size:2rem 100%; }   /* Figma 115px から拡大 */
  /* リード：logo＋テキストが並ぶ4行。本文=Bold22px、「正当に評価する」=Black43px（Figma 300:611） */
  #problem .problem-lead{
    gap:0.2rem;
  }
  #problem .problem-lead__row{
    font-size:2.2rem;
    font-weight:700;
    flex-wrap:wrap;
    white-space:normal;
    gap:0.2rem 0.6rem;
  }
  #problem .problem-lead__wrap{
    flex-basis:100%;
    text-align:center;
  }
  #problem .problem-lead__logo{
    width:8.3rem;
  }
  #problem .problem-lead__em{
    font-size:4.3rem;
    font-weight:900;
    line-height:1.4;
    letter-spacing:-0.1rem;
  }

  /* ===== #about ===== */
  #about{
    padding-top:9.6rem;   /* 上端の矢印＋「そもそも」吹き出しの上に余白 */
    padding-bottom:5rem;
  }   /* 前が白セクションになったため margin-top は付けない（付けると間にページ地の赤が覗く） */
  #about .about-body{
    margin-top:0;
    padding-inline:1.6rem;
  }   /* カードの左右に余白（l-1440の2remより少し詰める） */
  /* Figma 300:631：cream の縦長楕円（rounded-900px）。テキスト上／TOEICバッジは absolute（下部）。
     pb を大きく取り楕円の下ぶくれを作る。 */
  #about .about-pill{
    position:relative;
    flex-direction:column;
    align-items:center;
    padding:4.8rem 1.6rem 3.2rem;
    min-height:0;
    border-radius:2rem;
    gap:3.2rem;
    z-index:3;
  }
  #about .about-cols{
    flex-direction:column;
    gap:3.2rem;
  }
  #about .about-text{
    order:0;
  }
  /* 図は本文の下に、全幅で置く */
  #about .about-visual{
    order:1;
    width:100%;
  }
  #about .about-eq{ gap:.8rem; }
  #about .about-eq__tile{ padding:2rem .8rem 1.6rem; border-radius:.8rem; }
  #about .about-eq__en{ font-size:.9rem; }
  #about .about-eq__ja{ font-size:1.6rem; }
  #about .about-eq__sub{ font-size:.95rem; }
  #about .about-eq__op{ font-size:2.8rem; }
  #about .about-eq__arrow{ height:2.8rem; margin:.8rem 0 1.4rem; }
  #about .about-eq__result{ padding:1.8rem 1.6rem; border-radius:.8rem; }
  #about .about-eq__result{ padding-right:13.6rem; }
  #about .about-eq__result-illust{ right:.4rem; width:13.6rem; }
  #about .about-eq__result-ja{ font-size:1.5rem; }
  #about .about-eq__result-en{ font-size:3.6rem; }
  #about .about-points{ justify-content:center; margin-top:2rem; gap:.6rem; }
  #about .about-points li{ font-size:1.15rem; padding:.6rem 1rem; }
  /* SPは h2/lead を中央寄せ（descは左のまま）。about-textを全幅にして text-align:center で効かせる */
  #about .about-text{
    width:100%;
    text-align:center;
  }
  /* 見出し「👄バイキャリ ってなに？👄」は nowrap＋3.2rem だと SP で pill をはみ出す
     （＝ドキュメント横オーバーフローの主因）。SPは縮小して収める。 */
  #about .about-h2{
    font-size:2.2rem;
    gap:0.4rem;
  }
  #about .about-mouth{
    width:1.8rem;
  }
  /* リード：「英語 × サービス業 に」1行＋「特化した転職エージェント」1行に収める（ref同様） */
  #about .about-lead{
    font-size:2.2rem;
    margin-bottom:1.6rem;
    text-align:center;
  }
  #about .about-lead__x{
    width:2.2rem;
    margin-inline:0.6rem;
  }
  #about .about-lead__suf{
    margin-left:0.6rem;
  }
  #about .about-desc{
    font-size:1.4rem;
    line-height:2.4rem;
    text-align:left;
  }   /* ref 幅で1行20字が収まる14px。descは左 */
  #about .about-desc br{
    display:none;
  }   /* 改行を無効化→ref同様3行に自然フロー */

  /* ===== #why-now（Figma 300:677：カード=写真216×183→見出し24px→本文16px→出典12px右寄せ） ===== */
  #why-now{
    padding-block:4.8rem 4rem;
  }
  #why-now .why-inner{
    gap:4rem;
  }
  #why-now .why-h2{
    font-size:2rem;
  }
   /* Figma H2は小さめ（1行に収める） */
  #why-now .why-mouth{
    width:1.8rem;
    height:auto;
  }
  /* ===== #reasons（Figma 300:702：写真(#N焼込み)→見出し24px1行→本文16px。カード内gap12px） ===== */
  /* 橙パネル(尖り上下＋本体)は base の width:100vw を打ち消して #reasons(タブレット帯=750px) 幅に収める
     ＝タブレットで右にはみ出さず750中央。SPは #reasons=100vw なので実質全幅のまま。マーキーは別途ブリード。 */
  #reasons .reason-band-top,
  #reasons .reason-band-bottom,
  #reasons .reason-body{
    width: 100%;
    margin-left: 0;
  }
  #reasons .reason-band{
    min-height: 10rem;
  }
  #reasons .reason-marquee{
    font-size:6.4rem;
  }
  /* reason-heading：文字数が多く band__label(2.2rem)だと全幅に溢れる。Figma準拠の 18px / 「3」26px に */
  #reasons .reason-heading{
    font-size:1.8rem;
  }
  #reasons .reason-heading .num,
  #reasons .reason-heading__num{
    font-size:1.3em;
  }
  #reasons .reason-features{ gap:5.6rem; margin-top:3.2rem; }
  #reasons .reason-feature,
  #reasons .reason-feature--rev{ grid-template-columns:1fr; gap:2.4rem; }
  #reasons .reason-feature--rev .reason-feature__body{ order:0; }
  #reasons .reason-feature__no{ gap:.8rem; }
  #reasons .reason-feature__no-en{ font-size:1.2rem; }
  #reasons .reason-feature__no-num{ font-size:5.6rem; }
  #reasons .reason-feature__no-total{ font-size:1.3rem; }
  #reasons .reason-feature__label{ margin-top:1.6rem; font-size:1.3rem; }
  #reasons .reason-feature__title{ margin-top:1.2rem; padding-bottom:1.6rem; font-size:2.2rem; }
  #reasons .reason-feature__title--lg{ font-size:2.6rem; }
  #reasons .reason-feature__text{ margin-top:1.6rem; font-size:1.3rem; line-height:1.9; }
  #reasons .reason-feature__visual{ aspect-ratio:4/3.6; border-radius:.8rem; }
  #reasons .rv-photo .rv-tag{ top:1.2rem; font-size:1rem; padding:.4rem 1rem; }
  #reasons .rv-card{ padding:1rem 1.2rem; font-size:1rem; border-radius:.8rem; }
  #reasons .rv-card__head{ font-size:1rem; }
  #reasons .rv-card--ring{ top:1.2rem; right:1.2rem; padding:.8rem 1rem .8rem .8rem; gap:.6rem; }
  #reasons .rv-card--ring svg{ width:4rem; height:4rem; }
  #reasons .rv-card--ring b{ font-size:2rem; }
  #reasons .rv-card--steps{ left:1.2rem; right:1.2rem; bottom:1.2rem; }
  #reasons .rv-steps b{ font-size:1.1rem; }
  #reasons .rv-steps span{ font-size:.9rem; }
  #reasons .rv-photo--paths{ aspect-ratio:1 / 1; }
  #reasons .rv-ways__grid{ gap:3.2rem 2rem; }
  #reasons .rv-way, #reasons .rv-way:nth-child(n+3){ padding:1rem 1rem 1.2rem; }
  #reasons .rv-way:nth-child(n+3){ padding:1.2rem 1rem 1rem; }
  #reasons .rv-way__en{ font-size:.9rem; }
  #reasons .rv-way__name{ font-size:1.7rem; }
  #reasons .rv-way__text{ font-size:1rem; }
  #reasons .rv-ways__hub{ width:10.4rem; height:10.4rem; padding-top:1rem; font-size:1.1rem; box-shadow:0 0 0 .5rem rgba(193,65,64,.35), 0 0 0 1rem rgba(193,65,64,.15), 0 1rem 2rem rgba(0,0,0,.4); }
  #reasons .rv-ways__hub small{ font-size:.8rem; }
  #reasons .rv-ways__hub span{ font-size:1.3rem; }
  #reasons .rv-photo--plan{ aspect-ratio:auto; }
  #reasons .rv-photo > .rv-meet{ position:static; }
  #reasons .rv-meet__bar{ padding:.8rem 1.2rem; font-size:1rem; }
  #reasons .rv-meet__main{ grid-template-columns:1fr; padding:0 .6rem; }
  #reasons .rv-meet__video{ aspect-ratio:4/3; }
  #reasons .rv-meet__panel{ grid-template-columns:12rem 1fr; align-items:center; padding:1rem; }
  #reasons .rv-meet__panel > .rv-card__head{ grid-column:1 / -1; }
  #reasons .rv-meet__tools{ gap:1.6rem; padding:.8rem 1.2rem; }
  #reasons .rv-meet__tools .is-sp-hide{ display:none; }
  #reasons .rv-flow li{ padding:.4rem .6rem; }
  #reasons .rv-flow li + li::before{ top:-.8rem; height:.8rem; }
  #reasons .rv-flow small{ flex-basis:3.6rem; font-size:.9rem; }
  #reasons .rv-courses{ margin-top:0; }
  #reasons .rx-route{ margin-top:4.8rem; }
  #reasons .rx-team{ margin-top:0; }
  #reasons .rx-route__title,
  #reasons .rx-team__title{ font-size:1.7rem; flex-wrap:wrap; }
  /* SP：タブは2×2、カードは写真を上に、ロードマップは縦のタイムラインに */
  #reasons .rx-route{ min-width:0; }
  #reasons .rx-route__tabs{ grid-template-columns:repeat(2, 1fr); margin-top:1.6rem; }
  #reasons .rx-route__tab{ padding:1rem 1.2rem .8rem; }
  #reasons .rx-route__tab span{ font-size:.9rem; }
  #reasons .rx-route__tab b{ font-size:1.5rem; }
  #reasons .rx-route__panel{ grid-template-columns:1fr; }
  #reasons .rx-route__photo{ aspect-ratio:16 / 9; min-height:0; }
  #reasons .rx-route__photo figcaption{ left:1.6rem; bottom:1.2rem; }
  #reasons .rx-route__photo figcaption b{ font-size:2rem; }
  #reasons .rx-route__body{ padding:2rem 1.6rem 2.4rem; }
  #reasons .rx-route__plot{ position:relative; display:flex; flex-direction:column; gap:1.2rem; margin-top:1.6rem; padding-left:2.4rem; }
  #reasons .rx-route__plot::before{ content:""; position:absolute; left:.7rem; top:1rem; bottom:6rem; border-left:.2rem dashed #cfc6c6; }
  #reasons .rx-route__ticks, #reasons .rx-seg{ display:none; }
  #reasons .rx-stage{ position:relative; margin:0; padding:1.2rem 1.4rem 1.4rem; border-top:0; border-left:.4rem solid var(--rx-tone); }
  #reasons .rx-stage::before{ content:""; position:absolute; left:-2.5rem; top:1.4rem; width:1.4rem; height:1.4rem; border:.3rem solid #f4f2f2; border-radius:50%; background:var(--rx-tone); }
  #reasons .rx-stage__no{ font-size:1rem; }
  #reasons .rx-stage__no b{ font-size:2.4rem; }
  #reasons .rx-stage__when{ display:block; font-size:1.2rem; font-weight:700; color:var(--rx-tone); }
  #reasons .rx-stage__label{ font-size:1.6rem; }
  #reasons .rx-stage__text{ font-size:1.2rem; }
  #reasons .rx-route__goal{ flex-direction:row; align-items:center; flex-wrap:wrap; margin:0; padding:1.4rem 1.6rem; font-size:1.6rem; }
  #reasons .rx-route__goal svg{ width:2.4rem; height:2.4rem; }
  /* SP：円の図は縦に並べ直す（大きな円は消す） */
  /* SP：PCと同じ「あなたを囲む円＋3人」の図を正方形に組み直し、説明は図の下にカードで並べる。
     図の部品は全部 grid-area:stage に重ね、位置は幅基準の % マージンで決める（円の中心 50%、半径 38%） */
  #reasons .rx-trio{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:"stage" "coach" "mentor" "support";
    row-gap:1.2rem;
    aspect-ratio:auto;
    margin-top:3.2rem;
  }
  #reasons .rx-trio::before{   /* 円（PCのSVGの代わり）。縁は回る円錐グラデーション＝色がめぐり、明るい光が1周する */
    content:"";
    grid-area:stage;
    aspect-ratio:1;
    margin:12%;
    border-radius:50%;
    border:.25rem solid transparent;
    background:
      linear-gradient(#2a2223, #2a2223) padding-box,
      conic-gradient(from var(--rx-a, 0deg), #c14140 0deg, #c9a45c 110deg, #fff4d6 150deg, #c9a45c 175deg, #8e2a29 260deg, #c14140 360deg) border-box;
    animation:rx-ring-spin 10s linear infinite;
  }
  #reasons .rx-trio__ring{ display:none; }
  #reasons .rx-node,
  #reasons .rx-trio__center{ position:relative; left:auto !important; top:auto !important; transform:none; grid-area:stage; align-self:start; }
  #reasons .rx-node{ width:10.4rem; box-shadow:0 0 0 .5rem #2a2223, 0 .8rem 1.6rem rgba(0,0,0,.4); border-width:.3rem; }
  #reasons .rx-node--coach{ justify-self:center; margin-top:calc(12% - 5.2rem); }
  #reasons .rx-node--mentor{ justify-self:start; margin:calc(69% - 5.2rem) 0 0 calc(17% - 5.2rem); }
  #reasons .rx-node--support{ justify-self:end; margin:calc(69% - 5.2rem) calc(17% - 5.2rem) 0 0; }
  #reasons .rx-node p{ margin-bottom:1.4rem; }
  #reasons .rx-node p span{ font-size:.7rem; }
  #reasons .rx-node p b{ font-size:1rem; }
  #reasons .rx-trio__center{ justify-self:center; margin-top:calc(50% - 5.6rem); gap:.4rem; }
  #reasons .rx-trio__you{ width:8rem; border-width:.2rem; }
  #reasons .rx-trio__center b{ font-size:1.6rem; }
  /* 説明：3人ぶんのカード（色の線で図の人と対応させる） */
  #reasons .rx-trio__list{
    position:static;
    grid-template-columns:10.8rem 1fr;   /* 役割名の幅をそろえ、3枚のカードで右の列の頭をそろえる */
    column-gap:1rem;
    row-gap:.2rem;
    padding:1.2rem 1.4rem;
    border-left:.3rem solid var(--rx-c);
    border-radius:0 .8rem .8rem 0;
    background:rgba(255,255,255,.06);
    text-align:left !important;
  }
  #reasons .rx-trio__list--coach{ grid-area:coach; }
  #reasons .rx-trio__list--mentor{ grid-area:mentor; }
  #reasons .rx-trio__list--support{ grid-area:support; }
  #reasons .rx-trio__list li{ grid-column:2; font-size:1.3rem; }
  #reasons .rx-trio__role{ display:block !important; grid-column:1 !important; grid-row:1 / span 4; align-self:center; font-size:1.5rem !important; font-weight:900; color:#fff; writing-mode:horizontal-tb; }
  #reasons .rx-trio__role::before{ content:none !important; }
  #reasons .rx-trio__view{ margin-bottom:.2rem; font-size:1rem !important; }
  #reasons .rx-num{ margin-top:4rem; }
  #reasons .rx-num__title{ font-size:2rem; }
  #reasons .rx-num__lead{ font-size:1.2rem; }
  #reasons .rx-num__grid{ grid-template-columns:1fr 1fr; gap:1rem; }
  #reasons .rx-num__lead-card{ grid-row:auto; grid-column:1 / -1; min-height:24rem; }
  #reasons .rx-num__lead-card > div{ padding:2rem; }
  #reasons .rx-num__lead-card .rx-num__value{ font-size:5.6rem; }
  #reasons .rx-num__card{ padding:1.6rem; }
  #reasons .rx-num__label{ font-size:1.2rem; }
  #reasons .rx-num__value{ font-size:3.6rem; }
  #reasons .rx-num__value small{ font-size:1.2rem; }
  #reasons .rv-courses__track{ gap:1.2rem; }
  #reasons .rv-course{ width:22rem; padding:1.4rem 1.6rem; }
  #reasons .rv-course__title{ font-size:1.8rem; }
  #reasons .rv-course__icon{ width:9rem; height:9rem; }
  #reasons .rv-course__logo{ top:1.4rem; right:1.4rem; width:5.2rem; height:5.2rem; border-radius:1.2rem; }
  #reasons .rv-course__logo img{ width:3rem; height:3rem; }

  /* ===== #flow：SPは横長カードを縦に並べる（左にスマホ画面、右に STEP・見出し・説明）。間の矢印は下向き ===== */
  #flow{
    padding-block:6rem;
  }
  #flow .flow-title{
    font-size:2rem;
  }
  #flow .flow-title__mouth{
    width:1.8rem;
  }
  #flow .flow-steps{
    --flow-gap:2.8rem;
    grid-template-columns:1fr;
    margin-top:3.2rem;
  }
  #flow .flow-step{
    display:grid;
    grid-template-columns:10.4rem 1fr;
    grid-template-areas:
      "phone no"
      "phone head"
      "phone text";
    grid-template-rows:auto auto 1fr;
    align-items:start;
    column-gap:1.6rem;
    padding:1.6rem 1.6rem 1.6rem 1.4rem;
    border-radius:.8rem;
    text-align:left;
  }
  #flow .flow-step + .flow-step::before{
    left:50%;
    top:calc(var(--flow-gap) / -2);
    transform:translate(-50%, -50%);
    border-width:.9rem .8rem 0;
    border-color:var(--bg-top) transparent transparent;
  }
  #flow .flow-step__no{ grid-area:no; justify-self:start; font-size:1.1rem; padding:.3rem 1.4rem; }
  #flow .flow-step__head{ grid-area:head; margin-top:1rem; font-size:1.6rem; }
  #flow .flow-support{ margin-top:4.8rem; padding:3.6rem .4rem 2.8rem; border-width:.2rem; }
  #flow .flow-support__label{ font-size:1.3rem; padding:.6rem 1.8rem; }
  #flow .flow-support__sub{ font-size:1.5rem; }
  #flow .flow-support__sub::before{ margin-right:.8rem; }
  #flow .flow-support__sub::after{ margin-left:.8rem; }
  #flow .flow-support__main{ margin-top:1.6rem; font-size:1.9rem; line-height:2; }
  #flow .flow-support__main em{ font-size:2.1rem; margin-inline:.2rem; padding:0 .6rem; }
  #flow .flow-br-sp{ display:inline; }
  #flow .flow-phone{ grid-area:phone; width:10.4rem; margin-top:0; padding:.5rem; border-radius:1.8rem; }
  #flow .flow-phone__screen{ height:16rem; border-radius:1.4rem; font-size:.7rem; }
  #flow .flow-step__text{ grid-area:text; margin-top:.8rem; font-size:1.25rem; line-height:1.8; }
  #flow .flow-step__text br{ display:none; }
  /* 小さい画面用に中身も縮める */
  #flow .fp-bar{ padding:2.4rem .8rem .8rem; font-size:.9rem; }
  #flow .fp-form{ padding:.8rem .6rem; gap:.4rem; }
  #flow .fp-field span{ font-size:.65rem; }
  #flow .fp-field i,
  #flow .fp-slots span{ padding:.3rem .5rem; }
  #flow .fp-submit{ margin-top:.2rem; padding:.4rem; }
  #flow .fp-plan__name{ font-size:.9rem; }
  #flow .fp-person{ transform:scale(.8); }
  /* SP は端末が小さいので、通話画面の小窓・名前・ボタンも縮める */
  #flow .fp-video{ bottom:3.2rem; }
  #flow .fp-self{ right:.5rem; top:1.8rem; width:2.6rem; height:3.6rem; border-radius:.4rem; box-shadow:0 0 0 1px rgba(255,255,255,.7); }
  #flow .fp-name{ left:.5rem; bottom:.5rem; padding:.1rem .4rem; }
  #flow .fp-controls{ height:3.2rem; gap:.6rem; }
  #flow .fp-controls i{ width:1.8rem; height:1.8rem; }

  /* ===== #cta（Figma 300:728：pill 375×540 角丸248・グラデ・cream縁。下部中央に料理人+女性） ===== */
  #cta{
    padding-block:5.6rem;
  }
  /* ===== #faq（Figma 300:740：橙pill・Q.12px・質問14px/lh20・+13px・padding24/16・item間12px） ===== */
  /* 帯：Figma 300:741＝band高133px・背景marquee 64px・ラベル18px中央（#jobs同様の中央配置） */
  #faq{
    padding-bottom: 3rem;
  }
  #faq .band{
    min-height:13.3rem;
  }
  #faq .band__big{
    font-size:6.4rem;
  }   /* Figma 背景マーキー 64px */
  #faq .band__label{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    transform:translateY(-50%);
    justify-content:center;
    padding-left:0;
    font-size:1.8rem;   /* Figma ラベル 18px */
  }
  #faq .faq-body{
    padding:0 2rem;
  }
  #faq .faq-list{
    gap:1.2rem;
  }   /* Figma item間12px */
  /* SP：ドロップシャドウを薄く（開いた/タップ時の擬似hover。PCの :hover 0 1.2rem 3.2rem/.18 → SPは薄め・小さめ） */
  #faq .faq-item:hover,
  #faq .faq-item.is-open{
    box-shadow:0 0.8rem 2rem rgba(0,0,0,.1);
  }
  #faq .faq-q{
    position:relative;
    align-items:flex-start;
    gap:1rem;
    padding:3rem 5.6rem 3rem 2.4rem;
    transition:padding .3s ease;
  }   /* Q.は1行目に頭揃え／右は×と被らぬよう56。position:relative＝アイコンを質問行(高さ安定)基準に（PCはfaq-q非positionのままitem基準で不変）。paddingもtransition＝開でpaddingが変わってもfaq-q高さが滑らかに変化しアイコンが跳ねない */
  /* ===== 開状態＝プロトタイプのキャプチャに合わせ込み ===== */
  #faq .faq-item.is-open .faq-q{
    padding-top:2.4rem;   /* 上24（頭揃えは base の align-items:flex-start） */
    padding-bottom:1.6rem;   /* 質問→回答の間隔を16に詰める */
  }
  #faq .faq-item.is-open .faq-q__icon{
    top:3.4rem;
    transform:translateY(-50%) rotate(45deg);
  }   /* 開＝質問1行目中心(faq-q基準: 開padding-top2.4rem+行半分1rem)。transformは translateY維持＋回転＝閉→開が回転だけ滑らかに補間 */
  #faq .faq-q__label{
    padding-top:0;
    font-size:1.2rem;
    line-height:2rem;
  }   /* Q. 12px・line-height=質問1行分→1行目の垂直中心に */
  #faq .faq-q__text{
    font-size:1.4rem;
    line-height:2rem;
  }   /* 質問 14px lh20 */
  #faq .faq-a__inner p{
    font-size:1.4rem;
    font-weight: 500;
  }   /* 回答本文 14px */
  /* +/×アイコン：やや大きめ14px。faq-q基準（回答の伸縮に反応しない＝開閉で跳ねない）。
     閉＝質問行の垂直中心(top:50%＝対称paddingで質問中心・1行/2行問わず)、開＝1行目(top:3.4rem・上記)。
     transformは両状態で translateY(-50%) rotate() に統一＝rotateだけ滑らかに補間。top も transition対象で中央↔1行目を滑らかに移動。 */
  #faq .faq-q__icon{
    top:50%;
    transform:translateY(-50%) rotate(0deg);
    transition:top .3s ease, transform .3s ease;
    right:2.4rem;
    width:1.4rem;
    height:1.4rem;
  }
  #faq .faq-q__icon::before{
    height:0.34rem;
  }   /* 線を太く（base 0.24rem を SPで上書き） */
  #faq .faq-q__icon::after{
    width:0.34rem;
  }
  #faq .is-open .faq-a__inner{
    padding:0 5.6rem 3rem 2.4rem;
  }

  /* footer SP（Figma 300:747）は common.css に移設 */
}
@media (max-width: 750px){
  /* 幅追従は min() が自動。個別調整はここ。 */
}

/* ===== メインコピー（テキスト版）：旧SVG(fv_maintext01/02)の置き換え ===== */
.fv-copy__text{
  aspect-ratio:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.15em;
  font-family:'Noto Sans JP',sans-serif;
  font-weight:900;
  color:var(--c-cream);
  line-height:1.1;
  letter-spacing:-.02em;
}
.fv-copy__line{ display:block; white-space:nowrap; }
.fv-copy__line--s{ font-size:7.4rem; }
.fv-copy__line--lead{ font-size:4.6rem; letter-spacing:-.01em; }   /* 13文字＝本文幅(52.5rem)に収める */
.fv-copy__line--l{ font-size:6.6rem; letter-spacing:-.02em; }
.fv-copy__text em{ font-style:normal; color:var(--c-yellow); font-size:1.6em; letter-spacing:-.04em; margin-right:.05em; }
@media (max-width:1100px){
  .fv-copy__line--s{ font-size:3.7em; }
  .fv-copy__line--lead{ font-size:2.3em; }
  .fv-copy__line--l{ font-size:3.3em; }
}

/* --- メインコピーの疾走感：斜体（和文に斜体が無いので skew で傾ける）＋行ごとに右へずらす＋左のスピード線＋滑り込み --- */
.fv-copy__text{
  transform:skewX(-12deg);
  transform-origin:left bottom;
}
.fv-copy__line{
  position:relative;
  animation:fv-dash .7s cubic-bezier(.2,.9,.25,1) both;
}
.fv-copy__line--lead{ margin-left:-1.2em; animation-delay:.05s; }
.fv-copy__line--l{ margin-left:.35em; animation-delay:.15s; }
.fv-copy__line--s{ margin-left:.6em; animation-delay:.25s; }
/* 行頭の左に引くスピード線（長さの違う3本） */
.fv-copy__line::before{
  content:"";
  position:absolute;
  right:calc(100% + .25em);
  top:50%;
  width:1.6em;
  height:.42em;
  transform:translateY(-50%);
  background:
    linear-gradient(var(--c-cream), var(--c-cream)) right 0    / 100% .045em no-repeat,
    linear-gradient(var(--c-yellow), var(--c-yellow)) right 50% / 62% .045em no-repeat,
    linear-gradient(var(--c-cream), var(--c-cream)) right 100% / 82% .045em no-repeat;
  opacity:.75;
}
.fv-copy__line--lead::before{ display:none; }   /* 1行目だけ線なし */
/* SP は1行目（その転職・キャリアアップ、）だけスピード線を出さず、左に寄せて画面の中央に置く */
@media (max-width:1100px){
  .fv-copy__line--lead{ margin-left:-1.8em; }
}
@keyframes fv-dash{
  from{ opacity:0; transform:translateX(-1.2em); filter:blur(4px); }
  60%{ opacity:1; filter:blur(0); }
  to{ opacity:1; transform:none; filter:none; }
}
@media (prefers-reduced-motion: reduce){
  .fv-copy__line{ animation:none; }
}

/* =========================================================
   料金プラン（Pricing）：比較テーブル。列色は 薄オレンジ → ブランドオレンジ(おすすめ) → 濃い赤
   ========================================================= */
.sec-pricing{
  color:var(--c-cream);
  padding-top:6rem;
  padding-bottom:8rem;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
/* コース切り替えタブ：表の上辺にくっついた横並びのタブ（表と1枚につながって見える）。
   選択中は表の「おすすめ」列と同じ赤、非選択は淡いピンク */
.price-tabs{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  margin-top:4.8rem;
  border-radius:.8rem .8rem 0 0;
  overflow:hidden;
}
.price-tab{
  padding:2rem 1.6rem;
  border:none;
  background:#f8e6e5;
  color:var(--bg-top);
  font-family:var(--f-jp);
  font-weight:900;
  font-size:1.9rem;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background-color .2s, color .2s;
}
.price-tab + .price-tab{ border-left:1px solid rgba(204,75,74,.2); }
.price-tab:hover{ background:#f3d6d4; }
.price-tab[aria-selected="true"]{
  background:var(--bg-top);
  color:var(--c-cream);
}
.price-tab:focus-visible{ outline:3px solid var(--c-cta); outline-offset:-3px; }
/* タブの直下に表を密着させ、表の上角の丸みを外す */
.price-panel .price-scroll{
  margin-top:0;
  padding-top:0;
}
.price-panel .price-table{ border-radius:0 0 3.2rem 3.2rem; }
.price-scroll{
  margin-top:3.2rem;
  padding-top:1.6rem;   /* おすすめバッジのはみ出し分 */
}
.price-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  background:var(--c-cream);
  color:var(--c-black);
  border-radius:.8rem;
  overflow:hidden;
  font-size:1.6rem;
  line-height:1.5;
}
.price-table th,
.price-table td{
  padding:2.4rem 2rem;
  border-bottom:1px solid rgba(32,32,32,.12);
  border-left:1px solid rgba(32,32,32,.12);
  text-align:center;
  vertical-align:middle;
}
.price-table tr > :first-child{
  border-left:none;
}
.price-table__corner{
  width:24%;
  background:var(--c-cream);
}
/* 列ごとの色 */
.price-col--1{ background:var(--c-orange4); color:var(--c-black); }
.price-col--2{ background:var(--c-orange);  color:var(--c-cream); }
.price-col--3{ background:var(--c-reason);  color:var(--c-cream); }
.price-table td.price-col--2,
.price-table td.price-col--3{ border-left-color:rgba(249,238,218,.25); border-bottom-color:rgba(249,238,218,.25); }
.price-table__plan{
  position:relative;
  padding-block:3.2rem;
}
.price-table__plan-name{
  display:block;
  font-weight:900;
  font-size:2rem;
  letter-spacing:.04em;
}
.price-table__plan-period{
  display:block;
  margin-top:.4rem;
  font-weight:700;
  font-size:1.8rem;
}
.price-table__badge{
  position:absolute;
  top:0;
  right:0;
  padding:.6rem 1.6rem;
  border-radius:0 0 0 1.6rem;
  background:var(--c-cta);
  color:#fff;
  font-weight:900;
  font-size:1.3rem;
  letter-spacing:.08em;
}
.price-table__group th{
  padding:1.6rem 2.4rem;
  background:var(--c-black);
  color:var(--c-cream);
  text-align:left;
  font-weight:900;
  font-size:1.7rem;
  letter-spacing:.08em;
}
.price-table__group th::before{
  content:"";
  display:inline-block;
  width:.8rem;
  height:.8rem;
  margin-right:1.2rem;
  border-radius:50%;
  background:var(--c-yellow);
  vertical-align:middle;
}
.price-table__label{
  text-align:left !important;
  font-weight:700;
  font-size:1.6rem;
  background:var(--c-cream);
}
.price-table__val{
  display:block;
  font-weight:700;
}
.price-table__val--big{
  font-size:3.6rem;
  line-height:1.1;
  letter-spacing:-.01em;
}
.price-table__sub{
  display:block;
  margin-top:.4rem;
  font-size:1.3rem;
  font-weight:500;
  opacity:.85;
}
.price-table__common{
  text-align:left !important;
  background:var(--c-orange4);
}
.price-table__common ul{
  list-style:none;
  display:grid;
  gap:1rem;
}
.price-table__common li{
  position:relative;
  padding-left:1.6rem;
  font-weight:500;
}
.price-table__common li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:.6rem;
  height:.6rem;
  border-radius:50%;
  background:var(--c-orange);
}
.price-table tbody:last-child tr:last-child > *{
  border-bottom:none;
}
.price-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
  margin-top:5.6rem;
}
.price-note{
  font-size:1.4rem;
}
/* 個別ページ（/plan・/faq）への内部リンク */
.price-more,
.faq-more a{
  font-size:1.4rem;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:.3em;
}
.price-more{ color:var(--c-red); }
.price-more:hover,
.faq-more a:hover{ text-decoration:none; }
.faq-more{
  margin-top:4rem;
  text-align:center;
}
/* タブレット/SP：表は横スクロール、項目列は sticky 固定 */
@media (max-width:1100px){
  .sec-pricing{
    padding-top:2rem;
    padding-bottom:5rem;
  }
  .sec-pricing .l-1440{
    padding-inline:2rem;
  }
  .price-tabs{
    margin-top:2.4rem;
    border-radius:.8rem .8rem 0 0;
  }
  .price-tab{
    padding:1.4rem .8rem;
    font-size:1.3rem;
    letter-spacing:0;
    line-height:1.4;
  }
  .price-panel .price-table{ border-radius:0 0 2rem 2rem; }
  .price-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin-inline:-2rem;
    padding-inline:2rem;
  }
  .price-table{
    width:auto;
    min-width:100%;
    table-layout:auto;
    font-size:1.3rem;
    border-radius:.8rem;
  }
  .price-table th,
  .price-table td{
    padding:1.6rem 1.2rem;
    min-width:13em;
  }
  .price-table__corner,
  .price-table__label{
    position:sticky;
    left:0;
    z-index:1;
    min-width:10em !important;
    width:10em;
    box-shadow:2px 0 0 rgba(32,32,32,.08);
  }
  .price-table__group th{
    position:sticky;
    left:0;
    font-size:1.4rem;
    padding:1.2rem 1.6rem;
  }
  .price-table__plan-name{ font-size:1.5rem; }
  .price-table__plan-period{ font-size:1.3rem; }
  .price-table__val--big{ font-size:2.6rem; }
  .price-table__sub{ font-size:1.1rem; }
  .price-table__label{ font-size:1.3rem; }
  .price-action{ margin-top:4rem; }
  .price-note{ font-size:1.2rem; text-align:center; text-wrap:balance; }
}

/* ===== ★注記：テキストを1塊に（flex の子を分けない）。SP は「！」の後で改行 ===== */
.fv-starnote__br{ display:none; }
@media (max-width:1100px){
  .fv-starnote__txt{ text-align:center; line-height:1.6; }
  .fv-starnote__br{ display:inline; }
}

/* ===== FV右上CTA（旧サブコピー位置） ===== */
.fv-head-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.2rem;
  padding:1.2rem 3.2rem 1.3rem;
  border-radius:10rem;
  background:var(--c-cta);
  color:var(--c-cream);
  font-weight:900;
  line-height:1.3;
  box-shadow:0 0.4rem 0 rgba(0,0,0,.18);
  transition:background-color .25s ease;
}
.fv-head-cta:hover{
  background:var(--c-black);
}
.fv-head-cta__sub{
  font-size:1.2rem;
  font-weight:700;
  color:var(--c-yellow);
  letter-spacing:.06em;
}
.fv-head-cta__main{
  font-size:1.6rem;
  letter-spacing:.04em;
}
@media (max-width:1100px){
  .fv-head-cta{
    padding:0.6em 1.4em 0.7em;
  }
  .fv-head-cta__sub{ font-size:0.85em; }
  .fv-head-cta__main{ font-size:1.05em; }
}

/* ===== 背景：テクスチャ画像をやめ、くすみ赤の縦グラデーションに。
   色を変えるときは --bg-top / --bg-bottom を調整 ===== */
:root{
  --c-red:#c14140;      /* ベースの赤（全体のトーンの基準） */
  --bg-top:#cc4b4a;
  --bg-bottom:#b13736;
  --c-bk:var(--bg-bottom);
  --c-marquee:#a32e2d;   /* 背景の大きな英字：背景より一段深い赤 */
}
.site-bk{
  background:linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

/* =========================================================
   セクションの地の色：隣り合うセクションが同じ色にならないよう、4色を順番に配置する
     赤（ページ地）＝ hero / problem / coaches / message
     白（.sec-white）＝ why-now / ai-career / jobs / pricing / cta
     薄グレー（--c-gray-bg）＝ about / faq
     墨（--c-sumi）＝ reasons / flow
     ※ cases は濃い赤（写真を引き立てる専用色）
   並び：赤→白→赤→薄グレー→白→墨→濃い赤→白→赤→白(料金)→墨(流れ)→薄グレー→赤→白(CTA)→フッター(濃い赤)
   ========================================================= */
:root{
  --c-sumi:#2a2223;        /* 墨：赤みのある黒。赤・白どちらとも区切りがはっきり出る */
  --c-sumi-marquee:#382e2f;
  --c-gray-bg:#f4f2f2;     /* 薄グレー：白セクションと隣り合わせても区別できる明るさ */
}
.sec-white{
  background:#fff;
  color:var(--c-ink);
  --c-marquee:#f7e7e8;   /* 背景の大きな英字は白地に溶ける薄いピンク */
}
.sec-white .band__label{ color:var(--c-ink); }

/* 悩み→解決 */
#problem.sec-white{ color:var(--c-ink); }
#problem.sec-white .problem-heading{ color:var(--bg-bottom); }
#problem.sec-white .problem-lead__row{ color:var(--c-ink); }
#problem.sec-white .problem-lead__em{ color:var(--bg-bottom); }

/* なぜ今 */
#why-now.sec-white{ color:var(--c-ink); }
#why-now.sec-white .why-h2{ color:var(--c-ink); }
#why-now.sec-white .why-h2__hl{ color:var(--bg-bottom); }

/* 料金：表の外枠を付けて白地から切り出す */
.sec-pricing.sec-white{ color:var(--c-ink); }
.sec-white .price-table{ box-shadow:0 0 0 1px rgba(32,32,32,.12), 0 1.6rem 4rem rgba(158,50,57,.12); }

/* FAQ：地は薄グレー（前の料金＝白と区別）。Qの帯は背景の赤に揃える */
#faq.sec-white{
  background:var(--c-gray-bg);
  box-shadow:0 0 0 100vmax var(--c-gray-bg);
  --c-marquee:#ebe3e3;
}
#faq.sec-white .faq-item{ background:var(--bg-bottom); }
/* 料金表の列色も背景のくすみ赤に揃える（薄ピンク → 赤(おすすめ) → 深い赤） */
.sec-white .price-col--1{ background:#f8e6e5; }
.sec-white .price-col--2{ background:var(--bg-top); }
.sec-white .price-col--3{ background:var(--bg-bottom); }
.sec-white .price-table__common{ background:#f7e7e8; }
.sec-white .price-table__common li::before{ background:var(--bg-bottom); }

/* 料金（トップ）：薄い地の箱にタブを乗せ、中に「受講料ボックス」と「含まれるサービス」のカードを並べる */
/* 大枠は角丸なし。地の色はコースごとにパネル側で持つ（転職＝ピンク寄り／副業＝クリーム寄り） */
.price-box{
  width:min(100%, 100rem);
  margin:4.8rem auto 0;
}
#pricing .price-tabs{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  margin:0;
  border-radius:0;
  overflow:hidden;
}
#pricing .price-tab{
  padding:2.2rem 1.6rem;
  border:none;
  border-radius:0;
  background:#fbfafa;
  color:#9a8f8f;
  font-size:1.8rem;
  letter-spacing:.08em;
  box-shadow:none;
}
#pricing .price-tab + .price-tab{ border-left:none; }
#pricing .price-tab:hover{ background:#fff; color:var(--c-sumi); }
#pricing .price-tab[aria-selected="true"]{ background:#f7eeee; color:var(--c-sumi); box-shadow:inset 0 .4rem 0 var(--bg-top); }
#pricing #price-tab-sidejob[aria-selected="true"]{ background:#fbf3e6; box-shadow:inset 0 .4rem 0 var(--c-orange); }
.price-panel{ padding:4.8rem 4rem 5.6rem; background:#f7eeee; }
#price-panel-sidejob{ background:#fbf3e6; }
.price-course{
  font-size:2.4rem;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--c-sumi);
  text-align:center;
}
/* 期間のタブ：箱の中の横並びのスイッチ。選択中は赤地に白、ほかは白地 */
.price-terms{
  display:flex;
  justify-content:center;
  gap:1.2rem;
  margin-top:2rem;
}
.price-term{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:1rem;
  min-width:24rem;
  padding:1.4rem 2.4rem;
  border:.2rem solid #e6d3d3;
  border-radius:.8rem;
  background:#fff;
  color:var(--c-sumi);
  font-family:var(--f-jp);
  cursor:pointer;
  transition:background-color .2s, border-color .2s, color .2s;
}
.price-term b{ font-family:"Oswald", var(--f-num), sans-serif; font-size:3.2rem; font-weight:600; line-height:1; }
.price-term b small{ margin-left:.2rem; font-family:var(--f-jp); font-size:1.5rem; font-weight:900; }
.price-term span{ font-size:1.5rem; font-weight:700; }
.price-term:hover{ border-color:var(--bg-top); }
.price-term[aria-selected="true"]{ border-color:var(--bg-top); background:var(--bg-top); color:#fff; }
.price-term:only-child{ cursor:default; }
.price-term:focus-visible{ outline:3px solid var(--c-cta); outline-offset:2px; }
.price-fee{
  width:min(100%, 52rem);
  margin:2.4rem auto 0;
  background:#fff;
}
.price-fee__head{
  padding:1rem;
  background:var(--c-sumi);
  color:#fff;
  font-size:1.6rem;
  font-weight:900;
  letter-spacing:.12em;
  text-align:center;
}
.price-fee__body{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
  padding:2.8rem 2rem 3.2rem;
}
/* 一括の受講料（月々の下に小さく） */
.price-fee__total{
  font-size:1.6rem;
  font-weight:700;
  color:#8a7c7c;
  white-space:nowrap;
}
.price-fee__total b{
  margin:0 .2rem;
  font-family:"Oswald", var(--f-num), sans-serif;
  font-size:2.4rem;
  font-weight:500;
  color:var(--c-sumi);
}
.price-fee__total small,
.price-fee__unit small{ font-size:.6em; }
/* 月々（24回分割）をメインに大きく */
.price-fee__monthly{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
  white-space:nowrap;
}
.price-fee__tag{
  padding:.3rem 1.2rem;
  border-radius:99rem;
  background:#f7e7e8;
  color:var(--bg-top);
  font-size:1.4rem;
  font-weight:900;
  letter-spacing:.06em;
}
.price-fee__main{ display:flex; align-items:baseline; gap:.4rem; color:var(--bg-top); }
.price-fee__main b{
  font-family:"Oswald", var(--f-num), sans-serif;
  font-size:8rem;
  font-weight:600;
  line-height:1;
  letter-spacing:.01em;
}
.price-fee__unit{ font-size:2.4rem; font-weight:900; }
.price-fine{
  margin-top:1.6rem;
  font-size:1.1rem;
  color:#9a8f8f;
  text-align:center;
}
.price-incl{
  margin-top:4.8rem;
  padding-top:4.8rem;
  border-top:1px solid #e3d6d6;
}
.price-incl__title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
  font-size:1.8rem;
  font-weight:900;
  letter-spacing:.1em;
  color:var(--c-sumi);
}
/* 見出しの上のチェック：赤いグラデーションの丸に白いチェック。外に淡いリング＋影、左右に小さな光の粒 */
.price-incl__icon{
  position:relative;
  display:grid;
  place-items:center;
  width:5.6rem;
  height:5.6rem;
  margin-bottom:.4rem;
  border-radius:50%;
  background:linear-gradient(145deg, #e0625f 0%, var(--bg-top) 45%, var(--bg-bottom) 100%);
  box-shadow:0 0 0 .6rem rgba(204,75,74,.14), 0 .8rem 1.6rem rgba(158,50,57,.3), inset 0 .2rem 0 rgba(255,255,255,.35);
  color:#fff;
}
.price-incl__icon svg{ width:2.8rem; height:2.8rem; }
.price-incl__icon::before,
.price-incl__icon::after{
  content:"";
  position:absolute;
  width:.8rem;
  height:.8rem;
  background:var(--c-yellow);
  clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.price-incl__icon::before{ top:-.6rem; right:-1.4rem; }
.price-incl__icon::after{ bottom:.2rem; left:-1.6rem; width:.6rem; height:.6rem; background:#e0625f; }
.price-incl__list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.8rem;
  margin-top:2.4rem;
}
.price-incl__list li{
  display:grid;
  place-items:center;
  min-height:9rem;
  padding:1.6rem 2rem;
  border-radius:.8rem;
  background:#fff;
  box-shadow:0 .2rem .8rem rgba(158,50,57,.06);
  color:var(--c-sumi);
  font-size:1.5rem;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.04em;
  text-align:center;
  text-wrap:balance;
}
@media (max-width:1100px){
  .price-box{ margin-top:2.4rem; }
  #pricing .price-tab{ padding:1.6rem .6rem; font-size:1.3rem; letter-spacing:.02em; }
  .price-panel{ padding:3.2rem 1.6rem 3.6rem; }
  .price-course{ font-size:1.7rem; }
  .price-terms{ gap:.6rem; margin-top:1.4rem; }
  .price-term{ flex:1 1 0; min-width:0; flex-direction:column; align-items:center; gap:.2rem; padding:1rem .6rem; }
  .price-term:only-child{ flex:0 1 60%; }
  .price-term b{ font-size:2.4rem; }
  .price-term b small{ font-size:1.2rem; }
  .price-term span{ font-size:1.1rem; }
  .price-fee{ margin-top:1.8rem; }
  .price-fee__head{ padding:.8rem; font-size:1.3rem; }
  .price-fee__body{ gap:.8rem; padding:2rem 1.2rem 2.4rem; }
  .price-fee__total{ font-size:1.3rem; }
  .price-fee__total b{ font-size:2rem; }
  .price-fee__tag{ font-size:1.15rem; }
  .price-fee__main b{ font-size:5.6rem; }
  .price-fee__unit{ font-size:1.7rem; }
  .price-fine{ font-size:1rem; text-align:left; }
  .price-incl{ margin-top:3.2rem; padding-top:3.2rem; }
  .price-incl__title{ font-size:1.5rem; }
  .price-incl__icon{ width:4.4rem; height:4.4rem; box-shadow:0 0 0 .5rem rgba(204,75,74,.14), 0 .6rem 1.2rem rgba(158,50,57,.3), inset 0 .2rem 0 rgba(255,255,255,.35); }
  .price-incl__icon svg{ width:2.2rem; height:2.2rem; }
  .price-incl__list{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6rem; margin-top:1.8rem; }
  .price-incl__list li{ min-height:7.2rem; padding:1.2rem .8rem; font-size:1.15rem; letter-spacing:0; }
}

/* 白セクションは .home(1440) の外まで白を伸ばす（左右に背景の赤が覗かないように） */
.sec-white{
  box-shadow:0 0 0 100vmax #fff;
  clip-path:inset(0 -100vmax);
}
/* 地が白以外の明るいセクションも同様に左右へ伸ばす（白セクションに挟まれて赤が覗かないように） */
.sec-aicareer{ box-shadow:0 0 0 100vmax #fff; }
/* 墨のセクション：.home(1440) の外まで墨を伸ばす */
#flow{
  background:var(--c-sumi);
  box-shadow:0 0 0 100vmax var(--c-sumi);
  clip-path:inset(0 -100vmax);
}
/* CTA は白地（.home(1440) の外まで白を伸ばす） */
#cta{
  background:#fff;
  box-shadow:0 0 0 100vmax #fff;
  clip-path:inset(0 -100vmax);
}

/* 目指せる仕事（白地）：カードは不透明な赤グラデにし、ナビ・注記を白地向けの色に */
#jobs.sec-white .job-card{
  border-color:transparent;
  background:linear-gradient(154deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}
#jobs.sec-white .job-card:hover{ box-shadow:0 1.6rem 3.2rem rgba(158,50,57,.25); }
#jobs.sec-white .jobs-note{ color:#777; }
#jobs.sec-white .jobs-nav__btn{
  background:var(--bg-bottom);
  border-color:var(--bg-bottom);
}
#jobs.sec-white .jobs-nav__btn::before{ border-color:var(--c-cream); }
#jobs.sec-white .jobs-nav__btn:hover:not(:disabled){ background:var(--c-sumi); border-color:var(--c-sumi); }
#jobs.sec-white .jobs-nav__dot{ background:#ead3d2; }
#jobs.sec-white .jobs-nav__dot[aria-current="true"]{ background:var(--bg-bottom); }
/* 前/次のボタン：モデルケースと同じ正方形（オレンジ地・角丸なし・白い矢印）。カルーセルの左右端、写真の縦中央に置く
   （--jobs-nav-y は Jobs.astro のスクリプトで入れる）。ドットはカードの下に残す */
#jobs .jobs-carousel{ position:relative; }
#jobs.sec-white .jobs-nav__btn{
  position:absolute;
  z-index:2;
  top:var(--jobs-nav-y, 30%);
  width:5.6rem;
  height:5.6rem;
  margin-top:-2.8rem;
  border:none;
  border-radius:0;
  background:var(--c-orange) url(../img/top/case_nav_arrow_sq.svg) center/100% no-repeat;
  box-shadow:0 .4rem 1.2rem rgba(0,0,0,.18);
}
#jobs .jobs-nav__btn::before{ content:none; }
#jobs .jobs-nav__btn--prev{ left:0; transform:translateX(-50%) rotate(180deg); }
#jobs .jobs-nav__btn--next{ right:0; transform:translateX(50%); }
#jobs.sec-white .jobs-nav__btn:hover:not(:disabled){ background-color:var(--c-sumi); }
#jobs .jobs-nav__btn:disabled{ opacity:0; pointer-events:none; }
@media (max-width:1100px){
  /* SP：中央のカードの両隣に前後のカードをのぞかせる（カード幅＝カルーセル幅−6rem、左右の余白5rem＝中央寄せ）。
     ボタンは中央のカードの左右端（カルーセル端から3rem）に置く */
  #jobs .jobs-carousel{ container-type:inline-size; }
  #jobs .jobs-cards{ padding-inline:5rem; scroll-padding-inline:0; }
  #jobs .job-card{ flex-basis:calc(100cqw - 6rem); scroll-snap-align:center; }
  #jobs.sec-white .jobs-nav__btn{ width:4rem; height:4rem; margin-top:-2rem; }
  #jobs .jobs-nav__btn--prev{ left:1rem; transform:rotate(180deg); }
  #jobs .jobs-nav__btn--next{ right:1rem; transform:none; }
}
/* 上端は前のセクション（お悩み＝赤）から下向きの矢印：画面の両端から中央へ斜めに切り欠き、赤を覗かせる */
#about{
  --arrow-h:9.6rem;   /* 中央の深さ */
  box-shadow:0 0 0 100vmax var(--c-gray-bg);
  clip-path:polygon(
    -100vmax 0, calc(50% - 50vw) 0, 50% var(--arrow-h), calc(50% + 50vw) 0,
    calc(100% + 100vmax) 0, calc(100% + 100vmax) 100%, -100vmax 100%
  );
}
@media (max-width:1100px){
  #about{ --arrow-h:3.2rem; }
}
/* 選ばれる理由：テーマの赤に統一。上下の尖り帯は画像をやめて CSS(clip-path) で描く。
   帯の地は前後のセクションの地に合わせる（前＝AIスクールとの違い / 後＝モデルケース）。尖りの形は旧画像 reason-bg_head/bottom.png に合わせた */
#reasons{
  --reason-red:var(--c-sumi);   /* 前後（白／濃い赤のモデルケース）と区別するため墨 */
}
#reasons .reason-band-top{
  background:#fff;   /* 前の「AIスクールとの違い」(.sec-aicareer)の地 */
  margin-top:-2px;   /* 前のセクションとの継ぎ目に細い線（下地の赤・グレー）が出ないよう重ねる */
}
/* 下の帯は後ろのモデルケース(#cases)の上端の色 */
#reasons .reason-band-bottom{
  background:#a73433;
}
#reasons .reason-band-top::before,
#reasons .reason-band-bottom::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--reason-red);
}
#reasons .reason-band-top::before{
  inset:0 0 -1px;   /* 本体との継ぎ目に白い線が出ないよう1px重ねる */
  clip-path:polygon(0 85%, 28.5% 0, 100% 97%, 100% 100%, 0 100%);
}
#reasons .reason-band-bottom::before{
  inset:-1px 0 0;
  clip-path:polygon(0 0, 100% 0, 100% 3%, 71.5% 100%, 0 3%);
}
#reasons .reason-body{
  background:var(--reason-red);
}
#reasons .reason-marquee{
  color:var(--c-sumi-marquee);   /* 地より一段明るい墨 */
}

/* 「AI」左のテック装飾（回路）：文字に重ならないよう左に逃がし、縦中央に */
.fv-toeic__deco{
  left:-7.2rem;
  top:50%;
  transform:translateY(-50%);
  width:6.4rem;
}

/* 見出し左のテック装飾（旧：唇マーク）。旧GIFと同じ 28:21 比率 */
img[src$="head_deco_tech.svg"],
img[src$="head_deco_tech_red.svg"]{
  width:3.6rem !important;
  height:auto;
  aspect-ratio:28 / 21;
}
@media (max-width:1100px){
  img[src$="head_deco_tech.svg"],
  img[src$="head_deco_tech_red.svg"]{ width:2.4rem !important; }
}

/* 転職のモデルケース：背景を一段暗い赤に（クリームの吹き出しを際立たせる） */
#cases{
  background:linear-gradient(180deg, #a73433 0%, #8c2827 100%);
  --c-marquee:#7a2121;
}

/* =========================================================
   固定ヘッダー（ロゴ / ナビ / CTA）。FV上は透明、スクロールで赤背景
   ========================================================= */
html{ scroll-padding-top:8rem; }   /* ページ内リンクの着地をヘッダー分ずらす */
.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  transition:background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
/* スクロール後：アイランドナビゲーション（中央に浮かぶピル型）。地はヘッダーではなく inner に付ける */
.site-header.is-scrolled .site-header__inner{
  max-width:128rem;
  height:6.4rem;
  margin:1.2rem auto 0;
  padding-inline:2.8rem 1rem;
  border-radius:10rem;
  /* すりガラス：白の光沢グラデ＋薄い赤みの下地（白セクション上でもクリーム文字が読めるように） */
  background:
    linear-gradient(135deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 60%),
    rgba(160,50,49,.66);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
/* スクロール後はバーの幅に収まるよう、項目の間隔とエボルートの枠を詰める */
.site-header.is-scrolled .site-nav{ gap:2.4rem; }
.site-header.is-scrolled .site-nav__list{ gap:2.4rem; }
.site-header.is-scrolled .site-nav__link--media{ padding:.5rem 1.4rem; }
.site-header.is-scrolled .site-header__logo img{ width:16rem; }
.site-header.is-scrolled .site-nav__cta{ padding:.8rem 2.4rem .9rem; }
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3.2rem;
  max-width:100%;
  height:8rem;
  margin:0 auto;
  padding-inline:3.2rem;
  border-radius:0;
  transition:max-width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1), margin .45s cubic-bezier(.2,.8,.2,1), border-radius .45s ease, background-color .3s ease, box-shadow .3s ease, padding .45s ease;
}
.site-header__logo img{ transition:width .45s ease; }
.site-header__logo img{
  width:19rem;
  height:auto;
}
.site-nav{
  display:flex;
  align-items:center;
  gap:3.6rem;
}
.site-nav__list{
  display:flex;
  align-items:center;   /* エボルートの枠で行が高くなっても、ほかのリンクを縦中央にそろえる */
  gap:3.2rem;
  list-style:none;
}
.site-nav__link{
  position:relative;
  color:var(--c-cream);
  font-weight:700;
  font-size:1.4rem;
  letter-spacing:.06em;
  white-space:nowrap;
}
.site-nav__link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.6rem;
  height:.2rem;
  background:var(--c-yellow);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.site-nav__link:hover::after{ transform:scaleX(1); }
/* ブログ（エボルート）への導線。ページ内リンクと区別して、クリームの枠のピルにする */
.site-nav__link--media{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:.7rem 1.6rem;
  border:.2rem solid rgba(249,238,218,.75);
  border-radius:999px;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.site-nav__link--media::after{ display:none; }
.site-nav__link--media:hover{
  background:var(--c-cream);
  border-color:var(--c-cream);
  color:var(--c-red);
}
.site-nav__media-sub{
  font-family:var(--f-num);
  font-size:1rem;
  letter-spacing:.12em;
  color:var(--c-yellow);
}
.site-nav__link--media:hover .site-nav__media-sub{ color:var(--c-red); }
.site-nav__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  padding:1rem 2.8rem 1.1rem;
  border-radius:10rem;
  background:var(--c-cta);
  color:var(--c-cream);
  font-weight:900;
  line-height:1.3;
  white-space:nowrap;
  transition:background-color .25s ease;
}
.site-nav__cta:hover{ background:var(--c-black); }
.site-nav__cta-sub{
  font-size:1.1rem;
  font-weight:700;
  color:var(--c-yellow);
  letter-spacing:.06em;
}
.site-nav__cta-main{
  font-size:1.5rem;
  letter-spacing:.04em;
}
.site-header__toggle{ display:none; }

/* ----- タブレット/SP：ハンバーガー＋全画面メニュー ----- */
@media (max-width:1100px){
  html{ scroll-padding-top:5.6rem; }
  .site-header__inner{
    height:5.6rem;
    padding-inline:1.6rem;
  }
  .site-header__logo img{ width:14.4rem; }
  .site-header__toggle{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:.5rem;
    width:4.4rem;
    height:4.4rem;
    padding:0 1rem;
    border-radius:50%;
    background:var(--c-cta);
  }
  .site-header__toggle span{
    display:block;
    height:.2rem;
    border-radius:.2rem;
    background:var(--c-cream);
    transition:transform .3s ease, opacity .3s ease;
  }
  .site-header.is-open .site-header__toggle span:nth-child(1){ transform:translateY(.7rem) rotate(45deg); }
  .site-header.is-open .site-header__toggle span:nth-child(2){ opacity:0; }
  .site-header.is-open .site-header__toggle span:nth-child(3){ transform:translateY(-.7rem) rotate(-45deg); }
  .site-nav{
    position:fixed;
    inset:0;
    z-index:1;
    flex-direction:column;
    justify-content:center;
    gap:4rem;
    padding:8rem 2.4rem 4rem;
    background:linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .site-header.is-open .site-nav{
    opacity:1;
    visibility:visible;
  }
  .site-nav__list{
    flex-direction:column;
    align-items:center;
    gap:2.8rem;
  }
  .site-nav__link{ font-size:2rem; }
  .site-nav__cta{ padding:1.4rem 3.2rem 1.5rem; }
  .site-nav__cta-sub{ font-size:1.2rem; }
  .site-nav__cta-main{ font-size:1.7rem; }
  html.is-menu-open{ overflow:hidden; }
}
@media (max-width:1100px){
  /* backdrop-filter があると fixed の子(全画面メニュー)がヘッダー内に閉じ込められるため、開いている間は外す */
  .site-header.is-scrolled .site-header__inner{
    max-width:calc(100% - 1.6rem);
    height:5.2rem;
    margin-top:.8rem;
    padding-inline:1.6rem .4rem;
  }
  .site-header.is-scrolled .site-header__logo img{ width:12.8rem; }
  .site-header.is-scrolled .site-header__toggle{ width:4.2rem; height:4.2rem; }
  .site-header.is-open .site-header__inner{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:transparent;
    box-shadow:none;
  }
}

/* FV背景の英字：アニメーションなしの静止テキスト。傾きは左下→右上（-8deg） */
.fv-lead{
  transform:translate(-50%, -50%) rotate(-8deg);
}
.fv-lead__rail{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
/* 文頭「Learn AI.」が画面左端から読めるよう、帯のはみ出し分（(170vw-100vw)/2）だけ左に余白 */
.fv-lead__rail{
  justify-content:flex-start;
  padding-left:calc(35vw + 2rem);
}
@media (max-width:1100px){
  .fv-lead__rail{ padding-left:calc(20vw + 1rem); }
}

/* =========================================================
   FV直下：AI人材としてキャリアアップできる理由（4ステップ）
   赤＝キャリエボ独自 / 白＝一般的なAIスクールでも受けられる範囲
   ========================================================= */
.sec-aicareer{
  padding-block:10rem 11rem;
  background:#fff;
  box-shadow:0 0 0 100vmax #fff;
  --gold:#c9a45c;
}
.aic-inner{ text-align:center; }
.aic-title{
  font-weight:900;
  font-size:4.4rem;
  line-height:1.35;
  letter-spacing:.02em;
  color:var(--c-ink);
}
.aic-title__em{ color:var(--c-red); }
.aic-br-sp{ display:none; }
.aic-lead{
  margin-top:3.2rem;
  font-size:1.7rem;
  line-height:2;
  color:#444;
}
.aic-lead strong{ color:var(--c-ink); font-weight:900; }
.aic-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-areas:
    "own  own  own  own"
    "gen  gen  .    ."
    "c1   c2   c3   c4"
    "fg   fg   fo   fo";
  gap:1.6rem;
  margin-top:7.2rem;
  text-align:left;
}
/* 帯（右端が矢印）。clip-path で右を尖らせる */
.aic-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:5.6rem;
  padding:0 5.6rem 0 2.8rem;
  color:#fff;
  font-weight:900;
  font-size:1.8rem;
  letter-spacing:.04em;
  clip-path:polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
}
.aic-bar--own{ grid-area:own; background:var(--c-red); border-radius:.4rem 0 0 .4rem; }
.aic-bar--general{ grid-area:gen; background:var(--gold); border-radius:.4rem 0 0 .4rem; }
.aic-bar__logo{ width:12rem; height:auto; }
.aic-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
  padding:5.6rem 3.2rem 4.8rem;
  border-radius:.8rem;
  text-align:center;
}
.aic-card--1{ grid-area:c1; } .aic-card--2{ grid-area:c2; }
.aic-card--3{ grid-area:c3; } .aic-card--4{ grid-area:c4; }
.aic-card--own{
  background:linear-gradient(160deg, var(--bg-top), var(--bg-bottom));
  color:#fff;
  box-shadow:0 1.6rem 3.2rem rgba(177,55,54,.22);
}
.aic-card--general{
  background:#fff;
  color:var(--c-ink);
  border:1px solid #ebe6e5;   /* 白地の上でもカードの輪郭が見えるように */
  box-shadow:0 1.6rem 3.2rem rgba(0,0,0,.06);
}
.aic-card__icon{
  width:20rem;
  height:14rem;
  margin-bottom:.4rem;
}
.aic-card__icon svg{ width:100%; height:100%; overflow:visible; }
/* 線＝メインの色（currentColor）、.aic-accent＝差し色の線、.aic-fill＝差し色の塗り、.aic-soft＝うすい塗り */
.aic-card--own .aic-card__icon{ color:#fff; --aic-accent:var(--c-yellow); --aic-on-accent:var(--c-red); }
.aic-card--general .aic-card__icon{ color:var(--gold); --aic-accent:var(--c-red); --aic-on-accent:#fff; }
.aic-card__icon .aic-accent{ stroke:var(--aic-accent); }
.aic-card__icon .aic-fill{ fill:var(--aic-accent); stroke:var(--aic-accent); stroke-width:2; }
.aic-card__icon .aic-soft{ fill:color-mix(in srgb, currentColor 14%, transparent); }
.aic-card__icon .aic-dot{ fill:currentColor; stroke:none; }
.aic-card__icon .aic-ai{ fill:var(--aic-on-accent); stroke:none; font:900 10px/1 var(--f-num), sans-serif; }
.aic-card__title{
  font-weight:900;
  font-size:2.4rem;
  line-height:1.4;
}
.aic-card__no{
  font-family:var(--f-num);
  margin-right:.3rem;
}
.aic-card--general .aic-card__no{ color:var(--gold); }
.aic-card__text{
  font-size:1.5rem;
  line-height:1.9;
  text-align:left;
}
.aic-card--general .aic-card__text{ color:#555; }
/* 下段：流れのラベル＋矢印 */
.aic-flow{
  display:flex;
  align-items:center;
  margin-top:2.4rem;
}
.aic-flow span{
  flex:none;
  padding:1.2rem 2.4rem;
  border-radius:.4rem;
  color:#fff;
  font-weight:900;
  font-size:1.6rem;
  letter-spacing:.04em;
}
.aic-flow::after{
  content:"";
  flex:1;
  height:2px;
  margin-left:.8rem;
  background:linear-gradient(currentColor, currentColor) left center / 100% 2px no-repeat;
  -webkit-mask:linear-gradient(90deg, #000 calc(100% - 1rem), transparent 0);
}
.aic-flow--own{ grid-area:fo; color:var(--c-red); }
.aic-flow--own span{ background:var(--c-red); }
.aic-flow--general{ grid-area:fg; color:#8a8a8a; }
.aic-flow--general span{ background:#8a8a8a; }
.aic-flow{ position:relative; }
.aic-flow > i{ display:none; }
.aic-flow::before{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  border-style:solid;
  border-width:.7rem 0 .7rem 1.2rem;
  border-color:transparent transparent transparent currentColor;
  transform:translateY(-50%);
}

@media (max-width:1100px){
  .sec-aicareer{ padding-block:6rem 7rem; }
  .sec-aicareer .l-1440{ padding-inline:2rem; }
  .aic-title{ font-size:2.4rem; }
  .aic-br-sp{ display:inline; }
  .aic-lead{ margin-top:2rem; font-size:1.4rem; text-align:left; }
  .aic-lead br{ display:none; }
  /* SP：4枚を横1列のまま横スクロール（画面の端まで広げる。左右の余白は .l-1440 の 2rem ぶん） */
  .aic-scroll{ position:relative; margin:4rem -2rem 0; }
  .aic-grid{
    grid-template-columns:repeat(4, 22rem);
    gap:1.2rem;
    margin-top:0;
    padding:0 2rem 1.2rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:2rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .aic-grid::-webkit-scrollbar{ display:none; }
  .aic-card{ scroll-snap-align:start; }
  .aic-grid::after{ content:""; grid-row:1; grid-column:5; width:.8rem; }   /* 右端にも余白を残す */
  /* スクロールヒント：右端のフェード＋「スクロール」の丸。一度スクロールしたら消す */
  .aic-scroll::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:4.8rem;
    background:linear-gradient(90deg, rgba(255,255,255,0), #fff);
    pointer-events:none;
    transition:opacity .3s;
  }
  .aic-hint{
    position:absolute;
    z-index:2;
    right:1.6rem;
    top:22rem;
    display:grid;
    place-items:center;
    gap:.2rem;
    width:8rem;
    height:8rem;
    border-radius:50%;
    background:rgba(42,34,35,.82);
    color:#fff;
    font-size:1.1rem;
    font-weight:700;
    pointer-events:none;
    transition:opacity .3s;
  }
  .aic-hint svg{ width:3.2rem; height:3.2rem; animation:aic-hint-swipe 1.4s ease-in-out infinite; }
  .aic-scroll.is-scrolled::after,
  .aic-scroll.is-scrolled .aic-hint{ opacity:0; }
  .aic-bar{ min-height:4.4rem; padding:0 3.6rem 0 1.6rem; font-size:1.4rem; }
  .aic-bar--general{ font-size:1.25rem; letter-spacing:0; white-space:nowrap; }
  .aic-bar__logo{ width:8rem; }
  .aic-card{ padding:2.8rem 1.6rem 2.4rem; gap:1.2rem; border-radius:.8rem; }
  .aic-card__icon{ width:15rem; height:10.5rem; margin-bottom:0; }
  .aic-card__title{ font-size:1.6rem; }
  .aic-card__text{ font-size:1.25rem; line-height:1.8; }
  .aic-flow{ margin-top:.4rem; margin-bottom:1.6rem; }
  .aic-flow span{ font-size:1.3rem; padding:.9rem 1.4rem; }
}
.aic-hint{ display:none; }   /* PC は横に全部見えるのでヒント不要（SP で表示） */
@media (max-width:1100px){ .aic-hint{ display:grid; } }
@keyframes aic-hint-swipe{
  0%, 100%{ transform:translateX(.8rem); }
  50%{ transform:translateX(-.8rem); }
}
@media (prefers-reduced-motion: reduce){ .aic-hint svg{ animation:none; } }
/* 他サービスとの比較表：キャリエボ列だけ赤で強調。記号は ◎=赤 / ○=赤(細) / △=金 / —=グレー */
.aic-compare{
  margin-top:8rem;
}
.aic-compare__title{
  font-weight:900;
  font-size:3.2rem;
  color:var(--c-ink);
}
.aic-compare__scroll{
  margin-top:3.2rem;
}
.aic-compare__table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  background:#fff;
  border-radius:.8rem;
  overflow:hidden;
  box-shadow:0 1.6rem 4rem rgba(158,50,57,.08);
  font-size:1.6rem;
  line-height:1.5;
  color:var(--c-ink);
}
.aic-compare__table th,
.aic-compare__table td{
  padding:2rem 1.6rem;
  border-bottom:1px solid #eee5e3;
  text-align:center;
  vertical-align:middle;
}
.aic-compare__table tbody tr:last-child > *{ border-bottom:none; }
.aic-compare__table thead th{
  padding-block:2.4rem;
  background:#efe9e7;
  font-weight:900;
  font-size:1.6rem;
  color:#555;
}
.aic-compare__table thead th:first-child{ width:24%; }
.aic-compare__table tbody th{
  text-align:left;
  font-weight:700;
  background:#faf8f7;
}
/* キャリエボ列 */
.aic-compare__table .is-own{
  background:#fbeceb;
}
.aic-compare__table thead .is-own{
  background:var(--c-red);
}
.aic-compare__table thead .is-own img{
  display:block;
  width:16rem;
  height:auto;
  margin:0 auto;
}
.aic-mark{
  display:inline-block;
  font-weight:900;
  font-size:2.8rem;
  line-height:1;
}
.aic-mark--0{ color:var(--c-red); }
.aic-mark--1{ color:var(--c-red); opacity:.75; }
.aic-mark--2{ color:var(--gold); }
.aic-mark--3{ color:#bbb; }
.is-own .aic-mark{ font-size:3.4rem; }
.aic-compare__text{ font-weight:700; }
.is-own .aic-compare__text{ color:var(--c-red); }
.aic-compare__note{
  margin-top:1.6rem;
  font-size:1.2rem;
  line-height:1.8;
  color:#777;
  text-align:right;
}
@media (max-width:1100px){
  .aic-compare{ margin-top:5.6rem; }
  .aic-compare__title{ font-size:2.2rem; }
  .aic-compare__scroll{
    margin:2rem -2rem 0;
    padding:0 2rem 1.2rem;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .aic-compare__table{
    min-width:60rem;
    font-size:1.2rem;
    border-radius:.8rem;
  }
  .aic-compare__table th,
  .aic-compare__table td{ padding:1.4rem .8rem; }
  .aic-compare__table thead th{ font-size:1.2rem; padding-block:1.6rem; }
  .aic-compare__table thead th:first-child{ width:11em; }
  .aic-compare__table tbody th{
    position:sticky;
    left:0;
    z-index:1;
    box-shadow:2px 0 0 #eee5e3;
  }
  .aic-compare__table thead th:first-child{
    position:sticky;
    left:0;
    z-index:1;
  }
  .aic-compare__table thead .is-own img{ width:9.6rem; max-width:100%; }
  .aic-mark{ font-size:2rem; }
  .is-own .aic-mark{ font-size:2.4rem; }
  .aic-compare__note{ font-size:1rem; text-align:left; }
}
/* カード見出し・本文は文節で折り返し、1文字だけ次行に落ちるのを防ぐ */
.aic-card__title,
.aic-title,
.aic-card__text{
  word-break:auto-phrase;
  text-wrap:balance;
}
.aic-card__text{ text-wrap:pretty; }
.aic-card__text{ word-break:normal; }   /* 本文は通常の折り返し（文節単位だと狭い幅で行が短く切れすぎる） */

/* =========================================================
   コーチ紹介（Coaches）
   ========================================================= */
#coaches{
  color:var(--c-cream);
  padding-block:12rem;
}
#coaches .coach-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.6rem;
  margin:0;
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-cream);
  font-size:3.2rem;
  letter-spacing:.06em;   /* 見出しは字間を少し広げる */
  line-height:1.39;
}
#coaches .coach-title__mouth{
  width:2.6rem;
  height:2.1rem;
}
#coaches .coach-lead{
  margin:1.6rem 0 0;
  text-align:center;
  font-weight:500;
  font-size:1.6rem;
  line-height:2.8rem;
}
/* AIメンター／キャリアコーチのタブ */
#coaches .coach-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  max-width:72rem;
  margin:4.8rem auto 0;
}
#coaches .coach-tab{
  position:relative;
  min-height:6.4rem;
  border:.2rem solid #fff;
  border-radius:.8rem;
  background:transparent;
  color:#fff;
  font-size:2.2rem;
  font-weight:900;
  letter-spacing:.06em;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
#coaches .coach-tab[aria-selected="true"]{ background:#fff; color:var(--bg-top); }
#coaches .coach-tab[aria-selected="true"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1.2rem;
  width:2.4rem;
  height:1.2rem;
  margin-left:-1.2rem;
  background:#fff;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
#coaches .coach-panel[hidden]{ display:none; }
/* 横1列のカルーセル */
#coaches .coach-cards{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2rem * 3) / 4);
  gap:2rem;
  margin-top:3.6rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  list-style:none;
}
#coaches .coach-cards::-webkit-scrollbar{ display:none; }
#coaches .coach-card{ scroll-snap-align:start; }
#coaches .coach-panel{ position:relative; }
#coaches .coach-nav{ display:contents; }
/* 矢印：仕事の例・モデルケースと同じ正方形（オレンジ地・角丸なし・白い矢印・影なし）。
   カード列の左右の端に半分はみ出して置き、高さはカードの縦中央（パネル上の margin-top のぶん下げる） */
#coaches .coach-nav__btn{
  position:absolute;
  top:calc(50% + 1.8rem);
  z-index:2;
  width:5.6rem;
  height:5.6rem;
  margin-top:-2.8rem;
  border:none;
  border-radius:0;
  background:var(--c-orange) url(../img/top/case_nav_arrow_sq.svg) center/100% no-repeat;
  cursor:pointer;
  transition:opacity .2s ease, background-color .2s ease;
}
#coaches .coach-nav__btn--prev{ left:0; transform:translateX(-50%) rotate(180deg); }
#coaches .coach-nav__btn--next{ right:0; transform:translateX(50%); }
#coaches .coach-nav__btn:hover:not(:disabled){ background-color:var(--c-sumi); }
#coaches .coach-nav__btn:disabled{ opacity:0; pointer-events:none; }
#coaches .coach-card__photo img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
#coaches .coach-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:4rem 3.2rem;
  background:var(--c-cream);
  border-radius:0.8rem;
  color:var(--c-black);
  text-align:center;
}
#coaches .coach-card__photo{
  width:14rem;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--c-orange4);
  color:var(--c-orange);
  font-family:var(--f-en);
  font-size:1.2rem;
}
#coaches .coach-card__role{
  margin:2.4rem 0 0;
  padding:0.4rem 1.6rem;
  border-radius:10rem;
  background:var(--c-red);
  color:var(--c-white);
  font-weight:700;
  font-size:1.3rem;
}
#coaches .coach-card__name{
  margin:1.2rem 0 0;
  font-weight:900;
  font-size:2.2rem;
}
#coaches .coach-card__career{
  margin:1.6rem 0 0;
  font-weight:500;
  font-size:1.5rem;
  line-height:2.6rem;
  text-align:left;
}
#coaches .coach-card__tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.8rem;
  margin-top:2rem;
}
#coaches .coach-card__tags li{
  padding:0.4rem 1.2rem;
  border:1px solid var(--c-red);
  border-radius:0.4rem;
  color:var(--c-red);
  font-weight:700;
  font-size:1.2rem;
}

/* =========================================================
   代表メッセージ（Message）
   ========================================================= */
#message{
  padding-block:12rem;
}
#message .message-card{
  display:flex;
  align-items:flex-start;
  gap:6.4rem;
  padding:6.4rem;
  background:#fff;
  border-radius:0.8rem;
  color:var(--c-black);
}
#message .message-photo{
  flex:0 0 32rem;
  aspect-ratio:4/5;
  display:grid;
  place-items:center;
  border-radius:0.8rem;
  background:var(--c-gray-bg);   /* 写真の仮枠 */
  color:var(--c-orange);
  font-family:var(--f-en);
  font-size:1.2rem;
}
#message .message-body{
  flex:1 1 0;
  min-width:0;
}
#message .message-label{
  margin:0;
  font-family:var(--f-en);
  color:var(--c-red);
  font-size:1.4rem;
}
#message .message-title{
  margin:1.6rem 0 0;
  font-weight:900;
  font-size:3.2rem;
  line-height:1.5;
}
#message .message-text{
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  margin-top:3.2rem;
}
#message .message-text p{
  margin:0;
  font-weight:500;
  font-size:1.6rem;
  line-height:3rem;
}
#message .message-sign{
  margin:3.2rem 0 0;
  text-align:right;
  font-weight:700;
  font-size:1.4rem;
}
#message .message-sign__name{
  margin-left:1.6rem;
  font-weight:900;
  font-size:2rem;
}

@media (max-width: 1100px){
  #coaches{
    padding-block:6rem;
  }
  #coaches .coach-title{
    font-size:2rem;
  }
  #coaches .coach-title__mouth{
    width:1.8rem;
  }
  #coaches .coach-lead{
    font-size:1.4rem;
    line-height:2.4rem;
  }
  #coaches .coach-tabs{ gap:.8rem; margin-top:2.8rem; }
  #coaches .coach-tab{ min-height:5.2rem; font-size:1.5rem; letter-spacing:.02em; }
  /* SP：いまのカード（左端から78%幅）の左右の端に。左右の余白（2rem）に収まる 4rem 角 */
  #coaches .coach-nav__btn{ top:calc(50% + 1.2rem); width:4rem; height:4rem; margin-top:-2rem; }
  #coaches .coach-nav__btn--next{ right:auto; left:78%; transform:translateX(-50%); }
  #coaches .coach-cards{
    grid-auto-columns:78%;
    gap:1.2rem;
    margin-top:2.4rem;
    margin-inline:-2rem;
    padding-inline:2rem;
    scroll-padding-inline:2rem;
  }
  #coaches .coach-card{
    padding:3.2rem 2.4rem;
  }
  #coaches .coach-card__photo{
    width:11rem;
  }
  #message{
    padding-block:6rem;
  }
  #message .message-card{
    flex-direction:column;
    align-items:stretch;
    gap:3.2rem;
    padding:3.2rem 2.4rem;
  }
  #message .message-photo{
    flex:none;
    width:100%;
    max-width:28rem;
    margin-inline:auto;
  }
  #message .message-title{
    font-size:2.2rem;
  }
  #message .message-title br{
    display:none;
  }
  #message .message-text p{
    font-size:1.5rem;
    line-height:2.7rem;
  }
}

/* =========================================================
   メインCTA（.btn-cv）：青のピル＋左に「無料」バッジ＋上に吹き出し
   ========================================================= */
.btn-cv{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:1.2em;
  min-height:4.2em;
  margin-top:1.8em;   /* 吹き出しのぶん＋上の余白 */
  padding:0 1.8em 0 4.6em;
  border-radius:999px;
  background:var(--c-cta);
  box-shadow:0 .28em 0 #0e3489;
  color:#fff;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:2.2rem;
  line-height:1.4;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-cv:hover{
  transform:translateY(.16em);
  box-shadow:0 .12em 0 #0e3489;
}
.btn-cv__badge{
  position:absolute;
  left:.4em;
  top:50%;
  width:3.5em;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  background:var(--c-orange);
  clip-path:polygon(50.0% 0.0%, 58.4% 7.8%, 69.1% 3.8%, 73.9% 14.2%, 85.4% 14.6%, 85.8% 26.1%, 96.2% 30.9%, 92.2% 41.6%, 100.0% 50.0%, 92.2% 58.4%, 96.2% 69.1%, 85.8% 73.9%, 85.4% 85.4%, 73.9% 85.8%, 69.1% 96.2%, 58.4% 92.2%, 50.0% 100.0%, 41.6% 92.2%, 30.9% 96.2%, 26.1% 85.8%, 14.6% 85.4%, 14.2% 73.9%, 3.8% 69.1%, 7.8% 58.4%, 0.0% 50.0%, 7.8% 41.6%, 3.8% 30.9%, 14.2% 26.1%, 14.6% 14.6%, 26.1% 14.2%, 30.9% 3.8%, 41.6% 7.8%);
  font-weight:900;
  font-size:.85em;
  letter-spacing:.04em;
}
.btn-cv__label{
  flex:1 1 auto;
  text-align:center;
}
.btn-cv__arrow{
  flex:none;
  width:0;
  height:0;
  border-style:solid;
  border-width:.38em 0 .38em .6em;
  border-color:transparent transparent transparent #fff;
}
.btn-cv__bubble{
  position:absolute;
  left:50%;
  bottom:calc(100% - 1em);
  transform:translateX(-50%);
  padding:.3em 1.1em;
  border:.13em solid #1a4fc4;
  border-radius:999px;
  background:#fff;
  color:var(--c-ink);
  font-size:.66em;
  font-weight:700;
  line-height:1.5;
}
.btn-cv__bubble em{
  margin-inline:.1em;
  font-style:normal;
  font-weight:900;
  font-size:1.25em;
  color:var(--c-red);
}
.btn-cv__bubble::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:.6em;
  height:.6em;
  background:#fff;
  border-right:.13em solid #1a4fc4;
  border-bottom:.13em solid #1a4fc4;
  transform:translate(-50%, -.3em) rotate(45deg);
}
.btn-cv--fv{
  font-size:2.4rem;
}
.btn-cv--cta,
.btn-cv--price,
.btn-cv--jobs{
  font-size:2.4rem;
}
@media (max-width: 1100px){
  .btn-cv,
  .btn-cv--fv,
  .btn-cv--cta,
  .btn-cv--price,
  .btn-cv--jobs{
    display:flex;
    width:100%;
    font-size:1.5rem;
    padding:0 1.2em 0 4.2em;
    gap:.6em;
  }
  .btn-cv__badge{
    width:3.3em;
  }
  /* FV の中身は高さに合わせて em で縮むので、ボタンの文字も em にして枠からはみ出さないようにする */
  .hero .btn-cv--fv{
    font-size:1.5em;
  }
}

/* FAQ：カテゴリ見出し。PCは「左＝カテゴリ名／右＝質問リスト」の2カラム（見出しはスクロール中も左に残す） */
#faq .faq-group{
  display:grid;
  grid-template-columns:34rem minmax(0, 1fr);   /* 最長のカテゴリ名（13字）が1行に収まる幅 */
  gap:4rem;
  align-items:start;
}
#faq .faq-group + .faq-group{
  margin-top:6.4rem;
}
#faq .faq-cat{
  position:sticky;
  top:10rem;
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin:1.6rem 0 0;
  line-height:1.4;
  font-family:var(--f-jp);
  font-weight:900;
  font-size:2.2rem;
  color:var(--c-ink);
}
#faq .faq-cat::before{
  content:"";
  flex:none;
  width:0.6rem;
  height:2.8rem;
  border-radius:0.3rem;
  background:var(--c-red);
}
@media (max-width: 1100px){
  #faq .faq-group{
    display:block;
  }   /* SP：見出し→質問の縦積み */
  #faq .faq-group + .faq-group{
    margin-top:4rem;
  }
  #faq .faq-cat{
    position:static;
    margin:0 0 1.6rem;
    font-size:1.8rem;
  }
  #faq .faq-cat::before{
    height:2rem;
  }
}

/* FAQ：文字は常に白。ホバー・展開時は地を青に */
#faq .faq-q__label,
#faq .faq-q__text,
#faq .faq-item:hover .faq-q__label,
#faq .faq-item:hover .faq-q__text,
#faq .faq-item.is-open .faq-q__label,
#faq .faq-item.is-open .faq-q__text{
  color:var(--c-white);
}
#faq .faq-q__icon::before,
#faq .faq-q__icon::after,
#faq .faq-item:hover .faq-q__icon::before,
#faq .faq-item:hover .faq-q__icon::after,
#faq .faq-item.is-open .faq-q__icon::before,
#faq .faq-item.is-open .faq-q__icon::after{
  background:var(--c-white);
}
#faq.sec-white .faq-item:hover,
#faq.sec-white .faq-item.is-open{
  background:var(--c-cta);
}
#faq .faq-a__inner p{
  color:var(--c-white);
}


/* =========================================================
   見出し（中央寄せの h2）の上に置く英字のマイクロコピー
   地が赤・墨のセクションは黄、白のセクションは赤（--red）
   ========================================================= */
.sec-eyebrow{
  position:relative;
  z-index:1;
  margin-bottom:1.2rem;
  font-family:var(--f-num);
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:.24em;
  line-height:1;
  text-align:center;
  color:var(--c-yellow);
}
.sec-eyebrow--red{ color:var(--bg-top); }
#reasons .reason-band{ flex-direction:column; justify-content:center; }
@media (max-width:1100px){
  .sec-eyebrow{ margin-bottom:.8rem; font-size:1.2rem; }
}

/* =========================================================
   なぜ今、AIなのか：統計カード（1. 大きな数字 / 2. ドーナツ / 3. 横棒）
   数字は公的統計のみ。出典は各カードの .why-src に書く
   ========================================================= */
#why-now .why-inner{ align-items:stretch; }
#why-now .why-head{ align-self:center; }
#why-now .why-stat,
#why-now .why-panel{
  border-radius:.8rem;
  background:var(--c-gray-bg);
  color:var(--c-ink);
}
#why-now .why-no{
  margin-right:1.2rem;
  font-family:var(--f-num);
  font-weight:700;
  font-size:1.25em;
  color:var(--bg-top);
}
#why-now .why-src{
  margin-top:2.4rem;
  font-size:1.1rem;
  line-height:1.7;
  color:#8a8283;
}
/* 1. 大きな数字（背景にドット柄） */
#why-now .why-stat{
  position:relative;
  overflow:hidden;
  padding:5.6rem 7.2rem 4rem;
}
#why-now .why-stat::before{
  content:"";
  position:absolute;
  inset:0 45% 0 0;
  background:radial-gradient(circle, rgba(42,34,35,.09) .25rem, transparent .3rem) 0 0 / 1.4rem 1.4rem;
  -webkit-mask:radial-gradient(ellipse at 40% 50%, #000 30%, transparent 70%);
          mask:radial-gradient(ellipse at 40% 50%, #000 30%, transparent 70%);
}
#why-now .why-stat > *{ position:relative; }
#why-now .why-stat__title,
#why-now .why-panel__title{
  font-weight:900;
  font-size:2.4rem;
  line-height:1.5;
}
#why-now .why-stat__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  align-items:center;
  margin-top:3.2rem;
}
#why-now .why-stat__sub{
  padding-left:5.6rem;
  border-left:1px solid #ddd5d5;
}
#why-now .why-stat__label{
  font-weight:700;
  font-size:1.8rem;
}
#why-now .why-stat__value{
  display:flex;
  align-items:baseline;
  gap:.4rem;
  margin-top:.8rem;
  font-weight:900;
  font-size:2.4rem;
}
#why-now .why-stat__value b{
  font-family:var(--f-num);
  font-weight:700;
  font-size:11.2rem;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--bg-top);
}
#why-now .why-stat__value--s b{ font-size:8rem; }
#why-now .why-stat__tag{
  align-self:center;
  margin-left:1.2rem;
  padding:.4rem 1.4rem;
  border-radius:.6rem;
  background:var(--bg-top);
  color:#fff;
  font-size:1.8rem;
}
#why-now .why-stat__tag--gray{ background:#8a8283; }
#why-now .why-stat__lead{
  margin-top:3.2rem;
  font-weight:500;
  font-size:1.6rem;
  line-height:1.9;
}
/* 3枚の器（PCは縦積み。SPはカルーセル） */
#why-now .why-cards{
  display:flex;
  flex-direction:column;
  gap:4.8rem;
}
#why-now .why-dots{ display:none; }
#why-now .why-br-sp{ display:none; }
/* 2・3. 下の2枚 */
#why-now .why-pair{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:3.2rem;
}
#why-now .why-panel{
  display:flex;
  flex-direction:column;
  padding:4.8rem 4.8rem 4rem;
}
#why-now .why-panel__list{
  display:grid;
  gap:.8rem;
  margin-top:2rem;
  list-style:none;
}
#why-now .why-panel__list li{
  position:relative;
  padding-left:1.6rem;
  font-weight:500;
  font-size:1.5rem;
  line-height:1.8;
}
#why-now .why-panel__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.8em;
  width:.6rem;
  height:.6rem;
  border-radius:50%;
  background:#8a8283;
}
#why-now .why-panel__cap{
  align-self:center;
  margin-top:3.2rem;
  padding:.8rem 2rem;
  border-radius:.6rem;
  background:#fff;
  font-weight:700;
  font-size:1.4rem;
}
/* ドーナツ（conic-gradient で --p% を塗る） */
#why-now .why-donuts{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3.2rem;
  margin-top:2.8rem;
  flex:1;
}
#why-now .why-donut{ display:grid; justify-items:center; gap:1.2rem; }
/* 輪は ::before に描いて中央をマスクで抜く（数字はマスクの外＝span に置く） */
#why-now .why-donut__ring{
  --c:#b9adae;
  --bg:#e6dfdf;
  position:relative;
  display:grid;
  place-items:center;
  width:17rem;
  aspect-ratio:1;
}
#why-now .why-donut__ring::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p) * 1%), var(--bg) 0);
  -webkit-mask:radial-gradient(circle, transparent 55%, #000 56%);
          mask:radial-gradient(circle, transparent 55%, #000 56%);
}
#why-now .why-donut__ring span{
  position:relative;
  font-family:var(--f-num);
  font-weight:700;
  font-size:3.2rem;
  color:#8a8283;
}
#why-now .why-donut__ring small{ font-size:.55em; margin-left:.1em; }
#why-now .why-donut--hl .why-donut__ring{ --c:var(--bg-top); --bg:#f0d6d5; width:20rem; }
#why-now .why-donut--hl .why-donut__ring span{ font-size:4.4rem; color:var(--bg-top); }
#why-now .why-donut figcaption{ font-weight:700; font-size:1.4rem; }
#why-now .why-donuts__arrow{
  border-style:solid;
  border-width:1.2rem 0 1.2rem 1.6rem;
  border-color:transparent transparent transparent var(--bg-top);
  margin-bottom:3rem;
}
/* 横棒 */
#why-now .why-bars{
  display:grid;
  gap:1.4rem;
  margin-top:2.8rem;
  list-style:none;
  flex:1;
  align-content:center;
}
#why-now .why-bar{
  display:grid;
  grid-template-columns:6.4rem 1fr 7.2rem;
  align-items:center;
  gap:1.2rem;
  font-weight:700;
  font-size:1.4rem;
}
#why-now .why-bar__track{
  height:2rem;
  border-radius:99rem;
  background:#e6dfdf;
  overflow:hidden;
}
#why-now .why-bar__track i{
  display:block;
  width:calc(var(--v) * 1%);
  height:100%;
  border-radius:99rem;
  background:#b9adae;
}
#why-now .why-bar__val{
  font-family:var(--f-num);
  font-size:2rem;
  text-align:right;
}
#why-now .why-bar__val small{ font-size:.6em; margin-left:.1em; }
#why-now .why-bar--hl{ color:var(--bg-top); }
#why-now .why-bar--hl .why-bar__track i{ background:var(--bg-top); }
#why-now .why-bar--hl .why-bar__val{ font-size:2.6rem; }
/* 3. 給与の比較：太い2本 */
#why-now .why-bars--pay{ gap:2rem; }
#why-now .why-bars--pay .why-bar{ grid-template-columns:8rem 1fr 6.4rem; line-height:1.3; }
#why-now .why-bars--pay .why-bar__track{ height:4rem; border-radius:.8rem; }
#why-now .why-bars--pay .why-bar__track i{ border-radius:.8rem; }
#why-now .why-pay-note{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:1.2rem;
  margin-top:2rem;
  font-weight:700;
  font-size:1.4rem;
}
#why-now .why-pay-note b{
  font-family:var(--f-num);
  font-size:4.8rem;
  line-height:1;
  color:var(--bg-top);
}

@media (max-width:1100px){
  #why-now .why-br-pc{ display:none; }
  #why-now .why-br-sp{ display:inline; }
  #why-now .why-stat{ padding:3.2rem 2rem 2.4rem; border-radius:.8rem; }
  #why-now .why-stat::before{ inset:0; }
  #why-now .why-stat__title,
  #why-now .why-panel__title{ font-size:1.8rem; }
  #why-now .why-stat__grid{ grid-template-columns:1fr; gap:2rem; margin-top:2rem; }
  #why-now .why-stat__sub{ padding:2rem 0 0; border-left:0; border-top:1px solid #ddd5d5; }
  #why-now .why-stat__label{ font-size:1.4rem; }
  #why-now .why-stat__value{ font-size:1.8rem; }
  #why-now .why-stat__value b{ font-size:7.2rem; }
  #why-now .why-stat__value--s b{ font-size:5.2rem; }
  #why-now .why-stat__tag{ font-size:1.3rem; padding:.3rem 1rem; }
  #why-now .why-stat__lead{ margin-top:2rem; font-size:1.3rem; }
  #why-now .why-pair{ grid-template-columns:1fr; gap:2rem; }
  #why-now .why-panel{ padding:3.2rem 2rem 2.4rem; border-radius:.8rem; }
  #why-now .why-panel__list li{ font-size:1.3rem; }
  #why-now .why-panel__cap{ font-size:1.2rem; padding:.6rem 1.4rem; }
  #why-now .why-donuts{ gap:1.6rem; }
  #why-now .why-donut__ring{ width:11rem; }
  #why-now .why-donut--hl .why-donut__ring{ width:13rem; }
  #why-now .why-donut__ring span{ font-size:2.2rem; }
  #why-now .why-donut--hl .why-donut__ring span{ font-size:2.8rem; }
  #why-now .why-bar{ grid-template-columns:4.8rem 1fr 5.6rem; font-size:1.2rem; }
  #why-now .why-bar__val{ font-size:1.6rem; }
  #why-now .why-bar--hl .why-bar__val{ font-size:2rem; }
  #why-now .why-src{ margin-top:1.6rem; font-size:1rem; }
  #why-now .why-bars--pay .why-bar{ grid-template-columns:5.6rem 1fr 4.8rem; }
  #why-now .why-bars--pay .why-bar__track{ height:2.8rem; }
  #why-now .why-pay-note{ font-size:1.2rem; }
  #why-now .why-pay-note b{ font-size:3.2rem; }
  /* SP：3枚を横スワイプのカルーセルに（画面端まで広げ、次のカードを少しのぞかせる） */
  #why-now .why-cards{
    flex-direction:row;
    align-items:stretch;
    gap:1.2rem;
    margin-inline:-2rem;
    padding:0 2rem .4rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:2rem;
    scrollbar-width:none;
  }
  #why-now .why-cards::-webkit-scrollbar{ display:none; }
  #why-now .why-pair{ display:contents; }
  #why-now .why-stat,
  #why-now .why-panel{
    flex:0 0 86%;
    min-width:0;
    scroll-snap-align:start;
  }
  #why-now .why-dots{
    display:flex;
    justify-content:center;
    gap:.8rem;
    margin-top:1.6rem;
  }
  #why-now .why-dot{
    width:.8rem;
    height:.8rem;
    border-radius:99rem;
    background:#ddd5d5;
    transition:width .3s ease, background-color .3s ease;
  }
  #why-now .why-dot.is-on{
    width:2.4rem;
    background:var(--bg-top);
  }
}

/* =========================================================
   CTA：枠線のカード（上辺の線にラベルを乗せる）＋ 下部の赤い帯（料金プランへ）
   ========================================================= */
#cta .cta-box{
  position:relative;
  max-width:112rem;
  margin-inline:auto;
  border:.3rem solid var(--bg-top);
  border-radius:.8rem;
  background:#fff;
  color:var(--c-ink);
  text-align:center;
}
#cta .cta-box__label{
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%, -50%);
  padding:.6rem 2.8rem;
  background:var(--bg-top);   /* 赤のピル型に白文字で、枠線の上にのせる */
  border-radius:10rem;
  color:#fff;
  font-weight:700;
  font-size:1.8rem;
  line-height:1.4;
  white-space:nowrap;
}
#cta .cta-box__main{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:6.4rem 4rem 4.8rem;
}
#cta .cta-head{
  font-weight:900;
  font-size:3.6rem;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--bg-bottom);
}
#cta .cta-note{
  margin-top:2rem;
  font-weight:700;
  font-size:1.5rem;
  line-height:1.9;
}
#cta .btn-cv--cta{ margin-top:5.6rem; }
#cta .cta-link,
#cta .cta-box__sub-btn{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
}
#cta .cta-link::after,
#cta .cta-box__sub-btn::after{
  content:"";
  width:.7rem;
  height:.7rem;
  border-top:.2rem solid currentColor;
  border-right:.2rem solid currentColor;
  transform:rotate(45deg);
}
#cta .cta-link{
  margin-top:3.2rem;
  font-weight:700;
  font-size:1.5rem;
  color:var(--bg-top);
}
#cta .cta-link:hover{ text-decoration:underline; }
/* 下部の帯（人物は帯から上にはみ出す） */
#cta .cta-box__sub{
  position:relative;
  display:flex;
  justify-content:center;
  padding:3.2rem 2rem 3.6rem;
  border-radius:0 0 .5rem .5rem;   /* 外枠の角丸（.8rem）から枠線の太さ（.3rem）を引いた値にそろえる */
  background:var(--bg-top);
  color:#fff;
}
#cta .cta-box__sub-lead{ font-weight:700; font-size:1.4rem; }
#cta .cta-box__sub-title{ margin-top:.4rem; font-weight:900; font-size:2.2rem; }
#cta .cta-box__sub-btn{
  margin-top:1.6rem;
  padding:1.2rem 3.2rem;
  border-radius:.8rem;
  background:#fff;
  color:var(--bg-top);
  font-weight:700;
  font-size:1.5rem;
  transition:opacity .2s;
}
#cta .cta-box__sub-btn:hover{ opacity:.85; }
#cta .cta-hito{
  position:absolute;
  bottom:0;
  height:auto;
  pointer-events:none;
  user-select:none;
}
#cta .cta-hito--woman{ left:11%; width:15.4rem; }
#cta .cta-hito--man{ right:11%; width:17.6rem; }   /* 元画像が左向きなので反転しない（女性と向き合う） */
#cta .cta-br-sp{ display:none; }

@media (max-width:1100px){
  #cta{ padding-block:6.4rem; }
  #cta .cta-box{ border-width:.2rem; border-radius:.8rem; }
  #cta .cta-box__label{ font-size:1.4rem; padding:.5rem 1.8rem; }
  #cta .cta-br-sp{ display:inline; }
  #cta .cta-box__main{ padding:4rem 1.2rem 3.2rem; }
  #cta .btn-cv--cta{ font-size:1.35rem; }
  #cta .cta-head{ font-size:2.2rem; }
  #cta .cta-note{ margin-top:1.4rem; font-size:1.2rem; }
  #cta .btn-cv--cta{ margin-top:4rem; }
  #cta .cta-link{ margin-top:2.4rem; font-size:1.3rem; }
  #cta .cta-box__sub{ padding:2.4rem 1.6rem 2.8rem 11.6rem; justify-content:flex-start; text-align:left; border-radius:0 0 .6rem .6rem; }   /* SP：外枠 .8rem − 枠線 .2rem */
  #cta .cta-box__sub-lead{ font-size:1.1rem; }
  #cta .cta-box__sub-title{ font-size:1.5rem; }
  #cta .cta-box__sub-btn{ padding:1rem 1.8rem; font-size:1.3rem; }
  #cta .cta-hito--woman{ left:1.2rem; width:9.6rem; }
  #cta .cta-hito--man{ display:none; }
}

/* =========================================================
   受講生の実績（FV 直下）：カードを横に並べ、矢印・ドット・スワイプで送るカルーセル。中身は Results.astro
   ========================================================= */
#results{
  /* 人物の頭だけ帯からはみ出させる：セクションを FV に --overlap だけ食い込ませ、帯の地は --band から塗る。
     タグ・職種・名前が濃い帯の中に収まるよう、帯は食い込み量より上から始める */
  --overlap:9rem;
  --band:4.4rem;
  position:relative;
  z-index:2;
  margin-top:calc(var(--overlap) * -1);
  background:linear-gradient(180deg, transparent 0 var(--band), #8f2a29 var(--band), #7a2221 100%);
  color:#fff;
  padding-block:0 3.2rem;
  overflow:hidden;
  /* .home（1440）の外まで、画面の端から端に広げる */
  width:100vw;
  margin-left:calc(50% - 50vw);
}
#results .results-slider{
  position:relative;
  padding-inline:8rem;
}
#results .results-list{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2rem * 3) / 4);
  column-gap:2rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  list-style:none;
  margin:0;
  padding:0;
}
#results .results-list::-webkit-scrollbar{ display:none; }
/* 広い画面では5枚並べる（カードが大きくなりすぎないように） */
@media (min-width:1800px){
  #results .results-list{ grid-auto-columns:calc((100% - 2rem * 4) / 5); }
}
#results .results-card{
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  min-width:0;
}
/* カードの上：人物（下端をカードに重ねる）と、前職・名前 */
#results .results-card__head{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.8rem;
  padding-inline:.8rem;
}
#results .results-card__photo{
  flex:none;
  width:14rem;
  height:15rem;
  margin-bottom:-1.2rem;
}
#results .results-card__photo svg,
#results .results-card__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:bottom;
}
#results .results-card__photo svg{ fill:rgba(255,255,255,.42); }
#results .results-card__who{
  align-self:flex-end;
  min-width:0;
  padding-bottom:1.6rem;   /* タグ・職種・名前をまとめて濃い帯の中に収める */
  color:#fff;
  font-weight:700;
}
#results .results-card__job{
  font-size:1.4rem;
  line-height:1.4;
  white-space:nowrap;   /* タグと職種を1行に保ち、濃い帯からはみ出させない */
}
/* 人物の上の分類タグ（副業／転職 など） */
#results .results-card__tag{
  display:block;
  width:fit-content;
  margin-bottom:.3rem;
  padding:.1rem .7rem;
  border-radius:99rem;
  background:var(--c-yellow);
  color:#7a2221;
  font-size:1.05rem;
  font-weight:900;
  line-height:1.5;
  vertical-align:.1rem;
}
#results .results-card__name{
  margin-top:.4rem;
  white-space:nowrap;
  font-size:2rem;
  font-weight:900;
  line-height:1.3;
}
#results .results-card__name small{
  margin-left:.2em;
  font-size:.65em;
}
/* カード本体：赤い見出し帯に項目名、下に BEFORE → AFTER のパネル。枠は金のグラデーション */
#results .results-card__body{
  position:relative;
  z-index:2;   /* 人物の下端をカードの裏に隠す */
  flex:1;
  overflow:hidden;
  border:.3rem solid transparent;
  border-radius:.8rem;
  background:
    linear-gradient(180deg, #fff 0%, #fff8f2 100%) padding-box,
    linear-gradient(135deg, #f7e27a 0%, #c8a24a 50%, #f7e27a 100%) border-box;
  box-shadow:0 .8rem 2rem rgba(40,6,6,.35);
  color:var(--c-ink);
}
#results .results-card__title{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  gap:.2rem .8rem;
  padding:1.1rem 1.2rem 1rem;
  background:#c14140;
  color:#fff;
  font-weight:900;
  font-size:1.9rem;
  line-height:1.3;
  letter-spacing:.04em;
}
#results .results-card__title small{
  flex-basis:100%;   /* タイトルの下に1行で */
  text-align:center;
  color:var(--c-yellow);
  font-size:1.3rem;
  font-weight:700;
}
#results .results-card__change{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) 2.4rem minmax(0,1.35fr);   /* 矢印は箱の間の列に置き、文字にかぶらせない */
  align-items:stretch;
  gap:.5rem;
  padding:1.4rem 1rem 1.4rem;
}
#results .results-card__before,
#results .results-card__after{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  min-width:0;
  min-height:8rem;
  padding:.9rem .4rem;
  border-radius:.8rem;
  font-weight:900;
  line-height:1.25;
  text-align:center;
  white-space:pre-line;   /* 折り返し位置はデータの改行（\n）で決める */
}
#results .results-card__before{
  background:#f1eeee;
  color:#555;
  font-size:1.35rem;
}
#results .results-card__after{
  background:linear-gradient(160deg, #fff4dc 0%, #fde3d6 100%);
  box-shadow:inset 0 0 0 .15rem rgba(193,65,64,.28);
  color:var(--c-red);
  font-size:2rem;
  letter-spacing:-.01em;
  white-space:pre;   /* 自動では折り返さず、データの改行（\n）だけで改行する */
}
#results .results-card__label{
  padding:.2rem .8rem;
  border-radius:99rem;
  background:#8b8585;
  color:#fff;
  font-family:var(--f-figtree);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.08em;
}
#results .results-card__after .results-card__label{ background:var(--c-red); }
/* BEFORE と AFTER の間の丸い矢印 */
#results .results-card__arrow{
  position:relative;
  align-self:center;
  width:2.4rem;
  height:2.4rem;
  border-radius:50%;
  background:linear-gradient(135deg, #f7e27a, #c8a24a);
  box-shadow:0 .2rem .6rem rgba(90,50,10,.35);
}
#results .results-card__arrow::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:.8rem;
  height:.8rem;
  margin:-.4rem 0 0 -.55rem;
  border-top:.25rem solid #fff;
  border-right:.25rem solid #fff;
  transform:rotate(45deg);
}
#results .results-nav{
  position:absolute;
  top:50%;
  width:5.6rem;
  height:5.6rem;
  background:rgba(255,255,255,.18);
  transform:translateY(-50%);
  transition:background-color .2s ease;
}
#results .results-nav:hover{ background:rgba(255,255,255,.32); }
#results .results-nav span{
  display:block;
  width:1.4rem;
  height:1.4rem;
  margin:auto;
  border-top:.35rem solid #fff;
  border-left:.35rem solid #fff;
}
#results .results-nav--prev{ left:1.2rem; }
#results .results-nav--prev span{ transform:translateX(.3rem) rotate(-45deg); }
#results .results-nav--next{ right:1.2rem; }
#results .results-nav--next span{ transform:translateX(-.3rem) rotate(135deg); }
#results .results-dots{
  display:flex;
  justify-content:center;
  gap:.8rem;
  margin-top:2.8rem;
}
#results .results-dots span{
  width:.8rem;
  height:.8rem;
  border-radius:50%;
  background:rgba(255,255,255,.35);
}
#results .results-dots .is-active{ background:#fff; }
#results .results-foot{
  margin-top:1.6rem;
  text-align:center;
  font-size:1.1rem;
  color:rgba(255,255,255,.7);
}
/* 実績の帯のぶん、次の「なぜ今AIなのか」の上余白を詰める */
#results + #why-now{ padding-top:10rem; }

@media (max-width:1100px){
  /* SP は FV の下端に予約ボタンがあるので食い込ませず、帯の上に余白を空けてカードを出す */
  #results{
    --overlap:0rem;
    padding-block:0 2.4rem;
    background:linear-gradient(180deg, transparent 0 4rem, #8f2a29 4rem, #7a2221 100%);   /* 帯を下げて人物の頭をはみ出させる */
    padding-top:.8rem;
  }
  #results .results-slider{ padding-inline:0; }
  /* SP：1枚＋次のカードを少し見せて、スワイプできると分かるようにする */
  #results .results-list{ grid-auto-columns:min(75vw, 28rem); column-gap:1.2rem; }
  #results .results-card{ scroll-snap-align:center; }   /* カードを中央に置き、左右に前後のカードを見切らせる */
  #results .results-nav{ z-index:3; width:3.6rem; height:3.6rem; background:rgba(0,0,0,.42); }
  #results .results-nav--prev{ left:.4rem; }
  #results .results-nav--next{ right:.4rem; }
  #results .results-card__photo{ width:8.8rem; height:9.6rem; }
  #results .results-card__who{ align-self:flex-end; padding-bottom:.8rem; }   /* 濃い帯の中に収める */
  #results .results-card__job{ font-size:1.2rem; }
  #results .results-card__tag{ display:inline-block; margin:0 .4rem 0 0; font-size:1rem; padding-inline:.6rem; }   /* SP は職種と同じ行に並べて高さを抑える */
  #results .results-card__name{ font-size:1.7rem; }
  #results .results-card__title{ font-size:1.7rem; }
  #results .results-card__after{ font-size:1.8rem; }
  #results .results-card__before{ font-size:1.4rem; }
  #results .results-dots{ margin-top:1.6rem; gap:.6rem; }
  #results .results-dots span{ width:.6rem; height:.6rem; }
  #results .results-foot{ font-size:.9rem; padding-inline:1.6rem; }
  #results + #why-now{ padding-top:4.8rem; }
}

/* ===== メンター・コーチのカード（リッチ版）=====
   上に色帯（AIメンター＝赤／キャリアコーチ＝金）と英字の透かし・番号。写真は帯にかけて重ね、
   経歴と得意分野は小さな英字ラベルで区切る。影はつけない */
#coaches .coach-card{
  --tone:var(--bg-top);
  --tone-dark:var(--bg-bottom);
  --tone-pale:#f3dcd9;
  position:relative;
  overflow:hidden;
  padding:0 0 3.2rem;
  border-radius:.4rem;
  border-bottom:.4rem solid var(--tone);
  background:#fff;   /* クリームはやめて白 */
  text-align:left;
  align-items:stretch;
}
#coaches .coach-card--coach{ --tone:#c9a45c; --tone-dark:#a8823e; --tone-pale:#f1e4c8; }
#coaches .coach-card::before{   /* 色帯（斜めのストライプを薄く重ねる） */
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:10.4rem;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 .2rem, transparent .2rem 1.2rem),
    linear-gradient(135deg, var(--band-a, #3a2c2d), var(--band-b, #241c1d));
}
#coaches .coach-card--coach::before{ --band-a:#c9a45c; --band-b:#a8823e; }   /* 帯：AIメンター＝墨（赤い地から浮かせる）／キャリアコーチ＝金 */
#coaches .coach-card__en{
  position:absolute;
  left:1.6rem;
  top:1.4rem;
  font-family:var(--f-en);
  font-size:1.8rem;
  line-height:1.1;
  letter-spacing:.02em;
  color:rgba(255,255,255,.22);
  white-space:nowrap;
}
#coaches .coach-card__no{ position:absolute; right:1.6rem; top:1.4rem; font-size:1.3rem; font-weight:700; letter-spacing:.1em; color:var(--c-cream); }
#coaches .coach-card__photo{
  position:relative;
  width:13.6rem;
  margin:4rem auto 0;
  border:.5rem solid #fff;
  outline:.2rem solid var(--tone);
  outline-offset:.3rem;
  background:#e9dccb;
}
#coaches .coach-card__role{
  align-self:center;
  margin:2rem 0 0;
  padding:.3rem 1.2rem;
  border:1px solid var(--tone);
  border-radius:0;
  background:transparent;
  color:var(--tone-dark);
  font-size:1.2rem;
  letter-spacing:.08em;
}
#coaches .coach-card__name{ position:relative; align-self:center; margin:.8rem 0 0; padding-bottom:1.2rem; font-size:2.4rem; letter-spacing:.06em; }
#coaches .coach-card__name::after{ content:""; position:absolute; left:50%; bottom:0; width:3.2rem; height:.3rem; margin-left:-1.6rem; background:var(--tone); }
#coaches .coach-card__sec{ margin:2rem 2.8rem 0; }
#coaches .coach-card__sec + .coach-card__sec{ padding-top:1.6rem; border-top:1px dashed #ddd5d5; }
#coaches .coach-card__label{ display:flex; align-items:center; gap:.8rem; font-size:1.1rem; font-weight:700; letter-spacing:.16em; color:var(--tone-dark); }
#coaches .coach-card__label::after{ content:""; flex:1; height:1px; background:var(--tone-pale); }
#coaches .coach-card__career{ margin-top:.8rem; font-size:1.4rem; line-height:2.4rem; }
#coaches .coach-card__tags{ justify-content:flex-start; gap:.6rem; margin-top:1rem; }
#coaches .coach-card__tags li{ padding:.4rem 1rem; border:0; border-radius:0; background:var(--tone-pale); color:var(--tone-dark); font-size:1.2rem; }
#coaches .coach-card__tags li::before{ content:"#"; margin-right:.2rem; opacity:.6; }
@media (max-width:1100px){
  #coaches .coach-card{ padding:0 0 2.4rem; }
  #coaches .coach-card::before{ height:9rem; }
  #coaches .coach-card__photo{ width:11.6rem; margin-top:3.4rem; }
  #coaches .coach-card__sec{ margin-inline:2rem; }
  #coaches .coach-card__career{ font-size:1.4rem; line-height:2.4rem; }
}
#coaches .coach-note{ margin-top:1.6rem; font-size:1.2rem; color:rgba(255,255,255,.75); text-align:center; }
/* 背景で流れる英字（Pricing Plan など）はやめたので、見出しの帯の高さを詰める（仕事の例の帯と同じくらい） */
@media (min-width:1101px){
  #pricing .band, #faq .band, #reasons .reason-band{ min-height:12rem; }
}
/* よくある質問：見出しの上をもう少しあける */
/* margin だと外側の赤い地が見えるので、白い地の内側（padding）であける */
#faq .band{ padding-top:4.8rem; }
@media (min-width:1101px){ #faq .band{ min-height:16.8rem; } }   /* padding のぶん高さを足して、見出しの下の間隔は保つ */
@media (max-width:1100px){ #faq .band{ padding-top:2.4rem; } }