@charset "UTF-8";
/* header */
header{
display: none;
position: relative;
}
header .titBlock{
width: 698px;
display: block;
margin: 0 auto 0 auto;
padding: 32px 0 54px 0;
background-color: var(--white);
border-bottom-left-radius: 80px;
border-bottom-right-radius: 80px;
position: relative;
}
.apply_page header .titBlock{
padding: 32px 0 44px 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
header .titBlock h1{
width: 100%;
height: 0;
display: block;
padding-top: 175px;
background: url(../img/logo_wanisacaravan.svg) no-repeat center center;
background-size: contain;
overflow: hidden;
}

.btn_page{
color: var(--pink);
}
.apply_range{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap:10px;
margin: 40px 0 0 0;
}
.apply_range dt{
display: inline-block;
}
.apply_range dd{
display: inline-block;
}


/* hero */
#hero{
display: block;
margin: 80px 0 0 0;
position: relative;
}
#hero:before{
content: "";
display: inline-block;
width: 140vw;
height: 402px;
border-radius: 50% / 100% 100% 0 0;
background: var(--white);
position: absolute;
bottom: -50px;
left: -20vw;
}
.hero_img{
display: block;
overflow: hidden;
}
.hero_img img{
width: 100%;
height: auto;
}

/* outline */
#outline{
display: block;
padding: 60px 0 0 0;
background-color: var(--white);
position: relative;
}
.outline_catch{
width: 100%;
height: 0;
display: block;
padding-top: 173px;
background: url(../img/txt_catch.svg) no-repeat center center;
background-size: auto 173px;
overflow: hidden;
}
.outline_txt{
display: block;
margin: 30px 0 0 0;
font-weight: 400;
text-align: center;
line-height: 2;
}
.outline_br{
display: none;
}

