@charset "utf-8";
/*----------------------------------共通--------------------------------------*/

.scrolldown1{ position:absolute; right:97px; bottom:83px; height:164px;}
.scrolldown1 span{ position: absolute; left:-15px; top: -15px; color: #eee; font-size: 0.7rem; letter-spacing: 0.05em; }
.scrolldown1::after{ content: ""; position: absolute; top: 0; width: 2px; height: 164px; background: #eee; animation: pathmove 1.4s ease-in-out infinite; opacity:0;}

@keyframes pathmove{
  0%{ height:0; top:0; opacity: 0; }
  30%{ height:80px; opacity: 1;}
  100%{ height:0; top:164px; opacity: 0; }
}

body .mover_box.top_only{overflow: hidden; position: fixed; z-index: -1; top: 0%; right: 0px; left: 0px; width: 100%; height: 100%; background: no-repeat;}
body .mover_box.top_only:before{ z-index: 5; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background: linear-gradient(180deg,rgba(22, 53, 181, 1) 0%, rgba(71, 175, 198, 1) 100%); opacity: 0.6; }
/* body .mover_box video{ width: 100%; height: 100%; object-fit: cover;} */

body .mover_box.top_only .mover_track{ animation: moverPic 80s linear infinite; opacity: 1; height: 100vh; display: flex; will-change: transform; }
body .mover_box.top_only .mover_pic{ height: 100vh; width: 150vw; max-width: initial; object-fit: cover; flex-shrink: 0; display: block;}
@keyframes moverPic{
	0%{
		transform: translateX(0);
		opacity: 0;
	}
	5%{
		opacity: 1;
	}
	80%{
		opacity: 0.9;
	}
	100%{
		transform: translateX(-50%);
		opacity: 0;
		
	}
}

/*----------------------------------#fv--------------------------------------*/
#fv {padding: 50% 0 10%; width: 100%; height: 100vh; position: relative;}
#fv .fv_box{ position: absolute; top: 30%; left: 5%; transform: translateY(-30%);}
#fv .fv_box h2 span{font-size: 60px; line-height: 114%; color: #fff;font-weight: 600; display: inline-block;letter-spacing: 0.02em;}
#fv .fv_box h2.typing-effect span.title_one{ margin-bottom: 15px; width: 890px; animation: typing1 1s steps(50), effect .5s step-end infinite alternate; white-space: nowrap; overflow: hidden;}
#fv .fv_box h2.typing-effect span.title_twe{width: 890px; animation: typing2 3s steps(50), effect .5s step-end infinite alternate;  white-space: nowrap; overflow: hidden;}

@keyframes typing1 {
  from { width: 0 }
}
@keyframes typing2 {
	0%{width: 0;}
	40%{width: 0;}
	100%{ width: 100; } 
}
@keyframes typing3 {
	0%{width: 0;}
	64%{width: 0;}
	100%{ width: 100; } 
}
    
@keyframes effect {
  50% { border-color: transparent;}
}

/*----------------------------------#about_us--------------------------------------*/
#about_us{background: #fafafa ; border-radius: 100px;  padding: 132px 0 90px; }
#about_us .bg_box{ }
#about_us .bg_box .big_tt{ overflow: hidden; width: 100%; margin: 5px 0 0;}
#about_us .bg_box .big_tt .slick-track{display: flex;}
#about_us .bg_box .big_tt p{ width: 2974px; white-space : nowrap; color: #eeeff3;font-weight: 600; font-size: 161px; line-height: 106%; float: right; margin: 0 0 0 100px;}
#about_us .bg_box .about_box{ display: flex ; align-items: center; justify-content: flex-start;}
#about_us .bg_box .about_box h3{padding: 23px 0 0;font-weight: 400;}
#about_us .bg_box .about_box .left_box{margin: 0 236px 0 0;}
#about_us .bg_box .about_box .text{line-height: 250%; padding: 37px 0 0;}
#about_us .bg_box .explanation_link{width: 283px; background: #fafafa; color: #2952a7; margin: 70px 0 0; font-size: 16px;box-shadow: 5px 5px 60px 0px rgba( 0,0,0,0.2) ,inset 0 1px 5px #fefefe; padding: 25px 0px 25px 40px; transition: 0.5s;}
#about_us .bg_box .explanation_link.thumb-hover{  transition: 0.5s;}


/*----------------------------------#news--------------------------------------*/
#news ul{padding: 0 0 0;}
#news ul li{border-bottom: 1px solid #fff;}
#news ul li a{display: flex;align-items: center; width: 100%; padding: 30px 0 26px; font-size: 16px; font-family: 'Noto-Sans-JP-Medium'; color: #fff;}
#news ul li a span{background: #fff; border-radius: 1000px; color: #2952A7; font-size: 14px;font-family: poppins, sans-serif; font-weight: 600; font-style: normal; display: block; width: 106px; text-align: center; line-height: 160%; letter-spacing: 0.05em; padding: 3px 0 0; margin: 0 59px 0 0;}


/*----------------------------------#service--------------------------------------*/
#service{background: #F1F5F9; padding: 57px 0 140px;}
#service .flex_box{ border-bottom: none;padding: 0 0 40px;}
#service .flex_box p{color: #2952A7;}
#service .flex_box h3{color: #000000;}
#service .flex_box .btn{width: 322px; position: relative; color: #fff; background: linear-gradient(90deg, #009bed 0%, #001b8b 30%, #001b8b 70%,#09b794 90% ); transition: all 0.5s ease-out; background-position: 10% 50%; background-size: 200% auto; font-size: 18px;}
#service .flex_box .btn.thumb-hover{ transition: all 0.5s ease-out; background-position: 90% 50%;}
#service .flex_box .btn:after{content: ""; display: block; border-right: 2px solid #fff; border-bottom: 2px solid #fff; width: 10px; height: 10px; position: absolute; top: 50%; transform: translateY(-50%) rotateZ(-45deg); right: 40px;}
#service ul{display: flex; border-radius: 60px; background: #fff; padding: 76px 0 53px;}
#service ul li{width: 412px;height: auto; padding:0 64px 7px 77px;}
#service ul li:not(:last-child){border-right: 1px solid #CECECE; }
#service ul li h4{font-weight: 700; text-align: center; font-size: 16px; letter-spacing: 0.05em; color: #2952A7; padding: 44px 0 0 ; line-height: 130%;}
#service ul li h4 span{font-family: poppins, sans-serif; font-weight: 600; font-style: normal;font-size: 26px; color: #000; line-height: 140%;}
#service ul li .link_box{padding: 16px 0 0; display: flex ; flex-direction: column; }
#service ul li .link_box a{text-align: center; font-size: 21px; line-height: 152%; }
#service ul li .link_box a:not(:first-child){padding: 12px 0 0;}
#service ul li .img{position: relative;font-size: 30px;}
#service ul li .img p{position: absolute; top: 10px; left: 10px; font-size: 20px; font-family: poppins, sans-serif; font-weight: 600; font-style: normal; color: #9E9E9E;}
#service ul li a.explanation_link{width: 215px; margin: 0 auto; display: block; border-radius: 100px; text-align: center; background: #F1F5F9; font-size: 16px; padding: 18px 20px 18px 0; color: #2952A7; position: relative; font-family: 'Noto-Sans-JP-Medium';}
#service ul li a.explanation_link span{border-radius: 100px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);width: 40px; height: 40px; background: linear-gradient(120deg, #09b794 5%, #001b8b 60%, #001b8b 70%,#09b794 90% ); transition: all 0.5s ease-out; background-position: 10% 50%; background-size: 200% auto; display: block;}
#service ul li a.explanation_link.thumb-hover span{ transition: all 0.5s ease-out; background-position: 90% 50%;}


#service ul li.box_3 h4{padding: 24px 0 0;}
#service ul li.box_1 a.explanation_link{margin: 44px auto 0;}
#service ul li.box_2 a.explanation_link{margin: 92px auto 0;}
#service ul li.box_3 a.explanation_link{margin: 110px auto 0;}

#service ul.ul_box_2{margin: 70px 0 0; padding: 65px 0;}
#service ul.ul_box_2 li{width: 100%; display: flex;}
#service ul.ul_box_2 li .img{margin: 0 50px 0 0 ;}
#service ul.ul_box_2 li .text_box{text-align: left; width: 727px;}
#service ul.ul_box_2 li .text_box h4{text-align: left; padding: 0px;}
#service ul.ul_box_2 li .text_box .link_box{display: flex; flex-wrap: wrap; flex-direction: row; padding: 11px 0 0;}
#service ul.ul_box_2 li .text_box .link_box a{padding: 12px 75px 0 0;}
#service ul.ul_box_2 li .text_box a.explanation_link{margin: 60px 0 0 auto;}

@media only screen and (max-width: 768px) {
	/*----------------------------------共通--------------------------------------*/
	body .mover_box .fv_img{ width: 100%; height: 100%;}

	.scrolldown1{ right: 15px; bottom: 45%; height: 137px;}
	.scrolldown1 span{  left:-15px; top: -15px;  }
	.scrolldown1::after{  width: 2px; height: 137px; }
	

	
	/*----------------------------------#fv--------------------------------------*/
	#fv {padding: 500px 0 35px; width: 100%; }
	#fv .fv_box{padding: 0; min-width: auto; }
	#fv .fv_box h2 span{font-size: 30px; line-height: 160%;}
	#fv .fv_box h2.typing-effect span.title_one{width: 100%;  max-width: 300px; margin: 0px;}
	#fv .fv_box h2.typing-effect span.title_twe{width: 100%; max-width: 325px; }
	#fv .fv_box h2.typing-effect span.title_three{width: 100%;  max-width: 290px;}

	
	/*----------------------------------#about_us--------------------------------------*/
	#about_us{ padding: 37px 0 32px; border-radius: 30px;}
	
	#about_us .bg_box .big_tt{  margin: 25px 0 0;}
	#about_us .bg_box .big_tt p{ width: auto; font-size: 35px; margin: 0 0 0 35px; }
	#about_us .bg_box .about_box { display: flex; align-items: center; flex-direction: column-reverse;}
	#about_us .bg_box .about_box img{width: 50%; height: auto; margin: 0 auto; display: block; padding: 38px 0 0;}
	#about_us .bg_box .about_box h3{padding: 23px 0 0; letter-spacing: 0.05em;}
	#about_us .bg_box .about_box .left_box{margin: 0 auto; width: 100%;}
	#about_us .bg_box .about_box .text{ padding: 30px 0 0; font-size: 12px; line-height: 167%; }
	#about_us .bg_box .explanation_link{ width: 212px; text-align: center; margin: 32px auto 0; font-size: 12px; padding: 20px 56px 20px 28px; }

	/*----------------------------------#news--------------------------------------*/
	#news{}
	#news ul{padding: 0 0 0;}
	#news ul li a{align-items: center; width: 100%; padding: 15px 0; font-size: 13px; line-height: 160%;align-items: flex-start}
	#news ul li a span{font-size: 12px; width: auto; margin: 90px; min-width: 90px; padding: 4px 0 2px; line-height: 100%; margin: 0 30px 0 0;}
	#news a.btn.white{ width: auto; height: auto; font-size: 12px; padding: 8px 10px; margin: 0 0 10px auto; }
	#news a.btn.white:before {width: 110%;}
	/*----------------------------------#service--------------------------------------*/
	#service{background: #F1F5F9; padding: 15px 0;}
	.white_bg{background: #fff; border-radius: 36px; padding: 65px 14px 20px;}
	#service .flex_box{padding: 0;}
	#service .flex_box .btn{width: 50%;font-size: 11px; margin: 0 0 8px auto; padding: 10px 0 11px;}
	#service .flex_box .btn:after{ border-right: 1px solid #fff; border-bottom: 1px solid #fff; width: 6px; height: 6px; right: 8%;}
	#service .bg_white{ border-radius: 30px; background: #fff; padding: 65px 14px 30px;}
	#service ul{display: block; padding: 20px 0 0; border-radius: 0;background: none;}
	#service ul li{width: 100%; height: auto; padding:30px 0;}
	#service ul li:not(:last-child){border-bottom: 1px solid #CECECE; border-right: none;}
	#service ul li h4{ font-size: 15px; padding: 20px 0 0 ;}
	#service ul li h4 span{font-size: 26px; font-family: 'Noto-Sans-JP-Medium';}
	#service ul li .link_box{ padding: 10px 0 0; }
	#service ul li .link_box a{font-size: 16px;}
	#service ul li .link_box a:not(:first-child){padding: 5px 0 0;}
	#service ul li .img{ width: 70%; margin: 0 auto;}
	#service ul li .img img{width: 100%; height: auto;}
	#service ul li .img p{ top: 10px; left: 10px; font-size: 16px; }
	#service ul li a.explanation_link{width: 210px;font-size: 12px; padding: 18px 16px 19px 0;background: #fff; box-shadow: 3px 3px 10px 2px rgba(0,0,0,0.1);}
	#service ul li a.explanation_link span{right: 15px;width: 30px; height: 30px; }
	
	#service ul li.box_3 h4{padding: 24px 0 0;}
	#service ul li.box_1 a.explanation_link{margin: 19px auto 0;}
	#service ul li.box_2 a.explanation_link{margin: 19px auto 0;}
	#service ul li.box_3 a.explanation_link{margin: 19px auto 0;}

	
	#service ul.ul_box_2{margin: 35px 0 0; padding: 50px 14px 50px;background: #fff; border-radius: 36px; }
	#service ul.ul_box_2 li{width: 100%; display: block;padding: 0px;}
	#service ul.ul_box_2 li .img{margin: 0 auto ;}
	#service ul.ul_box_2 li .text_box{text-align: center; width: 100%;}
	#service ul.ul_box_2 li .text_box h4{text-align: center; padding: 23px 0 0;}
	#service ul.ul_box_2 li .text_box .link_box{flex-direction: column; padding: 11px 0 0;}
	#service ul.ul_box_2 li .text_box .link_box a{padding: 6px 0 0;}
	#service ul.ul_box_2 li .text_box a.explanation_link{margin: 19px auto 0;}
}