@charset "utf-8";
/* ------------------------------------------------------------ #fv */
#fv { background: url(../images2/about/fv_bg.jpg) center center no-repeat; background-size: 1496px; color: #fff;}
#fv h2 span { line-height: 130%; }
#fv p { padding: 10px 0 0;}


.about_inner{width: 1200px; margin: 0 auto;}
h3.h3{font-size: 18px;font-family: 'Noto Sans Japanese medium'; text-align: center; padding: 0px;}
h3.h3 span{font-size: 76px; letter-spacing: 0;}
.flex{display: flex;}
/* ------------------------------------------------------------ #about */
#about{padding: 114px 0 0; overflow: hidden;}
#about .flex{position: relative;}
#about .flex .img{position: absolute; left: -293px; top: 0px;}
#about .flex .text_box{width: 510px; height: auto; padding: 19px 0 6px; margin: 0 0 0 auto;}
#about .flex h3{text-align: left; padding: 0 0 28px;}
#about .flex .text_box .big_tt{font-size: 38px; font-family: 'Noto Sans Japanese bold'; line-height: 145%; color: #000; text-align: left; padding: 0 0 43px;}
#about .flex .text_box .text{font-size: 16px; line-height: 232%;}

/* ------------------------------------------------------------ #fluid_control */
#fluid_control{padding: 189px 0 61px; overflow: hidden;}
#fluid_control .scroll_box{padding: 80px 0 0; width: 80%; margin: 0 auto;}
#fluid_control .fv_box{position: relative;}
#fluid_control .fv_box img{width: 100%; height: auto;}
#fluid_control .fv_box a.fv_logo{position: absolute; -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
#fluid_control .fv_box a.fv_logo img{width: 100%; height: auto;}
/*
#fluid_control .fv_box a.link_logo_1{top: 22.2%; left: 38%; width: 8.66%; height: auto;}
#fluid_control .fv_box a.link_logo_2{top: 29.7%; left: 27.5%; width: 7.2%; height: auto;}
#fluid_control .fv_box a.link_logo_3{top: 52.35%; left: 34.92%; width: 7.2%; height: auto;}
#fluid_control .fv_box a.link_logo_4{bottom: 13.3%; left: 14.05%; width: 7.2%; height: auto;}
#fluid_control .fv_box a.link_logo_5{bottom: 28%; right: 40.9%; width: 7.2%; height: auto;}
#fluid_control .fv_box a.link_logo_6{top: 32.5%; right: 21.8%; width: 7.2%; height: auto;}
#fluid_control .fv_box a.link_logo_7{bottom: 28.5%; right: 11.2%; width: 7.2%; height: auto;}
*/

#fluid_control .fv_box a.link_logo_1{top: 27.2%; left: 37.95%; width: 8.37%;}
#fluid_control .fv_box a.link_logo_2{top: 32.66%; left: 18.5%; width: 7.2%;}
#fluid_control .fv_box a.link_logo_3{top: 58.8%; left: 31.95%; width: 7.2%;}
#fluid_control .fv_box a.link_logo_4{bottom: 11.3%; left: 10.38%; width: 7.2%;}
#fluid_control .fv_box a.link_logo_5{bottom: 31.1%; right: 13.8%; width: 7.15%;}
#fluid_control .fv_box a.link_logo_6{top: 31.7%; right: 20%; width: 7.16%;}
#fluid_control .fv_box a.link_logo_7{bottom: 28.5%; right: 11.2%;}

#fluid_control .about_item{ width: 100%; height: auto; }
#fluid_control .about_btn{ padding: 50px 0; }