/* news */
#news{
display: block;
padding: 80px 0 240px 0;
background: url(../img/bg_cloud_news.png) repeat-x center bottom 150px, url(../img/bg_glass.png) repeat-x center bottom;
background-size: 100vw auto, auto 124px;
background-color: var(--white);
position: relative;
}
#news .wrapper{
height: 285px;
margin-top: 11px;
padding: 40px 50px 40px 50px;
border-radius: 30px;
}
.news_list{
height: 205px;
display: block;
font-size: var(--font-size-xxs);
overflow-y: scroll;
}
.news_list li{
width: 100%;
display: block;
margin: 18px 0 0 0;
}
.news_list li:first-child{
margin: 0 0 0 0;
}
.news_list li dl{
display: flex;
justify-content: space-between;
gap: 10px;
}
.news_list li dl dt{
width: 90px;
display: block;
padding: 8px 0 8px 0;
}
.news_list li dl dd{
width: calc(100% - 226px);
margin: 0 26px 0 0;
padding: 8px 20px 8px 20px;
display: block;
background-color: var(--white);
border-radius: 5px;
text-align: left;
}
.news_list li dl dd.news_pref{
width: 90px;
display: block;
margin: 0;
padding: 8px 0 8px 0;
background-color: var(--green);
color: var(--white);
border-radius: 5px;
text-align: center;
}
#news .simplebar-track {
width: 10px;
padding: 0 3px 0 3px;
background-color: var(--white);
}
#news .simplebar-track .simplebar-scrollbar::before{
background-color: var(--light-gray2);
}
.chara_wani_news{
width: 172px;
height: 200px;
display: block;
background: url(../img/ico_wani_news.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 6px;
right: 28px;
}

/* about */
#about{
display: block;
padding: 180px 0 258px 0;
position: relative;
z-index: 1000;
}
#about .wrapper{
padding-left: 95px;
padding-right: 95px;
padding-bottom: 140px;
z-index: 4000;
}
.about_catch{
display: block;
color: var(--green);
font-size: var(--font-h3);
font-weight: 700;
}
#about .txt{
display: block;
margin: 35px 0 0 0;
font-size: var(--font-size-xxs);
font-weight: 400;
}
#about .txt strong{
display: block;
margin: 0 0 35px 0;
font-size: var(--font-base);
}
.event_intro{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 100px 0 0 0;
}
.event_intro li{
width: 420px;
display: block;
padding: 20px 20px 40px 20px;
border-radius: 30px;
text-align: left;
position: relative;
}
.event_intro li:nth-child(1){
padding-top: 12px;
}
.event_intro li:nth-child(2){
padding-top: 30px;
}
.event_intro li:before{
content: "";
width: 62px;
height: 142px;
display: block;
position: absolute;
top: -20px;
left: 20px;
}
.event_intro li:nth-child(1):before{
background: url(../img/step1.png) no-repeat center center;
background-size: 62px auto;
}
.event_intro li:nth-child(2):before{
background: url(../img/step2.png) no-repeat center center;
background-size: 62px auto;
}
.event_intro li dl{
display: flex;
flex-direction: column;
gap: 50px;
}
.event_intro li dl dt{
display: block;
padding: 0 0 0 82px;
}
.event_intro li dl dt p{
height: 0;
display: block;
overflow: hidden;
}
.event_intro li:nth-child(1) dl dt p{
padding: 93px 0 0 0;
background: url(../img/logo_school.png) no-repeat center center;
background-size: contain;
}
.event_intro li:nth-child(2) dl dt p{
padding: 75px 0 0 0;
background: url(../img/logo_greeting.png) no-repeat center center;
background-size: contain;
}
.event_intro li dl dd{
display: block;
}
.event_intro li dl dd p{
display: block;
margin: 20px 0 0 0;
padding: 0 10px 0 10px;
font-family: var(--font-family-tit);
font-size: var(--font-base);
font-weight: 500;
}
.event_intro li dl dd p.txt_link{
display: block;
text-align: center;
}
.event_intro li dl dd p.txt_link a{
display: block;
color: var(--green);
font-family: var(--font-family-base);
text-align: center;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.event_intro li dl dd p.event_intro_img{
height: 272px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.event_intro li:nth-child(1) dl dd .event_intro_img img{
width: auto;
height: 272px;
}
.event_intro li:nth-child(2) dl dd .event_intro_img img{
width: auto;
height: 195px;
}

.wanisa_intro{
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
margin: 80px 0 0 0;
padding: 0 100px 0 100px;
text-align: left;
}
.wanisa_intro dt{
width: 232px;
display: block;
}
.wanisa_intro dt img{
width: 100%;
height: auto;
}
.wanisa_intro dd{
width: calc(100% - 272px);
display: block;
font-size: var(--font-size-s);
font-weight: 400;
line-height: 1.4;
}
.wanisa_intro dd .wanisa_name{
display: block;
font-size: var(--font-size-xxl);
font-weight: 700;
position: relative;
}
.wanisa_intro dd .wanisa_name:before{
content: "";
width: 125px;
height: 76px;
display: block;
background: url(../img/fukidashi_wani.png) no-repeat center center;
background-size: contain;
position: absolute;
top: -40px;
left: 140px;
}
.wanisa_intro dd .wanisa_exp{
display: block;
margin: 20px 0 0 0;
}


.cloud01{
width: 379px;
height: 301px;
display: block;
background:url(../img/cloud01.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 547px;
left: -100px;
z-index: 3001;
}
.cloud02{
width: 229px;
height: 183px;
display: block;
background:url(../img/cloud01.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 350px;
left: calc(50% + 503px);
z-index: 3002;
}
.cloud03{
width: 229px;
height: 183px;
display: block;
background:url(../img/cloud01.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 670px;
right: -70px;
z-index: 3003;
}

.chara_unko{
width: 201px;
height: 237px;
display: block;
background:url(../img/chara_unko.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 65px;
left: 65px;
z-index: 3011;
}
.chara_wanisa{
width: 317px;
height: 247px;
display: block;
background:url(../img/chara_wanisa.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 37px;
left: calc(50% - 65px);
z-index: 3011;
}
.chara_toushi{
width: 179px;
height: 269px;
display: block;
background:url(../img/chara_toushi.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 50px;
right: 82px;
z-index: 3011;
}

/* map */
#map{
display: block;
padding: 160px 0 195px 0;
background: url(../img/bg_map_wave.png) repeat-x center bottom 200px, url(../img/bg_town.png) repeat-x center bottom;
background-size: 100vw auto, 100% auto;
background-color: var(--light-blue);
position: relative;
z-index: 2000;
}
#map:before{
content: "";
width: 100vw;
height: 79px;
display: block;
background: url(../img/bg_wave_map.png) repeat-x center center;
background-size: auto 79px;
position: absolute;
top: -78px;
left: 0;
}
#map .wrapper{
position: relative;
}
.title_area{
width: 632px;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
margin: 60px 0 0 0;
padding: 50px 50px 50px 80px;
border-radius: 30px;
text-align: left;
position: relative;
}
.title_area h2.tit_map{
width: 598px;
height: 0;
display: block;
padding-top: 344px;
background: url(../img/tit_map.png) no-repeat center center;
background-size: contain;
border: none;
text-align: left;
position: absolute;
top: -190px;
left: -50px;
overflow: hidden;
}
.title_area p{
width: 100%;
display: block;
font-size: var(--font-size-s);
}
.title_area dl{
width: 100%;
display: flex;
justify-content: flex-start;
gap:30px;
margin: 10px 0 0 0;
}
.title_area dl dt{
width: 64px;
height: 50px;
display: block;
background-color: var(--green);
color: var(--white);
border-radius: 3px;
line-height: 50px;
text-align: center;
}
.title_area dl dt.ready{
background-color: var(--visit-green);
}
.title_area dl dd{
width: calc(100% - 64px);
display: block;
padding-left: 20px;
font-size: var(--font-size-xs);
font-weight: 400;
line-height: 50px;
position: relative;
}
.title_area dl dd span{
display:block;
margin-bottom: -20px;
position: relative;
top: -20px;
}
.title_area dl dd:before{
content: "…";
width: 10px;
display: block;
position: absolute;
top:0;
left: -10px;
}
.map_area{
display: block;
margin-bottom: -150px;
position: relative;
top: -150px;
}
.st0 {
fill: none;
}
.st1{
fill: #6a8b60;
}
.st2{
fill: var(--white);
}
.maps.active .st1{
fill: var(--white);
}
.maps.active .st2{
fill: var(--green);
}
.maps.visit .st1{
fill: var(--white);
}
.maps.visit .st2{
fill: var(--green);
}
.maps.ready .st2{
fill: var(--visit-green);
}
.st3{
clip-path: url(#clippath);
}

.popup{
width: 230px;
display: none;
padding: 0 0 20px 0;
text-align: left;
position: absolute;
z-index:5000;
}
.popup.on{
display:inline-block;
}
.popup dl{
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 20px 20px 20px;
background-color: var(--white);
border: 2px solid var(--black);
border-radius: 10px;
line-height: 1.2;
text-align: left;
}
.popup dl:before {
content: "";
border-width: 20px 15px 0 15px;
border-style: solid;
border-color: var(--black) transparent transparent;
position: absolute;
bottom: 0;
left: 50%;
translate: -50% 100%;
}
.popup dl:after {
content: "";
border-width: 16.7px 12.5px 0 12.5px;
border-style: solid;
border-color: var(--white) transparent transparent;
position: absolute;
bottom: 0;
left: 50%;
translate: -50% 100%;
}
.popup dl dt{
height: 64px;
display:block;
padding: 0 0 0 80px;
background: url(../img/map_icon.png) no-repeat left center;
background-size: 64px auto;
font-size: var(--font-size-s);
line-height: 64px;
}
.popup dl dd{
display: flex;
flex-direction: column;
gap: 5px;
}
.popup dl dd ul{
display: flex;
flex-direction: column;
gap: 10px;
}
.popup dl dd ul li{
display: block;
}
.popup dl dd ul li a{
display: flex;
justify-content: start;
flex-wrap: wrap;
gap: 10px;
padding-right: 20px;
background: url(../img/arr_popup.svg) no-repeat right bottom 3px;
background-size: 10px auto;
color: var(--green);
position: relative;
}
.popup dl dd ul li a:before{
content: "";
width: 100%;
height: 2px;
display: block;
background-color: var(--green);
position: absolute;
bottom: -2px;
left: 0;
}
.popup dl dd .fukidashi_date{
display:block;
font-size: var(--font-size-xxs);
}
.popup dl dd .fukidashi_txt{
display:block;
font-size: var(--font-size-xxs);
}

.ico_kikyu{
width: 75px;
height: 111px;
display: block;
background: url(../img/ico_kikyu.png) no-repeat center center;
background-size: contain;
position: absolute;
top: -150px;
right: 3px;
}
.ico_cloud_l{
width: 325px;
height: 433px;
display: block;
background: url(../img/ico_cloud_map_l.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 650px;
left: -80px;
}
.ico_cloud_r{
width: 244px;
height: 296px;
display: block;
background: url(../img/ico_cloud_map_r.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 400px;
right: 0;
}
.ico_ship{
width: 114px;
height: 71px;
display: block;
background: url(../img/ico_ship.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 238px;
right: calc(50% - 434px);
}
.ico_fusen{
width: 72px;
height: 173px;
display: block;
background: url(../img/ico_fusen.png) no-repeat center center;
background-size: contain;
position: absolute;
top: 500px;
left: 300px;
}

.visit_sp{
display: none;
}

/* visit */
#visit{
display: block;
padding: 100px 0 100px 0;
background-color: var(--light-green);
position: relative;
z-index: inherit;
z-index: 5000;
}
.wani_walk{
width: 100vw;
height: 227px;
display: block;
background: url(../img/wani_walk.png) no-repeat center center;
background-size: contain;
position: absolute;
top: -180px;
left: 0;
}
.wani_walk_mov{
width: 800px;
height: 260px;
display: block;
position: absolute;
top: -200px;
left: calc((100vw - 800px)/2);
}
.wani_walk_mov video,
.wani_walk_mov canvas{
width: 800px !important;
height: 260px !important;
min-width: auto !important;
min-height: auto !important;
margin: 0 auto 0 auto;
}
.wani_walk_img{
width: 800px;
height: 260px;
display: block;
position: absolute;
top: -200px;
left: calc((100vw - 800px)/2);
}
.wani_walk_img img{
width: 100%;
height: auto;
}
#visit h4{
font-size: var(--font-page-nav);
color: var(--black);
}
.visit_list{
display: flex;
justify-content: center;
gap: 40px;
margin: 40px 0 0 0;
}
.visit_list li{
width: 320px;
display: block;
}
.visit_list li dl{
display: flex;
flex-direction: column;
gap: 20px;
}
.visit_list li dl dt{
display: block;
border-radius: 30px;
background-color: var(--green);
color: var(--white);
overflow: hidden;
}
.visit_list li dl dt img{
width: 100%;
height: auto;
}
.visit_list li dl dt p{
display: block;
}
.visit_list li dl dd{
display: block;
}
.visit_list li dl dd .visit_catch{
display: block;
font-size: var(--font-size-xxxs);
font-weight: 400;
}
.visit_list li dl dd > dl.visit_pref_date{
display: flex;
justify-content: center;
flex-direction: row;
gap: 10px;
margin: 10px 0 0 0;
font-size: var(--font-size-s);
font-weight: 400;
}
.visit_list li dl dd > dl.visit_pref_date dt{
width: 63px;
display: block;
background-color: var(--pink);
color: var(--white);
border-radius: 5px;
line-height: 38px;
}
.visit_list li dl dd > dl.visit_pref_date dd{
line-height: 38px;
}

/* event */
#event{
display: block;
padding: 180px 0 180px 0;
position: relative;
z-index: 3000;
}
#event .wrapper{
padding-bottom: 170px;
border: none;
position: relative;
}
#event .wrapper:before{
content: "";
width: 100%;
height: 214px;
display: block;
background: url(../img/ico_wani_report.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: -82px;
left: 0;
}
#event .wrapper.box h3.under{
margin-top: 120px;
text-align: center;
position: relative;
top: auto;
left: auto;
}
.event_list{
display: block;
}
.event_list li{
width: 100%;
display: block;
margin: 0 0 20px 0;
padding: 0 0 20px 0;
border-bottom: 1px solid var(--black);
text-align: left;
}
.event_list li.tit_block{
display: block;
}
.event_list li dl{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 40px;
padding: 0 20px 0 0 0;
}
.event_list li dl dt{
width: 225px;
display: block;
}
.event_list li dl dd.event_venue{
width: 98px;
display: block;
}
.event_list li dl dd.event_place{
width: calc(100% - 225px - 98px - 160px - 120px);
display: block;
}
.event_list li dl dd.event_btn{
width: 160px;
display: block;
}

#event .btn_more.bottom_btn a{
width: 110px;
background: url(../img/arr_l_g.svg) no-repeat right center;
background-size: 11px auto;
background-color: transparent;
color: var(--green);
border: none;
}

/* report */
#report{
display: block;
padding: 120px 0 180px 0;
background-color: var(--white);
position: relative;
z-index: 4000;
}
#report:before{
content: "";
width: 100vw;
height: 214px;
display: block;
background: url(../img/ico_wani_report.png) no-repeat center center;
background-size: contain;
position: absolute;
top: -132px;
left: 0;
}
.report_list{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 40px;
margin: 40px 0 40px 0;
}
.report_list li{
width: calc((100% - 80px)/3);
display: block;
}
.report_list li dl{
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
}
.report_list li dl dt{
display: block;
border-radius: 30px;
border: 2px solid var(--black);
overflow: hidden;
position:relative;
}
.report_list li dl dt img{
width: 100%;
height: auto;
}
.report_list li dl dt p{
display: block;
line-height: 72px;
}
.report_list li dl dd{
display: flex;
flex-direction: column;
gap: 7px;
}
.report_list li dl dd .report_date{
display: block;
font-size: var(--font-size-xxs);
font-weight: 400;
}
.report_list li dl dd .report_tit{
display: block;
font-size: var(--font-size-xxs);
}

#report .btn_more{
width: 200px;
}

