/*
 * サイト固有のスタイル（お知らせページ）
 * 見た目は既存の notice2 を引き継ぎ、文字・余白・レイアウトはデジタル庁デザインシステムに合わせる
 * デザインシステム（css/dads/）は変更せず、ここだけに書く
 */

/* ========== 1. 色 ========== */
/*
 * ヘッダーとタイトル帯の緑は notice2 と同じ会社の色（#01913A）
 * 白背景とのコントラスト比 約4.1:1（線・帯などの非テキストの基準 3:1 以上）
 * 文字には使わない（文字の基準 4.5:1 に届かないため）
 */
:root {
  --site-color-brand: #01913a;
  --site-color-brand-dark: #0c6c2f;
}

/*
 * 余白スケール（公式ガイドライン「余白」に基づき、8pxを基準単位に5段階）
 *   8 / 16 / 24 / 40 / 64 px
 */

/* ========== 2. ページの枠組み ========== */
.site-body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-800);
  font-family: var(--font-family-sans);
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* 本文幅 1040px（本文16pxの整数倍）。左右マージンはモバイル16px／デスクトップ40px */
.site-container {
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: calc(1040 / 16 * 1rem);
  padding-right: calc(16 / 16 * 1rem);
  padding-left: calc(16 / 16 * 1rem);
}

@media (min-width: 48rem) {
  .site-container {
    padding-right: calc(40 / 16 * 1rem);
    padding-left: calc(40 / 16 * 1rem);
  }
}

/* ヘッダー：notice2 と同じ緑の帯に白抜きロゴ */
.site-header {
  background-color: var(--site-color-brand);
  border-bottom: 1px solid var(--site-color-brand-dark);
  padding-top: calc(16 / 16 * 1rem);
  padding-bottom: calc(16 / 16 * 1rem);
}

.site-header__logo {
  display: inline-block;
  vertical-align: top;
}

.site-header__logo-img {
  display: block;
  width: auto;
  height: calc(40 / 16 * 1rem);
}

@media (min-width: 48rem) {
  .site-header__logo-img {
    height: calc(48 / 16 * 1rem);
  }
}

/* フォーカス表示はDADS既定（黒の枠線＋黄色） */
.site-header__logo:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  border-radius: calc(4 / 16 * 1rem);
  background-color: var(--color-primitive-yellow-300);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.site-breadcrumb {
  padding-top: calc(16 / 16 * 1rem);
  padding-bottom: calc(16 / 16 * 1rem);
}

.site-main {
  flex: 1;
  padding-top: calc(8 / 16 * 1rem);
  padding-bottom: calc(64 / 16 * 1rem);
}

.site-text {
  margin: 0;
}

/* フッター：notice2 と同じ薄いグレーの帯。14pxはフッター等の付随情報でのみ許容 */
.site-footer {
  background-color: var(--color-neutral-solid-gray-50);
  padding-top: calc(16 / 16 * 1rem);
  padding-bottom: calc(16 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-800);
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.3;
  text-align: center;
}

.site-footer__copyright {
  margin: 0;
}

/* ========== 3. 見出しまわり ========== */

/* ページタイトル：notice2 の「左に緑の線＋グレーの帯」を引き継ぐ */
.site-page-title {
  margin: 0;
  border-left: calc(8 / 16 * 1rem) solid var(--site-color-brand);
  border-bottom: 1px solid var(--color-neutral-solid-gray-200);
  background-color: var(--color-neutral-solid-gray-50);
  padding: calc(16 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font-size: calc(24 / 16 * 1rem);
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-break: auto-phrase;
}

@media (min-width: 48rem) {
  .site-page-title {
    padding: calc(16 / 16 * 1rem) calc(24 / 16 * 1rem);
    font-size: calc(28 / 16 * 1rem);
  }
}

.site-date {
  margin: calc(8 / 16 * 1rem) 0 0;
  text-align: right;
}

/* ========== 4. 本文の囲み ========== */

/* notice2 の枠囲みを引き継ぐ */
.site-notice {
  margin-top: calc(24 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: calc(8 / 16 * 1rem);
  padding: calc(24 / 16 * 1rem) calc(16 / 16 * 1rem);
}

@media (min-width: 48rem) {
  .site-notice {
    margin-top: calc(40 / 16 * 1rem);
    padding: calc(40 / 16 * 1rem);
  }
}

.site-notice__section {
  margin-top: calc(40 / 16 * 1rem);
}

.site-notice__section > * + * {
  margin-top: calc(16 / 16 * 1rem);
}

.site-notice__heading {
  margin: 0;
  border-bottom: 1px solid var(--color-neutral-solid-gray-420);
  padding-bottom: calc(8 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font-size: calc(20 / 16 * 1rem);
  font-weight: bold;
  line-height: 1.5;
}

.site-notice__closing {
  margin-top: calc(40 / 16 * 1rem);
}

/* リスト項目の補足（※書き）。文字サイズは本文と同じ16pxのまま、改行して添える */
.site-list-note {
  display: block;
  color: var(--color-neutral-solid-gray-700);
}