/* SONOS — メーカー直販D2C風(余白多め・1カラム) */
/* 2026-08-30: 配色・タイポグラフィを参考サイト(Sonos Ace 商品ページ)に合わせて刷新。
   ベースは白 #fff / 文字は黒 #000 のニュートラルグレー階調のみ。金色アクセントは廃止。
   本文フォントは aktiv-grotesk 相当のネオグロテスク系サンセリフ(端末内蔵のみ・外部読込なし)。
   ファーストビュー(寸法は framing.css)には価格を出さない。価格は .purchase 内のみ。 */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* 参考サイトから採取したニュートラルパレット */
  --c-bg:      #ffffff;  /* ベース背景 */
  --c-surface: #f4f4f4;  /* 淡いパネル */
  --c-photo:   #f4f4f4;  /* 商品写真の背景。写真の地色と同じ値(0910「サブ画像は本家の明るい地色で」で #dcdcdc から戻した)。
                            0909 からホワイトのメイン(hp_white_main.jpg)は地色の異なる新カットで cover で枠を埋めるため(0914 版は #b1b1b1)、
                            この値が見えるのは 2x2 とブラックのメインだけ(どちらも #f4f4f4) */
  --c-line:    #e0e0e0;  /* 罫線・区切り */
  --c-line-2:  #bcbcbc;  /* やや濃い罫線・スウォッチ枠 */
  --c-text:    #000000;  /* 見出し・主要テキスト */
  --c-text-2:  #2e2e2e;  /* 本文 */
  --c-text-3:  #4c4c4c;  /* 補足本文 */
  --c-muted:   #7f7f7f;  /* ラベル・キャプション */
  --c-sans: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN",
            "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  /* ファーストビューの左右余白。ヘッダー・パンくず・ヒーローのメイン写真がこの線で揃う
     (合成ラフ基準で右上の写真の右端が切り出し x 1387 → 右余白 91px。左も対称に) */
  --edge-x: 91px;
}

body {
  font-family: var(--c-sans);
  color: var(--c-text-2); background: var(--c-bg);
  line-height: 1.75; font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-text); text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.01em; color: var(--c-text); }

/* header */
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 960px; margin: 0 auto; padding: 22px 24px;
}
.logo { font-size: 19px; letter-spacing: 0.14em; font-weight: 500; color: var(--c-text); }
/* サイトロゴ(SONOS ワードマーク)。fill=currentColor なので .logo の color がそのまま効く */
.logo .logo-svg { height: 17px; width: auto; display: inline-block; vertical-align: middle; }
.logo span { font-size: 11px; letter-spacing: 0.14em; color: var(--c-muted); }
.site-header nav ul { display: flex; gap: 30px; list-style: none; font-size: 13px; letter-spacing: 0.02em; }
.site-header .cart { border: 1px solid var(--c-text); padding: 6px 16px; border-radius: 80px; }
.site-header .cart:hover { opacity: 0.7; }
/* 想定フレーム(1101px 以上)では、写真の上に空く余白を埋めるためヘッダーとパンくずを大きく取る。
   ヘッダー 132px + パンくず 44px = 176px。この値が .hero の上端(切り出し座標)になるので、
   変えるときは .hero の --grid-y も合わせて直すこと */
@media (min-width: 1101px) {
  .site-header { max-width: none; height: 132px; padding: 0 var(--edge-x); }
  .logo .logo-svg { height: 40px; }
  .site-header nav ul { gap: 40px; font-size: 16px; }
  .site-header .cart { padding: 9px 22px; }
}

.breadcrumb { max-width: 960px; margin: 0 auto; padding: 0 24px 8px; font-size: 12px; color: var(--c-muted); }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-text); }
@media (min-width: 1101px) {
  .breadcrumb { max-width: none; padding: 0 var(--edge-x); height: 44px; line-height: 24px; font-size: 14px; }
}

/* hero
   ── 合成ラフ基準のレイアウト(2026-09-04) ──
   右=タレント映像の合成ラフで、右上に小さく浮いていたヘッドホン(切り出し 1478x935 の座標で
   高さ約 98px・中心 (1285, 270))に「正面写真 hp_white_front.jpg の中のヘッドホン」を重ねるのが起点。
   写真内のヘッドホン範囲は x 469-1128 / y 54-825(1600x900)なので、縮尺 98/772 ≒ 0.127 → 写真は 203x114px、
   左上は切り出し座標 (1184, 214)。この1枚を右上に固定し、同サイズの写真を左・下・左下に並べて 2x2、
   その下に商品名とカラー、左に大きなメイン写真を置く。
   .hero の上端は切り出し座標 y=176(ヘッダー 132 + パンくず 44)。以下の top はそこからの相対値。
   撮影時に編集:基準を動かすときは --grid-x / --grid-y / --cell-w を変えれば全体が追従する */
