/* Setting */
section{padding:200px 0;overflow:hidden;position:relative;line-height:1.4;word-break:keep-all}
section .section_title{margin:0 auto 30px;text-align:center;}
section .section_title h3{font-size:50px;display:block;margin-bottom:10px;}
section .section_title p{font-size:20px;font-weight:bold;color:#E74F12}
section .section_title b{font-size:35px;display:block;margin-bottom:20px;}
section .section_title span{font-size:18px;display:block;}
section .section_fix{width:calc(100% - 40px);margin:0 auto;overflow:hidden;max-width:1720px;}
section .section_body{position:relative;width:100%;margin:0 auto}


.ani-GradientText{
	background:linear-gradient(to right, rgb(0,0,0) 50%, rgba(217,217,217) 50%);
	background-size:200% 100%;
	background-position-x:100%;
	color:transparent;
	background-clip:text;
	-webkit-background-clip:text;
	display:inline;
}

/* Section01 */
#section01:after{content:'';width:100%;height:0px;background:url('../img/03_service/01/section01_back.png') no-repeat center top;background-size:contain;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:-2;animation: expandHeight 1s ease forwards;}
#section01 .section_title{text-align:right;margin:0 auto 100px;}
#section01 .section_body .textbox{position:relative;text-align:center;}
#section01 .section_body .textbox b{font-size:45px;}
#section01 .section_body .textbox p{font-weight:bold;font-size:35px;}
#section01 .section_body .textbox .br01{display:block}
#section01 .section_body .textbox .br02{display:none}
#section01 .img01{position:absolute;top:140px;left:calc(50% - 800px);z-index:-1;animation: float 4s ease-in-out infinite;width:100%;max-width:410px;}
#section01 .img02{position:absolute;top:300px;right:calc(50% - 800px);z-index:-1;animation: float2 4s ease-in-out infinite;width:100%;max-width:320px;}


@keyframes expandHeight {
  from {
    height: 0;
  }
  to {
    height: 600px;
  }
}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

@keyframes float2 {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-20px); }
  100% { transform: translateX(0); }
}


/* Section02 */
#section02 .section_body .textbox{width:calc(100% + 20px);margin:0 -10px 10px;overflow:hidden;}
#section02 .section_body .textbox ul{float:left;width:calc(25% - 20px);margin:10px;}
#section02 .section_body .textbox ul li{position:relative;}
#section02 .section_body .textbox ul li img{width:100%}
#section02 .section_body .textbox ul li a{display:block;position:absolute;width:100px;text-align:center;color:#fff;font-size:12px;font-weight:bold;bottom:40px;left:40px;background:#E74F12;line-height:28px;border-radius:16px;}
#section02 .section_body .hidden_box img{width:100%}

#section02 .section_body .m_hidden_box{display:none}
#section02 .section_body .m_hidden_box img{width:100%}


/* Section03 */
#section03{background: linear-gradient(180deg,rgba(253, 248, 246, 1) 49%,rgba(255, 255, 255, 1) 100%);}
#section03 .section_body table{width:100%;table-layout:fixed;border-collapse: separate;border-spacing: 30px 0;}
#section03 .section_body table td{vertical-align:bottom;padding:10px;}
#section03 .section_body table td span{font-size:14px;color:#a3a3a3;display:block;margin:0 auto 20px;}
#section03 .section_body table td .box{position:relative;margin:10px 0;}
#section03 .section_body table td .box .top{position:absolute;top:60px;left:0;width:100%;background:linear-gradient(90deg,#E74F12 60%, #C53800 100%);border-radius:10px;padding-bottom:100px;z-index:0;transition:1s;transition-delay: 0.3s;}
#section03 .section_body table td .box .top b{display:inline-block;color:#fff;font-size:25px;line-height:60px;padding:0 20px;}
#section03 .section_body table td .box .top p{display:inline-block;color:#711300;font-size:20px;line-height:60px;font-weight:bold;}
#section03 .section_body table td .box .top.active{top:0}
#section03 .section_body table td:nth-of-type(2) .box .top{transition-delay: 0.6s;}
#section03 .section_body table td:nth-of-type(3) .box .top{transition-delay: 0.9s;}

