@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;}
 
 .plan_form .option-input {-webkit-appearance: none; padding: 0;}
 
 #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;}
        section {padding: 0 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1100px) {
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .header-container {position: relative; height: 100%;}
        .head_logo {top: calc(50% - 10px); left: 50%; right: auto; transform: translate(-50% , -50%);}
        .stay_h h1 , .on_h h1 , .ryo_h h1 , .kan_h h1 , .yo_h h1 , .ac_h h1 , .new_h h1 {top: calc(50% + 70px); left: 50%; right: auto; transform: translate(-50% , -50%);}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        .bg-slider , #head_slider {height: 350px;margin-top: ;}
        .head_logo {top: calc(50% - 10px); left: 50%; right: auto; transform: translate(-50% , -50%);}
        .stay_h h1 , .on_h h1 , .ryo_h h1 , .kan_h h1 , .yo_h h1 , .ac_h h1 , .new_h h1  {top: calc(50% + 70px); left: 50%; right: auto; transform: translate(-50% , -50%);}
        }
        @media only screen and (max-width: 560px) {
        }
        

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

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            .telline1 {padding: 3px 2% 0; box-sizing: border-box;}
            .gnav1 ul {display: flex; flex-wrap; nowrap; flex-direction: row; justify-content: space-between; width: 100%; padding: 7px 2% 0; box-sizing: border-box;}
            #gnav2 .box {width: 100%; padding: 10px 2% 0; box-sizing: border-box;}
             #gnav2 ul {display: flex; flex-wrap; nowrap; flex-direction: row; justify-content: space-between; width: 100%; padding: 10px 2% 0; box-sizing: border-box;}
        }
        @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: 1100px) {
            footer .box , .s_footer .box {width: 100%;}
            #index footer .box1 , footer .box1 , .s_footer .box1 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; padding-left: 0;}
            #index address {text-align: center; padding-left: 0;}
            #index .footer-container , .s_footer .footer-container {background-size: auto 100%; height: auto;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            #index footer .box1  , footer .box1 , .s_footer .box1 {flex-direction: column; align-items: center; text-align: center; gap: 10px;}
        }
 
/*=================================================
       toppage
=================================================*/

