/* ============================================================
   Pino Studio — おうちフォトスタジオセット LP v9
   ジェラートピケ調トンマナ（アイボリー×淡パステルピンク×ベージュ）
   v9変更点:
   - FVギミック拡張（フレームスタンプ・連写コンボ・レアカット・10枚目紙吹雪）
   - 相場セクション（シーン別カード・{{RATE_*}}プレースホルダ）
   - 比較表を4列グリッド化（横スワイプなし・390pxで一覧）
   - 柄ギャラリーを2×2グリッド化（水平スクラブ廃止）
   - カート本格化（/cart/add フォームPOST・柄プレビュー・配送希望日・選べる特典）
   - 成長タイムライン: シート固定＋写真だけ入れ替わるsticky pin
   - 横スワイプUI全廃
   ============================================================ */

/* ---------- デザイントークン ---------- */
:root {
  --cream: #FBF7F2;          /* アイボリーベース */
  --beige: #F3EAE0;
  --pink: #F7E8E6;           /* 淡パステルピンク（面） */
  --pink-deep: #F2D8D5;      /* 淡パステルピンク（濃） */
  --rose: #E5B8B1;           /* 装飾ピンク（生成イラストのトーンに一致） */
  --rose-soft: rgba(229, 184, 177, 0.18);
  --coral: #D89A92;          /* 装飾用アクセント */
  --coral-text: #A05A50;     /* 意味を持つテキスト用（アイボリー背景で約4.8:1・WCAG AA充足） */
  --brown: #5C4A3A;          /* 本文こげ茶（約7.3:1） */
  --ink: #43362B;
  --sage: #B7C9A8;
  --gray: #7E766A;           /* 注記系（アイボリー背景で約4.3:1） */
  --line: #F0E0D8;
  --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-hand: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; /* v13.2: Caveat全廃→丸ゴに統一（判読性向上） */
  --font-body: "Noto Sans JP", -apple-system, sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gutter: clamp(20px, 5vw, 72px);
  --section-gap: clamp(96px, 14vw, 200px);
  --radius-card: 22px;
  --radius-photo: 18px;
}

/* ---------- リセット・ベース ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-body);
  font-weight: 400; /* 300は細すぎて読みにくいため使用禁止 */
  font-size: 15px;
  line-height: 1.9;
  color: var(--brown);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; }
strong, b { font-weight: 700; }

::selection { background: var(--rose); color: #fff; }

/* 英字キャプション（v13.2: Caveat廃止→Zen Maru Gothic 700。細ウェイト禁止ルール準拠） */
.hand { font-family: var(--font-hand); font-weight: 700; font-style: normal; }

/* スクリーンリーダー専用テキスト（視覚的に非表示） */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- ノイズテクスチャオーバーレイ ---------- */
.noise-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.29 0 0 0 0 0.23 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 240px 240px;
}

/* ---------- 共通ユーティリティ ---------- */
.container { max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 760px; }
.container--wide { max-width: 1400px; }

.section { padding-block: var(--section-gap); position: relative; }

/* セクションヘッダー（手書き風番号＋丸ゴ見出し＋波線あしらい） */
.sec-head { position: relative; margin-bottom: clamp(48px, 7vw, 90px); }
.sec-num {
  font-size: clamp(76px, 13vw, 156px);
  font-weight: 700;
  line-height: 0.8;
  color: var(--pink-deep);
  position: absolute;
  top: -0.3em; left: -0.02em;
  z-index: 0;
  transform: rotate(-4deg);
  user-select: none;
  pointer-events: none;
}
.sec-label {
  position: relative; z-index: 1;
  font-size: clamp(12px, 1.5vw, 14px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--coral-text);
  display: flex; align-items: center; gap: 14px;
  padding-top: clamp(28px, 5vw, 56px);
  line-height: 1;
}
.sec-label::before { content: ""; width: 42px; height: 2px; border-radius: 2px; background: var(--rose); flex: none; }
.sec-title {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4.2vw, 44px);
  line-height: 1.55;
  letter-spacing: 0.04em;
  margin-top: 14px;
  text-wrap: balance;
}
.sec-title em {
  font-family: var(--font-hand);
  font-style: normal;
  font-weight: 600;
  color: var(--coral-text);
  font-size: 1.3em;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* 見出し下の手書き波線あしらい */
.sec-head::after {
  content: "";
  display: block;
  width: clamp(96px, 12vw, 150px);
  height: 12px;
  margin-top: 16px;
  background: url("../images/illust-wave.webp") no-repeat left center / contain;
  opacity: 0.9;
}
.sec-lede { margin-top: 20px; color: rgba(92, 74, 58, 0.72); font-size: 15px; max-width: 560px; text-wrap: pretty; }

.accent { color: var(--coral-text); }
.note { font-size: 11px; color: var(--gray); line-height: 1.8; }

/* ---------- 散りばめイラスト（HF生成・水彩パーツ） ---------- */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  height: auto;
  z-index: 1;
}
.deco-float { animation: deco-float 7s ease-in-out infinite; }
.deco-twinkle { animation: deco-twinkle 3.2s ease-in-out infinite; }
@keyframes deco-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
@keyframes deco-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.88); }
}
/* セクション見出し脇のモチーフ */
.deco--head { width: clamp(56px, 8vw, 92px); right: clamp(4px, 3vw, 40px); top: clamp(20px, 4vw, 44px); z-index: 0; }
.deco--garland { width: clamp(130px, 20vw, 230px); right: 0; top: 0; opacity: 0.95; }
/* シーン見出し脇 */
.scene-head { position: relative; }
.deco--scene { width: clamp(44px, 6vw, 68px); right: 4px; top: -14px; }
/* 価値換算パンチ周り */
.value-punch { position: relative; }
.deco--punch-arrow { width: clamp(72px, 11vw, 140px); left: 2%; top: 34%; transform: rotate(-24deg); opacity: 0.9; }
.deco--punch-sparkle { width: clamp(36px, 5vw, 60px); right: 6%; top: 2%; }
/* お悩み→解決の視線誘導矢印（横矢印を下向きに回転） */
.deco--worry-arrow {
  position: static;
  display: block;
  width: 74px;
  margin: 0 auto;
  transform: rotate(90deg);
  margin-block: 14px 42px;
}
/* 購入サマリー・最終CTA周りのキラキラ */
.order-summary { position: relative; }
.deco--order-sparkle { width: 54px; left: -6px; top: -22px; }
.deco--order-sparkle2 { width: 34px; right: -2px; bottom: 46px; }
.final-cta { position: relative; }
.deco--final-sparkle { width: 56px; left: 0; top: -34px; }
.deco--final-sparkle2 { width: 36px; right: 2%; top: -12px; }
/* レビュー特典カードのモチーフバッジ */
.deco--choice { width: 46px; right: 12px; top: 10px; z-index: 2; }
/* P.S.のクマ */
.ps-block { position: relative; }
.deco--ps { width: clamp(56px, 8vw, 78px); right: 6%; top: -30px; }

/* ---------- 画像フレーム（白フチ＋角丸大きめ＋clip-pathリビール） ---------- */
.frame { overflow: hidden; border-radius: var(--radius-photo); position: relative; background: var(--beige); }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out-expo); }
@media (hover: hover) and (pointer: fine) {
  .frame:hover img { transform: scale(1.045); }
}
/* v13.1: クリップ演出を廃止し純フェード化（スクロール時の「画像が遅れて出る」ストレス解消） */
.js [data-clip] { opacity: 0; }
.js [data-clip].is-shown { opacity: 1; transition: opacity 0.35s ease; }

/* プニプニ（シーン写真タップ時のspringアニメ。JSが .is-boing を付与） */
.frame { --tilt: 0deg; --ty: 0px; }
.frame.is-boing { animation: boing 0.65s var(--ease-out-expo); }
@keyframes boing {
  0%   { transform: translateY(var(--ty)) rotate(var(--tilt)) scale(1); }
  28%  { transform: translateY(var(--ty)) rotate(var(--tilt)) scale(0.92); }
  55%  { transform: translateY(var(--ty)) rotate(var(--tilt)) scale(1.06); }
  78%  { transform: translateY(var(--ty)) rotate(var(--tilt)) scale(0.98); }
  100% { transform: translateY(var(--ty)) rotate(var(--tilt)) scale(1); }
}

/* リビール（JS有効時のみ初期非表示 → GSAPで解除。
   v13.1: translateYを廃止し純フェードに。発火はmain.js側で先読み（top 120%）＋0.32s短縮 */
.js [data-reveal] { opacity: 0; }
html:not(.js) [data-reveal], html:not(.js) [data-clip] { opacity: 1; transform: none; clip-path: none; }

/* ヒーロー演出の初期状態（FOUC防止）
   メインポラロイドはスタンプ演出（fv.jsのバニラJSが .is-stamped を付与）、
   テキストは .hero-fade（GSAP。不達時は下の reveals-forced で可視化） */
.js .hero-fade { opacity: 0; transform: translateY(22px); }

/* フォールバック可視化（core.jsが付与: GSAP不達・初期化失敗・reduced-motion時） */
html.js.reveals-forced [data-reveal] { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }
html.js.reveals-forced [data-clip] { opacity: 1; clip-path: none; }
html.js.reveals-forced .hero-fade { opacity: 1; transform: none; }
html.js.reveals-forced .grow-frame { opacity: 1; transform: rotate(-2.5deg) scale(1); }

/* ---------- CTAボタン ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 46px;
  border-radius: 999px;
  background: var(--brown);
  color: var(--cream);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), background-color 0.4s;
  will-change: transform;
}
.btn .btn-fill {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--coral), var(--rose));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease-out-expo);
  border-radius: inherit;
}
.btn > span, .btn > svg { position: relative; z-index: 1; }
.btn:hover .btn-fill, .btn:focus-visible .btn-fill { transform: scaleX(1); }
.btn:hover { box-shadow: 0 18px 40px -14px rgba(92, 74, 58, 0.5); }
.btn:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
/* cream文字とのコントラスト: #9A554B=5.22:1 / #A45D52=4.62:1（ともにWCAG AA 4.5:1充足） */
.btn--rose { background: linear-gradient(120deg, #9A554B, #A45D52); box-shadow: 0 14px 34px -12px rgba(154, 85, 75, 0.5); }
.btn--rose .btn-fill { background: var(--brown); }
.btn--line { background: #06C755; }
.btn--line .btn-fill { background: #049e44; }
.btn--block { display: flex; width: 100%; }
.btn .arrow { display: inline-block; transition: transform 0.45s var(--ease-out-expo); }
.btn:hover .arrow { transform: translateX(6px); }
.btn.is-disabled { pointer-events: none; opacity: 0.35; filter: saturate(0.4); }

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--rose);
  transition: color 0.3s;
}
.text-link:hover { color: var(--coral-text); }
.text-link .arrow { transition: transform 0.4s var(--ease-out-expo); }
.text-link:hover .arrow { transform: translateX(5px); }

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--gutter);
  transform: translateY(-110%);
  transition: transform 0.6s var(--ease-out-expo), background-color 0.4s;
}
.site-header.is-visible { transform: translateY(0); background: rgba(251, 247, 242, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
html:not(.js) .site-header { transform: none; background: rgba(251, 247, 242, 0.92); }
.site-header .logo { font-family: var(--font-hand); font-weight: 700; font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral-text); }
.site-header .btn { padding: 10px 26px; font-size: 12px; }

/* ---------- ヒーロー（v10: タップするたびに、子どもが成長する） ----------
   モバイル: ステージ（メインポラロイド）→ コンテンツの縦積み
   デスクトップ(900px〜): 左=コンテンツ 44% / 右=ステージ 56% */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 85% 10%, rgba(247, 232, 230, 0.9), transparent 70%),
    radial-gradient(70% 55% at 10% 90%, rgba(243, 234, 224, 0.9), transparent 70%),
    var(--cream);
}
.hero-grid { display: grid; grid-template-columns: 1fr; min-height: 100svh; }

