@charset "UTF-8";
/*!  変数・関数
================================================ */
/*-----------------------------------------------
 main
-----------------------------------------------*/
h2 {
  margin-bottom: 58px; }

/*-----------------------------------------------
 .comment
-----------------------------------------------*/
.comment {
  width: 1000px;
  margin: 0 auto; }

/*-----------------------------------------------
 .tab-list
-----------------------------------------------*/
.tab-list ul {
  display: flex; }
  .tab-list ul li {
    width: 500px;
    height: 77px;
    text-indent: -9999px;
    cursor: pointer; }
    .tab-list ul li:first-child {
      background: url("../img/comment/tab_10th_02-pc.png") no-repeat; }
    .tab-list ul li:nth-child(2) {
      background: url("../img/comment/tab_conclusion_02-pc.png") no-repeat; }
    .tab-list ul li:first-child.active {
      background: url("../img/comment/tab_10th_01-pc.png") no-repeat;
      transition: all 0.2s ease-out; }
    .tab-list ul li:nth-child(2).active {
      background: url("../img/comment/tab_conclusion_01-pc.png") no-repeat;
      transition: all 0.2s ease-out; }

/*-----------------------------------------------
 .comment-area
-----------------------------------------------*/
.comment-area {
  display: none;
  width: 992px;
  margin: 0 auto 80px; }

.comment-area.show {
  display: block; }

