.sb_wrap{ padding:0; }
.sub_wrap, .sub_wrap *{ box-sizing:border-box; }
.sub_wrap > section{ overflow:hidden; }


/* sub01 */
#sub01{ padding:120px 20px 150px; }

.sub01_bn{ position:relative; z-index:1; padding:150px 40px; background-color:#333; background-image:url(./img/01-01.jpg); background-position:right center; background-size:cover; background-repeat:no-repeat; margin-bottom:50px; }
.sub01_bn:after{ content:''; position:absolute; z-index:5; top:0; bottom:0; left:0; right:0; background-color:#fff; -webkit-animation:0.8s slate forwards; -moz-animation:0.8s slate forwards; -o-animation:0.8s slate forwards; animation:0.8s slate forwards; }
.sub01_bn:before{ content:''; position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.4); }
.sub01_bn_txt{ position:relative; z-index:2; max-width:600px; width:100%; word-break:keep-all; }
.sub01_bn_txt > h3{ font-family:'score'; font-size:45px; font-weight:200; color:#fff; line-height:1.5em; }
.sub01_bn_txt > h3 > strong{ display:inline-block; padding:0 10px; margin:0 10px 0 0; border-radius:7px; background-color:#036eb8; }

.sub01_txt{ max-width:1250px; width:100%; margin:0 auto; text-align:center; word-break:keep-all; }
.sub01_txt > p{ font-size:25px; font-weight:300; color:#333; line-height:2em; }

@media(max-width:800px){
	#sub01{ padding:70px 15px 100px; }

	.sub01_bn{ padding:70px 20px; }
	.sub01_bn_txt{ max-width:450px; }
	.sub01_bn_txt > h3{ font-size:30px; }

	.sub01_txt > p{ font-size:20px; }
}
@media(max-width:500px){
	.sub01_bn{ background-position:right 12% top 50%; }
	.sub01_bn_txt{ text-align:center; }
	.sub01_bn_txt > h3{ font-size:25px; }
	
	.sub01_txt > p{ font-size:16px; line-height:1.7em; }
}




/* sub02 */
#sub02{ padding:0 20px 120px; }
.sub02_con{ margin-bottom:100px; }
.sub02_con:last-child{ margin-bottom:0; }
.sub02_pt_wrap{ margin:0 -25px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -ms-flex-direction:row; flex-direction:row; -webkit-box-lines:multiple; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.sub02_pt{ width:50%; padding:0 25px; }
.sub02_pt:last-child{ border-left:1px dashed #ddd; }
.sub02_pt.pt_lf{ transform:translate(-100px, 0); opacity:0; transition:0.7s transform, 0.7s opacity; }
.sub02_pt.pt_rt{ transform:translate(100px, 0); opacity:0; transition:0.7s transform, 0.7s opacity; }
.sub02_pt.act{ transform:translate(0, 0); opacity:1; }
.sub02_pt > h3{ font-family:'score'; font-size:40px; font-weight:800; color:#333; margin-bottom:30px; text-align:center; }
.sub02_pt > h3 > span{ color:#036eb8; }

.sub02_vis{ background-color:#f7f7f7; border-radius:8px; text-align:center; padding:9.5% 20px; word-break:keep-all; box-shadow:3px 3px 10px 0 rgba(0,0,0,0.1), inset -3px -3px 4px 0 rgba(0,0,0,0.2), inset 3px 3px 4px rgba(255,255,255,0.8); }
.sub02_vis > h4{ font-size:30px; font-weight:800; color:#036eb8; margin-bottom:15px; }
.sub02_vis > p{ font-size:18px; font-weight:300; color:#666; line-height:1.6em; }

.sub02_pt2_wrap{ margin:0 -15px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -ms-flex-direction:row; flex-direction:row; -webkit-box-lines:multiple; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.sub02_pt2{ width:33.33333333%; padding:0 15px; display:-webkit-box; display:-ms-flexbox; display:flex; }
.sub02_box{ width:100%; }
.sub02_ic{ max-width:160px; width:100%; margin:0 auto 20px; border-radius:100%; padding:7px; }
.sub02_ic{
	background: #4275ed; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #4275ed 0%, #b27eea 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #4275ed 0%,#b27eea 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #4275ed 0%,#b27eea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4275ed', endColorstr='#b27eea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.sub02_ic > i{ display:block; width:100%; padding-top:100%; border-radius:100%; background-color:#036eb8; box-shadow:inset -2px -2px 5px rgba(0,0,0,0.3); background-position:center; background-size:cover; background-repeat:no-repeat; }
.sub02_ic > i.ic_01{ background-image:url(./img/02-01.svg); }
.sub02_ic > i.ic_02{ background-image:url(./img/02-02.svg); }
.sub02_ic > i.ic_03{ background-image:url(./img/02-03.svg); }
.sub02_txt{ text-align:center; word-break:keep-all; }
.sub02_txt > h3{ font-size:24px; font-weight:600; color:#333; margin-bottom:10px; line-height:1em; }
.sub02_txt > p{ font-size:16px; font-weight:400; color:#666; line-height:1.6em; }

@media(max-width:850px){
	#sub02{ padding:0 15px 150px; }

	.sub02_pt_wrap{ margin:0; }
	.sub02_pt{ width:100%; padding:0 0; }
	.sub02_pt.pt_lf{ transform:translate(0, 100px); }
	.sub02_pt.pt_rt{ transform:translate(0, 100px); }
	.sub02_pt.act{ transform:translate(0, 0); }
	.sub02_pt:last-child{ padding:40px 0 0; margin-top:40px; border-left:none; border-top:1px dashed #ddd; }
}
@media(max-width:500px){
	.sub02_vis > h4{ font-size:24px; }
	.sub02_vis > p{ font-size:16px; }

	.sub02_pt2{ width:50%; margin-bottom:40px; }
	.sub02_pt2:last-child{ margin-bottom:0; }
}

#sub03{ padding:0 20px 200px; }
#sub03 > .sub_con{ max-width:1100px; width:100%; margin:0 auto; }
.sub03_tt{ text-align:center; margin:0 auto 30px; }
.sub03_tt > h2{ font-family:'score'; font-size:40px; font-weight:800; color:#333; margin-bottom:30px; text-align:center; }
.sub03_lg_wrap{ position:relative; z-index:1; max-width:1100px; width:100%; margin:0 auto 60px; padding:99px 30px; background-image:url(./img/03-00.png); background-position:center; border:1px solid #ddd; }
.sub03_lg_wrap > p{ position:absolute; z-index:1; bottom:15px; right:15px; font-size:14px; font-weight:300; color:#333; padding:5px; background-color:#fff; box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2); }
.sub03_lg{ max-width:199px; width:100%; margin:0 auto; transform:translate(0, -50px); opacity:0; transition:1s transform, 1s opacity; }
.sub03_lg.act{ transform:translate(0, 0); opacity:1; }
.sub03_lg > img{ width:100%; height:auto; display:block; }
.sub03_pt_wrap{ margin:0 -20px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -ms-flex-direction:row; flex-direction:row; -webkit-box-lines:multiple; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.sub03_pt{ position:relative; z-index:1; width:25%; padding:0 20px; transform:translate(0, 50px); opacity:0; }
.sub03_pt.del_01{ transition:0.8s transform 0s, 0.8s opacity 0s; }
.sub03_pt.del_02{ transition:0.8s transform 0.2s, 0.8s opacity 0.2s; }
.sub03_pt.del_03{ transition:0.8s transform 0.4s, 0.8s opacity 0.4s; }
.sub03_pt.del_04{ transition:0.8s transform 0.6s, 0.8s opacity 0.6s; }
.sub03_pt.act{ transform:translate(0, 0); opacity:1; }
/*.sub03_pt:after{ content:'+'; position:absolute; z-index:1; top:70px; left:100%; transform:translate(-50%, -50%); font-family:'score'; font-size:40px; font-weight:900; color:#0368eb; line-height:1em; }
.sub03_pt:last-child:after{ content:none; }*/
.sub03_box{	max-width:250px; width:100%; margin:0 auto; }
.sub03_ic{ padding:5px; max-width:140px; width:100%; margin:0 auto 20px; background-color:#f5f5f5; border-radius:100%; overflow:hidden; box-shadow:3px 3px 8px 0 rgba(0,0,0,0.2), inset -3px -3px 4px 0 rgba(0,0,0,0.3), inset 3px 3px 4px 0 rgba(255,255,255,0.85); }
.sub03_ic > img{ width:100%; height:auto; display:block; }
.sub03_txt{ text-align:center; word-break:keep-all; }
.sub03_txt > h3{ font-size:24px; font-weight:700; color:#333; margin-bottom:5px; }
.sub03_txt > p{ font-size:16px; font-weight:300; color:#666; }

.sub03_de{ margin:30px 0 0; background-color:#f7f7f7; padding:30px; border-radius:10px; box-shadow:3px 3px 8px 0 rgba(0,0,0,0.2), inset -3px -3px 4px 0 rgba(0,0,0,0.3), inset 3px 3px 4px 0 rgba(255,255,255,0.85); text-align:center; word-break:keep-all; }
.sub03_de > h3{ font-family:'score'; font-size:30px; font-weight:200; color:#333; }
.sub03_de > h3 > strong{ font-weight:700; color:#0368eb; }

@media(max-width:800px){
	.sub03_pt{ width:50%; padding:0 20px 40px; }
}
@media(max-width:500px){
	.sub03_lg_wrap{ padding:59px 20px; }

	.sub03_pt{ width:100%; }
	.sub03_pt:last-child{ padding:0 20px; }

	.sub03_de{ padding:15px; }
	.sub03_de > h3{ font-size:5.4vw; }
}



/* animation */
@-webkit-keyframes slate{
	0%{ left:0; }
	100%{ left:100%; }
}