/****************/
/*    spcl04    */
/****************/
.border-spcl04 {
  border: 2px solid #2d2b5b;
}

.fill-spcl04 {
  background-color: #2d2b5b;
  color: #fff;
}

.color-spcl04 {
  color: #2d2b5b;
}

#spcl04-mainvisual {
  background-image: url(../img/04/spcl04-mainvisual-sp.jpg);
  background-size: cover;
  padding: 10vw 5vw 0;
}

#spcl04-sectionvisual01 {
  background-image: url(../img/04/spcl04-visual01-sp.jpg);
  background-size: cover;
}

.balloon-left-spcl04::after {
  background-image: url(../img/04/spcl04-blln-left-tail.svg);
}

.balloon-right-spcl04::after {
  background-image: url(../img/04/spcl04-blln-right-tail.svg);
}

.ic-linkint-spcl04::after {
  background:url(../img/04/ic-linkint-spcl04.svg) no-repeat;
}

#spcl04-comment-area01 {
  height: 280px;
}

#spcl04-comment-area03 {
  height: 340px;
}

#spcl04-balloon01 {
  padding: 25px 35px;
}

/* TAB */
@media (min-width: 421px) {
  #spcl04-mainvisual {
    background-image: url(../img/04/spcl04-mainvisual-tb.jpg);
    padding-top: 12vw;
  }

  #spcl04-sectionvisual01 {
    background-image: url(../img/04/spcl04-visual01-tb.jpg);
  }

  #spcl04-comment-area03 {
    height: 370px;
  }
}

/* PC */
@media (min-width: 641px) {
  #spcl04-mainvisual {
    background-image: url(../img/04/spcl04-mainvisual-pc.jpg);
    padding: 60px 0 0;
  }

  #spcl04-sectionvisual01 {
    background-image: url(../img/04/spcl04-visual01-pc.jpg);
  }

  #spcl04-comment-area01 {
    height: 185px;
  }

  #spcl04-comment-area03 {
    height: 340px;
  }
}

/* large PC */
@media (min-width: 1025px) {
  #spcl04-mainvisual {
    background-image: url(../img/04/spcl04-mainvisual.jpg);
  }

  #spcl04-sectionvisual01 {
    background-image: url(../img/04/spcl04-visual01.jpg);
  }
}


/* print */
@media print {
  #spcl04-mainvisual {
    padding-top: 30px;
  }

  #spcl04-comment-area01 {
    height: 170px;
  }

  #spcl04-comment-area03 {
    height: 310px;
  }
}