@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap");
/*
0.General
1.Top
----------------------------------------*/

/*
0.General
----------------------------------------*/
/*
色味設計
----------------------------------------*/
html,body{
	height:100%;
	}
html{
	font-size:62.5%;
	}
body{
	font-family: YuGothic, '游ゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,sans-serif;
	-webkit-text-size-adjust: 100%;
	font-size:14px;
	line-height:1;
	text-align:left;
	 -webkit-font-smoothing: antialiased;
	text-align: center;
	background: url("../img/back.png") repeat-y center center #CFCDCD;
	width:100%;
	}

{-webkit-transition: all .4s ease;-o-transition: all .4s ease;-ms-transition: all .4s ease;-moz-backface-visibility: hidden;-webkit-backface-visibility: hidden;-o-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;transition: all .4s ease;}

#spBtn{
	display: none;
}
/*
0.General
----------------------------------------*/
.section{
	width: 100%;
	min-width: 980px !important;
}
p{
	font-size:16px;
	line-height:36px;
	font-weight: bold;
}
.s01,
.s02,
.s03,
.s04{
	position: fixed;
	display: block;
	background-color:#283272;
	z-index:100;
}
.s01{width:100%;height:8px;left:0;top:0;}
.s02{width:100%;height:8px;left:0;bottom:0;}
.s03{width:8px;height:100%;left:0;top:0;}
.s04{width:8px;height:100%;right:0;top:0;}


/*
1.Header
----------------------------------------*/
header{
	width:100%;
	height:72px;
	background-color:#fff;
	position: fixed;
	left:0;top:8px;
	z-index: 99;
	overflow: hidden;
}
header h1{
	float:left;
	width:-webkit-calc(50% - 260px);
	width:calc(50% - 260px);
}
header h1 a{
	position: relative;
	width: 100%;
	height:72px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding:0 20px;
}
header h1 a img{
    position: relative;
    display: block;
	max-width:100%;
	height: auto;
}
header div.tel, header div.tel2, header div.tel3, header div.tel4{
	position:absolute;
    top: 0;
    right: 80px;
	width:min(12vw, 220px);
    min-width: 120px;
    height:72px;
}
header div.tel img, header div.tel2 img, header div.tel3 img, header div.tel4 img{
	display: block;
	max-width:100%;
	height: auto;
	position: absolute;
	left:0;top:0;right: 0;bottom: 0;
	margin:auto;
}
header a.twitter{
	position:absolute;
	right:0;top:-10px;
	display: block;
	float: right;
	width:70px;
	height:130px;
	background-color:#009ee7;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
}
header a.twitter img{
	position:absolute;
	left:15px;top:33px;
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);	
}
header a.twitter:hover{
	opacity:.5;
}
header nav{
	position:absolute;
	right:min(18.5vw, 300px);
    top:0;
}
@media screen and (max-width: 1200px){
header nav{
	position:absolute;
	right:210px;
    top:0;
}
}

header nav ul,header nav ul li{
	display: block;
	height:72px;
	float: left;
}
header nav ul li{
	position: relative;
	width:104px;
	height:100px;
}
header nav ul li:first-child a{
	border-left:1px solid #dadbdb;
}
header nav ul li a{
	position: absolute;
	left:0;top:-40px;
	display: block;
	width: -webkit-calc(100% - 10px);
	width:calc(100% - 10px);
	height: 150px;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
	border-right:1px solid #dadbdb;
}
header nav ul li a:hover{
	background-color: #009ee7;
}
header nav ul li a img{
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);	
	position: absolute;
	left:0;top:0;bottom:0;right:0;
	margin: auto;
}
header nav ul li a p{
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);	
	position: absolute;
	left:0;top:0;bottom:0;right:0;
	margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans JP', sans-serif;
	font-size:16px;
	line-height: 16px;
    letter-spacing: 0.15em;
    font-weight: 700;
	text-align:center;
    color: #000;
}
header nav ul li a p:hover{
    color: #fff;
}
@media screen and (max-width: 479px){
header nav,
header div.tel, header div.tel2, header div.tel3, header div.tel4{
    display: none !important;
}
}
header nav ul li a .pdf{
    content: "";
    position:relative;
    display:inline-block;
    top: 0;
    right: 0;
    width:20px;
    height:100%;
    background:url("../img/icon_pdf.svg") center center no-repeat;
    background-size:contain;
    transform: translateY(2px);
    }
/*
2.TOP
----------------------------------------*/