#fluid_control .title_box{ padding: 0 0 40px; }
#fluid_control .title_box h3{padding: 0 0 43px;}
#fluid_control .title_box p.text{font-size: 16px; line-height: 232%;text-align: center; }
#fluid_control .fluid_list{padding: 160px 0 0;}
#fluid_control .fluid_list .content_box:not(:first-child){padding: 104px 0 0;}
#fluid_control .fluid_list .content_box .content_box_2{position: relative; width: 100%;}
#fluid_control .fluid_list .content_box .content_box_2:before{content: ""; display: block; width: 49%; height: 384px; background: linear-gradient(55deg,#72c1e6 ,#90a3d0 ,#70c7b8); position: absolute; left: 0px; top: 32px;}
#fluid_control .fluid_list .content_box.right_box .content_box_2:before{left: auto; right: 0px;}
#fluid_control .fluid_list .content_box .flex{position: relative; z-index: 1; align-items: center; justify-content: space-between;}
#fluid_control .fluid_list .content_box.right_box .flex{flex-direction: row-reverse;}
#fluid_control .fluid_list .content_box .flex .text_box{width: 540px; height: auto; margin: 0 0 0 0;}
#fluid_control .fluid_list .content_box.right_box .flex .text_box{margin: 0px auto 0px 0px;}

#fluid_control .fluid_list .content_box .flex .img_box{position: relative;}
#fluid_control .fluid_list .content_box .flex .img_box .mini_img{ display: flex; position: absolute;bottom: -61px; right: -32px;}
#fluid_control .fluid_list .content_box .flex .img_box .mini_img.mini_img_2{right: -132px;}
#fluid_control .fluid_list .content_box .flex .img_box .mini_img.mini_img_3{width: 560px; height: auto; right: -132px;}
#fluid_control .fluid_list .content_box .flex .img_box .mini_img.mini_img_3 img{width: 50%; height: auto;}
#fluid_control .fluid_list .content_box .flex .img_box .mini_img img:not(:first-child){margin: 0 0 0 10px;}
#fluid_control .fluid_list .content_box .flex .text_box h4{font-family: 'Noto Sans Japanese medium'; font-size: 34px; line-height: 145%; text-align: left;}
#fluid_control .fluid_list .content_box .flex .text_box p{line-height: 223%; font-size: 18px; padding: 21px 0 0;}
#fluid_control .fluid_list .content_box .flex .text_box p a{cursor: pointer;line-height: 223%; font-size: 18px; color: #5EABD1; border-bottom: 1px solid #5EABD1;}
/* ------------------------------------------------------------ #vision */
#vision{padding: 74px 0 0 ;}
#vision .title_tt_box{padding: 40px 0 0; width: 800px; margin: 0 auto;}
#vision .title_tt_box p {font-size: 16px; line-height: 232%; text-align: center;}
#vision .title_tt_box p:not(:last-child){padding: 0 0 20px; }
#vision .vision_bg_box{position: relative;margin: 59px 0 0;}
#vision .vision_bg_box .link_logo{position: absolute; -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
#vision .vision_bg_box .link_logo img{width: 100%; height: auto;}
#vision .vision_bg_box .link_logo_1{top: 27%; left: 41.44%; width: 8.5%; height: auto;}
#vision .vision_bg_box .link_logo_2{top: 33%; left: 12.45%; width: 7.2%; height: auto;}
#vision .vision_bg_box .link_logo_3{top: 56.43%; left: 39.5%; width: 7.2%; height: auto;}
#vision .vision_bg_box .link_logo_4{bottom: 11.8%; left: 14.0%; width: 7.2%; height: auto;}
#vision .vision_bg_box .link_logo_5{bottom: 30.5%; right: 13%; width: 7.2%; height: auto;}
#vision .vision_bg_box .link_logo_6{top: 28.45%; right: 17.5%; width: 7.2%; height: auto;}
#vision .vision_bg_box .link_logo_7{bottom: 8.45%; right: 27.5%; width: 7.2%; height: auto;}

#vision .vision_bg_box .vision_img_1{width: 100%; height: auto;}
#vision .flex{justify-content: space-between; padding: 114px 0 0;}
#vision .flex .text_box{margin: 0 0 0 97px; width: 506px;}
#vision .flex .text_box h4{font-family: 'Noto Sans Japanese bold'; font-size: 38px; line-height: 156%;}
#vision .flex .text_box p{font-size: 16px; line-height: 232%; padding: 29px 0 0;}


