/* ============================================================
   cheero Wireless Open Earphones Smart Pro Danboard ver. LP
   ゼロから新規実装（BONX CSS流用なし）
   ベース1440px / コンテナ最大1280px / 8pxグリッド
   ============================================================ */

:root{
  --color-bg: #ffffff;
  --color-cream: #e8dcc8;       /* 旧セクション背景（クリーム）。2026-09-01の黄色化で未使用になった。
                                   色の一新のときに棚卸しする */
  --color-yellow: #f2cd37;      /* 導入部の箱・スペックの背景（発注者指示 2026-09-01） */
  --color-hero-beige: #f5dac5;  /* ヒーロー写真周辺の色味 */
  --color-text-main: #222222;   /* 見出し濃色 */
  --color-text-body: #6b5a44;   /* 本文ブラウン */
  --color-brown: #5c4534;       /* normal CTAボタン・アクセント */
  --color-green: #237841;       /* pop color CTA・リンク・枠線。2026-09-08にページの緑を1種類に
                                   統一し、#1a6b3c から --color-accent-green と同じ値にした */
  --color-orange: #f08300;      /* アクセントオレンジ */
  --color-blue: #0055bf;        /* 読ませたい大きい文字（発注者指示 2026-09-01） */
  --color-accent-green: #237841;/* 導入部「かわいさ」の緑（発注者指示 2026-09-01）。
                                   2026-09-08の統一で --color-green と同じ値になったが、
                                   指示の出どころが違うため名前は分けたまま残している */
  --color-red: #c91a09;         /* 操作説明・イヤホン左（L）の赤（発注者指示 2026-09-01） */
  --color-gray-bg: #f8f8f8;     /* カテゴリナビ背景 */
  --color-mall-bg: #f2f2f2;     /* 購入の訴求エリアの箱（支給デザイン 2026-09-08） */
  --color-gray-border: #e4e4e4;
  --color-placeholder: #d3d3d3; /* 画像プレースホルダー */
  --color-spec-label-bg: #ece5da;
  --color-footer-bg: #4a3626;
  --color-cheero-text: #4c4c4c; /* cheeroエリア（よくある質問以降）の基本の文字色（発注者指示 2026-09-01） */

  /* 貼りついたページ内メニュー（高さ54px）の下に、リンクで飛んだ先や
     キーボードでフォーカスした要素が潜り込まないための余白。
     この1つの値を html の scroll-padding-top と assets/page-nav.js の
     現在地判定の両方が読む（数値を2か所に書かないため。2026-09-08） */
  --nav-offset: 70px;

  --container-max: 1280px;
  --gap-8: 8px;
  --radius-pill: 999px;
  --radius-card: 16px;
}

*{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  /* リンクで飛んだときも、キーボードのTabでフォーカスが動いたときも、
     貼りついたメニューの下に隠れないよう上に余白を取る。
     セクションだけに効く scroll-margin-top と違い、こちらはページ内の
     すべての移動先に効く（2026-09-08 Codex指摘） */
  scroll-padding-top: var(--nav-offset);
}
/* OS側で「動きを減らす」設定にしている人には、スーッと動くスクロールを出さない
   （2026-09-08 Codex指摘）。ほかの人の見え方は変わらない */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-main);
  font-family: "YakuHanJP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* 日本語の折り返しをきれいにする（発注者指示 2026-08-28・ページ全体）
     word-break: auto-phrase … 意味の切れ目（文節）で折り返す。対応していないブラウザは
                                これまでどおりの折り返しに戻るだけで、崩れることはない
     line-break: strict ……… 小さい「ゃゅょっ」などが行の先頭に来るのを防ぐ */
  word-break: auto-phrase;
  line-break: strict;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
/* 目には見せず、読み上げソフトにだけ伝えたい文字（表の名前など）に使う */
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
button{ font-family: inherit; cursor: pointer; }
ul{ margin: 0; padding: 0; list-style: none; }

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}
/* 中身を中央寄せしたいセクション用（スペック）。もとはHTMLに直接書いていた */
.container-center{ text-align: center; }

/* ---------- ボタン共通 ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-weight: 400;
  font-size: 16px;
  border: none;
  white-space: nowrap;
}
.btn-brown{ background: var(--color-brown); color: #fff; }
.btn-green{ background: var(--color-green); color: #fff; }
.btn-outline{
  background: #fff;
  color: var(--color-green);
  border: 1.5px solid var(--color-green);
  font-weight: 500;
}
/* アイコンをmaskで型抜きし、文字色（currentColor）に自動で追従させる
   （発注者指示 2026-09-02。以前は色が焼き付いたSVGを<img>で読んでいたため、
   hoverで文字と枠がオレンジになってもアイコンだけ元の色のまま残っていた） */
