/* header */
header{
display: block;
padding: 0 0 62px 0;
position: relative;
z-index: 1000;
}
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 54px 0;
}
header .titBlock h1{
width: 100%;
height: 0;
display: block;
padding-top: 134px;
background: url(../img/logo_wanisatomanabu.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;
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;
border: 5px solid var(--dark-green);
border-radius: 80px;
overflow: hidden;
}
.hero_img img{
width: 100%;
height: auto;
}


/* page title */
#page_title{
display: block;
padding: 58px 0 0 0;
position: relative;
z-index: 2000;
}
.apply_page #page_title{
padding: 0 0 0 0;
}
#page_title h2{
position: relative;
z-index: 1500;
}
.page_nav{
display: block;
margin: 0 0 -97px 0;
padding: 127px 0 67px 0;
text-align: center;
position: relative;
top: -57px;
z-index: 1400;
}
.page_nav ul{
display: inline-block;
margin: 0 auto 0 auto;
}
.page_nav ul li{
display: inline-block;
}
.page_nav ul li:before{
content: "/";
display: inline-block;
padding: 0 10px 0 6px;
}
.page_nav ul li:first-child:before{
display: none;
padding: 0;
}
.page_nav ul li a{
display: inline-block;
font-family: var(--font-family-tit);
font-size: var(--font-page-nav);
}

/* fukuoka */
header.fukuoka_header{
margin: 0;
background: url(../img/bg_fukuoka_header.jpg) no-repeat center top;
background-size: 100vw auto;
background-color: var(--white);
}
.apply_page header.fukuoka_header .titBlock{
width: 1106px;
display: block;
margin: 0 auto 0 auto;
padding: 20px 0 0 0;
background-color: transparent;
}
.apply_page header.fukuoka_header .titBlock h1{
width: 100%;
height: 0;
display: block;
padding-top: 296px;
background: url(../img/logo_fukuoka.png) no-repeat center center;
background-size: contain;
overflow: hidden;
}
#page_title.fukuoka_page_title{
padding: 0;
background-color: var(--white);
}
#page_title.okayama_page_title{
padding: 0;
background-color: var(--white);
position: relative;
}
#page_title.okayama_page_title:before{
content: "";
display: inline-block;
width: 140vw;
height: 402px;
border-radius: 50% / 100% 100% 0 0;
background: var(--white);
position: absolute;
top: -200px;
left: -20vw;
z-index: 1000;
}
#page_title.okayama_page_title .page_nav,
#page_title.fukuoka_page_title .page_nav{
margin: 0 0 0 0;
padding: 67px 0 67px 0;
top: auto;
}
.fukuoka_catch{
width: 100%;
height: 0;
display: block;
padding-top: 173px;
background: url(../img/fukuoka_catch.svg) no-repeat center center;
background-size: auto 173px;
overflow: hidden;
position: relative;
z-index: 2000;
}
.fukuoka_catch_txt{
display: block;
margin: 30px 0 60px 0;
font-weight: 400;
text-align: center;
}
.outline_br{
display: none;
}

/* okayama */
header.okayama_header{
margin: 0;
background: url(../img/bg_fukuoka_header.jpg) no-repeat center top;
background-size: 100vw auto;
background-color: var(--white);
background: none;
position: relative;
z-index: 3000;
}
header.okayama_header .titBlock{
width: 1106px;
display: block;
margin: 0 auto 0 auto;
padding: 20px 0 0 0;
background-color: transparent;
}
header.okayama_header .titBlock h1{
width: 100%;
height: 0;
display: block;
padding-top: 296px;
background: url(../img/logo_okayama.png) no-repeat center center;
background-size: contain;
overflow: hidden;
}

