/* 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;line-height:1}
section .section_title p{font-size:20px;font-weight:bold;color:#53B689;}
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/03/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 0px;width:calc(100% - 40px);max-width:1720px;}
#section01 .section_title h3{margin-bottom:5px}

#section01 .slide_box{overflow:hidden;display:flex;justify-content:center;align-items:center;width:100%;height:800px;margin:0 auto 0px;}
#carousel-scene{position:relative;width:100%;max-width:200px;perspective: 1000px;}
#carousel{position:relative;width:100%;height:100%;transform-style: preserve-3d;transform:translateZ(800px) rotateY(0deg);cursor:grab;}
#carousel-scene .carousel-cell{--gap:10px;display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:calc(100% - var(--gap)); height:100%;background:var(--bg-color);user-select:none;}
#carousel-scene .carousel-cell img{width:100%;border-radius:10px;overflow:hidden;}




#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;}



@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:before{content:'';position:absolute;width:135px;height:135px;background:url('../img/03_service/04/section02_back01.png') no-repeat center;background-size:cover;bottom:200px;left:calc(50% - 320px);z-index:2;animation: float2 4s ease-in-out infinite;}
#section02:after{content:'';position:absolute;width:100px;height:100px;background:url('../img/03_service/04/section02_back02.png') no-repeat center;background-size:cover;top:300px;left:calc(50% - 800px);z-index:2;animation: float 4s ease-in-out infinite;}
#section02 .section_body table{width:100%;table-layout:fixed;}
#section02 .section_body table th{}
#section02 .section_body table th img{width:100%}
#section02 .section_body table td{padding-left:90px}
#section02 .section_body table td b{font-size:45px;line-height:1.2}
#section02 .section_body table td p{font-size:18px}
#section02 .section_body table.mobile{display:none}



/* Section03 */
#section03 .section_body .textbox{width:calc(100% + 20px);margin:0 -10px 10px;overflow:hidden;}
#section03 .section_body .textbox ul{float:left;width:calc(25% - 20px);margin:10px;position:relative;}
#section03 .section_body .textbox ul li{position:relative;}
#section03 .section_body .textbox ul li .text{position:absolute;left:40px;bottom:40px;width:calc(100% - 80px);}
#section03 .section_body .textbox ul li .text b{font-size:28px;}
#section03 .section_body .textbox ul li .text p{font-size:16px;border-top:1px solid #000;margin-top:10px;padding-top:10px;display:none}
#section03 .section_body .textbox ul li img{width:100%}
#section03 .section_body .textbox ul li a{display:block;position:absolute;width:100px;text-align:center;color:#fff;font-size:12px;font-weight:bold;right:40px;top:40px;background:#53B689;line-height:28px;border-radius:16px;}





/* Section04 */
#section04{padding:200px 0;background: linear-gradient(180deg, #F6FDF9 49%, #FFFFFF 100%);}
#section04 .section_body table{width:100%;table-layout:fixed;border-collapse: separate;border-spacing: 30px 0;}
#section04 .section_body table td{vertical-align:bottom;padding:10px;}
#section04 .section_body table td h3{font-size:20px;color:#24A86C;font-weight:700;}
#section04 .section_body table td span{font-size:14px;color:#a3a3a3;display:block;margin:0 auto 20px;}
#section04 .section_body table td .box{position:relative;margin:10px 0;text-align:center;}
#section04 .section_body table td .box .top{position:absolute;top:60px;left:0;width:100%;background:linear-gradient(90deg,#53B689 60%, #1A9C61 100%);border-radius:10px;padding-bottom:100px;z-index:0;transition:1s;transition-delay: 0.3s;}
#section04 .section_body table td .box .top b{display:inline-block;color:#fff;font-size:25px;line-height:60px;width:50%;text-align:center;}}
#section04 .section_body table td .box .top p{display:inline-block;color:#711300;font-size:20px;line-height:60px;font-weight:bold;}
#section04 .section_body table td .box .top.active{top:0}
#section04 .section_body table td:nth-of-type(2) .box .top{transition-delay: 0.6s;}
#section04 .section_body table td:nth-of-type(3) .box .top{transition-delay: 0.9s;}

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

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


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

#section05 .section_body ul li{width:calc((100% / 4) - 20px);padding:0 10px;position:relative;padding-top:60px;}
#section05 .section_body ul.top li{float:left;}
#section05 .section_body ul.bottom li{float:right;}
#section05 .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;}
#section05 .section_body ul li.active:after{width:30px;right:10px;}

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

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

