@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:10rem;   /* 旧SVGのグリフ高に合わせて実測調整（medh一致） */
  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;
}
/* 人物：画像のbottomをビューポート下端(0)に。表示実寸 816×1066（natural 1404×1834） */
/* 3コマ（fv_main01/02/03）を重ねてコマ送り（JSで .is-active を回す・瞬時切替） */
.fv-person{
  left:56.1rem;
  top:auto;
  bottom:0;
  width:81.6rem;
  aspect-ratio:816 / 1066;
  z-index:3;
}
.fv-person__frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;   /* transitionなし＝パッと切替のコマ送り */
}
.fv-person__frame.is-active{
  opacity:1;
}
/* ロゴ */
.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%;
}

/* TOEIC 行 */
.fv-toeic{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:0.4rem;
  color:var(--c-cream);
  font-weight:700;
  font-size:2.2rem;
  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;
}

/* 楕円ラベル3（Badge フリップで Figma 絶対座標が破綻→実測配置）
   人物と一緒に動くよう bottom 基準（900px設計高で bottom = 90 − top − 高さ に換算。人物 bottom:0 と連動） */
.fv-bubble{
  z-index:6;
}
.fv-bubble--1{
  left:90.6rem;
  bottom:18.6rem;
  width:16.1rem;
}
.fv-bubble--2{
  left:102rem;
  bottom:11.9rem;
  width:16.1rem;
}
.fv-bubble--3{
  left:116rem;
  bottom:14.3rem;
  width:22.8rem;
}
/* バブル下のつなぎライン（バブル背面 z5）。bottom 基準 */
.fv-bubble-line{
  left:84.3rem;
  bottom:8.4rem;
  width:43.8rem;
  z-index:5;
}
/* 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）＝少し速く＝跳ね上げ中に下のオレンジが目立たない */
@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:-0.1rem;
  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;
  transition:opacity .45s ease, visibility .45s;
}
.case-slide.is-active{
  opacity:1;
  visibility:visible;
}
.case-slide > .case-hito,
.case-slide > .case-fukidashi,
.case-slide > .case-note{
  position:absolute;
}
/* ページネーション（画面下中央） */
.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);
}
/* SP専用 prev/next（PCは非表示。SPは @media 内で display:flex） */
.case-nav{
  display:none;
}

/* 背景帯：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));
  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-orange4);
  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:2.4rem;
  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:1.6rem;
}
.sec-jobs .band{
  min-height:32rem;
}
/* 求人リンク（紫ブロブ＋丸ボタン）。サイズ=デザイン266×234。
   hover で色反転（楕円 紫→黒 / ボタン cream→紫 / 矢印 紫→cream）＋ボタン位置から円状に展開 */
.jobs-link{
  position:absolute;
  z-index:2;
  top:24.5rem;   /* DOMをカード後ろへ移動＝#jobs基準になったため padding-top(6rem) 分を加算（旧: band基準 18.5rem） */
  right:1.5rem;
  transform:translateY(-50%);
  width:28.3rem;
  aspect-ratio:283/249;
}
/* ブロブ：要素全面（rest=紫 / hover=黒） */
.jobs-link__blob{
  position:absolute;
  inset:0;
  background:url("../img/top/job_blob.svg") center/contain no-repeat;
}
.jobs-link__blob--hover{
  background-image:url("../img/top/job_blob_hover.svg");
}
/* 丸ボタン：デザイン実測の下中央（rest=cream丸+紫矢印 / hover=紫丸+cream矢印） */
.jobs-link__btn{
  position:absolute;
  left:50%;
  top:84%;
  transform:translate(-50%,-50%);
  width:6.4rem;
  height:6.4rem;
  background:url("../img/top/job_arrow.svg") center/contain no-repeat;
}
.jobs-link__btn--hover{
  background-image:url("../img/top/job_arrow_hover.svg");
}
/* hover オーバーレイ：クロスフェード（rest→hover を opacity で重ねる） */
.jobs-link__hover{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .35s ease;
}
.jobs-link:hover .jobs-link__hover{
  opacity:1;
}
/* テキスト（cream・両状態共通で最前面） */
.jobs-link__text{
  position:absolute;
  left:0;
  right:0;
  top:48%;
  transform:translateY(-50%);
  padding-left: 5%;
  z-index:1;
  text-align:center;
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-cream);
  font-size:2rem;
  line-height:1.5;
}
@media (prefers-reduced-motion: reduce){
  .jobs-link__hover{
    transition:none;
  }
}
/* 3カラム＝grid（1fr×3・gap32）。デザインのカードは固定幅410.67・高さ226 */
.jobs-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:3.2rem;
  margin-top:3.2rem;
}
/* カード内は縦積み gap8（type→title→tags→salary）。padding 40/32/32。自然高=226 */
.job-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  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:4rem 3.2rem 3.2rem;
}
.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);
}
/* タグは折り返さない（デザインは4タグでも1行）。gap4 */
.job-card__tags{
  display:flex;
  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 13.6rem;
  overflow:hidden;
}
#problem .problem-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7.2rem;
}
#problem .problem-stage{
  display:flex;
  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に） */
