/**
 * Single Post Styles
 *
 * 記事詳細ページ専用スタイル
 *
 * 構成:
 * 1. ベース設定
 * 2. ページヘッダー（オレンジ背景）
 * 3. 本文コンテンツエリア
 * 4. タイポグラフィ（h1-h4, p）
 * 5. アイキャッチ画像
 * 6. コメントセクション
 * 7. タグ一覧
 * 8. レスポンシブ
 *
 * @package SMC_Japan_Astra_Child
 */

/* ==========================================================================
   Single Post - Base
   ========================================================================== */

/* 記事詳細ページの背景色を統一 */
body.single-post {
	background-color: var(--d1-col-bg);
}

/* Astraの白背景を上書き */
.ast-separate-container .single-article.ast-article-single:not(.ast-related-post) {
	background-color: transparent;
}

/* Astraテーマの.site-mainマージン・パディングを打ち消し */
main#primary.site-main.single-post {
	margin-top: 0 !important;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* ==========================================================================
   Single Header
   ========================================================================== */

.single-header {
	background-color: var(--d1-col-main);
	min-height: 484px;
	display: flex;
	align-items: center;
	padding: 60px 0;
	box-sizing: border-box;
}

.single-header .container {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

/* 日付 */
.single-header__date {
	color: white;
	font-size: 24px;
	font-weight: 400;
	line-height: 54px;
	margin: 0;
}

/* 区切り線 */
.single-header__divider {
	width: 100%;
	height: 1px;
	background-color: white;
	margin: 8px 0 16px;
}

/* タイトル */
.single-header__title {
	color: white;
	font-size: 34px;
	font-weight: 700;
	line-height: 54px;
	margin: 0;
}

/* タイトル下固定文言 */
.single-header__note {
	color: white;
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	margin: 24px 0 0;
}

/* ==========================================================================
   Single Content
   ========================================================================== */

.single-content {
	padding: 80px 0 0;
}

.single-content .single-article {
	max-width: 800px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0;
	box-sizing: border-box;
}

/* 本文以降のセクション（投稿コンテンツの影響を受けない領域） */
.single-after-content {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 0 160px;
}

/* 長い半角文字列（URL等）の折り返し */
.single-article {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ==========================================================================
   Typography - h1, h2
   ========================================================================== */

.single-article h1,
.single-article h2 {
	font-size: 30px;
	font-weight: 700;
	line-height: 48px;
	color: black;
	padding: 48px 0;
	box-sizing: border-box;
}

/* ==========================================================================
   Typography - h3
   ========================================================================== */

.single-article h3 {
	font-size: 24px;
	font-weight: 700;
	line-height: 40px;
	color: black;
	padding: 32px 0;
	box-sizing: border-box;
}

/* ==========================================================================
   Typography - h4（コメント・シェア・記事利用規約セクション見出し共通）
   ========================================================================== */

.single-article h4,
.expert-comments-closed h4,
.share-heading,
.article-usage__content h4 {
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	color: black;
	padding: 32px 0;
	box-sizing: border-box;
}

/* ==========================================================================
   Typography - Paragraphs
   ========================================================================== */

.single-article p {
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	color: black;
	margin: 0 0 24px;
}

.single-article p:last-child {
	margin-bottom: 0;
}

/* コメント閉鎖時のメッセージ */
.expert-comments-closed__message {
	font-size: 18px;
	font-weight: 400;
	line-height: 36px;
	color: #CCCCCC;
	margin: 0;
	padding-left: 16px;
}

/* ==========================================================================
   Typography - Links
   ========================================================================== */

.single-article a {
	color: var(--d1-col-main);
	text-decoration: underline;
}

.single-article a:hover {
	text-decoration: none;
}

/* ==========================================================================
   Typography - Lists
   ========================================================================== */

.single-article ul,
.single-article ol {
	font-size: 18px;
	line-height: 30px;
	color: black;
	margin: 0 0 24px;
	padding-left: 24px;
}

.single-article li {
	margin-bottom: 8px;
}

.single-article li:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Thumbnail
   ========================================================================== */

.single-thumbnail {
	margin-bottom: 24px;
	max-width: 800px;
}

.single-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
	background-color: #D9D9D9;
}

/* ==========================================================================
   Images
   ========================================================================== */

.single-article img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 24px 0;
}

