@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;}
.mb-20 {margin-bottom: 20px;}
.small {font-size: 12px; color: #888;}
.none {display: none;}
.popup_2 {z-index: 100 !important;}
.page-title h2 img {padding-top: 14px;}
@media screen and (max-width: 1280px) {
        html {min-width: 100%; overflow-x: hidden;}
        body {min-width: 100%; height: auto; overflow: hidden;}
        img {max-width: 100%; height: auto;}
        .pc_oon {display: none;}
        .sp_oon {display: block;}
        .wrapper {min-width: 100%;}
        }
        @media screen and (max-width: 1200px) {
            .page-title {background-position: -230px center;}
            .page-title h2, .page-title h1 {width: 100%; max-width: 1180px; padding: 0 1%; box-sizing: border-box;}
            .wrap  {width: 100%; max-width: 1180px; padding-left: 2%; padding-right: 2%; box-sizing: border-box;}
            .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 1%;}
            .flex.re {flex-direction: row-reverse;}
            .flex .w150 {flex: 0 1 7%; width: auto;}
            .flex .w990 {flex: 0 1 90%; width: auto;}
            .flex .w570 {flex: 0 1 570px; width: auto;}
            .flex .w530 {flex: 0 1 530px; width: auto;}
            .flex .w120 {flex: 0 1 120px; width: auto;}
            .flex .w660 {flex: 0 1 660px; width: auto;}
            .flex_box {position: relative;}
            .flex_box:after {display: block; content: ""; padding-top: 59.64%;}
            .flex_box .flexslider {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            .cu_t {background-position: right center; box-sizing: border-box;}
        }
        @media screen and (max-width: 1100px) {
            .inner {width: 100%; max-width: 1080px; padding-left: 2%; padding-right: 2%; box-sizing: border-box;}
            .wrap .inner {padding-left: 0; padding-right: 0;}
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        body {padding-top: 0;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .page-header-wrap {top: 0; margin-bottom: 0; margin-top: 80px;}
        .page-header-wrap , .page-header {height: 550px;}
        .w--780 {width: 100%; max-width: 780px;}
        .back-1 {left: 88%;}
        .back-2 {left: 15%;}
        .back-3 {left: 83%;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        .page-title {display: flex; align-items: center; height: 56px; padding-left: 10px;}
        .page-title h1 img , .page-title h2 img {padding-top: 0; width: 60%;}
        .page-header-wrap , .page-header {height: 300px;}
        .flex.pb-50 {padding-bottom: 0;}
            .flex {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; }
            .flex .w150 {flex: 0 1 auto; width: auto; margin-bottom: 30px;}
            .flex .w990 {flex: 0 1 auto; width: auto;}
            .flex .w570 {flex: 0 1 auto; width: 100%; max-width: 570px; margin-bottom: 30px;}
            .flex .w530 {flex: 0 1 auto; width: 100%; max-width: 530px; margin-bottom: 10px;}
            .flex .w120 {flex: 0 1 auto; width: auto; margin-bottom: 30px;}
            .flex .w660 {flex: 0 1 auto; width: 100%; max-width: 660px; margin-bottom: 50px;}
            .table th , .table td {display: block; width: 100%; padding: 10px 10px;}
        }
        @media only screen and (max-width: 560px) {
        }
        

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

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) { 
            .header-wrap.fixed .navigation-wrap {padding-top: 0;}
            .header-wrap.fixed .navigation {padding-top: 1%;}
            .header-wrap.fixed .info_box {margin-top: 0;}
            .header-wrap.fixed .reservation {position: absolute;}
            .header-wrap {padding: 0 1%; box-sizing: border-box;}
            .navigation-wrap {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; width: 100%; max-width: 1180px; padding-top: 55px;}
            .logo {flex: 0 1 240px; width: auto; margin-right: 10px; padding-top: 0;}
            .navigation {flex: 0 1 700px; width: 100%; max-width: 700px; margin-right: 0; padding-top: 0;}
            .navigation ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; gap: 1%; width: 100%;}
            .navigation ul li {padding: 0;}
            .info_btn {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; gap: 10px; flex: 0 0 180px; margin-top: -10px;}
            .info_btn p {position: static;}
            .navigation span {display: none;}
        }
        @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 .inner {width: 100%; max-width: 1080px; padding: 70px 2% 60px; box-sizing: border-box;}
        }
        @media screen and (max-width: 1024px) {
            footer .inner .w620 {float: none; width: 100%; max-width: 620px; margin: 0 auto; text-align: center;}
        }
        @media only screen and (max-width: 767px) {
        }
        @media only screen and (max-width: 560px) {
        }


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

