@charset "UTF-8";

/* キャンペーンエリア用 赤パネル */
.g-panel-red {
  background-color: #fff;
  border: 2px solid #f00000;
}

.g-panel-red .g-panel_head {
  background-color: #f00000;
  color: #fff;
}

/* 合格体験記用 BOX型メディアモジュール */
.comment {
  border: 3px solid transparent;
}

.comment-aqua {
  border-color: #d2e5fa;
}

.comment-aqua .g-media_item {
  background-color: #f0f7ff;
}

.comment-aqua .comment_name::after {
  content: " さん";
}

.comment-aqua .g-symbol {
  color: #034ea2;
  margin: 0 auto;
  font-size: 60px;
}

.comment-aqua .g-pane {
  background-color: #f0f7ff;
}

.comment-aqua .g-pane-border {
  border-color: #d2e5fa;
}

.comment-pink {
  border-color: #fad2de;
}

.comment-pink .g-media_item {
  background-color: #fff2f6;
}

.comment-pink .comment_name::after {
  content: " さん";
}

.comment-pink .g-symbol {
  color: #fc88b5;
  margin: 0 auto;
  font-size: 60px;
}

.comment-pink .g-pane {
  background-color: #fff2f6;
}

.comment-pink .g-pane-border {
  border-color: #fad2de;
}

.comment + .comment {
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .comment_school {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
  }
  .comment .g-media_item {
    box-sizing: border-box;
    margin-right: 30px;
    padding: 25px;
    width: 23%;
  }
  .comment.g-media-rv .g-media_item {
    margin-left: 30px;
  }
  .comment .g-media_body {
    padding: 25px 25px 25px 0;
  }
  .comment.g-media-rv .g-media_body {
    padding: 25px 0 25px 25px;
  }
}

.comment .g-card_body {
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .comment_school {
    font-size: 16px;
    font-weight: bold;
  }
  .comment_name {
    margin-top: .8em;
  }
  .comment .g-media_item {
    margin-bottom: 0;
    box-sizing: border-box;
    padding: 15px;
  }
  .comment .g-media_body {
    box-sizing: border-box;
    padding: 15px;
  }
  .comment .g-media_h {
    text-align: left;
  }
}