@charset "UTF-8";

/* index ---------------------------------------*/

/*キービジュアル*/

#topKeyvisual{
	width:100%;
	overflow: hidden;
	background: url(../img/index/bg_kv.png) no-repeat left top;
	background-size: 100%;
	height:0px;
	padding-top:64%;
	position: relative;
	z-index:30;
	margin-bottom: 56%;
	opacity:0;
	filter: blur(8px) brightness(1.5);
	transition: all 2.25s ease;
}

#topKeyvisual.on{
	opacity:1;
	filter: blur(0px) brightness(1.0);
}

.kvMessage{
	position: absolute;
	left:50%;
	top:50%;
	width:100%;
	transform:translate(-50%,-50%);
	text-align: center;
}

.kvMessage1{margin-bottom: 35px;}

.kvMessage img{
	opacity:0;
	position: relative;
	right:20px;
	transition: all 2.25s ease;
}

.kvMessage1 img{
	max-width:606px;
	width:45%;
}

.kvMessage2 img{
	max-width:365px;
	width:28%;
}

.kvMessage img.on{
	opacity:1;
	right:0;
}

.slideGuide,
.slideGuide2{
	position: absolute;
	left:50%;
	bottom:15%;
	max-width:50px;
	width:4%;
	margin:0 0 0 -25px;
	cursor:pointer;
    animation: flash 1.5s infinite linear;
    -webkit-animation: flash 1.5s infinite linear;
    -moz-animation: flash 1.5s infinite linear;
}
.slideGuide2{bottom:20%;}

