@charset "UTF-8";

/* =========================================================
   バイキャリ 事業者向けサイト  top.css  （TOP 専用）
   Figma: PC_TOP 1:76（1920 幅・コンテンツ 1240）／ SP_TOP 41:776（750 幅）
          フェーズ2（2026-10 追加分）：2ySkGMUtqjK4QNHFT0p0gB の PC_TOP 2020:3545 ／ SP_TOP 41:776
   セクション順：FV → 100% 帯 → 登録者 → 紹介できる人材 → 比較 → お悩み → こだわり
                → 選ばれる理由 → おすすめ業種 → ご利用の流れ → お問い合わせ
   PC は px 固定、SP は min(calc(N/750*100vw), Npx)（common.css 冒頭の方針を参照）
   ========================================================= */

/* =========================================================
   1. FV（Figma 1:112 / SP 44:1214）
   高さは中身のパディングで決まる：80 + 512 + 213.9 + 132 + 21 + 80 = 1038.9
   ========================================================= */
.fv{
  position: relative;
  overflow: hidden;              /* 人物・スプラッシュは FV の外にはみ出さない */
  background: var(--c-cream);
}
.fv__inner{
  position: relative;            /* 人物／バッジ／スプラッシュの基準（= Figma contents 1240 の左上） */
  padding: 80px 0;
}

/* --- キャッチ --- */
/* 文字・ピル・ボタンは人物(z2)より前（SP で人物と重なる箇所は文字が手前＝Figma SP 準拠） */
.fv-main{
  position: relative;
  z-index: 3;
  padding-bottom: 60px;
}
.fv-catch{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 20px;
  font-weight: 900;
  font-size: 86.228px;
  line-height: 117.365px;
  letter-spacing: -1.7246px;
  color: var(--c-black);
  white-space: nowrap;
}
.fv-catch__line{ display: block; }
/* 2行目（人材を）：Figma は親 <p> を font-size:0/line-height:0 にして strut を消し、
   人材/を それぞれが自分の line-height で baseline を持つ。ここで strut を残すと
   86px 側の暗黙の行に 146px 側の baseline が引っ張られて数px 下にズレるため、揃える。
   さらに height を明示。人材(146px)は自身の line-height(117.365px)より実際のグリフが
   縦に大きく、strutなし(font-size:0)でも中身の高さが親に染み出して他行の間隔が広がるため、
   height で行の占有スペースを固定し、はみ出し分はあくまで視覚的な overflow に留める。 */
.fv-catch__line--2{
  height: 117.365px;
  min-height: 0;                 /* flex item の自動最小サイズ（min-height:auto）が中身の自然な高さで
                                     height指定を無視してしまうのを解除。これがないと height が効かない */
  font-size: 0;
  line-height: 0;
}
/* 「英語」＝口のあしらい付きの画像。2 行目の先頭を空けて絶対配置（Figma Group 9） */
.fv-catch__eigo{
  position: absolute;
  left: 0.7px;
  top: 123.9px;
  width: 284px;
  height: 145.2px;
}
.fv-catch__ph{
  display: inline-block;
  width: 286.2px;                /* Figma は「　　人材」の全角スペース2つ＝画像の空き。146.108px×2 に
                                     big側のletter-spacing(-2.9222px)が2箇所分乗るため 292px より少し狭い */
}
.fv-catch__big{
  position: relative;
  top: -8px;                     /* Zen Kaku Gothic New は Figma 指定の Hiragino Sans と垂直メトリクスが異なり、
                                     line-height を揃えても baseline が約8px 下に出る。AUNスクショと画素比較して補正 */
  font-size: 146.108px;
  line-height: 117.365px;        /* 他行と同じ line-height（Figma準拠）。baseline揃えで大きい字だけ上下にはみ出す */
  letter-spacing: -2.9222px;
  color: var(--c-orange);
}
.fv-catch__wo{
  font-size: 86.228px;           /* strut を殺したので、を もここで明示（Figma: leading-117.365 text-86.228） */
  line-height: 117.365px;
}

/* --- サブコピー（★ 英語×サービス業特化の転職エージェント ★） --- */
.fv-sub{
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.32px;
  color: var(--c-black);
  white-space: nowrap;
}
.fv-sub img{
  width: 16px;
  height: 16px;
}
.fv-sub span{ padding: 0 10px; }

/* --- 3 つの楕円ピル --- */
.fv-pills{
  position: relative;
  z-index: 3;
  display: flex;
  gap: 20px;
  padding: 0 0 60px 10px;
}
.fv-pill{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 177.3px;
  height: 153.9px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--c-cream);
  text-align: center;
  white-space: nowrap;
}
.fv-pill::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 234px;
  height: 140.4px;
  margin: -70.2px 0 0 -117px;
  border: 2.7px solid var(--c-white);
  border-radius: 50%;
  background: var(--c-orange);
  transform: rotate(-37.34deg);
}
.fv-pill span{ position: relative; }
.fv-pill--1{ line-height: 1.6; }
.fv-pill small{ font-size: 11px; vertical-align: top; }

/* --- CTA ボタン／注記 --- */
.fv-btn{
  position: relative;
  z-index: 3;
  padding-bottom: 60px;
}
.fv-cap{
  position: relative;
  z-index: 3;
  max-width: 560px;              /* 右の人物に掛からない幅 */
  font-size: 14px;
  line-height: 1.5;
  color: #000;
}

/* --- 右側：緑スプラッシュ／人物／LINE バッジ（Figma contents 基準の絶対座標 − 340） --- */
.fv-splash{
  position: absolute;
  left: 600px;
  top: 147px;                    /* AUN スクショと画素比較して決定（Figma のノード座標 318 は効果込みの外接枠で一致しない） */
  width: 776px;
  height: 613px;
  z-index: 0;
  pointer-events: none;
}
.fv-person{
  position: absolute;
  left: 385px;
  top: -32.8px;
  width: 1150px;
  height: auto;
  z-index: 2;
  pointer-events: none;
}
.fv-badge{
  position: absolute;
  left: 860px;
  top: 637px;
  width: 350px;
  height: 350px;
  z-index: 4;
}

/* フェーズ2の本文（Figma テキストスタイル body_txt）は仮名も詰める（palt ＋ pkna）。これがないと 1 行の字数が Figma より減る */
.track-pill__text,
.compare-table th,
.compare-table td,
.commit-card__text,
.reason-card__text{ font-feature-settings: "palt" 1, "pkna" 1; }

/* =========================================================
   2. 英語力を確認済みのバイリンガル人材をご紹介（100% 帯・Figma 2020:3606 / SP 2028:2304）
   2026-10 の景表法チェック（AUN 85vb2q）で見出しを差し替え。強調語が「日本人」3 字 → 「バイリンガル人材」8 字に伸びたので、強調の字を 118 → 96 に下げた
   高さ 140 + 250 + 185 + 40 + 21 + 140 ≒ 864
   ========================================================= */
