@charset "UTF-8";


/*=================================================
       common
=================================================*/
a {text-decoration: none;}
.pc_on {display: block;}
.sp_on {display: none;}
.pc_ok {display: block;}
.sp_ok {display: none;}
.pc_ook {display: block;}
.sp_ook {display: none;}
h2 {text-align: center;}
.clear {clear: both;}
.fancybox__content {padding: 10px !important;}

@media screen and (max-width: 1300px) {
        .pc_ook {display: none;}
        .sp_ook {display: block;}
         }
@media screen and (max-width: 1280px) {
        html , body {min-width: 100%;}
        img {max-width: 100%; height: auto;}
        .contentsbox_1280 {width: 100%;}
        }
        @media screen and (max-width: 1100px) {
        .contentsbox_1100 {width: 100%;}
        .contentsbox_1100.flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: flex-end; width: 100%;}
            .contentsbox_1100.flex .lfloat {flex: 0 1 550px; width: auto !important; margin-right: 10px;}
            .contentsbox_1100.flex .rfloat {flex: 0 1 520px; width: auto !important;}
        }
        @media screen and (max-width: 1024px) {
        * {box-sizing: border-box;}
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .contentsbox_1100.flex {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            .contentsbox_1100.flex .lfloat {flex: 0 1 auto; width: auto !important; margin-right: 0; margin-top: 20px;}
            .contentsbox_1100.flex .rfloat {flex: 0 1 auto; width: auto !important;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        }
        

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

            #globalNavi .sub {width: 100%;}
            #globalNavi .sub_logo {float: left;}
            #globalNavi .sub .tel {float:right; margin-top: 10px; margin-right: 10px;}
            #globalNavi .sub .tel > div {display:grid;grid-template-columns: 145px auto;grid-template-rows: 29px;gap:5px;}
#globalNavi .sub .tel > div img{width:100%;height:100%;object-fit: contain;}
            #globalNavi .button .logo {float: left;}
            #globalNavi .button .nav {float:right;}

@media screen and (max-width: 1280px) {
            #Navi_wrapper {min-width: 100%;}
            #globalNavi {width: 100%;}
            #globalNavi .button {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%;}
            #globalNavi .button .logo {flex: 0 1 224px;}
            #globalNavi .button .logo h1 {width: auto; height: auto;}
            #globalNavi .button .nav {flex: 0 1 auto; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-around;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }
        

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

@media screen and (max-width: 1280px) {
            #footer_wrapper {min-width: 100%;}
            #footer {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%;}
            #footer #footer_add {flex: 0 1.3 auto; width: auto;}
            #footer #footernavi {flex: 0 0 auto; width: auto; margin: 70px 0 0;}
            #footer #footernavi ul {margin-right: 10px;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            #footer_wrapper {background-size: auto 100%; height: auto; padding-top: 30px;}
            #footer {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
            #footer #footer_add {flex: 0 1 auto; margin: 50px auto 20px auto;}
        }
        @media only screen and (max-width: 767px) {
            #footer {padding: 0 2%;}
            #footer #footer_add .large {font-size: 1em;}
        }
        
/*=================================================
       toppage
=================================================*/
.plan .rfloat h3 {text-align: center;}
.plan .rfloat .ichiran {padding-top: 30px;}
.plan .rfloat #search {margin-top: 50px;}


@media screen and (max-width: 1300px) {
            .box {width: 100%;}
            .box video {width: 100%; height: auto;}
            .greeting , .charm_wrap {min-width: 100%;}
            .greeting .effect {position: relative; margin-top: 80px;}
            .greeting .effect li img:is([style]) {margin: auto !important;}
            .greeting .effect li:nth-of-type(odd) {text-align: center;}
            .greeting .effect li:nth-of-type(2) {position: absolute; top: 0; right: 1%; width: 24%;}
            .greeting .effect li:nth-of-type(3) {margin-top: 30px;}
            .greeting .effect li:nth-of-type(4) {position: absolute; bottom: 0; left: 1%; width: 20%;}
            .charm_wrap {padding: 0 1% ; box-sizing: border-box;}
            .charm_wrap .effect ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-around; padding-left: 1%;}
            .charm_wrap .effect ul li {flex: 0 1 410px; width: auto; height: auto;}
            .charm_wrap .bnr a {display: block; margin: 40px auto; text-align: center;}
            .charm_wrap .bnr img:is([style]) {margin:auto !important;}
            .plan {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; width: 100%; padding: 0 1%; box-sizing: border-box;}
            .plan .lfloat {flex: 0 0 280px; width: auto !important; margin-right: 20px;}
            .plan .lfloat table {width: 100% !important; max-width: 280px;}
            .plan .rfloat:is([style]) {flex: 0 1 940px; width: auto !important;}
            .plan .rfloat #mini {width: 33% !important; max-width: 300px; margin: 0 0.3% 10px 0;}
            .plan .rfloat #mini:last-of-type {margin-right: 0;}
            .plan .rfloat #mini #miniright {width: 100% !important; }
            .plan .rfloat #mini #minileft {width: 100% !important;  box-sizing: border-box; overflow: hidden;}
            #search {background: url(../img/search_bg1.png) no-repeat left top / 200px 100%, #8cb4da; width: 100%; height: auto; padding: 25px 10px 20px 20px; border-radius: 15px; box-sizing: border-box;}
            #search .waku {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; width: 100%;}
            #search .waku .title_box {flex: 0 0 190px;}
            #search .waku .plan_form {flex: 0 1 auto; width: auto;}
            #search .waku .plan_form form {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; width: 100%;}
            #search .waku .plan_form form div {width: auto; margin: 0 20px 10px 0;}
            #search .waku .plan_form form .search_btn {display: block; margin: 3px 0 0;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            .box {margin-top: 80px;}
            .greeting {height: auto; padding-bottom: 50px;}
            .greeting .effect ul {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; }
            .greeting .effect li:nth-of-type(1) {order: 1;}
            .greeting .effect li:nth-of-type(2) {order: 3; position: static; width: 30%; margin-top: 30px; margin-left: 30%;}
            .greeting .effect li:nth-of-type(3) {order: 2;}
            .greeting .effect li:nth-of-type(4) {order: 4; position: static; width: 23%; margin-top: -17%; margin-right: 30%;}
            .charm_wrap {height: auto; padding-bottom: 50px;}
            .plan {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center;}
            .plan .lfloat {flex: 0 0 auto; width: auto !important; margin-right: 0;}
            .plan .rfloat:is([style]) {flex: 0 1 auto; width: auto !important; max-width: 850px;}
        }
        @media only screen and (max-width: 767px) {
            .greeting {padding: 0 2% 50px;}
            .greeting .effect li:nth-of-type(2) {width: 50%; margin-top: 30px; margin-left: auto; margin-right: 10px; }
            .greeting .effect li:nth-of-type(4) {width: 43%; margin-top: -23%; margin-right: auto; margin-left: 10px;}
            .charm_wrap .effect ul {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 30px;}
            .charm_wrap .effect ul li {flex: 0 1 auto; margin: 0;}
            .charm_wrap h2 {margin-bottom: 20px;}
            .plan {padding: 0 2%;}
            .plan .rfloat #mini {float: none; width: auto !important; margin: 0 auto 30px;}
            #search {background: url(../img/search_bg2.png) no-repeat center top / 100% 120px, #8cb4da; width: 100%; max-width: 450px; height: auto; margin: 0 auto; padding: 35px 0 30px 0; border-radius: 15px; box-sizing: border-box;}
            #search .waku {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; align-items: center; width: 100%;}
            #search .waku .title_box {flex: 0 1 auto; margin-bottom: 60px;}
            #search .waku .plan_form {flex: 0 1 auto; width: auto;}
            #search .waku .plan_form form {flex-direction: column; align-items: center;}
            #search .waku .plan_form form .search_btn {display: block; width: 100%; margin-top: 30px; text-align: center;}
            #search .waku .plan_form form .check_in {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: flex-start; gap: 10px;}
            #search .waku .plan_form form .check_in p {display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-start;}
            #search + .m40 {margin: 40px auto;}
        }

/*=================================================
       cuisine
=================================================*/
@media screen and (max-width: 1280px) {
            .cuisine .contentsbox_1280 {padding: 0 2%; box-sizing: border-box;}
            #cuisine_introduction {background: url(../cuisine/cuisine_bg.png) no-repeat center top / 100% auto; width: 100%;}
            #cuisine_introduction .maincopy {margin: 57% auto auto auto;}
            #cuisine_introduction .effect .iseebi {right: 20px; left: auto; width: 28%;}
            #cuisine_introduction .effect .awabi {top: auto; bottom: 0; width: 23%;}
            .reason01 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center; background: url(../cuisine/reason01_bg.png) no-repeat left top / cover; width: 100%; height: auto; padding: 0 2% 10%; box-sizing: border-box;}
            .reason01 .movie {position: relative; flex: 0 1 550px; width: auto; height: auto; margin: 110px 10px 0 0;}
            .reason01 .movie video , .reason02 .movie video , .reason03 .movie video {width: 100%; height: auto;}
            .reason01 .copy {flex: 0 1 620px; width: 100%; height: auto; margin: 110px 0 0 0;}
            .reason02 {background: url(../cuisine/reason02_bg.png) no-repeat left top / cover; width: 100%; height: ; padding: 0 2% 10%; box-sizing: border-box;}
            .reason03 {background: url(../cuisine/reason03_bg.png) no-repeat left top / cover; width: 100%; height: ; padding: 0 2% 10%; box-sizing: border-box;}

        }
        @media screen and (max-width: 1200px) {
            #cuisine_introduction {height: auto; padding-bottom: 8%;}
            #cuisine_introduction .effect .iseebi {top: 54%; right: 20px; left: auto; width: 27%;}
            #cuisine_introduction .effect .awabi {top: auto; left: 20px; bottom: 0; width: 20%;}
        }
        @media screen and (max-width: 1100px) {
            .cuisine .contentsbox_1100 {padding: 0 2%; box-sizing: border-box;}
            .bx-pager1 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%;}
            .bx-pager1 a {flex: 0 1 130px;}
            .online {width: 100%; height: auto;}
            .online img {display: table; width: 100%; max-width: 900px; height: auto; margin: 0 auto;}
        }
        @media screen and (max-width: 1024px) {
            #cuisine_main {position: relative; height: 450px; margin-top: 80px;}
            #cuisine_main img {position: absolute; bottom: 0; right: 0;}
            #cuisine_introduction .effect .iseebi {position: static; float: right; width: 50%; margin-top: 20px;}
            #cuisine_introduction .effect .awabi {position: static; width: 40%; margin-top: 0; margin-left: 10%;}
            .reason01 {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: flex-start; background: url(../cuisine/no1.png) no-repeat left top , url(../cuisine/reason01_bg_sp.png) no-repeat center top / cover;}
            .reason01 .movie {flex: 0 1 auto; width: auto; max-width: 550px; height: auto; margin: 30px 0 0 0;}
            .reason01 .copy {flex: 0 1 auto; width: 100%; max-width: 550px; height: auto; margin: 110px 0 0 0;}
            .reason01 .copy h3 , .reason02 .copy h3 , .reason03 .copy h3 {margin: 10px 0 20px;}
            .reason02 {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: ; background: url(../cuisine/no2.png) no-repeat left top , url(../cuisine/reason02_bg_sp.png) no-repeat 70% top / cover; height: auto;}
            .reason02 .movie {flex: 0 1 auto; width: auto; max-width: 550px; height: auto; margin: 30px 0 0 0;}
            .reason02 .copy {flex: 0 1 auto; width: 100%; max-width: 550px; height: auto; margin: 110px 0 0 0;}
            .reason02 .copy .img {margin-top: 10px;}
            .reason03 {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: ; background: url(../cuisine/no3.png) no-repeat left top , url(../cuisine/reason03_bg_sp.png) no-repeat center top / cover; height: auto;}
            .reason03 .movie {flex: 0 1 auto; width: auto; max-width: 550px; height: auto; margin: 30px 0 0 0;}
            .reason03 .copy {flex: 0 1 auto; width: 100%; max-width: 550px; height: auto; margin: 110px 0 0 0;}
        }
        @media only screen and (max-width: 767px) {
            #cuisine_main {position: relative; height: 250px;}
            #cuisine_main img {position: absolute; bottom: 0; right: 0; height: 70%; padding: 0;}
            #cuisine_introduction .effect .awabi {position: static; width: 40%; margin-top: 0; margin-left: 0;}
            .reason02 {background: url(../cuisine/no2.png) no-repeat left top , url(../cuisine/reason02_bg_sp.png) no-repeat 40% top / cover; height: auto;}
            .reason03 {background: url(../cuisine/no3.png) no-repeat left top , url(../cuisine/reason03_bg_sp.png) no-repeat left top / cover; height: auto;}
        }
  
