/* ==========================================================================
   まつもと街ラボ — base stylesheet

   トーン: 計器・観測・ネットワーク図。白い地に細い線とノードが走る。
   面のパステルなぼかしは弱め、色は線とノード（コンステレーション）に集める。
   影は使わない。角丸は 0（完全に直角）。発光はコンステレーションだけに許可する。
   ライト固定（2026-09 にチラシに合わせてダークから切り替えた。ダークモードは作らない）。

   色・余白・字送りはすべて :root のトークン経由。あとから「色を変えて」で
   一括変更できるようにするため、値をベタ書きしないこと。
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- color --------------------------------------------------------------
     --c1〜--c4 は紫→青→水色→桃色の4色。--grad はその4色をこの順で回す
     グラデーションで、コンステレーションの線・ノード・数字・CTA など
     「色を感じさせたい箇所」だけに使う。地(--bg/--bg-alt)と本文(--ink/--ink-dim)は
     単色のまま。--accent はグラデーションが使えない場面のフォールバック。 */
  --bg:         #F7F7F9;
  --bg-alt:     #EEEEF3;
  --ink:        #15151D;
  --ink-dim:    #5B5B6B;
  --line:       rgba(21, 21, 29, .13);
  --line-strong: rgba(21, 21, 29, .26);
  --grid-line:  rgba(21, 21, 29, .05); /* ヒーローの方眼。--line よりさらに薄く */

  /* 白地で文字のグラデーションが読めるよう、ダーク時代より一段深い色にしてある */
  --c1: #6B55F2; /* 紫 */
  --c2: #2F78E8; /* 青 */
  --c3: #0FA592; /* 水色 */
  --c4: #E2468B; /* 桃色 */

  --accent:     #6B55F2;
  --accent-ink: #FFFFFF;
  --accent-2:   #2F78E8;
  --danger:     #D63B26;

  --grad:      linear-gradient(100deg, var(--c4) 0%, var(--c1) 32%, var(--c2) 64%, var(--c3) 100%);
  --grad-soft: linear-gradient(100deg, var(--c1), var(--c2) 55%, var(--c3));

  --ink-rgb:    21, 21, 29;
  --accent-rgb: 107, 85, 242;
  --accent-2-rgb: 47, 120, 232;

  /* --- font ----------------------------------------------------------------
     和文ディスプレイ: Noto Sans JP 900（ヒーロー見出し専用。他の和文見出しは 700）。
     欧文ディスプレイ: Archivo 700/900。数字・ラベル: JetBrains Mono。
     数字は必ず font-variant-numeric: tabular-nums を添える。 */
  --font-jp:   "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en:   "Archivo", "Helvetica Neue", Arial, var(--font-jp);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  /* --- layout ---------------------------------------------------------------- */
  --container:   1200px;
  --gutter:      24px;
  --gutter-sm:   20px;
  --section-y:   clamp(88px, 12vw, 160px);
  --head-gap:    clamp(48px, 7vw, 88px);
  --radius:      0; /* 角丸は全廃。2px も使わない */
  --radius-sm:   0;

  /* --- motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-rise: cubic-bezier(.16, 1, .3, 1);
  --dur:  200ms;
  --dur-fast: 160ms;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* 方眼・マーキーがはみ出しても横スクロールを作らない保険 */
}

/* ページ全体にうっすら色がにじむ層。
   これがないとヒーロー以外が真っ黒になり、色が「要所だけ」に見えてしまう。
   ページの高さいっぱいに広がる層なので、スクロールするにつれて
   紫 → 水色 → 桃 → 青 と、通過するセクションごとに色味が移り変わる。
   刷新前の6割程度まで不透明度を落としてある。色の主役はここではなく
   コンステレーション（線とノード）に移した。 */
body { position: relative; }
body::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 760px at  6%  3%, rgba(139, 123, 255, .14), transparent 70%),
    radial-gradient(820px 700px at 94% 11%, rgba( 53, 224, 200, .10), transparent 70%),
    radial-gradient(900px 780px at 10% 22%, rgba( 77, 155, 255, .10), transparent 70%),
    radial-gradient(860px 740px at 90% 33%, rgba(255, 111, 176, .10), transparent 70%),
    radial-gradient(900px 780px at  4% 45%, rgba(139, 123, 255, .11), transparent 70%),
    radial-gradient(860px 740px at 96% 56%, rgba( 77, 155, 255, .10), transparent 70%),
    radial-gradient(900px 760px at 12% 68%, rgba( 53, 224, 200, .10), transparent 70%),
    radial-gradient(880px 760px at 88% 79%, rgba(139, 123, 255, .11), transparent 70%),
    radial-gradient(920px 800px at  8% 91%, rgba(255, 111, 176, .10), transparent 70%),
    radial-gradient(860px 720px at 92% 99%, rgba( 77, 155, 255, .10), transparent 70%);
}

/* フィルムグレイン。feTurbulence の SVG を data URI にして全面へ薄く重ねる。
   グラデーションが「安いCSS」に見えないようにするための質感。
   opacity は .04〜.06 の範囲に収める（上げすぎない）。静止ノイズなので
   prefers-reduced-motion の対象になる「動き」はない。 */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.6%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* にじみ層・グレイン層より前に本文を出す */
.hdr, main, .ftr, .demobar { position: relative; z-index: 1; }
.hdr { z-index: 100; }
.demobar { z-index: 200; }
.rail { z-index: 150; } /* fixed 要素なので独立したスタッキングコンテキストを持つが、明示しておく */

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* .spot は tabindex="0" を持つ非リンク要素なので、キーボードフォーカス時に
   見える輪郭が要る。ここに含めておかないと連動ハイライトの主入口が
   フォーカスインジケータなしになってしまう。 */
:where(a, button, input, select, textarea, summary, .spot):focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 480px) {
  .container { padding-inline: var(--gutter-sm); }
}

/* ==========================================================================
   UTILITIES — ボタン / 注記 / reveal
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 28px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  min-height: 48px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  /* 単色塗りからグラデーション塗りへ。境界線は塗りと同化させるため透明に */
  background: var(--grad);
  background-size: 220% 220%;
  background-position: 0% 50%;
  border-color: transparent;
  color: var(--accent-ink);
  transition: background-position var(--dur) var(--ease), filter var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn--primary:hover { background-position: 100% 50%; filter: brightness(1.06); }

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--sm { padding: 11px 18px; font-size: 0.6875rem; min-height: 40px; }

.note {
  font-size: 0.75rem;
  color: var(--ink-dim);
  line-height: 1.8;
}

/* スクロールで出現。JS(IntersectionObserver) が .is-in を付ける。
   隠すのは <html class="js"> のときだけ。JS が落ちても本文が消えないようにするため */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hdr--scrolled {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--line);
}

.hdr__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 18px;
  transition: padding var(--dur) var(--ease);
}
.hdr--scrolled .hdr__inner { padding-block: 13px; }

.hdr__logo {
  font-family: var(--font-en); font-weight: 900; font-size: 1rem;
  letter-spacing: .02em; white-space: nowrap; z-index: 2;
}

.hdr__nav {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px);
}
.hdr__nav-link {
  position: relative;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em;
  color: var(--ink-dim); padding-block: 6px;
  transition: color var(--dur) var(--ease);
}
.hdr__nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.hdr__nav-link:hover,
.hdr__nav-link.is-active { color: var(--ink); }
.hdr__nav-link:hover::after,
.hdr__nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }

.hdr__cta { flex: none; }

.hdr__burger {
  display: none;
  position: relative; width: 44px; height: 44px; z-index: 2;
}
.hdr__burger-line {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) linear;
}
.hdr__burger-line:nth-child(1) { transform: translate(-50%, -50%) translateY(-6px); }
.hdr__burger-line:nth-child(2) { transform: translate(-50%, -50%); }
.hdr__burger-line:nth-child(3) { transform: translate(-50%, -50%) translateY(6px); }
body.is-menu-open .hdr__burger-line:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
body.is-menu-open .hdr__burger-line:nth-child(2) { opacity: 0; }
body.is-menu-open .hdr__burger-line:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* メニューは .hdr の外に置く。.hdr はスクロール後に backdrop-filter が付き、中の fixed 要素の
   基準がヘッダーの箱に変わってしまう（スクロール後に開くと崩れた原因）。
   ヘッダー（z-index 100）より下に敷くので、×ボタンはメニューの上に出て押せる。 */
