/* =========================================================
   ads 実績詳細 サムネイル（#photoNav）
   縦長画像もトリミングせず全体表示し、余白は同画像のぼかしで埋める
   ※このフォルダ(ads)内でのみ読み込む専用CSS
   ========================================================= */

/* サムネイル枠：元の高さ(42px)は変えず、その中に画像を収める */
#residenceCase .caseThum ul#photoNav li a {
	position: relative;
	display: block;
	width: 100%;
	height: 42px;          /* 元の高さを維持 */
	overflow: hidden;
	background: #000;      /* 画像読み込み前の下地 */
}

/* 余白を埋めるぼかし背景（JSで各サムネの画像URLを background に設定） */
#residenceCase .caseThum ul#photoNav li a::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: inherit;      /* a に設定された background-image を継承 */
	background-size: cover;
	background-position: center center;
	filter: blur(8px);
	transform: scale(1.1);          /* ぼかしの端が透けないよう少し拡大 */
	z-index: 0;
}

/* 本体画像：トリミングせず全体表示、枠内中央 */
#residenceCase .caseThum ul#photoNav li a img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	max-height: none;               /* common.css の max-height:100% を解除 */
	object-fit: contain;            /* 切らずに全体表示 */
	object-position: center center; /* 上下・左右中央 */
	display: block;
}

/* =========================================================
   メイン写真（#photoMain）も同様に、余白を同画像のぼかしで埋める
   ※ads内のみ。common.css の #photoMain(contain) を前提に上乗せ
   ========================================================= */
#residenceCase #photoMain {
	position: relative;
	overflow: hidden;
	background: #000; /* 画像読み込み前の下地 */
}
/* 余白を埋めるぼかし背景（JSで #photoMain に background-image を設定） */
#residenceCase #photoMain::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center center;
	filter: blur(8px);
	transform: scale(1.1); /* ぼかしの端が透けないよう少し拡大 */
	z-index: 0;
}
/* 本体画像：トリミングせず全体表示、枠内中央、ぼかし背景より前面 */
#residenceCase #photoMain img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	display: block;
}