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


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

.sub01_tt{ text-align:center; word-break:keep-all; margin-bottom:80px; }
.sub01_tt > h2{ font-family:'score'; font-size:45px; font-weight:800; color:#333; line-height:0.85em; margin-bottom:10px; }
.sub01_tt > p{ font-size:20px; font-weight:300; color:#777; }

.sub01_up{ max-width:850px; width:100%; margin:0 auto 70px; }
.sub01_vn_wrap{ position:relative; z-index:1; width:100%; padding-top:75%; }
.sub01_vn{ position:absolute; z-index:1; border-radius:100%; overflow:hidden; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; box-shadow:3px 3px 5px 0 rgba(0,0,0,0.2), inset -5px -5px 7px 0 rgba(0,0,0,0.3), inset 5px 5px 7px 0 rgba(255,255,255,0.5); }
.sub01_vn.vn_01{ width:50.25%; height:67%; top:0; left:50%; transform:translate(-50%, 0); background-color:#ec404d; }
.sub01_vn.vn_02{ width:37.5%; height:50%; bottom:0; left:0; background-color:#22ac38; }
.sub01_vn.vn_03{ width:37.5%; height:50%; bottom:0; right:0; background-color:#0368eb; }
.sub01_vn > .sub01_vn_txt{ padding:30px; text-align:center; word-break:keep-all; text-shadow:2px 2px 2px rgba(0,0,0,0.5); }
.sub01_vn > .sub01_vn_txt > h3{ font-family:'score'; font-size:20px; font-weight:200; color:#fff; }
.sub01_vn.vn_01 > .sub01_vn_txt > h3{ font-size:30px; }
.sub01_vn > .sub01_vn_txt > h3 > strong{ font-size:1.3em; font-weight:700; }

@media(max-width:800px){
	#sub01{ padding:70px 15px 100px; }
}
@media(max-width:650px){
	.sub01_tt{ margin-bottom:60px; }
	.sub01_tt > p{ font-size:16px; }
}
@media(max-width:620px){
	.sub01_up{ max-width:500px; }
	.sub01_vn_wrap{ padding-top:145%; }
	.sub01_vn.vn_01{ width:100%; height:68.965517%; }
	.sub01_vn.vn_02{ width:50%; height:33.105%; }
	.sub01_vn.vn_03{ width:50%; height:33.105%; }
	.sub01_vn > .sub01_vn_txt{ padding:20px; }
	.sub01_vn > .sub01_vn_txt > h3{ font-size:3.076923076923077vw; }
	.sub01_vn.vn_01 > .sub01_vn_txt > h3{ font-size:6.666666666666667vw; }
	.sub01_vn > .sub01_vn_txt > h3 > strong{ display:block; }
}
@media(max-width:500px){
	.sub01_tt > h2{ font-size:40px; }
}




/* sub02 */
#sub02{ padding:0 20px 200px; }
#sub02 > .sub_con{ max-width:1000px; width:100%; margin:0 auto; }
.sub02_tt{ text-align:center; word-break:keep-all; margin:0 auto 40px; }
.sub02_tt > h3{ font-family:'score'; font-size:35px; font-weight:800; color:#333; margin-bottom:30px; text-align:center; }
.sub02_tt > h3 > span{ color:#036eb8; }

.sub02_pt_wrap{ margin:0 -10px; 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:25%; padding:0 10px; display:-webkit-box; display:-ms-flexbox; display:flex; }
.sub02_box{ width:100%; background-color:#f9f9f9; border-radius:8px; overflow:hidden; padding:30px 15px; box-shadow:3px 3px 5px 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.5); }
.sub02_ic{ max-width:150px; width:100%; margin:0 auto 15px; border-radius:100%; overflow:hidden; background-color:#fff; border:4px solid #036eb8; box-shadow:inset 2px 2px 4px 0 rgba(0,0,0,0.3); }
.sub02_ic > div{ position:relative; z-index:1; width:100%; padding-top:100%; }
.sub02_ic > div:before{ position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%, -50%); font-size:60px; color:#036eb8; text-shadow:2px 2px 2px rgba(0,0,0,0.2); }
.sub02_txt{ text-align:center; word-break:keep-all; }
.sub02_txt > h3{ font-size:18px; font-weight:500; color:#333; }

@media(max-width:800px){
	#sub02{ padding:0 15px 150px; }
}
@media(max-width:700px){
	.sub02_pt{ width:50%; padding:0 10px 20px; }
	.sub02_pt:nth-child(n + 3){ padding:0 10px; }
}