@charset "UTF-8";

/**
 * ブロック用のスタイル（ブロックエディタの編集画面とフロントの両方に読み込む）
 * ブロックの「追加 CSS クラス」で付けたクラスの見た目をここに書くと、編集画面でも同じように表示される
 * 読み込みは machigoto-100.php の enqueue_block_assets
 */


/* ===== .remarks（HOME） ===== */

.wp-block-columns.remarks {
    width: 100%;
    max-width: 860px;
}

@media (min-width: 1024px) {
    .remarks_logo {
        position: sticky;
        top: 24px;
    }
}


@media (max-width: 1023px) {
    .remarks_logo img {
        width: 40%;
        max-width: 190px;
        margin: 0 auto;
    }
    .wp-block-columns.remarks .wp-block-column:last-child {
        order: -1;
    }
}

/* =========================================================
 * 商品紹介（HOME お披露目市など）
 * Snow Monkey Blocks「項目（自由入力）」に追加 CSS クラス product-info を付けたものを1商品として、
 * 中のブロックの並び順で見た目を決める（中のブロックにクラスを付ける必要はない）
 *   1つ目の画像        … 商品写真（左。正方形・角丸）
 *   2つ目の画像（任意） … 生産者の顔写真（商品写真の左下に重ねる）
 *   見出し             … 商品名
 *   見出しの次の段落    … 製造者名
 *   その次の段落        … 商品説明
 *   その次の段落（任意） … メッセージ
 *   グループ（任意）    … 購入特典（1つ目の段落が黄色のバッジ、2つ目が本文）
 * 画像は左に寄せ（float）、それ以外は右側に並べる
 * 対象は product-info を付けた「項目（自由入力）」だけ。付けていない項目（自由入力）やほかの種類の項目には効かない
 * ========================================================= */
.product-info .smb-items__item--free > .smb-items__item__body {
    --mg-product-photo: 25%;   /* 商品写真の幅（カードの幅に対する割合） */
    --mg-product-gap: 32px;    /* 写真とテキストの間 */

    display: flow-root;
}

.product-info .smb-items__item--free > .smb-items__item__body > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* テキスト側：写真の右に並べる */
.product-info .smb-items__item--free > .smb-items__item__body > :not(figure) {
    max-width: none;
    margin-right: 0 !important;
    margin-left: calc(var(--mg-product-photo) + var(--mg-product-gap)) !important;
}

/* 商品写真 */
.product-info .smb-items__item--free > .smb-items__item__body > figure:first-of-type {
    float: left;
    width: var(--mg-product-photo);
    margin: 0 !important;
}

.product-info .smb-items__item--free > .smb-items__item__body > figure:first-of-type img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 24px;
}

/* 顔写真：商品写真の幅の 30% */
.product-info .smb-items__item--free > .smb-items__item__body > figure:nth-of-type(2) {
    position: relative;
    z-index: 1;
    float: left;
    clear: left;
    width: calc(var(--mg-product-photo) * .3);
    margin: calc(var(--mg-product-photo) * -.2) 0 0 calc(var(--mg-product-photo) * .09) !important;
}

/*
 * PC・タブレット：顔写真を商品写真の内側、右上（右 12px・上 12px）に重ねる
 * 2枚の画像は親子ではなく兄弟なので、商品写真ではなくカード本体（.smb-items__item__body）を基準に absolute で置く
 * 商品写真はカード本体の左上にあるので、left の % （カード本体の幅が基準）で商品写真の右端に合わせる
 *   左からの位置 ＝ 商品写真の幅 − 顔写真の幅 − 12px
 * 大きさは 84px に固定（商品写真に合わせて大きくすると、商品が隠れてしまうため）
 */
@media (min-width: 640px) {
    .product-info .smb-items__item--free > .smb-items__item__body {
        position: relative;
    }

    .product-info .smb-items__item--free > .smb-items__item__body > figure:nth-of-type(2) {
        --mg-product-face-size: 84px;    /* 顔写真の大きさ（幅・高さ） */
        --mg-product-face-inset: 12px;   /* 商品写真のフチからの距離 */

        position: absolute;
        top: var(--mg-product-face-inset);
        left: calc(var(--mg-product-photo) - var(--mg-product-face-size) - var(--mg-product-face-inset));
        float: none;
        width: var(--mg-product-face-size);
        margin: 0 !important;
    }
}

