@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 1366px) {

	#header_fix .contact { margin: 30px 3px 30px 20px; }

}



@media screen and (max-width: 1024px) {

	.loader { width: 80%; left: 20%; }

	#svg {
		position: absolute;
		top: 50%;
		bottom: 50%;
		width: 100%!important;
		margin: 0 auto;
		margin-top: -5px;
		margin-bottom: -60px;
	}
	#svg img { width: 100%; }
	
	.svg1 { width: 100%!important; margin: 0 auto; }
	
	
	/*========== header ==========*/
	#header { display: none; }
	#header .head-nav { display: none; }
	#header .contact { display: none; }
	
	#header_fix { display: none; }
	
	#header_sp {
		display: block;
		width: 100%;
		position: fixed!important;
		padding: 0 0 20px;
		margin: 0 auto;
		box-shadow: none;
		background: #fff;
		z-index: 200;
	}
	#header_sp .logo { width: 250px; padding-top: 20px; padding-left: 3%; line-height: 0; }
	#header_sp .logo img { width: 100%; }
	
	
	/*========== sp_menu ==========*/
	#nav-toggle {
		display: block;
		position: fixed;
		top: 10px;
		right: 10px;
		height: 28px;
		cursor: pointer;
	}
	#nav-toggle > div { position: relative; width: 36px; }
	#nav-toggle span {
		width: 100%;
		height: 3px;
		left: 0;
		display: block;
		background: #113389;
		position: absolute;
		transition: top .5s ease, -webkit-transform .6s ease-in-out;
		transition: transform .6s ease-in-out, top .5s ease;
		transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
	}
	#nav-toggle span:nth-child(1) { top: 0; }
	#nav-toggle span:nth-child(2) { top: 12px; }
	#nav-toggle span:nth-child(3) { top: 24px; }
	#nav-toggle:hover span:nth-child(1) { top: 4px; }
	#nav-toggle:hover span:nth-child(3) { top: 20px; }
	
	.open #nav-toggle span { background: #222324; }
	.open #nav-toggle span:nth-child(1) {
		top: 13px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.open #nav-toggle span:nth-child(2) {
		top: 15px;
		width: 0;
		left: 50%;
	}
	.open #nav-toggle span:nth-child(3) {
		top: 13px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
	/* z-index */
	nav { width: 90%; margin-top: 20px; margin-bottom: 60px; }
	
	#nav-toggle {
		z-index: 1000;
		padding: 12px 10px;
		background: #fff;
	}
	#container { z-index: 900; }
	#gloval-nav {
		background: rgba(34,35,36,1);
		color: #fff;
		position: fixed;
		top: 70px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		text-align: center;
		display: flex;
		visibility: hidden;
		flex-direction: column;
		align-items: center;
		font-size: 1em;
		letter-spacing: 1px;
		opacity: 0;
		transition: opacity .6s ease, visibility .6s ease;
		overflow: scroll;
		overflow-y: auto;
	}
	
	#gloval-nav a {
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 1.2em 3em;
		transition: color .6s ease;
		border-bottom: 1px #fff solid;
		box-sizing: border-box;
		width: 100%;
	}
	#gloval-nav a:hover { color: #222324; background: #fff; }
	#gloval-nav ul { list-style: none; padding: 0; }
	#gloval-nav ul li {
		opacity: 0;
		-webkit-transform: translateX(200px);
		transform: translateX(200px);
		transition: opacity .2s ease, -webkit-transform .6s ease;
		transition: transform .6s ease, opacity .2s ease;
		transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
	}
	#gloval-nav ul li:nth-child(2) { transition-delay: .15s; }
	#gloval-nav ul li:nth-child(3) { transition-delay: .3s; }
	#gloval-nav ul li:nth-child(4) { transition-delay: .45s; }
	#gloval-nav ul li:nth-child(5) { transition-delay: .6s; }
	#gloval-nav ul li:nth-child(6) { transition-delay: .75s; }
	#gloval-nav ul li:nth-child(7) { transition-delay: .9s; }
	
	/* open */
	.open { overflow: hidden; }
	.open #gloval-nav { visibility: visible; opacity: 1; }
	.open #gloval-nav li {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		transition: opacity .9s ease, -webkit-transform 1s ease;
		transition: transform 1s ease, opacity .9s ease;
		transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
	}
	
	#gloval-nav .sp_logo { position: absolute; left: 20px; top: 20px; }
	#gloval-nav .sp_logo a {
		display: block;
		padding: 0em!important;
		border-bottom: 0px!important;
	}
	#gloval-nav .sp_logo a:hover { background: none; }
	#gloval-nav .sp_logo a img {}
	
	#gloval-nav .tel01 {
		display: block;
    	width: 100%;
		color: #fff;
		font-size: 2em;
		font-weight: 700;
		font-family: 'Roboto', sans-serif;
		letter-spacing: 1px;
		margin-bottom: 50px;
	}
	#gloval-nav .tel02 {
		display: block;
    	width: 100%;
		color: #fff;
		font-size: 1em;
		letter-spacing: 1px;
		margin-bottom: 50px;
	}
	
	
	/*========== footer ==========*/
	#footer .inner { width: 90%; padding: 60px 0; }
	#footer .inner .menu { display: none; }
	
	#footer_contact .inner {
		width: 90%;
		display: block;
		display: -webkit-block;
		padding: 30px 0 50px;
		text-align: center;
	}
	#footer_contact .txt { font-size: 1em; margin-bottom: 30px; }
	#footer_contact .contact a { padding: 1em 4.5em; }
	
	
	/*========== top ==========*/
	#slide_wrapp { height: 750px; }
	
	#message01 .l_box .txt_area { width: 100%; padding: 60px; }
	#message01 .l_box .txt_area h2 { font-size: 1.8em; margin-bottom: 40px; }
	
	#message02 .r_box .txt_area { width: 100%; padding: 60px; }
	#message02 .r_box .txt_area h2 { font-size: 1.8em; margin-bottom: 40px; }
	
	#top_work .inner { width: 90%; padding: 60px 0; }
	#top_work .inner .more { width: 250px; margin: 0 auto; }
	#top_work .inner .more a { padding: 1em 2em; }
	#top_work .inner .list .case .in .txtarea .ttl { line-height: 1.8em; }
	
	#top_recruit .inner { width: 90%; padding: 60px 0; }
	#top_recruit .inner .more { width: 250px; margin: 0 auto; }
	#top_recruit .inner .more a { padding: 1em 2em; }
	
	
	/*========== common ==========*/
	#main-contents { padding-top: 70px; }
	
	
	/*========== company ==========*/
	.company_sub_mv .inner { width: 90%; }
	
	#mess_container .inner .in {
    	padding-top: 170px;
	}
	#mess_container .imgarea {
    	left: 60%;
	}
	#mess_container .textarea .name {
    	margin-bottom: 80px!important;
	}
	#mess_container .textarea .txt {
    	width: 700px;
    	padding: 60px 60px 60px 0;
	}
	#mess_container .textarea::before {
    	left: -50px;
    	top: -65px;
	}
	
	
	/*========== works ==========*/
	#work_container .cate_box {
		width: 80%;
		margin: 0 auto 50px auto;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
	}
	#work_container .cate_box .cate_btn { width: 48%; text-align: center; }
	#work_container .cate_box .cate_btn a {
		display: block;
		padding: .7em 1em;
		border: 1px #0d2870 solid;
		background: #0d2870;
		color: #fff;
		text-decoration: none;
		transition: .1s linear;
		-webkit-transition: .1s linear;
	}
	#work_container .cate_box .cate_btn a:hover { background: #fff; color: #0d2870; box-sizing: border-box; }
	
	
	/*========== recruit ==========*/
	.recruit_message { background-position: 10%; }
	.recruit_message .inner { width: 90%; padding: 30px 0; box-sizing: border-box; }
	.recruit_message .inner .txt { width: 370px; }
	.recruit_message .inner .txt div:nth-child(1) { font-size: 2em; }
	.recruit_message .inner .txt div:nth-child(2) { font-size: 1.3em; line-height: 1.8em; }
	.recruit_message .inner .txt div:nth-child(3) { line-height: 1.8em; }
	
	.recruit_interview .flx .l_box { width: 48%; height: 100%; margin: 0 auto; }
	.recruit_interview .flx .r_box { width: 48%; line-height: 1.8em; }
	
	
	/*========== contact ==========*/
	#toi_container02 .inner { width: 90%; padding: 80px 0; box-sizing: border-box; }
	
	.toi_box table { table-layout: fixed; }
	.toi_box th { width: 25%; }
	.toi_box td { width: 75%; }
	
	#pos_container .inner { width: 90%; max-width: 1200px; margin: 0 auto; }
	#pos_container .inner .txt01 { font-size: .9em; font-weight: 500; }
	#pos_container .inner .txt02 { text-align: center; line-height: 2em; }


}


