/* ============================================================
   やぎみつタオル 商品ページスタイルシート
   対象: ジャンボエステバス（110×195cm）商品ページ
   更新: 2026年7月
   配色: 白/グレーベース（本体サイトに合わせた配色）
   文字コード: UTF-8
============================================================ */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  /* ── カラー ── */
  --navy:   #0C2F4A;   /* アクセント・見出し */
  --ink:    #1C1C1C;   /* 本文 */
  --gold:   #B5224E;   /* メインアクセント（本体サイトに合わせた赤） */
  --gold-d: #8E1A3C;   /* ボタンホバー（赤・暗め） */
  --bg:     #FFFFFF;   /* ページ背景 */
  --bg2:    #F5F5F5;   /* セクション交互背景 */
  --bg3:    #EBEBEB;   /* 一段濃いグレー */
  --water:  #EEF4FA;   /* 薄ブルーグレー（スペック背景） */
  --muted:  #666666;
  --border: #DDDDDD;
  --white:  #FFFFFF;
  /* ── タイポ ── */
  --ff-disp: Georgia,"Times New Roman",serif;
  --ff-body: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --fs-xs:11px; --fs-sm:13px; --fs-base:15px;
  --fs-md:18px; --fs-lg:24px; --fs-xl:34px;
  --lh: 1.8;
  /* ── レイアウト ── */
  --max:  880px;
  --side: 40px;
  /* PC固定カートバーの高さ分 */
  --sticky-cart-h: 72px;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* PC：下部固定カートバーのタブ行分の余白（56px） */
  padding-bottom: 56px;
}

/* ===== 横糸シグネチャ ===== */
.loom-wrap { padding:36px 0; display:flex; justify-content:center; }
.loom { display:flex; flex-direction:column; gap:3px; width:48px; }
.loom span { display:block; height:1.5px; background:var(--gold); opacity:.7; border-radius:1px; }
.loom span:nth-child(2) { width:32px; }
.loom span:nth-child(3) { width:40px; }

/* ===== ヘッダー ===== */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--side);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.logo { display:flex; align-items:center; text-decoration:none; height:100%; padding:8px 0; }
.logo-img { height:36px; width:auto; display:block; object-fit:contain; }
.site-header nav { display:flex; gap:24px; align-items:center; }
.site-header nav a { font-size:var(--fs-sm); color:var(--muted); text-decoration:none; transition:color .15s; }
.site-header nav a:hover { color:var(--navy); }
.nav-cta { background:var(--gold); color:var(--white) !important; padding:7px 16px; border-radius:3px; font-weight:600; }
.nav-cta:hover { background:var(--gold-d) !important; opacity:1; }

/* ===== パンくず ===== */
.breadcrumb { max-width:var(--max); margin:0 auto; padding:10px var(--side); font-size:var(--fs-xs); color:var(--muted); border-bottom:1px solid var(--border); }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--navy); text-decoration:underline; }