.hdr__mobile {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column; gap: 6px;
  padding: 88px var(--gutter-sm) 32px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg);
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 48px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
body.is-menu-open .hdr__mobile {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s;
}
.hdr__mobile-link {
  display: block;
  padding: 16px 6px;
  min-height: 44px;
  font-family: var(--font-en); font-weight: 700; font-size: clamp(1.375rem, 6vw, 1.875rem);
  border-bottom: 1px solid var(--line);
}
.hdr__mobile-link:hover { color: var(--accent); }
/* 高さに余裕があれば中央寄せ、足りなければ上から並べてスクロールさせる */
.hdr__mobile-link:first-child { margin-top: auto; }
.hdr__mobile-link:last-child { margin-bottom: auto; }
body.is-menu-open .hdr { background: var(--bg); }

body.is-menu-open { overflow: hidden; }

@media (max-width: 860px) {
  .hdr__nav { display: none; }
  .hdr__cta { display: none; }
  .hdr__burger { display: block; }
}

/* 和文見出しの改行制御。
   word-break: auto-phrase は文節の切れ目で折り返す（対応ブラウザのみ）。
   text-wrap: balance と併用して「1文字だけ次の行に残る」のを防ぐ。
   ここを消すと見出しが「…選び直せ／る。」のように割れるので戻さないこと */
.hero__title,
.article h1,
.sec__headline,
.pillar__title,
.step__title,
.plan__name,
.proj__name,
.faq__q,
.about__p,
.sec__lead,
.pillar__text,
.step__text,
.spot__text,
.spot__rules-list li,
.spot__hours,
.spot__operator,
.plan__target,
.plan__feature,
.faq__a,
.faq__a-p,
.hero__lead,
.stats__label,
.note {
  word-break: auto-phrase;
  line-break: strict;
}
.hero__title,
.sec__headline,
.pillar__title,
.step__title,
.faq__q,
.article h1 {
  text-wrap: balance;
}
/* 本文全般も、文節の途中で割らず、最終行に1〜2文字だけ残る改行（「す。」「ん。」など）を
   避ける（依頼）。text-wrap: pretty は最終行が極端に短くならないよう前の行から調整する。
   見出しは上の balance を優先する */
p, li, dt, dd, th, td, summary, figcaption {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}

/* ==========================================================================
   HERO — 左寄せ・非対称。巨大見出し + 計器風データ列。
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(120px, 18vw, 180px) 0 0;
  overflow: clip; /* マーキー・方眼・ネットワーク断片が横に出ても body を広げない */
}

/* 薄い方眼。CSS のみ、画像は使わない。--line よりさらに薄い --grid-line */
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 64px);
}

/* にじんで溶け合う色の塊。刷新前の半分以下まで弱めてある（色の主役はコンステレーションへ）。
   .hero に overflow: clip があるのではみ出しても横スクロールは発生しない。 */
.hero__grid::before,
.hero__grid::after {
  content: "";
  position: absolute;
  width: min(46vw, 580px); height: min(46vw, 580px);
  border-radius: 50%;
  filter: blur(120px);
  mix-blend-mode: multiply;
  opacity: .16;
}
.hero__grid::before {
  top: -12%; left: -8%;
  background: radial-gradient(circle, var(--c1), transparent 70%);
  animation: hero-blob-a 52s ease-in-out infinite alternate;
}
.hero__grid::after {
  bottom: -18%; right: -10%;
  background: radial-gradient(circle, var(--c3), transparent 70%);
  animation: hero-blob-b 60s ease-in-out infinite alternate;
}
.hero::before {
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  top: 12%; right: 8%;
  width: min(36vw, 460px); height: min(36vw, 460px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c4), transparent 70%);
  filter: blur(130px);
  mix-blend-mode: multiply;
  opacity: .12;
  animation: hero-blob-c 46s ease-in-out infinite alternate;
}
@keyframes hero-blob-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(7vw, 6vw) scale(1.15); }
}
@keyframes hero-blob-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6vw, -8vw) scale(1.1); }
}
@keyframes hero-blob-c {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-5vw, 7vw) scale(1.08); }
}

/* ヒーロー背景のネットワーク断片。下の SPOTS のコンステレーションと地続きに見せる
   装飾で、.net__link / .net__node クラスを流用している（constellationSvg と同じ見た目）。
   #spots の svg.net と違って線を「引く」演出はさせない — 常に薄く見えている状態で固定。
   セレクタは .net__link / .net__node の“素の見た目”をここでも共有しつつ、
   引く・呼吸するアニメーションは svg.net（コンステレーション本体）だけに絞ってある。 */
.hero__net {
  position: absolute; z-index: 0; pointer-events: none;
  right: -8%; bottom: -6%;
  width: min(48vw, 580px);
  opacity: .5;
}
@media (max-width: 720px) {
  .hero__net { width: 72vw; opacity: .3; right: -12%; bottom: -3%; }
}

/* アイキャッチ（eyebrow）は hero__inner の外に出した別の container 行。
   hero__inner の最初の子を <h1> にすることで、hero__inner の上端（position の基準）が
   常に見出し1行目の上端と一致するようにするため（.hero__spec の位置合わせに使う）。 */
.hero__eyebrow-wrap {
  position: relative; z-index: 1;
}

