@charset "UTF-8";

/* =============================================================
 * お知らせ枠
 *
 * 骨格は darwin-biology テーマから移植したが、配色・書体・文字サイズ・
 * 幅は Figma に合わせ直している。
 *   Figma: pLXNOyoldSDLxOv8vmfow9 / node 61:8527
 *
 * マークアップは front-page.php のお知らせセクション。
 * 月次で変わる文言は inc/announcement.php。
 *
 * 配色 (Figma 実測)
 *   セクション背景  #FFFFFF  (Figma では枠の外。キャンペーンセクションの
 *                            上下に敷く白と揃えるため純白にしている)
 *   ボックス背景    #F7F0E1
 *   文字・区切り線  #37342D  更新日・見出し・本文・罫線すべて同色
 *
 * 書体は Noto Serif SC SemiBold(600)。
 * サイトの他セクションは Noto Sans SC だが、この枠と
 * キャンペーンセクションだけ Figma 指定の明朝体を使う。
 *
 * 寸法 (Figma。ボックス幅 1000px を基準にした相対位置)
 *   ボックス上端 → 更新日   33px   (padding-top)
 *   更新日 → 見出し          29px
 *   見出し → 罫線            49px
 *   罫線 → 本文              24px
 *   本文下端 → ボックス下端  30px   (padding-bottom)
 *   左右の内側余白           40px   (罫線幅 920px = 1000 - 40*2)
 * ============================================================= */

.p-announcement {
  padding: 20px 0;
  background-color: #fff;
  font-family: "Noto Serif SC", serif;

  /* 移植元は `* { box-sizing: border-box }` と body の行送り既定 (normal)
     が前提。asir は body に line-height: 2 が効いていて、box-sizing も
     body にしか当たっていないので、このセクション内だけ揃えておく。 */
  line-height: normal;
}

/* -------------------------------------------------------------
 * ホスト側 (css/style.css) との差分を吸収するリセット
 *
 * asir は `body { font-weight: 300 }` に加えて
 * `h1,h2,...,h6 { font-weight: 300; font-size: 100% }` を
 * 要素セレクタで当てている。要素セレクタは継承より強いので、
 * ここで inherit にしておかないと見出しの指定が打ち消される。
 *
 * 詳細度は `.p-announcement *` = (0,1,0)。同じ (0,1,0) の
 * コンポーネント側とは同点なので、必ずこのファイルの先頭に置くこと。
 * 順番を入れ替えると font-weight の指定が全部無効になる。
 * ------------------------------------------------------------- */

.p-announcement,
.p-announcement *,
.p-announcement *::before,
.p-announcement *::after {
  box-sizing: border-box;
}

.p-announcement * {
  font-family: inherit;
  font-weight: inherit;
}

/* Figma のボックス幅。キャンペーンセクションの __inner と同じ 1000px。
   左右の余白は .p-campaign に合わせて 15px。 */
.p-announcement__inner {
  width: 100%;
  max-width: 1030px; /* 1000px + 左右 15px */
  margin-right: auto;
  margin-left: auto;
  padding-inline: 15px;
}

/* -------------------------------------------------------------
 * c-announcement-box
 * ベージュ地のお知らせ本体。
 * 上から 更新日 → 見出し → 区切り線 → 本文。
 * ------------------------------------------------------------- */

/* text-align: center は更新日と見出し用。本文は __content p 側で左揃えに戻す。 */
.c-announcement-box {
  padding: 33px 40px 30px;
  background-color: #f7f0e1;
  text-align: center;
}

.c-announcement-box__date {
  color: #37342d;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.282;
}

/* 更新日との間隔 29px から更新日の行の高さ (17 × 1.282 ≒ 22px) を引いた値 */
.c-announcement-box__title {
  padding-top: 7px;
  padding-bottom: 22px;
  color: #37342d;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.282;
}

.c-announcement-box__content {
  color: #37342d;
}

/* 見出しと本文を分ける罫線。本文側の padding-top が罫線からの余白になる。 */
.c-announcement-box__body {
  padding-top: 24px;
  border-top: 1px solid #37342d;
}

/* Figma は段落間に余白を持たず、行送り 1.8 だけで行を並べている。 */
.c-announcement-box__content p {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
  text-align: start;
}

/* 「※」で始まる注釈は本文より一段小さく (Figma: 本文16px / 注釈14px)。
   本文の指定が `__content p` (0,1,1) なので、子孫セレクタで (0,2,0) に
   上げないと勝てない。単独の `.c-announcement-box__note` では効かない。 */
.c-announcement-box__content .c-announcement-box__note {
  font-size: 14px;
}

/* 原稿の空行。中身が無い <p> は行ボックスができず高さ 0 になるので、
   本文1行ぶんの高さを明示する。
   em にしてあるのは PC (16px → 28.8px) と SP (13px → 23.4px) で
   自動的に同じ「1行ぶん」になるようにするため。
   font-size は `__content p` (0,1,1) が効くので、こちらも
   子孫セレクタで (0,2,0) に上げておく。 */
.c-announcement-box__content .c-announcement-box__spacer {
  height: 1.8em; /* 本文の line-height と同値 */
}

/* -------------------------------------------------------------
 * レスポンシブ
 * ブレークポイントは移植元 (home-responsive.css) のまま。
 * asir 本体の SP 判定 (767px) とは別系統なので注意。
 * ------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  .c-announcement-box {
    padding: 42px 20px 48px;
  }
}

@media screen and (max-width: 768px) {
  /* SP は左右の余白を 20px に統一して、キャンペーンセクションと幅を揃える。 */
  .p-announcement {
    padding: 20px;
  }

  .p-announcement__inner {
    padding-inline: 0;
  }

  .c-announcement-box__date {
    font-size: 14px;
  }

  .c-announcement-box__content p {
    font-size: 13px;
  }

  /* PC と同じ 0.875 倍（13px → 11.375px）を丸めた値 */
  .c-announcement-box__content .c-announcement-box__note {
    font-size: 11px;
  }

  /* 空行の高さは 1.8em で指定してあるので、本文が 13px に縮めば
     空行も 23.4px に追従する。ここでの上書きは不要。 */
}

@media screen and (max-width: 425px) {
  .c-announcement-box__title {
    font-size: 18px;
  }

  .c-announcement-box__body {
    padding-top: 22px;
  }
}