@charset "UTF-8";
/* CSS Document */
.section-voice-main {
  display: flex;
  justify-content: center;
}
.section-voice-main-wrap {
  margin: 12.5vw -11.88vw 8.33vw 0;
  position: relative;
}
.image-container {
  width: 36.81vw;
  height: 34.72vw;
  background: #171717;
  box-shadow: 4px 4px 10px 0px rgba(17, 17, 17, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-container img {
  width: 32.15vw;
  height: 31.39vw;
  object-fit: cover;
}
.theme-container {
  position: absolute;
  bottom: 0;
  left: -11.88vw;
}
.voice-mv {
  display: block;
  width: 16.39vw;
  height: 6.88vw;
}
.voice-mv-sp {
  display: none;
}
@media screen and (max-width: 770px) {
  .section-voice-main-wrap {
    margin: 38.76vw -23.2vw 26.67vw 0;
    position: relative;
  }
  .image-container {
    width: 53.33vw;
    height: 46.93vw;
    background: #171717;
    box-shadow: 4px 4px 10px 0px rgba(17, 17, 17, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .image-container img {
    width: 46.4vw;
    height: 45.07vw;
    object-fit: cover;
  }
  .theme-container {
    position: absolute;
    bottom: 0;
    left: -23.2vw;
  }
  .voice-mv {
    display: none;
  }
  .voice-mv-sp {
    display: block;
    width: 32.8vw;
    height: 15.2vw;
  }
}
.voice {
  margin: 0 13.89vw 8.33vw;
}
.voice-01, .voice-02, .voice-03, .voice-04 {
  position: relative;
  height: 31.88vw;
  margin-bottom: 6.94vw;
}
.voice_text {
  width: 60.42vw;
  height: 17.36vw;
  background: linear-gradient(90deg, #D4C02A 0%, rgba(212, 192, 42, 0.50) 44.09%, rgba(212, 192, 42, 0.03) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.voice_comment, .voice_name {
  font-size: 1.25vw;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
  padding-left: 4.72vw;
  width: 45.14vw;
}
.voice_comment span {
  font-size: 2.5vw;
  font-style: normal;
  font-weight: 500;
}
.voice_name {
  text-align: end;
}
.voice_img {
  position: absolute;
  right: 0;
  top: 8.68vw;
  text-align: end;
}
.voice_img img {
  width: 20.83vw;
  height: 20.83vw;
  object-fit: cover;
  border: 1px solid #000b22;
}
.voice_img p {
  padding-top: 0.69vw;
  font-size: 1.11vw;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media screen and (max-width: 770px) {
  .voice {
    margin: 0 6.4vw 21.33vw 0;
  }
  .voice-01, .voice-02, .voice-03, .voice-04 {
    position: relative;
    height: 119.73vw;
    margin-bottom: 16vw;
  }
  .voice_text {
    width: 80vw;
    height: 66.67vw;
    background: linear-gradient(90deg, #D4C02A 0%, rgba(212, 192, 42, 0.50) 44.09%, rgba(212, 192, 42, 0.03) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .voice_comment, .voice_name {
    font-size: 3.47vw;
    font-style: normal;
    font-weight: 500;
    line-height: 180%;
    padding-left: 6.4vw;
    width: 66.67vw;
  }
  .voice_comment span {
    font-size: 8vw;
    font-style: normal;
    font-weight: 500;
  }
  .voice_name {
    text-align: end;
  }
  .voice_img {
    position: absolute;
    right: 0;
    top: 58.67vw;
    text-align: end;
  }
  .voice_img img {
    width: 48vw;
    height: 48vw;
    object-fit: cover;
    border: 1px solid #000b22;
  }
  .voice_img p {
    padding-top: 1.33vw;
    font-size: 3.2vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
}
.lesson-movie {
  margin-bottom: 6.94vw;
}
.youtube {
  margin: 0 auto;
  width: 55.56vw;
}
.youtube iframe {
  width: 100%;
  height: 34.72vw;
}
.youtube p {
  margin-top: 0.69vw;
  font-size: 1.25vw;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
}
@media screen and (max-width: 770px) {
  .lesson-movie {
    margin-bottom: 21.33vw;
  }
  .youtube {
    margin: 0;
    width: 100vw;
  }
  .youtube iframe {
    width: 100%;
    height: 66.67vw;
  }
  .youtube p {
    font-size: 4vw;
    font-style: normal;
    font-weight: 500;
    line-height: 180%;
    width: 87.2vw;
    margin: 5.33vw auto 0;
  }
}