@charset "utf-8";

/* ---------- Common ---------- */
@media (max-width:1199.9px){
	html{font-size: 1rem;}
	.container .inner_section{width: 100%; padding: 7rem 4rem;}
}
@media (max-width:1110px){
	.container .con_title .b_t{font-size: 1.1em; line-height: 1.45em;}
}
@media (max-width:1090px){
	.container h3{font-size: 1.2rem;}
	.container .inner_section{padding: 7rem 0;}
	.container .inner_section h3{padding:0 0 2rem}
	.container .con_title .a_t{font-size: 2.1rem; line-height: 2.8rem;}
	.container .con_title .b_t{font-size: 1.1em; line-height: 1.45em;}
}
@media (max-width:996px){
	.container .con_title .a_t{font-size: 2.5rem; line-height: 3.2rem;}
	.container .con_title .b_t{font-size: 1.2em; line-height: 1.45em;}
}
@media (max-width:678px){
	.container .inner_section{padding: 6rem 0;}
	.container .inner_section h3{padding: 0 0 1.2rem;}
	.container .con_title .a_t{font-size: 2rem; line-height: 2.6rem;}
	.container .con_title .b_t{font-size: 1.1em; line-height: 1.45em; padding: 0.8rem 0 0;}
}
@media (max-width:545px){
	.container .inner_section{width: 100%; padding: 6rem 0;}
	.container .con_title .a_t{font-size: 1.7rem; line-height: 2.2rem;}
}
@media (max-width:450px){
	.container h3{font-size: 1rem;}
	.container .inner_section{padding: 3.5rem 0;}
	.container .inner_section h3{padding:0 0 1.2rem}
	.container .con_title .a_t{font-size: 1.5rem; line-height: 1.9rem;}
	.container .con_title .b_t{font-size: 0.96em; line-height: 1.45em; padding: 0.3rem 0 0;}
}
@media (max-width:318px){
	.container .inner_section{padding: 3rem 0;}
	.container .con_title .a_t{font-size: 1.2rem; line-height: 1.75rem;}
	.container .con_title .b_t{font-size: 0.96em; line-height: 1.45em; padding: 0.3rem 0 0;}
}
@media (max-width:280px){
	body{min-width: 280px;}
}
/* ---------- //Common ---------- */



/* ---------- Header ---------- */
@media (max-width:1199.9px){
	header ul.gnb > li:last-child{padding: 0 0 0 2rem;}
}
@media (max-width: 1090px){
	header{min-width: auto;}
}
@media (max-width: 920px) and (orientation: landscape){
	header{height: 4rem; padding: 0 1.8rem;}
	header h1 > a{width: 98px; height: 38px;}
	header ul.gnb > li{padding: 0 1.2rem;}
	header ul.gnb > li > a{font-size: 0.92em; line-height: 1em;}
}
@media (max-width:850px){
	header{height: 60px; padding: 0 1.8rem;}
	header h1 > a{width: 98px; height: 38px;}
	header ul.gnb > li{padding: 0 1.2rem;}
	header ul.gnb > li > a{font-size: 0.92em; line-height: 1em;}
}
@media (max-width:740px){
	header ul.gnb{min-width: auto;}
	header ul.gnb > li{padding: 0 1.2rem;}
	header ul.gnb > li:last-child{padding: 0 0 0 1.2rem;}
}
@media (max-width:620px){
	header ul.gnb > li.menu_introduce{display: none; visibility: hidden;}
	header ul.gnb > li.menu_mission{display: none; visibility: hidden;}
	header ul.gnb > li.menu_contact > a > span{display: none; visibility: hidden;}
}
@media (max-width:414px){
	header{padding: 0 2rem 0 1.6rem;}
	header ul.gnb{font-size: 1.2em;}
	header h1 > a{background: url(../img/logo_w_s.svg) no-repeat; width: 34px; height: 34px;}
	.header.invert_w > h1 > a{background: url(../img/logo_b_s.svg) no-repeat;}
	.header.invert_b > h1 > a{background: url(../img/logo_w_s.svg) no-repeat;}
}
@media (max-width:375px){
	header{height: 58px; padding: 0 1.2rem;}
	header h1 > a{width: 32px; height: 32px;}
	header ul.gnb{font-size: 1em;}
	header ul.gnb > li{padding: 0 0.8rem;}
}
@media (max-width:320px){
	header{min-width: 280px;}
}
/* ---------- //Header ---------- */



