/* ==========================================================
   日本酒101 配下ページ：福島の酒トリビア（trivia-fukushima）専用CSS
   ------------------------------------------------------------
   ・スキャフォールド/見出し/画像+本文/INDEX は sake-101_common.css を使用
     （sake-101__mv / index / container / stack / lr / h2 / marker 等）
   ・このファイルは trivia 固有（ネイビー和柄背景・白カード・締めブロック）のみ
   ・SP=1rem=100vw/375、PC(>=768px)=1rem=1px
   ========================================================== */

/* 本文セクション：ネイビー地＋網代文様（和柄）。左右にも余白（和柄の帯を見せる） */
.trivia-fukushima__section {
    padding: 40rem 15rem;
    background-color: #09204f;
    background-image: url(../img/sake-101/trivia-fukushima/bg_pattern.png);
    background-repeat: repeat;
    background-size: 168px 168px;
}
@media screen and (min-width: 768px) {
    .trivia-fukushima__section {
        /* PCは白カードを max-width で中央寄せしつつ、左右padding分は最低でも
           ネイビー帯を確保（幅が1200px未満に可変してもネイビーが消えないように） */
        padding: 60rem 20rem;
    }
}

/* 白カード（本文の器） */
.trivia-fukushima__card {
    max-width: 1200rem;
    margin: 0 auto;
    background: var(--color-neutral-100, #fff);
    padding: 60rem 15rem;   /* SP横paddingは15rem（PCは下の@mediaで80rem 20remに上書き） */
}
@media screen and (min-width: 768px) {
    .trivia-fukushima__card {
        /* max-width:1200px はPCで1rem=1pxのため1200remと同値＝不要。paddingのみ上書き */
        padding: 80rem 20rem;
    }
}

/* カード内のコンテンツ幅（830）。PCは1rem=1pxのため830remがそのまま830px＝PC上書き不要 */
.trivia-fukushima__inner {
    max-width: 830rem;
    margin: 0 auto;
}

/* アンカー遷移時にヘッダーへ潜らせない */
.trivia-fukushima__block {
    scroll-margin-top: 70px;
}

/* 中央寄せは共通CSS(sake-101_common.css)側で対応済み。ここではword-break:keep-all＋
   SP強制改行(br.sake-day__br--sp)で、クリーム箱を折返し後の行幅にハグさせる
   （SPは max-content が利用幅を超えると fit-content が利用幅にクランプされ箱が広がるため、
    wbr(折返し候補)ではなく br(強制改行)にして max-content=行幅にする）。PCは1行のまま。 */
.trivia-fukushima__section .sake-101__h2-text {
    word-break: keep-all;
}

/* 画像＋本文ブロックの本文は共通デフォルト（16rem/0.96px）をそのまま使用。
   締めブロックのみデザイン準拠で18rem/1.08px（下記 __closing-text で上書き）。 */

/* ==========================================================
   締めブロック（招き猫＋見出し＋本文／画像なし・中央寄せ）
   ========================================================== */
.trivia-fukushima__closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rem;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .trivia-fukushima__closing {
        gap: 40rem;
    }
}

/* 招き猫ロゴ：Figma実測でSP/PCとも240px固定（スケールしない） */
.trivia-fukushima__maneki {
    width: 240px;
}
.trivia-fukushima__maneki-img {
    display: block;
    width: 100%;
    height: auto;
}

/* 見出し＋本文（見出しは中央、本文は左寄せ・全幅） */
.trivia-fukushima__closing-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rem;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .trivia-fukushima__closing-body {
        gap: 20rem;
    }
}

/* 締めブロックの本文はデザイン準拠で18rem/1.08px。
   共通 .sake-101__lr-text(16rem/0.96px) が本CSSより後に読み込まれ同詳細度で勝つため、
   両クラス指定(詳細度0,2,0)で確実に上書きする。PCは1rem=1pxのため18remがそのまま18px＝PC上書き不要 */
.sake-101__lr-text.trivia-fukushima__closing-text {
    font-size: 18rem;
    line-height: 1.7;
    letter-spacing: 1.08px;
}