/* =============================================================
   Article images
   記事内の写真は縦横比をそろえた枠に収め、画面の半分ほどで中央に置く。
   画像は切り取らず（contain）、クリックで拡大表示する。
   ============================================================= */
.ec-article-page :is(.post_content, .entry-content) > :is(figure.wp-block-image, figure.rc-official-image),
.ec-article-page :is(.post_content, .entry-content) > .wp-block-image > figure,
.ec-article-page .p-articleThumb {
	box-sizing: border-box;
	width: min(50%, 560px);
	max-width: 100%;
	margin: 28px auto;
	float: none;
	text-align: center;
}

.ec-article-page :is(.post_content, .entry-content) > :is(figure.wp-block-image, figure.rc-official-image) img,
.ec-article-page :is(.post_content, .entry-content) > .wp-block-image > figure img,
.ec-article-page .p-articleThumb img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	margin: 0 auto;
	object-fit: contain;
	border: 0;
	border-radius: var(--ec-r, 18px);
	background: var(--ec-cream, #fff8ec);
	box-shadow: 0 1px 2px rgba(30, 36, 67, .05), 0 10px 26px rgba(28, 92, 160, .1);
}

.ec-article-page :is(.post_content, .entry-content) > :is(figure.wp-block-image, figure.rc-official-image) figcaption,
.ec-article-page :is(.post_content, .entry-content) > .wp-block-image > figure figcaption {
	margin: 10px 0 0;
	padding: 0 4px;
	color: var(--ec-mute, #646a85);
	font-size: .76rem;
	line-height: 1.6;
	text-align: center;
}

/* 拡大できる画像 */
.ec-zoomable {
	cursor: zoom-in;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}

.ec-zoomable:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(30, 36, 67, .06), 0 18px 38px rgba(28, 92, 160, .18);
}

.ec-zoomable:focus-visible {
	outline: 3px solid rgba(28, 138, 209, .5);
	outline-offset: 3px;
}

.ec-zoom-wrap {
	position: relative;
	display: block;
}

.ec-zoom-wrap::after {
	content: "";
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e2443' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 16px no-repeat;
	box-shadow: 0 2px 8px rgba(30, 36, 67, .18);
	pointer-events: none;
}

/* ----- Lightbox ----- */
.ec-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(16, 20, 40, .88);
	animation: ec-lightbox-in .25s ease-out;
}

.ec-lightbox[hidden] {
	display: none;
}

.ec-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 92vw;
	margin: 0;
}

.ec-lightbox__img {
	display: block;
	max-width: 92vw;
	max-height: 84vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
	animation: ec-lightbox-zoom .3s cubic-bezier(.22, 1, .36, 1);
}

.ec-lightbox__caption {
	max-width: 80ch;
	color: rgba(255, 255, 255, .85);
	font-size: .8rem;
	line-height: 1.6;
	text-align: center;
}

.ec-lightbox__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e2443' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / 18px no-repeat;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
	cursor: pointer;
}

.ec-lightbox__close:focus-visible {
	outline: 3px solid #ffc53d;
	outline-offset: 3px;
}

html.ec-lightbox-open {
	overflow: hidden;
}

@keyframes ec-lightbox-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ec-lightbox-zoom {
	from { opacity: 0; transform: scale(.94); }
	to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 782px) {
	.ec-article-page :is(.post_content, .entry-content) > :is(figure.wp-block-image, figure.rc-official-image),
	.ec-article-page :is(.post_content, .entry-content) > .wp-block-image > figure,
	.ec-article-page .p-articleThumb {
		width: 100%;
		margin: 20px auto;
	}

	.ec-lightbox {
		padding: 2vh 2vw;
	}

	.ec-lightbox__img {
		max-width: 96vw;
		max-height: 80vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-zoomable,
	.ec-lightbox,
	.ec-lightbox__img {
		transition: none;
		animation: none;
	}

	.ec-zoomable:hover {
		transform: none;
	}
}