@charset "UTF-8";
/*default.scss も合わせる*/
.linklock {
  pointer-events: none;
  cursor: default;
}

#quiz {
  /*sp 用*/
}

#quiz footer {
  position: relative;
  top: -1px;
}

#quiz #main_blocks, #quiz footer {
  background-color: #fd6372;
}

#quiz #main_blocks {
  padding-top: 10vh;
}

#quiz section {
  display: none;
}

#quiz section#description {
  display: block;
}

#quiz section#description h2 {
  width: 90%;
  margin: 0 5%;
}

#quiz section#description .image, #quiz section#description .text {
  top: 20%;
}

#quiz section#description .text {
  width: 100%;
  margin: 0%;
}

#quiz section#description .text p {
  font-size: 90%;
}

#quiz section#description .image {
  margin-top: 10%;
  width: 100%;
}

#quiz section.quiz .book_back {
  padding: 10%;
  position: relative;
}

#quiz section.quiz .inner {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 60%;
}

#quiz section.quiz .inner h2 {
  position: absolute;
  left: 0%;
  top: 5%;
  font-weight: bold;
  background-color: #09d8ea;
  padding: 0 10% 0 5%;
  border-radius: 100px;
}

#quiz section.quiz .inner h2 b {
  position: absolute;
  font-size: 250%;
  bottom: 20%;
  left: 60%;
  line-height: 1;
  color: black;
  -webkit-text-fill-color: white;
  /* （順序に関係なく）色を上書きする */
  -webkit-text-stroke: 3px black;
  font-family: "fot-udmarugo-large-pr6n", sans-serif;
}

#quiz section.quiz .inner .text {
  margin-top: 15%;
  text-align: left;
  font-size: 150%;
  line-height: 1.5;
  font-weight: bold;
  width: 50%;
}

#quiz section.quiz .inner .text .marker_line {
  background-color: #ff9;
}

#quiz section.quiz .inner .text b {
  position: relative;
  display: inline-block;
  text-indent: 0;
  margin-left: 0;
}

#quiz section.quiz .inner .text b:after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: -2px;
  left: 0;
  background: #09d8ea;
  display: inline-block;
}

#quiz section.quiz .inner .text ul {
  text-indent: -.5em;
  margin-left: .5em;
  padding-left: 1em;
  padding-top: 1em;
}

#quiz section.quiz .inner .text ul li {
  line-height: 1.3;
  margin-bottom: 2%;
}

#quiz section.quiz .inner .text ul li:before {
  content: "●";
  display: inline-block;
  margin-right: .5%;
  color: #09d8ea;
}

#quiz section.quiz .inner .items {
  position: absolute;
  width: 100%;
  bottom: 0;
}

#quiz section.quiz .inner .items .item {
  display: flex;
  align-items: center;
  font-size: 150%;
  font-weight: bold;
  width: 100%;
  background-color: #fff4d2;
  padding: 1% 4%;
  border-radius: 200px;
  margin-bottom: 1%;
  cursor: pointer;
  transition: .3s;
}

#quiz section.quiz .inner .items .item.on, #quiz section.quiz .inner .items .item:hover {
  background-color: #09d8ea;
}

#quiz section.quiz .inner .items .item b {
  line-height: 1;
  margin: 0 2% 0 1%;
  padding: 1% 1.2%;
  position: relative;
  background: white;
  border-radius: 50px;
  border: 3px solid black;
  font-weight: 900;
  font-family: "fot-udmarugo-large-pr6n", sans-serif;
}

#quiz section.quiz .inner .items .item.correct {
  position: relative;
}

#quiz section.quiz .inner .items .item.correct:after {
  content: "";
  width: 10%;
  padding-top: 10%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("../img/okiden-quiz/maru.png");
  background-size: cover;
}

#quiz section.quiz .inner .items .item.incorrect {
  position: relative;
}

#quiz section.quiz .inner .items .item.incorrect:after {
  content: "";
  width: 10%;
  padding-top: 10%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("../img/okiden-quiz/batu.png");
  background-size: cover;
}

#quiz section.quiz.question .inner .image {
  position: absolute;
  right: 0;
  width: 50%;
  top: 0;
}

#quiz section.quiz.answer h3 {
  padding-top: 10%;
  font-size: 150%;
  font-weight: bold;
}

#quiz section.quiz.answer h3 b {
  display: block;
}