/*=================================================
       facilities
=================================================*/

@media screen and (max-width: 1280px) {
            .facilities .contentsbox_1280 {padding: 0 2%; box-sizing: border-box;}
            #facilities_introduction {width: 100%; height: auto; padding-bottom: 10%;}
            #facilities_introduction .effect {overflow: visible;}
            .sunset {top: auto; bottom: 30px; width: 30%;}
            .sea {top: auto; bottom: 35px; left: auto; right: 20px; width: 25%;}
            .roorm_wrap {min-width: 100%;}
        }
        @media screen and (max-width: 1100px) {
            .facilities .contentsbox_1100 {padding: 0 2%; box-sizing: border-box;}
            .facilities .type01 .lfloat {flex: 0 1 400px;}
            .facilities .type01 .rfloat {flex: 0 1 660px;}
            .facilities .type02_2 {align-items: flex-start;}
            .facilities .type02 .lfloat , .facilities .type02_2 .lfloat {flex: 0 1 530px;}
            .facilities .type02 .rfloat , .facilities .type02_2 .rfloat {flex: 0 1 530px;}
            .facilities .type03 {flex-wrap: wrap; justify-content: center; gap: 10px;}
            .facilities .type03 .etc {flex: 0 1 auto; margin: 0;}
            #lobby {background: url(../facilities/coffee_bg.png) no-repeat center top / 100% auto; width: 100%;}
            #lobby .typearea {width: 43%; height: auto; margin: 10% auto auto auto;}
            #t-shirt {background: url(../facilities/t-shirt_bg.png) no-repeat 0 0 / 100% auto; width: 100%; }
            #t-shirt .typearea {width: 45%; height: auto; margin: 11% auto auto 20%;}
        }
        @media screen and (max-width: 1024px) {
            #facilities_main {position: relative; height: 450px; margin-top: 80px;}
            #facilities_main img {position: absolute; bottom: 0; right: 0;}
            #facilities_introduction {height: auto; padding-bottom: 50px;}
            #facilities_introduction .effect ul {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; }
            #facilities_introduction .effect li:nth-of-type(1) {order: 1;}
            #facilities_introduction .effect li:nth-of-type(2) {order: 3; position: static; width: 35%; margin-top: 30px; margin-right: 30%;}
            #facilities_introduction .effect li:nth-of-type(3) {order: 4; position: static; width: 28%; margin-top: -20%; margin-left: 30%;}
            #facilities_introduction .effect li:nth-of-type(4) {order: 2;}
            .roorm_wrap {background: url(../facilities/room_bg.jpg) repeat-x 0 0 / cover; height: auto;}
            .facilities .type01 .lfloat {flex: 0 1 auto;}
            .facilities .type01 .rfloat {flex: 0 1 auto; width: 100% !important; max-width: 660px;}
            .facilities .type02_2 {align-items: center;}
            .facilities .type02 .lfloat , .facilities .type02_2 .lfloat {flex: 0 1 auto;}
            .facilities .type02 .rfloat , .facilities .type02_2 .rfloat {flex: 0 1 auto; margin-top: 30px;}
            .facilities .type03 {flex-wrap: wrap; flex-direction: row;}
            #lobby {width: 540px;}
            #t-shirt {background: url(../facilities/t-shirt_bg_sp.png) repeat 0 0; height: auto; text-align: center; width: 100%; max-width: 430px; margin: 0 auto; padding: 30px 15px 0;}
            #t-shirt .typearea {float: none; width: auto; margin: 0;}
            #t-shirt .typearea h4 {margin: 20px 0 10px;}
        }
        @media only screen and (max-width: 767px) {
            #facilities_main {position: relative; height: 250px;}
            #facilities_main img {position: absolute; bottom: 0; right: 0; height: 70%; padding: 0;}
            #facilities_introduction {padding: 0 2% 50px;}
            #facilities_introduction .effect li:nth-of-type(2) {width: 50%; margin-top: 30px; margin-right: auto; margin-left: 10px; }
            #facilities_introduction .effect li:nth-of-type(3) {width: 43%; margin-top: -28%; margin-left: auto; margin-right: 10px;}
            .facilities .type02_2 .lfloat {width: 100% !important; max-width: 530px;}
            #lobby {background: url(../facilities/coffee_bg_sp.png) no-repeat center top / 100% auto; width: 100%; height: auto; }
            #lobby ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; gap:10px;}
            #lobby ul.one li:nth-of-type(1) {flex: 0 1 55%;}
            #lobby ul.one li:nth-of-type(2) {flex: 0 1 45%;}
            #lobby ul.sec li:nth-of-type(1) {flex: 0 1 56%;}
            #lobby ul.sec li:nth-of-type(2) {flex: 0 1 44%; align-self: center;}
            #lobby .typearea {width: auto; margin: 0;}
        }
        @media only screen and (max-width: 460px) {
            #lobby ul {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; max-width: 360px; margin: 0 auto;}
            #lobby ul.one {flex-direction: column-reverse; margin-bottom: 30px;}
            #lobby ul.one li:nth-of-type(1) {flex: 0 1 auto;}
            #lobby ul.one li:nth-of-type(2) {flex: 0 1 auto;}
            #lobby ul.sec li:nth-of-type(1) {flex: 0 1 auto;}
            #lobby ul.sec li:nth-of-type(2) {flex: 0 1 auto; align-self: center;}
        }
        
        