.product-info .smb-items__item--free > .smb-items__item__body > figure:nth-of-type(2) img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* 商品名 */
.product-info .smb-items__item--free > .smb-items__item__body > h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.875rem);
    font-weight: 700;
    line-height: 1.3;
}

/* 製造者名 */
.product-info .smb-items__item--free > .smb-items__item__body > h3 + p {
    font-size: 1.05rem;
}

/* 商品説明 */
.product-info .smb-items__item--free > .smb-items__item__body > h3 + p + p {
    margin-top: 1.25em;
    line-height: 1.8;
    letter-spacing: .05em;
}

/* メッセージ */
.product-info .smb-items__item--free > .smb-items__item__body > h3 + p + p + p {
    margin-top: 1.75em;
    font-size: .95rem;
    line-height: 2;
}

/* 購入特典 */
.product-info .smb-items__item--free > .smb-items__item__body > .wp-block-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 1.25em;
    font-size: .95rem;
    line-height: 1.6;
}

.product-info .smb-items__item--free > .smb-items__item__body > .wp-block-group > p {
    margin: 0;
}

.product-info .smb-items__item--free > .smb-items__item__body > .wp-block-group > p:first-child {
    flex-shrink: 0;
    box-sizing: border-box;
    /* width: calc(2em + 12px);   「購入／特典」の2行にする */
    padding: 4px 12px;
    border-radius: 4px;
    background: #e8b33a;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;   /* PC・タブレットは1行（スマホは下で2行に） */
}

@media (min-width: 1024px) {
    .col-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(9, auto);
        grid-auto-flow: column;
        gap: 10px 20px;
        list-style: none;
        padding: 0;
        margin: 0;
    }
}
/*
 * スマホ：商品写真と顔写真を横に並べ、その下にテキスト
 * 顔写真は商品写真の右隣。商品写真に「顔写真の幅の 20%」だけ食い込ませ、下端をそろえる
 * 2枚合わせて全幅になるよう、商品写真の幅を決める：写真 ＋ 顔写真（写真 × .3）− 食い込み（写真 × .06）＝ 写真 × 1.24 ＝ 100%
 */
@media (max-width: 639px) {
    .product-info .smb-items__item--free > .smb-items__item__body {
        --mg-product-photo: calc(100% / 1.24);
        --mg-product-gap: 24px;
    }

    .product-info .smb-items__item--free > .smb-items__item__body > figure:nth-of-type(2) {
        clear: none;
        margin: calc(var(--mg-product-photo) * .7) 0 0 calc(var(--mg-product-photo) * -.06) !important;
    }

    .product-info .smb-items__item--free > .smb-items__item__body > :not(figure) {
        margin-left: 0 !important;
    }

    /* 写真の下から始める（clear だと margin-top が効かないため、間は padding で空ける） */
    .product-info .smb-items__item--free > .smb-items__item__body > h3 {
        clear: both;
        padding-top: var(--mg-product-gap);
    }

    /* 購入特典のバッジ：2文字幅にして「購入／特典」の2行にする */
    .product-info .smb-items__item--free > .smb-items__item__body > .wp-block-group > p:first-child {
        width: calc(2em + 12px);
        padding: 4px 6px;
        white-space: normal;
    }
}


/* =========================================================
 * 晴れまちの紹介（.sec_haremachi）
 * グループ（横並び）の中に、ロゴ画像（幅 200px 固定）と、見出し・段落のグループ
 * スマホ：縦並びにして、画像をテキストの上・中央に
 * ========================================================= */
@media (max-width: 639px) {
    /* ブロックの「上揃え」設定（align-items: flex-start）より優先させるため .is-layout-flex を重ねる */
    .sec_haremachi.is-layout-flex {
        flex-direction: column;
        align-items: center;
    }

    /* 縦並びでは幅 200px 固定の指定が「高さ」に効いてしまうため、幅として指定し直す */
    .sec_haremachi > .wp-block-image {
        flex-basis: auto !important;
        width: 200px;
        max-width: 100%;
    }

    /* テキストは全幅 */
    .sec_haremachi > .wp-block-group {
        align-self: stretch;
    }
}


/* =========================================================
 * 晴れまち認定品のリスト（ul.haremachi-list）
 * 各項目の先頭に、文字と同じくらいの大きさの丸印（#df6a63）
 * 2行になったときは、2行目も丸印の右から始まる
 * ========================================================= */
