/* ============================================================
   JADO Project 募集LP — スタイル
   トークンは 03_デザイン・実装仕様.md に準拠(正式色確定後に差替)
   ============================================================ */
:root {
  /* ブランド確定カラー(ユーザー提供パレットより抽出) */
  --jade-900: #0B3B31;   /* Adaptive Green 深 */
  --jade-800: #0E4A3D;
  --jade-700: #006E5B;   /* Adaptive Green(メイン) */
  --jade-500: #2E9C82;
  --jade-100: #E4F2EC;
  --kuroshio: #005088;   /* Kuroshio Blue: 信頼・知性・アカデミック基盤 */
  --kuroshio-deep: #003E6B;
  --tosa: #FF8C02;       /* Tosa Orange: 活力・アウトリーチの熱意 */
  --tosa-deep: #A85C00;  /* 小さい文字用(コントラストAA) */
  --accent-red: var(--tosa); /* 旧トークン互換 */
  --ink: #1C2B27;
  --paper: #FAFAF7;
  --font-display: "Shippori Mincho", "Noto Serif JP", serif;
  --font-body: "Noto Sans JP", sans-serif;
  --font-hand: "Chihaya", sans-serif; /* 質問箱の手書き(ちはやフォント・かな漢字とも収録) */
  --body-size: 17px;
  --measure: 38em; /* 物語部の最大行長 */
}

/* 画面サイズに応じて全体の表示倍率を調整(比率は保ったまま)。
   14インチPC/24インチモニタで大きすぎたため、従来比25%縮小(1.1/1.2/1.32 → ×0.75)。
   スマホ/通常ノートPCは等倍のまま。 */
@media (min-width: 1024px) { body { zoom: 0.83; } }
@media (min-width: 1400px) { body { zoom: 0.9; } }
@media (min-width: 1800px) { body { zoom: 0.99; } }

/* ちはやフォント(自前ホスト・作者許可取得済み)。かな・漢字とも収録の手書き書体。
   字形そのまま woff2へ形式変換のみ。読込まで font-display: swap で代替表示。 */
@font-face {
  font-family: "Chihaya";
  src: url("fonts/chihaya.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.9;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--jade-700); }

/* ---------- 共通レイアウト ---------- */
.container { width: min(100% - 48px, 1080px); margin-inline: auto; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.4em; }
.prose strong { color: var(--jade-900); font-weight: 700; }

.section { padding-block: clamp(88px, 13vw, 152px); position: relative; }
.section--tint { background: var(--jade-100); }
.section--dark { background: var(--jade-900); color: var(--paper); }
.section--dark .prose strong { color: #fff; }

/* 章ラベル */
.chapter-label {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--jade-700); margin-bottom: 28px;
}
.chapter-label::after { content: ""; height: 1px; width: 56px; background: var(--jade-500); opacity: 0.6; }
.section--dark .chapter-label { color: var(--jade-500); }

/* 見出し */
.headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.6vw, 44px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--jade-900);
  margin-bottom: clamp(32px, 5vw, 52px);
  text-wrap: pretty;
}
.section--dark .headline { color: var(--paper); }
.hl-hand { font-family: var(--font-hand); font-weight: 500; color: var(--tosa); } /* 見出し内のアクセント(問い・オレンジ) */
.qa-text, .qa-tag, .qa-hint, .qa-by, .hl-hand, .qa-cta-mark, .qa-cta-text { font-synthesis: none; } /* ちはやは1ウェイト→合成ボールド(偽太字)を無効化 */

/* 引用 */
.quote {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 500;
  line-height: 1.9;
  color: var(--jade-900);
  padding: 28px 0 28px 28px;
  border-left: 1px solid var(--jade-500);
  margin: 2.2em 0;
  text-wrap: pretty;
}
.quote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 13px; color: var(--jade-700); margin-top: 12px; letter-spacing: 0.08em; }
.section--dark .quote { color: var(--jade-100); }

/* 要確認タグ(公開前チェック用・内部メモ) */
.check-tag {
  display: inline-block;
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  color: #9A6A00; background: #FFF6DF; border: 1px dashed #D9B45B;
  border-radius: 3px; padding: 2px 8px; margin-left: 8px;
  vertical-align: middle; white-space: nowrap;
}
body.hide-checktags .check-tag { display: none; }