@media screen and (max-width: 820px) {

	#slide_wrapp { height: 600px; }

	#footer_contact .contact a { padding: .7em 3em; }	

}


@media screen and (max-width: 768px) {

	.loader { width: 80%; left: 23%; }
	
	#svg { top: 50%; bottom: 50%; margin-top: 5px; }
	
	
	/*========== top ==========*/
	#main_visual .catch { width: 80%; left: 5%; top: 35%; }
	#main_visual .catch span { font-size: 1.6em; font-weight: 900; }
	#main_visual .catch p { font-size: 1em; line-height: 1.8em; letter-spacing: 1px; }
	
	#slide_wrapp { height: 500px; }
	
	
	#message01 { display: block; display: -webkit-block; }
	#message01 .l_box { width: 100%; }
	#message01 .l_box .txt_area { width: 90%; margin: 0 auto; padding: 2.5em 0 2.5em; float: none; }
	#message01 .l_box .txt_area h2 { font-size: 1.4em; margin-bottom: 20px; }
	#message01 .l_box .txt_area p { font-size: .9em; line-height: 1.8em; }
	#message01 .r_box { width: 100%; height: 250px; background-position: bottom; }

	
	#message02 { display: block; display: -webkit-block; }
	#message02 .l_box { display: none; }
	#message02 .r_box { width: 100%; }
	#message02 .r_box .txt_area { width: 90%; margin: 0 auto; padding: 2.5em 0 2.5em; }
	#message02 .r_box .txt_area h2 { font-size: 1.4em; margin-bottom: 20px; }
	#message02 .r_box .txt_area p { font-size: .9em; line-height: 1.8em; }

	
	#top_work .inner .cmn_ttl {
		font-size: 1.3em;
		letter-spacing: 2px;
		margin-bottom: 40px;
		text-align: center;
	}
	#top_work .inner { width: 90%; padding: 50px 0; }
	#top_work .inner .list { box-sizing: border-box; }
	#top_work .inner .list .case { top: -45px; width: 100%; }
	#top_work .inner .list .case .in .txtarea { padding: 25px 25px 40px; }
	#top_work .inner .list .case .in .txtarea .ttl span { padding: 5px 30px; }
	
	#top_work .inner .more { width: 220px; }
	#top_work .inner .more a { padding: 1em 3em; }
	
	
	#top_recruit .inner .cmn_ttl {
		font-size: 1.3em;
		letter-spacing: 2px;
		margin-bottom: 20px;
		text-align: center;
	}
	#top_recruit .inner .cmn_txt { font-size: .9em; line-height: 1.8em; }
	#top_recruit .inner { width: 90%; padding: 50px 0; }
	#top_recruit .inner .more { width: 220px; margin: 0 auto; }
	#top_recruit .inner .more a { padding: 1em 3em; }
	
	
	/*========== eco&iso ==========*/
	#eco_iso { display: block; display: -webkit-block; }
	#eco_iso .eco { width: 100%; border-bottom: 1px #ddd solid; border-right: 0px; }
	#eco_iso .eco a { padding: 1.2em; font-size: 1em; }
	#eco_iso .iso { width: 100%; }
	#eco_iso .iso a { padding: 1.2em; font-size: 1em; }
	
	
	/*========== footer ==========*/
	#footer .inner { width: 90%; padding: 60px 0 80px; }
	#footer .inner .company { width: 100%; text-align: center; }
	#footer .inner .menu { display: none; }
	
	#footer_contact .inner {
		width: 90%;
		display: block;
		display: -webkit-block;
		padding: 30px 0 40px;
		text-align: center;
	}
	#footer_contact .txt { font-size: 1em; margin-bottom: 30px; }
	#footer_contact .contact a { padding: .7em 3em; }
	
	
	/*========== common ==========*/
	#main-contents { padding-top: 70px; }
	
	.lower_ttl { height: 200px; }
	.lower_ttl .inner { width: 90%; top: 30%; left: 5%; }
	.lower_ttl .inner h1 { font-size: 2em; line-height: 2em; }
	.lower_ttl .inner p { font-size: 1.2em; }
	
	.crumbs { font-size: 14px; font-size: 1.2rem; }
	.container { width: 90%; }
	
	
	/*========= topics =========*/

	.topics_box { margin-bottom: 100px; }
	.topics_box .image01 img { width: 100%; }
	.topics_box .image02 { justify-content: space-between; flex-wrap: wrap; }
	.topics_box .image02 .img { width: 32%; margin: 0; }
	.topics_box .image02 img { width: 100%!important; margin-bottom: 20px; }
	
	
	/*========== message ==========*/
	#mess_container .inner .in { padding-top: 0; margin-top: 0; }
	#mess_container .imgarea {
    	position: relative;
    	top: 0;
    	left: 0;
    	margin-left: 0px;
		margin-bottom: 20px;
	}
	
	#mess_container .textarea h2 {
    	width: 230px;
    	font-size: 1.5rem;
    	letter-spacing: 3px;
    	margin-bottom: 20px;
	}
	#mess_container .textarea::before { left: -40px; }
	#mess_container .textarea .name {
    	font-size: 45px;
    	font-size: 2rem;
    	margin-bottom: 30px!important;
	}
	#mess_container .textarea .name span { font-size: .6em; }
	#mess_container .textarea .txt { width: 100%; padding: 0em; }
	#mess_container .textarea .txt h3 {
    	font-size: 1.5em;
    	margin-bottom: 20px;
	}
	#mess_container .textarea .txt p { line-height: 1.8em; font-size: .9em; }
	
	
	/*========== company ==========*/
	.company_sub_mv { padding: 30px 0 30px; }
	.company_sub_mv .inner { width: 90%; }
	.company_sub_mv .inner strong { font-size: 1.8em; }
	
	.company_container01 { width: 90%; margin-top: 0px; }
	.company_container01 .inner { margin-bottom: 0px; }
	.company_container01 .inner .in { padding: 50px 0px; }
	
	.company_table01 td, .company_table01 th { padding: 15px 0; font-size: .9em; }
	.company_table01 th { width: 100px; }
	
	.company_container02 { padding: 50px 0; }
	.company_container02 .inner { width: 90%; }
	.company_container02 .inner .in { padding: 2.5em 2em; background: #fff; }
	.company_container02 .inner .ttl { font-size: 1.1em; letter-spacing: 1px; margin-bottom: 30px; }
	
	.company_container03 { padding: 50px 0; }
	.company_container03 .inner { width: 90%; }
	.company_container03 .inner .in { padding: 30px 0px 50px; background: #fff; }
	.company_container03 .inner .ttl { font-size: 1.1em; letter-spacing: 1px; }
	
	
	/*========== top ==========*/
	#work_container .ttl01 { font-size: 1.8rem; }
	#work_container .list ul li { width: 48%; margin-bottom: 40px; }
	
	
	/*========== recruit ==========*/
	.recruit_message { background: #113389; }
	.recruit_message .inner { width: 90%; padding: 2em 0; box-sizing: border-box; }
	.recruit_message .inner .txt { width: 100%; float: none; }
	.recruit_message .inner .txt div:nth-child(1) { font-size: 1.5em; font-weight: 600; }
	.recruit_message .inner .txt div:nth-child(2) { font-size: 1.1em; line-height: 1.8em; }
	.recruit_message .inner .txt div:nth-child(3) { font-size: .9em; line-height: 1.8em; }
	
	.recruit_ng .inner { padding: 50px 0 60px; }
	.recruit_ng .inner .ttl { margin-bottom: 20px; font-size: 1.1em; }
	.recruit_ng .inner .txt { margin-bottom: 0px; font-size: .9em; }
	
	.recruit_ng .banner { width: 100%; margin: 0 auto; }
	.recruit_ng .banner ul { padding: 0; display: block; display: -webkit-block; }
	.recruit_ng .banner ul li { margin-bottom: 10px; }
	
	.recruit_container01 .inner { margin-bottom: 50px; }
	.recruit_container01 .inner .ttl { margin-bottom: 20px; font-size: 1.1em; }
	.recruit_container01 .inner .txt { margin-bottom: 30px; font-size: .9em; }
	
	.recruit_interview .inner { padding: 50px 0; }
	.recruit_interview .ttl { margin-bottom: 40px; font-size: 1.1em; }
	.recruit_interview .flx { display: block; display: -webkit-block; margin-bottom: 50px; }
	.recruit_interview .flx .l_box { margin-bottom: 30px; }
	.recruit_interview .flx .r_box { width: 100%; font-size: .9em; line-height: 1.8em; }
	.recruit_interview .flx .r_box span { font-size: 1.2em; margin-bottom: 20px; }
	
	
	/*========== access ==========*/
	#acc_container01 .inner { padding-bottom: 40px; }
	#acc_container01 .inner .txt02 { font-size: 1em; }
	
	#acc_container02 .inner { padding: 40px 0; }
	#acc_container02 .inner ul li { font-size: 1em; }
	
	#acc_container03 .inner { padding: 40px 0; }
	#acc_container01 h3, #acc_container02 h3, #acc_container03 h3 {
    	font-size: 1.3em;
    	margin-bottom: 20px;
	}
	#acc_container02 .inner ul { display: block; display: -webkit-block; }
	
	
	/*========== privacy ==========*/
	#pri_container .inner .ttl span {
    	font-size: 1.2em;
    	font-weight: 600;
		line-height: 2.2;
    	color: #222;
    	border-bottom: 3px solid #333;
    	padding-bottom: 5px;
	}
	#pri_container .inner .txt {
		line-height: 1.8em;
		font-size: .9em;
	}
	
	
	/*========== contact ==========*/
	#toi_container01 .inner .txt02 {
    	line-height: 1.8em;
		font-size: .9em;
	}
	#toi_container01 .inner .tel {
    	display: block;
    	display: -webkit-block;
	}
	#toi_container01 .inner .tel div {
    	width: 100%;
    	padding: 1.5em;
		margin-bottom: 10px;
		font-size: .9em;
		line-height: 1.8em;
	}
	
	#toi_container02 .inner {
    	width: 90%;
   		max-width: 1200px;
    	margin: 0 auto;
    	padding: 2em 0em;
		box-sizing: border-box;
	}
	#toi_container02 .inner .ttl {
    	margin-bottom: 20px;
   		font-size: 1em;
	}
	#toi_container02 .inner .txt {
		line-height: 1.8em;
		font-size: .9em;
	}
	.toi_box {
    	padding: 1.5em;
    	line-height: 2em;
    	background: #fff;
	}
	.toi_box tr:first-child th,
	.toi_box tr:first-child td { display: block; }
	.toi_box tr:first-child td { border-top: none; }
	.toi_box th { display: block; width: 100%; border: none; padding-bottom: 0; }
	.toi_box td { display: block; width: 100%; }
	
	.from_text01 { width: 70%; }
	.from_text02 { width: 50%; }
	.from_text03 { width: 70%; }

	.t_from_text { width: 90%; }
	
	.toi_box .btn01 { width: 40%; }
	.toi_box .btn02 { width: 40%; }
	.toi_box .btn03 { width: 100%; }
	.toi_box .btn04 { width: 100%; }
	
	.toi_btn_l_02 { width: 130px; margin-right: 10%; }
	.toi_btn_r_01 { width: 130px; margin-left: 10%; }
	
}