.only-jp{
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background: var(--c-orange) url("../img/common/bk_bg.png") center center / cover no-repeat;
  color: var(--c-cream);
  text-align: center;
}
/* 日本地図（中央・セクション基準。Figma は中心から -0.5 / -0.9 ずれている） */
.only-jp__map{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 667px;
  height: 640px;
  margin: -320.9px 0 0 -334px;
  pointer-events: none;
}
.only-jp__inner{ position: relative; }
/* 「100%」：Figma は高さ 30 の <p> に line-height 183 の字を載せ、下に pb 220。字は上 183px ぶんに収まる */
.only-jp__num{
  position: relative;
  height: 250px;
  font-size: 0;
  line-height: 183px;
  text-shadow: 0 2px 2px rgba(222, 59, 0, .6);
  white-space: nowrap;
}
.only-jp__count{
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 260px;
}
.only-jp__pct{
  font-weight: 700;
  font-size: 72px;
}
/* 放射線のあしらい：中心から左へ 289px（Figma left 311 / 器 1200） */
.only-jp__spark{
  position: absolute;
  left: calc(50% - 289px);
  top: -32.9px;
  width: 100px;
  height: 94.7px;
}
.only-jp__title{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px 40px;
  font-weight: 900;
  font-size: 54px;
  line-height: 1.2;
  filter: drop-shadow(0 2px 1px rgba(222, 59, 0, .6));
}
.only-jp__title em{
  font-size: 96px;
  line-height: 1.21;
  color: #F7E25F;
}
.only-jp__note{
  font-size: 14px;
  line-height: 1.5;
  filter: drop-shadow(0 2px 1px rgba(222, 59, 0, .7));
}

/* =========================================================
   3. プレリリース1ヶ月の登録者（TRACK RECORD・Figma 2020:3637 / SP 2014:1624）
   ========================================================= */
.track{ background: var(--c-cream); }
.track-pill{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 90px;
  padding: 60px 0;
  border-radius: 800px;
  background: var(--c-orange);
  color: var(--c-cream);
  text-align: center;
}
.track-pill__cap{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
}
.track-pill__cap img{
  width: 26px;
  height: 21px;
  margin: 5.5px 3px;                /* 32×32 の枠の中央（Figma） */
}
.track-pill__num{
  padding-bottom: 30px;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  white-space: nowrap;
}
.track-pill__num strong{ font-size: 80px; }
.track-pill__text{
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
}
.track-cards{
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding-bottom: 30px;
}
.track-card{
  position: relative;
  flex: 1 1 0;
  min-height: 443px;
  padding: 60px 20px 20px;
  border: 1px solid var(--c-orange);
  border-radius: 10px;
  background: var(--c-white);
}
.track-card__label{
  position: absolute;
  left: 50%;
  top: 1px;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 10px;
  background: var(--c-orange);
  color: var(--c-white);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -1px;
  white-space: nowrap;
}
.track-card__list{ list-style: none; }
.track-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px dashed var(--c-orange);
}
.track-row__label{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -1px;
  color: #000;
}
.track-row__label::before{
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  background: url("../img/top/icon_check.svg") 0 0 / 100% 100% no-repeat;
}
.track-row__label small{ font-size: 12.9px; }
/* 右カード（英語レベル）だけ最終行の下線なし（Figma どおり。左カードは最終行にも線がある） */
.track-card:last-child .track-row:last-child{ border-bottom: 0; }
.track-row__val{
  flex: none;
  display: flex;
  align-items: flex-end;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -1px;
  color: var(--c-black);
}
.track-row__val b{
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}
/* 1 行目だけ数字を大きく（Barlow 36・オレンジ） */
.track-row--top .track-row__val{ color: var(--c-orange); }
.track-row--top .track-row__val b{
  font-family: var(--f-en);
  font-size: 36px;
  line-height: 1.3;
}
.track-pill__num small{
  font-size: 16px;
  vertical-align: 2.6em;         /* 数字（Barlow 80px）の字面の上端にそろえる。text-top だと字の上の余白ぶん浮く */
}
.track__note{
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-black);
  text-align: right;
}
.candidates__note{
  margin-top: 30px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-black);
  text-align: right;
}

/* =========================================================
   4. こんな人材を紹介できます（CANDIDATES・Figma 2020:3672 / SP 2022:5014）
   大カード：PC は 3 + 2 の折り返し中央寄せ。SP は横スクロール＋矢印
   小カード：2 段の自動横流れ（top.js が中身を複製して .is-running を付ける）
   ========================================================= */
.candidates{
  overflow: hidden;
  background: var(--c-white);
}
.cand-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 56px 16px 16px 16px;
  list-style: none;
}
.cand-card__score{
  display: flex;
  align-items: center;
  font-weight: 700;
  white-space: nowrap;
}
.cand-card__score b{
  font-family: var(--f-en);
  font-weight: 700;
  letter-spacing: 0;
}
.cand-card__job{
  display: flex;
  align-items: center;
  gap: 8px;
}
.cand-card__job::before{
  content: "";
  flex: none;
  background: 0 0 / 100% 100% no-repeat;
}
.cand-card__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
}
.cand-card__tags li{
  padding: 0 10px;
  border-radius: 2px;
  font-weight: 700;
  line-height: 24px;
  color: #B07F46;
  white-space: nowrap;
}
.cand-card__tags li:first-child{ color: var(--c-orange); }

/* --- 大カード（オレンジ） --- */
.cand-feature__list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  list-style: none;
}
.cand-card--l{
  width: 393.33px;                  /* (1240 - 30 × 2) / 3 */
  min-height: 194px;
  padding: 40px 32px 32px;
  background: var(--c-orange);
}
.cand-card--l .cand-card__score{
  gap: 4px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -1px;
  color: #F7E25F;
}
.cand-card--l .cand-card__score b{ font-size: 36px; }
.cand-card--l .cand-card__job{
  min-height: 60px;
  margin-bottom: 6px;
  font-weight: 900;
  font-size: 24px;
  line-height: 30px;
  color: var(--c-cream);
}
.cand-card--l .cand-card__job::before{
  width: 40px;
  height: 40px;
  background-image: url("../img/top/cand_person_l.svg");
}
.cand-card--l .cand-card__tags li{
  font-size: 16px;
  background: var(--c-cream);
}
.cand-card--l .cand-card__tags li:first-child{ background: var(--c-white); }
.cand-feature__nav{ display: none; }   /* 矢印は SP だけ */

/* --- 小カード（クリーム）の自動横流れ --- */
.cand-marquee{
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 30px;
}
.cand-marquee__row{ overflow: hidden; }
/* 動く前（JS なし・reduced-motion）は器の左端から並べる。
   シームレスにつなぐため、カード間は gap ではなく各カードの margin-right で取る（半分ちょうどで同じ見た目になる） */
