/* =========================================================
   UNNAN UNITED LEAGUE — redesign 2026.10
   tone: ink & paper, after the emblem (circle / orbit / cloud)
   ========================================================= */
:root{
  --paper:#F7F5F0;      /* 生成り */
  --paper-2:#EFECE5;    /* 少し沈めた面 */
  --white:#FFFFFF;
  --ink:#1C1C1A;        /* 墨 */
  --ink-2:#3F3E3A;      /* 本文 */
  --mute:#85827A;
  --line:rgba(28,28,26,.14);
  --line-2:rgba(28,28,26,.36);
  --sky:#8DB3C7;        /* 雲間の青（差し色・最小限） */
  --sky-d:#3E6982;
  --sky-t:#E5EDF1;

  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --jp:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --serif:"Fraunces","Shippori Mincho",Georgia,serif;
  --round:"Quicksand","Zen Kaku Gothic New",sans-serif;

  --gut:clamp(16px,4.4vw,72px);
  --max:1320px;
  --hd:84px;
  --ease:cubic-bezier(.33,0,.2,1);
  --ease-o:cubic-bezier(.16,1,.3,1);

  /* legacy aliases (inline styles in generated pages) */
  --k:var(--ink); --w:var(--white); --y:var(--sky-d); --r:var(--sky-d); --grey:var(--mute);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);font-weight:400;font-size:16px;line-height:1.9;letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"palt" 0;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,dl,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--sky-t);color:var(--ink)}
:focus-visible{outline:2px solid var(--sky-d);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.wrap{width:100%;max-width:calc(var(--max) + var(--gut) * 2);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(88px,11vw,170px) 0;position:relative}
.tint{background:var(--paper-2)}
.ink{background:var(--ink);color:var(--paper)}

/* ---------- type ---------- */
.label{display:flex;align-items:center;gap:14px;font:600 12px/1.2 var(--round);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:clamp(20px,2.4vw,30px)}
.label::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;border:1px solid currentColor;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 7px var(--sky)}
.label span{font:500 12px/1.2 var(--jp);letter-spacing:.12em;text-transform:none;color:var(--mute);padding-left:14px;border-left:1px solid var(--line-2)}
.ink .label,.cta-band .label{color:var(--paper)}
.ink .label::before{box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 7px var(--sky)}
.ink .label span{color:rgba(247,245,240,.6);border-color:rgba(247,245,240,.3)}
.tint .label::before{box-shadow:inset 0 0 0 3px var(--paper-2),inset 0 0 0 7px var(--sky)}

.h2{font:500 clamp(23px,3.5vw,50px)/1.6 var(--mincho);letter-spacing:.08em;font-feature-settings:"palt" 1}
.h2 > span{display:block}
.prose{font-size:clamp(15px,1.1vw,16.5px);line-height:2.15;color:var(--ink-2)}
.ink .prose{color:rgba(247,245,240,.82)}
.prose p+p{margin-top:1.4em}
.prose strong{font-weight:700;color:var(--ink)}
.ink .prose strong{color:var(--paper)}

.sec-head{margin-bottom:clamp(48px,6vw,90px);max-width:880px}
.sec-head--center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head--center .label{justify-content:center}
.sec-head__lead{margin-top:18px;color:var(--mute);font-size:15px}

/* ---------- cloud line (after the client's sample: a cloud whose base runs out into a long, thinning line) ---------- */
.cloudline{display:flex;align-items:stretch;width:100%;max-width:var(--cl-w,340px);height:var(--cl-h,30px);margin:var(--cl-m,22px 0 0);color:var(--ink)}
.cloudline svg{display:block;height:100%;fill:currentColor;overflow:hidden}
.cloudline__cloud{flex:none;width:calc(var(--cl-h,30px) * 107 / 80);opacity:0;transform:translateY(6px);transition:opacity 1s var(--ease),transform 1.2s var(--ease-o)}
.cloudline__tail{flex:1;min-width:0;margin-left:-.5px;transform-origin:left;transform:scaleX(0);transition:transform 1.8s var(--ease-o) .25s}
.cloudline.is-in .cloudline__cloud{opacity:1;transform:none}
.cloudline.is-in .cloudline__tail{transform:none}
.ink .cloudline,.cta-band .cloudline{color:var(--paper)}
.sec-head--center .cloudline{margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion:reduce){.cloudline__cloud,.cloudline__tail{opacity:1!important;transform:none!important}}

/* ---------- buttons ---------- */
.btn-line{display:inline-flex;align-items:center;gap:18px;margin-top:40px;padding:6px 6px 6px 26px;border:1px solid var(--line-2);border-radius:99px;font-weight:500;font-size:15px;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s}
.btn-line i{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-style:normal;transition:transform .5s var(--ease-o)}
.btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-line:hover i{background:var(--paper);color:var(--ink);transform:translateX(4px)}
.ink .btn-line{border-color:rgba(247,245,240,.35)}
.ink .btn-line i{background:var(--paper);color:var(--ink)}

