@charset "UTF-8";
/*==================================================================================================

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:70px;
        padding:0 60px 30px;
        z-index: 6;
        }

        @media screen and (max-width:2000px) {
        .hero-wrap { padding:0 3vw 1.5vw; }
        }
        @media screen and (max-width:1240px) {
        .hero-wrap { margin-top:60px; }
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:96px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:118px; }
        }

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

       Movie

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

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        border-radius: 0 0 45px 45px;
        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 - 100px); }

        .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:2000px) {
        .movie-wrap { border-radius: 0 0 2.25vw 2.25vw; }
        .top-movie{ max-height:calc(100vh - (70px + 1.5vw)); }
        }
        @media screen and (max-width:1240px) {
        .top-movie{ max-height:calc(100vh - (60px + 1.5vw)); }
        }
        @media screen and (max-width: 1024px) {
        .movie.top-movie:before { padding-top:90%; }
        .top-movie{ max-height:100vh; }
        }

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

       背景

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

.border-box {
        border:5px solid rgb(255 255 255 / .7);
        padding:5.5%;
        box-sizing: border-box;
        }
        .border-box-m {
        border:1px solid rgb(50 51 52 / .5);
        padding:8% 10%;
        box-sizing: border-box;
        }
        .border-box-s {
        border:3px solid #90846B;
        padding:4rem;
        box-sizing: border-box;
        }

.bg-beige {
        background: #F4F3EE;
        }
        
        @media screen and (max-width:1024px) {
        .border-box  { padding:6%; border:4px solid rgb(255 255 255 / .7); }
        .border-box-m { padding:2.5rem; }
        .border-box-s { padding:5%; }
        
        }
        @media screen and (max-width:767px) {
        .border-box  { padding:7.5%; border:3px solid rgb(255 255 255 / .7); }
        .border-box-m { padding:2rem; }
        .border-box-s { padding:1.35rem; }
        
        }

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

        タイトル / テキスト

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

.white { color:#F9F6F0 !important; }
.white .en { color:#F9F6F0; }
.red { color:#B9151B;}
.gold { color:#AEA17E; }
.gray { color:#A8A194; }


.mark {background:linear-gradient(transparent 60%, #F29E84 60%);}
.mark-w {background:linear-gradient(transparent 60%, rgb(144 131 55 / 1) 60%);}

.under-title {
        padding-bottom:.15rem;
        border-bottom:3px solid #857A6B;
        }
.under-bar {
        position: relative;
        padding-bottom:15px;
        }
        .under-bar:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:50%;
        translate:-50%;
        width:46px;
        height:1px;
        background:#F6F6F6;
        }
.bar-title {
        position: relative;
        padding-top:18px;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:46px;
        height:1px;
        background:#F5AA3B;
        }
        .center.bar-title:after {
        left:50%;
        translate:-50%;
        }
        .bg-banner .bar-title:after { background: #FFF; }
        @media screen and (max-width:1024px) {
        .bar-title { padding-top:15px; }
        }
        @media screen and (max-width:767px) {
        .bar-title { padding-top:10px; }
        .bar-title.bar-sp-center:after { left:50%; translate:-50%; }
        }
        
.dotted-title {
        padding-bottom:.15rem;
        border-bottom:3px dotted #857A6B;
        display:block;
        }

.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:rgb(255 255 255 / .6);
        margin-left:1rem;
        z-index: -1;
        }
.half-lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .half-lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        bottom:.75em;
        width:120px;
        height:1px;
        background:#6F6D65;
        margin-left:1rem;
        z-index: -1;
        }
.center-lead {
        position: relative;
        display:block;
        overflow: hidden;
        width:100%;
        text-align: center;
        z-index: 0;
        }
        .center-lead:before,
        .center-lead:after {
        content:"";
        display: inline-block;
        position: absolute;
        bottom:.75em;
        width:50%;
        height:1px;
        background:rgb(144 132 107 / .7);
        }
        .center-lead:before { right:50%; margin-right:4em; }
        .center-lead:after { left:50%; margin-left:4em; }


.short-lead {
        position: relative;
        display: inline-block;
        padding:0 4.5em 0;
        text-align: center;
        z-index: 0;
        }
        .short-lead:before,
        .short-lead:after {
        content:"";
        display: inline-block;
        position: absolute;
        bottom:.75em;
        width:3em;
        height:1px;
        background:#AEA17E;
        }
        .short-lead:before { left:0; }
        .short-lead:after { right:0; }

.label-title {
        position: relative;
        background: url("../images/parts/background.jpg") left top repeat;
        padding:.35em 1em;
        box-sizing: border-box;
        border-bottom:2px solid #AEA17E;
        z-index: 0;
        }
        .label-title:before {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgb(255 255 255 / .1);
        z-index:-1;
        }
        
.large-label {
        background: rgb(255 255 255 / .1);
        padding:3rem 1.5rem;
        box-sizing: border-box;
        line-height: 150%;
        }
        
        
        .h2em { height:2.6em;   letter-spacing: .2em; }
        .h3em { height:3.9em;   letter-spacing: .2em; }
        .h4em { height:5em;   letter-spacing: .2em; }
        .h5em { height:6.2em;   letter-spacing: .2em; }
        .h6em { height:7.6em;   letter-spacing: .2em; }
        .h7em { height:8.8em;   letter-spacing: .2em; }
        .h8em { height:10em;   letter-spacing: .2em; }
        .h9em { height:11.2em;   letter-spacing: .2em; }
        .h10em { height:13.6em;   letter-spacing: .2em; }
        .h14em { height:19em;   letter-spacing: .4em; }
        .h17em { height:20.8em;   letter-spacing: .2em; }


.mark-title span {
        line-height: 200%;
        padding:1em 0;
        background: #FFF;
        display: inline-block;
        }
        .mark-title.h7em { height:10.6em;  letter-spacing: .2em; }
        .mark-title.h9em { height:13.2em;  letter-spacing: .2em; }
        .mark-title.h10em { height:14.4em;  letter-spacing: .2em; }


        @media screen and (max-width:1350px) {
        .mark-title span { padding:.75em 0; } 
        .mark-title.h7em { height:10em; }
        }
        
        @media screen and (max-width:1024px) {
        .mon-title { padding-top:40px; }
        .mon-title:before { width:48px; height:32px; }
        }
        @media screen and (max-width:767px) {
        .short-lead { padding:0 2.5em 0; }
        .short-lead:before, .short-lead:after { width:1.5em; }
        .mon-title { padding-top:37px; }
        .mon-title:before { width:42px; height:28px; }
        
        .sp-hauto { height:auto; }

        }

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

       トップページ

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

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

        .greeting-text-wrap {
        position: relative;
        padding:10% 0 15%;
        }
        .greeting-text-01 {
        padding:0 8% 0 0;
        box-sizing: border-box;
        }
        .greeting-text-02 {
        padding:7% 0 0 25%;
        box-sizing: border-box;
        }
        .greeting-title-wrap {
        position: relative;
        z-index: 1;
        }
        .greeting-title {
        line-height: 230%;
        margin-top:-7em;
        }
        .greeting-img-01 {
        position: relative;
        padding:0 0 0 6%;
        box-sizing: border-box;
        }
        .greeting-img-02 {
        position: relative;
        padding:0 15% 0 12%;
        box-sizing: border-box;
        margin-top:-10%;
        }

        @media screen and (max-width:1800px) {
        .greeting-text { padding:10vw 5% 20% 30%; }
        .greeting-text figure { left:-10%; }
        .greeting-text-02 { padding:7% 0 0 0; width:100%; max-width:800px; margin-left:auto; }
        }
        @media screen and (max-width:1350px) {
        .greeting-text-wrap { padding:0 0 15%; }
        .greeting-title { margin-top:-4em; }
        .greeting-text-01 { padding:0; }
        .greeting-text-02 { padding:5% 0 0 0; }
        }
        @media screen and (max-width:1024px) {
        .greeting-text-wrap { padding:0; }
        .greeting-img-02 { margin-top:0; padding-top:10%; }
        }
        @media screen and (max-width:767px) {
        .greeting-img-01 { padding:0; width:120%; margin-left:-10%; }
        .greeting-title { margin-top:-8em; }
        .greeting-img-02 { padding-top:0; }
        }

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

        .att-img {
        position: relative;
        z-index: 0;
        }
        .img-fit.att-img img { height:700px; }
        .att-sub-title {
        position: absolute;
        top:0;
        line-height: 1;
        font-size:clamp(30px, 9vw, 150px);
        opacity:.1;
        z-index: -1;
        }
        .att-sub-title.left { left:-3.5em; }
        .att-sub-title.right { right:-3.5em; }

        .att-sub { padding-top:15%; }
        .att-sub-img.left { padding:0 36% 0 0; box-sizing: border-box; }
        .att-sub-img.right { padding:0 0 0 36%; box-sizing: border-box; }
        .att-text-wrap {
        position: relative;
        padding:15% 5% 0;
        box-sizing: border-box;
        z-index: 0;
        }
        .att-text-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:-11%;
        left:-10%;
        width:120%;
        height:113%;
        background: #FFF;
        border-radius: 10px;
        z-index: -1;
        }
        
        @media screen and (max-width:1700px) {
        .img-fit.att-img img { height:100%; }
        .att-text-wrap { padding:4vw 5% 0; }
        }
        @media screen and (max-width:1350px) {
        .is-align-end.att-section { align-items: normal; }
        .att-text-wrap { padding:3.5vw 0 0; }
        }
        @media screen and (max-width:1024px) {
        .att-sub-title.left { left: 0; top: auto; bottom: -.8em; }
        .att-sub-title.right { right: 0; top: auto; bottom: -.8em; }
        .att-text-wrap { padding: 2rem 0 0; }
        }
        @media screen and (max-width:767px) {
        .att-text-wrap:after { display: none; }
        .att-sub-title.left { left: auto; right:0; }
        .att-sub-title { font-size:clamp(36px, 12vw, 150px); }
        .att-sub { padding-top: 2rem;}
        .att-img { width:120%; margin-left:-10%; }
        }

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

        .banner-wrap {
        width:100%;
        position: relative;
        overflow: hidden;
        border-radius: 0px;
        z-index: 1;
        }
        .banner-wrap a {
        display: block;
        overflow: hidden;
        }
        .banner-img {
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        width:100%;
        height:720px;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        }
        .banner-img:after {
        content:"";
        display:none;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgb(0 0 0 / .3);
        z-index: -1;
        }
        .banner-text {
        position: absolute;
        left:8%;
        top:50%;
        translate:0 -50%;
        width:86%;
        max-width:360px;
        text-align: center;
        box-sizing: border-box;
        z-index: 1;
        }
        .banner-title {
        line-height: 230%;
        }
        .more-reservation {
        width:80px;
        height:240px;
        line-height:80px;
        text-align: center;
        margin-top:7em;
        color:#FFF;
        background: none;
        border:1px solid #FFF;
        box-sizing: border-box;
        overflow: hidden;
        font-size:21px;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        letter-spacing: 0.2em;
        display: inline-block;
        -webkit-transition: all 0.3s ease;
        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:#9B9A91;
        }      
        .banner-wrap a:hover .more-reservation { opacity:1; border:1px solid #9B9A91; }
        .banner-wrap a:hover .more-reservation:after { left:0; width:100%; }

        @media screen and (max-width:1350px) {
        .banner-text { left:5%; }
        .more-reservation { width:70px; height:210px; line-height:70px; }
        }
        @media screen and (max-width:1024px) {
        .banner-img { height:560px; }
        .banner-img:after { display: block; }
        .banner-text { left:3%; }
        .more-reservation { width:60px; height:180px; line-height:60px; font-size:18px; }
        }
        @media screen and (max-width:767px) {
        .banner-img { height:500px; }
        .banner-text { width:86%; max-width:300px; left:50%; translate:-50% -50%; }
        .more-reservation { width:54px; height:160px; line-height:54px; font-size:16px; }
        }

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

       下層 ヘッダー

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

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        max-height:100vh;
        border-radius: 0 0 45px 0;
        overflow: hidden;
        z-index: 0;
        }
        @media screen and (max-width: 2000px) {
        .page-header-wrap { border-radius: 0 0 2.25vw 0; }
        }

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

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

        .onsen        { background: url("../images/img/onsen/header.jpg") center center / cover; }
        .cuisine      { background: url("../images/img/cuisine/header.jpg") center center / cover; }
        .rooms        { background: url("../images/img/rooms/header.jpg") center center / cover; }
        .charge       { background: url("../images/img/charge/header.jpg") center center / cover; }
        .guide        { background: url("../images/img/guide/header.jpg") center center / cover; }

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


.page-title {
        position: absolute;
        bottom: 0;
        left:0;
        padding:24px 40px 24px 0;
        display: inline-block;
        background:#FFF;
        border-radius: 0 45px 0 0;
        width:auto;
        box-sizing: border-box;
        z-index:1;
        }

        .page-title h1 {
        position: relative;
        text-align: center;
        line-height:110%;
        font-weight:500;
        color:#4E4C44;
        z-index: 2;
        }
        @media screen and (max-width: 2000px) {
        .page-title { border-radius: 0 2.25vw 0 0; }
        }
        @media screen and (max-width:1024px) {
        .page-title { padding:24px 30px 0 0; }
        }
        @media screen and (max-width:767px) {
        .page-title { padding:18px 24px 0 10px; }
        }

.memo {
        padding:.5rem 0;
        box-sizing: border-box;
        line-height: 180%;
        border-top: 1px solid rgb(0 0 0 / .6);
        border-bottom: 1px solid rgb(0 0 0 / .6);
        }
        .memo-w {
        padding:.5rem 0;
        border-top:1px solid rgba(255,255,255,.5);
        border-bottom:1px solid rgba(255,255,255,.5);
        }
        .memo-w.border-none {
        border-bottom:none;
        }

figure {
        position: relative;
        z-index: 0;
        }
.figure-caption {
        position: absolute;
        display: inline-block;
        bottom:0;
        left:0;
        padding: 5px 13px;
        margin: 0;
        color: #fff;
        background: rgb(0 0 0 / .7);
        font-size: 13px;
        line-height: 120%;
        z-index: 1;
        }
        .figure-caption.top { bottom:auto; top:0; }
.img-wrap {
        position: relative;
        z-index: 0;
        }
        @media screen and (max-width:767px) {
        .figure-caption { font-size:11px; }
        .wide-img-sp { width:calc(100% + 7vw); margin-left:-3.5vw; }
        .column .inner.wide-img-sp { width:calc(100% + 7vw); margin-left:-3.5vw; }
        }

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

       下層

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

        /*=================================================
                ONSEN
        ==================================================*/

        .onsen-img-01 {
        position: relative;
        padding:0 0 3% 33%;
        box-sizing: border-box;
        z-index: 0;
        }
        .onsen-img-01 figcaption {
        position: absolute;
        left:0;
        top:.5em;
        line-height: 1;
        font-size:clamp(36px, 9vw, 150px);
        opacity:.1;
        z-index: -1;
        }
        .onsen-img-02 {
        position: absolute;
        bottom:0;
        left:0;
        width:38%;
        z-index: 1;
        }
        .onsen-title {
        margin-top:-5em;
        line-height: 230%;
        }
        .onsen-text-wrap {
        position: relative;
        padding-top:5%;
        }
        .onsen-sub {
        position: relative;
        padding:0 0 0 25%;
        box-sizing: border-box;
        }
        @media screen and (max-width:1024px) {
        .onsen-title { margin-top:-3em; }
        .onsen-sub { padding:5% 40% 0 15%; }
        .onsen-text { padding:5% 0 0 5%; box-sizing: border-box; }
        }
        @media screen and (max-width:767px) {
        .onsen-title { margin-top:1em; }
        .onsen-img-01 figcaption { top:-.5em; font-size:clamp(36px, 12vw, 150px); }
        .onsen-text { padding:0; }
        .onsen-sub { padding:2.5rem 27% 0 8%; }
        .onsen-img-01 { width:110%; padding:0 0 6% 33%; }
        .onsen-img-02 { width:48%; margin-left:-10%; }
        }

        /*=================================================
                GUIDE
        ==================================================*/

        .shift-l {
        width:100%;
        padding-right:8%;
        box-sizing: border-box;
        }
        .shift-r {
        width:100%;
        padding-left:8%;
        box-sizing: border-box;
        }

        @media screen and (max-width:1350px) {
        .shift-l { padding-right:0%; }
        .shift-r { padding-left:0%; }
        }