/* =====================================================================
   noir2.css — トップページ（Noir v2 ハイブリッド）
   ①FOIL のヒーロー（WebGL の箔カード）＋③STAGE のスポットライトと Service の照明
   トークンは docs/design-themes-noir-v2.md H-3。書体は Josefin Sans＋Zen Kaku Gothic New。
   原則: JS / GSAP が来なくても完成レイアウトが見える（初期状態で隠さない）。動きは上乗せだけ。
   .n2-live … GSAP が動き、視差を減らす設定でないとき noir2.js が付ける
   /recruit/ は site.css のまま（このファイルはトップ専用）
   ===================================================================== */
:root {
  --ink: #0B0B0D; --cream: #EDEAE3; --muted: #8B8781; --gold: #C6A15B;
  --line: rgba(237,234,227,.14); --surface: rgba(237,234,227,.03);
  --radius: 3px; --ease: cubic-bezier(.22,.8,.26,.99);
  --ink-2: #131316;
  --gold-hi: #F3E6C4; /* 箔の光のみ */
  --gold-lo: #6E5526;
  --muted-2: #A39F98;
  --light: rgba(198,161,91,.06);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --type-tag: clamp(56px, 10.5vw, 176px);
  --type-stage: clamp(64px, 13vw, 220px);
  --type-label: 11px; --track-label: .28em;

  --f-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-en: "Josefin Sans", sans-serif;
  --pad: clamp(16px, 3.4vw, 48px);
  --navh: 72px;
  --card-h: min(60vh, 58vw);
  --card-h: min(60svh, 58vw); /* 2026-10-01 r4 64→60: 1行目の下から始めても床の影が画面に残る高さ */
  --fs-tag: min(var(--type-tag), 17vh);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); overflow-x: clip; scroll-behavior: smooth; color-scheme: dark; scrollbar-color: #3b3326 var(--ink); }

/* ---------------- 2026-10-01 和文組版: 文節で折る・最後の行を1字にしない・見出しは行長を揃える ----------------
   auto-phrase は lang="ja" で効く（Chrome 119+）。効かないブラウザでは従来どおり */
.sec-title, .svc-title, .ann-title, .mc h3, .ann-mini h4, .thanks h3 { text-wrap: balance; word-break: auto-phrase; font-feature-settings: "palt"; letter-spacing: .04em; }
/* 本文は行頭を揃えたまま（文節折りは行末が荒れるので見出し・箇条だけ）、最終行の1字残りだけ防ぐ */
.hero-sub, .svc-desc, .sec-desc, .ann p, .mc p, .story-body, .thanks p, .company-tbl td { text-wrap: pretty; line-break: strict; }
.ann-feats li, .ft-tagline, .f-lab, .company-tbl td, .story-quote, .hero-sub, .svc-desc, .sec-desc { word-break: auto-phrase; text-wrap: pretty; } /* 1〜3 行の短文も文節で（「採／用」の泣き別れ） */
body {
  background: var(--ink); color: var(--cream); font-family: var(--f-jp); font-size: 16px; line-height: 1.95;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(198,161,91,.28); color: var(--cream); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ---------------- 背景: 環境光＋周辺減光＋8fps グレイン ---------------- */
.amb { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.amb-light {
  position: absolute; left: 50%; top: 40%; width: 110vmax; height: 80vmax; margin: -40vmax 0 0 -55vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(198,161,91,.065), rgba(198,161,91,.02) 55%, transparent);
}
.amb-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55)); }
.amb-grain {
  position: absolute; inset: -60px; opacity: .034;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(8) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 12.5% { transform: translate(-23px,11px); } 25% { transform: translate(17px,-29px); }
  37.5% { transform: translate(-41px,-7px); } 50% { transform: translate(31px,37px); } 62.5% { transform: translate(-9px,43px); }
  75% { transform: translate(47px,-17px); } 87.5% { transform: translate(-37px,23px); } 100% { transform: translate(0,0); }
}

