@charset "utf-8";

/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 全体のスタイル 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/

/*===========================
変数設定
===========================*/
:root {
--main-color:#288ead;
--light-color:#e4f6fc;
--sub-color:background:rgba(97,187,215,1);
--grade-color: linear-gradient(90deg, rgba(12,125,161,1) 0%, rgba(59,163,195,1) 100%);
}



/*===========================
初期設定
===========================*/

html{
font-size:62.5%;
}
body{
font-family: source-han-sans-japanese, sans-serif;
-webkit-overflow-scrolling: touch;
color:#22393f;
}

.pc_none{
	display: none;
}
.sp_block{
	display:inline-block;
}

.pc-display{
display:block!important;	
}

.sp-display{
display:none!important;
}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 #header01 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/



#header01{
background:url("../images/header01-bg.png") no-repeat center center;
background-size:cover;
padding:60px 0 60px 0;
}


/*===========================
#header01 ul.for
===========================*/


#header01 h3.for{
display: flex;
justify-content: center;
align-items: center;  /* 子要素をflexboxにより中央に配置する */
flex-wrap: wrap;
padding:0 0px 20px 0;
}

#header01 h3.for div{
font-size:17px;
font-weight:600;
background:#fff;
margin:0 10px 0 0;
padding:4px 25px 7px;
color:var(--main-color);

}


#header01 h3.for div:last-child{
margin:0 0px 0 0;
}


/*===========================
#header01 .catch
===========================*/


#header01 .catch{
display: flex;
justify-content: center;
flex-wrap: wrap;

}

#header01 .catch .text{
background:#fff;
font-weight: 700;
font-style: normal;
font-size:60px;
color:var(--main-color);
border-top-color:var(--main-color);
border-top-style:solid;
border-top-width:2px;
border-left-color:var(--main-color);
border-left-style:solid;
border-left-width:2px;

display: flex;
padding:10px 10px 10px 10px;

}


#header01 .catch .text:last-child{
border-right-style:solid;
border-right-width:2px;
border-bottom-color:var(--main-color);
}

#header01 .catch:last-child .text{
border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:var(--main-color);
}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 #header02 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


#header02{
background:url("../images/header01-bg.png") no-repeat center center;
background-size:cover;
padding:80px 0 80px 0;
}

#header02 .box-wrapper{
width:1024px;
background:rgba(255,255,255,0.9);
margin:0 auto;
position: relative;
box-shadow: 0px 0px 0px 6px #fff ;
border-color:var(--main-color);
border-style:solid;
border-width:2px;
}


/*===========================
#header02 .box-wrapper h3
===========================*/



#header02 .box-wrapper h3{
font-size:24px;
padding:13px 30px 16px;
width:400px;
margin:-30px auto 25px;
transform: skew(-15deg);
background:var(--main-color);
color:#fff;
text-align:center;
}

#header02 .box-wrapper h3 span{
display:block;
transform: skew(15deg);

}
/*===========================
#header02 .box-wrapper h2
===========================*/


#header02 .box-wrapper h2{
padding:0px 15px 35px 15px;
letter-spacing:2px;
font-size:65px;
font-weight:900;
text-align:center;
color:var(--main-color);
}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 #header03 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/



#header03 .wrapper{
background:var(--sub-color);
position:relative;
}

/*===========================
#header03 .inner
===========================*/
#header03 .inner{
width:1100px;
margin:0 auto 20px;

}

#header03 .inner img{
width:100%;
height:auto;
}

/*===========================
#header03 .text
===========================*/


#header03 .wrapper .text{
width:100%;
position:absolute;
bottom:-40px;
display: flex;
justify-content: center;
align-items: center;  /* 子要素をflexboxにより中央に配置する */
flex-wrap:nowrap;
}

#header03 .wrapper .text h2{
font-size:26px;
padding:5px 20px 8px 20px;
font-weight:700;
background:var(--main-color);;
color:#fff;
width:400px;
text-align:center;
border-radius:30px;
letter-spacing:1px;
position:static;
z-index:2;
}


#header03 .wrapper .text h3{
font-size:23px;
text-align:center;
width:150px;
height:150px;
border-radius:90px;
background:rgba(255,255,255,0.9);
border-style:solid;
border-width:3px;
border-color:var(--main-color);;
color:var(--main-color);;
display: flex;
justify-content: center;
align-items: center;  /* 子要素をflexboxにより中央に配置する */
position:static;
z-index:1;

}

#header03 .wrapper .text h3:first-child{
margin:0 -10px 0 0;
}

#header03 .wrapper .text h3:last-child{
margin:0 0 0 -10px;
}



/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 #header04 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/




/*===========================
.header04-slider
===========================*/

