/* ==== css/base.css ==== */
/* base.css : 変数・reset・共通部品・見出し(sec-head)・ボタン・フォーカス・ph の強調（担当: 土台）。
   各ブロックの CSS は、自分のブロックの接頭辞か section の id で始める（SPEC §5）。 */

:root {
  --c-blue: #0068B7;
  --c-blue-2: #2672B8;
  --c-blue-pale-1: #CFE0F1;
  --c-blue-pale-2: #A9CBEA;
  --c-navy: #0B2E52;
  --c-orange: #EA5504;
  --c-orange-dark: #C24400;
  --c-line: #06C755;
  --c-text: #1A2230;
  --c-text-2: #3D4757;
  --c-text-3: #5A6473;
  --c-bg-soft: #F4F7FB;
  --c-bg-gray: #E6EAF0;
  --c-thumb: #DCE7F3;
  --c-thumb-text: #2B5A86;
  --c-border: #E3E8EF;
  --c-border-2: #D7DFEA;
  --c-border-3: #C9D2DE;
  --c-border-dash: #B5BEC9;
  --c-arrow-gray: #9AA4B2;
  --c-navy-lead: #D5E3F1;
  --c-navy-sub: #9CC3E6;
  --c-navy-note: #B7CCE2;
  --c-navy-line: rgba(255, 255, 255, .35);
  --c-blue-line: rgba(255, 255, 255, .30);
  --fv-grad: linear-gradient(180deg, #FFFFFF 0%, #E6EEF8 100%);
  --ff-noto: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-zen: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;

  --pad: clamp(40px, 6.6667vw, 96px);
  --content: min(1248px, 100% - var(--pad) * 2);
}
@media (max-width: 899.98px) {
  :root { --pad: 24px; --content: min(600px, 100% - 48px); }
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--ff-noto);
  color: var(--c-text);
  background: #fff;
  /* 小書きの仮名（っ・ゃ など）を行頭に置かない。Figma と同じ。全角の約物は詰めない */
  line-break: strict;
  text-spacing-trim: space-all;
}

/* text-wrap: pretty / balance は使わない。Figma は行末まで詰めて折るので、折り位置が Figma とずれる（10/5 textcheck.py で7か所） */

/* ---- PC/SP の出し分け（切り替えはここ1か所） ---- */
@media (min-width: 900px) {
  .sp-only { display: none !important; }
  br.sp-br { display: none; }
}
@media (max-width: 899.98px) {
  .pc-only { display: none !important; }
  br.pc-br { display: none; }
}

/* ---- 共通 ---- */
.container { width: var(--content); margin-inline: auto; }
/* 数字と単位・語の途中で行が割れない（build.py が本文の「数字＋単位」を自動で包む） */
.nw { white-space: nowrap; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 8px; top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: #fff;
  color: var(--c-text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--c-blue);
}
.skip-link:focus, .skip-link:focus-visible { top: 8px; }
.note:empty { display: none; }

