/* 法務ページ共通。LP と同じ墨×生成りで、端末の外観に追従する。 */
:root{
  color-scheme:light dark;
  --bg:#F7F3EC; --fg:#1B1A1E; --fg2:#5E594F; --fg3:#8B857A;
  --line:#E3DCCF; --card:#FFFFFF; --link:#8A6212;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0D0D10;--fg:#F1ECE3;--fg2:#A9A398;--fg3:#7C776D;
        --line:#26262E;--card:#17171B;--link:#D9A94F}
}
/* 言語ごとの書体。漢字の字形が言語で違うので、同じスタックに混ぜない。
   `html[lang]` ではなく `:lang()` で効かせる ── このページは 3 言語が 1 枚に
   同居していて html の lang は 1 つしか持てない。セクションの lang 属性から
   継承させれば、JS が無くて 3 つ縦に並んだままでも、それぞれ正しい書体で出る。

   ⚠️ 変数を上書きするだけでは効かない。font-family は body で var() が解決
   済みの値として継承されるので、セクション側でも font-family を引き直す
   （`.lang-sec` の指定がそれ）。

   簡体字に明朝は当てない。Songti SC は macOS にしかなく、iOS では serif に
   落ちて結局ゴシックになる。当たる字と当たらない字で明朝とゴシックが混ざる
   （「别再错过」の 别 だけ明朝、错过 がゴシック）くらいなら、揃えるほうがまし。 */
:lang(en){
  --font:"Inter",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  --mincho:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
:lang(zh-Hans){
  --font:"Inter",-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --mincho:"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
}
.lang-sec{font-family:var(--font)}
.lang-sec[hidden]{display:none}
/* JS が動いていれば 1 言語しか出ないので、区切りの言語名は要らない */
html.js-lang .langmark{display:none}
*{box-sizing:border-box}
body{margin:0 auto;max-width:720px;padding:36px 22px 88px;background:var(--bg);color:var(--fg);
     font-family:var(--font);line-height:1.85;text-wrap:pretty;-webkit-font-smoothing:antialiased}
a{color:var(--link)}
h1{font-family:var(--mincho);font-size:29px;line-height:1.4;margin:0 0 6px;text-wrap:balance}
h2{font-size:16.5px;margin:2.4em 0 .6em;text-wrap:balance}
h3{font-size:14.5px;margin:1.8em 0 .4em;color:var(--fg2)}
p,li{font-size:14.5px}
p{margin:0 0 1em}
ul{padding-left:1.25em;margin:0 0 1em}
li{margin-bottom:.5em}
/* ブランドと言語切り替えを 1 本の帯にする。LP のヘッダと同じ並び。 */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:34px}
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand img{width:36px;height:36px;border-radius:9px}
.brand b{font-weight:600;font-size:15.5px;letter-spacing:.01em}
.brand small{display:block;font-weight:400;font-size:11px;color:var(--fg3);letter-spacing:.06em}
.updated{color:var(--fg3);font-size:12.5px;margin:0 0 2em}
.lang-dd{position:relative;flex:none}
.lang-dd-btn{display:flex;align-items:center;gap:8px;background:var(--card);color:var(--fg2);
      border:1px solid var(--line);border-radius:10px;padding:9px 14px;font:inherit;
      font-size:13px;cursor:pointer;line-height:1.2}
.lang-dd-btn .chev{color:var(--fg3);font-size:10px;transition:transform .15s}
.lang-dd[data-open="true"] .lang-dd-btn .chev{transform:rotate(180deg)}
.lang-dd-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:160px;z-index:10;
      background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;
      box-shadow:0 12px 28px rgba(0,0,0,.10);display:none}
.lang-dd[data-open="true"] .lang-dd-menu{display:block}
.lang-dd-menu a{display:block;padding:9px 12px;border-radius:8px;color:var(--fg2);
      font-size:13.5px;text-decoration:none;line-height:1.3}
.lang-dd-menu a:hover{background:var(--bg);color:var(--fg)}
.lang-dd-menu a[aria-current="true"]{color:var(--link)}
/* 言語名はその言語自身の書体で出す（メニューの中で字形が混ざらないように） */
.lang-dd-menu a[hreflang="en"]{font-family:"Inter",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif}
.lang-dd-menu a[hreflang="zh-Hans"]{font-family:"PingFang SC","Noto Sans SC",sans-serif}
.langmark{margin-top:4.4em;padding-top:2.2em;border-top:1px solid var(--line);
          color:var(--fg3);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.note{background:var(--card);border:1px solid var(--line);border-radius:12px;
      padding:16px 18px;margin:1.4em 0;font-size:13.5px;color:var(--fg2)}
footer{margin-top:4.6em;padding-top:2em;border-top:1px solid var(--line);
       font-size:12.5px;color:var(--fg3)}
footer a{color:var(--fg2)}
@media(max-width:480px){body{padding:26px 18px 72px}h1{font-size:25px}}