@charset "UTF-8";


/*=================================================
       common
=================================================*/
a {text-decoration: none;}
.pc_on {display: block;}
.sp_on {display: none;}
.pc_oon {display: block;}
.sp_oon {display: none;}
.pc_ok {display: block;}
.sp_ok {display: none;}
.center {text-align: center;}
input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}
.in {display: inline-block;}
.mt-30 {margin-top: 30px;}
@media screen and (max-width: 1300px) {
}
@media screen and (max-width: 1300px) {
        html {min-width: 100%; overflow-x: hidden;}
        body {min-width: 100%;}
        img {max-width: 100%; height: auto;}
        .pc_oon {display: none;}
        .sp_oon {display: block;}
        .al-center {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center;}
        .al-center {padding: 50px 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1000px) {
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        body {padding-top: 0;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .wrap1000 {width: 100%; max-width: 1000px;}
        .al-center {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
        .al-center.bnr {background: url(../img/top/bg_contents2-2.png);}
        .al-center a {margin-bottom: 10px;}
        #local h2 p {top: 60%;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        #local h2 {height: 350px;}
        }
        @media only screen and (max-width: 560px) {
        }
        

/*=================================================
       header
=================================================*/

@media screen and (max-width: 1300px) {
            header {min-width: 100%;}
            header h1 {flex: 0 1 auto; padding-left: 1%;}
            header nav {flex: 0 1 auto;}
            header nav ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-around; gap: 15px;}
            header nav ul li {margin-right: 0; white-space: nowrap;}
            header nav ul li.current {border-bottom: none;}
            header nav ul li.current a {border-bottom: 1px solid #630; padding-bottom: 3px;}
        }
        @media screen and (max-width: 1200px) {    
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }
        @media only screen and (max-width: 560px) {
        }
        

/*=================================================
       footer
=================================================*/
#top footer {height: auto;}
footer address {position: static; transform: none; margin-top: 30px; text-align: center;}

@media screen and (max-width: 1280px) {
            footer .f_bn li img {height: revert-layer;}
        }
        @media screen and (max-width: 1200px) {    
        }
        @media screen and (max-width: 1024px) {
           .f_bn li {float: left; margin: 0 15px;}
           .f_bn li:nth-of-type(1) {width: 60%;}
           .f_bn li:nth-of-type(2) {width: 18%;}
           .f_bn {display: table; margin: 10px auto 0;}
           .f_bn:after {display: block; content: ""; clear: both;}
        }
        @media only screen and (max-width: 767px) {
        }
        @media only screen and (max-width: 560px) {
        }
 
/*=================================================
       toppage
=================================================*/
.plan_form , .plan_form .price {width: 225px;}
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}
@media screen and (max-width: 1280px) {
            #top .sec001 ul li .txt_box {padding: 0 2%; box-sizing: border-box;}
            
        }
        @media screen and (max-width: 1200px) { 
            .wrap_fb {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 10px; width: 100%; max-width: 1100px; padding: 30px 2%; box-sizing: border-box;} 
            .top_l {flex: 0 1 520px; width: auto;}
            .top_r {flex: 0 1 550px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            #mainImg {margin-top: 65px;}
            #top .sec002 {padding-bottom: 30%;}
            section .inner {width: 100%; max-width: 1000px; padding: 50px 2%;}
            .top_r  {margin-top: 50px;}
            .top_plan_l2 , .top_plan_r2 {margin-top: 30px;}
        }
        @media only screen and (max-width: 767px) {
            #top .sec001 ul {flex-direction: column;}
            #top .sec001 ul li {width: 100%; max-height: 360px;}
            .alignC {text-align: left;}
            .top_l iframe {display: table; margin: 0 auto;}
            .top_r {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 10px; margin-top: 50px;}
            .top_r .clear {display: none;}
            .top_plan_l2 {margin-top: 30px;}
            .top_plan_r2 {margin-top: 0;}
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       spa
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {    
        }
        @media screen and (max-width: 1024px) {
            .spa_mov {position: relative; width: 100%; max-width: 1000px;}
            .spa_mov:after {display: block; content: ""; padding-top: 56%;}
            .spa_mov video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
        }
        @media only screen and (max-width: 767px) {
        }
        @media only screen and (max-width: 560px) {
        }
  
/*=================================================
       cuisine
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {    
        }
        @media screen and (max-width: 1024px) {
            .cuisine .sec001 {padding: 0 2%;}
            .dish_slide2 {position: relative; width: 100%; max-width: 790px;}
            .dish_slide2 .bx-wrapper {position: relative;}
            .dish_slide2 .bx-wrapper:after {display: block; content: ""; padding-top: 66.7%;}
            .dish_slide2 .bx-viewport {position: absolute !important;; top: 0; left: 0; width: 100%; height: 100% !important;}
            .sake_box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; }
            .sake_box .sake_l {flex: 0 1 320px; width: auto;}
            .sake_box .sake_r {flex: 0 1 680px; width: auto;}
            .dish_slide {width: 90%; max-width: 900px;}
            .cuisine .sec003 {padding: 0 2%;}
            .cuisinebox {background-size: 100% auto;}
        }
        @media only screen and (max-width: 767px) {
            #bx-pager1 {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; }
            #bx-pager1 a {flex: 0 1 120px;}
            .bx-pager2 img {width: 100%;}
            .cuisine_p1 {text-align: left;}
            .sake_box {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; }
            .sake_box .sake_l {flex: 0 1 auto; width: auto; margin-top: 20px;}
            .sake_box .sake_r {flex: 0 1 auto; width: auto;}
            .dish_slide {width: 100%;}
            #local section.sec001 h3 {margin-bottom: 10px;}
            .cuisine_p1 {padding-bottom: 23%;}
        }
        @media only screen and (max-width: 560px) {
        }
          
/*=================================================
       room
=================================================*/
.room_ex {margin-top: 10px;}

@media screen and (max-width: 1280px) {
            .r-center {justify-content: center; width: 100%; max-width: 920px;}
            .r-center div:nth-of-type(1) {flex: 0 1 620px;}
            .r-center div:nth-of-type(2) {flex: 0 1 306px;}
            .wayou_r img {height: auto;}
        }
        @media screen and (max-width: 1200px) {    
        }
        @media screen and (max-width: 1024px) {
            .room_txt {width: 100%; max-width: 920px; height: auto; min-height: 120px; padding-bottom: 10px;}
            .room_t {height: 110px;}
            .room_txt p {width: calc(100% - 200px);}
            .room .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; }
            .room .flex .room_l {flex: 0 0 320px; width: auto; margin-right: 20px; padding-left: 0;}
            .room .flex .room_r {flex: 0 1 600px; width: auto;}
            .room_box {background-size: 100% 100%; width: 100%; max-width: 520px; height: auto; }
        }
        @media only screen and (max-width: 767px) {
            .r-center {flex-wrap: wrap; flex-direction: column; align-items: center;}
            .r-center div:nth-of-type(1) {flex: 0 1 auto; margin-bottom: -20px;}
            .r-center div:nth-of-type(2) {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; flex: 0 1 auto;}
            .room_t {width: 100%; height: 110px;}
            .room_txt p {width: 100%; padding-left: 0;}
            .room .flex {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; }
            .room .flex .room_l {flex: 0 0 auto; width: auto; max-width: 500px;  margin-right: 0; padding-left: 0;}
            .room .flex .room_r {flex: 0 1 auto; width: auto;}
            .room_box {padding: 30px 5%;}
            #local section table tr th {padding: 15px 5px;}
            .room_l_p {text-align: left;}
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       reserve
=================================================*/
.reserve .flex {width: 620px !important;}
#local section table tr th span {font-weight: bold;}
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {    
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            .reserve .flex {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; }
            .reserve .flex .clear {display: none;}
            .top_plan_r02 {margin-top: 10px;}
        }
        @media only screen and (max-width: 560px) {
        }
        
/*=================================================
       access
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {    
        }
        @media screen and (max-width: 1024px) {
            .access .flex {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; }
            .access_l {width: auto; max-width: 480px;}
            .access_r {width: auto; max-width: 480px;}
            .access .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; gap: 10px; margin-bottom: 50px;}
            .access .box .text_box {flex: 0 1 640px; }
            .access .box .text_box .sight_p2 {width: 100%; }
            .sight_p1 {margin-top: 0;}
            .access .box .sight_img {flex: 0 1 325px; width: auto;}
            .access .box {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; max-width: 460px; margin: 0 auto 50px;}
            .access .box .text_box {flex: 0 1 auto; }
            .access .box .sight_img {flex: 0 1 auto; width: auto;}
        }
        @media only screen and (max-width: 767px) {
            .access iframe {height: 300px;}
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       shop
=================================================*/

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

/*=================================================
       pan
=================================================*/

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


/*=================================================
       news
=================================================*/


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