@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/fontawesome/css/all.min.css);
@import url(../libs/aos/aos.css);
/* @import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css); */
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
HRP_works
==============================*/

/* mvp ----------*/
#mvp { background-image: url(../img/HRP_works/kv.jpg); }


/* works_list ----------*/
.works_list { margin-top: 6rem; }
.works_list > div > li { padding: 2.5rem 2rem; background-color: #FFF; box-shadow: 3px 4px 10px 0 rgba(154, 215, 250, 0.20); }
.-bg_blue .works_list > div > li { background-color: #F0F4F6; box-shadow: 2px 2px 8px 0 rgba(6, 102, 158, 0.38); }
.works_list > div > li h4 { display: grid; place-items: center; }
.works_list > div > li h4 span { color: #73B6DA; font-size: 2.2rem; font-weight: 500; text-align: center; }
.works_list > div > li .p { display: block; margin-top: 2rem; text-align: center; }
.works_list > div > li p { margin-top: 2rem; line-height: 1.86; color: #506A79; }
@media screen and (max-width:896px) { /* m */
	.list_wrap { max-width: 50rem; margin-left: auto !important; margin-right: auto !important; }
	.works_list { margin-top: 4rem; }
}


/* experience ----------*/
#experience {}
#experience .works_list h3 { text-align: center; font-size: 2.2rem; font-weight: 500; color: #73B6DA; }


/* projectCase ----------*/
#projectCase {}
#projectCase .case_list { display: flex; flex-direction: column; margin-top: 5rem; gap: 4.8rem; }
#projectCase .case_list > li { display: flex; }
#projectCase .case_list > li > div { display: flex; flex: 1; flex-direction: column; padding: 2rem 3rem; align-items: start; justify-content: center; gap: 2rem; }
#projectCase .case_list > li .detail { position: relative; background-color: #FFF; }
#projectCase .case_list > li .detail .fix { position: absolute; bottom: -2rem; right: 3rem; width: 33.5%; }
#projectCase .case_list > li .detail .c { display: inline-block; margin-bottom: -1rem; padding: 0.6rem 1.2rem; border-radius: 10rem; color: #FFF; background-color: #5894BE; font-size: 1.5rem; font-weight: 400; line-height: 1; }
#projectCase .case_list > li .detail h3 { color: #73B6DA; font-size: 2.2rem; font-weight: 500; }
#projectCase .case_list > li .detail p {}
#projectCase .case_list > li .detail .detail_list { padding-right: 33%; }
#projectCase .case_list > li .detail .detail_list li { display: flex; margin-top: 0.5em; color: #4E88A7; font-size: 1.5rem; font-weight: 500; line-height: 1.4; gap: 0.7rem; }
#projectCase .case_list > li .detail .detail_list li::before { content: url(../img/HCS_works/check_01.svg); margin-top: 0.2rem; }
#projectCase .case_list > li .area { background-color: #5894BE; }
#projectCase .case_list > li .area h4 { color: #FFFF8B; font-size: 1.8rem; font-weight: 500; }
#projectCase .case_list > li .area .area_list { display: flex; flex-flow: wrap; gap: 1rem; }
#projectCase .case_list > li .area .area_list li { width: 10rem; padding: 1rem 0.1rem; background-color: #F0F4F6; }
#projectCase .case_list > li .area .area_list li.nobg { background-color: transparent; }
#projectCase .case_list > li .area .area_list li .i { display: block; text-align: center; }
#projectCase .case_list > li .area .area_list li .t { display: block; margin-top: 1rem; color: #73B6DA; font-size: 1.4rem; font-weight: 500; text-align: center; line-height: 1.2; }
@media screen and (max-width:896px) { /* m */
	#projectCase .case_list > li { flex-direction: column; }
	#projectCase .case_list > li .detail .fix { bottom: -5rem; right: -2rem; width: 33.5%; }
}
@media screen and (max-width:480px) { /* s */
	#projectCase .case_list > li .area .area_list li { width: calc((100% - 1rem) / 2); }
	#projectCase .case_list > li .detail .fix { width: 45%; }
}


/* technologyArea ----------*/
#technologyArea {}
#technologyArea .techno_content_list { margin-top: 6rem; }
#technologyArea .techno_content_list li { background-color: #F0F4F6; }
#technologyArea .techno_content_list li h3 { padding: 1rem 1.5rem; color: #FFF; color: #FFF; background-color: #5894BE; font-size: 2.2rem; font-weight: 500; display: flex; flex-flow: wrap; gap: 1.5rem; align-items: center; }
#technologyArea .techno_content_list li h3 .c { display: inline-block; font-size: 1.5rem; color: #FFF; font-weight: 400; background-color: #71C2F0; border-radius: 10rem; padding: 0.5rem 1rem; }
#technologyArea .techno_content_list li .tw { padding: 2.5rem 4rem; }
#technologyArea .techno_content_list li .tw h4 { padding-right: 22%; color: #73B6DA; font-size: 2.2rem; font-weight: 500; }
#technologyArea .techno_content_list li .tw p { color: #506A79; }
#technologyArea .techno_content_list li .tw .list { margin-top: 2rem; }
#technologyArea .techno_content_list li .tw .list li { font-size: 1.5rem; display: flex; gap: 0.7rem; line-height: 1.4; margin-top: 0.5em; color: #5894BE; font-weight: 500; }
#technologyArea .techno_content_list li .tw .list li::before { content: url(../img/HCS_works/check_01.svg); margin-top: 0.2rem; }


/* jobContent ----------*/
#jobContent {}
#jobContent .job_content_list { margin-top: 6rem; }
#jobContent .job_content_list li { background-color: #FFF; }
#jobContent .job_content_list li h3 { padding: 1rem 1.5rem; color: #FFF; color: #FFF; background-color: #5894BE; font-size: 2.2rem; font-weight: 500; display: flex; flex-flow: wrap; gap: 1.5rem; align-items: center; }
#jobContent .job_content_list li h3 .c { display: inline-block; font-size: 1.5rem; color: #FFF; font-weight: 400; background-color: #71C2F0; border-radius: 10rem; padding: 0.5rem 2rem; }
#jobContent .job_content_list li .tw { padding: 2.5rem 4rem; background-color: #FFF; }
#jobContent .job_content_list li .tw .box { position: relative; padding: 2rem; background-color: #F0F4F6; }
#jobContent .job_content_list li .tw .box .fix { position: absolute; top: 10%; right: -4rem; width: 30%; }
#jobContent .job_content_list li .tw .box h4 { padding-right: 22%; color: #73B6DA; font-size: 2.2rem; font-weight: 500; }
#jobContent .job_content_list li .tw .box li { background-color: transparent; }
#jobContent .job_content_list li .tw .box .list { padding-right: 22%; }
#jobContent .job_content_list li .tw .box .list li { font-size: 1.7rem; display: flex; gap: 0.7rem; line-height: 1.4; margin-top: 0.5em; color: #4E88A7; font-weight: 500; }
#jobContent .job_content_list li .tw .box .list li::before { content: url(../img/HCS_works/check_01.svg); margin-top: 0.2rem; }
#jobContent .job_content_list li .tw .box .cats { display: flex; flex-flow: wrap; margin-top: 2rem; gap: 0.5rem; }
#jobContent .job_content_list li .tw .box .cats li { padding: 0.4em 0.8em; border-radius: 5rem; color: #FFF; background-color: #4E88A7; font-size: 1.3rem; line-height: 1; }
#jobContent .feature { max-width: 96.4rem; margin: auto; }
#jobContent .feature .h3 { color: #73B6DA; }
#jobContent .feature .box { margin-top: 4rem; padding: 3rem 4rem; background-color: #FFF; box-shadow: 2px 2px 8px 0 rgba(6, 102, 158, 0.38); }
#jobContent .feature .box ul {}
#jobContent .feature .box ul li {}
#jobContent .feature .box ul li h4 { color: #73B6DA; font-size: 2rem; font-weight: 500; text-align: center; }
#jobContent .feature .box ul li .p { display: block; margin-top: 2rem; margin-bottom: 2rem; text-align: center; }
#jobContent .feature .box ul li p {}
@media screen and (max-width:480px) { /* s */
	#jobContent .job_content_list { margin-top: 4rem; }
}