.sub_wrap, .sub_wrap *{ box-sizing:border-box; }

.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{ padding:0 0 200px; }
.sub01_his_wrap{ max-width:900px; width:100%; margin:0 auto; word-break:keep-all; }
.sub01_his_wrap > li{ position:relative; z-index:1; padding-bottom:70px; display:-webkit-box; display:-ms-flexbox; display:flex; }
.sub01_his_wrap > li:last-child{ padding-bottom:0; }
.sub01_his_wrap > li > h3{ position:relative; z-index:1; white-space:nowrap; padding-right:40px; font-family:'score'; font-size:70px; font-weight:100; color:#165aa1; line-height:0.85em; }
.sub01_his_wrap > li > h3:before{ content:''; position:absolute; z-index:1; width:0; top:30px; bottom:-100px; right:0; border-left:1px dashed #ddd; }
.sub01_his_wrap > li:last-child > h3:before{ content:none; }
.sub01_his_wrap > li > h3:after{ content:''; position:absolute; z-index:2; top:20px; right:-14px; box-sizing:border-box; width:30px; height:30px; border-radius:100%; border-top:8px solid #165aa1; border-right:8px solid #165aa1; border-left:8px solid #b5b4b5; border-bottom:8px solid #b5b4b5; background-color:#fff; transform:rotate(45deg); }
.sub01_his_wrap > li > ul{ padding-top:20px; padding-left:40px; }
.sub01_his_wrap > li > ul > li{ display:-webkit-box; display:-ms-flexbox; display:flex; margin-bottom:20px; font-size:18px; font-weight:300; color:#666; transform:translate(100px, 0); opacity:0; transition:0.8s transform, 0.8s opacity; }
.sub01_his_wrap > li > ul > li.act{ transform:translate(0, 0); opacity:1; }
.sub01_his_wrap > li > ul > li:last-child{ margin-bottom:0; }
.sub01_his_wrap > li > ul > li > h4{ white-space:nowrap; padding-right:20px; font-size:25px; color:#165aa1; }
.sub01_his_wrap > li > ul > li > ul > li{ position:relative; z-index:1; font-size:20px; font-weight:300; color:#666; line-height:1.6em; padding-left:17px; }
.sub01_his_wrap > li > ul > li > ul > li:before{ content:''; position:absolute; z-index:1; left:0; top:12px; width:7px; height:7px; border-radius:100%; background-color:#165aa1; }

@media(max-width:650px){
	.sub01_tt > p{ font-size:16px; }

	.sub01_his_wrap > li{ -webkit-box-lines:multiple; -ms-flex-wrap:wrap; flex-wrap:wrap; }
	.sub01_his_wrap > li > h3{ width:100%; border-bottom:2px solid #165aa1; padding-bottom:10px; padding-right:0; }
	.sub01_his_wrap > li > ul{ width:100%; padding-left:0 }
	.sub01_his_wrap > li > h3:before, .sub01_his_wrap > li > h3:after{ content:none; } 
	.sub01_his_wrap > li > ul > li > h4{ padding-right:15px; }
	.sub01_his_wrap > li > ul > li > ul > li{ font-size:17px; }
	.sub01_his_wrap > li > ul > li > ul > li:before{ top:10px; }
}

@media(max-width:500px){
	.sub01_his_wrap > li > h3{ font-size:50px; }
	.sub01_his_wrap > li > ul > li > h4{ font-size:20px; padding-right:10px; }
	.sub01_his_wrap > li > ul > li > ul > li{ font-size:15px; }
	.sub01_his_wrap > li > ul > li > ul > li:before{ top:9px; }
}





#sub02{ padding:0; }
#sub02 > .sub_con{ max-width:900px; width:100%; margin:0 auto; }
.sub02_tt{ text-align:center; word-break:keep-all; margin-bottom:80px; }
.sub02_tt > h2{ font-family:'score'; font-size:45px; font-weight:800; color:#333; line-height:0.85em; margin-bottom:10px; }
.sub02_tt > p{ font-size:20px; font-weight:300; color:#777; }

.sub02_pt_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_pt{ width:25%; padding:0 15px 30px; transform:translate(0, 100px); opacity:0; transition:1s transform, 1s opacity; }
.sub02_pt.act{ transform:translate(0, 0); opacity:1; }
.sub02_box{ position:relative; z-index:1; max-width:160px; width:100%; margin:0 auto; border-radius:100%; background-color:#f7f7f7; box-shadow:3px 3px 8px 0 rgb(0 0 0 / 20%), inset -3px -3px 4px 0 rgb(0 0 0 / 30%), inset 3px 3px 4px 0 rgb(255 255 255 / 85%); overflow:hidden; }
.sub02_txt{ position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.7); color:#fff; 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; padding:15px; text-align:center; font-size:16px; font-weight:300; color:#fff; word-break:keep-all; opacity:0; transition:0.3s opacity; }
.sub02_box:hover .sub02_txt{ opacity:1; }
.sub02_img{ width:100%; margin:0 auto; padding:30px; }
.sub02_img > img{ width:100%; height:auto; display:block; }

@media(max-width:700px){
	.sub02_pt{ width:33.3333333%; }
}

@media(max-width:500px){
	.sub02_pt_wrap{ margin:0 -10px; }
	.sub02_pt{ width:50%; padding:0 10px 20px; }
}