#quiz section.quiz.answer h3 .item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  padding: 1% 4%;
  border-radius: 200px;
  margin-bottom: 1%;
}

#quiz section.quiz.answer h3 .item b {
  line-height: 1;
  margin: 0 2% 0 1%;
  padding: 1% 1.5%;
  position: relative;
  background: white;
  border-radius: 50px;
  font-weight: 900;
  background-color: #09d8ea;
  font-family: "fot-udmarugo-large-pr6n", sans-serif;
}

#quiz section.quiz.answer .image,
#quiz section.quiz.answer .text {
  padding: 0;
  margin: 0;
  position: relative;
  font-size: 100%;
  max-width: 50%;
}

#quiz section.quiz.answer .text {
  line-height: 1.8;
  padding: 5%;
}

#quiz section.quiz.answer .flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

#quiz section.quiz .next_btn {
  padding: 3% 0;
  text-align: center;
  display: inline-block;
}

#quiz section.quiz .next_btn a,
#quiz section.quiz .next_btn span {
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
  padding: 2%  20px;
  border: 2px solid #fd6372;
  background-color: #fd6372;
  border-radius: 50px;
  cursor: pointer;
  transition: .3s;
}

#quiz section.quiz .next_btn a:hover,
#quiz section.quiz .next_btn span:hover {
  background-color: white;
  color: #fd6372;
}

#quiz section.quiz#q1a .char03 {
  position: absolute;
  bottom: 5%;
  left: 14%;
  width: 15%;
}

#quiz section.quiz#q2 .text {
  width: 70%;
}

#quiz section.quiz#q2 .image {
  width: 30%;
}

#quiz section.quiz#q2a .text {
  max-width: 100%;
  width: 100%;
  padding: 0 5% 0%;
}

#quiz section.quiz#q2a .image {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 30%;
}

#quiz section.quiz#q3 .text {
  width: 60%;
}

#quiz section.quiz#q3 .image {
  width: 40%;
  padding-top: 10%;
}

#quiz section.quiz#q3a .text {
  width: 60%;
  max-width: 60%;
  padding: 2%;
}

#quiz section.quiz#q3a .image {
  width: 40%;
  max-width: 40%;
}

#quiz section.quiz#q4 .text {
  width: 70%;
}

#quiz section.quiz#q4 .image {
  width: 40%;
  right: 5%;
  top: 10%;
}

#quiz section.quiz#q4a .text {
  max-width: 100%;
  width: 100%;
  padding: 0 5% 0%;
}

#quiz section.quiz#q4a .text dl {
  display: flex;
  align-items: center;
  padding: 1% 0;
}

#quiz section.quiz#q4a .text dl dt {
  width: 45%;
  font-size: 110%;
}

#quiz section.quiz#q4a .text dl dd:before {
  content: "→ ";
  color: #09d8ea;
}

#quiz section.quiz#q4a .image {
  position: absolute;
  top: 15%;
  right: 5%;
  width: 25%;
}

#quiz section.quiz#q5 .image {
  width: 40%;
  right: 5%;
  top: 10%;
}

#quiz section.quiz#q5a .text {
  width: 70%;
  max-width: 70%;
  padding: 2%;
}

#quiz section.quiz#q5a .image {
  width: 30%;
  max-width: 30%;
}

#quiz section.quiz#q_harf h2 {
  width: 90%;
  margin: 0 5%;
}

#quiz section.quiz#q_harf .text {
  width: 80%;
  max-width: 80%;
  margin: auto;
  margin-top: 6%;
  padding: 5% 5% 0;
}

#quiz section.quiz#q6 .text {
  width: 30%;
}

#quiz section.quiz#q6 .image {
  width: 60%;
  right: 5%;
  top: 10%;
}

#quiz section.quiz#q6a .flex {
  align-items: flex-end;
}

#quiz section.quiz#q6a .text {
  width: 60%;
  max-width: 60%;
  padding: 2%;
}

#quiz section.quiz#q6a .image {
  width: 40%;
  max-width: 40%;
}

#quiz section.quiz#q7a .text {
  width: 100%;
  max-width: 100%;
  padding: 0 3% 3%;
}

#quiz section.quiz#q7a .flex {
  justify-content: center;
}

#quiz section.quiz#q7a .image.img01 {
  padding: 0 1%;
  width: 35%;
  max-width: 35%;
}

#quiz section.quiz#q7a .image.img02 {
  padding: 0 1%;
  width: 42%;
  max-width: 42%;
}

