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


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

.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_bn{ position:relative; z-index:1; padding:150px 40px; background-color:#333; background-image:url(https://images.unsplash.com/photo-1505455184862-554165e5f6ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80); background-position:left -100px center; background-size:cover; background-repeat:no-repeat; margin-bottom:50px; -webkit-animation:0.8s slate_back forwards; -moz-animation:0.8s slate_back forwards; -o-animation:0.8s slate_back forwards; animation:0.8s slate_back forwards; }
.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_txt{ text-align:center; word-break:keep-all; }
.sub01_txt > h3{ font-size:32px; font-weight:700; color:#333; margin-bottom:10px; }
.sub01_txt > h3 > strong{ font-weight:800; color:#0368eb; }
.sub01_txt > p{ font-size:24px; font-weight:300; color:#555; line-height:1.6em; }

.sub01_de{ max-width:600px; width:100%; padding:20px; margin:30px auto 0; border-radius:8px; background-color:#f9f9f9; box-shadow:4px 4px 10px 0 rgb(0 0 0 / 20%), inset -3px -3px 4px 0 rgb(0 0 0 / 20%), inset 3px 3px 4px 0 rgb(255 255 255 / 60%); text-align:center; word-break:keep-all; }
.sub01_de > h4{ font-size:28px; font-weight:700; color:#333; margin-bottom:10px; }
.sub01_de > p{ font-size:22px; font-weight:400; color:#666; }

@media(max-width:800px){
	#sub01{ padding:70px 15px 100px; }
}
@media(max-width:650px){
	.sub01_tt{ margin-bottom:60px; }
	.sub01_tt > p{ font-size:16px; }

	.sub01_txt > p{ font-size:18px; }
}




/* animation */
@-webkit-keyframes slate{
	0%{ left:0; background-position:left -50px center; }
	100%{ left:100%; background-position:left 0 center; }
}
@-webkit-keyframes slate_back{
	0%{ background-position:left -100px center; }
	100%{ background-position:left 0 center; }
}