@charset "UTF-8";

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

       Movie

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

/* ---- TOP用 ---- */

#head_contents{
    background:#434343;
    height: 100vh;
    width:100%;
    position: relative;
    margin:0;
    }
    #head_contents .header_text{
        margin:0 auto;
        }
        #head_contents .header_text .text_box{
        width:250px;
        margin:0 auto;
        }
        #head_contents .header_text .text_box p{
        color:#fff;
        font-size:18px;
        font-weight: normal;
        line-height: 3em;
        letter-spacing: 0.25em;
        }

    .movie-cover-l { position: absolute; left:0; top:0; width:600px; height:100vh; background: url("../images/parts/cover-left.png") right top repeat-y; z-index: 0; }
    .movie-cover-r { position: absolute; right:0; top:0; width:600px; height:100vh; background: url("../images/parts/cover-right.png") left top repeat-y; z-index: 0; }

    @media screen and (max-width: 1087px) {
    #head_contents { height: 60vh; min-height:600px; }
    .movie-cover-l { height: 60vh; min-height:600px; width:300px; background: url("../images/parts/cover-left-sp.png") right top repeat-y; }
    .movie-cover-r { height: 60vh; min-height:600px; width:300px; background: url("../images/parts/cover-right-sp.png") left top repeat-y; }
    }
    @media screen and (max-width: 767px) {
    #head_contents:before { content:"";display: block;position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,.3); z-index: 9999;}
    .movie-cover-l { display:none; }
    .movie-cover-r { display:none; }
    }

/* ---- 下層用 ---- */

.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: 50%;
        }
        
        /* --- 下層用 --- */
        .movie.movie-onsen { background: #222 url("../movie/onsen.jpg") no-repeat center; }
        .movie.pages:before { padding-top: 56.25%; } /* 16:9 */

        .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;
            /*object-fit: cover;*/
            }

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

       Width ( wrap + wrap-1200 )

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

    .wrap       { width:100%; margin-left:auto; margin-right:auto; }

    .wrap-2000  { max-width:2000px; }
    .wrap-1800  { max-width:1800px; }
    .wrap-1700  { max-width:1700px; }
    .wrap-1600  { max-width:1600px; }
    .wrap-1500  { max-width:1500px; }
    .wrap-1400  { max-width:1400px; }
    .wrap-1300  { max-width:1300px; }
    .wrap-1200  { max-width:1200px; }
    .wrap-1140  { max-width:1140px; }
    .wrap-1100  { max-width:1100px; }
    .wrap-1000  { max-width:1000px; }
    .wrap-900   { max-width: 900px; }
    .wrap-800   { max-width: 800px; }
    .wrap-750   { max-width: 750px; }
    .wrap-600   { max-width: 600px; }

    .max300     { max-width:300px; width:100%;}
    .max500     { max-width:500px; width:100%;}
    .max550     { max-width:550px; width:100%;}
    .max600     { max-width:600px; width:100%;}
    .max650     { max-width:650px; width:100%;}

    .w4em { width:4em; }
    .w5em { width:5em; }
    .w6em { width:6em; }
    .w7em { width:7em; }
    .w8em { width:8em; }
    .w9em { width:9em; }
    .w10em { width:10em; }
    .w11em { width:11em; }
    .w12em { width:12em; }
    .w14em { width:14em; }

    .w32p       { width:32.962963%;}
    .w66p       { width:66.666667%; }
    
    .w20p { width:20%; }
    .w25p { width:25%; }
    .w33p { width:33%; }
    .w50p { width:50%; }

    .h100p { height:100%; }

    .flex300    { max-width:300px; min-width:300px; width:300px; }
    .flex330    { max-width:330px; min-width:330px; width:330px; }
    .flex500    { max-width:500px; min-width:500px; width:500px; }
    .flex900    { max-width:900px; min-width:900px; width:900px; }

@media screen and (max-width: 1087px) {
    .wrap { max-width:700px; }
    .is-tablet .flex{ max-width:100% !important; min-width:100% !important;}
    }
@media only screen and (max-width: 767px) {
    .wrap { max-width:350px; }
    .is-mobile .flex{ max-width:100% !important; min-width:100% !important;}
    }

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

       Other

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