/* album */
#album{
display: block;
padding: 120px 0 180px 0;
}
.movie_list{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 40px;
margin: 40px 0 40px 0;
}
.movie_listt li{
width: 320px;
display: block;
}
.movie_list li dl{
width: 320px;
display: flex;
flex-direction: column;
gap: 20px;
}
.movie_list li dl dt{
display: block;
position:relative;
overflow:visible !important;
}
.movie_list li dl dt img{
width: 100%;
height: auto;
}
.movie_list li dl dt p{
display: block;
border-radius: 10px;
line-height: 72px;
overflow: hidden;
}
.movie_list li dl dd{
display: flex;
flex-direction: column;
gap: 7px;
}
.movie_list li dl dd .movie_date{
display: block;
font-size: var(--font-size-xxs);
font-weight: 400;
}
.movie_list li dl dd .movie_tit{
display: block;
font-size: var(--font-size-xxs);
}

#album .btn_more{
width: 200px;
}


/* -- */
/* -- */
/* SP */
/* -- */
/* -- */
@media screen and (max-width: 768px) {
/* */
/* */


/* header */
header{
}
header .titBlock{
width: auto;
margin: 0 3.3vw 0 3.3vw;
padding: 0;
background-color: transparent;
}
.apply_page header .titBlock{
width: 250px;
margin: 0 auto 0 auto;
padding: 13px 0 0 0;
background-color: transparent;
}
header .titBlock h1,
.apply_page header .titBlock h1{
width: 100%;
height: 0;
display: block;
padding-top: 45px;
background: url(../img/logo_wanisatomanabu.svg) no-repeat center center;
background-size: auto 45px;
overflow: hidden;
}

.apply_range{
display: flex;
flex-direction: column;
gap:2px;
margin: 20px 0 0 0;
text-align: center;
}
.apply_range dt{
display: inline-block;
}
.apply_range dd{
display: inline-block;
}


/* hero */
#hero{
margin: 60px 0 0 0;
}
#hero:before{
content: "";
display: inline-block;
width: 140vw;
height: 240px;
border-radius: 50% / 100% 100% 0 0;
background: var(--white);
position: absolute;
bottom: -140px;
left: -20vw;
}
#hero .wrapper{
width: auto;
margin: 0 3.3vw 0 3.3vw;
}
.hero_img{
}
.hero_img img{
}

