@charset "UTF-8";
/* =========================================================
   大明司一利 トップページ v2
   コンセプト：「同じ画面で、一緒に。」
   画面共有・カーソル・付箋・キーボードのキーをモチーフに、
   ネイビー × イエロー × ブルーで組み立てる。
   ========================================================= */
:root{
  color-scheme: light;
  --navy:#0e1f45;
  --navy-2:#1a3270;
  --text:#2a3552;
  --mute:#5f6a86;
  --paper:#fbfaf6;
  --cream:#fff6d8;
  --white:#ffffff;
  --blue:#2f6bff;
  --sky:#e7efff;
  --violet:#7a5cff;
  --lilac:#efeaff;
  --coral:#ff6a55;
  --peach:#ffece6;
  --mint:#14b88a;
  --mint-t:#e1f6ee;
  --yellow:#ffd23f;
  --yellow-2:#ffbf1a;
  --line:rgba(14,31,69,.14);
  --dot:rgba(14,31,69,.12);
  --ff-head:"Zen Maru Gothic","Noto Sans JP","Hiragino Maru Gothic ProN",sans-serif;
  --ff-body:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --ff-en:"Bricolage Grotesque","Noto Sans JP",system-ui,sans-serif;
  --ff-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --pop:cubic-bezier(.3,1.6,.45,1);
  --key-shadow:var(--navy);
  --hd-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd-h) + 12px)}