/* ---------------- NAV（現在地は金の点。ガラスのぼかしは使わない） ---------------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 22px 0; border-bottom: 1px solid transparent; transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s; }
.nav.is-scrolled { background: rgba(11,11,13,.92); padding: 12px 0; border-bottom-color: var(--line); }
.nav-inner { max-width: 1600px; margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 12px; font-family: var(--f-en); font-weight: 600; letter-spacing: .22em; font-size: 13px; text-transform: uppercase; }
.nav-logo img { width: 24px; height: 24px; border-radius: 2px; }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-link { position: relative; font-family: var(--f-en); font-size: var(--type-label); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); transition: color .3s; }
.nav-link:hover, .nav-link.is-current { color: var(--cream); }
.nav-link::before {
  content: ""; position: absolute; left: 50%; top: -9px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--gold); transform: scale(0); transition: transform .35s var(--ease-out);
}
.nav-link.is-current::before { transform: scale(1); }
.nav-cta { color: var(--gold); border: 1px solid rgba(198,161,91,.55); border-radius: var(--radius); padding: 8px 18px; transition: color .3s, border-color .3s, background-color .4s var(--ease), translate .45s var(--ease-out); }
.nav-cta:hover { color: var(--gold-hi); border-color: var(--gold); }
.nav-cta::before { display: none; }
/* 2026-10-01 Contact にいる間は CTA 自体が灯る（金の点の代わり） */
.nav-cta.is-current { color: var(--ink); background-color: var(--gold); border-color: var(--gold); }
/* スクロール進捗: ナビの下端を金の細線が満ちる（scroll-driven。未対応のブラウザでは出ない） */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(198,161,91,.1), var(--gold)); transform-origin: 0 50%; transform: scaleX(0); transition: opacity .4s;
}
@supports (animation-timeline: scroll()) {
  .nav.is-scrolled::after { opacity: .75; animation: nav-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes nav-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-right: -8px; }
.hamburger span { display: block; width: 22px; height: 1px; background: var(--cream); margin: 6px 0; transition: transform .3s var(--ease), opacity .3s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------- 舞台: カードは sticky の層（ヒーロー＋Service の間） ---------------- */
.theater { position: relative; overflow-x: clip; }
/* 舞台の層は theater 全体に敷き、カードはその中で sticky（theater の終わりで一緒に上へ抜ける） */
.stage-wrap { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.stage { position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; }
.n2-live .stage { position: sticky; }
.rig { position: absolute; left: 50%; top: 52%; height: var(--card-h); aspect-ratio: 63 / 88; transform: translate(-50%, -50%); }
/* 2026-10-01 r4 PC: カードの上端は1行目の下端＋2vh（1行目の全文字を読ませる。スマホと同じ「1行目はカードの上」）。
   2行目・3行目はカードの手前を横切るまま。Service へ移るときは noir2.js が画面中央へ戻す */
@media (min-width: 760px) {
  :root { --ctop-d: calc(13vh + var(--fs-tag) * 1.12 + 2vh); }
  .rig { top: calc(var(--ctop-d) + var(--card-h) / 2); }
  /* 2行目はカードの手前のまま、ロゴ（絵の窓）を避けて絵の下端〜「特性」行を横切る（スマホと同じ考え方） */
  .tagline .tl-2 { top: calc(var(--ctop-d) + var(--card-h) * var(--l2k, .5) - var(--fs-tag) * .56); }
  .hero .hero-lead { bottom: 6vh; width: min(410px, 32vw); }
}
.floor { position: absolute; left: 50%; top: 100%; width: 190%; height: 30%; transform: translate(-50%, -52%); }
.floor-light, .floor-shadow { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.floor-light { width: 100%; height: 100%; margin: -15% 0 0 -50%; background: radial-gradient(closest-side, rgba(198,161,91,.10), rgba(198,161,91,.035) 55%, transparent); }
.floor-shadow {
  width: 56%; height: 34%; margin: -8% 0 0 -28%;
  background: radial-gradient(closest-side, rgba(0,0,0,.9), rgba(0,0,0,.55) 45%, transparent);
  transform: scaleX(var(--fsx, 1)); opacity: var(--fop, 1);
}

/* ---------------- ヒーローのカード（中身は cqw で比例） ---------------- */
.tcg-scene { position: absolute; inset: 0; perspective: 1400px; }
.tcg-card { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); user-select: none; -webkit-user-select: none; }
.card-body {
  position: absolute; inset: 0; transform-style: preserve-3d;
  border-radius: 4.6%/3.3%; background: #111114; border: 1px solid rgba(198,161,91,.45); box-shadow: 0 50px 90px rgba(0,0,0,.72);
}
.foil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; }
.tcg-inner {
  position: absolute; inset: 2.4% 3.33%; border-radius: 3.4%/2.4%; border: 1px solid rgba(198,161,91,.22);
  padding: 5.8% 5.8% 4.3%; display: flex; flex-direction: column; transform: translateZ(28px); container-type: inline-size;
}
@media (pointer: coarse) { .tcg-inner { transform: none; } }
.tcg-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4.3cqw; }
.tcg-name { font-family: var(--f-en); font-weight: 600; letter-spacing: .18em; font-size: 3.93cqw; text-transform: uppercase; }
.tcg-hp { font-size: 3.57cqw; color: var(--gold); letter-spacing: .1em; }
.tcg-hp b { font-size: 5cqw; }
.tcg-art { position: relative; height: 34%; display: flex; align-items: center; justify-content: center; border-radius: 2.1cqw; border: 1px solid rgba(237,234,227,.12); margin-bottom: 4.3cqw; }
.tcg-art img { width: 19.3cqw; height: 19.3cqw; border-radius: 3.6cqw; filter: brightness(.9) saturate(.85); }
.tcg-art::after {
  content: "CARD INTELLIGENCE"; position: absolute; bottom: 2.1cqw; right: 2.9cqw;
  font-family: var(--f-en); font-size: 2.14cqw; letter-spacing: .22em; color: rgba(198,161,91,.62); font-weight: 600;
}
.tcg-type { font-size: 3.21cqw; color: var(--muted); letter-spacing: .1em; text-align: center; margin-bottom: 3.6cqw; line-height: 1.6; }
.tcg-type b { color: var(--gold); font-weight: 500; }
.tcg-moves { display: flex; flex-direction: column; gap: 2.5cqw; flex: 1; }
.tcg-move {
  display: flex; justify-content: space-between; align-items: center; line-height: 1.6; font-size: 3.93cqw;
  border-bottom: 1px solid rgba(237,234,227,.08); padding-bottom: 2.1cqw; transition: color .5s var(--ease), border-color .5s var(--ease);
}
.tcg-move .cost { display: inline-flex; gap: 1.07cqw; margin-right: 2.9cqw; }
.tcg-move .cost i { width: 3.57cqw; height: 3.57cqw; border-radius: 50%; border: 1px solid rgba(198,161,91,.5); display: inline-block; transition: background .5s var(--ease); }
.tcg-move .mv { flex: 1; }
.tcg-move .dmg { font-weight: 500; color: var(--gold); font-size: 4.29cqw; }
.tcg-move.is-lit { color: var(--gold-hi); border-bottom-color: rgba(198,161,91,.4); }
.tcg-move.is-lit .cost i { background: var(--gold); }
.tcg-foot { display: flex; justify-content: space-between; align-items: flex-end; font-size: 2.68cqw; color: var(--muted); letter-spacing: .04em; margin-top: 3.6cqw; }
.tcg-foot .meta span { display: block; line-height: 1.9; }
.tcg-foot .meta b { color: rgba(237,234,227,.7); font-weight: 400; }
.tcg-rarity { text-align: right; line-height: 1.5; }
.tcg-rarity .rar { font-family: var(--f-en); font-weight: 600; font-size: 3.57cqw; color: var(--gold); letter-spacing: .18em; }
.tcg-rarity .num { display: block; font-size: 2.68cqw; color: var(--muted); }

/* WebGL2 が無い／失われた／ソフトウェア描画: CSS 版の箔（帯の位置は --band）
   2026-10-01 帯は子要素を持たない canvas の背景で描く（以前は .card-body::after＝カード全体のスタイル再計算が毎フレーム走っていた）。
   GL 版と同じく文字の下に敷く */
.no-gl .foil {
  --band: .35;
  background:
    linear-gradient(112deg, transparent 38%, rgba(198,161,91,.12) 45%, rgba(243,230,196,.26) 50%, rgba(198,161,91,.12) 55%, transparent 62%) calc((1.5 - var(--band)) * 50%) 0 / 300% 100% no-repeat,
    radial-gradient(ellipse 70% 30% at 50% 22%, rgba(198,161,91,.10), transparent 70%),
    linear-gradient(160deg, rgba(198,161,91,.10), transparent 18% 82%, rgba(198,161,91,.08));
}

/* H-4 #1 線から満ちる: 輪郭 300ms → 箔 300ms（CSS だけ。JS が死んでも 600ms で完成） */
.card-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none; transform: translateZ(1px); }
.card-line rect { fill: none; stroke: var(--gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .card-line { animation: line-fade 900ms linear both; }
.js .card-line rect { animation: line-draw 300ms var(--ease-out) both; }
.js .card-body { animation: foil-fill 300ms var(--ease-out) 300ms backwards; }
.js .floor { animation: floor-in 600ms var(--ease-out) 200ms backwards; }
@keyframes line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes line-fade { 0%, 66% { opacity: 1; } 100% { opacity: 0; } }
@keyframes foil-fill { from { clip-path: inset(100% 0 0 0 round 4.6% / 3.3%); } to { clip-path: inset(0 0 0 0 round 4.6% / 3.3%); } }
@keyframes floor-in { from { transform: translate(-50%, -52%) scaleX(.4); } }

/* ---------------- HERO: タグラインは1行ずつ独立した層 ---------------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: clip; touch-action: pan-y; }
.hero-eyebrow {
  position: absolute; z-index: 3; left: var(--pad); top: calc(var(--navh) + 2.5vh); display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-en); font-weight: 600; font-size: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); line-height: 1.4;
}
.hero-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.tagline { font-size: 0; line-height: 0; font-weight: 900; }
.tagline br { display: none; }
.tl {
  --fs: var(--fs-tag);
  position: absolute; display: block; white-space: nowrap; font-family: var(--f-jp); font-weight: 900; font-size: var(--fs); line-height: 1.12;
  letter-spacing: -.02em; font-feature-settings: "palt"; overflow: clip; padding: 0 .04em;
}
.tl-in { display: block; }
.tl-1 { z-index: 1; left: var(--pad); top: 13vh; }
.tl-2 { z-index: 3; left: calc(var(--pad) + 1em); top: 40vh; }
.tl-3 { z-index: 3; left: var(--pad); bottom: 4vh; } /* 2026-09-26 オーナー指摘: 「◯◯◯に。」を切らず全部見せる */
.tl-2 .tl-in { text-shadow: 0 2px 30px rgba(11,11,13,.45); }
.holo-text { color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* ◯ と「に。」それぞれに箔の帯を1回だけ通す（E-2） */
  .holo-text .orb, .holo-text .ni {
    background: linear-gradient(100deg, var(--gold) 0 40%, var(--gold-hi) 50%, var(--gold) 60% 100%);
    background-size: 300% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .js .holo-text .orb, .js .holo-text .ni { animation: maru-sweep 1400ms var(--ease) 1500ms backwards; }
  .js .holo-text .orb:nth-child(2) { animation-delay: 1600ms; }
  .js .holo-text .orb:nth-child(3) { animation-delay: 1700ms; }
  .js .holo-text .ni { animation-delay: 1800ms; }
}
@keyframes maru-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ③ STAGE #3・#4 スポットライト: 3つの丸（--lit 0〜1。JS が無ければ点灯のまま） */
.orb, .ni { position: relative; display: inline-block; }
.orb {
  --lit: 1; isolation: isolate;
  opacity: calc(.4 + .6 * var(--lit));
  /* 2026-10-01 filter: drop-shadow は点灯時に矩形の縁が出ていた → text-shadow（輪の線そのものが光る）へ */
  text-shadow: 0 0 calc(.09em * var(--lit)) rgba(243,230,196, calc(.5 * var(--lit)));
}
.orb::before {
  /* 内側を塗りつぶす「硬貨」をやめ、輪の外周に薄い暈（かさ）と、ごく淡い中心の光 */
  content: ""; position: absolute; left: 50%; top: 52%; width: 1.02em; height: 1.02em; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(circle closest-side, rgba(243,230,196, calc(.07 * var(--lit))) 0%, transparent 62%, rgba(243,230,196, calc(.11 * var(--lit))) 76%, transparent 100%);
}
.n2-live .orb { --lit: 0; }
.spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(circle 16vmax at var(--sx, 30%) var(--sy, 85%), rgba(198,161,91,.08) 0%, rgba(198,161,91,.045) 38%, rgba(198,161,91,.012) 68%, transparent 100%);
}
.spot.is-on { opacity: 1; }
/* ヒーローの下端で光の輪が水平に切れないよう、下 18% で消す */
.spot { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }

/* H-4 #2 行マスク: ロード＋120ms・各 900ms・120ms ずつ（CSS だけ） */
.js .tl-in { animation: line-in 900ms var(--ease-out) backwards; }
.js .tl-1 .tl-in { animation-delay: 120ms; }
.js .tl-2 .tl-in { animation-delay: 240ms; }
.js .tl-3 .tl-in { animation-delay: 360ms; }
/* 2026-10-01 タグラインの書体が届くまで行マスクを止めておく（index.html の head で .tl-wait を付け外し・最長1秒） */
.tl-wait .tl-in { animation-play-state: paused; }
.js .hero-lead { animation: lead-in 900ms var(--ease-out) 620ms backwards; }
@keyframes line-in { from { transform: translateY(108%); filter: blur(4px); } }
@keyframes lead-in { from { clip-path: inset(0 0 100% 0); transform: translateY(14px); } }

.hero-lead { position: absolute; z-index: 3; right: var(--pad); bottom: 8vh; width: min(410px, 30vw); }
.hero-sub { font-size: 15px; line-height: 1.95; color: var(--muted-2); margin-bottom: 28px; }
.hero-sub strong { color: var(--cream); font-weight: 500; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-gold, .btn-ghost {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-family: inherit; font-size: 13px; letter-spacing: .1em; border-radius: var(--radius); line-height: 1.4;
  transition: color .3s, border-color .3s, background-color .3s, scale .18s var(--ease-out), translate .45s var(--ease-out);
}
.btn-gold { background: var(--gold); color: var(--ink); font-weight: 500; padding: 14px 28px; border: 0; cursor: pointer; }
.btn-gold:hover { background: #D2B070; }
.btn-gold:disabled { cursor: wait; opacity: .7; }
.btn-gold svg, .btn-ghost svg { transition: transform .3s var(--ease); }
.btn-gold:hover svg { transform: translateX(4px); }
.btn-ghost { border: 1px solid var(--line); color: var(--cream); padding: 13px 22px; }
.btn-ghost:hover { border-color: rgba(198,161,91,.55); color: var(--gold); }
/* 2026-10-01 金ボタンに箔の帯が一度走る／枠ボタンは下から金の薄い地が満ちる／押すと沈む */
.btn-gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,247,226,.55) 48%, rgba(255,247,226,.0) 62%);
}
.btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: scaleY(0); transform-origin: 50% 100%;
  background: rgba(198,161,91,.08); transition: transform .45s var(--ease-out);
}
.btn-ghost:hover::before { transform: scaleY(1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-gold:hover::after { animation: btn-sheen .9s var(--ease-out); }
}
@keyframes btn-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.btn-gold:active, .btn-ghost:active, .nav-cta:active { scale: .97; }
.btn-gold:focus-visible, .btn-ghost:focus-visible, .nav-cta:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
/* 「傾けて見る」は補助操作。CTA と同格の枠をやめ、小さな文字ボタン＋状態の点に */
.gyro-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; background: none; border: 0; border-radius: 0; color: var(--muted-2);
  font: inherit; font-size: 12px; letter-spacing: .14em; padding: 10px 0; min-height: 44px; cursor: pointer;
}
.gyro-btn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(198,161,91,.7); transition: background-color .3s, box-shadow .3s; }
.gyro-btn[hidden] { display: none; }
.gyro-btn[aria-pressed="true"] { color: var(--gold); }
.gyro-btn[aria-pressed="true"]::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(198,161,91,.16); }

