/* =============================================
   ココス 2026夏の福袋 LP — SP版
   Figma実数値に基づく実装
   ============================================= */

/* ---------- リセット ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ruby rt { user-select: none; }

/* Tuffy Bold（ポップアップボタンの「！」用。パブリックドメイン・同梱 fonts/tuffy-bold.woff2） */
@font-face {
  font-family: "Tuffy";
  src: url("../fonts/tuffy-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 変数 ---------- */
:root {
  --c-red:      #E60012;
  --c-navy:     #004098;
  --c-text:     #2F2F2F;
  --c-yellow:   #FFF896;
  --c-paleblue: #E0F7FF;
  --c-skyblue:  #C0ECFB;
  --c-white:    #FFFFFF;
  --maxw: 402px;
  --font-base: "Montserrat", "Zen Kaku Gothic New", sans-serif;
}

/* ---------- ベース ---------- */
html { -webkit-text-size-adjust: 100%; }
/* 地色。タイポグラフィは共通ヘッダ/フッタへ継承させないため body に置かない。 */
body {
  background: #cfcfcf;
}
/* LP本文・ポップアップのタイポ基準（字間ゼロ・palt 無し）。 */
.page,
.modal {
  font-family: var(--font-base);
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.7;
  letter-spacing: normal;
  font-feature-settings: normal;
}
/* 共通部（ヘッダ/メニュー/SNS/フッタ）の画像は inline（中央寄せ・vertical-align を維持）。 */
header img,
.sns_area img,
footer img {
  display: inline;
}
/* スケール用ラッパー。基準幅402pxの .page を画面幅に合わせて拡大/縮小する。
   幅・高さは JS が設定（SP=画面幅いっぱい / PC=最大750pxで中央固定）。 */
.page-fit {
  margin: 0 auto;
  overflow: hidden;
}
.page {
  position: relative;
  /* 基準幅は Figma 実数値の 402px 固定。実際の表示サイズは
     .page-fit 内で transform: scale() により制御する（js/main.js）。 */
  width: var(--maxw);
  transform-origin: top left;
  /* 日程の下〜受取方法エリアの背景（Figma bg 361:504）。
     画像セクションと黄色背景セクションがこの色を上書き・遮蔽する */
  background: var(--c-skyblue);
  overflow: hidden;
}

/* ---------- KV（Figma配置画像） ---------- */
.kv img {
  width: 100%;
}

/* ---------- COCOS共通ヘッダ / 共通フッタ（PC/SP別キャプチャ画像方式） ----------
   キャプチャ画像方式：依存ゼロの純粋な<img>。納品時はこのブロックごと
   COCOS支給コードに差し替え可能（TODO[納品時差し替え]）。
   ・SP(<750px): LP内と同じ「画面いっぱい」。SP用画像のみ表示。
   ・PC(≥750px): ブラウザ全幅（中央532pxの外＝body直下の全幅ブロック）。PC用画像のみ表示。
   出し分けは .is-pc / .is-sp の display 切替で行う（崩れにくく差し替えやすい）。 */
.site-header--global,
.site-footer--global {
  width: 100%;
}
.site-header--global img,
.site-footer--global img {
  width: 100%;
  height: auto;
}
/* 既定（SP, <750px）: SP画像を表示・PC画像を隠す */
.site-header--global .is-pc,
.site-footer--global .is-pc { display: none; }
.site-header--global .is-sp,
.site-footer--global .is-sp { display: block; }

/* =============================================
   日程（赤帯部分は1枚画像）
   ============================================= */
.schedule__pic { width: 100%; }
.schedule__notes {
  padding: 12px 21px 14px;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}
.schedule__notes li {
  padding-left: 1em;
  text-indent: -1em;
}
.schedule__notes li::before { content: "※"; }

/* =============================================
   休業情報
   ============================================= */
/* 前後間隔はFigma実値: 注記→箱=17(padding-top 3+注記padding14), 箱→詳細ロゴ=28 */
.closure {
  padding: 3px 21px 28px;
}
.closure__box {
  padding: 15px 21px 16px;
  background: var(--c-paleblue);
  border-radius: 20px;
}
.closure__lead {
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.03em;
}
.closure__lead--gap { margin-top: 7px; }
.closure__store {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.03em;
}

/* =============================================
   詳細
   ============================================= */
.detail {
  padding: 0 13px;
  /* Figma: 詳細フレーム→予約方法フレームの間隔 60px */
  margin-bottom: 60px;
}
.detail__logo {
  position: relative;
  z-index: 2;
  width: 232px;
  /* Figma上は中央でなく左寄せ（親フレーム"詳細"基準で x=9.78px）。
     .detail の padding-left=13px と合算で絶対x=23 となりFigmaと一致 */
  margin: 0 0 0 10px;
}
.detail__panel {
  position: relative;
  z-index: 1;
  margin-top: -49px;
  padding: 20px 0 40px;
}
/* アーチ枠（Figma Rectangle 48）。枠線＋白背景の独立レイヤー。
   コンテンツとは分離し、メインイラストだけ枠の外まで広げられるようにする */
.detail__frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* スカラップ枠（外縁が丸連なりの凸凹）はFigma書き出し画像 images/detail-frame.png(Rectangle 48)で再現。
     CSS border:solid では外縁の凸凹を描けないため画像化。白塗り＋黄スカラップ＋アーチ外透明を内包し、
     幾何は従来同様(外寸360px・黄帯約7px・白内側346px)。高さは内容に追従(背景100% 100%)、
     2026-06-08 ①③修正で内容増→Figma設計高1256→1306(360×1306,@2x=720×2612)に更新差し替え。
     スカラップ密度を新コンテンツ高に合わせ再書き出し済み。 */
  width: 360px;
  background: url("../images/detail-frame.png?v=20260608") no-repeat center / 100% 100%;
  z-index: 0;
}
.detail__heading {
  position: relative;
  z-index: 1;
  display: block;
  width: 299px;
  margin: 0 auto;
}
.detail__text {
  position: relative;
  z-index: 1;
  max-width: 286px;
  margin: 23px auto 0;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.03em;
}
.detail__illust {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 22px 0 6px;
}

/* 詳細：情報リスト */
.info {
  position: relative;
  z-index: 1;
  width: 300px;
  margin: 20px auto 0;
}
.info__item {
  padding: 22px 0;
  /* 真円の点線。Chrome系は border:dotted を四角で描くため radial-gradient で円化。
     高さは透明border(3px)で従来通り維持し、その上端帯に径3px/間隔3px(周期6px)の円を repeat-x。 */
  border-top: 3px solid transparent;
  background-image: radial-gradient(circle, var(--c-navy) 1.5px, transparent 1.6px);
  background-size: 6px 3px;
  background-position: 0 0;
  background-repeat: repeat-x;
}
/* Figma上は末尾の点線（node 361:809）が hidden。最後の区切り線は出さない */
.info__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--c-navy);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.info__head::before,
.info__head::after {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--c-navy);
  border-radius: 1px;
  transform: rotate(45deg);
}
.info__body {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
.info__body .n { font-size: 20px; font-weight: 600; }
.info__body .d { font-size: 17px; }
.info__body .t { font-size: 18px; }
.info__body .u { font-size: 15px; }
.info__body .s { font-size: 17px; }
.info__body--store {
  font-size: 19px;
  font-weight: 700;
}
.info__note {
  /* 現状6px→半分の3px */
  margin-top: 3px;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.03em;
}
.info__action {
  /* ※Airport Dining注釈の下マージン=22px（Figma 21.93px）＋指示で全体を10px下げ＝32px */
  margin-top: 32px;
  /* 2ボタンを縦積み・中央寄せ。ボタン間=14px（Figma 検索btn下端2355→一覧btn上端2369） */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.btn-search,
.btn-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figma: 両ボタンとも幅249px（info_4グループ幅）。SP極小幅では縮められるよう可変上限に */
  width: 249px;
  max-width: 100%;
  padding: 8px 34px;
  color: var(--c-white);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.03em;
  /* ボタン幅249pxは文字幅(181px)＋左右padding(34px)にFigmaが合わせて設計＝1行保証。
     デフォルト折返しだと「状況一覧」で改行されるため nowrap で1行固定 */
  white-space: nowrap;
  border-radius: 600px;
}
.btn-search {
  gap: 6px;
  background: var(--c-red);
}
/* 店舗ごとの販売状況一覧（旧テキストリンク→ボタン化 / Figma 583:450 #004098） */
.btn-status {
  background: var(--c-navy);
}
.i-search {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.i-search::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 2px;
  height: 6px;
  background: currentColor;
  border-radius: 1px;
  transform: rotate(-45deg);
}
/* =============================================
   予約方法・受取方法（共通フロー）
   ============================================= */
.flow {
  /* Figma: タイトル群はフレーム上端から開始（padding-top 0）。セクション間隔は margin で与える */
  padding: 0 21px 30px;
}
/* 予約方法step4ボックス→受取方法の間隔を52pxに（pb30＋margin22=52） */
.flow + .flow {
  margin-top: 22px;
}
.flow__title {
  color: var(--c-navy);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.08em;
}
.flow__wave {
  /* Figma実値: 花art 63.71×24.72px を 11.23°回転で配置(565:440)。
     旧wave.pngは傾きを画像に焼き込んでいたが、wave.svgは無回転ベクターのためCSSで回転を付与。
     比率は素の2.58を維持(縦に引き伸ばさない)。回転後のバウンディングは約67×36で従来表示と同等。 */
  width: 64px;
  height: 25px;
  /* Figma: 波線はタイトルに12px重なり、次要素まで14px。
     回転で視覚bbox(約37px)がレイアウトbox(25px)より上下6pxずつはみ出すため、
     その分を足して top -6 / bottom 20 とする（実効: 重なり12・下14）。 */
  margin: -6px auto 20px;
  transform: rotate(11.23deg);
}

/* ステップカード */
.step-card {
  display: flex;
  align-items: flex-start;
  /* Figma実値: バッジはカード左から30px、バッジ→本文は22px空ける */
  gap: 22px;
  padding: 27px 23px 27px 30px;
  background: var(--c-white);
  border: 1px solid #eef0f4;
  border-radius: 20px;
}
.step-arrow {
  display: block;
  width: 0;
  height: 0;
  margin: 5px auto;
  /* Figma(arrow 361:914)実値=16px×9pxの平たい▼（旧14×10より平べったい） */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid var(--c-navy);
}
.step-badge {
  flex-shrink: 0;
  width: 40px;
  height: 52px;
}
.step-card__main { flex: 1; }
.step-card__text {
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.03em;
}
.step-card__notes {
  margin-top: 12px;
  /* バッジ下の左スペースを使い切る: バッジ40px+gap22px=62px ぶん左へ広げ全幅化 */
  margin-left: -62px;
  font-size: 10px;
  line-height: 1.65;
  letter-spacing: 0.03em;
}
.step-card__notes li {
  padding-left: 1em;
  text-indent: -1em;
}
.step-card__notes li::before { content: "※"; }

/* ポップアップ起動ボタン（紺） */
.popup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 4px 20px 5px;
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 16px;
  border-radius: 600px;
}
.popup-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  background: var(--c-white);
  color: var(--c-navy);
  /* 「！」はFigma準拠でTuffy Bold・14px（白丸の上に紺） */
  font-family: "Tuffy", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
}