/* ステージ（コラージュ面） */
.hero-stage {
  position: relative;
  order: -1; /* モバイルは写真が先 */
  height: min(58svh, 560px);
  background-image: radial-gradient(rgba(229, 184, 177, 0.28) 1.6px, transparent 1.7px);
  background-size: 30px 30px;
}
/* モバイル1画面目用の商品情報帯（写真ステージ上部・半透明白） */
.hero-stage-info {
  position: absolute;
  top: clamp(10px, 2.5vw, 16px); left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: inline-flex; align-items: baseline; gap: 5px;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(240, 224, 216, 0.9);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px; font-weight: 700; line-height: 1.4;
  color: var(--brown);
  box-shadow: 0 8px 20px -12px rgba(92, 74, 58, 0.35);
}
.hero-stage-info .sep { color: var(--pink-deep); }
.hero-stage-info .price { font-family: var(--font-display); color: var(--coral-text); }
.hero-stage-info small { font-size: 10px; font-weight: 700; }
@media (min-width: 900px) { .hero-stage-info { display: none; } }

/* ---------- FV v10: タップで成長ギミック ---------- */
/* メインフォトフレーム（白フチのポラロイド1枚・ボタン） */
.grow-board {
  position: absolute; inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  /* A-2: 商品情報帯（上部バナー）＋誘導吹き出しぶんの上余白を確保し、
     初期表示でフレーム全体＋吹き出しが見えるようにする */
  padding-top: clamp(52px, 9svh, 76px);
}
.grow-wrap { position: relative; width: min(58vw, 34svh, 320px); }
.grow-frame {
  display: block;
  width: 100%;
  background: #fff;
  padding: 4.5% 4.5% 3%;
  border: none;
  border-radius: 12px;
  box-shadow: 0 24px 50px -18px rgba(92, 74, 58, 0.42);
  transform: rotate(-2.5deg) scale(1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
  text-align: center;
}
.grow-frame:active { transform: rotate(-2.5deg) scale(0.97); }
.grow-frame:focus-visible { outline: 3px solid var(--rose); outline-offset: 5px; }
.grow-photo {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: var(--beige);
}
.grow-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.45s ease;
}
.grow-img.is-current { opacity: 1; z-index: 2; }
/* 切替スタンプ（カシャッと押される。fv.jsが .is-in を付与→除去） */
.js .grow-img.is-in { animation: grow-stamp 0.56s var(--ease-spring); }
@keyframes grow-stamp {
  0% { transform: scale(1.16) rotate(1.8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
/* ステージ名キャプション（v13.2: 手書き風→細身の英字レタースペーシングで上品に） */
.grow-caption { display: block; padding-top: 4.5%; line-height: 1.3; }
.grow-cap-en { display: block; font-family: var(--font-hand); font-weight: 700; font-size: clamp(12px, 1.6vw, 15px); letter-spacing: 0.26em; text-transform: uppercase; color: var(--coral-text); }
.grow-cap-jp { display: block; font-size: clamp(10px, 1.3vw, 12px); font-weight: 700; letter-spacing: 0.16em; color: rgba(92, 74, 58, 0.75); margin-top: 2px; }
.grow-caption.is-swap { animation: cap-pop 0.5s var(--ease-spring); }
@keyframes cap-pop {
  0% { transform: scale(0.86); }
  55% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* オープニング: フレームのスタンプ表示（fv.jsが .is-stamped を付与） */
.js .grow-frame {
  opacity: 0;
  transform: rotate(-2.5deg) scale(1.45);
  transition: transform 0.55s var(--ease-spring), opacity 0.24s ease-out;
}
.js .grow-frame.is-stamped {
  opacity: 1;
  transform: rotate(-2.5deg) scale(1);
  animation: grow-float 8s ease-in-out 1.2s infinite;
}
.js .grow-frame.is-stamped:active { animation-play-state: paused; transform: rotate(-2.5deg) scale(0.97); }
@keyframes grow-float {
  0%, 100% { transform: rotate(-2.5deg) translateY(0); }
  50% { transform: rotate(-2.5deg) translateY(-8px); }
}

/* 初回誘導（A-1: v9パターン移植。吹き出し＋指マーク＋波紋＋フレームバウンス。
   初タップまで継続 → fv.jsがDOMごと削除） */
.grow-guide {
  position: absolute; inset: 0;
  z-index: 8; /* 商品情報帯(z7)より前面: 画面が低い端末でも吹き出しが隠れない */
  pointer-events: none; /* タップは下のフレーム（button）へ通す */
}
.grow-guide-bubble {
  position: absolute;
  top: -34px; right: -10%;
  display: block;
  background: #fff;
  border: 2px solid var(--rose);
  border-radius: 20px 20px 20px 4px;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.7vw, 15px);
  line-height: 1.4;
  color: var(--coral-text);
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 12px 26px -12px rgba(92, 74, 58, 0.35);
  transform: rotate(4deg);
  transform-origin: 0% 100%;
  opacity: 0;
}
.grow-guide-bubble .cam { width: 1.35em; height: auto; margin-left: 3px; vertical-align: -0.3em; } /* ゆるかわカメライラスト（絵文字廃止） */
.grow-guide-bubble::after { /* 吹き出しのしっぽ（フレーム方向へ） */
  content: "";
  position: absolute;
  left: 22px; bottom: -8px;
  width: 13px; height: 13px;
  background: #fff;
  border-left: 2px solid var(--rose);
  border-bottom: 2px solid var(--rose);
  transform: rotate(-45deg);
}
/* 指マーク（フレーム中央でタップを促す） */
.grow-guide-finger {
  position: absolute;
  left: 50%; top: 46%;
  z-index: 3;
  line-height: 1;
  transform: translate(-30%, 0);
  filter: drop-shadow(0 6px 10px rgba(92, 74, 58, 0.35));
  opacity: 0;
}
.grow-guide-finger img { width: clamp(44px, 6vw, 60px); height: auto; display: block; } /* ゆるかわ指さしイラスト（絵文字廃止） */
/* 波紋（タップ位置から広がる） */
.grow-guide-ripple {
  position: absolute;
  left: 50%; top: 42%;
  width: 60%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.55);
  border: 3px solid var(--coral);
  border-radius: 50%;
  opacity: 0;
}
/* フレームスタンプ完了後に誘導開始（fv.jsが .is-stamped / .is-guiding を付与） */
.js .grow-frame.is-stamped ~ .grow-guide .grow-guide-bubble {
  animation: guide-pop 0.55s var(--ease-spring) 0.9s forwards, guide-pulse 2.2s ease-in-out 1.6s infinite;
}
.js .grow-frame.is-stamped ~ .grow-guide .grow-guide-finger {
  animation: guide-appear 0.4s ease 1.2s forwards, guide-tap 1.15s ease-in-out 1.6s infinite;
}
.js .grow-frame.is-stamped ~ .grow-guide .grow-guide-ripple {
  animation: guide-ripple 1.15s ease-out 1.6s infinite;
}
/* 誘導中はふわふわ（grow-float）の代わりにタップを誘うバウンス */
.js .grow-frame.is-stamped.is-guiding {
  animation: guide-bounce 1.15s var(--ease-spring) 1.6s infinite;
}
.grow-guide.is-gone, .grow-guide.is-gone * { animation: none !important; opacity: 0 !important; transition: opacity 0.35s ease; }
html:not(.js) .grow-guide { display: none; } /* JS無効時はギミックが動かないため非表示 */
@keyframes guide-pop {
  0% { opacity: 0; transform: rotate(4deg) scale(0); }
  60% { opacity: 1; transform: rotate(4deg) scale(1.08); }
  100% { opacity: 1; transform: rotate(4deg) scale(1); }
}
@keyframes guide-pulse {
  0%, 100% { transform: rotate(4deg) scale(1); }
  50% { transform: rotate(4deg) scale(1.06); }
}
@keyframes guide-appear { to { opacity: 1; } }
@keyframes guide-tap {
  0%, 100% { transform: translate(-30%, 0) scale(1); }
  40% { transform: translate(-30%, 14px) scale(0.88); }
}
@keyframes guide-ripple {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.55); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}
@keyframes guide-bounce {
  0%, 100% { transform: rotate(-2.5deg) translateY(0) scale(1); }
  40% { transform: rotate(-2.5deg) translateY(5px) scale(0.975); }
  70% { transform: rotate(-2.5deg) translateY(-3px) scale(1.01); }
}

/* ヒーロー装飾イラスト（ふわふわ漂う） */
.hero-deco { z-index: 1; opacity: 0.95; }
.hero-deco--balloon { left: 1%; top: 4%; width: clamp(40px, 6vw, 74px); animation: deco-float 8s ease-in-out infinite; }
.hero-deco--star { right: 4%; top: 8%; width: clamp(44px, 6.5vw, 80px); animation: deco-float 9s ease-in-out 1s infinite; }
.hero-deco--bubbles { left: 5%; bottom: 4%; width: clamp(50px, 7.5vw, 92px); animation: deco-float 10s ease-in-out 0.5s infinite; }
.hero-deco--cloud { right: 20%; top: 1%; width: clamp(60px, 9vw, 110px); opacity: 0.85; animation: deco-float 12s ease-in-out 2s infinite; }
.hero-deco--sparkle { left: 44%; top: 3%; width: clamp(24px, 3.5vw, 44px); animation: deco-twinkle 3.2s ease-in-out infinite; }

/* フラッシュ（カシャッ）オーバーレイ */
.hero-flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 9;
}
.hero-flash.is-on { animation: flash-pop 0.4s ease-out; }
@keyframes flash-pop { 0% { opacity: 0.95; } 100% { opacity: 0; } }

/* ---------- FV v10: 成長の軌跡（過去カットの小さなポラロイド） ---------- */
.grow-trail { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tpol {
  --rot: 0deg;
  position: absolute;
  left: var(--x, auto); right: var(--r, auto);
  top: var(--y, auto); bottom: var(--b, auto);
  width: clamp(58px, 17%, 104px);
  background: #fff;
  padding: 5px 5px 3px;
  border-radius: 7px;
  box-shadow: 0 12px 26px -12px rgba(92, 74, 58, 0.35);
  transform: rotate(var(--rot)) scale(1);
}
.tpol-photo { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--beige); }
.tpol-photo img { width: 100%; height: 100%; object-fit: cover; }
.tpol-caption {
  display: block;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(92, 74, 58, 0.75);
  padding-top: 1px;
  white-space: nowrap;
  overflow: hidden;
}
/* 散らばりスロット（メインフレームを避けた周囲の6箇所） */
.tpol-s1 { --x: 3%;  --y: 9%;  --rot: -8deg; }
.tpol-s2 { --r: 3%;  --y: 13%; --rot: 7deg; }
.tpol-s3 { --x: 5%;  --b: 7%;  --rot: 6deg; }
.tpol-s4 { --r: 5%;  --b: 10%; --rot: -6deg; }
.tpol-s5 { --x: 2%;  --y: 42%; --rot: 9deg; }
.tpol-s6 { --r: 2%;  --y: 40%; --rot: -9deg; }
/* スタンプ演出（fv.jsが .is-stamped を付与） */
.js .tpol {
  opacity: 0;
  transform: rotate(var(--rot)) scale(1.5);
  transition: transform 0.5s var(--ease-spring), opacity 0.4s ease;
}
.js .tpol.is-stamped { transform: rotate(var(--rot)) scale(1); } /* 不透明度はfv.jsが古い順に設定 */
.js .tpol.is-leaving { opacity: 0 !important; transition: opacity 0.4s ease; }

/* コンテンツ面 */
.hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: clamp(26px, 4.5vh, 40px) var(--gutter) clamp(48px, 7vh, 72px);
}
.hero-overline {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: clamp(10px, 2vh, 20px);
  white-space: nowrap;
}
.hero-overline .hand { font-size: clamp(14px, 1.7vw, 17px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral-text); line-height: 1; }
.hero-overline .jp-note { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: rgba(92, 74, 58, 0.7); }
.hero-title .en {
  display: block;
  font-size: clamp(13px, 1.9vw, 17px);
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--coral);
}
.hero-title .ja {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(25px, 6vw, 42px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-top: 6px;
  word-break: keep-all; /* 折り返しは<wbr>位置（おうちフォト｜スタジオセット）のみ */
}
.hero-sub {
  margin-top: clamp(12px, 2vh, 20px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 23px);
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.hero-lead {
  margin-top: 10px;
  font-size: clamp(13px, 1.6vw, 15px);
  color: rgba(92, 74, 58, 0.85);
  letter-spacing: 0.05em;
}
.hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: clamp(18px, 3vh, 28px); }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 44% 56%; }
  .hero-stage { order: 2; height: auto; min-height: 100svh; }
  .grow-board { padding-top: 0; }
  .grow-wrap { width: min(30vw, 48svh, 400px); }
  .tpol { width: clamp(84px, 16%, 132px); }
  .tpol-caption { font-size: 13px; }
  .grow-guide-bubble { right: -14%; top: -40px; }
  .hero-inner {
    order: 1;
    display: flex; flex-direction: column; justify-content: center;
    padding: 110px var(--gutter) 110px;
  }
}

