/* TOP */
.tpl-header__logo .tpl-header__svg {
    fill: #3F2021;
}

.tpl-header__name {
    color: #3F2021;
}

.tpl-drawer__line {
    background: #3F2021;
}

/* mv */
.mv {
    position: relative;
    line-height: 0;
    overflow: hidden;
    width: 100%;
    background: #fff;
    pointer-events: none;
}

.mv video {
    width: 100%;
}

.mv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
}

.mv::after {
    content: "";
    padding-bottom: calc(56.25% - 120px);
    display: block;
}

.mv .m-cap {
    position: absolute;
    left: 20px;
    bottom: 10px;
    line-height: 1;
    z-index: 3;
}

.mvWrap {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    height: calc(100% + 120px);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

#ytplayer {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fv-video {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mvImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: #fff;
    display: none;
}

.mvImg img {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .mv:after {
        padding-bottom: 177.7%;
    }

    .mvWrap {
        height: 100%;
    }
}























.caption {
    font-size: 1rem;
}

.tpl-headline__subcopy--center {
    text-align: center !important;
}

@media screen and (max-width: 768px) {
    .tpl-headline__subcopy--center {
        text-align: left !important;
    }
}

.mainvisual {
    position: relative;
}

@media screen and (min-width: 769px) {
    .mainvisual::before {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 30vh;
        background: linear-gradient(to bottom, #E5E1DD 0%, #EAE6E3 30%, transparent 100%);
        content: "";
        z-index: 1;
    }
}

.headline-scenario {
    width: fit-content;
    margin: 70px auto 0;
}

#concept .tpl-caption {
    position: absolute;
    top: 100%;
}

#concept .tpl-cover__bg .tpl-caption {
    position: unset;
}

#concept .tpl-cover__bg {
    overflow: unset;
}

#concept .tpl-figure {
    overflow: unset;
}

#concept .concept-cap {
    line-height: 2;
}

#concept .block-02 .tpl-caption,
#concept .block-03 .tpl-caption {
    padding-right: 0;
}

@media screen and (min-width: 769px) {
    #concept .block-03 .tpl-card-row {
        justify-content: flex-end;
    }

    #concept .block-03 .row2 .tpl-card-row__body {
        width: 25%;
    }

    #concept .block-03 .row2 .tpl-card-row__header {
        width: 57.42358%;
    }

    #concept .block-01 .tpl-caption {
        padding-right: 0;
    }
}

@media screen and (max-width: 768px) {
    #concept .block-01 .tpl-figure {
        margin: 0 -7vw;
        width: 100vw;
    }
}

#special .tpl-card-row {
    align-items: flex-start;
}

#special .tpl-article__title {
    margin: 35px 0 10px;
}

#special .special-button {
    position: relative;
    display: block;
    background: transparent;
    font-size: 1.6rem;
    margin: 35px 0 0;
}

#special .special-button__label {
    font-family: 'Montserrat', sans-serif;
}

.special-button__arrow {
    max-width: 178px;
    position: absolute;
    top: 100%;
    left: 0;
    transition: transform .4s ease-in-out;
    margin-top: 4px;
}

#special .special-card:hover .special-button__arrow {
    transform: translateX(20px);
}

#plan .tpl-stack {
    align-items: flex-end;
    column-gap: 100px;
}


#plan .tpl-room-type__example-note {
    gap: 0;
    flex-direction: column;
}

#plan .tpl-room-type__example-note .tpl-room-type__copy {
    justify-content: flex-end;
}

/* #plan .tpl-room-type__example-note .tpl-room-type__copy:nth-of-type(2) {
    padding-right: 65px;
} */

#plan .tpl-headline__copy .headline-cap {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1rem;
    text-wrap: nowrap;
}

@media screen and (min-width: 769px) {
    #plan .tpl-headline__copy {
        position: relative;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    #special .tpl-card-row .tpl-article__copy{
        min-height: 124px;
    }

   #plan .tpl-stack[data-columns="2"] {
        grid-template-columns: 239px 239px;
        justify-content: center;
    }
 /* 
    #plan .tpl-stack[data-columns="2"] .tpl-card .tpl-figure {
        width: 50%;
        margin: 0 auto;
    } */
}

@media screen and (min-width: 1024px) {
    #special .tpl-card-row .tpl-article__copy{
        min-height: 98px;
    }
}

@media screen and (max-width: 768px) {
    #special .tpl-card-row {
        row-gap: 10vw;
    }

    #special .special-card {
        margin-bottom: 10vw;
    }

    #special .tpl-article__title {
        margin: 25px 0 0;
    }

    #special .special-button {
        margin: 25px 0 0;
    }

    .tpl-round-button {
        margin: 30px auto 0;
    }

    .tpl-cover .tpl-headline {
        text-align: center;
    }

    .tpl-headline__copy,
    .tpl-headline__subcopy {
        text-align: center;
    }

    #plan .tpl-headline {
        text-align: left;
    }

    #plan .tpl-card__copy {
        text-align: left;
    }

    #plan .tpl-room-type__example-note .tpl-room-type__copy {
        justify-content: flex-start;
    }

    #plan .tpl-headline__copy {
        text-align: left;
    }

    #plan .tpl-headline__copy .headline-cap {
        left: 0;
        transform: translateX(0%);
    }

    #plan .tpl-stack .swiper-wrapper {
        align-items: flex-end;
    }
}

@media (hover: hover) and (pointer: fine) {
    .tpl-link__title.notlink:hover {
        text-decoration: none;
    }
}


.home .tpl-header__logo {
    opacity: 0;
    transform: translateY(-20px);
    animation: showLogo 3s cubic-bezier(.19, 1, .22, 1) 10s forwards;
}

@keyframes showLogo {
    to {
        opacity: 1;
        transform: translateY(10px);
    }
}

.home .tpl-header.is-fixed .tpl-header__logo {
    transform: translateY(0) !important;
    opacity: 1 !important;
}


@media screen and (max-width: 768px) {
    @keyframes showLogo {
        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }
}