/* page title */
#page_title{
padding: 40px 0 0 0;
}
.apply_page #page_title{
padding: 18px 0 0 0;
background-color: var(--white);
}
#page_title h2{
}
.page_nav{
margin: 0 0 -27px 0;
padding: 57px 0 37px 0;
top: -27px;
}
.page_nav ul{
margin: 0 auto 0 auto;
}
.page_nav ul li{
}
.page_nav ul li:before{
content: "/";
display: inline-block;
padding: 0 8px 0 5px;
}
.page_nav ul li:first-child:before{
}
.page_nav ul li a{
font-size: var(--font-page-nav-sp);
}


/* outline */
#outline{
padding: 30px 0 0 0;
}
.outline_catch{
width: 89.4vw;
margin: 0 5.3vw 0 5.3vw;
padding-top: 21%;
background: url(../img/txt_catch.svg) no-repeat center center;
background-size: contain;
overflow: hidden;
}
.outline_txt{
margin: 20px 0 0 0;
text-align: center;
}


/* news */
#news{
margin-bottom: -2px;
padding: 60px 0 150px 0;
background: url(../img/bg_cloud_news.png) repeat-x center bottom 100px, url(../img/bg_glass.png) repeat-x center bottom;
background-size: 108vw auto, auto 62px;
background-color: var(--white);
position: relative;
top: -2px;
}
#news .wrapper{
height: 385px;
margin-top: 11px;
padding: 30px 10px 20px 20px;
border-radius: 20px;
}
.news_list{
height: 305px;
font-size: var(--font-size-xxs-sp);
overflow-y: scroll;
}
.news_list li{
width: 100%;
margin: 18px 0 0 0;
}
.news_list li dl{
display: flex;
flex-direction:row-reverse;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;
}
.news_list li dl dt{
width: 140px;
padding: 4px 0 4px 0;
text-align:left;
}
.news_list li dl dd{
width: 100%;
margin: 0 20px 0 0;
padding: 8px 10px 8px 10px;
border-radius: 5px;
}
.news_list li dl dd.news_pref{
width: 80px;
padding: 4px 0 4px 0;
border-radius: 5px;
}
.chara_wani_news{
width: 108px;
height: 132px;
display: block;
background: url(../img/ico_wani_news.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 6px;
right: 28px;
}

/* about */
#about{
padding: 72px 0 178px 0;
}
#about h3{
padding: 10px 0 0 0;
font-size: 15px;
line-height: 20px;
}
#about .wrapper{
padding-left: 5.3vw;
padding-right: 5.3vw;
padding-bottom: 80px;
}
.about_catch{
font-size: var(--font-h3-sp);
text-align: left;
}
#about .txt{
margin: 30px 0 0 0;
font-size: var(--font-size-xxs-sp);
text-align: left;
}
#about .txt strong{
margin: 0 0 30px 0;
font-size: var(--font-base-sp);
}
.event_intro{
flex-direction: column;
gap: 80px;
margin: 90px 0 0 0;
}
.event_intro li{
width: 100%;
padding: 20px 20px 40px 20px;
border-radius: 20px;
}
.event_intro li:before{
content: "";
width: 240px;
height: 48px;
display: block;
position: absolute;
top: 0;
left: calc((100% - 240px)/2);
}
.event_intro li:nth-child(1):before{
background: url(../img/step1_sp.png) no-repeat center center;
background-size: auto 48px;
}
.event_intro li:nth-child(2):before{
background: url(../img/step2_sp.png) no-repeat center center;
background-size: auto 48px;
}
.event_intro li dl{
display: flex;
flex-direction: column;
gap: 10px;
}
.event_intro li dl dt{
padding: 50px 0 0 0;
font-family: var(--font-family-tit);
font-size: var(--font-size-xl-sp);
letter-spacing: -1px;
line-height: 1.4;
}
.event_intro li dl dt p{
margin-bottom: 6px;
font-size: var(--font-base-sp);
line-height: 1;
letter-spacing: 0;
}
.event_intro li dl dd{
}
.event_intro li dl dd p{
display: block;
margin: 20px 0 0 0;
padding: 0 10px 0 10px;
font-size: var(--font-size-xxs);
}
.event_intro li dl dd p.event_intro_img{
height: auto;
display: block;
}
.event_intro li:nth-child(1) dl dd .event_intro_img img,
.event_intro li:nth-child(2) dl dd .event_intro_img img{
width: 100%;
height: auto;
object-fit: contain;
}
.event_intro li:nth-child(1) dl dd .event_intro_img img{
max-height: 272px;
}
.event_intro li:nth-child(2) dl dd .event_intro_img img{
max-height: 195px;
}

