/** Shopify CDN: Minification failed

Line 6682:46 Unexpected "*"

**/
/* 2026年06月01日11:03:55 去除自带的 一键到顶 和 zendesk */
.vtl-st-main-widget,
#launcher {
  display: none !important;
}
.my-custom-lp-desc{
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1vw, 22px);
  line-height: 2;
  margin-top: 12px;
}
#adklock {
  cursor: pointer;
}
/* === concat: src/styles/base.css === */
:root {
  --red: #e03a3a;
  --blue: #2f9cd8;
  --cyan: #7ed4f8;
  --deep-blue: #014283;
  --hot: #f9a5bb;
  --ink: #050505;
  --paper: #fff;
  /* モニター (1920px 想定) でもきれいに見えるようコンテンツ幅を拡大 */
  --section-width: 1800px;
  /* 主要コンテンツ・ボタン類の中央配置幅。
     1280 → 1680 に拡大 (1920 viewport で side-margin 120px 各々) */
  --content-max: 1680px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mood-bg: #2787e5;
  --mood-strong: #2787e5;
}

/* 視覚的に隠してスクリーンリーダーには読ませる (SEO/A11y用) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: #fff;
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  transition: background 520ms ease;
}

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

img {
  display: block;
  max-width: 100%;
}

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  background: transparent;
  overflow: clip;
  --mood-bg: #2787e5;
  --mood-strong: var(--blue);
  /* フッター下の余白を詰める (120 → 0) */
  padding-bottom: 0;
}

/* ファーストビュー上端 (= sticky header の裏) に白いレイヤを敷く。
   ヘッダー要素自体には bg を当てず、page の上端だけが白くなるので
   ・初期表示は header エリア + KV (kv-wrap 自体も白) が連続して白
   ・スクロール後はこの白レイヤが画面外に去り、header は透過のまま
     parallax/各セクションの色味の上に乗る
   z-index -1 で .page 内コンテンツ (kv-wrap 等) の裏に潜らせる
   (page-backdrop は body 直下の fixed なのでさらに後ろ) */
.page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: #fff;
  z-index: -1;
  pointer-events: none;
}

/* === グローバル page-backdrop ===
   viewport に fixed で貼り付くタイル背景。「ヒヤリホット図鑑の世界」を
   ページ全体の最背面に持続させる。スクロールしても背景は動かず、
   不透明なセクション (KV / experience / product / movie 等) が
   覆い、透明な About / bubble-scatter からチラ見えする */
.page-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.page-backdrop__chevron-red {
  position: absolute;
  inset: 0;
  /* CM背景寄せで縦グラデ化 (上=濃#C22C39 → 下=明#F07686)。
     書き出し red.png 準拠: 濃色を上側〜50%保持して下で明色へ。 */
  background: linear-gradient(180deg, #c22c39 0%, #c22c39 50%, #f07686 100%);
}

.page-backdrop__chevron-blue {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 62%;
  /* CM背景寄せで縦グラデ化 (上=濃#046DAA → 下=明#53C9E9)。
     書き出し bule.png 準拠。 */
  background: linear-gradient(180deg, #046daa 0%, #046daa 50%, #53c9e9 100%);
  /* About と同じ右向きシェブロン (青 62% + 96px tip) */
  clip-path: polygon(0 0, calc(100% - 96px) 0, 100% 50%, calc(100% - 96px) 100%, 0 100%);
}

.page-backdrop__tile-bg {
  position: absolute;
  inset: 0;
}

.page-backdrop__veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 42, 0.42);
}

/* page-backdrop 内の .about__grid は viewport 全体に張り出すよう、
   100vw × 100vh を完全カバーする寸法を確保 */
.page-backdrop .about__grid {
  width: max(5400px, 240vw);
  height: max(var(--set-height), 240vh);
}

/* 内側コンテンツキャップ用のユーティリティ */
.inner {
  width: 100%;
  max-width: var(--section-width);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
  box-sizing: border-box;
}

/* 6段階パレット：ほっと割合(0/12 → 12/12)でページ全体の下地が遷移する */
/* HIYARI (青) → HOTTO (赤) のメーター段階色 (指定パレット準拠)
   #27A2E5 → #7ACEFF → #ACDEFF → #F9A5BB → ed728a → #E03A3A */
.page[data-meter-step="0"] {
  --mood-bg: #27a2e5;
}
.page[data-meter-step="1"] {
  --mood-bg: #7aceff;
}
.page[data-meter-step="2"] {
  --mood-bg: #acdeff;
}
.page[data-meter-step="3"] {
  --mood-bg: #f9a5bb;
}
.page[data-meter-step="4"] {
  --mood-bg: #ed728a;
}
.page[data-meter-step="5"] {
  --mood-bg: #e03a3a;
}


/* === concat: src/styles/side-guide.css === */
/* side-switch-guide: 吹き出し (上) + フルボディキャラ (下) の縦並び。
   画面右端に固定。state (ひやり/ほっと) で吹き出し色が変わる */
.side-switch-guide {
  position: fixed;
  /* 右下にぴったり配置 (Figma 更新: 右中央 → 右下へ) */
  right: 16px;
  left: auto;
  top: auto;
  bottom: 24px;
  z-index: 45;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  align-items: center;
  justify-items: center;
  padding: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(12px, 0);
  transition:
    opacity 360ms ease,
    transform 360ms var(--spring);
  line-height: 1.5;

  /* デフォルト = 赤 (ブランドカラー)。data-mood="hiyari" で青に切替 */
  --guide-bubble: #e03a3d;
}

.side-switch-guide[data-mood="hiyari"] {
  /* 吹き出しの最初のカラー (hiyari状態) を #27A2E5 に */
  --guide-bubble: #27a2e5;
}

.side-switch-guide[data-mood="hotto"] {
  --guide-bubble: #e03a3d;
}

.page.is-switch-area .side-switch-guide {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, 0);
}

/* キャラ: フルボディ。吹き出しと密着 (gap:0 + margin で重ね)
   PC 用サイズ: 110 → 150 (1.36倍) でキャラ存在感アップ */
.side-switch-guide__face {
  /* 子どもキャラ → 男女ランダムの実キャラ(全身)。
     3フレームを重ねて配置し、通常はフレーム1、全12ホット時にコマアニメをループ。
     PC 85px */
  display: block;
  position: relative;
  width: 85px;
  aspect-ratio: 192 / 480;
  background: none;
  border-radius: 0;
  box-shadow: none;
  transition:
    opacity 240ms ease,
    transform 240ms ease;
  /* セリフ吹き出しが画像から遠い印象 → 画像を上に寄せて密着 */
  margin-top: -18px;
}

.side-switch-guide__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  z-index: 1;
}

/* 男女が切り替わった瞬間に「ファッと出る」演出 (スクロール出現と同系統) */
.side-switch-guide__face.is-pop {
  animation: sideCharPop 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sideCharPop {
  0% {
    opacity: 0;
    transform: translate(8px, 6px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .side-switch-guide__face.is-pop {
    animation: none;
  }
}

/* もくもく(aura)+お花。普段は非表示、全12ホットでキャラの後ろから
   ワーッと湧く。元は side-guide-moku.gif (オーラのみ) から
   side-guide-hotto.gif (オーラ + お花 統合版 / 800x1000 / 1.3MB) に差し替え。
   gif 自体が billow アニメを持つので、ここでは表示/非表示のフェードだけ制御する。
   img 要素にして確実に描画 (背景画像方式だと描画されないケースがあったため)。 */
.side-switch-guide__aura {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 215%;
  /* グローバルの img { max-width: 100% } で親幅(120px)に縛られると
     キャラの裏に隠れて見えないため、明示的に解除 */
  max-width: none;
  height: auto;
  /* お花/オーラが顔の周りに出るよう位置を約20px下げる */
  transform: translate(-50%, calc(-50% + 20px));
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 420ms ease;
}
.side-switch-guide__frame--1 {
  /* 通常時 = フレーム1 (1-1) を表示 */
  opacity: 1;
}

/* 段階6 (エリア6枚ほっと) でコマアニメ(1-1→1-2→1-3)ループ。
   双方向: 6未満に戻ると is-allhot が外れて演出停止。段階6のセリフは出したまま。 */
/* もくもく(animated gif)を段階6でフェード表示。billow の動きは gif 自体が持つ。 */
.side-switch-guide.is-allhot .side-switch-guide__aura {
  opacity: 1;
}
.side-switch-guide.is-allhot .side-switch-guide__frame--1 {
  animation: sideKoma1 2.1s steps(1, end) infinite;
}
.side-switch-guide.is-allhot .side-switch-guide__frame--2 {
  animation: sideKoma2 2.1s steps(1, end) infinite;
}
.side-switch-guide.is-allhot .side-switch-guide__frame--3 {
  animation: sideKoma3 2.1s steps(1, end) infinite;
}
@keyframes sideKoma1 {
  0%, 33.3% { opacity: 1; }
  33.4%, 100% { opacity: 0; }
}
@keyframes sideKoma2 {
  0%, 33.3% { opacity: 0; }
  33.4%, 66.6% { opacity: 1; }
  66.7%, 100% { opacity: 0; }
}
@keyframes sideKoma3 {
  0%, 66.6% { opacity: 0; }
  66.7%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .side-switch-guide.is-allhot .side-switch-guide__frame--1,
  .side-switch-guide.is-allhot .side-switch-guide__frame--2,
  .side-switch-guide.is-allhot .side-switch-guide__frame--3 {
    animation: none;
  }
  .side-switch-guide.is-allhot .side-switch-guide__aura {
    animation: none;
    opacity: 0.7;
    transform: translate(-50%, -54%) scale(1);
  }
}

/* fade transition */
.side-switch-guide__face.is-fading {
  opacity: 0;
  transform: scale(0.92) translateY(4px);
}

.side-switch-guide__text.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}

/* 吹き出し本体 (Figma 仕様):
   - サイズ: 40×130 + tail 12px = 142 全体
   - 角丸: 8px (Rectangle 243)
   - font-weight: 700 (Zen Maru Gothic) / 14px / palt + vert
   - 縦書きベタ塗り + 下向き三角しっぽ (Polygon 11 = 18×18)
   - state でカラー切替 (var(--guide-bubble)) */
.side-switch-guide__text {
  position: relative;
  writing-mode: vertical-rl;
  font-feature-settings:
    "palt" 1,
    "vert" 1;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: #fff;
  /* flex 中央寄せ: 縦書き (vertical-rl) は単一カラムが右寄せされるため
     flex で水平中央 (justify-content) + 垂直中央 (align-items) に固定 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--guide-bubble);
  border-radius: 8px;
  padding: 16px 0;
  min-height: 130px;
  width: 40px;
  box-sizing: border-box;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    background-color 320ms ease;
}

/* しっぽ: ::after で本体と同色の三角を本体下部にオーバーラップさせて描画。
   Figma 仕様: Polygon 11 = 18×18, 中央配置, 下向き */
.side-switch-guide__text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 18px;
  height: 12px;
  background: var(--guide-bubble);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  transition: background-color 320ms ease;
}

.side-switch-guide__text b {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  /* flex 廃止後: margin-top はカラム方向に効かないため上下マージンに切替 */
  margin: 2px 0;
  display: inline;
}

/* 1100px 以下 (タブレット〜SP) でも guide は残す。
   SP 専用の位置/スケール調整は ≤720px の SP メディアクエリ内で実施 */
@media (max-width: 1100px) and (min-width: 901px) {
  .side-switch-guide {
    display: none;
  }
}

.page[data-page-mood="hot"] {
  --mood-bg: #f9a5bb;
  --mood-strong: var(--red);
}


/* === concat: src/styles/header.css === */
/* === HEADER (Figma 93:3474) === */
/* sticky ヘッダー。 PCは透過に戻す。
   SPは視認性を確保するため白座布団を維持 (SP override は @media 内)。
   透過だと赤/青/ピンク等のセクション上で読みづらかった経緯あり、
   ピル自身に背景/枠があるので PC 透過でも視認は確保できる前提。 */
.header-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: transparent;
}

.header {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  /* 最大幅撤廃 — viewport いっぱいに広げる */
  max-width: none;
  margin-inline: 0;
  /* ヘッダーの中身を白レイヤ (.page::before = 100px) の縦中央に揃える。
     min-height を白エリアと同じ 100px にして align-items:center で中央配置。
     縦 padding は 0 (白エリアの高さは変えない)。 */
  min-height: 100px;
  padding: 0 clamp(24px, 3vw, 56px);
  box-sizing: border-box;
}

.header__logo {
  display: block;
  width: 132px;
  height: 28px;
  flex-shrink: 0;
}

.header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header__nav {
  display: flex;
  flex: 1 0 0;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

/* === ナビピル: 4 個とも同じ高さ・同じ角丸・同じフォント。中身だけ違う === */
.header__pill,
.header__outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.4px;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

/* ホバーで「少し上に上がる」動き(translateY)を廃止 → 固定位置。色反転のみ。 */

/* マウスオーバーで色反転
    「ホバー枠線 = ムービーギャラリーと同じ太さ」: 2px → 1px */
.header__pill:hover {
  background: #fff;
  color: #e03a3a;
  box-shadow: inset 0 0 0 1px #e03a3a;
}

/* ホバー時、ロック/リモコンのアバター(商品画像)背景を #fff → #E03A3A に。
   ピルが白反転するので、アバター背景を赤にして商品アイコンを引き立てる。 */
.header__pill:hover .header__pill-avatar {
  background: #e03a3a;
}

.header__outline:hover {
  background: #050505;
  color: #fff;
}

/* 塗りつぶし系（左 2 個: ロック / リモコン） */
.header__pill {
  gap: 8px;
  padding: 0 18px 0 4px;
  background: #e03a3a;
  color: #fff;
}

.header__pill--lock,
.header__pill--remote {
  background: #e03a3a;
}

.header__pill-avatar {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.header__pill-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
}

/* アウトライン系（右 2 個: ムービーギャラリー / SwitchBot が目指す未来） */
.header__outline {
  border: 1px solid #050505;
  background: #fff;
  color: #050505;
}

/* 画面 1200 以下: フォント縮小 + 高さ縮小 (4 つとも一律) */
@media (max-width: 1200px) {
  .header {
    padding: 16px 20px;
  }
  .header__nav {
    gap: 8px;
  }
  .header__pill,
  .header__outline {
    height: 38px;
    font-size: 14px;
    padding: 0 14px;
  }
  .header__pill {
    padding-left: 4px;
    gap: 6px;
  }
  .header__pill-avatar {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 720px) {
  /* SP は視認性確保のため白座布団を維持 (PCのみ透過) */
  .header-wrap {
    background: #ffffff;
  }
  .header {
    padding: 12px 14px;
  }
  .header__nav {
    gap: 6px;
  }
  .header__pill,
  .header__outline {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }
  .header__pill {
    padding-left: 3px;
    gap: 4px;
  }
  .header__pill-avatar {
    width: 26px;
    height: 26px;
  }
  .header__logo {
    width: 96px;
    height: 22px;
  }
}

@media (max-width: 480px) {
  .header__pill-text {
    display: none;
  }
  .header__pill {
    padding: 0 3px;
    height: 32px;
  }
  .header__outline {
    padding: 0 8px;
  }
  .header__logo {
    width: 84px;
  }
}


/* === concat: src/styles/kv.css === */
/* === KV (Figma 93:3463) === */
/* ラッパーは全幅・白背景 (page-backdrop の青赤を覆って視認性を確保) */
.kv-wrap {
  width: 100%;
  background: #fff;
}

.kv {
  position: relative;
  width: 100%;
  /* (青文字 追加 B案) 「KV 1枚 1700px で頭打ち / それ以上は両サイドが拡張」
     → .kv max-width は撤廃 (フル幅)。中央スライドだけ 1700px でキャップする戦略。
     PC は track 幅を px ベースで再計算 (下の @media (min-width: 769px) 参照)。
     SP は track 756% スケール (viewport < 1700 想定なので center slide も自動的に 1700 以下)。 */
  margin-inline: auto;
  background: transparent;
  overflow: hidden;
}

/* === KV カルーセル (Figma node 2204-14724 準拠) ===
   5 スライドを横並び。auto-advance で「グイン」snap transition で次へ。
   一時停止ボタンで停止可能。
   PC: 隣接スライドが左右にチラ見えする「peek」スタイル + 縦書き一時停止ボタン (右中央) + 進捗バー (右下)
   SP: 各スライド画面いっぱい (peek なし) + 横向き一時停止ボタン + 進捗バー (中央下) */
/* viewport は relative で、slide-item の aspect-ratio で高さが自動的に決まる。
   .kv は固定 aspect-ratio を持たず、内側の slide が高さを規定 */
.kv__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* track 幅と translateX を CSS 変数で SP/PC 切替する。
   - flex item は track 幅の 20% (= 1 / 5 slides)
   - SP: track=500% → slide は viewport 100% (peek なし)
   - PC: track=400% → slide は viewport 80% (左右 10% ずつ peek)
   - translateX は track 幅基準の % で計算する点に注意:
     SP base=0% (slide N の左端を viewport 左端に揃える)
     PC base=2.5% (slide N を viewport 中央に揃える)
   - step は両方 -20% (track 幅の 1/5) */
.kv__track {
  display: flex;
  /* 6 real + 3 clones = 9 slides 構成。
     SP default: track 756% → slide 11.111% of track = 84% viewport (8% peek 左右)
     base 1.06% で実 slide (= track-index 1) を中央配置 */
  width: var(--kv-track-w, 756%);
  transition: transform 480ms cubic-bezier(0.7, 0.05, 0.25, 1);
  will-change: transform;
  --kv-base: 1.06%;
  --kv-step: -11.111%;
  transform: translateX(calc(var(--kv-base) + var(--kv-step) * var(--kv-index, 1)));
}
/* ループ末端からのスナップバック時、transition を一瞬切って瞬間ジャンプ */
.kv__track.is-snapping {
  transition: none;
}
.kv__slide-item {
  /* 1/9 = 11.111% of track 幅から左右マージン 6px 引き */
  flex: 0 0 calc(11.111% - 12px);
  margin: 0 6px;
  position: relative;
  aspect-ratio: 990 / 1602;
  border-radius: 18px;
  overflow: hidden;
}
.kv__slide-item picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
@media (min-width: 769px) {
  /* PC: 6 real + 3 clones = 9 slides 構成。
      (青文字 追加 B案) 改修:
       - 旧: track 810% / slide flex 11.111% - 16px (= 中央スライド ≒ 90vw - 16)
         viewport が大きくなるほど中央スライドも青天井に拡大 (の問題)
       - 新: 中央スライド visual を min(90vw - 16, 1700px) でクランプし、
             track は 9 × slide-box width で導出 (% 廃止 → px ベース)
       - translateX も px ベースに変更し、viewport > 1907px でも中央スライドを正しく中央配置。
       数式:
         slide-visual-w = min(calc(90vw - 16px), 1700px)
         slide-box-w = slide-visual-w + 16px (margin 8px x 2)
         track-w = 9 * slide-box-w
         base = (100vw - slide-visual-w) / 2 - 8px (slide 左端を中央に)
         step = -slide-box-w (1 ステップで 1 slide 分ずらす)
       検算 (V=2500) slide-visual-w=1700 / track=15444 / base=392 / step=-1716
         → index 1 で translateX = -1324px → 中央スライド 400〜2100 viewport (中央 1250 ✓)
         → 左 peek 400 / 右 peek 400 (シンメトリ) */
  .kv__track {
    --slide-visual-w: min(calc(90vw - 16px), 1700px);
    --slide-box-w: calc(var(--slide-visual-w) + 16px);
    --kv-track-w: calc(9 * var(--slide-box-w));
    --kv-base: calc((100vw - var(--slide-visual-w)) / 2 - 8px);
    --kv-step: calc(var(--slide-box-w) * -1);
    width: var(--kv-track-w);
    padding: 12px 0 12px;
    box-sizing: border-box;
  }
  .kv__slide-item {
    border-radius: 24px;
    overflow: hidden;
    margin: 0 8px;
    flex: 0 0 var(--slide-visual-w);
    /* PC スライド画像 (3660x1881) の画像ネイティブ aspect (= 1.946:1)。
       「ちゃんと配置 / 変な場所でトリミングされてる印象は NG」 → crop しない。
       width=1700 のとき height = 1700/1.946 ≈ 873px。 */
    aspect-ratio: 3660 / 1881;
  }
}
.kv__slide-item picture {
  display: block;
  width: 100%;
  height: 100%;
}
.kv__slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 一時停止ボタン (.kv__pause) は完全削除。
   関連 CSS (.kv__pause-icon / .kv__pause-label / [data-paused] state) も削除済。 */

/* === プログレスインジケーター (Figma 新デザイン: 白ピル + 矢印 + 6ドット) ===
     「白いバーは引っ張らない、ピルだけ追従」。
   構造:
     .kv-wrap
       ├ .kv (image)
       ├ .kv__slider-bar (空の白ストリップ・ in-flow / 動かない)
       └ .kv__progress (pill・ position: sticky / margin-top: -X でストリップ内に被せ)
   sticky の CB が .kv-wrap になるよう .kv__progress を直接 .kv-wrap 下に。 */
.kv__slider-bar {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 64px;
  background: #fff;
  box-sizing: border-box;
}
.kv__progress {
  position: sticky;
  bottom: 12px;
  /* pill を strip 中央 (12/12) から「ちょい上」へ。
     上 6 / 下 18 ぐらいで、白いエリアの視覚的な上下中心に来る感じ。
     margin-top: -58 → pill_top = strip_top + 6 */
  margin: -58px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px;
  background: #fff;
  border-radius: 100px;
  width: fit-content;
  z-index: 5;
  /* シャドーなし */
}

/* 左右矢印ボタン */
.kv__arrow {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(224, 58, 58, 0.7);
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 200ms ease,
    background-color 200ms ease;
}
.kv__arrow:hover,
.kv__arrow:focus-visible {
  background: rgba(224, 58, 58, 0.08);
  transform: scale(1.08);
  outline: none;
}
.kv__arrow:active {
  transform: scale(0.94);
}
.kv__arrow svg {
  display: block;
}

/* ドットコンテナ — Figma スライドバー (224×40) の インジケータ (128×16) 部分
   仕様: 6 frames (18×16 inactive + 38×16 active), 隣接配置 (gap なし)。
   内部に視覚 mark (8 グレー丸 / 38×8 赤プログレスバー) */
.kv__dots {
  display: flex;
  align-items: center;
  gap: 0;
  height: 16px;
}

/* 各ドット (button = Figma の Frame 1366..1370 = 18×16 frame) */
.kv__dot {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: width 320ms cubic-bezier(0.7, 0, 0.3, 1);
}
.kv__dot.is-active {
  /* active 時は Figma Frame 1371 = 38×16 */
  width: 38px;
}
/* track (grey base) — 視覚 mark: inactive=8丸 / active=38×8 ピル */
.kv__dot-track {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  background: #d4d4d4;
  border-radius: 20px;
  overflow: hidden;
  transition: width 320ms cubic-bezier(0.7, 0, 0.3, 1);
}
.kv__dot.is-active .kv__dot-track {
  width: 38px;
}
/* fill (red progress, active 時のみ animate) */
.kv__dot-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: var(--red, #e03a3a);
  border-radius: 20px;
}
.kv__dot.is-active .kv__dot-fill {
  animation: kvProgressFill var(--kv-dwell, 4000ms) linear forwards;
}
.kv__dot.is-active .kv__dot-fill.is-paused {
  animation-play-state: paused;
}

/* pause ボタン削除 + slider は CSS position: sticky で
   自然に追従 (float 用の body[data-kv-floating] CSS は削除済)。 */
@keyframes kvProgressFill {
  from { width: 0; }
  to { width: 100%; }
}
/* 進捗 fill 終端の赤丸ドット (Figma の dot indicator) */
.kv__progress-fill::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--red, #e03a3a);
}


/* === concat: src/styles/about.css === */
/* === ABOUT (Figma 93:2575 + 93:2163) === */
.about {
  position: relative;
  /* 上下の余白を絞る。content (logo + body) の自然高さ + padding でセクション高 */
  min-height: auto;
  padding: clamp(56px, 8vh, 96px) 0;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  /* 背景は global page-backdrop に集約 (本セクションは透過) */
  background: transparent;
}

/* About セクション: 背景は持たず、グローバル page-backdrop が viewport に
   fixed で貼り付いてるのでそれが透けて見える。content だけ重ねる */
.about__content {
  position: relative;
  z-index: 2;
}

/* 30°回転したシティ写真タイルグリッド + 暗幕 */
.about__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* タイル + gap の数値を CSS 変数化して keyframes と共有 */
.about__grid {
  /* 画面幅で拡大縮小 (タイル/gap も clamp で流体化) */
  --tile-w: clamp(280px, 22vw, 520px);
  --tile-h: clamp(160px, 12vw, 290px);
  --tile-gap: clamp(28px, 2.6vw, 56px);
  --set-count: 20;
  /* 1 セット = 20 タイル + 19 gap = 20×195 + 19×40 = 4660px
     col 高さを必ず超えるサイズ。translate 後も視界に空きが出ない */
  --set-height: calc(var(--tile-h) * var(--set-count) + var(--tile-gap) * (var(--set-count) - 1));
  /* 2 セットを並べるとき set1 と set2 の間に gap が 1 つ入るので translate 量 = set + gap */
  --loop-shift: calc(var(--set-height) + var(--tile-gap));

  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  gap: var(--tile-gap);
  /* 30° 回転後に viewport を完全に覆うため、対角線 ×1.2 倍の大型グリッド
     14 列 × (350 + 40 gap) = 5420px → 大型ディスプレイでも右端まで届く */
  width: max(5400px, 230vw);
  height: max(var(--set-height), 230vh);
  transform: translate(-50%, -50%) rotate(30deg);
}

.about__col {
  position: relative;
  flex: 0 0 var(--tile-w);
  height: 100%;
  overflow: hidden;
}

/* 内側コンテナが上下にスクロール。タイルは 20 個 × 2 セット (= 40 / col) で、
   translateY(-1セット-1gap) で 2 セット目が 1 セット目の位置にぴったり来る */
.about__col-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
  width: var(--tile-w);
  will-change: transform;
}

.about__col--up .about__col-inner {
  animation: aboutDriftUp 120s linear infinite;
}

.about__col--down .about__col-inner {
  animation: aboutDriftDown 120s linear infinite;
}

@keyframes aboutDriftUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(var(--loop-shift) * -1));
  }
}

@keyframes aboutDriftDown {
  from {
    transform: translateY(calc(var(--loop-shift) * -1));
  }
  to {
    transform: translateY(0);
  }
}

