@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:1200px) {
        .hero-wrap { margin-top:0; }
        }
        @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-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        background: rgb(0 0 0 / .2);
        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:60px;
        border:3px solid rgb(0 0 0 / .6);
        box-sizing: border-box;
        border-radius: 15px;
        overflow: hidden;
        background: rgb(255 255 255 / .3);
        z-index: 0;
        }
.brown-wrap {
        padding:8%;
        box-sizing: border-box;
        background: #4F453F;
        }
.gray-wrap {
        background:rgb(79 69 63 / .07);
        padding:12% 5%;
        box-sizing: border-box;
        height: 100%;
        }
.bg-gray {
        background:rgb(79 69 63 / .04);
        }
.bg-dark {
        background:rgb(79 69 63 / 1);
        color:var(--white-color);
        }
        @media screen and (max-width:1600px) {
        .border-box { padding:5vw; }
        }
        @media screen and (max-width:1024px) {
        .border-box { padding:6vw; border:2px solid rgb(0 0 0 / .6); border-radius: 10px; }
        }
        @media screen and (max-width:767px) {
        .border-box { padding:8vw; border-radius: 8px; }
        .brown-wrap { padding:10%; }
        }

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

        タイトル / テキスト

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

.white { color:var(--white-color) !important; }
.blue { color:#2786A3; }
.brown { color:#4F453F; }
.yellow { color:#ddbc52; }


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

.under-title {
        padding-bottom:.35rem;
        border-bottom:2px solid rgb(0 0 0 / .6);
        }
        .under-title-s {
        padding-bottom:.35rem;
        border-bottom:1px solid rgb(0 0 0 / .6);
        }

.bar-title {
        padding-top:1em;
        position: relative;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0%;
        width:45px;
        height:2px;
        background:#98823F;
        z-index: -1;
        }

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

.w-line {
        padding:.25em 0;
        border-top:2px solid #F9F9F2;
        border-bottom:2px solid #F9F9F2;
        }



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

        }
        @media screen and (max-width:767px) {
        .bar-title:after { height:2px; }
        }

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

       トップページ

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

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

        .greeting-img-wrap {
        position: relative;
        z-index: 0;
        }
        .greeting-img-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:15%;
        right:20%;
        width:100%;
        height:100%;
        border-radius: 15px;
        background: #4F453F;
        opacity:.1;
        z-index: -1;
        }
        .greeting-img {
        width:100%;
        height:0;
        padding-bottom:80%;
        border-radius: 0 15px 15px 0;
        background: url("../images/img/top/img_01-1.jpg") center center / cover;
        z-index:0;
        }
        .greeting-sub img {
        border-radius: 15px 0 0 15px;
        }
        
        .greeting-text {
        padding:20% 0;
        width:80%;
        max-width:430px;
        }
        
        @media screen and (max-width:1350px) {
        .greeting-text { padding:0 0 20% 0; }
        }
        @media screen and (max-width:1215px) {
        .greeting-img { padding-bottom:100%; }
        }
        @media screen and (max-width:1024px) {
        .greeting-img-wrap { margin-top:20%; }
        .greeting-img-wrap:after { top:-12%; height:125%; }
        .greeting-img { padding-bottom:120%; }
        .greeting-text { width:85%; }
        }
        @media screen and (max-width:767px) {
        .greeting-text { width:85%; margin-inline:auto; padding-bottom:3rem; }
        .greeting-img-wrap { margin-top:0%; }
        .greeting-img-wrap:after { top:10%; right:10%; height:75%; }
        .greeting-img { padding-bottom:60%; width:80%; }
        .greeting-sub { position: relative; padding-left:55%; margin-top:-10%; z-index: 1; } 
        }

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

        .att-img {
        position: relative;
        width:90%;
        padding-bottom:37%;
        border-radius: 15px;
        }
        .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-04 { background: url("../images/img/top/img_05-1.jpg") center center / cover; }

        .att-img.right { margin-left:auto; }
        .att-img.left { margin-right:auto; }

        .att-sub {
        position: relative;
        width:100%;
        padding-bottom:120%;
        border-radius: 15px;
        margin-top:-60%;
        z-index: 1;
        }
        .att-01-2 { background: url("../images/img/top/img_02-2.jpg") center center / cover; }
        .att-02-2 { background: url("../images/img/top/img_03-2.jpg") center center / cover; }
        .att-03-2 { background: url("../images/img/top/img_04-2.jpg") center center / cover; }
        .att-04-2 { background: url("../images/img/top/img_05-2.jpg") center center / cover; }

        .att-text {
        padding-top:4rem;
        display: flex;
        align-items: flex-start;
        gap:4.5rem;
        }
        .att-text .inner {
        width: -moz-fit-content;
        width: fit-content;
        }
        @media screen and (max-width:1215px) {
        .att-sub { margin-top:-20%; }
        .att-text { padding-top:3rem; }
        }
        @media screen and (max-width:1024px) {
        .att-text { display: block; }
        .att-text .inner:first-child { padding-bottom:1.5rem; }
        .att-img { border-radius: 10px; }
        .att-sub { border-radius: 10px; }
        }
        @media screen and (max-width:767px) {
        .att-img { width:120%; padding-bottom:70%; border-radius:8px; }
        .att-img.left { margin-left:-20%; }
        .att-text { padding-bottom:3rem; }
        .att-sub { padding-bottom:62%; margin-top:0; border-radius:8px; }
        }


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

        .banner-wrap {
        width:100%;
        position: relative;
        background: url("../images/parts/banner-bg.png") 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%;
        height:70px;
        line-height:1;
        text-align:center;
        color:var(--white-color);
        background:#7E7966;
        font-weight:500;
        box-sizing: border-box;
        overflow: hidden;
        font-size:1rem;
        border-radius:5px;
        white-space: nowrap;
        text-decoration:none !important;
        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;
        }
        .more-reservation a:hover { opacity:1; }
        .more-reservation a:hover:after { left: 0; width: 100%; }
        
        .more-phone {
        position: relative;
        width:100%;
        }
        .more-phone a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content:center;
        gap: 0.5rem;
        width:100%;
        height:70px;
        line-height:1;
        text-align:center;
        color:var(--white-color);
        background:#B59530;
        font-weight:500;
        box-sizing: border-box;
        overflow: hidden;
        font-size:20px;
        border-radius:5px;
        white-space: nowrap;
        text-decoration:none !important;
        z-index: 1;
        letter-spacing: 0em;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .more-phone 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-phone a i {
        width:1em;
        height:1em;
        background: url("../images/parts/icon-calendar.svg") center center / cover;
        }
        .more-phone a:hover { opacity:1; }
        .more-phone a:hover:after { left: 0; width: 100%; }



        @media screen and (max-width:1024px) {
        .more-reservation a { height:64px; }
        .more-phone a { height:64px; }
        }
        @media screen and (max-width:767px) {
        .more-reservation a { height:60px; }
        .more-phone a { height:60px; }
        }

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

       下層 ヘッダー

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

.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%; }
        
        .plan        { background: url("../images/img/plan/header.jpg") center center / cover; }
        .business    { background: url("../images/img/business/header.jpg") center center / cover; }
        .facilities  { background: url("../images/img/facilities/header.jpg") center center / cover; }
        .cuisine     { background: url("../images/img/cuisine/header.jpg") center center / cover; }
        .access      { background: url("../images/img/access/header.jpg") center center / cover; }


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


