@charset "UTF-8";

/* ------------------------------------------- CSS Information 
 Style Info:     ブラウザスタイルのリセット設定
----------------------------------------------------------- */  
html{overflow-y:scroll;} 
body,div,blockquote,pre,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,table,th,td,form,input,textarea,fieldset{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}   
img,abbr,acronym,fieldset{border:none;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
hr,legend{display:none;}
object,embed{vertical-align:top;}
li{list-style:none;}

/* ------------------------------------------- CSS Information 
 Style Info:     基本設定
----------------------------------------------------------- */
/*A Style*/  
a:link{text-decoration:underline;color:#666666;}
a:visited{text-decoration:none;color:#66666;}
a:hover{text-decoration:underline;color:#999999;}
a:active{text-decoration:none;color:#66666;}
/*font*/
.b{font-weight:bold;}
.ul{text-decoration:underline;}
.bg{background-color:#fff45c;}
.big{font-size:20px;}@media only screen and (max-width:750px){.big{font-size:16px;}}
.small{font-size:14px;}@media only screen and (max-width:750px){.small{font-size:12px;line-height:20px;}}
.red{color:#e50012;}
.blue{color:#5ed4ca;}
/*----- image -----*/
.img1280{display:block;width:100%;max-width:1280px;margin:0 auto;}
.img960{display:none;width:100%;max-width:960px;margin:0 auto;}
.img750{display:none;width:100%;max-width:750px;margin:0 auto;}
@media only screen and (max-width:960px){.img1280{display:none;}.img960{display:block;}}
@media only screen and (max-width:750px){.img960{display:none;}.img750{display:block;}}
.photo{float:right;width:320px;}
.pc{display:block;}
.sp{display:none;}
span.pc{display:inline-block;}
span.sp{display:none;}
@media only screen and (max-width:750px){
.photo{float:right;width:140px;padding:0 0 10px 10px;}
.pc{display:none;}
.sp{display:block;}
span.pc{display:none;}
span.sp{display:inline-block;}
}
/* text */
.text{margin:0;padding:0;font-size:16px;line-height:30px;text-align:justify;word-wrap:break-word;}
.text p,.text ul{margin:0 0 30px 0;padding:0;}
.text p:last-child{margin:0;padding:0;}
.text p.text_center{text-align:center;}
.text p.text_right{text-align:right;}
@media only screen and (max-width:750px){
.text{font-size:14px;line-height:24px;}
.text p,.text ul{margin:0 0 20px 0;}
.text p:last-child{margin:0;padding:0;}
}


/* ----------------------- CSS Information 
 Style Info: HTML/BODY
--------------------------------------- */
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
font-family:"Kosugi","メイリオ","Hiragino Kaku Gothic Pro",Arial,Sans-Serif;
color:#333333;
font-size:16px;
line-height:0;
text-align:center;
background:#ffffff;
letter-spacing:0em;
min-height:100%;
position:relative;
box-sizing:border-box;
}

/* ----------------------- CSS Information 
 Style Info: TOPBAR
--------------------------------------- */
#topbar{
position:relative;
width:100%;
margin:0;
padding:20px;
text-align:left;
box-sizing:border-box;
background:#ffffff;
}
.logo{display:block;width:300px;margin:0 auto 0 0;}
@media only screen and (max-width:750px){
#topbar{padding:10px;text-align:center;}
.logo{width:200px;margin:0 auto;}
}

/* ----------------------- CSS Information 
 Style Info: HEADER
--------------------------------------- */
header{
position:relative;
width:100%;
margin:0;
padding:0;
background:#ffec47;
background:#000000 url(../img/header_bg_pc.png) no-repeat center;
background-size:cover;
}
header img{
width:100%;
/* --max-width:1280px;-- */
max-width:960px;
margin:0 auto;
padding:0;
}
@media only screen and (max-width:750px){header{background:#000000;}}

header img.img1280{display:block;}
header img.img960{display:none;}
header img.img750{display:none;}
@media only screen and (max-width:960px){header img.img1280{display:none;}header img.img960{display:block;}}
@media only screen and (max-width:750px){header img.img960{display:none;}header img.img750{display:block;}}

/* ----------------------- CSS Information 
 Style Info: TITLE
--------------------------------------- */
/* ----- TITLE_BALLOON ----- */
.title{
position:relative;
width:100%;
margin:0 auto 60px auto;
padding:0 0 40px 0;
}
.title img{
position:relative;
width:100%;
max-width:960px;
margin:0 auto;
}
.title:after{
content:"";
position:absolute;
bottom:0;
left:0;
right:0;
display:block;
padding:0;
width:0;
height:6px;
margin:auto auto 0 auto;
background:#5ed4ca;
}
.title.scrollin:after{animation:title_hr 0.5s linear both;}
@keyframes title_hr{0%{width:0%;}100%{width:60px;}}
@media only screen and (max-width:750px){
.title{margin:0 auto 20px auto;padding:0 0 20px 0;}
.title img{}
.title:after{height:5px;}
.title.scrollin:after{}
}
/* ----- TITLE_BALLOON ----- */
.title_balloon{
position:relative;
width:100%;
max-width:960px;
margin:0 auto 20px auto;
padding:0 30px;
box-sizing:border-box;
}
.title_balloon.schedule02{margin:60px auto 20px auto;}
.title_balloon img{width:100%;max-width:900px;margin:0 auto;}
@media only screen and (max-width:750px){
.title_balloon{margin:0 auto 10px auto;padding:0 20px;}
.title_balloon.schedule02{margin:20px auto 10px auto;}
.title_balloon img{max-width:710px;}
}

/* ----------------------- CSS Information 
 Style Info: WRAPPER
--------------------------------------- */
.wrapper{
margin:0 auto;
padding:0;
width:100%;
max-width:960px;
position:relative;
box-sizing:border-box;
}
.img_right{
display:block;
float:right;
width:40%;
margin:0 0 20px 20px;
padding:0;
box-sizing:border-box;
}
.wrapper .text{
width:100%;
margin:0 auto;
padding:0 30px;
box-sizing:border-box;
}
@media only screen and (max-width:750px){
.wrapper{}
.wrapper .text{
padding:0 20px;
text-align:justify;
}
.wrapper .text br{display:none;}
.wrapper .text br.sp{display:block;}
.wrapper .text .contents_img{display:block;width:100%;max-width:670px;margin:0 auto;}
.img_right{
display:block;
float:none;
width:100%;
margin:0 auto 20px auto;
padding:0;
box-sizing:border-box;
}
}

/* ----------------------- CSS Information 
 Style Info: WELCOME
--------------------------------------- */
#welcome{
padding:80px 0 40px 0;
background:#ffffff url(../img/bg_welcome.png) no-repeat center top;
background-size:100% auto;
}
#step{
margin:30px 30px 0 30px;
padding:0;
border-radius:20px;
background:#fff799;
box-sizing:border-box;
overflow:hidden;
}
#step dl{display:flex;margin:0;padding:30px 30px 0 30px;}
#step dl:last-child{margin:0;}
#step dt{width:100px;}
#step dt span{
display:block;
width:100%;
margin:0;
padding:5px;
color:#ffffff;
background:#5ed4ca;
font-size:16px;
line-height:20px;
font-weight:bold;
text-align:center;
box-sizing:border-box;
border-radius:20px;
}
#step dd{
flex:1;
display:block;
margin:0;
padding:0 0 0 20px;
font-size:16px;
line-height:30px;
font-weight:bold;
text-align:left;
}
@media only screen and (max-width:750px){
#welcome{padding:40px 0 0 0;}
#step{margin:20px 20px 0 20px;border-radius:10px;}
#step dl{display:block;margin:0;padding:20px 20px 0 20px;}
#step dt{width:100px;padding:0 0 10px 0;}
#step dt span{
display:block;
width:100%;
margin:0;
padding:0;
color:#ffffff;
background:#5ed4ca;
font-size:14px;
line-height:20px;
font-weight:bold;
text-align:center;
box-sizing:border-box;
border-radius:10px;
}
#step dd{
display:block;
margin:0;
padding:0;
font-size:14px;
line-height:24px;
}
}

/* ----------------------- CSS Information 
 Style Info: OPENING
--------------------------------------- */
#opening{
padding:80px 0;
background:#ffffff;
}
.sign{display:inline-block;width:180px;margin:10px 0 0 0;}
@media only screen and (max-width:750px){
#opening{padding:40px 0;}
.sign{display:inline-block;width:120px;margin:10px 0 0 0;}
}

/* ----------------------- CSS Information 
 Style Info: ABOUT
--------------------------------------- */
#about{
background:#f6f6f5 url(../img/bg_about.png) no-repeat center top;
background-size:100% auto;
padding:120px 0 60px 0;
}
.about_img{width:100%;max-width:960px;margin:0 auto;padding:0 30px;box-sizing:border-box;}
@media only screen and (max-width:750px){
#about{padding:40px 0 20px 0;}
.about_img{max-width:750px;padding:0 20px;}
}

