/* =========================================================
   出口戦略とは（望む未来 → 今日の一手）: 星図が広がる（試作 C 案を移植・9/28）
   経済圏から星空の奥へ進み、望む未来の星に寄ったところから引いていく。
   カメラは今の工程の星を追いながら引き、最後に航路の全体・同心円・十字の目印が1画面に収まる。
   動きは js/fmap.js。JS が動かない・動きを減らす設定のときは、説明を縦に並べて見せる（.is-ready が無い状態）
   ========================================================= */
.fmap { background: var(--bg); }
.fmap__pin { position: relative; }
.fmap.is-ready .fmap__pin { height: calc(560 * var(--svh, 1svh)); }
.fmap__stage { position: relative; }
.fmap.is-ready .fmap__stage { position: sticky; top: 0; height: var(--svh100, 100svh); overflow: hidden; }
.fmap__sky, .fmap__svg, .fmap__stars { display: none; }
.fmap.is-ready .fmap__sky, .fmap.is-ready .fmap__svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fmap.is-ready .fmap__stars { display: block; position: absolute; inset: 0; pointer-events: none; }
.fmap__svg { overflow: visible; }
.fmap__route { fill: none; stroke: #D9BC85; stroke-width: 1.5; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(217,188,133,.7)); stroke-dasharray: 0 1; }
.fmap__dash { fill: none; stroke: #D9BC85; stroke-width: 1; stroke-dasharray: 3 7; opacity: .3; }
.fmap__rings circle { fill: none; stroke: rgba(217,188,133,.14); stroke-width: 1; }
.fmap__axes line { stroke: rgba(217,188,133,.6); stroke-width: 1; stroke-dasharray: 2 6; }

/* 星（工程） */
.fstar { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform, opacity; }
.fstar__core { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; transform: rotate(45deg) scale(var(--s, 1)); background: #FFE7B0; box-shadow: 0 0 6px #ffd68a, 0 0 18px rgba(217,188,133,.9), 0 0 42px rgba(217,188,133,.45); }
.fstar__halo { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,140,.28), rgba(255,214,140,0) 65%); transform: scale(var(--s, 1)); }
.fstar.is-now .fstar__halo { animation: fstar-halo 2.6s ease-in-out infinite; }
@keyframes fstar-halo { 50% { opacity: .55; } }
.fstar__tag { position: absolute; left: 18px; top: -10px; white-space: nowrap; font-family: var(--serif-ja); font-size: 13px; letter-spacing: .14em; color: var(--sub-inv); text-shadow: 0 0 10px rgba(0,0,0,.9); transition: color .5s, opacity .6s; }
.fstar__tag b { font-family: var(--serif-en); font-weight: 400; color: var(--accent-l); margin-right: .5em; }
.fstar.is-now .fstar__tag { color: var(--text-inv); }
.fstar.is-left .fstar__tag { left: auto; right: 18px; }
.fstar__big { position: absolute; left: 0; top: 30px; transform: translateX(-50%); white-space: nowrap; font-family: var(--serif-ja); font-size: clamp(20px,2vw,26px); letter-spacing: .2em; color: var(--accent-l); text-shadow: 0 0 16px rgba(217,188,133,.45); opacity: 0; transition: opacity .8s; }
.fstar.is-end .fstar__big { opacity: 1; }
.fstar.is-end:has(.fstar__big) .fstar__tag { opacity: 0; }

/* 説明（今の工程）: JS が無いときは縦に並べる */
.fmap__frame { position: relative; z-index: 3; }
.fmap:not(.is-ready) .fmap__frame { padding-top: clamp(96px,11vw,160px); padding-bottom: clamp(96px,11vw,160px); }
.fmap__items { list-style: none; margin: clamp(28px,3vw,40px) 0 0; padding: 0; display: grid; gap: 28px; }
.fmap__item { display: grid; gap: 10px; }
.fmap__tag { font-size: 13px; letter-spacing: .14em; color: var(--muted-inv); }
.fmap__tag b { font-family: var(--serif-en); font-weight: 400; font-size: 22px; color: var(--accent-l); margin-right: .5em; }
.fmap__title { font-family: var(--serif-ja); font-size: clamp(24px,2.4vw,34px); font-weight: 500; line-height: 1.5; letter-spacing: .08em; color: var(--text-inv); }
.fmap__text { font-size: 15px; line-height: 2; color: var(--sub-inv); }
.fmap__close { margin: clamp(32px,4vw,48px) 0 0; font-family: var(--serif-ja); font-size: clamp(18px,1.7vw,22px); line-height: 1.9; letter-spacing: .06em; color: var(--text-inv); }
.fmap__dots { display: none; }

.fmap.is-ready .fmap__frame { position: absolute; inset: 0; pointer-events: none; }
.fmap.is-ready .fmap__panel { position: absolute; left: var(--gutter); top: 50%; width: min(34vw, 420px); height: 330px; transform: translateY(-50%); }
.fmap.is-ready .fmap__items { position: absolute; left: 0; right: 0; top: 40px; margin: 0; display: block; }
.fmap.is-ready .fmap__item { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fmap.is-ready .fmap__item.is-on { opacity: 1; transform: none; }
.fmap.is-ready .fmap__title { margin-top: 4px; }
.fmap.is-ready .fmap__close { position: absolute; left: 0; right: 0; top: 40px; margin: 0; opacity: 0; transition: opacity .8s; }
.fmap.is-ready .fmap__close.is-on { opacity: 1; }
.fmap.is-ready .fmap__dots { display: flex; gap: 10px; position: absolute; left: 0; bottom: 0; }
.fmap__dots i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--accent); transition: background .4s; }
.fmap__dots i.is-on { background: var(--accent-l); }