.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: 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: left;
        line-height:110%;
        font-weight:600;
        letter-spacing: .05em;
        color:#FFF;
        z-index: 2;
        }

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

       PLAN

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

        .more-btn {
        position: relative;
        width:100%;
        }
        .more-btn a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content:center;
        gap: 0.5rem;
        width:100%;
        height:70px;
        line-height:1;
        text-align:center;
        color:var(--white-color);
        background:#4F453F;
        font-weight:400;
        box-sizing: border-box;
        overflow: hidden;
        font-size:1rem;
        border-radius:5px;
        white-space: nowrap;
        text-decoration:none !important;
        z-index: 1;
        letter-spacing: 0em;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .more-btn 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-btn a i {
        width:1em;
        height:1em;
        background: url("../images/parts/icon-calendar.svg") center center / cover;
        }
        .more-btn a:hover { opacity:1; }
        .more-btn a:hover:after { left: 0; width: 100%; }


        @media screen and (max-width:1024px) {
        .more-btn a { height:64px; }
        }
        @media screen and (max-width:767px) {
        .more-btn a { height:60px; }
        }






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

       BUSINESS

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

        
        .business-icon {
        width:30%;
        max-width:90px;
        margin-inline:auto;
        padding-bottom:1.5rem;
        }
        .gray-wrap p {
        font-size:15px;
        line-height: 150%;
        }
        @media screen and (max-width:1024px) {
        
        
        }
        @media screen and (max-width:767px) {
        .business-icon { max-width:60px; }
        
        }

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

       CUISINE

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

        .shop-icon {
        width:30px;
        }
        

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

       ACCESS

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

        .tags {
        display: inline-block;
        line-height: 1;
        padding:.5em 1em;
        background: #4F453F;
        color:#F9F9F2;
        font-weight:500;
        border-radius: 6px;
        margin-bottom: .5rem;
        }