#quiz section.quiz#q8 .inner h2 b {
  letter-spacing: -10px;
}

@media all and (max-width: 1100px) {
  #quiz section.quiz#q8 .inner h2 b {
    letter-spacing: .5vw;
  }
}

#quiz section.quiz#q8 .image {
  width: 40%;
  right: 10%;
  top: 5%;
}

#quiz section.quiz#q8a .inner h2 b {
  letter-spacing: -10px;
}

@media all and (max-width: 1100px) {
  #quiz section.quiz#q8a .inner h2 b {
    letter-spacing: .5vw;
  }
}

#quiz section.quiz#q8a .flex {
  align-items: center;
}

#quiz section.quiz#q8a .text {
  width: 60%;
  max-width: 60%;
  padding: 3% 5% 0;
}

#quiz section.quiz#q8a .image {
  max-width: 40%;
  width: 40%;
}

#quiz section.quiz#q9 .text {
  width: 60%;
}

#quiz section.quiz#q9 .image {
  width: 40%;
  right: 0%;
  top: 5%;
}

#quiz section.quiz#q9a .flex {
  align-items: center;
}

#quiz section.quiz#q9a .text {
  width: 65%;
  max-width: 65%;
  padding: 3% 5% 0;
}

#quiz section.quiz#q9a .text img {
  max-width: 80%;
  margin-left: 20%;
}

#quiz section.quiz#q9a .image {
  max-width: 35%;
  width: 35%;
  position: relative;
}

#quiz section.quiz#q9a .image .char {
  position: absolute;
  width: 40%;
  top: -40%;
  right: 0;
}

#quiz section.quiz#q10 .text {
  width: 40%;
}

#quiz section.quiz#q10 .image {
  top: 5%;
  width: 60%;
}

#quiz section.quiz#q10a .flex {
  position: relative;
}

#quiz section.quiz#q10a .text {
  width: 100%;
  max-width: 100%;
  padding: 5% 5% 0;
}

#quiz section.quiz#q10a .image {
  width: 40%;
  position: absolute;
  top: 0;
  right: 0;
}

#quiz section.quiz#quiz_end h2 {
  position: relative;
  background: none;
  font-size: 300%;
  padding-top: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#quiz section.quiz#quiz_end h2 b {
  position: relative;
  bottom: 20px;
  left: auto;
  right: 2%;
  font-size: 220%;
  -webkit-text-fill-color: #fd6372;
}

@media all and (max-width: 1100px) {
  #quiz section.quiz#quiz_end h2 b {
    bottom: 2vw;
  }
}

#quiz section.quiz#quiz_end .text {
  padding: 5% 0;
  margin: 0;
  width: 100%;
  text-align: center;
}

#quiz section.quiz#quiz_end .char {
  position: absolute;
  top: 0;
  left: 0;
}

#quiz section.quiz#quiz_end .char.char01 {
  left: auto;
  right: 5%;
  width: 20%;
  top: auto;
  bottom: 10%;
  animation: yurayura 30s ease-in-out infinite alternate;
  opacity: 0;
}

#quiz section.quiz#quiz_end .char.char02 {
  top: 18%;
  right: 10%;
  left: auto;
  width: 20%;
  animation: yurayura 30s ease-in-out infinite alternate;
}

#quiz section.quiz#quiz_end .char.char03 {
  top: auto;
  left: 10%;
  bottom: 10%;
  width: 20%;
  animation: yurayura 30s ease-in-out infinite alternate-reverse;
  opacity: 0;
}

#quiz section.quiz#quiz_end .char.char04 {
  top: auto;
  bottom: 10%;
  left: 8%;
  animation: yurayura 30s ease-in-out infinite alternate-reverse;
  opacity: 0;
}

#quiz section.quiz#quiz_end .char.char06 {
  top: auto;
  width: 50%;
  left: -20%;
  bottom: 5%;
  animation: yurayura 30s ease-in-out infinite alternate-reverse;
}

#quiz section.quiz#quiz_end .char.char07 {
  top: 18%;
  right: 15%;
  left: auto;
  width: 15%;
  animation: yurayura 30s ease-in-out infinite alternate-reverse;
  opacity: 0;
}

#quiz section.quiz#quiz_end.end01 .char {
  opacity: 0;
}

#quiz section.quiz#quiz_end.end01 .char02, #quiz section.quiz#quiz_end.end01 .char06 {
  opacity: 1;
}

