/* コースガイド（標高＋施設）ビューア
   前提: このCSSは .cg 配下だけに効く。既存サイトのリセットに依存しない。 */

.cg { --cg-ink:#1b211d; --cg-sub:#4a544d; --cg-mute:#9aa39c; --cg-line:#dfe4dc;
      --cg-tint:#f7f9f5; --cg-green:#2f7d32; --cg-green-d:#256327; --cg-orange:#f97316;
      font-family:"Noto Sans JP", system-ui, sans-serif; color:var(--cg-ink);
      border:1px solid var(--cg-line); border-radius:20px; background:#fff; overflow:hidden;
      box-shadow:0 6px 24px rgba(27,33,29,.05); }

.cg__head { display:flex; gap:32px; padding:26px 28px 20px; }
.cg__headMain { flex:1; display:flex; flex-direction:column; gap:10px; }
.cg__badgeRow { display:flex; align-items:center; gap:8px; }
.cg__badge { padding:3px 10px; border-radius:999px; background:#e9f4e2; color:var(--cg-green);
             font-size:11px; font-weight:700; letter-spacing:.06em; }
.cg__by { font-size:11px; color:var(--cg-mute); }
.cg__title { font-size:23px; font-weight:900; line-height:1.4; margin:0; }
/* 見出しのうちクラブ名の部分だけをオレンジにする（後ろの説明は本文色のまま） */
.cg__titleBrand { color:var(--cg-orange); }
.cg__lead { margin:0; font-size:13.5px; line-height:1.9; color:var(--cg-sub); max-width:560px; text-wrap:pretty; }

.cg__legend { width:330px; display:flex; flex-direction:column; gap:10px; padding-top:4px; }
.cg__legendTitle { font-size:11.5px; font-weight:800; color:#6b756e; letter-spacing:.06em; }
.cg__chips { display:flex; flex-wrap:wrap; gap:6px; }
.cg__chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid #e3e7df;
            border-radius:999px; font-size:11.5px; color:var(--cg-sub); }