#problem .problem-heading{
  writing-mode:vertical-rl;
  text-orientation:upright;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2.4rem;
  margin:0;
  padding-bottom:15.8rem;
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-cream);
  font-size:4.8rem;
  line-height:1;
  letter-spacing:1.4rem;
  white-space:nowrap;
  flex:none;
}
#problem .problem-heading__line{
  display:block;
  margin:0;
}
#problem .problem-person{
  margin:0;
  flex:none;
  align-self:flex-end;
}
#problem .problem-person img{
  display:block;
  height:auto;
}
/* 人物＝マスクグループ書き出し（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;
  /* FV（赤）と続けて見えないよう、地をクリームに切り替える */
  background:linear-gradient(180deg, #f9eeda 0%, #fbf4e8 100%);
  color:var(--c-black);
  padding-bottom:8rem;   /* 角丸のカードが次のセクションに接して切れて見えないよう、下に余白 */
}
#about .about-people{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:0;
  z-index:1;
  pointer-events:none;
}
/* 2人は内側を向く（設計準拠）。元画像は両方とも左向き。
   左=女性(m)＝右向き(flip) / 右=男性(w)＝左向き(flipなし) */
#about .about-person{
  position:absolute;
  height:auto;
}
#about .about-person--m{
  width:10.9rem;
  left:89.5rem;
  top:-4rem;
}
#about .about-person--w{
  width:10.9rem;
  left:99.5rem;
  top:-5rem;
}
#about .about-band{
  min-height:20.4rem;
}
/* マーキー＝設計の coral オレンジ #FF8656（地より明るい・他bandとは別指定） */
#about .about-big{
  color:rgba(193,65,64,.14);   /* クリーム地に薄い赤の透かし（FAQ の英字帯と同じ表現） */
  font-size:12.3rem;
  letter-spacing:-0.1rem;
  padding-right:0;
}
#about .about-x{
  flex:none;
  width:9.1rem;
  height:auto;
  margin-inline:1.6rem;
  align-self:center;
  opacity:.45;
}
#about .about-body{
  margin-top:-6.4rem;
  position:relative;
  z-index:1;
}
#about .about-pill{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6.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);
}
/* --- 図：これまでの経験 × 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:1.6rem;
  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;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:1.2rem;
  width:100%;
  padding:2.2rem 2.8rem;
  border-radius:1.6rem;
  background:linear-gradient(135deg, #d93a10 0%, #ed5700 60%, #ff8656 120%);
  color:#fff;
}
#about .about-eq__result img{ width:3rem; height:auto; flex:none; position:relative; }
#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 0 2.4rem;
  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:var(--c-cream);
  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:16rem 11.2rem;
}
#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:-0.1rem;
  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;
}
#why-now .why-cards{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:4rem;
  width:100%;
}
#why-now .why-card{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4.8rem;
}
#why-now .why-card__photo{
  width:38.9rem;
}
#why-now .why-card__photo img{
  width:100%;
  height:auto;
  display:block;
}
#why-now .why-card__body{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:2.4rem;
  padding-inline:1.6rem;
  color:var(--c-cream);
}
#why-now .why-card__title{
  margin:0;
  font-family:var(--f-jp);
  font-weight:900;
  font-size:4rem;
  line-height:1.38;
  letter-spacing:-0.1rem;
}
#why-now .why-card__text{
  margin:0;
  font-family:var(--f-jp);
  font-weight:500;
  font-size:1.6rem;
  line-height:2.8rem;
}
#why-now .why-card__ref{
  font-weight:700;
  font-size:.645em;
  vertical-align:top;
}
#why-now .why-card__note{
  margin:0;
  font-family:var(--f-jp);
  font-weight:400;
  font-size:1.2rem;
  line-height:2rem;
}

/* =========================================================
   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 で継ぎ目なし）。band の上に80px余白 */
