/* =========================================================
   メタプランニング合同会社 コーポレートサイト（2案目）
   コンセプト：「一歩引くと、見えてくる。」
   白図面 × 墨 × ロゴ青。散らかった要素がスクロールとともに
   整理され、ひとつの「かたち」に収束していく体験。
   実装: 静的HTML/CSS/JS。外部ライブラリ不使用。
   ========================================================= */

/* ---------------------------------------------------------
   0. リセット
   --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
html {
  background: var(--paper);
  text-spacing-trim: trim-start;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 注意: html に overflow-x: clip を置いてはならない。スクロールの主体が
     ビューポートから html 要素に変わり、scroll イベントが window に発火しなく
     なる（バブルしないため）。横はみ出し対策は body 側の clip で完結している */
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  min-height: 100svh;
  /* hidden だと body がスクロールコンテナ化してホイールが死ぬ。clip は切り抜くだけ */
  overflow-x: clip;
}
img,
video,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
}
address {
  font-style: normal;
}

/* ---------------------------------------------------------
   1. デザイントークン（spec.md §1.1〜1.3）
   --------------------------------------------------------- */
:root {
  /* 色：背景 */
  --paper: #FDFDFB;
  --ink-bg: #141419;
  --calm-bg: #F7F8FA;

  /* 色：文字（白地上） */
  --ink: #141419;
  --ink-soft: #3A3A42;
  --ink-muted: #4A4A52;

  /* 色：文字（墨面上） */
  --paper-soft: rgba(237, 237, 234, 0.85);
  --paper-strong: #FDFDFB;
  --label-on-dark: rgba(237, 237, 234, 0.65);

  /* 色：アクセント */
  --blue: #1E4F9E;
  --blue-lift: #7DA5E8;

  /* 背景WebGL：暗色セクション(ABOUT/COMPANY)で線を明色反転する際の線色。
     構造線=--bp-ink-inv、輪郭/青線=--blue-lift を blueprint.js が使用 */
  --bp-ink-inv: #E9EDF5;

  /* 色：罫線 */
  --line-white-strong: rgba(20, 20, 25, 0.5);
  --line-white: rgba(20, 20, 25, 0.25);
  --line-white-weak: rgba(20, 20, 25, 0.15);
  --line-dark-strong: rgba(237, 237, 234, 0.3);
  --line-dark: rgba(237, 237, 234, 0.18);

  /* 色：方眼 */
  --grid-white: rgba(20, 20, 25, 0.05);
  --grid-dark: rgba(237, 237, 234, 0.045);

  /* 色：巨大欧文の輪郭線 */
  --giant-stroke-white: rgba(20, 20, 25, 0.14);
  --giant-stroke-dark: rgba(237, 237, 234, 0.2);

  /* フォント */
  --font-heading: "Zen Kaku Gothic New", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
  --font-latin: "Space Grotesk", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* サイズスケール（1440基準 → 360まで流動） */
  --fs-h1: clamp(44px, 2.75rem + 4.2vw, 104px);
  --fs-h2: clamp(30px, 1.6rem + 1.8vw, 54px);
  --fs-h3: clamp(28px, 1.5rem + 0.9vw, 40px);
  --fs-giant: clamp(96px, 4rem + 14vw, 290px);
  --fs-num: clamp(76px, 4rem + 3vw, 120px);
  --fs-lead: clamp(14.5px, 0.85rem + 0.25vw, 17.5px);

  /* 余白スケール */
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-20: 20px;
  --sp-26: 26px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-56: 56px;
  --sp-80: 80px;
  --sp-100: 100px;
  --sp-120: 120px;
  --sp-130: 130px;

  /* セクション左右パディング */
  --pad-x: var(--sp-56);

  /* イージング */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* コンテナ幅 */
  --container: 1330px;
}

@media (max-width: 760px) {
  :root {
    --pad-x: var(--sp-20);
  }
}

/* ---------------------------------------------------------
   2. ベースタイポグラフィ
   --------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-break: strict;
  word-break: auto-phrase;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 760px) {
  body {
    font-size: 14.5px;
  }
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
  color: var(--ink);
}
h1 {
  font-size: var(--fs-h1);
  line-height: 1.3;
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.5;
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.45;
}

p {
  color: var(--ink-soft);
}

.num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.latin {
  font-family: var(--font-latin);
}

/* 本文中のリンクは常時下線（a11y方針） */
.prose a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---------------------------------------------------------
   3. レイアウトユーティリティ
   --------------------------------------------------------- */
.wrap {
  width: min(var(--container), 100% - var(--pad-x) * 2);
  margin-inline: auto;
}

/* 方眼背景（白地上／墨面上） */
.bg-grid {
  background-image:
    linear-gradient(var(--grid-white) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-white) 1px, transparent 1px);
  background-size: 80px 80px;
}
.bg-grid--dark {
  background-image:
    linear-gradient(var(--grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size: 80px 80px;
}
@media (max-width: 760px) {
  .bg-grid,
  .bg-grid--dark {
    background-size: 44px 44px;
  }
}

/* スキップリンク：フォーカス時のみ表示 */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-20);
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 22px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  border-radius: 2px;
  transition: top 200ms ease-out;
}
.skip-link:focus {
  top: var(--sp-20);
}