/* ---------- 01 RATES 都内シーン別撮影相場 ---------- */
.rate-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .rate-cards { grid-template-columns: repeat(2, 1fr); } .rate-cards .rate-card:last-child { grid-column: 1 / -1; } }
.rate-card {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  grid-template-areas: "icon scene price" "icon when price";
  align-items: center;
  column-gap: 16px;
  background: #fff;
  border: 2px dashed var(--pink-deep);
  border-radius: var(--radius-card);
  padding: 16px clamp(16px, 3vw, 24px);
}
.rate-card .rate-icon { grid-area: icon; width: 52px; height: auto; }
.rate-card .rate-scene { grid-area: scene; font-weight: 700; font-size: clamp(14px, 1.8vw, 16px); letter-spacing: 0.04em; align-self: end; }
.rate-card .rate-when { grid-area: when; font-size: 11px; color: var(--gray); align-self: start; }
.rate-card .rate-price {
  grid-area: price;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(15px, 2.2vw, 20px);
  color: var(--coral-text);
  white-space: nowrap;
  text-align: right;
}
.value-total { display: flex; justify-content: space-between; align-items: baseline; padding: 26px 4px 8px; border-bottom: 2px dashed var(--pink-deep); }
.value-total .label { font-size: 13px; color: var(--gray); letter-spacing: 0.1em; }
.value-total .amount { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 4vw, 40px); color: var(--brown); }
.rate-note { margin-top: 14px; }
.rate-close { position: relative; text-align: center; margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(24px, 4vw, 40px); }
.rate-close .deco--punch-arrow { left: 4%; top: -10%; }
.rate-close p {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2.3vw, 22px);
  letter-spacing: 0.06em;
  line-height: 2;
  word-break: keep-all;
}

/* ---------- 02 WORRIES ---------- */
.worry-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.worry-card {
  background: var(--cream);
  border: 2px dashed var(--pink-deep);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3.5vw, 40px);
  position: relative;
}
.worry-card .w-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; color: var(--coral-text); letter-spacing: 0.22em;
  display: block; margin-bottom: 8px;
  line-height: 1;
}
.worry-card p { font-size: 14px; color: rgba(92, 74, 58, 0.85); padding-right: clamp(64px, 9vw, 92px); }
/* 悩みカードの空きスペースに対応イラスト（yuru5シリーズ） */
.worry-card .worry-illust {
  position: absolute;
  right: clamp(12px, 2.5vw, 24px);
  bottom: clamp(10px, 2vw, 18px);
  width: clamp(56px, 8vw, 84px);
  height: auto;
  pointer-events: none;
}
.worry-close { text-align: center; margin-top: clamp(40px, 6vw, 64px); }
.worry-close p {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(17px, 2.4vw, 23px); letter-spacing: 0.08em;
  border-bottom: 3px solid var(--rose);
  padding-bottom: 8px;
}

/* ---------- 03 SOLUTION ---------- */
.solution-video { margin-block: clamp(40px, 6vw, 72px); }
.solution-video .frame { aspect-ratio: 4 / 5; max-width: 640px; margin-inline: auto; border-radius: 28px; border: 6px solid #fff; box-shadow: 0 18px 40px -18px rgba(92, 74, 58, 0.3); }
@media (min-width: 768px) { .solution-video .frame { aspect-ratio: 16 / 10; max-width: none; } }

.set-panel { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 4vw, 56px); box-shadow: 0 20px 44px -30px rgba(92, 74, 58, 0.25); }
.set-panel h3 { text-align: center; font-family: var(--font-display); font-size: clamp(16px, 2.2vw, 21px); font-weight: 700; letter-spacing: 0.1em; margin-bottom: 28px; }
.set-hero { border-radius: 16px; }
.set-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; } /* 収納ホルダー追加で4点 */
@media (max-width: 640px) { .set-items { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.set-items figure { text-align: center; }
.set-items .frame { aspect-ratio: 1; border-radius: 16px; }
.set-items figcaption { font-size: 12px; font-weight: 700; margin-top: 10px; color: rgba(92, 74, 58, 0.8); }
.set-note { text-align: center; margin-top: 22px; font-size: 12px; color: var(--gray); }

.steps { margin-top: clamp(64px, 9vw, 120px); display: grid; gap: clamp(40px, 6vw, 56px); }
.step { display: grid; gap: 20px; align-items: center; }
.step .frame { aspect-ratio: 16 / 10; border: 5px solid #fff; box-shadow: 0 14px 30px -16px rgba(92, 74, 58, 0.28); }
.step .step-no {
  font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(17px, 2.2vw, 22px); line-height: 1; color: var(--coral-text);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: inline-block;
}
.step h4 { font-family: var(--font-display); font-size: clamp(18px, 2.4vw, 24px); font-weight: 700; letter-spacing: 0.06em; margin-top: 6px; }
.step p { font-size: 14px; color: rgba(92, 74, 58, 0.75); margin-top: 10px; max-width: 420px; }
@media (min-width: 820px) {
  .step { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
  .step:nth-child(even) .step-text { order: -1; }
}
.manual-note {
  margin-top: clamp(48px, 6vw, 72px);
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--pink); border-radius: var(--radius-card);
  padding: clamp(20px, 3vw, 32px);
  max-width: 640px; margin-inline: auto;
}
.manual-note .icon { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--coral); }
.manual-note h5 { font-size: 14px; font-weight: 700; color: var(--brown); } /* pink面上のためbrown（7.07:1） */
.manual-note p { font-size: 12px; color: rgba(92, 74, 58, 0.7); margin-top: 4px; }

/* ---------- 04 SCENES ---------- */
.marquee { overflow: hidden; white-space: nowrap; padding-block: clamp(20px, 3vw, 36px); border-block: 1px solid var(--line); }
.marquee-track { display: inline-flex; animation: marquee 38s linear infinite; will-change: transform; }
.marquee-track span {
  font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(24px, 4vw, 46px);
  letter-spacing: 0.12em;
  color: var(--pink-deep);
  padding-right: 0.5em;
}
@keyframes marquee { to { transform: translateX(-50%); } }

.scene-block { margin-top: clamp(72px, 10vw, 140px); }
.scene-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(24px, 4vw, 40px); }
.scene-head .sc-no { font-family: var(--font-hand); font-weight: 700; font-size: clamp(36px, 5.4vw, 60px); line-height: 1; color: var(--pink-deep); }
.scene-head .sc-meta .tag { font-size: 11px; letter-spacing: 0.25em; color: var(--coral-text); font-weight: 700; display: block; }
.scene-head .sc-meta h3 { font-family: var(--font-display); font-size: clamp(20px, 3vw, 30px); font-weight: 700; letter-spacing: 0.06em; }
.scene-caption { font-size: 12px; color: var(--gray); margin-top: 18px; max-width: 620px; }

/* 白フチポラロイド風＋わずかな傾き＋アーチ */
.scene-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2.5vw, 32px); align-items: start; }
.scene-duo .frame { aspect-ratio: 3 / 4; border: 5px solid #fff; box-shadow: 0 12px 28px -16px rgba(92, 74, 58, 0.3); }
.scene-duo .frame:first-child { --tilt: -1.4deg; transform: rotate(var(--tilt)); }
.scene-duo .frame:nth-child(2) { margin-top: clamp(28px, 5vw, 72px); --tilt: 1.2deg; transform: rotate(var(--tilt)); border-radius: 999px 999px var(--radius-photo) var(--radius-photo); }

.scene-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 28px); align-items: start; }
.scene-trio .frame { aspect-ratio: 3 / 4; border: 5px solid #fff; box-shadow: 0 12px 28px -16px rgba(92, 74, 58, 0.3); }
.scene-trio .frame:first-child { --tilt: -1.6deg; transform: rotate(var(--tilt)); }
.scene-trio .frame:nth-child(2) { margin-top: clamp(20px, 4vw, 56px); border-radius: 999px 999px var(--radius-photo) var(--radius-photo); }
.scene-trio .frame:nth-child(3) { --tilt: 1.4deg; transform: rotate(var(--tilt)); }
/* 6枚版（ハーフバースデー増量: 3列×2段。4枚目以降も傾きのリズムを継続 */
.scene-trio--six .frame:nth-child(4) { --tilt: 1.2deg; transform: rotate(var(--tilt)); margin-top: clamp(8px, 1.5vw, 20px); border-radius: 999px 999px var(--radius-photo) var(--radius-photo); }
.scene-trio--six .frame:nth-child(5) { --tilt: -1.3deg; transform: rotate(var(--tilt)); margin-top: clamp(20px, 4vw, 56px); border-radius: var(--radius-photo); }
.scene-trio--six .frame:nth-child(6) { --tilt: 1.6deg; transform: rotate(var(--tilt)); margin-top: clamp(8px, 1.5vw, 20px); }
/* 4枚版（マタニティ増量: モバイル2×2 / デスクトップ4列） */
.scene-quad { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 2vw, 28px); align-items: start; }
@media (min-width: 720px) { .scene-quad { grid-template-columns: repeat(4, 1fr); } }
.scene-quad .frame { aspect-ratio: 3 / 4; border: 5px solid #fff; box-shadow: 0 12px 28px -16px rgba(92, 74, 58, 0.3); }
.scene-quad .frame:nth-child(1) { --tilt: -1.6deg; transform: rotate(var(--tilt)); }
.scene-quad .frame:nth-child(2) { margin-top: clamp(20px, 4vw, 56px); border-radius: 999px 999px var(--radius-photo) var(--radius-photo); }
.scene-quad .frame:nth-child(3) { --tilt: 1.4deg; transform: rotate(var(--tilt)); }
.scene-quad .frame:nth-child(4) { --tilt: -1.1deg; transform: rotate(var(--tilt)); margin-top: clamp(12px, 2.5vw, 36px); }
/* 被写体位置に合わせた個別クロップ指定 */
.scene-trio img.pos-top, .scene-quad img.pos-top { object-position: 50% 18%; }
.scene-trio img.pos-low, .scene-quad img.pos-low { object-position: 50% 78%; }
.scene-quad img.pos-left { object-position: 62% 50%; } /* nbp14（横位置）の顔が収まる位置 */
.scene-quad img.pos-face-r { object-position: 70% 50%; } /* nb-r4-4（横位置・右寄りの顔とくま耳が収まる位置） */
.scene-grid6 img.pos-face { object-position: 50% 30%; }
.scene-grid6 img.pos-baby { object-position: 55% 60%; }
.scene-grid6 img.pos-mid { object-position: 50% 42%; }

.scene-grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.6vw, 20px); }
.scene-grid6 .frame { aspect-ratio: 1; border: 4px solid #fff; box-shadow: 0 10px 24px -14px rgba(92, 74, 58, 0.28); }
.scene-grid6 .frame:nth-child(3n+1) { --tilt: -1.2deg; transform: rotate(var(--tilt)); }
.scene-grid6 .frame:nth-child(3n+2) { --ty: clamp(12px, 2.5vw, 32px); transform: translateY(var(--ty)); }
.scene-grid6 .frame:nth-child(3n) { --tilt: 1.2deg; transform: rotate(var(--tilt)); }

.golden-note {
  margin-top: clamp(40px, 6vw, 64px);
  background: var(--pink);
  border-radius: var(--radius-card);
  padding: clamp(20px, 3vw, 36px);
  padding-right: clamp(84px, 12vw, 120px);
  max-width: 620px;
  position: relative;
}
/* 黄金期=時間の訴求に時計イラスト */
.golden-note .golden-clock {
  position: absolute;
  right: clamp(14px, 2.5vw, 26px);
  top: clamp(16px, 3vw, 30px);
  width: clamp(56px, 8vw, 80px);
  height: auto;
  pointer-events: none;
}
.golden-note h4 { font-family: var(--font-display); font-size: clamp(15px, 2vw, 19px); font-weight: 700; }
.golden-note p { font-size: 13px; color: rgba(92, 74, 58, 0.75); margin-top: 10px; }
.golden-note .push { font-size: 13px; font-weight: 700; color: var(--brown); margin-top: 10px; } /* pink面上のためbrown（7.07:1） */

.scene-close { text-align: center; margin-top: clamp(48px, 7vw, 80px); }
.scene-close p { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 2.2vw, 21px); letter-spacing: 0.08em; border-bottom: 3px solid var(--rose); padding-bottom: 8px; }

