@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:0px;
        z-index: 1;
        }
        .hero-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 80%;
        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:0px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:0px; }
        }

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

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

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

       背景

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

.border-box {
        border:4px solid rgb(0 0 0 / .4);
        padding:60px;
        box-sizing: border-box;
        background: #FFF;
        overflow: hidden;
        border-radius: 5px;
        }
.bg-beige {
        background: url("../images/parts/beige.jpg") center center / cover;
        }
.bg-light {
        background: #E9E6E3;
        }


        @media screen and (max-width:1500px) {
        
        }
        @media screen and (max-width:1024px) {
        .border-box  {  }

        
        }
        @media screen and (max-width:767px) {
        .border-box  { padding:8%; }
        
        }

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

        タイトル / テキスト

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

.white { color:#EEEAE5 !important; }
.white .en { color:#EEEAE5; }
.gold { color:#BCB49B; }
    .bg-black .green { color:#6F867C; }

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

.under-title {
        padding-bottom:.35rem;
        border-bottom:2px solid #1F1E1D;
        }
        .dotted-title {
        padding-bottom:.35rem;
        border-bottom:3px dotted rgb(0 0 0 / .6);
        }
.bar-title {
        position: relative;
        padding-bottom:30px;
        }
        .bar-title:before {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:50%;
        translate:-50%;
        width:44px;
        height:3px;
        background:#387049;
        }
        .white .bar-title:before { background: #FFF; }
.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        display: inline-block;
        position: absolute;
        bottom:.5em;
        margin-left:.75em;
        width:100%;
        height:1px;
        background: #387049;
        opacity:.75;
        }
.tab {
        display: inline-block;
        line-height: 1;
        padding:.6em 1.2em;
        border-radius: 3px;
        background:#E8E5E2;
        }
.line-title { line-height: 180%; }
.line-title span {
        display: inline-block;
        border-bottom:2px solid #1F1E1D;
        }
        .greeting-wrap .line-title span { border-bottom:2px solid #FEFEFE; }


        @media screen and (max-width:1350px) {
        
        }
        @media screen and (max-width:1024px) {
        
        }
        @media screen and (max-width:767px) {
        .sp-indent { padding-left:1.5rem; box-sizing: border-box; }
        }

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

       トップページ

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

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

        .top-news-list li {
        position: relative;
        font-size:1rem;
        line-height: 170%;
        padding: 1.25rem 0;
        border-top:1px dotted rgb(0 0 0  / .45);
        }
        .top-news-list li:first-child {  }
        .top-news-list li:last-child { border-bottom:none; padding-bottom:0; }
        .top-news-list li a {
        position: relative;
        font-weight:400;
        color:#1F1E1D;
        box-sizing: border-box;
        transition: all 0.3s ease;
        cursor: pointer;
        }
        .top-news-list li .date {
        display:inline-block;
        font-size:12px;
        margin-right:20px;
        color:#1F1E1D;
        font-weight:400;
        opacity:1;
        }
        .top-news-list li .post-title,
        .top-news-list li .news-post-title{
        padding-top:.5em;
        display: block;
        width:100%;
        }
        .top-news-list li a:hover { opacity:1; text-decoration: underline; }
        .top-news-list li a:hover:after { left: 0; width: 100%; }

        .top-news-list .catName {
        display: inline-block;
        padding: 5px 8px 6px;
        color: #FFF;
        background:#1F1E1D;
        border-radius: 1px;
        font-size: 12px;
        font-weight: 500;
        line-height: 100%;
        margin: 0 12px 0 0 ;
        }
        @media screen and (max-width:767px) {
        .top-news-list .post-title { display: block; padding-top: 5px; margin-left: 0; }
        .top-news-list .catName { padding: 4px 8px 5px; }
        .top-news-list li .date { margin-right:15px; }
        }

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

        .greeting-wrap {
        position: relative;
        background: url("../images/parts/black.jpg") center center / cover;
        color:#F9F9F8;
        z-index: 0;
        }
        .greeting-title {
        position: relative;
        padding:20% 0 0 ;
        }
        .greeting-text {
        padding:20% 0 0 10%;
        box-sizing: border-box;
        }
        .greeting-sub {
        position: relative;
        margin-top:-10%;
        }
        .greeting-sub figure:nth-child(1) {
        position: relative;
        padding:0 10% 15% 0;
        box-sizing: border-box;
        z-index: 0;
        }
        .greeting-sub figure:nth-child(2) {
        position: absolute;
        bottom: 0;
        right:0;
        width:50%;
        z-index: 1;
        }

        @media screen and (max-width:1350px) {
        .greeting-title { padding:15% 0 0 0 ; }
        .greeting-sub { margin-top:-5%; }
        }
        @media screen and (max-width:1024px) {
        .greeting-sub { margin-top:0%; }
        .greeting-text { padding:3rem 0 0 0 ; }
        }
        @media screen and (max-width:767px) {
        .greeting-title { padding:3rem 0; }
        .greeting-text { padding:0 0 3rem 0; }
        }

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

        .top-owner-title {
        position: relative;
        padding:0 0 17% 10%;
        box-sizing: border-box;
        }
        .top-owner-img { position: relative; }
        .top-owner-img figure:nth-child(1) {
        position: relative;
        padding:0 25% 23% 0;
        box-sizing: border-box;
        }
        .top-owner-img figure:nth-child(2) {
        position: absolute;
        bottom: 0;
        right:-50%;
        width:50%;
        }
        .top-facilities-title {
        position: relative;
        padding:0 0 17% 10%;
        box-sizing: border-box;
        }
        .top-facilities-img { }
        .top-facilities-sub-01 {
        position: relative;
        padding:20% 5% 0 15%;
        box-sizing: border-box;
        }
        .top-facilities-sub-02 {
        position: relative;
        margin-top:-10%;
        }
        .top-facilities-sub-02 figure:nth-child(1) {
        position: relative;
        padding:0 0 20% 37%;
        box-sizing: border-box;
        }
        .top-facilities-sub-02 figure:nth-child(2) {
        position: absolute;
        bottom: 0;
        left:0;
        width:46%;
        z-index: 1;
        }

        @media screen and (max-width:1400px) {
        .top-owner-title { padding:0 0 17% 5%; }
        }
        @media screen and (max-width:1200px) {
        .top-owner-title { padding:0 0 17% 0; }
        .top-facilities-sub-02 { margin-top:0%; }
        }
        @media screen and (max-width:1024px) {
        .att-img { padding-top:20%; }
        .top-facilities-img { padding-top:10%; }
        }
        @media screen and (max-width:767px) {
        .att-img { padding-top:0%; }
        .top-owner-title { padding:3rem 0 3rem 0; }
        .top-owner-img figure:nth-child(1) { padding:0 50% 10% 0; }
        .top-owner-img figure:nth-child(2) { right:0; width:40%; }
        .top-facilities-img { padding-top:0%; }
        .top-facilities-title { padding:3rem 0; }
        .top-facilities-sub-01 { padding:0 33% 0 0; }
        .top-facilities-sub-02 { margin-top:10%; }
        }

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

        .instagram-banner {
        line-height: 1;
        display: block;
        }
        .instagram-banner a {
        display: block;
        line-height: 1;
        background: #403E3B;
        color:#EEEAE5;
        }
        .insta-text {
        width:100%;
        text-align: center;
        }
        @media screen and (max-width:767px) {
        .insta-text { padding:2.5rem 0; }
        .insta-text .f27 { font-size:20px; }
        }

        /*=================================================
                INFORMATION ICON
        ==================================================*/

        .icon-table th p {
        position: relative;
        padding-left:42px;
        }
        .icon-before-top {
        width:30px;
        height:30px;
        display:inline-block;
        margin-right:.5rem;
        position: absolute;
        top:50%;
        left:0;
        translate:0 -50%;
        }
        .icon-01 { background: url("../images/parts/icon-01.svg") center center / cover; }
        .icon-02 { background: url("../images/parts/icon-02.svg") center center / cover; }
        .icon-03 { background: url("../images/parts/icon-03.svg") center center / cover; }
        .icon-04 { background: url("../images/parts/icon-04.svg") center center / cover; }
        .icon-05 { background: url("../images/parts/icon-05.svg") center center / cover; }
        .icon-06 { background: url("../images/parts/icon-06.svg") center center / cover; }
        .icon-07 { background: url("../images/parts/icon-07.svg") center center / cover; }
        .icon-08 { background: url("../images/parts/icon-08.svg") center center / cover; }

        @media screen and (max-width:767px) {
        .icon-table th p { padding-left:36px; }
        .icon-before-top { width:24px; height:24px;  }
        }

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

        .banner-wrap {
        width:100%;
        position: relative;
        z-index: 1;
        }
        .banner-wrap a {
        display: block;
        overflow: hidden;
        }
        .banner-img-wrap {
        position: relative;
        padding:0 0 5% 8%;
        box-sizing:border-box;
        z-index: 0;
        }
        .banner-img {
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        width:100%;
        height:450px;
        box-sizing: border-box;
        position: relative;
        border:1px solid rgb(0 0 0 / .5);
        z-index: 0;
        }
        .banner-text {
        position: absolute;
        left:0;
        bottom: 0;
        width:86%;
        max-width:550px;
        background: #403E3B;
        text-align: left;
        box-sizing: border-box;
        z-index: 1;
        }
        .banner-text:after {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:calc(100% - 20px);
        height:calc(100% - 20px);
        border:1px solid #EEEAE5;
        box-sizing: border-box;
        }
        .banner-text-inner {
        width:72%;
        margin-inline:auto;
        padding:4.5rem 0;
        line-height: 1;
        }

        .more-reservation {
        width:auto;
        display: inline-block;
        text-align: left;
        color:#F5F2EF;
        font-weight:700;
        box-sizing: border-box;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        letter-spacing: 0em;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .more-reservation span {
        position: absolute;
        display: inline-block;
        margin-left: .85rem;
        top:2px;
        width: .925em;
        height: .925em;
        background: url("../images/parts/icon-arrow-w.svg") center center / cover;
        z-index: 0;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        }
        .more-reservation:after {
        position: absolute;
        content: "";
        width: 0;
        height:2px;
        bottom:-5px;
        right: 0;
        z-index: -1;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:#F5F2EF;
        }      
        .banner-wrap a:hover .more-reservation { opacity:1; }
        .banner-wrap a:hover .more-reservation:after { left:0; width:100%; }

        @media screen and (max-width: 1350px) {
        .banner-img { height:420px; }
        .banner-text {  max-width:450px; }
        .banner-text-inner { padding:4rem 0; }
        }
        @media screen and (max-width:1024px) {
        .banner-img { height:360px; }
        .banner-text {  max-width:380px; }
        .banner-text-inner { padding:3.5rem 0; }
        .banner-text:after { width:calc(100% - 16px); height:calc(100% - 16px); }
        }
        @media screen and (max-width:767px) {
        .banner-img-wrap { padding:0; }
        .banner-img { height:0; padding-bottom:40%; }
        .banner-text { width:100%; max-width:100%; position: relative; bottom:auto; }
        .banner-text-inner { padding:2.5rem 0; width: 80%; }
        .f27.more-reservation { font-size:20px; }
        }

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

       下層 ヘッダー

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

.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:45%;
        height:0;
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        height:0;
        padding-bottom:30%;
        width:100%;
        }

        .about        { background: url("../images/img/about/header.jpg") center center / cover; }
        .facilities   { background: url("../images/img/facilities/header.jpg") center center / cover; }
        .access       { background: url("../images/img/access/header.jpg") center center / cover; }
        .news         { background: url("../images/img/news/header.jpg") center center / cover; }

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

.page-title {
        position: absolute;
        bottom: 0;
        left:0;
        padding:24px 40px;
        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: 180px;
        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:110%;
        font-weight:600;
        letter-spacing: .05em;
        color:#FFF;
        z-index: 2;
        }

        @media screen and (max-width:1024px) {
        .page-title {  }
        }
        @media screen and (max-width:767px) {
        .page-title.large { top:50%; }
        }

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

       ABOUT

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

        /*=================================================
                STICKY
        ==================================================*/

        .sticky-wrap-1 {
        position: relative;
        width:100%;
        height:auto;
        }
            .stycky-item-1 {
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 0
            }
            .stycky-item-2 {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            z-index: 1;
            }

        .shift-img {
        position: relative;
        margin-top:8%;
        }
        .owner-img-1 {
        position: relative;
        padding-top:3.5rem;
        }
        .owner-img-1 figure:nth-child(1) {
        position: relative;
        padding:0 28% 15% 0;
        box-sizing: border-box;
        }
        .owner-img-1 figure:nth-child(2) {
        position: absolute;
        bottom:0;
        right:0;
        width:33%;
        z-index: 1;
        }
        .owner-text1 {
        padding:3rem 0 3rem 10%;
        box-sizing: border-box;
        }
        .owner-text2 {
        padding:15% 0 0 0;
        margin-left:-10%;
        box-sizing: border-box;
        }
        .owner-img-2 {
        position: relative;
        }
        .owner-img-2 figure:nth-child(1) {
        position: relative;
        padding:0% 10% 0 0%;
        box-sizing: border-box;
        z-index: 0;
        }

        .fuchu-title {
        padding:0 0 20%;
        }
        .fuchu-text {
        padding:20% 0 0 ;
        }
        @media screen and (max-width:767px) {
        .owner-text1 { padding:2rem 0 3rem 0; }
        .owner-text2 { padding:3rem 0; margin-left:0; }
        .fuchu-title { padding:3rem 0; }
        .fuchu-text { padding:3rem 0 0; }
        }


        .column.is-shop-name .inner     { border-right:2px solid rgb(0 0 0 / .3); }
        .column.is-shop-distance .inner { border-right:2px solid rgb(0 0 0 / .3); }
        .column.is-shop-memo .inner { padding-left:1.5em; }

        .column.is-shop-name     { flex: none; width: 14em; }
        .column.is-shop-distance { flex: none; width: 10em; }
        .column.is-shop-memo     { flex: none; width: calc(100% - 24em); }
        
        .column.is-shop-distance p { text-align: center; }

        @media screen and (max-width: 1024px) {
        .column.is-shop-name     { flex: none; width: 13em; }
        .column.is-shop-distance { flex: none; width: 9em; }
        .column.is-shop-memo     { flex: none; width: calc(100% - 22em); }
        }
        @media screen and (max-width: 767px) {
        .column.is-shop-name     { flex: none; width: 100%; }
        .column.is-shop-distance { flex: none; width: 100%; }
        .column.is-shop-memo     { flex: none; width: 100%; }
        
        .column.is-shop-name p { font-weight:700; margin-bottom:.75em; font-size:1.125em; }
        .column.is-shop-distance p { text-align: left; }
        .column.is-shop-memo .inner { padding-left:0; }
        .column.is-shop-name .inner     { border-right:none; }
        .column.is-shop-distance .inner { border-right:none; }
        }

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

       FACILITIES

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

        .facilities-img {
        position: relative;
        width:110%;
        z-index: 0;
        }
        .facilities-title {
        padding:10% 0 0 10%;
        box-sizing: border-box;
        width:100%;
        max-width:500px;
        margin-right:auto;
        }
        .facilities-text {
        width:100%;
        max-width:800px;
        padding:12% 5% 0 0;
        box-sizing: border-box;
        }
        .facilities-sub1 {
        position: relative;;
        padding:0 10% 0 0;
        margin-top:-20%;
        z-index: 0;
        }
        .facilities-sub2 {
        position: relative;
        padding-top:8%;
        max-width:1200px;
        margin-inline:auto;
        }
        .facilities-sub2 figure:nth-child(1) {
        position: relative;
        padding:0 0 10% 75%;
        box-sizing: border-box;
        }
        .facilities-sub2 figure:nth-child(2) {
        position: absolute;
        bottom:0;
        left:12%;
        width:38%;
        }
        
        
        .section-border {
        border-top:1px solid rgb(0 0 0 / .6);
        padding:2.5rem 0 0;
        }
        
        @media screen and (max-width:1215px) {
        .facilities-sub1 { margin-top:0; }
        }
        @media screen and (max-width:1024px) {
        .facilities-title { padding:15% 0 0 0; }
        .facilities-sub1 { padding-top:2rem; }
        .facilities-text { padding:15% 0 0 0; }
        }
        @media screen and (max-width:767px) {
        .facilities-title { padding:3rem 0 3rem; }
        .facilities-text { padding:0 0 3rem 0; }
        .facilities-sub1 { padding-top:0; }
        .facilities-sub2 { padding-top:12%; }
        .facilities-sub2 figure:nth-child(1) { padding:0 0 10% 65%; }
        .facilities-sub2 figure:nth-child(2) { left:0; width:45%; }
        }
        


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

       ACCESS

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

        .access-box {
        
        }
        .access-root li {
        position: relative;
        background:rgb(255 255 255 / 1);
        color:#000;
        text-align: center;
        padding:1rem .5rem;
        box-sizing: border-box;
        border:none;
        border-radius: 1px;
        width:100%;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:1rem;
        }
        .access-root li.road {
        background: none;
        padding:.25rem .5rem;
        font-size:1rem;
        border:none;
        }
        .access-root li.road.road-none {
        padding: 0 .5rem ;
        }
        .access-root li:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-1rem;
        left:50%;
        translate:-50%;
        width:0px;
        border-right:2px dotted rgb(0 0 0 / .6);
        height:1rem;

        }
        .access-root li.road.road-none:after { display: none }
        .access-root li:last-child { margin-bottom:0; background:#403E3B; color:#FFF; border: none; padding:1rem .5rem; }
        .access-root li:last-child:after { display: none; }

        @media screen and (max-width:767px) {
        .access-box { padding-bottom:1rem; }
        }

.large-more {
        position:relative;
        width:100%;
        line-height: 1;
        }
        .large-more a {
        width:100%;
        height:130px;
        line-height:124px;
        text-align: left;
        font-weight:500;
        background:rgb(255 255 255 / .8);
        border:3px solid rgb(0 0 0 / .6);
        box-sizing: border-box;
        border-radius:1px;
        overflow: hidden;
        padding-left:3rem;
        font-size:1.5rem;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        letter-spacing: 0em;
        display: inline-block;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .large-more a:before {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        right:2rem;
        translate:0 -50%;
        width:24px;
        height:24px;
        background: url("../images/icons/icon-arrow-b.svg") center center / cover;
        }
        .large-more 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(0 0 0 / .05);
        }
        .large-more a:hover {
        opacity:1;
        }
        .large-more a:hover:after {
        left: 0;
        width: 100%;
        }
        .large-more.w100p { max-width:100%; }
        
        @media only screen and (max-width:1024px) {
        .large-more a { height:90px; line-height:84px; }
        }
        @media only screen and (max-width:767px) {
        .large-more { width:100%; }
        .large-more a { height:78px; line-height:72px; font-size:18px; padding-left:2rem; }
        .large-more a:before { right:1.5rem; width:21px; height:21px; }
        
        }