@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        height: calc(100vh - 70px);
        width:100%;
        margin-top:70px;
        z-index: 0;
        }
        .hero-inner {
        position: fixed;
        box-sizing: border-box;
        height: 100vh;
        width:100%;
        z-index: 0;
        }

.hero-wrap.pages {
        height: calc(100vh - 150px);
        }

        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:0px; }
        .hero-wrap.toppage { height:0; padding-bottom:90%; }
        .hero-wrap.pages { height:0; padding-bottom:100%; margin-top:0; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:0px; }
        .hero-wrap.pages { margin-top:0; }
        }

.page-section {
        position: relative;
        background: #FFF;
        z-index: 1;
        }

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

       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{ 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: 1300px) {
        .movie.top-movie:before { padding-top:720px; }
        }

        @media screen and (max-width: 1024px) {
		.top-movie{ max-height:100vh; height:auto; }
        .movie.top-movie:before { content:""; display: block; position: relative; top:0; left:0; padding-top:90%; }
        .top-movie{ max-height:100vh; }
        }

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

       背景

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

.border-box {
        border:2px solid #342B21;
        padding:6%;
        background: rgb(255 255 255 / .3);
        box-sizing: border-box;
        border-radius: 1px;
        }
        .border-box.gray { border:6px solid #DDD; }
        .border-box-m {
        border:1px solid rgb(50 51 52 / .5);
        padding:8% 10%;
        box-sizing: border-box;
        }
        .border-box-s {
        border:1px solid rgb(50 51 52 / .5);
        padding:8%;
        box-sizing: border-box;
        }
.bg-pink {
        background:  #FCEEEE;
        }
.bg-gray {
        background: #F7F7F8;
        }
.after-pink {
        position: relative;
        z-index: 0;
        }
        .after-pink:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height:300px;
        background: #FCEEEE;
        z-index: -1;
        }
        .after-pink:before {
        content:"";
        display: block;
        position: absolute;
        bottom:300px;
        left:0;
        width:100%;
        height:80px;
        background: url("../images/parts/wave.png") top center repeat-x;
        z-index: -1;
        }
.after-maru {
        position: relative;
        z-index: 0;
        }
        .after-maru:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        right:-15%;
        width:25%;
        height:0;
        padding-bottom:25%;
        background: url("../images/parts/maru.svg") center center / cover;
        z-index: -1;
        }
        .after-maru:before {
        content:"";
        display: block;
        position: absolute;
        bottom:-25%;
        left:-15%;
        width:40%;
        height:0;
        padding-bottom:40%;
        background: url("../images/parts/maru.svg") center center / cover;
        rotate:180deg;
        z-index: -1;
        }

.white-box {
        background:#FFF;
        padding:8%;
        box-sizing: border-box;
        border-radius: 10px;
        }
.white-wrap {
        background:#FFF;
        padding:40px;
        box-sizing: border-box;
        border-radius: 5px;
        }
.after-wa {
        position: relative;
        z-index: 0;
        }
        .after-wa:after {
        content:"";
        display: block;
        position: absolute;
        top:-10%;
        right:-25%;
        width:55%;
        height:0;
        padding-bottom:55%;
        background: url("../images/parts/wa.svg") center center / cover;
        opacity:.2;
        z-index: -1;
        }
.bg-green {
        background: url("../images/parts/green.jpg") repeat;
        }
.bg-light {
        background:#F4F9F7;
        }
.gray-box {
        background: #F3F4F6;
        padding:10%;
        box-sizing: border-box;
}
        @media screen and (max-width:1024px) {
        .border-box  { padding:8%;  }
        .border-box-m { padding:2.5rem; }
        .border-box-s {  }
        .white-box { padding:10%;}
        }
        @media screen and (max-width:767px) {
        .border-box  { padding:12% 2rem;  }
        .border-box-m { padding:2rem; }
        .border-box-s {  }
        
        }

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

        タイトル / テキスト

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

