/*////////////////////////////////////////////////////////////////////////////*/

/*! [common] posts-box.css */

/*////////////////////////////////////////////////////////////////////////////*/


/*------------------------------------------------------------------------------

	親コンテナー

------------------------------------------------------------------------------*/
/*

	■ 表示形式について
	・card-style
	　上からアイキャッチ画像、テキストという上下並びによる、アイキャッチ画像を重視する表示形式

	・list-style
	　左からアイキャッチ画像、テキストという左右並びによる、記事数の多い一覧に向いている表示形式

	・.right-eyecatch
	　アイキャッチ画像を右側配置にする。記事タイトルに集中させることができる。アイキャッチ画像が弱いなら右側配置がよいだろう。

	■ アイキャッチ画像について
	・アイキャッチ画像のアスペクト指定を属性指定にし、かつ親コンテナーではなく投稿単位にしたのは、リストの先頭だけカードにしたい場合などに対応するため。
	　.posts-boxは主にグリッドを決める、.postはカードのデザインや書式を決める

	■ その他：変数定義について
	・CSS変数（カスタムプロパティ）は、通常 :root などのスコープの広い箇所でまとめて定義するのが一般的。
	・変数は「定義された順に評価される」わけではなく、「使用されるときに評価される」点に注意。
	・変数の再評価は、プロパティが実際に使われる時点で行われ、定義順ではなくカスケードの影響を受ける。
	・変数同士が依存関係にある場合、片方だけを別セレクタ（例：子孫セレクタ）で上書きしても、連動して再評価されるとは限らない。
	・変数を組み合わせるときは、できるだけ同じスコープ・同じセレクタで定義・上書きすると安定する。

*/
.posts-box {

	/* リストスタイル - ボーダー幅 */
	--list-style-border-width: 1px;

	/* リストスタイル - ボーダーカラー */
	--list-style-border-color: var(--color-text-h-rgb, 17 17 17);
	--list-style-border-color-a: .1;
}


/*------------------------------------------------------------------------------

	カードコンテナー

------------------------------------------------------------------------------*/

.posts-box .post {

	/* ----- テキスト ----- */

	/* テキストカラー */
	--text-color-rgb: var(--color-text-h-rgb, 17 17 17);
	--text-color-a: 1;

	/* テキストの行高さ */
	--text-line-height: 1.5;

	/* タイトルの文字サイズ */
	--text-title-font-size-factor: 1;
	--text-title-font-size: max(calc(var(--font-size, 1em) * var(--text-title-font-size-factor)), 14px);
	/* タイトル以外の文字サイズ */
	--text-item-size-factor: .625;
	--text-item-font-size: max(calc(var(--font-size, 1em) * var(--text-item-size-factor)), 12px);

	/* テキストアイテムマージン */
	--text-item-margin-top: calc((var(--text-line-height) - 1) / 2 * 1rem);
	--text-item-margin-bottom: var(--text-item-margin-top);
	--text-item-margin-left: 0rem;
	--text-item-margin-right: max(calc((var(--text-line-height) - 1) * 2 * 1rem), 1rem);

	/* テキストアイテム上下マージン高さ */
	--text-item-margin-height: calc(var(--text-item-margin-top) + var(--text-item-margin-bottom));
	/* テキストアイテム高さ【★】 */
	--text-item-height: calc(
		var(--text-item-font-size) * var(--text-line-height)
		+ var(--text-item-margin-height)
	);

	/* タイトルのハーフレディング高さ */
	--text-title-leading-trim: calc((var(--text-line-height) - 1) * var(--text-title-font-size) / 2);
	/* タイトルマージン */
	--text-title-margin-top: var(--text-item-margin-top);
	--text-title-margin-bottom: var(--text-title-margin-top);
	--text-title-margin-left: 0rem;
	--text-title-margin-right: 0rem;
	/* タイトル上下マージン高さ【★】 */
	--text-title-margin-height: calc(var(--text-title-margin-top) + var(--text-title-margin-bottom));

	/* タイトルの最大行数【★】 */
	--text-title-max-lines: 2;
	/* タイトルClamp高さ【★】 */
	--text-title-clamp-height: calc(var(--text-title-font-size) * var(--text-line-height) * var(--text-title-max-lines));
	/* タイトル高さ【★】 */
	--text-title-height: calc(var(--text-title-clamp-height) + var(--text-title-margin-height));

	/* テキストコンテナ―余白 */
	/* .list-style がデフォルト */
	--text-padding: 1rem;
	--text-padding-top: var(--text-padding);
	--text-padding-bottom: var(--text-padding);
	--text-padding-left: var(--text-padding);
	--text-padding-right: var(--text-padding);

	/* テキストアイテムブロック行数【★】 */
	--text-item-lines: 1;
	/* タイトル高さ＋アイテム高さ×２行＋テキストコンテナ―上下余白【★】 */
	/* ※表示要素にタクソノミーがある場合、アイテム高さ --text-item-height より大きいため、合計高さがズレます */
	--text-height: calc(
		var(--text-title-height)
		+ var(--text-item-height) * var(--text-item-lines)
		+ var(--text-padding-top)
		+ var(--text-padding-bottom)
	);

	/* ----- アイキャッチ ----- */

	/* アイキャッチ幅サイズ(正方形)【★】 */
	--eyecatch-width: var(--text-height);
	/* アイキャッチ角丸 */
	--eyecatch-border-radius: .5rem;

	/* ----- カードコンテナー ----- */

	/* 投稿カード余白 */
	--post-padding: 0rem;
	/* 投稿カード通常時の背景 */
	--post-background: transparent;
	/* 投稿カード通常時のボーダー */
	--post-border-width: var(--btn-border-width, 1px);
	--post-border-color-rgb: var(--color-text-link-rgb);
	--post-border-color-a: 0;
	--post-border-color: rgb(var(--post-border-color-rgb) / var(--post-border-color-a));
	--post-border: var(--post-border-width) solid var(--post-border-color);
	--post-border-radius: calc(var(--eyecatch-border-radius) + var(--post-padding));

	/* ----- ホバー ----- */

	/* ホバー枠余白 */
	/* ※投稿カード余白が0以外の時は、同じ値にすべき */
	--onhover-box-padding: .5rem;
	/* ホバー枠位置 */
	--onhover-box-top: calc(var(--post-padding) - var(--onhover-box-padding));
	--onhover-box-left: var(--onhover-box-top);
	/* ホバー枠サイズ */
	--onhover-box-width: calc(100% + (var(--post-padding) - var(--onhover-box-padding)) * -1 * 2);
	--onhover-box-height: var(--onhover-box-width);
	/* ホバー枠ボーダー */
	--onhover-box-border-width: var(--btn-border-width, 1px);
	--onhover-box-border-color-rgb: var(--color-text-link-rgb);
	--onhover-box-border-color-a: 1;
	--onhover-box-border-color: rgb(var(--onhover-box-border-color-rgb) / var(--onhover-box-border-color-a));
	--onhover-box-border: var(--onhover-box-border-width) solid var(--onhover-box-border-color);
	--onhover-box-border-radius: calc(var(--eyecatch-border-radius) + var(--onhover-box-padding));
	/* ホバー枠背景色 */
	--onhover-box-background: transparent;
	/* ホバー枠opacity */
	--onhover-box-opacity: 0;
}