.about__tile {
  display: block;
  flex: 0 0 var(--tile-h);
  width: var(--tile-w);
  height: var(--tile-h);
  /* Figma 準拠でタイルは角丸なし (角張ったエッジ) */
  border-radius: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* 各タイル画像が暗すぎると。ぼかし・暗フィルターは
   素材 webp 側に焼き込み済みのため、実装側の per-tile 暗幕 は撤去。
   全体の青味暗幕は .page-backdrop__veil のみが担う。 */

.about__tile--hiyari {
  background-image: url("/cdn/shop/files/about-tile-hiyari.webp");
}

.about__tile--hotto {
  background-image: url("/cdn/shop/files/about-tile-hotto.webp");
}

/* 2nd-view ステートメント背景 = 24 枚の実シーンタイルを敷き詰める。
   lp-page-backdrop.liquid が (col,row) から p1..p24 を決定的に割当。
   per-tile 暗幕は撤去。暗幕は .page-backdrop__veil のみが担う。 */
.about__tile--p1 { background-image: url("/cdn/shop/files/statement-tile-1-1.webp"); }
.about__tile--p2 { background-image: url("/cdn/shop/files/statement-tile-1-2.webp"); }
.about__tile--p3 { background-image: url("/cdn/shop/files/statement-tile-1-3.webp"); }
.about__tile--p4 { background-image: url("/cdn/shop/files/statement-tile-1-4.webp"); }
.about__tile--p5 { background-image: url("/cdn/shop/files/statement-tile-1-5.webp"); }
.about__tile--p6 { background-image: url("/cdn/shop/files/statement-tile-1-6.webp"); }
.about__tile--p7 { background-image: url("/cdn/shop/files/statement-tile-2-1.webp"); }
.about__tile--p8 { background-image: url("/cdn/shop/files/statement-tile-2-2.webp"); }
.about__tile--p9 { background-image: url("/cdn/shop/files/statement-tile-2-3.webp"); }
.about__tile--p10 { background-image: url("/cdn/shop/files/statement-tile-2-4.webp"); }
.about__tile--p11 { background-image: url("/cdn/shop/files/statement-tile-2-5.webp"); }
.about__tile--p12 { background-image: url("/cdn/shop/files/statement-tile-2-6.webp"); }
.about__tile--p13 { background-image: url("/cdn/shop/files/statement-tile-3-1.webp"); }
.about__tile--p14 { background-image: url("/cdn/shop/files/statement-tile-3-2.webp"); }
.about__tile--p15 { background-image: url("/cdn/shop/files/statement-tile-3-3.webp"); }
.about__tile--p16 { background-image: url("/cdn/shop/files/statement-tile-3-4.webp"); }
.about__tile--p17 { background-image: url("/cdn/shop/files/statement-tile-3-5.webp"); }
.about__tile--p18 { background-image: url("/cdn/shop/files/statement-tile-3-6.webp"); }
/* col4 のみ Figma Frame 1461 (node 1666:28543) 側で 4-6/4-2 を入替表示
   (top→bottom: 4-1, 4-6, 4-3, 4-4, 4-5, 4-2)。col1-3 は filename 順=Figma 順。 */
.about__tile--p19 { background-image: url("/cdn/shop/files/statement-tile-4-1.webp"); }
.about__tile--p20 { background-image: url("/cdn/shop/files/statement-tile-4-6.webp"); }
.about__tile--p21 { background-image: url("/cdn/shop/files/statement-tile-4-3.webp"); }
.about__tile--p22 { background-image: url("/cdn/shop/files/statement-tile-4-4.webp"); }
.about__tile--p23 { background-image: url("/cdn/shop/files/statement-tile-4-5.webp"); }
.about__tile--p24 { background-image: url("/cdn/shop/files/statement-tile-4-2.webp"); }

@media (prefers-reduced-motion: reduce) {
  .about__col-inner {
    animation: none !important;
  }
}

.about__veil {
  position: absolute;
  inset: 0;
  /* Figma SP デザインに合わせ、純黒 60% から青味のある軽めの暗幕に
     (タイル + チェブロンの色がもっと鮮やかに見えるように) */
  background: rgba(8, 18, 42, 0.42);
}

/* グレイン/ノイズオーバーレイ (Figma 設定の Noise effect 再現)
   白色グレイン(RGB=1, alpha=ノイズ濃度) を通常合成で乗せる。
   暗部にしっかり粒状感を出すため opacity 0.4 / 通常 blend に */
.about__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  background-repeat: repeat;
  opacity: 0.4;
  pointer-events: none;
}

.about__content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 28px;
  text-align: center;
  padding: 24px clamp(16px, 4vw, 40px);
}

.about__subtitle {
  display: inline-flex;
  gap: 12px;
  align-items: center;
}

.about__logo {
  /* デザイン合わせでサイズ感を大きく。
     「とは」込みの一体型画像 (about-title.webp) に差し替え。図鑑部分が
     画像幅の約86%なので、図鑑が従来 (max 560px) と同サイズに見えるよう
     全体を 1.165倍 (340/42/560 → 400/49/655) にスケール。 */
  width: clamp(400px, 49vw, 655px);
  height: auto;
  display: block;
  flex-shrink: 0;
}

.about__subtitle span {
  font-family: "Zen Maru Gothic", sans-serif;
  /* 画面幅に合わせて拡大縮小 */
  font-size: clamp(20px, 1.6vw, 32px);
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #fff;
}

.about__body {
  margin: 0;
  font-family: "Zen Maru Gothic", sans-serif;
  /* 「PC：18px前後、最大サイズ22px」: 16-18 → 18-22 に拡大 */
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0;
  color: #fff;
  font-feature-settings: "palt" 1;
}

/* SP 限定の改行 (PC では non-display) */
.sp-only-br {
  display: none;
}


/* === concat: src/styles/experience.css === */
.experience {
  position: relative;
  /* PC: section をさらにコンパクトに (110 → 80 top)。
     カードエリア下(白コンテナ〜次セクション)の余白が詰まっていたので
     bottom を 32 → 80px に拡大 (デザイン合わせ)。
     旧トップ白フェード gradient は廃止。
     全hot時の #FFD7D7 が均一に出るよう、白オーバーレイなし。 */
  padding: 80px 0 80px;
  background: var(--mood-bg);
  transition: background-color 420ms ease;
  overflow: hidden;
}

/* エリア背景 — クリック方向で 直行切替 (smooth)。
   hot クリック → #FFD7D7、cold クリック → #E9E9E9。
   ※ 複合セレクタ .experience.experience--lock で specificity を上げて、
   後段の SP @media .experience ルール (var(--mood-bg)) に上書きされないように */
/* 白フェード gradient は廃止。
   背景色だけ var で切替 (cold #e9e9e9 / hot #FFD7D7)。 */
.experience.experience--lock {
  background-image: none;
  background-color: var(--lock-mood-bg, #e9e9e9);
  transition: background-color 220ms ease-out;
}
.experience.experience--remote {
  background-image: none;
  background-color: var(--remote-mood-bg, #e9e9e9);
  transition: background-color 220ms ease-out;
}

.experience > * {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
}

/* タイトル・街並みバンドはセクション全幅で背景表現したいので max-width を上書き */
.experience__ticker,
.experience__city-band {
  max-width: none;
  padding-inline: 0;
}

/* (旧 .experience::before / ::after の街並み+人物コーナーは削除済み) */

/* === sec02 タイトル背面のローマ字 ticker (Figma 2056:4827) ===
   HIYARI / HOTTO / HIYARI / HOT が 1 セット、これを 2 重にして
   左 → 右 にゆっくり drift。translateX(-50%) → 0 でシームレスループ */
.experience__ticker {
  position: absolute;
  /* PC: ticker をさらに上に。section 上端付近で上半分が裁断される位置 */
  top: 30px;
  /* viewport 端から端まで流れる "横スクロールテープ" 演出。
     title (880 中央) との幅違いは意図的なデザイン (Supreme/Adidas 等で
     よく使われるマーキー演出)。
     .experience > * の section-width cap を max-width: none で解除 */
  left: 0;
  right: 0;
  max-width: none;
  padding-inline: 0;
  overflow: hidden;
  pointer-events: none;
  /* Figma 仕様「ブレンドモードで白を薄く」を実装で再現。
     soft-light + opacity 0.7 で背景に馴染ませる (検証パネル v3 採用)。
     hot/cold 両bgに対して柔らかい白として抜ける */
  opacity: 0.7;
  mix-blend-mode: soft-light;
  color: #fff;
  font-family: "Darumadrop One", sans-serif;
  font-size: 100px;
  /* line-height を 1 に: line-box = font-size となり pill (68) との center 差分が縮む */
  line-height: 1;
  white-space: nowrap;
  z-index: 1; /* タイトル(z:2) より後ろに */
  /* 両端 5% を透過 → 端で fade in/out して "流れてくる/消えていく" 演出 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.experience__ticker-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  /* PC: 28s → 45s でさらにゆっくりめ (流れがゆったり感じられるテンポ) */
  animation: tickerDriftLeft 45s linear infinite;
  will-change: transform;
}

.experience__ticker i {
  position: relative;
  display: block;
  flex: 0 0 136px;
  width: 136px;
  height: 68px;
  border-radius: 51px;
  background: rgba(255, 255, 255, 0.5);
  /* line-height: 1 でも Darumadrop One は visible glyph が 8px 下なので
     pill を 8px 下にずらしてピクセル一致 */
  transform: translateY(8px);
}

/* knob: Figma 直 (Group 1175 / 1177) — 52×52 円, 白, opacity 0.8。
   inset 11.76%/5.88% は親 136×68 で 8px/8px (上下/外側) と数学的に等価 */
.experience__ticker i::before {
  content: "";
  position: absolute;
  top: 8px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.8;
}

.experience__ticker i:nth-of-type(odd)::before {
  left: 8px; /* HIYARI 後 → off (knob 左) */
}

.experience__ticker i:nth-of-type(even)::before {
  right: 8px; /* HOTTO 後 → on (knob 右) */
}

.experience__ticker span {
  display: inline-block;
  flex: 0 0 auto;
  line-height: 1;
  text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.05);
}

@keyframes tickerDriftLeft {
  /* 2 セット並んだ track の "前半セット" を起点 → "後半セット" の位置へ
     50% 進む = 1 セット分右に動く = 視覚的には全体が左にスクロール */
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience__ticker-track {
    animation: none;
  }
}

/* === sec02 タイトル: Figma 直のtitle-full.png 1枚で固定。
   レイヤー重ねのズレを根本から排除。出現演出は画像全体で1回 ===
   title-stage は Figma 通り 880px max で中央配置 (拡大しない) */
.experience__title {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  /* スイッチエリアに早く到達できるよう縦を少し圧縮 (80 → 40px) */
  padding: 0 clamp(16px, 3vw, 32px) 40px;
  text-align: center;
}

.experience__title-stage {
  position: relative;
  width: 100%;
  max-width: 1080px;
}

/* タイトルレイアウト — title-stage を絶対配置のコンテナ化。
   テキスト2パーツ(上段) + キャラ3つ(下段) を元の合成画像と同じ配置で並べる。
   aspect-ratio 1740/806 を保ち、内部は % 配置で全幅可変。
   ロック側もリモコン側も同じ構造でクラス使い回し可能 */
.experience__title-stage--lock {
  /* 元 aspect 1740/806 だと縦に空き過ぎ、580だと詰まり過ぎ → 中間 700 で調整 */
  aspect-ratio: 1740 / 700;
  position: relative;
}

/* テキスト2パーツ : 上段左右で並列。サイズは元の合成画像に合わせる */
.ex-title-text {
  position: absolute;
  display: block;
  height: auto;
  transform-origin: 50% 50%;
  will-change: transform;
}
.ex-title-text--line1 {
  /* "スマートロックで" 1130x287 (aspect 3.94) → 上段左 / 静止 (動かさない) */
  left: 1%;
  top: 5%;
  width: 42%;
}
.ex-title-text--line2 {
  /* "ひやり を ほっと に" 1522x419 (aspect 3.63) → 上段右 / 静止 (動かさない)
     cloud 部分が上に出るので top をマイナスで cloud を stage 上端に揃える */
  right: 0;
  top: -3%;
  width: 55%;
}

/* キャラ3つ (デバイス/ひやり/ほっと) 既存の cfaceFlipA/B (キャンペーン同款) を流用
   → 7秒周期で 6回パカパカ → 約2秒休み のルーティン。
   transform: scale(1.5) で視覚的に 1.5倍 (bounding box は維持) */
.ex-title-char {
  position: absolute;
  display: block;
  transform: scale(1.5);
  transform-origin: 50% 50%;
}
.ex-title-char__f {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.ex-title-char__f--a {
  opacity: 1;
  animation: cfaceFlipA 7000ms steps(1, end) infinite;
  animation-delay: var(--tf-delay, 0ms);
}
.ex-title-char__f--b {
  opacity: 0;
  animation: cfaceFlipB 7000ms steps(1, end) infinite;
  animation-delay: var(--tf-delay, 0ms);
}
/* 配置 + 個別ディレイ */
.ex-title-char--device {
  /* 商品(デバイス)を line1 ロゴの目視センターに。
     Gyazo中央ガイド線 ≈ タイトル座標29% (line1 中心) → device 中心を 8%→11% で合わせる。 */
  left: 11%;
  top: 38%;
  width: 22%;
  aspect-ratio: 635 / 451;
  --tf-delay: 0ms;
}
.ex-title-char--hiyari {
  /* ひやり顔を「ひやり」ロゴの目視センターに。
     line2 ロゴ内の青(ひやり)中心=26.4% → タイトル座標 ≈57.2% に顔中心を合わせる。 */
  left: 48.7%;
  top: 34%;
  width: 22%;
  aspect-ratio: 570 / 484;
  transform: scale(1.3);
  --tf-delay: 0ms; /* 3要素のカタカタ(パカパカ)を同位相に揃える */
}
.ex-title-char--hotto {
  /* ほっと顔を「ほっと」ロゴの目視センターに (共通デフォルト)。
     最終位置は下の stage 別上書き (位置調整ツール確定値) を参照。 */
  left: 72.2%;
  top: 34%;
  width: 22%;
  aspect-ratio: 570 / 484;
  transform: scale(1.3);
  --tf-delay: 0ms; /* 3要素のカタカタ(パカパカ)を同位相に揃える */
}

/* (位置調整ツール確定値):
   ひやり/ほっと顔・商品(デバイス)を stage 別に目視センター調整。
   aspect-ratio / transform scale は上の共通ルールを継承。
   PC/タブレットのみ (SP ≤768px の縦積みレイアウトには影響させない)。 */
@media (min-width: 769px) {
  .experience__title-stage--lock .ex-title-char--device   { left: 11%;   top: 43%;   width: 22%; }
  .experience__title-stage--remote .ex-title-char--device { left: 11.3%; top: 43%;   width: 22%; }
  /* ロックの ひやり/ほっと 両顔をセンターから +20px 右へ微調整。 */
  .experience__title-stage--lock .ex-title-char--hiyari   { left: 48.5%; top: 37.5%; width: 20.6%; margin-left: 20px; }
  .experience__title-stage--remote .ex-title-char--hiyari { left: 48.5%; top: 37.7%; width: 20.6%; }
  .experience__title-stage--lock .ex-title-char--hotto    { left: 75.1%; top: 38.6%; width: 20.6%; margin-left: 20px; }
  /* リモコンの ほっと顔だけ +40px 右へ微調整。 */
  .experience__title-stage--remote .ex-title-char--hotto  { left: 73.5%; top: 37.6%; width: 20.6%; margin-left: 40px; }
}

/* テキスト rattle (上下動なし、rotate + translateX のみ) */
@keyframes lockTextRattle1 {
  0%, 30%, 100% { transform: rotate(0) translateX(0); }
  3%  { transform: rotate(-2.2deg) translateX(-1.5px); }
  7%  { transform: rotate(2.2deg)  translateX(1.5px); }
  10% { transform: rotate(0) translateX(0); }
  13% { transform: rotate(-2.2deg) translateX(-1.5px); }
  17% { transform: rotate(2.2deg)  translateX(1.5px); }
  20% { transform: rotate(0) translateX(0); }
  23% { transform: rotate(-2.2deg) translateX(-1.5px); }
  27% { transform: rotate(2.2deg)  translateX(1.5px); }
}
@keyframes lockTextRattle2 {
  0%, 30%, 100% { transform: rotate(0) translateX(0); }
  3%  { transform: rotate(1.6deg)  translateX(1.5px); }
  7%  { transform: rotate(-1.6deg) translateX(-1.5px); }
  10% { transform: rotate(0) translateX(0); }
  13% { transform: rotate(1.6deg)  translateX(1.5px); }
  17% { transform: rotate(-1.6deg) translateX(-1.5px); }
  20% { transform: rotate(0) translateX(0); }
  23% { transform: rotate(1.6deg)  translateX(1.5px); }
  27% { transform: rotate(-1.6deg) translateX(-1.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .ex-title-text--line1,
  .ex-title-text--line2,
  .ex-title-char__f--a,
  .ex-title-char__f--b {
    animation: none;
  }
  .ex-title-char__f--b {
    opacity: 0;
  }
}

/* SMART REMOTE/HUB: ロック側と同じ ex-title-* 構造を流用するため
   aspect-ratio もロックと同値 (1740/700) に揃える */
.experience__title-stage--remote {
  aspect-ratio: 1740 / 700;
  position: relative;
}

.experience__title-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(28px) scale(0.92);
  animation: titleEntry 900ms cubic-bezier(0.22, 1, 0.36, 1) 250ms forwards;
}

@keyframes titleEntry {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience__title-full {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .experience__title-stage--lock {
    animation: none;
  }
}

/* === タイトルブロック底辺の街並みバンド ===
   Figma 正解: 1 枚の街並み画像 (Mask group / 550×334) を左下と右下にだけ
   配置し、中央は空ける (背景がそのまま見える)。
   ユーザー要望: PC では city が下のカード領域に被るように下端を -40px 余分に
   ハミ出させて、ホワイトのカード上端と重なる視覚に */
.experience__city-band {
  position: absolute;
  /* Figma 1702:16009 準拠。街(title-bg) を「コンテンツ端」に
     アンカーし中心を端に合わせる → 街の外側半分は margin 側へ延びる。
     ・画面が狭い(=コンテンツ幅相当)時: 外側半分が viewport 外にはみ出し「半分隠れる」
     ・画面を広げると margin に余白ができ、だんだん全部見えてくる (仕様)
     overflow は visible にして margin 側へ延ばし、はみ出しは .page(overflow:clip) が
     viewport でクリップ (横スク無し)。z-index:4 で白カード(z:3)上端にかぶせる。 */
  bottom: -90px; /* 白カード上端にかぶさるまで下げる */
  left: 0;
  right: 0;
  height: clamp(200px, 22vw, 340px);
  pointer-events: none;
  z-index: 4;
}

.experience__city-band::before,
.experience__city-band::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 100%;
  /* aspect-ratio だと擬似要素の幅が不安定 (Chromiumで148px/Safariで0等) なので
     band 高さ(clamp 200,22vw,340) × 画像比1.77 = 明示 width で確実に実寸確保。 */
  width: clamp(354px, 38.9vw, 602px);
  background-repeat: no-repeat;
  background-size: contain;
}

.experience__city-band::before {
  left: 0; /* コンテンツ左端 */
  transform: translateX(-50%); /* 中心を左端に → 左半分は margin/画面外、画面拡大で出現 */
  background-image: url("/cdn/shop/files/title-bg-left.webp");
  background-position: left bottom;
}

.experience__city-band::after {
  right: 0; /* コンテンツ右端 */
  transform: translateX(50%);
  background-image: url("/cdn/shop/files/title-bg-right.webp");
  background-position: right bottom;
}

@media (max-width: 720px) {
  .experience__city-band {
    height: clamp(100px, 28vw, 180px);
  }
  .experience__city-band::before,
  .experience__city-band::after {
    width: clamp(140px, 38%, 220px);
  }
}

.face-crop {
  display: block;
  flex: none;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-color: transparent;
}

.face-crop--cold {
  background-image: url("/cdn/shop/files/bubble-young-woman-cold.webp");
  background-size: cover;
  background-position: center;
}

.face-crop--hot {
  background-image: url("/cdn/shop/files/bubble-young-woman-hot.webp");
  background-size: cover;
  background-position: center;
}

.face-crop--child {
  background-image: url("/cdn/shop/files/bubble-kid-hot.webp");
  background-size: cover;
  background-position: center;
}

/* === BOTTOM METER は廃止 (HTML/CSS/JS すべて削除) === */

.case-list {
  /* v3: .case-card の min-height を case-list 幅に連動させたいので
     case-list を container にする (card 自身の cqw は自身の高さには使えない仕様) */
  container-type: inline-size;
  container-name: cards;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  /* 「全周 58px で対称に」: 54 → 58 */
  padding: 58px;
  border-radius: 70px;
  /* カードを囲う白背景の不透明度を 100% に (0.74 → 1) */
  background: #fff;
  /* 左右 25px ずつ余白 (calc 100% - 50px) */
  width: calc(100% - 50px);
  margin-inline: auto;
}

.case-card {
  /* v2: container query で「カード自身」を基準にする。
     これ以降の cqw 単位は = カード幅の 1% を意味する。 */
  container-type: inline-size;
  container-name: card;
  position: relative;
  /* v3: 高さは case-list の幅に連動 (cqw は祖先の "cards" container を参照)。
     2カラム grid なので case-list 幅の約半分が card 幅 → card 高さ = card 幅の 65%
     ≒ case-list 幅の 32%。min 280 / max 440 で極端な見た目崩れを防ぐ。 */
  min-height: clamp(280px, 32cqw, 440px);
  /* ============================================================
     「ボタンを囲うエリア」のルール (= カード内コンテンツエリアの余白規則)
     ------------------------------------------------------------
     方針: カード内コンテンツ (コピー + 点線 + スイッチ=ボタン) は1つの「エリア」
     として扱い、カード端から一律 --area-inset の余白を取る。右側は右上バッジを
     避けるため、追加でバッジ占有幅 --badge-reserve を確保する。
     → エリアの左端からの余白 = --area-inset、エリア右端→バッジの余白 = --area-inset
       となり、ボタンを囲うエリアの左右余白が常に一致する。

     ★ cqw の落とし穴と正しい解法:
       .case-card は container だが「自分自身の padding の cqw」は祖先(.case-list)を
       参照してしまう。一方バッジ(子)の cqw は card を参照する。基準が食い違うため、
       以前は --badge-reserve を 56px 固定にしていたが、実コンテナ上限は 1680px で
       card 幅が ~745px まで広がり、その幅ではバッジ clamp が下限を超えて成長する
       (占有 ~74px)。結果、右余白が縮んでいた (39/31 など)。
       → 正しくは「子要素 (コピー/点線/スイッチ) の margin/width」で reserve を効かせる。
         子要素なら cqw が card を参照するので、バッジ実寸に厳密追従する。
       よって card 自身の padding は左右とも --area-inset のみ、右側の reserve は
       下の各子要素 (copy/line/visual) で margin-right / width として差し引く。
     ------------------------------------------------------------ */
  --area-inset: 40px; /* v3: カード端→エリアの余白 (上左右の基準) */
  /* 右上バッジ占有幅 = right offset + badge width。子要素で使うと cqw が card 参照に
     なりバッジ実寸へ厳密追従する (card 自身の padding では使わないこと)。 */
  --badge-reserve: calc(clamp(12px, 2cqw, 22px) + clamp(44px, 8cqw, 70px));
  /* 下だけ 42px は (スイッチ上下余白の目視均等) 用の個別調整。
     左右上は --area-inset。右側の badge-reserve は子要素側で差し引く。
       デザイン合わせでスイッチ下の余白を 1.5倍 (42→63px)。
     点線の margin-bottom と対で上下対称を維持。 */
  padding: var(--area-inset) var(--area-inset) 63px var(--area-inset);
  border-radius: 28px;
  /* v4: flex 縦並びで、テキスト+点線は上、スイッチは「残り下半分の中央」に
     auto-margin で押し込み。これでカード高さの変化に対してスイッチ位置が
     視覚的に連動する。 */
  display: flex;
  flex-direction: column;
  color: #fff;
  /* ひやり→ほっと時の「ほっと」ロゴ(hot-flash)がカード境界で上下切れていた。
     PC は overflow:hidden を外してロゴがカードより上の階層へはみ出せるように。
     角丸維持: 背景グラデは border-radius で自動クリップ、テクスチャ(::before)には
     border-radius を付与。SP(≤900) は別レイアウトで overflow:hidden を維持。 */
  overflow: visible;
  /* cold グラデの不透明度二重掛けで文字が読みづらい
     ため 0.9 を除去して不透明に (art-bg の opacity と二重になっていた)。 */
  background: linear-gradient(180deg, rgb(15, 137, 204), rgb(55, 195, 210));
  transform: translateY(0) rotate(0deg);
  transition:
    background 320ms ease,
    transform 260ms var(--spring),
    box-shadow 260ms ease;
  animation: cardIn 0.7s var(--spring) both;
}

.case-card:nth-child(2) {
  animation-delay: 0.08s;
}

.case-card:nth-child(3) {
  animation-delay: 0.16s;
}

.case-card:nth-child(4) {
  animation-delay: 0.24s;
}

.case-card:nth-child(5) {
  animation-delay: 0.32s;
}

.case-card:nth-child(6) {
  animation-delay: 0.4s;
}

/* カード全体の持ち上げ(translateY/rotate)+ドロップシャドウ演出は撤去。
   ホバー演出はスイッチ(ピル)の白フォグに一本化する。 */

/* ほっとグラデの不透明度が art-bg(on) と二重掛けになり
   文字が読みづらいため alpha を除去して不透明に (cold 対応のほっと版)。 */
.case-card--hot {
  background: linear-gradient(180deg, rgb(244, 56, 56), rgb(255, 129, 55));
}

.case-card.is-hot {
  background: linear-gradient(180deg, rgb(244, 56, 56), rgb(255, 129, 55));
}

/* 「ほっと」演出(hot-flash)が出ている間は、そのカードを兄弟カードより最前面に。
    overflow:visible にした結果、各カードが個別の重なり順になり、はみ出した
   「ほっと」ロゴが DOM 順で後ろのカード(例: 3を押すと 5)の背面に隠れていた。
   flash 中(.is-hot-flash)だけ z-index を大きく上げ、ロゴを全カードの最前面に表示する。 */
.case-card:has(.hiyari-toggle.is-hot-flash) {
  z-index: 60;
}

/* 221-223 本番アート (Figma) カード背景の青/赤エリアに、トグルと同じシーンを
   うっすら敷く。off(ひやり)/on(ほっと) の 2 枚を重ね、mood 切替時に opacity で
   クロスフェード (パッと切替ではなくファーッと変化)。各カードが
   style="--card-scene-off/on" で 2 枚を保持。SP は下の media query で display:none。 */
.case-card__art-bg {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.case-card__art-bg--off {
  background-image: var(--card-scene-off);
  /* cold スイッチ背景の下層シーン重ねを 0.18→0.1 に薄め、
     文字可読性を上げる (のグラデ不透明化と対)。 */
  opacity: 0.1;
}
.case-card__art-bg--on {
  background-image: var(--card-scene-on);
}
.case-card.is-hot .case-card__art-bg--off {
  opacity: 0;
}
.case-card.is-hot .case-card__art-bg--on {
  opacity: 0.18;
}

.case-card__copy,
.case-card__line,
.case-card__side,
.case-card__mood {
  position: relative;
  z-index: 1;
}
/* visual だけ z-index を上げる → hot-flash スタンプ演出 (内側 z:25)
   が title-pill (z:1) より手前に描画される */
.case-card__visual {
  position: relative;
  z-index: 3;
}

.case-card__copy {
  /* ひやり↔ほっと切替で行数が変わっても点線・スイッチ位置がズレないよう、
     テキスト枠を常に3行ぶんの高さで確保 (line-height 1.6 × 3 = 4.8em)。
     さらに縦中央寄せにして「2行のときは中央 / 3行のときはフィット」に。 */
  min-height: 4.8em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Zen Maru Gothic", sans-serif;
  /* カードのテキストを画面幅で可変。
     min は 14 → 16 に引き上げ (画面幅小でも読みやすさ確保)。 */
  /* 説明文を PC18-19 / 上限24px に拡大
     中間域のフォントサイズを控えめに (1.5vw → 1.2vw) */
  font-size: clamp(16px, 1.2vw, 24px);
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  /* 本文も点線/スイッチと同じエリア幅に揃える (右側を --badge-reserve 詰め)。
     右上バッジを避けつつ、コピーがエリア内で中央寄せになる。 */
  margin-right: var(--badge-reserve);
}

.case-card__copy p {
  margin: 0;
}

/* 「※…ハブ製品が必要です」等の注記は小さい注釈として扱い、
   メイン3行のレイアウトに影響しすぎないようにする (01/05 ほっとのみ)。 */
.case-card__note {
  display: block;
  margin-top: 3px;
  /* ※注記だけ小さく 12〜14px */
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.35;
  font-weight: 400;
  opacity: 0.82;
}

/* デフォルト __title と __body は別行扱い (旧 <br> の代替) */
.case-card__title,
.case-card__body {
  display: block;
}

/* PC: SP 専用 scene-pic は hide (PC は hiyari-toggle を表示) */
.case-card__scene-pic {
  display: none;
}

.case-card__copy-on {
  display: none;
  color: #fff;
}

.case-card.is-hot .case-card__copy-off {
  display: none;
}

.case-card.is-hot .case-card__copy-on {
  display: block;
  animation: copyPop 0.38s var(--spring);
}

.case-card__line {
  height: 2px;
  /* スイッチは margin:auto で残り空間の中央に入る。
     スイッチ上の余白 = 点線の margin-bottom、スイッチ下の余白 = カードの
     padding-bottom なので、両者を揃えて「スイッチ上下の余白を目視で同じ」にする。
     右側は --badge-reserve 分だけ margin-right で詰め、点線右端→バッジの
     余白を --area-inset に保つ (cqw が card 参照になる子要素で計算)。
       デザイン合わせでスイッチ上の余白を 1.5倍 (42→63px)。
     card の padding-bottom(63) と対で上下対称。 */
  margin: 16px var(--badge-reserve) 63px 0;
  border-top: 2px dashed rgba(255, 255, 255, 0.9);
}

.case-card__visual {
  /* v5: スイッチを大きくする方針に変更。
     - width: 100% でコンテンツエリア (card_width - padding-left - padding-right) を埋める
     - max-width clamp で大型モニターでの上限。
       1920+ モニターで巨大化しないよう上限を 680 → 600 → 540 と段階的に下げた。
     padding-right clamp と組み合わせて card_width ≈ 580 でも 470px 強を確保 */
  /* v3: スイッチ幅は基準ライン(点線)に連動。点線と同じく右側を --badge-reserve
     だけ詰める。
     ただしデザイン上スイッチは「点線より少しだけ内側」。よって左右に
     --switch-inset を追加で詰め、点線の内側に左右対称で収める (点線左端→スイッチ
     +inset / スイッチ右端→点線 +inset)。カード幅が変わっても点線=基準のまま連動。 */
  --switch-inset: clamp(6px, 1.25cqw, 13px);
  width: calc(100% - var(--badge-reserve) - 2 * var(--switch-inset));
  max-width: none;
  /* v4 / : 上下は auto-margin で「残り空間の中央」に配置。
     左右は inset 分 (右はバッジ分も) を margin で確保し、点線の内側に中央寄せ。 */
  margin: auto calc(var(--badge-reserve) + var(--switch-inset)) auto var(--switch-inset);
}

.hiyari-toggle {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1001 / 382;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

/* ブラウザ標準フォーカス枠(青い四角)を全状態で除去。
   スイッチはノブ位置・色で状態が分かるため a11y 影響は最小。 */
.hiyari-toggle:focus,
.hiyari-toggle:focus-visible {
  outline: none;
  box-shadow: none;
}

/* 操作促進パルス: knob (= ひやり顔バッジ / OFF 位置) の背景にやわらかな白フォグ。
   光ではなく "背景が白く霞む" 演出。Figma 仕様の multi box-shadow:
     0 0 10px #fff, 0 0 50px #fff, 0 0 80px rgba(255,255,255,0.6)
   を element サイズに対する比率で再現。
   --card-index でカード毎に位相をずらして時間差で淡くフェードイン/アウト */
.hiyari-toggle::before {
  content: "";
  position: absolute;
  /* knob は left:0 width:39.76% → 中心 x = 19.88% */
  left: 19.88%;
  top: 50%;
  width: 37%; /* 中央光球: 控えめと強化の中間 */
  aspect-ratio: 1;
  border-radius: 50%;
  /* 4段グローで中間の強さに。
     強化版 (16/38/70/120/180) と 控えめ版 (12/50/90) の間着地 */
  background: #ffffff;
  box-shadow:
    0 0 14px #ffffff,
    0 0 55px #ffffff,
    0 0 100px rgba(255, 255, 255, 0.8),
    0 0 140px rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 9;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  /* "ふわー" 感: 長めの 4.5s 周期 + ease-in-out で
     ゆっくり立ち上がってゆっくり消える。scale 微変化で呼吸感 */
  animation: togglePulse 4.5s ease-in-out infinite;
  animation-delay: calc(var(--card-index, 0) * 0.9s);
}

/* hover 専用 fog (アニメーションを持たない separate element 経由で transition のみで滑らかに変化) */
.hiyari-toggle::after {
  content: "";
  position: absolute;
  left: 19.88%;
  top: 50%;
  width: 37%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 14px #ffffff,
    0 0 55px #ffffff,
    0 0 100px rgba(255, 255, 255, 0.8),
    0 0 140px rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 9;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  /* hover in/out で ふわっと フェード */
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes togglePulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }
  /* ふわー... と立ち上がり (~1.35s で半分の明るさ) */
  30% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.95);
  }
  /* ピーク (~2.25s 時点で最大) */
  50% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1);
  }
  /* ゆっくりフェードアウト */
  70% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.95);
  }
  88% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.88);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }
}

