/* もじ きりかえ（あ = かな / 漢 = 漢字 / A = English）。 ぜんぶの ページで おなじ ボタン。
   えらんでいる ところに 黄色い まるが すべって うごく。 いろは ページごとに --ls-* で かえられる */
.langseg{--ls-bg:#2a0f2e;--ls-fg:#fff;--ls-on:#ffe51a;--ls-onfg:#2a0f2e;--ls-w:30px;--ls-h:26px;
  position:relative;display:inline-grid;grid-template-columns:repeat(3,var(--ls-w));align-items:stretch;flex:none;
  height:calc(var(--ls-h) + 6px);padding:3px;box-sizing:border-box;border-radius:999px;background:var(--ls-bg);vertical-align:middle}
.langseg::before{content:"";position:absolute;top:3px;left:3px;width:var(--ls-w);height:var(--ls-h);border-radius:999px;background:var(--ls-on);
  box-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .28s cubic-bezier(.3,1.5,.5,1)}
html[data-lang="kanji"] .langseg::before{transform:translateX(var(--ls-w))}
html[data-lang="en"] .langseg::before{transform:translateX(calc(var(--ls-w) * 2))}
.langseg button{position:relative;z-index:1;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:999px;background:none;
  color:var(--ls-fg);font:inherit;font-size:13px;line-height:1;cursor:pointer;opacity:.75;transition:color .2s,opacity .2s}
.langseg button:hover{opacity:1}
.langseg button[aria-pressed="true"]{color:var(--ls-onfg);opacity:1}
.langseg button:focus-visible{outline:2px solid var(--ls-on);outline-offset:1px}
/* ゲームの ページ（ドットの ふちどり） */
.langseg.px{--ls-bg:var(--panel);--ls-fg:var(--ink);--ls-on:var(--pink,#ff5fa2);--ls-onfg:#fff;border:3px solid var(--line);border-radius:10px;box-shadow:0 4px 0 var(--line);height:calc(var(--ls-h) + 12px)}
.langseg.px::before{border-radius:6px;box-shadow:none}
.langseg.px button{border-radius:6px;font-size:15px}
.langseg.sm{--ls-w:26px;--ls-h:22px}
.langseg.sm button{font-size:13px}
@media (prefers-reduced-motion:reduce){.langseg::before,.langseg button{transition:none}}