.cand-marquee__track{
  display: flex;
  align-items: flex-start;
  width: max-content;
  padding-left: max(calc((100vw - 1240px) / 2), 20px);
  list-style: none;
}
.cand-marquee__track > li{ margin-right: 30px; }
.cand-marquee__track.is-running{
  padding-left: 0;
  animation: cand-marquee-left linear infinite;   /* duration は top.js（内容幅 ÷ 速度） */
}
[data-marquee="right"] .cand-marquee__track.is-running{ animation-name: cand-marquee-right; }
/* マウスを乗せたら止める。タッチ端末はタップでホバー扱いになって止まったままになるので対象外 */
@media (hover: hover){
  .cand-marquee__row:hover .cand-marquee__track{ animation-play-state: paused; }
}
@keyframes cand-marquee-left{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes cand-marquee-right{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}
.cand-card--s{
  flex: none;
  width: 360px;
  min-height: 170px;
  padding: 36px 30px 22px;
  background: var(--c-cream);
}
.cand-card--s .cand-card__score{
  gap: 2px;
  height: 22px;
  font-size: 16px;
  line-height: 28px;
  color: var(--c-orange);
}
.cand-card--s .cand-card__score b{
  font-size: 22px;
  line-height: 1.3;
}
.cand-card--s .cand-card__job{
  min-height: 52px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -1px;
  font-weight: 700;
  color: var(--c-orange);
}
.cand-card--s .cand-card__job::before{
  width: 30px;
  height: 30px;
  background-image: url("../img/top/cand_person_s.svg");
}
.cand-card--s .cand-card__tags li{
  font-size: 12px;
  background: var(--c-white);
}

/* =========================================================
   5. 他社人材紹介サービスとの比較（WHY NOT OTHERS・Figma 2020:3713 / SP 2014:2213）
   列幅 280 / 可変（バイキャリ）/ 280 / 280
   ========================================================= */
.compare{ background: var(--c-cream); }
.compare-table{
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--c-orange);
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-white);
}
.compare-table th,
.compare-table td{
  padding: 20px 12px;
  border-bottom: 1px solid var(--c-orange);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
  text-align: center;
  vertical-align: middle;
}
.compare-table thead > tr > :first-child,
.compare-table thead > tr > :nth-child(3),
.compare-table thead > tr > :nth-child(4){ width: 280px; }
.compare-table thead th{
  padding-block: 10px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -1px;
}
.compare-table thead .is-us{ padding-block: 20px; }
.compare-table thead .is-us img{
  display: block;
  width: 140px;
  height: 34px;
  margin-inline: auto;
}
.compare-table tbody th{ text-align: left; }
.compare-table tr > :nth-child(3){ border-right: 1px solid var(--c-orange); }
.compare-table .is-us{
  border-bottom-color: var(--c-cream);
  background: var(--c-orange);
  color: var(--c-cream);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -1px;
}
.compare-table__mark{ display: block; }
.compare-table__text{
  display: block;
  font-size: 14px;
  line-height: 1.5;
}
.compare__note{
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-black);
  text-align: right;
}
.compare-table tbody tr:last-child > *{ border-bottom: 0; }

/* =========================================================
   6. こんなお悩みありませんか？（SUCH A CHALLENGE・Figma 2020:3747 / SP 2023:5497）
   PC：左列 2 個・人物 2 人・右列 2 個を横に並べ、上中央に 1 個（器 1200）
   ========================================================= */