/* ---------- reveals ---------- */
.reveal,.reveal-stagger>*,.reveal-lines>span{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease-o)}
.reveal.is-in,.reveal-stagger.is-in>*,.reveal-lines.is-in>span{opacity:1;transform:none}
.reveal-stagger.is-in>*:nth-child(2),.reveal-lines.is-in>span:nth-child(2){transition-delay:.1s}
.reveal-stagger.is-in>*:nth-child(3),.reveal-lines.is-in>span:nth-child(3){transition-delay:.2s}
.reveal-stagger.is-in>*:nth-child(4),.reveal-lines.is-in>span:nth-child(4){transition-delay:.3s}
.reveal-stagger.is-in>*:nth-child(5){transition-delay:.4s}
.reveal-stagger.is-in>*:nth-child(6){transition-delay:.5s}
.reveal-img{overflow:hidden}
.reveal-img img{transform:scale(1.08);opacity:0;transition:transform 1.8s var(--ease-o),opacity 1.2s var(--ease)}
.reveal-img.is-in img{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger>*,.reveal-lines>span,.reveal-img img{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- progress ---------- */
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:120;pointer-events:none}
.progress i{display:block;height:100%;background:var(--sky-d);transform-origin:left;transform:scaleX(0)}

/* ---------- loader (top page) ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--paper);display:grid;place-items:center;align-content:center;gap:28px;transition:opacity .9s var(--ease),visibility .9s}
.loader__emblem{position:relative;width:min(38vw,190px);aspect-ratio:1;display:grid;place-items:center}
.loader__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.loader__ring{transform:none;opacity:0;animation:fadeUp 1.2s var(--ease) forwards}
.loader__emblem img{width:100%;opacity:0;transform:translateY(8px);animation:fadeUp 1s var(--ease-o) .55s forwards}
.loader__txt{font:600 11px/1 var(--round);letter-spacing:.3em;color:var(--mute);opacity:0;animation:fadeUp 1s var(--ease-o) .8s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeUp{to{opacity:1;transform:none}}
body:not(.is-loading) .loader{opacity:0;visibility:hidden}
.loader-seen .loader{display:none}

/* ---------- page fade (sub pages) ---------- */
.wipe{position:fixed;inset:0;z-index:300;background:var(--paper);pointer-events:none;opacity:1;transition:opacity .7s var(--ease)}
.wipe span{display:none}
.wipe.is-out,.wipe.is-gone{opacity:0}
.wipe.is-leave{opacity:1;transition-duration:.4s}

/* ---------- header ---------- */
.hd{position:fixed;left:0;right:0;top:0;z-index:100;height:var(--hd);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gut);
  transition:transform .6s var(--ease-o),background .4s,color .4s,height .4s,box-shadow .4s}
.hd.is-scrolled{background:rgba(247,245,240,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);height:68px;box-shadow:0 1px 0 var(--line)}
.hd.is-hide{transform:translateY(-100%)}
.hd.is-dark{color:var(--paper)}
.hd.is-dark.is-scrolled{background:rgba(28,28,26,.82);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.hd.is-dark .hd__logo img{filter:invert(1)}
.hd__logo{display:flex;align-items:center;gap:14px;flex:none}
.hd__logo img{width:56px;height:56px;object-fit:contain;transition:filter .4s,width .4s,height .4s}
.hd.is-scrolled .hd__logo img{width:48px;height:48px}
.hd__name{font:600 15px/1.35 var(--mincho);letter-spacing:.1em;white-space:nowrap}
.hd__name small{display:block;font:500 10px/1.4 var(--jp);letter-spacing:.16em;opacity:.65}
.hd__nav{display:flex;gap:clamp(16px,2vw,34px)}
.hd__nav a{position:relative;display:flex;flex-direction:column;align-items:center;font-size:14px;font-weight:500;letter-spacing:.12em;line-height:1.3;padding:6px 0}
.hd__nav a small{font:600 9.5px/1 var(--round);letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-bottom:5px}
.hd__nav a::after{content:"";position:absolute;left:50%;bottom:-2px;width:5px;height:5px;border-radius:50%;background:var(--sky-d);transform:translateX(-50%) scale(0);transition:transform .4s var(--ease-o)}
.hd__nav a:hover::after,.hd__nav a.is-current::after{transform:translateX(-50%) scale(1)}
.hd__right{display:flex;align-items:center;gap:10px}
.hd__sns{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);transition:background .3s,color .3s}
.hd.is-dark .hd__sns,.hd.is-dark .hd__contact{border-color:rgba(247,245,240,.35)}
.hd__sns svg{width:18px;fill:currentColor}
.hd__sns:hover{background:var(--ink);color:var(--paper)}
.hd__contact{font-size:13.5px;font-weight:500;letter-spacing:.1em;padding:10px 22px;border-radius:99px;border:1px solid var(--line-2);transition:background .3s,color .3s,border-color .3s}
.hd__contact:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hd.is-dark .hd__sns:hover,.hd.is-dark .hd__contact:hover{background:var(--paper);color:var(--ink)}
.hd__burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);position:relative}
.hd.is-dark .hd__burger{border-color:rgba(247,245,240,.35)}
.hd__burger span{position:absolute;left:14px;right:14px;height:1.5px;background:currentColor;transition:transform .5s var(--ease-o)}
.hd__burger span:first-child{top:19px}
.hd__burger span:last-child{top:25px}
body.menu-open .hd__burger span:first-child{transform:translateY(3px) rotate(20deg)}
body.menu-open .hd__burger span:last-child{transform:translateY(-3px) rotate(-20deg)}
body.menu-open .hd{color:var(--ink);background:transparent;box-shadow:none}
body.menu-open .hd .hd__logo img{filter:none}

