@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        width:100%;
        padding:0;
        margin-top:130px;
        z-index: 0;
        }
        .movie-title {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:90px;
        z-index: 1;
        }
        @media screen and (max-width:2000px) {
        .movie-title { width:4.5vw; }
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:96px; padding:0; }
        .movie-title { display: none; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:80px; }
        }

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

       Movie

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

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        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_inner video { object-fit: cover; }

        /*=================================================
        高さ100％の場合
        ==================================================*/
        /*
        .movie_inner {
        position: relative;
        width: 100%;
        height:100vh;
        min-height: 800px;
        overflow: hidden;
        z-index: 0;
        top: 0;
        }
        @media screen and (max-width:1024px) {
        .movie_inner { min-height: 600px; }
        }
        @media screen and (max-width:767px) {
        .movie_inner { min-height: 300px; }
        }
        */

        /*=================================================
        PCのみvh100%　スマホ：アスペクト比固定の場合　top-movie付与
        ==================================================*/
        /* 
        .movie_inner {
        position: relative;
        width: 100%;
        height:calc(100vh - 130px);
        overflow: hidden;
        z-index: 0;
        top: 0;
        }

        @media screen and (max-width:1024px) {
        .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:70%; }
        }
       */
        /*=================================================
        すべてアスペクト比固定の場合 （top-movie付与）
        ==================================================*/
        /*        */
        .movie_inner {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height:0;
        z-index: 1;
        }
        .movie.top-movie .movie_inner video{
        width:100%;
        height:auto !important;
        margin-left:auto;
        margin-right:auto;
        object-fit:contain;
        min-width: 0;
        min-height: 0;
        left: 0;
        transform: translateX(0%);
        -webkit-transform: translateX(0%); 
        }
        .movie.top-movie:before {
        content: "";
        display: block;
        padding-top:43.11%;
        }


        /*=================================================
        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 - 110px);
		}

        @media screen and (max-width: 1024px) {
        .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:70%; }
        }
        */

        /*=================================================
        下層ページ用
        ==================================================*/

        .movie.pages { z-index: 1; }
        .movie.pages .movie_inner {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height:0;
        z-index: 1;
        }
        .movie.pages .movie_inner video{
        width:100%;
        height:auto !important;
        margin-left:auto;
        margin-right:auto;
        object-fit:contain;
        min-width: 0;
        min-height: 0;
        left: 0;
        transform: translateX(0%);
        -webkit-transform: translateX(0%); 
        }
        .movie.pages:before {
        content: "";
        display: block;
        padding-top: 66.66666%;
        }
        .movie.pages.short:before { padding-top: 50%; }
        @media screen and (max-width:1024px) {
        .movie.pages .movie_inner { transform: translate(0,0); }
        }

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

       背景

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

