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

        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:100px; }
        .hero-wrap:after { display: none; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:80px; }
        }

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

       Movie

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

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        z-index: 0;
        }
        .movie {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
        overflow: hidden;
        }
        .video-js {
        height: 100% !important;
        }
        .video-js .vjs-tech { 
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        }

        /*=================================================
        すべてアスペクト比固定の場合（movieサイズのまま）　top-movie付与
        ==================================================*/

        .movie_inner {
        position: relative;
        width: 100%;
		height: auto;
        overflow: hidden;
        z-index: 0;
        top: 0;
        }
        .movie_inner video { object-fit: cover; }
		.top-movie{ max-height:100vh; }

        .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-height:0; height:100%; }
        .movie.top-movie:before { content:""; display: block; position: relative; top:0; left:0;
        padding-top:56.25%;
        }

        @media screen and (max-width: 1024px) {
        .movie.top-movie:before { padding-top:60%; }
        .top-movie{ max-height:100vh; }
        }
        @media screen and (max-width: 767px) {
        .movie.top-movie:before { padding-top:60%; }
        }

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

       背景

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

.border-box {
        position: relative;
        padding:80px;
        border:5px solid #707070;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 0;
        }
        .border-box:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-5%;
        right:-5%;
        width:300px;
        height:300px;
        background: url("../images/parts/uma.svg") center center / cover;
        z-index: -1;
        opacity: .4;
        }

.border-box-s {
        position: relative;
        padding:60px;
        border:1px solid #707070;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 0;
        }

.border-wrap {
        position: relative;
        padding:36px;
        border:1px solid #707070;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 0;
        }