/* 非表示指定 */
.posts-box .post.hidden {
	display: none;
}

/* タイトル line-clamp */
.posts-box .post.title-lines-1 {
	--text-title-max-lines: 1;
}
.posts-box .post.title-lines-2 {
	--text-title-max-lines: 2;
}
.posts-box .post.title-lines-3 {
	--text-title-max-lines: 3;
}
.posts-box .post.title-lines-4 {
	--text-title-max-lines: 3;
}

/* テキストのタイトル以外の表示行指定 */
.posts-box .post.item-lines-1 {
	--text-item-lines: 1;
}
.posts-box .post.item-lines-2 {
	--text-item-lines: 2;
}
.posts-box .post.item-lines-3 {
	--text-item-lines: 3;
}
.posts-box .post.item-lines-4 {
	--text-item-lines: 4;
}


/*------------------------------------------------------------------------------

	リンクコンテナー

------------------------------------------------------------------------------*/


/*	コンテナー
------------------------------------------------------------------------------*/

.posts-box .post > .a {
	display: flex;
	/**/
	position: relative;
	padding: var(--post-padding);
	border-radius: var(--post-border-radius);
	text-decoration: none;
	line-height: var(--text-line-height);
	font-size: var(--text-item-font-size);
	color: rgb(var(--text-color-rgb) / var(--text-color-a));
	fill: rgb(var(--text-color-rgb) / var(--text-color-a));
}

.posts-box .post > .a::before {
	content: '';
	position: absolute;
	z-index: var(--post-zindex, 0);
	left: var(--post-left, 0px);
	top: var(--post-top, 0px);
	width: var(--post-width, 100%);
	height: var(--post-height, 100%);
	padding: var(--post-padding);
	background: var(--post-background, transparent);
	border: var(--post-border);
	border-radius: var(--post-border-radius);
}


/*	カード形式
------------------------------------------------------------------------------*/

.posts-box .card-style > .a {
	flex-direction: column;
}


/*	リスト形式
------------------------------------------------------------------------------*/

.posts-box .list-style > .a {
	align-items: center;
	/**/
	min-height: var(--text-height);
}


/*	BP
------------------------------------------------------------------------------*/

.posts-box .card-style,
.posts-box .list-style {
	--text-padding-top: var(--text-padding);
	--text-padding-bottom: var(--text-padding);
	--text-padding-left: var(--text-padding);
	--text-padding-right: var(--text-padding);
}

.posts-box .card-style.text-tiny,
.posts-box .list-style.text-tiny {
	--text-padding-top: 0rem;
	--text-padding-bottom: 0rem;
	--text-padding-left: var(--text-padding);
	--text-padding-right: 0rem;
}

.posts-box .list-style.right-eyecatch,
.posts-box .list-style.text-tiny.right-eyecatch {
	--text-padding-left: 0rem;
	--text-padding-right: var(--text-padding);
}