@keyframes flash {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@-webkit-keyframes flash {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@-moz-keyframes flash {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

.slideGuide img,
.slideGuide2 img{
	opacity:0;
	width:100%;
	position: relative;
	top:-20px;
	transition: all 2.25s ease;
}

.slideGuide img.on,
.slideGuide2 img.on{
	opacity:1;
	top:0px;
}


/* 5つのメニュー */

.topMenu{
	position: absolute;
	left:0px;
	top:0;
	width:100%;
	height:0px;
	padding:72% 0 0 0;
	background: url(../img/index/bg_center.png) no-repeat center 0px;
	background-size: 110%;
	z-index:20;
	margin-top: 56%;
}

.topMenu .topMenuBnr{
	position: absolute;
	left:50%;
	top:43%;
	width:100%;
	transform:translate(-50%,-50%);
}

.topMenu ul{
	text-align: center;
	font-size: 0px;
	margin-bottom: 3%;
}

.topMenu ul:last-child{margin-bottom: 0;}

.topMenu ul li{
	display: inline-block;
	text-align: center;
	margin:0 25px;
}

.topMenu ul li a{transition: all 0.7s ease-in-out;}
.topMenu ul li a:hover{opacity:0.7;}


/* 先輩社員の声 */

.topVoice{
	padding:10% 0;
	background: #b7e2e9; /* Old browsers */
	background: -moz-linear-gradient(top, #b7e2e9 0%, #42a3d7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #b7e2e9 0%,#42a3d7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #b7e2e9 0%,#42a3d7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	position: relative;
}

#particles-js{
	position: absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1;
}

#particles-js canvas{height:100%;}

.topVoice h2{
	text-align: center;
	margin-bottom: 80px;
	position: relative;
	z-index:2;
}

.topVoice ul{
	width:840px;
	margin:0 auto;
	overflow: hidden;
	position: relative;
	z-index:2;
}

.topVoice ul li{
	float: left;
	margin:0 0 23px 23px;
	position: relative;
}

.topVoice ul li:nth-child(3n+1){margin-left: 0;}

.topVoice ul li a{
	text-decoration: none;
	color:#fff;
	display: block;
}

.topVoice ul li .photo{
	position: absolute;
	left:0px;
	top:0px;
}

.topVoice ul li a:hover .photo{opacity:0;}
.topVoice ul li .photo img{width:264px;}

.topVoice ul li .number{
	position: absolute;
	right:15px;
	top:-10px;
}

.topVoice ul li .number img{width:63px;}

.topVoice ul li .profile{
	position: absolute;
	left:0px;
	bottom:0px;
	padding:15px 20px;
	line-height: 1.0;
}

.topVoice ul li .profile h3{
	font-size: 10px;
	letter-spacing: 5px;
	line-height: 1.0;
	padding-bottom:10px;
	position: relative;
	margin-bottom: 10px;
}

.topVoice ul li .profile h3:after{
	content:'';
	position: absolute;
	left:0px;
	bottom:0px;
	width:150px;
	height:1px;
	border-bottom:1px solid #fff;
}

.topVoice ul li .profile .job{
	font-size: 11px;
	margin-bottom: 8px;
	letter-spacing: 2px;
}

.topVoice ul li .profile h4{
	font-size: 16px;
	letter-spacing: 2px;
}

.listSymposium a img{transition: all 0.7s ease-in-out;}
.listSymposium a:hover img{filter: brightness(1.1);}


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

	#topKeyvisual{margin-bottom: 56%;}
	.topMenu{
		background-position:center 0px;
		padding-top: 72%;
	}
	.topMenu ul li{width:17%;}
	.topMenu ul li a img{width:100%;}
	.topVoice{padding:125px 0;}

}


@media screen and (max-width: 950px){
	.topVoice ul{width:90%;}
	.topVoice ul li{
		width:31.6%;
		margin-left:2.6%;
	}

	.topVoice ul li .photo img,
	.topVoice ul li .photo_on img{width:100%;}
	.topVoice ul li.listSymposium{width:65.8%;}
	.listSymposium a img{width:100%;}
}


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

	#topKeyvisual{
		width:100%;
		min-width:0;
		overflow: hidden;
		background: url(../img/index/bg_kv_sp.png) no-repeat left top;
		background-size: 100%;
		height:0px;
		padding-top:118%;
		margin-bottom: 105%;
	}

	.kvMessage{width:90%;}
	.kvMessage1{margin-bottom: 10px;}
	.kvMessage1 img{width:320px;}
	.kvMessage2 img{width:190px;}
	.slideGuide,.slideGuide2{display: none;}
	.topSection{min-width:0px;}

	/* 5つのメニュー */

	.topMenu{
		padding:136vw 0 0 0;
		background: url(../img/index/bg_center_sp.png) no-repeat center -10vw;
		background-size: 100%;
		margin-top: 104%;
	}

	.topMenu .topMenuBnr{top:50%;}
	.topMenu ul{margin-bottom: 0%;}

	.topMenu ul li{
		margin:0 3%;
		width:30%;
	}

	.topMenu ul:last-child li:nth-child(1){margin:2% 15% 0 0;}
	.topMenu ul:last-child li:nth-child(2){margin:2% 0 0 15%;}
	.topMenu ul:last-child li:nth-child(3){margin:-10% 0 0%;}

	/* 先輩社員の声 */

	.topVoice{
		padding:18% 0;
		background: #b7e2e9; /* Old browsers */
		background: -moz-linear-gradient(top, #b7e2e9 0%, #42a3d7 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #b7e2e9 0%,#42a3d7 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #b7e2e9 0%,#42a3d7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}

	.topVoice h2{margin-bottom: 50px;}
	.topVoice h2 img{width:130px;}

	.topVoice ul{
		width:auto;
		padding:0 15px;
	}

	.topVoice ul li{
		width:48%;
		margin:0 0 4% 4%;
		position: relative;
	}

	.topVoice ul li:nth-child(3n+1){margin-left: 4%;}
	.topVoice ul li:nth-child(2n-1){margin-left: 0;}

	.topVoice ul li .photo{
		width:100%;
		-webkit-transition:none;
		   -moz-transition:none;
		    -ms-transition:none;
		     -o-transition:none;
		        transition:none;
	}

	.topVoice ul li a:hover .photo{opacity:1;}
	.topVoice ul li .photo img{width:100%;}

	.topVoice ul li .number{
		position: absolute;
		right:5%;
		top:-2%;
		width:23%;
	}

	.topVoice ul li .number img{width:100%;}
	.topVoice ul li .profile{padding:10px 15px;}

	.topVoice ul li .profile h3{
		font-size: 6px;
		letter-spacing: 4px;
		padding-bottom:5px;
		margin-bottom: 5px;
	}

	.topVoice ul li .profile h3:after{width:90px;}

	.topVoice ul li .profile .job{
		font-size: 8px;
		margin-bottom: 4px;
		letter-spacing: 1px;
	}

	.topVoice ul li .profile h4{
		font-size: 11px;
		letter-spacing: 1px;
	}

	.topVoice ul li.listSymposium{
		padding-top: 25px;
		clear:both;
		width:98%;
		margin-left: 0;
	}

}