.btn-icon{
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* 絵の形はCSSの中に直接埋め込んである（発注者指示 2026-09-02）。
   別ファイルの読み込みにすると、サーバーを通さずHTMLを直接開いたときに
   ブラウザにブロックされ、アイコンが消えてしまうため。
   SVGの中の stroke='%23ffffff' は「見える色」ではなく型抜きの形を作るための値で、
   実際の色は上の background-color: currentColor（＝文字と同じ色）で決まる。
   形は assets/cart-icon-mask.svg / up-arrow-mask.svg と同じ。
   1か所（--icon）にまとめてあるので、直すときは下の1行だけ直せばよい */
.btn-icon--cart{ --icon: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M5.25001 12.8334C5.57217 12.8334 5.83334 12.5722 5.83334 12.25C5.83334 11.9279 5.57217 11.6667 5.25001 11.6667C4.92784 11.6667 4.66667 11.9279 4.66667 12.25C4.66667 12.5722 4.92784 12.8334 5.25001 12.8334Z' stroke='%23ffffff' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M11.6667 12.8334C11.9888 12.8334 12.25 12.5722 12.25 12.25C12.25 11.9279 11.9888 11.6667 11.6667 11.6667C11.3445 11.6667 11.0833 11.9279 11.0833 12.25C11.0833 12.5722 11.3445 12.8334 11.6667 12.8334Z' stroke='%23ffffff' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M0.583328 0.583313H2.91666L4.47999 8.39415C4.53334 8.66271 4.67944 8.90396 4.89273 9.07565C5.10602 9.24735 5.3729 9.33856 5.64666 9.33331H11.3167C11.5904 9.33856 11.8573 9.24735 12.0706 9.07565C12.2839 8.90396 12.43 8.66271 12.4833 8.39415L13.4167 3.49998H3.49999' stroke='%23ffffff' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.btn-icon--up{ --icon: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M7 11.5V2.5M7 2.5L3 6.5M7 2.5L11 6.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
/* Windowsのハイコントラスト表示では、作り手が指定した背景色が無視されて
   アイコンが消えてしまう。その環境のときだけ、システムのリンク文字色を
   指定し直す（アイコンは6か所ともリンクの中にある） */
@media (forced-colors: active){
  .btn-icon{ background-color: LinkText; }
}

/* ---------- ヘッダー（Figma実測値：デスクトップ 94 / 1 / 87 / 53px、モバイル 50 / 1 / 56 / 53px） ---------- */
.site-header{
  background: #fff;
  position: relative;
  z-index: 100;
}
/* ヘッダー上段：ロゴ1個だけを中央に置く1列グリッド。
   Log In / Cart / Menu と長い商品名は仕様変更で廃止した（2026-08-31 設計書）。
   左右に要素がなくなったため、幅による表示切り替え（旧1230px以下の2列化）も不要になった */
.header-top{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  /* ロゴを54pxにしたぶん上下を32→20pxに詰め、帯の高さを元の94pxに戻している
     （20 + ロゴ54 + 20 = 94。発注者指示 2026-09-02） */
  padding: 20px 40px;
}
.logo{ justify-self: center; }
.logo img{ height: 54px; width: auto; display: block; }

.header-divider{
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
}

/* カテゴリ帯：cheero.shop 本体の指定に合わせている（アイコン40px／ラベル10px／6等分） */
.category-nav{
  width: 100%;
  background: var(--color-gray-bg);
  padding: 16px 0;
}
.category-nav__list{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  justify-items: center;
  /* 中身は1600pxまで広がり、それ以上はグレーの帯だけが伸びる（cheero.shop と同じ） */
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 25px;
}
.category-nav__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  width: 100%;
  max-width: 100px;
}
.category-nav__icon{
  /* 発注者がブラウザで調整した値（2026-09-01。元は40px） */
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.category-nav__item:hover .category-nav__icon{ transform: translateY(-4px); }
.category-nav__icon img{ width: 100%; height: 100%; object-fit: contain; }
.category-nav__label{
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #ed342e;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
@media (prefers-reduced-motion: reduce){
  .category-nav__icon{ transition: none; }
}

.page-nav{
  background: #fff;
  overflow-x: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  /* 画面上部に貼りついたまま最後まで追従する。HTMLでヘッダーの箱の外に出してあるので
     親の箱がページ全体になり、ヘッダーが画面から出たあとも効き続ける（2026-09-08・A案）。
     ヘッダーの中に置いたままだと、ヘッダーの高さ231pxぶんしか貼りつけない */
  position: sticky;
  top: 0;
  /* ヘッダーと同じ100。あとに書かれている側＝メニューが上に重なる。
     右下の追従ボタン（999）はこれより上のまま */
  z-index: 100;
  /* 下を流れる写真やカードとの境目をつける影（2026-09-08 発注者指示）。
     貼りつく前（ページ最上部）でも同じ影が出る */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.page-nav ul{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;   /* ｜の左右を均等にするため、間隔は::beforeのmarginで作る */
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 8px 20px;
  min-width: max-content;
  height: 53px;
}
.page-nav a{
  display: inline-flex;
  align-items: center;
  padding: 8px;
  font-family: "YakuHanJP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-main);
}
.page-nav a.active{ color: var(--color-green); }
/* 項目の間に区切りの｜を入れる。HTMLは触らずCSSだけで出しているので、
   この2つのルールを消せば元の見た目に戻る */
.page-nav li{ display: flex; align-items: center; }
.page-nav li + li::before{ content: "｜"; color: rgba(0, 0, 0, 0.18); margin: 0 8px; }
/* 飛び先が貼りついたメニューに潜り込まないための余白は、セクション個別の
   scroll-margin-top をやめ、html の scroll-padding-top（--nav-offset）に一本化した。
   これでセクション以外（キーボードのフォーカス先など）にも同じ余白が効く（2026-09-08） */

/* ---------- ヒーロー ---------- */
/* 写真帯の高さは、あとから発注者がブラウザで実測して詰められるよう
   このカスタムプロパティ1つだけに集約する（841〜1230pxも含めてこの値がそのまま高さになり、
   1440pxではclampの上限＝630pxになる。2026-09-01に発注者指示で一律40px高くした） */
.hero{
  background: var(--color-bg);
  --hero-slider-height: clamp(460px, calc(47.2vw + 40px), 630px);
}

/* 写真帯：画面端から端まで届く独立した帯。中に商品名2行とスライダーを重ねる */
.hero-visual{
  position: relative;
  width: 100%;
  height: var(--hero-slider-height);
}
/* 商品名の2行。画面には出さない（PCは2026-08-31、840px以下は2026-09-04の発注者指示で
   キャッチに差し替えた）。ただしページの主見出し（h1）なので要素ごと消さず、
   画面から隠すだけにして読み上げソフトと検索エンジンには残す */
.hero-eyebrow{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-weight: 700;
  text-align: center;
}
.hero-eyebrow .accent{ color: var(--color-green); }
.hero-eyebrow-break{ display: inline; }   /* 商品名を2行に分けるための改行。h1はどの画面幅でも
                                             画面に出さなくなったため、いまは見た目に影響しない */

/* ---------- 写真スライダー ---------- */
.hero-slider{
  position: absolute;
  inset: 0;
  background: var(--color-hero-beige);   /* 写真が1枚も読み込めなかったときだけ見える控えめな下地 */
}
.hero-slider__viewport{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-slider__slide{
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-slider__slide picture,
.hero-slider__slide picture img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* JSが動かない・初期化に失敗したときの保険：1枚目だけを見せ、2〜4枚目を縦に並べない */
.hero-slider:not(.is-ready) .hero-slider__slide:not(:first-child){
  display: none;
}
.hero-slider [hidden]{
  display: none;
}
/* is-ready が付いたあとだけ、同じ枠に4枚を重ねて表示を入れ替える */
.hero-slider.is-ready .hero-slider__slide{
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 400ms ease;
}
.hero-slider.is-ready .hero-slider__slide picture img{
  transform: scale(1);
  transition: transform 400ms ease;
}
.hero-slider.is-ready .hero-slider__slide.is-current{
  z-index: 1;
  opacity: 1;
}
/* 切替の瞬間だけ、新しく出す写真をごくわずかに大きい状態から通常倍率へ戻す。
   常時拡大し続けるKen Burns型ではない */
.hero-slider.is-ready .hero-slider__slide.is-entering picture img{
  transform: scale(1.04);
}

/* スマホ用のキャッチ（840px以下でだけ、写真の上に置く）。PCでは出さない */
.hero-catch-sp{ display: none; }

/* PCで1枚目に重ねるキャッチ。写真ではなく「写真帯」を基準に置くので、
   ブラウザ幅がいくつでも同じ位置に出て、切れることがない */
.hero-catch{
  position: absolute;
  left: 50%;
  top: 13%;
  transform: translateX(-50%);
  width: 46%;
  max-width: 726px;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* 左右の矢印：角丸四角の枠＋シェブロンのみ。枠は最初から透明で持たせ、
   hover/focus時に位置がずれないようにする（既存のモールロゴと同じ流儀） */
.hero-slider__prev,
.hero-slider__next{
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-green);
}
/* 矢印はLucide Icons（ISCライセンス）の arrow-left / arrow-right をHTMLに直接書き込んでいる。
   線の色は button の color を currentColor で受け継ぐ */
.hero-slider__icon{ display: block; width: 24px; height: 24px; }
.hero-slider__prev{ left: 16px; }
.hero-slider__next{ right: 16px; }
.hero-slider__prev:disabled,
.hero-slider__next:disabled{
  opacity: 0.4;
  cursor: default;
}
.hero-slider__prev:focus-visible,
.hero-slider__next:focus-visible{
  outline: none;
  border-color: var(--color-green);
}
/* 画面には見せず、読み上げソフトにだけ現在位置・操作結果を伝える */
.hero-slider__status{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* body の word-break: auto-phrase を入れると、ブラウザが「この箱は最低でも文節1つ分の
   幅が要る」と判断して箱が縮まなくなり、横にはみ出すことがある（特徴・機能セクションで発生済み）。
   横並び・重ね配置のまとまりと、その直接の子に「縮んでよい・広がりすぎない」ことを明示する */
.buy-ctas,
.mall-panels,
.mall-links,
.hero-slider__viewport,
.buy-ctas > .btn,
.mall-panels > .mall-panel,
.mall-links > a,
.hero-slider__viewport > .hero-slider__slide,
h1.hero-eyebrow{
  min-width: 0;
  max-width: 100%;
}

/* ---------- 写真下の白地案内 ---------- */
/* ヒーロー下と、よくある質問の下で同じ並びを使うための共通指定（2026-09-08）。
   リード文 → ボタン2つ → モールの箱、を縦に中央そろえで積む */
.buy-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-inner{
  max-width: min(var(--container-max), 100%);
  min-width: 0;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.buy-lead{
  font-size: 17px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0.25px;
  margin: 0 0 32px;
  max-width: min(560px, 100%);
  min-width: 0;
}
.buy-ctas{
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

/* 動きを減らす設定：ズーム・フェードの遷移を止める（手動操作は残す。JS側も自動送りを止める） */
@media (prefers-reduced-motion: reduce){
  .hero-slider.is-ready .hero-slider__slide,
  .hero-slider.is-ready .hero-slider__slide picture img{
    transition: none;
  }
}

/* ---------- セクション共通 ---------- */
.section{ padding: 80px 24px; }
.section-cream{ background: var(--color-yellow); }   /* クラス名は元のまま。中身は黄色（発注者指示 2026-09-01） */
.section-gray{ background: var(--color-gray-bg); }
.section-title{
  text-align: center;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.88px;
  /* メイン商品エリア（導入部〜TIPS）でしか使っていないクラスなので、ここでまとめて指定する
     （発注者指示 2026-09-01） */
  color: var(--color-brown);
  margin: 0 0 24px;
}
.section-eyebrow{
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--color-brown);
  margin: 0 0 8px;
}
.section-rule{
  width: 32px;
  height: 4px;
  background: var(--color-orange);
  margin: 0 auto 48px;
  border-radius: 2px;
}

/* ---------- 動画プレースホルダー ---------- */
.video-placeholder{
  background: var(--color-placeholder);
  border: 1px solid var(--color-green);
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-placeholder iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Smart Pro Danboard ver.とは ---------- */
/* クリーム色の角丸の箱。このセクション専用で、
   スペック・よくある質問の .section-cream（背景ベタ）には影響させない */
.intro-box{
  max-width: var(--container-max);
  margin: 0 auto;
  background: var(--color-yellow);
  border-radius: 16px;
  /* 1280px以上でデザインどおりの80px。狭くなるほどなめらかに詰まり、
     文章側の列が狭くなり過ぎないようにする（下限48px） */
  padding: clamp(48px, 6.25vw, 80px);
}
.intro-lead{
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-brown);
  margin: 0 0 48px;
}
.intro-block{
  display: grid;
  grid-template-columns: 4fr 3fr;
  /* 余白と同じ考え方。1280pxで80px、狭くなるほど詰まる */
  gap: clamp(48px, 6.25vw, 80px);
  align-items: center;
}
.intro-heading{
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.64px;
  margin: 0 0 16px;
  color: var(--color-brown);
}
.intro-heading .accent{ color: var(--color-blue); font-weight: 900; }
/* 「かわいさ」。太さは見出しのまま（700）。色だけ指定を受けている */
.intro-heading .accent-green{ color: var(--color-accent-green); }
.intro-text{
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.25px;
  margin: 0 0 24px;
  color: var(--color-brown);
}
.video-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-green);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.32px;
}
.video-link-icon{ width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- 特徴・機能 ---------- */
.features-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 48px;
}
.feature-row{
  display: grid;
  /* デザイン準拠：1列＝動画と同じ500px。2列＋gap48pxの塊を中央に置く（1440時は計1048px） */
  grid-template-columns: repeat(2, minmax(0, 500px));
  justify-content: center;
  gap: 48px;
  align-items: stretch;
}
/* body の word-break: auto-phrase を入れると、ブラウザが「この箱は最低でも文節1つ分の
   幅が要る」と判断して箱が縮まなくなり、375pxでページごと横にはみ出す。
   ここで「細くなってよい」と伝えて元の幅に戻す（折り返しのきれいさはそのまま） */
.features-grid > *,
.feature-row > *,
#features .feature-item{ min-width: 0; }

#features .feature-row:nth-child(odd) > .feature-item.has-media { order: -1; }
#features .feature-item{ display: flex; flex-direction: column; justify-content: center; }
#features .feature-item.has-media{ align-items: center; justify-content: center; }
#features .video-placeholder{ width: 100%; max-width: 500px; margin: 0 auto; }
/* 動画のかわりに写真を置く枠。幅は動画と同じ、角丸はTIPSと同じ16px */
#features .feature-item.has-media img{
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-card);
}
.feature-tag{
  position: relative;
  display: inline-block;
  background: var(--color-yellow);
  color: var(--color-brown);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.36px;
  padding: 10px 24px;
  border-radius: 8px;
  margin-bottom: 24px;
  align-self: center;
  z-index: 0;
}
.feature-tag::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--color-yellow);
  z-index: 0;
}
.feature-title{
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.72px;
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--color-brown);
}
.feature-title .accent,
.feature-sub .accent{ color: var(--color-blue); font-weight: 900; font-size: 36px; display: inline-block; line-height: 1.4; }
/* 大きい青のうしろに続く言葉だけ、見出しと同じ24pxにする（指示 2026-09-04） */
.feature-sub-lg{ font-size: 24px; }
.feature-sub{
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.72px;
  color: var(--color-brown);
  margin: 0 0 24px;
}
/* デザイン画像に合わせて横長に。スペックの「詳しく見る」だけに限定し、
   他セクションのボタン（Cheeroって？・フローティングCTA）には波及させない。
   2026-09-01の発注者指示で、枠のボタンから青い塗りのボタンに変えた（枠線は持たせない） */
#spec .spec-card .btn-outline{
  min-width: 240px;
  padding: 12px 56px;
  font-size: 14px;
  background: var(--color-blue);
  color: #fff;
  border: none;
}
/* タグの三角より前面に置き、将来余白や文字サイズが変わっても重ならないようにする */
#features .feature-title,
#features .feature-sub{ position: relative; z-index: 1; }

