/* ==============================
   0. デザイントークン
============================== */
:root{
  --navy:      #17264A;   /* 深紺：富山湾・寿司屋・紺箱 */
  --navy-deep: #0E1830;
  --kinari:    #F5EFE3;   /* 生成り：食卓・和の温度感 */
  --white:     #FBFAF6;   /* 白：清潔感 */
  --wood:      #8A6845;   /* 木目ブラウン */
  --gold:      #B4945A;   /* 金：細線・バッジのみ */
  --red:       #A8362D;   /* 赤：アクセントのみ */
  --ink:       #2B2A26;   /* 本文文字色 */
  --ink-soft:  #5C594F;

  /* フォールバック末尾に汎用 serif / sans-serif だけを置くと、
     縦書き時に欧文フォントのメトリクスで文字送りが計算され、文字が重なる。
     日本語フォントを明示的に列挙して、確実に和文フォントを掴ませる。 */
  --font-min:  "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
               "Noto Serif JP", "Noto Serif CJK JP", "Sans Serif CJK JP", serif;
  --font-goth: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic,
               "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", Meiryo, sans-serif;

  --lp-max: 430px;
  --pad-x: 24px;
  --bar-h: 46px;   /* 常設ショップバーの高さ */

  /* 角丸・影のトークン（乱立を防ぐ） */
  --r-pill: 999px;
  --r-lg:   18px;   /* カード類 */
  --r-sm:   8px;    /* バッジ・小物 */
  --sh-1: 0 8px 20px rgba(23,38,74,.12);   /* 通常カード */
  --sh-2: 0 12px 30px rgba(14,24,48,.3);   /* 浮いているもの */
  --vh: 1vh; /* JSでiOS Safari実測値に更新 */

  /* 実物ロゴ（base64埋め込み・外部読み込み不要） */
  --logo:       url("../assets/images/logo-navy.png");
  --logo-white: url("../assets/images/logo-white.png");
}