.hero__inner {
  position: relative; z-index: 1;
  padding-bottom: clamp(96px, 12vw, 140px);
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: clamp(20px, 3vw, 32px);
  /* グラデーション文字。line::before の背景は子ボックスなので影響を受けない */
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__eyebrow::before {
  content: ""; width: 20px; height: 1px; background: var(--accent);
}

/* 巨大見出し。画面幅の大半を使い、行ごとに下から立ち上がる。
   Noto Sans JP 900 を使う（テンプレート側の Google Fonts 指定に 900 が要る）。 */
.hero__title {
  font-family: var(--font-jp); font-weight: 900;
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: .95; letter-spacing: -.045em;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .hero__title { max-width: 78%; }
}
.hero__title-line { display: block; }

/* 行の立ち上がり。JS が行ごとに 90ms ずつ遅らせて .is-in を付ける（main.js 8番）。
   タイミングは JS 側の責務、CSS はクリップと変形の“見た目”だけを持つ。 */
.js .hero__title-line {
  clip-path: inset(0 0 100% 0);
  transform: translateY(22%);
  transition: clip-path .7s var(--ease-rise), transform .7s var(--ease-rise);
}
.js .hero__title-line.is-in {
  clip-path: inset(0 0 0% 0);
  transform: translateY(0);
}

/* 計器風のデータ列。見出しの右肩に置く。1024px 未満は見出しの下に積む。 */
.hero__spec {
  margin-top: clamp(28px, 4vw, 40px);
  max-width: 340px;
  display: flex; flex-direction: column;
}
@media (min-width: 1024px) {
  /* 右端はヘッダー右上の「登録する」ボタン（.hdr__cta）と同じ container の
     ガター幅ぶん内側に揃える。上端は hero__inner の1番目の子である <h1> の上端に
     揃う（hero__inner 自身の padding-top が無いため、position:absolute の
     top:0 がそのまま見出し1行目の上端に一致する）。 */
  .hero__spec {
    position: absolute; z-index: 1;
    top: 0; right: var(--gutter);
    margin-top: 0;
  }
}
.hero__spec-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
}
.hero__spec-k {
  font-size: 0.6875rem; letter-spacing: .14em;
  color: rgba(var(--ink-rgb), .45);
  white-space: nowrap;
}
.hero__spec-v {
  font-size: 0.75rem; letter-spacing: .02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hero__lead {
  margin-top: clamp(24px, 3.4vw, 36px);
  max-width: 46em;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 2;
  color: var(--ink-dim);
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(32px, 4.4vw, 48px);
}

.hero__note {
  margin-top: clamp(20px, 2.6vw, 28px);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .04em;
  color: var(--ink-dim);
}

/* --- 無限マーキー ----------------------------------------------------------
   .marquee__track の中身は2セット分（同じ配列を2回）を想定した実装。
   1セットぶん(=50%)スライドしたところで元の位置に戻るとシームレスに繋がる。
   スクロール方向は main.js(10番) が --marquee-dir を 1 / -1 に切り替える。
   calc() は毎フレーム最新のカスタムプロパティを読むので、途中で符号が変わると
   その場で向きが切り替わる（意図的な仕様）。 */
.marquee {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line);
  overflow: hidden;
  padding-block: clamp(16px, 2.4vw, 22px);
  --marquee-dir: 1;
}
.marquee__track {
  display: flex; align-items: center;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee__item {
  display: flex; align-items: center;
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: .02em;
  color: var(--ink-dim);
  white-space: nowrap;
  padding-inline: clamp(20px, 3vw, 36px);
}
.marquee__item::after {
  content: "\2022"; /* ・ 区切り */
  margin-left: clamp(20px, 3vw, 36px);
  color: var(--accent);
}

@keyframes marquee {
  from { transform: translateX(calc(var(--marquee-dir, 1) * 0%)); }
  to   { transform: translateX(calc(var(--marquee-dir, 1) * -50%)); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ==========================================================================
   STATS — 数字4つの帯。単位は上付きの極小、区切りは縦罫だけ。
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* 4列にするのは 900px から。720〜899px で4列にすると「10,000 円/月」が列に収まらない */
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stats__item {
  padding: clamp(36px, 5.6vw, 56px) clamp(16px, 3vw, 28px);
  border-right: 1px solid var(--line);
  /* 数字・説明とも左詰め（中央寄せにしない） */
  text-align: left;
  /* 数字と単位（「10,000」「円/月」）を同じ行に保つ。説明文（.stats__label）は折り返してよい */
  white-space: nowrap;
}
.stats__item:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) {
  .stats__item:nth-child(2n) { border-right: 1px solid var(--line); }
  .stats__item:last-child { border-right: 0; }
}

/* 数字と単位（「10,000」＋「円/月」）が改行されないよう、狭い幅では文字サイズを
   下げる。1024px 未満は列が狭く（720px 以上は4列になるため特に狭い）、
   デスクトップ（1280px想定）向けの clamp(2.8rem,7.4vw,5rem) のままだと
   320〜768px の実測で「10,000」と「円/月」が2行に割れる。
   1024px 以上は元の大きな数字のままにする（レイアウトはここでは変えない）。 */
.stats__value {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(1.5rem, 7vw, 2.3rem);
  line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  /* 大きな数字はグラデーション文字で目を引かせる */
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 1024px) {
  .stats__value { font-size: clamp(2.6rem, 4.2vw, 4rem); }
}
.stats__unit {
  margin-left: 3px;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 400;
  color: var(--ink-dim);
  vertical-align: super;
}
.stats__label {
  white-space: normal;
  margin-top: 14px;
  font-size: 0.75rem; line-height: 1.75;
  color: var(--ink-dim);
}

/* ==========================================================================
   SECTION 共通の外枠
   ========================================================================== */

.sec {
  padding-block: var(--section-y);
  border-bottom: 1px solid var(--line);
}
.sec:last-of-type { border-bottom: 0; }
.sec--alt {
  position: relative; /* 区切りのグラデーション・ヘアラインを上辺に置くため */
  background: color-mix(in srgb, var(--bg-alt) 82%, transparent);
}
/* 単調な罫線が続かないよう、帯の切り替わりだけに1本だけ色を足す */
.sec--alt::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .5), transparent);
}

