.w_1200 {
    max-width: 1200px;
    width: 90%;
    margin-inline: auto;
}

.w_1000 {
    max-width: 1000px;
    width: 90%;
    margin-inline: auto;
}

img {
    display: block;
    width: 100%;
}

button {
    cursor: pointer;
}

.pc {
    @media screen and (max-width: 640px) {
        display: none;
    }
}

.sp {
    display: none;

    @media screen and (max-width: 640px) {
        display: block;
    }
}

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

.pg-new__title {
    background: white;
    padding: 45px 0;

    h2 {
        max-width: 1200px;
        width: 90%;
        margin-inline: auto;
    }
}

.pg-new__menu { /*共通*/
    padding: 75px 0;
    @media screen and (max-width: 640px) {
        padding: 45px 0 90px;
    }

    .menu_item {
        position: relative;
        padding: 30px 0;
        @media screen and (max-width: 640px) {
            padding: 45px 0;
        }

        &:nth-of-type(even) {
            .col2 {
                grid-template-columns: repeat(2, 1fr);

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

                .text {
                    order: 1;

                    @media screen and (max-width: 640px) {
                        order: 2;
                    }
                }

                .img {
                    order: 2;

                    @media screen and (max-width: 640px) {
                        order: 1;
                    }
                }

                .text {
                    .obj {
                        transform: translate(-100%, -50%);
                        @media screen and (max-width: 640px) {
                            transform: translate(-50%, -50%);
                        }
                    }
                }
            }

            &:not(:last-of-type) {
                margin-bottom: 80px;
            }
        }

        &:not(:last-of-type){
            margin-bottom: 80px;
        }

        .col2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-items: center;
            gap: 45px;
            max-width: 1000px;
            width: 90%;
            margin-inline: auto;

            @media screen and (max-width: 640px) {
                grid-template-columns: 1fr;
                justify-content: center;
                justify-items: center;
            }
        }

        .text {
            position: relative;
            z-index: 10;
            @media screen and (max-width: 640px) {
                text-align: center;
                width: 100%;
                z-index: 0;
            }

            h3 {
                margin-bottom: 20px;
                @media screen and (max-width: 640px) {
                    text-align: center;
                    margin-inline: auto;
                }
            }

            >p {
                margin-bottom: 25px;
            }

            .obj {
                top: 0;
                left: 100%;
                transform: translate(-50%, 0);
            }
        }

        .img {
            position: relative;
            z-index: 0;
            @media screen and (max-width: 640px) {
                z-index: 1;
            }
            img {
                position: relative;
                scale: 1.7;
                left: -45px;

                @media screen and (max-width: 640px) {
                    left: 0;
                    scale: 1.7;
                    transform: translate(0, 0);
                }
            }
        }

        button {
            max-width: 300px;
            width: 100%;
            border-radius: 100vmax;
            color: white;
            padding: 15px;
            font-size: clamp(.9rem, 2vw, 1rem);
            filter: drop-shadow(0 0 10px rgba(52, 30, 30, 0.4));
            @media screen and (max-width: 640px) {
                position: absolute;
                top: calc(100% + 20px);
                left: 50%;
                transform: translate(-50%, 0);
            }

            p {
                display: grid;
                grid-template-columns: auto 17px;
                align-items: center;
                justify-content: center;
                gap: 7px;

                &::after {
                    content: "";
                    display: block;
                    width: 17px;
                    aspect-ratio: 1/1;
                    background: url('../image/new/2510/icon_arrow.svg') no-repeat center/contain;
                }
            }
        }
    }

    .obj {
        position: absolute;
        z-index: -1;
        width: 60%;
        aspect-ratio: 1/1;
    }
}

