@charset "UTF-8";


/*=================================================
       common
=================================================*/
a {text-decoration: none;}
.pc_on {display: block;}
.sp_on {display: none;}
.pc_ok {display: block;}
.sp_ok {display: none;}

@media screen and (max-width: 1280px) {
        html , body {min-width: 100%;}
        img {max-width: 100%; height: auto;}
        }
        @media screen and (max-width: 1100px) {
            .box {width: 100%;}
            .wrap1080 {width: 100%;}
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        #cuisine .cd-fixed-bg.cd-bg-1 , #facilities .cd-fixed-bg.cd-bg-1 , #hotspa .cd-fixed-bg.cd-bg-1 , #sightseeing .cd-fixed-bg.cd-bg-1 , #event .cd-fixed-bg.cd-bg-1 {background-position: center top; background-size: 100% auto;}
        #pagetop {z-index: 100;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        }
        @media only screen and (max-width: 560px) {
        #cuisine .cd-fixed-bg.cd-bg-1 , #facilities .cd-fixed-bg.cd-bg-1 , #hotspa .cd-fixed-bg.cd-bg-1 , #sightseeing .cd-fixed-bg.cd-bg-1 , #event .cd-fixed-bg.cd-bg-1 {background-size: auto 400px;}
        }
        

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

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            #header , #header.fix {min-width: 100%; padding: 0 1%; box-sizing: border-box;}
            nav {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: space-between; width: 100%;}
            nav .logo {flex: 0 1 189px; width: auto;}
            nav ul {flex: 0 1 853px; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }
        

/*=================================================
       footer
=================================================*/

@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) {
            .wrap700  {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%;}
            .wrap700 .footer_l {width: auto; margin-right: 0; border-right: none; }
            .wrap700 .footer_r {width: auto; margin-top: 10px; padding-top: 10px; padding-left: 0; border-top: 1px solid #999; text-align: center;}
        }
 
/*=================================================
       toppage
=================================================*/
.flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; box-sizing: border-box;}
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #plan {padding: 50px 2%; box-sizing: border-box;}
            #plan_wrap {width: 100%;}
            #planList {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; width: 100%;}
            #plan_search {width: 100%;}
            #greeting {background: url(../img/top/bg_greeting.png) no-repeat right bottom / 100% auto; width: 100%;}
            .top_contents1 {padding: 50px 2%; box-sizing: border-box;}
            #news {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-around; width: 100%; padding: 50px 2%; box-sizing: border-box;}
            #news .top_l {flex: 0 1 49%; width: auto;}
            #news .top_l .waku {position: relative; padding-top: 105%;}
            #news .top_l iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}
            #news .top_r {flex: 0 1 49%; width: auto; max-width: 450px;}
            #news .top_r .waku {}
            #news .top_r .waku iframe {margin: 0 auto;}
        }
        @media screen and (max-width: 1100px) {
            .top_btns02 {flex-wrap: wrap;}
        }
        @media screen and (max-width: 1024px) {
            #index .cd-fixed-bg.cd-bg-1 {position: relative; background-position: top; background-size: 100% auto;}
            .top_contents1_space {height: 500px;}
            .top_logo.sp_ok {position: absolute; top: 63%; left: 50%; transform: translate(-50% , -50%); width: 70%; max-width: 491px; height: auto; margin: 0;}
            #news {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%;}
            #news .top_l {flex: 0 1 auto; width: auto;}
            #news .top_r {flex: 0 1 auto; width: 100%; max-width: 450px; margin-top: 30px;}
            #plan {background-size: 100% auto;}
            #plan_search {background: url(../img/top/bg_plan_search2.png) no-repeat left bottom / auto 100%; height: auto; padding-bottom: 30px;}
            .top_plan_r {width: 100%;}
            .btn {margin-top: -10%;}
            .top_contents2_space {height: 450px;}

        }
        @media only screen and (max-width: 767px) {
            .top_contents1_space {height: 350px;}
            .top_contents2_space {height: 250px;}
            #greeting {background: url(../img/top/bg_greeting_sp.png) no-repeat right bottom / 100% auto; height: auto; padding-bottom: 55%;}
            #greeting .top_l {float: none; width: auto;}
            #tit_greeting {margin-left: 0;}
            .flex {flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px;}
        }
        @media only screen and (max-width: 560px) {
            .top_btns02 {flex-direction: column; align-items: center;}
            #index .cd-fixed-bg.cd-bg-1 {background-size: auto 35%;}
        }