/* ---------- menu (mobile / tablet) ---------- */
.menu{position:fixed;inset:0;z-index:90;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--hd) + 20px) var(--gut) 34px;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;overflow-y:auto}
body.menu-open .menu{opacity:1;visibility:visible}
.menu__nav{display:flex;flex-direction:column}
.menu__nav a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font:500 clamp(22px,6vw,34px)/1.4 var(--mincho);letter-spacing:.08em;
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .8s var(--ease-o)}
.menu__nav a em{font:400 italic 14px/1 var(--serif);color:var(--mute);width:24px}
.menu__nav a small{margin-left:auto;font:600 10px/1 var(--round);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
body.menu-open .menu__nav a{opacity:1;transform:none}
body.menu-open .menu__nav a:nth-child(2){transition-delay:.04s}
body.menu-open .menu__nav a:nth-child(3){transition-delay:.08s}
body.menu-open .menu__nav a:nth-child(4){transition-delay:.12s}
body.menu-open .menu__nav a:nth-child(5){transition-delay:.16s}
body.menu-open .menu__nav a:nth-child(6){transition-delay:.2s}
body.menu-open .menu__nav a:nth-child(7){transition-delay:.24s}
body.menu-open .menu__nav a:nth-child(8){transition-delay:.28s}
.menu__foot{display:flex;align-items:center;gap:22px;margin-top:30px}
.menu__emblem{width:86px}
.menu__foot div{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}

/* ---------- floating CF badge ---------- */
.float-cta{position:fixed;right:clamp(14px,2.2vw,30px);bottom:clamp(14px,2.2vw,30px);z-index:80;width:112px;height:112px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(28,28,26,.18);transition:opacity .5s var(--ease),transform .7s var(--ease-o),background .4s,color .4s}
.float-cta.is-hidden{opacity:0;transform:scale(.7);pointer-events:none}
.float-cta.on-dark{background:var(--paper);color:var(--ink)}
.float-cta__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 30s linear infinite}
.float-cta__ring text{font:700 8.6px var(--round);letter-spacing:.2em;fill:currentColor}
.float-cta__body{position:relative;text-align:center;font:600 15px/1.2 var(--mincho);letter-spacing:.1em}
.float-cta__body small{display:block;font:500 9px/1.4 var(--jp);letter-spacing:.06em;margin-bottom:3px;opacity:.75}
.float-cta:hover{transform:scale(1.05)}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   TOP PAGE
   ========================================================= */
/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--hd) + 10px);overflow:hidden}
.hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:clamp(30px,4vw,70px);flex:1}
.hero__copy{position:relative;z-index:2;padding:clamp(30px,4vw,60px) 0}
.hero__eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;letter-spacing:.16em;color:var(--ink-2);margin-bottom:clamp(26px,3.4vw,44px)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--sky-d);box-shadow:0 0 0 5px var(--sky-t)}
.hero__catch{font:500 clamp(40px,5.6vw,86px)/1.42 var(--mincho);letter-spacing:.08em;font-feature-settings:"palt" 1}
.hero__catch span{display:block;white-space:nowrap}
.hero__en{margin-top:clamp(18px,2vw,26px);font:300 italic clamp(19px,1.8vw,26px)/1.3 var(--serif);letter-spacing:.01em;color:var(--ink-2)}
.hero__copy .cloudline{--cl-w:400px;--cl-m:clamp(22px,2.6vw,34px) 0 0}
.hero__lead{margin-top:clamp(14px,1.6vw,20px);max-width:380px;font-size:15px;line-height:2;color:var(--ink-2)}
.hero__movie{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(26px,3vw,40px);font-size:14px;font-weight:500;letter-spacing:.1em}
.hero__movie small{font:400 italic 14px/1 var(--serif);color:var(--mute);letter-spacing:.02em}
.hero__movie-ico{width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;transition:background .4s,color .4s}
.hero__movie-ico svg{width:16px;fill:currentColor;margin-left:3px}
.hero__movie:hover .hero__movie-ico{background:var(--ink);color:var(--paper)}