.white { color:#FFF !important; }
.white .en { color:#FFF; }
.red { color:#B9151B;}
.blue { color:#232F84; }
.pink { color:#AE403D; }
.green { color:#348B5D; }




.mark {background:linear-gradient(transparent 60%, #f7ebbd 60%);}
.mark-w {background:linear-gradient(transparent 60%, rgb(144 131 55 / 1) 60%);}

.under-title {
        padding-bottom:.5rem;
        border-bottom:3px solid rgb(0 0 0 / .6);
        }
        .under-title-w {
        padding-bottom:.5rem;
        border-bottom:1px solid rgb(255 255 255 / .6);
        }

.dotted-title {
        padding-bottom:.35rem;
        border-bottom:3px dotted #857A6B;
        display:block;
        }
.short-lead {
        position: relative;
        display: inline-block;
        padding:0 4em 0 0;
        z-index: 0;
        }
        .short-lead:after {
        content:"";
        display: inline-block;
        position: absolute;
        bottom:.75em;
        right:0;
        width:3em;
        height:1px;
        background: #342B21;
        }

.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:rgb(50 51 52 / .3);
        margin-left:1rem;
        z-index: -1;
        }


.label-title {
        background: #348B5D;
        color:#FFF;
        padding:.75em 1.5em;
        box-sizing: border-box;
        border-radius: 30px;
        line-height: 120%;
        }

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

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

       トップページ

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

        .scroll-section {
        height:100vh;
        position: relative;
        }
        .section__pin {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        }
        .scroll-section.bg-white {
        background: #FFF;
        height: auto;
        }
        @media screen and (max-width:767px) {
        .scroll-section { height:940px; }
        .section__pin { height: 940px; }
        }



        /*=================================================
                greeting
        ==================================================*/

        .greeting-img {
        width:100%;
        height:0;
        padding-bottom:100%;
        background: url("../images/img/top/img_01.jpg") center center / cover;
        }
        .greeting-title { font-size:clamp(21px, 2.4vw, 36px); }
        @media screen and (max-width:1150px) {
        .greeting-img { padding-bottom:610px; }
        }
        @media screen and (max-width:1024px) {
        .greeting-title { font-size:24px; }
        }
        @media screen and (max-width:767px) {
        .greeting-title { font-size:22px; }
        .greeting-img { padding-bottom:75%; }
        }
        
        .bgScale {
        background:  url("../images/img/top/img_02.jpg") center center / cover;
        background-size: 100%;
        width: 100%;
        height:0;
        padding-bottom:66%;
        }
        @media screen and (min-width:1800px) {
        .bgScale { padding-bottom:1178px; }
        }
        
        /*=================================================
                ATT btn
        ==================================================*/
        
        .btn-wrap {
        position: relative;
        overflow: hidden;
        width:100%;
        }
        .btn-img {
        position:relative;
        width:100%;
        height:0;
        padding-bottom:130%;
        -webkit-transition  : all .5s ease;
        transition  : all .5s ease;
        z-index: 0;
        }
        .btn-img:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height:100%;
        background:rgb(0 0 0 / .15);
        z-index: 0;
        -webkit-transition  : all .5s ease;
        transition  : all .5s ease;
        }

        .btn_01 { background: url("../images/img/top/img_03.jpg") center center / cover; }
        .btn_02 { background: url("../images/img/top/img_04.jpg") center center / cover; }
        .btn_03 { background: url("../images/img/top/img_05.jpg") center center / cover; }

        .btn-wrap:hover .btn-img {
        -webkit-transform: scale(1.1);
        transform:         scale(1.1);
        }
        .btn-wrap:hover .btn-img:after {
        background:rgb(35 47 132/ .9);
        }
        .btn-cover {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index: 1;
        }
        a .btn-cover { color:#FFF; }
        .btn-logo {
        position: absolute;
        top:20px;
        left:25px;
        height:42px;
        width:auto;
        }
        .btn-logo img { width:auto; height:42px; }
        
        .btn-title {
        position: absolute;
        bottom:20px;
        left:25px;
        }
        
        @media screen and (max-width:1350px) {
        .btn-title.f45 { font-size:35px; }
        }
        @media screen and (max-width:1024px) {
        .btn-title { left:20px; bottom:15px; }
        .btn-title.f45 { font-size:25px; }
        .btn-title .f21 { font-size:15px; }
        .btn-img { padding-bottom:110%; }
        .btn-logo { left:20px; top:15px; height:32px; }
        .btn-logo img { height:32px; }
        }
        @media screen and (max-width:767px) {
        .btn-img { padding-bottom:70%; }
        }

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

        .banner-wrap {
        width:100%;
        position: relative;
        overflow: hidden;
        z-index: 1;
        }
        .banner-wrap a {
        display: block;
        overflow: hidden;
        color:#FFF;
        }
        .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:0;
        left:0;
        width:33%;
        max-width:480px;
        height:100%;
        background: rgb(0 0 0 / .9);
        text-align: center;
        box-sizing: border-box;
        z-index: 1;
        }
        .banner-text .inner {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:72%;
        max-width:340px;
        line-height: 1;
        }
        .more-reservation {
        width:100%;
        height:72px;
        line-height:72px;
        text-align: center;
        color:#FFF;
        background:#DDB750;
        border-radius:0px;
        box-sizing: border-box;
        overflow: hidden;
        font-size:18px;
        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;
        }
        .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:380px; }
        .banner-text { width:37%; }
        .more-reservation { height:68px; line-height:68px; }
        }
        @media screen and (max-width:1024px) {
        .banner-img { height:300px; }
        .banner-text { width:42%; }
        .more-reservation { height:60px; line-height:60px; }
        }
        @media screen and (max-width:767px) {
        .banner-img { height:210px; }
        .banner-text { position: relative; top:auto; left:auto; width:100%; height: 210px; background: #111; max-width: 100%; }
        .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-slider {
        position: relative;
        z-index: 0;
        }
        .page-header-slick .slickslider-s figure {
        position: relative;
        z-index: 0;
        }
        .page-header-slick .slick-slide { margin:0 !important; }
        .page-header-slick { height:auto; }
        .page-header-slick .slickslider-s figure { width: 100%; height:calc(100vh - 150px); }
        .page-header-slick:after { content: ""; display: block; }
        .slick-wrap.page-header-slick:after { height:calc(100vh - 150px); }

        .main_01 { background: url("../images/img/main/header_01.jpg") center center / cover; }
        .main_02 { background: url("../images/img/main/header_02.jpg") center center / cover; }
        .main_03 { background: url("../images/img/main/header_03.jpg") center center / cover; }
        
        .new_01 { background: url("../images/img/new/header_01.jpg") center center / cover; }
        .new_02 { background: url("../images/img/new/header_02.jpg") center center / cover; }
        .new_03 { background: url("../images/img/new/header_03.jpg") center center / cover; }
        
        .annex_01 { background: url("../images/img/annex/header_01.jpg") center center / cover; }
        .annex_02 { background: url("../images/img/annex/header_02.jpg") center center / cover; }
        .annex_03 { background: url("../images/img/annex/header_03.jpg") center center / cover; }
        
        .access_01 { background: url("../images/img/access/header_01.jpg") center center / cover; }
        .access_02 { background: url("../images/img/access/header_02.jpg") center center / cover; }
        .access_03 { background: url("../images/img/access/header_03.jpg") center center / cover; }


        @media screen and (max-width:1024px) {
        .page-header-slick { height:auto; }
        .page-header-slick .slickslider-s figure { height:0; padding-bottom:100%; }
        .slick-wrap.page-header-slick:after { padding-bottom:100%; height:auto; }
        }


.grid_wrap{
    display: grid;
} 
.cols-subimgs{
    display: grid;
    gap: 4px;
}
.cols-subimgs img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}

@media screen and (min-width:768px){
    .cols-subimgs{
        grid-template-columns: repeat(3,minmax(0,1fr)) repeat(2,minmax(0,0.6fr));
    }
}

@media screen and (max-width:767px){
    .cols-subimgs{
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .cols-subimgs img.sp-order-1{
        grid-column: 1 / -1;
        order: -1;
    }
    .cols-subimgs img{
        height: auto;
    }
    .cols-subimgs img.sp-order-1{
        aspect-ratio: 6 / 3.5;
    }
    .cols-subimgs img.tate{
        aspect-ratio: 1;
    }
}
/*object-position*/
/*縦調整*/
.obj-posi-50_0{object-position: 50% 0%;}
.obj-posi-50_05{object-position: 50% 5%;}
.obj-posi-50_10{object-position: 50% 10%;}
.obj-posi-50_15{object-position: 50% 15%;}
.obj-posi-50_20{object-position: 50% 20%;}
.obj-posi-50_25{object-position: 50% 25%;}
.obj-posi-50_30{object-position: 50% 30%;}
.obj-posi-50_35{object-position: 50% 35%;}
.obj-posi-50_40{object-position: 50% 40%;}
.obj-posi-50_45{object-position: 50% 45%;}
.obj-posi-50_50{object-position: 50% 50%;}
.obj-posi-50_55{object-position: 50% 55%;}
.obj-posi-50_60{object-position: 50% 60%;}
.obj-posi-50_65{object-position: 50% 65%;}
.obj-posi-50_70{object-position: 50% 70%;}
.obj-posi-50_75{object-position: 50% 75%;}
.obj-posi-50_80{object-position: 50% 80%;}
.obj-posi-50_85{object-position: 50% 85%;}
.obj-posi-50_90{object-position: 50% 90%;}
.obj-posi-50_95{object-position: 50% 95%;}
.obj-posi-50_100{object-position: 50% 100%;}

/*横調整*/
.obj-posi-0_50{object-position: 0% 50%;}
.obj-posi-05_50{object-position: 5% 50%;}
.obj-posi-10_50{object-position: 10% 50%;}
.obj-posi-15_50{object-position: 15% 50%;}
.obj-posi-20_50{object-position: 20% 50%;}
.obj-posi-25_50{object-position: 25% 50%;}
.obj-posi-30_50{object-position: 30% 50%;}
.obj-posi-35_50{object-position: 35% 50%;}
.obj-posi-40_50{object-position: 40% 50%;}
.obj-posi-45_50{object-position: 45% 50%;}
.obj-posi-50_50{object-position: 50% 50%;}
.obj-posi-55_50{object-position: 55% 50%;}
.obj-posi-60_50{object-position: 60% 50%;}
.obj-posi-65_50{object-position: 65% 50%;}
.obj-posi-70_50{object-position: 70% 50%;}
.obj-posi-75_50{object-position: 75% 50%;}
.obj-posi-80_50{object-position: 80% 50%;}
.obj-posi-85_50{object-position: 85% 50%;}
.obj-posi-90_50{object-position: 90% 50%;}
.obj-posi-95_50{object-position: 95% 50%;}
.obj-posi-100_50{object-position: 100% 50%;}



        /*=================================================
                ノーマルヘッダー
        ==================================================*/

        .page-header {
        position: relative;
        width: 100%;
        height:calc(100vh - 150px);
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        height:calc(100vh - 150px);
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        height:0;
        padding-bottom:30%;
        width:100%;
        }

        .cuisine      { background: url("../images/img/cuisine/header.jpg") top center / cover; }
        .reservation  { background: url("../images/img/reservation/header.jpg") center center / cover; }

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


.page-title {
        position: relative;
        width:100%;
        height:80px;
        line-height: 80px;
        background:#232F84; 
        box-sizing: border-box;
        text-align: center;
        color:#FFF;
        z-index:2;
        }
        .page-title.main-page { background:#EDABAB ;}
        .page-title.new-page { background:#576E4E ;}
        .page-title.annex-page { background:#348B5D ;}
        .page-title h1 {
        position: relative;
        color:#FFF;
        line-height: 80px;
        }
        @media screen and (max-width:1024px) {
        .page-title { height:66px; line-height: 66px; }
        .page-title h1 { line-height: 66px; }
        }
        @media screen and (max-width:767px) {
        .page-title { height:56px; line-height: 56px; }
        .page-title h1 { line-height: 56px; }
        }


.memo {
        padding:.5rem 0;
        box-sizing: border-box;
        line-height: 180%;
        border-top: 1px solid rgb(0 0 0 / .6);
        border-bottom: 1px solid rgb(0 0 0 / .6);
        }
        .memo-w {
        padding:.5rem 0;
        border-top:1px solid rgba(255,255,255,.5);
        border-bottom:1px solid rgba(255,255,255,.5);
        }
        .memo-w.border-none {
        border-bottom:none;
        }

figure {
        position: relative;
        z-index: 0;
        }
        .figure-caption {
        position: absolute;
        display: inline-block;
        top:0;
        left:0;
        padding: 3px 10px;
        margin: 0;
        color: #fff;
        background: rgb(0 0 0 / .9);
        font-size: .975rem;
        z-index: 1;
        }
.img-wrap {
        position: relative;
        z-index: 0;
        }
        @media screen and (max-width:767px) {
        .wide-img-sp { width:calc(100% + 7vw); margin-left:-3.5vw; }
        }

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

       下層

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

        /*=================================================
                Main
        ==================================================*/

        .main-img {
        width:100%;
        height:0;
        padding-bottom:540px;
        background: url("../images/img/main/img_01.jpg") center center / cover;
        }
        @media screen and (max-width:1024px) {
        .main-img { padding-bottom:430px; }
        }
        @media screen and (max-width:767px) {
        .main-img { padding-bottom:66%; }
        }

        /*=================================================
                NEW
        ==================================================*/

        .new-img {
        width:100%;
        height:0;
        padding-bottom:540px;
        background: url("../images/img/new/img_01.jpg") center center / cover;
        }
        .white-label {
        background: #FFF;
        padding:.75em 0;
        border-radius: 4px;
        }
        @media screen and (max-width:1024px) {
        .new-img { padding-bottom:430px; }
        }
        @media screen and (max-width:767px) {
        .new-img { padding-bottom:66%; }
        }

        /*=================================================
                NEW
        ==================================================*/

        .annex-img {
        width:100%;
        height:0;
        padding-bottom:540px;
        background: url("../images/img/annex/img_01.jpg") center center / cover;
        }
        .green-label {
        background: #348B5D;
        color:#FFF;
        padding:.75em 0;
        border-radius: 4px;
        }
        .pets {
        position: relative;
        padding-top:50px;
        z-index: 0;
        }
        .pets:before,
        .pets:after {
        content:"";
        display: block;
        position: absolute;
        bottom: -30px;
        width:200px;
        height:200px;
        z-index: -1;
        }
        .pets:before { left:-30px; background: url("../images/parts/dog-01.svg") center center / cover; }
        .pets:after { right:-30px; background: url("../images/parts/dog-02.svg") center center / cover; }
        
        @media screen and (max-width:1024px) {
        .annex-img { padding-bottom:430px; }
        .pets:before,.pets:after { width:160px; height:160px; }
        }
        @media screen and (max-width:767px) {
        .annex-img { padding-bottom:66%; }
        .pets { padding-top:120px; }
        .pets:before,.pets:after { width:110px; height:110px; bottom:auto; top:0; }
        .pets:before { left:auto; right:55%; }
        .pets:after { right:auto; left:55%; }
        }

        /*=================================================
                CUISINE
        ==================================================*/

        .blue-label {
        background:#232F84;
        color:#FFF;
        padding:.75em 1.5rem;
        border-radius: 4px;
        }
        .label-inner {
        padding:0 1.5rem;
        box-sizing: border-box;
        }