@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: 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) {
        }
        @media screen and (max-width: 1100px) {
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        body {padding-top: 0;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .container  {width: 100%; max-width: 1000px;}
        #mainVisual::before {padding-top: 450px;}
        #facilities  #mainVisual , #cuisine #mainVisual , #sightseeing #mainVisual , #access #mainVisual , #news #mainVisual {background-size: cover; }
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        #mainVisual::before {padding-top: 350px;}
        #mainVisual h2 {padding-top: 100px;}
        .invoice_popup {z-index: 400 !important;}
        }
        @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: 1100px) {  
        #footer .container {width: 100%; max-width: 1060px;} 
        #footer_nav {left: 35%;}
        }
        @media screen and (max-width: 1024px) {
            #footer , #copyright {width: 100%;}
            #footer .container {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between;}
            #footer_add {flex: 0 1 385px; width: auto;}
            #footer_img {flex: 0 1 395px; width: auto;}
        }
        @media only screen and (max-width: 767px) {
            #footer .container {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; background: url(../img/footer_gaikan.png) no-repeat right bottom / 50% auto; padding-bottom: 30%}
            #footer_add {flex: 0 1 auto; width: auto;}
            #footer_img {display: none;}
        }
        @media only screen and (max-width: 560px) {
        }



/*================================================
       top
=================================================*/

#index #cont02 .cont {padding: 0px 10px 75px;}

@media screen and (max-width: 1280px) {
            #index #main_movie {height: auto;}
            #index #main_movie:before {display: block; content: ""; padding-top: 56.25%;}
            #index #main_movie video {top: 0; left: 0; width: 100%; height: 100%; transform: none;}
        }
        @media screen and (max-width: 1200px) {   
            #index #plansearch {width: 96%; max-width: 1100px; height: auto; padding: 20px 2% 20px; box-sizing: border-box;}
            #index #plansearch .container {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; gap: 10px;}
            #index #plansearch .container h3 {flex: 0 1 12.7vw; width: auto; margin-right: 0; padding-right: 0;}
            #index #plansearch .container .plan_form {flex: 0 1 760px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            #index #main_movie {margin-top: 30px;}
            #index #plansearch {height: auto;}
            #index #plansearch .container {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            #index #plansearch .container h3 {flex: 0 1 auto; width: auto; border-right: none; border-bottom: dotted 1px #764; margin-right: 0; padding-right: 0;}
            #index #plansearch .container .plan_form {flex: 0 1 auto; width: auto;margin-top: 20px;}
            form {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 10px;}
            .check_in {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; gap: 5px;}
            .search_btn {width: 100%; text-align: center; margin-top: 20px;}
            #index #news {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: center; gap: 50px;}
            #index #news h4 {padding-right: 0;}
            #index #news .rssArea {margin-left: 0;}
            #index #cont01 {height: auto; padding: 50px 0 0;}
            #index #cont01 .txtArea {position: static; display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: center;}
            #index #cont01 .cover {background: url(../img/index/cont01_cover_sp.png) no-repeat left bottom / 120% auto;  padding: 0 2% 40%;}
            #index #cont02 {padding: 20px 2% 0;}
            #index #cont02 .container {flex-wrap: wrap; justify-content: center; gap: 20px;}
            #index #cont02 .cont {flex: 0 1 320px; width: auto; margin-right: 0;}
            #index #cont03 {padding: 70px 2%;}
            #index #cont03 .cont {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
            #index #cont03 .cont #mini {flex: 0 1 295px; width: auto;}
            #index #cont03 .bnrArea {gap: 20px; padding: 40px;}
            #index #cont04 {padding: 60px 2%;}
        }
        @media only screen and (max-width: 767px) {
            #index #plansearch {top: 0; margin-top: 20px;}
            #index #news {display: flex; flex-wrap: wrap; flex-direction: column; gap: 20px; padding: 0 2%;}
            #index #news h4 {width: 100%; border-right: none; border-bottom: dotted 1px; text-align: center;}
            #index #cont01 .txtArea {position: static; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%;}
            #index #cont01 .txtArea p {margin-top: 20px;}
            #index #cont01 .cover {background: url(../img/index/bg.png) no-repeat center top / auto 50% , url(../img/index/cont01_cover_sp.png) no-repeat left bottom / 100% auto;  padding: 0 2% 40%;}
            #index #cont03 .bnrArea {flex-wrap: wrap; flex-direction: column-reverse; align-items: center; padding: 20px 2%;}
        }
        @media only screen and (max-width: 560px) {
        }
 
