/* ==========================================================================
   Meiblog Child — 共通スタイル
   親テーマ SWELL の main.css より後に読み込まれる（inc/setup.php で依存指定）。
   クラス名は meiblog- プレフィックスを付けて親テーマとの衝突を避ける。
   デザイン: Claude Design「HPデザイン提案書」/ MEI vlog
   ========================================================================== */

/* --------------------------------------------------------------------------
   デザイントークン
   -------------------------------------------------------------------------- */
:root {
	/* Color — Blue 系 */
	--meiblog-blue: #8AAFD2;
	--meiblog-blue-btn: #9FC5E8;
	--meiblog-blue-light: #BFD8EE;
	--meiblog-blue-pale: #DCEBF7;

	/* Color — Pink 系 */
	--meiblog-pink: #F3BFCF;
	--meiblog-pink-script: #D9A9BC;
	--meiblog-pink-script-deep: #E4B7C8;

	/* Color — Neutral */
	--meiblog-white: #FFFFFF;
	--meiblog-bg-soft: #FAF7F8;
	--meiblog-text: #5D6670;
	--meiblog-text-sub: #8A939C;
	--meiblog-text-muted: #A7AEB6;
	--meiblog-border: #D8DEE5;
	--meiblog-border-light: #F4F4F4;
	--meiblog-border-drawer: #EFE9EC;   /* ドロワーの項目区切り。border-light(#F4F4F4) とは別値 */
	--meiblog-slot-bg: #EEF3F8;

	/* Typography */
	--meiblog-font-en: 'Cormorant Garamond', serif;
	--meiblog-font-script: 'Great Vibes', cursive;
	--meiblog-font-jp-serif: 'Noto Serif JP', serif;
	--meiblog-font-jp-sans: 'Noto Sans JP', sans-serif;

	/* Layout */
	--meiblog-page-min-width: 1080px;
	--meiblog-section-py: 120px;
	--meiblog-section-px: 100px;

	/* 投稿カードの寸法。カードを並べる側（.meiblog-posts / .meiblog-archive__grid）で上書きする */
	--meiblog-card-width: 250px;
	--meiblog-card-height: 141px;
}

/* --------------------------------------------------------------------------
   ベース
   -------------------------------------------------------------------------- */
.meiblog-body {
	margin: 0;
	background: var(--meiblog-white);
	color: var(--meiblog-text);
	font-family: var(--meiblog-font-jp-sans);
	-webkit-font-smoothing: antialiased;
}

.meiblog-shell {
	min-width: var(--meiblog-page-min-width);
}

/*
 * 要素セレクタのリセットは :where() で詳細度を 0 にしておく。
 * こうしないと `.meiblog-shell p`(0,1,1) が `.meiblog-hero__lead`(0,1,0) のような
 * コンポーネント側の指定に勝ってしまい、余白が効かなくなる。
 */
