/* お役立ち記事（kiji/）の共通の見た目。privacy.html と同じ色・書体 */
:root{--navy:#14284b;--ink:#1a2233;--text:#2a3140;--sub:#4b5466;--line:#dfe3ea;--paper:#f6f4ef;--soft:#eef2f8;--accent:#1d4fb8}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Noto Sans JP","Yu Gothic","Meiryo",sans-serif;color:var(--text);background:var(--paper);line-height:1.9;font-size:16px}
a{color:var(--accent)}
a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bar{background:var(--navy);color:#fff}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.bar a{color:#fff;text-decoration:none;font-weight:700}
.bar nav{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}
.bar nav a{font-weight:500;text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:820px;margin:0 auto;padding-left:16px;padding-right:16px}
.crumb{font-size:13px;color:var(--sub);margin-top:18px}
.crumb a{color:var(--sub)}
main{background:#fff;margin:12px auto 40px;border-radius:12px;padding:32px 24px 40px;max-width:820px;box-shadow:0 1px 3px rgba(20,40,75,.08)}
h1{font-size:26px;color:var(--ink);line-height:1.45}
.meta{margin-top:10px;color:var(--sub);font-size:14px}
.lead{margin-top:18px}
h2{font-size:20px;color:var(--navy);margin-top:40px;padding-bottom:6px;border-bottom:2px solid var(--line);line-height:1.5}
h3{font-size:17px;color:var(--ink);margin-top:24px}
p,ul,ol{margin-top:12px}
ul,ol{padding-left:1.4em}
li{margin-top:6px}
.table{margin-top:14px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--soft);color:var(--ink);font-weight:700}
.example{background:var(--soft);border-left:4px solid var(--accent);border-radius:6px;padding:14px 16px;margin-top:14px}
.example p{margin-top:4px}
.example .note{font-size:13px;color:var(--sub);margin-top:8px}
.summary{background:var(--soft);border-radius:8px;padding:16px 18px 18px;margin-top:40px}
.summary h2{margin-top:0;border:0;padding:0}
.cta{border:2px solid var(--line);border-radius:10px;padding:18px;margin-top:32px}
.cta p{margin-top:0}
.cta p + p{margin-top:10px}
.related{margin-top:28px;font-size:15px}
.by{margin-top:24px;color:var(--sub);font-size:14px;text-align:right}
footer{color:var(--sub);font-size:13px;padding:0 0 32px}
footer a{color:inherit}
@media (max-width:600px){
  main{margin:10px 8px 28px;padding:24px 16px 32px}
  h1{font-size:22px}h2{font-size:18px}
  /* スマホでは表をカードにして、見出しを各マスの頭に出す */
  table,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tr{border:1px solid var(--line);border-radius:8px;margin-top:10px;overflow:hidden}
  td{border:0;border-top:1px solid var(--line)}
  td:first-child{border-top:0;background:var(--soft);font-weight:700;color:var(--ink)}
  td[data-label]::before{content:attr(data-label);display:block;font-size:13px;font-weight:700;color:var(--sub)}
  td:first-child::before{display:none}
  .bar .wrap{flex-direction:column;align-items:flex-start;gap:6px}
}