@charset "UTF-8";

/* --- Reset（最小限） --- */
html{box-sizing:border-box;-ms-overflow-style:scrollbar}
*,*::before,*::after{box-sizing:inherit;word-break:break-word}
img{border:0;max-width:100%;height:auto;vertical-align:middle}
a{text-decoration:none}
ol,ul{list-style:none;padding:0;margin:0}
hr{border:none;height:1px;background:#f1eded;margin:2em 0}


/* --- Base Typography --- */
body{
  background:#f7f7f8;            /* ← 本文外は薄グレー */
  color:#222;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP","Meiryo",sans-serif;
  font-weight:400;
  line-height:1.9;
  margin:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
p{margin:0 0 1em}

/* レイアウト */
.container{max-width:720px;margin:48px auto;padding:0 20px}
.content{
  background:#fff;               /* ← 本文カードは白 */
  border:1px solid #eee;
  border-radius:12px;
  padding:20px;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
  letter-spacing:.01em;          /* ← 全体をほんの少しだけ広げる */
}

/* 上部の総タイトル（--index-title） */
.suptitle{
  font-size:.90rem;              /* 小さめ */
  color:#666;
  letter-spacing:.04em;
  line-height:1.6;
  margin:0 0 .25rem;
}

/* ページタイトル（TXT 1行目）：さらに小さく＆うっすら下線 */
h1{
  font-family:inherit;color:inherit;font-weight:600;letter-spacing:.015em;line-height:1.6;
  margin:0 0 .9rem;
  font-size:clamp(1.25rem,1.6vw + 1rem,1.6rem);  /* ← 以前より小さめ */
  padding-bottom:.35rem;
  border-bottom:1px solid #e9e9e9;               /* ← うっすら下線 */
}

/* h2/h3（必要なら微調整） */
h2{
  font-family:inherit;font-weight:600;font-size:1.125rem;margin:40px 0 15px;position:relative;padding-left:15px;
}
h2::before{
  content:"";display:block;width:15px;height:1.5px;background:#dcdcdc;position:absolute;top:0;bottom:0;left:-15px;margin:auto;
}
@media (min-width:768px){ h2{font-size:1.25rem;padding-left:0} h2::before{left:-45px;width:20px} }
h3{font-family:inherit;font-weight:600;font-size:1.0625rem;border-bottom:1px solid #d1d1d1;padding-bottom:6px}
@media (min-width:768px){ h3{font-size:1.125rem} }

/* ルビをさらに小さく */
ruby rt{font-size:.60em;color:#444}   /* ← 0.60em まで下げた */

/* テーブル（任意） */
table{border-collapse:collapse;width:100%;margin:30px 0}
thead{background:#f7f7f7}
tr{border-top:1px solid #ccc}
tr:last-of-type{border-bottom:1px solid #ccc}
th,td{padding:8px 0}
@media (min-width:768px){ th,td{padding:12px 0} }

/* リンク色 */
a{color:#00A0DF}
a:hover{color:#A3D4E4}

/* 末尾ナビ：本文と分離する罫線＋中央寄せ */
.footer-nav,
.footer-nav-sub{
  margin-top:16px;
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;
}
.footer-nav{
  padding-top:14px;
  border-top:1px solid #eee;     /* ← 本文との区切り線 */
}
.footer-nav-sub{margin-top:8px}

/* 末尾ナビ：ボタン風リンク */
.chip{
  display:inline-block;
  border:1px solid #dcdcdc;
  border-radius:999px;
  padding:.38rem .7rem;
  background:#fff;
  /* ここを inherit → ベース色に */
  color:#0077B8;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.chip:hover{
  background:#f0f0f0;
  color:#00A0DF;
}
/* ここも inherit をやめて visited 色を明示 */
.chip:visited{
  color:#5B89A6;
  border-color:#c8d6e3;
}

/* index.html 用 */
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:20px}
ul.toc{list-style:none;padding-left:0;margin:0}
ul.toc li{margin:.35rem 0}
ul.toc a{color:inherit}

/* グローバルリンク（順序が大事：link → visited → hover → active） */
a:link    { color:#0077B8; }
a:visited { color:#5B89A6; }
a:hover   { color:#00A0DF; }
a:active  { color:#006091; }

/* index.html の概要 */
.index-summary{
  color:#555;
  margin: .25rem 0 1rem;
  line-height: 1.9;
}

/* index.html のリンクを“リンクらしく” */
ul.toc{ list-style:none; padding-left:0; margin:0; }
ul.toc li{ margin:.35rem 0; }
ul.toc a{
  display:block;
  padding:.5rem .6rem;
  border-radius:8px;
  color:#006AA6;
  border:1px solid transparent;         /* ← 枠を追加 */
}
ul.toc a:hover{
  background:#F2F7FB;
  color:#00A0DF;
  text-decoration: underline;
  border-color:#D7E8F4;                  /* ← ホバー時の枠色 */
}
ul.toc a:visited{
  color:#5B89A6;
  border-color:#E5EEF5;                  /* ← 訪問済みの枠で“済”感を弱く演出 */
}

/* アーカイブトップのグルーピング用 */
.archive-group + .archive-group { margin-top: 24px; }
.archive-group h2 { margin-top: 24px; margin-bottom: 10px; }