/* ============================
	single post
============================ */
.single-content {
	padding: 100px 0;

	@media screen and (max-width: 767px) {
		padding: 60px 0;
	}
}

/* article（ワンカラム。サイドバーは使わない） */
#entry-article {
	box-sizing: border-box;
	margin: 0 auto;
	width: min(100%, 840px);
}

/* 日付・タイトル・カテゴリ */
.post-meta {
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 24px;

	@media screen and (max-width: 767px) {
		padding-bottom: 18px;
	}

	.post-date {
		color: var(--main-text-color);
		font-size: 1.5rem;
		font-weight: 500;
	}

	.post-ttl {
		color: var(--main-text-color);
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: 3.2rem;
		font-weight: 700;
		line-height: 1.5;
		margin: 12px 0 0;

		@media screen and (max-width: 767px) {
			font-size: 2.2rem;
		}
	}

	.post-cats {
		margin: 20px 0 0;

		@media screen and (max-width: 767px) {
			margin-top: 14px;
		}
	}

	/* style.css の黒い .post-cat をサイトの緑に上書きする */
	.post-cat {
		background-color: var(--main-color);
		border-radius: 20px;
		font-size: 1.4rem;
		min-width: 120px;
		padding: 5px 16px;
		text-decoration: none;
		width: auto;
	}
}

/* アイキャッチ（article-info.php では出力していない） */
.entry-thumb {
	margin-top: 40px;

	img {
		border-radius: 6px;
		display: block;
		height: auto;
		width: 100%;
	}
}

/* ============================
	nav below（前後の記事）
============================ */
#nav-below {
	border-top: 1px solid var(--border-color);
	margin-top: 70px;
	padding-top: 30px;

	@media screen and (max-width: 767px) {
		margin-top: 50px;
	}

	.nav-box {
		box-sizing: border-box;
		width: 50%;

		@media screen and (max-width: 767px) {
			width: 100%;
		}
	}

	.prev-news {
		padding-right: 16px;

		@media screen and (max-width: 767px) {
			padding: 0;
		}
	}

	.next-news {
		border-left: 1px solid var(--border-color);
		padding-left: 16px;
		text-align: right;

		@media screen and (max-width: 767px) {
			border-left: none;
			margin-top: 16px;
			padding: 0;
			text-align: left;
		}
	}

	a {
		color: var(--main-text-color);
		font-size: 1.5rem;
		line-height: 1.6;
	}

	p {
		color: #8a9a92;
		font-size: 1.4rem;
		margin: 0;
	}
}

