@charset "UTF-8";

.main * {
    font-family: "Zen Old Mincho", serif;
    font-weight: 500;
    font-style: normal;
}

.delight-renovation {
    line-height: 2;

    & .fv {
        padding-block: 0 16px;
        background-color: #e1dcd3;

        @media (width > 750px) {
            display: flex;
            padding-block: 80px;
            padding-inline: max(0px, 50% - 700px);
        }

        & .img {
            @media (width > 750px) {
                flex-basis: 50%;
                flex-shrink: 0;
            }

            & img {}
        }

        & .text {
            box-sizing: border-box;
            padding: 32px 16px;

            @media (width > 750px) {
                max-width: 600px;
                padding: 64px 64px 0;
            }

            & h1 {
                margin-block: 0 16px;

                @media (width > 750px) {
                    margin-block: 0 32px;
                }

                & img {
                    width: 240px;

                    @media (width > 750px) {
                        width: 420px;
                    }
                }
            }

            & h2 {
                margin-block: 0 16px;
                font-size: 26px;
                font-weight: 700;

                @media (width > 750px) {
                    margin-block: 0 32px;
                    font-size: 30px;
                }
            }

            & p {
                color: #000000;
                font-size: 12px;

                @media (width > 750px) {
                    font-size: 16px;
                }
            }
        }
    }

    & .intro {
        background-color: #191918;
        color: #ffffff;

        & .heading {
            padding-block: 64px;
            padding-inline: max(16px, 50% - 700px);
            background-image: url('../img/delight-renovation/intro-bg.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;

            @media (width > 750px) {
                padding-block: 80px;
                background-image: url('../img/delight-renovation/intro-bg-md.jpg');
                text-align: center;
            }

            & h2 {
                margin-block: 0 32px;
                color: #ffffff;
                font-size: 26px;
                font-weight: 500;

                @media (width > 750px) {
                    font-size: 30px;
                }


            }

            & p {
                color: #ffffff;
                font-size: 12px;

                @media (width > 750px) {
                    font-size: 16px;
                }
            }
        }

        & .items {
            padding-block: 32px;
            padding-inline: max(24px, 50% - 600px);

            & .item {
                padding-block: 32px;

                @media (width > 750px) {
                    display: flex;
                    gap: 54px;
                }

                &.left {
                    & .text {
                        order: 2;
                    }
                }

                &.right {}

                & .text {
                    margin-block: 0 16px;

                    @media (width > 750px) {
                        margin-block: 64px 0;
                    }

                    & h3 {
                        margin-block: 0 24px;

                        & img {
                            height: 34px;

                            @media (width > 750px) {
                                height: 54px;
                            }
                        }
                    }

                    & h4 {
                        margin-block: 0 24px;
                        color: #e1dcd3;
                        font-size: 20px;

                        @media (width > 750px) {
                            margin-block: 16px 64px;
                            font-size: 32px;
                        }
                    }

                    & p {
                        color: #e1dcd3;
                        font-size: 13px;
                        text-align: justify;

                        @media (width > 750px) {
                            font-size: 16px;
                        }
                    }
                }

                & .img {
                    display: grid;
                    place-items: center;

                    @media (width > 750px) {
                        flex-basis: 43%;
                        flex-shrink: 0;
                    }

                    & img {
                        grid-area: 1/1/1/1;

                        @media (width > 750px) {}

                        &:nth-child(1) {
                            position: relative;
                            z-index: 1;
                        }

                        &:nth-child(2) {
                            position: relative;
                            z-index: 2;

                            animation-name: intro-img-fade;
                            animation-delay: 3s;
                            animation-duration: 8s;
                            animation-iteration-count: infinite;
                            animation-direction: alternate;
                        }
                    }
                }
            }
        }
    }

    & .story {
        padding-block: 48px;
        background-color: #e1dcd3;

        @media (width > 750px) {
            padding-block: 80px;
        }

        & .heading {
            padding-inline: max(24px, 50% - 600px);

            & h2 {
                line-height: 1.5;

                @media (width > 750px) {
                    line-height: 2;
                }

                & strong {
                    display: block;
                    font-family: "Baskervville", serif;
                    font-optical-sizing: auto;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 55px;
                }

                & span {
                    display: block;
                    font-size: 16px;
                    font-weight: 500;
                    letter-spacing: 0.1em;
                }
            }
        }

        & .story-item {
            margin-block: 48px;

            @media (width > 750px) {}

            & .board {
                margin-inline: 24px;

                @media (width > 750px) {
                    margin-inline: max(0px, 50% - 700px);
                }

                & .inner {
                    @media (width > 750px) {
                        display: flex;
                    }

                    & .img {
                        display: block;
                        margin-block: 0 16px;

                        @media (width > 750px) {
                            flex-basis: 50%;
                            flex-shrink: 0;

                            & img {
                                width: 100%;
                                aspect-ratio: 64 / 55;
                                object-fit: cover;
                            }
                        }
                    }

                    & .cont {
                        @media (width > 750px) {
                            margin-block: 64px 0;
                            margin-inline: 48px;
                        }

                        & h3 {
                            margin-block: 0 16px;
                            font-size: 21px;
                            font-weight: 700;

                            @media (width > 750px) {
                                font-size: 32px;
                            }
                        }

                        & p {
                            font-size: 13px;

                            @media (width > 750px) {
                                font-size: 16px;
                            }
                        }

                        & .data {
                            display: flex;
                            align-items: flex-start;
                            justify-content: space-between;
                            gap: 32px;
                            margin-block: 24px 0;

                            @media (width > 750px) {
                                justify-content: flex-start;
                                gap: 54px;
                            }

                            & h4 {
                                padding-block: 0 4px;
                                background-image: linear-gradient(to bottom, #9d8b6c, #9d8b6c);
                                background-repeat: no-repeat;
                                background-position: bottom left;
                                background-size: 10px 1px;
                                font-size: 12px;

                                @media (width > 750px) {
                                    font-size: 14px;
                                }
                            }

                            & table {
                                flex-basis: 80%;
                                flex-shrink: 0;
                                border-bottom: 1px solid #cbc6bd;

                                @media (width > 750px) {
                                    max-width: 320px;
                                }

                                & th {
                                    width: 110px;
                                    padding: 0.5em 1em;
                                    border-top: 1px solid #cbc6bd;
                                    background-color: #d9d3c8;
                                    font-size: 12px;
                                    font-weight: 700;
                                    text-align: left;

                                    @media (width > 750px) {
                                        width: 130px;
                                        font-size: 14px;
                                    }
                                }

                                & td {
                                    padding: 0.5em 1em;
                                    border-top: 1px solid #cbc6bd;
                                    font-size: 12px;

                                    @media (width > 750px) {
                                        font-size: 14px;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            & .detail {
                margin-block: 32px;
                margin-inline: 24px;

                @media (width > 750px) {
                    margin-block: 80px;
                    margin-inline: max(16px, 50% - 600px);
                }

                &:is(.opened) {
                    &~.toggle {
                        & .opener {
                            display: none;
                        }
                    }
                }

                &:not(:is(.opened)) {
                    display: none;

                    &~.toggle {
                        & .closer {
                            display: none;
                        }
                    }
                }

                & .picks {
                    margin-block: 0 48px;

                    @media (width > 750px) {
                        display: flex;
                        gap: 32px;
                        margin-block: 0;
                    }

                    & .item {
                        margin-block: 0 24px;

                        @media (width > 750px) {
                            flex-basis: calc((100% - 64px) / 3);
                            flex-shrink: 0;
                            display: flex;
                            flex-direction: column;
                            margin-block: 0 64px;
                        }

                        & h4 {
                            padding-inline: 24px 0;
                            padding-block: 24px 0;
                            background-image: linear-gradient(to bottom, #222222, #222222), linear-gradient(to bottom, #222222, #222222);
                            background-repeat: no-repeat;
                            background-position: top left;
                            background-size: 85px 1px, 1px 85px;

                            @media (width > 750px) {
                                padding-block: 64px 0;
                                padding-inline: 32px 0;
                                background-size: 100px 1px, 1px 100px;
                            }

                            & small {
                                display: block;
                                font-size: 14px;
                                font-weight: 700;

                                @media (width > 750px) {}
                            }

                            & span {
                                display: block;
                                font-size: 21px;
                                font-weight: 700;

                                @media (width > 750px) {}
                            }
                        }

                        & p {
                            margin-block: 16px;
                            padding-inline: 24px;

                            @media (width > 750px) {
                                margin-block: 16px 32px;
                                padding-inline: 32px 24px;
                            }
                        }

                        & .img {
                            @media (width > 750px) {
                                margin-block: auto 0;
                            }

                            & img {
                                width: 100%;
                                aspect-ratio: 38 / 36;
                                object-fit: cover;
                            }
                        }
                    }
                }

                & .gallery {
                    @media (width > 750px) {}

                    & .slider {
                        & .img {
                            & img {
                                display: block;
                                width: 100%;
                                aspect-ratio: 120 / 65;
                                object-fit: cover;
                            }
                        }

                        & :is(.slick-prev, .slick-next) {
                            border-color: #ffffff;

                            @media (max-width: 540px) {
                                display: block !important;
                            }
                        }

						& .slick-prev {
							@media (max-width: 750px) {
								left: 15px;
							}
						}

						& .slick-next {
							@media (max-width: 750px) {
								right: 15px;
							}
						}

                        & .slick-dots {
                            margin-block: -32px 0;
                            margin-inline: 16px;
                            text-align: left;

							@media (max-width: 750px) {
								margin-block: -13px 0;
								margin-inline: 10px;
							}

                            & li {
								@media (max-width: 750px) {
									margin: 0 1.5px;
								}
                                &.slick-active {
                                    & button {
                                        &::before {
                                            background-color: #9c8c6c;
                                        }
                                    }
                                }

                                & button {
                                    width: 15px;
                                    height: 2px;

                                    @media (width > 750px) {
                                        width: 30px;
                                    }

                                    &::before {
                                        width: 15px;
                                        height: 2px;
                                        border-radius: 0;
                                        opacity: 1;
                                        background-color: #ffffff;

                                        @media (width > 750px) {
                                            width: 30px;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    & .catch {
                        margin-block: 24px;

                        @media (width > 750px) {
                            display: flex;
                            gap: 5%;
                            margin-block: 48px;
                        }

                        & h4 {
                            margin-block: 0 16px;
                            font-size: 21px;
                            font-weight: 700;
                            line-height: 1.5;

                            @media (width > 750px) {
                                flex-basis: 45%;
                                flex-shrink: 0;
                                font-size: 32px;
                            }
                        }

                        & p {
                            font-size: 13px;

                            @media (width > 750px) {
                                font-size: 16px;
                            }
                        }
                    }
                }
            }

            & .action {
                justify-content: center;

                &.toggle {
                    margin-block: 32px;

                    @media (width > 750px) {
                        margin-block: 48px 80px;
                    }
                }

                & .opener {
                    &::before {
                        transform: rotate(90deg);
                    }
                }

                & .closer {
                    &::before {
                        transform: rotate(-90deg);
                    }
                }
            }
        }
    }

    & .banner {
        margin-inline: max(24px, 50% - 320px);
        margin-block: 64px;
        padding-block: 32px 16px;
        background-color: #eae9dc;
        line-height: 1.8;

        @media (width > 750px) {
            display: flex;
            align-items: center;
            padding-block: 16px;
        }

        & p {
            font-size: 11px;
            text-align: center;

            @media (width > 750px) {
                flex-grow: 1;
                padding-inline: 32px;
                font-size: 16px;
                text-align: left;
            }
        }

        & .btn {
            justify-content: center;
        }
    }
}

@keyframes intro-img-fade {
    0% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    55% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


.top_delight {
    & .delight_mess {
        & .mess_come {
            & a {
                display: flex;
                align-items: center;
                gap: 16px;
                font-size: 14px;
                text-decoration: none;
                color: #4d4d4d;

                &:hover {
                    opacity: 0.5;
                }

                &::after {
                    content: '>';
                    display: grid;
                    place-items: center;
                    width: 3em;
                    aspect-ratio: 1 / 1;
                    border: 1px solid #4d4d4d;
                    border-radius: 10em;
                    font-size: 12px;
                    font-weight: 700;
                }
            }
        }
    }
}