/* =========================================================
   ExitPlan — TOP  (reproduced from TOPページ.dc.html)
   ========================================================= */

:root {
  --bg: #0E0D0C;
  --bg-rgb: 14,13,12;
  --bg-1: #11100E;
  --bg-2: #131210;
  --bg-3: #161412;
  --bg-4: #141210;
  --panel: #1A1815;
  --bg-footer: #090807;
  --card: #221F1B;
  --card-rgb: 34,31,27;
  --text-inv: #F5F0E6;
  --muted-inv: #B2ABA0;
  --sub-inv: #D6D0C6;
  --accent: #B8955A;
  --accent-l: #D9BC85;
  --accent-d: #8C6A36;
  --light-bg: #F5F0E6;
  --paper: #EDE5D4;
  --text: #1A1F2B;
  --muted: #5E6472;
  --border-l: #D9CFBC;
  --border-inv: rgba(184,149,90,.28);

  /* 書体は Noto Serif JP（源ノ明朝）に統一（2026-09-25 決定）。英数字・ラベルも同じ書体 */
  --serif-ja: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --sans-ja: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --serif-en: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-line: cubic-bezier(.65,0,.35,1);
  --ease-star: cubic-bezier(.34,1.56,.64,1);

  --gutter: clamp(20px,6.5vw,96px);
  --gutter-h: clamp(20px,4vw,48px);
}

/* ---------- base ---------- */
html, body { margin: 0; background: var(--bg); -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-l); }
img { display: block; }

.ep {
  position: relative;
  color: var(--text-inv);
  font-family: var(--sans-ja);
  background: var(--bg);
  overflow-x: clip;
}

/* ハンズオン → 3つの関わり方 の接続線（ページ全体に重ねる） */
.link-svg {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 2;
}
.link-svg path {
  fill: none; stroke: #D9BC85; stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(217,188,133,.45));
}

/* ---------- shared ---------- */
.section { position: relative; overflow: clip; }
.container { position: relative; max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.glow { position: absolute; pointer-events: none; }

.stars { position: absolute; inset: 0; pointer-events: none; }
.stars--top { bottom: auto; height: 70%; }
.star { position: absolute; border-radius: 50%; background: #F5E6C4; }

.eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  font-family: var(--serif-en); font-size: 12px; letter-spacing: .32em; color: var(--accent);
}
.eyebrow__line { width: 40px; height: 1px; background: var(--accent); }
.eyebrow__ja { font-family: var(--sans-ja); letter-spacing: .2em; }
.eyebrow--service { gap: 16px 24px; }

.h2 {
  margin: clamp(20px,2.4vw,32px) 0 0;
  font-family: var(--serif-ja); font-weight: 500; line-height: 1.5; letter-spacing: .06em;
}
.gold { color: var(--accent-l); text-shadow: 0 0 3px rgba(217,188,133,.10); }

.body { font-size: 15px; line-height: 2; letter-spacing: .04em; text-wrap: pretty; }
.body p { margin: 0; }
.body p + p { margin-top: 24px; }

.btn {
  display: inline-flex; align-items: center; gap: 20px;
  min-height: 56px; padding: 0 32px;
  border: 1px solid var(--accent); border-radius: 2px;
  font-size: 15px; letter-spacing: .12em; color: var(--text-inv);
  transition: background .3s, transform .3s;
}
.btn:hover { background: rgba(184,149,90,.1); transform: translateY(-1px); color: var(--text-inv); }
.btn__arrow { font-family: var(--serif-en); font-size: 18px; line-height: 1; }

/* 進捗で点灯する工程（ハンズオン・出口戦略 共通） */
[data-step] { transition: opacity .5s; }
[data-step].is-off { opacity: .35; }
[data-dot] { transition: background .4s, box-shadow .4s; }
[data-step].is-off [data-dot] { background: var(--bg); box-shadow: none; }

/* Reveal */
[data-reveal].is-hidden { opacity: 0; transform: translateY(24px); }
[data-reveal].is-anim { transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* ---------- 0. Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(12px,2vw,24px) clamp(20px,4vw,48px);
  border-bottom: 1px solid transparent; background: transparent;
  transition: background .4s, border-color .4s;
}
.header.is-scrolled {
  background: rgba(var(--bg-rgb),.78);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: rgba(184,149,90,.28);
}
.header__logo { font-family: var(--serif-en); font-size: clamp(22px,2vw,26px); letter-spacing: .1em; }
.header__nav { display: flex; align-items: center; gap: 40px; font-size: 13px; letter-spacing: .12em; }
.header__links { display: none; }
.header__menu {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding-left: 24px; border-left: 1px solid var(--border-inv);
}
.header__menu-label { font-family: var(--serif-en); font-size: 12px; letter-spacing: .32em; }
.header__bars { display: flex; flex-direction: column; gap: 7px; }
.header__bars span { display: block; width: 24px; height: 1px; background: var(--accent-l); }

/* ---------- 1. Hero ---------- */
.hero { position: relative; min-height: var(--svh100, 100svh); display: flex; align-items: flex-end; overflow: hidden; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb),.7) 0%, rgba(var(--bg-rgb),.1) 22%, rgba(var(--bg-rgb),.35) 45%, rgba(var(--bg-rgb),.92) 68%, var(--bg) 100%);
}
.hero__inner { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 120px var(--gutter-h) clamp(96px,10vw,120px); }
.hero__body { max-width: 640px; }
.hero__title {
  margin: 28px 0 0; font-family: var(--serif-ja); font-weight: 500;
  font-size: clamp(36px,5.2vw,64px); line-height: 1.45; letter-spacing: .08em;
}
.hero__lead { margin: clamp(20px,2.4vw,32px) 0 0; font-size: clamp(15px,1.2vw,16px); line-height: 2; letter-spacing: .04em; max-width: 36em; text-wrap: pretty; }
.hero__cta { margin-top: clamp(32px,3vw,44px); }
.hero__scroll {
  position: absolute; left: var(--gutter-h); bottom: 32px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif-en); font-size: 11px; letter-spacing: .32em; color: var(--muted-inv);
}
.hero__scroll-line { width: 48px; height: 1px; background: linear-gradient(90deg, #D9BC85, transparent); }

/* ---------- 2. ハンズオン型とは ---------- */
.handson { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg-3) 72%, var(--bg) 100%); }
.handson__glow { inset: 0; background: radial-gradient(ellipse 70% 14% at 55% 72%, rgba(217,188,133,.05), transparent 70%); }
.handson__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  column-gap: clamp(32px,6vw,120px);
}
.handson__text { align-self: start; padding: clamp(80px,9vw,120px) 0 0; }
.handson__title { font-size: clamp(30px,3.4vw,46px); }
.handson__body { margin-top: clamp(28px,4vw,64px); max-width: 32em; }
.handson__figure { padding-bottom: clamp(80px,9vw,140px); }

.route { position: relative; padding: clamp(56px,16vw,300px) 0 clamp(48px,6vw,96px) 76px; }
.route__adv {
  position: absolute; left: 12px; top: 0; width: 1px;
  height: calc(clamp(56px,16vw,300px) + 18px);
  background: linear-gradient(180deg, transparent, rgba(178,171,160,.7) 30%);
  transform-origin: top;
}
.route__dash { position: absolute; left: 28px; top: 0; bottom: 0; border-left: 1px dashed rgba(217,188,133,.55); }
.route__gold {
  position: absolute; left: 44px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, #D9BC85 6%);
  box-shadow: 0 0 4px rgba(217,188,133,.27);
  transform-origin: top; will-change: transform;
}
.route__vlabel { display: none; position: absolute; top: 32px; font-size: 12px; letter-spacing: .14em; writing-mode: vertical-rl; }
.route__vlabel--owner { left: -28px; color: var(--text-inv); }
.route__vlabel--ep { left: 60px; color: var(--accent-l); }
.route__steps { display: flex; flex-direction: column; gap: clamp(56px,12vw,200px); }
.route__step { position: relative; display: flex; flex-direction: column; gap: 8px; }
.route__dot {
  position: absolute; left: -37px; top: 10px; width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--accent-l); background: var(--accent-l);
  box-shadow: 0 0 0 4px rgba(217,188,133,.12), 0 0 10px rgba(217,188,133,.6);
}
.route__head { display: flex; align-items: baseline; gap: 14px; }
.route__no { font-family: var(--serif-en); font-size: clamp(22px,2vw,26px); color: var(--accent); }
.route__name { font-family: var(--serif-ja); font-size: clamp(19px,1.5vw,21px); letter-spacing: .1em; }
.route__note { font-size: 12px; letter-spacing: .08em; color: var(--muted-inv); }

.route__legend {
  display: flex; flex-direction: column; gap: 8px; margin-left: 76px; padding-top: 16px;
  border-top: 1px solid var(--border-inv);
  font-size: 12px; letter-spacing: .08em; line-height: 1.6;
}
.route__legend > span { display: flex; align-items: center; gap: 10px; }
.route__legend i { display: block; width: 20px; flex: none; }
.route__legend-adv { color: var(--muted-inv); }
.route__legend-adv i { height: 1px; background: rgba(178,171,160,.7); }
.route__legend-owner { color: var(--text-inv); }
.route__legend-owner i { border-top: 1px dashed rgba(217,188,133,.7); }
.route__legend-ep { color: var(--accent-l); }
.route__legend-ep i { height: 2px; background: var(--accent-l); }

.handson__close {
  margin: clamp(40px,6vw,96px) 0 0 76px;
  font-family: var(--serif-ja); font-size: clamp(18px,1.4vw,20px); line-height: 2; letter-spacing: .06em;
}

/* ---------- 3. 3つの関わり方 ---------- */
.service { background: var(--bg); }
.service__bg {
  position: absolute; left: -10%; top: -10%; width: 120%; height: 120%;
  object-fit: cover; object-position: 50% 20%;
  filter: blur(60px) grayscale(.8) sepia(.35) saturate(.9) brightness(.27);
  opacity: .4;
}
.service__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(var(--bg-rgb),.2) 22%, rgba(var(--bg-rgb),.3) 70%, var(--bg) 100%),
    radial-gradient(ellipse 60% 22% at 50% 60%, rgba(217,188,133,.035), transparent 70%);
}
.service__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: clamp(80px,9vw,120px) clamp(20px,6.5vw,90px) clamp(80px,9vw,120px); }
.service__title { margin-top: 20px; font-size: clamp(30px,2.6vw,36px); }

.branch { display: none; width: 100%; height: 120px; margin-top: 24px; overflow: visible; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px,3vw,48px); margin-top: clamp(32px,3vw,40px);
}
.card {
  min-height: 460px; background: var(--card);
  border: 1px solid rgba(217,188,133,.55);
  outline: 1px solid rgba(184,149,90,.25); outline-offset: -10px;
  border-radius: 4px; padding: 32px 32px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center; color: var(--text-inv);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  transition: transform .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-12px); box-shadow: 0 0 0 1px #D9BC85, 0 40px 60px -30px rgba(0,0,0,.8); color: var(--text-inv); }
.card__no { align-self: flex-start; font-family: var(--serif-en); font-size: 22px; color: var(--accent); }
.sigil { position: relative; width: 110px; height: 110px; margin-top: 4px; }
.sigil > span { position: absolute; }
.sigil__ring { inset: 0; border-radius: 50%; border: 1px solid rgba(217,188,133,.6); }
.sigil__dash { inset: 16px; border-radius: 50%; border: 1px dashed rgba(217,188,133,.4); }
.sigil__sq { left: 37px; top: 37px; width: 36px; height: 36px; border: 1px solid #D9BC85; transform: rotate(45deg); box-shadow: 0 0 5px rgba(217,188,133,.23); }
.sigil__pill { left: 46px; top: 20px; width: 18px; height: 70px; border: 1px solid #D9BC85; border-radius: 9px; box-shadow: 0 0 5px rgba(217,188,133,.23); }
.sigil__c1 { left: 28px; top: 40px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #D9BC85; }
.sigil__c2 { left: 58px; top: 40px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #D9BC85; box-shadow: 0 0 5px rgba(217,188,133,.23); }
.card__name { font-family: var(--serif-ja); font-size: 26px; letter-spacing: .1em; margin-top: 6px; }
.card__kw { font-size: 12px; letter-spacing: .08em; color: var(--muted-inv); }
.card__text { font-size: 14px; line-height: 1.9; letter-spacing: .04em; flex: 1; }
.card__more {
  align-self: stretch; display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px; border-top: 1px solid rgba(184,149,90,.3);
  font-size: 13px; letter-spacing: .12em; color: var(--accent-l);
}
.card__circle {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif-en); font-size: 16px;
}
.service__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 48px;
  margin-top: clamp(48px,6vw,80px); padding-top: 32px; border-top: 1px solid var(--border-inv);
}
.service__note { margin: 0; font-size: 15px; line-height: 2; letter-spacing: .04em; color: var(--muted-inv); }
.service__note strong { font-weight: 500; color: var(--text-inv); }

/* ---------- 4. 事業の広がり ---------- */
.cluster { background: var(--bg); }
.cluster__glow { inset: 0; background: radial-gradient(ellipse 45% 40% at 50% 66%, rgba(217,188,133,.035), transparent 70%); }
.cluster__inner { padding-top: clamp(96px,11vw,160px); padding-bottom: clamp(96px,11vw,160px); }
.cluster__top {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(28px,5vw,96px); align-items: end;
}
.cluster__title { font-size: clamp(28px,3vw,42px); line-height: 1.55; }
.cluster__body { display: flex; flex-direction: column; gap: 24px; max-width: 34em; }
.cluster__body p + p { margin-top: 0; }

.net { position: relative; width: 100%; max-width: 1200px; margin: clamp(56px,7vw,96px) auto 0; aspect-ratio: 160 / 100; }
.net__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net__center { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.net__center > span { position: absolute; }
.net__center-ring { left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(217,188,133,.6); background: var(--bg); }
.net__center-dash { left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 1px dashed rgba(217,188,133,.4); }
.net__center-dot { left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-l); box-shadow: 0 0 12px rgba(217,188,133,.7); }
.net__center-label {
  left: 0; top: 40px; transform: translateX(-50%);
  font-family: var(--serif-en); font-size: clamp(18px,1.6vw,22px); letter-spacing: .1em; color: var(--accent-l);
  white-space: nowrap; text-shadow: 0 0 8px var(--bg), 0 0 8px var(--bg);
}
.net__node, .net__leaf { position: absolute; width: 0; height: 0; }
.net__node > span, .net__leaf > span { position: absolute; }
.net__node-ring { left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(217,188,133,.7); background: var(--bg); }
.net__node-dot { left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-l); box-shadow: 0 0 8px rgba(217,188,133,.7); }
.net__label {
  left: 0; top: 0; display: flex; flex-direction: column; align-items: center;
  font-family: var(--serif-ja); font-size: clamp(14px,1.2vw,16px); line-height: 1.45; letter-spacing: .08em;
  white-space: nowrap; text-align: center;
  text-shadow: 0 0 8px var(--bg), 0 0 8px var(--bg), 0 0 4px var(--bg);
}
.net__leaf-dot { left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-l); box-shadow: 0 0 5px rgba(217,188,133,.6); }

/* ---------- 5. 私たちの現在地 ---------- */
.record { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-1) 50%, var(--bg) 100%); }
.record__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: clamp(80px,9vw,120px) 0 clamp(96px,11vw,160px); }
.record__pad { padding: 0 var(--gutter); }
.stats { display: flex; flex-wrap: wrap; gap: clamp(40px,8vw,160px); margin-top: clamp(40px,5vw,72px); }
.stat { display: flex; align-items: center; gap: clamp(20px,2.4vw,32px); }
.stat__ring { position: relative; width: clamp(120px,13vw,180px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.stat__ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(217,188,133,.35); }
.stat__ring::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed rgba(217,188,133,.3); }
.stat__num { display: flex; align-items: baseline; gap: 4px; font-family: var(--serif-en); font-variant-numeric: lining-nums tabular-nums; color: var(--text-inv); }
.stat__val { font-size: clamp(56px,6.4vw,92px); line-height: 1; }
.stat__unit { font-family: var(--serif-ja); font-size: clamp(18px,1.6vw,22px); color: var(--accent-l); }
.stat__label { font-size: 15px; letter-spacing: .1em; }
.record__note { margin: 28px 0 0; font-size: 13px; line-height: 1.8; letter-spacing: .04em; color: var(--muted-inv); }
.record__sub {
  margin: clamp(72px,9vw,120px) 0 0; display: flex; align-items: center; gap: 16px;
  font-family: var(--serif-ja); font-weight: 500; font-size: 20px; letter-spacing: .08em;
}
.record__sub-line { width: 40px; height: 1px; background: var(--accent); }

.tabs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: clamp(8px,1.6vw,24px); margin-top: clamp(28px,3vw,40px);
}
.tab {
  position: relative; margin: 0; min-height: clamp(240px,21vw,300px);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px;
  padding: clamp(28px,3vw,40px) 8px 18px;
  background: radial-gradient(ellipse 90% 60% at 50% 105%, rgba(217,188,133,.13), rgba(var(--card-rgb),.55) 70%);
  border: 1px solid rgba(217,188,133,.5);
  outline: 1px solid rgba(184,149,90,.22); outline-offset: -8px;
  border-radius: 999px 999px 4px 4px;
  color: var(--text-inv); cursor: pointer; font: inherit; -webkit-appearance: none; appearance: none;
  box-shadow: 0 24px 48px -28px rgba(0,0,0,.8);
  transition: transform .4s var(--ease), box-shadow .4s, color .3s;
}
.tab:hover {
  transform: translateY(-6px); color: var(--accent-l);
  box-shadow: 0 0 0 1px #D9BC85, inset 0 -30px 60px -30px rgba(217,188,133,.25), 0 30px 50px -28px rgba(0,0,0,.8);
}
.tab:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-l); }
.tab.is-selected::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  border: 1px solid var(--accent-l); border-radius: 999px 999px 4px 4px;
  box-shadow: 0 0 14px rgba(217,188,133,.35), inset 0 -40px 60px -30px rgba(217,188,133,.3);
}
.tab.is-selected::after {
  content: ""; position: absolute; left: 50%; bottom: -13px; width: 12px; height: 12px; margin-left: -6px;
  transform: rotate(45deg); border-right: 1px solid var(--accent-l); border-bottom: 1px solid var(--accent-l);
  background: var(--panel);
}
.tab__no { font-family: var(--serif-en); font-size: 18px; color: var(--accent); }
.tab__name { writing-mode: vertical-rl; font-family: var(--serif-ja); font-size: clamp(18px,1.5vw,20px); line-height: 1.5; letter-spacing: .16em; white-space: nowrap; }
.tab__plus {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(184,149,90,.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: var(--accent-l);
  transform: rotate(0deg); transition: transform .4s var(--ease);
}
.tab.is-selected .tab__plus { transform: rotate(45deg); }

.panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.panel.is-open { grid-template-rows: 1fr; }
.panel__clip { overflow: hidden; min-height: 0; }
.panel__inner {
  margin-top: 20px;
  border: 1px solid rgba(217,188,133,.45); outline: 1px solid rgba(184,149,90,.18); outline-offset: -8px;
  border-radius: 4px; background: linear-gradient(180deg, var(--panel), var(--bg-4));
  padding: clamp(28px,4vw,48px) clamp(24px,4vw,56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px 64px; align-items: center;
  opacity: 0; transform: translateY(-12px);
  transition: opacity .45s .12s, transform .6s var(--ease);
}
.panel.is-open .panel__inner { opacity: 1; transform: translateY(0); }
.panel__head { display: flex; flex-direction: column; gap: 10px; }
.panel__domain { font-family: var(--serif-en); font-size: 12px; letter-spacing: .32em; color: var(--accent); }
.panel__title { margin: 0; font-family: var(--serif-ja); font-weight: 500; font-size: clamp(24px,2.2vw,30px); letter-spacing: .08em; }
.panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.panel__item {
  display: flex; align-items: center; gap: 14px; min-height: 48px;
  font-size: 15px; letter-spacing: .06em; border-bottom: 1px solid rgba(184,149,90,.16);
}
.panel__item::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-l); box-shadow: 0 0 6px rgba(217,188,133,.6); }