/* ---------- ボタン / CTA ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  letter-spacing: 0.04em; text-decoration: none;
  padding: 16px 32px; border-radius: 6px;
  min-height: 52px;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn--line { background: var(--jade-700); color: #fff; }
.btn--red { background: var(--tosa); color: var(--jade-900); }
.btn--ghost { background: transparent; color: var(--jade-700); border: 1px solid var(--jade-500); }
.btn svg { flex: none; }

.btn-note { font-size: 13px; color: var(--jade-700); margin-top: 12px; letter-spacing: 0.04em; }
.section--dark .btn-note { color: var(--jade-100); opacity: 0.8; }

/* 中間CTAバナー(控えめ) */
.cta-banner { background: var(--jade-100); }
.cta-banner .inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 36px;
}
.cta-banner p { font-size: 15px; color: var(--jade-900); }
.cta-banner .btn { padding: 12px 24px; min-height: 48px; font-size: 15px; }

/* ---------- 帯(ヘッダー) ---------- */
.band {
  background: var(--jade-900); color: var(--jade-100);
  font-size: 12px; letter-spacing: 0.14em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.band .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 10px; }
.band .band-note { text-align: right; line-height: 1.6; }
.band .band-logo { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.2em; color: #fff; white-space: nowrap; display: flex; align-items: center; gap: 12px; }
.band .band-logo img { width: 32px; height: 32px; border-radius: 50%; flex: none; }

/* ---------- §0 ファーストビュー ---------- */
.fv {
  background:
    linear-gradient(90deg, rgba(11,59,49,0.96) 0%, rgba(11,59,49,0.88) 34%, rgba(11,59,49,0.72) 62%, rgba(11,59,49,0.58) 100%),
    url(photos/hero-bg.jpg) 76% 12% / cover no-repeat;
  background-color: var(--jade-900);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.fv::after { /* 灯台の光条 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(from 128deg at 86% 12%,
    transparent 0deg, rgba(250, 250, 247, 0.05) 7deg, rgba(250, 250, 247, 0.1) 11deg,
    rgba(250, 250, 247, 0.05) 15deg, transparent 22deg);
}
.fv .container {
  display: grid; gap: clamp(40px, 6vw, 80px);
  padding-block: clamp(76px, 10vh, 148px);
  align-items: center;
  position: relative; z-index: 1;
}
.fv-content { max-width: 40em; text-shadow: 0 1px 20px rgba(0, 0, 0, 0.42); }
.fv-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 0.24em;
  color: var(--jade-500); margin-bottom: 28px;
}
.fv h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-wrap: pretty;
}
.fv-sub {
  margin-top: 28px; font-size: clamp(15px, 1.8vw, 18px); line-height: 2.1;
  color: var(--jade-100); max-width: 34em;
}
.fv-program {
  margin-top: 18px; font-size: clamp(14px, 1.6vw, 16px); font-weight: 700;
  letter-spacing: 0.06em; color: #fff;
  display: flex; align-items: center; gap: 12px;
}
.fv-program::before { content: ""; width: 32px; height: 1px; background: var(--jade-500); }
.fv-cta { margin-top: 44px; }
.fv-scroll {
  margin-top: 60px; font-size: 12px; letter-spacing: 0.3em; color: var(--jade-500);
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; cursor: pointer; width: fit-content;
  transition: color 0.3s ease;
}
.fv-scroll:hover { color: var(--jade-700); }
.fv-scroll::after { content: ""; width: 1px; height: 44px; background: linear-gradient(var(--jade-500), transparent); }


/* ---------- 写真プレースホルダ ---------- */
.ph { margin: 0; }
.ph-box {
  background: var(--jade-100);
  border: 1px dashed var(--jade-500);
  border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--jade-700);
  font-size: 13px; letter-spacing: 0.08em; text-align: center;
  padding: 16px;
}
.ph-box svg { opacity: 0.5; }
.ph--portrait .ph-box { aspect-ratio: 4 / 5; }
.ph--wide .ph-box { aspect-ratio: 16 / 9; }
.ph--square .ph-box { aspect-ratio: 1; }
.fv .ph-box { background: rgba(230, 244, 240, 0.08); border-color: rgba(56, 161, 136, 0.55); color: var(--jade-500); }
.ph img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 4px; }
.ph--portrait img { aspect-ratio: 4 / 5; }
.ph--wide img { aspect-ratio: 16 / 9; }
.ph--square img { aspect-ratio: 1; }
.ph figcaption { font-size: 12px; color: var(--jade-700); margin-top: 10px; letter-spacing: 0.06em; }
.section--dark .ph figcaption { color: var(--jade-500); }

/* ---------- 波の区切り ---------- */
.wave-divider { width: 100%; height: clamp(36px, 5vw, 64px); }

/* ---------- §2 旅地図 ---------- */
.journey-head { margin-bottom: clamp(40px, 6vw, 72px); }
.journey {
  display: grid; gap: 24px;
  align-items: start;
}
.journey-sticky-label {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; height: 38px;
  background: var(--paper);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--jade-700);
}
.journey-map {
  position: sticky; top: 38px; z-index: 5;
  height: 42vh;
  background: var(--paper);
  border-bottom: 1px solid var(--jade-100);
  padding: 8px 0;
}
.journey-map svg { width: 100%; height: 100%; }
.journey-cards { padding-top: clamp(24px, 4vw, 48px); }