.problem{
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background: var(--c-orange) url("../img/common/bk_bg.png") center center / cover no-repeat;
  color: var(--c-cream);
}
.problem__inner{
  width: 1200px;
  margin-inline: auto;
}
.problem .sec__cap,
.problem .sec__title{ color: var(--c-cream); }
.problem-stage{
  position: relative;
  padding: 120px 0 60px;
}
.problem-people{
  display: flex;
  justify-content: center;
  gap: 22px;                        /* AUN スクショ実測（左列 264 / 人物 302 × 2 / 右列 264 を等間隔） */
}
.problem-person img{
  display: block;
  width: 302px;
  height: 440px;
}
/* 吹き出し：人物の行（高さ 440）に左右 2 段で重ねる。各段 220 の中で、回転後の外接枠 184.39 が縦中央に来る位置 */
.problem-balloons{
  position: absolute;
  inset: 120px 0 60px;
  display: grid;
  grid-template-columns: 264px 1fr 264px;
  grid-template-rows: repeat(2, 220px);
  list-style: none;
  pointer-events: none;
}
.problem-balloon{
  --tilt: -5deg;
  position: relative;
  width: 264px;
  height: 160px;
  transform: rotate(var(--tilt));
}
.problem-balloon::before{
  content: "";
  position: absolute;
  inset: 0 4.55% .1%;
  background: url("../img/top/problem_balloon_l.svg") 0 0 / 100% 100% no-repeat;
}
.problem-balloon p{
  position: absolute;
  left: 38px;
  top: 0;
  display: flex;
  align-items: center;
  width: 180px;
  height: 136px;
  padding-right: 8px;               /* 本文幅 172（Figma） */
  font-weight: 700;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: -1px;
}
/* 各行の下線（2px・cream）。行ごとに文字幅ぶんだけ引く */
.problem-balloon span{
  padding-bottom: 3px;
  background: linear-gradient(var(--c-cream), var(--c-cream)) 0 100% / 100% 2px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.problem-balloon--l1,
.problem-balloon--r1{
  grid-row: 1;
  align-self: end;
  margin-bottom: 12.2px;
}
.problem-balloon--l2,
.problem-balloon--r2{
  grid-row: 2;
  align-self: start;
  margin-top: 12.2px;
}
.problem-balloon--l{ grid-column: 1; }
.problem-balloon--r{
  --tilt: 5deg;
  grid-column: 3;
}
/* 右列：Figma は同じ形を左右反転して使っている（しっぽが左下） */
.problem-balloon--r::before{
  inset: 0 3.03% .66%;
  background-image: url("../img/top/problem_balloon_r.svg");
  transform: scaleX(-1);
}
.problem-balloon--r p{
  left: 42px;
  padding-right: 0;
}
.problem-balloon--top{
  position: absolute;
  left: 50%;
  top: -108.86px;                   /* 回転後の外接枠（212.29）の上端がステージ上端に来る位置：-120 + (212.29 - 190) / 2 */
  height: 190px;
  margin-left: -132px;
}
.problem-balloon--top::before{ background-image: url("../img/top/problem_balloon_t.svg"); }
.problem-balloon--top p{
  left: 36.95px;
  top: 11.95px;
  width: 191px;
  height: 135px;
  padding-right: 0;
  line-height: 1.7;
}

/* --- 登場演出：本サイト（bilingual-career.com #problem）と同じ動き。top.js が #problem に .is-inview を付ける ---
   吹き出し 5 個＝一斉に飛び出して着地 → 傾き（--tilt）と逆向きの傾きを 1 秒ずつ行き来して揺れ続ける
   人物 2 人＝内側の下隅を起点に 0.8 倍から等倍へ／見出し＝下からフェード／リード＝少しはずむポップ
   初期状態は .js 前置（JS が動かない環境では最初から全部見えている）。data-anim="pop" を外すと静止表示 */
.js .problem[data-anim="pop"] .problem-balloon{
  opacity: 0;
  transform: scale(0) rotate(var(--tilt));
  will-change: transform, opacity;
}
.js .problem[data-anim="pop"] .problem-person{
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.js .problem[data-anim="pop"] .problem-person--man{
  transform: scale(.8);
  transform-origin: right bottom;
}
.js .problem[data-anim="pop"] .problem-person--woman{
  transform: scale(.8);
  transform-origin: left bottom;
}
.js .problem[data-anim="pop"] .sec__cap,
.js .problem[data-anim="pop"] .sec__title{
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.js .problem[data-anim="pop"] .problem__lead{
  opacity: 0;
  transform: scale(.8);
  transition: opacity .3s ease-out, transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.js .problem[data-anim="pop"].is-inview .problem-balloon{
  animation:
    problem-pop .5s cubic-bezier(.34, 1.56, .64, 1) both,
    problem-wiggle 2.4s linear .5s infinite;
}
.js .problem[data-anim="pop"].is-inview .problem-person{ transform: scale(1); }
.js .problem[data-anim="pop"].is-inview .sec__cap,
.js .problem[data-anim="pop"].is-inview .sec__title,
.js .problem[data-anim="pop"].is-inview .problem__lead{
  opacity: 1;
  transform: none;
}
/* リードは吹き出しと人物の後から出す（本サイトはリードだけ個別にスクロール出現） */
.js .problem[data-anim="pop"].is-inview .problem__lead{ transition-delay: .5s; }
@keyframes problem-pop{
  0%{
    opacity: 0;
    transform: scale(.2) rotate(var(--tilt));
  }
  100%{
    opacity: 1;
    transform: rotate(var(--tilt));
  }
}
/* 傾き A（--tilt）と反転 B で約 1 秒ずつ止まり、間をスナップ気味に切り替える（2.4 秒周期） */
@keyframes problem-wiggle{
  0%,
  40%{
    transform: rotate(var(--tilt));
    animation-timing-function: cubic-bezier(.5, -.2, .35, 1.3);
  }
  50%,
  90%{
    transform: rotate(calc(var(--tilt) * -1));
    animation-timing-function: cubic-bezier(.5, -.2, .35, 1.3);
  }
  100%{ transform: rotate(var(--tilt)); }
}
@media (prefers-reduced-motion: reduce){   /* 静止・全表示（傾きだけ残す） */
  .js .problem[data-anim] .problem-balloon,
  .js .problem[data-anim] .problem-person,
  .js .problem[data-anim] .sec__cap,
  .js .problem[data-anim] .sec__title,
  .js .problem[data-anim] .problem__lead{
    opacity: 1;
    transition: none;
    animation: none;
  }
  .js .problem[data-anim] .problem-balloon{ transform: rotate(var(--tilt)); }
  .js .problem[data-anim] .problem-person,
  .js .problem[data-anim] .sec__cap,
  .js .problem[data-anim] .sec__title,
  .js .problem[data-anim] .problem__lead{ transform: none; }
}

.problem__lead{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 10px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
}
.problem__lead-row img{
  width: 140px;
  height: 34px;
  margin-right: 4px;
  vertical-align: -3px;
}
.problem__lead-row em{ font-size: 36px; }

/* =========================================================
   7. 「日本人」×「英語力」（OUR COMMITMENT・Figma 2020:3820 / SP 2014:2435）
   ========================================================= */
.commit{ background: var(--c-white); }
.commit-eq{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 60px;
}
.commit-eq__box{
  position: relative;
  padding: 32px;
  border: 3px dotted var(--c-orange);
  border-radius: 24px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--c-orange);
  white-space: nowrap;
}
.commit-eq__x{
  width: 39.56px;
  height: 38.71px;
  margin: 0 20px;
}
.commit-eq__box--arrow{ margin-right: 60px; }
.commit-eq__box--arrow::after{
  content: "";
  position: absolute;
  right: -42.5px;
  bottom: -13.5px;
  width: 87px;
  height: 91px;
  background: url("../img/top/commit_arrow.svg") 0 0 / 100% 100% no-repeat;
}
.commit-eq__result{
  position: relative;
  padding: 55px 30px 30px;
  border-radius: 24px;
  background: var(--c-orange);
  color: var(--c-cream);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.commit-eq__badge{
  position: absolute;
  left: 50%;
  top: -14.9px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  border-radius: 50%;
  background: var(--c-black);
  font-size: 16px;
  line-height: 22px;
}
.commit-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  list-style: none;
}
.commit-card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 182px;
  padding: 20px 19px;               /* Figma は枠線を幅に含めないので、左右は 1px 減らして本文幅を Figma の 353.33 に合わせる */
  border: 1px solid var(--c-orange);
  border-radius: 10px;
  background: var(--c-white);
}
.commit-card__title{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -1px;
  color: #000;
}
.commit-card__title::before{
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  background: url("../img/top/icon_check.svg") 0 0 / 100% 100% no-repeat;
}
.commit-card__text{
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-black);
}

/* =========================================================
   8. バイキャリが選ばれる理由（WHY BAIKYARI・Figma 2020:3852 / SP 2014:2489）
   写真は楕円（432×257・-36.45°・黒枠 8px）で切り抜いた 389×329 の透過画像
   ========================================================= */
.reasons{ background: var(--c-cream); }
.reasons__title img{
  width: 140px;
  height: 34px;
  margin-right: 4px;
  vertical-align: -4px;
}
.reason-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  list-style: none;
}
.reason-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding-top: 30px;
}
.reason-card__photo img{
  display: block;
  width: 389px;
  max-width: none;                  /* カード幅 386.67 より少し大きい（Figma どおり左右に 1px ずつはみ出す） */
  height: auto;
}
/* 番号の丸：写真の中心から右へ 112.67px（Figma：カード左端から 306） */
.reason-card__no{
  position: absolute;
  left: calc(50% + 112.67px);
  top: 19.1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--c-cream);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
}
.reason-card__title{
  align-self: stretch;
  padding: 0 16px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--c-black);
  text-align: center;
}
.reason-card__title em{ color: var(--c-orange); }
.reason-card__title small{
  font-size: 14px;
  vertical-align: top;
}
.reasons__note{
  margin-top: 40px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-black);
  text-align: right;
}
.reason-card__text{
  align-self: stretch;
  margin-top: -6px;                 /* 見出しとの間は 24（カードの gap 30 から詰める） */
  padding: 0 16px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-black);
}

/* =========================================================
   9. こんな業種の企業様におすすめです（Figma 4:1778）
   ========================================================= */
.industries{ background: var(--c-white); }
.industry-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  list-style: none;
}
.industry-card{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 182px;
  padding: 100px 20px 20px;
  border: 1px solid var(--c-orange);
  border-radius: 10px;
  background: var(--c-white);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -1px;
  color: var(--c-ink);
  text-align: center;
}
.industry-card__icon{
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
}
.industry-card__icon img{
  width: auto;
  max-height: 72px;
}

/* =========================================================
   10. ご利用の流れ（Figma 4:1905）
   4 枚 × 106 + 30 × 3 = 514
   ========================================================= */
.flow{ background: var(--c-cream); }
.flow-list{
  position: relative;
  width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  list-style: none;
}
/* 点線（Figma Vector 1：4px・8/8 の破線、left 57 / top 76.67 / h 367.5） */
.flow-list::before{
  content: "";
  position: absolute;
  left: 55px;
  top: 76.7px;
  width: 4px;
  height: 371.5px;
  background: url("../img/top/flow_line.svg") 0 0 / 4px 371.5px no-repeat;
}
.flow-item{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 106px;
  padding: 20px 0 20px 140px;
}
.flow-item__badge{
  position: absolute;
  left: 0;
  top: 1.9px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 115px;
  height: 103px;
  font-family: var(--f-step);
  font-size: 14px;
  line-height: 1.18;
  color: var(--c-cream);
  white-space: nowrap;
}
.flow-item__badge::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 86.5px;
  margin: -43.25px 0 0 -66px;
  border: 3px solid var(--c-white);
  border-radius: 50%;
  background: var(--c-black);
  transform: rotate(-37.34deg);
}
.flow-item__badge span{ position: relative; }
.flow-item__title{
  padding-bottom: 10px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -1px;
  color: var(--c-orange);
}
.flow-item__text{
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}