/* ロゴ表示用 */
.logo-mark{
  display: block;
  aspect-ratio: 1 / 1;
  background-image: var(--logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* 白抜きは専用画像を使う。filterでの反転は紺も白も白に潰れるため使わない */
.logo-mark--white{ background-image: var(--logo-white); }

/* ==============================
   1. ベース
============================== */
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{
  height: 100%;
  overflow: hidden;              /* ページ自体は固定し、.lp内でページ送りする */
  overscroll-behavior: none;
}
body{
  font-family: var(--font-goth);
  color: var(--ink);
  background: var(--navy-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.8;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color: rgba(23,38,74,.15); }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ==============================
   2. PC背景（§39）
   中央にスマホ幅LP、左右に深紺×和紙の背景
============================== */
.pc-bg{
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, #2A3E6E 0%, var(--navy) 45%, var(--navy-deep) 100%);
}
.pc-bg::before{ /* 和紙の粒子感 */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px),
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1.6px);
  background-size: 7px 7px, 13px 13px;
  background-position: 0 0, 4px 6px;
}
.pc-bg::after{ /* 水面の帯 */
  content:""; position:absolute; left:0; right:0; top:32%; height:200px;
  background: linear-gradient(180deg, transparent, rgba(180,148,90,.10), transparent);
  filter: blur(8px);
}
/* PCの左右余白：横組みのブランド表示（縦書きの重なり事故を回避） */
.pc-side{
  position: fixed; z-index: 1; top: 50%;
  transform: translateY(-50%);
  width: 240px;
  text-align: center;
  display: none;
  user-select: none; pointer-events: none;
}
.pc-side .logo-mark{
  width: 132px; margin: 0 auto 26px;
  opacity: .22;
}
.pc-side p{
  font-family: var(--font-min);
  color: rgba(245,239,227,.5);
  font-size: 16px;
  letter-spacing: .18em;
  line-height: 2.2;
  white-space: nowrap;
}
.pc-side small{
  display: block;
  margin-top: 18px;
  font-family: var(--font-goth);
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(245,239,227,.28);
  white-space: nowrap;
}
.pc-side.left { right: calc(50% + var(--lp-max)/2 + 30px); }
.pc-side.right{ left:  calc(50% + var(--lp-max)/2 + 30px); }
.pc-side.right p{ font-size: 13px; color: rgba(245,239,227,.32); line-height: 2.4; }

/* PCでは中央フレームが狭すぎて読みにくかったため、
   画面幅に応じて本体フレームを広げ、本文もわずかに大きくする。
   （スマホの見え方は 1000px 未満なので一切変わらない） */
@media (min-width: 1000px){
  :root{ --lp-max: 500px; --pad-x: 30px; }
  .copy-sub{ font-size: 15px; line-height: 2; }
  .select-lead{ font-size: 14px; }
}
@media (min-width: 1400px){
  :root{ --lp-max: 540px; }
}
/* 左右の縦組みブランドは、本体フレームと重ならない広さになってから出す */
@media (min-width: 1160px){
  .pc-side{ display: block; }
}

/* ==============================
   3. LP本体フレーム
============================== */
.lp{
  position: relative; z-index: 2;
  max-width: var(--lp-max);
  margin: 0 auto;
  background: var(--kinari);
  box-shadow: 0 0 60px rgba(0,0,0,.45);

  /* ▼ 縦型スワイプの本体：1スワイプ＝1画面のページ送り
     常設ショップバーの高さぶんを差し引く（コンテンツと重ならない） */
  height: calc(var(--vh) * 100 - var(--bar-h) - env(safe-area-inset-bottom, 0px));
  height: calc(100dvh - var(--bar-h) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  scroll-snap-type: y mandatory;   /* 必ず画面境界で止まる */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ==============================
   4. パネル共通
============================== */
.panel{
  position: relative;
  height: 100%;                 /* スクロールコンテナ(.lp)基準で常にちょうど1画面 */
  scroll-snap-align: start;
  scroll-snap-stop: always;     /* 1スワイプ＝1画面。複数画面の飛ばし送りを防ぐ */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.panel-media{
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;   /* ゆっくり寄る演出(scale)の画像を枠内に収める。
                         これが無いと拡大した画像がパネル高を超え、
                         scrollHeightが増えて「ページ送りを奪う」判定になる */
  background: linear-gradient(180deg, #22345E 0%, var(--navy) 100%); /* 画像読込前・失敗時のfallback */
}
.panel-media img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 9s ease-out;
  /* 寄せ集め写真の温度差を吸収し、紺基調のトーンに揃える */
  filter: saturate(.86) contrast(1.04) brightness(.97);
}

/* ▼ 旅の温度設計：富山湾の朝（寒色・静か）から、食卓の夜（暖色・親密）へ。
   スワイプを進めるほど画面が温かくなり、"移動した"感覚が生まれる */
.panel.is-active .panel-media img{ transform: scale(1.1); } /* ゆっくり寄る（§38.1） */
.panel-scrim{
  position: absolute; inset: 0; z-index: -1;
}

/* 縦書きの章ラベル＝旅の栞（このLPの署名的要素） */
/* ==============================
   旅の栞（章ラベル）＝縦書き
   縦書きで文字が重なる原因と対策：
   ① line-height は縦書きでは"列の幅"になる。1だと列が重なる → 1.8で列幅を確保
   ② 高さを超えると折り返して次の列ができ重なる → white-space:nowrap で禁止
   ③ flex + writing-mode は軸が食い違う → 単純なインライン構造にする
============================== */
.shiori{
  position: absolute; top: 24px; left: 14px; z-index: 3;
  max-height: 42%;             /* 章名が長くても本文領域に届かない */
  overflow: hidden;

  writing-mode: vertical-rl;
  /* text-orientation: upright は指定しない。
     フォントに縦書きメトリクスが無いと文字送りが潰れて重なるため。
     既定値 mixed で和文は自動的に正立する（欧文のみ横倒しになる）。 */
  text-orientation: mixed;

  font-family: var(--font-min);
  font-size: 12px;
  letter-spacing: .3em;
  line-height: 1.8;            /* ←縦書きでは列幅。ここが重なりの真因だった */
  white-space: nowrap;         /* ←折り返しによる列の重なりを防ぐ */

  display: block;              /* flexは使わない */
  user-select: none;
  pointer-events: none;
}
.shiori .no{
  display: inline-block;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid currentColor;   /* 縦書きでは"下"＝章番号の区切り線 */
  font-size: 11px;
  opacity: .8;
  letter-spacing: 0;
}
/* 縦書きが使えない環境（万一のフォールバック）でも崩れないように */
@supports not (writing-mode: vertical-rl){
  .shiori{ writing-mode: horizontal-tb; }
  .shiori .no{
    border-bottom: 0; border-right: 1px solid currentColor;
    padding: 0 10px 0 0; margin: 0 10px 0 0;
  }
}
.shiori.light{ color: rgba(251,250,246,.88); text-shadow: 0 1px 8px rgba(14,24,48,.5); }
.shiori.dark { color: rgba(23,38,74,.75); }

/* 縦書きの栞と本文がぶつからないよう、左に列幅ぶんの余白を確保。
   ただし中央寄せ構図（01/03/11）は栞が上部・本文が下部で縦位置が重ならないため、
   余白を足すとコピー幅が狭まり折り返しが崩れる。よって対象外にする。 */
.has-shiori > .panel-inner{
  padding-left: calc(var(--pad-x) + 20px);
}
/* 中央寄せ画面：栞ぶんの余白を左右均等に確保し、
   見出し幅は保ったまま栞との接触を防ぐ */
/* 縦に長い章名は、見出しに届く前に収める */
.shiori{ max-height: 38%; }
@media (max-height: 740px){
  .shiori{ font-size: 11px; max-height: 34%; }
}

.panel-inner{
  position: relative;
  padding: 56px var(--pad-x) 60px;
  width: 100%;
}
/* 画面に収まらない場合は、その画面の中だけをスクロールできるようにする。
   （外側のページ送りは維持したまま、内容の見切れを防ぐ安全弁） */
.panel--scrollable{ justify-content: flex-start; }
.panel--scrollable > .panel-inner{
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 52px;
  padding-bottom: 24px;
}
/* 内容が画面より高いときは上寄せ（中央寄せだと上が切れるため） */
.panel--scrollable.is-overflow > .panel-inner{ justify-content: flex-start; }

/* コピー */
.copy-main{
  font-family: var(--font-min);
  font-weight: 600;
  font-size: clamp(24px, 7.2vw, 32px);
  line-height: 1.55;
  letter-spacing: .04em;
  text-wrap: balance;          /* 対応ブラウザでは行長を均す */
}
.copy-sub{
  font-size: 14px;
  line-height: 1.95;
  margin-top: 14px;
}
.copy-note{
  font-size: 12px;
  margin-top: 12px;
  opacity: .8;
}
.t-light{ color: var(--white); text-shadow: 0 1px 14px rgba(14,24,48,.35); }
.t-dark { color: var(--ink); }
.t-dark .copy-main{ color: var(--navy); }

/* ==============================
   5. CTA（§35）
============================== */
.cta{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 82%; max-width: 330px;
  min-height: 50px;
  margin: 20px auto 0;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: var(--white);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .1em;
  border: 1px solid transparent;   /* 金は使わない（金はギフト・ラストCTAのみ） */
  box-shadow: 0 8px 22px rgba(14,24,48,.28);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.cta{ white-space: nowrap; }   /* 2行折り返しを防ぐ */
.cta::after{
  content:"→"; font-size: 14px; opacity:.85;
  transition: transform .25s ease;
  flex-shrink: 0;
}
@media (max-width: 360px){
  .cta{ font-size: 14px; letter-spacing: .04em; }
}
.cta[target="_blank"]::after{ content:"↗"; }  /* 外部ショップへの遷移を明示 */
@media (hover: hover) and (pointer: fine){
  .cta:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(14,24,48,.34); }
  .cta:hover::after{ transform: translateX(3px); }
}
/* タッチ時の押し込みフィードバック */
.cta:active{ transform: scale(.97); box-shadow: 0 4px 12px rgba(14,24,48,.28); }
.cta--strong{                       /* 04・09で使用：視認性強化 */
  background: var(--red);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(168,54,45,.35);
}
.cta--final{                        /* 10 ラストCTAのみ金を纏わせる（最上位の特別扱い） */
  background: var(--red);
  border: 1px solid rgba(180,148,90,.85);
  box-shadow: 0 10px 30px rgba(168,54,45,.4), 0 0 0 4px rgba(180,148,90,.12);
}
.cta--ghost{
  background: rgba(251,250,246,.14);
  border: 1px solid rgba(251,250,246,.6);
  backdrop-filter: blur(4px);
  box-shadow: none;
}

/* ==============================
   6.4 価格・スペック表示（購入判断に必要な情報）
============================== */
.price-row{
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 12px;
  min-height: 1.5em;      /* 明朝の数字が下の要素と接触しないよう行高を確保 */
  flex-wrap: wrap;
}
.price-row .yen{
  font-family: var(--font-min);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  color: var(--navy);
  letter-spacing: .02em;
}
.price-row .tax{ font-size: 11px; color: var(--ink-soft); }
.price-row .vol{
  font-size: 11.5px; color: var(--ink-soft);
  margin-left: auto;
}
.t-light .price-row .yen{ color: var(--white); }
.t-light .price-row .tax,
.t-light .price-row .vol{ color: rgba(251,250,246,.8); }

/* スペックチップ（保存・賞味期限・配送） */
.spec-chips{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.spec-chips span{
  font-size: 10.5px; letter-spacing: .04em;
  color: var(--ink-soft);
  background: rgba(23,38,74,.05);
  border: 1px solid rgba(23,38,74,.1);
  border-radius: var(--r-sm);
  padding: 4px 9px;
}
.t-light .spec-chips span{
  color: rgba(251,250,246,.88);
  background: rgba(251,250,246,.12);
  border-color: rgba(251,250,246,.28);
}
.ship-note{
  font-size: 11px; color: var(--ink-soft);
  margin-top: 10px; text-align: center;
}
.t-light .ship-note{ color: rgba(251,250,246,.75); }

/* 実績バッジ（★評価 / 一番人気） */
.proof-row{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px;
}
.proof-pill{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  border-radius: var(--r-pill);
  padding: 5px 11px;
}
.proof-pill--star{
  background: var(--navy); color: var(--white);
}
.proof-pill--star b{ font-size: 13px; }
.proof-pill--star .stars{ color: #E8B84B; font-size: 11px; letter-spacing: -1px; }
.proof-pill--pop{
  background: var(--red); color: var(--white);
}
.proof-pill--src{
  background: transparent; color: var(--ink-soft);
  border: 1px solid rgba(23,38,74,.18);
  font-weight: 500;
}
.t-light .proof-pill--src{ color: rgba(251,250,246,.8); border-color: rgba(251,250,246,.35); }

/* 「3つの理由」リスト（04で使用） */
.reasons{
  list-style: none;
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.reasons li{
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13px; line-height: 1.75;
  color: var(--ink-soft);
}
.reasons .n{
  flex-shrink: 0;
  width: 21px; height: 21px; margin-top: 2px;
  border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.reasons b{ color: var(--navy); font-weight: 700; }

/* もっと見るリンク（カテゴリへの受け皿・控えめに） */
.more-link{
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 12px;
  font-size: 12px; letter-spacing: .04em;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(23,38,74,.22);
  padding-bottom: 2px;
  transition: opacity .25s;
}
.more-link::after{ content:"↗"; font-size: 10px; opacity: .7; }
@media (hover: hover) and (pointer: fine){
  .more-link:hover{ opacity: .65; }
}
.p-body .more-link{ margin-top: 10px; }

/* ==============================
   6.5 画像フォールバック
   プレビュー環境や低速回線で外部画像が読めない場合、
   空白ではなく意匠として成立する表示に切り替える
============================== */
.media-fb{ position: relative; }
/* ただし全画面背景の .panel-media は、フォールバック用の media-fb を持っていても
   必ず絶対配置（画面の背面）のまま扱う。ここで relative になると背景画像が
   通常フローに入り、画像が読み込まれた瞬間に本文を押し下げ／潰して崩す
   （画像の読み込み有無でレイアウトが変わる不具合の真因）。 */
.panel-media.media-fb{ position: absolute; }
.media-fb.is-fb img{ display: none; }
.media-fb.is-fb::after{
  content: attr(data-fb);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-min);
  font-size: 13px; letter-spacing: .34em;
  color: rgba(251,250,246,.75);
  padding-left: .34em; /* letter-spacing分の光学補正 */
}
.media-fb--light{
  background: linear-gradient(160deg, #F1EADA, #E4D9C1);
}
.media-fb--light.is-fb::after{ color: rgba(23,38,74,.6); }
.hero-hints .media-fb.is-fb::after{ font-size: 10px; letter-spacing: .18em; padding-left: .18em; }

/* ==============================
   6. 出現アニメーション（§38）
============================== */
.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease, transform .9s ease;
}
.panel.is-active .reveal{ opacity: 1; transform: translateY(0); }
.panel.is-active .reveal:nth-child(1){ transition-delay: .05s; }
.panel.is-active .reveal:nth-child(2){ transition-delay: .2s; }
.panel.is-active .reveal:nth-child(3){ transition-delay: .35s; }
.panel.is-active .reveal:nth-child(4){ transition-delay: .5s; }
.panel.is-active .reveal:nth-child(5){ transition-delay: .62s; }

/* ==============================
   7. ドットインジケーター（§31.2）
============================== */
/* 進捗バー：14個のドットは数えられず邪魔になるため、
   画面右端の細いバーで「今どのあたりか」だけを示す */
.dots{
  position: fixed; z-index: 40;
  top: 0; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  right: max(6px, calc(50% - var(--lp-max)/2 + 6px));
  width: 3px;
  display: flex; flex-direction: column;
  list-style: none;
  border-radius: var(--r-pill);
  background: rgba(23,38,74,.1);
  overflow: hidden;
  transition: opacity .35s ease;
}
.dots--light{ background: rgba(251,250,246,.22); }
/* 進捗の塗り */
.dots::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--progress, 0%);
  background: var(--navy);
  border-radius: var(--r-pill);
  transition: height .45s cubic-bezier(.2,.7,.2,1);
}
.dots--light::before{ background: rgba(251,250,246,.9); }
/* 各画面ぶんの当たり判定（見た目は出さないが、タップで移動できる） */
.dots li{ flex: 1; display: flex; }
.dots button{
  flex: 1;
  padding: 0; margin: 0;
  border: 0; background: transparent;
  cursor: pointer;
  font-size: 0;
}

/* ==============================
   7.5 常設ショートカット（2〜8画面目で表示）
============================== */
.quick-jump{
  position: fixed; z-index: 45;
  top: 14px;
  right: max(14px, calc(50% - var(--lp-max)/2 + 14px));
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(23,38,74,.92);
  color: var(--white);
  border: 1px solid rgba(251,250,246,.28);
  border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  padding: 9px 16px;
  box-shadow: var(--sh-2);
  backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.quick-jump::after{ content:"→"; font-size: 11px; opacity:.85; }
.quick-jump.is-show{ opacity: 1; transform: none; pointer-events: auto; }

/* 9画面目：下に続くことを示すフェード＋誘導チップ */
.s9-cue{
  position: absolute; left: 50%; bottom: 12px; z-index: 3;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--navy);
  color: var(--white);
  border: 1px solid rgba(251,250,246,.3);
  border-radius: 999px;
  font-size: 11px; letter-spacing: .14em;
  padding: 7px 14px;
  pointer-events: none;
  transition: opacity .4s ease;
}
.s9-cue svg{ animation: cue 2.2s ease-in-out infinite; }
.s9-cue.is-hide{ opacity: 0; }

/* ==============================
   7.8 常設ショップバー（カラーミー固定・全画面で表示）
============================== */
.store-bar{
  position: fixed; z-index: 46; bottom: 0;
  left:  max(0px, calc(50% - var(--lp-max)/2));
  right: max(0px, calc(50% - var(--lp-max)/2));
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));  /* 固定高さ＝--bar-hと必ず一致させる */
  padding: 0 14px env(safe-area-inset-bottom, 0px);
  white-space: nowrap;      /* 2行に折り返させない */
  overflow: hidden;
  background: rgba(14,24,48,.96);
  border-top: 1px solid rgba(251,250,246,.16);
  color: var(--white);
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  backdrop-filter: blur(4px);
  transition: background .25s ease;
}
@media (hover: hover) and (pointer: fine){
  .store-bar:hover{ background: rgba(23,38,74,1); }
}
.store-bar:active{ background: rgba(23,38,74,1); }
.store-bar .logo-mark{ width: 26px; height: 26px; flex-shrink: 0; }
.store-bar .bar-sub{
  font-size: 9.5px; font-weight: 500; letter-spacing: .04em;
  color: rgba(251,250,246,.72);
  white-space: nowrap;
}
@media (max-width: 400px){
  .store-bar{ font-size: 12px; gap: 7px; }
  .store-bar .bar-sub{ font-size: 9px; }
}
@media (max-width: 340px){
  .store-bar .bar-sub{ display: none; }
}
.store-bar .bar-arw{ font-size: 11px; opacity: .85; }

/* ==============================
   8. スクロール誘導（§31.3）
============================== */
.swipe-cue{
  position: absolute; left: 50%; bottom: 14px; z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: rgba(251,250,246,.85);
  font-size: 10px; letter-spacing: .3em;
  pointer-events: none;
}
.swipe-cue svg{ animation: cue 2.2s ease-in-out infinite; }
@keyframes cue{
  0%,100%{ transform: translateY(0); opacity:.9; }
  50%    { transform: translateY(6px); opacity:.5; }
}

/* ==============================
   9. 各画面の個別スタイル
============================== */

/* --- 01 富山への入口 --- */
/* 水面の光のゆらぎ（軽量CSSのみ／§9.1「光が自然に動く」） */
@keyframes shimmer{
  from{ transform: translateX(-6%) scaleY(1); opacity:.55; }
  to  { transform: translateX(6%)  scaleY(1.25); opacity:.95; }
}
.hero-logo{ width: 76px; margin: 0 auto 14px; }
.brand-stamp-wrap{ margin-top: 16px; }
.brand-stamp{
  display: inline-flex; padding: 12px;
  background: rgba(251,250,246,.94);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(14,24,48,.3);
}
.brand-stamp .logo-mark{ width: 62px; }
.box-logo{ width: 60px; }
.lp-logo-mark{ width: 92px; margin: 0 auto 12px; }
.hero-logo{ margin-bottom: 24px; }
.cat-tags{
  display:flex; justify-content:center; gap:8px; margin-top:20px; flex-wrap:wrap;
}
.cat-tags span{
  font-size: 12px; letter-spacing:.14em;
  color: var(--white);
  border: 1px solid rgba(251,250,246,.55);
  border-radius: 999px;
  padding: 5px 14px;
  background: rgba(23,38,74,.35);
  backdrop-filter: blur(3px);
}
/* 画面下部：商品の「気配」（§7.1） */
.hero-hints{
  display:flex; justify-content:center; gap:10px; margin-top:22px;
}
.hero-hints figure{
  width: 62px; height: 62px; border-radius: var(--r-sm); overflow:hidden;
  border: 1px solid rgba(251,250,246,.4);
  box-shadow: 0 6px 16px rgba(14,24,48,.4);
  background: var(--navy);
}
.hero-hints img{ width:100%; height:100%; object-fit:cover; opacity:.92; }

/* --- 02 自宅の食卓体験 --- */

/* --- 03 寿司屋の信頼感 --- */
/* --- 04 昆布ガリ（入口商品・クリック最優先） --- */
.tv-badge{
  align-self: flex-start;
  margin-top: 10px;
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 11.5px;
  letter-spacing: .08em;
  line-height: 1.7;
  padding: 7px 14px;
}
.tv-badge b{ display:block; font-weight:700; font-size:12.5px; }
.product-photo{
  margin: 16px calc(var(--pad-x) * -1) 0;
  position: relative;
  height: clamp(150px, 26vh, 230px);   /* 1画面に収まるよう圧縮 */
  flex-shrink: 0;
  overflow: hidden;
}
.product-photo img{ width:100%; height:100%; object-fit:cover; }
.product-photo::after{
  content:""; position:absolute; inset:0;
  box-shadow: inset 0 -40px 40px -30px rgba(43,42,38,.25);
}

/* ▼ 画変わりのための構図バリエーション ▼ */

/* [A] 章番号を特大で背負わせる（05で使用）
   数字が背景に沈み、コピーが手前に立つ */
.kanji-bg{
  position: absolute; z-index: 0;
  right: -14px; top: 12%;
  font-family: var(--font-min);
  font-size: 30vh; line-height: 1;
  color: rgba(251,250,246,.09);
  user-select: none; pointer-events: none;
  letter-spacing: 0;
}
.panel.is-active .kanji-bg{
  animation: kanjiIn 1.6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes kanjiIn{
  from{ opacity: 0; transform: translateX(24px); }
  to  { opacity: 1; transform: none; }
}

/* [B] 画面上下分割（06で使用）
   上=写真 / 下=生成りの地にコピー。連続する全画面写真を断ち切る */
.panel--split{ justify-content: flex-start; }
.panel--split{
  overflow: hidden;       /* パネル自体はスクロールさせない（ページ送りを奪わせない） */
}
.panel--split .panel-media{
  inset: 0 0 auto 0;
  height: 40%;
}
.panel--split .panel-scrim{ inset: 0 0 auto 0; height: 40%; }
.panel--split > .panel-inner{
  /* 上40%＝写真／下60%＝生成りの地。
     top/bottom で領域を確定させる（絶対配置の height は"親の高さ"基準で
     確実に解決するため、cqh/container-query に依存しない）。
     これによりパネル高を超過してページ送りを奪う不具合を根本的に防ぐ。
     収まらない場合はこの画面の中だけスクロールする（外側の送りは維持）。 */
  position: absolute;
  left: 0; right: 0; top: 40%; bottom: 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-top: 24px;
  padding-bottom: 20px;
  background: var(--kinari);
  /* safe center：収まるときは中央寄せ、あふれるときは上寄せに切替わり
     見出しが上に切れてスクロールで追えなくなる事故を防ぐ */
  display: flex; flex-direction: column; justify-content: safe center;
}
.panel--split .copy-main{ color: var(--navy); }
.panel--split .copy-sub{ color: var(--ink-soft); }

/* --- 05 昆布締め --- */
.how-chip{
  display:inline-block; margin-top:16px;
  font-size: 12px; letter-spacing:.12em;
  color: var(--kinari);
  border: 1px solid rgba(251,250,246,.5);
  border-radius: 999px;
  padding: 6px 14px;
}

/* --- 06 棒鮨 --- */

/* --- 07 セット商品・贈り物 --- */
/* 実物写真差し替え前提の「紺色箱」プレースホルダー */
.gift-stage{
  position: relative;
  margin: 18px 0;
  background:
    radial-gradient(120% 80% at 50% 0%, #FDFCF8, #F2EADA 70%, #E9DFCA);
  border-radius: var(--r-lg);
  padding: 24px 20px 18px;
  text-align:center;
  box-shadow: 0 12px 30px rgba(23,38,74,.1);
  /* overflow:hidden は使わない（箱が切れるため）。
     箱とカードはグリッドで重ね、高さを確実に確保する */
}
.gift-visual{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 148px;         /* 箱＋カードの高さを必ず確保（重なり防止） */
  padding-bottom: 8px;
}
.gift-visual::before{        /* 箱の落ち影（接地感） */
  content:""; position:absolute; left:50%; bottom: 2px; z-index:0;
  width: 200px; height: 20px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(23,38,74,.22), rgba(23,38,74,0) 70%);
  filter: blur(3px);
}
.navy-box{
  grid-area: 1 / 1;
  width: 186px; height: 118px;
  /* 蓋の面 → 稜線 → 手前の落ち込み を多層グラデで立体化 */
  background:
    linear-gradient(178deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(155deg, #2C4370 0%, #22345E 38%, var(--navy) 64%, #101B36 100%);
  border-radius: 10px;
  position: relative;
  transform: perspective(760px) rotateX(9deg);
  box-shadow:
    0 2px 0 rgba(255,255,255,.1) inset,
    0 16px 26px -12px rgba(14,24,48,.5);
}
.navy-box::before{ /* 蓋の合わせ目 */
  content:""; position:absolute; left:0; right:0; top:36px; height:2px;
  background: linear-gradient(180deg, rgba(14,24,48,.55), rgba(255,255,255,.12));
  box-shadow: 0 1px 3px rgba(14,24,48,.4);
}
.navy-box::after{ /* 金の細線 */
  content:""; position:absolute; left:13px; right:13px; top:13px; bottom:13px;
  border: 1px solid rgba(180,148,90,.7);
  border-radius: 4px;
}
.navy-box .box-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
/* ギフト実物写真が設定されたら、CSS描画の箱を写真に置き換える */
.navy-box.has-photo{
  background-size: cover;
  background-position: center;
  transform: none;
  border-radius: var(--r-sm);
  box-shadow: 0 14px 26px -10px rgba(14,24,48,.45);
}
.navy-box.has-photo::before,
.navy-box.has-photo::after{ display: none; }
.navy-box.has-photo .box-label{ display: none; }
.scene-row--gift.has-photo::after{ display: none; }
.msg-card{
  grid-area: 1 / 1;
  justify-self: end; align-self: end;
  width: 108px;
  margin: 0 -2px -10px 0;    /* 箱の右下に重ねる */
  background: var(--white);
  border: 1px solid #E4DCC9;
  border-radius: 4px;
  padding: 7px 9px;
  font-size: 9.5px; line-height:1.55; text-align:left;
  color: var(--ink-soft);
  box-shadow: 0 6px 14px rgba(43,42,38,.16);
  transform: rotate(-4deg);
  position: relative; z-index: 2;
}
.msg-card b{ display:block; font-family: var(--font-min); color: var(--navy); font-size:10.5px; }
.gift-stage figcaption{ margin-top:12px; font-size:10.5px; color:var(--ink-soft); letter-spacing:.06em; }

/* --- 08 楽しみ方 --- */
/* シーン別の横帯カード：全幅・写真背景・タップでそのまま商品選択へ */
.scene-list{
  display:flex; flex-direction:column; gap: 12px;
  margin-top: 22px;
}
.scene-row{
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(84px, 11.5vh, 118px);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(120deg, #22345E, var(--navy-deep));
  box-shadow: var(--sh-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine){
  .scene-row:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px rgba(23,38,74,.22); }
}
.scene-row:active{ transform: scale(.985); }
.scene-row img{
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.scene-row .sc{
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14,24,48,.86) 34%, rgba(14,24,48,.35) 72%, rgba(14,24,48,.08));
}
.scene-row .tx{
  padding: 0 18px;
  color: var(--white);
}
.scene-row .tx b{
  display: block;
  font-family: var(--font-min);
  font-size: 17.5px; letter-spacing: .06em; line-height: 1.4;
}
.scene-row .tx small{
  font-size: 11.5px; letter-spacing: .16em; opacity: .85;
}
.scene-row .arw{
  margin-left: auto; margin-right: 16px;
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid rgba(251,250,246,.45);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(251,250,246,.92);
  font-size: 13px;
}
.scene-row--gift::after{ /* 紺色箱を思わせる金の内枠（ギフト関連は金を許可） */
  content:"";
  position: absolute; inset: 7px; z-index: 0;
  border: 1px solid rgba(180,148,90,.55);
  border-radius: 12px;
  pointer-events: none;
}

/* --- 09 商品選択（縦スクロール可・選びやすさ最優先） --- */
.select-lead{ font-size: 13px; color: var(--ink-soft); margin-top: 10px; }
.product-list{ list-style:none; margin-top: 20px; display:flex; flex-direction:column; gap: 16px; }
.p-card{
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  border: 1px solid #EDE5D3;
}
.p-card .p-ph{ position:relative; aspect-ratio: 16 / 9; overflow:hidden; background: var(--navy); }
.p-card .p-ph img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
@media (hover: hover) and (pointer: fine){
  .p-card:hover .p-ph img{ transform: scale(1.04); }
}
.p-tag{
  position:absolute; top:12px; left:12px;
  background: rgba(23,38,74,.88);
  color: var(--white);
  font-size: 11px; letter-spacing:.12em;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.p-tag--red{ background: var(--red); }
.p-ph--gift{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg,#22345E,var(--navy-deep));
}
.p-ph--gift .navy-box{ transform: scale(.9); }
.p-body{ padding: 15px 16px 17px; }
.p-body h3{
  font-family: var(--font-min);
  font-size: 19px; color: var(--navy); letter-spacing:.06em;
}
.p-body .p-hook{
  font-family: var(--font-min);
  font-size: 14.5px; font-weight:600; color: var(--ink); margin-top: 8px;
}
.p-body p{ font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height:1.9; }
.p-body .cta{ width: 100%; max-width:none; margin-top: 16px; }

/* --- 終｜ラストCTA（このLP唯一の"最強画面"） --- */
.panel--final .panel-media img{ filter: saturate(.7) contrast(1.05) brightness(.62); }
/* 白文字の見出し・CTAが中央に乗る画面。scrim--bottom（下だけ暗い）では
   明るい写真の中央で文字が読めなくなるため、全面をしっかり沈める専用スクリム。 */
.panel--final.scrim--bottom .panel-scrim{
  background: linear-gradient(180deg,
    rgba(9,16,34,.72) 0%,
    rgba(9,16,34,.5) 32%,
    rgba(9,16,34,.6) 60%,
    rgba(9,16,34,.92) 100%);
}
/* ラストCTAは下寄せで固定する。中央寄せ（panel--center）だと縦長PCで
   白い見出し・CTAが写真の明るい中央に乗って読めなくなるため、
   スマホと同じく最も暗い下側スクリムの上に文字を置く。 */
.panel--final.panel--scrollable > .panel-inner{
  justify-content: flex-end;
  padding-bottom: 30px;
}
.final-proof{
  display: flex; justify-content: center; gap: 0;
  margin: 22px auto 4px;
  max-width: 330px;
}
.final-proof span{
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 4px;
  border-left: 1px solid rgba(251,250,246,.22);
}
.final-proof span:first-child{ border-left: 0; }
.final-proof b{
  font-family: var(--font-min);
  font-size: 20px; color: var(--white);
  line-height: 1.2;
}
.final-proof small{
  font-size: 9.5px; letter-spacing: .06em;
  color: rgba(251,250,246,.7);
  text-align: center; line-height: 1.4;
}

/* --- 旧10 --- */
.sub-links{
  display:flex; justify-content:center; gap: 26px; margin-top: 22px;
}
.sub-links a{
  color: rgba(251,250,246,.88);
  font-size: 12.5px; letter-spacing:.12em;
  border-bottom: 1px solid rgba(251,250,246,.45);
  padding-bottom: 2px;
  transition: opacity .25s;
}
@media (hover: hover) and (pointer: fine){
  .sub-links a:hover{ opacity:.7; }
}
.lp-logo{
  margin-top: 34px;
  font-family: var(--font-min);
  color: rgba(251,250,246,.92);
  font-size: 15px; letter-spacing:.3em;
}
.lp-logo small{
  display:block; font-family: var(--font-goth);
  font-size: 9.5px; letter-spacing:.34em; color: rgba(251,250,246,.55);
  margin-top: 6px;
}

/* ==============================
   9.5 新コンポーネント（昆布〆ストーリー用）
============================== */

/* ヒーロー級の大見出し（核心画面）
   他画面より大きく、行間を広く、ゆっくり現れる＝"間"をつくる */
.copy-hero{
  font-size: clamp(27px, 8.2vw, 36px);
  line-height: 1.75;
  letter-spacing: .02em;
}
/* 核心画面：静かに立ち上げる。ただしスワイプ前提のため"読ませてから余韻"の順。
   見出しはほぼ即時、締め文までを約1.7秒に収める（旧: 締め文が約3.4秒後で離脱要因だった） */
.panel--climax .reveal{
  transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
  transform: translateY(20px);
}
.panel--climax.is-active .reveal:nth-child(2){ transition-delay: .05s; } /* 見出し：ほぼ即時 */
.panel--climax.is-active .reveal:nth-child(3){ transition-delay: .40s; } /* サブ */
.panel--climax.is-active .reveal:nth-child(4){ transition-delay: .75s; } /* 工程図 */
.panel--climax.is-active .reveal:nth-child(5){ transition-delay: 1.05s; } /* 締め文（約1.7秒で完成） */
.panel--climax.is-active .reveal:nth-child(6){ transition-delay: 1.45s; } /* 落款は最後に静かに */

/* 宣言→工程→payoff（実写）まで一塊にして中央に据える */
.panel--climax > .panel-inner{ justify-content: center; }
.panel--climax .copy-sub{
  margin-top: 22px;
  font-family: var(--font-min);   /* 物語の一節。説明文ゴシックだと温度が下がるため明朝に */
  line-height: 2.0; letter-spacing: .03em;
}
.panel--climax .solve-line{ margin-top: 30px; }
.panel--climax .copy-lead{ margin-top: 26px; }

/* 工程図：ECのステッパー／フォームのボタンに見えないよう、箱・角丸・塗りを捨て、
   1本の細罫の上に明朝で並べる"手順の列"に。ゴールは塗りでなく文字（紺・太み）で締める */
.panel--climax .solve-line{
  gap: 4px;
  border-top: 1px solid rgba(23,38,74,.16);
  padding-top: 16px;
}
.panel--climax .solve-item{
  background: none; border: none; border-radius: 0;
  padding: 4px 2px;
  font-family: var(--font-min);
  font-size: 12.5px; letter-spacing: .04em;
  color: var(--ink-soft);
}
.panel--climax .solve-item b{ font-weight: 600; color: var(--navy); }
.panel--climax .solve-item--goal{ background: none; border: none; }
.panel--climax .solve-item--goal b{ color: var(--navy); font-weight: 700; }
.panel--climax .solve-arw{ color: rgba(23,38,74,.28); font-size: 12px; }

/* 核心の payoff 写真：下部の"間"に、とろける昆布〆の実写を敷いて食欲を喚起する。
   生成り地に対し、丸角＋やわらかな影で"置いた一枚"として馴染ませる */
.climax-photo{
  position: relative;
  margin-top: clamp(22px, 4vh, 38px);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(23,38,74,.16);
}
.climax-photo img{
  display: block; width: 100%;
  height: clamp(150px, 25vh, 208px);
  object-fit: cover;
}
.climax-photo::after{            /* キャプション可読用の下スクリム */
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(0deg, rgba(14,24,48,.5), transparent);
  pointer-events: none;
}
.climax-photo figcaption{
  position: absolute; left: 14px; bottom: 10px; z-index: 1;
  color: var(--white);
  font-family: var(--font-min);
  font-size: 11.5px; letter-spacing: .14em;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* 三大美味＝横並び3列。「食べ比べ」を"並べて見る"構図で伝える。
   （棒鮨の選択画面は縦積みカードにして、構図が双子にならないようにする） */
.taste-trio{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.tt-item{
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 10px 6px 11px;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid #EDE5D3;
  box-shadow: var(--sh-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine){
  .tt-item:hover{ transform: translateY(-3px); box-shadow: 0 12px 24px rgba(23,38,74,.16); }
}
.tt-item:active{ transform: scale(.98); }
.tt-ph{
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--navy);
}
.tt-ph img{ width: 100%; height: 100%; object-fit: cover; }
.tt-item > b{
  display: block; margin-top: 8px;
  font-family: var(--font-min);
  font-size: 13px; color: var(--navy); letter-spacing: .02em;
  line-height: 1.3;
}
.tt-note{
  display: block; margin-top: 2px;
  font-size: 9.5px; color: var(--ink-soft); line-height: 1.4;
}
.tt-price{
  display: block; margin-top: 6px;
  font-family: var(--font-min);
  font-size: 15px; font-weight: 700; color: var(--navy);
  line-height: 1.2;
}
.tt-total{
  display: block; margin-top: 1px;
  font-size: 8.5px; color: var(--ink-soft);
}

/* 食べ比べセット＝「値引き」ではなく「三種を並べる体験」で訴求 */
.trio-set{
  display: block;
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: var(--r-lg);
  background: var(--navy);
  border: 1px solid rgba(180,148,90,.55);
  box-shadow: 0 10px 26px rgba(14,24,48,.26);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine){
  .trio-set:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(14,24,48,.32); }
}
.trio-set:active{ transform: scale(.99); }
.ts-head b{
  display: block;
  font-family: var(--font-min);
  font-size: 15.5px; color: var(--white); letter-spacing: .05em;
}
.ts-head small{
  display: block; margin-top: 3px;
  font-size: 10.5px; color: rgba(251,250,246,.7); line-height: 1.5;
}
.ts-foot{
  display: flex; align-items: baseline; gap: 9px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(251,250,246,.18);
}
.ts-foot > b{
  font-family: var(--font-min);
  font-size: 19px; font-weight: 700; color: var(--white);
  line-height: 1.2;
}
.ts-foot > small{
  font-size: 10px; color: #E8B84B; font-weight: 700; letter-spacing: .04em;
}
.ts-foot > em{
  font-style: normal;
  margin-left: auto;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(180,148,90,.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--white);
  align-self: center;
}

/* セットの方が安い、という事実を見せる（単品購買層のアップセル） */
.set-deal{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: var(--r-lg);
  background: var(--navy);
  border: 1px solid rgba(180,148,90,.6);
  box-shadow: 0 10px 26px rgba(14,24,48,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine){
  .set-deal:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(14,24,48,.34); }
}
.set-deal:active{ transform: scale(.99); }
.sd-badge{
  position: absolute; top: -9px; left: 14px;
  background: var(--red); color: var(--white);
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 10px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.sd-body{ flex: 1; min-width: 0; }
.sd-body > b{
  display: block;
  font-family: var(--font-min);
  font-size: 15.5px; color: var(--white); letter-spacing: .04em;
  margin-top: 3px;
}
.sd-body > small{
  display: block; margin-top: 2px;
  font-size: 10.5px; color: rgba(251,250,246,.72);
}
.sd-price{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px;
  margin-top: 7px;
}
.sd-price s{ flex-basis: 100%; }   /* 取り消し線を上段に、価格を下段に */
.sd-price s{
  font-size: 10.5px; color: rgba(251,250,246,.55);
}
.sd-price b{
  font-family: var(--font-min);
  font-size: 20px; font-weight: 700; color: var(--white);
  line-height: 1.2;
}
.sd-price em{
  font-style: normal;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--navy);
  background: #E8B84B;
  padding: 2px 7px;
  border-radius: var(--r-pill);
}
.sd-note{
  display: block; margin-top: 6px;
  font-size: 10.5px; color: rgba(251,250,246,.8); line-height: 1.5;
}
.sd-note b{ color: #F0C36D; font-weight: 700; }
.sd-arw{
  flex-shrink: 0; align-self: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(180,148,90,.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--white);
}

/* 注意喚起（賞味期限が短い商品）＝先に伝えてクレームを防ぐ */
.caution{
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(168,54,45,.06);
  border: 1px solid rgba(168,54,45,.2);
  font-size: 11.5px; line-height: 1.6;
  color: var(--ink-soft);
}
.caution b{ color: var(--red); font-weight: 700; }
.t-light .caution{
  background: rgba(251,250,246,.14);
  border-color: rgba(251,250,246,.35);
  color: rgba(251,250,246,.9);
}
.t-light .caution b{ color: #F0A79E; }
.caution--sm{ margin-top: 7px; padding: 6px 10px; font-size: 10.5px; }

/* 昆布〆の強み（冷凍60日＝買い置きできる） */
.merit-row{
  display: flex; gap: 6px;
  margin-top: 14px;
}
.merit{
  flex: 1;
  text-align: center;
  padding: 9px 4px;
  border-radius: var(--r-sm);
  background: rgba(23,38,74,.05);
  border: 1px solid rgba(23,38,74,.12);
}
.merit b{
  display: block;
  font-family: var(--font-min);
  font-size: 13.5px; color: var(--navy); letter-spacing: .02em;
}
.merit small{
  display: block; margin-top: 2px;
  font-size: 9.5px; color: var(--ink-soft); line-height: 1.4;
}

/* 三大美味を単品で選ぶ（実売＝単品購買に合わせた見せ方） */
.pick-list{
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 16px;
}
.pick-row{
  display: flex; align-items: center; gap: 12px;
  background: var(--white);
  border: 1px solid #EDE5D3;
  border-radius: var(--r-lg);
  padding: 10px 12px 10px 10px;
  box-shadow: var(--sh-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine){
  .pick-row:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px rgba(23,38,74,.16); }
}
.pick-row:active{ transform: scale(.99); }
.pick-ph{
  flex-shrink: 0;
  width: 62px; height: 62px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--navy);
}
.pick-ph img{ width: 100%; height: 100%; object-fit: cover; }
.pick-tx{ min-width: 0; flex: 1; }
.pick-tx b{
  display: block;
  font-family: var(--font-min);
  font-size: 15.5px; color: var(--navy); letter-spacing: .04em;
}
.pick-tx b small{
  font-family: var(--font-goth);
  font-size: 10.5px; color: var(--ink-soft); margin-left: 5px; letter-spacing: 0;
}
.pick-note{
  display: block; margin-top: 3px;
  font-size: 11px; color: var(--ink-soft); line-height: 1.5;
}
.pick-price{
  flex-shrink: 0;
  text-align: right;
}
.pick-price b{
  display: block;
  font-family: var(--font-min);
  font-size: 17px; font-weight: 700; color: var(--navy);
  line-height: 1.2;
}
.pick-price small{
  display: block; margin-top: 2px;
  font-size: 9.5px; color: var(--ink-soft); white-space: nowrap;
}
.pick-price::after{
  content: "↗";
  display: block; margin-top: 3px;
  font-size: 10px; color: var(--gold);
}

/* 入口商品カード（昆布〆 単品＝まず試す） */
.entry-card{
  margin-top: 16px;
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(23,38,74,.16);
  border: 1px solid rgba(180,148,90,.4);
}
.entry-ph{ position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: var(--navy); }
.entry-ph img{ width: 100%; height: 100%; object-fit: cover; }
.entry-body{ padding: 14px 16px 16px; }
.entry-body h3{
  font-family: var(--font-min);
  font-size: 18px; color: var(--navy); letter-spacing: .04em;
}
.entry-body .e-vol{
  font-family: var(--font-goth);
  font-size: 11px; color: var(--ink-soft); margin-left: 6px; letter-spacing: 0;
}
.entry-body .cta{ width: 100%; max-width: none; margin-top: 12px; }

/* 送料込みの実額（カートでの「話が違う」を防ぐ） */
.total-note{
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.t-light .total-note{ color: rgba(251,250,246,.82); }

/* 次の一歩（3種セットへ） */
.next-step{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(23,38,74,.1);
}
.ns-lead{
  font-size: 12px; color: var(--ink-soft);
  text-align: center; letter-spacing: .04em;
}
.ns-card{
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: rgba(23,38,74,.05);
  border: 1px solid rgba(23,38,74,.14);
  transition: background .25s ease, transform .25s ease;
}
@media (hover: hover) and (pointer: fine){
  .ns-card:hover{ background: rgba(23,38,74,.09); transform: translateY(-1px); }
}
.ns-card:active{ transform: scale(.99); }
.ns-tx{ min-width: 0; }
.ns-tx b{
  display: block;
  font-family: var(--font-min);
  font-size: 14px; color: var(--navy); letter-spacing: .03em;
}
.ns-tx small{
  display: block; margin-top: 3px;
  font-size: 10.5px; color: var(--ink-soft); line-height: 1.5;
}
.ns-arw{
  margin-left: auto; flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(23,38,74,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--navy);
}

/* まとめ買い提案（2セットで送料無料） */
.bundle{
  margin-top: 16px;
  background: var(--white);
  border: 1px solid rgba(180,148,90,.45);
  border-radius: var(--r-lg);
  padding: 14px 14px 13px;
  box-shadow: var(--sh-1);
}
.bundle-head{
  text-align: center;
  font-family: var(--font-min);
  font-size: 15px;
  color: var(--navy);
  letter-spacing: .04em;
}
.bundle-head b{ font-weight: 700; }
.bundle-compare{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 16px;   /* バッジが上にはみ出すぶん */
  align-items: stretch;
}
.bundle-col{
  position: relative;
  text-align: center;
  padding: 10px 6px 9px;
  border-radius: var(--r-sm);
  background: rgba(23,38,74,.04);
  border: 1px solid rgba(23,38,74,.1);
}
.bundle-col--win{
  background: var(--navy);
  border-color: var(--navy);
  padding-top: 16px;   /* バッジぶんの余白（ラベルとの重なりを防ぐ） */
}
.bc-label{
  display: block;
  font-size: 10.5px; letter-spacing: .1em;
  color: var(--ink-soft);
}
.bundle-col--win .bc-label{ color: rgba(251,250,246,.72); }
.bc-price{
  display: block;
  font-family: var(--font-min);
  font-size: 21px; font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.3; margin-top: 2px;
}
.bc-price small{ font-size: 10px; margin-left: 1px; }
.bundle-col--win .bc-price{ color: var(--white); }
.bc-note{
  display: block;
  font-size: 9.5px; color: var(--ink-soft);
  margin-top: 3px; line-height: 1.4;
}
.bundle-col--win .bc-note{ color: rgba(251,250,246,.7); }
.bc-badge{
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  z-index: 1;
  background: var(--red); color: var(--white);
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 9px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.bundle-note{
  margin-top: 10px;
  font-size: 11px; line-height: 1.6;
  text-align: center; color: var(--ink-soft);
}
.bundle-note b{ color: var(--red); font-weight: 700; }

/* リード文（結論を短く言い切る） */
.copy-lead{
  font-family: var(--font-min);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .06em;
  margin-top: 18px;
  color: var(--navy);
}
.t-light .copy-lead{ color: var(--white); }

/* 05：旨みが重なる図 */
.umami{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 22px 0 4px;
}
.umami span{
  font-family: var(--font-min);
  display: flex; align-items: center; justify-content: center;
}
.umami-a, .umami-b{
  width: 78px; height: 78px;
  border-radius: 50%;
  font-size: 17px; letter-spacing: .08em;
}
.umami-a{
  background: rgba(23,38,74,.06);
  border: 1px solid rgba(23,38,74,.2);
  color: var(--navy);
}
.umami-b{
  background: var(--navy);
  color: var(--white);
}
.umami-x{ font-size: 15px; color: var(--ink-soft); }
.panel.is-active .umami-a{ animation: pop .7s .2s both; }
.panel.is-active .umami-b{ animation: pop .7s .45s both; }
@keyframes pop{
  from{ opacity:0; transform: scale(.7); }
  to  { opacity:1; transform: none; }
}

/* 07：解決の3ステップ横並び */
.solve-line{
  display: flex; align-items: stretch; justify-content: space-between; gap: 6px;
  margin-top: 20px;
}
.solve-item{
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 12px 6px;
  border-radius: var(--r-sm);
  background: rgba(23,38,74,.05);
  border: 1px solid rgba(23,38,74,.12);
  font-size: 11.5px; line-height: 1.5;
  color: var(--ink-soft);
}
.solve-item b{ font-weight: 700; color: var(--navy); }
.solve-item--goal{
  background: var(--navy);
  border-color: var(--navy);
}
.solve-item--goal b{ color: var(--white); }
.solve-arw{
  align-self: center;
  font-size: 11px; color: var(--ink-soft); flex-shrink: 0;
}

/* 08：三大美味 */
.three-list{
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 18px;
}
.three-row{
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(76px, 10.5vh, 104px);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(120deg, #22345E, var(--navy-deep));
  box-shadow: var(--sh-1);
}
.three-row img{
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.three-row .sc{
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14,24,48,.88) 36%, rgba(14,24,48,.35) 74%, rgba(14,24,48,.08));
}
.three-row .tx{ padding: 0 18px; color: var(--white); }
.three-row .tx b{
  display: block;
  font-family: var(--font-min);
  font-size: 18px; letter-spacing: .08em; line-height: 1.4;
}
.three-row .tx small{ font-size: 11.5px; letter-spacing: .1em; opacity: .82; }

/* 09：食べ方の3ステップ */
.steps{
  list-style: none;
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.steps li{
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.7;
  color: var(--ink-soft);
}
.steps .n{
  flex-shrink: 0;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.steps b{ color: var(--navy); font-weight: 700; }

/* 10：実績 */
.proof-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}
.proof-card{
  background: var(--white);
  border: 1px solid #ECE4D2;
  border-radius: var(--r-lg);
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--sh-1);
}
.proof-card b{
  display: block;
  font-family: var(--font-min);
  font-size: 26px; color: var(--navy);
  line-height: 1.1;
}
.proof-card b span{ font-size: 15px; margin-left: 1px; }
.proof-card small{
  display: block; margin-top: 6px;
  font-size: 10.5px; color: var(--ink-soft); letter-spacing: .04em;
}
.proof-card--hero{
  grid-column: 1 / -1;
  background: var(--navy);
  border-color: var(--navy);
}
.proof-card--hero b{ color: var(--white); font-size: 40px; }
.proof-card--hero small{ color: rgba(251,250,246,.75); }

/* 11：オファーカード（最大CTA） */
.offer-card{
  margin-top: 18px;
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(23,38,74,.16);
  border: 1px solid #EDE5D3;
}
.offer-ph{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.offer-ph img{ width: 100%; height: 100%; object-fit: cover; }
.offer-body{ padding: 16px 16px 18px; }
.offer-body h3{
  font-family: var(--font-min);
  font-size: 19px; color: var(--navy); letter-spacing: .05em;
}
.offer-items{
  font-size: 11.5px; color: var(--ink-soft);
  margin-top: 6px; letter-spacing: .02em;
}
/* 三大美味の内訳 */
.offer-three{
  list-style: none;
  display: flex; gap: 6px;
  margin-top: 8px;
}
.offer-three li{
  flex: 1;
  text-align: center;
  padding: 7px 4px;
  border-radius: var(--r-sm);
  background: rgba(23,38,74,.05);
  border: 1px solid rgba(23,38,74,.1);
}
.offer-three b{
  display: block;
  font-family: var(--font-min);
  font-size: 12.5px; color: var(--navy);
  letter-spacing: .02em;
}
.offer-three small{
  display: block; margin-top: 2px;
  font-size: 9px; color: var(--ink-soft); line-height: 1.35;
}
.offer-body .cta{ width: 100%; max-width: none; margin-top: 14px; }
.panel--list .t-dark .ship-note b,
.panel--list .ship-note b{ color: var(--navy); }

/* ==============================
   9.6 メッセージカード（08 贈り物画面）
============================== */
/* 自動スクロールする帯。左右端はフェードで見切れを自然に */
.card-marquee{
  position: relative;
  margin: 16px calc(var(--pad-x) * -1) 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.card-gallery{
  display: flex;
  gap: 10px;
  width: max-content;
  padding: 4px 0 10px;
  animation: cardScroll 42s linear infinite;
}
.card-marquee:hover .card-gallery,
.card-marquee:active .card-gallery{ animation-play-state: paused; }
@keyframes cardScroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }   /* 同じ列を2セット並べ、半分進んだら最初に戻る＝無限ループ */
}
.card-gallery figure{ flex: 0 0 auto; width: 84px; }
.card-gallery img{
  width: 100%;
  aspect-ratio: 145 / 240;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid rgba(23,38,74,.12);
  box-shadow: 0 6px 14px rgba(23,38,74,.14);
  background: var(--white);
}
.card-gallery figcaption{
  margin-top: 6px; font-size: 10px; text-align: center;
  color: var(--ink-soft); letter-spacing: .04em;
}
.card-note{
  font-size: 11.5px; color: var(--ink-soft);
  text-align: center; margin-top: 2px; letter-spacing: .04em;
}

/* ==============================
   9.7 買い物ガイド（10画面）
============================== */
.guide-list{
  list-style: none; margin-top: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.guide-list li{
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--white);
  border: 1px solid #ECE4D2;
  border-radius: var(--r-lg);
  padding: 13px 14px;
  font-size: 12px; line-height: 1.65;
  color: var(--ink-soft);
  box-shadow: var(--sh-1);
}
.guide-list b{ color: var(--navy); font-weight: 700; font-size: 13px; }
.g-ico{
  flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-family: var(--font-min); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* ==============================
   9.8 役割ベースのユーティリティ
   ※ IDセレクタ(#s1 等)は使わない。画面順が変わると
     別の画面に適用されて崩れるため。
============================== */

/* 中央寄せ構図の画面（ヒーロー／信頼／ラストCTA） */
.panel--center{ justify-content: center; }
.panel--center > .panel-inner{
  text-align: center;
  padding-left:  calc(var(--pad-x) + 18px);
  padding-right: calc(var(--pad-x) + 18px);
}
.panel--center .price-row,
.panel--center .spec-chips,
.panel--center .proof-row{ justify-content: center; }

/* 上寄せ構図（写真の下半分を見せたい画面） */
.panel--top{ justify-content: flex-start; }
.panel--top > .panel-inner{ justify-content: flex-start; }

/* 白・生成り地の画面（写真背景なし） */
.panel--plain > .panel-media,
.panel--plain > .panel-scrim{ display: none; }
.panel--plain{ background: var(--white); }
.panel--plain.panel--kinari{ background: var(--kinari); }

/* 商品リスト画面（内部スクロール） */
.panel--list{ background: var(--kinari); justify-content: flex-start; }
.panel--list > .panel-media,
.panel--list > .panel-scrim{ display: none; }
.panel--list > .panel-inner{
  padding-top: 56px; padding-bottom: 72px;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.panel--list .copy-main{ color: var(--navy); font-size: 26px; }
.panel--list::after{
  content:"";
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 64px;
  background: linear-gradient(180deg, rgba(245,239,227,0), var(--kinari));
  pointer-events: none;
}

/* 旅の温度設計：寒色（富山湾）→ 暖色（食卓）へ段階的に変化 */
.tone-1 .panel-media img{ filter: saturate(.78) contrast(1.06) brightness(.95) hue-rotate(-6deg); }
.tone-2 .panel-media img{ filter: saturate(.84) contrast(1.04) brightness(.97) sepia(.06); }
.tone-3 .panel-media img{ filter: saturate(.86) contrast(1.05) brightness(.92) sepia(.08); }
.tone-4 .panel-media img{ filter: saturate(.9)  contrast(1.05) brightness(.95) sepia(.1); }
.tone-5 .panel-media img{ filter: saturate(.95) contrast(1.03) brightness(1)   sepia(.12); }
.panel--final .panel-media img{ filter: saturate(.8) contrast(1.05) brightness(.62) sepia(.14); }

/* スクリムのバリエーション */
.scrim--bottom .panel-scrim{
  background: linear-gradient(180deg, rgba(14,24,48,.15) 0%, rgba(14,24,48,.1) 40%, rgba(14,24,48,.82) 100%);
}
.scrim--top .panel-scrim{
  background: linear-gradient(180deg, rgba(20,16,12,.74) 0%, rgba(20,16,12,.3) 42%, rgba(20,16,12,0) 68%);
}
.scrim--center .panel-scrim{
  background: linear-gradient(180deg, rgba(14,24,48,.8) 0%, rgba(14,24,48,.35) 34%, rgba(14,24,48,.4) 62%, rgba(14,24,48,.9) 100%);
}
.scrim--soft .panel-scrim{
  background: linear-gradient(180deg, rgba(14,24,48,.1) 0%, rgba(14,24,48,.18) 45%, rgba(14,24,48,.8) 100%);
}

/* ヒーロー */
/* 縦型画面では横長写真の中央がクロップされる。右下の赤い電車と立山連峰を
   見せるため、クロップ基準を右へ寄せる（PC等の横長では全幅表示で影響なし） */
.panel--hero .panel-media img{ object-position: 86% center; }
.panel--hero > .panel-inner{ padding-bottom: 92px; }
.panel--hero .copy-main{ font-size: clamp(26px, 7.6vw, 33px); letter-spacing: .03em; }
.panel--hero .brand-eyebrow{
  font-family: var(--font-min);
  font-size: 12.5px; letter-spacing: .26em;
  color: rgba(251,250,246,.8);
  margin-top: 18px;
}
.panel--hero .hero-logo{ width: 76px; margin: 0 auto 22px; }

/* ラストCTA */
.panel--final .lp-logo-mark{ width: 84px; margin: 0 auto 16px; }
.panel--final .cta--ghost{ margin-top: 12px; min-height: 44px; font-size: 13px; font-weight: 500; }

/* オファー画面のship-note */
.panel--offer .ship-note{ margin-top: 12px; font-size: 11.5px; line-height: 1.6; }
.panel--offer .ship-note b{ color: var(--navy); }
.panel--offer .more-link{ display: block; width: fit-content; margin: 12px auto 0; }

/* ==============================
   10. 小型端末対策
   1画面固定化に伴い、縦が短い端末では
   文字・余白を圧縮し、はみ出す場合のみ内部スクロールを許可
============================== */

@media (max-height: 740px){
  .copy-main{ font-size: clamp(22px, 6.4vw, 26px); line-height: 1.5; }
  .copy-sub{ font-size: 12.5px; line-height: 1.8; margin-top: 10px; }
  .panel-inner{ padding-top: 44px; padding-bottom: 20px; }
  .panel--scrollable > .panel-inner{ padding-top: 44px; padding-bottom: 18px; }
  .shiori{ font-size: 11px; }
  .cta{ margin-top: 14px; min-height: 46px; font-size: 14.5px; }

  /* 04：写真とバッジを圧縮してCTAを画面内に */
  .product-photo{ height: clamp(104px, 17vh, 150px); margin-top: 10px; }
  .proof-row{ margin-top: 8px; gap: 6px; }
  .proof-pill{ font-size: 10px; padding: 4px 8px; }
  .proof-pill--star b{ font-size: 11.5px; }
  .price-row{ margin-top: 8px; align-items: center; }
  .price-row .yen{ font-size: 22px; line-height: 1.15; }
  .spec-chips{ margin-top: 10px; gap: 5px; }
  .spec-chips span{ font-size: 9.5px; padding: 3px 7px; }

  /* 04-B：理由リストを圧縮 */
  .reasons{ margin-top: 10px; gap: 7px; }
  .reasons li{ font-size: 11.5px; line-height: 1.6; }
  .reasons .n{ width: 18px; height: 18px; font-size: 10px; }

  /* 07：ギフト箱を圧縮 */
  .gift-stage{ padding: 16px 16px 12px; margin: 12px 0; }
  .gift-visual{ min-height: 112px; }
  .navy-box{ width: 150px; height: 96px; }
  .navy-box::before{ top: 29px; }
  .navy-box .box-label .logo-mark{ width: 46px; }
  .msg-card{ width: 92px; font-size: 8.5px; padding: 6px 7px; }
  .gift-stage figcaption{ margin-top: 8px; font-size: 9.5px; }

  /* 08：シーンカードを圧縮 */
  .scene-list{ gap: 8px; margin-top: 12px; }
  .scene-row{ min-height: 62px; }
  .scene-row .tx b{ font-size: 15px; }
  .scene-row .tx small{ font-size: 10.5px; }

  /* 10：実績バーを圧縮 */
  .final-proof{ margin: 14px auto 2px; }
  .final-proof b{ font-size: 17px; }
  .sub-links{ margin-top: 14px; }
  .ship-note{ margin-top: 7px; font-size: 10.5px; }

  /* 01：ヒーロー */
  .hero-logo{ width: 62px; margin-bottom: 16px; }

  /* 贈り物・買い物ガイド */
  .card-marquee{ margin-top: 12px; }
  .card-gallery figure{ width: 68px; }
  .card-gallery figcaption{ font-size: 9px; }
  .guide-list{ margin-top: 12px; gap: 7px; }
  .guide-list li{ padding: 10px 12px; font-size: 11px; line-height: 1.55; }
  .guide-list b{ font-size: 12px; }
  .g-ico{ width: 26px; height: 26px; font-size: 12px; }

  /* 昆布〆ストーリー画面 */
  .copy-lead{ font-size: 15px; margin-top: 12px; }
  .umami{ margin: 14px 0 2px; gap: 10px; }
  .umami-a, .umami-b{ width: 62px; height: 62px; font-size: 14px; }
  .solve-line{ margin-top: 14px; }
  .solve-item{ padding: 9px 4px; font-size: 10.5px; }
  .three-list{ gap: 8px; margin-top: 12px; }
  .three-row{ min-height: 64px; }
  .three-row .tx b{ font-size: 15px; }
  .three-row .tx small{ font-size: 10.5px; }
  .steps{ margin-top: 10px; gap: 7px; }
  .steps li{ font-size: 11.5px; line-height: 1.55; }
  .steps .n{ width: 19px; height: 19px; font-size: 10px; }
  .proof-grid{ margin-top: 12px; gap: 8px; }
  .proof-card{ padding: 11px 8px; }
  .proof-card b{ font-size: 21px; }
  .proof-card--hero b{ font-size: 32px; }
  .offer-card{ margin-top: 12px; }
  .offer-body{ padding: 13px 14px 14px; }
  .offer-body h3{ font-size: 17px; }
  .taste-trio{ gap: 6px; margin-top: 11px; }
  .tt-item{ padding: 8px 4px 9px; }
  .tt-item > b{ font-size: 11.5px; margin-top: 6px; }
  .tt-note{ font-size: 8.5px; }
  .tt-price{ font-size: 13px; margin-top: 4px; }
  .tt-total{ font-size: 8px; }
  .trio-set{ margin-top: 10px; padding: 11px 13px; }
  .ts-head b{ font-size: 14px; }
  .ts-head small{ font-size: 9.5px; }
  .ts-foot{ margin-top: 7px; padding-top: 7px; }
  .ts-foot > b{ font-size: 17px; }
  .set-deal{ margin-top: 11px; padding: 11px 12px; gap: 8px; }
  .sd-body > b{ font-size: 14px; }
  .sd-body > small{ font-size: 9.5px; }
  .sd-price b{ font-size: 17px; }
  .sd-price s{ font-size: 9.5px; }
  .sd-note{ font-size: 9.5px; margin-top: 4px; }
  .caution{ margin-top: 8px; padding: 7px 10px; font-size: 10.5px; }
  .caution--sm{ margin-top: 6px; padding: 5px 9px; font-size: 9.5px; }
  .merit-row{ margin-top: 10px; gap: 5px; }
  .merit{ padding: 7px 3px; }
  .merit b{ font-size: 12px; }
  .merit small{ font-size: 8.5px; }
  .pick-list{ gap: 8px; margin-top: 11px; }
  .pick-row{ padding: 8px 10px 8px 8px; gap: 9px; }
  .pick-ph{ width: 52px; height: 52px; }
  .pick-tx b{ font-size: 14px; }
  .pick-note{ font-size: 10px; margin-top: 2px; }
  .pick-price b{ font-size: 15px; }
  .pick-price small{ font-size: 8.5px; }
  .entry-card{ margin-top: 11px; }
  .entry-ph{ aspect-ratio: 5 / 2; }
  .entry-body{ padding: 11px 13px 12px; }
  .entry-body h3{ font-size: 16px; }
  .entry-body .cta{ margin-top: 9px; }
  .total-note{ font-size: 11px; margin-top: 3px; }
  .next-step{ margin-top: 11px; padding-top: 10px; }
  .ns-lead{ font-size: 11px; }
  .ns-card{ padding: 9px 12px; }
  .ns-tx b{ font-size: 12.5px; }
  .ns-tx small{ font-size: 9.5px; }
  .entry-card{ margin-top: 10px; }
  .entry-ph{ aspect-ratio: 5 / 2; }
  .entry-body{ padding: 11px 13px 12px; }
  .entry-body h3{ font-size: 16px; }
  .total-note{ font-size: 11px; margin-top: 3px; }
  .next-step{ margin-top: 10px; }
  .ns-lead{ font-size: 11px; }
  .ns-card{ padding: 9px 12px; }
  .ns-tx b{ font-size: 12.5px; }
  .ns-tx small{ font-size: 9.5px; }
}

/* ==============================
   11. アクセシビリティ / 低速回線
============================== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
  .reveal{ opacity:1; transform:none; }
}