@charset "UTF-8";

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

       Movie

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

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 0;
        }
        .movie {
        position: relative;
        width: 100%;
        height:auto;
        background:url("../../movie/top.jpg") center center / cover;
        text-align: center;
        z-index: 1;
        }
        .movie:before {
        content: "";
        display: block;
        padding-top: 56.25%;
        }
        .movie_inner{
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        overflow:hidden;
        z-index: 1;
        }
        .movie_inner video{
        width:100%;
        height:auto !important;
        margin-left:auto;
        margin-right:auto;
        }
        @media screen and (max-width:1024px) {
        .movie { margin-top:90px; }
        .movie:before { padding-top: 56.25%; }
        }
        @media screen and (max-width:767px) {
        .movie { margin-top:80px;}
        }

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

       HEADER

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

header.main-header { position: relative; z-index: 10000;}

.header-wrap-sp {
        display: none;
        position: absolute;
        width:100%;
        height:90px;
        z-index: 1;
        background: url("../../img/bg_y.jpg") repeat;
        }
        .header-wrap-sp:after {
                content:"";
                display: block;
                position: absolute;
                top:0;
                left:0;
                width:100%;
                height:90px;
                background: url("../../img/bg_na_14.jpg") center center no-repeat;
                }
        .mobile-logo {
                width:270px;
                position: absolute;
                top:-50px;
                left:-30px;
                opacity: 1;
                z-index: 999;
                line-height: 100%;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
                }

        /*=================================================
                ハンバーガー
        ==================================================*/

        .gnav {
                font-family: 'Poppins', sans-serif;
                letter-spacing: 0;
                }
                .nav-toggle {
                display:block;
                position:fixed;
                right:10px;
                top:11px;
                padding:0;
                width:70px;
                height:70px;
                text-align: center;
                font-size: 0px;
                letter-spacing: 0;
                box-sizing: border-box;
                pointer-events: auto;
                cursor:pointer;
                z-index:99999;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
                }
                .nav-toggle div {
                position:absolute;
                width:27px;
                height:10px;
                top:25px;
                right:21px;
                }
                .nav-toggle span {
                display: block;
                position: absolute;
                height: 2px;
                width:27px;
                background:#2F190C;
                border-radius:2px;
                left: 0;
                -webkit-transition: .3s ease-in-out;
                -moz-transition: .3s ease-in-out;
                transition: .3s ease-in-out;
                }
                .nav-toggle span:nth-child(1) { top: 0; }
                .nav-toggle span:nth-child(2) { top: 8px; }
                .gnav.active .nav-toggle span { background: #2F190C; }
                .gnav.active .nav-toggle span:nth-child(1) {top: 3px;-webkit-transform: rotate(315deg);-moz-transform: rotate(315deg);transform: rotate(315deg);}
                .gnav.active .nav-toggle span:nth-child(2) {top: 3px;-webkit-transform: rotate(-315deg);-moz-transform: rotate(-315deg);transform: rotate(-315deg);}
                
                
                .gnav .menu  { opacity: 1; position: absolute; width:27px; right:21px; top:42px; line-height: 1; font-size:10px; color:#2F190C; -webkit-transition : all 0.3s ease-in-out;  -moz-transition : all 0.3s ease-in-out; -o-transition : all 0.3s ease-in-out;}
                .gnav .close { opacity: 0; position: absolute; width:31px; right:19px; top:42px; line-height: 1; font-size:10px; color:#2F190C;  -webkit-transition : all 0.3s ease-in-out; -moz-transition : all 0.3s ease-in-out; -o-transition : all 0.3s ease-in-out;}
                .gnav.active .menu  { opacity: 0; }
                .gnav.active .close { opacity: 1; }
                
                
                .header-wrap-sp.fixed .nav-toggle span { background: #2F190C; }
                .header-wrap-sp.fixed .active .nav-toggle span { background: #2F190C; }
                .header-wrap-sp.fixed .gnav .menu  { color: #2F190C; }

        /*=================================================
                ナビゲーション
        ==================================================*/

        .gnav-content {
                display: none;
                position: fixed;
                right: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: url("../../img/bg_head_illu.jpg") center center / cover;
                overflow: auto;
                z-index:9999;
                }
                .gnav-logo {
                width:270px;
                position: absolute;
                top:-50px;
                left:-30px;
                opacity: 1;
                z-index: 999;
                line-height: 100%;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
                }
                .mobile-navigation {
                margin-top:170px;
                width:100%;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
                }
                .mobile-main-nav {
                position:relative;
                padding-bottom:1rem;
                }
                .mobile-main-nav li {
                width:100%;
                text-align: left;
                font-weight:400;
                border-bottom:2px dotted #2f190c;
                }
                .mobile-main-nav li:last-child {
                border-bottom:none;
                }
                .mobile-main-nav li a {
                letter-spacing: 0.01em;
                padding:15px 0;
                display:block;
                font-size:1.375rem;
                position: relative;
                color:#2f190c;
                box-sizing: border-box;
                background:none;
                }
                .mobile-main-nav li:not(.acordion) a:after {
                position: absolute;
                content: '';
                width: 6px;
                height: 6px;
                border: 0;
                border-top: solid 1px #2f190c;
                border-right: solid 1px #2f190c;
                top: 45%;
                right: 12px;
                transform: rotate( 45deg );
                }

        /*=================================================
                SNS btn
        ==================================================*/

        .mobile-sns-nav {
                position: relative;
                padding:.75rem 0;
                text-align: center;
                }
                .mobile-sns-nav li {
                width:32px;
                height:32px;
                display: inline-block;
                margin:0 6px;
                }
        .mobile-menu { display: none; }

        @media screen and (max-width: 1024px) {
        header.main-header { position: absolute; width:100%; }
        .header-wrap-sp { margin-top:0; display:block; opacity: 1; }
        }
        @media screen and (max-width: 767px) {
        .header-wrap-sp { height:80px; position: relative; }
        .header-wrap-sp:after { height:80px; }
        .mobile-logo { width:210px; }
        .gnav-logo { width:210px;  }
        .nav-toggle { top:5px; }
        .mobile-navigation { margin-top: 120px; }
        
        .header-wrap-sp.fixed .nav-toggle span { background: #1D1B19; }
        .header-wrap-sp.fixed .gnav .menu  { color: #1D1B19; }
        
        .tablet-phone { display: none; }
        .tablet-reservation { display: none; }
        }




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

       デバイス

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

        .sp-none        { }
        .sp-on		    { display:none;}
        .tablet-on		{ display:none;}
        .tablet-none	{ }
        .tablet-on.sp-none { display:none;}
        .tablet-none.sp-on { display:block;}
        @media screen and (max-width: 1350px) {
        .w1350-none     { display:none; }
        }
        @media screen and (max-width: 1240px) {
        .desktop-none     { display:none; }
        }
        @media screen and (max-width: 1024px) {
        .tablet-on		{ display:inherit;}
        .tablet-none	{ display:none;}
        .tablet-on.sp-none { display:block;}
        .tablet-none.sp-on { display:none;}
        }
        @media screen and (max-width: 767px) {
        .sp-none		{ display:none;}
        .sp-on			{ display:inherit;}
        .tablet-on.sp-none { display:none;}
        .tablet-none.sp-on { display:block;}
        }


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

        ベース

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

        .margin-auto { margin-left:auto; margin-right:auto; }
        .outer		{ padding-left:2.78vw; padding-right:2.78vw; box-sizing:border-box; }

        @media screen and (max-width: 1024px) {
        html,body, .wrapper	{ font-size:15px; }
        .outer			   { padding-left:30px; padding-right:30px; }
        }
        @media only screen and (max-width: 767px) {
        html,body, .wrapper	{ font-size:14px; letter-spacing: 1px;}
        .outer			{ padding-left:21px; padding-right:21px; }
        }
        @media only screen and (max-width:374px) {
        html,body, .wrapper	{ font-size:14px; }
        }

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

       Width

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

        .wrap       { width:100%; margin-left:auto; margin-right:auto; position: relative; z-index: 10; }

        .wrap-2400  { max-width:2400px; }
        .wrap-2000  { max-width:2000px; }
        .wrap-1900  { max-width:1900px; }
        .wrap-1800  { max-width:1800px; }
        .wrap-1700  { max-width:1700px; }
        .wrap-1600  { max-width:1600px; }
        .wrap-1500  { max-width:1500px; }
        .wrap-1460  { max-width:1460px; }
        .wrap-1400  { max-width:1400px; }
        .wrap-1300  { max-width:1300px; }
        .wrap-1260  { max-width:1260px; }
        .wrap-1200  { max-width:1200px; }
        .wrap-1150  { max-width:1150px; }
        .wrap-1100  { max-width:1100px; }
        .wrap-1050  { max-width:1050px; }
        .wrap-1000  { max-width:1000px; }
        .wrap-960   { max-width: 960px; }
        .wrap-900   { max-width: 900px; }
        .wrap-840   { max-width: 840px; }
        .wrap-800   { max-width: 800px; }
        .wrap-750   { max-width: 750px; }
        .wrap-700   { max-width: 700px; }
        .wrap-600   { max-width: 600px; }
        .wrap-500   { max-width: 500px; }
        .wrap-450   { max-width: 450px; }
        .wrap-300   { max-width: 300px; }

        .max90      { max-width:90px; width:100%;}
        .max220     { max-width:220px; width:100%;}
        .max270     { max-width:270px; width:100%;}
        .max300     { max-width:300px; width:100%;}
        .max350     { max-width:350px; width:100%;}
        .max400     { max-width:400px; width:100%;}
        .max420     { max-width:420px; width:100%;}
        .max450     { max-width:450px; width:100%;}
        .max500     { max-width:500px; width:100%;}
        .max550     { max-width:550px; width:100%;}
        .max600     { max-width:600px; width:100%;}
        .max650     { max-width:650px; width:100%;}
        .max700     { max-width:700px; width:100%;}
        .max750     { max-width:750px; width:100%;}
        .max550-widescreen { max-width:550px; width:100%;}

        .w2em { width:2em; }
        .w3em { width:3em; }
        .w4em { width:4em; }
        .w5em { width:5em; }
        .w6em { width:6em; }
        .w7em { width:7em; }
        .w8em { width:8em; }
        .w9em { width:9em; }
        .w10em { width:10em; }
        .w11em { width:11em; }
        .w12em { width:12em; }
        .w13em { width:13em; }
        .w14em { width:14em; }

        .w11p { width:11.111111%; }
        .w12p { width:12.5%; }
        .w16p { width:16.666666%; }
        .w20p { width:20%; }
        .w25p { width:25%; }
        .w30p { width:30%; }
        .w33p { width:33%; }
        .w50p { width:50%; }

        .h100p { height:100%; }

        @media screen and (max-width: 1215px) {
        .max1000-desktop { max-width:1000px; width:100%;}
        }
        @media screen and (max-width: 1024px) {
        .wrap { max-width:750px; }
        }
        @media only screen and (max-width: 767px) {
        .wrap { max-width:375px; }
        .sp-wauto th.w50p { width: auto; }
        .sp-w9em { width: 9em;}
        }


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

       レスポンシブ化

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

        @media screen and (max-width:1200px) {
        .waku1200{ width: 100%; }
        }
        @media screen and (max-width:1024px) {
        html,body { width:100%; min-width: 320px; *width:320px; font-size:16px; }
        
        img,.img-auto img {
        max-width: 100%;
        height: auto;
        width /***/:auto;
        vertical-align:bottom;
        }
        .img-100p img {
        max-width: 600px;
        height: inherit;
        width /***/:auto;
        vertical-align:bottom;
        }
        
        .top { display:none; }
        .normal-header { display: none; }
        .waku{ width: 100%; }
        #change .content_area .content_block { width: 100%; height: 870px; }
			.bg_soba .ph_soba li img,
			.bg_yuki .ph_yuki li img{
				max-width: none;
			}
        }
        @media screen and (max-width:767px) {
        
        }


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

       文字

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

        .th24 img { width:auto; height:24px; }
        .th27 img { width:auto; height:27px; }
        .th30 img { width:auto; height:30px; }
        .th36 img { width:auto; height:36px; }
        .th40 img { width:auto; height:40px; }
        .th45 img { width:auto; height:45px; }
        .th60 img { width:auto; height:60px; }
        .th70 img { width:auto; height:70px; }
        .th92 img { width:auto; height:100px; }
        .th150 img { width:auto; height:160px; }

        @media screen and (max-width: 1024px) {
        .th24 img { height:19px; }
        .th27 img { height:22px; }
        .th30 img { height:24px; }
        .th36 img { height:29px; }
        .th40 img { height:36px; }
        .th45 img { height:39px; }
        .th60 img { height:42px; }
        .th70 img { height:56px; }
        .th92 img { height:86px; }
        .th150 img { width:auto; height:140px; }
        }
        @media screen and (max-width: 767px) {
        .th24 img { height:15px; }
        .th27 img { height:16px; }
        .th30 img { height:18px; }
        .th36 img { height:22px; }
        .th40 img { height:25px; }
        .th45 img { height:28px; }
        .th60 img { height:36px; }
        .th70 img { height:42px; }
        .th92 img { height:70px; }
        .th150 img { width:auto; height:116px; }
        }


/*================================================
      　map
================================================*/

    .gmap {
        position: relative;
        padding-bottom: 600px;
        height: 0;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 0px;
        border: 1px solid #CCC;
        z-index: 20;
        }
        .gmap.short { padding-bottom:320px; }
        .gmap iframe,
        .gmap object,
        .gmap embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }
        @media screen and (max-width: 1024px) {
        .gmap { padding-bottom: 450px; }
        }
        @media screen and (max-width: 767px) {
        .gmap { padding-bottom: 100%;  }
        .gmap.short { padding-bottom:80%; }
        }

/*================================================
      　table
================================================*/

.img-100p { width:100%; }
        @media screen and (max-width: 1024px) {
        .table-scroll.is-tablet { overflow: auto; white-space: nowrap; margin-bottom:20px; }
        .table-scroll.is-tablet table { margin-bottom:6px; }
        .table-scroll.is-tablet ::-webkit-scrollbar { height: 5px; }
        .table-scroll.is-tablet ::-webkit-scrollbar-track { background: #F1F1F1; }
        .table-scroll.is-tablet ::-webkit-scrollbar-thumb { background: #BCBCBC; }
        }
        @media screen and (max-width: 767px) {
        .table-scroll.is-mobile { overflow: auto; white-space: nowrap; }
        .table-scroll.is-mobile table { margin-bottom:6px; }
        .table-scroll.is-mobile ::-webkit-scrollbar { height: 5px; }
        .table-scroll.is-mobile ::-webkit-scrollbar-track { background: #F1F1F1; }
        .table-scroll.is-mobile ::-webkit-scrollbar-thumb { background: #BCBCBC; }
        }


.pt-1em { padding-top:1rem; }