@charset "utf-8";
/* ===========================================================
▼ 投稿記事のみ適用CSS
-------------------------------------------------------------- */
/* TCDテーマ テンプレート 非表示 */
/* 「ページナビ」非表示 */
#next_prev_post {
	display: none;
}

/* 「特集記事」非表示 */
#bottom_post_list {
	display: none;
}

#post_title .title {
	font-weight: 700;
}


/* -----------------------------------------------------------
▼ オリジナルカテゴリーリスト・投稿日付カスタム
-------------------------------------------------------------- */
#post_title {
	/* orignal category list */
	.orignal_post_category {
		display: flex;
		flex-wrap: wrap;

		li {
			display: inline-block;

			.category { /* カテゴリー 1218行 */
				min-width: auto;
				height: auto;
				margin: 0 16px 12px 0;
				padding: 4px 12px;
				border-radius: 6px;
				line-height: 1.6;
			}
		}
	}

	/* 投稿日付カスタム */
	.custom_post_date {
		display: flex;
		margin-top: 8px;
	}
}

/* -----------------------------------------------------------
▼ ブログ詳細（投稿記事）ページ 1202〜1362行
-------------------------------------------------------------- */
/* タイトルエリア */
#post_title .title { /* 1207行 */
	font-weight: 700;
}

/* プロフィール */
.author_profile { /* 1302行 */
	align-items: flex-start;
	margin: 60px 0 0;
	padding: 28px 28px 32px;
}

/* この記事を書いた人 追加 */
.author_profile {
	h4 {
		width: 100%;
		padding-left: 0.5em;
		border-left: 3px solid rgb(0, 0, 0);
		font-size: 16px;
		line-height: 1.6;
	}
}

.author_profile .avatar_area { /* 1309行 */
	width: 80px;
	height: 80px;
	margin-top: 24px;
}

.author_profile .info { /* 1311行 */
	width: calc(100% - 80px);
	margin-top: 28px;
}

.author_profile .info_inner { /* 1314行 */
	padding: 0 0 0 20px;
}

.author_profile .name { /* 1316行 */
	font-size: 18px;
	font-weight: 700;
}

body.single #main_col .author_profile .desc { /* 1318行 */
	max-height: none;
}

body.single #main_col .author_profile .desc span { /* 1319行 */
	-webkit-line-clamp: none;
	white-space: pre-wrap;
}

@media screen and (max-width:550px) {
	.author_profile {
		flex-direction: column;
		padding: 24px 24px 28px;
	}

	.author_profile .info {
		width: 100%;
		margin-top: 0;
	}

	.author_profile .info_inner { /* 1314行 */
		padding: 0;
	}

	.author_profile .avatar_area {
		margin: 20px auto 0;
	}

	.author_profile .name {
		margin-top: 16px;
		text-align: center;
	}

	.author_profile .desc {
		padding-top: 20px;
	}

	.author_profile .author_link {
		margin-top: 10px;
	}
}


/* -----------------------------------------------------------
▼ オリジナルショートコード
-------------------------------------------------------------- */
/* 吹き出し */
.speech-bubble {
	display: flex;
	align-items: flex-start;
	margin: 1.5em 0 3em;

	.speech-bubble_icon {
		max-width: 96px;
		font-size: 14px;
		text-align: center;

		img {
			box-sizing: border-box;
			max-width: 96px;
			height: auto;
			margin: 0 0.5em 0.1em 0;
			border: 4px solid #f5f5f5;
			border-radius: 9999px;
			object-fit: contain;
		}

		.speech-bubble_name {
			line-height: 1.4;
			font-size: 0.8em;
		}
	}

	.speech-bubble_comment {
		box-sizing: border-box;
		width: fit-content;
		margin: 2em 0 1em 1em;
		padding: 1em 1.2em;
		background: #fff;
		border: 5px solid rgba(213, 213, 213, 0.5);
		border-radius: 0 1.2em 1.2em 1.2em;
		line-height: 2;

		p {
			line-height: 2;
		}

		strong {
			font-size: 1.25rem;
		}
	}

	&.icon-right {
		flex-direction: row-reverse;

		.speech-bubble_icon {
			img {
				margin: 0 0 0.1em 0.5em;
			}
		}

		.speech-bubble_comment {
			margin: 2em 1em 1em 0;
			background: #7acc40;
			border: 5px solid #7acc40;
			border-radius: 1.2em 0 1.2em 1.2em;
			color: #fff;
		}
	}
}