.hero {
  --cell-w: 203px;                       /* 2x2 の1枚の幅(高さは 16:9 で 114px) */
  --cell-h: calc(var(--cell-w) * 9 / 16);
  --gap: 10px;
  --grid-x: 971px;                       /* 2x2 の左端(= 右上の1枚の左端 1184 − 幅 − 隙間) */
  --grid-y: 38px;                        /* 2x2 の上端(= 切り出し y 214 − .hero 上端 176) */
  --main-x: var(--edge-x);               /* メイン写真の左端(右端の余白と対称) */
  --main-h: 666px;                       /* メイン写真の高さ(下端が切り出し y 880) */
  position: relative; height: calc(var(--grid-y) + var(--main-h) + 16px);
  max-width: none; margin: 0; padding: 0; text-align: left;
}
.gallery-main {
  position: absolute; left: var(--main-x); top: var(--grid-y);
  width: calc(var(--grid-x) - var(--gap) - var(--main-x)); height: var(--main-h);
  background: var(--c-photo); overflow: hidden;
}
/* メイン写真はカラーごとに重ねて置き、選択中のものだけ表示する */
.hero-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.25s ease-in-out;
}
.color-radio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
#color-white:checked ~ .gallery-main .is-white { opacity: 1; }
#color-black:checked ~ .gallery-main .is-black { opacity: 1; }
.hero-grid {
  position: absolute; left: var(--grid-x); top: var(--grid-y);
  display: grid; grid-template-columns: repeat(2, var(--cell-w)); gap: var(--gap);
}
.hero-grid img {
  width: var(--cell-w); height: var(--cell-h); object-fit: cover; display: block; background: var(--c-photo);
}
/* 商品名ブロックは「2x2 の下端」から「メイン写真の下端」までの枠に収め、その中で上下・左右とも中央に置く */
.hero-text {
  position: absolute; left: var(--grid-x); top: calc(var(--grid-y) + var(--cell-h) * 2 + var(--gap));
  width: calc(var(--cell-w) * 2 + var(--gap));
  height: calc(var(--main-h) - var(--cell-h) * 2 - var(--gap));
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  /* 数値上の中央だと目視では左下に沈んで見えるため、釣り合う位置へ
     右に 10px・上に 12px ずらしている(見た目優先の微調整) */
  transform: translate(10px, -12px);
}
.hero-copy { font-size: 14px; letter-spacing: 0.18em; color: var(--c-muted); margin-bottom: 8px; }
.hero h1 { font-size: 48px; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 16px; }
.hero-sub { font-size: 15px; line-height: 1.8; color: var(--c-text-3); margin-bottom: 26px; text-wrap: balance; }
.hero-sub br { display: none; }

/* 想定フレームより狭い窓(framing.css の閾値 1101px 未満)では絶対配置をやめて縦に流す */
@media (max-width: 1100px) {
  .hero { height: auto; padding: 0 24px 8px; }
  /* 枠の比率はホワイトのメイン(1600x1227)に合わせる。16:9 のままだと cover でヘッドバンド上端が切れる。
     ブラックのメイン(16:9)は左右が少し切れるが被写体は中央なので欠けない。
     position は static にしない: 中の .hero-image は絶対配置なので、static だと基準が .hero 全体になり
     写真が 2x2 と商品名の上に被さる(09-09 に確認)。relative では基底の left/top がオフセットになるので auto に戻す */
  .gallery-main { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 1600 / 1227; margin-bottom: var(--gap); }
  .hero-grid { position: static; grid-template-columns: 1fr 1fr; }
  .hero-grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .hero-text { position: static; width: auto; height: auto; margin-top: 24px; transform: none; }
}
.inset-photo { display: block; max-width: 620px; width: 100%; margin: 8px auto 26px; }

/* purchase */
.purchase { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-bg); margin-top: 78px; }
.purchase-inner { max-width: 560px; margin: 0 auto; padding: 44px 24px; text-align: center; }
/* カラー選択(参考サイトと同じ仕様)
   ・スウォッチは 2 つとも同じ外寸の箱。選択状態は「箱の枠線の色」だけで表す
     (以前は選択側にだけリングが付いて外寸が変わり、黒丸のほうが選択中に見えていた)
   ・箱=透明2px枠+内側4px余白、中身=1px のインセット罫線付きの円。白でも輪郭が出る
   ・行の並びは「選択中のカラー名(左) …… スウォッチ(右)」 */