/* =============================================
   アイテム紹介
   ============================================= */
/* アイテム紹介〜お問い合わせはFigma上、黄色背景（#FFF896）＋装飾パターン（Figma image 27）。
   背景パターンは items/shopper/author/contact を包む .pattern-band 1枚に持たせ、
   セクション境界で振り出しに戻らず継ぎ目なく連続させる（旧: 各セクション個別適用で境界に継ぎ目が出ていた）。
   タイル寸法は Figma 準拠の 507px幅 × 779px高。
   ＝Figmaの instance「image 27」(361:919) が 507×779 でパターン画像(2016×3098)を
   object-cover 配置している実寸に合わせる（旧603×927はFigmaより約19%大きく疎らだった）。
   507/2016*3098≒778.9 を 779 に整数化し、両軸整数で repeat時のサブピクセル継ぎ目線も回避。
   パターン画像は bg-pattern-v2.png（元画像のアルファを0.9倍し濃度を約10%減）。 */
.pattern-band {
  background-color: var(--c-yellow);
  background-image: url("../images/bg-pattern-v2.png");
  background-repeat: repeat;
  /* 柄サイズを現状(507×779)の90%に縮小（整数化で継ぎ目回避）。位置は全体を左へ60px。 */
  background-size: 456px 701px;
  background-position: -60px 0;
}
.items {
  position: relative;
  /* Figma: 受取方法の最終カード下端→黄色エリア上端(波の頂)まで47px。
     前セクション(.flow)の padding-bottom 30px と合算で 47 になるよう margin-top=35 を足し、
     波バンド(高さ18=頂は.items上端の18px上)を引いた位置に頂が来る → 前セクションへの被りを解消。 */
  margin-top: 35px;
  /* padding-top=見出し上の空き。デザイン画像実測(帯上端→見出しグリフ83px − リーディング12px)で71px */
  padding: 71px 21px 36px;
}
/* アイテム紹介上端の雲形（スカラップ）境界飾り（Figma Vector 361:917）。
   SVGは1004×109px・波約11個の全幅パス。Figmaは x=-301 に置き402px窓で約4.5波を「クリップ」表示している。
   旧 background-size:100% 100% は全幅(約11波)を402pxに圧縮し、波が小さく多くなる不具合だった。
   自然サイズ(1004×109)＋ top center で Figma と同じ窓(約4.5波・振幅約17px)を再現する。 */
