@charset "UTF-8";

/*
 * お知らせセクション
 *
 * the-math テーマ（math-course）の announcement セクションのデザインを移植したもの。
 * 参照元: math-course/assets/css/home-style.css `.announcement-*`
 *         math-course/assets/css/home-responsive.css
 *
 * 移植にあたっての差分:
 *   - フォントは Noto Serif JP ではなく、当テーマが既に使っている明朝スタック
 *     （.font-yumincho と同じ指定）を使う。新規ウェブフォントを増やさないため。
 *   - ブレークポイントは移植元の 1200 / 1024 / 768 / 600px をそのまま踏襲。
 *     当テーマの SP 境界（767px）とはずれるが、レイアウトの見え方を優先した。
 *   - 配色は移植元から変更している。
 *       セクション背景  #FDFDFD → transparent（MV と同じ body の色を透かす）
 *       ボックス背景    #F8F2DC → #F7F0E1
 */

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

/* 背景は MV セクションと揃える。MV 自身は背景を持たず body の色
   (style.css の #f6f8f9) がそのまま見えているので、こちらも透過にして
   同じ色を透かせる。#f6f8f9 を直接書かないのは、body 側の色を変えたときに
   ここだけ取り残されるのを避けるため。 */
/* 上下の余白は前後のセクションと足し算になる。実際にボックスの周りに出る余白は
     上 = MV の margin-bottom (20px) + ここの padding-top (20px) = 40px
     下 = ここの padding-bottom (60px) + キャンペーンの padding-top (72px) = 132px
   片方だけ触るとバランスが崩れるので、変えるときは両方見ること。 */
.announcement-section {
    width: 100%;
    background-color: transparent;
    padding: 20px 0 60px;

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

/* 横方向の余白はこのコンテナだけが持つ。
   .announcement-section 側にも横 padding を持たせると二重にかかり、
   特に SP でボックスが細くなりすぎる。増やしたいときもここだけ触ること。 */
.announcement-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: 150px;
}

/* text-align: center は更新日と見出し用。本文は __content p 側で左揃えに戻す。 */
.announcement-box {
    background-color: #F7F0E1;
    padding: 32px 42px 28px 42px;
    text-align: center;
    font-family: "Shippori Mincho B1", serif;
}

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

.announcement-box .announcement-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    padding-top: 10px;
    padding-bottom: 20px;
}

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

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

/* 段落は1行ずつなので、margin-bottom を 15px も取ると行の間隔が 40px 近くなって
   間延びする。行送りは 1.6 のまま、段落の余白だけ詰めている。
   最後の1行の余白はボックスの padding-bottom と二重になるので消す。
   本文だけは左揃え（親の text-align: center は更新日と見出し用）。 */
.announcement-content p {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    text-align: start;
}

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

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

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

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

@media screen and (max-width: 1024px) {
    /* 130px = 移植元の section 50px + container 80px。
       section 側の横 padding をやめた分をここに寄せてあるので、
       見た目の余白は移植元と同じ。 */
    .announcement-container {
        padding-inline: 130px;
    }

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

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

@media screen and (max-width: 768px) {
    /* 90px = 移植元の section 50px + container 40px。 */
    .announcement-container {
        padding-inline: 90px;
    }

    .announcement-content-container p {
        font-size: 13px;
    }

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

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

@media screen and (max-width: 600px) {
    /* SP はここが画面端からの唯一の余白になる。テーマの他セクションが
       padding-left-20-sp / padding-right-20-sp で片側 20px を取っているので
       それに合わせた。移植元は section と合わせて片側 40px だったが、
       ボックスが細くなりすぎるため 20px に詰めている。 */
    .announcement-container {
        padding-inline: 20px;
    }

    .announcement-content {
        padding: 0;
    }
}

/* 見出しの縮小と罫線下の余白は 425px から。移植元（darwin-biology の asir）に
   合わせてある。ここより上（426〜600px）では見出しは 24px のまま。 */
@media screen and (max-width: 425px) {
    .announcement-content-container {
        padding-top: 22px;
    }

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