@charset "utf-8";
/* ===========================================================
/media Magazine UI リニューアル用の追加 CSS
既存の default.css / style_pc.css / style_sp.css の後ろで読み込む。

ステップ 1: デザイントークン（CSS 変数）の定義のみ。
既存の要素に当たるルールはこのステップでは書かない。
値の出どころ = Claude Design「WeddingMeWorks-Pixar」Magazine 画面（Nito パレット）
----------------------------------------------------------- */
:root {
	/* 色 */
	--ink: #3f4856;            /* 見出し・本文 */
	--sub: #5f6d7d;            /* サブテキスト */
	--line: rgba(95,115,135,.17);
	--rose: #8fb6e0;           /* 主役ブルー（装飾専用・文字色に使わない） */
	--roseDeep: #5a86c2;       /* 濃ブルー（強調・CTA） */
	--roseDeepHover: #4b76b0;
	--roseSoft: #ebf2fb;       /* 淡ブルー背景 */
	--sky: #e0b3a0;            /* 暖アクセント（装飾専用・文字色に使わない） */
	--skyDeep: #c2876f;
	--skySoft: #f6ece6;
	--cream: #f6f9fc;          /* ページ地色 */
	--petal: #d8e6f5;
	--link: #4d78b4;
	--linkHover: #2f5c94;
	--linkVisited: #7b6ba6;

	/* フォント */
	--font-mincho: 'Shippori Mincho', serif;                 /* 見出し（和）600 / 700 / 800 */
	--font-gothic: 'Zen Kaku Gothic New', sans-serif;        /* 本文（和）400 / 500 / 700 */
	--font-latin: 'Cormorant Garamond', serif;               /* 英字ラベル italic 500 / 600 */

	/* 角丸・影 */
	--radius-sm: 14px;
	--radius-card: 18px;
	--radius-lg: 22px;
	--radius-pill: 999px;
	--shadow-card: 0 18px 40px -30px rgba(150,110,120,.5);
	--shadow-cta: 0 16px 30px -12px rgba(90,134,194,.6);
}


/* ===========================================================
ステップ 2: 記事本文のスタイル（single.php の .article_area 配下だけ）
既存の style_pc.css / style_sp.css は書き換えず、.blog_area を前に付けた詳細度で上書きする。
PC / SP の切替は既存レイアウトと同じ 769px。
アイキャッチ（.main_img）・記事ヘッダー・著者ボックス・記事末 CTA・おすすめ・サイドバーには当てない。
見本 = Claude Design「WMW Magazine 記事詳細（media-single）」。見本から寄せた点は docs/renewal-plan.md 5.0
----------------------------------------------------------- */
.blog_area .article_area {
	font-family: var(--font-gothic);
	color: var(--ink);
}

/* 段落
======================================== */
.blog_area .article_area p {
	font-size: 16.5px;
	line-height: 1.95;
	margin: 0 0 30px;
}

/* 見出し
======================================== */
.blog_area .article_area h2 {
	font-family: var(--font-mincho);
	font-weight: 800;
	font-size: 27px;
	line-height: 1.55;
	letter-spacing: .01em;
	color: var(--ink);
	border: 0;
	padding: 0;
	margin: 72px 0 24px;
}

.blog_area .article_area h3 {
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 20.5px;
	line-height: 1.7;
	color: var(--ink);
	border: 0;
	padding: 0;
	margin: 46px 0 14px;
}

.blog_area .article_area h4 {
	font-family: var(--font-gothic);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.75;
	color: var(--ink);
	background: none;
	padding: 0;
	margin: 34px 0 12px;
}

/* 目次のリンクで飛んだとき、見出しが固定ヘッダー（PC 120px / SP 60px）の裏に隠れないようにする。
   飛び先は Table of Contents Plus が見出しの中に入れる span[id]。テーマの common.js がこの span の上端までスクロールするので、
   span の上側に余白を取る（旧 CSS は PC の h2 だけ 140px を指定していた）
======================================== */
.blog_area .article_area h2 span[id],
.blog_area .article_area h3 span[id] {
	padding-top: 140px;
	margin-top: -140px;
	pointer-events: none;
}