/* ===== ヒーロー（白背景） ===== */
.hero { background:var(--bg2); padding:0 var(--side); border-bottom:1px solid var(--border); }
.hero-inner { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:end; padding-top:40px; }
.hero-copy { padding-bottom:44px; }
.eyebrow { font-size:var(--fs-xs); color:var(--gold); letter-spacing:.16em; text-transform:uppercase; margin-bottom:10px; font-weight:600; }
h1.hero-title { font-family:var(--ff-disp); font-size:38px; color:var(--navy); line-height:1.25; margin-bottom:8px; }
.hero-sub { font-size:var(--fs-sm); color:var(--muted); letter-spacing:.06em; margin-bottom:16px; }
.hero-lead { font-size:var(--fs-base); color:var(--ink); line-height:var(--lh); max-width:420px; margin-bottom:22px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px; }
.chip { font-size:var(--fs-xs); padding:4px 11px; border-radius:20px; letter-spacing:.04em; font-weight:500; }
.chip-g { background:rgba(181,34,78,.08); color:#8E1A3C; border:1px solid rgba(181,34,78,.3); }
.chip-w { background:var(--bg3); color:var(--muted); border:1px solid var(--border); }
.btn-p {
  display:inline-block; background:var(--gold); color:var(--white);
  font-size:var(--fs-sm); font-weight:600; padding:12px 26px;
  border-radius:3px; text-decoration:none; letter-spacing:.07em;
  margin-right:10px; transition:background .15s;
}
.btn-p:hover { background:var(--gold-d); }
.btn-g {
  display:inline-block; color:var(--navy);
  font-size:var(--fs-sm); padding:12px 0;
  text-decoration:none; border-bottom:1px solid var(--navy);
  letter-spacing:.04em;
}
.btn-g:hover { color:var(--gold); border-color:var(--gold); }

/* ヒーロー画像ギャラリー */
.hero-gallery { width:380px; }
.main-img-wrap { width:100%; aspect-ratio:4/3; background:var(--bg3); border-radius:4px 4px 0 0; overflow:hidden; border:1px solid var(--border); border-bottom:none; }
.main-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb-row { display:flex; gap:4px; margin-top:4px; }
.thumb { width:calc(12.5% - 3.5px); aspect-ratio:1; overflow:hidden; border-radius:2px; cursor:pointer; opacity:.6; transition:opacity .15s; border:1.5px solid transparent; }
.thumb:hover, .thumb.active { opacity:1; border-color:var(--gold); }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* 信頼バー */
.trust-bar { background:var(--bg3); border-top:1px solid var(--border); padding:12px var(--side); }
.trust-inner { max-width:var(--max); margin:0 auto; display:flex; gap:32px; flex-wrap:wrap; }
.trust-item { font-size:var(--fs-xs); color:var(--muted); display:flex; align-items:center; gap:6px; }
.trust-item strong { color:var(--navy); font-weight:600; }

/* ===== セクション共通 ===== */
.sec { padding:56px var(--side); }
.inner { max-width:var(--max); margin:0 auto; }
.sec-label { font-size:var(--fs-xs); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
h2.sec-title { font-family:var(--ff-disp); font-size:var(--fs-xl); line-height:1.28; color:var(--navy); margin-bottom:10px; }
.sec-lead { font-size:var(--fs-base); color:var(--muted); margin-bottom:36px; max-width:560px; line-height:var(--lh); }

/* ===== 商品説明 ===== */
.desc-section { background:var(--white); }
.desc-intro { font-size:var(--fs-base); color:var(--ink); line-height:var(--lh); margin-bottom:40px; max-width:720px; }
.desc-intro p+p { margin-top:1em; }

.desc-block { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-bottom:48px; padding-bottom:48px; border-bottom:1px solid var(--border); }
.desc-block:last-of-type { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.desc-block.reverse { direction:rtl; }
.desc-block.reverse > * { direction:ltr; }
.desc-block-text h3 { font-size:var(--fs-md); font-weight:700; color:var(--navy); margin-bottom:12px; }
.desc-block-text p { font-size:var(--fs-sm); color:var(--muted); line-height:var(--lh); }
.desc-block-text p+p { margin-top:.9em; }
.desc-block-img { width:100%; border-radius:4px; overflow:hidden; background:var(--bg2); border:1px solid var(--border); }
.desc-block-img img { width:100%; height:auto; display:block; }

/* 素材こだわり帯（紺→グレー帯に変更） */
.material-band { background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:32px 36px; margin-top:48px; }
.material-band h3 { font-family:var(--ff-disp); font-size:var(--fs-md); color:var(--navy); margin-bottom:14px; }
.material-band p { font-size:var(--fs-sm); color:var(--muted); line-height:var(--lh); max-width:680px; }
.material-band p+p { margin-top:.9em; }

/* ===== スペック ===== */
.spec-section { background:var(--bg2); }
.spec-layout { display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start; }
.spec-table { width:100%; border-collapse:collapse; border:1px solid var(--border); overflow:hidden; border-radius:4px; }
.spec-table tr:not(:last-child) td { border-bottom:1px solid var(--border); }
.spec-table td { padding:12px 18px; font-size:var(--fs-sm); vertical-align:top; line-height:1.55; }
.spec-table td:first-child { font-weight:600; color:var(--navy); background:var(--water); width:130px; border-right:1px solid var(--border); }
.spec-table td:last-child { color:var(--ink); background:var(--white); }

/* 価格カード（白ベース） */
.price-card { background:var(--white); border:1px solid var(--border); border-radius:4px; padding:24px 26px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.price-label { font-size:var(--fs-sm); color:var(--muted); margin-bottom:4px; }
.price-num { font-family:var(--ff-disp); font-size:30px; color:var(--navy); margin-bottom:3px; }
.price-num small { font-size:var(--fs-sm); color:var(--muted); }
.price-note { font-size:var(--fs-xs); color:var(--muted); margin-bottom:16px; }
.color-ttl { font-size:var(--fs-xs); font-weight:600; color:var(--navy); letter-spacing:.08em; margin-bottom:8px; }
#cp { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.cdot { width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,.15); cursor:pointer; transition:transform .15s; }
.cdot:hover { transform:scale(1.3); }
.color-name { font-size:var(--fs-xs); color:var(--muted); min-height:16px; margin-bottom:16px; }
.btn-outline-g {
  display:block; text-align:center;
  border:1px solid var(--gold); color:var(--gold);
  font-size:var(--fs-xs); padding:9px 0; border-radius:3px;
  text-decoration:none; letter-spacing:.06em; margin-top:10px;
  transition:background .15s;
}
.btn-outline-g:hover { background:rgba(181,34,78,.06); }

/* カートJSエリア */
#cartjs-wrap { background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:16px; margin-bottom:4px; }
.cartjs-below { padding-top:16px; }

/* ===== 比較表 ===== */
.compare-section { background:var(--white); }
.compare-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.compare-table th, .compare-table td { padding:11px 14px; border:1px solid var(--border); text-align:center; }
.compare-table thead th { background:var(--navy); color:var(--white); font-weight:600; font-size:var(--fs-xs); letter-spacing:.04em; }
.compare-table thead th:first-child { text-align:left; }
.compare-table td:first-child { text-align:left; font-weight:600; color:var(--navy); background:var(--water); }
.compare-table .this { background:#FFF8EE; font-weight:700; color:var(--navy); }
.this-label { display:inline-block; font-size:10px; background:var(--gold); color:var(--white); padding:1px 6px; border-radius:2px; margin-left:4px; vertical-align:middle; }

/* ===== 用途 ===== */
.uses-section { background:var(--bg2); }
.uses-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.use-card { background:var(--white); border:1px solid var(--border); border-radius:4px; padding:22px 26px; position:relative; overflow:hidden; }
.use-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold); }
.use-card h3 { font-size:var(--fs-base); font-weight:700; color:var(--navy); margin-bottom:8px; }
.use-card p { font-size:var(--fs-sm); color:var(--muted); line-height:var(--lh); }

/* ===== 製造工程（白背景） ===== */
.process-section { background:var(--navy); padding:56px var(--side); }
.process-section h2 { color:var(--white); }
.process-section .sec-lead { color:rgba(255,255,255,.7); max-width:600px; }
.process-flow { display:flex; margin-top:32px; position:relative; }
.process-flow::after { content:''; position:absolute; top:26px; left:5%; right:5%; height:1px; background:rgba(181,34,78,.25); z-index:0; }
.p-step { flex:1; text-align:center; position:relative; z-index:1; }
.p-dot { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.08); border:1.5px solid rgba(181,34,78,.4); margin:0 auto 13px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:700; color:var(--gold); }
.p-name { font-size:var(--fs-sm); font-weight:600; color:var(--white); margin-bottom:3px; }
.p-sub { font-size:var(--fs-xs); color:rgba(255,255,255,.45); }
.process-body { font-size:var(--fs-sm); color:rgba(255,255,255,.7); line-height:var(--lh); max-width:640px; margin-top:28px; }
.process-body p+p { margin-top:.9em; }

/* ===== FAQ ===== */
.faq-section { background:var(--white); }
.faq-list { list-style:none; border-top:1px solid var(--border); }
.faq-item { border-bottom:1px solid var(--border); }
.faq-btn { width:100%; background:none; border:none; padding:17px 0; text-align:left; cursor:pointer; display:flex; align-items:flex-start; gap:13px; font-family:inherit; }
.faq-q-mark { flex-shrink:0; width:24px; height:24px; background:var(--navy); color:var(--white); border-radius:50%; font-size:var(--fs-xs); font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.faq-q-text { font-size:var(--fs-base); font-weight:600; color:var(--navy); line-height:1.5; flex:1; transition:color .15s; }
.faq-btn:hover .faq-q-text { color:var(--gold); }
.faq-arrow { flex-shrink:0; width:18px; height:18px; margin-top:3px; color:var(--muted); transition:transform .2s; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-a { display:none; padding:0 0 16px 37px; }
.faq-a p { font-size:var(--fs-sm); color:var(--muted); line-height:var(--lh); }
.faq-item.open .faq-a { display:block; }

/* ===== レビュー ===== */
.review-section { background:var(--bg2); }
.review-card { background:var(--white); border:1px solid var(--border); border-radius:4px; padding:28px 32px; position:relative; }
.review-card::before { content:'\201C'; font-family:var(--ff-disp); font-size:72px; color:var(--gold); opacity:.18; position:absolute; top:4px; left:18px; line-height:1; pointer-events:none; }
.review-stars { color:var(--gold); font-size:14px; margin-bottom:10px; }
.review-text { font-size:var(--fs-sm); color:var(--ink); line-height:var(--lh); margin-bottom:12px; padding-top:10px; }
.review-meta { font-size:var(--fs-xs); color:var(--muted); }
.review-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:4px; margin-bottom:16px; }

/* ===== メーカー ===== */
.maker-section { background:var(--white); }
.maker-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.maker-name { font-family:var(--ff-disp); font-size:var(--fs-lg); color:var(--navy); margin-bottom:4px; }
.maker-tag { font-size:var(--fs-sm); color:var(--gold); letter-spacing:.06em; margin-bottom:16px; }
.maker-body { font-size:var(--fs-sm); color:var(--muted); line-height:var(--lh); margin-bottom:20px; }
.maker-body p+p { margin-top:.9em; }
.maker-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.maker-table td { padding:8px 0; border-bottom:1px solid var(--border); color:var(--muted); vertical-align:top; }
.maker-table td:first-child { color:var(--ink); font-weight:600; width:120px; }
.award-box { background:var(--water); border-left:3px solid var(--gold); padding:14px 18px; border-radius:0 4px 4px 0; font-size:var(--fs-sm); color:var(--muted); line-height:var(--lh); margin-top:20px; }
.award-box strong { color:var(--navy); display:block; margin-bottom:5px; }

/* ショールームカード（紺はブランドカラーとして維持） */
.showroom-card { background:var(--navy); border-radius:4px; padding:24px 28px; color:var(--white); margin-bottom:20px; }
.showroom-card .slabel { font-size:var(--fs-xs); letter-spacing:.1em; color:var(--gold); margin-bottom:8px; }
.showroom-card h3 { font-family:var(--ff-disp); font-size:var(--fs-md); margin-bottom:8px; }
.showroom-card p { font-size:var(--fs-sm); color:rgba(255,255,255,.7); line-height:1.75; margin-bottom:14px; }
.related-list { display:flex; flex-direction:column; gap:8px; }
.related-item { display:flex; gap:12px; align-items:center; padding:10px; background:var(--bg2); border:1px solid var(--border); border-radius:4px; text-decoration:none; transition:border-color .15s; }
.related-item:hover { border-color:var(--gold); }
.related-thumb { width:44px; height:44px; object-fit:cover; border-radius:2px; flex-shrink:0; background:var(--bg3); }
.related-name { font-size:var(--fs-sm); font-weight:600; color:var(--navy); }
.related-desc { font-size:var(--fs-xs); color:var(--muted); }
.related-price { font-size:var(--fs-xs); color:var(--gold); font-weight:500; }

/* ===== フッター ===== */
.site-footer { background:var(--navy); padding:36px var(--side); text-align:center; }
.site-footer p { font-size:var(--fs-xs); color:rgba(255,255,255,.45); line-height:1.9; }

/* ============================================================
   PC：画面下部固定カートパネル
   ============================================================ */
.sticky-cart-bar {
  display: block;          /* PCで表示 */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: var(--white);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -2px 16px rgba(0,0,0,.12);
}

/* タブ行（常に見える） */
.sticky-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--side);
  height: 56px;
  cursor: default;
  user-select: none;
  max-width: 100%;
  background: var(--white);
}
.sticky-tab-inner {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sticky-tab:hover { background: var(--bg2); }
.sticky-tab-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.sticky-product-img {
  width: 40px;
  height: 40px;
  border-radius: 3px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.sticky-product-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}
.sticky-product-price {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 1px;
}
.sticky-tab-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.sticky-toggle-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .04em;
  white-space: nowrap;
}
.sticky-buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: background .15s;
  border: none;
  cursor: pointer;
}
.sticky-buy-btn:hover { background: var(--gold-d); }