/* about */
#about{
display: block;
padding: 200px 0 368px 0;
background: url(../img/bg_glass.png) repeat-x center bottom;
background-size: auto 124px;
background-color: var(--white);
position: relative;
}
#about .wrapper{
padding-left: 95px;
padding-right: 95px;
padding-bottom: 140px;
z-index: 4000;
}
#about .txt{
display: block;
margin: 35px 0 0 0;
text-align: left;
}
.about_list{
display: flex;
flex-direction: column;
gap: 40px;
margin: 80px 0 0 0;
padding: 0 100px 0 100px;
}
.about_list li{
display: block;
}
.about_list li dl{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.about_list li dl dt{
width: 166px;
height: 56px;
display: block;
background-color: var(--light-green);
border-radius: 10px;
line-height: 56px;
}
.about_list li dl dd{
width: calc(100% - 196px);
display: block;
padding: 5px 0 0 0;
text-align: left;
}
.about_list li dl dd .about_list_txt_att{
display: block;
margin: 20px 0 0 0;
font-size: var(--font-size-s);
}
.about_list li dl dd .address{
display: block;
margin: 34px 0 0 0;
font-size: var(--font-size-s);
}
.about_list li dl dd .btn_info{
display: flex;
justify-content: flex-start;
gap: 14px;
margin: 10px 0 0 0;
}
.about_list li dl dd .btn_info a{
display: inline-block;
padding: 0 14px 0 14px;
border: 2px solid var(--dark-green);
border-radius: 10px;
font-family: var(--font-family-tit);
font-size: var(--font-size-s);
line-height: 32px;
}

.cast_list{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 40px;
margin: 80px 0 0 0;
padding: 0;
}
.cast_list li{
width: calc((100% - 120px)/4);
display: block;
border-radius: 10px;
overflow: hidden;
}
.cast_list li.mc{
}
.cast_list li dl{
display: block;
}
.cast_list li dl dt{
display: block;
}
.cast_list li dl dt img{
width: 100%;
height: auto;
}
.cast_list li dl dd{
display: block;
background-color: var(--green);
color: var(--white);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#about h4{
display: block;
margin: 80px 0 0 0;
position: relative;
}
#about h4 span{
display: inline-block;
position: relative;
}
#about h4 span:before{
content: "";
width: 17px;
height: 27px;
display: block;
background: url(../img/h4_before.svg) no-repeat center center;
background-size: 17px auto;
position: absolute;
bottom: 0;
left: -30px;
}
#about h4 span:after{
content: "";
width: 17px;
height: 27px;
display: block;
background: url(../img/h4_after.svg) no-repeat center center;
background-size: 17px auto;
position: absolute;
bottom: 0;
right: -30px;
}
.fellow_list{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin: 40px 0 0 0;
padding: 0;
}
.fellow_list li{
width: calc((100% - 40px)/3);
display: block;
padding: 30px 40px 30px 40px;
border-radius: 60px;
text-align: left;
overflow: hidden;
}
.fellow_list li dl{
display: block;
}
.fellow_list li dl dt{
height: 216px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.fellow_list li.unko dl dt img{
width: auto;
height: 201px;
}
.fellow_list li.wanisa dl dt img{
width: auto;
height: 162px;
}
.fellow_list li.toushi dl dt img{
width: auto;
height: 172px;
}
.fellow_list li.shimajiro dl dt img{
width: 100%;
height: auto;
}
.fellow_name{
display: block;
margin: 38px 0 0 0;
font-family: var(--font-family-tit);
font-size: var(--font-h5);
text-align: center;
}
.fellow_exp{
display: block;
margin: 18px 0 0 0;
font-size: 15px;
line-height: 1.4;
}

.about_other{
display: block;
margin: 54px 0 0 0;
}
.btn_pdf{
display: block;
margin: 80px 0 0 0;
text-align: center;
}
.btn_pdf a{
display: block;
color: var(--green);
font-family: var(--font-family-num);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}

.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;
}


/* program */
#program{
display: block;
padding: 200px 0 200px 0;
}
#program .wrapper{
padding-left: 95px;
padding-right: 95px;
}
#program h5{
margin: 35px 0 0 0;
}
#program h5:nth-of-type(2),
#program h5:nth-of-type(3),
#program h5:nth-of-type(4),
#program h5:nth-of-type(5),
#program h5:nth-of-type(6),
#program h5:nth-of-type(7){
margin: 152px 0 0 0;
}
#program .txt{
margin-top: 20px;
padding-left: 39px;
text-align: left;
}
.program_list{
display: flex;
flex-direction: column;
gap: 40px;
margin: 62px 0 0 0;
}
.program_list li{
display: block;
padding: 30px 70px 30px 70px;
border-radius: 30px;
text-align: left;
}
.program_list li dl{
display: block;
}
.program_list li dl dt{
display: block;
font-size: var(--font-h5);
}
.program_list li dl dd{
display: block;
margin: 20px 0 0 0;
}
.program_time{
display: block;
color: var(--green);
font-family: var(--font-family-num);
}
.program_tit{
display: block;
margin: 20px 0 0 0;
color: var(--green);
}
.program_att{
display: block;
margin: 20px 0 0 0;
font-size: var(--font-size-s);
}


/* attention */
#attention{
display: block;
padding: 120px 0 200px 0;
background-color: var(--light-gray);
}
#attention .wrapper{
width: 980px;
}
.attention_list{
display: block;
margin: 50px 0 0 0;
font-size: var(--font-size-s);
}
.attention_list li{
display: block;
padding: 0 0 0 22px;
text-align: left;
position: relative;
}
.attention_list li:before{
content: "・";
width: 22px;
display: block;
position: absolute;
top: 0;
left: 0;
}

