@charset "utf-8";
/*-----------------------------
    GLOBE SETTING
-----------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@100;200;300;400;500;600;700;800;900&display=swap');
/*font-family: 'Hahmlet', serif;*/

.hahmlet {
    font-family: 'Hahmlet', serif;
    font-size: inherit;
}

header:not(.js-header-fix-moment) .u-header__section {
    background-color: inherit;
}

* {
    font-size: 16px;
    ;
}

h1, h2, h3, h4, h5, p, ul, ol, img {
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    transition: all .3s;
}

a:focus, a:hover {
    color: inherit;
}

a:hover {
    text-decoration: none;
    color: inherit;
}

a.more {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

a.more:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FF9800;
    top: -100%;
    left: 0px;
    transition: all .2s;
}

a.more:hover:before {
    top: 0%;
}

a.more span {
    position: relative;
}

a.more.more-dark {
    background-color: transparent;
    border: 1px solid #f2f2f2;
}

.x-btn {
    background: #000;
    border: 1px solid #aaa;
    color: #fff;
    display: block;
    position: relative;
    width: 320px;
    margin: 0 auto;
    letter-spacing: 2px;
    padding: 8px 30px;
    font-weight: normal;
    overflow: hidden;
    transition: cubic-bezier(0.69, 0.01, 0.25, 0.99) 0.5s;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
}

.x-btn span {
    z-index: 1;
    position: relative;
}

.x-btn:before {
    content: "";
    display: block;
    background: url("../images/icon/ico_arrow01_r_wh.svg") center no-repeat;
    width: 20px;
    height: 20px;
    background-size: contain;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -10px;
}

.x-btn:after {
    content: "";
    display: block;
    width: 140%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    transform: translateX(-150%) skew(-20deg);
    transition: 0.5s;
}

.x-btn:hover:after {
    transform: translateX(-20%) skew(-20deg);
}

.x-btn:hover {
    color: #333;
}

.x-btn.x-btn-white {
    background-color: #fff;
    border: none;
    color: #666;
}

.x-btn.x-btn-solid {
    background-color: transparent;
}

.x-btn.x-btn-white:before {
    background: url('../../assets/images/icon/ico_arrow01_r_bk.svg') center no-repeat;
}

.x-btn.x-btn-white:after {
    background-color: #000;
}

.x-btn.x-btn-white:hover {
    color: #fff;
}

a.x-btn.x-btn-inline {
    display: inline-flex;
    display: -webkit-inline-flex;
    width: auto;
    padding: 8px 40px;
    margin: 0 0 0 10px;
}

::selection {
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
}

.sp-only {
    display: none !important;
}

.cover.bg-cover {
    display: block;
}

.bg-cover {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
}

.bg-cover.cover-rectangle {
    padding-bottom: 64%;
}

.bg-cover.cover-square {
    padding-bottom: 100%;
}

.bg-cover.cover-rectangle-cloumn {
    padding-bottom: 125% !important;
}

.bg-cover.cover-rectangle-fit {
    padding-bottom: 50%;
}

.x-bg {
    background-color: rgb(0 0 0) !important;
}

.x-bg-light, .x-bg-heavy {
    position: relative;
}

.x-bg-light>*, .x-bg-heavy>* {
    position: relative;
    z-index: 3;
}

.x-bg-light::before, .x-bg-heavy::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.x-bg-light::before {
    background-color: rgba(255, 255, 255, 0.2);
}

.x-bg-heavy::before {
    background-color: rgba(0, 0, 0, 0.2);
}

.bread {
    background-color: #ddd;
    padding: 5px 0;
}

.bread ol.site-page a {
    color: #777;
}

.bread ol.site-page a:hover {
    color: #999;
}

.bread ol.site-page {
    font-size: .8rem;
}

.bread ol.site-page li:nth-child(n+2) {
    position: relative;
}

.bread ol.site-page li:nth-child(n+2):before {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f105";
    color: #94a9d1;
    margin-right: 10px;
}

.bread ol.site-page li.active a {
    font-weight: 400;
    color: #999;
    padding-bottom: 2px;
    border-bottom: 1px dashed #ccc;
}

.bread ol.site-page li a span {
    font-size: 13px;
    font-weight: 200;
}

.pg_header {
    padding: 50px 15px;
    background-color: #607d8b;
    background-image: url(../images/bg/bg-illust.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.pg_header .home-title {
    margin-bottom: 0;
    /* padding-left: 0; */
}

.pg_header .home-title h1 {
    font-size: 32px;
    font-weight: 600;
}

.pg_header.room {
    text-align: center;
    background-color: #795548;
}

.pg_header.room .home-title:before {
    display: none;
}

@media (max-width:768px) {
    .bread {
        display: none;
    }
}

@media (min-width:1200px) {
    .container-lg {
        max-width: 1220px;
    }

    .container-sm {
        max-width: 960px;
    }
}

@media (max-width:1199px) {
    .container.container-over {
        max-width: none;
    }
}

@media (max-width:991px) {
    .sp-only {
        display: block !important;
    }

    .pc-only {
        display: none !important;
    }
}

/*-----------------------------
    Header
-----------------------------*/

/* secNav */

#secNav {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    opacity: 0;
    top: -100vh;
    left: 0px;
    display: flex;
    background-color: #000;
    transition: all .3s;
}

#secNav .secNav-collapse {
    flex: 0 0 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#secNav .secNav-collapse>* {
    flex: 0 0 100%;
    text-align: center;
    padding-top: 30px;
}

#secNav .secNav-Cover {
    flex: 0 0 50%;
    height: 100%;
}

