@charset "UTF-8";
/* CSS Document */
/* ===============================

INDEXの投稿記事のスライダー
コンテナのwidthはpost-list.cssのスタイルと合わせる > slider-post.jsに直書きしてます
カード内のオブジェクトはpost-list.cssのスタイルを継承する

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

/* =================
arrow & ページネイション */
.post__controls {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	gap: 0 20px;

	margin-top: var(--controls-gap);
	reading-flow: flex-visual;

	margin-top: 2.9em;
}
/* ------------
矢印 */
.post__arrow {
	--slide-arrow-width: 20px;
	position: static;
	inset: 0;
}
.post__arrow svg {
	stroke-width: 4;
}
.post__arrow--prev {
	-webkit-box-ordinal-group: 0;
	    -ms-flex-order: -1;
	        order: -1;
}
/* ------------
ページネーション */
.post__pagination {
	position: static;
	padding: 0;
	margin: 0;
	inset: 0;
}
@media(any-hover: hover) {
	.post__arrow {
		-webkit-transition: color .2s var(--easeInOutCirc);
		transition: color .2s var(--easeInOutCirc);
	}
	.post__arrow--prev:hover {
		color: var(--color-primary);
	}
	.post__arrow--next:hover {
		color: var(--color-primary);
	}
}

/* =================
コンテナ */
.post__slide {
	max-width: 336px;
}

/* スライドが4枚以下のときはスライドを破棄する */
.is-destroy .post__list {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
    -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
	width: var(--max-width);
	max-width: calc(100% - var(--gutter-var-lg));
}
.is-destroy.post__slider {
	margin-top: 0 !important;
}

/* スライドが5枚以上でスライダーが有効の場合、559px以下のときはスライダーを破棄して、カードを2列で表示する */
@media (max-width: 559px) {
	.post__slide-list {
        --post-slide-width: max(
            154px,
            calc(calc(100% / 2) - var(--gutter-var-sm))
        );
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
		-ms-flex-wrap: wrap !important;
		    flex-wrap: wrap !important;
		-webkit-box-pack: justify !important;
		    -ms-flex-pack: justify !important;
		        justify-content: space-between !important;
		gap: 0 var(--gutter-var-md);
		max-width: calc(100% - var(--gutter-var-lg));
	}
	.post__slide-list::before,
	.post__slide-list::after {
		content: "";
	}
	.post__slide:empty,
	.post__slide-list::before,
	.post__slide-list::after {
		-webkit-box-flex: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
		width: var(--post-slide-width);
		max-width: 100%;
		height: 0px;
	}
	.post__slide-list::before {
		-webkit-box-ordinal-group: 2;
		    -ms-flex-order: 1;
		        order: 1;
	}
	.post__slide:is(:not(.post__slide:empty)) {
		-webkit-box-flex: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
		width: var(--post-slide-width);
		max-width: 100%;

		margin-top: var(--gutter-md);
	}
}