:root {
    --pmn-color-primary: #70311C;
    --pmn-color-secondary: #FFE102;
    --pmn-color-secondary-dark: #F9DA00;
    --pmn-color-bg: #FFF6E9;
    --pmn-color-white: #FFFFFF;
    --pmn-color-accent: oklch(0.6188 0.2361 31.75);
    --pmn-color-accent-dark: oklch(0.5588 0.2361 31.75);
    --pmn-color-scene: #5FC6D5;
    --pmn-color-scene-01: #E5536D;
    --pmn-color-scene-02: #5FC6D5;
    --pmn-color-scene-03: #95CA67;
    --pmn-color-story: #95CA67;
    --pmn-color-scenes: #FF9D10;

    --pmn-font-kaku: "Zen Kaku Gothic New", sans-serif;
    --pmn-font-maru: "Zen Maru Gothic", sans-serif;

    --pmn-min-design-size: 375;
    --pmn-max-design-size: 778;
    /* 流体タイポ用（上記 375 / 778 から算出した px 値） */
    --pmn-min-vw: 375px;
    --pmn-vw-range: 403px;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.block {
    display: block;
}
.text-red {
    color: #DE374F;
}

@media not screen and (max-width: 959px) {
    .md\:inline {
        display: inline;
    }

    .md\:inline-block {
        display: inline-block;
    }
}

.PretzelMixNuts {
    max-width: 778px;
    margin-inline: auto;
    font-family: var(--pmn-font-maru);
    font-weight: 700;
    color: var(--pmn-color-primary);
    container: --pmn-container / inline-size;
    overflow-x: clip;

    img {
        height: auto;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        font-weight: 700;
        line-height: 1.5;
    }
}

.PretzelMixNuts__header {
    overflow-x: clip;

    @media (max-width: 959px) {
        margin-bottom: 8%;
    }
}

.PretzelMixNuts__mainVisual {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-areas: "mainImage";
    place-items: center;
    height: auto;
    aspect-ratio: 259 / 211;

    >img {
        grid-area: mainImage;
    }

    .PretzelMixNuts__massage {
        display: block;
        height: 69%;
        width: auto;
        margin-left: auto;
        margin-right: 10%;
    }
}

.PretzelMixNuts__headerMain {
    position: relative;
    margin-top: -15%;
    padding-top: 1px;
    background:
        url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/main-cloud.svg") center 1px / 100% auto no-repeat,
        linear-gradient(#fff, #fff) center calc(100cqw * 117 / 778) / 100% 100% no-repeat;
}

.PretzelMixNuts__logo {
    position: relative;
    width: 70%;
    margin-top: -6%;
    margin-inline: auto;
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.PretzelMixNuts__logoImage--balloon1,
.PretzelMixNuts__logoImage--balloon2 {
    position: absolute;
    top: 20%;
    width: 20%;
}

.PretzelMixNuts__logoImage--balloon1 {
    left: -15%;

    &.animated {
        animation: balloonKari 6s 3s infinite;
    }
}

.PretzelMixNuts__logoImage--balloon2 {
    right: -15%;

    &.animated {
        animation: balloonFuwa 5s 6s infinite;
    }
}

@keyframes balloonKari {

    0%,
    12%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    2% {
        transform: translate(-8px, -5px) rotate(-12deg) scale(0.9);
    }

    4% {
        transform: translate(6px, 3px) rotate(10deg) scale(1.05);
    }

    6% {
        transform: translate(-5px, -8px) rotate(-8deg) scale(0.95);
    }

    8% {
        transform: translate(4px, 1px) rotate(5deg) scale(1.05);
    }

    10% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

@keyframes balloonFuwa {

    0%,
    15%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    3% {
        transform: translate(-10px, 15px) rotate(4deg) scale(0.9);
    }

    7% {
        transform: translate(5px, -10px) rotate(-3deg) scale(1.05);
    }

    12% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

.PretzelMixNuts__text {
    --min-font-size: 14px;
    --max-font-size: 18px;

    width: fit-content;
    margin-inline: auto;
    text-align: center;
    color: var(--pmn-color-primary);
    line-height: 1.7;
    font-size: clamp(var(--min-font-size), calc(var(--min-font-size) + (var(--max-font-size) - var(--min-font-size)) * ((100vw - var(--pmn-min-vw)) / var(--pmn-vw-range))), var(--max-font-size));
}

.PretzelMixNuts__hashList {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 40px;
}

.PretzelMixNuts__hashItem {
    padding: 6px 14px;
    border: 2px solid var(--pmn-color-primary);
    border-radius: 100vw;
    background-color: var(--pmn-color-secondary);
    font-family: var(--pmn-font-kaku);
    font-weight: bold;
    color: var(--pmn-color-primary);
    font-size: 15px;
}

.PretzelMixNuts__purchaseButton {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    max-width: 354px;
    width: 88%;
    height: 70px;
    margin-inline: auto;
    padding: 10px 19px;
    letter-spacing: .15em;
    border: 2px solid var(--pmn-color-white);
    border-radius: 100vw;
    background-color: var(--pmn-color-accent);
    font-size: 22px;
    font-weight: bold;
    color: var(--pmn-color-white);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    transition: background-color 0.3s ease-out, filter 0.3s ease-out;

    &::after {
        content: "";
        display: inline-block;
        width: 17px;
        height: 11px;
        background-color: var(--pmn-color-white);
        transform: translateY(1px);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        transition: transform 0.3s ease-out;
        animation: arrowDownMove 3s infinite;
    }

    @media (hover: hover) {
        &:hover {
            color: var(--pmn-color-white);
            opacity: 1;
            background-color: var(--pmn-color-accent-dark);
            filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.35));

            &::after {
                transform: translateY(4px);
                animation: none;
            }
        }
    }
}

@keyframes arrowDownMove {

    0%,
    10%,
    20%,
    50%,
    100% {
        translate: 0 1px;
    }

    5%,
    15% {
        translate: 0 4px;
    }
}

.PretzelMixNuts__textBox {
    position: relative;
}

.PretzelMixNuts__decoration1 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 155px;
    translate: -32% 14%;
    animation: mainRotate 10s infinite 5s steps(1);

    @media (max-width: 959px) {
        display: none;
    }
}

.PretzelMixNuts__decoration2 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 171px;
    translate: 27% 15%;
    animation: mainRotate 9s infinite 9s steps(1);

    @media (max-width: 959px) {
        display: none;
    }
}

@keyframes mainRotate {
    0% {
        transform: rotate(0deg);
    }

    5% {
        transform: rotate(0deg);
    }

    5% {
        transform: rotate(10deg);
    }

    10% {
        transform: rotate(10deg);
    }

    10% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(10deg);
    }

    20% {
        transform: rotate(10deg);
    }

    20% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.PretzelMixNuts__scene {
    margin-top: max(-20%, -120px);
    padding-top: max(15%, 90px);
    padding-bottom: 60%;
    background: var(--pmn-color-secondary) url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/patturn-recommend.png") repeat center/78px 75px;
    padding-inline: 5%;
    -webkit-mask-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/scene-bg-mask.svg"), linear-gradient(transparent calc(100cqw * 69 / 777 - 1px), #000 calc(100cqw * 69 / 777 - 1px));
    -webkit-mask-size: 100% calc(100cqw * 69 / 777), 100% 100%;
    -webkit-mask-position: top center, top;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: source-over;
    mask-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/scene-bg-mask.svg"), linear-gradient(transparent calc(100cqw * 69 / 777 - 1px), #000 calc(100cqw * 69 / 777 - 1px));
    mask-size: 100% calc(100cqw * 69 / 777), 100% 100%;
    mask-position: top center, top;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: add;
}

.PretzelMixNuts__title {
    --min-font-size: 21px;
    --max-font-size: 32px;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    aspect-ratio: 494 / 121;
    margin-inline: auto;
    padding: .5em 1.65em .8em;
    font-weight: bold;
    color: var(--pmn-color-primary);
    font-size: clamp(var(--min-font-size), calc(var(--min-font-size) + (var(--max-font-size) - var(--min-font-size)) * ((100vw - var(--pmn-min-vw)) / var(--pmn-vw-range))), var(--max-font-size));
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDk0IiBoZWlnaHQ9IjEyMSIgdmlld0JveD0iMCAwIDQ5NCAxMjEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00ODMuMTI4IDAuMDAzNDE3OTdDNDgzLjc3MSAtMC4wMzcwMDc2IDQ4NC4zOTIgMC4yMTI0NzcgNDg0LjgzMiAwLjY4NzAxMkw0OTMuNDI0IDkuOTczMTRMNDkxLjg1NCAxMS40NDY4TDQ5My40MjUgOS45NzMxNEM0OTMuODU4IDEwLjQ0MiA0OTQuMDYyIDExLjA3NTQgNDkzLjk4NCAxMS43MTE0TDQ4NC41NzIgODguNjU4N0M0ODQuNDQ1IDg5LjY5NDYgNDgzLjYwOSA5MC40ODcgNDgyLjU3NSA5MC41NTIyTDI1MC40NTIgMTA1LjEwNUwyNDEuMTk4IDExOS45ODVDMjQwLjgxNyAxMjAuNTk3IDI0MC4xNTggMTIwLjk3OCAyMzkuNDQgMTIwLjk5OUMyMzguNzIyIDEyMS4wMTkgMjM4LjA0MiAxMjAuNjc5IDIzNy42MjcgMTIwLjA4OUwyMzIuMDY2IDExMi4xOThMMjI4LjA2MSAxMDYuNTA5TDEwLjg3NiAxMjAuMTI2QzEwLjIzMiAxMjAuMTY2IDkuNjEwODUgMTE5LjkxNyA5LjE3MTg4IDExOS40NDNMMC41NzcxNDggMTEwLjE2MkMwLjE0MjQ5IDEwOS42OTIgLTAuMDYxNzI5OSAxMDkuMDU5IDAuMDE2NjAxNiAxMDguNDIyTDkuNDI5NjkgMzEuNDcyMkM5LjU1NTA5IDMwLjQ0MjMgMTAuMzk3NCAyOS42NDMzIDExLjQyNjggMjkuNTc4Nkw0ODMuMTI4IDAuMDAzNDE3OTdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K") no-repeat center/contain;
    filter: drop-shadow(9px 9px 0 var(--pmn-color-primary));

    &::after {
        /* content: ''; */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/title-balloon-shadow.svg) no-repeat center/contain;
        translate: 10px 10px;
    }

}