@media (max-width: 1440px) {

	.posts-box .card-style_1440px > .a {
		flex-direction: column;
		align-items: flex-start;
		align-content: flex-start;
		/**/
		min-height: inherit;
	}

	.posts-box .list-style_1440px > .a {
		flex-direction: row;
		align-items: center;
		/**/
		min-height: var(--text-height);
	}

	.posts-box .card-style_1440px,
	.posts-box .list-style_1440px {
		--text-padding-top: var(--text-padding);
		--text-padding-bottom: var(--text-padding);
		--text-padding-left: var(--text-padding);
		--text-padding-right: var(--text-padding);
	}

	.posts-box .card-style_1440px.text-tiny_1440px,
	.posts-box .list-style_1440px.text-tiny_1440px {
		--text-padding-top: 0rem;
		--text-padding-bottom: 0rem;
		--text-padding-left: var(--text-padding);
		--text-padding-right: 0rem;
	}

	.posts-box .list-style_1440px.right-eyecatch_1440px,
	.posts-box .list-style_1440px.text-tiny_1440px.right-eyecatch_1440px {
		--text-padding-left: 0rem;
		--text-padding-right: var(--text-padding);
	}

/**/}
@media (max-width: 1280px) {

	.posts-box .card-style_1280px > .a {
		flex-direction: column;
		align-items: flex-start;
		align-content: flex-start;
		/**/
		min-height: inherit;
	}

	.posts-box .list-style_1280px > .a {
		flex-direction: row;
		align-items: center;
		/**/
		min-height: var(--text-height);
	}

	.posts-box .card-style_1280px,
	.posts-box .list-style_1280px {
		--text-padding-top: var(--text-padding);
		--text-padding-bottom: var(--text-padding);
		--text-padding-left: var(--text-padding);
		--text-padding-right: var(--text-padding);
	}

	.posts-box .card-style_1280px.text-tiny_1280px,
	.posts-box .list-style_1280px.text-tiny_1280px {
		--text-padding-top: 0rem;
		--text-padding-bottom: 0rem;
		--text-padding-left: var(--text-padding);
		--text-padding-right: 0rem;
	}

	.posts-box .list-style_1280px.right-eyecatch_1280px,
	.posts-box .list-style_1280px.text-tiny_1280px.right-eyecatch_1280px {
		--text-padding-left: 0rem;
		--text-padding-right: var(--text-padding);
	}

/**/}
@media (max-width: 1024px) {

	.posts-box .card-style_1024px > .a {
		flex-direction: column;
		align-items: flex-start;
		align-content: flex-start;
		/**/
		min-height: inherit;
	}

	.posts-box .list-style_1024px > .a {
		flex-direction: row;
		align-items: center;
		/**/
		min-height: var(--text-height);
	}

	.posts-box .card-style_1024px,
	.posts-box .list-style_1024px {
		--text-padding-top: var(--text-padding);
		--text-padding-bottom: var(--text-padding);
		--text-padding-left: var(--text-padding);
		--text-padding-right: var(--text-padding);
	}

	.posts-box .card-style_1024px.text-tiny_1024px,
	.posts-box .list-style_1024px.text-tiny_1024px {
		--text-padding-top: 0rem;
		--text-padding-bottom: 0rem;
		--text-padding-left: var(--text-padding);
		--text-padding-right: 0rem;
	}

	.posts-box .list-style_1024px.right-eyecatch_1024px,
	.posts-box .list-style_1024px.text-tiny_1024px.right-eyecatch_1024px {
		--text-padding-left: 0rem;
		--text-padding-right: var(--text-padding);
	}

/**/}
@media (max-width: 1023px) {

	.posts-box .card-style_1023px > .a {
		flex-direction: column;
		align-items: flex-start;
		align-content: flex-start;
		/**/
		min-height: inherit;
	}

	.posts-box .list-style_1023px > .a {
		flex-direction: row;
		align-items: center;
		/**/
		min-height: var(--text-height);
	}

	.posts-box .card-style_1023px,
	.posts-box .list-style_1023px {
		--text-padding-top: var(--text-padding);
		--text-padding-bottom: var(--text-padding);
		--text-padding-left: var(--text-padding);
		--text-padding-right: var(--text-padding);
	}

	.posts-box .card-style_1023px.text-tiny_1023px,
	.posts-box .list-style_1023px.text-tiny_1023px {
		--text-padding-top: 0rem;
		--text-padding-bottom: 0rem;
		--text-padding-left: var(--text-padding);
		--text-padding-right: 0rem;
	}

	.posts-box .list-style_1023px.right-eyecatch_1023px,
	.posts-box .list-style_1023px.text-tiny_1023px.right-eyecatch_1023px {
		--text-padding-left: 0rem;
		--text-padding-right: var(--text-padding);
	}

/**/}
@media (max-width: 720px) {

	.posts-box .card-style_720px > .a {
		flex-direction: column;
		align-items: flex-start;
		align-content: flex-start;
		/**/
		min-height: inherit;
	}

	.posts-box .list-style_720px > .a {
		flex-direction: row;
		align-items: center;
		/**/
		min-height: var(--text-height);
	}

	.posts-box .post .post-category {
		display: none;
	}

	.posts-box .card-style_720px,
	.posts-box .list-style_720px {
		--text-padding-top: var(--text-padding);
		--text-padding-bottom: var(--text-padding);
		--text-padding-left: var(--text-padding);
		--text-padding-right: var(--text-padding);
	}

	.posts-box .card-style_720px.text-tiny_720px,
	.posts-box .list-style_720px.text-tiny_720px {
		--text-padding-top: 0rem;
		--text-padding-bottom: 0rem;
		--text-padding-left: var(--text-padding);
		--text-padding-right: 0rem;
	}

	.posts-box .list-style_720px.right-eyecatch_720px,
	.posts-box .list-style_720px.text-tiny_720px.right-eyecatch_720px {
		--text-padding-left: 0rem;
		--text-padding-right: var(--text-padding);
	}

/**/}


/*------------------------------------------------------------------------------

	ホバー枠

------------------------------------------------------------------------------*/

.posts-box .post > .a::after {
	content: '';
	position: absolute;
	z-index: var(--onhover-box-zindex, 0);
	left: var(--onhover-box-left);
	top: var(--onhover-box-top);
	width: var(--onhover-box-width);
	height: var(--onhover-box-height);
	background: var(--onhover-box-background);
	border: var(--onhover-box-border);
	border-radius: var(--onhover-box-border-radius);
	transition: var(--onhover-box-transition, opacity .2s ease-out);
	opacity: var(--onhover-box-opacity, 0);
}

.posts-box .post > .a > * {
	z-index: 1;
	align-self: flex-start;
}

@media (any-hover: hover) {

	.posts-box .post > .a:hover {
		--onhover-box-opacity: 1;
	}

/**/}
@media (any-hover: none) {

	.posts-box .post > .a:active {
		--onhover-box-opacity: 1;
	}

/**/}


