*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;
  background:#fff8f5;
  color:#2a1510;
  line-height:1.7;
  padding-bottom:78px;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
.wrap.narrow{max-width:560px}

[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}
[data-reveal].is-in{opacity:1;transform:none}

/* —— Hero —— */
.hero{
  position:relative;
  min-height:min(88vh,760px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#fff;
}
.hero-media{
  position:absolute;inset:-10% 0 -10% 0;
  will-change:transform;
}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(120,10,0,.25) 0%,rgba(90,8,0,.55) 45%,rgba(60,5,0,.92) 100%),
    radial-gradient(ellipse at 70% 20%,rgba(255,140,0,.35),transparent 55%);
}
.hero-inner{position:relative;z-index:1;width:100%;max-width:980px;margin:0 auto;padding:0 16px 56px}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.badge{
  display:inline-block;
  font-size:12px;font-weight:800;letter-spacing:.04em;
  padding:5px 10px;line-height:1.2;
}
.badge--hot{background:#ffef00;color:#c40000}
.badge--stock{background:#c40000;color:#fff;border:1px solid rgba(255,255,255,.4)}
.brand{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.18em}
.hero h1{
  margin:0;font-size:clamp(28px,5.5vw,46px);line-height:1.25;font-weight:900;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero-lead{margin:14px 0 0;max-width:34em;font-size:15px;opacity:.95}

.countdown{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:22px 0 0;
}
.countdown__label{font-size:12px;font-weight:800;opacity:.9;margin-right:4px}
.countdown__unit{
  background:rgba(0,0,0,.45);border:1px solid rgba(255,220,180,.35);
  padding:8px 10px;min-width:52px;text-align:center;
}
.countdown__unit b{display:block;font-size:22px;font-weight:900;line-height:1;color:#ffef00}
.countdown__unit small{font-size:10px;opacity:.85}
.countdown--inline{justify-content:center}

.btn{
  display:inline-block;margin-top:20px;
  background:linear-gradient(180deg,#ff5a1f 0%,#e02000 100%);
  color:#fff;font-weight:900;text-decoration:none;
  padding:14px 28px;border:none;cursor:pointer;font-size:15px;
  box-shadow:0 4px 0 #8a0a00;letter-spacing:.04em;
}
.btn:hover{filter:brightness(1.06)}
.btn--hero{font-size:16px;padding:16px 36px}
.btn--sm{margin-top:12px;padding:10px 18px;font-size:13px;box-shadow:0 3px 0 #8a0a00}
.btn--sticky{margin:0;padding:12px 22px;font-size:14px;box-shadow:none}

/* —— Ticker —— */
.ticker{
  background:#c40000;color:#fff;overflow:hidden;
  border-top:3px solid #ffef00;border-bottom:3px solid #ffef00;
}
.ticker__track{
  display:flex;gap:28px;white-space:nowrap;padding:10px 0;
  animation:marquee 18s linear infinite;width:max-content;
  font-size:13px;font-weight:800;letter-spacing:.08em;
}
.ticker__track span::before{content:"◆ ";color:#ffef00}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* —— Point badges —— */
.points{background:#fff;padding:18px 0;border-bottom:1px solid #f0d8d0}
.point-badges{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
@media(max-width:700px){.point-badges{grid-template-columns:1fr 1fr}}
.point-badges li{
  text-align:center;padding:12px 8px;
  background:linear-gradient(180deg,#fff 0%,#fff5f0 100%);
  border:2px solid #e02000;border-radius:4px;
}
.point-badges strong{display:block;font-size:12px;color:#c40000}
.point-badges span{font-size:15px;font-weight:900}

/* —— Promo stack —— */
.promo-stack{display:grid;gap:0}
.promo-full{margin:0;position:relative}
.promo-full img{width:100%;max-height:420px;object-fit:cover}
.promo-full figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 16px;font-size:14px;font-weight:800;color:#fff;
  background:linear-gradient(transparent,rgba(80,0,0,.88));
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}

/* —— Products —— */
.section{padding:48px 0}
.sec-title{
  margin:0 0 22px;font-size:clamp(22px,3.5vw,30px);font-weight:900;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.sec-title span{
  font-size:11px;letter-spacing:.16em;color:#c40000;
  background:#ffef00;padding:3px 8px;font-weight:900;
}
.products{background:#fff8f5}
.product-grid{display:grid;gap:14px}
.product{
  display:grid;grid-template-columns:1.05fr 1fr;
  background:#fff;border:2px solid #f0c8b8;overflow:hidden;
}
@media(max-width:720px){.product{grid-template-columns:1fr}}
.product--feature{border-color:#e02000;box-shadow:0 0 0 3px rgba(224,32,0,.12)}
.product__img{position:relative;min-height:200px}
.product__img img{width:100%;height:100%;object-fit:cover;min-height:200px}
.off{
  position:absolute;top:10px;left:10px;
  background:#e02000;color:#fff;font-weight:900;font-size:13px;
  padding:6px 10px;transform:rotate(-4deg);
}
.off--best{background:#ffef00;color:#c40000;font-size:14px}
.product__body{padding:18px 16px}
.product__cat{margin:0;font-size:11px;font-weight:800;color:#c40000;letter-spacing:.1em}
.product h3{margin:4px 0 8px;font-size:18px;font-weight:900}
.product__desc{margin:0;font-size:13px;color:#6a4038}
.price{margin:14px 0 0}
.price s{display:block;font-size:12px;color:#9a7068}
.price strong{display:block;font-size:14px;font-weight:800;margin-top:2px}
.price em{font-style:normal;font-size:26px;color:#c40000;font-weight:900}
.stock{margin:8px 0 0;font-size:13px;font-weight:800;color:#c40000}
.stock b{font-size:20px}

/* —— Reasons —— */
.reasons{background:#fff;border-top:1px solid #f0d8d0}
.reason-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:r}
.reason-list li{
  counter-increment:r;padding:16px 16px 16px 56px;position:relative;
  background:#fff8f5;border-left:4px solid #e02000;
}
.reason-list li::before{
  content:counter(r);position:absolute;left:14px;top:16px;
  width:28px;height:28px;background:#e02000;color:#fff;
  font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.reason-list strong{display:block;font-size:15px}
.reason-list span{display:block;margin-top:4px;font-size:13px;color:#6a4038}

/* —— Urgency —— */
.urgency{background:#c40000;color:#fff;padding:40px 0}
.urgency-box{text-align:center}
.urgency-box__label{margin:0 0 12px;font-weight:900;font-size:14px;letter-spacing:.12em}
.urgency .countdown__unit{background:rgba(0,0,0,.35);border-color:rgba(255,239,0,.4)}
.urgency-box__note{margin:14px 0 0;font-size:11px;opacity:.8}
.urgency .btn{background:linear-gradient(180deg,#ffef00,#ffc400);color:#c40000;box-shadow:0 4px 0 #8a6000}

/* —— FAQ —— */
.faq{background:#fff8f5}
.faq details{background:#fff;border:1px solid #f0c8b8;padding:14px 16px;margin-bottom:8px}
.faq summary{cursor:pointer;font-weight:800;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:10px 0 0;font-size:14px;color:#6a4038}

/* —— Form —— */
.final{background:#3a0800;color:#fff;padding:56px 0 72px}
.final-badge{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.final h2{margin:0 0 8px;font-size:clamp(22px,3.5vw,30px);font-weight:900}
.final > .wrap > p{margin:0 0 20px;opacity:.9;font-size:14px}
.form{display:grid;gap:12px}
.form label{display:grid;gap:4px;font-size:13px;font-weight:700}
.form input,.form textarea,.form select{
  font:inherit;padding:12px 14px;border:1px solid rgba(255,200,160,.35);
  background:rgba(255,255,255,.08);color:#fff;border-radius:2px;
}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.45)}
.form select option{color:#2a1510}
.form .btn{justify-self:stretch;text-align:center;margin-top:4px}
.form-note{font-size:11px;opacity:.7;margin:4px 0 0}

.site-footer{padding:24px 0 100px;text-align:center;font-size:12px;color:#9a7068;background:#fff8f5}
.site-footer p{margin:0}

/* —— Sticky CTA —— */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:1800;
  background:rgba(60,8,0,.96);color:#fff;
  border-top:3px solid #ffef00;
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
}
.sticky-cta__inner{
  max-width:980px;margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.sticky-cta__text{margin:0;font-size:13px}
.sticky-cta__text strong{color:#ffef00}
@media(max-width:520px){
  .sticky-cta__text{font-size:11px}
  .btn--sticky{padding:10px 14px;font-size:13px}
}