@media screen and (max-width: 640px) {

	#svg { top: 50%; bottom: 50%; margin-top: 20px; }
	.loader { width: 90%; left: 23%; }
	
	
	/*========== top ==========*/
	#main_visual .catch { width: 90%; left: 5%; top: 35%; }
	#main_visual .catch span { font-size: 1.2em; font-weight: 700; }
	#main_visual .catch p { font-size: .8em; line-height: 1.8em; letter-spacing: 1px; }
	#main_visual .catch p br { display: none; }
	
	#slide_wrapp { height: 280px; }
	
	#message01 .l_box .txt_area h2 { font-size: 1.2em; }
	#message01 .r_box { height: 180px; }
	#message02 .r_box .txt_area h2 { font-size: 1.2em; }
	
	#top_work { background: none; }
	#top_work .inner .list .case .in .txtarea .ttl span { font-size: .8em; padding: 10px 30px; }
	#top_work .inner ul { margin: 0 0 100px 0; }
	#top_work .inner ul li span { display: block; margin: 0; }
	
	#work_container .ttl01 { font-size: 15px; font-size: 1.6rem; }
	
	.recruit_interview .num {
    	font-size: 2.5em;
    	font-weight: 700;
	}
	.recruit_interview .num span {
    	font-size: 12px;
    	font-size: .9rem;
	}
	
	.recruit_interview .flx .l_box { width: 100%; height: 100%; }
	.recruit_interview .flx .l_box .name {
    	padding: 5px 10px;
    	line-height: 1.8em;
    	font-size: .8em;
	}
	.recruit_interview .flx .l_box .name span {
    	font-size: 1.2em;
	}
	
	
	/*========== works ==========*/
	#work_container .cate_box { width: 90%; }
	
	.mb_table {}
	.mb_table td { display: block; }

}



@media screen and (max-width: 420px) {

	/*========= topics =========*/
	.topics_box .image02 { flex-wrap: wrap; }
	.topics_box .image02 .img { width: 48%; margin-bottom: 10px; }
	
	
	/*========== works ==========*/
	#work_container .cate_box { width: 90%; display: block; display: -webkit-block; }
	#work_container .cate_box .cate_btn { width: 100%; text-align: center; margin-bottom: 10px; }
	#work_container .list ul li strong { font-size: .9em!important; }
	
	.lower_ttl .inner h1 { font-size: 1.8em; letter-spacing: 2px; }
	
	.from_text01 { width: 90%; }
	.from_text02 { width: 50%; }
	.from_text03 { width: 90%; }
	
	.toi_btn_r_01 { margin-left: 0%; }
	.toi_btn_l_02 { margin-right: 0%; }
	
}



@media screen and (max-width: 380px) {
	
	#svg { top: 50%; bottom: 50%; margin-top: 30px; }
	.loader { width: 90%; left: 26%; }
	
}