@charset "UTF-8";

/* =========================================================
   bycaree 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-purple);
  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;
}

/* 右上サブコピー */
.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コマ切替 */
.fv-copy__img{
  position:relative;
  width:52.5rem;
  aspect-ratio:525 / 399;
}
.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 14rem;   /* テキスト短縮（LINEで事前登録）でも旧デザイン幅を左右paddingで概ね維持 */
  margin-top:0.6rem;
}
.fv-btn__note{
  display:none;   /* PCはボタン下の .fv-note を使用。SPでボタン内に表示 */
}

/* 楕円ラベル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;
}
/* 許可申請中の免責注記（PC＝.fv-inner直下の絶対配置＝bubble--3の下・右寄り。※位置は要実機微調整） */
.fv-disclaimer{
  right:6rem;
  bottom:3rem;
  width:32rem;
  margin:0;
  font-family:var(--f-jp);
  font-weight:400;
  font-size:1rem;
  line-height:1.6;
  color:var(--c-cream);
  text-align:right;
  z-index:6;
}
/* 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%);
  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;
}
/* 許可取得前：求人リンクボタン直下の受付注記（jobs-link=PC絶対/SP相対 どちらも位置指定親→top:100%でボタン直下） */
.jobs-link__note{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  margin-top:1rem;
  width:max-content;
  max-width:28rem;
  text-align:center;
  color:#fff;
  font-family:var(--f-jp);
  font-size:1.2rem;
  line-height:1.6;
}

/* ============================================================
   許可取得前 コンプライアンス注記（共通）
   ・色は配置先セクションの文字色を継承（暗色/オレンジ地=cream）
   ============================================================ */
.notice{
  margin-top:1.2rem;
  font-family:var(--f-jp);
  font-weight:400;
  font-size:1.3rem;
  line-height:1.75;
  color:inherit;
  opacity:.9;
}
.notice--center{ text-align:center; }
.notice--disclaimer{
  margin-top:0rem;
  font-size:1.2rem;
  line-height:1.7;
  opacity:.82;
}
/* 配置先ごとの寄せ（同一クラスのため #section で個別指定） */
#problem .notice--center{   /* #14: キャッチコピー右端へ寄せる */
  align-self:stretch;
  text-align:right;
}
#reasons .notice--disclaimer{ text-align:right; }   /* #21 */
#cta .notice--disclaimer{   /* #6: 左寄せ・程よい幅で改行 */
  text-align:left;
  max-width:66rem;
  color: #fff;
}

/* ヒーロー：CTA直下の受付注記＋許可申請中の免責（.fv-copy__cta の gap で間隔確保） */
.fv-note{
  margin:0;
  font-family:var(--f-jp);
  font-weight:400;
  font-size:1.3rem;
  line-height:1.7;
  color:var(--c-cream);
  text-align:center;
}
/* FAQ回答内の許可注記（回答pに内包＝.faq-a__inner の flex 崩れ回避） */
.faq-note{
  display:inline-block;
  margin-top:0.8rem;
  font-size:0.85em;
  line-height:1.6;
  opacity:.8;
}

/* =========================================================
   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;
  color:var(--c-cream);
  padding-bottom:0;
}
#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:var(--c-orange3);
  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;
}
#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:3.2rem;
  min-height:42.2rem;
  padding:4rem 16rem 4rem 5.9rem;
  background:var(--c-cream);
  color:var(--c-black);
  border-radius:80rem;
}
#about .about-visual{
  flex:none;
  width:50.7rem;
}
#about .about-visual img{
  width:100%;
  height:auto;
}
#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:10.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:16rem;   /* テキスト短縮でも旧デザイン幅を左右paddingで概ね維持 */
  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;
}
#faq .faq-a__inner{
  display:flex;
  align-items:flex-start;
  gap:1.4rem;
  min-height:0;
  overflow:hidden;
  padding:0 6.4rem;
  opacity:0;
  transition:opacity .35s ease, padding .35s ease;
}
#faq .is-open .faq-a__inner{
  padding:0 10.4rem 2.6rem 7.2rem;
  opacity:1;
}
/* 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:1.2em;
    top:1.2em;
    width:9.6em;
  }
  .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:0.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:auto;   /* ラベル＋受付注記の2段になるため可変（Figma bt=335×56 は1段時） */
    flex-direction:column;
    gap:0.1em;
    padding:0.5em 2em;
    font-size:1.6em;
    margin-top:0;
  }
  /* SP：受付注記をボタン内に小さく（PCはボタン下の .fv-note を使用） */
  .fv-btn__note{
    display:block;
    font-size:0.62em;   /* label 1.6em に対して≈10px */
    font-weight:400;
    line-height:1.3;
    opacity:.9;
  }
  /* ===== 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/タブレットは折返しに任せる） */
  /* 許可注記：rem スケールでSPは大きくなりすぎるため小さめに（本文より控えめの fine-print） */
  .notice{
    font-size:1rem;
    line-height:1.6;
    margin-top:1.4rem;
  }
  .notice--disclaimer{
    font-size:1rem;
    margin-top:1.6rem;
  }
  /* ヒーロー受付注記：SPはボタン内(.fv-btn__note)に出すので、ボタン下の注記は隠す */
  .fv-note{
    display:none;
  }
  /* 求人リンク直下の受付注記はSPも小さめ（rem スケール補正） */
  .jobs-link__note{
    font-size:1rem;
  }
  /* 許可申請中の免責注記：SPは静的フロー＝ボタン(=.fv-copy)の下に中央・小さめ */
  .fv-disclaimer{
    position:static;
    left:auto;
    bottom:auto;
    width:41.5em;
    max-width:100%;
    margin:0.8em 0 0;
    font-size:0.8rem;
    line-height:1.6;
    text-align:left;
    flex:none;
  }

  /* ===== 共通：帯 / コンテナ（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:.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 6rem;   /* ボタン直下の絶対配置注記(.jobs-link__note)が次セクションに被らないよう下余白を確保 */
    transform:none;
  }
  .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;
    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:8.8rem 2.4rem 20rem;   /* Figma pt88/px24/pb232→許可注記追加分 下ぶくれを拡張 */
    min-height:0;
    border-radius:90rem;   /* 縦長楕円（上下フルラウンド） */
    gap:1.6rem;
    z-index:3;
  }
  #about .about-text{
    order:0;
  }
  /* TOEICバッジ＝Figma 300:1630（absolute top:300,left:24,w:327） */
  #about .about-visual{
position: absolute;
        order: 1;
        top: 37rem;
        left: 2.4rem;
        right: 2.4rem;
        width: auto;
  }
  /* 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{
    padding-block:6rem;
  }   /* SPは上下を詰める（base 10.2rem→6rem・要微調整） */
  #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() が自動。個別調整はここ。 */
}