/* ===================================================================
   RACY'SPEED オンラインショップ
   ブランドサイトと同じ 白 × 紺 × ゴールド、書体は Shippori Mincho で統一
=================================================================== */

:root{
  --paper:#ffffff;
  --soft:#f5f7f9;
  --mist:#eceff3;
  --line:#e1e5ea;

  --ink:#14171c;
  --sub:#6d737c;

  --navy:#0b1f3a;
  --navy-deep:#081628;
  --navy-line:#23395a;

  --gold:#d4af37;
  --gold-light:#f4dc8a;
  --gold-dim:#a8842c;
  --gold-grad:linear-gradient(135deg,#f4dc8a,#d4af37 45%,#b8912a);

  --alert:#b3261e;
  --ok:#1c6b45;

  --serif:'Shippori Mincho','Yu Mincho',serif;
  --shadow-card:0 18px 40px -30px rgba(11,31,58,.3);
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  font-weight:500;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;}
input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4{font-weight:700;letter-spacing:.03em;line-height:1.6;}

.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
.nb{white-space:nowrap;}

/* ===== ヘッダー ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--navy);
  border-bottom:1px solid var(--navy-line);
}
.header-inner{
  max-width:1240px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;gap:28px;
}
.logo{display:flex;align-items:baseline;gap:10px;color:#fff;}
.logo b{font-size:20px;letter-spacing:.12em;}
.logo span{font-size:11px;color:var(--gold);letter-spacing:.18em;}
.header-nav{margin-left:auto;display:flex;align-items:center;gap:24px;}
.header-nav a{color:rgba(255,255,255,.82);font-size:14px;transition:color .2s var(--ease);}
.header-nav a:hover{color:var(--gold-light);}
.cart-btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--gold);color:var(--gold-light);
  padding:7px 16px;font-size:14px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.cart-btn:hover{background:var(--gold);color:var(--navy-deep);}
.cart-count{
  min-width:20px;height:20px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--navy-deep);
  font-size:12px;line-height:1;border-radius:10px;
}

/* ===== ページ見出し ===== */
.page-head{padding:56px 0 32px;border-bottom:1px solid var(--line);}
.page-head .eyebrow{
  font-size:11px;letter-spacing:.24em;color:var(--gold-dim);margin-bottom:10px;
}
.page-head h1{font-size:30px;}
.page-head p{margin-top:14px;color:var(--sub);font-size:15px;max-width:62ch;}

.section{padding:44px 0 72px;}

/* ===== お知らせ帯 ===== */
.notice-band{
  background:var(--soft);border-bottom:1px solid var(--line);
  padding:14px 0;font-size:14px;
}
.notice-band .wrap{display:flex;gap:14px;align-items:flex-start;}
.notice-band .tag{
  flex:none;background:var(--navy);color:var(--gold-light);
  font-size:11px;letter-spacing:.14em;padding:3px 10px;margin-top:4px;
}

/* ===== カテゴリ絞り込み ===== */
.filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;}
.filter button{
  border:1px solid var(--line);padding:7px 18px;font-size:13px;color:var(--sub);
  transition:all .2s var(--ease);
}
.filter button:hover{border-color:var(--navy-line);color:var(--ink);}
.filter button.on{background:var(--navy);border-color:var(--navy);color:#fff;}

/* ===== 商品グリッド ===== */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px;}
@media(max-width:1080px){.grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr);}}

.card{display:block;border:1px solid var(--line);background:var(--paper);transition:box-shadow .25s var(--ease),transform .25s var(--ease);}
.card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px);}
/* 商品写真は正方形に整えているので、一覧の枠も1:1にして上下が切れないようにする */
.card .thumb{position:relative;aspect-ratio:1/1;background:var(--mist);overflow:hidden;}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card .thumb .noimg{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--sub);font-size:12px;letter-spacing:.16em;
}
.card .body{padding:16px 16px 20px;}
.card .cond{font-size:11px;letter-spacing:.12em;color:var(--gold-dim);}
.card h3{font-size:15px;margin:6px 0 12px;line-height:1.7;}
.card .price{font-size:19px;letter-spacing:.02em;}
.card .price small{font-size:11px;color:var(--sub);margin-left:6px;letter-spacing:.1em;}
.card .listprice{font-size:12px;color:var(--sub);text-decoration:line-through;margin-left:8px;}

.soldout-veil{
  position:absolute;inset:0;background:rgba(11,31,58,.62);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;letter-spacing:.2em;
}

.empty{
  border:1px dashed var(--line);padding:56px 28px;color:var(--sub);font-size:14px;
}

/* ===== 商品詳細 ===== */
.detail{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start;}
@media(max-width:900px){.detail{grid-template-columns:1fr;gap:32px;}}

/* 縦向き・横向きの写真が混在するため、詳細ページの主画像は切らず、
   写真の縦横比に合わせて高さが変わるようにする */
.gallery .main{
  background:var(--mist);border:1px solid var(--line);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:300px;
}
.gallery .main img{max-width:100%;max-height:640px;width:auto;height:auto;}
.gallery .thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.gallery .thumbs button{width:76px;height:60px;border:1px solid var(--line);overflow:hidden;padding:0;}
.gallery .thumbs button.on{border-color:var(--gold);}
.gallery .thumbs img{width:100%;height:100%;object-fit:cover;}