/* ---- ボタンとリンク（大きさは各ブロックの CSS で決める） ---- */
.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 700;
  transition: background-color .2s, color .2s, opacity .2s, box-shadow .2s;
}
.btn--line { background: var(--c-line); color: #fff; }
.btn--line:hover { opacity: .85; }
.btn--mynavi { background: #fff; color: var(--c-blue); box-shadow: inset 0 0 0 2px var(--c-blue); }
.btn--mynavi:hover { background: var(--c-blue); color: #fff; }
.btn--mynavi-solid { background: var(--c-orange-dark); color: #fff; }
.btn--mynavi-solid:hover { opacity: .85; }
.text-link { color: inherit; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---- フォーカス ---- */
:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; }
.is-navy :focus-visible { outline-color: #fff; }
/* ボタンの枠線は外側（offset 3px）に出るので、白地の上では青、紺の地の上では白にする（ボタン自体の色には合わせない） */

/* ---- セクション見出し .sec-head（SPEC §4.3） ---- */
.sec-head { position: relative; }
.sec-label {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16.8px;
  letter-spacing: 2.8px;
  color: var(--c-blue);
}
.sec-label::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--c-orange);
}
.sec-label--nodot { padding-left: 0; }
.sec-label--nodot::before { display: none; }
.sec-title {
  margin-top: 19.2px;
  font-family: var(--ff-zen);
  font-size: 40px;
  font-weight: 900;
  line-height: 56px;
  color: var(--c-text);
}
.sec-lead {
  margin-top: 19px;
  font-size: 17px;
  font-weight: 400;
  line-height: 32px;
  color: var(--c-text-2);
}
/* 大（2段組）: 03, 04, 06b, 08。HTML は .sec-head__main（ラベル＋見出し）と .sec-lead（右の列）の2つ */
.sec-head--l .sec-title { margin-top: 23.2px; font-size: 48px; line-height: 67px; }
.sec-head--l .sec-lead { margin-top: 0; line-height: 34px; }
@media (min-width: 900px) {
  .sec-head--l {
    display: grid;
    grid-template-columns: minmax(0, 672fr) minmax(0, 576fr);
    align-items: end;
  }
}
/* 中間幅の2段組（--l）。右の列が狭いと、リードが「…成／長できます。」のように1〜2文字だけ折れる。
   900〜1199 は見出しの下にリードを全幅で置く。1200〜1439 は2段組のまま、右の列に最長の行（29字）が収まる大きさにする（1440 では 17px のまま） */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .sec-head--l { display: block; }
  .sec-head--l .sec-lead { margin-top: 20px; }
}
@media (min-width: 1200px) {
  .sec-head--l .sec-lead { font-size: min(17px, 1.37vw); }
}
/* 中央: 02。点とラベルの組を中央にそろえる（見出し・リードの間隔は 02 側で決める） */
.sec-head--center { text-align: center; }
/* 点を除いた文字が中央に来るよう、点と同じ幅を右にも取る（Figma は文字が中央で、点は文字の左 22px / SP 16px） */
.sec-head--center .sec-label { display: block; width: fit-content; margin-inline: auto; padding-right: 22px; }
/* 紺の地（04・12）。section に .is-navy を付ける */
.is-navy .sec-label { color: var(--c-navy-sub); }
.is-navy .sec-title { color: #fff; }
.is-navy .sec-lead { color: var(--c-navy-lead); }
@media (max-width: 899.98px) {
  .sec-label { padding-left: 16px; font-size: 12px; line-height: 14.4px; letter-spacing: 2.4px; }
  .sec-label::before { width: 8px; height: 8px; margin-top: -4px; }
  .sec-label--nodot { padding-left: 0; }
  .sec-title { margin-top: 13.6px; font-size: 26px; line-height: 36px; }
  .sec-lead { margin-top: 14px; font-size: 14px; line-height: 27px; }
  .sec-head--l .sec-title { margin-top: 14.6px; font-size: 28px; line-height: 41px; }
  .sec-head--l .sec-lead { margin-top: 16px; line-height: 27px; }
  .sec-head--center .sec-label { padding-right: 16px; }
}

/* ---- ?ph=1 で仮の値を強調（SPEC §7.4。?ph=1 が無いときは何も変わらない） ---- */
.ph-on [data-ph] { background: #FFF59D; outline: 2px dashed #E0A800; outline-offset: 2px; }
.ph-on img[data-ph], .ph-on picture[data-ph], .ph-on figure[data-ph] { background: none; }
/* 黄色地の上は、紺・青など淡い文字の地でも常に濃い文字にする */
.ph-on [data-ph] { color: #1A2230; }
/* ボタンの上は文字色を変えない（緑・橙の地に白文字のボタンは地の色を保ち、破線の枠だけで仮と示す） */
.ph-on a.btn--line[data-ph] { background: var(--c-line); color: #fff; }
.ph-on a.btn--mynavi-solid[data-ph] { background: var(--c-orange-dark); color: #fff; }
.ph-badge {
  position: fixed;
  left: 8px; bottom: 8px; /* 左上はヘッダーのロゴと重なるので、PC は左下に置く */
  z-index: 200;
  padding: 6px 12px;
  border: 0;
  border-radius: 4px;
  background: #E0A800;
  color: #1A2230;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
/* SP は左上がロゴと重なり、下は固定バー（高さ 85px）と重なるので、バーのすぐ上の左に置く */
@media (max-width: 899.98px) {
  .ph-badge { bottom: calc(93px + env(safe-area-inset-bottom)); }
}

/* ==== css/layout.css ==== */
/* layout.css : ヘッダー・SP メニュー・SP 固定バー・フッター（担当: 土台） */

/* ---- ヘッダー（01 の一部。追従しない） ---- */
.site-header {
  position: relative;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  height: 88px;
}
.site-header__inner {
  display: flex;
  align-items: flex-start;
  height: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(24px, 3.889vw, 56px);
}
.site-header__brand { display: flex; align-items: flex-start; padding-top: 35px; }
.site-header__logo { display: block; line-height: 0; }
.site-header__logo img { width: 99.7px; height: auto; }
.site-header__recruit {
  margin: 7px 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 15.6px;
  letter-spacing: 3.1px;
  color: var(--c-text);
}
.site-header__right { display: flex; align-items: flex-start; gap: 40px; margin-left: auto; }
.site-header__nav ul { display: flex; gap: 32px; padding-top: 34px; }
.site-header__nav a {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  color: var(--c-text);
  text-decoration: none;
  transition: color .2s;
}
.site-header__nav a:hover { color: var(--c-blue); }
.site-header__line {
  justify-content: center;
  width: 139px; height: 48px;
  margin-top: 20px;
  border-radius: 24px;
  font-size: 15px;
  letter-spacing: .5px;
  line-height: 18px;
}
.site-header__menu-btn { display: none; }
.site-header__ico-close { display: none; }
.site-header__menu-btn[aria-expanded="true"] .site-header__ico-open { display: none; }
.site-header__menu-btn[aria-expanded="true"] .site-header__ico-close { display: block; }
.sp-menu { display: none; }

@media (max-width: 899.98px) {
  .site-header { height: 60px; }
  .site-header__inner { padding-inline: max(20px, calc((100% - 600px) / 2)); } /* 600〜899 は中身（幅600）の左右に合わせる */
  .site-header__brand { padding-top: 23.7px; }
  .site-header__logo img { width: 74.8px; }
  .site-header__recruit { margin: 4.3px 0 0 10px; font-size: 11px; line-height: 13.2px; letter-spacing: 2.6px; }
  .site-header__right { display: block; }
  .site-header__nav, .site-header__line { display: none; }
  .site-header__menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-text);
    cursor: pointer;
  }
  .sp-menu {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--c-border);
  }
  .sp-menu[hidden] { display: none; }
  .sp-menu:not([hidden]) { display: block; }
  .sp-menu__nav a {
    display: flex; align-items: center;
    min-height: 48px;
    padding: 0 24px;
    border-bottom: 1px solid var(--c-border);
    font-size: 15px;
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
  }
  .sp-menu__nav a:hover { color: var(--c-blue); }
  .sp-menu__ctas { display: grid; gap: 12px; padding: 24px; }
  .sp-menu__ctas .btn { justify-content: center; height: 48px; border-radius: 24px; font-size: 15px; }
}

/* ---- SP 固定バー（SP 01 の一部。12 エントリー／フッターが見えているあいだは隠す） ---- */
.sp-bar { display: none; }
@media (max-width: 899.98px) {
  .sp-bar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    height: calc(85px + env(safe-area-inset-bottom));
    padding: 12px max(20px, calc((100% - 600px) / 2)) 0;
    background: #fff;
    border-top: 1px solid var(--c-border);
    transition: opacity .2s, visibility .2s;
  }
  .sp-bar.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
  .sp-bar__btn {
    justify-content: center;
    width: 100%; height: 52px;
    border-radius: 26px;
    font-size: 16px;
    letter-spacing: 1.9px;
    line-height: 19.2px;
  }
  body { padding-bottom: calc(85px + env(safe-area-inset-bottom)); }
}

/* ---- フッター（12b） ---- */
.site-footer { background: #fff; padding: 41px 0 42px; }
.site-footer__inner { display: flex; justify-content: space-between; }
.site-footer p { font-size: 12px; line-height: 14.4px; color: var(--c-text-3); }
.site-footer p:last-child { margin-right: 7px; text-align: right; }
@media (max-width: 899.98px) {
  .site-footer { padding: 33px 0 34px; }
  .site-footer__inner { display: block; }
  .site-footer p:last-child { margin: 8.6px 0 0; text-align: left; }
}

/* ==== css/sections/01-fv.css ==== */
/* 01 ファーストビュー（SPEC §5.1）。ヘッダー・SP固定バーは土台 */
.fv {
  background: var(--fv-grad);
  overflow: hidden;
  overflow: clip;
  text-align: center;
  padding-top: 40px;
}
.fv__inner { display: flex; flex-direction: column; align-items: center; }
.fv__eyebrow {
  font-size: 14px; font-weight: 700; line-height: 16.8px; letter-spacing: 2.8px;
  color: var(--c-blue);
}
.fv__title {
  margin-top: 15.2px;
  font-family: var(--ff-zen);
  font-size: clamp(40px, 3.889vw, 56px);
  font-weight: 900;
  line-height: 1.357;
  letter-spacing: .018em;
  color: var(--c-text);
}
.fv__em { color: var(--c-blue); }
.fv__lead {
  margin-top: 10px;
  font-size: 17px; font-weight: 400; line-height: 30px;
  color: var(--c-text-2);
}
.fv__pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fv__pills li {
  display: flex; align-items: center;
  height: 28px; padding: 0 10.4px;
  border: 1px solid var(--c-blue); border-radius: 14px;
  background: #fff;
  font-size: 13px; font-weight: 700; line-height: 15.6px;
  color: var(--c-blue);
}
.fv__ctas { display: flex; justify-content: center; gap: 24px; margin-top: 14px; }
.fv__btn {
  justify-content: space-between;
  width: 220px; height: 56px; padding: 0 24px;
  border-radius: 0;
  font-size: 16px; line-height: 19.2px;
}
.fv__btn-icon { display: block; width: 20px; height: 20px; line-height: 0; }
.fv__lineup {
  position: relative;
  width: 100%;
  aspect-ratio: 1250 / 484;
  margin-top: 28px;
  overflow: hidden;
}
.fv__lineup-box { position: relative; width: 100%; aspect-ratio: 1250 / 520; }
.fv__person { position: absolute; top: 0; width: 27.69%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 50%; }
.fv__person--1 { left: 0; }
.fv__person--2 { left: 11.22%; }
.fv__person--3 { left: 25.06%; }
.fv__person--4 { left: 35.18%; }
.fv__person--5 { left: 49.11%; }
.fv__person--6 { left: 61%; }
.fv__person--7 { left: 72.31%; }

@media (max-width: 899.98px) {
  .fv { padding-top: 30px; padding-bottom: 88px; }
  .fv__eyebrow { font-size: 11px; line-height: 13.2px; letter-spacing: 2.2px; }
  .fv__title { margin-top: 14.8px; font-size: 32px; line-height: 44px; letter-spacing: 0; }
  .fv__lead { margin-top: 16px; font-size: 13px; line-height: 22px; }
  .fv__pills { margin-top: 16px; }
  .fv__pills li { height: 24px; padding: 0 9px; border-radius: 12px; font-size: 11px; line-height: 13.2px; }
  /* 390 では 166×2＋10＝342 で中身の幅にちょうど収まる。それより狭いときは2つで中身の幅を分け合う */
  .fv__ctas { align-self: stretch; gap: 10px; margin-top: 20px; }
  .fv__btn { justify-content: center; flex: 1 1 0; width: auto; max-width: 166px; height: 48px; padding: 0; font-size: 14px; line-height: 16.8px; }
  .fv__lineup { width: 793px; max-width: none; height: 330px; aspect-ratio: auto; margin-top: 52px; margin-left: calc(50% - 396.5px); align-self: flex-start; }
  .fv__lineup-box { width: 793px; height: 330px; aspect-ratio: auto; }
}

/* 10/15 グループ名を正式名にして長くなったので、狭い画面では1行に収まるよう文字を小さくする */
@media (max-width: 374.98px) {
  .fv__pills li { padding: 0 7px; font-size: 10px; white-space: nowrap; }
}

/* ==== css/sections/02-message.css ==== */
/* 02 メッセージ（SPEC §5.2） */
.msg { padding: 120px 0 106px; background: #fff; text-align: center; }
.msg__title { margin-top: 25.2px; font-size: 52px; line-height: 72px; }
.msg__body {
  margin-top: 56px;
  font-size: 18px; font-weight: 400; line-height: 40px;
  color: var(--c-text-2);
}
.msg__rule { width: 48px; height: 2px; margin: 32px auto 0; background: var(--c-orange); }
.msg__closing {
  margin-top: 26px;
  font-family: var(--ff-zen);
  font-size: 26px; font-weight: 700; line-height: 42px;
  color: var(--c-blue);
}
/* 動画の枠（10/28 追加・Figma に無い）。押すと別タブで再生（06 と同じ動き） */
.msg__movie { max-width: 880px; margin: 64px auto 0; }
.msg__movie-link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 7; /* 動画の上下の黒帯を除いた絵の比率 */
  overflow: hidden;
  background: var(--c-thumb);
  color: #fff;
  text-decoration: none;
}
.msg__movie-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .4s; }
.msg__movie-link:hover .msg__movie-img { transform: scale(1.02); }
.msg__movie-btn {
  position: absolute;
  left: 24px; bottom: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px;
  padding: 0 24px 0 20px;
  border-radius: 24px;
  background: var(--c-blue);
  font-size: 15px; font-weight: 700; line-height: 1;
  transition: opacity .2s;
}
.msg__movie-link:hover .msg__movie-btn { opacity: .85; }
@media (max-width: 899.98px) {
  .msg { padding: 64px 0 88px; }
  .msg__title { margin-top: 17.6px; font-size: 30px; line-height: 44px; }
  .msg__body { margin-top: 26px; font-size: 15px; line-height: 30px; }
  .msg__rule { width: 40px; margin-top: 24px; }
  .msg__closing { margin-top: 22px; font-size: 19px; line-height: 32px; }
  .msg__movie { margin-top: 36px; }
  .msg__movie-link { aspect-ratio: 16 / 9; }
  .msg__movie-img { object-position: 52% 50%; }
  .msg__movie-btn { left: 12px; bottom: 12px; height: 38px; padding: 0 16px 0 13px; border-radius: 19px; gap: 6px; font-size: 13px; }
}

/* ==== css/sections/03-about.css ==== */
/* 03 MRFとは（SPEC §5.3）。図の矢印は CSS で描く（幅が伸び縮みするため） */
.about { padding: 120px 0 169px; background: var(--c-bg-soft); }

/* ---- 図（PC: 5列×2行） ---- */
.about__diagram {
  display: grid;
  grid-template-columns: minmax(0, 240fr) minmax(0, 144fr) minmax(0, 320fr) minmax(0, 144fr) minmax(0, 400fr);
  grid-template-rows: minmax(96px, auto) minmax(96px, auto);
  row-gap: 48px;
  margin-top: 168px;
}
.about__box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 96px;
  text-align: center;
}
.about__l, .about .pc-only, .about .sp-only { display: block; }
/* 中間幅（900〜1199）では箱の幅が縮むので、文字の左右に余白を取り、折り返す箇所を決める（1200 以上は Figma どおり） */
.about__box { padding-inline: 8px; }
.about br.mid-br { display: none; }
@media (min-width: 900px) and (max-width: 1199.98px) {
  .about br.mid-br { display: inline; }
  .about__box--fast .about__box-title { font-size: min(18px, calc(1.9vw - 1px)); }
  .about__box--fast .about__box-sub { font-size: min(15px, 1.55vw); }
  .about .about__box--src .about__box-sub { font-size: min(16px, calc(1.7vw - 1.5px)); }
}
.about__box-title { font-size: 18px; font-weight: 700; line-height: 31px; color: var(--c-text); }
.about__box-title--zen { font-family: var(--ff-zen); font-size: 22px; line-height: 37px; color: #fff; }
.about__box-sub { font-size: 15px; font-weight: 400; line-height: 26px; color: var(--c-text-2); }
.about__box--src { grid-column: 1; grid-row: 1 / 3; background: #fff; border: 1px solid var(--c-border-3); }
.about__box--src .about__box-title { font-family: var(--ff-zen); font-size: 22px; line-height: 40px; }
.about__box--src .about__box-sub { margin-top: 27px; font-size: 16px; line-height: 29px; }
.about__box--bank { grid-column: 3; grid-row: 1; background: var(--c-bg-gray); }
.about__box--hard { grid-column: 5; grid-row: 1; border: 2px dashed var(--c-border-dash); }
.about__box--hard .about__box-sub { font-size: 16px; line-height: 27px; color: var(--c-text-3); }
.about__box--mrf { grid-column: 3; grid-row: 2; background: var(--c-blue); }
.about__box--mrf .about__box-sub { color: #fff; }
.about__box--fast { grid-column: 5; grid-row: 2; background: #fff; border: 2px solid var(--c-blue); }
.about__box--fast .about__box-title { color: var(--c-blue); }
.about__conn { display: none; }

/* 矢印（PC: 横。長さは列の幅 - 2） */
.about__arrow { position: relative; display: block; align-self: center; width: calc(100% - 2px); height: 10px; }
.about__arrow::before, .about__arrow::after { content: ""; position: absolute; }
.about__arrow--g::before {
  left: 0; top: 4px; width: calc(100% - 6px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--c-arrow-gray) 0 6px, transparent 6px 12px);
}
.about__arrow--g::after { right: 0; top: 1px; width: 8px; height: 8px; background: var(--c-arrow-gray); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.about__arrow--b::before { left: 0; top: 3.5px; width: calc(100% - 8px); height: 3px; background: var(--c-blue); }
.about__arrow--b::after { right: 0; top: 0; width: 10px; height: 10px; background: var(--c-blue); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.about__arrow--a1 { grid-column: 2; grid-row: 1; }
.about__arrow--a2 { grid-column: 4; grid-row: 1; }
.about__arrow--b1 { grid-column: 2; grid-row: 2; }
.about__arrow--b2 { grid-column: 4; grid-row: 2; }

.about__diagram-note {
  width: calc(400 / 1248 * 100%);
  margin: 16px 0 0 calc(848 / 1248 * 100%);
  font-size: 13px; line-height: 20px; color: var(--c-text-3);
  text-align: center;
}

/* ---- カード（PC: 3列） ---- */
.about__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 132px; }
.about__card { background: #fff; padding: 33px clamp(20px, 2.2222vw, 32px) 33.2px; }
.about__card-label { font-size: 13px; font-weight: 700; line-height: 15.6px; letter-spacing: 1.6px; color: var(--c-text-3); }
.about__card-value { display: flex; align-items: flex-end; margin-top: 9.4px; }
/* 数字の行の箱は Figma(lh57.92) より低くして、補足との箱の重なりを作らない（overflow.py が重なりと見る）。文字の中心は Figma と同じ */
.about__card-num { margin-top: 4.96px; font-family: var(--ff-zen); font-size: 40px; font-weight: 900; line-height: 48px; color: var(--c-blue); }
.about__card-num [data-ph], .about__card-note [data-ph] { display: block; }
.about__card-unit {
  margin: 0 0 6.9px var(--g-pc);
  font-family: var(--ff-zen); font-size: 18px; font-weight: 900; line-height: 26.064px; color: var(--c-text);
}
.about__card-note { margin-top: 0; font-size: 14px; line-height: 16.8px; color: var(--c-text-2); }

/* ---- SP ---- */
@media (max-width: 899.98px) {
  .about { padding: 64px 0 140px; }
  .about__diagram {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 48px auto 48px auto;
    column-gap: 18px; row-gap: 0;
    margin-top: 40px;
  }
  .about__box { min-height: 104px; justify-content: flex-start; }
  .about__box-title { font-size: 15px; line-height: 24px; }
  .about__box-title--zen { font-size: 18px; line-height: 29px; }
  .about__box-sub { font-size: 12px; line-height: 19px; }
  .about__box--src { grid-column: 1 / -1; grid-row: 1; min-height: 80px; padding-top: 12px; }
  .about__box--src .about__box-title { font-size: 17px; line-height: 29px; }
  .about__box--src .about__box-sub { margin-top: 0; font-size: 13px; line-height: 22px; }
  .about__box--bank { grid-column: 1; grid-row: 3; padding-top: 20px; }
  .about__box--bank .about__box-sub { margin-top: -1px; line-height: 19px; }
  .about__box--mrf { grid-column: 2; grid-row: 3; padding-top: 18px; }
  .about__box--mrf .about__box-sub { margin-top: -1px; }
  .about__box--hard { grid-column: 1; grid-row: 5; padding-top: 17px; }
  .about__box--hard .about__box-sub { font-size: 13px; line-height: 21px; }
  .about__box--fast { grid-column: 2; grid-row: 5; padding-top: 18px; }
  .about__box--fast .about__box-sub { margin-top: -1px; }
  .about__box--fast .about__box-title { font-size: 14px; line-height: 22px; }

  /* つなぎの線: 幹と横の棒 */
  .about__conn { display: block; grid-column: 1 / -1; grid-row: 2; position: relative; }
  .about__conn::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: 24px; background: var(--c-arrow-gray); }
  .about__conn::after { content: ""; position: absolute; top: 23px; left: calc(25% - 4.5px); right: calc(25% - 4.5px); height: 2px; background: var(--c-arrow-gray); }

  /* 矢印（SP: 縦） */
  .about__arrow { width: 8px; height: 46px; align-self: start; justify-self: center; }
  .about__arrow--c { height: 22px; margin-top: 24px; }
  .about__arrow--g::before, .about__arrow--b::before { left: 3px; top: 0; right: auto; width: 2px; height: 40px; }
  .about__arrow--c::before { height: 16px; }
  .about__arrow--g::before { background: repeating-linear-gradient(180deg, var(--c-arrow-gray) 0 6px, transparent 6px 12px); }
  .about__arrow--g.about__arrow--c::before { background: var(--c-arrow-gray); }
  .about__arrow--g::after, .about__arrow--b::after {
    left: 0; right: auto; top: auto; bottom: 0; width: 8px; height: 7px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .about__arrow--a1 { grid-column: 1; grid-row: 2; }
  .about__arrow--b1 { grid-column: 2; grid-row: 2; }
  .about__arrow--a2 { grid-column: 1; grid-row: 4; }
  .about__arrow--b2 { grid-column: 2; grid-row: 4; }

  /* カード（SP: 横並びの1行） */
  .about__cards { grid-template-columns: 1fr; gap: 10px; margin-top: 40px; }
  .about__card { display: flex; justify-content: space-between; height: 66px; padding: 0 20px; }
  .about__card-label { margin-top: 25px; font-size: 13px; letter-spacing: 0; }
  .about__card-value { align-self: flex-start; margin-top: 16px; }
  .about__card-num { margin-top: 0; font-size: 30px; line-height: 43.44px; }
  .about__card-unit { margin: 0 var(--mr-sp, 0) 9.17px var(--g-sp); font-size: 14px; line-height: 20.272px; }
}

/* ==== css/sections/04-numbers.css ==== */
/* 04 数字で見るMRF（SPEC §5.4）。紺の地は .is-navy（base.css） */
.num { padding: 120px 0; background: var(--c-navy); }
.num__sub {
  margin-top: 64px;
  font-size: 15px; font-weight: 700; line-height: 18px;
  color: var(--c-navy-sub);
}
.num__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; margin-top: 21px; }
.num__card { padding-top: 24px; border-top: 1px solid var(--c-navy-line); }
.num__label { font-size: min(15px, 1.55vw); font-weight: 400; line-height: 18px; color: var(--c-navy-lead); }
/* PC はラベルを1行に保つ（折り返すと下の数字の高さがそろわない。900px でも収まる大きさに縮める） */
@media (min-width: 900px) { .num__label { white-space: nowrap; } }
.num__value { display: flex; align-items: flex-end; margin-top: 9px; }
.num__num {
  font-family: var(--ff-zen);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 900; line-height: 1;
  color: #fff;
  white-space: nowrap;
}
/* ph の包み（span）が行の箱を超えて隣と重ならないようにする */
.num__num [data-ph] { display: block; }
/* 数字と単位の間は Figma の手置きのばらつきをそのまま再現する（カードごとに --g-pc / --g-sp） */
.num-unit {
  margin-left: calc(var(--g-pc) * 1em);
  margin-bottom: .318em;
  font-family: var(--ff-zen);
  font-size: clamp(14.67px, 1.528vw, 22px);
  font-weight: 900; line-height: 1;
  color: var(--c-navy-sub);
  white-space: nowrap;
}
.num__note { margin-top: 64px; font-size: 13px; line-height: 23px; color: var(--c-navy-note); }

@media (max-width: 899.98px) {
  .num { padding: 64px 0; }
  .num__sub { margin-top: 39px; font-size: 13px; line-height: 15.6px; }
  .num__sub--2 { margin-top: 41px; }
  .num__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 24px; margin-top: 17.4px; }
  .num__card { padding-top: 15px; }
  .num__label { font-size: 12px; line-height: 14.4px; }
  .num__value { margin-top: 7.6px; }
  .num__num { font-size: 40px; }
  .num-unit { margin-left: calc(var(--g-sp) * 1em); margin-bottom: .286em; font-size: 14px; }
  .num__card--tall { padding-top: 14px; }
  .num__card--tall .num__label { line-height: 18px; }
  .num__card--tall .num__value { margin-top: 6px; }
  .num__note { max-width: 305px; margin-top: 39px; font-size: 11px; line-height: 20px; }
}
/* 中身が広がる幅（480〜899）では Figma の折り返し幅に縛らない */
@media (min-width: 480px) and (max-width: 899.98px) {
  .num__note { max-width: none; }
}

/* ==== css/sections/05-jobs.css ==== */
/* 05 仕事内容（#jobs） */
.jobs { padding: 120px 0; background: #fff; }
.jobs__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 57px;
}
.jobs__card {
  display: flex;
  flex-direction: column;
  padding: 0 0 27px;
  background: #fff;
  border: 1px solid var(--c-border);
}
.jobs__photo { width: 100%; height: 240px; overflow: hidden; }
.jobs__photo img, .jobs__photo picture { width: 100%; height: 100%; }
.jobs__photo img { object-fit: cover; object-position: 50% 50%; }
.jobs__title {
  margin: 30px 28px 0;
  font-family: var(--ff-zen);
  font-size: 24px;
  font-weight: 700;
  line-height: 34.752px;
  color: var(--c-text);
}
.jobs__text {
  max-width: 337px;
  margin: 6.25px 28px 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 29px;
  color: var(--c-text-2);
}
/* 中間幅（900〜）でカード見出し10字が1行に収まるよう、大きさだけ縮める（1105px 以上は 24px） */
@media (min-width: 900px) {
  .jobs__title { font-size: min(24px, calc(2.85vw - 7.8px)); }
}
@media (max-width: 899.98px) {
  .jobs { padding: 56px 0; }
  .jobs .sec-lead { margin-top: 15px; }
  .jobs__list { grid-template-columns: 1fr; gap: 20px; margin-top: 27px; }
  .jobs__card { padding-bottom: 27px; }
  .jobs__photo { height: auto; aspect-ratio: 340 / 190; }
  .jobs__photo img { object-position: 50% 30%; }
  .jobs__card:nth-child(2) .jobs__photo img { object-position: 50% 50%; }
  .jobs__title { margin: 22px 20px 0; font-size: 20px; line-height: 28.96px; }
  .jobs__text { max-width: none; margin: 8px 20px 0; font-size: 14px; line-height: 27px; }
}

/* ==== css/sections/05b-flow.css ==== */
/* 05b 融資の流れ（#flow） */
.flow { padding: 120px 0 121px; background: var(--c-bg-soft); }
.flow__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  margin-top: 57px;
  counter-reset: none;
}
.flow__item {
  position: relative;
  min-height: 228px;
  padding: 28px 22px 24px;
  background: #fff;
  border: 1px solid var(--c-border-3);
}
.flow__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding-top: 3px;
  border-radius: 50%;
  background: var(--c-blue);
  color: #fff;
  font-family: var(--ff-zen);
  font-size: 18px;
  font-weight: 900;
  line-height: 26.064px;
}
.flow__name {
  margin-top: 13px;
  font-family: var(--ff-zen);
  font-size: 19px;
  font-weight: 700;
  line-height: 27px;
  color: var(--c-text);
}
.flow__text {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
  color: var(--c-text-2);
}
.flow__item--last { background: var(--c-blue); border-color: var(--c-blue); }
.flow__item--last .flow__num { background: #fff; color: var(--c-blue); }
.flow__item--last .flow__name { color: #fff; }
.flow__item--last .flow__text { color: var(--c-navy-lead); }
.flow__arrow {
  position: absolute;
  left: calc(100% + 1px);
  top: calc(50% - 10px);
  width: 28px; height: 20px;
  color: var(--c-blue);
}
.flow__note-unit { white-space: nowrap; } /* 「担当範囲」が行をまたいで割れない */
.flow__note { margin-top: 56px; font-size: 14px; font-weight: 400; line-height: 16.8px; color: var(--c-text-3); }

/* 900〜1199: 3列、矢印は隠す */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .flow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .flow__arrow { display: none; }
}
@media (max-width: 899.98px) {
  .flow { padding: 56px 0; }
  .flow .sec-lead { margin-top: 14px; }
  .flow__list { grid-template-columns: 1fr; gap: 27.5px; margin-top: 28px; }
  .flow__item { min-height: 0; padding: 18px 18px 18px; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 22px; align-content: start; }
  .flow__num { grid-row: 1 / span 2; width: 40px; height: 40px; padding-top: 2px; font-size: 17px; line-height: 24.616px; }
  .flow__name { margin-top: 0; grid-column: 2; font-size: 17px; line-height: 24px; }
  .flow__text { grid-column: 2; margin-top: 8px; font-size: 13px; line-height: 23px; }
  .flow__arrow { left: calc(50% - 10px); top: calc(100% - 1px); width: 20px; height: 28px; }
  .flow__arrow svg { position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -14px; max-width: none; transform: rotate(90deg); }
  .flow__note { margin-top: 28.7px; font-size: 12px; line-height: 17px; }
}
/* 本文が2行になる幅（〜599）だけ、カード1・2を Figma の高さ 117 にそろえる（それより広いときは中身の高さで決める） */
@media (max-width: 599.98px) {
  .flow__item:nth-child(-n+2) { min-height: 117px; }
}

/* ==== css/sections/06-voice.css ==== */
/* 06 先輩社員の声（#voice） */
.voice { padding: 120px 0; background: #fff; }
.voice .sec-lead { margin-top: 16px; }
.voice__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
}
.voice__card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
  padding: 28px;
  background: var(--c-bg-soft);
}
.voice__thumb {
  position: relative;
  display: block;
  width: 220px; height: 391px;
  overflow: hidden;
  background: var(--c-thumb);
  color: #fff;
  text-decoration: none;
}
.voice__thumb-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.voice__thumb-blank { position: absolute; inset: 0; background: var(--c-thumb); }
.voice__play {
  position: absolute;
  left: 50%; top: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: var(--c-blue);
  transition: opacity .2s;
}
.voice__play svg { position: absolute; left: 18px; top: 16px; }
.voice__thumb:hover .voice__play { opacity: .8; }
.voice__thumb-cap {
  position: absolute;
  left: 0; right: 0;
  top: calc(50% + 36px);
  font-size: 11px;
  font-weight: 400;
  line-height: 13.2px;
  text-align: center;
  color: var(--c-thumb-text);
}
.voice__name {
  font-family: var(--ff-zen);
  font-size: 24px;
  font-weight: 700;
  line-height: 34.752px;
  color: var(--c-text);
}
.voice__meta {
  margin-top: 4.25px;
  font-size: 13px;
  font-weight: 700;
  line-height: 15.6px;
  color: var(--c-blue);
}
.voice__quote {
  min-height: 60px;
  margin-top: 16.4px;
  font-family: var(--ff-zen);
  font-size: 19px;
  font-weight: 700;
  line-height: 30px;
  color: var(--c-text);
}
.voice__qa { margin-top: 20px; }
.voice__qa-item { min-height: 80px; padding-bottom: 14px; } /* 本文が3行になっても、次の小見出しとの間に14px 空ける */
.voice__qa-q { font-size: 13px; font-weight: 700; line-height: 15.6px; color: var(--c-blue); }
.voice__qa-a { margin-top: 2.4px; font-size: 14px; font-weight: 400; line-height: 24px; color: var(--c-text-2); }

/* 1200〜1439: 2列のまま、カードの余白とサムネイルを幅に合わせて縮め、文字の列を約260px以上に保つ（1200で約264、1280で約277） */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .voice__card {
    grid-template-columns: calc(170px + (100vw - 1200px) * 0.2083) minmax(0, 1fr);
    column-gap: clamp(23px, 1.9444vw, 28px);
    padding: clamp(23px, 1.9444vw, 28px);
  }
  .voice__thumb { width: 100%; height: auto; aspect-ratio: 220 / 391; }
}
/* 900〜1199: 1列（カードは全幅。サムネイル＋文字の列はそのまま） */
@media (max-width: 1199.98px) {
  .voice__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899.98px) {
  .voice { padding: 56px 0; }
  .voice .sec-lead { margin-top: 14px; }
  .voice__list { gap: 20px; margin-top: 28px; }
  .voice__card { grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .voice__thumb { width: 110px; height: 196px; }
  .voice__play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .voice__play svg { left: 10px; top: 8px; }
  .voice__thumb-cap { top: calc(50% + 28px); }
  .voice__name { font-size: 18px; line-height: 26.064px; }
  .voice__meta { margin-top: 3.9px; font-size: 11px; line-height: 13.2px; }
  .voice__quote { min-height: 0; margin-top: 9.8px; font-size: 14px; line-height: 22px; }
  .voice__qa { margin-top: 12px; }
  .voice__qa-item { min-height: 0; padding-bottom: 0; margin-bottom: 10px; }
  .voice__qa-q { font-size: 11px; line-height: 13.2px; }
  .voice__qa-a { margin-top: 1.8px; font-size: 12px; line-height: 20px; }
}

/* ==== css/sections/06b-people.css ==== */
/* 06b 社員紹介（#people） */
.people { padding: 120px 0; background: var(--c-bg-soft); }
.people__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 64px;
}
.people__card {
  display: flex;
  flex-direction: column;
  padding: 0 clamp(18px, 1.9444vw, 28px) 28.8px;
  background: #fff;
}
.people__photo {
  margin: 0 calc(-1 * clamp(18px, 1.9444vw, 28px));
  height: 296px;
  overflow: hidden;
}
.people__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.people__meta {
  margin-top: 25px;
  font-size: 13px;
  font-weight: 700;
  line-height: 15.6px;
  color: var(--c-blue);
}
.people__quote {
  margin-top: 11.4px;
  font-family: var(--ff-zen);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: var(--c-text);
}
.people__name {
  margin-top: 17px;
  font-size: 16px;
  font-weight: 700;
  line-height: 19.2px;
  color: var(--c-text);
}
@media (max-width: 899.98px) {
  .people { padding: 64px 0; }
  .people__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
  .people__card { padding: 0 12px 15.4px; }
  .people__photo { margin: 0 -12px; height: auto; aspect-ratio: 163 / 122; }
  .people__meta { margin-top: 13px; font-size: 11px; line-height: 13.2px; }
  .people__quote { margin-top: 6.8px; font-size: 14px; line-height: 21px; }
  .people__name { margin-top: 7px; font-size: 13px; line-height: 15.6px; }
}

.people__quote:empty { display: none; }

/* ==== css/sections/07-oneday.css ==== */
/* 07 1日の流れ（#oneday） */
.oneday { padding: 120px 0; background: #fff; }
.oneday__inner {
  display: grid;
  grid-template-columns: minmax(0, 456fr) minmax(0, 792fr);
  align-items: start;
}
/* 左の列と時間割の間を空ける（中間幅で注記が時刻の列にぶつからないように） */
@media (min-width: 900px) { .oneday__intro { padding-right: 24px; } }
.oneday__heading {
  margin-top: 10.2px;
  font-family: var(--ff-zen);
  font-size: 36px;
  font-weight: 900;
  line-height: 50px;
  color: var(--c-text);
}
.oneday__note {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 15.6px;
  color: var(--c-text-3);
}
.oneday__row {
  display: grid;
  grid-template-columns: clamp(96px, 10.5556vw, 152px) minmax(0, 1fr);
  min-height: 92px;
  padding: 22px 0 21px;
  border-bottom: 1px solid var(--c-border-2);
}
.oneday__row--short { min-height: 64px; padding-bottom: 0; }
.oneday__time {
  font-family: var(--ff-zen);
  font-size: 24px;
  font-weight: 700;
  line-height: 34.752px;
  color: var(--c-blue);
}
.oneday__title { font-size: 17px; font-weight: 700; line-height: 20.4px; color: var(--c-text); }
.oneday__text { margin-top: 3.6px; font-size: 15px; font-weight: 400; line-height: 24px; color: var(--c-text-3); }

/* 中間幅では注記が2行になるので、行間を 1.5 に広げる */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .oneday__note { line-height: 1.5; }
}

@media (max-width: 899.98px) {
  .oneday { padding: 56px 0; }
  .oneday__inner { display: block; }
  .oneday__heading { margin-top: 11.6px; font-size: 24px; line-height: 34px; }
  .oneday__note { margin-top: 12px; font-size: 11px; line-height: 13.2px; }
  .oneday__list { margin-top: 22.8px; }
  .oneday__row { grid-template-columns: 80px minmax(0, 1fr); min-height: 74px; padding: 16px 0 15px; }
  .oneday__row--short { min-height: 50px; padding-bottom: 0; }
  .oneday__time { font-size: 18px; line-height: 26.064px; }
  .oneday__title { font-size: 15px; line-height: 18px; }
  .oneday__text { margin-top: 4px; font-size: 13px; line-height: 20px; }
}

/* ==== css/sections/08-growth.css ==== */
/* 08 成長環境（#growth・担当 C）。SPEC §5.10 */

.growth { padding: 120px 0 184px; background: #fff; }

/* ---- 矢羽根 5枚（PC は横並び、SP は左に矢羽根・右に説明） ---- */
.growth-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 4px;
  margin-top: 64px;
}
.growth-step__title {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 28px 0 38px; /* 右は先端の三角（28px）の分。文字が斜辺で切れない */
  font-family: var(--ff-zen);
  font-size: clamp(14px, 1.111vw, 16px);
  font-weight: 700;
  line-height: 24px;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%);
}
/* 中間幅（900〜1099）は列が狭く、語の途中で折れるので、SP と同じ位置で改行する */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .growth-step__title br.sp-br { display: inline; }
}
.growth-step--1 .growth-step__title {
  padding-left: 22px;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
}
.growth-step--1 .growth-step__title { background: var(--c-blue-pale-1); color: var(--c-navy); }
.growth-step--2 .growth-step__title { background: var(--c-blue-pale-2); color: var(--c-navy); }
.growth-step--3 .growth-step__title { background: var(--c-blue-2); color: #fff; }
.growth-step--4 .growth-step__title { background: var(--c-blue); color: #fff; }
.growth-step--5 .growth-step__title { background: var(--c-navy); color: #fff; }
.growth-step__term {
  margin-top: 25px;
  font-size: 13px;
  font-weight: 700;
  line-height: 15.6px;
  color: var(--c-blue);
}
.growth-step__text {
  margin-top: 6.4px;
  padding-right: 22px;
  font-size: 15px;
  font-weight: 400;
  line-height: 27px;
  color: var(--c-text-2);
}

/* ---- 写真2枚＋資格の箱 ---- */
.growth-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  margin-top: 67px;
}
.growth-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
}
.growth-photo__caption {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
  color: var(--c-text-3);
}
.growth-qual {
  min-height: 330px;
  padding: 34px 32px 56px; /* 資格名が折り返しても、支援内容の下に余白（Figma は約56）を残す */
  background: var(--c-blue);
  color: #fff;
}
.growth-qual__title {
  font-family: var(--ff-zen);
  font-size: 22px;
  font-weight: 700;
  line-height: 31.856px;
  color: #fff;
}
.growth-qual__list { margin-top: 8.14px; }
.growth-qual__list li {
  min-height: 43px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-blue-line);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
.growth-qual__support {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 15.6px;
  color: var(--c-navy-lead);
}

/* 中間幅（900〜1199）は箱が約244〜300pxに狭まる。余白を縮め、見出しは語の切れ目で折り、支援内容は行間を広げて2行を許す */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .growth-qual { padding: 30px 24px 48px; }
  .growth-qual__support { line-height: 20px; }
}
.growth-qual__title span, .growth-qual__support-label { display: inline-block; }

@media (max-width: 899.98px) {
  .growth { padding: 64px 0 122px; }

  .growth-steps { grid-template-columns: minmax(0, 1fr); row-gap: 6px; margin-top: 39px; }
  .growth-step {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    column-gap: 16px;
    grid-template-rows: auto 1fr; /* 矢羽根の余った高さは本文の行に配り、時期ラベルの箱は中身の高さのまま */
    align-content: start;
  }
  .growth-step__title,
  .growth-step--1 .growth-step__title {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-content: center;
    height: 76px;
    padding: 0 6px 14px;
    text-align: center;
    font-size: 13px;
    line-height: 18px;
    clip-path: polygon(0 0, 100% 0, 100% 62px, 50% 100%, 0 62px);
  }
  .growth-step__term { grid-column: 2; margin-top: 7px; font-size: 12px; line-height: 14.4px; }
  .growth-step__text { grid-column: 2; margin-top: 1.6px; padding-right: 0; font-size: 13px; line-height: 22px; }

  .growth-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 40px; margin-top: 40px; }
  .growth-photo img { aspect-ratio: 163 / 122; }
  .growth-qual { grid-column: 1 / -1; min-height: 0; padding: 26px 24px 25.6px; }
  .growth-qual__title { font-size: 18px; line-height: 26.064px; }
  .growth-qual__list { margin-top: 5.94px; }
  .growth-qual__list li { min-height: 38px; font-size: 14px; line-height: 21px; }
  .growth-qual__support { margin-top: 11px; font-size: 12px; line-height: 14.4px; }
}

