/* ================================================================
   共通スタイル — 全記事で読み込みます。
   ここを直すと、サイト内の全ページに反映されます。
   ================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#101A2E; --ink-2:#33405A; --ink-3:#556480;
  --paper:#F2F4F8; --card:#FFFFFF;
  --line:#BFCADB; --line-2:#DFE5EF; --key:#8E2436; --calm:#236471;
  --w:780px;
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"BIZ UDPGothic","BIZ UDPゴシック","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.95;
  font-size:17px; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--w); margin:0 auto; padding:0 20px}

/* ---- hero ---- */
header{background:var(--ink); color:#fff; padding:54px 0 40px; margin-bottom:36px}
.eyebrow{font-size:12px; letter-spacing:.26em; color:#AFC0DC; margin-bottom:16px}
h1{font-size:32px; font-weight:700; line-height:1.5; letter-spacing:.02em}
.stamp{font-size:13px; color:#BCC9E0; margin-top:20px; letter-spacing:.06em}
.lead{margin-top:28px; padding-top:24px; border-top:1px solid #2C3A55; font-size:16.5px; line-height:2; color:#EDF1F7}
.lead p+p{margin-top:13px}
.hint{
  margin-top:22px; font-size:15px; color:#E3E9F3; line-height:1.9;
  border-left:2px solid var(--calm); padding-left:12px;
}

/* ---- toc ---- */
nav.toc{
  background:var(--card); border:1px solid var(--line); border-radius:2px;
  padding:20px 22px; margin-bottom:40px;
}
nav.toc h2{font-size:13px; letter-spacing:.2em; color:var(--ink-3); font-weight:700; margin-bottom:13px}
nav.toc ol{list-style:none; counter-reset:t}
nav.toc li{counter-increment:t; font-size:16px; line-height:1.7; padding:7px 0}
nav.toc li::before{
  content:counter(t,decimal-leading-zero); font-size:12px; color:var(--ink-3);
  margin-right:10px; letter-spacing:.06em;
}
nav.toc a{color:var(--ink); text-decoration:none; border-bottom:1px solid transparent}
nav.toc a:hover{border-color:var(--ink)}

/* ---- body ---- */
section{margin-bottom:46px; scroll-margin-top:16px}
h2{
  font-size:25px; font-weight:700; line-height:1.5; letter-spacing:.02em;
  padding-bottom:11px; border-bottom:1px solid var(--ink); margin-bottom:22px;
}
h2 .no{font-size:13px; color:var(--ink-3); display:block; letter-spacing:.2em; margin-bottom:7px; font-family:inherit}
h3{font-size:19px; font-weight:700; margin:32px 0 13px; letter-spacing:.02em; color:#1B2A46}
h3::before{content:"—"; color:var(--calm); margin-right:9px}
p{margin-bottom:15px}
ul,ol{margin:0 0 18px; padding-left:1.35em}
li{margin-bottom:8px; line-height:1.9}
ul{list-style:none; padding-left:0}
ul>li{padding-left:1.1em; position:relative}
ul>li::before{content:""; position:absolute; left:0; top:.85em; width:5px; height:1px; background:var(--ink-3)}
ol>li{padding-left:.3em}
strong{font-weight:700}
.callout{
  background:var(--card); border-left:2px solid var(--key);
  padding:18px 20px; margin:22px 0; font-size:16.5px; line-height:1.9;
}
.callout p:last-child{margin-bottom:0}
.flow{
  background:var(--card); border:1px solid var(--line); padding:15px 18px;
  margin:20px 0; text-align:center; font-size:17px; letter-spacing:.02em;
}
.defs{margin:0 0 18px}
.defs dt{font-weight:700; font-size:17.5px; margin-top:20px; color:#1B2A46}
.defs dt:first-child{margin-top:0}
.defs dd{margin:7px 0 0; padding-left:0; color:#1C2A45; font-size:16.5px}
.qa{margin-bottom:22px}
.qa .q{font-weight:700; color:#1B2A46; margin-bottom:6px}
.qa .a{color:#1C2A45; font-size:16.5px}
.src{font-size:15.5px; margin-bottom:18px}
.src a{color:var(--calm); word-break:break-all}

/* ---- inline term ---- */
.t{
  border:0; background:none; padding:0; font:inherit; color:var(--ink); font-weight:700;
  border-bottom:1px dotted var(--calm); cursor:pointer; line-height:inherit;
}
.t::after{content:"※"; font-size:11px; color:var(--calm); vertical-align:super; margin-left:1px; font-weight:400}
.t:hover{background:#E4EEF0}
.t:focus-visible{outline:2px solid var(--calm); outline-offset:2px}

/* ---- glossary ---- */
.gtools{margin-bottom:14px}
.gsearch{
  width:100%; border:1px solid var(--line); background:var(--card); border-radius:2px;
  padding:14px 16px; font-size:17px; font-family:inherit; color:var(--ink);
}
.gsearch:focus{outline:2px solid var(--calm); outline-offset:1px; border-color:transparent}
.gcats{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px}
.gcat{
  border:1px solid var(--line); background:transparent; border-radius:100px;
  padding:9px 16px; font-size:14.5px; font-family:inherit; color:var(--ink-2); cursor:pointer;
}
.gcat[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.gcat:focus-visible{outline:2px solid var(--calm); outline-offset:2px}
.glist{display:flex; flex-wrap:wrap; gap:8px}
.gterm{
  display:inline-flex; align-items:baseline; gap:7px; border:1px solid var(--line);
  background:var(--card); border-radius:2px; padding:10px 14px; font-size:17px;
  font-family:inherit; color:var(--ink); cursor:pointer; text-align:left; line-height:1.4;
}
.gterm:hover{border-color:var(--ink)}
.gterm:focus-visible{outline:2px solid var(--calm); outline-offset:2px}
.gnum{font-size:11px; color:var(--ink-3)}
.gstar{color:var(--key); font-size:11px}
.gempty{font-size:16px; color:var(--ink-2); padding:14px 0}

/* ---- panel ---- */
.scrim{position:fixed; inset:0; background:rgba(16,26,46,.4); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40}
.scrim.on{opacity:1; pointer-events:auto}
.panel{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--card); border-top:2px solid var(--ink);
  max-height:78vh; overflow-y:auto; padding:22px 20px 30px;
  transform:translateY(103%); transition:transform .24s cubic-bezier(.22,.7,.3,1);
  box-shadow:0 -14px 36px rgba(16,26,46,.2);
}
.panel.on{transform:translateY(0)}
.panel-in{max-width:var(--w); margin:0 auto}
.ptop{display:flex; justify-content:space-between; align-items:flex-start; gap:14px}
.pnum{font-size:12px; letter-spacing:.2em; color:var(--ink-3); margin-bottom:8px}
.pterm{font-size:26px; font-weight:700; line-height:1.4}
.pyomi{font-size:14px; color:var(--ink-3); margin-top:7px}
.pclose{
  border:1px solid var(--line); background:none; border-radius:100px; width:42px; height:42px;
  flex:0 0 auto; cursor:pointer; color:var(--ink-2); font-size:20px; font-family:inherit;
}
.pclose:hover{border-color:var(--ink); color:var(--ink)}
.pclose:focus-visible{outline:2px solid var(--calm); outline-offset:2px}
.pbody{margin-top:18px; font-size:17.5px; line-height:2; color:#1C2A45}
.pbody p+p{margin-top:10px}
.pnote{
  margin-top:15px; padding:12px 14px; border-left:2px solid var(--key);
  background:#FBF6F7; color:#4A2A31; font-size:16px; line-height:1.9;
}
.pref{margin-top:18px; padding-top:13px; border-top:1px solid var(--line-2); font-size:14px; color:var(--ink-3)}

footer{border-top:1px solid var(--line); margin-top:20px; padding:30px 0 64px; font-size:14px; color:var(--ink-3); line-height:1.9}

@media (max-width:600px){
  header{padding:38px 0 30px}
  h1{font-size:25px}
  h2{font-size:21px}
  h3{font-size:17.5px}
  body{font-size:16px}
  .gterm{font-size:16px; padding:10px 13px}
  .pterm{font-size:22px}
  .pbody{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){ .panel,.scrim{transition:none} }

/* ================================================================
   トップページ（index.html）用
   ================================================================ */
.site-head{background:var(--ink); color:#fff; padding:64px 0 52px; margin-bottom:44px}
.site-name{font-size:34px; font-weight:700; line-height:1.4; letter-spacing:.02em}
.site-tag{margin-top:20px; font-size:16.5px; line-height:2; color:#EDF1F7; max-width:34em}
.idx-label{font-size:13px; letter-spacing:.2em; color:var(--ink-3); font-weight:700; margin-bottom:18px}
.card{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:2px;
  padding:24px 26px; margin-bottom:14px; text-decoration:none; color:inherit;
  transition:border-color .15s, transform .12s;
}
.card:hover{border-color:var(--ink); transform:translateY(-1px)}
.card:focus-visible{outline:2px solid var(--calm); outline-offset:2px}
.card-date{font-size:13px; color:var(--ink-3); letter-spacing:.06em}
.card-title{font-size:22px; font-weight:700; line-height:1.5; margin:8px 0 10px}
.card-desc{font-size:16px; line-height:1.9; color:#1C2A45}
.card-tags{margin-top:14px; display:flex; flex-wrap:wrap; gap:7px}
.tag{border:1px solid var(--line); border-radius:100px; padding:4px 12px; font-size:12.5px; color:var(--ink-2)}
.backlink{display:inline-block; margin:0 0 26px; font-size:14.5px; color:var(--calm); text-decoration:none}
.backlink:hover{text-decoration:underline}
@media (max-width:600px){
  .site-head{padding:44px 0 36px}
  .site-name{font-size:26px}
  .card-title{font-size:19px}
}