@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap");

.pg-osechi {
    background: white;
    *{
        font-family: 'Noto Serif JP', serif ,"游明朝", "YuMincho";
    }

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

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

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

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

    a{
        text-decoration: none;
    }

    button{
        cursor: pointer;
        display: block;
    }

    .c-red{
        color: #ac1f00;
    }

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

    .c-button__arrow{
        position: relative;
        display: grid;
        grid-template-columns: 1fr 7px;
        align-items: center;
        gap: 1rem;
        padding: 20px 60px;
        border-radius: 100vmax;
        background: #9B1C00;
        transition: all .3s;
        margin-inline: auto;
        max-width: 320px;
        width: 100%;
        a{
            color: white;
            font-size: clamp(1.1rem, 3vw, 1.3rem);
            &::before{
                position: absolute;
                content: "";
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }
        }
        .arrow{
            border-top: solid 1px white;
            border-right: solid 1px white;
            width: 7px;
            aspect-ratio: 1/1;
            transform: rotate(45deg);
        }
        @media(any-hover: hover){
            &:hover{
                background: #d03e1d;
            }
        }
    }

    .pg-osechi__intro{
        margin-bottom: 0;
    }

    .pg-osechi__soldout {
        border: 2px solid #852332;
        color: #852332;
        padding: 1rem;
        background: #fff;
        text-align: center;
        width: min(1000px, 90%);
        margin: 0 auto 1rem;
    }

    .foods_order{
        display: grid;
        grid-template-columns: 1fr 290px;
        align-items: center;
        gap: 0 30px;
        background: url(../image/osechi2026/order_back.webp) repeat center/contain;
        padding: 30px;
        @media screen and (max-width: 960px) {
            grid-template-columns: 1fr;
            padding: 0;
        }
        @media screen and (max-width: 640px) {
            background-size: cover;
            gap: 0 30px;
        }

        .order_left{
            display: grid;
            grid-template-columns: 250px 1fr;
            align-items: center;
            gap: 30px 45px;
            @media screen and (max-width: 960px) {
                grid-template-columns: .7fr 1fr;
                padding: 30px 60px;
            }
            @media screen and (max-width: 640px) {
                padding: 30px 15px;
                gap: 30px;
            }
        }

        .order_status{
            font-size: clamp(1.1rem,3vw,1.3rem);
        }

        .order_title{
            font-weight: 600;
            font-size: clamp(1.6rem, 3vw, 2rem);
        }

        .order_price{
            font-weight: 600;
            font-size: clamp(1.3rem, 3vw, 1.7rem);
            .small{
                font-size: clamp(.8rem, 3vw, 1.2rem);
            }
        }

        button{
            font-size: clamp(1.1rem, 3vw, 1.3rem);
            @media screen and (max-width: 960px) {
                border-radius: 0;
                padding: 20px;
                max-width: 100%;
            }
        }
    }

    .pg-osechi__status{
        .intro_text{
            padding: 50px;
            text-align: center;
            font-size: clamp(1.3rem,3vw,1.6rem);
            line-height: 1.8;
            .c-red{
                font-weight: 600;
            }
            .small{
                font-size: clamp(1rem, 3vw, 1.3rem);
            }
        }

        .text{
            background: url(../image/osechi2024/back_beige.webp) repeat center/cover;
            padding: 50px;
            text-align: center;
            font-size: clamp(1.2rem, 3vw, 1.3rem);
            line-height: 1.8;
            font-weight: 300;
            @media screen and (max-width: 640px) {
                padding: 45px 30px;
            }
            .c-red{
                position: relative;
                display: block;
                font-size: clamp(1.8rem, 4vw, 2.6rem);
                padding-bottom: 30px;
                margin-bottom: 30px;
                line-height: 1.4;
                &::before{
                    content: "";
                    position: absolute;
                    top: auto;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 115px;
                    height: 1px;
                    background: #767676;
                }
            }
        }

        button{
            @media screen and (max-width: 960px) {
                max-width: 100%;
            }
        }
    }

    .pg-osechi__menu{
        .menu{
            padding: 150px 0;
            background: url(../image/osechi2026/menu_back.webp) repeat center/contain;
            @media screen and (max-width: 640px) {
                padding: 90px 0;
            }

            .menu_item{
                position: relative;
                display: grid;
                grid-template-columns: 1fr .8fr;
                gap: 120px 30px;
                padding: 0 60px;
                @media screen and (max-width: 700px) {
                    grid-template-columns: 1fr;
                    justify-items: center;
                    padding: 0 80px;
                }
                @media screen and (max-width: 640px) {
                    gap: 90px 30px;
                    padding: 0 10%;
                }

                &::before{
                    position: absolute;
                    content: "";
                    width: 50%;
                    aspect-ratio: 50/73;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    @media screen and (max-width: 700px) {
                        top: 25%;
                        width: 75%;
                    }
                    @media screen and (max-width: 530px) {
                        top: 20%;
                    }
                }

                &:nth-of-type(even){
                    grid-template-columns: .7fr 1fr;
                    @media screen and (max-width: 700px) {
                        grid-template-columns: 1fr;
                    }
                    .menu_img{
                        order: 2;
                        @media screen and (max-width: 700px) {
                            order: 1;
                        }
                    }
                    .menu_text{
                        order: 1;
                        @media screen and (max-width: 700px) {
                            order: 2;
                        }
                    }
                }
                &:not(:last-of-type){
                    margin-bottom: 150px;
                }

                &:first-of-type{
                    &::before{
                        background: url(../image/osechi2026/obj_01.webp) repeat center/contain;
                    }
                }

                &:nth-of-type(2){
                    &::before{
                        left: auto;
                        right: 0;
                        background: url(../image/osechi2026/obj_02.webp) repeat center/contain;
                    }
                }

                &:nth-of-type(3){
                    &::before{
                        background: url(../image/osechi2026/obj_03.webp) repeat center/contain;
                    }
                }
            }

            .menu_img{
                img{
                    filter: drop-shadow(0 0 15px rgba(0,0,0,0.7));
                }
            }

            .menu_text{
                display: grid;
                grid-template-columns: 60px 1fr;
                gap: 30px;
                @media screen and (max-width: 640px) {
                    grid-template-columns: 50px 1fr;
                    gap: 15px;
                }
                li{
                    font-size: clamp(1.1rem,2vw,1.3rem);
                    &:not(:last-of-type){
                        margin-bottom: 9px;
                    }
                }
            }
        }

        .foods{
            background: url(../image/osechi2026/ichioshi_back.webp) repeat center/cover;
            padding: 90px 0;

            h2{
                position: relative;
                text-align: center;
                font-size: clamp(1.6rem,2vw,2rem);
                margin-bottom: 90px;
            
                span{
                    position: relative;
                    z-index: 10;
                }

                &::before{
                    content: "";
                    position: absolute;
                    width: 350px;
                    aspect-ratio: 92/49;
                    top: 100%;
                    left: 55%;
                    transform: translate(-50%, -50%);
                    background: url(../image/osechi2026/ichioshi_title_back.webp) no-repeat center/contain;
                    z-index: 0;
                }
            }

            .foods_item{
                position: relative;
                @media screen and (max-width: 640px) {
                    &:not(:last-of-type){
                        margin-bottom: 90px;
                    }
                }
                &::before{
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    width: 55%;
                    aspect-ratio: 56/51;
                    background: url(../image/osechi2026/obj_04.webp) no-repeat center/contain;
                    @media screen and (max-width: 640px) {
                        width: 90%;
                        top: 40%;
                    }
                }
                &:nth-last-of-type(even){
                    &::before{
                        left: auto;
                        right: 0;
                        background: url(../image/osechi2026/obj_05.webp) no-repeat center/contain;
                    }
                    .flex{
                        flex-direction: row-reverse;
                        .foods_img img{
                            left: 30px;
                            @media screen and (max-width: 640px) {
                                left: 0;
                            }
                        }
                    }
                }
            }

            .flex{
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center; 
                flex-wrap: wrap;
                gap: 30px;
                padding: 0 8%;
                z-index: 10;
                @media screen and (max-width: 640px) {
                    justify-content: center;
                    padding: 0 10%;
                }
                .foods_img{
                    width: calc(60% - 30px);
                    @media screen and (max-width: 640px) {
                        width: 100%;
                    }
                    img{
                        position: relative;
                        left: -30px;
                        @media screen and (max-width: 640px) {
                            left: 0;
                        }
                    }
                }
                .foods_text{
                    width: 40%;
                    @media screen and (max-width: 640px) {
                        width: fit-content;
                    }
                }

            }
        }

        .foods_text{
            h3{
                color: #8B6600;
                font-size: clamp(1.6rem,2vw,2rem);
                margin-bottom: 15px;
            }
            p{
                font-size: clamp(1rem,2vw,1.1rem);
                line-height: 1.6;
            }
        }

        .foods_namasu{
            padding: 90px 0;
            background: url(../image/osechi2026/ichioshi_back_2.webp) no-repeat center/cover;

            .flex{
                position: relative;
                display: grid;
                grid-template-columns: 1fr .6fr;
                align-items: center;
                padding: 0 8%;
                gap: 45px;
                @media screen and (max-width: 640px) {
                    grid-template-columns: 1fr;
                    justify-content: center;
                    justify-items: center;
                    padding: 0 10%;
                }
            }
        }

        .foods_order{
            background: url(../image/osechi2024/back_black.webp) repeat center/cover;
            .order_status{
                color: white;
            }
        }
    }

    .pg-osechi__voice{
        background: url(../image/osechi2024/back_beige03.webp) repeat center/cover;
        padding: 90px 0;
        @media screen and (max-width: 640px) {
            padding: 60px 0;
        }
        h3{
            text-align: center;
            color: #AC1F00;
            font-size: clamp(1rem,2vw,1.2rem);
            margin-bottom: 45px;
            img{
                width: 160px;
                margin: 0 auto 15px;
            }
        }
        >p{
            img{
                width: 300px;
                margin: 0 auto 30px;
            }
        }

        .flex{
            max-width: 800px;
            width: 90%;
            margin: 0 auto 60px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            ul{
                width: 48%;
                @media screen and (max-width: 640px) {
                    width: 100%;
                    &:not(:last-of-type){
                        margin-bottom: 60px;
                    }
                }
                li{
                    position: relative;
                    background: white;
                    font-family: 'Noto Sans JP';
                    border-radius: 20px;
                    padding: 30px;
                    font-size: clamp(.9rem,2vw,1rem);
                    line-height: 1.6;
                    &:not(:last-of-type){
                        margin-bottom: 30px;
                        @media screen and (max-width: 640px) {
                            margin-bottom: 18px;
                        }
                    }
                    &:nth-of-type(3){
                        margin-bottom: 95px;
                        @media screen and (max-width: 640px) {
                            margin-bottom: 55px;
                        }
                    }
                    img{
                        position: absolute;
                        top: 0;
                        transform: translateY(-100%);
                        right: 30px;
                        @media screen and (max-width: 640px) {
                            right: 50px;
                            width: 130px;
                        }
                        &.pict03{
                            width: 130px;
                            top: 10px;
                            @media screen and (max-width: 640px) {
                                width: 90px;
                            }
                        }
                        &.pict02{
                            width: 130px;
                            @media screen and (max-width: 640px) {
                                width: 100px;
                            }
                        }
                        &.pict01{
                            width: 90px;
                            @media screen and (max-width: 640px) {
                                width: 60px;
                            }
                        }
                    }
                }
            }
        }
        
        .voice_present{
            width: 90%;
            margin: 0 auto;
            p{
                font-family: 'Noto Sans JP';
                text-align: center;
                &:first-of-type{
                    font-size: clamp(1rem,2vw,1.5rem);
                    line-height: 1.8;
                    margin-bottom: 10px;
                }
                &:last-of-type{
                    font-size: clamp(1.3rem,2vw,1.7rem);
                }
                span{
                    font-family: 'Noto Sans JP';
                    &.bold{
                        font-weight: 600;
                    }
                    &.small{
                        font-size: clamp(1rem,2vw,1.5rem);
                    }
                }
            }
        }
    }

    .pg-osechi__attention{
        h3{
            padding: 30px 15px;
            background: #3E3E3E;
            text-align: center;
            color: #fff;
            font-size: clamp(1.4rem,2vw,1.9rem);
            font-weight: 300;
            letter-spacing: 0.1em;
            span{
                font-size: clamp(.9rem,2vw,1.2rem);
                padding-bottom: 9px;
                border-bottom: dashed 1px;
                margin-bottom: 6px;
                display: inline-block;
            }
        }

        h4{
            padding: 18px 15px;
            background: #3E3E3E;
            text-align: center;
            color: #fff;
            font-family: 'Noto Sans JP', sans-serif;
            font-size: clamp(1rem,2vw,1.3rem);
            font-weight: 300;
            margin-bottom: 30px;
            letter-spacing: 0.1em;
        }

        .annotation{
            display: block;
            position: relative;
            font-size: clamp(.7rem,1vw,.8rem);
            padding-left: 1em;
            &::before{
                position: absolute;
                content: "※";
                left: 0%;
            }
            &:first-of-type{
                margin-top: 15px;
            }
            @media screen and (max-width: 640px) {
                margin-top: 0;
            }
        }

        .attention_area{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 90%;
            margin: 0 auto;
            &:not(:last-of-type){
                margin-bottom: 45px;
            }
            .area_text{
                width: 45%;
                @media screen and (max-width: 640px) {
                    width: 100%;
                }
                >p, .c-spbr{
                    font-family: 'Noto Sans JP';
                    line-height: 1.8;
                    font-size: 1rem;
                    margin-bottom: 15px;
                }
            }
            .area_time{
                >p{
                    padding-bottom: 6px;
                    border-bottom: dashed 1px;
                    width: 80%;
                    margin-bottom: 15px;
                    @media screen and (max-width: 640px) {
                        width: 100%;
                    }
                }
                div{
                    display: flex;
                    align-items: end;
                    gap: 10px;
                    line-height: 1;
                }
                .time{
                    font-size: clamp(.8rem,2vw,1rem);
                    position: relative;
                }
                .day{
                    font-size: clamp(2.5rem,3vw,3rem);
                }
                .circle{
                    position: relative;
                    display: grid;
                    place-items: center;
                    color: #fff;
                    z-index: 0;
                    background: #AC1F00;
                    width: 30px;
                    height: 30px;
                    border-radius: 50px;
                    @media screen and (max-width: 640px) {
                        font-size: 1rem;
                    }
                }
            }
            .area_map{
                width: 50%;
                text-align: right;
                @media screen and (max-width: 640px) {
                    text-align: left;
                    width: 100%;
                    margin: 0 auto;
                }
                .annotation{
                    display: inline-block;
                }
            }
        }

        .attention_packaging{
            margin-bottom: 30px;
            .packaging_text{
                width: 90%;
                margin-inline: auto;
                text-align: center;
                margin-bottom: 30px;
                p{
                    font-size: clamp(1.3rem,2vw,1.5rem);
                    letter-spacing: 0.1rem;
                    .c-red{
                        font-size: clamp(1.5rem,2vw,1.875rem);
                    }
                }
            }
            .packaging_img {
                width: 100%;
                margin-bottom: 10px;
            }
            .caution{
                width: 90%;
                margin-inline: auto;
                font-family: 'Noto Sans JP';
                font-size: 1.125rem;
                color: #da330d;
                font-weight: 500;
            }

            +button{
                margin-bottom: 45px;
            }
        }

        .attention_text{
            padding: 45px 15px;
            background: url(../image/osechi2026/limited_back.webp) repeat top/cover;
            text-align: center;
            line-height: 1.8;
            font-size: clamp(1rem,2vw,1.5rem);
            .red{
                color: #95282c;
            }
        }

        .attention_contact{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px 0;
            width: 100%;
            margin: 0 auto;
            @media screen and (max-width: 640px) {
                width: 90%;
            }
        }

        .contact_item {
            width: 48%;
            border: solid 1px #AD8F07;
            padding: 30px;
            text-align: center;
            display: grid;
            place-items: center;
            @media screen and (max-width: 640px) {
                width: 100%;
                margin: 0 auto;
                padding: 15px;
            }
            .form_inner{
                width: 100%;
            }
            p{
                margin-bottom: 15px;
                font-size: 1.2rem;
                .small{
                    display: block;
                    font-size: .8rem;
                }
            }
            .c-button{
                position: relative;
                background: #c1a454;
                padding: 3px;
                grid-template-columns: 1fr auto 1fr;
                column-gap: 8px;
                align-items: center;
                border-radius: 10px;
                max-width: 362px;
                height: 82px;
                transition: .3s;
                margin: 0 auto;
                box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
                a{
                    width: 100%;
                    height: 100%;
                    display: block;
                    color: white;
                    text-decoration: none;
                    &::before{
                        content: "";
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                    }
                    .c-button_inner{
                        width: 100%;
                        border-radius: 10px;
                        border: 1px solid #fff;
                        text-align: center;
                        height: 100%;
                        p{
                            font-family: "dnp-shuei-mgothic-std", sans-serif;
                            font-weight: 400;
                            font-style: normal;
                            line-height: 74px;
                        }
                        .arrow {
                            position: absolute;
                            top: 50%;
                            right: 10%;
                            display: inline-block;
                            width: 20px;
                            height: 1px;
                            border-radius: 9999px;
                            background-color: #fff;
                            @media screen and (max-width: 640px) {
                                right: 5%;
                            }
                        }
                        .arrow::before {
                            content: "";
                            position: absolute;
                            top: calc(50% - 1px);
                            right: 0;
                            width: 10px;
                            height: 1px;
                            border-radius: 9999px;
                            background-color: #fff;
                            transform: rotate(45deg);
                            transform-origin: calc(100% - 1px) 50%;
                        }
                    }
                }
            }
            .c-button:hover{
                background: #d9be72;
            }
            .tel{
                color: #AD8F07;
                font-size: clamp(2.5rem,4vw,3rem);
                text-decoration: none;
                line-height: 1;
                margin-bottom: 15px;
            }
        }
    }
}