@charset 'utf-8';

/* メインビジュアル */
.mv {
    display: grid;
    grid-template: 1fr/ repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    width: 100%;

    .mv-video {
        width: 100%;
        grid-area: 1/1/2/4;
    }

    .mv-logo {
        z-index: 10;
        width: 50%;
        grid-area: 1/2/2/3;
    }
}

/* ********************** */
/* イントロダクション-セクション */
.introduction {
    display: grid;
    grid-template: 1fr / repeat(2, 1fr);
    gap: 3%;
    margin: clamp(2.5rem, 1.136rem + 7.27vw, 7.5rem) 0 clamp(2.5rem, 1.136rem + 7.27vw, 7.5rem) 2rem;

    .intoro-container {
        display: grid;
        grid-template: .1fr .1fr .3fr auto / 0.5fr 1fr .5fr;

        h2 {
            display: inline-block;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.2;
            text-shadow: 0px 5px 4px rgba(252, 252, 252, 0.3);
            font-size: clamp(1rem, 0.781rem + 1.09vw, 1.875rem);

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

        h2:nth-of-type(1) {
            grid-column: 1/4;
            grid-row: 1;

            .txt-size:nth-of-type(1) {
                font-size: clamp(1.5rem, 0.955rem + 2.18vw, 3rem);
            }

            .txt-size:nth-of-type(2) {
                font-size: clamp(2rem, 1.455rem + 2.18vw, 3.5rem);
            }
        }

        h2:nth-of-type(2) {
            grid-column: 1/4;
            grid-row: 2;

            .txt-size:nth-of-type(1) {
                font-size: clamp(2rem, 1.455rem + 2.18vw, 3.5rem);
            }

            .txt-size:nth-of-type(2) {
                font-size: clamp(1.5rem, 0.955rem + 2.18vw, 3rem);
            }
        }

        p {
            grid-column: 1/4;
            grid-row: 3;
            margin-right: 7%;
            margin-top: 3%;
        }

        .btn {
            grid-column: 2/3;
            grid-row: 4;
            width: 80%;
            justify-self: center;
            align-self: center;
        }
    }
}

@media screen and (max-width: 768px) {
    .introduction {
        grid-template: 1fr / 1fr;
        gap: 0;
        margin: clamp(2.5rem, 1.136rem + 7.27vw, 7.5rem) 0 clamp(2.5rem, 1.136rem + 7.27vw, 7.5rem) 0;


        .intoro-container {
            grid-template: .1fr .1fr .3fr auto / .5fr 1fr .5fr;
            grid-area: 1/1/2/2;
            padding: 1rem 0 1rem 1rem;

            h2 {
                line-height: 1.3;
                text-shadow: 0px 5px 4px rgba(0, 0, 0, 1);
            }
        }

        img {
            grid-area: 1/1/2/2;
            z-index: -1;
            height: 100%;
            width: 100%;
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 15%, rgba(0, 0, 0, .4) 85%, rgba(0, 0, 0, 0) 100%);
        }

        .btn {
            grid-column: 2/3;
            grid-row: 4;
            margin-top: 5%;
            width: 100%;
            justify-self: center;
            align-self: center;
        }
    }
}


/* ********************** */
/* メニュー-セクション */
.shopmenu {
    display: grid;
    grid-template-columns: .1fr 1fr .3fr .3fr .3fr;
    grid-template-rows: 1fr 1fr .8fr;
    margin: 0 2rem clamp(2.5rem, 1.136rem + 7.27vw, 7.5rem) 0;
    height: 70vh;
    position: relative;
    overflow: hidden;


    .shopmenu-container {
        display: grid;
        grid-template: auto.5fr auto auto/.5fr 1fr .5fr;
        gap: 3%;
        grid-area: 1 / 3 / 3 / 6;
        position: relative;
        width: 100%;
        height: 65vh;
        padding: 2rem;
        box-shadow: 10px 10px 40px 20px rgba(252, 252, 252, 0.15);

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url(../img/dish.png);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            opacity: .2;
            z-index: -1;
        }

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--main-bk);
            z-index: -2;
        }

        h2 {
            grid-column: 2/3;
            grid-row: 1;
            justify-self: center;
            align-self: center;
        }

        p {
            grid-column: 1/4;
            grid-row: 2;
        }

        .btn:nth-of-type(1) {
            grid-column: 2/3;
            grid-row: 3;
            align-self: center;
        }

        .btn:nth-of-type(2) {
            grid-column: 2/3;
            grid-row: 4;
            align-self: center;
        }
    }

    img {
        grid-area: 1 / 1 / 4 / 4;
        z-index: -3;
        height: 100%;
        aspect-ratio: 1.7;
        object-fit: cover;
    }
}

@media screen and (max-width: 768px) {
    .shopmenu {
        grid-template-columns: 0.1fr 1fr;
        grid-template-rows: 1fr .2fr 1fr 1fr;
        height: 100lvh;
        margin: 0 0 clamp(2.5rem, 1.136rem + 7.27vw, 7.5rem) 0;


        .shopmenu-container {
            grid-area: 2 / 2 / 5 / 3;
            gap: 0;
            padding: 1rem;
        }

        img {
            grid-area: 1 / 1 / 3 / 3;
        }
    }
}