/* =========================================================
   11. 採用に関するお問い合わせ（Figma 4:1206）
   フォーム本体は HubSpot 埋め込み。ここは見出し＋リード＋埋め込み枠のみ
   ========================================================= */
/* 下だけ .sec の padding-block(140px) を打ち消す。.contact__form が自前で
   padding-bottom を持っているため、そのままだと下余白が二重になる。
   common.css より後に読まれるので、同詳細度でもこちらが勝つ（SP 側も同様） */
.contact{
  background: var(--c-white);
  padding-bottom: 0;
}
.contact .sec__title{ padding-bottom: 30px; }
.contact__lead{
  padding-bottom: 30px;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
  text-align: center;
}
/* 800（Figma のフォーム幅）+ iframe 内 body の padding 4px x 2。
   入力欄のフォーカスリングが iframe の overflow:hidden で切れないようにするため */
.contact__form{
  width: 808px;
  margin-inline: auto;
  padding: 80px 0 140px;
}
/* HubSpot の iframe が入るまでの高さ確保（レイアウトシフト防止）。
   is-loading は JS が付けて onFormReady で外す */
.contact__form.is-loading{ min-height: 600px; }
/* 読み込みが終わっても空のまま＝失敗、または JS 無効。器ごと潰して代替導線だけ見せる
   （is-loading 中は除外＝ローディング表示の間は余白を保ってシフトを出さない） */
.contact__form:empty:not(.is-loading){ padding: 0; }
.contact__form iframe{ display: block; width: 100%; border: 0; }
/* HubSpot が読めなかったときの代替導線 */
.contact__fallback{
  margin: 0;
  padding: 40px 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-ink);
  text-align: center;
}
.contact__fallback a{ color: var(--c-orange); text-decoration: underline; }

/* =========================================================
   ★ SP（≤1100px）：Figma SP_TOP 41:776（750 幅）の値を min(calc(N/750*100vw), Npx) で
   ========================================================= */
