/* ============================================================
   通信制高校のしくみと選び方 — 共通スタイル
   意匠：履修計画ノート（方眼下地／インクブルー／マーカー黄）
   ============================================================ */

:root{
  --ink:#16324F;
  --ink-2:#4A6C8C;
  --ink-3:#7E93A6;
  --paper:#F7F8FA;
  --paper-2:#FFFFFF;
  --grid:#DCE3EC;
  --rule:#C9D4E0;
  --marker:#FFD84D;
  --marker-soft:#FFF3C4;
  --alert:#B4472E;

  --f-display:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --f-body:"Noto Sans JP","Hiragino Sans",sans-serif;
  --f-num:"Roboto Mono",ui-monospace,monospace;

  --wrap:760px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.9;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- PR表記バー（全ページ最上部・A8要件） ---------- */
.pr-bar{
  background:var(--ink);
  color:#fff;
  font-size:12px;
  line-height:1.6;
  letter-spacing:.02em;
  padding:8px 0;
}
.pr-bar .wrap{display:flex;gap:10px;align-items:flex-start}
.pr-bar b{
  flex:none;
  background:var(--marker);
  color:var(--ink);
  font-family:var(--f-display);
  font-size:11px;
  padding:1px 7px;
  border-radius:2px;
}

/* ---------- ヘッダー ---------- */
.site-head{
  background:var(--paper-2);
  border-bottom:1px solid var(--rule);
}
.site-head .wrap{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  align-items:baseline;padding-top:16px;padding-bottom:16px;
}
.site-name{
  font-family:var(--f-display);font-weight:700;font-size:17px;
  letter-spacing:.01em;text-decoration:none;color:var(--ink);
}
.site-name small{display:block;font-size:11px;font-weight:400;color:var(--ink-3);letter-spacing:.06em}
.site-nav{margin-left:auto;display:flex;gap:18px;font-size:13px}
.site-nav a{color:var(--ink-2);text-decoration:none}
.site-nav a:hover{color:var(--ink);text-decoration:underline}

/* ---------- 見出し ---------- */
h1{
  font-family:var(--f-display);font-weight:700;
  font-size:29px;line-height:1.5;letter-spacing:-.01em;
  margin:0 0 14px;
}
h2{
  font-family:var(--f-display);font-weight:700;
  font-size:21px;line-height:1.6;
  margin:52px 0 16px;padding-bottom:8px;
  border-bottom:2px solid var(--ink);
}
h3{
  font-family:var(--f-display);font-weight:700;
  font-size:17px;margin:32px 0 10px;
}
h3::before{
  content:"";display:inline-block;width:8px;height:8px;
  background:var(--marker);margin-right:9px;vertical-align:2px;
}

p{margin:0 0 18px}
a{color:var(--ink)}

.lead{font-size:17px;color:var(--ink-2);line-height:2.0}

/* ---------- 本文パーツ ---------- */
main{padding:34px 0 10px}

.eyebrow{
  font-family:var(--f-num);font-size:11px;letter-spacing:.14em;
  color:var(--ink-3);text-transform:uppercase;margin:0 0 10px;
}

.marker{background:linear-gradient(transparent 62%,var(--marker-soft) 62%);font-weight:700}

ul,ol{margin:0 0 18px;padding-left:1.35em}
li{margin-bottom:8px}

.card{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:20px 22px;
  margin:0 0 20px;
}
.card p:last-child,.card ul:last-child,.card ol:last-child{margin-bottom:0}
.card h3{margin-top:0}

.note{
  border-left:4px solid var(--marker);
  background:var(--paper-2);
  padding:14px 18px;
  font-size:14px;line-height:1.85;
  margin:0 0 22px;
}
.note strong{color:var(--alert)}

table{
  width:100%;border-collapse:collapse;
  font-size:14px;background:var(--paper-2);
  margin:0 0 22px;
}
th,td{border:1px solid var(--rule);padding:10px 12px;text-align:left;vertical-align:top}
th{background:#EEF2F7;font-family:var(--f-display);font-weight:700;font-size:13px}
td .num{font-family:var(--f-num);font-size:14px}

.sources{
  font-size:12.5px;line-height:1.85;color:var(--ink-2);
  border-top:1px solid var(--rule);
  margin-top:44px;padding-top:16px;
}
.sources h2{font-size:14px;border:0;margin:0 0 8px;padding:0}
.sources ul{padding-left:1.2em;margin-bottom:0}

/* ---------- 単位の積み上げバー（署名要素） ---------- */
.credits{
  background:var(--paper-2);border:1px solid var(--rule);
  border-radius:3px;padding:22px;margin:0 0 26px;
}
.credits-title{
  font-family:var(--f-display);font-weight:700;font-size:15px;margin:0 0 4px;
}
.credits-sub{font-size:13px;color:var(--ink-2);margin:0 0 16px}
.credits-bar{display:flex;gap:2px;height:34px;margin-bottom:10px}
.credits-bar span{flex:1;background:var(--marker-soft);border-radius:1px}
.credits-bar span.on{background:var(--marker)}
.credits-scale{
  display:flex;justify-content:space-between;
  font-family:var(--f-num);font-size:11px;color:var(--ink-3);
}
.credits-legend{font-size:13px;color:var(--ink-2);margin:12px 0 0;line-height:1.8}

/* ---------- 記事一覧 ---------- */
.list{list-style:none;padding:0;margin:0}
.list li{
  border-top:1px solid var(--rule);
  margin:0;
}
.list li:last-child{border-bottom:1px solid var(--rule)}
.list a{
  display:block;padding:18px 4px;text-decoration:none;color:var(--ink);
}
.list a:hover{background:var(--paper-2)}
.list .t{font-family:var(--f-display);font-weight:700;font-size:16.5px;line-height:1.6;display:block}
.list .d{font-size:13.5px;color:var(--ink-2);display:block;margin-top:5px;line-height:1.8}

/* ---------- 記事末尾の関連サービス（1記事1つのみ） ---------- */
.related-service{
  border:1px solid var(--rule);
  border-left:4px solid var(--ink);
  background:var(--paper-2);
  padding:18px 20px;
  font-size:14px;line-height:1.85;
  margin:44px 0 0;
}
.related-service .tag{
  display:inline-block;background:var(--marker);color:var(--ink);
  font-family:var(--f-display);font-size:11px;font-weight:700;
  padding:1px 7px;border-radius:2px;margin-bottom:8px;
}
.related-service p{margin:0 0 10px}
.related-service p:last-child{margin-bottom:0}
.related-service a.go{
  font-family:var(--f-display);font-weight:700;color:var(--ink);
}

/* ---------- 署名ブロック ---------- */
.byline{
  display:flex;gap:14px;align-items:flex-start;
  border-top:1px solid var(--rule);
  margin-top:40px;padding-top:18px;font-size:13.5px;line-height:1.8;
}
.byline .av{
  flex:none;width:48px;height:48px;border-radius:50%;
  background:var(--marker-soft);border:1px solid var(--rule);
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--ink);
}
.byline .nm{font-family:var(--f-display);font-weight:700;display:block}
.byline p{margin:2px 0 0;color:var(--ink-2)}

/* ---------- フッター ---------- */
.site-foot{
  border-top:1px solid var(--rule);
  background:var(--paper-2);
  margin-top:56px;padding:26px 0 40px;
  font-size:13px;color:var(--ink-2);
}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline}
.site-foot a{color:var(--ink-2)}
.site-foot .cp{margin-left:auto;font-family:var(--f-num);font-size:11px;color:var(--ink-3)}
.site-foot .disc{width:100%;font-size:12px;color:var(--ink-3);line-height:1.8;margin:6px 0 0}

/* ---------- レスポンシブ ---------- */
@media (max-width:640px){
  body{font-size:15.5px;background-size:24px 24px}
  h1{font-size:24px}
  h2{font-size:19px;margin-top:42px}
  .site-nav{width:100%;margin-left:0;gap:14px;flex-wrap:wrap}
  .site-foot .cp{margin-left:0;width:100%}
  .credits-bar{height:26px}
}

/* ---------- アクセシビリティ ---------- */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--marker);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}