.pg-new__menu_01 { /* ドリア */
    background: url('../image/new/2510/back_yellow.webp') repeat center/contain;

    >h3 {
        max-width: 710px;
        width: 80%;
        margin-inline: auto;
        margin-bottom: 45px;
    }

    .menu_item {
        background: #FFF9E8CC;

        &:first-of-type { /* キーマカレー */
            h3{
                max-width: 300px;
                width: 80%;
                @media screen and (max-width: 640px) {
                    max-width: 370px;
                    margin-inline: auto;
                }
            }
            .obj{
                @media screen and (max-width: 640px) {
                    top: -30%;
                }
            }
        }

        &:nth-of-type(2) { /* 茄子とトマトのミートドリア */
            h3{
                max-width: 450px;
                width: 100%;
                @media screen and (max-width: 640px) {
                    max-width: 300px;
                    width: 70%;
                    margin-inline: auto;
                }
            }
            .obj{
                top: 50%;
                left: 0;
            }
        }

        &:last-of-type { /* ドリアとスープのセット */
            background: none;
            padding: 0;

            .col2 {
                position: relative;
                border-radius: 32px;
                background: #FFF9E8CC;
                text-align: center;
                gap: 0;
            }

            .text {
                padding: 45px;
            }

            h3 {
                max-width: 350px;
                width: 100%;
                text-align: center;
                margin-inline: auto;
                img {
                    max-width: 300px;
                    width: 90%;
                }
            }

            .img {
                border-radius: 32px 0 0 32px;
                height: 100%;
                overflow: hidden;

                @media screen and (max-width: 640px) {
                    border-radius: 32px 32px 0 0;
                }

                img {
                    height: 100%;
                    object-fit: cover;
                    scale: 1;
                    left: 0;
                }
            }

            .obj {
                top: 0;
                left: auto;
                transform: translate(-50%, -50%);
                z-index: 10;
                @media screen and (max-width: 640px) {
                    top: 30%;
                    left: 100%;
                }
            }

            .obj_01 {
                width: 130px;
                top: -15px;
                right: -15px;
                @media screen and (max-width: 640px) {
                    width: 20%;
                    top: 100%;
                    right: auto;
                    left: 5%;
                }
            }

            .obj_02 {
                width: 150px;
                right: -140px;
                @media screen and (max-width: 640px) {
                    width: 20%;
                    top: 100%;
                    left: 95%;
                    right: auto;
                }
            }

            button{
                @media screen and (max-width: 640px) {
                    transform: translate(-50%, -50%);
                    top: 100%;
                }
            }
        }
    }

    button {
        background: #0092E5;
    }
}

.pg-new__menu_02 { /* ご飯のおとも */
    background: url('../image/new/2510/back_green.webp') repeat center/contain;

    >h3 {
        position: relative;
        max-width: 650px;
        width: 70%;
        margin-inline: auto;
        margin-bottom: 45px;
        @media screen and (max-width: 640px) {
            width: 90%;
        }

        img {
            position: relative;
            display: block;
            z-index: 10;
        }

        .obj {
            position: absolute;
            top: 50%;
            right: 0;
            left: auto;
            transform: translate(0, -50%);
            z-index: 1;
        }

        .obj_01 {
            width: 47%;
            right: -35%;
            aspect-ratio: 65/38;
            @media screen and (max-width: 640px) {
                top: 0%;
                width: 65%;
                right: -5%;
            }
        }

        .obj_02 {
            top: 10%;
            right: -50%;
            width: 28%;
            aspect-ratio: 19/7;
            @media screen and (max-width: 640px) {
                display: none;
            }
        }
    }

    .menu_item{
        background: #FFF9E8CC;

        &:first-of-type { /* 鮭ほぐし */
            .img{
                position: relative;
            }
            .img_01{
                top: -60px;
                right: 0;
                left: auto;
                scale: 1.3;
                @media screen and (max-width: 640px) {
                    top: -100px;
                    right: 20%;
                    left: auto;
                    scale: 1;
                }
            }
            .img_02{
                position: absolute;
                top: 105%;
                left: 2%;
                transform: translate(-50%, -50%);
                max-width: 260px;
                width: 55%;
                @media screen and (max-width: 640px) {
                    top: 75%;
                    left: 92%;
                    width: 45%;
                }
            }

            h3{
                max-width: 150px;
                width: 60%;
            }

            .obj{
                width: 70%;
                top: -30%;
                left: 70%;
                @media screen and (max-width: 640px) {
                    width: 60%;
                    top: -120%;
                    left: 5%;
                    transform: rotate(-15deg);
                }
            }
        }

        &:last-of-type{ /* ごま昆布 */
            .img{
                position: relative;
            }
            .img_01{
                top: -60px;
                left: -25%;
                scale: 1.2;
                @media screen and (max-width: 640px) {
                    scale: 1;
                    top: -80px;
                    left: 25%;
                    scale: 1;
                }
            }
            .img_02{
                position: absolute;
                top: 100%;
                left: 90%;
                transform: translate(-50%, -50%);
                max-width: 230px;
                width: 50%;
                @media screen and (max-width: 640px) {
                    top: 75%;
                    left: 35%;
                    width: 45%;
                }
            }

            h3{
                max-width: 150px;
                width: 60%;
            }

            .obj{
                width: 60%;
                top: 60%;
                left: 10%;
                @media screen and (max-width: 640px) {
                    transform: rotate(95deg) !important;
                    width: 40%;
                    top: -75%;
                    left: 60%;
                }
            }
        }

        .col2{
            @media screen and (max-width: 640px) {
                gap: 0;
            }
        }
    }

    button{
        background: #B57510;
    }
}