@media screen and (max-width: 1280px) {
            #movie video {width: 120%;}
            .movie_txt1 {font-size: 2em; line-height: 1.6em;}
            .movie_txt2 {bottom: 390px; font-size: 1.2em;}
        }
        @media screen and (max-width: 1100px) { 
            .search-wrap {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center; background: none; width: 100%; max-width: 1080px; height: auto; border: 3px solid #262626;}
            .search-title {flex: 0 1 150px; width: auto; padding: 0; text-align: center;}
            .search-form {flex: 0 1 850px; background: url(../images/img/top/search-back2.png) repeat center center; width: auto;}
            .search-form form {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between;}
            .search-left {flex: 0 1 660px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            .movie_txt1 {top: 30px; bottom: auto; line-height: 1.6em;}
            .movie_txt2 {top:150px;bottom: auto;}
            #movie {position: relative; max-width: 100%; max-height: auto; min-height: auto; top: 0; margin-top: 80px; margin-bottom: 0;}
            #movie:after {display: block; content: ""; padding-top: 56.25%;}
            #movie video {display: block !important; width: 100%; height :100%;}
            .inner-s {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; max-width: 980px; padding: 0 2%;}
            .inner-s .w120 {flex: 0 1 120px; width: auto;}
            .inner-s .w820 {flex: 0 1 820px; width: auto;}
            .plan-box {width: 100%; max-width: 820px;}
            .plan-box a {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between;}
            .plan-box a .plan-img {flex: 0 0 200px; width: 100%; height: auto;}
            .plan-box a .plan-text {flex: 0 1 600px; width: 100%;}
            .search-wrap {display: flex; flex-wrap: wrap; flex-direction: column;}
            .search-title {flex: 0 1 auto; width: auto; padding: 20px;}
            .search-form {flex: 0 1 auto; width: auto;}
            .search-form form {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .search-left {flex: 0 1 auto; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 10px; width: auto; padding: 20px 2% 10px;}
            .search-left p {}
            .search-right {width: 100%; text-align: center;}
        }
        @media only screen and (max-width: 767px) {
            .movie_txt1 , .movie_txt2 {display: none;}
            .greeting {display: flex; flex-wrap: wrap; flex-direction: column; justify-content: ; height: auto; padding: 80px 2%;}
            .greeting h2 {position: static; right: 0; margin-bottom:50px;}
            .greeting p {position: static; right: 0; margin-top: ;} 
            .inner-s {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 50px;}
            .inner-s .w120 {flex: 0 1 auto; width: auto;}
            .inner-s .w820 {flex: 0 1 auto; width: auto;}
            .plan-box {width: 100%; max-width: 350px;}
            .plan-box a {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .plan-box a .plan-img {flex: 0 0 auto; }
            .plan-box a .plan-text {flex: 0 1 auto; height: auto; padding: 15px 10px 20px;}
            .search-wrap {padding: 5px;}
            .search-form {padding: 15px 0;}
            .search-left  {padding: 6px 0 0;}
            .search-form p {padding: 5px 0;}
            .g-three {float: none; width: 100%;}
        }
        @media only screen and (max-width: 560px) {
        }
 
/*=================================================
       spa
=================================================*/

@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) {
        }
 
/*=================================================
       cuisine
=================================================*/
.morning .w530 {margin-top: 30px;}

@media screen and (max-width: 1280px) {
            #jizake .ph {width: 200px; padding: 0;}
            #jizake .ph img {width: 100%;}
            #jizake table td:last-of-type {padding-left: 10px;}
        }
        @media screen and (max-width: 1200px) { 
        }
        @media screen and (max-width: 1024px) {
            table.w920 {width: 100%; max-width: 920px;}
        }
        @media only screen and (max-width: 767px) {
            .jizake {width: 100%; max-width: 570px; margin: 0 auto;}
            .jizake .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; margin-bottom: 30px;}
            .morning .w530 {float: none; width: 100%; max-width: 530px; margin:30px auto 0;}
        }
        @media only screen and (max-width: 560px) {
        }

/*=================================================
       facilities
=================================================*/
#baiten .img {width: 240px;}

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) { 
            .f-sec figure , .f-sec-2 .figure-1 {position: relative; left: 0; text-align: right;}
            .f-sec-2 .figure-2 {position: relative; left: 0; margin-top: 20px; text-align: right;}
            .f-sec .w90 , .f-sec-2 h3 {width: 16%;}
            .f-sec p  {position: static; width: auto; margin-top: 10px; margin-left: 18%;}
            .f-sec-2 p {width: 50%;}
        }
        @media screen and (max-width: 1024px) {
            .ouketu_box {padding: 2%; gap: 1%;}
            .ouketu_txt {width: 50%;} 
            .ouketu_img {width: 50%;}
            .f-sec .w90 , .f-sec-2 .w90 {top: -30px; width: 75px;}
            .f-sec p {position: relative; left: auto; top: auto; right: 0; max-width: 500px; margin-left: auto;}
            .f-sec , .f-sec-2 {height: auto; margin-top: 50px;}
            .f-sec-2 .box {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: center; }
            .f-sec-2 p {position: static; top : auto; left: auto; flex: 0 1 56%; width: auto; margin-top: 20px;}
            .f-sec-2 .figure-2  {right: auto; flex: 0 1 44%;}
            .wayou p , .wasitu p {margin-left: 0;}
        }
        @media only screen and (max-width: 767px) {
            .ouketu_box {flex-wrap: wrap; flex-direction: column; padding: 5% 2% 2%;}
            .ouketu_txt {width: 100%; margin-bottom: 30px;} 
            .ouketu_img {width: 100%;}
            #baiten {width: 100%; max-width: 650px;}
            #baiten .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; margin-bottom: 30px;}
            .f-sec .w90 {width: 20%; max-width: 90px;}
            .f-sec-2 .box {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; }
            .f-sec-2 p {position: static; top : auto; left: auto; flex: 0 1 auto; width: auto; margin-top: 20px;}
            .f-sec-2 .figure-2  {flex: 0 1 auto; align-self: flex-end; width: 65%;}
        }
        @media only screen and (max-width: 560px) {
        }
  
/*=================================================
       access
=================================================*/
  
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) { 
            .map {position: relative;}
            .map:after {display: block; content: ""; padding-top: 47%;}
            .map iframe {position: absolute; top: 0; left: 0 ; width: 100%; height: 100%;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            .map {position: relative; height: 350px;}
            .map:after {display: block; content: ""; padding-top: 0;}
            .root p.ml-50 {margin-left: 0;}
        }
        @media only screen and (max-width: 560px) {
        }
          
/*=================================================
       sightseeing
=================================================*/

.spot .flex {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: ;  gap: 20px;}
.three {flex: 0 1 340px; width: auto; margin-right: 0; margin-bottom: 50px;}

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) { 
            .si_flex {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: center;}
            .si_flex .w380 {flex: 0 1 380px; width: auto; margin-left: 20px;}
            .si_flex .w660 {flex: 0 1 660px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            .si_flex {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; max-width: 660px;}
            .si_flex .w380 {flex: 0 1 auto; width: auto; margin-left: 0;}
            .si_flex .w660 {flex: 0 1 auto; width: auto; margin-bottom: 20px;}
        }
        @media only screen and (max-width: 767px) {
            .spot .flex {max-width: 340px; margin: 0 auto;}
            .three {flex: 0 1 auto; width: auto; margin-bottom: 50px;}
        }
        @media only screen and (max-width: 560px) {
        }

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