:where(.meiblog-shell) a {
	color: var(--meiblog-blue);
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

:where(.meiblog-shell) a:hover {
	color: var(--meiblog-text);
}

:where(.meiblog-shell) img {
	display: block;
	max-width: 100%;
}

:where(.meiblog-shell) p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   画像スロット（inc/image-slot.php の出力）
   -------------------------------------------------------------------------- */
.meiblog-slot {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 実画像が未設定のときのプレースホルダ。何の画像が入るかを画面上で示す。 */
.meiblog-slot--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 10px;
	background: var(--meiblog-slot-bg);
	color: var(--meiblog-blue);
	font-family: var(--meiblog-font-jp-sans);
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 1.8;
	text-align: center;
}

/* --------------------------------------------------------------------------
   共通コンポーネント — 見出し
   -------------------------------------------------------------------------- */
.meiblog-heading-en {
	margin: 0;
	font-family: var(--meiblog-font-en);
	font-weight: 500;
	font-size: 34px;
	letter-spacing: 4px;
	color: var(--meiblog-blue);
	line-height: 1.2;
}

.meiblog-heading-en--md {
	font-size: 36px;
}

.meiblog-heading-en--sm {
	font-size: 30px;
	letter-spacing: 3px;
}

.meiblog-heading-en--xs {
	font-size: 28px;
	letter-spacing: 3px;
}

/* 和文見出し（「私について」「最後に」など） */
.meiblog-heading-jp {
	margin: 0;
	font-family: var(--meiblog-font-jp-serif);
	font-weight: 500;
	font-size: 26px;
	letter-spacing: 5px;
	color: var(--meiblog-blue);
	line-height: 1.4;
}

/* 見出し下の手描き風ライン */
.meiblog-wave {
	display: block;
	margin: 8px auto 0;
}

/* 左寄せの見出しに添えるとき */
.meiblog-wave--left {
	margin-left: 0;
	margin-right: auto;
}

/* サイドバーのウィジェット見出し用（幅 50px・上余白 6px） */
.meiblog-wave--sm {
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   共通コンポーネント — ページタイトル帯（下層ページ共通）
   -------------------------------------------------------------------------- */
.meiblog-page-title {
	padding: 70px var(--meiblog-section-px);
	background: var(--meiblog-blue-pale);
	text-align: center;
}

.meiblog-page-title__en {
	margin: 0;
	font-family: var(--meiblog-font-en);
	font-weight: 500;
	font-size: 44px;
	letter-spacing: 6px;
	color: var(--meiblog-blue);
	line-height: 1.2;
}

.meiblog-page-title__script {
	margin-top: 8px;
	font-family: var(--meiblog-font-script);
	font-size: 22px;
	color: var(--meiblog-pink-script);
}

.meiblog-page-title__lead {
	margin-top: 28px;
	font-size: 13px;
	line-height: 2.2;
	letter-spacing: 1px;
}

/* 「カテゴリー：ミニマリズム」のような和文サブタイトル */
.meiblog-page-title__sub {
	margin-top: 12px;
	font-family: var(--meiblog-font-jp-serif);
	font-size: 15px;
	letter-spacing: 4px;
	color: var(--meiblog-text);
}

/* --------------------------------------------------------------------------
   共通コンポーネント — パンくず
   -------------------------------------------------------------------------- */
.meiblog-breadcrumb {
	padding: 24px var(--meiblog-section-px) 0;
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--meiblog-text-muted);
}

.meiblog-shell .meiblog-breadcrumb__link {
	color: var(--meiblog-text-muted);
}

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

.meiblog-breadcrumb__current {
	color: var(--meiblog-blue);
}

/* --------------------------------------------------------------------------
   共通コンポーネント — 投稿カード（一覧系ページで共有）
   寸法は --meiblog-card-width / --meiblog-card-height を親側で指定して切り替える。
   -------------------------------------------------------------------------- */
.meiblog-card {
	width: var(--meiblog-card-width);
}

.meiblog-shell .meiblog-card__link {
	display: block;
	color: var(--meiblog-text);
}

.meiblog-card__figure {
	position: relative;
	display: block;
	width: var(--meiblog-card-width);
	height: var(--meiblog-card-height);
	overflow: hidden;
}

.meiblog-card__tag {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 4px 10px;
	background: var(--meiblog-pink);
	color: var(--meiblog-white);
	font-size: 10px;
	letter-spacing: 1px;
	pointer-events: none;
}

.meiblog-card__title {
	display: block;
	margin-top: 16px;
	font-size: 13.5px;
	line-height: 1.9;
	letter-spacing: 1px;
	color: var(--meiblog-text);
}

.meiblog-card__body {
	display: block;
}

.meiblog-card__date {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--meiblog-text-muted);
}

/* 横並びレイアウト（アーカイブ一覧）— 画像の右に見出し・抜粋・日付を置く */
.meiblog-shell .meiblog-card--row,
.meiblog-shell .meiblog-card--row .meiblog-card__link {
	width: auto;
}

.meiblog-shell .meiblog-card--row .meiblog-card__link {
	display: flex;
	align-items: center;
	gap: 36px;
}

.meiblog-card--row .meiblog-card__figure {
	flex-shrink: 0;
}

.meiblog-card--row .meiblog-card__title {
	margin-top: 0;
	font-family: var(--meiblog-font-jp-serif);
	font-size: 16px;
	line-height: 1.9;
}