/* ----------------------- CSS Information 
 Style Info: VOICE
--------------------------------------- */
#voice{background:#f6f6f5;padding:0 0 120px 0;}
#voice .wrapper{padding:0 30px;}
.voice_wrapper{
width:100%;
height:500px;
margin:0;
padding:30px 30px 0 30px;
overflow-y:scroll;
background:#ffffff;
box-sizing:border-box;
border-radius:10px;
}
.voice_wrapper dl{
margin:0 0 30px 0;
padding:0;
}
.voice_wrapper dt{
margin:0;
padding:0 0 20px 0;
font-size:18px;
line-height:28px;
font-weight:bold;
text-align:left;
border-bottom:1px solid #5ed4ca;
box-sizing:border-box;
background-repeat:no-repeat;
background-position:20px 20px;
background-size:100px 100px;
}
.voice_wrapper dt .voice_info{
display:block;
font-size:14px;
line-height:30px;
font-weight:normal;
text-align:left;
color:#666666;
}
.voice_wrapper dd{
width:100%;
margin:0;
padding:20px 0;
box-sizing:border-box;
font-size:16px;
line-height:30px;
text-align:justify;
}
.voice_wrapper dd p{margin:0;padding:0;}
@media only screen and (max-width:750px){
#voice{padding:0 0 40px 0;}
#voice .wrapper{padding:0 20px;}
.voice_wrapper{
height:300px;
padding:20px 20px 0 20px;
}
.voice_wrapper dl{margin:0 0 20px 0;}
.voice_wrapper dt{
padding:0 0 20px 0;
font-size:14px;
line-height:20px;
text-align:justify;
background-size:60px 60px;
}
.voice_wrapper dt .voice_info{font-size:10px;line-height:20px;}
.voice_wrapper dd{font-size:14px;line-height:24px;}
.voice_wrapper dd p{}
}