.sec__head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--head-gap);
}
/* S01〜S09 の通し番号。.sec__en の直前に、同じ行の左側に添える */
.sec__no {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.6875rem; letter-spacing: .14em;
  color: rgba(var(--ink-rgb), .3);
  vertical-align: middle;
}
.sec__en {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.6875rem; letter-spacing: .18em; text-transform: uppercase;
  vertical-align: middle;
  /* セクション英字ラベルはグラデーション文字に */
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sec__rule {
  display: block;
  width: 28px; height: 1px;
  margin: 20px auto 0;
  background: var(--grad);
}
.sec__ja {
  margin-top: 16px;
  font-size: 0.75rem; letter-spacing: .08em;
  color: var(--ink-dim);
}
.sec__headline {
  margin-top: 20px;
  font-family: var(--font-jp); font-weight: 700;
  /* 下限は 2rem。ただし 380px 未満の画面では 8.4vw まで縮め、
     「すべて、1枚のパスで。」のような1行10字前後の見出しが途中で折り返さないようにする */
  font-size: clamp(min(2rem, 8.4vw), 4.6vw, 3.4rem);
  line-height: 1.4; letter-spacing: -.01em;
}
.sec__lead {
  margin-top: 20px;
  font-size: 0.9375rem; line-height: 2;
  color: var(--ink-dim);
}
.sec__body { position: relative; }

/* ==========================================================================
   ABOUT — 本文3段落 + 3本柱。カードの枠をやめ、番号を巨大にして罫線だけで区切る
   ========================================================================== */

.about__body {
  max-width: 640px;
  margin: 0 auto clamp(56px, 8vw, 88px);
}
.about__p {
  font-size: 0.9375rem; line-height: 2.15; color: var(--ink-dim);
  margin-bottom: 1.9em;
}
.about__p:last-child { margin-bottom: 0; }

.pillars {
  max-width: 880px; margin-inline: auto;
  border-top: 1px solid var(--line);
}
.pillar {
  display: grid;
  grid-template-columns: clamp(76px, 15vw, 148px) minmax(0, 1fr);
  column-gap: clamp(20px, 3.2vw, 40px);
  row-gap: 0;
  padding-block: clamp(32px, 5vw, 52px);
  border-bottom: 1px solid var(--line);
}
.pillar > *:not(.pillar__no) { grid-column: 2; min-width: 0; }
.pillar__no {
  grid-column: 1; grid-row: 1 / -1;
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(3.6rem, 8.6vw, 6.4rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  /* ここでは背景のかすみではなく、視覚の骨格そのものとして大きく見せる */
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pillar__en {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.6875rem; letter-spacing: .14em;
  color: var(--accent);
}
.pillar__title {
  margin-top: 14px;
  font-weight: 700; font-size: 1.1875rem; line-height: 1.7;
}
.pillar__text {
  margin-top: 10px;
  font-size: 0.8125rem; line-height: 1.95; color: var(--ink-dim);
}

/* ==========================================================================
   SPOTS — 左にコンステレーション（拠点ネットワーク図）、右に拠点リスト。
   これがサイト全体の署名ビジュアル。暗闇に細い線とノードが光る。
   ========================================================================== */

.spots__layout {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
}
@media (min-width: 1024px) {
  .spots__layout {
    /* 主図（中心クラスタの詳細図）はほぼ正方形。図の列を潰さないよう、
       リスト側に最低幅だけ確保して残りを図に渡す。 */
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    align-items: start;
  }
}

/* 主図がほぼ正方形（約870m×895m）になったため、aspect-ratio に近い箱にする。
   svg.net 側は preserveAspectRatio で中に収める（はみ出さない・歪まない）ので、
   実際のデータ比率とこの箱が多少ずれても崩れない。 */
.spots__figure {
  display: flex; flex-direction: column;
}
/* 1023px 以下は図を列幅いっぱいに出し、高さは viewBox の比率に任せる
   （固定の高さにすると縦長の図が細く潰れ、地名が読めなくなる）。 */
@media (max-width: 1023px) {
  .spots__figure .netwrap { flex: none; }
  .spots__figure .net { height: auto; }
}
@media (min-width: 1024px) {
  /* 拠点リストをスクロールしている間、地図を画面に出し続ける（依頼）。
     sticky は図の列（グリッドの1マス＝リストと同じ高さ）の中で効くので、
     リストの最後まで図が付いてきて、節を抜けると一緒に流れる。
     以前は内側の .netwrap に付けていたが、親の .spots__figure が図と同じ高さしかなく、
     動く余地がないため効いていなかった */
  .spots__figure {
    position: sticky;
    top: clamp(88px, 8vw, 112px);
    height: min(calc(100vh - clamp(88px, 8vw, 112px) - 24px), 680px);
  }
  /* 図の下に帰属表示を1行置くので、図はその残りの高さに収める */
  .spots__figure .netwrap { display: flex; flex-direction: column; }
  .spots__figure .net { flex: 1 1 auto; min-height: 0; height: auto; }
  .spots__figure .map__credit { flex: none; }
}

.netwrap { display: block; width: 100%; flex: 1 1 auto; min-height: 0; }
/* OpenStreetMap の帰属表示。図の右下の隅（方位記号が図の右下にあるので、重ねず枠のすぐ下に置く） */
.map__credit {
  margin: 4px 0 0; text-align: right;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .02em;
  color: var(--ink-dim);
}
.map__credit a { text-decoration: underline; text-underline-offset: 2px; }
.map__credit a:hover { color: var(--ink); }
/* --- コンステレーション本体（svg.net） -------------------------------------
   ノードは中心の小さな塗り(.net__dot) + 細いリング(.net__ring) +
   大きくぼかしたハロー(.net__halo)。線は --grad を参照したストロークの
   グラデーション（<defs> に #netGrad を定義する側＝HTML 側の責務）。
   url() の参照が無効なときのために、末尾へ単色フォールバックを添えてある。 */
/* viewBox は実座標から毎回計算するため、幅と高さの比率は投影しだいで変わる。
   width/height を 100% にして SVG 既定の preserveAspectRatio（xMidYMid meet）に
   任せることで、どのアスペクト比でも歪まず・はみ出さずに収まる（レターボックス）。 */
.net {
  display: block;
  width: 100%; height: 100%;
}

.net__link {
  fill: none;
  stroke: url(#netGrad) var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: .55;
}
/* 線を引くアニメーションは svg.net（コンステレーション本体）だけに絞る。
   ヒーロー背景の .hero__net は同じクラスの“素の見た目”だけを流用し、
   最初から薄く見えている固定の装飾にする（引く演出はしない）。
   通過中の信号（.net__link--active）もこの遷移で「ゆっくり戻る」。 */
.net .net__link {
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .35));
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: opacity 1.1s var(--ease), stroke-width 1.1s var(--ease), filter 1.1s var(--ease);
}
/* svg.net には JS(main.js 7番) が画面内に入ったタイミングで .is-drawn を付ける */
.net.is-drawn .net__link {
  animation: net-draw .7s var(--ease-rise) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes net-draw {
  to { stroke-dashoffset: 0; }
}
.net__link--on {
  opacity: 1;
  stroke-width: 4.4;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .9));
}
/* 信号が通過中のリンク。静かに明るくなり、.net .net__link の遷移でゆっくり戻る */
.net__link--active {
  opacity: 1;
  stroke-width: 3.8;
  filter: drop-shadow(0 0 9px rgba(var(--accent-rgb), .75));
}

.net__node { cursor: pointer; }

.net__halo {
  fill: url(#netGrad) var(--accent);
  opacity: .14; /* 白地では色が面として濁るので、ダーク時代より弱く */
  filter: blur(14px);
  transform-box: fill-box;
  transform-origin: center;
}
/* 呼吸（3〜4秒周期の明滅）とパルスは、実際に線が引かれるコンステレーション
   本体だけに許可する。ノードごとに --i で位相をずらして機械的に見せない */
.net.is-drawn .net__halo {
  animation: net-breathe 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 420ms);
}
@keyframes net-breathe {
  0%, 100% { opacity: .1; }
  50%      { opacity: .28; }
}

.net__ring {
  fill: none;
  stroke: var(--ink-dim);
  stroke-width: 1.6;
  opacity: .6;
  transform-box: fill-box;
  transform-origin: center;
  transition: stroke var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.net__dot {
  fill: url(#netGrad) var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.net__idx {
  font-family: var(--font-mono); font-size: 24px; font-weight: 700;
  fill: rgba(var(--ink-rgb), .5);
  letter-spacing: .06em;
}
/* 主図の拠点名（番号の下に小さく添える）。番号より控えめに沈める。 */
.net__name {
  font-family: var(--font-jp); font-size: 17px; font-weight: 500;
  fill: rgba(var(--ink-rgb), .78);
  letter-spacing: .06em;
}

/* 双方向ハイライト。.net__node に is-on、対応する .spot にも is-on が付く
   （main.js 7番）。ノード拡大＋発光、そのノードに繋がるリンクだけ明るくなる。 */
.net__node.is-on .net__ring,
.net__node:hover .net__ring {
  stroke: var(--accent-2);
  opacity: 1;
  transform: scale(1.3);
}
.net__node.is-on .net__dot,
.net__node:hover .net__dot { transform: scale(1.35); }
.net__node.is-on .net__halo,
.net__node:hover .net__halo {
  opacity: .4;
  filter: blur(14px);
  animation-play-state: paused;
}

/* 信号の粒。main.js がリンク上を動く <line class="net__pulse">（コンステレーション
   本体・進行方向にわずかな尾を引く）または <circle class="net__pulse">（ヒーロー
   背景の装飾）を動的に生成し、座標と opacity を毎フレーム書き換える。
   CSS は見た目（発光）だけを持つ。静かに見せるため発光は控えめにしてある。 */
.net__pulse {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .75)) drop-shadow(0 0 7px rgba(var(--accent-2-rgb), .4));
  pointer-events: none;
  opacity: 0;
}

/* 発火。信号が到着したノードの中に main.js が生成する <circle class="net__fire">。
   細いリングが拡大しながら消える（化学反応の拡散のイメージ）。ハロー自体の
   一瞬の増光は main.js が Web Animations API で opacity を直接動かす（既存の
   呼吸アニメーションと衝突させないため）。 */
.net__fire {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 1.6;
  opacity: .8;
  pointer-events: none;
  animation: net-fire 1.5s var(--ease) forwards;
}
@keyframes net-fire {
  from { r: 26; opacity: .75; stroke-width: 2; }
  to   { r: 96; opacity: 0; stroke-width: .3; }
}

@media (prefers-reduced-motion: reduce) {
  /* 線は最初から引かれた状態、パルス・発火・呼吸・視差はなし。連動ハイライトは残す */
  .net .net__link {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .net__halo { animation: none !important; }
  .net__pulse,
  .net__fire { display: none !important; }
  .netwrap__layer--grat,
  .netwrap__layer--links,
  .netwrap__layer--nodes {
    transform: none !important;
  }
}

/* --- 地図の計器要素（経緯線・道路／線路／川・目印・縮尺・方位） -----------------
   道路・線路・川は OpenStreetMap の実測の線（content/roads.json）。建物は描かない。
   色は付けず、明るさと太さの差だけで「幹線 > 通り > 補助線」を読ませる。川だけ水色をごく薄く。
   ※ SVG 内の数値はユーザー単位（viewBox 幅 620）。表示は幅 300〜600px 程度に縮むので、
     文字は 16〜20 単位ないと読めない。px 感覚で小さくしないこと。 */
.map__grat { pointer-events: none; }
.map__gratline {
  stroke: rgba(var(--ink-rgb), .08);
  stroke-width: .6;
}
.map__gratlabel {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  fill: rgba(var(--ink-rgb), .3);
}

/* 道路・線路・川は「地」。文字は置かず、線の明るさと太さだけで幹線と路地を分ける。
   外周は template.js の放射マスクで暗がりに溶かす。拠点ノードより必ず暗く保つこと。 */
.map__ways { pointer-events: none; }
.map__way { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map__way--minor  { stroke: rgba(var(--ink-rgb), .05); stroke-width: 1.4; }
.map__way--street { stroke: rgba(var(--ink-rgb), .11); stroke-width: 2.2; }
.map__way--major  { stroke: rgba(var(--ink-rgb), .17); stroke-width: 4; }
.map__way--rail   { stroke: rgba(var(--ink-rgb), .16); stroke-width: 1.6; stroke-dasharray: 10 8; stroke-linecap: butt; }
.map__way--river  { stroke: var(--c3); stroke-opacity: .13; stroke-width: 4; }

.map__lm { pointer-events: none; }
.map__lm path.map__lm-dot {
  fill: none;
  stroke: rgba(var(--ink-rgb), .55);
  stroke-width: 1;
}
.map__lm circle.map__lm-dot {
  fill: rgba(var(--ink-rgb), .55);
}
/* 目印の名前は計器の注記。縁取りを付けて浮かせず、細く薄く線の中に置く */
.map__lm-name {
  font-family: var(--font-jp); font-size: 15px; font-weight: 400; letter-spacing: .12em;
  fill: rgba(var(--ink-rgb), .5);
}
.map__main .map__lm path.map__lm-dot { stroke: rgba(var(--ink-rgb), .5); stroke-width: 1.4; }
.map__main .map__lm circle.map__lm-dot { fill: rgba(var(--ink-rgb), .6); }

.map__scale .map__scalebar {
  stroke: rgba(var(--ink-rgb), .4);
  stroke-width: 1;
}
.map__scaletext {
  font-family: var(--font-mono); font-size: 14px;
  fill: rgba(var(--ink-rgb), .45);
  text-anchor: middle;
}

.map__north {
  stroke: rgba(var(--ink-rgb), .45);
  fill: rgba(var(--ink-rgb), .45);
}
.map__north line { stroke-width: 1; }
.map__north text {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  stroke: none;
}

/* --- 離れた拠点の囲み図（.map__island） ----------------------------------------
   日本地図の沖縄の囲みと同じ扱い。主図の隅に置き、内側に向いた2辺だけ罫を引く。
   背景は地の色で塗り、下の道路を隠す。中の目盛りはごく薄く、文字は mono の注記。 */
.map__island-bg { fill: var(--bg); fill-opacity: .92; }
.map__island .map__lm path.map__lm-dot { stroke: rgba(var(--ink-rgb), .5); stroke-width: 1.2; }
.map__island .map__lm circle.map__lm-dot { fill: rgba(var(--ink-rgb), .6); }
.map__island .map__lm-name { font-size: 14px; }
/* 囲み図の道。線の太さと明るさは実際の道の格の順（幹線 > 名前付きの通り > その他 > 拠点前の細道）を崩さない。
   囲み図は縮尺が大きく細い線が消えやすいので、補助線だけ主図より少し見えるようにする */
.map__island .map__way--street { stroke: rgba(var(--ink-rgb), .14); }
.map__island .map__way--minor { stroke: rgba(var(--ink-rgb), .13); stroke-width: 1.8; }
.map__way--lane { fill: none; stroke: rgba(var(--ink-rgb), .13); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.map__island-frame { fill: none; stroke: rgba(var(--ink-rgb), .28); stroke-width: 1.2; }
.map__island-cap {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  fill: rgba(var(--ink-rgb), .42);
}

/* 地図の下の注記（「温」は地図に出していない旨）。ページ本文と同じく rem。 */
.map__note {
  margin-top: 12px;
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.8;
  color: var(--ink-dim);
}

/* --- 3層視差（経緯線 / リンク / ノード） ----------------------------------------
   main.js がポインタ位置とスクロール位置から各層の transform を書き換え、
   層ごとに違う量だけずらして奥行きを出す（近いほど大きく動く）。
   遅延（現在値へ8%ずつ近づける）は JS 側の責務。CSS は動かす対象を持つだけ。
   prefers-reduced-motion のときは transform を付けない（main.js 側で初期化しない
   + 上の reduced-motion ブロックで transform: none を強制）。 */
.netwrap__layer--grat,
.netwrap__layer--links,
.netwrap__layer--nodes {
  will-change: transform;
}
.netwrap__layer--grat {
  filter: blur(.3px);
}

/* --- 拠点リスト（.spots__list / .spot） ------------------------------------
   行は番号・名称・運営者を縦に、ホバー／フォーカス／タップ(.is-on)で行全体が
   薄く発光し、同時にコンステレーション側の対応ノードも光る（双方向）。 */
.spots__list {
  border-top: 1px solid var(--line);
}
.spot {
  display: grid;
  grid-template-columns: clamp(56px, 11vw, 96px) minmax(0, 1fr);
  column-gap: clamp(16px, 3vw, 32px);
  row-gap: 0;
  padding-block: clamp(28px, 4vw, 40px);
  padding-inline: clamp(4px, 1vw, 12px);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.spot:hover,
.spot.is-on { background: rgba(var(--ink-rgb), .04); }
.spot > * { grid-column: 2; min-width: 0; }
.spot__no {
  grid-column: 1; grid-row: 1 / -1;
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .35;
  transition: opacity var(--dur) var(--ease);
}
.spot:hover .spot__no,
.spot.is-on .spot__no { opacity: .7; }
.spot__name {
  font-weight: 700; font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.6;
}
.spot__operator {
  margin-top: 6px;
  font-size: 0.8125rem; color: var(--ink-dim);
}
.spot__area {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim);
}
.spot__text {
  margin-top: 12px;
  font-size: 0.8125rem; line-height: 1.95; color: var(--ink-dim);
  max-width: 56ch;
}
.spot__tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
/* 住所・建物名の各まとまりは、列に収まる限り途中で折り返さない */
.spot__area-part { display: inline-block; max-width: 100%; }
/* 利用時間（spots.items[].hours） */
.spot__hours {
  margin-top: 8px;
  font-size: 0.8125rem; line-height: 1.8; color: var(--ink);
}
/* 公式サイト・Googleマップへのリンク */
.spot__links {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  margin-top: 12px;
}
.spot__link {
  display: inline-flex; align-items: center; min-height: 32px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .02em;
  color: var(--ink-dim);
  text-decoration: underline; text-underline-offset: 3px;
}
.spot__link:hover { color: var(--ink); }
/* 拠点の説明文は左揃え（依頼）。見出しは他の節と同じ中央のまま */
.sec--spots .sec__lead { text-align: left; }
/* 地図の注記は、拠点リストから離して始める */
.sec--spots .note { margin-top: clamp(40px, 6vw, 64px); }
/* 施設ごとのローカルルール（spots.items[].rules）。閉じているときは見出し1行だけ */
.spot__rules {
  margin-top: 14px;
  max-width: 60ch;
}
.spot__rules-head {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding-right: 28px;
  list-style: none;
  cursor: pointer;
  font-size: 0.8125rem; font-weight: 700;
  color: var(--ink);
}
.spot__rules-head::-webkit-details-marker { display: none; }
.spot__rules-head::before,
.spot__rules-head::after {
  content: "";
  position: absolute; right: 4px; top: 50%;
  width: 10px; height: 1px;
  background: var(--ink-dim);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.spot__rules-head::after { transform: rotate(90deg); }
.spot__rules[open] .spot__rules-head::after { transform: rotate(0deg); }
.spot__rules[open] .spot__rules-head::before,
.spot__rules[open] .spot__rules-head::after { background: var(--accent); }
.spot__rules-head:hover { color: var(--accent); }
.spot__rules-list {
  margin: 4px 0 0; padding: 0 0 0 1.2em;
  list-style: disc;
  font-size: 0.8125rem; line-height: 1.9; color: var(--ink-dim);
}
.spot__rules-list li + li { margin-top: 6px; }
/* 利用時間の範囲（template.js の hoursHtml）は、行に収まる限り途中で割らない（住所の .spot__area-part と同じ） */
.spot__time { display: inline-block; max-width: 100%; }
/* 電話番号は「0263-」「33-0339」のように途中で割らない（template.js の keepTel） */
.tel-no { white-space: nowrap; }
.spot__tag {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .04em;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-dim);
}

/* ==========================================================================
   PLANS — 料金カード4枚。おすすめ表示は常時の見た目ではなく、hover/focus-within で
   どのカードにも同じグラデーション枠が出る（大きさは変えない＝レイアウトシフトなし）。
   ========================================================================== */

.plans {
  display: grid; gap: clamp(16px, 2vw, 20px);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  /* align-items を指定しない（既定の stretch）ことで、同じ行のカードは
     いちばん高いカードに合わせて揃う。.plan は display:flex; flex-direction:column
     で .plan__features が flex:1 を持つため、揃った高さぶんの余りは
     features と cta の間ではなく features 自身が吸収し、cta は下端に揃う。 */
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 36px) clamp(22px, 2.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color var(--dur) var(--ease);
}
.sec--alt .plan { background: var(--bg-alt); }

/* border にはグラデーションが効かないため、padding-box(地の単色) と
   border-box(グラデーション) の背景を2枚重ねて境界線をグラデーション化する。
   border 自体は .plan の 1px solid をそのまま使い、色だけ透明にして下地を見せる。
   以前は p.featured（常時1枚だけ強調）の専用スタイルだったが、依頼により
   「常時表示」をやめ、hover / focus-within でどのカードにも同じ枠を出す
   （キーボード操作でも .plan__cta にフォーカスが入れば同じ見た目になる）。
   padding や margin は変えない＝カードの大きさは一切動かない。 */
.plan:hover,
.plan:focus-within,
.plan--featured {
  border-color: transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--grad) border-box;
}
.sec--alt .plan:hover,
.sec--alt .plan:focus-within,
.sec--alt .plan--featured {
  background:
    linear-gradient(var(--bg-alt), var(--bg-alt)) padding-box,
    var(--grad) border-box;
}
/* 他より縦に長く、上下にはみ出す。1行に並ぶ幅（768px 以上）でだけ効かせる。
   align-items: start にしてあるので、featured 以外は自分の内容分の高さのまま */
@media (min-width: 768px) {
  .plan--featured { padding-block: clamp(38px, 4.4vw, 52px); }
}
@media (min-width: 1280px) {
  .plan--featured { margin-block: clamp(-20px, -1.8vw, -26px); z-index: 1; }
}

.plan__badge {
  position: absolute; top: 0; right: 0;
  transform: translateY(-50%);
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--grad); color: var(--accent-ink);
  padding: 5px 10px;
  border-radius: var(--radius);
}

.plan__en {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.6875rem; letter-spacing: .14em; color: var(--ink-dim);
}
.plan__name {
  margin-top: 10px;
  font-weight: 700; font-size: 1.1875rem; line-height: 1.6;
}
.plan__price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin-top: clamp(18px, 2.4vw, 24px);
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid var(--line);
}
.plan__amount {
  font-family: var(--font-mono); font-weight: 700;
  /* 「100,000」が4列レイアウトの1列に収まる上限。これ以上大きくすると
     数字の途中で改行されて「100,0 / 00」になる。上げないこと */
  font-size: clamp(1.75rem, 2.7vw, 2.3rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  color: var(--ink);
}
.plan--featured .plan__amount {
  font-size: clamp(2.1rem, 3.3vw, 2.9rem);
  color: var(--accent);
}
.plan__unit {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-dim);
}
.plan__target {
  margin-top: 12px;
  font-size: 0.8125rem; line-height: 1.8; color: var(--ink-dim);
  min-height: 3.6em;
}

.plan__features {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: clamp(16px, 2vw, 20px);
  padding-top: clamp(16px, 2vw, 20px);
  border-top: 1px solid var(--line);
  flex: 1;
}
.plan__feature {
  position: relative;
  padding-left: 20px;
  font-size: 0.8125rem; line-height: 1.8; color: var(--ink-dim);
}
.plan__feature::before {
  content: "+";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-weight: 700; color: var(--accent);
}

.plan__cta {
  display: flex; align-items: center; justify-content: center;
  margin-top: clamp(20px, 2.6vw, 28px);
  min-height: 48px;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.plan__cta:hover { background: var(--ink); color: var(--bg); }
.plan--featured .plan__cta {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.plan--featured .plan__cta:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ==========================================================================
   HOW — 3ステップ。768px 以上は横並びの帯にし、間を細い破線でつなぐ
   ========================================================================== */

.steps {
  max-width: 1040px; margin-inline: auto;
  border-top: 1px solid var(--line);
}
.step {
  display: grid;
  grid-template-columns: clamp(56px, 11vw, 88px) minmax(0, 1fr);
  column-gap: clamp(16px, 3vw, 28px);
  row-gap: 0;
  padding-block: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}
.step > * { grid-column: 2; min-width: 0; }
.step__no {
  grid-column: 1; grid-row: 1 / -1;
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 2.8rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .35;
}
.step__title {
  font-weight: 700; font-size: clamp(1rem, 2vw, 1.1875rem); line-height: 1.7;
}
.step__text {
  margin-top: 10px;
  font-size: 0.8125rem; line-height: 1.95; color: var(--ink-dim);
}

@media (min-width: 768px) {
  /* 号（step__no）・見出し（step__title）・説明（step__text）を CSS subgrid で
     3つの行として揃える。見出しの行数がステップごとに違っても（例: 03 は
     \n を含み2行になる）、行の高さは同じ行にある一番高いものに揃うため、
     説明文の開始位置（上端）は常にステップ間でぴったり揃う。
     ステップの数が変わっても grid-auto-flow:column で自動的に列が増減する。 */
  /* 768〜1023px は2列×2段、1024px 以上は4列。各ステップが3行ぶん（号・見出し・説明）を
     占め、subgrid で同じ段のステップ同士の見出し・説明の開始位置が揃う */
  .steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    border-top: 0;
  }
  .step {
    display: grid;
    /* スマホの「番号｜本文」の2列をやめ、番号・見出し・説明を1列に縦に積む。
       2列が残ると本文の列が細くなり、1行に数文字しか入らなくなる（差し戻し） */
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    grid-template-rows: subgrid;
    grid-row: span 3;
    padding: clamp(32px, 3.4vw, 44px) clamp(24px, 2.6vw, 32px);
    border-bottom: 0;
    border-top: 1px solid var(--line);
    border-right: 1px dashed var(--line-strong); /* 矢印の代わりに細い破線でつなぐ */
  }
  .step:last-child { border-right: 0; }
  .step:nth-child(2n) { border-right: 0; }
  .step__no { grid-column: 1; grid-row: 1; display: block; margin-bottom: 16px; }
  .step__title { grid-column: 1; grid-row: 2; display: block; }
  .step__text { grid-column: 1; grid-row: 3; display: block; }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step:nth-child(2n) { border-right: 1px dashed var(--line-strong); }
  .step:last-child { border-right: 0; }
}

/* ==========================================================================
   PROJECTS — まつもとLab.のプロジェクト。FAQ と同じ <details> の開閉（CSS のみ）。
   閉じているときは番号と名前だけの一覧。開くと写真・紹介・オーナー・連絡先・その他
   ========================================================================== */

.projs {
  max-width: 960px; margin-inline: auto;
  border-top: 1px solid var(--line);
}
.proj {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows .4s var(--ease);
  border-bottom: 1px solid var(--line);
}
.proj[open] { grid-template-rows: auto 1fr; }
.proj__head {
  position: relative;
  grid-row: 1;
  display: flex; align-items: baseline; gap: 16px;
  list-style: none;
  cursor: pointer;
  padding: clamp(20px, 2.6vw, 26px) 40px clamp(20px, 2.6vw, 26px) 0;
}
.proj__head::-webkit-details-marker { display: none; }
.proj__head::before,
.proj__head::after {
  content: "";
  position: absolute; right: 4px; top: 50%;
  width: 12px; height: 1px;
  background: var(--ink-dim);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.proj__head::after { transform: rotate(90deg); }
.proj[open] .proj__head::after { transform: rotate(0deg); }
.proj[open] .proj__head::before,
.proj[open] .proj__head::after { background: var(--accent); }
.proj__no {
  flex: none;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em;
  color: var(--ink-dim);
}
.proj__name {
  font-weight: 700; font-size: 1rem; line-height: 1.7;
  transition: color var(--dur) var(--ease);
}
.proj__head:hover .proj__name { color: var(--accent); }
.proj__body {
  grid-row: 2;
  overflow: hidden;
  min-height: 0;
}
.proj__inner { padding: 0 0 clamp(24px, 3.4vw, 36px); }

/* 写真: 3枚なら1024px 以上で横3列、それ未満は1枚目を大きく＋下に2枚。2枚は常に横2列 */
.proj__photos {
  display: grid; gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.proj__photos--1 { grid-template-columns: minmax(0, 1fr); }
.proj__photos--3 .proj__photo:first-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .proj__photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proj__photos--3 .proj__photo:first-child { grid-column: auto; }
}
.proj__photo {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--line);
}

.proj__info { margin-top: clamp(20px, 2.6vw, 28px); }
.proj__row {
  padding-block: 14px;
  border-top: 1px dashed var(--line-strong);
}
.proj__row:first-child { border-top: 0; padding-top: 0; }
.proj__label {
  font-size: 0.75rem; font-weight: 700; line-height: 1.8; color: var(--ink);
}
.proj__value {
  margin-top: 4px;
  font-size: 0.875rem; line-height: 2; color: var(--ink-dim);
}
.proj__other { display: block; }
/* 未記入の欄（「準備中」）。項目があることだけを示し、本文より一段控える */
.proj__empty { font-size: 0.8125rem; color: var(--ink-dim); opacity: .6; }
.proj__link {
  display: inline-block;
  color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
.proj__link:hover { text-decoration-color: currentColor; }
.proj__other + .proj__link, .proj__link + .proj__link { margin-top: 4px; }
@media (min-width: 768px) {
  .proj__row {
    display: grid; grid-template-columns: 11em minmax(0, 1fr); column-gap: 24px;
  }
  .proj__value { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .proj { transition: none; }
}

/* ==========================================================================
   WHY — 比較表。ページ全体は横スクロールさせず、表だけ overflow-x:auto
   （640px 以下の縦積みカードはそのまま維持）
   ========================================================================== */

.compare {
  max-width: 900px; margin-inline: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line);
}
.compare__row {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(160px, 1fr) minmax(160px, 1fr);
  gap: clamp(12px, 2vw, 24px);
  min-width: 560px;
  padding-block: clamp(18px, 2.4vw, 24px);
  border-bottom: 1px solid var(--line);
}
.compare__row--head {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim);
  border-bottom-color: var(--line-strong);
}
.compare__axis {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .02em;
  color: var(--ink-dim);
}
.compare__row--head .compare__axis { color: var(--ink-dim); }
.compare__normal {
  font-size: 0.875rem; line-height: 1.8; color: var(--ink-dim);
}
.compare__lab {
  font-size: 0.875rem; font-weight: 700; line-height: 1.8; color: var(--accent);
}
.compare__row--head .compare__normal,
.compare__row--head .compare__lab { font-weight: 700; }
.compare__row--head .compare__lab { color: var(--accent); }

/* スマートフォンでは横スクロールをやめ、1行ずつのカードに積み替える。
   560px 幅の表を指で横に送らせるより読みやすいため。
   ラベルは template.js が data-h に入れた文言を使う（CSS に日本語を書かない） */
@media (max-width: 640px) {
  .compare { overflow-x: visible; }
  .compare__row {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 4px;
    padding-block: 20px;
  }
  .compare__row--head { display: none; }
  .compare__axis {
    font-size: 0.6875rem; letter-spacing: .1em;
    color: var(--ink-dim);
    margin-bottom: 6px;
  }
  .compare__normal::before,
  .compare__lab::before {
    content: attr(data-h);
    display: block;
    font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .08em;
    font-weight: 400;
    color: rgba(var(--ink-rgb), .45);
    margin-bottom: 2px;
  }
  .compare__lab { margin-top: 10px; }
}

/* ==========================================================================
   FAQ — + は細い線のアイコン。開閉は高さアニメーションで滑らかに（CSS のみ）
   ========================================================================== */

.faq {
  max-width: 780px; margin-inline: auto;
  border-top: 1px solid var(--line);
}
/* <details> をグリッドにして、コンテンツ行(.faq__a)を 0fr → 1fr でアニメーションする
   CSS だけの開閉アニメーション。開くときは滑らかに、閉じるときは（<details> が
   非表示化を同期的に行うブラウザの仕様上）瞬時に戻る。JS を足さない前提の妥協点。 */
.faq__item {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows .4s var(--ease);
  border-bottom: 1px solid var(--line);
}
.faq__item[open] { grid-template-rows: auto 1fr; }
.faq__q {
  position: relative;
  grid-row: 1;
  list-style: none;
  cursor: pointer;
  padding: clamp(20px, 2.6vw, 26px) 40px clamp(20px, 2.6vw, 26px) 0;
  font-size: 0.9375rem; font-weight: 500; line-height: 1.8;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute; right: 4px; top: 50%;
  width: 12px; height: 1px;
  background: var(--ink-dim);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq__q::after { transform: rotate(90deg); }
.faq__item[open] .faq__q::after { transform: rotate(0deg); }
.faq__item[open] .faq__q::before,
.faq__item[open] .faq__q::after { background: var(--accent); }
.faq__a {
  display: block;
  grid-row: 2;
  overflow: hidden;
  min-height: 0;
  padding: 0 0 clamp(20px, 2.6vw, 26px);
  font-size: 0.875rem; line-height: 2; color: var(--ink-dim);
  max-width: 68ch;
}
/* 回答に \n が複数あるときだけ .faq__a は <div> になり、中に .faq__a-p が並ぶ。
   段落間だけ間隔を足す（最初の段落は詰める）。 */
.faq__a-p + .faq__a-p { margin-top: 12px; }
/* 「※」で始まる注意書きの段落。本文より一段小さく、色は同じ --ink-dim のまま */
.faq__note {
  font-size: 0.75rem;
  line-height: 1.8;
}
@media (prefers-reduced-motion: reduce) {
  .faq__item { transition: none; }
}

/* ==========================================================================
   ORG — 運営
   ========================================================================== */

.org__body {
  max-width: 640px; margin: 0 auto clamp(48px, 6vw, 64px);
}
.org__body p {
  font-size: 0.9375rem; line-height: 2.1; color: var(--ink-dim);
  margin-bottom: 1.8em;
}
.org__body p:last-child { margin-bottom: 0; }

.rows {
  max-width: 720px; margin-inline: auto;
  border-top: 1px solid var(--line);
}
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding-block: clamp(18px, 2.4vw, 24px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) {
  .row { grid-template-columns: minmax(140px, .32fr) minmax(0, 1fr); gap: 24px; }
}
.row__label {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim);
  padding-top: .2em;
}
.row__value {
  font-size: 0.875rem; line-height: 1.95;
}

/* ==========================================================================
   CONTACT — フォーム。枠は下線だけ、フォーカスでグラデーションの下線が伸びる
   ========================================================================== */

.form {
  max-width: 640px; margin-inline: auto;
  display: grid; gap: clamp(20px, 2.6vw, 26px);
}
.form__row { display: grid; gap: 10px; }
.form__row--half {
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 26px);
}
@media (min-width: 560px) {
  .form__row--half {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .form__row--half > .form__row { gap: 10px; }
}

.form__label {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em;
  color: var(--ink-dim);
}
.form__req { margin-left: 4px; color: var(--danger); }

/* 枠なし・下線だけ。フォーカスで下線がグラデーションに変わって左から右へ伸びる。
   ::before/::after は input などの置換要素で描画が信頼できないため使わず、
   background-image のグラデーションを background-size でアニメーションさせる。 */
.form__input,
.form__select,
.form__textarea {
  width: 100%;
  font-family: var(--font-jp);
  /* 文字サイズ設定に追従させつつ、16px を下回らせない。
     16px 未満だと iOS Safari がフォーカス時に画面を勝手に拡大する */
  font-size: max(1rem, 16px);
  line-height: 1.7;
  color: var(--ink);
  background-color: transparent;
  background-image: linear-gradient(var(--grad-soft));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 14px 4px;
  min-height: 48px;
  transition: background-size .35s var(--ease), border-color var(--dur) var(--ease);
}

.form__input::placeholder,
.form__textarea::placeholder { color: rgba(var(--ink-rgb), .35); }

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-bottom-color: transparent;
  background-size: 100% 2px;
}

.form__select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%),
    linear-gradient(var(--grad-soft));
  background-position: calc(100% - 22px) center, calc(100% - 16px) center, left bottom;
  background-size: 6px 6px, 6px 6px, 0% 2px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.form__select:focus {
  background-size: 6px 6px, 6px 6px, 100% 2px;
}

