@charset "utf-8";

html, body{height: 100%; margin: 0; padding: 0; background-color: #000; overflow-x: hidden;}
body{scroll-behavior: smooth; overflow-y: scroll; overflow-x: hidden;}
/* #wrap{position: relative; height: 100%; height: 100vh; height: 100vh; margin: auto;} */

/* Common */
/* .scrollContainer{overflow-y: scroll; overflow-x: hidden; width: 100%;} */
.container .inner_section{width: 1060px; margin: 0 auto; box-sizing: border-box;}
.container h3{font-size: 1.35rem; line-height: 1em; color: #8086b9; font-weight: 700;}
.container .con_title .a_t{font-size: 2.5rem; line-height: 3.2rem; font-weight: 700; letter-spacing: -0.2px;}
.container .inner_section h3{padding:0 0 2.3rem}

/* Header */
header{position: fixed !important; top: 0; z-index: 10; width: 100%; height: 80px; background-color: #111; border-bottom: 1px solid #343c55; min-width: 1060px;
	box-sizing: border-box; padding: 0.2rem 2rem 0; display: flex !important; align-items: center;}
header h1 {display: inline-block;}
header h1 > a{display: block; background: url(../img/logo_w.svg) no-repeat; width: 103px; height: 42px; text-indent: -9999px; overflow: hidden;}
header ul.gnb{list-style: none; font-size: 1.2em; line-height: 1em; font-weight:600; display: flex; justify-content: flex-end; margin-left: auto; min-width: 554px;}
header ul.gnb > li{padding: 0 2rem;}
header ul.gnb > li > a{color: #fff; opacity: 1;}
header ul.gnb > li > a:hover{opacity:0.9;}

.header.invert_w{color: #111; background-color: #fff; transition: all .2s ease;}
.header.invert_w > h1 > a{background: url(../img/logo_b.svg) no-repeat; transition: all .2s ease;}
.header.invert_w > ul > li > a{color: #111; transition: all .2s ease;}
.header.invert_b{color: #fff; background-color: #111; transition: all .2s ease;}
.header.invert_b > h1 > a{background: url(../img/logo_w.svg) no-repeat; transition: all .2s ease;}
.header.invert_b > ul > li > a{color: #fff; transition: all .2s ease;}

/* Top Visual */
.top_con{position: relative; z-index: 0;} 
.top_con .top_wrap{position: relative; width: auto; overflow: hidden; height: 100vh; background: #fff; z-index: 0; min-height: 22rem;}
.top_con .top_wrap > video, .top_con .top_wrap > img{object-fit: cover; width: 100%; height: 100%; max-width: 100%;}
.top_con .top_wrap > img{position: absolute; display: block; top: 0; left: 0; right: 0; z-index: -1;}
.top_con .top_wrap > video.f_m, .top_con .top_wrap > img.f_m{display: none; visibility: hidden;}

.top_con .wrap_text{position: absolute; top: 0; left: 0px; width: 100%; height: 100%; -webkit-box-align: center; align-items: center;
	display: flex; flex-direction: column; -webkit-box-pack: justify; justify-content: center; animation: 1.2s ease-in-out 0s 1 normal forwards running ani_main;}
.top_con .wrap_text .con_text{text-align: center;}
.top_con .wrap_text .con_text .title{font-size: 3.6em; line-height: 1em; color: #fff; font-weight: 700;}
.top_con .wrap_text .con_text .text{font-size: 1.6rem; line-height: 1.3em; color: #9fa7bb; font-weight: 600; padding: 0.8rem 0 0;}
.top_con .wrap_text .con_text .text_w {color: #fff;}

.top_con .info_scroll{position: absolute; bottom: 1rem; width: 100%; text-align: center; vertical-align: middle; animation: ease-in-out 1.5s infinite ani_mouse_scroll;}
.top_con .info_scroll::after{content:''; display: inline-block;  width: 32px; height: 13px; background: url(../img/info_arrow.svg) no-repeat;}

/* Section01 - about */
.con01 .inner_section{padding: 11.8rem 0 12.5rem;}
.con01 .inner_section::after{content:''; clear:both; display: block;}
.con01 .section_left{float: left; width: 44%;}
.con01 .section_right{float: left; width: 56%;}
.con01 .a_t{font-size: 2.5rem; line-height: 3.4rem; color: #fff; font-weight: 700;}
.con01 .a_t .t_area > span{vertical-align: middle;}
.con01 .a_t span.block{display: block;}
.con01 .t_area:last-child{margin: 0;}
.con01 .a_t .color_sgb{color: #8086b9;}
.con01 .a_t .sym_eight{display: inline-block; overflow: hidden; text-indent: -9999px; background: url(../img/icon_eight.svg) no-repeat; width: 27px ; height: 50px; background-size: 27px 50px; margin: 0 0.2rem 0 0;}
.con01 .a_t .sym_eight.hz{transform: rotate(90deg); margin: 0 0.6rem 0;}
.con01 .b_t{font-size: 1.15em; line-height: 1.45em; color: #eee; padding: 1.4rem 0 0;}

.con01 .section_left .a_t .t_area{line-height: 1em; margin: 0 0 0.6rem;}

/* Section02 - service */
.con02{background-color: #fff;}
.con02 .inner_section{padding: 6.9rem 0 8.75rem;}
.con02 .con_title .a_t{float: left; width: 60%; color: #343c55;}
.con02 .con_title .b_t{float: right; width: 40%; font-size: 1.2em; line-height: 1.4em; color: #343c55;}
.con02 .con_title .b_t .block{display: block;}
.con02 .con_title::after{content:''; clear:both; display: block;}
.con02 .con_service::after{content:''; clear:both; display: block;}
.con02 .con_service .img_area{width: 60%; float: left;}
.con02 .con_service .img_area > img{width: 32.5rem; height: auto; margin: 6rem 0 0 2rem;}
.con02 .con_service ul.f_list{width: 40%; float: right; padding: 2.5rem 0 0;}
.con02 .con_service ul.f_list li{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; font-weight: 700; padding: 0 0 0.8rem; letter-spacing: -0.5px; color: #343c55;}
.con02 .con_service ul.f_list li .s_t{font-size: 1.2em; line-height: 1.4em; color: #343c55; letter-spacing: -0.2px;}
.con02 .con_service ul.f_list li.list01{background-image: url(../img/icon_function01.svg);}
.con02 .con_service ul.f_list li.list02{background-image: url(../img/icon_function02.svg);}
.con02 .con_service ul.f_list li.list03{background-image: url(../img/icon_function03.svg);}
.con02 .con_service ul.f_list li.list04{background-image: url(../img/icon_function04.svg);}

/* Section03 - history */
.con03{background-color: #fafafa;}
.con03 .inner_section{padding: 6.9rem 0 8.75rem;}
.con03 .con_title .a_t{color: #343c55;}
.con03 .con_history ul.flow{padding: 6rem 0 0;background: url(../img/bg_history_wide.png) no-repeat 2.2rem 6.5rem;}
.con03 .con_history ul.flow::after{content:''; clear:both; display: block;}
.con03 .con_history ul.flow .t_year{display: flex; align-items: center; position: relative;color: #f58220;font-size: 1.8rem;font-weight: 700;}
.con03 .con_history ul.flow .a_t{font-size: 1.2em; line-height: 1.3em; color: #343c55; letter-spacing: -0.2px; padding: 1.2rem 0 0;}
.con03 .con_history ul.flow .b_t{font-size: 1.4em; line-height: 1.3em; color: #343c55; letter-spacing: -0.5px; font-weight: 700; padding: 0.5rem 0 0;}

.con03 .con_history ul.flow .t_year > span.year{display: block; margin: 0 0.6rem 0 0; flex-grow: 0;}
.con03 .con_history ul.flow .t_year::after{content:''; flex-grow: 0; width: 1.1rem; height: 1.1rem; background: url(../img/icon_bullet_history.svg) no-repeat;}
.con03 .con_history ul.flow li{width: 32%;float: left;box-sizing: border-box;padding: 0 1rem 9.4rem 0;}
.con03 .con_history ul.flow li:nth-child(3n+0) {width: 36%;}
/*.con03 .con_history ul.flow li.list03 .t_year::before{display: none; visibility: hidden;}*/

.con03 .con_graph::after{content:''; clear:both; display: block;}
.con03 .con_graph .section_left{width: 60%; float: left; text-align: center;}
.con03 .con_graph .section_left > img{width: 400px; height: auto;}
.con03 .con_graph .section_right{width: 40%; float: left;}
.con03 .con_graph .section_right ul.count_list{padding: 1rem 0 0;}
.con03 .con_graph .section_right ul.count_list li{padding: 0 0 2.8rem;}
.con03 .con_graph .section_right ul.count_list li:last-child{padding: 0;}
.con03 .con_graph .section_right ul.count_list li .count_area{display: flex; align-items: center; font-size: 2.5em; line-height: 1em; color: #343c55; letter-spacing: -0.2px; font-weight: 700;}
.con03 .con_graph .section_right ul.count_list li .count_area .arrow_right{text-indent: -9999px; overflow: hidden; width: 14px; height: 21px; background: url(../img/icon_arrow_right_sgb.svg) no-repeat; background-size: 14px 21px; margin: 0 0.7rem;}
.con03 .con_graph .section_right ul.count_list li .s_t{font-size: 1.2em; line-height: 1.3em; color: #343c55; letter-spacing: -0.2px; padding: 1rem 0 0;}

/* Section04 - our work */
.con04 .inner_section{padding: 6.9rem 0 9.5rem;}
.con04 .con_title .a_t{color: #fff;}
.con04 ul.con_ourwork{padding: 6.8rem 0 11rem;}
.con04 ul.con_ourwork::after{content:''; clear:both; display: block;}
.con04 ul.con_ourwork li{float: left; width: 33.3333333%; text-align: center;}
.con04 ul.con_ourwork li .a_t{font-size: 1.5em; line-height: 1.3em; color: #fff; letter-spacing: -0.5px; font-weight: 700; padding: 0.8rem 0 0;}
.con04 ul.con_ourwork li .b_t{font-size: 1.2em; line-height: 1.4em; color: #eee; letter-spacing: -0.2px; padding: 0.6rem 0 0;}

.con04 ul.con_ourwork li .img_area{display: inline-block; width: 11rem; height: 11rem;}
.con04 .con_devops .visual{position: relative; overflow: hidden; margin: 5rem auto 0; text-align: center; width: 900px; height: 540px; z-index: 0;}
.con04 .con_devops .visual .img_area{width: 100%; height: 100%;}
/* .con04 .con_devops .visual > video, .con04 .con_devops .visual > img{object-fit: cover;}
.con04 .con_devops .visual > img{position: absolute; display: block; top: 0; left: 0; right: 0; z-index: -1; width: 900px; height: 540px;} */
.con04 .con_devops .s_t{text-align: center; padding: 2rem 0 0;font-size: 1.2em; line-height: 1.4em; color: #fff;}

/* Section05 - contact */
.con_contact{background: url(../img/bg_contact.jpg) no-repeat 50% 30%; background-attachment: inherit; background-size: cover;}
.con_contact .inner_section{padding: 6.9rem 0;}
.con_contact .con_title .a_t{color: #fff;}
.con_contact ul.list_contact{padding: 4rem 0 0;}
.con_contact ul.list_contact::after{content:''; clear:both; display: block;}
.con_contact ul.list_contact li{float: left; padding: 0 1rem 0 0;}
.con_contact ul.list_contact li > a{display: block; padding: 0.8rem 1.3rem; border-radius: 10px; font-size: 1.3em; line-height: 1em; color: #fff; font-weight: 600; letter-spacing: -0.2px; transition: all .5s ease;}
.con_contact ul.list_contact li > .btn_go_xk{background-color: #b4703e;}
.con_contact ul.list_contact li > .btn_go_xk:hover{background-color: #e5791d;}
.con_contact ul.list_contact li > .btn_contact{background-color: #535355;}
.con_contact ul.list_contact li > .btn_contact:hover{background-color: #6d6d75;}
.con_contact .con_mail{padding: 3rem 0 0;}
.con_contact .con_mail > a{font-size: 1.2em; line-height: 1em; color: #aaa; text-decoration: underline;}

/* Footer */
.footer{background-color: #0d0d0d; padding: 4rem 0;}
.footer .inner_section::after{content:''; clear:both; display: block;}
.footer .section_left{float: left;}
.footer .section_left .logo{background: url(../img/logo_w.svg) no-repeat; width: 103px; height: 42px; text-indent: -9999px; overflow: hidden; opacity: .35;}
.footer .section_left address{font-size: 1em; line-height: 1.4em;color: #777; font-weight: 600; padding: 1rem 0 0;}

.footer .section_right{float: right; padding: 3.3rem 0 0;}
.footer .section_right ul.sns_link{display: flex; align-items: flex-start;}
.footer .section_right ul.sns_link li{padding: 0 0 0 1.2rem;}
.footer .section_right ul.sns_link li > a{text-indent: -9999px; overflow: hidden; display: block; width: 2.2rem; height: 2.2rem;}
.footer .section_right ul.sns_link li.insta{margin-left: auto;}
.footer .section_right ul.sns_link li.insta > a{background: url(../img/icon_footer_insta.svg) no-repeat; background-size: 2.2rem 2.2rem;}
.footer .section_right ul.sns_link li.blog > a{background: url(../img/icon_footer_blog.svg) no-repeat; background-size: 2.2rem 2.2rem;}
.footer .section_right ul.sns_link li.mail > a{background: url(../img/icon_footer_mail.svg) no-repeat; background-size: 2.2rem 2.2rem;}
.footer .section_right .copyright{padding: 1rem 0 0; font-size: 0.9em; line-height: 1em; color: #666; font-weight: 600;}


@keyframes ani_mouse_scroll {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-16px);
	}
	100% {
		transform: translateY(0);
	}
}