.header04-slider{
width:100%;	
}

.header04-slider li{
list-style-type:none;
}

.header04-slider li{
list-style-type:none;
}

.header04-slider img{
width:100%;
height: auto;
}


/*===========================
#header04 .box h3
===========================*/

#header04 .box-wrapper{
width:100%;
background:var(--grade-color);;
padding:30px 0 30px 0;
position:relative;
z-index:1;
}
#header04 .box-wrapper:before{
content:"DANCE\A CHOREOGRAPHY";
white-space:pre;
font-size:100px;
font-weight:900;
line-height:1.0;
color:var(--light-color);
opacity:0.15;
position:absolute;
bottom:10%;
left:10%;
z-index:2;
}

/*===========================
#header04 .box h3
===========================*/
#header04 .box{
width:1024px;
background:none;
margin:0 auto;
position: relative;
box-shadow: 0px 0px 0px 6px #fff ;
border-style:solid;
border-width:2px;
border-color:var(--main-color);
z-index:3;
}


#header04 .box-wrapper h3{
font-size:24px;
padding:13px 30px 16px;
width:400px;
margin:-50px auto 25px;
transform: skew(-15deg);
border-style:solid;
border-width:2px;
border-color:var(--main-color);
box-shadow: 0px 0px 0px 4px #fff;
background:var(--main-color);
color:#fff;
text-align:center;
}

#header04 .box-wrapper h3 span{
display:block;
transform: skew(15deg);

}
/*===========================
#header04 .box-wrapper h2
===========================*/


#header04 .box-wrapper h2{
padding:0px 15px 35px 15px;
letter-spacing:2px;
font-size:65px;
font-weight:900;
text-align:center;
color:#fff;;
}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 #second01 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


#second01{
padding:0px 0 50px 0;
}
#second01 h2{
font-size:45px;
color:#fff;
width:400px;
margin:-20px auto 0;
background:var(--main-color);
font-weight:700;
line-height:1.2;
letter-spacing:0px;
padding:15px 1% 15px 1%;
text-align:center;
transform: skew(-15deg);
}

#second01 h2 span{
display:block;
transform: skew(15deg);
}

#second01 h2 span.small{
font-size:0.75em;
}

#second01 p.sub{
font-size:24px;
line-height:1.35;
font-weight:bold;
padding:10px 1% 0px 1%;
text-align:center;
}

#second01 p.explain{
font-size:20px;
width:600px;
background:var(--light-color);
color:#023a95;
border-radius:30px;
line-height:1.35;
font-weight:bold;
padding:10px 20px 12px 20px;
text-align:center;
margin:15px auto 0;
}

/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 #second02 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


#second02{
padding:0px 0 0px 0;
}
#second02 h2{
font-size:65px;
color:var(--main-color);
font-weight:700;
line-height:1.2;
letter-spacing:0px;
padding:15px 1% 15px 1%;
text-align:center;
}

#second02 h2 span.small{
font-size:0.75em;
}

#second02 p.sub{
font-size:24px;
line-height:1.35;
font-weight:bold;
padding:0px 1% 0px 1%;
text-align:center;
}

#second02 p.explain{
font-size:20px;
width:600px;
background:var(--light-color);
color:var(--main-color);
border-radius:30px;
line-height:1.35;
font-weight:bold;
padding:10px 20px 12px 20px;
text-align:center;
margin:15px auto 0;
}



/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 section01.html 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/



/*===========================
.title01 背景色
===========================*/

.title01{
margin:60px auto 0;
background:var(--main-color);
padding:30px 0 30px 0;
text-align:center;
color:#fff;
}



/*===========================
.title01 h2,h3
===========================*/
.title01 h2{
font-size:42px;
margin:20px 0 0 0;
line-height:1.35;
font-weight: 700;
font-style: normal;
}


.title01 h3{
font-size:25px;
margin:10px 0 0 0;
line-height:1.35;
font-weight: 700;
font-style: normal;
}


.title01 .caption{
font-size:17px;
font-weight: 500;
margin:0 0 0 0;
padding:0 0px 5px 0px;
}

.title01 .caption-border {
width:100px;
margin:0 auto;
text-align:center;
background-color:var(--light-color); /* 線色 */
border-radius: 5px; /* 線幅の半分 */
opacity:0.3;
content: "";
display: block;
height: 3px; /* 線幅 */
}


/*===========================
.inner01
===========================*/

.inner01{
width:1100px;
margin:0 auto;
padding:40px 0 0 0;
}

.inner01:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

.inner01 img.thumb{
width:440px;
height: auto;
display: block;
margin:30px auto 20px;
float:left;
}