.form__textarea { resize: vertical; min-height: 160px; }

/* Turnstile（迷惑送信の確認）の枠。中身は main.js が iframe で描く */
.form__verify { max-width: 100%; }

.form__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  margin-top: 4px;
}
.form__note { flex: 1 1 240px; }

/* フォームを閉じているあいだのメールの案内（contact.formOpen: false）。幅と余白はフォームに揃える */
.mailto {
  max-width: 640px; margin-inline: auto;
  display: grid; gap: clamp(20px, 2.6vw, 26px);
}
.mailto__lead { line-height: 1.9; }
.mailto__addr {
  font-family: var(--font-mono); font-size: clamp(1.0625rem, 2.4vw, 1.375rem); letter-spacing: .02em;
  border-block: 1px solid var(--line); padding-block: 14px;
}
.mailto__link {
  display: inline-block; min-height: 44px; line-height: 44px;
  color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
}

.form__status { font-size: 0.8125rem; line-height: 1.8; }
.form__status--ok { color: var(--accent); }
.form__status--ng { color: var(--danger); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.ftr {
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 64px);
}
.ftr__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px;
}
.ftr__brand {
  font-family: var(--font-en); font-weight: 900; font-size: 1.125rem;
}
.ftr__tagline {
  margin-top: 10px;
  font-size: 0.8125rem; line-height: 1.8; color: var(--ink-dim);
  max-width: 32em;
}
.ftr__grant {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.75rem; line-height: 1.8; color: var(--ink-dim);
  /* 枠は文の長さに合わせる。幅が足りる限り1行に収め、「ます。」だけが次の行に落ちないように
     する（依頼）。画面が狭いときだけ文節の切れ目で折り返す */
  width: fit-content; max-width: 100%;
}
.ftr__links {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
}
.ftr__links a {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .04em;
  color: var(--ink-dim);
  transition: color var(--dur) var(--ease);
}
.ftr__links a:hover { color: var(--accent); }
.ftr__copy {
  width: 100%;
  margin-top: clamp(32px, 4vw, 44px);
  padding-top: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .06em;
  color: rgba(var(--ink-rgb), .5);
}