@media screen and (max-width: 1280px) {
        .on_h {height: auto;}
        #movie {position: relative; min-width: 100%; padding-top: 47.18%;}
        #topvideo_content video {position: absolute; top: 0; left: 0; width: 100%; min-width: 100%; height: 100%; min-height: auto;}
        .tabbutton .tabb01 a  {display: inline-block; width: 152px;}
        .top_h h1 {top: 50%; left: 50%; right: auto; transform: translate(-50% , -50%);}
        .top .sec02 {margin-left: -2%; margin-right: -2%;}
        .top .sec02 .ap03 {background-position: -200px 0% , 100% 0%;}
        }
        @media screen and (max-width: 1200px) {
        .top .search .plan_form {width: 100%; padding: 2em 2% 1em;}
        .top .search .plan_form form {flex: 0 1 800px; width: auto;}
        .top .sec02 .ap01 .box , .top .sec02 .ap02 .box , .top .sec02 .ap03 .box {width: auto;}
        .top .sec02 .ap01 .box1 {margin-left: 20%;}
        .top .sec02 .ap02 .box1 {margin-left: 40%;}
        .top .sec02 .ap03 .box1 {margin-left: 15%;}
        .top .sec02 .ap02 {background-position: 100% 0% , -200px 0%;}
        }
        @media screen and (max-width: 1100px) {
            .top .sec01 .box1_1 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%; gap: 10px;}
            .top .sec01 .box1 {position: relative; flex: 0 1 545px; width: auto;}
            .top .sec01 .box1:after {display: block; content: ""; padding-top: 115.4%;}
            .top .sec01 .box1 .slider {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            .top .sec01 .box2 {flex: 0 1 500px; background-size: contain; width: auto; height: auto;}
            .top .sec04 .box {width: 100%;}
            .plan_rss {gap:20px;}
            .plan_rss .mini {padding-right: 0;}
            .top .sec03 .box , #gallery_wrap {width: 100%;}
            #gallery_list {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
            .top .sec03 .box1 {flex: 0 1 270px; width: auto; height: auto;}
        }
        @media screen and (max-width: 1024px) {
            #topvideo_content #movie {margin-top: 80px;}
            .top .search .plan_form {flex-direction: column; align-items: center;}
            .top .search .plan_form form {flex: 0 1 auto; width: 100%; margin-top: 20px;}
            .top .news .sec01 .box {width: 100%;}
            .top .sec02 .ap01 {position: relative; background: none;}
            .top .sec02 .ap01:before {position: absolute; top: 0; left: 0; display: block; content: ""; background: url(../image/topap01_1.jpg) no-repeat center top; width: 50%; height: 100%;}
            .top .sec02 .ap01:after {position: absolute; top: 0; left: 50%;display: block; content: ""; background: url(../image/topap01_2.jpg) no-repeat center top; width: 50%; height: 100%;}
            .top .sec02 .ap01 .box1 , .top .sec02 .ap02 .box1 , .top .sec02 .ap03 .box1 {position: relative; z-index: 10;}
            .top .sec02 .ap02 {position: relative; background: none;}
            .top .sec02 .ap02:before {position: absolute; top: 0; left: 0; display: block; content: ""; background: url(../image/topap02_2.jpg) no-repeat center top; width: 50%; height: 100%;}
            .top .sec02 .ap02:after {position: absolute; top: 0; left: 50%;display: block; content: ""; background: url(../image/topap02_1.jpg) no-repeat center top; width: 50%; height: 100%;}
            .top .sec02 .ap03 {position: relative; background: none;}
            .top .sec02 .ap03:before {position: absolute; top: 0; left: 0; display: block; content: ""; background: url(../image/topap03_1.jpg) no-repeat 20% top; width: 50%; height: 100%;}
            .top .sec02 .ap03:after {position: absolute; top: 0; left: 50%;display: block; content: ""; background: url(../image/topap03_2.jpg) no-repeat 60% top; width: 50%; height: 100%;}
        }
        @media only screen and (max-width: 767px) {
            .plan_form .form_box {justify-content: center; gap: 10px;}
            .plan_form .form_box .search_btn {flex: 0 1 100%; text-align: center;}
            .top_h h1 img { width: 180px; }
            .top .sec01 .box1_1 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; max-width: 545px;}
            .top .sec01 .box1 { flex: 0 1 auto; width: 100%; max-width: 545px;}
            .top .sec01 .box2 {flex: 0 1 auto; padding: 20px 0 30%; text-align: left;}
            .top .sec02 .ap01 , .top .sec02 .ap02 , .top .sec02 .ap03 {height: auto;}
            .top .sec02 .ap01:before , .top .sec02 .ap01:after ,.top .sec02 .ap02:before , .top .sec02 .ap02:after , .top .sec02 .ap03:before , .top .sec02 .ap03:after {height: 300px;}
            .top .sec02 .ap01 .box , .top .sec02 .ap02 .box , .top .sec02 .ap03 .box {padding-top: 300px;}
            .top .sec02 .ap01 .box1 , .top .sec02 .ap02 .box1 , .top .sec02 .ap03 .box1 {background-size: 100% auto; width: auto; height: auto; padding: 90px 2% 80px; margin: 0 auto;}
            .top .sec02 .ap03:before {background: url(../image/topap03_1.jpg) no-repeat 15% top;}
            .top .sec02 .ap03:after {background: url(../image/topap03_2.jpg) no-repeat 75% top;}
            .plan_rss {flex-direction: column; align-items: center;}
            .plan_rss .mini {width: 100%; max-width: 350px;}
            
        }

/*=================================================
       stay
=================================================*/

