/* CSS Document */
/*スライドショー*/

.top-image{
	width: 100%;
	position: relative;
	z-index: 6!important;
	margin: 0 auto;
	overflow: hidden;
	height: 100vh;
	
}
.top-image .slider{
	margin: auto;
	width: 100%;
}
.top-image .slider-img img {
  height: auto;
  width: 100%;
}
.top-image .Catch{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 45%;
	margin: auto;
	text-align: center;
	max-width: 800px;
	z-index: 2;
}
/*
.catchwrap{
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s ;
}
.catchwrap img {
  display: block;
  transform: translate(100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s ;
}
.catchwrap.img-animation,
.catchwrap.img-animation img{
  transform: translate(0, 0);
}*/

.top-image .main01{
	background: url("../img/top/main01.png") center center no-repeat;
	background-size: cover;
	height: 100vh;
}
.top-image .main02{
	background: url("../img/top/main02.png") left center no-repeat;
	background-size: cover;
	height: 100vh;
}
.top-image .main03{
	background: url("../img/top/main03.png") center center no-repeat;
	background-size: cover;
	height: 100vh;
}
.top-image .main04{
	background: url("../img/top/main04.png") center center no-repeat;
	background-size: cover;
	height: 100vh;
}
.top-image .main05{
	background: url("../img/top/main05.png") center center no-repeat;
	background-size: cover;
	height: 100vh;
}
.top-image .photo img{
	width: 100%;
	height: auto;
}

@media print , screen and (min-width:1px) and (max-width: 960px) {
.top-image{
	margin: 60px auto 0;
	position: relative;
}
	
}
@media print , screen and (min-width:1px) and (max-width: 768px) {
.top-image .Catch{
	width: 55%;
}
.top-image,
.top-image .main01,
.top-image .main02,
.top-image .main03,
.top-image .main04,
.top-image .main05{
	height: 60vh;
}
}
@media print , screen and (min-width:1px) and (max-width: 480px) {

.top-image,
.top-image .main01,
.top-image .main02,
.top-image .main03,
.top-image .main04,
.top-image .main05{
	height: 40vh;
}
}

.About{
	margin: 3% auto;
}
.About h2{
	text-align: center;
	margin: 3% auto;
	width: 70%;
	max-width: 500px;
}
.About .btn{
	width: 50%;
	padding: 20px;
}

.products{
	margin: 3% auto 0;
	position: relative;
}
.products .txt{
	width: 50%;
	padding: 10px auto 10px 15%;
}
.products .txt h2{
	text-align: center;
	width: 70%;
	max-width: 550px;
	margin: auto;
}
.products .txt p{
	text-align: right;
	margin: 5% 20% 0 auto;
	line-height: 1.5em;
}
.products .txt .btn{
	width: 40%;
	max-width: 200px;
	margin: 3% 20% 0 auto;
}
.products .txt .leftp{
	width: 90%;
	text-align: center;
	margin: 3% auto;
}
.products .photo{
	width: 55%;
	margin-left: -5%;
}
.equipment{
	margin: 0 auto;
	position: relative;
	background: url("../img/top/products_back.svg") right top no-repeat;
	background-size: 100%;
}
.equipment .photo{
	width: 45%;
}
.equipment .txt{
	width: 55%;
	padding: 3% 0;
}
.equipment .txt h2{
	text-align: left;
	width: 70%;
	max-width: 550px;
}
.equipment .txt p{
	text-align: left;
	margin: 5% auto 20px 10%;
	line-height: 1.5em;
}
.equipment .txt .btn{
	width: 40%;
	max-width: 200px;
	margin: 5% auto 20px 10%;
}

.otherbtn{
	position: relative;
	margin: 0 auto;
	background: url("../img/top/company_back.svg") center top no-repeat;
	background-size: 100% auto;
	padding: 5% 0 3% 0;
}
.combtn{
	width: 50%;
	border-right: 1px solid #fff;
	position: relative;
	max-width: 500px;
}
.combtn .en{
	position: absolute;
	left: -10%;
	top: -10%;
	width: 70%;
}
.sdgsbtn{
	width: 50%;
	border-left: 1px solid #fff;
	position: relative;
	max-width: 500px;
}
.sdgsbtn .en{
	position: absolute;
	right: -10%;
	top: -10%;
	width: 70%;
}
.recruit{
	margin: 0 auto;
	position: relative;
	padding-bottom: 5%;
}
.recruit::after{
	content: "";
	background: url("../img/top/recruit_back.svg") bottom center no-repeat;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 58%;
	width: 100%;
	z-index: -1;
}
.recruit .photo{
	width: 90%;
	margin: 0 auto 0 0;
}
.recruit .txt{
	margin: -15% 0 5% auto;
	width: 50%;
}
.recruit .txt p{
	text-align: left;
	line-height: 1.5em;
	margin: 10px auto 10px 20%;
}
.interview_btn{
	width: 45.3333%;
	margin: 20px -7%;
}

.btnentry{
	background: #1e46b0;
	padding: 5% 0;
}
.btnentry a{
	width: 60%;
	max-width: 500px;
	margin: auto;
	display: block;
}
@media print , screen and (min-width:1px) and (max-width: 960px) {

.About .btn{
	width: 50%;
	padding: 10px;
}
	
}
@media print , screen and (min-width:1px) and (max-width: 630px) {
	
.products .txt{
	width: 100%;
	padding: 10px;
}
.products .photo{
	width: 100%;
	margin: 0;
}
.equipment .photo{
	width: 100%;
	order: 2;
}
.equipment .txt{
	width: 100%;
	padding: 30px 10px 10px 10%;
	order: 1;
}

.equipment{
	margin: 0 auto;
	position: relative;
	background: url("../img/top/products_back.svg") center top no-repeat;
	background-size: auto 100%;
}	
	
.recruit .photo{
	width: 100%;
	margin: 0 auto 0 0;
}
.recruit .txt{
	margin:10px auto;
	width: 100%;
}
	.recruit .Flexboxcenter{
		width: 100%;
		margin: auto;
		justify-content: flex-start;
		align-items: flex-start;
	}
.recruit::after{
	content: "";
	background: url("../img/top/recruit_back.svg") bottom center no-repeat;
	background-size: cover;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 70%;
	width: 100%;
	z-index: -1;
}
.interview_btn.int01{
	width: 68%;
	margin: 0 auto 0 0;
}
.interview_btn.int02{
	width: 68%;
	margin: -50px 16% 0 auto;
}
.interview_btn.int03{
	width: 68%;
	margin: -50px 0 0 auto;
}
}
@media print , screen and (min-width:1px) and (max-width: 530px) {

.About .btn{
	width: 100%;
	padding: 10px;
}
	
}