/* ================================================================
   WAVE SALAD - 商品ページ(ブランドカタログ) 共通スタイル
   products/product.html から利用。
   配色・フォントは index.html / news/css/news.css と共通です。
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #2d2d2d;
  --body-text: #3a3a3a;
  --muted: #888;
  --muted-2: #999;
  --accent: #8b6f47;
  --accent-dark: #6d5438;
  --accent-light: #a8987e;
  --gold: #c9a24a;
  --bg: #f7f5f2;
  --surface: #fff;
  --border: #e5ddd3;
  --border-2: #ece3d5;
  --border-3: #e0d8ce;
  --footer-bg: #2d2a26;
  --font-sans: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-serif: 'Shippori Mincho', serif;
  --font-display: 'Cormorant Garamond', serif;
}

body.product-body {
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--body-text);
  font-size: 14px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
.product-body a { text-decoration: none; color: inherit; }
.product-body img { display: block; max-width: 100%; }
.product-body button { font-family: inherit; }

/* ================================================================
   ヘッダー・フッター(既存サイトと共通デザイン / news.css と同一)
   ================================================================ */
.site-header {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(229,221,211,0.7);
  position: sticky; top: 0; z-index: 300;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.header-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; height: 60px;
}
.logo-title { display: flex; align-items: center; gap: 10px; }
.logo-title img { height: 26px; width: auto; }
.logo-title-text { font-family: var(--font-serif); font-size: 17px; font-weight: 600; letter-spacing: 0.14em; color: var(--ink); }
.catalog-nav { display: flex; align-items: center; gap: 6px; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 4px; position: relative;
  padding: 10px 14px; font-size: 13px; letter-spacing: 0.02em; color: #444; white-space: nowrap;
  transition: color 0.2s; cursor: pointer;
}
.nav-link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.nav-link:hover { color: var(--accent-dark); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-item.is-active > .nav-link { color: var(--accent-dark); font-weight: 500; }
.nav-item.is-active > .nav-link::after { transform: scaleX(1); }
.nav-link .caret { font-size: 9px; opacity: 0.55; transition: transform 0.2s ease; }
.nav-item:hover .nav-link .caret { transform: rotate(180deg); }
.nav-item.nav-cta .nav-link { background: var(--accent); color: #fff; border-radius: 3px; padding: 9px 18px; margin-left: 6px; }
.nav-item.nav-cta .nav-link::after { display: none; }
.nav-item.nav-cta .nav-link:hover { background: var(--accent-dark); color: #fff; }
.nav-dropdown {
  opacity: 0; visibility: hidden; pointer-events: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(10px);
  border: 1px solid var(--border-2); border-radius: 4px; box-shadow: 0 14px 32px rgba(0,0,0,0.1);
  min-width: 200px; z-index: 500; padding: 8px 0;
  transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-dropdown a { display: block; padding: 10px 20px; font-size: 12.5px; color: #555; transition: background 0.15s, color 0.15s, padding-left 0.15s; }
.nav-dropdown a:hover { background: #f9f6f3; color: var(--accent); padding-left: 24px; }
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.mobile-menu-btn { display: none; }
@media (max-width: 900px) {
  .catalog-nav { display: none; }
  .header-inner { padding: 0 20px; }
}
.mobile-menu-btn {
  flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px; flex-shrink: 0;
}
.mobile-menu-btn span { display: block; width: 22px; height: 2px; background: #666; border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20,16,12,0.45); z-index: 280; opacity: 0; transition: opacity 0.28s ease;
}
.mobile-nav-overlay.show { display: block; }
.mobile-nav-overlay.is-visible { opacity: 1; }
.mobile-nav-panel {
  background: #fff; border-bottom: 2px solid var(--border); padding: 8px 0 20px;
  max-height: 100%; overflow-y: auto;
  transform: translateY(-16px); opacity: 0;
  transition: transform 0.3s cubic-bezier(.16,.84,.44,1), opacity 0.28s ease;
}
.mobile-nav-overlay.is-visible .mobile-nav-panel { transform: translateY(0); opacity: 1; }
.mobile-nav-cta-row { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 6px; }
.mobile-nav-cta { display: block; text-align: center; padding: 13px; border-radius: 4px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
.mobile-nav-cta.primary { background: var(--accent); color: #fff; }
.mobile-nav-cta.outline { border: 1px solid var(--accent); color: var(--accent); }
.mobile-nav-link { display: block; padding: 13px 24px; border-bottom: 1px solid #f5f0ea; font-size: 14px; color: #444; transition: color 0.15s, background 0.15s; }
.mobile-nav-link:last-child { border-bottom: none; }
.mobile-nav-link:active { background: #f9f6f3; color: var(--accent); }
.mobile-nav-link.is-active { color: var(--accent); font-weight: 500; }
.mobile-nav-toggle {
  width: 100%; display: flex; align-items: stretch; justify-content: space-between;
  border-bottom: 1px solid #f5f0ea;
}
.mobile-nav-toggle-link { flex: 1; padding: 13px 24px; font-size: 14px; color: #444; }
.mobile-nav-toggle-chev {
  padding: 13px 20px; border: none; background: none; font-family: inherit; cursor: pointer; flex-shrink: 0;
}
.mobile-nav-toggle-chev .chev { font-size: 11px; opacity: 0.55; transition: transform 0.25s ease; }
.mobile-nav-toggle-chev.open .chev { transform: rotate(180deg); }
.mobile-nav-submenu { max-height: 0; overflow: hidden; background: #faf8f5; transition: max-height 0.3s ease; }
.mobile-nav-submenu a { display: block; padding: 12px 24px 12px 40px; font-size: 13px; color: #666; border-bottom: 1px solid #f0ebe3; }
.mobile-nav-submenu a:last-child { border-bottom: none; }
@media (max-width: 640px) { .mobile-menu-btn { display: flex; } }

.site-footer { background: var(--footer-bg); color: #cfc7ba; padding: 56px 32px 24px; }
.footer-inner { max-width: 1200px; margin: 0 auto 32px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand-logo { font-family: var(--font-serif); font-size: 18px; color: #fff; letter-spacing: 0.12em; margin-bottom: 12px; }
.footer-brand-desc { font-size: 12.5px; line-height: 1.9; color: #b5ab9c; margin-bottom: 12px; }
.footer-brand-company { font-size: 12px; line-height: 1.8; color: #9c9284; }
.footer-brand-link { display: inline-block; font-size: 12px; color: #b5ab9c; margin-top: 10px; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.footer-brand-link:hover { color: #fff; }
.footer-col h4 { font-size: 13px; color: #fff; font-weight: 500; margin-bottom: 14px; letter-spacing: 0.05em; }
.footer-col h4 a:hover { color: #b5ab9c; }
.footer-col a { display: block; font-size: 12.5px; color: #b5ab9c; padding: 5px 0; transition: color 0.2s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 20px; border-top: 1px solid #45403a; font-size: 11px; color: #857c6e; text-align: center; }
@media (max-width: 800px) {
  .footer-inner { grid-template-columns: 1fr; gap: 14px; }
  /* スマホでは縦に長くなりすぎるため、商品一覧・価格表の見出しは表示しつつ、中のカテゴリー一覧だけ非表示に */
  .footer-col--catalog > a { display: none; }
  .footer-col--catalog h4 { margin-bottom: 0; }
}

/* ================================================================
   パンくず
   ================================================================ */
.product-breadcrumb { max-width: 1200px; margin: 0 auto; padding: 20px 24px 0; font-size: 12px; color: var(--muted-2); display: flex; flex-wrap: wrap; gap: 6px; }
.product-breadcrumb a { color: var(--accent); }
.product-breadcrumb a:hover { text-decoration: underline; }
.product-breadcrumb .sep { color: #ccc; }

/* ================================================================
   セクション内ジャンプナビ(スティッキー)
   ================================================================ */
.product-subnav {
  position: sticky; top: 76px; z-index: 200;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); overflow-x: auto;
  scrollbar-width: none;
}
.product-subnav::-webkit-scrollbar { display: none; }
.product-subnav-inner { display: flex; gap: 4px; max-width: 1200px; margin: 0 auto; padding: 0 24px; white-space: nowrap; }
.product-subnav a {
  display: inline-block; padding: 10px 14px; font-size: 12.5px; color: #666;
  border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.product-subnav a:hover { color: var(--accent-dark); }
.product-subnav a.is-active { color: var(--accent-dark); border-color: var(--accent); font-weight: 500; }
@media (max-width: 640px) { .product-subnav { top: 0; } }

/* ヘッダーとサブナビを1つのグループとしてスティッキーにする(個別にスティッキーにすると、
   グループの高さ(ヘッダー+サブナビ分)を超えてスクロールした時点で、どちらも
   一緒に画面外へ流れて行ってしまうため、PCでも下スクロール時にメニューが消えていた) */
#stickyHeaderGroup { position: sticky; top: 0; z-index: 300; }
/* position: static にすると、.site-header自身のbackdrop-filter(ぼかし効果)が
   別のスタッキングコンテキストを作ってしまい、z-index: 500の「取引先向け」等の
   ドロップダウンメニューが、あとからDOM上に並ぶ.product-subnav(サブナビの
   帯)の下に隠れてしまう不具合があった。position: relative + z-index を使い、
   個別のsticky化(=本来の目的外の動き)は避けつつ、重なり順だけ
   ヘッダー側を確実に上にする */
#stickyHeaderGroup .site-header,
#stickyHeaderGroup .product-subnav { position: relative; top: auto; }
#stickyHeaderGroup .site-header { z-index: 2; }
#stickyHeaderGroup .product-subnav { z-index: 1; }

/* スマホ: ヘッダー(ロゴ)とサブナビをひとまとまりにして、下スクロールで両方隠し、
   上に少しスクロールしたら両方再表示する。ロゴだけは、一度スクロールしたら
   (上でも下でも)先頭に戻るまで隠したままにする。ハンバーガーメニューは常に表示。
   スクロール中は、ロゴがあった場所にサブナビの4項目を重ねて表示し、
   ハンバーガーメニューと同じ1本の行に収める */
@media (max-width: 640px) {
  #stickyHeaderGroup { transition: transform 0.25s ease; }
  body[data-scroll="down"] #stickyHeaderGroup { transform: translateY(-100%); }
  /* サブナビ(価格表・特徴・この生地でできること・商品詳細)は、スマホでは縦の表示領域を
     さらに詰めて、文字サイズも小さくする */
  .product-subnav a { padding: 8px 10px; font-size: 11px; }
  /* ハンバーガーメニューを開いている間は、サブナビと重なって見えるため隠す */
  body.mobile-menu-open .product-subnav { visibility: hidden; }

  /* ヘッダー(ロゴ画像・文字サイズ・高さ・左右余白)をトップページ(index.html)にそろえる */
  .header-inner { padding: 0 12px; height: auto; min-height: 52px; gap: 4px; }
  .logo-title { gap: 8px; }
  .logo-title img { height: 24px; }
  .logo-title-text { font-size: 14px; letter-spacing: 0.12em; }

  .site-header .logo-title { transition: opacity 0.2s ease, transform 0.2s ease; }
  body[data-scroll] .site-header .logo-title {
    opacity: 0; transform: translateY(-6px); pointer-events: none;
  }
  /* サブナビはスマホでは「価格表・特徴・商品詳細・この生地でできること」だけを表示する */
  .product-subnav-inner a:not([href="#sectionPriceQuick"]):not([href="#sectionFeatures"]):not([href="#sectionSpecSheet"]):not([href="#sectionStyles"]) {
    display: none;
  }
  body[data-scroll] #stickyHeaderGroup .product-subnav {
    position: absolute; top: 0; left: 0; right: 60px; height: 52px; z-index: 310;
    display: flex; align-items: center;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: none;
  }
  body[data-scroll] .product-subnav-inner { padding: 0 0 0 12px; gap: 0; }
  /* ハンバーガーメニューと重ならないよう、文字サイズと余白を詰めて4項目を収める */
  body[data-scroll] .product-subnav a {
    border-bottom: none; padding: 8px 6px; font-size: 10px;
  }
}

/* ================================================================
   共通: 見出し・コンテナ
   ================================================================ */
.section-wrap { max-width: 1200px; margin: 0 auto; padding: 88px 24px; scroll-margin-top: 120px; }
.section-wrap.is-tight { padding-top: 64px; padding-bottom: 64px; }
/* ヒーロー写真のすぐ下に来る「価格表」は、写真との間隔を少し詰める */
#sectionPriceQuick { padding-top: 48px; }
/* 主要セクション同士の間隔を詰める(価格シミュレーター・商品詳細・商品特徴・
   この生地で製作できる商品・おすすめインテリア・コーディネート提案・お客様の声) */
#sectionPriceQuick, #sectionSpecSheet, #sectionFeatures, #sectionStyles,
#sectionInterior, #sectionCoordinate, #sectionReviews { padding-bottom: 56px; }
#sectionSpecSheet, #sectionFeatures, #sectionStyles,
#sectionInterior, #sectionCoordinate, #sectionReviews { padding-top: 56px; }
.section-wrap.on-surface { background: var(--surface); }
.section-head { margin-bottom: 44px; }
.section-head.is-centered { text-align: center; }
.eyebrow {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 12px; letter-spacing: 0.32em; color: var(--gold); text-transform: uppercase;
  display: block; margin-bottom: 10px;
}
.section-title { font-family: var(--font-serif); font-size: 28px; font-weight: 600; color: var(--ink); letter-spacing: 0.05em; }
.section-lead { margin-top: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.9; max-width: 620px; }
.section-head.is-centered .section-lead { margin-left: auto; margin-right: auto; }

[hidden] { display: none !important; }

/* ================================================================
   ① ヒーロー
   ================================================================ */
.hero { display: grid; grid-template-columns: 1.35fr 1fr; min-height: 82vh; background: var(--surface); }
.hero-media { position: relative; overflow: hidden; background: #eee7db; display: flex; flex-direction: column; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* PC表示のみ、ヒーロー画像を一回り小さく見せる(2026-09、ユーザー依頼)。
   .heroのグリッド構成・.hero-mediaが占める枠の大きさ(=右側.hero-infoの位置)は
   一切変えず、.hero-media自体を縮小表示するだけにしてある
   (transform:scaleはレイアウト上の占有サイズを変えないため、右側の商品情報・
   カラー・価格・ボタン等の位置に影響しない。画像のトリミング方法(object-fit:cover)・
   縦横比もそのまま、単に一回り小さく見えるだけになる)。78%は目安の75〜80%の中間値。
   縮小の基準点は中心ではなく上端にしてあり(transform-origin: top)、画像の上に
   大きな余白ができるのを防いでいる(縮小した分の余白は下側だけに出る)。
   タブレット・スマホ(下の@media (max-width:1024px))では従来どおり等倍に戻す */
.hero-media { transform: scale(0.78); transform-origin: top center; }

/* ── ヒーロー画像カルーセル(メイン写真1枚に加え、gallery[]・fabricCloseup[]があれば
   スクロール/スワイプで切り替えられるようにする。画像が1枚しか無い商品は
   矢印・サムネイル行とも自動的に非表示になり、今までと見た目が変わらない) ── */
.hero-carousel { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.hero-carousel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.12), transparent 30%);
  pointer-events: none;
}
.hero-carousel-track {
  display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hero-carousel-track::-webkit-scrollbar { display: none; }
/* カルーセル画像の表示方法:
   ・通常(写真など)      … object-fit: cover で画面いっぱい(多少の見切れOK)
   ・.is-contain(文字入り) … object-fit: contain で全体表示。余白は画像をぼかしたもので埋める
   .is-contain は JS側で、画像ギャラリー行の「文字入り(全体を表示)」チェックが付いた画像に付与する。 */
.hero-carousel-slide {
  flex: 0 0 100%; height: 100%; scroll-snap-align: start;
  position: relative; overflow: hidden;
  background-color: #eee7db; background-size: cover; background-position: center;
}
.hero-carousel-slide img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-carousel-slide.is-contain img { object-fit: contain; }
.hero-carousel-slide.is-contain::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: inherit; background-size: cover; background-position: center;
  filter: blur(30px) brightness(0.97); transform: scale(1.2);
}
.hero-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.88); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18); transition: background 0.15s;
}
.hero-carousel-arrow:hover { background: #fff; }
.hero-carousel-prev { left: 16px; }
.hero-carousel-next { right: 16px; }

.hero-thumb-row {
  flex-shrink: 0; display: flex; gap: 8px; padding: 10px 14px;
  overflow-x: auto; background: rgba(255,255,255,0.94); scrollbar-width: none;
}
.hero-thumb-row::-webkit-scrollbar { display: none; }
.hero-thumb {
  flex: 0 0 auto; width: 52px; height: 52px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: none;
}
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-thumb.is-active { border-color: var(--accent); }
/* ヒーロー画像の下の専用領域。ギャラリー画像のコメント／カラー選択時のSKU備考を表示。
   画像には重ねず下に置く。画像はカルーセル側で高さを固定しているので縮まない。 */
.hero-carousel-caption {
  flex-shrink: 0; margin: 0; padding: 0 16px; text-align: center;
  background: rgba(255,255,255,0.96); border-top: 1px solid var(--border-3);
  /* PC表示のみ、ユーザー依頼でもう少し大きく(11.5px→13px)。欄の高さは固定41pxの
     ままでも13px・line-height1.6の1行は十分収まるため、高さ側は変更していない。
     スマホは下の@media (max-width:640px)側の指定(10.5px)がそのまま効く */
  font-size: 13px; color: var(--muted); line-height: 1.6;
  /* 高さをpaddingやline-heightからの自動計算ではなく固定値にする(カラー名バッジ
     入りの1行がぴったり収まる41px)。中身が有る/無いで欄の高さそのものが変わると
     画像がガクッと上下に動くため、常に同じ高さにして中身だけ増減させる */
  height: 41px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* コメントの無いスライドは中身が空のまま欄だけ残る(=白い帯)。以前は
   visibility: hidden で欄ごと透明にしていたが、それだと欄自身の白い背景まで
   消えてしまい、下に透けた.hero-mediaのベージュ色(画像読み込み中のプレース
   ホルダー色)がそのまま見えてしまっていたため、今は何もしない(空の白い帯の
   ままにする) */
@media (max-width: 640px) {
  .hero-carousel-caption { padding: 0 12px; font-size: 10.5px; height: 35px; }
}
.hero-carousel-caption-color {
  display: inline-block; margin-right: 7px; padding: 2px 8px; border-radius: 3px;
  background: rgba(45,42,38,0.82); color: #fff; font-size: 11px; letter-spacing: 0.04em;
  vertical-align: middle;
}
/* PC表示は上寄せ(justify-content:flex-start)にして、左のヒーロー画像を上端基準で
   縮小した(上の.hero-mediaのtransform-origin:top)のに合わせ、商品名・価格等も
   一緒に上へ詰めている(2026-09、ユーザー依頼)。padding-topの72pxがそのまま
   画像上端とのだいたいの高さ揃えになる。タブレット・スマホ(下の@media)は
   .heroの高さ自体がコンテンツに合わせて伸縮する(min-height:auto)ため、
   centerのままでも実質見た目は変わらないが、念のため明示的にcenterへ戻している */
.hero-info { display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; padding: 72px 64px; }
.hero-tag-row { display: flex; align-items: center; gap: 10px; }
.hero-type-tag {
  display: inline-block; padding: 4px 12px; border: 1px solid var(--border-3); border-radius: 20px;
  font-size: 11px; color: var(--accent-dark); letter-spacing: 0.04em;
}
.hero-category { font-family: var(--font-display); font-style: italic; font-size: 11px; letter-spacing: 0.22em; color: var(--accent-light); text-transform: uppercase; }
.hero-name-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hero-name { font-family: var(--font-serif); font-size: 46px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; line-height: 1.2; }
.hero-name-ja { font-size: 14px; color: var(--muted); letter-spacing: 0.1em; }
.hero-catch { font-family: var(--font-serif); font-size: 19px; color: var(--accent-dark); line-height: 1.85; font-weight: 500; }
/* 全カラーが販売終了(discontinued)の時だけ出す、見逃しにくいアラート(2026-10、
   卸先がQRコードから商品ページを開いて在庫を確認する運用のため、はっきり分かる
   表示が必要というユーザー要望)。この site の暖色基調とは意図的に違う赤系にして、
   注意喚起として一目で区別できるようにしている */
.hero-discontinued-alert {
  display: flex; align-items: center; gap: 10px;
  background: #fbeaea; border: 1.5px solid #c0392b; border-radius: 8px;
  padding: 13px 18px; margin-bottom: 2px;
}
.hero-discontinued-alert-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%; background: #c0392b; color: #fff;
  font-weight: 700; font-size: 14px; font-family: var(--font-sans);
}
.hero-discontinued-alert-text { font-size: 14px; font-weight: 700; color: #a3291b; line-height: 1.5; }
.hero-spec-row { display: flex; flex-wrap: wrap; gap: 7px; }
.hero-spec-row:empty { display: none; }
.hero-spec-tag {
  display: inline-flex; align-items: center; padding: 5px 12px;
  background: var(--bg); border: 1px solid var(--border-3); border-radius: 20px;
  font-size: 11px; color: var(--accent-dark);
}
.hero-color-block { display: flex; flex-direction: column; gap: 12px; }
.hero-color-block-label { font-size: 11px; color: var(--muted-2); letter-spacing: 0.06em; }
.hero-color-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-color-row .color-swatch-img { width: 38px; height: 38px; border-radius: 50%; }
.hero-color-row .color-swatch-name { font-size: 10px; }
.hero-color-row .color-swatch-sku,
.hero-color-row .color-stock-row { font-size: 9px; }

/* カラーチップをクリックした時だけ出す、在庫コメント(次回入荷予定など)の小さいポップアップ */
.color-stock-note {
  display: flex; align-items: flex-start; gap: 8px;
  background: #fbf3e3; border: 1px solid #e8d6a8; border-radius: 6px;
  padding: 8px 10px; font-size: 11.5px; color: var(--accent-dark); line-height: 1.6;
}
.color-stock-note-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 11px; color: var(--muted-2); line-height: 1; padding: 2px;
}
.color-stock-note-close:hover { color: var(--accent-dark); }
.hero-price-row { display: flex; align-items: baseline; gap: 10px; padding-top: 6px; }
.hero-price { font-family: var(--font-serif); font-size: 26px; color: var(--ink); font-weight: 600; }
.hero-price-unit { font-size: 12px; color: var(--muted); }
.hero-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: 11px; font-weight: 700; margin-left: 2px;
}
.hero-cta-row { display: flex; justify-content: flex-start; gap: 12px; flex-wrap: wrap; padding-top: 10px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 3px; font-size: 13px; letter-spacing: 0.03em; transition: background 0.2s, color 0.2s, border-color 0.2s; cursor: pointer; border: 1px solid transparent; }
.btn.btn-primary { background: var(--accent); color: #fff; }
.btn.btn-primary:hover { background: var(--accent-dark); }
.btn-outline { border-color: var(--accent); color: var(--accent); background: none; }
.btn-outline:hover { background: var(--accent); color: #fff; }
/* 「生地サンプルを請求する」ボタン(ヒーロー・ページ下部の2箇所)は、他の茶色いボタン
   (価格計算ボタンなど)と混同されないよう、あえて別の色(テラコッタ系)にしている */
.btn.btn-sample { background: #c17c65; }
.btn.btn-sample:hover { background: #ab6d59; }

/* 天然素材の注意点(購入前トラブル防止のため、通常の注意事項アコーディオンとは別枠で目立たせる) */
.natural-notice-section { padding-top: 32px; padding-bottom: 0; }
.natural-notice-box {
  background: #fbf3e7; border: 1.5px solid #d9a95c; border-radius: 8px; padding: 26px 30px;
}
.natural-notice-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.natural-notice-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%; background: #b8823a; color: #fff;
  font-weight: 700; font-size: 14px; font-family: var(--font-sans);
}
.natural-notice-title { font-family: var(--font-serif); font-size: 17px; color: var(--ink); }
.natural-notice-body p { font-size: 13px; color: var(--body-text); line-height: 1.9; margin-bottom: 10px; }
.natural-notice-body p:last-child { margin-bottom: 0; }
/* 最初の1文だけ常に表示し、残りは「もっと見る」で開くアコーディオンにする */
.natural-notice-more-collapse {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}
.natural-notice-more-collapse.is-open { opacity: 1; margin-top: 10px; }
.natural-notice-more-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 12.5px; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px;
}
.natural-notice-more-chev { font-size: 9px; transition: transform 0.25s ease; }
.natural-notice-more-btn.is-open .natural-notice-more-chev { transform: rotate(180deg); }
@media (max-width: 640px) {
  .natural-notice-section { padding-top: 22px; }
  .natural-notice-box { padding: 20px 18px; }
  .natural-notice-title { font-size: 15px; }
  .natural-notice-body p { font-size: 12.5px; }
}

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  /* 画像の高さはカルーセル側で固定し、hero-media は中身(画像＋コメント欄＋サムネ)に
     合わせて伸びる。こうするとコメント欄が出ても画像が縮まない */
  .hero-media { height: auto; }
  /* PC専用のヒーロー画像縮小(上のtransform:scale(0.78))はスマホ・タブレットでは
     行わない(スマホ表示は変更しない、というユーザー依頼のため) */
  .hero-media { transform: none; }
  .hero-carousel { flex: none; height: 58vh; }
  .hero-info { padding: 44px 28px 56px; justify-content: center; }
  .hero-name { font-size: 34px; }
}
@media (max-width: 640px) {
  .hero-carousel { height: 46vh; }
  /* スマホは矢印ボタンを出さず、指でのスワイプ操作だけにする(参考画像の通り) */
  .hero-carousel-arrow { display: none; }
  .hero-thumb-row { padding: 8px 10px; gap: 6px; }
  .hero-thumb { width: 40px; height: 40px; }
  /* PC専用のカラー名バッジ拡大(基本ルール側の11px)はスマホでは行わない(元の10pxの
     まま)。この.hero-carousel-caption-colorの基本ルールより後ろ(ファイルの下)に
     このメディアクエリを置かないと、詳細度が同じため後勝ちで上書きされてしまう
     (実際に370行目付近より前に書いてしまい効かなかった不具合の修正) */
  .hero-carousel-caption-color { font-size: 10px; }
  /* スマホは商品名・コメント・カラー・価格・ボタンが縦に間延びしやすいため、
     このブロック全体でgap/paddingを詰めて、情報がテンポよく続くようにする */
  .hero-info { padding: 22px 18px 26px; gap: 10px; }
  .hero-name { font-size: 28px; }
  .hero-catch { font-size: 16px; }

  .hero-tag-row { gap: 6px; }
  .hero-name-row { gap: 8px; }
  .hero-discontinued-alert { padding: 11px 14px; gap: 8px; }
  .hero-discontinued-alert-text { font-size: 12.5px; }
  .hero-spec-row { gap: 5px; }
  .hero-spec-tag { padding: 4px 10px; font-size: 10px; }

  /* カラー選択:6個を1列に収め、チップはコンパクトに(名前・SKU・在庫ラベルは
     幅が足りないため、タップに必要なスウォッチと色名だけ残して省略する) */
  .hero-color-block { gap: 6px; }
  .hero-color-block-label { font-size: 10px; }
  .hero-color-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
  .hero-color-row .color-swatch { width: 100%; }
  .hero-color-row .color-swatch-img {
    width: 100%; max-width: 40px; height: auto; aspect-ratio: 1 / 1; margin: 0 auto;
  }
  .hero-color-row .color-swatch-name {
    font-size: 8.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 品番・在庫状況は消さず、文字を小さくして残す */
  .hero-color-row .color-swatch-sku {
    font-size: 7px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hero-color-row .color-stock-row {
    font-size: 7px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* 価格の下に「(税込・スタンダード幅200×丈240cm目安)」を改行して配置する */
  .hero-price-row { padding-top: 2px; gap: 6px; flex-wrap: wrap; }
  .hero-price { font-size: 22px; }
  .hero-price-unit { font-size: 10px; flex-basis: 100%; margin-top: 2px; }
  .hero-rank-badge { width: 19px; height: 19px; font-size: 10px; }

  /* 生地サンプルを請求するボタンは、スマホでは中央配置にする */
  .hero-cta-row { justify-content: center; padding-top: 6px; gap: 8px; }
  .hero-cta-row .btn { padding: 11px 20px; font-size: 12.5px; }
  .sample-cart-hero-note { margin-top: 4px; }
}

/* ================================================================
   商品説明・仕様・注意事項(アコーディオン)
   ================================================================ */
.spec-sheet-accordion { border-top: 1px solid var(--border); }
.spec-sheet-item { border-bottom: 1px solid var(--border); }
.spec-sheet-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 2px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: 0.03em;
}
.spec-sheet-chev { flex-shrink: 0; font-size: 12px; color: var(--accent); transition: transform 0.25s ease; }
.spec-sheet-item.is-open .spec-sheet-chev { transform: rotate(180deg); }
.spec-sheet-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.spec-sheet-body-inner { padding: 0 2px 26px; font-size: 13px; color: var(--body-text); line-height: 1.9; white-space: pre-line; }
.spec-sheet-body-inner p + p { margin-top: 10px; }
.spec-sheet-table { display: grid; grid-template-columns: 150px 1fr; row-gap: 12px; column-gap: 20px; }
.spec-sheet-table dt { font-size: 12px; color: var(--muted-2); letter-spacing: 0.04em; }
.spec-sheet-table dd { font-size: 13px; color: var(--ink); white-space: pre-line; }
@media (max-width: 640px) {
  .spec-sheet-head { padding: 18px 2px; font-size: 14.5px; }
  .spec-sheet-table { grid-template-columns: 1fr; row-gap: 4px; }
  .spec-sheet-table dd { margin-bottom: 12px; }
}

/* ── 価格シミュレーター ── */
/* 価格シミュレーター(展開後)は、開いたことがひと目で分かるよう背景色を変えている */
.price-sim { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 36px 40px; }
/* 価格表(簡易版)は枠なしで表示する */
.price-sim.price-quick { padding: 28px 32px; border-radius: 0; border: none; background: none; }

/* 対応オプションのプレビュー(シミュレーターを開かなくても分かるように) */
.quick-options { margin-top: 24px; }
.quick-options-label { font-size: 11.5px; color: var(--muted-2); letter-spacing: 0.04em; margin-bottom: 10px; }
.quick-options-list { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-option-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px;
  background: #fff; border: 1px solid var(--border-3); border-radius: 20px; font-size: 12px; color: var(--ink);
}
.quick-option-chip.no-media { padding-left: 14px; }
.quick-option-chip-media { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg); }
.quick-option-chip-media img { width: 100%; height: 100%; object-fit: cover; }

/* 「サイズ・仕様から価格を計算する」アコーディオン */
.price-sim-toggle-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 32px;
}
.price-sim-toggle-chev { font-size: 10px; transition: transform 0.25s ease; }
.price-sim-toggle-btn.is-open .price-sim-toggle-chev { transform: rotate(180deg); }
.price-sim-collapse {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}
.price-sim-collapse.is-open { opacity: 1; }
.price-sim-collapse .price-sim { margin-top: 20px; }
.price-sim-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
.price-sim-title { font-family: var(--font-serif); font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.price-sim-desc { font-size: 12px; color: var(--muted); line-height: 1.8; }
.price-sim-color { display: flex; align-items: center; gap: 10px; flex-shrink: 0; background: var(--bg); border-radius: 28px; padding: 6px 20px 6px 6px; }
/* 「(税込)」は価格表の表のすぐ上、右端に表示する */
.ref-table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.price-sim-tax-note { flex-shrink: 0; font-size: 12px; color: var(--muted-2); }
.price-sim-color-swatch { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: block; background-size: cover; background-position: center; border: 1px solid #eee; }
.price-sim-color span:last-child { font-size: 14px; color: var(--accent-dark); font-weight: 600; }

.price-sim-field { margin-bottom: 22px; }
.price-sim-field:last-child { margin-bottom: 0; }
#doubleShadeField { margin-bottom: 44px; }
.price-sim-field > label, .ref-table-head label { display: flex; align-items: center; font-size: 13.5px; color: var(--ink); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 10px; }
.ref-table-head label { margin-bottom: 0; }
.price-sim-step-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; margin-right: 8px;
}
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-row button {
  padding: 9px 16px; font-size: 12.5px; border: 1px solid var(--border-3); background: #fff; color: #555;
  border-radius: 20px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; font-family: inherit;
}
.chip-row button:hover { border-color: var(--accent); }
.chip-row button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.price-sim-row { display: flex; flex-wrap: wrap; gap: 16px; }
.price-sim-row .price-sim-field { flex: 0 1 210px; margin-bottom: 0; }
.price-sim-row .price-sim-field > label { white-space: nowrap; }
.price-sim-num-input {
  width: 100%; max-width: 200px; padding: 11px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--border-3); border-radius: 4px; color: var(--ink);
}
.price-sim-size-note { font-size: 11px; color: var(--muted-2); margin: 6px 0 22px; line-height: 1.7; }
.price-sim-size-note:empty { display: none; }

.ref-table-wrap { overflow-x: auto; }
.ref-table { border-collapse: collapse; width: 100%; min-width: 420px; }
.ref-table th, .ref-table td {
  border: 1px solid var(--border); padding: 10px 8px; text-align: center; font-size: 12px; white-space: nowrap;
}
.ref-table th { background: var(--bg); color: var(--muted-2); font-weight: 500; font-size: 11px; }
.ref-table td { color: var(--ink); font-weight: 600; font-size: 15px; padding: 12px 8px; transition: background 0.2s, color 0.2s; }
/* 価格表の「目安」セルは塗りつぶさない(他のセルと同じ・白いまま) */
.ref-table td.is-active { background: transparent; color: var(--ink); }
.ref-table-note { font-size: 11px; color: var(--muted-2); margin-top: 8px; line-height: 1.7; }
/* カーテン(スタンダード/エレガント)は幅500cmまでを基本表示にし、超える分はボタンで開く */
.ref-table.has-extra-cols .ref-table-extra-col { display: none; }
.ref-table.has-extra-cols.is-expanded .ref-table-extra-col { display: table-cell; }
/* 開いた時に横スクロールバーが出ないよう、列幅を均等にして枠内に収める(PC表示) */
.ref-table.has-extra-cols.is-expanded {
  table-layout: fixed; width: 100%; min-width: 0;
}
.ref-table.has-extra-cols.is-expanded th,
.ref-table.has-extra-cols.is-expanded td { white-space: normal; word-break: break-word; }
/* 右端(301〜400cm列)の下あたりに来るよう、右寄せで配置する */
.ref-table-toggle-wrap { display: flex; justify-content: flex-end; margin-top: 10px; }
.ref-table-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px;
}
.ref-table-toggle-chev { font-size: 9px; transition: transform 0.25s ease; }
.ref-table-toggle-btn.is-open .ref-table-toggle-chev { transform: rotate(180deg); }

/* チルトポール/操作コードの長さなど、価格表に付随する補足表(アコーディオン) */
.length-table-accordion { margin-top: 14px; }
.length-table-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 12.5px; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px;
}
.length-table-toggle-chev { font-size: 9px; transition: transform 0.25s ease; }
.length-table-toggle-btn.is-open .length-table-toggle-chev { transform: rotate(180deg); }
.length-table-collapse {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}
.length-table-collapse.is-open { opacity: 1; margin-top: 10px; }
.length-table-scroll { overflow-x: auto; }
.mini-ref-table { border-collapse: collapse; width: 100%; min-width: 420px; }
.mini-ref-table th, .mini-ref-table td {
  border: 1px solid var(--border); padding: 8px 6px; text-align: center; font-size: 11px; white-space: nowrap;
}
.mini-ref-table th { background: var(--bg); color: var(--muted-2); font-weight: 500; font-size: 10px; line-height: 1.4; }
.mini-ref-table td { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.length-table-note { font-size: 11px; color: var(--muted-2); margin-top: 8px; line-height: 1.7; }

/* オプション: 画像＋名称＋説明＋価格のカード型トグルボタン */
.option-card-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.option-card {
  display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%;
  padding: 14px 16px; background: #fff; border: 1px solid var(--border-3); border-radius: 6px;
  cursor: pointer; transition: border-color 0.2s, background 0.2s; font-family: inherit;
}
.option-card:hover { border-color: var(--accent-light); }
.option-card.is-active { border-color: var(--accent); background: #faf6ee; }
.option-card--wide { grid-column: 1 / -1; cursor: default; }
.option-card--wide:hover { border-color: var(--border-3); }
.option-card-media {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--bg);
}
.option-card-media img { width: 100%; height: 100%; object-fit: cover; }
.option-card-check {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  border: 1.5px solid var(--border-3); position: relative; transition: border-color 0.2s, background 0.2s;
}
.option-card.is-active .option-card-check { border-color: var(--accent); background: var(--accent); }
.option-card.is-active .option-card-check::after {
  content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.option-card-text { flex: 1; min-width: 0; }
.option-card-label { font-size: 13px; color: var(--ink); font-weight: 600; }
.option-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 5px; vertical-align: middle;
  border: 1.5px solid var(--accent-light); border-radius: 50%;
  font-size: 10.5px; font-weight: 700; color: var(--accent-dark); line-height: 1;
  cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.option-info-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.option-card-desc { font-size: 11.5px; color: var(--muted); display: block; margin-top: 3px; line-height: 1.6; }
.option-card-note { font-size: 10.5px; color: var(--muted-2); display: block; margin-top: 3px; line-height: 1.5; }
.option-card-price { display: block; font-size: 12px; color: var(--accent-dark); font-weight: 600; margin-top: 8px; }
.option-card-return-select { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.option-card-return-select button {
  padding: 8px 14px; font-size: 12px; border: 1px solid var(--border-3); background: #fff; color: #555;
  border-radius: 20px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; font-family: inherit;
}
.option-card-return-select button:hover { border-color: var(--accent); }
.option-card-return-select button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 640px) {
  .option-card-list { grid-template-columns: 1fr; }
}

/* オプションの「?」アイコンを押した時に開く解説ポップアップ */
.option-info-overlay {
  display: none; position: fixed; inset: 0; z-index: 900;
  background: rgba(20,16,12,0.5); align-items: center; justify-content: center; padding: 20px;
}
.option-info-overlay.is-open { display: flex; }
.option-info-box {
  position: relative; background: #fff; border-radius: 10px; max-width: 460px; width: 100%;
  max-height: 85vh; overflow-y: auto; padding: 32px 26px 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.option-info-close {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: var(--bg); color: #666; font-size: 13px; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.option-info-close:hover { background: var(--accent); color: #fff; }
.option-info-tagline { font-size: 11.5px; color: var(--accent-dark); letter-spacing: 0.03em; margin-bottom: 6px; }
.option-info-title { font-family: var(--font-serif); font-size: 19px; color: var(--ink); margin-bottom: 12px; }
.option-info-desc { font-size: 13px; color: var(--body-text); line-height: 1.9; margin-bottom: 16px; }
.option-info-benefits { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.option-info-benefits li {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px;
  font-size: 11px; color: var(--accent-dark); text-align: center; line-height: 1.5;
}
.option-info-benefits li img { width: 34px; height: 34px; object-fit: contain; }
.option-info-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.option-info-compare-col { text-align: center; }
/* ラベルの行数が左右で異なる場合(例:「共生地タッセル」1行 と「ひもタッセル(小窓・カフェ用)」2行)、
   下の画像の開始位置がズレてしまうため、2行分の高さを確保して両方の画像の位置をそろえる */
.option-info-compare-label { display: block; min-height: 40px; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.option-info-compare-swatch { display: block; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: var(--bg); }
.option-info-compare-swatch img { width: 100%; height: 100%; object-fit: cover; }
.option-info-compare-desc { font-size: 11px; color: var(--body-text); line-height: 1.6; margin-top: 6px; }

/* before/after の2枚比較ではなく、3種類以上を横並びで見せる場合(例:遮光裏地の
   「非遮光・3級・1級」)。.option-info-compare-swatch/-label/-desc は上と共通利用 */
.option-info-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.option-info-types-col {
  position: relative; text-align: center; background: var(--bg);
  border-radius: 8px; padding: 10px 6px 12px;
}
.option-info-types-col.is-recommend { background: #f3ebdd; border: 1px solid var(--border-3); }
.option-info-types-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 9px; font-weight: 500;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.option-info-recommend-title { font-size: 12.5px; color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.option-info-recommend { list-style: none; margin-bottom: 16px; }
.option-info-recommend li { font-size: 12.5px; color: var(--body-text); line-height: 1.9; padding-left: 20px; position: relative; }
.option-info-recommend li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.option-info-warning { font-size: 11.5px; color: #a15c3f; background: #fbf0ea; border-radius: 6px; padding: 10px 12px; line-height: 1.7; margin-bottom: 10px; }
.option-info-footnote { font-size: 11px; color: var(--muted-2); line-height: 1.7; }
@media (max-width: 640px) {
  .option-info-box { padding: 28px 20px 22px; }
  .option-info-title { font-size: 17px; }
  .option-info-benefits li { width: 72px; }
}

/* 開き方(両開き／片開き)選択カード */
.opening-select-row { display: grid; grid-template-columns: repeat(2, 130px); gap: 10px; }
.opening-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px; background: #fff; border: 1px solid var(--border-3); border-radius: 6px;
  cursor: pointer; transition: border-color 0.2s, background 0.2s; font-family: inherit;
}
.opening-card:hover { border-color: var(--accent-light); }
.opening-card.is-active { border-color: var(--accent); background: #faf6ee; }
.opening-card-media {
  display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden;
  background: var(--bg);
}
.opening-card-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.opening-card-label { font-size: 12px; color: var(--ink); font-weight: 600; }
.opening-card.is-active .opening-card-label { color: var(--accent-dark); }
.opening-card-sub { font-size: 10px; color: var(--muted-2); }
.opening-card:disabled, .opening-card.is-disabled {
  cursor: not-allowed; opacity: 0.4; background: var(--bg);
}

/* 「価格表を見る」アコーディオン(通常は非表示) */
.price-ref-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 20px;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px;
}
.price-ref-toggle-chev { font-size: 9px; transition: transform 0.25s ease; }
.price-ref-toggle-btn.is-open .price-ref-toggle-chev { transform: rotate(180deg); }
.price-ref-collapse { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.2s ease; }
.price-ref-collapse.is-open { opacity: 1; margin-top: 18px; }

.price-sim-result-card { margin-top: 28px; background: var(--bg); border-radius: 6px; padding: 24px 26px; }
.price-sim-result-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.price-sim-result-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.price-sim-result-row .val { color: var(--ink); }
.price-sim-bracket-note {
  font-size: 11.5px; color: #c0392b; line-height: 1.7;
  margin: 2px 0 14px;
}
.price-sim-result-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; border-top: 1px dashed var(--border-3);
}
.price-sim-result-total-label { font-size: 12.5px; color: var(--muted-2); }
.price-sim-result-total-value { font-family: var(--font-serif); font-size: 30px; color: var(--accent-dark); font-weight: 600; }
/* 面積超過などで金額を出せない時は、文章が入っても崩れないよう文字を小さくする */
.price-sim-result-total-value.is-unavailable { font-size: 15px; }
.price-sim-cta { display: flex; justify-content: center; margin-top: 18px; width: 100%; }
.price-sim-note { margin-top: 22px; font-size: 11px; color: #a79a83; line-height: 1.8; padding-top: 18px; border-top: 1px dashed var(--border-3); }
.price-sim-note a { color: var(--accent); text-decoration: underline; }

@media (max-width: 640px) {
  /* 価格表セクションだけ、他セクションと区別できるよう薄いアイボリー背景にする
     (price-sim.price-quick 自体は元々背景なしのため、ここで付けた色がそのまま見える) */
  #sectionPriceQuick { background: #faf6ee; }

  /* スマホでは余白を詰めて、仕様・スタイルなどの表示領域を広くする */
  .price-sim { padding: 16px 12px; }
  .price-sim.price-quick { padding: 16px 12px; }
  .price-sim-head { flex-direction: column; gap: 12px; }
  .price-sim-title { font-size: 16px; }
  .price-sim-desc { font-size: 11px; }
  .price-sim-field { margin-bottom: 16px; }
  .price-sim-row { gap: 10px; }
  .price-sim-row .price-sim-field { flex-basis: 145px; }
  .price-sim-num-input { padding: 9px 10px; font-size: 14px; }
  .price-sim-result-card { padding: 16px 14px; }
  .price-sim-result-total-value { font-size: 22px; }
  .price-sim-result-row { flex-direction: column; gap: 2px; }
  .price-sim-result-row .val { align-self: flex-end; }

  /* 価格シミュレーター全体を、スマホでは一回り小さく表示する。
     「仕様」「スタイル」等の選択チップは、タップ領域は保ちつつよりコンパクトに */
  .chip-row { gap: 5px; }
  .chip-row button { padding: 5px 9px; font-size: 10px; min-height: 30px; }
  /* 「サイズ・仕様から価格を計算する」ボタンはスマホでは中央配置にする */
  .price-sim-toggle-btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; justify-content: center; }
  .price-sim-step-num { width: 17px; height: 17px; font-size: 9.5px; }
  .option-card { padding: 10px 12px; gap: 9px; }
  .option-card-media { width: 46px; height: 46px; }
  .option-card-label { font-size: 12px; }
  .option-card-desc { font-size: 11px; }
  .option-card-price { font-size: 11px; }
  .opening-select-row { grid-template-columns: repeat(2, 108px); gap: 8px; }
  .opening-card { padding: 6px; }
  .opening-card-label { font-size: 11px; }
  .opening-card-sub { font-size: 9.5px; }
  .option-card-return-select button { padding: 6px 11px; font-size: 11px; }
  .quick-options { margin-top: 16px; }
  .quick-options-label { font-size: 10.5px; margin-bottom: 7px; }
  .quick-options-list { gap: 6px; }
  .quick-option-chip { padding: 5px 11px 5px 5px; font-size: 10.5px; gap: 6px; }
  .quick-option-chip.no-media { padding-left: 11px; }
  .quick-option-chip-media { width: 22px; height: 22px; }

  /* 価格表(この生地の価格表)は、文字を小さく潰して全列を無理に収めるのをやめ、
     1列ずつの幅・文字を大きく読みやすくする。目安として4列ぶんが画面内に収まる
     サイズにしてあり、5列目以降は ref-table-wrap の横スクロールで見られる
     (幅×丈の2軸マス目表は元々スクロール表示のため対象外) */
  .ref-table:not(.ref-table-matrix) { min-width: 0; width: auto; table-layout: auto; }
  .ref-table:not(.ref-table-matrix) th, .ref-table:not(.ref-table-matrix) td { padding: 10px 8px; font-size: 13px; white-space: nowrap; }
  .ref-table:not(.ref-table-matrix) th { font-size: 10px; line-height: 1.3; }
  .ref-table:not(.ref-table-matrix) td { font-size: 13px; padding: 11px 8px; }

  /* 価格表セクションはアイボリー背景にしたので、表そのものは白背景にして中身を見やすくする */
  .ref-table, .mini-ref-table { background: #fff; }

  /* 長さ早見表・2軸マス目表は列数が多いため、スマホでは横スクロールのまま見せる(潰すと読めなくなるため) */
  .mini-ref-table { min-width: 480px; }
  .mini-ref-table th, .mini-ref-table td { padding: 6px 4px; font-size: 10px; }
  .ref-table-matrix { min-width: 640px; }
  .ref-table-matrix th, .ref-table-matrix td { padding: 8px 6px; font-size: 11px; white-space: nowrap; }

  /* 「幅500cm超の価格も見る」を開いた時だけは、文字を潰さず横スクロールで見せる */
  .ref-table.has-extra-cols.is-expanded {
    table-layout: auto; width: auto; min-width: 560px;
  }
  .ref-table.has-extra-cols.is-expanded th,
  .ref-table.has-extra-cols.is-expanded td { white-space: nowrap; padding: 8px 10px; font-size: 11px; }
  .ref-table.has-extra-cols.is-expanded th { font-size: 10px; }
}

/* ================================================================
   ③ この生地で製作できる商品
   ================================================================ */
.style-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.style-card {
  position: relative; border-radius: 6px; overflow: hidden; background: #fff;
  border: 1px solid var(--border); display: flex; flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.style-card:hover { box-shadow: 0 14px 32px rgba(0,0,0,0.08); transform: translateY(-3px); }
.style-card-media { aspect-ratio: 1 / 1; background: #f0ebe1; overflow: hidden; padding: 10px; }
.style-card-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 2px; }
.style-card-media.is-placeholder { display: flex; align-items: center; justify-content: center; color: var(--accent-light); }
.style-card-media.is-placeholder svg { width: 34px; height: 34px; }
.style-card-body { padding: 14px 15px 17px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.style-card-name { font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: var(--ink); }
.style-card-desc { font-size: 11px; color: var(--muted); line-height: 1.7; }
@media (max-width: 1024px) {
  .style-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .style-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* スマホは見やすさ重視で横2列・カードを小さめに */
  .style-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .style-card-media { padding: 7px; }
  .style-card-media.is-placeholder svg { width: 22px; height: 22px; }
  .style-card-body { padding: 8px 9px 11px; gap: 3px; }
  .style-card-name { font-size: 12px; }
  /* 以前は2行で見切れさせていたが、説明文が長い商品でコメントが途中で消えて見える
     問題があったため、行数で切らずに全文が読める形にする(カードの高さは可変) */
  .style-card-desc { font-size: 10px; line-height: 1.5; }
}

/* ================================================================
   ④ カラーラインナップ
   ================================================================ */
.color-lineup { display: flex; gap: 44px; flex-wrap: wrap; align-items: flex-start; }
.color-preview { flex-shrink: 0; width: 220px; }
.color-preview-frame {
  width: 220px; height: 220px; border-radius: 8px; overflow: hidden; background: #f0ebe1;
  border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.color-preview-frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease; }
.color-preview-meta { margin-top: 14px; }
.color-preview-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.color-preview-sku { font-size: 11px; color: var(--muted-2); margin-top: 4px; }
.color-preview-note { font-size: 12.5px; color: var(--body-text); line-height: 1.8; margin-top: 10px; max-width: 320px; }
.color-preview-note:empty { display: none; }
.color-swatch-row { display: flex; flex-wrap: wrap; gap: 18px; flex: 1; min-width: 240px; }
.color-swatch { text-align: center; cursor: pointer; background: none; border: none; padding: 0; }
.color-swatch-img {
  width: 76px; height: 76px; border-radius: 6px; overflow: hidden; display: block;
  outline: 2px solid transparent; outline-offset: 3px; transition: outline-color 0.15s, transform 0.15s;
  border: 1px solid #eee;
}
.color-swatch:hover .color-swatch-img { transform: translateY(-2px); }
.color-swatch.is-active .color-swatch-img { outline-color: var(--accent); }
.color-swatch-img img { width: 100%; height: 100%; object-fit: cover; }
.color-swatch-name { display: block; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--accent-dark); }
.color-swatch-sku { display: block; font-size: 9.5px; color: var(--muted-2); margin-top: 2px; }
.color-stock-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; }
.color-stock-row { margin-top: 6px; font-size: 9.5px; color: var(--muted-2); }
.color-swatch[data-stock="in-stock"] .color-stock-dot { background: #6f9a56; }
.color-swatch[data-stock="low"] .color-stock-dot { background: #c59a4a; }
.color-swatch[data-stock="shortage"] .color-stock-dot,
.color-swatch[data-stock="discontinued"] .color-stock-dot { background: #b56a5e; }
/* カラーのみ販売終了(2026-10): 他のカラーがまだ在庫ありの商品では、販売終了に
   なってから1年間はこのカラーも表示し続ける(ユーザー要件)。写真を少し薄くして
   「選べない色」であることが一目で分かるようにする */
.color-swatch[data-stock="discontinued"] .color-swatch-img { opacity: 0.45; }
.color-swatch[data-stock="discontinued"] .color-stock-row { color: #a3291b; font-weight: 700; }
.color-swatch-more {
  display: none; width: 64px; height: 64px; border-radius: 6px;
  align-items: center; justify-content: center; flex-direction: column;
  background: #f3ede1; border: 1px dashed var(--border-3); color: var(--accent-dark);
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
@media (max-width: 640px) {
  .color-lineup { gap: 18px; }
  .color-preview { width: 160px; }
  .color-preview-frame { width: 160px; height: 160px; aspect-ratio: 1/1; }
  .color-swatch-row { gap: 10px; }
  .color-swatch-img { width: 64px; height: 64px; }
  .color-swatch-row:not(.is-expanded) .color-swatch:nth-child(n+5) { display: none; }
  .color-swatch-more { display: flex; }
}

/* ================================================================
   ⑥ 商品特徴
   ================================================================ */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
.feature-card { display: flex; gap: 10px; align-items: flex-start; }
/* 以前は生地アイコン(洗濯・植物など)入りの48px丸だったが、シンプルな黒丸(●)に変更。
   タイトル1行目の文字の高さに合うよう margin-top で位置を微調整している */
.feature-icon {
  flex-shrink: 0; width: 6px; height: 6px; margin-top: 9px;
  border-radius: 50%; background: var(--ink);
}
.feature-title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.feature-desc { font-size: 12.5px; color: var(--muted); line-height: 1.85; }
@media (max-width: 700px) { .feature-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .feature-grid { gap: 20px; }
  .feature-card { gap: 8px; }
  .feature-icon { margin-top: 8px; }
  .feature-title { font-size: 13.5px; margin-bottom: 4px; }
}

/* ================================================================
   使い方・効果(ビフォーアフター比較・数値効果)
   ================================================================ */
.showcase-benefit-row { display: flex; justify-content: center; gap: 48px; margin: 8px 0 34px; flex-wrap: wrap; }
.showcase-benefit-item { text-align: center; }
.showcase-benefit-value { font-family: var(--font-serif); font-size: 48px; color: var(--accent-dark); line-height: 1; }
.showcase-benefit-value span { font-size: 22px; margin-left: 2px; }
.showcase-benefit-label { font-size: 14.5px; color: var(--muted); margin-top: 8px; }
#sectionShowcase .section-lead { font-size: 15.5px; max-width: 640px; }
#sectionShowcase .option-info-compare { max-width: 700px; gap: 24px; margin: 0 auto 28px; }
#sectionShowcase .option-info-compare-label { font-size: 13.5px; min-height: 50px; }
#sectionShowcase .option-info-compare-swatch { border-radius: 10px; }
#sectionShowcase .option-info-compare-desc { font-size: 13.5px; margin-top: 10px; }
#sectionShowcase .option-info-recommend-title { text-align: center; font-size: 14px; }
#sectionShowcase #showcaseRecommendList { max-width: 460px; margin: 0 auto; }
#sectionShowcase #showcaseRecommendList li { font-size: 14px; }
@media (max-width: 640px) {
  .showcase-benefit-row { gap: 28px; margin-bottom: 24px; }
  .showcase-benefit-value { font-size: 34px; }
  .showcase-benefit-value span { font-size: 17px; }
  .showcase-benefit-label { font-size: 12.5px; }
}

/* ================================================================
   ⑦ おすすめインテリア
   ================================================================ */
.interior-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.interior-card { border-radius: 8px; overflow: hidden; position: relative; min-height: 260px; display: flex; align-items: flex-end; }
.interior-card.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.interior-card.has-photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(20,16,12,0.72), rgba(20,16,12,0.05) 55%);
}
.interior-card:not(.has-photo) {
  background: linear-gradient(155deg, #efe8db 0%, #e4d9c6 100%);
  color: var(--ink);
}
.interior-card-body { position: relative; z-index: 2; padding: 24px; width: 100%; }
.interior-card.has-photo .interior-card-name { color: #fff; }
.interior-card.has-photo .interior-card-desc { color: rgba(255,255,255,0.82); }
.interior-card-name { font-family: var(--font-serif); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.interior-card-desc { font-size: 12px; line-height: 1.8; color: var(--muted); max-width: 26em; }
@media (max-width: 900px) { .interior-grid { grid-template-columns: 1fr; } .interior-card { min-height: 200px; } }
@media (max-width: 640px) {
  .interior-grid { gap: 10px; }
  .interior-card:not(.has-photo) { min-height: 0; }
  .interior-card.has-photo { min-height: 140px; }
  .interior-card-body { padding: 16px 18px; }
  .interior-card-name { font-size: 16px; margin-bottom: 5px; }
  .interior-card-desc { font-size: 11.5px; }
}

/* ================================================================
   ⑧⑫ コーディネート提案 / 関連商品(共通カード)
   ================================================================ */
.product-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.product-tile { background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: box-shadow 0.25s ease, transform 0.25s ease; }
.product-tile:hover { box-shadow: 0 14px 32px rgba(0,0,0,0.08); transform: translateY(-3px); }
.product-tile-media { aspect-ratio: 3/2; background: #f0ebe1; overflow: hidden; }
.product-tile-media img { width: 100%; height: 100%; object-fit: cover; }
.product-tile-body { padding: 24px 18px 20px; }
.product-tile-tag { font-size: 10px; color: var(--accent-dark); border: 1px solid var(--border-3); border-radius: 12px; padding: 2px 9px; display: inline-block; margin-bottom: 8px; }
.product-tile-name { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.product-tile-desc { font-size: 11.5px; color: var(--muted); line-height: 1.7; margin-bottom: 10px; }
.product-tile-price { font-size: 12.5px; color: var(--accent-dark); font-weight: 600; }
.product-tile-price .rank { font-size: 10px; color: var(--muted-2); font-weight: 400; margin-left: 4px; }
@media (max-width: 640px) {
  /* スマホは見やすさ重視で横2列・カードを小さめに(この生地で製作できる商品と同様) */
  .product-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .product-tile-body { padding: 16px 10px 12px; }
  .product-tile-tag { font-size: 9px; padding: 1px 7px; margin-bottom: 5px; }
  .product-tile-name { font-size: 12px; margin-bottom: 2px; }
  .product-tile-desc {
    font-size: 10px; line-height: 1.5; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .product-tile-price { font-size: 11px; }
}

/* ================================================================
   ⑨ ブランドストーリー
   ================================================================ */
.story-band { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; background: var(--surface); }
.story-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.story-photos img { width: 100%; height: 100%; object-fit: cover; }
.story-copy { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 72px 64px; }
.story-title { font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1.6; }
.story-body { font-size: 13.5px; color: var(--body-text); line-height: 2; max-width: 34em; }
.story-link { font-size: 12.5px; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; align-self: flex-start; }
.story-link:hover { color: var(--accent-dark); border-color: var(--accent-dark); }
@media (max-width: 900px) {
  .story-band { grid-template-columns: 1fr; }
  .story-photos { height: 46vh; }
  .story-copy { padding: 44px 26px; }
}

/* ================================================================
   ⑩ FAQ
   ================================================================ */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; font-size: 14px; color: var(--ink); font-weight: 500; font-family: inherit;
}
.faq-q-mark { color: var(--accent); font-family: var(--font-serif); font-weight: 600; margin-right: 12px; }
.faq-toggle-icon { flex-shrink: 0; width: 18px; height: 18px; position: relative; }
.faq-toggle-icon::before, .faq-toggle-icon::after {
  content: ''; position: absolute; background: var(--accent); top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq-toggle-icon::before { width: 14px; height: 1.5px; }
.faq-toggle-icon::after { width: 1.5px; height: 14px; transition: transform 0.25s ease; }
.faq-item.is-open .faq-toggle-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-a-inner { padding: 0 4px 24px 30px; font-size: 12.5px; color: var(--muted); line-height: 1.9; }

/* ================================================================
   ⑪ カタログ・仕様書PDF
   ================================================================ */
.document-list { display: flex; flex-wrap: wrap; gap: 14px; }
.document-item {
  display: flex; align-items: center; gap: 14px; padding: 16px 22px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px; transition: border-color 0.2s, box-shadow 0.2s;
}
.document-item:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(0,0,0,0.06); }
.document-icon { color: var(--accent); flex-shrink: 0; }
.document-icon svg { width: 26px; height: 26px; }
.document-label { font-size: 13px; color: var(--ink); font-weight: 500; }
.document-sub { font-size: 10.5px; color: var(--muted-2); margin-top: 2px; }
.document-nav-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; }
.document-nav-links a { font-size: 12.5px; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.document-nav-links a:hover { color: var(--accent-dark); border-color: var(--accent-dark); }

/* ================================================================
   拡張セクション(施工写真・動画・レビュー・コラム・SNS・接客ポイント)
   データが無い間は product-render.js 側で hidden のまま維持されます。
   ================================================================ */
.video-wrap { max-width: 900px; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 自社mp4動画(縦長のカーテン動画など)は、iframeのように無理に16:9へ引き伸ばさず、
   枠内に収まる形(object-fit:contain)で表示する */
.video-frame--native { aspect-ratio: auto; background: #f0ebe1; }
.video-frame--native video { position: static; display: block; width: 100%; max-height: 600px; object-fit: contain; background: #000; }

.sales-points-panel {
  max-width: 1200px; margin: 0 auto; padding: 48px 40px;
  background: linear-gradient(155deg, #f3ede1 0%, #ece2cf 100%);
  border-radius: 10px; border: 1px solid var(--border-3);
}
.sales-points-head { margin-bottom: 24px; }
.sales-points-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sales-point-item {
  display: flex; gap: 12px; background: rgba(255,255,255,0.6); border-radius: 6px; padding: 16px 18px;
}
.sales-point-mark { font-family: var(--font-serif); color: var(--accent); font-weight: 700; flex-shrink: 0; }
.sales-point-text { font-size: 12.5px; color: var(--body-text); line-height: 1.8; }
@media (max-width: 640px) { .sales-points-panel { padding: 28px 20px; } }

.construction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.construction-item { border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--border); }
.construction-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* 取り付け方法(howToGrid)は手順図・採寸図など文字入りの画像なので、切らずに全体を表示する */
#howToGrid .construction-item img { object-fit: contain; background: #f6f3ec; }
.construction-item-caption { padding: 12px 16px; font-size: 12px; color: var(--muted); line-height: 1.7; }
/* 取り付け方法(howToGrid)は手順写真なので、スマホでも1列縦積みだと縦長になりすぎる。
   横2列で配置する(施工事例など他のconstruction-grid利用箇所は対象外) */
@media (max-width: 640px) {
  #howToGrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  #howToGrid .construction-item-caption { padding: 8px 10px; font-size: 10.5px; line-height: 1.6; }
}

.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.review-card { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 22px 24px; }
.review-quote-mark { font-family: var(--font-serif); font-size: 28px; color: var(--gold); line-height: 1; }
.review-body { font-size: 13px; color: var(--body-text); line-height: 1.9; margin: 8px 0 14px; }
.review-meta { font-size: 11px; color: var(--muted-2); }

.sns-row { display: flex; flex-wrap: wrap; gap: 12px; }
.sns-link {
  display: flex; align-items: center; gap: 8px; padding: 10px 18px;
  border: 1px solid var(--border-3); border-radius: 20px; font-size: 12.5px; color: var(--accent-dark);
  transition: background 0.2s, color 0.2s;
}
.sns-link:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ================================================================
   閉じCTAバンド
   ================================================================ */
.closing-cta { background: var(--footer-bg); color: #efe9df; padding: 72px 24px; text-align: center; }
@media (max-width: 640px) {
  .closing-cta { padding: 44px 20px; }
  .closing-cta-title { font-size: 20px; margin: 10px 0 8px; }
  .closing-cta-lead { margin-bottom: 20px; }
}
.closing-cta-eyebrow { font-family: var(--font-display); font-style: italic; font-size: 12px; letter-spacing: 0.3em; color: #a99a85; text-transform: uppercase; }
.closing-cta-title { font-family: var(--font-serif); font-size: 24px; margin: 14px 0 12px; }
.closing-cta-lead { font-size: 12.5px; color: #b5ab9c; max-width: 32em; margin: 0 auto 28px; line-height: 1.9; }
.closing-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.closing-cta .btn-outline { border-color: #cfc7ba; color: #efe9df; }
.closing-cta .btn-outline:hover { background: #efe9df; color: var(--footer-bg); }
/* 「カタログを請求する」は主張しすぎない、控えめな配色にする */
.closing-cta .btn-muted { border-color: #55504a; color: #a99a85; background: none; }
.closing-cta .btn-muted:hover { background: #3d3833; color: #efe9df; border-color: #6b6255; }

/* ================================================================
   特集(FEATURE)バナー … #sectionFeature（該当商品ページ → 特集ページへの導線）
   2026-09にサムネイル画像(features.jsonのheroImage)を追加して構図を見直した。
   クラス名は意図的に「feature-promo」にしている(「⑥商品特徴」の`.feature-card`と
   名前が重複していたことが過去に不具合の原因になったため、名前を分けて再発防止)
   ================================================================ */
.feature-promo-grid { display: flex; flex-direction: column; gap: 14px; }
.feature-promo {
  display: flex; align-items: stretch; background: #faf8f5; border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden; transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.feature-promo:hover { box-shadow: 0 14px 32px rgba(0,0,0,0.1); transform: translateY(-3px); }
.feature-promo-media { flex: 0 0 220px; position: relative; overflow: hidden; background: #ece5d8; }
/* このバナー画像はテキストも組み込んで作成しているため、object-fit: cover で
   トリミングすると文字が見切れてしまう。contain で画像全体を表示する
   (余白は .feature-promo-media の背景色で埋まる) */
.feature-promo-media img {
  width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.4s ease;
}
.feature-promo:hover .feature-promo-media img { transform: scale(1.06); }
.feature-promo-body {
  flex: 1 1 auto; border-left: 3px solid var(--accent); padding: 26px 28px;
  display: flex; flex-direction: column; justify-content: center;
}
.feature-promo-eyebrow {
  font-family: var(--font-display); font-style: italic; font-size: 12px;
  letter-spacing: 0.24em; color: var(--accent-light); text-transform: uppercase; display: block;
}
.feature-promo-title {
  font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--ink);
  letter-spacing: 0.04em; line-height: 1.6; margin: 8px 0 6px;
}
.feature-promo-desc { font-size: 12.5px; color: var(--muted); line-height: 1.85; }
.feature-promo-link { display: inline-block; margin-top: 14px; font-size: 12.5px; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
@media (max-width: 640px) {
  .feature-promo { flex-direction: column; }
  .feature-promo-media { flex: none; width: 100%; aspect-ratio: 16 / 9; }
  .feature-promo-body { border-left: none; border-top: 3px solid var(--accent); padding: 20px 18px; }
  .feature-promo-title { font-size: 16px; }
}

/* ================================================================
   汎用: 読み込み中
   ================================================================ */
.product-loading { padding: 160px 24px; text-align: center; color: var(--muted-2); font-size: 13px; }

@media (max-width: 640px) {
  /* スマホのヘッダーは実際の高さが約61pxしかないため、PC用の余白(120px)のままだと
     メニューをタップした時のジャンプ先が本来の位置より大きく下にずれてしまう */
  .section-wrap { padding: 28px 18px; scroll-margin-top: 72px; }
  .section-wrap.is-tight { padding-top: 20px; padding-bottom: 20px; }
  /* スマホでは主要セクション同士の余白もさらに詰める */
  #sectionPriceQuick { padding-top: 24px; }
  #sectionPriceQuick, #sectionSpecSheet, #sectionFeatures, #sectionStyles,
  #sectionInterior, #sectionCoordinate, #sectionReviews { padding-bottom: 28px; }
  #sectionSpecSheet, #sectionFeatures, #sectionStyles,
  #sectionInterior, #sectionCoordinate, #sectionReviews { padding-top: 28px; }
  .section-head { margin-bottom: 24px; }
  .section-title { font-size: 22px; }
  .section-lead { margin-top: 8px; font-size: 12.5px; }
}