#secNav .secNav-Cover .bg-cover {
    height: 100%;
}

#secNav.show {
    top: 0;
    opacity: 1;
}

#secNav button.secNav-button {
    position: absolute;
    right: 20px;
    top: 30px;
    display: flex;
    align-items: center;
    padding: 20px;
}

#secNav button.secNav-button span.close {
    height: 1px;
    position: relative;
    padding-right: 60px;
    display: flex;
    align-items: center;
    text-shadow: inherit;
    color: #fff;
    transition: all .3s;
    opacity: 1;
}

#secNav button.secNav-button span.close:before, #secNav button.secNav-button span.close:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 45px;
    height: 2px;
    background-color: #fff;
    transform: rotate(45deg);
}

#secNav button.secNav-button span.close:after {
    transform: rotate(-45deg);
}

#secNav .secNav-collapse>.brand {
    max-width: 120px;
    margin: 40px auto;
}

#secNav .secNav-collapse>ul.navbar-nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#secNav .secNav-collapse>ul.navbar-nav>li {
    flex: 0 0 100%;
}

#secNav .secNav-collapse>ul.navbar-nav>li>a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#secNav .secNav-collapse>ul.navbar-nav>li>a>span {
    color: #fff;
}

#secNav .secNav-collapse>ul.navbar-nav>li>a>span.en {
    font-size: 12px;
    color: #666;
    font-family: 'Hahmlet', serif;
}

#secNav .secNav-collapse .ac_group {
    margin-top: auto;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

@media (max-width:576px) {
    #secNav .secNav-collapse {
        flex: 0 0 100%;
    }

    #secNav button.secNav-button {
        top: 20px;
        right: 0px;
    }

    #secNav button.secNav-button span.close {
        color: transparent;
        padding-right: 0;
    }

    #secNav .secNav-collapse .ac_group {
        flex: 0 0 calc(100% - 40px);
        margin-bottom: 70px;
    }

    #secNav .secNav-collapse>.brand {
        max-width: 90px;
        margin-bottom: 20px;
    }
}

/*-----------------------------
        KV
-----------------------------*/

#KV {
    padding-bottom: 100px;
    position: relative;
    background-color: #ebf0f3;
}

#KV:before {
    content: "";
    position: absolute;
    display: block;
    width: 35%;
    height: 100%;
    left: 0px;
    right: 0px;
    background-color: #000;
    background-image: url(../images/bg/bg-illust.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#KV .top_brand {
    position: absolute;
    top: 10px;
    left: 10px;
    max-width: 180px;
}

#KV .top_brand>a {
    display: block;
}

#KV:not(.init) .topwrap .top_brand>a:not(.sp) {
    display: none;
}

#KV .top_menu {
    width: calc(100% - 20px - 220px);
    margin-left: auto;
    margin-bottom: 50px;
}

#KV .top_menu ul.nav_menu {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#KV .top_menu ul.nav_menu li.nav-item {
    flex: 0 1 150px;
}

#KV .top_menu ul.nav_menu li.nav-item a.nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
}

#KV .top_menu ul.nav_menu li.nav-item a.nav-link span {
    position: absolute;
    transition: all .3s;
    font-size: 18px;
    font-family: 'Hahmlet', serif;
}

#KV .top_menu ul.nav_menu li.nav-item a.nav-link span.cht {
    opacity: 0;
    font-size: 15px;
}

#KV .top_menu ul.nav_menu li.nav-item a.nav-link:hover span.en {
    opacity: 0;
}

#KV .top_menu ul.nav_menu li.nav-item a.nav-link:hover span.cht {
    opacity: 1;
}

#KV .top_menu ul.nav_menu li.res_button {
    flex: 0 0 240px;
}

.res_button a {
    background-color: #000;
    color: #fff;
    min-height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
}

#KV .top_menu ul.nav_menu li.tg {
    flex: 0 0 150px;
    display: flex;
    justify-content: center;
}

#KV .top_menu ul.nav_menu li.tg>a {
    position: relative;
    display: block;
    width: 60px;
    height: 20px;
}

#KV .top_menu ul.nav_menu li.tg>a>span {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

#KV .top_menu ul.nav_menu li.tg>a>span:before, #KV .top_menu ul.nav_menu li.tg>a>span:after {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    transition: all .3s;
}

#KV .top_menu ul.nav_menu li.tg>a>span:before {
    top: 10px;
    width: 70%;
}

#KV .top_menu ul.nav_menu li.tg>a>span:after {
    top: 20px;
    width: 100%;
}

#KV .top_menu ul.nav_menu li.tg>a>span, #KV .top_menu ul.nav_menu li.tg>a>span:before, #KV .top_menu ul.nav_menu li.tg>a>span:after {
    height: 2px;
    background-color: #999;
}

#KV .top_menu ul.nav_menu li.tg:hover>a>span:before {
    width: 80%;
}

@media (max-width:1199px) {
    #KV .top_menu ul.nav_menu li.nav-item {
        display: none;
    }
}

@media (max-width:991px) {
    #KV:not(.init) .top_brand>a:not(.sp) {
        display: none;
    }

    #KV .top_brand>a.sp {
        display: block;
    }

    #KV .top_brand>a.sp img {
        max-width: inherit;
        height: inherit;
        max-height: 35px;
        width: auto;
    }

    #KV .topwrap {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    #KV .top_brand {
        position: relative;
        top: inherit;
        left: inherit;
        flex: 0 1 220px;
    }

    #KV .top_menu {
        margin-bottom: inherit;
    }

    #KV .top_menu ul.nav_menu li.tg {
        flex: 0 1 60px;
        padding: 0 20px;
    }

    #KV .top_menu ul.nav_menu li.res_button a {
        min-height: 45px;
    }
}