/* 見出しの中にリンクがある場合は押せるままにする */
.blog_area .article_area h2 span[id] a,
.blog_area .article_area h3 span[id] a {
	pointer-events: auto;
}

/* 強調・注釈
======================================== */
.blog_area .article_area b,
.blog_area .article_area strong {
	font-weight: 700;
	color: var(--ink);
}

.blog_area .article_area small {
	font-size: .84em;
	color: var(--sub);
}

/* リンク（外部リンクは ↗）
======================================== */
.blog_area .article_area a {
	display: inline;
	color: var(--link);
	text-decoration: none;
	border-bottom: 1px solid rgba(77,120,180,.38);
	transition: color .15s, border-color .15s;
}

.blog_area .article_area a:visited {
	color: var(--linkVisited);
	border-bottom-color: rgba(123,107,166,.38);
}

.blog_area .article_area a:hover {
	color: var(--linkHover);
	border-bottom-color: var(--linkHover);
}

.blog_area .article_area a[target="_blank"]::before {
	content: "↗";
	display: inline;
	width: auto;
	margin: 0 .28em 0 0;
	font-size: .82em;
	vertical-align: baseline;
	color: var(--sub);
}

/* 旧テーマの hover 下線アニメーションは border-bottom に置き換える */
.blog_area .article_area p a::after {
	content: none;
}

/* リスト
======================================== */
.blog_area .article_area ul,
.blog_area .article_area ol {
	margin: 10px 0 32px;
	padding-left: 1.5em;
	font-size: 16.5px;
	line-height: 1.95;
}

.blog_area .article_area ul {
	list-style: disc outside;
}

.blog_area .article_area ol {
	list-style: decimal outside;
	padding-left: 1.6em;
}

.blog_area .article_area ul li,
.blog_area .article_area ol li {
	padding: 0;
	margin: 0 0 10px;
	line-height: 1.95;
}

.blog_area .article_area ol li {
	padding-left: .2em;
}

.blog_area .article_area ul li::before,
.blog_area .article_area ol li::before {
	content: none;
}

/* 引用
======================================== */
.blog_area .article_area blockquote {
	margin: 38px 0;
	padding: 2px 0 2px 22px;
	border-left: 3px solid var(--line);
	font-size: 16px;
	line-height: 2;
	color: var(--sub);
}

.blog_area .article_area blockquote p {
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 .8em;
}

.blog_area .article_area blockquote p:last-child {
	margin-bottom: 0;
}

/* 画像（幅は旧テーマと同じ 100%。角丸と余白だけ新しくする）
   r2 の指定（幅・高さともに auto）では、loading="lazy" の画像は読み込み前の枠が 0×0 になり、
   読み込まれた瞬間に下の本文が動く（目次リンクの飛び先もずれる）。幅 100% なら width / height 属性から高さが先に確保される。
   そのため、本文幅より小さい元画像は引き伸ばされる（旧テーマと同じ・PM 了承済み）。
   アイキャッチ・.img_float（下で指定）と、非公開記事だけで使う .planner_voice / .person の画像は対象外
======================================== */
.blog_area .article_area img:not(.main_img img):not(.planner_voice img):not(.person img):not(.img_float img) {
	display: block;
	width: 100%;
	height: auto;
	margin: 36px auto;
	border-radius: var(--radius-sm);
}

.blog_area .article_area figure {
	margin: 42px 0;
}

.blog_area .article_area figure img:not(.main_img img):not(.planner_voice img):not(.person img):not(.img_float img) {
	margin: 0 auto;
}

.blog_area .article_area figcaption {
	font-size: 12px;
	line-height: 1.8;
	color: var(--sub);
	margin-top: 10px;
}

/* 表（表そのものに角丸。SP は横スクロール）
======================================== */
.blog_area .article_area table {
	width: 100%;
	margin: 38px 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	overflow: hidden;
	font-size: 14.5px;
	line-height: 1.8;
}

.blog_area .article_area table th,
.blog_area .article_area table td {
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: 14px 18px;
	font-size: inherit;
	line-height: inherit;
	text-align: left;
	vertical-align: top;
	color: var(--ink);
}

.blog_area .article_area table th {
	background: var(--skySoft);
	font-weight: 700;
	white-space: nowrap;
}

