/* minna-design / base.css — 3サイト共通の土台（正本）
   MkDocs Material 上の文字組み・見出し・余白ユーティリティ・ヘッダー／タブ／ナビの無彩色化。
   tokens.css の後に読み込む。サイト固有の部品（カード・図・年表など）は各サイト側に置く。
   区切りは罫線でなく「余白」「面の濃淡」「細い左罫」で表す。見出しは太字でなくサイズ・色バーで立てる。 */

/* ---------- 余白ユーティリティ（縦余白は上下とも明示。セクション間は .gap-6 を使う） ---------- */
.margin01 { margin-top: var(--sp-1) !important; margin-bottom: var(--sp-1) !important; }
.margin02 { margin-top: var(--sp-2) !important; margin-bottom: var(--sp-2) !important; }
.margin04 { margin-top: var(--sp-4) !important; margin-bottom: var(--sp-4) !important; }
/* 「この要素の上に1セクション分空ける」。下は0（縦余白は下の要素が持つ） */
.gap-6 { margin-top: var(--sp-section) !important; margin-bottom: 0 !important; }

/* ---------- 本文・見出し ---------- */
.md-content p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--md-typeset-color) !important;
  font-weight: var(--fw-normal);
}
.md-typeset h1 {
  font-size: var(--fs-h1) !important;
  line-height: 1.4 !important;
  margin: 0 0 0.2rem 0 !important;
  color: var(--md-typeset-color) !important;
  font-weight: var(--fw-light) !important;
}
h2 {
  font-size: var(--fs-h2) !important;
  margin: var(--sp-h2-top) 0 1.2rem 0 !important;
  line-height: 1.4 !important;
  color: var(--md-main-color) !important;
  font-weight: var(--fw-light) !important;
}
h3 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 2.4 !important;
  color: var(--md-typeset-color) !important;
  font-weight: 700 !important;
}
h4 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 2.4 !important;
  color: var(--md-typeset-color) !important;
  font-weight: var(--fw-normal) !important;
}
@media only screen and (max-width: 767px) {
  .md-typeset h1 { font-size: 1.7rem !important; }
  h2 { font-size: 1.2rem !important; margin: var(--sp-h2-top) 0 0.8rem 0 !important; }
}

/* 強調・下線 */
u {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--md-main-color);
}
strong em { color: var(--md-strong-color) !important; font-style: normal !important; }

/* 文字サイズ */
.larger { font-size: var(--fs-h2) !important; line-height: 1.4 !important; font-weight: var(--fw-normal) !important; }
.smaller { font-size: var(--fs-small) !important; }
.smallest { font-size: var(--fs-xsmall) !important; }
@media only screen and (max-width: 767px) {
  .larger { font-size: 1.2rem !important; }
}

/* 色つき強調：.text-warn=警告（赤）／.text-main=メイン色（紺）。太字にしたいときは <b> で囲む */
.text-warn { color: var(--md-warn-red); }
.text-main { color: var(--md-link-color); }

/* 見出しを太字でなく行頭の紺バーで立てる。サイズ・太さは併用クラス（.larger 等）に委ねる */
.bar-title { position: relative; padding-left: 0.74rem; }
.bar-title::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0.24rem;
  background-color: var(--md-link-color);
  border-radius: 1px;
}

/* 中央寄せ（モバイルは左寄せ） */
.center { text-align: center; }
@media only screen and (max-width: 767px) { .center { text-align: left; } }

/* 本文幅：1行40字（32rem）。margin:auto で自己センタリングする（親の幅に暗黙に頼らない） */
.width-40 {
  max-width: 32rem;
  margin-left: auto !important;   /* .md-typeset p（特異度0,0,1,1）に勝つため */
  margin-right: auto !important;
  overflow-wrap: break-word;
  white-space: normal;
}
@media only screen and (max-width: 767px) { .width-40 { max-width: 100%; } }

/* ---------- ヘッダー・タブ・ナビ・フッター（Material を無彩色＋紺1色に） ---------- */
/* サイト名を常時表示し、ページタイトルへ切り替えない */
.md-header__title .md-header__topic:first-child,
.md-header__title--active .md-header__topic:first-child {
  opacity: 1 !important; transform: none !important; pointer-events: auto !important; z-index: 0 !important;
}
.md-header__title .md-header__topic + .md-header__topic,
.md-header__title--active .md-header__topic + .md-header__topic { display: none !important; }
.header-site-link, .header-site-link:hover { color: var(--md-link-color) !important; font-weight: 400 !important; }
/* サイト名の左端をタブ行の左端に揃える（幅≥76.234375em で一致） */
.md-header__title { margin-left: 12px !important; }

/* タブのホバー／アクティブは紺の下線 */
.md-tabs__link:hover,
.md-tabs__item--active .md-tabs__link {
  color: var(--md-main-color);
  text-decoration: underline;
  text-underline-offset: 12px;
  text-decoration-color: var(--md-main-color);
}

.md-nav__link { font-weight: 400 !important; color: var(--md-typeset-color) !important; }
.md-nav__link:hover,
.md-nav__link--active,
.md-nav__link--active:hover { color: var(--md-main-color) !important; font-weight: 700 !important; }

.md-footer { margin-top: var(--sp-8); }
@media only screen and (max-width: 767px) { .md-footer { margin-top: 4rem; } }

/* 下線付きリンク */
.arrow-link {
  display: inline-block;
  color: var(--md-link-color) !important;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-color: var(--md-link-color);
  text-decoration-thickness: 1px;
  transition: color 0.3s ease;
}
.arrow-link:hover { text-decoration-thickness: 1.2px; }