:root {
	--color-primary: #001f42;
	--color-secondary: #002fb9;
}

.related_post, .wb_qanda, .ad_internal {
	margin-bottom: 16px;
	position: relative;
	a {
		display: block;
		width: 100%;
		height: 100%;
		text-decoration: none;
		padding: 10px;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		transition: box-shadow .25s ease, transform .25s ease;
		&:hover {
			text-decoration: none;
		}
		.cat-hitem {
			display: flex;
			flex-direction: row;
			flex: 0 0 160px;
			gap: 16px;
		}
		img {
			display: block;
			width: 160px;
			aspect-ratio: 16/9;
			line-height: 0;
			border-radius: 10px;
			@media(max-width: 900px) {
				width: 140px;
				flex-basis: 140px;
			}
		}
		p {
			margin: 0;
			&.cat-hitem__head {
				color: #666;
				font-size: 14px;
			}
			&.cat-hitem__date {
				color: #666;
			}
			&.cat-hitem__desc {
				color: #333;
			}
		}
		
	}
}
.series_link {
	a {
		color: var(--color-text-main);
		text-decoration: none;
		display: block;
		padding: 20px 20px 20px 40px;
		border: solid 1px var(--color-primary);
		position: relative;
		transition: 0.3s;
		&:hover {
			background: #f9fafb;
		}
		&::before {
			content: "";
			display: block;
			width: 10px;
			aspect-ratio: 1;
			background-color: var(--color-secondary);
			clip-path: polygon(0 0, 0 100%, 80% 50%);
			position: absolute;
			left: 20px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	
}
.ad_internal {
	a {
		.cat-hitem {
			display: flex;
			flex-direction: row-reverse;
			flex: 0 0 230px;
			gap: 16px;
		}
	}
}

/* 表示期間日時設定 */
.time_switch {
  display: none; /* 表示条件を満たした時用のクラス（元のディスプレイ特性を維持しやすい） */
}
.time_switch.is_active {
  display: block; /* 必要に応じて flex や inline-block に変更可能 */
}
.post_edit {
	display: none; /* 投稿画面にのみ表示させる */
}



/* 編集画面の表示を追加
---------------------------------------------------------------------------------------------------- */
.wp-block-acf-page-menu,
.wp-block-acf-switcher,
.wp-block-acf-switcher-end {
	background: #fbfbff;
	border: solid 1px #ccc;
	height: auto;
	min-height: 52px;
	&::after {
		display: inline-block;
		color: #555;
		font-size: .75em;
		padding: 0.5em 0.75em;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.acf-block-component {
		padding: 16px;
		&::before {
			color: #555;
		}
	}
}
.wp-block-acf-page-menu {
	&::after {
		content: "目次リンク";
	}
	.acf-block-component::before {
		content: "ここにページ内リンクが生成されます。";
	}
}

.wp-block-acf-related-post,
.wp-block-acf-wb-qanda {
	&:not(:has(.acf-block-preview *)){
		height: auto;
		min-height: 52px;
		background: #fbfbff;
		padding: 16px;
		border: solid 1px #ccc;
		&::before {
			content: "ここをクリックして挿入する記事を選んでください。";
			display: block;
			position: relative;
			left: 0;
			top: 0;
		}
	}
}
.wp-block-acf-related-post {
	&::after {
		content: "関連記事";
		color: #555;
		font-size: .75em;
		padding: 0.5em 0.75em;
		position: absolute;
		right: 0;
		bottom: 0;
	}
}
.wp-block-acf-wb-qanda {
	&::after {
		content: "内部通報一問一答";
		color: #555;
		font-size: .75em;
		padding: 0.5em 0.75em;
		position: absolute;
		right: 0;
		bottom: 0;
	}
}
.wp-block-acf-series-link {
	&::after {
		content: "シリーズリンク";
		color: #555;
		font-size: .75em;
		padding: 0.5em 0.75em;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	&:not(:has(.series_link *)){
		height: auto;
		min-height: 52px;
		background: #fbfbff;
		padding: 16px;
		border: solid 1px #ccc;
		&::before {
			content: "連載・特集のタグがある場合、シリーズのリンクが生成されます。";
			color: #555;
			display: block;
			position: relative;
			left: 0;
			top: 0;
		}
	}
}
.wp-block-acf-switcher {
	&::after {
		content: "期間設定 ▼";
	}
	.acf-block-component::before {
		content: "▼ 表示期間指定 ここから";
	}
}
.wp-block-acf-switcher-end {
	&::after {
		content: "期間指定 ▲";
	}
	.acf-block-component::before {
		content: "▲ 表示期間指定 ここまで";
	}
}
.wp-block-acf-ad-block-internal {
	&::after {
		content: "広告（サイト内）";
	}
}


/* 編集画面にのみ表示
---------------------------------------------------------------------------------------------------- */
.editor-styles-wrapper {
	&.block-editor-writing-flow {
/* 
		.related_post {
			&::after {
				content: "関連記事";
				color: #555;
				font-size: .75em;
				padding: 0.5em 1em;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
		.wb_qanda {
			&::after {
				content: "内部通報一問一答";
				color: #555;
				font-size: .75em;
				padding: 0.5em 1em;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
*/
		.timer_end_code::after {
			display: block;
			content: "この部分に目次リンクが自動で生成されます。";
			position: relative;
			right: 0;
			bottom: 0;
		}
		.post_edit {
			display: block; /* 投稿画面にのみ表示させる */
		}
	}
}