/* ==== css/sections/09-workstyle.css ==== */
/* 09 働く環境（#workstyle・担当 C）。SPEC §5.11 */

.ws { padding: 120px 0 120px; background: #fff; }

.ws-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 57px;
}
.ws-card {
  padding: 32px 32px 33px;
  border: 1px solid var(--c-border);
  background: #fff;
}
.ws-card__icon { width: 36px; height: 36px; color: var(--c-blue); }
.ws-card__title {
  margin-top: 14px;
  font-family: var(--ff-zen);
  font-size: 20px;
  font-weight: 700;
  line-height: 28.96px;
  color: var(--c-text);
}
.ws-card__text {
  margin-top: 7.04px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--c-text-3);
}

@media (max-width: 899.98px) {
  .ws { padding: 56px 0 57px; }
  .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
  .ws-card { padding: 18px 12px 18px 18px; }
  .ws-card__icon { width: 28px; height: 28px; }
  .ws-card__title { margin-top: 9px; font-size: min(16px, calc(6.25vw - 8px)); line-height: 23.168px; } /* 幅375以下でも「有給が取りやすい」(8字)が1行に収まる */
  .ws-card__text { margin-top: 4.83px; font-size: 12px; line-height: 20px; }
}

/* ==== css/sections/10-faq.css ==== */
/* 10 よくある質問（#faq・担当 C）。SPEC §5.12 */