/* ---------------- SERVICE: 注記＋③の照明（線が届いた事業 100%／他 22%） ---------------- */
.svc { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; column-gap: 6vw; align-items: start; padding: 20vh var(--pad) 22vh; border-top: 1px solid var(--line); }
.n2-live .svc { border-top-color: transparent; padding-bottom: 12vh; } /* 2026-10-01 34vh→22vh→12vh(r4): 04 の後の空白を画面の3割未満に */
.svc-head { grid-column: 1; grid-row: 1 / span 4; position: sticky; top: 120px; max-width: 30em; }
.n2-live .svc-head { grid-column: 2; grid-row: auto; position: static; margin-bottom: 16vh; }
.svc-label, .sec-label { font-family: var(--f-en); font-weight: 600; font-size: var(--type-label); letter-spacing: var(--track-label); color: var(--gold); margin-bottom: 18px; line-height: 1.4; }
/* 2026-10-01 見出しラベルの入場: 金の罫が引かれてから、字間が締まりながら文字が出る（画面に入ったとき1回） */
.svc-label, .sec-label { display: flex; align-items: center; gap: 14px; white-space: nowrap; } /* 字間の入場中に折り返して高さが変わる（アンカー着地が 23px ずれた）のを防ぐ */
.svc-label::before, .sec-label::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--gold); transform-origin: 0 50%; }
.n2-live .svc-label, .n2-live .sec-label { transition: letter-spacing 1.4s var(--ease-out) .15s, opacity .9s var(--ease) .15s; }
.n2-live .svc-label::before, .n2-live .sec-label::before { transition: transform .7s var(--ease-out); }
.n2-live .svc-label:not(.is-in), .n2-live .sec-label:not(.is-in) { letter-spacing: .62em; opacity: 0; }
.n2-live .svc-label:not(.is-in)::before, .n2-live .sec-label:not(.is-in)::before { transform: scaleX(0); }
.svc-title, .sec-title { font-weight: 700; font-size: clamp(28px, 3vw, 44px); line-height: 1.35; letter-spacing: .02em; margin-bottom: 18px; }
.svc-desc, .sec-desc { color: var(--muted-2); font-size: 15px; }
.ann { grid-column: 2; position: relative; max-width: 34em; margin-bottom: 14vh; transition: opacity .6s var(--ease); }
.n2-live .ann { min-height: 48vh; margin-bottom: 8vh; }
.n2-live .ann[data-move="2"] { min-height: 34vh; } /* 2026-10-01 r4 03 は本文が短いので 03→04 の空白を詰める */
/* 2026-10-01 r4 未点灯は不透明度で沈めず、色で一段落とす（どの文字もコントラスト AA 以上）。
   見出し #A39F98＝7.7:1／本文・箇条 #8B8781＝5.7:1／点灯で生成りに。光の暈と点は点灯中だけ */
