:root{
    --blue:#1800AC;          /* brand : base */
    --blue-deep:#0E0A55;
    --blue-soft:#2E22CE;
    --gold:#E11D3C;          /* accent (fills) */
    --gold-deep:#A8122A;     /* accent as text on light */
    --gold-bright:#FFB3C0;   /* accent on dark */
    --gold-tint:#FFF0F2;
    --bg:#FFFFFF;
    --bg2:#F1F3FB;
    --ink:#15142B;           /* body text */
    --muted:#54546B;
    --white:#fff;
    --hair:rgba(21,20,43,.14);
    --f-head:"Fraunces","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
    --f-body:"Space Grotesk","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
    --f-mono:"Space Mono","SFMono-Regular",ui-monospace,monospace;
    --f-eye:"Space Grotesk",sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--f-body);background:var(--bg);color:var(--ink);font-size:1.02rem;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .wrap{max-width:1100px;margin:0 auto;padding:0 24px}
  .anton{font-family:var(--f-mono);font-weight:700;line-height:1}
  .grad{font-family:var(--f-head)}
  a{color:inherit}
  img{display:block;max-width:100%}

  .eyebrow{font-family:var(--f-eye);font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;color:var(--blue);font-weight:700}
  .eyebrow.light{color:var(--gold-bright)}

  /* buttons */
  .btn-line{display:inline-flex;align-items:center;gap:.55em;background:var(--blue);color:#fff;font-weight:700;
    font-family:var(--f-body);padding:.85em 1.7em;border-radius:6px;text-decoration:none;font-size:1rem;letter-spacing:.01em;
    transition:transform .15s ease,background .15s ease,box-shadow .15s ease;box-shadow:0 8px 22px rgba(24,0,172,.24)}
  .btn-line:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 12px 28px rgba(24,0,172,.32)}
  .btn-line:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
  .btn-line .ic{width:19px;height:19px;background:#fff;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3C6.5 3 2 6.6 2 11c0 2.5 1.5 4.7 3.8 6.1-.2.7-.7 2.4-.8 2.8-.1.5.2.5.4.4.2-.1 2.6-1.7 3.6-2.4.9.2 1.9.3 3 .3 5.5 0 10-3.6 10-8S17.5 3 12 3z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3C6.5 3 2 6.6 2 11c0 2.5 1.5 4.7 3.8 6.1-.2.7-.7 2.4-.8 2.8-.1.5.2.5.4.4.2-.1 2.6-1.7 3.6-2.4.9.2 1.9.3 3 .3 5.5 0 10-3.6 10-8S17.5 3 12 3z'/></svg>") center/contain no-repeat}

  /* header */
  header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .mark{display:flex;align-items:center;gap:.65em;text-decoration:none}
  .mark img{height:32px;width:auto;border-radius:5px}
  .mark .en{font-family:var(--f-eye);font-weight:700;font-size:1rem;letter-spacing:.16em;color:var(--blue)}
  header .btn-line{padding:.5em 1.1em;font-size:.84rem}

  /* hero (light) */
  .hero{position:relative;background:linear-gradient(180deg,#E9ECF8 0%,var(--bg) 60%);color:var(--ink);overflow:hidden}
  .hero .court{position:absolute;inset:0;opacity:.55}
  .hero .court line,.hero .court rect{stroke:rgba(24,0,172,.15)}
  .hero-inner{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;padding:74px 0 86px}
  .hero .eyebrow{margin-bottom:20px;display:inline-block}
  .hero h1{font-family:var(--f-head);font-weight:800;font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:1.1;letter-spacing:.01em;margin-bottom:.45em;color:var(--blue)}
  .hero h1 .pop{color:var(--ink);font-style:italic;background:linear-gradient(transparent 56%,#FFC9D2 56%);padding:0 .06em}
  .hero p.lead{font-size:clamp(1.02rem,1.4vw,1.15rem);max-width:32em;color:#3a3a52;line-height:1.9}
  .hero-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:30px}
  .scroll-link{color:var(--blue);text-decoration:none;font-weight:700;font-size:.86rem;font-family:var(--f-eye);letter-spacing:.05em;border-bottom:2px solid var(--gold);padding-bottom:3px}
  .hero-logo{position:relative;display:flex;justify-content:center;perspective:1000px}
  .hero-logo img{width:min(320px,78%);border-radius:18px;box-shadow:0 30px 70px rgba(24,0,172,.3);animation:logoGlow 3s ease-in-out infinite;position:relative;z-index:2}
  @keyframes logoGlow{
    0%,100%{box-shadow:0 24px 60px rgba(24,0,172,.35)}
    50%{box-shadow:0 30px 90px rgba(24,0,172,.6),0 0 70px rgba(24,0,172,.22),0 0 140px rgba(24,0,172,.08)}
  }
  /* リング1: 赤いコメット、手前を高速周回 */
  .hero-logo .ring{
    position:absolute;inset:-10%;border-radius:50%;
    background:conic-gradient(from 0deg,rgba(225,29,60,.55) 0deg 28deg,transparent 28deg 360deg);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
    animation:ring1spin 2.8s linear infinite;
  }
  .hero-logo .ring::before{
    content:'';position:absolute;top:-9px;left:calc(50% - 9px);
    width:18px;height:18px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#ffb3c0,#e11d3c);
    box-shadow:0 0 16px 5px rgba(225,29,60,.75),0 0 35px rgba(225,29,60,.35);
    z-index:3;
  }
  @keyframes ring1spin{from{transform:rotateX(62deg) rotateZ(0)}to{transform:rotateX(62deg) rotateZ(360deg)}}
  /* リング2: 青いドット、逆方向ゆっくり */
  .hero-logo .ring2{
    position:absolute;inset:-18%;border-radius:50%;
    background:conic-gradient(from 180deg,rgba(46,34,206,.5) 0deg 22deg,transparent 22deg 360deg);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));
    animation:ring2spin 8s linear infinite reverse;
  }
  .hero-logo .ring2::before{
    content:'';position:absolute;top:-7px;left:calc(50% - 7px);
    width:14px;height:14px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#8eb3ff,#1800AC);
    box-shadow:0 0 12px 4px rgba(46,34,206,.7),0 0 28px rgba(46,34,206,.3);
  }
  @keyframes ring2spin{from{transform:rotateX(28deg) rotateZ(0)}to{transform:rotateX(28deg) rotateZ(360deg)}}
  /* リング3: 外側の極薄リング、ゆっくり拡散 */
  .hero-logo .ring3{
    position:absolute;inset:-26%;border-radius:50%;
    border:1px solid rgba(24,0,172,.12);
    animation:ring3spin 16s linear infinite;
  }
  .hero-logo .ring3::before{
    content:'';position:absolute;top:-5px;left:calc(50% - 5px);
    width:10px;height:10px;border-radius:50%;
    background:#fff;
    box-shadow:0 0 8px 3px rgba(255,255,255,.7),0 0 20px rgba(24,0,172,.4);
  }
  @keyframes ring3spin{from{transform:rotateX(80deg) rotateZ(0)}to{transform:rotateX(80deg) rotateZ(360deg)}}
  .ball{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(225,29,60,.18);left:5%;top:22%;animation:rally 4.4s cubic-bezier(.4,0,.5,1) infinite}
  @keyframes rally{0%{transform:translate(0,0)}25%{transform:translate(55px,86px)}50%{transform:translate(110px,-10px)}75%{transform:translate(55px,76px)}100%{transform:translate(0,0)}}

  /* countdown */
  .countdowns{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
  .countdown{display:inline-flex;align-items:stretch;gap:14px;background:#fff;border:1px solid var(--hair);padding:14px 20px;border-radius:10px;box-shadow:0 10px 30px rgba(24,0,172,.08)}
  .countdown .cd-label{align-self:center;font-family:var(--f-eye);font-size:.64rem;letter-spacing:.14em;line-height:1.5;max-width:9em;color:var(--blue);text-transform:uppercase;font-weight:700}
  .countdown .cd-kind{display:block}
  .countdown .cd-name{display:block;margin-top:3px;color:var(--muted);text-transform:none;font-weight:600;font-size:.92em;letter-spacing:.04em}
  .cd-unit{text-align:center;min-width:46px}
  .cd-unit .v{font-family:var(--f-mono);font-weight:700;font-size:1.85rem;color:var(--blue);line-height:1}
  .cd-unit .u{font-family:var(--f-eye);font-size:.58rem;letter-spacing:.16em;color:var(--muted);font-weight:500}

  /* marquee */
  .marquee{background:var(--blue);color:#fff;overflow:hidden;white-space:nowrap}
  .marquee .track{display:inline-flex;padding:13px 0;animation:scroll 26s linear infinite;font-family:var(--f-eye);font-weight:700;font-size:.92rem;letter-spacing:.2em;text-transform:uppercase}
  .marquee span{padding:0 8px}
  .marquee .dot{color:var(--gold-bright)}
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* section frame */
  section{padding:92px 0}
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
  .reveal.in{opacity:1;transform:none}
  .sec-head{display:flex;align-items:center;gap:20px;margin-bottom:42px;flex-wrap:wrap}
  .jersey-no{font-family:var(--f-mono);font-weight:700;font-size:1.45rem;color:var(--blue);
    width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%;
    border:1.5px solid var(--blue);flex-shrink:0}
  .sec-head h2{font-family:var(--f-head);font-weight:800;font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.25;letter-spacing:.01em;color:var(--ink)}
  .sec-head .eyebrow{display:block;margin-bottom:5px}

  /* NEXT MATCH (light) */
  .next{background:var(--bg2)}
  .board{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px}
  .mcard{background:#fff;color:var(--ink);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
    box-shadow:0 14px 36px rgba(24,0,172,.1);border:1px solid var(--hair);transition:transform .22s ease,box-shadow .22s ease}
  .mcard:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(24,0,172,.16)}
  .mcard .strip{display:flex;align-items:center;justify-content:space-between;padding:.6em 1.1em;font-family:var(--f-eye);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#fff}
  .mcard.fedal .strip{background:var(--blue)}
  .mcard.camp .strip{background:var(--blue-soft)}
  .mcard.scout .strip{background:var(--gold);color:#fff}
  .mcard .status{display:inline-flex;align-items:center;gap:.45em}
  .mcard .status.open::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85;animation:blink 1.6s ease-in-out infinite}
  @keyframes blink{50%{opacity:.3}}
  .mcard-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
  .mcard .date{font-family:var(--f-mono);font-weight:700;font-size:2.5rem;line-height:.9;color:var(--blue);letter-spacing:-.02em}
  .mcard.scout .date{color:var(--gold-deep);font-size:1.4rem;padding:.4em 0;font-family:var(--f-head);font-weight:800}
  .mcard .date .mo{font-family:var(--f-eye);font-size:.72rem;color:var(--muted);display:block;letter-spacing:.18em;margin-bottom:6px;font-weight:700}
  .mcard .ev{font-family:var(--f-head);font-weight:800;font-size:1.12rem;margin:16px 0 5px;line-height:1.45}
  .mcard .place{color:var(--muted);font-size:.92rem}
  .mcard .badge{margin-top:14px;background:var(--gold-tint);color:var(--gold-deep);font-weight:700;font-size:.78rem;padding:.5em .8em;border-radius:5px;align-self:flex-start;line-height:1.5}
  .mcard .btn-line{margin-top:20px;width:100%;justify-content:center}
  .mcard .btn-soon{margin-top:20px;width:100%;justify-content:center;display:inline-flex;align-items:center;gap:.5em;background:var(--bg2);color:var(--muted);font-weight:700;font-size:.92rem;padding:.85em 1.2em;border-radius:6px;text-decoration:none;border:1px solid var(--hair)}

  /* SPONSOR */
  .sponsor{background:linear-gradient(155deg,var(--blue-soft),var(--blue) 55%,var(--blue-deep));color:#fff;position:relative;overflow:hidden}
  .sponsor::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 8%,rgba(225,29,60,.32),transparent 45%),radial-gradient(circle at 4% 96%,rgba(255,255,255,.08),transparent 40%);pointer-events:none}
  .sponsor .wrap{position:relative}
  .sponsor .eyebrow{color:var(--gold-bright)}
  .sponsor .sec-head h2{color:#fff}
  .sponsor .jersey-no{border-color:rgba(255,255,255,.75);color:#fff}
  .sponsor-card{background:#fff;border-radius:22px;padding:52px 52px 46px;text-align:center;box-shadow:0 34px 90px rgba(6,4,40,.45)}
  .sponsor-lead{font-family:var(--f-head);font-weight:800;font-size:clamp(1.2rem,2.5vw,1.7rem);line-height:1.75;color:var(--blue)}
  .sponsor-lead strong{color:var(--gold-deep)}
  .sponsor-logo-box{margin:36px auto 6px;max-width:460px;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(24,0,172,.22)}
  .sponsor-logo-box img{width:100%;display:block}
  .sponsor-body{max-width:36em;margin:30px auto 0;color:var(--muted);font-size:.98rem;line-height:2;text-align:left}
  .sponsor-badge{display:inline-block;margin-top:28px;background:var(--gold-tint);color:var(--gold-deep);font-weight:700;font-family:var(--f-eye);letter-spacing:.12em;font-size:.75rem;padding:.7em 1.5em;border-radius:999px;text-transform:uppercase}

  /* STORY (both blue-family) */
  .story{background:var(--bg)}
  .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:6px}
  .scard{border-radius:16px;padding:40px 36px;color:#fff;position:relative;overflow:hidden}
  .scard.a{background:linear-gradient(155deg,var(--blue-soft),var(--blue) 60%,var(--blue-deep))}
  .scard.b{background:linear-gradient(155deg,#4636E6,#241CA0 58%,var(--blue-deep))}
  .scard .tag{font-family:var(--f-eye);font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright)}
  .scard h3{font-family:var(--f-head);font-weight:800;font-size:1.55rem;margin:.4em 0 .65em;line-height:1.35;color:#fff}
  .scard p{color:rgba(255,255,255,.96);font-size:1rem;line-height:1.9}
  .scard .big{position:absolute;right:8px;bottom:-32px;font-family:var(--f-head);font-style:italic;font-weight:900;font-size:8rem;opacity:.16;line-height:1;color:var(--gold-bright)}

  /* TOURNAMENTS + ladder */
  .tourn{background:var(--bg2)}
  .ladder{background:#fff;border-radius:16px;padding:36px;margin-bottom:26px;box-shadow:0 14px 40px rgba(24,0,172,.08);border:1px solid var(--hair)}
  .ladder h3{font-family:var(--f-head);font-weight:800;font-size:1.45rem;margin-bottom:6px}
  .ladder .sub{color:var(--muted);font-size:.95rem;margin-bottom:24px}
  .flow{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
  .node{flex:1;min-width:180px;background:var(--bg2);border:1.5px solid var(--blue);border-radius:12px;padding:20px}
  .node .lv{font-family:var(--f-eye);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
  .node .nm{font-family:var(--f-head);font-weight:800;margin-top:6px;font-size:1.02rem}
  .node .de{font-size:.88rem;color:var(--muted);margin-top:8px}
  .node.win{border-color:var(--gold);background:var(--gold-tint)}
  .node.win .lv{color:var(--gold-deep)}
  .arrow{align-self:center;font-family:var(--f-mono);color:var(--gold);font-size:1.5rem}
  .tcard2{background:#fff;border-radius:16px;padding:36px;box-shadow:0 14px 40px rgba(24,0,172,.08);border:1px solid var(--hair)}
  .tcard2 .tag{font-family:var(--f-eye);font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
  .tcard2 h3{font-family:var(--f-head);font-weight:800;font-size:1.45rem;margin:.35em 0 .55em}
  .tcard2 p{color:#34344b;font-size:.98rem;line-height:1.9}
  .tcard2 .variants{list-style:none;margin-top:16px;border-top:1px solid var(--hair);padding-top:16px}
  .tcard2 .variants li{padding:7px 0 7px 1.3em;position:relative;font-weight:500}
  .tcard2 .variants li::before{content:"";position:absolute;left:0;top:1em;width:8px;height:8px;border-radius:50%;background:var(--gold)}

  /* GALLERY (light) */
  .gallery{background:var(--bg)}
  .gallery .jersey-no{border-color:var(--blue);color:var(--blue)}
  .photo-marquee{overflow:hidden;position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .photo-track{display:flex;gap:16px;width:max-content;animation:photoscroll 50s linear infinite}
  .photo-marquee:hover .photo-track{animation-play-state:paused}
  .photo-track img{height:300px;width:auto;border-radius:12px;display:block;box-shadow:0 12px 30px rgba(14,10,85,.22);background:var(--blue-deep)}
  @keyframes photoscroll{to{transform:translateX(-50%)}}
  .gallery .note{margin-top:22px;font-size:.88rem;color:var(--muted)}

  /* ENTER */
  .enter{background:var(--bg2)}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
  .step{background:#fff;border-radius:12px;padding:28px 24px;border:1px solid var(--hair);position:relative}
  .step .n{font-family:var(--f-mono);font-weight:700;font-size:1.7rem;color:var(--blue)}
  .step .n::before{counter-increment:s;content:counter(s,decimal-leading-zero);color:var(--gold-deep)}
  .step h4{font-family:var(--f-head);font-weight:800;font-size:1.1rem;margin:.55em 0 .35em}
  .step p{font-size:.92rem;color:var(--muted)}
  .enter-note{margin-top:30px;background:var(--blue);color:#fff;border-radius:14px;padding:30px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .enter-note .t{font-family:var(--f-head);font-weight:800;font-size:1.2rem;color:#fff}
  .enter-note .t span{color:var(--gold-bright)}
  .enter-note .btn-line{background:#fff;color:var(--blue);box-shadow:0 8px 22px rgba(0,0,0,.18)}
  .enter-note .btn-line:hover{background:var(--gold-tint)}
  .enter-note .btn-line .ic{background:var(--blue)}

  /* FAQ */
  .faq{background:var(--bg)}
  .faq details{background:var(--bg2);border-radius:10px;margin-bottom:12px;border:1px solid var(--hair)}
  .faq summary{cursor:pointer;list-style:none;padding:20px 22px;font-weight:700;font-family:var(--f-body);font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:14px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-family:var(--f-mono);color:var(--gold-deep);font-size:1.4rem;transition:transform .2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq .a{padding:0 22px 20px;color:#34344b;font-size:.96rem;line-height:1.85}
  .faq .a .lk{color:var(--blue);font-weight:700}

  /* FINAL (blue) */
  .final{background:linear-gradient(155deg,var(--blue-soft),var(--blue) 52%,var(--blue-deep));color:#fff;text-align:center;padding:100px 0}
  .final img{width:104px;margin:0 auto 28px;border-radius:14px;box-shadow:0 20px 44px rgba(0,0,0,.4)}
  .final h2{font-family:var(--f-head);font-weight:800;font-size:clamp(2rem,4.6vw,3.1rem);margin-bottom:.4em;line-height:1.25;color:#fff}
  .final h2 .pop{color:var(--gold-bright);font-style:italic}
  .final p{color:rgba(255,255,255,.9);max-width:30em;margin:0 auto 32px;line-height:1.9}
  .final .btn-line{background:#fff;color:var(--blue);font-size:1.12rem;padding:1em 2.3em;box-shadow:0 12px 30px rgba(0,0,0,.25)}
  .final .btn-line:hover{background:var(--gold-tint)}
  .final .btn-line .ic{background:var(--blue)}
  footer{background:var(--blue-deep);color:rgba(255,255,255,.72);padding:34px 0;font-size:.82rem}
  .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
  .foot .mark .en{color:#fff}

  .ph{background:rgba(225,29,60,.18);border-bottom:1px dashed var(--gold-deep);padding:0 .15em;border-radius:2px}

  @media(max-width:860px){
    .hero-inner{grid-template-columns:1fr;gap:34px;padding:54px 0 66px}
    .hero-logo{order:-1}
    .story-grid,.steps{grid-template-columns:1fr}
    .photo-track img{height:208px}
    section{padding:64px 0}
    .ball{display:none}
    .sponsor-card{padding:38px 24px 34px}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}.reveal{opacity:1;transform:none}.photo-marquee{overflow-x:auto}
  }