.stop-card {
  max-width: var(--measure);
  opacity: 0.4;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stop-card.active { opacity: 1; }
.stop-card + .stop-card { margin-top: clamp(180px, 40vh, 360px); }
.stop-meta { display: flex; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.stop-num {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--jade-500); letter-spacing: 0.1em;
}
.stop-year { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; color: var(--jade-700); }
.stop-name {
  font-family: var(--font-display); font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 600; color: var(--jade-900); line-height: 1.5; margin-bottom: 6px;
  text-wrap: pretty;
}
.stop-role {
  display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--jade-700); border: 1px solid var(--jade-500); border-radius: 99px;
  padding: 2px 12px; margin-bottom: 16px;
}
.stop-episode { font-size: 16px; }
.stop-photo { margin: 22px 0 0; max-width: 420px; }
.stop-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.stop-photo figcaption { font-size: 12px; color: var(--jade-700); margin-top: 8px; letter-spacing: 0.04em; }
.stop-quote {
  font-family: var(--font-display); font-size: 17px; color: var(--jade-700);
  margin-top: 14px; line-height: 1.9;
}
.stop-adaptive { font-size: 15px; margin-top: 14px; line-height: 1.95; }
.stop-adaptive b {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--kuroshio); border: 1px solid var(--kuroshio); border-radius: 99px;
  padding: 1px 9px; margin-right: 10px; vertical-align: 2px;
}
.journey-subnote {
  margin-top: clamp(80px, 14vh, 140px);
  font-size: 13px; color: var(--jade-700); max-width: var(--measure);
  border-top: 1px solid var(--jade-100); padding-top: 20px; line-height: 2;
}

@media (min-width: 900px) {
  .journey-sticky-label { display: none; }
  .journey { grid-template-columns: minmax(0, 5fr) minmax(340px, 4fr); gap: clamp(40px, 5vw, 80px); }
  .journey-map {
    grid-column: 2; grid-row: 1;
    top: 22vh; height: 56vh; border-bottom: none; padding: 0;
  }
  .journey-cards { grid-column: 1; grid-row: 1; padding-top: 16vh; padding-bottom: 28vh; }
}

