@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;}
.popup_2 {z-index: 10 !important;}
@media screen and (max-width: 1300px) {
}
@media screen and (max-width: 1280px) {
        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;}
        }
        @media screen and (max-width: 1200px) {
            .wrapper, .inner {width: 100%; max-width: 1000px;}
        }
        @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;}
        .header_image {margin-top: 80px;}
        .pagetop {z-index: 10;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        .header_image {height: 300px;}
        .popup_contents {width: 45% !important;}
        #facility h2 span {line-height: 1.2em;}
        }
        @media only screen and (max-width: 560px) {
        }
        

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

@media screen and (max-width: 1380px) {
            header {display: flex; flex-wrap: wrap; flex-direction: row;justify-content: space-between; gap: 5px; height: 150px; padding-top: 5px;}
            header h1 {position: static; flex:0 1 100%;}
            header nav {flex:0 1 1000px; width: auto;}
            header .tel {position: ;}
            .nail {top: 190px;}
            .photo_banner {top: 10px;}
            #index video {min-width: 100%;}
        }
        @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
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {  
            #index footer .inner {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%; max-width: 1120px; padding: 0 2%; box-sizing: border-box;}
            #index footer .inner .w320 {flex: 0 1 320px; width: auto;}
            #index footer .inner .f_bn {flex: 0 1 640px; width: auto;}
            footer .inner {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%; max-width: 1120px; padding: 0 2%; box-sizing: border-box;}
            footer .inner .w320 {flex: 0 1 320px; width: auto;}
            footer .inner .f_bn {flex: 0 1 640px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            #index footer .inner {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            #index footer .inner .w320 {flex: 0 1 auto; width: auto;}
           #index footer .inner .f_bn {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; flex: 0 1 auto; width: auto; margin-bottom: 30px;}
            footer .inner {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            footer .inner .w320 {flex: 0 1 auto; width: auto;}
           footer .inner .f_bn {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; flex: 0 1 auto; width: auto; margin-bottom: 30px;}
           }




/*=================================================
       home
=================================================*/
#index main .bg_blue .inner .f_right.w570.wave_rss h2 {padding-bottom: 70px;} 

@media screen and (max-width: 1280px) {
            .miryoku_col .btn {top: 75%;}
        }
        @media screen and (max-width: 1200px) {  
            .bus_info {width: 100%; max-width: 1100px;}
            .bus_info .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 20px;}
            .bus_left {flex: 0 1 600px; width: auto;}
            .bus_right {flex: 0 1 400px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            #header_wrap {margin-top: 80px;}
            .f_bn a {margin-right: 0;}
            .miryoku {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; }
            .miryoku_col {flex: 0 1 360px; width: auto;}
            .sns {padding: 40px 2%;}
            .sns .inner {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px;}
            .sns .inner .w400 {flex: 0 1 400px; width: auto; margin-bottom: 30px;}
            .sns .inner .w507 {flex: 0 1 570px; width: auto;}
            #gallery_list {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; }
            #index .tenki .btn {width: 100%;}
            .plan {padding: 40px 2%;}
            .plan_rss {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px;}
            .plan_rss div {margin-right: 0;}
            .plan_search form {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
            .plan_search form h4 {float: none; flex: 0 1 100%; background: #78cdff; margin-bottom: 0; padding-bottom: ; text-align: center;}
            .plan_search form table {flex: 0 1 100%; width: auto;}
            .plan_search form .box {flex: 0 1 auto; width: 100%; background: #78cdff; text-align: center;}
            .plan_search form .f_right {float: none;}
            .access {height: auto;}
            .access .access_map {position: static; text-align: center;}
            .root  {padding: 40px 2%;}
            .root .inner .box {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px;}
            .root .inner .box .bus_left {margin-bottom: 0;}
            .root .inner .box .w480 {flex: 0 1 480px; width: auto;}
            p.bus_title {padding-top: 0;}
            .root .inner .bus_info .box {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px;}
            .bus_left {flex: 0 1 auto; width: auto;}
            .bus_right {flex: 0 1 auto; width: auto;}
            .btn_270 {width: ; margin-top: 30px;}
            #index main .bg_blue .inner .bass_btn {width: 100%; max-width: 620px;}
            #index main .bg_blue .inner .w310.m_t60.index_banner_box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; gap: 10px; width: 100%; max-width: 620px; padding-left: 0;}
            .w310 div {flex: 0 1 310px; width: auto; margin: 0;}
            .tenki {padding: 40px 2%;}
        }
        @media only screen and (max-width: 767px) {
            #header_wrap , #mainVisual {height: auto !important;}
            .plan_search table {height: auto;}
            .plan_search tr {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px; margin-top: 20px;}
            .plan_search td {background: none;}
            .plan_search td.sp_on {padding-top: 15px;}
            .plan_search td br {display: none;}
            .plan_search td span {margin-right: 5px;}
            .plan_search tr td:first-child {padding-left: 0;}
            .access iframe {width: 100%; height: 350px; margin-left: 0;}
            #index main .bg_blue .inner .w310.m_t60.index_banner_box {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .w310 div {flex: 0 1 auto; width: auto; max-width: 310px; margin: 0;}
            p.center { text-align: left;}
            .sns .inner .w400 {flex: 0 1 auto; width: auto; margin-bottom: 30px;}
            .sns .inner .w507 {flex: 0 1 auto; width: auto;}

        }
        @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_btn {flex-wrap: wrap; justify-content: center; gap: 10px;}
            .cui01, .bg_kaiseki, .bg_bbq, .bg_fugu, .bg_kani,.bg_gyu, .bg_bath , .cui02 {padding: 40px 2%;}
            .cui02 .box {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px;}
            .cui02 .box .w480 {width: 100%; max-width: 480px;}
            .cuisine_btn {flex-wrap: wrap; justify-content: center; max-width: 500px; margin: 40px auto 0;}
            .cuisine_btn li {flex: 0 1 49%;}
        }
        @media only screen and (max-width: 767px) {
            .bx-pager, .bx-pager2, .bx-pager3, .bx-pager4, .bx-pager5 {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 5px; position: static; margin-top: 5px;}
            .bento {width: 100%; }
            .bento + img {float: none; text-align: center;}
            th {white-space: nowrap;}
            .cuisine_btn li {flex: 0 1 auto;}
        }
        @media only screen and (max-width: 560px) {
        }
 
/*=================================================
       facility
=================================================*/
.ro03 .btn {background: none;}

@media screen and (max-width: 1380px) {
            .photo_gallery #gallery_wrap {width: 100%; padding: 0 2%; box-sizing: border-box;}
            .photo_gallery #gallery_list {justify-content: center;}
            .photo_gallery #gallery_list li {flex: 0 1 330px;}
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
          .ro01 , .ro02 , .ro03 , .enkai {padding: 40px 2%;}
          .enkai {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 10px;}
          .ro02 .inner {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
          .ro02 .inner .w480 {flex: 0 1 auto; width: 100%; max-width: 480px;}
        }
        @media only screen and (max-width: 767px) {
            ul.facility {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: ;}
            ul.facility li {flex: 0 1 47%; margin: 0 10px 10px 0;}
            .ro03 th , .ro03 td {display: block;}
            .ro03 th {width: 100%;}
            .ro03 td {padding: 20px 10px 20px;}
            .ro03 td input , .ro03 td textarea {width: 90%;}
            .enkai p {text-align: left;}
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       bar
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
            #bar .bg_blue {padding: 40px 2%;}
            .hama {height: auto;}
            .hama_photo {position: static;}
            .bbq_txt  {position: static; margin-top: 10px; text-align: right;}
            #bar .box {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; margin-top: 30px;}
            #bar .box .w460 {width: 100%; max-width: 460px;}
            #bar .box .w460 p {margin-top: 20px;}
            .service_no {flex: 0 0 90px;}
        }
        @media only screen and (max-width: 767px) {
            .service_box {flex-wrap: wrap; flex-direction: column; align-items: center;}
            .service {padding: 20px 2%;}
            .service_no {flex: 0 0 auto; margin-right: 0; margin-bottom: 30px;}
            .bbq_txt  {margin-top: -10px; text-align: left;}
        }
        @media only screen and (max-width: 560px) {
        }
  
/*=================================================
       tourism
=================================================*/

@media screen and (max-width: 1280px) {
            .tourism .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 20px; margin-top: 20px;}
            .tourism .box .w460 {flex: 0 1 460px; width: auto;}
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
            #tourism .bg_blue {padding: 40px 2%;}
            .tourism .w310  {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px;}
            .tourism .w310:before {display: none;}
            .tourism .w310 div {margin-bottom: 50px;}
            
        }
        @media only screen and (max-width: 767px) {
            .tourism .box {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .tourism .box img {margin-bottom: 20px;}
            .tourism .box .w460 {flex: 0 1 auto; width: auto; max-width: 460px;}
            .tourism .w310 div {max-width: 310px;}
        }
        @media only screen and (max-width: 560px) {
        }
          
/*=================================================
       print
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
            #print {padding: 40px 2% 0;}
        }
        @media only screen and (max-width: 767px) {
            #print p.center {text-align: center;}
            #print .w480 {width: 100%; max-width: 480px;}
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       fax
=================================================*/

@media screen and (max-width: 1280px) {
            #fax {margin: 0; padding: 10px 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            #fax th , #fax td {display: block; width: 100%; height: auto !important; text-align: left !important;}
            #fax td p {text-align: left !important;}
        }
        @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) {
        }
        @media only screen and (max-width: 767px) {
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       camp
=================================================*/

@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) {
        }