/* ---------- 成長タイムライン（軽量版） ---------- */
.growth-tl {
  margin-top: clamp(72px, 10vw, 140px);
  background: var(--pink);
  border-radius: 32px;
  padding: clamp(28px, 4.5vw, 56px) clamp(18px, 3vw, 48px) clamp(28px, 4vw, 48px);
  position: relative;
}
/* スカラップ（波形縁取り）上端 */
.growth-tl::before {
  content: "";
  position: absolute;
  top: -13px; left: 28px; right: 28px;
  height: 14px;
  background: radial-gradient(circle at 14px 14px, var(--pink) 14px, transparent 14.5px);
  background-size: 30px 14px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.gtl-title { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 2.2vw, 22px); letter-spacing: 0.06em; margin-bottom: clamp(24px, 4vw, 40px); }
.gtl-title .gtl-title-jp { word-break: keep-all; } /* 「成長」の語中改行を防止（<wbr>位置でのみ折り返す） */
.gtl-title .hand { display: block; font-size: clamp(13px, 1.7vw, 16px); letter-spacing: 0.28em; text-transform: uppercase; color: var(--coral-text); line-height: 1.3; margin-bottom: 6px; }

/* --- フォールバック表示（JS無効・reduced-motion・gtl-on未付与時）: 縦積み/5列グリッドで静的表示 --- */
.gtl-sheet, .gtl-sheet-note, .gtl-progress, .gtl-nav, .gtl-hint { display: none; }
.gtl-slides { list-style: none; display: grid; grid-template-columns: 1fr; gap: clamp(20px, 4vw, 28px); }
@media (min-width: 720px) { .gtl-slides { grid-template-columns: repeat(5, 1fr); } }
.gtl-slide { text-align: center; position: relative; }
.gtl-motif { width: clamp(36px, 4.5vw, 54px); height: auto; margin: 0 auto 10px; display: block; }
.gtl-photo {
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 16px 16px;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 12px 26px -14px rgba(92, 74, 58, 0.3);
  background: var(--beige);
  max-width: 300px;
  margin-inline: auto;
}
.gtl-photo img { width: 100%; height: 100%; object-fit: cover; }
.gtl-label { font-size: 12px; font-weight: 700; margin-top: 12px; color: rgba(67, 54, 43, 0.9); line-height: 1.5; }
.gtl-label .hand { display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--coral-text); line-height: 1.4; }

/* --- ストーリーズ表示（D-13: fv.jsが .growth-tl に .gtl-on を付与）:
       Instagramストーリーズ風UI。sticky/スクロール追従は廃止。
       上部プログレスバー＋右タップ=次/左タップ=前＋5s自動進行（画面内のみ）＋スワイプ。
       モバイル・デスクトップ共通UI --- */
/* v13.2: 背面のリビング写真を廃止し、ストーリーズUIをセクション枠いっぱいに拡大（縦横比は維持） */
.gtl-on .gtl-stories { max-width: min(720px, 100%); margin-inline: auto; }
.gtl-on .gtl-board {
  position: relative;
  height: clamp(460px, 72vh, 700px);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(rgba(229, 184, 177, 0.3) 1.6px, transparent 1.7px),
    var(--cream);
  background-size: 30px 30px, auto;
  box-shadow: 0 20px 44px -26px rgba(92, 74, 58, 0.4);
  touch-action: pan-y; /* 縦スクロールは妨げず、横スワイプをJSで拾う */
}
/* ストーリーズ進行バー（ステージ数分。現在進行が5sで伸びる） */
.gtl-on .gtl-progress {
  display: flex; gap: 6px;
  list-style: none;
  position: absolute;
  top: 10px; left: 12px; right: 12px;
  z-index: 5;
}
.gtl-on .gtl-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(92, 74, 58, 0.25);
}
.gtl-on .gtl-bar i {
  display: block;
  width: 100%; height: 100%;
  border-radius: inherit;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
}
.gtl-on .gtl-bar.is-done i { transform: scaleX(1); }
.gtl-on .gtl-bar.is-active i { animation: gtl-fill 5s linear forwards; }
.gtl-paused .gtl-bar.is-active i { animation-play-state: paused; }
@keyframes gtl-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gtl-on .gtl-sheet {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
/* シートの上を写真が入れ替わっても読めるよう、うっすら白のベール */
.gtl-on .gtl-board::before { content: ""; position: absolute; inset: 0; background: rgba(251, 247, 242, 0.35); z-index: 1; }
.gtl-on .gtl-sheet-note {
  display: inline-block;
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 11px; font-weight: 700;
  color: var(--brown);
  white-space: nowrap;
}
.gtl-on .gtl-slides { position: absolute; inset: 0; display: block; z-index: 2; }
.gtl-on .gtl-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-soft);
  pointer-events: none;
}
.gtl-on .gtl-slide.is-current { opacity: 1; transform: none; }
.gtl-on .gtl-photo { width: min(58vw, 330px); max-width: none; }
.gtl-on .gtl-motif { margin-bottom: 8px; }
/* タップナビ（右2/3=次へ・左1/3=前へ。見た目は透明） */
.gtl-on .gtl-nav {
  display: block;
  position: absolute; top: 0; bottom: 0;
  z-index: 4;
  background: transparent;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
.gtl-on .gtl-nav--prev { left: 0; width: 34%; cursor: w-resize; }
.gtl-on .gtl-nav--next { right: 0; width: 66%; cursor: e-resize; }
.gtl-on .gtl-nav:focus-visible { outline: 3px solid var(--rose); outline-offset: -4px; border-radius: 24px; }
.gtl-on .gtl-hint {
  display: block;
  text-align: center;
  font-size: 11px; font-weight: 700;
  color: rgba(92, 74, 58, 0.65);
  margin-top: 12px;
}
.growth-tl .scene-close { margin-top: clamp(28px, 4vw, 44px); }

/* ---------- 05 COMPARISON（v9: 横スワイプなしの4列グリッド。390pxで一覧できる） ---------- */
.cmp {
  background: #fff;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  padding: clamp(10px, 2vw, 24px);
}
.cmp-row {
  display: grid;
  grid-template-columns: minmax(58px, 0.85fr) 1.25fr 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.cmp-row:last-child { border-bottom: none; }
.cmp-th {
  font-weight: 700;
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: 0.04em;
  padding: 14px 4px;
  word-break: keep-all;
  line-height: 1.5;
}
.cmp-cell {
  text-align: center;
  padding: 14px 4px;
  font-size: clamp(11px, 1.5vw, 13px);
  line-height: 1.5;
  word-break: keep-all;
}
.cmp-cell small { display: block; font-size: clamp(9px, 1.2vw, 11px); color: var(--gray); margin-top: 3px; font-weight: 400; }
.cmp-cell b { color: var(--coral-text); font-size: clamp(11px, 1.5vw, 13px); }
.cmp-cell .dim { color: rgba(92, 74, 58, 0.55); }
/* 自社列ハイライト */
.cmp-best { background: var(--rose-soft); font-weight: 700; }
.cmp-head .cmp-cell { font-size: clamp(10px, 1.4vw, 12px); font-weight: 700; letter-spacing: 0.06em; color: var(--gray); padding: 12px 4px; }
.cmp-head .cmp-best { color: var(--coral-text); border-radius: 14px 14px 0 0; }
.cmp-row:last-child .cmp-best { border-radius: 0 0 14px 14px; }
/* ◯△×アイコン（配色はトンマナに合わせた3色） */
.cmp .ic { display: inline-block; vertical-align: middle; }
.cmp .ic-best, .cmp .ic-good { color: #6d8a58; }
.cmp .ic-mid { color: #C6A14A; }
.cmp .ic-bad { color: #BC5B43; }
.compare-close { text-align: center; margin-top: clamp(32px, 5vw, 48px); font-size: 14px; color: rgba(92, 74, 58, 0.75); word-break: keep-all; }

/* ---------- 06 QUALITY & PROOF ---------- */
.dev-block { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 820px) { .dev-block { grid-template-columns: 5fr 7fr; } }
/* maho.webpは横長3:2素材で人物が左側 → 左寄せクロップ。アーチ型フレーム */
.dev-photo .frame { aspect-ratio: 4 / 5; border-radius: 999px 999px 24px 24px; border: 6px solid #fff; box-shadow: 0 16px 36px -18px rgba(92, 74, 58, 0.3); }
.dev-photo .frame img { object-position: 12% 50%; }
.dev-photo figcaption { margin-top: 16px; text-align: center; }
.dev-photo .role { font-size: 11px; color: var(--coral-text); letter-spacing: 0.2em; }
.dev-photo .name { font-family: var(--font-hand); font-weight: 700; font-size: 24px; letter-spacing: 0.1em; line-height: 1.3; color: var(--brown); }
.dev-photo .cred { font-size: 11px; color: var(--gray); }
.dev-message p { font-size: 14px; color: rgba(92, 74, 58, 0.8); line-height: 2.1; }
.dev-message p + p { margin-top: 18px; }
.dev-message .pull {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.5vw, 26px);
  color: var(--coral-text);
  line-height: 1.7;
  margin-bottom: 22px;
  display: block;
}

.quality-list { margin-top: clamp(64px, 9vw, 110px); display: grid; gap: 18px; }
.quality-item { display: flex; flex-direction: column; gap: 16px; padding: clamp(12px, 1.8vw, 16px) clamp(12px, 1.8vw, 16px) clamp(18px, 2.5vw, 24px); background: var(--cream); border: 2px dashed var(--pink-deep); border-radius: var(--radius-card); }
.quality-item .q-photo { aspect-ratio: 16 / 10; border-radius: calc(var(--radius-card) - 10px); }
.quality-item .q-body { display: flex; gap: 18px; align-items: flex-start; padding-inline: clamp(6px, 1vw, 10px); }
.quality-item .q-idx { font-family: var(--font-hand); font-weight: 700; color: var(--coral-text); font-size: 17px; letter-spacing: 0.14em; flex: none; width: 40px; line-height: 1.6; }
.quality-item h4 { font-size: 15px; font-weight: 700; }
.quality-item p { font-size: 13px; color: rgba(92, 74, 58, 0.7); margin-top: 4px; }
@media (min-width: 820px) { .quality-list { grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 32px); } }

.factory { margin-top: clamp(64px, 9vw, 110px); display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 820px) { .factory { grid-template-columns: 1fr 1fr; } }
.factory .frame { aspect-ratio: 16 / 10; border: 5px solid #fff; box-shadow: 0 12px 26px -16px rgba(92, 74, 58, 0.25); }
.factory .frame + .frame { margin-top: 14px; }
.factory-text p { font-size: 14px; color: rgba(92, 74, 58, 0.8); }
.factory-text p + p { margin-top: 16px; }

/* 大型カウンター */
.counters { margin-top: clamp(72px, 10vw, 130px); display: grid; gap: clamp(36px, 6vw, 0px); grid-template-columns: 1fr; text-align: center; }
@media (min-width: 720px) { .counters { grid-template-columns: repeat(3, 1fr); } }
.counter .c-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(52px, 7.5vw, 100px);
  line-height: 1.1;
  color: var(--brown);
  font-variant-numeric: tabular-nums;
}
.counter .c-num .unit { font-size: 0.34em; color: var(--coral-text); }
.counter .c-label { font-size: 12px; font-weight: 700; margin-top: 10px; letter-spacing: 0.1em; }
.counter .c-label .c-sub { display: inline-block; margin-left: 8px; font-size: 11px; color: var(--coral-text); }
.counter .c-src { font-size: 11px; color: var(--gray); margin-top: 4px; max-width: 260px; margin-inline: auto; }

.proof-shots { margin-top: clamp(56px, 8vw, 90px); display: grid; gap: 20px; }
@media (min-width: 820px) { .proof-shots { grid-template-columns: repeat(3, 1fr); align-items: start; } }
/* 実績1点のみの場合は中央寄せ */
.proof-shots--single { justify-items: center; }
@media (min-width: 820px) { .proof-shots--single { grid-template-columns: 1fr; } .proof-shots--single .proof-shot { max-width: 560px; width: 100%; } }
.proof-shot { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px; box-shadow: 0 14px 30px -24px rgba(92, 74, 58, 0.3); }
.proof-shot h4 { font-size: 12px; font-weight: 700; text-align: center; margin-bottom: 12px; }
.proof-shot .frame { border-radius: 12px; }
.proof-shot .frame img { object-fit: contain; }
.proof-shot .note { text-align: center; margin-top: 10px; }

/* ---------- 実績カルーセル（v13.1: スワイプ＋左右矢印＋ドット。自動送りなし） ---------- */
.proof-carousel { position: relative; margin-top: clamp(56px, 8vw, 90px); max-width: 620px; margin-inline: auto; }
.pc-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px;
  border-radius: var(--radius-card);
}
.pc-track::-webkit-scrollbar { display: none; }
.pc-track:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.pc-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
/* スライド内の写真枠は3:2で統一（レターボックスはクリーム地） */
.pc-slide .frame { aspect-ratio: 3 / 2; background: var(--cream); }
/* 雑誌表紙2冊を並べる枠 */
.proof-carousel .frame--covers { display: flex; justify-content: center; gap: 10px; padding: 10px; }
.proof-carousel .frame--covers img { width: auto; max-width: 48%; height: 100%; object-fit: contain; border-radius: 6px; }
.pc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(92, 74, 58, 0.4);
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pc-arrow--prev { left: -6px; }
.pc-arrow--next { right: -6px; }
@media (min-width: 820px) {
  .pc-arrow--prev { left: -20px; }
  .pc-arrow--next { right: -20px; }
}
.pc-arrow:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .pc-arrow:not(:disabled):hover { transform: translateY(-50%) scale(1.08); }
}
.pc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.pc-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(92, 74, 58, 0.25);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pc-dot.is-active { background: var(--coral); transform: scale(1.3); }

/* ---------- 07 PATTERNS（v9: 2×2グリッド。柄見本16:7・作例4:3を全カード統一） ---------- */
.patterns-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 2vw, 32px);
}
.pattern-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: clamp(12px, 2.5vw, 30px);
  display: flex; flex-direction: column;
  box-shadow: 0 18px 40px -28px rgba(92, 74, 58, 0.35);
}
.pattern-panel .p-idx { font-family: var(--font-hand); font-weight: 700; font-size: clamp(12px, 1.6vw, 15px); color: var(--coral-text); letter-spacing: 0.18em; line-height: 1; }
.pattern-panel .swatch { aspect-ratio: 16 / 7; margin-top: 12px; border-radius: 14px; }
/* D-15: 白無地スウォッチが背景と同化しないよう薄い枠を付与 */
.pattern-panel .swatch--bordered { border: 1px solid var(--line); }
.pattern-panel h3 { font-family: var(--font-display); font-size: clamp(13px, 1.9vw, 21px); font-weight: 700; margin-top: 14px; letter-spacing: 0.04em; word-break: keep-all; }
.pattern-panel .p-desc { font-size: clamp(11px, 1.4vw, 12px); color: rgba(92, 74, 58, 0.7); margin-top: 6px; }
.pattern-panel .p-example-label { font-size: 11px; font-weight: 700; color: var(--coral-text); margin-top: auto; padding-top: 14px; }
.pattern-panel .example { aspect-ratio: 4 / 3; margin-top: 8px; border-radius: 14px; }