@media (max-width:576px) {
    #KV .topwrap {
        justify-content: space-between;
    }

    #KV .top_menu {
        order: 1;
        margin-left: inherit;
        position: relative;
        flex: 0 0 100px;
    }

    #KV .top_menu ul.nav_menu {
        justify-content: space-between;
        min-height: 45px;
    }

    #KV .top_brand {
        order: 2;
        text-align: right;
        flex: 0 1 auto;
    }

    #KV .top_brand>a.sp {
        padding-right: 10px;
        padding-top: 10px;
        max-height: 45px;
    }

    #KV .top_menu ul.nav_menu li.res_button {
        display: none;
    }

    #KV .top_menu ul.nav_menu li.res_button a {
        font-size: 12px;
    }

    #KV .top_menu ul.nav_menu li.tg>a>span, #KV .top_menu ul.nav_menu li.tg>a>span:before, #KV .top_menu ul.nav_menu li.tg>a>span:after {
        background-color: #fff;
    }
}

/* #KV.init */

#KV.init {
    background-color: #ddd;
    padding: 0;
}

#KV.init:before {
    display: none;
}

#KV.init .topwrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#KV.init .top_brand {
    top: inherit;
    left: inherit;
    background: rgb(0 0 0 / .5);
    position: relative;
}

#KV.init .topwrap .top_menu {
    margin-bottom: 0;
}

.kv_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 80px;
    max-width: 1760px;
    margin: 0 auto;
}

.kv_wrap .kv_video {
    flex: 0 0 76%;
    margin-left: auto;
}

.kv_wrap .kv_video .v_wrap {
    width: 100%;
    position: relative;
    padding-bottom: 50%;
    overflow: hidden;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url('../images/videos-img.webp') no-repeat center center/cover;
}

.video-container video {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: 3;
}

.kv_wrap>.content {
    flex: 0 0 24%;
    position: absolute;
    z-index: 5;
    left: calc(120px + 40px);
}

.kv_wrap>.content h1 {
    color: #fff;
    font-size: 40px;
    margin-bottom: 10px;
    text-indent: -40px;
    font-family: 'Hahmlet', serif;
}

.kv_wrap>.content p {
    color: #fff;
    font-size: 16px;
    margin-bottom: 30px;
}

.ac_group {
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
}

.ac_group>a {
    flex: 0 0 calc(50% - 10px);
    border: 1px solid #fff;
    color: #fff;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: inherit;
}

.ac_group>a.x-btn:before {
    display: none;
}

@media (min-width:1500px) {
    .kv_wrap {
        padding-left: 120px;
    }

    .kv_wrap>.content h1 {
        font-size: 60px;
    }

    .kv_wrap>.content p {
        font-size: 20px;
        margin-bottom: 50px;
    }
}

@media (max-width:991px) {
    #KV:before {
        width: 50%;
    }

    .kv_wrap {
        align-items: flex-end;
        padding: 0 40px;
        flex: 0 0 100%;
        margin-top: 20px;
    }

    .kv_wrap .kv_video {
        flex: 0 0 100%;
    }

    .kv_wrap>.content {
        bottom: 30px;
        left: 100px;
    }

    .ac_group>a {
        font-size: 13px;
    }
}

@media (max-width:576px) {
    .kv_wrap {
        order: 3;
        padding: 0 20px;
        margin-top: 20px;
    }

    .kv_wrap .kv_video .v_wrap {
        padding-bottom: 142.46%;
    }

    .kv_wrap>.content {
        left: 20px;
        width: calc(100% - 40px);
    }

    .kv_wrap>.content h1 {
        font-size: 24px;
        text-indent: inherit;
        padding-left: 20px;
    }

    .kv_wrap>.content p {
        padding-left: 20px;
    }

    #KV:before {
        width: 100%;
        height: 100%;
    }

    #KV.init {
        background-color: #000;
    }

    #KV.init .top_brand>a.sp {
        padding: 0;
    }
}

/*-----------------------------
    index setting
-----------------------------*/

.ind_slogan {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    padding: 100px 20px;
    background-image: url("../images/bg/leaf_shadow.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.ind_slogan .txt {
    margin-bottom: 100px;
}

.ind_slogan .txt p {
    font-size: 20px;
    line-height: 40px;
    color: rgb(96, 125, 139);
    font-family: Hahmlet, serif;
}

.ind_slogan .txt p:not(:last-of-type) {
    margin-bottom: 30px;
}

.home-block {
    padding: 100px 0px;
}

.home-title {
    height: 120px;
    padding-left: 60px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 50px;
}

.home-title::before {
    content: "";
    width: 120px;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.2);
}

.home-title>* {
    position: relative;
}

.home-title h2 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
}

.slogan-title {
    font-family: Hahmlet, serif;
    margin-bottom: 50px;
}

.slogan-title h3 {
    font-size: 48px;
}

.slogan-title p {
    font-family: inherit;
    margin-top: 30px;
    line-height: 36px;
    color: rgb(96, 125, 139);
    letter-spacing: 0;
    font-size: 16px;
}

.co_wrap {
    max-width: 1000px;
    margin: 0px auto;
}