#section03 .section_body table td .box .img{width:100%;padding-top:60px;position:relative;z-index:1}
#section03 .section_body table td .box .img img{width:100%;filter: drop-shadow(0px 0px 10px #ddd);}

#section03 .section_body table.mobile{display:none}


/* Section04 */
#section04 .section_title{}
#section04 .section_body ul{width:100%;overflow:hidden;margin:100px auto 0px;}
#section04 .section_body ul .box_fix{width:100%;max-width:1720px;margin:0 auto;position:relative;}
#section04 .section_body ul .box_fix:before{content:'';width:calc(100% + 120px);height:1px;position:absolute;background:#000;}
#section04 .section_body ul.top .box_fix:before{transform:translateX(calc(25% - 45px));right:50%;top:14px;}
#section04 .section_body ul.bottom .box_fix:before{transform:translateX(calc(-25% + 45px));left:50%;top:15px;}

#section04 .section_body ul li{width:calc((100% / 4) - 20px);padding:0 10px;position:relative;padding-top:60px;}
#section04 .section_body ul.top li{float:left;}
#section04 .section_body ul.bottom li{float:right;}
#section04 .section_body ul li:after{content:'';width:0px;height:30px;position:absolute;background:url('../img/03_service/01/section04_arrow.png') no-repeat;top:0px;right:40px;transition:0.5s;}
#section04 .section_body ul li.active:after{width:30px;right:10px;}

#section04 .section_body ul.top li:nth-of-type(1):after{transition-delay: 0.3s;}
#section04 .section_body ul.top li:nth-of-type(2):after{transition-delay: 0.6s;}
#section04 .section_body ul.top li:nth-of-type(3):after{transition-delay: 0.9s;}

#section04 .section_body ul.bottom li:nth-of-type(3):after{transition-delay: 1.2s;}
#section04 .section_body ul.bottom li:nth-of-type(2):after{transition-delay: 1.5s;}
#section04 .section_body ul.bottom li:nth-of-type(1):after{transition-delay: 1.8s;}


#section04 .section_body ul li span{display:block;position:absolute;top:0px;left:10px;font-size:12px;color:#fff;width:25px;height:25px;text-align:center;line-height:27px;background:#E74F12;border-radius:25px;font-weight:700}
#section04 .section_body ul li b{font-size:18px;display:block;margin-bottom:10px;}
#section04 .section_body ul li p{font-size:14px;width:100%;max-width:400px;}
#section04 .section_body.mobile{display:none}
#section04 .section_body.mobile ul{text-align:center;}
#section04 .section_body.mobile ul li{width:calc(50% - 20px);float:left;display:inline-block;vertical-align:top;text-align:left;margin:0 auto 40px}
#section04 .section_body.mobile ul li:before{content:'';width:100%;height:1px;position:absolute;background:#000;top:15px;left:0;transform:translateY(-50%);}

/* Section05 */
#section05{padding-bottom:300px}
#section05 .section_title b{text-align:left;width:calc(100% - 40px);max-width:1720px;margin:0 auto}
#section05 .section_body .link_box{text-align:center;display:block;margin:40px auto 0;}
#section05 .section_body .link_box a{display:inline-block;font-size:14px;line-height:48px;text-align:center;border-radius:4px;transition:0.5s;border:1px solid #e74f12;color:#e74f12;position:relative;padding:0 20px;margin:0 2px;}
#section05 .section_body .link_box a:after{content:'';width:0;height:100%;top:0;left:0;position:absolute;background:#e74f12;transition:0.5s;z-index:-1}
#section05 .section_body .link_box a:hover{color:#fff;}
#section05 .section_body .link_box a:hover:after{width:100%}
#section05 .section_body .link_box a i{margin-left:40px;}




/* Responsive */
@media all and (max-width:1440px){
	section .section_title h3{font-size:42px}
	section .section_title b{font-size:32px;}


	#section01 .section_body .textbox b{font-size:38px}
	#section01 .section_body .textbox p{font-size:28px}


	#section01 .img01{left:0;max-width:370px;}
	#section01 .img02{right:0;max-width:270px;}

	#section03 .section_body table{border-spacing:20px 0}
	#section03 .section_body table td .box .top b{font-size:21px;padding:0 10px 0 20px;}
	#section03 .section_body table td .box .top p{font-size:16px;}

}



