@charset "utf-8";


a{text-decoration: none;}

#pageWrap{
	display: flex;
	display: -webkit-flex;
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}
#pageWrap h1{
	width: 4%;
	background-color: #003080;
}
#pageWrap h1 img{
	display: block;
	width: 65%;
	margin: 25px auto;
}
#pageWrap div{
	width: 32%;
	position: relative;
}
.btNew{
	background: linear-gradient(rgba(0, 0, 0, .2),  rgba(0, 0, 0, .2)),  url("../img/bt01_pc.jpg");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	filter: grayscale(100%);
	transition: .3s ease-in-out;
	display: block;
	width: 100%!important;
	height: 100%;
	overflow: hidden;
}
.btIntern{
	background: linear-gradient(rgba(0, 0, 0, .2),  rgba(0, 0, 0, .2)),  url("../img/bt02_pc.jpg");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover;
	filter: grayscale(100%);
	transition: .3s ease-in-out;
	display: block;
	width: 100%!important;
	height: 100%;
	overflow: hidden;
}
.btCareea{
	background: linear-gradient(rgba(0, 0, 0, .2),  rgba(0, 0, 0, .2)),  url("../img/bt03_pc.jpg");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	filter: grayscale(100%);
	transition: .3s ease-in-out;
	display: block;
	width: 100%!important;
	height: 100%;
	overflow: hidden;
}

#pageWrap a:hover .btNew,#pageWrap a:hover .btIntern,#pageWrap a:hover .btCareea{/*hoverした時の変化*/
  filter:grayscale(0);
}

#pageWrap p{
	display: block;
	position: absolute;
	top: 68%;
	right: 0;
	padding: 0 0 0 26px;
	transform: rotate( 90deg );
	transform-origin:right 0;
	width: 55%;
	margin: 0 auto;
	background: url("../img/arow.png") no-repeat 0 5px;
	background-size: 18px 26px;
}
#pageWrap p span{
	background-color: black;
	color: white;
	font-size: 1vw;
	letter-spacing: 0.5rem;
	padding: 5px 10px;
	width: 100%;
	display: block;
	text-align: center;
}

footer{
	position: absolute; bottom:3%; left: 2%; color: white; display: block; text-align: center; width: 100%; font-size: 1vw;
}
@media (max-width: 1260px) {
	#pageWrap h1{width: 6%; background-color: #003080;}
	#pageWrap div{width: 31.33%;}
	#pageWrap p{width: 70%;}
	#pageWrap p span{font-size: 1vw; padding: 7px 10px;}
}

@media (max-width: 1024px) {
	#pageWrap p{width: 80%;}
}

@media (max-width: 820px) {
	#pageWrap{
	display: block;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
#pageWrap h1{
	height: 5%;
	width: 100%;
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	align-items: center;
}
#pageWrap h1 img{
	display: block;
	width: 5%;
	margin: 0 auto;
}
#pageWrap div{
	width: 100%;
	height: 30%;
}
	.btNew{
	background: linear-gradient(rgba(0, 0, 0, .2),  rgba(0, 0, 0, .2)),  url("../img/bt01_sp.jpg");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	filter: grayscale(100%);
	transition: .3s ease-in-out;
	display: block;
	width: 100%!important;
	min-height: 100%;
	overflow: hidden;
}
.btIntern{
	background: linear-gradient(rgba(0, 0, 0, .2),  rgba(0, 0, 0, .2)),  url("../img/bt02_sp.jpg");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover;
	filter: grayscale(100%);
	transition: .3s ease-in-out;
	display: block;
	width: 100%!important;
	min-height: 100%;
	overflow: hidden;
}
.btCareea{
	background: linear-gradient(rgba(0, 0, 0, .2),  rgba(0, 0, 0, .2)),  url("../img/bt03_sp.jpg");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	filter: grayscale(100%);
	transition: .3s ease-in-out;
	display: block;
	width: 100%!important;
	min-height: 100%;
	overflow: hidden;
}
	#pageWrap a:hover .btNew,#pageWrap a:hover .btIntern,#pageWrap a:hover .btCareea{/*hoverした時の変化*/
	filter:grayscale(100%);
}
	#pageWrap p{
	display: flex;
	display: -webkit-flex;
	position: static;
	justify-content: center;
	align-items: flex-end;
	padding: 0 0 0 0;
	transform: none;
	width: 55%;
	margin: 0 auto;
	background: none;
	height: 100%;
}
#pageWrap p span{
	background-color: black;
	color: white;
	font-size: 3vw;
	letter-spacing: 0.5rem;
	padding: 5px 10px;
	width: 100%;
	display: block;
	text-align: center;
}
	footer{
	position: static; height: 5%; color: black; font-size: 2vw; overflow: hidden; padding-top: 1vw;
}
}