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

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


/* #hero.slider {
    position: relative;
    width: 100%;
    height: clamp(600px, 80vh, 800px);
    overflow: hidden;
}

#hero .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#hero .slide.active {
    opacity: 1;
    z-index: 1;
}

#hero .slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

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

#about img {
    width: 50%;
    border-radius: var(--radius) 0 0 var(--radius);
}

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

#method .intro {
    margin-bottom: 6rem;
}

#method ul.flex {
    row-gap: 4rem;
}

#method li {
    width: 30%;
}

#method figure > div {
    background-color: #fff;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin-bottom: 2rem;
}

#method figure span {
    display: block;
    margin-bottom: 2rem;
    font-family: "EB Garamond", serif;
    color: var(--c-sub);
    font-size: 2rem;
}

#method figure img {
    width: 28%;
}

#method li:first-child img {
    transform: scale(1.25);
}

#concern .flex {
    gap: 4rem;
}

#concern ul {
    width: 50%;
}

#concern img {
    width: 50%;
    padding-inline: 5%;
}

#reasons ol {
    margin-bottom: 2rem;
    row-gap: 4rem;
}

#reasons li {
    width: 30%;
    padding-block: 5rem;
    position: relative;
}

#reasons li span {
    position: absolute;
    top: -1rem;
    left: 1rem;
    font-size: var(--fs-lg);
    color: var(--c-sub);
}

#reasons h3 {
    margin-bottom: 1em;
}

#reasons li img {
    height: min(30vw, 12rem);
    width: auto;
}

#reasons strong {
    margin-top: 3rem;
}

section#answer {
    background-image: url(/assets/img/common/bg_02.png);
    background-position: center;
    background-size: cover;
    padding-block: clamp(5rem, 10vw, 7rem);
}

#answer .card {
    max-width: 800px;
    background-color: rgba(255, 255, 255, 0.8);
    padding-block: 5rem;
}

#answer span {
    display: block;
    font-size: clamp(3rem, 4vw, 3.6rem);
    margin-bottom: .8em;
}

#answer strong {
    display: block;
    margin-bottom: 1rem;
}

#results li.card {
    padding: min(4vw, 3rem);
}

#results figure {
    gap: 4rem;
}

#results .card:nth-child(n + 2) {
    margin-top: 5rem;
}

#results .img-content {
    width: 35%;
}

#results .img-content div {
    position: relative;
}

#results .img-content div:first-child {
    margin-bottom: 2rem;
}

#results .img-content span {
    position: absolute;
    font-family: "EB Garamond", serif;
    letter-spacing: .1em;
    top: 0;
    left: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding-inline: .7em;
}

#results figcaption {
    width: 65%;
}

#results h3 {
    margin-bottom: 3rem;
    padding-bottom: .5rem;
}

#results figcaption ul {
    gap: 2rem;
    margin-bottom: 2rem;
}

#results .care li {
    background-color: var(--c-sub-light);
    aspect-ratio: 1 / 1;
    padding: 3rem;
    border-radius: 50%;
    gap: .5rem;
}

#results .care span {
    font-size: clamp(2.5rem, 2vw, 3rem);
    padding-inline: .5rem;
}

#voice ul {
    align-items: stretch;
    row-gap: 3rem;
}

#voice li {
    width: 32%;
    padding: min(3vw, 2rem);
}

#voice img {
    width: clamp(12rem, 20vw, 14rem);
    margin-bottom: .5rem;
}

#voice .btn-wrap a{
    margin-inline: auto;
    margin-top: 6rem;
}

#future .flex {
    gap: 4rem;
}

#future .text-content {
    width: 50%;
}

#future .btn {
    margin-top: 4rem;
}

#future img {
    width: 50%;
    padding-inline: 7%;
}

#access .flex {
    gap: 4rem;
}

#access .map {
    width: 50%;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

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

#access div.flex img {
    width: 50%;
}

#access .text-content {
    width: 50%;
}

#access h3 {
    margin-bottom: 1rem;
    margin-bottom: 1.5rem;
}

#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.last {
    margin-bottom: 0;
}

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

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

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

    #about .text-content br {
        display: none;
    }

    #about img {
        border-radius: var(--radius);
    }

    #top-page #method li {
        width: 100%;
    }
    
    #method figure > div {
        margin-inline: auto;
        max-width: 300px;
        width: 70%;
        margin-bottom: 1rem;
    }

    #method figcaption br {
    display: none;
}

    #top-page #concern img {
        width: 60%;
        padding-inline: 0;
    }

    #top-page #reasons li {
        width: 70%;
        max-width: 300px;
    }

    #answer .card {
        padding-block: 4rem;
    }

        #top-page #future img {
        width: 60%;
        padding-inline: 0;
    }
}