#reasons .reason-body{
  position:relative;
  z-index:0;
  background:var(--c-orange);
  padding-top:8rem;
  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;
}
#reasons .reason-heading .num,
#reasons .reason-heading__num{
  font-size:1.7em;
  line-height:1;
  font-weight:600;
  margin:0 .04em;
  vertical-align:-0.12em;
}
#reasons .reason-cards{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:6.4rem;
  margin-top:4rem;
}
#reasons .reason-card{
  flex:1 1 0;
  min-width:0;
  max-width:40rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3.2rem;
}
#reasons .reason-card--2{
  margin-top:11rem;
}
#reasons .reason-card__photo{
  width:100%;
  max-width:36.3rem;
  height:auto;
}
#reasons .reason-card__body{
  width:100%;
  padding-top:1.2rem;
}
#reasons .reason-card__title{
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-cream);
  font-size:4rem;
  line-height:1.38;
  letter-spacing:-0.1rem;
  margin-bottom:1.6rem;
}
#reasons .reason-card__title-en{
  font-family:var(--f-jp);
  font-weight:900;
}
#reasons .reason-card__title-num{
  font-size:1.25em;
  line-height:1;
  letter-spacing:-0.1rem;
  vertical-align:-0.04em;
}
#reasons .reason-card__text{
  font-family:var(--f-jp);
  font-weight:500;
  color:var(--c-cream);
  font-size:1.6rem;
  line-height:2.8rem;
}

/* =========================================================
   8. Flow
   ========================================================= */
#flow{
  color:var(--c-cream);
  padding-block:17.6rem;
  overflow:hidden;
}
#flow .flow-inner{
  display:flex;
  align-items:flex-start;
  gap:16rem;
}
#flow .flow-title{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:1.6rem;
  margin:0;
  font-family:var(--f-jp);
  font-weight:900;
  color:var(--c-cream);
  font-size:3.2rem;
  letter-spacing:-0.1rem;
  line-height:1.39;
  white-space:nowrap;
}
#flow .flow-title__mouth{
  width:2.6rem;
  height:2.1rem;
  flex:0 0 auto;
  object-fit:cover;
}
#flow .flow-steps{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2rem;
}
#flow .flow-step{
  position:relative;
  display:flex;
  align-items:center;
  gap:4rem;
  background:var(--c-cream);
  border-radius:0.8rem;
  padding:2.4rem 2.4rem 2.4rem 14.4rem;
}
#flow .flow-step__badge{
  position:absolute;
  left:1.296rem;
  top:-0.864rem;
  width:11.8rem;
  aspect-ratio:118/106;
  display:grid;
  place-items:center;
  background:url("../img/top/flow_step_badge.svg") center/contain no-repeat;
  transform:rotate(-6deg);
}
#flow .flow-step__no{
  font-family:var(--f-en);
  color:var(--c-cream);
  font-size:1.4rem;
  line-height:1.18;
  text-align:center;
  white-space:nowrap;
  transform:rotate(6deg);
}
#flow .flow-step__body{
  flex:1 1 0;
  min-width:0;
}
#flow .flow-step__head{
  margin:0;
  font-family:var(--f-jp);
  font-weight:700;
  color:var(--c-orange);
  font-size:1.8rem;
  line-height:3.2rem;
}
#flow .flow-step__text{
  margin:0;
  font-family:var(--f-jp);
  font-weight:500;
  color:var(--c-black);
  font-size:1.6rem;
  line-height:2.8rem;
}

/* =========================================================
   9. CTA
   ========================================================= */
#cta{
  padding-block:3.2rem;
}
#cta .cta-inner{
  position:relative;
}
#cta .cta-pill{
  position:relative;
  width:min(96.67%, 139.2rem);
  margin-inline:auto;
  min-height:52.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0.8rem solid var(--c-cream);
  border-radius:24.8rem;
  /* 背景＝画像(cta_bg_pc)を上に、その下にグラデーション（画像の透過部からグラデが見える） */
  background-image:url("../img/top/cta_bg_pc.png"), linear-gradient(174.5deg, var(--c-orange) 14.6%, var(--c-orange3) 56.4%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 4rem 4rem 0 rgba(0,0,0,.1);
  overflow:hidden;
}
/* CTA pill 登場：フェードインしない＝初めから「貼り付けたくらい」の小さめサイズで見えていて、
   pill の中心が画面中心に到達したら弾むように定寸へ拡大（opacityは常に1）。
   トリガーは top.js（中心到達で #cta に .is-cta-in 付与）。.js ゲート＝no-JSは即表示。 */
