:root{
  --ink:#1A1A1A;
  --navy:#244667;
  --night:#101828;
  --yellow:#FFD83D;
  --soft:#4E5563;
  /* 背景の空（ページごとに body のクラスで時間帯を変える） */
  --sky1:#7FC0FF;--sky2:#CFEBFF;--sky3:#F2FAFF;
  --cloud:rgba(255,255,255,.8);--sea:#FFFFFF;--sea2:#E3F2FF;
  --pg-ink:var(--ink);--pg-soft:var(--soft);
  --stars:none;
}
body.t-noon{--sky1:#5DB0FF;--sky2:#BFE3FF;--sky3:#EEF8FF}
body.t-dusk{--sky1:#7F86D6;--sky2:#F3B9A6;--sky3:#FFE6CC;--cloud:rgba(255,240,232,.75);--sea:#FFF1E6;--sea2:#F6D5C4}
body.t-night{--sky1:#0E1734;--sky2:#26346A;--sky3:#3D4A85;--cloud:rgba(140,155,210,.22);--sea:#46528F;--sea2:#36417A;--pg-ink:#FFFFFF;--pg-soft:rgba(255,255,255,.72);--stars:url(assets/stars.svg)}
body.t-dawn{--sky1:#9DB7F2;--sky2:#F6CFE0;--sky3:#FFF0E6;--cloud:rgba(255,255,255,.78);--sea:#FFF6F2;--sea2:#F7DDE4}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  color:var(--pg-ink);line-height:1.9;font-size:16px;
  position:relative;min-height:100vh;padding-bottom:150px;
  background:var(--stars) 0 0/400px 400px fixed,linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 60%,var(--sky3) 100%) fixed;
  -webkit-font-smoothing:antialiased;
}
.dot{font-family:"DotGothic16",monospace;-webkit-font-smoothing:none;font-smooth:never;font-synthesis:none}
.dot,.dot *{font-weight:400!important}
a{color:inherit}
h1,h2,h3,p{margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ヘッダー */
.bar{
  position:sticky;top:0;z-index:30;height:56px;display:flex;align-items:center;gap:20px;
  padding:0 18px;background:#fff;color:var(--ink);
}
.wordmark{font-family:"Arial Black","Arial Bold",Arial,sans-serif;font-weight:900;letter-spacing:0}
.logo{display:flex;align-items:center;gap:9px;font-family:"Arial Black","Arial Bold",Arial,sans-serif;font-weight:900;font-size:30px;line-height:1;letter-spacing:-.01em;color:#000;text-decoration:none;margin-right:auto}
.logo img{height:36px;width:auto;display:block;position:relative;top:2px}
.gnav{display:flex;gap:18px;font-size:13px}
.gnav a{text-decoration:none}
.gnav a:hover,.gnav a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.bar .cta{
  background:var(--navy);color:#fff;text-decoration:none;font-size:16px;font-weight:400;
  padding:6px 16px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);white-space:nowrap;
}
.bar .back{font-size:16px;text-decoration:none;white-space:nowrap}
@media (max-width:820px){.gnav{display:none}.bar{gap:12px;padding:0 12px}}
.sp-only{display:none}
@media (max-width:640px){.sp-only{display:inline}.sp-hide{display:none}.bar .cta{padding:5px 10px}.logo{font-size:26px;gap:7px}.logo img{height:31px}}

/* RPGウィンドウ */
.win{
  position:relative;background:#fff;border:3px solid var(--ink);
  box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink),8px 10px 0 6px rgba(0,0,0,.16);
  padding:44px 40px 36px;margin:0 auto 76px;max-width:920px;
}
.win-dark{
  position:relative;background:var(--night);color:#F2F5FA;border:3px solid #fff;
  box-shadow:0 0 0 4px var(--night),0 0 0 7px #fff,8px 10px 0 7px rgba(0,0,0,.25);
  padding:46px 44px 38px;margin:0 auto 76px;max-width:920px;
}
.win-tab{
  position:absolute;top:-21px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:16px;letter-spacing:.1em;
  padding:3px 22px;border:3px solid #fff;white-space:nowrap;
}
.win-dark .win-tab{background:#fff;color:var(--night);border-color:var(--night)}
@media (max-width:640px){
  .win,.win-dark{padding:38px 20px 28px;margin-bottom:60px}
}

/* ボタン（スマホは全幅・中央揃え） */
.btn{
  display:inline-flex;justify-content:center;align-items:center;gap:8px;text-align:center;
  background:var(--navy);color:#fff;text-decoration:none;font-weight:700;font-size:16px;
  padding:14px 28px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;
}
.btn:hover,.btn:focus-visible{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--ink)}
.btn-y{background:var(--yellow);color:var(--ink)}
.btn-w{background:#fff;color:var(--ink)}
@media (max-width:640px){.btn{display:flex;width:100%}}

mark{background:linear-gradient(transparent 56%,var(--yellow) 56%);color:inherit;padding:0 2px}

/* ページ末尾の出口 */
.endnav{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:10px auto 70px;max-width:920px}
.endnav .btn{min-width:260px}
.btn-o{background:#fff;color:var(--ink)}
@media (max-width:640px){.endnav{flex-direction:column;gap:14px;margin-bottom:50px}.endnav .btn{min-width:0}}

/* キーボード操作時のフォーカス */
a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* 背景：ドット絵の雲（ゆっくり流れる）と、ページ最下部の雲海 */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--cloud);
  -webkit-mask:url(assets/sky-clouds.svg) 0 0/960px 760px repeat;mask:url(assets/sky-clouds.svg) 0 0/960px 760px repeat;
  animation:skyDrift 140s linear infinite;
}
@keyframes skyDrift{to{-webkit-mask-position:960px 0;mask-position:960px 0}}
body::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:160px;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--sea2),var(--sea2)) 0 100%/100% 40px no-repeat,var(--sea);
  -webkit-mask:url(assets/cloud-sea.svg) 0 100%/480px 160px repeat-x;mask:url(assets/cloud-sea.svg) 0 100%/480px 160px repeat-x;
}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
.win{color:var(--ink)}
body .crumb,body .page-h .en,body .page-h p{color:var(--pg-soft)}
body .crumb a{color:var(--pg-ink)}
body.t-top{padding-bottom:0}
body.t-top::after{position:fixed;height:120px}