/*=================================================
       bath
=================================================*/
table.facilities {margin-top: 10px;}

@media screen and (max-width: 1280px) {
            .bath .contentsbox_1280 {padding: 0 2%; box-sizing: border-box;}
            #bath_introduction {width: 100%;}
            #bath_introduction .effect {overflow: visible;}
            #bath_introduction .left {top: auto; bottom: 30px; width: 30%;}
            #bath_introduction .right {top: auto; bottom: 35px; left: auto; right: 20px; width: 25%;}
            .bath .type01 .lfloat {flex: 0 1 370px;}
            .bath .type01 .rfloat {flex: 0 1 690px;}
            .bath .type01_2 {flex-direction: row-reverse;}
            .bath .type01_2 .lfloat {flex: 0 1 690px;}
            .bath .type01_2 .rfloat {flex: 0 1 370px;}
            .bath .type02 .lfloat {flex: 0 1 530px;}
            .bath .type02 .rfloat {flex: 0 1 530px;}
        }
        @media screen and (max-width: 1100px) {
            .bath .contentsbox_1100 {padding: 0 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1024px) {
            #bath_main {position: relative; height: 450px; margin-top: 80px;}
            #bath_main img {position: absolute; bottom: 0; right: 0;}
            #bath_introduction {height: auto; padding-bottom: 15%;}
            .bath .type01 .lfloat {flex: 0 1 auto; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; max-width: 690px; gap: 10px;}
            .bath .type01 .lfloat p {flex: 0 1 50%;}
            .bath .type01 .lfloat img {flex: 0 1 50%;}
            .bath .type01 .rfloat {flex: 0 1 auto;}
            .bath .type01_2 {flex-direction: column-reverse;}
            .bath .type01_2 .lfloat {flex: 0 1 auto;}
            .bath .type01_2 .rfloat {flex: 0 1 auto; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 20px; max-width: 690px; gap: 10px;}
            .bath .type01_2 .rfloat p {flex: 0 1 50%;}
            .bath .type01_2 .rfloat img {flex: 0 1 50%;}
            .bath .type02 {flex-direction: column;}
            .bath .type02 .lfloat {flex: 0 1 auto;}
            .bath .type02 .rfloat {flex: 0 1 auto; margin-top: 20px;}
            .bath .btn {margin-left: 0 !important;}
            table.facilities th {white-space: nowrap;}
        }
        @media only screen and (max-width: 767px) {
            #bath_main {position: relative; height: 250px;}
            #bath_main img {position: absolute; bottom: 0; right: 0; height: 70%; padding: 0;}
            #bath_introduction .left {top: auto; bottom: 30px; left: 10px; width: 30%;}
            #bath_introduction .right {top: auto; bottom: 35px; left: auto; right: 10px; z-index: -1; width: 25%;}
            .bath .type01 .lfloat {flex: 0 1 auto; display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
            .bath .type01 .lfloat p {flex: 0 1 auto;}
            .bath .type01 .lfloat img {flex: 0 1 auto;}
            .bath .type01_2 .rfloat {flex: 0 1 auto; display: flex; flex-wrap: wrap; flex-direction: column; }
            .bath .type01_2 .rfloat p {flex: 0 1 auto;}
            .bath .type01_2 .rfloat img {flex: 0 1 auto;}
        }
        @media only screen and (max-width: 460px) {
        }



/*=================================================
       discovery
=================================================*/

#hougen {background: url(../discovery/hougen_bg.png) no-repeat center top;}

@media screen and (max-width: 1280px) {
            .discovery .contentsbox_1280 {padding: 0 2%; box-sizing: border-box;}
            #discovery_introduction {width: 100%; height: auto; padding: 0 0 15%;}
            #discovery_introduction .effect {overflow: visible;}
            #discovery_introduction .left {top: auto; left: 20px; bottom: 30px; width: 30%;}
            #discovery_introduction .right {top: auto; bottom: 35px; left: auto; right: 20px; z-index: -1; width: 25%;}
            .mystery01 , .mystery03 {background: url(../discovery/mystery_01bg.png) right top / cover; width: 100%; height: ; padding: 0 2% 50px; box-sizing: border-box;}
            .mystery03 {background: url(../discovery/mystery_03bg.png) right top / cover;}
            .mystery01 .movie , .mystery03 .movie {float: none; position: relative; right: 0; height: auto; margin: 0 0 0 auto; padding-top: 110px;}
            .mystery01 .copy , .mystery03 .copy {float: none; position: relative; right: 0; margin: 20px 0 0 auto;}
            .mystery02 , .mystery04 {background: url(../discovery/mystery_02bg.png) left top / cover; width: 100%; height: ; padding: 0 2% 50px; box-sizing: border-box;}
            .mystery04 {background: url(../discovery/mystery_04bg.png) left top / cover;}
            .mystery02 .movie , .mystery04 .movie {float: none; position: relative; left: 0; height: auto; margin: 0 auto 0 0; padding-top: 110px;}
            .mystery02 .copy , .mystery04 .copy {float: none; position: relative; left: 0; margin: 20px auto 0 0;}
            #hougen {position: relative; width: 100%; max-width: 1100px; margin: 0 auto;}
            .zonbu {top: 14%; left: 19%;}
            .gaiee {top: 6%; left: 34%;}
            .tei {top: 24%; left: 50%;}
            .yaa {left: auto; right: 20%;}
            .hayai {top: 36%; left: 27%;}
            .oige {top: 48%; left: auto; right: 22%;}
            .sogenmo {top: 67%; left: 19%;}
            .ookin {left: auto; right: 2%;}
        }
        @media screen and (max-width: 1200px) {
            #hougen {background: url(../discovery/hougen_bg.png) no-repeat center bottom / 100% auto;}
        }
        @media screen and (max-width: 1100px) {
            .discovery .contentsbox_1100 {padding: 0 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1024px) {
            #discovery_main {position: relative; height: 450px; margin-top: 80px;}
            #discovery_main img {position: absolute; bottom: 0; right: 0;}
            #hougen {background: none; height: auto;}
            #hougen ul {display: flex; flex-wrap; flex-direction: column; width: 100%; max-width: 530px; margin: 0 auto; gap:20px;}
            #hougen ul li {position: relative; }
            #hougen ul li:nth-of-type(3) {padding-top: 13%; }
            #hougen ul li:nth-of-type(2) {padding-top: 7%;  }
            #hougen ul li:nth-of-type(3) .hito {text-align: center; }
            #hougen ul li:nth-of-type(2) .hito {text-align: right; }
            .zonbu {top: 0; left: 31%;}
            .gaiee {top: 13%; left: 62%;}
            .tei {top: 0; left: 67%;}
            .yaa {left: auto; right: 29%; top: 0;}
            .hayai {top: 43%; left: 0;}
            .oige {top: auto; left: auto; right: 0; bottom: 5%;}
            .sogenmo {top: auto; left: auto; bottom: 0; right: 0;}
            .ookin {left: auto; right: 45%; top: auto; bottom: 0;}
        }
        @media only screen and (max-width: 767px) {
            #discovery_main {position: relative; height: 250px;}
            #discovery_main img {position: absolute; bottom: 0; right: 0; height: 70%; padding: 0;}
            #discovery_introduction {padding: 0 0 25%;}
            #discovery_introduction .left {top: auto; bottom: 30px; left: 10px; width: 30%;}
            #discovery_introduction .right {top: auto; bottom: 35px; left: auto; right: 10px; width: 25%;}
            .mystery01 , .mystery03 {background: url(../discovery/no1.png) no-repeat right top , url(../discovery/mystery_01bg_sp.png) no-repeat right top / cover; height: auto; padding: 110px 2% 50px;}
            .mystery03 {background: url(../discovery/no3.png) no-repeat right top , url(../discovery/mystery_03bg_sp.png) no-repeat right top / cover;}
            .mystery01 .movie , .mystery03 .movie {position: relative; width: 100%; max-width: 550px; margin: 0 auto; padding-top: 54%;}
            .mystery01 .movie video , .mystery03 .movie video {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}
            .mystery01 .copy , .mystery03 .copy {position: static; width: 100%; height: auto; margin: 20px auto 0;}
            .mystery02 , .mystery04 {background: url(../discovery/no2.png) no-repeat left top , url(../discovery/mystery_02bg_sp.png) no-repeat left top / cover; height: auto; padding: 110px 2% 50px;}
            .mystery04 {background: url(../discovery/no4.png) no-repeat left top , url(../discovery/mystery_04bg_sp.png) no-repeat left top / cover;}
            .mystery02 .movie , .mystery04 .movie {position: relative; width: 100%; max-width: 550px; margin: 0 auto; padding-top: 54%;}
            .mystery02 .movie video , .mystery04 .movie video {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}
            .mystery02 .copy , .mystery04 .copy {position: static; width: 100%; height: auto; margin: 20px auto 0;}
            .zonbu {width: 35%;}
            .gaiee {width: 32%;}
            .tei {width: 35%;}
            .yaa {right: 40%; width: 35%;}
            .hayai {top: auto; bottom: 3%; width: 35%;}
            .oige {width: 30%;}
            .sogenmo {width: 50%;}
            .ookin{right: auto; left: 0; width: 48%;}
        }


/*=================================================
       exploration
=================================================*/
.exploration .flex .rfloat > img {margin-bottom: 10px;}

@media screen and (max-width: 1280px) {
            .exploration .contentsbox_1280 {padding: 0 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1100px) {
            .exploration .contentsbox_1100 {padding: 0 2%; box-sizing: border-box;}
            .exploration .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%;}
            .exploration .flex .lfloat {flex: 0 1 360px; width: auto !important; margin-right: 20px;}
            .exploration .flex .rfloat {flex: 0 1 710px; width: auto !important;}
        }
        @media screen and (max-width: 1024px) {
            #exploration_main {position: relative; height: 450px; margin-top: 80px;}
            #exploration_main img {position: absolute; bottom: 0; right: 0;}
        }
        @media only screen and (max-width: 767px) {
            #exploration_main {position: relative; height: 250px;}
            #exploration_main img {position: absolute; bottom: 0; right: 0; height: 70%; padding: 0;}
            .exploration .flex {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%; max-width: 500px; margin: 0 auto;}
            .exploration .flex .lfloat {flex: 0 1 auto; width: auto !important; margin-right: 0; margin-bottom: 20px;}
            .exploration .flex .rfloat {flex: 0 1 auto; width: auto !important;}
        }



/*=================================================
       reserve
=================================================*/

@media screen and (max-width: 1280px) {
            .reserve .contentsbox_1280 {padding: 0 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1100px) {
            .reserve .contentsbox_1100 {padding: 0 2%; box-sizing: border-box;}
            .reserve .waku {display: flex; flex-wrap: nowrap; justify-content: center; align-items:center;}
            .reserve .waku .lfloat {flex: 0 1 530px; width: auto !important; margin-right: 20px;}
            .reserve .waku .rfloat {flex: 0 1 530px; width: auto !important;}
            table.rate td {width: 50%; max-width: 240px;}
        }
        @media screen and (max-width: 1024px) {
            #reserve_main {position: relative; height: 450px; margin-top: 80px;}
            #reserve_main img {position: absolute; bottom: 0; right: 0;}
            .cash_wrap {width: 100%;}
        }
        @media only screen and (max-width: 767px) {
            #reserve_main {position: relative; height: 250px;}
            #reserve_main img {position: absolute; bottom: 0; right: 0; height: 70%; padding: 0;}
            .reserve .waku {flex-direction:column;}
            .reserve .waku .lfloat {flex: 0 1 auto; width: 100% !important; margin-right: 0; margin-bottom: 20px;}
            .reserve .waku .rfloat {flex: 0 1 auto; width: auto !important;}
        }



/*=================================================
       areaguide
=================================================*/

.areaguide .flex .rfloat > img {margin-bottom: 10px;}

@media screen and (max-width: 1280px) {
            .areaguide .contentsbox_1280 {padding: 0 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1100px) {
            .areaguide .contentsbox_1100 {padding: 0 2%; box-sizing: border-box;}
            .areaguide .flex {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; width: 100%;}
            .areaguide .flex .lfloat {flex: 0 1 360px; width: auto !important; margin-right: 20px;}
            .areaguide .flex .rfloat {flex: 0 1 710px; width: auto !important;}
        }
        @media screen and (max-width: 1024px) {
            #areaguide_main {position: relative; height: 450px; margin-top: 80px;}
            #areaguide_main img {position: absolute; bottom: 0; right: 0;}
        }
        @media only screen and (max-width: 767px) {
            #areaguide_main {position: relative; height: 250px;}
            #areaguide_main img {position: absolute; bottom: 0; right: 0; height: 70%; padding: 0;}
            .areaguide .flex {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 100%; max-width: 500px; margin: 0 auto;}
            .areaguide .flex .lfloat {flex: 0 1 auto; width: auto !important; margin-right: 0; margin-bottom: 20px;}
            .areaguide .flex .rfloat {flex: 0 1 auto; width: auto !important;}
        }


/*=================================================
       access
=================================================*/

@media screen and (max-width: 1280px) {
            .access .contentsbox_1280 {padding: 0 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1100px) {
            .access .contentsbox_1100 {padding: 0 2%; box-sizing: border-box;}
            .access .map {position: relative; padding-top: 45.45%;}
            .access .map iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            .access .waku {display: flex; flex-wrap: nowrap; justify-content: center; align-items:flex-start;}
            .access .waku .lfloat {flex: 0 1 530px; width: auto !important; margin-right: 20px;}
            .access .waku .rfloat {flex: 0 1 530px; width: auto !important;}
            #caution {background: url(../access/caution_bg.jpg) no-repeat center top , #f4f3ef; width: 100%; height: auto; padding: 0 40px 40px;}
            #caution .title {width: 100%;}
            #caution .typearea {width: auto; height: auto; margin-left: 0;}
            .access .waku2 {display: flex; flex-wrap: nowrap; justify-content: center; align-items:flex-start;}
            .access .waku2 .lfloat {flex: 0 1 700px; width: auto !important; margin-right: 20px;}
            .access .waku2 .rfloat {flex: 0 1 360px; width: auto !important;}
        }
        @media screen and (max-width: 1024px) {
            #access_main {position: relative; height: 450px; margin-top: 80px;}
            #access_main img {position: absolute; bottom: 0; right: 0;}
            .access .waku2 {flex-direction:column; max-width: 700px; margin: 0 auto;}
            .access .waku2 .lfloat {flex: 0 1 auto; width: auto !important; margin-right: 0; margin-bottom: 20px;}
            .access .waku2 .rfloat {flex: 0 1 auto; width: auto !important;}
            table.link th {padding: 10px 5px; text-indent: 0;}
        }
        @media only screen and (max-width: 767px) {
            #access_main {position: relative; height: 250px;}
            #access_main img {position: absolute; bottom: 0; right: 0; height: 70%; padding: 0;}
            .access .waku {flex-direction:column;}
            .access .waku .lfloat {flex: 0 1 auto; width: auto !important; margin-right: 0; margin-bottom: 20px;}
            .access .waku .rfloat {flex: 0 1 auto; width: auto !important;}
            #caution {padding: 0 2% 30px;}
            .access .waku.al_center {align-items: center;}
            table.link th {width: 30%;}
            table.link td {width: auto;}
            table.link td p a {word-break: break-all;}
        }


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

@media screen and (max-width: 1280px) {
            .gallery .contentsbox_1280 {padding: 0 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1100px) {
            .gallery .contentsbox_1100 {padding: 0 2%; box-sizing: border-box;}
            #gallery_wrap {width: 100%;}
            #gallery_list {display: flex; flex-wrap: wrap; justify-content: center; align-items:flex-start;}
            #gallery_list li {flex: 0 1 250px; width: auto; height: auto; margin: 0 0 18px;}
            }
        @media screen and (max-width: 1024px) {
            #gallery_main {position: relative; height: 450px; margin-top: 80px;}
            #gallery_main img {position: absolute; bottom: 0; right: 0;}
        }
        @media only screen and (max-width: 767px) {
            #gallery_main {position: relative; height: 250px;}
            #gallery_main img {position: absolute; bottom: 0; right: 0; height: 70%; padding: 0;}
        }



/*=================================================
       jakorokke
=================================================*/

#jakorokke {position: relative; background: none; height: auto;}
#jakorokke .typearea {position: absolute; bottom: 70px; right: 65px; width: auto; height: auto; margin: 0;}

@media screen and (max-width: 1280px) {
            .jakorokke .contentsbox_1280 {padding: 0 2%; box-sizing: border-box;}
        }
        @media screen and (max-width: 1100px) {
            .jakorokke .contentsbox_1100 {padding: 0 2%; box-sizing: border-box;}
            #jakorokke {width: 100%; height: auto;}
            #jakorokke .typearea {bottom: 10%; right: 3%;}
            #to_burger {background: url(../jakorokke/to_burger_bg.png) no-repeat left top / 100% auto , #fdb03c; width: 100%; height: auto; overflow: hidden; padding: 0 2% 20px 0; box-sizing: border-box;}
            #to_burger .typearea , #to_burger .object {width: auto; margin-left: 50%;}
            .jakorokke .waku {display: flex; flex-wrap: nowrap; justify-content: center; }
            .jakorokke .waku .lfloat {flex: 0 1 550px; width: auto !important; margin-right: 20px;}
            .jakorokke .waku .rfloat {flex: 0 1 530px; width: auto !important;}
            #j-ashiyu {background: url(../jakorokke/ashiyu_bg.png) no-repeat left top / 100% auto; width: 100%;}
            #j-ashiyu .typearea {width: 48%; margin: 11% auto auto 18%;}
            .jakorokke .waku2 {display: flex; flex-wrap: nowrap; justify-content: center; }
            .jakorokke .waku2 .lfloat {flex: 0 1 30%; width: auto !important; margin-right: 20px;}
            .jakorokke .waku2 .rfloat {flex: 0 1 70%; width: auto !important;}
            }
        @media screen and (max-width: 1024px) {
            #jakorokke_main {position: relative; height: 450px; margin-top: 80px;}
            #jakorokke_main img {position: absolute; bottom: 0; right: 0;}
            #jakorokke .typearea {right: 0;}
            #to_burger {background: #fdb03c; width: 100%; height: auto; overflow: hidden; padding: 20px 50px 20px 50px; max-width: 600px; margin: 0 auto;}
            #to_burger .typearea , #to_burger .object {float: none; width: auto; margin-left: 0; margin: 30px auto 0;}
            .jakorokke .waku {flex-direction:column; align-items:center;}
            .jakorokke .waku .lfloat {flex: 0 1 auto; width: auto !important; margin-right: 0; margin-bottom: 20px;}
            .jakorokke .waku .rfloat {flex: 0 1 auto; width: auto !important;}
            #j-ashiyu {background: #f5f3ef; padding: 30px 15px 0; max-width: 430px; height: auto; margin: 0 auto;}
            #j-ashiyu .typearea {float: none; width: auto; height: auto; margin: 0;}
             #j-ashiyu .typearea h4 {margin: 20px 0 10px;}
            .jakorokke .waku2 {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; }
            .jakorokke .waku2 .lfloat {flex: 0 1 auto; width: auto !important; margin-right: 0; margin-top: 20px;}
            .jakorokke .waku2 .rfloat {flex: 0 1 auto; width: auto !important;}
            .jakorokke .waku2 .rfloat table {width: 100% !important;}
        }
        @media only screen and (max-width: 767px) {
            #jakorokke_main {position: relative; height: 250px;}
            #jakorokke_main img {position: absolute; bottom: 0; right: 0; height: 70%; padding: 0;}
            #jakorokke .typearea {position: static; margin-top: 20px;}
            #to_burger {padding: 20px 2% 20px 2%;}
        }