.wanisa_intro{
flex-direction: column;
gap: 20px;
margin: 80px 0 0 0;
padding: 0;
text-align: left;
}
.wanisa_intro dt{
width: 100%;
text-align: center;
}
.wanisa_intro dt img{
width: auto;
height: 200px;
}
.wanisa_intro dd{
width: 100%;
font-size: var(--font-size-s-xp);
}
.wanisa_intro dd .wanisa_name{
display: block;
font-size: var(--font-size-xxl-sp);
text-align: center;
}
.wanisa_intro dd .wanisa_name:before{
content: "";
width: 85px;
height: 52px;
display: block;
background: url(../img/fukidashi_wani.png) no-repeat center center;
background-size: contain;
position: absolute;
top: -20px;
left: auto;
right: calc(50% - 140px);
}
.wanisa_intro dd .wanisa_exp{
display: block;
margin: 20px 0 0 0;
}

.cloud01{
width: 379px;
height: 301px;
display: block;
background:url(../img/cloud01.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 547px;
left: -100px;
z-index: 3001;
}
.cloud02{
width: 229px;
height: 183px;
display: block;
background:url(../img/cloud01.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 350px;
left: calc(50% + 503px);
z-index: 3002;
}
.cloud03{
width: 229px;
height: 183px;
display: block;
background:url(../img/cloud01.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 670px;
right: -70px;
z-index: 3003;
}

.chara_unko{
width: 201px;
height: 237px;
display: block;
background:url(../img/chara_unko.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 65px;
left: 65px;
z-index: 3011;
}
.chara_wanisa{
width: 317px;
height: 247px;
display: block;
background:url(../img/chara_wanisa.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 37px;
left: calc(50% - 65px);
z-index: 3011;
}
.chara_toushi{
width: 179px;
height: 269px;
display: block;
background:url(../img/chara_toushi.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 50px;
right: 82px;
z-index: 3011;
}

/* map */
#map{
padding: 150px 0 125px 0;
background: url(../img/bg_map_wave.png) repeat-x center bottom 200px,url(../img/bg_town.png) repeat-x center bottom;
background-size: 100vw auto, auto 50px;
background-color: var(--light-blue);
position: relative;
z-index: 2000;
}

#map:before{
width: 100vw;
height: 50px;
background: url(../img/bg_wave_map.png) repeat-x center center;
background-size: auto 50px;
top: -49px;
}
.title_area{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
margin: 0 0 0 0;
padding: 20px 20px 30px 20px;
border-radius: 30px;
text-align: left;
position: relative;
z-index: 2200;
}
.title_area h2.tit_map{
width: 280px;
padding-top: 161px;
background: url(../img/tit_map_sp.png) no-repeat center center;
background-size: contain;
top: -120px;
left: -30px;
}
.title_area p{
font-size: var(--font-size-s-sp);
}
.title_area dl{
width: 100%;
display: flex;
justify-content: flex-start;
gap:20px;
margin: 10px 0 0 0;
}
.title_area dl dt{
width: 44px;
height: 40px;
border-radius: 3px;
line-height: 40px;
}
.title_area dl dd{
width: calc(100% - 64px);
display: block;
padding-top: 10px;
padding-left: 10px;
font-size: var(--font-size-xs-sp);
font-weight: 400;
line-height: 1.4;
position: relative;
}
.title_area dl dd:before{
content: "…";
width: 10px;
display: block;
position: absolute;
top: 10px;
left: -10px;
}
.map_area{
margin-top: 40px;
margin-bottom: 0;
position: relative;
top: 0;
}
.st0 {
fill: none;
}
.st1{
fill: #6a8b60;
}
.maps.active .st1{
fill: var(--white);
}
.st2{
fill: var(--white);
}
.maps.active .st2{
fill: var(--green);
}
.st3{
clip-path: url(#clippath);
}
.maps.visit{
cursor: default;
pointer-events: none;
}
.popup{
width: 230px;
height: 126px;
display: none;
padding: 18px 15px 0 40px;
background:url(../img/bg_fukidashi.png) no-repeat center center;
background-size: contain;
position: absolute;
top: 630px;
left: 60px;
}
.popup.on{
display:block;
}
.popup dl{
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 0 0 40px;
line-height: 1;
text-align: left;
}
.popup dl dt{
display:block;
font-size: var(--font-size-s);
}
.popup dl dd{
display: flex;
flex-direction: column;
gap: 5px;
}
.popup dl dd .fukidashi_date{
display:block;
font-size: var(--font-size-min);
}
.popup dl dd .fukidashi_txt{
display:block;
font-size: var(--font-size-min);
}

.ico_kikyu{
width: 38px;
height: 56px;
display: block;
background: url(../img/ico_kikyu.png) no-repeat center center;
background-size: contain;
position: absolute;
top: -80px;
right: 3px;
}
.ico_cloud_l{
width: 140px;
height: 180px;
display: block;
background: url(../img/ico_cloud_map_l.png) no-repeat center center;
background-size: contain;
position: absolute;
top: 40px;
bottom: auto;
left: -30px;
z-index: 2010;
}
.ico_cloud_r{
width: 61px;
height: 74px;
display: block;
background: url(../img/ico_cloud_map_r.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 90px;
right: 0;
}
.ico_ship{
width: 57px;
height: 36px;
display: block;
background: url(../img/ico_ship.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 80px;
right: calc(50% - 100px);
}
.ico_fusen{
width: 36px;
height: 86px;
display: block;
background: url(../img/ico_fusen.png) no-repeat center center;
background-size: contain;
position: absolute;
top: 300px;
left: 100px;
}

.visit_sp{
display: flex;
flex-direction: column;
gap: 30px;
padding: 0 0 50px;
background-color: var(--bg-green);
}
.visit_sp .wrapper{
display: flex;
flex-direction: column;
gap: 30px;
padding: 42px 20px 42px 20px;
background-color: var(--white);
border-radius: 20px;
}
.visit_sp .wrapper:after{
display: none;
}
.visit_sp .area{
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
}
.visit_sp .area .area_tit{
width: 100%;
display: block;
background-color: var(--dark-yellow);
line-height: 28px;
}
.visit_sp .area ul{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 10px;
}
.visit_sp .area ul li{
width: calc((100% - 20px)/3);
display: none;
background-color: var(--green);
color: var(--white);
border-radius: 5px;
box-shadow: 0 2px 0 rgba(0,0,0,0.25);
line-height: 28px;
}
.visit_sp .area ul li.visit{
display: block;
}

.area_popup{
width: 205px;
display: none;
padding: 0 0 20px 0;
text-align: left;
position: absolute;
}
.area_popup.on{
display:inline-block;
}
.area_popup dl{
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 15px 20px 15px;
background-color: var(--white);
border: 2px solid var(--black);
border-radius: 10px;
line-height: 1.2;
text-align: left;
}
.area_popup dl:before {
content: "";
border-width: 20px 15px 0 15px;
border-style: solid;
border-color: var(--black) transparent transparent;
position: absolute;
bottom: 0;
left: 50%;
translate: -50% 100%;
}
.area_popup.left dl:before,
.area_popup.left dl:after{
left: 40%;
}
.area_popup.right dl:before,
.area_popup.right dl:after{
left: 60%;
}
.area_popup dl:after {
content: "";
border-width: 16.7px 12.5px 0 12.5px;
border-style: solid;
border-color: var(--white) transparent transparent;
position: absolute;
bottom: 0;
left: 50%;
translate: -50% 100%;
}
.area_popup dl dt{
height: 64px;
display:block;
padding: 0 0 0 80px;
background: url(../img/map_icon.png) no-repeat left center;
background-size: 64px auto;
font-size: var(--font-size-xxs);
line-height: 64px;
}
.area_popup dl dd{
display: flex;
flex-direction: column;
gap: 5px;
}
.area_popup dl dd ul{
display: flex;
flex-direction: column;
gap: 10px;
}
.area_popup dl dd ul li{
display: block;
}
.area_popup dl dd ul li a{
display: flex;
justify-content: start;
flex-wrap: wrap;
gap: 10px;
padding-right: 20px;
background: url(../img/arr_popup.svg) no-repeat right bottom 3px;
background-size: 10px auto;
color: var(--green);
position: relative;
}
.area_popup dl dd ul li a:before{
content: "";
width: 100%;
height: 2px;
display: block;
background-color: var(--green);
position: absolute;
bottom: -2px;
left: 0;
}
.area_popup dl dd .fukidashi_date{
display:block;
font-size: var(--font-size-xs-sp);
}
.area_popup dl dd .fukidashi_txt{
display:block;
font-size: var(--font-size-xs-sp);
}
.area_popup_close{
width: 26px;
height: 26px;
display: block;
background: url(../img/icon_close_w.svg) no-repeat center center;
background-size: 10px auto;
background-color: var(--black);
color: var(--white);
border: 2px solid var(--black);
border-radius: 14px;
line-height: 26px;
text-align: center;
position: absolute;
top: -4px;
right: -4px;
}

/* visit */
#visit{
padding: 80px 0 100px 0;
}
.wani_walk{
width: 100vw;
height: 140px;
display: block;
background: url(../img/wani_walk.png) no-repeat center center;
background-size: contain;
position: absolute;
top: -100px;
left: 0;
}
.wani_walk_mov{
width: 400px;
height: 130px;
top: -100px;
left: calc((100vw - 400px)/2);
}
.wani_walk_mov video,
.wani_walk_mov canvas{
width: 400px !important;
height: 130px !important;
min-width: auto !important;
min-height: auto !important;
margin: 0 auto 0 auto;
}
.wani_walk_mov img{
width:100%;
height:auto;
}
.wani_walk_img{
width: 400px;
height: 130px;
top: -100px;
left: calc((100vw - 400px)/2);
}
#visit h4{
padding-top: 40px;
font-size: var(--font-size-l-sp);
color: var(--black);
}
.visit_list{
flex-direction: column;
gap: 40px;
margin: 40px 0 0 0;
}
.visit_list li{
width: 100%;
max-width: 320px;
margin: 0 auto 0 auto;
}
.visit_list li dl{
display: flex;
flex-direction: column;
gap: 20px;
}
.visit_list li dl dt{
display: block;
border-radius: 30px;
background-color: var(--green);
color: var(--white);
overflow: hidden;
}
.visit_list li dl dt p{
display: block;
}
.visit_list li dl dd{
display: block;
}
.visit_list li dl dd .visit_catch{
display: block;
font-size: var(--font-size-xxxs);
font-weight: 400;
}
.visit_list li dl dd > dl.visit_pref_date{
display: flex;
justify-content: center;
flex-direction: row;
gap: 10px;
margin: 10px 0 0 0;
font-size: var(--font-size-s);
font-weight: 400;
}
.visit_list li dl dd > dl.visit_pref_date dt{
width: 63px;
display: block;
background-color: var(--pink);
color: var(--white);
border-radius: 5px;
line-height: 38px;
}
.visit_list li dl dd > dl.visit_pref_date dd{
line-height: 38px;
}

/* event */
#event{
padding: 120px 0 120px 0;
}
#event .wrapper{
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 150px !important;
}
#event .wrapper:before{
content: "";
width: 100%;
height: 150px;
display: block;
background: url(../img/ico_wani_report.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: -56px;
left: 0;
}
.event_list{
margin: 30px 0 0 0;
padding: 20px 0 0 0;
border-top: 1px solid var(--black);
}
.event_list li{
border-bottom: 1px solid var(--black);
}
.event_list li.tit_block{
display: none;
}
.event_list li dl{
flex-direction: column;
gap: 10px;
padding: 0 0 0 0 0;
}
.event_list li dl.in_new{
padding: 20px 0 0 0;
}
.event_list li dl dt{
width: 100%;
padding: 0 0 0 70px;
position: relative;
}
.event_list li dl dt:before{
content:"開催日";
width: 70px;
display: block;
position: absolute;
top: 0;
left: 0;
}
.event_list li dl dd.event_venue{
width: 100%;
padding: 0 0 0 70px;
position: relative;
}
.event_list li dl dd.event_venue:before{
content:"開催地";
width: 70px;
display: block;
position: absolute;
top: 0;
left: 0;
}
.event_list li dl dd.event_place{
width: 100%;
padding: 0 0 0 70px;
position: relative;
}
.event_list li dl dd.event_place:before{
content:"会場";
width: 70px;
display: block;
position: absolute;
top: 0;
left: 0;
}
.event_list li dl dd.event_btn{
width: 160px;
display: block;
margin: 10px auto 0 auto;
}

#event .btn_more.bottom_btn a{
width: 110px;
background: url(../img/arr_l_g.svg) no-repeat right center;
background-size: 11px auto;
background-color: transparent;
color: var(--green);
border: none;
}

/* report */
#report{
padding: 100px 0 100px 0;
}
#report:before{
height: 150px;
display: block;
background: url(../img/ico_wani_report.png) no-repeat center center;
background-size: contain;
position: absolute;
top: -93px;
left: 0;
}
#report .wrapper{
margin: 0;
}
.report_list{
display: block;
margin: 40px 0 40px 0;
overflow: visible;
}
.report_list li{
width: calc(100vw - 6.6vw - 40px - 24px);
max-width: 314px;
display: block;
margin: 0 10px 0 10px;
}
.report_list li dl{
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
}
.report_list li dl dt{
display: block;
border: 2px solid var(--black);
border-radius: 30px;
overflow: hidden;
}
.report_list li dl dt img{
width: 100%;
height: auto;
}
.report_list li dl dt p{
display: block;
line-height: 72px;
}
.report_list li dl dd{
display: flex;
flex-direction: column;
gap: 7px;
}
.report_list li dl dd .report_date{
display: block;
font-size: var(--font-size-xxs);
font-weight: 400;
}
.report_list li dl dd .report_tit{
display: block;
font-size: var(--font-size-xxs);
}