/*------------------------------------------------------------------------------

	リストセパレーター

------------------------------------------------------------------------------*/

.posts-box .post[data-list-separator="true"] {
	position: relative;
}

.posts-box .list-style[data-list-separator="true"]::after,
.posts-box .list-style_1440px[data-list-separator="true"]::after,
.posts-box .list-style_1280px[data-list-separator="true"]::after,
.posts-box .list-style_1024px[data-list-separator="true"]::after,
.posts-box .list-style_1023px[data-list-separator="true"]::after,
.posts-box .list-style_720px[data-list-separator="true"]::after {
	position: absolute;
	z-index: 9;
	left: 0;
	bottom: 0;
	width: 100%;
	height: var(--list-style-border-width);
	background: rgb(var(--list-style-border-color) / var(--list-style-border-color-a));
	transform: translateY(calc(var(--grid-gap) / 2));
}

.posts-box .list-style[data-list-separator="true"]::after {
	content: '';
}

@media (max-width: 1440px) {

	.posts-box .list-style_1440px[data-list-separator="true"]::after {
		content: '';
	}

/**/}
@media (max-width: 1280px) {

	.posts-box .list-style_1280px[data-list-separator="true"]::after {
		content: '';
	}

/**/}
@media (max-width: 1024px) {

	.posts-box .list-style_1024px[data-list-separator="true"]::after {
		content: '';
	}

/**/}
@media (max-width: 1023px) {

	.posts-box .list-style_1023px[data-list-separator="true"]::after {
		content: '';
	}

/**/}
@media (max-width: 720px) {

	.posts-box .list-style_720px[data-list-separator="true"]::after {
		content: '';
	}

/**/}


/*------------------------------------------------------------------------------

	[1] テキスト

------------------------------------------------------------------------------*/


/*	親コンテナ―
------------------------------------------------------------------------------*/

.posts-box .post .post-text {
	align-self: center;
	/**/
	flex: 1;
	/**/
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	/**/
	position: relative;
	width: 100%;
	margin-top: calc(var(--text-item-margin-top) * -1);
	margin-bottom: calc(var(--text-item-margin-top) * -1);
	padding-top: var(--text-padding-top);
	padding-bottom: var(--text-padding-bottom);
	padding-left: var(--text-padding-left);
	padding-right: var(--text-padding-right);
}

.posts-box .post .post-text.title-first {
	margin-top: calc(var(--text-title-margin-top) * -1 * (var(--text-title-font-size-factor) / var(--text-item-size-factor)));
}


/*	共通
------------------------------------------------------------------------------*/

.posts-box .post .post-text > * {
	max-width: calc(100% - var(--text-item-margin-left) - var(--text-item-margin-right));
	margin-top: var(--text-item-margin-top);
	margin-bottom: var(--text-item-margin-bottom);
	margin-left: var(--text-item-margin-left);
	margin-right: var(--text-item-margin-right);
}


/*	記事タイトル
------------------------------------------------------------------------------*/

.posts-box .post .post-title {
	--title-width: calc(100% - var(--text-title-margin-left, 0em) - var(--text-title-margin-right, 0em));
	/**/
	max-width: var(--title-width);
	width: var(--title-width);
	/**/
	margin-top: var(--text-title-margin-top, 0em);
	margin-bottom: var(--text-title-margin-bottom, 0em);
	margin-left: var(--text-title-margin-left, 0em);
	margin-right: var(--text-title-margin-right, 0em);
	/**/
	font-size: var(--text-title-font-size);
	color: rgb(var(--text-color-rgb) / var(--text-color-a));
	fill: rgb(var(--text-color-rgb) / var(--text-color-a));
}

/**/

.posts-box .post .post-title.line-clamp,
.posts-box .post .post-title .line-clamp {
	--line-clamp: var(--text-title-max-lines);
	/**/
	max-height: var(--text-title-clamp-height, inherit);
	height: var(--text-title-clamp-height, auto);
}

/* 高さ固定解除 */
.posts-box .post .post-title.line-clamp.auto-height,
.posts-box .post .post-title .line-clamp.auto-height {
	height: auto;
}

/**/

.posts-box .post .post-title > budoux-ja {
	width: 100%;
}

/**/

.posts-box .post .post-title.has-icon {
	display: flex;
}

.post-title.has-icon > .icon > svg,
.post-title.has-icon > .icon > img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.post-title.has-icon > .icon,
.post-title.has-icon > svg {
	--aspect-ratio: 1 / 1;
	--height: 1em;
	/**/
	position: relative;
	margin-top: calc((var(--line-height-h) * 1em - var(--height)) / 2);
	margin-right: .25em;
	/**/
	aspect-ratio: var(--aspect-ratio);
	height: var(--height);
	fill: rgb(var(--color-text-link-rgb));
}

/* タイトル付きPV */

.posts-box .post .post-title .post-pv {
	vertical-align: .2em;
	display: inline-block;
	align-items: center;
	margin: 0 .5em;
	padding: 0 .25em;
	background: #F00;
	border-radius: 3px;
	line-height: 1.5;
	font-size: 62.5%;
	color: #FFF;
}

.posts-box .post .post-title .post-pv::after {
	content: 'pv';
	margin-left: .25em;
	font-size: 75%;
}


/*	カテゴリー・タグ
------------------------------------------------------------------------------*/

.posts-box .post .post-category,
.posts-box .post .post-tag {
	--term-margin: .125rem;
	/**/
	display: flex;
	flex-wrap: wrap;
	/**/
	position: relative;
	list-style: none;
	max-width: 100%;
	width: 100%;
	margin: 0;
	margin-top: calc(var(--text-item-margin-top) - var(--term-margin));
	margin-bottom: calc(var(--text-item-margin-bottom) - var(--term-margin));
	padding: 0;
}