/* フォーカス表示（a11y §5.2） */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.about :focus-visible,
.company :focus-visible {
  outline-color: var(--blue-lift);
}

/* FIG.チップ */
.fig-chip-row {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-26);
  flex-wrap: wrap;
}
.fig-chip {
  display: inline-block;
  background: var(--blue);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  padding: 4px 11px;
}
.about .fig-chip,
.company .fig-chip {
  background: var(--blue-lift);
  color: var(--ink);
}

/* 英語セクションラベル（見出しではなく<p>） */
.section-label {
  font-family: var(--font-latin);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.26em;
  color: var(--ink);
}
.about .section-label,
.company .section-label {
  color: var(--paper-strong);
}
.section-label .jp {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin-left: 0.4em;
}
.about .section-label .jp,
.company .section-label .jp {
  color: var(--label-on-dark);
}
@media (max-width: 760px) {
  .section-label {
    font-size: 11px;
    letter-spacing: 0.2em;
  }
}

/* ボタン共通（CTA文字=Zen Kaku Gothic New 900） */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.12em;
  padding: 14px 30px;
  border-radius: 2px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: opacity 200ms ease-out;
}
.btn:hover {
  opacity: 0.72;
}
.btn .glyph {
  font-family: var(--font-latin);
  font-weight: 500;
  color: var(--blue);
}
.btn--fill {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--paper);
}
.btn--fill .glyph {
  color: var(--paper);
}
.btn--fill {
  padding: 16px 34px;
}
@media (max-width: 760px) {
  .btn {
    width: 100%;
    justify-content: center;
    height: 52px;
    padding: 0 var(--sp-20);
  }
}

/* 背景WebGLのcanvas（T1: contract.md §5.1）。既定は透明・空実装で、
   is-on 付与時のみCSSフェードインする。実描画はblueprint.js側が担う */
.bp-canvas {
  position: fixed;
  inset: 0;
  /* canvasは置換要素のためinsetだけでは伸縮しない。明示が必須 */
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease-out;
}
.bp-canvas.is-on {
  opacity: 1;
}

/* ---------------------------------------------------------
   4. 進行表現の下地（no-js / js 切り替え）
   html.no-js → JS冒頭で class="js" に差し替える。
   アニメの初期隠し（opacity:0 等）は必ず .js 配下でのみ適用し、
   no-js 環境では常に完成形が表示される。
   --------------------------------------------------------- */

/* セクション共通入場（chip→見出し→本文→ボタンのスタッガー） */
.js [data-reveal-item] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms var(--ease-standard), transform 650ms var(--ease-standard);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-inview [data-reveal-item] {
  opacity: 1;
  transform: translateY(0);
}

/* 巨大欧文のフェードイン（セクション入場と同時。HEROはロード時、他はIntersectionObserverで
   祖先に is-inview が付与される。data-reveal の有無を問わない） */
.js .giant-type {
  opacity: 0;
  transition: opacity 800ms ease-out;
}
.js .is-inview .giant-type {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------
   5. 巨大欧文（装飾・aria-hidden）
   --------------------------------------------------------- */
.giant-type {
  position: absolute;
  z-index: 0;
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: var(--fs-giant);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--giant-stroke-white);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
  .giant-type {
    color: var(--grid-white);
  }
}
.giant-type--dark {
  -webkit-text-stroke-color: var(--giant-stroke-dark);
}
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
  .giant-type--dark {
    color: var(--grid-dark);
  }
}

/* ---------------------------------------------------------
   6. HEADER
   --------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line-white-weak);
}
/* PCはヘッダーを上部に固定（モバイルはドロワーが fixed のため非固定のまま）。
   body の overflow-x は clip（スクロールコンテナ化しない）なので sticky が効く */
@media (min-width: 761px) {
  .site-header {
    position: sticky;
    top: 0;
  }
  /* 固定ヘッダー分、アンカージャンプの着地位置を下げる */
  html {
    scroll-padding-top: 96px;
  }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  padding-block: var(--sp-20);
}
.brand img {
  height: 40px;
  width: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-32);
}
.nav-link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
}
.nav-link:hover {
  opacity: 0.72;
}
.nav-cta {
  font-size: 13px;
  padding: 11px 28px;
}

.menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
}
.menu-btn span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 200ms ease-out, opacity 200ms ease-out, width 200ms ease-out, background 200ms ease-out;
}
.menu-btn span:nth-child(3) {
  width: 14px;
  background: var(--blue);
}
.menu-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
  background: var(--ink);
  width: 22px;
}
.menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
  background: var(--ink);
  width: 22px;
}

