@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;}
    
@media screen and (max-width: 1280px) {
        html {min-width: 100%;}
        body {min-width: 100%; overflow-x: hidden;}
        img {max-width: 100%; height: auto;}
        .pc_oon {display: none;}
        .sp_oon {display: block;}
        .wrapper {min-width: 100%;}
        .wrap {width: 100%;}
        article {padding: 0 2%; box-sizing: border-box; overflow: hidden;}
        .page-title h2 {width: 100%;}
        .inner {width: 100%; max-width: 1080px;}
        .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; gap: 10px;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1100px) {
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .page-header {margin-top: 80px;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        .page-header {height: 300px;}
        .flex {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%; gap: 10px;}
        .title_style01 {font-size: 24px; padding: 5px 10px 10px 10px;}
        }
        @media only screen and (max-width: 560px) {
        }
        

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

@media screen and (max-width: 1280px) {
            .header {padding: 0 1%; box-sizing: border-box;}
            .navigation-wrap {flex-wrap: nowrap; width: 100%;}
            .navigation-wrap .logo {flex: 0 1 221px;margin-right: 30px;}
            .navigation-wrap .navigation {flex: 0 1 826px; width: auto;}
        }
        @media screen and (max-width: 1200px) {
        }
        @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) {
            .footer-content {padding: 50px 2%;}
        }
 
/*=================================================
       toppage
=================================================*/

@media screen and (max-width: 1280px) {
            .cb-slideshow li div p {left: 30px; bottom: 5px; margin: 0;}
            .slide_hover_text {right: 5%;}
            .index_intro {margin-left: -2%; margin-right: -2%;}
            .index_intro .box {width: 100%;}
            .index_service {margin-left: -2%; margin-right: -2%; padding: 80px 2%;}
            .index_info {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; width: 100%;}
            .index_info .float-l {flex: 0 1 600px; width: auto; margin-bottom: 50px;}
            .index_info .float-r {flex: 0 1 550px; width: auto;}
            #plan_rss {width: 100%; max-width: 600px;}
            #mini {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: center; padding: 10px;}
            #mini #minileft {flex: 0 1 330px; width: auto; padding: 0;}
            #mini #miniright {flex: 0 1 240px; width: auto; margin-right: 10px;}
            #mini #miniright img {margin: 0;}
            
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            #slide {height: 480px; margin-top: 80px;}
            .cb-slideshow li div p {left: 5px; bottom: 5px; margin: 0;}
            .slide_hover_text {right: 0;}
        }
        @media only screen and (max-width: 767px) {
            #slide {height: 300px;}
            .cb-slideshow li div p {left: 0; bottom: 5px; margin: 0;}
            .slide_hover_text {display: none;}
            .index_point .list_box .box {flex-direction: column;}
            .index_point .list_box .box:nth-of-type(2) {flex-direction: column-reverse;}
            .index_point .list_box .box .img_box {width: auto; margin-top: 20px;}
            .index_point .list_box .box .text_box {width: auto;}
            #mini {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; max-width: 300px; margin: 30px auto 0;}
            #mini #minileft {flex: 0 1 auto; width: auto; padding: 0;}
            #mini #miniright {flex: 0 1 auto; width: auto; margin-right: 0; margin-bottom: 10px;}
            .index_point h2 , .index_service h2 , .index_info h2 , .index_point h3 {font-size: 25px;}
        }
        

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

@media screen and (max-width: 1280px) {
            .setsubi-box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; max-width: 1080px; padding: 0;}
            .setsubi-box:nth-of-type(even) {flex-direction: row-reverse;}
            .setsubi-box .setsubi-text {flex: 0 1 650px; width: auto; padding: 10px;}
            .setsubi-box .float-l.w360 {flex: 0 1 360px; width: auto;}
            .setsubi-box .float-r.w360 {flex: 0 1 360px; width: auto;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            .setsubi-box {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap:10px; max-width: 380px; margin-bottom: 50px;}
            .setsubi-box:nth-of-type(even) {flex-direction: column;}
            .setsubi-box:last-of-type {margin-bottom: 0;}
            .setsubi-box .setsubi-text {flex: 0 1 auto; width: 100%; padding: 0;}
            .setsubi-box .float-l.w360 {flex: 0 1 auto; width: auto;}
            .setsubi-box .float-r.w360 {flex: 0 1 auto; width: auto;}
        }
  