.posts-box .post .post-category li,
.posts-box .post .post-tag li {
	margin: var(--term-margin);
	margin-left: 0;
	margin-right: calc(var(--term-margin) * 2);
}

.posts-box .post .post-category li,
.posts-box .post .post-tag li,
.posts-box .post .post-category li > a,
.posts-box .post .post-tag li > a {
	--padding: .5em;
	--padding-y: calc((var(--text-line-height) - 1) / 2 * 1em);
	/**/
	max-width: calc(100% - var(--margin-left) - var(--margin-right));
	padding: var(--padding-y) var(--padding);
	border: 1px solid rgb(var(--color-text-p-rgb) / .2);
	border-radius: .25em;
	font-feature-settings: "palt";
	/**/
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}


/*	投稿者
------------------------------------------------------------------------------*/

.posts-box .post .post-author {
	display: flex;
	align-items: center;
}

.posts-box .post .post-author .icon {
	flex: none;
	position: relative;
	overflow: hidden;
	width: calc(var(--text-line-height) * 1em);
	height: calc(var(--text-line-height) * 1em);
	border-radius: 50%;
	margin-right: .3em;
}

.posts-box .post .post-author .icon img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.posts-box .post .post-author .name {
	margin-top: 0;
	padding: 0;
	white-space: nowrap;
	font-size: 100%;
}


/*	ページビュー
------------------------------------------------------------------------------*/

.posts-box .post .post-views {
	color: #39F;
}

.posts-box .post .post-views::after {
	content: 'views';
	margin-left: .25em;
	font-size: 87.5%;
}


/*	いいね数
------------------------------------------------------------------------------*/

.posts-box .post .post-liked {
	display: flex;
	align-items: center;
	/**/
	color: rgb(224 0 72);
	fill: rgb(224 0 72);
}

.posts-box .post .post-liked em {
	flex: none;
	margin-right: .3em;
	font-style: normal;
}

.posts-box .post .post-liked em svg {
	display: block;
	width: 1em;
	height: 1em;
}


/*	1行"ライン"スタイル
------------------------------------------------------------------------------*/

.posts-box .post.line-style {
	/* 【★】変更 */
	--text-title-max-lines: 1;
	/* 【★】再計算 */
	/*
	--text-title-clamp-height: calc(var(--text-line-height) * var(--text-title-max-lines) * 1em);
	--text-title-height: calc(var(--text-title-clamp-height) + var(--text-title-margin-height));
	--text-height: calc(
		var(--text-title-height)
		+ var(--text-item-height) * var(--text-item-lines)
		+ var(--text-padding-top)
		+ var(--text-padding-bottom)
	);
	*/
}


/*------------------------------------------------------------------------------

	[2] アイキャッチ画像ブロック

------------------------------------------------------------------------------*/


/*	変数更新
------------------------------------------------------------------------------*/

.posts-box .card-style {
	--eyecatch-width: 100%;/* カード型のアイキャッチ画像幅は、幅一杯 */
}

.posts-box .list-style {
	--eyecatch-width: var(--text-height);/* リスト型のアイキャッチ画像幅は、テキストの高さを幅にする＝正方形 */
}

.posts-box .list-style[data-width-priority="eyecatch"][data-eyecatch-aspect="4:3"] {
	--eyecatch-width: calc(var(--text-height) * 4 / 3);
}

.posts-box .list-style[data-width-priority="eyecatch"][data-eyecatch-aspect="16:9"] {
	--eyecatch-width: calc(var(--text-height) * 16 / 9);
}

.posts-box .list-style[data-width-priority="eyecatch"][data-eyecatch-aspect="1.91:1"] {
	--eyecatch-width: calc(var(--text-height) * 1.91 / 1);;
}