.single-article figure {
	margin: 24px 0;
}

.single-article figcaption {
	font-size: 14px;
	color: var(--d1-col-text-light);
	margin-top: 8px;
	text-align: center;
}

/* ==========================================================================
   Expert Comments Closed Section / Article Usage Section
   ========================================================================== */

.expert-comments-closed,
.article-usage {
	margin-top: 64px;
	margin-bottom: 64px;
}

/* 記事利用規約セクション コンテンツエリア */
.article-usage__content {
	background-color: var(--d1-col-bg2);
	border-radius: 16px;
	padding: 36px;
}

/* 記事利用規約セクション本文 */
.article-usage__content p {
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	color: #333333;
	margin: 0 0 24px;
}

.article-usage__content p:last-child {
	margin-bottom: 0;
}

/* 記事利用規約セクション h5 */
.article-usage__content h5 {
	font-size: 18px;
	font-weight: 700;
	line-height: 30px;
	color: black;
	margin: 24px 0 8px;
}

.article-usage__content h5:first-child {
	margin-top: 0;
}

.article-usage__content a {
	color: var(--d1-col-main);
	text-decoration: underline;
}

.article-usage__content a:hover {
	text-decoration: none;
}

/* コメントエリア背景色 */
.single-after-content .comments-area {
	background-color: var(--d1-col-bg2);
	border-radius: 16px;
}

/* コメントなし表示エリア */
.single-after-content .no-comments {
	padding-left: 2.5em;
	padding-right: 2.5em;
}

/* ピンバックの上下マージン */
.single-after-content .comments-area .pingback p {
	margin-top: 1em;
	margin-bottom: 1em;
}


/* コメントフォーム入力欄 */
.single-after-content .comments-area textarea#comment,
.single-after-content .comments-area textarea,
.single-after-content .comments-area input[type="text"],
.single-after-content .comments-area input[type="email"],
.single-after-content .comments-area input[type="url"] {
	border-radius: 8px !important;
}

/* コメントフォーム投稿ボタン */
.single-after-content .comments-area #comments .submit,
.single-after-content .comments-area input[type="submit"] {
	background-color: var(--d1-col-main) !important;
	border-color: var(--d1-col-main) !important;
	color: white !important;
	height: 48px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 8px 24px !important;
	line-height: 1 !important;
	border-radius: 24px !important;
	transition: all 0.3s ease !important;
	will-change: transform;
}

.single-after-content .comments-area #comments .submit:hover,
.single-after-content .comments-area input[type="submit"]:hover {
	opacity: 0.9 !important;
	transform: scale(1.05) !important;
}

/* ==========================================================================
   SNS Share Buttons
   ========================================================================== */

.single-share-top {
	display: flex;
	justify-content: flex-end;
}

.single-share-bottom {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	float: right;
	margin-bottom: 40px;
}

.single-share-bottom::after {
	content: "";
	display: block;
	clear: both;
}

.single-after-content .article-usage {
	clear: both;
}

/* ==========================================================================
   Tags
   ========================================================================== */

.single-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 96px;
}

.single-tags a.single-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 24px;
	background-color: var(--d1-col-bg2);
	color: var(--d1-col-main);
	font-size: 24px;
	font-weight: 400;
	border-radius: 28px;
	border: 1px solid var(--d1-col-bg2);
	text-decoration: none !important;
	transition: background-color 0.2s, color 0.2s;
}

.single-tags a.single-tag:hover {
	background-color: var(--d1-col-main);
	color: white;
	text-decoration: none !important;
}

/* ==========================================================================
   Tablet (921px以下)
   ========================================================================== */

@media (max-width: 921px) {
	.single-header {
		min-height: auto;
		padding: 48px 0;
	}

	.single-header .container {
		padding: 0 16px;
	}

	.single-header__date {
		font-size: 20px;
		line-height: 40px;
	}

	.single-header__title {
		font-size: 28px;
		line-height: 44px;
	}

	.single-header__note {
		font-size: 16px;
		line-height: 26px;
	}

	.single-content {
		padding: 48px 0 0;
	}

	.single-content .single-article {
		padding: 0 16px;
	}

	.single-after-content {
		padding: 0 16px 96px;
	}

	/* 記事利用規約・コメントエリアは左右パディングを打ち消し */
	.single-after-content .article-usage,
	.single-after-content .comments-area {
		margin-left: -16px;
		margin-right: -16px;
	}
}