.items::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
  background: url("../images/scallop.svg") no-repeat top center;
  background-size: 1004px 109px;
}
.items__title {
  color: var(--c-navy);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.08em;
}
.item-list {
  display: flex;
  flex-direction: column;
  gap: 45px;
  margin-top: 16px;
}
.item-card {
  position: relative;
}
.item-card__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 20px;
}
.item-card__body {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  padding: 0 0 10px;
  background: var(--c-yellow);
  text-align: center;
}
.item-card__body > * + * { margin-top: 10px; }
.item-card__name {
  color: var(--c-red);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.8;
  letter-spacing: 0.03em;
}
.item-card__desc {
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.03em;
}
.item-card__spec {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
.item-card__notes {
  /* spec(500円×6枚…有効期間)テキスト下部に30pxの余白 */
  margin-top: 30px;
  font-size: 10px;
  line-height: 1.65;
  text-align: left;
  letter-spacing: 0.03em;
}
.item-card__notes li {
  padding-left: 1em;
  text-indent: -1em;
}
.item-card__notes li::before { content: "・"; }
/* 商品内の注意点ボタンはFigmaで本文から30px下（Frame9 361:973）。step-card側には影響させない */
.item-card .popup-btn { margin-top: 30px; }
/* step3「お会計時のご注意点」ボタン：白box(カード)の左右中心に配置し、上マージンを
   下の余白(card padding-bottom 27px)と同等にして上下対称に。
   主カラムはバッジ40+gap22ぶん右にあるため、translateXで左へ寄せカード中心に合わせる。 */
.step-card .popup-btn {
  display: flex;
  width: fit-content;
  margin: 27px auto 0;
  transform: translateX(-34.5px);
}

/* アイテム紹介：装飾イラスト（商品写真の角に重なる雲・植物） */
.item-deco {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
/* 装飾位置はFigma実値（get_metadata の各 Group 座標、写真上端基準）。
   商品2〜4は ill_n フレーム座標＋装飾のフレーム内座標の合算値 */
.item-deco--1r { top: -22px; left: 237px; width: 128px; }
.item-deco--1l { top: 273px; left: -12px; width: 89px; }
.item-deco--2r { top: -54px; left: 264px; width: 87px; }  /* ill_2: 20px+5px下げ(旧-79) */
.item-deco--2l { top: 265px; left: -18px; width: 95px; }  /* ill_2: 20px+5px下げ(旧240) */
.item-deco--3r { top: -36px; left: 258px; width: 119px; } /* ill_3: 5px下げ(旧-41) */
.item-deco--3l { top: 240px; left: 0;     width: 133px; } /* ill_3: 5px下げ(旧235) */
.item-deco--4r { top: -51px; left: 252px; width: 103px; } /* ill_4: 5px下げ(旧-56) */
.item-deco--4l { top: 283px; left: -6px;  width: 95px; }  /* ill_4: 5px下げ(旧278) */

/* =============================================
   ショッパー
   ============================================= */
.shopper {
  /* 左paddingを0にして画像左端をページ左端(x=0)へぴったり接地（Figma 361:1049 はx≈-5で左ブリード意図）。
     右/下は従来どおり。右の余白は画像右側に確保するため左0・右8で非対称に。 */
  padding: 26px 8px 30px 0;
}
.shopper__img {
  display: block;
  /* 左paddingを0にしたので width:100% で左端=ページ左端(0)。右端は従来同様(右padding 8px)を維持。 */
  width: 100%;
}
.shopper__note {
  width: 340px;
  margin: 14px auto 0;
  padding: 9px 12px;
  background: var(--c-yellow);
}
.shopper__spec {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
.shopper__cautions {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}
.shopper__cautions li {
  padding-left: 1em;
  text-indent: -1em;
}
.shopper__cautions li::before { content: "※"; }

/* =============================================
   作家紹介
   ============================================= */
.author {
  position: relative;
  /* Figma: ショッパー注釈ボックス底→作家セクション上端=59px。shopperのpadding-bottom 30pxが
     あるため、margin-topは29pxで合計59pxにする（58pxは広すぎた）。 */
  margin-top: 29px;
  /* padding-top=35: カード上端をフレーム上端から35px下に（top deco がフレーム上端=section上端に乗る）。
     padding-bottom=76: カード下〜フレーム下、bottom deco を内包 */
  padding: 35px 21px 76px;
}
.author__card {
  position: relative;
  z-index: 1;
  padding: 34px 30px;
  background: var(--c-white);
  border-radius: 30px;
}
.author__deco {
  position: absolute;
  z-index: 2;
}
/* Figma: illc(361:1092) はフレーム上端=section上端に乗る（padding-top 35 でカード上35px） */
.author__deco--top {
  top: 0;
  left: 39px;
}
/* Figma illb(361:1075): カード下端より76px張り出し・カード右から24px。
   .author padding-bottom=76 でフレーム下端に一致するため bottom=0 */
.author__deco--bottom {
  bottom: 0;
  right: 45px;
}
.author__head {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin-bottom: 23px;
}
.author__role {
  color: var(--c-navy);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.author__name {
  color: var(--c-navy);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.author__name rt {
  font-size: 9px;
  font-weight: 700;
}
.author__bio {
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

/* ---------- お問い合わせCTA ---------- */
.contact {
  /* Figma: 作家フレーム下端→CTA は 25px。下=ボタン〜フッター間60px */
  padding: 25px 0 60px;
  /* 背景は親 .pattern-band の連続パターンを透過させる（旧: 単色 var(--c-yellow) で帯と分断していた）。
     CTAボタン背後までパターンが継ぎ目なく連続する。 */
  text-align: center;
}
.contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 246px;
  min-height: 64px;
  background: var(--c-red);
  color: var(--c-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  border-radius: 600px;
  /* Figma(btn 361:1120)はフラット。3D風の影は付かない */
}
/* テキストを1つのフレックスアイテムにまとめ、<br>での2行を中央寄せ（inline-flex分割を防ぐ） */
.contact__btn-txt { text-align: center; }
/* 1行目「ココス福袋に関しての」は小さめ（Figma 573:508は12px。指定11ptに合わせ11px） */
.contact__btn-sub {
  font-size: 11px;
}
/* 2行目だけ2px上げてFigma(573:508)の行位置に厳密に合わせる（レイアウトに影響しない視覚移動） */
.contact__btn-main {
  display: inline-block;
  transform: translateY(-2px);
}

/* =============================================
   ポップアップ（モーダル）
   ============================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.modal[hidden] { display: none; }
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: 82vh;
  overflow-y: auto;
  padding: 28px 20px 24px;
  background: var(--c-white);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}
/* 閉じるボタン：パネル下部中央の「とじる」ピル（Figma btn_close 136:446） */
.modal__close {
  display: block;
  margin: 22px auto 0;
  padding: 4px 20px 5px;
  border-radius: 600px;
  background: #cdd9e9;
  color: #2f2f2f;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-align: center;
}
.modal__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--c-navy);
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}
/* 見出し両脇の◆あしらい（Figma 136:120/121＝紺の菱形。info__headと同意匠） */
.modal__title::before,
.modal__title::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--c-navy);
  border-radius: 1px;
  transform: rotate(45deg);
}
.modal__list {
  font-size: 12.5px;
  line-height: 1.75;
}
.modal__list li {
  padding-left: 1em;
  text-indent: -1em;
}
.modal__list li::before { content: "・"; }
/* 強調項目（赤字。Figma 136:447 のお食事券モーダル1項目目） */
.modal__em { color: #E60012; }
.modal__list li + li { margin-top: 8px; }
.modal__sub {
  display: block;
  margin-top: 2px;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 11px;
  color: #666;
}

/* =============================================
   PC装飾レイヤー（≥750px）
   中央LP(.page-fit)は現状維持。左右マージンに装飾を固定配置し、
   花吹雪は body 背景にタイル（ページと一緒にスクロール）。
   位置/幅は Figma(PC) のパネル内相対位置（ほぼ水平中央・縦は%）から導出。
   ※ ベース色/タイル寸法/微位置は視覚検証で要調整。
   ============================================= */
/* SP（<750px）では PC装飾を完全に隠す */
.pcdeco,
.pcdeco__side { display: none; }
/* 花散布レイヤーも SP では出さない（JS側でも生成しないが二重に保険） */
.pcflowers { display: none; }

@media (min-width: 750px) {
  /* PCは最小幅1200px（694+532+694=1920 のうち中央532固定・左右カラムは334で凍結）。
     未満は横スクロール、装飾・サイドカラムは縮めない。1200以上はカラム幅・装飾が viewport 連動。
     中央LPは main.js が PC時 532px にscale（Figma設計一致）。 */
  body {
    min-width: 1200px;
    /* サイドパネルのベース色（Figma 267:1547/267:1546 Rectangle 57/58 の fill）。
       共通ヘッダ/フッタの全幅帯は body 直下に積み、その間の .lp-row が3カラムを担う。 */
    background-color: #fff89d;
    /* 花吹雪はタイル背景を廃止し、js/pcdeco-flowers.js が個々の花SVGを
       左右マージンにランダム散布する（.pcflowers レイヤー）。 */
  }
  /* 共通ヘッダ/フッタは PC で SP画像を隠し PC画像を表示（全幅）。 */
  .site-header--global .is-sp,
  .site-footer--global .is-sp { display: none; }
  .site-header--global .is-pc,
  .site-footer--global .is-pc { display: block; }

  /* ヘッダ/フッタPC：白背景を全幅に敷き、キャプチャ画像(幅1440px)は「中央固定幅」でキャップ。
     旧 width:100% は超ワイド(2560等)で1440超に引き伸ばし＝ロゴ/文字がボケ拡大していた。
     画像は max-width:1440px・中央寄せで拡大を止め、両脇は白背景で埋める（フッタも同処理）。
     ※フッタは縦に3バンド(水色写真/マルーン/白)のため、超ワイドでは中央寄せの帯＋白マージンになる。 */
  .site-header--global,
  .site-footer--global { background-color: #fff; }
  .site-header--global img.is-pc,
  .site-footer--global img.is-pc {
    width: 100%;
    max-width: 1440px;   /* キャプチャ幅でキャップ＝それ以上は拡大せず中央固定 */
    margin: 0 auto;      /* 中央寄せ。両脇は白背景で埋まる */
  }

  /* PC: [左sticky][中央LP][右sticky] の3カラム行。＝旧 body の flex を .lp-row に移設。
     全幅ヘッダ/フッタを body 直下に縦積みするため、横並びは .lp-row が担当する。
     横スクロール時はカラムごとページと一緒に流れる（sticky=横はページ追従）。
     justify-content は flex-start（center だと 1200未満の overflow 時に左が画面外へ逃げる）。 */
  .lp-row {
    display: flex;
    align-items: flex-start;
    /* 中央LP(.page-fit)を中央寄せ。サイド装飾は fixed で out-of-flow。 */
    justify-content: center;
    position: relative;                                 /* 花レイヤー(.pcflowers-wrap)の基準＝行内に限定 */
    min-width: 1200px;
  }
  .pcdeco { display: contents; }                       /* ラッパは無視し子を .lp-row 直下の flex item に */

  /* 花散布レイヤー（js/pcdeco-flowers.js が生成）。
     body直下に absolute 配置し、左右マージン領域をページ全長で覆う。
     ＝ sticky のサイドカラムとは別に、スクロールで一緒に流れる背景の花畑。
     中央LP(.page-fit, z-index:1)より背面、サイドカラム(.pcdeco__side, z-index:0)と
     同じ最背面レイヤー。装飾文字/キャラ(z-index:0以上)の邪魔をしない。 */
  .pcflowers {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;                                       /* body 全長（JS が要素高さも算出して配置） */
    z-index: -1;                                        /* 最背面（サイド装飾・中央LPより後ろ／body地色より前） */
    pointer-events: none;
    overflow: hidden;
  }
  .pcflowers--left  { left: 0;  width: max(334px, calc((100vw - 532px) / 2)); }
  .pcflowers--right { right: 0; width: max(334px, calc((100vw - 532px) / 2)); }
  .pcflower {
    position: absolute;
    display: block;
    opacity: .9;                                        /* 薄い背景要素として控えめに */
    transform-origin: center center;
  }

  /* 中央LP＝Figma設計の532px固定（main.js が PC時 532 にscale）。装飾より前面＋影 */
  .page-fit {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;                                     /* 実幅は JS が 532px に設定 */
    /* 色#D2B65C、ぼかし40px。濃さはFigmaの80%の半分=40%に */
    box-shadow: 0 0 40px rgba(210, 182, 92, .4);
  }

  /* サイドカラム＝sticky（縦は画面追従／横はページ追従）。
     幅 = 左右の余り (100vw-532)/2。1920で 694（Figma一致）、1200で 334、1200未満は 334 で凍結。
     ＝694+532+694=1920 で横スクロールなし、1200未満で横スクロール。 */
  .pcdeco__side {
    display: block;                                    /* SPで none にしたのを復帰 */
    /* viewport固定で縦スクロール追従（フッタ手前での送り出しはJS）。横幅＝左右マージン。 */
    position: fixed;
    top: 0;
    height: 100vh;
    width: max(334px, calc((100vw - 532px) / 2));
    z-index: 0;
    pointer-events: none;
  }
  .pcdeco__side--left  { left: 0; }
  .pcdeco__side--right { right: 0; }

  /* 各装飾：横はカラム幅%で水平中央（% = Figma実寸/694）、縦は「ビューポート中央基準」。
     サイドカラムは height:100vh の sticky。各要素を top:50% に置き、
     transform で「自身を中央寄せ(-50%)＋3要素の相対オフセット」を与える。
     ⇒ 要素群はビューポート縦中央にまとまり、内部の相対間隔はウインドウ縦幅に依存しない。

     【相対位置の根拠：Figma node 543:434（Group 119, 親 464×517, y基準290）】
       2026 Summer (281:693) y=290 h=44 → 中心 312
       キャラ枠 ill (278:885) y=319 h=464 → 中心 551
       Lucky Bag (281:692) y=769 h=38 → 中心 788
     ⇒ キャラ枠中心を基準とした中心間オフセット（縦）:
       2026     : 312 − 551 = −239px（中央より上）
       Lucky Bag: 788 − 551 = +237px（中央より下）
     キャラ枠は max-width 464px＝694px列幅の 66.9%。よって上記オフセットも
     「列幅(694)基準」で表すと相対比が保たれる:
       2026     : −239/694 = −0.3444
       Lucky Bag: +237/694 = +0.3415

     【vh をどう置換したか】
     旧実装は中央オフセットを vh（ビューポート縦幅%）で与えていたため、ウインドウを
     縦に伸縮すると 2026↔キャラ↔LuckyBag の中心間距離が変動していた。
     これを列幅連動の固定オフセット --col*比率 に置換する。--col は列幅(縦幅非依存)で、
     横幅にのみ等比追従するため、ウインドウ縦幅を変えても中心間距離は一定になる。
     1920超(列幅694超)では素材幅が max-width でキャップされるため、オフセットも
     min() で 694基準px（239/237px）にキャップし、キャップ後も相対比を保つ。 */
  /* --col: サイドカラムの実幅。flex-basis と同式（縦幅非依存）。1920で694, 1200で334, 1200未満334凍結。 */
  .pcdeco__side { --col: max(334px, calc((100vw - 532px) / 2)); }
  /* :not(.pcdeco__char) で切替キャラを除外。これを含めると詳細度(0,1,1)が
     .pcdeco__char(0,1,0) に勝ち、キャラの transform:scale()/left が translateX(-50%)/50%
     で上書きされてポップ演出が壊れる（縮小しない・中央からズレる）。 */
  /* backface-visibility:hidden で各画像を独立GPUレイヤー化し、transform由来の
     「初期ぼやけ→リサイズで鮮明化」ラスタライズバグを防ぐ（読み込み時から鮮明）。 */
  .pcdeco img:not(.pcdeco__char) { position: absolute; left: 50%; top: 50%; display: block; height: auto; backface-visibility: hidden; }
  /* width は列幅(%)連動だが、1920超(列幅694超)で素材が拡大しないよう max-width を設計実寸でキャップ
     （= 100%以上には拡大しない）。1920未満では従来どおり % で縮小する。
     縦オフセットは --col*比率（縦幅非依存）。min()で1920超でも 239/237px にキャップし相対比維持。 */
  .pcdeco__2026     { width: 24.2%; max-width: 168px; transform: translate(-50%, calc(-50% - min(var(--col) * 0.3444, 239px))); }   /* 2026 Summer：キャラ枠中心の239px上 */
  .pcdeco__luckybag { width: 30.8%; max-width: 214px; transform: translate(-50%, calc(-50% + min(var(--col) * 0.3415, 237px))); }   /* Coco's Lucky Bag：キャラ枠中心の237px下 */
  .pcdeco__title    { width: 70.0%; max-width: 486px; transform: translate(-50%, -50%); }                   /* 福袋タイトル 486/694・縦中央 */

  .pcdeco__chars {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);                  /* キャラ枠＝ビューポート縦中央 */
    width: 66.9%;                                       /* キャラ枠 464/694・正方形固定 */
    max-width: 464px;                                   /* 1920超でキャラが拡大しないよう設計実寸でキャップ */
    aspect-ratio: 1 / 1;
  }
  /* キャラ切替＝動画 scroll_v2 の「ポップ・アウト/イン」演出を再現。
     非アクティブは中心へ縮んで消えた状態。退場(is-active除去)で縮小フェードアウト、
     登場(is-active付与)で小さい状態から拡大フェードイン。
     退場→登場の「空白(gap)」の間合いは js 側のタイマーで作る（CSSに遅延は持たせない）。
     遷移長は動画実測: 退場≈0.33s / 登場≈0.42s。 */
  .pcdeco__char {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    transform-origin: center center;
    opacity: 0;
    transform: scale(.12);                              /* 中心へほぼ点まで縮んだ退場状態 */
    transition: opacity .33s ease, transform .33s ease; /* 退場 */
  }
  .pcdeco__char.is-active {
    opacity: 1;
    transform: scale(1);
    /* 登場は軽いオーバーシュート(back)で“ぽん”と拡大 */
    transition: opacity .33s ease, transform .42s cubic-bezier(.34, 1.4, .5, 1);
  }
}

/* =============================================
   イラストの軽い常時アニメ（CSS）
   「夏の空を漂う」世界観の“飛ぶ生き物”6点だけを、その場で上下にふわふわ浮遊させる。
   - 動きは全点統一で translateY の上下動のみ（回転なし）。振幅/速度のみ要素ごとに差をつける。
   - 合成PNG（生き物＋三角＋花が1枚に焼き込み）のため“その場完結”に限定（画面横断は不可）。
   - 各点は animation-delay を負値でずらし、6個が一斉同期するのを防ぐ。
   - prefers-reduced-motion: reduce のときは一切動かさない（モーション配慮＋静止スクショ＝忠実度diffの決定論性）。
     no-preference でのみアニメを付与＝reduce/未対応は設計位置 translateY(0) のまま静止。
     ※撮影側で reducedMotion:'reduce' を有効化すれば静止スクショで撮れる（配線は別途）。
   - 対象要素(④⑦⑨⑬⑯⑰)はいずれも transform 未使用なので、アニメが transform を専有してよい。
   ============================================= */
/* 振幅は --amp（402px基準デザインでの値）。中心は設計位置 translateY(0) で対称に揺れる。
   .page の scale により実画面では振幅も拡大されて見える点に留意。
   shorthand: name duration timing delay iteration direction */
@keyframes float-bob {
  from { transform: translateY(calc(var(--amp) * -1)); }
  to   { transform: translateY(var(--amp)); }
}
.detail__illust       { --amp: 8px; animation: float-bob 1s ease-in-out  0s    infinite alternate; } /* ④ 主役・大きめ */
.item-deco--1r        { --amp: 6px; animation: float-bob 1s ease-in-out -1.3s  infinite alternate; } /* ⑦ 飛ぶクマ */
.item-deco--2r        { --amp: 6px; animation: float-bob 1s ease-in-out -0.7s  infinite alternate; } /* ⑨ 飛ぶ鳥 */
.author__deco--bottom { --amp: 4px; animation: float-bob 1s ease-in-out -2.1s  infinite alternate; } /* ⑰ 袋クマ */
.item-deco--4r        { --amp: 5px; animation: float-bob 1s ease-in-out -0.4s  infinite alternate; } /* ⑬ 蝶 */
.author__deco--top    { --amp: 5px; animation: float-bob 1s ease-in-out -1.8s  infinite alternate; } /* ⑯ 蝶 */
.detail__logo         { --amp: 6px; animation: float-bob 1s ease-in-out -0.5s  infinite alternate; } /* ② COCO'Sロゴ */
.item-deco--1l        { --amp: 6px; animation: float-bob 1s ease-in-out -0.9s  infinite alternate; } /* ⑧ 雲 */
.item-deco--2l        { --amp: 6px; animation: float-bob 1s ease-in-out -1.5s  infinite alternate; } /* ⑩ 雲 */
.item-deco--3r        { --amp: 6px; animation: float-bob 1s ease-in-out -0.2s  infinite alternate; } /* ⑪ 雲 */
.item-deco--3l        { --amp: 6px; animation: float-bob 1s ease-in-out -1.1s  infinite alternate; } /* ⑫ 雲 */
.item-deco--4l        { --amp: 6px; animation: float-bob 1s ease-in-out -1.6s  infinite alternate; } /* ⑭ 雲 */

/* モーション配慮：reduce のときだけ無効化（静止＝設計位置 translateY(0)）。
   既定で動かし reduce で止める“逆パターン”＝prefers-reduced-motion 非対応環境でも動く。
   撮影で reducedMotion:'reduce' を使えば静止スクショで撮れる（忠実度diffの決定論性）。 */
@media (prefers-reduced-motion: reduce) {
  .detail__illust, .item-deco--1r, .item-deco--2r,
  .author__deco--bottom, .item-deco--4r, .author__deco--top,
  .detail__logo, .item-deco--1l, .item-deco--2l,
  .item-deco--3r, .item-deco--3l, .item-deco--4l { animation: none; }
  /* PC装飾キャラ切替も即時に（縮小/拡大の動きを止め、表示/非表示のみ） */
  .pcdeco__char { transition: none; transform: scale(1); }
  /* スクロール連動 reveal も無効化（隠さず即表示・transitionなし）。
     js-reveal が付いていても初期隠しを打ち消す。 */
  .js-reveal .reveal,
  .js-reveal .reveal--x {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =============================================
   スクロール連動の順次表示（reveal）
   - reveal.js が JS 実行時に <html>.js-reveal を付与し、対象に .reveal を付ける。
     よって初期隠しは「JS有効・IO対応・motion許可」のときだけ効く（JS無効時は通常表示）。
   - 対象は .step-card / .step-arrow（予約・受取方法）と .item-card（アイテム紹介）。
     .item-card は“親”をフェードアップする方式なので、子の .item-deco には触れず
     float-bob（translateY）と衝突しない。デコはカードと同時に登場する。
   ============================================= */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 横方向 reveal バリアント（ショッパー画像専用）：左外から右へシュッとスライドイン。
   タスクBで画像左端をページ左端(0)に接地済み。開始位置は左外(translateX 負値)→0。
   既存の縦 reveal(.reveal)を上書きするため、同一スコープ(.js-reveal)＋同一詳細度で transform を差し替える。 */
.js-reveal .reveal--x {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.js-reveal .reveal--x.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* フェードのみ reveal バリアント（detail-logo / detail-girl-fly 専用）。
   両者は float-bob(transform) で浮遊しているため、transform には触れず opacity だけ遷移させ衝突を回避。 */
.js-reveal .reveal--fade {
  opacity: 0;
  transition: opacity .6s ease;
  will-change: opacity;
}
.js-reveal .reveal--fade.is-revealed {
  opacity: 1;
}