/* ---------- 08 ORDER ---------- */
.order-sec { background: #fff; border-block: 1px solid var(--line); }
.order-size-card {
  text-align: center;
  border: 2px dashed var(--pink-deep);
  border-radius: 28px;
  background: var(--cream);
  padding: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(40px, 6vw, 56px);
}
.order-size-card .s-label { font-family: var(--font-hand); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; font-size: 13px; color: var(--coral-text); line-height: 1; }
.order-size-card .s-size { font-size: 15px; font-weight: 700; margin-top: 12px; }
/* 価値スタック見せ消し（単品換算27,820円相当 → 19,800円） */
.order-size-card .s-stack { margin-top: 14px; font-size: 13px; color: var(--brown); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.order-size-card .s-stack .s-stack-label { font-size: 11px; color: var(--gray); letter-spacing: 0.08em; }
.order-size-card .s-stack s { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 2.2vw, 20px); color: rgba(92, 74, 58, 0.78); }
.order-size-card .s-price { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 5vw, 56px); color: var(--coral-text); line-height: 1.2; margin-top: 2px; }
.order-size-card .s-tax { font-size: 11px; color: var(--gray); }
.order-size-card .s-copy { font-size: 14px; font-weight: 700; margin-top: 18px; }
.order-size-card .s-desc { font-size: 12px; color: rgba(92, 74, 58, 0.7); margin-top: 8px; }
.order-size-card .s-stack-note { font-size: 11px; color: var(--gray); margin-top: 14px; text-align: left; line-height: 1.8; }

.order-step-label { font-size: 14px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.order-step-label .n { font-family: var(--font-hand); font-weight: 700; font-size: 22px; color: var(--coral-text); line-height: 1; }
.order-step-label small { font-weight: 400; font-size: 11px; color: var(--gray); }

.pattern-select { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .pattern-select { grid-template-columns: repeat(4, 1fr); } }
.pattern-option {
  border: 2px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: var(--cream);
  transition: border-color 0.3s, transform 0.4s var(--ease-out-expo), box-shadow 0.4s;
  text-align: center;
  padding: 0;
  width: 100%;
  position: relative;
}
.pattern-option .thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.pattern-option .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out-expo); }
.pattern-option:hover { border-color: var(--rose); transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(92, 74, 58, 0.35); }
.pattern-option:hover .thumb img { transform: scale(1.06); }
.pattern-option:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.pattern-option .p-name { font-size: 11px; font-weight: 700; padding: 10px 6px; display: block; line-height: 1.5; color: rgba(92, 74, 58, 0.85); }
.pattern-option.is-selected { border-color: var(--coral); background: #fff; box-shadow: 0 12px 30px -14px rgba(216, 154, 146, 0.55); }
.pattern-option.is-selected .p-name { color: var(--coral-text); }
.pattern-option .check {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--coral); color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.3s, transform 0.4s var(--ease-spring);
  z-index: 2;
}
.pattern-option.is-selected .check { opacity: 1; transform: scale(1); }

/* 柄プレビュー（スウォッチ選択で作例と柄名が切り替わる） */
.order-preview {
  margin-top: 16px;
  display: flex; align-items: center; gap: 16px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}
.order-preview .op-img {
  flex: none;
  width: clamp(96px, 18vw, 132px); height: clamp(96px, 18vw, 132px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--beige);
  display: block;
}
.order-preview .op-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-preview .op-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.order-preview .op-body b { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--brown); }
.order-preview .op-body small { font-size: 11px; color: var(--gray); }

/* 選べる特典（ラジオカード → attributes[選べる特典] で注文属性送信） */
.gift-select { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gift-option {
  position: relative;
  display: block;
  border: 2px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--cream);
  cursor: pointer;
  transition: border-color 0.3s, transform 0.4s var(--ease-out-expo), box-shadow 0.4s;
}
.gift-option input { position: absolute; opacity: 0; pointer-events: none; }
.gift-option .thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.gift-option .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out-expo); }
.gift-option:hover { border-color: var(--rose); transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(92, 74, 58, 0.35); }
.gift-option:hover .thumb img { transform: scale(1.06); }
.gift-option .g-name { font-size: 12px; font-weight: 700; padding: 10px 8px; display: block; text-align: center; line-height: 1.5; color: rgba(92, 74, 58, 0.85); }
.gift-option .g-name small { display: block; font-weight: 400; font-size: 10px; color: var(--gray); }
.gift-option .check {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--coral); color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.3s, transform 0.4s var(--ease-spring);
  z-index: 2;
}
.gift-option.is-selected { border-color: var(--coral); background: #fff; box-shadow: 0 12px 30px -14px rgba(216, 154, 146, 0.55); }
.gift-option.is-selected .g-name { color: var(--coral-text); }
.gift-option.is-selected .check { opacity: 1; transform: scale(1); }
.gift-option:has(input:focus-visible) { outline: 3px solid var(--rose); outline-offset: 2px; }

/* 配送希望日（折りたたみ・任意。attributes[配送希望日]/[配送時間帯]で送信） */
.delivery-box { border: 2px dashed var(--pink-deep); border-radius: 18px; background: var(--cream); }
.delivery-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px clamp(16px, 3vw, 22px);
  font-size: 13px; font-weight: 700;
  text-align: left;
}
.delivery-toggle:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; border-radius: 18px; }
.delivery-toggle .dlv-caret { font-size: 16px; color: var(--coral-text); transition: transform 0.4s var(--ease-out-expo); }
.delivery-toggle[aria-expanded="true"] .dlv-caret { transform: rotate(45deg); }
.delivery-body { padding: 0 clamp(16px, 3vw, 22px) 18px; }
.delivery-fields { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) {
  .delivery-fields { grid-template-columns: 1fr 1fr; }
  .delivery-field--pref { grid-column: 1 / -1; } /* 都道府県は1行使い */
}
/* C-9: min-width:0 でグリッド子のはみ出し（date inputの固有幅）を防止 */
.delivery-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.delivery-field label { font-size: 11px; font-weight: 700; color: var(--gray); letter-spacing: 0.04em; }
.delivery-field input, .delivery-field select {
  font-family: inherit;
  font-size: 14px;
  color: var(--brown);
  padding: 11px 12px;
  border: 1px solid var(--pink-deep);
  border-radius: 12px;
  background: #fff;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.delivery-field input[type="date"] { display: block; } /* iOS Safariの内在幅によるはみ出し防止 */
/* appearance:none で消えるselectの矢印を自前で描画 */
.delivery-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A05A50' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.delivery-field input:focus-visible, .delivery-field select:focus-visible { outline: 3px solid var(--rose); outline-offset: 1px; }
.delivery-hint { font-size: 11px; color: var(--gray); line-height: 1.8; margin-top: 10px; }
/* C-10: 地域選択後の最短お届け日ヒント */
.delivery-hint--min { color: var(--coral-text); font-weight: 700; font-size: 12px; }
.delivery-clear { margin-top: 8px; font-size: 11px; color: var(--coral-text); text-decoration: underline; padding: 4px 0; }
.delivery-clear:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* C-11: ギフト対応チェック（attributes[納品書]を切り替え） */
.gift-wrap-check {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px;
  padding: 14px clamp(16px, 3vw, 22px);
  border: 2px dashed var(--pink-deep);
  border-radius: 18px;
  background: var(--cream);
  cursor: pointer;
  font-size: 13px; font-weight: 700;
  color: var(--brown);
}
.gift-wrap-check input { position: absolute; opacity: 0; pointer-events: none; }
.gift-wrap-check .gwc-box {
  flex: none;
  width: 24px; height: 24px;
  border: 2px solid var(--pink-deep);
  border-radius: 8px;
  background: #fff;
  display: grid; place-items: center;
  color: #fff;
  font-size: 13px;
  transition: background-color 0.25s, border-color 0.25s;
}
.gift-wrap-check input:checked ~ .gwc-box { background: var(--coral); border-color: var(--coral); }
.gift-wrap-check:has(input:focus-visible) { outline: 3px solid var(--rose); outline-offset: 2px; }
.gift-wrap-check .gwc-text { line-height: 1.6; }

.order-summary {
  margin-top: clamp(36px, 5vw, 48px);
  background: var(--pink);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
}
.order-summary .os-label { font-size: 11px; color: var(--brown); letter-spacing: 0.15em; } /* pink面上のためbrown（7.07:1） */
.order-summary .os-selection { font-size: 14px; font-weight: 700; margin-top: 6px; min-height: 1.6em; overflow-wrap: anywhere; } /* 長い柄名でも溢れず折返す（keep-allは390pxで横溢れバグの原因だった） */
.order-summary .os-gift { font-size: 12px; color: var(--brown); margin-top: 4px; } /* pink面上のためbrown */
.order-summary .os-gift--fixed { margin-top: 2px; font-size: 11px; }
.order-summary .trust { margin-top: 14px; font-size: 11px; color: var(--brown); } /* pink面上のためbrown（7.07:1） */

/* ---------- D-16: ¥19,800の見せ方リッチ化（09カートサマリー・13最終オファー共通） ----------
   大型タイポ＋見せ消し（27,820円相当）→矢印→¥19,800の階層＋柔らかいバッジ＋キラキラ */
.price-pop {
  position: relative;
  max-width: 400px;
  margin: 18px auto 20px;
  padding: clamp(22px, 3.5vw, 30px) clamp(20px, 4vw, 36px) clamp(18px, 3vw, 26px);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(247, 232, 230, 0.75), transparent 70%),
    #fff;
  border: 2px dashed var(--pink-deep);
  border-radius: 26px;
  box-shadow: 0 16px 36px -22px rgba(92, 74, 58, 0.35);
  text-align: center;
}
.price-pop .pp-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--coral-text);
  color: #FBF7F2; /* #A05A50上のcream=約4.8:1（AA充足） */
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 999px;
  padding: 5px 18px;
  white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(160, 90, 80, 0.6);
}
.price-pop .pp-was { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--gray); margin-top: 6px; }
.price-pop .pp-was s { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 2.4vw, 21px); color: rgba(92, 74, 58, 0.72); }
.price-pop .pp-arrow {
  display: block;
  width: 14px; height: 14px;
  margin: 8px auto 2px;
  border-right: 3px solid var(--coral);
  border-bottom: 3px solid var(--coral);
  border-radius: 2px;
  transform: rotate(45deg);
}
.price-pop .pp-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(46px, 8vw, 72px);
  color: var(--coral-text);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.price-pop .pp-yen { font-size: 0.45em; vertical-align: 0.55em; margin-right: 0.05em; }
