@charset "UTF-8";
/* ============================================================
   legal.css - プライバシーポリシー／特定商取引法に基づく表記
   紹介ページ(lp.css)と同じ配色。読みやすさ優先の落ち着いた組み
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600&family=Zen+Kaku+Gothic+Antique:wght@400;500;700;900&display=swap');

:root{
    --navy:      #10233d;
    --blue:      #2b6cb0;
    --sky:       #c6ddf1;
    --sky-bg:    #eef3f9;
    --text:      #1c2228;
    --text-sub:  #4d565e;
    --text-mute: #8a939c;
    --line:      #dfe5ec;
    --head-h:    62px;
    --wrap:      1080px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
    margin:0; background:#fff; color:var(--text);
    font-family:"Zen Kaku Gothic Antique","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    font-size:15px; line-height:1.95; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue); }
h1,h2,p,ol,ul{ margin:0; }

/* ===== ヘッダー ===== */
.l-head{
    position:sticky; top:0; z-index:50; height:var(--head-h);
    background:var(--navy); border-bottom:3px solid var(--blue); display:flex; align-items:center;
}
.l-head-in{
    max-width:var(--wrap); margin:0 auto; padding:0 24px; width:100%;
    display:flex; align-items:center; gap:24px;
}
.l-logo{ display:flex; align-items:center; }
.l-logo img{ height:30px; width:auto; }
.l-sitename{
    font-size:13px; font-weight:700; color:var(--sky); letter-spacing:.2em; line-height:1;
    padding-left:13px; margin-left:13px; border-left:1px solid rgba(198,221,241,.35);
}
.l-head-nav{ margin-left:auto; display:flex; gap:20px; }
.l-head-nav a{ color:#cfdcea; font-size:13px; text-decoration:none; white-space:nowrap; }
.l-head-nav a:hover{ color:#fff; }

/* ===== 見出し ===== */
.l-main{ max-width:var(--wrap); margin:0 auto; padding:0 24px 90px; }
.l-hero{ padding:52px 0 34px; border-bottom:1px solid var(--line); }
.l-eyebrow{
    display:inline-block; font-family:"Barlow Condensed",sans-serif; font-weight:600;
    letter-spacing:.22em; font-size:13px; color:var(--blue); margin-bottom:12px;
}
.l-hero h1{ font-size:clamp(26px,4vw,40px); font-weight:900; line-height:1.35; margin-bottom:16px; }
.l-lead{ color:var(--text-sub); font-size:15px; max-width:56em; }
.l-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:28px; }
.l-meta div{ border:1px solid var(--line); border-radius:8px; padding:12px 16px; background:var(--sky-bg); }
.l-meta span{ display:block; font-size:11px; letter-spacing:.1em; color:var(--text-mute); }
.l-meta b{ font-size:13.5px; }

/* ===== 本文レイアウト ===== */
.l-layout{ display:grid; grid-template-columns:250px 1fr; gap:38px; align-items:start; padding-top:34px; }
.l-toc{
    position:sticky; top:calc(var(--head-h) + 20px);
    border:1px solid var(--line); border-radius:10px; background:var(--sky-bg);
    padding:18px 20px; max-height:calc(100vh - var(--head-h) - 40px); overflow:auto;
}
.l-toc-title{ font-size:12px; letter-spacing:.14em; color:var(--text-mute); font-weight:700; margin-bottom:8px; }
.l-toc ol{ list-style:none; padding:0; counter-reset:t; }
.l-toc li{ counter-increment:t; border-top:1px solid #e2e8f0; }
.l-toc li:first-child{ border-top:0; }
.l-toc a{
    display:grid; grid-template-columns:26px 1fr; gap:6px; padding:8px 0;
    font-size:12.5px; line-height:1.6; color:var(--text-sub); text-decoration:none;
}
.l-toc a::before{ content:counter(t,decimal-leading-zero); color:var(--text-mute); font-variant-numeric:tabular-nums; }
.l-toc a:hover{ color:var(--blue); }

.l-art{
    border:1px solid var(--line); border-radius:10px; padding:26px 28px; margin-bottom:16px;
    scroll-margin-top:calc(var(--head-h) + 14px);
}
.l-art h2{
    font-size:clamp(17px,2vw,21px); font-weight:700; line-height:1.5; margin-bottom:14px;
    display:flex; align-items:baseline; gap:11px;
}
.l-num{
    font-family:"Barlow Condensed",sans-serif; font-size:13px; letter-spacing:.1em;
    color:var(--blue); font-variant-numeric:tabular-nums;
}
.l-art p{ margin-bottom:12px; color:var(--text-sub); }
.l-art p:last-child{ margin-bottom:0; }
.l-art ol, .l-art ul{ padding-left:1.4em; color:var(--text-sub); margin-bottom:12px; }
.l-art li{ margin:.3em 0; }
.l-art b{ color:var(--text); }

/* 注意書き */
.l-notice{
    border:1px solid #f0c36a; background:#fff8e8; border-radius:10px;
    padding:18px 22px; margin-bottom:18px; color:#6b4a10; font-size:14px;
}
.l-notice b{ color:#6b4a10; }

/* 表 */
.l-table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.l-table th, .l-table td{ padding:14px 18px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.l-table tr:last-child th, .l-table tr:last-child td{ border-bottom:0; }
.l-table th{ width:30%; background:var(--sky-bg); font-weight:700; font-size:13.5px; white-space:nowrap; }
.l-table td{ color:var(--text-sub); font-size:14px; }
.l-table ul{ margin:.3em 0 0; padding-left:1.2em; }

.l-todo{ color:#c53030; font-weight:700; }
.l-date{ color:var(--text-mute); font-size:12.5px; margin-top:22px; }

/* ===== フッター ===== */
.l-foot{ background:#0b1219; color:#8b96a2; padding:34px 24px; margin-top:40px; }
.l-foot-in{ max-width:var(--wrap); margin:0 auto; display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; }
.l-foot-comp{ display:flex; flex-direction:column; gap:3px; font-size:13px; color:#c2cad2; }
.l-foot nav{ display:flex; gap:20px; flex-wrap:wrap; }
.l-foot a{ color:#8b96a2; font-size:13px; text-decoration:none; }
.l-foot a:hover{ color:#fff; }
.l-foot small{ margin-left:auto; font-size:10.5px; color:#5d6873; }

/* ===== 狭い画面 ===== */
@media screen and (max-width:900px){
    .l-layout{ grid-template-columns:1fr; }
    .l-toc{ position:relative; top:auto; max-height:none; }
    .l-meta{ grid-template-columns:repeat(2,1fr); }
}
@media screen and (max-width:600px){
    .l-head-nav{ display:none; }
    .l-meta{ grid-template-columns:1fr; }
    .l-art{ padding:20px 18px; }
    .l-table th, .l-table td{ display:block; width:100%; }
    .l-table th{ border-bottom:0; padding-bottom:4px; }
    .l-table td{ padding-top:0; }
    .l-foot small{ margin-left:0; }
}