:root{
  --bg:#fbfcfe; --tint:#f1f4fb; --ink:#1b2340; --sub:#6a7190; --line:#e2e7f3;
  --blue:#4457d6; --sky:#8fb4ff; --coral:#ef7f6b; --mint:#7fd6c2;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --deco:"Kaisei Decol","Shippori Mincho","Hiragino Mincho ProN",serif;
  --en:"Cormorant Garamond","Times New Roman",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.95;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:16px 4vw;backdrop-filter:blur(10px);background:rgba(251,252,254,.78);border-bottom:1px solid transparent;transition:border-color .3s}
header.sc{border-color:var(--line)}
.logo{display:flex;align-items:center;gap:.7rem;font-family:var(--deco);font-size:1.3rem;letter-spacing:.12em}
.logo img{height:38px;width:auto;display:block}
.logo b{color:var(--blue)}
nav ul{display:flex;gap:2rem;font-size:.88rem}
nav a{position:relative;padding:2px 0}
nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s}
nav a:hover::after{transform:scaleX(1)}
@media(max-width:720px){nav{display:none}}

/* hero */
.hero{position:relative;height:100svh;min-height:600px;display:grid;place-items:center;text-align:center;overflow:hidden;background:var(--bg)}
#field{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;z-index:2;padding:2.2rem 4vw;pointer-events:none;background:radial-gradient(ellipse at center,rgba(251,252,254,.92) 0%,rgba(251,252,254,.75) 45%,rgba(251,252,254,0) 72%)}
.year{font-family:var(--en);font-style:italic;font-size:clamp(1.2rem,2.4vw,1.8rem);color:var(--blue);letter-spacing:.35em;opacity:0;animation:rise 1s .2s forwards}
h1{font-family:var(--mincho);font-size:clamp(2.6rem,9vw,6.4rem);font-weight:700;letter-spacing:.14em;line-height:1.25;margin:.15em 0}
h1 span{display:inline-block;opacity:0;transform:translateY(30px);animation:rise 1s forwards}
.en{font-family:var(--deco);font-weight:700;font-size:clamp(1.6rem,4.4vw,3rem);letter-spacing:.28em;margin-right:-.28em;opacity:0;animation:rise 1s 1.1s forwards}
.en i{color:var(--coral);font-style:normal;margin:0 .35em}
.dept{margin-top:1.2rem;font-size:.92rem;color:var(--sub);letter-spacing:.22em;opacity:0;animation:rise 1s 1.4s forwards}
.hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;font-size:.78rem;color:var(--sub);letter-spacing:.12em;text-align:center;opacity:0;animation:rise 1s 2s forwards}
.hint::after{content:"";display:block;width:1px;height:40px;margin:8px auto 0;background:var(--blue);animation:line 2s infinite;transform-origin:top}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes line{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* marquee */
.band{background:var(--ink);color:#fff;padding:12px 4vw;text-align:center;font-family:var(--deco);font-size:1.1rem;letter-spacing:.2em}
.band em{color:var(--sky);font-style:normal;margin:0 1.2em}

section{position:relative;z-index:1;padding:clamp(70px,10vw,130px) 6vw}
.title{font-family:var(--en);font-style:italic;font-weight:600;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.1}
.title small{display:block;font-family:var(--mincho);font-style:normal;font-size:.95rem;color:var(--blue);letter-spacing:.25em;margin-top:.5rem;font-weight:500}

.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;max-width:1100px;margin:0 auto;align-items:center}
.intro p+p{margin-top:1em}
.info{margin-top:1.8rem;padding:1.2rem 1.5rem;border-left:3px solid var(--blue);background:var(--tint);border-radius:0 14px 14px 0;font-size:.95rem}
.info b{color:var(--blue)}
.atom{width:100%;max-width:440px;margin:0 auto;display:block}
.atom .ring{transform-origin:200px 200px;animation:spin 22s linear infinite}
.atom .r2{animation-duration:30s;animation-direction:reverse}
.atom .r3{animation-duration:40s}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:820px){.intro{grid-template-columns:1fr}}

.contents{background:var(--tint)}
.cwrap{max-width:1180px;margin:0 auto}
.lead{margin-top:1rem;color:var(--sub);font-size:.92rem}
.index{display:grid;grid-template-columns:1.15fr 1fr;gap:5vw;margin-top:3rem;align-items:start}
.rows{border-top:1px solid var(--ink)}
.row{position:relative;display:grid;grid-template-columns:5.2rem 1fr auto;gap:1rem;align-items:baseline;padding:1.5rem .4rem;border-bottom:1px solid var(--line);transition:padding .4s cubic-bezier(.2,.8,.2,1),background .3s}
.row::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--blue);transform:scaleY(0);transition:transform .35s}
.row .no{font-family:var(--en);font-style:italic;font-size:1.15rem;color:var(--sub)}
.row h3{font-family:var(--sans);font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.5;font-weight:700}
.row .kind{font-size:.78rem;color:var(--blue);border:1px solid #c9d2f5;border-radius:99px;padding:0 12px;white-space:nowrap;background:#fff}
.row p{grid-column:2/4;font-size:.9rem;color:var(--sub);line-height:1.85;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s,opacity .4s}
.row.on{padding-left:1.4rem;background:#fff}
.row.on::before{transform:scaleY(1)}
.row.on .no{color:var(--blue)}
.row.on p{max-height:6em;opacity:1;margin-top:.4rem}
.stage{position:sticky;top:96px;aspect-ratio:1;border-radius:24px;background:#fff;border:1px solid var(--line);overflow:hidden;display:grid;place-items:center}
.stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(27,35,64,.12) 1px,transparent 1.4px);background-size:18px 18px}
.stage svg{position:absolute;width:74%;opacity:0;transform:scale(.8) rotate(-6deg);transition:opacity .45s,transform .6s cubic-bezier(.3,1.5,.5,1)}
.stage svg.on{opacity:1;transform:none}
.stage svg .draw{stroke-dasharray:1;stroke-dashoffset:1}
.stage svg.on .draw{animation:dr 1.2s .2s ease forwards}
@keyframes dr{to{stroke-dashoffset:0}}
.stage .cap{position:absolute;left:20px;bottom:14px;font-family:var(--en);font-style:italic;color:var(--sub)}
.go{position:absolute;right:18px;bottom:14px;font-family:var(--en);font-style:italic;color:var(--blue);font-size:1.1rem}
.go::after{content:" ⟶"}
@media(max-width:860px){
  .index{grid-template-columns:1fr}.stage{display:none}
  .row{grid-template-columns:3.6rem 1fr}.row .kind{display:none}.row p{grid-column:2;max-height:none;opacity:1;margin-top:.4rem}
}

footer{position:relative;z-index:1;background:var(--ink);color:#fff;padding:70px 6vw 30px}
.fgrid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px}
footer h4{font-family:var(--mincho);font-weight:500;font-size:1rem;color:var(--sky);margin-bottom:.6rem;letter-spacing:.1em}
footer li{font-size:.9rem;margin:.3rem 0}
footer a{opacity:.85;border-bottom:1px solid transparent;transition:.3s}
footer a:hover{opacity:1;border-color:var(--sky)}
.copy{text-align:center;font-size:.78rem;opacity:.6;margin-top:50px}

.rv{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.stage svg .draw{stroke-dashoffset:0!important}.rv,h1 span,.year,.en,.dept,.hint{opacity:1;transform:none}}