@media (max-width: 760px) {
  .brand img {
    height: 30px;
  }
  .menu-btn {
    display: flex;
  }
  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 82vw);
    height: 100svh;
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--sp-32);
    padding: var(--sp-80) var(--sp-32);
    transform: translateX(100%);
    transition: transform 280ms var(--ease-standard);
    border-left: 1px solid var(--line-white-weak);
  }
  .nav-links.is-open {
    transform: translateX(0);
  }
  .nav-link {
    font-size: 20px;
  }
  .nav-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------
   7. HERO
   --------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 880px;
  overflow: hidden;
  background-position: 40px 0;
  display: flex;
  align-items: flex-start;
}
@media (max-width: 760px) {
  .hero {
    min-height: 640px;
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
  /* container-type のサイズ封じ込め下では自動幅（flexの内容依存）が潰れるため明示。
     見た目は従来と同じ（子は左寄せブロックのみ） */
  width: 100%;
  max-width: 900px;
  padding: 150px 0 0 var(--sp-56);
  /* h1 のフォントサイズを実効幅（cqw）に連動させるための基準コンテナ */
  container-type: inline-size;
}
.hero h1 {
  /* 最長フレーズ「かたちにする。」が必ず1行に収まるサイズを保つ
     （係数はフォントロード後の実測で決定。デスクトップでは fs-h1 が支配） */
  font-size: min(var(--fs-h1), 13.5cqw);
}
@media (max-width: 760px) {
  .hero-inner {
    padding: 76px var(--sp-20) 0;
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-latin);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.26em;
  margin-bottom: var(--sp-40);
}
.hero-eyebrow .jp {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}
@media (max-width: 760px) {
  .hero-eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.2em;
    margin-bottom: var(--sp-20);
    display: flex;
  }
}

.hero h1 {
  margin: 0;
}
.hero h1 .accent {
  color: var(--blue);
}

.hero-lead {
  margin-top: 48px;
  font-size: var(--fs-lead);
  line-height: 1.95;
  color: var(--ink-soft);
  max-width: 33em;
}
@media (max-width: 760px) {
  .hero-lead {
    margin-top: var(--sp-26);
  }
  .hero-lead .mobile-break {
    display: none;
  }
}

.hero-scroll {
  margin-top: 64px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ink);
}
.hero-scroll .bar {
  width: 44px;
  border-top: 1.5px solid var(--blue);
  display: inline-block;
}
@media (max-width: 760px) {
  .hero-scroll {
    margin-top: var(--sp-40);
  }
  .hero-scroll .bar {
    width: 32px;
  }
  .hero-scroll .desktop-only {
    display: none;
  }
}
.hero-scroll .mobile-only {
  display: none;
}
@media (max-width: 760px) {
  .hero-scroll .mobile-only {
    display: inline;
  }
}

/* --- HERO 装飾（散らばり→収束）：すべて aria-hidden --- */
.hero-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-giant {
  left: -30px;
  bottom: -56px;
}
@media (max-width: 760px) {
  .hero-giant {
    left: -10px;
    bottom: -24px;
  }
}

/* 散在菱形 A〜E：no-js/reduced-motionでは表示しない（情報を持たない演出のため） */
.hero-scatter {
  display: none;
}
.js .hero-scatter {
  display: block;
}

.hero-diamond {
  position: absolute;
  box-sizing: border-box;
}
.hero-diamond--a { top: 100px; right: 430px; width: 38px; height: 38px; border: 1px solid rgba(20, 20, 25, 0.55); transform: rotate(52deg); }
.hero-diamond--b { top: 220px; right: 190px; width: 28px; height: 28px; border: 1px solid rgba(20, 20, 25, 0.4); transform: rotate(28deg); }
.hero-diamond--c { top: 340px; right: 500px; width: 20px; height: 20px; border: 1px solid rgba(20, 20, 25, 0.32); transform: rotate(64deg); }
.hero-diamond--d { top: 150px; right: 300px; width: 15px; height: 15px; background: var(--blue); transform: rotate(45deg); }
.hero-diamond--e { top: 420px; right: 250px; width: 24px; height: 24px; border: 1px dashed rgba(30, 79, 158, 0.55); transform: rotate(38deg); }

.js .hero-diamond {
  transition: transform 900ms var(--ease-out-quint), opacity 300ms ease-out;
}
/* 収束後の位置（2×2グリッドの4セル＋中心へ） */
.hero.is-forming .hero-diamond--a { transform: translate(115px, 435px) rotate(45deg); }
.hero.is-forming .hero-diamond--b { transform: translate(-25px, 315px) rotate(45deg); }
.hero.is-forming .hero-diamond--c { transform: translate(185px, 295px) rotate(45deg); }
.hero.is-forming .hero-diamond--d { transform: translate(85px, 485px) rotate(45deg); }
.hero.is-forming .hero-diamond--e { transform: translate(-15px, 165px) rotate(45deg) scale(0.3); }
.hero.is-grid .hero-diamond {
  opacity: 0;
}

@media (max-width: 760px) {
  .hero-diamond--a { top: 40px; right: 40px; width: 8px; height: 8px; background: var(--blue); border: 0; transform: rotate(45deg); }
  .hero-diamond--b { top: 66px; right: 96px; width: 18px; height: 18px; }
  .hero-diamond--c { top: 130px; right: 36px; width: 12px; height: 12px; }
  .hero-diamond--d,
  .hero-diamond--e { display: none; }
  .hero.is-forming .hero-diamond--a { transform: translate(32px, 350px) rotate(45deg); }
  .hero.is-forming .hero-diamond--b { transform: translate(94px, 380px) rotate(45deg); }
  .hero.is-forming .hero-diamond--c { transform: translate(30px, 300px) rotate(45deg); }
}

