.crowi-plus.main-container  {

  %comment-section {
    position: relative;
    background: #f5f5f5;
    padding: 1em;
    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 {
    float: left;
    margin-top: 0.8em;
    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;

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

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

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

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

    .page-comment-meta {
      color: #999;
      font-size: .9em;
      text-align: right;

      * {
        vertical-align: 25%;
      }
    }

    .page-comment-control {
      position: absolute;
      display: none;    // default hidden
      top: 0;
      right: 0;
    }

  }

  // show when hover
  .page-comment-main:hover > .page-comment-control {
    display: block;
  }

  .page-comment-old {
    opacity: .7;

    &:hover {
      opacity: 1;
    }
  }

  .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;
    }
  }
}