/* ---------- 6. 出口戦略とは ---------- */
.reverse { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-1) 40%, var(--bg-4) 90%, var(--bg) 100%); }
.reverse__glow { left: 0; right: 0; top: 0; height: 45%; background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(217,188,133,.05), transparent 70%); }
.reverse__inner { padding-top: clamp(96px,11vw,160px); padding-bottom: clamp(96px,11vw,160px); }
.reverse__wrap { max-width: 1000px; margin: clamp(48px,6vw,80px) auto 0; }
.reverse__end { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reverse__end-label { font-family: var(--serif-ja); font-size: clamp(20px,1.8vw,24px); letter-spacing: .14em; }
.reverse__end--top .reverse__end-label { color: var(--accent-l); }
.reverse__hline {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, #B8955A 20%, #D9BC85 50%, #B8955A 80%, transparent);
  box-shadow: 0 0 12px rgba(217,188,133,.4);
}
.reverse__short { width: 56px; height: 1px; background: var(--accent); }

.rroute { position: relative; padding: clamp(72px,8vw,104px) 0; }
.rroute__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rroute__svg [data-cfg] { filter: drop-shadow(0 0 3px rgba(217,188,133,.55)); }
.rroute__steps { display: flex; flex-direction: column; gap: clamp(56px,7vw,96px); }
.rstep {
  position: relative; padding-left: 34px; display: flex; flex-direction: column; gap: 8px;
  margin-left: var(--ml); max-width: min(380px, calc(100% - var(--ml)));
}
.rstep:nth-child(1) { --ml: 0%; }
.rstep:nth-child(2) { --ml: 34%; }
.rstep:nth-child(3) { --ml: 6%; }
.rstep:nth-child(4) { --ml: 38%; }
.rstep:nth-child(5) { --ml: 14%; }
.rstep__halo { position: absolute; left: -6px; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(217,188,133,.3); }
.rstep__dot {
  position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--accent-l); background: var(--accent-l);
  box-shadow: 0 0 0 4px rgba(217,188,133,.12), 0 0 10px rgba(217,188,133,.6);
}
.rstep__tag { display: flex; align-items: baseline; gap: 10px; font-size: 12px; letter-spacing: .14em; color: var(--accent); }
.rstep__no { font-family: var(--serif-en); font-size: 22px; line-height: 1; }
.rstep__title { font-family: var(--serif-ja); font-size: clamp(20px,1.7vw,24px); letter-spacing: .08em; text-shadow: 0 0 10px var(--bg); }
.rstep__text { font-size: 15px; line-height: 2; letter-spacing: .04em; color: var(--sub-inv); text-shadow: 0 0 10px var(--bg); }
.reverse__close {
  max-width: 40em; margin: clamp(64px,8vw,112px) auto 0; text-align: center;
  font-family: var(--serif-ja); font-size: clamp(17px,1.4vw,20px); line-height: 2.1; letter-spacing: .06em; text-wrap: pretty;
}

/* ---------- 7. 代表挨拶（淡色） ---------- */
.letter { position: relative; background: var(--light-bg); color: var(--text); }
.letter__wave { display: block; width: 100%; height: clamp(24px,3.4vw,48px); }
.letter__wave path { fill: var(--bg); }
.letter__grid {
  max-width: 1440px; margin: 0 auto;
  padding: clamp(72px,9vw,136px) var(--gutter) clamp(96px,11vw,160px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(56px,7vw,112px); align-items: center;
}
.letter .eyebrow { color: var(--accent-d); }
.letter__title { font-size: clamp(26px,2.8vw,38px); line-height: 1.65; }
.letter__body { margin: clamp(28px,3vw,44px) 0 0; max-width: 34em; font-size: 15px; line-height: 2; letter-spacing: .04em; color: var(--text); text-wrap: pretty; }
.letter-card {
  justify-self: center; width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 28px;
  background: var(--paper); border: 1px solid var(--border-l); border-radius: 2px;
  padding: clamp(28px,3.4vw,44px); color: var(--text);
  box-shadow: 0 1px 0 rgba(26,31,43,.04), 0 24px 48px -20px rgba(15,27,45,.28);
  transform: rotate(-2deg);
  transition: transform .5s var(--ease), box-shadow .5s;
}
.letter-card:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 1px 0 rgba(26,31,43,.04), 0 32px 56px -20px rgba(15,27,45,.34);
  color: var(--text);
}
.letter-card.is-hidden { transform: rotate(-2deg) translateY(24px); }
.letter-card.is-anim { transition: box-shadow .5s, opacity .9s var(--ease), transform .9s var(--ease); }
.letter-card__from { font-family: var(--serif-en); font-size: 11px; letter-spacing: .32em; color: var(--accent-d); }
.letter-card__text { font-family: var(--serif-ja); font-size: clamp(16px,1.3vw,18px); line-height: 2.1; letter-spacing: .06em; }
.letter-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 20px; border-top: 1px solid var(--border-l);
  font-size: 13px; letter-spacing: .12em; color: var(--muted);
}
.seal {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--accent-d);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif-en); font-size: 15px; color: var(--accent-d);
  box-shadow: inset 0 0 0 3px #EDE5D4, inset 0 0 0 4px rgba(140,106,54,.5);
}

/* ---------- 8. お問い合わせ ---------- */
.contact { background: var(--bg); }
.contact__glow { inset: 0; background: radial-gradient(ellipse 50% 40% at 50% 100%, rgba(217,188,133,.05), transparent 70%); }
.contact__inner {
  position: relative; max-width: 880px; margin: 0 auto;
  padding: clamp(112px,12vw,176px) clamp(20px,5vw,48px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.contact__eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--serif-en); font-size: 12px; letter-spacing: .32em; color: var(--accent); }
.contact__title { margin-top: clamp(24px,2.6vw,36px); font-size: clamp(28px,3.2vw,44px); line-height: 1.55; }
.contact__body { margin: clamp(24px,2.6vw,36px) 0 0; max-width: 36em; }
.contact__cta { margin-top: clamp(40px,4vw,56px); min-height: 64px; padding: 0 32px 0 12px; }
.seal--dark {
  width: 44px; height: 44px; font-size: 14px;
  border-color: var(--accent-l); color: var(--accent-l);
  box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px rgba(217,188,133,.45);
}

/* ---------- 9. Footer ---------- */
.footer { position: relative; background: var(--bg-footer); overflow: hidden; }
.footer__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #B8955A 20%, #D9BC85 50%, #B8955A 80%, transparent); }
.footer__glow { position: absolute; left: 0; right: 0; top: 0; height: 160px; background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(217,188,133,.05), transparent 70%); }
.footer__inner {
  position: relative; max-width: 1440px; margin: 0 auto;
  padding: clamp(64px,7vw,96px) var(--gutter) 40px;
  display: flex; flex-direction: column; gap: clamp(40px,5vw,64px);
}
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.footer__logo { font-family: var(--serif-en); font-size: clamp(48px,7vw,96px); line-height: 1; letter-spacing: .06em; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 13px; letter-spacing: .12em; }
.footer__nav a { min-height: 44px; display: flex; align-items: center; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  padding-top: 24px; border-top: 1px solid var(--border-inv);
  font-size: 12px; letter-spacing: .1em; color: var(--muted-inv);
}
.footer__copy { font-family: var(--serif-en); font-size: 13px; letter-spacing: .14em; }

/* =========================================================
   wide (PC) — window.innerWidth >= 1024
   ========================================================= */
@media (min-width: 1024px) {
  .header__links { display: contents; }

  .hero { align-items: center; }
  .hero__overlay {
    background:
      linear-gradient(90deg, rgba(var(--bg-rgb),.92) 0%, rgba(var(--bg-rgb),.62) 40%, rgba(var(--bg-rgb),.1) 68%),
      linear-gradient(180deg, rgba(var(--bg-rgb),.5) 0%, rgba(var(--bg-rgb),0) 20%, rgba(var(--bg-rgb),0) 72%, var(--bg) 100%);
  }

  .handson__text { position: sticky; top: 120px; }
  .route__vlabel { display: block; }
  .route__legend { display: none; }

  .branch { display: block; }

  .rstep:nth-child(1) { --ml: 4%; }
  .rstep:nth-child(2) { --ml: 56%; }
  .rstep:nth-child(3) { --ml: 18%; }
  .rstep:nth-child(4) { --ml: 62%; }
  .rstep:nth-child(5) { --ml: 30%; }
}

/* =========================================================
   共通: ヘッダーの現在地 / MENU ボタン / 全画面メニュー
   ========================================================= */
.header__links a { position: relative; }
.header__links a[aria-current="page"] { color: var(--accent-l); }
.header__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--accent); }
.header__menu {
  background: none; border: 0; border-left: 1px solid var(--border-inv); border-radius: 0;
  color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; padding-top: 0; padding-bottom: 0;
  -webkit-appearance: none; appearance: none;
}
.header__menu:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 3px; }

html.menu-open { overflow: hidden; }
.menu {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(80px,10vw,120px) var(--gutter) 64px;
  background: rgba(var(--bg-rgb), .94);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s .5s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.menu__ringwrap {
  position: absolute; left: 50%; top: 50%; width: 120vmin; height: 120vmin;
  transform: translate(-50%, -50%); opacity: .18; pointer-events: none;
}
.menu__ring { display: block; width: 100%; height: 100%; animation: menu-spin 120s linear infinite; }
@keyframes menu-spin { to { transform: rotate(360deg); } }
.menu__close {
  position: absolute; top: clamp(12px,2vw,24px); right: clamp(20px,4vw,48px);
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 0;
}
.menu__close span { position: absolute; left: 10px; top: 21px; width: 24px; height: 1px; background: var(--accent-l); transform: rotate(45deg); }
.menu__close span + span { transform: rotate(-45deg); }
.menu__close:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 3px; }
.menu__inner { position: relative; max-width: 1440px; width: 100%; margin: 0 auto; }
.menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(8px,1.4vw,16px); }
.menu__list a {
  display: inline-flex; align-items: baseline; gap: 18px; min-height: 44px;
  font-family: var(--serif-ja); font-size: clamp(26px,3.4vw,44px); letter-spacing: .08em; color: var(--text-inv);
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.menu.is-open .menu__list a { opacity: 1; transform: none; }
.menu__list li:nth-child(1) a { transition-delay: .06s; } .menu__list li:nth-child(2) a { transition-delay: .12s; }
.menu__list li:nth-child(3) a { transition-delay: .18s; } .menu__list li:nth-child(4) a { transition-delay: .24s; }
.menu__list li:nth-child(5) a { transition-delay: .30s; }
.menu__list a[aria-current="page"] { color: var(--accent-l); }
.menu__no { font-family: var(--serif-en); font-size: 14px; letter-spacing: .2em; color: var(--accent); }
.menu__note { margin: clamp(32px,4vw,56px) 0 0; font-family: var(--serif-en); font-size: 12px; letter-spacing: .24em; color: var(--muted-inv); line-height: 2; }
.menu__note span { display: block; font-family: var(--sans-ja); letter-spacing: .16em; }
@media (min-width: 1024px) {
  .menu__ringwrap { left: auto; right: -8vmin; width: min(84vmin, 760px); height: min(84vmin, 760px); transform: translateY(-50%); opacity: .3; }
}

/* =========================================================
   Hero: 動画 → 最後の場面（静止画）へ（EP-site-redesign-ver2 の草案を移植）
   3層とも同じ object-fit / object-position で重ねる。SP はミミズクと手紙が収まる位置に寄せる
   ========================================================= */
.hero__stage { position: absolute; inset: 0; transform-origin: 45% 50%; will-change: transform; }
.hero__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; display: block; }
.hero__layer--video { background: transparent; }
.hero__layer--end { opacity: 0; transition: opacity .7s ease; }
.hero.is-arrived .hero__layer--end { opacity: 1; }
.hero.is-arrived .hero__layer--video { visibility: hidden; transition: visibility 0s .8s; }
@media (min-width: 1024px) {
  .hero__stage { transform-origin: 62% 45%; }
  .hero__layer { object-position: 62% 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__layer--end { transition: none; }
}

/* =========================================================
   3つの関わり方: 支給されたカード枠（assets/cards/card-0N.svg, 700×1200）を背景に敷き、文字だけ重ねる
   位置は枠の座標系（700×1200）に対する割合。文字サイズは cqw でカード幅に比例させる
   ========================================================= */
.card--frame {
  container-type: inline-size;
  position: relative; display: block; aspect-ratio: 7 / 12; min-height: 0; padding: 0;
  background: url(/assets/cards/card-01.svg) center / 100% 100% no-repeat;
  border: 0; outline: 0; border-radius: 0;
  box-shadow: none; filter: drop-shadow(0 24px 24px rgba(0,0,0,.55));
  color: var(--text-inv); text-align: center;
  transition: transform .3s, box-shadow .3s, filter .3s;
}
.card--frame.card--02 { background-image: url(/assets/cards/card-02.svg); }
.card--frame.card--03 { background-image: url(/assets/cards/card-03.svg); }
.card--frame:hover { transform: translateY(-12px); box-shadow: none; filter: drop-shadow(0 24px 24px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(217,188,133,.22)); color: var(--text-inv); }
.card--frame[aria-current="page"] { outline: 0; box-shadow: none; filter: drop-shadow(0 24px 24px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(217,188,133,.28)); }
.card--frame .card__no { position: absolute; left: 13.7%; top: 7.7%; margin: 0; align-self: auto; font-family: var(--serif-en); font-size: 5.7cqw; line-height: 1; color: #C3A468; }
.card--frame .card__body { position: absolute; left: 15.7%; right: 15.7%; top: 42.5%; height: 34%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.4cqw; }
.card--frame .card__name { margin: 0; font-size: 6.6cqw; line-height: 1.4; letter-spacing: .1em; }
.card--frame .card__kw { font-size: 3.1cqw; letter-spacing: .08em; color: var(--muted-inv); }
.card--frame .card__text { flex: none; font-size: 3.6cqw; line-height: 1.9; letter-spacing: .04em; }
.card--frame .card__more { position: absolute; left: 15.7%; top: 82.6%; margin: 0; padding: 0; border: 0; display: block; align-self: auto; font-size: 3.86cqw; line-height: 1; letter-spacing: .15em; font-weight: 500; color: #C3A468; }

/* ヒーロー: 代表挨拶への導線（現行サイトと同じ文言） */
.hero__note { display: flex; align-items: center; gap: 16px; margin-top: clamp(28px,3vw,40px); max-width: 30em; color: var(--text-inv); }
.hero__note:hover { color: var(--text-inv); }
.hero__note:hover .hero__note-text { color: var(--text-inv); }
.hero__note-seal { flex: none; }
.hero__note-body { display: flex; flex-direction: column; gap: 4px; }
.hero__note-label { font-size: 12px; letter-spacing: .2em; color: var(--accent-l); }
.hero__note-text { font-family: var(--serif-ja); font-size: 14px; line-height: 1.9; letter-spacing: .05em; color: var(--sub-inv); transition: color .3s; }

/* ハンズオン: 助言まで / 実行まで の比較表 */
.compare { width: calc(100% - 76px); margin: clamp(32px,4vw,48px) 0 0 76px; border-collapse: collapse; font-size: 14px; line-height: 1.8; letter-spacing: .04em; }
.compare th, .compare td { padding: 14px 12px; border-bottom: 1px solid var(--border-inv); text-align: left; vertical-align: top; font-weight: 400; }
.compare thead th { font-size: 12px; letter-spacing: .1em; color: var(--muted-inv); border-bottom-color: rgba(184,149,90,.45); }
.compare tbody th { color: var(--muted-inv); white-space: nowrap; font-size: 13px; }
.compare td { color: var(--sub-inv); }
.compare .compare__ep { color: var(--text-inv); }
.compare thead .compare__ep { color: var(--accent-l); }
@media (max-width: 1023.98px) {
  .compare { display: block; width: auto; margin-left: 76px; }
  .compare thead, .compare tbody { display: block; }
  .compare tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; border-bottom: 1px solid var(--border-inv); padding: 12px 0; }
  .compare th, .compare td { display: block; padding: 0; border: 0; font-size: 13px; }
  .compare thead th:first-child { display: none; }
  .compare tbody th { grid-column: 1 / -1; margin-bottom: 6px; white-space: normal; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.header__menu { gap: 0; }

/* ロゴ（現行サイトのマーク＋文字をそのまま移植） */
.header__logo { display: flex; align-items: center; gap: 9px; color: var(--text-inv); }
.header__logo:hover { color: var(--text-inv); }
.header__logo svg { display: block; width: auto; }
.logo__mark { height: 20px; }
.logo__word { height: 15px; }
.footer__logo { display: block; color: var(--text-inv); }
.footer__logo:hover { color: var(--accent-l); }
.footer__mark { display: block; height: clamp(40px,5vw,60px); width: auto; }

/* =========================================================
   フッター（現行と同じ構成: 左にナビ、右にロゴとコピーライト）
   ========================================================= */
.footer__inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px 48px; }
.footer__nav { gap: 10px 28px; }
.footer__sig { display: flex; flex-direction: column; align-items: center; gap: clamp(12px,1.6vw,18px); }
.footer__copy { font-size: 12.5px; letter-spacing: .16em; color: var(--muted-inv); }
@media (max-width: 639.98px) { .footer__inner { flex-direction: column; } .footer__sig { align-self: flex-end; } }

/* =========================================================
   ボタン: 支給の枠 assets/button.svg（440×112、右端に矢印入り）を敷く
   ========================================================= */
.btn {
  position: relative; 
  width: 300px; max-width: 100%; aspect-ratio: 440 / 112; min-height: 0; height: auto;
  padding: 0 66px 0 24px; justify-content: center; border: 0; border-radius: 0;
  background: url(/assets/button.svg) center / 100% 100% no-repeat;
  color: var(--text-inv); font-size: 15px; letter-spacing: .12em;
  transition: transform .3s var(--ease), filter .3s;
}
.btn:hover { background: url(/assets/button.svg) center / 100% 100% no-repeat; transform: translateY(-2px); filter: drop-shadow(0 0 10px rgba(217,188,133,.28)); color: var(--text-inv); }
.btn:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 4px; }
.btn--light, .btn--light:hover { color: var(--text-inv); }
.contact__cta { min-height: 0; padding: 0 66px 0 24px; justify-content: center; }
.form__submit .btn { min-height: 0; padding: 0 66px 0 24px; justify-content: center; background: url(/assets/button.svg) center / 100% 100% no-repeat; }
.form__submit .btn:disabled { background: url(/assets/button.svg) center / 100% 100% no-repeat; }

/* =========================================================
   経済圏の図（支給 SVG を差し込み、表示時に線が描かれ星が灯る）
   ========================================================= */
.net-art { position: relative; width: 100%; max-width: 1100px; margin: clamp(56px,7vw,96px) auto 0; }
.net-art__svg { display: block; width: 100%; height: auto; overflow: visible; }
.net-art__svg text { font-family: var(--serif-ja); }
.cluster .net-art path { stroke-dasharray: 1; stroke-dashoffset: 0; }   /* 10/3: トップだけに（サービス概要の図は SVG の破線をそのまま見せる） */
.net-art.is-armed path { stroke-dashoffset: 1; }
.net-art.is-armed #dots, .net-art.is-armed #hubs, .net-art.is-armed #center-ep, .net-art.is-armed #labels { opacity: 0; }
.net-art.is-on path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1); }
.net-art.is-on #hub-links path { transition-delay: .2s; }
.net-art.is-on #threads path, .net-art.is-on #long-links path { transition-delay: .6s; }
.net-art.is-on #mesh path, .net-art.is-on #dendrites path, .net-art.is-on #axons path { transition-delay: .9s; transition-duration: 2.2s; }
.net-art.is-on #center-ep { opacity: 1; transition: opacity .8s var(--ease-star); }
.net-art.is-on #hubs { opacity: 1; transition: opacity .8s var(--ease-star) .7s; }
.net-art.is-on #labels { opacity: 1; transition: opacity .8s var(--ease) 1.1s; }
.net-art.is-on #dots { opacity: 1; transition: opacity 1.4s var(--ease) 1.4s; }
@media (max-width: 639.98px) { .net-art__svg #labels text { font-size: 38px; } }

/* スキーム図の文字も採用書体で */
.scheme__svg text { font-family: var(--serif-ja); }

/* 事業の広がり: 現行サイトと同じく 左に文章・右に図 */
.cluster__grid { display: grid; gap: clamp(40px,6vw,64px); align-items: center; }
.cluster__text { display: flex; flex-direction: column; gap: clamp(28px,3vw,40px); }
.cluster__grid .net-art { margin: 0; max-width: none; }
@media (min-width: 1024px) {
  .cluster__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px,5vw,80px); }
}