/* ---------- Top Visual ---------- */
@media (max-width:1090px){
	.top_con .wrap_text .con_text .title{font-size: 3em; line-height: 1em;}
	.top_con .wrap_text .con_text .text{font-size: 1.3rem; line-height: 1.35em;}
}
@media (max-width:740px){
	.top_con .wrap_text .con_text .title{font-size: 2.6em; line-height: 1em;}
	.top_con .wrap_text .con_text .text{font-size: 1.2rem; line-height: 1.35em;}
	.top_con .top_wrap > video.f_w, .top_con .top_wrap > img.f_w{display: none; visibility: hidden;}
	.top_con .top_wrap > video.f_m, .top_con .top_wrap > img.f_m{display: block; visibility: visible;}
}
@media (max-width:414px){
	.top_con .wrap_text .con_text .title{font-size: 2.3em; line-height: 1em;}
	.top_con .wrap_text .con_text .text{font-size: 1.2rem; line-height: 1.35em;}
}
@media (max-width:319px){
	.top_con .wrap_text .con_text .title{font-size: 1.8em; line-height: 1em;}
	.top_con .wrap_text .con_text .text{font-size: 1rem; line-height: 1.2em;}
}
/* ---------- //Top Visual ---------- */


/* ---------- Section01 - about ---------- */
@media (max-width:1199.9px){
	.con01 .section_left{width: 40%;}
	.con01 .section_right{width: 60%;}
	.con01 .a_t span.inline{display: block;}
}
@media (max-width:1110px){
	.con01 .inner_section{width: 86%; margin: 0 auto;}
	.con01 .section_left{width: 42%;}
	.con01 .section_right{width: 58%;}
	.con01 .a_t{font-size: 2.1rem; line-height: 3.05rem;}
	.con01 .a_t .sym_eight{width: 21px ; height: 43px; background-size: 21px 43px; margin: 0 0.2rem 0 0;}
	.con01 .a_t .sym_eight.hz{margin: 0 0.6rem 0;}
	.con01 .b_t{font-size: 1.1em; line-height: 1.45em; padding: 1.4rem 0 0;}
}
@media (max-width:996px){
	.con01 .a_t{font-size: 2.5rem; line-height: 3.2rem;}
	.con01 .section_left{float: none; width: 100%; padding: 0 0 5rem;}
	.con01 .section_right{float: none; width: 100%;}
	.con01 .section_left .a_t .t_area{display:inline-block; margin: 0;}
	.con01 .section_right .a_t .t_area{display:inline-block; margin: 0;}
	.con01 .a_t .t_area.block{display: block;}
	.con01 .a_t .sym_eight{width: 18px; height: 38px; background-size: 18px 38px; margin: 0 0.2rem 0 0;}
	.con01 .a_t .sym_eight.hz{margin: 0 0.4rem 0;}
	.con01 .b_t{font-size: 1.15em; line-height: 1.45em; padding: 0.8rem 0 0;}
}
@media (max-width:678px){
	.con01 .a_t{font-size: 2rem; line-height: 2.6rem;}
	.con01 .a_t .sym_eight{width: 18px; height: 38px; background-size: 18px 38px; margin: 0 0.2rem 0 0;}
	.con01 .b_t{font-size: 1.1em; line-height: 1.45em; padding: 1rem 0 0;}
}
@media (max-width:545px){
	.con01 .a_t{font-size: 1.7rem; line-height: 2.4rem;}
	.con01 .section_left{float: none; width: 100%; padding: 0 0 3rem;}
	.con01 .section_left .a_t .t_area{margin: 0;}
	.con01 .section_right .a_t .t_area{margin: 0 0 0.6rem;}
	.con01 .a_t .sym_eight{width: 13px; height: 31px; background-size: 13px 31px; margin: 0 0.2rem 0 0;}
	.con01 .a_t .sym_eight.hz{margin: 0 0.4rem 0;}
}
@media (max-width:450px){
	.con01 .a_t{font-size: 1.4rem; line-height: 2rem;}
	.con01 .b_t{font-size: 0.96em; line-height: 1.45em; padding: 0.3rem 0 0;}
	.con01 .section_right .b_t{padding: 0.5rem 0 0;}
}
@media (max-width:414px){
	.con01 .a_t span.inline{display: block;}
}
@media (max-width:370px){
	.con01 .a_t span.block{display: inline-block;}
}
@media (max-width:319px){
	.con01 .a_t span.inline{display: inline-block;}
	.con01 .a_t{font-size: 1.2rem; line-height: 1.8rem;}
	.con01 .b_t{font-size: 0.96em; line-height: 1.45em; padding: 0.3rem 0 0;}
}
/* ---------- //Section01 - about ---------- */



