@charset "UTF-8";
/* CSS Document */
#top{
	text-align: center;
	}
	
h2{
	position: absolute;
	width: 100%;
	height: auto;
	top: 30%;
	text-align: center;
	margin: auto;
	font-family: Helvetica, sans-serif;
	font-size: 42px;
	font-weight: bold;
	color: #004ea2;
	letter-spacing: 0.1em;
	opacity: 0;
	text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.7);
	}
	
	
@media screen and (min-width: 999px){
	h2{
		font-size: 54px;
		}
	}
	
#contents{
	background:#f0fbfa;
	padding: 0 0 0 0;
	}	

/*------------
slider
-------------*/	
#slider{
	position: relative;
	width: 100%;
	padding: 41% 0 0 0;
	margin: 0 0 -10% 0; 
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
	-js-display: flex;
	display: flex;	
	-webkit-box-align:center;
	-moz-box-align:center;
	-webkit-align-items: center;
	align-items:center;
	box-align:center;
	}
	
#slide01,#slide02,#slide03,#slide04{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}	
	
#slide01{
	background: url(images/img_top_01.jpg) center center no-repeat;
	background-size: cover;
	}
	
#slide02{
	background: url(images/img_top_02.jpg) center center no-repeat;
	background-size: cover;
	}
	
#slide03{
	background: url(images/img_top_03.jpg) top left no-repeat;
	background-size: cover;
	}
	
#slide04{
	background: url(images/img_top_04.jpg) top left no-repeat;
	background-size: cover;
	}
	

	
		
/*------------
tiles
-------------*/
.inner-tile{
	max-width: 1010px;
	margin: 0 auto;
}

#tile{
	position: relative;
}

.box{
	margin-bottom: 5px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	-webkit-transition: 0.5s ease;
	transition: 0.5s ease;
		}

.box img{
	display: none;
}

.box .text{
	position: absolute;
	bottom: 0;
	right:0;
	padding: 20px;
	-webkit-border-top-left-radius: 20px;
	-ms-border-top-left-radius: 20px;
	-moz-border-top-left-radius: 20px;
	border-top-left-radius: 20px;
	-webkit-transition: 0.5s ease;
	transition: 0.5s ease;
	}

.box .text.team{
	margin:auto;
	bottom:20%;
	right:0;
	left:0;
}

.box .text.top{
	width: 50%;
	box-sizing: border-box;
	height: 100%;
	bottom:0;
	left:0;
	padding:15% 0 0 0;
}

.box .text.recruit{
	width: 40%;
	box-sizing: border-box;
	height: 100%;
	bottom:0;
	left:0;
	padding:10% 0 0 0;
}

.box .text p{
	width: 100%;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.05em;
	}

.box .text p span{
	display: block;
	text-align: right;
}

.box .text.team p span,.box .text.top p span,.text.recruit p span{
	text-align: center;
}
	
.title-english{
	font-style: italic;	
	}
	
.title{
	font-size:2.2rem;
	font-weight: bold;
}

@media screen and (max-width:999px){
	.title-english{
	font-size: 1.2rem;	
	}
	.title{
		font-size:1.8rem;
		letter-spacing: 0;
	}
	
	.box .text.team{
	margin:auto;
	bottom:15%;
	right:0;
	left:0;
	}
}

.box span:first-child{
	margin: 0;
	}

.box span{
		margin: 2% 0 0 0;
		}
	
.box a{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}	
.box p img{
	max-width: 100%;
	}

.width-2{
	width: 19.75%;
	width: -webkit-calc(20% - 5px);/*Chrome19~25対応*/
	width: -moz-calc(20% - 5px);/*Firefox4~15対応*/
	width: calc(20% - 5px);  
}
.width-3{
	width: 29.75%;
	width: -webkit-calc(30% - 5px);/*Chrome19~25対応*/
	width: -moz-calc(30% - 5px);/*Firefox4~15対応*/
	width: calc(30% - 5px);  
}
.width-4{
	width:39.75%;
	width: -webkit-calc(40% - 5px);/*Chrome19~25対応*/
	width: -moz-calc(40% - 5px);/*Firefox4~15対応*/
	width: calc(40% - 5px);  
}
.width-6{
	width:59.5%;
	width: -webkit-calc(60% - 5px);/*Chrome19~25対応*/
	width: -moz-calc(60% - 5px);/*Firefox4~15対応*/
	width: calc(60% - 5px);  
}

.height-2{
	padding: 20% 0 0 0;
}
.height-3{
	padding: 30% 0 0 0;
}
.height-4{
	padding: 40% 0 0 0;
}

	.bt-team{
		border-radius: 30px 0 0 0;
	}
	.bt-message{
		background:url(images/bn_pc_message.jpg) center center no-repeat;
		background-size: 100% auto;
		}

	.bt-products{
		background:url(images/bn_pc_products.jpg) center center no-repeat;
		background-size: 100% auto;
		}

	.bt-team{
		background: #004ea2;
	
		}
	.bt-team:hover{
		background: #43b149;
	}

	.bt-role{
		background:url(images/bn_pc_role.jpg) center center no-repeat;
		background-size: 100% auto;
	}

	.bt-welfare{
		background:url(images/bn_pc_welfare.jpg) center center no-repeat;
		background-size: 100% auto;
	}

	.bt-tobecometop{
		background:url(images/bn_pc_tobecometop.jpg) right center no-repeat;
		background-size: 52% auto;
	}

	.bt-work{
		background:url(images/bn_pc_work.jpg) center center no-repeat;
		background-size: 100% auto;
	}

	.bt-environment{
		background:url(images/bn_pc_environment.jpg) center center no-repeat;
		background-size: 100% auto;
	}

	.bt-crosstalk{
		background:url(images/bn_pc_crosstalk.jpg) center center no-repeat;
		background-size: 100% auto;
	}

	.bt-recruit{
		-webkit-border-top-left-radius: 20px;
		-ms-border-top-left-radius: 20px;
		-moz-border-top-left-radius: 20px;
		border-top-left-radius: 20px;
		background:url(images/bn_pc_recruit.jpg) right center no-repeat;
		background-size: 60% auto;
	}

	.bt-history{
		background:url(images/bn_pc_history.jpg) center center no-repeat;
		background-size: 100% auto;
	}

	.bt-message:hover,.bt-products:hover,.bt-role:hover,.bt-welfare:hover,.bt-environment:hover,.bt-work:hover,.bt-crosstalk:hover,.bt-history:hover{
		background-size: 110% auto;
	}

.bt-tobecometop:hover{
	background-size: 58% auto;
}

.bt-recruit:hover{
	background-size: 65% auto;
}

.box:hover .text.blue,.box:hover .text.rightblue,.box:hover .text.orange{
	background: #43b149;
}
				

@media screen and (max-width: 999px){
	.box>p{
		font-size: 20px;
		}
	
	#tile{
		margin: 0 0 0 4.5%;
		}
	
}