.PretzelMixNuts__title--recommend {
    .PretzelMixNuts__titleText {
        rotate: -3.07deg;
    }

}

.PretzelMixNuts__titleText {
    display: inline-block;
    rotate: -7.19deg;
}

.PretzelMixNuts__sceneList {
    margin-top: 40px;
}

.PretzelMixNuts__sceneItem {
    position: relative;
    display: flex;
    align-items: center;

    @media (max-width: 768px) {
        flex-direction: column;
        margin-bottom: 2em;
    }

    &:nth-of-type(even) {
        flex-direction: row-reverse;

        @media (max-width: 768px) {
            display: block;
            margin-bottom: 2em;
        }

        .PretzelMixNuts__sceneBody {
            padding: 31px 12px 31px 43%;

            @media (max-width: 768px) {
                padding: 31px 12px 31px 12px;
            }
        }

        .PretzelMixNuts__sceneNumber {
            left: unset;
            right: 0;
            translate: -10px -50%;
        }

        .PretzelMixNuts__sceneImage {
            margin-left: 0;
            margin-right: auto;
        }
    }
}

.PretzelMixNuts__sceneBody {
    position: absolute;
    width: 90%;
    padding: 31px 43% 31px 12px;
    text-align: center;
    border: 7px solid var(--pmn-color-scene);
    border-radius: 32px;
    color: var(--pmn-color-primary);
    background-color: var(--pmn-color-white);
    background-repeat: repeat;
    background-image: radial-gradient(circle, #e4f2f1 2px, transparent 2px), radial-gradient(circle, #e4f2f1 2px, transparent 2px);
    background-position: 0 0, 7px 14px;
    background-size: 14px 28px;

    @media (max-width: 768px) {
        position: relative;
        width: 100%;
        padding: 31px 12px 31px 12px;
    }
}

.PretzelMixNuts__sceneImage {
    z-index: 1;
    width: 54%;
    margin-left: auto;
    border-radius: 50%;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow 0.4s;

    &.is-shadow {
        box-shadow: 10px 10px 0 var(--pmn-color-scene-01);
    }

    .PretzelMixNuts__scenePhoto {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    &.PretzelMixNuts__sceneImage--02 {
        &.is-shadow {
            box-shadow: -10px 10px 0 var(--pmn-color-scene-02);
        }
    }

    &.PretzelMixNuts__sceneImage--03 {
        &.is-shadow {
            box-shadow: 10px 10px 0 var(--pmn-color-scene-03);
        }
    }

    @media (max-width: 768px) {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        z-index: 1;
    }

}

.PretzelMixNuts__sceneNumber {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: auto;
    aspect-ratio: 1;
    padding-bottom: .2em;
    background-color: var(--pmn-color-scene);
    color: var(--pmn-color-white);
    font-weight: bold;
    font-size: 39px;
    border-radius: 50%;
    translate: 10px -50%;
}

.PretzelMixNuts__sceneName {

    font-weight: bolder;
    font-size: 26px;
}

.PretzelMixNuts__sceneLead {
    font-weight: bolder;
    font-size: 16px;

}

.PretzelMixNuts__sceneText {
    margin-top: 10px;
}

/* ナッツ素材ライン装飾 */
.PretzelMixNuts__recommendDecorations {
    position: relative;
    width: 100%;
    aspect-ratio: 768 / 187;
    z-index: 1;
}

.PretzelMixNuts__recommendDecoration {
    position: absolute;
    display: block;
    height: auto;
}

.PretzelMixNuts__recommendDecoration--01 {
    /* バナナ */
    left: 0%;
    top: 21%;
    width: 21.2%;
    filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.14));
    animation: decoHop 10s 0s infinite steps(1, end);
}