.txt-img {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.txt-img .txt {
    flex: 0 0 50%;
    margin-bottom: auto;
}

.txt-img .txt a.x-btn {
    margin-left: inherit;
    margin-bottom: 100px;
}

.txt-img .txt .content p {
    font-size: 20px;
    line-height: 40px;
    color: rgb(96, 125, 139);
    font-family: Hahmlet, serif;
    margin-bottom: 100px;
}

.txt-img .img {
    flex: 0 0 40%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
}

@media (max-width: 767px) {
    .home-block {
        padding: 50px 0px;
    }

    .txt-img {
        flex-wrap: wrap;
    }

    .txt-img .txt a.x-btn {
        margin-bottom: 30px;
        margin-left: auto;
    }

    .txt-img .txt, .txt-img .img {
        flex: 0 0 100%;
        justify-content: center;
    }

    .txt-img .txt .content p {
        font-size: 16px;
        letter-spacing: 0px;
        text-align: center;
    }
}

@media (max-width:576px) {
    .slogan-title p {
        font-size: 14px;
        line-height: 24px;
    }
}

.cover_txt {
    margin: 0px auto;
    display: flex;
    position: relative;
    z-index: 1;
}

.cover_txt::before {
    content: "";
    position: absolute;
    display: block;
    width: 58%;
    height: calc(100% + 25vh);
    right: 0px;
    top: -30%;
    background-color: rgb(204, 198, 180);
    background-image: url("../images/bg/bg-illust.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    transition: all 0.3s ease 0s;
}

.cover_txt .cover {
    flex: 0 0 50%;
    position: relative;
    z-index: 3;
    overflow: hidden;
    padding-left: 20px;
}

.cover_txt .cover .cover_wrap {
    overflow: hidden;
}

.cover_txt .cover .cover_wrap .js-slide a {
    padding-bottom: 60%;
}

.cover_txt .cover_wrap .u-carousel-indicators-v1 span {
    border: 1px solid rgb(255, 255, 255);
    background-color: transparent;
}

.cover_txt .cover_wrap .u-carousel-indicators-v1 li.slick-active span, .cover_txt .cover_wrap.u-carousel-indicators-v1--white li.slick-active span {
    background-color: rgb(255, 255, 255);
}

.cover_txt .txt {
    flex: 0 0 50%;
    position: relative;
    z-index: 3;
}

.cover_txt .txt .content {
    padding: 0px 100px 100px;
}

.cover_txt .txt .content p {
    margin-bottom: 50px;
    font-size: 20px;
}

.cover_txt .txt .content a.x-btn {
    margin-left: inherit;
}

.parallaxer-content {
    height: 70vh;
}

.ind_room {
    background-color: #fffcf4;
}

@media (min-width: 1500px) {
    .ind_slogan {
        min-height: 120vh;
    }
}

@media (max-width: 1199px) {
    .cover_txt::before {
        height: calc(100% + 15vh);
    }
}

@media (max-width: 991px) {
    .cover_txt .cover .cover_wrap .js-slide a {
        padding-bottom: 100%;
    }
}

@media (max-width: 767px) {
    .slogan-title h3 {
        font-size: 28px;
        text-align: center;
    }

    .parallaxer-content {
        height: 80vw;
    }

    .ind_slogan .txt p {
        font-size: 15px;
        line-height: 36px;
        letter-spacing: 0px;
        text-align: center;
    }

    .cover_txt {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cover_txt .cover {
        flex: 0 0 100%;
        padding: 0px 20px;
        margin-bottom: 30px;
    }

    .cover_txt .cover .cover_wrap .js-slide a {
        padding-bottom: 64%;
    }

    .cover_txt::before {
        top: -15%;
        width: 50%;
    }

    .cover_txt .txt {
        flex: 0 0 100%;
    }

    .cover_txt .txt .content {
        padding: 0 20px;
    }

    .cover_txt .txt .content p {
        font-size: 16px;
        line-height: 32px;
        letter-spacing: 0px;
        text-align: center;
    }
}

#IndRoom {
    padding: 80px 0 20px 20px;
    position: relative;
}

#IndRoom:before {
    content: "";
    display: block;
    position: absolute;
    width: 62%;
    height: 100%;
    right: 0px;
    top: 0px;
    background-color: #d7d3c7;
    z-index: 2;
}

#IndRoom>#Room.listing {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 3;
}

#IndRoom>#Room.listing .room {
    flex: 0 0 calc(25% - 25px);
}

#IndRoom>#Room.listing .room .cover {
    margin-bottom: 10px;
}

#IndRoom>#Room.listing .room .content h4 {
    background-color: #a88e66;
    display: inline-block;
    padding: 4px 10px;
    color: #f2f2f2;
    font-size: 16px;
    margin-bottom: 10px;
}

#IndRoom>a.x-btn {
    margin-left: 0px;
    max-width: 18%;
    margin-top: 30px;
    margin-bottom: 30px;
}

@media (min-width: 1200px) {
    #IndRoom {
        margin-left: calc((100vw - 1000px)/2 - 20px);
    }
}

@media (max-width:991px) {
    #IndRoom>#Room.listing {
        padding: 0 20px;
    }

    #IndRoom>#Room.listing .room {
        flex: 0 0 calc(25% - 10px);
    }

    #IndRoom>#Room.listing .room .content h4 {
        font-size: 14px;
    }

    #IndRoom>#Room.listing .room .content p {
        font-size: 12px;
    }

    #IndRoom>a.x-btn {
        max-width: inherit;
    }
}

@media (max-width:767px) {
    #IndRoom {
        padding-left: 0;
    }

    #IndRoom:before {
        width: 50%;
    }

    #IndRoom>#Room.listing {
        flex-wrap: wrap;
    }

    #IndRoom>#Room.listing .room {
        flex: 0 0 calc(50% - 15px);
        margin-bottom: 20px;
    }

    #IndRoom>a.x-btn {
        margin: 30px auto;
    }
}