.n2-live .ann[data-move] .ann-title { color: var(--muted-2); transition: color .6s var(--ease); }
.n2-live .ann[data-move] p, .n2-live .ann[data-move] .ann-feats li { color: var(--muted); transition: color .6s var(--ease); }
.n2-live .ann[data-move].is-lit .ann-title, .n2-live .ann[data-move].is-seen .ann-title, .n2-live .ann[data-move]:focus-within .ann-title, .n2-live .ann[data-move]:hover .ann-title { color: var(--cream); }
.n2-live .ann[data-move].is-lit p, .n2-live .ann[data-move].is-seen p, .n2-live .ann[data-move]:focus-within p, .n2-live .ann[data-move]:hover p { color: var(--muted-2); }
.n2-live .ann[data-move].is-lit .ann-feats li, .n2-live .ann[data-move].is-seen .ann-feats li, .n2-live .ann[data-move]:focus-within .ann-feats li, .n2-live .ann[data-move]:hover .ann-feats li { color: var(--cream); }
.n2-live .ann[data-move]::before {
  content: ""; position: absolute; inset: -8vh -5vw -4vh -5vw; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease);
  background: radial-gradient(ellipse 48% 45% at 50% 35%, rgba(198,161,91,.09), rgba(198,161,91,.025) 55%, transparent 75%);
}
.n2-live .ann[data-move].is-lit::before { opacity: 1; }
.ann-head { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; line-height: 1; }
.ann-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold); background: var(--ink); transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.ann-dot::before { content: ""; position: absolute; right: 100%; top: 50%; width: min(7vw, 88px); height: 1px; background: linear-gradient(90deg, transparent, rgba(198,161,91,.7)); margin-right: 2px; }
.n2-live .ann-dot::before { display: none; }
.ann-num { font-family: var(--f-en); font-size: 12px; letter-spacing: .12em; color: var(--gold); font-variant-numeric: tabular-nums; padding-top: 2px; }
.ann-tag { font-family: var(--f-en); font-weight: 600; font-size: var(--type-label); letter-spacing: var(--track-label); color: var(--muted); padding-top: 2px; }
.ann-title { font-weight: 700; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.45; letter-spacing: .02em; margin-bottom: 18px; }
.ann p { color: var(--muted-2); font-size: 15px; }
.ann-feats { list-style: none; margin: 22px 0 26px; border-top: 1px solid var(--line); }
.ann-feats li { position: relative; font-size: 14px; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); line-height: 1.6; }
.ann-feats li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--gold); }
.ann-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .08em; padding: 6px 0; transition: color .3s, gap .3s var(--ease); }
.ann-link:hover { color: var(--gold); gap: 14px; }
/* 2026-10-01 下線は線として持ち、ホバーで右へ抜けて左から引き直す */
.ann-link, .ann-mini p a, .thanks small a {
  border-bottom: 0; text-decoration: none;
  background: linear-gradient(rgba(198,161,91,.55), rgba(198,161,91,.55)) 0 100% / 100% 1px no-repeat;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ann-link:hover, .ann-mini p a:hover, .thanks small a:hover { animation: uline .7s var(--ease-out); background-image: linear-gradient(var(--gold), var(--gold)); }
}
@keyframes uline {
  0% { background-size: 100% 1px; background-position: 100% 100%; }
  45% { background-size: 0 1px; background-position: 100% 100%; }
  46% { background-size: 0 1px; background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}
.ann:hover .ann-dot, .ann.is-hot .ann-dot, .ann.is-lit .ann-dot { background: var(--gold); box-shadow: 0 0 0 5px rgba(198,161,91,.14); }
.ann-mini { padding-top: 26px; border-top: 1px solid var(--line); }
.ann-mini h4 { font-weight: 700; font-size: 17px; margin: 4px 0 6px; }
.ann-mini p { font-size: 14px; }
.ann-mini p a { color: var(--gold); padding-bottom: 2px; white-space: nowrap; }
/* キーボードで事業の中に入ったら、照明が当たっていなくても灯す */
.n2-live .ann[data-move]:focus-within::before { opacity: 1; }
.n2-live .ann-mini { min-height: 0; margin-bottom: 0; }
.ann-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: none; }
.n2-live .ann-lines { display: block; }
.ann-line { opacity: 0; }
.ann-line path { fill: none; stroke: var(--gold); stroke-width: 1; stroke-opacity: .35; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-opacity .5s; }
.ann-line circle.s { fill: var(--gold); }
.ann-line.is-cur path, .ann-line.is-hot path { stroke-opacity: 1; stroke-width: 1.5; }

