@charset "UTF-8";
/* =========================================================
   Career Recruit Site - common.css
   デザインシステム：リクルートホールディングスのトンマナを参考にした
   ビジュアル言語（リクルートブルー #0065bd / フラット / 余白多め /
   軽量で字間の詰まった大見出し）。テキスト・画像はプレースホルダ。
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand（rcl デザインシステム準拠：rCorporate/rcl-storybook） */
  --color-primary: #0065bd;        /* リクルートブルー（rcl primary） */
  --color-primary-dark: #00529b;
  --color-primary-hover: #0f77d2;  /* rcl ボタンhover */
  --color-primary-soft: #e6f0f8;
  --color-accent: #0065bd;         /* アクセントもブルー基調 */
  --color-accent-dark: #00529b;    /* 白ボタン上の文字色など濃いアクセント */
  --color-link: #0e8bd1;           /* rcl 見出し/リンクの明るいブルー */

  /* Ink / Gray（rcl 準拠） */
  --color-ink: #2d3133;            /* 見出し濃色（rcl headline） */
  --color-text: #51656f;           /* 本文（rcl body text） */
  --color-text-muted: #646d76;     /* 補助テキスト（rcl） */
  --color-bg: #ffffff;
  --color-bg-soft: #f3f5fa;        /* 薄ブルーグレー背景（rcl） */
  --color-bg-band: #0065bd;        /* ブルー帯セクション */
  --color-border: #dfe2e5;         /* 罫線（rcl） */
  --color-border-strong: #c8cdd2;
  --color-white: #ffffff;

  /* Type */
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;

  /* Layout */
  --container: 1180px;
  --radius: 2px;
  --radius-lg: 2px;
  --shadow-sm: 0 1px 3px rgba(14, 51, 108, 0.08);
  --shadow-md: 0 6px 24px rgba(14, 51, 108, 0.12);
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.85;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease); }
a:hover { color: var(--color-primary); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 32px; }
.section { padding-block: 96px; }
.section--soft { background: var(--color-bg-soft); }
.section--dark { background: var(--color-bg-band); color: var(--color-white); }
.lead { color: var(--color-text-muted); font-size: 1.0625rem; font-weight: 400; line-height: 1.9; max-width: 760px; }
.section--dark .lead { color: rgba(255,255,255,0.85); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ---------- Headings ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.section-title {
  /* 画面幅に応じて滑らかにスケール（最小24px〜最大38px） */
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.375rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 22px;
  /* 行長をバランスよく揃え、中途半端な改行を抑える */
  text-wrap: balance;
}
.section--dark .section-title { color: #fff; }
/* タイトル内の改行制御：句のまとまりを inline-block でくくると、語中で折れず
   句と句の間でのみ折り返す（手動 <br> に頼らず画面幅へ追従）。 */
.section-title .ph { display: inline-block; }
.section-title small {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.12em;
  margin-top: 10px;
}
/* rcl: 見出し（下線＋ブルーのアクセントバー / .c-headline2 相当）。
   左寄せのセクション見出しに適用。中央寄せ・帯・ダーク背景では出さない。 */
.section-title { position: relative; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.section-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 30px; border-bottom: 2px solid var(--color-link); }
.center .section-title, .cta .section-title, .section--dark .section-title {
  padding-bottom: 0; border-bottom: none;
}
.center .section-title::after, .cta .section-title::after, .section--dark .section-title::after { content: none; }

/* ---------- Buttons (rcl: pill / arrow) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;            /* rcl: ピル型ボタン */
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn::after { content: "→"; font-size: 1em; transition: transform 0.2s var(--ease); }
.btn:hover::after { transform: translateX(3px); }
.btn--primary { background: var(--color-primary); color: #fff; box-shadow: 0 2px 10px rgba(14, 51, 108, 0.12); }
.btn--primary:hover { background: var(--color-primary-hover); color: #fff; box-shadow: 0 6px 18px rgba(14, 51, 108, 0.18); transform: translateY(-1px); }
.btn--outline { border: 1px solid var(--color-primary); color: var(--color-primary); background: #fff; }
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.btn--ghost-light { border: 1px solid rgba(255,255,255,0.6); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--color-primary); }
.btn--sm { padding: 11px 18px; font-size: 0.8125rem; }

/* =========================================================
   Motion — 控えめなスクロール表示 / マイクロインタラクション
   （prefers-reduced-motion を尊重。スクロール追従ではなく
   要素が一度だけふわっと現れる方式。）
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal.is-visible { opacity: 1; transform: none; }
  .reveal[data-delay="1"] { transition-delay: 0.06s; }
  .reveal[data-delay="2"] { transition-delay: 0.12s; }
  .reveal[data-delay="3"] { transition-delay: 0.18s; }
  .reveal[data-delay="4"] { transition-delay: 0.24s; }
  .reveal[data-delay="5"] { transition-delay: 0.30s; }
  .reveal[data-delay="6"] { transition-delay: 0.36s; }
}

/* キーボードフォーカスの視認性 */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(45, 49, 51, 0.07); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.0625rem; color: var(--color-ink); letter-spacing: 0.01em; flex-shrink: 0; white-space: nowrap; }
.site-logo:hover { color: var(--color-ink); }
.site-logo__mark { width: 32px; height: 32px; border-radius: var(--radius); flex-shrink: 0; background: var(--color-primary); display: grid; place-items: center; color: #fff; font-size: 0.9rem; font-weight: 700; }
.site-logo__sub { display: block; font-size: 0.625rem; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0.06em; line-height: 1.2; }
.site-logo__img { height: 38px; width: auto; display: block; }

.gnav { display: flex; align-items: center; min-width: 0; }
.gnav__list { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.gnav__item { position: relative; }
.gnav__link { display: flex; align-items: center; gap: 3px; white-space: nowrap; padding: 0 9px; height: var(--header-h); font-weight: 500; font-size: 0.8125rem; color: var(--color-ink); cursor: default; user-select: none; }
.gnav__caret { font-size: 0.6em; opacity: 0.5; }
.gnav__link:hover { color: var(--color-primary); }
.gnav__panel {
  position: absolute; top: var(--header-h); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 230px; background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 8px;
  opacity: 0; visibility: hidden; transition: all 0.2s var(--ease);
}
.gnav__item:hover .gnav__panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.gnav__panel a { display: block; padding: 11px 14px; font-size: 0.875rem; font-weight: 400; color: var(--color-ink); border-left: 2px solid transparent; }
.gnav__panel a:hover { background: var(--color-bg-soft); color: var(--color-primary); border-left-color: var(--color-primary); }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Hamburger */
.nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-ink); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   Hero (top page) — light split layout
   ========================================================= */
.hero { background: #fff; border-bottom: 1px solid var(--color-border); }
.hero__inner {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  padding-block: clamp(40px, 6vw, 72px);
}
/* 画像レイヤー（文字なし版 → 文字あり版をクロスフェード）。
   ネイティブ比率(1024:565)のまま控えめなサイズで表示し、拡大による画質劣化を防ぐ */
.hero__media {
  position: relative;
  width: 100%;
  max-width: 860px;
  aspect-ratio: 1024 / 565;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #3f86c4; /* 読み込み前の海の青 */
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* 文字あり版：landing直後は隠し、少し待ってから浮き上がる */
.hero__img--text {
  opacity: 0;
  filter: blur(8px);
  will-change: opacity, filter;
  animation: heroTextRise 1800ms cubic-bezier(.22,.61,.36,1) 900ms forwards;
}
@keyframes heroTextRise {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}
/* アクションボタン：文字が出たあと続いてフェードイン */
.hero__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  opacity: 0;
  animation: heroFadeUp 900ms ease 2300ms forwards;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__scroll { display: none; }
/* モーション無効設定では即座に最終状態を表示 */
@media (prefers-reduced-motion: reduce) {
  .hero__img--text { animation: none; opacity: 1; filter: none; }
  .hero__actions { animation: none; opacity: 1; transform: none; }
}

/* Page header (lower pages) — light */
.page-hero { background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border); padding-block: clamp(48px, 6vw, 80px); }
.page-hero__eyebrow { color: var(--color-primary); font-weight: 600; letter-spacing: 0.16em; font-size: 0.75rem; text-transform: uppercase; }
.page-hero__title { font-size: clamp(1.75rem, 3.6vw, 2.875rem); font-weight: 500; letter-spacing: -0.02em; color: var(--color-ink); margin-top: 14px; }
.page-hero__lead { margin-top: 18px; max-width: 720px; color: var(--color-text-muted); font-weight: 400; }

/* Breadcrumb */
.breadcrumb { background: var(--color-bg-soft); }   /* rcl: 薄ブルーグレー背景 */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 14px; font-size: 0.875rem; color: var(--color-text-muted); }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 8px; color: var(--color-text-muted); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: underline; }
.breadcrumb a:hover { text-decoration: none; }
.breadcrumb li:last-child { color: var(--color-ink); }

/* ---------- Pagination (rcl 準拠 / 一覧にページ送りを置く時に使用) ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination__link { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 0.8125rem; border-radius: 50%; color: var(--color-primary); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--color-primary); }
.pagination__link:hover { text-decoration-thickness: 2px; }
.pagination__link.is-active { pointer-events: none; color: var(--color-text-muted); border: 1px solid var(--color-text-muted); text-decoration: none; }
.pagination__nav { display: inline-flex; align-items: center; gap: 8px; color: var(--color-primary); }
.pagination__nav[aria-disabled="true"] { color: var(--color-border); pointer-events: none; }

/* =========================================================
   Cards & Grids
   ========================================================= */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.25s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #eef2f6, #dde6ef); position: relative; display: grid; place-items: center; color: var(--color-primary); font-weight: 500; letter-spacing: 0.1em; overflow: hidden; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.card:hover .card__thumb img { transform: scale(1.04); }
.card__thumb span { opacity: 0.55; font-size: 0.75rem; }
.card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__tag { align-self: flex-start; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--color-primary); background: none; padding: 0; }
.card__tag::before { content: "#"; margin-right: 1px; opacity: 0.65; }
.card__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.6; color: var(--color-ink); }
.card__text { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.85; }
.card__more { margin-top: auto; font-size: 0.8125rem; font-weight: 600; color: var(--color-primary); }
.card__more::after { content: " →"; }

/* Category nav cards (flat) */
.cat-card {
  position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  display: flex; flex-direction: column; padding: 28px; min-height: 200px;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cat-card:hover { border-color: var(--color-primary); background: #fff; transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cat-card__num { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; color: var(--color-primary); transition: color 0.25s var(--ease); }
.cat-card__more { transition: transform 0.25s var(--ease); }
.cat-card:hover .cat-card__more { transform: translateX(4px); }
.cat-card__title { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--color-ink); margin-top: 10px; }
.cat-card__en { font-size: 0.6875rem; color: var(--color-text-muted); letter-spacing: 0.12em; margin-top: 4px; text-transform: uppercase; }
.cat-card__text { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 12px; line-height: 1.85; }
.cat-card__more { margin-top: auto; padding-top: 18px; font-weight: 600; font-size: 0.8125rem; color: var(--color-primary); }
.cat-card__more::after { content: " →"; }
/* 外部リンクのカードは矢印を外部リンクアイコン（↗）に */
.cat-card[target="_blank"] .cat-card__more::after { content: " ↗"; }
.cat-card[target="_blank"]:hover .cat-card__more { transform: translate(3px, -3px); }
.cat-card__logo { display: block; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: 18px; overflow: hidden; }
.cat-card__logo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }

/* Number / data blocks */
.stat { text-align: left; padding: 28px 4px; border-top: 2px solid var(--color-ink); }
.stat__num { font-size: clamp(2.2rem, 4.5vw, 3.25rem); font-weight: 500; color: var(--color-ink); line-height: 1.05; letter-spacing: -0.03em; }
.stat__num .unit { font-size: 0.42em; margin-left: 6px; color: var(--color-text-muted); font-weight: 500; }
.stat__label { margin-top: 14px; font-size: 0.875rem; font-weight: 400; color: var(--color-text-muted); }
.section--dark .stat { border-top-color: rgba(255,255,255,0.5); }
.section--dark .stat__num { color: #fff; }
.section--dark .stat__label { color: rgba(255,255,255,0.8); }

/* Definition list */
.deflist-group { font-size: 1.3125rem; font-weight: 700; color: var(--color-ink); margin: 0; padding-bottom: 4px; }
.deflist { border-top: 1px solid var(--color-border); }
.deflist__row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 4px; border-bottom: 1px solid var(--color-border); }
.deflist__row dt { font-weight: 700; color: var(--color-ink); }  /* rcl: 定義リスト見出しは太字 */
.deflist__row dd { color: var(--color-text-muted); margin: 0; font-weight: 400; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 12px; }
.step { position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px 24px 22px 76px; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 24px; top: 22px; color: var(--color-primary); font-weight: 600; font-size: 0.9375rem; }
.step__title { font-weight: 500; color: var(--color-ink); }
.step__text { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 4px; }

/* FAQ accordion */
.faq { border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__q { width: 100%; text-align: left; display: flex; gap: 14px; align-items: flex-start; padding: 24px 44px 24px 0; font-weight: 500; color: var(--color-ink); position: relative; }
.faq__q::before { content: "Q"; color: var(--color-primary); font-weight: 600; }
/* rcl: accordion-button（円形 +/-）。+ はSVG背景で円の中央に正確配置 */
.faq__q::after { content: ""; position: absolute; right: 0; top: 18px; width: 32px; height: 32px; border: 1px solid var(--color-border); border-radius: 50%; background: center / 13px 13px no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20stroke='%23646d76'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M12%205V19M5%2012H19'/%3E%3C/svg%3E"); transition: transform 0.3s var(--ease), border-color 0.25s var(--ease); }
.faq__q:hover::after, .faq__item.is-open .faq__q::after { border-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20stroke='%230065bd'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M12%205V19M5%2012H19'/%3E%3C/svg%3E"); }
.faq__item.is-open .faq__q::after { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 0 24px 28px; color: var(--color-text-muted); font-size: 0.9375rem; }

/* CTA band (flat blue) */
.cta { background: var(--color-bg-band); color: #fff; text-align: center; }
.cta__eyebrow { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: rgba(255,255,255,0.72); text-transform: uppercase; margin-bottom: 10px; }
.cta__title { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 500; letter-spacing: -0.02em; }
.cta__text { margin-top: 16px; color: rgba(255,255,255,0.88); font-weight: 400; }
.cta__actions { margin-top: 32px; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* Generic prose block */
.prose p { margin-bottom: 1.5em; color: #3a3f42; font-weight: 400; }
.prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }  /* rcl: 本文中テキストリンク */
.prose a:hover { text-decoration: none; }
.inline-link { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.inline-link:hover { text-decoration: none; }
.prose h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; margin: 2em 0 0.8em; color: var(--color-ink); }
.prose h4 { font-size: 1.0625rem; font-weight: 600; margin: 1.6em 0 0.5em; color: var(--color-ink); }
.prose .figure { aspect-ratio: 16/7; background: linear-gradient(135deg,#eef2f6,#dde6ef); display:grid; place-items:center; color:var(--color-primary); opacity:.9; margin: 1.6em 0; font-size:.8rem; letter-spacing:.12em; }

/* deflist 内の長文整形 */
.deflist__row dd p { margin: 0 0 0.8em; }
.deflist__row dd p:last-child { margin-bottom: 0; }

/* Index jump nav */
/* INDEX 用セクションは下余白を詰め、直後セクションとの間隔が広くなりすぎないようにする */
.section:has(> .container > .index-nav) { padding-bottom: 0; }
.index-nav { background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px 28px; }
.index-nav__ttl { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; color: var(--color-primary); margin-bottom: 14px; }
.index-nav ol { counter-reset: idx; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 32px; }
.index-nav li { counter-increment: idx; }
.index-nav a { display: flex; gap: 12px; padding: 10px 0; font-weight: 400; font-size: 0.9375rem; color: var(--color-ink); border-bottom: 1px solid var(--color-border); }
.index-nav a::before { content: counter(idx, decimal-leading-zero); color: var(--color-primary); font-weight: 600; }
.index-nav a:hover { color: var(--color-primary); }

/* Value blocks */
.value-block { border-left: 3px solid var(--color-primary); padding: 4px 0 4px 24px; margin-bottom: 32px; }
.value-block__num { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; color: var(--color-primary); }
.value-block__ttl { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; margin: 6px 0 10px; color: var(--color-ink); }
.value-block__text { color: var(--color-text-muted); font-weight: 400; }
/* グリッド配置時はgapで余白を取るため個別marginを無効化 */
.grid > .value-block { margin-bottom: 0; }

/* VMV value: 列優先で配置（VALUE 01–04を左列、05–07を右列） */
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 28px 56px; }
.value-grid > .value-block { margin-bottom: 0; }
@media (max-width: 768px) {
  .value-grid { grid-auto-flow: row; grid-template-rows: auto; grid-template-columns: 1fr; }
}

/* ---------- VMV: リクルートグループのVMV（下部に小さく掲載） ---------- */
.group-vmv { max-width: 880px; }
.group-vmv__lead { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: 28px; }
.group-vmv__item { padding: 22px 0; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: 150px 1fr; gap: 8px 28px; align-items: baseline; }
.group-vmv__item:last-child { border-bottom: 1px solid var(--color-border); }
.group-vmv__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; color: var(--color-primary); text-transform: uppercase; }
.group-vmv__ttl { font-size: 1.0625rem; font-weight: 500; line-height: 1.6; color: var(--color-ink); }
.group-vmv__ttl small { display: block; font-size: 1.0625rem; font-weight: 500; color: var(--color-ink); letter-spacing: 0.06em; margin-top: 4px; }
.group-vmv__text { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.85; margin-top: 8px; }
.group-vmv__values { display: grid; gap: 6px; margin-top: 10px; }
.group-vmv__values li { font-size: 0.875rem; color: var(--color-text-muted); position: relative; padding-left: 14px; }
.group-vmv__values li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); }
@media (max-width: 600px) { .group-vmv__item { grid-template-columns: 1fr; gap: 6px 0; } }

/* Roles list */
.role { display: grid; grid-template-columns: 88px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--color-border); align-items: start; }
.role__code { width: 88px; height: 88px; border-radius: var(--radius); background: var(--color-primary); color:#fff; display:grid; place-items:center; font-weight:600; font-size:1.5rem; letter-spacing:0.02em; }
.role__name { font-size: 1.125rem; font-weight: 500; color: var(--color-ink); }
.role__text { color: var(--color-text-muted); font-size: 0.9375rem; margin-top: 8px; font-weight: 400; }
.role__more { display:inline-block; margin-top:12px; font-weight:600; font-size:0.8125rem; color:var(--color-primary); }
.role__more::after { content:" →"; }

/* キャリアパス（起点から3つの方向へ分岐するルート図） */
.routes-origin {
  text-align: center;
  background: var(--color-primary-soft);
  border-radius: var(--radius);
  padding: 16px 24px;
  margin-top: 8px;
}
.routes-origin__badge { display: inline-block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; color: #fff; background: var(--color-primary); border-radius: 999px; padding: 4px 12px; margin-right: 12px; vertical-align: middle; }
.routes-origin__text { font-size: 0.9375rem; font-weight: 600; color: var(--color-ink); vertical-align: middle; }

.routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; align-items: stretch; }
.route {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 30px 26px 28px;
  transition: border-color .25s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* 起点バーから各ルートへ下りる接続線とノード */
.route::before { content: ""; position: absolute; left: 50%; top: -40px; transform: translateX(-50%); width: 2px; height: 32px; background: var(--color-border-strong); }
.route::after { content: ""; position: absolute; left: 50%; top: -8px; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-border-strong); }
.route__no { display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; color: var(--color-text-muted); margin-bottom: 12px; }
.route__dir { display: inline-flex; align-items: center; gap: 7px; font-size: 1.0625rem; font-weight: 600; color: var(--color-primary); letter-spacing: 0.02em; }
.route__dir::before { content: "↗"; font-size: 1.1em; line-height: 1; }
.route__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.5; color: var(--color-ink); margin: 20px 0 8px; }
.route__text { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.8; }
.route__list { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--color-border); display: grid; gap: 12px; }
.route__list li { position: relative; padding-left: 16px; font-size: 0.8125rem; font-weight: 500; color: var(--color-ink); line-height: 1.55; }
.route__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); }
.route__list li span { display: block; color: var(--color-text-muted); font-weight: 400; font-size: 0.75rem; margin-top: 2px; }