@media (max-width:576px) {
    #IndRoom:before {
        width: 75%;
    }

    #IndRoom>#Room.listing .room {
        flex: 0 0 100%;
        position: relative;
    }

    #IndRoom>#Room.listing .room .cover {
        margin-bottom: 0;
    }

    #IndRoom>#Room.listing .room .cover .cover-rectangle-cloumn {
        padding-bottom: 64% !important;
    }

    #IndRoom>#Room.listing .room .content h4 {
        position: absolute;
        bottom: 10px;
        left: 10px;
        margin: 0;
    }

    #IndRoom>#Room.listing .room .content p {
        display: none
    }
}

/*-----------------------------
            Footer
-----------------------------*/

footer.footer {
    background-image: url("../images/bg/bg-illust.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 5;
    position: relative;
}

footer.footer .inner {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

footer.footer .inner .footer-logo {
    flex: 0 0 200px;
}

footer.footer .inner .content {
    padding-left: 50px;
}

footer.footer p, footer.footer p span, footer.footer ul.footer-nav li a {
    color: #fff;
    font-size: 1rem;
}

footer.footer p {
    line-height: 2rem;
}

footer.footer p span {
    margin: 0 5px;
    display: inline-block;
}

footer.footer ul.footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer.footer ul.footer-nav li {
    list-style: none;
    display: inline-block;
}

footer.footer ul.footer-nav li a {
    padding: 6px 15px;
    display: block;
    position: relative;
}

footer.footer ul.footer-nav li:first-child a {
    padding-left: 0;
}

footer.footer ul.footer-nav li:not(:first-child) a:before {
    content: "";
    display: block;
    position: absolute;
    height: 10px;
    width: 1px;
    background-color: #aaa;
    left: 0px;
    top: 10px;
    transform: rotate(24deg)
}

footer.footer .copyright {
    background-color: #38332c;
}

footer.footer .copyright p {
    color: #999;
    font-size: .9rem !important;
    text-align: center;
    margin-bottom: 0;
}

footer.footer .copyright p a {
    color: #999;
    font-size: 1rem;
}

@media (max-width:991px) {
    footer.footer .inner {
        flex-direction: column;
        align-items: center;
    }

    footer.footer .inner .footer-logo {
        flex: none;
        margin-bottom: 30px;
    }

    footer.footer .inner .content {
        padding: 0;
        width: 100%;
        text-align: center;
    }
}

@media (max-width:767px) {
    footer.footer .inner .footer-logo {
        max-width: 40%;
    }

    footer.footer {
        padding-top: 50px !important;
    }
}

/*-----------------------------
    page content
-----------------------------*/

.page-intro {
    max-width: 680px;
    margin: 0 auto;
}

.page-intro p.lead {
    font-size: 1rem;
    margin-bottom: 30px;
    line-height: 3rem;
}

.page-intro p {
    font-size: 1rem;
    letter-spacing: 1px;
    line-height: 1.8rem;
    margin-bottom: 30px;
}

.page-intro h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.page-intro h3:not(:first-of-type) {
    margin-top: 30px;
}

.page-intro ul {
    padding-left: 20px;
}

.page-intro ul li {
    margin-bottom: 10px;
    font-size: 1rem;
}

/*-----------------------------
    Notice
-----------------------------*/

.notice_wrap {
    margin-bottom: 50px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.notice_wrap .title {
    margin-bottom: 30px;
}

.notice_wrap .title>h3 {
    font-size: 14px;
    color: #999;
}

.notice_wrap .title>p {
    font-family: 'Hahmlet', serif;
    font-size: 24px;
    line-height: 24px;
    color: rgb(96, 125, 139);
    font-weight: 600;
    letter-spacing: 0;
}

.notice_wrap ol.listing#Detail {
    padding-left: 30px;
    display: flex;
    flex-wrap: wrap;
}

.notice_wrap ol.listing#Detail>li {
    flex: 0 0 100%;
    padding: 5px 0;
    color: rgb(96, 125, 139);
}

@media (max-width:576px) {
    .notice_wrap ol.listing#Detail {
        padding-left: 20px;
    }

    .notice_wrap ol.listing#Detail>li {
        font-size: 14px;
        text-align: justify;
    }
}

/*-----------------------------
    Custmobox
-----------------------------*/

.custombox-content {
    background-color: #000;
    background-image: url(../images/bg/bg-illust.png), url(../images/logo.png);
    background-size: cover, 120px;
    background-repeat: no-repeat, no-repeat;
    background-position: center center, calc(20% - 20px) 50%;
}

#Action {
    width: 60%;
    height: 100%;
    background-color: #fff;
    max-height: inherit;
    margin-left: auto;
    padding: 40px 15px;
}

#Action button.close {
    position: absolute;
    top: 20px;
    right: 20px;
}

#Action button.close i {
    font-size: 24px;
}

#Action>.content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#Contact .con_wrap {
    width: 100%;
    max-width: 570px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

#Contact .con_wrap .con {
    flex: 0 0 100%;
    display: flex;
}

#Contact .btn-group {
    display: flex;
    width: 100%;
}

#Contact .btn-group .x-btn {
    width: inherit;
    flex: 0 0 calc(50% - 10px);
}

#Contact .con_wrap .con .formset {
    display: flex;
    align-items: center;
    width: 100%;
}

#Contact .con_wrap .con:not(:last-child) {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}

#Contact .con_wrap .con .title {
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 0;
    align-self: flex-start;
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

