/* Setting */
.section{overflow:hidden;line-height:1.6;position:relative;height:100vh;word-break:keep-all}
.section .section_fix{width:calc(100% - 40px);margin:0 auto;overflow:hidden;max-width:1430px;}
.section .section_body{position:relative;width:100%;margin:0 auto}


/* section01 */
#section01{height:auto;}
#section01 .section_fix{max-width:1720px}
#section01 .section_title{text-align:right;padding-top:10%;margin:0 auto 50px;}
#section01 .section_title h2{font-weight:900;font-size:80px;line-height:1}
#section01 .section_title p{font-size:25px;font-weight:500}
#section01 .section_body{padding-bottom:200px;}
#section01 .section_body .textbox{overflow:hidden;position:relative;}
#section01 .section_body .textbox h3{position:relative;}
#section01 .section_body .textbox h3 span{position: relative;font-size:110px;font-weight:500;color: #fff;text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px  1px 0 black,1px  1px 0 black;display: inline-block;overflow: hidden;line-height:1;}
#section01 .section_body .textbox h3 span:after{content: attr(data-text);position: absolute;top: 0;left: 0;width: 0%;height: 100%;color: black; white-space: nowrap;text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px  1px 0 black,1px  1px 0 black;overflow: hidden;animation-timing-function: ease-in-out;}
#section01 .section_body .textbox h3 span.right:after{left:20px;}
#section01 .section_body .textbox h3.one span:after{animation: fillBlack 1s forwards;animation-timing-function: linear;}
#section01 .section_body .textbox h3.one span.right:after{animation: fillBlack 1s forwards;animation-delay: 0.7s;animation-timing-function: linear;}

#section01 .section_body .textbox h3.two span:after{animation: fillBlack 1s forwards;animation-delay: 0.7s;animation-timing-function: linear;}
#section01 .section_body .textbox h3.two span.right:after{animation: fillBlack 1s forwards;animation-delay: 1.4s;animation-timing-function: linear;}
#section01 .section_body .textbox h3.three span:after{animation: fillBlack 1s forwards;animation-delay: 2.1s;animation-timing-function: linear;}
#section01 .section_body .textbox h3.center:after{content:'';position:absolute;width:100%;height:3px;background:#000;top:50%;left:0;z-index:-1;transform:translateY(-50%);}
#section01 .section_body .textbox h3.center span{background:#fff;}
#section01 .section_body .textbox p{font-size:25px;position:absolute;bottom:16px;left:0;}
#section01 .section_body .textbox.mobile{display:none}
#section01 .section_body .imgbox img{width:100%}

@keyframes fillBlack {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}



/* Fullpage */

.section .section_fix.table{display:table}
.section .section_fix.table>div{display:table-cell;vertical-align:middle}
.section .section_fix .fl{width:calc(100% - 850px)}
.section .section_fix .fl span{font-size:25px;font-weight:500;display:block;margin-bottom:10px;}
.section .section_fix .fl b{font-size:50px;display:block;margin-bottom:10px;}
.section .section_fix .fl p{font-size:14px;margin-bottom:30px;}
.section .section_fix .fl a{font-size:14px;line-height:48px;text-align:center;width:168px;display:block;border-radius:4px;transition:0.5s}
.section .section_fix .fl a i{margin-left:40px;transition:0.5s;padding-right:10px;}
.section .section_fix .fl a:hover i{margin-left:50px;padding-right:0;}
.section .section_fix .fr{width:850px;}
.section .section_fix .fr img{width:100%}
.section .section_fix .fr a{display:none;font-size:14px;line-height:48px;text-align:center;width:168px;border-radius:4px;transition:0.5s}
.section .section_fix .fr a i{margin-left:40px;transition:0.5s;padding-right:10px;}
.section .section_fix .fr a:hover i{margin-left:50px;padding-right:0;}

