/* ==========================================================================
   Eiki.Y Portfolio 3D Redesign — styles.css
   Design tokens: DESIGN.md §6.1 (3 Tier / 13 colors) / COMPONENTS.md §2
   ========================================================================== */

/* --- 1. Design tokens ----------------------------------------------------- */
:root {
  /* Tier 1: Core */
  --color-paper: #FFFFFF;
  --color-navy: #0C1626;
  --color-indigo: #3B4B8C;
  --color-ink: #1B2536;
  /* Tier 2: Accent */
  --color-gold: #C4A24E;       /* 面積5%以下: kicker・現在マーカー・要所ラベルのみ */
  --color-teal: #2E7D8A;       /* 数値専用 */
  --color-error: #DC2626;
  /* Tier 3: Nuance */
  --color-warm-paper: #F8F7F2;
  --color-slate: #5D6D80;
  --color-depth: #4E5F7B;
  --color-mist: #EEF2F6;
  --color-line: #D7DEE8;
  --color-fog: #F2F5FA;

  /* Typography */
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --text-body: 1.0625rem;      /* 17px */
  --leading-body: 1.75;
  --leading-heading: 1.35;

  /* Layout */
  --container-max: 1200px;
  --container-px: 24px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --space-section: 96px;
  --space-section-mobile: 64px;

  /* Shape / elevation */
  --radius-card: 8px;
  --radius-button: 6px;
  --shadow-subtle: 0 1px 3px rgba(12, 22, 38, 0.06);
  --shadow-card: 0 2px 8px rgba(12, 22, 38, 0.07);
  --shadow-hover: 0 6px 18px rgba(12, 22, 38, 0.12);
  --transition-base: 0.25s ease;
}

/* --- 2. Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

/* 注: main / footer に z-index を与えない（stacking context が生まれ、
   z:-1 の固定 canvas がセクション背景 ::before(z:-2) より下に隠れるため） */
img { max-width: 100%; height: auto; display: inline-block; }
h1, h2, h3 { line-height: var(--leading-heading); margin: 0 0 var(--space-md); }
p, dl, ol, ul { margin: 0; }
a { color: var(--color-indigo); }

:focus-visible {
  outline: 2px solid var(--color-indigo);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--color-navy);
  color: #fff;
  text-decoration: none;
}
.skip-link:focus-visible { left: 8px; top: 8px; }

.text-link { color: var(--color-indigo); text-underline-offset: 3px; }

/* --- 3. Buttons ----------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.button__caption { font-weight: 400; font-size: 0.875rem; }
.button__icon { flex: none; }

.button--primary {
  background: var(--color-navy);
  color: #fff;
}
.button--primary:hover { background: #17263E; box-shadow: var(--shadow-hover); }

/* Navy 背景（Hero）上の Primary は反転（STATES_VARIANTS §3.1） */
.button--on-dark {
  background: #fff;
  color: var(--color-navy);
}
.button--on-dark:hover { background: var(--color-fog); box-shadow: var(--shadow-hover); }

.button--primary-compact {
  min-height: 40px;
  padding: 8px 20px;
  font-size: 0.9375rem;
  background: var(--color-navy);
  color: #fff;
}
.button--primary-compact:hover { background: #17263E; }

.button--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}
.button--secondary:hover { background: var(--color-fog); border-color: var(--color-indigo); }

/* Hero 内の Secondary は白アウトライン */
.hero .button--secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.hero .button--secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }

/* Secondary 内の白アイコンを Indigo 化する差し替え不要のフィルタ */
.button__icon--indigo { filter: brightness(0) saturate(100%) invert(29%) sepia(23%) saturate(1495%) hue-rotate(194deg) brightness(92%) contrast(90%); }

/* --- 4. Header ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-line);
}
.no-webgl .site-header { background: var(--color-paper); }
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height var(--transition-base);
}
.site-header.is-condensed .site-header__inner { height: 56px; }
.site-header__logo {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  text-decoration: none;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-ink);
  text-decoration: none;
  font-size: 0.9375rem;
}
.site-nav__link:hover { color: var(--color-indigo); text-decoration: underline; text-underline-offset: 4px; }
.site-nav__toggle { display: none; }

/* --- 5. Sections（共通枠 + 背景 variant） ---------------------------------- */
/* 背景は ::before（z:-2）に置き、固定ネットワーク canvas（z:-1）を
   「背景の上・コンテンツの下」に挟む。ライト面でもダーク帯でも
   ネットワークが同じ鮮明さで見え、文字の可読性は保たれる */
.section {
  position: relative;
  padding: var(--space-section) 0;
}
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}
.section__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}
.section--light::before { background: var(--color-paper); }
.section--fog::before { background: var(--color-mist); }
.section--warm::before { background: var(--color-warm-paper); }
.section--dark::before { background: var(--color-navy); }

