/* CSS Document */

/*==================================================

top-contents
=================================================*/

#top-image {
	width: 100%;
	position: relative;
	overflow: hidden;
}
#top-image h1,#top-image .clone {
	width: 90%;
	position: absolute;
	mix-blend-mode: overlay;
	color: #FFF;
	font-style: italic;
	font-size: clamp(6vw, 11vw, 14.5vw);
	font-weight: 400;
	line-height: 110%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	z-index: 2;
}
#top-image .clone {
	mix-blend-mode: normal;
	opacity: .2;
}
#top-image .photo {
	animation: blight 2s ease-in-out infinite 0s alternate;
}

@keyframes blight {
	0% {
		filter: brightness(.6);
	}
	100% {
		filter: brightness(1.2);
	}
}
#top-image #particles-js {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#top-image .photo .mv-cover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
}
#top-image .swiper-slide[class*=-active] h2 {
	right: 0;
}
#top-image .swiper-slide h2 {
	width: 45%;
	max-width: 550px;
	position: absolute;
	overflow: hidden;
	color: #0049b6;
	font-size: clamp(1.2rem, 1.8vw, 2.3rem);
	text-align: center;
	right: -100%;
	bottom: 28%;
	background-color: #0049b6;
	clip-path: polygon(4% 0, 100% 0%, 100% 100%, 0% 100%);
	transition: all 0.5s;
	padding: min(4%, 1.3em) .5em;
}
#top-image .swiper-slide h2.col2 {
	color: #008db6;
	background-color: #008db6;
}
#top-image .swiper-slide h2.col3 {
	color: #4900b6;
	background-color: #4900b6;
}
#top-image .swiper-slide h2 span {
	display: block;
	position: relative;
	z-index: 3;
}

#top-image .swiper-slide h2::before {
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #FFF;
	clip-path: polygon(4% 0, 100% 0%, 100% 100%, 0% 100%);
	top: 0;
	left: 8px;
	z-index: 1;
}


#top-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

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

	#top-image h1,#top-image .clone {
		font-size: 13vw;
		text-align: center;
		transform: translate(-50%, -70%);
	}
	#top-image .photo .swiper-container img {
		width: 150%;
		max-width: 150%;
		height: auto;
		margin-left: -25%;
	}
	#top-image .swiper-slide h2 {
		width: 72%;
		bottom: 8%;	
	}
	#top-image .swiper-slide h2::before {
		left: 5px;
	}
}

@media only screen and (min-width:1px) and (max-width: 568px) {
	

}
	
@media only screen and (min-width:1px) and (max-width: 480px) {
	

}