@charset "UTF-8";

// .p-comments {}

// コメントリスト
.c-commentList {
	margin: 2rem 0 0;
	font-size: .9rem;

	// li
	.comment {
		margin-top: 1rem;
	}

	// > .comment:not(:last-child),
	> .comment {
		padding: 1rem;
		background-color: var(--ark-color--gray);
	}

	.children {
		margin-left: 1rem;
		padding: 0 0 0 1rem;
		border-left: solid 1px var(--ark-color--border);
	}

	.reply {
		margin-top: .5rem;
	}

}

// article
.comment-body {
	padding: 8px;
}

// コメント主
.comment-author {
	display: flex;
	align-items: center;

	.avatar {
		border-radius: 50%;
	}

	//名前
	.fn {
		margin-left: 1rem;
		font-size: 1.1em;
		//a{}
	}
	// 名前のリンク（サイトURLある時）
	.url {
		color: inherit;
		text-decoration: none;
	}

	//「より」
	.says {
		display: none;
	}
}

// 日付
.comment-metadata {
	margin-top: .25rem;

	a {
		color: inherit;
		font-size: 11px;
		opacity: var(--ark-opacity--thin);
	}

	a:where(:not(:hover)) {
		text-decoration: none;
	}

}

// コメント本文
.comment-content {
	margin-top: 1rem;
	// font-size: 14px;
	line-height: 1.5;

	> :first-child {
		margin-top: 0;
	}

	p {
		margin-top: 1rem;
	}
}

// 「あなたのコメントは承認待ちです。」
.comment-awaiting-moderation {
	display: block;
	margin-top: 1rem;
	font-weight: bold;
	// font-size: .9em;
}

// 「返信」
// .comment-reply-link {}


// コメント入力エリア
.comment-respond {
	margin-top: 2.5rem;
}

.comment-reply-title {
	font-weight: bold;
	font-size: 1rem;
}


// 「メールアドレスが公開されることはありません」
.comment-notes {

	font-size: .75rem;
}

.comment-form {
	margin-top: 1rem;

	p {
		margin-top: 1rem;
	}

	label {
		display: block;
		margin-bottom: .5rem;
		font-weight: bold;
	}

	// 「コメント」を非表示（「コメントを残す」と被る）
	.comment-form-comment {

		label {
			display: none;
		}
	}


	[for="wp-comment-cookies-consent"] {
		font-weight: normal;
	}


	#comment,
	#author,
	#email,
	#url {
		width: 100%;
	}

	.form-submit {
		margin-top: 2rem;
	}

	.submit {
		padding: .5rem 1.5rem;
		color: #fff;
		background-color: var(--ark-color--main);
		border: none;
		transition: opacity .25s;

		&:hover {
			opacity: .75;
		}

	}
}

// 返信キャンセルリンク
#cancel-comment-reply-link {
	margin-left: 1em;
	font-size: .9em;
	font-style: italic;
}

// 「次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。」
.comment-form-cookies-consent {
	display: flex;
	align-items: center;

	label {
		margin-bottom: 0;
		margin-left: .5em;
	}
}

#wp-comment-cookies-consent {
	margin: 0;
}