/* =========================================================
   KANAMOTO HOLDINGS 採用サイト — top.css（トップページ：2 ステートメント〜11 フッター）
   fv.css の後に読む。色・書体・ease・角丸は tokens.css の変数だけを参照する
   （例外：transparent／currentColor／白の透過 rgba(255,255,255,…)）。
   セクションの型：{ 英字ラベル } → H2 → 説明（2行まで） → 入口（カード・数字・リスト） → オレンジのピル
   地の順番：白(2) → 淡(01) → 白(02) → 淡(03) → 白(04) → オレンジの帯(05) → 淡(06) → 白(FAQ) → 淡(エントリー) → 濃い茶(フッター)
   動き：M3 札が重なる（.reveal の子の .rv-label／.rv-title .rv-line／.rv-body／.rv-card）・M5 札のずれ（ホバー）
         M4 カウントアップ・M6 カルーセルの前後とドラッグ・M7 FAQ の高さは top.js
   ブレークポイント：SP 〜767（375px 基準）／ 768 タブレット ／ 1024 左右に分ける ／ 1200 PC
   ========================================================= */

/* ---------- 共通の基礎 ---------- */
h2, h3, dl, dd, ol { margin: 0; }
ol { padding: 0; list-style: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- セクションの頭 ---------- */
.sec-title {
  font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}
.sec-text {
  margin-top: 14px;
  font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body); letter-spacing: var(--ls-ja);
}
.sec-head--center { text-align: center; }
.sec-head--center .label-en { justify-content: center; }
.sec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.sec-actions .btn-primary { margin-top: 0; }

/* ---------- ボタン（オレンジのピルは fv.css の .btn-primary。ここでは主CV・白いピル・文字のリンク） ---------- */
.btn-entry, .btn-sub {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--btn-h); padding: 0 12px 0 28px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-btn); font-weight: var(--fw-bold); line-height: 1; letter-spacing: .08em; white-space: nowrap;
  transition: background-color var(--dur-ui) var(--ease-out);
}
.btn-entry .arw, .btn-sub .arw { width: 32px; height: 32px; }
.btn-entry { /* 主CV：外輪つきのオレンジのピル（影はエントリーだけ） */
  background: var(--color-brand); color: var(--color-on-brand);
  box-shadow: 0 0 0 var(--ring-w) var(--color-ring), var(--shadow-cta);
}
.btn-entry:hover { background: var(--color-brand-hover); }
.btn-entry .arw::before { border-width: 2px; }
.btn-sub { background: var(--color-bg); color: var(--color-ink); } /* 白いピル（説明会・Instagram） */
.btn-sub:hover { background: var(--color-layer); }
.btn-primary--light { background: var(--color-brand-hover); } /* オレンジの帯の上のオレンジのピル */
.btn-primary--light:hover { background: var(--color-brand-mid); }

.text-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.text-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 15px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja);
  color: var(--color-ink);
}
.text-link > span:first-child {
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--color-line), var(--color-line));
  background-size: 0 1px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  transition: background-size .4s var(--ease-out);
}
.text-link:hover > span:first-child { background-size: 100% 1px, 100% 1px; }
.text-link .arw { width: 28px; height: 28px; }

/* カードの円の矢印（M5：ホバーで塗りが広がり、矢印が右へ抜けて左から戻る） */
.card-arw {
  position: absolute; z-index: 2; right: 10px; bottom: 10px;
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; overflow: hidden;
  background: var(--color-bg); color: var(--color-brand); /* 矢印はオレンジ（アイコンの色） */
  transition: color .4s var(--ease-out);
}
.card-arw::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--color-brand); transform: scale(0);
  transition: transform .4s var(--ease-out);
}
.card-arw svg { position: relative; z-index: 1; width: 12px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
a:hover .card-arw, a:focus-visible .card-arw { color: var(--color-on-brand); }
a:hover .card-arw::after, a:focus-visible .card-arw::after { transform: scale(1); }
a:hover .card-arw svg { animation: arw-next .4s var(--ease-arrow); }

/* 写真の窓（共通） */
.ph-frame img, .job-card__photo img, .person-card__photo img, .video-card__poster img, .type-card__photo img,
.about__window-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: scale .6s var(--ease-out);
}

/* =========================================================
   M3 セクションの登場「札が重なる」
   箱（.reveal）は動かさず、中のラベル・見出し・本文・札を順に重ねる。is-act は fv.js が付ける（一度だけ）
   初期状態は JS が動くとき・動きを減らさないとき・static でないときだけ（JS 無効でも最初から読める）
   ========================================================= */
.reveal { opacity: 1; transform: none; transition: none; } /* fv.css の「120px せり上がる」を、札が重なる動きに置き換える */

.rv-label { clip-path: inset(0 0 0 0); transition: clip-path .6s var(--ease-out) var(--rv-d, 0s); }