/* ----------------------- CSS Information 
 Style Info: FEATURE
--------------------------------------- */
#feature{
background:#ddeff1 url(../img/bg_feature.png) no-repeat center top;
background-size:100% auto;
padding:120px 0 60px 0;
}
.feature_box{
display:flex;
align-items:center;
margin:0 30px 30px 30px;
padding:40px;
border-radius:10px;
background:#eef8f8;
box-sizing:border-box;
}
.feature_box .textbox{width:63.4%;}
.feature_box .textbox img{width:100%;max-width:520px;margin:0 auto 0 0;}
.feature_box .text{padding:30px 0 0 0;}
.feature_box .imgbox{width:36.5%;max-width:300px;}
.feature_box .imgbox img{width:100%;margin:0 0 0 auto;padding:0 0 0 40px;box-sizing:border-box;}
.feature_text_img{width:100%;max-width:750px;margin:60px auto 0 auto;}
@media only screen and (max-width:750px){
#feature{padding:40px 0 30px 0;}
.feature_box{
flex-direction:column-reverse;
margin:0 10px 20px 10px;
padding:20px;
}
.feature_box .textbox{width:100%;}
.feature_box .textbox img{max-width:630px;}
.feature_box .text{padding:20px 0 0 0;}
.feature_box .imgbox{width:100%;max-width:100%;}
.feature_box .imgbox img{width:50%;max-width:300px;margin:0 auto;padding:0 0 20px 0;box-sizing:border-box;}
.feature_text_img{margin:30px auto 0 auto;}
}