/* =========================================================
   ヒーロー: 手紙とペンの目印（ゲームのチュートリアルのヒント風）
   静止画に着いてから順に現れる。二重の輪が脈打ち、上に「TAP」の吹き出しが浮かぶ
   ========================================================= */
.hero__spots { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform-origin: 45% 50%; will-change: transform; }
@media (min-width: 1024px) { .hero__spots { transform-origin: 62% 45%; } }
.spot { position: absolute; display: block; pointer-events: auto; border-radius: 50%; color: var(--text-inv); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
.hero.is-arrived .spot { opacity: 1; visibility: visible; transition: opacity .8s var(--ease) .5s; }
.hero.is-arrived .spot--pen { transition-delay: 1.1s; }
.spot.is-blocked { display: none; }
.spot:hover, .spot:focus-visible { color: var(--text-inv); outline: none; }
/* 対象を囲む輪（楕円） */
.spot__ring { position: absolute; inset: -18% -8%; border-radius: 50%; border: 1px solid rgba(217,188,133,.75); box-shadow: 0 0 18px rgba(217,188,133,.35), inset 0 0 18px rgba(217,188,133,.18); animation: spot-pulse 2.4s var(--ease) infinite; }
.spot__ring--2 { animation-delay: 1.2s; }
@keyframes spot-pulse { 0% { transform: scale(.85); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.spot::before { content: ""; position: absolute; inset: -14% -4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(233,205,150,.28), rgba(233,205,150,0)); opacity: .6; transition: opacity .3s; }
.spot:hover::before, .spot:focus-visible::before { opacity: 1; }
/* 吹き出し */
.spot__hint { position: absolute; left: 50%; bottom: calc(100% + 26px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 12px 8px 8px; border: 1px solid rgba(217,188,133,.6); border-radius: 2px; background: rgba(14,13,12,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13px; letter-spacing: .1em; box-shadow: 0 8px 24px -8px rgba(0,0,0,.7); animation: spot-bob 2.4s ease-in-out infinite; transition: border-color .3s, background .3s; }
.spot__hint::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin: -5px 0 0 -5px; transform: rotate(45deg); border-right: 1px solid rgba(217,188,133,.6); border-bottom: 1px solid rgba(217,188,133,.6); background: rgba(14,13,12,.82); }
@keyframes spot-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }
.spot__key { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 20px; padding: 0 6px; border: 1px solid var(--accent-l); border-radius: 2px; font-size: 10px; letter-spacing: .14em; color: var(--accent-l); box-shadow: inset 0 -2px 0 rgba(217,188,133,.35); }
.spot__txt { color: var(--text-inv); }
.spot__to { color: var(--accent-l); font-size: 11px; letter-spacing: .08em; }
.spot__to::before { content: "→ "; }
.spot:hover .spot__hint, .spot:focus-visible .spot__hint { border-color: var(--accent-l); background: rgba(30,26,20,.92); }
.spot:focus-visible .spot__ring { border-color: var(--accent-l); border-width: 2px; }
@media (prefers-reduced-motion: reduce) { .spot__ring, .spot__hint { animation: none; } .spot__ring--2 { display: none; } .spot__ring { opacity: 1; } }

/* 出口戦略: 曲線は本文の後ろを通す。文字の周りに背景色の下地をぼかして敷き、線が文字にかからないようにする */
.rstep { z-index: 1; }
.rstep__tag, .rstep__title, .rstep__text {
  position: relative; align-self: flex-start;
  background: rgba(var(--bg-rgb), .94);
  box-shadow: 0 0 10px 8px rgba(var(--bg-rgb), .94);
  border-radius: 6px;
}
/* ペンの吹き出しは下側に出す（左の本文に重ならないように） */
.spot--pen .spot__hint { bottom: auto; top: calc(100% + 22px); }
.spot--pen .spot__hint::after { top: auto; bottom: 100%; margin: 0 0 -5px -5px; transform: rotate(-135deg); }

/* =========================================================
   ハンズオン比較図: 「助言まで」と「ハンズオン」を横並びで同時に見せる
   左は ExitPlan の線が 01 で止まり、右は 03 まで伸びて「3つの関わり方」へつながる
   ========================================================= */
.hx { margin-top: clamp(40px,6vw,96px); }
.hx__legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 12px; letter-spacing: .08em; color: var(--muted-inv); }
.hx__lg { display: inline-flex; align-items: center; gap: 10px; }
.hx__lg i { display: block; width: 22px; }
.hx__lg--owner i { border-top: 1px dashed rgba(217,188,133,.7); }
.hx__lg--ep { color: var(--accent-l); }
.hx__lg--ep i { height: 2px; background: var(--accent-l); }
.hx__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px,3vw,40px); margin-top: clamp(20px,2.4vw,32px); }
.hx__col { position: relative; padding: clamp(16px,2vw,24px) clamp(12px,1.6vw,20px) 0; border-top: 1px solid var(--border-inv); }
.hx__col--ho { border-top-color: rgba(217,188,133,.6); background: linear-gradient(180deg, rgba(217,188,133,.06), transparent 60%); }
.hx__title { margin: 0; min-height: 3.4em; font-family: var(--serif-ja); font-size: clamp(13px,1.2vw,15px); line-height: 1.7; letter-spacing: .06em; color: var(--muted-inv); }
.hx__title--ho { color: var(--accent-l); }
.hx__route { position: relative; padding: clamp(28px,4vw,48px) 0 clamp(48px,6vw,80px) clamp(40px,4vw,56px); }
.hx__owner { position: absolute; left: 8px; top: 0; bottom: 0; border-left: 1px dashed rgba(217,188,133,.55); }
.hx__ep { position: absolute; left: 22px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, #D9BC85 6%); box-shadow: 0 0 4px rgba(217,188,133,.27); transform-origin: top; will-change: transform; }
.hx__ep--short { bottom: auto; height: calc(clamp(28px,4vw,48px) + 18px); background: linear-gradient(180deg, transparent, #D9BC85 20%); }
.hx__ep--short::after { content: ""; position: absolute; left: -4px; bottom: -1px; width: 10px; height: 1px; background: var(--accent-l); }
.hx__steps { display: flex; flex-direction: column; gap: clamp(40px,6vw,88px); }
.hx__step { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; transition: opacity .5s; }
.hx__dot { position: absolute; left: calc(-1 * clamp(40px,4vw,56px) + 17px); top: 8px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--accent-l); background: var(--accent-l); box-shadow: 0 0 0 4px rgba(217,188,133,.12), 0 0 10px rgba(217,188,133,.6); transition: background .4s, box-shadow .4s; }
.hx__no { font-family: var(--serif-en); font-size: clamp(18px,1.8vw,24px); color: var(--accent); line-height: 1.2; }
.hx__name { font-family: var(--serif-ja); font-size: clamp(14px,1.4vw,19px); letter-spacing: .06em; line-height: 1.5; }
/* 助言まで: 02・03 は ExitPlan が関わらない（点は経営者の線上に空洞で置く） */
.hx__step.is-out { opacity: .38; }
.hx__step.is-out .hx__dot { left: calc(-1 * clamp(40px,4vw,56px) + 3px); background: var(--bg); border-color: rgba(217,188,133,.6); box-shadow: none; }
[data-step].is-off .hx__dot { background: var(--bg); box-shadow: none; }
.handson__figure .compare { width: 100%; margin-left: 0; }
@media (max-width: 1023.98px) { .handson__figure .compare { margin-left: 0; } }
@media (max-width: 480px) {
  .hx__cols { gap: 10px; }
  .hx__col { padding-left: 6px; padding-right: 4px; }
  .hx__name { font-size: 13px; letter-spacing: .02em; }
}
/* 比較表と結びの一文を図の上に置き、図の金線がそのまま下の「3つの関わり方」へ続くようにする */
.handson__figure { padding-top: clamp(80px,9vw,120px); }
.handson__figure .compare { margin-top: 0; }
.handson__figure .handson__close { margin-left: 0; }

/* =========================================================
   3つの関わり方（スマホ・タブレット）: 手札のように扇状に並べ、横スワイプでカードを入れ替える
   縦スクロールでは画面を止めず、そのまま下へ流れる（.cards-pin の名前は旧・固定版の名残）
   ========================================================= */
.cards-pin__dots { display: none; }
.cards-pin__stars { display: none; }
@media (max-width: 1023.98px) {
  .cards-pin.is-deck { margin-top: clamp(24px,4vw,40px); }
  .cards-pin.is-deck .cards-pin__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; overflow: visible; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
  .cards-pin.is-deck .cards { position: relative; display: block; width: min(62vw, 320px); aspect-ratio: 7 / 12; margin: 0; }
  .cards-pin.is-deck .card {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transform-origin: 50% 60%;
    transform: translateX(calc(var(--k) * 50% + var(--drag, 0px))) translateY(calc(var(--ka) * 5%)) rotate(calc(var(--k) * 9deg)) scale(calc(1 - var(--ka) * .2));
    opacity: calc(1 - var(--ka) * .25); filter: brightness(calc(1 - var(--ka) * .35));
    z-index: calc(3 - var(--ka));
    transition: transform .75s cubic-bezier(.3,1.35,.5,1), opacity .5s var(--ease), filter .5s var(--ease);
    -webkit-user-drag: none; -webkit-touch-callout: none;
  }
  .cards-pin.is-deck .cards.is-dragging .card { transition: none; }
  .cards-pin.is-deck .card:hover { transform: translateX(calc(var(--k) * 50% + var(--drag, 0px))) translateY(calc(var(--ka) * 5%)) rotate(calc(var(--k) * 9deg)) scale(calc(1 - var(--ka) * .2)); }
  .cards-pin.is-deck .card.is-now { filter: drop-shadow(0 24px 24px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(217,188,133,.25)); }
  .cards-pin.is-deck .cards-pin__dots { display: flex; gap: 2px; }
  .cards-pin__dots button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
  .cards-pin__dots button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--accent-l); transition: background .3s, transform .3s; }
  .cards-pin__dots button.is-on::before { background: var(--accent-l); transform: scale(1.3); }
}

/* =========================================================
   領域と業態: 星をつないだ糸に沿って7つの領域が並び、押すと業態が開く
   ========================================================= */
.domains { position: relative; list-style: none; margin: clamp(24px,3vw,36px) 0 0; padding: 0; max-width: 820px; }
.domains::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(180deg, rgba(217,188,133,.1), rgba(217,188,133,.5) 12%, rgba(217,188,133,.5) 88%, rgba(217,188,133,.1)); }
.domain { position: relative; border-bottom: 1px solid var(--border-inv); }
.domain:first-child { border-top: 1px solid var(--border-inv); }
.domain__head { display: grid; grid-template-columns: 44px 36px 1fr 32px; align-items: center; gap: 0 12px; width: 100%; min-height: 64px; padding: 10px 0; background: none; border: 0; color: var(--text-inv); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .3s; }
.domain__head:hover { background: linear-gradient(90deg, rgba(217,188,133,.06), transparent 70%); }
.domain__head:focus-visible { outline: 2px solid var(--accent-l); outline-offset: -2px; }
.domain__star { justify-self: center; position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--accent-l); background: var(--bg); transition: background .35s, box-shadow .35s, transform .35s var(--ease-star); }
.domain__head:hover .domain__star { transform: scale(1.2); }
.domain.is-open .domain__star { background: var(--accent-l); box-shadow: 0 0 0 5px rgba(217,188,133,.14), 0 0 12px rgba(217,188,133,.6); }
.domain__no { font-family: var(--serif-en); font-size: 15px; color: var(--accent); }
.domain__name { font-family: var(--serif-ja); font-size: clamp(17px,1.6vw,20px); letter-spacing: .08em; }
.domain__count { font-size: 12px; letter-spacing: .08em; color: var(--muted-inv); }
.domain__plus { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(184,149,90,.7); transition: transform .4s var(--ease), background .3s; }
.domain__plus::before, .domain__plus::after { content: ""; position: absolute; left: 8px; top: 13px; width: 10px; height: 1px; background: var(--accent-l); }
.domain__plus::after { transform: rotate(90deg); transition: transform .4s var(--ease); }
.domain.is-open .domain__plus { background: rgba(217,188,133,.12); }
.domain.is-open .domain__plus::after { transform: rotate(0deg); }
.domain__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.domain.is-open .domain__body { grid-template-rows: 1fr; }
.domain__clip { overflow: hidden; min-height: 0; }
.domain__items { list-style: none; margin: 0; padding: 0 0 20px 92px; display: flex; flex-wrap: wrap; gap: 10px 12px; opacity: 0; transform: translateY(-6px); transition: opacity .4s .1s, transform .5s var(--ease); }
.domain.is-open .domain__items { opacity: 1; transform: none; }
.domain__items li { padding: 7px 14px; border: 1px solid rgba(217,188,133,.35); border-radius: 2px; font-size: 14px; letter-spacing: .04em; color: var(--sub-inv); background: rgba(34,31,27,.5); }
@media (max-width: 639.98px) {
  .domain__head { grid-template-columns: 44px 30px 1fr 30px; }
  .domain__count { display: none; }
  .domain__items { padding-left: 44px; }
}

/* =========================================================
   ヒーロー → 会社概要（手紙）/ お問い合わせ（ペン）の遷移演出（比較用 3案）
   ========================================================= */