@media (max-width: 1100px){

  /* --- FV（44:1214）：py 60 / 中身の pb 40 --- */
  .fv__inner{ padding: min(calc(60/750*100vw), 60px) min(calc(20/750*100vw), 20px) 0; }   /* 下の余白は .fv-cap の帯が持つ */
  .fv-main{ padding-bottom: min(calc(40/750*100vw), 40px); }
  .fv-catch{
    gap: 0;
    padding-bottom: min(calc(20/750*100vw), 20px);
    font-size: min(calc(60/750*100vw), 60px);
    line-height: min(calc(55/750*100vw), 55px);
    letter-spacing: 0;
  }
  .fv-catch__line--2{
    /* border-box（ress）なので height はパディング込みの外寸。10+130+10=150（Figma Frame10 実寸） */
    height: min(calc(150/750*100vw), 150px);
    padding: min(calc(10/750*100vw), 10px) 0 min(calc(10/750*100vw), 10px) min(calc(201/750*100vw), 201px);
    /* font-size/line-height は 0 のまま（PC の base ルールを継承。strut を持たせない） */
    letter-spacing: max(calc(-1.8/750*100vw), -1.8px);
  }
  .fv-catch__line--2 .fv-catch__wo{
    font-size: min(calc(70/750*100vw), 70px);
    line-height: min(calc(130/750*100vw), 130px);
  }
  .fv-catch__ph{ display: none; }
  .fv-catch__big{
    font-size: min(calc(100/750*100vw), 100px);
    line-height: min(calc(130/750*100vw), 130px);
    letter-spacing: max(calc(-2/750*100vw), -2px);
  }
  .fv-catch__eigo{
    left: 0;
    top: min(calc(81.6/750*100vw), 81.6px);   /* Figma 44:1291 実寸（catch比29.14%と同値）。200×102.26 の実寸で明示 */
    width: min(calc(200/750*100vw), 200px);
    height: auto;
  }
  .fv-sub{
    font-size: min(calc(22/750*100vw), 22px);
    letter-spacing: max(calc(-0.22/750*100vw), -0.22px);
  }
  .fv-sub img{
    width: min(calc(16/750*100vw), 16px);
    height: min(calc(16/750*100vw), 16px);
  }
  .fv-sub span{ padding: 0 min(calc(10/750*100vw), 10px); }

  .fv-pills{
    gap: min(calc(20/750*100vw), 20px);
    padding: 0 0 min(calc(40/750*100vw), 40px) min(calc(10/750*100vw), 10px);
  }
  .fv-pill{
    width: min(calc(177.3/750*100vw), 177.3px);
    height: min(calc(153.9/750*100vw), 153.9px);
    font-size: min(calc(18/750*100vw), 18px);
  }
  .fv-pill::before{
    width: min(calc(214/750*100vw), 214px);
    height: min(calc(128.4/750*100vw), 128.4px);
    margin: max(calc(-64.2/750*100vw), -64.2px) 0 0 max(calc(-107/750*100vw), -107px);
    border-width: min(calc(2.7/750*100vw), 2.7px);
  }
  .fv-btn{ padding-bottom: min(calc(40/750*100vw), 40px); }
  .fv-pill small{ font-size: min(calc(11/750*100vw), 11px); }
  /* 注記は 3 行あり人物に重なって読めないので、人物の下にクリーム地の帯として敷く（上 20＋3 行 67.5＋下 40 = 127.5） */
  .fv-cap{
    max-width: none;
    margin: min(calc(90/750*100vw), 90px) max(calc(-20/750*100vw), -20px) 0;
    padding: min(calc(20/750*100vw), 20px) min(calc(20/750*100vw), 20px) min(calc(40/750*100vw), 40px);
    background: var(--c-cream);
    font-size: min(calc(15/750*100vw), 15px);
  }

  /* 右側：人物 left 278 / top 36 / w 639、バッジ 240 右下、スプラッシュは目視で合わせた近似値 */
  .fv-splash{
    left: min(calc(384/750*100vw), 384px);
    top: min(calc(60/750*100vw), 60px);
    width: min(calc(716/750*100vw), 716px);
    height: auto;
    transform: rotate(-16deg);
  }
  .fv-person{
    left: min(calc(278/750*100vw), 278px);
    top: min(calc(36/750*100vw), 36px);
    width: min(calc(639/750*100vw), 639px);
  }
  .fv-badge{
    left: auto;
    top: auto;
    right: min(calc(20/750*100vw), 20px);
    bottom: min(calc(134/750*100vw), 134px);   /* 注記の帯（127.5）の上に載せる */
    width: min(calc(240/750*100vw), 240px);
    height: min(calc(240/750*100vw), 240px);
  }

  /* --- 100% 帯（2028:2304）：寸法は PC と同じ N。注記だけ 14 → 20 に上げる --- */
  .only-jp{ padding: min(calc(140/750*100vw), 140px) 0; }
  .only-jp__map{
    width: min(calc(667/750*100vw), 667px);
    height: min(calc(640/750*100vw), 640px);
    margin: max(calc(-320.9/750*100vw), -320.9px) 0 0 max(calc(-334/750*100vw), -334px);
  }
  .only-jp__inner{ padding: 0 min(calc(20/750*100vw), 20px); }
  .only-jp__num{
    height: min(calc(250/750*100vw), 250px);
    line-height: min(calc(183/750*100vw), 183px);
  }
  .only-jp__count{ font-size: min(calc(260/750*100vw), 260px); }
  .only-jp__pct{ font-size: min(calc(72/750*100vw), 72px); }
  .only-jp__spark{
    left: calc(50% - min(calc(289/750*100vw), 289px));
    top: max(calc(-32.9/750*100vw), -32.9px);
    width: min(calc(100/750*100vw), 100px);
    height: min(calc(94.7/750*100vw), 94.7px);
  }
  .only-jp__title{
    padding: 0 min(calc(10/750*100vw), 10px) min(calc(40/750*100vw), 40px);
    font-size: min(calc(54/750*100vw), 54px);
  }
  .only-jp__title em{ font-size: min(calc(76/750*100vw), 76px); }   /* 「バイリンガル人材を」を 1 行に収める */
  .only-jp__note{ font-size: min(calc(18/750*100vw), 18px); }   /* 20 だと 1 行に収まらない */

  /* --- TRACK RECORD（2014:1624）：カードは縦積み（間 60） --- */
  .track-pill{
    margin-bottom: min(calc(90/750*100vw), 90px);
    padding: min(calc(60/750*100vw), 60px) min(calc(30/750*100vw), 30px);
  }
  .track-pill__cap{
    gap: min(calc(16/750*100vw), 16px);
    font-size: min(calc(30/750*100vw), 30px);
  }
  .track-pill__cap img{
    width: min(calc(26/750*100vw), 26px);
    height: min(calc(21/750*100vw), 21px);
    margin: min(calc(5.5/750*100vw), 5.5px) min(calc(3/750*100vw), 3px);
  }
  .track-pill__num{
    padding-bottom: min(calc(30/750*100vw), 30px);
    font-size: min(calc(44/750*100vw), 44px);
  }
  .track-pill__num strong{ font-size: min(calc(96/750*100vw), 96px); }
  .track-pill__text{ font-size: min(2.5vw, 18.75px); }
  .track-cards{
    flex-direction: column;
    align-items: stretch;
    gap: min(calc(60/750*100vw), 60px);
    padding-bottom: min(calc(30/750*100vw), 30px);
  }
  .track-card{
    flex: none;                     /* PC の flex: 1 1 0 のままだと縦積みで高さが 0 になる */
    min-height: min(calc(443/750*100vw), 443px);
    padding: min(calc(60/750*100vw), 60px) min(calc(20/750*100vw), 20px) min(calc(20/750*100vw), 20px);
    border-radius: min(calc(10/750*100vw), 10px);
  }
  .track-card__label{
    padding: min(calc(20/750*100vw), 20px);
    border-radius: min(calc(10/750*100vw), 10px);
    font-size: min(calc(28/750*100vw), 28px);
    letter-spacing: max(calc(-1/750*100vw), -1px);
  }
  .track-row{
    gap: min(calc(10/750*100vw), 10px);
    padding: min(calc(20/750*100vw), 20px) 0;
  }
  .track-row__label{
    gap: min(calc(10/750*100vw), 10px);
    font-size: min(calc(28/750*100vw), 28px);
    letter-spacing: max(calc(-1/750*100vw), -1px);
  }
  .track-row__label::before{
    width: min(calc(40/750*100vw), 40px);
    height: min(calc(40/750*100vw), 40px);
  }
  .track-row__label small{ font-size: min(calc(18/750*100vw), 18px); }
  .track-row__val{
    font-size: min(calc(26/750*100vw), 26px);
    letter-spacing: max(calc(-1/750*100vw), -1px);
  }
  .track-row__val b{ font-size: min(calc(32/750*100vw), 32px); }
  .track-row--top .track-row__val b{ font-size: min(calc(48/750*100vw), 48px); }
  .track-pill__num small{ font-size: min(calc(20/750*100vw), 20px); }
  .track__note{ font-size: min(calc(19/750*100vw), 19px); }
  .candidates__note{
    margin-top: min(calc(30/750*100vw), 30px);
    padding-inline: min(calc(20/750*100vw), 20px);
    font-size: min(calc(19/750*100vw), 19px);
    text-align: left;
  }   /* 20 だと 2 行目が「経験あ／り」は」で折り返す */

  /* --- CANDIDATES（2022:5014）：大カードは横スクロール＋矢印、小カードは PC と同じ自動横流れ --- */
  .cand-feature__list{
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: min(calc(30/750*100vw), 30px);
    margin-inline: max(calc(-20/750*100vw), -20px);
    padding-inline: min(calc(20/750*100vw), 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: min(calc(20/750*100vw), 20px);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .cand-feature__list::-webkit-scrollbar{ display: none; }
  .cand-card{
    gap: min(calc(8/750*100vw), 8px);
    border-radius: min(calc(56/750*100vw), 56px) min(calc(16/750*100vw), 16px) min(calc(16/750*100vw), 16px) min(calc(16/750*100vw), 16px);
  }
  .cand-card__job{ gap: min(calc(8/750*100vw), 8px); }
  .cand-card__tags{ gap: min(calc(4/750*100vw), 4px); }
  .cand-card__tags li{
    padding: 0 min(calc(10/750*100vw), 10px);
    line-height: min(calc(32/750*100vw), 32px);
  }
  /* 幅は Figma どおり 360：20 + 360 + 30 で 2 枚目が 410 から始まり、右端が 20 だけ切れる。
     中の文字も Figma の数値のまま（360 幅に収まるように組まれているため、上げると折り返しが崩れる） */
  .cand-card--l{
    flex: none;
    width: min(calc(360/750*100vw), 360px);
    min-height: min(calc(194/750*100vw), 194px);
    padding: min(calc(40/750*100vw), 40px) min(calc(32/750*100vw), 32px) min(calc(32/750*100vw), 32px);
    scroll-snap-align: start;
  }
  .cand-card--l .cand-card__score{
    gap: min(calc(4/750*100vw), 4px);
    font-size: min(calc(20/750*100vw), 20px);
    letter-spacing: max(calc(-1/750*100vw), -1px);
  }
  .cand-card--l .cand-card__score b{ font-size: min(calc(36/750*100vw), 36px); }
  .cand-card--l .cand-card__job{
    min-height: min(calc(60/750*100vw), 60px);
    margin-bottom: min(calc(6/750*100vw), 6px);
    font-size: min(calc(24/750*100vw), 24px);
    line-height: min(calc(30/750*100vw), 30px);
  }
  .cand-card--l .cand-card__job::before{
    width: min(calc(40/750*100vw), 40px);
    height: min(calc(40/750*100vw), 40px);
  }
  .cand-card--l .cand-card__tags li{
    font-size: min(calc(16/750*100vw), 16px);
    line-height: min(calc(24/750*100vw), 24px);
  }
  /* 矢印：Figma は 48。タップしやすいように 80（375 幅で 40px）にした */
  .cand-feature__nav{
    display: flex;
    justify-content: center;
    gap: min(calc(24/750*100vw), 24px);
    padding: min(calc(32/750*100vw), 32px) 0 min(calc(34/750*100vw), 34px);
  }
  .cand-feature__btn{
    display: block;
    width: min(calc(80/750*100vw), 80px);
    height: min(calc(80/750*100vw), 80px);
    border-radius: 50%;
  }
  .cand-feature__btn img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .cand-feature__btn--prev img{ transform: scaleX(-1); }
  .cand-marquee{
    gap: min(calc(30/750*100vw), 30px);
    margin-top: min(calc(30/750*100vw), 30px);
  }
  .cand-marquee__track{ padding-left: min(calc(20/750*100vw), 20px); }
  .cand-marquee__track > li{ margin-right: min(calc(30/750*100vw), 30px); }
  .cand-card--s{
    width: min(calc(380/750*100vw), 380px);
    min-height: min(calc(180/750*100vw), 180px);
    padding: min(calc(36/750*100vw), 36px) min(calc(30/750*100vw), 30px) min(calc(22/750*100vw), 22px);
  }
  .cand-card--s .cand-card__score{
    gap: min(calc(2/750*100vw), 2px);
    height: auto;
    font-size: min(calc(18/750*100vw), 18px);
    line-height: 1.3;
  }
  .cand-card--s .cand-card__score b{ font-size: min(calc(24/750*100vw), 24px); }
  .cand-card--s .cand-card__job{
    min-height: min(calc(52/750*100vw), 52px);
    font-size: min(calc(24/750*100vw), 24px);
    letter-spacing: max(calc(-1/750*100vw), -1px);
  }
  .cand-card--s .cand-card__job::before{
    width: min(calc(34/750*100vw), 34px);
    height: min(calc(34/750*100vw), 34px);
  }
  .cand-card--s .cand-card__tags li{ font-size: min(calc(16/750*100vw), 16px); }

  /* --- 比較表（2014:2213）：列幅 160 / 可変 / 150 / 150（AUN SP スクショ実測） --- */
  .compare-table th,
  .compare-table td{
    padding: min(calc(20/750*100vw), 20px) min(calc(12/750*100vw), 12px);
    font-size: min(calc(22/750*100vw), 22px);
  }
  .compare-table tbody th{ font-size: min(calc(20/750*100vw), 20px); }
  .compare-table__text{ font-size: min(calc(18/750*100vw), 18px); }
  .compare__note{
    margin-top: min(calc(20/750*100vw), 20px);
    font-size: min(calc(19/750*100vw), 19px);
    text-align: left;
  }   /* 「ご紹介する人材」を 1 行に収める */
  .compare-table thead > tr > :first-child{ width: min(calc(170/750*100vw), 170px); }
  .compare-table thead > tr > :nth-child(3),
  .compare-table thead > tr > :nth-child(4){ width: min(calc(140/750*100vw), 140px); }
  .compare-table thead th{
    padding-block: min(calc(10/750*100vw), 10px);
    font-size: min(calc(22/750*100vw), 22px);
    letter-spacing: max(calc(-1/750*100vw), -1px);
  }
  .compare-table thead .is-us{ padding-block: min(calc(20/750*100vw), 20px); }
  .compare-table thead .is-us img{
    width: min(calc(180/750*100vw), 180px);
    height: min(calc(43.7/750*100vw), 43.7px);
  }
  .compare-table .is-us{
    font-size: min(calc(24/750*100vw), 24px);
    letter-spacing: max(calc(-1/750*100vw), -1px);
  }

  /* --- お悩み（2023:5497）：吹き出しは左右 2 列 × 2 段＋上中央、その下に人物。吹き出しは図版扱いで Figma の N のまま --- */
  .problem{ padding: min(calc(80/750*100vw), 80px) 0; }
  .problem__inner{
    width: 100%;
    max-width: 750px;
    padding: 0 min(calc(20/750*100vw), 20px);
  }
  .problem-stage{ padding: min(calc(220/750*100vw), 220px) 0 min(calc(60/750*100vw), 60px); }
  .problem-balloons{
    position: static;
    grid-template-columns: repeat(2, min(calc(264/750*100vw), 264px));
    grid-template-rows: repeat(2, min(calc(184.39/750*100vw), 184.39px));
    justify-content: space-between;
  }
  .problem-balloon{
    width: min(calc(264/750*100vw), 264px);
    height: min(calc(160/750*100vw), 160px);
    margin: 0;
    align-self: center;
  }
  .problem-balloon--l1,
  .problem-balloon--l2,
  .problem-balloon--r1,
  .problem-balloon--r2{ margin: 0; align-self: center; }
  .problem-balloon--r{ grid-column: 2; }
  .problem-balloon p{
    left: min(calc(38/750*100vw), 38px);
    width: min(calc(180/750*100vw), 180px);
    height: min(calc(136/750*100vw), 136px);
    padding-right: min(calc(8/750*100vw), 8px);
    font-size: min(calc(20/750*100vw), 20px);
    letter-spacing: max(calc(-1/750*100vw), -1px);
  }
  .problem-balloon span{
    padding-bottom: min(calc(3/750*100vw), 3px);
    background-size: 100% min(calc(2/750*100vw), 2px);
  }
  .problem-balloon--r p{
    left: min(calc(42/750*100vw), 42px);
    padding-right: 0;
  }
  .problem-balloon--top{
    top: min(calc(11.14/750*100vw), 11.14px);
    height: min(calc(190/750*100vw), 190px);
    margin-left: max(calc(-132/750*100vw), -132px);
  }
  .problem-balloon--top p{
    left: min(calc(36.95/750*100vw), 36.95px);
    top: min(calc(11.95/750*100vw), 11.95px);
    width: min(calc(191/750*100vw), 191px);
    height: min(calc(135/750*100vw), 135px);
    padding-right: 0;
  }
  /* 人物：SP は上を約 62px 削った 302×378（Figma SP のマスク高さ） */
  .problem-people{ gap: 0; }   /* 画像の矩形の左右に透明部分があるので、間隔なしで並べる */
  .problem-person{
    display: block;
    overflow: hidden;
    width: min(calc(302/750*100vw), 302px);
    height: min(calc(378/750*100vw), 378px);
  }
  .problem-person img{
    width: 100%;
    height: auto;
    margin-top: max(calc(-62/750*100vw), -62px);
  }
  .problem__lead{
    gap: min(calc(20/750*100vw), 20px);
    padding: 0 min(calc(10/750*100vw), 10px);
    font-size: min(calc(24/750*100vw), 24px);
  }
  .problem__lead-row img{
    width: min(calc(140/750*100vw), 140px);
    height: min(calc(34/750*100vw), 34px);
    margin-right: min(calc(4/750*100vw), 4px);
    vertical-align: max(calc(-3/750*100vw), -3px);
  }
  .problem__lead-row em{ font-size: min(calc(36/750*100vw), 36px); }

  /* --- COMMITMENT（2014:2435）：図は PC と同じ並び、カードは縦積み --- */
  .commit .sec__title{ font-size: min(calc(38/750*100vw), 38px); }   /* 共通の 42 だと 2 行目の「す」だけ折り返す */
  .commit-eq{ padding-bottom: min(calc(60/750*100vw), 60px); }
  .commit-eq__box{
    padding: min(calc(32/750*100vw), 32px);
    border-width: min(calc(3/750*100vw), 3px);
    border-radius: min(calc(24/750*100vw), 24px);
    font-size: min(calc(24/750*100vw), 24px);
  }
  .commit-eq__x{
    width: min(calc(39.56/750*100vw), 39.56px);
    height: min(calc(38.71/750*100vw), 38.71px);
    margin: 0 min(calc(20/750*100vw), 20px);
  }
  .commit-eq__box--arrow{ margin-right: min(calc(60/750*100vw), 60px); }
  .commit-eq__box--arrow::after{
    right: max(calc(-42.5/750*100vw), -42.5px);
    bottom: max(calc(-13.5/750*100vw), -13.5px);
    width: min(calc(87/750*100vw), 87px);
    height: min(calc(91/750*100vw), 91px);
  }
  .commit-eq__result{
    padding: min(calc(55/750*100vw), 55px) min(calc(30/750*100vw), 30px) min(calc(30/750*100vw), 30px);
    border-radius: min(calc(24/750*100vw), 24px);
    font-size: min(calc(24/750*100vw), 24px);
  }
  .commit-eq__badge{
    top: max(calc(-14.9/750*100vw), -14.9px);
    width: min(calc(60/750*100vw), 60px);
    height: min(calc(60/750*100vw), 60px);
    margin-left: max(calc(-30/750*100vw), -30px);
    font-size: min(calc(18/750*100vw), 18px);
    line-height: 1.2;
  }
  .commit-list{
    grid-template-columns: 1fr;
    gap: min(calc(30/750*100vw), 30px);
  }
  .commit-card{
    min-height: 0;
    padding: min(calc(30/750*100vw), 30px) min(calc(20/750*100vw), 20px);
    border-radius: min(calc(10/750*100vw), 10px);
  }
  .commit-card__title{
    gap: min(calc(10/750*100vw), 10px);
    padding-bottom: min(calc(20/750*100vw), 20px);
    font-size: min(calc(30/750*100vw), 30px);
    letter-spacing: max(calc(-1/750*100vw), -1px);
  }
  .commit-card__title::before{
    width: min(calc(40/750*100vw), 40px);
    height: min(calc(40/750*100vw), 40px);
  }
  .commit-card__text{ font-size: min(calc(24/750*100vw), 24px); }

  /* --- 選ばれる理由（2014:2489）：縦積み。写真と番号の位置関係は PC と同じ --- */
  .reasons__title img{
    width: min(calc(140/750*100vw), 140px);
    height: min(calc(34/750*100vw), 34px);
    margin-right: min(calc(4/750*100vw), 4px);
    vertical-align: max(calc(-4/750*100vw), -4px);
  }
  .reason-list{
    grid-template-columns: 1fr;
    gap: min(calc(80/750*100vw), 80px);
  }
  .reason-card{
    gap: min(calc(30/750*100vw), 30px);
    padding-top: min(calc(30/750*100vw), 30px);
  }
  .reason-card__photo img{ width: min(calc(389/750*100vw), 389px); }
  .reason-card__no{
    left: calc(50% + min(calc(112.67/750*100vw), 112.67px));
    top: min(calc(19.1/750*100vw), 19.1px);
    width: min(calc(60/750*100vw), 60px);
    height: min(calc(60/750*100vw), 60px);
    font-size: min(calc(36/750*100vw), 36px);
  }
  .reason-card__title{
    padding: 0;
    font-size: min(calc(34/750*100vw), 34px);
  }
  .reason-card__title small{ font-size: min(calc(20/750*100vw), 20px); }
  .reasons__note{
    margin-top: min(calc(60/750*100vw), 60px);
    font-size: min(calc(19/750*100vw), 19px);
    text-align: left;
  }
  .reason-card__text{
    margin-top: max(calc(-6/750*100vw), -6px);
    padding: 0;
    font-size: min(calc(24/750*100vw), 24px);
  }

  /* --- おすすめ業種：SP は 2 列（3 列だと文字が潰れるため。Figma SP は PC を縮めた状態） --- */
  .industry-list{
    grid-template-columns: repeat(2, 1fr);
    gap: min(calc(30/750*100vw), 30px);
  }
  .industry-card{
    height: auto;
    min-height: min(calc(182/750*100vw), 182px);
    padding: min(calc(100/750*100vw), 100px) min(calc(20/750*100vw), 20px) min(calc(20/750*100vw), 20px);
    border-radius: min(calc(10/750*100vw), 10px);
    font-size: min(calc(24/750*100vw), 24px);
    letter-spacing: max(calc(-1/750*100vw), -1px);
  }
  .industry-card__icon{
    top: min(calc(22/750*100vw), 22px);
    height: min(calc(72/750*100vw), 72px);
  }
  .industry-card__icon img{ max-height: min(calc(72/750*100vw), 72px); }

  /* --- ご利用の流れ：幅追従。バッジ・余白は 750 基準の値をそのまま --- */
  .flow-list{
    width: 100%;
    gap: min(calc(30/750*100vw), 30px);
  }
  .flow-list::before{
    left: min(calc(55/750*100vw), 55px);
    top: min(calc(76.7/750*100vw), 76.7px);
    width: min(calc(4/750*100vw), 4px);
    height: auto;
    bottom: min(calc(60/750*100vw), 60px);
    background-size: min(calc(4/750*100vw), 4px) auto;
    background-repeat: repeat-y;
  }
  .flow-item{
    height: auto;
    min-height: min(calc(106/750*100vw), 106px);
    padding: min(calc(20/750*100vw), 20px) 0 min(calc(20/750*100vw), 20px) min(calc(140/750*100vw), 140px);
  }
  .flow-item__badge{
    top: min(calc(1.9/750*100vw), 1.9px);
    width: min(calc(115/750*100vw), 115px);
    height: min(calc(103/750*100vw), 103px);
    font-size: min(calc(20/750*100vw), 20px);
  }
  .flow-item__badge::before{
    width: min(calc(132/750*100vw), 132px);
    height: min(calc(86.5/750*100vw), 86.5px);
    margin: max(calc(-43.25/750*100vw), -43.25px) 0 0 max(calc(-66/750*100vw), -66px);
    border-width: min(calc(3/750*100vw), 3px);
  }
  .flow-item__title{
    padding-bottom: min(calc(10/750*100vw), 10px);
    font-size: min(calc(34/750*100vw), 34px);
    letter-spacing: max(calc(-1/750*100vw), -1px);
  }
  .flow-item__text{ font-size: min(calc(28/750*100vw), 28px); }

  /* --- お問い合わせ --- */
  .contact .sec__title{ padding-bottom: min(calc(30/750*100vw), 30px); }
  .contact__lead{
    padding-bottom: min(calc(30/750*100vw), 30px);
    font-size: min(calc(24/750*100vw), 24px);
  }
  .contact__form{
    /* PC と同じ理由で左右に 4px ずつ食い出させ、入力欄の端を器の端に合わせる */
    width: calc(100% + 8px);
    margin-inline: -4px;
    padding: min(calc(80/750*100vw), 80px) 0 min(calc(140/750*100vw), 140px);
  }
  .contact__form.is-loading{ min-height: min(calc(600/750*100vw), 600px); }
  .contact__fallback{
    padding: min(calc(80/750*100vw), 80px) 0;
    font-size: min(calc(24/750*100vw), 24px);
  }
}