/* ---------------- 共通セクション ---------------- */
.sec { position: relative; z-index: 3; padding: 18vh var(--pad); border-top: 1px solid var(--line); }
.sec-in { max-width: 1200px; margin: 0 auto; }
.sec-head { margin-bottom: 8vh; max-width: 40em; }

/* ---------------- ABOUT / MISSION: 裏返る親カード＋配られる子カード ---------------- */
.about { position: relative; z-index: 3; border-top: 1px solid var(--line); overflow-x: clip; }
.deck-stage { max-width: 1320px; margin: 0 auto; padding: 18vh var(--pad) 12vh; }
.missions {
  --mc-w: clamp(210px, 27vw, 320px);
  position: relative; perspective: 1400px;
  display: grid; grid-template-columns: repeat(3, var(--mc-w)); justify-content: center; gap: clamp(20px, 2.6vw, 40px);
}
.mc, .deck-parent { position: relative; width: var(--mc-w); aspect-ratio: 63 / 88; container-type: inline-size; }
.mc-flip, .dp-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.face {
  position: absolute; inset: 0; border-radius: 4.6%/3.3%; overflow: hidden;
  background: #111114; border: 1px solid rgba(198,161,91,.45); box-shadow: 0 30px 60px rgba(0,0,0,.6);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.face::before { content: ""; position: absolute; inset: 2.4% 3.33%; border-radius: 3.4%/2.4%; border: 1px solid rgba(198,161,91,.2); pointer-events: none; }
/* 裏面: 菱形格子＋ロゴの箔押し */
.face-back { transform: rotateY(180deg); display: grid; place-items: center; }
.face-back::before { background: repeating-linear-gradient(45deg, rgba(198,161,91,.07) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, rgba(198,161,91,.07) 0 1px, transparent 1px 14px); }
.face-back::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge;
  background: linear-gradient(112deg, transparent 30%, rgba(198,161,91,.12) 42%, rgba(243,230,196,.2) 50%, rgba(198,161,91,.12) 58%, transparent 70%);
}
.emb, .endorse-emb { position: relative; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(198,161,91,.5); background: #0f0f12; }
.emb { width: 42%; aspect-ratio: 1; }
/* 箔押し: ロゴを反転→金に染め、screen で白地を落とす */
.emb img, .endorse-emb img { filter: invert(1) grayscale(1) contrast(1.6) sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(1.1); mix-blend-mode: screen; }
.bz-art img, .dp-art img { filter: brightness(.9) saturate(.85); border-radius: 14%; }
.emb img { width: 56%; height: auto; }
.wm { position: absolute; bottom: 7%; left: 0; right: 0; text-align: center; font-family: var(--f-en); font-weight: 600; font-size: clamp(8px, 2.7cqw, 10px); letter-spacing: .32em; color: rgba(198,161,91,.7); }
/* 表面: ミッション */
.mc-front { padding: 10% 9% 8%; display: flex; flex-direction: column; }
.mc .num { font-family: var(--f-en); font-weight: 600; font-size: clamp(10px, 3.6cqw, 12px); letter-spacing: .22em; color: var(--gold); line-height: 1.4; }
.mc .en { display: block; font-size: clamp(10px, 3.6cqw, 12px); color: var(--muted); letter-spacing: .08em; line-height: 1.5; margin: 1.5% 0 6%; }
.mc h3 { font-weight: 700; font-size: clamp(15px, 6cqw, 19px); line-height: 1.55; letter-spacing: .01em; margin-bottom: 6%; padding-bottom: 6%; border-bottom: 1px solid var(--line); }
.mc p { font-size: clamp(11.5px, 4.3cqw, 13.5px); line-height: 1.85; color: var(--muted-2); }
/* 親カード（ヒーローのカードの縮小版）: 動きがあるときだけ出す */
.deck-parent { display: none; z-index: 10; }
.n2-live .deck-parent { display: block; }
.dp-front { padding: 9% 9% 7%; display: flex; flex-direction: column; font-family: var(--f-en); }
.dp-top, .dp-foot, .bz-top, .bz-foot { display: flex; justify-content: space-between; align-items: baseline; }
.dp-top { font-weight: 600; font-size: 4.4cqw; letter-spacing: .18em; }
.dp-hp, .dp-foot b { color: var(--gold); }
.dp-art { flex: 1; margin: 7% 0; display: grid; place-items: center; border: 1px solid rgba(237,234,227,.12); border-radius: 2.4cqw; }
.dp-art img { width: 26cqw; height: auto; }
.dp-foot { font-size: 3.4cqw; color: var(--muted); }
.dp-foot b { font-weight: 600; letter-spacing: .18em; font-size: 4cqw; }
/* sticky で配る（PC・十分な高さ） */
.deck-sticky .deck-track { height: 260vh; }
.deck-sticky .deck-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding: calc(var(--navh) + 5vh) var(--pad) 4vh; }
.deck-sticky .deck-stage .sec-head { margin-bottom: 0; } /* 2026-10-01 About の中だけ（以前は html の .deck-sticky で Company/Contact の見出し下余白まで 0 になっていた） */
.deck-sticky .missions { --mc-w: clamp(180px, min(22vw, calc((100svh - 340px) * .716)), 300px); flex: 1; display: block; }
/* 2026-10-01 表面の重心: 見出しは上、本文はカードの下端へ（下 40% の空きを解消） */
.deck-sticky .mc p { margin-top: auto; }
.deck-sticky .mc h3 { margin-bottom: 0; }
.deck-sticky .mc, .deck-sticky .deck-parent { position: absolute; left: 50%; top: 50%; margin: calc(var(--mc-w) * -.6984) 0 0 calc(var(--mc-w) / -2); }
.is-moving { will-change: transform; }
/* 階段（スマホ／JS 無しの狭い画面） */
@media (max-width: 899px) {
  .missions { --mc-w: min(78vw, 330px); grid-template-columns: minmax(0, 1fr); row-gap: 6vh; }
  .mc[data-i="0"] { justify-self: start; } .mc[data-i="1"] { justify-self: center; } .mc[data-i="2"] { justify-self: end; }
}
.deck-stair .missions { --mc-w: min(78vw, 330px); grid-template-columns: minmax(0, 1fr); row-gap: 6vh; }
.deck-stair .mc[data-i="0"] { justify-self: start; } .deck-stair .mc[data-i="1"] { justify-self: center; } .deck-stair .mc[data-i="2"] { justify-self: end; }
.deck-stair .deck-parent { width: min(40vw, 190px); justify-self: center; }