@media (max-width: 1023.98px) {
  .fmap.is-ready .fmap__panel { left: var(--gutter); right: var(--gutter); top: auto; bottom: 28px; width: auto; height: 236px; transform: none; }
  .fmap.is-ready .fmap__items, .fmap.is-ready .fmap__close { top: 36px; }
  .fmap__title { font-size: 22px; }
  .fmap__text { font-size: 14px; line-height: 1.85; }
  .fstar__tag { font-size: 12px; }
  .fstar__big { font-size: 17px; top: 22px; }
}

/* ---- 前の段の中へ進む（9/28 夕: 並び替えで前の段は「私たちの現在地」に）----
   現在地を画面に止め（main.js）、その後ろでこの段を始める。重なっている間、この段の舞台は透明のままで、
   fmap.js が現在地を左の手前へ過ぎ去らせ、星が光の尾を引いて流れる。抜けきったところで舞台に黒い地を敷き、星図へ */
.fmap.is-ready { position: relative; z-index: 4; background: transparent; pointer-events: none; }   /* 上への食い込み（margin-top）は main.js が現在地の止まる位置から決める */
.fmap.is-ready .fmap__pin { height: calc(660 * var(--svh, 1svh)); }
.fmap.is-ready .fmap__stage { pointer-events: none; }
.fmap.is-ready .fmap__stage::before { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: var(--bgk, 0); }
.fmap.is-ready:not(.is-live) .fmap__stage > * { visibility: hidden; }
.fmap.is-ready .fmap__panel { transition: opacity .6s var(--ease); }
.fmap.is-ready:not(.is-in) .fmap__panel { opacity: 0; }

/* ---- 代表挨拶: 星図の黒から、最後の夕暮れの空のネイビーへ ---- */
#letter.letter:has(.letter-card) { background: linear-gradient(180deg, var(--bg) 0%, #0D1118 30%, #0E1624 62%, var(--navy) 100%); }
/* スマホ: 結びの一文（9/29 に1行増えた）が点の目印と重ならず、画面に収まるように */
@media (max-width: 1023.98px) {
  .fmap.is-ready .fmap__panel { height: 268px; bottom: 20px; }
  .fmap.is-ready .fmap__close { font-size: 15.5px; line-height: 1.85; }
  .fmap.is-ready .fmap__dots { bottom: -4px; }
}
@media (max-width: 1023.98px) and (max-height: 700px) { .fmap.is-ready .fmap__close { font-size: 14px; line-height: 1.75; } .fmap.is-ready .fmap__panel { height: 236px; } }