.detail .meta{font-size:12px;letter-spacing:.14em;color:var(--gold-dim);}
.detail h1{font-size:26px;margin:10px 0 20px;}
.detail .price-row{display:flex;align-items:baseline;gap:12px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.detail .price-row .now{font-size:30px;}
.detail .price-row .tax{font-size:12px;color:var(--sub);}
.detail .price-row .was{font-size:14px;color:var(--sub);text-decoration:line-through;}

.spec{margin:24px 0;border-top:1px solid var(--line);}
.spec div{display:flex;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;}
.spec dt{flex:none;width:7em;color:var(--sub);}

.desc{white-space:pre-wrap;font-size:15px;line-height:2;margin:24px 0 30px;}

/* ===== ボタン ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 34px;font-size:15px;letter-spacing:.08em;
  border:1px solid transparent;transition:all .22s var(--ease);
}
.btn-gold{background:var(--gold-grad);color:var(--navy-deep);font-weight:700;}
.btn-gold:hover{filter:brightness(1.07);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-deep);}
.btn-line{border-color:var(--line);color:var(--ink);}
.btn-line:hover{border-color:var(--navy);}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none;}
.btn-block{width:100%;}

.qty{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-size:14px;}
.qty select{border:1px solid var(--line);padding:9px 12px;background:var(--paper);}

/* ===== カート ===== */
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start;}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr;}}

.cart-row{display:grid;grid-template-columns:110px 1fr auto;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start;}
.cart-row:first-child{border-top:1px solid var(--line);}
.cart-row .th{width:110px;height:84px;background:var(--mist);overflow:hidden;}
.cart-row .th img{width:100%;height:100%;object-fit:cover;}
.cart-row h3{font-size:15px;margin-bottom:6px;}
.cart-row .unit{font-size:13px;color:var(--sub);}
.cart-row .ctrl{display:flex;align-items:center;gap:14px;margin-top:10px;font-size:13px;}
.cart-row .ctrl select{border:1px solid var(--line);padding:5px 8px;background:var(--paper);}
.cart-row .remove{font-size:12px;color:var(--sub);text-decoration:underline;}
.cart-row .remove:hover{color:var(--alert);}
.cart-row .line-total{font-size:17px;text-align:right;white-space:nowrap;}

.summary{border:1px solid var(--line);padding:26px 24px;background:var(--soft);}
.summary h2{font-size:15px;letter-spacing:.14em;margin-bottom:18px;}
.summary .row{display:flex;justify-content:space-between;font-size:14px;padding:9px 0;}
.summary .row.total{border-top:1px solid var(--line);margin-top:10px;padding-top:16px;font-size:19px;}
.summary .hint{font-size:12px;color:var(--sub);margin:14px 0 20px;line-height:1.8;}

/* ===== フォーム ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px;}
.form-grid .full{grid-column:1/-1;}
@media(max-width:720px){.form-grid{grid-template-columns:1fr;}}

.field label{display:block;font-size:13px;margin-bottom:7px;}
.field .req{color:var(--alert);font-size:11px;margin-left:6px;}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--line);background:var(--paper);
  padding:12px 14px;font-size:15px;transition:border-color .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy-line);}
.field textarea{min-height:110px;resize:vertical;line-height:1.9;}
.field .note{font-size:12px;color:var(--sub);margin-top:6px;}

.alert{
  border-left:3px solid var(--alert);background:#fdf3f2;
  padding:14px 18px;font-size:14px;margin-bottom:24px;color:#7a1c16;
}
.info{
  border-left:3px solid var(--gold);background:var(--soft);
  padding:18px 22px;font-size:14px;line-height:1.9;
}
.info h3{font-size:14px;letter-spacing:.1em;margin-bottom:10px;}
.info pre{font-family:var(--serif);white-space:pre-wrap;font-size:14px;line-height:1.9;}

/* ===== 注文完了 ===== */
.done-no{
  display:inline-block;border:1px solid var(--navy);
  padding:10px 22px;font-size:19px;letter-spacing:.08em;margin:6px 0 26px;
}
.recap{border-top:1px solid var(--line);margin:26px 0;}
.recap div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;}
.recap div.total{font-size:18px;}

/* ===== 法定ページ ===== */
.legal{max-width:860px;}
.legal .lrow{display:grid;grid-template-columns:11em 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.9;}
.legal .lrow:first-child{border-top:1px solid var(--line);}
.legal .lrow dt{color:var(--sub);}
.legal .lrow dd{white-space:pre-wrap;}
@media(max-width:640px){.legal .lrow{grid-template-columns:1fr;gap:4px;}}
.legal h2{font-size:17px;margin:36px 0 12px;}
.legal p{font-size:14px;line-height:2;margin-bottom:14px;}

/* ===== フッター ===== */
.site-footer{background:var(--navy);color:rgba(255,255,255,.7);margin-top:60px;padding:44px 0 34px;font-size:13px;}
.site-footer .cols{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start;}
.site-footer b{color:#fff;font-size:16px;letter-spacing:.1em;display:block;margin-bottom:8px;}
.site-footer .flinks{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto;}
.site-footer a:hover{color:var(--gold-light);}
.site-footer .copy{margin-top:30px;padding-top:20px;border-top:1px solid var(--navy-line);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.45);}

.loading{padding:60px 0;color:var(--sub);font-size:14px;}

@media(max-width:640px){
  .wrap{padding:0 20px;}
  .header-inner{padding:12px 20px;gap:14px;}
  .header-nav{gap:14px;}
  .header-nav .hide-sp{display:none;}
  .page-head{padding:36px 0 24px;}
  .page-head h1{font-size:23px;}
  .cart-row{grid-template-columns:84px 1fr;}
  .cart-row .th{width:84px;height:64px;}
  .cart-row .line-total{grid-column:2;text-align:left;}
}