.price-pop .pp-tax { font-size: 11px; font-weight: 700; color: var(--brown); margin-top: 2px; }
.price-pop .price-pop-tw { width: 46px; height: auto; }
.price-pop .price-pop-tw--l { left: -14px; top: -20px; }
.price-pop .price-pop-tw--r { right: -10px; bottom: 18px; width: 34px; }
/* 13 最終オファー内: .hugeの巨大タイポを内包（既存.hugeスタイルを継承） */
.price-pop--final { max-width: 480px; margin-top: 24px; }
.price-pop--final .huge { margin-top: 0; font-size: clamp(56px, 10vw, 120px); }
.order-summary .price-pop { margin-bottom: 22px; }
/* submitボタンのdisabled状態（buyCta） */
.btn:disabled { pointer-events: none; opacity: 0.35; filter: saturate(0.4); cursor: not-allowed; }
.order-limit { text-align: center; font-size: 12px; color: var(--gray); margin-top: 22px; }
.order-limit strong { color: var(--coral-text); }

/* ---------- 09 BONUS ---------- */
.bonus-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  color: #fff; background: var(--coral);
  border-radius: 999px; padding: 7px 18px;
}
.bonus-tag--sage { background: #93A87F; }
.bonus-tag--rose { background: #B98A83; }
.bonus-block { margin-top: 28px; }
.bonus-hero { position: relative; border-radius: 26px; overflow: hidden; margin-top: 20px; }
.bonus-hero img { width: 100%; max-height: 480px; object-fit: cover; }
.bonus-hero .overlay {
  position: absolute; inset: auto 0 0 0;
  padding: 72px clamp(20px, 4vw, 40px) clamp(20px, 3vw, 32px);
  background: linear-gradient(to top, rgba(67, 54, 43, 0.88), rgba(67, 54, 43, 0.4) 55%, transparent);
  color: #fff;
}
.bonus-hero .overlay .en { font-family: var(--font-hand); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; font-size: 12px; opacity: 0.9; }
.bonus-hero .overlay h3 { font-family: var(--font-display); font-size: clamp(19px, 3vw, 28px); font-weight: 700; line-height: 1.6; margin-top: 6px; }
.bonus-detail { display: grid; gap: 18px; margin-top: 18px; }
@media (min-width: 820px) { .bonus-detail { grid-template-columns: 1fr 2fr; align-items: start; } }
.bonus-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px; text-align: center; }
.bonus-card .frame { background: var(--cream); border-radius: 14px; }
.bonus-card .frame img { object-fit: contain; max-height: 200px; }
.bonus-card h4 { font-size: 13px; font-weight: 700; color: var(--coral-text); margin-top: 12px; }
.bonus-card p { font-size: 11px; color: var(--gray); margin-top: 2px; }
.bonus-detail .desc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(18px, 3vw, 28px); font-size: 13px; color: rgba(92, 74, 58, 0.8); }
.bonus-detail .desc .frame { margin-bottom: 16px; border-radius: 14px; }
.bonus-detail .desc .frame img { object-fit: contain; max-height: 380px; }

.review-choice { display: grid; gap: 20px; margin-top: 24px; }
@media (min-width: 720px) { .review-choice { grid-template-columns: 1fr 1fr; } }
.choice-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; position: relative; box-shadow: 0 16px 36px -26px rgba(92, 74, 58, 0.35); }
.choice-card .c-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  background: rgba(216, 154, 146, 0.95); color: #fff;
  border-radius: 999px; padding: 5px 14px;
}
.choice-card .body { padding: clamp(18px, 3vw, 28px); }
.choice-card h4 { font-size: 15px; font-weight: 700; }
.choice-card p { font-size: 13px; color: rgba(92, 74, 58, 0.7); margin-top: 8px; }
/* B-4: 特典カードのメイン写真は両カード同一アスペクト（4:3）に統一し、
   被写体が収まるようobject-positionを個別調整 */
.choice-card > .frame { border-radius: 0; aspect-ratio: 4 / 3; }
.choice-card > .frame img { width: 100%; height: 100%; object-fit: cover; }
/* v13.1: 特典Bバッグは全体（ストラップ含む）が写る4:5カット×4:5フレームで見切れなし（うさぎカードと非対称でOK） */
.choice-card > .frame.frame--tall { aspect-ratio: 4 / 5; }

/* B-5: 造花ブーケ特典（5色を小さく並べてランダム感を見せる） */
.bouquet-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px, 1.2vw, 14px);
  margin-top: 20px;
}
.bouquet-item { text-align: center; }
.bouquet-item .frame {
  aspect-ratio: 3 / 4;
  border: 3px solid #fff;
  border-radius: 12px;
  box-shadow: 0 10px 22px -14px rgba(92, 74, 58, 0.3);
}
.bouquet-item .frame img { object-position: 50% 32%; } /* 花部分が収まる位置 */
.bouquet-item:nth-child(odd) .frame { transform: rotate(-1.6deg); }
.bouquet-item:nth-child(even) .frame { transform: rotate(1.4deg); margin-top: clamp(4px, 1vw, 10px); }
.bouquet-item figcaption { font-size: clamp(10px, 1.3vw, 12px); font-weight: 700; color: rgba(92, 74, 58, 0.75); margin-top: 8px; }

/* ---------- 10 GIFT ---------- */
.gift-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 820px) { .gift-grid { grid-template-columns: 5fr 7fr; } }
.gift-grid .frame { aspect-ratio: 4 / 5; max-width: 420px; margin-inline: auto; border-radius: 999px 999px 24px 24px; border: 6px solid #fff; box-shadow: 0 16px 36px -18px rgba(92, 74, 58, 0.3); }
.gift-quote { position: relative; padding-left: clamp(20px, 3vw, 36px); border-left: 3px solid var(--rose); }
.gift-quote p { font-size: 14px; color: rgba(92, 74, 58, 0.8); line-height: 2.1; }
.gift-quote p + p { margin-top: 14px; }
.gift-quote .from { font-size: 11px; color: var(--gray); margin-top: 16px; text-align: right; }
.gift-quote .gift-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }

/* ---------- 11 FAQ ---------- */
.faq-list { border-top: 2px dashed var(--pink-deep); }
.faq-item { border-bottom: 2px dashed var(--pink-deep); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px;
  text-align: left;
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.04em;
  transition: color 0.3s;
}
.faq-q:hover { color: var(--coral-text); }
.faq-q:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.faq-q .q-mark { font-family: var(--font-hand); font-weight: 700; color: var(--coral-text); margin-right: 14px; font-size: 18px; }
.faq-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pink); position: relative; transition: transform 0.5s var(--ease-out-expo), background-color 0.3s; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; border-radius: 2px; background: var(--coral-text); transform: translate(-50%, -50%); transition: transform 0.4s; }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-icon { transform: rotate(135deg); background: var(--pink-deep); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease-out-expo); }
.faq-a > div { overflow: hidden; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p { font-size: 13px; color: rgba(92, 74, 58, 0.75); padding: 0 4px 26px; max-width: 680px; }
html:not(.js) .faq-a { grid-template-rows: 1fr; }

/* ---------- 12 SUPPORT ---------- */
.guarantee-list { display: grid; gap: 16px; }
@media (min-width: 720px) { .guarantee-list { grid-template-columns: repeat(3, 1fr); } }
.guarantee-item { background: var(--cream); border: 2px dashed var(--pink-deep); border-radius: var(--radius-card); padding: clamp(20px, 3vw, 32px); text-align: center; }
/* 保証カードのイラスト（yuru5シリーズ: 盾・トラック・フキダシ） */
.guarantee-item .g-illust { width: clamp(56px, 8vw, 76px); height: auto; margin: 0 auto 14px; display: block; }
.guarantee-item h4 { font-size: 14px; font-weight: 700; }
.guarantee-item p { font-size: 12px; color: var(--gray); margin-top: 6px; }

.line-card {
  margin-top: clamp(56px, 8vw, 80px);
  display: grid; gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
  box-shadow: 0 20px 44px -30px rgba(92, 74, 58, 0.3);
}
@media (min-width: 720px) { .line-card { grid-template-columns: 2fr 3fr; } }
.line-card .frame { aspect-ratio: 1; border-radius: 0; }
@media (min-width: 720px) { .line-card .frame { aspect-ratio: auto; height: 100%; } }
.line-card .frame img { object-position: 15% 45%; }
.line-card .body { padding: clamp(24px, 4vw, 48px); }
.line-card .concierge { font-size: 10px; letter-spacing: 0.3em; color: var(--coral-text); font-weight: 700; }
.line-card .name { font-family: var(--font-hand); font-weight: 700; font-size: 24px; letter-spacing: 0.1em; margin-top: 6px; color: var(--brown); }
.line-card .cred { font-size: 11px; color: var(--gray); }
.line-card blockquote { font-size: 13px; color: rgba(92, 74, 58, 0.75); margin-block: 18px 24px; line-height: 2; }

/* ---------- 13 FINAL ---------- */
.final-sec { background: var(--pink); border-top: 1px solid var(--line); }
.final-anchor { text-align: center; font-size: 13px; color: var(--brown); } /* pink面上のためbrown（7.07:1） */
.final-anchor .note, .final-sec .note { color: var(--brown); } /* 打消し表示の判読性確保（景表法運用） */
.final-price { text-align: center; margin-top: 24px; }
.final-price .p-name { font-size: 13px; color: var(--brown); letter-spacing: 0.15em; } /* pink面上のためbrown（7.07:1） */
.final-price .huge {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(60px, 12vw, 150px);
  line-height: 1.1; color: var(--coral-text);
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}
.final-price .huge .small-yen { font-size: 0.42em; vertical-align: 0.6em; margin-right: 0.05em; }
.final-price .p-size { font-size: 12px; color: var(--brown); margin-top: 12px; } /* pink面上のためbrown（7.07:1） */
.final-price .p-limit { font-size: 13px; font-weight: 700; color: var(--brown); margin-top: 10px; } /* pink面上のためbrown（7.07:1） */
.final-price .p-limit-sub { font-size: 11px; color: var(--brown); } /* pink面上のためbrown（7.07:1） */

.final-bonus {
  max-width: 460px; margin: clamp(40px, 6vw, 56px) auto 0;
  background: #fff;
  border: 2px dashed var(--pink-deep);
  border-radius: 220px 220px 24px 24px;
  padding: clamp(36px, 5vw, 48px) clamp(24px, 4vw, 40px) clamp(24px, 4vw, 32px);
  text-align: center;
}
.final-bonus .en { font-family: var(--font-hand); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; font-size: 13px; color: var(--coral-text); line-height: 1; }
.final-bonus .end-note { font-size: 11px; font-weight: 700; color: var(--coral-text); margin-top: 6px; }
.final-bonus h3 { font-family: var(--font-display); font-size: clamp(19px, 3vw, 25px); font-weight: 700; line-height: 1.7; margin-block: 10px 18px; }
.final-bonus .frame { max-width: 300px; margin-inline: auto; border-radius: 16px; }
.final-bonus .frame img { max-height: 220px; }

.value-stack { max-width: 560px; margin: clamp(40px, 6vw, 56px) auto 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(24px, 4vw, 40px); }
.value-stack h4 { text-align: center; font-size: 14px; font-weight: 700; margin-bottom: 18px; }
.value-stack h4 .vs-sub { display: block; font-size: 12px; font-weight: 700; color: var(--coral-text); margin-top: 6px; }
.value-stack h4 .vs-sub s { color: rgba(92, 74, 58, 0.6); font-weight: 400; }
.value-stack ul { list-style: none; }
.value-stack li { display: flex; gap: 12px; align-items: baseline; font-size: 13px; color: var(--brown); padding-block: 8px; } /* AA充足のため透過なしbrown */
.value-stack li .vs-price { margin-left: auto; font-size: 11px; color: var(--gray); white-space: nowrap; }
.value-stack li::before { content: "♡"; color: var(--rose); flex: none; }
.value-stack li.star { font-weight: 700; color: var(--coral-text); }
.value-stack li.star::before { content: "★"; }
.final-cta { max-width: 560px; margin: clamp(36px, 5vw, 48px) auto 0; text-align: center; }
.final-cta .trust { font-size: 11px; color: var(--brown); margin-top: 14px; } /* pink面上のためbrown（7.07:1） */

/* P.S. */
.ps-block { max-width: 620px; margin: clamp(80px, 12vw, 140px) auto 0; }
.ps-block .ps-label { font-size: clamp(19px, 2.6vw, 24px); letter-spacing: 0.3em; color: var(--coral-text); text-align: center; margin-bottom: 28px; line-height: 1; }
.ps-card { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(28px, 4vw, 48px); box-shadow: 0 20px 44px -30px rgba(92, 74, 58, 0.3); }
.ps-card .who { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.ps-card .avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex: none; border: 3px solid var(--pink-deep); }
.ps-card .avatar img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 20% 30%;
  transform: translate(26%, 22%) scale(2.1);
  transform-origin: 22% 25%;
}
.ps-card .who .role { font-size: 11px; color: var(--coral-text); }
.ps-card .who .name { font-family: var(--font-hand); font-weight: 700; font-size: 20px; letter-spacing: 0.1em; line-height: 1.3; color: var(--brown); }
.ps-card p { font-size: 14px; color: rgba(92, 74, 58, 0.8); line-height: 2.2; }
.ps-card p + p { margin-top: 16px; }

