@charset "UTF-8";

/* ==========================================================
   Base
   ========================================================== */
:root {
  --c-sky: #a9ddf7;
  --c-navy: #0a4ea2;
  --c-yellow: #ffe600;
  --c-ink: #231815;
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-sky);
  color: var(--c-ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }
h1, p { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================
   FV
   デザインは FVイメージ(幅1076px) の座標をそのまま使う。
   各パーツは style="--x --y --w" に座標と幅(px)を指定する。
   ========================================================== */
.fv {
  /* 中身の幅：スマホは画面幅、PCは画面の高さに収まる大きさ（最大900px） */
  --sw: max(min(100vw, 900px, 100svh * 1076 / 1370), min(100vw, 560px));
  --sh: calc(var(--sw) * 1370 / 1076);
  position: relative;
  overflow: hidden;
  /* 背景：回さずに止めておく。ドットの輪の中心が FVイメージの y=625 に来るように置く */
  background: var(--c-sky) url("../img/FV背景.png") 50% calc(var(--sw) * (625 / 1076 - .495 * 1.357 * 1.8)) / calc(var(--sw) * 1.8) auto no-repeat;
}

/* 回るドット柄：下の止まっている背景と同じ大きさ・位置に重ねて、
   下の背景のドットの輪が透けて見えないようにしている（外側だけぼかしてなじませる） */
.fv__bg {
  position: absolute;
  top: calc(var(--sw) * 625 / 1076);
  left: 50%;
  width: calc(var(--sw) * 1.8);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: url("../img/FV背景.png") 50% 48% / cover no-repeat;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 85%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 85%, transparent 100%);
  animation: fv-spin 120s linear infinite;
}

@keyframes fv-spin { to { rotate: 360deg; } }

.fv__stage {
  position: relative;
  width: var(--sw);
  aspect-ratio: 1076 / 1370;
  margin-inline: auto;
  container-type: inline-size;
}

.fv-item {
  --u: calc(100cqw / 1076);
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}

.fv-item img { width: 100%; }
.fv-confetti { pointer-events: none; }

/* 画像の右下にあるピンクの流れ星は、参考の見本にないので出さない */
.fv-confetti--main {
  clip-path: polygon(0 0, 100% 0, 100% 86%, 72% 86%, 72% 100%, 0 100%);
}