.js #cta .cta-pill{
  transform:scale(.65);
  transform-origin:center;
  will-change:transform;
}
.js #cta.is-cta-in .cta-pill{
  animation: cta-pop .6s ease-out both;
}
@keyframes cta-pop{
  0%{
    transform:scale(.85);
  }   /* 貼り付けたくらい（初期・見えている） */
  55%{
    transform:scale(1.04);
  }   /* 一度少しだけ大きく＝弾み */
  100%{
    transform:scale(1);
  }   /* 今のサイズへ */
}
@media (prefers-reduced-motion: reduce){
  .js #cta .cta-pill{
    transform:none;
    animation:none;
  }
}
#cta .cta-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3.2rem;
  width:min(63.4%, 91.3rem);
  text-align:center;
}
#cta .cta-head{
  margin:0;
  font-family:var(--f-jp);
  font-weight:900;
  font-size:4.8rem;
  line-height:1.48;
  letter-spacing:-0.1rem;
  color:var(--c-cream);
}
#cta .cta-head__brsp{
  display:none;
}   /* SP専用改行（PCは2行のまま） */
#cta .cta-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3.2rem;
}
#cta .cta-btn{
  height:7.2rem;
  padding-inline:5.6rem;
  border-radius:0.8rem;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:2.4rem;
  white-space:nowrap;
}
#cta .cta-note{
  margin:0;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:1.6rem;
  line-height:2.8rem;
  color:var(--c-cream);
}
#cta .cta-hito{
  position:absolute;
  bottom:0;
  display:block;
  height:auto;
  pointer-events:none;
  user-select:none;
}
#cta .cta-hito--woman{
  left:15.6rem;
  width:17.1rem;
}
#cta .cta-hito--cook{
  right:16rem;
  width:18.9rem;
}