/*=================================================
       facilities
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
            .room {display: flex; flex-wrap: wrap; flex-direction: column; gap: 20px; max-width: 600px; margin: 0 auto 60px;}
            #facilities #cont01 {padding: 0 2%;}
            #cont01 .img_wrap  {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 10px; width: 100%;}
            #facilities #cont01 .img_wrap .pager {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 10px; width: 100%;}
            #facilities .pager .cont {margin-left: 0;}
            #facilities #cont01 .content .equipment {text-align: center;}
            #facilities #cont01 .content .txtArea {margin: 0 auto;}
            #facilities #cont01 .content .equipment {margin-bottom: 0;}
            #facilities #cont02 .container {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 600px;}
            #facilities #cont02 {padding: 0 2%;}
            #facilities #cont03  {padding: 60px 2%;}
            #facilities #cont03 .container {justify-content: center; gap: 10px;}
            #facilities #cont03 .container div {margin: 0 0 20px;}
            #facilities #cont04 {padding: 60px 2%;}
            #btm_bnr {width: 96%; max-width: 1000px; gap: 20px; padding: 40px;}
        }
        @media only screen and (max-width: 767px) {
            #facilities #cont01 .img_wrap .img_cont {width: 100%; height: auto;}
            #facilities #cont01 .img_wrap .img_cont:after {display: block; content: ""; padding-top: 66.66%;}
            #facilities #cont01 .img_wrap .img_cont .cont {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            #facilities #cont02 .container .txtArea {width: auto;}
            #btm_bnr {flex-wrap: wrap; flex-direction: column-reverse; align-items: center; padding: 50px 2% 20px;}
            #facilities .aligncenter.is-scrollable {overflow-x: scroll;}
            #facilities .aligncenter .imgArea {width: 1000px;}
            #facilities #cont02 h3.ttl + p {text-align: left;}
            #facilities #cont01 .content .txtArea {width: auto; max-width: 370px;}
            #facilities #cont01 .content h4 {width: 100%; max-width: 370px;}
        }
        @media only screen and (max-width: 560px) {
            #facilities #cont03 .container div {width: 48%;}
        }
 
/*=================================================
       cuisine
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
            #cuisine #contents {padding-top: 0;}
            #cuisine #cont01 {top: 0; height: auto; margin-bottom: 0; padding: 70px 2% 50px;}
            #cuisine #cont01 .container {max-width: 480px;}
            #cuisine #cont01 .txtArea , #cuisine #cont01 .imgArea {position: static; width: auto; max-width: 470px;}
            #cuisine #cont01 .txtArea h3 {margin: 0 0 25px;}
            #cuisine #cont02 {height: auto; padding: 80px 2%;}
            #cuisine #cont02 .container {max-width: 560px;}
            #cuisine #cont02 .txtArea {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: flex-end; gap: 20px; float: ; width: auto; margin: 50px auto 30px;}
            #cuisine #cont02 .txtArea h3 {position: static;}
            #cuisine #cont02 .img01 {position: static;}
            #cuisine #cont03 {height: auto; padding: 0 2%;}
            #cuisine #cont03 .container {max-width: 560px;}
            #cuisine #cont03 .txtArea {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: flex-end; gap: 20px; float: left; width: auto; margin: 50px auto 30px;}
            #cuisine #cont03 .txtArea h3 {position: static;}
            #cuisine #cont03 .img01 {float: none;}
            #cuisine #cont03 .img02 {position: static;}
            #cuisine #cont04 {height: auto; padding: 30px 2%;}
            #cuisine #cont04 .container {max-width: 510px;}
            #cuisine #cont04 .txtArea {float: none; width: auto; margin-bottom: 30px;}
            #cuisine #cont04 .img01 , #cont04 .img02 {position: static;}
        }
        @media only screen and (max-width: 767px) {
            #cuisine #cont02 .txtArea {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: auto;}
            #cuisine #cont03 .txtArea {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       sightseeing
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
            #sightseeing #cont01 {padding: 0 2%;}
            #sightseeing #cont02 {padding: 0 2%;}
            #sightseeing #cont02 .kankou_list ul {justify-content: center; gap: 10px;}
            #sightseeing #cont02 .kankou_list li {margin-right: 0;}
        }
        @media only screen and (max-width: 767px) {
        }
        @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 #cont01 {padding: 0 2%;}
            #access #cont02 {padding: 0 2% 80px;}
            #access #cont02 .container {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; gap: 20px; }
            #access #cont02 .txtArea {width: 100%; max-width: 400px; height: auto;}
            #access #cont03 {padding: 70px 2% 20px;}
        }
        @media only screen and (max-width: 767px) {
            #access #cont02 #g-map {width: 100%; height: 300px;}
            #access #cont03 .container {max-width: 480px;}
            #access #cont03 .cont {text-align: center;}
            #access #cont03 .cont h5 {text-align: left; margin-bottom: 20px;}
            #access #cont03 h4 {margin-bottom: 30px;}
        }
        @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 #contents {padding: 30px 2% 0;}
        }
        @media only screen and (max-width: 767px) {
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       privacypolicy
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {   
        }
        @media screen and (max-width: 1024px) {
            #privacypolicy {padding: 70px 2%;}
            #privacypolicy .container {width: 100%; max-width: 750px; padding: 60px 2% 50px;}
        }
        @media only screen and (max-width: 767px) {
            #privacypolicy h4.deco {font-size: 1.8rem;}
        }
        @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) {
        }

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