/* ---------- Section02 - service ---------- */
.con02 .con_service ul.f_list li span.inline{display: inline-block;}
.con02 .con_service ul.f_list li span.block{display: inline-block;}
.con02 .con_service ul.f_list li.list02 span.inline,.con02 .con_service ul.f_list li.list03 span.inline{display: block;}
@media (max-width:1199.9px){
	.con02 .con_service .img_area > img{width: 28rem; height: auto; margin: 6rem 0 0 2rem;}
}
@media (max-width:1090px){
	.con02 .inner_section{width: 86%; margin: 0 auto;}
	.con02 .con_service ul.f_list li{padding: 1.5rem 0 0.7rem 2.2rem; background-size: 1.8rem 1.8rem; background-position: 0 1.2rem;}
	.con02 .con_service ul.f_list li .title{font-size: 1.3em; line-height: 1em;}
	.con02 .con_service ul.f_list li .s_t{font-size: 1.1em; line-height: 1.4em;}
	.con02 .con_service .img_area > img{width: 25rem; height: auto; margin: 6rem 0 0 3rem;}
}
@media (max-width:996px){
	.con02 .con_title .a_t{float: none; width: 100%; box-sizing: border-box; padding: 0;}
	.con02 .con_title .b_t{float: none; width: 100%; padding: 0.8rem 0 0;}
	.con02 .con_service .img_area{float: none; width: 100%; text-align: center;}
	.con02 .con_service .img_area > img{width: 26rem; height: auto; margin: 4rem 0 0;}
	.con02 .con_service ul.f_list{float: none; display: flex; flex-wrap: wrap; width: 100%; padding: 2.5rem 0 0;}
	.con02 .con_service ul.f_list li{width: 50%; box-sizing: border-box; padding: 1.5rem 0 1.5rem 2.4rem; background-size: 2rem 2rem; background-position: 0 1.3rem; background-repeat: no-repeat;}
	.con02 .con_service ul.f_list li .title{font-size: 1.4em; line-height: 1em;}
	.con02 .con_service ul.f_list li .s_t{font-size: 1.2em; line-height: 1.4em;}
}
@media (max-width:860px){
	.con02 .con_title .b_t .block{display: inline-block;}
	.con02 .con_service ul.f_list{padding: 2rem 0 0;}
	.con02 .con_service ul.f_list li{padding: 1.1rem 0 1.1rem 2.2rem; background-size: 1.8rem 1.8rem; background-position: 0 0.8rem; background-repeat: no-repeat;}
	.con02 .con_service ul.f_list li .title{font-size: 1.3em; line-height: 1em; padding: 0 0 0.6rem;}
	.con02 .con_service ul.f_list li .s_t{font-size: 1.2em; line-height: 1.4em;}
	.con02 .con_service ul.f_list li span.block{display: block;}
}
@media (max-width:678px){
	.con02 .con_service .img_area > img{width: 70%; height: auto; margin: 2em 0 0;}
	.con02 .con_service ul.f_list{display: block;}
	.con02 .con_service ul.f_list li{width: 100%;}
	.con02 .con_service ul.f_list li span.block{display: inline-block;}
	.con02 .con_service ul.f_list li.list02 span.inline,.con02 .con_service ul.f_list li.list03 span.inline{display: inline-block;}
	.con02 .con_service ul.f_list li .s_t{font-size: 1.1em; line-height: 1.45em;}
}
@media (max-width:545px){
	.con02 .con_service .img_area > img{width: 80%; height: auto; margin: 2em 0 0;}
}
@media (max-width:450px){
	.con02 .con_service .img_area > img{width: 90%; height: auto; margin: 2em 0 0;}
	.con02 .con_service ul.f_list li{padding: 1rem 0 1rem 1.8rem; background-size: 1.5rem 1.5rem; background-position: 0 0.8rem; background-repeat: no-repeat;}
	.con02 .con_service ul.f_list li .title{font-size: 1.2em; line-height: 1em; padding: 0 0 0.4rem;}
	.con02 .con_service ul.f_list li .s_t{font-size: 0.96em; line-height: 1.45em;}
}
/* ---------- //Section02 - service ---------- */