.faq { padding: 120px 0 120px; background: var(--c-bg-soft); }

.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 424fr) minmax(0, 824fr);
}

/* 左の列（見出し・リード）と Q の列の間を空ける（中間幅でリードが Q の列にぶつからないように） */
@media (min-width: 900px) { .faq__inner > .sec-head { padding-right: 24px; } }

/* ---- 一覧（開閉なし。全部見せる） ---- */
.faq-item {
  padding: 28px 0 27px;
  border-bottom: 1px solid var(--c-border-2);
}
/* Figma の1問目だけ下の余白が10px広い（行の高さ 171 / 161 / 161 / 134） */
.faq-item:first-child { padding-bottom: 37px; }
.faq-item__q { display: grid; grid-template-columns: 33px minmax(0, 1fr); align-items: start; }
.faq-item__a { display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: start; margin-top: 9.25px; }
.faq-mark {
  font-family: var(--ff-zen);
  font-size: 24px;
  font-weight: 900;
  line-height: 34.752px;
}
.faq-mark--q { color: var(--c-blue); }
.faq-mark--a { color: var(--c-orange); }
.faq-item__q .faq-item__text {
  font-size: 19px;
  font-weight: 700;
  line-height: 30px;
  color: var(--c-text);
}
.faq-item__a .faq-item__text {
  margin-top: 1px;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  color: var(--c-text-2);
}

