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

body {
    line-height:1;
font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	color:#333333;
    font-size:62.5%;
	line-height:1.6em;
    -webkit-text-size-adjust: 100%;
}
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*レスポンシブ用イメージ*/
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}



/* レスポンシブで画像を切り替える（CSS） */
@media screen and (min-width: 699px) {
    .sp {
        display:none !important; /* PC用画像を非表示にする */
    }
}

/* レスポンシブで画像を切り替える（CSS） */
@media screen and (max-width: 700px) {
    .pc {
        display:none !important; /* PC用画像を非表示にする */
    }
}
/*共通*/

table{
	text-align:center;
	margin:30px auto 40px;
	width:100%;
	border-top:#ccc solid 1px;
	border-right:#ccc solid 1px;
}
table th,
table td{
	padding:12px 15px;
	border-bottom:#ccc solid 1px;
	border-left:#ccc solid 1px;
	vertical-align:top;
	font-weight:normal;
	text-align:left;
	line-height:1.8em;
}
table th{
	font-size:1.3em;
	font-weight:normal;
	letter-spacing:0.05em;
	white-space:nowrap;
	color:#ffffff;
	background:#023592;
	width:15%;
}
table td{
	font-size:1.4em;
	text-align:left;
}
table td.gl{
	background:#efefef;
	white-space:nowrap;
}

.entry table th{
	width:20%;
}
table td .w25{
	width:25%;
}
table td .w60{
	width:60%;
}
table td .w100{
	width:94%;
}

/*中ページ共通*/

section{
	padding:20px 10px;
}
.inner{
	max-width:1200px;
	text-align:center;
	margin:0 auto;
	padding:20px 10px;	
	overflow:hidden;
}

#contents p{
	font-size:1.5em;
	line-height:2em;
	text-align:left;
	margin:20px 10px 30px;
}
#contents h3{
	color:#012388;
	font-size:2.5em;
	letter-spacing:0.1em;
	line-height:1.6em;
	margin:30px auto 50px;
}

#contents h4{
	font-size:2.0em;
	color:#012388;
	text-align:left;
	background:url(../img/common/h4_line.png) left bottom no-repeat;
	line-height:1.8em;
	padding:8px 0;
	margin:20px auto 10px;
}
#contents h5{
	font-size:2.5em;
	line-height:1.8em;
	margin:40px auto 50px;
	position:relative;
}
#contents h5:after {
	position:absolute;
	left:0;
	right:0;
	margin:auto;
content: " ";
display: block;
border-bottom: solid 3px #dfdfdf;
bottom: -10px;
width: 10%;
}
#contents .greetingcatch{
	font-size:2.5em;
	color:#0a2055;
	line-height:1.8em;
	margin:20px auto 30px;
	font-weight:bold;
}

@media screen and (max-width: 800px){
#contents h3{
	font-size:2.3em;
	letter-spacing:0.05em;
	margin:20px auto 40px;
}
#contents h4{
	font-size:1.9em;
	line-height:1.8em;
	margin:10px auto 10px;
}
#contents h5{
	font-size:2.2em;
	margin:30px auto 40px;
}
#contents h5:after {
bottom: -10px;
}
#contents .greetingcatch{
	font-size:2.3em;
	color:#0a2055;
	line-height:1.8em;
	margin:20px auto 30px;
}

}

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

#contents p,
.contact dl dd{
	font-size:1.3em;
	line-height:1.7em;
	text-align:left;
	margin:10px 10px 20px;
}
#contents h3{
	font-size:2.0em;
	letter-spacing:0.05em;
	margin:10px auto 20px;
	text-align:left;
}
#contents h4{
	font-size:1.8em;
}
#contents h5{
	font-size:2.0em;
	line-height:1.8em;
	margin:20px auto 30px;
	position:relative;
}
#contents h5:after {
bottom: -10px;
}

#contents .greetingcatch{
	font-size:2.0em;
	color:#0a2055;
	line-height:1.8em;
	margin:10px auto 20px;
}
table{
	margin:20px auto;
}
table th{
	display:block;
	width:100%;
	text-align:left !important;
}
.entry table th{
	width:100%;
}
table td{
	display:block;
	width:100%;
}
table td .w25{
	width:94%;
}
table td .w60{
	width:94%;
}
table td .w100{
	width:94%;
}
}

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