.blog_area .article_area table tr:last-child td {
	border-bottom: 0;
}

/* 枠線ボックス・背景ボックス（中は <b> と <br> の生テキスト）
======================================== */
.blog_area .article_area .line_box,
.blog_area .article_area .bg_box {
	margin: 36px 0;
	padding: 26px 30px;
	border-radius: var(--radius-sm);
	font-size: 15px;
	line-height: 2.05;
	color: var(--ink);
}

.blog_area .article_area .line_box {
	border: 1px solid var(--line);
	background: #fff;
}

.blog_area .article_area .bg_box {
	background: var(--roseSoft);
	font-size: 15.5px;
}

.blog_area .article_area .line_box p,
.blog_area .article_area .bg_box p,
.blog_area .article_area .line_box ul,
.blog_area .article_area .bg_box ul,
.blog_area .article_area .line_box ol,
.blog_area .article_area .bg_box ol,
.blog_area .article_area .line_box li,
.blog_area .article_area .bg_box li {
	font-size: inherit;
	line-height: inherit;
}

.blog_area .article_area .line_box > :last-child,
.blog_area .article_area .bg_box > :last-child {
	margin-bottom: 0;
}

/* 画像 + テキストの横並び
======================================== */
.blog_area .article_area .img_float {
	display: flex;
	gap: 26px;
	align-items: flex-start;
	margin: 38px 0;
	padding: 24px 26px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
}

.blog_area .article_area .img_float .img {
	flex: 0 0 40%;
	width: auto;
	border-radius: 12px;
	overflow: hidden;
}

.blog_area .article_area .img_float .img img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.blog_area .article_area .img_float .text {
	flex: 1 1 60%;
	width: auto;
	font-size: 15px;
	line-height: 2;
}

.blog_area .article_area .img_float .text p {
	font-size: inherit;
	line-height: inherit;
}

.blog_area .article_area .img_float .text > :last-child {
	margin-bottom: 0;
}

/* 枠線ボックス・背景ボックスの中に置かれたときは、枠を二重にしない */
.blog_area .article_area .line_box .img_float,
.blog_area .article_area .bg_box .img_float {
	margin: 18px 0 24px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* 目次（Table of Contents Plus の出力）
======================================== */
.blog_area .article_area #toc_container {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 40px;
	padding: 20px 26px 22px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff !important;
	font-size: 13.5px;
}

/* 目次は「初期は閉じる・＋ボタンで開く」で使う（プラグインの Initially hide 設定）。
   開閉 JS が display:table / width:auto をインラインで設定するので、開閉どちらの状態でも全幅のバーに固定する */
.blog_area .article_area #toc_container {
	display: block !important;
	width: 100% !important;
}

.blog_area .article_area #toc_container.contracted {
	padding-bottom: 20px;
}

/* 目次を閉じるのは読み込み後の JS。それまでの間に開いた目次が見えて本文が動くのを防ぐため、
   JS が開閉ボタン（.toc_toggle）を足すまでの間だけ、リスト部分を畳んでおく（最長 2.5 秒。JS が動かない環境では 2.5 秒後に開いた目次が出る）。
   ボタンが足された時点でセレクターが外れるので、その後の開閉・画面幅の変更・開いた状態での再読み込みには影響しない。
   高さを固定するのはリストだけなので、タイトルが 2 行になっても欠けない。:has() 未対応のブラウザーではこの対策だけ無効になる */
@keyframes wmw-toc-hold {
	from { padding-bottom: 20px; }
	to { padding-bottom: 20px; }
}

@keyframes wmw-toc-hold-sp {
	from { padding-bottom: 16px; }
	to { padding-bottom: 16px; }
}

@keyframes wmw-toc-list-hold {
	from { height: 0; margin-top: 0; }
	to { height: 0; margin-top: 0; }
}

.blog_area .article_area #toc_container:not(:has(.toc_toggle)) {
	animation: wmw-toc-hold 2.5s linear 1;
}

.blog_area .article_area #toc_container:not(:has(.toc_toggle)) > ul.toc_list {
	overflow: hidden;
	animation: wmw-toc-list-hold 2.5s linear 1;
}

