@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        margin-top:0px;
        z-index: 1;
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:90px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:90px; }
        }

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

       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:75%; }
        }

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

       背景

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

.border-box {
        border:1px solid rgb(0 0 0 / .6);
        padding:80px;
        box-sizing: border-box;
        background: #F3F3F3;
        }
        .border-box-m {
        border:6px solid #C6BBA8;
        border-radius: 10px;
        padding:8%;
        box-sizing: border-box;
        background: rgb(255 255 255 / .5);
        }
        .border-box-s {
        border:1px solid rgb(0 0 0 / .6);
        padding:80px;
        box-sizing: border-box;
        }

.white-box {
        background: #FFF;
        border-radius: 15px;
        padding:60px;
        box-sizing: border-box;
        color:#2B2C2C;
        }
.bg-light {
        background: rgb(255 255 255 / .2);
        }
        .bg-light2 {
        background: rgb(255 255 255 / .15);
        }
.white-wrap {
        background: #FFF;
        border-radius: 15px;
        padding:100px;
        box-sizing: border-box;
        color:#2B2C2C;
        }
        
        @media screen and (max-width:1800px) {
        .border-box { padding:4.5vw; }
        .border-box-s { padding:4.5vw; }
        .white-box { padding:3.35vw; }
        .white-wrap { padding:5.55vw; }
        }
        @media screen and (max-width:1350px) {
        
        }
        @media screen and (max-width:1024px) {
        .border-box { padding:4vw; }
        .border-box-m { padding:2.5rem; }
        .border-box-s { padding:4vw; }
        
        }
        @media screen and (max-width:767px) {
        .border-box { padding:6.5vw; }
        .border-box-m { padding:2rem 1.5rem; }
        .border-box-s { padding:6.5vw; }
        .white-box { padding:7.5vw; }
        }

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

        タイトル / テキスト

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

