@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;}
.ui-datepicker {height: 580px !important;} 
html {scroll-behavior: smooth;}
 
 #pagetop {display: block !important;}   
@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;}
        .page_wp {width: 95%;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1100px) {
            .box1020 {width: 100%; max-width: 1020px;}
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .box980 {width: 100%;}
        .mainImage {min-height: 500px; margin-top: 80px;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        .page_wp .page_text {font-size: 1.2em; padding: 0 8px;}
        #access .page_wp .page_text , #sightseeing .page_wp .page_text , #gallery .page_wp .page_text {font-size: 1.2em; padding: 0 1em;}
        .mainImage {min-height: 350px;}
        .page_wp .page_title {font-size: 4em;}
        .t_left {display: table; margin: 0 auto; text-align: left;}
        }
        @media only screen and (max-width: 560px) {
        }
        

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

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            .gnav_wp {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; padding: 16px 1%; box-sizing: border-box;}
            .gnav_wp .h_logo {flex: 0 0 120px; width: auto;}
            .gnav_wp nav {flex: 0 1 auto; width: auto;}
            .gnav_wp nav ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: flex-end; width: 100%;}
            .gnav_wp nav ul li {position: relative; margin-left: 20px; padding-left: 20px; white-space: nowrap;}
            .gnav_wp nav ul li a {padding: 0; font-size: 1em;}
            .gnav_wp ul li::before {position: absolute; left: 0; top: 0; height: 100%; width: 1px; background-color: #356244; -moz-transform: rotate(18deg); -webkit-transform: rotate(18deg); transform: rotate(18deg); content: "";}
            .gnav_wp ul li a::before , .gnav_wp ul li:last-child a::after {position: static; width: 0; transform: none;}
        }
        @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) {
            footer {padding: 0 1%; box-sizing: border-box;}
            .footer_inner {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; width: 100%;}
            .footer_inner .yado_detail {flex: 0 1 467px;}
            .footer_inner .yado_detail {flex: 0 1 467px;}
            .f_nav ul:first-child {margin-right: 20px;}
        }
        @media screen and (max-width: 1024px) {
            .footer_inner {padding: 50px 0 30px;}
            .footer_inner .yado_detail {flex: 0 1 auto; text-align: center;}
            .yado_detail .sp_ok {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; gap: 10px;}
        }
        @media only screen and (max-width: 767px) {
        }
 
/*=================================================
       toppage
=================================================*/

