@charset "UTF-8";


/*=================================================
       common
=================================================*/
a {text-decoration: none;}
.pc_on {display: block;}
.sp_on {display: none;}
.pc_oon {display: block;}
.sp_oon {display: none;}
.pc_ok {display: block;}
.sp_ok {display: none;}
.center {text-align: center;}
input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}
 
@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;}
        .box1280 {width: 100%;}
        .wrap {width: 100%; height: auto;}
        }
        @media screen and (max-width: 1200px) {
            .box_1200 {width: 100%; padding: 0 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1000px) {
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .banner {padding: 50px 2% 100px;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        .to_top {bottom: 5%; width: 25%; max-width: 94px;}
        }
        @media only screen and (max-width: 560px) {
        }
        

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

@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) {
        }
        @media only screen and (max-width: 560px) {
        }
        

/*=================================================
       footer
=================================================*/

@media screen and (max-width: 1280px) {
        }
        @media screen and (max-width: 1200px) {
            .f_bg {width: 100%;}
            .f_cosplayer {left: 20%;}
            .count {left: 23%;}
        }
        @media screen and (max-width: 1024px) {
            footer {display: block; padding-bottom: 10px;}
            footer , .f_bg {height: auto;}
            footer .f_bg {display: flex; flex-wrap: wrap; flex-direction: column; aling-items: center; text-align: center;}
            .f_cosplayer {margin: 0 auto;}
            .f_cosplayer , .count {position: static;}
            .f_bg02 {width: 100%; height: auto; padding-left: 0; padding-top: 30px;}
            .u_f_cosplayer {position: static; margin: 0 auto;}
        }
        @media only screen and (max-width: 767px) {
        }
 
/*=================================================
       toppage
=================================================*/

@media screen and (max-width: 1280px) {
            .sky_box {background-size: 100% auto; width: 100%; height: auto;}
            .top_bg {width: 100%;}
            #cloud {width: 100%;} 
            .house {/*background-size: calc(100% - 250px) auto; */width: 100%;}
            .tutuji_left {width: 20%;}
            .tutuji_right {width: 20%; bottom: -50px;}
            .butterfly {left: 35%;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            .sky_box {margin-top: 100px;}
            .top_bg {position: relative; height: auto; padding-top: 56.5%;}
            #cloud , .house {position: absolute; top: 0; left: 0; background-size: 100% auto; width: 100%; height: 100%;}
            .top_plan {display: none;}
            .cosplayer {bottom: 0; top: auto; right: 12%;}
            .to_cos {right: 4%; bottom: 32%;}
            .suzume01 {top: auto; bottom: 60.66%; left: 5%;}
            .suzume02 {top: auto; bottom: 60.66%; left: 12%;}
            .suzume03 {top: auto; bottom: 57.2%; left: 19%;}
            .g_bg_top {background-size: cover; height: auto; padding: 80px 0;}
            .plan_bg {padding: 0 2%;}
            .flex {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            .flex .left {width: auto; margin-right: 0;}
            .flex .right {width: auto;}
            .plan_booth {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; height: auto;}
            .plan_booth .plan_p {flex: 0 0 220px; width: auto;}
            .plan_booth .plan_text {flex: 0 1 520px; width: auto;}
            .search {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap:20px; width: auto; height: auto;}
            .tutuji_left {display: none;}
            .tutuji_right {display: none;}
        }
        @media only screen and (max-width: 767px) {
            .to_cos {bottom: 122px;}
            .cosplayer {right: 15%;}
            .tutuji_left {bottom: -10%}
            .tutuji_right {bottom: -10%}
            .txt01 {text-align: left;}
            .plan_booth {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; max-width: 450px;}
            .plan_booth .plan_p {flex: 0 0 auto; width: auto;}
            .plan_booth .plan_text {flex: 0 1 auto; width: auto; margin-top: 20px;}
            .search {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap:20px; width: auto;}
            .plan_t , .plan_d {margin-left: 0;}
        }
        @media only screen and (max-width: 560px) {
            .to_cos {right: 0; bottom: 95px; width: 30%; max-width: 150px;}
            .to_cos a {width: auto; height: auto;}
            .suzume03 {bottom: 55.2%;}
        }

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

@media screen and (max-width: 1280px) {
            .header_img_spa {width: calc(100% - 220px); height: auto;}
            .header_img_spa img {margin-bottom: -5px;}
            .h_title_spa {left: 50%; top: 50%; transform: translate(-50% , -50%); padding-left: 220px;}
            .box_main {width: 100%; padding: 0 20px 0 240px; box-sizing: border-box;}
            .spa_g_box {background-size: 100% auto; height: auto;}
            .spa_img {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; height: auto;}
            .co_table {width: 100%;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            .spa {padding: 0 2%;}
            .header_img_spa {width: 100%; height: auto; margin-top: 80px; padding-left: 0;}
            .h_title_spa {left: 50%; top: 50%; transform: translate(-50% , -50%); padding-left: 0;}
            .box_main {width: 100%; padding: 0;}
            .spa_e02 {display: none;}
        }
        @media only screen and (max-width: 767px) {
            .spa_img {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            .spa_img li:first-child {margin-right: 0;}
            .spa_e02 {right: auto; left: 0;}
            .spa_g_box {padding-bottom: 20%;}
            .spa_e01 , .spa_e02 {width: 30%;}
            #spa .txt01.pt_30 {margin-top: 0;}
        }
  
/*=================================================
       cuisine
=================================================*/

@media screen and (max-width: 1280px) {
            .header_img_cu {width: calc(100% - 220px); height: auto;}
            .header_img_cu img {margin-bottom: -5px;}
            .h_title_cu {left: 50%; top: 50%; transform: translate(-50% , -50%); padding-left: 220px;}
            .cu_g_box {background-size: 100% auto; height: auto; padding: 0 0 15%; box-sizing: border-box;}
            .wrap p {height: auto;}
            .d_txt {bottom: 0;}
            .kobachi_box {background: url(../img/cuisine/kobachi_bg.png) no-repeat center center / 100% 100%; height: auto; padding: 7% 5%;}
            .kobachi_title {position: static; text-align: center; }
            .kobachi_img {position: static; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 20px; width: 100%; height: auto; padding-top: 10%;}
            .kobachi_img li {flex: 0 1 288px; width: auto; margin-right: 0;}
            .kobachi_img li .pin {position: relative; z-index: 10; text-align: center; margin-bottom: -20px;}
            .kobachi_img li .pin img {box-shadow: none; text-align: center;}
            .kobachi_txt {position: static; display: table; margin: 0 auto;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            .header_img_cu {width: 100%; height: auto; margin-top: 80px; padding-left: 0;}
            .h_title_cu {left: 50%; top: 50%; transform: translate(-50% , -50%); padding-left: 0;}
            #cuisine section {padding-left: 2%; padding-right: 2%;}
            .d_txt {position: static; display: table; margin: 20px auto 0;}
            .cu_title {width: 30%; max-width: 275px;}
            .cu_txt {margin-left: 35%;}
        }
        @media only screen and (max-width: 767px) {
            .cu_title {position: static; display: table; width: auto; max-width: 230px; margin: 20px auto 0;}
            .cu_txt {position: static; display: table; margin: 0 auto 0;}
            .kobachi_box {background: url(../img/cuisine/kobachi_bg_sp.png) no-repeat center center / 100% 100%; max-width: 460px; height: auto; margin: 100px auto 0; padding: 95px 8% 80px;}
            .kobachi_img {position: static; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 20px; width: 100%; height: auto; padding-top: 20%;}
            .kobachi_img li {flex: 0 1 auto; width: auto; margin-right: 0;}
            .kobachi_txt {margin-top: 30px; text-align: left;}
            .cu_box {display: flex; flex-direction: column; align-items: center;}
            .cu_title {order: 1;}
            .cu_txt {order: 2; margin-bottom: 30px;}
            .cu_img {order: 3;}
            .sun {display: none;}
        }
          
/*=================================================
       lodging
=================================================*/

@media screen and (max-width: 1280px) {
            .header_img_lo {width: calc(100% - 220px); height: auto;}
            .header_img_lo img {margin-bottom: -7px;}
            .h_title_lo {left: 50%; top: 50%; transform: translate(-50% , -50%); padding-left: 220px;}
            .g_box {background-size: 100% auto; height: auto; padding: 0 0 15%; box-sizing: border-box;}
            #room_img ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: 5px;}
            #room_img ul li {flex: 0 1 140px; width: auto; max-width: 140px; height: auto; margin-left: 0;}
            .wrap li img {height: auto;}
            #room_img ul.dinner_m {justify-content: flex-start;}
            .dinner_img .sr_txt {bottom: 0;}
            .k_bg {background-size: 100% auto;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            .header_img_lo {width: 100%; height: auto; margin-top: 80px; padding-left: 0;}
            .h_title_lo {left: 50%; top: 50%; transform: translate(-50% , -50%); padding-left: 0;}
            #lodging section {padding-left: 2%; padding-right: 2%;}
            #room_img ul {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 5px;}
            #room_img ul.dinner_m {justify-content: center;}
            .dinner_img .sr_txt {position: static; margin-left: 0; margin-top: 30px;}
            .day_trip_tel {height: 93px;}
        }
        @media only screen and (max-width: 767px) {
            .co_table tr th {display: block; width: 100%; padding: 10px 5px;}
            .co_table tr td {display: block; width: auto; padding: 10px 5px;}
            .txt {text-align: left;}
            .kskr_title {padding-left: 0;}
            #room_img ul li {flex: 0 1 32%;}
        }


/*=================================================
       cosplay
=================================================*/

@media screen and (max-width: 1280px) {
            .header_img_cos {width: calc(100% - 220px); height: auto;}
            .header_img_cos img {margin-bottom: -7px;}
            .h_title_cos {left: 50%; top: 50%; transform: translate(-50% , -50%); padding-left: 220px;}
            .cos_g_box {background-size: 100% auto; height: auto; padding: 0; box-sizing: border-box;}
            .cos_img {height: auto;}
            .cos_img_box {height: auto; padding-bottom: 10%;} 
            .cos_img_box .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center; gap:20px;}
            .cos_img_box .box:nth-of-type(2) {flex-direction: row-reverse;}
            .cos_img_box .box:nth-of-type(3) p {align-self: flex-start; margin-top: 5%;}
            .cos_img_box .box:nth-of-type(1) p , .cos_img_box .box:nth-of-type(2) p {align-self: flex-end; margin-bottom: 5%;}
            .cos_img_box .box a {flex: 0 1 450px; position: static;}
            .cos_img_box .box p {flex: 0 1 460px; position: static;}
            .bf01 {right: 0; top: 0;}
            .bf02 {left: auto; right: 70%; top: 28%;}
            .cos_e {right: 0;}
            .cos_f {right: 14%;}
            .cos_info {flex-wrap: wrap; justify-content: center; gap:30px;}
            .twitter {flex: 0 1 460px;}
            .co_tel_box {width: auto; margin-right: 0;}
            .twitter-timeline {width: 100% !important; max-width: 460px !important;}
            .twitter-timeline iframe {width: 100% !important;}
            .rr_img {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center; gap:20px;}
            .rr_img li {flex: 0 1 485px; width: auto; margin-right: 0;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            #cosplay section {padding-left: 2%; padding-right: 2%;}
            .header_img_cos {width: 100%; height: auto; margin-top: 80px; padding-left: 0;}
            .h_title_cos {left: 50%; top: 50%; transform: translate(-50% , -50%); padding-left: 0;}
            .cos_img {background-size: cover;}
            .cos_img_box {padding-bottom: 260px;} 
            .cos_img_box .box {display: flex; flex-wrap: wrap; flex-direction: column; max-width: 600px; margin: 0 auto 50px;}
            .bf02 {left: 50px; right: auto; top: 33%;}
            .cos_img_box .box:nth-of-type(2) {flex-direction: column;}
            .cos_img_box .box:nth-of-type(3) p {align-self: center; margin-top: 0;}
            .cos_img_box .box:nth-of-type(1) p , .cos_img_box .box:nth-of-type(2) p {align-self: center; margin-bottom: 0;}
            .cos_img_box .box a {flex: 0 1 auto;}
            .cos_img_box .box p {flex: 0 1 auto;}
            .cos_e {right: 22%; left: auto}
            .cos_f {right: 43%; left: auto;}
            .cos_tel {height: 120px;}
        }
        @media only screen and (max-width: 767px) {
            .cos_e {right: 0; left: auto}
            .cos_f {right: 152px; left: auto;}
            .bf01 {right: 0; top:-50px; width: 30%;}
            .bf02 {left: 0; right: auto; top: 25%; width: 22%;}
            .rr_img {display: flex; flex-wrap: wrap; flex-direction: column;}
            .rr_img li {flex: 0 1 auto; width: auto; margin-right: 0;}
        }
        
/*=================================================
       access
=================================================*/
.ss_box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: ; gap:20px;}
.ss_box .img {flex: 0 1 350px; position: relative;}
.ss_box .ss_txtbox {flex: 0 1 630px; width: auto;}
.tape {left: 38% ;}
.ss_img {margin-right: 0;}


@media screen and (max-width: 1280px) {
            .h_title_ac {width: 100%; max-width: 577px;}
            .header_img_ac {width: calc(100% - 220px); height: auto;}
            .header_img_ac img {margin-bottom: -6px;}
            .h_title_ac {left: 50%; top: 50%; transform: translate(-50% , -50%); padding-left: 220px;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            #access section {padding-left: 2%; padding-right: 2%;}
            .header_img_ac {width: 100%; height: auto; margin-top: 80px; padding-left: 0;}
            .h_title_ac {left: 50%; top: 50%; transform: translate(-50% , -50%); padding-left: 0;}
        }
        @media only screen and (max-width: 767px) {
            .ss_box {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; max-width: 460px; margin: 0 auto 80px;}
            .ss_box .img {flex: 0 1 auto;}
            .ss_box .ss_txtbox {flex: 0 1 auto; width: auto;}
            #access iframe {height: 250px;}
        }

/*=================================================
       reservation
=================================================*/
.form {padding-left: 15px;}
.plan_form .price {float: left;}
.plan_form .search_btn {padding-right: 15px;}

@media screen and (max-width: 1280px) {
            .h_title_re {width: 100%; max-width: 632px;}
            .header_img img {margin-bottom: -6px;}
            .header_img {width: calc(100% - 220px); height: auto;}
            .h_title_re {left: 50%; top: 50%; transform: translate(-50% , -50%); padding-left: 220px;}
            .re_plan_box {width: 100%; max-width: 800px;}
            .re_plan_booth {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%; height: auto;}
            .re_plan_booth .re_plan_p {flex: 0 0 220px; width: auto;}
            .re_plan_booth .re_plan_text {flex: 0 1 580px; width: auto;}
        }
        @media screen and (max-width: 1200px) {
            .daruma01 , .daruma02 {width: 25%;}
            .plan_form {width: 100%; max-width: 800px;}
        }
        @media screen and (max-width: 1024px) {
            #reservation section {padding-left: 2%; padding-right: 2%;}
            .header_img {width: 100%; height: auto; margin-top: 80px; padding-left: 0;}
            .h_title_re {left: 50%; top: 50%; transform: translate(-50% , -50%); padding-left: 0;}
            .plan_form {height: auto; padding-bottom: 10px;}
            form {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 10px; padding: 0 2%;}
            .form {flex: 01 550px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 10px; width: auto; padding-left: 0;}
            .search_btn {flex: 0 1 196px; margin-top: 10px; padding-right: 0;}
            .plan_form .check_in {display: flex; flex-wrap: nowrap; flex-direction: row; gap: 10px;}
            .plan_form .text_r {padding: 0;}
            .plan_form .price {margin-top: 0;}
            
        }
        @media only screen and (max-width: 767px) {
            .re_box {background-size: cover; height :auto; padding-bottom: 30%;}
            .re_plan_booth {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; max-width: 450px; margin: 0 auto 50px;}
            .re_plan_booth .re_plan_p {flex: 0 0 auto; width: auto;}
            .re_plan_booth .re_plan_text {flex: 0 1 auto; width: auto; margin-top: 10px;}
            .re_plan_t , .re_plan_d {margin-left: 0;}
            .daruma01, .daruma02 {width: 40%;}
        }

/*=================================================
       gallery
=================================================*/


@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) {
        }


/*=================================================
       faq
=================================================*/


@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) {
        }