/* 展開パネル・cp2・toggle は廃止 */
.sticky-toggle-label { display:none; }



/* ============================================================
   SP：画面下部固定ナビ（HOME・商品一覧・購入ボタン）
   ============================================================ */
.sp-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0,0,0,.1);
  height: 60px;
}
.sp-bottom-nav-inner { display:flex; height:100%; }
.sp-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; font-size:10px; color:var(--muted); gap:4px; border-right:1px solid var(--border); transition:background .15s; }
.sp-nav-item:last-child { border-right:none; }
.sp-nav-item:hover { background:var(--bg2); }
.sp-nav-item svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sp-nav-item.sp-buy { background:var(--gold); color:var(--white); font-weight:600; font-size:12px; flex:1.4; }
.sp-nav-item.sp-buy:hover { background:var(--gold-d); }
.sp-nav-item.sp-buy svg { stroke:var(--white); }

/* ============================================================
   レスポンシブ（〜740px）
   ============================================================ */
@media (max-width:740px) {
  :root { --side:16px; }

  /* PC固定カートバーを非表示にして代わりにSP固定ナビを表示 */
  .sticky-cart-bar { display: none; }
  .sp-bottom-nav   { display: block; }

  /* SP 下部ナビ分の余白 */
  body { padding-bottom: 60px; }

  /* レイアウト崩れ防止 */
  .hero-inner,
  .spec-layout,
  .desc-block,
  .uses-grid,
  .maker-grid { grid-template-columns:1fr !important; direction:ltr !important; }
  .hero-gallery { width:100%; }
  h1.hero-title { font-size:26px; }
  h2.sec-title   { font-size:24px; }
  .process-flow { flex-direction:row; gap:0; }
  .process-flow::after { display:block; top:22px; }
  .p-dot { width:44px; height:44px; font-size:10px; margin-bottom:8px; }
  .p-name { font-size:11px; }
  .p-sub  { font-size:10px; }
  .process-section { padding:40px var(--side); }
  .process-body { font-size:12px; }
  .site-header nav { display:none; }

  /* ヒーローコピーの余白調整 */
  .hero-copy { padding-bottom:24px; }
}