.rv-title .rv-line {
  --rv-dl: calc(var(--rv-d, 0s) + .15s + var(--l, 0) * .12s);
  position: relative; display: inline-block;
  transition: color 0s linear calc(var(--rv-dl) + .47s);
}
.rv-title .rv-line:nth-child(2) { --l: 1; }
.rv-title .rv-line:nth-child(3) { --l: 2; }
.rv-title .rv-line:nth-child(4) { --l: 3; }
.rv-title .rv-line:nth-child(5) { --l: 4; }
.rv-title .rv-line::before,
.rv-title .rv-line::after { /* 行ごとに通り過ぎるオレンジの帯（FV の .seg と同じ2枚） */
  content: ""; position: absolute; z-index: 1; left: -.04em; right: -.04em; top: .2em; bottom: .16em;
  border-radius: .14em; transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
.rv-title .rv-line::before { background: var(--color-layer); }
.rv-title .rv-line::after { background: var(--color-brand-soft); }

.rv-body {
  --rv-db: calc(var(--rv-d, 0s) + .55s + var(--j, 0) * .08s);
  transition: opacity .6s linear var(--rv-db), transform .9s var(--ease-out) var(--rv-db);
}

.rv-card { /* 札：淡いオレンジの面が先に出て、本体がその上に重なる */
  --rv-dc: calc(var(--rv-d, 0s) + .35s + var(--i, 0) * .1s);
  position: relative; isolation: isolate;
}
.rv-card::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  border-radius: var(--card-r, var(--radius-m));
  background: var(--card-layer, var(--color-layer));
  transform: translate(12px, 12px);
  transition: opacity .5s linear var(--rv-dc), transform .9s var(--ease-out) var(--rv-dc), translate .4s var(--ease-out);
  pointer-events: none;
}
.rv-card--flat::before { content: none; } /* 札を重ねない（写真の窓・会社の強み・動画・区分カード・エントリーの写真） */
.rv-card > * {
  position: relative; z-index: 1;
  transition: opacity .5s linear calc(var(--rv-dc) + .18s), transform .9s var(--ease-out) calc(var(--rv-dc) + .18s);
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .page:not([data-anim="static"]) .reveal:not(.is-act) .rv-label { clip-path: inset(0 100% 0 0); }
  .page:not([data-anim="static"]) .reveal:not(.is-act) .rv-line { color: transparent; }
  .page:not([data-anim="static"]) .reveal:not(.is-act) .rv-body { opacity: 0; transform: translateY(12px); }
  .page:not([data-anim="static"]) .reveal:not(.is-act) .rv-card::before { opacity: 0; transform: translate(0, 24px); }
  .page:not([data-anim="static"]) .reveal:not(.is-act) .rv-card > * { opacity: 0; transform: translateY(-16px); }
  .page:not([data-anim="static"]) .reveal.is-act .rv-line::before { animation: layer-wipe .95s var(--ease-arrow) var(--rv-dl) both; }
  .page:not([data-anim="static"]) .reveal.is-act .rv-line::after { animation: layer-wipe .95s var(--ease-arrow) calc(var(--rv-dl) + .12s) both; }
}

/* M5 札のずれ：ホバーで後ろの札が 12px → 18px、写真が 1.05 倍 */
.rv-card:hover::before, .rv-card:focus-within::before { translate: 6px 6px; }
.job-card__link:hover .job-card__photo img,
.person-card__link:hover .person-card__photo img,
.video-card__link:hover .video-card__poster img,
.type-card__link:hover .type-card__photo img { scale: 1.05; }

/* 停止：static と「動きを減らす」は最終状態を即表示 */
.page[data-anim="static"] .rv-label, .page[data-anim="static"] .rv-line, .page[data-anim="static"] .rv-body,
.page[data-anim="static"] .rv-card::before, .page[data-anim="static"] .rv-card > *,
.page[data-anim="static"] .env-stack__card { transition: none; }
.page[data-anim="static"] .rv-line::before, .page[data-anim="static"] .rv-line::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .rv-label, .rv-line, .rv-body, .rv-card::before, .rv-card > *, .env-stack__card,
  .card-arw, .card-arw::after, .faq__chev, .video-card__play,
  .ph-frame img, .job-card__photo img, .person-card__photo img, .video-card__poster img, .type-card__photo img,
  .about__window-frame img { transition: none; }
  .rv-line::before, .rv-line::after { animation: none; }
  a:hover .card-arw svg { animation: none; }
}

/* =========================================================
   2 ステートメント（見た目は fv.css。ここでは動きの準備だけ）
   ========================================================= */
.statement .rv-title .rv-line { /* 見出しの行の帯は fv.css の .ph の折り返しに合わせる */
  vertical-align: top;
}