.blog_area .article_area #toc_container .toc_title {
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
	color: var(--ink);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.blog_area .article_area #toc_container .toc_toggle {
	font-family: var(--font-gothic);
	font-weight: 400;
	font-size: 12px;
	margin-left: 0;
	color: var(--roseDeep);
}

.blog_area .article_area #toc_container .toc_toggle a,
.blog_area .article_area #toc_container .toc_toggle a:visited {
	display: inline;
	padding: 0;
	font-size: inherit;
	color: var(--roseDeep);
}

.blog_area .article_area #toc_container ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: 1.7;
}

.blog_area .article_area #toc_container .toc_title + ul.toc_list {
	margin-top: 14px;
}

.blog_area .article_area #toc_container ul ul {
	margin: 8px 0 2px;
	padding-left: 22px;
}

.blog_area .article_area #toc_container li {
	margin: 0;
	padding: 0;
	line-height: 1.7;
}

.blog_area .article_area #toc_container li + li {
	margin-top: 9px;
}

.blog_area .article_area #toc_container ul ul li + li {
	margin-top: 7px;
}

.blog_area .article_area #toc_container a,
.blog_area .article_area #toc_container a:visited {
	display: flex;
	gap: 10px;
	position: static;
	padding: 0;
	border-bottom: 0;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ink);
	text-decoration: none;
}

.blog_area .article_area #toc_container ul ul a,
.blog_area .article_area #toc_container ul ul a:visited {
	gap: 9px;
	font-size: 12.5px;
	color: var(--sub);
}

.blog_area .article_area #toc_container a:hover,
.blog_area .article_area #toc_container ul ul a:hover {
	color: var(--roseDeep);
	text-decoration: none;
}

.blog_area .article_area #toc_container a .toc_number {
	flex: none;
	position: static;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 12px;
	color: var(--sub);
}

.blog_area .article_area #toc_container ul ul a .toc_number {
	font-size: 11.5px;
	color: inherit;
}

/* 開閉ボタンがアイコン型（+ / − や ▾）のとき。文字型 [非表示] は上の .toc_toggle a の指定のまま */
.blog_area .article_area #toc_container .toc_toggle_icon a,
.blog_area .article_area #toc_container .toc_toggle_icon a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.blog_area .article_area #toc_container .toc_toggle_plus_minus a {
	border: 1px solid currentColor;
}

.blog_area .article_area #toc_container .toc_toggle_indicator {
	position: static;
	color: inherit;
}

/* シェアボタン（AddToAny の出力。絵柄と 24px のサイズはプラグインのまま）
======================================== */
.blog_area .addtoany_share_save_container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	clear: both;
	margin: 44px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.blog_area .addtoany_share_save_container::before {
	content: "この記事をシェア";
	font-family: var(--font-gothic);
	font-size: 12px;
	line-height: 1.6;
	color: var(--sub);
}

.blog_area .addtoany_share_save_container .addtoany_list {
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}

.blog_area .addtoany_share_save_container .addtoany_list a,
.blog_area .addtoany_share_save_container .addtoany_list a:hover {
	display: inline-block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	line-height: 1;
}

.blog_area .addtoany_share_save_container .addtoany_list a::before {
	content: none;
}

