@charset "utf-8";
/* CSS Document */


/*==================================
	base
==================================*/
.inner { max-width: 1260px;}
@media screen and (min-width: 750px) {
body { background: url("../img/top/mv_bgdot_pc.gif") top center no-repeat;}
}
@media screen and (max-width: 749px) {
}

/*==================================
	top_mv
==================================*/
.top_mv { z-index: 10;}
.top_mv .scroll { position: absolute; z-index: 10; bottom: -90px; left: calc( 50% + 630px );}
.top_mv .put1,
.top_mv .put2,
.top_mv .put4,
.top_mv .put4_icon,
.top_mv .japan { position: absolute; z-index: 10;}
.top_mv .put3 { position: absolute;}
.top_mv .mvSearchBoxArea { background: #4bb4f0;}
.top_mv .mvSearchBoxArea .mvSearchBox { background: #fff; border-radius: 10px;}
.top_mv .mvSearchBoxArea .mvSearchBox .mvtab-content .mb { margin-bottom: 20px;}
.top_mv .mvSearchBoxArea .mvSearchBox .mvtab-content .custom-select-wrapper { width: 100%;}
.top_mv .mvSearchBoxArea .mvSearchBox .mvtab-content .custom-select-wrapper .custom-select { width: 100%; font-size: 18px;}
.top_mv .mvSearchBoxArea .mvSearchBox .mvtab-content .btn { margin-top: 20px;}
.top_mv .mvSearchBoxArea .mvSearchBox .mvtab-content .custom-select-trigger,
.top_mv .mvSearchBoxArea .mvSearchBox .mvtab-content .custom-option { padding: 15px;}
.top_mv .mvSearchBoxArea .searchBarBox { position: relative;}
.top_mv .mvSearchBoxArea .searchBar_place,
.top_mv .mvSearchBoxArea .searchBar_date { display: none; position: absolute; z-index: 50; width: 100%; background: #fff; top: 57px; border: solid 2px #4bb4f0;}
.top_mv .mvSearchBoxArea .searchBar_place.open,
.top_mv .mvSearchBoxArea .searchBar_date.open { display: block;}
.top_mv .swiper-area { overflow: hidden; position: relative; z-index: 5; width: 1277px; height: 600px;}
.top_mv .container { position: relative; margin: 0 auto;}
.top_mv .mvSlider { width: 100%; height: 100%; overflow: visible; z-index: 1;}
.top_mv .mvSlider .swiper-slide { text-align: center;}
.top_mv .mvSlider img { object-fit: cover;}
@media screen and (min-width: 750px) {
.top_mv { height: 600px;}
.top_mv .put1 { top: 40px; right: calc( 50% + 110px );}
.top_mv .put2 { top: 280px; left: calc( 50% + 556px );}
.top_mv .put3 { top: 55px; left: calc( 50% + 430px );}
.top_mv .trimming { position: absolute; left: calc( 50% + -480px ); bottom: 0; mask-image: url("../img/top/mv_trimming.png"); mask-repeat: no-repeat; mask-position: 0 0; mask-size: 100%; -webkit-mask-image: url("../img/top/mv_trimming.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0 0; -webkit-mask-size: 100%;}
.top_mv .mvSearchBoxArea { padding: 10px; width: 530px; height: 380px; border-radius: 10px 0 10px 10px;; position: absolute; top: 180px; right: calc( 50% + 210px );}
.top_mv .mvSearchBoxArea .mvSearchBox { font-size: 18px; width: 510px; height: 360px;}
.top_mv .mvSearchBoxArea .put4 { left: 0; top: -160px; z-index: 15;}
.top_mv .mvSearchBoxArea .put4_icon { left: 146px; top: -180px;}
.top_mv .mvSearchBoxArea .japan { right: 0; top: -88px;}
.top_mv .container { max-width: 100%;}
.top_mv .mvSlider img { width: 1277px; height: 600px;}
}
@media screen and (max-width: 749px) {
.top_mv:after { content: ""; background: url("../img/top/mv_bgdot.png") center bottom no-repeat; background-size: 100% auto; width: 649px; height: 150px; position: absolute; bottom: -150px; left: calc( 50% - 80px );}
.top_mv .mvTit { top: 35px; padding-left: 9.33%; position: absolute; z-index: 10; color: #4bb4f0; font-weight: 700; font-size: 2.4rem;}
.top_mv .mvTit .line { background-color: rgba(255, 255, 255, 0.839); display: inline-block; margin: 8px 0; line-height: 1; padding: 5px 10px;}
.top_mv .scroll { width: 100px; bottom: -75px; left: auto; right: 2%;}
.top_mv .mvSearchBoxArea { padding: 15px 4%;}
.top_mv .mvSearchBoxArea .mvSearchBox { font-size: 14px;}
.top_mv .mvSearchBoxArea .mvSearchBox .mvtab-content .mb { margin-bottom: 10px;}
.top_mv .mvSearchBoxArea .mvSearchBox .mvtab-content .custom-select-wrapper .custom-select { font-size: 1.4rem;}
.top_mv .mvSearchBoxArea .put4 { right: 3.86%; top: 53.33vw; margin-top: -80px;}
.top_mv .mvSearchBoxArea .put4 img { width: 90px;}
.top_mv .mvSearchBoxArea .searchBar_place,
.top_mv .mvSearchBoxArea .searchBar_date { top: 50px;}
.top_mv .swiper-area,
.top_mv .mvSlider img { width: 100%; height: 53.33vw;}
}

/* tab */
.mvtab-area{ width: 100%; margin: 0 auto;}
.mvtab-btn{ display:none;}
.mvtab-list-wrap{ padding:0; margin: 0; list-style-type:none; display:flex; justify-content:space-between;}
.mvtab-list{ font-size: 18px; display:block; width: 170px; padding: 20px 0; line-height: 20px; text-align:center; background: #bae6ff; box-sizing:border-box; cursor:pointer; font-weight: 700;}
.mvtab-list-wrap li:nth-child(1) label { border-top-left-radius: 10px;}
.mvtab-list-wrap li:nth-child(3) label { border-top-right-radius: 10px;}
#mvtab-btn1:checked ~ .mvtab-list-wrap #mvtab-list1,
#mvtab-btn2:checked ~ .mvtab-list-wrap #mvtab-list2,
#mvtab-btn3:checked ~ .mvtab-list-wrap #mvtab-list3{ background:#ffffff; color: #4bb4f0; font-size: 20px;}
.mvtab-content{ padding:40px; display:none;}
#mvtab-btn1:checked ~ .mvtab-content-wrap #mvtab-content1,
#mvtab-btn2:checked ~ .mvtab-content-wrap #mvtab-content2,
#mvtab-btn3:checked ~ .mvtab-content-wrap #mvtab-content3{ display: block;}
@media screen and (min-width: 750px) {
.mvtab-list-wrap #mvtab-list2,
.mvtab-list-wrap #mvtab-list3 { border-left: solid 1px #fff;}
}
@media screen and (max-width: 749px) {
.mvtab-list-wrap li { width: 30.5vw;}
.mvtab-list{ font-size: 12px; width: 100%; line-height: 14px; padding: 15px 0;}
#mvtab-btn1:checked ~ .mvtab-list-wrap #mvtab-list1,
#mvtab-btn2:checked ~ .mvtab-list-wrap #mvtab-list2,
#mvtab-btn3:checked ~ .mvtab-list-wrap #mvtab-list3{ font-size: 14px;}
.mvtab-content{ padding:20px 7.24%;}
}

/*==================================
	top_tour
==================================*/
.top_tour { background: #f3fbff; position: relative;}
.top_tour:before,
.top_tour:after { position: absolute; content: ""; width: 100%;}
.top_tour:before { background: #fff; top: 0;}
.top_tour:after { background: url("../img/bg_wave.png") repeat-x; bottom: 0;}
.top_tour .outer { position: relative; z-index: 10;}
.top_tour .swiper { position: relative;}
.top_tour .itemList li { width: 315px;}
@media screen and (min-width: 750px) {
.top_tour { margin-top: 120px; padding-bottom: 150px;}
.top_tour:before { height: 240px;}
.top_tour:after { height: 68px;}
.top_tour .swiper-button { display: none;}
.top_tour .swiper-wrapper { gap: 60px;}
.top_tour .swiper-slide { width: calc(33.333% - 16px);}
.top_tour .itemList li img { width: 315px; height: 236px;}
}
@media screen and (max-width: 749px) {
.top_tour { margin-top: 90px; padding-bottom: 110px;}
.top_tour .outer { width: 90%;}
.top_tour:before { height: 190px;}
.top_tour:after { height: 25px; background-size: auto 25px;}
.top_tour .itemList li { padding: 0 8%;}
.top_tour .swiper-button-prev,
.top_tour .swiper-container-rtl .swiper-button-next { left: -3%;}
.top_tour .swiper-button-next, 
.top_tour .swiper-container-rtl .swiper-button-prev { right: -3%;}
}


/*==================================
	top_hotel
==================================*/
.top_hotel .put1 {position: absolute;}
.top_hotel .put2 {position: absolute;}
.top_hotel .swiper { position: relative;}
.top_hotel .itemList li { width: 270px;}
@media screen and (min-width: 750px) {
.top_hotel { margin-top: 100px;}
.top_hotel .put1 { left: calc( 50% + 375px ); top: -20px;}
.top_hotel .put2 { right: calc( 50% + 330px ); top: 20px;}
.top_hotel .swiper-button { display: none;}
.top_hotel .swiper-wrapper { gap: 60px;}
.top_hotel .swiper-slide { width: calc(33.333% - 16px);}
.top_hotel .itemList li:nth-child(1),
.top_hotel .itemList li:nth-child(2) { width: 600px;}
.top_hotel .itemList li:nth-child(1) a,
.top_hotel .itemList li:nth-child(2) a { display: flex; justify-content: flex-start;}
.top_hotel .itemList li:nth-child(1) .itemImg img,
.top_hotel .itemList li:nth-child(2) .itemImg img{ width: 315px; height: 236px;}
.top_hotel .itemList li:nth-child(1) .itemInfo,
.top_hotel .itemList li:nth-child(2) .itemInfo { width: 255px; margin-left: 30px;}
}
@media screen and (max-width: 749px) {
.top_hotel { padding-top: 100px;}
.top_hotel .put1 { top: -30px; left: 50%; width: 130px;}
.top_hotel .put2 { top: 0; right: calc( 50% + 10px ); width: 92px;}
.top_hotel .itemList li { padding: 0 8%;}
.top_hotel .swiper-button-prev,
.top_hotel .swiper-container-rtl .swiper-button-next { left: -3%;}
.top_hotel .swiper-button-next, 
.top_hotel .swiper-container-rtl .swiper-button-prev { right: -3%;}
}


/*==================================
	top_souvenir
==================================*/
.top_souvenir { position: relative; background: url("../img/bg_dotBL.gif");}
.top_souvenir:before { position: absolute; content: ""; width: 100%; background: #fff; top: 0;}
.top_souvenir .put1 {position: absolute; top: 0;}
.top_souvenir .put2 {position: absolute; top: 0;}
.top_souvenir .swiper-containerArea { position: relative;}
.top_souvenir.swiper-area { overflow: hidden; position: relative;}
.top_souvenir.container { position: relative; margin: 0 auto; max-width: 650px; width: 100%;}
.top_souvenir.mvSlider { width: 100%; height: 100%; overflow: visible; z-index: 1;}
.top_souvenir.mvSlider .swiper-slide { text-align: center;}
@media screen and (min-width: 750px) {
.top_souvenir { margin-top: 100px; padding: 170px 0 130px 0;}
.top_souvenir:before { height: 50px;}
.top_souvenir .put1 { left: calc( 50% + 320px );}
.top_souvenir .put2 { right: calc( 50% + 430px );}
/*
.top_souvenir .itemList li { width: 270px;}
*/
 .top_souvenir .itemList li { width: 270px; margin: 0 60px 0 0;} 
.top_souvenir .swiper-button-prev,
.top_souvenir .swiper-container-rtl .swiper-button-next { left: auto; right: calc( 50% + 660px )}
.top_souvenir .swiper-button-next, 
.top_souvenir .swiper-container-rtl .swiper-button-prev { right: auto; left: calc( 50% + 660px )}
}
@media screen and (max-width: 749px) {
.top_souvenir { margin-top: 50px; padding: 150px 0 80px 0; background-size: 6px auto;}
.top_souvenir:before { height: 55px;}
.top_souvenir .put1 { left: 0; right: 0; margin: auto; width: 165px;}
.top_souvenir .put2 { display: none;}
.top_souvenir .container { max-width: 100%;}
.top_souvenir .itemList li { padding: 0 8%;}
.top_souvenir .swiper-button-prev,
.top_souvenir .swiper-container-rtl .swiper-button-next { left: -3%;}
.top_souvenir .swiper-button-next, 
.top_souvenir .swiper-container-rtl .swiper-button-prev { right: -3%;}
}


/*==================================
	footer
==================================*/
footer { border-top: 0;}
@media screen and (min-width: 750px) {
footer { margin-top: 0;}
}
@media screen and (max-width: 749px) {
footer { margin-top: 0;}
}