@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;}
            #bn-online {top: 250px;}
            #bn-tel {top: 377px;}
            #bn-news {top: 415px;}
        }
        @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;}
        #top {margin-top: 80px;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        #page-top {right: 5px;}
        #page-top a {width: 90px;}
        }
        @media only screen and (max-width: 560px) {
        }
        

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

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

/*=================================================
       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) {
        }
        @media only screen and (max-width: 560px) {
        }



/*=================================================
       home
=================================================*/
#home #search .search_box .plan_form form .check_in p #datepicker {width: 95px;}
@media screen and (max-width: 1280px) {
            #home #search .search_box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; max-width: 1000px;}
            #home #search .search_box .search_title {flex: 0 1 230px; width: auto;}
            .plan_form {flex: 0 0 655px; width: auto;}
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
            #search {padding: 30px 2%;}
            #home #search .search_box {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%; max-width: 1000px;}
            #home #search .search_box .search_title {flex: 0 1 auto; width: auto;}
            .plan_form {flex: 0 0 auto; width: auto; margin: 20px 0; padding-left: 0;}
            form {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 10px;}
            .plan_form .check_in , .plan_form .guests , .plan_form .check_in02 , .plan_form .type  {margin: 0;}
            #home #sec01 {height: auto; padding: 0 2% 50px;}
            #home #sec01 .outer {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; gap: 20px; width: 100%; max-width: 1000px;}
            #home #sec01 .outer .pic {width: auto; max-width: 420px;}
            #home #sec01 .outer .text {width: 100%; max-width: 554px;}
            #home #sec02 {width: 100%; max-width: 1020px; padding: 0 2%;}
            #home #sec02 .box {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px;}
            #home #sec02 .inner {flex: 0 1 320px; width: auto; margin: 50px 0 0;}
            #plan {padding: 0 2%;}
            #plan .outer {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px; width: 100%; max-width: 1020px;}
            #plan .inner {flex: 0 1 320px; width: auto; margin: 0;}
            #home #sec03 {width: 100%; max-width: 1000px; gap: 10px; padding: 0 2%;}
        }
        @media only screen and (max-width: 767px) {
            #top_news {flex-direction: column; padding: 0 2%;}
            #top_news h3 {margin-bottom: 30px;}
            #top_news .news_box {width: 100%;}
            #home #sec01 .outer .text p {padding: 20px 2%; text-align: left;}
            #home #sec03 div {width: 50%;}
        }
        @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 #sec01 {padding: 0 2%;}
            #cuisine #sec01 h3.trans , #cuisine #sec01 .trans-up {opacity: 1; transform: none;}
            #cuisine #sec01 , #cuisine #sec01 .outer {width: 100%; max-width: 1000px;}
            #cuisine #sec01 h4 {width: 100%; max-width: 720px;}
            #cuisine #sec01 .outer {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 10px;}
            #cuisine #sec01 .outer .inner {flex: 0 1 auto; width: auto; max-width: 480px;}
            .o_flex {flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px;}
            .o_box {width: 100%; max-width: 490px;} 
            #sake .box {position: relative; max-width: 450px; margin: 0 auto;}
            #sake .box:after {display: block; content: ""; padding-top: 66.66%;}
            #sake .slider {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            #cuisine #sec02 {width: 100%; max-width: 1020px; padding: 0 2%;}
            #cuisine #sec02 .box {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px;}
            #cuisine #sec03 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 1000px; padding: 0 2%;}
            #cuisine #sec03 .inner.left {margin-bottom: 50px;}
        }
        @media only screen and (max-width: 767px) {
            #cuisine #sec01 p {text-align: left;}
            #cuisine #sec01 .outer .thumb {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 1%;}
            #cuisine #sec01 .outer .thumb a {flex: 0 1 32%;}
            #cuisine #sec01 .outer .thumb img {width: 100%; margin: 0 0 10px; object-fit: cover;}
            #cuisine #sec03 .inner {width: 100%; max-width: 480px;}
            #cuisine #sec03 h3 {width: 100%; max-width: 480px;}
        }
        @media only screen and (max-width: 560px) {
        }
 
