@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        z-index: 0;
        }
        .hero-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 50%;
        background: #000;
        background: linear-gradient(180deg, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 1;
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:0; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:0; }
        }
        
/*==================================================================================================

       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:80px;
        box-sizing: border-box;
        z-index: 0;
        }

.bg-light {
        background: rgb(189 173 156 / .2);
        }
.after-right {
        position: relative;
        z-index: 0;
        }
        .after-right:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-100px;
        right:-150px;
        width:300px;
        height:300px;
        background: url("../images/parts/moyou.svg") center center / cover;
        z-index: -1;
        }
.after-left {
        position: relative;
        z-index: 0;
        }
        .after-left:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-100px;
        left:-150px;
        width:300px;
        height:300px;
        background: url("../images/parts/moyou.svg") center center / cover;
        z-index: -1;
        }
.outside-right {
        position: relative;
        z-index: 0;
        }
        .outside-right:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-100px;
        right:-300px;
        width:300px;
        height:300px;
        background: url("../images/parts/moyou.svg") center center / cover;
        z-index: -1;
        }
.outside-left {
        position: relative;
        z-index: 0;
        }
        .outside-left:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-100px;
        left:-300px;
        width:300px;
        height:300px;
        background: url("../images/parts/moyou.svg") center center / cover;
        z-index: -1;
        }
        @media screen and (max-width:2000px) {
        .after-right:after { bottom:-5vw; right:-7.5vw; width:15vw; height:15vw; }
        .after-left:after { bottom:-5vw; left:-7.5vw; width:15vw; height:15vw; }
        .outside-right:after { bottom:-5vw; right:-15vw; width:15vw; height:15vw; }
        .outside-left:after { bottom:-5vw; left:-15vw; width:15vw; height:15vw; }
        }
        @media screen and (max-width:1600px) {
        .border-box { padding:5vw; }
        
        }
        @media screen and (max-width:1024px) {
        .border-box { padding:4vw; }
        
        }
        @media screen and (max-width:767px) {
        .border-box { padding:7.5vw; }
        .after-right:after { bottom:-7vw; right:-8vw; width:36vw; height:36vw; opacity:.3; }
        .after-left:after { bottom:-7vw; left:-8vw; width:36vw; height:36vw; opacity:.3; }
        .outside-right:after { bottom:-7vw; right:-18vw; width:36vw; height:36vw; opacity:.3; }
        .outside-left:after { bottom:-7vw; left:-18vw; width:36vw; height:36vw; opacity:.3; }
        }

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

        タイトル / テキスト

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

.white { color:var(--white-color) !important; }
.brown { color:#776849; }
.yellow { color:#D9AA18; }

.mark {background:linear-gradient(transparent 85%, #DAB212 0%); font-weight:600;}

.under-title {
        padding-bottom:.35rem;
        border-bottom:3px solid rgb(0 0 0 / .7);
        }
        .under-title-s {
        padding-bottom:.35rem;
        border-bottom:1px solid rgb(0 0 0  / .6);
        }
.bar-title {
        position: relative;
        padding-top:100px;
        }
        .bar-title:before {
        content: "";
        display: block;
        position: absolute;
        top:0;
        left:50%;
        width:1px;
        height:70px;
        background: rgb(0 0 0 / .3);
        }


.dotted-title {
        padding-bottom:.35rem;
        border-bottom:4px dotted rgb(0 0 0 / .6);
        }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:50%;
        width:100%;
        height:1px;
        background: rgb(255 255 255 / .4);
        margin-left:1em;
        z-index: -1;
        }



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

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

       トップページ

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

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

        .greeting-img {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        }

        /*=================================================
                ATT
        ==================================================*/

        .att-text {
        position: relative;
        padding:2rem 0;
        width:72%;
        max-width:450px;
        margin-inline:auto;
        z-index: 0;
        }
        @media screen and (max-width:767px) {
        .att-text { width:85%; max-width:600px; }
        }

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

        .banner-wrap {
        width:100%;
        position: relative;
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        z-index: 1;
        }
        .banner-text {
        width:350px;
        margin-left:auto;
        }