.PretzelMixNuts__recommendDecoration--02 {
    /* チョコ */
    left: 20.8%;
    top: 24.4%;
    width: 5.6%;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.25));
    animation: decoSpin 10s 3.5s infinite steps(1, end);
}

.PretzelMixNuts__recommendDecoration--03 {
    /* アーモンド */
    left: 23.8%;
    top: 30.3%;
    width: 17.2%;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
    animation: decoShake 10s 1.2s infinite steps(1, end);
}

.PretzelMixNuts__recommendDecoration--04 {
    /* チョコ */
    left: 42.1%;
    top: 45.8%;
    width: 5.6%;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.25));
    animation: decoHop 10s 5.8s infinite steps(1, end);
}

.PretzelMixNuts__recommendDecoration--05 {
    /* マシュマロ */
    left: 51.3%;
    top: 21.8%;
    width: 13.9%;
    animation: decoWobble 10s 2.5s infinite steps(1, end);
}

.PretzelMixNuts__recommendDecoration--06 {
    /* チョコ */
    left: 62.4%;
    top: 56.5%;
    width: 5.6%;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.25));
    animation: decoShake 10s 7.2s infinite steps(1, end);
}

.PretzelMixNuts__recommendDecoration--07 {
    /* プレッツェル */
    left: 67.6%;
    top: 24.4%;
    width: 15%;
    filter: drop-shadow(-4px 3px 6px rgba(0, 0, 0, 0.15));
    animation: decoSpin 10s 4.3s infinite steps(1, end);
}

.PretzelMixNuts__recommendDecoration--08 {
    /* チョコ */
    left: 78.6%;
    top: 4.1%;
    width: 5.6%;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.25));
    animation: decoWobble 10s 8.5s infinite steps(1, end);
}

.PretzelMixNuts__recommendDecoration--09 {
    /* ドライフルーツ */
    left: 86.6%;
    top: 0%;
    width: 13.4%;
    filter: drop-shadow(3.5px 3.5px 5.2px rgba(0, 0, 0, 0.15));
    animation: decoHop 10s 6.5s infinite steps(1, end);
}