#contents .greetingcatch{
	text-align:left;
}
#contents .greetingcatch br{
	display:none;
}
}

/*トップページ*/
.maintop{
	background:url(../img/top/top_main.png) center center no-repeat;
	background-size:cover;
	position:relative;
  width: 100%;
  height:630px;
}

.maintop h2{
	position:absolute;
	top:210px;
	left:0;
	right:0;
	text-align:center;
  -webkit-transform: translateY(-10%);
  -ms-transform: translateY(-10%);
  transform: translateY(-10%); 
 /* opacity: 0;  */
}

.maintop h2{
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 0.5s ease 0.5s 1 forwards;
}

.top_btn{	
	position:relative;
	max-width:1280px;
	margin:20px auto;
}
.top_btn1{
	position:relative;
	width:56%;
	left:0;
	top:0;
	}
.top_btn2{
	position:absolute;
	width:56%;
	right:0;
	top:0;
	}
.top_btn3{
	margin:20px auto;
	text-align:center;
	}
.top_btn4{
	margin:20px auto;
	text-align:center;
	}
.businessbtn{
	background:url(../img/top/t_business_back.png) left center no-repeat;
	background-size:cover;
	position:relative;
	width:55%;
	float:left;
	height:310px;
}
.futurebtn{
	background:url(../img/top/t_future_back.png) left center no-repeat;
	background-size:cover;
	position:relative;
	width:50%;
	float:left;
	height:310px;
}
.recruitbtn{
	background:url(../img/top/t_recruit_back.png) center top no-repeat;
	background-size:cover;
	position:relative;
	height:290px;
}
.businessbtn .blueyaji,
.futurebtn .blueyaji,
.recruitbtn .blueyaji{
	position:absolute;
	right:0;
	bottom:0;
	z-index: 1;
}
.businessbtn h2,
.futurebtn h2,
.recruitbtn h2{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	text-align:center;
	width: 100%;
	height:60px;
	z-index: 1;
}

.businessbtn a:before,
.futurebtn a:before,
.recruitbtn a:before {
	background-color: rgba(0,0,0,0.4);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
	z-index: 0;
	transition: .5s;
	-webkit-transition: .5s;
}
.recruitbtn .nolink:before {
	background-color: rgba(0,0,0,0.8);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
	z-index: 0;
	transition: .5s;
	-webkit-transition: .5s;
}

.businessbtn a:hover:before,
.futurebtn a:hover:before,
.recruitbtn a:hover:before {
	background-color: rgba(0,0,0,0);
}

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

.topnews{
	width:100%;
	float:none;
	padding:20px;
	height:auto;
}

.topbtn{
	width:100%;
	float:none;
}
	
	
}
@media screen and (max-width:750px){
.maintop{
	height:400px
}

.maintop h2{
	top:150px
}
.maintop h2 img{
	max-width:90%;
}

}
@media screen and (max-width:480px){
.maintop{
	height:300px
}

.maintop h2{
	top:120px
}
.maintop h2 img{
	max-width:90%;
}

.businessbtn{
	height:200px;
}
.futurebtn{
	height:200px;
}
.recruitbtn{
	height:200px;
}
}
/*COMPANY*/

.company .main{
	background:url(../img/company/company_main.png) ;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:290px;
	position:relative;
}
.company .main h2{
	text-align:center;
}
.FlexboxCenter{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.contentsleft{
	width:50%;
	padding:10px;
	}
	
#contents .contentsleft  p{
	margin:10px 0;
}
.contentsright{
	width:50%;
	padding:20px 10px;

	}
	
/*BUSINESS*/

.business .main{
	background:url(../img/business/business_main.png) ;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:290px;
	position:relative;
}
.business .main h2{
	text-align:center;
}