.cg__dot { width:9px; height:9px; border-radius:2px; display:block; }
.cg__dot--toilet { background:linear-gradient(90deg,#1f6fd0 50%,#e03b3b 50%); }
.cg__dot--water  { background:#39b6e8; }
.cg__dot--drink  { background:#3aa14a; }
.cg__dot--shop   { background:#d98026; }
.cg__note { font-size:11.5px; line-height:1.8; color:var(--cg-sub); padding:10px 12px;
            border-radius:10px; background:var(--cg-tint); }

/* 帯（横スクロール） */
.cg__stage { position:relative; margin:0 28px; border:1px solid #e3e7df; border-radius:14px; overflow:hidden; background:#fff; }
.cg__scroller { overflow-x:auto; overflow-y:hidden; display:flex; align-items:stretch;
                -webkit-overflow-scrolling:touch; scrollbar-width:thin; cursor:grab; }
.cg__scroller.is-drag { cursor:grabbing; scroll-behavior:auto; }
.cg__strip { display:block; height:420px; width:auto; max-width:none; user-select:none; -webkit-user-drag:none; }
.cg__arrow { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
             border:1px solid var(--cg-line); background:rgba(255,255,255,.94); color:var(--cg-ink);
             font-size:17px; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.cg__arrow:hover { background:#fff; }
.cg__arrow--prev { left:12px; } .cg__arrow--next { right:12px; }

/* 操作バー */
.cg__bar { display:flex; align-items:center; gap:20px; padding:14px 28px 8px; }
.cg__jumps { display:flex; gap:7px; flex-wrap:wrap; }
.cg__jump { border:1px solid var(--cg-line); border-radius:9px; padding:8px 14px; background:#fff;
            color:var(--cg-ink); font:700 12px/1 inherit; font-family:inherit; cursor:pointer; }
.cg__jump:hover { background:#f1f3ef; }
.cg__mini { position:relative; flex:1; height:30px; border-radius:5px; overflow:hidden;
            border:1px solid #e3e7df; background:#fff; cursor:pointer; }
.cg__mini img { display:block; width:100%; height:auto; }
.cg__window { position:absolute; top:0; bottom:0; border:2px solid var(--cg-green); border-radius:3px;
              background:rgba(47,125,50,.14); left:0; width:12%; pointer-events:none; }
.cg__readout { font-size:12px; font-weight:700; min-width:96px; text-align:right; }

.cg__foot { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 28px 22px; }
.cg__src { font-size:11px; line-height:1.7; color:#a8b0a9; }
.cg__actions { display:flex; gap:10px; align-items:center; }
.cg__cta { border:0; border-radius:10px; padding:11px 20px; background:var(--cg-green); color:#fff;
           font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.cg__cta:hover { background:var(--cg-green-d); }

/* スマホ用の要約カード要素（PCでは非表示） */
.cg__steps, .cg__preview, .cg__mobileCta { display:none; }

/* 全画面（ライトボックス／スマホの全画面ビューア共通） */
.cg-full { position:fixed; inset:0; z-index:9999; background:rgba(14,18,16,.97);
           display:flex; flex-direction:column; }
.cg-full[hidden] { display:none; }
.cg-full__head { height:58px; display:flex; align-items:center; justify-content:space-between;
                 padding:0 20px; color:#fff; font-size:13px; font-weight:700; gap:12px; }
.cg-full__close { border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff;
                  font-family:inherit; font-size:12px; padding:7px 16px; border-radius:999px; cursor:pointer; }
.cg-full__hint { margin:0 14px 10px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.1);
                 color:#dfe7e0; font-size:11px; line-height:1.6; }
.cg-full__scroller { flex:1; overflow-x:auto; overflow-y:hidden; display:flex; align-items:stretch; background:#fff; }
.cg-full__scroller img { display:block; height:100%; width:auto; max-width:none; }
.cg-full__rot { display:flex; align-items:stretch; }
.cg-full__bar { display:flex; align-items:center; gap:16px; padding:10px 20px 16px; flex-wrap:wrap; }
.cg-full .cg__jump { background:#222a25; color:#fff; border:0; }
.cg-full .cg__jump:hover { background:#2e3831; }
.cg-full .cg__mini { border:0; }
.cg-full .cg__window { border-color:#78d17f; background:rgba(120,209,127,.18); }
.cg-full__readout { color:#fff; font-size:12px; font-weight:700; }
.cg-full__rotate { border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff;
                   font-family:inherit; font-size:12px; padding:7px 12px; border-radius:999px;
                   cursor:pointer; white-space:nowrap; }
.cg-full__rotate:hover { background:rgba(255,255,255,.12); }
@media (min-width:900px) { .cg-full__rotate { display:none; } }  /* PCは横読み固定 */

/* ───────── 縦モード: 帯を90度回して上→下に読む（公式PDFと同じ体裁） ───────── */
.cg-full.is-vertical .cg-full__scroller {
  overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:block; align-items:stretch;
}
/* transformは占有領域を変えないので、回転後の実寸をラッパーで確保する（寸法はJSが設定） */
.cg-full.is-vertical .cg-full__rot { position:relative; width:100%; }
.cg-full.is-vertical .cg-full__rot img {
  position:absolute; top:0; left:0;
  transform-origin:0 0;
  transform:rotate(90deg) translateY(-100%);
  max-width:none;
}
/* 縦モードでは指で直接スクロールできるためミニマップは省く */
.cg-full.is-vertical .cg__mini { display:none; }
.cg-full.is-vertical .cg-full__bar { padding:8px 14px 14px; }
body.cg-noscroll { overflow:hidden; }

/* ───────── スマホ（〜899px）: ページ内は要約カード、本体は全画面 ───────── */
@media (max-width:899px) {
  .cg { border-radius:18px; }
  .cg__head { flex-direction:column; gap:14px; padding:16px 16px 0; }
  .cg__legend { width:auto; }
  .cg__title { font-size:18px; }
  .cg__lead { font-size:12.5px; line-height:1.85; }
  .cg__stage, .cg__bar { display:none; }              /* PC用インライン帯は出さない */
  .cg__steps { display:flex; flex-direction:column; gap:9px; margin:14px 0 0; padding:12px 16px; background:var(--cg-tint); }
  .cg__step { display:flex; gap:8px; align-items:flex-start; font-size:11.5px; line-height:1.6; color:#3c453f; }
  .cg__stepNo { flex:0 0 18px; height:18px; border-radius:9px; background:var(--cg-green); color:#fff;
                font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .cg__preview { display:block; position:relative; margin:12px 16px 0; border:1px solid #e3e7df;
                 border-radius:12px; overflow:hidden; background:#eef6fb; }
  .cg__preview .cg__previewScroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cg__preview img { display:block; height:112px; width:auto; max-width:none; }
  .cg__previewFade { position:absolute; right:0; top:0; bottom:0; width:56px; pointer-events:none;
                     background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95)); }
  .cg__previewHint { position:absolute; right:8px; top:50%; transform:translateY(-50%);
                     font-size:10.5px; font-weight:700; color:var(--cg-green); }
  .cg__mobileCta { display:flex; align-items:center; justify-content:center;
                   width:calc(100% - 32px); margin:12px 16px 0; height:46px; border:0;
                   border-radius:12px; background:var(--cg-green); color:#fff; font-family:inherit;
                   font-size:14px; font-weight:700; cursor:pointer;
                   text-decoration:none; box-sizing:border-box; }
  .cg__foot { flex-direction:column; align-items:flex-start; gap:8px; padding:10px 16px 16px; }
  .cg__cta { display:none; }
  .cg-full__bar .cg__jump { flex:1; padding:7px 4px; font-size:10.5px; }
  .cg-full__bar { gap:9px; }

  /* 縦持ちのまま中身だけを横倒しにする。OSの回転ロックに影響されない。
     幅と高さを入れ替えてから中心で回すので、回転後に画面をちょうど埋める。 */
  .cg-full.is-rotated {
    inset: auto;                 /* 既存の inset:0 を打ち消してから中央寄せ */
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 100vw;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
  }
  /* 回転中は画面の短辺が高さになるので、上下の帯を詰めて帯画像に高さを回す */
  .cg-full.is-rotated .cg-full__head { height: 44px; }
  .cg-full.is-rotated .cg-full__hint { display: none; }
  .cg-full.is-rotated .cg-full__bar { padding: 6px 14px 10px; }
}
@media (min-width:900px) { .cg-full__hint { display:none; } }

/* ═══════════════════════════════════════════════════════════
   コースガイド専用ページ（course_guide.php）
   サイトのヘッダ・フッタを出さず、画面をまるごと帯に使う。
   ═══════════════════════════════════════════════════════════ */
body.cg-page { margin:0; padding:0; background:#0d1117; overflow:hidden; }

.cg-page__viewer { position:fixed; inset:0; background:#0d1117; }

/* 既定＝縦モード。帯を90°回して上→下に読む（.cg-full.is-vertical と同じ考え方） */
.cg-page__scroller {
  position:absolute; inset:0;
  overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
/* transformは占有領域を変えないので、回転後の実寸をラッパーで確保する（寸法はJSが設定） */
.cg-page__rot { position:relative; width:100%; }
.cg-page__rot img {
  position:absolute; top:0; left:0;
  transform-origin:0 0;
  transform:rotate(90deg) translateY(-100%);
  max-width:none;
}

/* 横モード（⟳ で切り替え）。左右スクロールで帯を画面高いっぱいに */
.cg-page__viewer.is-horizontal .cg-page__scroller {
  overflow-x:auto; overflow-y:hidden;
  display:flex; align-items:stretch;
}
.cg-page__viewer.is-horizontal .cg-page__rot {
  position:static; width:auto; height:100%; display:flex; align-items:stretch;
}
.cg-page__viewer.is-horizontal .cg-page__rot img {
  position:static; transform:none;
  display:block; height:100%; width:auto; max-width:none;
}

/* 操作は最小限。帯の上に浮かせるだけで高さを取らない */
.cg-page__back, .cg-page__rotate {
  position:fixed; z-index:5;
  border:1px solid rgba(255,255,255,.25); background:rgba(13,17,23,.72);
  color:#fff; font-family:inherit; font-size:12px; line-height:1;
  padding:9px 13px; border-radius:999px; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity .2s;
}
.cg-page__back  { top:calc(env(safe-area-inset-top, 0px) + 10px); left:10px; }
.cg-page__rotate{ top:calc(env(safe-area-inset-top, 0px) + 10px); right:10px; }
.cg-page__back:hover, .cg-page__rotate:hover { background:rgba(13,17,23,.9); }

/* スクロール中は薄くして帯の邪魔をしない（指を止めれば戻る） */
.cg-page__viewer.is-scrolling .cg-page__back,
.cg-page__viewer.is-scrolling .cg-page__rotate { opacity:.18; }