*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#1e3a5f;--orange:#f97316;--sky:#e0f2fe;--white:#f8fafc;--text:#0f172a;--sans:'Noto Sans JP',sans-serif}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--white);color:var(--text);line-height:1.75}
img{max-width:100%;display:block;object-fit:cover}
a{color:var(--orange)}
.bc-head{display:flex;align-items:center;padding:1rem 2rem;background:var(--navy);color:#fff;flex-wrap:wrap;position:sticky;top:0;z-index:50}
.logo{font-size:1.4rem;font-weight:700;text-decoration:none;color:#fff}
.bc-head nav{display:flex;gap:1rem;margin-left:auto;flex-wrap:wrap}
.bc-head nav a{color:#e0f2fe;text-decoration:none;font-size:.88rem}
.menu{display:none;background:var(--orange);border:none;color:#fff;padding:.4rem .65rem;cursor:pointer;border-radius:4px}
.hero-wheel{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:3rem 2rem;background:radial-gradient(circle at center,var(--sky) 0%,var(--white) 70%)}
.hero-content{max-width:500px;text-align:center;z-index:2}
.hero-content h1{font-size:clamp(1.9rem,4vw,2.7rem);color:var(--navy);margin:.75rem 0}
.hero-content .tag{color:var(--orange);font-weight:700;font-size:.85rem}
.hero-content p{margin:1rem 0 1.5rem}
.cta{display:inline-block;background:var(--orange);color:#fff;padding:.85rem 2rem;text-decoration:none;border-radius:6px;font-weight:600}
.spoke-nav-wrap{padding:3rem 2rem;background:var(--navy);color:#fff}
.spoke-nav-wrap h2{text-align:center;margin-bottom:2rem;font-size:1.6rem}
.spoke-nav{position:relative;width:min(90vw,420px);height:min(90vw,420px);margin:0 auto}
.spoke-nav a{position:absolute;transform:translate(-50%,-50%);color:#fff;text-decoration:none;font-size:.85rem;padding:.5rem 1rem;background:var(--orange);border-radius:20px;white-space:nowrap}
.spoke-nav a:nth-child(1){top:5%;left:50%}
.spoke-nav a:nth-child(2){top:25%;left:90%}
.spoke-nav a:nth-child(3){top:75%;left:90%}
.spoke-nav a:nth-child(4){top:95%;left:50%}
.spoke-nav a:nth-child(5){top:75%;left:10%}
.spoke-nav a:nth-child(6){top:25%;left:10%}
.spoke-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;background:var(--white);color:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;text-align:center}
.spoke-products{padding:5rem 2rem;position:relative}
.spoke-products h2{text-align:center;color:var(--navy);font-size:1.9rem;margin-bottom:.5rem}
.spoke-lead{text-align:center;margin-bottom:3rem;opacity:.85}
.wheel-products{position:relative;width:min(95vw,700px);height:min(95vw,700px);margin:0 auto}
.wheel-products::before{content:'';position:absolute;inset:15%;border:3px dashed var(--navy);border-radius:50%;opacity:.2}
.spoke-hub-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:3}
.spoke-hub-center .hub-cta{background:var(--navy);color:#fff;border:none;padding:.7rem 1.2rem;border-radius:6px;cursor:pointer;font-family:inherit;margin-top:.5rem}
.spoke-item{position:absolute;width:200px;background:#fff;border:2px solid var(--navy);padding:1rem;border-radius:8px;transform:translate(-50%,-50%);box-shadow:0 4px 16px rgba(30,58,95,.12)}
.spoke-item img{aspect-ratio:4/3;border-radius:4px;margin-bottom:.5rem}
.spoke-item h3{font-size:.95rem}
.spoke-item .price{color:var(--orange);font-weight:700;margin:.35rem 0}
.spoke-item button{width:100%;background:var(--orange);color:#fff;border:none;padding:.5rem;cursor:pointer;border-radius:4px;font-family:inherit}
.spoke-item.s1{top:6%;left:50%}
.spoke-item.s2{top:20%;left:85%}
.spoke-item.s3{top:55%;left:92%}
.spoke-item.s4{top:88%;left:50%}
.spoke-item.s5{top:55%;left:8%}
.spoke-item.s6{top:20%;left:15%}
.features{padding:4rem 2rem;max-width:1000px;margin:0 auto}
.features h2{text-align:center;color:var(--navy);margin-bottom:2rem}
.bike-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.bike-feats article{text-align:center;padding:1.5rem 1rem;background:var(--sky);border-radius:8px;border-bottom:4px solid var(--orange)}
.bike-feats strong{display:block;font-size:1.5rem;color:var(--navy)}
.shop-banner{width:100%;max-height:300px;margin-top:2rem;border-radius:8px}
.voices{padding:4rem 2rem;background:var(--navy);color:#fff}
.voices h2{text-align:center;margin-bottom:2rem}
.voices .review-list{max-width:800px;margin:0 auto}
.voices blockquote{margin-bottom:1.25rem;padding:1.25rem;background:rgba(255,255,255,.08);border-left:4px solid var(--orange)}
.voices cite{font-size:.82rem;opacity:.8}
.faq{padding:4rem 2rem;max-width:720px;margin:0 auto}
.faq h2{color:var(--navy);margin-bottom:1.5rem}
.faq details{margin-bottom:1rem;padding:1rem;border:1px solid #cbd5e1;background:#fff}
.faq summary{cursor:pointer;font-weight:600}
.legal{padding:4rem 2rem;background:var(--text);color:#cbd5e1;font-size:.86rem}
.legal h3,.legal h4{color:var(--orange);margin:1.25rem 0 .5rem}
.legal dl{display:grid;grid-template-columns:9em 1fr;gap:.35rem .75rem}
.legal a{color:var(--orange)}
.copy{margin-top:2rem;opacity:.6}
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--navy);color:#fff;padding:1rem 1.5rem;border-radius:6px;transform:translateY(150%);transition:transform .3s;z-index:99}
.toast.show{transform:translateY(0)}
@media(max-width:768px){
  .menu{display:block}
  .bc-head nav{display:none;width:100%;flex-direction:column}
  .bc-head nav.open{display:flex}
  .bike-feats{grid-template-columns:1fr 1fr}
  .wheel-products{height:auto;display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}
  .wheel-products::before{display:none}
  .spoke-item{position:relative;top:auto!important;left:auto!important;transform:none;width:100%;max-width:300px}
  .spoke-hub-center{position:relative;transform:none;margin-bottom:1rem}
  .spoke-nav{height:360px}
}