@charset "UTF-8";
/* -------------------------------------------------- */
/* PC */
/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* 動画紹介一覧ページ */
/* -------------------------------------------------- */
/* タブ */
/* -------------------------------------------------- */
#movieNav {
	margin-bottom: 100px;
}


/* 一覧 */
/* -------------------------------------------------- */
#movieArchive {
	margin-bottom: 150px;
}

#movieArchiveTxt {
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 1.8rem;
}

#movieArchiveTit {
	margin-bottom: 50px;
	padding-bottom: 20px;
	border-bottom: 1px solid #cac8c8;
	font-weight: 600;
	font-size: 3rem;
}

#movieArchiveList {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 50px;
	margin-bottom: 80px;
}

#movieArchiveList .item a {
	display: grid;
	grid-template-columns: min(44%, 525px) 1fr;
	align-items: center;
	background: #fff;

}

#movieArchiveList .img {
	overflow: hidden;
}

#movieArchiveList .img img {
	width: 100%;
	transition: all 0.3s ease-in-out 0s;
}

#movieArchiveList a:hover .img img {
	transform: scale(1.1);
}

#movieArchiveList .txtBox {
	padding: 20px 45px;
}

#movieArchiveList .date {
	margin-bottom: 10px;
	font-weight: 600;
	font-size: 1.6rem;
}

#movieArchiveList .tit {
	margin-bottom: 30px;
	font-weight: 600;
	font-size: 2rem;
}

#movieArchiveList .detailWrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
}

#movieArchiveList .detail {
	display: grid;
	grid-template-columns: 70px 1fr;
	grid-gap: 4px;
	border-radius: 4px;
	overflow: clip;
}

#movieArchiveList .detailTit,
#movieArchiveList .detailTxt {
	display: flex;
	align-items: center;
	padding-block: 8px;
}

#movieArchiveList .detailTit {
	justify-content: center;
	padding-inline: 5px;
	background: #a09f9d;
	color: #fff;
	font-weight: 600;
	font-size: 1.5rem;
	text-align: center;
}

#movieArchiveList .detailTxt {
	padding-inline: 15px;
	background: #f4f2ef;
	font-weight: 500;
	font-family: var(--font-family-sub);
}

#movieArchiveList .detail.isWide {
	grid-column: span 2;
}


/* -------------------------------------------------- */
/* 動画紹介詳細ページ */
/* -------------------------------------------------- */
/* 記事 */
/* -------------------------------------------------- */
#movieSingle {
	width: min(100%, 1200px);
	margin: 0 auto 100px;
	padding: 75px 60px;
	background: #fff;
}

#movieSingle .date {
	margin-bottom: 25px;
	font-weight: 600;
	font-size: 1.8rem;
}

#movieSingle .detailWrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 15px;
	margin-bottom: 40px;
}

#movieSingle .detail {
	display: grid;
	grid-template-columns: 150px 1fr;
	grid-gap: 4px;
	border-radius: 4px;
	overflow: clip;
}

#movieSingle .detailTit,
#movieSingle .detailTxt {
	display: flex;
	align-items: center;
	min-height: 60px;
	padding-block: 15px;
}

#movieSingle .detailTit {
	justify-content: center;
	padding-inline: 5px;
	background: #a09f9d;
	color: #fff;
	font-weight: 600;
	font-size: 1.6rem;
	text-align: center;
}

#movieSingle .detailTxt {
	padding-inline: 15px;
	background: #f4f2ef;
	font-weight: 500;
	font-family: var(--font-family-sub);
}

#movieSingle .detail.isWide {
	grid-column: span 2;
}

#movieSingleTit {
	margin-bottom: 40px;
	font-weight: 600;
	font-size: 3rem;
}

#movieSingleMovie {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16/9;
	margin: 0 auto 30px;
}

#movieSingleMovie iframe {
	width: 100%;
	height: 100%;
	display: block;
}

#movieSingle .txt {
	font-size: 1.8rem;
	font-family: var(--font-family-sub);
}


/* 関連する症例 */
/* -------------------------------------------------- */
#movieSinglePage #similarCases {
	margin-bottom: 90px;
	padding-block: 90px 140px;
	background: #fff;
}


