/* CSS Document */

#header_recruit{
	background-image: url("../common/images/gradation.png") !important;
	background-size: 50% 110px;
	background-position: bottom;
	background-repeat: repeat-x;
}
#contents {
  	position : relative;
  	width : 100%;
  	height : 100vh;
  	margin : auto;
  	overflow : hidden;
	z-index: 1;
}

#contents:after {
	content: "";
	width : 100%;
  	height : 100vh;
	position: absolute;
	top:0;
	left: 0;
	background-image : url("../images/photo1_4.jpg");
	background-size: cover;
	background-position: center;
	animation : bsAnime 20s infinite;
}

@keyframes bsAnime {
  	0% { opacity: 1; }
  	10% { opacity: 1; }
  	25% { opacity: 0; }
  	35% { opacity: 0; }
  	100% { opacity: 0; }
}

#contents .bg_img {
  	position : absolute;
  	top : 0;
  	left : 0;
  	bottom : 0;
  	right : 0;
  	opacity : 0;
  	animation : bgAnime 25s infinite;
	z-index: 2;
}

#contents .src1 {
  	background-image : url("../images/photo1_4.jpg");
	background-size: cover;
	background-position: center;
}

#contents .src2 {
  	background-image : url("../images/photo2.jpg");
	background-size: cover;
	background-position: center;
  	animation-delay  : 5s;
}
#contents .src3 {
  	background-image : url("../images/photo5.jpg");
	background-size: cover;
	background-position: center;
  	animation-delay  :10s;
}
#contents .src4 {
	background-size: cover;
	background-position: center;
  	background-image : url("../images/photo3_4.jpg");
  	animation-delay  : 15s;
}
#contents .src5 {
	background-size: cover;
	background-position: center;
  	background-image : url("../images/photo4.jpg");
  	animation-delay  : 20s;
}


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

@media (max-width:950px) {
	#contents:after {
		background-image : url("../images/sp_photo1_4.jpg");
	}

	#contents .src1 {
  		background-image : url("../images/sp_photo1_4.jpg");
	}

	#contents .src2 {
  		background-image : url("../images/sp_photo2.jpg");
	}

	#contents .src3 {
  		background-image : url("../images/sp_photo5.jpg");
	}

	#contents .src4 {
  		background-image : url("../images/sp_photo3_4.jpg");
	}
	#contents .src5 {
  		background-image : url("../images/sp_photo4.jpg");
	}
}


.main{
	width: 710px;
	height: 220px;
	z-index: 10;
	position: absolute;
	top:120px;
	left:50%;
	margin: 0 0 0 -355px;
	background-color: rgba(91,91,91,0.3);
	padding: 35px 0 30px;
	box-sizing: border-box;
  	display: inline-block;
	border:5px #FFFFFF solid;
	opacity: 0;
	animation: fadeIn 3s ease 1.5s 1 forwards;
    -webkit-animation: fadeIn 3s ease 1.5s 1 forwards;
}

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

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

.main  p{
	font-size: 14px;
	text-align: center;
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 20px;
}

.main h2{
	width: 563px;
	height: auto;
	margin: 0 auto;
}

@media (max-width:950px) {

	.main{
		width: 60%;
		height: 28vw;
		top:inherit;
		bottom: 100px;
		margin: 0 0 0 -30%;
		background-color: rgba(255,255,255,1.00);
		padding: 4vw;
		border:5px #e60044 solid;
		display: inline-block;
}

	.main  p{
		font-size: 1.8vw;
		text-align: center;
		font-weight: 100;
		color: #000000;
		padding-top: 0;
	}

	.main h2{
		width: 76%;
		height: auto;
		margin: 0 auto 15px;
	}

}

@media (max-width:750px) {

	.main{
		width: 80%;
		height: auto;
		top:inherit;
		bottom: 17vh;
		margin: 0 0 0 -40%;
		background-color: rgba(255,255,255,1.00);
		padding: 5vw;
		border:5px #e60044 solid;
		display: inline-block;
}

	.main  p{
		font-size: 2.2vw;
		text-align: center;
		font-weight: 100;
		color: #000000;
		padding-top: 0;
	}

	.main h2{
		width: 80%;
		height: auto;
		margin: 0 auto 15px;
	}

}