.inner01 .sentence{
width:600px;
float:left;
margin:0 0 0 60px;
padding:180px 0 10px 0px;
}
.inner01 .sentence p{
font-size:16px;	
line-height:2.0;
font-family: source-han-sans-japanese, sans-serif;
font-weight: 500;
font-style: normal;
color:#000;
}

/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 section02.html 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


/*===========================
.title02 背景色
===========================*/

.title02{
margin:60px auto 0;
background:var(--main-color);
padding:30px 0 30px 0;
text-align:center;
color:#fff;
}



/*===========================
.title02 h2,h3
===========================*/


.title02 h3{
text-align: center;
padding: 10px 15px;
width: 270px;
border: solid 2px #fff;
transform: skew(-15deg);
margin: 0 auto 5px;
color: #fff;
font-weight: bold;
font-size: 20px;
}



.title02 h3 span{
display: block;
transform: skew(15deg);
}

.title02 h2{
font-size:42px;
margin:10px 0 10px 0;
line-height:1.35;
font-weight: 700;
font-style: normal;
}


.title02 .caption{
font-size:17px;
font-weight: 500;
margin:0 0 0 0;
padding:0 0px 5px 0px;
}




/*===========================
.inner02
===========================*/

.inner02{
width:1100px;
margin:0 auto;
padding:40px 0 0 0;
display: flex;
justify-content: center;
align-items: center;  /* 子要素をflexboxにより中央に配置する */
flex-wrap:nowrap;
}


.inner02 img.thumb{
width:45%;
height: auto;
margin:0px 5% 0 0;
box-shadow: 15px 20px 0px 0px var(--sub-color);
}

.inner02 img.thumb:last-child{
margin:0px 0px 0 0;
}

.inner02 .sentence{
width:800px;
margin:30 auto 0;
padding:0px 0 0px 0px;
line-height:2.0;
}

.inner02 .sentence p{
font-size:16px;	
font-weight: 500;
font-style: normal;
color:#000;
padding:10px 0 10px 0;
}








/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 section03.html 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


/*===========================
.title03 h2,h3
===========================*/

.title03{
height:400px;
margin:180px 0 0 0;
width:100%;
background:url("../images/section03.jpg") no-repeat center center;
background-size: cover;


}

.title03 .bg-color{
width:100%; 
height:100%;
background:rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;  /* 子要素をflexboxにより中央に配置する */
flex-wrap:nowrap;
text-align: center;
position:relative;
}

.title03 .icon{
position:absolute;
top:-110px;
}

.title03 .icon .catch{
font-size:22px;
font-weight:500;
color:var(--main-color);
text-align:center;
}

.title03 .icon .mark{
width:100px;
height:100px;
font-size:70px;
font-weight:500;
padding:0 0 10px 0;
margin:0 auto 0;
background:var(--main-color);
color:#fff;
display: flex;
justify-content: center;
align-items: center;  /* 子要素をflexboxにより中央に配置する */
flex-wrap:nowrap;
text-align: center;
}

.title03 .icon .semi{
font-size:22px;
letter-spacing:10px;
text-shadow:0px 0px 3px #000;
color:#fff;
text-align:center;
font-weight:500;
}

.title03 h2{
font-size:40px;
padding:30px 0 0 0;
text-shadow:0px 0px 3px #000;
color:#fff;
}

.title03 h2 span{
display:block;
}


/*===========================
.inner03
===========================*/

.inner03{
width:100%;
margin:0 auto;
padding:0 0 0 0;

}


.inner03 .sentence{
width:1000px;
margin:30px auto 0;
padding:0px 0 0px 0px;
line-height:2.0;
}

.inner03 .sentence h4{
font-size:30px;
color:var(--main-color);
line-height:1.4;
}

.inner03 .sentence p{
font-size:16px;	
font-weight: 500;
font-style: normal;
color:var(--sub-color);
padding:10px 0 10px 0;
}



/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 section04.html 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/

.title04{
margin:60px auto 0;
width:1000px;
}
/*===========================
.title04 h2,h3
===========================*/


.title04 h2{
text-align: center;
color:var(--main-color);
font-weight: 700;
font-size: 25px;
margin:0 0 20px 0;
}

.title04 h2:before,
.title04 h2:after{
content:"";
background:var(--main-color);
border-radius:30px;
height:18px;
width:2px;
display: inline-block;

}

.title04 h2:before{
transform: skew(20deg);
position:relative;
top:1px;
left:-11px;
}

.title04 h2:after{
transform: skew(-20deg);
position:relative;
top:1px;
left:11px;
}

.title04 .box:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}


.title04 .box{
position:relative;
}

.title04 img{
width:58%;
height:auto;
display:block;
margin:0 0 0 0;
position:relative;
z-index:1;
}