/* ぴょんと跳ねる */
@keyframes decoHop {

    0%,
    6%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    1% {
        transform: translate(0, -6px) rotate(-3deg);
    }

    2% {
        transform: translate(2px, -10px) rotate(4deg);
    }

    3% {
        transform: translate(-1px, -4px) rotate(-2deg);
    }

    4% {
        transform: translate(1px, -8px) rotate(3deg);
    }

    5% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* 左右に揺れる */
@keyframes decoShake {

    0%,
    6%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    1% {
        transform: translate(-5px, 0) rotate(-5deg);
    }

    2% {
        transform: translate(4px, 0) rotate(6deg);
    }

    3% {
        transform: translate(-3px, 0) rotate(-4deg);
    }

    4% {
        transform: translate(3px, 0) rotate(3deg);
    }

    5% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* 回転ガクッ */
@keyframes decoSpin {

    0%,
    6%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    1% {
        transform: rotate(-12deg) scale(0.95);
    }

    2% {
        transform: rotate(10deg) scale(1.05);
    }

    3% {
        transform: rotate(-8deg) scale(0.97);
    }

    4% {
        transform: rotate(5deg) scale(1.02);
    }

    5% {
        transform: rotate(0deg) scale(1);
    }
}

/* ぷるぷる */
@keyframes decoWobble {

    0%,
    6%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    1% {
        transform: translate(-2px, -3px) scale(1.06, 0.94);
    }

    2% {
        transform: translate(3px, 2px) scale(0.94, 1.06);
    }

    3% {
        transform: translate(-2px, -1px) scale(1.04, 0.96);
    }

    4% {
        transform: translate(1px, 2px) scale(0.97, 1.03);
    }

    5% {
        transform: translate(0, 0) scale(1);
    }
}

/* Story この商品を作った理由 */
.PretzelMixNuts__storyBehindText {
    position: relative;
    z-index: 2;
    margin-bottom: calc(-100cqw * 114 / 778);
    padding-bottom: 1px;
    pointer-events: none;
    overflow: visible;
}

.PretzelMixNuts__storyBehindArrow {
    text-align: center;
    margin-top: 48px;

    @media (max-width: 959px) {
        margin-top: 32px;
    }
}

.PretzelMixNuts__storyBehindTextImage {
    animation: storyArrowKnock 3s infinite steps(1, end);
}

@keyframes storyArrowKnock {

    0%,
    20%,
    100% {
        transform: translateY(0);
    }

    5% {
        transform: translateY(5px);
    }

    10% {
        transform: translateY(0);
    }

    15% {
        transform: translateY(5px);
    }
}

.PretzelMixNuts__storyBehindTextSvg:not(:root) {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -60%;
    overflow: visible;
}

.PretzelMixNuts__storyBehindTextPath {
    font-family: var(--pmn-font-maru);
    font-weight: 700;
    font-size: 44px;
    letter-spacing: 0.05em;
    fill: white;
}

.PretzelMixNuts__story {
    position: relative;
    z-index: 1;
    margin-top: -16%;
    padding: 39px;
    padding-top: calc(100cqw * 114 / 778 + 20px);
    padding-bottom: calc(100cqw * 114 / 778 + 20px);
    background:
        url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/story-bg-top-border.svg") top center / 100% calc(100cqw * 138 / 778) no-repeat,
        url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/story-bg-bottom-border.svg") bottom center / 100% calc(100cqw * 138 / 778) no-repeat,
        url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/patturn-story.png") repeat center / 134px 128px,
        var(--pmn-color-story);
    -webkit-mask-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/story-bg-top.svg"), linear-gradient(transparent calc(100cqw * 114 / 778 - 1px), #000 calc(100cqw * 114 / 778 - 1px), #000 calc(100% - 100cqw * 114 / 778 + 1px), transparent calc(100% - 100cqw * 114 / 778 + 1px)), url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/story-bg-bottom.svg");
    -webkit-mask-size: 100% calc(100cqw * 114 / 778), 100% 100%, 100% calc(100cqw * 114 / 778);
    -webkit-mask-position: top center, top, bottom center;
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
    -webkit-mask-composite: source-over;
    mask-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/story-bg-top.svg"), linear-gradient(transparent calc(100cqw * 114 / 778 - 1px), #000 calc(100cqw * 114 / 778 - 1px), #000 calc(100% - 100cqw * 114 / 778 + 1px), transparent calc(100% - 100cqw * 114 / 778 + 1px)), url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/story-bg-bottom.svg");
    mask-size: 100% calc(100cqw * 114 / 778), 100% 100%, 100% calc(100cqw * 114 / 778);
    mask-position: top, top, bottom;
    mask-repeat: no-repeat, no-repeat, no-repeat;
    mask-composite: add;

    @media (max-width: 959px) {
        padding: 15% 3% calc(20% + 30px);
    }
}

.PretzelMixNuts__title--story {
    --min-font-size: 26px;

    aspect-ratio: 171 / 72;
    background-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/title-balloon-story.svg");

    .PretzelMixNuts__titleText {
        rotate: -6.82deg;
    }
}

.PretzelMixNuts__storyBg {
    position: absolute;
    left: -5%;
    bottom: 0;
    width: 25%;
    height: auto;
    pointer-events: none;

    @media (max-width: 959px) {
        display: none;
    }
}

.PretzelMixNuts__storyProduct {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    display: block;
    width: 40%;
    max-width: 330px;
    height: auto;
    pointer-events: none;

    @media (max-width: 959px) {
        display: none;
    }
}

.PretzelMixNuts__storyHgroup {
    position: relative;

}

.PretzelMixNuts__storyTitle {
    margin-top: 26px;
    font-size: 32px;
    text-align: center;

    @media (max-width: 959px) {
        margin-top: 16px;
    }
}

.PretzelMixNuts__storyBox {
    margin-top: 48px;
    padding: 39px 32px;
    background-color: #FFFCBC;
    border-radius: 37px;

    @media (max-width: 959px) {
        margin-top: 26px;
        padding: 36px 3%;
    }

}

.PretzelMixNuts__storyBoxTitle {
    --min-font-size: 22px;
    --max-font-size: 24px;

    font-weight: 700;
    font-size: clamp(var(--min-font-size), calc(var(--min-font-size) + (var(--max-font-size) - var(--min-font-size)) * ((100vw - var(--pmn-min-vw)) / var(--pmn-vw-range))), var(--max-font-size));
}

.PretzelMixNuts__storyBoxText {
    margin-top: 1em;
    font-size: clamp(14px, calc(14px + 2 * ((100vw - var(--pmn-min-vw)) / var(--pmn-vw-range))), 16px);
    font-weight: 500;
    line-height: 1.5625;
    letter-spacing: 0.02em;
    color: #7B441C;
}

.PretzelMixNuts__storyAnswer {
    /* margin-top: 48px; */

    @media (max-width: 959px) {
        /* margin-top: 30px; */
    }
}

.PretzelMixNuts__storyArrow {
    display: block;
    margin-inline: auto;
}

.PretzelMixNuts__storyAnswerTitle:not(:root) {
    margin-top: 24px;
    font-size: 28px;
    text-align: center;
    line-height: 1.2;

    @media (max-width: 959px) {
        margin-top: 20px;
    }
}

.PretzelMixNuts__storyBalloon {
    display: flex;
    align-items: center;
    gap: 43px;
    width: 95%;
    max-width: 646px;
    margin-top: 24px;
    margin-inline: auto;

    @media (max-width: 959px) {
        flex-direction: column;
        gap: 0;

    }
}

.PretzelMixNuts__storyIcon {
    flex-shrink: 0;
    width: 78px;
    z-index: 1;
}

.PretzelMixNuts__storyBalloonBody {
    position: relative;
    padding: 31px 30px;
    background-color: var(--pmn-color-white);
    border-radius: 14px;

    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 1px;
        translate: -100% -50%;
        width: 24px;
        height: 40px;
        background-color: var(--pmn-color-white);
        clip-path: polygon(0 50%, 100% 0, 100% 100%);

    }

    @media (max-width: 959px) {
        margin-top: -48px;
        padding: 54px 16px 20px;

        &::before {
            content: none;
        }
    }
}