@media screen and (max-width: 1280px) {
            .stay .sec02 .box {width: 100%;}
            .stay .sec03 .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 10px;}
        }
        @media screen and (max-width: 1200px) {
            .stay .sec02 .box {width: 100%;}
            .stay .sec02 {background-position: center;}
        }
        @media screen and (max-width: 1100px) {
            .stay .sec01 .box , .stay .sec03 .box {width: 100%;}
            .stay .sec01 p {padding: 20px 0 0;}
        }
        @media screen and (max-width: 1024px) {
            .stay .sec02 .box1 {height: auto; padding: 50px 30px;}
            .stay .sec04 {background-size: cover; height: auto; padding: 20% 2%;}
            .stay .sec04 .box {width: 100%; padding: 50px 2%;}
        }
        @media only screen and (max-width: 767px) {
            .stay_h {height: 350px;}
            .stay .sec02 {height: auto; padding: 10% 2% 10%;}
            .stay .sec02 .box1 {float: none; width: auto; padding: 30px 3%;}
            .stay .sec03 {margin-top: 50px;}
            .stay .sec03 .box {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 10px;}
        }
  
/*=================================================
       hotspring
=================================================*/
.flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 10px;}
.otoko , .onna {position: relative;}
.sec02 .otokoyu , .sec02 .onnayu {top: -70px; width: 45%;}
   
