/* ST-Toolbox house style（家のスタイル）— 正本。憲章: docs/DESIGN_CHARTER.md
   書体＝UD（BIZ UDPMincho / BIZ UDPGothic）。学習用途の可読性を優先（2026-09-06 運営者指示）。ページ固有CSSに色・フォント・角丸を書かない。 */
:root{
  --h-bg:#f4f7f6;
  --paper:#fbfbf9;--bg:#f4f7f6;--ink:#1b2a33;--mute:#6b7a82;
  --indigo:#1f6f78;--indigo-d:#185b63;--night:#14272e;
  --gold:#c9902a;--ok:#2f8f6b;--warn:#b5563a;
  --line:#dfe6e4;--line-strong:#b9c6c3;--tint:#e7f1f0;--tint-2:#f0f6f5;
  --serif:'BIZ UDPMincho','Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --sans:'BIZ UDPGothic','Noto Sans JP',system-ui,-apple-system,'Hiragino Sans',sans-serif;
  --r:6px;--r-s:4px;
}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-variant-numeric:tabular-nums;}
a{color:var(--indigo-d);}

/* 部品 */
.h-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);}
.h-card>h3,.h-title{font-family:var(--serif);font-weight:700;letter-spacing:.02em;line-height:1.45;color:var(--ink);}
.h-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.18em;color:var(--indigo);text-transform:uppercase;}
.h-rule{width:32px;height:2px;background:var(--indigo);margin:10px 0 0;}
/* 表題行＝ノートの題名欄（明朝＋二重罫）。カードの上淵塗り・左縦線の代わりに使う（2026-09-06） */
.h-ch{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding-bottom:7px;margin-bottom:10px;border-bottom:3px double var(--line-strong,#b8c4c1);}
.h-ch h2,.h-ch h3{margin:0;font-family:var(--serif);font-weight:700;font-size:1.05rem;line-height:1.3;color:var(--ink);}
.h-ch .s{font-size:.8rem;color:var(--mute);}
.h-btn{display:inline-block;background:var(--indigo);color:#fff;border:1px solid var(--indigo);border-radius:var(--r-s);padding:10px 22px;font-family:var(--sans);font-size:.95rem;font-weight:700;text-decoration:none;cursor:pointer;line-height:1.4;}
.h-btn:hover{background:var(--indigo-d);}
.h-btn.ghost{background:var(--paper);color:var(--indigo-d);border-color:var(--line-strong);}
.h-btn.ghost:hover{border-color:var(--indigo);}
.h-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;padding:2px 8px;border-radius:var(--r-s);border:1px solid currentColor;line-height:1.5;}
.h-tag.free{color:var(--ok);}
.h-tag.mem{color:var(--indigo-d);}
.h-table{width:100%;border-collapse:collapse;font-size:.85rem;line-height:1.7;}
.h-table th,.h-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.h-table th{font-family:var(--serif);font-weight:700;white-space:nowrap;}
.h-num{font-weight:900;font-size:1.8rem;line-height:1.1;color:var(--ink);}
.h-num small{font-size:.75rem;font-weight:700;color:var(--mute);margin-left:4px;}
.h-note{background:var(--tint-2);border-radius:var(--r-s);padding:10px 12px;font-size:.82rem;line-height:1.75;color:var(--mute);}
.h-mute{color:var(--mute);}
.h-kv{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:.78rem;color:var(--mute);}
.h-kv b{color:var(--ink);font-weight:700;}
.h-list{list-style:none;margin:0;padding:0;}
.h-list li{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:.9rem;}
.h-list li:last-child{border-bottom:0;}
.h-list .lbl{flex:1;}
.h-list .aux{font-size:.75rem;color:var(--mute);white-space:nowrap;}
.h-list .mark{font-family:var(--serif);color:var(--gold);font-weight:700;flex:0 0 1em;text-align:center;}

@media print{
  html,body{background:#fff;}
  .h-card{border-color:#999;}
  .h-btn{display:none;}
}

/* ---- 学習ノート系（プレミアム会員ページ）。顔はノート、中身は計器 ---- */
.h-ruled{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--line) 31px,var(--line) 32px);line-height:32px;}
.h-gauge{position:relative;height:10px;border:1px solid var(--line-strong);border-radius:2px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(10% - 1px),var(--line-strong) calc(10% - 1px),var(--line-strong) 10%);overflow:visible;}
.h-gauge>i{position:absolute;left:0;top:0;bottom:0;background:var(--indigo);}
.h-gauge>b{position:absolute;top:-7px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--gold);transform:translateX(-50%);}
.h-gauge>b::after{content:'';position:absolute;left:-1px;top:6px;width:1px;height:12px;background:var(--gold);}
.h-dial{font-family:var(--serif);font-weight:700;font-size:1.6rem;line-height:1.1;letter-spacing:.02em;}
.h-dial small{font-family:var(--sans);font-size:.7rem;font-weight:700;color:var(--mute);margin-left:4px;letter-spacing:.06em;}
.h-check{list-style:none;margin:0;padding:0;}
.h-check li{display:flex;align-items:baseline;gap:10px;padding:0 2px;border-bottom:1px solid var(--line);font-size:.9rem;min-height:32px;line-height:32px;}
.h-check li:last-child{border-bottom:0;}
.h-check .box{flex:0 0 14px;height:14px;border:1px solid var(--ink);border-radius:2px;position:relative;top:2px;}
.h-check li.done .box{background:var(--ink);}
.h-check li.done .box::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.h-check li.done .lbl{color:var(--mute);text-decoration:line-through;text-decoration-color:var(--line-strong);}
.h-check .lbl{flex:1;}
.h-check .subj{font-weight:700;color:var(--indigo-d);margin-right:4px;}
.h-check .aux{font-size:.75rem;color:var(--mute);white-space:nowrap;}
.h-tabs{display:flex;gap:0;border-bottom:1px solid var(--ink);overflow-x:auto;}
.h-tabs a{padding:10px 16px;font-size:.88rem;font-weight:700;color:var(--mute);text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px;}
.h-tabs a.on{color:var(--ink);border-bottom-color:var(--indigo);}
.h-legend{display:flex;gap:4px 16px;flex-wrap:wrap;font-size:.75rem;color:var(--mute);}
.h-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px;}