.haremachi-list {
    --mg-haremachi-dot: 1em;         /* 丸印の大きさ */
    --mg-haremachi-dot-gap: .5em;    /* 丸印と文字の間 */

    list-style: none;
    padding-left: 0;
}

.haremachi-list > li {
    position: relative;
    padding-left: calc(var(--mg-haremachi-dot) + var(--mg-haremachi-dot-gap));
}

.haremachi-list > li::before {
    content: "";
    position: absolute;
    top: calc(.5lh - var(--mg-haremachi-dot) / 2);   /* 1行目の高さの中央 */
    left: 0;
    width: var(--mg-haremachi-dot);
    height: var(--mg-haremachi-dot);
    border-radius: 50%;
    background: #df6a63;
}


/* =========================================================
 * 鉛筆で書いたような表の線（追加 CSS クラス pencil_border を付けた表）
 * Flexible Table Block・標準の表ブロックの両方に対応
 * 線を引く位置・太さは表ブロックの設定のまま。元の線は透明にし、
 * 同じ位置に鉛筆用の SVG フィルター（#pencil-line、functions/block-styles.php）をかけた線を重ねる
 * ========================================================= */
.pencil_border {
    --mg-pencil-color: #7a7a7a;                     /* 鉛筆の線の色（表の本文のセル・見出し・ボックスなど、すべての線） */
    --mg-pencil-color-dark: rgba(255, 255, 255, 1);  /* 背景が濃いセル（濃い青の見出しなど）の線の色 */
}

.pencil_border :is(th, td) {
    position: relative;
    border-color: transparent !important;
}

/*
 * 隣り合うセルの線は1本にまとまっている（border-collapse: collapse）ため、
 * 各セルは「右・下」だけを描き、表の一番上の行は「上」、一番左の列は「左」も描く（両方が描くと二重線になる）
 * 線はセルの境目の中心に来るよう、少し外側（0.5px）に広げて描く
 */
.pencil_border :is(th, td)::after {
    content: "";
    position: absolute;
    inset: -.5px;
    border-style: solid;
    border-width: inherit;   /* 表ブロックで設定した線の太さ（線なしの辺は 0） */
    border-top-width: 0;
    border-left-width: 0;
    border-color: var(--mg-pencil-color);
    filter: url(#pencil-line);
    pointer-events: none;
}

.pencil_border table > :first-child > tr:first-child > :is(th, td)::after {
    border-top-width: inherit;
}

.pencil_border tr > :first-child::after {
    border-left-width: inherit;
}

/* 背景が濃いセルだけ白い線（判定は assets/js/pencil-border.js がクラス mg-pencil-on-dark で付ける）。ほかの th は td と同じ色 */
.pencil_border :is(th, td).mg-pencil-on-dark::after {
    border-color: var(--mg-pencil-color-dark);
}

/*
 * 表以外：.pencil_border の中で線のある要素（見出し・ボックスなど）
 * assets/js/pencil-border.js が要素を探してクラス mg-pencil を付ける
 * 元の線は透明にして、同じ太さ・線種・角丸の線を、鉛筆の色（--mg-pencil-color）で ::after（使用中なら ::before）に描く
 */
.mg-pencil {
    border-color: transparent !important;
}

.mg-pencil--static {
    position: relative;
}

.mg-pencil--after::after,
.mg-pencil--before::before {
    content: "";
    position: absolute;
    inset: 0;
    border-style: inherit;
    border-width: inherit;
    border-radius: inherit;
    border-color: var(--mg-pencil-color, #7a7a7a);   /* .pencil_border の外（最近の投稿など）は #7a7a7a */
    filter: url(#pencil-line);
    pointer-events: none;
}

/*
 * SMB ボックス：ブロックの設定で線の色を選んだときは、その色の鉛筆線にする（選んでいなければ鉛筆の色のまま）
 * 選んだ色はブロックの style 属性に --smb-box--border-color として入る（変数には SMB の初期値もあるため、style 属性で判定）
 */
.smb-box[style*="--smb-box--border-color"] > .smb-box__background.mg-pencil--after::after,
.smb-box[style*="--smb-box--border-color"] > .smb-box__background.mg-pencil--before::before {
    border-color: var(--smb-box--border-color);
}