#Contact .con_wrap .con .title.sp:after {
    content: "*";
    font-size: 14px;
    font-weight: 300;
    color: #f44336;
    margin-left: 5px;
}

#Contact .con_wrap .con .content {
    padding-left: 20px;
    flex: 1 1 80%;
}

#Contact .con_wrap .con .content>input {
    border: 1px solid transparent;
    width: 100%;
    border-bottom: 1px solid #ccc;
}

#Contact .con_wrap .con .content>input:focus-visible {
    outline: none;
}

#Contact .con_wrap .con .content textarea {
    width: 100%;
    outline: none;
    border: 1px solid #ddd;
}

#Contact .con_wrap .con.group .formset {
    flex: 1 1 50%;
}

#Contact .con_wrap .con .formset .content .x-select {
    width: 100%;
    padding: 5px;
}

#Contact .formset.checkbox .content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
}

#Contact .checkbox-list-item {
    margin-bottom: 10px;
    flex: 0 1 calc(100% / 3);
}

#Contact .checkbox-list-item label {
    display: flex;
    align-items: center;
    margin: 0;
}

#Contact .checkbox-list-item label input {
    flex: 0 0 30px;
    height: 20px;
}

#Contact .checkbox-list-item label span {
    margin: 0;
    font-size: 14px;
}

#Contact .submit_con {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#Contact .submit_con>a {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0e1242;
    color: #fff;
    padding: 10px;
}

#Contact .submit_con>a.delete {
    margin-right: 10px;
    background-color: #fff;
    border: 1px solid #000;
    color: inherit;
}

@media (min-width:576px) {
    #Contact .con_wrap .con.group .formset:not(:first-of-type) {
        margin-left: 10px;
        padding-left: 10px;
        border-left: 1px solid #ccc;
    }
}

@media (max-width:991px) {
    .custombox-content {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: none;
    }

    #Action {
        width: calc(100% - 40px);
        margin: 0 auto;
        max-height: calc(90vh - 20px);
        border-radius: 10px;
        max-width: 570px;
    }

    #Contact .con_wrap .con .formset.checkbox {
        flex-wrap: wrap;
        justify-content: center;
    }

    #Contact .con_wrap .con .formset.checkbox .title {
        flex: 1 1 100%;
        margin-bottom: 15px;
        text-align: center;
        white-space: inherit;
        width: 100%;
        text-align: center;
    }
}

@media (max-width:575px) {
    #Contact .con_wrap {
        padding: 0;
    }

    #Contact .con_wrap .con.group {
        flex-wrap: wrap;
        border: none;
        margin-bottom: 0;
    }

    #Contact .con_wrap .con.group .formset {
        flex: 0 0 100%;
    }

    #Contact .con_wrap .con.group .formset:first-child {
        padding-bottom: 0;
        margin-bottom: 10px;
        border-bottom: none;
    }

    #Contact .formset.checkbox .content {
        flex-wrap: wrap;
    }

    #Contact .checkbox-list-item {
        margin-bottom: 10px;
        flex: 1 1 50%;
    }

    #Contact .checkbox-list-item label span {
        font-size: 12px;
    }

    #Contact .con_wrap .con .formset .content .x-select {
        font-size: 13px;
        padding: 3px 5px;
    }

    #Contact .x-btn:before {
        display: none;
    }

    #Contact .x-btn {
        padding: 4px 20px;
    }

    #Contact .x-btn span {
        font-size: 13px;
    }

    #Contact .con_wrap .con .title {
        font-size: 12px;
        flex: 1 1 75px;
    }

    #Contact .con_wrap .con .content>input {
        font-size: 13px;
        font-weight: 300;
    }

    #Action .btn-group a {
        flex: 1 1 50%;
    }

    #Action .btn-group a:not(:last-child) {
        margin-right: 5px;
    }

    #Contact .btn-group {
        justify-content: space-between;
    }

    #Contact .btn-group .x-btn {
        margin: 0;
        flex: 0 1 calc(100% - 120px);
    }

    #Contact .btn-group>a.x-btn:first-child {
        flex: 0 1 100px;
        padding: 0 5px;
        text-align: center;
    }
}

/*-----------------------------
    facility page
-----------------------------*/

#Photos.listing {}

#Photos.listing .photo {
    display: flex;
    position: relative;
    margin-bottom: 100px;
}

#Photos.listing .photo:nth-child(even) {
    flex-direction: row-reverse;
}

#Photos.listing .photo:last-of-type {
    margin-bottom: 0;
}

#Photos.listing .photo:after {
    content: "";
    display: block;
    position: absolute;
    width: 50%;
    height: 60%;
    background-color: rgb(227 224 196 / 34%);
    left: 30%;
    top: 20%;
    z-index: 2;
}

#Photos.listing .photo:nth-child(even):after {
    left: -30%;
}

#Photos.listing .photo .cover {
    flex: 1 1 70%;
    z-index: 3;
    display: flex;
}

#Photos.listing .photo .cover .co {
    flex: 1 0 80%;
}

#Photos.listing .photo .cover .co.only {
    min-height: 485px;
}

#Photos.listing .photo .cover .co a {
    height: 100%;
}

#Photos.listing .photo .cover .ver {
    flex: 0 0 20%;
    flex-direction: column;
}

#Photos.listing .photo .cover .ver>a {
    padding-bottom: 100%;
    border-left: 1px solid #fff;
}

#Photos.listing .photo .cover .ver>a:not(:first-child) {
    border-top: 1px solid #fff;
}

#Photos.listing .photo .cover .ver>a:last-child {
    position: relative;
}