/* ------------------------------------------------------------ #challenge */
#challenge{padding: 60px 0 92px;}
#challenge .title_tag{font-family: 'Noto Sans Japanese medium'; font-size: 26px; text-align: center; padding: 0 0 20px; line-height: 160%;}
#challenge .title_tt_box{padding: 0 0 100px; width: 800px; margin: 0 auto;}
#challenge .title_tt_box p {font-size: 16px; line-height: 232%; text-align: center;}
#challenge .title_tt_box p:not(:last-child){padding: 0 0 20px; }

#challenge h3{padding: 0 0 49px;}
#challenge .box_1 .img{width: 100%; height: auto;}
#challenge .box_1 .img img{font-size: 100%; height: auto;}
#challenge .box_1 .flex{justify-content: space-between; padding: 59px 0 0;}
#challenge .box_1 .flex h4{font-size: 45px; line-height: 145%; font-family: 'Noto Sans Japanese bold'; margin: -10px 0 0;}
#challenge .box_1 .flex p{line-height: 223%; font-size: 18px; width: 755px; height: auto;}
#challenge .box_1 .text_1{text-align: center; font-size: 24px; line-height: 184%;font-family: 'Noto Sans Japanese medium'; padding: 55px 0 0;}

#challenge .box_2{padding: 40px 0 0;}
#challenge .box_2 .flex{justify-content: space-between; }
#challenge .box_2 .flex .box{width: 376px; height: auto;}
#challenge .box_2 .flex .box p{text-align: center; font-size: 20px; line-height: 170%; padding: 14px 0 0;}
#challenge .box_2 .flex .box:not(:last-child) p{padding: 33px 0 0;}
#challenge .box_2 .text_2{text-align: center; font-size: 22px; line-height: 184%;font-family: 'Noto Sans Japanese medium'; padding: 60px 0 0;}

/* ------------------------------------------------------------ #our_value */
#our_value{background: url(../images2/about/our_value_bg_1.jpg) no-repeat center center; background-size: cover; padding: 105px 0 171px;}
#our_value h3{color: #fff;}
#our_value .text{font-size: 20px; line-height: 230%; text-align: center; color: #fff; padding: 56px 0 0;}
#our_value .box_list{padding: 67px 0 0; width: 1139px; margin: 0 auto;}
#our_value .box_list .box{width: 280px; height: auto;background: rgba(0,0,0,0.81); text-align: center; color: #fff;}
#our_value .box_list .box .box_2{padding: 37px 19px 45px; }
#our_value .box_list .box:not(:last-child){margin-right: 6px;}

#our_value .box_list .box h4{font-size: 22px; line-height: 160%; margin: 16px 0 0;}
#our_value .box_list .box p{font-size: 14px; line-height: 208%; padding: 16px 0 0;}

/* ------------------------------------------------------------ .top_page */
.top_page{padding: 95px 0 112px;}
.top_page p{padding: 0px;}

@-webkit-keyframes bounce {
	0%,
	20%,
	53%,
	80%,
	to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translateZ(0); transform: translateZ(0);}
	
	40%,
	43% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0);}
	
	40%,
	43%,
	70% { -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); animation-timing-function: cubic-bezier(.755, .05, .855, .06);	}
	70% {-webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0);}
	90% {-webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0);}
}