/* =========================================================
   3 01 会社を知る：淡いオレンジ白の地に白い大パネル。右上に写真の窓、左に見出し・数字、右に札3枚
   ========================================================= */
.about { padding: calc(var(--section-py) * .8) var(--side); background: var(--color-bg-page); }
.about__panel {
  position: relative;
  display: grid; row-gap: 36px;
  max-width: var(--container); margin: 0 auto;
  padding: 72px 24px 44px;
  border-radius: var(--radius-xl); background: var(--color-bg);
}
.about__main { display: contents; }
.about__main > .sec-head { order: 1; }
.about-nums { order: 2; }
.about-points { order: 3; }
.about__main > .sec-actions { order: 4; }

.about__window { position: absolute; z-index: 2; top: -40px; right: 20px; width: 128px; }
.about__window-card { --card-r: var(--radius-s); }
.about__window-frame { aspect-ratio: 4 / 3; border-radius: var(--radius-s); overflow: hidden; background: var(--color-bg-kv); }
.about__window-frame img { object-position: 50% 62%; }

.about-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.about-num { padding: 14px 0 12px; border-top: 1px solid var(--color-line); }
.about-num dt { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.about-num dd { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.num[data-count] { display: inline-block; font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.about-num .num { font-size: calc(var(--fs-num) * .8); }
.unit { font-size: 15px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: var(--ls-ja); }

.about-points { display: grid; gap: 16px; }
.about-point { --card-r: var(--radius-m); }
.about-point__in {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px;
  padding: 20px 20px 22px;
  border-radius: var(--radius-m); background: var(--color-tint);
}
.about-point__no { grid-row: 1 / 3; font-size: 20px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .04em; color: var(--color-brand-soft); }
.about-point__title { font-size: 17px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); }
.about-point__text { margin-top: 4px; font-size: 14px; line-height: 1.8; letter-spacing: var(--ls-ja); }

/* =========================================================
   4 02 仕事を知る：白い地。職種カード4枚（写真の後ろに札）
   ========================================================= */
.work { padding: var(--section-py) var(--side); background: var(--color-bg); }
.work__inner {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "list" "actions"; row-gap: 40px;
  max-width: var(--container); margin: 0 auto;
}
.work__inner > .sec-head { grid-area: head; }
.work__inner > .sec-actions { grid-area: actions; }
.work__list { grid-area: list; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }

.job-card { --card-r: var(--radius-tab); }
.job-card::before { inset: 0 auto auto 0; width: 100%; aspect-ratio: 1; } /* 札は写真の後ろ */
.job-card__link { display: block; }
.job-card__photo { position: relative; aspect-ratio: 1; border-radius: var(--radius-tab); overflow: hidden; background: var(--color-bg-kv); }
.job-card__body { padding: 18px 4px 0; }
.job-card__title { font-size: 17px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading); }
.job-card__text { margin-top: 4px; font-size: 13px; line-height: 1.7; letter-spacing: var(--ls-ja); }
.job-card:nth-child(1) img { object-position: 72% 30%; }
.job-card:nth-child(2) img { object-position: 56% 30%; }
.job-card:nth-child(3) img { object-position: 74% 30%; }
.job-card:nth-child(4) img { object-position: 75% 40%; } /* 左下の小物が入らないよう右へ */

/* =========================================================
   5 03 社員を知る：淡いオレンジ白の地。横のカルーセル（次のカードが右にのぞく）
   ========================================================= */
.people {
  display: grid;
  grid-template-columns: minmax(var(--side), 1fr) minmax(0, calc(var(--container) * .62)) minmax(0, calc(var(--container) * .38)) minmax(var(--side), 1fr);
  padding: var(--section-py) 0;
  background: var(--color-bg-page);
}
.people > .sec-head { grid-column: 2 / 4; grid-row: 1; }
.people > .carousel { grid-column: 1 / -1; grid-row: 2; min-width: 0; margin-top: 36px; }
.people__foot { grid-column: 2 / 4; grid-row: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }

.carousel__track {
  --pad: max(var(--side), calc((100% - var(--container)) / 2));
  display: flex; gap: 16px;
  padding: 4px var(--pad) 28px; scroll-padding-inline: var(--pad);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.carousel__track.is-drag a { pointer-events: none; }
.carousel-nav { display: none; gap: 12px; }
.carousel-btn {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%; background: var(--color-bg); color: var(--color-ink);
  box-shadow: var(--shadow-float); cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), opacity var(--dur-ui) linear;
}
.carousel-btn svg { width: 14px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.carousel-btn--prev svg { transform: scaleX(-1); }
.carousel-btn:hover:not(:disabled) { background: var(--color-layer); }
.carousel-btn:disabled { opacity: .4; cursor: default; }

.person-card { --card-r: var(--radius-tab); flex: 0 0 78%; scroll-snap-align: start; }
.person-card__link {
  display: flex; flex-direction: column; height: 100%;
  padding: 8px 8px 24px;
  border-radius: var(--radius-tab); background: var(--color-bg);
}
.person-card__photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-m); overflow: hidden; background: var(--color-bg-kv); }
.person-card__tab { /* 垂れ下がるタブ（新卒入社／キャリア入社） */
  position: absolute; z-index: 2; top: 0; left: 28px;
  padding: 9px 14px 8px;
  border-radius: 0 0 var(--radius-chip) var(--radius-chip);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: var(--ls-heading);
}
.person-card__body { padding: 18px 12px 0; }
.person-card__meta { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.person-card__title { margin-top: 8px; font-size: 17px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: var(--ls-heading); }
.person-card--talk .person-card__title { margin-top: calc(8px + 13px * 1.5); } /* 座談会はメタ行がないので、見出しの高さを揃える */
.person-card:nth-child(1) img { object-position: 54% 20%; }
.person-card:nth-child(2) img { object-position: 84% 25%; }
.person-card:nth-child(3) img { object-position: 52% 20%; }
.person-card:nth-child(4) img { object-position: 50% 30%; }

/* =========================================================
   6 04 環境を知る：白い地に、淡いオレンジ白の大きな面を1枚（札は重ねない）。中の数字は白いタイル＋動く図解（M15）
   ========================================================= */
.env { padding: var(--section-py) var(--side) calc(var(--section-py) + var(--radius-xl)); background: var(--color-bg); }
.env__inner {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "stack" "actions"; row-gap: 44px;
  max-width: var(--container); margin: 0 auto;
}
.env__inner > .sec-head { grid-area: head; }
.env__inner > .sec-actions { grid-area: actions; }
.env-stack { grid-area: stack; position: relative; }
.env-stack__card {
  position: relative;
  display: grid; row-gap: 28px;
  padding: 28px 18px 24px;
  border-radius: var(--radius-xl); background: var(--color-bg-page);
  transition: opacity .5s linear .2s, transform .9s var(--ease-out) .2s;
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .page:not([data-anim="static"]) .env-stack:not(.is-act) .env-stack__card { opacity: 0; transform: translateY(24px); }
}
.env-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.env-num { display: grid; align-content: start; padding: 16px 16px 14px; border-radius: var(--radius-m); background: var(--color-bg); }
.env-num__ig { width: min(100%, 150px); margin: 12px 0 0 auto; } /* M15 動く図解（SP・タブレットは数字の下、右寄せ） */
.ig-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.env-num dt { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.env-num dd { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.env-num .num { font-size: calc(var(--fs-num) * .85); }
.env-perks__title { font-size: 15px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading); }
.env-perks__list { margin-top: 6px; }
.env-perks__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 2px; border-bottom: 1px solid var(--color-line);
  font-size: 15px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja);
}
.env-perks__value { font-size: 17px; white-space: nowrap; }

