@charset "UTF-8";

/*---------------------------
記事へのコメント
---------------------------*/
.div-link{cursor: pointer;}
.ArticleCommentLayout{padding: 20px; border: solid 1px #000; border-radius: 5px; margin-bottom: 20px; }
.ArticleComment__Header{margin: 10px 0; display: flex; flex-wrap: wrap;}
.ArticleComment__UserName{display: flex;}
.ArticleComment__UserIcon{width: 100%; height: 100%; background-position: center center; background-size: cover;}
.ArticleComment__UserIconLayout{display: flex; width: 50px; height: 50px; overflow: hidden; border-radius: 999px; margin-right: 1em; min-width: 50px;}
.ArticleComment__FormHeader{display: flex;}
.ArticleComment__Form{margin: 10px 0; ; border: solid 0px #000;}
.ArticleComment__Form .form-group{margin: 0; width: 100%;}
.ArticleComment__FormInput{display: flex; width: 100%; align-items: center; justify-content: center;}
.ArticleComment__FormInputLayout{display: flex; width: 100%; align-content: center;}
.ArticleComment__FormFooter{display: flex; justify-content: flex-end; align-items: center; margin-top: 10px;}
.ArticleComment__FormSubmitButton{display: flex; align-items: center;}
.ArticleComment__FormCheckBox{display: flex; margin-right: 1em; align-items: center;}
.ArticleComment__Form textarea{resize: vertical; min-height: 5em; font-size: small;}
.ArticleComment__CommentCard{display: flex; margin: 25px 0; border-radius: 5px; border-top: solid 0px #d3e2eb;}
.ArticleComment__CommentChildCard{display: flex; margin-top: 20px; border-radius: 5px;}
.ArticleComment__CommentCard .ArticleComment__Form{display: none;}
.ArticleComment__CommentHeader{display: flex; width: 100%;}
.ArticleComment__UserName{white-space: nowrap;}
.ArticleComment__CommentData{display: block; width: 100%; align-content: center;}
.ArticleComment__CommentBody{padding: 10px 0; word-break: break-word; max-width: 100%;}
.ArticleComment__CommentDate{display: flex; margin-left: 1em; font-size: small;}
.ArticleComment__CommentDelete{display: flex; margin-left: auto; font-size: small;}
.ArticleComment__CommentLayout{display: flex; width: 100%;}
.ArticleComment__CommentFooter{display: flex; justify-content: flex-end;}
.ArticleComment__CommentFooterButtons{display: flex; width: 100%; align-items: center;}
.ArticleComment__Good, .ArticleComment__Bad{margin-right: 2em; display: flex;}
.ArticleComment__GoodButton, .ArticleComment__BadButton{opacity: 0.6; border: 0; margin-right: 5px; cursor: pointer;}
.ArticleComment__GoodButton:hover, .ArticleComment__BadButton:hover{opacity: 1; color: #000;}
.ArticleComment__Reply{margin-right: 1em;}
.ArticleComment__ReplyButton{font-size: x-small; cursor: pointer; opacity: 0.6}
.ArticleComment__ReplyButton:hover{opacity: 1;}
.ArticleComment__DeleteButton{font-size: x-small; cursor: pointer; opacity: 0.6}
.ArticleComment__DeleteButton:hover{opacity: 1;}
.ArticleComment__ButtonOn{opacity: 1; color: #327dff;}
.ArticleComment__DeleteButton:hover{opacity: 0.7;}
.ArticleComment__DeleteButton:active{position: relative; top: 1px; left: 1px;}
.ArticleComment__ReplyDescription{font-size: 12px; padding: 5px 1em;}
.ArticleComment__Total{font-size: x-small; padding: 5px; border: solid 1px #0067b5; color: #0067b5; margin-left: auto;}
#modal_text{background-color: #deecf0; padding: 10px; border-radius: 5px; white-space: pre-line; text-align: left; width: 70%; margin: 0 auto; word-break: break-word;}
.ArticleComment__Header h3{background-color: #000; color: #FFF; padding: 10px 20px; border-radius: 5px; font-size: medium; width: 100%;}
#article_comment_register{margin-bottom: 20px;}
#article_comment_register h3{font-size: large; text-align: center; font-weight: bold;}
#article_comment_register dd{margin: 0; margin-bottom: 20px;}
#article_comment_register .link{text-align: center; font-size: medium; margin: 10px 0;}
#article_comment_register .link a{color: #007ae3;}
@media screen and (max-width: 767px){
	.ArticleCommentLayout{padding: 0 10px;}
	.ArticleComment__Header h3{font-size: small;}
	.ArticleComment__CommentCard{font-size: small; margin: 0; margin: 15px 0;}
	.ArticleComment__UserIconLayout{width: 30px; height: 30px; min-width: 30px;}
	.ArticleComment__CommentDate{margin-left: auto;}
	.ArticleComment__CommentDelete{margin-left: 1em;}
	#modal_text{width: 100%;}
	#article_comment_register h3{font-size: medium;}
	#article_comment_register .link{font-size: small;}
	.ArticleComment__Form textarea{resize: vertical; min-height: 5.5em; font-size: x-small;}
	.ArticleComment__Total{font-size: x-small;}
}