/* =========================================================
   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 18.8rem;
}
#faq .faq-list{
  display:flex;
  flex-direction:column;
  gap:2rem;
}
#faq .faq-item{
  position:relative;
  background:var(--c-orange);
  border-radius:10rem;
  overflow:hidden;
  transition:background-color .25s ease, box-shadow .25s ease, border-radius .3s ease;   /* border-radius も補間＝開閉でピル↔カードが滑らかに（SPの6rem↔2rem。PCは10rem固定で無変化） */
}
/* 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 6.4rem;
  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:6.4rem;
  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;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, padding .35s ease, visibility .35s;
}
#faq .is-open .faq-a__inner{
  padding:0 10.4rem 2.6rem 7.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);
    scroll-snap-type: y proximity;
  }   /* .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 / 66));   /* K=66（要実測微調整） */
  }
  .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:4em;
    width:140vw;
    height:10em;
  }
  .fv-lead__txt{
    font-size:2.7em;
  }
  .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:space-between;
    align-items:center;
    gap:0;
    z-index:5;
  }
  /* 最上グループ：logo/sub の高さ分のスペーサ（logo/subは絶対配置でこの上に乗る） */
  .fv-topspace{
    display:block;
    flex:none;
    height:4.8em;
  }
  /* 中央グループ：見出し＋図版のユニット（内部は密着＝デザイン間隔） */
  .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;
  }
  .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-bubble,
  .fv-bubble-line{
    display:none;
  }
  /* 焼き込み3コマ（em＝キャンバス基準・375=37.5em）。中身は maintext と CTA の間に配置。※位置は要視覚調整 */
  .fv-figure-sp{
    display:block;
    position:relative;   /* flow配置（maintextとCTAの間）。3コマは内部で絶対重ね */
    width:31em;   /* デザイン実寸32.4emから微縮小＝SE1で下端に余白を確保 */
    margin-inline:auto;
    margin-top: -10%;
    aspect-ratio:648 / 556;
    z-index:2;
  }
  .fv-figure-sp__frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;   /* transitionなし＝パッと切替のコマ送り */
  }
  .fv-figure-sp__frame.is-active{
    opacity:1;
  }
  .br-sp{
    display:inline;
  }   /* SP専用改行を有効化 */
  .br-pc{
    display:none;
  }   /* PC専用改行を無効化（SP/タブレットは折返しに任せる） */

  /* ===== 共通：帯 / コンテナ（SPは詰める・マーキーは控えめに） ===== */
  .l-1440{
    padding-inline:2rem;
  }
  .band{
    min-height:auto;
  }
  .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;
  }
  .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-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:1em;
    line-height:2.4;
    padding:0.2em 2em;
  }

  /* 人物：ブロブ右上（絶対）。高さ揃えした画像の「高さ」で制御（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:44%;   /* 人物寄りに（右端はみ出し回避） */
    top:60%;   /* スプラッシュ位置 */
    transform:translate(-50%, -50%);
    width:16em;   /* splashサイズ（もう少し大きく） */
    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:2.8em 1.6em;
    border-width:0.3em;
    gap:0.8em;
  }
  .case-box--after{
    flex:1 1 0;
    width:auto;
    min-width:0;   /* flex縮小を許可＝内容ぶんに膨らんで画面右へはみ出すのを防ぐ（Figma min-w-px 相当） */
    padding:2.8em 2.4em;   /* 左右をやや詰めて給与行の横スペースを確保 */
    gap:0.6em;
  }
  /* 給与ラベル「想定/年収」「万/円」は横書き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 矢印（cream地バー） */
  .case-dots{
    display:none;
  }
  .case-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:2.4em;
    flex:none;
    padding:0.8em 0 1.6em;   /* 下余白圧縮（旧3.2em）＝SE1で収める */
    background:var(--c-cream);
    scroll-snap-align: end;   /* Caseの下端スナップはここだけ（ナビを画面下端に合わせる）。#casesではなくnavに付けて上端スナップを防止 */
    scroll-snap-stop: always;   /* このスナップ点は飛び越え不可＝必ず止まる（proximityでも「navに来たら必ずスナップ」に。mandatoryは点が1つで閉じ込めるので不採用） */
    margin-top: -1px;
  }
  .case-nav__btn{
    width:4.8em;
    height:4.8em;
    border-radius:50%;
    background:url(../img/top/case_nav_arrow.svg) center/contain no-repeat;
    cursor:pointer;
  }
  .case-nav__btn--prev{
    transform:rotate(180deg);
  }

  /* ===== #jobs ===== */
  .sec-jobs{
    padding-top:2rem;
    padding-bottom: 4rem;
  }
  /* 帯：Cases同様＝背景marquee(band__big)が全部見える高さ＋ラベル中央 */
  .sec-jobs .band{
    min-height:10rem;
    margin: 10% 0 0;
  }
  .sec-jobs .band__label{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    transform:translateY(-50%);
    justify-content:center;
    padding-left:0;
  }
  /* カード後ろに配置。position:relative＝子(blob/btn/text の absolute)の基準＋display:block で
     幅/アスペクトを効かせる（static だと <a> がインラインで0×0に潰れ、子が#jobsに広がる） */
  .jobs-link{
    position:relative;
    display:block;
    top:auto;
    right:auto;
    width:24rem;
    margin:2.4rem auto 0;
    transform:none;
  }
  /* ブロブの重心がPCと変わるため、テキストの左寄せ量を増やす（PC 5%） */
  .jobs-link__text{
    padding-left:12%;
  }
  .jobs-cards{
    grid-template-columns:1fr;
    gap:1.6rem;
    margin-top:2rem;
  }
  /* カードはFigma SP仕様（335px幅・padding24・gap8・角丸tl40/他8）。中身は中央寄せ */
  .job-card{
    gap:0.8rem;
    padding:2.4rem;
    border-radius:4rem 0.8rem 0.8rem 0.8rem;
    align-items:center;
    text-align:center;
  }
  .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 */
  /* カード2・3はSP幅で1行に収まる（Figmaも1行）→ HTMLの改行(br)を無効化。カード1のみ2行維持 */
  .job-card:nth-child(n+2) .job-card__title br{
    display:none;
  }
  /* 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: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;
    padding-bottom:0;
    margin-bottom:0.8rem;
    font-size:2.4rem;   /* Figma Frame107 縦書き ~24px（was 3.2rem で過大） */
    letter-spacing:0.8rem;
    gap:1.5rem;   /* 2列の中心間≒39px（Figma）に合わせる */
  }
  /* 吹き出し＝左右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;
  }   /* 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 ===== */
  /* 人物2名：Figma 300:627＝pill上部・中央やや右に立つ（女=左/男=右）。base のPC絶対座標を上書き。
     ⚠️ファイル名と中身が逆：about_person_w.png=男性 / about_person_m.png=女性。よって女(--m)=左、男(--w)=右。
     画像は男女とも同一寸法(218×426)＝同じ width＋同じ top で「上基準」に揃える（下端も自動で揃う）。 */
  #about{
    padding-top:6rem;
    padding-bottom:5rem;
    margin-top: 6rem;
  }
  #about .about-people{
    display:block;
    z-index:1;
  }
  #about .about-person{
    position:absolute;
    height:auto;
    top: 1rem;
  }   /* 上基準：共通top */
  #about .about-person--m{
    width:6.8rem;
    left:auto;
    right: 12.2rem;
  }   /* 女：左（about_person_m） */
  #about .about-person--w{
    width:6.8rem;
    left:auto;
    right: 6rem;
  }   /* 男：右（about_person_w） */
  #about .about-band{
    min-height: 6rem;
    margin-bottom: -5rem;
  }
  #about .about-big{
    font-size:4rem;
  }
  #about .about-x{
    width: 4rem;
    ;
  }
  #about .about-body{
    margin-top:2rem;
    padding-inline:0;
  }   /* pillを全幅に（l-1440のサイドpaddingを解除） */
  /* Figma 300:631：cream の縦長楕円（rounded-900px）。テキスト上／TOEICバッジは absolute（下部）。
     pb を大きく取り楕円の下ぶくれを作る。上に人物2人が立つ（.about-people）。 */
  #about .about-pill{
    position:relative;
    flex-direction:column;
    align-items:center;
    padding:4.8rem 2rem 3.2rem;
    min-height:0;
    border-radius:2rem;
    gap:3.2rem;
    z-index:3;
  }
  #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:1.2rem; }
  #about .about-eq__en{ font-size:.9rem; }
  #about .about-eq__ja{ font-size:1.8rem; }
  #about .about-eq__sub{ font-size:1.05rem; }
  #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 2rem; border-radius:1.2rem; }
  #about .about-eq__result img{ width:2.4rem; }
  #about .about-eq__result-ja{ font-size:1.6rem; }
  #about .about-eq__result-en{ font-size:3.6rem; }
  #about .about-points{ justify-content:center; margin-top:2rem; gap:.8rem; }
  #about .about-points li{ font-size:1.2rem; padding:.6rem 1.2rem; }
  /* 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:13rem 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;
  }
  #why-now .why-cards{
    flex-direction:column;
    gap:3.2rem;   /* Figma カード間32px */
  }
  #why-now .why-card{
    gap:0.8rem;
  }   /* Figma カード内8px（写真ボックスの余白込み） */
  #why-now .why-card__photo{
    width:21.6rem;
  }   /* Figma 216px（高さ183は自動） */
  #why-now .why-card__body{
    gap:0.8rem;
    padding-inline:0;
  }   /* 見出し→本文→出典 8px。左右paddingは不要 */
  #why-now .why-card__title{
    font-size:2.4rem;
    text-align:center;
  }   /* Figma 24px。SPは中央寄せ */
  #why-now .why-card__note{
    text-align:right;
  }   /* 出典は右寄せ */

  /* ===== #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.44em;
  }   /* Figma 3=26px（26/18） */
  #reasons .reason-cards{
    flex-direction:column;
    align-items:center;
    gap:4rem;
    margin-top:2rem;
  }
  #reasons .reason-card{
    max-width:100%;
    gap:1.2rem;
  }   /* Figma カード内12px */
  #reasons .reason-card--2{
    margin-top:0;
  }   /* SPは段差なし */
  #reasons .reason-card__photo{
    width:24rem;
  }   /* PC363→SP縮小（ref楕円≒223px） */
  #reasons .reason-card__body{
    padding-top:0;
  }
  #reasons .reason-card__title{
    font-size:2.4rem;
    line-height:1.41;
    margin-bottom:1.2rem;
  }   /* Figma 24px */
  #reasons .reason-card__title br{
    display:none;
  }   /* 各タイトル1行（ref/Figma準拠） */

  /* ===== #flow（Figma 300:721：cream角丸カード。badgeは左上に絶対overlay、見出し16px中央、本文16px） ===== */
  #flow{
    padding-block:6rem 4rem;
  }
  #flow .flow-inner{
    flex-direction:column;
    align-items:center;
    gap:3rem;
  }
  #flow .flow-title{
    font-size:2rem;
  }   /* H2「ご利用の流れ」＝1行中央 */
  #flow .flow-title__mouth{
    width:1.8rem;
  }
  #flow .flow-steps{
    width:100%;
    gap:2.5rem;
  }   /* Figma step間15px */
  /* badgeは絶対配置なので左padding不要。Figma padding 24/24/20 */
  #flow .flow-step{
    padding:2.4rem 2.4rem 2rem;
    gap:0;
  }
  #flow .flow-step__badge{
    width:5.7rem;
    left:0.9rem;
    top:-1.3rem;
  }   /* Figma 57px・左上overlap */
  #flow .flow-step__no{
    font-size:1rem;
  }   /* 「Step N」9px相当 */
  #flow .flow-step__body{
    display:flex;
    flex-direction:column;
    gap:0.4rem;
  }   /* Figma gap4px */
  #flow .flow-step__head{
    font-size:1.6rem;
    line-height:2.2rem;
    text-align:center;
  }   /* Figma 16px Bold中央 lh22 */

  /* ===== #cta（Figma 300:728：pill 375×540 角丸248・グラデ・cream縁。下部中央に料理人+女性） ===== */
  #cta .cta-head__brsp{
    display:inline;
  }   /* SPは見出し3行 */
  #cta .cta-inner{
    padding-inline:0;
  }   /* pillを全幅に（l-1440のサイドpadding解除） */
  #cta .cta-pill{
    width:100%;
    min-height:54rem;   /* Figma 540px */
    padding:7rem 2rem 16rem;   /* 下部に人物スペース→本文は上半分に寄る（align-items:center） */
    border-width:0.4rem;   /* cream縁を細く（base 0.8rem→0.4rem） */
    background-image:url("../img/top/cta_bg_sp.png"), linear-gradient(174.5deg, var(--c-orange) 14.6%, var(--c-orange3) 56.4%);   /* SPは cta_bg_sp */
    /* border-radius:24.8rem はbase維持（archなpill） */
  }
  #cta .cta-body{
    width:min(100%, 33.5rem);
    gap:2.4rem;
  }   /* Figma 335px / gap24 */
  #cta .cta-head{
    font-size:2.6rem;
  }   /* Figma 26px */
  #cta .cta-action{
    gap:2.4rem;
    width:100%;
  }
  #cta .cta-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;   /* Figma 335px */
    height:5.6rem;
    padding-inline:1rem;   /* テキストが収まるよう左右padding縮小（旧2rem） */
    font-size:1.7rem;   /* Figma 18px → 収まり優先で17pxに微縮 */
  }
  #cta .cta-note{
    font-size:1.4rem;
    line-height:2.4rem;
  }   /* Figma 14px Bold lh24 */
  #cta .cta-note br{
    display:none;
  }   /* 改行を無効化→自然フロー3行 */
  /* 人物2名＝pill下部中央（bottom基準・overflow:hiddenで下端クリップ）。Figma: 料理人103×191 / 女性93×177 */
  #cta .cta-hito{
    display:block;
    top:auto;
  }
  #cta .cta-hito--cook{
    right:auto;
    left:9.4rem;
    width:10.3rem;
    bottom:0rem;
  }
  #cta .cta-hito--woman{
    left:16.6rem;
    width:9.3rem;
    bottom:0;
    z-index:2;
  }

  /* ===== #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{
    border-radius: 6rem;   /* 閉：ピル */
  }
  /* ===== 開状態＝プロトタイプのキャプチャに合わせ込み（閉じたピルは無改変） ===== */
  #faq .faq-item.is-open{
    border-radius: 2rem;
  }   /* 開：カード角丸（キャプチャ実測寄せ・閉6remより小） */
  #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{ 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{ width:1.2em; opacity:.6; }