/* =========================================================
   7 05 メディアで知る：オレンジの全幅の帯（上端の角丸）。白い文字、縦長の動画カード3本
   ========================================================= */
.media {
  position: relative; z-index: 1;
  margin-top: calc(var(--radius-xl) * -1);
  padding: calc(var(--section-py) * 1.1) var(--side) calc(var(--section-py) * 1.2);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-brand); color: var(--color-on-brand);
}
.media .label-en { color: var(--color-on-brand); } /* オレンジの帯の上は白を透かさない（オレンジ版） */
.media .sec-title { color: var(--color-on-brand); }
.media__inner {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "list" "actions"; row-gap: 40px;
  max-width: var(--container); margin: 0 auto;
}
.media__head { grid-area: head; }
.media__actions { grid-area: actions; }
.media__list {
  grid-area: list;
  display: flex; gap: 16px;
  margin: 0 calc(var(--side) * -1); padding: 0 var(--side) 16px; scroll-padding-inline: var(--side);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.media__list::-webkit-scrollbar { display: none; }
.video-card { --card-r: var(--radius-m); --card-layer: var(--color-brand-mid); flex: 0 0 56%; scroll-snap-align: start; }
.video-card::before { inset: 0 auto auto 0; width: 100%; aspect-ratio: 9 / 16; }
.video-card__link { display: block; padding-bottom: 4px; }
.video-card__poster { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-m); overflow: hidden; background: var(--color-brand-hover); }
.video-card:nth-child(1) img { object-position: 58% 50%; }
.video-card:nth-child(2) img { object-position: 30% 50%; }
.video-card:nth-child(3) img { object-position: 42% 50%; }
.video-card__play {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: var(--color-bg); color: var(--color-brand);
  transition: scale .4s var(--ease-back);
}
.video-card__play svg { width: 16px; height: 18px; margin-left: 4px; fill: currentColor; }
.video-card__link:hover .video-card__play { scale: 1.1; }
.video-card__time {
  position: absolute; z-index: 1; left: 12px; bottom: 12px;
  padding: 5px 10px; border-radius: var(--radius-chip);
  background: var(--color-bg); color: var(--color-ink);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: var(--ls-ja);
}
.video-card__title { margin-top: 16px; font-size: 16px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading); color: var(--color-on-brand); }