.white { color:var(--white-color) !important; }
.green { color:#3F9877; }
        a .green, .green a { color:#3F9877; }
.blue { color:#1047AF; }

.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:1rem;
        position: relative;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:50px;
        height:3px;
        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%;
        height:1px;
        background:#333131;
        margin-left:1rem;
        z-index: -1;
        }

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

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

       トップページ

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

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

        .top-news-wrap {
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        padding:.75em 0;
        background: rgb(0 0 0 / .7);
        z-index: 1;
        }
        .top-news-list li {
        position: relative;
        font-size:1rem;
        line-height: 170%;
        padding: .75rem 0;
        border-bottom:1px dotted rgb(13 59 102 / .5);
        }
        .top-news-list li:last-child { border-bottom:none; }
        .top-news-list li a {
        position: relative;
        font-weight:400;
        color:var(--white-color);
        box-sizing: border-box;
        transition: all 0.3s ease;
        cursor: pointer;
        }
        .top-news-list li .date {
        font-size:12px;
        margin-right:30px;
        color:var(--white-color);
        opacity:.7;
        }
        .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: 7px 8px 8px;
        color: #F6F6F6;
        background:#0D3B66;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 500;
        line-height: 100%;
        margin: 0 12px 0 0 ;
        }
        @media screen and (max-width:767px) {
        .top-news-wrap { position: relative; bottom:auto;  background: #39594D; padding:1.5rem 0 1rem; }
        .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-img-wrap {
        position: relative;
        z-index: 0;
        }
        .greeting-img-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        right:10%;
        translate:0 -50%;
        width:120%;
        height:116%;
        background: rgb(255 255 255 / .2);
        z-index: -1;
        }
        .greeting-title {
        padding-bottom:100px;
        }
        .greeting-text {
        padding:10% 0 0 10%;
        box-sizing: border-box;
        }
        .greeting-sub {
        padding-left:10%;
        box-sizing: border-box;
        margin-top:-15%;
        }
        
        @media screen and (max-width:1408px) {
        .greeting-main { padding-bottom:3rem; }
        .greeting-title { padding-bottom:0; }
        .greeting-text { padding:1rem 0 0 0; }
        .greeting-sub { margin-top:0%; padding-left:15%; }
        }
        @media screen and (max-width:1024px) {
        .greeting-sub { padding-left:0; }
        }
        @media screen and (max-width:767px) {
        .greeting-main { padding-bottom:0; }
        .greeting-title { padding:3rem 0; }
        .greeting-sub { display: none;  }
        .greeting-text { padding:0; }
        .owner-img { max-width: 160px; margin-inline:auto; }
        }

        /*=================================================
                ATTRACTION
        ==================================================*/

        .after-white {
        position: relative;
        padding:2.5vw 0;
        color:#2B2C2C;
        box-sizing: border-box;
        z-index: 0;
        }
        .after-white:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        background: #FFF;
        width:95%;
        height:100%;
        z-index: -1;
        }
        .after-white.left:after { left:0; border-radius: 0 6px 6px 0; }
        .after-white.right:after { right:0; border-radius: 6px 0 0 6px; }

        .att-wrap { width:120%; }
        .left .att-wrap { margin-left:-20%; }

        @media screen and (max-width:1800px) {
        .after-white:after { width:97%; }
        .att-wrap { width:110%; }
        .left .att-wrap { margin-left:-10%; }
        }
        @media screen and (max-width:1700px) {
        .after-white:after { width:98%; }
        }
        @media screen and (max-width:1600px) {
        .after-white { padding-top:40px; padding-bottom:40px; }
        .after-white.left { padding-right:2.5vw; }
        .after-white.right { padding-left:2.5vw; }
        .att-wrap { width:100%; }
        .left .att-wrap { margin-left:0%; }
        }
        @media screen and (max-width:1024px) {
        .after-white { padding-top:5vw; padding-bottom:5vw; }
        }
        @media screen and (max-width:767px) {
        .after-white { padding-top:7.5vw; padding-bottom:7.5vw; }
        .after-white.left { padding-right:3.5vw; }
        .after-white.right { padding-left:3.5vw; }
        .after-white:after { width:96%; }
        }

        /*=================================================
                BLOG WPサムネ
        ==================================================*/

        .blog-title {
        position: relative;
        z-index: 0;
        }
        .blog-title p {
        position: absolute;
        top:-.5rem;
        right:0;
        text-align: right;
        z-index: -1;
        }

        .blog-list-item figure.img-3by2 {
        background: url("../images/parts/thumb.jpg") center center / cover;
        }
        .blog-list-title {
        font-size:15px;
        line-height: 160%;
        }
        .blog-list-date {
        font-size:.75rem;
        font-weight:400;
        text-align: right;
        line-height: 180%;
        }
        .blog-list-content {
        padding:.5rem 0 0;
        box-sizing: border-box;
        }

        @media screen and (max-width:1024px) {
        .blog-list-title { font-size:14px; }
        .top-blog-list-wrap section:nth-child(4) { display: none; }
        }

        /*=================================================
                BLOG WPサムネ
        ==================================================*/

        .sns-banner {
        position: relative;
        line-height: 1;
        }
        .sns-banner a {
        display: block;
        position: relative;
        width:100%;
        height:0;
        padding-bottom:34%;
        border-radius: 6px;
        color:#FFF;
        line-height: 1;
        }
        .sns-banner.sns-instagram a { background: url("../images/parts/bg-instagram.jpg") center center / cover; }
        .sns-banner.sns-line a { background: url("../images/parts/bg-line.jpg") center center / cover; }
        .sns-banner.sns-blog a { background: url("../images/parts/bg-blog.jpg") center center / cover; }

        .sns-inner {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:86%;
        text-align: center;
        line-height: 135%;
        font-size:1.125rem;
        }
        .sns-icon {
        width:30px;
        height:30px;
        margin-inline:auto;
        margin-bottom:.75rem;
        }
        .insta-icon { background: url("../images/parts/icon-instagram.svg") center center / cover; }
        .line-icon { background: url("../images/parts/icon-line.svg") center center / cover; }
        .blog-icon { background: url("../images/parts/icon-blog.svg") center center / cover; }

        @media screen and (max-width:1350px) {
        .sns-icon { width:25px; height:25px; margin-bottom:.5rem; }
        }
        @media screen and (max-width:1024px) {
        .sns-icon { width:21px; height:21px; margin-bottom:.25rem; }
        }





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

        .banner-wrap {
        width:100%;
        position: relative;
        box-sizing: border-box;
        z-index: 1;
        }
        .banner-wrap a {
        position: relative;
        display: block;
        z-index: 0;
        }
        .banner-wrap a:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgb(0 0 0 / .0);
        z-index:0;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        }
        .banner-img {
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        width:100%;
        height:600px;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        }
        .banner-text {
        position: absolute;
        left:5%;
        top:50%;
        translate:0 -50%;
        width:95%;
        height:auto;
        text-align: left;
        box-sizing: border-box;
        z-index: 1;
        }
        .more-reservation {
        position:relative;
        width:100%;
        height:auto;
        line-height:1;
        text-align: left;
        font-weight:400;
        font-size:24px;
        padding-right:1.5em;
        color:#FFF;
        box-sizing: border-box;
        z-index: 1;
        display: inline-block;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        }
        .more-reservation:after {
        content:"";
        display: inline-block;
        position: absolute;
        top:50%;
        margin-left:.75em;
        width:110px;
        height:1px;
        background:#FFF;
        z-index: 0;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
        }
        
        .banner-wrap a:hover .more-reservation { opacity:1;  }
        .banner-wrap a:hover .more-reservation:after { width:10px; }
        .banner-wrap a:hover:after { background: rgb(0 0 0 / .4); }


        @media screen and (max-width:1350px) {
        .banner-img { height:550px; }
        .more-reservation { font-size:22px; }
        }
        @media screen and (max-width:1024px) {
        .banner-img { height:450px; }
        .more-reservation { font-size:21px; }
        }
        @media screen and (max-width:767px) {
        .banner-img { height:400px; }
        .more-reservation { font-size:18px; }
        .more-reservation:after { width:60px; }
        .banner-text { left:10%; }
        .banner-wrap .f120 { font-size:45px; }
        }

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

       下層 ヘッダー

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

