@charset "UTF-8";

/* 共通 */
body {
    color: #565861;
}

.ttl_en,
.ttl_en::before {
    color: #565861;
}





/* #mv */
.top__mv__point__list {
    margin-block: 4.5em 7.5em;
}





/* #gallery */
#gallery {
    padding-bottom: 7.5em;
}

.top__gallery__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}





/* #concept */
.top__concept__main {
    position: static;
    padding-block: 4.5em;
}

.top__concept__main::before {
    display: none;
}

.top__concept__ttl {
    flex-shrink: 0;
}

.top__concept__main p {
    color: #565861;
}

.top__concept__movie video {
    width: 100%;
}





/* #plan */
.top__plan__inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10%;
}

.top__plan__ttl {
    margin: 0;
}

.top__plan__info {
    margin-top: 2.5em;
}

.top__plan__img {
    margin: 0;
    flex-basis: 30%;
    max-width: 300px;
}

.fadeInRight img {
    transform: scale(1);
}





/* .conversion__nav */
.conversion__nav__list {
    gap: .5em;
}

.conversion__nav__item {
    background-color: #e6e4da;
    background-color: #fff;
    padding: 1em;
}

.conversion__nav__item a {
    text-align: center;
    font-size: 100%;
    color: #333;
    position: static;
}

.conversion__nav__item a img {
    width: 25%;
    max-width: 150px;
}

.conversion__nav__item a span {
    font-size: 100%;
    color: #fff;
    margin-top: 1em;
    background: #2e2e2e;
    padding: .5em 1em;
    border-radius: 4px;
    -webkit-background-clip: initial;
    background-clip: initial;
    display: flex;
    align-items: center;
}


.conversion__nav__item a span::after {
    content: "";
    display: inline-block;
    position: static;
    inline-size: 0.5em;
    block-size: 0.5em;
    border-block-start: 0.15rem solid #fff;
    border-inline-end: 0.15rem solid #fff;
    vertical-align: baseline;
}

.conversion__nav__item.started span::after {
    transition: none;
    background-color: transparent;
    transform: scaleY(1) rotate(45deg) translateY(-.25em);

}

.conversion__nav__item a:hover span::after {
    transform: scaleY(1) rotate(45deg)translateY(-.25em);
    transform-origin: left bottom;
}

.conversion__nav__item a span::before {
    display: none;
}





/* footer */
.footer {
    background: linear-gradient(0deg, #434343 0%, #434343 80%, #555552 77.5%, #555552 100%);
}

@media screen and (min-width: 768px) and (max-width: 1023px) {}

@media screen and (max-width: 767px) {
    .top__mv::before {
        inset-block-start: 20%;
    }

    .top__mv__copy {
        font-size: 150%;
        bottom: 5%;
        left: -.5em;
    }

    .top__mv__point__list {
        margin-block: 4.5em;
    }

    .top__gallery__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .top__plan__inner {
        flex-direction: column;
        align-items: center;
        gap: 2em;
    }

    .top__plan__main {
        display: flex;
        gap: 2em;
    }

    .top__plan__info {
        margin-top: 0;
    }

    .conversion__nav__list {
        row-gap: .5em;
    }

    .conversion__nav__item a img {
        width: 100px;
    }
}