@media screen and (max-width: 1280px) {
            .animation-zoom img {object-fit: cover;}
        }
        @media screen and (max-width: 1200px) {
            #index .contents01 h2 {margin-bottom: 70px;}
            #index .contents01 .map_img {width: 60%;}
            .contents_search {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%; padding: 60px 1%; box-sizing: border-box;}
            .contents_search h3 {flex: 0 1 190px; width: auto;}
            .contents_search .search_wp {flex: 0 0 810px; width: auto;}
        }
        @media screen and (max-width: 1100px) {
            #index .contents05 .photo01 {width: 40%;}
            #index .contents05 .photo02 {width: 60%;}
            #index .contents05 .box1020 {width: 70%;}
        }
        @media screen and (max-width: 1024px) {
            #index .bx-wrapper {margin-top: 80px;}
            .slider_text {font-size: 2em; white-space: normal; text-align: center;}
            #index .contents01 {padding: 330px 2% 0;}
            #index .contents01 .g_font {font-size: 60px;}
            #index .contents02 .box_white {margin-right: 10px;}
            #index .contents03 .box_white {margin-left: 10px;}
            .contents_search {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .contents_search h3 {flex: 0 1 auto; width: auto; margin-bottom: 30px;}
            .contents_search .search_wp {flex: 0 0 auto; width: auto;}
            form .box {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 10px 20px;}
            .check_in , .check_in h4 {width: auto;}
            .search_btn {flex: 0 1 100%; text-align: center; margin-top: 20px;}
            .contents_search .g_font {top: -70px; left: 0; transform: rotate(-18deg);}
            a.btn-green, a.btn-green:visited {width: 96%; margin: 0 auto;}
        }
        @media only screen and (max-width: 767px) {
            .slider_text {display: none;}
            #index .contents01 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%; height: auto;  padding: 130px 2% 50px;}
            #index .contents01 .box980 {order: 3; width: auto; margin-top: -30%;}
            #index .contents01 .map_img {order: 2; position: static; width: 90%; margin-bottom: 30px;}
            #index .contents01 .g_font {order: 1; font-size: 30px;}
            #index .contents01 .g_font span {margin-left: 127px;}
            #index .contents01 h2 {margin-bottom: 10px;}
            #index .contents01 .g_name {font-size: 1.2em;}
            #index .contents01 .box980 p {font-size: 1em; line-height: 2em;}
            #index .contents02 , #index .contents03 , #index .contents05 {height: auto; padding: 0 2%;}
            #index .contents02 .photo01 {position: static; width: 100%;}
            #index .contents02 .box_white {float: none; width: 100%; margin-top: 10px; padding: 50px 2%;}
            #index .contents03 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%; }
            #index .contents_movie .photo01 {position: static; width: 60%; height: 350px;}
            #index .contents_movie .animation-zoom img {width: 100%; height: auto; object-position: center;}
            #index .contents03 .photo01 {display: none;}
            #index .contents03 .box1020 {order: 3; margin-top: 10px;}
            #index .contents03 .box_white {width: 100%; margin: 0; padding: 50px 2%;}
            #index .contents_movie .point_movie:after {display: block; content: ""; padding-top: 60%;}
            #index .contents_movie .point_movie {order: 1; position: relative; width: 100%; height: auto;}
            #index .contents_movie .point_movie video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
            #index .contents04 .box980 {width: 96%; margin: 0 2%;}
            #index .contents04 .box_white {width: 100%; padding: 50px 2%;}
            #index .contents05 .photo01 , #index .contents05 .photo02 {position: static; height: 350px;}
            .tsuta01 {right: 0; width: 36%;}
            #index .contents05 .photo01 {width:30%; height: 250px;}
            #index .contents05 .photo02 {width: 70%; height: 250px; margin-bottom: 10px;}
            #index .contents05 .box1020 {clear: both; width: 100%;}
            #index .contents05 .box_white {width: 100%; height: auto; padding: 50px 2%; }
            #loopslider , #loopslider_wrap {height: 100vh; max-height: 580px;}
            #loopslider ul {height: 100%; max-height: 580px;}
            #loopslider ul li {width: 100%; max-width: 350px; height: auto; margin-right: 10px;}
            .mini_inner {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; justify-content: flex-end; width: 100%; max-width: 350px; min-height: 580px; margin-right: 0px;}
            .minileft {width: auto;}
            .contents_search .g_font {font-size: 65px; top: -55px; left: 0; transform: rotate(-18deg);}
            .check_in , .price , .search_btn {margin-right: 0;}
            .price {width: auto;}
            .price select {width: 100px;}
            .search_btn input {width: 90%; max-width: 378px; height: auto;}
        }

/*=================================================
       cuisine
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%; padding: 0 2%; box-sizing: border-box;}
            .flex2 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%;}
            #cuisine .contents01 .f_left {flex: 0 1 540px; width: auto; margin-right: 20px;}
            #cuisine .contents01 .f_right {flex: 0 1 480px; width: auto;}
            #cuisine .contents01 .f_right .inner {width: auto;}
            #cuisine .contents02 {padding: 30px 2% 60px; box-sizing: border-box;}
            #cuisine .contents02 .gallery {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; width: 100%; max-width: 1020px;}
            #cuisine .contents02 .gallery p:nth-child(1) {flex: 0 1 32%; width: auto; height: auto; margin-right: 2%;}
            #cuisine .contents02 .gallery p:nth-child(2) {flex: 0 1 66%; width: auto; height: auto;}
            #cuisine .contents02 .gallery p:nth-child(3) {flex: 0 1 32%; width: auto; height: auto; margin-right: 2%;}
            #cuisine .contents02 .gallery p:nth-child(4) {flex: 0 1 32%; width: auto; height: auto; margin-right: 2%;}
            #cuisine .contents02 .gallery p:nth-child(5) {flex: 0 1 32%; width: auto; height: auto;}
            #cuisine .contents04 {padding: 0 2%; box-sizing: border-box;}
            .morning_box {width: 100%; max-width: 1020px;}
            #cuisine .contents04 {padding-top: 50px;}
        }
        @media screen and (max-width: 1024px) {
            #cuisine .contents02 .bibi_style {left: calc(50% - 300px);}
            #cuisine .contents04 .bibi_style {top: 20px; left: calc(50% - 357px);}
        }
        @media only screen and (max-width: 767px) {
            .flex {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            #cuisine .contents01 .flex {max-width: 540px;}
            #cuisine .contents01 .f_left {flex: 0 1 auto; width: auto; margin-right: 0; margin-bottom: 20px;}
            #cuisine .contents01 .f_right {flex: 0 1 auto; width: auto;}
            #cuisine .contents04 .bibi_style {top: 0; left: -2%;}
            .morning_box {flex-wrap: wrap; flex-direction: column; align-items: center;}
            .morning_box div {width: auto; margin-bottom: 10px;}
        }
        @media only screen and (max-width: 580px) {
            #cuisine .contents02 .bibi_style {top: 15px; left: -2%;}
        }
  
/*=================================================
       facilities
=================================================*/
    
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #facilities .contents02 {padding: 0 2%; box-sizing: border-box;}
            #facilities .anchor_list li {width: 33%; margin-right: 0.5%;}
            #facilities .room_photo:after {display: block; content: ""; padding-top: 65.51%;}
            #facilities .room_photo {position: relative; flex: 0 1 580px; width: auto; margin-right: 20px;}
            #facilities .room_photo .bx-wrapper {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-top: 0;}
            #facilities .room_detail {flex: 0 1 410px; width: auto;}
            #facilities .flex.re {flex-direction: row-reverse;}
            #facilities .flex.re .room_photo {margin-right: 0; margin-left: 20px;}
            #facilities .contents05 .room_photo {margin-right: 0; margin-left: 20px;}
        }
        @media screen and (max-width: 1024px) {
            #facilities .contents07 , #facilities .contents08 {padding: 0 2%;}
            .subpage table th {white-space: nowrap;}
            #facilities .btn {padding: 0 2%;}
        }
        @media only screen and (max-width: 767px) {
            #facilities section {padding: 0 2%;}
            #facilities section .flex {padding: 0;}
            #facilities .anchor_list {width: 332px; margin: 0 auto;}
            #facilities .anchor_list li {width: 100%; margin-right:0; margin-bottom: 10px;}
            #facilities .room_photo {position: relative; flex: 0 1 auto; width: 100%;  max-width: 580px; margin-right: 0; margin-bottom: 30px;}
            #facilities .room_detail {flex: 0 1 auto; width: 100%;  max-width: 580px;}
            #facilities .flex.re .room_photo , #facilities .contents05 .room_photo {margin-left: 0;}
            #facilities .flex.re {flex-direction: column;}
			#facilities .contents03::before{background-size: contain; height: 120px;}
			#facilities .contents04::before{background-size: contain; height: 120px;}
			#facilities .contents05::before{background-size: contain; height: 120px;}
            #facilities .contents05 .flex {flex-direction: column-reverse;}
            #facilities .contents06 {padding: 30px 0;}
            #facilities .contents02 , #facilities .contents07, #facilities .contents08 {padding: 0;}
            #facilities .contents06 .bath_photo01 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; max-width: 664px;}
            #facilities .contents06 .bath_photo01 p {flex: 0 1 332px; width: auto;}
            #facilities .contents07 .photo03 {position: absolute; right: 0; top: 24px; width: 40%;}
            #facilities .contents07 .d_photo {height: 350px;}
            #facilities .contents01 p , #facilities .contents06 .b_caution {text-align: left;}
            #facilities .contents07 .photo01 {display: none; right: auto; top: auto; left: 2%; bottom: -10%; width: 46%;}
            #facilities .contents07 .photo02 {display: none; right: 2%; bottom: -10%; width: 46%;}

        }
            
