.crowi-plus.main-container  {

  %comment-section {
    background: #f5f5f5;
      padding: 1em;
      position: relative;
      margin-left: 4.5em;
      margin-bottom: 1em;
      border-radius: 3px;
      &:before {
        border: 1em solid transparent;
        border-right-color:#f5f5f5;
        border-left-width: 0;
        left: -1em;
        content: "";
        display: block;
        top: 1.5em;
        position: absolute;
        width: 0;
      }
  }

  %picture-rounded {
    position: absolute;
    top: 1em;
    width: 3em;
    height: 3em;
  }

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

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

  .page-comment {
    position: relative;

    // ユーザーアイコン
    .picture.picture-rounded {
      @extend %picture-rounded;
    }

    // コメントセクション
    .page-comment-main {
      @extend %comment-section;
    }

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

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

  .comment-form {
    position: relative;
    margin-top: 2em;
    // ユーザーアイコン
    .picture.picture-rounded {
      @extend %picture-rounded;
    }

    // コメントフォームセクション
    .comment-form-main {
      @extend %comment-section;
    }

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