@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in2 {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-dw {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}






.swiper-container {
	width: 100%;
	height: 700px;
	
}

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

	.swiper-container {
		width: 100%;
		height: 667px;
		
	}

}

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

	.swiper-container {
		width: 100%;
		height: 568px;
		
	}

}






.mv_title {
	display: block;
	position: absolute;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	top: 40%;
	left: 100px;
	z-index: 100;
	width: 480px;
}


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

	.mv_title {
		display: block;
		position: absolute;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		top: 48%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
		z-index: 100;
	}

}

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

	.mv_title {
		display: block;
		position: absolute;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		top: 40%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
		z-index: 100;
		width: 380px;
	}

}


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

	.mv_title {
		display: block;
		position: absolute;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		top: 34%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
		z-index: 100;
		width: 320px;
	}

}

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

	.mv_title {
		display: none;
	}

}


.mv_lead {
	display: block;
	position: absolute;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	top: 68%;
	left: 100px;
	font-size: 1.4em;
	line-height: 1.7em;
	font-family: 'Noto Sans Japanese', sans-serif;
	color: #fff;
	z-index: 100;
	text-align: left;
}

.mv_lead span {
	display: block;
	font-size: 0.6em;
	line-height: 2.2em;
	padding: 18px 0 0 0;
}
	


@media only screen and (max-width: 1200px) {
	
	.mv_lead {
		display: block;
		position: absolute;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		top: 70%;
		left: 100px;
		font-size: 1.3em;
		line-height: 1.8em;
		font-family: 'Noto Sans Japanese', sans-serif;
		color: #fff;
		z-index: 100;
		text-align: left;
	}	
	
}

	

@media only screen and (max-width: 920px) {
	
	.mv_lead {
		display: block;
		position: absolute;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		top: 70%;
		left: 50%;
		width: 90%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
		font-size: 1.3em;
		line-height: 1.8em;
		font-family: 'Noto Sans Japanese', sans-serif;
		color: #fff;
		z-index: 100;
		text-align: center;
	}	
	
}

@media only screen and (max-width: 768px) {
	
	.mv_lead {
		display: block;
		position: absolute;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		top: 70%;
		left: 50%;
		width: 90%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
		font-size: 1.3em;
		line-height: 1.8em;
		font-family: 'Noto Sans Japanese', sans-serif;
		color: #fff;
		z-index: 100;
		text-align: center;
	}	
	
}
	
@media only screen and (max-width: 580px) {

	.mv_lead {
		display: block;
		position: absolute;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		top: 70%;
		left: 50%;
		width: 80%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
		font-size: 1.2em;
		line-height: 1.8em;
		font-family: 'Noto Sans Japanese', sans-serif;
		color: #fff;
		z-index: 100;
		text-align: center;
	}


	.mv_lead br {
		display: none;
	}
	
}

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

	.mv_lead {
		display: none;
	}

}
	
	
	
	


.swiper-container .swiper-wrapper .swiper-slide {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}


/* 01 */
.swiper-container .swiper-wrapper .swiper-slide p.title {
	display: block;
	position: absolute;
	top: 50%;
	right: 18%;
	color: #ffffff;
	font-size: 2.8em;
	font-weight: bold;
}

.swiper-container .swiper-wrapper .swiper-slide-active p.title {
	animation-name: fade-in;
	animation-duration: 1s;
	animation-delay: 0.5s;
	animation-fill-mode: both;
}


/* 02 */
.swiper-container .swiper-wrapper .swiper-slide p.title2 {
	display: block;
	position: absolute;
	top: 62%;
	right: 18%;
	color: #ffffff;
	font-size: 2.6em;
	font-weight: bold;
}

.swiper-container .swiper-wrapper .swiper-slide-active p.title2 {
	animation-name: fade-dw;
	animation-duration: 1.5s;
	animation-delay: 1s;
	animation-fill-mode: both;
}


/* 03 */
.swiper-container .swiper-wrapper .swiper-slide p.subtitle {
	display: block;
	position: absolute;
	top: 42%;
	right: 18%;
	color: #ffffff;
	font-size: 2.6em;
	font-weight: bold;
}

.swiper-container .swiper-wrapper .swiper-slide-active p.subtitle {
	animation-name: fade-in2;
	animation-duration: 1s;
	animation-delay: 2.5s;
	animation-fill-mode: both;
}



@media only screen and (max-width: 1400px){
	
	/* 01 */
	.swiper-container .swiper-wrapper .swiper-slide p.title {
		display: block;
		position: absolute;
	top: 56%;
	right: 18%;
		color: #ffffff;
		font-size: 2.8em;
		font-weight: bold;
	}
	
	.swiper-container .swiper-wrapper .swiper-slide-active p.title {
		animation-name: fade-in;
		animation-duration: 0.5s;
		animation-delay: 2.5s;
		animation-fill-mode: both;
	}
	
	
	/* 02 */
	.swiper-container .swiper-wrapper .swiper-slide p.title2 {
		display: block;
		position: absolute;
	top: 68%;
	right: 18%;
		color: #ffffff;
		font-size: 2.6em;
		font-weight: bold;
	}
	
	.swiper-container .swiper-wrapper .swiper-slide-active p.title2 {
		animation-name: fade-dw;
		animation-duration: 1s;
		animation-delay: 2.5s;
		animation-fill-mode: both;
	}
	
	
	/* 03 */
	.swiper-container .swiper-wrapper .swiper-slide p.subtitle {
		display: block;
		position: absolute;
		top: 42%;
		right: 10%;
		color: #ffffff;
		font-size: 2.6em;
		font-weight: bold;
	}
	
	.swiper-container .swiper-wrapper .swiper-slide-active p.subtitle {
		animation-name: fade-in2;
		animation-duration: 1s;
		animation-delay: 2.5s;
		animation-fill-mode: both;
	}
	
}



@media only screen and (max-width: 1080px){
	
	/* 01 */
	.swiper-container .swiper-wrapper .swiper-slide p.title {
		display: block;
		position: absolute;
	top: 56%;
	right: 10%;
		color: #ffffff;
		font-size: 2.8em;
		font-weight: bold;
	}
	
	.swiper-container .swiper-wrapper .swiper-slide-active p.title {
		animation-name: fade-in;
		animation-duration: 0.5s;
		animation-delay: 2.5s;
		animation-fill-mode: both;
	}
	
	
	/* 02 */
	.swiper-container .swiper-wrapper .swiper-slide p.title2 {
		display: block;
		position: absolute;
	top: 68%;
	right: 10%;
		color: #ffffff;
		font-size: 2.6em;
		font-weight: bold;
	}
	
	.swiper-container .swiper-wrapper .swiper-slide-active p.title2 {
		animation-name: fade-dw;
		animation-duration: 1s;
		animation-delay: 2.5s;
		animation-fill-mode: both;
	}
	
	
	/* 03 */
	.swiper-container .swiper-wrapper .swiper-slide p.subtitle {
		display: block;
		position: absolute;
		top: 42%;
		right: 10%;
		color: #ffffff;
		font-size: 2.6em;
		font-weight: bold;
	}
	
	.swiper-container .swiper-wrapper .swiper-slide-active p.subtitle {
		animation-name: fade-in2;
		animation-duration: 1s;
		animation-delay: 2.5s;
		animation-fill-mode: both;
	}
	
}