/* 求人へのスティッキーCTA（ページ下部に追従） */
.job-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255,255,255,0.97); backdrop-filter: saturate(180%) blur(8px); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 20px rgba(45,49,51,0.08); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
/* CTA（青セクション）が見え始めたら、重複する募集ボタンのバーを隠す */
.job-sticky.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
.job-sticky__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.job-sticky__text { font-size: 0.9375rem; color: var(--color-text-muted); }
.job-sticky__text strong { color: var(--color-ink); font-weight: 600; }
@media (max-width: 560px) {
  .job-sticky__inner { justify-content: center; padding-block: 10px; }
  .job-sticky__text { display: none; }
  .job-sticky .btn { width: 100%; justify-content: center; }
}

/* Division list */
.division-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--color-border); }
.division-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 8px; border-bottom: 1px solid var(--color-border); font-weight: 500; color: var(--color-ink); }
.division-list a:nth-child(odd) { border-right: 1px solid var(--color-border); padding-right: 24px; }
.division-list a:nth-child(even) { padding-left: 24px; }
.division-list a::after { content: "→"; color: var(--color-primary); }
.division-list a:hover { color: var(--color-primary); background: var(--color-bg-soft); }

/* Officers / CxO */
.officers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.officer { text-align: left; }
.officer__photo { aspect-ratio: 1; background: linear-gradient(135deg,#eef2f6,#dde6ef); margin-bottom: 14px; }
.officer__role { font-size: 0.75rem; color: var(--color-primary); font-weight: 600; }
.officer__name { font-weight: 500; color: var(--color-ink); }

/* Job openings */
.openings { border-top: 1px solid var(--color-border); }
.opening { border-bottom: 1px solid var(--color-border); padding: 22px 4px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.opening__cat { font-weight: 500; color: var(--color-ink); }
.opening__meta { font-size: 0.8125rem; color: var(--color-text-muted); font-weight: 400; }

/* =========================================================
   TOP page modules
   ========================================================= */
.top-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.top-head__en { font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 500; line-height: 1.1; color: var(--color-ink); letter-spacing: -0.03em; }
.top-head__en .dot { color: var(--color-primary); }
.top-head__ja { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); margin-top: 14px; letter-spacing: 0.04em; }
.top-head__link { font-weight: 600; font-size: 0.875rem; color: var(--color-primary); white-space: nowrap; }
.top-head__link::after { content: " →"; }
.section--dark .top-head__en { color: #fff; }

/* Job search card grid */
/* Openings：写真とテキストを左右に並べる特集レイアウト（CA→RAでジグザグ） */
.jobfeatures { display: grid; gap: 28px; }
.jobfeature { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 40px 44px; border-radius: var(--radius); }
.jobfeature--ca { background: var(--color-bg-soft); }
.jobfeature--ra { background: var(--color-primary-soft); }
.jobfeature__media { aspect-ratio: 16/9; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, #eef2f6, #dde6ef); }
.jobfeature__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.jobfeature:hover .jobfeature__media img { transform: scale(1.03); }
.jobfeature__body { display: flex; flex-direction: column; }
.jobfeature__name { font-weight: 600; font-size: clamp(1.375rem, 1rem + 1.1vw, 1.625rem); line-height: 1.3; white-space: nowrap; color: var(--color-ink); }
.jobfeature__sub { margin-top: clamp(10px, 1.2vw, 16px); font-size: clamp(0.9375rem, 0.85rem + 0.45vw, 1.0625rem); line-height: 1.6; color: var(--color-text-muted); }
.jobfeature__links { margin-top: 26px; display: flex; gap: 12px; max-width: 440px; }
.jobfeature__links a { flex: 1; text-align: center; font-size: 0.8125rem; font-weight: 600; padding: 13px 0; border-radius: var(--radius); border: 1px solid var(--color-border-strong); color: var(--color-ink); }
.jobfeature__links a.is-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.jobfeature__links a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.jobfeature__links a.is-primary:hover { background: var(--color-primary-dark); color: #fff; border-color: var(--color-primary-dark); }

/* =========================================================
   求人検索ページ（Positions / Indeed風）
   ========================================================= */
.jobsearch-section { padding-block: 56px 96px; }
/* 検索バー */
.jobsearch { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; align-items: end; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; }  /* rcl: 白い面に #f3f5fa のピル入力 */
.jobsearch__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jobsearch__field label, .jobsearch__label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.04em; }
.jobsearch__field input, .jobsearch__field select { width: 100%; height: 46px; padding: 0 20px; font-family: inherit; font-size: 0.9375rem; color: var(--color-ink); background: var(--color-bg-soft); border: 1px solid transparent; border-radius: 999px; appearance: none; -webkit-appearance: none; }  /* rcl: ピル型 / #f3f5fa 背景 */
.jobsearch__field input::placeholder { color: var(--color-text-muted); }
.jobsearch__field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23646d76' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 40px; }
.jobsearch__field input:focus, .jobsearch__field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.jobsearch__actions { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; }
.jobsearch__actions .btn { flex: 0 0 auto; }
/* 結果ヘッダ */
.jobsearch__resulthead { display: flex; align-items: baseline; justify-content: space-between; margin-top: 32px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.jobsearch__count { color: var(--color-text-muted); font-size: 0.9375rem; }
.jobsearch__count strong { color: var(--color-ink); font-size: 1.25rem; font-weight: 600; margin-right: 2px; }
/* 求人リスト */
.joblist { display: grid; gap: 16px; margin-top: 24px; }
.joblisting { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; background: #fff; transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease); }
.joblisting:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.joblisting[hidden] { display: none; }
.joblisting__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.joblisting__badge { display: inline-block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary-dark); }
.joblisting__badge--ra { background: #eef7ee; color: #2e7d32; }
.joblisting__posted { font-size: 0.75rem; color: var(--color-text-muted); }
.joblisting__title { font-size: 1.1875rem; font-weight: 600; color: var(--color-ink); margin-top: 12px; letter-spacing: -0.01em; }
.joblisting__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; color: var(--color-text-muted); font-size: 0.875rem; }
.joblisting__meta li { display: inline-flex; align-items: center; gap: 6px; }
.joblisting__meta-ico { opacity: 0.8; font-style: normal; }
.joblisting__snippet { margin-top: 14px; color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.8; max-width: 760px; }
.joblisting__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.joblisting__tag { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--color-primary); background: none; padding: 0; }  /* Stories の card__tag に合わせたタグ表示（# 付き・囲み無し） */
.joblisting__tag::before { content: "#"; margin-right: 1px; opacity: 0.65; }
.joblisting__ref { margin-top: 14px; font-size: 0.75rem; color: var(--color-text-muted); }
.joblisting__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.joblist__empty { margin-top: 40px; text-align: center; color: var(--color-text-muted); font-size: 0.9375rem; }
@media (max-width: 768px) {
  .jobsearch { grid-template-columns: 1fr 1fr; padding: 18px; }
  .jobsearch__field--keyword { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .jobsearch { grid-template-columns: 1fr; }
}

.media-feature { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; }
.media-feature .card__title { font-size: 0.9375rem; }
/* 4枚の高さを揃え、16:9サムネをそのまま表示（黒帯なし） */
.media-feature .card__thumb { aspect-ratio: 16 / 9; }

/* 動画カード（クリックで埋め込み再生） */
.card--video { cursor: pointer; }
.card__thumb--video img { width: 100%; height: 100%; object-fit: cover; }
.card__play { position: absolute; inset: 0; display: grid; place-items: center; transition: background 0.25s var(--ease); }
.card__play::before {
  content: ""; width: 60px; height: 60px; border-radius: 50%;
  background: rgba(0, 101, 189, 0.9); box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.card__play::after {
  content: ""; position: absolute;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px; /* 三角の視覚的中央寄せ */
}
.card--video:hover .card__play { background: rgba(0,0,0,0.12); }
.card--video:hover .card__play::before { transform: scale(1.08); background: var(--color-primary); }
.card__more--play::after { content: ""; }
.card__more--play::before { content: "▶ "; font-size: 0.7em; }

/* =========================================================
   Carousel（横スクロール／scroll-snap＋前後ボタン）
   ========================================================= */
.carousel { position: relative; margin-top: 24px; }
.carousel__track { display: flex; align-items: stretch; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 4px 12px; scrollbar-width: thin; }
.carousel__track::-webkit-scrollbar { height: 8px; }
.carousel__track::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 999px; }
.carousel__item { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; display: flex; }
.carousel__item > .card { width: 100%; }
.carousel__nav { position: absolute; top: calc(50% - 28px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; padding: 0; color: var(--color-ink); z-index: 2; transition: background 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease); }
.carousel__nav:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.carousel__nav--prev { left: -16px; }
.carousel__nav--next { right: -16px; }
.carousel__nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 960px) {
  .carousel__item { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 600px) {
  .carousel__item { flex-basis: 85%; }
  .carousel__nav { display: none; }
}

/* News list */
.news { border-top: 1px solid var(--color-border); }
.news__item { display: grid; grid-template-columns: 130px 110px 1fr; gap: 20px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--color-border); }
.news__date { font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.news__cat { font-size: 0.6875rem; font-weight: 600; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius); padding: 4px 0; text-align: center; }
.news__title { font-size: 0.9375rem; font-weight: 400; color: var(--color-ink); }
.news__item:hover .news__title { color: var(--color-primary); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: #1a1d1f; color: rgba(255,255,255,0.7); padding-block: 72px 36px; font-size: 0.875rem; }
.footer-top { display: grid; grid-template-columns: 1.2fr repeat(6, 1fr); gap: 28px; }
.footer-brand .site-logo { color: #fff; }
.footer-brand .site-logo:hover { color: #fff; }
.footer-brand .site-logo__img { height: 40px; }
.footer-brand p { margin-top: 18px; color: rgba(255,255,255,0.5); font-size: 0.8125rem; max-width: 260px; font-weight: 400; line-height: 1.9; }
.footer-col__title { font-weight: 500; color: #fff; font-size: 0.8125rem; letter-spacing: 0.04em; margin-bottom: 16px; }
.footer-col a { display: block; padding: 7px 0; color: rgba(255,255,255,0.6); font-size: 0.8125rem; font-weight: 400; }
.footer-col a:hover { color: #fff; }
.footer-bottom { margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; color: rgba(255,255,255,0.4); font-size: 0.75rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.footer-legal a { display: inline-flex; align-items: center; color: rgba(255,255,255,0.55); font-size: 0.75rem; }
.footer-legal a:hover { color: #fff; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  /* オフキャンバスのドロワーが画面右外で横スクロールを生むのを防ぐ */
  html, body { overflow-x: hidden; }
  /* SP: ヘッダー（ハンバーガー）を常時表示。
     overflow-x:hidden が position:sticky を無効化してしまうため、
     祖先の overflow に影響されない position:fixed に切り替え、
     body に同じ高さの padding-top を足してレイアウトのズレを防ぐ。 */
  .site-header { position: fixed; left: 0; right: 0; }
  body { padding-top: var(--header-h); }
  .nav-toggle { display: flex; }
  .header-actions .btn { display: none; }
  .gnav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    height: calc(100vh - var(--header-h)); background: #fff;
    flex-direction: column; align-items: stretch; gap: 0; padding: 4px 24px 20px;
    overflow-y: auto; transform: translateX(100%); transition: transform 0.32s var(--ease);
  }
  .gnav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  body.nav-open .gnav { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .gnav__item { width: 100%; }
  .gnav__link { height: auto; padding: 11px 4px; border-bottom: 1px solid var(--color-border); font-size: 1rem; justify-content: space-between; }
  /* 見出し（span＝非クリック）はタップ／ホバーで色が変わらないようにする */
  span.gnav__link:hover { color: var(--color-ink); }
  .gnav__panel,
  .gnav__item:hover .gnav__panel { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; padding: 0 0 6px 16px; min-width: 0; }
  .gnav__panel a { padding: 6px 4px; border-left: none; }
}
@media (max-width: 960px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .media-feature { grid-template-columns: repeat(2, 1fr); }
  /* Openings：縦積みにして写真を上に（2カラムが窮屈になる前に切替） */
  .jobfeature { grid-template-columns: 1fr; gap: 18px; padding: 28px; }
  .jobfeature__name { white-space: normal; }
  .jobfeature__links { max-width: none; }
  .routes { grid-template-columns: 1fr; margin-top: 24px; }
  .route::before, .route::after { display: none; }
}
@media (max-width: 768px) {
  .section { padding-block: 64px; }
  .container { padding-inline: 22px; }
  .grid--2 { grid-template-columns: 1fr; }
  .jobfeature { padding: 24px; }
  .index-nav ol { grid-template-columns: 1fr; }
  .division-list { grid-template-columns: 1fr; }
  .division-list a:nth-child(odd) { border-right: none; padding-right: 8px; }
  .division-list a:nth-child(even) { padding-left: 8px; }
  .officers { grid-template-columns: repeat(2, 1fr); }
  .role { grid-template-columns: 60px 1fr; gap: 16px; }
  .role__code { width: 60px; height: 60px; font-size: 1.1rem; }
  .deflist__row { grid-template-columns: 1fr; gap: 6px; }
  /* フッター：縦に間延びさせず 2 カラムでコンパクトにまとめる */
  .site-footer { padding-block: 40px 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col a { padding: 5px 0; }
  .footer-extra { margin-top: 28px; }
  .footer-bottom { margin-top: 28px; padding-top: 20px; }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .media-feature { grid-template-columns: 1fr; }
  .news__item { grid-template-columns: 90px 1fr; }
  .news__cat { grid-row: 1; grid-column: 2; justify-self: start; padding-inline: 12px; }
  .news__title { grid-column: 1 / -1; }
}

/* =========================================================
   ヘッダー：キャリア採用ブランディング
   ロゴ横に「キャリア採用 / Careers」を併記し、
   キャリア採用サイトであることを明示する。
   ========================================================= */
.site-logo__careers {
  display: inline-flex; flex-direction: column; line-height: 1.15;
  padding-left: 12px; margin-left: 2px;
  border-left: 1px solid var(--color-border-strong);
}
.site-logo__careers-ja { font-size: 0.8125rem; font-weight: 600; color: var(--color-primary); letter-spacing: 0.04em; }
.site-logo__careers-en { font-size: 0.5625rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.16em; text-transform: uppercase; }
/* 単一リンク化したナビ項目（STORIES）はポインタにする */
a.gnav__link { cursor: pointer; }
@media (max-width: 420px) {
  .site-logo__careers-en { display: none; }
  .site-logo__careers { padding-left: 10px; }
  .site-logo__img { height: 32px; }
}

/* =========================================================
   TOP：KV（コラージュ＋コピー重ね）
   複数の人物・職場写真をモザイク配置し、左にミッションコピーを重ねる。
   写真は assets/img のプレースホルダ（後で差し替え前提）。
   ========================================================= */
.kv { position: relative; background: #fff; border-bottom: 1px solid var(--color-border); }
.kv__inner {
  position: relative; padding-block: clamp(28px, 4vw, 56px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
}
.kv__single { order: 2; overflow: hidden; border-radius: var(--radius); background: linear-gradient(135deg, #eef2f6, #dde6ef); aspect-ratio: 4 / 3; }
.kv__single img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.kv:hover .kv__single img { transform: scale(1.03); }
.kv__copy { order: 1; }
.kv__eyebrow { color: var(--color-primary); font-weight: 600; letter-spacing: 0.16em; font-size: 0.75rem; text-transform: uppercase; }
.kv__title { font-size: clamp(1.25rem, 2.7vw, 2.125rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.02em; color: var(--color-ink); margin-top: 16px; white-space: nowrap; }
.kv__title .accent { color: var(--color-primary); }
.kv__lead { margin-top: 16px; color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.85; }
.kv__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) {
  .kv__inner { padding-block: 24px; grid-template-columns: 1fr; gap: 18px; }
  .kv__single { order: -1; aspect-ratio: 16 / 11; }
  .kv__copy { order: 1; }
  .kv__title { font-size: clamp(1rem, 5vw, 2rem); }
}

/* =========================================================
   両面モデル図解（CA / RA 仕事内容ページ上部）
   求職者 ⇄ CA ⇄ マッチング ⇄ RA ⇄ 企業 の全体像を示す。
   PC幅は横長のPC版、iPad〜スマホ幅では縦長のSP版に切替（HTML側<picture>）。
   ========================================================= */
.biz-diagram { display: block; margin-top: 28px; }
.biz-diagram__img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.biz-model__caption { margin-top: 20px; color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.85; max-width: 820px; }

/* =========================================================
   求人チョイ見せ（CA / RA ページ：代表ポジションの抜粋）
   ========================================================= */
.jobpeek { display: grid; gap: 14px; margin-top: 24px; }
.jobpeek__loading { color: var(--color-text-muted); font-size: 0.9375rem; }
.jobpeek__card {
  display: block; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 22px 24px; background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.3s var(--ease);
}
.jobpeek__card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.jobpeek__badge { display: inline-block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary-dark); }
.jobpeek__badge--ra { background: #eef7ee; color: #2e7d32; }
.jobpeek__title { display: block; font-size: 1.0625rem; font-weight: 600; color: var(--color-ink); margin-top: 12px; letter-spacing: -0.01em; }
.jobpeek__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--color-text-muted); font-size: 0.8125rem; }
.jobpeek__meta li { display: inline-flex; align-items: center; gap: 6px; }
.jobpeek__more { display: inline-block; margin-top: 14px; font-size: 0.8125rem; font-weight: 600; color: var(--color-primary); }
.jobpeek__more::after { content: " →"; }
.jobpeek__all { margin-top: 22px; text-align: center; }

/* =========================================================
   他職種への回遊導線（CA / RA ページ下部）
   ========================================================= */
.jobnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.jobnav__card {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 26px 24px; transition: border-color 0.25s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.jobnav__card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.jobnav__en { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; color: var(--color-primary); text-transform: uppercase; }
.jobnav__name { font-size: 1.0625rem; font-weight: 500; color: var(--color-ink); }
.jobnav__text { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.8; }
.jobnav__more { margin-top: auto; padding-top: 14px; font-size: 0.8125rem; font-weight: 600; color: var(--color-primary); }
.jobnav__more::after { content: " →"; }
@media (max-width: 760px) { .jobnav { grid-template-columns: 1fr; } }

/* =========================================================
   STORIES：フィルター付き統合ページ
   チップで「すべて／動画／記事・対談」などカテゴリ絞り込み。
   ========================================================= */
.story-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 32px; }
/* 見出し的なフィルターラベル（アイコン＋「フィルター」） */
.story-filter__head { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-ink); margin-right: 4px; }
.story-filter__ico { display: block; color: var(--color-primary); }
.story-chip {
  display: inline-flex; align-items: center;
  font-size: 0.8125rem; font-weight: 600; padding: 9px 16px;
  border: 1px solid var(--color-border-strong); border-radius: 999px; background: #fff; color: var(--color-ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.story-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.story-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.story-card[hidden] { display: none; }
.story-empty { margin-top: 32px; text-align: center; color: var(--color-text-muted); font-size: 0.9375rem; }
.story-empty[hidden] { display: none; }

/* =========================================================
   フッター：新卒採用など関連サイトへのリンク
   ========================================================= */
.footer-extra { margin-top: 44px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-extra__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); }
.footer-newgrad {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius);
  color: #fff; font-size: 0.875rem; font-weight: 500;
}
.footer-newgrad:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.footer-newgrad__arrow { font-size: 0.85em; opacity: 0.8; }

/* =========================================================
   一時非表示：数字で見る
   ページ本体・画像（asset）は残置し、サイト内のリンク・カードのみ非表示。
   復活させたい場合はこのブロックを削除するだけでよい。
   （代表メッセージページは削除済み）
   ========================================================= */
a[href$="about/data/index.html"] { display: none !important; }
/* トップ「私たちについて」のカードが2枚になるため4列→2列に調整 */
.grid--4:has(> a[href$="about/data/index.html"]) { grid-template-columns: repeat(2, 1fr); }
/* スマホ幅では他セクションと揃えて1列（:has の高い詳細度を同等で上書き） */
@media (max-width: 560px) {
  .grid--4:has(> a[href$="about/data/index.html"]) { grid-template-columns: 1fr; }
}

/* =========================================================
   追加修正（2026-06-10）
   ========================================================= */

/* 外部リンク共通アイコン（↗）
   ナビ・フッター・本文中のインラインのテキスト外部リンクに統一して付与。
   ※外部リンクのカード（.cat-card[target="_blank"]）は cat-card__more の矢印を ↗ に切替（上部参照）。
     ボタン（.btn）は「公式サイト」等のテキストで表現するため対象外 */
.gnav__panel a[target="_blank"]::after,
.footer-col a[target="_blank"]::after,
.footer-legal a[target="_blank"]::after,
.deflist a[target="_blank"]::after,
.prose a[target="_blank"]::after {
  content: "↗"; font-size: 0.82em; line-height: 1; opacity: 0.7; flex: none;
}
/* ドロップダウン内はアイコンを右端に寄せる */
.gnav__panel a[target="_blank"] { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
/* インラインのテキストリンクは語の直後にアイコンを置く */
.footer-col a[target="_blank"]::after,
.footer-legal a[target="_blank"]::after,
.deflist a[target="_blank"]::after,
.prose a[target="_blank"]::after { margin-left: 4px; }
.gnav__panel a[target="_blank"]:hover::after,
.deflist a[target="_blank"]:hover::after,
.prose a[target="_blank"]:hover::after { opacity: 1; }

/* ポジション一覧／チョイ見せのメタ行アイコン（絵文字→SVG） */
.joblisting__meta-ico { display: inline-flex; align-items: center; opacity: 0.7; }
.joblisting__meta-ico svg { display: block; }
.jobpeek__meta .joblisting__meta-ico { margin-right: 2px; }

/* STORIES：コンテンツタグはすべて同一スタイル（色・形を統一）。
   役割タグ（CA/RA）・コンテンツ種別タグ（動画/記事）とも .card__tag の
   ソフト背景・角型・プライマリ色に揃える */
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; align-items: center; }

/* 「他の職種を見る」が1枚のみのときは横いっぱいに広げず、収まりよく */
.jobnav:has(> a:only-child) { grid-template-columns: minmax(0, 440px); }
/* カードが2枚のときは2カラムで均等に（3カラム枠に2枚で隙間が空くのを防ぐ） */
.jobnav:has(> a:nth-child(2)):not(:has(> a:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 採用情報の相互回遊：現在ページのカード */
.jobnav__card[aria-current="page"] { border-color: var(--color-primary); background: var(--color-primary-soft); pointer-events: none; }
.jobnav__card[aria-current="page"] .jobnav__more { color: var(--color-text-muted); }
.jobnav__card[aria-current="page"] .jobnav__more::after { content: "（現在のページ）"; }

/* カルーセル前後ボタンの矢印（SVG）をボタン中央に正確に配置 */
.carousel__nav svg { display: block; }

/* アイコン（→）を出さないボタン（条件をクリア等） */
.btn--noicon { gap: 0; }
.btn--noicon::after { content: none; }

/* 勤務地マルチセレクト（チェックボックス・ドロップダウン） */
.msel { position: relative; }
.msel__toggle {
  width: 100%; height: 46px; padding: 0 40px 0 20px; text-align: left;
  font-family: inherit; font-size: 0.9375rem; color: var(--color-ink);
  background: var(--color-bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23646d76' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 18px center;
  border: 1px solid transparent; border-radius: 999px; display: flex; align-items: center;
}
.msel__toggle[aria-expanded="true"], .msel__toggle:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.msel__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel__value.is-placeholder { color: var(--color-text-muted); }
.msel__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-md); padding: 8px; max-height: 280px; overflow-y: auto; }
.msel__panel[hidden] { display: none; }
.msel__option { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; font-size: 0.9375rem; color: var(--color-ink); cursor: pointer; }
.msel__option:hover { background: var(--color-bg-soft); }
.msel__option:has(input:checked) { color: var(--color-primary-dark); font-weight: 500; }
/* カスタムチェックボックス（rcl準拠：白地・グレー枠／チェック時=プライマリ＋白チェック） */
.msel__option input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; flex: none; cursor: pointer;
  box-sizing: border-box;
  width: 20px; height: 20px; border: 1.5px solid var(--color-border-strong); border-radius: 5px;
  background: #fff center / 13px 13px no-repeat;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.msel__option input[type="checkbox"]:hover { border-color: var(--color-primary); }
.msel__option input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-soft); }
.msel__option input[type="checkbox"]:checked {
  background-color: var(--color-primary); border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}

/* サービス紹介ページ「Our Mission」の小見出しをブランドブルーに */
.prose--mission h3 { color: var(--color-primary); }