/* 収束先：2×2 菱形グリッド（SVG・stroke-dashoffsetで描き上げ） */
.hero-grid {
  position: absolute;
  top: 490px;
  right: 170px;
  width: 190px;
  height: 190px;
  transform: rotate(45deg);
}
@media (max-width: 760px) {
  .hero-grid {
    /* リード文（〜約490px）と重ならない高さ。右端に少し食い込ませて余白を稼ぐ */
    top: 450px;
    right: -8px;
    width: 72px;
    height: 72px;
  }
}
.hero-grid svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero-grid rect.cell {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.hero-grid rect.cell--fill {
  stroke: var(--blue);
  fill: var(--blue);
}
.hero-grid rect.dot {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.hero-grid rect.dot--fill {
  stroke: var(--paper);
}
/* 周長を実寸で指定して描き上げる（pathLengthはCSSプロパティではないため使わない。
   cell=89×89の周長=356、dot=8×8の周長=32を直接指定） */
.js .hero-grid rect.cell {
  stroke-dasharray: 356;
  stroke-dashoffset: 356;
  transition: stroke-dashoffset 700ms ease-out;
}
.js .hero-grid rect.dot {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  transition: stroke-dashoffset 700ms ease-out;
}
.js .hero-grid rect.cell--fill {
  fill-opacity: 0;
  transition: stroke-dashoffset 700ms ease-out, fill-opacity 700ms ease-out;
}
.js .hero-grid {
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.hero.is-grid .hero-grid {
  opacity: 1;
}
.hero.is-grid .hero-grid rect.cell,
.hero.is-grid .hero-grid rect.dot {
  stroke-dashoffset: 0;
}
.hero.is-grid .hero-grid rect.cell--fill {
  fill-opacity: 1;
}

/* 寸法線＋FIG.0注記 */
.hero-dim {
  position: absolute;
  top: 756px;
  right: 120px;
  width: 290px;
}
.hero-dim-line {
  position: relative;
  border-top: 1px solid var(--line-white-strong);
  transform: scaleX(0);
  transform-origin: right;
}
.hero-dim-line::before,
.hero-dim-line::after {
  content: "";
  position: absolute;
  top: -6px;
  height: 12px;
  border-left: 1px solid var(--line-white-strong);
}
.hero-dim-line::before { left: 0; }
.hero-dim-line::after { right: 0; }
.js .hero-dim-line {
  transition: transform 400ms ease-out;
}
.hero.is-dimensioned .hero-dim-line {
  transform: scaleX(1);
}
.hero-fig-note {
  position: absolute;
  top: 10px;
  right: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--line-white-strong);
  white-space: nowrap;
  transform: translateY(6px);
}
.js .hero-fig-note {
  opacity: 0;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.hero.is-dimensioned .hero-fig-note {
  opacity: 1;
  transform: translateY(0);
}
.hero-fig-note .mobile-only { display: none; }
@media (max-width: 760px) {
  .hero-dim { top: 566px; right: 20px; width: auto; }
  .hero-dim-line { display: none; }
  .hero-fig-note { position: static; font-size: 9px; }
  .hero-fig-note .desktop-only { display: none; }
  .hero-fig-note .mobile-only { display: inline; }
}

/* HERO テキストのロード時フェード（0ms / 120ms delay, 600ms） */
.js .hero-inner > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-standard), transform 600ms var(--ease-standard);
}
.js .hero-inner > .hero-lead { transition-delay: 120ms; }
.js .hero-inner > .hero-scroll { transition-delay: 200ms; }
.hero.is-ready .hero-inner > * {
  opacity: 1;
  transform: translateY(0);
}

/* prefers-reduced-motion: HEROは収束後の完成形を静的表示 */
@media (prefers-reduced-motion: reduce) {
  .hero-scatter { display: none !important; }
  .hero-grid { opacity: 1 !important; }
  .hero-grid rect.cell,
  .hero-grid rect.dot { stroke-dashoffset: 0 !important; }
  .hero-grid rect.cell--fill { fill-opacity: 1 !important; }
  .hero-dim-line { transform: scaleX(1) !important; }
  .hero-fig-note { opacity: 1 !important; transform: translateY(0) !important; }
  .hero-inner > * { opacity: 1 !important; transform: translateY(0) !important; }
}

/* ---------------------------------------------------------
   8. ABOUT（墨面）
   --------------------------------------------------------- */
.about {
  position: relative;
  overflow: hidden;
  /* 墨面はcanvasの後ろ(z:-2)へ敷き、前面の背景WebGL線を隠さない。
     線はこの帯だけ明色へ反転する（blueprint.js が画素単位で処理） */
  background: transparent;
  color: var(--paper-soft);
  padding-block: var(--sp-120);
}
@media (max-width: 760px) {
  .about {
    padding-block: var(--sp-80);
  }
}
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink-bg);
  pointer-events: none;
}
.about-giant {
  right: -40px;
  top: -40px;
}