/* SP
======================================== */
@media screen and (max-width: 768px) {
	.blog_area .article_area p {
		font-size: 13.5px;
		line-height: 2.05;
		margin: 0 0 18px;
	}

	.blog_area .article_area h2 {
		font-size: 19px;
		line-height: 1.6;
		letter-spacing: 0;
		margin: 34px 0 12px;
	}

	.blog_area .article_area h3 {
		font-size: 16px;
		margin: 26px 0 10px;
	}

	.blog_area .article_area h4 {
		font-size: 14px;
		margin: 22px 0 8px;
	}

	.blog_area .article_area ul,
	.blog_area .article_area ol {
		margin: 6px 0 20px;
		padding-left: 1.5em;
		font-size: 13.5px;
		line-height: 2.05;
	}

	.blog_area .article_area ul li,
	.blog_area .article_area ol li {
		margin: 0 0 6px;
		padding-left: 0;
		line-height: 2.05;
	}

	.blog_area .article_area blockquote {
		margin: 22px 0;
		padding-left: 16px;
		font-size: 13px;
		line-height: 2.05;
	}

	.blog_area .article_area img:not(.main_img img):not(.planner_voice img):not(.person img):not(.img_float img) {
		margin: 22px auto;
		border-radius: 12px;
	}

	.blog_area .article_area figure {
		margin: 24px 0;
	}

	.blog_area .article_area figure img:not(.main_img img):not(.planner_voice img):not(.person img):not(.img_float img) {
		margin: 0 auto;
	}

	.blog_area .article_area figcaption {
		font-size: 11px;
		margin-top: 8px;
	}

	.blog_area .article_area table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 24px 0;
		border-radius: 12px;
		font-size: 12.5px;
		line-height: 1.75;
	}

	.blog_area .article_area table th,
	.blog_area .article_area table td {
		padding: 11px 13px;
		width: 1%;
	}

	.blog_area .article_area table td {
		min-width: 7.5em;
	}

	.blog_area .article_area .line_box,
	.blog_area .article_area .bg_box {
		margin: 24px 0;
		padding: 18px;
		border-radius: 12px;
		font-size: 12.5px;
	}

	.blog_area .article_area .bg_box {
		font-size: 13px;
	}

	.blog_area .article_area .img_float {
		flex-direction: column;
		gap: 14px;
		margin: 24px 0;
		padding: 16px;
		border-radius: 14px;
	}

	.blog_area .article_area .img_float .img {
		flex: none;
		width: 62%;
		max-width: 220px;
		border-radius: 11px;
	}

	.blog_area .article_area .img_float .text {
		flex: none;
		font-size: 13px;
	}

	.blog_area .article_area #toc_container {
		margin: 0 0 24px;
		padding: 16px 18px 18px;
		border-radius: 14px;
	}

	.blog_area .article_area #toc_container.contracted {
		padding-bottom: 16px;
	}

	.blog_area .article_area #toc_container:not(:has(.toc_toggle)) {
		animation-name: wmw-toc-hold-sp;
	}

	.blog_area .article_area h2 span[id],
	.blog_area .article_area h3 span[id] {
		padding-top: 80px;
		margin-top: -80px;
	}

	.blog_area .article_area #toc_container .toc_title {
		font-size: 14.5px;
	}

	.blog_area .article_area #toc_container .toc_title + ul.toc_list {
		margin-top: 12px;
	}

	.blog_area .article_area #toc_container ul ul {
		margin: 7px 0 2px;
		padding-left: 18px;
	}

	.blog_area .article_area #toc_container li + li {
		margin-top: 8px;
	}

	.blog_area .article_area #toc_container ul ul li + li {
		margin-top: 6px;
	}

	.blog_area .article_area #toc_container a,
	.blog_area .article_area #toc_container a:visited {
		gap: 9px;
		font-size: 13px;
	}

	.blog_area .article_area #toc_container ul ul a,
	.blog_area .article_area #toc_container ul ul a:visited {
		gap: 8px;
		font-size: 12px;
	}

	.blog_area .article_area #toc_container a .toc_number {
		font-size: 11.5px;
	}

	.blog_area .article_area #toc_container ul ul a .toc_number {
		font-size: 11px;
	}

	.blog_area .addtoany_share_save_container {
		gap: 11px;
		margin: 30px 0 0;
		padding-top: 18px;
	}

	.blog_area .addtoany_share_save_container::before {
		font-size: 11.5px;
	}
}


/* ===========================================================
ステップ 3: 記事詳細の枠（single.php）
記事ヘッダー（カテゴリ pill・公開日 / 更新日・著者名）/ アイキャッチ 16:9 / 著者ボックス（Simple Author Box の出力）/
記事末のデュアル CTA / 関連記事（同じカテゴリの新しい 3 本）。本文（.article_area 配下）はステップ 2 のまま。
既存の style_pc.css / style_sp.css は書き換えず、.blog_page / .blog_area を前に付けた詳細度で上書きする。
PC / SP の切替は既存レイアウトと同じ 769px。見本 = Claude Design「WMW Magazine 記事詳細（media-single）」
----------------------------------------------------------- */