/* ---------- フッター ---------- */
.site-footer { background: var(--ink); color: rgba(251, 247, 242, 0.55); text-align: center; padding: clamp(48px, 7vw, 72px) var(--gutter) calc(clamp(48px, 7vw, 72px) + 76px); }
.site-footer .logo { font-family: var(--font-hand); font-weight: 700; font-size: 20px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(251, 247, 242, 0.9); }
.site-footer .jp { font-size: 11px; margin-top: 4px; }
.site-footer .copy { font-size: 11px; margin-top: 24px; }
@media (min-width: 768px) { .site-footer { padding-bottom: clamp(48px, 7vw, 72px); } }

/* ---------- モバイル固定CTAバー ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(251, 247, 242, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transform: translateY(110%);
  transition: transform 0.5s var(--ease-out-expo);
}
.mobile-cta.is-visible { transform: translateY(0); }
html:not(.js) .mobile-cta { transform: none; }
.mobile-cta .info { min-width: 0; }
.mobile-cta .p-name { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v9: 追従バナーからは金額を出さない（金額の初出はカートセクション） */
.mobile-cta .p-sub { font-size: 11px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-cta .btn { flex: none; padding: 13px 22px; font-size: 13px; }
@media (min-width: 768px) { .mobile-cta { display: none; } }

/* ---------- コンテナクエリ ---------- */
.pattern-panel { container-type: inline-size; }
@container (min-width: 420px) {
  .pattern-panel h3 { font-size: 22px; }
  .pattern-panel .p-desc { font-size: 13px; }
}

/* ---------- text-wrap ---------- */
h1, h2, h3 { text-wrap: balance; }

/* 長文見出しの改行制御（iPhone 15 Pro 393px基準）: <wbr>位置でのみ折り返す */
.sec-title--keepall { word-break: keep-all; overflow-wrap: anywhere; }

/* D-14: 1行見出し（390pxで折り返さないサイズ・字間に調整） */
.sec-title--one {
  font-size: clamp(21px, 5.9vw, 42px);
  letter-spacing: 0.03em;
  word-break: keep-all;
  white-space: nowrap;
}

/* ---------- prefers-reduced-motion: 全アニメーション停止＋完成コラージュ静的表示 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-clip] { opacity: 1; clip-path: none; }
  .js .hero-fade { opacity: 1; transform: none; }
  /* FV: 代表写真1枚＋テキストで静的に成立（フラッシュ・スタンプ・浮遊なし） */
  .js .grow-frame { opacity: 1; transform: rotate(-2.5deg) scale(1); animation: none !important; transition: none; }
  .js .tpol { opacity: 1; transform: rotate(var(--rot)) scale(1); animation: none !important; transition: none; }
  .hero-flash { display: none; }
  .deco-float, .deco-twinkle, .hero-deco { animation: none !important; }
  /* 誘導吹き出し・切替演出も停止（fv.js側でも抑止済み・二重ガード） */
  .grow-guide { display: none !important; }
  .js .grow-img.is-in, .grow-caption.is-swap { animation: none !important; }
  /* 成長タイムライン: ストーリーズ化せず静的表示＋自動進行停止（fv.jsがgtl-onを付与しない・二重ガード） */
  .gtl-on .gtl-bar.is-active i { animation: none !important; transform: scaleX(1); }
  .frame.is-boing { animation: none !important; }
  .marquee-track { animation: none; transform: none; }
  .site-header { transform: none; background: rgba(251, 247, 242, 0.92); }
  .mobile-cta { transform: none; }
}

/* ギフトチェックのイラスト（絵文字廃止） */
.gwc-text .gwc-gift { width: 22px; height: auto; vertical-align: -5px; margin-right: 2px; }

/* ============================================================
   v13.2: カートUI刷新（セクション09 2カラム＋注文サマリー / 13 カート再掲）
   ============================================================ */
/* --- 09: デスクトップ2カラム（左=選択ステップ / 右=注文サマリーsticky） --- */
.order-grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 44px); }
.order-sec .order-size-card { max-width: 760px; margin-inline: auto; }
@media (min-width: 960px) {
  .order-sec .container--narrow { max-width: 1120px; } /* 2カラム化のため拡張 */
  .order-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: clamp(24px, 3vw, 36px); align-items: start; }
  .order-aside { position: sticky; top: 72px; }
}

/* --- 注文サマリーカード（カート画面らしい注文票。トンマナはv13のまま） --- */
.order-summary--card {
  margin-top: 0;
  text-align: left;
  background: #fff;
  border: 2px dashed var(--pink-deep);
}
.order-summary--card .os-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: 0.08em;
  color: var(--brown);
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--pink-deep);
}
.order-summary--card .os-head-en { font-size: 10px; letter-spacing: 0.24em; color: var(--gray); font-weight: 700; }
.order-summary--card .os-product {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--pink-deep);
}
.order-summary--card .os-product-img {
  flex: none; width: 72px; height: 72px;
  border-radius: 12px; overflow: hidden;
  background: var(--beige);
  display: block;
}
.order-summary--card .os-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-summary--card .os-product-body { min-width: 0; }
.order-summary--card .os-product-body b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--brown); }
.order-summary--card .os-product-body small { display: block; font-size: 11px; color: var(--gray); margin-top: 2px; }
.order-summary--card .os-selected {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--pink-deep);
}
.order-summary--card .os-swatch {
  flex: none; width: 56px; height: 42px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--beige);
  display: block;
}
.order-summary--card .os-swatch[hidden] { display: none; }
.order-summary--card .os-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-summary--card .os-selection { margin-top: 0; text-align: left; font-size: 13px; }
.order-summary--card .os-lines { list-style: none; padding: 12px 0 6px; margin: 0; }
.order-summary--card .os-lines li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--brown);
  padding: 4px 0;
  line-height: 1.7;
}
.order-summary--card .os-lines li > span { flex: none; font-size: 11px; color: var(--gray); white-space: nowrap; }
.order-summary--card .os-lines li.star { font-weight: 700; color: var(--coral-text); }
.order-summary--card .os-lines li.star > span { color: var(--coral-text); }
.order-summary--card .os-lines li.os-gift-line { justify-content: flex-start; }
.order-summary--card .os-lines li.os-gift-line > span { flex: 1 1 auto; font-size: 12px; color: var(--coral-text); white-space: normal; }
.order-summary--card .price-pop { max-width: none; margin-top: 14px; }
.order-summary--card .trust { text-align: center; color: var(--gray); }

/* --- 13: カート再掲（コンパクト版フォーム） --- */
.order-form-final {
  max-width: 560px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  background: #fff;
  border: 2px dashed var(--pink-deep);
  border-radius: 26px;
  padding: clamp(20px, 3.5vw, 32px);
  text-align: left;
  box-shadow: 0 16px 36px -22px rgba(92, 74, 58, 0.35);
}
.order-form-final .ff-title {
  text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(15px, 2vw, 18px);
  letter-spacing: 0.06em;
  color: var(--brown);
  margin-bottom: 18px;
}
.order-form-final .order-step-label { margin-bottom: 12px; }
.order-form-final .ff-step2 { margin-top: 22px; }
.pattern-select--compact { gap: 8px; }
@media (min-width: 640px) { .pattern-select--compact { grid-template-columns: repeat(4, 1fr); } }
.pattern-select--compact .pattern-option .p-name { font-size: 10px; padding: 8px 4px; }
.order-form-final .gift-select { gap: 8px; }
.order-form-final .gift-option .g-name { font-size: 11px; padding: 8px 6px; }
.order-form-final .ff-summary { margin-top: 18px; border-top: 2px dashed var(--pink-deep); padding-top: 16px; text-align: center; }
.order-form-final .ff-summary .os-selection { font-size: 13px; font-weight: 700; min-height: 1.6em; word-break: keep-all; }
.order-form-final .ff-summary .os-gift { font-size: 12px; color: var(--brown); margin-top: 4px; }
.order-form-final .ff-summary .btn { margin-top: 14px; }
.order-form-final .ff-summary .trust { font-size: 11px; color: var(--gray); margin-top: 12px; }

/* 注文サマリーの柄スウォッチ（R3: 固定寸法・柄切替でレイアウト不変） */
.order-summary .os-swatch { display: block; width: 96px; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; margin-top: 8px; border: 1px solid var(--line); }
.order-summary .os-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   v13.3(R3): カートUIの入門セット忠実化＋09/13完全統一
   （#cartTemplate を core.js が2箇所へ複製。トンマナはv13のパステル/丸ゴ）
   ============================================================ */
/* 13のカート用ワイドコンテナ（09の .order-sec .container--narrow 拡張と同幅） */
.container--cartwide { max-width: 1120px; }
#finalCart { margin-top: clamp(28px, 4vw, 44px); }
#finalCart .cart-mount { scroll-margin-top: 80px; }

