@charset "utf-8";

/* reset
==============================*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	vertical-align: bottom;
	border: none;
	width: 100%;
}

input,
select {
	vertical-align: middle;
}

a {
	text-decoration: none;
}


/* basic
==============================*/

html {
	font-size: 62.5%;
}

body {
	position: relative;
	color: #333333;
	font-size: 14px;
	font-family:"Noto Serif JP", "Hiragino Mincho ProN", "BIZ UDPMincho", serif;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

a {
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
.pcElem {}

.spElem {
	display: none;
}

.font_hiraginoW3 {
	font-family: "ヒラギノ角ゴ W3 JIS2004", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
}
.font_hiragino_bold {
	font-family: "ヒラギノ角ゴ W6 JIS2004", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
}

/*common element
==============================*/

header {
	background: rgba(0,0,0,.9);
	position: fixed;
	z-index: 100;
	width: 100%;
}

header .inner {
	width: 960px;
	height: 68px;
	margin: 0 auto;
	display: flex;
	box-sizing: border-box;
	position: relative;
}

header .logo {
	padding-top: 8px;
	width: 286px;
	height: 58px;
}

header .logo img {
	width: 100%;
}

header nav {
	position: absolute;
	right:0;
	top: 0;
	z-index: 100;
}

header nav ul {
	display: flex;
}
header nav a {
	text-align: center;
	display: inline-block;
	width: 100%;
	height: 68px;
	line-height: 68px;
	color: #fff;
	font-size: 16px;
	position: relative;
}
header nav a:hover{
	text-decoration: none;
}
.company header nav li:nth-child(1) a::after,
.works header nav li:nth-child(2) a::after,
.contact header nav li:nth-child(3) a::after,
header nav a:hover::after {
	content: "";
	position: absolute;
	bottom: 14px;
	left: 15%;
	height: 1px;
	width: 70%;
	margin-left: -50%;
	background: #fff;
	margin: 0 auto;
}
.contact header nav li:nth-child(3) a::after,
header nav li:nth-child(3) a:hover::after{
	right: 0;
	width: 90%;
	
}
header nav li:nth-child(1) a {
	width: 107px;
}
header nav li:nth-child(2) a {
	width: 101px;
}
header nav li:nth-child(3) a {
	width: 118px;
	text-align: right;
}
header .contact {
	position: absolute;
	top: 16px;
	right: 0;
	display: table;
}
article {
	position: relative;
}
.slideArea {
	position: relative;
}
.slideArea .catch {
	text-align: center;
	z-index: 90;
	width: 241px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -48px;
	margin-left: -120px;
}
#slide {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}
#slide li {
	width: 100% !important;
	position: relative;
	overflow: hidden;
}

#slide img {
	display: block !important;
	max-width: 100%;
	height: auto;
	/*animation: imgup 12s linear -2s forwards;*/
}