.tfx, .tfx-in { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.tfx { pointer-events: auto; }
.tfx__veil { position: absolute; inset: 0; background: var(--end); opacity: 0; transition: opacity .5s ease .75s; }
.tfx.is-go .tfx__veil { opacity: 1; }
.tfx-in { transition: opacity 1s var(--ease); }
.tfx-in.is-go { opacity: 0; }
/* 案1: 画面が寄る（ズームは JS で hero に掛ける）。周りから暗く絞る */
.tfx--1::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--cx) var(--cy), transparent 0, transparent 18vmax, rgba(0,0,0,.7) 60vmax); opacity: 0; transition: opacity .8s; }
.tfx--1.is-go::before { opacity: 1; }
.tfx--1 .tfx__veil { transition-delay: .7s; }
/* 案2（手紙）: 便箋がせり上がって画面を覆う */
.tfx__sheet { position: absolute; left: var(--cx); top: var(--cy); width: 120px; height: 80px; transform: translate(-50%,-50%) scale(1); background: #F5F0E6; border: 1px solid #D9CFBC; box-shadow: 0 20px 60px rgba(0,0,0,.5); transition: left .9s cubic-bezier(.6,0,.2,1) .25s, top .9s cubic-bezier(.6,0,.2,1) .25s, width .9s cubic-bezier(.6,0,.2,1) .25s, height .9s cubic-bezier(.6,0,.2,1) .25s, transform .3s ease; }
.tfx--2.is-go .tfx__sheet { left: 50%; top: 50%; width: 110vw; height: calc(110 * var(--vh, 1vh)); transform: translate(-50%,-50%); }
.tfx__seal { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif-en); font-size: 13px; color: #8C6A36; border: 1px solid #8C6A36; box-shadow: inset 0 0 0 3px #F5F0E6, inset 0 0 0 4px rgba(140,106,54,.5); opacity: 0; transition: opacity .4s 1s; }
.tfx--2.is-go .tfx__seal { opacity: 1; }
/* 案2（ペン）: 金のインクで線が書かれる */
.tfx__ink { position: absolute; inset: 0; width: 100%; height: 100%; }
.tfx__ink path { fill: none; stroke: #D9BC85; stroke-width: .5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 1px rgba(217,188,133,.8)); transition: stroke-dashoffset 1s cubic-bezier(.6,0,.3,1); }
.tfx--2.is-go .tfx__ink path { stroke-dashoffset: 0; }
.tfx--2.tfx--pen .tfx__veil { transition-delay: .95s; }
/* 案3: 魔法陣と光の粒 */
.tfx__circle { position: absolute; left: var(--cx); top: var(--cy); width: 60vmin; height: 60vmin; transform: translate(-50%,-50%) rotate(-30deg); overflow: visible; transition: transform 1.4s cubic-bezier(.3,0,.2,1); }
.tfx--3.is-go .tfx__circle { transform: translate(-50%,-50%) rotate(40deg) scale(2.6); }
.tfx__circle circle, .tfx__circle path { fill: none; stroke: #D9BC85; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px rgba(217,188,133,.8)); transition: stroke-dashoffset .8s cubic-bezier(.6,0,.3,1); }
.tfx__circle .b { stroke-width: .6; transition-delay: .15s; }
.tfx__circle .c { stroke-width: .6; transition-delay: .3s; }
.tfx--3.is-go .tfx__circle circle, .tfx--3.is-go .tfx__circle path { stroke-dashoffset: 0; }
.tfx__dots i { position: absolute; left: var(--cx); top: var(--cy); width: 4px; height: 4px; border-radius: 50%; background: #F5E6C4; box-shadow: 0 0 8px #D9BC85; opacity: 0; transition: transform 1s cubic-bezier(.2,.8,.2,1) var(--d), opacity 1s ease var(--d); }
.tfx--3.is-go .tfx__dots i { transform: translate(var(--x), var(--y)) scale(1.4); opacity: 1; }
.tfx--3 .tfx__veil { transition-delay: 1s; }

/* 星の瞬き: 一部の星だけ、ときどき明るさが揺らぐ（全部が同時に動かないよう周期と始まりをずらす） */
.star--tw { animation: star-tw var(--td, 4s) ease-in-out var(--tl, 0s) infinite; }
@keyframes star-tw {
  0%, 100% { opacity: var(--o); }
  42% { opacity: calc(var(--o) * .25); }
  50% { opacity: calc(var(--o) * 1.6); transform: scale(1.25); }
  58% { opacity: calc(var(--o) * .5); }
}
@media (prefers-reduced-motion: reduce) { .star--tw { animation: none; } }

/* =========================================================
   整列の点検（2026-09-25）: すべての本文の左端を --gutter に揃える
   ========================================================= */
.hero__inner { padding-left: var(--gutter); padding-right: var(--gutter); }
.service__inner { padding-left: var(--gutter); padding-right: var(--gutter); }
/* ハンズオン: 右列（比較表）の上端を、左の見出し（h2）の上端に揃える（ラベル1行ぶん下げる） */
@media (min-width: 1024px) {
  .handson__figure { padding-top: calc(clamp(80px,9vw,120px) + 17px + clamp(20px,2.4vw,32px) + (clamp(30px,3.4vw,46px) * .25) - 10px); }
}

/* =========================================================
   事業の広がり: プラネタリウム
   セクションを縦に長くし、中の舞台を画面に固定。スクロールで奥へ進み、星が結ばれ、左に解説が順に出る
   ========================================================= */
.net-art__cap { margin: 0 0 clamp(12px,1.6vw,20px); text-align: center; font-family: var(--serif-ja); font-size: clamp(14px,1.3vw,17px); letter-spacing: .24em; color: var(--accent-l); }
.planet__deep { display: none; }
.cluster.is-planet { height: calc(420 * var(--svh, 1svh)); overflow: visible; }
.cluster.is-planet > .glow, .cluster.is-planet > .stars { display: none; }
.cluster.is-planet .planet__stage { position: sticky; top: 0; height: var(--svh100, 100svh); overflow: hidden; display: flex; align-items: center;
  background: radial-gradient(ellipse 70% 60% at 62% 50%, rgba(40,32,22,.55), transparent 70%), var(--bg); }
.cluster.is-planet .planet__deep { display: block; position: absolute; inset: -20%; transform-origin: 62% 50%; will-change: transform; }
.cluster.is-planet .planet__deep .stars { inset: 0; }
.cluster.is-planet .planet__deep2 { opacity: .6; transform: scale(.6); }
.cluster.is-planet .cluster__inner { position: relative; width: 100%; padding-top: 72px; padding-bottom: 24px; }
.cluster.is-planet .net-art { transform-origin: 50% 50%; will-change: transform, opacity; }
.cluster.is-planet .net-art path { stroke-dasharray: 1; }
.cluster.is-planet #center-ep, .cluster.is-planet #hubs, .cluster.is-planet #labels, .cluster.is-planet #dots { opacity: 0; }
.cluster.is-planet .cluster__text > div:first-child, .cluster.is-planet [data-beat] { opacity: 0; will-change: transform, opacity; }
.cluster.is-planet [data-beat] { transition: color .4s; color: var(--sub-inv); }
.cluster.is-planet [data-beat].is-now { color: var(--text-inv); }
/* スマホ: 図を上、解説を下に。解説は今の1段落だけを重ねて出す */
@media (max-width: 1023.98px) {
  .cluster.is-planet .cluster__grid { display: flex; flex-direction: column-reverse; gap: 16px; }
  .cluster.is-planet .net-art { width: min(100%, calc(46 * var(--svh, 1svh)) * 1100 / 900); margin: 0 auto; }
  .cluster.is-planet .cluster__title { font-size: clamp(22px,6vw,28px); margin-top: 10px; }
  .cluster.is-planet .cluster__body { position: relative; min-height: 8.5em; margin-top: 12px; }
  .cluster.is-planet .cluster__body [data-beat] { position: absolute; left: 0; right: 0; top: 0; font-size: 14px; }
  .cluster.is-planet .cluster__body [data-beat]:not(.is-now) { opacity: 0 !important; }
}
@media (max-width: 1023.98px) {
  .cluster.is-planet .cluster__text, .cluster.is-planet .cluster__body { width: 100%; max-width: none; }
  .cluster.is-planet .cluster__body { display: block; }
}
@media (max-width: 1023.98px) { .cluster.is-planet .cluster__grid { align-items: stretch; } .cluster.is-planet .cluster__text > div:first-child { align-self: flex-start; width: 100%; } }

/* プラネタリウム 改: 前のセクションの後ろで舞台を固定し、前が消えると奥から現れる */
.record { position: relative; z-index: 2; }
.record__inner { transform-origin: 50% 40%; will-change: transform; }
.cluster.is-planet { margin-top: calc(-1 * var(--svh100, 100svh)); height: calc(520 * var(--svh, 1svh)); z-index: 1; }
.cluster.is-planet .cluster__text > div:first-child, .cluster.is-planet [data-beat] { transform-origin: 0 50%; }
/* 結ばれたあとは、星と点がうっすら漂い続ける */
@keyframes pl-drift { from { transform: translate(-3px, 2px); } to { transform: translate(3px, -2px); } }
@keyframes pl-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .75; transform: scale(1.08); } }
@keyframes pl-sway { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
@media (prefers-reduced-motion: reduce) { .cluster.is-planet { margin-top: 0; } }

/* 現在地を止めて奥へ消す: 現在地と経済圏を1つの枠に入れ、現在地は sticky で画面に残す */
.orbit { position: relative; }
.orbit .record { position: sticky; z-index: 3; }
.cluster.is-planet .cluster__text { transform-origin: 0 50%; will-change: transform, opacity; opacity: 0; }
.cluster.is-planet .cluster__text > div:first-child, .cluster.is-planet [data-beat] { opacity: 1; transform: none; color: inherit; }
.cluster.is-planet [data-beat] { color: var(--text-inv); }
/* スマホ: 全文を出したまま収まるよう、図と文字を少し小さく */
@media (max-width: 1023.98px) {
  .cluster.is-planet .cluster__text { transform-origin: 50% 0; }
  .cluster.is-planet .net-art { width: min(100%, calc(34 * var(--svh, 1svh)) * 1100 / 900); }
  .cluster.is-planet .cluster__body { min-height: 0; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
  .cluster.is-planet .cluster__body [data-beat] { position: static; font-size: 12.5px; line-height: 1.75; }
  .cluster.is-planet .cluster__body [data-beat]:not(.is-now) { opacity: 1 !important; }
  .cluster.is-planet .cluster__title { font-size: clamp(20px,5.4vw,26px); }
  .cluster.is-planet .cluster__inner { padding-top: 64px; }
  .cluster.is-planet .net-art__cap { margin-bottom: 4px; }
}
/* 10/3: 高さの低いスマホ（375×667・360×740 など）では、最後の1行が画面の下で切れていた。図を少し小さくして収める */
@media (max-width: 1023.98px) and (max-height: 760px) { .cluster.is-planet .net-art { width: min(100%, calc(28 * var(--svh, 1svh)) * 1100 / 900); } .cluster.is-planet .cluster__inner { padding-top: 56px; } }
@media (max-width: 1023.98px) and (max-height: 620px) { .cluster.is-planet .net-art { width: min(100%, calc(17 * var(--svh, 1svh)) * 1100 / 900); } .cluster.is-planet .cluster__inner { padding-top: 48px; } .cluster.is-planet .cluster__body [data-beat] { font-size: 11.5px; line-height: 1.7; } .cluster.is-planet .cluster__title { font-size: 19px; } .cluster.is-planet .cluster__body { gap: 5px; } }
/* 結ばれたあとの動き: 一時停止の位置を 0 にして角度が跳ねないようにし、少しはっきり動かす */
.cluster.is-planet .net-art__svg { animation: pl-sway2 22s ease-in-out infinite; animation-play-state: paused; transform-origin: 50% 55%; }
.cluster.is-planet #dots { animation: pl-drift2 12s ease-in-out infinite; animation-play-state: paused; }
.cluster.is-planet #mesh, .cluster.is-planet #dendrites, .cluster.is-planet #axons { animation: pl-drift2 16s ease-in-out -8s infinite reverse; animation-play-state: paused; }
.cluster.is-planet #hubs > g { animation: pl-float 9s ease-in-out infinite; animation-play-state: paused; }
.cluster.is-planet #hubs > g:nth-child(2n) { animation-duration: 11s; animation-direction: reverse; }
.cluster.is-planet #hubs > g:nth-child(3n) { animation-duration: 13s; }
.cluster.is-alive .net-art__svg, .cluster.is-alive #dots, .cluster.is-alive #mesh, .cluster.is-alive #dendrites, .cluster.is-alive #axons, .cluster.is-alive #hubs > g { animation-play-state: running; }
@keyframes pl-sway2 { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-2deg) scale(1.015); } 75% { transform: rotate(2deg) scale(.99); } }
@keyframes pl-drift2 { 0%, 100% { transform: translate(0,0); } 25% { transform: translate(-7px, 5px); } 50% { transform: translate(4px, 8px); } 75% { transform: translate(8px, -5px); } }
@keyframes pl-float { 0%, 100% { transform: translate(0,0); } 33% { transform: translate(4px,-6px); } 66% { transform: translate(-5px,4px); } }

/* 説明文も中央から拡大 */
.cluster.is-planet .cluster__text { transform-origin: 50% 50%; }
/* 線: 拡大しきったら自動で結ばれる（中心→枝→事業同士→網の順） */
.cluster.is-planet .net-art path { stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease; }
.cluster.is-planet #labels { opacity: 0; transition: opacity .6s ease; }
.cluster.is-linked #hub-links path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.3,1); }
.cluster.is-linked #dendrites path, .cluster.is-linked #axons path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(.6,0,.3,1) .7s; }
.cluster.is-linked #threads path, .cluster.is-linked #long-links path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.6,0,.3,1) 1.4s; }
.cluster.is-linked #mesh path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.6,0,.3,1) 2s; }
.cluster.is-linked #labels { opacity: 1; transition: opacity .8s ease .9s; }
/* 動き: 図全体は動かさず、点ひとつずつが自由に漂う */
.cluster.is-planet .net-art__svg, .cluster.is-planet #dots, .cluster.is-planet #mesh, .cluster.is-planet #dendrites, .cluster.is-planet #axons, .cluster.is-planet #hubs > g { animation: none; }
.cluster.is-planet .pl-move { animation: pl-wander var(--md) ease-in-out var(--ml) infinite; animation-play-state: paused; transform-box: fill-box; }
.cluster.is-alive .pl-move { animation-play-state: running; }
@keyframes pl-wander { 0%, 100% { transform: translate(0,0); } 30% { transform: translate(var(--mx), var(--my)); } 65% { transform: translate(calc(var(--my) * -.8), calc(var(--mx) * .8)); } }

/* 経済圏: 近づいたあとの止まりを短く、線はすばやく結ぶ */
.cluster.is-planet { height: calc(300 * var(--svh, 1svh)); }
.cluster.is-planet .pl-move { animation: none; }
.cluster.is-linked #hub-links path { transition: stroke-dashoffset .6s cubic-bezier(.6,0,.3,1); }
.cluster.is-linked #dendrites path, .cluster.is-linked #axons path { transition: stroke-dashoffset .6s cubic-bezier(.6,0,.3,1) .35s; }
.cluster.is-linked #threads path, .cluster.is-linked #long-links path { transition: stroke-dashoffset .6s cubic-bezier(.6,0,.3,1) .7s; }
.cluster.is-linked #mesh path { transition: stroke-dashoffset .8s cubic-bezier(.6,0,.3,1) .95s; }
.cluster.is-linked #labels { transition: opacity .6s ease .5s; }

/* =========================================================
   宇宙 → 地球の夜空: 出口戦略を下るほどネイビーへ。代表挨拶もネイビー
   ========================================================= */
:root { --navy: #0F1B2D; --navy-deep: #0A1320; }
.reverse { background: linear-gradient(180deg, var(--bg) 0%, #0e1117 30%, #0e1520 60%, var(--navy) 100%); }
.reverse .rstep__tag, .reverse .rstep__title, .reverse .rstep__text { background: transparent; box-shadow: none; }
.reverse .rstep__tag, .reverse .rstep__title, .reverse .rstep__text { text-shadow: 0 0 12px rgba(10,19,32,.95), 0 0 24px rgba(10,19,32,.9); }
.letter { background: var(--navy); color: var(--text-inv); }
.letter__wave { display: none; }
.letter .eyebrow { color: var(--accent); }
.letter__body { color: var(--sub-inv); }
.contact { background: linear-gradient(180deg, var(--navy) 0%, var(--bg) 70%); }

/* 線は JS でスクロールに合わせて描く（自動の遷移は外す） */
.cluster.is-planet .net-art path, .cluster.is-linked .net-art path { transition: none; }
.cluster.is-planet #labels { transition: none; }

/* セクションの境目で星とモヤが切れないよう、上下の端を溶かす */
.section > .stars, .sec > .stars, .section > .glow, .sec > .glow {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.reverse__glow { top: 6%; height: 50%; background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(217,188,133,.05), transparent 70%); }
.contact__glow { background: radial-gradient(ellipse 50% 40% at 50% 70%, rgba(217,188,133,.05), transparent 70%); }
.cluster.is-planet .planet__stage { background: var(--bg); }
.cluster.is-planet .planet__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 62% 50%, rgba(40,32,22,.5), transparent 75%); }
.cluster.is-planet { height: calc(380 * var(--svh, 1svh)); }

/* =========================================================
   3つの関わり方: 枠は 700×1000 に詰め、「詳しく見る」は枠の外（下）へ
   ========================================================= */
.card--frame { aspect-ratio: auto; background: none !important; filter: none; display: flex; flex-direction: column; align-items: stretch; gap: 16px; container-type: normal; max-width: 340px; width: 100%; justify-self: center; }
.card--frame:hover { filter: none; }
.card__frame { position: relative; display: block; aspect-ratio: 7 / 10; container-type: inline-size; background: url(/assets/cards/card-01.svg) center / 100% 100% no-repeat; filter: drop-shadow(0 24px 24px rgba(0,0,0,.55)); transition: filter .3s; }
.card--02 .card__frame { background-image: url(/assets/cards/card-02.svg); }
.card--03 .card__frame { background-image: url(/assets/cards/card-03.svg); }
.card--frame:hover .card__frame, .card--frame[aria-current="page"] .card__frame { filter: drop-shadow(0 24px 24px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(217,188,133,.25)); }
.card--frame .card__no { top: 9.2%; font-size: 5.7cqw; }
.card--frame .card__body { top: 51%; height: 36%; }
.card--frame .card__more { position: static; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0; font-size: 14px; letter-spacing: .16em; color: var(--accent-l); }
.card__more-arrow { position: relative; width: 36px; height: 1px; background: var(--accent-l); transition: width .3s var(--ease); }
.card__more-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--accent-l); border-right: 1px solid var(--accent-l); transform: rotate(45deg); }
.card--frame:hover .card__more-arrow { width: 48px; }
/* スマホの手札: 枠＋「詳しく見る」が画面に収まる大きさ */
@media (max-width: 1023.98px) {
  .cards-pin.is-deck .cards { width: min(60vw, calc((var(--svh100, 100svh) - 260px) * 7 / 10), 300px); aspect-ratio: 7 / 11.2; }
  .cards-pin.is-deck .card { max-width: none; }
}
.cluster.is-planet { height: calc(420 * var(--svh, 1svh)); }

/* 「詳しく見る」の矢はボタンと同じ矢 */
.card__more-arrow { width: 48px; height: 20px; background: url(/assets/arrow.svg) center / contain no-repeat; transition: transform .3s var(--ease); }
.card__more-arrow::after { display: none; }
.card--frame:hover .card__more-arrow { width: 48px; transform: translateX(5px); }

/* 3つの関わり方: 背景のぼかし画像の縁が四角く見えないよう、周囲を溶かす */
.service__bg { -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 55%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 55% at 50% 55%, #000 30%, transparent 100%); }

/* フッター: 上の余白を詰める */
.footer__inner { padding-top: clamp(32px,4vw,48px); padding-bottom: 28px; gap: 24px 48px; }
.footer__sig { gap: 10px; }
.footer__mark { height: clamp(32px,3.6vw,44px); }

/* 経済圏の舞台（後ろで固定）が「3つの関わり方」の上に重ならないように重なり順を明示 */
.service { z-index: 2; }
.orbit { z-index: 1; }
/* 代表挨拶の星 */
.letter { position: relative; overflow: clip; }
.letter > .stars { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.letter__grid { position: relative; }

/* =========================================================
   3つの関わり方: 上から転送されてくる（--tp 0→1 をスクロールで JS が与える）とホバー
   ========================================================= */
.card__frame > .card__no, .card__frame > .card__body { position: absolute; z-index: 1; }
.card__beam { position: absolute; left: -6%; right: -6%; top: 0; height: 0; pointer-events: none; z-index: 3; opacity: 0; }
.cards.is-tp .card__frame { clip-path: inset(0 0 calc((1 - var(--tp, 0)) * 100%) 0); }
.cards.is-tp .card__frame { filter: drop-shadow(0 24px 24px rgba(0,0,0,.55)) brightness(calc(1 + (1 - var(--tp, 0)) * .6)); }
.cards.is-tp .card__beam { top: calc(var(--tp, 0) * 100%); opacity: calc(min(var(--tp, 0) * 40, 1) * min((1 - var(--tp, 0)) * 40, 1)); }
.card__beam::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, #fff1cf 20%, #fff 50%, #fff1cf 80%, transparent); box-shadow: 0 0 12px 2px rgba(255,220,150,.8), 0 0 40px 8px rgba(255,200,120,.35); }
.card__beam::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 90px; background: linear-gradient(0deg, rgba(255,220,150,.22), transparent); }
.cards.is-tp .card__more { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s var(--ease); }
.cards.is-tp .card.is-tp-done .card__more { opacity: 1; transform: none; }
/* ホバー: 浮き上がりと縁の光に加え、アイコンの周りの放射線が回りながら灯る */
.card__burst { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(/assets/cards/burst-01.svg) center / 100% 100% no-repeat; opacity: 0;
  -webkit-mask-image: conic-gradient(from var(--ba, 0deg) at 50% 30%, #000 0 70deg, transparent 140deg 360deg); mask-image: conic-gradient(from var(--ba, 0deg) at 50% 30%, #000 0 70deg, transparent 140deg 360deg);
  filter: drop-shadow(0 0 4px rgba(255,214,140,.9)); transition: opacity .35s; }
.card--02 .card__burst { background-image: url(/assets/cards/burst-02.svg); }
.card--03 .card__burst { background-image: url(/assets/cards/burst-03.svg); }
@property --ba { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.card--frame:hover .card__burst { opacity: 1; animation: burst-spin 2.2s linear infinite; }
@keyframes burst-spin { to { --ba: 360deg; } }
.card--frame .card__frame { transition: transform .45s cubic-bezier(.2,.9,.3,1.3), filter .35s; }
.card--frame:hover { transform: none; }
.card--frame:hover .card__frame { transform: translateY(-12px); filter: drop-shadow(0 32px 28px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(243,208,138,.35)); }
.card--frame:hover .card__more-arrow { transform: translateX(8px); }
.cards-pin.is-deck .card--frame:hover .card__frame { transform: none; }

/* ホバー改: 放射線は内側から外へ光が広がる。フレームもぼやっと光る */
@property --br { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.card__burst { -webkit-mask-image: radial-gradient(circle at 50% 30%, transparent calc(var(--br) - 9%), #000 var(--br), transparent calc(var(--br) + 9%)); mask-image: radial-gradient(circle at 50% 30%, transparent calc(var(--br) - 9%), #000 var(--br), transparent calc(var(--br) + 9%)); }
.card--frame:hover .card__burst { animation: burst-out 3.4s ease-in-out infinite; }
@keyframes burst-out { 0% { --br: 12%; opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { --br: 34%; opacity: 0; } }
.card--frame:hover .card__frame { filter: drop-shadow(0 32px 28px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(243,208,138,.55)) drop-shadow(0 0 28px rgba(243,208,138,.35)); animation: frame-glow 3.4s ease-in-out infinite; }
@keyframes frame-glow { 0%, 100% { filter: drop-shadow(0 32px 28px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(243,208,138,.4)) drop-shadow(0 0 20px rgba(243,208,138,.22)); } 50% { filter: drop-shadow(0 32px 28px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(243,208,138,.65)) drop-shadow(0 0 34px rgba(243,208,138,.4)); } }
/* 転送が終わったら切り抜きを外す（外側の光や影が切れないように） */
.cards.is-tp .card.is-tp-done .card__frame, .card--frame:not(.cards.is-tp .card) .card__frame { clip-path: none; }
.card__burst { filter: drop-shadow(0 0 3px rgba(255,220,150,1)) drop-shadow(0 0 8px rgba(255,200,120,.7)); }
@keyframes burst-out { 0% { --br: 9%; opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { --br: 30%; opacity: 0; } }

/* =========================================================
   ハンズオン型とは: 図と表の3案（<html data-handson="1|2|3">、既定は1）
   ========================================================= */
.hv, .hv-left { display: none; }
:root:not([data-handson="2"]):not([data-handson="3"]) .hv--1,
:root[data-handson="2"] .hv--2, :root[data-handson="2"] .hv-left--2,
:root[data-handson="3"] .hv--3, :root[data-handson="3"] .hv-left--3 { display: block; }
.handson__figure .handson__close { margin: clamp(40px,5vw,64px) 0 0; }
.handson__figure { padding-top: clamp(80px,9vw,120px); }
@media (min-width: 1024px) { .handson__figure { padding-top: calc(clamp(80px,9vw,120px) + 17px + clamp(20px,2.4vw,32px) - 6px); } }
.hq__no { font-family: var(--serif-en); font-size: clamp(18px,1.6vw,22px); color: var(--accent); line-height: 1; }
.hq__name { font-family: var(--serif-ja); font-size: clamp(15px,1.4vw,19px); letter-spacing: .06em; line-height: 1.5; }
.hq__k { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .14em; color: var(--muted-inv); }
.hq__ho .hq__k { color: var(--accent-l); }
.hq__legend { display: flex; gap: 8px 24px; flex-wrap: wrap; margin-top: 18px; font-size: 12px; letter-spacing: .08em; color: var(--muted-inv); }
.hq__lg { display: inline-flex; align-items: center; gap: 10px; }
.hq__lg i { display: block; width: 22px; height: 2px; }
.hq__lg--owner i { background: var(--text-inv); opacity: .75; }
.hq__lg--ep { color: var(--accent-l); }
.hq__lg--ep i { background: var(--accent-l); box-shadow: 0 0 6px rgba(217,188,133,.6); }

/* 線（共通）: 経営者は白い実線、ExitPlan は金の光る線。どちらもスクロールで上から伸びる */
.hq__lane { position: relative; }
.hq__owner, .hq__ep { position: absolute; top: 0; bottom: 0; width: 2px; transform-origin: top; will-change: transform; }
.hq__owner { left: calc(50% - 12px); background: linear-gradient(180deg, transparent, rgba(245,240,230,.75) 8%); }
.hq__ep { left: calc(50% + 10px); background: linear-gradient(180deg, transparent, #D9BC85 8%); box-shadow: 0 0 6px rgba(217,188,133,.5); }
.hq__ep--short { bottom: auto; height: calc(var(--row) * .5 + 8px); }
.hq__pt { position: absolute; left: 0; right: 0; height: 0; }
.hq__pt:nth-of-type(1) { top: calc(var(--row) * .5); } .hq__pt:nth-of-type(2) { top: calc(var(--row) * 1.5); } .hq__pt:nth-of-type(3) { top: calc(var(--row) * 2.5); }
.hq__dot { position: absolute; top: -6px; width: 12px; height: 12px; border-radius: 50%; }
.hq__dot--o { left: calc(50% - 17px); border: 1px solid var(--text-inv); background: var(--bg); }
.hq__dot--e { left: calc(50% + 5px); border: 1px solid var(--accent-l); background: var(--accent-l); box-shadow: 0 0 0 4px rgba(217,188,133,.14), 0 0 12px rgba(217,188,133,.7); transition: background .4s, box-shadow .4s, opacity .4s; }
.hq__pt.is-out .hq__dot--e { opacity: 0; }
.hq__pt.is-off .hq__dot--e { background: var(--bg); box-shadow: none; }
/* 助言までで止まる印 */
.hq__ep--short::after { content: ""; position: absolute; left: -5px; bottom: -1px; width: 12px; height: 2px; background: var(--accent-l); }

/* 案1: 工程を左、2つの関わり方を右の2列。下の表も同じ列に揃える */
.hq { --row: clamp(84px,9vw,120px); }
.hq__head, .hq__body, .hq__table > div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(8px,2vw,24px); }
.hq__head { padding-bottom: 14px; border-bottom: 1px solid var(--border-inv); font-family: var(--serif-ja); font-size: clamp(12px,1.1vw,14px); line-height: 1.6; letter-spacing: .06em; color: var(--muted-inv); text-align: center; }
.hq__head .hq__col--ho { color: var(--accent-l); }
.hq__body { position: relative; }
.hq__steps { list-style: none; margin: 0; padding: 0; }
.hq__steps li, .hm__steps li { display: flex; align-items: center; gap: 12px; height: var(--row); border-bottom: 1px dashed rgba(184,149,90,.18); }
.hq__body > .hq__lane { height: calc(var(--row) * 3); }
.hq__body > .hq__lane:last-child { background: linear-gradient(180deg, rgba(217,188,133,.07), rgba(217,188,133,.02)); }
.hq__table { margin: clamp(28px,3vw,40px) 0 0; border-top: 1px solid var(--border-inv); }
.hq__table > div { padding: 14px 0; border-bottom: 1px solid var(--border-inv); font-size: 13.5px; line-height: 1.8; letter-spacing: .04em; }
.hq__table dt { color: var(--muted-inv); }
.hq__table dd { margin: 0; color: var(--sub-inv); text-align: center; }
.hq__table dd.hq__ho { color: var(--text-inv); }

/* 案2: 工程を真ん中の背骨に。左に助言まで、右にハンズオン。表は文章の下へ */
.hm { --row: clamp(84px,9vw,120px); }
.hm__head, .hm__body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr); column-gap: clamp(8px,2vw,20px); }
.hm__head { padding-bottom: 14px; border-bottom: 1px solid var(--border-inv); font-family: var(--serif-ja); font-size: clamp(12px,1.1vw,14px); line-height: 1.6; letter-spacing: .06em; color: var(--muted-inv); text-align: center; }
.hm__head .hm__ho { color: var(--accent-l); }
.hm__body > .hq__lane { height: calc(var(--row) * 3); }
.hm__right { background: linear-gradient(180deg, rgba(217,188,133,.07), rgba(217,188,133,.02)); }
.hm__steps { list-style: none; margin: 0; padding: 0; }
.hm__steps li { justify-content: center; flex-direction: column; gap: 6px; text-align: center; }
.hq__table--side { margin-top: clamp(40px,5vw,56px); }
.hq__table--side > div { grid-template-columns: minmax(0,.8fr) minmax(0,1fr) minmax(0,1.2fr); }
.hq__table--side dd { text-align: left; }

/* 案3: 1本の航路に3本の線を重ね、工程の横に「ここまで」と書き込む。表は問いと答えで文章の下へ */
.hr__route { position: relative; padding: 76px 0 40px 110px; }
.hr__line { position: absolute; top: 60px; bottom: 0; width: 2px; transform-origin: top; will-change: transform; }
.hr__line--owner { left: 20px; background: rgba(245,240,230,.75); }
.hr__line--adv { left: 50px; height: calc(clamp(56px,7vw,88px) + 40px); bottom: auto; background: rgba(178,171,160,.7); }
.hr__line--ep { left: 80px; background: #D9BC85; box-shadow: 0 0 6px rgba(217,188,133,.5); }
.hr__tops { position: absolute; left: 0; top: 0; display: flex; gap: 0; }
.hr__tag { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-size: 11px; line-height: 1.4; letter-spacing: .06em; text-align: center; writing-mode: horizontal-tb; }
.hr__tag--owner { left: 21px; color: var(--text-inv); }
.hr__tag--adv { left: 51px; top: 28px; color: var(--muted-inv); }
.hr__tag--ep { left: 81px; color: var(--accent-l); }
.hr__tag small { display: block; font-size: 10px; color: var(--accent); }
.hr__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(56px,7vw,88px); }
.hr__steps li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; transition: opacity .5s; }
.hr__dot { position: absolute; left: -36px; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--accent-l); background: var(--accent-l); box-shadow: 0 0 0 4px rgba(217,188,133,.14), 0 0 12px rgba(217,188,133,.7); transition: background .4s, box-shadow .4s; }
.hr__steps li.is-off { opacity: .35; } .hr__steps li.is-off .hr__dot { background: var(--bg); box-shadow: none; }
.hr__note { flex-basis: 100%; font-size: 12px; letter-spacing: .06em; color: var(--muted-inv); }
.hqa { margin-top: clamp(40px,5vw,56px); display: flex; flex-direction: column; gap: 14px; }
.hqa__item { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 16px; padding: 16px 18px; border: 1px solid var(--border-inv); border-radius: 2px; background: rgba(34,31,27,.35); }
.hqa__q { grid-column: 1 / -1; margin: 0; font-family: var(--serif-ja); font-size: 15px; letter-spacing: .06em; color: var(--accent-l); }
.hqa__a { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--sub-inv); }
.hqa__a.hq__ho { color: var(--text-inv); }
@media (max-width: 639.98px) { .hq__table--side > div { grid-template-columns: 1fr 1fr; } .hq__table--side dt { grid-column: 1 / -1; } }
.hv-left.hqa, .hv-left.hq__table { display: none; }
:root[data-handson="2"] .hv-left--2.hq__table { display: block; }
:root[data-handson="3"] .hv-left--3.hqa { display: flex; }
.hq__pt:nth-of-type(n) { top: auto; }
.hq__pt--1 { top: calc(var(--row) * .5) !important; } .hq__pt--2 { top: calc(var(--row) * 1.5) !important; } .hq__pt--3 { top: calc(var(--row) * 2.5) !important; }
.handson__text .handson__close { margin: clamp(32px,4vw,48px) 0 0; }
.hq__table--top { margin: 0 0 0; border-top: 0; }
.hq__table--top > div { padding: 12px 0; }
.hq__table--top + * { }
.hq__body { border-top: 1px solid var(--border-inv); margin-top: 0; }
@media (max-width: 639.98px) {
  .hq__head, .hq__body, .hq__table--top > div { grid-template-columns: minmax(0,1.25fr) minmax(0,.9fr) minmax(0,.9fr); column-gap: 6px; }
  .hq__table--top > div { font-size: 12px; }
  .hq__name { font-size: 14px; }
  .hq__steps li { gap: 8px; }
}
/* ハンズオン: 見出しは語の途中で折らない / 案3の凡例 */
.hq__head .nw, .hm__head .nw { display: inline-block; font-weight: inherit; }
.hq__lg--adv i { background: rgba(178,171,160,.7); height: 1px; }
.hv--3 .hq__legend { margin-top: 8px; }
.hr__route { padding-top: 16px; }
.hr__line { top: 0; }
@media (max-width: 639.98px) {
  .hq__head, .hm__head { font-size: 11.5px; letter-spacing: .02em; }
  .hr__route { padding-left: 96px; }
}
/* 案3: 凡例は図の上（下へ抜ける連結線と重ねない） */
.hv--3 .hq__legend { margin: 0 0 clamp(24px,3vw,36px); }
/* 案1スマホ: 表は2列＋小見出しで読みやすく。列見出しは図の直上へ */
@media (max-width: 639.98px) {
  .hq { display: flex; flex-direction: column; }
  .hq__table--top { order: -1; margin-bottom: 32px; border-top: 1px solid var(--border-inv); }
  .hq__table--top > div { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 4px; padding: 14px 0; font-size: 13px; }
  .hq__table--top dt { grid-column: 1 / -1; color: var(--accent-l); margin-bottom: 2px; }
  .hq__table--top dd { text-align: left; }
  .hq__table--top dd::before { display: block; font-size: 10.5px; letter-spacing: .08em; color: var(--muted-inv); content: "助言まで"; }
  .hq__table--top dd.hq__ho::before { content: "ハンズオン型"; color: var(--accent); }
}
/* 経済圏: 図は触れる要素がないので当たり判定を切る（線1,200本の判定がスクロールのたびに走っていた） */
.net-art__svg { pointer-events: none; }
.net-art__over { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 事業名（HTML の文字。図の拡大縮小に合わせて cqw で大きさを決める） */
.net-art { container-type: inline-size; }
.net-labels { position: absolute; inset: 0; pointer-events: none; }
.net-label { position: absolute; font-family: var(--serif-ja); font-weight: 500; font-size: calc(28 / 1100 * 100cqw); line-height: 1.2857; letter-spacing: calc(3 / 1100 * 100cqw); color: #efe8da; white-space: nowrap; will-change: transform;
  --ax: 0%; --dx: 0px; --dy: 0px; transform: translate(calc(var(--ax) + var(--dx)), calc(var(--dy) - var(--by, .94em))); }
.net-label--middle { --ax: -50%; text-align: center; }
.net-label--end { --ax: -100%; text-align: right; }
@media (max-width: 639.98px) { .net-label { font-size: calc(38 / 1100 * 100cqw); } }
/* 経済圏: 線と点は canvas。SVG は大きさの基準として残して見えなくする（中心のEPは重ねた別SVG） */
.net-art__canvas { position: absolute; pointer-events: none; }
.net-art.is-canvas .net-art__svg:not(.net-art__over) { visibility: hidden; }

/* =========================================================
   ハンズオン型とは 第2弾の3案（伝えること: 実行まで一緒に ／ 舵は経営者）
   ========================================================= */
:root:not([data-handson="2"]) .hv-left--13.hq__table { display: block; }
.ho-cap { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(20px,2.4vw,28px); font-size: 13px; letter-spacing: .16em; color: var(--accent-l); }
.ho-cap::after { content: ""; width: 40px; height: 1px; background: var(--accent); }
.ho-close { display: flex; flex-direction: column; margin: 0; font-family: var(--serif-ja); color: var(--text-inv); }
.ho-close__k { font-size: clamp(15px,1.2vw,17px); letter-spacing: .08em; color: var(--sub-inv); }
.ho-close__v { margin-top: 4px; font-size: clamp(26px,2.6vw,36px); line-height: 1.5; letter-spacing: .08em; }
.ho-close__n { margin-top: 14px; font-size: clamp(14px,1.1vw,16px); line-height: 2; letter-spacing: .06em; color: var(--sub-inv); }

/* 案1: 言葉だけ */
.ho1__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-inv); }
.ho1__list li { position: relative; display: grid; grid-template-columns: clamp(44px,4.4vw,60px) minmax(0,1fr); align-items: baseline; padding: clamp(18px,2vw,26px) 0; border-bottom: 1px solid var(--border-inv); opacity: .32; transition: opacity .7s var(--ease); }
.ho1__list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent-l); box-shadow: 0 0 8px rgba(217,188,133,.7); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
.ho1__list li.is-lit { opacity: 1; }
.ho1__list li.is-lit::after { transform: scaleX(1); }
.ho1__no { font-size: clamp(16px,1.4vw,20px); color: var(--accent); }
.ho1__v { font-family: var(--serif-ja); font-size: clamp(19px,1.9vw,26px); line-height: 1.6; letter-spacing: .08em; color: var(--text-inv); }
.ho1__list li.is-lit .ho1__no { color: var(--accent-l); text-shadow: 0 0 12px rgba(217,188,133,.6); }
.ho1__helm { position: relative; margin-top: clamp(48px,6vw,80px); padding-top: clamp(28px,3vw,40px); opacity: .32; transition: opacity .9s var(--ease); }
.ho1__helm::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(245,240,230,.8); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.ho1__helm.is-lit { opacity: 1; }
.ho1__helm.is-lit::before { transform: scaleX(1); }

/* 案2: 表が主役。舵の行だけ2列をまたぐ */
.ho2__head, .ho2__row { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1fr) minmax(0,1.25fr); }
.ho2__head { font-family: var(--serif-ja); font-size: 13px; line-height: 1.6; letter-spacing: .06em; color: var(--muted-inv); border-bottom: 1px solid var(--border-inv); }
.ho2__head > span { padding: 0 clamp(12px,1.4vw,20px) 16px; }
.ho2__head > span:first-child { padding-left: 0; }
.ho2__head .is-ho { color: var(--accent-l); background: linear-gradient(180deg, rgba(217,188,133,0), rgba(217,188,133,.06)); padding-top: 16px; }
.ho2__rows { margin: 0; }
.ho2__row { border-bottom: 1px solid var(--border-inv); }
.ho2__row dt, .ho2__row dd { margin: 0; padding: clamp(20px,2.2vw,28px) clamp(12px,1.4vw,20px); font-size: clamp(14px,1.1vw,15.5px); line-height: 1.9; letter-spacing: .04em; transition: opacity .7s var(--ease), background .9s var(--ease), color .7s; }
.ho2__row dt { padding-left: 0; font-family: var(--serif-ja); color: var(--muted-inv); }
.ho2__row dd { color: var(--sub-inv); opacity: .35; }
.ho2__row dd.is-ho { color: var(--text-inv); background: rgba(217,188,133,.02); }
.ho2__row.is-lit dd { opacity: 1; }
.ho2__row.is-lit dd.is-ho { background: rgba(217,188,133,.07); box-shadow: inset 2px 0 0 rgba(217,188,133,.55); }
.ho2__k { display: none; }
.ho2__row--same { border-bottom: 0; }
.ho2__row--same dt { padding-top: clamp(28px,3vw,40px); }
.ho2__same { position: relative; grid-column: 2 / -1; display: flex; flex-direction: column; padding-top: clamp(28px,3vw,40px) !important; text-align: center; }
.ho2__same::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(245,240,230,.85); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.ho2__row--same.is-lit .ho2__same::before { transform: scaleX(1); }
.ho2__same-v { font-family: var(--serif-ja); font-size: clamp(26px,2.6vw,36px); line-height: 1.5; letter-spacing: .2em; color: var(--text-inv); }
.ho2__same-n { margin-top: 10px; font-size: clamp(13.5px,1.05vw,15px); color: var(--sub-inv); }
@media (max-width: 639.98px) {
  .ho2__head { display: none; }
  .ho2__row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-top: 0; }
  .ho2__rows { border-top: 1px solid var(--border-inv); }
  .ho2__row dt { grid-column: 1 / -1; padding: 18px 0 8px; color: var(--accent-l); }
  .ho2__row dd { padding: 10px 12px 18px; font-size: 13.5px; }
  .ho2__row dd:not(.is-ho) { padding-left: 0; }
  .ho2__k { display: block; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .1em; color: var(--muted-inv); }
  .is-ho .ho2__k { color: var(--accent-l); }
  .ho2__same { grid-column: 1 / -1; padding: 22px 0 8px !important; }
  .ho2__row--same dt { padding-top: 18px; }
}

/* 案3: 範囲で見せる図 */
.ho3 { --g: 0; display: grid; grid-template-columns: clamp(40px,3.6vw,52px) minmax(0,1fr) clamp(44px,4vw,60px) clamp(48px,4.4vw,64px); grid-template-rows: repeat(4, auto); }
.ho3__helm { grid-column: 1; grid-row: 1 / 5; position: relative; }
.ho3__bar { position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: rgba(245,240,230,.8); transform-origin: top; transform: scaleY(min(1, calc(var(--g) * 1.25))); }
.ho3__vt { writing-mode: vertical-rl; font-family: var(--serif-ja); font-size: 13px; letter-spacing: .24em; white-space: nowrap; }
.ho3__helm .ho3__vt { position: absolute; left: 16px; top: 4px; color: var(--text-inv); }
.ho3__steps { grid-column: 2; grid-row: 1 / 5; display: grid; grid-template-rows: subgrid; list-style: none; margin: 0; padding: 0; }
.ho3__steps li { display: flex; align-items: baseline; gap: 14px; padding: clamp(22px,2.6vw,34px) clamp(8px,1.2vw,16px); border-bottom: 1px dashed rgba(184,149,90,.22); opacity: .32; transition: opacity .6s var(--ease); }
.ho3__steps li:last-child { border-bottom: 0; }
.ho3__steps li.is-lit { opacity: 1; }
.ho3__no { font-size: clamp(15px,1.3vw,18px); color: var(--accent-l); }
.ho3__v { font-family: var(--serif-ja); font-size: clamp(17px,1.7vw,23px); line-height: 1.6; letter-spacing: .08em; color: var(--text-inv); }
.ho3__br { position: relative; }
.ho3__br i { position: absolute; left: 4px; top: 14px; bottom: 14px; width: 10px; border: 1px solid; border-left: 0; }
.ho3__br .ho3__vt { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); }
.ho3__br--adv { grid-column: 3; grid-row: 1 / 2; color: var(--muted-inv); }
.ho3__br--adv i { border-color: rgba(178,171,160,.75); }
.ho3__br--ho { grid-column: 4; grid-row: 1 / 5; color: var(--accent-l); }
.ho3__br--ho i { border-color: var(--accent-l); border-width: 2px 2px 2px 0; filter: drop-shadow(0 0 5px rgba(217,188,133,.6)); clip-path: inset(0 -10px calc((1 - var(--g)) * 100%) -10px); }
.ho3__br--ho .ho3__vt { top: 14px; transform: none; text-shadow: 0 0 10px rgba(217,188,133,.45); }
.ho3__sum { margin-top: clamp(40px,5vw,64px); padding-top: clamp(24px,3vw,36px); border-top: 1px solid var(--border-inv); }
@media (max-width: 639.98px) {
  .ho3 { grid-template-columns: 34px minmax(0,1fr) 38px 42px; }
  .ho3__vt { font-size: 12px; letter-spacing: .18em; }
  .ho3__helm .ho3__vt { left: 14px; }
  .ho3__br .ho3__vt { left: 18px; }
  .ho3__steps li { gap: 10px; padding: 20px 6px; }
}
.ho-close .nw, .ho2__same-n .nw { display: inline-block; font-weight: inherit; }
.ho2__head .is-ho { padding-top: 0; }
.ho2__head > span { padding-top: 16px; }
.ho2__same { text-align: left; }
/* 比較表: 2列のときは左の本文の下、1列のときは主役（案の中身）のあと */
.handson__figure .ho-tbl--m { margin-top: clamp(48px,6vw,72px); }
@media (min-width: 1024px) { :root:not([data-handson="2"]) .handson__figure .ho-tbl--m.hq__table { display: none; } }
@media (max-width: 1023.98px) { :root:not([data-handson="2"]) .handson__text .ho-tbl--d.hq__table { display: none; } }
@media (max-width: 639.98px) { .ho3__v { font-size: 15.5px; letter-spacing: .06em; } }
.ho1__v .nw, .ho3__v .nw { display: inline-block; font-weight: inherit; }
.ho2__head { align-items: end; }