.PretzelMixNuts__storyBalloonText {
    &+& {
        margin-top: 1em;
    }

    strong {
        font-weight: 700;
    }
}

/* Features 6種の素材が"楽しい味"をつくる */
.PretzelMixNuts__features {
    position: relative;
    margin-top: -20%;
    padding-top: 24%;
    background-color: var(--pmn-color-bg);

    @media (max-width: 959px) {
        padding-top: 30%;
    }
}

.PretzelMixNuts__storyDecoration {
    position: absolute;
    z-index: 1;
    height: auto;
    pointer-events: none;

    @media (max-width: 959px) {
        /* display: none; */
    }
}

.PretzelMixNuts__storyDecoration--03 {
    top: 0;
    left: 4%;
    width: 35%;
    max-width: 171px;

    @media (max-width: 959px) {
        top: -22px;
    }

}

.PretzelMixNuts__storyDecoration--04 {
    top: 0;
    margin-top: 9%;
    right: 0;
    width: 38%;
    max-width: 187px;

    @media (max-width: 959px) {
        position-anchor: --features-inner;
        top: anchor(top);
        right: anchor(right);
        margin-top: 0;
    }

}

.PretzelMixNuts__title--features {
    --min-font-size: 23px;
    aspect-ratio: 171 / 72;
    background-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/title-balloon-features.svg");
}

.PretzelMixNuts__featuresHgroup {
    position: relative;
}

.PretzelMixNuts__featuresDecoration--01 {
    position: absolute;
    top: 100%;
    left: 4%;
    width: 22%;
    max-width: 184px;
    z-index: 1;
    translate: 0 20%;

    @media (max-width: 959px) {
        width: 42%;
        left: 0;
    }
}

.PretzelMixNuts__featuresTitle {
    margin-top: 24px;
    font-size: 32px;
    color: #21A6FF;
    text-align: center;
}

.PretzelMixNuts__featuresInner {
    anchor-name: --features-inner;
    margin-top: 48px;
    padding: 200px 46px 200px;
    background:
        url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/features-bg-top-border.svg") top center / 778px 290px no-repeat,
        url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/features-bg-bottom-border.svg") bottom center / 778px 279px no-repeat,
        url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/patturn-features.png") repeat center / 412px 412px,
        var(--pmn-color-white);
    --_top-h: calc(100cqw * 290 / 778);
    --_bottom-h: calc(100cqw * 279 / 778);
    -webkit-mask-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/features-bg-top.svg"), linear-gradient(transparent var(--_top-h), #000 var(--_top-h), #000 calc(100% - var(--_bottom-h)), transparent calc(100% - var(--_bottom-h))), url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/features-bg-bottom.svg");
    -webkit-mask-size: 778px 290px, 100% 100%, 778px 279px;
    -webkit-mask-position: top, top, bottom;
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
    -webkit-mask-composite: source-over;
    mask-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/features-bg-top.svg"), linear-gradient(transparent var(--_top-h), #000 var(--_top-h), #000 calc(100% - var(--_bottom-h)), transparent calc(100% - var(--_bottom-h))), url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/features-bg-bottom.svg");
    mask-size: 778px 290px, 100% 100%, 778px 279px;
    mask-position: top, top, bottom;
    mask-repeat: no-repeat, no-repeat, no-repeat;
    mask-composite: add;

    @media (max-width: 959px) {
        margin-top: 8px;
        padding: 180px 3% 160px;
    }
}

.PretzelMixNuts__featuresLead {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5625;
    letter-spacing: 0.02em;
    text-align: center;

    +.PretzelMixNuts__featuresLead {
        margin-top: .5em;
    }
}

.PretzelMixNuts__featuresList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 88px 36px;
    margin-top: 34px;

    @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
}

.PretzelMixNuts__featuresItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.PretzelMixNuts__featuresNumber {
    display: block;
    height: 35px;

    >img {
        width: auto;
        height: 100%;
    }
}

.PretzelMixNuts__featuresNumberImage {
    display: block;
    width: auto;
    height: 35px;
    opacity: 0;
    transform: scale(0) translateY(-20px);
}

.PretzelMixNuts__featuresImage {
    display: flex;
    align-items: center;
    aspect-ratio: 205/193;
}

.PretzelMixNuts__featuresPhoto {
    display: block;
    filter: drop-shadow(2.6px 2.6px 5.2px rgba(0, 0, 0, 0.15));
    opacity: 0;
    transform: scale(0);
}

.PretzelMixNuts__featuresName {
    --min-font-size: 18px;
    --max-font-size: 23px;

    font-size: clamp(var(--min-font-size), calc(var(--min-font-size) + (var(--max-font-size) - var(--min-font-size)) * ((100vw - var(--pmn-min-vw)) / var(--pmn-vw-range))), var(--max-font-size));
    line-height: 1.448;
}

.PretzelMixNuts__featuresDesc {
    --min-font-size: 10px;
    --max-font-size: 12px;
    text-align: center;
    font-size: clamp(var(--min-font-size), calc(var(--min-font-size) + (var(--max-font-size) - var(--min-font-size)) * ((100vw - var(--pmn-min-vw)) / var(--pmn-vw-range))), var(--max-font-size));
    line-height: 1.448;
}

.PretzelMixNuts__featuresBalloon {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 642px;
    margin: 70px auto 40px;

    @media (max-width: 959px) {
        flex-direction: column;
        gap: 0;
        margin-top: 48px;
    }
}

.PretzelMixNuts__featuresIcon {
    flex-shrink: 0;
    width: 78px;
    z-index: 1;
}

.PretzelMixNuts__featuresBalloonText {
    flex: 1;
    position: relative;
    padding: 31px 30px;
    font-size: 16px;
    line-height: 1.5625;
    background-color: #FFF080;
    border-radius: 14px;

    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 1px;
        translate: -100% -50%;
        width: 24px;
        height: 40px;
        background-color: #FFF080;
        clip-path: polygon(0 50%, 100% 0, 100% 100%);

        @media (max-width: 959px) {
            display: none;
        }
    }

    @media (max-width: 959px) {
        margin-top: -46px;
        padding: 54px 16px 20px;
    }
}