@keyframes imgup {
	0% {
		-ms-transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	100% {
		-ms-transform: scale(1.3, 1.3);
		-webkit-transform: scale(1.3, 1.3);
		transform: scale(1.3, 1.3);
	}
}
.inner{
	width: 960px;
	margin: 0 auto;
}
.sect1{
	position: relative;
	overflow: hidden;
	background-image: url(../img/sect1_image.png), url(../img/sect1_right.png) , url(../img/sect1_left.png),url(../img/sect1Bg.png);
	background-size: 1280px auto,936px auto,952px auto,65px auto;
	background-position: right bottom , right top, bottom left ,top left;
	background-repeat: no-repeat,no-repeat,no-repeat,repeat;
	padding: 84px 0;
}
.sect1 h2{
	font-size: 27px;
}
.sect1 .catch{
	margin-top: 40px;
	font-size: 20px;
}
.sect1 .middle_logo{
	margin:40px 0 20px;
	width: 263px;
}
.sect2 ul{
	display: flex;
}
.sect2 ul li{
	width: 50%;
	text-align: center;
	padding: 123px 0 146px;
	background-size: cover;
}
.sect2 li:nth-child(1){
	background-image: url(../img/companyBg.jpg);
}
.sect2 li:nth-child(2){
	background-image: url(../img/worksBg.jpg);
}
.sect2 ul li a{
	margin: 0 auto;
	padding: 72px 0;
	border: 2px solid #fff;
	width: 397px;
	display: block;
	color: #fff;
	transition: .3s all;
}
.sect2 ul li a:hover{
	text-decoration: none;
	background: #fff;
	color: #092e6c;
}
.sect2 a strong{
	display: block;
	font-size: 30px;
	padding-bottom: 12px;
}
.sect3{
	padding: 48px 0 88px;
}
.sect3 h3{
	text-align: center;
	font-size: 15px;
}
.sect3 h3 strong{
	padding: 0 0 6px;
	color: #092e6c;
	font-size: 30px;
	display: block;
}
.sect3 h3 strong::before{
	content: "";
	background: url(../img/icon_recruit.png) 0 0 no-repeat;
	background-size: 100% auto;
	display: block;
	width: 32px;
	height: 43px;
	margin: 0 auto 12px;
}
.sect3 .text{
	text-align: center;
	font-size: 18px;
	line-height: 2;
	margin-top: 24px;
}
.sect3 .contactBox{
	display: flex;
	margin: 70px auto 0;
	width: 874px;
}
.sect3 .contactBox dl{
	padding: 18px 0 14px;
	text-align: center;
	box-sizing: border-box;
	width: 400px;
	border: 2px solid #000;
}
.sect3 .contactBox dl:first-child{
	margin-right: 74px;
}
.contactBox .tel dt{
	position: relative;
	padding-bottom: 12px;
}
.contactBox .tel dt::after{
	content: "";
	display: block;
	position: absolute;
	width: 162px;
	height: 1px;
	background: #000;
	bottom: 0;
	left: 50%;
	margin-left: -81px;
}
.contactBox .tel dd{
	margin-top: 16px;
	font-size: 30px;
}
.contactBox .tel dd a{
	color: #000;
}
.contactBox .mail dd a{
	color: #000;
	display: block;
	width: 90%;
	margin: 18px auto 0;
	padding: 14px 0;
	background: url(../img/btnBg.png) ;
	background-size: 33px 44px;
}
.contactBox .mail a span{
	position: relative;
	display: inline-block;
	padding-left: 32px;
}
.contactBox .mail a span::after{
	position: absolute;
	top: -1px;
	left: 0;
	content: "";
	background: url(../img/icon_mail.png);
	background-size: cover;
	width: 21px;
	height: 16px;
}
/*
* footer
*******************************/

footer {
	padding: 34px 0 28px;
	background: url(../img/foot_bg.jpg) #000 top center no-repeat;
	background-size: auto 100%;
	color: #fff;
	text-align: center;
}
footer a {
	color: #fff;
}
.foot_logo{
	text-align: center;
}
.foot_logo img{
	width: 121px;
}
footer .company_name{
	font-size: 18px;
	margin-top: 26px;
}
footer .company_name small{
	font-size: 9px;
}
footer .address{
	margin-top: 28px;
	font-size: 15px;
}
footer .tel{
	margin-top: 16px;
	font-size: 15px;
}
footer .tel a{
	color: #fff;
}
footer .tel a:hover{
	text-decoration: none;
}
footer .other_navi{
	margin: 44px 0 40px;
}
footer .other_navi li{
	border-right: 1px solid #c5c4be;
	line-height: 20px;
	padding: 0 14px;
	font-size: 14px;
	display:  inline-block;
}
footer .other_navi li:first-child{
	border-left: 1px solid #c5c4be;
}
footer .copy {
}
/*
* second common style
*******************************/
.second .categoryTitle{
	padding:136px 0 70px;
	text-align: center;
	background-color: #000;
	background-size: cover;
	background-position: top center;
	color: #fff;
	font-size: 30px;
}
@media screen and (max-width: 1700px) {
	.sect1{
		padding-bottom: 120px;
	}
}
@media screen and (max-width: 1400px) {
	.sect1{
		padding-bottom: 130px;
		background-position: 140px bottom , right top, bottom left ,top left;
	}
}
@media screen and (max-width: 1160px) {
	.sect1{
		padding-bottom: 160px;
		background-position: 0px bottom , right top, bottom left ,top left;
	}
}
@media screen and (max-width: 976px) {
	header .inner {
		width: 100%;
	}
	header nav {
		right: 16px;
	}
	.inner{
		width: 100%;
		margin: 0 auto;
	}
	header .logo {
		margin-left: 8px;
	}
	header .contact {
		right: 8px;
	}
	.sect1{
		padding: 72px 0 160px;
		background-position: -150px bottom , right top, bottom left ,top left;
	}
	.sect1 .inner{
		width: 96%;
	}
	.sect1 h2{
		line-height: 1.5;
		margin-left: 0;
	}
	.sect2 ul li a{
		width:90%;
	}
	.sect3 .contactBox{
		width: 96%;
	}
	.sect3 .contactBox dl:first-child{
		margin-right: 8px;
	}
}
@media screen and (max-width: 768px) {
	.sect1 .inner{
		width: 86%;
	}
	.sect2 ul li{
		padding:20px;
	}
	.sect2 ul li a{
		width: 100%;
		margin: 0 auto;
		padding: 140px 0;
		border: 2px solid #fff;
		display: block;
		color: #fff;
		transition: .3s all;
	}
}
@media screen and (max-width: 640px) {
	.pcElem{
		display:none;
	}
	.spElem{
		display: block;
	}
	header .inner {
		height: 48px;
	}
	body {
		min-width: 0px;
	}
	a {
		text-decoration: none;
	}
	span.filter {
		display: none !important;
	}
	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger {
		position: absolute;
		top: 15px;
		right: 13px;
		width: 23px;
		height: 16px;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #fff;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 7px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	.menu-trigger span:nth-of-type(1) {
		-webkit-animation: menu-bar01 .75s forwards;
		animation: menu-bar01 .75s forwards;
	}
	@-webkit-keyframes menu-bar01 {
		0% {
			-webkit-transform: translateY(7px) rotate(45deg);
		}
		50% {
			-webkit-transform: translateY(7px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(0) rotate(0);
		}
	}
	@keyframes menu-bar01 {
		0% {
			transform: translateY(7px) rotate(45deg);
		}
		50% {
			transform: translateY(7px) rotate(0);
		}
		100% {
			transform: translateY(0) rotate(0);
		}
	}
	.menu-trigger span:nth-of-type(2) {
		transition: all .25s .25s;
		opacity: 1;
	}
	.menu-trigger span:nth-of-type(3) {
		-webkit-animation: menu-bar02 .75s forwards;
		animation: menu-bar02 .75s forwards;
	}
	@-webkit-keyframes menu-bar02 {
		0% {
			-webkit-transform: translateY(-7px) rotate(-45deg);
		}
		50% {
			-webkit-transform: translateY(-7px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(0) rotate(0);
		}
	}
	@keyframes menu-bar02 {
		0% {
			transform: translateY(-7px) rotate(-45deg);
		}
		50% {
			transform: translateY(-7px) rotate(0);
		}
		100% {
			transform: translateY(0) rotate(0);
		}
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-animation: active-menu-bar01 .75s forwards;
		animation: active-menu-bar01 .75s forwards;
	}
	@-webkit-keyframes active-menu-bar01 {
		0% {
			-webkit-transform: translateY(0) rotate(0);
		}
		50% {
			-webkit-transform: translateY(7px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(7px) rotate(45deg);
		}
	}
	@keyframes active-menu-bar01 {
		0% {
			transform: translateY(0) rotate(0);
		}
		50% {
			transform: translateY(7px) rotate(0);
		}
		100% {
			transform: translateY(7px) rotate(45deg);
		}
	}
	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-animation: active-menu-bar03 .75s forwards;
		animation: active-menu-bar03 .75s forwards;
	}
	@-webkit-keyframes active-menu-bar03 {
		0% {
			-webkit-transform: translateY(0) rotate(0);
		}
		50% {
			-webkit-transform: translateY(-7px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(-7px) rotate(-45deg);
		}
	}
	@keyframes active-menu-bar03 {
		0% {
			transform: translateY(0) rotate(0);
		}
		50% {
			transform: translateY(-7px) rotate(0);
		}
		100% {
			transform: translateY(-7px) rotate(-45deg);
		}
	}
	/*common element
	==============================*/
	header .wrp {
		width: 100%;
		height: 50px;
		display: block;
		padding: 0px;
		box-sizing: border-box;
		position: relative;
	}
	header .logo {
		position: static;
		display: block;
		width: 190px;
		height: 40px;
		box-sizing: border-box;
		padding: 5px 0 0 0;
		height: inherit;
		vertical-align: top;
	}
	header .logo img {
		display: inline;
		vertical-align: top
	}
	header nav {
		display: none;
		position: absolute;
		top: 48px;
		right: 0;
		z-index: 100;
		margin-left: 0px;
		width: 100%;
	}
	header .menu-trigger.active+nav {
		display: block;
	}
	header nav ul {
		background: rgba(0,0,0,.9);
		box-sizing: border-box;
		margin-left: 0;
		width: 100%;
		padding: 0 16px;
		display: block;
	}
	header nav>ul li {
		width: 100%;
		position: relative;
	}
	header nav>ul li:hover ul {
		display: block;
		background: #fff;
	}
	header nav li a{
		padding: 16px 0;
		height: inherit;
		line-height: 1;
		text-align: left !important;
	}
	header nav li {
		padding: 0;
		text-align: left;
		height: inherit;
		text-align: left;
		text-decoration: none;
	}
	header nav li:nth-child(2) {
		border-top: 1px solid #555;
		border-bottom: 1px solid #555;
	}
	header nav>ul>li:nth-child(1)>a {
		width: 100%;
	}
	header nav>ul>li:nth-child(2)>a {
		width: 100%;
	}
	header nav>ul>li:nth-child(3)>a {
		width: 100%;
	}
	.company header nav li:nth-child(1) a::after,
	.works header nav li:nth-child(2) a::after,
	.contact header nav li:nth-child(3) a::after,
	header nav a:hover::after {
		display: none;
	}
	header .contact {
		position: static;
		display: block;
	}
	.slideArea .catch {
		width: 200px;
		margin-top: -42.5px;
		margin-left: -100px;
	}
	#slide {
		width: 100%;
		height: 100%;
		max-width: 1440px;
		margin: 0 auto;
		overflow: hidden;
	}
	#slide li {
		width: 100% !important;
		position: relative;
	}
	#slide img {
		display: block !important;
		max-width: 100%;
		height: auto;
	}
	.sect1{
		position: relative;
		overflow: hidden;
		background-image: url(../img/sect1_image.png), url(../img/smp_sect1_top.png) , url(../img/sect1_left.png),url(../img/sect1Bg.png);
		background-size: 170% auto,100% auto,auto 90px,65px auto;
		background-position:40% bottom , right top, bottom left ,top left;
		background-repeat: no-repeat,no-repeat,no-repeat,repeat;
		padding:30px 0;
	}
	.sect1 .inner{
		width: 90%;
		padding: 20px 0 100px ;
	}
	.sect1 h2{
		font-size: 24px;
		line-height: 1.8;
		margin-left: 0;
	}
	.sect1 .catch{
		margin-top: 16px;
		font-size: 14px;
	}
	.sect1 .middle_logo{
		margin-top: 28px;
		width: 160px;
	}
	.sect2 ul{
		display:block;
	}
	.sect2 ul li{
		width: 100%;
		padding: 85px 0;
	}
	.sect2 li:nth-child(1){
	}
	.sect2 li:nth-child(2){
	}
	.sect2 ul li a{
		margin: 0 auto;
		padding: 34px 0;
		border: 2px solid #fff;
		width: 62.8%;
		display: block;
		color: #fff;
	}
	.sect2 a strong{
		display: block;
		font-size: 22px;
		padding-bottom: 4px;
	}
	.sect2 a span{
		font-size: 10px;
	}
	.sect3{
		padding: 18px 0 26px;
	}
	.sect3 h3{
		text-align: center;
		font-size: 9px;
	}
	.sect3 h3 strong{
		padding: 0 0 6px;
		color: #092e6c;
		font-size: 18px;
		display: block;
	}
	.sect3 h3 strong::before{
		content: "";
		background: url(../img/icon_recruit.png) 0 0 no-repeat;
		background-size: 100% auto;
		display: block;
		width: 16px;
		height: 22px;
		margin: 0 auto 12px;
	}
	.sect3 .text{
		text-align: left;
		font-size: 14px;
		line-height: 1.8;
		margin-top: 12px;
		margin-left: 20px;
		margin-right: 20px;

	}
	.sect3 .contactBox{
		display: block;
		margin: 20px auto 0;
		width: 90%;
	}
	.sect3 .contactBox dl{
		padding: 18px 0 14px;
		text-align: center;
		box-sizing: border-box;
		width: 100%;
		border: 2px solid #000;
	}
	.sect3 .contactBox dl:first-child{
		margin-right: 0;
		margin-bottom: 11px;
	}
	.contactBox .tel dt{
		position: relative;
		padding-bottom: 8px;
		font-size: 14px;
	}
	.contactBox .tel dt::after{
		content: "";
		display: block;
		position: absolute;
		width: 124px;
		height: 1px;
		background: #000;
		bottom: 0;
		left: 50%;
		margin-left: -62px;
	}
	.contactBox .tel dd{
		margin-top: 12px;
		font-size: 24px;
		color: #000;
	}
	.contactBox .mail dt{
		font-size: 14px;
	}
	.contactBox .mail dd a{
		margin: 13px auto 0;
		padding: 10px 0;
		background: url(../img/btnBg.png) ;
		background-size: 33px 44px;
	}
	.contactBox .mail a span{
	}
	.contactBox .mail a span::after{
	}
	/*
	* footer
	*******************************/

	footer {
		padding: 20px 0 12px;
		background: url(../img/foot_bg.jpg) #000 top center no-repeat;
		background-size: auto 100%;
		color: #fff;
		text-align: center;
	}
	footer a {
		color: #fff;
	}
	.foot_logo{
		text-align: center;
	}
	.foot_logo img{
		width: 78px;
	}
	footer .company_name{
		font-size: 18px;
		margin-top: 14px;
	}
	footer .company_name small{
		font-size: 14px;
	}
	footer .address{
		margin-top: 16px;
		font-size: 14px;
	}
	footer .tel{
		margin-top: 7px;
		font-size: 14px;
	}
	footer .other_navi{
		margin: 12px 0 0;
	}
	footer .other_navi li{
		display: none;
		border-right: none;
	}
	footer .other_navi li:last-child{
		display: block;
		font-size: 14px;
	}
	footer .copy {
		margin-top: 12px;
		font-size: 14px;
	}
	/*
	* second common style
	*******************************/
	.second .categoryTitle{
		padding:84px 0 40px;
		text-align: center;
		background-color: #000;
		background-size: cover;
		background-position: top center;
		color: #fff;
		font-size: 24px;
	}
}

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