/* ==========================================================================
   Mobile (544px以下)
   ========================================================================== */

@media (max-width: 544px) {
	.single-header {
		padding: 32px 0;
	}

	.single-header__date {
		font-size: 16px;
		line-height: 32px;
	}

	.single-header__title {
		font-size: 24px;
		line-height: 36px;
	}

	.single-header__note {
		font-size: 14px;
		line-height: 22px;
	}

	.single-content {
		padding: 32px 0 0;
	}

	.single-after-content {
		padding: 0 16px 64px;
	}

	.single-article h1,
	.single-article h2 {
		font-size: 18px;
		font-weight: 700;
		line-height: 28px;
		padding: 24px 0;
	}

	.single-article h3 {
		font-size: 18px;
		font-weight: 700;
		line-height: 28px;
		padding: 16px 0;
	}

	.single-article h4,
	.expert-comments-closed h4,
	.share-heading,
	.article-usage__content h4 {
		font-size: 18px;
		font-weight: 700;
		line-height: 28px;
		padding: 16px 0;
	}

	.article-usage__content p,
	.article-usage__content h5 {
		font-size: 16px;
		line-height: 26px;
	}

	.single-article p {
		font-size: 16px;
		line-height: 26px;
	}

	.expert-comments-closed__message {
		font-size: 16px;
		line-height: 26px;
	}

	.single-article ul,
	.single-article ol {
		font-size: 16px;
		line-height: 26px;
	}

	/* タグ - スマホ版 */
	.single-tags {
		gap: 11px;
	}

	.single-tags a.single-tag {
		height: 32px;
		padding: 0 16px;
		font-size: 18px;
	}

	/* 投稿コメントボタン - スマホ版 */
	.single-after-content .comments-area #comments .submit,
	.single-after-content .comments-area input[type="submit"] {
		height: 32px !important;
		font-size: 12px !important;
		padding: 8px 16px !important;
	}
}

/* ==========================================================================
   Contact Form 7 Button Styles
   記事本文内に埋め込まれた Contact Form 7 の送信ボタン
   ========================================================================== */

/* 送信ボタンのラッパー（中央寄せ） */
.single-article .wpcf7-submit-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

/* スピナーを通常時は幅なしに（送信中のみ表示） */
.single-article .wpcf7-submit-wrapper .wpcf7-spinner {
	position: absolute;
}

/* 送信ボタン - ベース（PC） */
.single-article .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 8px 32px 8px 48px;
	background-color: var(--d1-col-main);
	color: var(--d1-col-bg);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 16px;
	line-height: 1;
	text-align: center;
	border: none;
	border-radius: 24px;
	cursor: pointer;
	transition: all 0.3s ease;
	will-change: transform;
	-webkit-appearance: none;
	appearance: none;
}

/* ホバー効果 */
.single-article .wpcf7-submit:hover,
.single-article .wpcf7-submit:active {
	opacity: 0.9;
	transform: scale(1.05);
	background-color: var(--d1-col-main);
	color: var(--d1-col-bg);
}

/* フォーカススタイル（アクセシビリティ対応） */
.single-article .wpcf7-submit:focus,
.single-article .wpcf7-submit:focus-visible {
	background-color: var(--d1-col-main);
	color: var(--d1-col-bg);
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* 送信中の状態 */
.single-article .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* ラジオボタン・チェックボックスの選択時の色 */
.single-article input[type="radio"]:checked,
.single-article input[type="checkbox"]:checked {
	accent-color: var(--d1-col-main);
}

/* Contact Form 7 - Mobile (544px以下) */
@media (max-width: 544px) {
	.single-article .wpcf7-submit {
		height: 32px;
		padding: 6px 21px 6px 32px;
		font-size: 12px;
		letter-spacing: 10px;
		border-radius: 16px;
	}
}