@charset "utf-8";

/* 選択処理 */
#thumbnail-carousel .splide__slide {
	background-clip: text;
	border: none !important;
	vertical-align: bottom;
	position: relative;
	bottom: 8;
}
#thumbnail-carousel .splide__slide img {
}
#thumbnail-carousel .splide__slide.is-active {
	background-size: cover;
	background-clip: padding-box;
	border: none !important;
}
#thumbnail-carousel .splide__slide.is-active img {
	display: none;
}



/* PC */
@media screen and (min-width:769px) {

	/* 画像サイズ調整 */
	.splide__slide img {
		height: auto;
		width: 100%;
	}
	.wrapper {
		width: 800px;
		margin: auto;
	}
	#ninjacats_summary #main-carousel {
		height:466px;
		width: 800px;
		margin: auto;
	}
	#thumbnail-carousel {
		width: CALC(100% - 80px);
		height: CALC(100% - 40px);
		padding: 20px 40px;
	}

	/* 矢印のクリック範囲など */
	.splide__arrow_item {
		background-color: transparent; /* ボタンの背景を透明にする */
		height: 50px;
		transition: .2s;
		width: 50px;
	}
	/* 矢印共通のスタイル */
	.splide__arrow_item::before {
		background-repeat: no-repeat;
		background-size: contain;
		bottom: 0;
		content: "";
		height: 50px;
		left: 0;
		margin: auto;
		position: absolute;
		top: 0;
		width: 50px;
	}
	/* 前の矢印 */
	.splide__arrow_item_prev::before {
		background-image: url('img/arrow_left.png');
	}
	/* 次の矢印 */
	.splide__arrow_item_next::before {
		background-image: url('img/arrow_right.png');
	}
	.splide__arrow_item_next {
		right: -10px;
	}
	/* 次のスライドが無い場合の矢印 */
	.splide__arrow_item:disabled::before {
		opacity: .5;
	}
}
/* スマホ */
@media screen and (max-width: 768px) {

    #thumbnail-carousel {
	width: 100%;
    height: 160px;
    }
	#thumbnail-carousel-list li {
	width: 160px;
    background-size: 160px;
	}
	#thumbnail-carousel-list img {
		height: 100%;
		width: auto;
	} 

	/* 矢印のクリック範囲など */
	.splide__arrow_item {
		background-color: transparent; /* ボタンの背景を透明にする */
		transition: .2s;
	}
	/* 矢印共通のスタイル */
	.splide__arrow_item::before {
		background-repeat: no-repeat;
		background-size: contain;
		bottom: 0;
		content: "";
		left: 0;
		margin: auto;
		position: absolute;
		top: 0;
		width: 18px;
		height: 36px;
		background-size: cover;
	}
	/* 前の矢印 */
	.splide__arrow_item_prev::before {
		background-image: url('img/arrow_left.png');
	}
	/* 次の矢印 */
	.splide__arrow_item_next::before {
		background-image: url('img/arrow_right.png');
	}
	.splide__arrow_item_prev {
		left: -20px;
	}
	.splide__arrow_item_next {
		right: -29px;
	}
	/* 次のスライドが無い場合の矢印 */
	.splide__arrow_item:disabled::before {
		opacity: .5;
	}

}