.pg-new__menu_03 { /* 真ダラの粕漬焼 */
    background: url('../image/new/2510/back_wood.webp') repeat center/cover;
    overflow: hidden;

    .menu_item{
        background: #FFF9E8CC;

        .img{
            img{
                left: -80px;
                @media screen and (max-width: 640px) {
                    top: -30px;
                    left: 0;
                }
            }
        }

        .text{
            h3{
                max-width: 280px;
                width: 70%;
            }

            .obj{
                top: -35%;
                left: 90%;
                width: 80%;
                @media screen and (max-width: 640px) {
                    top: -125%;
                    left: -5%;
                    width: 70%;
                    transform: rotate(-15deg);
                }
            }
        }
    }

    button{
        background: #844E26;
    }
}

.pg-new__menu_04 { /* 蓮根と鶏肉のうま煮 */
    background: url('../image/new/2510/back_orange.webp') repeat center/cover;
    overflow: hidden;

    .col2 {
        grid-template-columns: repeat(2, 1fr);

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

        .text {
            order: 1;

            @media screen and (max-width: 640px) {
                order: 2;
            }

            h3{
                max-width: 380px;
                width: 100%;
            }
        }

        .img {
            order: 2;

            @media screen and (max-width: 640px) {
                order: 1;
            }

            img{
                scale: 1.5;
                top: -40px;
                left: 10%;
                @media screen and (max-width: 640px) {
                    scale: 1.3;
                    top: -10px;
                    left: 3%;
                }
            }
        }  

        .obj{
            z-index: 0;
        }

        .obj_04-1{
            width: 15%;
            left: 7%;
        }

        .obj_04-2{
            width: 10%;
            right: 10%;
            top: 80%;
            left: auto;
        }
    }

    .grid { /* 松原蓮根ファーム */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 45px 5px;
        @media screen and (max-width: 640px) {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }

        h4{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            font-weight: 500;
            font-size: clamp(1.4rem, 2vw, 1.5rem);
            margin-bottom: 20px;
            @media screen and (max-width: 740px) {
                flex-direction: column;
                gap: 5px;
            }
            &::before{
                position: relative;
                top: -30px;
                content: "";
                width: 100px;
                height: 100%;
                aspect-ratio: 29/40;
                background: url('../image/new/2510/obj_kame.webp') no-repeat center/contain;
                @media screen and (max-width: 740px) {
                    width: 60px;
                    top: 0;
                }
            }

            img{
                max-width: 300px;
                width: 80%;
            }
        }

        .img {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
        }

        .text {
            position: relative;
            grid-area: 1 / 1 / 2 / 3;
            @media screen and (max-width: 640px) {
                grid-area: inherit;
                order: 2;
                width: 75%;
            }

            .obj{
                width: 13%;
                z-index: 0;
                left: -20%;
                top: 60%;
            }

            ul{
                counter-reset: number 0;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 10px 30px;
                margin-bottom: 30px;
                @media screen and (max-width: 640px) {
                    grid-template-columns: 1fr;
                }
            }

            li{
                display: grid;
                grid-template-columns: 1rem auto;
                align-items: baseline;
                gap: 15px;
                background: #FFF9E8;
                padding: 10px 30px;
                border-radius: 100vmax;
                font-weight: 500;
                font-size: clamp(1rem, 2vw, 1.1rem);
                &::before{
                    counter-increment: number 1;
                    content: counter(number); 
                    color: #A52121;
                }
            }

            p{
                text-align: center;
                line-height: 1.8;
            }
        }
    
        .img_01 {
            grid-area: 2 / 1 / 3 / 2;
            @media screen and (max-width: 640px) {
                grid-area: inherit;
                order: 1;
            }
        }
    
        .img_02 {
            grid-area: 2 / 2 / 3 / 3;
            @media screen and (max-width: 640px) {
                grid-area: inherit;
                order: 3;
            }
        }
    }

    .menu_item{
        background: #FFF9E8CC;
    }

    button{
        background: #518426;
    }
}