@media (max-width: 1440px) {

	.posts-box .card-style_1440px {
		--eyecatch-width: 100%;
	}

	/**/

	.posts-box .list-style_1440px,
	.posts-box .list-style_1440px[data-width-priority-1440px="eyecatch"][data-eyecatch-aspect-1440px] {
		--eyecatch-width: var(--text-height);
	}

	.posts-box .list-style_1440px[data-width-priority-1440px="eyecatch"][data-eyecatch-aspect-1440px="4:3"] {
		--eyecatch-width: calc(var(--text-height) * 4 / 3);
	}

	.posts-box .list-style_1440px[data-width-priority-1440px="eyecatch"][data-eyecatch-aspect-1440px="16:9"] {
		--eyecatch-width: calc(var(--text-height) * 16 / 9);
	}

	.posts-box .list-style_1440px[data-width-priority-1440px="eyecatch"][data-eyecatch-aspect-1440px="1.91:1"] {
		--eyecatch-width: calc(var(--text-height) * 1.91 / 1);;
	}

	/**/

	.posts-box .list-style[data-width-priority-1440px="text"],
	.posts-box .list-style_1440px[data-width-priority-1440px="text"] {
		--eyecatch-width: var(--text-height) !important;
	}

/**/}
@media (max-width: 1280px) {

	.posts-box .card-style_1280px {
		--eyecatch-width: 100%;
	}

	/**/

	.posts-box .list-style_1280px,
	.posts-box .list-style_1280px[data-width-priority-1280px="eyecatch"][data-eyecatch-aspect-1280px] {
		--eyecatch-width: var(--text-height);
	}

	.posts-box .list-style_1280px[data-width-priority-1280px="eyecatch"][data-eyecatch-aspect-1280px="4:3"] {
		--eyecatch-width: calc(var(--text-height) * 4 / 3);
	}

	.posts-box .list-style_1280px[data-width-priority-1280px="eyecatch"][data-eyecatch-aspect-1280px="16:9"] {
		--eyecatch-width: calc(var(--text-height) * 16 / 9);
	}

	.posts-box .list-style_1280px[data-width-priority-1280px="eyecatch"][data-eyecatch-aspect-1280px="1.91:1"] {
		--eyecatch-width: calc(var(--text-height) * 1.91 / 1);;
	}

	/**/

	.posts-box .list-style[data-width-priority-1280px="text"],
	.posts-box .list-style_1280px[data-width-priority-1280px="text"] {
		--eyecatch-width: var(--text-height) !important;
	}

/**/}
@media (max-width: 1024px) {

	.posts-box .card-style_1024px {
		--eyecatch-width: 100%;
	}

	/**/

	.posts-box .list-style_1024px,
	.posts-box .list-style_1024px[data-width-priority-1024px="eyecatch"][data-eyecatch-aspect-1024px] {
		--eyecatch-width: var(--text-height);
	}

	.posts-box .list-style_1024px[data-width-priority-1024px="eyecatch"][data-eyecatch-aspect-1024px="4:3"] {
		--eyecatch-width: calc(var(--text-height) * 4 / 3);
	}

	.posts-box .list-style_1024px[data-width-priority-1024px="eyecatch"][data-eyecatch-aspect-1024px="16:9"] {
		--eyecatch-width: calc(var(--text-height) * 16 / 9);
	}

	.posts-box .list-style_1024px[data-width-priority-1024px="eyecatch"][data-eyecatch-aspect-1024px="1.91:1"] {
		--eyecatch-width: calc(var(--text-height) * 1.91 / 1);;
	}

	/**/

	.posts-box .list-style[data-width-priority-1024px="text"],
	.posts-box .list-style_1024px[data-width-priority-1024px="text"] {
		--eyecatch-width: var(--text-height) !important;
	}

/**/}
@media (max-width: 1023px) {

	.posts-box .card-style_1023px {
		--eyecatch-width: 100%;
	}

	/**/

	.posts-box .list-style_1023px,
	.posts-box .list-style_1023px[data-width-priority-1023px="eyecatch"][data-eyecatch-aspect-1023px] {
		--eyecatch-width: var(--text-height);
	}

	.posts-box .list-style_1023px[data-width-priority-1023px="eyecatch"][data-eyecatch-aspect-1023px="4:3"] {
		--eyecatch-width: calc(var(--text-height) * 4 / 3);
	}

	.posts-box .list-style_1023px[data-width-priority-1023px="eyecatch"][data-eyecatch-aspect-1023px="16:9"] {
		--eyecatch-width: calc(var(--text-height) * 16 / 9);
	}

	.posts-box .list-style_1023px[data-width-priority-1023px="eyecatch"][data-eyecatch-aspect-1023px="1.91:1"] {
		--eyecatch-width: calc(var(--text-height) * 1.91 / 1);;
	}

	/**/

	.posts-box .list-style[data-width-priority-1023px="text"],
	.posts-box .list-style_1023px[data-width-priority-1023px="text"] {
		--eyecatch-width: var(--text-height) !important;
	}

/**/}
@media (max-width: 720px) {

	.posts-box .card-style_720px {
		--eyecatch-width: 100%;
	}

	/**/

	.posts-box .list-style_720px,
	.posts-box .list-style_720px[data-width-priority-720px="eyecatch"][data-eyecatch-aspect-720px] {
		--eyecatch-width: var(--text-height);
	}

	.posts-box .list-style_720px[data-width-priority-720px="eyecatch"][data-eyecatch-aspect-720px="4:3"] {
		--eyecatch-width: calc(var(--text-height) * 4 / 3);
	}

	.posts-box .list-style_720px[data-width-priority-720px="eyecatch"][data-eyecatch-aspect-720px="16:9"] {
		--eyecatch-width: calc(var(--text-height) * 16 / 9);
	}

	.posts-box .list-style_720px[data-width-priority-720px="eyecatch"][data-eyecatch-aspect-720px="1.91:1"] {
		--eyecatch-width: calc(var(--text-height) * 1.91 / 1);;
	}

	/**/

	.posts-box .list-style[data-width-priority-720px="text"],
	.posts-box .list-style_720px[data-width-priority-720px="text"] {
		--eyecatch-width: var(--text-height) !important;
	}

/**/}


/*	親コンテナ―
------------------------------------------------------------------------------*/

.posts-box .post .post-photo {
	align-self: center;
	/**/
	width: var(--eyecatch-width, 100%);
}

.posts-box .post .post-eyecatch {
	flex: none;
	align-self: flex-start;
	/**/
	overflow: hidden;
	position: relative;
	width: var(--eyecatch-width);
	height: auto;
	margin: 0;
	padding: 0;
	border-radius: var(--eyecatch-border-radius);
}

.posts-box .list-style .post-eyecatch {
	height: var(--text-height);
	padding-top: 0;
}

.posts-box .list-style[data-eyecatch-aspect] .post-eyecatch {
	height: 0;
}

/* アイキャッチ右側配置（タイトル優先） */
.posts-box .list-style.right-eyecatch .post-photo {
	order: 2;
}

/**/

/* アスペクト比指定あり */
/* 【サムネイルの幅を変えない】サムネイルの高さを、テキスト高さだったものを、指定アスペクト比によって変更する＝下に隙間ができる */

.posts-box .post[data-eyecatch-aspect="1:1"] .post-eyecatch {
	padding-top: var(--eyecatch-width);
}

.posts-box .post[data-eyecatch-aspect="4:3"] .post-eyecatch {
	padding-top: calc(3 / 4 * var(--eyecatch-width));
}

.posts-box .post[data-eyecatch-aspect="16:9"] .post-eyecatch {
	padding-top: calc(9 / 16 * var(--eyecatch-width));
}

