#hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* height: clamp(500px, 85vh, 1200px); */
    overflow: hidden;
}

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

main section#concept {
    padding-bottom: clamp(8rem, 15vw, 22rem);
}

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

.concept-1 {
    margin-bottom: clamp(8rem, 12vw, 14rem);
}

.concept-1 .text-block {
    width: 55%;
}

.concept-1 .img-1 {
    width: 45%;
}

.concept-2 .img-2 {
    width: 25vw;
}

.concept-2 .text-block {
    width: 55vw;
}

.concept-2 .text-block div {
    margin-bottom: 4rem;
}

.concept-2 .img-3 {
    width: 20vw;
    transform: translateY(80%);
}

#view {
    height: clamp(40rem, 40vh, 55rem);
    background-image: url(/assets/img/view/img_01.png?cache=1);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#overview h2 {
    margin-bottom: 1em;
    padding-left: 3rem;
}

#overview h3,
#type h3 {
    font-size: clamp(1.8rem, 1.5vw, 2.2rem);
    text-align: start;
}

#overview li {
    padding-block: 6rem;
    padding-inline: 3rem;
    border-top: 1px solid var(--c-border);
}

#overview li:last-child {
    border-bottom: 1px solid var(--c-border);
}

#overview figure {
    align-items: stretch;
    height: auto;
    gap: min(3vw, 6rem);
}

#overview figure img {
    display: block;
    width: 40%;
    height: auto;
    object-fit: cover;
}

#overview figcaption {
    position: relative;
    width: 60%;
}

#type ul {
    position: relative;
    padding-block: 2rem;
    border: 1px solid var(--c-border);
}

#type ul li {
    width: 50%;
    padding-block: 4rem 6rem;
    padding-inline: var(--pd-card);
}

#type ul li:last-child {
    border-left: 1px solid var(--c-border);
}

#type figure>img {
    margin-bottom: 2rem;
}

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

#news .btn {
    border-radius: 5rem;
}

#news .widget {
    max-width: 80rem;
    margin-inline: auto;
    margin-bottom: 6rem;
}

@media screen and (max-width:992px) {
    #hero {
        aspect-ratio: 2 / 3;
    }

    .concept-1.flex>* {
        width: 100%;
    }

    .concept-2 {
        flex-wrap: wrap;
    }

    .concept-2 .img-2 {
        order: 0;
        width: 40vw;
    }

    .concept-2 .text-block {
        order: 2;
        width: 100%;
    }

    .concept-2 .img-3 {
        order: 1;
        width: 25vw;
        transform: translateY(40%);
    }

    #concept {
        text-align: center;
    }

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

    #concept .btn {
        margin-inline: auto;
    }

    #overview {
        text-align: center;
    }

    #overview .container {
        width: 100vw;
    }

    #overview h2 {
        padding-left: 0;
    }

    #overview li {
        padding-inline: 0;
    }

    #overview figure {
        width: 90vw;
        margin-inline: auto;
    }

    #overview figure.flex>* {
        width: 100%;
    }

    #overview figcaption {
        row-gap: 3rem;
    }

    #overview figcaption p {
        text-align: start;
    }

    #overview .btn {
        margin-inline: auto;
    }

    #type .flex>* {
        width: 100%;
    }

    #type ul {
        padding-block: 0;
    }

    #type ul li:last-child {
        border-left: 0;
        border-top: 1px solid var(--c-border);
    }
}