@charset "UTF-8";

/*
 * お知らせセクション
 *
 * レイアウトは asir テーマ（i塾）の css/announcement.css から移植し、
 * 配色・書体・文字サイズは当サイトの Figma に合わせ直したもの。
 * (Figma: pLXNOyoldSDLxOv8vmfow9 / node 69:4497)
 *
 * マークアップは template-parts/sections/section-05a-announcement.php。
 * 月次で切り替わる原稿は inc/announcement.php。
 *
 * Figma に合わせた値（asir から変えた箇所）
 *   箱の背景    #F7F0E1（ベージュ）→ #E2EDF3（淡水色 / $color-light-grey と同値）
 *   書体        Shippori Mincho B1 → Noto Serif JP SemiBold
 *               （header.php で読み込み済みなのでウェブフォントは増えない）
 *   文字・罫線  #333 / #1F1F1F / #606060 → すべて #222
 *   更新日      16px → 17px
 *   見出し      24px / 行送り 1.4 → 21px / 1.282
 *   本文        行送り 1.6 → 1.8（段落間の余白は行送りに含めるので 0 にした）
 *
 * レイアウト面で asir から変えた点は2つ。当テーマ側の事情によるもの。
 *
 * 1. コンテナ幅
 *    asir は本文幅 1200px のページに合わせて max-width: 1440px + 左右 150px の
 *    padding（＝箱の実幅 1140px）だった。当テーマの各セクションは
 *    .width-max-1000 で 1000px に揃っており、Figma の箱幅も 1000px なので
 *    それに合わせている。ブレークポイントごとの padding-inline の上書きも
 *    不要になったので消した。
 *
 * 2. セクション背景
 *    asir は transparent で body の地色を透かしていたが、当テーマでは直上の
 *    section-05（メディア露出実績）が bg-white なので、地続きに見えるよう
 *    白を敷いている。Figma もこの部分は白。
 *
 * SP の値は Figma に PC しか無いため、asir の縮小率をそのまま踏襲している
 * （見出しだけは PC が 24px → 21px に下がったぶん、425px 以下も 18px → 16px）。
 */

.announcement-section,
.announcement-section * {
    box-sizing: border-box;
}

/* 背景は直上の section-05（メディア露出実績）と同じ白。
   透過にすると body の #f6f8f9 が出て、白いセクションとの境目に
   色の段差ができてしまう。 */
/* 上下の余白は前後のセクションと足し算になる。実際にボックスの周りに出る余白は
     上 = section-05 の padding-bottom (40px) + ここの padding-top (20px) = 60px
     下 = ここの padding-bottom (60px) + キャンペーンの padding-top (72px) = 132px
   片方だけ触るとバランスが崩れるので、変えるときは両方見ること。 */
.announcement-section {
    width: 100%;
    background-color: #fff;
    padding: 20px 0 60px;

    /* asir は body に line-height: 2 が効いている。行送りを明示していない
       要素がそれを継承して間延びするので、このセクション内だけ既定に戻す。 */
    line-height: normal;
}

/* 横方向の余白はこのコンテナだけが持つ。
   .announcement-section 側にも横 padding を持たせると二重にかかり、
   特に SP でボックスが細くなりすぎる。増やしたいときもここだけ触ること。

   1030px = 本文幅 1000px + 左右 15px。box-sizing: border-box なので
   中身がちょうど 1000px になり、他セクションの
   .width-max-1000 + .padding-left-15-sp / .padding-right-15-sp と幅が揃う。
   1030px を下回る画面では、この 15px がそのまま画面端との余白になる。 */
.announcement-container {
    width: 100%;
    max-width: 1030px;
    margin: 0 auto;
    padding-inline: 15px;
}

/* text-align: center は更新日と見出し用。本文は __content p 側で左揃えに戻す。
   padding は Figma 実測（上 33 / 左右 40 / 下 30）。 */
.announcement-box {
    background-color: #E2EDF3;
    padding: 33px 40px 30px 40px;
    text-align: center;
    font-family: "Noto Serif JP", serif;
}

.announcement-box .update-date {
    font-size: 17px;
    font-weight: 600;
    color: #222;
    line-height: 1;
}

/* Figma は Noto Serif JP SemiBold。`bold` にすると 700 が当たって
   本文（600）より太くなるので、そちらと同じ 600 に揃えている。 */
.announcement-box .announcement-title {
    font-size: 21px;
    font-weight: 600;
    color: #222;
    line-height: 1.282;
    padding-top: 12px;
    padding-bottom: 22px;
}

.announcement-content {
    color: #222;
    line-height: 1.8;
}

.announcement-content-container {
    border-top: 1px solid #222;
    padding-top: 24px;
}

/* Figma は本文全体がひとつのテキストブロックで、行の間隔は行送り 1.8 だけで
   取っている。当テーマは1行 = 1段落で組んでいるので、段落の margin は 0 にして
   同じ見え方にする（間隔を足すと Figma より間延びする）。
   本文だけは左揃え（親の text-align: center は更新日と見出し用）。 */
.announcement-content p {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
    text-align: start;
}

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

/* 本文と注釈の間に空行1行ぶんの間隔を空ける。Figma もここは空行1行。
   28.8px = 本文 16px × 行送り 1.8。
   隣接セレクタなので、注釈が何行続いても最初の1つにだけ効く。 */
.announcement-content p:not(.announcement-note) + .announcement-note {
    margin-top: 28.8px;
}

/* 移植元は 1200 / 1024 / 768 / 600px でコンテナの横 padding を
   150 → 120 → 130 → 90 → 20px と刻んでいたが、当テーマは全幅で
   15px 固定にしたので、それらの上書きはすべて外してある。 */

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

    .announcement-content {
        padding-inline: 20px;
    }
}

@media screen and (max-width: 768px) {
    .announcement-content-container p {
        font-size: 13px;
    }

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

    /* PC と同じく空行1行ぶん。23.4px = 本文 13px × 行送り 1.8 */
    .announcement-content p:not(.announcement-note) + .announcement-note {
        margin-top: 23.4px;
    }
}

@media screen and (max-width: 600px) {
    .announcement-content {
        padding: 0;
    }
}

/* 見出しの縮小と罫線下の余白は 425px から。移植元（asir）に合わせてある。
   ここより上（426〜600px）では見出しは PC と同じ 21px のまま。
   16px は asir の縮小率（24px → 18px = 0.75）を新しい PC 値 21px に当てた値。 */
@media screen and (max-width: 425px) {
    .announcement-content-container {
        padding-top: 22px;
    }

    .announcement-box .announcement-title {
        font-size: 16px;
    }
}