.section .section_fix.orage .fl span{color:#e74f12}
.section .section_fix.orage .fl a{border:1px solid #e74f12;color:#e74f12;position:relative;}
.section .section_fix.orage .fl a:after{content:'';width:0;height:100%;top:0;left:0;position:absolute;background:#e74f12;transition:0.5s;z-index:-1}
.section .section_fix.orage .fl a:hover{color:#fff;}
.section .section_fix.orage .fl a:hover:after{width:100%}

.section .section_fix.green .fl span{color:#53B689}
.section .section_fix.green .fl a{border:1px solid #53B689;color:#53B689;position:relative;}
.section .section_fix.green .fl a:after{content:'';width:0;height:100%;top:0;left:0;position:absolute;background:#53B689;transition:0.5s;z-index:-1}
.section .section_fix.green .fl a:hover{color:#fff;}
.section .section_fix.green .fl a:hover:after{width:100%}

.section .section_fix.orage .fr a{border:1px solid #e74f12;color:#e74f12;position:relative;}
.section .section_fix.orage .fr a:after{content:'';width:0;height:100%;top:0;left:0;position:absolute;background:#e74f12;transition:0.5s;z-index:-1}
.section .section_fix.orage .fr a:hover{color:#fff;}
.section .section_fix.orage .fr a:hover:after{width:100%}

.section .section_fix.green .fr a{border:1px solid #53B689;color:#53B689;position:relative;}
.section .section_fix.green .fr a:after{content:'';width:0;height:100%;top:0;left:0;position:absolute;background:#53B689;transition:0.5s;z-index:-1}
.section .section_fix.green .fr a:hover{color:#fff;}
.section .section_fix.green .fr a:hover:after{width:100%}





/* Responsive */
@media all and (max-width:1720px){
	#section01 .section_title h2{font-size:5vw}
	#section01 .section_body .textbox h3 span{font-size:6.5vw}
	#section01 .section_body .textbox p{font-size:1.6vw}

	#section01 .section_body .imgbox{width:calc(100% + 40px);margin:0 -20px;}
	#section01 .section_fix{overflow:visible}
}

@media all and (max-width:1440px){
	.section .section_fix .fl{width:50%}
	.section .section_fix .fr{width:50%}

	.section .section_fix .fl b{font-size:3vw}
}


@media all and (max-width:1024px){
	.section .section_fix.table{display:block}
	.section .section_fix.table>div{display:block;}
	.section .section_fix .fl{width:100%}
	.section .section_fix .fr{width:100%}

	.section .section_fix .fl p br{display:none}
	.section .section_fix .fl a{display:none}
	.section .section_fix .fr a{display:block;margin:20px auto 0}
}

@media all and (max-width:768px){
	#section01 .section_body .textbox p{font-size:1.8vw}
	.section .section_fix .fl span{font-size:3vw}
	.section .section_fix .fl b{font-size:5vw}
}


@media all and (max-width:480px){
	.section .section_fix .fl span{font-size:14px}
	.section .section_fix .fl b{font-size:30px}
	.section .section_fix .fr a{width:248px}
	.section .section_fix .fr a i{margin-left:100px}

	#section01 .section_title{text-align:center;}
	#section01 .section_title h2{font-size:9vw;}
	#section01 .section_title p{font-size:18px;}

	#section01 .section_body .textbox.pc{display:none}
	#section01 .section_body .textbox.mobile{display:block}
	#section01 .section_body .textbox p{position:static;font-size:16px;width:100%;overflow:hidden;margin:20px 0;text-align:center;}

	#section01 .section_body .textbox h3 span{font-weight:300}
	#section01 .section_body .textbox h3 span.right:after{left:10px;}
	#section01 .section_body .textbox h3.two span:after{animation: fillBlack 1s forwards;animation-delay: 1.4s;}
	#section01 .section_body .textbox h3.two span.right:after{animation: fillBlack 1s forwards;animation-delay: 2.1s;}
	#section01 .section_body .textbox h3.center:after{height:1px;top:calc(50% - 3px);}
}