@charset "UTF-8";

/* =========================================================================
   Atami LP — First View
   Figma: PCデザイン / node 18:32962

   横幅の思想
     色や写真が乗っている 1280 幅の面が基準。PC は最大 1280px で止め、それ以上は中央寄せ。
     高さ・位置・字サイズはすべて 1280 に対する比率（--u = min(100vw, 1280px) / 1280）。
     Figma の 1352 パネルはクロップからはみ出す角丸用で、基準幅には使わない。

   原点
     1280 クロップの左上 = Figma (429.98, 401.39)。
     旧実装の原点 (109.98, 365.19) から見ると (+320, +36.20)。
   ========================================================================= */

:root {
  /* --vw は JS が clientWidth(スクロールバー除外) を入れる。PC は 1280 で頭打ち。
     100vw はスクロールバーを含むため、fixed ヘッダーと中身で数px ずれる。 */
  --vw: min(100vw, 1280px);
  --uw: 1280;
  --u: calc(var(--vw) / var(--uw));
  --hdr-h: 104;

  --c-brand:  #005e80;
  --c-body:   #3e3a39;
  --c-gold:   #e9c14f;
  --c-perk:   #528fd0;
  --c-accent: #da7526;
  --c-night:  #7e4b8f;
  --c-paper:  #f9f7f0;
  --c-cream:  #fbf5e9;
  --c-cyan:   #56c1cd;
  --c-navy:   #112541;

  /* 本文・注釈。木漏れ日ゴシックP（Figma: komorebi-gothic）。 */
  --font-jp: "komorebi-gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             "Yu Gothic", "Noto Sans JP", sans-serif;
  /* リードの大見出しのみ。Noto Serif JP SemiBold。 */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* komadori+ は後でアウトライン SVG。当面は従来の見出しスタック。 */
  --font-heading: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
                  sans-serif;
  /* コピーライト／小塚ゴシックの代替。 */
  --font-yu: "Yu Gothic Medium", "YuGothic", "Yu Gothic", sans-serif;
  /* 英字スクリプト。Stigmature（Khurasan、商用無料）。 */
  --font-script: "Stigmature", "Segoe Script", "Brush Script MT", cursive;
}

@font-face {
  font-family: "komorebi-gothic";
  src: url("../fonts/komorebi-gothic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Stigmature";
  src: url("../fonts/Stigmature.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: var(--c-body);
  font-family: var(--font-jp);
  font-weight: 400;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  overflow-x: clip;
}

img { border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; font-weight: inherit; font-size: inherit; }
ul, ol { padding: 0; list-style: none; }

/* -------------------------------------------------------------------------
   ユーティリティ。--x/--y/--w/--h/--fs はクロップ内の設計px（1280幅基準）。
   ------------------------------------------------------------------------- */
.p, .a {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y) * var(--u));
}
.a {
  width:  calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

.rot { display: flex; align-items: center; justify-content: center; }
.rot > * {
  flex: none;
  position: relative;
  width:  calc(var(--iw) * var(--u));
  height: calc(var(--ih) * var(--u));
  transform: rotate(var(--r, 0deg)) skewX(var(--k, 0deg));
}
.rot > * > img { display: block; width: 100%; height: 100%; }

.bleed {
  position: absolute;
  top: var(--bt, 0); right: var(--br, 0); bottom: var(--bb, 0); left: var(--bl, 0);
}
.bleed > img { display: block; width: 100%; height: 100%; }

.t  { font-size: calc(var(--fs) * var(--u)); line-height: calc(var(--lh) * var(--u)); }
.fs { font-size: calc(var(--fs) * var(--u)); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   ヘッダー (追従)
   ========================================================================= */
.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  height: calc(var(--hdr-h) * var(--u));
  z-index: 50;
  pointer-events: none;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
}

/* スクロール後。予約バナーの上下に 10px ずつ余白。 */
.hdr__bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 94, 128, .92), rgba(0, 94, 128, .78));
  opacity: 0;
  transition: opacity .3s ease;
}
.hdr.is-scrolled .hdr__bar { opacity: 1; }

.hdr__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.hdr__logo {
  --x: 14.30; --y: 20.28; --w: 274.52; --h: 56.16;
  pointer-events: auto;
  transition: opacity .3s ease;
}
.hdr__logo img { display: block; width: 100%; height: 100%; }
.hdr.is-scrolled .hdr__logo {
  opacity: 0;
  pointer-events: none;
}

/* webp 上部の透明余白を相殺し、金の板を帯の中で上下 10px 空ける。 */
.cta {
  --x: 791.19; --y: -29.55; --w: 499.11; --h: 163.72;
  pointer-events: auto;
  background: url(../assets/header/cta.webp) center / 100% 100% no-repeat;
  color: var(--c-brand);
}
.cta:focus-visible {
  outline: calc(3 * var(--u)) solid var(--c-brand);
  outline-offset: calc(-14 * var(--u));
  border-radius: calc(8 * var(--u));
}

.cta__icon  { --x: 74.73;  --y: 65.05; --w: 34.30;  --h: 31.09; }
.cta__sub   { --x: 115.52; --y: 72.70; --w: 137.60; --h: 21.91; }
.cta__main  { --x: 263.12; --y: 63.34; --w: 120.17; --h: 34.76; }
.cta__arrow { --x: 400.06; --y: 63.78; --w: 35.66;  --h: 36.17; }

.cta__icon img,
.cta__arrow img,
.cta__sub img,
.cta__main img { display: block; width: 100%; height: 100%; }

/* SP で CSS 八角にする枠。PC は webp のまま。 */
.cta__frame,
.cta__dash { display: none; }

/* =========================================================================
   FV
   ========================================================================= */
.fv { width: 100%; }
.fv__stage {
  position: relative;
  width: 100%;
  height: calc(671.80 * var(--u)); /* 1280列の高さ。写真600 + 下のクリーム */
  overflow: hidden;
}

/* 1352 の角丸パネル。左右約36pxはクロップ外なので overflow で切る */
.fv__panel {
  --x: -36.06; --y: -36.20; --w: 1352.16; --h: 695.20;
  background: url(../assets/bg/bg-panel.webp) top center / 100% 100% no-repeat;
}
.fv__col {
  --x: 0; --y: 0; --w: 1280; --h: 671.80;
  background: var(--c-cream);
}

.hero { --x: 0; --y: 0; --w: 1280; --h: 600; overflow: hidden; }
.hero > img, .hero picture, .hero picture img { display: block; width: 100%; height: 100%; }
.hero picture img { object-fit: cover; }

.copy, .copy__decor, .card { position: absolute; inset: 0; }

.copy__plate {
  --x: 95.10; --y: 96.64; --w: 635.28; --h: 372.24;
  display: block;
}

/* komadori+ アウトライン。座標は PCol4 / SPol のパス bbox。 */
.copy__glow { --x: 103.26; --y: 102.40; --w: 588; --h: 365.76; display: block; }
.copy__glow img { display: block; width: 100%; height: 100%; }

/* 範囲は少し狭く、端は矩形で切らずにぼかす。 */
.copy__plate,
.copy__glow {
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 42% 48%, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 42% 48%, #000 50%, transparent 100%);
}

.copy__h1 { color: var(--c-brand); }
.copy__l1 { --x: 160.36; --y: 159.29; --w: 366.33; --h: 62.01; display: block; }
.copy__l2 { --x: 161.43; --y: 243.95; --w: 471.97; --h: 69.19; display: block; }
.copy__l1 img,
.copy__l2 img { display: block; width: 100%; height: 100%; }

.copy__lead { --x: 163.80; --y: 341.94; --w: 298.66; --h: 68.91; display: block; }
.copy__lead picture,
.copy__lead img { display: block; width: 100%; height: 100%; }

.copy__decor { color: #fff; font-family: var(--font-script); }
.deco { --r: -19.29deg; --k: -19.37deg; }
.deco > * > .t { white-space: nowrap; }

.deco--summer { --x: 309.41; --y: 410.55; --w: 110.26; --h: 76.15;  --iw: 116.92; --ih: 37.08; }
.deco--isnt   { --x: 358.52; --y: 383.89; --w: 199.93; --h: 107.56; --iw: 211.98; --ih: 36.95; }
.deco--atami  { --x: 483.45; --y: 399.12; --w: 102.92; --h: 85.67;  --iw: 108.98; --ih: 49.61; }

.deco--summer > * > .t { --fs: 30; --lh: 37.08; }
.deco--isnt   > * > .t { --fs: 30; --lh: 36.95; }
.deco--atami  > * > .t { --fs: 40; --lh: 49.61; }

.deco--summer .deco__cap { --fs: 30.832; }
.deco--isnt   .deco__cap { --fs: 30.832; }
.deco--atami  .deco__cap { --fs: 41.109; }

.card__frame {
  --x: 896.37; --y: 253.64; --w: 337.86; --h: 377.60; --r: 5deg;
  background: var(--c-paper);
  border-radius: calc(16.625 * var(--u));
  transform: rotate(var(--r));
  filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(0, 0, 0, .25));
}
.card__frame::before {
  content: "";
  position: absolute;
  inset: calc(8.565 * var(--u));
  border: calc(2 * var(--u)) solid var(--c-brand);
  border-radius: calc(8.06 * var(--u));
}

.card__photo {
  --x: 10.57; --y: 10.57; --w: 316.73; --h: 196;
  overflow: hidden;
  border-radius: calc(6.06 * var(--u)) calc(6.06 * var(--u)) 0 0;
}
.card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.soon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #9a9a9a;
  color: #fff;
  font-family: var(--font-yu);
  font-weight: 500;
  letter-spacing: .06em;
  font-size: calc(22 * var(--u));
  line-height: 1.2;
}

.card__camera { --x: 922.03; --y: 473.37; --w: 37.70; --h: 29.51; }

.card__h { --x: 982.42; --y: 479.61; --w: 228.4; --h: 43.2; }
.card__h picture,
.card__h img { display: block; width: 100%; height: 100%; }

.card__sub { --x: 911.97; --y: 513.44; --w: 232.25; --h: 69.13; --iw: 228.82; --ih: 49.37; --r: 5deg;
             color: var(--c-body); }
.card__sub > * > .t { --fs: 19.2; --lh: 23.05; white-space: nowrap; }
.card__sub > * > .t + .t { --lh: 23.39; margin-top: calc(2.93 * var(--u)); }

.card__check { --x: 1098.98; --y: 591.62; --w: 74.15; --h: 20.31; }
.card__check picture,
.card__check img { display: block; width: 100%; height: 100%; }

.card__stamp      { --x: 1079.77; --y: 512.39; --w: 171.80; --h: 112.32; }
.card__playshadow { --x: 1054.09; --y: 348.67; --w: 49.93;  --h: 50.45;
                    --bt: -3.97%; --br: -3.97%; --bb: -3.97%; --bl: -3.97%; }
.card__play       { --x: 1054.09; --y: 348.67; --w: 49.93;  --h: 50.45; }
.card__arrow      { --x: 1180.86; --y: 599.97; --w: 7.13;   --h: 12.37;
                    --bt: -8.27%; --br: -30.46%; --bb: -9.7%; --bl: -12.51%; }

.card__camera img, .card__stamp img, .card__play img, .card__drama img { display: block; width: 100%; height: 100%; }

.card__drama {
  --x: 831.62; --y: 170.33; --w: 227.91; --h: 109.87;
  z-index: 2;
}
.card__drama picture,
.card__drama img { display: block; width: 100%; height: 100%; }