/*=================================================
       cuisine
=================================================*/
    
@media screen and (max-width: 1280px) {
            #cuisine .float-l.w600 {flex: 0 1 600px; width: auto;}
            #cuisine .float-r.w450 {flex: 0 1 450px; width: auto;}
            #cuisine .float-r.w600 {flex: 0 1 600px; width: auto;}
            #cuisine .float-l.w450 {flex: 0 1 450px; width: auto;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            #cuisine .float-l.w600 {flex: 0 1 auto; width: auto;}
            #cuisine .float-r.w450 {flex: 0 1 auto; width: auto; margin-top: 10px;}
            #cuisine .float-r.w600 {flex: 0 1 auto; width: auto;}
            #cuisine .float-l.w450 {flex: 0 1 auto; width: auto; margin-top: 10px;}
        }
            
/*=================================================
       facilities
=================================================*/

@media screen and (max-width: 1280px) {
            .room-box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; max-width: 1080px; padding: 0; gap: 10px;}
            .room-box .room-text {flex: 0 1 650px; width: auto; padding: 10px;}
            .room-box .float-r.w480 {flex: 0 1 480px; width: auto;}
            #facilities .float-l.w600 {flex: 0 1 600px; width: auto;}
            #facilities .float-r.w450 {flex: 0 1 450px; width: auto;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            .room-box .room-text {padding: 0;}
        }
        @media only screen and (max-width: 767px) {
            .room-box {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; max-width: 500px;}
            .room-box .room-text {flex: 0 1 auto; width: 100%; padding: 0;}
            .room-box .float-r.w480 {flex: 0 1 auto; width: auto;}
            #facilities .float-l.w600 {flex: 0 1 auto; width: auto;}
            #facilities .float-r.w450 {flex: 0 1 auto; width: auto;}
            #facilities .float-r.w450 p {padding-top: 10px;}
            .bihin-box {padding: 10px;}
        }
        
/*=================================================
       price
=================================================*/

@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) {
            .biz_box h3, .camp_box h3 {font-size: 24px;}
        }
        
/*=================================================
       access
=================================================*/
@media screen and (max-width: 1280px) {
            .map {position: relative; padding-top: 50.83%; width: 100%; height: auto;}
            .map iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }

/*=================================================
       tourism
=================================================*/
@media screen and (max-width: 1280px) {
            .tourism-box .row {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; gap:10px;}
            .tourism-box:nth-of-type(even) .row {flex-direction: row-reverse;}
            .tourism-box .row .float-l.w270 {flex: 0 1 270px; width: auto;}
            .tourism-box .row .float-r.w750 {flex: 0 1 750px; width: auto;}
            .tourism-box .row .float-r.w270 {flex: 0 1 270px; width: auto;}
            .tourism-box .row .float-l.w750 {flex: 0 1 750px; width: auto;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            .tourism-box {padding: 0 0 20px;}
        }
        @media only screen and (max-width: 767px) {
            .tourism-box {margin-bottom: 50px; padding: 0;}
            .tourism-box:last-of-type {margin-bottom: 0;}
            .tourism-box .row {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%; gap:10px;}
            .tourism-box:nth-of-type(even) .row {flex-direction: column;}
            .tourism-box .row .float-l.w270 {flex: 0 1 auto; width: auto;}
            .tourism-box .row .float-r.w750 {flex: 0 1 auto; width: auto;}
            .tourism-box .row .float-r.w270 {flex: 0 1 auto; width: auto;}
            .tourism-box .row .float-l.w750 {flex: 0 1 auto; width: auto;}
            .table th , .table td {padding: 10px 5px;}
        }
        
/*=================================================
       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) {
        }
          
        }