@charset "UTF-8";
/* =========================================================
   カートプラザひらの　パーツ通販　共通スタイル
   すべてのカテゴリページがこの1枚を読み込みます。
   ========================================================= */

:root{
  --red:#d3132a;
  --red-dim:#a80e21;
  --bg:#ffffff;
  --bg-panel:#f6f4f2;
  --line:#e3ddd8;
  --text:#1c1c1c;
  --text-muted:#6b6560;
  --yellow:#ffd23c;
  --font-display:"Zen Kaku Gothic New",sans-serif;
  --font-body:"Noto Sans JP",sans-serif;
  --font-mono:"Share Tech Mono",monospace;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    repeating-linear-gradient(-45deg, rgba(211,19,42,.03) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, #faf8f7 0%, #f2efec 100%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.7;
}
a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px;}

/* ---------- ヘッダー ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px;}
.brand{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:900;
  text-decoration:none;font-size:1rem;color:var(--text);
  white-space:nowrap;min-width:0;
}
.brand .logo-badge{
  background:var(--red);display:inline-flex;align-items:center;
  padding:7px 10px;border-radius:6px;line-height:0;
}
.brand .logo-badge img{height:20px;width:auto;display:block;}
.header-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end;}
.header-links a{font-size:.85rem;text-decoration:none;color:var(--text-muted);white-space:nowrap;}
.header-links a:hover{color:var(--red);}
@media (max-width:520px){
  .brand{font-size:0;gap:0;}
  .brand .logo-badge{padding:6px 8px;}
  .brand .logo-badge img{height:18px;}
  .header-links a{font-size:.76rem;}
}

/* ---------- カテゴリ見出し帯 ---------- */
.cat-hero{
  background:
    radial-gradient(ellipse 700px 300px at 85% 130%, rgba(211,19,42,.5), transparent 60%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 3px, transparent 3px 26px),
    linear-gradient(135deg, #241417 0%, #1c1c1c 55%, #2b0e13 100%);
  color:#fff;
  padding:26px 16px 24px;
  border-bottom:4px solid var(--red);
}
.cat-hero .wrap{padding:0 20px;}
.cat-hero .crumb{font-size:.78rem;color:#bdb6b1;margin:0 0 6px;}
.cat-hero .crumb a{color:#bdb6b1;text-decoration:none;}
.cat-hero .crumb a:hover{color:#fff;}
.cat-hero h1{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.5rem,4.4vw,2.1rem);
  margin:0;letter-spacing:.03em;
}
.cat-hero .lead{margin:8px 0 0;font-size:.88rem;color:#e8e2de;}
.cat-hero .tax-note{
  display:inline-block;margin-top:10px;
  background:var(--yellow);color:#1c1c1c;
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  padding:3px 12px;border-radius:999px;
}

/* ---------- カテゴリ横並びメニュー ---------- */
.cat-nav{
  background:#fff;border-bottom:1px solid var(--line);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.cat-nav .inner{display:flex;gap:6px;padding:10px 20px;max-width:1120px;margin:0 auto;}
.cat-link{
  font-family:var(--font-display);font-weight:700;font-size:.83rem;
  text-decoration:none;color:var(--text-muted);
  padding:6px 14px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent;
}
.cat-link:hover{color:var(--red);border-color:var(--line);}
.cat-link.now{background:var(--bg-panel);color:var(--red);border-color:var(--line);}

/* ---------- 読み物・FAQ ---------- */
.article{
  background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:20px 22px;margin:30px 0 0;font-size:.88rem;
}
.article h2{font-family:var(--font-display);font-size:1.05rem;margin:0 0 10px;padding-left:11px;border-left:4px solid var(--red);}
.article h3{font-family:var(--font-display);font-size:.95rem;margin:18px 0 4px;}
.article p{margin:0 0 10px;line-height:1.85;}
.article ul{margin:0 0 10px;padding-left:1.3em;}
.updated{font-size:.78rem;color:var(--text-muted);text-align:right;margin:14px 0 0;}
.noscript-msg{
  background:#fff3f4;border:1px solid var(--red);border-radius:6px;
  padding:16px 18px;margin:20px 0;font-size:.88rem;
}

/* ---------- 絞り込み ---------- */
/* ページ先頭にだけ表示します（スクロール追従はしません） */
.filter-bar{
  background:rgba(250,248,247,.96);
  border-bottom:1px solid var(--line);
  padding:10px 0;
}
.filter-row{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;}
.chips{
  display:flex;gap:8px;flex:1;min-width:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto;
  font-family:var(--font-display);font-weight:700;font-size:.84rem;
  padding:7px 16px;border-radius:999px;
  border:2px solid var(--line);background:#fff;color:var(--text);
  cursor:pointer;white-space:nowrap;
}
.chip:hover{border-color:var(--red);color:var(--red);}
.chip.on{background:var(--red);border-color:var(--red);color:#fff;}
.search-box{
  flex:0 0 170px;
  padding:8px 12px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--font-body);font-size:16px;background:#fff;
  min-width:0;
}
.result-count{font-size:.8rem;color:var(--text-muted);padding:8px 0 0;margin:0;}

/* スマホでは検索欄を1段下げ、絞り込みは横スクロールに */
@media (max-width:640px){
  .filter-bar{padding:8px 0;}
  .filter-row{flex-direction:column;align-items:stretch;gap:8px;}
  .search-box{flex:none;width:100%;}
  .chip{font-size:.8rem;padding:6px 14px;}
  .result-count{padding-top:6px;font-size:.75rem;}
}

/* ---------- 商品グリッド ---------- */
main{padding:22px 0 30px;}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px;
}
.item{
  background:#fff;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;display:flex;flex-direction:column;position:relative;
}
.item .ph{
  height:160px;background:#faf8f7;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line);padding:8px;
}
.item .ph img{max-width:100%;max-height:100%;object-fit:contain;}
.item .ph.noimg{
  flex-direction:column;gap:4px;
  color:#c4bdb7;font-family:var(--font-display);font-weight:700;
  background:repeating-linear-gradient(-45deg,#f7f4f2 0 6px,#faf8f7 6px 14px);
}
.item .ph.noimg .mark{font-family:var(--font-mono);font-size:1.5rem;letter-spacing:.1em;}
.item .ph.noimg .txt{font-size:.72rem;}
.item .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1;}
.item .tag{font-family:var(--font-mono);font-size:.7rem;color:var(--red);letter-spacing:.08em;margin:0;}
.item h3{font-family:var(--font-display);font-weight:700;font-size:.98rem;line-height:1.45;margin:0;}
.item .spec{font-size:.78rem;color:var(--text);margin:0;font-weight:700;}
.item .desc{font-size:.76rem;color:var(--text-muted);margin:0;line-height:1.55;}
.item .price-old{font-size:.76rem;color:var(--text-muted);text-decoration:line-through;margin:0;}
.item .price{font-family:var(--font-display);font-weight:900;color:var(--red);font-size:1.2rem;margin:0;line-height:1.2;}
.item .price small{font-size:.7rem;color:var(--text);font-weight:700;}
.item .price .line-total{
  display:block;margin-top:2px;
  font-size:.82rem;color:var(--text);font-weight:700;
}
.item .ask{font-family:var(--font-display);font-weight:900;font-size:.95rem;margin:0;color:var(--text);}
.item select{
  font-family:var(--font-body);font-size:16px;
  padding:8px;border:1px solid var(--line);border-radius:4px;background:#fff;width:100%;
}
.item .add{
  margin-top:auto;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  background:var(--red);color:#fff;border:none;border-radius:999px;
  padding:11px 0;cursor:pointer;
}
.item .add:hover{background:var(--red-dim);}
.item .add.done{background:#1c1c1c;}
.item .contact-btn{
  margin-top:auto;display:block;text-align:center;
  font-family:var(--font-display);font-weight:700;font-size:.88rem;
  border:2px solid var(--red);color:var(--red);border-radius:999px;
  padding:9px 0;text-decoration:none;
}
.badge-row{position:absolute;top:8px;left:8px;z-index:2;display:flex;gap:5px;}
.badge-row span{
  font-family:var(--font-display);font-weight:900;font-size:.7rem;
  padding:3px 9px;border-radius:3px;color:#fff;letter-spacing:.04em;
}
.badge-new{background:#1c7a3c;}
.badge-sale{background:var(--red);}
.empty-msg{padding:50px 0;text-align:center;color:var(--text-muted);}

/* ---------- 注意書き ---------- */
.notes{
  background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:18px 20px;margin:28px 0 90px;font-size:.85rem;
}
.notes h2{font-family:var(--font-display);font-size:1rem;margin:0 0 8px;color:var(--red);}
.notes ul{margin:0;padding-left:1.3em;}
.notes li{margin-bottom:5px;}

/* ---------- カートバー ---------- */
.cart-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#1c1c1c;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;
  box-shadow:0 -6px 20px rgba(0,0,0,.25);
}
.cart-bar .info{
  font-family:var(--font-display);font-weight:700;font-size:.92rem;
  line-height:1.45;min-width:0;
}
.cart-bar .info .row{display:block;white-space:nowrap;}
.cart-bar .info .count{color:var(--yellow);}
.cart-bar button{
  font-family:var(--font-display);font-weight:900;font-size:.92rem;
  background:var(--red);color:#fff;border:none;border-radius:999px;
  padding:10px 24px;cursor:pointer;
  line-height:1.35;text-align:center;flex:0 0 auto;
}
.cart-bar button .l{display:block;white-space:nowrap;}
.cart-bar button:hover{background:var(--red-dim);}
@media (max-width:400px){
  .cart-bar{padding:10px 12px;gap:8px;}
  .cart-bar .info{font-size:.83rem;}
  .cart-bar button{font-size:.86rem;padding:9px 18px;}
}

/* ---------- カートパネル ---------- */
.cart-panel{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:#fff;border-top:4px solid var(--red);
  border-radius:14px 14px 0 0;
  max-height:86vh;overflow-y:auto;
  padding:20px 18px 30px;
  transform:translateY(105%);
  transition:transform .3s ease;
  box-shadow:0 -10px 40px rgba(0,0,0,.3);
}
.cart-panel.open{transform:translateY(0);}
.cart-panel .wrap{max-width:720px;}
.cart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.cart-head h2{font-family:var(--font-display);font-weight:900;font-size:1.2rem;margin:0;}
.cart-close{background:none;border:none;font-size:1.6rem;cursor:pointer;line-height:1;color:var(--text-muted);}
.cart-list{border-top:1px solid var(--line);}
.cart-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:.86rem;
}
.cart-row .nm{flex:1;line-height:1.4;}
.cart-row .pr{font-family:var(--font-mono);white-space:nowrap;}
.cart-row .qty{display:flex;align-items:center;gap:4px;}
.cart-row .qty button{
  width:26px;height:26px;border:1px solid var(--line);background:#fff;
  border-radius:4px;cursor:pointer;font-size:.9rem;line-height:1;
}
.cart-row .rm{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.78rem;text-decoration:underline;}
.cart-row .qty small{font-size:.72rem;color:var(--text-muted);margin-left:1px;}
.cart-row .nm .from{
  display:inline-block;background:#1c1c1c;color:#ff9147;
  font-size:.66rem;font-weight:700;padding:1px 6px;border-radius:3px;
  margin-right:4px;vertical-align:1px;
}
.cart-units{
  display:flex;justify-content:flex-end;
  padding:10px 0 0;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  color:var(--red);
}
.cart-total{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;font-family:var(--font-display);font-weight:900;font-size:1.1rem;
}
.cart-note{font-size:.78rem;color:var(--text-muted);margin:0 0 16px;}
.cart-empty{padding:30px 0;text-align:center;color:var(--text-muted);}

/* ---------- 注文フォーム ---------- */
.order-form h3{font-family:var(--font-display);font-weight:900;font-size:1rem;margin:18px 0 10px;border-left:4px solid var(--red);padding-left:10px;}
.order-form label{display:block;font-size:.82rem;font-weight:700;margin:10px 0 4px;}
.order-form label .req{color:var(--red);font-size:.72rem;margin-left:4px;}
.order-form input[type=text],
.order-form input[type=tel],
.order-form input[type=email],
.order-form textarea{
  width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;
  font-family:var(--font-body);font-size:16px;
}
.order-form textarea{min-height:70px;resize:vertical;}
.submit-btn{
  display:block;width:100%;margin-top:18px;
  font-family:var(--font-display);font-weight:900;font-size:1.05rem;
  background:var(--red);color:#fff;border:none;border-radius:999px;
  padding:14px 0;cursor:pointer;
}
.submit-btn:hover{background:var(--red-dim);}
.hp-field{position:absolute;left:-9999px;top:-9999px;}
.agree{font-size:.78rem;color:var(--text-muted);margin:12px 0 0;}

footer{
  background:#1c1c1c;color:#ddd;
  padding:26px 0 110px;font-size:.82rem;
}
footer a{color:#fff;}
footer .flinks{margin-top:8px;}
footer .flinks a{margin-right:14px;}

@media (prefers-reduced-motion:reduce){
  .cart-panel{transition:none;}
}