.bg-gray { background: #F4F4F4; }





        @media screen and (max-width:1350px) {
        .border-box { padding:6vw; }
        .border-box:after { width:20vw; height:20vw; }
        }
        @media screen and (max-width:1200px) {
        .border-wrap { padding:3vw; }
        }
        @media screen and (max-width:1024px) {
        .border-box { padding:7vw; }
        .border-box-s { padding:7vw; }
        .border-wrap { padding:3vw; }
        }
        @media screen and (max-width:767px) {
        .border-box { padding:8vw; }
        .border-box:after { width:40vw; height:40vw; opacity: .2; right:-15%; }
        .border-wrap { padding:6vw; }
        }

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

        タイトル / テキスト

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

.white { color:var(--white-color) !important; }
.green { color:#718D4C; }
.dark { color:#385931; }
.light { color:#C5CB6B;}

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

.under-title {
        padding-bottom:.35rem;
        border-bottom:2px solid rgb(0 0 0 / .6);
        }
        .under-title-w {
        padding-bottom:.35rem;
        border-bottom:2px solid rgb(255 255 255 / .6);
        }
        .dotted-title {
        padding-bottom:.5rem;
        border-bottom:2px dotted rgb(47 49 50 / .6);
        }

.bar-title {
        padding-top:90px;
        position: relative;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:50%;
        width:1px;
        height:75px;
        background:#707070;
        z-index: -1;
        }
        .center.bar-title:after { left:50%; translate:-50%; }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:50%;
        width:100%;
        translate:0 -50%;
        height:1px;
        background:var(--font-color);
        margin-left:1em;
        z-index: -1;
        }

.black-label {
        background: #494B4B;
        color:#FFF;
        line-height: 1;
        padding:1em;
        box-sizing: border-box;
        }

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

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

       トップページ

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

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

        .greeting-img {
        position: relative;
        width:calc(100% + 7vw);
        z-index: 0;
        }
        .greeting-img2 {
        position: relative;
        padding:30% 8% 0 25%;
        box-sizing: border-box;
        z-index: 0;
        }
        .greeting-img2:after {
        content:"";
        display: block;
        position: absolute;
        top:-5%;
        left:-10%;
        width:65%;
        height:0;
        padding-bottom:65%;
        background:  url("../images/parts/uma.svg") center center / cover;
        z-index: 1;
        }
        .greeting-img3 {
        position: relative;
        padding:30% 10% 0 30%;
        box-sizing: border-box;
        z-index: 0;
        }
        .greeting-title {
        padding-top:20%;
        padding-bottom:4rem;
        }
        @media screen and (min-width:1640px) {
        .greeting-img { width:calc(50vw - 70px); max-width:1200px; }
        }
        @media screen and (max-width:1024px) {
        .greeting-title { padding-top:0%; padding-bottom:3rem; }
        .greeting-img3 { padding-top:20%; }
        }
        @media screen and (max-width:767px) {
        .greeting-img { margin-left:-7.5vw; }
        .greeting-img2 { padding: 0% 0% 0 45%; margin-top: -10%; margin-right: -6%; }
        .greeting-img2:after { top: 25%; left: -6%; width: 50%; padding-bottom: 50%; }
        .greeting-img3 { padding:20% 30% 0 10%; }
        }

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

        .att-img {
        position: relative;
        width:86.5%;
        height:0;
        padding-bottom:700px;
        z-index: 0;
        }
        .att-01 { background: url("../images/img/top/img_02.jpg") center center / cover; }
        .att-02-1 { background: url("../images/img/top/img_03-1.jpg") center center / cover; }
        .att-02-2 { background: url("../images/img/top/img_03-2.jpg") center center / cover; }

        .att-img-wrap {
        position: relative;
        width:86.5%;
        height:auto;
        z-index: 0;
        }
        .att-img-wrap.right { margin-left:13.5%; }
        .att-sub {
        width:100%;
        height:0;
        padding-bottom:700px;
        }
        .att-03-1 { background: url("../images/img/top/img_04-1.jpg") center center / cover; }
        .att-03-2 { background: url("../images/img/top/img_04-2.jpg") center center / cover; }

        @media screen and (min-width:2000px) {
        .att-img { padding-bottom:35%; }
        .att-sub { padding-bottom:70%; }
        }
        @media screen and (max-width:1400px) {
        .att-img { width:92.5%; max-width:1200px; padding-bottom:50%; }
        .att-img-wrap.right { margin-left:7.5%; }
        .att-img-wrap { width:92.5%; max-width:1200px; }
        .att-sub { padding-bottom:100%; }
        }
        @media screen and (max-width:767px) {
        .att-img { padding-bottom:70%; }
        .att-sub { padding-bottom:140%; }
        }

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

        .banner-wrap {
        width:100%;
        position: relative;
        overflow: hidden;
        color:#F9F6F2;
        z-index: 1;
        }
        .banner-wrap a {
        display: block;
        overflow: hidden;
        color:#F9F6F2;
        }
        .banner-img {
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        width:100%;
        height:450px;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        }
        .banner-text {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:80%;
        max-width:600px;
        text-align: center;
        box-sizing: border-box;
        z-index: 1;
        }
        .more-reservation {
        width:100%;
        height:76px;
        line-height:76px;
        text-align: center;
        color:#F9F6F2;
        background:#A1351A;
        border-radius:2px;
        box-sizing: border-box;
        overflow: hidden;
        font-size:21px;
        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;
        box-shadow: 0 5px 15px rgb(0 0 0 / .3);
        }
        .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:rgb(255 255 255 / .3);
        }      
        .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:400px; }
        .more-reservation { height:72px; line-height:72px; font-size:19px; }
        }

        @media screen and (max-width:1024px) {
        .banner-img { height:340px; }
        .more-reservation { height:64px; line-height:64px; }
        }
        @media screen and (max-width:767px) {
        .banner-img { height:300px; }
        .banner-text { width:86%; max-width:450px; }
        .more-reservation { height:54px; line-height:54px; font-size:16px;  }
        }

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

       下層 ヘッダー

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

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









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

       Gtranslate 英語時　ナビ縦書きを横書きに

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

.translated-ltr .normal-main-nav li{margin-bottom:0; writing-mode:inherit; text-align: right; float: none; }
.translated-ltr .normal-main-nav { width:auto; }
.translated-ltr .g-translate-wrap { top:295px; }
.translated-ltr .normal-main-nav li a:hover {margin-top:inherit;}
.translated-ltr .fixed-main-nav{width:60%; top:15px;}

@media only screen and (max-width:768px) {

}