/* 2026-10-01 手触り（PC）: MISSION カードと裏書きは、指の位置に光が来る（--mx/--my は noir2.js がホバー中だけ書く）。
   MISSION はホバーで少し持ち上がる（GSAP の transform と独立した translate プロパティ） */
.mc-front::after, .endorse::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(243,230,196,.075), rgba(198,161,91,.03) 35%, transparent 65%);
}
.mc-front.is-hover::after, .endorse.is-hover::after { opacity: 1; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .deck-sticky .mc { transition: translate .6s var(--ease-out); }
  .deck-sticky .mc:hover { translate: 0 -10px !important; } /* GSAP は transform を書く要素に translate:none をインラインで置くので !important */
}

/* ---------------- 創業者の言葉: 光が落ち、引用が灯る ---------------- */
.words { position: relative; padding: 14vh var(--pad) 22vh; overflow: clip; }
.beam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 130vw; margin-left: -65vw; pointer-events: none; transform-origin: 50% 0;
  /* 2026-10-01 台形の clip-path（縁が硬く上端が水平に切れていた）→ 円錐のグラデーション＋縦のフェードで「光の柱」に */
  background: conic-gradient(from 160deg at 50% -4%, transparent 0deg, rgba(198,161,91,.045) 9deg, rgba(198,161,91,.10) 16deg,
    rgba(243,230,196,.085) 20deg, rgba(198,161,91,.10) 24deg, rgba(198,161,91,.045) 31deg, transparent 40deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 55%, transparent 96%);
}
.story { position: relative; max-width: 1200px; margin: 0 auto; }
.story-quote { font-weight: 700; font-size: clamp(22px, 3vw, 34px); line-height: 1.75; letter-spacing: .01em; margin-bottom: 36px; }
.story-quote .sq-ch { opacity: .22; transition: opacity .45s ease, color .45s ease; }
.story-quote .sq-ch.is-lit { opacity: 1; }
.story-body { color: var(--muted-2); font-size: 15px; max-width: 34em; margin-bottom: 36px; }
.story-badge { display: inline-flex; align-items: center; gap: 16px; border: 1px solid rgba(198,161,91,.3); border-radius: var(--radius); padding: 12px 22px; background: rgba(198,161,91,.04); }
.story-badge b { font-family: var(--f-en); font-size: 26px; font-weight: 600; color: var(--gold); letter-spacing: .06em; line-height: 1.2; }
.story-badge small { font-family: var(--f-en); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 1024px) {
  .beam { left: auto; right: calc(var(--pad) - 14vw); width: 64vw; margin-left: 0; }
  .story { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; grid-template-areas: "body quote" "badge quote"; column-gap: 8vw; }
  .story-quote { grid-area: quote; writing-mode: vertical-rl; text-orientation: upright; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.9; margin: 0 4vw 0 0; }
  .story-body { grid-area: body; align-self: end; }
  .story-badge { grid-area: badge; justify-self: start; }
}

/* ---------------- COMPANY: 裏面の「裏書き」 ---------------- */
.endorse {
  position: relative; max-width: 860px; padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 52px);
  border: 1px solid rgba(198,161,91,.42); border-radius: 14px; background-color: #0f0f12;
  background-image: repeating-linear-gradient(45deg, rgba(198,161,91,.035) 0 1px, transparent 1px 16px), repeating-linear-gradient(-45deg, rgba(198,161,91,.035) 0 1px, transparent 1px 16px);
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
}
.endorse::before { content: ""; position: absolute; inset: 10px; border-radius: 9px; border: 1px solid rgba(198,161,91,.18); pointer-events: none; }
.endorse-emb { width: 56px; height: 56px; margin: 0 0 28px; }
.endorse-emb img { width: 28px; height: 28px; }
.company-tbl { position: relative; width: 100%; border-collapse: collapse; }
.company-tbl th, .company-tbl td { padding: 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; line-height: 1.8; }
.company-tbl tr:last-child th, .company-tbl tr:last-child td { border-bottom-color: rgba(198,161,91,.45); }
.company-tbl th { width: 8.5em; padding-right: 16px; font-weight: 500; font-size: 13px; letter-spacing: .12em; color: var(--gold); white-space: nowrap; }
.company-tbl td { font-size: 14.5px; color: var(--cream); }