/* Experience 全部揃えば、それはもう */
.PretzelMixNuts__title--experience {
    aspect-ratio: 171 / 72;
    background-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/title-balloon-experience.svg");
    font-size: 23px;

    .PretzelMixNuts__titleText {
        color: var(--pmn-color-white);
    }
}

.PretzelMixNuts__experience {
    position: relative;
    padding: 8% 38px 20%;
    background-color: var(--pmn-color-bg);

    @media (max-width: 959px) {
        padding: 0 3% 100px;
    }
}

.PretzelMixNuts__experienceBody {
    position: relative;
    margin-top: 48px;

    padding: 40px 26px;
    background-color: #F6DFE1;
    border: 4px solid #DF2668;
    border-radius: 28px;

    background: #F6DFE1 url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/patturn-experience.png") repeat center/78px 75px;

    @media (max-width: 959px) {
        margin-top: 24px;
        padding: 24px 3% 32px;
    }

}

.PretzelMixNuts__experienceHgroup {
    position: relative;
}

.PretzelMixNuts__experienceTitleDecoration {
    position: absolute;
    z-index: 1;
    height: auto;
    pointer-events: none;

    @media (max-width: 959px) {
        /* display: none; */
    }
}

.PretzelMixNuts__experienceTitleDecoration--01 {
    top: -20%;
    left: -5%;
    width: 30%;
    max-width: 144px;

    @media (max-width: 959px) {
        top: unset;
        bottom: 100%;
        left: 0;
        rotate: -20deg;
    }
}

.PretzelMixNuts__experienceTitleDecoration--02 {
    top: 0;
    right: -5%;
    width: 38%;
    translate: 0 -49%;

    @media (max-width: 959px) {
        top: unset;
        bottom: 100%;
        right: -10%;
        rotate: 20deg;
        translate: 0 20%;
    }
}

.PretzelMixNuts__experienceTitle:not(:root) {
    --min-font-size: 26px;
    --max-font-size: 32px;
    margin-top: 24px;
    font-size: clamp(var(--min-font-size), calc(var(--min-font-size) + (var(--max-font-size) - var(--min-font-size)) * ((100vw - var(--pmn-min-vw)) / var(--pmn-vw-range))), var(--max-font-size));
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: #DA0955;
    text-align: center;
}

.PretzelMixNuts__experienceTitle--sub {
    --min-font-size: 20px;
    --max-font-size: 32px;

    position: relative;
    display: block;
    width: fit-content;
    margin-inline: auto;
    font-size: clamp(var(--min-font-size), calc(var(--min-font-size) + (var(--max-font-size) - var(--min-font-size)) * ((100vw - var(--pmn-min-vw)) / var(--pmn-vw-range))), var(--max-font-size));

    &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 33px;
        height: 25px;
        translate: 60% -50%;
        background: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/experience-title-decoration.svg") no-repeat center / contain;
    }
}

/* おすすめの食べ方 */
.PretzelMixNuts__howToEat {
    position: relative;

    @media (max-width: 959px) {
        /* margin-top: 30px; */
        /* padding: 30px 5%; */
    }
}

.PretzelMixNuts__howToEatTitle {
    --min-font-size: 23px;
    --max-font-size: 32px;
    font-size: clamp(var(--min-font-size), calc(var(--min-font-size) + (var(--max-font-size) - var(--min-font-size)) * ((100vw - var(--pmn-min-vw)) / var(--pmn-vw-range))), var(--max-font-size));
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin-inline: auto;
    padding: 4px 40px 7px;
    color: var(--pmn-color-white);
    background-color: #DA0955;
    border: 1px solid #DA0955;
    border-radius: 48px;
}

.PretzelMixNuts__howToEatText {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: #DA0955;
    text-align: center;
}

.PretzelMixNuts__howToEatNote {
    margin-top: 18px;
    padding: 30px 36px;
    background-color: var(--pmn-color-white);
    border-radius: 24px;

    @media (max-width: 959px) {
        padding: 20px 5%;
    }
}

.PretzelMixNuts__howToEatNoteText {
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0.02em;
    color: #DA0955;
    text-align: center;
}

.PretzelMixNuts__howToEatImage {
    margin-top: 24px;
}

.PretzelMixNuts__howToEatPhoto {
    display: block;
    width: 100%;
}

/* How to お召し上がり方 */
.PretzelMixNuts__howTo {
    position: relative;
    margin-top: 48px;

    @media (max-width: 959px) {
        margin-top: 30px;
        /* padding: 30px 5%; */
    }
}

.PretzelMixNuts__howToLabel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 4px 21px 7px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #DF2668;
    border: 2px solid #DF2668;
    border-radius: 32px;
}

.PretzelMixNuts__howToTitle {
    margin-top: 16px;
    font-size: 32px;
    line-height: 1.2;
    color: #DF2668;
}

.PretzelMixNuts__howToSubTitle {
    margin-top: 16px;
    font-size: 20px;
    line-height: 1.448;
    color: #DF2668;
}

.PretzelMixNuts__howToText {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5625;
    letter-spacing: 0.02em;
    color: #DF2668;
}

.PretzelMixNuts__howToTextWrapper {
    position: relative;
}

.PretzelMixNuts__howToImage {
    position: absolute;
    bottom: 0;
    right: -20px;
    display: grid;
    grid-template-columns: .4fr .6fr;
    align-items: center;
    width: 55%;
    pointer-events: none;

    @media (max-width: 959px) {
        bottom: 100%;
        translate: 0 50%;
    }
}

.PretzelMixNuts__howToArrow {
    height: auto;
    translate: 0 12%;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.3s linear;

    &.is-visible {
        clip-path: inset(0 0% 0 0);
    }

    @media (max-width: 959px) {
        rotate: -14deg;
        transform-origin: right center;
    }
}

.PretzelMixNuts__howToMarshmallow {
    height: auto;
    opacity: 0;
    transform: scale(0.5);
}

.PretzelMixNuts__howToSteps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;

    @media (max-width: 959px) {
        margin-top: 24px;
    }
}