#report .btn_more{
width: 200px;
margin-top: 70px;
}

/* album */
#album{
padding: 100px 0 120px 0;
}
#album h3{
padding-top: 10px;
font-size: 15px;
line-height: 20px;
}
#album .wrapper{
margin: 0;
}
#album .slick-list{
overflow:visible !important;
}
.movie_list{
display: block;
margin: 40px 0 40px 0;
overflow: visible;
}
.movie_list li{
width: 85vw;
max-width: 320px;
display: block;
margin: 0 10px 0 10px;
}
.movie_list li dl{
width: 100%;
gap: 20px;
}
.movie_list li dl dt{
display: block;
}
.movie_list li dl dt img{
width: 100%;
height: auto;
}
.movie_list li dl dt p{
display: block;
border-radius: 10px;
}
.movie_list li dl dd{
display: flex;
flex-direction: column;
gap: 7px;
}
.movie_list li dl dd .movie_date{
display: block;
font-size: var(--font-size-xxs);
font-weight: 400;
}
.movie_list li dl dd .movie_tit{
display: block;
font-size: var(--font-size-xxs);
}

#album .btn_more{
width: 200px;
margin-top: 70px;
}

/* */
/* */
}
/* -- */
/* -- */
/* SP */
/* -- */
/* -- */

@media screen and (max-width: 620px) {

}

@media screen and (max-width: 580px) {

}

@media screen and (max-width: 424px) {
.outline_br{
display: inline;
}
}

@media screen and (max-width: 400px) {

}