/* ---------------- CONTACT: 名刺大のカード＋フォーム ---------------- */
.form-wrap { position: relative; max-width: 820px; padding-left: 150px; }
.bizcard {
  --bw: 104px;
  position: absolute; left: 0; top: 4px; z-index: 2; width: var(--bw); aspect-ratio: 63 / 88; container-type: inline-size;
  padding: calc(var(--bw) * .1) calc(var(--bw) * .09) calc(var(--bw) * .08); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 4.6%/3.3%; background: #111114; border: 1px solid rgba(198,161,91,.5); box-shadow: 0 24px 48px rgba(0,0,0,.6);
  font-family: var(--f-en); font-size: 7px; letter-spacing: .12em; line-height: 1.3; transform-origin: 50% 50%;
}
.bizcard::before { content: ""; position: absolute; inset: 3.5% 4.5%; border-radius: 4px; border: 1px solid rgba(198,161,91,.2); pointer-events: none; }
.bizcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%); mix-blend-mode: color-dodge;
  background: linear-gradient(112deg, transparent 30%, rgba(198,161,91,.2) 42%, rgba(243,230,196,.5) 50%, rgba(198,161,91,.2) 58%, transparent 70%);
}
.bz-top { font-weight: 600; font-size: 7.5cqw; }
.bz-top b, .bz-foot b { color: var(--gold); font-weight: 600; }
.bz-art { flex: 1; margin: 8% 0; display: grid; place-items: center; border: 1px solid rgba(237,234,227,.12); border-radius: 4cqw; }
.bz-art img { width: 38cqw; height: auto; }
.bz-foot { font-size: 6.5cqw; color: var(--muted); }
.form-wrap.is-sent { padding-left: 0; }
.form-wrap.is-sent .bizcard { position: relative; left: auto; top: auto; margin: 0 auto -44px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.f-group { margin-bottom: 28px; }
.f-group label { display: block; }
.f-lab { display: block; font-family: var(--f-en); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; line-height: 1.6; }
.req { color: var(--gold); }
.f-group input, .f-group select, .f-group textarea {
  width: 100%; background: transparent; color: var(--cream); border: 0; border-bottom: 1px solid rgba(237,234,227,.2); border-radius: 0;
  padding: 10px 0; font-size: 15px; font-family: inherit; font-weight: 400; transition: border-color .3s, background-size .6s var(--ease-out); appearance: none; -webkit-appearance: none; outline: none;
  /* 2026-10-01 フォーカスで金の下線が左から伸びる */
  background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
}
.f-group input:focus, .f-group select:focus, .f-group textarea:focus { background-size: 100% 1px; }
.f-group input:focus-visible, .f-group select:focus-visible, .f-group textarea:focus-visible { outline: none; }
.f-group label:focus-within .f-lab { color: var(--gold); }
.f-lab { transition: color .3s; }
.f-group select {
  background-image: linear-gradient(var(--gold), var(--gold)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%238B8781' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 100%, right 2px center; background-size: 0 1px, 10px 10px; cursor: pointer;
}
.f-group select:focus { background-size: 100% 1px, 10px 10px; }
.f-group select option { background: var(--ink); }
.f-group input::placeholder, .f-group textarea::placeholder { color: rgba(139,135,129,.62); font-size: 14px; }
.f-group input:focus, .f-group select:focus, .f-group textarea:focus { border-bottom-color: var(--gold); }
.f-group textarea { resize: vertical; min-height: 120px; line-height: 2; }
.form-actions { margin-top: 12px; }
.form-msg { display: none; margin-top: 20px; font-size: 12px; letter-spacing: .04em; }
.form-msg.error { display: block; color: rgba(237,130,130,.8); border-left: 2px solid rgba(237,130,130,.5); padding-left: 14px; }
.thanks {
  display: none; position: relative; overflow: hidden; max-width: 480px; margin: 0 auto; padding: 72px 40px 56px; text-align: center;
  border: 1px solid rgba(198,161,91,.25); border-radius: var(--radius); background: var(--surface); animation: thanks-in .7s var(--ease);
}
@keyframes thanks-in { from { transform: translateY(20px); clip-path: inset(0 0 100% 0); } }
.thanks .tk-ico { width: 52px; height: 52px; margin: 0 auto 24px; border: 1px solid rgba(198,161,91,.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-en); font-size: 20px; font-weight: 600; color: var(--gold); }
.thanks h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.thanks p { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; }
.thanks p strong { color: var(--gold); font-weight: 400; }
.thanks small { font-size: 11px; color: var(--muted); line-height: 1.9; display: block; letter-spacing: .04em; }
.thanks small a { color: var(--gold); padding-bottom: 2px; }
/* 送信完了で一度だけ箔が一閃 */
.thanks::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%); mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 35%, rgba(243,230,196,.16) 50%, transparent 65%);
}
.is-flash .thanks::after, .is-flash .bizcard::after { animation: flash 1100ms var(--ease-out) 250ms forwards; }
@keyframes flash { to { transform: translateX(110%); } }

/* ---------------- FOOTER: 透かしはタグラインの残像 ---------------- */
.footer { --gfs: min(150px, calc((100vw - 2 * var(--pad)) / 11.6)); position: relative; z-index: 3; overflow: hidden; border-top: 1px solid var(--line); padding: calc(3vh + var(--gfs) * 2.24 + clamp(44px, 7vh, 88px)) var(--pad) 40px; }
.ft-ghost {
  position: absolute; left: var(--pad); top: 3vh; white-space: nowrap; pointer-events: none; user-select: none;
  font-weight: 900; font-size: clamp(64px, 9vw, 150px); line-height: 1.1; letter-spacing: -.02em; font-feature-settings: "palt";
  color: rgba(237,234,227,.025); -webkit-text-stroke: 1px rgba(198,161,91,.12);
}
/* 2026-10-01 残像: 文節で2行に折って全文を見せる（右端で切れていた）。塗りは透明＋箔の帯を背景で通す。
   画面に入ってくる間に帯が左→右へ一度だけ通る（scroll-driven。未対応なら静止の輪郭だけ） */
.ft-ghost {
  right: var(--pad); white-space: normal; word-break: auto-phrase; line-break: strict;
  font-size: var(--gfs); line-height: 1.12;
  color: transparent; -webkit-text-stroke: 1px rgba(198,161,91,.16);
  background: linear-gradient(100deg, transparent 0 38%, rgba(243,230,196,.10) 48%, rgba(198,161,91,.05) 52%, transparent 62% 100%) 120% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ft-ghost { animation: ghost-sweep linear both; animation-timeline: view(); animation-range: entry 10% cover 60%; }
  }
}
@keyframes ghost-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ft-inner { position: relative; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.ft-logo { display: flex; align-items: center; gap: 14px; font-family: var(--f-en); font-weight: 600; letter-spacing: .22em; font-size: 14px; }
.ft-logo img { width: 40px; height: 40px; border-radius: 3px; }
.ft-tagline { margin-top: 18px; font-size: 14px; color: var(--muted-2); letter-spacing: .04em; }
.ft-links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.ft-links a { font-family: var(--f-en); font-size: var(--type-label); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); transition: color .3s; }
.ft-links a:hover { color: var(--gold); }
.ft-copy { position: relative; max-width: 1200px; margin: 10vh auto 0; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--f-en); font-size: 11px; letter-spacing: .12em; color: var(--muted); }

/* 2026-10-01 r4 背の低い横長（1366×768・1280×720）: 2行目とリード文の間を空ける */
@media (min-width: 1100px) and (max-height: 820px) { .hero .hero-lead { bottom: 3vh; } }

