@charset "utf-8";
/* slick カスタマイズ */

/*ページ読み込み時に一瞬「縦並び」になる対策 202606追加 優先度注意*/
/*.slick-slider.slick-initializedにすると遅い×*/
/* 読み込み前の初期状態 */
.KV_slider {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.06s ease; 
	}
/* 読み込み完了後 */
.KV_slider.slick-initialized{
	opacity: 1;
	visibility: visible;
	}

/*スライダー*/
.slick-slider .slick-list{}
.slick-slide{}
.slick-slide>p{
	font-size: 0.8rem;
	margin: 0;
	padding: 0.5em 1rem;
	text-align: center;
	transition: ease 5.0s;
	opacity: 0;
	}
.slick-slide.slick-current.slick-active>p{
	transition: ease 1.8s;
	opacity: 1;
	}
.slick-slide img{/**/
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	}
.slick-dotted.slick-slider{margin-bottom: 0;}
/*ドット サムネイル化*/
.slick-dots, .gl_post_content ul.slick-dots{
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	overflow: hidden;/*ついか*/
	position: relative;
	bottom: auto;
	padding: 0 1rem;
	}
.slick-dots li, .gl_post_content ul.slick-dots li{
	display: inline-block;
	height: 32px;
	width: 32px;
	padding: 0;
	margin: .5rem 4px 0 4px;
	}
	@media screen and (min-width: 520px) {
	.slick-dots li .gl_post_content ul.slick-dots li{
		height: 40px;
		width: 40px;
		margin: 1rem 4px 0 8px;
		}
	}
.slick-dots li:only-child{
	display: none;/*ひとつだけのときは表示しない*/
	}
.slick-dots img{
	width: 100%;
	height: auto;/*コレはいずれ調整いる*/
	opacity: 0.8;
	border: 1px solid rgba(0,0,0,0.12);
	margin: 0;
	}
.slick-dots .slick-active img{
	opacity: 1;
	border: 1px solid rgba(66, 165, 245,.54);
	margin: 0;
	}
/*スライダ矢印*/
.slick-arrow{
	overflow: visible;
	}
.slick-prev,.slick-prev:hover, .slick-prev:focus,
.slick-next,.slick-next:hover, .slick-next:focus{
	width: 48px;
	height: 32px;
	/*z-index: 7775;*/
	margin-top: -32px;
	background-image: url("././img/arrow_w.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 0.6;
	}
	.single .slick-prev,.single .slick-prev:hover,.single .slick-prev:focus,
	.single .slick-next,.single .slick-next:hover,.single .slick-next:focus{
		background-image: url("././img/arrow.svg");
		}
/*幅広＠調整*/
.slick-prev,.slick-prev:hover, .slick-prev:focus{
	left: -36px;
	transform: rotateZ( -90deg );
	}
.slick-next,.slick-next:hover, .slick-next:focus{
	right:-36px;
	transform: rotateZ( 90deg );
	}
.slick-prev:before, .slick-next:before{/*デフォルトの→消し*/
	visibility: hidden;
	content: none;
	}
.slick-prev:hover,.slick-next:hover{
	opacity: 1;
	/*background-color: rgba(4,255,0,0.5);*/
	}
	@media screen and (min-width: 680px) {
		.slick-prev,.slick-prev:hover, .slick-prev:focus,
		.slick-next,.slick-next:hover, .slick-next:focus{
			width: 64px;
			height: 64px;
			background-size: 100%;/**/
			margin-top: -64px;
		}
		.slick-prev,.slick-prev:hover, .slick-prev:focus{left: -56px;}
		.slick-next,.slick-next:hover, .slick-next:focus{right:-56px;}
	}
	@media screen and (min-width: 782px) {
		.slick-prev,.slick-prev:hover, .slick-prev:focus,
		.slick-next,.slick-next:hover, .slick-next:focus{
			width: 78px;
			height: 78px;
			background-size: 100%;
			margin-top: -78px;
		}
		.slick-prev,.slick-prev:hover, .slick-prev:focus{left: -72px;}
		.slick-next,.slick-next:hover, .slick-next:focus{right:-72px;}
	}


/*複数対応サムネイル付SlickSlider*/
.detail_layout {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	}
.single .detail_layout {padding: 0 28px;}


/*グッズページ以外のグッズスライダー 調整*/
body:not(.archive) .detail_layout{
	padding: 1rem 1rem 0;
	}
body:not(.archive) .slick-prev, body:not(.archive) .slick-prev:hover,
body:not(.archive) .slick-prev:focus, body:not(.archive) .slick-next,
body:not(.archive) .slick-next:hover, body:not(.archive) .slick-next:focus{
	background-image: url("././img/arrow.svg");
	}
	@media screen and (min-width: 680px) {
	body:not(.archive) .slick-prev, body:not(.archive) .slick-prev:hover,
	body:not(.archive) .slick-prev:focus, body:not(.archive) .slick-next,
	body:not(.archive) .slick-next:hover, body:not(.archive) .slick-next:focus{
		width: 64px !important;
		height: 48px !important;
		margin-top: -48px;
		right: -56px !important;
		
		}
	body:not(.archive) .slick-prev{
		left: -56px !important;
		}
	}
body:not(.archive) .detail_layout .slick-slide img{border: 1px solid rgba(0, 0, 0, 0.08);}

