/* =========================================================
   /guidance/ 専用（2026-08-13 全面刷新）
   菅さん「全てopusが考える最高の状態に仕上げたい。斬新なデザインで魅了して、
   内容でワクワクさせる、これは気になる！という流れにしたい」

   考え方：このページの一番の資産は**園内マップ**（12の施設が建つ遊園地の絵）。
   ページ全体を「入園 → 園内を歩く」という一本の体験にする。
   ・入口 … マップを**入場ゲートに寄った状態**から園全体へ引いていく（スクロールで動く）
   ・園内 … 12の場所を1つずつ写真と一緒に。読むためにクリックさせない
   前は同じ12項目が**3回**出ていた（マップ／横スクロールのカード／全文アコーディオン）。
   マップと12の場所の**2回**にして、全文はその場で開くようにした。
   ========================================================= */

/* ---------- 入園：マップが引いていく ----------
   高さ 210vh の筒の中で、絵を sticky で貼り付けたまま
   scale 2.15 →1.0 に戻す。transform-origin を下寄りにしてあるので、
   **入場ゲート（絵の下中央）から園全体へ引く**動きになる。
   JS が動かないときは scale(1)＝マップ全体が出るだけ。壊れない。 */
/* ★★ 2026-08-13：**スクロールで寄り引きする演出はやめた。**
   菅さん「中途半端な画像が最初に目に飛び込むことによるマイナスはないのか？」
   寄った状態から始めると、絵の端でラベルの箱が**文字の途中で切れて**表示される
   （「協業」「/ グルコン」「側としての活動」）。
   これは“寄っている”ではなく“**画像が壊れている／読み込めていない**”に見える。
   1画面目でそれを見せる損は、演出の得より大きい。
   → **最初から園全体が見えている**形にした。動かさないぶん、絵の情報量で見せる。 */
