/* ==========================================================================
   Meiblog Child — 投稿詳細（single.php）
   デザイン: Claude Design「HPデザイン提案書」/ MEI Post.dc.html
   パンくず・サイドバー・ボタン・波線は css/style.css の共通部品。
   ========================================================================== */

.meiblog-single {
	display: flex;
	justify-content: center;
	gap: 60px;
	padding: 50px var(--meiblog-section-px) 120px;
	background: var(--meiblog-white);
}

.meiblog-single__main {
	width: 640px;
}

/* --------------------------------------------------------------------------
   記事ヘッダー
   -------------------------------------------------------------------------- */
.meiblog-shell .meiblog-post__tag,
.meiblog-shell .meiblog-post__tag:hover {
	display: inline-block;
	padding: 5px 12px;
	background: var(--meiblog-pink);
	color: var(--meiblog-white);
	font-size: 10px;
	letter-spacing: 1px;
}

.meiblog-post__title {
	margin: 22px 0 0;
	font-family: var(--meiblog-font-jp-serif);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.8;
	letter-spacing: 2px;
	color: var(--meiblog-text);
}

.meiblog-post__meta {
	display: flex;
	gap: 20px;
	margin-top: 16px;
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--meiblog-text-muted);
}

.meiblog-post__figure {
	width: 640px;
	height: 360px;
	margin-top: 36px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   記事本文（ブロックエディターの出力を整える）
   -------------------------------------------------------------------------- */
.meiblog-post__content > p {
	margin-top: 30px;
	font-size: 14.5px;
	line-height: 2.5;
	letter-spacing: 1px;
}

/* 本文の書き出しは見出しより広めに空ける */
.meiblog-post__content > *:first-child {
	margin-top: 50px;
}

.meiblog-post__content h2 {
	margin: 70px 0 0;
	padding: 14px 22px;
	background: var(--meiblog-blue-pale);
	font-family: var(--meiblog-font-jp-serif);
	font-weight: 500;
	font-size: 19px;
	letter-spacing: 2px;
	color: var(--meiblog-text);
}

.meiblog-post__content h3 {
	display: inline-block;
	margin: 50px 0 0;
	padding: 0 0 10px;
	border-bottom: 2px solid var(--meiblog-pink);
	font-family: var(--meiblog-font-jp-serif);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 2px;
	color: var(--meiblog-text);
}

/* 見出し直後の段落は余白を詰める */
.meiblog-post__content h2 + p {
	margin-top: 30px;
}

.meiblog-post__content h3 + p {
	margin-top: 26px;
}

/* POINT ボックス（エディターでは引用ブロックを使う） */
.meiblog-post__content blockquote {
	margin: 40px 0 0;
	padding: 26px 30px;
	background: var(--meiblog-bg-soft);
	border-left: 3px solid var(--meiblog-pink);
	font-size: 13.5px;
	line-height: 2.3;
	letter-spacing: 1px;
}

.meiblog-post__content blockquote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.meiblog-post__content img {
	margin-top: 40px;
}

/* --------------------------------------------------------------------------
   シェア
   -------------------------------------------------------------------------- */
.meiblog-share {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 70px;
}

/* --------------------------------------------------------------------------
   著者
   -------------------------------------------------------------------------- */
.meiblog-author {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 70px;
	padding: 32px 36px;
	background: var(--meiblog-bg-soft);
}

.meiblog-author__avatar {
	width: 90px;
	height: 90px;
	flex-shrink: 0;
	border-radius: 50%;
}

.meiblog-author__name {
	font-family: var(--meiblog-font-en);
	font-size: 20px;
	letter-spacing: 3px;
	color: var(--meiblog-blue);
}

.meiblog-author__text {
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 2;
	letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   前後の記事
   -------------------------------------------------------------------------- */
.meiblog-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	margin-top: 60px;
	font-size: 12.5px;
	letter-spacing: 1px;
}

.meiblog-shell .meiblog-post-nav__link {
	color: var(--meiblog-text);
}

.meiblog-shell .meiblog-post-nav__link:hover {
	color: var(--meiblog-blue);
}

/* --------------------------------------------------------------------------
   関連記事
   -------------------------------------------------------------------------- */
.meiblog-related {
	margin-top: 90px;
}

.meiblog-related__title {
	font-family: var(--meiblog-font-en);
	font-size: 24px;
	letter-spacing: 3px;
	color: var(--meiblog-blue);
	text-align: center;
}

.meiblog-related__list {
	display: flex;
	gap: 40px;
	margin-top: 44px;
}

.meiblog-shell .meiblog-related__item {
	display: block;
	width: 186px;
	color: var(--meiblog-text);
}

.meiblog-related__figure {
	display: block;
	width: 186px;
	height: 105px;
	overflow: hidden;
}

.meiblog-related__name {
	display: block;
	margin-top: 12px;
	font-size: 12.5px;
	line-height: 1.9;
	letter-spacing: 1px;
}

.meiblog-related__date {
	display: block;
	margin-top: 6px;
	font-size: 10.5px;
	letter-spacing: 1px;
	color: var(--meiblog-text-muted);
}

/* ==========================================================================
   モバイル（〜900px） — MEI Mobile.dc.html / POST
   ========================================================================== */
/* 広告表記（inc/affiliate.php が本文先頭へ自動挿入する） */
.meiblog-post__content .meiblog-ad-disclosure {
	margin: 0 0 28px;
	padding: 10px 16px;
	border-left: 3px solid var(--meiblog-pink);
	background: var(--meiblog-bg-soft);
	color: var(--meiblog-text-sub);
	font-family: var(--meiblog-font-jp-sans);
	font-size: 12px;
	line-height: 1.7;
}

@media (max-width: 900px) {

	/* 2 カラムをやめ、サイドバーは本文の下へ回す */
	.meiblog-single {
		display: block;
		padding: 28px var(--meiblog-section-px) 60px;
	}

	.meiblog-single__main {
		width: auto;
	}

	.meiblog-single .meiblog-sidebar {
		margin-top: 60px;
	}

	/* 記事ヘッダー */
	.meiblog-shell .meiblog-post__tag,
	.meiblog-shell .meiblog-post__tag:hover {
		padding: 4px 10px;
		font-size: 9px;
	}

	.meiblog-post__title {
		margin-top: 16px;
		font-size: 20px;
		line-height: 1.9;
		letter-spacing: 1px;
	}

	.meiblog-post__meta {
		gap: 14px;
		margin-top: 10px;
		font-size: 10px;
	}

	.meiblog-post__figure {
		width: 100%;
		height: auto;
		aspect-ratio: 342 / 192;
		margin-top: 24px;
	}

	/* 本文 */
	.meiblog-post__content > p {
		margin-top: 22px;
		font-size: 13px;
		line-height: 2.4;
		letter-spacing: 0.5px;
	}

	.meiblog-post__content > *:first-child {
		margin-top: 32px;
	}

	.meiblog-post__content h2 {
		margin-top: 44px;
		padding: 11px 16px;
		font-size: 15px;
		letter-spacing: 1px;
	}

	.meiblog-post__content h3 {
		margin-top: 34px;
		font-size: 14px;
		letter-spacing: 1px;
	}

	.meiblog-post__content h2 + p,
	.meiblog-post__content h3 + p {
		margin-top: 22px;
	}

	.meiblog-post__content blockquote {
		margin-top: 28px;
		padding: 18px 20px;
		font-size: 11.5px;
		line-height: 2.1;
	}

	/* シェア */
	.meiblog-share {
		gap: 14px;
		margin-top: 44px;
	}

	/* 著者 */
	.meiblog-author {
		gap: 16px;
		margin-top: 44px;
		padding: 22px;
	}

	.meiblog-author__avatar {
		width: 64px;
		height: 64px;
	}

	.meiblog-author__name {
		font-size: 16px;
		letter-spacing: 2px;
	}

	.meiblog-author__text {
		margin-top: 6px;
		font-size: 11px;
		line-height: 1.9;
	}

	/* 前後の記事 */
	.meiblog-post-nav {
		gap: 20px;
		margin-top: 44px;
		font-size: 11.5px;
	}

	/* 関連記事 — 2 列グリッド */
	.meiblog-related {
		margin-top: 60px;
	}

	.meiblog-related__title {
		font-size: 20px;
	}

	.meiblog-related__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		margin-top: 32px;
	}

	.meiblog-shell .meiblog-related__item {
		width: 100%;
	}

	.meiblog-related__figure {
		width: 100%;
		height: auto;
		aspect-ratio: 163 / 92;
	}

	.meiblog-related__name {
		margin-top: 10px;
		font-size: 12px;
	}
}