@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;
}
.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:3.2rem;
  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;
}
/* タブレット/SP：表は横スクロール、項目列は sticky 固定 */
@media (max-width:1100px){
  .sec-pricing{
    padding-top:2rem;
    padding-bottom:5rem;
  }
  .sec-pricing .l-1440{
    padding-inline: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:2rem;
  }
  .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%);
}

/* =========================================================
   白背景セクション（.sec-white）：赤背景のセクションと交互に配置してリズムを作る
   対象：problem / why-now / pricing / faq
   ========================================================= */
.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); }
#why-now.sec-white .why-card__body{ color:var(--c-ink); }
#why-now.sec-white .why-card__title{ 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 .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); }

/* 白セクションは .home(1440) の外まで白を伸ばす（左右に背景の赤が覗かないように） */
.sec-white{
  box-shadow:0 0 0 100vmax #fff;
  clip-path:inset(0 -100vmax);
}
/* 選ばれる理由：テーマの赤に統一。上下の尖り帯は画像をやめて CSS(clip-path) で描く。
   帯の地は白（前後が白セクション）、尖りの形は旧画像 reason-bg_head/bottom.png に合わせた */
#reasons{
  --reason-red:#962f2e;   /* 後ろのコーチ紹介（ページ地の赤）と区別するため濃いめの赤 */
}
#reasons .reason-band-top{
  background:#fff;
}
/* 下の帯は後ろがコーチ紹介（ページ地の赤）なので透過 */
#reasons .reason-band-bottom{
  background:transparent;
}
#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:#a83938;   /* 地より一段明るい赤 */
}