/* =========================================================
   8 06 採用情報：淡いオレンジ白の地。オレンジの12pxの枠＋白い内パネル、左上から垂れ下がるラベル「募集中」
   ========================================================= */
.jobs { padding: calc(var(--section-py) * .8) var(--side); background: var(--color-bg-page); }
.jobs__frame {
  max-width: var(--container); margin: 0 auto; padding: 12px;
  border-radius: calc(var(--radius-m) + 12px); background: var(--color-brand);
}
.jobs__panel {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "body" "actions"; row-gap: 36px;
  padding: 76px 16px 32px;
  border-radius: var(--radius-m); background: var(--color-bg);
}
.jobs__panel > .sec-head { grid-area: head; }
.jobs__panel > .sec-actions { grid-area: actions; }
.jobs__panel .btn-sub { background: var(--color-tint); }
.jobs__panel .btn-sub:hover { background: var(--color-layer); }
.jobs__tab { /* 枠のオレンジから垂れ下がるラベル */
  position: absolute; top: 0; left: 32px;
  padding: 6px 20px 10px;
  border-radius: 0 0 var(--radius-chip) var(--radius-chip);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: 14px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .14em;
}
.jobs__tab::before, .jobs__tab::after { content: ""; position: absolute; top: 0; width: 10px; height: 10px; }
.jobs__tab::before { right: 100%; background: radial-gradient(circle at 0 100%, transparent 10px, var(--color-brand) 10.5px); }
.jobs__tab::after { left: 100%; background: radial-gradient(circle at 100% 100%, transparent 10px, var(--color-brand) 10.5px); }

.jobs__body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
.jobs-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 0 12px 0 0; }
.type-card { --card-r: var(--radius-s); }
.type-card__link { display: block; }
.type-card__photo { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-s); overflow: hidden; background: var(--color-bg-kv); }
.type-card__photo .card-arw { right: 8px; bottom: 8px; width: 36px; height: 36px; }
.type-card:nth-child(1) img { object-position: 60% 35%; }
.type-card:nth-child(2) img { object-position: 50% 25%; }
.type-card__body { padding: 16px 2px 0; }
.type-card__chip {
  display: inline-block; padding: 3px 10px 4px;
  border-radius: var(--radius-chip); background: var(--color-brand); color: var(--color-on-brand);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading);
}
.type-card__title { margin-top: 8px; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading); }
.type-card__text { margin-top: 2px; font-size: 13px; line-height: 1.7; letter-spacing: var(--ls-ja); }

.jobs-list { margin-top: 32px; border-top: 1px solid var(--color-line); }
.jobs-list li { border-bottom: 1px solid var(--color-line); }
.jobs-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px;
  min-height: 64px; padding: 14px 4px;
  transition: background-color var(--dur-ui) var(--ease-out);
}
.jobs-row:hover { background: var(--color-bg-page); }
.jobs-row__name { font-size: 16px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading); }
.jobs-row__meta { grid-column: 1 / -1; font-size: 13px; line-height: 1.6; letter-spacing: var(--ls-ja); }
.jobs-row__more { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--fw-bold); letter-spacing: var(--ls-ja); white-space: nowrap; }
.jobs-row__more .arw { width: 28px; height: 28px; }
.jobs-row__key {
  display: inline-block; margin-right: 8px; padding: 0 8px;
  border-radius: var(--radius-xs); background: var(--color-tint); color: var(--color-ink);
  font-size: 11px; font-weight: var(--fw-bold); line-height: 1.8; letter-spacing: .08em;
}
.jobs-row:hover .arw::before { transform: scale(1); }
.jobs-row:hover .arw svg { animation: arw-next .4s var(--ease-arrow); }

.jobs__side { display: grid; row-gap: 40px; align-content: start; }
.jobs-sub { font-size: 16px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading); }
.steps { margin-top: 16px; }
.step { position: relative; display: flex; align-items: center; gap: 16px; padding-bottom: 14px; }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before { /* STEP をつなぐ縦線 */
  content: ""; position: absolute; left: 39px; top: 32px; bottom: 2px; width: 2px; border-radius: 2px;
  background: var(--color-brand-soft);
}
.step__no {
  flex-shrink: 0; display: grid; place-items: center; width: 80px; height: 32px;
  border-radius: var(--radius-pill); background: var(--color-tint); color: var(--color-ink);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: .08em;
}
.step:last-child .step__no { background: var(--color-brand); color: var(--color-on-brand); }
.step__name { font-size: 15px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja); }

