@charset "utf-8";

/* 基本設定 */


/* コメント・トラックバックのタブ（下線で切り替え。B・C は css/skin-b.css・css/skin-c.css） */
#comment_header { position:relative; margin:20px 0 0; }
#comment_tab { display:flex; gap:24px; margin:0; padding:0; border-bottom:1px solid var(--line); list-style:none; }
#comment_tab li { margin:0; }
#comment_tab li a, #comment_tab li p { display:block; margin-bottom:-1px; padding:12px 0; border-bottom:2px solid transparent; color:var(--sub); font-size:14px; line-height:1.5; text-decoration:none; }
#comment_tab li a:hover { color:var(--ink); }
#comment_tab li.active a { border-bottom-color:var(--ink); color:var(--ink); font-weight:600; pointer-events:none; }
#comment_header #comment_closed p { color:var(--sub); }


/*  コメントの基本部分 */
.commentlist { list-style-type:none; margin:0; padding:0; }
.comment { margin:0; padding:15px 20px; background:#fff; border:1px solid #ddd; }
.comment + .comment { margin-top:15px; }
#comments .post_content { margin:0; padding:0; background:none; font-size:14px; }
.comment > .children { margin-top: 15px; }

/* コメントの情報部分 */
.comment-meta { position:relative; margin:0 0 10px 0; }

.comment-meta-left { float:left; width:100%; }
#comments .avatar { float:left; margin:0 10px 0 0; width:40px; height:40px; border-radius:100%; }
.comment-name-date { padding:10px 0 0 0; height:45px; }
.comment-content { padding: 1px 0; font-size: 14px!important; }

a.admin-url { text-decoration:underline; }
a.guest-url { text-decoration:underline; }

.comment-name-date { margin:0; font-size:12px; }
.comment-date { color:#888; margin:10px 0 0 0; }

.comment-act { font-size:12px; position:absolute; right:0px; padding:0; margin:5px 0 0 0; }
.comment-act li { display:inline; margin:0; }
.comment-reply a, .comment-reply a:visited { border-right:1px solid #aaa; padding:0 10px 0 0; margin:0 6px 0 0; }
.comment-act a:hover, .comment-name-date a:hover { text-decoration:underline; }
.comment-name a:hover { opacity:0.7; }
.comment-edit a, .comment-edit a:visited { border-left:1px solid #aaa; padding:0 0 0 10px; margin:0 0 0 6px; }


/* コメント本文 */
#comments .post_content p { margin:0 0 15px 0; }
#comments .post_content blockquote span { margin:0 0 -1em 0; display:block; }


/* メッセージ、警告文 */
.comment-note { display:block; font-size:11px; margin:0 0 1em 0; color:#33a8e5; border:1px solid #94ddd4; padding:10px 15px; background:#d6f4f0; }
.comment_closed { border:1px solid #ccc; text-align:center; margin:0 35px 15px 0; padding:15px; background:#fefefe; }
.no_comment { padding-bottom:15px; }
.comment_message { margin:18px 0 0; color:var(--sub); font-size:14px; }
.comment_message p { margin:0; }


/* トラックバック */
.commentlist .ping-link { margin:0 0 25px 0; }
.commentlist .ping-meta { margin:0 0 15px 0; }
#trackback_url_area { margin:0 0 25px 0; }
#trackback_url_area label { font-size:11px; display:block; margin:0 0 5px 0; }
#trackback_url_area input { border:1px solid #ddd; padding:5px 10px; width:100%; }


/* ページナビ */
#comment_pager { margin:0 0 10px; height:24px; }
#comment_pager a, #comment_pager span { display:inline; float:left; margin:0 10px 0 0; }
#comment_pager .current { text-decoration:underline; }


/* コメントフォーム：見出しを上にした入力欄、キーカラーのボタン */
.comment_form_wrapper { margin:0; padding:0; background:none; border:0; }
* + .comment_form_wrapper { margin-top:28px; }
.comment .comment_form_wrapper { margin:0 0 20px; }

/* 押せる範囲を上下に広げる（見た目の位置は同じ） */
#cancel_comment_reply a { display:inline-block; margin:-12px 0 0; padding:12px 0; color:var(--sub); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
#cancel_comment_reply a:hover { color:var(--ink); }

#comment_user_login p { padding:5px 0; margin:0; line-height:1; font-size:12px; }
#comment_user_login span { margin:0 0 0 40px; }

#comment_login { margin:0; padding:3px 30px 10px 30px; }
#comment_login p { margin:0; padding:12px 0 11px 36px; line-height:1; }
#comment_login a { margin:0 0 0 20px; padding:0; }

#guest_info { display:grid; gap:16px; padding:0; width:100%; }
#guest_info div { margin:0; text-align:left; }
#guest_info label { display:block; margin:0 0 6px; padding:0; font-size:13px; color:var(--sub); }
#guest_info span { margin:0 4px 0 0; color:var(--ink); font-weight:600; }
#guest_info input, #comment_textarea textarea { display:block; width:100%; margin:0; padding:0 14px; border:1px solid #ccc; border-radius:0; background:#fff; box-sizing:border-box; color:var(--ink); font-size:15px; }
#guest_info input { height:48px; }
#comment_textarea { margin:16px 0 0; }
#comment_textarea textarea { height:160px; padding:12px 14px; overflow:auto; }
#guest_info input:focus, #comment_textarea textarea:focus { border-color:var(--ink); outline:0; }

#submit_comment_wrapper { margin:24px 0 0; text-align:center; }
#submit_comment { display:block; width:260px; height:52px; margin:0 auto; border:0; border-radius:999px; background:var(--key); color:var(--on-key); font-size:15px; font-weight:600; cursor:pointer; transition:background .2s; }
#submit_comment:hover { background:var(--key-ink); }

#input_hidden_field { display:none; }


/* パスワード保護 */
.password_protected { text-align:center; margin:0 38px 30px; padding:10px 20px; color:#fff; background:#3db4b2; border-radius:5px; }
.password_protected p { font-size:12px; margin:0; line-height:1.6; }

@media screen and (max-width:767px) {
	#submit_comment { width:100%; }
}