/* apply */
#apply{
display: block;
margin: 40px 0 156px 0;
}
#apply .wrapper{
padding: 60px 87px 80px 87px
}


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


/* header */
header{
padding: 0 0 32px 0;
}
header .titBlock{
width: 280px;
margin: 0 auto 0 auto;
padding: 22px 0 32px 0;
border-bottom-left-radius: 36px;
border-bottom-right-radius: 36px;
}
.apply_page header .titBlock{
width: 280px;
margin: 0 auto 0 auto;
padding: 22px 0 32px 0;
}
header .titBlock h1,
.apply_page header .titBlock h1{
width: 187px;
width: 100%;
height: 0;
display: block;
padding-top: 57px;
background: url(../img/logo_wanisatomanabu.svg) no-repeat center center;
background-size: auto 57px;
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: 27px 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{
border: 3px solid var(--dark-green);
border-radius: 30px;
}
.hero_img img{
}

/* page title */
#page_title{
padding: 40px 0 0 0;
}
.apply_page #page_title{
padding: 0 0 0 0;
}
#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);
}

/* fukuoka */
header.fukuoka_header{
background: url(../img/bg_fukuoka_header.jpg) no-repeat center top;
background-size: 100vw auto;
background-color: var(--white);
}
.apply_page header.fukuoka_header .titBlock{
width: 98vw;
padding: 16px 0 0 0;
}
.apply_page header.fukuoka_header .titBlock h1{
width: 100%;
padding-top: 25.1%;
background: url(../img/logo_fukuoka_sp.png) no-repeat center center;
background-size: contain;
}
#page_title.fukuoka_page_title{
}
#page_title.okayama_page_title{
padding: 30px 0 0 0;
}
#page_title.okayama_page_title:before{
content: "";
display: inline-block;
width: 140vw;
height: 140px;
border-radius: 50% / 100% 100% 0 0;
background: var(--white);
position: absolute;
top: -60px;
left: -20vw;
}
#page_title.okayama_page_title .page_nav,
#page_title.fukuoka_page_title .page_nav{
padding: 37px 0 37px 0;
top: auto;
}
.fukuoka_catch{
width: 76vw;
margin: 0 auto 0 auto;
padding-top: 20.9%;
background: url(../img/fukuoka_catch.svg) no-repeat center center;
background-size: contain;
}
.fukuoka_catch_txt{
margin: 20px 0 30px 0;
}

/* okayama */
header.okayama_header{
padding: 0;
background: url(../img/bg_fukuoka_header.jpg) no-repeat center top;
background-size: 100vw auto;
background-color: var(--white);
background: none;
}
header.okayama_header .titBlock{
width: 98vw;
padding: 16px 0 0 0;
}
header.okayama_header .titBlock h1{
width: 100%;
padding-top: 25.1%;
background: url(../img/logo_okayama_sp.png) no-repeat center center;
background-size: contain;
}

/* about */
#about{
padding: 72px 0 178px 0;
background: url(../img/bg_glass.png) repeat-x center bottom;
background-size: auto 62px;
background-color: var(--white);
}
#about .wrapper{
padding-left: 5.3vw;
padding-right: 5.3vw;
padding-bottom: 80px;
}
#about .txt{
display: block;
margin: 35px 0 0 0;
text-align: left;
}
.about_list{
display: flex;
flex-direction: column;
gap: 40px;
margin: 40px 0 0 0;
padding: 0;
}
.about_list li{
}
.about_list li dl{
flex-direction: column;
gap: 20px
}
.about_list li dl dt{
width: 140px;
height: 40px;
margin: 0 auto 0 auto;
border-radius: 10px;
font-size: var(--font-size-l-sp);
line-height: 40px;
text-align: center;
}
.about_list li dl dd{
width: auto;
padding: 0;
}
.about_list li dl dd.fee_info{
text-align: center;
}
.about_list li dl dd .about_list_txt_att{
margin: 15px 0 0 0;
font-size: var(--font-size-s-sp);
}
.about_list li dl dd .address{
display: block;
margin: 20px 0 0 0;
font-size: var(--font-size-s-sp);
}
.about_list li dl dd .btn_info{
display: flex;
justify-content: center;
gap: 14px;
margin: 10px 0 0 0;
}
.about_list li dl dd .btn_info a{
display: inline-block;
padding: 0 14px 0 14px;
border: 2px solid var(--dark-green);
border-radius: 10px;
font-family: var(--font-family-tit);
font-size: var(--font-size-s-sp);
line-height: 32px;
}

