/* 画像設定 */
#photo-container {
	position: relative;       /* 子画像を重ねるため */
	width: 100%;              /* 好きなサイズに調整 */
	height: 300px;            /* 画像の高さに合わせる */
	overflow: hidden;
}

#photo-container .item {
	position: absolute;       /* 全部同じ位置に重ねる */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;        /* アスペクト比を保ってフィット */
	opacity: 0;               /* 初期は非表示 */
	transition: opacity 1s ease-in-out; /* ふわっとフェード */
}

#photo-container .item.active {
	opacity: 1;               /* 表示中の画像 */
}