/* ---------- 音だけじゃなく、かわいさも本気 ---------- */
/* 「音だけじゃなく、かわいさも本気。」の見出しまわり。
   もとはHTMLに直接書いていた指定をここへ移した */
.cute-head{ text-align: center; margin-top: 96px; }
.cute-head .section-title{ margin-bottom: 0; }
.cute-block{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 48px;
}
/* 差し替え用の画像。同名で上書きすれば入れ替わる。
   height:auto で、別の縦横比の写真に差し替えても歪まない */
.cute-block img{ width: 100%; height: auto; border-radius: var(--radius-card); }
.cute-heading{ font-size: 22px; font-weight: 800; margin: 0 0 16px; color: var(--color-brown); }
.cute-text{ font-size: 15px; color: var(--color-brown); }

/* ---------- スペック（2カラーカード） ---------- */
.spec-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}
.spec-card{
  background: #fff;
  border-radius: var(--radius-card);
  padding: 32px;
  text-align: center;
}
.spec-card img{
  width: 240px;
  height: auto;   /* HTML側の height 属性を打ち消す。無いと縦が元画像の高さのまま残る */
  margin: 0 auto 24px;
}
.spec-card .variant-label{ color: #767676; font-size: 14px; margin-bottom: 8px; }
.spec-card .spec-title{ font-size: 22px; font-weight: 700; margin: 0 0 16px; color: var(--color-brown); }
.spec-card hr{ border: none; border-top: 1px solid var(--color-gray-border); margin: 0 0 16px; }
.spec-card ul{ text-align: left; margin: 0 0 24px; font-size: 14px; }
.spec-card li{ margin-bottom: 8px; color: var(--color-brown); }
.spec-card li::before{ content: "・"; color: var(--color-orange); }
/* 2026-09-08にHTMLから「価格は近日発表」を外したため、いまは使われていない。
   あとから金額を入れる可能性があるので残してある */
.spec-card .price{ font-weight: 700; color: var(--color-text-body); margin-bottom: 24px; }

/* ---------- Bluetooth/操作説明ブロック ---------- */
/* Bluetooth・操作説明の白い箱。デザインPNG（PC・1440基準）どおりの1カラム構成。
   以前あった右半分の写真はデザインから外れたため、画像なしに作り替えた */
.bt-block{
  width: 1040px;
  max-width: 100%;   /* 画面が狭いときにはみ出さないための保険 */
  margin: 80px auto;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 80px 48px 64px;
  text-align: center;
}
/* 見出しはPNGと同じ位置で2行に折り返るよう、幅を絞って中央に置く */
.bt-heading{
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 32px;
  color: var(--color-brown);
}
.bt-sub{ font-size: 15px; font-weight: 700; margin: 0 0 14px; color: var(--color-brown); }
/* 左右2枚の枠を中央に並べる */
.bt-controls{
  display: flex;
  justify-content: center;
  gap: 32px;
}
.bt-control-card{
  width: 280px;   /* 14pxで「音声アシスタント起動」が1行に収まる幅 */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px;
  text-align: left;
}
.bt-control-title{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 24px;
  color: var(--color-brown);
}
.bt-control{ display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--color-brown); }
.bt-control + .bt-control{ margin-top: 13px; }
.bt-key{
  background: var(--color-orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}
/* 操作の丸みのある札は左右で色を分ける。左（L）＝赤、右（R）＝青（発注者指示 2026-09-01） */
.bt-controls .bt-control-card:nth-child(1) .bt-key{ background: var(--color-red); }
.bt-controls .bt-control-card:nth-child(2) .bt-key{ background: var(--color-blue); }
.bt-note{ font-size: 14px; color: #767676; margin: 20px 0 0; }

/* ---------- 主な仕様テーブル ---------- */
/* 表の外枠と行の区切りは #cccccc、角丸なし（発注者指示 2026-09-01） */
.spec-table-wrap{
  background: #fff;
  border: 1px solid #cccccc;
  margin-top: 48px;
}
.spec-table{ width: 100%; border-collapse: collapse; }
.spec-table tr{ border-bottom: 1px solid #cccccc; }
.spec-table tr:last-child{ border-bottom: none; }
.spec-table th, .spec-table td{
  text-align: left;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--color-brown);
  vertical-align: top;
}
.spec-table th{
  background: #f2f2f2;
  width: 240px;
  font-weight: 400;
}

/* ---------- TIPS ---------- */
.tips-block{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 48px;
}
.tips-block img{ height: auto; border-radius: var(--radius-card); }   /* height: auto の理由は .spec-card img と同じ */
.tips-item{ margin-bottom: 24px; }
.tips-item:last-child{ margin-bottom: 0; }   /* 最後の1つだけ余白が残り、写真との上下中央がずれるため */
.tips-item h3{ font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--color-brown); }
.tips-item p{ font-size: 14px; color: var(--color-brown); margin: 0; }

/* PCのときだけ、TIPSの左右バランスを整える（指示 2026-09-04）。
   ブロックを1040pxにして中央に置く＝「操作はひとつのボタンで、かんたん。」の
   白い箱（.bt-block）と同じ幅にそろえた。
   さらに中のテキストは、左揃えのままかたまりごと中央に置く。
   これで右だけに寄っていた249pxの空きが、左右76pxずつに分かれる。
   840px以下は写真とテキストが縦積みになるため、効かせない */
@media (min-width: 841px){
  .tips-block{ width: 1040px; max-width: 100%; margin-inline: auto; }
  .tips-block > div{ width: max-content; max-width: 100%; margin-inline: auto; }
}

/* ---------- FAQ ---------- */
/* セクションの上端・下端に、ヘッダー下の区切り線（.header-divider）と同じ見た目の線を
   画面いっぱいに入れる（発注者指示 2026-09-02）。.section は幅100%なので border で足すのが最短 */
.faq-section{
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.faq-block{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}
.faq-heading{ font-size: 32px; font-weight: 700; letter-spacing: 0.36px; color: var(--color-cheero-text); }
/* FAQは<details>で開閉する（JavaScriptなし。キーボード操作・読み上げにも対応） */
.faq-item{
  /* 背景を白にしたぶん、カードの境目が消えないよう枠線を濃くする（発注者指示 2026-09-01。元は0.1） */
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  margin-bottom: 8px;
  background: #fff;
}
.faq-q{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;   /* 標準の三角マークを消す（Firefox等） */
  color: var(--color-cheero-text);
}
.faq-q::-webkit-details-marker{ display: none; }  /* 同上（Safari・旧Chrome） */
.faq-q:focus-visible{ outline: 2px solid var(--color-green); outline-offset: 2px; }
.faq-item .q-mark{ color: var(--color-blue); font-weight: 700; margin-right: 8px; }
.faq-item .chevron{ color: var(--color-cheero-text); transition: transform 0.2s ease; }
.faq-item[open] .chevron{ transform: rotate(180deg); }
.faq-a{
  margin: 0;
  padding: 0 32px 24px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-cheero-text);
}
.faq-a .a-mark{ color: var(--color-orange); font-weight: 700; margin-right: 8px; }
@media (prefers-reduced-motion: reduce){
  .faq-item .chevron{ transition: none; }
}

/* ---------- 購入の訴求エリア（モール一覧） ---------- */
/* ヒーロー下と、よくある質問の下の2か所で同じ見た目を使う（支給デザイン 2026-09-08）。
   モールごとに色ちがいで2つずつリンクがあるため、色でパネルを分けている。
   支給デザインの箱は1280pxだが、他セクションと左右をそろえるため、
   親（.container / .hero-inner）の幅いっぱい＝1440pxのとき1232pxにしている
   （2026-09-08に発注者が判断） */
.mall-box{
  width: 100%;
  box-sizing: border-box;
  background: var(--color-mall-bg);
  border-radius: 24px;
  padding: 40px;
  text-align: center;
}
.mall-box-title{
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-brown);
  margin: 0 0 24px;
}
/* パネルは、1つあたり540px以上とれるときだけ左右に並べる。
   それより狭いと縦2段になり、ロゴ4つが大きいまま出る。
   固定で2列にしていたときは、841〜1230pxでロゴが20px幅まで潰れていた（2026-09-08に修正）。
   min(540px, 100%) にしているのは、画面が540pxより狭いときにはみ出さないため */
