@charset "UTF-8";

/**
 * 買い物の物語スライドショー [story]
 * .is-js はショートコード直後のスクリプトで付与（JS無効時は1件目だけ表示）
 */


.mg-story {
    /* ノートの設定（行間と罫線の間隔は同じ値で揃える） */
    --mg-story-line: 2.4em;                     /* 行間＝罫線の間隔 */
    --mg-story-pad: 1em;                        /* 内側の余白（上下左右） */
    --mg-story-paper: #f4f4f4;                  /* 紙の色 */
    --mg-story-rule: rgba(110, 140, 170, .35);  /* 罫線の色 */
    --mg-story-age: rgba(202, 199, 195, 0.16);    /* 日焼け・シミの色 */

    font-family: "Zen Kurenaido", sans-serif;   /* 手書き風（Google Fonts） */
    border: 1px solid #ccc;
    padding: var(--mg-story-pad);
    width: 100%;
    height: auto;
    max-width: 700px;
    margin: 0 auto;

    /* 古びたノート：上から 罫線 → 紙の粒子 → シミ → 縁の日焼け → 紙の色 */
    background-color: var(--mg-story-paper);
    background-image:
        linear-gradient(to bottom, transparent calc(100% - 1px), var(--mg-story-rule) calc(100% - 1px)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 18% 12% at 82% 78%, var(--mg-story-age), transparent 70%),
        radial-gradient(ellipse 10% 8% at 12% 18%, var(--mg-story-age), transparent 70%),
        radial-gradient(ellipse at center, transparent 55%, var(--mg-story-age) 100%);
    background-size:
        100% var(--mg-story-line),
        240px 240px,
        100% 100%,
        100% 100%,
        100% 100%;
    background-position:
        0 var(--mg-story-pad),
        0 0,
        0 0,
        0 0,
        0 0;
    background-repeat: repeat-y, repeat, no-repeat, no-repeat, no-repeat;
    box-shadow: 0 1px 2px rgba(80, 60, 30, .12), 0 6px 24px rgba(80, 60, 30, .10);

    overflow-wrap: anywhere; /* 収まらない場合に折り返す */
    word-break: normal; /* 単語の分割はデフォルトに依存 */
    line-break: strict; /* 禁則処理を厳格に適用 */


}

.mg-story__item {
    margin: 0;
    line-height: var(--mg-story-line);
}

/*
 * 行間＝罫線の間隔を整数の px に丸める（2.4em × 16px = 38.4px → 38px など）
 * 端数があると、iPhone の Safari では罫線（背景の繰り返し）と文字の行の丸め方が違い、下へ行くほど少しずつずれるため
 * round() に対応していないブラウザは 2.4em のまま
 */
@supports (width: round(1.5px, 1px)) {
    .mg-story {
        --mg-story-line: round(2.4em, 1px);
    }
}

.mg-story:not(.is-js) .mg-story__item:not(:first-child) {
    display: none;
}

/* 全件を同じ位置に重ねる（高さは一番長い物語に合わせて固定され、切り替えで高さが変わらない） */
.mg-story.is-js {
    display: grid;
}

.mg-story.is-js .mg-story__item {
    grid-area: 1 / 1;
    visibility: hidden;
}

/* 1文字ずつのアニメーション用 */
.mg-story__char {
    display: inline-block;
}

@media (min-width: 768px) {
    .mg-story {
        font-size: 18px;
        /* transform: rotate(-1.5deg); */
    }
}
@media (max-width: 767px) {
    .mg-story {
        font-size: 16px;
    }
}