/* 初回FV。位置は動かさず薄く出す。カードは右上から左下へ滑らせて傾きを着地させる。 */
.js .fv:not(.is-in) .fv__stage > :not(.card) { opacity: 0; }
.js .fv.is-in .fv__stage > :not(.card) {
  opacity: 1;
  transition: opacity 1.1s ease-out;
}
.js .fv .card {
  transform-origin: 83% 66%;
  transition:
    opacity 1.2s cubic-bezier(.22, 1, .36, 1) .2s,
    transform 1.2s cubic-bezier(.22, 1, .36, 1) .2s;
}
.js .fv:not(.is-in) .card {
  opacity: 0;
  transform: translate(calc(60 * var(--u)), calc(-72 * var(--u))) rotate(6deg);
}
.js .fv.is-in .card {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

/* =========================================================================
   帯 — リード〜セクション3
   クリームと椰子はセクションより大きい帯に一枚。原点はリードと同じ。
   横は 1280 列で切る。
   ========================================================================= */
.band { position: relative; width: 100%; }
.band__col {
  --x: 0; --y: 0; --w: 1280; --h: 1776.01;
  background: var(--c-cream);
  pointer-events: none;
}
.band__palms {
  --x: 0; --y: -71.80; --w: 1280; --h: 1696.77;
  pointer-events: none;
}
.band__palms picture,
.band__palms img { display: block; width: 100%; height: 100%; }

/* =========================================================================
   セクション2 — 私たちの夏は
   原点: 1280列の FV 下端 (Figma 429.98, 1073.19)
   ========================================================================= */
.lead { position: relative; width: 100%; z-index: 1; }
.lead__stage {
  position: relative;
  width: 100%;
  height: calc(517.20 * var(--u)); /* あたみ旅きっぷ下端まで。次セクションとクリームが続く */
  overflow: visible;
}

.lead__banner { --x: 142.44; --y: 9.71; --w: 345.85; --h: 20.22; z-index: 1; }
.lead__banner picture,
.lead__banner img { display: block; width: 100%; height: 100%; }

.lead__mark {
  --x: 132.40; --y: 23.99; --w: 367.58; --h: 17.31;
  background: url(../assets/lead/marker.svg) center / 100% 100% no-repeat;
}

.lead__h { --x: 137.65; --y: 51.45; color: var(--c-brand); font-family: var(--font-serif); font-weight: 600; }
.lead__h > .t { display: block; --fs: 48; --lh: 68; white-space: nowrap; }
.lead__h > .t:first-child { margin-left: calc(2.35 * var(--u)); }

.lead__sub {
  --x: 137.31; --y: 202.47; --fs: 34; --lh: 49;
  color: var(--c-brand);
  font-family: var(--font-serif);
  font-weight: 600;
  white-space: nowrap;
}

.lead__body { --x: 140.00; --y: 278.97; color: var(--c-body); }
.lead__body > .t { display: block; --fs: 16; --lh: 38; white-space: nowrap; }
.lead__body > .lead__a,
.lead__body > .lead__b { display: none; }

.lead__stamp { --x: 466.53; --y: 243.17; --w: 250.02; --h: 185.34; }
.lead__stamp img { display: block; width: 100%; height: 100%; }

.lead__copy { position: absolute; inset: 0; }
.lead__visual { position: absolute; inset: 0; pointer-events: none; }

.lead__photo {
  --x: 651.78; --y: 0; --w: 664.56; --h: 416.40;
  overflow: hidden;
  border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(62, 58, 57, .18);
  pointer-events: auto;
}
.lead__photo::after {
  content: "";
  position: absolute;
  inset: calc(8 * var(--u));
  border: calc(2 * var(--u)) solid #fff;
  border-radius: calc(12 * var(--u));
  pointer-events: none;
}
.lead__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lead__tape {
  --x: 615.10; --y: -29.08; --w: 149.21; --h: 123.09;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: multiply;
}
.lead__tape-fill,
.lead__tape-pat {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.lead__tape-pat { opacity: .35; }

.lead__ticket {
  --x: 1049.22; --y: 135.12; --w: 230.40; --h: 382.08;
  filter: drop-shadow(0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(17, 37, 65, .1));
}
.lead__ticket picture,
.lead__ticket img { display: block; width: 100%; height: 100%; }

/* 左テキストは下から小さく浮く。右の写真塊は右上から傾いて着地。 */
.js .lead .lead__copy,
.js .exp__card .exp__copy {
  opacity: 0;
  transform: translateY(calc(28 * var(--u)));
  transition:
    opacity .7s ease-out,
    transform .7s ease-out;
}
.js .lead.is-in .lead__copy,
.js .exp__card.is-in .exp__copy {
  opacity: 1;
  transform: none;
}
.js .lead .lead__visual {
  transform-origin: 77% 40%;
  opacity: 0;
  transform: translate(calc(43 * var(--u)), calc(-58 * var(--u))) rotate(5deg);
  transition:
    opacity 1.05s cubic-bezier(.22, 1, .36, 1) .16s,
    transform 1.05s cubic-bezier(.22, 1, .36, 1) .16s;
}
.js .lead.is-in .lead__visual {
  opacity: 1;
  transform: none;
}

/* リード下CTA〜フッター上CTA。下から小さめにフェード。体験カードは対象外。 */
.js .rise {
  opacity: 0;
  transform: translateY(calc(16 * var(--u)));
  transition:
    opacity .55s ease-out,
    transform .55s ease-out;
}
.js .rise.is-in {
  opacity: 1;
  transform: none;
}
.js .rise.is-in:is(.enjoy__get, .enjoy__more, .coupon__get, .access__cta, .sns__cta) {
  transition: transform .2s ease, filter .2s ease, opacity .55s ease-out;
}

.cta,
.enjoy__get,
.enjoy__more,
.coupon__get,
.access__cta,
.sns__cta {
  transition: transform .2s ease, filter .2s ease;
}
.cta:hover,
.enjoy__get:hover,
.enjoy__more:hover,
.coupon__get:hover,
.access__cta:hover,
.sns__cta:hover,
.js .enjoy__get.is-in:hover,
.js .enjoy__more.is-in:hover,
.js .coupon__get.is-in:hover,
.js .access__cta.is-in:hover,
.js .sns__cta.is-in:hover {
  transform: translateY(calc(-4 * var(--u)));
  filter: saturate(1.08);
}
.cta:active,
.enjoy__get:active,
.enjoy__more:active,
.coupon__get:active,
.access__cta:active,
.sns__cta:active {
  transform: translateY(0);
}
.js .rise:not(.is-in):is(.enjoy__get, .enjoy__more, .coupon__get, .access__cta, .sns__cta):hover {
  transform: translateY(calc(16 * var(--u)));
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .hdr__bar,
  .hdr__logo,
  .cta,
  .enjoy__get,
  .enjoy__more,
  .coupon__get,
  .access__cta,
  .sns__cta { transition: none; }
  .cta:hover,
  .enjoy__get:hover,
  .enjoy__more:hover,
  .coupon__get:hover,
  .access__cta:hover,
  .sns__cta:hover,
  .js .enjoy__get.is-in:hover,
  .js .enjoy__more.is-in:hover,
  .js .coupon__get.is-in:hover,
  .js .access__cta.is-in:hover,
  .js .sns__cta.is-in:hover { transform: none; filter: none; }
  .js .fv .fv__stage > :not(.card),
  .js .fv .card,
  .js .lead .lead__copy,
  .js .lead .lead__visual,
  .js .exp__card .exp__copy,
  .js .exp__card .exp__visual,
  .js .rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   セクション3 — クーポンCTA + 楽しみ方 + 映像
   原点: 1280列のリード下端 (Figma 429.98, 1590.39)
   ========================================================================= */
.enjoy { position: relative; width: 100%; z-index: 1; }
.enjoy__stage {
  position: relative;
  width: 100%;
  height: calc(1258.81 * var(--u));
  overflow: visible;
}

/* 黄CTAは板と再生をCSS、中の文字は koma SVG。上端はリードと 72px 重なる。 */
/* 映像〜クーポン4カードの水色地。上端はカンプの波。 */
.enjoy__blue {
  --x: -36.06; --y: 938.16; --w: 1352.16; --h: 320.65;
  pointer-events: none;
}
.enjoy__blue img { display: block; width: 100%; height: 100%; }

.enjoy__get {
  --x: 279.82; --y: -29.76; --w: 720.24; --h: 160.08;
  --pad: 0;
  --cut: 25;
  --cut-u: calc(var(--cut) * var(--u));
  --octa: polygon(
    var(--cut-u) 0, calc(100% - var(--cut-u)) 0,
    100% var(--cut-u), 100% calc(100% - var(--cut-u)),
    calc(100% - var(--cut-u)) 100%, var(--cut-u) 100%,
    0 calc(100% - var(--cut-u)), 0 var(--cut-u)
  );
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.enjoy__get::before {
  content: "";
  position: absolute;
  inset: calc(var(--pad) * var(--u));
  clip-path: var(--octa);
  pointer-events: auto;
}
.enjoy__get-frame {
  position: absolute;
  inset: calc(var(--pad) * var(--u));
  pointer-events: none;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(17, 37, 65, .16));
}
.enjoy__get-frame::before,
.enjoy__get-frame::after {
  content: "";
  position: absolute;
  clip-path: var(--octa);
}
.enjoy__get-frame::before {
  inset: 0;
  background: #fff;
}
.enjoy__get-frame::after {
  inset: calc(4 * var(--u));
  background: var(--c-gold);
}
.enjoy__get-dash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  z-index: 1;
}
.enjoy__get-dash--sp { display: none; }

.enjoy__get-sub {
  --x: 247.81; --y: 39.30; --w: 224.82; --h: 31.77;
  z-index: 3;
  pointer-events: auto;
}
.enjoy__get-main {
  --x: 120.65; --y: 74.73; --w: 475.77; --h: 46.20;
  z-index: 3;
  pointer-events: auto;
}
.enjoy__get-sub picture,
.enjoy__get-sub img,
.enjoy__get-main picture,
.enjoy__get-main img { display: block; width: 100%; height: 100%; }

.enjoy__get-play {
  --x: 642.35; --y: 59.08; --w: 42; --h: 42;
  z-index: 3;
  pointer-events: auto;
  background: var(--c-brand);
  border-radius: 50%;
}
.enjoy__get-play::after {
  content: "";
  position: absolute;
  left: 35.4%;
  top: 27.2%;
  width: 39%;
  height: 45.5%;
  background: var(--c-gold);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.enjoy__tape {
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: multiply;
}
.enjoy__tape-fill,
.enjoy__tape-pat {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.enjoy__tape--tl { --x: -30.62; --y: -33.44; --w: 132.74; --h: 140.75; }
.enjoy__tape--tl .enjoy__tape-pat { opacity: .4; }
.enjoy__tape--br { --x: 605.76; --y: 66.62; --w: 146.69; --h: 139.69; }
.enjoy__tape--br .enjoy__tape-pat { opacity: .8; }

/* 4枠の区切り。Figma は幅0の点線 (stroke #3E3A39, dash 2 2)。 */
.enjoy__rule { pointer-events: none; }
.enjoy__rule--v {
  --w: 1;
  background: repeating-linear-gradient(
    to bottom,
    var(--c-body) 0,
    var(--c-body) calc(2 * var(--u)),
    transparent calc(2 * var(--u)),
    transparent calc(4 * var(--u))
  );
}
.enjoy__rule--h {
  display: none;
  --h: 1;
  background: repeating-linear-gradient(
    to right,
    var(--c-body) 0,
    var(--c-body) calc(2 * var(--u)),
    transparent calc(2 * var(--u)),
    transparent calc(4 * var(--u))
  );
}
.enjoy__rule--1 { --x: 373.17; --y: 210.32; --h: 263.59; }
.enjoy__rule--2 { --x: 640.00; --y: 210.32; --h: 263.59; }
.enjoy__rule--3 { --x: 906.58; --y: 210.32; --h: 263.59; }
.enjoy__rule--vt,
.enjoy__rule--vb { display: none; }

.enjoy__list { position: absolute; inset: 0; pointer-events: none; }
.enjoy__item { position: absolute; inset: 0; }

.enjoy__item--onsen .enjoy__icon { --x: 154.26; --y: 174.24; --w: 171.60; --h: 171.60; }
.enjoy__item--gourmet .enjoy__icon { --x: 420.66; --y: 174.24; --w: 171.36; --h: 171.60; }
.enjoy__item--event .enjoy__icon { --x: 688.02; --y: 174.24; --w: 171.60; --h: 171.60; }
.enjoy__item--spot .enjoy__icon { --x: 954.18; --y: 174.24; --w: 171.60; --h: 171.60; }
.enjoy__icon img { display: block; width: 100%; height: 100%; }

.enjoy__h--onsen { --x: 146.41; --y: 324.10; --w: 185.45; --h: 28.43; }
.enjoy__h--gourmet { --x: 426.30; --y: 323.87; --w: 162.88; --h: 28.66; }
.enjoy__h--event { --x: 699.19; --y: 324.19; --w: 151.77; --h: 28.53; }
.enjoy__h--spot { --x: 953.85; --y: 324.71; --w: 168.39; --h: 27.68; }
.enjoy__h picture,
.enjoy__h img { display: block; width: 100%; height: 100%; }

.enjoy__item--onsen .enjoy__b { --x: 140.00; --y: 371.75; }
.enjoy__item--gourmet .enjoy__b { --x: 406.88; --y: 373.68; }
.enjoy__item--event .enjoy__b { --x: 673.65; --y: 371.74; }
.enjoy__item--spot .enjoy__b { --x: 940.00; --y: 371.75; }
.enjoy__b { color: var(--c-body); }
.enjoy__b > .t { display: block; --fs: 16; --lh: 26; white-space: nowrap; }
.enjoy__b-sp { display: none !important; }

/* シアンCTAは板と再生をCSS、中の文字とカメラは koma SVG。テープは後回し。 */
.enjoy__more {
  --x: 379.86; --y: 510.00; --w: 520.32; --h: 80.40;
  --pad: 0;
  --cut: 12;
  --cut-u: calc(var(--cut) * var(--u));
  --octa: polygon(
    var(--cut-u) 0, calc(100% - var(--cut-u)) 0,
    100% var(--cut-u), 100% calc(100% - var(--cut-u)),
    calc(100% - var(--cut-u)) 100%, var(--cut-u) 100%,
    0 calc(100% - var(--cut-u)), 0 var(--cut-u)
  );
  z-index: 2;
  pointer-events: none;
}
.enjoy__more::before {
  content: "";
  position: absolute;
  inset: calc(var(--pad) * var(--u));
  clip-path: var(--octa);
  pointer-events: auto;
}
.enjoy__more-frame {
  position: absolute;
  inset: calc(var(--pad) * var(--u));
  pointer-events: none;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(17, 37, 65, .16));
}
.enjoy__more-frame::before,
.enjoy__more-frame::after {
  content: "";
  position: absolute;
  clip-path: var(--octa);
}
.enjoy__more-frame::before {
  inset: 0;
  background: #fff;
}
.enjoy__more-frame::after {
  inset: calc(4 * var(--u));
  background: #32b7ca;
}
.enjoy__more-dash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  z-index: 1;
}
.enjoy__more-dash--sp { display: none; }

.enjoy__more-cam {
  --x: 90.81; --y: 23.03; --w: 38.11; --h: 29.96;
  z-index: 3;
  pointer-events: auto;
}
.enjoy__more-t {
  --x: 143.68; --y: 22.57; --w: 278.37; --h: 32.06;
  z-index: 3;
  pointer-events: auto;
}
.enjoy__more-cam img,
.enjoy__more-t picture,
.enjoy__more-t img { display: block; width: 100%; height: 100%; }

.enjoy__more-play {
  --x: 458.78; --y: 22.19; --w: 36; --h: 36;
  z-index: 3;
  pointer-events: auto;
  background: #fff;
  border-radius: 50%;
}
.enjoy__more-play::after {
  content: "";
  position: absolute;
  left: 35.4%;
  top: 27.2%;
  width: 39%;
  height: 45.5%;
  background: #32b7ca;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.enjoy__shout { --x: 136.38; --y: 678.94; --w: 227.91; --h: 109.88; z-index: 2; }
.enjoy__shout picture,
.enjoy__shout img { display: block; width: 100%; height: 100%; }

.enjoy__film-h { --x: 449.21; --y: 670.18; --w: 377.22; --h: 44.44; z-index: 2; }
.enjoy__film-h picture,
.enjoy__film-h img { display: block; width: 100%; height: 100%; }

.enjoy__film {
  --x: 231.78; --y: 749.52; --w: 816.24; --h: 452.40;
  --ix: 8.22; --iy: 8.07; --iw: 800; --ih: 436.28; --ir: 8;
  background: #fff;
  border-radius: calc(16 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(62, 58, 57, .22);
}
.enjoy__film-photo {
  position: absolute;
  left: calc(var(--ix) * var(--u));
  top: calc(var(--iy) * var(--u));
  width: calc(var(--iw) * var(--u));
  height: calc(var(--ih) * var(--u));
  overflow: hidden;
  border-radius: calc(var(--ir) * var(--u));
}
.enjoy__film-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.enjoy__film-photo .soon { font-size: calc(36 * var(--u)); }
.enjoy__film-tape {
  --x: 953.35; --y: 1098.69; --w: 146.34; --h: 154.40;
  pointer-events: none;
  z-index: 3;
}
.enjoy__film-tape img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: .4;
}
.enjoy__film-play { --x: 590.00; --y: 945.73; --w: 100; --h: 60; z-index: 2; }
.enjoy__film-play picture,
.enjoy__film-play img { display: block; width: 100%; height: 100%; }

/* =========================================================================
   セクション4 — 宿泊クーポン
   原点: 1280列 (Figma 429.98, 2849.2)
   ========================================================================= */
.coupon { width: 100%; }
.coupon__stage {
  position: relative;
  width: 100%;
  height: calc(1495.90 * var(--u));
  overflow: hidden;
}
.coupon__col {
  --x: 0; --y: 0; --w: 1280; --h: 1495.90;
  background: var(--c-cream);
}

/* 水色は「お得に泊まって」の下余白まで。椰子は列で切る。 */
.coupon__blue {
  --x: -36.06; --y: 0; --w: 1352.16; --h: 1128.83;
  background: var(--c-cyan);
  pointer-events: none;
}
.coupon__palms {
  --x: 0; --y: 0; --w: 1280; --h: 1128.83;
  overflow: hidden;
  pointer-events: none;
}
.coupon__palm--l { --x: -277.71; --y: 277.83; --w: 536.69; --h: 734.44; }
.coupon__palm--r { --x: 1023.58; --y: 796.48; --w: 536.68; --h: 734.44; }
.coupon__palm picture,
.coupon__palm img { display: block; width: 100%; height: 100%; }

.coupon__h { position: absolute; inset: 0; pointer-events: none; }
.coupon__h-l1 { --x: 384.72; --y: 12.41; --w: 508.07; --h: 46.54; z-index: 2; }
.coupon__h-l2 { --x: 467.09; --y: 68.66; --w: 339.06; --h: 46.30; z-index: 2; }
.coupon__h picture,
.coupon__h img { display: block; width: 100%; height: 100%; }

/* 黄チケットは板を CSS、中の金額・判子は koma SVG。 */
.coupon__offer {
  --x: 97.82; --y: 104.20; --w: 1084.32; --h: 358.32;
  --pad: 42;
  --cut: 22;
  --cut-u: calc(var(--cut) * var(--u));
  --octa: polygon(
    var(--cut-u) 0, calc(100% - var(--cut-u)) 0,
    100% var(--cut-u), 100% calc(100% - var(--cut-u)),
    calc(100% - var(--cut-u)) 100%, var(--cut-u) 100%,
    0 calc(100% - var(--cut-u)), 0 var(--cut-u)
  );
}
.coupon__offer-frame {
  position: absolute;
  inset: calc(var(--pad) * var(--u));
  pointer-events: none;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(17, 37, 65, .16));
}
.coupon__offer-frame::before,
.coupon__offer-frame::after {
  content: "";
  position: absolute;
  clip-path: var(--octa);
}
.coupon__offer-frame::before {
  inset: 0;
  background: #fff;
}
.coupon__offer-frame::after {
  inset: calc(4 * var(--u));
  background: var(--c-gold);
}
.coupon__offer-dash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  z-index: 1;
}
.coupon__offer-dash--sp { display: none; }
.coupon__tape {
  pointer-events: none;
  z-index: 3;
}
.coupon__tape-fill,
.coupon__tape-pat {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.coupon__tape-fill { opacity: .62; }
.coupon__tape--tl { --x: 115.59; --y: 122.62; --w: 154.42; --h: 104.62; }
.coupon__tape--tl .coupon__tape-pat { opacity: .4; }
.coupon__tape--br { --x: 1009.13; --y: 343.10; --w: 154.42; --h: 104.62; }
.coupon__tape--br .coupon__tape-pat { opacity: .3; }
.coupon__stamp { --x: 769.40; --y: 82.76; --w: 250.01; --h: 185.34; z-index: 1; }
.coupon__stamp picture,
.coupon__stamp img,
.coupon__copy picture,
.coupon__copy img,
.coupon__rush img,
.coupon__mark img { display: block; width: 100%; height: 100%; }
.coupon__copy { --x: 366.30; --y: 101.13; --w: 547.89; --h: 152.91; z-index: 1; }
.coupon__rush { --x: 158.46; --y: 92.91; --w: 184; --h: 184; z-index: 1; }
.coupon__mark { --x: 1008.31; --y: 77.80; --w: 203.04; --h: 105.03; z-index: 2; }

/* 紺CTAは板と再生をCSS、中の文字は koma SVG。 */
.coupon__get {
  --x: 420.42; --y: 380.18; --w: 439.20; --h: 80.16;
  --pad: 0;
  --cut: 12;
  --cut-u: calc(var(--cut) * var(--u));
  --octa: polygon(
    var(--cut-u) 0, calc(100% - var(--cut-u)) 0,
    100% var(--cut-u), 100% calc(100% - var(--cut-u)),
    calc(100% - var(--cut-u)) 100%, var(--cut-u) 100%,
    0 calc(100% - var(--cut-u)), 0 var(--cut-u)
  );
  z-index: 2;
  pointer-events: none;
}
.coupon__get::before {
  content: "";
  position: absolute;
  inset: calc(var(--pad) * var(--u));
  clip-path: var(--octa);
  pointer-events: auto;
}
.coupon__get-frame {
  position: absolute;
  inset: calc(var(--pad) * var(--u));
  pointer-events: none;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(17, 37, 65, .16));
}
.coupon__get-frame::before,
.coupon__get-frame::after {
  content: "";
  position: absolute;
  clip-path: var(--octa);
}
.coupon__get-frame::before {
  inset: 0;
  background: #fff;
}
.coupon__get-frame::after {
  inset: calc(4 * var(--u));
  background: var(--c-brand);
}
.coupon__get-dash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  z-index: 1;
}
.coupon__get-dash--sp { display: none; }