.more-reservation {
        position:relative;
        width:100%;
        }
        .more-reservation a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content:center;
        gap: 0.5rem;
        width:100%;
        padding:1.5em 1.5em;
        line-height:1;
        text-align:center;
        color:#FFF;
        background: #466316;
        font-weight:500;
        font-size:1.12rem;
        box-sizing: border-box;
        border-radius:5px;
        white-space: nowrap;
        text-decoration:none !important;
        overflow: hidden;
        z-index: 1;
        letter-spacing: 0em;
        transition: all 0.3s ease;
        }
        .more-reservation a:after {
        position: absolute;
        content: "";
        width: 0;
        height:100%;
        bottom:0;
        right: 0;
        z-index: -1;
        border-radius:0;
        transition: all 0.3s ease;
        background:rgb(255 255 255 / .3);
        }
        .more-reservation a i { width:1em; height:1em; background: url("../images/parts/icon-calendar.svg") center center / cover; transition: all 0.3s ease; }
        .more-reservation a:hover { opacity:1; }
        .more-reservation a:hover:after { width: 100%; left:0; }


        @media screen and (max-width:1024px) {
        .banner-text { width:300px; }
        }
        @media screen and (max-width:767px) {
        .banner-text { margin-inline:auto; width:100%;  }
        .more-reservation a { font-size:1.1rem; }
        }

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

       下層 ヘッダー

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

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        max-height:calc(100vh - 80px);
        z-index: 0;
        }

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

        .page-header {
        position: relative;
        width: 100%;
        height:100%;
        max-height:calc(100vh - 80px);
        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; }
        .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%; height:0; }
        }
        @media screen and (max-width: 767px) {

        }


.page-title {
        position: absolute;
        bottom: 0;
        left:0;
        padding:0px 3vw 30px;
        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, .50) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;
        }
        .page-title h1 {
        position: relative;
        text-align: center;
        line-height:150%;
        font-weight:700;
        letter-spacing: .05em;
        color:#FFF;
        z-index: 2;
        }
        .page-title p {
        position: relative;
        text-align: left;
        letter-spacing: 0;
        color:#FFF;
        z-index: 2;
        }

        @media screen and (max-width:1240px) {
        .page-title { padding:0 3vw 25px; }
        }
        @media screen and (max-width:767px) {
        .page-title { padding:0 6vw 4vw; }
        }

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

       STAY

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

    .brown-label {
        background: #776849;
        color:#FAF7F4;
        line-height: 1;
        padding:1.2rem 0 1.3rem;
        box-sizing: border-box;
        border-radius: 6px;
        }

    .white-box {
        background: rgb(255 255 255 / .9);
        padding:8%;
        box-sizing: border-box;
        border-radius: 10px;
        border:1px solid rgb(189 173 156 / .4);
        box-shadow:0px 5px 10px rgb(189 173 156 / .4);
        }
    .brown-box {
        background: rgb(189 173 156 / .2);
        padding:8%;
        box-sizing: border-box;
        border-radius: 10px;
        }

    .time-line {
        display: flex;
        align-items:center;
        gap:2.5rem;
        }
        .time {
        line-height: 1;
        padding:.75rem;
        width:145px;
        box-sizing: border-box;
        border:5px solid #776849;
        color:#776849;
        border-radius: 6px;
        font-weight:700;
        font-size:1.5rem;
        text-align: center;
        white-space: nowrap;
        }
        
        hr.dotted {
        border: none;
        padding:0;
        margin:4rem auto;
        width:20px;
        height:100px;
        background: url("../images/parts/dotted-s.svg") center center / cover;
        z-index: -1;
        }
        
        @media screen and (max-width:1024px) {
        .white-box { padding:6%; }
        .brown-box { padding:6%; }
        .time { border:4px solid #776849; padding:.65rem; width:125px; }
        hr.dotted { width:15px; height:75px; margin:3rem auto; }
        }
        @media screen and (max-width:767px) {
        .white-box { padding:15% 10%; width:110%; margin-left:-5%; }
        .brown-box { padding:15% 10%; width:110%; margin-left:-5%; }
        .time-line { flex-direction: column; align-items: center; gap:1rem; }
        .time { border:3px solid #776849; padding:.5rem; width:100%; }
        hr.dotted { width:10px; height:50px; margin:2rem auto; }
        }
        
/*==================================================================================================

       ACCESS

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

        .root-list {
        display: flex;
        align-items: center;
        gap: 15px;
        width: 100%;
        margin: 0;
        text-align: center;
        }
        .root-list li {
        line-height: 120%;
        }
        .root-list li.root-start {
        margin: 0;
        padding: 1rem;
        background-color: #fff;
        border: 2px solid #000;
        white-space: nowrap;
        }
        .root-list li.root-arrow {
        position: relative;
        width: 1rem;
        min-width:1rem;
        height: 1rem;
        background: url("../images/parts/arrow.svg") center center / cover;
        }
        .root-list li.root-goal {
        margin:0;
        padding: 1rem;
        background:#776849;
        color:#FFF;
        white-space: nowrap;
        }

        @media screen and (max-width:1200px) {
        .root-list li { font-size:15px; }
        }
        @media screen and (max-width:1024px) {
        .root-list { flex-direction: column; width: 85%; max-width:320px; margin:0 auto; padding: 0; }
        .root-list li { border:1px solid rgb(0 0 0 / .2); background: rgb(255 255 255 / .5); padding:1rem; width:100%; }
        .root-list li.root-start { width:100%; }
        .root-list li.root-arrow { rotate:90deg; border:none; background: url("../images/parts/arrow.svg") center center / cover; padding:0; width:1rem; }
        .root-list li.root-goal { width:100%; }
        }