/* =========================================================
   ハンズオン型とは 第3弾: 「範囲で見せる」を魔法の意匠で3案
   （工程は3つ。表は図の真下に同じ幅で揃える）
   ========================================================= */
.hs { --g: 0; position: relative; display: grid; grid-template-columns: clamp(40px,3.6vw,52px) minmax(0,1fr) clamp(52px,4.6vw,68px) clamp(60px,5.2vw,76px); grid-template-rows: repeat(3, auto); }
.hs__steps { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-rows: subgrid; list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.hs__steps li { display: flex; align-items: baseline; gap: 16px; padding: clamp(28px,3.2vw,42px) clamp(10px,1.4vw,18px); border-bottom: 1px dashed rgba(184,149,90,.2); opacity: .32; transition: opacity .7s var(--ease), background .9s var(--ease); }
.hs__steps li:last-child { border-bottom: 0; }
.hs__steps li.is-lit { opacity: 1; }
.hs__no { font-size: clamp(15px,1.3vw,18px); color: var(--accent-l); }
.hs__v { font-family: var(--serif-ja); font-size: clamp(18px,1.8vw,24px); line-height: 1.5; letter-spacing: .1em; color: var(--text-inv); transition: text-shadow .9s; }
.hs__vt { writing-mode: vertical-rl; font-family: var(--serif-ja); font-size: 13px; letter-spacing: .24em; white-space: nowrap; }
.hs__helm { grid-column: 1; grid-row: 1 / 4; position: relative; }
.hs__bar { position: absolute; left: 6px; top: 0; bottom: 0; width: 1.5px; background: rgba(245,240,230,.78); }
.hs__helm .hs__vt { position: absolute; left: 17px; top: 6px; color: var(--text-inv); }
.hs__col { position: relative; z-index: 1; }
.hs__col--adv { grid-column: 3; grid-row: 1 / 2; color: var(--muted-inv); }
.hs__col--ho { grid-column: 4; grid-row: 1 / 4; color: var(--accent-l); }
.hs__col .hs__vt { position: absolute; left: calc(50% + 12px); top: 10px; }
.hs__col--ho .hs__vt { text-shadow: 0 0 10px rgba(217,188,133,.45); }
.hs__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; }
.hs__col--adv .hs__line { background: rgba(178,171,160,.6); }
.hs__col--ho .hs__line { background: var(--accent-l); box-shadow: 0 0 8px rgba(217,188,133,.8); transform-origin: top; transform: scaleY(var(--g)); }
.hs__pt { position: relative; z-index: 2; grid-row: 1; align-self: center; justify-self: center; }
.hs__pt--adv { grid-column: 3; }
.hs__pt--1, .hs__pt--2, .hs__pt--3 { grid-column: 4; }
.hs__pt--2 { grid-row: 2; } .hs__pt--3 { grid-row: 3; }
.hs__close { margin-top: clamp(40px,5vw,56px); }
.handson__figure .ho-tbl { margin-top: clamp(48px,6vw,72px); }