body{
  margin:0;color:var(--text);font-family:var(--ff-body);font-weight:500;font-size:16px;line-height:1.9;
  background-color:var(--paper);
  background-image:radial-gradient(var(--dot) 1px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  line-break:strict;
}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
button{font:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.container{width:min(1160px,100% - 40px);margin-inline:auto}
@container lp (max-width:599px){.container{width:calc(100% - 32px)}}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:8px 14px;border-radius:10px;background:var(--navy);color:#fff;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* 読み込み進捗 */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:70;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--blue),var(--yellow))}

/* =========================================================
   共通パーツ
   ========================================================= */
.sec{position:relative;padding-block:clamp(84px,11cqi,140px)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-en);font-weight:800;font-size:13px;letter-spacing:.2em;color:var(--blue)}
.kicker span{padding:3px 9px;border-radius:99px;background:var(--navy);color:var(--yellow);font-family:var(--ff-mono);font-weight:500;font-size:11.5px;letter-spacing:0}
.kicker--light{color:var(--yellow)}
.kicker--light span{background:var(--yellow);color:var(--navy)}
.h2{margin-top:14px;font-family:var(--ff-head);font-weight:900;font-size:clamp(30px,4.3cqi,52px);line-height:1.32;letter-spacing:.01em;color:var(--navy);word-break:auto-phrase}
.sec-head{max-width:780px}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head__lead{margin-top:18px;font-size:clamp(15px,1.3cqi,16.5px);line-height:2;color:var(--text)}
.sec-head__eyebrow{margin-top:14px;font-weight:900;font-size:15px;color:var(--mute)}

/* 蛍光ペン */
.hl{color:inherit;padding:0 .08em;background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 92%,transparent 92%) no-repeat 0 0/0% 100%;transition:background-size .9s cubic-bezier(.6,0,.2,1) .25s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.is-in .hl,.hl.is-on{background-size:100% 100%}
.hl--y{color:var(--navy);padding:0 .14em;border-radius:.18em;background-image:linear-gradient(var(--yellow),var(--yellow))}
html:not(.js) .hl{background-size:100% 100%}

/* キー型ボタン */
.key{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:9px 10px 9px 24px;border:2.5px solid var(--navy);border-radius:18px;background:var(--yellow);color:var(--navy);box-shadow:0 6px 0 var(--key-shadow);font-weight:900;font-size:17px;line-height:1.3;letter-spacing:.02em;text-decoration:none;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .2s}
.key__txt small{display:block;font-weight:700;font-size:11px;letter-spacing:.04em;opacity:.78}
.key__ico{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--navy);color:var(--yellow);transition:transform .25s var(--ease)}
.key__ico svg{width:19px;height:19px}
.key:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--key-shadow)}
.key:hover .key__ico{transform:translateX(3px)}
.key:active{transform:translateY(6px);box-shadow:0 0 0 var(--key-shadow)}
.key--ghost{background:var(--white)}
.key--ghost .key__ico{background:var(--sky);color:var(--navy)}
.key--on-dark{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.75)}
.key--on-dark .key__ico{background:#fff;color:var(--navy)}
.key--on-dark:hover{background:rgba(255,255,255,.14)}
.key--sm{min-height:46px;gap:12px;padding:5px 6px 5px 16px;border-radius:14px;box-shadow:0 4px 0 var(--key-shadow);font-size:14px}
.key--sm .key__ico{width:32px;height:32px;border-radius:10px}
.key--sm .key__ico svg{width:15px;height:15px}
.key--sm:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--key-shadow)}
.key--sm:active{transform:translateY(4px);box-shadow:0 0 0 var(--key-shadow)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
@container lp (max-width:599px){.cta-row .key{flex:1 1 100%}}

/* 矢印リンク */
.alink{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding-bottom:3px;font-weight:900;font-size:15px;color:var(--blue);text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 2px;transition:background-size .35s var(--ease)}
.alink svg{width:14px;height:14px;flex:none;transition:transform .25s var(--ease)}
.alink:hover{background-size:0 2px;background-position:100% 100%}
.alink:hover svg{transform:translate(2px,-2px)}
.alinks{display:flex;flex-direction:column;align-items:flex-start}
.fine{margin-top:10px;font-size:12px;line-height:1.75;color:var(--mute)}

.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:99px;font-family:var(--ff-body);font-weight:900;font-size:11.5px;line-height:1.7;white-space:nowrap}
.pill--live{background:var(--mint);color:#fff}
.pill--live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s ease-in-out infinite}
.chip{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:5px;padding:2px 12px;border:2px solid var(--navy);border-radius:99px;background:#fff;font-weight:900;font-size:max(11px,2.5cqw);color:var(--navy);white-space:nowrap}
.chip svg{width:12px;height:12px}

/* カーソル（画面共有の相手） */
.cursor{position:absolute;left:0;top:0;z-index:30;display:flex;align-items:flex-start;pointer-events:none;opacity:0;transform:translate3d(var(--x,0),var(--y,0),0);transition:transform var(--dur,.9s) cubic-bezier(.55,0,.2,1),opacity .4s}
.cursor.is-ready{opacity:1}
.cursor svg{width:26px;height:26px;filter:drop-shadow(0 2px 3px rgba(14,31,69,.35))}
.cursor span{margin:17px 0 0 -6px;padding:2px 9px;border-radius:4px 99px 99px 99px;font-weight:900;font-size:11.5px;line-height:1.6;white-space:nowrap}
.cursor--t{color:var(--blue)}
.cursor--t span{background:var(--blue);color:#fff}
.cursor--u{color:var(--yellow-2)}
.cursor--u span{background:var(--yellow);color:var(--navy)}
.cursor::after{content:"";position:absolute;left:-6px;top:-6px;width:28px;height:28px;border-radius:50%;border:2.5px solid currentColor;opacity:0;transform:scale(.3)}
.cursor.is-click::after{animation:ripple .55s ease-out}

/* =========================================================
   HEADER
   ========================================================= */
.hd{position:sticky;top:0;z-index:50;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.hd.is-scrolled{background:rgba(251,250,246,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.hd__in{display:flex;align-items:center;gap:22px;height:var(--hd-h)}
.logo{display:inline-flex;align-items:center;gap:11px;margin-right:auto;color:var(--navy);text-decoration:none}
.logo__mark{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--navy);color:var(--yellow);box-shadow:3px 3px 0 var(--blue)}
.logo__mark svg{width:21px;height:21px;transform:translate(1px,1px)}
.logo__txt{display:grid;line-height:1.25}
.logo__txt b{font-family:var(--ff-head);font-weight:900;font-size:19px;letter-spacing:.06em}
.logo__txt small{font-size:10.5px;font-weight:700;color:var(--mute)}
.hd__nav{display:none;gap:24px}
.hd__nav a{position:relative;font-weight:700;font-size:14px;color:var(--navy);text-decoration:none;white-space:nowrap}
.hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hd__cta{display:none}
.hd__menu{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border:2px solid var(--navy);border-radius:12px;background:#fff;color:var(--navy);font-weight:900;font-size:13px;cursor:pointer}
.hd__burger{position:relative;width:18px;height:12px}
.hd__burger i{position:absolute;left:0;right:0;height:2.5px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
.hd__burger i:first-child{top:1px}
.hd__burger i:last-child{top:8px}
.hd__menu[aria-expanded="true"] .hd__burger i:first-child{top:5px;transform:rotate(45deg)}
.hd__menu[aria-expanded="true"] .hd__burger i:last-child{top:5px;transform:rotate(-45deg)}
.sheet{position:absolute;left:0;right:0;top:100%;padding:8px 20px 22px;background:var(--paper);border-bottom:2.5px solid var(--navy);box-shadow:0 30px 40px -20px rgba(14,31,69,.35);animation:sheetIn .35s var(--ease)}
.sheet nav{display:grid}
.sheet a{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1.5px dashed var(--line);color:var(--navy);text-decoration:none;font-size:16px}
.sheet a svg{width:16px;height:16px;color:var(--blue)}
.sheet .motion-toggle{margin-top:16px}
@container lp (min-width:1024px){
  .hd__cta{display:inline-flex}
}
@container lp (min-width:1120px){
  .hd__nav{display:flex}
  .hd__menu,.sheet{display:none!important}
}
@container lp (max-width:599px){
  :root{--hd-h:62px}
  .logo__txt b{font-size:17px}
  .logo__mark{width:34px;height:34px}
  .hd__menu-txt{display:none}
  .hd__menu{padding:10px}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding:clamp(24px,4cqi,56px) 0 clamp(40px,5cqi,64px);overflow:hidden;
  background:radial-gradient(circle at 88% 18%,rgba(47,107,255,.14),transparent 42%),radial-gradient(circle at 6% 92%,rgba(255,210,63,.22),transparent 38%)}
.hero__grid{display:grid;gap:44px;align-items:center}
@container lp (min-width:1024px){.hero__grid{grid-template-columns:1.02fr 1fr;gap:56px}}
.live{display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 10px;border:2px solid var(--navy);border-radius:99px;background:#fff;box-shadow:3px 3px 0 var(--navy);font-weight:900;font-size:13px;color:var(--navy);animation:fadeUp .6s var(--ease) both}
.live__dot{width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(20,184,138,.6);animation:liveRing 1.8s ease-out infinite}
.hero__h1{margin-top:22px;font-family:var(--ff-head);font-weight:900;color:var(--navy);font-size:clamp(25px,7.4cqi,34px);line-height:1.2;letter-spacing:.01em}
@container lp (min-width:1024px){.hero__h1{font-size:min(3.3cqi,44px)}}
.hero__h1 .line{display:block;padding-bottom:.06em;white-space:nowrap}
.hero__h1 .line > span{display:inline-block;animation:lineUp .9s var(--ease) both}
.hero__h1 .line:nth-child(2) > span{animation-delay:.12s}
.hero__h1 .line:nth-child(3) > span{animation-delay:.24s}
.hero__h1 .line--big{font-size:1.66em;line-height:1.12}
.hero__h1 .line small{font-size:.5em;margin-left:.06em}
#hl-name{background-image:linear-gradient(transparent 56%,var(--yellow) 56%,var(--yellow) 94%,transparent 94%);transition-duration:.8s;transition-delay:0s}
.squig{position:relative;display:inline-block}
.squig svg{position:absolute;left:2%;right:14%;bottom:-.2em;width:84%;height:.3em;overflow:visible}
.squig path{fill:none;stroke:var(--blue);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.squig.is-on path{stroke-dashoffset:0}
html:not(.js) .squig path{stroke-dashoffset:0}
.hero__lead{margin-top:22px;font-weight:700;font-size:clamp(15.5px,1.4cqi,18px);line-height:1.9;color:var(--text);animation:fadeUp .7s .5s var(--ease) both}
.hero__cta{animation:fadeUp .7s .65s var(--ease) both}
.facts{list-style:none;padding:0;margin-top:34px;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;animation:fadeUp .7s .8s var(--ease) both}
.facts li{padding:2px 18px;border-left:2px dashed var(--line)}
.facts li:first-child{padding-left:0;border-left:0}
.facts b{display:block;font-family:var(--ff-en);font-weight:800;font-size:clamp(22px,2.3cqi,30px);line-height:1.15;color:var(--navy);letter-spacing:-.01em}
.facts b i{font-style:normal;font-family:var(--ff-body);font-weight:900;font-size:.5em;margin-left:2px;color:var(--blue)}
.facts span{display:block;margin-top:3px;font-size:11.5px;font-weight:700;line-height:1.5;color:var(--mute)}
@container lp (max-width:599px){.facts li{padding-inline:12px}.facts li:first-child{padding-left:0}}
.hero__note{margin-top:28px;font-size:11px;color:var(--mute)}

.hero__visual{position:relative;padding:22px 8px 26px;animation:fadeUp .8s .2s var(--ease) both}
.screen{position:relative;z-index:2;border:3px solid var(--navy);border-radius:26px;background:#fff;box-shadow:12px 12px 0 var(--navy);overflow:hidden}
.screen__bar{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--navy);color:#c9d3ee;font-size:12px}
.screen__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.screen__time{font-family:var(--ff-mono);color:var(--yellow);font-size:12px}
.screen__body{position:relative;aspect-ratio:16/11.5;overflow:hidden;container-type:inline-size}
.screen__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen__char{position:absolute;left:50%;bottom:-8%;height:110%;width:auto;max-width:none;transform:translateX(-50%);transform-origin:50% 100%;animation:charIn 1s .35s var(--pop) both,sway 4.4s ease-in-out 1.6s infinite}
.bubble{position:absolute;z-index:3;max-width:40cqw;word-break:auto-phrase;padding:2.2cqw 3cqw 2.4cqw;border:2.5px solid var(--navy);border-radius:16px;background:#fff;box-shadow:4px 4px 0 var(--navy);font-weight:900;font-size:max(11.5px,2.9cqw);line-height:1.5;color:var(--navy);opacity:0;transform:scale(.4);transition:opacity .3s,transform .55s var(--pop)}
.bubble b{display:block;font-family:var(--ff-mono);font-weight:500;font-size:max(9.5px,2.1cqw);color:var(--blue)}
.bubble--t{left:3cqw;top:5cqw;border-bottom-left-radius:4px;transform-origin:0 100%}
.bubble--u{right:3cqw;top:40cqw;background:var(--yellow);border-bottom-right-radius:4px;transform-origin:100% 100%}
.bubble--u b{color:var(--navy)}
.bubble.is-on{opacity:1;transform:none}
/* 吹き出し：小さくして四隅へ（キャラに重ねない）。動き出すとJSが位置を決める */
.bubble{max-width:27cqw;padding:1.6cqw 2.2cqw 1.8cqw;font-size:max(10.5px,2.35cqw);border-radius:12px;box-shadow:3px 3px 0 var(--navy)}
.bubble b{font-size:max(9px,1.8cqw)}
.bubble--t{left:2cqw;top:2.5cqw}
.bubble--u{right:2cqw;top:auto;bottom:3cqw}
html:not(.js) .bubble{opacity:1;transform:none}
.sticker{position:absolute;z-index:3;width:clamp(58px,7.6cqi,100px);filter:drop-shadow(0 10px 12px rgba(14,31,69,.28));animation:bob var(--t,4s) ease-in-out infinite;transition:translate .5s var(--ease)}
.sticker--1{left:-5%;top:50%;--t:4.2s;rotate:-12deg}
.sticker--2{left:-5%;bottom:4%;--t:5s;rotate:8deg;width:clamp(70px,9cqi,124px)}
.sticker--3{right:24%;bottom:-2%;--t:3.6s;rotate:-6deg}
.sticker--4{right:-4%;top:6%;--t:4.6s;rotate:10deg}
.sticker--5{right:-5%;top:52%;--t:3.9s;rotate:-8deg;width:clamp(48px,6cqi,78px)}
.sticker--6{right:32%;top:-4%;--t:5.4s;rotate:6deg}
@container lp (max-width:599px){.sticker{width:52px}.sticker--2{width:64px}.sticker--5{width:44px}}

/* テープ */
.tapes{position:relative;z-index:3;height:128px;overflow:hidden}
.tape{position:absolute;left:-4%;width:108%;overflow:hidden;white-space:nowrap;border-block:2.5px solid var(--navy)}
.tape--a{top:14px;z-index:2;padding:11px 0;background:var(--yellow);color:var(--navy);transform:rotate(-2deg)}
.tape--b{top:62px;padding:9px 0;background:var(--navy);color:#fff;transform:rotate(1.6deg)}
.tape__track{display:inline-flex;animation:loop 40s linear infinite}
.tape--b .tape__track{animation-direction:reverse;animation-duration:52s}
.tape span{display:inline-flex;align-items:center;gap:22px;padding-right:22px}
.tape span::after{content:"";width:13px;height:13px;background:currentColor;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.tape--a span{font-family:var(--ff-head);font-weight:900;font-size:clamp(16px,1.8cqi,21px)}
.tape--b span{font-weight:700;font-size:14px}
.tape--b span::after{background:var(--yellow);width:10px;height:10px}

/* =========================================================
   ABOUT
   ========================================================= */
.about__grid{display:grid;gap:48px;align-items:center}
@container lp (min-width:1024px){.about__grid{grid-template-columns:.92fr 1.08fr;gap:76px}}
.about__lead{margin-top:22px;font-size:clamp(15px,1.3cqi,16.5px);line-height:2.05}
.idcard{position:relative;display:flex;align-items:center;gap:16px;width:min(400px,100%);margin-top:34px;padding:20px 22px;border:2.5px solid var(--navy);border-radius:20px;background:#fff;box-shadow:6px 6px 0 var(--navy);rotate:-1.5deg}
.idcard img{flex:none;width:74px;height:74px;border:2.5px solid var(--navy);border-radius:16px;object-fit:cover}
.idcard__body{display:grid;line-height:1.35}
.idcard__role{font-family:var(--ff-mono);font-size:11.5px;color:var(--blue)}
.idcard__body b{font-family:var(--ff-head);font-weight:900;font-size:25px;color:var(--navy);letter-spacing:.04em}
.idcard__body small{font-size:12.5px;font-weight:700;color:var(--mute)}
.idcard__clip{position:absolute;left:50%;top:-13px;width:56px;height:22px;margin-left:-28px;border:2.5px solid var(--navy);border-radius:7px;background:var(--blue)}
.idcard__clip::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:5px;margin:-2.5px 0 0 -11px;border-radius:3px;background:var(--navy)}

.roles__tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.roles__tabs::-webkit-scrollbar{display:none}
.roles__tabs button{position:relative;flex:none;padding:10px 16px 12px;border:2.5px solid var(--navy);border-radius:13px;background:#fff;color:var(--navy);font-weight:900;font-size:14px;cursor:pointer;overflow:hidden;transition:background .25s,color .25s,transform .25s var(--ease)}
.roles__tabs button:hover{transform:translateY(-2px)}
.roles__tabs button[aria-selected="true"]{background:var(--c);color:#fff}
.roles__tabs i{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--yellow)}
.roles.is-run .roles__tabs [aria-selected="true"] i{animation:grow var(--int,3.6s) linear forwards}
.roles__stage{position:relative;margin-top:14px;height:clamp(430px,44cqi,500px);border:3px solid var(--navy);border-radius:28px;overflow:hidden;box-shadow:12px 12px 0 var(--navy);background:#fff}
.role{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;background:var(--t)}
.role[hidden]{display:none}
.role__art{position:relative;display:flex;justify-content:center;align-items:flex-end;overflow:hidden;background-image:radial-gradient(rgba(14,31,69,.1) 1px,transparent 1.4px);background-size:18px 18px}
.role__blob{position:absolute;left:50%;top:54%;width:min(330px,72%);aspect-ratio:1;translate:-50% -50%;background:var(--c);opacity:.2;border-radius:46% 54% 58% 42%/48% 44% 56% 52%;animation:morph 9s ease-in-out infinite}
.role__art img{position:relative;z-index:1;height:112%;width:auto;max-width:none;margin-bottom:-6%;object-fit:contain}
.role.is-active .role__art img{animation:popIn .65s var(--pop) both}
.role__cap{padding:18px 24px 22px;background:#fff;border-top:3px solid var(--navy)}
.role.is-active .role__cap{animation:fadeUp .5s .1s var(--ease) both}
.role__en{font-family:var(--ff-en);font-weight:800;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--c)}
.role__cap b{display:block;font-family:var(--ff-head);font-weight:900;font-size:clamp(20px,2.1cqi,25px);line-height:1.4;color:var(--navy)}
.role__cap p{margin-top:4px;font-size:14px;line-height:1.85}

/* =========================================================
   REASONS
   ========================================================= */
.badge5{display:inline-flex;align-items:center;gap:6px;margin-top:26px;padding:8px 22px 9px;border:2.5px solid var(--navy);border-radius:99px;background:#fff;box-shadow:4px 4px 0 var(--navy);font-family:var(--ff-head);font-weight:900;font-size:clamp(16px,1.8cqi,20px);color:var(--navy)}
.badge5 b{font-family:var(--ff-en);font-weight:800;font-size:2.1em;line-height:.8;color:var(--blue)}
.reason-list{list-style:none;padding:0;margin-top:clamp(56px,7cqi,100px);display:grid;gap:clamp(80px,10cqi,150px)}
.reason{display:grid;gap:22px;grid-template-areas:"head" "visual" "body"}
.reason__head{grid-area:head}
.reason__visual{grid-area:visual}
.reason__body{grid-area:body}
@container lp (min-width:1024px){
  .reason{grid-template-columns:1fr 1.08fr;column-gap:76px;row-gap:22px;grid-template-areas:"head visual" "body visual"}
  .reason--flip{grid-template-columns:1.08fr 1fr;grid-template-areas:"visual head" "visual body"}
  .reason__head{align-self:end}
  .reason__body{align-self:start}
  .reason__visual{align-self:center}
}
.rnum{display:flex;align-items:flex-end;gap:12px}
.rnum span{padding-bottom:14px;font-family:var(--ff-en);font-weight:800;font-size:13px;letter-spacing:.22em;color:var(--mute)}
.rnum b{position:relative;z-index:0;font-family:var(--ff-en);font-weight:800;font-size:clamp(84px,9.6cqi,128px);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2.5px var(--navy)}
.rnum b::before{content:attr(data-n);position:absolute;left:.06em;top:.06em;z-index:-1;color:var(--yellow);-webkit-text-stroke:0}
.note{position:relative;display:inline-block;margin-top:26px;padding:14px 22px 15px;background:#fff3a6;font-family:var(--ff-head);font-weight:700;font-size:clamp(15px,1.45cqi,18px);line-height:1.6;color:var(--navy);rotate:-1.8deg;box-shadow:0 16px 18px -14px rgba(14,31,69,.5)}
.note::before{content:"";position:absolute;left:50%;top:-11px;width:66px;height:21px;margin-left:-33px;background:rgba(255,255,255,.62);border:1px solid rgba(14,31,69,.08);rotate:3deg}
.note--b{background:#dce8ff;rotate:1.4deg}
.note--m{background:#d4f4e7;rotate:-1deg}
.note--p{background:#ffded6;rotate:1.8deg}
.note--l{background:#e7deff;rotate:-1.4deg}
.reason__h{margin-top:20px;font-family:var(--ff-head);font-weight:900;font-size:clamp(28px,3.5cqi,44px);line-height:1.34;color:var(--navy);word-break:auto-phrase}
.reason__body > p{font-size:clamp(15px,1.3cqi,16px);line-height:2.05;max-width:34em}
.creds{list-style:none;padding:0;margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.creds li{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:2px solid var(--navy);border-radius:10px;background:#fff;font-weight:900;font-size:13px;color:var(--navy)}
.creds svg{width:14px;height:14px;color:var(--yellow-2)}

/* 画面パネル */
.panel{position:relative;border:3px solid var(--navy);border-radius:24px;background:var(--t,#fff);overflow:hidden;box-shadow:12px 12px 0 var(--navy)}
.panel__bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--navy);color:#c9d3ee;font-family:var(--ff-mono);font-size:11.5px;white-space:nowrap;overflow:hidden}
.panel__bar span:last-child{overflow:hidden;text-overflow:ellipsis}
.panel__body{position:relative;aspect-ratio:5/3.9;container-type:inline-size;overflow:hidden;background-image:radial-gradient(rgba(14,31,69,.12) 1px,transparent 1.4px);background-size:18px 18px}
.panel__note{position:absolute;left:10px;bottom:8px;z-index:7;padding:1px 8px;border-radius:6px;background:rgba(255,255,255,.88);font-size:10px;font-weight:700;color:var(--mute)}
.panel__char{position:absolute;z-index:3;max-width:none;height:auto}

/* 01 画面共有 */
.todo{position:absolute;left:5cqw;top:6cqw;z-index:2;width:60cqw;padding:4cqw 4.4cqw 4.4cqw;border:2.5px solid var(--navy);border-radius:16px;background:#fff;box-shadow:5px 5px 0 rgba(14,31,69,.14)}
.todo__label{font-family:var(--ff-mono);font-size:max(10px,2.3cqw);color:var(--blue)}
.todo__goal{display:block;margin-top:.8cqw;padding-bottom:2.4cqw;border-bottom:2px dashed var(--line);font-family:var(--ff-head);font-weight:900;font-size:max(12.5px,3.3cqw);white-space:nowrap;line-height:1.4;color:var(--navy)}
.todo ul{list-style:none;padding:0;margin-top:2.6cqw;display:grid;gap:2.2cqw}
.todo li{display:flex;align-items:center;gap:2.4cqw;font-weight:900;font-size:max(11.5px,2.95cqw);line-height:1.3;color:var(--navy)}
.todo__box{flex:none;width:max(17px,4.6cqw);aspect-ratio:1;display:grid;place-items:center;border:2.5px solid var(--navy);border-radius:6px;background:#fff;transition:background .25s}
.todo__box svg{width:82%;height:82%}
.todo__box path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s var(--ease)}
.todo li.is-done .todo__box{background:var(--yellow)}
.todo li.is-done path{stroke-dashoffset:0}
.todo__stamp{display:inline-block;margin-top:3cqw;padding:.8cqw 3.2cqw 1cqw;border-radius:99px;background:var(--blue);color:#fff;font-weight:900;font-size:max(11px,2.8cqw);transform:scale(0) rotate(-6deg);transition:transform .5s var(--pop)}
.todo.is-complete .todo__stamp{transform:scale(1) rotate(-3deg)}
.vtile{position:absolute;right:5cqw;bottom:6cqw;z-index:2;width:31cqw;aspect-ratio:1/1.08;border:2.5px solid var(--navy);border-radius:16px;overflow:hidden;background:linear-gradient(#c9dbff,#eef3ff);box-shadow:5px 5px 0 var(--navy)}
.vtile img{position:absolute;left:50%;bottom:-16%;width:150%;max-width:none;transform:translateX(-50%)}
.vtile__name{position:absolute;left:5px;bottom:5px;display:inline-flex;align-items:center;gap:3px;padding:1px 7px 1px 4px;border-radius:7px;background:rgba(14,31,69,.86);color:#fff;font-size:max(9.5px,2.1cqw);font-weight:700}
.vtile__name svg{width:11px;height:11px;color:var(--mint)}
.vtile__eq{position:absolute;right:6px;top:6px;display:flex;align-items:flex-end;gap:2px;height:16px;padding:3px 4px;border-radius:6px;background:var(--mint)}
.vtile__eq i{width:3px;height:100%;border-radius:2px;background:#fff;transform-origin:bottom;animation:eq .9s ease-in-out infinite}
.vtile__eq i:nth-child(2){animation-delay:-.3s}
.vtile__eq i:nth-child(3){animation-delay:-.6s}
.vtile__eq i:nth-child(4){animation-delay:-.15s}
.cursor--in{z-index:8}

/* 02 つくる・届ける */
.pipe{position:absolute;left:3cqw;right:3cqw;top:5cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5cqw;list-style:none;padding:0}
.pipe::before,.pipe::after{content:"";position:absolute;left:12.5%;right:12.5%;top:9cqw;height:3px;margin-top:-1.5px}
.pipe::before{background:repeating-linear-gradient(90deg,var(--navy) 0 6px,transparent 6px 11px);opacity:.35}
.pipe::after{background:linear-gradient(90deg,var(--blue),var(--violet),var(--coral),var(--mint));transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
.is-in .pipe::after{transform:scaleX(1)}
.pipe li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:translateY(12px) scale(.85);transition:opacity .4s,transform .55s var(--pop)}
.pipe li:nth-child(2){transition-delay:.35s}
.pipe li:nth-child(3){transition-delay:.7s}
.pipe li:nth-child(4){transition-delay:1.05s}
.is-in .pipe li{opacity:1;transform:none}
.pipe__ic{width:18cqw;aspect-ratio:1;display:grid;place-items:center;border:2.5px solid var(--navy);border-radius:50%;background:#fff;box-shadow:inset 0 0 0 .9cqw var(--c)}
.pipe__ic img{width:72%}
.pipe em{margin-top:1.6cqw;font-family:var(--ff-mono);font-style:normal;font-size:max(9px,2.2cqw);color:var(--c)}
.pipe b{font-family:var(--ff-head);font-weight:900;font-size:max(13px,3.5cqw);line-height:1.2;color:var(--navy)}
.pipe small{margin-top:.4cqw;font-size:max(9px,2.1cqw);font-weight:700;line-height:1.35;color:var(--mute)}
.panel__char--make{left:3cqw;bottom:-9cqw;width:36cqw}
.say{position:absolute;left:38cqw;bottom:8cqw;z-index:4;padding:2.2cqw 4cqw;border:2.5px solid var(--navy);border-radius:16px 16px 16px 4px;background:#fff;box-shadow:4px 4px 0 var(--navy);font-family:var(--ff-head);font-weight:900;font-size:max(12px,3.6cqw);color:var(--navy);white-space:nowrap;transform:scale(0);transform-origin:0 100%;transition:transform .55s var(--pop) 1.5s}
.is-in .say{transform:scale(1)}

/* 03 道具 */
.chip--count{right:4cqw;top:4cqw;background:var(--yellow)}
.fan{position:absolute;left:61%;top:52%;width:0;height:0}
.fan img{position:absolute;left:-14cqw;top:-16cqw;width:28cqw;max-width:none;aspect-ratio:1;object-fit:cover;border:2.5px solid var(--navy);border-radius:14px;background:#fff;box-shadow:0 12px 18px -8px rgba(14,31,69,.45);transform-origin:50% 200%;transform:rotate(0) translateY(8cqw);transition:transform .9s var(--pop);transition-delay:calc(var(--i) * 70ms)}
.is-in .fan img{transform:rotate(calc((var(--i) - 2.5) * 11deg)) translateY(0)}
.panel__char--kit{left:-1cqw;bottom:-7cqw;width:28cqw}

/* 04 実績 */
.stats{position:absolute;left:5cqw;top:5cqw;z-index:4;width:57cqw;display:grid;gap:2.2cqw}
.stat{padding:2cqw 3.6cqw 2.2cqw;border:2.5px solid var(--navy);border-radius:14px;background:#fff;box-shadow:4px 4px 0 rgba(14,31,69,.14);opacity:0;transform:translateX(-14px);transition:opacity .45s,transform .6s var(--ease)}
.stat:nth-child(2){transition-delay:.18s}
.stat:nth-child(3){transition-delay:.36s}
.is-in .stat{opacity:1;transform:none}
.stat small{display:block;font-size:max(10px,2.3cqw);font-weight:700;color:var(--mute);line-height:1.4}
.stat b{display:block;font-family:var(--ff-en);font-weight:800;font-size:max(19px,5.8cqw);line-height:1.12;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat b i{font-family:var(--ff-body);font-style:normal;font-weight:900;font-size:.46em;margin-inline:2px}
.stat .up{color:var(--mint)}
.bars7{position:absolute;right:5cqw;bottom:6cqw;z-index:1;width:40cqw;height:46cqw;display:flex;align-items:flex-end;gap:1.3cqw;border-bottom:2.5px solid var(--navy)}
.bars7 i{flex:1;height:0;border:2px solid var(--navy);border-bottom:0;border-radius:6px 6px 0 0;background:linear-gradient(#5b8bff,var(--blue));transition:height .9s var(--ease)}
.bars7 i:nth-child(2){transition-delay:.08s}.bars7 i:nth-child(3){transition-delay:.16s}.bars7 i:nth-child(4){transition-delay:.24s}.bars7 i:nth-child(5){transition-delay:.32s}.bars7 i:nth-child(6){transition-delay:.4s}
.bars7 i:nth-child(7){transition-delay:.48s;background:linear-gradient(#ffe27a,var(--yellow))}
.is-in .bars7 i{height:var(--h)}
.panel__char--stats{right:-1cqw;bottom:-6cqw;width:26cqw}

/* 05 実践ノート */
.deck{position:absolute;right:6cqw;top:9cqw;width:57cqw;height:46cqw;z-index:2}
.deck__card{position:absolute;inset:0;padding:4cqw 4.6cqw;border:2.5px solid var(--navy);border-radius:16px;background-color:#fff;background-image:repeating-linear-gradient(transparent 0 calc(6.6cqw - 1px),rgba(47,107,255,.16) calc(6.6cqw - 1px) 6.6cqw);background-position:0 10cqw;box-shadow:0 12px 18px -12px rgba(14,31,69,.5);transition:transform .75s var(--ease),opacity .6s}
.deck__card[data-pos="0"]{z-index:3;transform:rotate(-2deg)}
.deck__card[data-pos="1"]{z-index:2;transform:translate(3cqw,-2.6cqw) rotate(3deg) scale(.97)}
.deck__card[data-pos="2"]{z-index:1;transform:translate(6cqw,-5cqw) rotate(7deg) scale(.94)}
.deck__card[data-pos="out"]{z-index:4;transform:translate(-62cqw,8cqw) rotate(-20deg);opacity:0}
.deck__meta{font-family:var(--ff-mono);font-size:max(10px,2.3cqw);color:var(--coral)}
.deck__ttl{display:block;margin-top:1.6cqw;font-family:var(--ff-head);font-weight:900;font-size:max(13px,3.7cqw);line-height:1.8;color:var(--navy)}
.panel__char--notes{left:-1cqw;bottom:-7cqw;width:30cqw}
.chip--new{left:23cqw;top:6cqw;z-index:6;background:var(--coral);color:#fff;animation:wobble 2.4s ease-in-out infinite}

/* ノート一覧（タイムライン） */
.timeline{list-style:none;padding:0;margin-top:22px;border-left:2.5px solid var(--navy)}
.timeline li{position:relative;padding:9px 0 11px 22px}
.timeline li::before{content:"";position:absolute;left:-8.5px;top:17px;width:14px;height:14px;border:2.5px solid var(--navy);border-radius:50%;background:#fff}
.timeline li:first-child::before{background:var(--yellow)}
.timeline time{display:block;font-family:var(--ff-mono);font-size:12px;color:var(--blue)}
.timeline a{font-weight:900;font-size:15px;line-height:1.65;color:var(--navy);text-decoration:none;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 92%/0 38%;transition:background-size .35s var(--ease)}
.timeline a:hover{background-size:100% 38%}

/* =========================================================
   宇宙（AIに、夢中に。）
   ========================================================= */
.space{position:relative;overflow:hidden;padding-block:clamp(96px,12cqi,160px);background:var(--navy);color:#fff}
.space__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.space::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,31,69,.2),rgba(14,31,69,.72));pointer-events:none}
.space__stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.space__stars i{position:absolute;width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.7);animation:twinkle var(--t,3s) ease-in-out var(--d,0s) infinite}
.space__grid{position:relative;z-index:2;display:grid;gap:40px;align-items:center}
@container lp (min-width:1024px){.space__grid{grid-template-columns:1fr 1.05fr;gap:40px}}
.space__lead{margin-top:20px;font-weight:900;font-size:clamp(16px,1.6cqi,20px);color:#c9d6ff}
.space__h{margin-top:6px;font-family:var(--ff-head);font-weight:900;font-size:clamp(44px,6.8cqi,92px);line-height:1.15;white-space:nowrap;letter-spacing:.01em}
.space__h em{font-style:normal;color:var(--yellow)}
.space__h .ch{display:inline-block;animation:wave 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * 110ms)}
.js .space__h .ch{opacity:0;transform:translateY(.45em) rotate(10deg) scale(.6);transition:opacity .4s,transform .7s var(--pop);transition-delay:calc(var(--i) * 70ms)}
.js .space__h.is-in .ch{opacity:1;transform:none}
.space__txt{margin-top:18px;font-weight:700;font-size:clamp(15.5px,1.4cqi,17.5px);line-height:2;color:#dfe6ff}
.space .key{--key-shadow:#040a1c}
.space__stage{position:relative;aspect-ratio:1/.8;width:100%}
.space__ring{position:absolute;inset:14% 0;width:100%;height:72%;overflow:visible;rotate:-10deg}
@container lp (max-width:599px){.space__ring{left:12%;right:12%;width:76%}.planet{width:84px;padding:7px 9px}}
.space__ring ellipse{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.6;stroke-dasharray:3 7;vector-effect:non-scaling-stroke}
.planet{position:absolute;left:50%;top:50%;z-index:2;width:clamp(92px,10cqi,128px);padding:9px 12px;border:2.5px solid #fff;border-radius:16px;background:#fff;box-shadow:0 14px 30px rgba(0,0,0,.4),0 0 0 6px rgba(255,255,255,.1);transform:translate(-50%,-50%)}
.planet img{width:100%;height:auto}
.astro{position:absolute;left:50%;top:50%;z-index:5;width:76%;max-width:none;transform:translate(-50%,-50%);filter:drop-shadow(0 24px 30px rgba(0,0,0,.45));animation:drift 7s ease-in-out infinite}

/* =========================================================
   EVIDENCE
   ========================================================= */
.bento{display:grid;gap:18px;margin-top:52px}
@container lp (min-width:720px){.bento{grid-template-columns:1fr 1fr}.bc--video,.bc--x{grid-column:1 / -1}}
@container lp (min-width:1024px){
  .bento{grid-template-columns:repeat(12,1fr)}
  .bc--video{grid-column:1 / span 6;grid-row:1 / span 2}
  .bc--x{grid-column:7 / span 6}
  .bc--paper{grid-column:7 / span 3}
  .bc--write{grid-column:10 / span 3}
}
.bc{position:relative;display:flex;flex-direction:column;padding:24px 24px 26px;border:2.5px solid var(--navy);border-radius:24px;background:#fff;color:var(--navy);text-decoration:none;overflow:hidden;box-shadow:6px 6px 0 var(--navy);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.bc:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--navy)}
.bc:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--navy)}
.bc__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-weight:900;font-size:12.5px}
.bc__meta span{padding:2px 11px;border-radius:99px;background:var(--navy);color:#fff}
.bc__meta time{font-family:var(--ff-mono);font-size:12px;color:var(--mute)}
.bc__h{margin-top:12px;font-family:var(--ff-head);font-weight:900;font-size:clamp(22px,2.1cqi,28px);line-height:1.38}
.bc p{position:relative;z-index:1;margin-top:8px;font-size:14px;line-height:1.9;color:var(--text)}
.bc .alink{position:relative;z-index:1;margin-top:auto;padding-top:16px;align-self:flex-start;background-size:100% 2px}
.bc:hover .alink svg{transform:translate(2px,-2px)}
.bc__deco{position:absolute;right:-10px;bottom:-14px;z-index:0;width:118px;rotate:-10deg;transition:rotate .4s var(--pop),scale .4s var(--pop)}
.bc:hover .bc__deco{rotate:-2deg;scale:1.06}
.bc--paper,.bc--write{padding-bottom:84px}
.bc--paper{background:var(--cream)}
.bc--write{background:var(--lilac)}
.bc--video{padding:0}
.bc__art{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:2.5px solid var(--navy);background:var(--sky)}
.bc__art img{position:absolute;max-width:none;transition:transform .7s var(--ease)}
.bc__art .bg{inset:0;width:100%;height:100%;object-fit:cover}
.bc__art .o1{left:-2%;bottom:-12%;height:108%;width:auto}
.bc__art .o2{right:3%;bottom:2%;height:58%;width:auto}
.bc--video:hover .o1{transform:translateY(-6px) rotate(-2deg)}
.bc__play{position:absolute;left:58%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;display:grid;place-items:center;border:3px solid var(--navy);border-radius:50%;background:var(--yellow);box-shadow:4px 4px 0 var(--navy);transition:transform .35s var(--pop)}
.bc__play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--yellow);opacity:.8;animation:liveRing2 2s ease-out infinite}
.bc__play svg{width:30px;height:30px;margin-left:4px;color:var(--navy)}
.bc--video:hover .bc__play{transform:scale(1.1)}
.bc__body{display:flex;flex-direction:column;flex:1;padding:22px 24px 26px}
.bc--x{background:var(--navy);color:#fff;padding-right:130px}
.bc--x .bc__meta span{background:var(--yellow);color:var(--navy)}
.bc--x .bc__meta time{color:#aebbe0}
.bc--x p{color:#dfe6ff}
.bc--x .alink{color:var(--yellow)}
.bc__big{margin-top:14px!important;font-weight:900;font-size:15px!important;color:#fff!important;line-height:1.3!important}
.bc__big b{display:block;font-family:var(--ff-en);font-weight:800;font-size:clamp(58px,6.4cqi,92px);line-height:.95;letter-spacing:-.03em;color:var(--yellow)}
.bc__big > span{font-family:var(--ff-head);font-weight:900;font-size:22px}
.bc--x .bc__deco{width:150px;right:-16px;bottom:-20px;rotate:12deg}
@container lp (max-width:599px){.bc--x{padding-right:24px;padding-bottom:110px}.bc--x .bc__deco{width:120px}}

/* 経歴・資格 */
.records{display:grid;gap:22px;margin-top:64px}
@container lp (min-width:1024px){.records{grid-template-columns:360px 1fr;gap:40px;align-items:start}.records__side{position:sticky;top:calc(var(--hd-h) + 24px)}}
.who{display:flex;align-items:center;gap:16px;padding:18px 20px;border:2.5px solid var(--navy);border-radius:20px;background:#fff}
.who img{flex:none;width:76px;height:76px;border:2.5px solid var(--navy);border-radius:50%;object-fit:cover}
.who small{display:inline-block;padding:1px 9px;border-radius:6px;background:var(--yellow);font-size:11px;font-weight:900;color:var(--navy)}
.who b{display:block;margin-top:4px;font-family:var(--ff-head);font-weight:900;font-size:22px;line-height:1.3;color:var(--navy)}
.who span{display:block;font-size:12px;line-height:1.6;color:var(--mute)}
.next{display:grid;gap:6px;margin-top:16px;padding:24px 22px;border-radius:20px;background:var(--navy);color:#fff}
.next > b{font-family:var(--ff-head);font-weight:900;font-size:19px}
.next p{font-size:13.5px;line-height:1.9;color:#cdd6f2}
.next .key{--key-shadow:#040a1c;justify-self:start;margin-top:12px}
.records__main{display:grid;gap:12px}
.rec{border:2.5px solid var(--navy);border-radius:18px;background:#fff;overflow:hidden}
.rec summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 18px;list-style:none;cursor:pointer;transition:background .25s}
.rec summary::-webkit-details-marker{display:none}
.rec summary:hover{background:var(--paper)}
.rec__no{width:46px;height:46px;display:grid;place-items:center;border:2px solid var(--navy);border-radius:13px;background:var(--sky);font-family:var(--ff-en);font-weight:800;font-size:17px;color:var(--blue)}
.rec__ttl{display:grid;line-height:1.45}
.rec__ttl b{font-family:var(--ff-head);font-weight:900;font-size:17px;color:var(--navy)}
.rec__ttl small{font-size:12px;font-weight:700;color:var(--mute)}
.rec__pm{position:relative;width:32px;height:32px;border:2px solid var(--navy);border-radius:50%;background:var(--yellow)}
.rec__pm::before,.rec__pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.5px;margin:-1.25px 0 0 -6px;border-radius:2px;background:var(--navy);transition:transform .35s var(--ease)}
.rec__pm::after{transform:rotate(90deg)}
.rec[open] .rec__pm::after{transform:rotate(0)}
.rec[open] summary{border-bottom:2px dashed var(--line)}
.rec__body{padding:16px 20px 22px;font-size:14px;line-height:1.95;animation:fadeUp .4s var(--ease)}
.rank{list-style:none;padding:0;margin-top:12px;display:grid;gap:8px}
.rank li{display:grid;grid-template-columns:6.6em 1fr;gap:10px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);line-height:1.55}
.rank time{padding-top:2px;font-family:var(--ff-mono);font-size:12px;color:var(--blue)}
.rank b{display:block;font-size:14px;color:var(--navy)}
.rank span{font-size:12.5px;color:var(--mute)}
.rec__note{margin-top:12px}
.rec__note b{display:block;color:var(--navy)}
.quals{margin-top:12px;display:grid}
.quals div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1.5px dashed var(--line)}
.quals dt{font-weight:900;color:var(--navy)}
.quals dt small{font-weight:700;font-size:11.5px;color:var(--mute)}
.quals dd{flex:none;font-family:var(--ff-mono);font-size:12px;color:var(--mute)}
.paths{display:grid;gap:8px;margin-top:14px}
.paths a{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;padding:12px 16px;border:2px solid var(--navy);border-radius:14px;background:#fff;color:var(--navy);text-decoration:none;transition:background .2s,transform .2s var(--ease)}
.paths a b{font-size:14.5px}
.paths a span{grid-row:2;font-size:12px;font-weight:700;color:var(--blue)}
.paths a svg{grid-row:1 / 3;grid-column:2;width:16px;height:16px}
.paths a:hover{background:var(--yellow);transform:translateX(3px)}
.records__date{margin-top:4px;text-align:right;font-size:12px;color:var(--mute)}

/* =========================================================
   KIT
   ========================================================= */
.kit{background-color:#edf2ff;background-image:radial-gradient(rgba(47,107,255,.16) 1px,transparent 1.4px);background-size:22px 22px;border-block:3px solid var(--navy)}
.kitui{display:grid;gap:18px;margin-top:48px}
@container lp (min-width:1024px){.kitui{grid-template-columns:380px 1fr;gap:34px;align-items:stretch}}
.kitui__tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:none}
.kitui__tabs::-webkit-scrollbar{display:none}
.kitui__tabs button{position:relative;flex:none;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:11px 16px;border:2.5px solid var(--navy);border-radius:16px;background:#fff;color:var(--navy);text-align:left;cursor:pointer;overflow:hidden;scroll-snap-align:start;transition:background .25s,color .25s,transform .3s var(--ease)}
.kitui__tabs em{grid-row:1 / 3;font-family:var(--ff-mono);font-style:normal;font-size:12px;color:var(--blue)}
.kitui__tabs b{font-family:var(--ff-en);font-weight:800;font-size:16px;line-height:1.3}
.kitui__tabs small{font-size:12px;font-weight:700;line-height:1.5;color:var(--mute)}
.kitui__tabs i{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--yellow)}
.kitui__tabs button:hover{background:var(--sky)}
.kitui__tabs button[aria-selected="true"]{background:var(--navy);color:#fff}
.kitui__tabs button[aria-selected="true"] em{color:var(--yellow)}
.kitui__tabs button[aria-selected="true"] small{color:#c9d3ee}
.kitui.is-run [aria-selected="true"] i{animation:grow var(--int,4.8s) linear forwards}
@container lp (min-width:1024px){
  .kitui__tabs{flex-direction:column;overflow:visible;padding:0}
  .kitui__tabs button[aria-selected="true"]{transform:translateX(10px)}
}
@container lp (max-width:1023px){.kitui__tabs small{display:none}}
.kitui__stage{position:relative;display:grid;min-height:460px;border:3px solid var(--navy);border-radius:28px;overflow:hidden;box-shadow:12px 12px 0 var(--navy);background:radial-gradient(circle at 50% 36%,#fff 0,#fff 26%,#dde7ff 72%)}
.tool{position:relative;height:100%;display:grid;grid-template-rows:1fr auto}
.tool[hidden]{display:none}
.tool__art{position:relative;display:grid;place-items:center;padding:30px 20px 46px;isolation:isolate}
.tool__art::after{content:"";position:absolute;left:50%;bottom:-8px;z-index:-1;width:min(380px,84%);height:128px;transform:translateX(-50%);background:url(../img/S07_A.webp) center/cover no-repeat}
.tool__art img{width:min(250px,56%);aspect-ratio:1;object-fit:cover;border:2.5px solid var(--navy);border-radius:18px;box-shadow:0 34px 26px -24px rgba(14,31,69,.6);animation:floaty 4.2s ease-in-out infinite}
.tool.is-active .tool__art img{animation:toolIn .7s var(--pop) both,floaty 4.2s ease-in-out .7s infinite}
.tool__cap{display:grid;gap:2px;padding:18px 24px 22px;border-top:3px solid var(--navy);background:#fff}
.tool.is-active .tool__cap{animation:fadeUp .5s .1s var(--ease) both}
.tool__cap em{font-family:var(--ff-mono);font-style:normal;font-size:12px;color:var(--blue)}
.tool__cap b{font-family:var(--ff-en);font-weight:800;font-size:clamp(24px,2.6cqi,32px);line-height:1.1;color:var(--navy)}
.tool__cap p{font-weight:700;font-size:14.5px;color:var(--text)}
.tool__cap .alink{margin-top:8px;justify-self:start}
.kit__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:40px}
.kit__foot .fine{margin:0}

/* =========================================================
   GUIDES（路線図）
   ========================================================= */
.map{position:relative;margin-top:60px;--route:line}
.map__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.map__base{fill:none;stroke:rgba(14,31,69,.12);stroke-width:14;stroke-linecap:round;stroke-linejoin:round}
.map__line{fill:none;stroke:var(--blue);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.map__stops{position:relative;z-index:1;list-style:none;padding:0;display:grid;gap:26px}
.stop a{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;text-decoration:none;color:var(--navy)}
.stop__dot{position:relative;z-index:2;width:56px;height:56px;display:grid;place-items:center;border:5px solid var(--navy);border-radius:50%;background:#fff;font-family:var(--ff-en);font-weight:800;font-size:18px;color:var(--navy);transition:background .3s,transform .4s var(--pop)}
.stop.is-lit .stop__dot{background:var(--yellow);transform:scale(1.08)}
.stop__card{position:relative;display:block;min-height:112px;padding:18px 92px 18px 20px;border:2.5px solid var(--navy);border-radius:20px;background:#fff;box-shadow:5px 5px 0 var(--navy);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stop a:hover .stop__card{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--navy)}
.stop__card img{position:absolute;right:12px;top:50%;width:72px;translate:0 -50%;transition:rotate .4s var(--pop)}
.stop a:hover .stop__card img{rotate:-8deg}
.stop__card small{display:block;font-size:12px;font-weight:700;color:var(--mute)}
.stop__card b{display:block;margin-top:2px;font-family:var(--ff-head);font-weight:900;font-size:19px;line-height:1.4}
.stop__card b{word-break:auto-phrase}
@container lp (max-width:599px){
  .stop a{grid-template-columns:48px 1fr;gap:12px}
  .stop__dot{width:48px;height:48px;border-width:4px;font-size:16px}
  .stop__card{padding:16px 66px 16px 16px;min-height:100px}
  .stop__card img{width:54px;right:8px}
  .stop__card b{font-size:17px}
}
.stop__go{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:900;font-size:13px;color:var(--blue)}
.stop__go svg{width:12px;height:12px}
.stop__txt{display:block;margin-top:6px;font-size:14px;line-height:1.85;color:#dfe6ff}
.stop--goal .stop__dot{background:var(--yellow);border-color:var(--navy)}
.stop--goal .stop__dot svg{width:24px;height:24px;color:var(--navy)}
.stop--goal .stop__card{padding-right:24px;background:var(--navy);color:#fff;box-shadow:5px 5px 0 var(--blue)}
.stop--goal a:hover .stop__card{box-shadow:8px 8px 0 var(--blue)}
.stop--goal .stop__card small{color:#aebbe0}
.stop--goal .stop__card b{color:var(--yellow);font-size:clamp(21px,2.2cqi,27px)}
.stop--goal .stop__go{color:#fff}
@container lp (min-width:1024px){
  .map{--route:snake}
  .map__stops{grid-template-columns:repeat(3,1fr);column-gap:30px;row-gap:46px}
  .stop:nth-child(1){grid-area:1 / 1}
  .stop:nth-child(2){grid-area:1 / 2}
  .stop:nth-child(3){grid-area:1 / 3}
  .stop:nth-child(4){grid-area:2 / 3}
  .stop:nth-child(5){grid-area:2 / 2}
  .stop:nth-child(6){grid-area:2 / 1}
  .stop--goal{grid-area:3 / 1 / auto / -1}
  .stop a{grid-template-columns:1fr;gap:14px}
  .stop__dot{margin-left:16px}
  .stop--goal .stop__card{display:grid;grid-template-columns:1fr auto;column-gap:30px;align-items:center;padding:24px 30px}
  .stop--goal .stop__card .stop__go{grid-column:2;grid-row:1 / 4;margin:0;padding:12px 18px;border:2px solid #fff;border-radius:14px}
}

/* =========================================================
   FINALE
   ========================================================= */
.finale{padding:clamp(24px,4cqi,56px) 0 clamp(84px,10cqi,128px)}
.finale__box{position:relative;overflow:hidden;padding:clamp(48px,6cqi,80px) clamp(20px,5cqi,64px) 0;border:3px solid var(--navy);border-radius:clamp(28px,3cqi,40px);background:radial-gradient(120% 70% at 50% 110%,#2c4ea8 0,var(--navy) 62%);color:#fff;text-align:center;box-shadow:12px 12px 0 var(--blue)}
.finale__copy{position:relative;z-index:4;max-width:760px;margin-inline:auto}
.finale__eyebrow{margin-top:18px;font-weight:900;font-size:clamp(14px,1.4cqi,16px);color:#c9d6ff}
.finale__h{margin-top:10px;font-family:var(--ff-head);font-weight:900;font-size:clamp(40px,6cqi,76px);line-height:1.22}
.finale__lead{margin-top:18px;font-weight:700;font-size:clamp(15.5px,1.5cqi,19px);line-height:1.95;color:#dfe6ff}
.finale .cta-row{justify-content:center}
.finale .key{--key-shadow:#040a1c}
.finale__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.finale__links a{padding:6px 16px;border:2px solid rgba(255,255,255,.45);border-radius:99px;color:#fff;font-weight:700;font-size:13.5px;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.finale__links a:hover{background:#fff;border-color:#fff;color:var(--navy)}
.crowd{position:relative;height:clamp(250px,30cqi,380px);margin:34px calc(-1 * clamp(20px,5cqi,64px)) 0}
.crowd::after{content:"";position:absolute;inset:auto 0 0;height:26%;z-index:4;background:linear-gradient(transparent,rgba(14,31,69,.92));pointer-events:none}
.crowd img{position:absolute;left:var(--x);top:var(--y);width:clamp(96px,12cqi,164px);-webkit-mask-image:linear-gradient(#000 58%,transparent 90%);mask-image:linear-gradient(#000 58%,transparent 90%);transform:translateX(-50%) scale(var(--s));transform-origin:50% 100%;animation:cheer 2.8s ease-in-out var(--d) infinite}
.crowd .crowd__main{left:50%;top:auto;bottom:-5%;z-index:5;width:clamp(180px,21cqi,270px);transform:translateX(-50%);animation:none;-webkit-mask-image:none;mask-image:none}
.confetti{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-20px;left:var(--l);width:var(--w,9px);height:var(--h,14px);border-radius:2px;background:var(--c);opacity:0}
.finale__box.is-party .confetti i{animation:fall var(--t,3s) cubic-bezier(.2,.6,.4,1) var(--d,0s) both}

/* =========================================================
   FOOTER
   ========================================================= */
.ft{padding:64px 0 calc(110px + env(safe-area-inset-bottom,0px));background:var(--navy);color:#c9d3ee}
@container lp (min-width:1024px){.ft{padding-bottom:40px}}
.ft__grid{display:grid;gap:34px}
@container lp (min-width:768px){.ft__grid{grid-template-columns:1.4fr 1fr 1fr}}
.logo--light{color:#fff}
.logo--light .logo__txt small{color:#9fb0dc}
.logo--light .logo__mark{background:var(--yellow);color:var(--navy);box-shadow:3px 3px 0 var(--blue)}
.ft__brand p{margin-top:16px;font-size:13.5px;line-height:1.9}
.ft__col{display:grid;gap:10px;align-content:start}
.ft__col b{font-size:12px;letter-spacing:.14em;color:#fff}
.ft__col a{font-size:14px;color:#c9d3ee;text-decoration:none}
.ft__col a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.ft__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:46px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:12px}
.motion-toggle{padding:6px 14px;border:2px solid currentColor;border-radius:99px;background:none;color:var(--navy);font-size:12.5px;font-weight:700;cursor:pointer}
.motion-toggle--light{color:#fff}
.motion-toggle[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}

/* PC：現在地 */
.chapter{position:fixed;left:20px;bottom:20px;z-index:40;display:none;align-items:center;gap:10px;padding:7px 18px 7px 7px;border-radius:99px;background:rgba(14,31,69,.94);color:#fff;box-shadow:0 14px 30px -12px rgba(14,31,69,.6);opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s var(--ease)}
.chapter.is-shown{opacity:1;transform:none}
@media (min-width:1024px){.chapter{display:flex}}
.chapter__ring{width:34px;height:34px;rotate:-90deg}
.chapter__ring circle{fill:none;stroke:rgba(255,255,255,.18);stroke-width:3.5}
.chapter__ring .chapter__val{stroke:var(--yellow);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .3s}
.chapter__no{font-family:var(--ff-mono);font-size:12px;color:var(--yellow)}
.chapter__label{font-weight:700;font-size:13px}

/* スマホ：追従バー */
.dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;gap:8px;padding:8px;border-radius:22px;background:rgba(14,31,69,.95);box-shadow:0 16px 30px -12px rgba(14,31,69,.6);transform:translateY(150%);transition:transform .45s var(--ease)}
.dock.is-shown{transform:none}
@media (min-width:1024px){.dock{display:none}}
.key--dock{flex:1;min-height:52px;padding-left:18px;font-size:15px;--key-shadow:#040a1c;box-shadow:0 4px 0 var(--key-shadow)}
.key--dock .key__ico{width:36px;height:36px}
.dock__kit{flex:none;width:66px;display:grid;place-items:center;align-content:center;gap:1px;border:2px solid rgba(255,255,255,.3);border-radius:16px;color:#fff;font-size:10.5px;font-weight:700;text-decoration:none}
.dock__kit svg{width:20px;height:20px;color:var(--yellow)}

/* =========================================================
   スクロール出現
   ========================================================= */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}
.reason__head .rv:nth-child(2){transition-delay:.08s}
.reason__head .rv:nth-child(3){transition-delay:.16s}

/* =========================================================
   動きを止める／OS設定で控えめに
   ========================================================= */
html.is-still *,html.is-still *::before,html.is-still *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

/* =========================================================
   keyframes
   ========================================================= */
@keyframes loop{to{transform:translateX(-50%)}}
@keyframes lineUp{from{opacity:0;transform:translateY(60%) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{opacity:.35}}
@keyframes liveRing{0%{box-shadow:0 0 0 0 rgba(20,184,138,.55)}100%{box-shadow:0 0 0 10px rgba(20,184,138,0)}}
@keyframes liveRing2{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.35);opacity:0}}
@keyframes charIn{from{opacity:0;transform:translateX(-50%) translateY(18%) scale(.9)}to{opacity:1;transform:translateX(-50%)}}
@keyframes sway{0%,100%{rotate:0deg}50%{rotate:1.6deg}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes grow{from{width:0}to{width:100%}}
@keyframes morph{0%,100%{border-radius:46% 54% 58% 42%/48% 44% 56% 52%;rotate:0deg}50%{border-radius:56% 44% 42% 58%/42% 58% 44% 56%;rotate:20deg}}
@keyframes popIn{from{opacity:0;transform:translateY(16%) scale(.86)}to{opacity:1;transform:none}}
@keyframes wobble{0%,100%{rotate:-6deg}50%{rotate:6deg}}
@keyframes drift{0%,100%{transform:translate(-50%,-50%) rotate(-5deg)}50%{transform:translate(-50%,-57%) rotate(3deg)}}
@keyframes wave{0%,100%{translate:0 0}50%{translate:0 -.07em}}
@keyframes twinkle{0%,100%{opacity:.2;scale:.6}50%{opacity:1;scale:1}}
@keyframes cheer{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:1;transform:translateY(var(--fy,520px)) translateX(var(--fx,0)) rotate(var(--r,540deg))}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes toolIn{from{opacity:0;transform:translateY(30px) rotate(-8deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes ripple{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
@keyframes sheetIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}


/* =========================================================
   3列レイアウト（PC幅1180px以上）
   左：案内とボタン／中央 480px／右：目次
   ========================================================= */
.lp{container:lp / inline-size;overflow-x:clip}
.side{display:none}
@media (min-width:1180px){
  html[data-layout="1"]{--col:480px}
  html[data-layout] body{background-color:#eef1f8}
  html[data-layout] .shell{display:grid;grid-template-columns:minmax(0,1fr) var(--col) minmax(0,1fr);align-items:start}
  html[data-layout] .lp{grid-column:2;grid-row:1;background-color:var(--paper);border-inline:3px solid var(--navy);box-shadow:0 30px 60px -24px rgba(14,31,69,.45);min-height:100vh}
  html[data-layout] .side{display:flex;position:sticky;top:0;grid-row:1;height:100vh;flex-direction:column;justify-content:center;gap:18px;padding:32px clamp(20px,2.4vw,44px)}
  html[data-layout] .chapter,html[data-layout] .dock{display:none!important}
  html[data-layout="1"] .side--cta{grid-column:1;align-items:flex-end;text-align:right}
  html[data-layout="1"] .side--toc{grid-column:3;align-items:flex-start}
}
.side .logo{margin:0}
.side__catch{font-family:var(--ff-head);font-weight:900;font-size:clamp(19px,1.6vw,26px);line-height:1.5;color:var(--navy)}
.side__catch .hl{background-size:100% 100%}
.side__char{width:clamp(110px,10vw,170px);height:auto;filter:drop-shadow(0 12px 16px rgba(14,31,69,.25));animation:bob 4s ease-in-out infinite}
.side__cta{display:grid;gap:14px;width:min(300px,100%)}
.side__cta .key{width:100%}
.side__note{font-size:12.5px;font-weight:700;line-height:1.7;color:var(--mute)}
.side__ttl{font-family:var(--ff-en);font-weight:800;font-size:26px;letter-spacing:.06em;color:var(--navy)}
.side__toc{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:toc}
.side__toc a{display:flex;align-items:baseline;gap:10px;padding:6px 0;color:var(--mute);font-weight:700;font-size:14px;text-decoration:none;transition:color .25s,transform .25s var(--ease)}
.side__toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-family:var(--ff-mono);font-size:11.5px;color:var(--mute)}
.side__toc a:hover,.side__toc a.is-now{color:var(--navy)}
.side__toc a.is-now::before{color:var(--blue)}
.side__toc a.is-now{transform:translateX(6px)}
.side__toc a.is-now span{background:linear-gradient(transparent 60%,var(--yellow) 60%,var(--yellow) 92%,transparent 92%)}