@charset "UTF-8";
/* default */

/*	reset
------------------------------------------------------------ */ 
@import url("reset.css");

/*	elements
------------------------------------------------------------ */ 
@import url("elements.css");

/*	form
------------------------------------------------------------ */ 
@import url("form.css");

/*	nav
------------------------------------------------------------ */ 
@import url("nav.css");


/* links
------------------------------------------------------------ */
a:link { text-decoration: underline; color: #000; }
a:visited { text-decoration: underline; color: #000;}
a:hover { text-decoration: underline; color: #000;}
a:active { text-decoration: underline; color: #000;}

/* body
------------------------------------------------------------ */
body {
	background: #fafafa;
	font-size:13px;
	line-height:160%;
	color:#1e1e1e;
	font-family: Helvetica,Meiryo,YuGothic,"serif";
	width: 100vw;
	position: relative;
}

/* header
------------------------------------------------------------ */
header {
	width: 100%;
	height: 87px;
	position: sticky;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 98;
}
header h1 { width: 150px; position: fixed; left: 20px; top: 25px; z-index: 99;}

header nav { position: fixed; right: 0; top: 0;}
header nav ul{ display: flex;}
header nav ul li { text-align: center;}
header nav ul li:after {
	content: '';
	display: block;
	height: 6px;
	width: 0;
	margin: 0 auto;
	background-color: #4394d0;
	transition: width 0.3s ease-out;
}
header nav ul li.current-menu-item {
	transition: none;
}
header nav ul li.current-menu-item:after {
	width: 100%;
}
header nav ul li:hover:after {
	width: 100%;
}
header nav ul li a{
	display: block;
	color: #000;
	padding: 0 30px;
	box-sizing: border-box;
	line-height: 81px;
}

header nav ul li a:link    {text-decoration:none;}
header nav ul li a:visited {text-decoration:none;}
header nav ul li a:hover   {text-decoration:none;}
header nav ul li a:active  {text-decoration:none;}
header nav ul li a.selected {text-decoration:none;}

header nav ul li:last-child { background:#4394d0; box-sizing: border-box; }
header nav ul li:last-child:after { height: 0; }
header nav ul li:last-child a {
	display: inline-block;
	padding: 0 60px; 
	text-decoration: none;
	color: #fff;
}
header nav ul li:last-child a:before {
	content: '';
	display: inline-block;
	width: 30px;
	height: 15px;
	background-image: url("../icons/icon_mail.svg");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 20px 15px;
	position: relative;
	top: 3px;
}

header nav ul li:last-child a:hover   {text-decoration:none; border-bottom: none;}

@media screen and (max-width:1200px) {
	header nav ul{ display:block;}
	header nav ul li { text-align: left;}
	header nav ul li a:hover   {text-decoration:none; border-bottom: none;}
	header nav ul li a.selected {text-decoration:none; border-bottom: none;}
	header nav ul li.contact { width: 90%; margin: 40px auto; text-align: center;}
	header nav ul li.contact a {
	display: block;
	background-image: none;
	padding: 0;
}
	header nav ul li.contact a::before{
	content: '';
  display: inline-block;
  width: 40px;/*画像の幅*/
  height: 15px;/*画像の高さ*/
  background-image: url("../icons/icon_mail_nav.svg");
  background-size: contain;
		background-repeat: no-repeat;
  vertical-align: middle;
}

}

/* section
------------------------------------------------------------ */
section { width: 100%; padding: 50px 0;}
section.gray { background: #f5f5f5;}

section .section_inner { width: 1200px; margin: 0 auto;}
section .section_inner_max { width: 1200px; margin: 0 auto;}
section .flex_386 { gap: 50px 21px; }
section .flex_590 { gap: 40px 20px; }

section .box300 { width: 300px;}
section .box300 .text_box {padding: 20px 16px;}
section .box300 .service_img {
	width: 300px;
	height: 300px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
section .box300:nth-child(odd){ background: #efeee7;}
section .box300:nth-child(even){background: #e0e0e0;}
section .box386 { width: 386px; position: relative;}
section .box386:last-child { margin-right:0;}
section .box386.off_wht{ background: #efeee7;}
section .box386.gray{background: #e0e0e0;}
section .box386 .text_box {padding: 30px 26px;}
section .box386 img { width: 100%; height: auto; margin-bottom: 6px;}
section .box386 .column_eye_catch {
	display: block;
	width: 386px;
	height: 225px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
section .box386.service_box .text_box { padding: 30px 26px 84px 26px;}
section .box386 .column_title {
	display: block;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	max-height: 42px;
}
section .box400 { width: 400px; margin-right: 40px;}
section .box400 img {width: 100%; height: auto;}
section .box590 { width: 590px;}
section .box590 img{ width: 100%; height: auto;}
section .box590:last-child{margin-right: 0;}
section .box590 .case_study_img {
	width: 590px;
	height: 324px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
section .box760 { width: 760px;}
section .box800 { width: 800px;}

section .number {color: #4394d0; font-size: 140%; font-weight: bold; margin-bottom: 6px;}
section .date {color: #4394d0;}

@media screen and (max-width:1200px) {
	section { width: 100%; padding: 40px 0;}
	section .section_inner { width: 90%;}
	section .section_inner_max { width: 100%;}
	
	section .section_inner img {width: 100%; height: auto;}

	section .box300 { width: 100%;}
	section .box300 img { width: 100%; height: auto;}
	section .box300 .text_box {padding: 30px;}
	section .box386 { width: 100%; margin-right: 0; margin-bottom: 0; border-bottom: 1px solid #fff;}
	section .box386.margin_bottom40 { margin-bottom: 40px;}
	section .box400 { width: 100%; margin-right: 0;}
	section .box590 { width: 100%; margin-right: 0; margin-bottom: 20px;}
	section .box760 { width: 100%; margin-top: 20px;}
}

/* hgroup
------------------------------------------------------------ */
hgroup { width: 1200px; margin: 0 auto 20px;}
h3 { font-size: 150%; line-height: 130%; font-weight: bold; margin-bottom: 20px;}
h3.h3_blue { color: #4394d0;}
h4 {font-size: 240%; font-weight: bold; line-height: 140%; margin-bottom: 20px;}
h4.h4_blue { color: #4394d0;}
h5 { font-size: 110%; font-weight: bold; margin-bottom: 4px;}
h5.h5_blue { color: #4394d0;}
h6 { font-weight: bold;}

@media screen and (max-width:1200px) {
	hgroup { width: 90%;}
	h3 { margin-bottom: 10px;}
	h4 {font-size: 160%;}
}


/* icons
------------------------------------------------------------ */
dl.news{
	padding: 0 24px 24px 0;
	background: url("../icons/icon_tri_blue.svg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 10px 16px;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 18px;
}
dl.news dt {color: #4394d0; font-weight: bold;}
dl.news dd {}

a.arrow{
	background-image: url("../icons/icon_arrow.svg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 20px 10px;
	padding-right: 30px;
}

a.blue_square {
	font-size: 140%;
	padding: 16px 0;
	display: block;
	width: 240px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	background: #4394d0;
	background-image: url("../icons/icon_tri_wht.svg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 40px 16px;
	margin: 0 auto;
}
a.blue_square:hover{
	background: #191919;
	background-image: url("../icons/icon_tri_wht.svg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 40px 16px;
}
a.gray_square2, a.gray_square2:hover {
	font-size: 140%;
	padding: 16px 0;
	display: block;
	width: 240px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	background: #e0e0e0;
	background-image: url("../icons/icon_tri_wht.svg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 40px 16px;
	margin: 0 auto;
}

a.off_wht_square {
	font-size: 100%;
	padding: 16px 0;
	display: block;
	width: 100%;
	text-align: center;
	color: #000;
	text-decoration: none;
	background: #efeee7;
	background-image: url("../icons/icon_tri_blk.svg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 40px 16px;
	margin: 0 auto;
	border-top: 1px solid #fff;
}

a.gray_square {
	font-size: 100%;
	padding: 16px 0;
	display: block;
	width: 100%;
	text-align: center;
	color: #000;
	text-decoration: none;
	background: #e0e0e0;
	background-image: url("../icons/icon_tri_blk.svg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 40px 16px;
	margin: 0 auto;
	border-top: 1px solid #fff;
}

.gray_square:hover, .off_wht_square:hover {
	background: #4394d0;
	background-image: url("../icons/icon_tri_wht.svg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 40px 16px;
	color: #fff;
}

.service_box a.off_wht_square, .service_box a.gray_square {
	padding: 0;
	height: 54px;
	line-height: 54px;
	position: absolute;
	bottom: 0;
	left: 0;
}


a.blk_square {
	font-size: 100%;
	padding: 16px 0;
	display: block;
	width: 240px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	background: #000;
	background-image: url("../icons/icon_cross_wht.svg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 60px 20px;
	margin: 0 auto;
	border-top: 1px solid #fff;
}

/* recruit
------------------------------------------------------------ */
.recruit {
	width: 100%;
	padding: 100px 0;
	margin-bottom: 50px;
	background-image: url("../../images/recruit.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.recruit .blur_window {
	width: 1000px;
	margin: 0 auto;
	text-align: center;
	padding:60px;
	box-sizing: border-box;
	background:rgba(255,255,255,0.4);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.recruit .blur_window p { font-size: 240%; line-height: 140%; color: #fff; font-weight: bold; margin-bottom: 40px;}

@media screen and (max-width:1200px) {
	.recruit { padding: 60px 0; margin-bottom: 40px;}
	.recruit .blur_window { width: 80%;}
	.recruit .blur_window p { font-size: 160%; line-height: 120%;}
}


/* contact us
------------------------------------------------------------ */ 
.contact_us{ width: 800px; background: #4394d0; margin: 0 auto; padding: 80px 0; text-align: center; box-sizing: border-box;}
.contact_us p { font-size: 150%; color: #fff; margin-bottom: 20px;}
.contact_us a {
	display: inline-block;
	background-image: url("../icons/icon_mail.svg");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 40px 30px;
	padding: 10px 0 10px 56px;
	font-size: 240%;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}

@media screen and (max-width:1200px) {
	.contact_us{ width: 90%; padding: 40px;}
	.contact_us p { font-size: 140%; color: #fff; margin-bottom: 20px;}
	.contact_us a {
		background-size: 32px 24px;
		font-size: 180%;
		padding: 10px 0 10px 46px;
}
}


/* page top
------------------------------------------------------------ */ 
#pageTop {
	position: fixed;
	bottom: 40px;
	right: 40px;
}

@media screen and (max-width:480px) {
	#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
}

/* Footer
------------------------------------------------------------ */
footer { width: 100%; background: #efeee9; padding: 70px 0; font-size: 90%; margin-top: 50px;}
footer #footer_inner { width: 1200px; margin: 0 auto; display: flex;}
footer #footer_inner .logo_box { width: 300px;}
footer #footer_inner .logo_box img {margin-bottom: 40px;}
footer #footer_inner .footer_box { width: 300px; margin-top: 20px;}
footer #footer_inner .footer_box h6 { margin-top: 40px;}
footer #footer_inner .footer_box h6:first-of-type { margin-top: 0;}
footer #footer_inner .footer_box ul { margin-bottom: 40px;}
footer #footer_inner a { text-decoration: none;}

footer #copyright { width: 1200px; margin: 0 auto;}

@media screen and (max-width:1200px) {
	footer { padding: 30px 0; margin-top: 40px;}
	footer #footer_inner { width: 90%; display: block;}
	footer #footer_inner .logo_box { width: 100%; margin: 0 0 60px 0;}
	footer #footer_inner .logo_box img {margin-bottom: 20px;}
	footer #footer_inner .footer_box { width: 100%; margin: 0;}
	footer #footer_inner .footer_box h6 { border-top: 1px solid #000; padding: 10px 0;}
	footer #footer_inner .footer_box ul { margin-bottom: 10px;}
	footer #copyright { width: 90%; margin: 0 auto;}
}