.businesswaku{
	border:10px solid #dfdfdf;
}
.businesswaku .midashi{
	background:#0c2b74;
	color:#fff;
	font-size:2.4em;
	text-align:center;
	line-height:2.5em;
	margin-bottom:20px;
}
.businesswaku .midashi a{
	width:100%;
	display:block;
	color:#fff;
}
.businesswaku .midashi a:hover{
	background:#30487f;
}
.businesswaku .article{
	margin:20px 10px;
	overflow:hidden;
}
.businesswaku .article .articleleft{
	width:50%;
	float:left;
}
.businesswaku .article .articleright{
	width:50%;
	float:right;
}



/*RECRUIT*/

.recruit .main{
	background:url(../img/recruit/recruit_main.png) ;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:290px;
	position:relative;
}
.recruit .main h2{
	text-align:center;
}

.glwaku{
	background:#efefef;
	padding:10px 20px 20px;
	text-align:center;
	}
.whwaku{
	background:#ffffff;
	padding:5px 20px 1px;
	}
.flowpic{
	margin:10px auto 0;
}
.flow{
	overflow:hidden;
	border-bottom:2px solid #dfdfdf;
	border-right:2px solid #dfdfdf;
	border-left:2px solid #dfdfdf;
	padding:10px;
	max-width:1100px;
	text-align:center;
	margin:0 auto;
}
.flowl{
	width:60%;
	float:left;
	padding:10px;
	}
	
.flowr{
	width:40%;
	float:right;
	padding:20px 10px;
	}
	
.recruit #thumbnail img{
	max-width:100px;
}
#photo_container{
	max-width:1100px;
	margin:10px auto;
}
#thumbnail{
    overflow: hidden;
    width: 100%;
	text-align:center;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#thumbnail li{
	margin:5px;
	max-width:90px;
	max-height:65px;
	background:#031c42;
}
#thumbnail li img{
    width: 100%;
    opacity: 0.5;
    filter: alpha(opacity=50); 
}
#thumbnail li.current img{
    opacity: 1;
    filter: alpha(opacity=100);
}
#main_photo{
    position: relative;
    max-height: 733px;
	margin-bottom:20px;
}
#main_photo img{
    position:absolute;
	top:0;
	left:0;
	right:0;
}
.img_nav btn{
    position: absolute;
    top:52%;
    margin: -25px 2% 0;
    width: 50px;
    height: 50px;
    border-top: solid 2px #fff;   
    border-left: solid 2px #fff;
    cursor: pointer;
}
#prev{
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 0;
}
#next{
    right: 0;
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.ctr_btn{
    position: absolute;
    top:10%;
    right: 5%;
}


.recruitname{
	width:100%;
	background:#efefef;
	position:relative;
	}
	
.flow_nav{
	margin:20px 30px;
	width:100%;
	position:relative;
	overflow:hidden;
	}
.flow_nav ul{
	 transform: skew(-20deg);
	}
.flow_nav ul li{
    float: left;
	width:33.3333%;
}
.flow_nav ul li a{
    display: block;
    padding: 5px 10px;
    transform: skew(20deg);
}
.flow_nav ul li.eigyo{
	background:#0447bf;
}
.flow_nav ul li.sekkei{
	background:#013592;
}
.flow_nav ul li.kumitate{
	background:#00215d;
}



@media screen and (max-width: 800px){
.company .main{
	height:250px;
}
.company .main h2 img{
	max-height:250px;
}
.business .main{
	height:250px;
}
.business .main h2 img{
	max-height:250px;
}
.recruit .main{
	height:250px;
}
.recruit .main h2 img{
	max-height:250px;
}
	
}

@media screen and (max-width: 620px){
.company .main{
	height:200px;
}
.company .main h2 img{
	max-height:200px;
}
.business .main{
	height:200px;
}
.business .main h2 img{
	max-height:200px;
}
.recruit .main{
	height:200px;
}
.recruit .main h2 img{
	max-height:200px;
}

.contentsleft{
	width:100%;
	}
	
.contentsright{
	width:100%;
	text-align:center;
	}

.flowl{
	width:100%;
	float:none;
	padding:10px;
	}
	
.flowr{
	width:100%;
	float:none;
	padding:20px 10px;
	}
.recruitnav .mes01{
	height:180px;
}
.recruitnav .mes02{
	height:180px;
}
.recruitnav .ent{
	height:180px;
}
}




.pagetop{
	position:fixed;
	bottom:70px;
	right:30px;
}