/* 案1 星図 */
.hs--star .hs__sky { inset: -24px -12px; opacity: .8; }
.hs--star .hs__col--ho .hs__line { top: 16.6%; bottom: 16.6%; background: linear-gradient(180deg, rgba(217,188,133,.95), rgba(217,188,133,.75)); height: auto; }
.hs--star .hs__col--adv .hs__line { top: 28%; bottom: 28%; background: linear-gradient(180deg, transparent, rgba(178,171,160,.55), transparent); }
.hs--star .hs__pt svg { display: block; width: 18px; height: 18px; fill: rgba(245,240,230,.25); transition: fill .6s, filter .6s, transform .8s var(--ease-star); transform: scale(.7); }
.hs--star .hs__pt--adv svg { fill: rgba(245,240,230,.7); transform: scale(.8); filter: drop-shadow(0 0 4px rgba(245,240,230,.5)); }
.hs--star .hs__pt.is-lit svg { fill: #FFE7B0; transform: scale(1.15); filter: drop-shadow(0 0 4px #ffd68a) drop-shadow(0 0 12px rgba(217,188,133,.9)); animation: hs-tw 3.2s ease-in-out infinite; }
.hs--star .hs__pt--2.is-lit svg { animation-delay: -1.1s; } .hs--star .hs__pt--3.is-lit svg { animation-delay: -2.2s; }
@keyframes hs-tw { 0%,100% { transform: scale(1.15) rotate(0deg); } 50% { transform: scale(.95) rotate(8deg); } }
.hs--star .hs__steps li.is-lit .hs__v { text-shadow: 0 0 18px rgba(217,188,133,.35); }
.hs--star .hs__bar { background: linear-gradient(180deg, rgba(245,240,230,.2), rgba(245,240,230,.8) 12%, rgba(245,240,230,.8) 88%, rgba(245,240,230,.2)); }

/* 案2 紋章の枠 */
.hs--crest { padding: clamp(28px,3vw,40px) clamp(14px,1.6vw,22px); }
.hs__frame { position: absolute; inset: 0; border: 1px solid rgba(184,149,90,.42); pointer-events: none; }
.hs__frame::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(184,149,90,.2); }
.hs__frame b { position: absolute; width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); }
.hs__frame b:nth-child(1) { left: -5px; top: -5px; } .hs__frame b:nth-child(2) { right: -5px; top: -5px; }
.hs__frame b:nth-child(3) { left: -5px; bottom: -5px; } .hs__frame b:nth-child(4) { right: -5px; bottom: -5px; }
.hs--crest .hs__steps, .hs--crest .hs__helm, .hs--crest .hs__col--ho { grid-row: 1 / 4; }
.hs--crest .hs__col::before, .hs--crest .hs__col::after, .hs--crest .hs__helm::before, .hs--crest .hs__helm::after { content: ""; position: absolute; left: 50%; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); background: currentColor; }
.hs--crest .hs__helm::before, .hs--crest .hs__helm::after { left: 6.75px; color: rgba(245,240,230,.85); }
.hs--crest .hs__col::before, .hs--crest .hs__helm::before { top: -4px; } .hs--crest .hs__col::after, .hs--crest .hs__helm::after { bottom: -4px; }
.hs--crest .hs__col--ho::after { opacity: 0; transition: opacity .5s; }
.hs--crest .hs__col--ho[style*="--g: 1"]::after, .hs--crest .hs__col--ho[style*="--g:1"]::after { opacity: 1; }
.hs--crest .hs__bar { box-shadow: 4px 0 0 -0px rgba(245,240,230,.25); }
.hs--crest .hs__col--adv .hs__line { background: rgba(178,171,160,.7); }
.hs--crest .hs__pt { width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid rgba(217,188,133,.55); background: var(--bg); transition: background .5s, box-shadow .5s; }
.hs--crest .hs__pt--adv { border-color: rgba(178,171,160,.8); background: rgba(178,171,160,.8); }
.hs--crest .hs__pt.is-lit { background: var(--accent-l); box-shadow: 0 0 0 4px rgba(217,188,133,.15), 0 0 14px rgba(217,188,133,.8); }
.hs--crest .hs__no { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; font-size: 14px; }
.hs--crest .hs__no::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(217,188,133,.6); transform: rotate(45deg); }
.hs--crest .hs__steps li { align-items: center; }

/* 案3 灯りの届く範囲 */
.hs--lamp { grid-template-rows: auto repeat(3, auto); }
.hs--lamp .hs__steps { grid-row: 2 / 5; }
.hs--lamp .hs__helm { grid-row: 1 / 5; }
.hs--lamp .hs__col--adv { grid-row: 2 / 3; }
.hs--lamp .hs__col--ho { grid-row: 2 / 5; }
.hs__lamp { grid-row: 1; justify-self: center; position: relative; z-index: 2; width: 40px; margin-bottom: -6px; }
.hs__lamp--adv { grid-column: 3; } .hs__lamp--ho { grid-column: 4; }
.hl__svg { display: block; width: 100%; height: auto; overflow: visible; }
.hs__lamp--adv .hl__svg { opacity: .6; }
.hl__glow { opacity: 1; } .hl__halo { opacity: .45; filter: blur(4px); }
.hl__flame { transform-origin: 100px 122px; filter: drop-shadow(0 0 6px #ffcf70) drop-shadow(0 0 14px rgba(255,190,90,.8)); animation: hs-flick 1.9s ease-in-out infinite; }
.hs__lamp--adv .hl__flame { animation-delay: -.8s; }
@keyframes hs-flick { 0%,100% { transform: scale(1) } 40% { transform: scale(.94,1.06) } 70% { transform: scale(1.04,.96) } }
.hs--lamp .hs__col .hs__vt { top: 14px; }
.hs__beam { position: absolute; left: 50%; top: 0; bottom: 0; width: 34px; margin-left: -17px; pointer-events: none; }
.hs__beam::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,214,138,.34), rgba(255,214,138,.12) 55%, rgba(255,214,138,.05)); filter: blur(5px); border-radius: 40% 40% 0 0 / 12% 12% 0 0; }
.hs__beam::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: linear-gradient(180deg, rgba(255,226,160,.9), rgba(217,188,133,.55)); box-shadow: 0 0 6px rgba(255,210,130,.8); }
.hs__col--adv .hs__beam { -webkit-mask: linear-gradient(180deg, #000 40%, transparent 100%); mask: linear-gradient(180deg, #000 40%, transparent 100%); opacity: .75; }
.hs__col--ho .hs__beam { clip-path: inset(0 -30px calc((1 - var(--g)) * 100%) -30px); }
.hs--lamp .hs__steps li.is-lit { background: linear-gradient(90deg, rgba(255,214,138,0) 30%, rgba(255,214,138,.07)); }
.hs--lamp .hs__steps li.is-lit .hs__v { text-shadow: 0 0 16px rgba(255,200,120,.4); }
.hs__ring { position: absolute; left: 1px; top: -14px; width: 12px; height: 12px; border: 1.4px solid rgba(245,240,230,.8); border-radius: 50%; }
.hs--lamp .hs__helm .hs__vt { top: 8px; }

@media (max-width: 639.98px) {
  .hs { grid-template-columns: 34px minmax(0,1fr) 44px 52px; }
  .hs__vt { font-size: 12px; letter-spacing: .18em; }
  .hs__helm .hs__vt { left: 14px; }
  .hs__col .hs__vt { left: calc(50% + 9px); }
  .hs__steps li { gap: 10px; padding: 24px 8px; }
  .hs__v { font-size: 16.5px; letter-spacing: .06em; }
  .hs--crest { padding: 24px 10px; }
  .hs--crest .hs__no { width: 28px; height: 28px; font-size: 12.5px; }
  .hs__lamp { width: 32px; }
}
@media (prefers-reduced-motion: reduce) { .hs--star .hs__pt.is-lit svg, .hl__flame { animation: none; } }
.ho-tbl .nw { display: inline-block; font-weight: inherit; }
.hs--lamp .hs__steps li.is-lit { background: none; }
.hs--lamp .hs__steps li.is-lit .hs__v { text-shadow: 0 0 14px rgba(255,200,120,.45), 0 0 28px rgba(255,190,90,.18); }
.hs--lamp .hs__steps li.is-lit .hs__no { text-shadow: 0 0 10px rgba(255,200,120,.6); }

/* =========================================================
   ハンズオン型とは 第4弾（枠なしの紋章の意匠 ＋ 表と図を横に）
   ========================================================= */
:root[data-handson="4"] .hv--4 { display: block; }
:root[data-handson="4"]:not([data-handson="2"]):not([data-handson="3"]) .hv--1 { display: none; }
.hs--open { padding: 0; }
.hs--open .hs__frame { display: none; }

/* 10/3: 940〜1023px で2列になり、図だけが画面の右半分に止まって左が空いていた（JS は 1024px から文章を舞台に入れる）。1023px までは1列 */
@media (max-width: 1023.98px) { :root:not([data-handson="2"]) .handson__grid { grid-template-columns: minmax(0,1fr); } }
/* 案1・案3: 本文は上に横長（見出し｜本文）、その下に図と表 */
@media (min-width: 1024px) {
  :root:not([data-handson="2"]) .handson__grid { grid-template-columns: minmax(0,1fr); }
  :root:not([data-handson="2"]) .handson__text { position: static; display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); column-gap: clamp(40px,6vw,120px); align-items: end; padding-bottom: clamp(56px,6vw,88px); }
  :root:not([data-handson="2"]) .handson__text > .eyebrow { grid-column: 1; grid-row: 1; }
  :root:not([data-handson="2"]) .handson__title { grid-column: 1; grid-row: 2; }
  :root:not([data-handson="2"]) .handson__body { grid-column: 2; grid-row: 1 / 3; margin-top: 0; max-width: none; }
  :root:not([data-handson="2"]) .handson__figure { padding-top: 0; border-top: 1px solid var(--border-inv); padding-top: clamp(48px,5vw,72px); }
}
/* 案1: 図｜表 */
.ha { display: grid; gap: clamp(40px,5vw,72px); }
@media (min-width: 1024px) { .ha { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; } }
.ha .ho-tbl { margin: 0; }
.ha .hq__table--side { border-top: 1px solid var(--border-inv); }
.hv--1 .hs__close, .hv--4 .hs__close { margin-top: clamp(48px,6vw,80px); }
@media (min-width: 1024px) { .hv--1 .hs__close { margin-left: calc(50% + clamp(20px,2.5vw,36px)); } }

/* 案2: 表と図を1枚に */
.hu { --g: 0; position: relative; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1fr) minmax(0,1.2fr); }
.hu__panel { grid-column: 3; grid-row: 1 / 8; background: linear-gradient(180deg, rgba(217,188,133,.02), rgba(217,188,133,.07) 40%, rgba(217,188,133,.03)); border-left: 1px solid rgba(217,188,133,.35); }
.hu > * { padding: 0 clamp(12px,1.4vw,20px); }
.hu > .hu__panel { padding: 0; }
.hu__h, .hu__q, .hu__a { position: relative; }
.hu__h { grid-row: 1; padding-bottom: 16px; padding-top: 16px; border-bottom: 1px solid var(--border-inv); font-family: var(--serif-ja); font-size: 13px; line-height: 1.6; letter-spacing: .06em; color: var(--muted-inv); align-self: end; }
.hu__h--q { grid-column: 1; align-self: stretch; } .hu__h:nth-of-type(2) { grid-column: 2; } .hu__h--ho { grid-column: 3; color: var(--accent-l); }
.hu__q { grid-column: 1; padding-left: 0 !important; font-family: var(--serif-ja); font-size: 14px; color: var(--muted-inv); }
.hu__q, .hu__a { padding-top: clamp(18px,2vw,24px); padding-bottom: clamp(18px,2vw,24px); border-bottom: 1px solid var(--border-inv); line-height: 1.9; }
.hu__a { font-size: clamp(14px,1.1vw,15.5px); color: var(--sub-inv); } .hu__a.is-ho { grid-column: 3; color: var(--text-inv); } .hu__a:not(.is-ho) { grid-column: 2; }
.hu__q--1, .hu__a--1 { grid-row: 2; } .hu__q--2, .hu__a--2 { grid-row: 3; }
.hu__steps-h { grid-column: 1 / -1; grid-row: 4; padding: 22px 0 4px !important; font-size: 11.5px; letter-spacing: .2em; color: var(--muted-inv); }
.hu__s { grid-column: 1; display: flex; align-items: center; gap: 12px; padding-left: 0 !important; padding-top: 16px; padding-bottom: 16px; }
.hu__s .hs__no { font-size: 14px; } .hu__s .hs__v { font-size: clamp(15px,1.3vw,18px); }
.hu__r1 { grid-row: 5; } .hu__r2 { grid-row: 6; } .hu__r3 { grid-row: 7; }
.hu__s { opacity: .35; transition: opacity .6s; } .hu__s.is-lit { opacity: 1; }
/* 工程の柱: 列の文字の左端にそろえる */
.hu__line { grid-row: 5 / 8; position: relative; padding: 0 !important; margin-left: clamp(17px,1.9vw,25px); width: 1.5px; justify-self: start; }
.hu__line--adv { grid-column: 2; grid-row: 5 / 6; background: rgba(178,171,160,.7); margin-top: 8px; margin-bottom: 8px; }
.hu__line--ho { grid-column: 3; background: var(--accent-l); box-shadow: 0 0 8px rgba(217,188,133,.8); transform-origin: top; transform: scaleY(var(--g)); margin-top: 8px; margin-bottom: 8px; }
.hu__pt { position: relative; z-index: 1; padding: 0 !important; align-self: center; justify-self: start; margin-left: clamp(12px,1.4vw,20px); width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid rgba(217,188,133,.55); background: var(--bg); transition: background .5s, box-shadow .5s, opacity .5s; }
.hu__pt--adv { grid-column: 2; } .hu__pt--ho { grid-column: 3; }
.hu__pt--adv.is-on { border-color: rgba(178,171,160,.9); background: rgba(178,171,160,.9); }
.hu__pt.is-off { border-color: rgba(178,171,160,.35); border-style: dashed; opacity: .6; }
.hu__pt--ho.is-lit { background: var(--accent-l); box-shadow: 0 0 0 4px rgba(217,188,133,.15), 0 0 14px rgba(217,188,133,.8); }
.hu__q--helm { grid-row: 8; border-top: 1px solid var(--border-inv); border-bottom: 0; padding-top: 28px; }
.hu__helm { grid-column: 2 / -1; grid-row: 8; position: relative; display: flex; flex-direction: column; padding-top: 28px; padding-bottom: 8px; border-top: 1px solid var(--border-inv); }
.hu__helm::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(245,240,230,.85); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.hu__helm.is-lit::before { transform: scaleX(1); }
.hu__helm-v { font-family: var(--serif-ja); font-size: clamp(26px,2.6vw,34px); letter-spacing: .2em; color: var(--text-inv); }
.hu__helm-n { margin-top: 8px; font-size: clamp(13.5px,1.05vw,15px); line-height: 1.9; color: var(--sub-inv); }
.hu .nw, .ht .nw { display: inline-block; font-weight: inherit; }
@media (max-width: 639.98px) {
  .hu { grid-template-columns: minmax(0,.95fr) minmax(0,.9fr) minmax(0,1.1fr); }
  .hu > * { padding: 0 8px; }
  .hu__h { font-size: 11.5px; }
  .hu__q { font-size: 12.5px; } .hu__a { font-size: 12.5px; line-height: 1.8; }
  .hu__s { gap: 6px; } .hu__s .hs__v { font-size: 13.5px; letter-spacing: .04em; } .hu__s .hs__no { font-size: 12px; }
  .hu__line { margin-left: 13px; } .hu__pt { margin-left: 8px; }
}