/* 切り抜き写真の白フチ（チラシのステッカー風） */
.fv-outline {
  --o: calc(4 * var(--u));
  filter:
    drop-shadow(var(--o) 0 0 #fff)
    drop-shadow(calc(var(--o) * -1) 0 0 #fff)
    drop-shadow(0 var(--o) 0 #fff)
    drop-shadow(0 calc(var(--o) * -1) 0 #fff);
}

/* --- リード文 --- */
.fv__lead {
  --u: calc(var(--sw) / 1076);
  position: relative;
  width: var(--sw);
  margin: calc(-10 * var(--u)) auto 0;
  padding: 0 calc(40 * var(--u)) calc(90 * var(--u));
  color: var(--c-navy);
  /* サイコロチャレンジの小さい文(.en__text)と同じ丸ゴシック */
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 800;
  font-size: max(calc(30 * var(--u) + 2px), 16px);
  /* 白フチ */
  text-shadow:
     2px  0   0 #fff, -2px  0   0 #fff,  0  2px 0 #fff,  0 -2px 0 #fff,
     2px  2px 0 #fff, -2px  2px 0 #fff,  2px -2px 0 #fff, -2px -2px 0 #fff,
     1px  2px 0 #fff, -1px  2px 0 #fff,  1px -2px 0 #fff, -1px -2px 0 #fff,
     2px  1px 0 #fff, -2px  1px 0 #fff,  2px -1px 0 #fff, -2px -1px 0 #fff;
  line-height: 1.55;
  letter-spacing: .08em;
  text-align: center;
}

/* スマホだけ改行 */
.u-sp { display: none; }

@media (max-width: 600px) {
  .u-sp { display: inline; }
}

/* --- 会場帯のテキスト --- */
.fv-venue__text {
  position: absolute;
  left: 4.1%;
  top: 59%;
  display: grid;
  gap: calc(6 * var(--u));
  color: #fff;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .02em;
  white-space: nowrap;
}

.fv-venue__name {
  color: var(--c-yellow);
  font-size: calc(33 * var(--u));
}

.fv-venue__name small {
  color: #fff;
  font-size: calc(22 * var(--u));
}

/* 住所：110%に大きくして、右の「お客様駐車場完備」と縦の中心をそろえる
   （「お客様駐車場完備」の中心は、帯の画像の上から 242.7、この文字ブロックの上端は 171.1 の位置） */
.fv-venue__addr {
  position: absolute;
  left: 0;
  top: calc(71.6 * var(--u));
  translate: 0 -50%;
  font-size: calc(26.4 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}

/* ==========================================================
   FV アニメーション
   昨年(21周年)の絵コンテと同じ流れ：
   写真が中央から1枚ずつ飛び出す → ロゴ(雲＋タイトル)がズーム → 全体
   → 最後にリボン・星が中央から飛び出して止まる
   ========================================================== */
.js .fv-item { opacity: 0; }

/* 写真・リボン・星：中央から飛び出す（--dx --dy は main.js が設定） */
.is-play .fv-pop { animation: fv-pop .75s var(--ease-back) var(--d) both; }
.is-play .fv-burst { animation: fv-pop .7s var(--ease-out) var(--d) both; }

@keyframes fv-pop {
  0%   { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.15) rotate(-12deg); }
  25%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ロゴ：ズームイン */
.is-play .fv-logo { animation: fv-zoom .8s var(--ease-back) var(--d) both; }

@keyframes fv-zoom {
  0%   { opacity: 0; transform: scale(.3); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* 会場：下からせり上がる */
.is-play .fv-venue { animation: fv-rise .7s var(--ease-out) var(--d) both; }

@keyframes fv-rise {
  from { opacity: 0; transform: translateY(calc(60 * var(--u))); }
  to   { opacity: 1; transform: none; }
}

/* 家族：その場でポンと出る */
.is-play .fv-bounce {
  transform-origin: 50% 100%;
  animation: fv-bounce .55s var(--ease-back) var(--d) both;
}

@keyframes fv-bounce {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: none; }
}

/* リード文：最後にふわっと */
.js .fv__lead { opacity: 0; }
.is-play .fv__lead { animation: fv-rise .8s var(--ease-out) 5.2s both; }

/* ふきだし：ポンと出て、ときどき揺れる */
.is-play .fv-balloon {
  transform-origin: 20% 90%;
  animation:
    fv-balloon .6s var(--ease-back) var(--d) both,
    fv-wiggle 4s ease-in-out calc(var(--d) + 3s) infinite;
}

@keyframes fv-balloon {
  from { opacity: 0; transform: scale(0) rotate(-20deg); }
  to   { opacity: 1; transform: none; }
}

@keyframes fv-wiggle {
  0%, 82%, 100% { transform: none; }
  86% { transform: rotate(-5deg) scale(1.04); }
  90% { transform: rotate(4deg) scale(1.04); }
  94% { transform: rotate(-2deg); }
}

/* 登場後：写真がふわふわ浮く */
.fv-float { animation: fv-float 3.2s ease-in-out infinite; }
.fv-pop:nth-child(3) .fv-float { animation-delay: -.8s; }
.fv-pop:nth-child(4) .fv-float { animation-delay: -1.6s; }
.fv-float--car { animation: fv-car 1.6s ease-in-out infinite; }

@keyframes fv-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

@keyframes fv-car {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: 0 -3px; rotate: -.6deg; }
}

/* 動きを減らす設定の人には静止画で表示 */
@media (prefers-reduced-motion: reduce) {
  .fv *, .fv__bg { animation: none !important; }
  .js .fv-item, .js .fv__lead { opacity: 1; }
}

/* ==========================================================
   イベント内容
   ========================================================== */
.event {
  --gutter: 25px;
  padding: 24px var(--gutter) 64px;
}

/* 青リボンの見出し（スマホ 330×60） */
.ribbon-title {
  position: relative;
  display: grid;
  place-items: center;
  width: 330px;
  max-width: 100%;
  height: 60px;
  margin: 0 auto 28px;
  color: #fff;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .12em;
  line-height: 1;
}

.ribbon-title svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ribbon-title span { position: relative; }

/* ----------------------------------------------------------
   キッチンカー
   座標は見本(幅633px)基準。各パーツは --x --y --w で配置。
   見出し・各日のブロックはそれぞれの幅に合わせて拡大縮小する
   ---------------------------------------------------------- */
.kc {
  width: min(100%, 594px);
  margin-inline: auto;
  padding-block: 1% 5%;
  border-radius: 28px;
  background: #ee7800;
  container-type: inline-size;
}

.kc__head,
.kc-day {
  position: relative;
  aspect-ratio: 633 / var(--h);
  container-type: inline-size;
}

.kc__head > *,
.kc-day > *,
.kc-day__body > * {
  --k: calc(100cqw / 633);
  position: absolute;
  left: calc(var(--x) * var(--k));
  top: calc(var(--y) * var(--k));
  width: calc(var(--w) * var(--k));
  margin: 0;
}

.kc__title img,
.kc-day__badge img,
.kc-photo > img { display: block; width: 100%; height: auto; }

/* 写真の影（画像の影に重ねて濃くする） */
.kc-photo > img { filter: drop-shadow(calc(4 * var(--k)) calc(6 * var(--k)) calc(6 * var(--k)) rgba(0, 0, 0, .4)); }

.kc__head   { --h: 505; }
.kc__title  { --x: 22;  --y: 0;   --w: 606; z-index: 1; }
.kc__family { --x: 68;  --y: 230; --w: 140; z-index: 1; }
.kc__car    { --x: 184; --y: 203; --w: 437; }

/* 日付・商品名・写真のかたまり */
.kc-day__body {
  --x: 0;
  --y: 0;
  --w: 633;
  height: 100%;
  transform-origin: 50% 0;
}

/* 日付バッジは写真より手前 */
.kc-day__badge,
.kc-day__sub { z-index: 2; }

.kc-day--1 { --h: 715; }
.kc-day--1 .kc-day__badge { --x: 38;  --y: 9;   --w: 500; }
.kc-photo--yakisoba       { --x: 83;  --y: 60;  --w: 432; }
.kc-day--1 .kc-day__sub   { --x: 293; --y: 318; --w: 287; }
.kc-photo--takoyaki       { --x: 145; --y: 370; --w: 411; }
.kc-day--1 .kc-day__shop  { --y: 615; }

.kc-day--2 { --h: 630; }
.kc-day--2 .kc-day__badge { --x: 38;  --y: 4;   --w: 507; }
.kc-photo--waffle         { --x: 67;  --y: 76;  --w: 549; }
.kc-day--2 .kc-day__shop  { --y: 532; }

.kc-day--3 { --h: 640; }
.kc-day--3 .kc-day__badge { --x: 38;  --y: 0;   --w: 538; }
.kc-photo--donut          { --x: 63;  --y: 100; --w: 536; }
.kc-day--3 .kc-day__shop  { --y: 548; }

/* 店名：昨年と同じく写真の下に、白文字＋黒フチ */
.kc-day__shop {
  --x: 0;
  --w: 633;
  --s: calc(5 * var(--k));
  color: #fff;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 800;
  font-size: calc(58 * var(--k));
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
  text-shadow:
    var(--s) 0 0 var(--c-ink), calc(var(--s) * -1) 0 0 var(--c-ink),
    0 var(--s) 0 var(--c-ink), 0 calc(var(--s) * -1) 0 var(--c-ink),
    calc(var(--s) * .7) calc(var(--s) * .7) 0 var(--c-ink), calc(var(--s) * -.7) calc(var(--s) * .7) 0 var(--c-ink),
    calc(var(--s) * .7) calc(var(--s) * -.7) 0 var(--c-ink), calc(var(--s) * -.7) calc(var(--s) * -.7) 0 var(--c-ink);
}

.kc__note {
  margin: 0;
  color: var(--c-ink);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 5cqw, 28px);
  text-align: center;
}

/* 写真：画面の下から30%の位置まで来たら、半回転しながら下から上がってくる */
.js .kc-photo > * {
  opacity: 0;
  transform: translateY(60%) rotate(-180deg) scale(.6);
}

.js .kc-photo.is-in > * {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s ease-out,
    transform 1s var(--ease-back);
}

/* iPad以上：1〜3日目を横に並べる */
@media (min-width: 768px) {
  .event { padding-top: 48px; }

  .ribbon-title {
    width: 440px;
    height: 80px;
    font-size: 34px;
  }

  .kc {
    width: min(100%, 1100px);
    padding: 2% 3% 3%;
    border-radius: 40px;
  }

  .kc__head {
    width: min(100%, 460px);
    margin-inline: auto;
  }

  .kc-days {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5%;
    align-items: start;
    margin-top: 2%;
  }

  /* 日付・商品名・写真を115%に拡大（店名はその下へ） */
  .kc-day__body { transform: scale(1.15); }
  .kc-day--1 { --h: 810; }
  .kc-day--2 { --h: 713; }
  .kc-day--3 { --h: 725; }
  .kc-day--1 .kc-day__shop { --y: 710; }
  .kc-day--2 .kc-day__shop { --y: 615; }
  .kc-day--3 .kc-day__shop { --y: 633; }

  .kc__note {
    margin-top: 2%;
    font-size: clamp(15px, 2cqw, 22px);
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .kc-photo > * { opacity: 1; transform: none; }
}

/* ==========================================================
   モルック体験・縁日
   黄色いカードの青いフチの左右を、キッチンカーのオレンジ枠にそろえる
   ========================================================== */
.play {
  --gutter: 25px;
  display: grid;
  gap: 48px;
  padding: 40px var(--gutter) 72px;
  background: #5bb8e6;
}

/* 黄色いカード：モルック体験の画像と同じ形（上と左は細い青、右と下は太い青） */
.pcard {
  position: relative;
  width: min(100%, 594px);
  margin-inline: auto;
  padding: .6% 2.4% 4.4% 1%;
}

/* 黄色い枠・青いフチ・ドット影は1枚の画像（waku.png）。
   画像の青フチ(幅1282/高さ1297)がカードに重なり、ドット影は右下にはみ出す */
.pcard__waku {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: calc(100% * 1314 / 1282);
  height: calc(100% * 1345 / 1297);
  max-width: none;
}

.pcard__inner { position: relative; }

/* 縁日カードの中身：タイトル文字・風景写真・人物をカードの幅に対する割合で置く */
.en__part { position: absolute; margin: 0; }
.en__part, .en__part img { display: block; }
.en__title img { width: 100%; }
.en__photo { z-index: 0; }
.en__title { z-index: 1; }
.en__person { z-index: 2; }
.en__text { z-index: 3; }

.play { isolation: isolate; }

/* --- モルック体験 ---
   画像の青い枠（左端x=3〜右端x=1060／画像幅1092）をオレンジ枠の幅にそろえる */
.mkcard {
  position: relative;
  width: min(100%, 594px);
  margin: 22% auto 0;
}

.mkcard__img {
  width: calc(100% * 1092 / 1057);
  max-width: none;
  margin-left: calc(100% * -3 / 1057);
}

.mkcard__balloon {
  position: absolute;
  left: 29.5%;
  top: -20%;
  z-index: 1;
  width: 70.9%;
}

/* iPad以上の横長画像（スマホでは使わない）
   画像の青い枠（左端x=10〜右端x=1215／画像幅1254）をカードの幅にそろえる */
.mkcard__wide {
  display: none;
  width: calc(100% * 1254 / 1206);
  max-width: none;
  margin-left: calc(100% * -10 / 1206);
}

/* --- 縁日 --- */
.play__ennichi {
  display: grid;
  gap: 48px;
}

.en {
  --m: calc(100cqw / 559);
  position: relative;
  aspect-ratio: var(--ar);
  container-type: inline-size;
}

.en h3 { margin: 0; }
.en h3 img { width: 100%; }

.en__text {
  --m: calc(100cqw / 559);
  position: absolute;
  left: var(--x);
  top: var(--y);
  margin: 0;
  color: var(--c-ink);
  /* モルック体験の「小さなお子さまも…」と同じ丸ゴシック＋白フチ */
  --s: 2px;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 800;
  /* スマホ：iPhone SE(375px)で16px → iPhone 16 Pro(402px)以上で19px */
  font-size: clamp(16px, 16px + (100vw - 375px) * 3 / 27, 19px);
  line-height: 1.4;
  letter-spacing: .1em;
  white-space: nowrap;
  text-shadow:
    var(--s) 0 0 #fff, calc(var(--s) * -1) 0 0 #fff, 0 var(--s) 0 #fff, 0 calc(var(--s) * -1) 0 #fff,
    calc(var(--s) * .7) calc(var(--s) * .7) 0 #fff, calc(var(--s) * -.7) calc(var(--s) * .7) 0 #fff,
    calc(var(--s) * .7) calc(var(--s) * -.7) 0 #fff, calc(var(--s) * -.7) calc(var(--s) * -.7) 0 #fff;
}

/* iPad以上：モルックは中身を中央に、縁日は3つ横並び */
@media (min-width: 768px) {
  .play { padding-top: 56px; }

  .pcard { width: min(100%, 1100px); }

  /* モルック：見本の横長レイアウト。青いフチの左右が、
     サイコロチャレンジ・ヨーヨー釣りのカードの真ん中に来る幅（3列の1列分を引いた幅） */
  .mkcard {
    --mw: calc(min(100vw - 2 * var(--gutter), 1100px) * (1 - (1 - .05) / 3));
    width: var(--mw);
    margin: 0 auto;
  }

  .mkcard__balloon,
  .mkcard__img { display: none; }

  .mkcard__wide { display: block; }

  .play__ennichi {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5%;
    width: min(100%, 1100px);
    margin-inline: auto;
  }

  .play__ennichi .pcard { width: 100%; }

  .en__text { font-size: 16px; }

  /* 16pxだとカードからはみ出すので、右端にそろえて字間を詰める */
  .en__text--yoyo {
    left: auto;
    right: 3%;
    top: 24%;
    letter-spacing: .04em;
  }
}

/* ==========================================================
   住まいの相談会・会場案内・フッター
   背景はキッチンカーのセクションと同じ水色
   ========================================================== */
.info {
  --gutter: 25px;
  padding: 56px var(--gutter) 64px;
  background: var(--c-sky);
}

.info__inner {
  display: grid;
  gap: 56px;
  width: min(100%, 594px);
  margin-inline: auto;
}

/* 相談会：画像の枠の左端（x=47）〜黄色い側面の右端（x=592）を、オレンジ枠の幅にそろえる（画像幅626） */
.soudan img {
  width: calc(100% * 626 / 545);
  max-width: none;
  margin-left: calc(100% * -47 / 545);
}

/* 地図・会場案内 */
.access {
  display: grid;
  justify-items: center;
  gap: 18px;
  container-type: inline-size;
}

.access__map {
  width: calc(100% * 1087 / 1075);
  max-width: none;
  margin-left: calc(100% * 12 / 1075);
}

.access__addr a { color: inherit; text-decoration: none; }

.access__addr {
  margin: 4px 0 0;
  color: var(--c-ink);
  font-weight: 900;
  font-size: clamp(18px, 6cqw, 30px);
  letter-spacing: .02em;
  white-space: nowrap;
}

.access__parking {
  width: 82%;
  margin: 0;
  padding: .45em 0 .5em;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-yellow);
  font-weight: 900;
  font-size: clamp(18px, 6cqw, 30px);
  letter-spacing: .04em;
  text-align: center;
}

/* フッター */
.footer {
  display: grid;
  place-items: center;
  padding: 40px 25px;
  background: #fff000;
}

.footer__logo { width: min(74%, 420px); }

/* iPad以上：相談会と地図を横並び */
@media (min-width: 768px) {
  .info__inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 5%;
    width: min(100%, 1100px);
  }

  /* 地図側の高さを相談会の枠に合わせる：
     上端＝枠の上端（画像のy=29）、下端＝黄色い側面の下端（y=498） */
  .access {
    contain: size;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5cqw;
    padding: calc(100% * 29 / 545) 0 calc(100% * 2 / 545);
  }

  /* 地図：枠を108%に拡大し、地図の枠の真ん中に、住所と黒い枠を縦にそろえる */
  .access .access__maplink {
    display: flex;
    flex: none;
    justify-content: center;
    width: 100%;
  }

  .access__map {
    width: calc(100% * .79 * 1.08);
    max-width: none;
    height: auto;
    margin-left: 0;
  }

  /* 住所と黒い枠の隙間を狭める */
  .access {
    gap: 1.5cqw;
  }

  .access__addr {
    margin: 0;
    line-height: 1.3;
  }

  .access__parking {
    margin-top: -.3em;
  }

  .access__addr,
  .access__parking { font-size: clamp(14px, 4.6cqw, 26px); }

  .footer { padding-block: 56px; }
}

/* 「今年もやってまいりました！」：矢印の向きに勢いよく飛び出す */
.is-play .fv-arrow {
  animation: fv-arrow .7s var(--ease-back) var(--d) both;
}

@keyframes fv-arrow {
  0%   { opacity: 0; transform: translate(calc(-14 * var(--u)), calc(30 * var(--u))) scale(.1) rotate(-8deg); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ==========================================================
   モルック体験・縁日：画面に入ったらふわっと登場
   ピンクのふきだしは最初から置いてあり、
   モルックの枠が位置に着いたら、バウンドで一瞬大きくなる
   ========================================================== */
.js .mkcard__img,
.js .mkcard__wide,
.js .pcard__waku,
.js .en__title,
.js .en__photo,
.js .en__text {
  opacity: 0;
  translate: 0 28px;
}

.js .mkcard.is-in .mkcard__img,
.js .mkcard.is-in .mkcard__wide,
.js .pcard.is-in .pcard__waku,
.js .pcard.is-in .en__title,
.js .pcard.is-in .en__photo,
.js .pcard.is-in .en__text {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity .9s ease-out var(--d0, 0s),
    translate .9s var(--ease-out) var(--d0, 0s);
}

/* 縁日が横に並ぶときは、左から順に */
.pcard:nth-child(2) { --d0: .15s; }
.pcard:nth-child(3) { --d0: .3s; }

/* 枠が先に出て、そのあとに文字と風景写真 */
.js .pcard.is-in .en__title,
.js .pcard.is-in .en__photo,
.js .pcard.is-in .en__text { transition-delay: calc(var(--d0, 0s) + .6s); }

/* 最後に人物が、半回転しながら下から上がってくる */
.js .en__person {
  opacity: 0;
  transform: translateY(40%) rotate(-100deg) scale(.6);
}

.js .pcard.is-in .en__person {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s ease-out calc(var(--d0, 0s) + 1.3s),
    transform 1s var(--ease-back) calc(var(--d0, 0s) + 1.3s);
}

.mkcard__balloon { transform-origin: 20% 90%; }

/* 枠が着いた（約.9秒後）あとに、ポンッと大きくなって戻る */
.js .mkcard.is-in .mkcard__balloon {
  animation: balloon-bounce .8s var(--ease-back) .9s both;
}

@keyframes balloon-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); }
  65%  { transform: scale(.95); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .js .mkcard__img, .js .mkcard__wide, .js .pcard__waku, .js .en__title, .js .en__photo, .js .en__text { opacity: 1; translate: none; }
  .js .en__person { opacity: 1; transform: none; }
  .js .mkcard.is-in .mkcard__balloon { animation: none; }
}

/* フッターのロゴはリンク */
.footer__link { display: block; width: min(74%, 420px); }
.footer__link .footer__logo { display: block; width: 100%; }

/* FVの黒い枠：枠全体（画像の下の約45%）をタップするとGoogleマップが開く */
.fv-venue__map {
  position: absolute;
  left: 0;
  top: 55%;
  z-index: 2;
  width: 100%;
  height: 45%;
}

/* 下の地図：タップするとGoogleマップが開く */
.access__maplink { display: block; width: 100%; }

/* ===== 予約導線（バナー・追従CTA・フォーム） ===== */
:root {
  --c-orange: #f15a24;
  --c-orange-dark: #d9481a;
  --c-alert: #d6301f;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ポップアップ表示中は背面をスクロールさせない */
body.pop-open { overflow: hidden; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----------------------------------------------------------
   プレゼント案内バナー（相談会・地図の下）
   ---------------------------------------------------------- */
.bnr-wrap {
  padding: 40px 25px;
  background: var(--c-sky);
}

/* 相談会・地図の下（.info の下余白64px）に続くので、上を詰める */
.bnr-wrap--3 { padding-top: 0; }

.bnr {
  display: block;
  width: min(100%, 594px);
  margin-inline: auto;
  border-radius: 4.5%/5.2%;
  transition: transform .25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.bnr img { width: 100%; }

@media (hover: hover) {
  .bnr:hover { transform: scale(1.02); }
}

.bnr:active { transform: scale(1.02); }

.bnr:focus-visible {
  outline: 4px solid var(--c-navy);
  outline-offset: 4px;
}

@media (min-width: 768px) {
  .bnr-wrap { padding-block: 48px; }
  .bnr-wrap--3 { padding-top: 0; }
  .bnr { width: min(100%, 640px); }
}

@media (prefers-reduced-motion: reduce) {
  .bnr { transition: none; }
  .bnr:hover, .bnr:active { transform: none; }
}

/* ----------------------------------------------------------
   オレンジのボタン（追従CTA・送信ボタン共通の見た目）
   ---------------------------------------------------------- */
.btn-cta,
.sticky-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--c-orange);
  color: #fff;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 4.4vw, 19px);
  line-height: 1.3;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--c-orange-dark), 0 8px 18px rgba(0, 0, 0, .22);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-arrow {
  flex: 0 0 auto;
  width: .7em;
  height: .8em;
}

.btn-cta:focus-visible,
.sticky-cta:focus-visible {
  outline: 3px solid var(--c-navy);
  outline-offset: 3px;
}

.btn-cta:disabled { opacity: .6; cursor: default; }

@media (hover: hover) {
  .btn-cta:not(:disabled):hover,
  .sticky-cta:hover { background: #f36c3a; }
}

/* ----------------------------------------------------------
   追従CTA（画面下中央に固定。確認モーダル(100)より下）
   ---------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: min(calc(100% - 32px), 480px);
  height: 56px;
  min-height: 0;
  padding: 0 14px;
  gap: 8px;
  font-size: clamp(15px, 4.2vw, 19px);
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 24px);
  transition: opacity .3s ease, transform .3s var(--ease-out), visibility 0s linear .3s;
}

.sticky-cta.is-show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .3s ease, transform .3s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta, .sticky-cta.is-show { transition: none; }
}

/* 追従CTAにフッターのロゴが隠れないよう、下に余白を足す */
.footer { padding-bottom: 96px; }

@media (min-width: 768px) {
  .footer { padding-bottom: 104px; }
}

/* ----------------------------------------------------------
   来場予約フォーム
   ---------------------------------------------------------- */
.reserve {
  --gutter: 25px;
  padding: 24px var(--gutter) 64px;
  background: var(--c-sky);
}

.reserve__lead {
  width: min(100%, 594px);
  margin: 0 auto 24px;
  color: var(--c-navy);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 800;
  text-align: center;
}

.reserve__catch {
  font-size: clamp(17px, 4.8vw, 22px);
  line-height: 1.6;
}

.reserve__catch b {
  color: var(--c-orange);
  font-weight: 900;
  background: linear-gradient(transparent 62%, var(--c-yellow) 62%);
}

.reserve__note {
  margin-top: 8px;
  color: var(--c-ink);
  font-size: 14px;
  line-height: 1.6;
}

.reserve__free {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 20px;
  border-radius: 999px;
  background: #fff;
  font-size: 16px;
}

.reserve__free b { color: var(--c-orange); font-weight: 900; }

.rsv-card {
  width: min(100%, 594px);
  margin-inline: auto;
  padding: 28px 18px 32px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(10, 78, 162, .14);
  color: var(--c-ink);
}

/* --- 入力欄 --- */
.rsv-card fieldset {
  min-width: 0;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.fld { margin: 0 0 22px; }

.lbl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 8px;
  padding: 0;
  color: var(--c-navy);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.4;
}

.slbl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
}

.fmt {
  color: #6a625e;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 13px;
}

.req,
.opt {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 5px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: .04em;
}

.req { background: var(--c-alert); }
.opt { background: #8a8380; }

.inp {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1.5px solid #c9d6e3;
  border-radius: 10px;
  background: #fff;
  color: var(--c-ink);
  font: inherit;
  font-size: 16px;
  letter-spacing: .02em;
  -webkit-appearance: none;
  appearance: none;
}

.inp::placeholder { color: #9aa3ad; }

.inp:focus {
  outline: none;
  border-color: var(--c-navy);
  box-shadow: 0 0 0 3px rgba(10, 78, 162, .2);
}

.inp[aria-invalid="true"] {
  border-color: var(--c-alert);
  background: #fff7f5;
}

.inp--sel {
  padding-right: 38px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a4ea2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat;
  cursor: pointer;
}

.inp--zip { max-width: 220px; }

.inp--ta {
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
  line-height: 1.7;
  resize: vertical;
}

.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hint {
  margin-top: 6px;
  color: #5d5754;
  font-size: 14px;
  line-height: 1.6;
}

.err {
  margin-top: 6px;
  color: var(--c-alert);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
}

.err[hidden] { display: none; }

.rsv-card .nb { display: inline-block; }

/* ご住所のまとまり */
.addr {
  padding: 16px 14px 2px;
  border-radius: 12px;
  background: #f1f8fd;
}

.addr .fld { margin-bottom: 16px; }

/* ラジオ：ボタン型 */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.seg--3 { grid-template-columns: repeat(3, 1fr); }

.seg label {
  position: relative;
  display: block;
  cursor: pointer;
}

.seg input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seg span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 4px;
  border: 1.5px solid #c9d6e3;
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}

.seg small { font-size: 13px; }

.seg input:checked + span {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: #fff;
}

.seg input:focus-visible + span {
  outline: 3px solid var(--c-yellow);
  outline-offset: 2px;
}

.seg input[aria-invalid="true"] + span { border-color: var(--c-alert); }

/* 来場人数 */
.people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.people__item {
  display: grid;
  gap: 6px;
}

.people__lbl {
  font-weight: 700;
  font-size: 15px;
}

/* 同意チェック */
.chk {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.7;
  cursor: pointer;
}

.chk input {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chk .box {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 2px solid #9fb1c4;
  border-radius: 6px;
  background: #fff;
}

.chk input:checked + .box {
  border-color: var(--c-navy);
  background: var(--c-navy);
}

.chk input:checked + .box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.chk input:focus-visible + .box {
  outline: 3px solid var(--c-yellow);
  outline-offset: 2px;
}

.chk input[aria-invalid="true"] + .box { border-color: var(--c-alert); }

.chk a { color: var(--c-navy); text-decoration: underline; }

.form-submit { margin-top: 28px; }

.form-submit .btn-cta { width: 100%; }

.form-note {
  margin-top: 12px;
  color: #5d5754;
  font-size: 13px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .reserve { padding: 48px var(--gutter) 80px; }
  .reserve__lead,
  .rsv-card { width: min(100%, 640px); }
  .rsv-card { padding: 40px 40px 44px; }
  .reserve__note br.u-sp { display: none; }
}

/* ----------------------------------------------------------
   確認モーダル・LP内サンクス
   ---------------------------------------------------------- */
.cfm {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 30px 14px 22px;
  background: rgba(10, 30, 60, .62);
}

.cfm.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cfm-frame {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.cfm-box {
  max-height: calc(100vh - 66px);
  max-height: calc(100dvh - 66px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 26px 16px 22px;
  border-radius: 20px;
  background: #fff;
  color: var(--c-ink);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  outline: none;
}

.pop-close {
  position: absolute;
  top: -16px;
  right: -6px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--c-navy);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pop-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
}

.pop-close:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; }

/* ステップ表示（矢印がつながる3段） */
.stepbar {
  display: flex;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.stepbar li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  margin-left: -9px;
  padding: 6px 6px 6px 15px;
  background: #d8ecfa;
  color: var(--c-navy);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}

.stepbar li:first-child {
  margin-left: 0;
  padding-left: 6px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

.stepbar li.now { background: var(--c-navy); color: #fff; }

.cfm-ttl {
  margin: 0;
  color: var(--c-navy);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.5;
  text-align: center;
}

.cfm-lead {
  margin: 8px 0 18px;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

.cfm-tbl {
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid #d5e2ee;
  border-radius: 10px;
}

.cfm-tbl table { width: 100%; border-collapse: collapse; }
.cfm-tbl tr + tr { border-top: 1px solid #d5e2ee; }

.cfm-tbl th {
  width: 38%;
  padding: 12px 10px;
  background: #f1f8fd;
  color: var(--c-navy);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cfm-tbl td {
  padding: 12px 10px;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.cfm-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cfm-actions .btn-cta { width: 100%; }

.cfm-back {
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  background: none;
  color: var(--c-navy);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
}

.ty {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 110;
  overflow-y: auto;
  background: var(--c-sky);
}

.ty.open { display: block; }

.ty .pop-close { position: fixed; top: 12px; right: 12px; }

.ty-in {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 64px 16px 32px;
}

.ty-card {
  width: 100%;
  max-width: 560px;
  padding: 20px 16px 32px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(10, 78, 162, .14);
  text-align: center;
}

.ty-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 8px auto 12px;
  border-radius: 50%;
  background: var(--c-navy);
  box-shadow: 0 0 0 7px #d8ecfa;
}

.ty-check svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ty-ttl {
  margin: 0 0 10px;
  color: var(--c-navy);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.5;
}

.ty-lead { font-size: 15px; line-height: 1.8; }

@media (min-width: 768px) {
  .cfm-box { padding: 30px 28px 26px; }
}

/* ===== 昨年のイベントの様子（ポラロイド） ===== */
.past {
  --gutter: 25px;
  padding: 24px var(--gutter) 48px;
  overflow-x: clip;
}

.past .ribbon-title { margin-bottom: 14px; font-size: 22px; letter-spacing: .08em; }

.past__lead {
  margin: 0 0 28px;
  color: var(--c-navy);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
/* 文の途中で1文字だけ折り返さないよう、句ごとに改行する */
.past__lead span { display: inline-block; }

.past__list {
  display: grid;
  gap: 28px;
  width: min(100%, 594px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* ポラロイド本体：白い厚紙の枠（上左右 4% / 下 14%） */
.polaroid {
  --rot: 0deg;
  --shift: 0px;
  position: relative;
  width: 88%;
  margin-inline: 0 auto;
  transform: translateY(var(--shift)) rotate(var(--rot));
}
.polaroid:nth-child(2) { margin-inline: auto 0; }

.polaroid figure {
  margin: 0;
  padding: 4% 4% 14%;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  position: relative;
}

.polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* 下の余白に手書き風キャプション */
.polaroid figcaption {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 14%;
  display: grid;
  place-items: center;
  color: var(--c-navy);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 4.2vw, 18px);
  letter-spacing: .04em;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(-1.5deg);
}

/* 上辺中央のマスキングテープ */
.polaroid::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 50%;
  width: 90px;
  height: 24px;
  background: color-mix(in srgb, var(--c-yellow) 72%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transform: translateX(-50%) rotate(-5deg);
}
.polaroid:nth-child(2)::before { transform: translateX(-50%) rotate(4deg); }

/* 登場アニメ（JS有効時のみ初期状態を透明に） */
.js .polaroid {
  opacity: 0;
  transform: translateY(calc(var(--shift) + 24px)) rotate(var(--rot)) scale(.96);
  transition:
    opacity .6s ease,
    transform .8s cubic-bezier(.34, 1.4, .64, 1);
}
.js .polaroid:nth-child(2) { transition-delay: .15s; }
.js .polaroid:nth-child(3) { transition-delay: .3s; }
.js .polaroid.is-in {
  opacity: 1;
  transform: translateY(var(--shift)) rotate(var(--rot)) scale(1);
}

@media (min-width: 768px) {
  .past { padding-top: 48px; }

  .past .ribbon-title { font-size: 29px; }
  .past__lead { font-size: 17px; margin-bottom: 40px; }

  .past__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 4%;
    width: min(100%, 1100px);
    padding-block: 8px 26px;
  }

  .polaroid,
  .polaroid:nth-child(2) { width: 100%; margin-inline: 0; }
  .polaroid:nth-child(2) { --shift: 18px; }

  .polaroid figcaption { font-size: clamp(13px, 1.5vw, 18px); }
}

@media (prefers-reduced-motion: reduce) {
  .js .polaroid {
    opacity: 1;
    transform: translateY(var(--shift)) rotate(var(--rot));
    transition: none;
  }
}