.posts-box .post[data-eyecatch-aspect="1.91:1"] .post-eyecatch,
.posts-box .card-style:not([data-eyecatch-aspect]) .post-eyecatch {/* カード型のデフォルトアスペクト */
	padding-top: calc(1 / 1.91 * var(--eyecatch-width));
}

/* アスペクト比指定あり＋アイキャッチ幅優先 */
/* 【サムネイルの幅を返る＝テキストの幅が狭くなる】 */

.posts-box .list-style[data-width-priority="eyecatch"][data-eyecatch-aspect] .post-eyecatch {
	width: var(--eyecatch-width);
	height: var(--text-height);
	padding-top: 0;
}

/* アイキャッチ内テキストコンテナ― */

.posts-box .post .post-eyecatch .eyecatch-text {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* BP */

@media (max-width: 1440px) {

	.posts-box .list-style_1440px.right-eyecatch_1440px .post-eyecatch {
		order: 2;
	}

	/**/

	.posts-box .list-style_1440px[data-width-priority-1440px="eyecatch"][data-eyecatch-aspect-1440px] .post-eyecatch,
	.posts-box .list-style_1440px:not([data-eyecatch-aspect-1440px]) .post-eyecatch {
		width: var(--eyecatch-width);
		height: var(--text-height);
		padding-top: 0;
	}

	.posts-box .card-style_1440px[data-eyecatch-aspect-1440px] .post-eyecatch,
	.posts-box .card-style_1440px[data-width-priority="eyecatch"][data-eyecatch-aspect-1440px] .post-eyecatch {
		--eyecatch_width: 100%;
		/**/
		height: 0;
	}

	.posts-box .post[data-eyecatch-aspect-1440px="1:1"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1440px="1:1"] .post-eyecatch {
		padding-top: var(--eyecatch-width);
	}

	.posts-box .post[data-eyecatch-aspect-1440px="4:3"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1440px="4:3"] .post-eyecatch {
		padding-top: calc(3 / 4 * var(--eyecatch-width));
	}

	.posts-box .post[data-eyecatch-aspect-1440px="16:9"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1440px="16:9"] .post-eyecatch {
		padding-top: calc(9 / 16 * var(--eyecatch-width));
	}

	.posts-box .post[data-eyecatch-aspect-1440px="1.91:1"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1440px="1.91:1"] .post-eyecatch {
		padding-top: calc(1 / 1.91 * var(--eyecatch-width));
	}

/**/}
@media (max-width: 1280px) {

	.posts-box .list-style_1280px.right-eyecatch_1280px .post-eyecatch {
		order: 2;
	}

	/**/

	.posts-box .list-style_1280px[data-width-priority-1280px="eyecatch"][data-eyecatch-aspect-1280px] .post-eyecatch,
	.posts-box .list-style_1280px:not([data-eyecatch-aspect-1280px]) .post-eyecatch {
		width: var(--eyecatch-width);
		height: var(--text-height);
		padding-top: 0;
	}

	.posts-box .card-style_1280px[data-eyecatch-aspect-1280px] .post-eyecatch,
	.posts-box .card-style_1280px[data-width-priority="eyecatch"][data-eyecatch-aspect-1280px] .post-eyecatch {
		--eyecatch_width: 100%;
		/**/
		height: 0;
	}

	.posts-box .post[data-eyecatch-aspect-1280px="1:1"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1280px="1:1"] .post-eyecatch {
		padding-top: var(--eyecatch-width);
	}

	.posts-box .post[data-eyecatch-aspect-1280px="4:3"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1280px="4:3"] .post-eyecatch {
		padding-top: calc(3 / 4 * var(--eyecatch-width));
	}

	.posts-box .post[data-eyecatch-aspect-1280px="16:9"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1280px="16:9"] .post-eyecatch {
		padding-top: calc(9 / 16 * var(--eyecatch-width));
	}

	.posts-box .post[data-eyecatch-aspect-1280px="1.91:1"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1280px="1.91:1"] .post-eyecatch {
		padding-top: calc(1 / 1.91 * var(--eyecatch-width));
	}

/**/}
@media (max-width: 1024px) {

	.posts-box .list-style_1024px.right-eyecatch_1024px .post-eyecatch {
		order: 2;
	}

	/**/

	.posts-box .list-style_1024px[data-width-priority-1024px="eyecatch"][data-eyecatch-aspect-1024px] .post-eyecatch,
	.posts-box .list-style_1024px:not([data-eyecatch-aspect-1024px]) .post-eyecatch {
		width: var(--eyecatch-width);
		height: var(--text-height);
		padding-top: 0;
	}

	.posts-box .card-style_1024px[data-eyecatch-aspect-1024px] .post-eyecatch,
	.posts-box .card-style_1024px[data-width-priority="eyecatch"][data-eyecatch-aspect-1024px] .post-eyecatch {
		--eyecatch_width: 100%;
		/**/
		height: 0;
	}

	.posts-box .post[data-eyecatch-aspect-1024px="1:1"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1024px="1:1"] .post-eyecatch {
		padding-top: var(--eyecatch-width);
	}

	.posts-box .post[data-eyecatch-aspect-1024px="4:3"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1024px="4:3"] .post-eyecatch {
		padding-top: calc(3 / 4 * var(--eyecatch-width));
	}

	.posts-box .post[data-eyecatch-aspect-1024px="16:9"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1024px="16:9"] .post-eyecatch {
		padding-top: calc(9 / 16 * var(--eyecatch-width));
	}

	.posts-box .post[data-eyecatch-aspect-1024px="1.91:1"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1024px="1.91:1"] .post-eyecatch {
		padding-top: calc(1 / 1.91 * var(--eyecatch-width));
	}

/**/}
@media (max-width: 1023px) {

	.posts-box .list-style_1023px.right-eyecatch_1023px .post-eyecatch {
		order: 2;
	}

	/**/

	.posts-box .list-style_1023px[data-width-priority-1023px="eyecatch"][data-eyecatch-aspect-1023px] .post-eyecatch,
	.posts-box .list-style_1023px:not([data-eyecatch-aspect-1023px]) .post-eyecatch {
		width: var(--eyecatch-width);
		height: var(--text-height);
		padding-top: 0;
	}

	.posts-box .card-style_1023px[data-eyecatch-aspect-1023px] .post-eyecatch,
	.posts-box .card-style_1023px[data-width-priority="eyecatch"][data-eyecatch-aspect-1023px] .post-eyecatch {
		--eyecatch_width: 100%;
		/**/
		height: 0;
	}

	.posts-box .post[data-eyecatch-aspect-1023px="1:1"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1023px="1:1"] .post-eyecatch {
		padding-top: var(--eyecatch-width);
	}

	.posts-box .post[data-eyecatch-aspect-1023px="4:3"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1023px="4:3"] .post-eyecatch {
		padding-top: calc(3 / 4 * var(--eyecatch-width));
	}

	.posts-box .post[data-eyecatch-aspect-1023px="16:9"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1023px="16:9"] .post-eyecatch {
		padding-top: calc(9 / 16 * var(--eyecatch-width));
	}

	.posts-box .post[data-eyecatch-aspect-1023px="1.91:1"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-1023px="1.91:1"] .post-eyecatch {
		padding-top: calc(1 / 1.91 * var(--eyecatch-width));
	}

/**/}
@media (max-width: 720px) {

	.posts-box .list-style_720px.right-eyecatch_720px .post-eyecatch {
		order: 2;
	}

	/**/

	.posts-box .list-style_720px[data-width-priority-720px="eyecatch"][data-eyecatch-aspect-720px] .post-eyecatch,
	.posts-box .list-style_720px:not([data-eyecatch-aspect-720px]) .post-eyecatch {
		width: var(--eyecatch-width);
		height: var(--text-height);
		padding-top: 0;
	}

	.posts-box .card-style_720px[data-eyecatch-aspect-720px] .post-eyecatch,
	.posts-box .card-style_720px[data-width-priority="eyecatch"][data-eyecatch-aspect-720px] .post-eyecatch {
		--eyecatch_width: 100%;
		/**/
		height: 0;
	}

	.posts-box .post[data-eyecatch-aspect-720px="1:1"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-720px="1:1"] .post-eyecatch {
		padding-top: var(--eyecatch-width);
	}

	.posts-box .post[data-eyecatch-aspect-720px="4:3"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-720px="4:3"] .post-eyecatch {
		padding-top: calc(3 / 4 * var(--eyecatch-width));
	}

	.posts-box .post[data-eyecatch-aspect-720px="16:9"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-720px="16:9"] .post-eyecatch {
		padding-top: calc(9 / 16 * var(--eyecatch-width));
	}

	.posts-box .post[data-eyecatch-aspect-720px="1.91:1"] .post-eyecatch,
	.posts-box .post[data-width-priority="eyecatch"][data-eyecatch-aspect-720px="1.91:1"] .post-eyecatch {
		padding-top: calc(1 / 1.91 * var(--eyecatch-width));
	}

/**/}


/*	画像
------------------------------------------------------------------------------*/

.posts-box .post-eyecatch .img,
.posts-box .list-style .post-eyecatch img,
.posts-box .post[data-eyecatch-aspect] .post-eyecatch img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	object-fit: cover;
}

