weseek__growi/resource/css/_comment_crowi-plus.scss

.crowi-plus.main-container  {

  .page-comments-row {
    border-top: 5px solid #f0f0f0;
    margin: 30px 16px;
  }

  .page-comments {
    h4 {
      margin-bottom: 1em;
    }
  }

  .page-comment {
    position: relative;

    // ユーザーアイコン
    .picture.picture-rounded {
      position: absolute;
      top: 1em;
      width: 3em;
      height: 3em;
    }

    // コメントセクション
    .page-comment-main {
      background: #f5f5f5;
      padding: 1em;
      position: relative;
      margin-left: 4.5em;
      margin-bottom: 1em;
      border-radius: 3px;
      &:before {
        border: 2em solid transparent;
        border-right-color:#f5f5f5;
        border-left-width: 0;
        left: -1em;
        content: "";
        display: block;
        top: 0.5em;
        position: absolute;
        width: 0;
      }
    }

    // コメント本文
    .page-comment-body {
      margin-bottom: 0.5em;
    }

    // ユーザー名
    .page-comment-creator {
      margin-bottom: 0.5em;
    }
  }

  .comment-form {
    position: relative;
    margin-top: 2em;
    // ユーザーアイコン
    .picture.picture-rounded {
      position: absolute;
      top: 1em;
      width: 3em;
      height: 3em;
    }

    // コメントフォームセクション
    .comment-form-main {
      margin-left: 4.5em;
      margin-bottom: 1em;
      background: #f5f5f5;
      padding: 1em;
      position: relative;
      border-radius: 3px;
      &:before {
        border: 2em solid transparent;
        border-right-color:#f5f5f5;
        border-left-width: 0;
        left: -1em;
        content: "";
        display: block;
        top: 0.5em;
        position: absolute;
        width: 0;
      }
    }

    // コメントの吹き出しアイコン
    .comment-ico {
      font-size: 1.2em;
      margin-right: 0.3em;
      opacity: 0.6;
    }

    // コメント入力フォーム
    .comment-write {
      margin-bottom: 0.5em;
    }
  }
}