@charset "UTF-8";

/* PC */
@media (min-width: 768px) {

  /* トップ動画 */
  #kv .button-wrapper {
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  /* クイズ開閉パネル */
  .quiz-show-pannel {
    pointer-events: none;
  }

  .quiz-iframe {
    display: block;
  }

  .quiz-iframe.show {
    display: block;
  }
}

/* スマホ */
@media (max-width: 767px) {

  /* 動画 */
  #kv {
    margin-bottom: 60px;
  }

  #kv .button-wrapper p {
    width: 50%;
  }

  #kv h1 {
    color: #00a23f;
    text-shadow: none;
  }

  .ec-sp-license-content {
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 40px;
  }

  .ec-sp-license-content img.top_license01-image {
    top: 0px;
    position: unset;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  /* クイズジェネレータの特徴02 */
  .make-quiz-3ways ul li {
    display: block;
  }

  ul.dot-green li {
    font-size: 14px;
  }

  /* もっと便利に使おう */
  .more-convenient {
    background-image: none;
  }

  .quizgenerator .top_learningbox01-image {
    width: 200px;
    height: 300px;
    margin: 0 auto;
    object-fit: cover;
    object-position: top;
    font-family: "object-fit: cover; object-position: top;";
    /* IE対策 */
  }

  .quizgenerator .top_learningbox02-image {
    width: 120px;
    height: 120px;
    top: -90px;
    left: 60%;
  }

  /* 活用シーン */
  .quiz-show-pannel {
    cursor: pointer;
  }

  .quiz-iframe {
    display: none;
    opacity: 0;
  }

  .quiz-iframe.show {
    display: block;
    opacity: 1;
    animation-duration: 0.5s;
    animation-name: fade-in;
    -moz-animation-duration: 0.5s;
    -moz-animation-name: fade-in;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: fade-in;
  }

  .quiz-iframe iframe {
    width: 100% !important;
    max-width: 328px;
  }

  /* 機能紹介 */
  .quizgenerator .top_learningbox04-image {
    margin-top: 0px;
  }

  .ec-sp-license-content {
    margin-top: 120px;
  }
}

/* 吹き出し画像 スマホ画像 start */
@media (max-width: 767px) and (min-width: 521px) {
  .img-features03 {
    top: 400px;
    right: 240px;
  }
}

@media (max-width: 520px) and (min-width: 415px) {
  .img-features03 {
    top: 380px;
    right: 230px;
  }
}

@media (max-width: 414px) and (min-width: 376px) {
  .img-features03 {
    top: 280px;
    right: 150px;
  }
}

@media (max-width: 375px) and (min-width: 321px) {
  .img-features03 {
    top: 260px;
    right: 130px;
  }
}

@media (max-width: 320px) {
  .img-features03 {
    top: 280px;
    right: 90px;
  }
}

@media (max-width: 767px) and (min-width: 521px) {
  .img-features05 {
    top: 220px;
    right: 0px;
  }
}

@media (max-width: 520px) and (min-width: 415px) {
  .img-features05 {
    top: 200px;
    right: 0px;
  }
}

@media (max-width: 414px) and (min-width: 321px) {
  .img-features05 {
    top: 140px;
    right: 0px;
  }
}

@media (max-width: 320px) {
  .img-features05 {
    top: 160px;
    right: -10px;
  }
}

@media (max-width: 767px) {
  .img-features07 {
    right: 0px;
    top: 22%;
  }
}

@media (max-width: 767px) and (min-width: 321px) {
  .img-features09 {
    width: 30%;
    top: 27%;
    left: 10%;
  }
}

@media (max-width: 320px) {
  .img-features09 {
    width: 30%;
    top: 30%;
    left: 10%;
  }
}

/* 吹き出し画像 スマホ画像 end */