/* CAREER JOURNEY — Tailwindのユーティリティで書くと冗長になる繰り返し部品 */
:root {
  --ink: #141414;
  --paper: #FAF8F5;
  --line: #E7E3DD;
  --muted: #6B6760;
  --accent: #EB4962;
  --accent-dark: #D3354F;
  --accent-soft: #FDE8EC;
  --fv-border: #D6D1C9; /* 動画枠の線。白い映像でも枠が分かるように */
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 見出し */
.chapter-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 18px;
  font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .14em;
  color: var(--muted);
}
.chapter-label span {
  background: var(--ink); color: #fff;
  padding: 7px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: .06em;
}
@media (max-width: 767px) {
  .chapter-label { font-size: 13px; }
  .chapter-label span { padding: 6px 14px; font-size: 13px; }
}
/* 会社を知る・社員を知る・福利厚生・働き方・数字で知る：章タグ（黒）と区別する白地＋黒枠のタグ */
.chapter-label--topic span { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
/* 上の4ブロックの上の余白をそろえる（前のブロックの下余白は0にして、ここだけで間隔を取る） */
:root { --topic-gap: 80px; }
@media (max-width: 767px) { :root { --topic-gap: 56px; } }
.topic-gap { padding-top: var(--topic-gap); }
.topic-gap-m { margin-top: var(--topic-gap); }
.section-title { font-size: clamp(28px, 4.2vw, 44px); font-weight: 900; line-height: 1.35; letter-spacing: -.01em; }
.lead { margin-top: 18px; max-width: 46rem; font-size: 17px; line-height: 1.9; color: var(--muted); }

/* 写真の差し替え枠 */
.photo {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(135deg, #EFEBE5 0 14px, #F5F2ED 14px 28px);
  color: #9A948B; font-size: 12px; line-height: 1.8;
}

/* 選択肢 */
.choice {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-height: 168px; padding: 24px; text-align: left;
  background: #fff; border: 1.5px solid var(--line); border-radius: 22px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.choice:hover { border-color: var(--ink); transform: translateY(-2px); }
.choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.choice::after {
  content: ""; position: absolute; right: 20px; bottom: 20px;
  width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--line);
}
.choice[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.choice[aria-pressed="true"]::after {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='white'%3E%3Cpath d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/14px no-repeat;
}
.choice-en { font-family: Inter, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--accent); }
.choice-title { font-size: 20px; font-weight: 700; }
.choice-text { font-size: 14px; color: var(--muted); padding-right: 32px; }

/* カード・数字 */
.card { background: var(--paper); border-radius: 20px; padding: 22px; }
#company .card { background: var(--paper); }
.card-en { font-family: Inter, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--accent); }
.card-text { margin-top: 8px; font-size: 14px; line-height: 1.8; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.stat dt { font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.stat dd { margin-top: 6px; font-family: Inter, "Noto Sans JP", sans-serif; font-size: 32px; font-weight: 800; }
.stat p { font-size: 12px; color: var(--muted); }
.stat.is-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.stat.is-dark dt, .stat.is-dark p { color: rgba(255,255,255,.55); }
#numbers .stat dt { font-family: "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; } /* 日本語ラベル用 */

/* タイムライン・流れ */
.timeline-row { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.timeline-row .time { font-family: Inter, sans-serif; font-size: 18px; font-weight: 800; }
.timeline-row p { margin-top: 2px; font-size: 14px; color: var(--muted); }

/* ステップ（3ヶ月経過・1年経過）：番号の丸を線でつなぐ。PCは横並び、スマホは縦並び */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; display: flex; flex-direction: column; gap: 18px; }
.step::before { /* 次のステップへの線 */
  content: ""; position: absolute; top: 31px; left: 64px; right: -24px;
  height: 2px; background: var(--line);
}
.step:last-child::before { display: none; }
.step__num {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 999px;
  background: #fff; border: 2px solid var(--ink);
  font-family: Inter, sans-serif; font-size: 18px; font-weight: 800;
}
.step.is-goal .step__num { background: var(--accent); border-color: var(--accent); color: #fff; }
.step__title { font-size: 20px; font-weight: 700; }
.step__desc { margin-top: 4px; font-size: 14px; color: var(--muted); }
@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { flex-direction: row; align-items: flex-start; gap: 16px; padding-bottom: 24px; }
  .step:last-child { padding-bottom: 0; }
  .step::before { top: 52px; bottom: 0; left: 25px; right: auto; width: 2px; height: auto; }
  .step__num { width: 52px; height: 52px; font-size: 16px; flex: none; }
  .step__title { padding-top: 12px; font-size: 18px; }
}

/* リスト */
.check-list li, .cross-list li { position: relative; padding: 6px 0 6px 28px; font-size: 15px; }
.check-list li::before, .cross-list li::before {
  position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 999px;
  font-size: 11px; line-height: 18px; text-align: center; font-weight: 700;
}
.check-list li::before { content: ""; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='white'%3E%3Cpath d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cross-list li::before { content: ""; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='white'%3E%3Cpath d='M204.24,195.76a6,6,0,1,1-8.48,8.48L128,136.49,60.24,204.24a6,6,0,0,1-8.48-8.48L119.51,128,51.76,60.24a6,6,0,0,1,8.48-8.48L128,119.51l67.76-67.75a6,6,0,0,1,8.48,8.48L136.49,128Z'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* 福利厚生 */
.benefits { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } /* PCで3列、スマホで1列 */
.benefit { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border-radius: 20px; background: var(--paper); }
.benefit__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.benefit__icon .icon { font-size: 26px; }
.benefit__name { padding-top: 12px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.benefit__desc { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--muted); }

.person { padding: 16px 16px 22px; border-radius: 22px; background: var(--paper); }

/* 募集要項 */
.job { padding: 24px; border-radius: 22px; border: 1px solid var(--line); }
.job h3 { font-family: Inter, sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 14px; }
.job dl { display: grid; grid-template-columns: 88px 1fr; font-size: 14px; border-top: 1px solid var(--line); }
.job dt, .job dd { padding: 10px 0; border-bottom: 1px solid var(--line); }
.job dt { font-weight: 700; }

/* フォーム */
.field { display: block; margin-top: 16px; }
.field > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.field em { margin-left: 6px; font-style: normal; font-size: 11px; color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 16px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field input[type="file"] { padding: 10px; font-size: 14px; background: #fff; }
.field input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 6px 14px; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.field-help { margin-top: 6px; font-size: 12px; color: var(--muted); }
.privacy { border: 1px solid var(--line); border-radius: 12px; }
.privacy summary { cursor: pointer; padding: 12px 14px; font-size: 13px; font-weight: 700; }
.privacy__body { max-height: 160px; overflow-y: auto; padding: 0 14px 14px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.consent { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; font-weight: 700; }
.consent input { width: 18px; height: 18px; flex: none; }
.consent em { margin-left: 6px; font-style: normal; font-size: 11px; color: var(--accent); }

/* 縦の時間軸ナビ（初出社〜3年後）：目盛り＋番号＋縦書きの章名。本文に重ならない細さにする */
.jnav {
  position: fixed; left: 28px; top: 50%; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  transform: translateY(-50%); transition: opacity .35s, transform .35s;
}
.jnav.is-hidden { opacity: 0; transform: translate(-12px, -50%); pointer-events: none; }
.jnav__count { font-family: Inter, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .04em; line-height: 1; color: var(--ink); }
.jnav__count span { margin-left: 3px; font-size: 10px; font-weight: 600; color: var(--muted); }
.jnav ol { display: flex; flex-direction: column; }
.jnav__item { position: relative; display: flex; align-items: center; width: 40px; height: 18px; }
.jnav__tick { display: block; width: 12px; height: 2px; border-radius: 2px; background: #CFC8BE; transition: width .35s ease, background-color .35s ease; }
.jnav__item.is-done .jnav__tick { background: var(--ink); }
.jnav__item.is-current .jnav__tick { width: 32px; background: var(--accent); }
.jnav__item:not(.is-current):hover .jnav__tick { width: 22px; background: var(--ink); }
/* ほかの章名：マウスを乗せた／キーボードで選んだときだけ表示 */
.jnav__label {
  position: absolute; left: 44px; top: 50%; transform: translate(-4px, -50%);
  padding: 4px 10px; border-radius: 999px; background: rgba(20, 20, 20, .88); color: #fff;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.jnav__item:hover .jnav__label, .jnav__item:focus-visible .jnav__label { opacity: 1; transform: translate(0, -50%); }
.jnav__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* 今の章名：縦書き */
.jnav__current {
  writing-mode: vertical-rl; margin-left: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .24em; color: var(--ink);
  transition: opacity .25s;
}
.jnav__current.is-changing { opacity: 0; }
/* スマホ：画面右端に。番号とホバーの章名は出さず、目盛りと縦書きの章名だけ */
@media (max-width: 767px) {
  .jnav { left: auto; right: 10px; align-items: flex-end; gap: 12px; }
  .jnav.is-hidden { transform: translate(12px, -50%); }
  .jnav__count { display: none; }
  .jnav__item { justify-content: flex-end; width: 28px; height: 14px; }
  .jnav__tick { width: 8px; }
  .jnav__item.is-current .jnav__tick { width: 20px; }
  .jnav__label { display: none; }
  .jnav__current { margin: 0 2px 0 0; font-size: 10px; }
}

/* =========================================================
   ヘッダー・ファーストビュー（Figma: リクルート / node 54:635）
   デザイン基準幅 1500px。左右余白40px、動画枠の角丸30px。
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 100px; background: transparent;
  transition: height .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.site-header__inner {
  position: relative; height: 100%;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 40px;
}

/* ロゴのタブ：動画枠に食い込む白い台座。形と枠線は index.html 内のSVG（PC用・SP用）で描く */
.logo-tab {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 224.5px; height: 157.92px;
}
.logo-tab__logo { position: absolute; left: 30px; top: 30px; width: 160px; height: 99px; }
.logo-tab__logo { z-index: 1; }
.logo-tab__shape { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.logo-tab__shape--sp { display: none; }
.logo-tab__fill { fill: #fff; }
.logo-tab__line { fill: none; stroke: var(--fv-border); stroke-width: 1; }
.logo-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* メニュー */
.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav__list { display: flex; }
.site-nav__list a {
  display: block; padding: 10px 14px;
  font-size: 16px; font-weight: 600; letter-spacing: .07em; line-height: 1; color: #111;
  transition: color .2s;
}
.site-nav__list a:hover { color: var(--accent); }
.btn-entry {
  display: inline-flex; align-items: center; justify-content: center;
  width: 140px; height: 50px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; line-height: 1;
  transition: background-color .2s, transform .2s;
}
.btn-entry:hover { background: var(--accent-dark); }
.site-nav a:focus-visible, .btn-entry:focus-visible, .menu-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.menu-button { display: none; }

/* スクロール後：細いヘッダーに */
.header-logo {
  position: absolute; left: 24px; top: 10px; width: 84px; height: 52px;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.header-logo img { width: 100%; height: 100%; }
.header-logo:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.site-header.is-scrolled, .site-header.is-menu-open { height: 72px; background: #fff; box-shadow: 0 1px 0 var(--line); }
.site-header.is-scrolled .header-logo, .site-header.is-menu-open .header-logo { opacity: 1; visibility: visible; }

/* ファーストビュー */
.fv { position: relative; padding: 100px 0 52px; background: #fff; }
.fv__media {
  position: relative; margin: 0 40px;
  height: clamp(480px, calc(100svh - 152px), 860px);
  border-radius: 30px; overflow: hidden;
  background: var(--fv-bg, #B3A3E4);
}
.fv__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv__media::after { /* 枠線は動画の上に重ねる（動画に隠れないように） */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border: 1px solid var(--fv-border); border-radius: inherit;
}
.fv__actions { position: absolute; left: 60px; bottom: 60px; z-index: 2; display: flex; gap: 30px; }
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px; padding: 0 30px; border-radius: 999px;
  font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.btn-primary { gap: 30px; background: #111; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); } /* 暗い映像の上でも輪郭が見えるように */
.btn-primary:hover { background: var(--accent); }
.btn-secondary { background: #fff; color: #111; box-shadow: inset 0 0 0 1px rgba(17,17,17,.14); } /* 白い映像の上でも輪郭が見えるように */
.btn-secondary:hover { background: #111; color: #fff; }
.btn-primary:focus-visible, .btn-secondary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fv__toggle {
  position: absolute; right: 24px; bottom: 24px; z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(17,17,17,.55); color: #fff; font-size: 20px;
  backdrop-filter: blur(6px); transition: background-color .2s;
}
.fv__toggle:hover { background: rgba(17,17,17,.8); }
.fv__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* スマホ・タブレット（1023px以下）：メニューはMENUボタンに格納 */
@media (max-width: 1023px) {
  .site-header { height: 72px; }
  .site-header__inner { padding: 0 16px; }
  .site-nav { display: none; }
  .menu-button {
    display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
    border: 1px solid var(--line); border-radius: 999px; background: #fff;
    font-family: Inter, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .08em;
  }
  .logo-tab { width: 150px; height: 106px; }
  .logo-tab__shape--pc { display: none; }
  .logo-tab__shape--sp { display: block; }
  .logo-tab__logo { left: 20px; top: 20px; width: 107px; height: 66px; }
  .header-logo { left: 16px; top: 12px; width: 77px; height: 48px; }

  .fv { padding: 72px 0 24px; }
  .fv__media { margin: 0 16px; height: clamp(440px, calc(100svh - 96px), 760px); border-radius: 24px; }
  .fv__actions { left: 20px; right: 20px; bottom: 20px; flex-direction: column; gap: 12px; }
  .btn-primary, .btn-secondary { height: 56px; width: 100%; }
  .btn-primary { justify-content: space-between; }
  .fv__toggle { top: 16px; right: 16px; bottom: auto; }
}
.mobile-menu {
  position: absolute; inset: 72px 0 auto 0;
  max-height: calc(100svh - 72px); overflow-y: auto;
  background: #fff; border-top: 1px solid var(--line);
  padding: 8px 16px 24px; box-shadow: 0 16px 32px rgba(0,0,0,.08);
}
.mobile-menu li a { display: block; padding: 18px 4px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; letter-spacing: .07em; }
.btn-entry--block { width: 100%; height: 56px; margin-top: 20px; }
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }

/* ===== 初出社：タイムライン（時刻＋細い線＋項目名。アイコン・カードなし） ===== */
.tl { --tl-col: 104px; position: relative; display: grid; }
.tl::before, .tl::after { /* 縦の細線と、スクロールで伸びる赤い線 */
  content: ""; position: absolute; left: calc(var(--tl-col) + 11.5px); top: 26px; bottom: 26px; width: 1px;
}
.tl::before { background: var(--line); }
.tl::after { background: var(--accent); transform-origin: top; transform: scaleY(var(--tl-progress, 1)); }
.tl-row { position: relative; display: grid; grid-template-columns: var(--tl-col) 24px 1fr; align-items: center; min-height: clamp(48px, 7svh, 60px); }
.tl-time {
  font-family: Inter, sans-serif; font-size: 30px; font-weight: 300; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ink); transition: color .5s ease;
}
.tl-colon { margin: 0 1px; color: var(--accent); }
.tl-dot {
  position: relative; z-index: 1; justify-self: center; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px #fff; transition: background-color .5s ease, transform .5s ease;
}
.tl-title {
  align-self: stretch; display: flex; align-items: center; margin-left: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 17px; font-weight: 600; letter-spacing: .04em; color: var(--ink);
  transition: color .5s ease, transform .3s ease;
}
.tl-row:last-child .tl-title { border-bottom: 0; }
.tl-row:hover .tl-title { transform: translateX(4px); }
/* スクロール演出あり：線が届くまでは薄く、届いたら点が灯って文字が濃くなる */
.tl.is-animated .tl-row:not(.is-lit) .tl-time { color: #CFC8BE; }
.tl.is-animated .tl-row:not(.is-lit) .tl-colon { color: #CFC8BE; }
.tl.is-animated .tl-row:not(.is-lit) .tl-title { color: var(--muted); }
.tl.is-animated .tl-row:not(.is-lit) .tl-dot { background: #CFC8BE; transform: scale(.8); }
.tl.is-animated .tl-row.is-lit .tl-dot { transform: scale(1.3); }
@media (max-width: 639px) {
  .tl { --tl-col: 76px; }
  .tl-time { font-size: 23px; }
  .tl-title { font-size: 15px; }
}

/* ===== 初出社：縦動画カルーセル（Instagram / TikTok） ===== */
.reels { --reel-h: 600px; width: min(100%, calc(var(--reel-h) * 9 / 16)); margin-inline: auto; }
.reels__viewport { border-radius: 26px; overflow: hidden; box-shadow: 0 24px 60px rgba(20, 20, 20, .14); }
.reels__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reels__track::-webkit-scrollbar { display: none; }
.reel { position: relative; flex: 0 0 100%; aspect-ratio: 9 / 16; scroll-snap-align: center; background: #111; }
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  background: repeating-linear-gradient(135deg, #EFEBE5 0 14px, #F5F2ED 14px 28px); color: #9A948B; font-size: 12px; line-height: 1.8;
}
.reel__ph strong { font-family: Inter, sans-serif; font-size: 13px; letter-spacing: .12em; color: var(--muted); }
.reel__badge {
  position: absolute; left: 14px; top: 14px; z-index: 1; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--ink); font-family: Inter, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .06em;
}
.reel__link {
  position: absolute; right: 14px; bottom: 14px; z-index: 1; padding: 8px 14px; border-radius: 999px;
  background: rgba(20, 20, 20, .72); color: #fff; font-size: 12px; font-weight: 700;
}
.reels__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.reels__btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  font-weight: 800; transition: background .2s, color .2s, border-color .2s;
}
.reels__btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.reels__btn:disabled { opacity: .35; pointer-events: none; }
.reels__dots { display: flex; gap: 8px; }
.reels__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: width .25s, background .25s; }
.reels__dot.is-active { width: 22px; background: var(--accent); }
@media (min-width: 1024px) {
  /* header 72px (= scroll-mt-[72px]); 54px = carousel controls */
  .day1 { min-height: calc(100svh - 72px); }
  .reels { --reel-h: min(640px, calc(100svh - 72px - 64px - 54px)); width: calc(var(--reel-h) * 9 / 16); }
}
/* 初出社の見出しはスマホで1行ずつ収まるサイズに */
.day1 .section-title { font-size: clamp(25px, 4.2vw, 44px); }

/* =========================================================
   社員を知る（1ヶ月経過のカルーセル／詳細ページ共通カード）
   ========================================================= */
.people { margin-top: var(--topic-gap); }
/* カード幅は本文幅基準。2枚＋3枚目が本文の右端で見切れる幅（どの画面幅でも同じ見え方） */
.people, .people-scope { container-type: inline-size; }
.people__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.people__nav { display: flex; gap: 10px; flex: none; }
.people__nav[hidden] { display: none; }
.people__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0;
  padding: 4px 4px 12px; margin: -4px -4px 0; scrollbar-width: none; overscroll-behavior-x: contain;
}
.people__track::-webkit-scrollbar { display: none; }
.person-card { flex: 0 0 calc((100cqw - 40px) / 2.4); scroll-snap-align: start; }
.person-card > a {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(20, 20, 20, .05);
  transition: transform .3s ease, box-shadow .3s ease;
}
.person-card > a:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 0 18px 40px rgba(20, 20, 20, .1); }
.person-card > a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.person-card__photo { display: flex; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.person-card > a:hover .person-card__photo { transform: scale(1.03); }
.person-card__badge {
  position: absolute; left: 14px; top: 14px; padding: 4px 10px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
}
.person-card__body { position: relative; display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; background: #fff; }
.person-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.person-card__meta span {
  padding: 3px 9px; border-radius: 999px; background: var(--ink); color: #fff;
  font-family: Inter, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .08em;
}
.person-card__quote { font-size: 16px; font-weight: 700; line-height: 1.65; }
.person-card__name { font-size: 12px; color: var(--muted); }
.person-card__more { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--accent); }
@media (max-width: 767px) {
  .people { margin-top: 56px; }
  .people__head { align-items: flex-start; flex-direction: column; }
  .people__nav { display: none; }
  .person-card { flex-basis: 78cqw; }
}

/* 詳細ページ（interview.html） */
.iv-hero { display: grid; gap: 40px; align-items: center; }
.iv-photo { display: flex; width: 100%; aspect-ratio: 1 / 1; border-radius: 28px; object-fit: cover; }
.iv-quote { font-size: clamp(24px, 3.2vw, 36px); font-weight: 900; line-height: 1.5; }
.iv-qa { display: grid; gap: 16px; }
.iv-qa__item { display: grid; gap: 10px; padding: 28px; border-radius: 24px; background: #fff; }
.iv-qa__q { display: flex; gap: 12px; font-size: 18px; font-weight: 700; line-height: 1.6; }
.iv-qa__q::before { content: "Q"; flex: none; font-family: Inter, sans-serif; font-weight: 800; color: var(--accent); }
.iv-qa__a { padding-left: 26px; line-height: 1.95; color: #4A4744; }
@media (min-width: 1024px) {
  .iv-hero { grid-template-columns: 420px 1fr; gap: 64px; }
}
/* 白背景のセクションでは、カードを生成り色にして背景と分ける */
#month1 .person-card > a, #month1 .person-card__body { background: var(--paper); }
#month1 .person-card > a { box-shadow: none; }
#month1 .person-card > a:hover { box-shadow: 0 14px 34px rgba(20, 20, 20, .08); }

/* 会社を知る：代表メッセージへのリンク */
.stat__link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--accent); }
.stat__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* 代表メッセージ（message.html） */
.msg-body { max-width: 46rem; margin-inline: auto; display: grid; gap: 1.6em; font-size: 17px; line-height: 2.1; }

/* カード群の左上につける補足ラベル（例：会社を知るの「事業内容」） */

/* =========================================================
   半年経過：会社のメッセージ「つくるものではなく、課題から考える。」
   ========================================================= */
.msg6-text { display: grid; align-content: start; gap: 1.6em; max-width: 46rem; font-size: 17px; line-height: 2.1; }
.msg6-close { margin-top: .6em; font-size: clamp(20px, 2.4vw, 28px); font-weight: 900; line-height: 1.6; }
@media (max-width: 767px) {
  .msg6-text { font-size: 15px; }
}

/* =========================================================
   数字で知る（numbers.js が描くカードとグラフ）
   ========================================================= */
.numbers-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .numbers-grid { grid-template-columns: repeat(2, 1fr); } }
.num-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: 260px; padding: 24px 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff;
}
.num-card__label { font-size: 14px; font-weight: 700; line-height: 1.5; text-wrap: balance; } /* 長い項目名を2行に均等に割る */
.num-card__label::after { content: ""; display: block; width: 24px; height: 2px; margin: 10px auto 0; background: var(--accent); }
.num-card__icon { /* 数字の後ろに薄く敷くアイコン */
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  font-size: 120px; color: var(--line);
}
.num-card__value {
  position: relative; margin: auto 0;
  font-family: Inter, "Noto Sans JP", sans-serif; font-size: 48px; font-weight: 800; line-height: 1;
}
.num-card__value small { margin-left: 4px; font-size: 16px; font-weight: 700; }
.num-card__note { position: relative; margin-top: 8px; font-size: 12px; color: var(--muted); }
.num-card__note.is-text { font-size: 13px; line-height: 1.7; }

.num-chart { position: relative; width: 148px; height: 148px; margin: 18px 0 4px; }
.num-chart svg { width: 100%; height: 100%; overflow: visible; }
.num-chart circle { fill: none; }
.num-chart__track { stroke: var(--paper); stroke-width: 10; }
.num-chart__track.is-thick { stroke-width: 26; }
.num-chart__rate { stroke: var(--accent); stroke-width: 10; stroke-linecap: round; }
.num-chart__part { stroke-width: 26; }
.num-chart__part.is-1 { stroke: var(--ink); }
.num-chart__part.is-2 { stroke: var(--accent); }
.num-chart__rate, .num-chart__part { stroke-dasharray: 0 1000px; transition: stroke-dasharray 1.1s cubic-bezier(.2,.7,.2,1); }
.numbers-grid.is-in .num-chart__rate, .numbers-grid.is-in .num-chart__part { stroke-dasharray: var(--len) 1000px; }
.num-chart__center {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: Inter, "Noto Sans JP", sans-serif; font-size: 34px; font-weight: 800;
}
.num-chart__center small { font-size: 15px; }
.num-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 12px; font-size: 13px; font-weight: 700; }
.num-legend li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.num-legend b { font-family: Inter, sans-serif; font-size: 18px; }
.num-legend b small { font-size: 12px; }
.num-legend__swatch { width: 10px; height: 10px; border-radius: 3px; }
.num-legend__swatch.is-1 { background: var(--ink); }
.num-legend__swatch.is-2 { background: var(--accent); }

@media (max-width: 559px) { /* スマホも2列。カードとグラフを小さくして収める */
  .numbers-grid { gap: 10px; }
  .num-card { min-height: 200px; padding: 18px 10px; border-radius: 16px; }
  .num-card__label { font-size: 12px; }
  .num-card__icon { font-size: 84px; }
  .num-card__value { font-size: 34px; }
  .num-card__value small { margin-left: 2px; font-size: 12px; }
  .num-card__note { font-size: 10px; }
  .num-card__note.is-text { font-size: 11px; }
  .num-chart { width: 104px; height: 104px; margin-top: 12px; }
  .num-chart__center { font-size: 24px; }
  .num-chart__center small { font-size: 12px; }
  .num-legend { gap: 2px 10px; font-size: 11px; }
  .num-legend b { font-size: 14px; }
}

/* =========================================================
   募集要項カルーセル（jobs.js）：真ん中のカードを中心に、左右は見切れて薄く表示
   ========================================================= */
.jobs { --job-w: min(560px, 82vw); --job-gap: 24px; margin-top: 8px; }
.jobs__track {
  position: relative; display: flex; gap: var(--job-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 16px calc(50% - var(--job-w) / 2) 24px; /* 端のカードも中央に止まれるよう左右に余白 */
  scrollbar-width: none;
}
.jobs__track::-webkit-scrollbar { display: none; }
.jobs__track:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.jobs__track .job {
  flex: none; width: var(--job-w); scroll-snap-align: center; background: #fff; cursor: pointer;
  opacity: .45; transform: scale(.94);
  transition: opacity .4s ease, transform .4s ease, box-shadow .4s ease;
}
.jobs__track .job.is-active { opacity: 1; transform: none; cursor: auto; box-shadow: 0 12px 32px rgba(20,20,20,.08); }
.jobs__track.is-jumping .job { transition: none; } /* ループで本物の位置へ瞬時に戻すときは動かさない */
.jobs__nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 8px; }
@media (max-width: 767px) { .jobs { --job-w: 84vw; --job-gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .jobs__track { scroll-behavior: auto; } .jobs__track .job { transition: none; } }

/* エントリー：選考フロー（.steps の小さい版。スマホでも横一列） */
.steps--compact { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.steps--compact .step { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 0; }
.steps--compact .step::before { top: 15px; left: 32px; right: -12px; bottom: auto; width: auto; height: 1px; }
.steps--compact .step__num { width: 32px; height: 32px; border-width: 1.5px; font-size: 12px; }
.steps--compact .step__title { padding-top: 0; font-size: 14px; font-weight: 700; }
@media (max-width: 767px) {
  .steps--compact { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .steps--compact .step::before { right: -6px; }
  .steps--compact .step__num { width: 28px; height: 28px; font-size: 11px; }
  .steps--compact .step::before { top: 13px; left: 28px; }
  .steps--compact .step__title { font-size: 12px; }
}

/* =========================================================
   CHOICE 01（Figma: リクルート / node 112:920）
   左に見出し、右に正方形カードを横並び。右端は画面いっぱいまで伸ばして見切れさせる
   ========================================================= */
.choose { display: grid; grid-template-columns: 312px minmax(0, 1fr); align-items: center; padding: 112px 0 40px 40px; }
.choose__title { font-size: 40px; font-weight: 600; line-height: 1.4; }
.choose__nav { display: flex; gap: 10px; margin-top: 28px; }
.choose__scroller {
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 4px 40px 20px 0; /* 下は影（10px）が切れないための余白 */
}
.choose__scroller::-webkit-scrollbar { display: none; }
.choose__list { display: flex; gap: 24px; width: max-content; }
.choice-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  width: 278px; height: 278px; padding: 86px 24px 0; text-align: left; scroll-snap-align: start;
  background: #fff; border: 1px solid #D1D1D1; border-radius: 30px;
  box-shadow: 0 10px 0 rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.choice-card__name { font-size: 20px; font-weight: 700; line-height: 1.4; color: #111; }
.choice-card__text { margin-top: 18px; font-size: 20px; line-height: 1.6; color: var(--muted); }
.choice-card__mark { position: absolute; right: 26px; bottom: 24px; width: 28px; height: 28px; }
/* 押すと沈む（影が縮む）動き */
.choice-card:hover { transform: translateY(2px); box-shadow: 0 8px 0 rgba(0,0,0,.2); }
.choice-card:active { transform: translateY(8px); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.choice-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
/* 選択中：沈んだまま、枠を黒に、丸を赤のチェックに */
.choice-card[aria-pressed="true"] { transform: translateY(6px); box-shadow: 0 4px 0 rgba(0,0,0,.2); border-color: var(--ink); }
.choice-card[aria-pressed="true"]::after {
  content: ""; position: absolute; right: 26px; bottom: 24px; width: 28px; height: 28px; border-radius: 999px;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='white'%3E%3Cpath d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/15px no-repeat;
}
.choose__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.choose__scroller.is-dragging .choice-card { pointer-events: none; }

@media (max-width: 1023px) {
  .choose { grid-template-columns: 1fr; padding: 80px 0 32px 16px; }
  .choose__head { padding-right: 16px; margin-bottom: 24px; }
  .choose__title { font-size: 28px; }
  .choose__nav { margin-top: 16px; }
  .choose__scroller { padding-right: 16px; }
  .choose__list { gap: 16px; }
  .choice-card { width: 220px; height: 220px; padding: 60px 20px 0; border-radius: 26px; }
  .choice-card__name { font-size: 18px; }
  .choice-card__text { margin-top: 12px; font-size: 16px; }
  .choice-card__mark, .choice-card[aria-pressed="true"]::after { right: 20px; bottom: 20px; width: 24px; height: 24px; }
}

/* =========================================================
   アイコン：Phosphor Icons（Light）— assets/icons/ にSVGを置き、形だけを使って色は文字色に合わせる
   使い方：<span class="icon icon--train" aria-hidden="true"></span>（大きさは font-size で指定）
   新しいアイコンは https://phosphoricons.com から Light のSVGを assets/icons/ に追加し、
   python3 tools/build-icons.py を実行（icons.css にCSSの中へ埋め込んだ形で書き出される）
   ========================================================= */
.icon, .i-arrow {
  display: inline-block; flex: none; vertical-align: middle;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

/* 矢印：右 .i-arrow ／ 左 .i-arrow--left ／ 外部リンク（右上）.i-arrow--external */
.i-arrow { font-size: 1.15em; transition: transform .25s ease; }
/* マウスを乗せると矢印の向きに少し動く */
a:hover > .i-arrow, button:hover > .i-arrow, a:hover .person-card__more > .i-arrow { transform: translateX(3px); }
a:hover > .i-arrow--left, button:hover > .i-arrow--left { transform: translateX(-3px); }
a:hover > .i-arrow--external { transform: translate(2px, -2px); }
.reels__btn { display: inline-grid; place-items: center; }
.reels__btn .i-arrow { font-size: 18px; }
.btn-primary .i-arrow { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .i-arrow { transition: none; } }

/* =========================================================
   背景の装飾（Figma: リクルート / node 113:927）
   #journey の中で画面に固定（sticky）。本文の後ろに敷く。フレーム 1500×620 を基準に、左右の端から配置
   ========================================================= */
#journey { position: relative; background: #fff; }
#journey > section { position: relative; z-index: 1; }
.deco {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; margin-bottom: -100vh; /* 高さを取らずに重ねる */
  overflow: hidden; pointer-events: none;
}
.deco__stage { position: absolute; left: 0; right: 0; top: 50%; height: 620px; transform: translateY(-50%); }
.deco__side { position: absolute; top: 0; width: 390px; height: 620px; }
/* 本文（最大1152px・中央寄せ）と重なりすぎる画面幅では、まとまりを外側へずらして端からのぞかせる
   ずらす量 = 余白 + 104px（多少の重なりは許容）− まとまりの幅。最大でも幅の60%まで（4割は見せる） */
/* 左側：上下2つのまとまり（上は見出しの下あたり、下は画面の下寄り）。真ん中（章ナビ・本文）を空ける */
.deco__side--l { left: 0; top: 0; bottom: 0; height: auto; }
.deco__cluster {
  --w: calc(314px * var(--deco-scale, 1));
  position: absolute; left: 0; width: 320px; height: 220px;
  transform: translateX(clamp(calc(var(--w) * -0.6), calc((100vw - 1152px) / 2 + 104px - var(--w)), 0px)) scale(var(--deco-scale, 1));
}
.deco__cluster--top { top: 84px; transform-origin: top left; }
.deco__cluster--bottom { bottom: 40px; transform-origin: bottom left; }
.deco__side--r {
  --w: calc(336px * var(--deco-scale, 1));
  right: 0; transform-origin: right center;
  transform: translateX(calc(-1 * clamp(calc(var(--w) * -0.6), calc((100vw - 1152px) / 2 + 104px - var(--w)), 0px))) scale(var(--deco-scale, 1));
}
.deco__item { position: absolute; display: block; will-change: transform; }
.deco__float { position: absolute; inset: 0; display: block; animation: deco-float var(--dur, 9s) ease-in-out var(--delay, 0s) infinite; }
.deco__item--square .deco__float { animation-name: deco-float-tilt; }
.deco__item--line .deco__float { animation-name: deco-drift; }
.deco__float > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deco__clip { position: absolute; inset: 0; overflow: hidden; }
.deco__clip > img { position: absolute; max-width: none; }
.deco__rot { position: absolute; }
.deco__rot > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes deco-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes deco-float-tilt { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(8deg); } }
@keyframes deco-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -6px); } }
/* 画面が狭いほど小さく、薄く（本文の邪魔をしない） */
@media (max-width: 1279px) { .deco { --deco-scale: .8; } }
@media (max-width: 1023px) { .deco { --deco-scale: .62; opacity: .85; } }
@media (max-width: 767px) { .deco { --deco-scale: .45; opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .deco__float { animation: none; } }

/* =========================================================
   なにをしている会社？：事業カード（＋ボタン）と説明のモーダル（company.js）
   ========================================================= */
.svcs { display: grid; gap: 12px; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1023px) { .svcs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .svcs { grid-template-columns: 1fr; } }
.svc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 100%;
  min-height: 84px; padding: 18px 16px 18px 20px; text-align: left;
  background: var(--paper); border: 1px solid transparent; border-radius: 20px;
  transition: border-color .2s, background-color .2s;
}
.svc__name { font-size: 16px; font-weight: 700; line-height: 1.5; }
.svc__plus {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 18px;
  transition: background-color .2s, color .2s, border-color .2s, transform .3s ease;
}
.svc__btn:hover { background: #fff; border-color: var(--line); }
.svc__btn:hover .svc__plus { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(90deg); }
.svc__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* モーダル：画面いっぱいの透明な枠に、カードを横に並べる（中央が今のサービス、左右はのぞかせる） */
.svc-dialog {
  --card-w: min(560px, 78vw);
  width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--ink); overflow: hidden;
}
.svc-dialog[open] { display: flex; flex-direction: column; justify-content: center; animation: svc-fade .3s ease; }
.svc-dialog::backdrop { background: rgba(20, 20, 20, .6); backdrop-filter: blur(4px); }
.svc-dialog[open]::backdrop { animation: svc-fade .3s ease; }
@keyframes svc-fade { from { opacity: 0; } }
.svc-dialog__close {
  position: absolute; top: 20px; right: 20px; z-index: 2; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 999px; background: #fff; font-size: 22px;
  transition: background-color .2s, color .2s;
}
.svc-dialog__close:hover { background: var(--ink); color: #fff; }
.svc-dialog__close:focus-visible, .svc-car__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.svc-car { position: relative; }
.svc-car__track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 24px calc(50% - var(--card-w) / 2);
}
.svc-car__track::-webkit-scrollbar { display: none; }
.svc-card {
  flex: none; width: var(--card-w); scroll-snap-align: center; cursor: pointer;
  padding: 44px 40px 40px; border-radius: 28px; background: #fff;
  box-shadow: 0 24px 64px rgba(20, 20, 20, .18);
  opacity: .45; transform: scale(.92); transition: opacity .35s ease, transform .35s ease;
}
.svc-card.is-active { opacity: 1; transform: none; cursor: auto; }
.svc-car__track.is-jumping .svc-card { transition: none; }
.svc-card__label { font-family: Inter, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--accent); }
.svc-card__title { margin-top: 10px; font-size: 26px; font-weight: 800; line-height: 1.4; }
.svc-card__body { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; line-height: 2; color: #3D3A35; }
/* 左右の矢印：中央のカードのすぐ外側 */
.svc-car__btn {
  position: absolute; top: 50%; z-index: 1; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 20px;
  box-shadow: 0 6px 20px rgba(20, 20, 20, .15); transform: translateY(-50%);
  transition: background-color .2s, color .2s;
}
.svc-car__btn:hover { background: var(--ink); color: #fff; }
.svc-car__btn--prev { left: max(12px, calc(50% - var(--card-w) / 2 - 76px)); }
.svc-car__btn--next { right: max(12px, calc(50% - var(--card-w) / 2 - 76px)); }
.svc-dialog__count { margin-top: 12px; text-align: center; font-family: Inter, sans-serif; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.svc-dialog__count b { font-weight: 800; color: #fff; }
@media (max-width: 559px) {
  .svc-dialog { --card-w: 80vw; }
  .svc-car__track { gap: 12px; }
  .svc-card { padding: 32px 22px 26px; border-radius: 24px; }
  .svc-card__title { font-size: 21px; }
  .svc-card__body { font-size: 14px; line-height: 1.9; }
  .svc-car__btn { top: auto; bottom: -56px; transform: none; width: 44px; height: 44px; }
  .svc-car__btn--prev { left: calc(50% - 88px); }
  .svc-car__btn--next { right: calc(50% - 88px); }
  .svc-dialog__count { margin-top: 24px; line-height: 20px; } /* スマホ：左右の矢印の間に番号 */
}
@media (prefers-reduced-motion: reduce) { .svc-dialog[open], .svc-dialog[open]::backdrop { animation: none; } .svc__plus, .svc-card { transition: none; } .svc-car__track { scroll-behavior: auto; } }

/* =========================================================
   1ヶ月経過：最初の1ヶ月のカード（イラスト風アイコン）
   アイコンは Phosphor の Duotone（濃い線＋淡い面の2色）。台座の色は背景装飾の球体（オレンジ・青・紫）に合わせる
   ========================================================= */
.firsts { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .firsts { grid-template-columns: 1fr; } }
.first {
  --tone: #F08A1C; --tint: #FFF1E2; --dot: #FFC56B;
  position: relative; padding: 28px 28px 30px; border-radius: 24px;
  background: #fff; border: 1px solid var(--line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.first--blue { --tone: #2F6FE8; --tint: #E8F0FE; --dot: #8DB5FF; }
.first--purple { --tone: #7B66E3; --tint: #F0ECFE; --dot: #C2B6FF; }
.first__art {
  position: relative; display: grid; place-items: center;
  width: 104px; height: 104px; border-radius: 30px; background: var(--tint);
  color: var(--tone); font-size: 56px;
}
.first__art::before { /* 台座の角に浮かぶ小さな丸（背景装飾と同じモチーフ） */
  content: ""; position: absolute; top: -8px; right: -10px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--dot); box-shadow: 0 6px 14px rgba(20,20,20,.08);
}
.first__art::after { /* 反対の角のドット */
  content: ""; position: absolute; left: -6px; bottom: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--tone); opacity: .35;
}
.first__art .icon { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.first:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(20,20,20,.07); }
.first:hover .first__art .icon { transform: rotate(-8deg) scale(1.06); }
.first__num { margin-top: 24px; font-family: Inter, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--tone); }
.first__title { margin-top: 4px; font-size: 21px; font-weight: 800; }
.first__text { margin-top: 8px; font-size: 14px; line-height: 1.8; color: var(--muted); }
@media (max-width: 767px) {
  .first { display: grid; grid-template-columns: 76px 1fr; column-gap: 18px; align-items: center; padding: 20px; }
  .first__art { grid-row: 1 / span 3; width: 76px; height: 76px; border-radius: 22px; font-size: 40px; }
  .first__art::before { width: 18px; height: 18px; top: -6px; right: -6px; }
  .first__num { margin-top: 0; }
  .first__title { font-size: 18px; margin-top: 2px; }
  .first__text { margin-top: 4px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .first, .first__art .icon { transition: none; } }

/* =========================================================
   半年経過：文章の右に会社ギャラリー（Figma: リクルート / node 118:1138）
   丸い写真6枚を六角形に並べた輪。輪はスクロールで回り、写真は逆に回って常にまっすぐ（gallery.js が --a を更新）
   位置はFigmaのフレーム 849×941 に対する割合
   ※クラス名は cgal（Tailwind の ring と重ならないように）
   ========================================================= */
/* PC：輪は章の右側に重ね、画面の右端で見切れさせる（Figma：1500px幅で左971px・幅849px → 左64.7%・幅56.6%） */
#month6 { position: relative; overflow-x: clip; }
.msg6-grid { display: block; }
.msg6-main { position: relative; z-index: 1; max-width: 46rem; }
@media (min-width: 1024px) and (max-width: 1399px) { .msg6-main { max-width: 40rem; } } /* 輪（左64.7%）と文章が重ならない幅 */
.cgal {
  position: absolute; top: 50%; left: 64.7%; z-index: 0;
  width: clamp(560px, 56.6vw, 960px); aspect-ratio: 849 / 941; transform: translateY(-50%);
}
/* タブレット・スマホ：文章の下に置き、右端で見切れさせる */
@media (max-width: 1023px) {
  .cgal { position: relative; top: auto; left: auto; transform: none; width: min(560px, 115vw); margin: 48px 0 0 22%; }
}
@media (max-width: 559px) {
  .cgal { width: 118vw; margin-left: 20%; }
}
.cgal__wheel { position: absolute; inset: 0; transform: rotate(var(--a, 0deg)); will-change: transform; }
.cgal__item {
  position: absolute; left: var(--x); top: var(--y); width: 32.16%; aspect-ratio: 1; margin: 0;
  border-radius: 50%; overflow: hidden; transform: translate(-50%, -50%);
  box-shadow: 0 12px 30px rgba(20, 20, 20, .12);
}
.cgal__img { display: block; width: 100%; height: 100%; object-fit: cover; transform: rotate(calc(var(--a, 0deg) * -1)) scale(1.04); }

/* =========================================================
   3年後：ゴールの台紙（案A）
   淡いピンク（アクセント色の薄色）の大きな角丸の台紙に章全体を載せ、角に背景装飾と同じ図形を重ねる
   導入企業ごとに --accent / --accent-soft を変えれば色も追従する
   ========================================================= */
.finale {
  position: relative; padding: clamp(28px, 5vw, 64px); border-radius: 40px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, #FFF5EE 55%, #FFFFFF 100%);
  box-shadow: inset 0 0 0 1px rgba(235, 73, 98, .18), 0 24px 60px rgba(235, 73, 98, .08);
}
.finale__message { margin-top: 40px; font-size: clamp(24px, 3vw, 36px); font-weight: 800; line-height: 1.6; }
.finale__hl {
  font-style: normal; color: var(--accent);
  background: linear-gradient(transparent 70%, rgba(235, 73, 98, .16) 70%); /* マーカー風の下線 */
}
.finale__compare { display: grid; gap: 24px; margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(235, 73, 98, .22); }
@media (min-width: 768px) { .finale__compare { grid-template-columns: 1fr 1fr; } }
.finale__deco { position: absolute; display: block; pointer-events: none; animation: deco-float 8s ease-in-out infinite; }
.finale__deco img { display: block; width: 100%; height: 100%; object-fit: cover; }
.finale__deco--ball { top: -40px; right: 40px; width: 96px; height: 96px; }
.finale__deco--dot { top: 64px; right: 16px; width: 22px; height: 22px; animation-duration: 6s; animation-delay: -2s; }
.finale__deco--square { bottom: -28px; left: 48px; width: 80px; height: 58px; animation-name: deco-float-tilt; animation-duration: 9s; }
@media (max-width: 767px) {
  .finale { border-radius: 28px; }
  .finale__deco--ball { top: -28px; right: 20px; width: 64px; height: 64px; }
  .finale__deco--dot { top: 44px; right: 8px; }
  .finale__deco--square { left: 24px; width: 58px; height: 42px; bottom: -20px; }
}
@media (prefers-reduced-motion: reduce) { .finale__deco { animation: none; } }

/* =========================================================
   よくある質問（details/summary の開閉。＋は開くと×に回る）
   ========================================================= */
.faqs { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; gap: 16px; padding: 22px 4px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 700; line-height: 1.6;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.faq__q { flex: none; font-family: Inter, sans-serif; font-size: 18px; font-weight: 800; color: var(--accent); width: 20px; }
.faq__q--a { color: var(--ink); }
.faq__text { flex: 1; }
.faq__toggle {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 18px; transition: transform .3s ease, background-color .2s, color .2s, border-color .2s;
}
.faq summary:hover .faq__toggle { background: var(--ink); border-color: var(--ink); color: #fff; }
.faq[open] .faq__toggle { transform: rotate(45deg); }
.faq__a { display: flex; gap: 16px; padding: 0 56px 24px 4px; }
.faq__a p { font-size: 15px; line-height: 1.9; color: #3D3A35; }
@media (max-width: 559px) {
  .faq summary { font-size: 15px; gap: 12px; }
  .faq__a { padding-right: 4px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .faq__toggle { transition: none; } }


/* 「選択してください」の吹き出し：まだ選んでいない選択肢の章が画面に入ったら出す（app.js） */
.choose__cards { position: relative; min-width: 0; }
.choose-hint {
  position: absolute; left: 0; bottom: calc(100% + 14px); z-index: 3;
  padding: 9px 16px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(20, 20, 20, .18);
  opacity: 0; transform: translateY(8px) scale(.92); transform-origin: 24px 100%;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: none;
}
.choose-hint::after { /* 下向きのしっぽ */
  content: ""; position: absolute; left: 22px; top: 100%;
  border: 7px solid transparent; border-top-color: var(--ink); border-bottom: 0;
}
.choose-hint.is-shown { opacity: 1; transform: none; animation: hint-bob 1.8s ease-in-out .5s infinite; }
@keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
#before .choose-hint { bottom: calc(100% - 4px + 14px); } /* カード列の上の余白（4px）を差し引く */
#year2 .choose-hint { left: 128px; bottom: calc(100% + 18px); } /* 「CHOICE 02」のタグの右隣に並べる */
@media (max-width: 1023px) { #before .choose-hint { left: 104px; } } /* スマホ・タブレット：左右の矢印ボタンの右隣に出す */
@media (prefers-reduced-motion: reduce) { .choose-hint { transition: opacity .2s; } .choose-hint.is-shown { animation: none; } }

/* =========================================================
   選択肢の章：少しの間、画面に留まる（スクロールは止めない）
   .pin の中で章を sticky にし、--pin-hold の分だけ留める。次の要素は同じ分だけ上に重ねて、下から覆いかぶさるように入ってくる
   --pin-top は app.js が「ヘッダーの下（72px）」か「章の下端が画面の下端にそろう位置」の小さい方を入れる
   ========================================================= */
:root { --pin-hold: 50vh; } /* 留まる長さ（次の要素の重なり量にも使うので :root で定義） */
.pin { position: relative; z-index: 1; }
.pin::after { content: ""; display: block; height: var(--pin-hold); } /* sticky が留まれる余地（padding では効かないので中身として作る） */
.pin > section { position: sticky; top: var(--pin-top, 72px); transform-origin: 50% 30%; will-change: opacity, transform; }
.pin + * { position: relative; z-index: 2; margin-top: calc(-1 * var(--pin-hold)); }
.pin + section { background: #fff; } /* 重なってくる章は白で覆う */
@media (prefers-reduced-motion: reduce) {
  .pin::after { display: none; }
  .pin > section { position: relative; top: auto; }
  .pin + * { margin-top: 0; }
}


/* ---------- あなたの道（右下の固定ボタン＋変更パネル） ---------- */
.path-dock { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  transition: opacity .3s ease, transform .3s ease; }
.path-dock.is-away { opacity: 0; transform: translateY(16px); pointer-events: none; }
.path-dock__pill { display: inline-flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 20px; border-radius: 999px;
  background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 13px; line-height: 1.2; text-align: left; cursor: pointer; }
.path-dock__label { flex: none; font-size: 11px; color: rgba(255,255,255,.6); }
.path-dock__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-en, inherit); font-weight: 700; letter-spacing: .02em; }
.path-dock__change { flex: none; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; transition: background .2s, color .2s; }
.path-dock__pill:hover .path-dock__change, .path-dock__pill[aria-expanded="true"] .path-dock__change { background: var(--accent); color: #fff; }
.path-dock__pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.path-dock__pill.is-changed { animation: path-glow .9s ease; }
@keyframes path-glow { 0% { box-shadow: 0 0 0 0 rgba(235,73,98,.7), 0 10px 30px rgba(0,0,0,.18); } 100% { box-shadow: 0 0 0 16px rgba(235,73,98,0), 0 10px 30px rgba(0,0,0,.18); } }

.path-dock__panel { width: 340px; max-width: calc(100vw - 32px); padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.16); animation: path-in .25s ease; }
@keyframes path-in { from { opacity: 0; transform: translateY(8px); } }
.path-dock__head { display: flex; align-items: center; justify-content: space-between; }
.path-dock__title { font-size: 14px; font-weight: 700; }
.path-dock__close { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; font-size: 20px; line-height: 1; color: var(--muted); }
.path-dock__close:hover { background: var(--paper); color: var(--ink); }
.path-group { margin-top: 16px; }
.path-group__name { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.path-group__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.path-opt { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; transition: border-color .2s, background .2s, color .2s; }
.path-opt:hover { border-color: var(--ink); }
.path-opt[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.path-dock__note { margin-top: 16px; font-size: 11px; line-height: 1.6; color: var(--muted); }

@media (max-width: 767px) {
  .path-dock { right: 16px; bottom: 16px; }
  .path-dock__pill { padding: 8px 8px 8px 16px; gap: 10px; }
  .path-dock__label { display: none; } /* スマホは選んだ内容と「変更」だけにして小さく */
  .path-dock__value { font-size: 12px; }
  /* スマホ：下からのシート */
  .path-dock__panel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0; border-bottom: 0; animation-name: path-sheet; }
  @keyframes path-sheet { from { transform: translateY(100%); } }
  .path-dock.is-open .path-dock__pill { visibility: hidden; }
  .path-opt { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .path-dock, .path-dock__panel, .path-dock__pill.is-changed { transition: none; animation: none; }
}

/* ---------- 福利厚生：イラスト（SVGをHTMLに直接書く。色はサイトの色の変数に合わせて変わる） ---------- */
.benefit { flex-direction: column; gap: 12px; }
.benefit__ill { flex: none; display: block; width: 104px; height: 104px; }
.benefit .benefit__name { padding-top: 0; }
.ill { display: block; width: 100%; height: 100%; overflow: visible; }
.ill * { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ill .bg { fill: #fff; stroke: none; }
.ill .n { fill: none; }
.ill .w { fill: #fff; }
.ill .s { fill: var(--accent-soft); }
.ill .a { fill: var(--accent); }
.ill .wl { fill: none; stroke: #fff; stroke-width: 3.5; }
@media (max-width: 767px) {
  .benefit { flex-direction: row; align-items: center; gap: 16px; }
  .benefit__ill { width: 80px; height: 80px; }
}

/* 選択肢：日本語の名前に、英語を小さく添える */
.choice-card { padding-top: 66px; }
.choice-card__en { margin-bottom: 6px; font-family: Inter, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--accent); }
.choice-en__word { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted); }
@media (max-width: 1023px) {
  .choice-card { padding-top: 44px; }
  .choice-card__en { font-size: 10px; margin-bottom: 4px; }
}

/* =========================================================
   代表メッセージ（message.html）：シンプルな1カラム
   ========================================================= */
.page-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 72px; padding: 0 24px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.page-header__logo { display: block; width: 68px; height: 42px; }
.page-header__logo img { width: 100%; height: 100%; }
.page-header__nav { display: flex; align-items: center; gap: 24px; }
.page-header__back, .msg-next__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.page-header__back:hover, .msg-next__back:hover { color: var(--accent); }
.page-header a:focus-visible, .msg-next a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 999px; }

.msg-page { padding: 96px 24px 120px; }
.msg-article { max-width: 720px; margin-inline: auto; }
.msg-title { margin-top: 8px; word-break: auto-phrase; font-size: clamp(26px, 4vw, 44px); font-weight: 900; line-height: 1.5; letter-spacing: .01em; }
.msg-photo { margin-top: 56px; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; }
.msg-text { margin-top: 64px; display: grid; gap: 56px; }
.msg-para { display: grid; gap: 1.1em; font-size: 17px; line-height: 2.1; }
.msg-quote { margin: .4em 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 900; line-height: 1.6; }
.msg-sign { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); display: grid; justify-items: end; gap: 6px; text-align: right; }
.msg-sign > span:first-child { font-size: 14px; color: var(--muted); }
.msg-sign #msgRole { margin-right: 14px; font-size: 14px; color: var(--muted); }
.msg-sign b { font-size: 22px; font-weight: 700; letter-spacing: .08em; }
.page-header .btn-entry, .msg-next .btn-entry { width: auto; height: 46px; padding: 0 24px; font-size: 15px; }
.msg-next { max-width: 720px; margin: 96px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

@media (max-width: 767px) {
  .page-header { padding: 0 16px; }
  .page-header__logo { width: 58px; height: 36px; }
  .page-header__nav { gap: 14px; }
  .page-header__back { font-size: 13px; }
  .page-header .btn-entry { height: 40px; padding: 0 14px; font-size: 13px; }
  .msg-page { padding: 64px 16px 88px; }
  .msg-text { margin-top: 48px; gap: 44px; }
  .msg-para { font-size: 15px; line-height: 2; }
  .msg-sign { margin-top: 56px; }
  .msg-next { margin-top: 64px; flex-direction: column-reverse; gap: 20px; }
}

/* 下層ページ（代表メッセージ・社員インタビュー）にも、トップと同じ背景の装飾を敷く */
.deco-host { position: relative; }
.deco-host > :not(.deco) { position: relative; z-index: 1; }
/* 代表メッセージ：本文の左右の余白（24px／スマホ16px）の外まで装飾を広げ、画面の端にそろえる */
.msg-page > .deco { margin-inline: -24px; }
@media (max-width: 767px) { .msg-page > .deco { margin-inline: -16px; } }

/* =========================================================
   社員インタビュー詳細（interview.html）
   写真1枚を、ヒーローでは大きく・回答の吹き出しでは顔の丸として使い回す
   ========================================================= */
.iv { --iv-w: 880px; }
.iv-top { position: relative; }
.iv-top__photo { border-radius: 32px; overflow: hidden; }
.iv-top__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.iv-top__photo .photo { aspect-ratio: 16 / 9; }
.iv-top__card { position: relative; width: min(640px, 100%); margin: -120px 0 0 40px; padding: 40px 44px; border-radius: 28px; background: #fff; box-shadow: 0 20px 50px rgba(20,20,20,.08); }
.iv-top .iv-quote { word-break: auto-phrase; margin-top: 4px; font-size: clamp(26px, 3.4vw, 40px); }
.iv-top__lead { margin-top: 18px; font-size: 15px; line-height: 2; color: var(--muted); }
.iv-top__who { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.iv-top__who b { font-size: 18px; }
.iv-top__who span { font-size: 13px; color: var(--muted); }

.iv-sec { max-width: var(--iv-w); margin: 96px auto 0; }
.iv-sec__en { font-family: Inter, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .18em; color: var(--accent); }
.iv-sec__title { margin-top: 6px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; line-height: 1.5; }
.iv-text { margin-top: 24px; font-size: 16px; line-height: 2.1; }

/* これまでのキャリア：縦の線でつなぐ */
.iv-career { margin-top: 32px; display: grid; gap: 0; }
.iv-career__item { position: relative; padding: 0 0 36px 36px; }
.iv-career__item::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.iv-career__item:last-child { padding-bottom: 0; }
.iv-career__item:last-child::before { display: none; }
.iv-career__item::after { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 999px; background: #fff; border: 3px solid var(--ink); }
.iv-career__item:last-child::after { background: var(--accent); border-color: var(--accent); }
.iv-career__when { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.iv-career__item:last-child .iv-career__when { background: var(--accent); }
.iv-career__title { margin-top: 10px; font-size: 19px; font-weight: 700; }
.iv-career__text { margin-top: 6px; font-size: 15px; line-height: 1.95; color: #4A4744; }

/* インタビュー：Q＋顔の丸＋吹き出し */
.iv .iv-qa { margin-top: 32px; display: grid; gap: 40px; }
.iv .iv-qa__item { display: grid; gap: 16px; padding: 0; background: none; border-radius: 0; }
.iv .iv-qa__q { font-size: 19px; }
.iv-qa__a { display: flex; align-items: flex-start; gap: 20px; }
.face { flex: none; display: block; border-radius: 999px; background-color: var(--paper); background-repeat: no-repeat; }
.face--empty { background: repeating-linear-gradient(135deg, #EEE9E1 0 10px, #F5F1EA 10px 20px); }
.iv-qa__face { width: 72px; height: 72px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); }
.iv-qa__bubble { position: relative; flex: 1; padding: 22px 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line); font-size: 15.5px; line-height: 2; }
.iv-qa__bubble::before { content: ""; position: absolute; left: -9px; top: 26px; width: 16px; height: 16px; background: #fff; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }

/* 1日の流れ */
.iv-day { margin-top: 32px; padding: 32px 36px; border-radius: 28px; background: #fff; border: 1px solid var(--line); }
.iv-day__row { position: relative; display: grid; grid-template-columns: 64px 18px 1fr; gap: 0 16px; padding-bottom: 22px; }
.iv-day__row:last-child { padding-bottom: 0; }
.iv-day__row::before { content: ""; position: absolute; left: calc(64px + 16px + 8px); top: 14px; bottom: -8px; width: 2px; background: var(--line); }
.iv-day__row:last-child::before { display: none; }
.iv-day__time { font-family: Inter, sans-serif; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.6; }
.iv-day__dot { position: relative; z-index: 1; width: 12px; height: 12px; margin: 8px auto 0; border-radius: 999px; background: var(--accent); }
.iv-day__title { font-weight: 700; line-height: 1.6; }
.iv-day__text { margin-top: 2px; font-size: 14px; line-height: 1.8; color: var(--muted); }

/* これから入社する方へ */
.iv-msg { max-width: var(--iv-w); margin: 112px auto 0; display: flex; align-items: center; gap: 36px; }
.iv-msg__face { width: 200px; height: 200px; box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--accent); }
.iv-msg__bubble { position: relative; flex: 1; padding: 36px 40px; border-radius: 28px; background: var(--ink); color: #fff; }
.iv-msg__bubble::before { content: ""; position: absolute; left: -12px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: var(--ink); transform: rotate(45deg); border-radius: 4px; }
.iv-msg__title { font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: .06em; }
.iv-msg__text { margin-top: 12px; font-size: clamp(17px, 1.8vw, 20px); font-weight: 700; line-height: 1.9; }
.iv-note { max-width: var(--iv-w); margin: 40px auto 0; font-size: 12px; color: var(--muted); }

@media (max-width: 767px) {
  .iv-top__photo { border-radius: 20px; }
  .iv-top__card { margin: -40px 12px 0; width: auto; padding: 26px 22px; border-radius: 22px; }
  .iv-sec { margin-top: 72px; }
  .iv-text { font-size: 15px; }
  .iv-qa__a { gap: 12px; }
  .iv-qa__face { width: 52px; height: 52px; }
  .iv-qa__bubble { padding: 16px 18px; font-size: 14.5px; }
  .iv-qa__bubble::before { top: 18px; }
  .iv-day { padding: 24px 18px; }
  .iv-day__row { grid-template-columns: 50px 14px 1fr; gap: 0 10px; }
  .iv-day__row::before { left: calc(50px + 10px + 6px); }
  .iv-day__time { font-size: 15px; }
  .iv-msg { flex-direction: column; gap: 28px; margin-top: 88px; }
  .iv-msg__face { width: 150px; height: 150px; }
  .iv-msg__bubble { padding: 28px 24px; }
  .iv-msg__bubble::before { left: 50%; top: -12px; margin: 0 0 0 -12px; }
}

/* 初出社の縦動画：音声のオン・オフ */
.reel__sound { position: absolute; right: 14px; top: 14px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  background: rgba(20,20,20,.55); color: #fff; backdrop-filter: blur(6px); transition: background .2s; }
.reel__sound:hover { background: rgba(20,20,20,.8); }
.reel__sound[aria-pressed="true"] { background: var(--accent); }
.reel__sound:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.reel__sound .icon { font-size: 22px; }

/* 募集要項：英語の職種名・補足 */
.job__en { font-family: Inter, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--accent); }
.job .job__en + h3 { margin-top: 4px; font-family: inherit; font-size: 22px; font-weight: 900; }
.job dl { grid-template-columns: 96px 1fr; line-height: 1.8; }
.job dd b { color: var(--accent); }
.job__sub { font-size: 12px; color: var(--muted); }

/* よくある質問：回答の中のリンク */
.faq__a a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.faq__a a .i-arrow { margin-left: 2px; }

/* 募集要項：カードは要点だけ＋「詳細を見る」 */
.job { display: flex; flex-direction: column; }
.job__lead { margin: 10px 0 16px; font-size: 14px; line-height: 1.9; color: #4A4744; }
.job__more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 20px 12px 24px;
  border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; transition: background .2s; }
.job__more:hover { background: var(--accent); }
.job__more:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.job__more .icon { font-size: 16px; }

/* 募集要項の詳細モーダル */
.job-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100svh - 48px); padding: 0; border: 0; border-radius: 28px; background: #fff; color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.job-dialog[open] { animation: svc-fade .3s ease; }
.job-dialog::backdrop { background: rgba(20, 20, 20, .6); backdrop-filter: blur(4px); }
.job-dialog__panel { position: relative; padding: 44px 48px 40px; }
.job-dialog__close { position: absolute; right: 20px; top: 20px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.job-dialog__close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.job-dialog__close .icon { font-size: 20px; }
.job-dialog__title { margin-top: 4px; font-size: 26px; font-weight: 900; }
.job-dialog__dl { margin-top: 20px; display: grid; grid-template-columns: 100px 1fr; font-size: 14.5px; line-height: 1.85; border-top: 1px solid var(--line); }
.job-dialog__dl dt, .job-dialog__dl dd { padding: 14px 0; border-bottom: 1px solid var(--line); }
.job-dialog__dl dt { font-weight: 700; }
.job-dialog__dl dd b { color: var(--accent); }
.job-dialog__entry { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; transition: background .2s; }
.job-dialog__entry:hover { background: var(--accent-dark); }
.job-dialog button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 767px) {
  .job-dialog { border-radius: 22px; }
  .job-dialog__panel { padding: 32px 20px 24px; }
  .job-dialog__title { font-size: 22px; padding-right: 48px; }
  .job-dialog__dl { grid-template-columns: 1fr; }
  .job-dialog__dl dt { padding-bottom: 0; border-bottom: 0; }
  .job-dialog__dl dd { padding-top: 4px; }
}
/* 詳細モーダル：下までスクロールしても×ボタンが見えるよう、上に貼り付ける */
.job-dialog__close { position: sticky; top: 0; z-index: 1; margin: -20px -24px -24px auto; right: auto; }
@media (max-width: 767px) { .job-dialog__close { margin: -16px -8px -28px auto; } }

/* 応募フォーム：迷惑送信よけの欄（画面外に出して見せない）・エラー・完了 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.entry-form { position: relative; }
.entry-turnstile { margin-top: 18px; min-height: 0; }
.entry-error { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); font-size: 14px; font-weight: 700; }
.entry-done { padding: 48px 32px; border-radius: 28px; border: 1px solid var(--line); background: #fff; text-align: center; box-shadow: 0 16px 40px rgba(20,20,20,.06); }
.entry-done:focus { outline: none; }
.entry-done__title { font-size: clamp(22px, 2.6vw, 28px); font-weight: 900; }
.entry-done__text { margin-top: 16px; font-size: 15px; line-height: 2; color: var(--muted); }

/* 個人情報の取り扱い（応募フォーム内） */
.privacy__body { max-height: 240px; }
.privacy__body:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.privacy__body h4 { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--ink); }
.privacy__body h4:first-child { margin-top: 0; }
.privacy__body p, .privacy__body ol { margin-top: 6px; }
.privacy__body ol { padding-left: 1.4em; list-style: decimal; }
.privacy__body li + li { margin-top: 4px; }
.privacy__body b { color: var(--ink); }
.privacy__body a { color: var(--accent); text-decoration: underline; }
.privacy__sign { text-align: right; }

/* 章タグ（黒）・トピックタグ（白地＋黒枠）：さらに大きく（見づらいとの意見を受けて） */
.chapter-label { font-size: 16px; gap: 12px; }
.chapter-label span { padding: 9px 20px; font-size: 16px; letter-spacing: .05em; }
.chapter-label--topic span { box-shadow: inset 0 0 0 2px var(--ink); }
@media (max-width: 767px) {
  .chapter-label { font-size: 15px; }
  .chapter-label span { padding: 8px 18px; font-size: 15px; }
}
/* タグを大きくした分、CHOICE 02 の吹き出しをタグの右隣へずらす */
/* CHOICE 02 のタグを「2年経過」の横へ移したので、吹き出しはカードのすぐ上・左端に出す */
#year2 .choose__cards { margin-top: 64px; }
#year2 .choose-hint { left: 0; bottom: calc(100% + 14px); }

/* 章タグ・トピックタグ：画面に入ったら弾むように出る（tag-bounce.js が .tag-bounce / .is-in を付ける） */
.tag-bounce { opacity: 0; transform: translateY(18px) scale(.6); }
.tag-bounce.is-in { animation: tag-bounce .75s cubic-bezier(.3, 1.4, .5, 1) var(--bounce-delay, 0ms) both; }
@keyframes tag-bounce {
  0% { opacity: 0; transform: translateY(18px) scale(.6); }
  45% { opacity: 1; transform: translateY(-6px) scale(1.1); }
  70% { transform: translateY(2px) scale(.96); }
  85% { transform: translateY(-1px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tag-bounce { opacity: 1; transform: none; animation: none; } }

/* 章の見出し：黄色の帯が左から右へ横切り、帯が通り過ぎると文字が現れる（heading-reveal.js が行を分けて .hl-ready / .is-in を付ける） */
:root { --heading-band: #F7C948; } /* 帯の色。導入企業ごとに差し替え可 */
.hl { position: relative; display: inline-block; vertical-align: top; }
.hl::after { content: ""; position: absolute; inset: .08em -.06em; background: var(--heading-band); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.hl-ready .hl__in { opacity: 0; }
.hl-ready.is-in .hl::after { animation: hl-band 1s cubic-bezier(.7, 0, .2, 1) var(--hl-delay, 0ms) both; }
.hl-ready.is-in .hl__in { animation: hl-show .01s linear calc(var(--hl-delay, 0ms) + .5s) both; } /* 帯が行を覆い切った瞬間に文字を出す */
@keyframes hl-band {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  50.1% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes hl-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hl-ready .hl__in { opacity: 1; animation: none; } .hl::after { display: none; } }

/* 選択の章のタグ（CHOICE 01・02）は赤にして、ほかの章タグと見分ける（白文字が読みやすい濃いめの赤） */
.chapter-label span.is-choice { background: var(--accent-dark); color: #fff; }

/* 選択の章の登場（app.js の setupChoiceIntro）：始まるまで問いと選択肢を隠す。動いている間は問いを前面に */
.ci-ready:not(.ci-playing):not(.ci-done) [data-choice-q],
.ci-ready:not(.ci-playing):not(.ci-done) .choose__nav,
.ci-ready:not(.ci-playing):not(.ci-done) .choice-card,
.ci-ready:not(.ci-playing):not(.ci-done) .choice,
.ci-ready:not(.ci-playing):not(.ci-done) #pathEmpty { opacity: 0; }
.ci-ready [data-choice-q] { position: relative; z-index: 5; }
.ci-playing .choice-card, .ci-playing .choice { pointer-events: none; }