@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:100px; }
        .hero-wrap:after { 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:100px;
        border:4px solid #8C7351;
        box-sizing: border-box;
        border-radius:0px;
        z-index: 0;
        }

.bg-gray { background: rgb(48 47 45 / .03); }


        @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; }
        
        }

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

        タイトル / テキスト

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

.white { color:var(--white-color) !important; }
.blue { color:#207D93; }
.blue a { color:#207D93;}

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

.under-title {
        padding-bottom:.35rem;
        border-bottom:3px solid #207D93;
        }
        .under-title-s {
        padding-bottom:.35rem;
        border-bottom:1px solid #207D93;
        }
.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: #8C7351;
        margin-left:1em;
        z-index: -1;
        }
.center-lead {
        position: relative;
        display: flex;
        align-items: center;
        gap:1.5em;
        z-index: 0;
        }
        .center-lead i {
        width:100%;
        height:1px;
        background: #8A9E30;
        z-index: -1;
        }
        .center-lead span {
        position: relative;
        white-space: nowrap;
        z-index: 1;
        }


        @media screen and (max-width:1600px) {
        
        }
        @media screen and (max-width:1350px) {
        
        }
        @media screen and (max-width:1024px) {
        
        }
        @media screen and (max-width:767px) {
        .leaf-title { padding-top:18vw; }
        }

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

       トップページ

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

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

        .greeting-section {
        position: relative;
        padding:5rem 0 0 ;
        z-index: 0;
        }
        .greeting-title {
        position: relative;
        margin-top:-8rem;
        z-index: 1;
        }
        @media screen and (max-width:767px) {
        .greeting-section { padding:45px 0 0 ; }
        .greeting-title { margin-top:-75px; margin-bottom:-75px; text-align:left;  }
        }

        /*=================================================
                ICONS
        ==================================================*/

        .icons-wrap {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:100%;
        z-index: 1;
        }
        .icons-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        border:6px solid #9CC1C7;
        border-radius:50%;
        background: #EFEDE9;
        box-sizing: border-box;
        z-index: 1;
        }
        .icons-wrapper .column:nth-child(even) .icons-wrap:after {
        background: #E9E3D8;
        }
        .icons-inner {
        position: absolute;
        top:50%;
        left:50%;
        width:100%;
        translate:-50% -50%;
        display: flex;
        flex-direction: column;
        gap:1rem;
        align-items: center;
        justify-content: center;
        z-index: 2;
        }
        .icons-inner figure {
        width:50px;
        height:50px;
        }
        .icons-inner h3 {
        font-size:clamp(14px, 1.4vw, 21px);
        line-height: 145%;
        }
        .bg-half {
        position: relative;
        overflow: hidden;
        background: url("../images/img/top/slash.svg") center center / cover;
        z-index: 0;
        }
        
        @media screen and (max-width:1350px) {
        .icons-wrap:after { border:5px solid #9CC1C7; }
        }
        @media screen and (max-width:1024px) {
        .icons-wrap:after { border:4px solid #9CC1C7; }
        .icons-wrapper .column:nth-child(5) .icons-wrap:after { background: #E9E3D8; }
        .icons-wrapper .column:nth-child(6) .icons-wrap:after { background: #EFEDE9; }
        .icons-wrapper .column:nth-child(7) .icons-wrap:after { background: #E9E3D8; }
        .icons-wrapper .column:nth-child(8) .icons-wrap:after { background: #EFEDE9; }
        .icons-wrapper .column:nth-child(9) .icons-wrap:after { background: #E9E3D8; }
        .icons-wrapper .column:nth-child(10) .icons-wrap:after { background: #EFEDE9; }
        .icons-inner h3 { font-size:clamp(14px, 1.6vw, 21px); }
        }
        @media screen and (max-width:767px) {
        .att-title { padding-top:0; }
        .icons-wrapper .column:nth-child(3) .icons-wrap:after { background: #E9E3D8; }
        .icons-wrapper .column:nth-child(4) .icons-wrap:after { background: #EFEDE9; }
        .icons-wrapper .column:nth-child(5) .icons-wrap:after { background: #EFEDE9; }
        .icons-wrapper .column:nth-child(6) .icons-wrap:after { background: #E9E3D8; }
        .icons-wrapper .column:nth-child(7) .icons-wrap:after { background: #E9E3D8; }
        .icons-wrapper .column:nth-child(8) .icons-wrap:after { background: #EFEDE9; }
        .icons-wrapper .column:nth-child(9) .icons-wrap:after { background: #EFEDE9; }
        .icons-wrapper .column:nth-child(10) .icons-wrap:after { background: #E9E3D8; }
        .icons-inner { gap:.5rem; }
        .icons-inner figure { width:36px; height:36px; }
        .icons-inner h3 { font-size:clamp(14px, 3.2vw, 21px); }
        }

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

        .att-text {
        padding:3rem 0;
        width:70%;
        max-width:420px;
        margin-inline:auto;
        }
        .att-lead { font-size:clamp(60px, 6.5vw, 120px); }
        
        @media screen and (max-width:1024px) {
        .att-text { padding:0; }
        }
        @media screen and (max-width:767px) {
        .att-text { margin-top:-30px; width:80%; }
        }

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

        .banner-wrap {
        width:100%;
        padding:14vw 0;
        position: relative;
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        z-index: 1;
        }
.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.85em 1.5em;
        line-height:1;
        text-align:center;
        color:#FFF;
        background: #EEA01E;
        background: linear-gradient(135deg, rgba(238, 160, 30, 1) 0%, rgba(238, 115, 30, 1) 100%);
        font-weight:400;
        font-size:1.3rem;
        box-sizing: border-box;
        border-radius:60px;
        white-space: nowrap;
        text-decoration:none !important;
        overflow: hidden;
        z-index: 1;
        letter-spacing: 0em;
        -webkit-transition: all 0.3s ease;
        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;
        -webkit-transition: all 0.3s ease;
        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 (min-width: 1800px) {
        .banner-wrap { padding:252px 0; }
        }
        @media screen and (max-width: 1350px) {
        .banner-wrap { padding:10rem 0; }
        }
        @media screen and (max-width:767px) {
        .banner-wrap { padding:6rem 0; }
        .more-reservation a { font-size:1.1rem; }
        }

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

       下層 ヘッダー

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

.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%; }

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


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

.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:600;
        letter-spacing: .05em;
        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 25px; }
        }

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

       ONSEN

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

        .onsen-text {
        padding-top:15%;
        }
        .onsen-sub {
        padding-top:20%;
        margin-bottom:-100%;
        }
        .onsen-info {
        width:100%;
        padding:2.5rem 0 2.5rem 43.5%;
        box-sizing: border-box;
        }


        @media screen and (max-width:1024px) {
        .onsen-text { padding-top:0; }
        .onsen-sub { padding-top:0; margin-bottom:0; }
        .onsen-info { padding-left:0%; }
        }
        @media screen and (max-width:767px) {
        .onsen-sub { padding-top:2rem; }
        }