@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        width:100%;
        padding:120px 2.05vw 2.05vw 2.05vw;
        border-radius: 10px;
        z-index: 1;
        }
        @media screen and (max-width:1200px) {
        .hero-wrap { padding:100px 2.05vw 2.05vw 2.05vw; }
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { padding:100px 2.05vw 2.05vw 2.05vw; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { padding:96px 2.05vw 2.05vw 2.05vw; }
        }

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

       Movie

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

.movie-banner {
        position: absolute;
        bottom:15px;
        right:15px;
        width:135px;
        z-index: 2;
        }

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        border-radius:10px;
        overflow: hidden;
        z-index: 2;
        }
        .movie {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
        overflow: hidden;
        }
        .movie_inner {
        position: relative;
        width: 100%;
        height:calc(100vh - (2.05vw + 100px));
        min-height: 800px;
        overflow: hidden;
        z-index: 0;
        top: 0;
        }
        .movie_inner video {
        object-fit: cover; /* 左記fit時設定。 アスペクト時は削除 */
        }
        .video-js {
        height: 100% !important;
        }
        .video-js .vjs-tech { 
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        }

        @media screen and (max-width:1024px) {
        .movie_inner { height:calc(100vh - (2.05vw + 120px)); min-height: 700px; }
        /*
        .movie:before { content: ""; display: block; padding-top: 80%; }
        .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; }
        */
        .movie-banner { width:120px; }
        }
        @media screen and (max-width:767px) {
        .movie_inner { min-height: 300px; }
        .movie-banner { right:5px; bottom:5px; width:105px; }
        }

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

       背景

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

.border-box {
        padding:4%;
        box-sizing: border-box;
        border:3px solid #905C3C;
        border-radius:10px;
        }
.gray-box {
        background: rgba(55,53,52,.03);
        padding:50px;
        box-sizing: border-box;
        border-radius: 10px;
        }
        .gray-box-s {
        background: rgba(55,53,52,.03);
        padding:36px;
        box-sizing: border-box;
        border-radius: 10px;
        }
.brown-box {
        background: url("../images/parts/brown.jpg") left top repeat;
        color:#FFF;
        padding:5%;
        border-radius: 10px;
        box-sizing: border-box;
        }
.bg-gray {
        background: rgba(55,53,52,.04);
        }
        @media screen and (max-width:1350px) {
        .gray-box { padding:40px; }
        }
        @media screen and (max-width:1024px) {
        .gray-box { padding:30px; }
        .gray-box-s { padding:30px; }
        }
        @media screen and (max-width:767px) {
        .border-box { padding:8%; }
        .gray-box { padding:7%; }
        .gray-box-s { padding:7%; }
        .brown-box { padding:8%; }
        }

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

        タイトル / テキスト

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