@media (max-width: 899.98px) {
  .faq { padding: 56px 0 57px; }
  .faq__inner { display: block; }
  .faq-list { margin-top: 20px; }
  .faq-item { padding: 20px 0 19px; }
  .faq-item:first-child { padding-bottom: 19px; }
  /* Figma の最後の1問だけ下の余白が3px広い（行の高さ 135） */
  .faq-item:last-child { padding-bottom: 22px; }
  .faq-item__q { grid-template-columns: 30px minmax(0, 1fr); }
  .faq-item__a { grid-template-columns: 28px minmax(0, 1fr); margin-top: 9.04px; }
  .faq-mark { font-size: 20px; line-height: 28.96px; }
  .faq-item__q .faq-item__text { font-size: 16px; line-height: 26px; }
  .faq-item__a .faq-item__text { margin-top: 0; font-size: 14px; line-height: 27px; }
}

/* ==== css/sections/11-requirements.css ==== */
/* 11 募集要項（#requirements・担当 C）。SPEC §5.13 */
#requirements { --req-tab-hover: #D8DFEA; }

.req { padding: 120px 0 121px; background: #fff; }

/* ---- タブ ---- */
.req-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 57px;
}
.req-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 5.8px 0 0;
  border: 0;
  border-radius: 0;
  background: var(--c-bg-gray);
  color: var(--c-text-2);
  font-family: var(--ff-zen);
  font-size: 22px;
  font-weight: 700;
  line-height: 31.856px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.req-tab:hover { background: var(--req-tab-hover); }