.flexslider-wrap {
    position: relative;
    width:100%;
    }
    .flexslider-wrap.h66p:after {
        content: "";
        display: block;
        padding-bottom:66.666666%;
        }
        .flexslider-wrap.h60p:after {
        content: "";
        display: block;
        padding-bottom:60%;
        }
        .flexslider-wrap.h16by9:after {
        content: "";
        display: block;
        padding-bottom:56.25%;
        }
        .flexslider-wrap.h55p:after {
        content: "";
        display: block;
        padding-bottom:55%;
        }
        .flexslider-wrap.h50p:after {
        content: "";
        display: block;
        padding-bottom:50%;
        }
        .flexslider-wrap.h41p:after {
        content: "";
        display: block;
        padding-bottom:41.666666%;
        }
        .flexslider-wrap .flexslider {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        }

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

       ヘッダー

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

header {
	position: absolute;
    left:0;
    top:0;
    z-index:9999;
	}
    .header-wrap {
        position: relative;
        z-index:200;
        }

/* ---------- movie上 固定 ---------- */

        .desktop-navigation-wrap {
            width:100%;
            margin-left:30px;
            margin-top:30px;
            box-sizing:border-box;
            }
            .desktop-logo {
            text-align:left;
            width:220px;
            padding-bottom:2.5rem;
            line-height:1;
            font-size:1px;
            }
            .desktop-navigation {
                    width:100%;
                    }
                    .desktop-navigation li {
                    position: relative;
                    display:block;
                    font-size:1.125rem;
                    line-height:1;
                    text-align:left;
                    vertical-align: middle;
                    letter-spacing: 0.1em;
                    margin-left:2rem;
                    margin-bottom:.75rem;
                    -webkit-transition: all 0.3s ease;
                       -moz-transition: all 0.3s ease;
                         -o-transition: all 0.3s ease;
                            transition: all 0.3s ease;
                    }
                    .desktop-navigation li:before {
                    display: block;
                    position: absolute;
                    top: 1rem;
                    left: -2rem;
                    width: 1rem;
                    height: 1px;
                    background: rgba(255, 255, 255, .5);
                    content: "";
                    -webkit-transition: all 0.3s ease;
                    -moz-transition: all 0.3s ease;
                    -o-transition: all 0.3s ease;
                    }
                    .desktop-navigation li:hover { margin-left:2.5rem; }
                    .desktop-navigation li:hover:before { left:-2.5rem; width:1.5rem;}
                    .desktop-navigation li a {
                        color:#FFF;
                        display:block;
                        padding:.3rem 0;
                        }
            .desktop-reservation-btn {
                    position: absolute;
                    top:20px;
                    right:20px;
                    z-index: 9999;
                    width:auto;
                    text-align: center;
                    -webkit-transition: all 0.3s ease;
                       -moz-transition: all 0.3s ease;
                         -o-transition: all 0.3s ease;
                            transition: all 0.3s ease;

                    }
                    .desktop-reservation-btn a {
                    position: relative;
                    color:#111;
                    display:block;
                    width:100%;
                    padding:1em 3rem;
                    line-height: 1;
                    background:rgba(255,255,255,1);
                    font-size:1rem;
                    box-sizing: border-box;
                    z-index: 1;
                    -webkit-transition: all 0.3s ease;
                       -moz-transition: all 0.3s ease;
                         -o-transition: all 0.3s ease;
                            transition: all 0.3s ease;
                    }
                    .desktop-reservation-btn a span { font-size:11px; }
                    .desktop-reservation-btn a:hover { padding-right:4rem; background:rgba(255,255,255,.7);}

            .desktop-phone { position:absolute; left:35px; bottom:35px; z-index: 999; font-size:1.125rem;color:#FFF;}
            .desktop-phone span { letter-spacing: .075em; }
            .desktop-instagram-icon {
                    position:absolute;
                    right:35px;
                    bottom:35px;
                    z-index: 999;
                    width:44px;
                    height:44px;
                    background:rgba(255,255,255,1);
                    border-radius: 50%;
                    text-align: center;
                    transform: rotateY( 0deg ) ;
                    -webkit-transition: all 0.3s ease;
                       -moz-transition: all 0.3s ease;
                         -o-transition: all 0.3s ease;
                            transition: all 0.3s ease;
                    }
                    .desktop-instagram-icon a { display: block; color:#111; font-size:26px; width:44px; height: 44px;  line-height: 42px; }
                    .desktop-instagram-icon:hover { background: rgba(255,255,255,.7); transform: rotateY( 180deg ) ; }

        @media screen and (max-width: 1087px) {
        .desktop-navigation-wrap { margin-left:15px; margin-top:15px; }
        .desktop-logo { width: 176px; padding-bottom:1rem; }
        .desktop-phone { left:15px; bottom:15px; }
        .desktop-instagram-icon { right:15px; bottom:15px; }
        }
        
        @media screen and (max-width: 767px) {
        .desktop-logo { padding-bottom:0; }
        .desktop-navigation { display: none; }
        .desktop-reservation-btn { display: none; }
        }

/* ---------- スクロール　上部固定 ---------- */

    .fixed-navigation-wrap {
        width:100%;
        height:70px;
        position: fixed;
        top:-150px;
        left:0;
        background:#16100C;
        box-sizing:border-box;
        opacity: 0;
        -webkit-transition: all 0.3s ease;
           -moz-transition: all 0.3s ease;
             -o-transition: all 0.3s ease;
                transition: all 0.3s ease;
        }
        .header-wrap.fixed .fixed-navigation-wrap {
            top:0;
            opacity: 1;
            }
        .fixed-logo {
            float:left;
            padding-top:7px;
            padding-left:15px;
            width:154px;
            line-height:1;
            font-size:1px;
            }
        .fixed-navigation {
            position:relative;
            }
            .fixed-navigation ul { float:right; padding-top: 11px; padding-right: 15px;}
            .fixed-navigation li { display: inline-block; margin-right:2.5rem;line-height: 1; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; font-size:1rem;}
            .fixed-navigation li:last-child { margin-right: 0;}
            .fixed-navigation li:before { display:none;}

            .fixed-navigation li a {
                position: relative;
                display: inline-block;
                transition: .3s;
                color:#FFF;
                }
                .fixed-navigation li a:after {
                position:absolute;
                bottom:-5px;
                left:50%;
                content:'';
                width:0;
                height:1px;
                background-color:#EFF0E8;
                transition:.3s;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%); 
                }
                .fixed-navigation li.fixed-reservation a { background:#EFF0E8; color:#16100C; padding:1rem 1.2rem;}
                .fixed-navigation li.fixed-reservation a:hover { opacity:0.6; filter: alpha(opacity=60);	-ms-filter: "alpha( opacity=60 )"; }
                
                .fixed-navigation li a:hover:after { width:100%; }
                .fixed-navigation li.fixed-reservation a:hover:after { width:0;}

                #home .fixed-navigation li.fixed-reservation{
                        margin-right: 1.5rem;
                    }

                .fixed-navigation li.fixed-reservation.tokutenbn2 a { 
                    background:#F5E4E9; color:#E5475A; 
                    padding:0rem 1.2rem 0 calc(1.2rem + 30px);
                    border-radius: 3px;
                    display:grid;
                    place-items:center;
                    height:48px;
                    width:auto;
                    position: relative;
                    transition: 0.5s ease-out;
                    box-sizing: border-box;
}
/*
.fixed-navigation li.fixed-reservation.tokutenbn2 a:hover{
    background:url("../em_tools/img/cracker_01.svg") no-repeat,#fff;
    background-size: cover;
    background-position: left top;
}
*/
                .fixed-navigation li.fixed-reservation.tokutenbn2 a:before{
                    content:url("../em_tools/img/present_illust.png");
                    display:inline-block;
                    position: absolute;
                    left:1.2rem;
                    top:50%;
                    transform: translateY(-50%);
                    width:25px;
                    height:auto;
                }
.fixed-navigation li.fixed-reservation.tokutenbn2 a:hover { opacity:0.8; filter: alpha(opacity=80); }

        @media screen and (max-width: 1087px) {
            #home .fixed-navigation ul{
                display: flex;
                align-items: center;
            }
        .fixed-navigation li { margin-right:2rem; 
            }
            .fixed-navigation li.fixed-reservation.tokutenbn2 { 
                    width:50px;
}
           #home .fixed-navigation li{
                margin-right:1.5rem;
            }

        }
        @media screen and (max-width: 767px) {
        .fixed-navigation-wrap { display: none; }
        }