.cast_list{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin: 40px 0 0 0;
padding: 0;
}
.cast_list li{
width: calc((100% - 20px)/2);
display: block;
border-radius: 10px;
overflow: hidden;
}
.cast_list li.mc{
margin-top: 0;
}
.cast_list li dl{
display: block;
}
.cast_list li dl dt{
display: block;
}
.cast_list li dl dt img{
width: 100%;
height: auto;
}
.cast_list li dl dd{
display: block;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#about h4{
margin: 40px 10px 0 10px;
}
#about h4 span{
}
#about h4 span:before{
content: "";
width: 17px;
height: 27px;
display: block;
background: url(../img/h4_before.svg) no-repeat center center;
background-size: 17px auto;
position: absolute;
bottom: 0;
left: -20px;
}
#about h4 span:after{
content: "";
width: 17px;
height: 27px;
display: block;
background: url(../img/h4_after.svg) no-repeat center center;
background-size: 17px auto;
position: absolute;
bottom: 0;
right: -20px;
}
.fellow_list{
flex-direction: column;
gap: 20px;
margin: 40px 0 0 0;
padding: 0;
}
.fellow_list li{
width: 100%;
padding: 10px 5.3vw 20px 5.3vw;
border-radius: 30px;
text-align: left;
}
.fellow_list li dl{
display: block;
}
.fellow_list li dl dt{
height: 216px;
}
.fellow_list li.unko dl dt img{
width: auto;
height: 201px;
}
.fellow_list li.wanisa dl dt img{
width: auto;
height: 162px;
}
.fellow_list li.toushi dl dt img{
width: auto;
height: 172px;
}
.fellow_name{
margin: 30px 0 0 0;
}
.fellow_exp{
margin: 18px 0 0 0;
font-size: var(--font-size-xs-sp);
}

.about_other{
margin: 40px 0 0 0;
}
.btn_pdf{
margin: 40px 0 0 0;
}
.btn_pdf a{
font-size: var(--font-size-l-sp);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}

.cloud01{
width: 101px;
height: 62px;
background:url(../img/cloud01.png) no-repeat center center;
background-size: contain;
bottom: 147px;
left: -20px;
}
.cloud02{
width: 88px;
height: 54px;
background:url(../img/cloud01.png) no-repeat center center;
background-size: contain;
bottom: 111px;
left: calc(50% + 30px);
}
.cloud03{
width: 88px;
height: 54px;
background:url(../img/cloud01.png) no-repeat center center;
background-size: contain;
bottom: 196px;
right: -20px;
}

.chara_unko{
width: 86px;
height: 89px;
background:url(../img/chara_unko.png) no-repeat center center;
background-size: contain;
position: absolute;
bottom: 24px;
left: 15px;
}
.chara_wanisa{
width: 103px;
height: 93px;
background:url(../img/chara_wanisa.png) no-repeat center center;
background-size: contain;
bottom: 24px;
left: calc(50% - 52px);
}
.chara_toushi{
width: 79px;
height: 90px;
background:url(../img/chara_toushi.png) no-repeat center center;
background-size: contain;
bottom: 24px;
right: 24px;
}


/* program */
#program{
padding: 80px 0 80px 0;
}
#program .wrapper{
padding-left: 5.3vw;
padding-right: 5.3vw;
}
#program h5{
margin: 35px 0 0 0;
}
#program h5:nth-of-type(2),
#program h5:nth-of-type(3),
#program h5:nth-of-type(4),
#program h5:nth-of-type(5),
#program h5:nth-of-type(6),
#program h5:nth-of-type(7){
margin: 80px 0 0 0;
}
#program .txt{
}
.program_list{
display: flex;
flex-direction: column;
gap: 20px;
margin: 40px 0 0 0;
}
.program_list li{
display: block;
padding: 20px 5.3vw 20px 5.3vw;
border-radius: 30px;
text-align: left;
}
.program_list li dl{
display: block;
}
.program_list li dl dt{
display: block;
font-size: var(--font-h2-sp);
}
.program_list li dl dd{
display: block;
margin: 20px 0 0 0;
}
.program_time{
}
.program_tit{
}
.program_att{
display: block;
margin: 20px 0 0 0;
font-size: var(--font-size-xs-sp);
}


/* attention */
#attention{
padding: 80px 0 80px 0;
}
#attention .wrapper{
width: auto;
}
.attention_list{
margin: 30px 0 0 0;
font-size: var(--font-size-xs-sp);
}
.attention_list li{
padding: 0 0 0 16px;
}
.attention_list li:before{
content: "・";
width: 16px;
}


/* apply */
#apply{
margin: 20px 0 80px 0;
}
#apply .wrapper{
padding: 20px 5.3vw 40px 5.3vw;
}


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

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

}

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

}

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

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

}