.hero__visual{position:relative;display:grid;place-items:center}
.orb{position:relative;width:min(100%,640px,calc(100svh - 200px));aspect-ratio:1;min-width:280px}
.orb__media{position:absolute;inset:12%;border-radius:50%;overflow:hidden;background:var(--paper-2);z-index:1}
.orb__media video{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.02)}
.aura{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.aura .a-main{fill:var(--ink)}
.ink .aura .a-main,.cta-band .aura .a-main{fill:var(--paper)}
.orb__aura{z-index:2}
.orb__text{position:absolute;inset:0;width:100%;height:100%;animation:spin 80s linear infinite;overflow:visible}
.orb__text text{font:600 12.5px var(--round);letter-spacing:.32em;fill:var(--ink)}
.hero__foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;padding-bottom:28px;font:600 11px/1 var(--round);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.hero__foot span:first-child{font:500 12px/1 var(--jp);letter-spacing:.16em;text-transform:none}
.hero__scroll{display:flex;align-items:center;gap:12px}
.hero__scroll i{position:relative;width:1px;height:40px;background:var(--line-2);overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--ink);animation:scrollLine 2.4s var(--ease) infinite}
@keyframes scrollLine{to{top:100%}}

/* ---------- notice ---------- */
.notice{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:clamp(12px,2vw,28px);padding:20px clamp(16px,2vw,28px);border:1px solid var(--line-2);border-radius:99px;margin-top:clamp(30px,4vw,50px);
  font-size:14.5px;transition:background .4s,border-color .4s}
.notice:hover{background:var(--white);border-color:var(--ink)}
.notice__tag{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--sky-d);display:flex;align-items:center;gap:8px}
.notice__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.notice time{font:400 15px/1 var(--serif);letter-spacing:.04em;color:var(--mute)}
.notice__ttl{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice i{font-style:normal;transition:transform .4s var(--ease-o)}
.notice:hover i{transform:translateX(5px)}

/* ---------- about ---------- */
.about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,130px);align-items:start}
.about__pics{position:relative;margin-top:clamp(40px,5vw,70px);height:clamp(340px,36vw,520px)}
.pic{position:absolute;overflow:hidden;background:var(--paper-2)}
.pic img{width:100%;height:100%;object-fit:cover}
.pic--round{left:0;top:0;width:58%;aspect-ratio:1;border-radius:50%}
.pic--rect{right:0;bottom:0;width:52%;aspect-ratio:4/3;border-radius:22px}
.about__body{padding-top:clamp(0px,8vw,130px)}
.about__last{margin-top:2.2em;font:500 clamp(19px,1.7vw,24px)/1.9 var(--mincho);letter-spacing:.08em;color:var(--ink)}

