@charset "utf-8";
/* 全ページ共通設定（デフォルト）モバイルファースト-------- */

/* --- メインイメージ -- */
.box {
	position   : relative;
	max-width  : 100%;
	height     : 250px;
	margin     : auto;
	overflow   : hidden;
}

.box .bgImg {
	position   : absolute;
	top        : 0;
	left       : 0;
	bottom     : 0;
	right      : 0;
	opacity    : 0;
	animation  : bgAnime 18s infinite;
}

.box .src1 {
	background-image : url(./../../img/top/mv_01.jpg);
	background-size: cover;
	background-position: center top;
	
}
.box .src2 {
	background-image : url(./../../img/top/mv_02.jpg);
	background-size: cover;
	animation-delay  : 10s;
	background-position: center top;	
}

@keyframes bgAnime {
	0% { opacity: 0; }
	25% { opacity: 1; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}

.box .boxString{
	position   : absolute;
	display    : inline-block;
	color      : #fff;
	font-size: 30px;
	top        : 40%;
	left       : 50%;
	transform  : translate(-50%,-50%);
	z-index    : 11;
	line-height: 1.2;
	text-shadow:#333030 1px 1px 10px,  #333030 -1px 1px 10px,
     #333030 1px -1px 10px,  #333030 -1px -1px 10px;
	letter-spacing: 1.3px;
	width: 100%;
	text-align: center;
}

.box .boxString span{
	font-size: 24px;
}

.box .boxString.txt-s{
	font-size: 13px;
	top: 80%;
	border-bottom: 1px solid #fff;
	padding-bottom: 5px;
	letter-spacing: 1px;
	line-height: 1;	
	width: 70%;
}

.boxString.gv-menu{
	display: none;
}

.box .boxString ul li a:hover{
	color: #fff!important;
	opacity: 0.7;
}

#top-person ul li a:hover{
	opacity: 0.7;
	transition-duration: 0.3s;
}

.top-person img{
	width: 100%;
	height: auto;
}

.name-area p{
	text-shadow: #fff 1px 1px 10px,  #fff -1px 1px 10px,
     #fff 1px -1px 10px,  #fff -1px -1px 10px;
}

ul.top-person li a{
	position: relative;
	display: block;
}

ul.top-person li{
	float: left;
	width: 50%;
}

.top-person li .name-area{
	position: absolute;
	bottom: 5px;
	left: 5px;
}

.top-person li {
	margin-bottom: 20px;
}

.top-person li .belongs{
	font-size: 12px;
	margin-bottom: 5px;	
}

.top-person li .name{
	font-size: 16px;
}

.top-person li:nth-child(odd),
.recruit-btn ul li:first-child{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 5px;
}

.top-person li:nth-child(even),
.recruit-btn ul li:last-child{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 5px;
}

.recruit-btn ul li{
	float: left;
	width: 50%;
}

.innner-contents .recruit-btn ul li a{
	display: block;
}

.section img{
	width: 100%;
	height: auto;
}

#top-company img{
	margin-bottom: 10px;
}

/* ランドスケープ---------------------------------------- */
@media screen and (min-width:480px){
}