/* ---------- 地図SVG ---------- */
.map-land { fill: var(--jade-100); stroke: var(--jade-500); stroke-opacity: 0.5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-route {
  fill: none; stroke: var(--jade-500); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.map-route-base { stroke-dasharray: 3 4.5; opacity: 0.22; }
.map-route-progress { transition: stroke-dashoffset 1.1s ease; opacity: 0.85; }

.pin { opacity: 0.5; transition: opacity 0.4s ease; }
.pin .pin-tower { fill: var(--jade-700); }
.pin .pin-beams { fill: var(--jade-500); opacity: 0; transition: opacity 0.4s ease; }
.pin .pin-label {
  font-family: var(--font-body); font-weight: 700; font-size: 6.5px;
  fill: var(--jade-900); text-anchor: middle;
  opacity: 0; transition: opacity 0.4s ease;
  paint-order: stroke; stroke: var(--paper); stroke-width: 2.4px; stroke-linejoin: round;
}
.pin .pin-pulse { fill: none; stroke: var(--jade-500); opacity: 0; }
.pin.visited { opacity: 0.85; }
.pin.active { opacity: 1; }
.pin.active .pin-beams { opacity: 0.9; }
.pin.active .pin-label { opacity: 1; }
.pin.pin--red .pin-tower { fill: var(--tosa); }
.pin.pin--red .pin-beams { fill: var(--tosa); }
@media (prefers-reduced-motion: no-preference) {
  .pin.active .pin-pulse { animation: pin-pulse 2.2s ease-out infinite; }
}
@keyframes pin-pulse {
  0% { opacity: 0.7; transform: scale(0.4); }
  70% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.pin-sub { fill: var(--jade-500); opacity: 0.5; }

/* ---------- §6 呼びかけ(ダーク) ---------- */
.calling .headline { font-size: clamp(30px, 5vw, 50px); }

/* ---------- §7 JADO ---------- */
.compare {
  display: grid; gap: 16px; margin: clamp(36px, 5vw, 56px) 0;
}
@media (min-width: 720px) { .compare { grid-template-columns: 1fr 1fr; gap: 24px; } }
.compare-card { border: 1px solid var(--jade-500); border-radius: 6px; padding: 28px 28px 24px; background: #fff; }
.compare-card.is-adaptive { background: var(--kuroshio); color: var(--paper); border-color: var(--kuroshio); }
.compare-card h4 {
  font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.compare-card ul { list-style: none; font-size: 15px; line-height: 2.1; }
.compare-card li { padding-left: 1.2em; text-indent: -1.2em; }
.compare-card li::before { content: "— "; opacity: 0.5; }
.compare-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; border-radius: 99px; padding: 3px 12px; }
.compare-card.is-tech .compare-tag { background: var(--jade-100); color: var(--jade-700); }
.compare-card.is-adaptive .compare-tag { background: rgba(255, 255, 255, 0.18); color: #fff; }

.pillars { display: grid; gap: 20px; margin: clamp(36px, 5vw, 56px) 0; counter-reset: pillar; }
@media (min-width: 880px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.pillar { background: #fff; border-radius: 6px; padding: 32px 28px; border-top: 2px solid var(--kuroshio); }
.pillar .pillar-num { font-family: var(--font-display); font-size: 14px; color: var(--jade-500); letter-spacing: 0.2em; margin-bottom: 14px; }
.pillar h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--jade-900); line-height: 1.6; margin-bottom: 12px; text-wrap: pretty; }
.pillar p { font-size: 15px; line-height: 2; }

.activity-callout {
  background: #fff; border: 1px solid var(--jade-100); border-radius: 6px;
  padding: clamp(28px, 4vw, 44px); margin: clamp(36px, 5vw, 56px) 0;
}
.activity-callout .label { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--tosa-deep); margin-bottom: 14px; }
.activity-callout h4 { font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 25px); font-weight: 600; color: var(--jade-900); margin-bottom: 16px; }
.activity-callout p { font-size: 15.5px; max-width: var(--measure); }

.declaration { max-width: 44em; }
.declaration h4 {
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); font-weight: 600;
  color: var(--jade-900); margin-bottom: 20px;
}

/* ---------- §7 エコシステム図(ハブ・母港) ---------- */
.ecosystem { margin-top: clamp(48px, 7vw, 80px); }
.eco-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; color: var(--jade-500); margin-bottom: 12px; }
.eco-title {
  font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 34px); font-weight: 600;
  color: var(--jade-900); margin-bottom: 14px;
}
.eco-lead { font-size: 15.5px; max-width: var(--measure); }
.eco-figure { margin: clamp(24px, 4vw, 44px) auto 0; max-width: 680px; }
.eco-figure svg { width: 100%; height: auto; }

.eco-ring-line { fill: none; stroke: var(--jade-500); stroke-width: 1.5; stroke-dasharray: 5 7; opacity: 0.75; }
.eco-orbit-dot { fill: var(--jade-700); }
.eco-orbit-dot--soft { opacity: 0.55; }
.eco-chord { stroke: var(--jade-500); stroke-width: 1; opacity: 0.35; }
.eco-cap { font-family: var(--font-body); font-size: 14px; font-weight: 700; fill: var(--jade-700); letter-spacing: 0.06em; }

