/**
 * 画像ライトボックス（magnific-popup）の見た目調整
 *
 * 画像ブロックの「ライトボックスで開く」は functions/gutenberg.php で
 * magnific-popup（.mfp-image）に差し替えている。
 * コア標準lightbox（.wp-lightbox-overlay）は使用しないため、ここでは magnific 側の
 * 見た目を現行サイトに揃える。
 * ※ magnific 本体のCSSは bundle.js に同梱（style-loader で注入）されている。
 * ※ このファイルは add_editor_style でエディタにも読み込まれる（.mfp-* はフロントのみ／キャプションは共通）。
 */

/* 暗転背景＋濃度（現行サイトと揃える） */
.mfp-bg {
	background-color: #000;
	opacity: 0.85;
}

/* 透過PNGが暗転背景に溶け込まないよう、画像に白背景を敷く */
.mfp-img {
	background-color: #fff;
}

/* PCでは画像を画面いっぱい(100%)にせず、左右に余白を持たせる（最大90%幅） */
@media (min-width: 768px) {
	.mfp-img {
		max-width: 90% !important;
	}
}

/* SP（magnific既定の900px幅）でコンテナの左右余白を広げる（既定6px→25px） */
@media (max-width: 900px) {
	.mfp-container {
		padding-left: 25px !important;
		padding-right: 25px !important;
	}
}

/**
 * 閉じるボタン（現行サイト Modaal と同じ×デザインに揃える）
 * magnific 既定の「×」文字は隠し、:before/:after の白い2本線を交差させて×を作る。
 */
.mfp-close {
	position: fixed !important;
	top: 20px !important;
	right: 20px !important;
	width: 50px !important;
	height: 50px !important;
	padding: 0 !important;
	opacity: 1 !important;
	color: transparent !important; /* magnific 既定の「×」文字を隠す */
	background: transparent !important;
	border-radius: 100% !important;
	transition: all 0.2s ease-in-out !important;
}

.mfp-close::before,
.mfp-close::after {
	display: block;
	content: " ";
	position: absolute;
	top: 14px;
	left: 23px;
	width: 4px;
	height: 22px;
	border-radius: 4px;
	background: #fff;
	transition: background 0.2s ease-in-out;
}

.mfp-close::before {
	transform: rotate(-45deg);
}

.mfp-close::after {
	transform: rotate(45deg);
}

/* ホバー/フォーカス時：白い丸＋赤い×（現行と同じ） */
.mfp-close:hover,
.mfp-close:focus {
	outline: none !important;
	background: #fff !important;
}

.mfp-close:hover::before,
.mfp-close:hover::after,
.mfp-close:focus::before,
.mfp-close:focus::after {
	background: #b93d0c;
}

/**
 * 画像ブロックのキャプション文字サイズ（標準は _block-content-styles.scss で12px）
 * editor.js のドロップダウンで is-caption-lg / is-caption-xl が付与される
 */
.wp-block-image.is-caption-lg figcaption,
.wp-block-image.is-caption-lg .wp-element-caption {
	font-size: 1.4rem !important;
}

.wp-block-image.is-caption-xl figcaption,
.wp-block-image.is-caption-xl .wp-element-caption {
	font-size: 1.6rem !important;
}