.network-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;          /* セクション背景(::before z:-2)の上・コンテンツの下 */
  pointer-events: none;
}
.no-webgl .network-canvas { display: none; }

.section__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-xl);
}
.section__title--on-dark { color: #fff; }

/* --- 6. Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(480px, 70vh, 720px);
  display: flex;
  align-items: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--color-navy);
}
.hero__canvas-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* フォールバック画像は WebGL 非対応時のみ表示（同寸・CLS ゼロ） */
.hero-canvas__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.no-webgl .hero-canvas__fallback { display: block; }

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--container-px);
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(220px, 38fr);
  gap: clamp(20px, 3vw, var(--space-lg));
  align-items: center;
}
.hero__kicker {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  margin: 0 0 var(--space-md);
}
.hero__heading {
  font-size: clamp(2rem, 3.15vw, 2.5rem); /* 32〜40px: 1200px前後でも1行目を途中で折らない */
  font-weight: 700;
  color: #fff;
}
.hero__heading-line {
  display: inline-block;
  white-space: nowrap;
}
.hero__subcopy {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-lg);
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.hero__visual { position: relative; min-height: 200px; }
.hero__badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-end;
}
.metric-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-card);
  background: rgba(12, 22, 38, 0.85); /* 波形パーティクルの上でも数値が読める不透過度 */
  box-shadow: var(--shadow-card);
}
.metric-badge__label {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
}
.metric-badge__value {
  color: #fff;
  font-size: 1rem;
}
.metric-badge__value strong {
  font-family: var(--font-en);
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- 7. Routing ------------------------------------------------------------ */
.routing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.routing-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 28px 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  text-decoration: none;
  color: var(--color-ink);
  box-shadow: var(--shadow-subtle);
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.routing-card:hover { border-color: var(--color-indigo); box-shadow: var(--shadow-hover); }
.routing-card__icon { flex: none; }
.routing-card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.routing-card__title { font-weight: 700; font-size: 1.125rem; }
.routing-card__title small { font-weight: 500; font-size: 0.875rem; color: var(--color-slate); }
.routing-card__desc { font-size: 0.9375rem; color: var(--color-slate); }
.routing-card__chevron { flex: none; }

/* --- 8. Career Summary band ------------------------------------------------ */
.summary-band { padding: 48px 0; }
.summary-band__inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.summary-band__title {
  font-size: 1.25rem;
  margin: 0;
  padding-right: var(--space-xl);
  border-right: 1px solid var(--color-line);
}
.summary-band__stats {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.summary-band__lead {
  flex: 0 0 100%;
  max-width: 960px;
  margin: -8px 0 0;
  color: var(--color-depth);
  line-height: 1.9;
  text-align: justify;
}
.summary-stat { display: flex; align-items: baseline; gap: var(--space-md); }
.summary-stat__label { font-weight: 500; color: var(--color-ink); }
.summary-stat__value { color: var(--color-teal); font-weight: 700; }
.summary-stat__num {
  font-family: var(--font-en);
  font-size: 3rem;
  font-variant-numeric: tabular-nums;
}

/* --- 9. Timeline ------------------------------------------------------------ */
.timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.timeline__list::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-line);
}
.timeline-item {
  position: relative;
  padding: 0 0 var(--space-lg) var(--space-xl);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-paper);
  border: 2px solid var(--color-depth);
}
.timeline-item--current::before {
  background: var(--color-gold);
  border-color: var(--color-gold);
}
.timeline-item__period {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-slate);
}
.timeline-item--current .timeline-item__period { color: var(--color-gold); font-weight: 700; }
.timeline-item__role {
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 2px 0;
}
.timeline-item__note {
  display: block;
  font-size: 0.9375rem;
  color: var(--color-slate);
}
.timeline__footnote {
  margin-top: var(--space-lg);
  font-size: 0.875rem;
  color: var(--color-slate);
}

/* --- 10. Scope (Services PM) ------------------------------------------------ */
.scope__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
}
.scope-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.scope-row__name { font-weight: 700; }
.scope-row__desc { color: var(--color-slate); font-size: 0.9375rem; }