@media all and (max-width:1024px){
	section .section_title h3{font-size:36px}
	section .section_title b{font-size:26px;}
	


	#section01 .section_body .textbox b{font-size:32px}
	#section01 .section_body .textbox p{font-size:21px}


	#section01 .img01{left:0;max-width:320px;}
	#section01 .img02{right:0;max-width:240px;}


	#section02 .section_fix{max-width:760px}
	#section02 .section_body .textbox ul{width:calc(50% - 20px)}

	#section03 .section_title{margin:0 auto 0}
	#section03 .section_body table.pc{display:none}
	#section03 .section_body table.mobile{display:table;max-width:600px;margin:0 auto;border-spacing: 0px 0;}
	#section03 .section_body table.mobile td{padding:10px 0}
	#section03 .section_body table td span{font-size:12px;text-align:center;}

	#section03 .section_body table{border-spacing:16px 0}
	#section03 .section_body table td .box .top b{font-size:21px;padding:0 10px 0 20px;}
	#section03 .section_body table td .box .top p{font-size:16px;}


	#section04 .section_body ul li{width:calc((100% / 3) - 20px)}
	#section04 .section_body ul.top .box_fix:before{right:0;transform:translate(0)}
	#section04 .section_body ul.bottom .box_fix:before{left:0;transform:translate(0)}

}

@media all and (max-width:840px){
	#section04 .section_body.pc{display:none}
	#section04 .section_body.mobile{display:block;}
}


@media all and (max-width:768px){
	section{padding:160px 0}
	section .section_title h3{font-size:32px}
	section .section_title b{font-size:30px;}
	section .section_title span{font-size:16px;}


	#section01 .section_body .textbox b{font-size:25px}
	#section01 .section_body .textbox p{font-size:25px}

	#section01 .section_body .textbox b .br02{display:none}
	#section01 .section_body .textbox .br01{display:none}
	#section01 .section_body .textbox .br02{display:block}



	#section01 .img01{left:0;max-width:240px;}
	#section01 .img02{right:0;max-width:180px;}



	#section04 .section_body ul li{width:calc((100% / 3) - 20px)}
	#section04 .section_body ul.top .box_fix:before{right:0;transform:translate(0)}
	#section04 .section_body ul.bottom .box_fix:before{left:0;transform:translate(0)}

}

@media all and (max-width:720px){
	section .section_title b{font-size:20px}

	#section01 .section_title{text-align:center;margin-bottom:300px;}

	#section01 .section_body .textbox b{font-size:20px}
	#section01 .section_body .textbox p{font-size:20px}

	#section01 .section_body .textbox b .br02{display:block}
	#section01 .section_body .textbox .br02{display:none}

	#section01 .img01{top:360px;}


}

@media all and (max-width:640px){
	section{padding:120px 0}

	#section02 .section_fix{max-width:540px}
	#section02 .section_body .textbox ul{width:calc(100% - 20px)}



	#section04 .section_body.mobile ul li{width:calc(100% - 40px);padding:40px 20px 0;}
	#section04 .section_body ul li span{left:20px;}
	#section04 .section_body ul li.active:after{right:20px;}

	#section05 .section_body .link_box a{padding:0 16px}
	#section05 .section_body .link_box a i{margin-left:20px}
}

@media all and (max-width:480px){
	section .section_title span{font-size:14px;}

	#section02 .section_body .m_hidden_box{display:block}
	#section02 .section_body .hidden_box{display:none}

	#section03 .section_body table td .box .top{padding-bottom:60px}
	#section03 .section_body table td .box .top b{font-size:18px;line-height:50px;}
	#section03 .section_body table td .box .top p{font-size:14px;line-height:50px;float:right;margin-right:30px;}
	#section03 .section_body table td .box .img{padding-top:50px;}
	
	#section05 .section_body .link_box a{line-height:48px;padding:0 30px;width:268px;margin:0 auto 15px;text-align:left;}
	#section05 .section_body .link_box a i{float:right;line-height:48px;}

}