.events { margin-top: 10px; border-top: 1px solid var(--color-line); }
.event {
  display: grid; grid-template-columns: 6.6em minmax(0, 1fr); align-items: center; column-gap: 12px;
  min-height: 60px; padding: 10px 2px; border-bottom: 1px solid var(--color-line);
}
.event__date { grid-row: 1 / 3; font-size: 15px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .04em; }
.event__name { font-size: 14px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja); }
.event__place { font-size: 12px; line-height: 1.6; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }

/* =========================================================
   9 FAQ：白い地。中央（最大 880px）に罫線の開閉リスト、右端に山形
   ========================================================= */
.faq { padding: var(--section-py) var(--side); background: var(--color-bg); }
.faq__inner { max-width: 880px; margin: 0 auto; }
.faq__list { margin-top: 36px; border-top: 1px solid var(--color-line); }
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__q {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  min-height: 76px; padding: 14px 0;
  font-size: 15px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja);
  list-style: none; cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__qtext { word-break: auto-phrase; text-wrap: balance; }
.faq__a p { text-wrap: pretty; } /* 「…ありますか？」の1字だけが落ちないように */
.faq__mark {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--radius-xs); background: var(--color-brand); color: var(--color-on-brand);
  font-size: 15px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: 0;
}
.faq__mark--a { background: var(--color-tint); color: var(--color-ink); }
.faq__chev {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--color-bg-page);
  transition: transform .5s var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.faq__chev svg { width: 14px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.faq__q:hover .faq__chev { background: var(--color-layer); }
.faq__item[open]:not(.is-closing) .faq__chev { transform: rotate(180deg); }
.faq__a { overflow: hidden; }
.faq__a-in { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 0 0 24px; }
.faq__a-in p { padding-top: 4px; font-size: 15px; font-weight: var(--fw-medium); line-height: 1.9; letter-spacing: var(--ls-ja); }
.faq__more { margin-top: 24px; text-align: center; }

/* =========================================================
   10 エントリー帯：傾けた写真の帯5列が背景で流れ（M16）、中央に白い大パネル（文字とボタン）
   ========================================================= */
.entry-band {
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--section-py) var(--side) calc(var(--section-py) + var(--radius-xl));
  background: var(--color-brand);
}
.entry-loop { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.entry-loop::after { content: ""; position: absolute; inset: 0; background: var(--color-brand); opacity: .2; } /* 写真にオレンジを薄くかける（青の版は .34。オレンジは写真がくすむので薄めに） */
.entry-loop__wrap {
  position: absolute; left: 50%; top: 50%; width: 130%;
  display: flex; flex-direction: column; gap: 12px;
  transform: translate(-50%, -50%) rotate(-12deg);
}
.entry-loop__list { display: flex; gap: 12px; width: 250%; will-change: transform; }   /* motion.js で translateX */
.entry-loop__list li { flex: 0 0 calc((100% - 12px * 11) / 12); }                    /* 12枚で1列（6枚×2） */
.entry-loop__list img { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-m); background: var(--color-bg-kv); }
.entry-band__panel {
  position: relative;
  max-width: 860px; margin: 0 auto;
  padding: 52px 24px 40px;
  border-radius: var(--radius-xl); background: var(--color-bg);
  text-align: center;
}
.entry-band .label-en { justify-content: center; }
.entry-band__text .sec-actions { /* 2つのボタンを同じ幅に（広い「説明会・インターンを予約」に合わせる）。SP は縦積み */
  display: inline-grid; grid-template-columns: max-content; justify-content: center; gap: 20px; margin-top: 36px;
}
.entry-band__text .sec-actions > a { width: 100%; }
@media (min-width: 768px) {
  .entry-band__text .sec-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 24px; }
}
.entry-band .btn-sub { background: var(--color-tint); }
/* エントリーの文言はボタンの中央に（左右に矢印の円と同じ幅をとる） */
.entry-band .btn-entry { gap: 0; padding-left: 12px; }
.entry-band .btn-entry > span:first-child { flex: 1; padding-left: 32px; text-align: center; }
.entry-band .btn-sub:hover { background: var(--color-layer); }
@media (max-width: 834px) {
  .entry-loop__wrap { width: 170%; }
  .entry-loop__list { width: 540%; }   /* SP は写真を大きく */
}

/* =========================================================
   11 フッター：濃い茶（--color-anchor）の地・上端の角丸・白い文字
   ========================================================= */
