/* /house/ のメインビジュアル（スライダー）
   元サイト（イエタテLab.）と同じ見せ方にそろえる:
   スライドは画像の実寸(PC 1601px)までで止め、中央に置く。
   画面がそれより広いときは、左右に前後のスライドが見切れて並ぶ。 */
.p-ietateMv {
	position: relative;
	/* 画面の全幅に広げる。#body_wrap が overflow-x: clip なので横スクロールは出ない */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-bottom: 2.5em;
	overflow: hidden;
	/* 比率の違うスライドが混ざると上下に余白が出る。本文が白なので白で続ける */
	background: #fff;
}

.p-ietateMv__track {
	display: flex;
	/* 比率の違う画像が混ざっても上下中央でそろえる（高さは一番大きいスライドに合わせる） */
	align-items: center;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.p-ietateMv__slide {
	/* 画像の実寸まで。画面が狭いときは画面幅にそろえる */
	flex: 0 0 auto;
	/* 画像は1600px幅だが、そのまま出すと高さが900pxになって画面を占めすぎるため、
	   幅を1040pxまでに抑える（高さ約585px）。画像の中に文字があるので、
	   上下を切るのではなく幅を縮めて高さを下げている（2026-10-02 本人指示・3回目） */
	width: min(1040px, 100vw);
	/* 高さは画像の実寸から決める（--mv-ratio はPHPがメディアの幅/高さを入れる）。
	   先に比率を決めておかないと、画像を読み込むまで高さが定まらず枠だけが大きく空く。
	   数字をここに書くと画像を差し替えたときに切れるので、必ず変数で受ける */
	aspect-ratio: var(--mv-ratio, 16 / 9);
	overflow: hidden;
	/* 中央以外は少し落として、主役を分かりやすくする */
	opacity: .45;
	transition: opacity .6s;
}

.p-ietateMv .p-ietateMv__slide.is-current {
	opacity: 1;
}

.p-ietateMv__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-ietateMv__link {
	display: block;
	height: 100%;
}

.p-ietateMv__link picture,
.p-ietateMv__slide picture {
	display: block;
	height: 100%;
}

/* 左右の矢印 */
.p-ietateMv__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0 0 .15em;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	color: #1e3a5f;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s;
}

.p-ietateMv__arrow:hover {
	background: #fff;
}

.p-ietateMv__arrow--prev { left: 14px; }
.p-ietateMv__arrow--next { right: 14px; }

/* ドット */
.p-ietateMv__dots {
	position: absolute;
	bottom: 12px;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

.p-ietateMv__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .7);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}

.p-ietateMv__dot.is-current {
	background: #1e3a5f;
	transform: scale(1.25);
}

.p-ietateMv.is-single .p-ietateMv__arrow,
.p-ietateMv.is-single .p-ietateMv__dots {
	display: none;
}

.p-ietateMv.is-single .p-ietateMv__slide {
	opacity: 1;
}

@media screen and (max-width: 599px) {
	/* スマホはスライドの下に余白を置かず、次のセクションをすぐ続ける */
	.p-ietateMv { margin-bottom: 0; }
	/* スマホもPCと同じく、前後のスライドが左右に少しだけ見える幅にする。
	   高さはスマホ用画像の実寸から決める（スマホ用が無ければPC用の比率に戻る） */
	.p-ietateMv__slide {
		width: min(86vw, 420px);
		aspect-ratio: var(--mv-ratio-sp, var(--mv-ratio, 16 / 9));
	}
	.p-ietateMv__arrow { width: 34px; height: 34px; font-size: 1.4rem; }
	.p-ietateMv__arrow--prev { left: 6px; }
	.p-ietateMv__arrow--next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.p-ietateMv__track { transition: none; }
}