@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:0px;
        z-index: 0;
        }
        .hero-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        background: rgb(0 0 0 / .2);
        z-index: 0;
        }
        .movie-title {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:21vw;
        z-index: 5;
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:100px; }
        .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サイズのまま）　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:100vh; }

        .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:75%; }
        }
        @media screen and (max-width: 767px) {
        .movie.top-movie:before { padding-top:75%; }
        }

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

       背景

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

.border-box {
        position: relative;
        padding:65px;
        box-sizing: border-box;
        border:1px solid #42413E;
        z-index: 0;
        }

.bg-black {
        position: relative;
        box-sizing: border-box;
        color:#F7F5F1;
        z-index: 0;
        }
        .bg-black.left { padding-right:6%; }
        .bg-black.right { padding-left:6%; }
        .bg-black:after,
        .bg-black:before {
        content:"";
        display: block;
        position: absolute;
        top:0;
        height:100%;
        }
        .bg-black:after { width:94%; background: url("../images/parts/black.jpg") left top repeat; z-index: -2; }
        .bg-black:before{ width:7%; background: url("../images/parts/gold.jpg") right top repeat; z-index: -1; }
        .bg-black.left:after { left:0; }
        .bg-black.left:before{ left:0; }
        .bg-black.right:after { right:0; }
        .bg-black.right:before{ right:0; }

        .bg-black .outer {
        position: relative;
        overflow: hidden;
        z-index: 0;
        }
        .bg-black .outer:after,
        .bg-black .outer:before {
        content:"";
        display: block;
        position: absolute;
        }
        .bg-black .outer:after { width:520px; height:0; padding-bottom:300px; top:0%; background: url("../images/parts/asanoha.svg") left bottom / cover; z-index: -1; opacity:.35; }
        .bg-black .outer:before{ width:30%; height:0; padding-bottom:15%; z-index: -1; }
        .bg-black.left .outer:after { right:-12%; }
        .bg-black.left .outer:before{ left:-8%; bottom:5%; background: url("../images/parts/matsu-l.svg") right bottom / cover;}
        .bg-black.right .outer:after { left:-12%; }
        .bg-black.right .outer:before{ right:-8%; bottom:5%; background: url("../images/parts/matsu-r.svg") left bottom / cover;}

        .bg-black.left .outer { padding-left:calc(10vw + 6vw); }
        .bg-black.right .outer { padding-right:calc(10vw + 6vw); }


        @media screen and (min-width:2000px) {
        .bg-black .outer:before{ width:560px; padding-bottom:280px; }
        .bg-black.left .outer:before{ left:-130px; }
        .bg-black.right .outer:before{ right:-130px; } 
        }
        @media screen and (max-width:1800px) {
        .border-box { padding:4vw; }
        .bg-black .outer:after { width:500px; padding-bottom:290px; }
        }
        @media screen and (max-width:1450px) {
        .bg-black .outer:after { width:450px; padding-bottom:260px; }
        }
        @media screen and (max-width:1240px) {
        .bg-black .outer:after { width:400px; padding-bottom:230px; }
        }
        @media screen and (max-width:1024px) {
        .border-box { padding:6vw; }
        .bg-black .outer:after { width:42%; padding-bottom:24%; }
        .bg-black .outer:before{ width:40%; padding-bottom:20%; }
        .bg-black.left .outer:after { right:-10%; }
        .bg-black.left .outer:before{ left:-8%; bottom:3%; }
        .bg-black.right .outer:after { left:-10%; }
        .bg-black.right .outer:before{ right:-8%; bottom:3%; }
        .bg-black.left .outer { padding-left:9vw;  padding-right:5vw;}
        .bg-black.right .outer { padding-right:9vw; padding-left:5vw; }
        }
        @media screen and (max-width:767px) {
        .border-box { padding:8vw; }
        .bg-black.left { padding-right:4%; }
        .bg-black.right { padding-left:4%; }
        .bg-black:after { width:96%; }
        .bg-black:before{ width:14%; }
        .bg-black .outer:after { width:270px; padding-bottom:190px; }
        .bg-black.right .outer:after { left:-18%; }
        .bg-black.left .outer:after { right:-18%; }
        .bg-black .outer:before{ width:60%; padding-bottom:30%; }
        .bg-black.left .outer { padding-left:8vw; padding-right:7vw; }
        .bg-black.right .outer { padding-right:8vw; padding-left:7vw; }
        }

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

        タイトル / テキスト

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