.title04 p{

border-style:solid;
border-width:2px;
border-color:var(--main-color);
background:var(--main-color);
opacity:0.9;
padding: 30px 30px 30px 30px;
position:absolute;
right:0px;
top:40px;
width:58%;
box-shadow: 0px 0px 0px 2px #fff inset;
color:#fff;
font-weight:500;
letter-spacing: 0px;
text-align:center;
z-index:2;
}

.title04 p .job{
font-size:20px;
border:solid 2px #fff;
padding:10px 20px;
border-radius:40px;
display:block;
width:70%;
margin:10px auto 10px;

}

.title04 p .semi{
font-size:30px;
display:block;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight:700;
}

.title04 p .name{
font-size: 57px;
display:block;
font-weight:700;
transform: skew(-15deg);
}

.title04 p .text{
font-size: 18px;
display:block;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight:700;

}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 section05.html 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/

/*===========================
.section05-slider
===========================*/

.section05-slider{
width:1100px;
margin:50px auto 50px;
}




.section05-slider li{
margin:0 20px 0 20px;	
}

.section05-slider li img{
width:100%;
height:auto;
display:block;
}

.section05-slider li p.name{
font-size:26px;
padding:15px 0 5px 0;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
color:var(--main-color);
}

.section05-slider li p.text{
font-size:18px;
padding:5px 0 5px 0;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
color:var(--sub-color);
}


/*===========================
.section05-slider .slick-next
===========================*/

.section05-slider .slick-next {
right: -20px!important;
z-index: 99;
top:150px!important;	
}

.section05-slider .slick-prev {
left: -20px!important;
z-index: 100;
top:150px!important;	
}

.section05-slider .slick-prev,
.section05-slider .slick-next{
width:60px!important;
height: 60px!important;
border:solid 4px var(--main-color)!important;
border-radius:60px!important;
opacity: 0.8;
color:var(--main-color)!important;
font-size: 30px!important;
font-weight:bold!important;
line-height:50px!important;    
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: transparent;
text-align: center;
text-decoration:none;	
}

.section05-slider .slick-prev a,
.section05-slider .slick-next a{
display: block;
width:60px;
height: 60px;
text-decoration:none;	
}

.section05-slider .slick-prev:before,
.section05-slider .slick-next:before{
display:none!important;
}

/*===========================
.section05-slider .slick-dots
===========================*/


.section05-slider .slick-dots li{
width: 20px;
height: 20px;
margin:0 5px 0 5px;	
}

.section05-slider .slick-dots li button:before{
 font-size: 20px;
 line-height: 20px;
 width: 0px;
 height: 20px; 
}

.section05-slider .slick-dots li button{
width:20px;
height:20px;
}
.section05-slider .slick-dots li.slick-active button:before{
opacity: .75;
color:var(--main-color)!important;
}


#works .inner {
width:1100px;
margin:30px auto 0;
}


#works .inner p.sentence{
font-family: source-han-sans-japanese, sans-serif;
font-weight: 400;
font-style: normal;
font-size:16px;
line-height:1.75;
padding:15px 0 15px 0;
}





/*===========================
.title09 背景色
===========================*/

.title09{
margin:60px auto 0;
background:var(--main-color);
padding:30px 0 30px 0;
text-align:center;
color:#fff;
}

.title09 .sub{
font-size:20px;
width:300px;
padding:12px 20px 12px;
border:solid 3px #fff;
border-radius:30px;
margin:0 auto 10px;
text-align:center;
}

.title09 h2{
padding:0px 5% 20px 5%;
color:#fff;
font-size:45px;
line-height:1.3;
}



/*===========================
.title10
===========================*/

.title10{
margin:60px auto 0;
background: rgb(50,175,209);
background: linear-gradient(90deg, rgba(50,175,209,1) 0%, rgba(91,165,185,1) 100%);
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
}

.title10 .semi{
padding:30px 0 8px 0;
font-size:24px;
color:#fff;
text-align:center;
font-weight:700;
}

.title10 .sub{
width:400px;
font-size:25px;
margin:0 auto 10px;
font-weight:700;
color:#fff;
padding:5px 20px 7px;
border:solid 2px #fff;
border-radius:30px;
text-align:center;
}

.title10 h2{
padding:0px 5% 30px 5%;
font-size:45px;
line-height:1.25;
color:#fff;
font-weight:700;
text-align:center;
}



/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 target01 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


/*===========================
#target01 ul.checklist
===========================*/


#target01 ul.checklist{
width:1100px;
margin:0 auto 0;
}

#target01 ul.checklist:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