.eco-node-circle { fill: #fff; stroke: var(--jade-500); stroke-width: 1.5; }
.eco-person circle, .eco-person path { fill: var(--jade-700); }
.eco-node-label {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 700; fill: var(--jade-900);
  paint-order: stroke; stroke: var(--jade-100); stroke-width: 4px; stroke-linejoin: round;
}

.eco-flow { fill: none; stroke: var(--jade-700); stroke-width: 2; }
.eco-arrowhead { fill: var(--jade-700); }
.eco-flow-label {
  font-family: var(--font-display); font-size: 17px; font-weight: 600; fill: var(--jade-900);
  paint-order: stroke; stroke: var(--jade-100); stroke-width: 5px; stroke-linejoin: round;
}

.eco-x-rect { fill: var(--paper); stroke: var(--kuroshio); stroke-width: 1; stroke-dasharray: 4 3; }
.eco-x-label { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; fill: var(--kuroshio-deep); }
.eco-x-link { stroke: var(--kuroshio); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.55; }
.eco-cap--x { fill: var(--kuroshio-deep); }

.eco-hub-circle { fill: #fff; stroke: var(--jade-700); stroke-width: 1.8; }
.eco-tower { fill: var(--jade-700); }
.eco-beam { fill: var(--tosa); opacity: 0.45; }
.eco-wave { fill: none; stroke: var(--jade-500); stroke-width: 1.5; opacity: 0.7; }
.eco-wave--soft { opacity: 0.35; }
.eco-hub-title { font-family: var(--font-body); font-size: 13.5px; font-weight: 700; fill: var(--jade-900); }
.eco-hub-sub { font-size: 11.5px; font-weight: 500; fill: var(--jade-700); letter-spacing: 0.14em; }

@media (prefers-reduced-motion: no-preference) {
  .eco-ring { animation: eco-spin 90s linear infinite; transform-origin: 360px 300px; }
  .eco-orbit { animation: eco-spin 38s linear infinite; transform-origin: 360px 300px; }
  .eco-orbit--2 { animation-delay: -12.7s; }
  .eco-orbit--3 { animation-delay: -25.3s; }
}
@keyframes eco-spin { to { transform: rotate(360deg); } }

/* ===== エコシステム図: モバイル専用 縦長SVG切替 ===== */
/* デスクトップは従来の放射状SVG。モバイル(<=640px)は縦長SVGに差し替え、文字を読めるサイズに。 */
.eco-svg--mobile { display: none; }
.eco-svg--desktop { display: block; }
@media (max-width: 640px) {
  .eco-svg--desktop { display: none; }
  .eco-svg--mobile { display: block; }
  .eco-figure { max-width: 480px; }
}
/* 縦長版(viewBox 0 0 480 760)の要素スタイル */
.ecoM-band { fill: var(--jade-100); }
.ecoM-cap { font-family: var(--font-body); font-size: 18px; font-weight: 700; fill: var(--jade-700); letter-spacing: 0.01em; }
.ecoM-cap--x { fill: var(--kuroshio-deep); }
.ecoM-chord { stroke: var(--jade-500); stroke-width: 1; opacity: 0.4; }
.ecoM-node-circle { fill: #fff; stroke: var(--jade-500); stroke-width: 1.6; }
.ecoM-person circle, .ecoM-person path { fill: var(--jade-700); }
.ecoM-node-label { font-family: var(--font-body); font-size: 17px; font-weight: 700; fill: var(--jade-900); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.ecoM-flow { fill: none; stroke: var(--jade-700); stroke-width: 2.4; }
.ecoM-arrowhead { fill: var(--jade-700); }
.ecoM-flow-label { font-family: var(--font-display); font-size: 19px; font-weight: 600; fill: var(--jade-900); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.ecoM-hub-circle { fill: #fff; stroke: var(--jade-700); stroke-width: 2; }
.ecoM-tower { fill: var(--jade-700); }
.ecoM-beam { fill: var(--tosa); opacity: 0.45; }
.ecoM-wave { fill: none; stroke: var(--jade-500); stroke-width: 1.6; opacity: 0.7; }
.ecoM-wave--soft { opacity: 0.35; }
.ecoM-hub-title { font-family: var(--font-body); font-size: 16px; font-weight: 700; fill: var(--jade-900); }
.ecoM-hub-sub { font-family: var(--font-body); font-size: 14px; font-weight: 500; fill: var(--jade-700); letter-spacing: 0.08em; }
.ecoM-x-rect { fill: var(--paper); stroke: var(--kuroshio); stroke-width: 1; stroke-dasharray: 4 3; }
.ecoM-x-label { font-family: var(--font-body); font-size: 17px; font-weight: 500; fill: var(--kuroshio-deep); }
.ecoM-x-link { stroke: var(--kuroshio); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) {
  .ecoM-orbit { animation: ecoM-spin 80s linear infinite; transform-origin: 240px 380px; }
}
@keyframes ecoM-spin { to { transform: rotate(360deg); } }

.eco-legend { display: grid; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 880px) { .eco-legend { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.eco-item { background: #fff; border-radius: 6px; padding: 26px 24px; }
.eco-item h5 {
  font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--jade-900);
  line-height: 1.7; margin-bottom: 10px; display: flex; gap: 10px; align-items: baseline;
}
.eco-item h5::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--jade-500); transform: translateY(-1px); }
.eco-item p { font-size: 14px; line-height: 2; }

/* ---------- §8 伴走者 ---------- */
.mentors { display: grid; gap: 28px; margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 760px) { .mentors { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (min-width: 760px) { .mentors--three { grid-template-columns: repeat(3, 1fr); } }
.mentor { display: grid; grid-template-columns: 112px 1fr; gap: 24px; align-items: start; }
.mentors--three .mentor { grid-template-columns: 1fr; gap: 16px; text-align: center; align-content: start; }
.mentors--three .mentor .ph { max-width: 180px; margin: 0 auto; }
.mentor .ph-box { aspect-ratio: 1; }
.mentor-todo { color: var(--jade-500); font-style: italic; }
.mentor-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--jade-900); }
.mentor-role { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--jade-700); margin: 6px 0 2px; }
.mentor-sub { font-size: 12px; color: var(--jade-700); letter-spacing: 0.03em; line-height: 1.7; margin: 0 0 12px; opacity: 0.85; }
.mentor-quote { font-size: 14.5px; line-height: 2; }
.mentor-extra { font-size: 13.5px; color: var(--jade-700); margin-top: 24px; max-width: var(--measure); }

/* ---------- §8c 相談Q&A(質問箱) — タップで返信が返ってくる手書きカード ---------- */
.qa-grid { display: grid; gap: 20px; margin-top: clamp(32px, 5vw, 52px); grid-template-columns: 1fr; }
@media (min-width: 720px) { .qa-grid { grid-template-columns: repeat(2, 1fr); } }
.qa-card { display: block; perspective: 1200px; min-height: 310px; cursor: pointer; }
/* 手で置いたような僅かな傾き(整いすぎを崩す一点) */
.qa-card:not(.qa-card--cta):nth-child(odd) { transform: rotate(-0.7deg); }
.qa-card:not(.qa-card--cta):nth-child(even) { transform: rotate(0.6deg); }
.qa-inner { display: block; position: relative; width: 100%; min-height: 310px; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(.2, .7, .2, 1); }
.qa-toggle:checked ~ .qa-inner { transform: rotateY(180deg); }
.qa-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 18px; padding: 24px 26px; display: flex; flex-direction: column; gap: 12px;
}
/* 質問=投げ込まれた手書きメモ(あたたかいオレンジ) */
.qa-q { background: #FFF7EC; border: 1px solid #FCE0B8; box-shadow: 0 7px 20px rgba(168, 92, 0, 0.10); }
/* 返信=運営からの手書きの返事(やわらかいグリーン) */
.qa-a { background: var(--jade-100); border: 1px solid #BFE3D6; box-shadow: 0 7px 20px rgba(0, 110, 91, 0.12); transform: rotateY(180deg); }
.qa-tag {
  font-family: var(--font-hand); font-size: 16px; font-weight: 700; color: #fff;
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.qa-q .qa-tag { background: var(--tosa); }
.qa-a .qa-tag { background: var(--jade-700); }
.qa-text { font-family: var(--font-hand); font-weight: 500; font-size: 21px; line-height: 1.85; flex: 1; color: var(--ink); }
.qa-hint { font-family: var(--font-hand); font-size: 13px; color: var(--tosa-deep); margin-top: auto; }
.qa-by { font-family: var(--font-hand); font-size: 14px; color: var(--jade-700); align-self: flex-end; margin-top: 8px; } /* 回答者名(署名) */
.qa-name { color: var(--jade-700); } /* ④二人回答の名前 */
.qa-name::after { content: "："; }
.qa-card--cta {
  min-height: 310px; border-radius: 18px; text-decoration: none; color: #fff;
  background: linear-gradient(150deg, var(--tosa), var(--tosa-deep));
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 8px; padding: 26px 28px; box-shadow: 0 10px 24px rgba(168, 92, 0, 0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 大画面: body zoom で拡大されカードが間延びするため高さを抑える(横幅が広く答えの行数が減るので収まる) */
@media (min-width: 1024px) { .qa-card, .qa-inner, .qa-card--cta { min-height: 250px; } }
.qa-card--cta:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(168, 92, 0, 0.30); }
.qa-cta-mark { font-family: var(--font-hand); font-size: 36px; font-weight: 700; line-height: 1; opacity: 0.95; }
.qa-cta-text { font-family: var(--font-hand); font-size: clamp(21px, 2.6vw, 25px); font-weight: 500; line-height: 1.5; }
.qa-cta-note { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; opacity: 0.92; margin-top: 4px; }

/* ---------- §9 未来(ズームアウト) ---------- */
.future { overflow: hidden; }
.future .headline { text-align: center; margin-inline: auto; }
.future .prose { margin-inline: auto; text-align: center; font-size: 16px; color: var(--jade-100); }
.future-map-wrap { margin-top: clamp(40px, 6vw, 72px); }
.future-map-wrap svg { width: min(100%, 760px); height: clamp(420px, 78vh, 720px); margin-inline: auto; }

.map--dark .map-land { fill: var(--jade-800); stroke: var(--jade-500); stroke-opacity: 0.45; }
.map--dark .pin .pin-tower { fill: var(--tosa); }
.map--dark .pin .pin-beams { fill: #F5E9C8; }
.map--dark .pin .pin-label { fill: var(--jade-100); stroke: var(--jade-900); }
.grad-dot { opacity: 0; transition: opacity 1s ease; }
.grad-dot circle { fill: #F5E9C8; }
.grad-dot .halo { fill: none; stroke: #F5E9C8; stroke-width: 1; opacity: 0.35; }
.grad-line { fill: none; stroke: var(--jade-500); stroke-width: 1; opacity: 0.45; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.6s ease; }
.lit .grad-dot { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .lit .grad-dot circle { animation: dot-glow 3s ease-in-out infinite; }
}
@keyframes dot-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---------- §10 最終CTA ---------- */
.final-cta { text-align: center; }
.final-cta .headline { margin-inline: auto; }
.final-cta-lead { max-width: var(--measure); margin-inline: auto; font-size: 16px; }
.final-cta-buttons {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  margin-top: clamp(36px, 5vw, 52px);
}
.final-cta-buttons .btn { width: min(100%, 380px); padding-block: 18px; font-size: 17px; }
.final-cta-note { font-size: 14px; color: var(--jade-700); margin-top: 28px; letter-spacing: 0.02em; }
.qr-box {
  margin: clamp(40px, 6vw, 60px) auto 0;
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
}
.qr-box .qr-frame {
  width: 124px; height: 124px; border: 1px dashed var(--jade-500); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--jade-500); font-size: 11px; letter-spacing: 0.1em;
  background: #fff;
}
.qr-box span { font-size: 12px; color: var(--jade-700); letter-spacing: 0.08em; }

/* ---------- §11 CTA後ブロック ---------- */
.after-cta h3 {
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); font-weight: 600;
  color: var(--jade-900); margin-bottom: clamp(24px, 4vw, 40px);
}
.faq { max-width: 46em; }
.faq details { border-bottom: 1px solid var(--jade-100); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; gap: 16px; align-items: baseline;
  padding: 20px 0; font-weight: 700; font-size: 16px; color: var(--jade-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--font-display); color: var(--jade-500); flex: none; }
.faq .faq-a { display: flex; gap: 16px; padding: 0 0 24px; font-size: 15px; }
.faq .faq-a::before { content: "A"; font-family: var(--font-display); color: var(--tosa-deep); flex: none; }
.faq .faq-note { font-size: 13px; color: var(--jade-700); }

.articles { margin-top: clamp(64px, 9vw, 96px); }
.articles ol { list-style: none; max-width: 46em; counter-reset: art; }
.articles li { counter-increment: art; border-bottom: 1px solid var(--jade-100); }
.articles a {
  display: flex; gap: 18px; align-items: baseline; padding: 18px 0;
  text-decoration: none; color: var(--jade-900); font-size: 16px; font-weight: 500;
  transition: color 0.2s ease;
}
.articles a:hover { color: var(--jade-700); }
.articles a::before { content: counter(art, decimal-leading-zero); font-family: var(--font-display); font-size: 14px; color: var(--jade-500); flex: none; }
.articles a::after { content: "→"; margin-left: auto; color: var(--jade-500); }
.articles .articles-note { font-size: 13px; color: var(--jade-700); margin-top: 16px; }

/* ---------- フッター ---------- */
.footer { background: var(--jade-900); color: var(--jade-100); padding-block: clamp(48px, 7vw, 80px) 32px; }
.footer .footer-grid { display: grid; gap: 32px; }
@media (min-width: 760px) { .footer .footer-grid { grid-template-columns: 1fr auto; align-items: start; } }
.footer .footer-logo { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #fff; letter-spacing: 0.16em; margin-bottom: 12px; }
.footer p { font-size: 13px; line-height: 2.1; opacity: 0.85; }
.footer-links { display: flex; gap: 24px; font-size: 13px; }
.footer-links a { color: var(--jade-100); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-copy { margin-top: 48px; font-size: 11px; letter-spacing: 0.1em; opacity: 0.5; text-align: center; }

/* ロゴ */
.cta-logo {
  display: block; width: 132px; height: 132px; border-radius: 50%;
  margin: 0 auto clamp(24px, 4vw, 36px);
  box-shadow: 0 0 0 1px var(--jade-100);
}
.footer-brand { display: flex; gap: 22px; align-items: center; }
.footer-brand img { width: 72px; height: 72px; border-radius: 50%; flex: none; }

/* ---------- 章扉イラスト(第二章 挫折・塗り替えられた進路) ---------- */
.chapter-art { margin: clamp(40px, 6vw, 64px) auto 0; }
/* 章扉イラストは文章の下に全幅で大きく配置(横並びより視認性優先) */
.chapter-art svg { width: 100%; height: auto; display: block; }
.chapter-art figcaption { font-size: 12px; color: var(--jade-700); letter-spacing: 0.06em; text-align: center; margin-top: 16px; line-height: 1.9; }
.c-ln { fill: none; stroke: var(--jade-700); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.c-ln-soft { fill: none; stroke: var(--jade-500); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.c-dash { stroke-dasharray: 3.5 6; }
.c-fill-jade { fill: var(--jade-700); }
.c-fill-tosa { fill: var(--tosa); }
.c-halo { fill: none; stroke: var(--tosa); stroke-width: 1; opacity: 0.4; }
.c-star { fill: none; stroke: var(--jade-500); stroke-width: 1.4; }
.c-label { font-family: var(--font-body); font-size: 17px; font-weight: 700; letter-spacing: 0.06em; }
.c-label--ideal { fill: var(--jade-500); }
.c-label--now { fill: var(--jade-700); }
@media (prefers-reduced-motion: no-preference) {
  body.js .chapter-art .c-draw { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s ease 0.3s; }
  body.js .chapter-art.in .c-draw { stroke-dashoffset: 0; }
  body.js .chapter-art .c-fade { opacity: 0; transition: opacity 0.8s ease 1.5s; }
  body.js .chapter-art.in .c-fade { opacity: 1; }
}

/* ---------- リビール(控えめなフェード) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.9s ease, transform 0.9s ease; }
  body.js .reveal.in { opacity: 1; transform: none; }
}

/* ---------- スマホ最適化(縦の余白を詰め、段落を読みやすく) ---------- */
@media (max-width: 600px) {
  .section { padding-block: clamp(56px, 15vw, 96px); }
  .prose p + p { margin-top: 1.55em; }
  .stop-card + .stop-card { margin-top: clamp(72px, 16vh, 140px); }
  .headline { font-size: clamp(26px, 7.4vw, 34px); }
}