.meiblog-card--row .meiblog-card__excerpt {
	display: block;
	margin-top: 12px;
	font-size: 12.5px;
	line-height: 2;
	letter-spacing: 1px;
	color: var(--meiblog-text-sub);
}

.meiblog-card--row .meiblog-card__date {
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
   共通コンポーネント — ページャー（paginate_links() の出力に合わせる）
   -------------------------------------------------------------------------- */
.meiblog-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-top: 70px;
}

.meiblog-shell .meiblog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	border: 1px solid var(--meiblog-border);
	color: var(--meiblog-text);
	font-size: 12px;
}

.meiblog-shell .meiblog-pagination .page-numbers.current {
	background: var(--meiblog-blue-btn);
	border-color: var(--meiblog-blue-btn);
	color: var(--meiblog-white);
}

.meiblog-shell .meiblog-pagination .page-numbers.prev,
.meiblog-shell .meiblog-pagination .page-numbers.next {
	color: var(--meiblog-blue);
}

.meiblog-shell .meiblog-pagination .page-numbers:hover {
	border-color: var(--meiblog-blue);
	color: var(--meiblog-blue);
}

/* --------------------------------------------------------------------------
   共通コンポーネント — サイドバー
   -------------------------------------------------------------------------- */
.meiblog-sidebar {
	width: 280px;
	flex-shrink: 0;
}

.meiblog-sidebar__profile {
	padding: 32px 28px;
	background: var(--meiblog-bg-soft);
	text-align: center;
}

.meiblog-sidebar__avatar {
	width: 120px;
	height: 120px;
	margin: 0 auto;
	border-radius: 50%;
}

.meiblog-sidebar__name {
	margin-top: 18px;
	font-family: var(--meiblog-font-en);
	font-size: 22px;
	letter-spacing: 3px;
	color: var(--meiblog-blue);
}

.meiblog-sidebar__text {
	margin-top: 14px;
	font-size: 12px;
	line-height: 2;
	letter-spacing: 1px;
}

.meiblog-sidebar__button,
.meiblog-shell .meiblog-sidebar__button:hover {
	display: inline-block;
	box-sizing: border-box;
	margin-top: 20px;
	width: 180px;
	padding: 11px 0;
	background: var(--meiblog-pink);
	color: var(--meiblog-white);
	font-size: 11px;
	letter-spacing: 2px;
	text-align: center;
}

.meiblog-widget {
	margin-top: 40px;
}

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

.meiblog-widget__list {
	display: flex;
	flex-direction: column;
	margin-top: 18px;
}

.meiblog-shell .meiblog-widget__item {
	display: flex;
	justify-content: space-between;
	padding: 13px 6px;
	border-bottom: 1px solid var(--meiblog-border-light);
	font-size: 12.5px;
	letter-spacing: 1px;
	color: var(--meiblog-text);
}

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

.meiblog-widget__count {
	color: var(--meiblog-text-muted);
}

/* --------------------------------------------------------------------------
   共通コンポーネント — セクション
   -------------------------------------------------------------------------- */
.meiblog-section {
	padding: var(--meiblog-section-py) var(--meiblog-section-px);
	background: var(--meiblog-white);
}

.meiblog-section--soft {
	background: var(--meiblog-bg-soft);
}

.meiblog-section__head {
	text-align: center;
}

.meiblog-section__more {
	display: flex;
	justify-content: center;
	margin-top: 60px;
}

.meiblog-empty {
	margin-top: 60px;
	text-align: center;
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--meiblog-text-muted);
}

/* --------------------------------------------------------------------------
   共通コンポーネント — ボタン
   -------------------------------------------------------------------------- */
.meiblog-btn {
	display: inline-block;
	box-sizing: border-box;
	width: 150px;
	padding: 13px 0;
	text-align: center;
	font-size: 12px;
	letter-spacing: 3px;
	line-height: 1;
}

.meiblog-btn:hover {
	opacity: 0.85;
}

.meiblog-btn--pink,
.meiblog-shell .meiblog-btn--pink:hover {
	background: var(--meiblog-pink);
	color: var(--meiblog-white);
}