#target01 ul.checklist li{
float:left;
width:535px;
font-size:23px;
line-height:1.35;
padding:27px 20px 27px 60px;
margin:30px 30px 0 0;
background:url(../images/icon-target01.png) no-repeat 20px 25px;
background-size:35px 35px;
list-style-type:none;
font-weight: 500;
font-style: normal;
border:solid 2px #000;
box-shadow:5px 5px 0px 0px var(--main-color);
}

#target01 ul.checklist li:nth-child(2n){
margin:30px 0px 0 0;
}

#target01 ul.checklist li:nth-child(5){
width:1100px;
margin:30px 0px 0 0;
}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 target02 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/



#target02{
background:var(--light-color);
margin:140px 0 0;
padding:45px 0 30px 0;
}

/*===========================
#target02 .target-title
===========================*/


#target02 h2.target-title{
text-align:center;
margin:-140px auto 0;
}
#target02 h2.target-title img{
width:800px;
height:auto;
display:block;
margin:0 auto 0;
padding:0 0 30px 0;
line-height:0;

}


/*===========================
#target02 ul.checklist
===========================*/

#target02 ul.checklist{
width:960px;
margin:0 auto 30px;
padding:25px 25px 25px 25px;
background:#fff;
border-style:solid;
border-width:2px;
border-color:var(--main-color);
}


#target02 ul.checklist li{
color:var(--main-color);
font-size:22px;
line-height:1.3;
padding:15px 0 18px 43px;
border-bottom:solid 1px #bfbfbf;
list-style:none;
background:url(../images/icon-target.png) no-repeat 0 15px;
background-size:30px 30px;
font-weight: 700;
font-style: normal;
}


/*===========================
ギザギザのライン
===========================*/


#target02 ul.checklist li .stripe{ 
position: relative;
padding: 0.2em;
}
#target02 ul.checklist li .stripe:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: repeating-linear-gradient(-45deg, #fff873, #fff873 2px, white 2px, white 4px);
opacity:0.8;
}





/*===========================
#target02 .explain p
===========================*/
#target02 .explain p{
font-size:28px;
line-height:1.6;
margin:0 auto 25px;
color:var(--main-color);
padding:0 3%;
text-align:center;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
}





/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 PLAN01　〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


/*===========================
#plan01 table 
===========================*/

#plan01 table{
border-collapse: collapse;
margin:70px auto 70px;
padding: 0;
width: 850px;
table-layout: fixed;
}



#plan01 table  tr {
background-color:var(--light-color);
padding:.35em;
border-bottom: 2px solid #fff;
}
#plan01 table  th,
#plan01 table  td {
padding: 1em 10px 1em 1em;
border-right: 2px solid #fff;
}
#plan01 table  th {
font-size:22px;
}
#plan01 table  thead tr{
background-color:var(--main-color);
color:#fff;
}
#plan01 table  tbody th {
background: #78bbc7;
color: #fff;
}
#plan01 table  .txt{
text-align: left;
font-size:18px;
}
#plan01 table  .price{
font-size:20px;
text-align: right;
color:var(--main-color);
font-weight: bold;
}
#plan01 table  .non{
background:#fff
}



/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 PLAN02　〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


/*===========================
#plan02 table
===========================*/

#plan02 table {
border-collapse: collapse;
margin:70px auto 70px;
padding: 0;
width: 850px;
table-layout: fixed;
}

#plan02 table tr {
background-color: #fff;
padding: .35em;
border: 2px solid #eee;
}
#plan02 table tr:last-child{
border: none;
}
#plan02 table th{
padding: 2em;
border-right: 2px solid #fff;
}
#plan02 table td {
font-size:18px;
padding: 2em .5em;
border-right: 2px solid #eee;
text-align: center;
}
#plan02 table th {
font-size:20px;
}
#plan02 table thead tr{
background-color: #50535d;
color:#fff;
}
#plan02 table tbody th {
border-right: 2px solid #eee;
}
#plan02 th.non {
border-right: none;
}
#plan02 .txt{
text-align: left;

}
#plan02 .price{
color: #000;
font-weight: bold;

}
#plan02 .price span {
font-size:15px;
}
#plan02 .red_bk{
background:#e81010
}
#plan02 .red-txt{
color:#e81010
}

/*===========================
#plan02 .btn
===========================*/


#plan02 .btn{
background:#e81010;
border: 2px solid #e81010;
color:#fff;
padding: 1em;
border-radius:30px;
display:block;
text-decoration:none;
font-size:18px;
}

#plan02 .btn:before {
content: "\226B";
font-size: 0.9em;
}

#plan02 .btn:hover{
background: #fff;
border: 2px solid #e81010;
color: #e81010;
transition: .2s;
}
#plan02 table .btnarea td {
padding: .2em .5em;
border-right:none
}