.border-box {
        border:1px solid #aaa;
        padding:2.5rem;
        background: rgba(255,255,255,.7);
        border: 1px solid rgba(0,0,0,.8);
        box-sizing: border-box;
        }
        .border-box-s {
        border:1px solid #aaa;
        padding:2.5rem 3rem;
        box-sizing: border-box;
        }
        .border-box-s.bg-white { background: #FFF; }


.bg-green {
        position: relative;
        background: url("../images/parts/green.png") repeat;
        z-index: 0;
        }


        @media screen and (max-width:1024px) {
        .border-box-s { padding:2rem 2rem; }
        
        }
        @media screen and (max-width:767px) {
        .border-box-s { padding:1.5rem 1.5rem; }
        .border-box  { padding:2rem 9%; }
        
        }

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

        タイトル / テキスト

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

.white { color:#FFF !important; }
.white .en { color:#FFF; }
.red { color:#800000;}
.green { color:#2B583A;}

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

.under-title {
        padding-bottom:.25rem;
        border-bottom:1px solid rgba(0,0,0,.6);
        }
        .bg-green .under-title {  border-bottom:1px solid rgba(255,255,255,.6); }
.box-title {
        border:1px solid rgba(0,0,0,.4);
        border-bottom:3px solid rgba(0,0,0,.65);
        padding:.7rem 1.2rem;
        box-sizing: border-box;
        }
.bar-title {
        position: relative;
        padding-top:1rem;
        box-sizing: border-box;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left: 0;
        width:40px;
        height:4px;
        background:#848743;
        }
.dotted-title {
        padding-bottom:.25rem;
        border-bottom:2px dotted #3A0D22;
        }
.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:50%;
        transform: translateY(-50%);
        width:100%;
        height:1px;
        background:rgba(0,0,0,.3);
        margin-left:1.5rem;
        z-index: -1;
        }
        .bg-green .lead:after { background: rgba(255,255,255,.3); }
        .sp-lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .sp-lead:after {
        content:"";
        position: absolute;
        display: none;
        top:50%;
        transform: translateY(-50%);
        width:100%;
        height:1px;
        background:rgba(0,0,0,.3);
        margin-left:1.5rem;
        z-index: -1;
        }
        .center-lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .center-lead:after {
        content:"";
        position: absolute;
        display:block;
        top:50%;
        left:0;
        width:100%;
        height:1px;
        background:rgba(0,0,0,.3);
        z-index: -1;
        }
        .center-lead span {
        background: #FFF;
        display: inline-block;
        padding:0 1.25rem;
        }
.tategaki-lead {
        position: relative;
        height:100%;
        z-index: 0;
        }
        .tategaki-lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        left:50%;
        width:1px;
        height:500%;
        background:rgba(0,0,0,.6);
        margin-top:1.5rem;
        z-index: -1;
        }


        @media screen and (max-width:1024px) {
        
        }
        @media screen and (max-width:767px) {
        .sp-lead:after { display: inline-block; }
        .tategaki-lead { height:auto; width:100%; }
        .tategaki-lead:after { left:auto; top:50%; width:100%; height:1px; margin-top:0; margin-left:1.25rem; }
        }

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

       縦書き タイトル

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

        .tategaki-h100 { min-height:100px; }
        .tategaki-h135 { min-height:135px; }
        .tategaki-h150 { min-height:150px; }
        .tategaki-h195 { min-height:195px; }
        .tategaki-h220 { min-height:220px; }
        .tategaki-h370 { min-height:370px; }

        @media screen and (max-width:1350px) {
        .tategaki-h135 { min-height:125px; }
        .tategaki-h150 { min-height:145px; }
        .tategaki-h195 { min-height:185px; }
        .tategaki-h220 { min-height:195px; }
        }
        @media screen and (max-width:1024px) {
        .tategaki-h100 { min-height:95px; }
        .tategaki-h135 { min-height:120px; }
        .tategaki-h150 { min-height:136px; }
        .tategaki-h195 { min-height:178px; }
        .tategaki-h220 { min-height:175px; }
        }
        @media screen and (max-width:767px) {
        .tategaki-h100 { min-height:90px; }
        .tategaki-h135 { min-height:115px; }
        .tategaki-h150 { min-height:130px; }
        .tategaki-h195 { min-height:170px; }
        .tategaki-h370 { min-height:525px; }
        .tategaki-h220 { min-height:0; }
        }

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

       トップページ

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

        /*=================================================
                Greeting
        ==================================================*/

        .greeting {
        position: relative;
        z-index: 0;
        }
        .greeting:before {
        content:"";
        display: block;
        position: absolute;
        left:0;
        top:0;
        width:450px;
        height:100%;
        background: url("../images/img/top/bg_l.jpg") right top / cover;
        z-index: -1;
        }
        .greeting:after {
        content:"";
        display: block;
        position: absolute;
        top:0%;
        right:0;
        width:450px;
        height:100%;
        background: url("../images/img/top/bg_r.jpg") left center / cover;
        z-index: -2;
        }
        .greeting p {
        padding-top:4em;
        z-index: 1;
        }

        @media screen and (max-width:1024px) {
        .greeting:before { width:360px; }
        .greeting:after { width:360px; }
        }
        @media screen and (max-width:767px) {
        .greeting:before { width:0%; }
        .greeting:after { width:100%; }
        }

        /*=================================================
                Attraction BTN
        ==================================================*/

        .att-btn-wrap {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:138.8888%;
        overflow: hidden;
        }
        .att-btn-img {
        position:absolute;
        top:0;
        width:100%;
        height:100%;
        z-index: 1;
        -webkit-transition  : all .3s ease;
        transition  : all .3s ease;
        }
        .att-btn-img:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left: 0;
        width:100%;
        height:100%;
        background: rgba(0,0,0,.3);
        z-index: 0;
        -webkit-transition  : all .3s ease;
        transition  : all .3s ease;
        }
        
        .att-btn_01 { background: url("../images/img/top/img_01.jpg") center center / cover; }
        .att-btn_02 { background: url("../images/img/top/img_02.jpg") center center / cover; }
        .att-btn_03 { background: url("../images/img/top/img_03.jpg") center center / cover; }

        .att-btn-wrap:hover .att-btn-img {
        -webkit-transform: scale(1.1);
        transform:         scale(1.1);
        }
        .att-btn-wrap:hover .att-btn-img:after {  background: rgba(0,0,0,.0); }

        .att-btn-cover-wrap {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:120px;
        height:300px;
        background: rgba(255,255,255,.75);
        box-sizing: border-box;
        z-index: 1;
        -webkit-transition  : all .3s ease;
        transition  : all .3s ease;
        }
        .att-btn-cover-wrap .att-btn-cover {
        position: absolute;
        top:50%;
        left:0;
        width:100%;
        translate:0 -50%;
        height:200px;
        color:#111;
        text-align: center;
        z-index: 2;
        }
        .att-btn-cover h2 { line-height: 140%; }
        .att-btn-cover p { line-height: 140%; }

        .att-btn-wrap:hover .att-btn-cover-wrap { background:rgba(255,255,255,1); }

        @media screen and (max-width:1350px) {
        .att-btn-cover-wrap { height:250px; }
        .att-btn-cover-wrap .att-btn-cover { height:185px; }
        }
        @media screen and (max-width:1024px) {
        .att-btn-cover-wrap { height:190px; width:90px; }
        .att-btn-cover-wrap .att-btn-cover { height:156px; }
        }
        @media screen and (max-width:767px) {
        .att-btn-wrap { padding-bottom:115%; }
        .att-btn-cover-wrap { height:180px; width:80px; }
        .att-btn-cover-wrap .att-btn-cover { height:148px; }
        }
        @media screen and (max-width:374px) {
        .att-btn-wrap { padding-bottom:110%; }
        .att-btn-cover-wrap { height:170px; width:70px; }
        .att-btn-cover-wrap .att-btn-cover { height:142px; }
        }

        /*=================================================
                Footer BTN
        ==================================================*/

        .footer-btn-wrap {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:240px;
        overflow: hidden;
        }
        .footer-btn-img {
        position:absolute;
        top:0;
        width:100%;
        height:100%;
        z-index: 1;
        -webkit-transition  : all .3s ease;
        transition  : all .3s ease;
        }
        .footer-btn-img:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left: 0;
        width:100%;
        height:100%;
        background: rgba(0,0,0,.2);
        z-index: 0;
        -webkit-transition  : all .3s ease;
        transition  : all .3s ease;
        }
        
        .footer-btn_01 { background: url("../images/img/top/img_04.jpg") center center / cover; }
        .footer-btn_02 { background: url("../images/img/top/img_05.jpg") center center / cover; }
        .footer-btn_03 { background: url("../images/img/top/img_06.jpg") center center / cover; }
        .footer-btn_04 { background: url("../images/img/concept/img_02.jpg") center center / cover; }
        .footer-btn_05 { background: url("../images/img/concept/img_03.jpg") center center / cover; }
        .footer-btn_06 { background: url("../images/img/concept/img_04.jpg") center center / cover; }

        .footer-btn-wrap:hover .footer-btn-img {
        -webkit-transform: scale(1.1);
        transform:         scale(1.1);
        }
        .footer-btn-wrap:hover .footer-btn-img:after {  background: rgba(0,0,0,.0); }

        .footer-btn-cover-wrap {
        position: absolute;
        top:0%;
        right:0;
        width:70px;
        height:100%;
        background:#FFF;
        box-sizing: border-box;
        z-index: 1;
        -webkit-transition  : all .3s ease;
        transition  : all .3s ease;
        }
        .footer-btn-cover-wrap .footer-btn-cover {
        position: relative;
        top:50%;
        left:0;
        width:100%;
        translate:0 -50%;
        height:168px;
        color:#111;
        text-align: center;
        z-index: 2;
        }
        .pt-one { padding-top:1em; }
        .footer-btn-wrap:hover .footer-btn-cover-wrap { background:rgba(255,255,255,1); }

        @media screen and (max-width:1350px) {
        .footer-btn-cover-wrap .footer-btn-cover { height:136px; }
        }
        @media screen and (max-width:1024px) {
        .footer-btn-wrap { padding-bottom:190px; }
        .footer-btn-cover-wrap { width:60px; }
        .footer-btn-cover-wrap .footer-btn-cover { height:140px; }
        }
        @media screen and (max-width:767px) {
        .footer-btn-img { position: relative; height:0; padding-bottom:50%; }
        .footer-btn-wrap { padding-bottom:0; height:auto; }
        .footer-btn-cover-wrap { position: relative; top:auto; right:auto; height:50px; width:100%; }
        .footer-btn-cover-wrap .footer-btn-cover { height:auto; line-height: 50px; }
        .pt-one { padding-top:0; }
        }

        /*=================================================
                weather
        ==================================================*/

        .weather-wrap {
        width:100%;
        position: relative;
        border:1px solid rgba(0,0,0,.5);
        z-index: 1;
        }
        .weather-wrap a {
        display: block;
        overflow: hidden;
        }
        .weather-img {
        background: url("../images/parts/banner-weather.jpg") left top / cover;
        width:100%;
        height:120px;
        box-sizing: border-box;
        border-radius: 0px;
        position: relative;
        z-index: 0;
        }
        .weather-text {
        box-sizing: border-box;
        position: absolute;
        text-align: center;
        top:0;
        right:0;
        width:200px;
        height:100%;
        background:#FFF;
        z-index: 1;
        }
        .weather-text .inner {
        position: absolute;
        top:50%;
        left:50%;
        width:80%;
        transform: translate(-50%,-50%);
        }

        @media screen and (max-width:767px) {
        .weather-img { height:100px; }
        .weather-text { width:140px; }
        }


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

       下層 ヘッダー

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

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

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

        .page-header {
        position: relative;
        width: 100%;
        border-radius: 0 0 4px;
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:450px;
        height:0;
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        height:0;
        padding-bottom:600px;
        width:100%;
        }

        .concept   { background: url("../images/img/concept/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; }
        .contact   { background: url("../images/img/contact/header.jpg") center center / cover; }
        .access    { background: url("../images/img/access/header.jpg") center center / cover; }
        .sightseeing { background: url("../images/img/sightseeing/header.jpg") center center / cover; }

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

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

.page-title {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:96px;
        height:278px;
        overflow: hidden;
        background:rgba(0,0,0,.6);
        color:#FFF;
        z-index:2;
        }
        .page-title-inner {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:100%;
        }
        .page-title h1 {  line-height: 1; }


        @media screen and (max-width:1024px) {
        .page-title { width:88px; height:250px; }
        }
        @media screen and (max-width:767px) {
        .page-title { width:76px; height:220px; }
        }

.memo {
        padding:.4rem 0;
        border-top:2px dotted rgba(0,0,0,.3);
        border-bottom:2px dotted rgba(0,0,0,.3);
        }
        .memo-w {
        padding:.5rem 0;
        border-top:1px solid rgba(255,255,255,.3);
        border-bottom:1px solid rgba(255,255,255,.3);
        }

figure {
        position: relative;
        z-index: 0;
        }
        .figure-caption {
        position: absolute;
        bottom:0;
        left:0;
        display: inline-block;
        padding:.5rem .75rem;
        background: #111;
        color:#FFF;
        z-index: 1;
        }


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

       下層

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

        /*=================================================
                concept
        ==================================================*/

        .concept-text {
        position: relative;
        height:420px;
        }
        .concept-text h2 {
        padding-left:3.5rem;
        height:420px;
        }
        .concept-text p {
        line-height: 250%;
        letter-spacing: .1em;
        font-size:18px;
        height:420px;
        }

        @media screen and (max-width:1200px) {
        .concept-text { height:410px; }
        .concept-text h2 { height:410px; }
        .concept-text p { height:410px; line-height: 210%; font-size:17px; }
        }
        @media screen and (max-width:1024px) {
        .concept-text { height:520px; }
        .concept-text h2 { height:320px; padding-left:2rem; }
        .concept-text p { height:520px; line-height: 210%; font-size:17px; }
        }
        @media screen and (max-width:767px) {
        .concept-text { height:auto; }
        .concept-text h2 { height:auto; padding-left:0; padding-bottom:2rem; }
        .concept-text p { height:auto; line-height:180%; font-size:16px; letter-spacing: .05em; }
        }

        /*=================================================
                cuisine
        ==================================================*/

        .section-head {
        position: relative;
        width:100%;
        height:400px;
        border-top:5px solid #748448;
        }
        .head_01 { background: url("../images/img/cuisine/header_02.jpg") center center / cover; }
        .head_02 { background: url("../images/img/cuisine/header_03.jpg") center center / cover; }
        .head_03 { background: url("../images/img/cuisine/header_04.jpg") center center / cover; }
        
        
        .section-title {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:100%;
        z-index: 1;
        }
        .tategaki-6em { height:220px; }
        .tategaki-7em { height:255px; }
        .tategaki-f16-8em { height:140px; }
        
        .cuisine-img_01 {
        width:100%;
        height:100%;
        background: url("../images/img/cuisine/img_02.jpg") center center / cover;
        }
        .kondate-img {
        width:100%;
        height:100%;
        background: url("../images/img/cuisine/img_03-1.jpg") center center / cover;
        }
        .border-banner {
        border:5px solid #111;
        box-sizing: border-box;
        }
        .plan-banner-img {
        width:100%;
        height:100%;
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        }
        @media screen and (max-width:1350px) {
        .tategaki-6em { height:200px; }
        .tategaki-7em { height:230px; }
        }
        @media screen and (max-width:1024px) {
        .section-head { height:330px; }
        .tategaki-6em { height:180px; }
        .tategaki-7em { height:210px; }
        .tategaki-f16-8em { height:135px; }
        }
        @media screen and (max-width:767px) {
        .section-head { height:270px; }
        .tategaki-6em { height:155px; }
        .tategaki-7em { height:185px; }
        .tategaki-f16-8em { height:auto; }
        .cuisine-img_01 { height:0; padding-bottom:60%; }
        .kondate-img { height:0; padding-bottom:60%; }
        .plan-banner-img { height:0; padding-bottom:60%; }
        }

        /*=================================================
                facilities
        ==================================================*/

        


        @media screen and (max-width:1024px) {
        
        }
        @media screen and (max-width:767px) {
        
        }