/* ==========================================================================
   RAIL — スクロール進捗レール（1024px 以上のみ）。画面右端に固定の細い縦線。
   main.js(9番) が .rail__fill に transform: scaleY(比率) を直接書き込み、
   .rail__label のテキストを現在のセクション名に差し替える。
   ========================================================================== */

.rail {
  display: none;
  position: fixed; z-index: 150;
  right: clamp(20px, 3vw, 40px); top: 50%;
  transform: translateY(-50%);
  align-items: center; gap: 12px;
  flex-direction: row-reverse; /* DOM は track→label の順。見た目は label を track の左に出す */
  pointer-events: none;
}
/* 本文（最大1200pxのコンテナ）の右外に、レール（右端40px＋線＋ラベル）がまるごと
   収まる幅でだけ出す。狭い幅で出すと本文の文字と重なる（依頼で修正）。
   1680px 未満では出さない。本文側の幅は変えない */
@media (min-width: 1680px) {
  .rail { display: flex; }
}
.rail__track {
  position: relative;
  width: 1px; height: 40vh;
  background: var(--line-strong);
  overflow: hidden;
}
.rail__fill {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .12s linear;
}
.rail__label {
  writing-mode: horizontal-tb;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .1em;
  color: var(--ink-dim);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--dur) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .rail__fill { transition: none; }
}