.meiblog-btn--blue,
.meiblog-shell .meiblog-btn--blue:hover {
	background: var(--meiblog-blue-btn);
	color: var(--meiblog-white);
}

.meiblog-btn--white,
.meiblog-shell .meiblog-btn--white:hover {
	background: rgba(255, 255, 255, 0.92);
	color: var(--meiblog-blue);
}

.meiblog-btn--light,
.meiblog-shell .meiblog-btn--light:hover {
	background: var(--meiblog-blue-light);
	color: var(--meiblog-white);
}

/* 小（投稿詳細のシェアボタン） */
.meiblog-btn--sm {
	width: 120px;
	padding: 11px 0;
	font-size: 11px;
	letter-spacing: 2px;
}

/* やや幅広（Profile 最後の YOUTUBE / INSTAGRAM） */
.meiblog-btn--lg {
	width: 170px;
}

/* 大（404 の導線ボタン） */
.meiblog-btn--xl {
	width: 190px;
}

/* 幅広・左右振り分け（About の「PROFILEを見る」） */
.meiblog-btn--wide {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 280px;
	padding: 14px 24px;
}

/* 白背景・左右振り分け（YouTube の「YouTubeを見る」） */
.meiblog-btn--white-flat,
.meiblog-shell .meiblog-btn--white-flat:hover {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 12px 20px;
	background: var(--meiblog-white);
	color: var(--meiblog-text);
	letter-spacing: 2px;
}

/* アイコン付きインライン（Instagram の「Instagramを見る」） */
.meiblog-btn--pink-inline,
.meiblog-shell .meiblog-btn--pink-inline:hover {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: auto;
	padding: 11px 22px;
	background: var(--meiblog-pink);
	color: var(--meiblog-white);
	letter-spacing: 2px;
}

/* 枠線のみ（「もっと見る」） */
.meiblog-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 12px 32px;
	border: 1px solid var(--meiblog-border);
	color: var(--meiblog-text);
	font-size: 12px;
	letter-spacing: 3px;
}

.meiblog-shell .meiblog-btn-outline:hover {
	border-color: var(--meiblog-blue);
	color: var(--meiblog-blue);
}

.meiblog-arrow {
	color: var(--meiblog-blue);
}

.meiblog-btn .meiblog-arrow,
.meiblog-btn--white-flat .meiblog-arrow {
	color: inherit;
}

.meiblog-btn--white-flat .meiblog-arrow {
	color: var(--meiblog-blue);
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
.meiblog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 60px;
	background: var(--meiblog-white);
}

.meiblog-header__logo {
	display: block;
	font-family: var(--meiblog-font-en);
	font-size: 28px;
	letter-spacing: 4px;
	line-height: 1.1;
}

.meiblog-shell .meiblog-header__logo,
.meiblog-shell .meiblog-header__logo:hover {
	color: var(--meiblog-blue);
}

.meiblog-header__tagline {
	display: block;
	margin-top: 2px;
	font-family: var(--meiblog-font-script);
	font-size: 15px;
	color: var(--meiblog-pink-script);
}

.meiblog-header__nav {
	display: flex;
	gap: 48px;
	font-size: 13px;
	letter-spacing: 3px;
}

.meiblog-shell .meiblog-header__nav-link {
	color: var(--meiblog-text);
}

.meiblog-shell .meiblog-header__nav-link:hover,
.meiblog-shell .meiblog-header__nav-link.is-current {
	color: var(--meiblog-blue);
}

.meiblog-header__social {
	display: flex;
	gap: 18px;
	align-items: center;
}

/* ハンバーガーとドロワーは狭い画面でだけ使う */
.meiblog-header__toggle,
.meiblog-drawer,
.meiblog-drawer__dim {
	display: none;
}

/* スクリーンリーダー用のラベル（ボタン内のテキストなど） */
.meiblog-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.meiblog-shell .meiblog-header__social-link {
	display: flex;
	color: var(--meiblog-blue);
}

.meiblog-shell .meiblog-header__social-link:hover {
	color: var(--meiblog-pink-script);
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.meiblog-footer {
	padding: 36px 100px 28px;
	background: var(--meiblog-white);
	text-align: center;
}

/* 直前のセクションが白背景のページで区切り線を出す */
.meiblog-footer--bordered {
	border-top: 1px solid var(--meiblog-border-light);
}

.meiblog-footer__nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 11px;
	letter-spacing: 2px;
}