/* v2: 青い縁(::after)専用。拡縮(scale)をやめ、ホバーと同じ
   「フェード(opacity)だけ」の動きにする。transform は base の
   translate(-50%,-50%) を保持し、サイズは常に scale(1) 相当のまま。 */
@keyframes ringFade {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.95;
  }
  70% {
    opacity: 0.5;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hiyari-toggle::before {
    animation: none;
    opacity: 0;
  }
}

/* knob が ON 側に移動した状態 = ユーザーがすでに操作した → パルス停止 */
.hiyari-toggle[aria-pressed="true"]::before {
  animation: none;
  opacity: 0;
}

/* ホバー時: 同じ case-list 内の全 toggle の脈動アニメーション (::before) を止め、
   ホバー中の toggle だけ ::after fog を ふわっと フェードインで表示。
   ※ HOT 状態 (aria-pressed=true) の toggle では hover でも fog を出さない */
.case-list:has(.hiyari-toggle:hover) .hiyari-toggle::before {
  animation: none;
  opacity: 0;
}

.case-list:has(.hiyari-toggle:hover) .hiyari-toggle:not([aria-pressed="true"]):hover::after {
  /* transition は ::after の base 定義 700ms ふわっと を継承 */
  opacity: 1;
}

.hiyari-toggle__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

/* ホバー演出 = ボタン(ピル)の「外側」にやわらかい白フォグ・グロー。
   脈動なし。ホバー中はずっと点灯（一定）、離すと消える。
   ノブの脈動グロー (::before の box-shadow) と同じ質感をピル外周に適用。
   box-shadow は要素の外側に描かれるので overflow:hidden でもクリップされない。 */
.hiyari-toggle__clip {
  transition: box-shadow 320ms ease;
}

.hiyari-toggle:hover .hiyari-toggle__clip {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.14),
    0 0 14px rgba(255, 255, 255, 0.6),
    0 0 38px rgba(255, 255, 255, 0.4),
    0 0 68px rgba(255, 255, 255, 0.25);
}

.hiyari-toggle__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hiyari-toggle--focus-left .hiyari-toggle__bg {
  object-position: left center;
}

.hiyari-toggle--focus-center .hiyari-toggle__bg {
  object-position: center center;
}

.hiyari-toggle--focus-right .hiyari-toggle__bg {
  object-position: right center;
}

.hiyari-toggle--focus-left .hiyari-toggle__clip,
.hiyari-toggle--focus-center .hiyari-toggle__clip,
.hiyari-toggle--focus-right .hiyari-toggle__clip {
  animation: none;
}

.hiyari-toggle__bg--on {
  z-index: 0;
}

.hiyari-toggle__bg--off {
  z-index: 1;
  transition: opacity 0.5s;
}

.hiyari-toggle__knob {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  /* toggle aspect-ratio 1001/382 上で knob を完全な正方形に。
     toggle 高 = toggle 幅 * 382/1001 ≒ 38.16%。knob を 38.16% × 100% にすれば
     正方形ピッタリ = letterbox 消滅 → off では左端 / on では右端が toggle edge に揃う。
     旧 39.76% は letterbox 4.8px が残り、「隙間」になっていた。 */
  width: 38.16%;
  height: 100%;
  cursor: grab;
  /* Windows Edge/Chrome でスイッチ切替が重い問題の対策。
     旧 `transition: left` は left プロパティ変更時に layout 再計算が走るため
     GPU 合成されず重い。transform に変更して GPU 合成パスに乗せる。
     ON 位置 = 100% - 38.16% = 61.84% (toggle 幅基準)
                = 61.84 / 38.16 ≈ 1.6205 (knob 幅倍率)
                = translateX(162.05%) (knob 自身幅基準) */
  transform: translateX(0);
  transition: transform 0.5s var(--spring);
  will-change: transform;
}

/* ON 状態: aria-pressed=true で knob を右端へ。
   CSS のみで状態管理 (JS は aria-pressed 切替+drag中の inline transform のみ)。
   drag 中の即時追従は move の inline transform が担う (インライン style は
   stylesheet より優先される) ため :not(.is-dragging) は不要。逆に付けると ON 状態の
   knob を押した瞬間に is-dragging が付与され this rule が外れて translateX(0) へ
   transition:none で瞬間移動する (タップ切替が「パカッ」とワープする不具合)。位置は
   常にこの rule で保持し、tap/drag どちらもスライド animate させる。 */
.hiyari-toggle[aria-pressed="true"] .hiyari-toggle__knob {
  transform: translateX(162.05%);
}

.hiyari-toggle__knob:active {
  cursor: grabbing;
}

.hiyari-toggle__knob.is-dragging {
  transition: none;
}

/* Figma 完全再現: 丸い顔写真(円 170px相当)に沿った縁取り＋白いオーラ。
   顔画像は 350x350 正方を object-fit:contain で円表示 → knob 内で高さ基準の正円。
   枠 2px グラデ(外側) / padding 透明で中空 / 白ドロップシャドウで発光。
   旧巨大オーラの代わりにこの要素を「定期的に点滅」させる (togglePulse) */
/* 白いオーラ(発光) 170円から放射する白ドロップシャドウ。Figma の
   ドロップシャドウ 0 0 ぼかし80 #FFFFFF 60% + 0 0 ぼかし50 #FFFFFF */
.hiyari-toggle__knob::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* aspect-ratio は WebKit(iOS Safari) で padding と二重計上され楕円化する。
     ノブは正方形なので width/height を明示して全エンジンで真円にする。 */
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:
    0 0 80px rgba(255, 255, 255, 0.6),
    0 0 50px #ffffff;
  opacity: 0;
  animation: togglePulse 4.5s ease-in-out infinite;
  animation-delay: calc(var(--card-index, 0) * 0.9s);
  pointer-events: none;
  z-index: 9;
  /* ホバー点灯切替を滑らかに */
  transition: opacity 320ms ease;
}

/* ホバー中はノブ(ひやり丸)の白オーラも点灯しっぱなし (脈動停止)。
   光は控えめに (opacity 0.55)。 */
.hiyari-toggle:hover .hiyari-toggle__knob::before {
  animation: none;
  opacity: 0.55;
}

/* 縁取りリング: Figma グラデ #27A2E5→#37C3D2 を円の外側に。
   mask-composite で中空にして中央(顔写真)を透過させる。
    (toggle-tuner 確定値) 白い円に沿わせるため
   径 100%→98.5% / 太さ 2px→3px に微調整。
    v2: aspect-ratio は WebKit(iOS Safari) で box-sizing:content-box の padding を
   横幅に二重計上して楕円化する (実機でリングが横にズレる原因)。ノブは正方形なので
   width/height を等しく明示し、全エンジンで真円になるようにする。 */
.hiyari-toggle__knob::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 98.5%;
  height: 98.5%;
  transform: translate(-50%, -50%);
  box-sizing: content-box;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #27a2e5, #37c3d2);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* v2: フチは定期的に出る点滅リズムは残しつつ、拡縮(scale)はやめて
     ホバーと同じ「フェードだけ」の動きにする (ringFade = opacity のみ)。
     白オーラ(::before)の点滅とは opacity・遅延で同期。 */
  opacity: 0;
  animation: ringFade 4.5s ease-in-out infinite;
  animation-delay: calc(var(--card-index, 0) * 0.9s);
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: 11;
}

