/* Tooler Estate 法務ページ 共通スタイル
   2026-09-18 yuki 指示で、商品説明資料と同じ世界観に作り直した。
   ・書体は明朝(Celine風)から、資料と同じゴシックへ
   ・背景は白 → うっすら青のグラデーション
   ・見出しの差し色は Tooler のパネルと同じ 青→シアン(#5b8cff → #22d3ee)
   旧版は Cormorant Garamond + Shippori Mincho の明朝だった。 */
:root{
  --ink:#16233f;            /* 本文の濃い紺。拡張のパネルと同じ値 */
  --sub:#5c6a80;
  --muted:#8a93a5;
  --paper:#ffffff;
  --hair:rgba(22,35,63,.10);
  --b1:#5b8cff;             /* Tooler の青 */
  --b2:#22d3ee;             /* Tooler のシアン */
  --navy:#23479B;
  --font-jp:"Noto Sans JP",-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  color:var(--ink);
  font-family:var(--font-jp);
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 520px at 14% -8%, #e8f1ff 0%, rgba(232,241,255,0) 62%),
    radial-gradient(900px 460px at 88% 0%, #e6fbff 0%, rgba(230,251,255,0) 58%),
    var(--paper);
  background-attachment:fixed;
}
.en{font-family:var(--font-jp);letter-spacing:.08em}

/* 叩き台バナー(公開前に削除する) */
.draft-banner{background:#141414;color:#fff;text-align:center;font-size:12px;letter-spacing:1px;padding:9px 16px}

header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--hair)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 30px}
.nav-left{display:flex;align-items:center}
.nav-left .logo{height:30px;width:auto;display:block}
.nav-left a{color:var(--sub);text-decoration:none;font-size:12.5px}
.brand{text-align:center;font-size:13px;letter-spacing:.22em;color:var(--sub);font-weight:500}
.nav-right{text-align:right;font-size:12.5px}
.nav-right a{color:var(--sub);text-decoration:none}
.nav-right a:hover{color:var(--navy)}

.doc{max-width:820px;margin:0 auto;padding:64px 26px 96px}
.doc .kicker{font-size:11.5px;letter-spacing:.34em;color:var(--b1);text-align:center;font-weight:500}
.doc h1{
  font-weight:700;font-size:clamp(26px,4.4vw,38px);letter-spacing:.06em;text-align:center;margin:14px 0 8px;
  color:var(--ink);
}
/* 文字にグラデーションを乗せる。対応していない環境では上の濃紺のまま出る(見出しが消えないように) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .doc h1{
    background:linear-gradient(120deg,var(--ink) 0%,var(--ink) 52%,var(--navy) 78%,var(--b1) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.doc .lead{text-align:center;color:var(--muted);font-size:13px;letter-spacing:.08em;margin-bottom:6px}
.rule{width:56px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--b1),var(--b2));margin:26px auto 44px}
.doc h2{
  font-size:18px;font-weight:700;letter-spacing:.04em;margin:46px 0 16px;padding:0 0 10px 14px;
  border-bottom:1px solid var(--hair);position:relative;
}
.doc h2::before{
  content:"";position:absolute;left:0;top:4px;bottom:12px;width:4px;border-radius:2px;
  background:linear-gradient(180deg,var(--b1),var(--b2));
}
.doc h3{font-size:15px;font-weight:700;letter-spacing:.02em;margin:26px 0 10px;color:var(--ink)}
.doc p{font-size:14.5px;letter-spacing:.02em;color:var(--sub);margin:0 0 14px}
.doc ol,.doc ul{margin:0 0 16px;padding-left:1.5em}
.doc li{font-size:14.5px;letter-spacing:.02em;color:var(--sub);margin:7px 0}
.doc .note{color:var(--muted);font-size:13px}

/* 要確定マーカー(埋めるべき場所を黄色で可視化・公開前に実値へ) */
.todo{background:#fbf3d8;border-bottom:1px dashed #c9ad4e;padding:0 5px;color:#7a6413;font-style:normal;white-space:nowrap}

table.kv{width:100%;border-collapse:separate;border-spacing:0;margin:12px 0 24px;background:#fff;border:1px solid var(--hair);border-radius:12px;overflow:hidden}
table.kv th,table.kv td{text-align:left;vertical-align:top;font-size:14px;letter-spacing:.02em;padding:14px 16px;border-bottom:1px solid var(--hair)}
table.kv tr:last-child th,table.kv tr:last-child td{border-bottom:0}
table.kv th{width:36%;font-weight:700;color:var(--ink);background:#f4f8fd}
table.kv td{color:var(--sub)}

.callout{
  border:1px solid #cfe3fb;border-left:4px solid var(--b1);border-radius:10px;
  padding:16px 20px;margin:20px 0;font-size:13.5px;color:var(--sub);
  background:linear-gradient(135deg,#f3f8ff,#eefbff);
}

.updated{text-align:center;color:var(--muted);font-size:12px;letter-spacing:.1em;margin-top:56px}

footer{border-top:1px solid var(--hair);text-align:center;padding:32px 20px;background:rgba(255,255,255,.7)}
.fnav{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;font-size:12.5px;margin-bottom:14px}
.fnav a{color:var(--sub);text-decoration:none}
.fnav a:hover{color:var(--navy);text-decoration:underline}
.copy{font-size:11.5px;letter-spacing:.14em;color:var(--muted)}

@media(max-width:600px){
  .nav{padding:12px 14px}
  .nav-left .logo{height:24px}
  .brand{display:none}
  .doc{padding:44px 18px 72px}
  table.kv th{width:42%}
}