/* ---------- drift (calm marquee) ---------- */
.drift{overflow:hidden;white-space:nowrap;padding:clamp(10px,1.6vw,20px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.drift__track{display:inline-flex;align-items:center;will-change:transform}
.drift__track span{font:300 italic clamp(34px,5vw,74px)/1.25 var(--serif);letter-spacing:-.005em;color:var(--ink);padding:0 .5em}
.drift__track b{width:clamp(16px,1.6vw,24px);height:clamp(16px,1.6vw,24px);border-radius:50%;border:1px solid var(--ink);flex:none;position:relative}
.drift__track b::after{content:"";position:absolute;inset:30%;border-radius:50%;background:var(--sky)}

/* ---------- movie ---------- */
.player-stage{position:relative}
.player{position:relative;max-width:1200px;margin:0 auto;aspect-ratio:16/9;background:#111;border-radius:clamp(12px,1.8vw,26px);overflow:hidden;box-shadow:0 30px 70px -30px rgba(28,28,26,.45)}
.player__video{width:100%;height:100%;object-fit:contain;background:#111}
.player__big{position:absolute;left:50%;top:50%;width:clamp(110px,12vw,160px);height:clamp(110px,12vw,160px);transform:translate(-50%,-50%);display:grid;place-items:center;color:var(--paper);transition:opacity .4s,transform .6s var(--ease-o);z-index:2}
.player__big-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:spin 40s linear infinite}
.player__big-ring text{font:700 9.5px var(--round);letter-spacing:.26em;fill:currentColor}
.player__big-ico{width:58%;height:58%;border-radius:50%;background:var(--paper);display:grid;place-items:center;transition:transform .5s var(--ease-o)}
.player__big-ico svg{width:30%;fill:var(--ink);margin-left:6%}
.player__big:hover .player__big-ico{transform:scale(1.06)}
.player.is-playing .player__big,.player.is-started .player__big{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.85)}
.player.is-started:not(.is-playing) .player__big{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(.8)}
.player::before{content:"";position:absolute;inset:0;background:rgba(20,20,18,.18);pointer-events:none;transition:opacity .5s;z-index:1}
.player.is-started::before{opacity:0}
.player::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);pointer-events:none;transition:opacity .4s}
.player.is-playing.is-idle::after{opacity:0}
.player__ctrl{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:6px;padding:12px clamp(10px,1.6vw,22px) clamp(10px,1.4vw,18px);color:var(--paper);transition:opacity .4s,transform .4s var(--ease-o)}
.player.is-playing.is-idle .player__ctrl{opacity:0;transform:translateY(10px)}
.player.is-playing.is-idle{cursor:none}
.pc-btn{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--paper);transition:background .25s,color .25s}
.pc-btn svg{width:21px;height:21px;fill:currentColor}
.pc-btn:hover,.pc-btn:focus-visible{background:rgba(255,255,255,.16);outline:none}
.pc-play{background:var(--paper);color:var(--ink)}
.pc-play:hover{background:var(--white)!important;color:var(--ink)}
.pc-play .i-pause,.player.is-playing .pc-play .i-play{display:none}
.player.is-playing .pc-play .i-pause{display:block}
.pc-mute .i-mute,.player.is-muted .pc-mute .i-vol{display:none}
.player.is-muted .pc-mute .i-mute{display:block}
.pc-time{font:400 13px/1 var(--serif);letter-spacing:.04em;white-space:nowrap;margin:0 8px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.pc-time b{color:var(--white);font-weight:400}
.pc-seek{position:relative;flex:1;height:30px;cursor:pointer;display:flex;align-items:center;touch-action:none;outline:none}
.pc-seek__rail{position:relative;width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.25);transition:height .2s}
.pc-seek:hover .pc-seek__rail,.pc-seek.is-drag .pc-seek__rail,.pc-seek:focus-visible .pc-seek__rail{height:5px}
.pc-seek__buf,.pc-seek__fill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;width:0}
.pc-seek__buf{background:rgba(255,255,255,.3)}
.pc-seek__fill{background:var(--white)}
.pc-seek__marks span{position:absolute;top:-1px;bottom:-1px;width:3px;background:rgba(0,0,0,.6);transform:translateX(-50%)}
.pc-seek__knob{position:absolute;left:0;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--white);box-shadow:0 0 0 4px rgba(141,179,199,.6);transform:scale(0);transition:transform .2s}
.pc-seek:hover .pc-seek__knob,.pc-seek.is-drag .pc-seek__knob,.pc-seek:focus-visible .pc-seek__knob{transform:scale(1)}
.pc-seek__tip{position:absolute;bottom:30px;left:0;transform:translateX(-50%);background:var(--paper);color:var(--ink);font:400 12px/1 var(--serif);padding:6px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap}
.pc-seek:hover .pc-seek__tip,.pc-seek.is-drag .pc-seek__tip{opacity:1}
.pc-vol{display:flex;align-items:center}
.pc-vol__range{width:0;opacity:0;transition:width .35s var(--ease-o),opacity .3s;accent-color:var(--paper);cursor:pointer}
.pc-vol:hover .pc-vol__range,.pc-vol:focus-within .pc-vol__range{width:80px;opacity:1;margin:0 6px}
.player:fullscreen{border-radius:0}