.about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  grid-template-areas: "head body" "diagram body";
  gap: var(--sp-80);
  align-items: start;
  max-width: 1260px;
  margin-inline: auto;
}
.about-head {
  grid-area: head;
  /* 見出しのフォントサイズを列幅（cqw）に連動させるための基準コンテナ */
  container-type: inline-size;
}
.about-diagram { grid-area: diagram; }
.about-body { grid-area: body; }
@media (max-width: 1000px) {
  .about-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "body" "diagram";
    gap: var(--sp-56);
  }
}

.about h2 {
  color: var(--paper-strong);
  /* 列幅に連動して縮小し、最長フレーズ「「メタ」は、一歩引いて」(実測11.22em)が
     必ず1行に収まるサイズを保つ（コンテナクエリ非対応環境では既定のfs-h2） */
  font-size: min(var(--fs-h2), 8.6cqw);
}

/* 見出しのフレーズ単位折返し: 塊の内側では改行させない
   （hero h1 / about・services h2 で使用。意図しない語中改行の根絶） */
h1 .ph,
h2 .ph {
  display: inline-block;
}

/* ロゴ矢印の再演図（モバイルでは本文の後＝grid-template-areasで並べ替え） */
.about-diagram {
  margin-top: var(--sp-56);
  position: relative;
  width: 150px;
  height: 150px;
}
@media (max-width: 1000px) {
  .about-diagram {
    width: 120px;
    height: 120px;
    margin-top: 0;
  }
}
.about-diagram .diamond-outline {
  position: absolute;
  inset: 24px;
  border: 1px solid var(--line-dark-strong);
  transform: rotate(45deg);
}
.about-diagram .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--blue-lift);
  transform: translate(-50%, -50%) rotate(45deg);
}
.about-diagram .arrow {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--font-latin);
  font-size: 20px;
  color: var(--blue-lift);
}
.about-diagram .note {
  position: absolute;
  bottom: -26px;
  left: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--label-on-dark);
  white-space: nowrap;
}

.about-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--paper-soft);
}
.about-body p + p {
  margin-top: 1.5em;
}
.about-closing {
  margin-top: 2.6em !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.95;
  color: var(--paper-strong) !important;
}
.about-closing .mark {
  border-bottom: 3px solid var(--blue-lift);
  padding-bottom: 2px;
}
@media (max-width: 760px) {
  .about-closing {
    font-size: 19px;
  }
}

/* ---------------------------------------------------------
   9. SERVICES intro
   --------------------------------------------------------- */
.services-intro {
  position: relative;
  overflow: hidden;
  padding-top: var(--sp-130);
}
@media (max-width: 760px) {
  .services-intro {
    padding-top: var(--sp-80);
  }
}
.services-giant {
  left: -20px;
  top: 30px;
}

.services-intro-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-56);
  align-items: end;
  max-width: 1300px;
  margin-inline: auto;
}
.services-intro-head {
  /* 見出しのフォントサイズを列幅（cqw）に連動させるための基準コンテナ */
  container-type: inline-size;
}
.services-intro-head h2 {
  /* 最長フレーズ「想いをかたちにします。」(実測11.22em)が必ず1行に収まるサイズを保つ */
  font-size: min(var(--fs-h2), 8.6cqw);
}
@media (max-width: 1000px) {
  .services-intro-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.services-index {
  display: grid;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  min-width: 360px;
}
@media (max-width: 1000px) {
  .services-index {
    min-width: 0;
  }
}
.services-index li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-32);
  padding: 13px 0;
  border-bottom: 1px solid var(--line-white);
}
.services-index .no {
  color: var(--blue);
}
.services-index .name {
  font-family: var(--font-body);
  color: var(--ink);
  text-align: right;
}

/* ---------------------------------------------------------
   10. SERVICE 共通レイアウト（01 / 02 / 04）
   --------------------------------------------------------- */
.service {
  position: relative;
  border-top: 1px solid var(--line-white-weak);
  padding-block: var(--sp-100) 110px;
  padding-inline: var(--pad-x);
}
@media (max-width: 760px) {
  .service {
    padding-block: var(--sp-56) var(--sp-80);
  }
}

.service-grid {
  display: grid;
  /* minmax(0,1fr): 画像の固有幅で1frが押し広げられるグリッド・ブローアウトを防ぐ */
  grid-template-columns: 400px minmax(0, 1fr);
  gap: var(--sp-80);
  max-width: var(--container);
  margin-inline: auto;
}
@media (max-width: 1000px) {
  .service-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-56);
  }
}

.service-num {
  width: var(--fs-num);
  height: auto;
  overflow: visible;
  display: block;
}
.service-num text {
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 112px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.js .service-num text {
  stroke-dasharray: var(--dash, 900px);
  stroke-dashoffset: var(--dash, 900px);
  transition: stroke-dashoffset 1100ms ease-in-out;
}
.service-num.is-drawn text {
  stroke-dashoffset: 0;
}

.service-label {
  margin-top: var(--sp-20);
  font-family: var(--font-latin);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--blue);
}
.js .service-label {
  opacity: 0;
  transition: opacity 250ms ease-out;
  transition-delay: 900ms;
}
.service-num.is-drawn + .service-label {
  opacity: 1;
}

