/* ============================================================
   CALM FIT 江坂 — 演出レイヤー(本番) + フルスクリーンメニュー修正
   ============================================================ */

/* ============================================================
   §0 フルスクリーンメニューの修正(常時)
   原因: .mnav が fixed(inset:0)の flex 縦並びで justify-content:center。
         項目は body の line-height:2 を継承して 1 行 88px(44px×2)+padding になり、
         11項目+CTA で約 1,300px。viewport より高い内容を中央寄せしたため上下が均等にはみ出し、
         先頭の Price が画面上端に突き抜けていた(overflow の逃げ場もなかった)。
   修正: ① 中央寄せを auto マージンに変える(収まるときは中央、あふれたら先頭から)
         ② .mnav 自体を縦スクロール可能にし、スクロール連鎖を止める
         ③ ヘッダー/バーガー分と safe-area を padding で確保
         ④ 意図せず継承していた line-height:2 を項目だけ 1.3 に(文字サイズ・余白は不変)
   ============================================================ */
.mnav{
  justify-content:flex-start;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-top:calc(env(safe-area-inset-top,0px) + 92px);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 36px);
  scrollbar-width:none;
}
.mnav::-webkit-scrollbar{display:none}
.mnav a{line-height:1.3;flex:none}
.mnav a:first-child{margin-top:auto}
.mnav .mnav__cta{margin-bottom:auto}
@media(max-height:560px){.mnav a{padding:5px 0}.mnav__cta{margin-top:18px}}

/* ============================================================
   EFFECT 01 — HERO DEPTH
   ============================================================ */
.fx-hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;
  /* 写真(.hero__bg img)と同じズーム(1.04→1・7秒)。最初の1枚を描くまでは透明で、描けたら写真の上に静かに重なる */
  transform:scale(1.04);animation:heroZoom 7s cubic-bezier(.22,1,.36,1) forwards;
  opacity:0;transition:opacity .8s ease;
}
.fx-hero-canvas.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.fx-hero-canvas{animation:none;transform:none}}

/* ============================================================
   EFFECT 03 — MOTION TYPOGRAPHY
   ============================================================ */
html.fx-type .split:not(.loader__word) .sp-w{overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em;vertical-align:top}
html.fx-type .split:not(.loader__word) .sp-ch{transition:none!important;transform:none;opacity:1;will-change:transform,opacity}
html.fx-type .split.fx-wait:not(.loader__word) .sp-ch{opacity:0}
/* 小見出し(h3 等)は現行のまま = 静的 */

/* ============================================================
   EFFECT 05 — SPATIAL TEASER(写真のまま。触れたときだけ空間が立ち上がる)
   ============================================================ */