@media screen and (max-width: 1280px) {
        .on_h #movie {height: ;}
        #video_content video {position: absolute; top: 0; left: 0; width: auto; min-width: 100%; height: 100%; min-height: auto;}
        .on .sec01 .box {width: 100%; max-width: 1080px; padding-right: 45%;}
        }
        @media screen and (max-width: 1200px) {
            .on .sec02 .box {width: 100%;}
        }
        @media screen and (max-width: 1100px) {
            .on .sec03 .box {width: 100%;}
        }
        @media screen and (max-width: 1024px) {
            #video_content #movie {margin-top: 80px;}
            .on_t01 {width: 100%;}
        }
        @media only screen and (max-width: 767px) {
        .on_h #movie {height: 350px;}
        .on .sec01 .box {background-image: url(../image/on_bg03.png); background-position: 50% top; background-size: auto 100%; width: 100%; max-width: 1080px; height: auto; padding: 70px 2% 20%; text-shadow: 1px 1px 1px #000;}
        .flex {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
        .otoko {margin-top: 70px;}
        .on .sec03 .box {background-size: 30% auto;}
        .on .sec01 h2 .onh2 {margin-left: 10px;}
        .on .sec03 .box {background: none;}
        .on .sec02 p {width: auto;}
        }
            
/*=================================================
       cuisine
=================================================*/
.ryo .sec02 .flex {flex-wrap: wrap; gap: 20px;}
.ryo .sec02 .box1 {flex: 0 1 48%; width: auto;}
.ryo .sec02 .box1 p {padding: 0;}

@media screen and (max-width: 1280px) {
            .ryo .sec01 .box {width: 100%; }
            .ryo_aisatsu {padding: 0 2% 30px; box-sizing: border-box;}
            .ryo .sec01 .box1 {flex: 0 1 470px; width: auto; height: auto; padding: 30px 0 0;}
            .ryo .sec01 .box2 {flex: 0 1 750px; width: auto;}
            .ryo .sec03 .box1 {flex: 0 1 400px; width: auto; height: auto; padding: 30px 0 0;}
            .ryo .sec03 .box2 {position: relative; flex: 0 1 600px; width: auto;}
            .ryo .sec03 .box2:after {display: block; content:""; padding-top: 66%;}
            .ryo .sec03 .swiper-container {position: absolute; top: 0; left: 0; width: 100% !important; max-width: 600px; height: 100%;}
            .ryo .sec04 .box1 {flex: 0 1 360px; width: auto;}
            .ryo .sec04 .box2 {position: relative; width: auto !important;}
            .ryo .sec04 .box2:after {display: block; content: ""; padding-top: 100%;}
            .ryo .sec04 .swiper-container {position: absolute; top: 0; left: 0; width: 100% !important; height: 100%;}
            .ryo .sec04 .box1 p {width: auto; padding-left: 0;}
        }
        @media screen and (max-width: 1100px) {
            .ryo .sec02 .box {width: 100%;}
            .ryo .sec03 .box {width: 100%;}
            .ryo .sec04 .box {width: 100%;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            .ryo_h {height: 350px !important;}
            .ryo .sec01 .box1 {flex: 0 1 auto; background: url(../image/ryo_bg2.png) no-repeat right bottom / 45% auto;}
            .ryo .sec01 .box2 {flex: 0 1 auto; width: auto; margin-top: 20px;}
            .ryo .sec02 .flex { max-width: 438px; margin: 0 auto;}
            .ryo .sec02 .box1 {flex: 0 1 auto; width: auto;}
            .ryo .sec03 .box1 {flex: 0 1 auto; background: url(../image/ryo_bg2.png) no-repeat right bottom / 45% auto; width: auto;}
            .ryo .sec03 .box2 {flex: 0 1 auto; width: 100%; max-width: 600px; margin-top: 20px;}
            .ryo .sec04 .box1 {flex: 0 1 auto; width: 100%; max-width: 334px;}
            .cuisine_gallery01 ul li {width: 33%; padding: 3px;}
        }
        
/*=================================================
       inhouse
=================================================*/
.kan .sec01 .flex {flex-wrap: wrap;}
.kan .sec01 .flex div {flex: 0 1 49%;}


@media screen and (max-width: 1280px) {
            .kan .sec01 .box , .kan .sec02 .box1 {width: 100%;}
        }
        @media screen and (max-width: 1100px) {
            .kan .sec02 .box2 , .kan .sec02 .box3 {width: 100%;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            .kan_h {height: 350px !important;}
            .kan .sec01 p , .kan .sec02 .box2 p , .kan .sec02 .box3 p {width: 100%;}
            .kan .sec01 .flex div {flex: 0 1 auto;}
            .kan .sec02 .box1 p {text-align: left;}
            .kan .sec02 .box1  {background-position: 100% 15%;}
            .kan .sec02 .box2 , .kan .sec02 .box3 {background-position: 100% 25%;}
            .kan .sec02 .box3_2 {background-position: 100% 100%; padding-bottom: 1px;}
        }
        
/*=================================================
       reservation
=================================================*/
.yo .sec01 .box1 {flex: 0 1 540px; width: auto;}
.yo_t01 {width: 100%; max-width: 450px;}
.flex.pdf {margin-bottom: 50px;}
.panf_o_cover , .panf_u_cover {display: block; width: 100%;}

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            .yo .sec01 .box, .yo .sec02 .box, .yo .sec03 .box {width: 100%;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            .yo_h {height: 350px !important;}
            .yadomei {width: 100%; max-width: 550px; font-size: 1.2em;}
            .yadojyo {font-size: 1.2em;}
            .yo .sec01 .box1 {flex: 0 1 auto; width: auto;}
            .flex.pdf div {flex: 0 1 auto;}
            .text_left {text-align: left;}
        }
/*=================================================
       access
=================================================*/

.acc .sec02 .box1 , .acc .sec02 .box22 {flex: 0 1 480px; width: auto;}
.ac_t01 {width: 100%; max-width: 450px;}

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            .acc .sec01 .box {width: 100%;}
            .acc .sec01 .g_map {position: relative; width: 100%; max-width: 900px; padding-top: 44.44%;}
            .acc .sec01 .g_map iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            .acc .sec02 .box {width: 100%; max-width: 1000px;}
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            .ac_h {height: 350px !important;}
            .acc .sec02 .box1 , .acc .sec02 .box2 {flex: 0 1 auto; width: 100%;}
            .acc .sec02 h2 {margin-bottom: 30px;}
        }
     

/*=================================================
       news
=================================================*/


@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
            .new_h {height: 350px !important;}
        }