@media (width <= 680px) {
	.speech-bubble {
		flex-direction: column;
		margin: 3em 0;
		overflow: hidden;

		.speech-bubble_icon {
			display: flex;
			max-width: none;
			align-items: center;

			img {
				width: 100%;
				max-width: clamp(80px,22.2vw,96px);
				margin: 0 0.5em 0.5em 0;
			}

			.speech-bubble_name {
				margin-top: 0em;
			}
		}

		.speech-bubble_comment {
			margin: 0;
		}

		&.icon-right {
			flex-direction: column;

			.speech-bubble_icon {
				flex-direction: row-reverse;
				margin-left: auto;

				img {
					margin: 0 0 0.5em 0.5em;
				}
			}

			.speech-bubble_comment {
				margin: 0 0 0 auto;
			}
		}
	}
}

/* CTA吹き出し枠 */
.cta-container {
	background: #333;
	margin: 3em 0;
	padding: 2em 2em 3em;
	color: #fff;

	.cta-message {
		font-weight: 700;
		text-align: center;
	}

	.speech-bubble {
		width: fit-content;
		margin: 1.5em auto 3em;

		.speech-bubble_comment {
			color: #f00;
			font-weight: 700;
		}
	}

	.cta-link {
		a {
			position: relative;
			display: block;
			width: fit-content;
			min-width: 200px;
			margin: 0 auto;
			padding: 0.6em 1.5em 0.45em;
			background: #ef9b2f;
			border-radius: 0.2em;
			box-shadow: 0 4px 0 #ecb254;
			text-shadow: 0 1px 1px rgba(0, 0, 0, .09);
			color: #fff;
			font-weight: 700;
			text-align: center;
			text-decoration: none;

			&:hover {
				top: 3px;
				background: #cc8c23;
				box-shadow: 0 1px 0 #ecb254;
			}
		}
	}
}

/* ポイント */
.point-content {
	position: relative;
	max-width: 600px;
	margin: 3em auto;
	padding: 3.5em 1.8em 2em;
	background: #fcf8e3;
	border: 2px solid #ffc107;
	border-radius:4px;
	color: #766341;
	line-height: 2;

	.point-content-title {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0 0.8em;
		background: #ffc107;
		color: #fff;
		font-weight: 700;
	}
}

/* 補足内容 */
.hosoku-content {
	position: relative;
	margin: 3em 0;
	padding: 2em 1.8em 2.2em 3.4em;
	background: #fcf8e3;
	border: 2px solid #faebcc;
	border-radius:4px;
	color: #766341;
	font-size: 95%;
	line-height: 2;

	&::before {
		position: absolute;
		top: 1.2em;
		left: 1em;
		content: url('../inc/icon-shortcode/icon-hosoku-content.png');
	}
}

/* 枠線 */
.content-boader {
	margin: 3em 0;
	padding: 2em 1.8em 2em;
	border: 1px solid #ddd;
}

/* 注意 */
.attention-content {
	position: relative;
	margin: 3em 0;
	padding: 2em 1.8em 2.2em 3.4em;
	background: #fce3e3;
	border: 2px solid #facccc;
	border-radius:4px;
	color: #766341;
	font-size: 95%;
	line-height: 2;

	&::before {
		position: absolute;
		top: 1.8em;
		left: 1em;
		content: url('../inc/icon-shortcode/icon-attention-content.png');
	}
}



/* -----------------------------------------------------------
▼ 関連記事「YARPP」プラグイン CSS上書きカスタムレイアウト
-------------------------------------------------------------- */
.yarpp.yarpp-related {
	margin: 80px 0 0;

	.design_headline1 {
		margin: 0;
	}

	.custom_yarpp_related_post {
		display: grid;
		gap: 24px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-top: 20px;

		.custom_yarpp_related_post_title {
			font-size: 16px;
		}
	}
}

@media (width <= 960px) {
	.yarpp.yarpp-related {
		.custom_yarpp_related_post {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}

@media (width <= 750px) {
	.yarpp.yarpp-related {
		.custom_yarpp_related_post {
			grid-template-columns: repeat(2, minmax(0, 1fr));

			.custom_yarpp_related_post_item {
				.original_post_link {
					.original_post_media {
						>img {
							height: 140px;
						}
					}
				}
			}
		}
	}
}

@media (width <= 500px) {
	.yarpp.yarpp-related {
		.custom_yarpp_related_post {
			grid-template-columns: repeat(1, minmax(0, 1fr));
		}
	}
}