/* ホバー中はフチを点灯 (脈動停止) */
.hiyari-toggle:hover .hiyari-toggle__knob::after {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ほっと(押下済)のフチは赤グラデ #E60404〜#FF9A27。
   押下後は白オーラが消えるのでフチも消灯 (ホバー時のみ点灯)。 */
.hiyari-toggle[aria-pressed="true"] .hiyari-toggle__knob::after {
  background: linear-gradient(135deg, #e60404, #ff9a27);
  animation: none;
  opacity: 0;
}
.hiyari-toggle[aria-pressed="true"]:hover .hiyari-toggle__knob::after {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 旧・巨大白オーラ (Figma に無い既存実装) は表示停止。
   発光はこの上の .hiyari-toggle__knob::after が Figma 仕様で担う */
.hiyari-toggle::before,
.hiyari-toggle::after {
  display: none;
}

/* 押下後 (ユーザーが操作済み) は白いオーラの点滅だけ止める。
   リング(::after)は常時表示のまま残す */
.hiyari-toggle[aria-pressed="true"] .hiyari-toggle__knob::before {
  animation: none;
  opacity: 0;
}

/* HOT (押下済) 状態でも、ホバー中はノブの白オーラを点灯させる。
   詳細度を上げて上の「押下後 opacity:0」ルールに勝たせる。 */
.hiyari-toggle[aria-pressed="true"]:hover .hiyari-toggle__knob::before {
  animation: none;
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .hiyari-toggle__knob::before {
    animation: none;
    opacity: 0;
  }
  /* パルスは止め、フチは静止表示 (モーションなしで縁は見せる) */
  .hiyari-toggle__knob::after {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* A案 リファレンス画像を実測して、
   楕円直径 = knob 幅 / 楕円中心 = knob 中心 になるよう画像をスケール・配置。
   テキストは画像内楕円の上にあるので、自動的に knob 上端より上にはみ出る。
   ・hiyari (sample-hiyari-4) 楕円幅/画像幅 = 0.662, 楕円中心y = 44.3%
   ・hotto (sample-hotto-3) 楕円幅/画像幅 ≈ 1.0, 楕円中心y = 51.9% */
.hiyari-toggle__face {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  pointer-events: none;
  /* ひやり/ほっと文字に knob::after の青リング縁取りが
     被ってしまう問題を解消。face レイヤーをリング(z-index:11)より上に。 */
  z-index: 12;
}

.hiyari-toggle__face--off {
  /* oval-tuner 調整 */
  width: 100%;
  top: -13.4%;
}

.hiyari-toggle__face--on {
  /* oval-tuner 調整 (sample-hotto-4 用) */
  width: 100%;
  top: -13.6%;
  opacity: 0;
  transition: opacity 0.4s;
}

/* トグルノブのひやり面を 2フレーム カタカタ化。
   img の content プロパティで src を上書き、cfaceFlipA と同じ周期で切替
   (7秒で6回パカパカ→2秒休み)。
     リモコン側は各カードが --knob-off-anim で自分専用
   keyframes (knobHiyari1..6) を指す。未設定 (ロック側) は従来の switchHiyariFlip。 */
.hiyari-toggle__face--off {
  animation: var(--knob-off-anim, switchHiyariFlip) 7000ms steps(1, end) infinite;
}
@keyframes switchHiyariFlip {
  0%, 12% { content: url("/cdn/shop/files/sec02-switch-hiyari-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/sec02-switch-hiyari-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/sec02-switch-hiyari-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/sec02-switch-hiyari-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/sec02-switch-hiyari-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/sec02-switch-hiyari-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/sec02-switch-hiyari-1.webp"); }
}
@media (prefers-reduced-motion: reduce) {
  .hiyari-toggle__face--off {
    animation: none;
  }
}

/* リモコン側のほっと面も 2フレーム カタカタ化。
   各 article が --knob-on-anim で自分専用 keyframes (knobHotto1..6) を指す。
   ロック側は --knob-on-anim 未設定 → var が無効値となり animation は不適用
   (= 従来どおりほっと面は静止)。状態切替の opacity は JS / 既存ルールが担う。 */
.hiyari-toggle__face--on {
  animation: var(--knob-on-anim) 7000ms steps(1, end) infinite;
}

/* 221/222/223 本番アート統合 (card 01〜, ロック) 各カードが
   style="--knob-off-a/b, --knob-on-a/b" で持つ 2 フレームを CSS 変数経由で切替。
   off(ひやり)/on(ほっと) 双方を steps(1) でカタカタ化。.hiyari-toggle--art が
   付いたカードだけ上書き (リモコン/未移行カードは --knob-*-anim 方式のまま)。 */
.hiyari-toggle--art .hiyari-toggle__face--off {
  animation: switchFaceFlipOff 7000ms steps(1, end) infinite;
}
.hiyari-toggle--art .hiyari-toggle__face--on {
  animation: switchFaceFlipOn 7000ms steps(1, end) infinite;
}
@keyframes switchFaceFlipOff {
  0%, 12% { content: var(--knob-off-a); }
  12.001%, 24% { content: var(--knob-off-b); }
  24.001%, 36% { content: var(--knob-off-a); }
  36.001%, 48% { content: var(--knob-off-b); }
  48.001%, 60% { content: var(--knob-off-a); }
  60.001%, 72% { content: var(--knob-off-b); }
  72.001%, 100% { content: var(--knob-off-a); }
}
@keyframes switchFaceFlipOn {
  0%, 12% { content: var(--knob-on-a); }
  12.001%, 24% { content: var(--knob-on-b); }
  24.001%, 36% { content: var(--knob-on-a); }
  36.001%, 48% { content: var(--knob-on-b); }
  48.001%, 60% { content: var(--knob-on-a); }
  60.001%, 72% { content: var(--knob-on-b); }
  72.001%, 100% { content: var(--knob-on-a); }
}
@media (prefers-reduced-motion: reduce) {
  .hiyari-toggle__face--on,
  .hiyari-toggle--art .hiyari-toggle__face--off,
  .hiyari-toggle--art .hiyari-toggle__face--on {
    animation: none;
  }
}

/* リモコン スイッチノブ カードごと 2フレーム カタカタ keyframes。
   url は lp.css 基準 (= assets) で解決される。ひやり面 = --off, ほっと面 = --on。 */
@keyframes knobHiyari1 {
  0%, 12% { content: url("/cdn/shop/files/knob-hiyari-1-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/knob-hiyari-1-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/knob-hiyari-1-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/knob-hiyari-1-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/knob-hiyari-1-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/knob-hiyari-1-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/knob-hiyari-1-1.webp"); }
}
@keyframes knobHiyari2 {
  0%, 12% { content: url("/cdn/shop/files/knob-hiyari-2-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/knob-hiyari-2-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/knob-hiyari-2-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/knob-hiyari-2-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/knob-hiyari-2-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/knob-hiyari-2-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/knob-hiyari-2-1.webp"); }
}
@keyframes knobHiyari3 {
  0%, 12% { content: url("/cdn/shop/files/knob-hiyari-3-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/knob-hiyari-3-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/knob-hiyari-3-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/knob-hiyari-3-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/knob-hiyari-3-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/knob-hiyari-3-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/knob-hiyari-3-1.webp"); }
}
@keyframes knobHiyari4 {
  0%, 12% { content: url("/cdn/shop/files/knob-hiyari-4-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/knob-hiyari-4-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/knob-hiyari-4-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/knob-hiyari-4-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/knob-hiyari-4-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/knob-hiyari-4-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/knob-hiyari-4-1.webp"); }
}
@keyframes knobHiyari5 {
  0%, 12% { content: url("/cdn/shop/files/knob-hiyari-5-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/knob-hiyari-5-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/knob-hiyari-5-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/knob-hiyari-5-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/knob-hiyari-5-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/knob-hiyari-5-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/knob-hiyari-5-1.webp"); }
}
@keyframes knobHiyari6 {
  0%, 12% { content: url("/cdn/shop/files/knob-hiyari-6-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/knob-hiyari-6-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/knob-hiyari-6-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/knob-hiyari-6-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/knob-hiyari-6-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/knob-hiyari-6-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/knob-hiyari-6-1.webp"); }
}
@keyframes knobHotto1 {
  0%, 12% { content: url("/cdn/shop/files/knob-hotto-1-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/knob-hotto-1-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/knob-hotto-1-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/knob-hotto-1-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/knob-hotto-1-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/knob-hotto-1-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/knob-hotto-1-1.webp"); }
}
@keyframes knobHotto2 {
  0%, 12% { content: url("/cdn/shop/files/knob-hotto-2-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/knob-hotto-2-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/knob-hotto-2-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/knob-hotto-2-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/knob-hotto-2-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/knob-hotto-2-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/knob-hotto-2-1.webp"); }
}
@keyframes knobHotto3 {
  0%, 12% { content: url("/cdn/shop/files/knob-hotto-3-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/knob-hotto-3-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/knob-hotto-3-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/knob-hotto-3-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/knob-hotto-3-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/knob-hotto-3-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/knob-hotto-3-1.webp"); }
}
@keyframes knobHotto4 {
  0%, 12% { content: url("/cdn/shop/files/knob-hotto-4-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/knob-hotto-4-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/knob-hotto-4-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/knob-hotto-4-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/knob-hotto-4-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/knob-hotto-4-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/knob-hotto-4-1.webp"); }
}
@keyframes knobHotto5 {
  0%, 12% { content: url("/cdn/shop/files/knob-hotto-5-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/knob-hotto-5-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/knob-hotto-5-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/knob-hotto-5-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/knob-hotto-5-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/knob-hotto-5-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/knob-hotto-5-1.webp"); }
}
@keyframes knobHotto6 {
  0%, 12% { content: url("/cdn/shop/files/knob-hotto-6-1.webp"); }
  12.001%, 24% { content: url("/cdn/shop/files/knob-hotto-6-2.webp"); }
  24.001%, 36% { content: url("/cdn/shop/files/knob-hotto-6-1.webp"); }
  36.001%, 48% { content: url("/cdn/shop/files/knob-hotto-6-2.webp"); }
  48.001%, 60% { content: url("/cdn/shop/files/knob-hotto-6-1.webp"); }
  60.001%, 72% { content: url("/cdn/shop/files/knob-hotto-6-2.webp"); }
  72.001%, 100% { content: url("/cdn/shop/files/knob-hotto-6-1.webp"); }
}

/* A案実装 :
   sample-hiyari-4.png / sample-hotto-3.png (テキスト焼き込み済み一体型) を
   knob 画像 (sec02-switch-hiyari-1/2.webp, toggle-knob-on-a/b.webp) として使用。
   テキストが楕円画像に内包されているので、別レイヤー label は不要 → display: none。
   knob が translate でスライドしても、テキストは画像に焼き込まれているので
   楕円との位置関係が常に完全固定。 */
.hiyari-toggle__label,
.hiyari-toggle__label--off,
.hiyari-toggle__label--on {
  display: none;
}

/* HOT 切替時のお祝い装飾: 3 つの "ほっと" がふわっと現れてふわっと消える */
.hiyari-toggle__hot-flash {
  position: absolute;
  pointer-events: none;
  z-index: 100; /* 一番上のレイヤーに (タイトル / 番号バッジ含めて全カード内最前面) */
  opacity: 0;
  width: 18%;
  height: auto;
  /* 装飾位置は要素ごとに変数 --rot で回転角を保持しつつ animation で scale/opacity */
  --rot: 0deg;
  transform: rotate(var(--rot)) scale(0.5);
}

/* ===== 5 箇所配置 (ユーザー要望) =====
   色付き(赤) ほっと: 右上 / 左下 / 右下 (3箇所)
   白文字 ほっと: 左上 / 右下 (2箇所)
   合計 5 要素 (右下では赤+白がオーバーラップして "コンビ" 表現) */

/* === 5 箇所配置 (参考画像準拠 / ユーザー再指定) ===
   1. 赤(中) カード上端の中央やや右
   2. 白文字: visual 左端(中央高さ)
   3. 赤(大) カード左下角ハミ出
   4. 白文字: visual 下の右内側
   5. 赤(中) カード下端ハミ出(中央) */

/* ② 白文字: ボタン外側 LEFT-TOP に沿うように (toggle 左上隅に寄せる) */
.hiyari-toggle__hot-flash--white-tl {
  /* 白い手書き「ほっと」文字バーストだけトルツメ。
     赤い「ほっと」(red-tr/bl/br) は残す。 */
  display: none;
  width: 13%;
  top: -20%; /* toggle 上端のすぐ外 */
  left: -4%; /* toggle 左端のすぐ外 */
  --rot: -10deg;
}
/* ④ 白文字: ボタン外側 RIGHT-BOTTOM に沿うように (toggle 右下隅に寄せる) */
.hiyari-toggle__hot-flash--white-br {
  /* 白い手書き「ほっと」文字バーストだけトルツメ。 */
  display: none;
  width: 13%;
  bottom: -20%; /* toggle 下端のすぐ外 */
  right: -4%; /* toggle 右端のすぐ外 */
  --rot: 10deg;
}
/* ① 赤(中) カード上端の中央やや右に大きくハミ出 (参考画像で右上寄り) */
.hiyari-toggle__hot-flash--red-tr {
  width: 26%;
  top: -110%;
  right: 4%;
  --rot: 8deg;
}
/* ③ 赤(大) カード左下から少し上にずらしてカード赤エリアにかぶさる */
.hiyari-toggle__hot-flash--red-bl {
  width: 42%;
  bottom: -50%; /* -100% → -50% で UP (上にかぶさる) */
  left: -10%;
  --rot: -8deg;
}
/* ⑤ 赤(中) 右下エリア外に届きつつ、上半身が赤エリアにかぶさる位置 */
.hiyari-toggle__hot-flash--red-br {
  width: 28%;
  bottom: -65%; /* -120% → -65% で UP (上にかぶさる) */
  right: -8%; /* left → right で 右下に配置 / 8% エリア外にハミ出 */
  left: auto;
  --rot: 6deg;
}

.hiyari-toggle.is-hot-flash .hiyari-toggle__hot-flash {
  animation: hotFlashBurst 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 順次出現の時間差: 白→赤の順にカスケード */
.hiyari-toggle.is-hot-flash .hiyari-toggle__hot-flash--white-br {
  animation-delay: 100ms;
}
.hiyari-toggle.is-hot-flash .hiyari-toggle__hot-flash--red-tr {
  animation-delay: 200ms;
}
.hiyari-toggle.is-hot-flash .hiyari-toggle__hot-flash--red-bl {
  animation-delay: 320ms;
}
.hiyari-toggle.is-hot-flash .hiyari-toggle__hot-flash--red-br {
  animation-delay: 420ms;
}

@keyframes hotFlashBurst {
  0% {
    opacity: 0;
    transform: rotate(var(--rot)) scale(0.4);
  }
  22% {
    opacity: 1;
    transform: rotate(var(--rot)) scale(1.1);
  }
  55% {
    opacity: 1;
    transform: rotate(var(--rot)) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--rot)) scale(0.96) translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hiyari-toggle.is-hot-flash .hiyari-toggle__hot-flash {
    animation: none;
  }
}

/* 白 pill: top に固定、bottom は auto で content (number + 縦書き text) に
   合わせて可変高さ。文字数が増えれば pill が下に伸びる */
.case-card__side {
  position: absolute;
  /* v2: 位置・サイズすべて cqw 連動 */
  right: clamp(12px, 2cqw, 22px);
  top: clamp(12px, 2cqw, 22px);
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.7cqw, 16px); /* 文字拡大に合わせ余白も拡縮 */
  /* + v2: side = badge + 2*padding を保ったまま cqw でスケール。
     side: 44-70 (8cqw) / padding: 5-8 (1cqw) / badge: 34-54 (6cqw)
     式: 8cqw - 2*1cqw = 6cqw → 任意 cqw で badge と side - 2*padding が一致 */
  width: clamp(44px, 8cqw, 70px);
  padding: clamp(6px, 1.1cqw, 9px) clamp(6px, 1.1cqw, 9px) clamp(16px, 2.8cqw, 28px);
  border-radius: 68px;
  background: #fff;
  color: var(--deep-blue);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

.case-card__side b {
  display: grid;
  place-items: center;
  /* v2: badge も cqw 連動 (6cqw で side/padding と数学的に整合) */
  width: clamp(34px, 6cqw, 54px);
  min-height: clamp(34px, 6cqw, 54px);
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  /* カードの数字フォントを Rubik へ / : fw 700 */
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  /* 番号を PC18-19 / 上限24px に拡大 */
  font-size: clamp(16px, 2.7cqw, 24px);
}

.case-card--hot .case-card__side,
.case-card.is-hot .case-card__side {
  color: var(--red);
}

.case-card--hot .case-card__side b,
.case-card.is-hot .case-card__side b {
  background: var(--red);
}

.case-card__side span {
  writing-mode: vertical-rl;
  /* v2: 縦書きフォントも cqw 連動。
     最小 16 / 最大 26 で、カード幅成長に合わせて読みやすさが保たれる。 */
  /* 縦書きタイトルを PC20-21 / 上限25px に */
  font-size: clamp(18px, 3.1cqw, 25px);
  line-height: 1.1;
  /* 縦書きの「行間」= letter-spacing として効く。cqw で微弱可変。 */
  letter-spacing: clamp(1px, 0.3cqw, 2.5px);
  /* 縦書きの 「、」「。」 を文字中央寄せに (proportional alt metrics) */
  font-feature-settings: "palt" 1, "pwid" 1, "vpal" 1;
}

/* v2: タイトル(ひやり↔ほっと)はサイドバッジ(縦書き)で入れ替わる。
   本文(左)には入れない。cold=ひやりタイトル / hot=ほっとタイトル を表示切替。 */
.case-card__side-text--on {
  display: none;
}
.case-card.is-hot .case-card__side-text--off,
.case-card--hot .case-card__side-text--off {
  display: none;
}
.case-card.is-hot .case-card__side-text--on,
.case-card--hot .case-card__side-text--on {
  display: block;
}

.case-card__mood {
  /* ユーザー要望: ヒヤリ演出 (この "ひやり" Darumadrop ラベル) は撤去 */
  display: none;
  position: absolute;
  left: 32px;
  bottom: 30px;
  color: rgba(255, 255, 255, 0.72);
  font-family: "Darumadrop One", sans-serif;
  font-size: 24px;
  transform: rotate(-15deg);
}


/* === concat: src/styles/product.css === */
.product {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  /* 左半分は赤→ピンクの統一グラデ (visual と左塗りエリアを継ぎ目なく)、右半分は白。
     visual 自身は透過 (グラデなし) で .product グラデを透けさせるので継ぎ目ゼロ */
  background:
    linear-gradient(180deg, #ed5757 0%, #ffc4b5 100%) left top / 50% 100% no-repeat,
    #fff;
  /* v2: 下側に残ってた黒ラインを撤去 (border-bottom 4px solid #000 → なし) */
}

/* === 街並み: viewport 端〜端のフルブリードで product visual の底に重ねる ===
   .product__visual--lock/--remote の bg から外して、ここで描画 */
/* .product::after の全幅街並みは廃止 — city は .product__visual--*
   の bg として赤パネル内に配置するため (Figma 仕様: 赤パネル内底のみ) */

/* === 吹き出し散らばりセクション (Figma 2056:5484 "テキストスクロール") ===
   3行の marquee。1行目=左、2行目=右、3行目=左 にゆっくり無限スクロール */
/* 「ユーザーの声」セクション: 背景は持たず、グローバル page-backdrop が viewport に
   fixed で貼り付いてるのでそれが透けて見える。bubble の marquee だけ重ねる */
.bubble-scatter {
  position: relative;
  width: 100%;
  padding: 60px 0 60px;
  overflow: hidden;
}

.bubble-scatter__rows {
  position: relative;
  z-index: 2;
  /* bubble の L/R フェード */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.bubble-scatter__row {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
}

.bubble-scatter__row:last-child {
  margin-bottom: 0;
}

/* track: 同じ items を 2 セット並べて translateX(-50%) ↔ 0% でループ */
.bubble-scatter__track {
  display: flex;
  gap: 40px;
  align-items: center;
  width: max-content;
  flex-shrink: 0;
  will-change: transform;
}

.bubble-scatter__row[data-marquee-dir="left"] .bubble-scatter__track {
  animation: bubbleMarqueeLeft 60s linear infinite;
}

.bubble-scatter__row[data-marquee-dir="right"] .bubble-scatter__track {
  animation: bubbleMarqueeRight 60s linear infinite;
}

@keyframes bubbleMarqueeLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes bubbleMarqueeRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubble-scatter__track {
    animation: none !important;
  }
}

.bubble-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.bubble-item__face {
  width: 68px;
  height: 68px;
  /* 縁/輪郭はなし。透明背景でピン貼り付け風に見せるため fallback グレー も撤去 */
  background: transparent;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  /* .face-crop の border-radius:50% (円形クロップ) を解除。
     円で切り抜くと正方画像の隅にある顎・👍 が切れる (見切れ) ため、
     吹き出し帯の顔は正方 (ピン貼り付け風) のまま全身を表示する。 */
  border-radius: 0;
}

.bubble-item__text {
  padding: 12px 24px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.9px;
  line-height: 1.4;
  white-space: nowrap;
  font-feature-settings: "palt" 1;
}

/* face 左 → 角丸: 右上+右下+左上 (左下なし) ⇒ left-pointing tail */
.bubble-item--face-left .bubble-item__text {
  border-radius: 20px 20px 20px 0;
}

/* スタンドアロン装飾アイテム: 吹き出しなし、顔/装飾画像だけ表示。
   bubble の間に挟むことで顔同士の隣接を回避 */
.bubble-item--decor {
  gap: 0;
}

/* face 右 → 角丸: 左上+右上+左下 (右下なし) ⇒ right-pointing tail */
.bubble-item--face-right .bubble-item__text {
  border-radius: 20px 20px 0 20px;
}

/* スタイル: Figma 直 - blue-bg / red-bg / white-blue / white-red */
.bubble-item__text--blue-bg {
  background: #2f9cd8;
  color: #fff;
}
.bubble-item__text--red-bg {
  background: #e03a3a;
  color: #fff;
}
.bubble-item__text--white-blue {
  background: #fff;
  color: #2f9cd8;
}
.bubble-item__text--white-red {
  background: #fff;
  color: #e03b3b;
}

/* 個別顔画像（合成画像から連結成分解析でクリーン切り出し） */
.face-crop--grandma {
  background-image: url("/cdn/shop/files/bubble-grandma-cold.webp");
  background-size: cover;
  background-position: center;
}
.face-crop--grandpa {
  background-image: url("/cdn/shop/files/bubble-grandpa-cold.webp");
  background-size: cover;
  background-position: center;
}
.face-crop--middle-man {
  background-image: url("/cdn/shop/files/bubble-middle-man-cold.webp");
  background-size: cover;
  background-position: center;
}
.face-crop--middle-woman {
  background-image: url("/cdn/shop/files/bubble-middle-woman-cold.webp");
  background-size: cover;
  background-position: center;
}
.face-crop--young-man {
  background-image: url("/cdn/shop/files/bubble-young-man-cold.webp");
  background-size: cover;
  background-position: center;
}
.face-crop--young-woman {
  background-image: url("/cdn/shop/files/bubble-young-woman-cold.webp");
  background-size: cover;
  background-position: center;
}
.face-crop--kid {
  background-image: url("/cdn/shop/files/bubble-kid-cold.webp");
  background-size: cover;
  background-position: center;
}

/* 装飾付き variant (Frame 1197 / Group 1252-1254 / Group 1250)。
   horizontal aspect が大きいため width を変えて contain で全体表示 */
.face-crop--w-hand-left {
  background-image: url("/cdn/shop/files/bubble-young-woman-hand-left.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 88px; /* 68 × 260/204 */
  border-radius: 0;
}
.face-crop--w-cloud {
  background-image: url("/cdn/shop/files/bubble-middle-woman-cloud.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100px; /* 68 × 300/204 */
  border-radius: 0;
}
.face-crop--w-hand-right {
  background-image: url("/cdn/shop/files/bubble-young-woman-hand-right.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 88px;
  border-radius: 0;
}
.face-crop--w-hand-big {
  background-image: url("/cdn/shop/files/bubble-young-woman-hand-big.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 114px; /* 68 × 342/204 */
  border-radius: 0;
}
.face-crop--hotto-text {
  background-image: url("/cdn/shop/files/bubble-hotto-hotto-text.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 252px;
  height: 75px;
  border-radius: 0;
}

/* 新素材 (家族A/B + tip-XXX) を追加。
   既存 (grandma/grandpa/middle/young/kid 系) は併存させ、新ティッカー側で
   .face-crop--family-X-XXX, .face-crop--tip-XXX を使う。 */
.face-crop--family-a-mother      { background-image: url("/cdn/shop/files/bubble-family-a-mother.webp"); }
.face-crop--family-a-mother-good { background-image: url("/cdn/shop/files/bubble-family-a-mother-good.webp"); }
.face-crop--family-a-father      { background-image: url("/cdn/shop/files/bubble-family-a-father.webp"); }
.face-crop--family-a-father-good { background-image: url("/cdn/shop/files/bubble-family-a-father-good.webp"); }
.face-crop--family-a-son         { background-image: url("/cdn/shop/files/bubble-family-a-son.webp"); }
.face-crop--family-b-mother      { background-image: url("/cdn/shop/files/bubble-family-b-mother.webp"); }
.face-crop--family-b-mother-good { background-image: url("/cdn/shop/files/bubble-family-b-mother-good.webp"); }
.face-crop--family-b-father      { background-image: url("/cdn/shop/files/bubble-family-b-father.webp"); }
.face-crop--family-b-father-good { background-image: url("/cdn/shop/files/bubble-family-b-father-good.webp"); }
.face-crop--family-b-daughter    { background-image: url("/cdn/shop/files/bubble-family-b-daughter.webp"); }

/* tip = 吹き出し間に挟む装飾。
   元画像はすべて高さ 170px で統一、横幅だけ違う。
     縦を他 face と揃えて、横はアスペクト比で自動算出。
   → background-size: auto 100% で高さを親に揃え、aspect-ratio で width 自動。 */
.face-crop--tip-hotto,
.face-crop--tip-key,
.face-crop--tip-flower-1,
.face-crop--tip-flower-2,
.face-crop--tip-light,
.face-crop--tip-tv,
.face-crop--tip-aircon {
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
  /* width は固定せず aspect-ratio で算出。height は親 .bubble-item__face 継承 (74px) */
  width: auto;
}
/* 各 tip のアスペクト比 (横/縦) を指定 → 親 height に対して width 自動算出 */
.face-crop--tip-hotto    { aspect-ratio: 330 / 170; }
.face-crop--tip-key      { aspect-ratio: 170 / 170; }
.face-crop--tip-flower-1 { aspect-ratio: 120 / 170; }
.face-crop--tip-flower-2 { aspect-ratio: 120 / 170; }
.face-crop--tip-light    { aspect-ratio: 170 / 170; }
.face-crop--tip-tv       { aspect-ratio: 195 / 170; }
.face-crop--tip-aircon   { aspect-ratio: 223 / 170; }
.face-crop--tip-hotto    { background-image: url("/cdn/shop/files/bubble-tip-hotto.webp"); }
.face-crop--tip-key      { background-image: url("/cdn/shop/files/bubble-tip-key.webp"); }
.face-crop--tip-flower-1 { background-image: url("/cdn/shop/files/bubble-tip-flower-1.webp"); }
.face-crop--tip-flower-2 { background-image: url("/cdn/shop/files/bubble-tip-flower-2.webp"); }
.face-crop--tip-light    { background-image: url("/cdn/shop/files/bubble-tip-light.webp"); }
.face-crop--tip-tv       { background-image: url("/cdn/shop/files/bubble-tip-tv.webp"); }
.face-crop--tip-aircon   { background-image: url("/cdn/shop/files/bubble-tip-aircon.webp"); }

/* hot モード用の赤寄り切り出し（バブルが赤系の時用） */
.face-crop--hot.face-crop--grandma {
  background-image: url("/cdn/shop/files/bubble-grandma-hot.webp");
}
.face-crop--hot.face-crop--grandpa {
  background-image: url("/cdn/shop/files/bubble-grandpa-hot.webp");
}
.face-crop--hot.face-crop--middle-man {
  background-image: url("/cdn/shop/files/bubble-middle-man-hot.webp");
}
.face-crop--hot.face-crop--middle-woman {
  background-image: url("/cdn/shop/files/bubble-middle-woman-hot.webp");
}
.face-crop--hot.face-crop--young-man {
  background-image: url("/cdn/shop/files/bubble-young-man-hot.webp");
}
.face-crop--hot.face-crop--young-woman {
  background-image: url("/cdn/shop/files/bubble-young-woman-hot.webp");
}
.face-crop--hot.face-crop--kid {
  background-image: url("/cdn/shop/files/bubble-kid-hot.webp");
}

@media (max-width: 720px) {
  .bubble-item__text {
    font-size: 14px;
    padding: 8px 14px;
  }
  .bubble-item__face {
    width: 48px;
    height: 48px;
  }
  .bubble-scatter__row {
    gap: 20px;
    margin-bottom: 8px;
  }
}

.product__visual {
  position: relative;
  min-height: 0;
  overflow: hidden;
  line-height: 0;
}

.product__visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* === SMART LOCK / SMART HUB 製品ビジュアル: Figma 直のレイヤー合成 ===
   pink/red gradient bg + 街並み + 回転リング + 白円 + 商品 + face badge + ほっと散らし。
   - aspect-ratio: 1 で正方形 (中心 = 白円の中心 が常に揃う)
   - max-width で正方形の上限を抑え、ワイド viewport では cell 内で右寄せ
     (= visual の左に red gradient の余白が生まれる → "左にも赤背景" を実現)
   - copy 列が visual より高い時も .product 自体の左半分赤グラデが空白を埋める */
.product__visual--lock,
.product__visual--remote {
  /* 明示的に row1 col1 に配置 (.product__city と同セルで stack) */
  grid-row: 1;
  grid-column: 1;
  /* 赤背景ビジュアル(円+商品が出るエリア)の「高さをもう少し」付ける。
     幅は max-width で従来どおり、aspect-ratio を 1:1 → 1:1.2 に縦長化。
     内側の ring/円/商品は top:50% 中央寄せなので、円の上下に赤の余白が増える。
     ※高さの微調整はこの 1.2 を変えるだけ。 */
  aspect-ratio: 1 / 1.2;
  align-self: start;
  /* (デザイン実寸 上180:下210) 白円+商品を真ん中→わずかに
     上寄せして下の余白を増やす。中央寄せレイヤー(ring/circle/lock/hub2)が参照する
     垂直中心。50% → 48.3% で margin 比率 ≒ 180:210。 */
  --prod-cy: 48.3%;
  /* モニター幅で右に寄らないようセンター配置。
     画面幅で拡大縮小するよう max-width を流体化 */
  justify-self: center;
  width: 100%;
  /* 画像エリアの最大サイズ 760 → 810px */
  max-width: clamp(420px, 44vw, 810px);
  /* グラデは .product 側に集約。街並みは別レイヤ .product__city に切り出して
     viewport 左端まで延ばすので、visual 自体は完全透過 */
  background: transparent;
  /* z-index 1 で .product__city より手前 (透過部分は city が透ける) */
  z-index: 1;
}

/* 街並みストリップ: grid row 1 col 1 で visual と同じセルに同居、
   align-self: end で row1 底に張り付き、cell 幅 (= 50vw) いっぱいに広がる
   → ワイドな viewport で visual の左に gap がある時も街並みが viewport edge まで連続。
   image height を 12vw 以上にすることで tile width > 50vw になり seam が画面外に出る */
.product__city {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  width: 100%;
  height: clamp(120px, 12vw, 240px);
  /* 商品紹介・購入周り 3D背景 item-back-img に差替 */
  /* 街並み中央の学校をセンターに配置 (left→center bottom)
      v2 建物が大きいので高さを約1/2に縮小 (auto 100%→50%)。
     center で学校(画像中央)が真ん中に来る。 */
  background: url("/cdn/shop/files/product-skyline.webp") repeat-x center bottom / auto 50%;
  pointer-events: none;
  z-index: 0;
}

.product__visual--lock > img,
.product__visual--remote > img {
  position: absolute;
  pointer-events: none;
}

/* リング (SECURITY / AUTOMATION) 白円の外側を回るテキストリング。
   全体スケールダウンで 95 → 82% (text 帯は circle 65% との 17% 差で確保) */
.product__visual-ring {
  top: var(--prod-cy, 50%);
  left: 50%;
  width: 82%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  animation: ringSpin 56s linear infinite;
  z-index: 1;
}

@keyframes ringSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product__visual-ring {
    animation: none;
  }
}

/* 白円 (Ellipse 34) 中央の被写体ステージ。全体スケールダウンで 75 → 65% */
.product__visual-circle {
  top: var(--prod-cy, 50%);
  left: 50%;
  width: 65%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* 機器位置をデザインと合わせる + シャドウ追加。
   新素材 product-lock-ultra.webp (1000x1000) = Lock本体+Keypad+シャドウ込みの単一画像。
   白円の中央に配置。Keypad は新素材に統合済みなので非表示。
   「1.2倍」: 50% → 60% */
.product__visual-lock {
  top: var(--prod-cy, 50%);
  left: 50%;
  width: 60%;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.product__visual-keypad {
  display: none;
}

/* Hub2 (SMART HUB) 全体スケールダウンで 58 → 50% (円 65% に対して ~77% を維持) */
.product__visual-hub2 {
  top: var(--prod-cy, 50%);
  left: 50%;
  /* もう少し大きく (50 → 58%) */
  width: 58%;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* 顔バッジ: visual の左下に固定。全体スケールダウンで 28 → 24% */
.product__visual-face {
  position: absolute;
  left: 8%;
  /* 円を上に寄せた分、顔バッジも追従 (16→18%) */
  bottom: 18%;
  width: 24%;
  height: auto;
  z-index: 5;
}

/* ほっとキャラを 2フレーム カタカタ。
   --a と --b を同一位置に重ね、cfaceFlipA/B で排他切替。
   位置は旧 product__visual-face のあった左下バッジ位置に集約 */
.product__visual-hotto--a,
.product__visual-hotto--b {
  /* 元の丸顔バッジ位置に復元 (左下・24%)。2フレームでカタカタ。 */
  width: 24%;
  height: auto;
  left: 8%;
  /* 円を上に寄せた分、ほっと顔も追従 (16→18%) */
  bottom: 18%;
  z-index: 5;
}
.product__visual-hotto--a {
  animation: cfaceFlipA 7000ms steps(1, end) infinite;
}
.product__visual-hotto--b {
  opacity: 0;
  animation: cfaceFlipB 7000ms steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .product__visual-hotto--a,
  .product__visual-hotto--b {
    animation: none;
  }
  .product__visual-hotto--b {
    opacity: 0;
  }
}

/* ほっとのあしらい。定期的に「左がふわっと出て消える → 右がふわっと出て消える」
   を順番に繰り返す。ふわっと感は opacity + 微小な浮き上がり(translateY)+scale で表現。 */
@keyframes hottoDecoFloat {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
  }
  10% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  35% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  48% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}
.product__hotto-deco {
  /* 商品紹介visual左上/右下の「ほっと」あしらい
     (.product__hotto-deco--left / --right) を最終素材バランス調整のためトルツメ。
     markup は残しつつ display:none で非表示。アニメーションも停止。 */
  display: none;
  width: 22%;
  height: auto;
  opacity: 0;
  z-index: 1;
  animation: hottoDecoFloat 6s ease-in-out infinite;
}
.product__hotto-deco--left {
  /* 左上コーナー (白円の外側・赤背景上) 先に出る */
  top: 4%;
  left: 1%;
  animation-delay: 0s;
}
.product__hotto-deco--right {
  /* 右下 (旧キャラがいた位置) に配置。左の後に出る (周期の半分ずらし) */
  bottom: 5%;
  right: 3%;
  width: 20%;
  animation-delay: 3s;
}
@media (prefers-reduced-motion: reduce) {
  .product__hotto-deco {
    animation: none;
    opacity: 0.9;
    transform: none;
  }
}

.product__copy {
  /* 左右パディングも画面幅で拡縮 (上限 80→96)。これで英字タイトルが
     コンテンツ幅(=点線幅)にぴったり収まる関係が広い画面でも保たれる。 */
  padding: clamp(56px, 7vw, 96px) clamp(32px, 5vw, 96px);
  /* 中央寄せ → 上揃え。本文が短い時は下側が空くイメージ。 */
  align-self: start;
  min-width: 0;
}

.product__label,
.product h2 {
  margin: 0;
  color: var(--red);
  font-family: "Climate Crisis", sans-serif;
  font-weight: 400;
  line-height: 1.05;
}

.product__label {
  display: none;
}

.product h2 {
  /* SMART LOCK / SMART HUB を「青赤点線の幅ギリギリ」に収める。
     旧 4.6vw だと中間幅でコンテンツ幅(=点線幅)を超えてはみ出していた。
     コンテンツ幅 ≒ 40vw (50vw 列 − 左右 5vw padding) に対し、SMART LOCK は
     約 11.1em 幅なので 40vw / 11.1 ≒ 3.6vw でちょうど点線幅に収まる。上限 84px。 */
  /* HUB→REMOTE 変更に伴い中間フォントを 3.6→3.4vw に */
  font-size: clamp(34px, 3.4vw, 84px);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.product__subtitle {
  margin: 8px 0 22px;
  color: var(--red);
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(18px, 1.5vw, 24px);
  /* 日本語タイトル fw 900 → 700 */
  font-weight: 700;
}

/* 区切り線: Figma "Group 1194" 赤青角丸ドット ライン。画面サイズで横幅可変 (repeat-x) */
.product__rule {
  width: 100%;
  height: 10px;
  /* 余白も画面幅で拡縮。点線→本文の白い余白を広げる。 */
  margin-bottom: clamp(28px, 4vw, 52px);
  /* 点線かぶり修正: 元画像(product-dot-line-rb.webp)を repeat-x すると継ぎ目で
     点が重なっていた。同様に継ぎ目なしタイル + repeat:round で整数個ぴったり
     並べ、点の重なり・隙間をゼロにする。 */
  background-image: url("/cdn/shop/files/product-dot-line-rb-tile.webp");
  background-repeat: round;
  background-position: center;
  background-size: auto 100%;
}

.product__body {
  margin: 0;
  /* フォントをステートメントと同じ Zen Maru Gothic に統一。
       ウェイト 500 / 中間サイズ 1.2vw → 1.1vw / line-height 1.85 → 2.0
     本文を画面幅で可変・上限 22px は維持 */
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.1vw, 22px);
  line-height: 2;
}

/* 文節単位の改行禁止ラッパー。
   `<span class="np">` を inline-block にすることで「単語」として扱い、
   句中の不自然な分割 (例: 施錠＆解錠ができ／るスマートロック) を防止。
   line-height は親 (.product__body) の値を継承 (2.0)、
   font-family/weight/size などの装飾もデフォルト inherit。
   ※ SP は で display:inline に戻して
   Japanese テキストの自然折り返しを許可する (下の @media max-width:768px 参照)。 */
.product__body .np {
  display: inline-block;
  /* vertical-align で baseline ずれを揃える (Safari 含む全ブラウザ共通) */
  vertical-align: baseline;
}

/* SP のみ「おうちにも！\nと思ったら」改行用 <br>。
   PC は非表示、SP @media max-width:768px で inline に切り替え。 */
.sp-only-break {
  display: none;
}

.product__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* タグ上の余白も画面幅で拡縮 */
  margin-top: clamp(28px, 3.4vw, 48px);
}

.product__tags span {
  /* v2: pill をもっとギュッと (左右 24 → 14px / 上下 8 → 6px)。
     左右余白を 14 → 20px に拡げて、文字に少しゆとりを。
      v2: 丸と文字の間も少し詰める / : gap 6 → 8px。 */
  padding: 6px 20px;
  border: 1px solid var(--red);
  border-radius: 50px;
  color: var(--red);
  font-family: "Zen Maru Gothic", sans-serif;
  /* Zen Maru Gothic 移行に合わせて font-size / font-weight を再調整。 */
  font-size: clamp(12px, 0.9vw, 20px);
  font-weight: 500;
  /* テキスト前に赤い丸 (デザイン合わせ) */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* タグ先頭の赤い丸 (v2: 7 → 9px に拡大 / : 9 → 6px に詰める) */
.product__tags span::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.buy-area {
  grid-column: 1 / -1;
  position: relative;
  padding: 28px 70px 40px;
  /* 背景上下の黒いラインは撤去 */
  /* Figma: 購入はこちらエリアは赤背景 */
  background: var(--red);
  z-index: 2; /* .product::after の街並みより手前に */
}

/* .buy-area の左右をフルブリードで赤くする (左右の白領域に被せる) */
.buy-area::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--red);
  /* 黒いライン撤去 */
  z-index: -1;
}

.buy-area > * {
  position: relative;
  z-index: 1;
}

/* "購入はこちら" の見出しを白文字に (赤背景上) */
.buy-area > p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 20px;
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 28px;
  /* 購入はこちら見出し fw 900→700 */
  font-weight: 700;
}

.buy-area > p img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.buy-area > p .face-crop {
  width: 60px;
  height: 60px;
}

.buy-area > p .face-crop--hot,
.buy-area > p .face-crop--child {
  background-size: cover;
  background-position: center;
  /* 2フレーム カタカタを ::before/::after で実装。本体の bg は廃止 */
  position: relative;
  background-image: none;
}

.buy-area > p .face-crop--child::before,
.buy-area > p .face-crop--child::after,
.buy-area > p .face-crop--hot::before,
.buy-area > p .face-crop--hot::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* 購入はこちら 子供キャラ — sec02-cta-title-1-1/-2 を排他切替 */
.buy-area > p .face-crop--child::before {
  background-image: url("/cdn/shop/files/sec02-cta-title-1-1-v2.webp");
  animation: cfaceFlipA 7000ms steps(1, end) infinite;
}
.buy-area > p .face-crop--child::after {
  background-image: url("/cdn/shop/files/sec02-cta-title-1-2-v2.webp");
  animation: cfaceFlipB 7000ms steps(1, end) infinite;
  opacity: 0;
}

/* 購入はこちら 大人キャラ — sec02-cta-title-2-1/-2 を排他切替。
   カタカタのタイミングがバラバラ(子供と350msズレ)で鬱陶しいため、
   animation-delay を撤去して子供キャラと同位相に揃える。 */
.buy-area > p .face-crop--hot::before {
  background-image: url("/cdn/shop/files/sec02-cta-title-2-1-v2.webp");
  animation: cfaceFlipA 7000ms steps(1, end) infinite;
}
.buy-area > p .face-crop--hot::after {
  background-image: url("/cdn/shop/files/sec02-cta-title-2-2-v2.webp");
  animation: cfaceFlipB 7000ms steps(1, end) infinite;
  opacity: 0;
}

.buy-area__buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* === buy-button: Figma node 2112:10210 「ボタンエリア」完全準拠 ===
   - 4 ボタン flex で等分 (Figma 1fr 1fr 1fr 1fr 相当)
   - 共通: bg-black/text-white, rounded-[114px], min-height 84
   - OFFICIAL (--sale) badge 黄 (セール開催中) + Official + 公式ストアで購入 ↗
   - AMAZON / RAKUTEN: 中央寄せ, 外部リンク ↗
   - CAMPAIGN (--coupon) bg-white, 黒文字, badge 青(キャンペーン中) + arrow-down ↓ */
.buy-button {
  position: relative;
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 0;
  min-height: 84px;
  padding: 12px 32px;
  border-radius: 114px;
  background: #000;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

/* badge 付き (OFFICIAL / CAMPAIGN) badge は absolute で左に固定し、
   テキスト本体はボタン中央寄せに統一 */
.buy-button--sale,
.buy-button--coupon {
  justify-content: center;
  padding-left: 76px;
  padding-right: 32px;
}
.buy-button--sale .buy-button__badge,
.buy-button--coupon .buy-button__badge {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* CAMPAIGN は白背景、黒文字 */
.buy-button--coupon {
  background: #fff;
  color: #050505;
  gap: 12px;
}

.buy-button__badge {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ffb032;
  color: var(--red);
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 11px;
  /* バッジ日本語 fw 900→700 */
  font-weight: 700;
  line-height: 1.1;
}

/* CAMPAIGN の badge は青系 (#32dee7) + 黒文字 */
.buy-button--coupon .buy-button__badge {
  background: #32dee7;
  color: #050505;
}

.buy-button__text {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.buy-button strong {
  font-family: "Climate Crisis", sans-serif;
  /* v2: 上限 22→24px に拡大 (モニター時の追加コメント反映)。
     1280px 前後で約 22px (PC ちょうど) / 1500+ で 24px max (モニター)。 */
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 1.2;
}

/* CAMPAIGN 遷移ボタンの文字は新フォント (正しいC/G) の SVG に差し替え。
   高さを他ボタンのテキスト (font-size 相当) に合わせて表示。 */
.buy-button__campaign-text {
  display: inline-flex;
  align-items: center;
}
.buy-button__campaign-text img {
  display: block;
  height: clamp(18px, 1.5vw, 22px);
  width: auto;
}

.buy-button small {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 12px;
  /* ボタンタイトル日本語 fw 900→700 (3ボタン共通) */
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* 外部リンクアイコン: 文字横にインライン表示 */
.buy-button__icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}


/* === concat: src/styles/movie.css === */
.movie {
  position: relative;
  min-height: 755px;
  /* Figma: top 100, bottom ≒ 120 (cards END at 683 / section 803 → 120 余白) */
  padding: 100px 0 140px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  /* scene-bg が赤系に変わったため、左右の余白色も赤に統一 (旧 #0088ce → 赤) */
  background: var(--red, #e03a3a);
}

.movie::before,
.movie::after {
  content: "";
  position: absolute;
  inset: 0;
}

.movie::before {
  /* 旧 width:1564px 固定中央寄せ → ワイドモニターで端が見える、
     かつ height:897px 下端アンカーだと背の高いセクションで上部に赤帯が残る。
     inset:0 でセクション全体(上下左右フル)に敷き、cover でディスプレイサイズに拡縮。
     構図は center bottom アンカー維持 (シーンは下に、上はトリミング)。 */
  inset: 0;
  background: url("/cdn/shop/files/movie-scene-bg.webp") center bottom / cover no-repeat;
}

.movie::after {
  /* フィルターを #000 50% に (旧 0.2)。本番CM動画で再調整余地あり */
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.movie__heading,
.movie__frames {
  position: relative;
  z-index: 1;
  /* 動画サムネイルエリア全体を画面幅の75%で拡縮(最大は他コンテンツと統一)。
      の未来画像と同じ方針。サムネは下の grid 1fr + aspect-ratio で連動拡縮。 */
  width: 75vw;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

.movie h2 {
  margin: 0;
  font-family: "Climate Crisis", sans-serif;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1;
  letter-spacing: 4.4px;
  font-variation-settings: "YEAR" 1979;
}

/* MOVIE / GALLERY を Figma 通り 2 行 (cap height ≒ 68 × 2) */
.movie h2 span {
  display: block;
}

/* 作字 SVG (G 込み・白) に差し替え。542x160 (2行) のアスペクト維持 */
.movie__title-svg {
  display: block;
  /* MOVIE GALLERY (2行) の各行キャップ高さを FUTURE (~64px) に揃える。
     ソース 542px幅で各行 caps=65px → caps 64px に表示するには幅 ~540px。 */
  width: clamp(360px, 42vw, 540px);
  height: auto;
  margin-inline: auto;
}

.movie__heading p {
  margin: 2px 0 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 24px;
  /* 日本語タイトル fw 900 → 700 */
  font-weight: 700;
  letter-spacing: 1.2px;
}

.movie__frames {
  display: grid;
  /* 固定 500px → 1fr にして 75vw 内でサムネが拡縮するように */
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  gap: clamp(20px, 2.8vw, 40px);
  /* Figma: heading 186 + 80 gap → cards start。2行タイトルになったので gap だけで構成 */
  margin-top: 80px;
}

.movie__thumb {
  max-width: 100%;
}

.movie__card {
  display: grid;
  gap: 15px;
  text-align: left;
  /* hover でカード全体を軽く持ち上げる */
  transition: transform 320ms var(--spring);
}

.movie__card:hover {
  transform: translateY(-6px);
}

.movie__thumb {
  position: relative;
  display: block;
  /* 固定 500x280 → カラム幅にフィットさせ縦横比 500:280 を維持して拡縮 */
  width: 100%;
  height: auto;
  aspect-ratio: 500 / 280;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  /* hover でドロップシャドウを付けて浮き上がりを強調 */
  transition: box-shadow 320ms ease;
}

.movie__card:hover .movie__thumb {
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
}

.movie__thumb > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 暗化は下の ::after (#000 ~12%) に一本化 (旧 brightness(0.85) 撤去) */
  filter: brightness(1);
  /* hover時の変化を強める → 明度に加えて軽くズーム */
  transition: filter 280ms ease, transform 320ms ease;
}

/* サムネに薄暗いフィルター (#000 ~12%) を重ね、
   再生ボタンを視認しやすく。hover で消えて「ライトアップ」する。 */
.movie__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
  transition: opacity 280ms ease;
}
.movie__card:hover .movie__thumb::after {
  opacity: 0;
}

.movie__card:hover .movie__thumb > img:first-child {
  filter: brightness(1.05);
  transform: scale(1.06);
}

/* 再生ボタンを hover で拡大＋やわらかい発光で反応を強調 */
.movie__play {
  transition:
    transform 280ms var(--spring),
    background 280ms ease,
    box-shadow 280ms ease;
}

.movie__card:hover .movie__play {
  /* 中央維持したまま拡大 (translate を保持) */
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 8px 24px rgba(224, 58, 58, 0.55);
}

.movie__thumb > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.movie__play {
  position: absolute;
  /* 旧: 固定 216/106px (500x280 前提) → レスポンシブで中央からズレていた。
     常にサムネ中央に来るよう % + translate に修正。 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  z-index: 2; /* ::after の薄暗フィルター(z-index:1)より前面に */
}

.movie__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid #fff;
}

.movie__card b {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.8px;
}


/* === concat: src/styles/campaign.css === */
/* ============================================================
 * CAMPAIGN セクション (Figma 2154:9206) — 1400 × 2919
 * 左青/右赤の対角分割パネル + 紙吹雪 + 4 つの白パネルブロック
 * ============================================================ */
.campaign {
  position: relative;
  isolation: isolate;
  width: 100%;
  /* Figma: 2919px だが、コンテンツに合わせて auto で吸わせる
     (空白が出すぎるとブランディング上寂しいため) */
  min-height: auto;
  /* overflow: hidden は子要素 sticky を破壊するため clip に変更
     (clip は scroll container を作らない → sticky が viewport 基準で機能) */
  overflow: clip;
  background: #fff;
}

/* 背景: 左青 / 右赤 の 50:50 分割 (linear-gradient 50%-50% は一部レンダラで
   全面同色化するケースが報告されたため、2 つの絶対配置 div で確実に分割) */
.campaign__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
}

.campaign__bg::before,
.campaign__bg::after {
  content: "";
  flex: 1 1 50%;
  height: 100%;
}

.campaign__bg::before {
  background: #27a2e5; /* 旧 #2787e5 から変更 */
}
.campaign__bg::after {
  background: #e03a3a;
}

/* 紙吹雪 (Figma: 全パネルに散らされた小さな紙吹雪スタンプ) — 顔の背面に配置 */
.campaign__confetti {
  position: absolute;
  z-index: 1; /* 文字あしらい(0) より上、顔(2) より下 */
  pointer-events: none;
  height: auto;
}

.campaign__confetti--left {
  left: 0;
  top: 130px;
  width: clamp(220px, 24vw, 341px);
}

.campaign__confetti--right {
  right: 0;
  top: 82px;
  width: clamp(190px, 20vw, 288px);
}

/* === 紙吹雪 (CSS実装 / 画像不要) ===
   お祝いクラッカーの紙片 (Figma実SVG) が「ゆっくり・左右にふわーっと」
   舞い落ちる。1要素 (.confetti-piece) に独立2プロパティで合成負荷最小:
   - translate プロパティ = 全高落下(Y) ＋ 緩い横ドリフト(X)
   - rotate プロパティ = 木の葉フラッター (独立周期)
   速度は全粒一定＋均等位相ディレイ＝画面内が空にならず常時降下。
   3D回転は不使用 (薄い側面を見せない)。左右コラムは右をミラー */
.campaign__confetti-col {
  position: absolute;
  top: 0; /* キャンペーン最上端ギリギリから出す */
  bottom: 0;
  width: clamp(190px, 20vw, 288px);
  z-index: 2; /* DOM順: 顔→紙吹雪→中央パネル。顔の前/中央パネルの背面
                 → 左右青赤バンドを応募規約まで紙吹雪が降りて見える */
  pointer-events: none;
  overflow: hidden;
  /* container-type: size は廃止 (落下距離を cqh ではなく piece の height:100% +
     translate % で取るようにしたため不要)。 */
}

.campaign__confetti-col--right {
  right: 0;
}

.campaign__confetti-col--left {
  left: 0;
  transform: scaleX(-1);
}

/* 1要素・独立2プロパティで合成負荷を最小化 (入れ子なし):
   translate プロパティ = 落下(Y全高) ＋ 緩い横ドリフト(X) を1本に
   rotate プロパティ = 速い木の葉フラッター (独立周期)
   別プロパティなので競合せず、どちらも compositor 側で滑らかに走る */
/* 外: 落下レーン。height:100% でコラム全高の不可視レーンにし、
   translate を「自身の高さ(=コラム全高)に対する %」で落とす。
   cqh 依存 (container query height) は画像読み込みのタイミングで高さ確定前に
   計算され「下まで届かない/届く」が不安定になるため廃止。% なら常にコラム実高
   基準でライブ更新され、どのタイミングでも下端まで降る。 */
.confetti-piece {
  position: absolute;
  top: 0;
  height: 100%;
  animation: confettiDrop var(--cf-dur, 28000ms) linear infinite;
  animation-delay: var(--cf-delay, 0ms);
}

@keyframes confettiDrop {
  from {
    translate: 0 -15%;
  }
  to {
    translate: 0 115%;
  }
}

/* 内: 紙片本体。左右2段階の振り子フラッター (左⇄右だけ)。
   中央キーフレームは作らない＝中央は"最速で素通り"。ease-in-out で
   端だけ減速＝空気を孕む感じ。段付き(=カクつき)を解消。
   0%==100% で継ぎ目なし。親(translate)と別プロパティ・別要素 */
.confetti-piece__i {
  display: block;
  opacity: 0.95;
  animation: confettiFlutter var(--cf-sway-dur, 3000ms) ease-in-out infinite;
}

.confetti-piece__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes confettiFlutter {
  /* 左端 (わずかに浮いた位置・左へ傾く) */
  0% {
    transform: translate(calc(var(--cf-sway, 32px) * -1), -2px)
      rotate(calc(var(--cf-spin, 26deg) * -1));
  }
  /* 右端 (中央は素通り。右へ傾く) */
  50% {
    transform: translate(var(--cf-sway, 32px), -2px)
      rotate(var(--cf-spin, 26deg));
  }
  100% {
    transform: translate(calc(var(--cf-sway, 32px) * -1), -2px)
      rotate(calc(var(--cf-spin, 26deg) * -1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-piece,
  .confetti-piece__i {
    animation: none;
  }
  .confetti-piece {
    opacity: 0;
  }
}

/* 顔の縦帯 — 左ひやり / 右ほっと、両方同サイズで対称配置。
   div + bg-image: repeat-y で section 末端 (利用規約まで) まで顔が連続するように */
/* 顔バンド: 個別の顔(.cface)を縦に並べるコンテナ。背景画像は廃止。
   z-index:3 = 中央パネル(2)/紙吹雪(2) の前面 → 側面バンドで顔が
   隠れず見える (リファレンス同様、顔が主役の装飾) */
.campaign__faces {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  /* 画面幅で可変 (8vw→10vw 上限 124→180px) で広い画面でも顔がしっかり見える */
  width: clamp(60px, 10vw, 180px);
  /* ピクセル等間隔配置 — セクションが縦に伸びるほど顔がループで増える */
  /* デザイン比で顔の間隔が狭いため +60px。
     顔サイズ(width)は不変なので pitch を全域 +60px して隙間だけ広げる。 */
  --face-pitch: clamp(200px, calc(14vw + 60px), 320px);
  overflow: hidden;
}

/* JS で末尾の見切れ顔を非表示 (一番下の人を中途半端に切らない) */
.cface.cface--clipped {
  display: none;
}

/* 「赤と青が消える幅まで、顔は青/赤バンドの真ん中に来てほしい」:
   バンド幅 = (vw - inner_width) / 2 / inner = max(60vw, 1000px)
   → バンド中央 = バンド幅 / 2 = (vw - max(60vw, 1000px)) / 4 */
.campaign__faces--cold {
  left: calc((100vw - max(60vw, 1000px)) / 4);
  transform: translateX(-50%);
  top: 80px;
  bottom: 80px;
}

.campaign__faces--hot {
  right: calc((100vw - max(60vw, 1000px)) / 4);
  transform: translateX(50%);
  top: 80px;
  bottom: 80px;
}

/* 個別の顔 (正方 260x260)。2フレームを重ね、--b を数回パカパカさせて
   コマ送り → 少し休む。--ff-delay で顔ごとに位相をずらす */
.cface {
  position: absolute;
  left: 0;
  width: 100%;
  /* Edge で aspect-ratio 由来の高さが算出されず .cface が高さ0に潰れ、
     子の .cface__f(height:100%)も0=顔が完全消失する事故対策。親(.campaign__faces)
     幅と同式 clamp の正方を height で明示して0潰れを防止。aspect-ratio は一部 Edge で
     明示 height と競合し0潰れを誘発しうるため使わない (height 明示のみで正方を担保)。 */
  height: clamp(60px, 10vw, 180px);
}

.cface__f {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 透過PNGの2フレームを「排他切替」する。A と B を反位相で
   opacity 1/0 にし、常にどちらか一方だけ表示 (両方表示で下の顔が
   透けて残る二重写りを防ぐ)。同一周期・同一ディレイで完全同期 */
.cface__f--a {
  opacity: 1;
  animation: cfaceFlipA 7000ms steps(1, end) infinite;
  animation-delay: var(--ff-delay, 0ms);
}

.cface__f--b {
  opacity: 0;
  animation: cfaceFlipB 7000ms steps(1, end) infinite;
  animation-delay: var(--ff-delay, 0ms);
}

/* 約1秒/コマで 3 回パカパカ → 残りは休む(frame1)。B はその反位相 */
@keyframes cfaceFlipA {
  0%,
  12% {
    opacity: 1;
  }
  12.001%,
  24% {
    opacity: 0;
  }
  24.001%,
  36% {
    opacity: 1;
  }
  36.001%,
  48% {
    opacity: 0;
  }
  48.001%,
  60% {
    opacity: 1;
  }
  60.001%,
  72% {
    opacity: 0;
  }
  72.001%,
  100% {
    opacity: 1;
  }
}

@keyframes cfaceFlipB {
  0%,
  12% {
    opacity: 0;
  }
  12.001%,
  24% {
    opacity: 1;
  }
  24.001%,
  36% {
    opacity: 0;
  }
  36.001%,
  48% {
    opacity: 1;
  }
  48.001%,
  60% {
    opacity: 0;
  }
  60.001%,
  72% {
    opacity: 1;
  }
  72.001%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cface__f--a {
    animation: none;
    opacity: 1;
  }
  .cface__f--b {
    animation: none;
    opacity: 0;
  }
}

/* 文字あしらい (HIYARI / HOTTO の白文字パターン背景) を 2 枚に分割。
   水色側 (左 50%) = HIYARI / 赤側 (右 50%) = HOTTO。
   「水色背景はHIYARI、赤背景はHOTTOが見えるように」を実現。
    (追加 1) 自動流れ + 視認性 UP。
    (追加 2) 「もっとズームイン / 動きは 左→右 統一」:
     - background-size: auto 360 → 600px (文字を大きく見せる)
     - HIYARI/HOTTO とも 左 → 右 にスクロール (方向統一)
     - tile width = 600 * (597/447) ≈ 800px → 1 タイル分 position-x をずらして seamless loop
    (追加 3) 「tile高さ 1500px に」:
     - 600 → 1500px (さらに大きくズーム)
     - tile width = 1500 * (597/447) ≈ 2003px (≒ 2000px ぶん seamless loop) */
.campaign__text-decor {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  /* 不透明度 0.55 → 0.8 (もう少しはっきり見せる) */
  opacity: 0.8;
  pointer-events: none;
  width: 50%;
  overflow: hidden;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  /* (追加 2→3) ズームイン: 360 → 600 → 1500px (どんどん文字大きく) */
  background-size: auto 1500px;
  /* (追加 2→3) 左 → 右 にスクロール統一。tile 大きくしたので duration も延長 30→50s */
  animation: campaignDecorDriftRight 50s linear infinite;
}

.campaign__text-decor--hiyari {
  left: 0;
  background-image: url("/cdn/shop/files/campaign-hiyari-pattern.webp");
}

.campaign__text-decor--hotto {
  right: 0;
  background-image: url("/cdn/shop/files/campaign-hotto-pattern.webp");
}

/* 左 → 右 seamless loop。1 タイル幅 = 1500px * 597/447 ≈ 2003px → 2000px ぶんずらす。
   tile が大きくなったぶん 1 周期の時間も延ばさないと動きが速すぎる → 30 → 50s */
@keyframes campaignDecorDriftRight {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 2000px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .campaign__text-decor {
    animation: none;
  }
}

/* 小さい紙吹雪のアクセント (CTA 周りに配置) */
.campaign__confetti-mini {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  width: clamp(40px, 4vw, 64px);
  height: auto;
}

.campaign__confetti-mini--1 {
  /* 左パネル下部 */
  left: 8%;
  top: 70%;
}

.campaign__confetti-mini--2 {
  /* 右パネル下部 */
  right: 8%;
  top: 78%;
}

/* 中央コンテンツコラム — Figma 直: ピンクのセンターパネル
   20/60/20 比率 — pink を viewport 60% 幅で中央配置、両端 20% に青赤バンドが見える。
   ※ レスポンシブ: 一定幅以下では viewport 全幅にして青赤バンドを覆い隠す (SP 想定) */
.campaign__inner {
  position: relative;
  z-index: 2;
  /* レスポンシブ 画面が狭まると左右の青赤バンドを「ギリギリまで」縮め、
     一定で消す。インナーは通常 60vw だが、最小 1000px は確保 (リード文の最長行
     ≈774px が折り返さない幅)。→ 60vw が 1000px を下回る幅帯ではインナー幅が
     1000px に張り付き、バンドは連続的に細くなり ≒1000px 以下でインナー=100%
     (バンド消滅) になる。100% 上限で画面外には出ない。 */
  width: min(100%, max(60vw, 1000px));
  max-width: var(--content-max);
  margin-inline: auto;
  /* v2: 左右 padding を CSS 変数 --campaign-hpad に切り出し
     (子要素から負マージンで食い込ませるため) */
  --campaign-hpad: clamp(48px, 6vw, 100px);
  padding: 100px var(--campaign-hpad) 100px;
  background: #fde0e2;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* === タイトル === */
.campaign__title {
  text-align: center;
}

.campaign__title-h2 {
  margin: 0;
  display: flex;
  justify-content: center;
}

/* PC は紙吹雪なし (CAMPAIGN.svg + キャンペーン)。背景の落下紙吹雪が残るため。 */
.campaign__title-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* SP は紙吹雪入り一体型画像。PC では非表示。
   CAMPAIGN 文字のキャップ高さを FUTURE (~64px) に揃える表示幅。 */
.campaign__title-img {
  display: block;
  width: clamp(560px, 64vw, 830px);
  max-width: 100%;
  height: auto;
}
.campaign__title-sp {
  display: none;
}

.campaign__title h2 {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.campaign__title-en {
  font-family: "Climate Crisis", sans-serif;
  font-weight: 400;
  /* Figma: ピンクパネル幅に収まる範囲で最大化 (Climate Crisis は文字が横に広いので余裕めに) */
  font-size: clamp(64px, 7vw, 100px);
  letter-spacing: 0;
  color: var(--red, #e03a3a);
  font-variation-settings: "YEAR" 1979;
  line-height: 1;
  margin-bottom: 12px;
  white-space: nowrap;
}

/* 作字 SVG (C/G 込み) に差し替え。634x65 のアスペクトを保ち
   ピンクパネル幅内で従来見出しと同等スケールに */
.campaign__title-en--svg {
  display: block;
  width: clamp(360px, 46vw, 600px);
  height: auto;
  margin-bottom: 12px;
}

.campaign__title-jp {
  font-family: "Zen Maru Gothic", sans-serif;
  /* 日本語タイトルを「ムービーギャラリー」(.movie__heading p) と揃える。
     24px / fw700 / letter-spacing 1.2px。色はキャンペーン文脈の赤を維持。 */
  font-weight: 700;
  font-size: 24px;
  color: var(--red, #e03a3a);
  letter-spacing: 1.2px;
  margin-top: 0;
}

/* リード文: 各 p の dashed 下線は、その行のテキスト幅に合わせる
   (display: inline-block で shrink-to-fit、親で text-align: center 配置) */
.campaign__lead {
  margin-top: 40px;
  padding: 0;
  background: transparent;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(16px, 1.4vw, 21px);
  /* font-weight 500 (「スイっと、きもちよく」= b は除外) */
  font-weight: 500;
  line-height: 1.8;
  color: #050505;
  letter-spacing: 0.5px;
  text-align: center;
}

.campaign__lead p {
  margin: 0;
  padding: 20px 0;
  display: inline-block;
  /* 点線 カラー #000 20% / 太さ 2px */
  border-bottom: 2px dashed rgba(0, 0, 0, 0.2);
}

.campaign__lead p + p {
  margin-top: 0;
}

.campaign__lead b {
  color: var(--red, #e03a3a);
  font-weight: 900;
}

/* === ブロック共通 (Figma: ピンクパネル全体に直接乗る) === */
.campaign__block {
  position: relative;
  background: transparent;
  border-radius: 0;
  padding: 24px 0 8px;
  box-shadow: none;
}

/* === ピル型タイトル (Figma 直の PNG: 重なり丸 + 点線下線) === */
.campaign__pill {
  margin: 0 auto 32px;
  display: flex;
  justify-content: center;
}

.campaign__pill img {
  display: block;
  height: auto;
  /* 元: 346×87 (overview/prizes) または 178×87 (steps/terms) — フル解像度で表示 */
  max-height: 80px;
  width: auto;
  image-rendering: -webkit-optimize-contrast;
}

/* レスポンシブ: 1100px 以下では pink を 100% にして青赤バンドを覆う。
   顔も非表示 (より広い breakpoint で適用) — ピンク領域に顔がはみ出すのを防止 */
/* インナー幅は上の formula で制御 (≒1000px 以下で自動的に 100% / バンド消滅)。
   顔はインナーが広がってバンドが細くなると ピンク領域に重なるため、
   バンドが顔(最大180px)を収めきれなくなる ~1500px 以下で先に隠す。 */
@media (max-width: 1500px) {
  .campaign__faces--cold,
  .campaign__faces--hot {
    display: none;
  }
}

/* === キャンペーン期間 (Figma 直: PNG 1 枚) ===
   上下/左右パディングを狭く (18/32 → 10/20)。
   ※ 点線色 #000 20% / 太さ 2px は PNG に baked-in のため
   CSS で変更不可。 新素材依頼が必要 */
.campaign__period-img {
  display: block;
  width: 100%;
  /* 「参加方法セクション幅 (816px) と揃える」 */
  max-width: 816px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 10px 20px;
  box-sizing: border-box;
}

.campaign__period-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* === 賞品 4 ティア (Figma 直: PNG 1 枚) === */
.campaign__prizes-img {
  display: block;
  width: 100%;
  /* 「参加方法セクション幅 (816px) と揃える」 */
  max-width: 816px;
  margin: 0 auto;
}

.campaign__prizes-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* SP 用 STEP 縦積み画像 — PC では非表示 */
.campaign__steps-sp {
  display: none;
}

/* === STEP 1 / STEP 2 (Figma 直: それぞれ PNG 1 枚) ===
   2 つのカードを中央寄せで近接配置、間に赤い ▶▶ */
.campaign__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* レスポンシブ: STEP カードがコンテンツ幅からはみ出さないよう gap も可変に。 */
  gap: clamp(24px, 4vw, 56px);
  position: relative;
}

.campaign__step {
  display: flex;
  justify-content: center;
  /* レスポンシブ: 基準 380px だが、コンテンツ幅が足りなければ縮む(はみ出し防止)。
     余裕がある幅では 380px で頭打ち + 中央寄せ。 */
  flex: 0 1 380px;
  min-width: 0;
}

.campaign__step-img {
  display: block;
  /* 新アセット (1012x820, 横長)。カード(flex item)幅にフィットさせ、
     上限 380px。これで 2 枚 + gap が常にコンテンツ幅に収まる。 */
  width: 100%;
  max-width: 380px;
  height: auto;
}

/* STEP1 と STEP2 の間に赤い ▶▶
   新アセットは「カード + 下のテキストラベル」を含むため、
   矢印は「画像の縦中央 (50%)」だと テキスト寄りになりズレる。
   カード中心 = 画像高さの約 46% に合わせる */
.campaign__steps::before {
  content: "▶▶";
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  /* 矢印サイズ 22 → 16px に縮小 */
  font-size: 16px;
  color: var(--red, #e03a3a);
  letter-spacing: -4px;
  z-index: 3;
  pointer-events: none;
}

/* === メイン CTA === */
.campaign__cta {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma spec (Frame 1283) gap 20 */
  gap: 20px;
}

/* CTA 上にドット ライン (Figma "Group 1194" 赤青角丸ドット、商品セクションと同じ素材) */
.campaign__cta::before {
  content: "";
  display: block;
  /* v2.1: 青赤の点線を .campaign__inner の左右 padding に食い込ませて、
     ピンク領域の端から端まで完全に伸ばす。
     親 .campaign__cta の align-items: center により、widest item が自動で
     左右等しく中央配置されるため、margin-left は不要 (むしろ二重ずれの原因)。 */
  width: calc(100% + 2 * var(--campaign-hpad));
  height: 14px;
  margin-bottom: 20px;
  /* v2: 元画像(641px)を repeat すると継ぎ目で隙間が出るため、
     ギャップ中央で切り出した「2ダッシュ分のシームレスタイル」(90px)を使用。
     repeat: round で整数個ぴったり収め、継ぎ目の隙間ゼロ・均等配置に。 */
  background-image: url("/cdn/shop/files/product-dot-line-rb-tile.webp");
  background-repeat: round;
  background-position: center;
  background-size: auto 100%;
}

.campaign__cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Figma spec (Frame 1283 > ボタン) width 360 / padding 24x32 / gap 8 / radius 114 / bg #DE2E2E */
  width: 360px;
  max-width: 100%;
  gap: 8px;
  padding: 24px 32px;
  background: #de2e2e;
  color: #fff;
  border-radius: 114px;
  /* Figma 「今すぐ応募」: Zen Maru Gothic / 700 / 20px / line-height 140% /
     letter-spacing 0.05em / font-feature-settings palt */
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  text-decoration: none;
  /* Figma 仕様: シャドウなし */
  transition: transform 200ms ease;
}

/* マウスオーバー色反転 (ヘッダー赤ピルと同じ動作)。
   bg #de2e2e / text #fff → bg #fff / text #de2e2e + 枠線で形状維持。
   translateY(-2px) は廃止 → ヘッダーピル同様、固定位置で色だけ切替。 */
.campaign__cta-button:hover {
  background: #fff;
  color: #de2e2e;
  box-shadow: inset 0 0 0 1px #de2e2e;
}

.campaign__cta-button:active {
  transform: translateY(2px);
}

.campaign__cta-deadline {
  margin: 0;
  /* Figma 締切テキスト: Zen Maru Gothic / 500 / 14px / line-height 140% /
     letter-spacing 0.05em / color #000 */
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
  letter-spacing: 0.05em;
}

/* 締切テキスト、PC は 1 行表示 / SP のみ「：」で改行。 */
.campaign__cta-deadline__sp-break {
  display: none;
}

/* === 規約 (Figma: ピル下に白い丸角カード、内側に赤丸 + 黒文字リスト) ===
   規約が長くなる想定のため、カード高さを上限固定 + 内部 scroll に。
   ※ macOS の overlay scrollbar を回避するためカスタムバーを使用:
     - 内側 .campaign__terms-scroll が本来の scroll コンテナ (native bar は非表示)
     - 右側に .campaign__terms-track (gray pill, 常時表示) を絶対配置
     - .campaign__terms-thumb (red pill) を JS で scroll に同期 */
.campaign__terms-card {
  position: relative;
  width: 100%;
  /* 「参加方法セクション幅 (816px) と揃える」 */
  max-width: 816px;
  margin: 0 auto;
  padding: 28px 36px 28px 40px;
  background: #fff;
  border-radius: 16px;
  box-sizing: border-box;
}

.campaign__terms-scroll {
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* native scrollbar を完全隠蔽 (カスタム track を表示するため) */
  scrollbar-width: none;
  padding-right: 16px;
}

.campaign__terms-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* カスタム track: カード右端に常時 gray pill */
.campaign__terms-track {
  position: absolute;
  top: 28px;
  bottom: 28px;
  right: 14px;
  /* 「太さ 8→5px」 */
  width: 5px;
  background: #e6e6e6;
  border-radius: 999px;
  pointer-events: none;
}

/* thumb: 赤 pill、JS で top と height を scroll 連動 */
.campaign__terms-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30%;
  background: var(--red, #e03a3a);
  border-radius: 999px;
  transition:
    top 80ms linear,
    height 80ms linear;
}

.campaign__terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* 「箇条書きギャップ 16→4」
      「PC は 4→12px に戻す。SP は 4 のままで OK」 */
  gap: 12px;
}

.campaign__terms li {
  position: relative;
  padding-left: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  color: #050505;
  letter-spacing: 0.5px;
}

.campaign__terms li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red, #e03a3a);
}


/* === concat: src/styles/future-footer.css === */
.future {
  /* v2: 「目指す未来」セクション下〜アワード〜フッター の余白を拡大して詰まり感を解消
     bottom 0 → 60 → 100 (追加コメント「さらに+40」を反映)
       アワード注釈〜フッター間が間延びしてるので
     bottom 100 → 32px に削減 */
  padding: 100px clamp(24px, 4vw, 32px) 32px;
  text-align: center;
  background: #fff;
}

.future > * {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  box-sizing: border-box;
}

.future h2 {
  margin: 0;
  font-family: "Climate Crisis", sans-serif;
  /* CAMPAIGN/MOVIE 見出しと同等のサイズ感に */
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 400;
  line-height: 1.2;
  /* 「letter-spacing 0」 */
  letter-spacing: 0;
  color: var(--red);
}

.future__lead {
  margin: 2px 0 60px;
  color: var(--red);
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 24px;
  /* 日本語タイトル fw 900 → 700 */
  font-weight: 700;
  letter-spacing: 1.2px;
}

/* futureHouse 画像自体に NO.1 / 取扱店舗数 / 累計販売数 / SwitchBot ロゴが
   焼き込み済みなので、コンテナは画像 1 枚を中央寄せで表示するだけ */
.future__contents {
  display: block;
  text-align: center;
}

.future__scene {
  display: block;
  /* 画面幅の75%で拡縮、最大幅は他コンテンツ(--content-max)に合わせる。 */
  width: 75vw;
  max-width: var(--content-max);
  height: auto;
  margin: 0 auto;
  /* 「角丸 0」 */
  border-radius: 0;
}

.future__heading {
  text-align: center;
}

.future__stats {
  display: grid;
  gap: 14px;
  font-family: "Zen Maru Gothic", sans-serif;
}

.future__stats-lead {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
}

.future__stats-no1 {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--red);
}

.future__stats-no1 b {
  font-family: "Climate Crisis", sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 2px;
}

.future__stats-no1 span {
  font-family: "Climate Crisis", sans-serif;
  font-size: 92px;
  font-weight: 400;
  line-height: 1;
}

.future__stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}

.future__stats-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 2px solid #d6d6d6;
  border-radius: 4px;
}

.future__stats-list li span {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  color: #777;
}

.future__stats-list li b {
  font-family: "Climate Crisis", sans-serif;
  font-size: 36px;
  font-weight: 400;
  color: #000;
}

.future__stats-list li i {
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

/* FUTURE 右側に SwitchBot ロゴテキスト。画像と並列で表示するため
   absolute をやめて grid のセル内ヘッダーとして配置 */
.future__brand {
  align-self: end;
  justify-self: start;
  font-family: "Climate Crisis", sans-serif;
  font-size: clamp(40px, 5vw, 76px);
  letter-spacing: 3px;
  line-height: 1;
  color: #2f9cd8;
  pointer-events: none;
  opacity: 0.95;
  margin-bottom: 20px;
}

.future__scene {
  /* 75vw で拡縮 (最大は上の rule の var(--content-max)) */
  width: 75vw;
  /* 角丸 0。上の rule で 0 にしてあったが
     ここで 12px に上書きされていたので 0 に揃える。 */
  border-radius: 0;
}

.future__copy {
  /* タイトル〜説明 68px / 説明〜画像 60px */
  margin: 68px auto 60px;
  padding: 0;
  /* 中央寄せ: 自然な行幅で 1 行目と次行が綺麗に揃うように max-width を絞る */
  max-width: 850px;
  /* font-size 16px → clamp / line-height 2 → 2.2 / ls 0.8 → 1 */
  font-size: clamp(13px, 1.1vw, 20px);
  line-height: 2.2;
  letter-spacing: 1px;
  text-align: center;
}

/* PC/SP で改行が違うので 2 つの <p> を出し分け。デフォルトは PC */
.future__copy--sp { display: none; }

/* === 受賞ロゴ列 (Figma 更新後の "パワーアップ一覧": 7 ロゴ) ===
   IoT ブランド/ロック/リモコン + iF/reddot/FINALIST/GOOD DESIGN を 1 行で
   height 揃え (90px) / width は aspect-ratio で auto */
.future__awards {
  display: flex;
  align-items: center;
  /* 「家画像と同じ幅 + 均等配置 + 1行で収める」: nowrap + clamp height */
  justify-content: space-between;
  gap: clamp(4px, 0.6vw, 12px);
  padding: 140px 0 60px;
  width: 75vw;
  max-width: 1680px;
  margin: 0 auto;
  background: #fff;
  flex-wrap: nowrap;
}

.future__award {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  /* 「1行に収めて」: 7枚が75vw内に収まる可変 height (1400px幅で約88px) */
  height: clamp(56px, 6.3vw, 100px);
  width: auto;
}

/* 注釈文ブロック */
.future__notes {
  list-style: none;
  /* awards と同じ 75vw / 1680px に揃えて左端一致 */
  margin: 0 auto;
  padding: 8px 0 64px;
  width: 75vw;
  max-width: 1680px;
  background: #fff;
  color: #888;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  line-height: 1.6;
  text-align: left;
}
.future__notes li {
  margin: 0;
  text-indent: -1.4em;
  padding-left: 1.4em;
}

.footer {
  /* フッターは「16px の余白で四方を囲む + 四隅角丸」スタイル。
     上下 16px / 左右は panel 側の margin-inline 16px で。 */
  padding: 16px 0;
  background: #fff;
  color: #fff;
}

/* === Footer (Figma 仕様) ===
   - 左半分 = 青 (ロゴ + SNS + コピーライト)
   - 右半分 = 赤 (CONTENTS + リンクナビ + Page Top)
   - 境界 = 右向きシェブロン (青が右に向かって三角に伸びる) */
.footer__panel {
  position: relative;
  /* フッターの高さを出す (320 → 400) */
  min-height: 400px;
  /* max-width 撤廃 (フル幅志向) を維持しつつ、四方に 20px の白マージン。
     四隅すべて 24px の border-radius で「白マージンに浮いたパネル」印象に。
     左右マージンも 16px に統一 (デザインの「16pxで囲む」)。 */
  max-width: none;
  margin-inline: 16px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--red);
}

.footer__panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  /* 青の割合を 60% → 55% に縮小 (赤と目視半々に) */
  width: 55%;
  background: #2f9cd8;
  /* 右にシェブロン状に突き出す */
  clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 50%, calc(100% - 80px) 100%, 0 100%);
}

.footer__brand,
.footer__contents,
.footer__top {
  position: absolute;
  z-index: 1;
}

.footer__brand {
  /* ロゴを目視で左揃え (デザインに合わせ left を少し詰める) */
  left: 40px;
  top: 44px;
  /* ロゴ下余白を広げ、SNS+コピーライトを下端へ。
     bottom を PAGE TOP (24px) と揃えてコピーライトと同じベースラインに。 */
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 青幅 55% に追従 */
  width: calc(55% - 80px);
}

.footer__brand img {
  /* 新ロゴをもう少し小さく (404 → 340) */
  width: min(340px, 72%);
  /* ロゴを少しだけ左へずらして目視で揃える */
  margin-left: -10px;
}

.footer__sns {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

.footer__sns a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000;
  transition:
    transform 200ms ease,
    background 200ms ease;
}

/* SNS マウスオーバー時は色反転 (黒丸→白丸 / 白アイコン→黒) */
.footer__sns a:hover {
  transform: translateY(-2px);
  background: #fff;
}

.footer__sns a:hover span {
  filter: invert(1);
}

.footer__sns a span {
  display: block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* SNS アイコン (順序: YouTube, X, Facebook, Instagram, LINE) */
.footer__sns a:nth-child(1) span {
  /* YouTube */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}
.footer__sns a:nth-child(2) span {
  /* X (Twitter) */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}
.footer__sns a:nth-child(3) span {
  /* Facebook */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}
.footer__sns a:nth-child(4) span {
  /* Instagram */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.42.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.42 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.42 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.42-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.42a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.42-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.42-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.42C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.85 5.85 0 0 0-2.13 1.39A5.85 5.85 0 0 0 .63 4.14c-.3.76-.5 1.64-.56 2.91C.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91a5.86 5.86 0 0 0 1.39 2.13 5.86 5.86 0 0 0 2.13 1.39c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.86 5.86 0 0 0 2.13-1.39 5.86 5.86 0 0 0 1.39-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.86 5.86 0 0 0-1.39-2.13A5.85 5.85 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.41-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z'/%3E%3C/svg%3E");
}
.footer__sns a:nth-child(5) span {
  /* LINE — 新しい完成アイコン画像 (Frame 1163.png) を直接背景に */
  background-image: url("/cdn/shop/files/sns-line-icon.webp");
  /* 完成アイコン (黒円+白LINE文字) なので円形コンテナいっぱいに */
  width: 100%;
  height: 100%;
  background-size: cover;
}
/* LINE はアセット側で黒円持ちなので親 <a> の黒円背景を透過に */
.footer__sns a:nth-child(5),
.sp-menu__sns a:nth-child(5) {
  background: transparent;
}

.footer__copyright {
  margin-top: 18px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #fff;
}

/* === CONTENTS (右半分・赤エリア) ===
   PC: タイトル (左) + dashed 縦線 + nav-list (右) の横並び。
   タイトルは 1 行目 (スマートロック) と水平揃え */
.footer__contents {
  right: 56px;
  /* デザイン合わせ: 全体的に大きく + 少し上げる (top 56→44) */
  top: 44px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
}

.footer__contents-title {
  margin: 0;
  line-height: 1;
  flex-shrink: 0;
}

/* 「CONTENTS」テキスト見出しの白ワードマーク画像に差し替え。
   旧テキスト(22px)と同等の見た目になるよう height で調整、width は比率連動。
   max-width:100% でフッターパネル幅を超えない(SPはみ出し防止)。 */
.footer__contents-title img {
  display: block;
  height: 26px;
  width: auto;
  max-width: 100%;
}

.footer__nav {
  display: grid;
  gap: 20px;
  border-left: 1px dashed rgba(255, 255, 255, 0.85);
  padding-left: 32px;
  font-family: "Zen Maru Gothic", sans-serif;
  /* デザイン合わせで大きく (13→16) + 行間広め */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-feature-settings: "palt" 1;
}

.footer__nav a {
  color: #fff;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.footer__nav a:hover {
  opacity: 0.7;
}

.footer__nav a::before {
  /* 6px 白丸 (Figma 正式版) */
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 12px;
  border-radius: 50%;
  background: #fff;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

/* Page Top: Figma 正式版 — 背景なし (赤の上) / 白丸+↑アイコン (左) + Page Top 白文字 (右) */
.footer__top {
  right: 40px;
  bottom: 24px;
  display: inline-flex;
  flex-direction: row-reverse; /* テキストを右、アイコンを左に */
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  color: #fff;
  /* 書体 Rubik SemiBold(700) */
  font-family: "Rubik", "Inter", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-decoration: none;
  /* すべて大文字「PAGE TOP」 */
  text-transform: uppercase;
}

.footer__top::after {
  content: "↑";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  /* フッターのアロー色を #E03A3A へ */
  color: #e03a3a;
  font-size: 11px;
  font-weight: 900;
}

.buy-button {
  transition:
    transform 220ms var(--spring),
    box-shadow 220ms ease,
    background 220ms ease,
    color 220ms ease,
    filter 220ms ease;
}

.buy-button:hover,
.buy-button:focus-visible {
  /* ホバーで「少し上に上がる」動き(translateY)を廃止 → 固定位置。
     ホバーの手応えは影＋彩度＋色反転で表現。 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  filter: saturate(1.12);
}

/* マウスオーバー時に色反転
   - 黒ボタン(OFFICIAL/AMAZON/RAKUTEN) → 白地・黒文字
   - CAMPAIGN(白ボタン) → 黒地・白文字
   アイコンの stroke は currentColor 追従にして反転後も視認可能に */
.buy-button:hover,
.buy-button:focus-visible {
  background: #fff;
  color: #050505;
}

.buy-button--coupon:hover,
.buy-button--coupon:focus-visible {
  background: #050505;
  color: #fff;
}

/* 「ホバーで真っ黒になってキャンペーン文字が消える → 反転して」:
   CAMPAIGN ボタンの「キャンペーン情報はこちら」は SVG 画像 (黒インク)。
   hover で背景が黒になると画像も黒で見えなくなるので、filter で色反転して白に。 */
.buy-button--coupon:hover .buy-button__campaign-text img,
.buy-button--coupon:focus-visible .buy-button__campaign-text img {
  filter: invert(1);
}

.buy-button__icon path {
  stroke: currentColor;
}


/* === concat: src/styles/animations.css === */
@keyframes tickerSlide {
  from {
    transform: translateX(-8%);
  }

  to {
    transform: translateX(-42%);
  }
}

@keyframes productFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-13px) rotate(2deg);
  }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes copyPop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes labelPop {
  from {
    opacity: 0;
    transform: scale(0.45) rotate(var(--label-rotate, 0deg));
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(var(--label-rotate, 0deg));
  }
}

@keyframes guideBounce {
  0%,
  100% {
    transform: translateY(-50%) translateX(0);
  }

  50% {
    transform: translateY(-50%) translateX(-7px);
  }
}

@keyframes sceneDriftLeft {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-10px);
  }
}

@keyframes sceneDriftCenter {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(8px);
  }
}

@keyframes sceneDriftRight {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(12px);
  }
}

.hiyari-toggle__label--off.is-visible {
  --label-rotate: -20deg;
}

.hiyari-toggle__label--on.is-visible {
  --label-rotate: 15deg;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}


/* === concat: src/styles/responsive-tablet.css === */
@media (max-width: 900px) {
  /* SP では Figma 仕様で側面ガイドを各 card の右側に "ほっとする〜" として
     視覚的に隣接させる。display: none は撤去 (下の SP 詳細メディアクエリで
     さらに右下ぴったりに微調整) */
  .side-switch-guide-DISABLED-on-sp {
    display: none;
  }

  .header {
    padding: 12px 18px;
  }

  .header__outline {
    display: none;
  }

  .kv {
    min-height: auto;
  }

  .kv__slide {
    right: 18px;
    bottom: 10px;
    font-size: 18px;
    gap: 10px;
  }

  .kv__slide img {
    width: 78px;
  }

  .about {
    min-height: 620px;
    padding: 72px 24px;
  }

  .about h1 {
    font-size: 42px;
  }

  .about p {
    font-size: 15px;
  }

  .experience {
    padding: 62px 12px 46px;
  }

  .experience__ticker {
    font-size: 56px;
    gap: 28px;
  }

  .experience__title {
    padding: 16px 12px 80px;
  }
  .experience__title-stage {
    max-width: 100%;
  }

  .case-list {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 16px;
    border-radius: 34px;
  }
  /* ディスプレイ幅 769〜900px のとき、
     白ベタ (case-list) の上下 padding を 60px に。
     SP (≤768) はこの後の @media (max-width: 768px) で 28px に戻す。 */
  @media (min-width: 769px) {
    .case-list {
      padding-top: 60px;
      padding-bottom: 60px;
    }
  }

  .case-card {
    min-height: 360px;
    /* v3 / : この幅帯(1カラム)はバッジ幅が 48px 固定。右余白は padding 側で
       「バッジ占有(右オフセット+48) + 40」を確保する従来方式を維持する。
       そのため base の子要素 reserve は無効化 (--badge-reserve:0) して二重インセットを防ぐ。 */
    --badge-reserve: 0px;
    padding: 28px calc(clamp(12px, 2cqw, 22px) + 48px + 40px) 30px 40px;
    border-radius: 22px;
  }

  .case-card__copy {
    font-size: 14px;
  }

  .case-card__visual {
    width: 100%;
  }

  .hiyari-toggle__label img {
    height: 56px;
  }

  .hiyari-toggle__label--off,
  .hiyari-toggle__label--on {
    top: -28px;
  }

  .case-card__side {
    width: 48px;
  }

  .case-card__side span {
    font-size: 14px;
  }

  .product {
    grid-template-columns: 1fr;
    /* 単列レイアウト時は左半分赤の背景は不要 → 白に戻す */
    background: #fff;
  }

  /* mobile: layered visual (aspect-ratio: 1) は intrinsic で OK */
  .product__visual {
    min-height: 0;
  }

  /* SP: city も visual と同じ単列セルで row 1 底、full 幅。
     tile width > 100vw を満たすため image height を上げる */
  .product__city {
    grid-row: 1;
    grid-column: 1;
    height: clamp(80px, 22vw, 200px);
  }

  .product__copy {
    padding: 52px 24px;
  }

  .product h2 {
    font-size: 34px;
  }

  .buy-area {
    padding: 24px 18px 32px;
  }

  .buy-area__buttons {
    grid-template-columns: 1fr;
  }

  /* (青文字 追加) 「24px のパディングが残ってる→他と揃えて左右 16px」。
     base の width: 75vw (中央寄せ) では「16px from viewport edge」が実現できないので、
     900px breakpoint では heading / frames とも width: 100% に上書きし、
     .movie 親の padding: 0 16px で 16px を担保する。 */
  .movie {
    padding: 100px 16px 140px;
  }
  .movie__heading,
  .movie__frames {
    width: 100%;
    max-width: none;
  }
  .movie__frames {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 76px;
    padding: 0;
  }

  .movie__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 500 / 280;
  }

  .movie__thumb > img:first-child {
    width: 100%;
    height: 100%;
  }

  .movie__play {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .footer {
    padding: 10px;
  }

  .future {
    padding: 64px 24px 0;
  }

  .future h2,
  .movie h2 {
    font-size: 44px;
  }

  .future__lead {
    margin-bottom: 36px;
    font-size: 18px;
  }

  .future__copy {
    padding: 0;
    font-size: 14px;
  }

  .future__awards {
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    padding: 40px 0 54px;
  }

  /* 「900px以下のとき、ロゴが被ってしまうので SPと同じ縦組みに」。
     ロゴ → CONTENTS → ナビゲーション → SNSロゴ の縦並びを 900px 以下でも適用。
     SP (max-width:768px) と同じ flex-column + order 戦略に揃える。 */
  .footer__panel {
    position: relative;
    min-height: auto;
    border-radius: 28px;
    padding: 32px 28px;
    background: var(--red, #e03a3a);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  /* 上半分の青背景は SP と同じく上に被せて下端をシェブロンに */
  .footer__panel::before {
    width: 100%;
    height: 320px;
    background: #27a2e5;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  }
  /* 背景(::before)より前面に */
  .footer__brand img,
  .footer__contents,
  .footer__sns,
  .footer__copyright,
  .footer__top {
    position: relative;
    z-index: 1;
  }
  /* brand を contents 化して img/sns/copyright を panel 直下の flex item に */
  .footer__brand {
    display: contents;
  }
  .footer__brand img {
    order: 1;
    width: min(320px, 60%);
    height: auto;
    margin: 0 0 0 -5px;
  }
  .footer__contents {
    order: 2;
    position: static;
    inset: auto;
    margin-top: 52px;
    padding: 0;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    z-index: 2;
  }
  .footer__contents-title {
    margin-bottom: 20px;
  }
  .footer__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-left: 1px dashed #fff;
    padding: 0 0 0 28px;
    margin-left: 2px;
    width: 100%;
    font-size: 16px;
    /* 「PCと合わせて 500→700」 */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
    font-feature-settings: "palt" 1;
  }
  .footer__nav a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0;
    height: auto;
    border-bottom: 0;
  }
  .footer__nav a::before {
    background: #fff;
    width: 6px;
    height: 6px;
    margin: 0;
    top: 0;
    flex: none;
  }
  /* SNS は左揃え + 上余白で離す */
  .footer__sns {
    order: 3;
    margin-top: 64px;
    justify-content: flex-start;
    gap: 12px;
    align-self: flex-start;
  }
  .footer__copyright {
    order: 4;
    margin-top: 18px;
    text-align: left;
    align-self: flex-start;
  }
  /* PAGE TOP は右上に縦書きピル */
  .footer__top {
    position: absolute;
    top: 36px;
    right: 28px;
    inset: auto 28px auto auto;
    bottom: auto;
    z-index: 3;
  }
}


/* === concat: src/styles/sp-menu.css === */
/* ============================================================
 * Hamburger button + SP menu overlay
 * デフォルトでは非表示。SP メディアクエリで display: flex に切替
 * ============================================================ */
.header__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transition:
    transform 240ms ease,
    opacity 240ms ease;
}
.header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* === SP MENU (Figma node 2154-13354 準拠) ===
   赤背景フルスクリーン、SwitchBot ロゴ + 黒丸 CLOSE ボタン、
   メニュー項目 (最初 2 つは商品サムネ円付き)、SNS + copyright */
.sp-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--red);
  /* 初期は右にオフスクリーン (translateX 100%) で待機 */
  transform: translateX(100%);
  pointer-events: none;
  /* "ヒュッ" と滑るような spring 系 ease で開閉 */
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0.24, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.sp-menu.is-open {
  transform: translateX(0);
  pointer-events: auto;
}
.sp-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  flex-shrink: 0;
}
.sp-menu__brand {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
}
.sp-menu__close {
  display: grid;
  place-items: center;
  /* 56→48 / font 12→10 */
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #050505;
  color: #fff;
  font-family: "Rubik", "Inter", "Helvetica Neue", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  line-height: 1;
  cursor: pointer;
}
.sp-menu__inner {
  display: flex;
  flex-direction: column;
  /* Figma SP デザイン: nav幅 279px (375vp内側にキュッと寄せた配置)。
     左右 padding を 48px に増やして内側に詰める */
  padding: 24px 48px 0;
  flex: 1 0 auto;
  box-sizing: border-box;
}
.sp-menu__nav {
  display: flex;
  flex-direction: column;
  font-family: "Zen Maru Gothic", sans-serif;
  /* Figma 仕様: font-size 18px, weight 700, letter-spacing -0.04em */
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
  flex: 1;
}
.sp-menu__nav-item {
  display: flex;
  align-items: center;
  gap: 10px; /* Figma 仕様 */
  padding: 0;
  /* Figma 仕様: 各項目 80px 統一 */
  height: 80px;
  min-height: 80px;
  color: #fff;
  text-decoration: none;
  /* Figma 仕様: 2px dashed rgba(255,255,255,0.6) */
  border-bottom: 2px dashed rgba(255, 255, 255, 0.6);
  background: none;
  transition: opacity 200ms ease;
}
.sp-menu__nav-item:hover,
.sp-menu__nav-item:active {
  opacity: 0.75;
}
.sp-menu__nav-label {
  flex: 1;
  /* text 左寄せ + フォントサイズ少し大きく (見やすく) */
  text-align: left;
  font-size: 18px;
}
/* アイコンは ナビ項目の右端に固定配置。
   product 系 (lock/remote) のみ表示、その他は label のみ */
.sp-menu__product-icon {
  display: grid;
  place-items: center;
  /* Figma 仕様: 48×48 (lock/remote 共通) */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  overflow: hidden;
  /* 右側に寄せる (label が flex:1 なので自動で右端) */
  margin-left: auto;
}
.sp-menu__product-icon img {
  /* contain で contour 維持し、両アイコンで見た目の大きさが揃う */
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sp-menu__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px 28px;
  flex-shrink: 0;
}
/* SP メニュー下部 SNS アイコン: PC footer と同じ SVG bg-image スタイルで統一 */
.sp-menu__sns {
  display: flex;
  gap: 12px;
}
.sp-menu__sns a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000;
  transition: transform 200ms ease;
}
.sp-menu__sns a:hover {
  transform: translateY(-2px);
}
.sp-menu__sns a span {
  display: block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}
/* PC footer と同じ SVG (順序: YouTube, X, Facebook, Instagram, LINE) */
.sp-menu__sns a:nth-child(1) span {
  /* YouTube */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}
.sp-menu__sns a:nth-child(2) span {
  /* X */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}
.sp-menu__sns a:nth-child(3) span {
  /* Facebook */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}
.sp-menu__sns a:nth-child(4) span {
  /* Instagram */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.42.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.42 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.42 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.42-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.42a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.42-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.42-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.42C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.85 5.85 0 0 0-2.13 1.39A5.85 5.85 0 0 0 .63 4.14c-.3.76-.5 1.64-.56 2.91C.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91a5.86 5.86 0 0 0 1.39 2.13 5.86 5.86 0 0 0 2.13 1.39c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.86 5.86 0 0 0 2.13-1.39 5.86 5.86 0 0 0 1.39-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.86 5.86 0 0 0-1.39-2.13A5.85 5.85 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.41-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z'/%3E%3C/svg%3E");
}
.sp-menu__sns a:nth-child(5) span {
  /* LINE — 新しい完成アイコン画像を直接背景に (PC footer と同じ) */
  background-image: url("/cdn/shop/files/sns-line-icon.webp");
  width: 100%;
  height: 100%;
  background-size: cover;
}
.sp-menu__copyright {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.3px;
}


/* === concat: src/styles/video-modal.css === */
/* === Video Modal (Figma node 2154-13429 準拠) ===
   暗 overlay + 中央動画フレーム (16:9) + × 閉じるボタン (右上) */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
/* video モーダル開いてる間は sticky header を非表示にして × ボタンと重ならないように */
body.is-video-open .header {
  visibility: hidden;
}
.video-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.video-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  cursor: pointer;
}
.video-modal__close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.video-modal__frame {
  position: relative;
  z-index: 1;
  width: min(94vw, 1100px);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  background: #000;
}
.video-modal__player {
  width: 100%;
  height: 100%;
}
.video-modal__player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (min-width: 769px) {
  .video-modal__close {
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
  }
}


/* === concat: src/styles/responsive.css === */
/* ============================================================
 * Smartphone (≤768px) — 試作 SP レイアウト
 * PC レイアウトをモバイルで自然に縦並びに崩す
 * ============================================================ */
@media (max-width: 768px) {
  :root {
    --section-width: 100%;
  }

  /* === Header === */
  .header {
    padding: 12px 16px;
    height: 56px;
    gap: 8px;
  }
  .header__nav {
    display: none;
  }
  /* SP: header — 「ヘッダーを小さく、ロゴとMENUを中心に揃える」 */
  .header {
    position: relative;
    padding: 8px 16px;
    min-height: 64px;
    gap: 0;
    align-items: center; /* ロゴを縦中央に */
  }
  .header__hamburger {
    /* 56→48 / font 12→10 / ヘッダー縮小に伴い縦中央配置 */
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: #e03a3a;
    color: #fff;
    box-shadow: none;
    display: block;
  }
  .header__hamburger > span:not(.header__hamburger-label) {
    display: none;
  }
  .header__hamburger-label {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Rubik 系フォントは ascender/descender が非対称で text bbox 中央 = 視覚中央でない
       ことが多いため、translateY を -54% (約 1px) で baseline 補正 */
    transform: translate(-50%, -54%);
    display: block;
    /* 旧 .header__hamburger span { height: 2px; background: #fff } を打ち消す */
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    /* Figma 指定: Rubik Black。 font 12→10 */
    font-family: "Rubik", "Inter", "Helvetica Neue", sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #fff;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }
  /* メニューが開いている時は閉じる × にする (× は sp-menu 側に既にある) */
  .header__hamburger[aria-expanded="true"] .header__hamburger-label {
    visibility: hidden;
  }
  .header__hamburger[aria-expanded="true"] > span:not(.header__hamburger-label) {
    display: block;
    position: absolute;
    width: 24px;
    height: 2px;
    background: #fff;
  }
  .header__logo,
  .header__logo img {
    height: 28px;
    width: auto;
  }
  .header__toggle,
  .header__nav {
    transform: scale(0.7);
    transform-origin: right center;
  }

  /* === KV ===
     SP 用 slide (990x1602, portrait q=92)。peek なし、各スライド画面いっぱい。
     一時停止ボタン: 縦書きピル (Figma 準拠) はそのまま、サイズだけ少し小さく。
     プログレスバー: 中央下 (右下にしない、SP は中央が見やすい)。
     高さは slide-item の aspect-ratio (990/1602) で自動決定 */
  .kv {
    height: auto;
    min-height: 0;
    /* SP白余白調整: ヘッダー下〜KVカードの間に白い余白を作る(kv-wrap が白なので
       padding-top で白が見える)。Figma のように KV カードが白背景の中に少し間を
       空けて配置される見え方にする。 */
    padding-top: 20px;
  }
  /* SP も 一時停止ボタン削除済 */
  /* SP: プログレスバーをスライド下の白帯に。absolute → 静的 in-flow に切替、
     白背景フル幅で slide と切れ目を作る。
       PC で margin-top: -58 入れたが SP では悪さするので 0 に戻す。
     SP は slider-bar を非表示にして pill 自体が白帯になる従来挙動。 */
  .kv__slider-bar {
    display: none; /* SP は pill 自身が白帯なので不要 */
  }
  .kv__progress {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 14px clamp(20px, 6vw, 32px);
    background: #fff;
    font-size: 18px;
    gap: 12px;
  }

  /* === ABOUT === */
  .about {
    min-height: auto;
    padding: 56px 0;
  }
  .about__grid {
    /* SP タイルを大きく (Figma SP デザインで thumbnail を viewport 比で大きく見せる)。
       注意: grid 幅は実 cols 幅と一致させないと回転後タイルが片寄って消える */
    --tile-w: 260px;
    --tile-h: 145px;
    --tile-gap: 24px;
    /* 14 cols × (260 + 24 gap) = 3952px */
    width: calc(14 * 260px + 13 * 24px) !important;
  }
  /* SP: 暗幕を青味+軽めに調整 (Figma SP デザインのタイル/チェブロンが鮮やかに見えるように) */
  .about__veil {
    background: rgba(10, 22, 50, 0.32);
  }
  .about__content {
    padding: 0 24px;
  }
  .about__content,
  .about__inner {
    max-width: 100%;
    width: 100%;
  }
  .about h1,
  .about h2,
  .about__title {
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.4;
  }
  .about p {
    font-size: 17px;
    line-height: 2.1;
  }
  .about__subtitle {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
  }
  /* SP: about ロゴを大きく (Figma SP では viewport の 60-65% 占める) */
  .about__logo {
    width: clamp(220px, 64vw, 280px);
  }
  .about__subtitle span {
    font-size: 20px;
  }
  .about__content {
    padding: 60px 24px 56px;
    gap: 28px;
  }
  .about__body {
    /* v2: PC と同方針で軽く (行間広め・文字間隔0)。SP はやや小さめ16px */
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0;
  }
  /* SP 限定の改行を表示 */
  .sp-only-br {
    display: inline;
  }

  /* === Experience (sec02) ===
     SP: PC と同じグレー/mood 背景を維持する (白背景にはしない)。
     背景は base の .experience--lock/--remote の var(--lock-mood-bg, #e9e9e9)
     がそのまま効く。カードを左右ギリギリまで広げてグレーの余白を最小化する。 */
  .experience {
    /* 下 padding を 0 に。白パネルを次セクション(product 赤領域)に直接くっつけ、
       カード下にグレーの隙間が出ないようにする */
    padding: 12px 12px 0;
    min-height: auto;
    transition: background-color 420ms ease;
  }
  /* SP: title 画像を縮めず full-width で大きく出す。
     PC では transform: scale で縮小されていたが、SP デザインでは
     "スマートロックで ひやり を ほっと に" がドンと大きく出るレイアウト。
     SP 専用画像 (Figma SPデザイン提供) は portrait アスペクト比なので
     stage の aspect-ratio を SP 用の値に上書き */
  .experience__title {
    /* SP: タイトル画像 → 街並みバンド → カード。エリア全体を上に寄せ、
       カード(スイッチ)がすぐ来るよう city 下の白余白を詰める。 */
    padding: 0 0 16px;
    margin-bottom: 0;
    transform: none;
  }
  /* タイトル画像のサイドパディング (city-band は full-width にしたいので
     stage 側だけに padding を寄せる) */
  .experience__title-stage {
    margin: 0 8px;
  }
  .experience__title-stage {
    max-width: 100%;
  }
  /* SP: タイトルを縦積みに再レイアウト (Figma SP準拠)。
     PC は絶対配置の横並びだが、SP では同じ素材を grid で縦に並べ替える:
       商品(device) → スマートロックで(line1) → ひやり を ほっと に(line2)
       → ひやり顔 + ほっと顔 (横並び)。街(city-band)は stage の下に flow 済み。
     ※以前は PC の % 座標のまま portrait stage に置いて散らばっていた。 */
  .experience__title-stage--lock,
  .experience__title-stage--remote {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "device device"
      "line1 line1"
      "line2 line2"
      "hiyari hotto";
    justify-items: center;
    align-items: center;
    /* 行間を詰める (スマートロックで↔ひやりをほっとに↔顔 を狭く) */
    gap: clamp(2px, 1vw, 6px) 4px;
    padding-top: 4px;
    /* 街並みバンド(z-index:1)より前面に置き、顔が街並みの上に重なるようにする */
    position: relative;
    z-index: 2;
  }
  /* 絶対配置と PC の scale/座標をリセットして flow に戻す */
  .experience__title-stage--lock .ex-title-text,
  .experience__title-stage--lock .ex-title-char,
  .experience__title-stage--remote .ex-title-text,
  .experience__title-stage--remote .ex-title-char {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    right: auto;
    transform: none;
  }
  /* 「商品の部分をちょっとだけ大きく」: 46% → 58% */
  .experience__title-stage--lock .ex-title-char--device,
  .experience__title-stage--remote .ex-title-char--device {
    grid-area: device;
    width: 58%;
  }
  .experience__title-stage--lock .ex-title-text--line1,
  .experience__title-stage--remote .ex-title-text--line1 {
    grid-area: line1;
    width: 72%;
  }
  .experience__title-stage--lock .ex-title-text--line2,
  .experience__title-stage--remote .ex-title-text--line2 {
    grid-area: line2;
    width: 86%;
  }
  .experience__title-stage--lock .ex-title-char--hiyari,
  .experience__title-stage--remote .ex-title-char--hiyari {
    grid-area: hiyari;
    width: 80%;
    justify-self: end;
  }
  .experience__title-stage--lock .ex-title-char--hotto,
  .experience__title-stage--remote .ex-title-char--hotto {
    grid-area: hotto;
    width: 80%;
    justify-self: start;
  }
  /* (SP / 位置調整ツール確定値) ロック側のみ微オフセットで
     ひやり/ほっと顔・商品をセンター調整。width は上の共通ルールを維持、remote はオフセット無し。
     position:relative は上のリセットで設定済みなので left/top がそのまま効く。 */
  .experience__title-stage--lock .ex-title-char--device { top: 0.2%; }
  /* 顔アートから手が無くなりアンバランスになったため、
     ひやり/ほっと両方を現位置から右へ +15px。remote は対象外。 */
  .experience__title-stage--lock .ex-title-char--hiyari { left: calc(-2.8% + 15px); }
  .experience__title-stage--lock .ex-title-char--hotto  { left: calc(-5.1% + 15px); }
  /* 新3Dシティ (title-bg-left/right) を左右に大きく配置。
     PC と同じく「左右に半分くらい見える」雰囲気 — 街を大きめにして下半分は白カードに
     かぶせ、左右端からも少しはみ出させる (overflow:hidden でクリップ)。 */
  /* SP 街並み (city-tuner 確定値) 390px で位置・サイズを実機調整。
     z-index:1 + ステージ z-index:2 で「街並みは顔の背面」を保証。 */
  .experience__city-band {
    display: block;
    position: relative;
    z-index: 1;
    height: 193px;
    width: calc(100% + 24px);
    /* tuner 確定の「見た目」を実ページ寸法に補正: 街並みを顔の高さまで上げ、
       白カードが街並みを覆い隠さない位置に (実測逆算)。 */
    margin: -174px 0 25px;
    background: none;
    overflow: hidden;
  }
  .experience__city-band::before,
  .experience__city-band::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    height: 100%;
    /* aspect-ratio 不安定回避: 明示 width (image ratio 1.77 を background-size:contain で維持) */
    width: 338px;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .experience__city-band::before {
    left: 0;
    transform: translateX(-55%);
    background-image: url("/cdn/shop/files/title-bg-left.webp");
    background-position: left bottom;
  }
  .experience__city-band::after {
    right: 0;
    transform: translateX(58%);
    background-image: url("/cdn/shop/files/title-bg-right.webp");
    background-position: right bottom;
  }
  /* SP: カード群の背面に白い角丸パネルを敷き、その上端を街並みバンドに
     被せる (Figma SP 準拠)。青/赤カードはこの白パネル内を みちみち に埋める
     ので、パネルの padding がそのまま「青カードの外側の白い枠」になる。 */
  .experience--lock .case-list,
  .experience--remote .case-list {
    background: #fff;
    /* 下端は次セクション(赤領域)に直接くっつけるので角丸無し(フラット) */
    border-radius: 24px 24px 0 0;
    /* 画面いっぱい (experience 左右 padding -12px を相殺) + 上端を街並みに被せる。
       下 padding を厚くして「カード下の白エリア」を作り、そのまま赤領域に接続。 */
    width: auto;
    padding: 18px 16px clamp(48px, 14vw, 96px);
    margin: -22px -12px 0;
    position: relative;
    z-index: 2;
  }
  .experience__title-full {
    /* SP では entrance animation の translateY が画面に残らないよう */
    animation-duration: 700ms;
  }
}

/* ============================================================
 * レスポンシブ統一 カードは「2カラム → 1枚の縦型カード」の
 * 1段階で遷移させる。中途半端な横長 PC カード(旧 769-900px)を撤廃し、
 * SP 縦型カードデザインを ≤900px で採用する。カード内部は % 基準なので
 * max-width を可変(clamp)にするだけでタブレット幅では大きめに、スマホでは
 * 335px に自然スケールする。
 * ※ 元は ≤768px ブロック内にあったカード規則を ≤900px に切り出したもの。
 * ヘッダー/商品/フッター等の SP レイアウトは従来どおり ≤768px のまま。
 * ============================================================ */
@media (max-width: 900px) {
  .case-list {
    grid-template-columns: 1fr !important;
    gap: 28px; /* 旧 20px → 28px (Figma SP デザインに合わせて余白拡大) */
    padding: 0;
  }
  /* === SP case-card: Figma SP デザイン準拠の縦長カード ===
     ・335×367 (aspect-ratio: 335/367) の縦長カード
     ・bg: linear-gradient(180deg, rgba(15,137,204,0.9) 0%, rgba(55,195,210,0.9) 100%)
     ・上部に 303×48 白ピル (左に 36×36 #2F9CD8 番号バッジ + 右にタイトル)
     ・中央に 303×127 ビジュアル (ひやりトグル風シーン)
     ・下部に 295×72 ダッシュ線+本文 (中央寄せ)
     ・コーナー装飾: 左下/右上に "ひやり" Darumadrop One */
  .case-card {
    width: 100% !important;
    /* SP: カードをセクション幅ギリギリまで広げる。
       スマホでは container 幅いっぱい、タブレット幅では最大 480px に頭打ち。
       カード内部は % 基準なので max-width スケールだけで全要素が比例拡縮する。 */
    max-width: min(480px, 100%);
    margin: 0 auto;
    /* SP は絶対配置レイアウト。base の子要素 reserve は使わないため無効化。 */
    --badge-reserve: 0px;
    /* 固定アスペクト比+絶対配置だと説明文(特にhot)が固定高さで
       見切れる。自動高さの flex 縦並び(pill→visual→copy)に変換して全文表示。 */
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 「青いエリアの高さを上げてほしい・スイッチ上下を少し開ける」:
       要素間ギャップを 44→64 に拡大、その後「気持ち縮めて」で 52-68 → 40-56 へ。 */
    gap: clamp(40px, 11vw, 56px);
    border-radius: 28px;
    /* padding-block も拡大して、pillの上 / 本文の下にも余白追加 */
    padding: 24px 16px 32px;
    /* 「枠外に飛び出る」: 顔(knob)やhot-flashがカード枠外へはみ出せるよう
       overflow:visible。bg グラデは border-radius でクリップされるので角丸は維持。 */
    overflow: visible;
    position: relative;
    /* 暗い印象になるので blur/半透明/シャドウは全て削除し、
       クリアで明るい青グラデにする */
    background: linear-gradient(180deg, #0f89cc 0%, #37c3d2 100%);
    box-shadow: none;
  }
  /* ホット状態: 赤グラデに切替 (こちらも不透明・シャドウ無し)
       PC のグラデと統一 (#f43838 → #ff8137) */
  .case-card.is-hot {
    background: linear-gradient(180deg, #f43838 0%, #ff8137 100%);
  }
  /* 上部白ピル: __side が全体 (303×48, top:16, left:16)。
     左に 36×36 青円バッジ (b)、右に短いラベル text (span)。
     Figma 仕様: data.side フィールドが pill タイトル ("家の鍵、閉めたっけ？") */
  .case-card__side {
    position: static;
    order: 1;
    /* カード内 padding(16px) が左右マージンを担うので幅はフル (旧 90.4% は二重マージン) */
    width: 100%;
    /* タイトル18px・長文2行に対応して高さ可変 (最小48px) */
    min-height: 48px;
    height: auto;
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 7px 16px 7px 6px;
    background: #fff;
    border-radius: 28px;
    z-index: 3;
  }
  .case-card__side b {
    /* 「01部分も全体的に大きく、白い丸の縦幅を大きく」: 36→44 / font 16→20
       「01ウェイト1個落として」: 600 → 500 */
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    background: #2f9cd8;
    color: #fff;
    font-family: "Rubik", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .case-card__side span {
    display: block;
    /* Figma: バッジの右に flex-start で配置 = 左寄せ (旧 flex:1 で全幅中央寄せ
       になっていた)。長文は折り返すので shrink 可・grow 無し。 */
    flex: 0 1 auto;
    /* PC では vertical-rl (縦書き) になっているため SP では明示的に横書きへ */
    writing-mode: horizontal-tb;
    font-family: "Zen Maru Gothic", sans-serif;
    /* SP崩れ修正: 18px固定だと最長タイトル(約245px)がピル内(約218px)を超えて
       末尾が「…」省略されていた。カード幅(container)に連動させ、335pxカードでは
       約15px・幅広カードでは18pxまで。これで全タイトルが収まる。 */
    /* Figma SP スペック: Zen Maru Gothic 700 / 18px / center / #014283 / palt。
        「FW 500→700」 */
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: #014283;
    /* 「左に揃えている」: 中央→左寄せ */
    text-align: left;
    font-feature-settings: "palt" 1;
    padding-right: 8px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .case-card.is-hot .case-card__side b,
  .case-card--hot .case-card__side b {
    background: var(--red);
  }
  .case-card.is-hot .case-card__side span {
    color: var(--red);
  }
  /* SP表示崩れ修正: タイトル(ひやり↔ほっと)はサイドピル内で「1枚だけ」表示する。
     直前の `.case-card__side span { display:block }` (詳細度0,1,1) が
     swap ルール `.case-card__side-text--on { display:none }` (0,1,0) を上書きして
     しまい、cold 状態で off/on 両方のタイトルが出て pill が割れて省略表示(…)に
     なっていた。詳細度を 2クラス(0,2,0)以上に上げて swap を再度効かせる。 */
  .case-card__side .case-card__side-text--on {
    display: none;
  }
  .case-card.is-hot .case-card__side .case-card__side-text--off,
  .case-card--hot .case-card__side .case-card__side-text--off {
    display: none;
  }
  .case-card.is-hot .case-card__side .case-card__side-text--on,
  .case-card--hot .case-card__side .case-card__side-text--on {
    display: block;
  }
  /* __copy = 本文ブロック (Frame 1166: 295×72, top:271)。
     border-top dashed + 中央寄せ。内部の __title と __body を inline で連結 */
  .case-card__copy {
    position: static;
    order: 3;
    width: 100%;
    height: auto;
    padding: 20px 0 0;
    /* 「PCと点線色合わせる rgba(255,255,255,.9)」 */
    border-top: 2px dashed rgba(255, 255, 255, 0.9);
    text-align: center;
    font-family: "Zen Maru Gothic", sans-serif;
    /* 「FW 400→500 / size 20→16」 */
    font-weight: 500;
    font-size: 16px;
    line-height: 1.55;
    color: #fff;
    font-feature-settings: "palt" 1;
    z-index: 2;
    min-height: 0;
  }
  .case-card__copy p {
    margin: 0;
  }
  /* __title と __body をそれぞれ block にして「…」「。」「、」区切りの
     文節ごとに改行させる (off は title=1文節 + body=1文節 → 2行)。
     固定高さを撤去したので全文表示される。 */
  .case-card__title,
  .case-card__body {
    display: block;
    color: inherit;
    background: none;
    padding: 0;
    border: none;
    border-radius: 0;
    font: inherit;
    text-align: inherit;
    position: static;
  }
  /* 注記 (※...) は小さめ・別行で全文表示 */
  .case-card__note {
    display: block;
    margin-top: 4px;
    font-size: 0.78em;
    line-height: 1.4;
    opacity: 0.9;
  }
  .case-card__line {
    display: none;
  }
  /* SP では「ほっと」コーナーラベルは非表示 (参考デザインでは未配置)。 */
  .case-card__mood {
    display: none;
  }
  .case-card::after {
    /* SP では「ほっと」コーナーラベル不要 */
    content: none;
    display: none;
  }
  /* SP でも「本番アートシーン演出」(各カード固有の
     *-scene-* を off/on でクロスフェード) を有効化。カード固有シーン 1 枚だけが
     うっすら (opacity .18) 敷かれ、ひやり↔ほっとでファーッと切り替わる。
     PC の .case-card__art-bg ルールをそのまま継承。 */
  .case-card__art-bg {
    display: block;
  }
  /* ビジュアル: 303×127, top:104/367=28.34% に配置。
     Figma SP は白背景 (rounded pill) の上に scene を載せる構造。
     既存 scene 画像はそのまま使い、白 bg 上で contain 表示にして余白に
     白を残す */
  /* SP visual: PC と同じく「透明コンテナ」。丸み・影・スクリーンは
     hiyari-toggle 側 (__clip) が担うので、ここに白pill背景/影/overflow:hidden を
     付けない (これが残っていてグレーのはみ出し & hot-flash 切れの原因だった)。
     高さは中の toggle (aspect 1001/382) が決める。 */
  .case-card__visual {
    position: relative;
    /* SP で __side(タイトルピル) が z:3 のため、base の
       visual z:3 と同値で衝突し、上方向へ飛ぶ hot-flash バーストがピル裏に隠れていた。
       PC と同じ「visual を pill より手前」関係を SP でも保つよう z を引き上げる。 */
    z-index: 5;
    order: 2;
    /* フル幅 (card padding がマージン)。toggle aspect 2.62 で高さ≈幅/2.62。
       幅が広がる分シーンも大きく(spec 303×127 相当)。 */
    width: 100%;
    aspect-ratio: auto;
    height: auto;
    flex: none;
    margin: 0;
    border-radius: 0;
    overflow: visible;
    cursor: pointer;
    background: transparent;
    box-shadow: none;
  }
  .case-card__scene-pic {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .case-card__scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* PC版の claymation track 素材を使用。素材(約1.78)は visual枠(2.39)より縦長なので
       cover で枠いっぱいに敷き、中央の被写体を見せる (Figma SP 同様クロップ表示) */
    object-fit: cover;
    object-position: center 38%;
    transition: opacity 320ms ease;
  }
  .case-card__scene--on {
    opacity: 0;
  }
  .case-card.is-hot .case-card__scene--off {
    opacity: 0;
  }
  .case-card.is-hot .case-card__scene--on {
    opacity: 1;
  }
  /* 「PC版の演出(トグル/エフェクト)をSPにも反映」:
     SP でも PC と同じ hiyari-toggle を表示する。track=シーン画像(カード別 a/b)、
     knob=顔、hot-flash=エフェクト が一括で乗る。静的 scene-pic は隠す。 */
  .case-card__scene-pic {
    display: none;
  }
  .hiyari-toggle {
    display: block;
    /* 「右(新デザイン)のサイズになるように」: 2.1(縦長) → 2.62 で扁平に戻す
       Figma SP のオリジナル比率に近い (PC ベース定義と同じ aspect) */
    aspect-ratio: 2.62 / 1;
  }
  /* 「ヒアリーのボタンが大きくなっているので、それ直してほしい」:
     scale 1.4 が大きすぎたので元のサイズ (1.0) に戻す */
  .hiyari-toggle__knob {
    transform: none;
    transform-origin: center;
  }
}

/* ↑ ここまでが ≤900px のカード規則。以降は従来どおり ≤768px の SP レイアウト。 */
@media (max-width: 768px) {
  /* 「HOTTO/HIYARI 文字をもう少し上に来てほしい、白い余白を上に用意」:
     experience セクション上に白余白を追加 + ticker を白エリア内に上に
     その後「商品上の縦を狭く」で 100→70px に縮める */
  /* 「ちょい縮める/ticker もちょい下」: 70→56 / top 16→28 */
  .experience.experience--lock,
  .experience.experience--remote {
    padding-top: 56px;
  }
  .experience__ticker {
    font-size: 72px;
    top: 28px;
    transform: none;
    opacity: 0.85;
  }
  .experience__ticker-track {
    transform: none;
    gap: 40px;
  }
  /* pill (toggle 風) も font に合わせて拡大: 136×68 → 96×48 */
  .experience__ticker i {
    flex: 0 0 96px;
    width: 96px;
    height: 48px;
    border-radius: 30px;
    transform: translateY(6px);
  }
  .experience__ticker i::before {
    top: 6px;
    width: 36px;
    height: 36px;
  }
  .experience__ticker i:nth-of-type(odd)::before {
    left: 6px;
  }
  .experience__ticker i:nth-of-type(even)::before {
    right: 6px;
  }

  /* === Product (PC 版準拠) ===
     SP: 1列レイアウト。上に visual (赤グラデ + 街並み + 白円 + product + ring)、
     下に copy (白bg + テキスト + ボタン群) */
  .product {
    grid-template-columns: 1fr;
    padding: 0;
    background: #fff; /* copy 列が白 */
  }
  /* visual: 正方形 aspect-ratio 1。bg は透明にして、赤グラデ+街並みは
     同セルに重ねた .product__city が担う (city が visual の兄弟なので
     absolute では visual に張り付かない問題を、grid 重ねで解決)。 */
  .product__visual,
  .product__visual--lock,
  .product__visual--remote {
    /* SP は円と街並み(学校)の間が窮屈なので、
       クラスタは縮小せず枠を少し縦長に (1/1→1/1.1, +約40px) して
       円の上下に各+20px の余白を足す。街並みは下端維持。 */
    aspect-ratio: 1 / 1.1;
    height: auto;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    grid-row: 1;
    grid-column: 1;
    background: transparent;
    overflow: hidden;
    position: relative;
  }
  /* 街並み: visual と同じグリッドセルに重ね、セル全面に「赤グラデ(空) +
     下端に街並みスカイライン」を敷く (PC版同様 下に街並みが見える)。 */
  .product__city {
    grid-row: 1;
    grid-column: 1;
    align-self: stretch;
    position: static;
    width: 100%;
    height: 100%;
    background:
      /* 学校をセンターに (left→center bottom)
          v2 建物を約1/2に縮小 (clamp 60-110 → 30-55px)
          v3 SP は逆に少し大きく → 1.5倍 (clamp 30-55 → 45-82px) */
      url("/cdn/shop/files/product-skyline.webp") repeat-x center bottom / auto clamp(45px, 13.5vw, 82px),
      linear-gradient(180deg, #ed5757 0%, #ffc4b5 100%);
    z-index: 0;
  }
  /* PC の内部レイヤーをそのまま SP でも有効化 (絶対配置のままサイズ%ベースで自然対応) */
  .product__copy {
    padding: 40px 20px 32px;
    background: #fff;
    grid-row: auto;
    grid-column: 1;
  }
  /* 「SMART LOCK を1.5倍＋改行」: 大きくして space で2行折返し */
  .product h2 {
    font-size: clamp(40px, 13vw, 52px);
    line-height: 1.05;
    white-space: normal;
  }
  /* 日本語タイトル 14→18px。
     旧 `.product__subtitle` (specificity 0,1,0) が下の
     `.product p, .product__body` (0,1,1) に負けて 14px のままだったので、
     `.product p.product__subtitle` (0,2,1) で勝たせる。 */
  .product p.product__subtitle {
    font-size: 18px;
    margin: 10px 0 24px;
  }
  /* SP grid 列が .product__body .np (inline-block)
     の min-content により viewport を超えて拡張されていた問題を修正。
     ・.product を minmax(0, 1fr) にして列幅を viewport 内にクランプ
     ・.np を display:inline に戻して Japanese テキストの自然折り返しを許可
     これで visual / city / copy / buy-area すべてが viewport 幅に収まり、
     右側が欠けて見えていた現象が解消する。 */
  .product {
    grid-template-columns: minmax(0, 1fr);
  }
  .product__body .np {
    display: inline;
  }
  /* 「実機で見たときに本文サイズが大きくなるので 14px へ」: 18 → 14
     「行間少し空けて」: line-height 1.7 → 2.0 */
  .product p,
  .product__body {
    font-size: 14px;
    line-height: 2;
  }
  /* 「タグの先頭赤丸を 1/3 ぐらいに小さく」: SP のみ 9 → 4px */
  .product__tags span::before {
    width: 4px;
    height: 4px;
  }
  .product__tags span {
    /* PC のみ左右 14 → 20px / gap 6 → 8px に拡大したので、
       SP は従来通りコンパクト (padding 6px 14px / gap 5px) を維持。 */
    padding: 6px 14px;
    gap: 5px;
  }

  /* bubble-scatter (3 行 marquee)。「1.5倍・幅2倍・セリフ大きく・隙間2倍」。 */
  .bubble-scatter {
    /* 下が窮屈なので 20px 0 → 24px 0 32px */
    padding: 24px 0 32px;
    overflow: hidden;
  }
  .bubble-scatter__row {
    margin: 8px 0;
  }
  /* 吹き出し間隔が広いので 80→40px に詰める */
  .bubble-scatter__track {
    gap: 40px;
  }
  /* 「セリフ 17 → 14」
      「SP padding 10,22 → 8,16」 */
  .bubble-item__text {
    font-size: 14px;
    padding: 8px 16px;
    letter-spacing: 0.4px;
  }
  /* 「SP 角丸 20 → 12 (角丸0の位置は1,2列目で調整)」。
     face-left: 角丸0 を tail 側 (bottom-left = 4列目) に維持。
     face-right: 角丸0 を tail 側 (bottom-right = 3列目) に維持。 */
  .bubble-item--face-left .bubble-item__text {
    border-radius: 12px 12px 12px 0;
  }
  .bubble-item--face-right .bubble-item__text {
    border-radius: 12px 12px 0 12px;
  }
  /* 「顔の高さを全員揃える / サイズは人の頭の高さ基準」:
     高さに固定 + 装飾顔(横長画像)は contain 縦合わせで横幅は image アスペクト比に従う。
     これで「顔の中の頭」が全て同じ縦サイズに揃う。横は装飾顔の方が広くなる。
       デザイン合わせで SP モチーフ高さ 74→56px。 */
  .bubble-item__face {
    width: 56px;
    height: 56px;
    background-size: cover;
  }
  /* +SP補正 SP で 新素材 (family-*/tip-*) が見切れる問題対応。
     ・family-*: 全身画像なので center cover だと頭が切れる → top center に寄せる
     ・tip-*: 上の 56px width 固定で aspect-ratio が無視される → 自動算出に戻す */
  .bubble-item .face-crop--family-a-mother,
  .bubble-item .face-crop--family-a-mother-good,
  .bubble-item .face-crop--family-a-father,
  .bubble-item .face-crop--family-a-father-good,
  .bubble-item .face-crop--family-a-son,
  .bubble-item .face-crop--family-b-mother,
  .bubble-item .face-crop--family-b-mother-good,
  .bubble-item .face-crop--family-b-father,
  .bubble-item .face-crop--family-b-father-good,
  .bubble-item .face-crop--family-b-daughter {
    background-position: center top;
  }
  .bubble-item .face-crop--tip-hotto,
  .bubble-item .face-crop--tip-key,
  .bubble-item .face-crop--tip-flower-1,
  .bubble-item .face-crop--tip-flower-2,
  .bubble-item .face-crop--tip-light,
  .bubble-item .face-crop--tip-tv,
  .bubble-item .face-crop--tip-aircon {
    width: auto;
    background-size: auto 100%;
  }
  /* 装飾顔(手・雲付き) 高さ 56px、横は contain でアスペクト維持 (74→56 に追従) */
  .bubble-item .face-crop--w-hand-left,
  .bubble-item .face-crop--w-hand-right {
    width: 71px;       /* 56 × 260/204 ≒ 71 */
    background-size: auto 100%;
  }
  .bubble-item .face-crop--w-cloud {
    width: 82px;       /* 56 × 300/204 ≒ 82 */
    background-size: auto 100%;
  }
  .bubble-item .face-crop--w-hand-big {
    width: 94px;       /* 56 × 342/204 ≒ 94 */
    background-size: auto 100%;
  }
  .bubble-item .face-crop--hotto-text {
    width: 248px;
    height: 84px;
    background-size: contain;
  }
  .bubble-item {
    gap: 6px;
  }

  /* === Buy Area === */
  .buy-area {
    padding: 24px 16px 32px;
    grid-column: 1;
  }
  /* 購入はこちら。「もう少し小さく」→「左右の顔をもう一回り大きく」
      「FW 500 → 700 (PC同)」
       SP は <br class="sp-only-break"> による
     「おうちにも！\nと思ったら」2行表示を許可するため white-space を normal に。
     face-crop が viewport 右端を超えて欠ける現象を解消。 */
  .buy-area > p {
    font-size: 24px;
    font-weight: 700;
    gap: 10px;
    white-space: normal;
    text-align: center;
    /* SP のみ行間を line-height 2 → 1.4 に調整 */
    line-height: 1.4;
  }
  /* SP のみ改行 <br> を有効化 */
  .sp-only-break {
    display: inline;
  }
  .buy-area > p .face-crop {
    width: 56px !important;
    height: 56px !important;
  }
  .buy-area__buttons {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .buy-button {
    width: 100%;
    max-width: 100%;
    /* ボタン高さ 84 → 76px */
    min-height: 76px;
  }
  /* 英字 18 → 20px */
  .buy-button strong {
    font-size: 20px;
  }
  /* 日本語 13 → 12px (weight 500キープ) */
  .buy-button small {
    font-size: 12px;
    font-weight: 500;
  }
  .buy-button--sale,
  .buy-button--coupon {
    padding-left: 32px;
    padding-right: 32px;
  }
  /* バッジ 48 → 52px */
  .buy-button__badge {
    width: 52px;
    height: 52px;
    font-size: 9.5px;
  }
  .buy-button__campaign-text img {
    height: 18px;
  }

  /* === Movie === */
  .movie {
    min-height: auto;
    padding: 56px 16px 64px;
  }
  .movie::before {
    width: 100vw;
    height: 100%;
  }
  /* SP のみ再生ボタンを 68×68 → 60×60 に縮小 */
  .movie__play {
    width: 60px;
    height: 60px;
  }
  .movie__heading,
  .movie h2 {
    font-size: clamp(28px, 8vw, 42px);
  }
  /* 「画像 width 56→72vw」 */
  .movie__title-svg {
    width: clamp(200px, 72vw, 360px);
  }
  /* 「日本語 17→14px」
       PC と揃えて weight 500 → 700 */
  .movie__heading p {
    font-weight: 700;
    font-size: 14px;
    margin-top: 10px;
  }
  /* 「動画を大きく(左右余白だけ)」+ 左右16px統一 */
  .movie__heading,
  .movie__frames {
    width: 100%;
  }
  .movie__frames {
    grid-template-columns: 1fr !important;
    /* 動画間 20→28 */
    gap: 28px;
    margin-top: 32px;
  }
  /* サムネ↔テキスト gap 15→12 */
  .movie__card {
    gap: 12px;
  }
  /* テキスト font 16→14 */
  .movie__card b {
    font-size: 14px;
  }

  /* === Future === */
  .future {
    grid-template-columns: 1fr;
    /* 「補足文章〜フッターの距離を縮める」: 下 padding を 56→10px に */
    padding: 56px 16px 10px;
    text-align: center;
    min-height: auto;
  }
  .future > * {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* 「英語 12vw → 11vw」 */
  .future h2 {
    font-size: clamp(40px, 11vw, 64px);
    width: auto !important;
  }
  /* 「日本語 16 → 14px」 */
  .future__lead {
    font-size: 14px;
    margin-bottom: 32px;
    width: auto !important;
  }
  .future__heading {
    width: 100% !important;
  }
  .future__house,
  .future__copy {
    width: 100%;
    max-width: 100%;
  }
  /* line-height 1.85→2 / letter-spacing 0.2→0.5 / text-align left→center
       タイトル〜説明 36px / 説明〜画像 32px
      「他と揃えて左右余白16px」
       viewport edge から 16px に。親 .future が
     padding 16px を持つので、ここの horizontal padding は 0 で OK
     (旧 padding 0 16px だと viewport から 32px 開いていた) */
  .future__copy {
    margin: 36px auto 32px;
    text-align: center;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.5px;
    max-width: 100%;
    padding: 0;
  }

  /* SP 用改行を表示、PC 用は非表示 */
  .future__copy--pc { display: none; }
  .future__copy--sp { display: block; }
  .future__stats-no1 b {
    font-size: 36px !important;
  }
  /* 「左右にちょっとだけ余白が出るぐらい大きく」: 75vw → ほぼフル幅
       viewport edge から 16px に。親 .future が
     padding 16px を持つので、scene は width 100% で OK
     (旧 width: calc(100% - 16px) だと viewport から 24px 開いていた) */
  .future__scene {
    width: 100%;
    max-width: 100%;
  }

  /* === Awards (受賞ロゴ列) ===
     SP では 2 列 × 4 段の grid に (7 ロゴ、最後の段は中央寄せ 1 枠) */
  .future__awards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 「2カラム中央揃え」: 各ロゴを各カラムの中央に揃える */
    justify-items: center;
    align-items: center;
    /* 「逆にロゴと文章を縮める」: コンパクトに詰める
        
       親 .future が左右 padding を持っているので、ここで更に左右 padding を加えると
       二重 (=32px) になる。左右 0 にして、外側余白は .future 側に一本化。 */
    gap: 32px 24px;
    padding: 40px 0 48px;
  }
  /* 「拡縮はやめてほしい」: 全部 height 統一して 2 カラムにきれいに並べる。
     「もう一回り大きく」: 78 → 96px */
  .future__award {
    width: auto !important;
    height: 96px !important;
    max-width: 100%;
  }
  /* 7枚目 (GOOD DESIGN) は中央寄せ (2カラム grid で最後の単独要素) */
  .future__award:nth-child(7) {
    justify-self: center;
  }
  .future__notes {
    /* 「補足文章〜フッターの距離を縮める」: 下余白を圧縮
         他SPセクションと揃えて 左右 16px に。
       親 .future が padding 16px (左右) を持つので、ここの horizontal padding は 0。
       (旧 24px は二重で計 40px = はみ出していた) */
    padding: 4px 0 10px;
    /* 「文章を縮める」: 注釈文を小さく */
    font-size: 11px;
    line-height: 1.65;
  }

  /* === Footer (SP - Figma 仕様) ===
     全面青 1 枚パネル / PAGE TOP は右上の縦長赤ピル / CONTENTS 見出し +
     ナビ各行に red ●（左）+ dashed 横区切り線 / SNS 横並び / 著作権 中央下 */
  /*  
     .footer__panel が margin-inline: 16px を持っているので、ここで更に
     左右 padding 16px を加えると二重 (=32px) になる。
     左右 padding を 0 にして、外側余白は panel の margin に一本化。
     上下は 16px のまま維持。 */
  .footer {
    padding: 16px 0;
  }
  /* 「内側padding 上下28/左24/右20」
       外側 padding は 16px 統一済みだが、
     内側のこの padding が 28/24/20 で残っており、ブルー余白が見えていた。
     コンテンツ周り 16px に統一。
       上下 16→28 / 左 16→24 / 右 16 維持 (PAGE TOP は別途調整)。
     の枠余白を再復元。 */
  .footer__panel {
    position: relative;
    min-height: auto;
    border-radius: 28px;
    padding: 28px 16px 28px 24px;
    /* ツートーン背景。下半分=赤(panel bg)、上半分=青(::before)。
       境界は下向きシェブロン。 */
    background: var(--red, #e03a3a);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  /* 青レイヤーを上半分にかぶせ、下端を下向きシェブロンに切る */
  .footer__panel::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    /* 「スマートリモコン と ムービーギャラリーの間から三角」:
       高さ 370 → 320px に縮小。スマートロック+リモコン2項目までを青に、
       ムービーギャラリー以降を赤に。
         青と赤エリアを半々にしたいので 320 → 295px */
    height: 295px;
    /* 「青をFigmaの値に」: Figma footer の青 #27a2e5 (旧 #2787e5) */
    background: #27a2e5;
    /* 中心で折り曲がるシンメトリな V 字 (50%でしっかり折れる、左右同じ高さ 88%)。 */
    clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
    z-index: 0;
  }
  /* 背景(::before)より前面に */
  .footer__brand img,
  .footer__contents,
  .footer__sns,
  .footer__copyright,
  .footer__top {
    position: relative;
    z-index: 1;
  }
  /* brand を display:contents にして img/sns/copyright を panel 直下の flex item に */
  .footer__brand {
    display: contents;
  }
  /* 「ロゴとPAGE TOPが被るので可変 or 220px」: 可変 max 220
       デザインに近づけるため width: min(60%,220px) → min(80%,280px)
      「ロゴ位置を5px左にずらす」: margin-left: -5px */
  .footer__brand img {
    order: 1;
    width: min(80%, 280px);
    height: auto;
    margin: 0 0 0 -5px;
  }
  .footer__contents {
    order: 2;
    position: static;
    inset: auto;
    /* 「CONTENTSをもう少し下に」 32→52 */
    margin-top: 52px;
    padding: 0;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    z-index: 2;
  }
  /* 「CONTENTS下の余白 14→20px」 */
  .footer__contents-title {
    margin-bottom: 20px;
  }
  /* SP もワードマーク画像。横長(約8.5:1)なので height を上げると幅が伸びて
     右上 PAGE TOP ピルに被る。ピル左端より手前で収まる height に抑える
     (390pxで約20px=幅約170px、ピルとの間に余白確保)。 */
  .footer__contents-title img {
    height: clamp(16px, 5.2vw, 24px);
  }
  /* Figma 正式スペック準拠: nav-list は flex column・gap 20px・
     border-left 1px dashed #fff・padding-left 28px。文字は Zen Maru Gothic
     700/16px/line-height140%/palt (負カーニング不要)。bullet は 6px 白丸・gap 12px。
     項目 height 22px × 5 + gap 20px × 4 = 190px (= nav-list height)。
       点線→ナビ間 28→24px。 */
  .footer__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-left: 1px dashed #fff;
    padding: 0 0 0 24px;
    margin-left: 2px;
    width: 100%;
    /* 「日本語 19→16px」
        「PCと合わせて 500→700」 */
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
    font-feature-settings: "palt" 1;
  }
  .footer__nav a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0;
    /* font 拡大に合わせて固定高さ→auto */
    height: auto;
    border-bottom: 0;
  }
  .footer__nav a::before {
    /* 6px 白丸。flex gap(12px) が bullet〜文字の間隔を担うので margin は 0 */
    background: #fff;
    width: 6px;
    height: 6px;
    margin: 0;
    top: 0;
    flex: none;
  }
  /* SNS は左揃え + アイコン拡大 (40→46px、5個が幅に収まる範囲で最大) */
  .footer__sns {
    order: 3;
    /* 「未来〜アイコンの広さを2倍に」 32→64 */
    margin-top: 64px;
    justify-content: flex-start;
    gap: 12px;
    align-self: flex-start;
  }
  /* 「SNS 46×46 → 40×40」 */
  .footer__sns a {
    width: 40px;
    height: 40px;
  }
  .footer__sns a span {
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
  }
  /* コピーライトを左揃えに */
  .footer__copyright {
    order: 4;
    margin-top: 18px;
    text-align: left;
    align-self: flex-start;
  }
  /* PAGE TOP: Figma最新 — 白丸(赤↑) + 白の縦書きテキスト。ピル背景なし。
      「右余白 26→24px」
       PAGE TOP 右余白 24→16px */
  .footer__top {
    position: absolute;
    top: 36px;
    right: 16px;
    inset: auto 16px auto auto;
    width: auto;
    height: auto;
    padding: 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background: transparent;
    color: #fff;
    border-radius: 0;
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    z-index: 3;
  }
  .footer__top span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
  }
  /* 矢印: Figma準拠の細いライン上矢印 (白丸に赤の線矢印)。
      「アローボタンサイズ 20×20px」: ボタン全体 20×20 / 矢印 12×12 */
  .footer__top::after {
    content: "";
    display: block;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e03a3a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6M6 12l6-6 6 6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }

  /* === CAMPAIGN === */
  .campaign {
    min-height: auto;
  }
  .campaign__inner {
    /* 「左右の赤と青の部分は2倍幅」: 8 → 16px each side
        タイトル上余白 28px / ブロック間 gap 32px
        (再修正) 「規約 下の余白 64→48px」: padding-bottom 64 → 48
         (前回 .campaign__block--terms.margin-bottom: 48 にしていたが、その下に
          inner.padding-bottom: 64 が積まれて total 112px になっていたため未対応扱い。
          「64」はこの inner.padding-bottom のことだった。) */
    width: calc(100% - 32px);
    padding: 28px 16px 48px;
    gap: 32px;
  }
  /* (青文字 追加 v2) Chrome DevTools 計測で実測した上で再修正。
     旧 -32 → -50 はオーバーラップ -6px を作ってた (line-height の余裕で見えてただけ)。
     「総ギャップ 40px」を満たす計算式:
       lead.margin-bottom (8) + (inner.gap (32) + title.margin-bottom (X)) + block.padding-top (4) = 40
       → X = -4
     よって -50 → -4 に修正で SP 実測 40px ぴったり。
     (「タイトル下リード文上は 0px」は SP では結果的に違う数字になるが、
      最新の 40px を優先) */
  .campaign__title {
    margin-bottom: -4px;
  }
  /* SP では赤/青背景上の顔切り抜き + 紙吹雪を完全非表示。
     (タイトルに紙吹雪が入ったので背景の紙吹雪は不要)
     ※ 実体クラスは .campaign__confetti-col (旧 .campaign__confetti--* は誤りで効いてなかった) */
  .campaign__faces--cold,
  .campaign__faces--hot,
  .campaign__confetti-col,
  .campaign__confetti-col--left,
  .campaign__confetti-col--right {
    display: none;
  }
  .campaign__text-decor {
    /* (追加 1) SP も少し上げる (0.22 → 0.42)。PC 0.55 より少し控えめ。 */
    opacity: 0.42;
  }

  /* SP はタイトル PC 版 (紙吹雪なし) を隠し、紙吹雪入り画像を表示 */
  .campaign__title-pc {
    display: none;
  }
  /* 「CAMPAIGN タイトル画像幅 calc(100%+32) → calc(100%+64)」 */
  .campaign__title-sp {
    display: block;
    width: calc(100% + 64px);
    max-width: 100vw;
    margin-inline: -32px;
  }
  .campaign__title-en {
    /* CAMPAIGN 文字を画面幅に収める。元は 14vw + letter-spacing で右端切れていた */
    font-size: clamp(44px, 12vw, 70px);
    letter-spacing: -1px;
    line-height: 0.95;
  }
  .campaign__title-jp {
    font-size: 14px;
    letter-spacing: 4px;
  }
  /* SP: 3 つの <p> を inline で 1 つのテキスト流に統合し、各 visual line に
     text-decoration: underline (dashed/red) で独自下線。Figma SP 準拠 */
  /* 5行ぴったり / 文字大きく / 行間広く / 各行に下線 (Figma 参照準拠)
     「lead と キャンペーン概要 pill の間を広げて」: margin-bottom 0 → 40
     「ウェイトサイズを上げて」: font-weight 300 → 500 */
  .campaign__lead {
    text-align: left;
    /* 黒文字 14px
        「リード文の行間がバラついて見える」対策:
         旧 line-height: 2.85 (unitless) は子 <b> (18px) で 18×2.85=51.3px を再計算し、
         b を含む行だけ line-box が膨らんでた。
         em 単位にすると親で 14×2.85=39.9px の computed length が確定し、
         子はそれを継承 → 全行 line-box 39.9px で揃う (Figma 右デザインの綺麗な行間)。 */
    font-size: 14px;
    line-height: 2.85em;
    font-weight: 500;
    margin-top: 0;
    /* lead 下を 40px (8px + gap 32px = 40 total) */
    margin-bottom: 8px;
    margin-left: 0;
    margin-right: 0;
    padding: 0 4px;
    text-decoration-line: underline;
    text-decoration-style: dashed;
    /* PCと同じ #000 20% */
    text-decoration-color: rgba(0, 0, 0, 0.2);
    text-decoration-thickness: 2px;
    text-underline-offset: 14px;
    letter-spacing: -0.3px;
    font-feature-settings: "palt";
  }
  .campaign__lead p {
    display: inline;
    padding: 0;
    margin: 0;
    border-bottom: none;
  }
  /* <b>「スイっと、きもちよく」18px */
  .campaign__lead b {
    font-weight: 700;
    font-size: 18px;
  }
  .campaign__block {
    /* 「ブロック間距離を縮める」: 12 → 4 */
    padding: 4px 0;
  }
  .campaign__pill img {
    max-height: 56px;
  }
  /* 「縮めて」 32 → 8 → 「ちょい開けて」 8 → 16 */
  .campaign__pill {
    margin: 0 auto 16px;
  }
  .campaign__period-img,
  .campaign__prizes-img {
    max-width: 100%;
    padding: 0;
    background: transparent;
  }
  /* 「応募規約エリアを今の0.34〜0.5倍ぐらいに小さく」: scroll高さを圧縮 */
  /* (旧) .campaign__block--terms margin-bottom: 48 → 削除。
     真の修正対象は .campaign__inner.padding-bottom (上記 64→48) だった。 */
  .campaign__terms-card {
    padding: 16px 14px;
    max-width: 100%;
  }
  /* 「もう少し縦に大きく」: 132 → 220 */
  .campaign__terms-scroll {
    max-height: 220px;
  }
  /* 「SP 規約書体 11→12px」。
     旧: 同セレクタが下にもう一回定義されていて (font-size: 11px / padding-left: 14px)
         CSS 後勝ちで 11px が効いてしまっていた。重複側を削除し、こちらに統合。 */
  .campaign__terms li {
    margin-bottom: 6px;
    font-size: 12px;
    padding-left: 14px;
  }
  .campaign__cta {
    margin-top: 8px;
    /* ボタン↔締切 gap 12px (.campaign__cta は flex-column) */
    gap: 12px;
  }
  /* 「PC版の矢印を SP版でも真ん中に向き変えて」:
     SP で PC の 2 枚 STEP 画像を縦並びにし、間に下向き矢印を出す
     「画像と被ってる」: gap 28 → 56 にして矢印用スペース確保 */
  .campaign__steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
  }
  .campaign__step {
    flex: 0 0 auto;
    width: 100%;
    max-width: 360px;
  }
  .campaign__step-img {
    width: 100%;
    max-width: 360px;
  }
  /* SP: 矢印を縦並びの中央(2枚の隙間)に表示。「三角が縦に2個並んでる」:
     ▼ を 改行(\A) で 2 行に積む。white-space: pre で改行有効化。
     「▼ もう少し小さく」: font 22 → 14 */
  .campaign__steps::before {
    content: "▼\A▼";
    white-space: pre;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 0.9;
    text-align: center;
  }
  /* SP: 旧スタック画像は非表示 */
  .campaign__steps-sp {
    display: none;
  }
  /* 「ピンクエリア端から端まで みちみちに」:
     .campaign__inner の 16px padding を負marginで食い込ませて、
     ピンク領域の左端→右端まで点線を伸ばす。 */
  .campaign__cta::before {
    width: calc(100% + 32px);
    height: 8px;
    margin-bottom: 16px;
    margin-left: -16px;
    margin-right: -16px;
  }
  .campaign__cta-button {
    /* SP: Figma spec の縮小版 (font-size 20→18 / padding 24x32 → 20x28) */
    font-size: 18px;
    padding: 20px 28px;
    letter-spacing: 0.05em;
  }
  .campaign__cta-deadline {
    /* SP: Figma spec 14px をベースに少し縮小 (13px) */
    font-size: 13px;
    text-align: center;
  }
  /* SP のみ「：」の後で改行 (PC は 1 行表示)。 */
  .campaign__cta-deadline__sp-break {
    display: inline;
  }
  /* 重複ブロック削除済 (font-size/padding-left は上の li ルールに統合)。
     li::before の SP 値だけ維持。 */
  .campaign__terms li::before {
    width: 4px;
    height: 4px;
    top: 8px;
  }
  /* 「PC は 12px に拡げたが SP は 4 のまま」 */
  .campaign__terms {
    gap: 4px;
  }

  /* === Side switch guide Figma SP 専用寸法で再構成 ===
     pill: 28×102, border-radius 4px / font 12px / tail 12×12 / kid 51×112。
     PC のスタイルから transform スケールではなく明示的に上書き */
  /* 「ちょい下に、セリフがちゃんと人から出るように」: bottom 12→-24 */
  /* bottom -24px だとキャラの足が画面下に 24px
     はみ出して見切れていた (iPhone 12 で実測 faceBottom 688 > vh 664)。
     足を出し切る + 8px の余白を残すよう -24px→8px に引き上げ。 */
  .side-switch-guide,
  .page.is-switch-area .side-switch-guide {
    transform: translate(0, 0);
    transform-origin: bottom right;
    /* コンテンツを見やすく右端ぴったりに right 8→0 */
    right: 0;
    bottom: 8px;
    gap: 0;
  }
  /* 吹き出し本体: 「半分」→ 18→10、その後「もう少し大きく」→ 10→13 */
  .side-switch-guide__text {
    width: 28px;
    min-height: 110px;
    border-radius: 5px;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .side-switch-guide__text::after {
    width: 14px;
    height: 14px;
    bottom: -9px;
  }
  .side-switch-guide__text b {
    font-size: 13px;
    font-weight: 500;
    margin: 1px 0;
  }
  /* SP 77px (height は aspect 192/480 で連動 = 192.5 → 約192) */
  .side-switch-guide__face {
    width: 77px;
    height: 192px;
    aspect-ratio: auto;
    margin-top: 4px;
  }
}

/* === キャンペーン状態(ended)用スタイル (campaign-end テーマから統合) ===
   campaign_status=ended のとき section[data-campaign-status="ended"] で見た目分岐。
   実施中(active)では非表示だが、1コードベースで終了状態にも対応するため保持。 */
.campaign__ended-notice {
  position: relative;
  z-index: 2;
  margin: -16px auto 4px;
  max-width: 672px;
  padding: 24px 48px;
  border-radius: 20px;
  background: #ffc9c9;
  text-align: center;
}
.campaign__ended-notice > p {
  margin: 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: #000;
  font-feature-settings: "palt" 1;
}
/* PC では 2行目を 1 行で表示 → SP-break <br> を隠す */
.campaign__ended-notice__sp-break {
  display: none;
}
.campaign[data-campaign-status="ended"] .campaign__cta-button {
  background: #b4b0b0;
  color: #fbfbfb;
  cursor: default;
  pointer-events: none;
  transform: none;
  box-shadow: none;
  letter-spacing: 1px;
}
.campaign[data-campaign-status="ended"] .campaign__cta-button:hover {
  background: #b4b0b0;
  color: #fbfbfb;
  box-shadow: none;
  transform: none;
}
@media (max-width: 768px) {
  .campaign__ended-notice {
    max-width: 320px;
    margin: -8px auto 8px;
    padding: 12px 24px;
  }
  .campaign__ended-notice > p {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0;
  }
  /* SP のみ 2 行目を 2 行に分割 */
  .campaign__ended-notice__sp-break {
    display: inline;
  }
  .campaign[data-campaign-status="ended"] .campaign__cta-button {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    width: min(100%, 360px);
    padding: 18px 28px;
  }
}