:root{
  --jp-red:#bc002d;
  --jp-red-dark:#7f001f;
  --ink:#151313;
  --sumi:#27211f;
  --paper:#fffaf4;
  --paper-2:#f7efe7;
  --white:#ffffff;
  --muted:#6f6762;
  --line:rgba(188,0,45,.18);
  --shadow:0 24px 70px rgba(50,24,24,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(188,0,45,.14), transparent 30%),
    radial-gradient(circle at 84% 12%, rgba(39,33,31,.08), transparent 28%),
    linear-gradient(135deg,var(--paper),#fff 48%,var(--paper-2));
  min-height:100vh;
  letter-spacing:.01em;
}
.ambient-sports{
  position:fixed;
  inset:0;
  z-index:-2;
  opacity:.72;
  background-image:
    linear-gradient(rgba(255,250,244,.88),rgba(255,250,244,.91)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='950' viewBox='0 0 1500 950'%3E%3Cg fill='none' stroke='%23bc002d' stroke-width='5' opacity='.22'%3E%3Ccircle cx='170' cy='150' r='72'/%3E%3Cpath d='M105 150h130M170 78v144M122 102c56 36 56 62 0 98M218 102c-56 36-56 62 0 98'/%3E%3Cpath d='M980 150c75-70 165-70 240 0M980 150c75 70 165 70 240 0M1100 65v170'/%3E%3Crect x='1080' y='580' width='210' height='132' rx='26'/%3E%3Cpath d='M1120 646h130M1185 612v70'/%3E%3Cpath d='M250 690c140-110 310-118 455-18M320 750c118-70 242-72 365-10'/%3E%3Cpath d='M630 285l185 120M625 405l190-122M705 250v190'/%3E%3C/g%3E%3Cg fill='%23151313' opacity='.10'%3E%3Ctext x='880' y='370' font-size='92' font-family='Arial' font-weight='800'%3EJAPAN%3C/text%3E%3Ctext x='480' y='585' font-size='54' font-family='Arial' font-weight='800'%3ESOCCER · BASEBALL · BASKETBALL%3C/text%3E%3C/g%3E%3Ccircle cx='748' cy='152' r='84' fill='%23bc002d' opacity='.09'/%3E%3C/svg%3E");
  background-size:cover;
  background-position:center;
}
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px clamp(16px,3vw,44px);
  background:rgba(255,250,244,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
  min-width:max-content;
}
.brand-symbol{
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:white;
  background:radial-gradient(circle at 35% 35%, #e64d61, var(--jp-red) 58%, var(--jp-red-dark));
  box-shadow:0 12px 24px rgba(188,0,45,.22);
  font-weight:900;
  font-size:1.35rem;
}
.brand strong{display:block;font-size:1.15rem;letter-spacing:-.03em}
.brand small{display:block;color:var(--muted);font-size:.72rem;margin-top:1px}
.site-nav{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
.site-nav a{
  color:var(--sumi);
  text-decoration:none;
  font-weight:800;
  font-size:.9rem;
  padding:9px 11px;
  border-radius:999px;
  transition:.18s ease;
}
.site-nav a:hover{
  color:white;
  background:var(--jp-red);
  transform:translateY(-1px);
}
.menu-toggle{
  display:none;
  border:0;
  background:var(--jp-red);
  color:white;
  border-radius:14px;
  padding:10px 14px;
  font-size:1.2rem;
  box-shadow:0 12px 26px rgba(188,0,45,.2);
}
main{
  width:min(1180px,92%);
  margin:0 auto;
  padding:34px 0 58px;
}
.hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(188,0,45,.2);
  border-radius:36px;
  padding:clamp(34px,7vw,86px);
  background:
    linear-gradient(130deg, rgba(21,19,19,.94), rgba(127,0,31,.84)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 24px);
  color:white;
  box-shadow:var(--shadow);
}
.hero:after{
  content:"";
  position:absolute;
  right:-110px;
  bottom:-120px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(188,0,45,.9), rgba(188,0,45,.12) 56%, transparent 60%);
  filter:blur(.2px);
}
.sun-disc{
  position:absolute;
  right:clamp(24px,8vw,92px);
  top:clamp(22px,5vw,58px);
  width:88px;
  height:88px;
  border-radius:50%;
  background:var(--jp-red);
  box-shadow:0 0 70px rgba(188,0,45,.55);
}
.eyebrow{
  position:relative;
  z-index:2;
  margin:0 0 14px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:900;
  color:#ffd8df;
}
h1{
  position:relative;
  z-index:2;
  margin:0 0 18px;
  max-width:900px;
  font-size:clamp(2.15rem,6vw,5.2rem);
  line-height:1.04;
  letter-spacing:-.07em;
}
.lead{
  position:relative;
  z-index:2;
  max-width:780px;
  font-size:clamp(1.05rem,2vw,1.35rem);
  line-height:1.8;
  color:#fff4f5;
}
.hero-actions{
  position:relative;
  z-index:2;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:14px 19px;
  font-weight:900;
  text-decoration:none;
}
.button.primary{background:white;color:var(--jp-red)}
.button.ghost{border:1px solid rgba(255,255,255,.45);color:white}
.layout{
  display:grid;
  grid-template-columns:minmax(0,1.38fr) minmax(310px,.82fr);
  gap:22px;
  margin-top:24px;
}
.panel{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius:30px;
  padding:clamp(22px,3vw,36px);
  box-shadow:0 18px 54px rgba(49,28,22,.08);
}
.section-kicker{
  color:var(--jp-red);
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
}
.panel h2{
  margin-top:0;
  font-size:clamp(1.55rem,3vw,2.25rem);
  letter-spacing:-.045em;
}
.copy p{
  color:#35302d;
  line-height:1.95;
  font-size:1.03rem;
}
.meta-card{
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg,#fff,#fff7f7);
  border:1px solid var(--line);
  margin-bottom:13px;
}
.meta-card span{
  color:var(--jp-red);
  font-weight:900;
  font-size:.74rem;
  letter-spacing:.13em;
}
.meta-card h3{
  margin:.45rem 0;
  line-height:1.45;
}
.meta-card p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}
.voice blockquote{
  margin:0;
  color:#231c1b;
  font-size:clamp(1.25rem,3vw,2rem);
  line-height:1.65;
  font-weight:850;
  letter-spacing:-.035em;
}
.author{color:var(--jp-red);font-weight:900}
.chip-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  color:var(--jp-red-dark);
  text-decoration:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  font-weight:850;
}
.chip:hover{background:var(--jp-red);color:white}
footer{
  text-align:center;
  padding:36px 18px;
  background:var(--sumi);
  color:white;
}
footer p{margin:.35rem 0;color:#f0e7df}
@media (max-width:940px){
  .menu-toggle{display:block}
  .site-header{align-items:flex-start}
  .site-nav{
    display:none;
    position:absolute;
    left:4%;
    right:4%;
    top:74px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:24px;
    background:rgba(255,250,244,.98);
    box-shadow:var(--shadow);
    justify-content:flex-start;
  }
  .site-nav.open{display:grid;grid-template-columns:1fr 1fr}
  .site-nav a{background:white}
  .layout{grid-template-columns:1fr}
}
@media (max-width:560px){
  main{width:94%;padding-top:20px}
  .hero{border-radius:28px;padding:32px 22px}
  .sun-disc{width:58px;height:58px;right:24px;top:22px;opacity:.7}
  .site-nav.open{grid-template-columns:1fr}
}