#content{ background-color:#f7f7f7; }

.subtop:before{
	background: -moz-linear-gradient(top,  rgba(247,247,247,0) 10%, rgba(247,247,247,0.3) 50%, rgba(247,247,247,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(247,247,247,0) 10%, rgba(247,247,247,0.3) 50%, rgba(247,247,247,1) 100%);
	background: linear-gradient(to bottom,  rgba(247,247,247,0) 10%, rgba(247,247,247,0.3) 50%, rgba(247,247,247,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

.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; }
#sub01 > .sub_con{ max-width:1300px; width:100%; margin:0 auto; }
.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_tb{ text-align:center; margin:0 -10px 60px; }
.sub01_tb > li{ position:relative; z-index:1; display:inline-block; cursor:pointer; text-align:center; padding:15px 30px; border:1px solid #333; margin:0 10px; font-size:20px; font-weight:300; color:#333; line-height:1em; overflow:hidden; }
.sub01_tb > li:before{ content:''; position:absolute; bottom:0; left:0; height:0; width:100%; background-color:#333; transition:0.4s height; }
.sub01_tb > li:hover, .sub01_tb > li.act{ color:#fff; }
.sub01_tb > li:hover:before, .sub01_tb > li.act:before{ height:100%; }
.sub01_tb > li > span{ position:relative; z-index:1; }

.sub01_tc{ height:0; transform:translate(0, 100px); opacity:0; transition:0s transform, 0s opacity; }
.sub01_tc.act{ height:auto; transform:translate(0, 0); opacity:1; transition:1s transform, 1s opacity; }

.sub01_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; }
.sub01_pt{ width:20%; padding:0 15px 30px; }
.sub01_box{ position:relative; z-index:1; max-width:200px; width:100%; margin:0 auto; border-radius:100%; background-color:#f7f7f7; box-shadow:3px 3px 10px 0 rgb(0 0 0 / 15%), -3px -3px 10px 0 rgb(255 255 255 / 100%); overflow:hidden; }
.sub01_txt{ position:absolute; z-index:2; 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; }
.sub01_box:hover .sub01_txt{ opacity:1; }
.sub01_img{ width:100%; margin:0 auto; padding-top:100%; text-align:center; }
.sub01_img > img{ position:absolute; z-index:1; top:50%; left:50%; transform: translate(-50%, -50%); width:90%; height:auto; display:block; }

@media(max-width:991px){
	.sub01_pt{ width:25%; }
}
@media(max-width:700px){
	.sub01_pt{ width:33.33333333%; }
}
@media(max-width:600px){
	.sub01_tt > h2{ font-size:35px; }
	.sub01_tt > p{ font-size:17px; }
}

@media(max-width:500px){
	.sub01_tb > li{ margin:0 5px; padding:15px 20px; }

	.sub01_pt_wrap{ margin:0 -10px; }
	.sub01_pt{ width:50%; padding:0 10px 20px; }
}