/* 「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:12rem; }
.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:14.1rem;
  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:11rem; }
  .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:9.6rem; }
  .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:#f6f3f2;
  box-shadow:0 0 0 100vmax #f6f3f2;
  --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"
    "fo   fo   fg   fg";
  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:2.4rem;
  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);
  box-shadow:0 1.6rem 3.2rem rgba(0,0,0,.06);
}
.aic-card__icon{
  width:10rem;
  height:10rem;
  margin-bottom:1.2rem;
}
.aic-card__icon svg{ width:100%; height:100%; }
.aic-card--own .aic-card__icon{ color:#fff; }
.aic-card--own .aic-accent{ stroke:var(--c-yellow); }
.aic-card--general .aic-card__icon{ color:var(--gold); }
.aic-card--general .aic-accent{ stroke:var(--c-red); }
.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; }
  .aic-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "own own"
      "c1  c2"
      "fo  fo"
      "gen gen"
      "c3  c4"
      "fg  fg";
    gap:1.2rem;
    margin-top:4rem;
  }
  .aic-bar{ min-height:4.4rem; padding:0 3.6rem 0 1.6rem; font-size:1.4rem; }
  .aic-bar__logo{ width:8rem; }
  .aic-card{ padding:2.8rem 1.6rem 2.4rem; gap:1.2rem; border-radius:1.6rem; }
  .aic-card__icon{ width:6.4rem; height:6.4rem; margin-bottom:.4rem; }
  .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; }
}
/* カード見出し・本文は文節で折り返し、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 4rem;
}
#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:-0.1rem;
  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;
}
#coaches .coach-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:3.2rem;
  margin-top:5.6rem;
}
#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:4rem 12rem;
}
#message .message-card{
  display:flex;
  align-items:flex-start;
  gap:6.4rem;
  padding:6.4rem;
  background:var(--c-cream);
  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-orange4);
  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 2rem;
  }
  #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-cards{
    grid-template-columns:1fr;
    gap:2rem;
    margin-top:3.2rem;
  }
  #coaches .coach-card{
    padding:3.2rem 2.4rem;
  }
  #coaches .coach-card__photo{
    width:11rem;
  }
  #message{
    padding-block:2rem 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{
  font-size:2.4rem;
}
@media (max-width: 1100px){
  .btn-cv,
  .btn-cv--fv,
  .btn-cv--cta,
  .btn-cv--price{
    display:flex;
    width:100%;
    font-size:1.5rem;
    padding:0 1.2em 0 4.2em;
    gap:.6em;
  }
  .btn-cv__badge{
    width:3.3em;
  }
}

/* FAQ：カテゴリ見出し */
#faq .faq-group + .faq-group{
  margin-top:6.4rem;
}
#faq .faq-cat{
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin:0 0 2.4rem;
  font-family:var(--f-jp);
  font-weight:900;
  font-size:2.4rem;
  color:var(--c-ink);
}
#faq .faq-cat::before{
  content:"";
  width:0.6rem;
  height:2.8rem;
  border-radius:0.3rem;
  background:var(--c-red);
}
@media (max-width: 1100px){
  #faq .faq-group + .faq-group{
    margin-top:4rem;
  }
  #faq .faq-cat{
    margin-bottom: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);
}