/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 PLAN03　〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/




/*===========================
#plan03 .flexbox
===========================*/


#plan03 .flexbox {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
width:800px;
margin:70px auto 70px;
-webkit-flex-direction: row;
flex-direction: row;
}


#plan03 .plan-table{
width:47.5%;
margin-left: 3%;
}
/*===========================
#plan03 table
===========================*/

#plan03 table {
border-bottom: 1px solid #ddd;
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
-webkit-overflow-scrolling: touch;
}

#plan03 .plan-table:first-of-type {
margin-left: 0;
}


#plan03 th, 
#plan03 td {
padding: 15px;
text-align: center;
vertical-align: top;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
}
#plan03 tr:nth-child(even)>td,
#plan03 tr:nth-child(even)>th {
background-color: #efefef;
}


#plan03 th{
font-size:20px;
color: #fff;
font-weight:700;
}

#plan03 td {
font-size:17px;
}

#plan03 .plan-price {
color: #fff;
font-weight:700;
font-size:28px;
border-top: 1px solid rgba(255,255,255,.2);
padding: 25px 0;
}
#plan03 .plan-price span {
font-size: 1rem;
}

/* Background colour */
#plan03 .plan-free th,
#plan03 .plan-free .plan-price {
background: linear-gradient(-90deg, #009ADB, #00DB9A);
}
#plan03 .plan-premium th,
#plan03 .plan-premium .plan-price {
background:var(--grade-color);
}

/*===========================
#plan03 .btn
===========================*/

#plan03 .btn:before {
content: "\226B";
font-size: 0.9em;
}

#plan03 .btn{
color: #fff;
font-size:17px;
text-decoration: none;
background: #0f9015;
border-radius: 5px;
box-shadow: 0 3px #105813;
position: relative;
display: inline-block;
top: -2px;
padding: 15px;
width: 80%;
text-align: center;
margin: 10px 0;
}
#plan03 .btn:hover {
box-shadow: 0 1px #449f49;
top: 1px;
}





/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 POINT01 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/

#point01{
padding:0 0 40px 0;
}

/*===========================
#point01 .box-wrapper
===========================*/


#point01 .box-wrapper{
width:1100px;
padding:30px 0 0px 0;
margin:0 auto;
display:flex;
justify-content: center;
flex-wrap:nowrap;

}




/*===========================
#point01 .box
===========================*/


#point01 .box-wrapper .box{
border:solid 2px var(--main-color);
align-items: baseline;
width:31%;
margin:60px 3.5% 0 0;
}

#point01 .box-wrapper .box:nth-child(3n){
margin:60px 0px 0 0;
}


/*===========================
#point01 h3
===========================*/


#point01 .box h3{
background:var(--grade-color);
width:270px;
padding:8px 15px 10px;
margin:-25px auto 10px;
line-height:1.2;
color:#fff;
text-align:center;
display:block;
transform: skew(-15deg);

}

#point01 .box h3 span.text{
font-size:27px;
letter-spacing:-1px;
font-family: fot-tsukuardgothic-std, sans-serif;
transform: skew(15deg);
font-weight: 700;
font-style: normal;
display: inline-block;
}

#point01 .box h3 span.mark{
color:var(--main-color);
margin-right: 5px;
position:relative;
top:-3px;
width: 30px;
line-height: 30px;
height: 30px;
font-size: 16px;
letter-spacing:-1px;
transform: skew(15deg);
display: inline-block;
font-weight: 900;
font-style: italic;
font-style: normal;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fff;
text-align: center;
}

/*===========================
#point01 .thumb
===========================*/

#point01 .box-wrapper .box .thumb{
position: relative;
padding:0 0 20px 0;
}
#point01 .box-wrapper .box .thumb img{
width:90%;
height:auto;
display:block;
margin:0 auto;
position:relative;
z-index:1;
}

#point01 .box-wrapper .box .thumb .en{
font-size:40px;
color:var(--main-color);
opacity:0.8;
transform: skew(-15deg);
position:absolute;
bottom:-0px;
right:20px;
z-index:2;
font-weight:900;

}

#point01 .box .sentence h4{
font-size:27px;
color:var(--main-color);
padding:10px 25px 0px;
font-weight:700;
letter-spacing:-1px;
}

/*===========================
#point01 .sentence
===========================*/
#point01 .box .sentence p{
font-size:15px;
color:var(--sub-color);
line-height:1.85;
padding:10px 25px 20px;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 POINT02 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/
#point02{
margin:0px auto 0px;
}

/*===========================
#point02 .box-wrapper
===========================*/

#point02 .box-wrapper{
width:1100px;
margin:0 auto;
padding:20px 0px 25px;
}