/* 案3: スクロールで1問ずつ */
.hpin { position: relative; height: calc(300 * var(--svh, 1svh)); }
.hpin__stage { position: sticky; top: 0; height: var(--svh100, 100svh); display: grid; align-content: center; gap: 32px; padding-top: 72px; }
@media (min-width: 1024px) { .hpin__stage { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); column-gap: clamp(40px,5vw,80px); align-items: center; } }
.hpin__cards { position: relative; min-height: 250px; }
.hpin__card { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
[data-stage="1"] .hpin__card--1, [data-stage="2"] .hpin__card--2, [data-stage="3"] .hpin__card--3 { opacity: 1; transform: none; pointer-events: auto; }
.hpin__q { display: flex; align-items: baseline; gap: 16px; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-inv); font-family: var(--serif-ja); font-size: clamp(22px,2.2vw,30px); letter-spacing: .08em; color: var(--text-inv); }
.hpin__qn { font-size: 13px; letter-spacing: .1em; color: var(--accent-l); }
.hpin__ans { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 24px; }
.hpin__ans p { margin: 0; font-size: clamp(14px,1.15vw,16px); line-height: 1.9; color: var(--sub-inv); }
.hpin__ans .hq__ho { color: var(--text-inv); }
.hpin__note { margin: 24px 0 0; font-size: clamp(14px,1.1vw,15.5px); line-height: 1.9; color: var(--sub-inv); }
.hpin__dots { position: absolute; left: 0; bottom: -44px; display: flex; gap: 10px; }
.hpin__dots i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--accent); transition: background .4s; }
[data-stage="1"] .hpin__dots i:nth-child(1), [data-stage="2"] .hpin__dots i:nth-child(2), [data-stage="3"] .hpin__dots i:nth-child(3) { background: var(--accent-l); }
.hpin__cards { margin-bottom: 44px; }
/* 図の該当箇所を光らせる */
.hs--stage .hs__steps li, .hs--stage .hs__col, .hs--stage .hs__pt, .hs--stage .hs__helm { transition: opacity .5s var(--ease), filter .5s; }
.hs--stage .hs__steps li { opacity: 1; }
[data-stage="1"] .hs--stage .hs__helm { opacity: .3; }
[data-stage="2"] .hs--stage .hs__steps li:not(:nth-child(2)), [data-stage="2"] .hs--stage .hs__helm, [data-stage="2"] .hs--stage .hs__pt--1, [data-stage="2"] .hs--stage .hs__pt--3, [data-stage="2"] .hs--stage .hs__pt--adv { opacity: .25; }
[data-stage="2"] .hs--stage .hs__steps li:nth-child(2) .hs__v { text-shadow: 0 0 16px rgba(217,188,133,.5); }
[data-stage="3"] .hs--stage .hs__col, [data-stage="3"] .hs--stage .hs__pt { opacity: .25; }
[data-stage="3"] .hs--stage .hs__bar { box-shadow: 0 0 10px rgba(245,240,230,.8); }
[data-stage="3"] .hs--stage .hs__helm .hs__vt { text-shadow: 0 0 12px rgba(245,240,230,.7); }
.hs--stage .hs__pt--1, .hs--stage .hs__pt--2, .hs--stage .hs__pt--3 { background: var(--accent-l); box-shadow: 0 0 0 4px rgba(217,188,133,.15), 0 0 14px rgba(217,188,133,.8); }
@media (max-width: 1023.98px) {
  .hpin__stage { padding-top: 80px; gap: 20px; align-content: start; }
  .hpin__fig .hs__steps li { padding: 16px 8px; }
  .hpin__cards { min-height: 290px; }
  .hpin__ans { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 16px; }
  .hpin__q { font-size: 20px; margin-bottom: 14px; padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hpin { height: auto; } .hpin__stage { position: static; height: auto; } }

/* 案4: 切り替えて比べる */
.ht__tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: clamp(28px,3vw,40px); border: 1px solid var(--border-inv); }
.ht__tab { appearance: none; background: none; border: 0; padding: 14px 10px; font-family: var(--serif-ja); font-size: 14px; line-height: 1.5; letter-spacing: .06em; color: var(--muted-inv); cursor: pointer; transition: background .4s, color .4s; }
.ht__tab small { display: block; font-size: 11.5px; }
.ht__tab + .ht__tab { border-left: 1px solid var(--border-inv); }
.ht__tab[aria-selected="true"] { background: rgba(217,188,133,.1); color: var(--accent-l); box-shadow: inset 0 -2px 0 var(--accent-l); }
.ht__tab:focus-visible { outline: 1px solid var(--accent-l); outline-offset: 2px; }
.ht__body { display: grid; gap: 32px; }
@media (min-width: 640px) { .ht__body { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); column-gap: clamp(24px,3vw,40px); align-items: start; } }
.ht__ans { grid-column: -2; grid-row: 1; margin: 0; transition: opacity .5s var(--ease); }
@media (max-width: 639.98px) { .ht__ans { grid-column: 1; grid-row: 2; } }
.ht[data-sel="ho"] .ht__ans--adv, .ht[data-sel="adv"] .ht__ans--ho { opacity: 0; visibility: hidden; }
.ht__row { padding: 14px 0; border-bottom: 1px solid var(--border-inv); }
.ht__row:first-child { border-top: 1px solid var(--border-inv); }
.ht__row dt { font-size: 12px; letter-spacing: .1em; color: var(--muted-inv); }
.ht__row dd { margin: 4px 0 0; font-size: clamp(14px,1.15vw,16px); line-height: 1.85; color: var(--text-inv); }
.hs--toggle .hs__steps li { opacity: 1; transition: opacity .5s; }
.hs--toggle .hs__col, .hs--toggle .hs__pt { transition: opacity .5s var(--ease); }
.ht[data-sel="adv"] .hs--toggle .hs__col--ho, .ht[data-sel="adv"] .hs--toggle .hs__pt--1, .ht[data-sel="adv"] .hs--toggle .hs__pt--2, .ht[data-sel="adv"] .hs--toggle .hs__pt--3 { opacity: .12; }
.ht[data-sel="adv"] .hs--toggle .hs__steps li:not(:first-child) { opacity: .28; }
.ht[data-sel="ho"] .hs--toggle .hs__col--adv, .ht[data-sel="ho"] .hs--toggle .hs__pt--adv { opacity: .2; }
.hs--toggle .hs__col--ho { --g: 1; }
.hs--toggle .hs__pt--1, .hs--toggle .hs__pt--2, .hs--toggle .hs__pt--3 { background: var(--accent-l); box-shadow: 0 0 0 4px rgba(217,188,133,.15), 0 0 14px rgba(217,188,133,.8); }
.ht[data-sel="adv"] .hs--toggle .hs__pt--adv { box-shadow: 0 0 0 4px rgba(245,240,230,.1), 0 0 12px rgba(245,240,230,.5); }
/* 案2: 工程名が折れないよう1列目を広く */
.hu { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.2fr); }
.hu__s .hs__v { white-space: nowrap; }
.hu__pt.is-off { opacity: .9; border-color: rgba(178,171,160,.55); }
/* 案4: 図と答えを横並び（本文は上） */
@media (min-width: 1024px) { .ht__body { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); column-gap: clamp(48px,6vw,96px); } .ht__tabs { max-width: 640px; } }
@media (min-width: 1024px) { .hv--4 .hs__close { margin-left: calc(53.5% + clamp(24px,3vw,48px)); } }
@media (max-width: 639.98px) {
  .hu { grid-template-columns: 88px minmax(0,1fr) minmax(0,1.2fr); }
  .hu .nw { display: inline; }
  .hu__s { display: grid; gap: 2px; padding-top: 12px; padding-bottom: 12px; }
  .hu__s .hs__v { white-space: normal; font-size: 13.5px; line-height: 1.5; }
  .hu__q, .hu__a { padding-top: 14px; padding-bottom: 14px; }
  .hu__helm-v { font-size: 24px; }
  .hpin__stage { padding-top: 96px; }
}

/* ---- 採用: 案3（スクロールで1問ずつ）の仕上げ ---- */
/* 1問目: 線が届いた工程から灯る */
.hs--stage .hs__pt--1, .hs--stage .hs__pt--2, .hs--stage .hs__pt--3 { background: var(--bg); box-shadow: none; }
.hs--stage .hs__pt.is-lit { background: var(--accent-l); box-shadow: 0 0 0 4px rgba(217,188,133,.15), 0 0 14px rgba(217,188,133,.8); }
[data-stage="1"] .hs--stage .hs__steps li:not(.is-lit) { opacity: .3; }
[data-stage="1"] .hs--stage .hs__steps li.is-lit .hs__v { text-shadow: 0 0 14px rgba(217,188,133,.35); }
.hpin__ans { align-items: start; }
.hpin__col { margin: 0; }
.hpin__ks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hpin__k { display: flex; align-items: baseline; gap: 10px; font-size: clamp(14px,1.15vw,16px); line-height: 1.8; color: var(--sub-inv); opacity: .3; transition: opacity .5s var(--ease), color .5s, text-shadow .5s; }
.hpin__k.is-lit { opacity: 1; }
.hq__ho .hpin__k.is-lit { color: var(--text-inv); text-shadow: 0 0 12px rgba(217,188,133,.3); }
.hpin__n { position: relative; flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; font-style: normal; font-size: 11px; color: var(--accent-l); }
.hpin__n::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(217,188,133,.6); transform: rotate(45deg); }
.hpin__k.is-adv .hpin__n { color: var(--muted-inv); } .hpin__k.is-adv .hpin__n::before { border-color: rgba(178,171,160,.7); }

/* PC: 本文を上に止めたまま、その下で図とカードが切り替わる（本文を読みながらスクロールできる） */
@media (min-width: 1024px) {
  :root[data-handson="3"] .handson__grid { padding-top: clamp(80px,9vw,120px); }
  :root[data-handson="3"] .handson__text { position: sticky; top: var(--hs-text-top, 120px); z-index: 2; padding-top: 0; padding-bottom: 0; align-self: start; }
  :root[data-handson="3"] .handson__figure { border-top: 0; padding-top: 36px; }
  :root[data-handson="3"] .hpin { height: calc(230 * var(--svh, 1svh)); }
  :root[data-handson="3"] .hpin__stage { top: var(--hs-top, 360px); height: auto; padding-top: 28px; border-top: 1px solid var(--border-inv); align-content: start; align-items: start; }
  :root[data-handson="3"] .hpin__cards { min-height: 300px; }
}

/* =========================================================
   Hero: フクロウが来るまで画面に止めて、スクロールしても動画が見られる
   ========================================================= */
.hero { display: block; min-height: 0; height: calc(180 * var(--svh, 1svh)); overflow: clip; }
.hero__pin { position: sticky; top: 0; height: var(--svh100, 100svh); min-height: var(--svh100, 100svh); overflow: hidden; display: flex; align-items: flex-end; }
@media (min-width: 1024px) { .hero__pin { align-items: center; } }
@media (prefers-reduced-motion: reduce) { .hero { height: auto; } .hero__pin { position: relative; } }
/* 文字: 手紙を放すころから 見出し → 本文 → ボタン の順に */
.hero__body > * { transition: opacity 1s var(--ease), transform 1.2s var(--ease), filter 1s var(--ease); }
.hero.is-waiting:not(.is-text) .hero__body > * { opacity: 0; transform: translateY(14px); filter: blur(4px); pointer-events: none; }
.hero.is-text .hero__lead { transition-delay: .7s; }
.hero.is-text .hero__cta { transition-delay: 1.3s; }
/* 念のため: スクリプトが動かなくても10秒後には文字を出す */
.hero.is-waiting:not(.is-text) .hero__body > * { animation: hero-fallback 0s linear 10s forwards; }
@keyframes hero-fallback { to { opacity: 1; transform: none; filter: none; pointer-events: auto; } }
/* 案3 調整: 図の上の区切り線をなくし、線は問いに合わせて珠ごとに伸びる */
@media (min-width: 1024px) {
  :root[data-handson="3"] .hpin__stage { border-top: 0; padding-top: 0; }
  :root[data-handson="3"] .handson__figure { padding-top: 72px; }
}
.hs--stage .hs__col--ho .hs__line { transition: transform .9s var(--ease); }
.hs--stage .hs__pt { transition: background .5s .35s, box-shadow .5s .35s, opacity .5s; }
[data-stage="2"] .hs--stage .hs__pt--1, [data-stage="2"] .hs--stage .hs__pt--3, [data-stage="2"] .hs--stage .hs__pt--adv { opacity: 1; }
[data-stage="3"] .hs--stage .hs__col, [data-stage="3"] .hs--stage .hs__pt { opacity: 1; }
@media (min-width: 1024px) { :root[data-handson="3"] .hpin__fig .hs__steps li { padding-top: 26px; padding-bottom: 26px; } :root[data-handson="3"] .hpin__cards { min-height: 240px; } }
@media (max-width: 1023.98px) { .hpin__stage { align-content: center; padding-top: 68px; } }

/* ---- ハンズオン（案3）: 本文も舞台の中へ。本文と図の間を広めに ---- */
@media (min-width: 1024px) {
  :root[data-handson="3"] .hpin__stage { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); row-gap: clamp(88px,9vw,120px); }
  :root[data-handson="3"] .hpin__stage > .handson__text { grid-column: 1 / -1; position: static; padding: 0; }
  :root[data-handson="3"] .handson__figure { padding-top: 0; }
  :root[data-handson="3"] .hpin { height: calc(240 * var(--svh, 1svh)); }
}

/* ---- ヒーロー: 拡大も延長もなし。1画面のファーストビューで、動画が終わるまでは固定 ---- */
.hero { height: auto; min-height: var(--svh100, 100svh); }
.hero__pin { position: relative; }
.hero__stage, .hero__spots { transform: none !important; }
html.is-intro, html.is-intro body { overflow: hidden; }
/* 文字は3つ同時に、不透明度だけでふわっと（手紙を放すころから静止画になるまで） */
.hero__body > * { transition: opacity 2s ease; transform: none; filter: none; }
.hero.is-waiting:not(.is-text) .hero__body > * { opacity: 0; transform: none; filter: none; }
.hero.is-text .hero__lead, .hero.is-text .hero__cta { transition-delay: 0s; }

/* ---- お問い合わせのボタン: 背景の動画の上でも読めるよう、ボタンの内側だけ暗く ---- */
.contact__cta { isolation: isolate; }
.contact__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(10,9,8,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  clip-path: polygon(5% 8.93%, 95% 8.93%, 95% 14.3%, 96.36% 14.3%, 96.36% 19.6%, 97.73% 19.6%, 97.73% 80.4%, 96.36% 80.4%, 96.36% 85.7%, 95% 85.7%, 95% 91.07%, 5% 91.07%, 5% 85.7%, 3.64% 85.7%, 3.64% 80.4%, 2.27% 80.4%, 2.27% 19.6%, 3.64% 19.6%, 3.64% 14.3%, 5% 14.3%); }
/* 枠の絵は暗い板より手前に（背景に置くと板の下に隠れるため、枠は ::after に移す） */
.contact__cta, .contact__cta:hover { background: none; }
.contact__cta::before { background: rgba(9,8,8,.7); }
.contact__cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url(/assets/button.svg) center / 100% 100% no-repeat; }
/* お問い合わせのボタン: 暗さを控えめに。板は枠の線より少し内側で切る（どの状態でも角がはみ出さない） */
.contact__cta::before { background: rgba(9,8,8,.42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  clip-path: polygon(5.34% 10.27%, 94.66% 10.27%, 94.66% 15.63%, 96.02% 15.63%, 96.02% 20.98%, 97.39% 20.98%, 97.39% 79.02%, 96.02% 79.02%, 96.02% 84.38%, 94.66% 84.38%, 94.66% 89.73%, 5.34% 89.73%, 5.34% 84.38%, 3.98% 84.38%, 3.98% 79.02%, 2.61% 79.02%, 2.61% 20.98%, 3.98% 20.98%, 3.98% 15.63%, 5.34% 15.63%); }

/* ---- ヒーローの手紙とペン: モヤ（中の光だまり・内側の光）をなくし、輪だけくっきり ---- */
.spot::before { display: none; }
.spot__ring { box-shadow: 0 0 10px rgba(217,188,133,.35); }

/* ---- スマホ: 動画を上に小さめ（少し遠く）に置き、文字はその下へ。手紙とペンが文字に隠れず押せる ----
   10/1: iPad の縦向き（768〜1023px）も同じ並びに（見出しとボタンが机に重なり、手紙とペンの目印が出ていなかった） */
@media (max-width: 767.98px), (max-width: 1023.98px) and (orientation: portrait), (orientation: landscape) and (max-height: 500px) {
  .hero__pin { flex-direction: column; justify-content: flex-end; }
  .hero__stage, .hero__spots { inset: 0 0 auto 0; height: calc(55 * var(--svh, 1svh)); }
  .hero__overlay { inset: 0 0 auto 0; height: calc(calc(55 * var(--svh, 1svh)) + 1px);
    background: linear-gradient(180deg, rgba(var(--bg-rgb),.55) 0%, rgba(var(--bg-rgb),0) 16%, rgba(var(--bg-rgb),0) 91%, var(--bg) 100%); }
  .hero__inner { padding-top: 0; padding-bottom: 28px; }
  .hero__title { margin-top: 0; }
  .hero__lead { margin-top: 14px; line-height: 1.85; }
  .hero__cta { margin-top: 22px; }
  /* 目印の吹き出しは短く、どちらも上に出す（下は文字があるため） */
  .spot__to { display: none; }
  .spot--pen .spot__hint { top: auto; bottom: calc(100% + 18px); }
  .spot--pen .spot__hint::after { top: 100%; bottom: auto; margin: -5px 0 0 -5px; transform: rotate(45deg); }
  .spot--letter .spot__hint { bottom: calc(100% + 18px); }
  .spot__hint { padding: 6px 10px 6px 6px; font-size: 12px; }
}
@media (max-width: 767.98px), (max-width: 1023.98px) and (orientation: portrait), (orientation: landscape) and (max-height: 500px) {
  .hero { --hs: min(calc(55 * var(--svh, 1svh)), calc(var(--svh100, 100svh) - 380px)); }
  .hero__stage, .hero__spots { height: var(--hs); }
  .hero__overlay { height: calc(var(--hs) + 1px); }
}
/* iPad の縦向きは画面が高いので、絵を大きめにして文字との間を詰める（10/1） */
@media (min-width: 768px) and (max-width: 1023.98px) and (orientation: portrait) { .hero { --hs: calc(var(--svh100, 100svh) - 400px); } }
/* 10/3: 幅 360px 未満（初代 iPhone SE など）は、見出しが絵の机にかかって手紙とペンの目印が出なかった。文字を少し小さくして絵を広げる */
@media (max-width: 359.98px) {
  .hero { --hs: min(calc(55 * var(--svh, 1svh)), calc(var(--svh100, 100svh) - 318px)); }
  .hero__title { font-size: 28px; line-height: 1.4; }
  .hero__lead { font-size: 13px; line-height: 1.8; margin-top: 10px; }
  .hero__cta { margin-top: 16px; }
}
/* スマホの横向き（高さ 500px まで）: 10/3 まで絵の高さが0になったり（667×375）、見出しの上が切れたり（844×390）して、手紙とペンの目印も出なかった。
   絵を画面の高さいっぱいに置き、文字はその下に続ける（スクロールで読む） */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { --hs: calc(var(--svh100, 100svh) - 24px); }
  .hero__pin { height: auto; min-height: var(--svh100, 100svh); display: block; }
  .hero__inner { padding-top: calc(var(--hs) + 20px); padding-bottom: 40px; }
  .hero__layer { object-position: 45% 90%; }   /* 机（手紙とペン）が切れないよう下寄せ。js/main.js の placeSpots と同じ値 */
}
.hero.is-tight .spot__txt { display: none; }
.hero.is-tight .spot__hint { padding: 5px; gap: 0; }
/* PC: 暗がりは文字の後ろだけ。机（手紙・ペン）の高さでは暗くしない */
@media (min-width: 1024px) {
  .hero__overlay { background: linear-gradient(180deg, rgba(var(--bg-rgb),.5) 0%, rgba(var(--bg-rgb),0) 20%, rgba(var(--bg-rgb),0) 95%, var(--bg) 100%); }
  .hero__overlay::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(var(--bg-rgb),.92) 0%, rgba(var(--bg-rgb),.62) 40%, rgba(var(--bg-rgb),.1) 68%, rgba(var(--bg-rgb),0) 80%);
    -webkit-mask: linear-gradient(180deg, #000 0%, #000 70%, transparent 84%); mask: linear-gradient(180deg, #000 0%, #000 70%, transparent 84%); }
}
/* 横長の大画面: 絵の縦位置は JS が決める（机が画面に入る位置）。ペンの吹き出しは上に */
@media (min-width: 1024px) {
  .hero__layer { object-position: var(--hero-px, 62%) var(--hero-py, 40%); }
  .hero.is-wide .spot--pen .spot__hint { top: auto; bottom: calc(100% + 26px); }
  .hero.is-wide .spot--pen .spot__hint::after { top: 100%; bottom: auto; margin: -5px 0 0 -5px; transform: rotate(45deg); }
}