/* 記事ヘッダー
======================================== */
.blog_area .article_header .wmw_meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.blog_area .article_header .wmw_cat_pill,
.blog_area .article_header .wmw_cat_pill:visited {
	flex: none;
	display: inline-block;
	padding: 6px 15px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--roseDeep);
	font-family: var(--font-gothic);
	font-size: 12px;
	line-height: 1.5;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s;
}

.blog_area .article_header .wmw_cat_pill:hover {
	background: var(--roseDeepHover);
	color: #fff;
}

.blog_area .article_header .wmw_date {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 12px;
	line-height: 1.5;
	color: var(--sub);
}

.blog_area .article_header .single-title {
	font-family: var(--font-mincho);
	font-weight: 800;
	font-size: 32px;
	line-height: 1.6;
	color: var(--ink);
	margin: 18px 0 20px;
}

.blog_area .article_header .wmw_author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-gothic);
	font-size: 13px;
	line-height: 1.7;
	color: var(--ink);
}

/* アイキャッチ（16:9 の枠で先に高さを確保してから画像を収める）
   アイキャッチが無い記事では single.php 側で枠ごと出さない
======================================== */
.blog_area .article_area .main_img {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin: 26px 0 30px;
	border-radius: var(--radius-card);
	background: var(--petal);
}

.blog_area .article_area .main_img img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* 著者ボックス（Simple Author Box の出力）
   レイアウト（左にアイコン・右に著者名 / プロフィール文 / アイコン付き SNS リンク）は現行のまま。
   枠線・見出し・文字の色とフォントだけ新しいトーンに合わせる（docs/renewal-plan.md 5.0 の 5）
======================================== */
.blog_area .author_area {
	margin: 40px 0 0;
}

.blog_area .author_area .title {
	background: none;
	padding: 0;
	margin: 0 0 14px;
	font-family: var(--font-mincho);
	font-weight: 800;
	font-size: 19px;
	line-height: 1.6;
	color: var(--ink);
}

.blog_area .author_area .saboxplugin-wrap {
	padding: 26px 28px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
	font-family: var(--font-gothic);
}

.blog_area .author_area .saboxplugin-tab .saboxplugin-authorname,
.blog_area .author_area .saboxplugin-tab .saboxplugin-authorname a,
.blog_area .author_area .saboxplugin-tab .saboxplugin-authorname a:visited {
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 0;
}

.blog_area .author_area .saboxplugin-tab .saboxplugin-authorname:before {
	background: var(--rose);
}

/* Simple Author Box はプロフィール文の font-size / line-height を自前の CSS に !important で書き出す。
   PM に見せた before / after と同じ見た目にするため、この 2 つだけ同じ強さで上書きする（範囲は著者ボックスの中だけ） */
.blog_area .author_area .saboxplugin-tab .saboxplugin-desc,
.blog_area .author_area .saboxplugin-tab .saboxplugin-desc p {
	font-size: 13.5px !important;
	line-height: 1.95 !important;
	color: var(--sub);
}

.blog_area .author_area .saboxplugin-tab .saboxplugin-desc ul a,
.blog_area .author_area .saboxplugin-tab .saboxplugin-desc ul a:visited {
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--sub);
	text-decoration: none;
	border-bottom: 0;
}

.blog_area .author_area .saboxplugin-tab .saboxplugin-authorname a:hover,
.blog_area .author_area .saboxplugin-tab .saboxplugin-desc ul a:hover {
	color: var(--roseDeep);
}