.service h3 {
  margin-top: 14px;
}
.service-copy {
  margin-top: var(--sp-32);
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 34em;
}
.service .btn {
  margin-top: 36px;
}

@media (prefers-reduced-motion: reduce) {
  .service-num text { stroke-dashoffset: 0 !important; }
  .service-label { opacity: 1 !important; }
}

/* --- 実績の独立入場（works-stage） ---
   セクション本文の入場とは切り離し、main.js の専用 IntersectionObserver
   （rootMargin 下端 -30% = 画面に入って少しスクロールしてから）で発火する。
   フェード時間・スタッガー刻みは本文の2倍（650→1300ms / 90→180ms）。
   注意: 下の「隠し」は §4 の解除ルール（.js [data-reveal].is-inview [data-reveal-item]）
   と同詳細度のため、ソース順で後に置くことで勝たせている。 --- */
.js [data-reveal] .works-stage [data-reveal-item] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1300ms var(--ease-standard), transform 1300ms var(--ease-standard);
  transition-delay: calc(var(--i, 0) * 180ms);
}
.js [data-reveal] .works-stage.is-inview [data-reveal-item] {
  opacity: 1;
  transform: translateY(0);
}

/* --- 実績共通：枠線1px標準、object-fit:cover不使用（実素材の比率をそのまま等倍fit） --- */
.works figure {
  margin: 0;
  border: 1px solid var(--line-white);
}
.works img {
  width: 100%;
  height: 100%;
}