/* ----------------------- CSS Information 
 Style Info: PROGRAM
--------------------------------------- */
#program{
background:#ffffff url(../img/bg_program.png) no-repeat center top;
background-size:100% auto;
padding:120px 0;
}
.loadmap{width:100%;max-width:900px;margin:0 auto;}
#phase{
width:100%;
max-width:960px;
margin:0 auto;
padding:60px 30px 0 30px;
box-sizing:border-box;
}
.phase_index{
width:50%;
max-width:450px;
margin:0 auto 0 0;
border-radius:10px 10px 0 0;
}
.phase_wrapper{
margin:0 0 40px 0;
padding:40px;
border-radius:0 10px 10px 10px;
box-sizing:border-box;
}
.phase_wrapper:last-child{margin:0;}
.phase00{background:#e8eaf5;}
.phase01{background:#e8f5f6;}
.phase02{background:#fef4d7;}
.phase03{background:#fce5e2;}
.phase_wrapper .text{padding:30px 0 60px 0;}
.phase_wrapper .text:last-child{padding:30px 0 20px 0;}
.month{width:100%;max-width:820px;margin:0 auto 0 0;}
.month_img{width:36.5%;max-width:300px;float:right;padding:0 0 0 40px;box-sizing:border-box;}
.program_text_img{width:100%;max-width:750px;margin:40px auto 0 auto;}
@media only screen and (max-width:750px){
#program{padding:40px 0;}
.loadmap{max-width:710px;}
#phase{padding:20px 10px 0 10px;}
.phase_index{width:75%;max-width:570px;}
.phase_wrapper{margin:0 0 20px 0;padding:20px;}
.phase_wrapper .text{padding:20px 0 40px 0;}
.phase_wrapper .text:last-child{padding:20px 0 20px 0;}
.month{max-width:630px;}
.month_img{width:50%;padding:0 0 0 20px;}
.program_text_img{margin:20px auto 0 auto;}
}

/* ----------------------- CSS Information 
 Style Info: SCHEDULE
--------------------------------------- */
#schedule{padding:60px 0;background:#ffffff;}
.loadmap{width:100%;max-width:900px;margin:0 auto;}
#phase{
width:100%;
max-width:960px;
margin:0 auto;
padding:60px 30px 0 30px;
box-sizing:border-box;
}
.phase_index{
width:50%;
max-width:450px;
margin:0 auto 0 0;
border-radius:10px 10px 0 0;
}
.phase_wrapper{
margin:0 0 40px 0;
padding:40px;
border-radius:0 10px 10px 10px;
box-sizing:border-box;
}
.phase_wrapper:last-child{margin:0;}
.phase00{background:#e8eaf5;}
.phase01{background:#e8f5f6;}
.phase02{background:#fef4d7;}
.phase03{background:#fce5e2;}
.phase_wrapper .text{padding:30px 0 60px 0;}
.phase_wrapper .text:last-child{padding:30px 0 20px 0;}
.month{width:100%;max-width:820px;margin:0 auto 0 0;}
.month_img{width:36.5%;max-width:300px;float:right;padding:0 0 0 40px;box-sizing:border-box;}
.program_text_img{width:100%;max-width:750px;margin:40px auto 0 auto;}
@media only screen and (max-width:750px){
#schedule{padding:40px 0 40px 0;}
.loadmap{max-width:710px;}
#phase{padding:20px 10px 0 10px;}
.phase_index{width:75%;max-width:570px;}
.phase_wrapper{margin:0 0 20px 0;padding:20px;}
.phase_wrapper .text{padding:20px 0 40px 0;}
.phase_wrapper .text:last-child{padding:20px 0 20px 0;}
.month{max-width:630px;}
.month_img{width:50%;padding:0 0 0 20px;}
.program_text_img{margin:20px auto 0 auto;}
}

/* ----------------------- CSS Information 
 Style Info: FLOW
--------------------------------------- */
#flow{padding:60px 0 0 0;background:#ffffff;}
.flow_img{width:100%;max-width:900px;margin:0 auto;}
@media only screen and (max-width:750px){
#flow{padding:0;}
.flow_img{max-width:710px;}
}

/* ----------------------- CSS Information 
 Style Info: SERVICE
--------------------------------------- */
#service{
background:#feefc3 url(../img/bg_service.png) no-repeat center top;
background-size:100% auto;
padding:120px 0 120px 0;
}
.service_box{
display:flex;
align-items:center;
margin:0 30px 30px 30px;
padding:40px;
border-radius:10px;
background:#fef7e1;
box-sizing:border-box;
}
.service_box:last-child{margin:0 30px 0 30px;}
.service_box .textbox{width:63.4%;}
.service_box .textbox img{width:100%;max-width:520px;margin:0 auto 0 0;}
.service_box .text{padding:30px 0 0 0;}
.service_box .imgbox{width:36.5%;max-width:300px;}
.service_box .imgbox img{width:100%;margin:0 0 0 auto;padding:0 0 0 40px;box-sizing:border-box;}
.service_text_img{width:100%;max-width:750px;margin:60px auto 0 auto;}
@media only screen and (max-width:750px){
#service{padding:40px 0 40px 0;}
.service_box{
flex-direction:column-reverse;
margin:0 10px 20px 10px;
padding:20px;
}
.service_box:last-child{margin:0 10px 0 10px;}
.service_box .textbox{width:100%;}
.service_box .textbox img{max-width:630px;}
.service_box .text{padding:20px 0 0 0;}
.service_box .imgbox{width:100%;max-width:100%;}
.service_box .imgbox img{width:50%;max-width:300px;margin:0 auto;padding:0 0 20px 0;box-sizing:border-box;}
.service_text_img{margin:30px auto 0 auto;}
}

/* ----------------------- CSS Information 
 Style Info: PRESNET
--------------------------------------- */
#present{
background:#fad8d3 url(../img/bg_present.png) no-repeat center top;
background-size:100% auto;
padding:120px 0 120px 0;
}
.present_box{
display:flex;
align-items:center;
margin:0 30px 30px 30px;
padding:40px;
border-radius:10px;
background:#fdece9;
box-sizing:border-box;
}
.present_box:last-child{margin:0 30px 0 30px;}
.present_box .textbox{width:63.4%;}
.present_box .textbox img{width:100%;max-width:520px;margin:0 auto 0 0;}
.present_box .text{padding:30px 0 0 0;}
.present_box .text dl{margin:0 0 30px 0;}
.present_box .text dt{
width:100%;
max-width:300px;
margin:0 auto 10px 0;
padding:0 10px;
font-weight:bold;
color:#ffffff;
text-align:center;
border-radius:15px;
background:#ee7c6c;
box-sizing:border-box;
}
.present_box .text dd{
position:relative;
font-weight:bold;
padding:0 0 0 15px;
}
.present_box .text dd:before{
content:"";
position:absolute;
top:10px;
left:0;
width:10px;
height:10px;
border-radius:5px;
background:#ee7c6c;
}
.present_box .imgbox{width:36.5%;max-width:300px;}
.present_box .imgbox img{width:100%;margin:0 0 0 auto;padding:0 0 0 40px;box-sizing:border-box;}
.present_text_img{width:100%;max-width:750px;margin:60px auto 0 auto;}
@media only screen and (max-width:750px){
#present{padding:40px 0 40px 0;}
.present_box{
flex-direction:column-reverse;
margin:0 10px 20px 10px;
padding:20px;
}
.present_box:last-child{margin:0 10px 0 10px;}
.present_box .textbox{width:100%;}
.present_box .textbox img{max-width:630px;}
.present_box .text{padding:20px 0 0 0;}
.present_box .text dl{margin:0 0 20px 0;}
.present_box .text dd{}
.present_box .text dd:before{top:7px;}
.present_box .imgbox{width:100%;max-width:100%;}
.present_box .imgbox img{width:50%;max-width:300px;margin:0 auto;padding:0 0 20px 0;box-sizing:border-box;}
.present_text_img{margin:30px auto 0 auto;}
}

/* ----------------------- CSS Information 
 Style Info: MESSAGE
--------------------------------------- */
.message{
background:#ffffff url(../img/bg_message.png) no-repeat center top;
background-size:100% auto;
padding:120px 0 80px 0;
}
.message .textbox{
margin:0 30px 60px 30px;
padding:40px 30px;
background:#f6f6f5;
border-radius:10px;
}
.message .text{padding:0;background:url(../img/message_text_pc.png) repeat left top;}
.message .imgbox{display:inline-block;float:right;width:35.5%;background:#f6f6f5;}
.message .imgbox img{width:100%;}
@media only screen and (max-width:750px){
.message{padding:40px 0 0 0;}
.message .textbox{
margin:0 20px 60px 20px;
padding:30px 20px;
}
.message .text{padding:0;background:url(../img/message_text_sp.png) repeat left top;}
.message .text p{margin:0;padding:0 0 24px 0;}
.message .text p:last-child{margin:0;padding:0;}
.message .imgbox{display:block;float:none;width:100%;background:#f6f6f5;text-align:center;}
.message .imgbox img{width:136px;}
}

/* ----------------------- CSS Information 
 Style Info: RESULT
--------------------------------------- */
#result{
background:#f6f6f5 url(../img/bg_join.png) no-repeat center top;
background-size:100% auto;
padding:60px 0 0 0;
}
#invite{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
}
.invite_wrapper{
position:relative;
display:flex;
align-items:stretch;
width:100%;
max-width:1080px;
margin:0 auto;
padding:0 30px 40px 30px;
box-sizing:border-box;
}
.invite_wrapper:last-child{padding:0 30px;}
.invite_box{
position:relative;
width:-webkit-calc(50% - 10px) ;
width:calc(50% - 10px) ;
padding:0;
box-sizing:border-box;
background:#ffffff;
border-radius:10px;
overflow:hidden;
}
.invite_box:nth-child(odd){margin:0 10px 0 0;}
.invite_box:nth-child(even){margin:0 0 0 10px;}
.invite_caption{
width:100%;
margin:0 auto;
padding:10px 0;
font-size:18px;
line-height:20px;
font-weight:bold;
color:#ffffff;
background:#5ed4ca;
}
.invite_img{margin:0;padding:0;width:100%;}
.invite_text{
margin:0;
padding:30px;
box-sizing:border-box;
}
.invite_text ul{margin:0;padding:0;list-style:none;}
.invite_text ul li{
position:relative;
margin:0;
padding:0 0 0 30px;
font-size:16px;
line-height:30px;
text-align:justify;
}
.invite_text ul li:before{
content:"";
display:block;
position:absolute;
top:4px;
left:0;
width:20px;
height:20px;
background:#fac500;
box-sizing:border-box;
}
.invite_text ul li:after{
content:"";
display:block;
position:absolute;
top:4px;
left:5px;
width:6px;
height:12px;
transform:rotate(40deg);
border-bottom:3px solid #ffffff;
border-right:3px solid #ffffff;
}
@media only screen and (max-width:750px){
#result{padding:40px 0 20px 0;}
#invite{}
.invite_wrapper{display:block;height:auto;padding:0 20px 0 20px;}
.invite_wrapper:last-child{padding:0 20px;}
.invite_box{width:100%;}
.invite_box:nth-child(odd){margin:0 0 20px 0;}
.invite_box:nth-child(even){margin:0 0 20px 0;}
.invite_caption{font-size:14px;}
.invite_img{margin:0;padding:0;width:100%;}
.invite_text{padding:20px;}
.invite_text ul{}
.invite_text ul li{
padding:0 0 10px 20px;
font-size:14px;
line-height:20px;
text-align:justify;
}
.invite_text ul li:last-child{padding:0 0 0 20px;}
.invite_text ul li:before{
top:3px;
left:0;
width:14px;
height:14px;
}
.invite_text ul li:after{
top:3px;
left:3px;
width:4px;
height:8px;
}
}

/* ----------------------- CSS Information 
 Style Info: JOIN
--------------------------------------- */
#join{background:#f6f6f5;padding:60px 0 120px 0;}
#join ul{
margin:0 30px;
padding:20px 40px;
list-style:none;
box-sizing:border-box;
border-radius:10px;
background:#ffffff;
}
#join li{
position:relative;
margin:0;
padding:10px 0 10px 30px;
font-size:18px;
line-height:30px;
text-align:left;
border-bottom:1px dashed #cccccc;
}
#join li:last-child{border-bottom:none;}
#join li:before{
content:"";
display:block;
position:absolute;
top:14px;
left:0;
width:20px;
height:20px;
background:#fac500;
box-sizing:border-box;
}
#join li:after{
content:"";
display:block;
position:absolute;
top:14px;
left:5px;
width:6px;
height:12px;
transform:rotate(40deg);
border-bottom:3px solid #ffffff;
border-right:3px solid #ffffff;
}
@media only screen and (max-width:750px){
#join{padding:20px 0 40px 0;}
#join ul{margin:0 20px;padding:0 20px;}
#join li{
padding:20px 0 20px 20px;
font-size:14px;
line-height:20px;
text-align:left;
}
#join li:before{
content:"";
display:block;
position:absolute;
top:23px;
left:0;
width:14px;
height:14px;
}
#join li:after{
top:23px;
left:3px;
width:4px;
height:8px;
}
}