/* ============================
	entry-content（WordPress エディタで作る本文）
============================ */
.entry-content {
	color: var(--black);
	font-size: 1.6rem;
	line-height: 1.9;
	margin-top: 40px;

	@media screen and (max-width: 767px) {
		font-size: 1.5rem;
		margin-top: 30px;
	}

	/* 本文の余白は margin-top で積むので、先頭要素だけ打ち消す */
	> *:first-child {
		margin-top: 0;
	}

	p {
		margin: 1.7em 0 0;
	}

	a {
		color: var(--main-color);
		text-decoration: underline;

		&:hover {
			color: var(--accent-color);
		}
	}

	/* 見出し。エディタでは h2 から使う */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: var(--main-text-color);
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-weight: 700;
		line-height: 1.5;
	}

	h1 {
		font-size: 2.8rem;
		margin: 2.4em 0 0;

		@media screen and (max-width: 767px) {
			font-size: 2.2rem;
		}
	}

	h2 {
		border-bottom: 2px solid var(--main-color);
		font-size: 2.4rem;
		margin: 2.4em 0 0;
		padding-bottom: .5em;
		position: relative;

		@media screen and (max-width: 767px) {
			font-size: 2rem;
		}

		/* 緑の下線の左端にアクセント色を少しだけ重ねる */
		&::after {
			background-color: var(--accent-color);
			bottom: -2px;
			content: "";
			height: 2px;
			left: 0;
			position: absolute;
			width: 60px;

			@media screen and (max-width: 767px) {
				width: 44px;
			}
		}
	}

	h3 {
		background-color: #eaf8f2;
		border-radius: 6px;
		box-sizing: border-box;
		font-size: 2rem;
		margin: 2em 0 0;
		padding: .5em .8em;

		@media screen and (max-width: 767px) {
			font-size: 1.8rem;
		}
	}

	h4 {
		border-left: 4px solid var(--main-color);
		font-size: 1.8rem;
		margin: 2em 0 0;
		padding: .1em 0 .1em .7em;

		@media screen and (max-width: 767px) {
			font-size: 1.6rem;
		}
	}

	h5,
	h6 {
		font-size: 1.6rem;
		margin: 1.8em 0 0;
	}

	h4.noborder {
		border: none;
		padding-left: 0;

		&::after {
			content: none;
		}
	}

	/* リスト */
	ul,
	ol {
		margin: 1.7em 0 0;
		padding-left: 0;
		text-align: left;

		li {
			line-height: 1.8;
			list-style: none;
			padding-left: 1.4em;
			position: relative;
		}

		li + li {
			margin-top: .6em;
		}

		ul,
		ol {
			margin-top: .6em;
		}
	}

	ul > li::before {
		background-color: var(--main-color);
		border-radius: 50%;
		content: "";
		height: 8px;
		left: .2em;
		position: absolute;
		top: .75em;
		width: 8px;
	}

	ol {
		counter-reset: entry-ol;

		> li {
			counter-increment: entry-ol;

			&::before {
				color: var(--accent-color);
				content: counter(entry-ol) ".";
				font-weight: 700;
				left: 0;
				position: absolute;
				top: 0;
			}
		}
	}

	/* 表 */
	table {
		border-collapse: collapse;
		margin: 1.7em 0 0;
		width: 100%;

		th,
		td {
			border: 1px solid var(--border-color);
			font-size: 1.5rem;
			line-height: 1.7;
			padding: 12px 16px;
			text-align: left;
			vertical-align: top;

			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
				padding: 10px 12px;
			}
		}

		th {
			background-color: #eaf8f2;
			color: var(--main-text-color);
			font-weight: 700;
			white-space: nowrap;
		}
	}

	/* 画像 */
	img {
		border-radius: 6px;
		height: auto !important;
		max-width: 100%;
	}

	figure {
		margin: 1.7em 0 0;
	}

	figcaption {
		color: #6b7a70;
		font-size: 1.3rem;
		margin-top: 8px;
		text-align: center;
	}

	hr {
		border: none;
		border-top: 1px dashed var(--border-color);
		height: 0;
		margin: 3em 0 0;
		padding: 0;
	}

	/* 引用 */
	blockquote {
		background-color: #f4faf7;
		border-left: 4px solid var(--main-color);
		border-radius: 0 6px 6px 0;
		color: #4d5f57;
		font-size: 1.5rem;
		line-height: 1.8;
		margin: 2em 0 0;
		padding: 1.2em 1.6em;
		position: relative;

		p {
			margin: 0;

			& + p {
				margin-top: 1em;
			}
		}

		cite {
			display: block;
			font-size: 1.3rem;
			font-style: normal;
			margin-top: 1em;
		}

		small,
		small a {
			color: #8a9a92;
			font-size: 1.2rem;
			font-weight: normal;
		}
	}

	/* 文字装飾（エディタのスタイルセレクタで付けるクラス） */
	span.red {
		color: #df0101;
	}

	span.bold {
		font-weight: 700;
	}

	span.underline {
		font-weight: 700;
		text-decoration: underline;
	}

	span.marker {
		background: linear-gradient(transparent 60%, color-mix(in srgb, var(--accent-color) 45%, transparent) 60%);
		font-weight: 700;
		padding: 3px 0 4px;
	}

	/* 補足ボックス */
	.infobox {
		background-color: #f4faf7;
		border-radius: 6px;
		line-height: 1.8;
		margin: 2em 0 0;
		padding: 1.6em 2em;

		@media screen and (max-width: 767px) {
			padding: 1.2em 1.4em;
		}

		h4 {
			border: none;
			font-size: 1.7rem;
			margin: 0;
			padding: 0;

			&::after {
				content: none;
			}
		}

		p {
			font-size: 1.5rem;
			margin: 1em 0 0;
		}
	}

	/* 画像＋キャプション */
	.wp-caption {
		background-color: #f4faf7;
		border-radius: 6px;
		box-sizing: border-box;
		margin: 1.7em 0 0;
		max-width: 100% !important;
		padding: 10px;
		text-align: center;

		img {
			margin: 0;
			max-width: 100%;
		}

		p.wp-caption-text {
			color: #6b7a70;
			font-size: 1.3rem;
			margin: 10px 0 0;
		}
	}

	.wp-block-file a {
		vertical-align: middle;
	}

	.imagebox {
		br {
			display: none;
		}

		small,
		small a {
			color: #8a9a92;
			font-size: 1.2rem;
			font-weight: normal;
		}
	}

	/* 埋め込み（Instagram / X / YouTube） */
	.ytsl-wrapper {
		margin: 2.5em 0 0;

		img {
			display: none !important;
		}
	}

	.instagram-media {
		margin: 2.5em 0 0 !important;
	}

	iframe.wp-embedded-content {
		width: 100% !important;
	}

	blockquote.wp-embedded-content,
	blockquote.instagram-media,
	blockquote.twitter-tweet {
		background-color: transparent;
		border: 1px solid #e4ece8;
		border-radius: 6px;
		box-sizing: border-box;
		padding: 0;

		&::before,
		&::after {
			display: none !important;
		}
	}
}

.instagram-media {
	max-width: 520px !important;
}

.twitter-tweet {
	width: 520px !important;
}