.white { color:var(--white-color) !important; }
.gold { color:#A68E4E; }

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

.under-title {
        padding-bottom:.35rem;
        border-bottom:2px solid rgb(0 0 0 / .6);
        }
        .under-title-w {
        padding-bottom:.35rem;
        border-bottom:2px solid rgb(255 255 255 / .6);
        }
        .dotted-title {
        padding-bottom:.5rem;
        border-bottom:2px dotted rgb(47 49 50 / .6);
        }
.side-bar {
        position: relative;
        padding-right:20px;
        }
        .side-bar:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        right:0;
        width:2px;
        height:50px;
        background: #261A0E;
        }

.bar-title {
        padding-bottom:1rem;
        position: relative;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:0;
        width:50px;
        height:2px;
        background:#A68E4E;
        z-index: -1;
        }
        .center.bar-title:after { left:50%; translate:-50%; }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:50%;
        width:100%;
        translate:0 -50%;
        height:1px;
        background: #666;
        margin-left:1em;
        z-index: -1;
        }

.tate-bar {
        position: relative;
        padding-top:150px;
        }
        .tate-bar:before {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:50%;
        width:1px;
        height:110px;
        background: #42413E;
        }



        @media screen and (max-width:1350px) {
        .tate-bar { padding-top:130px; }
        .tate-bar:before { height:90px; }
        }
        @media screen and (max-width:1024px) {
        .tate-bar { padding-top:110px; }
        .tate-bar:before { height:75px; }
        }
        @media screen and (max-width:767px) {
        .tate-bar { padding-top:90px; }
        .tate-bar:before { height:60px; }
        }

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

       トップページ

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

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

        .greeting-title {
        position: relative;
        padding-bottom:35%;
        z-index: 0;
        }
        .greeting-lead {
        position: absolute;
        left:-15%;
        top:0;
        writing-mode: vertical-rl;
        white-space: nowrap;
        line-height: 1;
        }
        .greeting-text2 {
        padding:7rem 0;
        }
        .greeting-text3 {
        padding:5rem 0 0;
        }
        .greeting-img1 {
        position: relative;
        width:82%;
        }
        .greeting-img2 {
        position: relative;
        margin-top:-15%;
        }
        .greeting-img3 {
        position: relative;
        width:120%;
        }
        @media screen and (max-width:1240px) {
        .greeting-title { padding-left:15%; box-sizing: border-box; }
        .greeting-lead { left:0; }
        .greeting-img3 { width:110%; }
        }
        @media screen and (max-width:1024px) {
        .greeting-text2 { padding:3rem 0 6rem; }
        .greeting-text3 { padding:4rem 0 0; }
        .greeting-img2 { margin-top:-8%; }
        } 
        @media screen and (max-width:767px) {
        .greeting-title { padding-bottom:5rem; }
        .greeting-text2 { padding:5rem 10% 5rem 0; }
        .greeting-text3 { padding:5rem 0 5rem 0; }
        .greeting-img2 { margin-top:0; padding-left:6%; padding-right:6%; }
        .greeting-img3 { width:100%; margin-left:10%; }
        }

        /*=================================================
                ATTRACTION
        ==================================================*/

        .att-img {
        width:100%;
        height: 0;
        padding-bottom:125%;
        }
        .att-01 { background: url("../images/img/top/img_02.jpg") center center / cover; }
        .att-02 { background: url("../images/img/top/img_03.jpg") center center / cover; }
        .att-03 { background: url("../images/img/top/img_04.jpg") center center / cover; }
        @media screen and (max-width:767px) {
        .att-img { padding-bottom:110%; }
        }

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

        .more-reservation a {
        position:relative;
        width:100%;
        height:72px;
        line-height:72px;
        background:#A68E4E;
        border-radius:5px;
        text-align: center;
        font-weight:400;
        font-size:21px;
        color:#FFF;
        box-sizing: border-box;
        z-index: 1;
        display: inline-block;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        }
        .more-reservation a span {
        width:24px;
        height:24px;
        display:inline-block;
        margin-right:.6em;
        position: relative;
        top:4px;
        background: url("../images/parts/icon-calendar.svg") center center / cover;
        }
        .more-reservation a: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: rgb(255 255 255 / .2);
        }
        .more-reservation a:hover { opacity:1; }
        .more-reservation a:hover:after { left:0; width:100%; }

        @media screen and (max-width:1024px) {
        .more-reservation a { font-size:19px; height:68px; line-height:68px; }
        .more-reservation a span { width:21px; height:21px; top:2px; }
        }
        @media screen and (max-width:767px) {
        .more-reservation a { font-size:18px; height:62px; line-height:62px; }
        }

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

       下層 ヘッダー

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