.req-tab[aria-selected="true"] { background: var(--c-blue); color: #fff; cursor: default; }
.req-tab[aria-selected="true"]:hover { background: var(--c-blue); }
.req-tab:focus-visible { outline-offset: -3px; }
.req-tab[aria-selected="true"]:focus-visible { outline-color: #fff; }

/* ---- 表 ---- */
.req-panel { margin-top: 24px; }
.req-panel[hidden] { display: none; }
.req-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.req-table th,
.req-table td {
  height: 78px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
  text-align: left;
}
.req-table th {
  width: 312px;
  padding: 25px 0 0 40px;
  font-size: 16px;
  font-weight: 700;
  line-height: 19.2px;
  color: var(--c-text);
}
.req-table td {
  padding: 23px 24px 22px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
  color: var(--c-text-2);
}
.req-note {
  margin-top: 54px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
  color: var(--c-text-3);
}

@media (max-width: 899.98px) {
  .req { padding: 56px 0 57px; }
  .req-tabs { margin-top: 28px; }
  .req-tab { height: 52px; padding-top: 3.2px; font-size: 16px; line-height: 23.168px; }
  .req-panel { margin-top: 18px; }
  .req-table,
  .req-table tbody,
  .req-table tr,
  .req-table th,
  .req-table td { display: block; }
  .req-table tr { padding: 17px 0 17px; border-bottom: 1px solid var(--c-border); }
  .req-table th,
  .req-table td { height: auto; border: 0; }
  .req-table th { width: auto; padding: 0; font-size: 13px; line-height: 15.6px; color: var(--c-blue); }
  .req-table td { margin-top: 6.4px; padding: 0; font-size: 14px; line-height: 25px; }
  .req-note { margin-top: 29px; font-size: 12px; line-height: 17px; }
}

/* ==== css/sections/11b-selection.css ==== */
/* 11b 選考の流れ（#selection・担当 C）。SPEC §5.14 */

.sel { padding: 120px 0 121px; background: var(--c-bg-soft); }

.sel-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 40px;
  margin-top: 57px;
}
.sel-step {
  position: relative;
  min-height: 135px;
  padding: 28px 0 0;
  border: 1px solid var(--c-border-3);
  background: #fff;
  text-align: center;
}
.sel-step__no {
  font-family: var(--ff-zen);
  font-size: 15px;
  font-weight: 900;
  line-height: 21.72px;
  color: var(--c-orange);
}
.sel-step__name {
  margin-top: 5.28px;
  font-family: var(--ff-zen);
  font-size: 22px;
  font-weight: 700;
  line-height: 31.856px;
  color: var(--c-text);
}
.sel-step__note {
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
  color: var(--c-text-3);
}
.sel-step__arrow {
  position: absolute;
  top: 57px;
  left: calc(100% + 6px);
  width: 28px;
  height: 20px;
  color: var(--c-blue);
}
.sel-step__note [data-ph] { display: inline-block; line-height: inherit; vertical-align: top; }
.sel-step--last { border-color: var(--c-blue); background: var(--c-blue); }
.sel-step--last .sel-step__no,
.sel-step--last .sel-step__name { color: #fff; }
.sel-step--last .sel-step__note { color: var(--c-navy-lead); }
.sel-note {
  margin-top: 56px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
  color: var(--c-text-3);
}

@media (max-width: 899.98px) {
  .sel { padding: 56px 0 55px; }
  .sel-steps { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 27px; }
  .sel-step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-content: start;
    min-height: 78px;
    padding: 18px 18px 18px;
    text-align: left;
  }
  .sel-step__no { grid-column: 1; grid-row: 1 / span 2; margin-top: 12px; font-size: 14px; line-height: 20.272px; }
  .sel-step__name { grid-column: 2; margin-top: 0; font-size: 17px; line-height: 24.616px; }
  .sel-step__note { grid-column: 2; font-size: 12px; line-height: 14.4px; }
  .sel-step__arrow {
    top: calc(100% + 2px);
    left: 50%;
    width: 28px;
    height: 20px;
    margin-left: -14px;
    transform: rotate(90deg);
  }
  .sel-note { margin-top: 29px; font-size: 12px; line-height: 17px; }
}
.sel-note .nowrap { white-space: nowrap; } /* 「最終面接」が行をまたいで割れない */

/* ==== css/sections/12-entry.css ==== */
/* 12 エントリー（#entry・担当 C）。SPEC §5.15。紺の地は section の .is-navy */

.entry {
  padding: 96px 0 59px;
  background: var(--c-navy);
  text-align: center;
}
.entry-title {
  font-family: var(--ff-zen);
  font-size: 40px;
  font-weight: 900;
  line-height: 58px;
  color: #fff;
}
.entry-title__line { display: block; }
.entry-btns {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.entry-btn {
  justify-content: center;
  gap: 12px;
  width: 300px;
  height: 72px;
  border-radius: 36px;
  font-size: 18px;
  line-height: 21.6px;
}
.entry-btn svg { flex: none; width: 20px; height: 20px; }
.entry-mail {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
  color: var(--c-navy-note);
}
.entry-mail a { color: inherit; }

@media (max-width: 899.98px) {
  .entry { padding: 55px 0 22px; }
  .entry-title { font-size: 24px; line-height: 35px; }
  .entry-btns { flex-direction: column; gap: 12px; margin-top: 21px; }
  .entry-btn { width: 100%; height: 56px; border-radius: 28px; font-size: 16px; line-height: 19.2px; }
  .entry-mail { font-size: 12px; line-height: 14.4px; }
}