@charset "UTF-8";

/* =============================================================
 * お知らせ枠
 *
 * the-math (math-course テーマ) の home-style.css / home-responsive.css
 * にある .announcement-* を移植したもの。
 * 寸法・配色は移植元のまま。ブレークポイントは 1200 / 1024 / 768 / 425px
 * （移植元にあった 680 / 600px の刻みは SP の余白を整理した際に不要になった）。
 *
 * マークアップは front-page.php のお知らせセクション。
 *
 * 移植元との違いは3点。
 *   1. クラス名を BEM (p-announcement / c-announcement-box__*) に変えた。
 *      移植元の .update-date のような汎用名は asir の既存CSSと
 *      衝突しやすいため。campaign.css の命名にも揃えている。
 *   2. セクションの背景をウィンドウ全幅に敷いている。移植元は
 *      .section-container の max-width: 1440px で背景も切れるが、
 *      asir の他セクションは全幅で背景を敷くのでそちらに合わせた。
 *      中身の最大幅 (1140px) は移植元と同じ。
 *   3. 書体を Noto Serif JP から Shippori Mincho B1 に変更。
 *      asir が読み込んでいない書体だとフォールバックしてしまうため。
 *      campaign.css と同じ理由・同じ扱い。
 *
 * 配色
 *   セクション背景  #FDFDFD
 *   ボックス背景    #F8F2DC
 *   更新日          #1F1F1F
 *   見出し・本文    #333333
 *   区切り線        #606060
 * ============================================================= */

.p-announcement {
  padding: 20px 0;
  background-color: #fdfdfd;
  font-family: "Shippori Mincho B1", 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;
}

/* 中身の最大幅。1440 - 150*2 = 1140px が移植元のボックス幅。 */
.p-announcement__inner {
  width: 100%;
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
  padding-inline: 150px;
}

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

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

.c-announcement-box__date {
  color: #1f1f1f;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.c-announcement-box__title {
  padding-top: 10px;
  padding-bottom: 20px;
  color: #333;
  font-size: 24px;
  font-weight: 700;
}

.c-announcement-box__content {
  color: #333;
  line-height: 1.4;
}

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

/* 段落は1行ずつなので、移植元の margin-bottom: 15px + line-height: 160%
   だと行の間隔が 40px 近くなって間延びする。行送りは 1.6 のまま、
   段落の余白だけ詰めている。最後の1行の余白はボックスの
   padding-bottom と二重になるので消す。 */
.c-announcement-box__content p {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  text-align: start;
}

.c-announcement-box__content p:last-child {
  margin-bottom: 0;
}

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

/* Figma では本文と注釈の間に空行が1行入っている (16px × 1.8 = 28.8px)。
   直前の段落の margin-bottom 6px と合わせてその高さになるようにした。
   隣接セレクタなので、注釈が何行続いても最初の1つにだけ効く。 */
.c-announcement-box__content p:not(.c-announcement-box__note) + .c-announcement-box__note {
  margin-top: 23px;
}

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

@media screen and (max-width: 1200px) {
  .p-announcement__inner {
    padding-inline: 120px;
  }
}

@media screen and (max-width: 1024px) {
  .p-announcement {
    padding: 20px 50px;
  }

  .p-announcement__inner {
    padding-inline: 80px;
  }

  .c-announcement-box {
    padding: 42px 20px 48px;
  }

  .c-announcement-box__content {
    padding-inline: 20px;
  }
}

@media screen and (max-width: 768px) {
  /* SP は左右の余白を 20px に統一して、キャンペーンセクションと幅を揃える。
     移植元は section と inner の両方で余白を取っていたため
     (768px 以下なら 20px + 40px)、390px 端末でボックスが 310px まで
     痩せていた。inner 側を 0 にして section の 20px だけにしている。
     移植元にあった 680px / 600px の刻みも、この対応で不要になったので消した。 */
  .p-announcement {
    padding: 20px;
  }

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

  /* ボックス自身の左右 20px で足りるので、本文側の余白は落とす */
  .c-announcement-box__content {
    padding-inline: 0;
  }

  .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;
  }

  /* 本文が 13px に縮むぶん、注釈の上の余白も同じ比率で詰める */
  .c-announcement-box__content p:not(.c-announcement-box__note) + .c-announcement-box__note {
    margin-top: 18px;
  }
}

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

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