/* 01 RAISE：16:9 ×3 ＋ 縦長1600:2263 ×3 */
.works--raise {
  display: grid;
  gap: var(--sp-20);
}
.works--raise .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-20);
}
.works--raise .row--wide figure { aspect-ratio: 16 / 9; }
.works--raise .row--tall figure { aspect-ratio: 1600 / 2263; }
.works-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--line-white-strong);
  text-align: right;
}
@media (max-width: 760px) {
  .works--raise .row--wide {
    /* none にして auto-columns を全列に効かせる（1frだと1枚目だけ幅が変わる） */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .works--raise .row--wide figure {
    scroll-snap-align: start;
  }
}

/* 02 動画：16:9 ×5（3+2） */
.works--movie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-20);
}
.works--movie figure {
  border: 0;
}
.works--movie .video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-white);
  overflow: hidden;
  background: var(--ink-bg);
}
.works--movie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works--movie figcaption {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.works--movie .note-cell {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .works--movie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .works--movie {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .works--movie figure {
    scroll-snap-align: start;
  }
  .works--movie .note-cell {
    display: none;
  }
}

/* 04 企画制作：Webフルページ×3（縦長・自動スクロール） ＋ 冊子（幅170px固定）×3 */
.works--editorial {
  display: grid;
  gap: var(--sp-20);
}
.works--editorial .row--web {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-20);
}

/* Web実績: フルページ画像を縦長フレームに入れ、上端→下端をゆっくり往復させる。
   移動量は画像実寸から算出した明示値を各 img の --shift（cqw 単位）で渡す。
   計算式: -(画像高/画像幅 − 3/4枠の4/3) × 100cqw。
   例) nagakute 800×6754 → -(844.25 − 133.33) = -711cqw
   （transform 内の % はブラウザ間で解決が揺れ逆走の原因になったため使用しない。
    cq 単位非対応ブラウザでは keyframes が無効化され先頭静止にフォールバック） */
.web-scroll-frame {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  container-type: inline-size;
  position: relative;
}
.web-scroll-frame img {
  width: 100%;
  height: auto;
  animation: web-page-scroll var(--sd, 40s) linear 1.4s infinite alternate;
}
/* 1画面ものはスクロール余地が無いため中央クロップの静止表示 */
.web-scroll--fit .web-scroll-frame img {
  width: auto;
  height: 100%;
  margin-inline: auto;
  animation: none;
}
@keyframes web-page-scroll {
  0%, 6% { transform: translateY(0); }
  94%, 100% { transform: translateY(var(--shift, 0px)); }
}

/* 社内報: 掲載元が判別できないよう黒半透明で覆い「社内報」とだけ示す */
.naiho-mask {
  position: relative;
}
.naiho-mask::after {
  content: "社内報";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* 誌名・写真が判別できない濃度＋ぼかし */
  background: rgba(20, 20, 25, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--paper);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.22em;
  pointer-events: none;
}
.works--editorial .row--booklet {
  display: flex;
  gap: var(--sp-20);
  align-items: flex-end;
  flex-wrap: wrap;
}
.works--editorial .row--booklet figure {
  width: 160px;
  flex: none;
}
/* 社内報の見開き（400:283）は表紙2点（200:283・幅160px）と高さを揃えるため幅320px
   （160+320+160+ガター40=680 ≦ 1280px幅の実績カラム。折返し防止） */
.works--editorial .row--booklet figure.is-wide {
  width: 320px;
}
.works--editorial .row--booklet .works-note {
  flex: 1 1 auto;
  align-self: flex-end;
}
@media (max-width: 760px) {
  /* 縦長フレーム3本は縦積みだと長すぎるため横スワイプで見せる */
  .works--editorial .row--web {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 70%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .works--editorial .row--web figure {
    scroll-snap-align: start;
  }
  .works--editorial .row--booklet figure,
  .works--editorial .row--booklet figure.is-wide {
    width: calc((100% - var(--sp-20) * 2) / 3);
    max-width: 100px;
  }
  .naiho-mask::after {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------
   11. 03 CARE（淡青白・方眼なし・中央組み）
   --------------------------------------------------------- */
.care {
  position: relative;
  border-top: 1px solid var(--line-white-weak);
  /* 淡青白は canvas の後ろ(z:-2)へ敷き、背景WebGL(C3成長)を隠さない。
     振付側は care 区間で alpha 0.5 に減光済み＝静かに透ける前提の設計 */
  background: transparent;
  padding-block: 160px 170px;
  padding-inline: var(--pad-x);
  text-align: center;
}
.care::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--calm-bg);
  pointer-events: none;
}
@media (max-width: 760px) {
  .care {
    padding-block: 86px 106px;
  }
}
.care-inner {
  max-width: 820px;
  margin-inline: auto;
}
.care .service-num {
  display: inline-block;
}
.care .service-label {
  display: block;
}
.care h3 {
  margin-top: 14px;
}

.care-tag {
  margin-top: var(--sp-26);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--blue);
  color: var(--blue);
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.care-tag .dot {
  width: 7px;
  height: 7px;
  background: var(--blue);
  transform: rotate(45deg);
  display: inline-block;
}

.care-copy {
  margin: 40px auto 0;
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
  max-width: 36em;
  text-align: left;
}

/* 取り組み事例: イメージ動画(16:9) + プロトタイプ画面(4:3) を高さ揃えで横並び */
.care-works {
  --care-h: clamp(190px, 20vw, 250px);
  margin: var(--sp-56) auto 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-20);
}
.care-works figure {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.care-works .care-video-frame {
  height: var(--care-h);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-white);
  overflow: hidden;
  background: var(--ink-bg);
}
.care-works video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.care-works img {
  height: var(--care-h);
  width: auto;
  border: 1px solid var(--line-white);
  display: block;
}
.care-works figcaption {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-align: left;
}
@media (max-width: 760px) {
  .care-works {
    flex-direction: column;
    align-items: stretch;
  }
  .care-works .care-video-frame {
    height: auto;
    width: 100%;
  }
  .care-works img {
    height: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
}

/* 誇張しない線画ダイアグラム */
.care-diagram {
  margin: 60px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.care-diagram .node {
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--ink);
  transform: rotate(45deg);
  display: inline-block;
  flex: none;
}
.care-diagram .node--fill {
  width: 13px;
  height: 13px;
  background: var(--blue);
  border: 0;
}
.care-diagram .link {
  width: 90px;
  border-top: 1px dashed var(--line-white-strong);
  display: inline-block;
  flex: none;
}
.care-diagram-note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(20, 20, 25, 0.45);
}

.care .btn--fill {
  margin-top: var(--sp-40);
}
@media (max-width: 760px) {
  .care .btn--fill {
    width: 100%;
  }
}

/* ---------------------------------------------------------
   12. COMPANY（墨面）
   --------------------------------------------------------- */
.company {
  position: relative;
  overflow: hidden;
  /* 墨面はcanvasの後ろ(z:-2)へ敷く（.about と同方針） */
  background: transparent;
  color: var(--paper-soft);
  padding-block: var(--sp-120);
}
@media (max-width: 760px) {
  .company {
    padding-block: var(--sp-80);
  }
}
.company::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink-bg);
  pointer-events: none;
}
.company-giant {
  right: -50px;
  bottom: -46px;
}

.company-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin-inline: auto;
}
.company h2 {
  color: var(--paper-strong);
}

.company-table {
  display: grid;
  grid-template-columns: 220px 1fr;
  /* 背景WebGLの線と罫線が紛れないよう、表は半透明の濃地に載せ罫線も強める */
  background: rgba(26, 26, 33, 0.82);
  padding-inline: var(--sp-26);
  border-top: 2px solid rgba(237, 237, 234, 0.5);
}
.company-table dt,
.company-table dd {
  padding: var(--sp-26) 0;
  border-bottom: 2px solid rgba(237, 237, 234, 0.26);
}
.company-table dt {
  font-size: 13.5px;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--label-on-dark);
}
.company-table dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--paper-soft);
}
.company-table .company-name-latin {
  font-family: var(--font-latin);
  font-weight: 500;
  color: var(--label-on-dark);
  margin-left: 12px;
}
@media (max-width: 1000px) {
  .company-table {
    grid-template-columns: 1fr;
  }
  .company-table dt {
    padding-bottom: 8px;
    border-bottom: 0;
  }
  .company-table dd {
    padding-top: 0;
  }
}