#contents .news{
	width: 1000px;
	margin: 0 auto;
	position: absolute;
	bottom:104px;
/*	bottom:82px;*/
/*    bottom:62px;*/
	left: 50%;
	margin-left: -500px;
	z-index: 11;
	opacity: 0;
	animation: fadeIn02 5s ease 1.5s 1 forwards;
    -webkit-animation: fadeIn02 5s ease 1.5s 1 forwards;
}

#contents .news.news2{
/*  bottom:40px;*/
/*    bottom:62px;*/
    bottom:84px;
  margin-left:-440px;
}

#contents .news.news3{
  /*bottom:40px;*/
	bottom:62px;
  margin-left:-440px;
}

#contents .news.news4{
  bottom:40px;
  margin-left:-440px;
}


@keyframes fadeIn02 {
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn02 {
    100% {opacity: 1}
}

#contents .news h3{
	width: 60px;
	height: 18px;
	box-sizing: border-box;
	color: #FFFFFF;
	background-color: #ff0044;
	font-size: 10px;
	float: left;
	padding: 2px 0 0 13px;
}

#contents .news dt{
	float: left;
	font-size: 11px;
	color: #FFFFFF;
	padding: 0 25px 0 20px;
	font-weight: bold;
}

#contents .news dd a{
	float: left;
	display: block;
	font-size: 11px;
	color: #FFFFFF;
	transition-duration: 0.3s;
}

#contents .news dd a:hover{
	color: #ff0044;
}

#contents .news dd span{
	float: left;
	display: block;
	font-size: 11px;
	color: #FFFFFF;
	transition-duration: 0.3s;
}

#contents footer{
	width: 100%;
	height: 25px;
	background-color: #1f2024;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 11;
	display: block;
	box-sizing: border-box;
	padding: 5px 0 ;
}

#contents footer span{
	font-size: 10px;
	text-align: center;
	color: #cccccc;
	display: block;
}

@media (max-width:950px) {
	#contents .news{
		bottom: 10vh;
        /*bottom: 9vh;*/
		margin: 0 0 1px -24%;
		width: 90%;
	}

  #contents .news.news2{
					bottom: 8vh;
        /*bottom: 6vh;*/
		margin: 0 0 0 -17.2%;
		width: 80%;
  }

  #contents .news.news3{
        bottom: 6vh;
        /*bottom: 4vh;*/
		margin: 0 0 0 -17.2%;
		width: 80%;
  }

	#contents .news.news4{
        bottom: 4vh;
		margin: 0 0 0 -17.2%;
		width: 80%;
  }

	#contents .news h3{
        height: auto;
        width: 12vw;
        padding: 0;
        font-size: 2.8vw;
        text-align: center;
	}

	#contents .news dt{
		padding: 0 10px 0 10px;
	}

	#contents footer{
		height: auto;
		background-color: #1f2024;
	}
}

@media (max-width:750px) {
	#contents .news{
		bottom: 10vh;
        /*bottom: 9vh;*/
		margin: 0 0 0 -40vw;
		width: 90%;
	}

      #contents .news.news2,
      #contents .news.news3,
      #contents .news.news4{
		margin: 0 0 0 -28vw;
		width: 90%;
  }
}

.modal_cover{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  z-index:20;
  display:none;
}

.modal{
  width:800px;
  background:#FFF;
  padding:10px;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:21;
  display:none;
}

.modal video{
  width:100%;
  height:auto
}

.modal a{
  display:block;
  position:absolute;
  right:-25px;
  top:-25px;
  width:50px;
  height:50px;
  text-align:center;
  border-radius:50%;
  background:#000;
  font-size:30px;
  color:#FFF;
  font-weight:bold;
  text-decoration:none;
  box-sizing:border-box;
  padding-top:3px;
}

@media (max-width:950px) {

  .modal{
    width:95%;
    background:#FFF;
    padding:2vw;
  }

  .modal a{
    display:block;
    position:absolute;
    right:-0;
    top:-8vw;
    width:9vw;
    height:9vw;
    font-size:6vw;
    padding-top:0vw;
  }

  .modal iframe{
    height:54vw;
  }
}