/* =========================================================
   learn.lx-ope.link 共通スタイル
   デザイン方針: ネオブルータリズム
     ・太い黒枠(3px)とぼかしなしの影(6px 6px 0)
     ・彩度の高い色をベタで置く
     ・ホバーで浮き、クリックで沈む
   記事ページはこのCSSだけで組み立てる。記事ごとに style を書かない。
   ========================================================= */

:root{
  --ink:#111111;        /* 黒。枠線・文字・影のすべてに使う */
  --paper:#FFFFFF;      /* カードの紙 */
  --bg:#FBF1DE;         /* 背景のクリーム */
  --soft:#4A4A4A;       /* 補助テキスト。薄くしすぎない */

  /* 面の色。柱やカテゴリの色分けに使う */
  --c-orange:#FF8A3D;
  --c-red:#FF5D5D;
  --c-blue:#5B8CFF;
  --c-purple:#B584FF;
  --c-yellow:#FFD43B;
  --c-green:#4ED17F;
  --c-cyan:#5BD4E0;
  --c-pink:#FF8FB1;
  --c-cream:#FFF3C4;
  --c-mint:#D8F5E3;

  --bd:3px solid var(--ink);
  --bd2:2px solid var(--ink);
  --pop:6px 6px 0 var(--ink);
  --pop-sm:4px 4px 0 var(--ink);
  --pop-lg:8px 8px 0 var(--ink);
  --r:10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}

body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(17,17,17,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.055) 1px, transparent 1px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP","Meiryo",sans-serif;
  font-size:16px;
  line-height:1.85;
}

a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:3px solid #0B5FFF;outline-offset:2px}

.wrap{max-width:820px;margin:0 auto;padding:20px 16px 90px}