/*=================================================
       facilities
=================================================*/
.none {display: none;}
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {   
        #facilities #sec02 {width: 100%; max-width: 1040px; padding: 0 2%; box-sizing: border-box;}
        #facilities #sec02 .outer01 {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 50px; width: 100%; max-width: 1040px; margin-bottom: 50px;}
        #facilities #sec02 .inner {width: auto; max-width: 480px; padding: 0;}
        }
        @media screen and (max-width: 1024px) {
            #facilities #sec01 {width: 100%; max-width: 1000px; padding: 0 2%;}
            #facilities #sec01 h3.trans , #facilities #sec01 .trans-up {opacity: 1; transform: none;}
            #facilities #sec01 .photo {width: 100%; max-width: 780px;}
            #facilities #sec03 {width: 100%; max-width: 1000px; padding: 0 2%;}
            #facilities #sec03 .outer {flex-wrap: wrap; flex-direction: column-reverse; align-items: center; width: 100%; max-width: 1000px;}
            #facilities #sec03 .bath_txt {width: 100%; max-width: 560px;}
            #facilities #sec03 .bath_img {width: 100%; max-width: 560px;}
            #facilities #sec03 .bath_sign {left: 0; width: 40%;}
            #facilities #sec04 {width: 100%; max-width: 1000px; padding: 0 2%;}
            #facilities #sec04 .box  {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 50px;}
        }
        @media only screen and (max-width: 767px) {
            #facilities #sec01 p , #facilities #sec02 p , #facilities #sec03 p {text-align: left;}
            #facilities #sec04 .inner {width: 100%; max-width: 480px;}
            #facilities #sec04 h3 {width: 100%; max-width: 480px;}
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       hakuba
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
            #hakuba #sec01 {width: 100%; max-width: 1000px; padding: 0 2%;}
            #hakuba #sec01 h3.trans , #hakuba #sec01 .trans-up {opacity: 1; transform: none;}
            #hakuba #sec01 .outer.w-01 {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px;width: 100%; max-width: 1000px;}
            #hakuba #sec01 .outer img {margin-right: 0;}
            #hakuba #sec02 {width: 100%; max-width: 1000px; padding: 0 2%;}
            #hakuba #sec02 .outer {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 16px; width: 100%; max-width: 700px;}
            #hakuba #sec02 .outer img {margin-right: 0;}
        }
        @media only screen and (max-width: 767px) {
            #hakuba #sec01 p , #hakuba #sec02 p {text-align: left;}
            #hakuba #sec02 .outer img {width: 47%;}
        }
        @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) {
            #camp #sec01 {width: 100%; max-width: 1000px; padding: 0 2%;}
            #camp #sec01 h3.trans , #camp #sec01 .trans-up {opacity: 1; transform: none;}
            #camp #sec01 .outer01 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 1000px;}
            .camp_box01 {height: auto;}
            #camp #sec01 .outer02 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 1000px;}
            #camp #sec01 .outer02 img.photo {float: none;}
            #camp #sec02 {width: 100%; max-width: 1000px; padding: 0 2%;}
            #camp #sec02 .outer {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 1000px;}
        }
        @media only screen and (max-width: 767px) {
            .camp img {border: 3px solid #aaa085;}
            #camp #sec01 .outer02 h4 , #camp #sec01 .outer02 .text {width: 100%; max-width: 480px;}
            #camp #sec01 p {text-align: left;}
            #camp #sec02 h3 {width: 100%; max-width: 720px;}
            #camp #sec02 .outer .inner {width: 100%; max-width: 480px;}
        }
        @media only screen and (max-width: 560px) {
        }
          
/*=================================================
       fee
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
            #fee #sec01 h3.trans , #fee #sec01 .trans-up {opacity: 1; transform: none;}
            #fee #sec01 , #fee #sec02 {width: 100%; max-width: 1000px; padding: 0 2%;}
        }
        @media only screen and (max-width: 767px) {
            #fee #sec01 h4 {width: 100%; max-width: 720px;}
            #fee #sec02 h4, #fee #plan h4 {width: 100%; max-width: 720px;}
            .text-left {text-align: left;}
        }
        @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 #sec01  {width: 100%; max-width: 1000px; padding: 0 2%;}
            #access #sec01 h3.trans , #access #sec01 .trans-up {opacity: 1; transform: none;}
            #access .googlemap {position: relative; width: 100%; max-width: 1000px; height: auto;}
            #access .googlemap:after {display: block; content: ""; padding-top: 45%;}
            #access .googlemap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            #access #sec02 {width: 100%; max-width: 1016px; padding: 0 2%;}
            #access #sec02 .outer {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px; width: 100%; max-width: 1016px;}
            #access #sec02 .outer .inner {margin: 30px 0 0;}
        }
        @media only screen and (max-width: 767px) {
            #access .googlemap {position: relative; width: 100%; max-width: 1000px; height: 300px;}
            #access .googlemap:after {display: block; content: ""; padding-top: 0;}
        }
        @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) {
            #news #sec01 {opacity: 1; transform: none;}
            #news #sec01 .outer {width: 100%; max-width: 1000px; padding: 0 2%;}
        }
        @media only screen and (max-width: 767px) {
        }
        @media only screen and (max-width: 560px) {
            ul#newsList li {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px;}
        }

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