.site-footer {
  position: relative; z-index: 1;
  margin-top: calc(var(--radius-xl) * -1);
  padding: 64px var(--side) 120px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-anchor); color: var(--color-on-brand);
}
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; max-width: var(--container); margin: 0 auto; }
.logo--white { min-height: 44px; color: var(--color-on-brand); }
.logo--white .logo__mark { background: var(--color-bg); color: var(--color-brand); }
.logo--white .logo__sub { color: rgba(255, 255, 255, .78); }
/* フッターのロゴは大きく（10/29） */
.site-footer .logo { gap: 14px; }
.site-footer .logo__mark { width: 46px; height: 44px; border-radius: 13px; font-size: 24px; }
.site-footer .logo__mark::after { left: 9px; bottom: -8px; width: 14px; height: 10px; }
.site-footer .logo__name { font-size: 18px; }
.site-footer .logo__sub { font-size: 11px; }
@media (min-width: 768px) {
  .site-footer .logo { gap: 16px; }
  .site-footer .logo__mark { width: 58px; height: 55px; border-radius: 16px; font-size: 30px; }
  .site-footer .logo__mark::after { left: 12px; bottom: -10px; width: 17px; height: 13px; }
  .site-footer .logo__name { font-size: 23px; }
  .site-footer .logo__sub { font-size: 13px; }
}
.site-footer__addr { display: grid; row-gap: 2px; margin-top: 28px; font-size: 14px; line-height: 1.8; letter-spacing: var(--ls-ja); }
.site-footer__addr div { display: flex; gap: 16px; }
.site-footer__addr dt { flex-shrink: 0; width: 2.8em; color: rgba(255, 255, 255, .78); }
.site-footer__contact { margin-top: 24px; font-size: 14px; line-height: 1.8; letter-spacing: var(--ls-ja); }
.site-footer__contact-label { font-size: 12px; letter-spacing: var(--ls-heading); color: rgba(255, 255, 255, .78); }
.site-footer__contact-name { font-weight: var(--fw-bold); }
.site-footer__contact a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: var(--fw-bold);
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 5px;
}
.site-footer__contact a:hover { text-decoration-color: currentColor; }
.site-footer__hours { font-size: 13px; color: rgba(255, 255, 255, .85); }
.site-footer__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.site-footer__cat { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: .08em; }
.site-footer__pages a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 13px; line-height: 1.5; letter-spacing: var(--ls-ja); color: rgba(255, 255, 255, .86);
}
.site-footer__pages a::before { content: ""; flex-shrink: 0; width: 8px; height: 1px; background: currentColor; }
.site-footer__cat:hover, .site-footer__pages a:hover, .site-footer__links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-footer__links {
  display: flex; flex-wrap: wrap; gap: 0 28px;
  margin-top: 28px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22);
}
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: var(--fw-bold); letter-spacing: var(--ls-ja); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; max-width: var(--container); margin: 40px auto 0; }
.site-footer__sns { display: flex; gap: 4px; margin-left: -10px; }
.site-footer__sns a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; transition: opacity var(--dur-ui) linear; }
.site-footer__sns a:hover { opacity: .7; }
.site-footer__sns svg { width: 22px; height: 22px; overflow: visible; }
.site-footer__sns li:last-child svg { width: 26px; height: 19px; }
.ft-fill { fill: currentColor; }
.ft-line { fill: none; stroke: currentColor; stroke-width: 2.2; }
.ft-cut { fill: var(--color-anchor); } /* フッターの地と同じ色で SNS のしるしを抜く */
.site-footer__copy small { font-size: 12px; letter-spacing: .08em; color: rgba(255, 255, 255, .78); }
.site-footer__note {
  max-width: var(--container); margin: 20px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 12px; line-height: 1.8; letter-spacing: var(--ls-ja); color: rgba(255, 255, 255, .78);
}

/* =========================================================
   タブレット（768px から）
   ========================================================= */
@media (min-width: 768px) {
  .sec-text { margin-top: 16px; }
  .sec-actions { gap: 20px 32px; }

  .about__panel { padding: 88px 48px 56px; }
  .about__window { top: -48px; right: 40px; width: 220px; }
  .about-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .about-point__in { padding: 24px 28px 26px; }
  .about-point__title { font-size: 19px; }

  .work__list { gap: 40px 24px; }
  .job-card::before, .job-card__photo { aspect-ratio: 4 / 3; }
  .job-card__title { font-size: 19px; }
  .job-card__text { font-size: 14px; }

  .carousel__track { gap: 20px; }
  .person-card { flex-basis: 44%; }

  .env-stack__card { padding: 40px 36px 32px; }
  .env-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .env-num { padding: 20px 20px 18px; }

  .video-card { flex-basis: 34%; }
  .video-card__title { font-size: 17px; }

  .jobs__panel { padding: 88px 36px 40px; }
  .jobs__tab { left: 40px; }
  .jobs-types { gap: 20px 24px; }
  .type-card__title { font-size: 20px; }

  .faq__q { min-height: 88px; font-size: 17px; column-gap: 18px; }
  .faq__mark { width: 40px; height: 40px; font-size: 16px; }
  .faq__a-in { column-gap: 18px; padding-right: 58px; }
  .faq__a-in p { padding-top: 7px; font-size: 16px; }

  .entry-band__panel { padding: 72px 56px 64px; }

  .site-footer { padding-top: 80px; }
  .site-footer__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 職種の行：職種名｜区分・勤務地｜募集要項 の3列（列が広いタブレットと 1200px から。1024〜1199 は2段のまま） */
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1200px) {
  .jobs-row { grid-template-columns: 9em minmax(0, 1fr) auto; column-gap: 20px; }
  .jobs-row__meta { grid-column: 2; }
  .jobs-row__meta + .jobs-row__meta { grid-row: 2; }
  .jobs-row__name { grid-row: 1 / 3; }
  .jobs-row__more { grid-column: 3; grid-row: 1 / 3; }
}