/* --- 11. Services Web -------------------------------------------------------- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.service-card {
  padding: 28px 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: var(--shadow-subtle);
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.service-card:hover { border-color: var(--color-indigo); box-shadow: var(--shadow-hover); }
.service-card__icon { margin-bottom: var(--space-md); }
.service-card__title { font-size: 1.125rem; margin-bottom: var(--space-sm); }
.service-card__desc { font-size: 0.9375rem; color: var(--color-slate); }

.demo-note {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 16px 20px;
  background: var(--color-mist);
  border-radius: var(--radius-card);
  font-size: 0.9375rem;
}
.demo-note__icon { flex: none; }

/* --- 12. Highlights (dark) ---------------------------------------------------- */
.highlights__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.stat-number {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
}
.stat-number__value {
  color: #7FB6C2; /* Trust Teal 明度調整（on-dark・コントラスト確保） */
  font-weight: 700;
  font-size: 1.125rem;
}
.stat-number__num {
  font-family: var(--font-en);
  font-size: 2.75rem;
  font-variant-numeric: tabular-nums;
}
.stat-number__label { color: rgba(255, 255, 255, 0.8); font-size: 0.9375rem; }
.stat-number__label small { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); }

/* --- 13. Process ---------------------------------------------------------------- */
.process__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  counter-reset: step;
}
.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -22px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--color-depth);
  border-right: 2px solid var(--color-depth);
  transform: translateY(-50%) rotate(45deg);
}
.process-step__num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-gold);
}
.process-step__name { font-weight: 700; font-size: 1.0625rem; }
.process-step__desc { font-size: 0.9375rem; color: var(--color-slate); }
.process__footnote { margin-top: var(--space-lg); font-size: 0.875rem; color: var(--color-slate); }

/* --- 14. Skill Sheet -------------------------------------------------------------- */
.skill-sheet__inner { text-align: center; }
.skill-sheet .section__title { margin-bottom: var(--space-md); }
.skill-sheet__lead { margin-bottom: var(--space-lg); }
.skill-sheet__button.button--primary {
  background: #217346;
  border-color: #217346;
}
.skill-sheet__button.button--primary:hover {
  background: #185C37;
  border-color: #185C37;
  box-shadow: 0 6px 18px rgba(33, 115, 70, 0.22);
}
.skill-sheet__note { margin-top: var(--space-md); font-size: 0.875rem; color: var(--color-slate); }

/* --- 15. FAQ ------------------------------------------------------------------------ */
.faq__list { display: flex; flex-direction: column; gap: var(--space-md); }
.faq-item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}
.faq-item__q {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 44px;
  padding: 16px 20px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { background: var(--color-fog); border-radius: var(--radius-card); }
.faq-item__tag {
  flex: none;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-depth);
  color: var(--color-depth);
}
.faq-item__tag--web { border-color: var(--color-teal); color: var(--color-teal); }
.faq-item__chevron {
  margin-left: auto;
  transform: rotate(90deg);
  transition: transform var(--transition-base);
}
.faq-item[open] .faq-item__chevron { transform: rotate(-90deg); }
.faq-item__a { padding: 0 20px 16px 20px; color: var(--color-slate); }

/* --- 16. Contact -------------------------------------------------------------------- */
.contact__inner { text-align: center; }
.contact__body { max-width: 560px; margin: 0 auto var(--space-lg); }
.contact__cta-row { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }

/* --- 17. Footer --------------------------------------------------------------------- */
.site-footer {
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--color-navy);
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 40px var(--container-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-footer__copy { color: rgba(255, 255, 255, 0.75); font-size: 0.875rem; }
.back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-button);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-base);
}
.back-to-top:hover { background: rgba(255, 255, 255, 0.12); }

/* --- 18. Reveal / motion（subtle 3D パターン②〜④の CSS 側） ------------------- */
.js-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* カード tilt は JS で transform を適用（±3°以内・perspective 付与） */
.js-tilt { will-change: transform; }

/* --- 19. Timeline 2カラムレイアウト（タスクC） ------------------------------------- */
/* PC: 左タイムライン + 右スティッキーキャリア図面パネル */
.timeline__layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-xl);
  align-items: start;
}
.timeline__left { min-width: 0; }

/* 右パネル: スティッキー */
.timeline__right {
  position: sticky;
  top: calc(64px + var(--space-lg)); /* ヘッダー高さ + 余白 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline__career-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; /* 480x360 = 4:3 */
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-fog);
}

/* 重ねて配置・opacity で出し分け */
.timeline__career-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.timeline__career-slide.is-active { opacity: 1; }

/* アクティブ timeline-item に Gold ハイライト */
.timeline-item.is-active-career .timeline-item__role {
  color: var(--color-indigo);
}
.timeline-item.is-active-career::before {
  border-color: var(--color-gold);
  background: var(--color-gold);
}

/* Mobile用インライン図面（デフォルト非表示・PC では .timeline__right を使う） */
.timeline-item__career-img { display: none; }

