@charset "UTF-8";
/* ==========================================================
   投稿の個別ページ（SWELLの single.php）
   ブロックの色は SWELL設定 > エディター設定（くすみ系）
   ========================================================== */

/* ----- パンくず ----- */
.single .p-breadcrumb.-bg-on {
	background: var(--coconi-bg-sub);
}
.single .p-breadcrumb__text {
	color: #8a7f80;
}

/* ----- タイトル周り ----- */
.c-postTitle__ttl {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .1em;
}
.c-postTitle__date {
	color: var(--coconi-pink);
	font-family: var(--coconi-font-en);
}
.p-articleMetas .c-categoryList__link {
	border-radius: 2px;
	background: var(--coconi-btn);
	color: #fff;
}

/* ----- 公開日（記事の情報欄・関連記事のカード）は出さない ----- */
.c-postTimes__posted {
	display: none;
}

/* ----- アイキャッチ画像（角丸8px） -----
   SWELLの影を消し、角丸の枠で切り抜く
   画像のふちに透明な部分があっても見えないよう、ほんの少しだけ拡大 */
.p-articleThumb {
	overflow: hidden;
	border-radius: 8px;
}
.p-articleThumb__img {
	display: block;
	width: 100%;
	border-radius: 0;
	box-shadow: none;
	transform: scale(1.03);
}

/* ----- 本文 ----- */
.single .post_content {
	font-size: 15px;
	line-height: 2.1;
}
.single .post_content a {
	color: var(--coconi-btn-hover);
}

/* h2：薄いピンクの帯 + 左にライン */
.single .post_content h2 {
	padding: .9em 1.2em;
	border-left: 3px solid var(--coconi-pink);
	border-radius: 2px;
	background: var(--coconi-bg-sub);
	color: var(--coconi-text);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: .1em;
}
.single .post_content h2::before,
.single .post_content h2::after {
	display: none;
}

/* h3：下線（左側だけピンク） */
.single .post_content h3 {
	padding: 0 0 .6em;
	border-bottom: 1px solid #eadcdc;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .1em;
}
.single .post_content h3::before {
	bottom: -1px;
	width: 80px;
	height: 1px;
	border: none;
	background: var(--coconi-pink);
}

/* h4：左に小さい丸 */
.single .post_content h4 {
	position: relative;
	padding-left: 1.2em;
	font-size: 16px;
	font-weight: 500;
}
.single .post_content h4::before {
	content: "";
	position: absolute;
	top: .65em;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--coconi-btn);
}

/* ----- 記事下（この記事を書いた人・関連記事・コメント） ----- */
.l-articleBottom__title,
.single .c-secTitle {
	border-left-color: var(--coconi-pink);
	font-weight: 500;
	letter-spacing: .1em;
}

/* ----- サイドバー ----- */
#sidebar h2 {
	margin-bottom: 0em;
	font-family: var(--coconi-font-en);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: .12em;
	color: var(--coconi-pink);
}
#sidebar a {
	color: var(--coconi-text);
}
#sidebar a:hover {
	color: var(--coconi-btn-hover);
}

/* ==========================================================
   SP
   ========================================================== */
@media (max-width: 767px) {
	.c-postTitle__ttl {
		font-size: 19px;
	}
	.single .post_content {
		font-size: 14.5px;
	}
	.single .post_content h2 {
		font-size: 17px;
	}
	.single .post_content h3 {
		font-size: 16px;
	}

	/* 関連記事：SPは1列で大きく見せる */
	.p-relatedPosts.-type-card {
		margin: 0;
	}
	.p-relatedPosts.-type-card .p-postList__item {
		width: 100%;
		margin-bottom: 36px;
		padding: 0;
	}
	.p-relatedPosts .c-postThumb__figure {
		border-radius: 8px;
		overflow: hidden;
	}
	.p-relatedPosts .p-postList__title {
		margin-top: 12px;
		font-size: 15px;
		line-height: 1.8;
	}
}