@charset "utf-8";

/*
 *	[File name]		setting.css
 *	[Alteration]	2026.09
 *
 *	[Information]
 *	各ページで共通のモーダルビューア（ライトボックス）のCSSをまとめたもの（表示/非表示・操作ボタンの
 *	最低限のみ）。モーダル内部のレイアウト（.modalUnitInner以下）はページごとのCSSで指定する。
 *	JS実装（LightboxSetting）はassets/gadget/lightbox/setting.js参照。
 */

/* ======================================================================================
	MODAL_UNIT_VIEWER | モーダルビューア（表示/非表示の最低限のみ。内部レイアウトは別途指定）
====================================================================================== */
	.modalUnit {
		position: fixed;
		inset: 0;
		z-index: 1010;
		overflow-y: auto;
		background: rgba(var(--site-themeColor-base), 1);
	}
	.modalUnit[aria-hidden="true"] {
		visibility: hidden;
		opacity: 0;
		transition: visibility 0s ease .3s, opacity .3s ease;
	}
	.modalUnit[aria-hidden="false"] {
		visibility: visible;
		opacity: 1;
		transition: visibility 0s ease, opacity .3s ease;
	}

	.modalUnitOverlay {
		position: fixed;
		inset: 0;
		z-index: 1005;
		background: rgba(var(--site-variationColor-blackish), .6);
	}
	.modalUnitOverlay[aria-hidden="true"] {
		visibility: hidden;
		opacity: 0;
		transition: visibility 0s ease .3s, opacity .3s ease;
	}
	.modalUnitOverlay[aria-hidden="false"] {
		visibility: visible;
		opacity: 1;
		transition: visibility 0s ease, opacity .3s ease;
	}

	.modalUnitControls {
		position: fixed;
		inset: 0;
		z-index: 1020;
		pointer-events: none;
	}
	.modalUnitControls[aria-hidden="true"] {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition: visibility 0s ease .3s, opacity .3s ease;
	}
	.modalUnitControls[aria-hidden="false"] {
		visibility: visible;
		opacity: 1;
		transition: visibility 0s ease, opacity .3s ease;
	}

	.modalUnitControls_prev,
	.modalUnitControls_next,
	.modalUnitControls_close {
		-webkit-appearance: none;
		appearance: none;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 40px;
		aspect-ratio: 1;
		border: none;
		border-radius: 100%;
		background: rgba(var(--site-variationColor-blackish), .6);
		pointer-events: auto;
		cursor: pointer;
		transition: background-color .3s ease, opacity .3s ease;
	}
	.modalUnitControls_prev {
		left: 20px;
		top: 50%;
		transform: translateY(-50%);
	}
	.modalUnitControls_next {
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
	}
	.modalUnitControls_close {
		right: 20px;
		bottom: 20px;
	}
	.modalUnitControls_prev::before,
	.modalUnitControls_next::before {
		content: "";
		display: block;
		width: 26%;
		aspect-ratio: 1;
		border-top: 2px solid rgba(var(--site-variationColor-whitish), 1);
		border-right: 2px solid rgba(var(--site-variationColor-whitish), 1);
	}
	.modalUnitControls_prev::before {
		transform: rotate(-135deg);
		margin-left: 15%;
	}
	.modalUnitControls_next::before {
		transform: rotate(45deg);
		margin-right: 15%;
	}
	.modalUnitControls_close::before,
	.modalUnitControls_close::after {
		content: "";
		position: absolute;
		width: 34%;
		height: 2px;
		background: rgba(var(--site-variationColor-whitish), 1);
	}
	.modalUnitControls_close::before {
		transform: rotate(45deg);
	}
	.modalUnitControls_close::after {
		transform: rotate(-45deg);
	}
	.modalUnitControls_prev:disabled,
	.modalUnitControls_next:disabled {
		opacity: .3;
		pointer-events: none;
	}
	@media (hover: hover) and (pointer: fine) {
		.modalUnitControls_prev:not(:disabled):hover,
		.modalUnitControls_next:not(:disabled):hover,
		.modalUnitControls_close:hover {
			background: rgba(var(--site-variationColor-blackish), .85);
		}
	}

	body.is_modalUnitViewer_active {
		overflow: hidden;
	}