/* ---------- Section03 - history ---------- */
.con03 .con_title span.inline{display: inline-block;}
.con03 .con_title span.block{display: block;}

@media (max-width:1199.9px){
	.con03 .con_history ul.flow{background: none; padding: 5rem 0 0; display: flex; flex-wrap: wrap;}
	.con03 .con_history ul.flow li{float: none; position: relative; padding: 0 1rem 6rem 0;}
	.con03 .con_history ul.flow li::after{content: ''; position: absolute; right: 15px; top: -2px; width: 12px; height: 12px;
		background: url(../img/icon_arrow_right_line.svg) no-repeat; background-size: 12px 12px;}
	.con03 .con_history ul.flow li:last-child::after{display: none;}
	.con03 .con_history ul.flow .t_year{font-size: 1.5rem;}
	.con03 .con_history ul.flow .t_year::before{content:''; flex-grow: 1; height: 2px;background-color: #e0e0e0; order: 2;}
	.con03 .con_history ul.flow li:last-child .t_year::before{display: none;}
	.con03 .con_graph{padding: 2rem 0 0;}
}
@media (max-width:1090px){
	.con03 .inner_section{width: 86%; margin: 0 auto;}
	.con03 .con_history ul.flow li{width: 33.3333%;padding: 0 1rem 5rem 0;}
	.con03 .con_history ul.flow li:nth-child(3n+0){width: 33.3333%;}
	.con03 .con_history ul.flow .t_year{font-size: 1.3rem;}
	.con03 .con_history ul.flow .a_t{font-size: 1.1em; line-height: 1.3em;}
	.con03 .con_history ul.flow .b_t{font-size: 1.3em; line-height: 1.3em;}
	.con03 .con_graph .section_left > img{width: 60%; height: auto; margin: 3rem 0 0;}
	.con03 .con_graph .section_right ul.count_list li .count_area{font-size: 2.1em;}
	.con03 .con_graph .section_right ul.count_list li .count_area .arrow_right{width: 14px; height: 21px;background-size: 14px 21px; margin: 0 0.6rem;}
}
@media (max-width:996px){
	.con03 .con_title .b_t{padding: 0.8rem 0 0;}
	.con03 .con_history ul.flow li{width: 50%; padding: 0 1rem 5rem 0;}
	.con03 .con_history ul.flow li:nth-child(3n+0){width: 50%;}
	.con03 .con_graph{padding: 0;}
	.con03 .con_graph .section_left{width: 50%;}
	.con03 .con_graph .section_left > img{width: 80%; height: auto;}
	.con03 .con_graph .section_right{width: 50%;}
	.con03 .con_graph .section_right ul.count_list li .count_area{font-size: 1.8em;}
	.con03 .con_graph .section_right ul.count_list li .s_t{font-size: 1.1em;}
}
@media (max-width:860px){
	.con03 .con_history ul.flow{padding: 4rem 0 0;}
	.con03 .con_history ul.flow li{padding: 0 1rem 4rem 0;}
	.con03 .con_graph .section_right ul.count_list li{padding: 0 0 1.8rem;}
}
@media (max-width:678px){
	.con03 .con_history ul.flow .a_t{font-size: 1em; line-height: 1.3em;}
	.con03 .con_history ul.flow .b_t{font-size: 1.15em; line-height: 1.3em; padding: 0.3rem 0 0;}
	.con03 .con_graph .section_right ul.count_list li{padding: 0 0 1.8rem;}
	.con03 .con_graph .section_right ul.count_list li .s_t{font-size: 1em; padding: 0.5rem 0 0;}
}
@media (max-width:545px){
	.con03 .con_history ul.flow{padding: 2.4rem 0 0;}
	.con03 .con_history ul.flow li{width: 100%; padding: 0 0 2.4rem 0; position: relative;}
	.con03 .con_history ul.flow li:nth-child(3n+0){width: 100%;}
	.con03 .con_history ul.flow li:last-child{padding: 0 0 0.2rem 0;}
	.con03 .con_history ul.flow .a_t{font-size: 1.1em; line-height: 1.45em; padding: 0.5rem 0 0;}
	.con03 .con_history ul.flow .b_t{font-size: 1.3em; line-height: 1.3em; padding: 0.2rem 0 0;}
	.con03 .con_history ul.flow li::after{content: ''; position: absolute; right: unset; top: unset; left: 1rem; bottom: 0.8rem; width: 18px; height: 24px;
		background: url(../img/icon_arrow_bottom_line.svg) no-repeat; background-size: 18px 24px;}
	.con03 .con_history ul.flow .t_year::before{display: none;}
	.con03 .con_history ul.flow .t_year::after{display: none;}
	.con03 .con_graph .section_left{float: none; width: 100%;}
	.con03 .con_graph .section_left > img{width: 60%; height: auto;}
	.con03 .con_graph .section_right{float: none; width: 100%; padding: 2rem 0 0; }
}
@media (max-width:450px){
	.con03 .con_history ul.flow .a_t{font-size: 0.96em; line-height: 1.45em; padding: 0.6rem 0 0;}
	.con03 .con_history ul.flow .b_t{font-size: 1.2em; line-height: 1.3em; padding: 0.3rem 0 0;}
	.con03 .con_graph .section_right ul.count_list li .count_area{font-size: 1.4em;}
}
/* ---------- //Section03 - history ---------- */



/* ---------- Section04 - our work ---------- */
.con04 ul.con_ourwork li .b_t span.block{display: block;}
.con04 .con_devops .s_t span.block{display: block;}
#ani_devops_m.img_area{display: none; visibility: hidden;}
@media (max-width:1090px){
	.con04 .inner_section{width: 86%; margin: 0 auto;}
	.con04 .con_devops .visual{width: 100%; height: auto; margin: 4rem 0 0;}
	.con04 .con_devops .s_t{padding: 2rem 0 0;}
}
@media (max-width:996px){
	.con04 .con_title .b_t{padding: 0.8rem 0 0;}
}
@media (max-width:860px){
	.con04 ul.con_ourwork{padding: 5rem 0 6rem;}
	.con04 ul.con_ourwork li .img_area{width: 9rem; height: 9rem;}
	.con04 ul.con_ourwork li .a_t{font-size: 1.3em; line-height: 1em;}
	.con04 ul.con_ourwork li .b_t{font-size: 1.1em; line-height: 1.45em;}
	.con04 ul.con_ourwork li .b_t span.block{display: inline-block;}
	.con04 .con_devops .visual{width: 100%; height: auto; margin: 3rem 0 0;}
	.con04 .con_devops .s_t{padding: 1rem 0 0; font-size: 1.2em; line-height: 1.45em;}
}
@media (max-width:800px){
	.con04 ul.con_ourwork li{float: none; width: 100%; display: flex; align-items: center;}
	.con04 ul.con_ourwork li .img_area{width: 10rem; height: 9rem;}
	.con04 ul.con_ourwork li .text_area{width: 100%; text-align: left; padding: 0 0 0 2rem;}
	.con04 ul.con_ourwork li .a_t{font-size: 1.6em; line-height: 1em;}
}
@media (max-width:678px){
	.con04 .con_devops .s_t{font-size: 1.1em; line-height: 1.45em;}
}
@media (max-width:545px){
	.con04 ul.con_ourwork{padding: 2rem 0 4rem;}
	.con04 ul.con_ourwork li .img_area{width: 9rem; height: 7rem;}
	.con04 ul.con_ourwork li .a_t{font-size: 1.3em; line-height: 1em;}
}
@media (max-width:450px){
	#ani_devops_m.img_area{display: block; visibility: visible;}
	#ani_devops.img_area{display: none; visibility: hidden;}
	.con04 .con_devops .visual{margin: 1rem 0 0;}
	.con04 .con_devops .visual .img_area{width: 90%; height: auto; margin: 0 auto;}
	.con04 .con_devops .s_t{padding: 0; font-size: 0.96em; line-height: 1.45em;}
	.con04 .con_devops .s_t span.inline{display: block;}	
	.con04 ul.con_ourwork li .text_area{padding: 0 0 0 1rem;}
	.con04 ul.con_ourwork li .a_t{font-size: 1.2em; line-height: 1.3em; padding: 0.3rem 0 0;}
	.con04 ul.con_ourwork li .b_t{font-size: 0.96em; line-height: 1.45em; padding: 0.4rem 0 0;}	
}
@media (max-width:360px){
	.con04 ul.con_ourwork li .img_area{width: 7rem; height: 7rem;}
	.con04 ul.con_ourwork li .text_area{padding: 0 0 0 0.4rem;}
}
@media (max-width:318px){
	.con04 .con_devops .s_t{padding: 0; font-size: 0.92em; line-height: 1.45em;}
	.con04 .con_devops .s_t span.block{display: inline-block;}
	.con04 .con_devops .s_t span.inline{display: inline-block;}
}
/* ---------- //Section04 - our work ---------- */



/* ---------- Section05 - contact ---------- */
@media (max-width:1199.9px){

}
@media (max-width:1090px){
	.con_contact .inner_section{width: 86%; margin: 0 auto;}
	.con_contact ul.list_contact{padding: 3rem 0 0;}
}
@media (max-width:678px){
	.con_contact{background: url(../img/bg_contact.jpg) no-repeat 40% 70%; background-size: cover;}
	.con_contact ul.list_contact{padding: 2rem 0 0;}
	.con_contact ul.list_contact li{padding: 0 0.3rem;}
	.con_contact ul.list_contact li > a{padding: 0.6rem 1rem; font-size: 1.1em; border-radius: 6px;}
}
@media (max-width:545px){
	.con_contact{background: url(../img/bg_contact.jpg) no-repeat 20% 70%; background-size: cover;}
	.con_contact ul.list_contact{padding: 1rem 0 0;}
	.con_contact ul.list_contact li{float: none; width: 100%; padding: 0.4rem 0;}
	.con_contact ul.list_contact li > a{padding: 0.8rem; font-size: 1em; text-align: center; font-weight: 500;}
}
@media (max-width:360px){
	.con_contact .con_mail{padding: 2rem 0 0;}
	.con_contact .con_mail > a{font-size: 1em;}
}
@media (max-width:318px){
	.con_contact ul.list_contact li > a{padding: 0.5rem; font-size: 0.96em; line-height: 1em;}
}
/* ---------- //Section05 - contact ---------- */



/* ---------- Footer ---------- */
.footer .section_left address span.block{display: block;}
@media (max-width:1199.9px){
	.footer{background-color: #0d0d0d; padding: 4rem 0;}
	.footer .inner_section{padding: 0 4rem;}
}
@media (max-width:1090px){
	.footer{background-color: #0d0d0d; padding: 3rem 0;}
	.footer .inner_section{width: 86%; margin: 0 auto; padding: 0;}
	.footer .section_left{float: none; width: 100%;}
	.footer .section_left address span.block{display: block;}
	.footer .section_right{float: none; width: 100%; padding: 1rem 0 0;}
	.footer .section_right ul.sns_link li:first-child{padding: 0;}
	.footer .section_right ul.sns_link li.insta{margin-left: 0;}
}
@media (max-width:745px){
	.footer .section_left address span.inline{display: block;}
	.footer .section_left address span.bar{display: none;}
}
@media (max-width:545px){
	.footer .section_left address{font-size: 0.9em; padding: 0.5rem 0 0;}
	.footer .section_right .copyright{font-size: 0.84em; line-height: 1.3em;}
	.footer .section_left .logo{width: 90px; height: 34px;}
}
@media (max-width:360px){
	.footer{padding: 2rem 0;}
	.footer .section_right ul.sns_link li.insta > a{width: 1.8rem; height: 1.8rem; background-size: 1.8rem 1.8rem;}
	.footer .section_right ul.sns_link li.mail > a{width: 1.8rem; height: 1.8rem; background-size: 1.8rem 1.8rem;}
	.footer .section_right ul.sns_link li.blog > a{width: 1.8rem; height: 1.8rem; background-size: 1.8rem 1.8rem;}
	.footer .section_left address{font-size: 0.84em; line-height: 1.5em;}
}
@media (max-width:318px){

}
/* ---------- //Footer ---------- */