/* ==========================================================================
   RESPONSIVE — 追加の細部調整
   320 / 375 / 414 / 768 / 1280 で横スクロールゼロ・はみ出しゼロを想定。
   タップ領域は最低 44px（.btn / .hdr__mobile-link / .form / .spot 各要素で確保済み）。
   ========================================================================== */

@media (max-width: 480px) {
  .hero__actions .btn { width: 100%; }
  .stats__item { padding-inline: var(--gutter-sm); }
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION — マーキー・数え上がり・reveal・ヒーロー行・
   コンステレーション・レールを無効化 / 静止状態にする
   （数え上がりは main.js 側が data-count を見て即時確定させる）
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; }
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
  /* ヒーローの色の塊は静止した状態のまま表示は残す */
  .hero__grid::before,
  .hero__grid::after,
  .hero::before { animation: none !important; }
  /* ヒーロー見出しは即座に全行表示（main.js がすぐ .is-in を付ける） */
  .js .hero__title-line {
    transition: none !important;
    clip-path: inset(0 0 0% 0) !important;
    transform: none !important;
  }
}

/* ==========================================================================
   DEMO バー — `npm run build:demo` のときだけ出る。本番ビルドには含まれない
   ========================================================================== */

.demobar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  margin: 0;
  padding: 10px var(--gutter-sm);
  background: var(--grad);
  color: var(--accent-ink);
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.6875rem; letter-spacing: .04em; line-height: 1.6;
  text-align: center;
}
body:has(.demobar) { padding-bottom: 56px; }
@media (max-width: 560px) {
  .demobar { font-size: 0.625rem; text-align: left; }
  body:has(.demobar) { padding-bottom: 72px; }
}