.guideband__img{position:relative}
.fx-sp{position:absolute;inset:0;border-radius:18px;overflow:hidden;cursor:pointer}
.fx-sp canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s ease}
.fx-sp.is-3d canvas{opacity:1}
.fx-sp__badge{
  position:absolute;left:14px;bottom:12px;display:inline-flex;align-items:center;gap:9px;pointer-events:none;
  font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.3em;color:#3A2E24;
  background:rgba(253,252,251,.86);padding:7px 12px;border:1px solid rgba(196,149,106,.35);
  transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1);
}
.fx-sp__badge i{width:6px;height:6px;border-radius:50%;background:#A87B4F}
.fx-sp__badge small{font-family:'Zen Kaku Gothic New',sans-serif;font-size:10px;letter-spacing:.12em;color:#6B5D52}
.fx-sp__go{
  position:absolute;right:14px;bottom:12px;pointer-events:none;
  font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.3em;color:#3A2E24;
  background:rgba(253,252,251,.86);padding:7px 12px;border:1px solid rgba(196,149,106,.35);
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1),background .3s,color .3s;
}
.fx-sp.is-3d .fx-sp__go{opacity:1;transform:none}
.fx-sp.is-3d:hover .fx-sp__go{background:#3A2E24;color:#fff}
.fx-sp__go--btn{pointer-events:auto;font:inherit;font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.26em;min-height:42px;padding:0 16px;border-radius:999px;background:#3A2E24;color:#fff;border:0;cursor:pointer;box-shadow:0 8px 20px rgba(58,46,36,.25)}
.fx-sp.is-3d .fx-sp__go--btn{opacity:1;transform:none}
@media(max-width:760px){.fx-sp.is-3d .fx-sp__badge{opacity:0;visibility:hidden}.fx-sp__go{right:10px;bottom:10px}.fx-sp__badge{max-width:calc(100% - 20px)}}
@media(max-width:760px) and (max-height:500px){.fx-sp__go--btn{min-height:38px;font-size:11px}}
.fx-sp.is-leaving canvas{transition:transform .7s cubic-bezier(.77,0,.18,1),opacity .6s;transform:scale(1.05)}
.fx-sp-veil{position:fixed;inset:0;z-index:9500;background:#F6F1EA;opacity:0;pointer-events:none;transition:opacity .55s ease}
.fx-sp-veil.is-on{opacity:1}

/* ============================================================
   - 画像は再現しない。<picture> で PC / SP の完成画像(implementation pack の WebP)を出し分ける
   - リボンの「現在 残り●名」欄は画像側で空欄。空欄位置に HTML テキストを重ねるだけ(Cover 不要)
   - 座標は各画像の実測値を % 指定(画像が拡大縮小しても追従)
   ============================================================ */
.camp-image{--ci-min:"Yu Mincho","YuMincho","游明朝","游明朝体","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif}


.ci{margin:0;container-type:inline-size}
.ci__frame{position:relative;border-radius:6px;overflow:hidden;background:#F3ECE2;box-shadow:0 22px 54px -30px rgba(58,46,36,.30)}
.ci__img{display:block;width:100%;height:auto;aspect-ratio:1448/1086}

/* ---- 残り人数スロット(透明。位置合わせ専用) ----
   PC 画像 1448×1086: 帯 y 193-252 / 右仕切り線 x 906 / 折り返し x≥1181。
   スロット x 910-1132(中心 1021 = 元デザインの「現在 残り56名」の中心)、y 194-251 */
.ci__slot{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;
  left:62.85%;top:17.86%;width:15.33%;height:5.25%}

/* ---- 動的テキスト: 画像内リボン文字(游明朝体系・Ivory)に合わせる。PC 基準 18.5px/1448px ---- */
.ci__remain{font-family:var(--ci-min);font-weight:400;font-size:clamp(8px,1.25vw,18.5px);line-height:1;letter-spacing:.28em;
  color:#FFF8EA;white-space:nowrap;text-align:center;font-feature-settings:"palt";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  transform:translate(.2em,.07em)}
.ci__remain b{font-weight:400;letter-spacing:.10em;margin:0 .02em 0 .06em}
.ci__remain .ci__r1{margin-right:.5em}
.ci__remain.is-closed{white-space:normal;line-height:1.28;letter-spacing:.16em;font-size:clamp(7px,1.02vw,14.8px)}
@supports (font-size:1cqw){
  .ci__remain{font-size:1.278cqw}
  .ci__remain.is-closed{font-size:1.02cqw}
}

/* ---- Mobile(サイト共通ブレークポイント 760px): 縦長 SP 画像 941×1672 ----
   帯 y 164-262 / 右仕切り線 x 658 / 折り返し x≥827。スロット x 662-824(中心 743)。
   左セグメント "OPENING / OFFER" が 2 行(行送り 30px)なので、右も「現在」「残り●名」の 2 行にする */
@media (max-width:760px){
  .ci__img{aspect-ratio:941/1672}
  .ci__slot{left:70.35%;top:9.81%;width:17.22%;height:5.86%}
  .ci__remain{font-size:clamp(7px,5.6vw,22px);line-height:1.36;letter-spacing:.18em;white-space:normal;transform:translateY(.04em)}
  .ci__remain .ci__r1{display:block;margin-right:0}
  .ci__remain b{letter-spacing:.06em;margin:0 .02em 0 .04em}
  .ci__remain.is-closed{font-size:clamp(6px,4.9vw,19px);letter-spacing:.10em;line-height:1.36}
  @supports (font-size:1cqw){
    .ci__remain{font-size:2.338cqw}
    .ci__remain.is-closed{font-size:2.02cqw}
  }
}