@charset "UTF-8";

/*==========================
    - 〜479px      ：SP portrait
    - 480px〜599px ：SP landscape
    - 600px〜959px ：tablet
    - 960px〜1279px：small PC
    - 1280px〜     ：large PC
    - 1400px〜     ：largest PC
==========================*/
/* 〜479px：SP portrait
------------------------------ */
/***************************
    container
***************************/
#title-bar {
  background-image: url(../img/h1_sp.png);
}

#block-classroom>.bg {
  background: url(../img/classroom_bg1_sp.png) no-repeat;
  background-size: cover;
}

#block-classroom>.bg:before {
  background: url(../img/classroom_bg2_sp.png) no-repeat;
  background-size: 100%;
}

#block-classroom>.bg:after {
  top: auto;
  bottom: 0;
  background: url(../img/classroom_bg3_sp.png) bottom no-repeat;
  background-size: 100%;
}

#block-classroom>.inner {
  padding: 17px 0 65px;
}

#block-classroom .lead {
  margin: 0 0 40px;
}

#block-classroom .list li {
  font-size: 12px;
}

#block-classroom .list li+li {
  margin: 35px 0 0;
}

#block-classroom .list li h3 {
  font-size: 15px;
}

#block-classroom .list li h3 span {
  font-size: 12px;
}

#block-classroom .list li h4 {
  margin: 0 0 6px;
  font-size: 13px;
}

#block-classroom .list li .photo1 {
  margin: 0 0 20px;
}

#block-classroom .list li .photo2 {
  margin: 20px 0;
}

#block-classroom .voice-column .photo {
  margin-bottom: 16px;
  width: 100%;
}

#block-classroom .voice-column .photo img {
  width: 100%;
}

#block-classroom .voice-column__body>p {
  margin-bottom: 24px;
}

#block-classroom .voice-box {
  background: rgba(255, 255, 255, .4);
  padding: 16px;
  border-radius: 16px;
  box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.05);
}

#block-classroom .voice-box h4 {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 16px;
}

/* 480px〜599px：SP landscape
------------------------------ */
@media screen and (min-width: 414px) {
  /***************************
      container
  ***************************/
}

/* 600px〜959px：tablet
------------------------------ */
@media screen and (min-width: 600px) {
  /***************************
      container
  ***************************/
}

/* 960px〜1279px：small PC
------------------------------ */
@media screen and (min-width: 960px) {

  /***************************
      container
  ***************************/
  #title-bar {
    background-image: url(../img/h1_pc.png);
  }

  #block-classroom>.bg {
    background-image: url(../img/classroom_bg1.png);
  }

  #block-classroom>.bg:before {
    background-image: url(../img/classroom_bg2.png);
  }

  #block-classroom>.bg:after {
    background-image: url(../img/classroom_bg3.png);
  }

  #block-classroom>.inner {
    padding: 40px 0 140px;
  }

  #block-classroom .lead {
    margin: 0 0 70px;
  }

  #block-classroom .list li {
    width: 67.85714285714286%;
    max-width: 950px;
    margin: 0 auto;
    font-size: 16px;
  }

  #block-classroom .list li+li {
    margin: 74px auto 0;
  }

  #block-classroom .list li:nth-child(even) .upper .photo1 {
    float: left;
    margin: 0 20px 20px -23.684210526315788%;
  }

  #block-classroom .list li .upper {
    position: relative;
    margin: 0;
  }

  #block-classroom .list li .upper:after {
    content: '';
    clear: both;
    display: block;
  }

  #block-classroom .list li .upper .photo1 {
    width: 72.63157894736842%;
    float: right;
    margin: 0 -23.684210526315788% 20px 20px;
  }

  #block-classroom .list li .upper h3 {
    font-size: 26px;
    text-align: left;
    letter-spacing: -1px;
  }

  #block-classroom .list li .upper h3 span {
    font-size: 22px;
  }

  #block-classroom .list li .upper h4 {
    margin: 0 0 12px;
    font-size: 24px;
  }

  #block-classroom .list li .photo2 {
    margin: 20px 0 24px;
  }

  #block-classroom .voice {
    width: 67.85714285714286%;
    max-width: 950px;
    margin: 80px auto 0;
    font-size: 16px;
  }

  #block-classroom .voice-column {
    display: flex;
    flex-direction: row-reverse;
  }

  #block-classroom .voice-column .photo {
    margin-left: 40px;
    width: 320px;
    flex: none;
  }

  #block-classroom .voice-column .photo img {
    width: 100%;
  }

  #block-classroom .voice-column__body>p {
    margin-bottom: 24px;
  }

  #block-classroom .voice-box {
    padding: 24px;
  }

  #block-classroom .voice-box h4 {
    font-size: 20px;
  }
}

/* 1280px〜：large PC
------------------------------ */
@media screen and (min-width: 1280px) {
  /***************************
      container
  ***************************/
}

/* 1400px〜：largest PC
------------------------------ */
@media screen and (min-width: 1400px) {
  /***************************
      container
  ***************************/
}