@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;}
.header-wrap {top: 0 !important;}

@media screen and (max-width: 1280px) {
        html , body {min-width: 100%;}
        img {max-width: 100%; height: auto;}
        .wrapper {min-width: 100%;}
        }
        @media screen and (max-width: 1200px) {
            .wrap {width: 100%;}
            .page-title-wrap h1{width: 100%;}
            .page-title-flower {left: -288px; margin-left: 0;}
            .bnr {padding: 0 2% 5em; box-sizing: border-box;}
            .flower-r {background: url(../images/parts/kiku-r.png) no-repeat left bottom / contain; width: 130px;}
            .flower-l {background: url(../images/parts/kiku-l.png) no-repeat right bottom / contain; width: 130px;}
        }
        @media screen and (max-width: 1100px) {
            .inner {width: 100%;}
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .page-header-wrap {margin-top: 80px;}
        .flower-title.mt-2em {margin-top: 1em;}
        #spa .flower-title {height: 87px; line-height: 1.8em;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        #spa .flower-title {height: 87px; line-height: 87px;}
        .page-title-flower {left: -139px; background: url(../images/parts/page-title-flower.png) no-repeat right center / 100% auto; width: 200px;}
        .page-title-wrap h1 {padding-left: 60px;}
        .page-header-wrap , .page-header {height: 250px;}
        .page-title-wrap h1 {padding-left: 70px; font-size: 26px;}
        .flower-title {background: url(../images/parts/title-flower.png) no-repeat left center /90px auto; height: 87px; padding-left: 100px; line-height: 1.8em;}
        }
        @media only screen and (max-width: 560px) {
        .pc_oon {display: none;}
        .sp_oon {display: block;}
        .charm-text-r-s , .charm-text-r {background: url(../images/img/top/kiku-r.png) no-repeat bottom right / 94% auto;}
        }
        

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

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            .sub-nav-wrap , .nav-wrap {width: 100%; padding: 0 1%; box-sizing: border-box;}
            .nav-wrap , .navigation {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%;}
            .sub-nav-wrap ul {width: 100%; max-width: 1185px; min-width: 100%;}
            .nav-wrap h1 {flex: 0 1 180px;}
            .navigation {flex: 0 1 965px; width: auto; justify-content: flex-end;}
            .navigation ul {width: 100%;}
            .navigation li {margin-left: 4%; padding-right: 0;}
            .reservation-btn {position: static; margin-top: -30px;}
        }
        @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 .wrap {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; gap: 10px; padding-left: 1%; padding-right: 1%;}
            footer .wrap .w200 {flex: 0 1 200px; width: auto;}
            footer .wrap .w350 {flex: 0 1 350px; width: auto;}
            footer .wrap .w165 {flex: 0 1 165px; width: auto;}
            footer .wrap .w300 {flex: 0 1 300px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            footer .wrap .w200 {flex: 0 1 auto; width: auto;}
        }
        @media only screen and (max-width: 767px) {
            footer .wrap {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            footer .wrap .w200 {flex: 0 1 auto; width: auto;}
            footer .wrap .w350 {flex: 0 1 auto; width: auto;}
            footer .wrap .w300 {flex: 0 1 auto; width: auto;}
            footer p {margin-top: 20px; text-align: center;}
        }
 
/*=================================================
       toppage
=================================================*/
            #movie video {display: block;}

@media screen and (max-width: 1280px) {
            #index #movie {top: 0; height: auto; min-height: auto; margin-bottom: 0; padding-top: 56.25%;}
            #index #movie video {top: 0; left: 0; width: 100%; height: 100%; transform: none;}
        }
        @media screen and (max-width: 1200px) {
            .search-wrap {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%;}
            .search-title {flex: 0 1 200px; width: auto; margin-right: 10px;}
            .search-form {flex: 0 1 900px; width: auto; padding: 10px;}
            .search-left {width: calc(100% - 170px);}
            .submit_btn {width: 150px;}
            #index .charm-text-r {padding: 20px;}
            #index .charm-text-l {padding: 20px;}
            .plan-wrap {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%; padding: 0 2%; box-sizing: border-box;}
            .plan-wrap .plan-box {flex: 0 1 360px; width: auto; margin-right: 0; padding-right: 0;}
            .plan-wrap .plan-box a {padding: 10px;}
            .plan-img {width: 100%; height: auto;}
            #index .inner {padding: 0 2% 7em; box-sizing: border-box;}
        }
        @media screen and (max-width: 1024px) {
            #movie {margin-top: 80px;}
            .search {height: auto;}
            .search-wrap {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .search-title {flex: 0 1 auto; width: auto; margin-right: 0; margin-bottom: 10px;}
            .search-form {flex: 0 1 auto; max-width: 700px;}
            .search-form form {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
            .search-left {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; width: 100%; padding-left: 0;}
            .submit_btn {flex: 0 1 100%;}
            #index .lead {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            #index .charm-01 {width: 100%; min-height: 250px;}
            #index .charm-text-r {width: 100%; height: auto; padding-bottom: 150px;}
            #index .pink a {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            #index .charm-02 {background: url(../images/img/top/img_02.png) no-repeat right 71% / 122% auto; width: 100%; min-height: 250px;}
            #index .charm-text-l {width: 100%; height: auto; padding-bottom:150px;}
        }
        @media only screen and (max-width: 767px) {
            #index .charm-text-r {padding: 20px 2% 150px;}
            #index .charm-text-l {padding: 20px 2% 150px;}
            .plan-wrap {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; max-width: 360px; }
            .plan-wrap .plan-box {flex: 0 1 auto; border-right: 0; border-bottom: 1px dotted #999; padding: 30px 2%;}
            .plan-wrap .plan-box:last-of-type {border-bottom: none;}
        }

/*=================================================
       spa
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #spa .charm-text-r {padding: 50px 20px;}
            .spa-content .text-1 {width: 43%;}
            .spa-content .text-2 {left: 51%; width: 43%;}
            .spa-content .img-1 {width: 50%;}
            .spa-content .img-2 {width: 48%;}
            .spa-content .img-3 {width: 43%;}
            .spa-content .img-4 {width: 41%;}
            #spa .spa-content , .konou {padding-left: 2%; padding-right: 2%;}
        }
        @media screen and (max-width: 1024px) {
            #spa #movie, #cuisine #movie {position: relative; height: auto; padding-top: 35.15%;}
            #spa #movie video, #cuisine #movie video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: none;}
            #spa .spa-content {height: auto; padding-bottom: 50px;}
            #spa .pink {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            #spa .charm-img {background: url(../images/img/spa/img_01.png) no-repeat center center / cover; width: 100%; min-height: 250px;}
            #spa .charm-text-r {width: 100%; height: auto; padding: 70px 20px 130px;}
            #spa .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 10px; margin-bottom: 20px;}
            #spa .flex .text {flex: 0 1 480px;}
            .spa-content .text-1 {position: static; width: auto;}
            .spa-content .img-1 {position: static; flex: 0 1 600px; width: auto;}
            .spa-content .img-2 {position: static;  flex: 0 1 600px; width: auto;}
            .spa-content .img-3 {position: static; flex: 0 1 480px; width: auto;}
            .spa-content .img-4 {position: static;  flex: 0 1 480px; width: auto;}
            .spa-content .text-2 {position: static; flex: 0 1 480px; width: auto;}
        }
        @media only screen and (max-width: 767px) {
            #movie video {display: block;}
            #spa .charm-text-r {padding: 70px 2% 130px;}
            .box-table th , .box-table td , .box-table2 th , .box-table2 td {padding: 10px;}
            #spa .roten {height: auto; padding: 0 2% 70px;}
            #spa .flex {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px;}
            #spa .flex .text {flex: 0 1 auto;}
            .spa-content .text-1 {position: static; width: auto;}
            .spa-content .img-1 {position: static; flex: 0 1 auto; width: auto;}
            .spa-content .img-2 {position: static;  flex: 0 1 auto; width: auto;}
            .spa-content .img-3 {position: static; flex: 0 1 auto; width: auto;}
            .spa-content .img-4 {position: static;  flex: 0 1 auto; width: auto;}
            .spa-content .text-2 {position: static; flex: 0 1 auto; width: auto;}
        }
  
/*=================================================
       cuisine
=================================================*/
    
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #cuisine .charm-text-r {padding: 50px 20px;}
            #cuisine .sec02 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center; padding: 0 2% 2em; box-sizing: border-box;}
            #cuisine .sec02 .float-l {flex: 0 1 480px; width: auto; margin-right: 20px;}
            #cuisine .sec02 .float-l .ml-50 {margin-left: 10px;}
            #cuisine .sec02 .float-r {flex: 0 1 660px; width: auto;}
            #cuisine .sec03 .wrap {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: center; align-items: center; padding: 0 2%; box-sizing: border-box;}
            #cuisine .sec03 .float-l {flex: 0 1 660px; width: auto; margin-right: 20px;}
            #cuisine .sec03 .float-r .ml-50 {margin-left: 10px;}
            #cuisine .sec03 .float-r {flex: 0 1 480px; width: auto;}
            #cuisine .sec04 .wrap {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center; padding: 0 2%; box-sizing: border-box;}
            #cuisine .sec04 .float-l {flex: 0 1 480px; width: auto; margin-right: 20px;}
            #cuisine .sec04 .float-l .ml-50 {margin-left: 10px;}
            #cuisine .sec04 .float-r {flex: 0 1 660px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            #cuisine .sec01 {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            #cuisine .charm-img {background: url(../images/img/cuisine/img_01.png) no-repeat left center / 116% auto; width: 100%; min-height: 250px;}
            #cuisine .charm-text-r {width: 100%; height: auto; padding: 0 20px 130px;}
            #cuisine .sec02 {display: flex; flex-wrap: wrap; flex-direction: column; max-width: 660px;}
            #cuisine .sec02 .float-l {flex: 0 1 auto; width: auto; margin-right: 0; margin-bottom: 20px;}
            #cuisine .sec02 .float-r {flex: 0 1 auto; width: auto;}
            #cuisine .sec03 .wrap {display: flex; flex-wrap: wrap; flex-direction: column; max-width: 660px;}
            #cuisine .sec03 .float-l {flex: 0 1 auto; width: auto; margin-right: 0; margin-top: 20px;}
            #cuisine .sec03 .float-r {flex: 0 1 auto; width: auto;}
            #cuisine .sec04 .wrap {display: flex; flex-wrap: wrap; flex-direction: column;  max-width: 660px;}
            #cuisine .sec04 .float-l {flex: 0 1 auto; width: auto; margin-right: 0; margin-bottom: 20px;}
            #cuisine .sec04 .float-r {flex: 0 1 auto; width: auto;}
        }
        @media only screen and (max-width: 767px) {
            #cuisine .charm-text-r {padding: 0 2% 130px;}
            .bf .bf-wrap {width: 100%; grid-template-columns: auto;}
            .bf .bf-wrap h2 {margin-bottom: 0;}
            .onmouse-list ul {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
            .flower-title2 {margin: 1em 0 1.5em;}
            #cuisine .sec02 .flower-title2 , #cuisine .sec03 .flower-title2 {height: 112px;}
            .flower-title2 span {font-size: 17px;}
        }
            
/*=================================================
       facilities
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #facilities .sec02 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center; padding: 0 2% 2em; box-sizing: border-box;}
            #facilities .sec02 .float-r {flex: 0 1 660px; width: auto; }
            #facilities .sec02 .float-r .slide_box {position: relative; padding-top: 66.66%;}
            #facilities .sec02 .float-r .slide_box ul {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            #facilities .sec02 .float-l .ml-50 {margin-left: 10px;}
            #facilities .sec02 .float-l {flex: 0 1 480px; width: auto; margin-right: 20px;}
            #facilities .sec03 .wrap {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: center; align-items: flex-start; padding: 0 2% 2em; box-sizing: border-box;}
            #facilities .sec03 .float-r {flex: 0 1 480px; width: auto; }
            #facilities .sec03 .float-r .ml-50 {margin-left: 10px;}
            #facilities .sec03 .float-l {flex: 0 1 660px; width: auto; margin-right: 20px;}
            #facilities .sec04 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: ; padding: 0 2% 2em; box-sizing: border-box;}
            #facilities .sec04 .float-r {flex: 0 1 660px; width: auto; }
            #facilities .sec04 .float-r .slide_box {position: relative; padding-top: 66.66%;}
            #facilities .sec04 .float-r .slide_box video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            #facilities .sec04 .float-l .ml-50 {margin-left: 10px;}
            #facilities .sec04 .float-l {flex: 0 1 480px; width: auto; margin-right: 20px;}
            #facilities .sec05 .wrap {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: center; align-items: center; padding: 0 2% 2em; box-sizing: border-box;}
            #facilities .sec05 .float-r {flex: 0 1 480px; width: auto; }
            #facilities .sec05 .float-r .ml-50 {margin-left: 10px;}
            #facilities .sec05 .float-l {flex: 0 1 660px; width: auto; margin-right: 20px;}
            #facilities .sec05 .float-l .slide_box {position: relative; padding-top: 66.66%;}
            #facilities .sec05 .float-l .slide_box video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
        }
        @media screen and (max-width: 1024px) {
            #facilities .sec01 {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            #facilities .charm-img-l {background: url(../images/img/facilities/img_01.png) no-repeat left center / 170% auto; width: 100%; min-height: 250px;}
            #facilities .charm-text-r-s {width: 100%; height: auto; padding: 50px 20px 70px;}
          .f-img {width: 90%;}
        }
        @media only screen and (max-width: 767px) {
            #facilities .charm-text-r-s {width: 100%; height: auto; padding: 50px 2% 100px;}
            #facilities .sec02 {display: flex; flex-wrap: wrap; flex-direction: column;}
            #facilities .sec02 .float-r {flex: 0 1 auto; width: 100%; max-width: 660px; }
            #facilities .sec02 .float-l {flex: 0 1 auto; width: auto; margin-right: 0; }
            #facilities .sec03 {margin-bottom: 0;}
            #facilities .sec03 .wrap {position: relative; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            #facilities .sec03 .float-r {flex: 0 1 auto; width: auto; }
            #facilities .sec03 .float-r .ml-50 {margin-left: 0;}
            #facilities .sec03 .float-l {flex: 0 1 auto; width: auto; margin-right: 0; margin-top: 20px;}
            .f-img {position: static; width: auto; text-align: center;}
            #facilities .sec04 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            #facilities .sec04 .float-r {flex: 0 1 auto; width: 100%;  max-width: 660px;}
            #facilities .sec04 .float-l {flex: 0 1 auto; width: auto; margin-right: 20px;}
            #facilities .sec05 .wrap {position: relative; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            #facilities .sec05 .float-r {flex: 0 1 auto; width: auto; }
            #facilities .sec05 .float-l {flex: 0 1 auto; width: 100%;  max-width: 660px; margin-right: 0; margin-top: 20px;}
        }
        
/*=================================================
       contact
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #contact .sec01 {padding: 0 2%; box-sizing: border-box;}
            #contact .sec02 , #contact .sec03 {padding: 0 2% 4em; box-sizing: border-box;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }
        
/*=================================================
       access
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #access .sec01 , #access .sec02 {padding: 0 2% 4em; box-sizing: border-box;}
            #access .sec03 {padding: 0 2% 6em; box-sizing: border-box;}
            .map {position: relative; padding-top: 46.68%;}
            .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) {
            .box {padding: 20px 2%;}
            .map + .ml-50 {margin-left: 0;}
        }
        
/*=================================================
       history
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #history .charm-text-r {padding: 50px 20px;}
            #history .sec02 , #history .sec03 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: ; padding: 0 2% 5em; box-sizing: border-box;}
             #history .sec03 {flex-direction: row-reverse;}
            #history .sec02 .float-r {flex: 0 1 450px; width: auto; }
            #history .sec02 .float-l .ml-50 {margin-left: 10px;}
            #history .sec02 .float-l {flex: 0 1 500px; width: auto; margin-right: 20px;}
            #history .sec03 .float-l {flex: 0 1 500px; width: auto; margin-left: 0;}
            #history .sec03 .float-r .ml-50 {margin-left: 10px;}
            #history .sec03 .float-r {flex: 0 1 450px; width: auto; margin-left: 20px;}
        }
        @media screen and (max-width: 1024px) {
            #history .sec01 {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            #history .charm-img {background: url(../images/img/history/img_01.png) no-repeat center center / cover; width: 100%; min-height: 250px;}
            #history .charm-text-r {width: 100%; height: auto; padding: 50px 20px 130px;}
        }
        @media only screen and (max-width: 767px) {
            #history .sec02 , #history .sec03 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            #history .sec02 .float-r {flex: 0 1 auto; width: auto; margin-right: 0;}
            #history .sec02 .float-l {flex: 0 1 auto; width: auto; margin-right: 0; margin-bottom: 20px;}
            #history .sec03 .float-r {flex: 0 1 auto; width: auto;  margin-left: 0; margin-bottom: 20px;}
            #history .sec03 .float-l {flex: 0 1 auto; width: auto;}
        }

        
/*=================================================
       tourism
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            #tourism .sec01 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: ; padding: 0 2% 5em; box-sizing: border-box;}
            #tourism .sec01 .float-l {flex: 0 1 660px; width: auto; }
            #tourism .sec01 .float-l .slide_box {position: relative; padding-top: 66.66%;}
            #tourism .sec01 .float-l .slide_box video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            #tourism .sec01 .float-r .ml-50 {margin-left: 10px;}
            #tourism .sec01 .float-r {flex: 0 1 500px; width: auto; margin-left: 20px;}
            #tourism .flower-title {margin-top: 0; line-height: 45px;}
            #tourism .sec02 {padding: 0 2% 4em; box-sizing: border-box;}
            #tourism .sec02 .row {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: ; gap: 10px;}
            #tourism .sec02 .row .w525 {flex: 0 1 525px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            
        }
        @media only screen and (max-width: 767px) {
            #tourism .sec01 {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            #tourism .sec01 .float-l {flex: 0 1 auto; width: 100%; max-width: 660px;}
            #tourism .sec01 .float-r {flex: 0 1 auto; width: auto; margin-left: 0; margin-bottom: 20px;}
            #tourism .sec02 .row {display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; gap: 0; max-width: 525px; margin: 0 auto; padding-bottom: 0;}
            #tourism .sec02 .row .w525 {flex: 0 1 auto; width: auto; margin-bottom: 50px;}
        }