#Photos.listing .photo .cover .ver>a:last-child>span {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0 0 0 / .5);
    z-index: 4;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 32px;
}

#Photos.listing .photo .content {
    flex: 0 1 50%;
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 3;
}

#Photos.listing .photo:nth-child(even) .content {
    padding-left: inherit;
    padding-right: 50px;
}

#Photos.listing .photo .content h2>span {
    margin: 0 4px;
}

#Photos.listing .photo .content h2 {
    font-size: 32px;
    line-height: 30px;
    margin-bottom: 10px;
}

@media (max-width:991px) {
    #Photos.listing .photo .content h2 {
        font-size: 24px;
        font-weight: 600;
    }

    #Photos.listing .photo .content p {
        font-size: 14px;
    }
}

@media (max-width:576px) {
    #Photos.listing .photo {
        flex-wrap: wrap;
        margin-bottom: 30px;
        padding-bottom: 30px;
        border-bottom: 1px dashed #ccc;
    }

    #Photos.listing .photo .cover {
        flex: 0 0 100%;
        margin-bottom: 10px;
    }

    #Photos.listing .photo:nth-child(even) .content, #Photos.listing .photo .content {
        flex: 0 0 100%;
        padding: 0;
    }

    #Photos.listing .photo .content h2 {
        margin-bottom: 10px;
        text-align: center;
        font-size: 18px;
    }

    #Photos.listing .photo .content p {
        text-align: center;
    }

    #Photos.listing .photo:after {
        display: none;
    }

    #Photos.listing .photo .cover .co.only {
        min-height: 300px;
    }
}

/*-----------------------------
    Room List main
-----------------------------*/

#Rooms.listing {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#Rooms.listing .room {
    flex: 0 0 calc(50% - 40px);
    display: flex;
    flex-direction: column;
    margin-bottom: 100px;
}

#Rooms.listing .room .title {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 10px;
}

#Rooms.listing .room .title h2 {
    font-size: 16px;
    font-weight: 600;
}

#Rooms.listing .room .title p {
    font-size: 22px;
    font-family: 'Hahmlet', serif;
    font-weight: 200;
    color: #ccc;
}

#Rooms.listing .room .cover {
    margin-bottom: 20px;
    opacity: .8;
    transition: all .3s;
}

#Rooms.listing .room:hover .cover {
    opacity: 1;
}

#Rooms.listing .room .content {
    display: flex;
    justify-content: space-between;
}

#Rooms.listing .room .content .detail {
    padding-left: 20px;
    border-left: 2px solid #607D8B;
    display: flex;
    align-items: center;
}

#Rooms.listing .room .content .detail .dtl {
    font-family: 'Hahmlet', serif;
    display: flex;
    justify-content: space-between;
}

#Rooms.listing .room .content .detail .dtl .name {
    padding-right: 20px;
}

#Rooms.listing .room .content .detail .dtl .val {
    text-align: left;
}

#Rooms.listing .room .content>a.x-btn {
    width: inherit;
    margin: inherit;
    padding: 0 50px;
}

@media (max-width:576px) {
    #Rooms.listing .room {
        flex: 0 0 100%;
    }

    #Rooms.listing .room .content>a.x-btn {
        padding: 0 15px;
    }

    #Rooms.listing .room .content>a.x-btn:before {
        display: none;
    }
}

/*-----------------------------
    Room 
-----------------------------*/

.room-cover {
    position: relative;
}

.room-cover:before {
    content: "";
    display: block;
    position: absolute;
    width: 70%;
    height: calc(100% - 60px);
    right: 0px;
    top: calc(120px / 3 * 2);
    z-index: 2;
    background-color: #fff5e7;
    background-image: url(../images/bg/bg-illust.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.rc_set {
    padding-top: 50px;
    min-height: 100vh;
    padding-bottom: 100px;
}

.room-cover>* {
    position: relative;
    z-index: 5;
}

.room-cover .home-title {
    flex-direction: column-reverse;
}

.room-cover .home-title h1 {
    font-size: 16px;
}

.room-cover .home-title>p {
    font-size: 32px;
    font-family: Hahmlet, serif;
    font-weight: 700;
    color: #000;
}

.room-cover .cover {
    margin-left: -10%;
    margin-right: -10%;
}

.room-cover .content {
    padding-left: 30px;
    border-left: 1px solid #ccc;
    margin: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.room-cover .content p {
    font-size: 16px;
    line-height: 40px;
    color: rgb(96, 125, 139);
    font-family: Hahmlet, serif;
}

.room-cover .content a.x-btn {
    margin: 0;
}

.pg-title {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    margin-bottom: 50px;
}

.pg-title>h2 {
    font-size: 16px;
}

.pg-title>p {
    font-size: 32px;
    font-family: Hahmlet, serif;
    font-weight: 700;
}

#Items.listing {
    max-width: 560px;
    margin: 0 auto;
}

#Items.listing>.item {
    display: flex;
}

#Items.listing>.item:not(:first-child) {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #ccc;
}

#Items.listing>.item .name {
    flex: 0 0 20%;
    min-width: 110px;
}

#Items.listing>.item .val {}

ul.items {
    list-style: none;
}

ul.items li {
    list-style: none;
    font-size: 14px;
}

ul.items li:not(:first-child) {
    padding-top: 10px;
}

.photo ul.items li {
    display: inline-block;
    padding: 2px 8px;
    margin-bottom: 10px;
    background-color: rgb(255 255 255 / .7);
}

#RP.listing {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
    max-width: 1200px;
    margin: 0 auto;
}