/* ----------------------- CSS Information 
 Style Info: IMPORTANT
--------------------------------------- */
#important{padding:120px 0 60px 0;background:#ffffff;}
@media only screen and (max-width:750px){
#important{padding:40px 0 20px 0;}
}

/* ----------------------- CSS Information 
 Style Info: PRICE
--------------------------------------- */
#price{padding:120px 0;background:#ffffff;}
.price_img{width:100%;max-width:900px;margin:0 auto;}
/* ----- COMPARE ----- */
.compare{
width:100%;
margin:0 auto 10px auto;
border-collapse:separate;
border-spacing:2px;
}
.compare th{
margin:0;
padding:10px 5px;
font-size:16px;
line-height:20px;
text-align:center;
font-weight:normal;
color:#ffffff;
background:#5ed4ca;
}
.compare td{
margin:0;
padding:10px 5px;
font-size:16px;
line-height:20px;
text-align:center;
background:#f3f3f3;
}
.compare .total{font-weight:bold;}
.compare th.dba{font-size:18px;font-weight:bold;background:#ec6941;}
.compare td.dba{font-size:18px;font-weight:bold;background:#f3e2e2;}
@media only screen and (max-width:750px){
#price{padding:40px 0;}
.price_img{max-width:710px;}
/* ----- COMPARE ----- */
.compare{
margin:0 auto 10px auto;
border-spacing:1px;
}
.compare tr:nth-child(1) th{
padding:4px 0;
font-size:11px;
line-height:12px;
}
.compare tr:nth-child(2) th,
.compare tr:nth-child(3) th,
.compare tr:nth-child(4) th,
.compare tr:nth-child(5) th,
.compare tr:nth-child(6) th,
.compare tr:nth-child(7) th{
margin:0;
padding:0 2px;
width:20px;
height:70px;
font-size:11px;
line-height:12px;
box-sizing:border-box;
}
.compare td{
padding:10px 2px;
font-size:12px;
line-height:20px;
}
.compare th.dba{font-size:12px;}
.compare td.dba{font-size:12px;}
}

/* ----------------------- CSS Information 
 Style Info: APPLY
--------------------------------------- */
#apply{
width:100%;
margin:0;
padding:0 0 30px 0;
box-sizing:border-box;
background:#fff799;
}
.apply_box{
margin:0 30px 40px 30px;
padding:0;
box-sizing:border-box;
}
.apply_box:last-child{margin:0 30px 0 30px;}
.apply_index{
display:block;
width:200px;
margin:0 auto 20px 0;
padding:5px 10px;
text-align:center;
font-size:16px;
line-height:20px;
color:#ffffff;
background:#5ed4ca;
border-radius:15px;
box-sizing:border-box;
}
.apply_text{
display:block;
width:100%;
margin:0;
padding:0;
font-size:18px;
line-height:30px;
text-align:justify;
box-sizing:border-box;
}
.apply_schedule{}
.apply_schedule li{
list-style:none;
position:relative;
margin:5px 0;
padding:0;
vertical-align:middle;
}
.apply_schedule li span{
display:inline-block;
width:120px;
height:24px;
margin:0 6px 0 0;
border-radius:12px;
font-size:16px;
line-height:24px;
color:#ffffff;
text-align:center;
}
.apply_schedule li:nth-child(1) span{background:#8cb4d0;}
.apply_schedule li:nth-child(2) span{background:#8ccbd0;}
.apply_schedule li:nth-child(3) span{background:#a5cea0;}
.apply_schedule li:nth-child(4) span{background:#fdd835;}
.apply_schedule li:nth-child(5) span{background:#fab939;}
.apply_schedule li:nth-child(6) span{background:#ee7c6c;}
.apply_list{}
.apply_list li{
list-style:none;
position:relative;
padding:0 0 0 30px;
}
.apply_list li:before{
content:"";
position:absolute;
top:3px;
left:0;
width:24px;
height:24px;
border-radius:12px;
font-size:16px;
line-height:24px;
color:#ffffff;
text-align:center;
}
.apply_list li:nth-child(1):before{content:"１";background:#8cb4d0;}
.apply_list li:nth-child(2):before{content:"２";background:#8ccbd0;}
.apply_list li:nth-child(3):before{content:"３";background:#a5cea0;}
.apply_list li:nth-child(4):before{content:"４";background:#fdd835;}
.apply_list li:nth-child(5):before{content:"５";background:#fab939;}
.apply_list li:nth-child(6):before{content:"６";background:#ee7c6c;}
.apply_list li:nth-child(7):before{content:"７";background:#ee7c6c;}
ul.attention{}
ul.attention li{
position:relative;
font-size:16px;
line-height:24px;
padding:0 0 0 20px;
}
ul.attention li:before{
content:"※";
position:absolute;
top:0;
left:0;
font-size:16px;
line-height:24px;
}
.apply_payment{
margin:0 0 20px 0;
padding:0;
}
.apply_payment dt{
display:flex;
align-items:center;
text-align:left;
}
.apply_payment dt:after{
content:"";
flex-grow:1;
border-bottom:1px solid #5ed4ca;
margin-left:10px;
padding-right:15px;
}
.apply_payment dd{
margin:0;
padding:0;
}
.apply_agreement{
display:block;
width:100%;
height:200px;
margin:0;
padding:20px;
font-size:14px;
line-height:20px;
text-align:justify;
border:1px solid #5ed4ca;
box-sizing:border-box;
overflow-y:scroll;
}
.apply_agreement dl{}
.apply_agreement dt{}
.apply_agreement dd{margin:0 0 20px 0;}
@media only screen and (max-width:750px){
#apply{padding:0 0 20px 0;}
.apply_box{margin:0 15px 20px 15px;}
.apply_box:last-child{margin:0 15px 0 15px;}
.apply_index{
width:160px;
margin:0 auto 10px 0;
font-size:14px;
}
.apply_text{
font-size:14px;
line-height:24px;
}
.apply_schedule{}
.apply_schedule li{
list-style:none;
position:relative;
margin:5px 0;
padding:0;
}
.apply_schedule li span{
display:inline-block;
width:120px;
height:20px;
margin:0 6px 0 0;
border-radius:10px;
font-size:14px;
line-height:20px;
color:#ffffff;
text-align:center;
}
.apply_schedule li:nth-child(1) span{background:#8cb4d0;}
.apply_schedule li:nth-child(2) span{background:#8ccbd0;}
.apply_schedule li:nth-child(3) span{background:#a5cea0;}
.apply_schedule li:nth-child(4) span{background:#fdd835;}
.apply_schedule li:nth-child(5) span{background:#fab939;}
.apply_schedule li:nth-child(6) span{background:#ee7c6c;}
.apply_list{}
.apply_list li{padding:0 0 0 20px;}
.apply_list li:before{
content:"";
position:absolute;
top:4px;
left:0;
width:16px;
height:16px;
border-radius:10px;
font-size:12px;
line-height:16px;
}
.apply_list li:nth-child(1):before{content:"１";background:#8cb4d0;}
.apply_list li:nth-child(2):before{content:"２";background:#8ccbd0;}
.apply_list li:nth-child(3):before{content:"３";background:#a5cea0;}
.apply_list li:nth-child(4):before{content:"４";background:#fdd835;}
.apply_list li:nth-child(5):before{content:"５";background:#fab939;}
.apply_list li:nth-child(6):before{content:"６";background:#ee7c6c;}
.apply_list li:nth-child(7):before{content:"７";background:#ee7c6c;}
ul.attention{}
ul.attention li{
font-size:12px;
line-height:20px;
padding:0 0 0 16px;
}
ul.attention li:before{font-size:12px;line-height:20px;}
.apply_payment{}
.apply_payment dt{}
.apply_payment dt:after{}
.apply_payment dd{}
.apply_agreement{
height:100px;
padding:10px;
font-size:12px;
line-height:20px;
}
.apply_agreement dl{}
.apply_agreement dt{}
.apply_agreement dd{margin:0 0 20px 0;}
}

/* ----------------------- CSS Information 
 Style Info: CTA
--------------------------------------- */
.cta{
position:relative;
margin:0;
padding:0 0 30px 0;
width:100%;
background:#ffec47;
}
.cta_img{
width:100%;
max-width:960px;
margin:0 auto;
padding:0;
}
.cta_text_img{
width:100%;
max-width:750px;
margin:0 auto;
padding:0;
}
@media only screen and (max-width:750px){
.cta{padding:0 0 20px 0;}
}

/* ----------------------- CSS Information 
 Style Info: BTN
--------------------------------------- */
.btn{
width:100%;
margin:0;
padding:30px 0;
}
.cta .btn{padding:0 0 30px 0;}
.btn_flex{
display:flex;
align-items:flex-end;
width:100%;
max-width:960px;
margin:0 auto;
padding:0 30px;
box-sizing:border-box;
}
.btn_box{width:50%;margin:0;box-sizing:border-box;}
.btn_box:first-child{padding:0 10px 0 0;}
.btn_box:last-child{padding:0 0 0 10px;}
.btn_wrapper{
display:block;
width:100%;
max-width:960px;
margin:0 auto;
padding:0 30px;
box-sizing:border-box;
}
.btn_img{
width:100%;
margin:0 auto;
border-radius:10px;
box-shadow:2px 2px 4px 0px rgba(0,0,0,0.5);
background:#ffffff;
overflow:hidden;
}
.btn_flex .btn_img{max-width:440px;}
.btn_wrapper .btn_img{max-width:670px;}
.btn_img img{width:100%;}
.btn_img img:hover{opacity:0.5;}
.ikkatu{width:100%;margin:0 auto 10px auto;}
@media only screen and (max-width:750px){
.btn{padding:20px 0;}
.cta .btn{padding:0 0 20px 0;}
.btn_flex{display:block;padding:0 20px;}
.btn_box{width:100%;}
.btn_box:first-child{padding:0;margin:0 0 20px 0;}
.btn_box:last-child{padding:0;}
.btn_wrapper{padding:0 20px;}
.btn_img{}
.btn_flex .btn_img{max-width:440px;}
.btn_wrapper .btn_img{max-width:670px;}
.btn_flex .btn_img{max-width:600px;}
.btn_img img{}
.btn_img img:hover{}
.ikkatu{max-width:600px;}
}

/* ----------------------- CSS Information 
 Style Info: CDT
--------------------------------------- */
.cdt{
width:100%;
margin:0;
padding:20px;
font-size:20px;
line-height:40px;
font-weight:bold;
text-align:center;
color:#ffffff;
background:#ec6941;
box-sizing:border-box;
letter-spacing:2px;
}
.day,.hour,.min,.sec,.milli{font-size:30px;}
@media only screen and (max-width:750px){
.cdt{
padding:10px;
font-size:16px;
line-height:30px;
}
.day,.hour,.min,.sec,.milli{font-size:24px;}
}

/* ----------------------- CSS Information 
 Style Info: FAQ
--------------------------------------- */
#faq{
padding:120px 0 30px 0;
background:#f6f6f5;
}
#faq dl{
width:100%;
max-width:960px;
margin:40px auto 0 auto;
padding:0 30px;
box-sizing:border-box;
}
#faq dt{
font-size:16px;
line-height:30px;
text-align:justify;
margin:0;
padding:20px 20px 20px 70px;
background:#ffffff url(../img/faq_q.png) no-repeat 20px 20px;
background-size:30px 30px;
border-radius:10px 10px 0 0;
border-bottom:1px solid #5ed4ca;
}
#faq dd{
font-size:16px;
line-height:30px;
text-align:justify;
margin:0 0 30px 0;
padding:20px 20px 20px 70px;
background:#ffffff url(../img/faq_a.png) no-repeat 20px 20px;
background-size:30px 30px;
border-radius:0 0 10px 10px;
}
#faq dd:last-child{margin:0;}
@media only screen and (max-width:750px){
#faq{padding:40px 0 20px 0;}
#faq dl{
margin:20px 0 0 0;
padding:0 20px;
}
#faq dt{
font-size:14px;
line-height:24px;
padding:20px 20px 20px 40px;
background:#ffffff url(../img/faq_q.png) no-repeat 10px 20px;
background-size:24px 24px;
}
#faq dd{
font-size:14px;
line-height:24px;
text-align:justify;
margin:0 0 20px 0;
padding:20px 20px 20px 40px;
background:#ffffff url(../img/faq_a.png) no-repeat 10px 20px;
background-size:24px 24px;
}
}

/* ----------------------- CSS Information 
 Style Info: CONTACT
--------------------------------------- */
#contact{padding:0 0 120px 0;background:#f6f6f5;}
#contact .wrapper{
width:100%;
max-width:960px;
margin:0 auto;
padding:0 30px;
box-sizing:border-box;
}
#contact img{width:100%;margin:0 auto;border-radius:10px;overflow:hidden;}
@media only screen and (max-width:750px){
#contact{padding:0 0 40px 0;}
#contact .wrapper{padding:0 20px;}
#contact img{width:100%;max-width:670px;}
}

/* ---------------------- CSS Information 
 Style Info: PROFILE
--------------------------------------- */
#profile{
padding:120px 0;
background:#ffffff url(../img/bg_profile.png) no-repeat center top;
background-size:100% auto;
}
#profile .wrapper{padding:0 30px;}
#profile .profile_name{
position:relative;
display:block;
margin:-20px 30px 0 30px;
padding:5px 30px;
font-size:18px;
line-height:30px;
font-weight:bold;
text-align:center;
color:#ffffff;
background:#5ed4ca;
box-sizing:border-box;
border-radius:20px;
z-index:10;
}
#profile .text{
margin:0;
padding:30px 0;
width:100%;
font-size:16px;
line-height:30px;
text-align:justify;
box-sizing:border-box;
}
#profile .text p{margin:0;padding:0 0 20px 0;}
#profile .text ul{margin:0 0 20px 0;}
#profile .text ul li{padding:0;}
#profile img{width:100%;max-width:900px;}
#profile img.book{width:240px;}
@media only screen and (max-width:750px){
#profile{padding:40px 0;}
#profile .wrapper{padding:0 20px;}
#profile .profile_name{
margin:-15px 20px 0 20px;
padding:5px 30px;
font-size:16px;
line-height:20px;
border-radius:15px;
}
#profile .text{
padding:20px 0;
font-size:14px;
line-height:20px;
}
#profile .text p{}
#profile .text ul{margin:0 0 20px 0;}
#profile .text ul li{padding:0;}
#profile img.book{width:60%;max-width:350px;margin:0 auto;}
#profile img.book.pc{display:none;}
}

/* ---------------------- CSS Information 
 Style Info: FOOTER
--------------------------------------- */
footer{
width:100%;
margin:0;
padding:40px 20px;
text-align:center;
color:#cccccc;
background:#111111;
box-sizing:border-box;
}
footer a:link{color:#cccccc;text-decoration:none;}
footer a:hover{color:#cccccc;text-decoration:underline;}
footer a:visited{color:#cccccc;text-decoration:none;}
footer a:active{color:#cccccc;text-decoration:none;}
#fnav{
margin:0 auto 40px auto;
padding:0;
text-align:center;
}
#fnav ul{
text-align:center;
list-style-type:none;
padding:0;
}
#fnav li{
display:inline-block;
/display:inline;
/zoom:1;
margin:0 20px 0 0;
padding:0 0 0 8px;
text-align:center;
font-size:12px;
line-height:20px;
border-left:2px solid #fac500;
}
#fnav li:last-child{margin:0;}
address{
display:block;
margin:0;
padding:0;
text-align:center;
font-size:12px;
line-height:20px;
}
@media only screen and (max-width:768px){
footer{padding:40px 20px 100px 20px;}
nav ul{line-height:30px;}
#fnav li{
display:block;/display:block;
margin:0 0 20px 0;
text-align:left;
}
}

/* ----------------------- CSS Information 
 Style Info: FADEIN
--------------------------------------- */
.fadein{opacity:0;transition:all ease 1s;}
.fadein.scrollin{opacity:1;}
/*左から----------*/
.fadein_left{opacity:0;transform:translateX(-40px);transition:all 1s;}
.fadein_left.scrollin{opacity:1;transform:translateX(0);}
/*右から----------*/
.fadein_right{opacity:0;transform:translateX(40px);transition:all 1s;}
.fadein_right.scrollin{opacity:1;transform:translateX(0);}
/*上から----------*/
.fadein_top{opacity:0;transform:translateY(-20px);transition:all 1s;}
.fadein_top.scrollin{opacity:1;transform:translateY(0);}
/*下から----------*/
.fadein_bottom{opacity:0;transform:translateY(20px);transition:all 1s;}
.fadein_bottom.scrollin{opacity:1;transform:translateY(0);}

/* ----------------------- CSS Information 
 Style Info: btn_fixed
--------------------------------------- */
#btn_fixed{
position:fixed;
bottom:10px;
right:10px;
width:80px;
height:80px;
cursor:pointer;
z-index:100;
border-radius:8px;
background:#ffffff;
overflow:hidden;
}
#btn_fixed img{
width:100%;
box-shadow:0px 0px 4px 0px rgba(0,0,0,0.5);
}
#btn_fixed img:hover{opacity:0.5;}

/* ----------------------- CSS Information 
 Style Info: SPECIAL
--------------------------------------- */
#special{
margin:60px auto;
padding:0;
}
.present_box{
display:flex;
align-items:center;
margin:0 30px 30px 30px;
padding:40px;
border-radius:10px;
background:#fdece9;
box-sizing:border-box;
}
.present_box:last-child{margin:0 30px 0 30px;}
.present_box .textbox{width:63.4%;}
.present_box .textbox img{width:100%;max-width:520px;margin:0 auto 0 0;}
.present_box .text{padding:30px 0 0 0;}
.present_box .text dl{margin:0 0 30px 0;}
.present_box .text dt{
width:100%;
max-width:300px;
margin:0 auto 10px 0;
padding:0 10px;
font-weight:bold;
color:#ffffff;
text-align:center;
border-radius:15px;
background:#ee7c6c;
box-sizing:border-box;
}
.present_box .text dd{
position:relative;
font-weight:bold;
padding:0 0 0 15px;
}
.present_box .text dd:before{
content:"";
position:absolute;
top:10px;
left:0;
width:10px;
height:10px;
border-radius:5px;
background:#ee7c6c;
}
.present_box .imgbox{width:36.5%;max-width:300px;}
.present_box .imgbox img{width:100%;margin:0 0 0 auto;padding:0 0 0 40px;box-sizing:border-box;}
.present_text_img{width:100%;max-width:750px;margin:60px auto 0 auto;}
@media only screen and (max-width:750px){
#present{padding:40px 0 40px 0;}
.present_box{
flex-direction:column-reverse;
margin:0 10px 20px 10px;
padding:20px;
}
.present_box:last-child{margin:0 10px 0 10px;}
.present_box .textbox{width:100%;}
.present_box .textbox img{max-width:630px;}
.present_box .text{padding:20px 0 0 0;}
.present_box .text dl{margin:0 0 20px 0;}
.present_box .text dd{}
.present_box .text dd:before{top:7px;}
.present_box .imgbox{width:100%;max-width:100%;}
.present_box .imgbox img{width:50%;max-width:300px;margin:0 auto;padding:0 0 20px 0;box-sizing:border-box;}
.present_text_img{margin:30px auto 0 auto;}
}