/* 選択中プレビュー（入門セットps-preview方式: 常時表示・固定比率で切替してもレイアウト不変） */
.order-preview--always { margin-top: 0; margin-bottom: 16px; }

/* カートに追加ボタン（入門セットの「カートに入れる」体験。主CTAより一段控えめなココア色） */
.add-cart-wrap { margin-top: 16px; }
.btn--cocoa { background: linear-gradient(120deg, #6B5C49, #7C6C58); box-shadow: 0 12px 28px -12px rgba(107, 92, 73, 0.5); }
.btn--cocoa .btn-fill { background: #5C4A3A; }
.add-cart-btn.is-added:disabled,
.add-cart-btn.is-added { background: #1F6E3C; box-shadow: none; opacity: 1; filter: none; }
.add-cart-hint { font-size: 12px; font-weight: 700; color: var(--coral-text); text-align: center; margin-top: 10px; min-height: 1.5em; line-height: 1.6; }

/* ステップ2の上マージン（旧inline style置き換え） */
.order-step-label--sp { margin-top: clamp(32px, 5vw, 44px); }

/* ご注文内容ヘッダの点数バッジ（入門セットのカート点数カウンタ） */
.order-summary--card .os-head { align-items: center; }
.os-count { font-size: 11px; font-weight: 700; color: #fff; background: var(--brown); border-radius: 999px; padding: 3px 12px; letter-spacing: 0.06em; white-space: nowrap; }
.os-count.is-pulse { animation: osCountPulse 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); display: inline-block; }
@keyframes osCountPulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.3); } }

/* カート明細（空状態→追加で商品行が並ぶ。行スウォッチは固定寸法＝柄切替でレイアウト不変） */
.cart-lines { border-bottom: 1px dashed var(--pink-deep); }
.cart-empty { padding: 20px 0; text-align: center; font-size: 12.5px; color: var(--gray); line-height: 1.9; }
.cart-empty[hidden] { display: none; }
.cart-line { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 14px 0; border-radius: 12px; }
.cart-line[hidden] { display: none; }
.cart-line.is-flash { animation: cartLineFlash 1.2s ease; }
@keyframes cartLineFlash { 0% { background: rgba(31, 110, 60, 0.14); } 60% { background: rgba(31, 110, 60, 0.08); } 100% { background: transparent; } }
.cart-line-img { display: block; flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--beige); }
.cart-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line-mid { min-width: 0; }
.cart-line-mid b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--brown); line-height: 1.5; }
.cart-line-mid small { display: block; font-size: 10.5px; color: var(--gray); margin-top: 2px; line-height: 1.5; }
.cart-line-mid .cart-line-pattern { font-size: 12px; font-weight: 700; color: var(--coral-text); overflow-wrap: anywhere; }
.cart-line-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-line-price s { display: block; font-size: 10.5px; color: var(--gray); }
.cart-line-price b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--coral-text); margin-top: 2px; }

/* アコーディオン（配送希望日を指定／お届け目安・送料を見る＝入門セット準拠の2連） */
.cart-acc { margin-top: 12px; border: 2px dashed var(--pink-deep); border-radius: 18px; background: var(--cream); }
.price-pop + .cart-acc { margin-top: 16px; }
.cart-acc-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(14px, 2.5vw, 18px); font-size: 13px; font-weight: 700; color: var(--brown); text-align: left; }
.cart-acc-toggle:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; border-radius: 18px; }
.cart-acc-toggle .acc-opt { font-weight: 400; font-size: 11px; color: var(--gray); margin-left: 4px; }
.cart-acc-toggle .dlv-caret { font-size: 16px; color: var(--coral-text); transition: transform 0.4s var(--ease-out-expo); flex: none; }
.cart-acc-toggle[aria-expanded="true"] .dlv-caret { transform: rotate(45deg); }
.cart-acc-body { padding: 0 clamp(14px, 2.5vw, 18px) 16px; }
.cart-acc-body[hidden] { display: none; }
.delivery-fields--single { grid-template-columns: 1fr; }

/* お届け目安・送料（都道府県→最短お届け日。入門セットのps-arrival構成） */
.arrival-ship { font-size: 12px; color: var(--brown); margin-bottom: 10px; }
.arrival-ship b { color: #1F6E3C; }
.arrival-result { margin-top: 10px; padding: 11px 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; color: var(--brown); line-height: 1.7; }
.arrival-result[hidden] { display: none; }
.arrival-result b { font-weight: 700; color: var(--coral-text); }
.arrival-note { font-size: 10.5px; color: var(--gray); line-height: 1.7; margin-top: 9px; }

/* 購入ボタンまわり（trust3点・注記・LINE相談＝入門セットのcheckout-wrap構成） */
.order-summary--card .gift-wrap-check { margin-top: 12px; background: #fff; }
.checkout-wrap { margin-top: 16px; }
.cart-trust { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.cart-trust span { font-size: 11px; color: var(--gray); border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 6px 12px; letter-spacing: 0.03em; }
.cart-note { font-size: 11px; color: var(--gray); text-align: center; margin-top: 12px; line-height: 1.8; }
.line-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; }
.line-cta-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.line-cta-title { font-size: 13px; font-weight: 700; color: var(--brown); }
.line-cta-sub { font-size: 11.5px; color: var(--gray); line-height: 1.6; }
.line-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; background: #06C755; color: #fff; font-weight: 700; font-size: 13px; line-height: 1; padding: 13px 20px; border-radius: 999px; text-decoration: none; transition: background 0.25s ease; }
.line-cta-btn:hover { background: #049E44; }
.line-cta-btn:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
@media (max-width: 520px) { .line-cta { flex-direction: column; align-items: stretch; text-align: center; } .line-cta-btn { justify-content: center; } }

/* ============================================================
   v13.4(R4): 配送UI再構成・ブーケ特典1枚見せ・追加の背景シート
   ============================================================ */
/* --- 08: ブーケ特典（5色横並び→大きめ1枚＋おまかせ訴求） --- */
.bouquet-solo { margin-top: 22px; text-align: center; }
.bouquet-solo .frame {
  max-width: 320px; margin-inline: auto;
  aspect-ratio: 3 / 4;
  border: 6px solid #fff;
  box-shadow: 0 16px 34px -18px rgba(92, 74, 58, 0.35);
  transform: rotate(-1.2deg);
  background: #fff;
}
.bouquet-solo .frame img { object-position: 50% 42%; } /* 花部分が主役になる位置 */
.bouquet-solo figcaption {
  margin-top: 14px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(13px, 1.8vw, 15px);
  color: var(--coral-text);
  letter-spacing: 0.06em;
}

/* --- カート: 配送希望日・お届け目安（①都道府県→②希望日→③時間帯） --- */
.delivery-fields--dt { margin-top: 12px; }
.arrival-result + .delivery-fields--dt { margin-top: 14px; }

/* --- カート: 追加シートの明細行（数量ステッパー・削除） --- */
.cart-line--addon { border-top: 1px dashed var(--pink-deep); }
.addon-line-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.addon-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; overflow: hidden;
}
.addon-qty button {
  width: 30px; height: 28px;
  font-size: 15px; font-weight: 700; line-height: 1;
  color: var(--brown); background: var(--cream);
}
.addon-qty button:disabled { opacity: 0.35; cursor: default; }
.addon-qty button:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
.addon-qty > span { min-width: 30px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.addon-del { font-size: 11px; color: var(--gray); text-decoration: underline; text-underline-offset: 2px; }
.addon-del:hover { color: var(--coral-text); }
.addon-del:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; border-radius: 4px; }
.cart-line-price .addon-x { display: block; font-size: 10px; color: var(--gray); margin-top: 2px; }

/* --- カート: 追加シートのセカンダリカード（入門セットps-addon準拠・主導線より一段控えめ） --- */
.addon-card {
  margin-top: 14px;
  padding: 16px clamp(14px, 2.5vw, 18px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
}
.addon-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13.5px; color: var(--brown);
}
.addon-badge {
  font-size: 10px; font-weight: 700; color: var(--coral-text);
  border: 1px solid currentColor; border-radius: 999px;
  padding: 2px 9px; letter-spacing: 0.04em; white-space: nowrap;
}
.addon-deal { margin-top: 8px; font-size: 12px; color: var(--brown); }
.addon-deal s { color: var(--gray); font-size: 11px; }
.addon-deal b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--coral-text); margin-inline: 2px; }
.addon-off {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 700; color: #fff;
  background: var(--coral-text); border-radius: 999px;
  padding: 2px 8px; vertical-align: 1px; white-space: nowrap;
}
.addon-lede { margin-top: 6px; font-size: 11px; color: var(--gray); line-height: 1.8; }
.addon-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.addon-swatch {
  position: relative;
  border: 2px solid var(--line); border-radius: 12px;
  background: #fff; overflow: hidden;
  padding: 0 0 6px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.addon-swatch .thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.addon-swatch .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.addon-swatch .a-name { display: block; font-size: 10px; font-weight: 700; color: var(--brown); text-align: center; padding-top: 5px; line-height: 1.4; }
.addon-swatch.is-selected { border-color: var(--coral-text); box-shadow: 0 0 0 1px var(--coral-text); }
.addon-swatch:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.addon-add-btn { margin-top: 12px; font-size: 13px; padding-block: 13px; }
.addon-hint { font-size: 11.5px; font-weight: 700; color: var(--coral-text); text-align: center; margin-top: 8px; min-height: 1.5em; line-height: 1.6; }
.addon-note { font-size: 10.5px; color: var(--gray); line-height: 1.8; margin-top: 8px; }

/* --- カート: 小計→割引→合計サマリー（追加シートあり時のみ表示） --- */
.cart-sum {
  margin-top: 14px;
  padding: 12px clamp(14px, 2.5vw, 18px);
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff;
}
.cart-sum[hidden] { display: none; }
.cs-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--brown);
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.cs-row.cs-save { color: #1F6E3C; font-weight: 700; }
.cs-row.cs-total { border-top: 1px dashed var(--pink-deep); margin-top: 4px; padding-top: 9px; font-weight: 700; }
.cs-row.cs-total b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--coral-text); }
.cs-note { font-size: 10.5px; color: var(--gray); margin-top: 6px; line-height: 1.7; }

/* ============ R5: 品質01カードの4柄グリッド ============ */
.quality-item .q-photo--patterns {
  aspect-ratio: auto; /* 16:10固定を解除しグリッド内容に従う */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 10px;
  background: var(--cream);
  overflow: hidden;
}
.q-photo--patterns figure { margin: 0; text-align: center; }
.q-photo--patterns figure img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  border: 1px solid rgba(92, 74, 58, 0.12);
}
.q-photo--patterns .q-tile--white img { border-color: var(--line); } /* 白無地は枠を明確に */
.q-photo--patterns figcaption { font-size: 10px; font-weight: 700; color: var(--brown); padding-top: 4px; line-height: 1.3; }

/* ============ R5: 追加シートスウォッチの見切れ解消＋枠 ============ */
.addon-swatch .thumb {
  aspect-ratio: 3 / 4; /* 縦長の柄見本に合わせる */
  background: var(--cream);
  border: 1px solid var(--line); /* 白無地も視認できる共通枠 */
  border-radius: 8px;
}
.addon-swatch .thumb img { object-fit: contain; } /* 柄全体を必ず収める */
.addon-swatch .a-name { font-size: 9.5px; letter-spacing: 0; }
.addon-swatch .a-name { word-break: keep-all; } /* wbr位置でのみ折返し（語中折れ防止） */
/* R5補正: .frame基底のheight:100%を打ち消し、キャプションを確実に表示 */
.quality-item .q-photo--patterns { height: auto; }
.q-photo--patterns figure { display: flex; flex-direction: column; min-width: 0; }
.q-photo--patterns figure img { height: auto; flex: none; }
/* R5.1: 統一キャンバスサムネイル（swatch-uni-*）はcoverで完全一致表示 */
.addon-swatch .thumb img { object-fit: cover; }
.addon-swatch .a-name { min-height: calc(9.5px * 1.4 * 3); display: flex; align-items: flex-start; justify-content: center; } /* ラベル領域を3行分で統一（下端ズレ防止） */