/*=================================================
       cuisine
=================================================*/
.bx-pager2 , .bx-pager3 {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 2px;}
.bx-pager2 a , .bx-pager3 a {flex: 0 1 14%;}
.bx-pager2 img , .bx-pager3 img {width: 100%; margin: 5px 0 0;}
.dish_slide .left {flex: 0 1 440px; width: auto; margin-right: 20px;}
.dish_slide .right {flex: 0 1 440px; width: auto;}

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #d_intro {width: 100%;}
            #dinner1 , #dinner2 , #dinner3 {padding: 130px 2% 0; box-sizing: border-box;}

        }
        @media screen and (max-width: 1024px) {
            #d_intro {background: url(../img/dish/bg_intro.png) no-repeat right / 95% auto; height: auto; padding: 50px 0;}
            #d_intro .left {width: auto;}
            .dish_slide {width: 100%;}
        }
        @media only screen and (max-width: 767px) {
            #d_intro {background: none; height: auto; margin-top: 0; padding: 50px 0;}
            #d_intro .left {float: none;}
            #cuisine table {max-width: ; margin: 0 auto;}
            #cuisine table td {display: block; width: auto !important;}
            #dinner1 , #dinner2 , #dinner3 {padding: 80px 2% 0;}
        }
  
/*=================================================
       facilities
=================================================*/
#facilities .bx-pager2 {flex-wrap: nowrap;}
.facil_p2 dt {float: left; width: 7em;}
.facil_p2 dd {padding-left: 8em;}
    
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #dazai  , #dazai2 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%;}
            #dazai2 {background: url(../img/facilities/bg_dazai2.png) no-repeat right top / 90% auto; height: auto; padding: 20px 0;}
            #dazai .left {flex: 0 1 50%; width: auto; margin-right: 20px;}
            #dazai .right {flex: 0 1 50%; width: auto;}
            #dazai2 .left {flex: 0 1 610px; width: auto; margin-right: 20px; margin-top: -30px;}
            .img_dazai {width: 40%;}
            #dazai2 .right {flex: 0 1 480px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            .faci_slide {width: 100%;}
            #gaiyo_wrap {width: 100%;}
            #dazai {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; height: auto;}
            #dazai .left {flex: 0 1 auto; width: auto; margin-right: 0; margin-bottom: 20px;}
            #dazai .right {flex: 0 1 auto; width: auto;}
            #dazai2 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; background-position: center 50%; margin-top: 30px;}
            #dazai2 .left {flex: 0 1 auto; width: 100%; max-width: 500px; margin-right: 0; margin-top: 0;}
            #dazai2 .right {flex: 0 1 auto; width: auto;}
        }
        @media only screen and (max-width: 767px) {
            #facilities .bx-pager2 {flex-wrap: wrap;}
            .facil_p2 {margin-left: 0;}
            #dazai2 {background: none;}
            .img_dazai {float: none; width: auto;}
            #dazai2 .left p {display: table; margin: 0 auto 20px;}
            #dazai2 .right {margin-top: 0;}
        }
        @media only screen and (max-width: 560px) {
        }
            
/*=================================================
       hotspa
=================================================*/

@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
=================================================*/
.res_td1 {padding: 5px 10px;}
.res_td2 {margin: 10px 0;}

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #price_wrap {width: 100%;}
            #price_wrap .left {width: 37%; margin-right: 1%;}
            .min_tb.fst {width: 100%;}
            #price_wrap .right {width: 62%;}
            #reserve .wrap1080 {width: 100%;}
        }
        @media screen and (max-width: 1024px) {
            #price_wrap .left {width: 100%;}
            .min_tb.fst {width: 100%; max-width: 450px;}
            #price_wrap .right {width: 100%;}
            .top_map {position: relative; padding-top: 43%;}
            .top_map iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            .wrap930 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-start; width: 100%; max-width: 450px;}
            .access_l {width: 100%; margin-bottom: 20px;}
            .access_r {width: 100%;}
            .access_box {width: 100%; margin: 0;}
        }
        @media only screen and (max-width: 767px) {
            .table_box {overflow-x: scroll;}
            .table_box table {width: 770px; margin-bottom: 0;}
            .indent {display: block; padding-left: 1em;}
            .small {font-size: 0.8em; color: #eee;}
            .title_tel {font-size: 2em;}
        }
        
/*=================================================
       sightseeing
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            .wrap1080 .waku:after {display: table; content: ""; clear: both;}
            .wrap1080 .waku {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
        }
        @media screen and (max-width: 1024px) {
            .sight_box2 {width: 100%; margin: 0;}
            .sight_tb {width: 100%;}
        }
        @media only screen and (max-width: 767px) {
            .title_in {font-size: 1.6em;}
        }

        
/*=================================================
       event
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #event_wrap {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; width: 100%;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }

        
/*=================================================
       english
=================================================*/
@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) {
        }