.mall-panels{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(540px, 100%), 1fr));
  gap: 24px;
}
.mall-panel{
  border-radius: 16px;
  padding: 16px;
}
.mall-panel--normal{ background: var(--color-brown); }
.mall-panel--pop{ background: var(--color-green); }
.mall-panel-label{
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 12px;
}
.mall-links{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
/* 枠は最初から透明で持たせ、マウスオーバーで色が付いても位置がずれないようにする
   （既存のボタン・矢印と同じ流儀） */
.mall-links a{
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 8px 24px;   /* 左右の余白でロゴの大きさが決まる。支給デザインの高さ119pxに合わせた */
}
/* 縦2段のときはボタンが横に広がるため、ロゴだけが大きくなりすぎないよう上限を付ける */
.mall-links img{ width: 100%; height: auto; max-width: 160px; }

/* 640px以下はロゴを2×2に折り返す。ここより狭いと4つ横並びでは1つあたりが
   120pxを切り、ロゴが読めない大きさになるため（541pxで45px幅まで潰れていた。
   2026-09-08に540px→640pxへ引き上げ） */
@media (max-width: 640px){
  .mall-links{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ---------- Cheeroのダンボーシリーズ ---------- */
/* 支給デザイン（2026-09-01）でセクションごと1枚のベージュの箱になった。
   背景の #e8dcc8 は、ヒーロー回で使わなくなっていた --color-cream をそのまま再利用している */
.series-block{
  background: var(--color-cream);
  border-radius: var(--radius-card);
  padding: 64px;
}
.series-title{
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-cheero-text);
  margin: 0 0 48px;
}
/* ルーツの紹介。ベージュの箱に直接置くので、カード自体の背景と内側の余白は持たせない */
.series-card{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 32px;
  align-items: center;
}
.series-card img{ height: auto; border-radius: 12px; }   /* height: auto の理由は .spec-card img と同じ */
.series-card-eyebrow{ font-size: 14px; color: var(--color-cheero-text); margin: 0 0 4px; }
.series-card-title{ font-size: 20px; font-weight: 700; color: var(--color-cheero-text); margin: 0 0 16px; }
/* 見出し下の短いオレンジの線。共通の .section-rule は中央寄せなので、ここは左寄せで別に作る */
.series-card-rule{
  width: 32px;
  height: 4px;
  background: var(--color-orange);
  border-radius: 2px;
  margin: 0 0 24px;
}
.series-card-text{ font-size: 14px; color: var(--color-cheero-text); margin: 0; }

.series-cta-block{
  text-align: center;
  padding: 64px 0 0;
}
.series-cta-title{ font-size: 26px; font-weight: 700; color: var(--color-cheero-text); margin: 0 0 32px; }
/* 商品カード4枚の見た目は「Cheeroって？」のカードと同じ。作りが同じなので指定をまとめてある
   （＝下の .about-card 側をいじると、こちらの見た目も一緒に変わる） */
.series-product-title{ font-size: 16px; font-weight: 700; margin: 0 0 16px; color: var(--color-cheero-text); }

/* ---------- Cheeroって？ ---------- */
.about-block{
  background: var(--color-gray-bg);
  border-radius: var(--radius-card);
  padding: 64px;
  text-align: center;
}
.about-title{ font-size: 28px; font-weight: 700; margin: 0 0 24px; color: #666666; }
.about-text{ font-size: 15px; color: #666666; margin: 0 0 32px; }
/* このセクションの枠のボタン（公式ショップを見る）だけ黒。
   他のセクションの btn-outline は緑のまま（発注者指示 2026-08-28） */
.about-block .btn-outline{
  color: #333333;
  border-color: #333333;
}
.about-cta{ margin-bottom: 48px; }
/* カードは1枚270px以上とれるときだけ4列。それより狭いと2列2行にする。
   ずっと4列のままだと、841pxで1枚180pxまで細くなり、商品名が4行に折れて
   ボタンまわりも窮屈になっていた（2026-09-08に修正）。
   1200pxがちょうど1枚270px＝1440pxと同じ大きさになる境目 */
.about-grid,
.series-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (min-width: 1200px){
  .about-grid,
  .series-grid{ grid-template-columns: repeat(4, 1fr); }
}
/* 480px以下は1列に戻す。カードの外側の余白が大きく、375pxでは2列にすると
   1枚128pxまで細くなって商品名が5行に折れてしまうため（2026-09-08に発注者が判断） */
@media (max-width: 480px){
  .about-grid,
  .series-grid{ grid-template-columns: 1fr; }
}
.about-card,
.series-product-card{
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
}
/* 商品写真は元画像が900x900の正方形。枠も1:1にそろえることで、
   上下が切り落とされずに全体が見える（発注者指示 2026-08-17）。 */
/* 写真も商品ページへのリンク（瞳さん指示 2026-09-04）。
   リンクは初期状態だと行内扱いで写真の下に余白が出るため block にする。
   overflow: hidden は、hoverで拡大した写真がカードの外へはみ出さないための蓋 */
.about-card .card-photo-link,
.series-product-card .card-photo-link{ display: block; overflow: hidden; }
/* マウスを乗せると写真がゆっくり寄る（瞳さん指示 2026-09-04）。
   倍率と速さはヒーローの切替演出と同じ 1.04倍・400ms にそろえてある */
.about-card .card-photo-link img,
.series-product-card .card-photo-link img{
  transition: transform 400ms ease;
}
.about-card .card-photo-link:hover img,
.about-card .card-photo-link:focus-visible img,
.series-product-card .card-photo-link:hover img,
.series-product-card .card-photo-link:focus-visible img{
  transform: scale(1.04);
}
/* 動きを減らす設定：拡大を止める */
@media (prefers-reduced-motion: reduce){
  .about-card .card-photo-link img,
  .series-product-card .card-photo-link img{ transition: none; }
  .about-card .card-photo-link:hover img,
  .about-card .card-photo-link:focus-visible img,
  .series-product-card .card-photo-link:hover img,
  .series-product-card .card-photo-link:focus-visible img{ transform: none; }
}
.about-card img,
.series-product-card img{
  width: 100%;
  height: auto;   /* HTML側の height 属性を打ち消す。これが無いと縦だけ元画像の高さのまま残る */
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}
.about-card-body,
.series-product-body{
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.about-card-body h3{ font-size: 16px; font-weight: 700; margin: 0 0 8px; color: #666666; }
.about-card-cat{ font-size: 14px; color: #666666; margin: 0 0 12px; }
.about-card-desc{ font-size: 14px; color: #666666; margin: 0 0 16px; }
/* 「商品詳細へ」：黒い塗りの小さめボタン。カード下端でそろえて左右中央に置く
   （発注者指示 2026-08-28・デザイン上128px×40px・文字14px） */
.btn-dark{
  background: #333333;
  color: #fff;
}
.about-card .btn-dark,
.series-product-card .btn-dark{
  width: 128px;
  height: 40px;
  padding: 0;
  font-size: 14px;
  margin: auto auto 0;
}

/* ---------- フッター ---------- */
.site-footer{
  background: var(--color-footer-bg);
  color: #fff;
  padding: 64px 24px 40px;
  text-align: center;
}
.footer-logo{
  width: 96px;
  height: 96px;
  background: #fff;
  border-radius: 16px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 白い四角ぜんたいを押せるようにする（画像だけだと当たり判定が小さいため。2026-09-09 発注者指示） */
.footer-logo a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.footer-logo img{ height: 76px; }
.footer-copy{ font-size: 11px; font-weight: 400; letter-spacing: 0.22px; opacity: 1; }

/* ---------- フローティングCTA ---------- */
.floating-cta{
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 8px;
  z-index: 999;
}
.floating-cta .btn{ padding: 12px 20px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.floating-cta .btn-outline{ background: #fff; }

/* ============================================================
   タブレット（Studio: 840px）以下
   ============================================================ */
/* タブレット以下：Studioのタブレット幅 840px を境にする */
@media (max-width: 840px){
  /* 840px以下は、写真に重ねるキャッチを消して、代わりに .hero-catch-sp を
     写真の上（上方）に見出しとして出す（指示 2026-09-04） */
  .hero-catch{ display: none; }
  .header-top{ height: 50px; padding: 0 16px; }
  /* 幅は固定せずheightから自動計算（新しいロゴ画像は縦横比が旧画像と違うため、
     幅を固定すると引き伸ばされてしまう）。高さは18→34px。新しい画像は絵の周りに
     余白が入っているぶん、同じ18pxのままだと見た目が半分ほどに縮むため */
  .logo img{ height: 34px; width: auto; }
  /* カテゴリ帯：cheero.shop のタブレット幅と同じ指定 */
  .category-nav{ padding: 10px 0; }
  .category-nav__list{ gap: 15px; padding: 0 20px; }
  .category-nav__item{ max-width: 130px; }
  .category-nav__icon{ width: 30px; height: 30px; }
  .category-nav__label{ margin-top: 10px; font-size: 13px; }
  /* gap を 0 にする。24px あると区切りの｜の左側にだけ乗ってしまい、
     ｜が左40px・右16pxで右に寄って見えるため（発注者指示 2026-08-31）。
     0にすると左右16pxずつで揃う */
  .page-nav ul{ padding: 8px 20px; gap: 0; justify-content: flex-start; }
  /* ヒーロー：Figma 55:1206実測＝白背景＋中央寄せ＋角丸カードの写真スライダー。
     PCの写真帯（画面端いっぱい＋絶対配置の商品名）から、
     「商品名→カード写真→白地案内」の縦積みに戻す */
  .hero-visual{
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 0;
  }
  /* スマホでは商品名の代わりにキャッチを出す（指示 2026-09-04）。
     商品名の h1 は、読み上げソフトと検索エンジン向けにPCと同じく隠したまま残す */
  .hero-catch-sp{
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 0 20px;
  }
  /* 写真カード：最大340×227（3:2）。スマホ用画像を切らずに全部出すための比率。
     PCでは帯いっぱいに絶対配置していたスライダーを、ここでは角丸カードに戻す */
  /* スマホでは矢印を写真に重ねず、写真の脇の空きスペースに置く（発注者指示 2026-09-01）。
     矢印・写真・矢印を横一列に並べる。左右の余白ぶん外側へ広げて、写真が小さくなり過ぎないようにする */
  .hero-slider{
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: calc(100% + 32px);
    max-width: none;
    margin: 0 -16px;
    aspect-ratio: auto;
    border-radius: 0;
    overflow: visible;
    background: none;   /* 写真が読めなかったときの下地は下のカード側へ移す */
  }
  /* 角丸カードの見た目（340×227・3:2）はこちらが担当する */
  .hero-slider__viewport{
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 340px;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-hero-beige);
  }
  /* 写真に重ねないので、指で押せる範囲を保ちつつ32pxに小さくする */
  .hero-slider__prev,
  .hero-slider__next{
    position: static;
    transform: none;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
  }
  .hero-slider__prev{ order: -1; }   /* 写真より前に置く */
  .hero-slider__icon{ width: 20px; height: 20px; }
  .hero-inner{
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding: 0 24px 40px;
  }
  .buy-lead{
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.25px;
    max-width: none;
    margin: 32px 0;
  }
  .buy-ctas{ flex-direction: column; gap: 16px; margin-bottom: 20px; width: 100%; }
  .buy-ctas .btn{ width: 100%; max-width: 100%; }
  /* 840px以下は色パネルを縦に2つ並べる。上が normal color の茶、下が pop color の緑
     （発注者指示 2026-09-08） */
  .mall-box{ padding: 24px; border-radius: 16px; }
  /* 並びは .mall-panels の自動切り替えに任せる。ここでは間隔だけ詰める */
  .mall-panels{ gap: 16px; }
  .section{ padding: 56px 16px; }
  .section-title{ font-size: 24px; }
  .container{ padding: 0 16px; }
  /* 上の .container の上書きより後に書かないと、箱ごとに指定した64pxが負けてしまう。
     541〜840pxで2つの箱の上下の余白が消えていたのを直した（2026-09-01） */
  .series-block,
  .about-block{ padding: 64px 32px; }

  .intro-block,
  .cute-block,
  .spec-cards,
  .tips-block,
  .features-grid,
  .feature-row{
    grid-template-columns: 1fr;
  }
  .intro-box{ padding: 40px; }
  .intro-block{ gap: 40px; }
  .cute-block img{ order: -1; }
  .tips-block img{ order: -1; }
  #features .feature-row:nth-child(odd) > .feature-item.has-media { order: 0; }

  .series-card{ grid-template-columns: 1fr; }
  .faq-block{ grid-template-columns: 1fr; }
  .faq-heading{ margin-bottom: 8px; }
  .faq-q{ padding: 20px; }
  .faq-a{ padding: 0 20px 20px; }

  /* 840px以下：余白を詰めて、左右2枚の枠を縦に積む */
  .bt-block{ margin: 40px auto; padding: 40px 24px; }
  .bt-heading{ max-width: none; }
  .bt-controls{ flex-direction: column; align-items: center; gap: 16px; }
  /* 14pxのまま「音声アシスタント起動」を1行に収めるため、狭い画面では内側の余白と間隔を詰める */
  .bt-control-card{ width: 100%; max-width: 320px; padding: 20px; }
  .bt-control{ gap: 8px; }

  .spec-table th, .spec-table td{
    display: block;
    width: auto;
    padding: 12px 20px;
  }
  /* 行と項目名の余白を詰める（指示 2026-09-04） */
  .spec-table tr{ display: block; padding: 0; }
  /* 項目名の下は padding-bottom の上書きを外し、上の padding: 12px 20px を効かせる。
     0にすると中身の文字とくっつくため（指示 2026-09-04） */

  .floating-cta{ right: 12px; bottom: 12px; }
  .floating-cta .btn{ padding: 10px 14px; font-size: 12px; }
}

/* ============================================================
   モバイル（Studio: 540px）以下
   カテゴリ帯だけ、cheero.shop のスマホ幅と同じ指定にそろえる
   ============================================================ */
@media (max-width: 540px){
  .category-nav{ padding: 15px 0; }
  .category-nav__list{ gap: 10px; padding: 0 5px; }
  .category-nav__item{ max-width: 90px; }
  .category-nav__icon{ width: 20px; height: 20px; }
  /* 元サイトは7pxだが読みにくいため10pxに拡大（発注者指示 2026-08-17・折り返しは発生しないことを実測で確認） */
  .category-nav__label{ margin-top: 8px; font-size: 10px; }

  /* 商品カードを1列にする指定は、2026-09-08に「480px以下」へ移した（上の .about-grid のところ）。
     もとは「540px以下は1列」だったが（発注者指示 2026-08-28）、841pxで4列のまま
     カードが148pxまで細っていた問題を直すついでに区切りを見直し、
     540pxは2列でも読めることを実機の見た目で確認したうえで発注者が判断した */
  /* 左右64pxのままだとカードが199px幅まで細るため、スマホだけ32pxにする（発注者指示 2026-08-28） */
  .about-block{ padding: 64px 32px; }
  .series-block{ padding: 64px 32px; }

  /* 右下のフローティングCTA：横並びのままだと実機のスマホ幅ではみ出すため、
     スマホでは「Smart Pro」と「TOP」の文字を隠して短くする（発注者指示 2026-08-17・案2）。
     display:none ではなく画面外に逃がすことで、文字は読み上げソフトには残る＝
     ボタンの意味が伝わらなくなるのを防ぐ。「Smart Pro」は商品名なので
     PC・タブレットではそのまま表示する。 */
  .floating-cta .cta-long{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==========================================================
   マウスオーバーの反応（まとめてここで管理）
   ・文字のリンク → 文字をオレンジ #f08300 に
   ・塗りのボタン → 塗りをオレンジに
   ・枠のボタン   → 枠と文字をオレンジに
   ・モールのロゴ → 枠をオレンジに（塗りは変えない）
   タッチ端末では指を離しても色が残ってしまうため、
   マウスが使える環境だけに限定している
   ========================================================== */
@media (hover: hover){
  /* 文字のリンク */
  .page-nav a:hover,
  .category-nav__item:hover .category-nav__label,
  .video-link:hover{
    color: var(--color-orange);
  }

  /* 塗りのボタン */
  .btn-brown:hover,
  .btn-green:hover,
  .btn-dark:hover{
    background: var(--color-orange);
  }

  /* 枠のボタン：枠と文字 */
  .btn-outline:hover{
    color: var(--color-orange);
    border-color: var(--color-orange);
  }

  /* スペックの「詳しく見る」は塗りのボタンになったので、塗りだけを変える（発注者指示 2026-09-01） */
  #spec .spec-card .btn-outline:hover{
    background: var(--color-orange);
    color: #fff;
  }

  /* モールのボタンは枠だけオレンジに */
  .mall-links a:hover{
    border-color: var(--color-orange);
  }

  /* スライダー矢印：枠と文字をオレンジに */
  .hero-slider__prev:hover,
  .hero-slider__next:hover{
    border-color: var(--color-orange);
    color: var(--color-orange);
  }

}