#fv{
	position: relative;
	width:100%;
	height:100%;
	overflow: hidden;
}
#fv img{
	display: block;
	position: absolute;
	margin:auto;
	left:0;top:0;right:0;bottom:0;
	z-index:1;
	max-width:100%;
	height: auto;
}
#fv p{
	position: absolute;
	left:10%;top:0;
	width:80%;
	height:100%;
	margin:0 auto;
	background: url("../img/t_topcopy.png") no-repeat center center;
	background-size:contain;
	z-index:98;
}
ul#bxslider{
	display: block;
	position: absolute;
	top:80px;
	width:100%;
	height:-webkit-calc(100% - 80px);
	height:calc(100% - 80px);
}
ul#bxslider li{
	display: block;
	position: absolute;
	left:0;top:0;
	width: 100%;
	height:100%;
	background-size:cover;
	background-position:center center;
    opacity: 0;
	z-index:0;
    -webkit-animation: ima 36s linear infinite 0s;
    animation: ima 36s linear infinite 0s;
}
ul#bxslider li.li01{
	background-image: url("../img/slide01.jpg");
}
ul#bxslider li.li02{
	background-image: url("../img/slide02.jpg");
	-webkit-animation-delay: 6s;	
	animation-delay: 6s;
}
ul#bxslider li.li03{
	background-image: url("../img/slide03.jpg");
	-webkit-animation-delay: 12s;	
	animation-delay: 12s;
}
ul#bxslider li.li04{
	background-image: url("../img/slide01.jpg");
	-webkit-animation-delay: 18s;	
	animation-delay: 18s;
}
ul#bxslider li.li05{
	background-image: url("../img/slide02.jpg");
	-webkit-animation-delay: 24s;	
	animation-delay: 24s;
}
ul#bxslider li.li06{
	background-image: url("../img/slide03.jpg");
	-webkit-animation-delay: 30s;	
	animation-delay: 30s;
}

@-webkit-keyframes ima {
    0% { opacity: 0;}
    8% { opacity: 1;}
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0;}
}
@-webkit-keyframes ima {
    0% { opacity: 0;}
    8% { opacity: 1;}
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0;}
}
@keyframes ima {
    0% { opacity: 0;}
    8% { opacity: 1;}
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0;}
}

.mt50{margin-top:50px;}
.mb50{margin-bottom:50px;}

body > section > h1{
	position: relative;
	width:100%;
	height:130px;
	background-position:center top;
	background-repeat:no-repeat;
	margin:0 0 50px 0 ;	
}
body > section > h1 img{
	position:absolute;
	left:0;top:0;right:0;bottom:0;
	margin:auto;
}

body > section#outline > h1{background-image: url("../img/h_back01.png");}
body > section#recruit > h1{background-image: url("../img/h_back02.png");}
body > section#contact > h1{background-image: url("../img/h_back03.png");}
body > section#company > h1{background-image: url("../img/h_back04.png");}

@media screen and (max-width: 1200px){
	body > section > h1{
		background-size:contain !important;
	}
}
body > section#outline{
	width:100%;
	overflow: hidden;
}
section.left,
section.right{
	position:relative;
	height:100%;
	min-height: 700px;
	background-color:#283272;
}
section.left .img100,
section.right .img100{
	position:absolute;
	height:100%;
	width:50%;
	background-size:cover;
	background-position:center top;
}
section.left .img100{right:0;top:0;}
section.right .img100{left:0;top:0;}

section.left .img50,
section.right .img50{
	position:absolute;
	height:50%;
	width:50%;
	background-size:cover;
	background-position:center top;
}
section.left .img50{left:0;top:50%;}
section.right .img50{right:0;top:50%;}

section.left .img100{background-image: url("../img/photo01.jpg")}
section.left .img50{background-image: url("../img/photo02.jpg")}
section.right .img100{background-image: url("../img/photo03.jpg")}
section.right .img50{background-image: url("../img/photo04.jpg")}

section.left .text,
section.right .text{
	position:absolute;
	height:50%;
	width:50%;
	display: table;
	color:#fff;
	background-size:cover;
}
section.left .text{
	left:0;top:0;
	background: url("../img/back01.png") no-repeat right top;
	background-size:cover;
	}
section.right .text{
	left:50%;top:0;
	background: url("../img/back02.png") no-repeat left top;
	background-size:cover;
	}

.table{
	display: table-cell;
	vertical-align: middle;
}

/*
RECRUIT
----------------------------------------*/
section#recruit{
}
div.fixback{
	width:100%;
	background :url("../img/photo05.jpg") no-repeat fixed;
	background-size:cover;
	padding:50px 0;
}
.box{
	width:100%;
	max-width:930px;
	margin:50px auto;
	padding:50px 0;
	background-color:rgba(255,255,255,.85);
}
.box table.table01{
	width:800px;
	margin:0 auto;
	border-collapse: collapse;
}
.box table.table01 th{
	background-color:rgba(255,255,255,.85);
	width:70px;
}
.box table.table01 th,.box table.table01 td{
	border:1px solid #fff;
	font-size:16px;
	line-height: 30px;
	padding:25px 15px;
	font-weight: bold;
	text-align:left;
}