.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:calc(100vh - 80px);
        overflow: hidden;
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:40%;
        height:0;
        width:100%;
        }

        .cuisine     { background: url("../images/img/cuisine/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:70%; height:0; }
        }
        @media screen and (max-width: 767px) {
        .page-header:before { padding-bottom:70%; 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: 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: left;
        line-height:110%;
        font-weight:600;
        letter-spacing: .05em;
        color:#FFF;
        z-index: 2;
        }

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

       FACILITIES

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

        /*=================================================
                GRID
        ==================================================*/


        .grid-container {
        display: grid;
        gap: 6px;
        grid-template-columns: 1fr 1fr 1fr 1fr; /* 4カラムにセット */
        grid-template-rows: auto;
        }
        .grid-item { height:100%; }
        .grid-item img {
        height:100%;
        width:100%;
        object-fit: cover;
        }
        .grid-item:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        }
        .grid-item:nth-child(4) {
        grid-column: 3 / 5;
        grid-row: 2 / 4;
        }
        .grid-item:nth-child(5) {
        grid-column: 1 / 2;
        grid-row: 3 / 5;
        }
        .grid-item:nth-child(11) {
        grid-column: 2 / 4;
        grid-row: 5 / 7;
        }
        .grid-item:nth-child(14) {
        grid-column: 4 / 5;
        grid-row: 6 / 8;
        }
        .grid-item:nth-child(22) {
        grid-column: 1 / 3;
        grid-row: 9 / 11;
        }
        .grid-item:nth-child(25) {
        grid-column: 3 / 5;
        grid-row: 10 / 12;
        }
        .grid-item:nth-child(28) {
        grid-column: 1 / 2;
        grid-row: 12 / 14;
        }
        .grid-item:nth-child(32) {
        grid-column: 2 / 4;
        grid-row: 13 / 15;
        }
        .grid-item:nth-child(35) {
        grid-column: 4 / 5;
        grid-row: 14 / 16;
        }
        .grid-item:nth-child(43) {
        grid-column: 1 / 3;
        grid-row: 17 / 19;
        }
        .grid-item:nth-child(46) {
        grid-column: 3 / 5;
        grid-row: 18 / 20;
        }
        .grid-item:nth-child(49) {
        grid-column: 1 / 2;
        grid-row: 20 / 22;
        }
        .grid-item:nth-child(53) {
        grid-column: 2 / 4;
        grid-row: 21 / 23;
        }
        .grid-item:nth-child(56) {
        grid-column: 4 / 5;
        grid-row: 22 / 24;
        }
        .grid-container.type-b .grid-item:nth-child(18) {
        grid-column: 1 / 3;
        grid-row: 8 / 10;
        }
        .grid-container.type-b .grid-item:nth-child(19) {
        grid-column: 3 / 5;
        grid-row: 8 / 10;
        }
        
        
        @media (max-width: 1024px){
        .grid-container { gap: 5px; }
        }
        @media (max-width: 767px){
        .grid-container { grid-template-columns:1fr 1fr; gap: 4px; }
        .grid-item:nth-child(1) { grid-column:  1 / 3; grid-row: auto; }
        .grid-item:nth-child(4) { grid-column:inherit; grid-row: auto; }
        .grid-item:nth-child(5) { grid-column: inherit; grid-row: auto; }
        
        .grid-item:nth-child(4) { grid-column:  1 / 3; }
        .grid-item:nth-child(7) { grid-column:  1 / 3; }
        }

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

       ACCESS

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

        .fukidashi-title-wrap {
        position: relative;
        padding-top:50px;
        z-index: 0;
        }
        .fukidashi-wrap {
        position: absolute;
        bottom:55px;
        right:2%;
        width:500px;
        z-index: 1;
        }
        
        .fukidashi-face {
        position: absolute;
        right:0;
        top: 50%;
        translate: 0 -50%;
        width:120px;
        z-index: 0;
        }
        .fukidashi {
        position: relative;
        display: block;
        padding: 10px 36px 13px 20px;
        box-sizing: border-box;
        text-align: center;
        color: #333;
        width: calc(100% - 120px);
        }
        .fukidashi::after {
        content: "";
        display: block;
        position: absolute;
        bottom:0;
        right:0;
        width:100%;
        height:0;
        padding-top:10%;
        background: url("../images/parts/fukidashi.svg") right top /cover;
        z-index: -1;
        }
        .fukidashi-label {
        position: relative;
        z-index: 0;
        }
        .green-label {
        background: #296F55;
        color:#FFF;
        padding:1.25rem 1.75rem;
        box-sizing: border-box;
        line-height: 140%;
        border-radius: 6px;
        }
        .fukidashi p { line-height: 150%; }

        .fukidashi-wrap.relative { position: relative; width:100%; right:0; bottom: auto; top:0; }
        .fukidashi-wrap.relative .fukidashi-face { top:0; translate:0; width:100px; }
        .fukidashi-wrap.relative .fukidashi { width: calc(100% - 100px); padding: 10px 36px 16px 20px; }
        .fukidashi-wrap.relative .fukidashi p { font-size:.8725rem; }

        @media screen and (max-width:1024px) {
        .fukidashi-wrap { width:450px; }
        .fukidashi-face { width:100px; }
        .fukidashi { width: calc(100% - 100px); padding: 10px 30px 12px 18px; }
        .fukidashi-wrap.relative .fukidashi-face { top:0; translate:0; width:80px; }
        .fukidashi-wrap.relative .fukidashi { width: calc(100% - 80px); padding: 10px 36px 12px 20px; }
        }

        @media screen and (max-width:767px) {
        .fukidashi-title-wrap { padding-top:0; }
        .fukidashi-wrap { position: relative; right:0; width:100%; padding-bottom:1rem; bottom:auto; top:0; }
        .fukidashi-face { width:70px; }
        .fukidashi { width: calc(100% - 70px); padding: 10px 20px 11px 15px; }
        .fukidashi-wrap.relative .fukidashi-face { top:0; translate:0; width:60px; }
        .fukidashi-wrap.relative .fukidashi { width: calc(100% - 60px); padding: 10px 36px 11px 20px; }
        .fukidashi-wrap.relative .fukidashi p { font-size:14px; }
        }