/*===========================
#point02 .box
===========================*/

#point02 .box-wrapper .box{
margin:85px auto 0;
padding:0 30px 30px 30px;
border-style:solid;
border-width:3px;
border-color:var(--main-color);

}

#point02 .box-wrapper .box:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}


/*===========================
#point02 .boxの「特徴」の球体部分
===========================*/


#point02 .box-wrapper .box h4.number{
border:solid 2px #fff;
background:var(--grade-color);
box-shadow:0px 0px 0px 2px var(--main-color);
width:100px;
height:100px;
margin:-50px auto 10px;
border-radius:100px;
color:#fff;
text-align:center;
padding:14px 0 0 0;
line-height:1.0;
font-weight:normal;
}

#point02 .box-wrapper .box h4.number .small{
font-size:16px;
text-indent:-4px;
letter-spacing:-1px;
font-weight: 700;
}

#point02 .box-wrapper .box h4.number .big{
font-size:49px;
letter-spacing:-1px;
text-indent:-4px;
font-weight: 500;
}




/*===========================
#point02 .box .thumb
===========================*/
#point02 .box-wrapper .box img{
display:block;
float:left;
width:35%;
height:auto;
margin:5px auto 0px;
}

/*===========================
#point02 .box h3,sentence
===========================*/



#point02 .box-wrapper .box h3{
width:60%;
font-size: 32px;
color:var(--main-color);
line-height:1.2;
padding:10px 0px 10px 25px;
letter-spacing:-1px;
float:left;
}


#point02 .box-wrapper .box .sentence{
width:60%;
padding:10px 0px 10px 25px;
float:left;
font-size: 17px;
line-height:1.65;
font-weight: 500;
}




/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 VOICE01　〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


#voice01{
background:#e7faff;
font-family: fot-tsukuardgothic-std, sans-serif;

}

/*===========================
#voice01 .box
===========================*/


#voice01 .box-wrapper .box:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

#voice01 .box-wrapper .box{
width:964px;
margin:18px auto 18px;
padding:0 0 20px 0;
border-bottom:solid 1px #bad7df;
}

#voice01 .box-wrapper .box .left{
float:left;
width:22%;
margin:0 3% 0 0;
}
#voice01 .box-wrapper .box .person img{
float:none;
width:100%;
height:auto;
margin:0 0 0 0;
}

#voice01 .box-wrapper .box .person .text{
float:none;
width:100%;
}



#voice01 .box-wrapper .box .person .text p{
color:#8c8774;
font-size:14px;
line-height:1.2;
text-align:center;
}

#voice01 .box-wrapper .box .sentence h3{
color:#5ba5b9;
font-size:32px;
padding:0 0 10px 0;
font-weight: 700;
}

#voice01 .box-wrapper .box .sentence{
position: relative;
float:left;
width:75%;
margin-top: 14px;
padding: 22px 3.5% 29px 3.5%;
background-color: #fff;
color:#585858;
font-size:19px;
letter-spacing:-0.5px;
line-height:1.5; 

}

#voice01 .box-wrapper .box .sentence:before {
content: "";
position: absolute;
top: 70px;
left: -45px;
border: 20px solid transparent;
border-right: 25px solid #fff;
}

#voice01 p.catch{
color:#5ba5b9;
font-weight:700;
font-size:30px;
padding:40px 2% 50px;
text-align:center;
line-height:1.5;
}





/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 FAQ01　〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/




/*===========================
#faq01 .accordion
===========================*/


#faq01 .accordion{
width:1000px;
padding:0px 0px 10px;
margin:0 auto;
}

/*===========================
#faq01 .accordion li
===========================*/

#faq01 .accordion li{
border-width:3px;
border-style:solid;
border-color:var(--main-color);
background: #ffffff;
margin-top:20px;
border-radius: 10px;
font-weight: 700;
font-style: normal;
overflow: hidden;
}




#faq01 .trigger:hover,
#faq01 .accordion .trigger.active{
background:var(--light-color);
}




/*===========================
#faq01 .accordion .trigger
===========================*/


#faq01 .accordion .trigger {
font-size: 18px;
padding: 24px 40px 24px 40px;
color:var(--main-color);
position: relative;
font-weight: bold;
cursor: pointer;
line-height:2.0;
}

#faq01 .accordion .trigger span.icon-q{
background:var(--main-color);
padding:3px 10px 5px 10px;
border-radius:100px;
color:#fff;
margin:0 10px 0 0;
}





#faq01 .accordion .trigger::after, 
#faq01 .accordion .trigger.active::after {
font-size: 40px;
line-height: 1;
position: absolute;
top: 35%;
right: 15px;
margin-top: -11px;
font-weight: bold;
}