.coupon__get-t {
  --x: 53.67; --y: 23.10; --w: 308.94; --h: 31.35;
  z-index: 3;
  pointer-events: auto;
}
.coupon__get-t picture,
.coupon__get-t img { display: block; width: 100%; height: 100%; }

.coupon__get-play {
  --x: 377.69; --y: 22.08; --w: 36; --h: 36;
  z-index: 3;
  pointer-events: auto;
  background: #fff;
  border-radius: 50%;
}
.coupon__get-play::after {
  content: "";
  position: absolute;
  left: 35.4%;
  top: 27.2%;
  width: 39%;
  height: 45.5%;
  background: var(--c-brand);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.coupon__info-h { --x: 407.90; --y: 537.37; --w: 460.51; --h: 46.98; z-index: 2; }
.coupon__info-h picture,
.coupon__info-h img { display: block; width: 100%; height: 100%; }

/* きっぷ4枚は枠を CSS、見出し・日付は koma。穴はシアン地が見える。 */
.coupon__fact {
  --pad: 42;
  --bw: 12;
  --notch: 13;
  --hole-x: 46;
  --hole-r: 12;
  --notch-u: calc(var(--notch) * var(--u));
  color: var(--c-brand);
  text-align: center;
}
.coupon__fact::before {
  content: "";
  position: absolute;
  left: calc((var(--pad) + var(--hole-x) - var(--hole-r)) * var(--u));
  top: 50%;
  width: calc(var(--hole-r) * 2 * var(--u));
  height: calc(var(--hole-r) * 2 * var(--u));
  margin-top: calc(var(--hole-r) * -1 * var(--u));
  border-radius: 50%;
  background: var(--c-cyan);
  z-index: 0;
}
.coupon__fact-frame {
  position: absolute;
  inset: calc(var(--pad) * var(--u));
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(17, 37, 65, .16));
  -webkit-mask-image: radial-gradient(
    circle at calc(var(--hole-x) * var(--u)) 50%,
    transparent calc(var(--hole-r) * var(--u)),
    #000 calc(var(--hole-r) * var(--u) + 0.6px)
  );
  mask-image: radial-gradient(
    circle at calc(var(--hole-x) * var(--u)) 50%,
    transparent calc(var(--hole-r) * var(--u)),
    #000 calc(var(--hole-r) * var(--u) + 0.6px)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.coupon__fact-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-gold);
  border: calc(4 * var(--u)) solid #fff;
  border-radius: calc(4 * var(--u));
  box-sizing: border-box;
}
.coupon__fact-frame::after {
  content: "";
  position: absolute;
  inset: calc(var(--bw) * var(--u));
  background:
    radial-gradient(circle at calc((var(--hole-x) - var(--bw)) * var(--u)) 50%,
      transparent calc(var(--hole-r) * var(--u)),
      #fff calc(var(--hole-r) * var(--u)),
      #fff calc(var(--hole-r) * var(--u) + 2px),
      transparent calc(var(--hole-r) * var(--u) + 2.5px)),
    radial-gradient(circle at 0 0, var(--c-gold) var(--notch-u), transparent calc(var(--notch-u) + 0.5px)),
    radial-gradient(circle at 100% 0, var(--c-gold) var(--notch-u), transparent calc(var(--notch-u) + 0.5px)),
    radial-gradient(circle at 100% 100%, var(--c-gold) var(--notch-u), transparent calc(var(--notch-u) + 0.5px)),
    radial-gradient(circle at 0 100%, var(--c-gold) var(--notch-u), transparent calc(var(--notch-u) + 0.5px)),
    var(--c-cream);
}
.coupon__fact--term {
  --x: 95.94; --y: 579.35; --w: 570.72; --h: 256.56;
  z-index: 2;
}
.coupon__fact--place {
  --x: 612.90; --y: 579.35; --w: 570.72; --h: 256.56;
  z-index: 2;
}
.coupon__fact--limit {
  --x: 95.94; --y: 769.43; --w: 570.72; --h: 256.80;
  z-index: 1;
}
.coupon__fact--weekday {
  --x: 612.90; --y: 769.43; --w: 570.72; --h: 256.80;
  z-index: 1;
}
.coupon__fact-k,
.coupon__date,
.coupon__note,
.coupon__fact-body { z-index: 1; }
.coupon__fact--term .coupon__fact-k { --x: 211.86; --y: 83.58; --w: 153.41; --h: 25.05; }
.coupon__fact--place .coupon__fact-k { --x: 179.34; --y: 83.31; --w: 212.01; --h: 24.95; }
.coupon__fact--limit .coupon__fact-k { --x: 170.53; --y: 84.98; --w: 249.11; --h: 24.87; }
.coupon__fact--weekday .coupon__fact-k { --x: 171.94; --y: 115.93; --w: 242.57; --h: 24.81; }
.coupon__date { --x: 141.96; --y: 122.88; --w: 300.89; --h: 22.23; }
.coupon__fact-k picture,
.coupon__fact-k img,
.coupon__date picture,
.coupon__date img { display: block; width: 100%; height: 100%; }
.coupon__note {
  position: absolute;
  left: 0; right: 0;
  top: calc(159.90 * var(--u));
  --fs: 14; --lh: 18;
}
.coupon__fact-body {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.coupon__fact--place .coupon__fact-body { top: calc(126.88 * var(--u)); }
.coupon__fact--limit .coupon__fact-body { top: calc(128.73 * var(--u)); }
.coupon__fact-body .t { --fs: 18; --lh: 26; }

.coupon__tag { --x: 293.70; --y: 1024.34; --w: 679.30; --h: 30.24; }
.coupon__tag picture,
.coupon__tag img { display: block; width: 100%; height: 100%; }

.coupon__steps-h { --x: 305.65; --y: 1213.95; --w: 670.59; --h: 43.13; }
.coupon__steps-h picture,
.coupon__steps-h img { display: block; width: 100%; height: 100%; }

.coupon__steps { position: absolute; inset: 0; pointer-events: none; }
.coupon__step { position: absolute; inset: 0; }
.coupon__step-box {
  filter: drop-shadow(0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(17, 37, 65, .1));
}
.coupon__step-box picture,
.coupon__step-box img,
.coupon__step-t picture,
.coupon__step-t img,
.coupon__tri picture,
.coupon__tri img { display: block; width: 100%; height: 100%; }

.coupon__step--1 .coupon__step-box { --x: 140.26; --y: 1322.77; --w: 210; --h: 90; }
.coupon__step--2 .coupon__step-box { --x: 403.51; --y: 1322.77; --w: 210; --h: 90; }
.coupon__step--3 .coupon__step-box { --x: 666.75; --y: 1322.77; --w: 210; --h: 90; }
.coupon__step--4 .coupon__step-box { --x: 930.00; --y: 1322.77; --w: 210; --h: 90; }

.coupon__step--1 .coupon__num { --x: 134.95; --y: 1280.92; --w: 56.63; --h: 86.82; }
.coupon__step--2 .coupon__num { --x: 405.21; --y: 1278.45; --w: 64.18; --h: 89.46; }
.coupon__step--3 .coupon__num { --x: 663.26; --y: 1277.91; --w: 66.07; --h: 90.12; }
.coupon__step--4 .coupon__num { --x: 926.91; --y: 1278.23; --w: 66.07; --h: 90.12; }
.coupon__num {
  --fs: 64; --lh: 88;
  color: #eac24e;
  font-weight: 400;
  font-family: var(--font-script);
  white-space: nowrap;
  z-index: 2;
}

.coupon__step--1 .coupon__step-t { --x: 202.92; --y: 1347.20; --w: 84.42; --h: 47.33; }
.coupon__step--2 .coupon__step-t { --x: 455.79; --y: 1345.16; --w: 103.24; --h: 48.83; }
.coupon__step--3 .coupon__step-t { --x: 733.43; --y: 1356.01; --w: 76.06; --h: 21.60; }
.coupon__step--4 .coupon__step-t { --x: 981.45; --y: 1355.94; --w: 114.11; --h: 21.45; }

.coupon__tri--1 { --x: 369.33; --y: 1355.20; --w: 18.59; --h: 25.79; }
.coupon__tri--2 { --x: 630.77; --y: 1355.20; --w: 18.58; --h: 25.79; }
.coupon__tri--3 { --x: 895.18; --y: 1355.20; --w: 18.58; --h: 25.79; }

/* =========================================================================
   セクション7 — 特典一覧
   原点: クーポン下端。4ステップ下の余りを見出し上へ移した。
   ========================================================================= */
.perks {
  width: 100%;
  scroll-margin-top: calc(var(--hdr-h) * var(--u));
}
.perks__stage {
  position: relative;
  width: 100%;
  height: calc(611.77 * var(--u));
  overflow: hidden;
}
.perks__col {
  --x: 0; --y: 0; --w: 1280; --h: 611.77;
  background: var(--c-cream);
}
.perks__blue {
  --x: -36.06; --y: 0; --w: 1352.16; --h: 611.77;
  background: var(--c-cyan);
  pointer-events: none;
  z-index: 0;
}
.perks__sides,
.exp__sides,
.access__sides {
  background: url(../assets/bg/sides-pc.webp) center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.1;
}
.perks__sides {
  --x: 2.70; --y: -29.10; --w: 1270.47; --h: 2714.99;
}

.perks__br { z-index: 2; }
.perks__br--l {
  --x: 452.96; --y: 80.98; --w: 12.77; --h: 29.51;
  background: url(../assets/perks/bracket-l.svg) center / 100% 100% no-repeat;
}
.perks__br--r {
  --x: 812.39; --y: 80.98; --w: 12.77; --h: 29.51;
  background: url(../assets/perks/bracket-r.svg) center / 100% 100% no-repeat;
}

.perks__sub { --x: 476.40; --y: 79.83; --w: 328.82; --h: 28.14; z-index: 2; }
.perks__h { --x: 427.30; --y: 120.81; --w: 412.87; --h: 47.00; z-index: 2; }
.perks__sub picture,
.perks__sub img,
.perks__h picture,
.perks__h img { display: block; width: 100%; height: 100%; }

.perks__card { list-style: none; z-index: 1; }
.perks__card--late { z-index: 2; }
.perks__card--drink { z-index: 3; }
.perks__card--sweets { z-index: 4; }
.perks__icon,
.perks__title { z-index: 2; }
.perks__card > picture { display: block; width: 100%; height: 100%; }
.perks__tag {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(17, 37, 65, .1));
}
.perks__icon picture,
.perks__icon img,
.perks__title picture,
.perks__title img { display: block; width: 100%; height: 100%; }

.perks__card--sea { --x: 81.54; --y: 174.25; --w: 346.56; --h: 437.52; }
.perks__card--late { --x: 338.34; --y: 174.25; --w: 346.32; --h: 437.52; }
.perks__card--drink { --x: 595.14; --y: 174.25; --w: 346.32; --h: 437.52; }
.perks__card--sweets { --x: 851.70; --y: 174.25; --w: 346.56; --h: 437.52; }

.perks__card--sea .perks__icon { --x: 84.96; --y: 104.64; --w: 171.60; --h: 171.60; }
.perks__card--late .perks__icon { --x: 90.00; --y: 104.64; --w: 171.36; --h: 171.60; }
.perks__card--drink .perks__icon { --x: 84.00; --y: 104.64; --w: 171.60; --h: 171.60; }
.perks__card--sweets .perks__icon { --x: 90.00; --y: 104.64; --w: 171.60; --h: 171.60; }

.perks__card--sea .perks__title { --x: 107.95; --y: 267.70; --w: 143.25; --h: 38.38; transform: rotate(-5deg); }
.perks__card--late .perks__title { --x: 89.42; --y: 258.37; --w: 152.24; --h: 58.24; transform: rotate(5deg); }
.perks__card--drink .perks__title { --x: 113.80; --y: 290.65; --w: 128.22; --h: 30.51; transform: rotate(-5deg); }
.perks__card--sweets .perks__title { --x: 97.22; --y: 273.24; --w: 143.40; --h: 31.77; transform: rotate(5deg); }

/* =========================================================================
   セクション8 — 体験3ブロック
   原点 PC: 特典下端 (429.98, 4956.87)  SP: (271.61, 5462.19)
   ========================================================================= */
.exp { width: 100%; }
.exp__stage {
  position: relative;
  width: 100%;
  height: calc(1936.75 * var(--u));
  overflow: hidden;
}
.exp__col {
  --x: 0; --y: 0; --w: 1280; --h: 1936.75;
  background: var(--c-cream);
  z-index: 0;
}
.exp__blue {
  --x: -36.06; --y: 0; --w: 1352.16; --h: 1936.75;
  background: var(--c-cyan);
  pointer-events: none;
  z-index: 0;
}
.exp__sides {
  --x: 2.70; --y: -640.87; --w: 1270.47; --h: 2714.99;
}
.exp__cream {
  --x: -36.06; --y: 1779.28; --w: 1352.16; --h: 750.48;
  background: url(../assets/bg/wave-cream.webp) center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 0;
}

.exp__intro { z-index: 2; }
.exp__intro--a { --x: 244.22; --y: 45.14; --w: 774.93; --h: 47.37; }
.exp__intro--b { --x: 423.67; --y: 103.18; --w: 437.90; --h: 46.93; }
.exp__intro picture,
.exp__intro img { display: block; width: 100%; height: 100%; }

.exp__shadow { z-index: 0; pointer-events: none; }
.exp__shadow picture,
.exp__shadow img { display: block; width: 100%; height: 100%; }
.exp__shadow--sunset  { --x: 144.56; --y: 177.82; --w: 1011.15; --h: 507.91; }
.exp__shadow--night   { --x: 144.56; --y: 706.18; --w: 1011.15; --h: 509.30; }
.exp__shadow--morning { --x: 144.56; --y: 1245.99; --w: 1011.15; --h: 509.30; }

.exp__panel {
  background: url(../assets/exp/panel.webp) center / 100% 100% no-repeat;
  z-index: 1;
}
.exp__panel--sunset  { --x: 103.86; --y: 156.96; --w: 1072.32; --h: 545.28; }
.exp__panel--night   { --x: 103.86; --y: 685.20; --w: 1072.32; --h: 546.96; }
.exp__panel--morning { --x: 103.86; --y: 1224.96; --w: 1072.32; --h: 546.96; }

.exp__wave,
.exp__deco { z-index: 2; pointer-events: none; }
.exp__wave img,
.exp__deco {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.exp__wave--sunset,
.exp__wave--night,
.exp__wave--morning { display: none; }
.exp__deco { display: none; }

.exp__en { z-index: 4; }
.exp__en picture,
.exp__en img { display: block; width: 100%; height: 100%; }
.exp__en--sunset  { --x: 112.39; --y: 154.00; --w: 209.49; --h: 122.44; }
.exp__en--night   { --x: 116.22; --y: 685.47; --w: 196.74; --h: 118.01; }
.exp__en--morning { --x: 85.63; --y: 1232.71; --w: 257.02; --h: 121.22; }

.exp__photo { z-index: 3; }
.exp__photo--sunset  { --x: 632.58; --y: 218.88; --w: 584.40; --h: 447.84; --iw: 537.85; --ih: 387.68; --r: 5deg; }
.exp__photo--night   { --x: 632.58; --y: 743.28; --w: 584.40; --h: 447.84; --iw: 537.85; --ih: 387.68; --r: 5deg; }
.exp__photo--morning { --x: 632.58; --y: 1283.04; --w: 584.40; --h: 447.84; --iw: 537.85; --ih: 387.68; --r: 5deg; }
.exp__photo-win {
  overflow: hidden;
  border: calc(4 * var(--u)) solid #fff;
  border-radius: calc(8 * var(--u));
  background: #fff;
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(17, 37, 65, .1);
}
.exp__photo-win picture {
  position: absolute;
  inset: 0;
}
.exp__photo-win img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exp__tape {
  pointer-events: none;
  z-index: 4;
  opacity: .8;
}
.exp__tape-fill,
.exp__tape-pat {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.exp__tape--sunset  { --x: 954.87; --y: 570.28; --w: 240.56; --h: 125.37; }
.exp__tape--night   { --x: 954.87; --y: 1092.80; --w: 240.56; --h: 125.37; }
.exp__tape--morning { --x: 954.87; --y: 1629.69; --w: 240.56; --h: 125.37; }
.exp__tape--sunset .exp__tape-pat { opacity: .35; }
.exp__tape--night .exp__tape-pat,
.exp__tape--morning .exp__tape-pat { opacity: .3; }

.exp__h,
.exp__sub,
.exp__body,
.exp__promo,
.exp__badge-t,
.exp__list { z-index: 5; color: var(--c-body); }

.exp__h--sunset  { --x: 206.25; --y: 255.42; --w: 303.70; --h: 45.53; }
.exp__h--night   { --x: 202.79; --y: 784.92; --w: 345.02; --h: 44.42; }
.exp__h--morning { --x: 204.05; --y: 1324.60; --w: 307.68; --h: 44.83; }
.exp__h picture,
.exp__h img { display: block; width: 100%; height: 100%; }

.exp__sub > .t { --fs: 30; --lh: 36; white-space: nowrap; color: var(--c-accent); }
.exp__sub--sunset  { --x: 206.35; --y: 322.76; --w: 321.82; --h: 58.72; }
.exp__sub--night   { --x: 203.62; --y: 850.52; --w: 356.98; --h: 60.58; }
.exp__sub--morning { --x: 204.69; --y: 1390.87; --w: 351.75; --h: 59.02; }
.exp__sub picture,
.exp__sub img { display: block; width: 100%; height: 100%; }

.exp__body p > .t,
.exp__promo p > .t,
.exp__list > .t { --fs: 16; --lh: 26; white-space: nowrap; }
.exp__body--sunset  { --x: 200.71; --y: 402.80; }
.exp__body--night   { --x: 200.71; --y: 931.18; }
.exp__body--morning { --x: 200.71; --y: 1471.04; }
.exp__promo--sunset { --x: 200.71; --y: 562.26; }
.exp__body-sp,
.exp__promo-sp { display: none !important; }

.exp__badge {
  background: url(../assets/exp/badge.svg) center / 100% 100% no-repeat;
  z-index: 5;
  filter: drop-shadow(0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(17, 37, 65, .1));
}
.exp__badge--sunset  { --x: 200.71; --y: 518.72; --w: 113.21; --h: 33.04; }
.exp__badge--night   {
  --x: 200.71; --y: 1021.16; --w: 113.21; --h: 33.04;
  background-image: url(../assets/exp/badge-night.svg);
}
.exp__badge--morning {
  --x: 200.71; --y: 1560.97; --w: 113.21; --h: 33.04;
  background-image: url(../assets/exp/badge-morning.svg);
}

.exp__badge-t picture,
.exp__badge-t img { display: block; width: 100%; height: 100%; }
.exp__badge-t--sunset  { --x: 220.16; --y: 526.49; --w: 74.77; --h: 16.05; }
.exp__badge-t--night   { --x: 229.58; --y: 1028.87; --w: 56.34; --h: 16.19; }
.exp__badge-t--morning { --x: 229.58; --y: 1568.68; --w: 56.34; --h: 16.18; }

.exp__list { list-style: none; }
.exp__list > .t { display: block; position: relative; padding-left: calc(22 * var(--u)); }
.exp__list > .t::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
}
.exp__list--night.exp__list--l { --x: 200.71; --y: 1063.60; }
.exp__list--night.exp__list--r { --x: 416.01; --y: 1063.60; }
.exp__list--morning { --x: 200.71; --y: 1603.41; }
.exp__list--sp { display: none !important; }

.exp__card { position: absolute; inset: 0; }
.exp__copy,
.exp__visual { position: absolute; inset: 0; }
/* opacity / transform 中もパネルより前。終わってから前面に跳ねない */
.exp__visual { z-index: 3; }
.exp__copy { z-index: 4; }
.exp__card--sunset  .exp__visual { transform-origin: 72% 23%; }
.exp__card--night   .exp__visual { transform-origin: 72% 50%; }
.exp__card--morning .exp__visual { transform-origin: 72% 78%; }

.js .exp__card .exp__visual {
  opacity: 0;
  transform: translate(calc(26 * var(--u)), calc(-34 * var(--u))) rotate(3deg);
  transition:
    opacity .9s cubic-bezier(.22, 1, .36, 1) .12s,
    transform .9s cubic-bezier(.22, 1, .36, 1) .12s;
}
.js .exp__card.is-in .exp__visual {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   セクション9 — JRアクセス
   原点 PC: 体験下端 (429.98, 6893.623)  SP: (271.61, 7986.986)
   ========================================================================= */
.access { position: relative; width: 100%; z-index: 1; }
.access__stage {
  position: relative;
  width: 100%;
  height: calc(1354.94 * var(--u));
  /* 波・ビーチ・タグが体験側へはみ出す。横は html/body で切る */
  overflow: visible;
}
.access__col {
  --x: 0; --y: 0; --w: 1280; --h: 1354.94;
  background: var(--c-cream);
}
.access__blue {
  --x: -36.06; --y: -157.47; --w: 1352.16; --h: 446.75;
  background: var(--c-cyan);
  pointer-events: none;
  z-index: 0;
}
.access__sides {
  --x: 2.70; --y: -2577.62; --w: 1270.47; --h: 2714.99;
}
.access__cream {
  --x: -36.06; --y: -157.47; --w: 1352.16; --h: 750.48;
  background: url(../assets/bg/wave-cream.webp) center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 0;
}
.access__navy {
  --x: -36.06; --y: 520.85; --w: 1352.16; --h: 791.32;
  background: var(--c-navy);
  pointer-events: none;
  z-index: 0;
}
.access__fw {
  --x: 0; --y: 521.43; --w: 1280; --h: 790.74;
  background: url(../assets/bg/fw-pc.webp) center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.1;
}

.access__br--l {
  --x: 959.24; --y: 8.99; --w: 12.77; --h: 29.51;
  background: url(../assets/access/bracket-l.svg) center / 100% 100% no-repeat;
}
.access__br--r {
  --x: 1138.11; --y: 8.99; --w: 12.77; --h: 29.51;
  background: url(../assets/access/bracket-r.svg) center / 100% 100% no-repeat;
}

.access__beach {
  z-index: 2;
  --x: -38.46; --y: -31.39; --w: 664.56; --h: 316.08;
}
.access__beach-win {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(648.3 * var(--u));
  height: calc(299.86 * var(--u));
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: calc(4 * var(--u)) solid #fff;
  border-radius: calc(8 * var(--u));
  background: #fff;
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(62, 58, 57, .18);
}
.access__beach-win picture {
  position: absolute;
  inset: 0;
}
.access__beach-win img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.access__tape {
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: multiply;
}
.access__tape-fill,
.access__tape-pat {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.access__tape--beach { --x: 496.35; --y: -61.14; --w: 153.75; --h: 120.55; z-index: 3; }
.access__tape--beach .access__tape-pat { opacity: .35; }
.access__tape--jr-tl { --x: -31.32; --y: -33.37; --w: 132.74; --h: 140.75; }
.access__tape--jr-tl .access__tape-pat { opacity: .4; }
.access__tape--jr-br { --x: 604.24; --y: 65.77; --w: 148; --h: 141; }
.access__tape--jr-br .access__tape-pat { opacity: .3; }
.access__tape--fw-tl { --x: -31.32; --y: -22.48; --w: 146.69; --h: 139.69; }
.access__tape--fw-tl .access__tape-fill { opacity: .42; }
.access__tape--fw-tl .access__tape-pat { opacity: .35; }
.access__tape--fw-br { --x: 618.24; --y: 76.51; --w: 134; --h: 141.78; }
.access__tape--fw-br .access__tape-fill { opacity: .7; }
.access__tape--fw-br .access__tape-pat { opacity: .25; }
.access__tag { --x: 980.99; --y: 7.69; --w: 141.61; --h: 27.95; z-index: 2; }
.access__h { --x: 728.04; --y: 56.59; --w: 410.26; --h: 113.29; z-index: 2; }
.access__tag picture,
.access__tag img,
.access__h picture,
.access__h img { display: block; width: 100%; height: 100%; }

.access__body { color: var(--c-body); }
.access__body > .t { --fs: 18; --lh: 26; white-space: nowrap; }
.access__body-pc--1 { --x: 689.90; --y: 204.76; }
.access__body-pc--2 { --x: 654.41; --y: 242.76; }
.access__body-sp { display: none !important; }

.access__vpanel {
  --x: 93.54; --y: 559.41; --w: 259.2; --h: 503.04;
  --iw: 140; --ih: 408;
  --bw: 14;
  --notch: 14;
  --hole-y: 42;
  --hole-r: 12;
  --notch-u: calc(var(--notch) * var(--u));
  z-index: 3;
}
.access__vpanel-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--iw) * var(--u));
  height: calc(var(--ih) * var(--u));
  transform: translate(-50%, -50%) rotate(-5deg);
  pointer-events: none;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(17, 37, 65, .24));
  -webkit-mask-image: radial-gradient(
    circle at 50% calc(var(--hole-y) * var(--u)),
    transparent calc(var(--hole-r) * var(--u)),
    #000 calc(var(--hole-r) * var(--u) + 0.6px)
  );
  mask-image: radial-gradient(
    circle at 50% calc(var(--hole-y) * var(--u)),
    transparent calc(var(--hole-r) * var(--u)),
    #000 calc(var(--hole-r) * var(--u) + 0.6px)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.access__vpanel-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-cyan);
  border: calc(3 * var(--u)) solid #fff;
  border-radius: calc(4 * var(--u));
  box-sizing: border-box;
}
.access__vpanel-frame::after {
  content: "";
  position: absolute;
  inset: calc(var(--bw) * var(--u));
  background:
    radial-gradient(circle at 50% calc((var(--hole-y) - var(--bw)) * var(--u)),
      transparent calc(var(--hole-r) * var(--u)),
      #fff calc(var(--hole-r) * var(--u)),
      #fff calc(var(--hole-r) * var(--u) + 2px),
      transparent calc(var(--hole-r) * var(--u) + 2.5px)),
    radial-gradient(circle at 0 0, var(--c-cyan) var(--notch-u), transparent calc(var(--notch-u) + 0.5px)),
    radial-gradient(circle at 100% 0, var(--c-cyan) var(--notch-u), transparent calc(var(--notch-u) + 0.5px)),
    radial-gradient(circle at 100% 100%, var(--c-cyan) var(--notch-u), transparent calc(var(--notch-u) + 0.5px)),
    radial-gradient(circle at 0 100%, var(--c-cyan) var(--notch-u), transparent calc(var(--notch-u) + 0.5px)),
    var(--c-cream);
}
.access__vpanel-t {
  --x: 90.98; --y: 121.95; --w: 73.58; --h: 291.17;
  z-index: 1;
}
.access__vpanel-t picture,
.access__vpanel-t img { display: block; width: 100%; height: 100%; }

.access__en { z-index: 3; }
.access__en--1 { --x: 914.02; --y: 951.50; --w: 190.76; --h: 86.73; }
.access__en--2 { --x: 1000.69; --y: 955.55; --w: 188.83; --h: 100.66; }
.access__en img { display: block; width: 100%; height: 100%; }

.access__photo {
  overflow: hidden;
  border-radius: calc(8 * var(--u));
  z-index: 2;
}
.access__photo--fw { --x: 273.36; --y: 601.54; --w: 381.66; --h: 232.78; }
.access__photo--fw .access__photo-img { --x: -78.02; --y: -89.76; --w: 486.37; --h: 405.09; }
.access__photo--night { --x: 392.38; --y: 856.51; --w: 262.64; --h: 138.32; }
.access__photo--night .access__photo-img { --x: -10.20; --y: -25.07; --w: 281.54; --h: 188.03; }
.access__photo--hanabi { --x: 672.86; --y: 600.74; --w: 607.14; --h: 393.52; }
.access__photo--hanabi .access__photo-img { --x: -17.84; --y: -13.48; --w: 635.11; --h: 423.54; }
.access__photo-img picture,
.access__photo-img img { display: block; width: 100%; height: 100%; }

.access__cta {
  display: block;
  color: #fff;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 4;
}
/* 関西・中部発／花火 CTA は板と再生をCSS、中の文字は koma SVG。 */
.access__cta--jr,
.access__cta--fw {
  --pad: 0;
  --cut: 25;
  --cut-u: calc(var(--cut) * var(--u));
  --octa: polygon(
    var(--cut-u) 0, calc(100% - var(--cut-u)) 0,
    100% var(--cut-u), 100% calc(100% - var(--cut-u)),
    calc(100% - var(--cut-u)) 100%, var(--cut-u) 100%,
    0 calc(100% - var(--cut-u)), 0 var(--cut-u)
  );
  pointer-events: none;
  overflow: visible;
}
.access__cta--jr { --x: 279.78; --y: 320.61; --w: 720.24; --h: 160.32; }
.access__cta--fw { --x: 279.78; --y: 1077.09; --w: 720.24; --h: 160.08; }
.access__cta--jr::before,
.access__cta--fw::before {
  content: "";
  position: absolute;
  inset: calc(var(--pad) * var(--u));
  clip-path: var(--octa);
  pointer-events: auto;
}
.access__cta-frame {
  position: absolute;
  inset: calc(var(--pad) * var(--u));
  pointer-events: none;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(17, 37, 65, .16));
}
.access__cta-frame::before,
.access__cta-frame::after {
  content: "";
  position: absolute;
  clip-path: var(--octa);
}
.access__cta-frame::before {
  inset: 0;
  background: #fff;
}
.access__cta-frame::after { inset: calc(4 * var(--u)); }
.access__cta--jr .access__cta-frame::after { background: #32b7ca; }
.access__cta--fw .access__cta-frame::after { background: var(--c-gold); }
.access__cta-dash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  z-index: 1;
}
.access__cta-dash--sp { display: none; }