/* タブレット-------------------------------- */
@media screen and (min-width:768px){
	
	/*各セクションごとの余白*/
	.section { padding:0 15px; margin:100px 0;}

	/* --- メインイメージ -- */
	.box {
		height: 500px;
	}
	
	.box .boxString{
		font-size: 40px;
		letter-spacing: 5px;
		line-height: 1.5;
		top: 35%;
	}
	
	.box .boxString span{
		font-size: 32px;
	}
	
	.box .boxString.txt-s{
		font-size: 16px;
		line-height: 1.3;
		top: 60%;
		width: 40%;
	}
	
	.boxString.gv-menu{
		display: block;
	}
	
	.box .boxString.gv-menu{
		font-size: 14px;
		position: absolute;
		top: 85%;
		width: 100%;
	}
	
	.box .boxString.gv-menu ul li a{
		color: #fff;
	}
	
	.box .boxString.gv-menu ul li a:hover{
		text-decoration: none;
	}
	
	.box .boxString.gv-menu ul li{
		float: left;
    	width: 20%;
		letter-spacing: 1px;
	}
	
	ul.top-person li{
		width: 33.3%;
	}
	
	.top-person li:nth-child(odd){
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-right: 0;
	}

	.top-person li:nth-child(even){
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-left: 0;
	}
	
	.top-person li:nth-child(2),
	.top-person li:nth-child(5){
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;	
		padding-right: 10px;
		padding-left: 10px;
	}	
	
	ul.top-person li{
		width: 32.4%;
	}
	
	.top-person li .belongs{
		font-size: 14px;
	}
	
	.top-person li .name{
		font-size: 18px;
	}
	
	#top-company{
		overflow: hidden;
	}
	
	#top-company img{
		height: 400px;
	}
	
	#top-company.section{
		padding: 0;
		position: relative;
	}
	
	#top-company .recruit-title {
		position: absolute;
		top: 20px;
		left: 15px;
	}
	
	#top-company p.title-discription{
		text-align: left;
		position: absolute;
		top: 120px;
		left: 60px;
		width: 350px;
	}
	
	.innner-contents #top-company .recruit-btn{
		bottom: 5%;
		left: 60px;
		width: 350px;
		position: absolute;
	}
	
	#top-company ul li{
		width: 150px;
	}	
	
	#top-company ul li:first-child{	
		margin-right: 30px;
	}
	
	#top-recruitment.section,
	#top-training.section,
	#top-welfare.section{
		position: relative;
	}
		
	#top-recruitment .recruit-title.title-left,
	#top-welfare .recruit-title.title-left{
		position: absolute;
		top: 0;
	}
	
	#top-training .recruit-title.title-left{
		position: absolute;
		top: 0;
		right: 20px;
	}	
	
	#top-recruitment div:nth-child(2),
	#top-welfare div:nth-child(2){	
		text-align: right;
	}
	
	#top-training div:nth-child(2){	
		text-align: left;
	}	
	
	#top-recruitment img,
	#top-training img,
	#top-welfare img{
		width: 70%;
	}	
	
	.innner-contents #top-recruitment .recruit-btn,
	.innner-contents #top-welfare .recruit-btn{
		position: absolute;
		bottom: 0;
		left: 100px;
	}
	
	.innner-contents #top-training .recruit-btn{
		position: absolute;
		bottom: 0;
		right: 7%;
	}	
	
}


/* PC-------------------------------- */
@media only screen and (min-width: 1024px) {
	body{ font-size:16px;}

	
	.box{
		height: 721px;
	}
	
	.box .src1,.box .src2{
		height: 721px;		
	}
	
	.box .boxString{
		font-size: 60px;
	}
	
	.box .boxString span{
		font-size: 48px;
	}
	
	.box .boxString.txt-s{
		font-size: 18px;
		line-height: 1.5;
	}
	
	.box .boxString.txt-s{
		padding-bottom: 10px;
		width: 350px;
	}
	
	.box .boxString.gv-menu{
		width: 850px;
	}
	
	.box .boxString.gv-menu ul li{
		font-size: 16px;
	}
	
	#top-person img{
		width: 330px;
	}
	
	.top-person li .name{
		font-size: 24px;
	}
	
	.top-person li .name-area{
		left: 10px;
	}
	
	ul.top-person li a{
		width: 330px;
	}

	.top-person li:nth-child(2),
	.top-person li:nth-child(5){
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	ul.top-person li{
		width: 33.3%;
	}
	
	.top-person li:nth-child(3n) a{
		margin-left: auto!important;
	}	
	
	
	
	#top-company.section{
		width: 100%;
	}

	#top-company{
		background: #c1e1fa;
		height: 550px;
		text-align: center;
	}	
	
	#top-company .recruit-title{
		position: relative;
		z-index: 1;
		width: 1030px;
	}
	
	#top-company img{
		height: 550px;
		width: 1280px;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);

	}
	
	#top-company p.title-discription{
		position: relative;
		top: 0;
		left: 0;
		width: 700px;
		margin: 0 auto;
	}
	
	.innner-contents #top-company .recruit-btn{
		width: 500px;
		left: 0;
		position: relative;
		margin: 0 auto;
		bottom: 0;
	}
	
	#top-company ul li{
		width: 190px;
	}
	
	#top-company .top-discription{
		width: 30%;
		margin-left: 25%;
	}
	
	
	
}


/* Print
-------------------------------------------------- */
@media print{
	#ganseihifukaiyou #mainarea .featured h2,
	#ganseihifukaiyou #mainarea .featured .featured_box .category span,
	#ganseihifukaiyou #update #update_slide .update_slide_inner a .left_box p,
	#ganseihifukaiyou #update #update_slide .update_slide_inner .right_box .date,
	#ganseihifukaiyou #contents_menu ul li a{
		font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
		font-weight:bold;
	}
}