*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--broth:#c0392b;--noodle:#f39c12;--cream:#fdf2e9;--dark:#2c1810;--font-head:'Bebas Neue',sans-serif;--font:'Noto Sans JP',sans-serif}
body{font-family:var(--font);background:var(--cream);color:var(--dark);line-height:1.7}
img{max-width:100%;display:block;object-fit:cover}
a{color:var(--broth);font-weight:500}
.ramen-nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:var(--dark);color:#fff}
.ramen-nav h1{font-family:var(--font-head);letter-spacing:.1em;font-size:1.5rem;color:var(--noodle)}
.ramen-nav nav{display:flex;gap:1.2rem}
.ramen-nav nav a{color:#fff;text-decoration:none;font-size:.88rem}
.steam-hero{position:relative;text-align:center;padding:4rem 1.5rem 3rem;background:radial-gradient(ellipse at center bottom,#8b2500 0%,var(--dark) 70%);color:#fff;overflow:hidden}
.steam-hero::before,.steam-hero::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.08);filter:blur(20px);animation:steam 4s ease-in-out infinite}
.steam-hero::before{width:80px;height:120px;left:30%;top:20%;animation-delay:0s}
.steam-hero::after{width:60px;height:100px;right:28%;top:15%;animation-delay:1.5s}
@keyframes steam{0%,100%{transform:translateY(0) scale(1);opacity:.3}50%{transform:translateY(-30px) scale(1.1);opacity:.6}}
.bowl-wrap{position:relative;z-index:2;max-width:420px;margin:0 auto}
.bowl-wrap img{border-radius:50%;border:6px solid var(--noodle);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.steam-hero h2{font-family:var(--font-head);font-size:clamp(2rem,5vw,3rem);margin:1.5rem 0 .5rem;position:relative;z-index:2;letter-spacing:.05em}
.steam-hero p{position:relative;z-index:2;font-size:.95rem;opacity:.9;max-width:480px;margin:0 auto}
.kit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem}
.kit-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(44,24,16,.1);border:2px solid transparent}
.kit-card:hover{border-color:var(--broth)}
.kit-card img{width:100%;height:180px}
.kit-body{padding:1.25rem}
.kit-body h3{font-family:var(--font-head);font-size:1.3rem;letter-spacing:.04em;margin-bottom:.35rem}
.kit-body .price{font-size:1.15rem;font-weight:700;color:var(--broth)}
.spicy-meter{margin:1rem 0 .75rem}
.spicy-meter label{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:.35rem;color:#6b5344}
.spicy-bar{height:8px;background:#eee;border-radius:4px;overflow:hidden}
.spicy-fill{height:100%;background:linear-gradient(90deg,var(--noodle),var(--broth));border-radius:4px;transition:width .4s}
.spicy-dots{display:flex;gap:4px;margin-top:.4rem}
.spicy-dots span{width:10px;height:10px;border-radius:50%;background:#ddd;cursor:pointer;transition:background .2s}
.spicy-dots span.on{background:var(--broth)}
.kit-body button{width:100%;margin-top:.75rem;background:var(--broth);color:#fff;border:none;padding:.75rem;cursor:pointer;font-size:.9rem;border-radius:6px}
.kit-body button:hover{background:#96281b}
.broth-info{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1000px;margin:0 auto;padding:2rem 1.5rem;align-items:center}
.broth-info img{border-radius:12px}
.broth-info h2{font-family:var(--font-head);font-size:1.6rem;margin-bottom:.75rem;letter-spacing:.04em}
.step-list{counter-reset:step;list-style:none;max-width:700px;margin:0 auto;padding:0 1.5rem 2rem}
.step-list li{counter-increment:step;padding:1rem 0 1rem 3rem;position:relative;border-bottom:1px dashed rgba(44,24,16,.15);font-size:.9rem}
.step-list li::before{content:counter(step);position:absolute;left:0;top:1rem;width:2rem;height:2rem;background:var(--broth);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:1.1rem}
.legal-ramen{padding:2.5rem 1.5rem;background:var(--dark);color:#fff;font-size:.88rem}
.legal-ramen h3,.legal-ramen h4{color:var(--noodle);margin:1rem 0 .5rem}
.legal-ramen a{color:#f5cba7}
@media(max-width:640px){
  .ramen-nav{flex-direction:column;gap:.75rem}
  .broth-info{grid-template-columns:1fr}
  .kit-grid{grid-template-columns:1fr}
}