@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-yellow {
        color: #AD8F07;
    }

    .c-highlight {
        text-decoration: underline;
        /* 下線 */
        text-decoration-thickness: 0.8em;
        /* 線の太さ */
        text-underline-offset: -0.4em;
        /* 線の位置。テキストに重なるようにやや上部にする */
        text-decoration-skip-ink: none;
        /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
        font-weight: 600;

        &.yellow {
            text-decoration-color: rgba(255, 232, 188, 1);
            /* 線の色 */
        }

        &.blue {
            text-decoration-color: rgba(216, 243, 255, 1);
            /* 線の色 */
        }
    }

    .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/osechi2027/order_back.webp) repeat center/contain;
        padding: 30px;

        @media (width < 960px) {
            grid-template-columns: 1fr;
            padding: 0 30px 30px;
        }

        @media (width < 640px) {
            background-size: cover;
            gap: 0 30px;
            padding: 0 15px 30px;
        }

        &.beige {
            background: url(../image/osechi2027/order_back_02.webp) repeat center/cover !important;

            .order_title,
            .order_price,
            p {
                color: black !important;
            }
        }

        .order_left {
            display: grid;
            grid-template-columns: 250px 1fr;
            align-items: center;
            gap: 30px 45px;

            @media (width < 960px) {
                grid-template-columns: .7fr 1fr;
                padding: 30px 60px;
            }

            @media (width < 640px) {
                padding: 15px 0;
                gap: 30px 15px;
            }
        }

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

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

        p{
            font-size: clamp(1rem, 1.5vw, 1.1rem);
            font-weight: 300;
        }

        .order_price {
            font-weight: 500;
            font-size: 1.5rem;

            .small {
                font-size: clamp(.8rem, 1.5vw, 1rem);
            }
        }

        button {
            font-size: clamp(1.1rem, 3vw, 1.3rem);

            @media (width < 960px) {
                max-width: 450px;
            }
        }
    }

    .pg-osechi__status {
        .intro_text {
            padding: 50px;
            text-align: center;
            font-size: clamp(1.1rem, 3vw, 1.6rem);
            line-height: 1.8;

            @media (width < 640px) {
                padding: 30px;
            }

            .c-red {
                font-weight: 600;
            }

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

            .big{
                @media (width < 640px) {
                    font-size: 1.5rem;
                }
            }
        }

        .text {
            position: relative;
            background: url(../image/osechi2027/back_beige.webp) repeat center/cover;
            padding: 60px 15px;
            text-align: center;
            font-size: clamp(1rem, 3vw, 1.3rem);
            line-height: 1.8;
            font-weight: 300;

            &::before,
            &::after {
                position: absolute;
                content: "";
                background: url(../image/osechi2027/border.webp) repeat center/cover;
                width: 100%;
                height: 30px;
                left: 0;

                @media (width < 640px) {
                    height: 15px;
                }
            }

            &::before {
                top: 0;
            }

            &::after {
                bottom: 0;
            }

            .c-red {
                position: relative;
                display: block;
                font-size: clamp(1.5rem, 4vw, 2.6rem);
                padding-bottom: 30px;
                margin-bottom: 30px;
                line-height: 1.4;

                @media (width < 640px) {
                    padding: 15px 0;
                    margin-bottom: 15px;
                }

                &::before {
                    content: "";
                    position: absolute;
                    top: auto;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 115px;
                    height: 1px;
                    background: #767676;

                    @media (width < 640px) {
                        width: 80%;
                    }
                }
            }
        }

        button {
            @media (width < 960px) {
                max-width: 450px;
            }
        }
    }

    .pg-osechi__menu {
        .menu {
            padding: 150px 0;
            background: url(../image/osechi2027/menu_back.webp) repeat center/contain;

            @media (width < 640px) {
                background: url(../image/osechi2027/menu_back.webp) repeat center left 40%/cover;
                padding: 90px 0;
            }

            .menu_item {
                position: relative;
                display: grid;
                grid-template-columns: 1fr .8fr;
                gap: 30px;
                padding: 0 60px;

                @media (width < 700px) {
                    grid-template-columns: 1fr;
                    justify-items: center;
                    padding: 0 80px;
                }

                @media (width < 640px) {
                    padding: 0 10%;
                }

                &::before {
                    position: absolute;
                    content: "";
                    width: 80%;
                    height: 120%;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                    background: white;
                    opacity: 75%;

                    @media (width < 700px) {
                        left: 50%;
                        height: 70%;
                        top: auto;
                        bottom: -5%;
                        transform: translateX(-50%);
                    }
                }

                &:nth-of-type(even) {
                    grid-template-columns: .7fr 1fr;

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

                    .menu_img {
                        order: 2;

                        @media (width < 700px) {
                            order: 1;
                        }
                    }

                    .menu_text {
                        order: 1;

                        @media (width < 700px) {
                            order: 2;
                        }
                    }

                    &::before {
                        right: auto;
                        left: 0;

                        @media (width < 700px) {
                            left: 50%;
                            height: 70%;
                            top: auto;
                            bottom: -5%;
                            transform: translateX(-50%);
                        }
                    }
                }

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

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

            .menu_text {
                position: relative;
                display: grid;
                grid-template-columns: 60px 1fr;
                gap: 30px;

                @media (width < 640px) {
                    grid-template-columns: 40px 1fr;
                    gap: 20px;
                    width: 90%;
                    margin-inline: auto;
                }

                li {
                    font-size: clamp(1rem, 1.5vw, 1.2rem);

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

        .foods {
            background: url(../image/osechi2027/ichioshi_back.webp) repeat center/cover;

            h2 {
                position: relative;
                text-align: center;
                font-size: clamp(1.6rem, 2vw, 2rem);
                padding: 60px 0 45px;

                @media (width < 640px) {
                    padding: 30px 0 25px;
                }

                span {
                    position: relative;
                    z-index: 10;
                }
            }

            .foods_item {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                aspect-ratio: 300 / 143;

                @media (width < 640px) {
                    aspect-ratio: 315 / 302;
                }

                &::before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    width: 100%;
                    height: 100%;
                    background: url(../image/osechi2027/obj.webp) no-repeat center/contain;
                    mix-blend-mode: multiply;
                    opacity: .7;

                    @media (width < 640px) {
                        background: url(../image/osechi2027/obj_sp.webp) no-repeat center/contain;
                    }
                }

                &:nth-last-of-type(odd) {
                    aspect-ratio: 340 / 143;

                    @media (width < 640px) {
                        aspect-ratio: 315 / 302;
                    }

                    &::before {
                        background: none;
                    }

                    .flex {
                        flex-direction: row-reverse;

                        .foods_img img {
                            left: 30px;

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

                    .foods_text {
                        h3 {
                            color: #8B6600;
                        }
                    }
                }
            }

            .flex {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: 0;
                padding: 0 8%;
                z-index: 10;

                @media screen and (max-width: 640px) {
                    justify-content: center;
                    padding: 0 10%;
                }

                .foods_img {
                    width: 55%;

                    @media (width < 640px) {
                        width: 70%;
                    }

                    img {
                        position: relative;
                        left: -30px;

                        @media (width < 640px) {
                            left: 0;
                        }
                    }
                }

                .foods_text {
                    width: 45%;
                    color: black;

                    @media (width < 640px) {
                        width: fit-content;
                    }
                }

            }
        }

        .foods_text {

            @media (width < 640px) {
                width: fit-content;
                margin-inline: auto;
            }

            h3 {
                color: #841800;
                font-size: clamp(1.6rem, 2vw, 2rem);
                margin-bottom: 15px;
                font-weight: 600;

                @media (width < 640px) {
                    text-align: center;
                }
            }

            p {
                font-size: clamp(1rem, 2vw, 1.1rem);
                line-height: 1.6;
            }
        }

        .foods_namasu {
            padding: 45px 0;

            .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_item {
                aspect-ratio: inherit;

                .flex {

                    .foods_img,
                    .foods_text {
                        width: 100%;

                        @media (width < 640px) {
                            width: fit-content;
                            margin-inline: auto;
                        }
                    }

                    .foods_img {
                        img {
                            left: 0 !important;
                        }
                    }
                }
            }

            .foods_text {
                @media (width < 640px) {
                    width: fit-content;
                    margin-inline: auto;
                }
            }
        }

        .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 (width < 640px) {
                    width: 100%;

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

                &:first-of-type {
                    li {
                        &:nth-of-type(3) {
                            margin-bottom: 95px;

                            @media (width < 640px) {
                                margin-bottom: 55px;
                            }
                        }
                    }
                }

                &:last-of-type {
                    li {
                        &:nth-of-type(4) {
                            margin-bottom: 95px;

                            @media (width < 640px) {
                                margin-bottom: 55px;
                            }
                        }
                    }
                }

                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;
                        }
                    }


                    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: grid;
            grid-template-columns: auto 1fr;
            position: relative;
            font-size: clamp(1rem, 1.5vw, 1.1rem);
            font-family: 'Noto Sans JP';

            &::before {
                content: "※";
            }
        }

        .attention_area {
            width: 90%;
            margin: 0 auto;

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

            .area_text {

                @media (width < 640px) {
                    width: 100%;
                }

                >p,
                .c-spbr {
                    font-family: 'Noto Sans JP';
                    line-height: 1.8;
                    font-size: 1rem;
                    margin-bottom: 15px;
                }
            }

            .area_time {
                margin-bottom: 30px;

                >p {
                    padding-bottom: 6px;
                    border-bottom: dashed 1px;
                    width: 15%;
                    font-family: 'Noto Sans JP';
                    font-size: clamp(1.2rem, 2vw, 1.5rem);

                    @media (width < 640px) {
                        width: 100%;
                    }
                }

                .time {
                    font-family: 'Noto Sans JP';
                    font-size: clamp(1.2rem, 2vw, 1.5rem);
                    position: relative;
                    margin-bottom: 5px;

                    span {
                        font-family: 'Noto Sans JP';
                        font-size: clamp(1rem, 2vw, 1.3rem);
                    }
                }

                .day {
                    display: flex;
                    align-items: baseline;
                    gap: 0 5px;
                    font-size: clamp(2.5rem, 4vw, 3rem);
                    margin-bottom: 5px;
                }

                .circle {
                    position: relative;
                    bottom: 7px;
                    display: grid;
                    place-items: center;
                    color: #fff;
                    z-index: 0;
                    background: #AC1F00;
                    width: 30px;
                    height: 30px;
                    border-radius: 50px;
                    font-size: clamp(.8rem, 1vw, 1rem);
                }
            }

            .area_map {
                width: 100%;
                text-align: right;

                .annotation {
                    font-family: 'Noto Sans JP';
                    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/osechi2027/contact.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;
            }
        }
    }
}
}
}