@charset "UTF-8";


/*=================================================
       common
=================================================*/
a {text-decoration: none;}
.pc_on {display: block;}
.sp_on {display: none;}
.pc_ok {display: block;}
.sp_ok {display: none;}

@media screen and (max-width: 1280px) {
        html , body {min-width: 100%;}
        img {max-width: 100%; height: auto;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        .kaso_h2 {top: 50%; left: 50%; transform: translate(-50% , -35%); width: 90%; height: auto; overflow: hidden;}
        .popup_contents {width: 50% !important;}
        .popup_3 {bottom: 95px !important;}
        .popup_3 .popup_contents {width: 35% !important;}
        }
        

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

@media screen and (max-width: 1280px) {
            .g_nav1 {width: 100%;}
            .g_nav1 .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%;}
            .g_nav1 .box .box1 {flex: 0 1 500px; width: auto;}
            .g_nav1 .box .waku {flex: 0 1 700px; width: auto;}
            .g_nav1 .box .waku .box2 {width: 100%;}
            .g_nav1 .box .nav01 ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%;}
            .g_nav1 .box .nav01 ul li {flex: 0 1 134px; width: auto;}
        }
        @media screen and (max-width: 1200px) {
            .g_nav1 .box .box1 {padding-right: 50px;}
            .g_nav1 .box .box3 {padding-right: 0;}
        }
        @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-container .box {width: 100%;}
            .gnav_f ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; }
            .gnav_f ul li {padding: 0 1%;}
            .gnav_f ul li a {padding: 0; white-space: nowrap;}
        }
        @media screen and (max-width: 1024px) {
            .footer-container .box {padding-top: 20px;}
        }
        @media only screen and (max-width: 767px) {
        }
        