/* ==========================================================================
   文字サイズを大きくしたときの保険
   font-size は rem 指定なので、端末やブラウザの「文字サイズ」設定に追従して
   本文まで大きくなる。その分の逃げ場をここで確保し、枠から飛び出さないようにする
   ========================================================================== */

.stats__item, .pillar, .plan, .spot, .step, .proj__head, .proj__row, .row,
.form__row, .form__verify, .mailto, .compare__row > *, .hero__spec-row, .spots__figure, .spots__layout { min-width: 0; }

/* 長い英数字（SWEET WORK / ALPSCITY Pay など）が行から溢れるのを防ぐ */
.hero__title, .hero__spec-k, .hero__spec-v,
.stats__value, .stats__unit, .stats__label,
.pillar__title, .pillar__text,
.plan__name, .plan__unit, .plan__target, .plan__feature,
.spot__name, .spot__operator, .spot__text, .spot__rules-list li,
.step__title, .step__text,
.proj__name, .proj__label, .proj__value, .proj__link,
.row__label, .row__value,
.faq__q, .faq__a, .faq__a-p,
.ftr__tagline, .ftr__grant,
.mailto__lead, .mailto__addr,
.rail__label {
  overflow-wrap: anywhere;
}

.stats__value, .plan__amount { line-height: 1.05; }


/* ==========================================================================
   文書ページ（利用規約・プライバシーポリシー・404）
   固定ヘッダーの下から始め、読みやすい行長に絞る
   ========================================================================== */
.article { padding: clamp(112px, 14vw, 160px) 0 clamp(72px, 10vw, 120px); }
.article .container { max-width: 800px; }
.article h1 {
  font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.4;
  margin-bottom: 32px;
}
.article h2 {
  font-weight: 700; font-size: 1.125rem; line-height: 1.6;
  margin: 48px 0 14px; padding-top: 20px; border-top: 1px solid var(--line);
}
.article p, .article li { font-size: 0.9375rem; line-height: 1.95; color: var(--ink); }
.article p + p { margin-top: 12px; }
.article ol, .article ul { padding-left: 1.6em; }
.article ol { list-style: decimal; }
.article ul { list-style: disc; }
.article ol > li + li, .article ul > li + li { margin-top: 10px; }
.article p + ol, .article p + ul { margin-top: 12px; }
.article ul.article__sub { list-style: none; padding-left: .4em; margin-top: 8px; }
.article ul.article__sub > li + li { margin-top: 4px; }
/* 原文が箇条書きの規約（on-terms.json の list: "bullet"）の入れ子。点を付ける */
.article ul.article__sub--bullet { list-style: circle; padding-left: 1.4em; }
/* 拠点の規約を載せるときの注記（原文のまま掲載していること・街ラボ利用規約との関係） */
.article__notice {
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px solid var(--line-strong);
}
.article__notice p { font-size: 0.875rem; color: var(--ink-dim); }
.article__notice a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.article__outro { margin-top: clamp(32px, 5vw, 48px); }
.article__back {
  display: inline-block; margin-top: 56px;
  font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-dim);
}
.article__back:hover { color: var(--ink); }
.article h1, .article h2, .article p, .article li { overflow-wrap: anywhere; min-width: 0; }