.chapters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:1200px;margin:clamp(24px,3vw,36px) auto 0;border-top:1px solid var(--line-2)}
.chapters li+li{border-left:1px solid var(--line)}
.chapters button{position:relative;width:100%;text-align:left;padding:18px clamp(10px,1.4vw,20px) 6px;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;transition:background .4s}
.chapters em{grid-row:span 2;font:300 italic 26px/1 var(--serif);color:var(--mute);transition:color .3s}
.chapters b{font-weight:500;font-size:14px;line-height:1.5;letter-spacing:.06em}
.chapters small{font:600 10px/1.4 var(--round);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.chapters button:hover{background:rgba(255,255,255,.5)}
.chapters button.is-on em{color:var(--sky-d)}
.chapters button::before{content:"";position:absolute;left:0;top:-1px;height:2px;background:var(--ink);width:var(--p,0%)}

/* ---------- program ---------- */
.progs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.prog{position:relative;z-index:1}
.prog__media{position:relative;width:min(100%,340px);aspect-ratio:1;margin:0 auto 34px}
.prog__pic{position:absolute;inset:6%;border-radius:50%;overflow:hidden;background:var(--paper-2)}
.prog__pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-o)}
.prog:hover .prog__pic img{transform:scale(1.05)}
.prog__no{display:flex;align-items:baseline;gap:12px;font:600 11px/1 var(--round);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.prog__no span{font:300 italic 34px/1 var(--serif);letter-spacing:0;color:var(--ink);text-transform:none}
.prog__ttl{margin-top:16px;font:600 clamp(22px,2vw,28px)/1.45 var(--mincho);letter-spacing:.08em}
.prog__lead{margin-top:6px;font-size:14px;font-weight:500;color:var(--sky-d);letter-spacing:.1em}
.prog__txt{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;line-height:2.05;color:var(--ink-2)}
.prog__txt p+p{margin-top:1em}

/* ---------- teams ---------- */
.teams__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,110px);align-items:center}
.teams__note{margin-top:26px;font:500 15.5px/2.1 var(--mincho);letter-spacing:.08em;color:var(--ink-2)}
.ring4{position:relative;width:min(100%,560px);aspect-ratio:1;margin:0 auto}
.ring4 svg{width:100%;height:100%;overflow:visible}
.ring4__links path{fill:none;stroke:var(--sky-d);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) .8s}
.ring4__hub{fill:var(--paper);stroke:none}
.ring4.is-in .ring4__links path{stroke-dashoffset:0}
.ring4__aura{opacity:0;transform:scale(.94) rotate(-20deg);transition:opacity 1.6s var(--ease),transform 2.4s var(--ease-o)}
.ring4.is-in .ring4__aura{opacity:1;transform:none}
.ring4__nodes li{position:absolute;left:var(--x);top:var(--y);width:clamp(72px,8vw,104px);z-index:2;aspect-ratio:1;border-radius:50%;background:var(--paper);border:1px solid var(--ink);transform:translate(-50%,-50%) scale(.6);opacity:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 1s var(--ease-o),opacity .8s var(--ease),background .4s,color .4s}
.ring4.is-in .ring4__nodes li{transform:translate(-50%,-50%);opacity:1}
.ring4.is-in .ring4__nodes li:nth-child(1){transition-delay:.5s}
.ring4.is-in .ring4__nodes li:nth-child(2){transition-delay:.7s}
.ring4.is-in .ring4__nodes li:nth-child(3){transition-delay:.9s}
.ring4.is-in .ring4__nodes li:nth-child(4){transition-delay:1.1s}
.ring4__nodes b{font:300 italic clamp(22px,2.2vw,30px)/1 var(--serif)}
.ring4__nodes li.is-more{border-style:dashed;border-color:var(--mute);background:var(--paper-2);color:var(--mute)}
.ring4__nodes li.is-more b{font:400 clamp(20px,2vw,26px)/.6 var(--serif);letter-spacing:.1em}
.ring4__nodes li.is-more:hover{background:var(--paper-2);color:var(--mute)}
.teams .h2{font-size:clamp(23px,2.9vw,42px)}
.ring4__nodes span{margin-top:4px;font:600 9.5px/1 var(--round);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.ring4__nodes li:hover{background:var(--ink);color:var(--paper)}
.ring4__nodes li:hover span{color:rgba(247,245,240,.6)}

.qs{margin-top:clamp(80px,10vw,150px)}
.qs__lead{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px;font:500 clamp(22px,2.4vw,32px)/1.5 var(--mincho);letter-spacing:.08em;margin-bottom:clamp(26px,3vw,40px)}
.qs__lead span{font:600 11px/1 var(--round);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.qs__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.q{position:relative;background:var(--paper);border-radius:22px;padding:clamp(26px,3vw,42px) clamp(22px,2.4vw,36px) clamp(30px,3.4vw,48px);overflow:hidden}
.q__n{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--ink);font:400 italic 17px/1 var(--serif)}
.q p{margin-top:24px;font:500 clamp(18px,1.7vw,23px)/1.75 var(--mincho);letter-spacing:.06em}
.q::after{content:"?";position:absolute;right:18px;bottom:-.24em;font:300 italic clamp(110px,11vw,160px)/1 var(--serif);color:var(--sky-t);z-index:0;pointer-events:none}
.q>*{position:relative;z-index:1}

.win{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:center;margin-top:clamp(80px,10vw,150px)}
.win__pic{aspect-ratio:16/10;border-radius:clamp(20px,3vw,40px) clamp(20px,3vw,40px) clamp(20px,3vw,40px) 200px;overflow:hidden}
.win__pic img{width:100%;height:100%;object-fit:cover}
.win__txt .cloudline{--cl-m:0 0 22px}
.win__jp{font:500 clamp(24px,2.7vw,38px)/1.7 var(--mincho);letter-spacing:.08em}
.win__note{margin-top:22px;font-size:15px;line-height:2;color:var(--ink-2)}

/* ---------- support (ink) ---------- */
.support{overflow:hidden}
.support__emblem{position:absolute;right:-12vw;top:50%;width:min(76vw,1000px);transform:translateY(-50%);opacity:.05;pointer-events:none}
.support__inner{position:relative}
.support__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start}
.support__q{font:500 clamp(22px,2.2vw,30px)/1.65 var(--mincho);letter-spacing:.08em}
.support__sub{margin-top:18px;font-size:15px;line-height:2;color:rgba(247,245,240,.75)}
.join-btns{display:grid;gap:12px;margin-top:34px}
.join{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;padding:20px 12px 20px 28px;border:1px solid rgba(247,245,240,.3);border-radius:99px;transition:background .4s,color .4s,border-color .4s}
.join small{grid-column:1;font:600 10px/1 var(--round);letter-spacing:.22em;text-transform:uppercase;opacity:.6}
.join b{grid-column:1;font-weight:500;font-size:16.5px;letter-spacing:.1em}
.join i{grid-column:2;grid-row:1/3;width:48px;height:48px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;font-style:normal;transition:transform .5s var(--ease-o)}
.join:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.join:hover i{background:var(--ink);color:var(--paper);transform:translateX(4px)}
/* the paper version (sub pages / light bg) */
.join--w,.paper .join,.sec:not(.ink):not(.cta-band) .join{border-color:var(--line-2)}
.sec:not(.ink):not(.cta-band) .join i{background:var(--ink);color:var(--paper)}
.sec:not(.ink):not(.cta-band) .join:hover{background:var(--ink);color:var(--paper)}
.sec:not(.ink):not(.cta-band) .join:hover i{background:var(--paper);color:var(--ink)}