.colors { display: flex; align-items: center; margin-bottom: 18px; font-size: 13px; }
.color-name { color: var(--c-text-3); }
.cn { display: none; }
#color-white:checked ~ .hero-text .cn-white { display: inline; }
#color-black:checked ~ .hero-text .cn-black { display: inline; }
.swatches { display: inline-flex; align-items: center; gap: 0; }
.swatch {
  width: 32px; height: 32px; padding: 3px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid transparent; transition: border-color 0.25s ease-in-out;
}
.swatch > span {
  display: block; width: calc(100% - 2px); height: calc(100% - 2px);
  border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.27);
}
.swatch:hover { border-color: var(--c-line-2); }
#color-white:checked ~ .hero-text .swatch[for="color-white"],
#color-black:checked ~ .hero-text .swatch[for="color-black"] { border-color: #333333; }
/* ヒーロー右下(商品名の下)用。名前はスウォッチのすぐ横に置く */
.hero-colors { margin: 0; font-size: 14px; gap: 10px; justify-content: center; }
.hero-colors .swatch { width: 36px; height: 36px; }
.hero-colors .color-name { order: 2; }
.hero-colors .swatches { order: 1; margin-left: -3px; }
.price { font-size: 30px; letter-spacing: -0.01em; color: var(--c-text); font-weight: 500; }
.price span { font-size: 13px; color: var(--c-muted); font-weight: 400; letter-spacing: 0; }
.stock { font-size: 13px; color: var(--c-text-3); margin: 10px 0 24px; }
.btn-buy {
  font-family: inherit; font-size: 17px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer;
  background: var(--c-text); color: var(--c-bg); border: 2px solid var(--c-text);
  padding: 15px 72px; border-radius: 80px; transition: opacity 0.1s ease-in;
}
.btn-buy:hover { opacity: 0.7; }
.btn-buy:active { opacity: 0.5; }
.rating { font-size: 13px; color: var(--c-text-3); margin-top: 18px; }
.stars { color: var(--c-text); letter-spacing: 0.06em; }

/* story */
.story, .specs, .fit, .voices { max-width: 880px; margin: 0 auto; padding: 56px 24px 8px; }
.purchase + .story { padding-top: 130px; }
.story h2, .specs h2, .fit h2, .voices h2 {
  text-align: center; font-size: 28px; letter-spacing: -0.02em; margin-bottom: 36px;
}
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.note-p { max-width: 620px; margin: 0 auto 22px; font-size: 14px; color: var(--c-text-3); text-align: justify; }
.story-grid h3 { font-size: 16px; margin-bottom: 10px; color: var(--c-text); }
.story-grid p { font-size: 13.5px; color: var(--c-text-3); }

/* specs */
.specs table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--c-bg); }
.specs th, .specs td { border-bottom: 1px solid var(--c-line); padding: 13px 16px; text-align: left; font-weight: normal; }
.specs th { width: 36%; color: var(--c-muted); letter-spacing: 0.02em; }
.specs td { color: var(--c-text-2); }

/* fit */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fit-card { background: var(--c-surface); border: 1px solid var(--c-line); padding: 24px 28px; }
.fit-card h3 { font-size: 15px; letter-spacing: 0; margin-bottom: 12px; color: var(--c-text); }
.fit-card ul { padding-left: 20px; font-size: 13.5px; color: var(--c-text-3); }
.fit-card li { margin-bottom: 6px; }

/* voices */
.voices blockquote { background: var(--c-surface); border-left: 2px solid var(--c-text); padding: 20px 26px; margin-bottom: 18px; }
.voices blockquote p { font-size: 14px; color: var(--c-text-2); }
.voices blockquote footer { font-size: 12px; color: var(--c-muted); margin-top: 8px; }

/* footer */
.site-footer { text-align: center; padding: 56px 24px 40px; font-size: 12px; color: var(--c-muted); border-top: 1px solid var(--c-line); margin-top: 56px; }
.site-footer .logo { margin-bottom: 14px; color: var(--c-text); }
.site-footer .logo .logo-svg { height: 14px; }

@media (max-width: 720px) {
  .hero h1 { font-size: 32px; }
  .story-grid { grid-template-columns: 1fr; gap: 24px; }
  .fit-grid { grid-template-columns: 1fr; }
  .site-header { flex-direction: column; gap: 12px; padding: 20px 16px; }
  .site-header nav ul { flex-wrap: wrap; justify-content: center; gap: 14px 22px; }
  .hero { padding: 0 16px 8px; }
  .hero-copy { letter-spacing: 0.12em; }
  .purchase-inner { padding: 32px 16px; }
  .btn-buy { width: 100%; padding: 15px 0; }
  .story, .specs, .fit, .voices { padding: 40px 16px 8px; }
  .story h2, .specs h2, .fit h2, .voices h2 { font-size: 22px; margin-bottom: 26px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 27px; }
  .hero-sub br { display: none; }
  .price { font-size: 26px; }
  .specs th, .specs td { padding: 10px 10px; font-size: 13px; }
  .specs th { width: 40%; }
  .fit-card { padding: 18px 20px; }
  .voices blockquote { padding: 16px 18px; }
}