/* ********************** */
/* コース-セクション */
.course {
    display: grid;
    grid-template-columns: .3fr .3fr .3fr 1fr .1fr;
    grid-template-rows: 1fr 1fr .8fr;
    margin: 0 0 clamp(2.5rem, 1.136rem + 7.27vw, 7.5rem) 2rem;
    height: 70vh;
    position: relative;
    overflow: hidden;
}

.course-container {
    display: grid;
    grid-template: auto .5fr auto / .5fr 1fr .5fr;
    grid-area: 2 / 1 / 4 / 4;
    position: relative;
    width: 100%;
    height: 65vh;
    padding: 2rem;
    box-shadow: -10px 10px 40px 20px rgba(252, 252, 252, 0.15);
}

.course-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../img/dish.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .2;
    z-index: -1;
}

.course-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--main-bk);
    z-index: -2;
}

.course-container h2 {
    grid-column: 2/3;
    grid-row: 1;
    justify-self: center;
    align-self: center;
}

.course-container p {
    grid-column: 1/4;
    grid-row: 2;
}

.course-container .btn {
    grid-column: 2/3;
    grid-row: 3;
    align-self: center;
}

.course img {
    grid-area: 1 / 3 / 4 / 6;
    z-index: -3;
    height: 100%;
    aspect-ratio: 1.7;
    object-fit: cover;
    justify-self: end;
}

@media screen and (max-width: 768px) {
    .course {
        grid-template-columns: 1fr 0.1fr;
        grid-template-rows: 1fr .2fr 1fr 1fr;
        height: 100lvh;
        margin: 0 0 clamp(2.5rem, 1.136rem + 7.27vw, 7.5rem) 0;
    }

    .course-container {
        grid-area: 2 / 1 / 5 / 2;
        gap: 0;
        padding: 1rem;
    }

    .course img {
        grid-area: 1 / 1 / 3 / 3;
    }
}

/* ********************** */
/* 空間-セクション */
.space {
    display: grid;
    grid-template-columns: .1fr 1fr .3fr .3fr .3fr;
    grid-template-rows: 1fr 1fr .8fr;
    margin: 0 2rem clamp(2.5rem, 1.136rem + 7.27vw, 7.5rem) 0;
    height: 70vh;
    position: relative;
    overflow: hidden;

    .space-container {
        display: grid;
        grid-template: .4fr 1fr/.5fr 1fr .5fr;
        grid-area: 1 / 3 / 3 / 6;
        position: relative;
        width: 100%;
        height: 65vh;
        padding: 2rem;
        box-shadow: 10px 10px 40px 20px rgba(252, 252, 252, 0.15);

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url(../img/dish.png);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            opacity: .2;
            z-index: -1;
        }

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--main-bk);
            z-index: -2;
        }

        h2 {
            grid-column: 2/3;
            grid-row: 1;
            justify-self: center;
            align-self: center;
        }

        p {
            grid-column: 1/4;
            grid-row: 2;
        }
    }

    img {
        grid-area: 1 / 1 / 4 / 4;
        z-index: -3;
        height: 100%;
        aspect-ratio: 1.7;
        object-fit: cover;
    }
}

@media screen and (max-width: 768px) {
    .space {
        grid-template-columns: 0.1fr 1fr;
        grid-template-rows: 1fr .2fr 1fr 1fr;
        height: 100vh;
        margin: 0 0 clamp(2.5rem, 1.136rem + 7.27vw, 7.5rem) 0;

        .space-container {
            grid-area: 2 / 2 / 5 / 3;
            gap: 0;
            padding: 1rem;
        }

        img {
            grid-area: 1 / 1 / 3 / 3;
        }
    }
}


/* ********************** */
/* お知らせ一覧 */
.news {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    background-color: var(--wt);
    height: 60vh;

    h2 {
        text-shadow: 0px 5px 4px rgba(0, 0, 0, .3);
    }

    h2,
    a,
    .news-list,
    .news-btn {
        color: var(--main-bk);
    }

    .news-list {
        display: grid;
        grid-template: repeat(2, 1fr) /.5fr 1fr;
        gap: 0 5%;
        width: 85%;
        height: 100%;
        align-items: center;
        justify-self: end;

        dt {
            justify-self: end;
        }
    }

    .news-btn {
        padding: 1rem 2rem;
        border: 1px solid var(--main-bk);
        text-align: center;
        box-shadow: 0px 5px 4px rgba(0, 0, 0, .3);
        transition: all 0.3s ease;
        position: relative;
        top: 0;

        &:hover {
            top: 5px;
            box-shadow: none;
        }

    }
}

@media screen and (max-width: 768px) {
    .news .news-list {
        width: 100%;
        grid-template: repeat(4, 1fr)/1fr;
        padding: 0 2rem;

        dt {
            justify-self: start;
            align-self: end;
        }

        dd {
            align-self: start;
        }

        dt:nth-of-type(1) {
            grid-row: 1;
        }

        dt:nth-of-type(2) {
            grid-row: 3;
        }

        dd:nth-of-type(1) {
            grid-row: 2;
        }

        dd:nth-of-type(2) {
            grid-row: 4;
        }
    }
}

/* ********************** */