.form{
	width:100%;
	max-width:800px;
	margin:0 auto;
}
.table02{
	width:800px;
	margin:0 auto;
}
.table02 tr th,
.table02 tr td{
	font-size:16px;
	line-height: 16px;
	padding:10px 0;
	text-align: left;
	font-weight: bold;
}
.table02 tr th{
	width:150px;
}
.table02 tr td{
	width:750px;
}
.table02 span{
	font-size:10px;
	vertical-align: super;
	color: red;
}


input[type="text"]{
	border:1px solid #dadbdb;
	padding:10px;
	font-size:16px;
}
.w50{width:50%;}
.w100{
	width:90%;
	width:-webkit-calc(100% - 20px);
	width:calc(100% - 20px);
	}
textarea{
	padding:10px;
	width:90%;
	width:-webkit-calc(100% - 20px);
	width:calc(100% - 20px);
	height:300px;
	font-size:16px;
}
input[type="submit"]{
	float: right;
	background : url("../img/btn_kakunin.png") no-repeat;
	background-width:463px 57px;
	width:463px;height: 57px;
	border: none;
	text-indent: -99999px;
}
div.photo{
	width:100%;
	max-width:800px;
	margin:30px auto 0 auto;
}
div.photo img{
	max-width:100%;
}
div.photo img:first-child{float:left;}
div.photo img:last-child{float:right;}

.table03{
	width:-webkit-calc(100% - 20px);
	width:calc(100% - 20px);
	max-width:580px; 
	margin:0 auto;
	border-collapse: collapse;
}
.table03 tr th,.table03 tr td{
	padding:5px 0;
	font-size:16px;
	line-height: 30px;
	text-align: left;
}
.table03 tr th{
	width:100px;
}


footer{
	position: relative;
	width:100%;
	height:100px;
}
footer p{
	position: absolute;
	left:0;top:0;bottom:0;right:0;
	margin:auto;
	width:271px;
	height:10px;
}
footer a{
	float:right;
	margin:60px 50px 0px 0px;
	font-size:14px;
	color:#000;
}
a.mail:hover, a.mail2:hover, a.mail3:hover, a.mail4:hover, a.mail5:hover, a.mail6:hover, a.mail7:hover{
	opacity:.5;
}
#map, #map2, #map3, #map4, #map5, #map6, #map7{
	width:100%;
	height:380px;
	margin:50px auto;
}
#map iframe, #map2 iframe, #map3 iframe, #map4 iframe, #map5 iframe, #map6 iframe, #map7 iframe{
	width:100%;
	height:100%;
}

input.back{
	background: url("../img/btn_back.png") no-repeat;
	width:406px;height:57px;
	text-indent:-9999px;
	border:none;
}
input.submit{
	background: url("../img/btn_submit.png") no-repeat;
	width:406px;height:57px;
	text-indent:-9999px;
	border:none;
}
div.center{
}
div#submit{
	margin:150px auto;
	width:100%;
	max-width:820px;
}
#formWrap {
	width:100%;
	max-width:820px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
	background-color:#fff;
}
table.formTable{
	width:100%;
	max-width:820px;
	margin:20px auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:20px;
	font-size:16px;
	background-color:#fff;
	text-align:left;
}
table.formTable th{
	width:156px;
	font-weight:normal;
	background-color:#fff;
	text-align:left;
}
p.error_messe{
	margin:5px 0;
	color:red;
}


/*
PRIVACY
----------------------------------------*/
#privacy{
	margin:150px 0 0 0;
}
#privacy > h1{
	height: auto;
	padding: 0 0 30px 0;
}
#privacy > p{
	font-size:15px;
	line-height: 2;
}
#privacy section{
	text-align: left;
	width:90%;
	max-width:820px;
	margin:100px auto 0 auto;
}
#privacy section h1{
	padding:0 0 10px 0;
	border-bottom:1px solid #000;
	margin:0 0 10px 0;
}
#privacy section dl{
	margin:15px 0 0 0;
	font-size:15px;
	line-height: 2;
}
#privacy section dl dt{
	font-weight: bold;
	color:#283272;
}
#privacy section dl dd{
	margin:0 0 30px 0;
}

/*追加*/

#contact h3{
	font-size: 14pt;
	font-weight: bold;
	color: #171c61;
	margin: 0 0 30px 0;
}

#contact img a{
	display: block;
}

.mail{
	margin: 0 0 70px 0;
	display: block;
}

.map_h{
	font-size: 18pt;
	font-weight: bold;
	color: #171c61;
	margin-top: 70px;
}