/*=================================================
       tour
=================================================*/
            #tour .contents04 .inner, #tour .contents06 .inner {display: table; width: auto; background: #f9f4ed; padding: 120px 20px 0;}

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #tour .contents02 .flex {justify-content: center; gap: 10px;}
            #tour .contents02 .f_left, #tour .contents02 .f_right {flex: 0 1 500px; width: auto;}
            #tour .contents05 .flex {align-items: center;}
            #tour .contents05 .f_left {flex: 0 1 580px; width: auto; margin-right: 20px;}
            #tour .contents05 .f_right {flex: 0 1 400px; width: auto; padding-top: 0;}
        }
        @media screen and (max-width: 1024px) {
            #tour .contents02 .box980 {width: 96%;}
            #tour .btn {padding: 0 2%;}
        }
        @media only screen and (max-width: 767px) {
            #tour .contents02 .flex {flex-wrap: nowrap; flex-direction: row;}
            #tour .contents04 , #tour .contents06 {height: auto; }
            #tour .contents04 .box , #tour .contents06 .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center;}
            #tour .contents04 .photo01, #tour .contents04 .photo02 {position: static; flex: 0 1 50%; width: auto; height: 300px;}
            #tour .contents04 .inner, #tour .contents06 .inner {padding: 50px 10px 60px;}
            #tour .contents05 .flex {max-width: 580px;}
            #tour .contents05 .f_left {flex: 0 1 auto; width: auto; margin-right: 0; margin-bottom: 20px;}
            #tour .contents05 .f_right {flex: 0 1 auto; width: auto; padding-top: 0;}
            #tour .contents06 .photo01, #tour .contents06 .photo02 {position: static; flex: 0 1 50%; width: auto; height: 300px;}
            #tour .contents01 p {text-align: left;}
            #tour  .box980 {padding: 0 2%;}
            #tour a.btn-green, #tour a.btn-green:visited {width: 100%;}
            #tour a.btn-green span {right: 3px;}
            #tour .contents02 .box980 {padding: 30px 2%;}
         }
        