#RP.listing .photo {
    flex: 0 0 calc(100% / 3);
    padding: 0 15px;
    margin-bottom: 30px;
}

@media (max-width:767px) {
    .room-cover .content {
        padding-left: 0px;
        border-left: inherit;
    }

    .room-cover .content p {
        font-size: 14px;
        text-align: center;
        flex: 0 0 100%;
    }

    .room-cover .content a.x-btn {
        display: none !important;
    }

    .rc_set {
        min-height: inherit;
        padding-bottom: 0;
    }

    #RP.listing .photo {
        flex: 0 0 calc(100% / 3);
    }

    #Items.listing>.item {}

    #Items.listing>.item .name {
        min-width: 80px;
        font-size: 14px;
    }

    #Items.listing>.item .val, ul.items li {
        font-size: 13px;
        text-align: justify;
    }
}

@media (max-width:576px) {
    #RP.listing {
        padding: 0
    }

    #RP.listing .photo {
        flex: 0 0 calc(100% / 3);
        padding: 0;
        margin-bottom: 0px;
    }
}

/*-----------------------------
    wall
-----------------------------*/

.wall_01 {
    margin-bottom: 40px;
}

.wall_02 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.wall_02>.item {
    flex: 0 0 calc(50% - 20px);
}

.wall_03 {
    display: flex;
    justify-content: space-between;
}

.wall_03 .item_wrap.w1 {
    flex: 0 0 60%;
}

.wall_03 .item_wrap.w1>.item:first-child {
    margin-bottom: 40px;
}

.wall_03 .item_wrap.w2 {
    flex: 0 0 calc(40% - 40px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wall_03 .item_wrap.w2 .item:last-child {
    flex: 1 1 100%;
    padding-top: 40px;
}

.wall_03 .item_wrap.w2 .item:last-child>div {
    height: 100%;
}

@media (max-width:576px) {
    .wall_01, .wall_02, .wall_03 .item_wrap.w1>.item:first-child {
        margin-bottom: 10px;
    }

    .wall_02>.item {
        flex: 0 0 calc(50% - 5px)
    }

    .wall_03 .item_wrap.w2 .item:last-child {
        padding-top: 10px;
    }

    .wall_03 .item_wrap.w2 {
        flex: 0 0 calc(40% - 10px);
    }
}

@media (max-width:498px) {
    .wall_01, .wall_02, .wall_03 .item_wrap.w1>.item:first-child {
        margin-bottom: 5px;
    }

    .wall_02>.item {
        flex: 0 0 calc(50% - 2.5px)
    }

    .wall_03 .item_wrap.w2 .item:last-child {
        padding-top: 5px;
    }

    .wall_03 .item_wrap.w2 {
        flex: 0 0 calc(40% - 5px);
    }
}

/*-----------------------------
    Service
-----------------------------*/

#Service.listing {
    display: flex;
    background-color: #000;
}

#Service.listing .service {
    flex: 1 0 20%;
}

#Service.listing .service .ser_wrap {
    height: 100%;
    position: relative;
    overflow: hidden;
    padding-bottom: 140%;
}

#Service.listing .service .ser_wrap .cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    transition: all 1s ease 0s;
}

#Service.listing .service .ser_wrap .cover::before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease 0s;
}

#Service.listing .service .ser_wrap .content {
    position: absolute;
    z-index: 3;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 10px;
    color: #fff;
    transition: all .5s;
}

#Service.listing .service .ser_wrap .content h3 {
    font-size: 15px;
    text-align: center;
}

#Service.listing .service .ser_wrap .content h3 span {
    display: block;
}

#Service.listing .service .ser_wrap .content p {
    font-size: 14px;
    text-align: center;
}

#Service.listing .service .ser_wrap .content h3 span.en {
    font-size: 32px;
}

@media (min-width: 992px) {
    #Service.listing .service .ser_wrap:hover .cover::before {
        background-color: rgba(0, 0, 0, 0);
    }

    #Service.listing .service .ser_wrap:hover .cover {
        transform: translate(-50%, -50%) scale(1.1);
    }

    #Service.listing .service .ser_wrap:hover .content {
        background-color: rgb(0 0 0 / .4)
    }
}

@media (max-width:991px) {
    #Service.listing {
        flex-wrap: wrap;
    }

    #Service.listing .service {
        flex: 1 1 calc(100% / 3);
    }

    #Service.listing .service:nth-of-type(n+3) .ser_wrap {
        padding-bottom: 100%;
    }
}

@media (max-width:576px) {
    #Service.listing .service {
        flex: 0 0 50%;
    }

    #Service.listing .service:nth-of-type(n+3) .ser_wrap {
        padding-bottom: 140%;
    }

    #Service.listing .service:nth-of-type(3) {
        flex: 0 0 100%;
    }

    #Service.listing .service:nth-of-type(3) .ser_wrap {
        padding-bottom: 64%;
    }

    #Service.listing .service .content {
        background-color: rgb(0 0 0 / .5);
    }

    #Service.listing .service .ser_wrap .content {
        background-color: transparent;
    }

    #Service.listing .service .ser_wrap .content h3 {
        text-align: left;
    }

    #Service.listing .service .ser_wrap .content h3 span.en {
        font-size: 16px;
    }

    #Service.listing .service .ser_wrap .content h3 span.cht, #Service.listing .service .ser_wrap .content p {
        font-size: 12px;
        text-align: left;
    }
}

/*-----------------------------
    fancybox
-----------------------------*/

@media (max-width:767px) {
    .fancybox-caption {
        padding-bottom: 30px;
    }
}