/* Same as v3; omitted for brevity here but included in bundle */ 
:root { --bg:#f8fafc; --card:#fff; --border:#e2e8f0; --text:#0f172a; --muted:#64748b; --accent:#0ea5e9; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Meiryo',Arial,sans-serif}
.container{max-width:1100px;margin:0 auto;padding:16px}
.brand-banner{background:#fff;border-bottom:1px solid var(--border)}
.brand-banner img{display:block;margin:0 auto;max-width:1100px;width:100%;height:auto}
.header h1 { margin: 8px 0; font-size: 28px; }

/* スマホ表示（～600px）のときだけ14pxに */
@media (max-width: 600px) {
  .header h1 { font-size: 14px; }
}
.note{color:var(--muted);font-size:12px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
.span-2{grid-column:span 2}
h2,h3{margin:6px 0 10px}
.summary{display:grid;gap:8px}
.total{font-size:20px}
.input{padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:14px;width:100%}
.input.small{width:110px}
.btn{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer}
.btn.primary{border-color:var(--accent);background:var(--accent);color:#fff}
.btn.ghost{background:transparent}
.actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.form{display:grid;gap:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.req{color:#ef4444}
.option-group{display:grid;gap:8px}
.option{display:flex;align-items:center;justify-content:space-between;padding:10px;border:1px solid var(--border);border-radius:10px}
.option input{margin-right:10px}
.lines{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.line{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid var(--border)}
.line:last-child{border-bottom:none}
.footer{color:var(--muted);font-size:12px;text-align:center;padding-bottom:32px}
code{background:#f1f5f9;padding:2px 6px;border-radius:6px}
.badge{font-size:12px;color:#0f172a;background:#e2e8f0;padding:2px 6px;border-radius:6px}
.site-footer{background:#fff;border-top:1px solid var(--border);margin-top:24px}
.site-footer .container{padding:16px}
.site-footer .footer-links{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0}
.site-footer .footer-links a{font-size:14px;color:#2563eb;text-decoration:none}
.site-footer .footer-links a:hover{text-decoration:underline}
.site-footer .footer-note{color:var(--muted);font-size:12px;margin:4px 0 10px;line-height:1.6}
.site-footer .footer-meta{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;border-top:1px dashed var(--border);padding-top:10px}
.site-footer .footer-meta .brand{font-weight:600;color:#111827;text-decoration:none}
.site-footer .meta-block{color:#0f172a;font-size:13px}
.site-footer .copyright{color:#64748b;font-size:12px;margin-top:8px}
@media (max-width:860px){.grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.form-row{grid-template-columns:1fr}.brand-banner img{max-width:100%}}


/* ---- Sticky total footer ---- */
body { padding-bottom: 80px; } /* avoid overlap with fixed footer */
.sticky-footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #FF6100; color: #fff; z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}
.sticky-footer .sticky-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
}
.sticky-footer .sticky-promo { font-weight: 800; font-size: 20px; letter-spacing: .5px; }
.sticky-footer .sticky-label { font-size: 14px; opacity: .95; margin-left: 8px; margin-right: 8px; }
.sticky-footer .sticky-price { font-weight: 800; font-size: 22px; letter-spacing: .5px; }
.sticky-footer .sticky-btn {
  display: inline-block; padding: 10px 14px; font-weight: 700;
  text-decoration: none; background: #fff; color: #FF6100; border-radius: 10px;
}
.sticky-footer .sticky-btn:focus { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) {
  body { padding-bottom: 96px; }
  .sticky-footer .sticky-price { font-size: 20px; }
  .sticky-footer .sticky-inner { padding: 12px; }
  .sticky-footer .sticky-btn { padding: 12px 14px; }
}

/* ---- Toggle: first view vs scrolled ---- */
body:not(.scrolled) #stickyLabel { display: none; }
body:not(.scrolled) .sticky-footer .sticky-price { display: none; }
body:not(.scrolled) .sticky-footer .sticky-right { display: none; }
body.scrolled #stickyPromo { display: none; }
body.scrolled #stickyLabel1 { display: none; }

label.option:has(input:checked) {
  font-weight: 700;
  color: #FF6100;
}

/* ↘︎ has()が効かない古めのブラウザ向けフォールバック */
.option input[type="radio"]:checked + span,
.option input[type="checkbox"]:checked + span {
  font-weight: 700;
  color: #FF6100;
}

/* 任意：型番コードの表示も強調したい場合 */
#modelCode {
  font-weight: 700;
  color: #FF6100;
}
.catalog {
  margin: 0 auto;               /* 中央寄せ */
  max-width: 480px;             /* デスクトップ上限 */
  width: 100%;                  /* 画面が狭いときは縮む */
  display: flex;                /* 中身を中央寄せ */
  justify-content: center;
  align-items: center;
}

/* 内側の画像/ボタンもはみ出さないように */
.catalog img,
.catalog > a,
.catalog > button {
  display: block;
  max-width: 100%;
  height: auto;
}

/* スマホは最大336pxに制限 */
@media (max-width: 600px) {
  .catalog {
    max-width: 336px;           /* 336px以下で表示 */
  }
}