@charset "UTF-8";

.contents {
	padding: 80px 0 100px;
}
@media only screen and (max-width: 768px) {
	.contents {
		padding: calc(40 / 375 * 100vw) 0 calc(60 / 375 * 100vw);
	}
}

.slider-thumbnail .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
  width: calc(100% / 3);
}
.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
/* レイアウトのためのスタイル */
.swiper {
  max-width: 1200px;
  width: 100%;
}
.swiper-slide img {
  height: auto;
  width: 100%;
}
.swiper figure figcaption {
	font-size: 2rem;
	font-family: "Oswald", sans-serif;
	font-weight: 200;
	letter-spacing: .2em;
	background: none;
	text-shadow: 0 0 5px rgba(0,0,0,.8),0 0 5px rgba(0,0,0,.8);
}
.slider-thumbnail {
	margin-top: 20px;
}
.slider-thumbnail .swiper-wrapper {
	column-gap: 5px;
}
.slider-thumbnail .swiper-wrapper .swiper-slide {
	width: calc((100% - 40px) / 9) !important;
	cursor: pointer;
}
.slider-thumbnail .swiper-wrapper .swiper-slide:hover {
	opacity: 1;
}
@media only screen and (max-width: 768px) {
	.swiper {
		max-width: 90%;
	}
	.swiper figure figcaption {
		font-size: 1.5rem;
		top: 0;
		left: 0;
	}
	.slider-thumbnail {
		margin-top: 10px;
	}
	.slider-thumbnail .swiper-wrapper {
		gap: 5px;
		flex-wrap: wrap;
	}
	.slider-thumbnail .swiper-wrapper .swiper-slide {
		width: calc((100% - 10px) / 3) !important;
		cursor: pointer;
	}
	.slider-thumbnail .swiper-wrapper .swiper-slide:hover {
		opacity: 1;
	}
}