.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:100vh;
        overflow: hidden;
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:50%;
        height:0;
        width:100%;
        }
        .page-header.short:before { padding-bottom:35%; }

        .facilities  { background: url("../images/img/facilities/header.jpg") center center / cover; }
        .cafe        { background: url("../images/img/cafe/header.jpg") center center / cover; }
        .stay        { background: url("../images/img/stay/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:75%; height:0; }
        .page-header.short:before { padding-bottom:75%; }
        }


.page-title {
        position: absolute;
        bottom: 0;
        left:0;
        padding:24px 0 0;
        color:#FFF;
        width:100%;
        box-sizing: border-box;
        z-index:1;
        }
        .page-title:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height: 150px;
        background: #000;
        background: linear-gradient(0deg, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;
        }
        .page-title h1 {
        position: relative;
        text-align: center;
        line-height:180%;
        font-weight:500;
        letter-spacing: .05em;
        color:#FFF;
        z-index: 2;
        }
    
.page-lead {
        position: relative;
        width:100%;
        background: url("../images/parts/black.jpg") left top repeat;
        text-align: center;
        padding:.75em 0;
        line-height: 150%;
        z-index: 1;
        }

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

       facilities

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

        .facilities-text {
        padding-bottom:20%;
        }
        .facilities-img {
        width:100%;
        height:0;
        padding-bottom:45%;
        background: url("../images/img/facilities/img_01.jpg") center center / cover;
        }

        .shift { margin-top:12%; margin-bottom:-12%; }
        .shift.last { margin-bottom:0%; }

        @media screen and (max-width: 767px) {
        .facilities-img { padding-bottom:55%; }
        .shift { margin-top:0%; margin-bottom:0%; }
        }

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

       CAFE

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

        .cafe-text {
        padding-bottom:20%;
        }
        .cafe-img {
        width:100%;
        height:0;
        padding-bottom:45%;
        background: url("../images/img/cafe/img_01.jpg") center center / cover;
        }

        .img-wrap {
        position: relative;
        margin-top:15%;
        }
        .img-wrap.short { margin-top:10%; }
        .img-wrap figure:nth-child(1) {
        position: relative;
        box-sizing: border-box;
        width:100%;
        }
        .img-wrap figure:nth-child(2) {
        position: absolute;
        bottom:0;
        width:41%;
        }
        .img-wrap.left figure:nth-child(1) { padding:0 64% 16% 0; }
        .img-wrap.left figure:nth-child(2) { right:0; }
        .img-wrap.right figure:nth-child(1) { padding:0 0 16% 64%; }
        .img-wrap.right figure:nth-child(2) { left:0; }

        @media screen and (max-width: 767px) {
        .cafe-img { padding-bottom:55%; }
        .img-wrap.left figure:nth-child(1) { padding:0 60% 16% 0; }
        .img-wrap.right figure:nth-child(1) { padding:0 0 16% 60%; }
        .img-wrap figure:nth-child(2) { width:48%; }
        }

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

       STAY

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

        .root-bar {
        position: relative;
        width:100%;
        height:80px;
        }
        .root-bar:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:50%;
        width:1px;
        height:100%;
        background: #42413E;
        }