.comment-10th {
  padding: 40px 0 60px 0;
  background-color: #fff;
  border-right: 4px solid #91faf8;
  border-bottom: 4px solid #91faf8;
  border-left: 4px solid #91faf8; }
  .comment-10th .inner {
    width: 901px;
    height: 1076px;
    background: url("../img/comment/bg_10th-pc.png") center top no-repeat;
    margin: 0 auto;
    padding: 106px 0 0 70px; }
    .comment-10th .inner p {
      width: 410px;
      font-size: 1.46rem;
      color: #000;
      line-height: 1.9; }
    .comment-10th .inner p.author {
      font-size: 3.2rem;
      color: #3066d9;
      font-weight: bold;
      line-height: 1.4;
      margin: 0 0 65px;
      text-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff; }
      .comment-10th .inner p.author span {
        font-size: 1.8rem; }

.comment-conclusion {
  background: url("../img/comment/bg_img_conclusion.png") center 280px repeat-y;
  padding: 10px 0 50px 0;
  background-color: #fff;
  border-right: 4px solid #fde6fa;
  border-bottom: 4px solid #fde6fa;
  border-left: 4px solid #fde6fa; }
  .comment-conclusion .kv_conclusion {
    text-align: center;
    margin-bottom: 52px; }
    .comment-conclusion .kv_conclusion img {
      width: 977px; }
  .comment-conclusion ul.comment-list1, .comment-conclusion ul.comment-list2 {
    width: 902px;
    margin: 0 auto 75px; }
    .comment-conclusion ul.comment-list1 li, .comment-conclusion ul.comment-list2 li {
      position: relative; }
      .comment-conclusion ul.comment-list1 li .text, .comment-conclusion ul.comment-list2 li .text {
        position: absolute;
        top: 84px;
        left: 37px;
        width: 645px;
        font-size: 1.5rem;
        line-height: 1.94; }
      .comment-conclusion ul.comment-list1 li .author, .comment-conclusion ul.comment-list2 li .author {
        font-size: 3.2rem;
        font-weight: bold;
        text-align: right;
        padding-top: 12px; }
        .comment-conclusion ul.comment-list1 li .author span, .comment-conclusion ul.comment-list2 li .author span {
          font-size: 1.8rem;
          vertical-align: middle;
          font-weight: normal;
          margin-right: 22px; }
  .comment-conclusion ul.comment-list1 li:first-child .author {
    color: #fa7ada; }
  .comment-conclusion ul.comment-list1 li:nth-child(2) .author {
    color: #84cd4e; }
  .comment-conclusion ul.comment-list2 li:first-child .author {
    color: #5783f9; }
  .comment-conclusion ul.comment-list2 li:nth-child(2) .author {
    color: #fa8bb0; }
  .comment-conclusion ul.comment-list2 li:nth-child(3) .author {
    color: #cbb81f; }
  .comment-conclusion ul.comment-list2 li:nth-child(4) .author {
    color: #e64f46; }
  .comment-conclusion ul.comment-list2 li:nth-child(5) .author {
    color: #31968d; }
  .comment-conclusion ul.comment-list2 li:nth-child(6) .author {
    color: #91589b; }
  .comment-conclusion ul.comment-list2 li:nth-child(7) .author {
    color: #665a52; }
  .comment-conclusion ul.comment-list2 li:nth-child(8) .author {
    color: #fa9e31; }
  .comment-conclusion ul.comment-list2 li:nth-child(9) .author {
    color: #59c2dc; }
  .comment-conclusion .comment-text {
    text-align: center; }

@media screen and (max-width: 640px) {
  /*-----------------------------------------------
   main
  -----------------------------------------------*/
  h2 {
    margin-bottom: 11.71875vw; }

  /*-----------------------------------------------
   comment
  -----------------------------------------------*/
  .comment {
    width: 92.1875vw; }

  /*-----------------------------------------------
   .tab-list
  -----------------------------------------------*/
  .tab-list ul li {
    width: 45.78125vw;
    height: 11.875vw; }
    .tab-list ul li:first-child {
      background: url("../img/comment/tab_10th_02-sp.png") no-repeat;
      background-size: contain;
      margin-top: 3.125vw; }
    .tab-list ul li:nth-child(2) {
      background: url("../img/comment/tab_conclusion_02-sp.png") no-repeat;
      background-size: contain;
      margin-top: 3.125vw; }
    .tab-list ul li:first-child.active {
      background: url("../img/comment/tab_10th_01-sp.png") no-repeat;
      background-size: contain;
      margin-top: 0; }
    .tab-list ul li:nth-child(2).active {
      background: url("../img/comment/tab_conclusion_01-sp.png") no-repeat;
      background-size: contain;
      margin-top: 0; }

  /*-----------------------------------------------
   .comment-area
  -----------------------------------------------*/
  .comment-area {
    width: 90.3125vw;
    margin: -3.90625vw auto 13.28125vw; }

  .comment-10th {
    padding: 0 0 4.21875vw 0; }
    .comment-10th .inner {
      width: 79.6875vw;
      height: 210.9375vw;
      background: url("../img/comment/bg_10th-sp.png") center top no-repeat;
      background-size: contain;
      padding: 12.96875vw 0 0 4.0625vw; }
      .comment-10th .inner p {
        width: 76.5625vw;
        font-size: 3.015625vw;
        line-height: 1.75; }
      .comment-10th .inner p.author {
        font-size: 6.203125vw;
        margin: 0 0 9.6875vw; }
        .comment-10th .inner p.author span {
          font-size: 2.75vw; }

  .comment-conclusion {
    padding: 2.1875vw 0 7.8125vw 0; }
    .comment-conclusion .kv_conclusion {
      margin-bottom: 4.21875vw; }
      .comment-conclusion .kv_conclusion img {
        width: 85.9375vw; }
    .comment-conclusion ul.comment-list1, .comment-conclusion ul.comment-list2 {
      width: 82.96875vw;
      margin: 0 auto 11.09375vw; }
      .comment-conclusion ul.comment-list1 li .bg img, .comment-conclusion ul.comment-list2 li .bg img {
        width: 82.65625vw; }
      .comment-conclusion ul.comment-list1 li .text, .comment-conclusion ul.comment-list2 li .text {
        top: 12.8125vw;
        left: 4.21875vw;
        width: 74.0625vw;
        font-size: 3.03125vw;
        line-height: 1.75; }
      .comment-conclusion ul.comment-list1 li .author, .comment-conclusion ul.comment-list2 li .author {
        font-size: 6.203125vw;
        padding-top: 2.1875vw; }
        .comment-conclusion ul.comment-list1 li .author span, .comment-conclusion ul.comment-list2 li .author span {
          font-size: 2.75vw;
          margin-right: 2.03125vw; }

  .text_conclusion01 img {
    width: 71.40625vw; }

  .text_conclusion02 img {
    width: 83.4375vw; } }