@charset "UTF-8";
/*==================================================================================================

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        z-index: 6;
        }
        .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, .5) 0%, rgba(0, 0, 0, 0) 100%);
        }

        @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 / .3);
        padding:6%;
        box-sizing: border-box;
        }
        .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:4px solid rgb(255 255 255 / .4);
        padding:4%;
        box-sizing: border-box;
        }

.bg-gray {
        background: #f6f5f5;
        }
.bg-sea {
        background: #0E3653 url("../images/parts/sea.jpg") top center repeat-x;
        }
.gray-box {
        padding:6%;
        background: #f6f5f5;
        box-sizing: border-box;
        }
        @media screen and (max-width:1024px) {
        .border-box  {  }
        .border-box-m { padding:2.5rem; }
        .border-box-s { padding:5%; }
        
        }
        @media screen and (max-width:767px) {
        .border-box  { padding:9.5%; }
        .border-box-m { padding:2rem 1.5rem; }
        .border-box-s { padding:9.5%; }
        .gray-box { padding:10%; }
        }

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

        タイトル / テキスト

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

.white { color:#F9F6F0 !important; }
.white .en { color:#F9F6F0; }
.red { color:#ff363d;}
.pink { color:#E09589; }
.blue { color:#0E3653; }


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

.under-title {
        padding-bottom:.15rem;
        border-bottom:1px solid rgb(0 0 0 / .6);
        }
.bar-title {
        position: relative;
        padding-top:18px;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:46px;
        height:2px;
        background:#B69B5C;
        }
        .center.bar-title:after {
        left:50%;
        translate:-50%;
        }
        .bg-banner .bar-title:after { background: #FFF; }
        @media screen and (max-width:1024px) {
        .bar-title { padding-top:15px; }
        }
        @media screen and (max-width:767px) {
        .bar-title { padding-top:10px; }
        .bar-title.bar-sp-center:after { left:50%; translate:-50%; }
        }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        bottom:.75em;
        width:100%;
        height:1px;
        background: #2A9FB1;
        margin-left:1rem;
        z-index: -1;
        }


        @media screen and (max-width:1024px) {
        
        }
        @media screen and (max-width:767px) {
        .half-lead:after { width:2.5em; }
        .short-lead { padding:0 2.5em 0; }
        .short-lead:before, .short-lead:after { width:1.5em; }
        .short-lead.sp-lead-none { padding:0; }
        .short-lead.sp-lead-none:before, .short-lead.sp-lead-none:after { display: none; }
        }

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

       トップページ

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

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

        .greeting-img1 {
        width:100%;
        padding:0 0 0 20%;
        box-sizing: border-box;
        }
        .greeting-img2 {
        width:100%;
        padding:15% 34% 0 10%;
        box-sizing: border-box;
        }
        .greeting-text {
        padding:5% 0 0 33%;
        box-sizing: border-box;
        }
        
        @media screen and (max-width:1350px) {
        .greeting-text { padding:5% 0 0 24%; }
        }
        @media screen and (max-width:1024px) {
        .greeting-text { padding:0%; }
        }
        @media screen and (max-width:767px) {
        .greeting-img { margin-left:-10%; }
        .greeting-img1 { padding:0 0 0 30%; margin-left:10%; }
        .greeting-img2 { padding:4rem 15% 0 0%; }
        }

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

        .att-img {
        width:100%;
        height:0;
        padding-bottom:95%;
        }
        .att-01 { background: url("../images/img/top/img_02.jpg") center center / cover; }
        .att-02 { background: url("../images/img/top/img_03.jpg") center center / cover; }
        .att-03 { background: url("../images/img/top/img_04.jpg") center center / cover; }

        @media screen and (max-width:1240px) {
        .att-img { padding-bottom:100%; }
        }
        @media screen and (max-width:1024px) {
        .att-img { padding-bottom:440px; }
        }
        @media screen and (max-width:767px) {
        .att-img { padding-bottom:95%; width:120%; margin-left:-10%; }
        }

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

        .banner-wrap {
        width:100%;
        position: relative;
        overflow: hidden;
        z-index: 1;
        }
        .banner-wrap a {
        display: block;
        overflow: hidden;
        color:#FFF;
        }
        .banner-wrap a:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgb(0 0 0 / .2);
        transition: all 0.3s ease;
        z-index: 0;
        }
        .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;
        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:72px;
        line-height:70px;
        text-align: center;
        color:#FFF;
        background: none;
        border:1px solid #FFF;
        border-radius:0px;
        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;
        transition: all 0.3s ease;
        }
        .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:#E09589;
        }      
        .banner-wrap a:hover .more-reservation { opacity:1; border:1px solid #E09589; }
        .banner-wrap a:hover .more-reservation:after { left:0; width:100%; }

        .banner-wrap a:hover:after { background: rgb(0 0 0 / .6); }

        @media screen and (max-width: 1350px) {
        .banner-img { height:520px; }
        .more-reservation { height:72px; line-height:72px; font-size:18px; }
        }

        @media screen and (max-width:1024px) {
        .banner-img { height:420px; }
        .more-reservation { height:64px; line-height:64px; }
        }
        @media screen and (max-width:767px) {
        .banner-img { height:360px; }
        .banner-text { width:86%; max-width:450px; }
        .more-reservation { height:58px; line-height:58px; 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:45%;
        height:0;
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        height:0;
        padding-bottom:30%;
        width:100%;
        }

        .restaurant   { background: url("../images/img/restaurant/header.jpg") center center / cover; }
        .rooms        { background: url("../images/img/rooms/header.jpg") center center / cover; }
        .access       { background: url("../images/img/access/header.jpg") center center / cover; }
        .faq          { background: url("../images/img/faq/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; }
        }
        @media screen and (max-width:767px) {
        .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:34px 40px;
        color:#FFF;
        width:100%;
        background:rgb(0 0 0 / .6);
        box-sizing: border-box;
        z-index:1;
        }
        .page-title h1 {
        position: relative;
        text-align: center;
        line-height:110%;
        font-weight:500;
        color:#FFF;
        z-index: 2;
        }
        @media screen and (max-width:1024px) {
        .page-title { padding:24px 30px; }
        }
        @media screen and (max-width:767px) {
        .page-title { padding:18px 24px; }
        }



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

       RESTAURANT

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

        .restaurant-text1 {
        padding-top:15%;
        max-width:480px;
        }
        .restaurant-text2 {
        padding:12% 14% 12% 0;
        box-sizing: border-box;
        }
        .restaurant-text3 {
        padding:0 5% 12% 10%;
        box-sizing: border-box;
        }
        .restaurant-img2 {
        position: relative;
        margin-top:-60%;
        padding:0 20% 12% 0;
        box-sizing: border-box;
        }
        .restaurant-img3 {
        padding:0 19% 0 18%;
        box-sizing: border-box;
        }
        .restaurant-img4 {
        padding:0 5% 0 20%;
        box-sizing: border-box;
        }
        
        .staff-wrap2 {
        padding-top:30%;
        }
        .slash {
        position: relative;
        top: 50%;
        translate: 0 -50%;
        width: 100%;
        height: 35vw;
        max-height: 450px;
        z-index: 0;
        }
        .slash:after {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:1px;
        height:60%;
        background: #424242;
        rotate:20deg;
        }
        @media screen and (max-width:1350px) {
        .restaurant-img2 { margin-top:-40%; }
        }
        @media screen and (max-width:1200px) {
        .restaurant-img2 { margin-top:-30%; }
        }
        @media screen and (max-width:1100px) {
        .restaurant-img2 { margin-top:-20%; }
        }
        @media screen and (max-width:1024px) {
        .restaurant-text1 { padding-top:0; padding-bottom:4rem; }
        .restaurant-text2 { padding:4rem 0; }
        .restaurant-text3 { padding:4rem 0; }
        .restaurant-img2 { margin-top:0%; padding: 0 20% 0 0; }
        .staff-wrap2 { padding:0; }
        .slash { height:200px; }
        .slash:after { rotate:60deg; height:70%; }
        }
        @media screen and (max-width:767px) {
        .restaurant-img1 { position: relative; margin-left:-10%; width:110%; padding-bottom:4rem; }
        .restaurant-img2 { padding: 0 0% 0 30%; }
        .restaurant-img3 { padding: 0 20% 0 0; }
        .restaurant-img4 { padding: 0 0% 0 20%; }
        }


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

       ROOMS

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

        .rooms-text1 {
        padding-top:15%;
        max-width:480px;
        }
        .rooms-text2 {
        padding:12% 0 12% 14%;
        box-sizing: border-box;
        }
        .rooms-img2 {
        position: relative;
        padding:0 0 0 20%;
        box-sizing: border-box;
        }
        .rooms-img3 {
        position: relative;
        padding:0 0% 10% 68%;
        box-sizing: border-box;
        }
        .rooms-img4 {
        position: absolute;
        bottom:0;
        left:0;
        width:50%;
        }
        .img-wrap { position: relative;}

        
        @media screen and (max-width:1200px) {
        .rooms-img2 { padding:20% 0 0 20%; }
        }
        @media screen and (max-width:1024px) {
        .rooms-text1 { padding-top:0; padding-bottom:4rem; }
        .rooms-text2 { padding:4rem 0; }
        }
        @media screen and (max-width:767px) {
        .rooms-img1.img-fit { position: relative; margin-left:-10%; width:110%; padding-bottom:4rem; height:auto; }
        .rooms-img2 { padding: 0 0% 0 30%; }
        .rooms-img3 { padding: 0 60% 20% 0; }
        .rooms-img4 { left:auto; right:-10%; width:60%; }
        }





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

       FAQ

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

        .faq-q {
        position: relative;
        font-size: 1rem;
        line-height: 180%;
        background: #f6f5f5;
        box-sizing: border-box;
        border-radius: 0px;
        color:#404040;
        padding: 1.25rem 1.5rem 1.25rem 4rem;
        /* アコーディオンのみ
        cursor: pointer;
        */
        }
        .faq-q:before {
        content: "Q";
        font-family: "Cormorant Garamond", serif;
        font-weight: 400;
        position: absolute;
        color:#404040;
        top: 1.1rem;
        left: 1.25rem;
        line-height: 100%;
        font-size: 1.8rem;
        }
        /* アコーディオンのみ
        .faq-q h3 { padding-right:1.5rem; }
        */
        .faq-a {
        position: relative;
        font-size: 1rem;
        line-height: 180%;
        box-sizing: border-box;
        padding: 1.25rem 1.5rem 1.25rem 4rem;
        }
        .faq-a:before {
        content: "A";
        font-family: "Cormorant Garamond", serif;
        font-weight: 400;
        position: absolute;
        color:#42403B;
        top: 1.1rem;
        left: 1.25rem;
        line-height: 100%;
        font-size: 1.8rem;
        }

  
        .faq-q { padding:0.75rem 1.5rem; }
        .faq-q:before { font-size: 1.25rem; left:1rem; top:.85rem; opacity:.6; }
        .faq-q h3 { padding-left:1.5rem; }
        .faq-a { padding: 0.75rem 0 .75rem 0; }
        .faq-a:before { display: none; }
        .faq-a p { padding-left:0; }
        }


.index_insta{text-align:center;}
.index_insta .banner{width:350px; margin:6rem auto 2rem auto; padding:1rem 2rem 1rem 4rem ; font-size:26px; text-align: center; color:#fff; background:url(../images/parts/insta_logo.svg) no-repeat left 1rem center / 40px, #e09589; display: block;}
.index_insta .banner span{display:block; font-size:21px;}

 @media screen and (max-width:767px) {
 .index_insta{padding: 0 2rem;}
.index_insta .banner{width:auto; text-align: center;}
 }