/* --- 20. Works スライダー（タスクB） ----------------------------------------------- */
.works__lead {
  margin-bottom: var(--space-xl);
  color: var(--color-slate);
}
.works-slider {
  position: relative;
}
.works-slider__track-wrap {
  overflow: hidden;
  border-radius: var(--radius-card);
}
.works-slider__track {
  display: flex;
  gap: var(--space-lg);
  /* JS で translateX を設定してスライド */
  transition: transform 0.4s ease;
  will-change: transform;
}

/* 各スライド: PC は2枚見せ（calc で gap 分引く） */
.works-slide {
  flex: 0 0 calc(50% - var(--space-lg) / 2);
  min-width: 0;
  list-style: none;
}

/* url 有のときは <a>、url 無のときは <div>・共通スタイル */
.works-slide__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  color: var(--color-ink);
  text-decoration: none;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
a.works-slide__card:hover {
  border-color: var(--color-indigo);
  box-shadow: var(--shadow-hover);
}
.works-slide__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--color-fog);
}
.works-slide__body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.works-slide__name {
  font-weight: 700;
  font-size: 1rem;
  line-height: var(--leading-heading);
}
.works-slide__type {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-depth);
  color: var(--color-depth);
  align-self: flex-start;
}

/* コントロール: prev/next ボタン + ドットインジケーター */
.works-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.works-slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-button);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.works-slider__btn:hover:not(:disabled) {
  background: var(--color-fog);
  border-color: var(--color-indigo);
}
.works-slider__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.works-slider__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.works-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
}
.works-dot[aria-current="true"] {
  background: var(--color-indigo);
  transform: scale(1.3);
}

/* --- 21. Responsive ---------------------------------------------------------------- */
@media (max-width: 1023px) {
  .highlights__grid { grid-template-columns: repeat(2, 1fr); }
  .process__list { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2)::after { display: none; }

  /* Hero: tablet 以下は1カラムにして見出しの途中折れを防ぐ */
  .hero { min-height: auto; }
  .hero__inner {
    grid-template-columns: 1fr;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .hero__heading-line { display: inline; white-space: normal; }
  .hero__visual { min-height: 150px; }
  .hero__badges { flex-direction: row; justify-content: flex-start; align-items: stretch; }

  /* Timeline: 右パネルを狭い幅に調整 */
  .timeline__layout { grid-template-columns: 1fr 320px; gap: var(--space-lg); }
}

@media (max-width: 767px) {
  .section { padding: var(--space-section-mobile) 0; }
  .section__title { font-size: 1.5rem; margin-bottom: var(--space-lg); }

  /* Header → ハンバーガー */
  .site-nav__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-button);
    cursor: pointer;
  }
  .site-nav__toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-ink);
    transition: transform var(--transition-base), opacity var(--transition-base);
  }
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) { opacity: 0; }
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-sm) var(--container-px) var(--space-md);
    box-shadow: var(--shadow-card);
  }
  .site-nav__list.is-open { display: flex; }
  .site-nav__link { min-height: 48px; }
  .site-nav__cta-item { margin-top: var(--space-sm); }
  .site-nav__cta-item .button { width: 100%; }

  /* Hero 縦積み */
  .hero__heading { font-size: 1.75rem; }
  .hero__heading br { display: none; } /* Mobile は自然折返しに任せる */
  .hero__cta-row .button { width: 100%; }

  /* 各グリッド縦積み */
  .routing__grid,
  .scope__list,
  .services__grid,
  .highlights__grid,
  .process__list { grid-template-columns: 1fr; }
  .process-step::after { display: none !important; }

  .summary-band__title { border-right: none; padding-right: 0; }
  .summary-band__inner, .summary-band__stats { gap: var(--space-lg); }
  .summary-stat__num { font-size: 2.25rem; }

  .site-footer__inner { padding: 32px var(--container-px); }

  /* Timeline Mobile: 2カラムをやめて縦積み
     右パネル（スティッキー図面）は非表示。
     代わりに各 timeline-item の .timeline-item__career-img をインライン表示。
     ※ Mobile では右パネルスライドを省略し、インライン図面を小さく表示する方針。 */
  .timeline__layout { grid-template-columns: 1fr; }
  .timeline__right { display: none; }
  .timeline-item__career-img {
    display: block;
    margin-top: var(--space-md);
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-line);
  }
  .timeline-item__career-img img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Works スライダー Mobile: 1枚表示 */
  .works-slide { flex: 0 0 100%; }
}

/* --- 22. Reduced motion（必須・例外なし） ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js-tilt { transform: none !important; }
  /* Works スライダー: transform トランジション無効化（瞬間切替） */
  .works-slider__track { transition: none !important; }
  /* Timeline キャリア図面: フェード無効化（瞬間切替） */
  .timeline__career-slide { transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}