/*=================================================
       access
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            #access .box980 {padding: 0 2%;}
            .bg_ki {padding: 60px 2%;}
        }
        @media only screen and (max-width: 767px) {
            #access iframe {height: 350px;}
            .subpage table td {padding: 1em 5px;}
        }
        
/*=================================================
       sightseeing
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #sightseeing .contents02 .flex {align-items: flex-end;}
            #sightseeing .contents02 .spot_detail {flex: 0 1 480px; width: auto; margin-left: 20px;}
            #sightseeing .contents02 .photo_wp p {flex: 0 1 500px; width: auto;}
            #sightseeing .contents02 .photo_wp p:last-of-type {margin-left: 20px;}
            #sightseeing .contents07 .photo_wp p {flex: 0 1 500px; width: auto;}
            #sightseeing .contents07 .photo_wp p:last-of-type {margin-left: 20px;}
        }
        @media screen and (max-width: 1024px) {
            #sightseeing .col2 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%; max-width: 1020px; padding: 0 2%;}
            #sightseeing .col2 section {flex: 0 1 490px; width: auto;}
            #sightseeing .col2 section.f_left {margin-right: 20px;}
            #sightseeing .contents07 {padding: 0 2%;}
        }
        @media only screen and (max-width: 767px) {
            #sightseeing .contents02 .flex {align-items: center;}
            #sightseeing .contents02 .spot_detail {flex: 0 1 auto; width: auto; margin-left: 0;}
            #sightseeing .contents02 .photo_wp , #sightseeing .contents07 .photo_wp {flex-wrap: nowrap; flex-direction: row;}
            #sightseeing .col2 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%; max-width: 500px;}
            #sightseeing .col2 section {flex: 0 1 auto; width: auto; margin-bottom: 50px;}
            #sightseeing .col2 section.f_left {margin-right: 0;}
            #sightseeing .contents01 .text_c {padding: 0 2%;}
            .spot_detail > .mb40 , .spot_detail > .mb60 {margin-bottom: 0 !important;}
            #sightseeing .contents07 .text_c {text-align: left;}
            #sightseeing .col2 {margin-bottom: 0;}
            #sightseeing .contents07 .photo_wp {flex-wrap: wrap; flex-direction: column; gap: 10px;}
            #sightseeing .contents07 .photo_wp p {flex: 0 1 auto; width: auto;}
            #sightseeing .contents07 .photo_wp p:last-of-type {margin-left: 0;}
            #sightseeing .contents07 .spot_tel {width: 100%;}
            #sightseeing .contents08 {margin-bottom: 80px;}
            #sightseeing .contents02 .photo_wp p:last-of-type {margin-left: 10px;}
        }

/*=================================================
       gallery
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            #gallery_wrap {width: 100%;}
            #gallery_list {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
            #gallery_list li {flex: 0 1 212px; width: auto;}
        }
        @media only screen and (max-width: 767px) {
        }
        
/*=================================================
       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) {
        }
          
        }