.meiblog-shell .meiblog-footer__nav-link {
	padding: 0 22px;
	color: var(--meiblog-text);
}

.meiblog-shell .meiblog-footer__nav-link:hover {
	color: var(--meiblog-blue);
}

.meiblog-footer__nav-sep {
	color: var(--meiblog-border);
}

.meiblog-footer__copyright {
	margin-top: 20px;
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--meiblog-text-muted);
}

/* ==========================================================================
   モバイル（〜900px）
   デザイン: Claude Design「HPデザイン提案書」/ MEI Mobile.dc.html
   モックは 390px 固定だが、実装では横幅に追従させる（320〜900px で破綻しない）。
   ========================================================================== */
@media (max-width: 900px) {

	/* 1080px 固定をやめないと横スクロールが出る */
	.meiblog-shell {
		min-width: 0;
	}

	:root {
		--meiblog-section-py: 70px;
		--meiblog-section-px: 24px;
	}

	/* メニューを開いている間は背面をスクロールさせない */
	.meiblog-nav-open {
		overflow: hidden;
	}

	/* ---------------------------------------------------------------------
	   ヘッダー
	   --------------------------------------------------------------------- */
	.meiblog-header {
		padding: 16px 20px;
		/* デザイン同様ドロワーの上に乗せる。× に変わったハンバーガーを押せるようにするため */
		position: relative;
		z-index: 30;
	}

	.meiblog-header__logo {
		font-size: 21px;
		letter-spacing: 3px;
	}

	.meiblog-header__tagline {
		margin-top: 0;
		font-size: 12px;
	}

	/* PC 用のナビと SNS はパネルへ移す */
	.meiblog-header__nav,
	.meiblog-header__social {
		display: none;
	}

	.meiblog-header__toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		/* デザインのタップ領域 44x44 */
		width: 44px;
		height: 44px;
		padding: 0;
		border: none;
		background: none;
		cursor: pointer;
	}

	.meiblog-header__toggle-bar {
		display: block;
		width: 22px;
		height: 1.5px;
		background: var(--meiblog-blue);
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	/* 開いているときは × に見せる */
	.meiblog-header__toggle.is-open .meiblog-header__toggle-bar:nth-child(1) {
		transform: translateY(6.5px) rotate(45deg);
	}

	.meiblog-header__toggle.is-open .meiblog-header__toggle-bar:nth-child(2) {
		opacity: 0;
	}

	.meiblog-header__toggle.is-open .meiblog-header__toggle-bar:nth-child(3) {
		transform: translateY(-6.5px) rotate(-45deg);
	}

	/* ---------------------------------------------------------------------
	   モバイルメニューのドロワー（MEI Mobile.dc.html の MENU 画面）
	   右からスライドインする。閉じている間は visibility:hidden で
	   タブキーが画面外のリンクへ入らないようにする（transform 退避だけでは防げない）。
	   --------------------------------------------------------------------- */
	.meiblog-drawer__dim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 20;
		background: rgba(93, 102, 112, 0.35);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.35s ease;
	}

	.meiblog-drawer__dim.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.meiblog-drawer {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 21;
		/* デザインは 390px 幅に対して 290px。狭い端末でも背面が見えるように上限だけ固定する */
		width: min(290px, 82vw);
		background: var(--meiblog-bg-soft);
		box-shadow: -6px 0 30px rgba(93, 102, 112, 0.15);
		transform: translateX(105%);
		visibility: hidden;
		transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.4s;
	}

	.meiblog-drawer.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;
	}

	.meiblog-drawer__inner {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		height: 100%;
		/* 上は白いヘッダーの下に潜り込む分の余白 */
		padding: 88px 36px 40px;
		/* 縦に収まらない端末（項目が増えた場合も含む）でドロワー内だけスクロールさせる */
		overflow-y: auto;
	}

	.meiblog-drawer__script {
		font-family: var(--meiblog-font-script);
		font-size: 22px;
		line-height: 1.2;
		color: var(--meiblog-pink-script);
	}

	.meiblog-drawer__wave {
		margin-top: 6px;
		color: var(--meiblog-pink);
	}

	.meiblog-drawer__nav {
		display: flex;
		flex-direction: column;
		margin-top: 28px;
	}

	.meiblog-shell .meiblog-drawer__link {
		display: block;
		color: var(--meiblog-text);
		opacity: 0;
		transform: translateX(24px);
		/* デザインの遅延 0.08 + i×0.06 秒。i はテンプレート側が --meiblog-drawer-i で渡す */
		transition:
			opacity 0.4s ease calc(0.08s + var(--meiblog-drawer-i, 0) * 0.06s),
			transform 0.4s ease calc(0.08s + var(--meiblog-drawer-i, 0) * 0.06s);
	}

	.meiblog-drawer.is-open .meiblog-drawer__link {
		opacity: 1;
		transform: translateX(0);
	}

	.meiblog-drawer__row {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 17px 2px;
		border-bottom: 1px solid var(--meiblog-border-drawer);
	}

	.meiblog-drawer__labels {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.meiblog-drawer__en {
		font-family: var(--meiblog-font-en);
		font-size: 17px;
		letter-spacing: 3px;
		line-height: 1.2;
		color: var(--meiblog-blue);
	}

	.meiblog-drawer__ja {
		font-size: 10px;
		letter-spacing: 2px;
		line-height: 1.2;
		color: var(--meiblog-text-muted);
	}

	.meiblog-shell .meiblog-drawer__link.is-current .meiblog-drawer__ja {
		color: var(--meiblog-pink-script);
	}

	.meiblog-drawer__chevron {
		font-size: 13px;
		color: var(--meiblog-pink-script);
	}

	.meiblog-drawer__social {
		display: flex;
		justify-content: center;
		gap: 18px;
		/* 項目が少なくても SNS は最下部に固定する */
		margin-top: auto;
		padding-top: 32px;
	}

	/* ---------------------------------------------------------------------
	   ページタイトル帯
	   --------------------------------------------------------------------- */
	.meiblog-page-title {
		padding: 44px var(--meiblog-section-px);
	}

	.meiblog-page-title__en {
		font-size: 30px;
		letter-spacing: 4px;
		overflow-wrap: anywhere;
	}

	.meiblog-page-title__script {
		margin-top: 6px;
		font-size: 17px;
	}

	.meiblog-page-title__sub {
		margin-top: 8px;
		font-size: 12px;
		letter-spacing: 3px;
	}

	.meiblog-page-title__lead {
		margin-top: 20px;
		font-size: 12px;
		line-height: 2.1;
	}

	/* ---------------------------------------------------------------------
	   見出し
	   --------------------------------------------------------------------- */
	.meiblog-heading-en {
		font-size: 24px;
		letter-spacing: 3px;
	}

	.meiblog-heading-en--md {
		font-size: 28px;
	}

	.meiblog-heading-en--sm,
	.meiblog-heading-en--xs {
		font-size: 22px;
	}

	.meiblog-heading-jp {
		font-size: 20px;
		letter-spacing: 4px;
	}

	.meiblog-wave {
		width: 50px;
		margin-top: 6px;
	}

	/* ---------------------------------------------------------------------
	   パンくず
	   --------------------------------------------------------------------- */
	.meiblog-breadcrumb {
		padding: 16px var(--meiblog-section-px) 0;
		font-size: 10px;
	}

	/* ---------------------------------------------------------------------
	   投稿カード
	   --------------------------------------------------------------------- */
	.meiblog-card {
		width: 100%;
	}

	.meiblog-card__figure {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.meiblog-card__tag {
		padding: 3px 8px;
		font-size: 9px;
	}

	.meiblog-card__title {
		margin-top: 12px;
		font-size: 13px;
		letter-spacing: 0.5px;
	}

	.meiblog-card__date {
		margin-top: 6px;
		font-size: 10px;
	}

	/* 横並びカード（アーカイブ）は小さいサムネイル + 見出しのみ */
	.meiblog-shell .meiblog-card--row .meiblog-card__link {
		gap: 16px;
		align-items: center;
	}

	.meiblog-card--row .meiblog-card__figure {
		width: 130px;
		height: 73px;
		aspect-ratio: auto;
		flex-shrink: 0;
	}

	.meiblog-card--row .meiblog-card__title {
		margin-top: 0;
		font-size: 12.5px;
		line-height: 1.8;
	}

	/* 幅が足りないので抜粋は省く（デザイン準拠） */
	.meiblog-card--row .meiblog-card__excerpt {
		display: none;
	}

	/* ---------------------------------------------------------------------
	   ボタン
	   --------------------------------------------------------------------- */
	.meiblog-btn {
		width: 200px;
		padding: 12px 0;
		font-size: 11px;
		letter-spacing: 2px;
	}

	.meiblog-btn--sm {
		width: 110px;
		padding: 10px 0;
		font-size: 10px;
	}

	.meiblog-btn--lg {
		width: 140px;
	}

	.meiblog-btn--xl {
		width: 200px;
	}

	.meiblog-btn--wide {
		width: 100%;
		max-width: 280px;
	}

	/*
	 * アイコン付きインラインボタンは幅を内容に合わせる。
	 * 上の汎用 .meiblog-btn（width:200px / padding:12px 0）は同じ詳細度で後ろにあるため、
	 * ここで打ち消さないと左右の余白が 0 になって文字が端に張り付く。
	 */
	.meiblog-btn--pink-inline,
	.meiblog-shell .meiblog-btn--pink-inline:hover {
		width: auto;
		padding: 11px 26px;
		font-size: 11px;
	}

	.meiblog-btn-outline {
		gap: 10px;
		padding: 11px 30px;
		font-size: 11px;
		letter-spacing: 2px;
	}

	/* ---------------------------------------------------------------------
	   ページャー
	   --------------------------------------------------------------------- */
	.meiblog-pagination {
		gap: 10px;
		margin-top: 50px;
	}

	.meiblog-shell .meiblog-pagination .page-numbers {
		width: 34px;
		height: 34px;
		font-size: 11px;
	}

	/* ---------------------------------------------------------------------
	   サイドバー（本文の下に回す）
	   --------------------------------------------------------------------- */
	.meiblog-sidebar {
		width: 100%;
	}

	/* ---------------------------------------------------------------------
	   フッター
	   --------------------------------------------------------------------- */
	.meiblog-footer {
		padding: 30px var(--meiblog-section-px);
	}

	.meiblog-footer__nav {
		gap: 0 4px;
		font-size: 10px;
		letter-spacing: 1.5px;
	}

	.meiblog-shell .meiblog-footer__nav-link {
		padding: 4px 10px;
	}

	.meiblog-footer__copyright {
		margin-top: 16px;
		font-size: 9px;
	}
}

/* ==========================================================================
   モーション軽減の設定を尊重する
   ドロワーのスライド・項目の遅延フェードは装飾。開閉の結果だけ即時に反映する。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	.meiblog-drawer,
	.meiblog-drawer.is-open,
	.meiblog-drawer__dim,
	.meiblog-shell .meiblog-drawer__link,
	.meiblog-header__toggle-bar {
		transition: none;
	}
}

/* ==========================================================================
   WordPress 管理バーとの重なり回避（ログイン中だけ #wpadminbar が出る）
   管理バーは html に margin-top（782px 以下 46px / 783px 以上 32px）を足して
   ドキュメント全体を押し下げるが、position:fixed のドロワーと暗幕は
   ビューポート基準なので押し下がらない。結果ヘッダーだけが下がり、
   ドロワー上部の「menu」がヘッダーの裏に隠れる。同じ分だけ手動で下げる。
   詳細度 (0,2,0) なので @media 内の .meiblog-drawer{top:0} (0,1,0) に勝つ。
   ========================================================================== */
.admin-bar .meiblog-drawer,
.admin-bar .meiblog-drawer__dim {
	top: 46px;
}

@media screen and (min-width: 783px) {

	.admin-bar .meiblog-drawer,
	.admin-bar .meiblog-drawer__dim {
		top: 32px;
	}
}