.PretzelMixNuts__howToStep {
    display: flex;
    align-items: center;
    background-color: var(--pmn-color-white);
    border-radius: 48px;
    box-shadow: 0 0 0 rgba(237, 125, 4, 0);
    transition: box-shadow 0.4s;

    &.is-visible {
        box-shadow: 3px 5px 4px rgba(237, 125, 4, 1);
    }

    @media (max-width: 576px) {
        flex-direction: column;
        border-radius: 16px;

        &.is-visible {
            box-shadow: none;
        }
    }
}

.PretzelMixNuts__howToStepNumber {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 107px;
    height: 64px;
    padding: 24px 20px;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    color: var(--pmn-color-primary);
    background-color: var(--pmn-color-secondary);
    border-radius: 48px 0 0 48px;

    @media (max-width: 576px) {
        width: 100%;
        height: auto;
        padding: 8px 20px;
        border-radius: 16px 16px 0 0;
    }
}

.PretzelMixNuts__howToStepText {
    padding: 0 20px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--pmn-color-primary);

    @media (max-width: 576px) {
        display: flex;
        align-items: center;
        min-height: 78px;
        padding: 8px 10px;
        text-align: center;
    }
}

.PretzelMixNuts__howToCaution {
    display: flex;
    align-items: center;
    gap: 46px;
    margin-top: 40px;

    @media (max-width: 959px) {
        flex-direction: column;
        gap: 0;
        margin-top: 24px;
    }
}

.PretzelMixNuts__howToCautionIcon {
    flex-shrink: 0;
    width: 78px;
    z-index: 1;
}

.PretzelMixNuts__howToCautionBody {
    flex: 1;
    position: relative;
    padding: 24px 30px;
    background-color: var(--pmn-color-white);
    border-radius: 14px;

    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 1px;
        translate: -100% -50%;
        width: 24px;
        height: 40px;
        background-color: var(--pmn-color-white);
        clip-path: polygon(0 50%, 100% 0, 100% 100%);

        @media (max-width: 959px) {
            top: 1px;
            left: 50%;
            translate: -50% -100%;
            width: 40px;
            height: 24px;
            clip-path: polygon(50% 0, 0 100%, 100% 100%);
        }
    }

    @media (max-width: 959px) {
        margin-top: -48px;
        padding: 54px 16px 20px;
        border-radius: 14px;

        &::before {
            content: none;
        }
    }
}

.PretzelMixNuts__howToCautionTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: #FF0000;
}

.PretzelMixNuts__howToCautionText {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--pmn-color-primary);
}

.PretzelMixNuts__howtoeatDecoration--02 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    max-width: 248px;
    translate: 0 77%;
}

.PretzelMixNuts__howtoeatDecoration--03 {
    position: absolute;
    right: -14px;
    bottom: -73px;
    width: 127px;

    @media (max-width: 959px) {
        display: none;
    }
}

/* Behind マシュマロが石になった！？ */
.PretzelMixNuts__behind {
    position: relative;
    margin-top: 48px;

    @media (max-width: 959px) {
        margin-top: 30px;
        /* padding: 30px 5%; */
    }
}

.PretzelMixNuts__behindLabel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 4px 21px 7px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #DF2668;
    border: 2px solid #DF2668;
    border-radius: 32px;
}

.PretzelMixNuts__behindTitle:not(:root) {
    position: relative;
    margin-top: 16px;
    font-size: 32px;
    line-height: 1.2;
    color: #DF2668;
}
.PretzelMixNuts__behindTitleText--decoration {
    position: relative;
    display: flex;
    width: fit-content;
    &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 33px;
        height: 25px;
        translate: 60% -50%;
        background: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/experience-title-decoration.svg") no-repeat center / contain;
    }
    @media (max-width: 576px) {
        flex-direction: column;

    }
}

.PretzelMixNuts__behindTitleDecoration {
    position: absolute;
    right: -11%;
    bottom: -36px;
    width: 55%;
    max-width: 256px;
    height: auto;
    pointer-events: none;

    @media (max-width: 959px) {
        display: none;
    }
}

.PretzelMixNuts__behindSubTitle {
    margin-top: 24px;
    font-size: 24px;
    line-height: 1.04;
    letter-spacing: 0.02em;
    color: #DF2668;
}

.PretzelMixNuts__behindText {
    margin-top: 20px;
    font-weight: 700;
    line-height: 1.5625;
    letter-spacing: 0.02em;
    color: #DF2668;
}

.PretzelMixNuts__behindImage {
    margin-top: 24px;
}

.PretzelMixNuts__behindPhoto {
    display: block;
    width: 100%;
}

.PretzelMixNuts__scenesSnackTime {
    position: relative;
    margin-bottom: -14%;
    transform: translateY(-100%);
    z-index: 1;
    pointer-events: none;

    >svg {
        overflow: visible;
    }
}

.PretzelMixNuts__scenesSnackTimeSvg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.PretzelMixNuts__scenesSnackTimeText {
    font-family: var(--pmn-font-maru);
    font-weight: 700;
    font-size: 44px;
    letter-spacing: 0.05em;
    fill: var(--pmn-color-scenes);
}

/* Scenes こんなシーンで活躍します */
.PretzelMixNuts__scenes {
    background: var(--pmn-color-scenes) url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/patturn-scene.png") repeat center/78px 75px;
    padding: 50px 27px 200px;
    padding-top: max(12%, 50px);
    margin-top: -10%;
    -webkit-mask-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/scenes-bg.svg?v=0450");
    -webkit-mask-size: 100% auto;
    -webkit-mask-position: top;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/scenes-bg.svg?v=0450");
    mask-size: 100% auto;
    mask-position: top;
    mask-repeat: no-repeat;

    @media (max-width: 959px) {
        padding: 40px 5% 100px;
    }
}

.PretzelMixNuts__scenesHgroup {
    position: relative;
}

.PretzelMixNuts__scenesDecoration {
    position: absolute;
    z-index: 1;
    display: block;
    height: auto;
    pointer-events: none;
}

.PretzelMixNuts__scenesDecoration--01 {
    top: 13%;
    left: 8%;
    width: 13%;
}