#faq01 .accordion .trigger::after {
content: "\0203a";

}
#faq01 .accordion .trigger.active::after {
content: "\0203a";
transform: rotate(90deg);
animation: fadeIn 1s ease 0s 1 normal;
-webkit-animation: fadeIn 1s ease 0s 1 normal;	
}


/*===========================
#faq01 .toggle_container
===========================*/

#faq01 .toggle_container{
padding: 17px 40px 15px 40px;
position: relative;
line-height:2.0;
}

#faq01 .toggle_container p{
font-size:16px;
margin:0;
}

#faq01 .toggle_container p span.icon-a{
background:#d70a17;
line-height: 1.0;
padding:3px 10px 5px 10px;
border-radius:100px;
color:#fff;
margin:0 10px 0 0;
}




/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 FLOW01　〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


#flow01{

}

/*===========================
#flow01 .step-wrapper
===========================*/


#flow01 .step-wrapper{
padding:30px 0 0px 0;

}

/*===========================
#flow01 .step
===========================*/

#flow01 .step{
color:var(--main-color);
font-size: 55px;
line-height:0.8;
letter-spacing: -1px;
text-align:center;
font-weight:900;
font-style: normal;
width:90%;
margin:0 auto 0;
transform: skew(-10deg);

}



#flow01 img.arrow{
display:block;
width:66px;
height:auto;
margin:0 auto 20px;
line-height:0;

}



#flow01 .left:after,
#flow01 .right:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

/*===========================
#flow01 .left
===========================*/

#flow01 .left .text{
float:right;
width:500px;
height:auto;
}


#flow01 .left img{
float:left;
width:330px;
height:auto;
}


/*===========================
#flow01 .right
===========================*/


#flow01 .right .text{
float:left;
width:500px;
height:auto;
}


#flow01 .right img{
float:right;
width:330px;
height:auto;
}

/*===========================
#flow01 .box
===========================*/



#flow01 .box {
width:950px;
margin:0 auto;
background:#fff;
border:solid 2px var(--main-color);
padding:35px 35px 35px 35px;

}


#flow01 .box h3{
font-size:26px;
color:#231815;
font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
font-style: normal;
padding:0 0 20px 0;
}

#flow01 .box h3 span {
display: inline-block;
width: 33px;
line-height: 33px;
height: 33px;
font-size: 24px;	
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: var(--main-color);
color: #fff;
text-align: center;
margin-right: 5px;
position:relative;
top:1px;
}

#flow01 .box .text p{
font-family: source-han-sans-japanese, sans-serif;
font-weight: 400;
font-style: normal;
font-size:16px;
line-height:1.7;
}

/*===========================
#flow01 .addtional
===========================*/

#flow01 .addtional{
margin:30px auto 0;
text-align:center;
line-height:0;
}
#flow01 .addtional .text{
display:inline-block;
vertical-align: top;
position:relative;
top:50px;
line-height:1.75;
}

#flow01 .addtional .text .semi{
font-size:21px;
width:150px;
margin:0 auto;
padding:2px 10px;
border-radius:30px;
color: #fff;
background:var(--main-color);
text-align: center;
font-weight: 700;
font-style: normal;
}
#flow01 .addtional .text .catch{
font-size:35px;
padding:2px 10px;
line-height:1.25;
color: var(--main-color);
font-weight: 700;
font-style: normal;
text-align: center;
}


#flow01 .addtional img{
width:210px;
height:auto;

display:inline-block;
}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 #contact-explain　〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


#contact-explain{
margin:50px 0 0px 0;
}


/*===========================
#contact-explain .sentence
===========================*/


#contact-explain .sentence{
width:800px;
font-weight:500;
padding:20px 0 0px 0;
margin:0 auto;
}

#contact-explain .sentence p{
font-size:17px;
padding:10px 0 10px 0;
line-height:1.75;
}

/*===========================
#contact-explain .btn
===========================*/

#contact-explain .btn{
width:800px;
margin:0 auto;
}

#contact-explain .btn a{
background:var(--main-color);
background:var(--grade-color);
border-style:solid;
border-width:2px;
border-color:var(--main-color);
display:block;
width:100%;
font-size:20px;
margin:20px auto 20px;
padding:12px 3% 12px;
color:#fff;
text-align:center;
text-decoration:none;
box-shadow:0px 0px 0px 2px #ffffff inset;
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
font-weight:700;
}

#contact-explain .btn a img{
width:35px;
height:auto;
padding:0 8px 0 0;
position:relative;
top:4px;
display:inline;
}

#contact-explain .pc-tel{
font-size:16px;
width:90%;
display:block;
margin:0 auto 0;
text-align:center;
font-weight:500;
}