@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:90px;
        z-index: 1;
        }


        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:96px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:90px; }
        }

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

       Movie

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

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        z-index: 0;
        }
        .movie-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        background: rgb(0 0 0 / .1);
        z-index: 0;
        }
        
        .movie {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
        overflow: hidden;
        }
        .video-js {
        height: 100% !important;
        }
        .video-js .vjs-tech { 
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        }

        /*=================================================
        すべてアスペクト比固定の場合（movieサイズのまま）　top-movie付与
        ==================================================*/

        .movie_inner {
        position: relative;
        width: 100%;
		height: auto;
        overflow: hidden;
        z-index: 0;
        top: 0;
        }
        .movie_inner video { object-fit: cover; }
		.top-movie{ max-height:calc(100vh - 90px); }

        .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-height:0; height:100%; }
        .movie.top-movie:before { content:""; display: block; position: relative; top:0; left:0;
        padding-top:56.25%;
        }

        @media screen and (max-width: 1024px) {
        .movie.top-movie:before { padding-top:80%; }
        .top-movie{ max-height:calc(100vh - 96px); }
        }
        @media screen and (max-width: 767px) {
        .movie.top-movie:before { padding-top:80%; }
        .top-movie{ max-height:calc(100vh - 90px); }
        }

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

       背景

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

.border-box {
        border:2px solid #3E4142;
        padding:55px;
        box-sizing: border-box;
        }
        .border-box-m {
        border:6px solid #C6BBA8;
        border-radius: 10px;
        padding:8%;
        box-sizing: border-box;
        background: rgb(255 255 255 / .5);
        }
        .border-box-s {
        border:3px solid rgb(0 0 0 / .4);
        padding:6%;
        box-sizing: border-box;
        border-radius: 10px;
        }

.bg-pink { background:rgb(197 131 121 / .07); }

.pink-wrap {
        background:rgb(197 131 121 / .07);
        padding:80px 6.5%;
        box-sizing: border-box;
        }
        @media screen and (max-width:1500px) {
        .pink-wrap { padding:5% 6.5%; }
        }
        @media screen and (max-width:1024px) {
        .border-box  { padding:5%; }
        .border-box-m { padding:2.5rem; }
        .border-box-s { padding:5%; }
        
        }
        @media screen and (max-width:767px) {
        .border-box  { padding:9.5%; }
        .border-box-m { padding:2rem 1.5rem; }
        .border-box-s { padding:9.5%;border-radius: 7px;  }
        .pink-wrap { padding:8.5%; }
        
        }

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

        タイトル / テキスト

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

