@import url("variables.css");

header {
    height: 650px;
    padding: 2rem calc(var(--w-pc) / 2) 3rem;
}

.mascot {
    position: absolute;
    bottom: -52px;
    left: 0;
    right: 0;
}

.mascot p {
    margin-bottom: 1em;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
    letter-spacing: .1em;
}

.mascot img {
    display: block;
    width: 300px;
}

main {
    border-top: 2px solid var(--c-font);
}

#concept h2,
#info h2 {
    margin-bottom: .5em;
}

h3 {
    margin-bottom: .3em;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
    letter-spacing: .1em;
}

#concept {
    padding-block: 15rem;
    margin-top: 5rem;
}

#concept .flex {
    justify-content: center;
}

#concept .bg {
    width: 40%;
}

#concept .plate.pc {
    position: absolute;
    width: min(25vw, 300px);
    top: -20%;
    left: -30%;
    z-index: 2;
}

#view>div {
    height: clamp(5rem, 30vw, 40rem);
    overflow: hidden;
    background-image: url(/assets/img/home/concept_03.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#menu {
    padding-block: 15rem;
    margin-top: 5rem;
}

#menu h2 {
    margin-bottom: 2em;
}

#menu .small {
    margin-left: .5em;
}

.has-menu figure:nth-child(n + 2) {
    margin-top: 10rem;
}

.has-menu img {
    width: min(50%, 1000px);
}

.has-menu figcaption {
    width: 50%;
    padding-right: var(--w-pc);
}

.no-menu {
    padding-bottom: 10rem;
    margin-top: 15rem;
}

.no-menu figure {
    width: 47%;
}

.no-menu img {
    margin-bottom: 4rem;
}

.takeout {
    margin-top: 15rem;
}

.takeout .container {
    padding: 6rem 6rem;
    border: 1px solid var(--c-line);
}

.takeout .flex {
    gap: 3rem;
    margin-bottom: 4rem;
}

.takeout .flex img {
    width: 50%;
}

.takeout h3 {
    margin-bottom: .3em;
}

.takeout .btn {
    margin-top: 3rem;
}

#space {
    padding-block: 15rem 12rem;
}

#space img.pc {
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(30vw, 350px);
    z-index: 3;
}

#space .flex img {
    width: min(67vw, 850px);
    transform: translateX(var(--w-pc));
}

#space div:has(>strong) {
    padding-left: min(34vw, 40rem);
    padding-block: 6rem;
}

#info {
    padding-block: 15rem;
}

#info .desc {
    width: 50%;
}

dl {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    line-height: 1.5em;
}

dt,
dd {
    padding-block: .75em;
    border-bottom: 1px solid var(--c-line);
}

dt {
    font-weight: 400;
    grid-column: 1;
    padding-left: 2rem;
}

dd {
    grid-column: 2;
    padding-inline: 2rem;
}

#info img {
    width: 50%;
}

.map {
    margin-top: 15rem;
}

.map>div {
    width: 100%;
    aspect-ratio: 16 / 9;
}

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

@media screen and (max-width:992px) {

    .btn,
    h2 {
        margin-inline: auto;
    }

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

    h3 {
        margin-bottom: .3em;
        text-align: center;
    }

    header {
        height: 500px;
        padding: 1rem calc(var(--w-sp) / 2) 0;
    }

    .mascot {
        bottom: -43px;
    }

    .mascot img {
        display: block;
        width: 250px;
    }

    #concept {
        margin-top: 4rem;
        padding-block: 8rem;
        text-align: center;
    }

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

    #concept .container {
        display: block;
    }

    #concept .plate.sp {
        position: absolute;
        width: min(45%, 300px);
        top: -10vw;
        left: 0;
    }

    #concept .full.sp {
        width: 70%;
        margin: 0 0 4rem auto;
    }

    #concept .bg {
        width: 100%;
    }

    #menu {
        margin-top: 2rem;
        padding-block: 8rem 4rem;
        text-align: center;
    }

    #menu .small {
        display: block;
        margin-left: 0;
    }

    .has-menu {
        padding-inline: var(--w-sp);
    }

    .has-menu .flex {
        row-gap: 2rem;
    }

    .has-menu figure:nth-child(n + 2) {
        margin-top: 10rem;
    }

    .has-menu img {
        width: 100%;
    }

    .has-menu figcaption {
        display: block;
        width: 100%;
        padding: 0;
    }

    .no-menu {
        padding-block: 6rem;
        margin-top: 10rem;
        background-color: var(--c-bg);
    }

    .no-menu .flex {
        gap: 8rem;
    }

    .no-menu img {
        margin-bottom: 2rem;
    }

    .no-menu figure {
        width: 100%;
    }

    .takeout {
        margin-top: 8rem;
    }

    .takeout .container {
        padding: 4rem 2rem;
    }

    .takeout .flex {
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .takeout .btn {
        margin-top: 2rem;
    }

    #space {
        padding-block: 8rem 2rem;
    }

    #space .flex img {
        display: block;
        width: 100%;
        margin-bottom: 2rem;
        transform: translateX(0);
    }

    #space div:has(>.lh) {
        padding: 0;
        text-align: center;
    }

    #info {
        padding-block: 8rem;
    }

    #info .desc {
        width: min(100%, var(--mw-sp));
        margin-inline: auto;
    }

    #info img {
        width: 100%;
        margin-bottom: 2rem;
    }

    .map {
        margin-top: 8rem;
    }

    .map h3 {
        margin-bottom: .5m;
    }
}