@charset "UTF-8";



/****************************************************
 * スライダー｜1個目
 ****************************************************/

/* スライダー全体 */
.article-slider--thumb-autoplay {
	background: #ffffff;
	overflow: hidden;
}

.article-slider--thumb-autoplay a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.article-slider--thumb-autoplay img {
	width: 100%;
	height: auto;
	display: block;
}

.article-slider--thumb-autoplay a br,
.article-slider__main > p {
	display: none;
}

/* メインスライダー部分 */
.article-slider__main {
	position: relative;
	overflow: hidden;
}

.article-slider__main .swiper-slide {
	overflow: hidden;
}

/* hover時の最小限の表情 */
.article-slider__main img {
	transition: opacity 0.3s ease;
}

.article-slider__main a:hover img {
	opacity: 0.95;
}

/* ページネーション */
/* .article-slider__main .swiper-pagination {
	position: absolute;
	bottom: 14px; 
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}

@media (max-width: 768px) {
	.article-slider__main .swiper-pagination {
		bottom: 10px;
	}
} */


/* サムネイル部分 */
.article-slider__thumbs {
	padding: 10px 12px;
	background: #F5F6F8;
}

@media (max-width: 768px) {
	.article-slider__thumbs {
		padding: 8px 10px;
	}
}

.article-slider__thumbs .swiper-wrapper {
	align-items: center;
	margin-top: 0;
	padding: .7em;
}

.article-slider__thumbs .swiper-slide {
	width: 100px;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (max-width: 768px) {
	.article-slider__thumbs .swiper-slide {
		width: 56px;
	}
}

.article-slider__thumbs .swiper-slide-thumb-active {
	opacity: 1;
	transform: scale(1.05);
}





/****************************************************
 * スライダー｜2個目
 ****************************************************/

.square-marquee-slider {
	overflow: hidden;
}

/* コンテンツ幅を無視したいときはこれを親クラスに入れる */
.full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.square-marquee__item {
	width: 160px;
}

@media (max-width: 768px) {
	.square-marquee__item {
		width: 120px;
	}
}

.square-marquee__item a {
	display: block;
}

.square-marquee__item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 8px;
}

.square-marquee__item a:hover img {
	opacity: 0.85;
}

.square-marquee__track .swiper-slide {
	width: 18%;
}

@media (max-width: 1024px) {
	.square-marquee__track .swiper-slide {
		width: 30%;
	}
}

@media (max-width: 600px) {
	.square-marquee__track .swiper-slide {
		width: 70%;
	}
}






/****************************************************
 * スライダー｜3個目
 ****************************************************/