.cf{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,44px);margin-top:clamp(60px,7vw,100px);padding:clamp(24px,3vw,40px) clamp(24px,3.4vw,52px);border-radius:28px;background:var(--paper);color:var(--ink);transition:transform .6s var(--ease-o)}
.cf:hover{transform:translateY(-4px)}
.cf__tag{width:84px;height:84px;border-radius:50%;background:var(--sky-t);color:var(--sky-d);display:grid;place-items:center;font-weight:700;font-size:14px;letter-spacing:.1em;box-shadow:0 0 0 1px var(--sky) inset}
.cf__main small{display:block;font-size:13px;font-weight:500;color:var(--mute);letter-spacing:.1em;margin-bottom:6px}
.cf__main b{font:500 clamp(19px,2vw,28px)/1.6 var(--mincho);letter-spacing:.08em}
.cf__go{display:flex;align-items:center;gap:14px;font-weight:500;font-size:14px;letter-spacing:.1em;white-space:nowrap}
.cf__go i{width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-style:normal}

.more-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(30px,4vw,50px);border-top:1px solid rgba(247,245,240,.22)}
.more-links li+li{border-left:1px solid rgba(247,245,240,.22)}
.more-links a{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:24px clamp(14px,2vw,28px);font-weight:500;letter-spacing:.08em;transition:background .4s}
.more-links small{grid-column:1;font:600 10px/1 var(--round);letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.more-links i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;transition:transform .4s var(--ease-o)}
.more-links a:hover{background:rgba(247,245,240,.06)}
.more-links a:hover i{transform:translateX(5px)}

/* ---------- news (top) ---------- */
.news__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,56px)}
.news__head .h2{font-size:clamp(22px,2.4vw,32px)}
.news__head .btn-line{margin-top:0}
.news__head .cloudline{--cl-m:18px 0 0}
.news__list{border-top:1px solid var(--line-2)}
.news__list a{display:grid;grid-template-columns:120px 110px 1fr auto;align-items:center;gap:clamp(12px,2vw,30px);padding:28px 6px;border-bottom:1px solid var(--line);transition:background .4s,padding .5s var(--ease-o)}
.news__list a:hover{background:var(--white);padding-left:20px;padding-right:20px}
.news__list time{font:400 16px/1 var(--serif);letter-spacing:.04em;color:var(--mute)}
.news__list p{font-weight:500;line-height:1.75}
.news__list i{font-style:normal;transition:transform .4s var(--ease-o)}
.news__list a:hover i{transform:translateX(5px)}
.news__cat{justify-self:start;display:inline-block;font:600 10px/1 var(--round);letter-spacing:.18em;padding:6px 11px;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}