.access__cta-tag {
  --x: 204.97; --y: 39.40; --w: 300.27; --h: 28.39;
  z-index: 3;
  pointer-events: auto;
}
.access__cta-main { z-index: 3; pointer-events: auto; }
.access__cta-main--jr { --x: 104.40; --y: 75.42; --w: 508.63; --h: 45.25; }
.access__cta-main--fw { --x: 82.19; --y: 55.34; --w: 534.94; --h: 48.62; }
.access__cta-fw-ico { display: none; pointer-events: auto; }
.access__cta-tag picture,
.access__cta-tag img,
.access__cta-main picture,
.access__cta-main img,
.access__cta-fw-ico img,
.access__cta-play img { display: block; width: 100%; height: 100%; }
.access__cta-play { --x: 641.62; --y: 59.16; --w: 42; --h: 42; }
.access__cta--jr .access__cta-play,
.access__cta--fw .access__cta-play {
  pointer-events: auto;
  border-radius: 50%;
}
.access__cta--jr .access__cta-play { background: #fff; }
.access__cta--fw .access__cta-play { background: var(--c-navy); }
.access__cta--jr .access__cta-play::after,
.access__cta--fw .access__cta-play::after {
  content: "";
  position: absolute;
  left: 35.4%;
  top: 27.2%;
  width: 39%;
  height: 45.5%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.access__cta--jr .access__cta-play::after { background: #32b7ca; }
.access__cta--fw .access__cta-play::after { background: var(--c-gold); }
.access__cta--fw .access__cta-play { --y: 59.01; }

/* =========================================================================
   セクション10 — SNS・CTA
   原点 PC: (429.98, 8325.559)  SP: (271.61, 9406.389)
   ========================================================================= */
.sns { width: 100%; }
.sns__stage {
  position: relative;
  width: 100%;
  height: calc(977.16 * var(--u));
  overflow: hidden;
}
.sns__col {
  --x: 0; --y: 0; --w: 1280; --h: 977.16;
  background: var(--c-cream);
}
.sns__orange {
  --x: -36.06; --y: 158.75; --w: 1352.16; --h: 854.64;
  z-index: 0;
}
.sns__orange picture,
.sns__orange img { display: block; width: 100%; height: 100%; }

.sns__oval {
  --x: 140; --y: 275.7; --w: 1000; --h: 415.82;
  overflow: hidden;
  border-radius: calc(207.91 * var(--u));
  z-index: 1;
}
.sns__oval::after {
  content: "";
  position: absolute;
  inset: 0;
  border: calc(8 * var(--u)) solid #fff;
  border-radius: inherit;
  pointer-events: none;
}
.sns__oval-img { --x: -18.24; --y: -205.94; --w: 1044.59; --h: 696.40; }
.sns__oval-img picture,
.sns__oval-img img { display: block; width: 100%; height: 100%; }

.sns__enjoy { --x: 94.11; --y: 260.61; --w: 246.37; --h: 118.61; z-index: 2; }
.sns__enjoy img { display: block; width: 100%; height: 100%; }

.sns__summer { --x: 1016.15; --y: 271.28; --w: 134.23; --h: 426.12; z-index: 2; }
.sns__summer img { display: block; width: 100%; height: 100%; }

.sns__ig-circle {
  --x: 139.4; --y: 21.53; --w: 115.7; --h: 115.7;
  background: #fff;
  border-radius: 50%;
}
.sns__ig-logo { --x: 160.39; --y: 42.08; --w: 71.74; --h: 69.6; object-fit: contain; }
.sns__ig-icon { --x: 276.67; --y: 32.59; --w: 33.79; --h: 33.79; object-fit: contain; }
.sns__ig-word { --x: 315.95; --y: 33.15; --w: 139.92; --h: 39.70; object-fit: contain; }

.sns__ig-list {
  --x: 508.38; --y: 32.39; --w: 486.47; --h: 89.35;
  display: flex;
  gap: calc(8.88 * var(--u));
  list-style: none;
  margin: 0;
  padding: 0;
}
.sns__ig-list li {
  flex: none;
  width: calc(89.35 * var(--u));
  height: calc(89.35 * var(--u));
}
.sns__ig-list a { display: block; width: 100%; height: 100%; }
.sns__ig-list img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(4 * var(--u)); }

.sns__ig-t { color: var(--c-brand); white-space: nowrap; }
.sns__ig-t > .t { --fs: 18; --lh: 19; }
.sns__ig-t--1 { --x: 276.67; --y: 78.21; }
.sns__ig-t--2 { --x: 276.67; --y: 102.21; }

.sns__more {
  --x: 1009.3; --y: 54.06; --w: 130.7; --h: 46.87;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(3.46 * var(--u));
  border: calc(1.5 * var(--u)) solid #34bacc;
  border-radius: calc(8 * var(--u));
  color: #34bacc;
  font-family: var(--font-yu);
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(17, 37, 65, .1);
}
.sns__more > .t { --fs: 16; --lh: 23; }
.sns__more-ico {
  display: block;
  flex: none;
  width: calc(11.44 * var(--u));
  height: calc(11.45 * var(--u));
}

.sns__cta {
  --x: 279.06; --y: 737.15; --w: 720.24; --h: 160.08;
  --pad: 0;
  --cut: 25;
  --cut-u: calc(var(--cut) * var(--u));
  --octa: polygon(
    var(--cut-u) 0, calc(100% - var(--cut-u)) 0,
    100% var(--cut-u), 100% calc(100% - var(--cut-u)),
    calc(100% - var(--cut-u)) 100%, var(--cut-u) 100%,
    0 calc(100% - var(--cut-u)), 0 var(--cut-u)
  );
  display: block;
  color: #fff;
  z-index: 4;
  pointer-events: none;
}
.sns__cta::before {
  content: "";
  position: absolute;
  inset: calc(var(--pad) * var(--u));
  clip-path: var(--octa);
  pointer-events: auto;
}
.sns__cta-frame {
  position: absolute;
  inset: calc(var(--pad) * var(--u));
  pointer-events: none;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(17, 37, 65, .16));
}
.sns__cta-frame::before,
.sns__cta-frame::after {
  content: "";
  position: absolute;
  clip-path: var(--octa);
}
.sns__cta-frame::before {
  inset: 0;
  background: #fff;
}
.sns__cta-frame::after {
  inset: calc(4 * var(--u));
  background: #32b7ca;
}
.sns__cta-dash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  z-index: 1;
}
.sns__cta-dash--sp { display: none; }
.sns__cta-now {
  --x: 120.62; --y: 55.54; --w: 140.05; --h: 55.03;
  z-index: 3;
  pointer-events: auto;
}
.sns__cta-main {
  --x: 272.50; --y: 57.39; --w: 304.41; --h: 46.53;
  z-index: 3;
  pointer-events: auto;
}
.sns__cta-now picture,
.sns__cta-now img,
.sns__cta-main picture,
.sns__cta-main img { display: block; width: 100%; height: 100%; }
.sns__cta-play {
  --x: 642.34; --y: 59.01; --w: 42; --h: 42;
  z-index: 3;
  pointer-events: auto;
  background: #fff;
  border-radius: 50%;
}
.sns__tape {
  pointer-events: none;
  z-index: 5;
}
.sns__tape-fill,
.sns__tape-pat {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.sns__tape-fill { opacity: .62; }
.sns__tape--tl { --x: 248.46; --y: 703.65; --w: 132.74; --h: 140.75; }
.sns__tape--tl .sns__tape-pat { opacity: .4; }
.sns__tape--br { --x: 898.78; --y: 803.70; --w: 146.69; --h: 139.69; }
.sns__tape--br .sns__tape-pat { opacity: .3; }
.sns__cta-play::after {
  content: "";
  position: absolute;
  left: 35.4%;
  top: 27.2%;
  width: 39%;
  height: 45.5%;
  background: #32b7ca;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* =========================================================================
   セクション11 — フッター
   原点 PC: (429.98, 9302.719)  SP: (271.61, 10167.269)
   ========================================================================= */
.ftr { width: 100%; }
.ftr__stage {
  position: relative;
  width: 100%;
  height: calc(215.87 * var(--u));
  overflow: hidden;
}
.ftr__col {
  --x: 0; --y: 0; --w: 1280; --h: 215.87;
  background: #fff;
}
.ftr__visual { display: none; }
.ftr__logo { --x: 139.76; --y: 37.58; --w: 145.10; --h: 140.72; }

.ftr__name {
  --x: 326.27; --y: 40.05;
  color: var(--c-body);
}
.ftr__name > .t { --fs: 28; --lh: 34; white-space: nowrap; }

.ftr__addr {
  --x: 326.27; --y: 81.07;
  color: var(--c-body);
}
.ftr__addr > .t { --fs: 16; --lh: 19; white-space: nowrap; }

.ftr__sns {
  --x: 951.25; --y: 120.19; --w: 188.88; --h: 34.16;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
}
.ftr__sns img { display: block; width: auto; height: calc(32 * var(--u)); }

.ftr__copy {
  --x: 933.19; --y: 176.98;
  color: #828282;
  font-family: var(--font-yu);
}
.ftr__copy > .t { --fs: 16; --lh: 19; white-space: nowrap; }

/* =========================================================================
   SP — 375 = 100vw。原点は SP2 ヒーロー枠左上 (271.61, 236.0)。
   ========================================================================= */
@media (max-width: 767px) {
  :root { --uw: 375; --hdr-h: 0; }
  html, body { overflow-x: hidden; }

  /* ロゴは FV に置くだけ。fixed にしないのでスクロールで一緒に消える。 */
  .hdr {
    position: absolute;
    height: calc(50 * var(--u));
    overflow: visible;
  }
  .hdr__bar { display: none; }
  .hdr__logo {
    --x: 14.6; --y: 13.4; --w: 155.29; --h: 31.62;
  }
  .hdr.is-scrolled .hdr__logo {
    opacity: 1;
    pointer-events: auto;
  }

  /* 下部追従。板は CSS 八角で幅 375。クリックはボタン形だけ。 */
  .cta {
    --x: 0; --w: 375; --h: 72.05;
    --pad: 0;
    --cut: 9;
    --cut-u: calc(var(--cut) * var(--u));
    --octa: polygon(
      var(--cut-u) 0, calc(100% - var(--cut-u)) 0,
      100% var(--cut-u), 100% calc(100% - var(--cut-u)),
      calc(100% - var(--cut-u)) 100%, var(--cut-u) 100%,
      0 calc(100% - var(--cut-u)), 0 var(--cut-u)
    );
    position: fixed;
    left: 0;
    top: auto;
    bottom: calc(16 * var(--u));
    width: calc(375 * var(--u));
    height: calc(72.05 * var(--u));
    z-index: 60;
    background: none;
    pointer-events: none;
  }
  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: var(--octa);
    pointer-events: auto;
  }
  .cta:hover,
  .enjoy__get:hover,
  .enjoy__more:hover,
  .coupon__get:hover,
  .access__cta:hover,
  .sns__cta:hover,
  .js .enjoy__get.is-in:hover,
  .js .enjoy__more.is-in:hover,
  .js .coupon__get.is-in:hover,
  .js .access__cta.is-in:hover,
  .js .sns__cta.is-in:hover { transform: none; filter: none; }
  .cta__frame {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter: drop-shadow(0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(17, 37, 65, .16));
  }
  .cta__frame::before,
  .cta__frame::after {
    content: "";
    position: absolute;
    clip-path: var(--octa);
  }
  .cta__frame::before {
    inset: 0;
    background: #fff;
  }
  .cta__frame::after {
    inset: calc(4 * var(--u));
    background: var(--c-gold);
  }
  .cta__dash {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1;
  }
  .cta__icon  { --x: 26.54; --y: 20.15; --w: 31.75; --h: 29.11; z-index: 3; pointer-events: auto; }
  .cta__sub   { --x: 67.11; --y: 27.44; --w: 123.98; --h: 19.74; z-index: 3; pointer-events: auto; }
  .cta__main  { --x: 200.12; --y: 19.01; --w: 108.26; --h: 31.32; z-index: 3; pointer-events: auto; }
  .cta__arrow { --x: 323.68; --y: 19.43; --w: 32.15; --h: 32.61; z-index: 3; pointer-events: auto; }

  /* カード下端が 672。ドロップシャドウ分だけ段を伸ばして切らない。 */
  .fv__stage { height: calc(680 * var(--u)); }
  body { padding-bottom: calc(104 * var(--u)); }

  .fv__panel { --x: -36.1; --y: -36.1; --w: 447.12; --h: 708; }
  .fv__col   { --x: 0; --y: 0; --w: 375; --h: 680; }
  .hero      { --x: 0; --y: 0; --w: 375; --h: 420; }

  .copy__plate { --x: -20.84; --y: 21.43; --w: 383.04; --h: 245.52; opacity: .55; }

  .copy__glow { --x: -16.00; --y: 23.34; --w: 361.92; --h: 243.36; opacity: .55; }
  .copy__l1 { --x: 40.99; --y: 80.80; --w: 192.47; --h: 31.75; }
  .copy__l2 { --x: 41.53; --y: 124.14; --w: 247.10; --h: 35.43; }

  .copy__lead { --x: 42.76; --y: 174.31; --w: 153.73; --h: 35.47; }

  .deco--summer { --x: 37.60; --y: 241.70; --w: 57.60; --h: 39.15; --iw: 57.60; --ih: 20; }
  .deco--isnt   { --x: 62.84; --y: 244.20; --w: 103.85; --h: 55.34; --iw: 103.85; --ih: 20; }
  .deco--atami  { --x: 127.61; --y: 234.44; --w: 52.89; --h: 43.50; --iw: 52.89; --ih: 26; }
  .deco--summer > * > .t { --fs: 16; --lh: 20; }
  .deco--isnt   > * > .t { --fs: 16; --lh: 20; }
  .deco--atami  > * > .t { --fs: 22; --lh: 26; }
  .deco--summer .deco__cap { --fs: 16.4; }
  .deco--isnt   .deco__cap { --fs: 16.4; }
  .deco--atami  .deco__cap { --fs: 22.6; }

  /* SP カード本体は 259.2。写真は内側緑枠の内側に切り抜く。 */
  .card__frame { --x: 62.11; --y: 383.87; --w: 259.20; --h: 288; --r: 0deg; }
  .card__frame::before {
    inset: calc(6.57 * var(--u));
    border-radius: calc(6.18 * var(--u));
  }
  .card__photo {
    --x: 8.57; --y: 8.57; --w: 242.06; --h: 155.51;
    border-radius: calc(4.18 * var(--u)) calc(4.18 * var(--u)) 0 0;
  }

  .card__camera { --x: 79.74; --y: 561.51; --w: 30.25; --h: 23.30; }

  .card__h { --x: 118.04; --y: 563.38; --w: 183.15; --h: 22.51; }

  .card__sub {
    --x: 77.62; --y: 594.91; --w: 172.6; --h: 38.80;
    --iw: 172.6; --ih: 38.80; --r: 0deg;
  }
  .card__sub > * > .t { --fs: 15; --lh: 18; }
  .card__sub > * > .t + .t { --lh: 18; margin-top: calc(2.8 * var(--u)); }

  .card__check { --x: 228.73; --y: 644.05; --w: 60.06; --h: 12.13; }

  .card__stamp      { --x: 212.02; --y: 578.12; --w: 138.43; --h: 90.02; }
  .card__playshadow,
  .card__play       { --x: 177.87; --y: 452.28; --w: 40.32; --h: 40.32; }
  .card__arrow      { --x: 296.54; --y: 644.97; --w: 5.41; --h: 9.86; }

  .card__drama {
    display: block;
    --x: -2.45; --y: 322.88; --w: 143.02; --h: 79.85;
    z-index: 2;
  }

  .js .fv .card { transform-origin: 51% 78%; }

  /* ---- セクション2 SP。原点: 375列の FV 下端 (Figma 271.61, 908.0) ---- */
  .band__col { --w: 375; --h: 1928.80; }
  .band__palms { --x: 1; --y: 292.29; --w: 375; --h: 1748.77; }

  .lead__stage { height: calc(708.44 * var(--u)); overflow: hidden; }
  .js .lead .lead__visual { transform-origin: 50% 77%; }

  .lead__banner { --x: 44.19; --y: 49.84; --w: 288.21; --h: 16.84; }

  .lead__mark {
    --x: 37.31; --y: 58.21; --w: 308.85; --h: 16.16;
    background-image: url(../assets/lead/marker-sp.svg);
  }

  .lead__h { --x: 56.90; --y: 88.10; }
  .lead__h > .t { --fs: 34; --lh: 48; }
  .lead__h > .t:first-child { margin-left: calc(17.24 * var(--u)); }

  .lead__sub { --x: 50.16; --y: 189.33; --fs: 20; --lh: 29; }

  .lead__body {
    --x: 24.25; --y: 249.90;
    width: calc(330 * var(--u));
    text-align: center;
  }
  .lead__body > .t { --fs: 16; --lh: 32; }
  .lead__body > .lead__join { display: none; }
  .lead__body > .lead__a,
  .lead__body > .lead__b { display: block; }

  .lead__stamp { --x: 226.21; --y: 269.65; --w: 200.01; --h: 148.27; }

  .lead__photo {
    --x: 11.72; --y: 440.11; --w: 353.52; --h: 216.24;
    border-radius: calc(14 * var(--u));
  }
  .lead__photo::after { inset: calc(6 * var(--u)); border-radius: calc(8 * var(--u)); }

  .lead__tape { --x: -1.71; --y: 429.00; --w: 76.40; --h: 63.00; }

  .lead__ticket { --x: 243.12; --y: 433.40; --w: 177.60; --h: 275.04; }

  /* ---- セクション3 SP。原点: 375列のリード下端 (Figma 271.61, 1616.44) ---- */
  .enjoy__stage { height: calc(1220.36 * var(--u)); }

  .enjoy__blue { --x: -35.08; --y: 1104.15; --w: 447.12; --h: 116.21; }

  .enjoy__get {
    --x: 19.39; --y: -17.04; --w: 337.68; --h: 149.76;
    --cut: 10;
  }
  .enjoy__get-dash--pc { display: none; }
  .enjoy__get-dash--sp { display: block; }

  .enjoy__get-sub { --x: 98.98; --y: 29.23; --w: 143.88; --h: 20.33; }
  .enjoy__get-main { --x: 67.46; --y: 55.80; --w: 197.15; --h: 64.73; }

  .enjoy__get-play { --x: 283.77; --y: 58.88; --w: 32; --h: 32; }
  .enjoy__tape--tl { --x: -19.38; --y: -16.76; --w: 67.96; --h: 72.05; }
  .enjoy__tape--br { --x: 279.12; --y: 93.32; --w: 75.08; --h: 71.51; }

  .enjoy__rule--1,
  .enjoy__rule--2,
  .enjoy__rule--3 { display: none; }
  .enjoy__rule--h { display: block; --x: 19.75; --y: 403.45; --w: 337.50; }
  .enjoy__rule--vt { display: block; --x: 188.50; --y: 177.26; --h: 206.19; }
  .enjoy__rule--vb { display: block; --x: 188.50; --y: 423.45; --h: 288.73; }

  .enjoy__item--onsen .enjoy__icon { --x: 25.59; --y: 136.56; --w: 151.70; --h: 151.70; }
  .enjoy__item--gourmet .enjoy__icon { --x: 203.69; --y: 136.56; --w: 151.70; --h: 151.70; }
  .enjoy__item--event .enjoy__icon { --x: 23.99; --y: 387.46; --w: 151.70; --h: 151.70; }
  .enjoy__item--spot .enjoy__icon { --x: 201.29; --y: 387.46; --w: 151.70; --h: 151.70; }

  .enjoy__h--onsen { --x: 29.51; --y: 272.80; --w: 142.69; --h: 21.74; }
  .enjoy__h--gourmet { --x: 217.90; --y: 272.61; --w: 125.58; --h: 21.92; }
  .enjoy__h--event { --x: 42.27; --y: 523.69; --w: 116.87; --h: 21.82; }
  .enjoy__h--spot { --x: 210.85; --y: 524.09; --w: 129.75; --h: 21.17; }

  .enjoy__item--onsen .enjoy__b { --x: 18.19; --y: 313.56; }
  .enjoy__item--gourmet .enjoy__b { --x: 196.29; --y: 313.46; }
  .enjoy__item--event .enjoy__b { --x: 18.19; --y: 564.00; }
  .enjoy__item--spot .enjoy__b { --x: 196.29; --y: 564.36; }
  .enjoy__b > .t { --fs: 16; --lh: 26; }
  .enjoy__b-pc { display: none !important; }
  .enjoy__b-sp { display: block !important; }

  .enjoy__more { --x: 19.64; --y: 744.15; --w: 336.72; --h: 80.40; --cut: 8; }
  .enjoy__more-dash--pc { display: none; }
  .enjoy__more-dash--sp { display: block; }
  .enjoy__more-cam { display: none; }
  .enjoy__more-t { --x: 39.47; --y: 27.23; --w: 232.64; --h: 22.96; }
  .enjoy__more-play { --x: 287.44; --y: 26.18; --w: 28; --h: 28; }

  .enjoy__shout { --x: -4.24; --y: 868.55; --w: 145.87; --h: 70.32; }
  .enjoy__film-h { --x: 59.82; --y: 917.49; --w: 254.49; --h: 29.20; }

  .enjoy__film {
    --x: 12.20; --y: 959.91; --w: 352.56; --h: 196.32;
    --ix: 8.05; --iy: 8.19; --iw: 336.50; --ih: 180; --ir: 4;
    border-radius: calc(12 * var(--u));
  }
  .enjoy__film-tape { --x: 317.97; --y: 1099.22; --w: 61.41; --h: 64.75; }
  .enjoy__film-play { --x: 166.57; --y: 1047.02; --w: 41.95; --h: 25.17; }

  /* ---- セクション4 SP。原点: 375列 (Figma 271.61, 2784.8) ---- */
  .coupon__stage { height: calc(2005.80 * var(--u)); overflow: visible; }
  .coupon__col   { --w: 375; --h: 2005.80; }
  .coupon__blue  { --x: -35.08; --y: 0; --w: 447.12; --h: 1376; }
  .coupon__palms { --w: 375; --h: 1376; }
  .coupon__palm--l { --x: -147.56; --y: 346.48; --w: 364.52; --h: 498.36; }
  .coupon__palm--r { --x: 201.19; --y: 1115.85; --w: 364.51; --h: 498.35; }

  .coupon__h-l1 { --x: 37.30; --y: 7.05; --w: 290.32; --h: 26.58; }
  .coupon__h-l2 { --x: 84.36; --y: 42.89; --w: 193.75; --h: 26.47; }

  .coupon__offer {
    --x: -22.36; --y: 51.31; --w: 421.68; --h: 381.36;
    --cut: 16;
  }
  .coupon__offer-dash--pc { display: none; }
  .coupon__offer-dash--sp { display: block; }
  .coupon__tape--tl { --x: -2.99; --y: 81.54; --w: 98.84; --h: 66.98; }
  .coupon__tape--br { display: none; }
  .coupon__stamp { --x: 265.15; --y: 149.87; --w: 152.40; --h: 112.99; }
  .coupon__copy { --x: 68.74; --y: 72.24; --w: 289.59; --h: 212.02; }
  .coupon__rush { display: none; }
  .coupon__mark { --x: 238.45; --y: -36.04; --w: 129.95; --h: 67.22; }

  .coupon__get { --x: 28.47; --y: 356.78; --w: 317.04; --h: 64.32; }
  .coupon__get-dash--pc { display: none; }
  .coupon__get-dash--sp { display: block; }
  .coupon__get-t { --x: 45.07; --y: 20.80; --w: 214.09; --h: 21.45; }
  .coupon__get-play { --x: 268.57; --y: 18.21; --w: 28; --h: 28; }

  .coupon__info-h { --x: 58.09; --y: 456.41; --w: 258.72; --h: 26.84; }

  .coupon__fact { --hole-x: 38; }

  .coupon__fact--term {
    --x: -24.28; --y: 461.47; --w: 425.76; --h: 256.80;
    z-index: 4;
  }
  .coupon__fact--place {
    --x: -24.28; --y: 654.67; --w: 425.76; --h: 256.60;
    z-index: 3;
  }
  .coupon__fact--limit {
    --x: -24.28; --y: 844.99; --w: 425.76; --h: 256.80;
    z-index: 2;
  }
  .coupon__fact--weekday {
    --x: -24.28; --y: 1033.63; --w: 425.76; --h: 256.60;
    z-index: 1;
  }
  .coupon__fact--term .coupon__fact-k { --x: 151.42; --y: 90.91; --w: 122.72; --h: 20.04; }
  .coupon__fact--place .coupon__fact-k { --x: 133.26; --y: 87.96; --w: 169.61; --h: 19.98; }
  .coupon__fact--limit .coupon__fact-k { --x: 121.28; --y: 92.20; --w: 200.10; --h: 19.91; }
  .coupon__fact--weekday .coupon__fact-k { --x: 123.88; --y: 119.09; --w: 194.89; --h: 19.84; }
  .coupon__date { --x: 101.56; --y: 122.36; --w: 240.72; --h: 17.77; }
  .coupon__note { top: calc(158.73 * var(--u)); }
  .coupon__fact--place .coupon__fact-body { top: calc(126.87 * var(--u)); }
  .coupon__fact--limit .coupon__fact-body { top: calc(131.31 * var(--u)); }

  .coupon__tag { --x: 56.24; --y: 1270.67; --w: 271.37; --h: 60.89; }
  .coupon__steps-h { --x: 50.15; --y: 1413.21; --w: 276.70; --h: 60.42; }

  .coupon__step--1 .coupon__step-box { --x: 19.75; --y: 1536.69; --w: 337.50; --h: 65.11; }
  .coupon__step--2 .coupon__step-box { --x: 19.75; --y: 1660.38; --w: 337.50; --h: 65.11; }
  .coupon__step--3 .coupon__step-box { --x: 19.75; --y: 1789.35; --w: 337.50; --h: 65.11; }
  .coupon__step--4 .coupon__step-box { --x: 19.75; --y: 1914.66; --w: 337.50; --h: 65.11; }

  .coupon__step--1 .coupon__num { --x: 20.96; --y: 1521.92; --w: 44.01; --h: 43.05; }
  .coupon__step--2 .coupon__num { --x: 20.93; --y: 1647.48; --w: 50.21; --h: 43.82; }
  .coupon__step--3 .coupon__num { --x: 18.08; --y: 1777.30; --w: 48.59; --h: 42.26; }
  .coupon__step--4 .coupon__num { --x: 20.08; --y: 1901.25; --w: 49.39; --h: 43.39; }
  .coupon__num { --fs: 48; --lh: 68; }

  .coupon__step--1 .coupon__step-t { --x: 123.45; --y: 1559.06; --w: 132.24; --h: 21.39; }
  .coupon__step--2 .coupon__step-t { --x: 114.21; --y: 1682.77; --w: 148.62; --h: 21.21; }
  .coupon__step--3 .coupon__step-t { --x: 150.18; --y: 1811.68; --w: 76.06; --h: 21.61; }
  .coupon__step--4 .coupon__step-t { --x: 129.01; --y: 1936.93; --w: 114.11; --h: 21.45; }

  .coupon__tri--1 { --x: 175.60; --y: 1621.80; --w: 25.80; --h: 18.58; }
  .coupon__tri--2 { --x: 175.60; --y: 1747.11; --w: 25.80; --h: 18.58; }
  .coupon__tri--3 { --x: 175.60; --y: 1874.46; --w: 25.80; --h: 18.58; }

  /* ---- セクション7 SP。原点: 375列 (Figma 271.61, 4828.6) ---- */
  .perks__stage { height: calc(681.59 * var(--u)); }
  .perks__col   { --w: 375; --h: 681.59; }
  .perks__blue  { --x: -35.08; --y: 0; --w: 447.12; --h: 681.59; }
  .perks__sides {
    --x: -1.61; --y: -122.60; --w: 377; --h: 3557;
    background-image: url(../assets/bg/sides-sp.webp);
  }

  .perks__br--l {
    --x: 39.87; --y: 53.97; --w: 10.22; --h: 23.60;
    background-image: url(../assets/perks/bracket-l-sp.svg);
  }
  .perks__br--r {
    --x: 320.19; --y: 53.97; --w: 10.21; --h: 23.60;
    background-image: url(../assets/perks/bracket-r-sp.svg);
  }

  .perks__sub { --x: 59.41; --y: 54.00; --w: 253.35; --h: 21.48; }
  .perks__h { --x: 46.17; --y: 85.29; --w: 280.15; --h: 31.89; }

  .perks__card--sea { --x: -25.28; --y: 113.03; --w: 248.16; --h: 317.76; }
  .perks__card--late { --x: 152.08; --y: 113.03; --w: 248.40; --h: 317.76; }
  .perks__card--drink { --x: -25.28; --y: 363.83; --w: 248.16; --h: 317.76; }
  .perks__card--sweets { --x: 152.08; --y: 363.83; --w: 248.40; --h: 317.76; }

  .perks__card--sea .perks__icon { --x: 53.28; --y: 68.40; --w: 141.36; --h: 141.36; }
  .perks__card--late .perks__icon { --x: 53.52; --y: 68.40; --w: 141.36; --h: 141.36; }
  .perks__card--drink .perks__icon { --x: 52.80; --y: 68.40; --w: 141.36; --h: 141.36; }
  .perks__card--sweets .perks__icon { --x: 53.52; --y: 68.40; --w: 141.36; --h: 141.36; }

  .perks__card--sea .perks__title { --x: 74.08; --y: 196.91; --w: 99.73; --h: 19.37; transform: none; }
  .perks__card--late .perks__title { --x: 70.17; --y: 187.32; --w: 107.36; --h: 35.65; transform: none; }
  .perks__card--drink .perks__title { --x: 78.42; --y: 200.47; --w: 90.43; --h: 14.35; transform: none; }
  .perks__card--sweets .perks__title { --x: 75.48; --y: 197.31; --w: 100.08; --h: 19.21; transform: none; }

  /* ---- セクション8 SP。原点: 375列 (Figma 271.61, 5462.19) ---- */
  .exp__stage { height: calc(2524.80 * var(--u)); }
  .exp__card--sunset  .exp__visual { transform-origin: 50% 28%; }
  .exp__card--night   .exp__visual { transform-origin: 50% 60%; }
  .exp__card--morning .exp__visual { transform-origin: 50% 88%; }
  .exp__col   { --w: 375; --h: 2524.80; }
  .exp__blue  { --x: -35.08; --y: 0; --w: 447.12; --h: 2524.80; }
  .exp__sides {
    --x: -1.61; --y: -804.19; --w: 377; --h: 3557;
    background-image: url(../assets/bg/sides-sp.webp);
  }
  .exp__cream {
    --x: -35.08; --y: 2361.60; --w: 447.12; --h: 1554.24;
    background-image: url(../assets/bg/wave-cream-sp.webp);
  }

  .exp__intro--a { --x: 43.47; --y: 0; --w: 291.23; --h: 61.07; }
  .exp__intro--b { --x: 65.07; --y: 71.96; --w: 250.20; --h: 26.81; }

  .exp__panel {
    background-image: url(../assets/exp/panel-sp.webp);
  }
  .exp__panel--sunset  { --x: -17.36; --y: 119.52; --w: 409.68; --h: 741.60; }
  .exp__panel--night   { --x: -17.36; --y: 878.88; --w: 409.68; --h: 741.60; }
  .exp__panel--morning { --x: -17.36; --y: 1701.12; --w: 409.68; --h: 656.16; }
  .exp__wave { display: none; }

  .exp__deco { display: none; }

  .exp__shadow--sunset  { --x: 23.31; --y: 140.50; --w: 348.65; --h: 704.07; }
  .exp__shadow--night   { --x: 23.31; --y: 899.77; --w: 348.65; --h: 704.08; }
  .exp__shadow--morning { --x: 23.31; --y: 1722.09; --w: 348.65; --h: 618.72; }
  .exp__en--sunset  { --x: 7.97; --y: 123.41; --w: 123.51; --h: 73.56; }
  .exp__en--night   { --x: 9.04; --y: 884.44; --w: 116.42; --h: 71.09; }
  .exp__en--morning { --x: 4.06; --y: 1711.15; --w: 150.98; --h: 72.80; }

  .exp__photo--sunset  { --x: 9.52; --y: 581.04; --w: 356.64; --h: 274.56; --iw: 322.71; --ih: 232.61; --r: 5deg; }
  .exp__photo--night   { --x: 9.04; --y: 1377.12; --w: 356.88; --h: 274.80; --iw: 322.71; --ih: 232.61; --r: 5deg; }
  .exp__photo--morning { --x: 9.28; --y: 2090.40; --w: 356.64; --h: 274.80; --iw: 322.71; --ih: 232.61; --r: 5deg; }
  .exp__photo--sunset,
  .exp__photo--night,
  .exp__photo--morning { overflow: visible; }
  .exp__photo--sunset .exp__photo-win,
  .exp__photo--night .exp__photo-win,
  .exp__photo--morning .exp__photo-win {
    overflow: visible;
    box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .4);
  }
  .exp__tape--sunset  { --x: 205.78; --y: 794.85; --w: 144.34; --h: 75.22; }
  .exp__tape--night   { --x: 205.48; --y: 1589.89; --w: 144.34; --h: 75.22; }
  .exp__tape--morning { --x: 205.51; --y: 2301.46; --w: 144.34; --h: 75.22; }

  .exp__photo--sunset .exp__photo-win picture,
  .exp__photo--night .exp__photo-win picture,
  .exp__photo--morning .exp__photo-win picture {
    overflow: hidden;
    border-radius: calc(4 * var(--u));
  }

  .exp__h--sunset  { --x: 42.54; --y: 195.07; --w: 191.22; --h: 28.66; }
  .exp__h--night   { --x: 40.36; --y: 955.07; --w: 217.23; --h: 27.96; }
  .exp__h--morning { --x: 41.15; --y: 1777.30; --w: 193.72; --h: 28.21; }

  .exp__sub--sunset  { --x: 44.45; --y: 236.04; --w: 257.46; --h: 49.78; }
  .exp__sub--night   { --x: 41.27; --y: 994.83; --w: 285.57; --h: 51.28; }
  .exp__sub--morning { --x: 42.13; --y: 1817.59; --w: 281.40; --h: 50.01; }

  .exp__body p > .t,
  .exp__promo p > .t,
  .exp__list > .t { --fs: 16; --lh: 19; }
  .exp__body-pc,
  .exp__promo-pc { display: none !important; }
  .exp__body-sp,
  .exp__promo-sp { display: block !important; }
  .exp__body--sunset  {
    --x: 39.35; --y: 298.30; --w: 294.61;
    width: calc(294.61 * var(--u));
  }
  .exp__body--sunset p > .t,
  .exp__body--night p > .t,
  .exp__body--morning p > .t { --lh: 22.5; }
  .exp__body--night   {
    --x: 39.30; --y: 1057.56; --w: 305.70;
    width: calc(305.70 * var(--u));
  }
  .exp__body--morning {
    --x: 39.50; --y: 1880.33; --w: 305.50;
    width: calc(305.50 * var(--u));
  }
  .exp__body--night .exp__body-sp > .t,
  .exp__body--morning .exp__body-sp > .t {
    display: block;
    white-space: normal;
  }
  .exp__promo--sunset { --x: 39.68; --y: 500.10; }
  .exp__promo--sunset p > .t { --lh: 21.28; }

  .exp__badge--sunset  { --x: 38.69; --y: 454.16; --w: 113.21; --h: 33.04; }
  .exp__badge--night   { --x: 38.69; --y: 1169.66; }
  .exp__badge--morning { --x: 38.69; --y: 1963.75; }
  .exp__badge-t--sunset  { --x: 58.14; --y: 461.93; --w: 74.77; --h: 16.05; }
  .exp__badge-t--night   { --x: 66.89; --y: 1177.37; --w: 56.34; --h: 16.19; }
  .exp__badge-t--morning { --x: 66.89; --y: 1971.46; --w: 56.34; --h: 16.18; }

  .exp__list--night.exp__list--l,
  .exp__list--night.exp__list--r { display: none !important; }
  .exp__list--night.exp__list--sp {
    display: block !important;
    --x: 41.04; --y: 1216.01; --w: 303.96;
    width: calc(303.96 * var(--u));
  }
  .exp__list--night.exp__list--sp > .t { --lh: 22.5; white-space: normal; }
  .exp__list--morning {
    --x: 41.04; --y: 2010.16; --w: 303.96;
    width: calc(303.96 * var(--u));
  }
  .exp__list--morning > .t { --lh: 22.5; white-space: normal; }

  /* ---- セクション9 SP。原点: 375列 (Figma 271.61, 7986.986) ---- */
  .access__stage { height: calc(1386 * var(--u)); }
  .access__col   { --w: 375; --h: 1386; }
  .access__blue  { --x: -35.08; --y: -163.20; --w: 447.12; --h: 440; }
  .access__sides {
    --x: -1.61; --y: -3328.99; --w: 377; --h: 3557;
    background-image: url(../assets/bg/sides-sp.webp);
  }
  .access__cream {
    --x: -35.08; --y: -163.20; --w: 447.12; --h: 1554.24;
    background-image: url(../assets/bg/wave-cream-sp.webp);
  }

  .access__br--l {
    --x: 108.29; --y: -30.54; --w: 10.22; --h: 23.61;
    background-image: url(../assets/access/bracket-l.svg);
  }
  .access__br--r {
    --x: 256.49; --y: -30.54; --w: 10.22; --h: 23.61;
    background-image: url(../assets/access/bracket-r.svg);
  }

  .access__br { display: none; }
  .access__tag { --x: 109.29; --y: -32.20; --w: 158.42; --h: 25.27; }
  .access__h { --x: 34.72; --y: 9.69; --w: 307.69; --h: 80.58; }

  .access__body-pc { display: none !important; }
  .access__body-sp { display: block !important; }
  .access__body > .t { --fs: 16; --lh: 19; }
  .access__body-sp--1 { --x: 19.06; --y: 130.98; }
  .access__body-sp--2 { --x: 19.06; --y: 154.98; }
  .access__body-sp--3 { --x: 19.06; --y: 178.98; }
  .access__body-sp--4 { --x: 19.06; --y: 202.98; }

  .access__navy { --x: -34.36; --y: 710.48; --w: 446.40; --h: 674.96; }
  .access__fw {
    --x: 1.73; --y: 718.48; --w: 374.27; --h: 654.96;
    background-image: url(../assets/bg/fw-sp.webp);
  }

  .access__en { display: block; }
  .access__en--1 { --x: 8.42; --y: 729.88; --w: 121.69; --h: 55.42; }
  .access__en--2 { --x: 63.92; --y: 732.51; --w: 120.42; --h: 64.27; }
  .access__vpanel {
    --x: -12.28; --y: 860.64; --w: 196.32; --h: 318;
    --iw: 106; --ih: 278;
    --bw: 11;
    --notch: 10;
    --hole-y: 28;
    --hole-r: 9;
  }
  .access__vpanel-t { --x: 73.46; --y: 84; --w: 47.08; --h: 168; }

  .access__photo--fw { --x: 157.91; --y: 971.24; --w: 199.34; --h: 121.58; }
  .access__photo--fw .access__photo-img { --x: -40.74; --y: -46.88; --w: 254.15; --h: 211.68; }
  .access__photo--night { --x: 220.08; --y: 1104.41; --w: 137.18; --h: 72.24; }
  .access__photo--night .access__photo-img { --x: -5.33; --y: -13.10; --w: 147.14; --h: 98.27; }
  .access__photo--hanabi { --x: 20.47; --y: 742.53; --w: 336.78; --h: 218.29; }
  .access__photo--hanabi .access__photo-img { --x: -9.90; --y: -7.48; --w: 352.26; --h: 234.92; }
  .access__beach { --x: 11.72; --y: 251.52; --w: 353.76; --h: 216.24; }
  .access__beach-win {
    width: calc(337.5 * var(--u));
    height: calc(200 * var(--u));
  }
  .access__tape--beach { --x: 282.40; --y: 232.04; --w: 98.42; --h: 77.15; }
  .access__tape--jr-tl { --x: -16.29; --y: -19.13; --w: 67.96; --h: 72.05; }
  .access__tape--jr-br { --x: 284.63; --y: 97.18; --w: 75.08; --h: 71.51; }
  .access__tape--fw-tl { --x: -22.17; --y: -19.78; --w: 75.08; --h: 71.51; }
  .access__tape--fw-br { --x: 285.70; --y: 93.81; --w: 67.96; --h: 72.05; }

  .access__cta--jr,
  .access__cta--fw { --cut: 10; }
  .access__cta--jr { --x: 19.36; --y: 506.88; --w: 337.68; --h: 149.76; }
  .access__cta-dash--pc { display: none; }
  .access__cta-dash--sp { display: block; }
  .access__cta--fw { --x: 19.36; --y: 1189.60; --w: 337.68; --h: 150; }

  .access__cta-tag { --x: 67.51; --y: 30.85; --w: 196.64; --h: 18.37; }
  .access__cta-main--jr { --x: 57.90; --y: 60.71; --w: 223.59; --h: 62.17; }
  .access__cta-main--fw { --x: 57.53; --y: 40.75; --w: 215.18; --h: 68.33; }
  .access__cta-fw-ico {
    display: block;
    --x: 57.71; --y: 44.67; --w: 26.91; --h: 26.92;
    z-index: 3;
  }
  .access__cta-play { --x: 285.66; --y: 58.85; --w: 32; --h: 32; }
  .access__cta--fw .access__cta-play { --y: 61.20; }

  /* ---- セクション10 SP。原点: 375列 (Figma 271.61, 9406.389) ---- */
  .sns__stage { height: calc(794.88 * var(--u)); }
  .sns__col   { --w: 375; --h: 794.88; }
  .sns__orange { --x: -35.08; --y: 288.36; --w: 447.12; --h: 542.64; }

  .sns__oval {
    --x: 19.15; --y: 364.57; --w: 338.10; --h: 200;
    border-radius: calc(100 * var(--u));
  }
  .sns__oval-img { --x: -7.29; --y: -82.32; --w: 417.62; --h: 278.42; }

  .sns__enjoy { --x: 12.03; --y: 358.35; --w: 128.90; --h: 63.79; }
  .sns__summer { --x: 302.27; --y: 368.29; --w: 54.99; --h: 174.54; }

  .sns__ig-circle { --x: 29.27; --y: 34; --w: 115.7; --h: 115.7; }
  .sns__ig-logo { --x: 50.26; --y: 54.55; --w: 71.74; --h: 69.61; }
  .sns__ig-icon { --x: 167.54; --y: 45.07; --w: 33.79; --h: 33.79; }
  .sns__ig-word { --x: 206.82; --y: 45.63; --w: 139.92; --h: 39.70; }
  .sns__ig-list {
    --x: 18.75; --y: 170.29; --w: 337.51; --h: 61.99;
    gap: calc(6.15 * var(--u));
  }
  .sns__ig-list li {
    width: calc(61.99 * var(--u));
    height: calc(61.99 * var(--u));
  }

  .sns__ig-t > .t { --fs: 16; --lh: 24; }
  .sns__ig-t--1 { --x: 166.54; --y: 90.69; }
  .sns__ig-t--2 { --x: 166.54; --y: 114.69; }

  .sns__more { --x: 142.48; --y: 252.28; --w: 90.04; --h: 32.29; }
  .sns__more > .t { --fs: 13; --lh: 16; }
  .sns__more-ico {
    width: calc(7.88 * var(--u));
    height: calc(7.89 * var(--u));
  }

  .sns__cta {
    --cut: 10;
    --x: 19.12; --y: 605.16; --w: 337.68; --h: 149.76;
  }
  .sns__cta-dash--pc { display: none; }
  .sns__cta-dash--sp { display: block; }
  .sns__cta-now { --x: 125.32; --y: 43.04; --w: 90.42; --h: 18.88; }
  .sns__cta-main { --x: 64.56; --y: 68.26; --w: 209.37; --h: 31.57; }
  .sns__cta-play { --x: 284.75; --y: 58.93; --w: 32; --h: 32; }
  .sns__tape--tl { --x: 0.01; --y: 592.82; --w: 67.96; --h: 72.05; }
  .sns__tape--br { --x: 298.33; --y: 702.09; --w: 75.08; --h: 71.51; }

  /* ---- セクション11 SP。原点: 375列 (Figma 271.61, 10167.269) ---- */
  .ftr__stage { height: calc(374.06 * var(--u)); }
  .ftr__col   { --w: 375; --h: 374.06; }

  .ftr__logo { --x: 129.45; --y: 40.72; --w: 116.09; --h: 112.57; }

  .ftr__name { --x: 108.82; --y: 188.30; }
  .ftr__name > .t { --fs: 28; --lh: 34; }

  .ftr__addr { --x: 43.62; --y: 229.32; }
  .ftr__addr > .t { --fs: 16; --lh: 19; }

  .ftr__sns {
    --x: 93.06; --y: 266.80; --w: 188.88; --h: 34.16;
  }

  .ftr__copy { --x: 83.50; --y: 318.06; }
  .ftr__copy > .t { --fs: 16; --lh: 19; }
}