@keyframes bounce {
	0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translateZ(0); transform: translateZ(0);}
	
	40%,
	43% {-webkit-transform: translate3d(0, -30px, 0);transform: translate3d(0, -30px, 0);}
	
	40%,
	43%,
	70% {-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);animation-timing-function: cubic-bezier(.755, .05, .855, .06);}
	
	70% {-webkit-transform: translate3d(0, -15px, 0);transform: translate3d(0, -15px, 0);}
	90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0);}
}
@media only screen and (max-width:640px){
	/* ------------------------------------------------------------ #fluid_control */
	#fv {background: url(../images2/about/fv_bg_sp.jpg) center center no-repeat;  background-size: 100%; }
	#fv h2 span { line-height: 130%; }
	#fv p { padding: 10px 0 0;}
		
	.about_inner{width: 90%; margin: 0 auto;}
	h3.h3{font-size: 16px; line-height: 120%;}
	h3.h3 span{font-size: 34px; line-height: 120%;}
	.flex{display: block;}
	/* ------------------------------------------------------------ #about */
	#about{padding: 30px 0 0;}
	#about .about_inner{width: 100%;}
	#about .flex .img{position: relative; left: auto; top: auto; width: 95%; margin: 0 auto 0 0;}
	#about .flex .img img{width: 100%; height: auto;}
	#about .flex .text_box{width: 90%; height: auto; padding: 44px 0 0px; margin: 0 auto;}
	#about .flex h3{padding: 0 0 27px;width: 90%; margin: 0 auto; text-align: center;}
	#about .flex .text_box .big_tt{font-size: 22px; padding: 0 0 14px;}
	#about .flex .text_box .text{font-size: 14px; line-height: 200%;}
	
	/* ------------------------------------------------------------ #fluid_control */
	#fluid_control{padding: 43px 0px 0; }
	#fluid_control .scroll_box{padding: 40px 0 0; width: 100%; margin: 0 auto;}
	#fluid_control .fv_slider{overflow-y: scroll; }
	#fluid_control .fv_slider .fv_box{width: 100%; height: auto; min-width: 661px;}
	#fluid_control img{width: 100%; height: auto;}
	#fluid_control .fv_box a.link_logo_1{top: 15.2%; left: 36%; width: 13.66%;}
	#fluid_control .fv_box a.link_logo_2{top: 24.7%; left: 22.5%; width: 13.2%;}
	#fluid_control .fv_box a.link_logo_3{top: 47.35%; left: 31.92%; width: 13.2%;}
	#fluid_control .fv_box a.link_logo_4{bottom: 14.3%; left: 10.8%; width: 13.2%;}
	#fluid_control .fv_box a.link_logo_5{bottom: 26%; right: 37.9%;width: 13.2%;}
	#fluid_control .fv_box a.link_logo_6{top: 27.5%; right: 16.4%; width: 13.2%;}
	#fluid_control .fv_box a.link_logo_7{bottom: 29.5%; right: 8.2%; width: 13.2%;}
	
	#fluid_control .fv_box a.link_logo_1{top: 19.4%; left: 35.6%;}
	#fluid_control .fv_box a.link_logo_2{top: 27%; left: 15.5%;}
	#fluid_control .fv_box a.link_logo_3{top: 53.7%; left: 28.92%;}
	#fluid_control .fv_box a.link_logo_4{bottom: 11.7%; left: 7.3%;}
	#fluid_control .fv_box a.link_logo_5{bottom: 30%; right: 10.9%;}
	#fluid_control .fv_box a.link_logo_6{top: 27.5%; right: 17%;}
	#fluid_control .fv_box a.link_logo_7{bottom: 28.5%; right: 11.2%;}

	#fluid_control .about_btn{ padding: 30px 0; }
	#fluid_control .btn.common{ width: 80%; }
	#fluid_control .btn.common a{ width: 100%; }

	#fluid_control img{width: 100%; height: auto;}
	#fluid_control .title_box{ padding: 0 0 25px; }
	#fluid_control .title_box h3{padding: 0 0 21px;}
	#fluid_control .title_box p.text{font-size: 14px;line-height: 200%; text-align: left;}
	#fluid_control .fluid_list{padding: 80px 0 0;}
	#fluid_control .fluid_list .content_box:not(:first-child){padding: 6% 0 0;}
	#fluid_control .fluid_list .content_box .content_box_2{position: relative; width: 100%;}
	#fluid_control .fluid_list .content_box .content_box_2:before{display: none;}
	#fluid_control .fluid_list .content_box.right_box .content_box_2:before{left: auto; right: 0px;}
	#fluid_control .fluid_list .content_box .flex{position: relative; z-index: 1; }
	#fluid_control .fluid_list .content_box.right_box .flex{flex-direction: row-reverse;}
	#fluid_control .fluid_list .content_box .flex .text_box{width: 100%; height: auto; margin: 45px 0 0 0;}
	#fluid_control .fluid_list .content_box.right_box .flex .text_box{margin: 34px 0px 0px;}
	#fluid_control .fluid_list .content_box .flex .img_box { position: relative; padding: 6% 0 0;}
	#fluid_control .fluid_list .content_box .flex .img_box::before { content: ""; display: block; width: 95%; height: auto; background: linear-gradient(55deg,#72c1e6 ,#90a3d0 ,#70c7b8); position: absolute; left: 0px; top: 0; padding: 60% 0 0 ;}
	#fluid_control .fluid_list .content_box .flex .img_box img{width: 95%; height: auto; position: relative; z-index: 1; margin: 0 0px 0 auto; display: block;}
	
	#fluid_control .fluid_list .content_box .flex .img_box .mini_img{ display: flex; bottom: -10%; right: 5%; width: calc(100% / 3.08); height: auto;}
	#fluid_control .fluid_list .content_box .flex .img_box .mini_img.mini_img_2{ left: auto; right: 0; width: 98%; height: auto;}
	#fluid_control .fluid_list .content_box .flex .img_box .mini_img.mini_img_2 img{width: calc(100% / 3.08); height: auto;}
	#fluid_control .fluid_list .content_box .flex .img_box .mini_img.mini_img_3{width: 98%; height: auto; right: -0;}
	#fluid_control .fluid_list .content_box .flex .img_box .mini_img.mini_img_3 img{width: calc(100% / 2.5); height: auto;}
	#fluid_control .fluid_list .content_box .flex .img_box .mini_img img:not(:first-child){margin: 0 0 0 6px;}
	#fluid_control .fluid_list .content_box .flex .text_box h4{ font-size: 22px; text-align: center;}
	#fluid_control .fluid_list .content_box .flex .text_box p{ font-size: 14px; padding: 13px 0 0; line-height: 200%;}
	#fluid_control .fluid_list .content_box .flex .text_box p a{cursor: pointer;line-height: 200%; font-size: 14px;}
	#fluid_control .fluid_list #set1{padding: 0;}
	
	/* ------------------------------------------------------------ #vision */
	#vision{padding: 50px 0 0;}
	#vision .title_tt_box{padding: 20px 0 0; width: 100%; margin: 0 auto;}
	#vision .title_tt_box p {font-size: 14px; line-height: 200%; text-align: left;}
	#vision .title_tt_box p:not(:last-child){padding: 0 0 10px; }
	#vision .vision_bg_box .link_logo_1{top: 15%; left: 37.44%; width: 14.5%;}
	#vision .vision_bg_box .link_logo_2{top: 28%; left: 9.45%; width: 13.2%; }
	#vision .vision_bg_box .link_logo_3{top: 48.43%; left: 31.5%; width: 13.2%;}
	#vision .vision_bg_box .link_logo_4{bottom: 11.8%; left: 10%; width: 13.2%;}
	#vision .vision_bg_box .link_logo_5{bottom: 31.5%; right: 10%; width: 13.2%;}
	#vision .vision_bg_box .link_logo_6{top: 20.45%; right: 16.5%; width: 13.2%;}
	#vision .vision_bg_box .link_logo_7{bottom: 9.45%; right: 23.5%; width: 13.2%;}
	#vision .vision_bg_slider{overflow-y: scroll; }
	#vision .vision_bg_slider .vision_bg_box{width: 100%; height: auto; min-width: 608px;margin: 40px 0 0;}
	#vision .vision_img_1{ margin: 14px 0 0;}
	#vision .vision_bg_box .vision_img_1 { margin: 0;}
	#vision .flex{padding: 30px 0 0;}
	#vision .flex .img_box{width: 100%; height: auto;}
	#vision .flex .img_box img{width: 100%; height: auto;}
	#vision .flex .text_box{margin: 20px 0 0; width: 100%;}
	#vision .flex .text_box h4{ font-size: 22px; }
	#vision .flex .text_box p{font-size: 14px; line-height: 200%; padding: 20px 0 0;}
	
	
	/* ------------------------------------------------------------ #challenge */
	#challenge{padding: 40px 0 50px;}
	#challenge .title_tag{font-size: 18px; padding: 0 0 10px; }
	#challenge .title_tt_box{padding: 0 0 40px; width: 100%; margin: 0 auto;}
	#challenge .title_tt_box p {font-size: 14px; line-height: 200%; text-align: left;}
	#challenge .title_tt_box p:not(:last-child){padding: 0 0 10px; }
	
	#challenge img{width: 100%; height: auto;}
	#challenge h3{padding: 0 0 21px;}
	#challenge .box_1 .img{width: 100%; height: auto;}
	#challenge .box_1 .img img{width: 100%; height: auto;}
	#challenge .box_1 .flex{justify-content: space-between; padding: 20px 0 0;}
	#challenge .box_1 .flex h4{font-size: 22px; margin: 0;}
	#challenge .box_1 .flex p{font-size: 14px; width: 100%; padding: 15px 0 0; line-height: 200%;}
	#challenge .box_1 .text_1{font-size: 16px; padding: 36px 0 0; text-align: left; }
	
	#challenge .box_2{padding: 28px 0 0;}
	#challenge .box_2 .flex{justify-content: space-between; }
	#challenge .box_2 .flex .box{width: 100%; height: auto;}
	#challenge .box_2 .flex .box:not(:last-child) {margin: 0 0 5%;}
	#challenge .box_2 .flex .box p{ font-size: 14px; padding: 8px 0 0;}
	#challenge .box_2 .flex .box:not(:last-child) p{padding: 10px 0 0;}
	#challenge .box_2 .text_2{text-align: left; font-size: 16px; padding: 30px 0 0;}
	
	/* ------------------------------------------------------------ #our_value */
	#our_value{background: url(../images2/about/our_value_bg_1_sp.jpg) no-repeat center center; background-size: cover; padding: 39px 0 0;}
	#our_value .text{font-size: 16px; padding: 28px 0 0; line-height: 250%;}
	#our_value .box_list{padding: 33px 0 0; width: 100%; margin: 0 auto;display: flex; flex-wrap: wrap;}
	#our_value .box_list .box{width: 49.5%;margin-bottom: 35px;}
	#our_value .box_list .box .box_2{padding: 20px 11px 23px; }
	#our_value .box_list .box:not(:last-child){margin-right: 0;}
	#our_value .box_list .box:not(:nth-child(2n)){margin-right: 1%;}
	#our_value .box_list .box img{width: 45%; height: auto;}
	#our_value .box_list .box h4{font-size: 13px; margin: 10px 0 0;}
	#our_value .box_list .box p{font-size: 12px; padding: 9px 0 0; text-align: left; line-height: 167%;}
	
	/* ------------------------------------------------------------ .top_page */
	.top_page{padding: 50px 0 77px;}
	.top_page p{padding: 0px; width: 70%; margin: 0 auto;}
	.top_page p a{width: 100%; height: auto;}
	
	
	.scroll_box{position: relative;}
	.scroll_box .scroll_tt{opacity: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52%; height: auto; padding: 15px 0; background: rgba(0,0,0,0.5); z-index: 10; border-radius: 10px; text-align: center;}
	.scroll_box .scroll_tt img{ width: 36% !important; height: auto; margin: 0 11px 0 0;}
	.scroll_box .scroll_tt p{text-align: center; color: #fff; font-size: 13px;font-family: 'Noto Sans Japanese medium'; padding: 10px 0 0;}
}