#hero {
    position: relative;
    height: clamp(700px, 75vh, 1000px);
    overflow: hidden;
}

#hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    min-width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

#catchphrase {
    position: relative;
    background-color: var(--c-bg);
}

#catchphrase::before {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: calc(50vw / 18.89);
    background-image: url(/assets/img/background/scalloped.svg);
    background-size: 50vw;
    background-position: center;
    background-repeat: repeat-x;
    top: 100%;
    transform: translateY(-3px);
}

#catchphrase .flex img {
    width: 40%;
}

#online .container.flex>div {
    width: 55%;
}

#online img {
    width: 45%;
    border-radius: var(--radius-img);
}

#online h2 {
    margin-bottom: 1em;
}

#online .text-block {
    margin-bottom: 6rem;
}

#online a {
    margin-top: 3rem;
}

section#overview {
    padding-top:  clamp(10rem, 12vw, 14rem);
}

#overview li:nth-child(n+2) {
    margin-top: 12rem;
}

#overview h2 {
    margin-bottom: 1em;
}

#overview a {
    margin-top: 3rem;
}

#overview figcaption div {
    margin-bottom: 3rem;
}

#overview .flex>img {
    width: 55%;
    border-radius: var(--radius-img);
}

#overview figcaption {
    width: 45%;
}

#list ul.flex {
    flex-wrap: wrap;
    row-gap: 8rem;
    margin-bottom: 8rem;
    text-align: center;
}

#list ul.flex>* {
    width: 31%;
}

#list figure img {
    margin-bottom: 1rem;
}

#news .text-center {
    margin-bottom: 4rem;
}

#news .btn .flex {
    gap: .5em;
}

.slider-container {
    width: 100vw;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.slide-track {
    display: flex;
    padding: 0;
    margin: 0;
}

.slide-track li {
    flex: 0 0 auto;
    width: 20vw;
    list-style: none;
}

@media screen and (max-width:992px) {
    .slide-track li {
        width: 40vw;
    }
}

.slide-track img {
    width: 100%;
    height: auto;
    display: block;
}

#access h2 {
    margin-bottom: 2.5em;
}

#access .flex img {
    width: 50%;
    border-radius: var(--radius-img);
}

#access .info {
    width: 50%;
}

#access dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 2em;
}

#access dt {
    font-weight: 400;
}

#access dd {
    grid-column: 2;
    margin-bottom: 1.5rem;
}

#access dd+dd {
    margin-top: -1.5rem;
}

#access .shop-name {
    margin-bottom: 2.5rem;
}

#access .shop-address {
    margin-bottom: 2rem;
}

.map {
    aspect-ratio: 16/9;
    margin-top: 12rem;
    overflow: hidden;
    border-radius: var(--radius-img);
}

.map iframe {
    width: 100%;
    height: 100%;
}

@media screen and (max-width:992px) {
    .btn {
        margin-inline: auto;
    }

    #top-page main .flex-column-sp>*,
    #top-page main .flex-column-re-sp>* {
        width: 100%;
    }

    #catchphrase::before {
        height: calc(100vw / 18.89);
        background-size: 100vw;
    }

    #catchphrase .flex {
        row-gap: 3rem;
    }

    #catchphrase .flex img {
        width: min(80vw, 300px);
    }

    #catchphrase .flex div {
        text-align: center;
    }

    #concept {
        text-align: center;
    }

    #concept h2 {
        margin-bottom: 1em;
    }

    #concept .text-block {
        margin-bottom: 3rem;
    }

    #overview {
        text-align: center;
    }

    #overview h2 {
        margin-bottom: .5em;
    }

    #online h2 {
        margin-bottom: .5em;
    }

    #news .flex {
        gap: 2rem;
    }

    #access .shop-name {
        margin-bottom: .5em;
    }

    .map {
        margin-top: 6rem;
    }
}