/* ---------- サイト共通バー ---------- */
.sitebar{
  max-width:820px;margin:0 auto;padding:16px 16px 0;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.sitebar a.home{
  display:inline-block;text-decoration:none;font-weight:900;font-size:14px;
  background:var(--c-yellow);border:var(--bd);border-radius:8px;
  box-shadow:var(--pop-sm);padding:5px 14px;
}
.sitebar a.home:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.sitebar a.home:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.sitebar .tagline{font-size:13px;font-weight:700;color:var(--soft)}

/* ---------- 記事一覧 ---------- */
h1.sitetitle{
  font-size:clamp(26px,5vw,38px);line-height:1.25;margin:16px 0 10px;font-weight:900;
  letter-spacing:.01em;
}
h1.sitetitle .hl{
  background:var(--c-yellow);border:var(--bd);border-radius:8px;
  box-shadow:var(--pop-sm);padding:2px 12px;display:inline-block;
}
p.lead{margin:0 0 28px;font-weight:700;font-size:15px;color:var(--soft)}

ul.cards{list-style:none;margin:0;padding:0;display:grid;gap:18px}
ul.cards a{
  display:block;text-decoration:none;color:inherit;
  background:var(--paper);border:var(--bd);border-radius:var(--r);
  box-shadow:var(--pop);padding:18px 20px;
}
ul.cards a:hover{transform:translate(-2px,-2px);box-shadow:var(--pop-lg)}
ul.cards a:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
ul.cards .name{font-size:19px;font-weight:900;line-height:1.5}
ul.cards .desc{font-size:14px;color:var(--soft);margin-top:6px;font-weight:600}
ul.cards .meta{
  margin-top:12px;font-size:12px;font-weight:900;letter-spacing:.03em;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
ul.cards .meta .cat{
  background:var(--c-cyan);border:var(--bd2);border-radius:999px;padding:1px 11px;
}
.empty{
  background:var(--paper);border:3px dashed var(--ink);border-radius:var(--r);
  padding:24px 20px;color:var(--soft);font-weight:800;
}

/* ---------- 記事本文 ---------- */
article.post{margin:0}

.posthead{
  background:var(--ink);color:#fff;border:var(--bd);border-radius:var(--r);
  box-shadow:var(--pop);padding:26px 22px;margin:14px 0 26px;
}
.posthead h1{font-size:clamp(23px,4.4vw,34px);line-height:1.4;margin:0;font-weight:900}
.posthead .postmeta{
  margin:14px 0 0;font-size:12.5px;font-weight:800;color:#E6E1D8;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.posthead .postmeta .tag{
  background:var(--c-yellow);color:var(--ink);border:2px solid #fff;
  border-radius:999px;padding:1px 12px;
}

/* 本文の箱 */
.card{
  background:var(--paper);border:var(--bd);border-radius:var(--r);
  box-shadow:var(--pop);padding:20px 22px;margin:0 0 28px;
}

h2.sec{
  font-size:21px;font-weight:900;line-height:1.5;
  margin:42px 0 16px;padding:11px 16px;
  background:var(--paper);border:var(--bd);border-radius:var(--r);box-shadow:var(--pop-sm);
  display:flex;align-items:center;gap:10px;
}
h2.sec .num{
  flex:none;min-width:2em;text-align:center;
  border:var(--bd2);border-radius:7px;background:rgba(255,255,255,.6);
  font-size:16px;padding:0 7px;
}
h2.sec.onink{background:var(--ink);color:#fff}
h2.sec.onink .num{border-color:#fff;background:transparent}
h2.sec.white{color:#fff}
h2.sec.white .num{border-color:#fff;background:rgba(0,0,0,.12)}

h3{font-size:17px;font-weight:900;margin:26px 0 10px;line-height:1.6}
h3:first-child{margin-top:0}
h4{font-size:15.5px;font-weight:900;margin:18px 0 6px}
p{margin:0 0 14px}
strong,b{font-weight:900}
ul,ol{margin:0 0 14px;padding-left:1.35em}
li{margin-bottom:10px}
li:last-child{margin-bottom:0}

/* 導入の一言 */
.lead-in{
  font-size:17.5px;font-weight:900;line-height:1.7;
  border-left:10px solid var(--ink);padding-left:14px;margin:0 0 18px;
}

/* 補足・注意 */
.note,.caution,.tip{
  border:var(--bd2);border-radius:9px;padding:14px 16px;margin:16px 0;font-size:14.5px;
}
.note{background:var(--c-cream)}
.caution{background:#FFE0E0}
.tip{background:var(--c-mint)}
.note .label,.caution .label,.tip .label{
  display:inline-block;font-weight:900;font-size:12.5px;letter-spacing:.04em;
  background:var(--ink);color:#fff;border-radius:5px;padding:1px 9px;margin-bottom:7px;
}
.note p:last-child,.caution p:last-child,.tip p:last-child{margin-bottom:0}

/* チップ */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chip{
  border:var(--bd2);border-radius:999px;padding:3px 13px;
  font-size:13px;font-weight:800;background:#fff;
}
.chips.kw .chip{background:var(--ink);color:#fff}
.chips.svc .chip{background:var(--c-cyan)}

/* 表 */
.tablewrap{overflow-x:auto;margin:0 0 16px;border:var(--bd2);border-radius:9px}
.tablewrap table{margin:0}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{border:2px solid var(--ink);padding:9px 13px;text-align:left;vertical-align:top}
.tablewrap th:first-child,.tablewrap td:first-child{border-left:none}
.tablewrap th:last-child,.tablewrap td:last-child{border-right:none}
.tablewrap tr:first-child th,.tablewrap tr:first-child td{border-top:none}
.tablewrap tr:last-child td{border-bottom:none}
th{background:var(--c-yellow);font-weight:900}

/* コード */
code{
  background:#F2F2F2;border:2px solid var(--ink);border-radius:5px;
  padding:0 5px;font-size:.9em;font-weight:700;
  font-family:"SFMono-Regular",Consolas,"Courier New",monospace;
}
pre{
  background:var(--ink);color:#F7F3E9;border:var(--bd);border-radius:9px;
  padding:15px 17px;overflow-x:auto;line-height:1.7;margin:0 0 16px;
}
pre code{background:none;border:none;padding:0;font-size:13.5px;color:inherit;font-weight:400}

blockquote{
  margin:0 0 16px;padding:13px 17px;background:var(--c-cream);
  border:var(--bd2);border-left-width:9px;border-radius:0 9px 9px 0;
}
blockquote p:last-child{margin-bottom:0}

hr{border:none;border-top:3px solid var(--ink);margin:34px 0}

/* 対比の箱 */
.pair{
  border:var(--bd2);border-radius:9px;padding:13px 16px;margin-bottom:13px;background:#fff;
}
.pair h4{margin:0 0 5px;font-size:15px;font-weight:900}
.pair p{margin:0;font-size:14.5px}

/* 目次 */
nav.toc{
  background:var(--c-mint);border:var(--bd2);border-radius:9px;
  padding:14px 18px;margin:0 0 26px;font-size:14.5px;
}
nav.toc .label{
  display:inline-block;font-weight:900;font-size:12.5px;letter-spacing:.04em;
  background:var(--ink);color:#fff;border-radius:5px;padding:1px 9px;margin-bottom:8px;
}
nav.toc ol{margin:0;padding-left:1.4em}
nav.toc li{margin-bottom:4px;font-weight:700}

/* 記事末尾 */
.postfoot{
  background:var(--paper);border:var(--bd);border-radius:var(--r);box-shadow:var(--pop);
  padding:18px 20px;margin-top:34px;font-size:14.5px;font-weight:700;
}
.postfoot p:last-child{margin-bottom:0}

/* =========================================================
   用語ボタンと解説シート(assets/terms.js とセット)
   ========================================================= */
button.term{
  font:inherit;font-weight:900;color:var(--ink);
  background:var(--c-yellow);
  border:none;border-bottom:3px solid var(--ink);
  border-radius:4px 4px 0 0;
  padding:0 3px;margin:0 1px;cursor:pointer;line-height:inherit;
}
button.term:hover{background:#FFC400}
button.term::after{content:"?";font-size:10px;vertical-align:super;font-weight:900;margin-left:1px}

#termOverlay{
  position:fixed;top:0;right:0;bottom:0;left:0;
  background:rgba(17,17,17,.35);display:none;z-index:40;
}
#termOverlay.show{display:block}

#termSheet{
  position:fixed;left:12px;right:12px;bottom:12px;max-width:790px;margin:0 auto;
  background:var(--paper);border:var(--bd);border-radius:var(--r);box-shadow:var(--pop);
  padding:18px 20px 16px;display:none;z-index:50;
}
#termSheet.show{display:block}
#termSheet .kicker{
  display:inline-block;font-weight:900;font-size:11.5px;letter-spacing:.08em;
  background:var(--ink);color:#fff;border-radius:5px;padding:1px 10px;margin-bottom:8px;
}
#termSheet h5{margin:0 0 8px;font-size:18px;font-weight:900;line-height:1.5}
#termSheet p{margin:0 0 14px;font-size:14.5px;line-height:1.8}
#termClose{
  font:inherit;font-weight:900;font-size:14px;
  border:var(--bd);border-radius:8px;box-shadow:var(--pop-sm);
  background:var(--c-yellow);color:var(--ink);padding:7px 20px;cursor:pointer;
}
#termClose:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
#termClose:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}

/* =========================================================
   確認問題(assets/quiz.js とセット)
   ========================================================= */
.quizhead{
  display:inline-block;font-weight:900;font-size:13px;letter-spacing:.05em;
  border:var(--bd2);border-radius:7px;background:var(--c-pink);
  padding:3px 13px;margin:28px 0 12px;
}
.q{border:var(--bd2);border-radius:9px;padding:15px;margin-bottom:15px;background:#fff}
.qtext{font-weight:800;margin:0 0 13px;line-height:1.75}
.qtext .qn{
  display:inline-block;font-weight:900;background:var(--ink);color:#fff;
  border-radius:5px;padding:0 8px;margin-right:8px;font-size:13px;
}
.opt{
  display:block;width:100%;text-align:left;font:inherit;font-size:15px;line-height:1.65;
  font-weight:700;background:#fff;color:var(--ink);
  border:var(--bd2);border-radius:8px;box-shadow:var(--pop-sm);
  padding:11px 13px;margin-bottom:9px;cursor:pointer;
}
.opt:hover:not([disabled]){transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.opt:active:not([disabled]){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.opt[disabled]{cursor:default;box-shadow:none;transform:none;opacity:.65}
.opt.correct{background:#A8E6B8;opacity:1;font-weight:900;box-shadow:var(--pop-sm)}
.opt.wrong{background:#FFB3B3;opacity:1}
.exp{
  display:none;border:var(--bd2);border-radius:8px;padding:12px 14px;
  font-size:14.5px;background:var(--c-cream);margin-top:6px;
}
.exp.show{display:block}
.exp .verdict{
  display:inline-block;font-weight:900;font-size:12.5px;letter-spacing:.05em;
  border-radius:5px;padding:1px 10px;margin-bottom:6px;color:#fff;background:var(--ink);
}
.exp .verdict.ng{background:var(--c-red);color:var(--ink)}

.score{
  border:var(--bd);border-radius:var(--r);box-shadow:var(--pop);
  background:var(--ink);color:#fff;padding:18px;text-align:center;
  font-weight:900;font-size:17px;margin-top:8px;
}
.score b{font-size:30px;margin:0 4px}
.score .resetbtn{
  display:block;margin:12px auto 0;font:inherit;font-weight:900;font-size:13px;
  background:var(--c-yellow);color:var(--ink);border:2px solid #fff;border-radius:8px;
  padding:5px 16px;cursor:pointer;
}
.score .resetbtn:active{transform:translate(2px,2px)}

/* ---------- 画面幅 ---------- */
@media (max-width:560px){
  body{font-size:15px;background-size:18px 18px}
  .wrap{padding:16px 12px 70px}
  .card{padding:16px 15px}
  .posthead{padding:20px 16px}
  h2.sec{font-size:18px;padding:10px 12px}
  .lead-in{font-size:16px;border-left-width:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}