/* -------------------------------------------------- */
/* PC(調整) */
/* -------------------------------------------------- */
@media screen and (min-width: 1025px) {
	/* -------------------------------------------------- */
	/* 動画紹介詳細ページ */
	/* -------------------------------------------------- */
	/* タブ */
	/* -------------------------------------------------- */
	#movieSinglePage #movieNav {
		margin-bottom: 150px;
	}

}


/* -------------------------------------------------- */
/* TAB&SP */
/* -------------------------------------------------- */
@media screen and (max-width: 1024px) {
	/* -------------------------------------------------- */
	/* 動画紹介一覧ページ */
	/* -------------------------------------------------- */
	/* タブ */
	/* -------------------------------------------------- */
	#movieNav {
		margin-bottom: 50px;
	}


	/* 一覧 */
	/* -------------------------------------------------- */
	#movieArchive {
		margin-bottom: 80px;
	}

	#movieArchiveTxt {
		font-size: 1.6rem;
	}

	#movieArchiveTit {
		margin-bottom: 30px;
		padding-bottom: 15px;
		font-size: 2.2rem;
	}

	#movieArchiveList {
		grid-gap: 30px;
		margin-bottom: 40px;
	}

	#movieArchiveList .item a {
		grid-template-columns: 1fr;
	}

	#movieArchiveList .txtBox {
		padding: max(30px, 5%) max(20px, 5%);
	}

	#movieArchiveList .date {
		font-size: 1.4rem;
	}

	#movieArchiveList .tit {
		margin-bottom: 20px;
		font-size: 1.6rem;
	}

	#movieArchiveList .detailTxt {
		padding-inline: 10px;
	}


	/* -------------------------------------------------- */
	/* 動画紹介詳細ページ */
	/* -------------------------------------------------- */
	/* 記事 */
	/* -------------------------------------------------- */
	#movieSingle {
		margin-bottom: 80px;
		padding: max(30px, 5%) 0;
	}

	#movieSingle .date {
		margin-bottom: 20px;
		font-size: 1.4rem;
	}

	#movieSingle .detailWrap {
		margin-bottom: 30px;
	}

	#movieSingle .detailTit,
	#movieSingle .detailTxt {
		min-height: auto;
	}

	#movieSingle .detailTxt {
		padding-inline: 10px;
	}

	#movieSingleTit {
		margin-bottom: 30px;
		font-size: 2.2rem;
	}

	#movieSingleMovie {
		border-radius: 10px;
	}

	#movieSingle .txt {
		font-size: 1.6rem;
	}


	/* 関連する症例 */
	/* -------------------------------------------------- */
	#movieSinglePage #similarCases {
		margin-bottom: 80px;
		padding-block: 80px 100px;
	}

}


/* -------------------------------------------------- */
/* SP(調整) */
/* -------------------------------------------------- */
@media screen and (max-width: 767px) {
	/* -------------------------------------------------- */
	/* 動画紹介一覧ページ */
	/* -------------------------------------------------- */
	/* 一覧 */
	/* -------------------------------------------------- */
	#movieArchiveList .detailWrap {
		grid-template-columns: 1fr;
	}

	#movieArchiveList .detailTit {
		font-size: 1.4rem;
	}

	#movieArchiveList .detailTxt {
		font-size: 1.3rem;
	}

	#movieArchiveList .detail.isWide {
		grid-column: span 1;
	}


	/* -------------------------------------------------- */
	/* 動画紹介詳細ページ */
	/* -------------------------------------------------- */
	/* 記事 */
	/* -------------------------------------------------- */
	#movieSingle .detailWrap {
		grid-template-columns: 1fr;
		grid-gap: 10px;
	}

	#movieSingle .detail {
		grid-template-columns: 120px 1fr;
	}

	#movieSingle .detailTit,
	#movieSingle .detailTxt {
		padding-block: 10px;
	}

	#movieSingle .detailTit {
		font-size: 1.4rem;
	}

	#movieSingle .detailTxt {
		font-size: 1.3rem;
	}

	#movieSingle .detail.isWide {
		grid-column: span 1;
	}

}