@charset "UTF-8";

/*==================================================================================================

       Movie

===================================================================================================*/

.movie-wrap {
    position: relative;
    z-index: 10;
    }
    .movie {
        position: relative;
        width: 100%;
        height:auto;
        background:url("../movie/top.jpg") no-repeat center;
        background-size:cover;
        text-align: center;
        }
        .movie:before {
        content: "";
        display: block;
        padding-top: 41%;
        }
        .movie_inner{
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            overflow:hidden;
            z-index: 0;
            }
            .movie_inner video{
            width:100%;
            height:auto !important;
            margin-left:auto;
            margin-right:auto;
            }
        @media screen and (min-width:2460px) {
        .movie:before {padding-top: 1000px;}
        }
        @media screen and (max-width:1023px) {
        .movie-wrap { margin-top: 90px;}
        .movie:before {padding-top: 41%;}
        }
        @media screen and (max-width:767px) {
        .movie-wrap { margin-top: 80px;}
        .movie:before {padding-top:41%;}
        }
    /* --- 下層用 --- */
    .movie.movie-onsen { background: #222 url("../movie/onsen.jpg") center center / cover; top:0; }
    .movie.pages:before { padding-top: 56.25%; } /* 16:9 */

/*==================================================================================================

       背景

===================================================================================================*/

.section-bg {
        position: relative;
        z-index: 1;
        }
        .section-bg:before {
        content:"";
        display:block;
        position: absolute;
        bottom:-2rem;
        left:-2%;
        width:104%;
        height:100%;
        background: #FBF9F7;
        z-index: -1;
        }
.bg-beige { background:#FBF9F7; }
.beige-box {
        background:#FBF9F7;
        padding:6%;
        box-sizing: border-box;
        }
.item-box {
        background: rgba(173,142,101,.1);
        padding:1.5rem;
        box-sizing: border-box;
        }

/*==================================================================================================

       画像

===================================================================================================*/

.figure {
        position: relative;
        margin-top:-7px;
        margin-left:-7px;
        z-index: 10;
        }
        .figure:before {
        content:"";
        display:block;
        position: absolute;
        right:-14px;
        bottom:-14px;
        width:100%;
        height:100%;
        background: #26231E;
        z-index: -1;
        }
        @media screen and (max-width: 1023px) {
        .figure { margin-top:-6px; margin-left:-6px; }
        .figure:before { right:-12px; bottom:-12px; }
        }
        @media screen and (max-width: 767px) {
        .figure { margin-top:-4px; margin-left:-4px; }
        .figure:before { right:-8px; bottom:-8px; }
        }

/*==================================================================================================

        タイトル / テキスト

===================================================================================================*/

.gold { color:#AD8E65;}
.red { color:#CB6B46; }

.section-title-wrap {
        width:100%;
        height:240px;
        border-bottom:50px solid #FFF;
        position: relative;
        z-index: 1;
        }
        .room_01 { background: url("../images/img/rooms/img_09.jpg") center center / cover; }
        .rental_03 { background: url("../images/img/rental/img_02.jpg") center center / cover; }
        .facilities_01 { background: url("../images/img/facilities/img_01.jpg") center center / cover; }
        
        .section-title {
        position: absolute;
        width:86%;
        bottom:-50px;
        left:50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background: #3B3833;
        padding:1.5rem;
        box-sizing: border-box;
        z-index: 1;
        color:#FFF;
        }
        .section-title p {
        position: absolute;
        top:-.5rem;
        left:0;
        width:100%;
        text-align: center;
        }
        @media screen and (max-width: 1023px) {
        .section-title-wrap { height:210px;}
        .section-title { width:92%; }
        }
        @media screen and (max-width: 767px) {
        .section-title-wrap { height:150px;}
        .section-title { width:94%; }
        }
/*==================================================================================================

       トップページ

===================================================================================================*/

.stripe {
        position: relative;
        padding-top:50px;
        }
        .stripe:before {
        content: "";
        display:block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:20px;
        background: url("../images/parts/stripe.png") center center repeat-x;
        }
.att {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 62.5%;
        z-index: 10;
        }
        .att p { position: absolute; z-index: 20; font-size:4vw; }
            .left-cut p { left:1rem; }
            .right-cut p { right:1rem; }
        .att-nomber { font-size:90px; }
        .att_01 { background: url(../images/img/top/img_04.jpg) center center / cover;}
        .att_02 { background: url(../images/img/top/img_01.jpg) center center / cover;}
        .att_03 { background: url(../images/img/top/img_02.jpg) center center / cover;}
        .att_04 { background: url(../images/img/top/img_03.jpg) center center / cover;}

.left-cut { position: relative; }
        .left-cut:before {
        content:"";
        display: block;
        position: absolute;
        top:-2px;
        left:-2px;
        width: 70%;
        height:0;
        padding-bottom:7%;
        background: url("../images/img/top/left.svg") top left / cover;
        z-index: 1;
        }
.right-cut { position: relative; }
        .right-cut:before {
        content:"";
        display: block;
        position: absolute;
        top:-2px;
        right:-2px;
        width: 70%;
        height:0;
        padding-bottom:7%;
        background: url("../images/img/top/right.svg") top left / cover;
        z-index: 1;
        }

        @media screen and (max-width: 1760px) {
        .att { padding-bottom: 600px; }
        }
        @media screen and (max-width: 1215px) {
        .stripe { padding-top:30px; }
        }
        @media screen and (max-width: 1023px) {
        .stripe:before { height:15px; }
        .att { padding-bottom: 60%; }
        .att-nomber { font-size:60px; }
        .att p { font-size:40px; margin-top: -1.5rem; }
        }
        @media screen and (max-width: 767px) {
        .stripe:before { height:12px; }
        }

/*================================================
      　banner
================================================*/

.banner-bg {
        width:100%;
        height:450px;
        background: url("../images/img/top/banner-bg.jpg") center center / cover;
        position: relative;
        box-sizing: border-box;
        z-index: 0;
        }
    .banner-btn-wrap {
        position:relative;
        width:100%;
        height:450px;
        background:url("../images/img/top/banner-btn-bg.jpg") center center / cover;
        z-index: 1;
        }
        .banner-btn {
        position: absolute;
        width:100%;
        max-width:270px;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        color:#FFF;
        }
        .banner-btn-wrap a,
        .banner-btn-wrap h2 { color:#FFF;}

.facebook-bg a {
        position: relative;
        display:block;
        background: url("../images/img/top/facebook-bg.jpg") center center / cover;
        width:100%;
        padding:80px 0;
        color:#FFF;
        text-align: center;
        }
.instagram-bg a {
        position: relative;
        display:block;
        background: url("../images/img/top/instagram-bg.jpg") center center / cover;
        width:100%;
        padding:80px 0;
        color:#FFF;
        text-align: center;
        }
    @media screen and (max-width: 1215px) {
    .banner-bg { height:360px; }
    .banner-btn-wrap { height:360px;}
    }
    @media screen and (max-width: 1023px) {
    .banner-bg { height:310px; }
    .banner-btn-wrap { height:310px;}
    }
    @media screen and (max-width: 767px) {
    .banner-bg { height:240px; }
    .banner-btn-wrap { height:240px;}
    .banner-btn { position: relative; }
    .facebook-bg a { padding:60px 0; }
    .instagram-bg a { padding:60px 0; }
    }

/*==================================================================================================

       下層共通

===================================================================================================*/

.page-header-wrap {
        position: relative;
        z-index: 20;
        }
        .page-header {
            position: relative;
            width: 100%;
            overflow: hidden;
            height: auto;
            text-align: center;
            }
            .page-header:before {
            content: "";
            display: block;
            padding-top:600px;
            width:100%;
            }
            .page-header.short:before {
            padding-top:300px;
            }
            @media screen and (max-width:1023px) {
            .page-header-wrap  { margin-top:90px; }
            .page-header:before { padding-top: 400px;}
            .page-header.short:before { padding-top:350px; }
            }
            @media screen and (max-width:767px) {
            .page-header-wrap  { margin-top:80px; }
            .page-header:before {padding-top:75%;}
            .page-header.short:before { padding-top:75%; }
            }

            .facilities     { background: url("../images/img/facilities/header.jpg") center center / cover; }
            .rooms          { background: url("../images/img/rooms/header.jpg") center center / cover; }
            .rental         { background: url("../images/img/rental/header.jpg") center center / cover; }
            .access         { background: url("../images/img/access/header.jpg") center bottom / cover; }
            .faq            { background: url("../images/img/faq/header.jpg") center bottom / cover; }

            @media screen and (max-width:767px) {
            .page-header-wrap  { margin-top:80px; }
            .page-header:before {padding-top:75%;}
            .page-header.short:before { padding-top:75%; }
            }

.page-title {
        position: absolute;
        bottom:1em;
        left:150px;
        line-height: 100%;
        z-index: 10;
        }
        .page-title h1 { font-weight:600;}
        .page-title h1.white { color:#FFF;}
.page-sub-title {
        position: absolute;
        left:0;
        top:0;
        width:120px;
        height:100%;
        background: rgba(38,35,30,.9);
        z-index: 10;
        color:#726049;
        }
        .page-sub-title p {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        position: absolute;
        bottom: 240px;
        left: -155px;
        width: 500px;
        line-height: 100%;
        }
        
        @media screen and (max-width:1023px) {
        .page-title { left:120px; }
        .page-sub-title { width:90px; }
        .page-sub-title p { left: -185px;}
        }
        @media screen and (max-width:767px) {
        .page-title { left:75px; }
        .page-sub-title { width:55px; }
        .page-sub-title p { left: -220px;}
        }

/*==================================================================================================

       下層

===================================================================================================*/

.room-nomber {
    color:#AC8D65;
    font-weight:500;
    font-size:60px;
    }
.bg-img {
        width:100%;
        height:100%;
        min-height:530px;
        }
        .bg-img.min-h700 { min-height:700px;}
        .room_02 { background: url("../images/img/rooms/img_11.jpg") center center / cover; }
        .room_03 { background: url("../images/img/rooms/img_12.jpg") center center / cover; }
        .rental_01 { background: url("../images/img/rental/img_01-2.jpg") center center / cover; }
        .rental_02 { background: url("../images/img/rental/img_01-4.jpg") center center / cover; }
        .facilities_02 { background: url("../images/img/facilities/img_02.jpg") center center / cover; }
        
        @media screen and (max-width: 1300px) {
        .bg-img.min-h700 { min-height:0; padding-bottom:90%;}
        }
        @media screen and (max-width: 1023px) {
        .room-nomber { font-size:45px; padding-top:1rem; }
        .bg-img { height:0; min-height:0;  padding-bottom:60%; }
        .bg-img.min-h700 { padding-bottom:60%;}
        }
        @media screen and (max-width: 767px) {
        .room-nomber { font-size:36px; }
        }

.rental-name {
        position: relative;
        z-index: 10;
        }
        .rental-name figre {
        position: relative;
        z-index: 0;
        }
        .rental-title {
        position: absolute;
        bottom:25px;
        z-index: 20;
        background: rgba(59,56,51,.8);
        padding:1.75rem;
        box-sizing: border-box;
        min-width:340px;
        color:#FFF;
        }
        .rental-title.left { left:-20px; }
        .rental-title.right { right:-20px; text-align: right;}
        .rental-title .en {
        position: absolute;
        top:-1rem;
        left:1.75rem;
        color:#AC8C65;
        }
        .rental-title.right .en { right:1.75rem; }
        @media screen and (max-width: 1023px) {
        .rental-title { min-width:200px; padding:1.25rem 1.5rem;}
        }
        @media screen and (max-width: 767px) {
        .rental-title { bottom:5px; min-width:150px; padding:.75rem 1.25rem;}
        }

#zeb{ margin-top: -4rem; padding-top: 8rem;}

.faq-title {
        background: #26231E;
        color:#FFF;
        padding:1.5rem;
        box-sizing: border-box;
        }
        .faq-title span {
        color:#AC8C65;
        display: inline-block;
        margin-right:1rem;
        }
.faq-answer {
        border:1px solid #26231E;
        padding:1.5rem 1.5rem 1.5rem 3rem;
        box-sizing: border-box;
        }
        @media screen and (max-width: 1023px) {
        .faq-answer { padding:1.5rem;}
        }

.fac_map{
	display: table;
	margin: 0 auto;
}
.fac_map img{
	width: auto;
	max-height: 750px;
	height: 100%;	
}
		
.at_list li{
	margin-bottom: 20px;
}
.at_list li:before{
	content: "◆";
	margin-right: 5px;
}