h1 {
	font-family: 'Montagu Slab', serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
img {
	max-width: 100%;
}
@media (min-width: 866px) {
	.wrapper {
		width: 600px;
		padding: 0 20px;
		margin: 0 auto;
	}
	.detailHeader {
		width: 100%;
		max-width: 1040px;
		margin: 110px auto 0;
	}
	.detailHeader h2 {
		font-size: 16px;
	}
	.slide {
		margin: 0 auto;
		width: 100%;
		position: relative;
	}
	.detailImgs {
		width: 100%;
		margin: 0 auto;
	}
	.detailImg {
		width: 100%;
		margin-top: 20px;
	}
	.detailContainer {
		max-width: 1040px;
		margin: 16px auto 80px;
		padding: 0 10px;
		display: flex;
		flex-direction: column;
		gap: 24px;
		font-size: 14px;
	}
	.detailContainer h2 {
		font-size: 16px;
	}
	.detailContainer p {
		line-height: 1.8;
	}
	.detailContainer table tbody tr {
		display: block;
		line-height: 1.5;
		font-size: 12px;
	}
	.detailContainer table tbody tr th {
		width: 100px;
		vertical-align: top;
	}
	.relation {
		width: 80%;
		max-width: 1040px;
		margin: 40px auto;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.relationContents {
		display: inline-flex;
		flex-direction: column;
		font-size: 12px;
	}

	.relationContents img {
		width: 250px;
	}

	.relationTitle {
		margin: 8px 0;
		font-weight: 600;
	}
	.breadcrumb {
		margin: 42px 0 20px 0;
	}
	.item_container {
		width: 100%;
		margin: 80px auto;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.item_container .item {
		width: 100%;
		margin-bottom: 60px;
	}
}

@media (max-width: 866px) {
	.wrapper {
		width: 100%;
		margin: 68px auto 0;
		padding: 0 30px;
	}
	h1 {
		font-size: 32px;
	}
	tr {
		line-height: 1.5;
	}
	th {
		vertical-align: top;
		padding-top: 6px;
	}
	td {
		vertical-align: top;
		padding-top: 6px;
	}
	.detailHeader {
		width: 100%;
		max-width: 500px;
	}
	.slide {
		width: 100%;
	}

	.detailImgs {
		width: 100%;
	}

	.detailImg {
		width: 100%;
		margin-top: 20px;
	}
	.detailContainer {
		padding: 0 5px;
		margin: 14px 0 120px 0;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.detailContainer table {
		font-size: 12px;
	}
	.detailContainer p {
		font-size: 12px;
	}
	.relation {
		width: 80%;
		max-width: 500px;
		margin: 40px auto;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
}

/* スクロールで表示される画像の初期状態 */
.detailImg img {
	opacity: 0;
	/* animation-timelineがサポートされていないブラウザへのフォールバックとして、または他のトランジションのためにtransitionを設定することも可能ですが、ここではanimation-timelineがメインです。 */
	transition: opacity 0.8s ease-out; /* オプション：スムーズな表示のための一般的なトランジション */
}
/* フェードインアニメーションの定義 */
@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* 画像にアニメーションを適用し、スクロールと連動させる */
.detailImg img {
	animation: fade-in 1.2s forwards; /* 1秒かけてfade-inアニメーションを実行し、終了状態（opacity: 1）を保持 */
	animation-timeline: view(

	); /* アニメーションを要素のビューポートへの表示（スクロール）に連動させる */
	animation-range: entry 0% cover 50%; /* 要素がビューポートに入り始めてから、要素の50%がビューポートに表示されるまでにアニメーションを完了させる */
}