#quiz section.quiz#quiz_end.end01 #nintei_dl {
  display: none;
}

#quiz section.quiz#quiz_end.end02 h2 b {
  -webkit-text-fill-color: #b1bbb9;
}

#quiz section.quiz#quiz_end.end02 .char {
  opacity: 0;
}

#quiz section.quiz#quiz_end.end02 .char04, #quiz section.quiz#quiz_end.end02 .char07 {
  opacity: 1;
}

#quiz section.quiz#quiz_end.end02 #nintei_dl {
  display: none;
}

#quiz section.quiz#quiz_end.end03 h2 {
  position: relative;
}

#quiz section.quiz#quiz_end.end03 h2:after {
  content: "";
  width: 20%;
  padding-top: 5%;
  position: absolute;
  left: 50%;
  top: 35%;
  background-image: url(../img/okiden-quiz/star.png);
  transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#quiz section.quiz#quiz_end.end03 h2 b {
  -webkit-text-fill-color: #eab400;
}

#quiz section.quiz#quiz_end.end03 .char {
  opacity: 0;
}

#quiz section.quiz#quiz_end.end03 .char01, #quiz section.quiz#quiz_end.end03 .char03 {
  opacity: 1;
}

#quiz section.quiz#quiz_end.end03 .text {
  padding: 1% 0 3%;
}

#quiz section.quiz#quiz_end.end03 #nintei_dl {
  display: block;
}

#quiz section.quiz#quiz_end.end03 #nintei_dl a {
  padding: 2% 20px;
  display: inline-block;
  color: white;
  align-items: center;
  justify-content: center;
  padding: 1% 0;
  border: 2px solid black;
  background-color: #eab400;
  border-radius: 50px;
  cursor: pointer;
  transition: .3s;
  min-width: 300px;
  font-weight: bold;
}

#quiz section.quiz#quiz_end.end03 #nintei_dl a:hover {
  color: #eab400;
  background-color: white;
}

#quiz #main_blocks {
  min-height: 80vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

