/* /comment_system/css/comments.css */
#comments {
  border-top: 1px solid #ddd;
  margin-top: 0rem;
  padding-top: 1rem;
  font-family: 'メイリオ' , '游ゴシック medium','ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' , sans-serif;
}

/* コメント一覧全体の幅を 100% に */
#commentList {
  width: 100%;
}

#comments h3, #comments h4 {
  margin: 0 0 .5rem;
  font-weight: 600;
  font-size: 1.1rem;
}

#commentForm .field {
  margin-bottom: .75rem;
}

#commentForm label {
  display: block;
  margin-bottom: .25rem;
}

#commentForm input[type="text"],
#commentForm textarea {
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
  padding: .5rem;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 1.0rem;
}

#commentForm .help {
  color: #666;
  font-size: .85rem;
  margin-top: .25rem;
}

#commentForm button {
  padding: .5rem .9rem;
  background: #2c7be5;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#commentForm button:hover { background: #1b6bd8; }

#commentForm .msg {
  margin-top: .5rem;
  color: #fb2a2a; /* 修正前 #0a7 */
  font-size: .95rem;
}

#commentList ul.comments {
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
}
#commentList li.comment {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: .6rem .75rem;
  margin-bottom: .6rem;
  background: #fafafa;
}
#commentList li .meta {
  display: flex;
  gap: .75rem;
  font-size: .9rem;
  color: #555;
  margin-bottom: .25rem;
}
#commentList .meta .name { font-weight: 600; }
#commentList .meta .datetime { margin-left: auto; }
#commentList li .body { line-height: 1.6; word-wrap: break-word; }

#commentList li.empty, #commentList li.error {
  color: #777;
  padding: .5rem;
}