/* 記事末のデュアル CTA（プランナー / 企業担当者）
======================================== */
.blog_area .wmw_dual_cta {
	margin: 34px 0 0;
	padding: 36px 36px 32px;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(100% 80% at 20% 0%, var(--roseSoft) 0%, rgba(251,238,241,0) 55%),
		linear-gradient(180deg, #fbfdff, var(--skySoft));
	font-family: var(--font-gothic);
}

.blog_area .wmw_dual_cta_head {
	text-align: center;
}

.blog_area .wmw_dual_cta_label {
	font-family: var(--font-latin);
	font-style: italic;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .16em;
	line-height: 1.5;
	color: var(--roseDeep);
}

.blog_area .wmw_dual_cta_head p {
	max-width: 560px;
	margin: 12px auto 26px;
	font-size: 13.5px;
	line-height: 1.95;
	color: var(--sub);
}

.blog_area .wmw_dual_cta_cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.blog_area .wmw_dual_cta_card {
	display: flex;
	flex-direction: column;
	padding: 24px 24px 22px;
	border-radius: var(--radius-card);
	background: #fff;
}

.blog_area .wmw_dual_cta_card_planner {
	border: 1px solid var(--rose);
}

.blog_area .wmw_dual_cta_card_company {
	border: 1px solid var(--sky);
}

.blog_area .wmw_dual_cta_heading {
	font-family: var(--font-mincho);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.6;
}

.blog_area .wmw_dual_cta_card_planner .wmw_dual_cta_heading {
	color: var(--roseDeep);
}

.blog_area .wmw_dual_cta_card_company .wmw_dual_cta_heading {
	color: var(--skyDeep);
}

.blog_area .wmw_dual_cta_card p {
	flex: 1;
	margin: 9px 0 20px;
	font-size: 12.5px;
	line-height: 1.95;
	color: var(--sub);
}

.blog_area .wmw_dual_cta_btn,
.blog_area .wmw_dual_cta_btn:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	border: 0;
	border-radius: var(--radius-pill);
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: background .15s;
}

.blog_area .wmw_dual_cta_btn:before,
.blog_area .wmw_dual_cta_btn:after {
	content: none;
}

.blog_area .wmw_dual_cta_card_planner .wmw_dual_cta_btn {
	background: var(--roseDeep);
	box-shadow: 0 14px 28px -12px rgba(90,134,194,.55);
}

.blog_area .wmw_dual_cta_card_planner .wmw_dual_cta_btn:hover {
	background: var(--roseDeepHover);
	color: #fff;
}

.blog_area .wmw_dual_cta_card_company .wmw_dual_cta_btn {
	background: var(--skyDeep);
	box-shadow: 0 14px 28px -12px rgba(194,135,111,.5);
}

.blog_area .wmw_dual_cta_card_company .wmw_dual_cta_btn:hover {
	background: #b0765e;
	color: #fff;
}

.blog_area .wmw_dual_cta_note {
	margin-top: 10px;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--sub);
	text-align: center;
}

/* 関連記事（同じカテゴリの新しい 3 本）
   PC は見出しの右に「すべて見る」、SP は一覧の下にボタンとして置く。
   見る順とキーボードの移動順をそろえるため、HTML には PC 用・SP 用の 2 本を置いて、使わないほうを display:none にする
======================================== */
.blog_area .wmw_related {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"head more"
		"list list";
	align-items: end;
	margin: 56px 0 80px;
	font-family: var(--font-gothic);
}

.blog_area .wmw_related_head {
	grid-area: head;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.blog_area .wmw_related_label {
	font-family: var(--font-latin);
	font-style: italic;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .18em;
	line-height: 1.5;
	color: var(--skyDeep);
}

.blog_area .wmw_related_title {
	font-family: var(--font-mincho);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.5;
	color: var(--ink);
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	background: none;
}

.blog_area .wmw_related_more,
.blog_area .wmw_related_more:visited {
	grid-area: more;
	display: block;
	padding: 0 0 14px 20px;
	border: 0;
	border-bottom: 1px solid var(--line);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--roseDeep);
	text-decoration: none;
	white-space: nowrap;
}

.blog_area .wmw_related_more:hover {
	color: var(--roseDeepHover);
}

.blog_area .wmw_related_more_sp {
	display: none;
}

.blog_area .wmw_related_more:before,
.blog_area .wmw_related_more:after {
	content: none;
}

.blog_area .wmw_related_list {
	grid-area: list;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.blog_area .wmw_related_list li {
	margin: 0;
	padding: 0;
}

.blog_area .wmw_related_list li:before {
	content: none;
}

.blog_area .wmw_related_list > li > a,
.blog_area .wmw_related_list > li > a:visited {
	display: block;
	border: 0;
	color: inherit;
	text-decoration: none;
	transition: transform .18s;
}

.blog_area .wmw_related_list > li > a:hover {
	transform: translateY(-3px);
	color: inherit;
}

.blog_area .wmw_related_thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--petal);
}