/* ---------------------------------------------------------
   12.5 幕間（全体図）
   背景WebGLの俯瞰ロゴがここで完成しきる1画面。DOMは最小で、
   紙面の中央は canvas に譲る（タグラインは下端寄せ）。
   モバイルは背景WebGLが無いため非表示（v1方針）。
   --------------------------------------------------------- */
.interlude {
  position: relative;
  min-height: 92vh;  /* svh非対応ブラウザ向けフォールバック */
  min-height: 92svh;
  display: flex;
}
.interlude-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-block: var(--sp-56) 9vh;
}
.interlude-tagline {
  margin-top: auto;
  text-align: center;
}
/* 契約改訂13でモバイルも背景WebGLが有効になったため、幕間もモバイル表示する
   （非表示にすると T6 のアンカー #overview の offsetTop が 0 になり振付が壊れる） */
@media (max-width: 760px) {
  .interlude {
    min-height: 78vh;
    min-height: 78svh;
  }
}

/* ---------------------------------------------------------
   13. CONTACT
   --------------------------------------------------------- */
.contact {
  position: relative;
  overflow: hidden;
  padding-top: var(--sp-130);
}
@media (max-width: 760px) {
  .contact {
    padding-top: var(--sp-80);
  }
}
.contact-giant {
  left: -20px;
  top: 20px;
}
.contact-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.contact h2 {
  margin-top: 0;
}
.contact-lead {
  margin: var(--sp-32) auto 0;
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-soft);
  max-width: 34em;
}

/* Zoho フォーム枠：外枠1.5px実線 + 内側padding8px */
.contact-form-frame {
  margin: 64px 0 100px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: var(--sp-8);
  text-align: left;
}
@media (max-width: 760px) {
  .contact-form-frame {
    margin: var(--sp-40) 0 var(--sp-56);
  }
}
.contact-form-frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* ---------------------------------------------------------
   13.5 実績動画モーダル
   data-full を持つ動画フレームのクリックで <dialog> を開き、
   音声つきフル版を再生する（制御は main.js）。
   --------------------------------------------------------- */
.video-frame[data-full],
.care-video-frame[data-full] {
  cursor: pointer;
}
.care-works .care-video-frame {
  position: relative;
}

/* JSが動画フレーム内に生成する「音声つきで再生」ピル（キーボード操作点も兼ねる） */
.video-modal-hint {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: rgba(20, 20, 25, 0.78);
  color: var(--paper);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  transition: background 200ms ease-out;
}
.video-modal-hint span {
  color: var(--blue-lift);
  font-size: 9px;
}
.video-frame:hover .video-modal-hint,
.care-video-frame:hover .video-modal-hint,
.video-modal-hint:focus-visible {
  background: var(--blue);
}

/* モーダル本体: トップレイヤーで天地左右センターに固定表示。
   注意: position を relative/static にすると top layer 内でビューポート
   左上原点に落ち、フォーカス移動でページ先頭へスクロールしてしまう。
   必ず fixed + inset:0 + margin:auto（UA既定と同型）を明示する */
.video-modal {
  border: 0;
  padding: 48px 0 0;
  background: transparent;
  width: min(1100px, 92vw);
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: calc(100svh - 24px);
}
/* モーダル表示中は背景ページのスクロールを止める */
body:has(.video-modal[open]) {
  overflow: hidden;
}
.video-modal::backdrop {
  background: rgba(10, 10, 14, 0.84);
}
.video-modal video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line-dark);
}
.video-modal-caption {
  margin-top: 12px;
  color: var(--paper-soft);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.video-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--paper);
  font-size: 24px;
  line-height: 1;
  border: 1px solid var(--line-dark);
  transition: border-color 200ms ease-out, color 200ms ease-out;
}
.video-modal-close:hover {
  color: var(--blue-lift);
  border-color: var(--blue-lift);
}
@media (max-width: 760px) {
  .video-modal {
    width: 94vw;
  }
  .video-modal-hint {
    font-size: 10px;
    padding: 5px 10px;
  }
}

/* ---------------------------------------------------------
   13.8 フローティング「ページ先頭へ」
   1画面分スクロールで右下に出現し、フッター表示中は隠れる
   （制御は main.js の initToTop。no-js ではフッター内リンクが導線）
   --------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 250ms ease-out, transform 250ms ease-out, border-color 200ms ease-out;
}
.to-top .glyph {
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 18px;
  color: var(--blue);
}
.to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.to-top:hover {
  border-color: var(--blue);
}
@media (max-width: 760px) {
  .to-top {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}

/* ---------------------------------------------------------
   14. FOOTER
   --------------------------------------------------------- */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--line-white-weak);
}
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-20);
  padding-block: 34px;
}
.site-footer img {
  height: 30px;
  width: auto;
}
.footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}
.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.footer-top .glyph {
  color: var(--blue);
  font-family: var(--font-latin);
}
@media (max-width: 620px) {
  .site-footer .wrap {
    flex-direction: column;
    text-align: center;
    padding-block: var(--sp-32);
  }
}