.white { color:#FFF !important; }
.white .en { color:#FFF; }
.red { color:#800000;}
.brown {color:#85583F; }
.gold {color:#DFB73E; }
    .white .gold {color:#DFB73E; }

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

.under-title {
        padding-bottom:.5rem;
        border-bottom:1px solid #707070;
        }

.dotted-title {
        padding-bottom:.25rem;
        border-bottom:2px dotted #3A0D22;
        }
.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:50%;
        transform: translateY(-50%);
        width:100%;
        height:1px;
        background:#707070;
        margin-left:1.5rem;
        }
        .lead.center:after {
        display: block;
        margin-left:0;
        }
        .lead.center span {
        position: relative;
        display: inline-block;
        background:#FFF;
        padding:0 2rem;
        z-index: 1;
        }
.label-title {
        background: rgba(55,53,52,.1);
        padding:.5rem 1rem;
        box-sizing: border-box;
        line-height: 135%;
        border-radius: 5px;
        }

.th45 img { height:45px; width:auto; }
        @media screen and (max-width:1350px) {
        .th45 img { height:36px; }
        }
        @media screen and (max-width:1024px) {
        .th45 img { height:32px; }
        }
        @media screen and (max-width:767px) {
        .th45 img { height:27px; }
        }

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

       トップページ

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

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

        .greeting-wrap {
        position: relative;
        z-index: 0;
        }
        .greeting-wrap:after {
        content:"";
        display:block;
        position: absolute;
        top:15%;
        left:-20%;
        width:105%;
        height:80%;
        background: rgba(55,53,52,.03);
        z-index: -1;
        }
        .greeting-img {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:100%;
        }
        .greeting-img figure { position: absolute; }
                .greeting-img figure:nth-child(1) { top:0; left:0; width:100%; z-index: 0; }
                .greeting-img figure:nth-child(2) { bottom:0; left:-20%; width:38%; z-index: 1; }
                .greeting-01 { width:100%; height:0; padding-bottom:80.95%; background: url("../images/img/top/img_01-1.jpg") center center / cover; }
        
        .greeting-text-wrap {
        position: relative;
        padding-top:60%;
        }
        .greeting-text-wrap figure { position: absolute; top:-10%; left:40%; width:93%; z-index: 1; }
        .greeting-title { font-size:clamp(18px, 1.5vw, 26px); }

        @media screen and (max-width:1350px) {
        .greeting-text-wrap { padding-top:50%; }
        .greeting-01 { padding-bottom:80.95%; }
        }
        @media screen and (max-width:1320px) {
        .greeting-text-wrap { padding-top:50%; }
        .greeting-img { padding-bottom:750px; }
        .greeting-01 { padding-bottom:600px; }
        .greeting-img figure:nth-child(2) { left:-7%; width:40%; }
        }

        @media screen and (max-width:1024px) {
        .greeting-img { padding-bottom:100%; }
        .greeting-01 { padding-bottom:80.95%; }
        .greeting-img figure:nth-child(2) { left:-20%; width:38%; }
        .greeting-text-wrap { padding-top:0; }
        .greeting-text-wrap figure { top:-20%; left:45%; width:55%; }
        }
        @media screen and (max-width:767px) {
        .greeting-text-wrap figure { left:65%; }
        .greeting-title { font-size:clamp(15px, 4.2vw, 20px); }
        }

        /*=================================================
                News
        ==================================================*/

        .top-news-bg {
        position: relative;
        color:#FFF;
        z-index: 0;
        }
        .top-news-bg:before {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:-100px;
        width:100%;
        height:100%;
        background: url("../images/parts/brown.jpg") right top repeat;
        z-index: -1;
        border-radius:0 10px 10px 0;
        }

        .news-list {
        width:100%;
        }
        .top-news-list li {
        line-height:135%;
        font-size:.9375rem;
        color:#FFF;
        }
        .top-news-list li a {
        color:#FFF;
        display: inline-block;
        position: relative;
        padding:.5rem 0 .15rem;
        margin-bottom:.35rem;
        font-weight:500;
        box-sizing: border-box;
        transition: all 0.3s ease;
        }
        .top-news-list li span {
        width:5em;
        display:inline-block;
        font-size:12px;
        color:#FFF;
        padding-right:1rem;
        }
        .top-news-list li a:hover {
        cursor: pointer;
        opacity: .6;
        text-decoration: underline;
        }
        
        @media screen and (max-width:1024px) {
        .top-news-bg:before { left:-4vw; }
        }
        @media screen and (max-width:767px) {
        .top-news-list li { border-bottom:1px dotted rgba(255,255,255,.3); }
        .top-news-list li:last-child { border-bottom:none; }
        .top-news-list span { display:block; }
        .is-news-list .inner { padding-right:4vw; box-sizing: border-box; }
        }

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

        .after-bg-att { position: relative; z-index: 0; }
        .after-bg-att:after {
        content:"";
        display: block;
        position: absolute;
        top:27%;
        left:-1%;
        width:102%;
        height:65%;
        background: rgba(55,53,52,.03);
        z-index: -1;
        border-radius: 10px;
        }

        .att-img {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:92.5%;
        z-index: 0;
        }
        .att-img figure { position: absolute; }
        .att-img figure:nth-child(1) { top:0; width:90.5%; padding-bottom:60%; z-index: 0; }
        .att-img figure:nth-child(2) { bottom:0; width:33.7%; z-index: 0; }
        .att-img.right figure:nth-child(1) { left:0; }
        .att-img.left figure:nth-child(1) { right:0; }
        .att-img.right figure:nth-child(2) { right:1%; }
        .att-img.left figure:nth-child(2) { left:1%; }
        .att-img hgroup { position: absolute; top:66%; width:62%; }
        .att-img.right hgroup { right:37%; text-align: right; }
        .att-img.left hgroup { left:37%; }
        
        .att-01 { background: url("../images/img/top/img_02-1.jpg") center center / cover; }
        .att-02 { background: url("../images/img/top/img_03-1.jpg") center center / cover; }
        .att-03 { background: url("../images/img/top/img_04-1.jpg") center center / cover; }

        .att-title { font-size:clamp(50px, 7vw, 120px);}

        .att-text-wrap {
        position: relative;
        z-index: 0;
        }
        .att-text {
        position: relative;
        width:100%;
        box-sizing: border-box;
        }
        .left .att-text { padding-left:calc(100% - 380px); }
        .right .att-text { padding-right:calc(100% - 380px); }
        .att-sub {
        position: relative;
        padding-top:10%;
        }
        .att-sub figure:nth-child(1) {
        position: relative;
        box-sizing: border-box;
        }
        .att-sub figure:nth-child(2) {
        position: absolute;
        top:-55%;
        width:35%;
        }
        .left .att-sub figure:nth-child(1) { padding:0 24% 0 12%; }
        .right .att-sub figure:nth-child(1) { padding:0 12% 0 24%; }
        .left .att-sub figure:nth-child(2) { right:460px; }
        .right .att-sub figure:nth-child(2) { left:460px; }
        
        @media screen and (max-width:1350px) {
        .left .att-sub figure:nth-child(2)  { top:55%; width:30%; right:-20%; }
        .right .att-sub figure:nth-child(2) { top:54%; width:30%; left:-20%; }
        }
        @media screen and (max-width:1060px) {
        .left .att-text { padding-left:10%; }
        .right .att-text { padding-right:10%; }
        }
        @media screen and (max-width:1024px) {
        .att-img { padding-bottom:115%; }
        .att-img figure:nth-child(1) { padding-bottom:75%; }
        }
        @media screen and (max-width:767px) {
        .att-img { padding-bottom:80%; }
        .att-img figure:nth-child(1) { padding-bottom:60%; }
        .att-img hgroup { top:72%;}
        .left .att-text { padding-right:10%; }
        .right .att-text { padding-left:10%; }
        .att-sub { padding-bottom:12%; }
        .left .att-sub figure:nth-child(1) { padding:0 0 0 25%; }
        .right .att-sub figure:nth-child(1) { padding:0 25% 0 0; }
        .left .att-sub figure:nth-child(2) { top:auto; bottom:0; width:36%; right:62%; }
        .right .att-sub figure:nth-child(2) { top:auto; bottom:0; width:36%; left:62%; }
        }

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

        .banner-wrap {
        width:100%;
        position: relative;
        border-radius: 5px;
        z-index: 1;
        }
        .banner-img {
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        width:100%;
        height:300px;
        box-sizing: border-box;
        position: relative;
        border-radius: 5px;
        overflow: hidden;
        z-index: 1;
        }
        .banner-text-wrap {
        position: absolute;
        top:0;
        left:4%;
        width:300px;
        height:235px;
        background:url("../images/parts/orange.jpg") center center / cover;
        box-sizing: border-box;
        border-radius:0 0 10px 10px;
        overflow: hidden;
        z-index: 1;
        }
        .banner-text-wrap .inner {
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        width:100%;
        }
        .banner-bestrate {
        position: absolute;
        bottom:-30px;
        right:10px;
        width:170px;
        height:170px;
        z-index: 1;
        }

        @media screen and (max-width:1024px) {
        .banner-img { height:240px; }
        .banner-text-wrap { width:240px; height:190px; }
        .banner-bestrate { width:150px; height:150px; bottom:-15px; }
        }
        @media screen and (max-width:767px) {
        .banner-img { height:300px; }
        .banner-text-wrap { width:256px; height:155px;left:50%; transform: translateX(-50%); }
        .banner-bestrate { right:5px; bottom:-25px; width:120px; height:120px; }
        }

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

       下層 ヘッダー

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

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 10px;
        z-index: 1;
        }

        /*=================================================
                スライドヘッダー
        ==================================================*/

        .page-header-slider {
        position: relative;
        z-index: 0;
        }
        .page-header-slick .slickslider-s figure {
        position: relative;
        z-index: 0;
        }
        .page-header-slick .slick-slide { margin:0 !important; }
        .page-header-slick { height:auto; }
        .page-header-slick .slickslider-s figure { width: 100%; height:0; padding-bottom:50%; }
        .page-header-slick:after {
        content: "";
        display: block;
        padding-bottom:50%; 
        }

        .facilities_01 { background: url("../images/img/facilities/header_01.jpg") center center / cover; }
        .facilities_02 { background: url("../images/img/facilities/header_02.jpg") center center / cover; }
        .facilities_03 { background: url("../images/img/facilities/header_03.jpg") center center / cover; }

        .cuisine_01 { background: url("../images/img/cuisine/header_01.jpg") center center / cover; }
        .cuisine_02 { background: url("../images/img/cuisine/header_02.jpg") center center / cover; }
        .cuisine_03 { background: url("../images/img/cuisine/header_03.jpg") center center / cover; }

        .green_01 { background: url("../images/img/green/header_01.jpg") center center / cover; }
        .green_02 { background: url("../images/img/green/header_02.jpg") center center / cover; }
        .green_03 { background: url("../images/img/green/header_03.jpg") center center / cover; }

        .winter_01 { background: url("../images/img/winter/header_01.jpg") center center / cover; }
        .winter_02 { background: url("../images/img/winter/header_02.jpg") center center / cover; }
        .winter_03 { background: url("../images/img/winter/header_03.jpg") center center / cover; }

        @media screen and (max-width:1350px) {
        .page-header-slick:after { padding-bottom:650px; }
        .page-header-slick .slickslider-s figure { padding-bottom:650px; }
        }
        @media screen and (max-width:1024px) {
        .page-header-slick:after { padding-bottom:550px; }
        .page-header-slick .slickslider-s figure { padding-bottom:550px; }
        }
        @media screen and (max-width:767px) {
        .page-header-slick:after { padding-bottom:390px; }
        .page-header-slick .slickslider-s figure { padding-bottom:390px; }
        }

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

        .page-header {
        position: relative;
        width: 100%;
        padding-bottom:50%;
        border-radius:10px;
        overflow: hidden;
        z-index: 2;
        }
        .page-header.short { padding-bottom:36%; }

        .access         { background: url("../images/img/access/header.jpg") center center / cover; }
        .charge         { background: url("../images/img/charge/header.jpg") left center / cover; }
        .news           { background: url("../images/img/news/header.jpg") center center / cover; }
        
        @media screen and (max-width:1350px) {
        .page-header { padding-bottom:650px; }
        .page-header.short { padding-bottom:450px; }
        }
        @media screen and (max-width:1024px) {
        .page-header { padding-bottom:550px; }
        .page-header.short { padding-bottom:350px; }
        }
        @media screen and (max-width:767px) {
        .page-header { padding-bottom:390px; }
        .page-header.short { padding-bottom:240px; }
        .charge         { background: url("../images/img/charge/header-sp-b.jpg") center center / cover; }
        }
        @media screen and (max-width:520px) {
        .charge         { background: url("../images/img/charge/header-sp.jpg") center bottom / cover; }
        }

.page-title {
        position: absolute;
        left:0;
        bottom:0%;
        padding:.5rem 1.5rem 1.5rem;
        box-sizing: border-box;
        color:#FFF;
        background: url("../images/parts/brown.jpg") left top repeat;
        display: inline-block;
        min-width:400px;
        border-radius:0 10px 0 10px;
        z-index:2;
        }
        .page-title h1 {
        position: relative;
        box-sizing: border-box;
        padding-top:12px;
        padding-bottom:.5rem;
        line-height: 1;
        z-index: 3;
        }
        .page-title p {
        line-height: 1;
        z-index: 3;
        }
        
        @media screen and (max-width:1350px) {
        .page-title { min-width:375px; }
        }
        @media screen and (max-width:1024px) {
        .page-title { min-width:270px; }
        }
        @media screen and (max-width:767px) {
        .page-title { min-width:0; padding:.5rem 1rem 1rem; }
        .page-title h1 { padding-top:4px; } 
        }

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

       page-greeting

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

        .page-greeting {
        position: relative;
        z-index: 0;
        }
        .page-greeting:after {
            content:"";
            display: block;
            position: absolute;
            top:3%;
            width:100%;
            height:94%;
            background: rgba(55,53,52,.03);
            z-index: -1;
            border-radius:10px;
            }
            .page-greeting.left:after { left:-10%;}
            .page-greeting.right:after {right:-10%;}


        .page-greeting-title {
        position: relative;
        box-sizing: border-box;
        z-index: 1;
        }
        .left .page-greeting-title { padding:5% 5% 5% 17%; }
        .right .page-greeting-title { padding:5% 5% 5% 36%; }
        
        .page-greeting-img { position: relative; z-index: 0; }
        .page-greeting-img figure:nth-child(1) { position:relative; width:100%; }
        .page-greeting-img figure:nth-child(2) { position: absolute; top:-67%; width:35%; }
        .left .page-greeting-img figure:nth-child(2) { left:-6%; }
        .right .page-greeting-img figure:nth-child(2) { right:-8%; }
        
        .page-greeting-text-wrap {
        position: relative;
        z-index: 0;
        }
        
        .page-greeting-text {
        position: relative;
        padding-top:35%;
        width:100%;
        max-width:610px;
        box-sizing: border-box;
        }
        .left .page-greeting-text { padding-left:7%; }
        .right .page-greeting-text { margin: 0 auto; }
        .page-sub {
        position: absolute;
        top:-70%;
        left:0;
        width:100%;
        height:0;
        padding-bottom:62%;
        z-index: -1;
        }
        .right .page-sub { top:-60%; }
        .page-sub.winter-img { top:-53%; }
        .page-sub figure:nth-child(1) { position: absolute; top:0; width:58.5%; }
        .page-sub figure:nth-child(2) { position: absolute; bottom:0%; width:31%; }
        .left .page-sub figure:nth-child(1) { left:36%; }
        .left .page-sub figure:nth-child(2) { left:0; }
        .right .page-sub figure:nth-child(1) { right:36%; }
        .right .page-sub figure:nth-child(2) { right:0; }
        
        @media screen and (max-width:1350px) {
        .page-greeting-text { padding-top:30%; }
        }
        @media screen and (max-width:1024px) {
        .page-sub { top:-40%; }
        .right .page-sub { top:-40%; }
        .left .page-greeting-text { padding-left:0; }
        .right .page-greeting-text { padding-right:0; }
        .page-greeting-text { padding-top:35%; }
        .page-sub.winter-img { top:-27%; }
        }
        @media screen and (max-width:767px) {
        .page-greeting.left:after { left:-20%;}
        .page-greeting.right:after {right:-20%;}
        .left .page-greeting-title { padding:0 0 22% 0; }
        .right .page-greeting-title { padding:0 0 22% 0; }
        .left .page-greeting-title.winter-title { padding:0 0 9% 0; }
        .page-greeting-img figure:nth-child(2) { top:-22%; }
        .page-greeting-text { padding-top:0; padding-bottom:2rem; }
        .page-sub { position:relative; top:auto; }
        .page-greeting-text { margin-left:auto; margin-right:auto; }
        }

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

       cuisine

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

        .small-img {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:52%;
        z-index: 0;
        }
        .small-img figure {
        position: absolute;
        }
        .small-img figure:nth-child(1) { bottom:0; left:0; width:60%; }
        .small-img figure:nth-child(2) { top:0%; right:0; width:32%; }
        .small-img.reverse figure:nth-child(1) { left:auto; right:0; }
        .small-img.reverse figure:nth-child(2) { right:auto; left:0; }

        .cuisine-img {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:70%;
        z-index: 0;
        }
        .cuisine-img figure {
        position: absolute;
        }
        .cuisine-img figure:nth-child(1) { top:0; left:0; width:48.5%; }
        .cuisine-img figure:nth-child(2) { bottom:0%; right:0; width:48.5%; }

        .cuisine-img-01 {
        width:100%;
        height: 100%;
        background: url("../images/img/cuisine/img_10-1.jpg") center center / cover;
        }

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

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

       facilities

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

        .rooms-memo {
        background: rgba(55,53,52,.06);
        border-radius: 5px;
        padding:7px 15px;
        box-sizing: border-box;
        line-height: 135%;
        }
        .facilities-img-01 {
        width:100%;
        height:100%;
        background: url("../images/img/facilities/img_08-1.jpg") center center / cover;
        }
        .facilities-img-02 {
        width:100%;
        height:100%;
        background: url("../images/img/facilities/img_09-1.jpg") center center / cover;
        }


        @media screen and (max-width:767px) {
        .facilities-img-01 { padding-bottom:60%; height:0; }
        .facilities-img-02 { padding-bottom:60%; height:0; }
        }

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

       charge

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

        .toiawase-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 2em;
        }
        .toiawase-wrap p {
        width: cale((100% - 2em) / 2);
        line-height: 180%;
        }

        .toiawase-wrap .mail_ad a {
        line-height: 1;
        vertical-align: baseline;
        }
        .toiawase-wrap .mail_ad img {
        height: clamp(21px, 2vw, 26px);
        aspect-ratio: 138 / 13;
        display: inline-block;
        }


        @media screen and (max-width:1024px) {
        
        }
        @media screen and (max-width:767px) {
        .toiawase-wrap {
        display: block;
        }
        .toiawase-wrap p {
        width: 100%;
        line-height: 220%;
        }
        .toiawase-wrap .mail_ad a {
        line-height: 1;
        vertical-align: middle;
        }
        .toiawase-wrap .mail_ad img {
        height: clamp(16px, 6vw, 21px);
        }
        }

        .line-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 2em;
        background: #ffffff;
        padding: 1.2em 1em;
        border: solid 3px #756767;
        box-sizing: border-box;
        }
        .line-wrap figure {
        width: 100%;
        max-width: 180px;
        }
        .line-wrap .text_box {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        max-width: 600px;
        }
        .line-wrap .text_box span {
        display: inline-block;
        }
        .line-wrap .text_box img {
        filter: hue-rotate(375deg);
        }


        @media screen and (max-width:1024px) {
        
        }
        @media screen and (max-width:767px) {
        .line-wrap .text_box {
        display: block;
        margin: 0 auto;
        }
        .line-wrap .text_box .more {
        margin: 2em auto 0;
        }
        }