/* =========================================================
   PC：左右に分ける（1024px から）
   ========================================================= */
@media (min-width: 1024px) {
  /* 01 会社を知る */
  .about__panel {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 64px;
    padding: 88px 64px 72px;
  }
  .about__main { display: flex; flex-direction: column; gap: 36px; }
  .about-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .about-points { align-self: start; padding-top: 84px; }
  .about__window { top: -56px; right: 64px; width: 260px; }

  /* 02 仕事を知る */
  .work__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head actions" "list list"; column-gap: 40px; row-gap: 56px; }
  .work__inner > .sec-actions { align-self: end; justify-content: flex-end; }
  .work__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

  /* 03 社員を知る */
  .people > .sec-head { grid-column: 2; }
  .people__foot { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; margin-top: 0; gap: 28px; }
  .people > .carousel { margin-top: 48px; }
  .carousel-nav { display: flex; }
  .carousel__track { gap: 24px; }
  .person-card { flex-basis: 31%; }
  .person-card__title { font-size: 18px; }

  /* 04 環境を知る */
  .env__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head actions" "stack stack"; column-gap: 40px; row-gap: 64px; }
  .env__inner > .sec-actions { align-self: end; justify-content: flex-end; }
  .env-stack__card { row-gap: 36px; padding: 56px; } /* 10/29：数字6つを全幅に（図解を入れる）、制度は下に横並び */
  .env-num { grid-template-columns: minmax(0, 1fr) 52%; grid-template-rows: auto 1fr; column-gap: 4px; min-height: 184px; padding: 22px 18px 18px 24px; }
  .env-num dt { grid-column: 1; grid-row: 1; }
  .env-num dd:not(.env-num__ig) { grid-column: 1; grid-row: 2; align-self: end; }
  .env-num__ig { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 100%; margin: 0; }
  .env-perks { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 48px; }
  .env-perks__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; margin-top: 0; }

  /* 05 メディアで知る */
  .media__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
    grid-template-areas: "head list" "actions list"; column-gap: 64px; row-gap: 36px;
  }
  .media__actions { align-self: start; flex-direction: column; align-items: flex-start; }
  .media__list { align-self: center; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0 12px 12px 0; overflow: visible; }
  .video-card::before, .video-card__poster { aspect-ratio: 3 / 4; }

  /* 06 採用情報（見出しとボタンの横並びは 1200px から） */
  .jobs__panel { row-gap: 44px; padding: 100px 56px 56px; }
  .jobs__tab { left: 56px; padding: 8px 24px 12px; font-size: 15px; }
  .jobs__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; }

  /* 10 エントリー帯 */
  .entry-band__panel { padding: 80px 72px 80px; }

  /* 11 フッター */
  .site-footer { padding: 96px var(--side) 48px; }
  .site-footer__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; }
}

/* =========================================================
   PC（1200px から：文字サイズ・余白が最大）
   ========================================================= */
@media (min-width: 1200px) {
  .text-link { font-size: 16px; }
  .about__panel { padding: 96px 80px 80px; column-gap: 80px; }
  .about__window { right: 80px; width: 280px; }
  .about-points { padding-top: 92px; }
  .job-card__title { font-size: 20px; }
  .person-card__title { font-size: 19px; }
  .env-stack__card { padding: 64px; }
  .env-perks__list li { font-size: 16px; }
  .env-perks__value { font-size: 18px; }
  .video-card__title { font-size: 18px; }
  .media__inner { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); column-gap: 56px; }
  .jobs__panel {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head actions" "body body";
    column-gap: 40px; padding: 104px 64px 64px;
  }
  .jobs__panel > .sec-actions { align-self: end; justify-content: flex-end; }
  .jobs__tab { left: 64px; }
  .entry-band__panel { padding: 88px 80px 88px; }
}

/* 1024〜1199：制度ピックアップは見出しを上に置き、3列に全幅を使う（「フレックス」が折れないように） */
@media (min-width: 1024px) and (max-width: 1199px) {
  .env-perks { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
}