/* =========================================================
   uino. 共通デザイン(エックスサーバー風のコーポレートデザイン)
   各ページの <style> の後に読み込んで上書きします
   ========================================================= */
:root,:root[data-theme="dark"]{--bg:#fff;--fg:#16212e;--mut:#5d6c7e;--line:#dde3ea;--soft:#f3f5f8;--red:#d62839;--blue:#0b6fc2;--navy:#16212e;--navy2:#22344a;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#fff;--fg:#16212e;--mut:#5d6c7e;--line:#dde3ea;--soft:#f3f5f8;--red:#d62839;--blue:#0b6fc2;color-scheme:light}}
html{scroll-padding-top:80px}
body{background:#fff;color:var(--fg);overflow-x:hidden;letter-spacing:.02em}
body>header{display:none} /* ロゴは共通ヘッダー(site-nav.js)に表示 */
main{max-width:1100px;padding:0 20px 56px}

/* ---------- 全幅の帯 ---------- */
.u-band{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}

/* ---------- トップのメインビジュアル ---------- */
.home .hero{margin:0 calc(50% - 50vw) 8px;padding:64px calc(50vw - 50% + 0px) 72px;background:#16212e url(/assets/hero-bg.webp) center/cover no-repeat;color:#fff;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.home .hero>*{position:relative;z-index:1}
.home .hero h1,.home .hero p{text-shadow:0 2px 12px rgba(10,16,26,.7)}
.home .hero::before,.home .hero::after{display:none;content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.home .hero::before{width:520px;height:520px;right:-160px;top:-220px}
.home .hero::after{width:320px;height:320px;left:-120px;bottom:-180px}
.home .hero .en{display:inline-block;margin-bottom:14px;padding:3px 14px;border:1px solid rgba(255,255,255,.5);font-size:12px;font-weight:900;letter-spacing:.2em}
.home .hero h1{color:#fff;font-size:clamp(28px,6vw,46px);line-height:1.45;margin:0 0 16px}
.home .hero h1 em{font-style:normal;color:#ff5c6c}
.home .hero p{color:rgba(255,255,255,.85);margin:0 auto;max-width:36em;font-size:15px}
.u-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px;position:relative;z-index:1}
.u-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:220px;padding:15px 28px;font-weight:900;font-size:16px;text-decoration:none;border:2px solid transparent;transition:background-color .2s,color .2s,transform .2s}
.u-btn::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.u-btn.red{background:var(--red);color:#fff;box-shadow:0 4px 0 #9d1726}
.u-btn.red:hover{background:#e33a4b;transform:translateY(-2px)}
.u-btn.line{border-color:#fff;color:#fff}
.u-btn.line:hover{background:#fff;color:var(--navy)}
.u-btn:focus-visible{outline:3px solid #5db0ff;outline-offset:3px}

/* ---------- 見出し ---------- */
.home h2{text-align:center;border:0;padding:0;margin:64px 0 28px;font-size:clamp(22px,4.6vw,30px);font-weight:900;line-height:1.4}
.home h2::before{content:attr(data-en);display:block;font-size:13px;letter-spacing:.24em;color:var(--red);margin-bottom:4px}
.home h2::after{content:"";display:block;width:40px;height:3px;background:var(--red);margin:14px auto 0}

/* ページタイトル(下層ページ) */
.page-h,.sub .hero,.doc>h1:first-of-type,.doc>.u-title{margin:0 calc(50% - 50vw) 32px;padding:44px calc(50vw - 50% + 0px) 40px;background:var(--soft);border-bottom:1px solid var(--line);text-align:center}
.page-h h1,.sub .hero h1{font-size:clamp(24px,5vw,34px);margin:0;line-height:1.5}
.doc>h1:first-of-type{font-size:clamp(24px,5vw,34px);line-height:1.5}
.page-h h1::before,.sub .hero h1::before{content:attr(data-en);display:block;font-size:12px;letter-spacing:.24em;color:var(--red);margin-bottom:6px}
.page-h p,.sub .hero p{margin:10px auto 0;color:var(--mut);max-width:40em}
.doc{max-width:860px;margin:0 auto}
.doc .lead{font-size:16px;color:var(--mut);margin:0 0 24px}
.doc h2,.sub h2{margin:44px 0 16px;padding:12px 16px;border:0;border-left:5px solid var(--red);background:var(--soft);font-size:19px;line-height:1.5}
.doc h3{border-bottom:2px solid var(--line);padding-bottom:6px}
.doc .box{background:var(--soft);border:1px solid var(--line);padding:16px 20px}
.doc a:not(.u-btn){color:var(--blue)}

/* パンくず */
.u-crumb{width:100%;box-sizing:border-box;max-width:1100px;margin:0 auto;padding:10px 20px;font-size:12px;color:var(--mut);display:flex;flex-wrap:wrap;gap:6px}
.u-crumb a{color:var(--mut);text-decoration:none}.u-crumb a:hover{color:var(--red);text-decoration:underline}
.u-crumb span+span::before{content:"›";margin-right:6px}

/* ---------- ゲームカード ---------- */
.grid{gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 2px 8px rgba(22,33,46,.06)}
a.card:hover,a.card:focus-visible{transform:translateY(-4px);box-shadow:0 12px 28px rgba(22,33,46,.14)}
.card .b{padding:16px 18px 20px}
.card h3{font-size:17px}
.tags span{border-radius:2px;background:var(--soft);border-color:var(--soft)}
.tags .hot{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- お知らせ ---------- */
.news{border-top:2px solid var(--navy)}
.news li{padding:16px 6px}
.ntag{border-radius:2px;background:var(--red);color:#fff}
.more a,.home .more a{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:900}
.more a:hover{color:var(--red)}

/* サイトマップなど */
.pages a{border-radius:4px}

/* ---------- フッター ---------- */
footer{max-width:none;margin-top:auto;background:var(--navy);color:rgba(255,255,255,.7);padding:48px max(20px,calc((100% - 1100px)/2 + 20px)) calc(28px + env(safe-area-inset-bottom,0px))}
.u-flogo{display:block;margin-bottom:24px}
.u-flogo img{height:30px;width:auto;display:block}
.fnav{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 24px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.15)}
.fnav a{display:flex;align-items:center;gap:8px;padding:9px 0;color:#fff;font-weight:700;font-size:14px}
.fnav a::before{content:"";width:5px;height:5px;border-top:1.5px solid var(--red);border-right:1.5px solid var(--red);transform:rotate(45deg);flex:none}
.fnav a:hover{color:#fff;opacity:.75;text-decoration:none}
.fnav a[aria-current]{color:#fff}
footer>div:last-child{font-size:12px;text-align:center}
/* 重要なお知らせの詳細ページ */
.imp-page .doc>h1:first-of-type{margin:12px 0 4px;padding:0;background:none;border:0;text-align:left}
.home main{padding-top:20px}
@media(max-width:640px){.home .hero{background-image:url(/assets/hero-bg-sp.webp)}}
/* ヘッダー直下に画面いっぱいのメインビジュアル */
.home main{padding-top:0}
.home .hero{min-height:calc(100vh - 64px - env(safe-area-inset-top,0px));min-height:calc(100svh - 64px - env(safe-area-inset-top,0px));margin-bottom:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:48px;padding-bottom:96px}
.u-scroll{position:absolute!important;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.24em}
.u-scroll i{position:relative;width:1px;height:44px;background:rgba(255,255,255,.3);overflow:hidden}
.u-scroll i::after{content:"";position:absolute;left:0;top:-44px;width:1px;height:44px;background:#fff;animation:u-scr 1.8s ease-in-out infinite}
@keyframes u-scr{to{top:44px}}
.u-scroll:focus-visible{outline:3px solid #5db0ff;outline-offset:4px}
.home .hero>.en,.home .hero>h1,.home .hero>p,.home .hero>.u-btns{opacity:0;transform:translateY(16px);animation:u-in .8s ease forwards}
.home .hero>h1{animation-delay:.15s}.home .hero>p{animation-delay:.3s}.home .hero>.u-btns{animation-delay:.45s}
@keyframes u-in{to{opacity:1;transform:none}}
/* ポップアート背景に合わせた文字 */
.home .hero{background-color:#d62839}
.home .hero h1{color:#16212e;text-shadow:3px 3px 0 #fff,-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff,0 3px 0 #fff,0 -3px 0 #fff,3px 0 0 #fff,-3px 0 0 #fff,7px 7px 0 #16212e;font-size:clamp(30px,7vw,58px)}
.home .hero h1 em{color:#d62839}
.home .hero .en{background:#16212e;border-color:#16212e;color:#ffcc1a;transform:rotate(-3deg)}
.home .hero p{color:#16212e;text-shadow:none;font-weight:700;background:#fff;border:3px solid #16212e;padding:10px 16px;box-shadow:5px 5px 0 #16212e}
.u-btn.red{box-shadow:5px 5px 0 #16212e;border:3px solid #16212e}
.u-btn.line{background:#fff;color:#16212e;border:3px solid #16212e;box-shadow:5px 5px 0 #16212e}
.u-btn.line:hover{background:#ffcc1a;color:#16212e}
.u-scroll{color:#16212e;background:#fff;border:3px solid #16212e;padding:6px 12px 4px}
.u-scroll i{background:rgba(22,33,46,.25)}.u-scroll i::after{background:#16212e}

/* =========================================================
   ポップアート(アメコミ風)デザイン 全ページ共通
   ========================================================= */
:root{--ink:#16212e;--pop-y:#ffcc1a;--pop-c:#18b4c9;--pop-r:#d62839}
body{background:#fffdf4 radial-gradient(rgba(22,33,46,.09) 1.6px,transparent 1.7px) 0 0/14px 14px}
main{padding-bottom:72px}

/* ヘッダー */
html .un-bar{background:#fff;border-bottom:4px solid var(--ink)}
html .un-bar.show{box-shadow:0 4px 0 rgba(22,33,46,.15)}
html .un-gnav a::after{height:5px;background:var(--pop-y);border:2px solid var(--ink);bottom:6px;left:12px;right:12px}
html .un-cta{background:var(--pop-r);border-left:4px solid var(--ink);font-size:15px}
html .un-cta:hover{background:var(--pop-y);color:var(--ink)}
html .un-burger{background:var(--ink)}
html .un-head{border-bottom:4px solid var(--ink)}
html .un-head .un-burger{background:var(--pop-r)}
html .un-panel{border-left:4px solid var(--ink);border-bottom:4px solid var(--ink)}
html .un-main a{border-bottom:2px solid var(--ink);font-size:17px}
html .un-main a:hover{background:var(--pop-y)}
html .un-sub{background:#fff7d6}
html .un-sub li:nth-child(odd){border-right:2px solid var(--ink)}
html .un-sub a{border-bottom:2px solid var(--ink)}
html .un-sub a:hover{background:var(--pop-y)}
html .un-bottom{background:var(--ink)}
html .un-bottom:hover{background:var(--pop-r)}
html .un-arw{border-color:var(--ink)}

/* パンくず */
.u-crumb{font-weight:700;color:var(--ink)}
.u-crumb a{color:var(--ink)}

/* 下層ページのタイトル:ポップアートの帯+コマ風の箱 */
.page-h,.sub .hero,.doc>h1:first-of-type{background:#d62839 url(/assets/hero-bg.webp) center/cover no-repeat;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);padding-top:56px;padding-bottom:56px}
@media(max-width:640px){.page-h,.sub .hero,.doc>h1:first-of-type{background-image:url(/assets/hero-bg-sp.webp)}}
.page-h h1,.sub .hero h1{display:inline-block;background:#fff;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:10px 28px 12px;transform:rotate(-1.5deg)}
.page-h h1::before,.sub .hero h1::before{display:inline-block;background:var(--ink);color:var(--pop-y);padding:2px 12px;margin-bottom:8px;font-size:12px}
.page-h p,.sub .hero p{display:inline-block;margin-top:22px;background:var(--pop-y);color:var(--ink);font-weight:700;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:6px 16px}
/* 文書ページの h1 はその場で箱にする */
.doc>h1:first-of-type{color:var(--ink);text-shadow:3px 3px 0 #fff,-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff,0 3px 0 #fff,0 -3px 0 #fff,3px 0 0 #fff,-3px 0 0 #fff,6px 6px 0 var(--ink);font-size:clamp(26px,6vw,42px)}
.imp-page .doc>h1:first-of-type{background:none;border:0;padding:0;text-shadow:none;font-size:clamp(22px,5vw,30px)}

/* 本文の見出し */
.doc h2,.sub h2{background:var(--pop-y);border:3px solid var(--ink);border-left:12px solid var(--pop-r);box-shadow:5px 5px 0 var(--ink);padding:10px 16px;font-size:19px}
.doc h3{border-bottom:3px solid var(--ink)}
.doc .lead{display:block;background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:14px 18px;color:var(--ink);font-weight:700}
.doc .box{background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:0}
.doc a:not(.u-btn){color:var(--pop-r);font-weight:700}

/* トップの見出し */
.home h2{display:table;margin:72px auto 32px;background:#fff;border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink);padding:8px 30px 10px;transform:rotate(-1.5deg)}
.home h2::before{display:inline-block;background:var(--ink);color:var(--pop-y);padding:1px 12px;margin-bottom:6px}
.home h2::after{display:none}

/* ゲームカード */
.card{background:#fff;border:4px solid var(--ink);border-radius:0;box-shadow:7px 7px 0 var(--ink);transition:transform .15s,box-shadow .15s}
a.card:hover,a.card:focus-visible{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:11px 11px 0 var(--pop-r)}
.card img{border-bottom:4px solid var(--ink)}
.card h3{font-size:18px}
.tags span{background:#fff;border:2px solid var(--ink);color:var(--ink);border-radius:0;font-weight:900}
.tags .hot{background:var(--pop-r);color:#fff;border-color:var(--ink);transform:rotate(-4deg)}
.count{font-weight:900}

/* お知らせ */
.news{background:#fff;border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.news li{border-bottom:2px dashed var(--ink);padding:16px 18px}
.news li:last-child{border-bottom:0}
.ntag{background:var(--pop-c);color:var(--ink);border:2px solid var(--ink)}
.news .nt a:hover{color:var(--pop-r)}
.more a,.home .more a{background:var(--pop-y);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:6px 16px;color:var(--ink);text-decoration:none}
.more a:hover{background:var(--pop-r);color:#fff}
.pager button,.pager a{border:3px solid var(--ink)!important;border-radius:0!important;box-shadow:3px 3px 0 var(--ink)}

/* サイトマップ */
.pages a{background:#fff;border:3px solid var(--ink)!important;border-radius:0!important;box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.pages a:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--pop-r)}
.ptag{border-radius:0!important;background:var(--ink)!important;color:var(--pop-y)!important;border-color:var(--ink)!important}

/* スライダーのドット */
.sl-dots button{border:2px solid var(--ink);width:12px;height:12px;background:#fff}
.sl-dots button.on{background:var(--pop-r)}

/* フッター:集中線の帯の上に紺 */
footer{position:relative;border-top:6px solid var(--ink);background:var(--ink) radial-gradient(rgba(255,255,255,.07) 1.6px,transparent 1.7px) 0 0/12px 12px}
footer::before{content:"";position:absolute;left:0;right:0;top:-22px;height:16px;background:repeating-linear-gradient(-45deg,var(--pop-y) 0 14px,var(--ink) 14px 28px);border-top:4px solid var(--ink)}
.fnav a::before{border-color:var(--pop-y)}
.fnav a:hover{opacity:1;color:var(--pop-y)}
.page-h h1,.sub .hero h1{display:table;margin:0 auto}
.page-h p,.sub .hero p{display:table;margin:24px auto 0;max-width:calc(100% - 20px)}

/* =========================================================
   ローディング画面(GPUで動く opacity / transform だけを使用)
   JSが動かない環境でも6秒後に自動で消える
   ========================================================= */
body::before{content:"";position:fixed;inset:0;z-index:9998;background:#d62839 url(/assets/hero-bg.webp) center/cover no-repeat;will-change:opacity,transform;transition:opacity .55s ease .2s,transform .75s cubic-bezier(.6,0,.4,1) .2s,visibility 0s linear .8s;animation:u-ld-fail .01s linear 6s forwards}
@media(max-width:640px){body::before{background-image:url(/assets/hero-bg-sp.webp)}}
html::before{content:"";position:fixed;left:50%;top:50%;z-index:9999;width:220px;height:110px;margin:-80px 0 0 -110px;background:#fff url(/assets/logo.webp) center/150px auto no-repeat;border:5px solid #16212e;box-shadow:10px 10px 0 #16212e;will-change:transform,opacity;animation:u-ld-pop .6s cubic-bezier(.3,1.5,.5,1) both,u-ld-bob 1.4s ease-in-out .6s infinite,u-ld-fail .01s linear 6s forwards;transition:opacity .3s ease,visibility 0s linear .3s}
body::after{content:"LOADING";position:fixed;left:50%;top:50%;z-index:9999;width:170px;margin:52px 0 0 -85px;padding:6px 0 4px;text-align:center;rotate:-3deg;background:#16212e;color:#ffcc1a;font:900 18px/1.2 "Arial Black",Impact,sans-serif;letter-spacing:.2em;border:3px solid #fff;will-change:opacity;animation:u-ld-blink 1s steps(2) infinite,u-ld-fail .01s linear 6s forwards;transition:opacity .25s ease,visibility 0s linear .25s}
html.u-ready::before,html.u-ready body::after{opacity:0;visibility:hidden}
html.u-ready body::before{opacity:0;transform:scale(1.12);visibility:hidden}
@keyframes u-ld-pop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(-3deg)}}
@keyframes u-ld-bob{0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}50%{transform:translate3d(0,-10px,0) rotate(2deg)}}
@keyframes u-ld-blink{50%{color:#fff}}
@keyframes u-ld-fail{to{visibility:hidden;opacity:0}}
html:not(.u-ready){overflow:hidden}

/* 読み込み完了まではメインビジュアルの登場を待つ */
html:not(.u-ready) .home .hero>*{animation-play-state:paused}
.home .hero>.en,.home .hero>h1,.home .hero>p,.home .hero>.u-btns{animation-duration:.7s;animation-timing-function:cubic-bezier(.3,1.5,.5,1)}
.home .hero>.en{animation-delay:.55s}.home .hero>h1{animation-delay:.7s}.home .hero>p{animation-delay:.9s}.home .hero>.u-btns{animation-delay:1.05s}
.u-scroll{animation:u-in .6s ease 1.3s both}
html:not(.u-ready) .u-scroll{animation-play-state:paused}
/* 背景がゆっくり動く */
.home .hero::after{display:block;content:"";position:absolute;inset:-20%;width:auto;height:auto;border-radius:0;background:conic-gradient(from 0deg,transparent 0 10deg,rgba(255,255,255,.12) 10deg 14deg,transparent 14deg 40deg);z-index:0;will-change:transform;animation:u-spin 60s linear infinite;left:-20%;bottom:-20%}
@keyframes u-spin{to{transform:rotate(360deg)}}

/* ヘッダーが上から降りてくる */
.un-bar{animation:u-hd .6s cubic-bezier(.3,1.4,.5,1) .35s both}
html:not(.u-ready) .un-bar{animation-play-state:paused}
@keyframes u-hd{from{translate:0 -100%}to{translate:0 0}}

/* =========================================================
   スクロールで現れるアニメーション(site-nav.js が付ける)
   ========================================================= */
.u-rv{opacity:0;transition:opacity .6s ease,translate .7s cubic-bezier(.2,1.2,.4,1),scale .7s cubic-bezier(.2,1.4,.4,1),rotate .7s cubic-bezier(.2,1.4,.4,1);transition-delay:var(--rd,0s)}
.u-rv.up{translate:0 40px}
.u-rv.left{translate:-50px 0}
.u-rv.right{translate:50px 0}
.u-rv.pop{scale:.6;rotate:-6deg}
.u-rv.slam{scale:1.5;rotate:4deg}
.u-rv.u-in{opacity:1;translate:0 0;scale:1;rotate:0deg}
/* 揺れる「NEW」 */
.tags .hot{animation:u-wig 1.6s ease-in-out infinite}
@keyframes u-wig{0%,100%{rotate:-4deg}50%{rotate:4deg;scale:1.08}}
/* ボタンを押した感じ */
.u-btn:active,.more a:active{translate:4px 4px;box-shadow:1px 1px 0 #16212e!important}
.card:active{translate:4px 4px}
/* パンくずリストの上下の余白をそろえる */
.u-crumb{padding:12px 20px;line-height:1.4;align-items:center;min-height:0}
.u-crumb+main .doc,.u-crumb+main>.doc{padding-top:0}
.u-crumb+main>.page-h,.u-crumb+main>.hero,.u-crumb+main .doc>h1:first-of-type{margin-top:0}
.u-crumb+main .doc>:first-child{margin-top:0}
/* お知らせ詳細ページ */
.nd>h1#nd-h{line-height:1.5}
.nd-meta{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-weight:900}
.nd-meta time{font-variant-numeric:tabular-nums}
.nd-body{background:#fff;border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink);padding:22px 24px 8px}
.nd-body p{margin:0 0 1em;line-height:1.9}
.nd-thumb{display:block;margin:0 0 18px;border:3px solid var(--ink)}
.nd-thumb img{display:block;width:100%;height:auto}
.nd-acts{display:flex;justify-content:center;margin:32px 0 8px}
.nd-acts:empty{display:none}
.nd-pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:36px 0 20px}
.nd-pn a{display:block;background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:10px 14px;color:var(--ink)!important;text-decoration:none;font-weight:900;font-size:14px;line-height:1.5;transition:translate .15s,box-shadow .15s}
.nd-pn a:hover{translate:-2px -2px;box-shadow:8px 8px 0 var(--pop-r)}
.nd-pn small{display:block;font-size:11px;color:var(--pop-r);letter-spacing:.1em;margin-bottom:2px}
.nd-pn .pv{text-align:right}
@media(max-width:560px){.nd-pn{grid-template-columns:1fr}.nd-pn span{display:none}}
.ntag.ntag-imp{background:var(--pop-r);color:#fff}
.u-rv.slam{scale:1.15}
html,body{overflow-x:clip}
.u-crumb{flex-wrap:nowrap;white-space:nowrap}
.u-crumb span{flex:none}
.u-crumb span[aria-current]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nd>h1:first-of-type{font-size:clamp(22px,5.4vw,34px)!important;padding-left:calc(50vw - 50% + 16px)!important;padding-right:calc(50vw - 50% + 16px)!important}
/* 表示後は必ず元の大きさに戻す(重要なお知らせが横にはみ出していた不具合の修正) */
.u-rv.u-in.slam,.u-rv.u-in{opacity:1;translate:0 0;scale:1;rotate:0deg}
/* 重要なお知らせの左右の余白 */
.home .imp{margin-left:0;margin-right:0}
@media(max-width:640px){.home .imp{padding-left:18px;padding-right:18px}}
/* コピーライト */
footer>div:last-child{display:block;color:rgba(255,255,255,.75);font-size:12px;font-weight:700;letter-spacing:.06em;padding-top:4px}
/* パンくず:文字の上下の余白を見た目でそろえる */
.u-crumb{box-sizing:border-box;min-height:50px;padding:0 20px;line-height:1;align-items:center}
.u-crumb span,.u-crumb a{display:inline-flex;align-items:center;line-height:1;padding:2px 0}
.u-crumb span[aria-current]{display:block;padding:2px 0}
/* 重要なお知らせ詳細ページのタイトル:左右に余白 */
.imp-page .doc>h1:first-of-type{margin-left:0!important;margin-right:0!important;padding:0 4px!important;scale:1;overflow-wrap:anywhere}
.imp-page .doc{padding-left:4px;padding-right:4px}
/* エラーページ */
.err{text-align:center;padding:40px 0 20px}
.err-burst{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:min(78vw,340px);aspect-ratio:1;margin:0 auto 18px;background:var(--pop-y);clip-path:polygon(50% 0,59% 18%,77% 6%,76% 26%,97% 22%,85% 40%,100% 52%,82% 61%,93% 80%,72% 77%,68% 98%,52% 84%,36% 100%,31% 79%,9% 86%,17% 64%,0 52%,16% 40%,4% 21%,24% 24%,25% 4%,41% 18%);filter:drop-shadow(0 0 0 #16212e);animation:u-err-pop .7s cubic-bezier(.3,1.6,.5,1) both}
.err-burst::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(22,33,46,.18) 2px,transparent 2.2px) 0 0/12px 12px}
.err-code{position:relative;font:900 clamp(64px,20vw,110px)/1 "Arial Black",Impact,sans-serif;color:#fff;-webkit-text-stroke:4px #16212e;paint-order:stroke fill;text-shadow:6px 6px 0 #16212e;rotate:-6deg}
.err-oops{position:relative;margin-top:6px;background:#16212e;color:var(--pop-y);font:900 16px/1 "Arial Black",Impact,sans-serif;letter-spacing:.2em;padding:6px 12px 5px;rotate:4deg}
.err-en{display:inline-block;margin:0 0 10px;background:#16212e;color:#fff;font-weight:900;font-size:12px;letter-spacing:.16em;padding:3px 12px}
.err h1{margin:0 auto 16px;font-size:clamp(24px,6vw,38px);line-height:1.4;color:var(--ink);text-shadow:3px 3px 0 #fff,-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff,6px 6px 0 var(--pop-y)}
.err-msg{max-width:34em;margin:0 auto;background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:14px 18px;text-align:left;font-weight:700}
.err-btns{margin-top:30px}
.u-btn.line.u-reload,.err .u-btn.line{background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font:inherit;font-weight:900;cursor:pointer}
.err-sub{margin-top:28px;font-size:13px;color:var(--mut)}
.err-sub a{color:var(--pop-r);font-weight:900}
@keyframes u-err-pop{from{scale:0;rotate:-30deg}to{scale:1;rotate:0deg}}
/* SCROLLボタンをボタンの下に並べて、重ならないようにする */
.home .hero{padding-bottom:40px}
.home .hero>.u-scroll{position:relative!important;left:auto;bottom:auto;transform:none;margin-top:44px;flex:none}
/* 高さの低いPC画面でも、SCROLLまで1画面に収める */
@media(min-width:641px) and (max-height:860px){
  .home .hero{padding-top:28px;padding-bottom:24px}
  .home .hero h1{font-size:clamp(30px,6.2vh,52px);margin-bottom:12px}
  .home .hero .en{margin-bottom:8px}
  .home .hero p{padding:8px 16px;font-size:14px}
  .u-btns{margin-top:20px}
  .home .hero>.u-scroll{margin-top:28px}
  .u-scroll i{height:32px}
}
/* PCヘッダー:「ゲームで遊ぶ」ボタンの右側にも枠線 */
@media(min-width:960px){html .un-cta{border-right:4px solid var(--ink);box-sizing:border-box}}
/* お知らせのカテゴリー(ゲームごと) */
.ncat{display:inline-block;font-size:12px;font-weight:900;line-height:1.4;padding:2px 10px;background:#fff;color:var(--ink)!important;border:2px solid var(--ink);text-decoration:none!important;white-space:nowrap}
.ncat::before{content:"#";color:var(--pop-r);margin-right:2px}
.ncat:hover{background:var(--pop-y)}
.news .nm{flex-wrap:wrap;gap:6px 8px}
.ncats{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.ncats a{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#fff;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--ink)!important;font-weight:900;font-size:14px;text-decoration:none!important;transition:translate .1s,box-shadow .1s}
.ncats a small{background:var(--ink);color:#fff;font-size:11px;padding:0 6px;min-width:1.6em;text-align:center}
.ncats a:hover{background:#fff7d6}
.ncats a[aria-current]{background:var(--pop-y);translate:2px 2px;box-shadow:1px 1px 0 var(--ink)}
.ncats a[aria-current] small{background:var(--pop-r)}
/* お知らせ一覧のページネーション */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:28px 0 8px}
.pager button{min-width:44px;height:44px;padding:0 10px;background:#fff;color:var(--ink);font:inherit;font-weight:900;font-size:16px;cursor:pointer}
.pager button.on{background:var(--pop-y)}
.pager button:disabled{opacity:.35;cursor:default;box-shadow:none!important}
.pager button:not(:disabled):not(.on):hover{background:#fff7d6}
.pager .gap{font-weight:900;padding:0 2px}
.pager .pinfo{flex-basis:100%;text-align:center;margin:6px 0 0;font-size:13px;font-weight:700;color:var(--mut)}
/* 重要なお知らせ:一覧・詳細 */
.imp-back a{font-size:14px;font-weight:900;color:var(--pop-r)!important}
.imp-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:36px 0 10px}
.imp-foot .u-btn{min-width:240px}
.imp-foot .u-btn.line{background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.imp-list .nt a{color:var(--ink)}
.imp-list li{border-left:6px solid var(--pop-r)}
/* サイトマップ:リンクどうしの隙間 */
.pages{display:flex;flex-direction:column;gap:18px;border-top:0!important;padding:4px 8px 8px 0!important}
.pages li{border-bottom:0!important}
.pages a{padding:14px 16px!important}