@charset "UTF-8";
/* live */
body.modal-open {
  overflow: hidden;
}

.anime {
  transition: 1s;
}

#quiz {
  width: 100%;
  min-height: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  background: url(../images/quiz_bk.png) center top no-repeat #76C7E0;
  background-attachment: fixed;
}
#quiz .tit {
  text-align: center;
  position: relative;
  height: 420px;
  margin-bottom: -20px;
}
#quiz .tit .tit_img {
  position: absolute;
  left: calc(50% - 535px);
  width: 735px; /* 画像の横幅に合わせて変更 */
  height: 400px; /* 1コマの高さ */
  background: url(../images/quiz_tit.svg) no-repeat 0 0;
  animation: play 3s steps(6) infinite;
  transition: 1s;
}
#quiz .tit .swa_img {
  position: absolute;
  transform: rotate(10deg);
  left: calc(50% + 104px);
  transform: translateX(-500px) rotate(-360deg);
  top: 30px;
  transform: 1s;
  transition-delay: 0.5s;
}
#quiz .tit .swa_img.mov {
  opacity: 1;
  transform: translateX(0px) rotate(10deg);
}
#quiz .mov {
  opacity: 1;
}
#quiz .lead {
  text-align: center;
  width: 100%;
  margin-bottom: 70px;
  position: relative;
  z-index: 2;
}

@keyframes play {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -2400px;
    /* -422px × (コマ数 - 1) の位置まで動かす */
  }
}
#quiz .border {
  border: 5px solid #000;
  border-radius: 30px;
  width: 1400px;
  margin: 0 auto;
  padding: 20px;
  margin-bottom: 70px;
}
#quiz .border .quiz {
  border: 1px solid #000;
  border-radius: 140px;
  padding-top: 88px;
  padding-bottom: 20px;
}
#quiz .border .quiz .vol {
  height: 62px;
  width: 100%;
  text-indent: -9999px;
  position: relative;
  margin-bottom: 30px;
}
#quiz .border .quiz .vol:before {
  content: "";
  width: 100%;
  height: 130px;
  position: absolute;
  top: -144px;
  left: 0;
}
#quiz .border .quiz .question {
  color: #FFF14F;
  font-weight: 900;
  text-align: center;
  font-size: 40px;
  line-height: 60px;
  margin-bottom: 30px;
}
#quiz .border .quiz.vol1 {
  background: #E470A5;
}
#quiz .border .quiz.vol1 .vol {
  background: url(../images/quiz_vol1_mida.svg) center center no-repeat;
}
#quiz .border .quiz.vol1 .vol:before {
  background: url(../images/quiz_vol1.svg) center center no-repeat;
}
#quiz .border .choices {
  display: flex;
  width: 1060px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#quiz .border .choices li {
  width: 340px;
}
#quiz .border .choices li img {
  width: 100%;
  border: 1px solid #000;
}
#quiz .border .choices li p {
  color: #FFF14F;
  font-weight: 900;
  text-align: center;
  font-size: 40px;
  line-height: 60px;
  margin-bottom: 30px;
}
#quiz .about {
  display: flex;
  width: 1300px;
  margin: -18px auto 50px auto;
  gap: 20px;
  position: relative;
  left: -18px;
}
#quiz .entry a {
  display: block;
  width: 940px;
  height: 160px;
  text-indent: -9999px;
  margin: 0 auto;
  background: url(../images/quiz_entry.svg);
  animation: play2 1.5s steps(3) infinite;
}
#quiz .entry a:hover {
  transform: scale(0.95);
}
#quiz .entry.non a {
  opacity: 0.3;
  pointer-events: none;
  animation: none;
}

@keyframes play2 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -480px;
    /* -422px × (コマ数 - 1) の位置まで動かす */
  }
}
/***********************************************************************
「★PC版 CSS★」ブラウザの幅が751px以上ならここの記述が有効になる
**********************************************************************/
@media screen and (min-width: 751px) {
  h2.hama {
    display: none;
  }
  h2.titlogo {
    width: 250px;
    height: 95px;
    background: url(../images/tit.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 5px;
    right: 170px;
  }
} /* PC end */
/***********************************************************************
「★SP版 CSS★」ブラウザの幅が750px以下ならここの記述が有効になる
**********************************************************************/
@media screen and (max-width: 750px) {
  #quiz {
    width: 750px;
    background: url(../images/quiz_bk_sp.png) center top no-repeat #76C7E0;
    margin-top: 100px;
  }
  #quiz .tit {
    height: 620px;
  }
  #quiz .tit .tit_img {
    left: 15px;
  }
  #quiz .tit .swa_img {
    width: 320px;
    top: 300px;
    left: 420px;
  }
  #quiz .border {
    width: 650px;
    padding: 30px;
  }
  #quiz .border .quiz {
    border-radius: 70px;
  }
  #quiz .border .quiz .vol {
    width: 580px;
    margin: 0 auto 30px auto;
  }
  #quiz .border .quiz .question {
    font-size: 36px;
    line-height: 1.5em;
  }
  #quiz .border .choices {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }
  #quiz .border .choices li {
    width: 512px;
  }
  #quiz .border .choices li img {
    height: 240px;
    -o-object-fit: cover;
       object-fit: cover;
    margin-bottom: 20px;
  }
  #quiz .about {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  #quiz .entry a {
    background: url(../images/quiz_entry_sp.svg);
    height: 156px;
    width: 640px;
    animation: play2_sp 1.5s steps(3) infinite;
  }
  #quiz .entry.non a {
    opacity: 0.5;
    pointer-events: none;
    animation: none;
  }
  @keyframes play2_sp {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 0 -468px;
      /* -422px × (コマ数 - 1) の位置まで動かす */
    }
  }
  .sp_bk {
    position: relative;
    z-index: 1;
  }
  .sp_bk::before {
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% + 250px);
    top: -150px;
    z-index: -1;
    left: 0;
    background: url(../images/quiz_bk_sp2.png);
  }
} /* SP end */
/***********************************************************************
■■■■■アニメーション■■■■■
**********************************************************************/