/* ---- お問い合わせのボタン（9/28）: Safari はぼかし（backdrop-filter）の板に clip-path が効かず、四角い黒が角からはみ出す。
   ぼかしと切り抜きをやめ、枠の外側の線と同じ段付きの形を SVG で塗って暗い板にする ---- */
.contact__cta::before {
  -webkit-backdrop-filter: none; backdrop-filter: none; clip-path: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 112' preserveAspectRatio='none'%3E%3Cpolygon fill='%23090808' fill-opacity='.5' points='22 10 418 10 418 16 424 16 424 22 430 22 430 90 424 90 424 96 418 96 418 102 22 102 22 96 16 96 16 90 10 90 10 22 16 22 16 16 22 16 22 10'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---- ハンズオン（案3・9/28） ---- */
/* 3/3 の結び「私たちがいなければ〜」は大事な一文なので、明朝で大きく */
.hpin__note { margin-top: clamp(28px,3vw,40px); padding-top: clamp(20px,2vw,28px); border-top: 1px solid var(--border-inv); font-family: var(--serif-ja); font-size: clamp(20px,2vw,28px); line-height: 1.75; letter-spacing: .08em; color: var(--text-inv); text-shadow: 0 0 18px rgba(217,188,133,.25); }
/* 「助言まで」は方針を決めるまでしか関わらない: 始まりの珠と 01 の珠の2つだけを結ぶ（下の珠と、その先の線はなし） */
.hs--crest .hs__col--adv::after { display: none; }
.hs--crest .hs__col--adv .hs__line { bottom: 50%; }
@media (min-width: 1024px) {
  /* 本文2つと図の間を広げ、図を大きく（工程の間を広げて縦の線を長くし、スクロールで伸びる動きを見せる）
     画面の高さに合わせて広げ、止まっている間に図が画面からはみ出さないようにする */
  :root[data-handson="3"] .hpin__stage { row-gap: clamp(88px, calc((var(--svh100, 100svh) - 760px) * .38 + 88px), 160px); }
  :root[data-handson="3"] .hpin__fig .hs__steps li { padding-top: clamp(26px, calc((var(--svh100, 100svh) - 760px) * .16 + 30px), 60px); padding-bottom: clamp(26px, calc((var(--svh100, 100svh) - 760px) * .16 + 30px), 60px); }
  :root[data-handson="3"] .hpin__fig .hs__v { font-size: clamp(20px,1.9vw,27px); }
  :root[data-handson="3"] .hpin { height: calc(280 * var(--svh, 1svh)); }
}
.hpin__note .nw { display: inline-block; }
@media (min-width: 1024px) { :root[data-handson="3"] .hpin__cards { min-height: 340px; } }

/* ---- カードのホバー（9/28）: 枠の光は突然つけず、放射線と同じくぼやっと浮かんでくる ----
   光の強さ --gl を 0→1 へゆっくり移し（離すと同じくゆっくり消える）、光りきったあとは --gp でゆるく脈打つ。
   転送中の明るさの変化は、描き直しが重いのでやめた */
@property --gl { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --gp { syntax: '<number>'; inherits: false; initial-value: 1; }
.card--frame .card__frame,
.cards.is-tp .card--frame .card__frame,
.card--frame:hover .card__frame {
  filter:
    drop-shadow(0 calc(24px + var(--gl) * 8px) calc(24px + var(--gl) * 4px) rgba(0,0,0,.55))
    drop-shadow(0 0 calc(var(--gl) * var(--gp) * 10px) rgba(243,208,138, calc(var(--gl) * .55)))
    drop-shadow(0 0 calc(var(--gl) * var(--gp) * 28px) rgba(243,208,138, calc(var(--gl) * .35)));
  transition: transform .45s cubic-bezier(.2,.9,.3,1.3), --gl 1.1s ease;
}
.card--frame[aria-current="page"] .card__frame { --gl: .45; }
@media (hover: hover) { .card--frame:hover .card__frame { --gl: 1; animation: frame-breathe 3.4s ease-in-out 1.1s infinite; } }
@keyframes frame-breathe { 0%, 100% { --gp: 1; } 50% { --gp: 1.35; } }
.cards.is-tp .card:not(.is-tp-done) .card__frame { transition: none; }

/* ---- スマホの3つの関わり方（9/28）: 軽く、なめらかに ----
   ・タップで :hover が残り、光の脈打ちが回り続けて重くなるので、触る端末ではホバーの演出を切る
   ・左右のカードの暗さは明るさフィルターをやめて透明度だけで（フィルターの描き直しが重い）。カードは GPU の層に載せる
   ・転送はスクロール量に合わせて進めず、カードが画面に入ったら一定の時間で最後まで流す（--tp を CSS で 0→1） */
@property --tp { syntax: '<number>'; inherits: true; initial-value: 0; }
@media (hover: none) {
  .card--frame:hover .card__burst { opacity: 0; animation: none; }
  .card--frame:hover .card__frame { animation: none; transform: none; }
}
@media (max-width: 1023.98px) {
  .cards-pin.is-deck .card { filter: none; opacity: calc(1 - var(--ka) * .45); will-change: transform; backface-visibility: hidden;
    transition: transform .6s cubic-bezier(.3,1.25,.5,1), opacity .45s var(--ease), --tp 1.3s cubic-bezier(.45,0,.2,1); }
  .cards-pin.is-deck .card.is-now { filter: none; }
  .cards-pin.is-deck .cards.is-dragging .card { transition: --tp 1.3s cubic-bezier(.45,0,.2,1); }
  .cards-pin.is-deck .cards.is-tp .card { --tp: 0; }
  .cards-pin.is-deck .cards.is-tp.is-tp-go .card { --tp: 1; }
  .cards-pin.is-deck .card__frame { filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)); }
  .cards-pin.is-deck .card.is-now .card__frame { filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(217,188,133,.22)); }
}

/* ---- ヒーローの目印（9/28）: 動画の途中から出す。ペンは最初から机にあるので早めに、手紙は着地したら ---- */
.hero.is-pen .spot--pen, .hero.is-letter .spot--letter { opacity: 1; visibility: visible; transition: opacity .8s var(--ease); }

/* ---- 詳細ページの「3つの関わり方」（9/28）: 現在のページのカードは最初から裏返し（番号・「現在のページ」・名前）、リンクにしない ---- */
.card__back { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
  background: radial-gradient(ellipse 70% 55% at 50% 45%, rgba(217,188,133,.12), transparent 70%), #1e1b17; border-radius: 2%;
  box-shadow: inset 0 0 0 1px rgba(195,164,104,.9), inset 0 0 0 7px #1e1b17, inset 0 0 0 8px rgba(195,164,104,.55); }
.card__back::before, .card__back::after { content: ""; position: absolute; left: 50%; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); background: #C3A468; }
.card__back::before { top: 5%; } .card__back::after { bottom: 5%; }
.card__back-no { font-family: var(--serif-en); font-size: 9cqw; line-height: 1; color: #C3A468; }
.card__back-label { font-family: var(--serif-ja); font-size: 3.6cqw; letter-spacing: .24em; color: var(--muted-inv); }
.card__back-name { font-family: var(--serif-ja); font-size: 6cqw; letter-spacing: .16em; color: var(--text-inv); text-shadow: 0 0 14px rgba(217,188,133,.35); }
.card--frame.is-here .card__back { display: flex; }
.card--frame.is-here { cursor: default; }
/* 最初から裏返しておく（表の中身は隠す）。ホバーしても何も起こらない */
.card--frame.is-here .card__frame > :not(.card__back) { opacity: 0; }
.card--frame.is-here .card__frame, .card--frame.is-here:hover .card__frame { --gl: .45; animation: none; transform: none; }
.card--frame.is-here .card__burst, .card--frame.is-here:hover .card__burst { opacity: 0; animation: none; }
.card.card--frame[aria-current="page"] { outline: 0; box-shadow: none; }   /* pages.css の四角い枠線（枠SVGより前の名残）を消す */
/* 現在のページのカードは、ホバーしていないときも光らせない（影だけ） */
.card.card--frame.is-here, .card.card--frame.is-here:hover { filter: none; }
.card--frame.is-here .card__frame, .card--frame.is-here:hover .card__frame { --gl: 0; }
.cards-pin.is-deck .card.is-here .card__frame { filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)); }

/* ---- 3つの関わり方を画面に止めて奥へ遠ざけ、その後ろで経済圏が始まる（9/28・以前の「現在地 → 経済圏」と同じ動き） ---- */
.orbit .service[data-recede] { position: sticky; }
.service__inner { transform-origin: 50% 40%; }
@media (prefers-reduced-motion: reduce) { .orbit .service[data-recede] { position: relative; } }
button.btn { font-family: inherit; }   /* <button> は書体を受け継がないので、送信ボタンもサイトの明朝に */

/* ---- スマホの重さ対策（9/29）----
   星の瞬き: 外側の不透明度は固定、中の点だけを固定値のキーフレームで（var() を使うと合成で動かず毎フレーム再計算になる）。
   値は元の見え方と同じ（外側 = 元の 1.6 倍、中 = 1/1.6・.25/1.6・1・.5/1.6） */
.star--tw { animation: none; background: none; }
.star--tw > i { position: absolute; inset: 0; border-radius: 50%; background: #F5E6C4; opacity: .625; animation: star-tw2 4s ease-in-out infinite; will-change: opacity, transform; }
@keyframes star-tw2 { 0%, 100% { opacity: .625; transform: none; } 42% { opacity: .156; } 50% { opacity: 1; transform: scale(1.25); } 58% { opacity: .3125; } }
@media (prefers-reduced-motion: reduce) { .star--tw > i { animation: none; } }
/* 画面の外にある段と、閉じたメニューのアニメーションは止める（main.js の data-anim-off） */
[data-anim-off] .star--tw > i, [data-anim-off] .lamp__fire, [data-anim-off] .spot__ring, [data-anim-off] .spot__hint, [data-anim-off] .menu__ring, [data-anim-off] .fstar__halo, [data-anim-off] .dusk__sky, [data-anim-off] .dusk__boat, [data-anim-off] .dusk__refl, [data-anim-off] .dusk__hull, [data-anim-off] .card__burst, [data-anim-off] .card__frame { animation: none !important; }   /* 一時停止（paused）は毎フレームの再計算が残るので、外す */

/* =========================================================
   改行のきまり（9/29）: 単語の途中で改行しない。改行してよいのは文節の切れ目（HTML の <wbr>。BudouX で入れている）と句読点のあとだけ。
   見出しは行の長さをそろえ（balance）、本文は最後の行が1〜2字だけにならないように（pretty）。
   それでも入りきらない長い語だけは、はみ出さないよう折る（break-word。最小幅の計算には影響しない）
   ========================================================= */
body { word-break: keep-all; overflow-wrap: break-word; line-break: strict; }
h1, h2, h3, h4, .h2, .fpanel__title, .fmap__title, .pflow__cname, .vc__title, .card__name, .prin__title, .dom__title { text-wrap-style: balance; }   /* 折り返すかどうか（nowrap）は変えない */
p, li, dd, .lead, .card__text, .dom__text, .prin__text, .vc__text, .pflow__text, .fmap__text { text-wrap-style: pretty; }
/* 手紙（9/29〜）も同じきまり。紙の枚数が変わらないかは js/letter.js の割り付け結果で確認済み */
/* 句のまとまり（読点・句点で区切った単位。main の HTML に .ph で入れている）: 行に入りきらなければ句の切れ目で改行する。句が1行より長いときだけ、句の中の文節で折れる */
.ph { display: inline-block; max-width: 100%; }
/* 切らないまとまり（.nw）はどこでも1かたまりに（入りきらないときだけ中で折れる） */
.nw { display: inline-block; max-width: 100%; font-weight: inherit; }
/* 文のかたまり（.s）はスマホでも1かたまりに。入りきらなければ文の頭で改行し、1文が1行より長いときだけ文節で折れる */
.s { display: inline-block; max-width: 100%; }
/* 経済圏の図の後ろの波紋（js/ripple.js）: 網の線より奥に */
.net-art__ripple { position: absolute; pointer-events: none; z-index: 0; }
.net-art__canvas, .net-art__over { z-index: 1; }

/* =========================================================
   ハンズオン（9/29 F案・採用）: 場面ごとに一文だけ、右のバーで「関わる範囲」を見せる
   場面1 助言だけ → 「方針」だけが白い光で太く灯る
   場面2 ExitPlan → 3つとも金の光で、左から順に満ちる
   場面3 舵 → 光は細い金の線に落ち着き、「私たちがいなければ〜」をいちばん大きく
   バーは星図と同じ語彙で: 細い金の線の上を、菱形の点で区切り、灯った区間だけ光の帯がにじむ
   ========================================================= */
.hb { grid-column: 1 / -1; width: 100%; min-width: 0; }
@media (min-width: 1024px) { .hb { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); column-gap: clamp(40px,6vw,120px); align-items: center; } }  /* 上の「見出し｜本文」と同じ割り付けで、バーの左端を本文にそろえる */
.hb__lines { display: grid; }
.hb__l { grid-area: 1 / 1; margin: 0; font-family: var(--serif-ja); font-weight: 500; font-size: clamp(21px,2.1vw,30px); line-height: 1.7; letter-spacing: .06em; color: var(--text-inv); opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-stage="1"] .hb__l[data-i="1"], [data-stage="2"] .hb__l[data-i="2"], [data-stage="3"] .hb__l[data-i="3"] { opacity: 1; transform: none; }
.hb__lead { margin: 0; font-size: clamp(16px,1.35vw,20px); line-height: 1.8; letter-spacing: .08em; color: var(--sub-inv); }
.hb__lead em { font-style: normal; color: var(--text-inv); }
.hb__key { margin: .45em 0 0; font-size: clamp(25px,2.7vw,40px); line-height: 1.55; letter-spacing: .06em; color: var(--accent-l); text-shadow: 0 0 24px rgba(217,188,133,.25); }
.hb__fig { margin-top: clamp(28px,calc(5 * var(--vh, 1vh)),52px); }
@media (min-width: 1024px) { .hb__fig { margin-top: 0; } }
.hb__cap { margin: 0 0 10px; font-size: 12px; letter-spacing: .24em; color: var(--muted-inv); }

.hb__strip { --th: 24px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
/* 下地の細い金の線 */
.hb__strip::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--th) / 2); height: 1px; background: linear-gradient(90deg, rgba(217,188,133,.4), rgba(217,188,133,.22)); }
.hb__seg { position: relative; padding-top: calc(var(--th) + 12px); --rgb: 240,214,160; }
.hb__t { display: flex; align-items: baseline; gap: 8px; padding-left: 14px; font-family: var(--serif-ja); font-size: clamp(14px,1.3vw,19px); letter-spacing: .16em; color: var(--muted-inv); transition: color .6s, opacity .6s; }
.hb__t b { font-family: var(--serif-en); font-weight: 400; font-size: .78em; letter-spacing: .04em; opacity: .8; }
/* 光は1本: 灯る範囲（--w: 1/3 か 全部）まで、区切りなしで伸びる。太さは菱形の中に収まる */
.hb__beam { position: absolute; left: 0; top: calc(var(--th) / 2 - 6px); height: 12px; width: calc(var(--w, 0) * 100%); overflow: hidden; pointer-events: none; --rgb: 240,214,160; transition: width 1.3s cubic-bezier(.45,0,.35,1); }
.hb__beam::before, .hb__beam::after { content: ""; position: absolute; left: 0; right: 0; transition: background .9s, box-shadow .9s; }
.hb__beam::before { top: 0; bottom: 0; background: linear-gradient(180deg, rgba(var(--rgb),0), rgba(var(--rgb),.45) 50%, rgba(var(--rgb),0)); }
.hb__beam::after { top: 50%; height: 2px; margin-top: -1px; background: rgb(var(--rgb)); box-shadow: 0 0 8px rgba(var(--rgb),.9); }
/* 灯った範囲を、光の粒がゆっくり流れる */
.hb__glint { position: absolute; top: 0; bottom: 0; left: 0; width: 120px; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,246,224,.75), rgba(255,246,224,0) 70%); opacity: 0; transition: opacity .6s; }
/* 区切りの菱形（光の帯より少し大きく、帯の端を隠す） */
.hb__node { position: absolute; z-index: 1; top: calc(var(--th) / 2); left: calc(var(--x) * 100% / 3); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; transform: rotate(45deg); border: 1px solid rgba(217,188,133,.6); background: var(--bg); --rgb: 240,214,160; transition: background .5s, border-color .5s, box-shadow .5s; }
.hb__node:last-of-type { margin-left: -11px; }
[data-stage="1"] .hb__node:nth-of-type(-n+2), [data-stage="2"] .hb__node { background: rgb(var(--rgb)); border-color: rgb(var(--rgb)); box-shadow: 0 0 10px rgba(var(--rgb),.9); }
[data-stage="1"] .hb__beam { --w: .3333; --rgb: 236,230,218; }
[data-stage="2"] .hb__beam, [data-stage="3"] .hb__beam { --w: 1; }
[data-stage="1"] .hb__glint, [data-stage="2"] .hb__glint { opacity: 1; animation: hb-glint 4.2s linear infinite; }
@keyframes hb-glint { from { left: -120px; } to { left: 100%; } }
/* 場面1: 助言だけ。「方針」だけが白い光 */
[data-stage="1"] .hb__node:nth-of-type(-n+2) { --rgb: 236,230,218; }
[data-stage="1"] .hb__seg:first-child .hb__t { color: var(--text-inv); }
[data-stage="1"] .hb__seg:not(:first-child) .hb__t { opacity: .45; }
/* 場面2: ExitPlan。金の光が左から伸び、届いた菱形から灯る */
[data-stage="2"] .hb__t { color: var(--accent-l); }
[data-stage="2"] .hb__node:nth-of-type(3) { transition-delay: .55s; }
[data-stage="2"] .hb__node:nth-of-type(4) { transition-delay: 1.05s; }
/* 場面3: 光は細い金の線に落ち着く（関わりは続くが、主役は一文） */
[data-stage="3"] .hb__beam::before { background: transparent; }
[data-stage="3"] .hb__beam::after { background: rgba(217,188,133,.6); box-shadow: none; }
[data-stage="3"] .hb__node { border-color: rgba(217,188,133,.8); background: rgba(217,188,133,.55); }
@media (prefers-reduced-motion: reduce) {
  .hb__lines { gap: 20px; } .hb__l { grid-area: auto; opacity: 1; transform: none; }
  .hb__glint { animation: none !important; opacity: 0 !important; }
}

/* 目印はマウスを乗せると指の形に（10/1: Mac の Safari では矢印のままで、押せると気づけなかった） */
.spot, .spot * { cursor: pointer; }
/* スマホは目印が小さい（ペン 45×14px ほど）ので、押せる範囲だけ周りに広げる（見た目は変えない。10/1: iPhone でペンが押せない） */
/* 10/1: 1733行目の display:none に消されて広がっていなかったので display を戻す。脈打つ輪は押す判定を持たない（隣の目印に重なって押し間違えるため） */
.spot__ring { pointer-events: none; }
@media (max-width: 1023.98px) { .spot::before { display: block; background: none; opacity: 1; content: ""; position: absolute; left: 50%; top: 50%; width: max(100% + 24px, 56px); height: max(100% + 28px, 48px); transform: translate(-50%, -50%); } }