.white { color:#ECE6E4 !important; }
.white .en { color:#ECE6E4; }
.red { color:#7C3A30;}
        .red a { color:#7C3A30;}
.blue { color:#298DA6; }
.light { color:#58A4B0; }

.mark {background:linear-gradient(transparent 60%, #F29E84 60%);}

.under-title {
        padding-bottom:.35rem;
        border-bottom:2px solid #7A3044;
        }
        .under-title-s {
        padding-bottom:.35rem;
        border-bottom:1px solid #7A3044;
        }
.bar-title {
        position: relative;
        padding-bottom:12px;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:0;
        width:40px;
        height:2px;
        background:#7A3044;
        }
        .center.bar-title:after {
        left:50%;
        translate:-50%;
        }

.left-lead {
        position: relative;
        width:100%;
        overflow: hidden;
        padding-left:30px;
        line-height: 200%;
        z-index: 0;
        }
        .left-lead:after {
        content:"";
        position: absolute;
        display:block;
        left:0;
        top:1em;
        width:25px;
        height:1px;
        background:#7C3A30;
        z-index: -1;
        }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        bottom:.75em;
        width:100%;
        height:1px;
        background: #7C3A30;
        margin-left:1rem;
        z-index: -1;
        }
.tate-lead-before {
        position: relative;
        width:100%;
        overflow: hidden;
        padding-top:30px;
        z-index: 0;
        }
        .tate-lead-before:after {
        content:"";
        position: absolute;
        display: block;
        top:0;
        left:50%;
        width:1px;
        height:20px;
        background:#7C3A30;
        z-index: -1;
        }
        @media screen and (max-width:767px) {
        .sp-yokogaki .tate-lead-before { padding-top:0; padding-left:30px; }
        .sp-yokogaki .tate-lead-before:after { left:0; top:50%;  width:20px; height:1px;}
        }

.w-title {
        border-top:2px solid #7C3A30;
        border-bottom:2px solid #7C3A30;
        padding:8px 0;
        color:#7C3A30;
        }

.label-title {
        background: #C58379;
        padding:.75em;
        box-sizing: border-box;
        line-height: 125%;
        color:#FDFCFA;
        }
        @media screen and (max-width:1024px) {
        
        
        
        }
        @media screen and (max-width:767px) {
        
        
        }

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

       トップページ

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

        /*=================================================
                GREETING
        ==================================================*/

        .greeting-img {
        width:100%;
        height:0;
        padding-bottom:48.125%;
        background: url("../images/img/top/img_01.jpg") center center / cover;
        z-index: 0;
        }
        .greeting-text {
        position: relative;
        background: url("../images/parts/background.jpg") repeat;
        width:100%;
        padding:6% 8.5% 0;
        margin-top:-8%;
        box-sizing: border-box;
        z-index: 1;
        }
        @media screen and (max-width:1024px) {
        .greeting-img { padding-bottom:50%; }
        }
        @media screen and (max-width:767px) {
        .greeting-img { padding-bottom:60%; }
        .greeting-text { margin-top:0%; padding:2.5rem 0 0; }
        }

        /*=================================================
                Instagram
        ==================================================*/

        .instagram-img {
        position: relative;
        width:100%;
        height:200px;
        background: url("../images/parts/instagram-img.jpg") center center / cover;
        }

        .instagram-text {
        background: #C58379;
        position: relative;
        width:100%;
        height:100%;
        overflow: hidden;
        }
        .instagram-text:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:500px;
        height:300px;
        background: url("../images/parts/seigaiha.png") center center / cover;
        z-index: 0;
        }
        .instagram-text .inner {
        position: absolute;
        top:50%;
        left:0;
        width:100%;
        translate:0 -50%;
        text-align: center;
        padding-top:10px;
        color:#FFF;
        z-index: 1;
        }
        a .instagram-text { color:#FFF; }
        
        @media screen and (max-width:1024px) {
        .instagram-img { height:180px; }
        }
        @media screen and (max-width:767px) {
        .instagram-img { height:120px; }
        .instagram-text { height:120px; }
        .instagram-text .inner { padding-top:5px; }
        }

        /*=================================================
                Banner
        ==================================================*/

        .banner-wrap {
        width:100%;
        position: relative;
        overflow: hidden;
        z-index: 1;
        }
        .banner-wrap a {
        display: block;
        overflow: hidden;
        color:#FFF;
        }
        .banner-img {
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        width:100%;
        height:500px;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        }
        .banner-text {
        position: absolute;
        top:0%;
        left:50%;
        margin-left:380px;
        width:320px;
        height:100%;
        background: #C58379;
        padding:0 10px;
        text-align: center;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 1;
        }
        .banner-text:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-80px;
        left:-100px;
        width:500px;
        height:300px;
        background: url("../images/parts/seigaiha.png") center center / cover;
        z-index: -1;
        }
        .banner-text-wrap {
        position: relative;
        width:100%;
        height:100%;
        border-left:1px solid #FDFBF9;
        border-right:1px solid #FDFBF9;
        z-index: 0;
        }
        .banner-inner {
        position: absolute;
        top:50%;
        left:0;
        width:100%;
        translate:0 -50%;
        text-align: center;
        }
        .more-reservation {
        width:240px;
        height:60px;
        line-height:58px;
        text-align: center;
        color:#FDFBF9;
        background: none;
        border:1px solid #FDFBF9;
        border-radius:0px;
        box-sizing: border-box;
        overflow: hidden;
        font-size:1rem;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        letter-spacing: 0em;
        display: inline-block;
        transition: all 0.3s ease;
        }
        .more-reservation:after {
        position: absolute;
        content: "";
        width: 0;
        height:100%;
        bottom:0;
        right: 0;
        z-index: -1;
        border-radius:1px;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:#7C3A30;
        }      
        .banner-wrap a:hover .more-reservation { opacity:1; border:1px solid #7C3A30; }
        .banner-wrap a:hover .more-reservation:after { left:0; width:100%; }

        .banner-wrap a:hover:after { background: rgb(0 0 0 / .6); }

        @media screen and (max-width: 1500px) {
        .banner-img { height:450px; }
        .banner-text { left:auto; right:0; margin-left:0;}
        }

        @media screen and (max-width:1024px) {
        .banner-img { height:360px; }
        }
        @media screen and (max-width:767px) {
        .banner-img { height:270px; }
        .banner-text { position: relative; width:100%; height:240px; padding:7px; }
        .banner-text-wrap { border:1px solid #FDFBF9; }
        .banner-text:after { left:auto; right:0; bottom:-100px; }
        .more-reservation { height:56px; line-height: 54px; width:76%; }
        }

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

       下層 ヘッダー

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

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        z-index: 0;
        }

        /*=================================================
                ノーマルヘッダー
        ==================================================*/

        .page-header {
        position: relative;
        width: 100%;
        height:100%;
        max-height:calc(100vh - 90px);
        overflow: hidden;
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:66%;
        height:0;
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        height:0;
        padding-bottom:30%;
        width:100%;
        }

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



        @media screen and (max-width: 1024px) {
        .page-header:before { padding-bottom:80%; height:0; }
        .page-header.short:before { padding-bottom:80%; height:0; }
        }


.page-title {
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        padding:1.5rem 3vw 1.25rem 3vw;
        box-sizing: border-box;
        background: rgb(0,0,0);
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
        text-align: center;
        color:#FDFBF9;
        z-index:1;
        }
        .page-title h1 {
        position: relative;
        display: inline-block;
        letter-spacing: .05em;
        color:#FDFBF9;
        }
        @media screen and (max-width:767px) {
        .page-title { padding:1rem 6vw 1rem 6vw; }
        }

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

       FACILITIES

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