.park{position:relative;background:#0b1a21}
.park-stick{min-height:100vh;
  display:grid;grid-template-rows:auto auto auto;align-content:center;justify-items:center;
  gap:min(3.2vh,28px);padding:calc(var(--hdh,71px) + 4.2vh) 30px 5vh}
.park-head{max-width:1060px;width:100%;text-align:center}
.park-head .lab{color:#7fe4f5;justify-content:center}
.park-head .lab::before{background:#7fe4f5}
.park-head h1{margin:15px 0 0;color:#fff;font-size:clamp(29px,3.5vw,50px);font-weight:700;
  line-height:1.28;letter-spacing:.01em}
.park-head h1 b{font-weight:700;background:linear-gradient(100deg,#7fe4f5,#a9b6ff 46%,#ff8ec0);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.park-lead{margin:18px auto 0;max-width:42rem;color:rgba(255,255,255,.74);
  font-size:clamp(14px,1.15vw,16px);font-weight:500;line-height:2;letter-spacing:.03em}
.park-view{position:relative;overflow:hidden;justify-self:center;
  width:min(100%,1300px,calc((100vh - var(--hdh,71px) - 320px) * 1.7756));
  aspect-ratio:2184/1230;box-shadow:0 40px 90px -40px rgba(0,0,0,.75)}
.park-a{position:absolute;inset:0;display:block}
.park-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 絵の説明。**見出しではなく注釈**なので、小さく・静かに置く */
.park-sub{margin:0;max-width:52rem;text-align:center;color:rgba(255,255,255,.82);
  font-size:clamp(13px,1.05vw,15px);font-weight:500;line-height:1.95;letter-spacing:.04em}
.park-sub b{font-weight:700;color:#7fe4f5}
.park-zoom{display:none}

@media(max-width:820px){
  .park-stick{min-height:0;gap:20px;padding:calc(var(--hdh,71px) + 34px) 20px 58px}
  .park-head{text-align:left}
  .park-head .lab{justify-content:flex-start}
  .park-lead{margin-left:0;font-size:min(3.7vw,14.5px);line-height:2.05}
  .park-view{width:100%;box-shadow:0 24px 50px -30px rgba(0,0,0,.7)}
  /* ★ 絵の説明はスマホでも中央のまま（2026-08-14 菅さん指定）。
     見出し・リードは左に寄せているが、この1文は絵に添えるキャプションなので中央。 */
  .park-sub{font-size:min(3.6vw,14px)}
  /* ★ スマホは2行に割る（2026-08-14 菅さん指定の切り位置）。
       「マーチャントクラブの門を潜ると、／12の施設が建っているイメージです。」
       PCは1行のまま（span を並べているだけなので、block にしなければ繋がって出る）。 */
  .park-sub .pk-l{display:block}
  .park-zoom{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.1em;
    color:rgba(255,255,255,.5)}
}


/* ---------- 1画面目に桜（petals）を降らせる（2026-08-13 菅さん）----------
   暗い背景なので、mc-fx が自動で加算合成に切り替わる（背景の明るさで判定している）。
   `data-c1` をピンクにしてあるので、花びらはピンクで出る。
   ★ `.fx::after` は**白いベール**（白地のページ用）。暗い1画面目では白くかぶるので消す。
   ★ `.fx > .wrap` にしか z-index が入らないので、中身の箱にも自分で重なりを与える。 */
.park.fx::after{background:none}
/* 花びらは**うっすら**。暗い背景に加算合成だと、そのままでは粒が大きく数も多くて
   地図のまわりが騒がしくなる（実測）。効果そのものは共通部品なので触らず、濃度だけ下げる。 */
.park > canvas.ml-fx{opacity:.5}
.park > .park-stick{position:relative;z-index:2}
.park .glow{background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),
  rgba(255,111,168,.14),transparent 70%)}

/* ---------- 前置きの見出し ----------
   名前の副題として付いていた13.5pxのままだと、暗い1画面目の直後で**小さすぎる**
   （菅さん「超小さいですね」）。節の見出しとして立てる。 */
.intro-h .who{margin:0;padding-left:18px;border-left:3px solid var(--aq);
  font-size:clamp(20px,2.1vw,27px);font-weight:600;line-height:1.5;letter-spacing:.03em;
  color:var(--ink)}
@media(max-width:700px){ .intro-h .who{padding-left:14px;font-size:min(5.2vw,21px)} }


/* ---------- 前置きを1画面目と地続きの「暗い面」にする（2026-08-13 菅さん）----------
   白地にぽつんと置いてあったので、暗いヒーローの直後で**そこだけ浮いて**いた。
   ここまでが入口の説明、**この下からが本題**、と面の色で区切る。
   暗（入口＋前置き）→ 淡い水色（はじめの3ヶ月）→ 白（12の場所）と進む。 */
.intro-dark{background:#0b1a21;border-top:1px solid rgba(255,255,255,.09);
  padding:clamp(64px,8vh,104px) 0 clamp(70px,9vh,116px)}
.intro-dark .intro-h .who{color:#fff;border-left-color:#7fe4f5}
.intro-dark .read p{color:rgba(255,255,255,.74)}
.intro-dark .read p b{color:#fff;font-weight:700}
/* 「続きます」の印。押せる部品ではないので、細い線だけ */
.intro-next{margin:clamp(44px,6vh,76px) auto 0;width:1px;height:clamp(40px,6vh,64px);
  background:linear-gradient(180deg,rgba(127,228,245,0),rgba(127,228,245,.85));position:relative}
.intro-next span{position:absolute;left:50%;bottom:-1px;width:5px;height:5px;
  border-radius:50%;background:#7fe4f5;transform:translateX(-50%)}

/* ---------- 入会費用：原文どおり「表」に戻す ----------
   菅さん「元々金額は出していたと思うのですが、大々的に目立たせる感じでしたっけ？」
   原文（DB）は `<table>` の2行（区分／料金）で、**本文と同じ大きさの文字**だった。
   新デザインで 46px の数字カード2枚にしたのは**やり過ぎ**。
   サービスを知るためのページで、金額だけが主役になっていた。
   細い罫だけの表に戻す。数字は20px＝本文よりわずかに大きい程度にとどめる。 */
/* ★ 見出し行のクラスを `hd` にしてはいけない。サイトのヘッダーが `.hd{position:fixed}` で、
   **行が固定表示に飛ばされて消える**（実測で行が見えなくなった）。`th` にしてある。 */
.fee-tb{margin:38px 0 0;max-width:var(--mw);position:relative;z-index:2;
  border-top:1px solid var(--line)}
.fee-tb .r{display:grid;grid-template-columns:180px 1fr;gap:0 28px;
  padding:19px 2px;border-bottom:1px solid var(--line)}
.fee-tb .r.th{padding:13px 2px}
.fee-tb .r.th .k,.fee-tb .r.th .v{font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--ink-3)}
.fee-tb .k{font-size:14.5px;font-weight:600;color:var(--ink-2);letter-spacing:.04em}
.fee-tb .v{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:.02em;line-height:1.6}
/* ★ 小さくしていたのに理由が無かった（菅さん指摘）。本文と同じ大きさに戻す。 */
.fee-note{margin-top:36px}
.fee-note p{font-size:16px;line-height:2.05;color:var(--ink-b)}
.fee-note p b{color:var(--ink);font-weight:700}
@media(max-width:700px){
  .fee-tb .r{grid-template-columns:1fr;gap:6px;padding:16px 2px}
  .fee-tb .r.th{display:none}
  .fee-tb .k{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--aq-t)}
  .fee-tb .v{font-size:min(4.8vw,19px)}
}

/* ---------- 入会までの流れ（2026-08-29 追加）----------
   #start の .path（3列の道）を4列で使う変種。共有mc.cssの.pathは3列固定。
   ★ 4列の指定は min-width で囲うこと。素の .path.p4 で書くと詳細度で
   mc.cssのスマホ用 1fr（メディア内・詳細度は上がらない）に勝ってしまい、
   スマホでも4列のままになる。 */
@media(min-width:961px){
  .path.p4{grid-template-columns:repeat(4,1fr)}
  .path.p4::before{left:6%;right:6%}
  .path.p4 .st h4{font-size:18.5px}
}
.path.p4 .st:nth-child(2)::before{border-color:#5ad3e8}
.path.p4 .st:nth-child(3)::before{border-color:#7ab4dd}
.path.p4 .st:nth-child(4)::before{border-color:var(--pk)}

/* ---------- 個別相談へのブリッジ ----------
   前は「マーチャントクラブは、誰にでも同じ形で…」から始まっていて**唐突だった**
   （菅さん指摘）。原文（DB）にあった「ここまでお読みいただき、ありがとうございます。」を戻し、
   本文より一段大きく置いて、読み手に向き直る1行として見せる。 */
/* ★ 枠の中に入れていたのは間違い（菅さん）。これは**枠へ入る前の一言**なので、
   囲みの外・上に置く。囲みの中は「個別相談の説明」だけにする。 */
.cons-br{margin:0 0 26px;text-align:center;font-size:clamp(17px,1.6vw,21px);font-weight:600;
  color:var(--ink);letter-spacing:.03em;position:relative;z-index:2}
/* ★ スマホでも中央のまま（2026-08-14 菅さん「中央寄せ2段かなあ」）。
   `.park-sub` と同じで、PCは中央なのにスマホだけ左へ落としていた。
   2段に割るのは本文の `.nb`（下）。C案でスマホの包みは効かなくしてあるが、
   `.nb`（white-space:nowrap）は生きているのでこちらを使う。 */
@media(max-width:700px){ .cons-br{margin-bottom:20px;font-size:min(4.6vw,18px)} }


/* ---------- 写真ではなく「画面のキャプチャ」を置くとき（2026-08-13 菅さん）----------
   菅さん「講義ビデオサイトのキャプチャは取れるけど、今のサイズで切り抜かれると中途半端になる」
   既定の枠は 4:3 の切り抜き（object-fit:cover）で、**人や部屋の写真には合うが、
   横長で文字が乗っている画面キャプチャは端が切れて読めなくなる**。
   `<figure class="pl-ph shot">` にすると、**切り抜かずに全体を出す**（contain）。
   薄い下地と細い枠を付けて「画面を写したもの」として見せる。
   番号は上の余白に置くので、キャプチャの中身に重ならない。 */
/* ★★ 2026-08-13：菅さん「4:3と16:10が混ざるのは見た目にどうなのかなあ？」
   そのとおり。**枠の縦横比は12個ぜんぶ同じ（4:3）にする。**
   混ぜると左右交互の並びで**写真の欄だけ高さが飛び飛び**になる。
   変えるのは「枠の形」ではなく「中身の収め方」だけ：
   写真＝切り抜く（cover）／キャプチャ＝切り抜かない（contain）。
   上に余白を取って番号を置くので、キャプチャの中身に重ならない。 */
.pl-ph.shot{background:var(--bg2);border:1px solid var(--line);
  aspect-ratio:16/9;display:grid;place-items:center;padding:54px 18px 18px}
.pl-ph.shot::before{display:none}
.pl-ph.shot img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:transparent}
.pl-ph.shot .pl-n{left:18px;top:6px;font-size:clamp(30px,3.2vw,42px);
  color:transparent;background:linear-gradient(140deg,var(--aq),var(--pk));
  -webkit-background-clip:text;background-clip:text;text-shadow:none}
@media(max-width:960px){ .pl-ph.shot{padding:46px 12px 12px} .pl-ph.shot .pl-n{left:14px;top:4px} }

/* ---------- 締めと費用は中央にまとめる（2026-08-13 菅さん）----------
   見出しは**字ごと中央**（1〜2行なので行末が荒れない）。
   本文は**柱を中央に置くだけで、字は左のまま**（中央寄せにはしない）。 */
/* ★ クラス名は `.mid` にしてはいけない。mc.css に
   `.mid{max-width:var(--mw);margin:0 auto;text-align:center}` が既にあり、
   **節ごと646pxに縮んだ**（実測：section の幅が1440→646）。ページ固有は g- を付ける。 */
.g-mid .head-out{text-align:center}
.g-mid .head-out .lab{justify-content:center}
.g-mid .head-out .h2{margin-left:auto;margin-right:auto}
.g-mid .head-out .lead{text-align:center;margin-left:auto;margin-right:auto}
.g-mid .read{margin-left:auto;margin-right:auto}
/* 費用の見出しは他の節より一段小さく。金額の節が一番大きい見出しである必要はない */
.fee-sec .h2{font-size:clamp(24px,3vw,38px)}
.fee-sec .lead{margin-top:16px}
.fee-tb{margin-left:auto;margin-right:auto}

/* ---------- 画像の拡大（ライトボックス）----------
   前は画像そのものへのリンクだった＝**別ページに飛んでしまい、外を押しても戻れない**
   （菅さん指摘）。同じページの上に重ねて出し、**外側・×・Esc のどれでも閉じる**。 */
/* ★ 節の中に置くと `.fx{isolation:isolate}` の中に閉じ込められ、
   z-index をいくつ上げても**固定ヘッダーより下**になる（実測でヘッダーが上に残った）。
   だから本文の末尾（どの節にも属さない場所）に置いてある。
   grid だと `max-height:100%` が解決できず画像が画面の下からはみ出す。flex にする。 */
.lbx{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,54px);background:rgba(6,16,21,.92);
  animation:lbxIn .28s ease}
.lbx[hidden]{display:none}
@keyframes lbxIn{from{opacity:0}to{opacity:1}}
.lbx img{max-width:100%;max-height:100%;display:block;cursor:zoom-out;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}

/* ★ スマホでは「押しても大きくならない」（2026-08-14 菅さんの実機報告）。
     地図は 2184×1230 の**横長**なので、画面の幅に合わせると 375px の画面では 343px。
     ページの中の地図が 335px なので、**8px しか変わらない**（実測）。
     幅ではなく**高さ**を画面いっぱいにして、横にスワイプして読む形にする。
     375×812 なら幅 1442px ＝ ページの中の約4.3倍になり、施設名が読めるようになる。
   ※ 閉じるボタンは position:fixed にする（中身が横に流れるので absolute だと一緒に流れて消える）。
   ※ `.lbx[hidden]` は (0,2,0) なので、ここで display を変えても閉じているときは出てこない。 */
@media(max-width:820px){
  .lbx{display:block;padding:0;overflow:auto;-webkit-overflow-scrolling:touch}
  .lbx img{max-width:none;max-height:none;width:auto;height:100vh;height:100dvh}
}
.lbx-x{position:absolute;right:clamp(12px,3vw,30px);top:clamp(12px,3vw,30px);
  width:46px;height:46px;border:1px solid rgba(255,255,255,.35);background:transparent;
  color:#fff;font-size:22px;line-height:1;cursor:pointer;border-radius:50%;
  transition:background .3s,border-color .3s}
@media(hover:hover){ .lbx-x:hover{background:rgba(255,255,255,.14);border-color:#fff} }
.lbx-x:active{background:rgba(255,255,255,.2)}
/* ★ 閉じるボタンは **`.lbx-x` の指定より後ろ**に置くこと。
     同じ詳細度なので、前に書くと下の `position:absolute` に負ける（実際に負けて、
     スマホで横にスワイプするとボタンが画像と一緒に流れて消えた）。 */
@media(max-width:820px){ .lbx-x{position:fixed} }

/* ---------- 12の場所 ---------- */
.places{padding-bottom:120px}
/* 目次は「札」ではなく1行の細い並び。押すとその場所へ飛ぶ */
.pl-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px;position:relative;z-index:2}
.pl-nav a{display:inline-flex;align-items:baseline;gap:9px;
  border:1px solid var(--line);padding:9px 15px;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);
  transition:border-color .3s,color .3s,background .3s}
.pl-nav a i{font-style:normal;font-family:var(--en);font-size:11px;font-weight:700;
  letter-spacing:.06em;color:var(--aq-t)}
@media(hover:hover){
  .pl-nav a:hover{border-color:var(--aq);background:var(--bg2)}
}
.pl-nav a:active{border-color:var(--aq);background:var(--bg2)}

/* 1つの場所＝写真と文の2列。偶数番は左右を入れ替えてリズムを作る */
.pl{display:grid;grid-template-columns:1.02fr 1fr;gap:0 60px;align-items:center;
  margin-top:104px;position:relative;z-index:2;scroll-margin-top:110px}
.pl:nth-of-type(even) .pl-ph{order:2}
.pl-ph{position:relative;margin:0}
/* ★★ 2026-08-13：枠を 4:3 → **16:9** に。菅さん「4:3で切れちゃうとやっぱり
   画像の切り抜かれ方が嫌だなあ」。差し替えていただいた素材を実測すると
   **12枚中10枚が 1.78（＝16:9）**だった。4:3の枠だと**左右を25%捨てていた**。
   16:9にすると、その10枚は**ほぼ切り抜かれない**（1.780 対 1.778）。 */
.pl-ph img{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;
  background:var(--bg2)}
/* 番号は**写真の中**に置く。外にはみ出させると白地の上で白い字が消える（実測）。
   写真の明るさに関係なく読めるよう、左上だけ薄く落とす。 */
.pl-ph::before{content:"";position:absolute;left:0;top:0;width:46%;height:52%;z-index:1;
  background:linear-gradient(146deg,rgba(6,20,26,.5),rgba(6,20,26,0) 72%);pointer-events:none}
.pl-n{position:absolute;left:22px;top:12px;z-index:2;font-family:var(--en);
  font-size:clamp(46px,5.4vw,74px);font-weight:700;line-height:1;letter-spacing:-.03em;
  color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.35)}
.pl-k{display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--aq-t)}
.pl-k::before{content:"";width:20px;height:1px;background:var(--aq);flex:none}
.pl-t{margin:14px 0 0;font-size:clamp(21px,2.3vw,29px);font-weight:600;
  line-height:1.5;letter-spacing:.02em;color:var(--ink)}
.pl-lead{margin:18px 0 0;font-size:16px;color:var(--ink-b);line-height:2.05;
  letter-spacing:var(--ls)}
/* 「どう使うか」＝この場所で最初にやること。ピンクの短い罫だけで示す */
.pl-how{margin:24px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.pl-how .t{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--ink-3)}
.pl-how ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.pl-how li{display:grid;grid-template-columns:22px 1fr;align-items:start;
  font-size:14px;color:var(--ink-2);line-height:1.9;letter-spacing:.01em}
.pl-how li::before{content:"";width:12px;height:2px;background:var(--pk);margin-top:.95em}
/* 続きはその場で開く。別の節に飛ばさない */
.pl-more{margin-top:22px}
.pl-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink-2);
  border-bottom:1px solid var(--aq);padding-bottom:7px;transition:color .3s,border-color .3s}
.pl-more summary::-webkit-details-marker{display:none}
.pl-more summary::after{content:"＋";font-family:var(--en);font-size:12px;color:var(--aq-t);
  transition:transform .35s}
.pl-more[open] summary::after{content:"−"}
@media(hover:hover){ .pl-more summary:hover{color:var(--ink);border-color:var(--pk)} }
.pl-more summary:active{color:var(--ink);border-color:var(--pk)}
.pl-body p{margin:22px 0 0;font-size:15.5px;color:var(--ink-b);line-height:2.1;
  letter-spacing:var(--ls)}

@media(max-width:960px){
  .pl{grid-template-columns:1fr;gap:26px;margin-top:76px}
  .pl:nth-of-type(even) .pl-ph{order:0}
  .pl-n{left:16px;top:10px}
  .places{padding-bottom:86px}
}
@media(max-width:700px){
  .pl-nav{gap:7px;margin-top:30px}
  .pl-nav a{padding:8px 12px;font-size:12px}
  .pl-lead{font-size:15px;line-height:1.95}
}