/*=================================================
       toppage
=================================================*/
@media screen and (max-width: 1280px) {
            #movie {min-width: 100%;}
        }
        @media screen and (max-width: 1100px) {
            .top .sec01 {padding: 0 1%; box-sizing: border-box;}
            .top .sec01 .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%;}
            .top .sec01 .box1 {flex: 0 1 180px; width: auto; margin-left: 0; margin-right: 20px;}
            .top .sec01 .box2 {flex: 0 1 776px; width: auto; }
            .top .sec02 {height: auto; padding: 0 1% 20%; box-sizing: border-box;}
            .top .sec02 .box {width: 100%;}
            .top .sec02 .box .box1 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%;}
            .top .sec02 .box .box1 .box11 {flex: 0 1 450px; width: auto; padding-top: 0;}
            .top .sec02 .box .box1 .box12 {flex: 0 1 630px; width: auto;}
            .top .sec02 .box12 p {width: 100%; max-width: 555px; height: auto; padding-left: 10%; padding-right: 5%; padding-bottom: 20%;}
            .top .sec02 .box .box1 .box12 .ai_f02 {width: 22%;}
            .box_ap {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; gap: 10px; padding-bottom: 30px;}
            .box_ap .ap01:before , .box_ap .ap02:before , .box_ap .ap03:before {display: block; content: ""; padding-top: 86.85%;}
            .box_ap .ap01 {flex: 0 1 327px; background: url(../image/ap_p01.jpg) no-repeat center center / 100% 100%; width: auto; height: auto;}
            .box_ap .ap01 .ap01_tit , .box_ap .ap02 .ap02_tit , .box_ap .ap03 .ap03_tit {top: 0; width: 100%;}
            .box_ap .ap01 .ap01_naiyo , .box_ap .ap02 .ap02_naiyo , .box_ap .ap03 .ap03_naiyo {width: 100%; height: 100%;}
            .box_ap .ap02 {flex: 0 1 327px; top: 30px; background: url(../image/ap_p02.jpg) no-repeat center center / 100% 100%; width: auto; height: auto; margin: 0;}
            .box_ap .ap03 {flex: 0 1 327px; background: url(../image/ap_p03.jpg) no-repeat center center / 100% 100%; width: auto; height: auto;}
            .top .sec03 {height: auto; padding: 0 2%; box-sizing: border-box;}
            .top .sec03 .box {width: 100%;}
            #mini {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: center; width: 100%; padding: 0 0 25px;}
            #mini #minileft {flex: 0 1 700px; width: auto; margin-left: 10px;}
            #mini #miniright {flex: 0 0 auto; background: ; width: auto; height: auto; padding: ; box-sizing: border-box;}
            #mini #miniright img { max-width: none; height: none;}
        }
        @media screen and (max-width: 1024px) {
            #movie {margin-top: 80px;}
            .top .sec01 .box {display: flex; flex-wrap; wrap; flex-direction: column; align-items: center; background: url(../image/bg_akishitsu_top.png) repeat-x left top , url(../image/bg_akishitsu_bot.png) repeat-x left bottom , url(../image/bg_akishitsu_mid.png) repeat left top; width: 100%; height: auto; padding: 50px 2%;}
            .top .sec01 .box1 {flex: 0 1 auto; width: auto; margin-bottom: 20px; margin-right: 0;}
            .top .sec01 .box2 {flex: 0 1 auto; width: auto; }
            .plan_form {width: 100%;}
            .plan_form form {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; width: 100%;}
            .plan_form form div {margin-bottom: 5px;}
            .plan_form form .check_in {order: 0;}
            .plan_form form .guests {order: 2;}
            .plan_form form .type {order: 3;}
            .plan_form form .day {order: 1; width: auto;}
            .plan_form form .price {order: 4;}
            .plan_form form .search_btn {order: 5; width: 100%; margin-top: 20px; text-align: center;}
            .box_ap .ap01 {border: 5px solid #fff;}
            .ap01:hover .ap01_tit , .ap02:hover .ap02_tit , .ap03:hover .ap03_tit {transform: translateY(0px);}
            .box_ap .ap01 .ap01_naiyo , .box_ap .ap02 .ap02_naiyo , .box_ap .ap03 .ap03_naiyo {padding-top: 85px; padding-left: 2%; padding-right: 2%;}
            .ap01 .ap01_naiyo a , .ap02 .ap02_naiyo a , .ap03 .ap03_naiyo a {margin-top: 10px;}
            .box_ap .ap02 { border: 5px solid #fff;}
            .box_ap .ap03 {border: 5px solid #fff;}
            .top .sec04 {height: auto; padding: 0 2%; }
            .top .sec04 .box {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; width: 100%;}
            .top .sec04 .box1 {flex: 0 1 600px; width: auto; margin-bottom: 30px;}
            .top .sec04 .box2 {flex: 0 1 220px; width: auto;}
        }
        @media only screen and (max-width: 767px) {
            .top .sec01 {margin-top: 80px;}
            .top .sec02 .box .box1 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%;}
            .top .sec02 .box .box1 .box11 {flex: 0 1 auto; width: auto; padding-top: 0;}
            .top .sec02 .box .box1 .box12 {flex: 0 1 auto; width: auto; padding-left: 0; padding-top: 40px;}
            .top .sec02 .box12 p {width: 100%; max-width: 555px; padding-top: 30px; padding-left: 5%; padding-right: 3%;}
            .top .sec02 .box .box1 .box12 .ai_f01 {left: -7%; width: 30%;}
            .top .sec02 .box .box1 .box12 .ai_f02 {width: 22%;}
            .box_ap {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%; gap: 10px; padding-bottom: 0;}
            .box_ap .ap01 {flex: 0 1 auto; width: 100%; max-width: 327px; border: 10px solid #fff;}
            .box_ap .ap02 {flex: 0 1 auto; width: 100%; top: 0; max-width: 327px; border: 10px solid #fff;}
            .box_ap .ap03 {flex: 0 1 auto; width: 100%; max-width: 327px; border: 10px solid #fff;}
            .ap01:hover .ap01_tit , .ap02:hover .ap02_tit , .ap03:hover .ap03_tit {transform: translateY(10px);}
            .box_ap .ap01 .ap01_naiyo , .box_ap .ap02 .ap02_naiyo , .box_ap .ap03 .ap03_naiyo {padding-top: 120px; padding-left: 2%; padding-right: 2%;}
            .ap01 .ap01_naiyo a , .ap02 .ap02_naiyo a , .ap03 .ap03_naiyo a {margin-top: 30px;}
            #mini {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; width: 100%; max-width: 450px; padding: 0 0 25px;}
            #mini #minileft {flex: 0 1 auto; width: auto; margin-left: 0;}
            #mini #miniright {flex: 0 0 auto; width: auto; height: auto; padding: ; box-sizing: border-box;}
            #mini #minileft h4 {margin-top: 0;}
            .top .sec04 .box1 {background: url(../image/cut_cat01.png) no-repeat right 3% / 18% auto;}
            .top .sec03 .box {background-size: 20% auto;}
        }
        
  
/*=================================================
       cuisine
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            .ryo .sec02 {height: auto; padding: 90px 2% 10%; box-sizing: border-box;}
            .ryo .sec02 .box {width: 100%;}
            .ryo .sec02 .waku {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%;}
            .ryo .sec02 .box .box1 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; flex: 0 1 513px; width: auto;}
            .ryo .sec02 .box .box1 .img {flex: 0 1 38%;}
            .ryo .sec02 .box .box1 .txt {flex: 0 1 60%;}
            .ryo .sec02 .box .box2 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; flex: 0 1 513px; width: auto;}
            .ryo .sec02 .box .box2 .box21 {flex: 0 1 60%;}
            .ryo .sec02 .box .box2 .box22 {flex: 0 1 38%;}
            .ryo .sec04 {padding: 0 2%; box-sizing: border-box;}
            .ryo .sec04 .box {width: 100%;}
            .ryo .sec04 .box_in .in_content {width: calc(100% - 550px);}
            .ryo .sec04_in {background-size: 100% 100%; width: 100%; height: auto;  padding: 50px 30px 30px;}
            .ryo .sec06 .box {width: 100%;}
            .ryo .sec07 , .ryo .sec08 , .ryo .sec09 {padding: 0 2%; box-sizing: border-box;}
            .ryo .sec07 .box , .ryo .sec08 .box {width: 100%;}
            .ryo .sec07 .waku , .ryo .sec08 .waku {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center; width: 100%; margin-top: 30px;}
            .ryo .sec07 .waku .box1 {flex: 0 1 540px; width: auto; margin-right: 20px; padding: 0;}
            .ryo .sec07 .waku .box2 {flex: 0 1 540px; width: auto; padding: 0;}
            .ryo .sec07 .box21 {background: url(../image/bg_ryo04.jpg) no-repeat center center / 100% 100%; width: 100%; max-width: 490px; height: auto;  margin: 20px auto 0; padding: 50px 30px;}
            .ryo .sec08 .waku .img {flex: 0 1 530px; width: auto; margin-right: 20px;}
            .ryo .sec08 .waku .txt {flex: 0 1 auto; width: auto;}
            .ryo #bbq {width: 100%;}
            .ryo .sec09 .box {margin-left: calc(100% - 387px);}
        }
        @media screen and (max-width: 1024px) {
            .ryo .sec01 {padding: 50px 2% 0;}
            .ryo .sec02 {background-size: cover;}
            .ryo .sec02 .box {display: table; width: auto; padding: 30px 2%;}
            .ryo .sec02 .waku {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%;}
            .ryo .sec02 .box .box1 {flex: 0 1 auto; width: 513px; margin-bottom: 0;}
            .ryo .sec02 .box .box2 {flex: 0 1 auto; width: 513px;}
            .ryo .sec04 .box_in {flex-wrap: wrap; flex-direction: column; align-items: center;}
            .ryo .sec04 .box_in p {display: table; width: auto;}
            .ryo .sec04 .box_in.sec {flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            .g_s .slick-dots , .slick-dots , .g_s .layout_under {position: static;}
            .layout_under {margin-top: 0; padding-top: 0;}
            .ryo .sec04 .box_in .in_content {width: 100%; max-width: 530px;}
            .ryo .sec06 {padding: 0 2%;}
            .ryo .sec06 .box {padding-left: 50%; background: url(../image/ryo_bg03.jpg) no-repeat left center / 60% auto;}
            .ryo .sec07 .waku {display: flex; flex-wrap: wrap; flex-direction: column-reverse;}
            .ryo .sec07 .waku .box1 {flex: 0 1 auto; width: auto; margin-right: 0; padding: 0;}
            .ryo .sec07 .waku .box2 {flex: 0 1 auto; width: auto; padding: 0;}
            .ryo .sec08 .waku {display: flex; flex-wrap: wrap; flex-direction: column;}
            .ryo .sec08 .waku .img {flex: 0 1 auto; width: auto; margin-right: 0;}
            .ryo .sec08 .waku .txt {flex: 0 1 auto; width: auto;}
            .ryo .sec09 .box {margin-top: 10%;}
            .ryo .sec10 {padding: 80px 2%;}
            .planbana {width: 100%; height: auto;}
        }
        @media only screen and (max-width: 767px) {
            .ryo .sec01 p {width: auto;}
            .ryo .sec02 {padding: 50px 2% 10%;}
            .ryo .sec02 .box .box1 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; height: auto; width: 100%;  max-width: 360px; margin: 20px 0 0; padding-bottom: 30px;}
            .ryo .sec02 .box .box1 .img {flex: 0 1 auto;}
            .ryo .sec02 .box .box1 .txt {flex: 0 1 auto;}
            .ryo .sec02 .box h4 {text-align: center;}
            .ryo .sec02 .box .box2 {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; height: auto; width: 100%; max-width: 360px; margin: 20px 0 0; padding-bottom: 30px;}
            .ryo .sec02 .box .box2 .box21 {flex: 0 1 auto;}
            .ryo .sec02 .box .box2 .box22 {flex: 0 1 auto;}
            .g_s .layout:before {display: block; content: ""; padding-top: 80.60%;}
            .layout:before {display: block; content: ""; padding-top: 80.60%;}
            .layout {width: 100%;}
            .layout .slider {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            .g_s .slick-dots {display: flex; flex-wrap: nowrap;}
            .g_s .slick-dots li {flex: 0 1 96px; width: auto;}
            .ryo .sec04_in {height: auto; padding: 50px 30px 30px;}
            .ryo .sec06 .box {height: auto; padding-left: 0; padding-bottom: ; background: none;}
            .ryo .sec06 .box .img {margin-top: 20px;}
            .ryo_p07 img {width: 35%;}
            .ryo #bbq {background: url(../image/ryo_bg05_sp.jpg) no-repeat center top/ 100% auto; height: auto;}
            .ryo .sec09 .box {width: 100%; max-width: 387px; height: auto; margin: 40% auto 0; padding-bottom: 30px;}
        }

/*=================================================
       staff
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            .sta .sec02 {padding: 0 2%;}
            .sta .sec02 .box {width: 100%;}
            .sta .sec02 .box .waku {flex-direction: row;}
            .sta .sec02 .box1 {}
            .sta .sec02 .box2 {}
            .sta .sec02 .box3 {}
            .sta .sec03 { height: auto; padding: 80px 2% 0;}
            .sta .sec03 .box {width: 100%;}
            .sta .sec03 .box .waku {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between;}
            .sta .sec03 .box1 {flex: 0 1 550px; width: auto;}
            .sta .sec03 .box2 {flex: 0 1 400px; width: auto;}
            .sta .sec04 {padding: 0 2%;}
            .sta .sec04 .box {background-size: 100% auto; width: 100%;}
        }
        @media screen and (max-width: 1058px) {
            .sta .sec02 .box1 { max-width: 48%; }
            .sta .sec02 .box1 .txt_box {}
            .sta .sec02 .box2 { max-width: 48%; }
            .sta .sec02 .box2 .txt_box {}
            .sta .sec02 .box3 { max-width: 48%; }
            .sta .sec02 .box3 .txt_box {}
        }
        @media screen and (max-width: 1024px) {
            .sta .sec01 .box { width: 100%; height: auto; padding: 30px 2% 0;}
            .sta .sec01 p { width: 100%; max-width: 600px;}
            .sta .sec02 .box { background: url(../image/cut_sta01.png) no-repeat left 2%, url(../image/cut_sta02.png) no-repeat right 2%;}
            .sta .sec02 .box .waku { display: flex; align-items: center; margin-top: 30px;}
            .sta .sec02 .box1 { display: flex; flex-direction: column; background: none; max-width: 48%; height: auto; }
            .sta .sec02 .box1 .txt_box { display: flex; justify-content: center; flex-flow: column; order: 2; position: static; transform: translateY(0); max-width: 500px; margin-top: 1em; }
            .sta .sec02 .box1 h3 { display: block; width: 100%; }
            .sta .sec02 .box1 .txt_box br { display: none; }
            .sta .sec02 .box1 .sp_ok { display: block; }
            .sta .sec02 .box2 { display: flex; flex-direction: column; background: none; max-width: 48%; height: auto; }
            .sta .sec02 .box2 .txt_box { display: flex; justify-content: center; flex-flow: column; order: 2; position: static; transform: translateY(0); max-width: 500px; margin-top: 1em; }
            .sta .sec02 .box2 h3 { display: block; width: 100%; }
            .sta .sec02 .box2 .txt_box br { display: none; }
            .sta .sec02 .box2 .sp_ok { display: block; }
            .sta .sec02 .box3 { display: flex; flex-direction: column; background: none; max-width: 48%; height: auto; margin-top: 3em; }
            .sta .sec02 .box3 .txt_box { display: flex; justify-content: center; flex-flow: column; order: 2; position: static; transform: translateY(0); max-width: 500px; margin-top: 1em; }
            .sta .sec02 .box3 h3 { display: block; width: 100%; }
            .sta .sec02 .box3 .txt_box br { display: none; }
            .sta .sec02 .box3 .sp_ok { display: block; }
            .sta .sec03 { background-size: cover; padding-bottom: 80px;}
            .sta .sec03 .box {display: table; width: auto;}
            .sta .sec03 .box .waku {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            .sta .sec03 .box1 {flex: 0 1 auto; width: auto; padding: 30px 0 20%;}
            .sta .sec03 .box2 {flex: 0 1 auto; width: auto;}
            .sta .sec04 .box {background-position: center bottom; width: 100%; height: auto; padding-bottom: 0;}
            .hananonae {position: static; margin-top: 20px;}
        }
        @media only screen and (max-width: 767px) {
            .sta .sec01 .box {background: url(../image/bg_sta01.png) no-repeat left top / 30% auto, url(../image/bg_sta02.png) no-repeat right 20% / 15% auto;}
            .sta .sec02 .box {background: url(../image/cut_sta01.png) no-repeat left top / 40% auto, url(../image/cut_sta02.png) no-repeat right 2% / 25% auto; height: auto;}
            .sta .sec02 .box .waku { flex-direction: column; }
            .sta .sec02 .box1 { align-items: center; max-width: 96%; }
            .sta .sec02 .box1 .txt_box { display: flex; justify-content: center; flex-flow: column; order: 2; position: static; transform: translateY(0); }
            .sta .sec02 .box1 h3 { display: block; width: 100%; }
            .sta .sec02 .box1 .txt_box br { display: none; }
            .sta .sec02 .box2 { align-items: center; max-width: 96%; margin-top: 4em; }
            .sta .sec02 .box2 .txt_box { display: flex; justify-content: center; flex-flow: column; order: 2; position: static; transform: translateY(0); }
            .sta .sec02 .box2 h3 { display: block; width: 100%; }
            .sta .sec02 .box2 .txt_box br { display: none; }
            .sta .sec02 .box3 { align-items: center; max-width: 96%; margin-top: 4em; }
            .sta .sec02 .box3 .txt_box { display: flex; justify-content: center; flex-flow: column; order: 2; position: static; transform: translateY(0); }
            .sta .sec02 .box3 h3 { display: block; width: 100%; }
            .sta .sec02 .box3 .txt_box br { display: none; }

            .sta .sec04 p {width: 100%;}
        }
        
/*=================================================
       spa
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            .on .sec01 {padding: 0 2%;}
            .on .sec01 .box {width: 100%;}
            .on .sec01 .waku {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; gap: 10px;}
            .on .sec01 .waku .box11 {flex: 0 1 540px; width: auto;}
            .on .sec03 {padding: 0 2%;}
            .on .sec03 .box {width: 100%;}
            .on .sec03 .box .waku {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center;}
            .on .sec03 .box .waku .box1 {flex: 0 1 540px; width: auto;}
            .on .sec03 .box .waku .box2 {flex: 0 1 540px; width: auto;}
            .on .sec03 .box2 p {background-size: 100% 100%; width: 100%; max-width: 446px;}
        }
        @media screen and (max-width: 1024px) {
            .on .sec03 .box2 p {height: auto; padding: 30px 30px 30px 80px;}
            .on .sec04 {padding: 100px 2% 50px;}
        }
        @media only screen and (max-width: 767px) {
            .on .sec01 .box1 {padding-top: 80px;}
            .on .sec01 .waku {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 10px;}
            .on .sec01 .waku .box11 {position: relative; flex: 0 1 auto; width: auto;}
            .on .sec01 .waku .box11.last {margin-top: 50px;}
            .onnayu {top: -20%; left: 0;}
            .otokoyu {top: -20%; right: 0;}
            .on .sec02 {padding: 0 2%;}
            .t-on01 {width: 100%; max-width: 550px;}
            .on .sec03 .box .waku {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .on .sec03 .box .waku .box1 {flex: 0 1 auto; width: auto;}
            .on .sec03 .box .waku .box2 {flex: 0 1 auto; width: auto;}
            .on .sec03 .box2 p {background-image: url(../image/bg_on01_sp.png); margin-top: 0; padding: 60px 30px 30px 30px;}
        }

        
/*=================================================
       goods
=================================================*/
            .img2:after {display: block; content: ""; clear both;}
            .img2 {list-style: none;}
            .img2 li {float: left; width: 49%; max-width: ; margin-left: 2%;}
            .img2 li:nth-of-type(odd) {margin-left: 0;}

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            .omo .sec02 {padding: 0 2%;}
            .omo .sec02 .box {width: 100%;}
            .omo .sec02 .box .waku {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center; gap: 20px;}
            .omo .sec02 .box1 {flex: 0 1 540px; width: auto; height: auto;}
            .omo .sec02 .box2 {flex: 0 1 540px; width: auto; height: auto;}
            .omo .sec02 .box3 {flex: 0 1 540px; width: auto; height: auto;}
            .omo .sec02 .box4 {flex: 0 1 540px; width: auto; height: auto; padding-left: 0;}
            .omo .sec02 .box5 {flex: 0 1 540px; width: auto; height: auto;}
            .omo .sec02 .box6 {flex: 0 1 540px; width: auto; height: auto;}
            .omo .sec02 .box7 {flex: 0 1 540px; width: auto; height: auto;}
            .omo .sec02 .box8 {flex: 0 1 540px; width: auto; height: auto; padding-left: 0;}
            .omo_p05 {width: 30%; bottom: -30px;}
            .img2:after {display: block; content: ""; clear both;}
            .img2 {list-style: none;}
            .img2 li {float: left; width: 49%; margin-left: 2%;}
            .img2 li:nth-of-type(odd) {margin-left: 0;}
            .omo .sec02 .box8 p {width: 100%; max-width: 500px;}
        }
        @media screen and (max-width: 1024px) {
            .ac_h {margin-top: 80px;}
            .omo .sec01 {padding: 0 2%;}
            .omo_p05 {right: -10%; width: 35%;}
            .omo .sec02 .box5 .omo_p05 {bottom: -20px; right: -13%; bottom: -30px;}
            .omo .sec03 {padding: 80px 2% 50px;}
            .bru_link {margin: 50px auto 0; text-align: center;}
        }
        @media only screen and (max-width: 767px) {
            .omo .sec01 p {width: 100%; max-width: 610px;}
            .omo .sec02 h3 {max-width: 600px; margin: 0 auto;}
            .omo .sec02 .box .waku {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; max-width: 531px; margin: 0 auto 30px;}
            .omo .sec02 .box .waku.re {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .omo .sec02 .box1 {flex: 0 1 auto; width: auto; height: auto; margin-top: 0; padding-top: 20px;}
            .omo .sec02 .box2 {flex: 0 1 auto; width: auto; height: auto;}
            .omo .sec02 .box3 {flex: 0 1 auto; width: auto; height: auto;}
            .omo .sec02 .box4 {flex: 0 1 auto; width: auto; height: auto; margin-top: 0; padding-left: 0;}
            .omo .sec02 .box5 {flex: 0 1 auto; width: auto; height: auto;}
            .omo .sec02 .box6 {flex: 0 1 auto; width: auto; height: auto;}
            .omo .sec02 .box7 {flex: 0 1 auto; width: auto; height: auto;}
            .omo .sec02 .box8 {flex: 0 1 auto; width: auto; height: auto; margin-top: 0; padding-left: 0;}
            .omo .sec02 .box1 .omo_p05 {top: -120px; right: 0;}
            .omo .sec02 .box5 .omo_p05 {top: -130px; right: 0; bottom: 0;}
        }

        
/*=================================================
       facility
=================================================*/
@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1100px) {
            .kan .sec02 , .kan .sec03  {padding: 0 2%;}
            .kan .sec02 .box , .kan .sec03 .box {width: 100%;}
            .kan .sec02 .box .waku {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 20px;}
            .kan .sec02 .box1 {flex: 0 1 540px; width: auto;}
            .kan .sec02 .box2 {flex: 0 1 540px; width: auto; height: auto;}
            .kan .sec02 .box3 {flex: 0 1 540px; width: auto; height: auto;}
            .kan .sec02 .box4 {flex: 0 1 540px; width: auto;}
            .kan .kan_p06 {width: 35%; right: 0;}
            .kan .kan_p07 {width: 35%; right: 0;}
            .kan .sec03 .box .waku {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 10px;}
            .kan .sec03 .box1 {flex: 0 1 540px; width: auto;}
            .kan .sec03 .box2 {flex: 0 1 540px; width: auto; height: auto;}
        }
        @media screen and (max-width: 1024px) {
            .kan .sec05 {padding: 80px 2% 50px;}
            .kan .kan_p07 {bottom: -30px;}
            .kan .kan_p06.wa {bottom: -45px;}
        }
        @media only screen and (max-width: 767px) {
            .kan .sec02 .box .waku {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; margin: 0 auto 30px; max-width: 531px;}
            .kan .sec02 .box .waku.re {flex-direction: column-reverse;}
            .kan .sec02 .box1 {flex: 0 1 auto; width: auto;}
            .kan .sec02 .box2 {flex: 0 1 auto; width: 100%; height: auto; margin-top: 0; padding-left: 0;}
            .kan .sec02 .box3 {flex: 0 1 auto; width: 100%; height: auto; margin-top: 0; padding-left: 0;}
            .kan .sec02 .box4 {flex: 0 1 auto; width: auto;}
            .kan .kan_p06 {width: 30%; right: 0; bottom: auto; top: -83%;}
            .kan .kan_p06.wa {bottom: auto; top: -50%;}
            .kan .kan_p07 {width: 30%; right: 0; bottom: auto; top: -83%;}
            .kan .kan_p09 {position: static;}
            .kan .sec03 .box .waku {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; margin: 0 auto; max-width: 531px;}
            .kan .sec03 .box1 {flex: 0 1 auto; width: auto; padding-top: 10px;}
            .kan .sec03 .box2 {flex: 0 1 auto; width: 100%; height: auto; margin-top: 0; padding-left: 0;}
            .kan ol {padding-left: 1.5em;}
            .kan .sec03 .box3 {width: 100%; height: auto; padding: 20px 2%;}
            .kan .sec04  {padding: 80px 2% 0;}
            .kan .sec04 .box , .t-kan01 {width: 100%;}
        }

        
/*=================================================
       area_guide
=================================================*/
@media screen and (max-width: 1280px) {
            .kanko_h:after {display: block; content: ""; padding-top: 41.66%;}
            .kanko_h {position: relative; width: 100%; height: auto;}
        }
        @media screen and (max-width: 1100px) {
            .kanko .sec02 {padding: 0 2%;}
            .tsumatab {width: 100%;}
            .tsumatab .tab-menu {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center;}
            .tsumatab .tab-menu li {flex: 0 1 270px; width: auto; padding: 0 5px;}
            .kanko .sec02 .box1 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center;}
            .kanko .sec02 .box1 .box11 {flex: 0 1 280px; background: none; width: auto; height: auto; padding: 0;}
            .kanko .sec02 .box1 .box11 img {background: url(../image/bg_kanko.png) no-repeat center center / 100% 100%; width: 100%; padding: 25px;}
            .kanko .sec02 .box1 .box12 {flex: 0 1 750px; width: auto;}

        }
        @media screen and (max-width: 1024px) {
            .kanko_h {margin-top: 80px;}
            .kanko .sec03 {padding: 80px 2% 80px;}
        }
        @media only screen and (max-width: 767px) {
            .kanko .sec01 {padding: 0 2%;}
            .kanko .sec01 .box {width: 100%;}
            .tsumatab .tab-menu {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .tsumatab .tab-menu li {flex: 0 1 auto; width: 100%; padding: 0 5px;}
            .kanko .sec02 .box1 {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .kanko .sec02 .box1 .box11 {flex: 0 1 auto; background: url(../image/bg_kanko.png) no-repeat center center / 100% 100%; width: auto; padding: 35px;}
            .kanko .sec02 .box1 .box12 {flex: 0 1 auto; width: auto;}
            .kanko .sec02 .box1 .box11 img {background: none; width: auto; padding: 0;}
        }


/*=================================================
       charge
=================================================*/
@media screen and (max-width: 1280px) {
            .yo_h:after {display: block; content: ""; padding-top: 41.66%;}
            .yo_h {position: relative; width: 100%; height: auto;}
        }
        @media screen and (max-width: 1100px) {
            .yo .sec03 {padding: 0 2%;}
            .yo .sec03 .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: auto; padding: 50px 20px;}
            .yo .sec03 .box .box1 {flex: 0 1 auto; padding: 0;}
            .yo .sec03 .box .box2 {flex: 0 1 570px; width: auto;}
        }
        @media screen and (max-width: 1024px) {
            .yo_h {margin-top: 80px;}
            .yo .sec02 {padding: 50px 2%;}
            .yo .sec03 .box {display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 600px; height: auto; padding: 100px 20px 30px;}
            .yo .sec03 .box .box1 {flex: 0 1 auto; padding: 0;}
            .yo .sec03 .box .box2 {flex: 0 1 auto; width: auto;}
        }
        @media only screen and (max-width: 767px) {
            .yo .sec01 {padding: 50px 2% 0;}
            .t-yo01 {width: 100%;}
            .t-yo01 th {width: 25%;}
            .yo .sec01 .box1 , .yo .sec01 .box11 {width: 100%;}
            .yo_fami {left: 0; top: -8%;}
            .yo .sec01 .box11 {height: auto; padding: 0 2% 30px;}
            .yo .sec04 {padding: 80px 2% 0;}
            .yo .sec05 {padding: 80px 2% 50px;}
            .t-yo02 {width: 100%;}
            .t-yo02 th {width: 25%; white-space: nowrap;}
            .t-yo01 th {padding: 5px 0; white-space: nowrap;}
            .t-yo01 td {padding: 10px 0;}
        }



/*=================================================
       access
=================================================*/
@media screen and (max-width: 1280px) {
            .ac_h:after {display: block; content: ""; padding-top: 41.66%;}
            .ac_h {position: relative; width: 100%; height: auto;}
        }
        @media screen and (max-width: 1100px) {
            .ac .sec01 {padding: 0 2%;}
            .ac .sec01 .box {width: 100%;}
        }
        @media screen and (max-width: 1024px) {
             .ac .sec02 {padding: 50px 2% 0;}
            .g_map:after {display: block; content: ""; padding-top: 44.44%;}
            .g_map {position: relative; width: 100%; height: auto;}
            .g_map iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            .ac .sec04 {padding: 80px 2% 50px;}
        }
        @media only screen and (max-width: 767px) {
            .ac .sec03 {padding: 50px 2% 0;}
        }