@charset "utf-8";

@media (max-width: 750px) {
  .container,
  .key_visual h1,
  .key_visual .lead,
  .apply-about,
  .voices-box li,
  .apply .school-card {
    width: auto;
  }

  .key_visual .lead,
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .key_visual {
    height: 450px;
    background-image: url(../images/key_visual_sp.png);
    background-attachment: scroll;
  }

  .key_visual .kv_container {
    left: 0;
    transform: translate(0, -50%);
  }
  .key_visual h1 {
    font-size: 35px;
    background-size: contain;
    line-height: 1.43;
  }
  .key_visual h1 span,
  .main h2 span {
    display: block;
  }

  section h2 {
    font-size: 24px;
    line-height: 1.5;
  }

  .boxes,
  .apply ul {
    flex-direction: column;
  }

  .box {
    width: 100%;
  }
  .box + .box {
    margin-top: 30px;
  }

  .voices {
    background: url(../images/back.png) no-repeat
      center / contain bottom scroll #f4f3f3;
  }

  .voice > h4,
  .voice > p {
    display: none;
  }

  .voices-box {
    margin-top: 38px;
  }

  .voices-box li {
    box-shadow: 5px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 25px;
  }

  .voices-box li a {
    padding: 20px;
  }

  .voices-box li .meta img {
    width: 80px;
  }

  .voices-box li .meta .text {
    width: 100%;
    margin-left: 15px;
    align-self: center;
  }

  section h2 + p {
    text-align: left;
  }

  /* section h2+p br {
    display: none;
} */
  .apply .school-card {
    padding: 30px;
  }

  .apply .school-card + .school-card {
    margin-top: 20px;
  }

  .apply .school-card h3 {
    font-size: 19px;
    margin-bottom: 20px;
  }

  .apply .school-card dl dt {
    width: 55px;
  }
  .apply .school-card dl dd {
    width: calc(100% - 55px);
  }

  .apply-about dl {
    margin-bottom: 20px;
  }
  .apply-about dl dd {
    margin-left: 15px;
    line-height: 1.8;
  }
  .apply-about dl dt,
  .apply-about dl dd {
    margin-bottom: 15px;
  }

  /* --- Buttons --- */
  .button-large {
    width: 100%;
    /* height: 60px; */
    line-height: 60px;
  }

  .button-middle {
    width: 255px;
    /* height: 60px; */
    line-height: 50px;
  }
  .button-large,
  .button-middle {
    font-size: 18px;
  }

  .button-middle a::after,
  .button-large a::after {
    width: 7px;
    height: 7px;
    right: 10px;
  }

  .button-small {
    width: 100%;
    line-height: 40px;
    margin-top: 10px;
  }
  /* --- Buttons End --- */
}