@media (max-width: 1440px) {

	.posts-box .card-style_1440px .post-eyecatch img {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
	}

	.posts-box .card-style_1440px[data-eyecatch-aspect] .post-eyecatch img,
	.posts-box .list-style_1440px .post-eyecatch img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

/**/}
@media (max-width: 720px) {

	.posts-box .card-style_720px .post-eyecatch img {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
	}

	.posts-box .card-style_720px[data-eyecatch-aspect] .post-eyecatch img,
	.posts-box .list-style_720px .post-eyecatch img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

/**/}


/*	ラベル
------------------------------------------------------------------------------*/

/*
.posts-box .post.proteced .post-eyecatch::before {
	content: '限定';
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	padding: 5em 4em .25em;
	background: #FF0;
	line-height: 1;
	font-weight: bold;
	font-size: 62.5%;
	white-space: nowrap;
	color: #000;
	transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
*/


/*------------------------------------------------------------------------------

	重要なお知らせ

------------------------------------------------------------------------------*/
/*
.posts-box .post.important > a::before {
	content: '';
	position: absolute;
	z-index: 1;
	left: calc(var(--onhover-box-padding, .5rem) * -1);
	top: calc(var(--onhover-box-padding, .5rem) * -1);
	width: var(--onhover-box-width, calc(100% + var(--onhover-box-padding, .5rem) * 2));
	height: var(--onhover-box-height, calc(100% + var(--onhover-box-padding, .5rem) * 2));
	background: rgb(255 255 96 / 1);
	border: 1px solid rgb(255 227 0 / 1);
}
*/

.posts-box .post .important {
	--padding: .5em;
	--padding-y: calc((var(--text-line-height) - 1) / 2 * 1em);
	/**/
	max-width: calc(100% - var(--margin-left) - var(--margin-right));
	padding: var(--padding-y) var(--padding);
	background: #F00;
	border: 1px solid #F00;
	border-radius: .25em;
	font-weight: bold;
	color: #FFF;
}

.posts-box .post .important + ul {
	margin-left: calc(var(--text-item-margin-right) * -1 + .5em);
}