#section05 .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:28px;background:#53B689;border-radius:25px;font-weight:700}
#section05 .section_body ul li b{font-size:18px;display:block;margin-bottom:10px;}
#section05 .section_body ul li p{font-size:14px;width:100%;max-width:400px;}

#section05 a{width:228px;line-height:48px;border:1px solid #53B689;text-align:center;display:block;margin:0 auto 100px;font-size:14px;color:#53B689;border-radius:4px;overflow:hidden;position:relative;transition:0.5s}
#section05 a i{margin-left:40px;}
#section05 a:after{content:'';width:0;height:100%;top:0;left:0;position:absolute;background:#53B689;transition:0.5s;z-index:-1}
#section05 a:hover{color:#fff}
#section05 a:hover:after{width:100%}

#section05 .section_body.mobile{display:none}
#section05 .section_body.mobile ul{text-align:center;}
#section05 .section_body.mobile ul li{width:calc(50% - 20px);float:left;display:inline-block;vertical-align:top;text-align:left;margin:0 auto 40px}
#section05 .section_body.mobile ul li:before{content:'';width:100%;height:1px;position:absolute;background:#000;top:15px;left:0;}




/* Responsive */
@media all and (max-width:1920px){
	#section01 .section_title{margin:0 auto 10px;}
	#section01 .slide_box{height:600px;}
	#carousel-scene{max-width:160px;}
}
@media all and (max-width:1720px){
	#section02:after{left:20px;}
}

@media all and (max-width:1440px){
	section .section_title h3{font-size:42px}
	section .section_title b{font-size:32px;}
	
	#section01 .slide_box{height:500px;}
	#carousel-scene{max-width:140px;}

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

	#section02 .section_body table td b{font-size:38px}

	#section03 .section_body .textbox ul li .text b{font-size:21px}

	#section02:before{left:calc(50% - 100px)}

	#section04 .section_body table{border-spacing:20px 0}
	#section04 .section_body table td .box .top b{font-size:19px;}

}



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

	#section01 .section_body .textbox{text-align:center;}
	#section01 .section_body .textbox b{font-size:32px}
	#section01 .section_body .textbox p{font-size:32px}

	#section02:before{left:inherit;right:20px;top:40%;bottom:inherit;}
	#section02:after{left:20%;}

	
	#section02 .section_fix{max-width:760px}
	#section02 .section_body table.pc{display:none}
	#section02 .section_body table.mobile{display:table}
	#section02 .section_body table td{padding:30px 0 0 0}
	#section02 .section_body table td b{font-size:32px}

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

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

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

	#section04 .section_body table td .box .top b{font-size:21px;}



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

}

@media all and (max-width:840px){
	#section05 .section_body.pc{display:none}
	#section05 .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;}

	#section01 .slide_box{height:400px;}
	#carousel-scene{max-width:240px;perspective:800px;}
	#carousel{transform:translateZ(600px) rotateY(0deg);}

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

	#section02:before{width:100px;height:100px;}
	#section02:after{top:200px;width:60px;height:60px;}


	#section02 .section_body table td b{font-size:25px}
	#section02 .section_body table td p{font-size:16px}
	
	#section03 .section_body .textbox ul li .text{display:none}

	#section05 .section_body ul li{width:calc((100% / 3) - 20px)}
	#section05 .section_body ul.top .box_fix:before{right:0;transform:translate(0)}
	#section05 .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_body .textbox b{font-size:20px}
	#section01 .section_body .textbox p{font-size:20px}

	#section02 .section_body table td b{font-size:20px}

}

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

	#section01 .slide_box{height:400px;}
	#carousel-scene{max-width:200px;perspective:600px;}
	#carousel{transform:translateZ(400px) rotateY(0deg);}



	#section01 .section_body:after{top:-70%;width:40px;left:30%}

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

	#section02:before{width:80px;height:80px;}
	#section02:after{left:20%;}

	#section03 .section_body .textbox ul{width:calc(100% - 20px)}

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

}

@media all and (max-width:480px){
	#section01 br{display:none}

	#section04 .section_body table td h3{font-size:14px;}
	#section04 .section_body table td span{font-size:12px;}
	#section04 .section_body table td .box .top{padding-bottom:60px}
	#section04 .section_body table td .box .top b{font-size:18px;line-height:50px;}
	#section04 .section_body table td .box .top p{font-size:14px;line-height:50px;float:right;margin-right:30px;}
	#section04 .section_body table td .box .img{padding-top:50px;}

}


@media all and (max-width:420px){
	#section04 .section_body table td .box .top b{font-size:16px;}
	#section04 .section_body table td .box .top p{font-size:13px;}
}