@charset "UTF-8";

/* =================================================
★注意★
追加・上書き用のCSSです。
既存スタイルの調整や新規パーツ作成に使用します。
================================================ */


/* blog sidenav banner */
.media-sub {
	display: grid;
	gap: 48px;
	height: 100%;
	align-content: start;
}

.media-sub__sticky {
	position: sticky;
	top: 132px;
}

@media screen and (max-width: 1024px) {
	.media-sub__sticky {
		position: sticky;
		top: 132px;
	}
}

@media screen and (max-width: 640px) {
	.media-sub__sticky {
		display: none;
	}
}

.media-side__banner {
	text-align: center;
}

/* blog 記事詳細 banner */
.media-contents__banner {}

.c-image-link {
	display: inline-block;
	transition: opacity .3s ease;
}

.c-image-link:hover {
	opacity: .8;
}

/* blog bace */
.media_table>ul>li::before,
.media_table>ul>li>a {
	font-weight: 500
}

/* title */
.media-post__pagetitle {
	font-size: 2.5rem;
	font-weight: 500;
}

@media screen and (max-width: 768px) {
	.media-post__pagetitle {
		font-size: 1.5rem;
		margin-bottom: 24px
	}
}

.media-post__details h2 {
	font-size: 2rem;
	margin-bottom: 24px;
}

@media screen and (max-width: 768px) {
	.media-post__details h2 {
		font-size: 1.5rem
	}
}

.media-post__details h3 {
	font-size: 1.75rem;
}

@media screen and (max-width: 768px) {
	.media-post__details h3 {
		font-size: 1.25rem
	}
}

.media-post__details h4 {
	font-size: 1.5rem;
	line-height: 1.6;
	letter-spacing: .04em
}

@media screen and (max-width: 768px) {
	.media-post__details h4 {
		font-size: 1.125rem
	}
}

.media-post__details h2:has(+ h3),
.media-post__details h3:has(+ h4),
.media-post__details h4:has(+ h5),
.media-post__details h5:has(+ h6) {
	margin-bottom: 24px;
}

.media-post__details h2+h3,
.media-post__details h3+h4,
.media-post__details h4+h5,
.media-post__details h5+h6 {
	margin-top: 24px;
}

/* side nav title */
.media-sub__title {
	font-weight: 500;
}

/* text */
.site-body p:not([class]) {
	line-height: 1.8;
}

@media screen and (max-width: 768px) {
	.site-body p:not([class]) {
		line-height: 1.6;
	}
}

/* 関連記事 */
.media-relation__title {
	font-weight: 500;
}

.media-relation__cover {
	grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 696px) {
	.media-relation__cover {
		grid-template-columns: 1fr;
		gap: 16px
	}
}

.media-relation__thumb {
	height: 150px;

}

.media-relation__thumb img {
	height: 100%;
	object-fit: cover;
}

.media-relation__txtarea {
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
}

.media-relation__text {
	padding-bottom: 0px;
	border-bottom: none;
}