.PretzelMixNuts__scenesDecoration--02 {
    top: 14%;
    right: 4%;
    width: 16%;
}

.PretzelMixNuts__title--scenes {
    aspect-ratio: 171 / 72;
    background-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/title-balloon-scenes.svg");

    .PretzelMixNuts__titleText {
        color: var(--pmn-color-scenes);
    }
}

.PretzelMixNuts__scenesTitle:not(:root) {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
    margin-top: 24px;
    margin-inline: auto;
    font-size: 32px;
    line-height: 1.2;
    color: var(--pmn-color-white);
    text-align: center;
    &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 33px;
        height: 25px;
        translate: 60% -50%;
        background: url(https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/scenes-title-decoration.svg) no-repeat center / contain;
    }
    @media (max-width: 576px) {
        flex-direction: column;

    }
}

.PretzelMixNuts__scenesLead {
    margin-top: 16px;
    line-height: 1.5625;
    letter-spacing: 0.02em;
    color: var(--pmn-color-white);
    text-align: center;
}

.PretzelMixNuts__scenesList {
    display: flex;
    gap: 22px;
    margin-top: 28px;
    padding-bottom: 12px;
    padding-right: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

.PretzelMixNuts__scenesItem {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: calc((100% - 44px) / 3);
    min-width: 276px;
    background-color: var(--pmn-color-white);
    border-radius: 32px 0 0 0;
    box-shadow: 7px 8px 0 rgba(0, 0, 0, 0.46);
    overflow: hidden;
    scroll-snap-align: start;
    @media screen and (min-width: 768px) {
        min-width: auto;        
    }
}

.PretzelMixNuts__scenesImage {
    background-color: #BBECFF;
}

.PretzelMixNuts__scenesPhoto {
    display: block;
    width: 100%;
    object-fit: cover;
}

.PretzelMixNuts__scenesBody {
    flex: 1;
    padding: 18px 14px 24px;
}

.PretzelMixNuts__scenesName {
    padding-bottom: 8px;
    font-size: 16px;
    line-height: 1.448;
    color: #FD8300;
    border-bottom: 1px dashed #FD8300;
}

.PretzelMixNuts__scenesText {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.448;
    color: #744000;
}

/* CTA まとめセクション */
.PretzelMixNuts__cta {
    position: relative;
    padding: 170px 0 60px;
    margin-top: -120px;
    overflow: hidden;
    background:
        url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/cta-bg.svg") center top / 100% 167px no-repeat;

    @media (max-width: 959px) {
        padding: 200px 3% 60px;
    }
}

.PretzelMixNuts__ctaDecoration {
    position: absolute;
    top: 8%;
    top: 89px;
    left: 7.6%;
    width: 18%;
    max-width: 116px;
    height: auto;
    filter: drop-shadow(4.6px 6.6px 9.2px rgba(0, 0, 0, 0.11));
    pointer-events: none;

    @media (max-width: 959px) {
        left: 50%;
        translate: -50% 0;
    }
}

.PretzelMixNuts__scenesClosing {
    display: grid;
    grid-template-columns: 420px 1fr;
    align-items: center;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
    }
}

.PretzelMixNuts__scenesClosingText {
    flex: 1;
    min-width: 280px;
    padding-inline: 27px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #7B441C;

    @media (max-width: 768px) {
        padding-inline: 0;
        text-align: center;
    }
}

.PretzelMixNuts__scenesClosingIconWrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: fit-content;
    margin: 16px auto 0;

    &::before,
    &::after {
        content: '';
        display: block;
        width: 36px;
        height: 68px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        animation: iconBlink 3s infinite steps(1, end);
    }

    &::before {
        background-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/tensyu4-left.png");
    }

    &::after {
        background-image: url("https://kojimaya.itembox.cloud/item/common/img/N-09-Ma1/tensyu4-right.png");
    }
}

.PretzelMixNuts__scenesClosingIcon {
    display: block;
    width: 75px;
    height: auto;

    @media (max-width: 768px) {
        padding-inline: 0;
    }
}

@keyframes iconBlink {

    0%,
    15%,
    100% {
        opacity: 1;
    }

    5% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }
}

.PretzelMixNuts__scenesClosingCatch {
    margin-block: 16px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    color: #7B441C;
}

.PretzelMixNuts__scenesClosingImage {
    position: relative;
    translate: 0 15%;
    aspect-ratio: 1;

    @media (max-width: 768px) {
        translate: 0 0;
    }
}

.PretzelMixNuts__scenesClosingPhoto {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    opacity: 0;
    transform: scale(0) rotate(-10deg);
    transition: opacity 0.5s 0.2s, transform 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.PretzelMixNuts__scenesClosingBag {
    position: absolute;
    z-index: 2;
    display: block;
    width: 60%;
    height: auto;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);

    @media (max-width: 768px) {
        top: 65%;
        transform: translate(-50%, -40%) scale(0) rotate(0deg);
    }
}

/* 展開後 */
.PretzelMixNuts__scenesClosingImage.is-spread .PretzelMixNuts__scenesClosingPhoto {
    opacity: 1;
    transform: scale(1.4) rotate(0deg);

    @media (max-width: 768px) {
        transform: scale(1.1) rotate(0deg);
    }
}

.PretzelMixNuts__purchase {
    grid-column: 1 / -1;
    width: 100%;
    padding: 70px 0 53px;
    text-align: center;
    background-color: #FFF6E9;

    @media (max-width: 768px) {
        width: auto;
        margin: -5% calc(50% - 50vw) 0;
        padding: calc(5% + 70px) 0 16px;
    }
}

.PretzelMixNuts__purchaseLink {
    display: inline-block;
    padding: 15px 78px 15px 94px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--pmn-color-white);
    background-color: #F32900;
    border: 2px solid var(--pmn-color-white);
    border-radius: 48px;
    box-shadow: 4px 5px 7px rgba(150, 84, 13, 0.45);
    text-decoration: none;
    transition: opacity 0.3s;

    &:hover {
        opacity: 0.8;
    }
}

.PretzelMixNuts__purchaseImage {
    max-width: 224px;
    margin-inline: auto;
}