@media all and (max-width: 540px) and (orientation: portrait) {
  #quiz section#description h2 {
    line-height: 1.2;
  }
  #quiz section#description .image {
    position: relative;
    width: 80%;
    right: 0;
    margin: auto auto 10%;
  }
  #quiz section.quiz {
    border-radius: 5vw;
    min-height: 60svh;
    background-color: white;
    margin: 5%;
  }
  #quiz section.quiz .book_back {
    padding: 10% 0%;
  }
  #quiz section.quiz .book_back .backimg {
    display: none;
  }
  #quiz section.quiz .inner {
    width: 100%;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
    transform: translate(0, 0);
  }
  #quiz section.quiz .inner h2 {
    position: relative;
  }
  #quiz section.quiz .inner .text {
    width: 100%;
    margin-bottom: 5%;
  }
  #quiz section.quiz .inner p {
    text-align: justify;
  }
  #quiz section.quiz .inner .items {
    position: relative;
  }
  #quiz section.quiz .inner .items .item {
    line-height: 1.2;
    font-size: 120%;
    padding: 4% 4%;
    margin-bottom: 5%;
  }
  #quiz section.quiz .inner .items .item.incorrect:after, #quiz section.quiz .inner .items .item.correct:after {
    width: 20%;
    padding-top: 20%;
  }
  #quiz section.quiz .inner .image {
    position: relative;
    width: 100%;
  }
  #quiz section.quiz .next_btn {
    padding: 10% 0;
  }
  #quiz section.quiz.question .inner .image {
    position: relative;
    width: 50%;
    margin: 5% auto;
  }
  #quiz section.quiz.question .inner .text {
    font-size: 130%;
  }
  #quiz section.quiz.answer h3 .item {
    line-height: 1.2;
  }
  #quiz section.quiz.answer .flex {
    flex-direction: column;
  }
  #quiz section.quiz.answer .flex .text, #quiz section.quiz.answer .flex .image {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q1 .inner .image {
    width: 80%;
  }
  #quiz section.quiz#q1a .char03 {
    position: relative;
    bottom: auto;
    left: auto;
    width: 25%;
    margin: auto;
  }
  #quiz section.quiz#q2 .text {
    width: 100%;
  }
  #quiz section.quiz#q2 .image {
    width: 50%;
  }
  #quiz section.quiz#q2a .image {
    position: relative;
    top: auto;
    right: auto;
    width: 50%;
    margin: auto;
  }
  #quiz section.quiz#q3 .text {
    width: 100%;
  }
  #quiz section.quiz#q3 .image {
    width: 50%;
  }
  #quiz section.quiz#q3a .text {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q3a .image {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q4 .text {
    width: 100%;
  }
  #quiz section.quiz#q4 .image {
    width: 60%;
    right: auto;
    top: auto;
    margin: auto;
  }
  #quiz section.quiz#q4a .text {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q4a .text dl {
    flex-direction: column;
  }
  #quiz section.quiz#q4a .text dl dt, #quiz section.quiz#q4a .text dl dd {
    width: 100%;
  }
  #quiz section.quiz#q4a .text dl dd:before {
    content: "↓";
    display: block;
    text-align: center;
  }
  #quiz section.quiz#q4a .image {
    position: relative;
    top: auto;
    right: auto;
    width: 50%;
    margin: auto;
  }
  #quiz section.quiz#q5 .text {
    width: 100%;
  }
  #quiz section.quiz#q5 .image {
    width: 80%;
    right: auto;
    top: auto;
    margin: 15% auto auto;
  }
  #quiz section.quiz#q5a .text {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q5a .image {
    width: 80%;
    max-width: 80%;
    margin: auto;
  }
  #quiz section.quiz#q_harf h2 {
    line-height: 1.2;
    padding: 3% 0;
  }
  #quiz section.quiz#q_harf .text {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q6 .text {
    width: 100%;
  }
  #quiz section.quiz#q6 .image {
    width: 80%;
    right: auto;
    top: auto;
    margin: 15% auto auto;
  }
  #quiz section.quiz#q6a .flex {
    flex-direction: column;
  }
  #quiz section.quiz#q6a .text {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q6a .image {
    width: 80%;
    max-width: 80%;
    margin: auto;
  }
  #quiz section.quiz#q7 .image {
    width: 80%;
    right: auto;
    top: auto;
    margin: 15% auto auto;
  }
  #quiz section.quiz#q7a .image.img01 {
    width: 80%;
    max-width: 80%;
    text-align: center;
    margin: auto auto 10%;
  }
  #quiz section.quiz#q7a .image.img02 {
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin: auto auto;
  }
  #quiz section.quiz#q8 .image {
    width: 80%;
    right: auto;
    top: auto;
    margin: 15% auto auto;
  }
  #quiz section.quiz#q8a .text {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q8a .image {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q9 .text {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q9 .image {
    width: 80%;
    right: auto;
    top: auto;
    margin: 15% auto auto;
  }
  #quiz section.quiz#q9a .text {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q9a .image {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q9a .image .char {
    position: absolute;
    width: 20%;
    top: -35%;
    right: auto;
  }
  #quiz section.quiz#q10 .text {
    width: 100%;
  }
  #quiz section.quiz#q10 .image {
    width: 80%;
    right: auto;
    top: auto;
    margin: 15% auto auto;
  }
  #quiz section.quiz#q10a .text {
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#q10a .image {
    position: relative;
    width: 100%;
    max-width: 100%;
  }
  #quiz section.quiz#quiz_end {
    padding: 5%;
  }
  #quiz section.quiz#quiz_end .char.char01 {
    width: 10%;
    bottom: 5%;
  }
  #quiz section.quiz#quiz_end .char.char02 {
    right: 1%;
    width: 20%;
    top: 0;
  }
  #quiz section.quiz#quiz_end .char.char03 {
    bottom: 5%;
    left: 5%;
  }
  #quiz section.quiz#quiz_end .char.char04 {
    width: 13%;
    bottom: 5%;
    left: 3%;
  }
  #quiz section.quiz#quiz_end .char.char06 {
    left: -20%;
    bottom: 0%;
    width: 50%;
  }
  #quiz section.quiz#quiz_end .char.char07 {
    width: 20%;
    top: 0%;
    right: 5%;
  }
  #quiz section.quiz#quiz_end.end03 h2 b {
    font-size: 150%;
  }
  #quiz section.quiz#quiz_end.end03 h2:after {
    top: 15%;
    width: 50%;
    padding-top: 15%;
  }
  #quiz section.quiz#quiz_end.end03 #nintei_dl {
    padding: 10% 0;
  }
  #quiz section.quiz#quiz_end.end03 #nintei_dl a {
    width: 60vw;
    min-width: auto;
    padding: 3% 0;
  }
}