/* ---------- footer ---------- */
.ft{background:var(--paper-2);padding:clamp(70px,9vw,130px) 0 30px;position:relative;z-index:1}
.ft__line .cloudline{--cl-w:none;--cl-h:clamp(30px,3vw,42px);--cl-m:0 0 clamp(50px,6vw,80px)}
.ft__slogan{display:flex;align-items:center;gap:clamp(30px,5vw,80px);padding-bottom:clamp(30px,4vw,50px)}
.ft__emblem{width:clamp(150px,18vw,240px);flex:none}
.ft__slogan p{font:300 italic clamp(36px,5.4vw,84px)/1.12 var(--serif);letter-spacing:-.01em}
.ft__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px;border-top:1px solid var(--line);padding-top:clamp(40px,5vw,70px);padding-bottom:clamp(40px,5vw,70px)}
.ft__name{font:600 20px/1.5 var(--mincho);letter-spacing:.1em}
.ft__name small{display:block;font:500 12px/1.4 var(--jp);letter-spacing:.14em;color:var(--mute)}
.ft__org{margin-top:12px;font-size:14px;color:var(--ink-2)}
.ft__sns{display:inline-block;margin-top:18px;font-size:13px;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}
.ft__nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 20px;align-content:start}
.ft__nav a{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;letter-spacing:.08em;transition:color .3s}
.ft__nav a small{font:600 9.5px/1 var(--round);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.ft__nav a:hover{color:var(--sky-d)}
.ft__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
.ft__bottom a:hover{color:var(--ink)}
.ft__bottom small{font:600 10px/1 var(--round);letter-spacing:.16em}

/* ================= responsive ================= */
@media (max-width:1180px){
  .hd__nav{display:none}
  .hd__burger{display:block}
}
@media (max-width:960px){
  .hero{min-height:auto}
  .hero__inner{grid-template-columns:minmax(0,1fr);gap:10px}
  .hero__visual{order:-1;margin-top:10px}
  .orb{width:min(88vw,520px)}
  .hero__copy{padding-top:10px}
  .hero__catch{font-size:clamp(36px,9vw,64px)}
  .hero__foot span:last-child{display:none}
  .about__grid,.teams__grid,.support__grid,.win{grid-template-columns:minmax(0,1fr)}
  .about__body{padding-top:0}
  .progs{grid-template-columns:minmax(0,1fr);gap:70px;max-width:560px;margin:0 auto}
    .prog__media{width:min(80%,320px)}
  .qs__list{grid-template-columns:minmax(0,1fr)}
  .chapters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chapters li:nth-child(4){border-left:0}
  .chapters li:nth-child(n+4){border-top:1px solid var(--line)}
  .more-links{grid-template-columns:minmax(0,1fr)}
  .more-links li+li{border-left:0;border-top:1px solid rgba(247,245,240,.22)}
  .ft__inner{grid-template-columns:minmax(0,1fr)}
  .ft__nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .win__pic{border-radius:24px 24px 24px 120px}
}
@media (max-width:640px){
  :root{--hd:70px}
  .hd__name{font-size:13.5px}
  .hd__logo img,.hd.is-scrolled .hd__logo img{width:44px;height:44px}
  .hd__contact,.hd__sns{display:none}
  .notice{grid-template-columns:auto 1fr auto;border-radius:18px;row-gap:6px}
  .notice time{grid-column:2}
  .notice__ttl{grid-column:1/-1;grid-row:2;white-space:normal}
  .notice i{grid-row:1;grid-column:3}
  .about__pics{height:auto;aspect-ratio:1/0.95}
  .chapters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chapters li:first-child{grid-column:1/-1}
  .chapters li{border-left:0!important;border-top:1px solid var(--line)}
  .chapters li:nth-child(odd):not(:first-child){border-left:1px solid var(--line)!important}
  .pc-back,.pc-fwd,.pc-vol__range{display:none}
  .pc-btn{width:34px;height:34px}
  .pc-btn svg{width:18px;height:18px}
  .pc-time{font-size:12px;margin:0 4px}
  .news__list a{grid-template-columns:auto 1fr auto;row-gap:10px;padding:22px 2px}
  .news__list time{grid-column:1}
  .news__list .news__cat{grid-column:2}
  .news__list p{grid-column:1/-1;grid-row:2}
  .news__list i{grid-column:3;grid-row:1}
  .cf{grid-template-columns:minmax(0,1fr);text-align:left}
  .cf__tag{width:64px;height:64px;font-size:12px}
  .ft__slogan{flex-direction:column;align-items:flex-start}
  .ft__nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .float-cta{width:92px;height:92px}
  .float-cta__ring text{font-size:9.6px}
  .float-cta__body{font-size:13px}
  .join{padding-left:22px}
  .label{flex-wrap:wrap}
}