/* ---------------- 中間幅 ---------------- */
@media (max-width: 1100px) and (min-width: 760px) {
  .hero .hero-lead { width: min(360px, 30vw); bottom: 2vh; }
  :root { --l2k: .46; } /* 中間幅はリード文が5行になるので2行目を少し上（ロゴの下端すれすれ） */ /* 2026-10-01 r4 34→30vw・下 4vh: 1024 幅でリード文がカードの右端と2行目に重なっていた */
  .hero-sub { font-size: 14px; }
}

/* ---------------- モバイル（< 760px） ---------------- */
@media (max-width: 759px) {
  :root { --navh: 56px; --cw: 78vw; --ch: 108.95vw; --ctop: calc(92px + 11.6vw * 1.12 + 12px); } /* 2026-09-28 1行目がカードに隠れないよう、カードは1行目の下端から始める */
  .nav { padding: 14px 0; }
  .nav.is-scrolled { padding: 10px 0; }
  .hamburger { display: block; position: relative; z-index: 2; }
  .nav-links { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 30px; background: rgba(11,11,13,.98); visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
  .nav-links.is-open { visibility: visible; opacity: 1; transition: opacity .3s; }
  .nav-link { font-size: 17px; letter-spacing: .22em; }
  /* 2026-10-01 メニューの項目は上から順に立ち上がる */
  .nav-links > a { opacity: 0; transform: translateY(16px); transition: opacity .35s var(--ease), transform .6s var(--ease-out), color .3s, background-color .4s; }
  .nav-links.is-open > a { opacity: 1; transform: none; }
  .nav-links.is-open > a:nth-child(2) { transition-delay: .04s; } .nav-links.is-open > a:nth-child(3) { transition-delay: .08s; }
  .nav-links.is-open > a:nth-child(4) { transition-delay: .12s; } .nav-links.is-open > a:nth-child(5) { transition-delay: .16s; }
  .nav-cta { padding: 12px 26px; margin-top: 8px; }

  .rig { top: calc(var(--ctop) + var(--ch) / 2); height: var(--ch); }
  .hero { height: auto; min-height: 0; padding: calc(var(--ctop) + var(--ch) + 11.6vw * 1.12 + 40px) var(--pad) 12px; } /* 2026-10-01 下 56→32→12px(r4) */
  .gyro-btn { margin-top: 14px; }
  .hero-eyebrow { top: 70px; }
  .tl { --fs: 11.6vw; }
  .tl-1 { top: 92px; }
  .tl-2 { left: var(--pad); top: calc(var(--ctop) + 42vw); } /* 2026-09-28 ロゴを避け、絵の下端〜「特性」行を横切る */
  .tl-3 { left: auto; right: var(--pad); bottom: auto; top: calc(var(--ctop) + var(--ch) + 14px); z-index: 3; }
  .hero-lead { position: relative; right: auto; bottom: auto; width: auto; }
  .hero-sub { font-size: 14px; }
  .btn-gold { padding: 13px 22px; }
  .btn-ghost { padding: 12px 18px; }

  .svc { grid-template-columns: minmax(0, 1fr); padding: 5vh var(--pad) 18vh; } /* 2026-10-01 14vh→10vh→5vh(r4): 「傾けて見る」と OUR SERVICE が1画面に入る */
  .svc-head { grid-column: 1; grid-row: auto; position: static; margin-bottom: 10vh; }
  .ann { grid-column: 1; margin-bottom: 10vh; }
  .ann-dot::before { display: none; }
  .ann-title { font-size: 22px; }
  .ann p { font-size: 14px; }
  /* 2026-09-28 スマホ: カードを 0.4 倍で右端に寄せ（noir2.js）、本文列を広げる。空白を詰め、未点灯は 55% */
  .n2-live .svc { padding-right: 33vw; padding-bottom: 12vh; }
  .n2-live .svc-head { grid-column: 1; margin-bottom: 9vh; }
  .n2-live .ann, .n2-live .ann[data-move] { min-height: 0; margin-bottom: 9vh; }
  .n2-live .ann-mini { margin-bottom: 0; }
  /* 2026-10-01 r4 スマホは画面に入った事業を点灯（.is-seen・noir2.js）。未点灯の色は共通ルール */
  .n2-live .ann-head { padding-right: 16px; }
  .n2-live .ann-dot { position: absolute; right: 2px; top: 50%; margin-top: -4.5px; }

  .sec { padding: 9vh var(--pad); }
  .deck-stage { padding: 10vh var(--pad) 8vh; }
  /* 2026-09-28 MISSION カードは比率固定をやめ、内容の高さに合わせる（裏→表の返りは維持） */
  .mc { aspect-ratio: auto; }
  .mc-flip { position: relative; }
  .mc-front { position: relative; padding: 28px 24px 30px; }
  .mc h3 { font-size: 18px; }
  .mc p { font-size: 14px; }
  .words { padding: 10vh var(--pad) 9vh; }
  .company-tbl th, .company-tbl td { display: block; width: auto; border-bottom: 0; padding: 0; }
  .company-tbl th { padding-top: 16px; margin-bottom: 4px; }
  .company-tbl td { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .company-tbl tr:last-child td { border-bottom-color: rgba(198,161,91,.45); }
  .form-wrap { padding-left: 0; }
  .bizcard { --bw: 76px; position: relative; top: 0; margin-bottom: 32px; }
  .f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .thanks { padding: 64px 24px 44px; }
  .ft-inner { flex-direction: column; align-items: flex-start; }
  /* 2026-09-28 残像は2行に折って全文を画面幅に収める（切れた文字を残さない） */
  /* 2026-10-01 残像は共通ルール（文節2行・幅に合わせる）に統合 */
}

/* ---------------- 視差を減らす設定: 全停止（完成レイアウト） ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .amb-grain, .js .card-line, .js .card-line rect, .js .card-body, .js .floor, .js .tl-in, .js .hero-lead,
  .js .holo-text .orb, .js .holo-text .ni, .thanks, .is-flash .thanks::after, .is-flash .bizcard::after { animation: none !important; }
  .card-line, .spot { display: none; }
  .tcg-card { transform: none !important; }
  .tcg-inner { transform: none; }
  .orb { --lit: 1 !important; }
  .ann, .story-quote .sq-ch, .nav-links, .nav-links > a { transition: none !important; }
  .nav-links > a { opacity: 1 !important; transform: none !important; }
  .btn-gold, .btn-ghost, .nav-cta { translate: none !important; }
  .nav.is-scrolled::after { animation: none; opacity: 0; }
}