.blog_area .wmw_related_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.blog_area .wmw_related_date {
	margin-top: 10px;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 11px;
	line-height: 1.5;
	color: var(--sub);
}

.blog_area .wmw_related_ttl {
	margin-top: 5px;
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink);
}

/* SP
======================================== */
@media screen and (max-width: 768px) {
	.blog_area .article_header .wmw_meta {
		gap: 10px;
	}

	.blog_area .article_header .wmw_cat_pill,
	.blog_area .article_header .wmw_cat_pill:visited {
		padding: 5px 13px;
	}

	.blog_area .article_header .wmw_date {
		font-size: 11px;
	}

	.blog_area .article_header .single-title {
		font-size: 22px;
		line-height: 1.65;
		margin: 14px 0 16px;
	}

	.blog_area .article_header .wmw_author {
		gap: 11px;
		padding-bottom: 16px;
		font-size: 12.5px;
	}

	.blog_area .article_area .main_img {
		margin: 20px 0 22px;
		border-radius: 16px;
	}

	.blog_area .author_area {
		margin: 26px 0 0;
	}

	.blog_area .author_area .title {
		margin: 0 0 11px;
		font-size: 16px;
	}

	.blog_area .author_area .saboxplugin-wrap {
		padding: 18px 20px;
		border-radius: 18px;
	}

	.blog_area .author_area .saboxplugin-tab .saboxplugin-authorname,
	.blog_area .author_area .saboxplugin-tab .saboxplugin-authorname a,
	.blog_area .author_area .saboxplugin-tab .saboxplugin-authorname a:visited {
		font-size: 14.5px;
	}

	.blog_area .author_area .saboxplugin-tab .saboxplugin-desc,
	.blog_area .author_area .saboxplugin-tab .saboxplugin-desc p {
		font-size: 12.5px;
	}

	.blog_area .wmw_dual_cta {
		margin: 26px 0 0;
		padding: 26px 20px 24px;
		border-radius: 20px;
	}

	.blog_area .wmw_dual_cta_label {
		font-size: 13px;
	}

	.blog_area .wmw_dual_cta_head p {
		margin: 10px 0 18px;
		font-size: 12.5px;
	}

	.blog_area .wmw_dual_cta_cards {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.blog_area .wmw_dual_cta_card {
		padding: 18px 18px 17px;
		border-radius: 16px;
	}

	.blog_area .wmw_dual_cta_heading {
		font-size: 15px;
	}

	.blog_area .wmw_dual_cta_card p {
		margin: 7px 0 15px;
	}

	.blog_area .wmw_dual_cta_btn,
	.blog_area .wmw_dual_cta_btn:visited {
		font-size: 14.5px;
	}

	.blog_area .wmw_dual_cta_note {
		margin-top: 9px;
		font-size: 11px;
	}

	.blog_area .wmw_related {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"list"
			"more";
		margin: 34px 0 30px;
	}

	.blog_area .wmw_related_head {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.blog_area .wmw_related_label {
		font-size: 13px;
	}

	.blog_area .wmw_related_title {
		font-size: 19px;
		margin: 4px 0 0;
	}

	.blog_area .wmw_related_list {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		margin: 16px 0 0;
	}

	.blog_area .wmw_related_list > li > a,
	.blog_area .wmw_related_list > li > a:visited {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		padding-bottom: 16px;
		border-bottom: 1px solid var(--line);
	}

	.blog_area .wmw_related_list > li > a:hover {
		transform: none;
	}

	.blog_area .wmw_related_thumb {
		flex: none;
		width: 104px;
		aspect-ratio: 4 / 3;
		border-radius: 11px;
	}

	.blog_area .wmw_related_text {
		flex: 1 1 auto;
		min-width: 0;
	}

	.blog_area .wmw_related_date {
		margin-top: 0;
		font-size: 10.5px;
	}

	.blog_area .wmw_related_ttl {
		font-size: 13.5px;
	}

	.blog_area .wmw_related_more_pc {
		display: none;
	}

	.blog_area .wmw_related_more_sp,
	.blog_area .wmw_related_more_sp:visited {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 18px;
		padding: 13px;
		border: 1px solid var(--rose);
		border-radius: var(--radius-pill);
		text-align: center;
		white-space: normal;
	}
}