/* ---------- スマホ ナビゲーション ---------- */

    .sp-navigation-wrap { display: none; }

        .gnav { }
            .nav-toggle {
                        display:block;
                        position:fixed;
                        right:0;
                        top:0;
                        padding:0;
                        width:70px;
                        height:70px;
                        text-align: center;
                        font-size: 0px;
                        letter-spacing: 0;
                        box-sizing: border-box;
                        pointer-events: auto;
                        cursor:pointer;
                        z-index:99999;
                        -webkit-transition: all 0.3s ease;
                            -moz-transition: all 0.3s ease;
                            -o-transition: all 0.3s ease;
                            transition: all 0.3s ease;
                        }
                        .nav-toggle div { position:absolute; width:30px; height:20px; top:34px; right:20px; }
                        .nav-toggle span { display: block; position: absolute; height: 2px; width:30px; background: #FFF; -moz-border-radius:2px; -webkit-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px;
                        left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
                        .nav-toggle span:nth-child(1) { top: 0; }
                        .nav-toggle span:nth-child(2) { top: 9px; }
                        .nav-toggle span:nth-child(3) { top: 18px; }
                        .gnav .menu  { opacity:1; font-size:11px; position:absolute; width:30px; right:22px; top:17px; line-height:1; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; color:#FFF;}
                        .gnav .close { opacity:0; font-size:11px; position:absolute; width:30px; right:22px; top:17px; line-height:1; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; color:#FFF;}

                        .gnav.active .menu  { opacity: 0; }
                        .gnav.active .close { opacity: 1; color:#111; }
                        .gnav.active .nav-toggle span {background: #111; }
                        .gnav.active .nav-toggle span:nth-child(1) {top: 8px;-webkit-transform: rotate(315deg);-moz-transform: rotate(315deg);transform: rotate(315deg);}
                        .gnav.active .nav-toggle span:nth-child(2) {width: 0;left: 50%;}
                        .gnav.active .nav-toggle span:nth-child(3) {top: 8px;-webkit-transform: rotate(-315deg);-moz-transform: rotate(-315deg);transform: rotate(-315deg);}

            .gnav-content {
                    display: none;
                    position: fixed;
                    right: 0;
                    top: 0;
                    width: 100%;
                    min-width:320px;
                    height: 100%;
                    background:#FFF;
                    color:#FFF;
                    overflow: auto;
                    z-index:9999;
                    text-align: center;
                    }
                    .gnav-logo { position:relative; z-index: 200; width:176px; padding-bottom:1.5rem;}
                    .gnav-logo img { width:280px; height: auto; margin:0 auto; }
                    .navigation { padding-top:15px; width:100%; }
                    .main-nav { position:relative; padding-bottom:1rem; }
                    .main-nav li { width:100%; text-align: center; font-size:15px; font-weight:normal; }
                    .main-nav li a { letter-spacing: 0.05em; padding:18px 0 ; display:block; color:#222; font-size:1.2rem; line-height: .8em; }
                    .main-nav li.instagram a { font-size:30px; }
                    .main-nav li.phone a { font-size:24px; }

                    .header-wrap.fixed .nav-toggle span { background: #111; }
                    .header-wrap.fixed .gnav .menu  { color:#111;}
                    .header-wrap.fixed .gnav .close { color:#111;}
                    
                    .sp-description { color:#888;}

        @media screen and (max-width: 767px) {
        .sp-navigation-wrap { display: block; }
        .reservation { display: block; }
        }

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

       背景

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

.bg-beige { background:#F3F2ED;}
.bg-mon { background: url("../images/parts/beige.jpg") center center repeat;}
.bg-bk { background: url("../images/parts/black.jpg") center center repeat;}

.bg-head {
    padding-top:4rem;
    position: relative;
    z-index: 10;
    }
    .bg-head:before {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        padding-bottom:30%;
        background: url("../images/parts/beige.jpg") center center repeat;
        z-index: -1;
        }
        @media screen and (max-width: 1087px) {
        .bg-head:before { padding-bottom:45%; }
        }
        @media screen and (max-width: 767px) {
        .bg-head:before { padding-bottom:65%; }
        }

.beige-box {
    background:  url("../images/parts/beige.jpg") center center repeat;
    padding:3.5rem;
    }
    @media screen and (max-width: 1087px) {
        .beige-box { padding:2.5rem; }
        }
        @media screen and (max-width: 767px) {
        .beige-box { padding:1.5rem; }
        }


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

        タイトル / テキスト

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

.kumo-title {
    position:relative;
    padding-top:80px;
    }
    .kumo-title:before {
        content:"";
        display:block;
        position: absolute;
        top:0;
        left:50%;
        width:73px;
        height:58px;
        margin-left:-36px;
        background: url("../images/parts/kumo.svg") center center / cover;
        }
        @media screen and (max-width: 1087px) {
        .kumo-title { padding-top:60px; }
        .kumo-title:before { width:56px; height:43px; margin-left:-28px; }
        }
        @media screen and (max-width: 767px) {
        .kumo-title { padding-top:50px; }
        .kumo-title:before { width:44px; height:35px; margin-left:-22px; }
        }

.bar-title {
    padding-top:2rem;
    position: relative;
    }
    .bar-title:before {
        content: "";
        display: block;
        position: absolute;
        top:0;
        width:70px;
        height:3px;
        background:#BA2739;
        }
        .bar-title:before { left:0; }
        .bar-title.center:before { left:50%; margin-left:-35px; }
        .bar-title.center-left:before { left:50%; margin-left:-35px; }
        .bar-title.left-center:before { left:0; }
        
        @media screen and (max-width: 1087px) {
        .bar-title { padding-top:1.5rem;}
        }
        @media screen and (max-width: 767px) {
        .bar-title { padding-top:1rem;}
        .bar-title:before { width:50px; }
        .bar-title.center:before { margin-left:-25px; }
        .bar-title.center-left:before { left:0; margin-left:0; }
        .bar-title.left-center:before { left:50%; margin-left:-25px; }
        }
.mari-title {
    position:relative;
    padding-top:80px;
    }
    .mari-title:before {
        content:"";
        display:block;
        position: absolute;
        top:0;
        left:50%;
        width:78px;
        height:78px;
        margin-left:-38px;
        background: url("../images/parts/mari.png") center center / cover;
        }
        @media screen and (max-width: 1087px) {
        .mari-title { padding-top:60px; }
        .mari-title:before { width:46px; height:46px; margin-left:-23px; }
        }
        @media screen and (max-width: 767px) {
        .mari-title { padding-top:50px; }
        .mari-title:before { width:36px; height:35px; margin-left:-18px; }
        }

.nomber { font-family: 'Lobster Two', cursive; font-size:4rem; color:#BA2739;}


.f-span {
    line-height: 140%;
    }
    .f-span span{
        display:inline-block;
        font-size:12px;
        font-weight:100;
        letter-spacing: .15em;
        }
.label-title {
    background: url("../images/parts/black.jpg") center center repeat;
    color:#FFF;
    line-height: 1;
    padding:2.5em 0;
    box-sizing: border-box;

    }
    .label-title span { font-size:1.5em; font-weight:200; color:#666; vertical-align: sub; }
.border-title {
    border-bottom:3px solid #101900;
    padding-bottom:.2rem;
    }

.th30 img { height:30px; width:auto; }
.th60 img { height:60px; width:auto; }
.th70 img { height:70px; width:auto; }
.th80 img { height:80px; width:auto; }
.th100 img { height:100px; width:auto; }

    @media screen and (max-width: 1087px) {
    .th30 img { height:24px; }
    .th60 img { height:45px; }
    .th70 img { height:53px; }
    .th80 img { height:60px; }
    .th100 img { height:75px; }

    .f-span span{ font-size:11px; }
    }
    @media screen and (max-width: 767px) {
    .th30 img { height:21px; }
    .th60 img { height:36px; }
    .th70 img { height:42px; }
    .th80 img { height:48px; }
    .th100 img { height:60px; }

    .f-span span{ font-size:10px; }
    }

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

       トップページ

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

.att-img {
    position: relative;
    width:77%;
    margin-bottom:50px;
    z-index: 10;
    }
    .att-img:before {
        content: "";
        display:block;
        position: absolute;
        left:34%;
        top:-11%;
        width:100%;
        height:100%;
        background: url("../images/parts/beige.jpg") center center repeat;
        z-index: -11;
        }
    .att {
        position:relative;
        padding-bottom:66%;
        width:100%;
        z-index: 10;
        }
        .att_01 { background: url("../images/img/top/img_01.jpg") center center / cover; }
    .att-text {
        position: absolute;
        top:40%;
        right:0;
        background:rgba(0,0,0,.8);
        color:#FFF;
        padding:3.5rem;
        box-sizing: border-box;
        z-index: 100;
        }

@media screen and (max-width: 1087px) {
    .att-img { width:80%; margin-bottom:-3rem; }
    .att-img:before { top:-2rem; left:26%; height:150%; }
    .att { padding-bottom:66%;}
    .att-text { position: relative; top:auto; right:auto !important; left:auto !important;  width:100%; padding:2.5rem; }
    }
    @media screen and (max-width: 767px) {
    .att-img { width:87%; margin-bottom:-2em; }
    .att-img:before { height:250%; }
    .att-text { padding:1.5rem; }
    }

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

.banner-wrap {
    width:100%;
    background: url("../images/parts/banner-bg.jpg") center center / cover;
    position: relative;
    padding:5rem 0;
    box-sizing: border-box;
    z-index: 0;
    overflow: hidden;
    }
    .banner-wrap:before {
    content:"";
    background: inherit;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    position: absolute;
    top: -0px;
    left: -0px;
    right: -0px;
    bottom: -0px;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
    z-index: -1;
    }
    .banner-wrap:hover:before {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    }
    .banner-btn-wrap {
        width:100%;
        padding:10px;
        box-sizing: border-box;
        background: rgba(255,255,255,.65);
        }
    .banner-btn {
        position: relative;
        padding:3rem;
        box-sizing: border-box;
        background: rgba(255,255,255,.65);
        z-index: 20;
        -webkit-transition:  all 0.2s;
            -moz-transition: all 0.2s;
            -o-transition:   all 0.2s;
        }
    @media screen and (max-width: 767px) {
    .banner-btn { padding:1.5rem; }
    }

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

       下層共通

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

/*=================================================
		page-head-contents
==================================================*/

#page-head_contents{ background-color:#222; height: 600px; margin:0 0 0 0; position: relative;}

    .onsen      { background:url("../images/img/onsen/header.jpg") center center / cover;}
    .cuisine    { background:url("../images/img/cuisine/header.jpg") center center / cover;}
    .facilities { background:url("../images/img/facilities/header.jpg") center center / cover;}
    .access     { background:url("../images/img/access/header.jpg") center center / cover;}

    .hero-cover-l { position: absolute; left: 0; top:0; width:600px; height:600px; background: url("../images/parts/cover-left.png") right top repeat-y; z-index: 0; }
    .hero-cover-r { position: absolute; right:0; top:0; width:600px; height:600px; background: url("../images/parts/cover-right.png") left top repeat-y; z-index: 0; }

    @media screen and (max-width: 1087px) {
    #page-head_contents { height: 40vh; min-height:350px; }
    .hero-cover-l { height: 40vh; min-height:350px; }
    .hero-cover-r { height: 40vh; min-height:350px; }
    }
    @media screen and (max-width: 767px) {
    #page-head_contents:before { content:"";display: block;position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,.3); z-index: 1;}
    .hero-cover-l { display:none; }
    .hero-cover-r { display:none; }
    }









/* section type 1 */
        .section-img-wrap {
            position: relative;
            width:75%;
            z-index: 10;
            }
            .section-img-wrap.left { margin-right:25%; }
            .section-img-wrap.right{ margin-left :25%; }
            .section-img-wrap:before {
                content: "";
                display:block;
                position: absolute;
                top:5%;
                width:100%;
                height:100%;
                background: url("../images/parts/beige.jpg") center center repeat;
                z-index: -11;
                }
                .bg-right:before { left:36%; }
                .bg-left:before  { right:36%; }

                .section-img {
                    position: relative;
                    width:100%;
                    padding-bottom:60%;
                    z-index: 10;
                    }
                    .onsen_01 { background: url("../images/img/onsen/img_01.jpg") center center / cover; }

        .section-text-wrap {
            position: absolute;
            bottom:5%;
            box-sizing: border-box;
            z-index: 100;
            }
            .section-text-wrap.right { right:0; }
            .section-text-wrap.left  { left :0; }

            .section-text {
                width:100%;
                max-width: 750px;
                box-sizing: border-box;
                background:rgba(255,255,255,.95);
                padding:3.5rem;
                }
                .section-title-bar { position: relative; }
                .section-title-bar:before {
                    content:"";
                    display:block;
                    position: absolute;
                    top:0;
                    left:3.5rem;
                    width:70px;
                    height:3px;
                    background: #BA2739;
                    }

                @media screen and (max-width: 1087px) {
                .section-img-wrap { width:80%; margin-bottom:-3rem; }
                .section-img-wrap:before { top:2rem; }
                .section-img { padding-bottom:66%;}
                .section-text-wrap { position: relative; bottom:auto; right:auto !important; left:auto !important;  width:100%; padding:1.5rem 1.5rem .5rem; }
                .section-text { padding:2.5rem;}
                .section-title-bar:before { left:2.5rem; }
                }
                @media screen and (max-width: 767px) {
                .section-img-wrap { width:87%; margin-bottom:-2em; }
                .section-text-wrap { padding:1rem 1rem .5rem; }
                .section-text { padding:1.5rem;}
                .section-title-bar:before { left:1.5rem; }
                }

/* section type 2 */

        .section-bg {
            position: relative;
            z-index: 10;
            }
            .section-bg:before {
                content: "";
                display:block;
                position: absolute;
                top:5%;
                width:100%;
                height:100%;
                background: url("../images/parts/beige.jpg") center center repeat;
                z-index: -11;
                }
                .section-bg.left:before { left :-5%; }
                .section-bg.right:before{ right:-5%; }

                @media screen and (max-width: 1087px) {
                .section-bg:before { top:-3%; width:110%; height:106%; }
                }
                @media screen and (max-width: 767px) {
                }




.border-box {
    border:1px solid #0D1D73;
    padding:2.5rem;
    box-sizing:border-box;
    color:#222;
    overflow: hidden;
    }
    @media only screen and (max-width: 1087px) {
    .border-box { padding:2rem; }
    }
    @media only screen and (max-width: 767px) {
    .border-box { padding:1.5rem; }
    }

.dotted-list {
    border-top:2px dotted #999;
    }
    .dotted-list li {
    position: relative;
    border-bottom:2px dotted #999;
    padding:.5em 0;
    }
    .dotted-list span {
    padding-right:.5em;
    }
    
.line-list {
    }
    .line-list li {
    border-bottom:1px solid #CCC;
    padding:.75em 0;
    }
    .line-list li:last-child {
    border-bottom:none;
    }

.disk-list {
    }
    .disk-list li {
    padding: 0;
	position: relative;
    padding-left:1em;
    }
    .disk-list li:before {
        content: "・";
        display:block;
        position: absolute;
        top: 0;
        left: 0;
        font-size:10px;
        vertical-align: middle;
        }
.kome-list {
    }
    .kome-list li {
    padding: 0;
	position: relative;
    padding-left:1em;
    }
    .kome-list li:before {
        content: "※";
        display:block;
        position: absolute;
        top: 0;
        left: 0;
        font-size:10px;
        vertical-align: middle;
        }
.table {
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
    text-align:left;
    letter-spacing:0;
    line-height: 150%;
    box-sizing: border-box;
    font-size:.9275em;
    border-top:1px solid #999;
    }
    .table tr {
        border-bottom:1px solid #999;
        }
        .table th {
        padding:.525em 1em;
        vertical-align:middle;
        font-weight:500;
        text-align:center;
        background:rgba(0,0,0,.05);
        }
        .table td {
        padding:.525em 1em;
        text-align:left;
        vertical-align: middle;
        }
        .table.th-left th { text-align:left; }
        .table.td-center td { text-align:center; }
@media screen and (max-width: 767px) {

    .table.sp-table { border:none; }
    .table.sp-table tr { border-bottom:none; }
    .table.sp-table th { width:100% !important; display: block !important; padding:.625em 1em; box-sizing: border-box; border-right:none; text-align: left;}
    .table.sp-table td { width:100% !important; display: block !important; padding:.625em 1em 1.25em; box-sizing: border-box; border-right:none;}
    .table.sp-table td p { border-left:none; padding:0; }
}
/*
hr.line {
    border: none;
    padding:0;
    margin:0;
    height:1px;
    background: url("../images/parts/line.png") center center repeat-x;
    width:100%;
    }
*/
.border-space-w {
    border:1px solid #FFF;
    box-sizing: border-box;
    }
    .border-space-w.tb-none { border-top:none; border-bottom:none; }
.access-text {
    padding-left:1.25rem;
    text-indent:-1.25rem;
    }
    .access-text span {
        text-indent:0;
        display: inline-block;
        padding:1px 6px;
        margin:1px 5px 1px;
        line-height: 150%;
        border: 1px solid #ddd;
        background:rgba(169,135,99,.2);
        border-radius:         2px;
        moz-border-radius:     2px;
        -webkit-border-radius: 2px;
        -o-border-radius:      2px;
        -ms-border-radius:     2px;
        }
.link-btn {
    display: inline-block;
    padding: 2px 1em;
    line-height: 150%;
    margin-bottom: 3px;
    margin-left:1rem;
    background: #333;
    font-size: 12px;
    color: #FFF;
    border-radius:         4px;
    moz-border-radius:     4px;
    -webkit-border-radius: 4px;
    -o-border-radius:      4px;
    -ms-border-radius:     4px;
    }
.link { padding-bottom:.25rem ; border-bottom:1px dotted #666; color:#A98963;}
    .link:hover { border-bottom:1px solid #666; color:#222;}
.map {
    position: relative;
    padding-bottom: 600px;
    margin-bottom:1.5rem;
    height: 0;
    border: 5px solid #333;
    overflow: hidden;
    }
    .map iframe,
    .map object,
    .map embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    @media screen and (max-width: 1087px) {
    .map { padding-bottom: 450px; border: 3px solid #333;}
    }
    @media screen and (max-width: 767px) {
    .map { padding-bottom: 90%; }
    }
    .access-logo { width:420px;}
    @media screen and (max-width: 767px) {
    .access-logo { width:210px;}
    }


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

       下層 詳細

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






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

       フッター

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

footer {
    width:100%;
    background: url("../images/parts/footer-bg.jpg") center center / cover;
    position: relative;
    color:#FFF;
    }
    .footer-logo {
        width:80px;
        }

.footer-menu {
	width:100%;
	text-align:center;
	}
	.footer-menu li {
        display: inline-block;
        padding:.25rem 15px .125rem;
        }
    .footer-menu li a {
        font-size:1rem;
        position: relative;
        display: inline-block;
        text-decoration: none;
        color:#FFF;
        vertical-align: middle;
        }
        .footer-menu li.footer-instagram a {
        font-size:1.5rem;
        }
        .footer-menu li a:hover {
        cursor: pointer;
        text-decoration: none;
        }
        .footer-menu li a::after {
        position: absolute;
        bottom: 3px;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background: #FFF;
        transform: scale(0, 1);
        transform-origin: right top;
        transition: transform .3s;
        }
        .footer-menu li a:hover::after {
        transform-origin: left top;
        transform: scale(1, 1);
        }

.copyright {
    position: relative;
    z-index: 100;
	padding:20px 0;
    background: rgba(0,0,0,.1);
	text-align:center;
	margin-top:-5px;
	letter-spacing:0;
	line-height:1;
    width:100%;
	color:#FFF;
	font-size:12px;
	line-height:1;
	}

@media only screen and (max-width: 767px) {
    .footer-menu { padding:20px 0 2rem; margin-left: 0;}
    .footer-menu li { display: block; width:100%; text-align: left; border-bottom:1px dotted #CCC; padding:0; }
    .footer-menu li:last-child { border-bottom: none; }
    .footer-menu li a { padding:.75rem 1rem; display: block; }
    .footer-menu li.footer-instagram a { font-size:1rem; }
    .footer-logo { width:56px; }
    }


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

		ページトップ

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

#totop {
	display:none;
	*display:block; /* IE 7 and below */
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:999;
	}
    :root *> #totop { display:none;	}
    #totop { display:block; }
    *+html #totop { display:block; }
    #totop.open { display:block; }
    a.totop{ background: url("../images/parts/totop.png") no-repeat center top; background-size:cover;width:58px;height:58px;display:block;cursor:pointer;}
    a.totop:hover{ background-position:center bottom;}
@media only screen and (max-width: 767px) {
    #totop { bottom:30px; right:0;}
	a.totop{ background: url("../images/parts/totop-sp.png") no-repeat center top; background-size:cover;width:45px;height:45px;}
}