/* HERO v2: 色味は据え置き（--ink/--ac/--ac2）。ギラつきは光・グラデ・動きで。 */
.hx{position:relative;overflow:hidden;color:#fff;background:#060d22;isolation:isolate}
.hx .bg{position:absolute;inset:-4%;z-index:-3;background:url(/img/hero-sapporo.jpg) center/cover;filter:saturate(1.25) contrast(1.08);animation:kb 28s ease-in-out infinite alternate}
.hx:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(105deg,rgba(6,13,34,.96) 0,rgba(10,26,64,.86) 46%,rgba(10,60,120,.55) 100%),radial-gradient(700px 400px at 85% 20%,rgba(10,124,255,.45),transparent 60%),radial-gradient(600px 380px at 5% 90%,rgba(0,194,168,.35),transparent 60%)}
.hx:after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(180deg,#000 0,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 85%)}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,1%)}}
.hx .top{position:relative;z-index:2}.hx .logo,.hx .logo small{color:#fff}.hx .logo small{opacity:.7}
.hx .gn a{color:#dbe6ff}.hx .gn a.gb{color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:6px 14px}
.hx .badge{background:linear-gradient(90deg,var(--ac),var(--ac2));color:#041022;box-shadow:0 0 24px rgba(0,194,168,.55)}
.hx .grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;padding:28px 20px 56px}
.hx h1{white-space:nowrap;font-size:clamp(34px,7.4vw,84px);line-height:1.02;letter-spacing:.04em;margin:18px 0 6px;font-weight:900;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.hx h1 span{display:inline-block;background:linear-gradient(100deg,#fff 0,#9fd0ff 30%,#00e5c4 52%,#fff 74%,#9fd0ff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite;filter:drop-shadow(0 0 22px rgba(10,124,255,.55))}
@keyframes sheen{to{background-position:-220% 0}}
.hx .src{font:600 12px ui-monospace,Menlo,monospace;letter-spacing:.3em;color:#8fb3e8;margin:0 0 22px}
.hx blockquote{margin:0 0 20px;padding:14px 0 14px 20px;border-left:3px solid var(--ac2);font-size:clamp(18px,2.4vw,26px);font-weight:700;line-height:1.7;text-shadow:0 0 18px rgba(0,194,168,.35)}
.hx blockquote small{display:block;font-size:13px;font-weight:500;color:#9db6e0;margin-top:6px}
.hx .lead{color:#d6e2fb;font-size:17px;max-width:560px}
.hx .lead a{color:#7fe9d6}
.hx .cta{background:linear-gradient(90deg,var(--ac),var(--ac2));color:#041022;box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 10px 34px rgba(10,124,255,.45);transition:transform .2s,box-shadow .2s}
.hx .cta:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 14px 44px rgba(0,194,168,.55)}
.hx .cta.off{background:rgba(255,255,255,.12);color:#b9c8e8;box-shadow:none;border:1px solid rgba(255,255,255,.25)}
.hx .note{color:#8fa6cf}
.mos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:84px;gap:10px;transform:rotate(-2.5deg)}
.mos figure{margin:0;position:relative;overflow:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(10,124,255,.25),0 12px 40px rgba(0,0,0,.55),0 0 30px rgba(10,124,255,.25);transition:transform .35s,box-shadow .35s}
.mos figure:hover{transform:scale(1.04) rotate(1deg);z-index:3;box-shadow:0 0 0 1px rgba(0,229,196,.7),0 18px 50px rgba(0,0,0,.6),0 0 40px rgba(0,229,196,.45)}
.mos img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.2) contrast(1.05)}
.mos figcaption{position:absolute;left:8px;bottom:6px;font:700 10px ui-monospace,Menlo,monospace;letter-spacing:.14em;color:#fff;text-shadow:0 1px 6px #000}
.mos figure:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,16,34,.7));pointer-events:none}
.mos .a{grid-column:1/5;grid-row:1/4}.mos .b{grid-column:5/7;grid-row:1/3}.mos .c{grid-column:5/7;grid-row:3/5}
.mos .d{grid-column:1/3;grid-row:4/6}.mos .e{grid-column:3/5;grid-row:4/6}.mos .f{grid-column:5/7;grid-row:5/6}
.tick{border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);background:rgba(4,12,30,.7);overflow:hidden;white-space:nowrap}
.tick div{display:inline-block;padding:11px 0;font:700 13px ui-monospace,Menlo,monospace;letter-spacing:.3em;color:#9fd0ff;animation:mq 38s linear infinite}
.tick b{color:#00e5c4;margin:0 1.4em}
@keyframes mq{to{transform:translateX(-50%)}}
/* エール */
.yell{position:relative;padding:72px 0;background:linear-gradient(180deg,#0a1633,#0e1b3d);color:#eaf1ff;overflow:hidden}
.yell:before{content:"知行合一";position:absolute;right:-2%;top:-6%;font:900 clamp(120px,26vw,340px)/1 "Hiragino Mincho ProN","Yu Mincho",serif;color:rgba(255,255,255,.04);pointer-events:none}
.yell .eyebrow{color:#00e5c4}.yell h2{font-size:clamp(26px,4.2vw,44px);line-height:1.35;margin:0 0 20px;font-family:"Hiragino Mincho ProN","Yu Mincho",serif}
.yell h2 em{font-style:normal;background:linear-gradient(90deg,#6db6ff,#00e5c4);-webkit-background-clip:text;background-clip:text;color:transparent}
.yell .cols{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:start}
.yell p{font-size:17px;color:#d3def5;margin:0 0 14px}
.yell .em{color:#fff;font-weight:700;background:linear-gradient(transparent 62%,rgba(0,194,168,.4) 62%)}
.yell .pair{display:grid;gap:12px}
.yell .pair div{border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:16px 18px;background:rgba(255,255,255,.05);box-shadow:0 0 28px rgba(10,124,255,.18) inset}
.yell .pair b{display:block;font:800 12px ui-monospace,Menlo,monospace;letter-spacing:.25em;color:#00e5c4;margin-bottom:4px}
.yell .sign{font-weight:700;color:#9fd0ff;margin-top:8px}
.credit{font-size:11px;color:#8fa6cf;margin-top:10px}.credit a{color:#8fa6cf}
@media(max-width:860px){.hx .grid2,.yell .cols{grid-template-columns:minmax(0,1fr)}.mos{transform:none;grid-auto-rows:64px}.hx .gn a:not(.gb){display:none}}
@media(prefers-reduced-motion:reduce){.hx .bg,.hx h1 span,.tick div{animation:none}}

.hx,.yell{max-width:100%}.hx .grid2>div,.yell .cols>div{min-width:0}.hx{overflow-x:clip}.yell{overflow-x:clip}
.hx .top{padding:18px 20px}