@charset "utf-8";

:root {
  --srffont: "DotGothic16", sans-serif;
  --font: "Kaisei Decol", serif;
  --hovercolor: #f0f;
}

img {
  width: 100%;
}

header {
  text-align: center;
  margin: 0 auto;
  padding: 60px 0;
  background-image: url(../image/Quiz/bg/header_bg.jpg);
  background-position: center center;
  border-bottom: 5px solid #fff;
}

header h1 {
  font-size: 60px;
  font-family: var(--srffont);
  color: #eee;
  /* border: 1px solid #000; */
}

h2 {
  text-align: center;
  margin: 20px auto;
  font-size: 50px;
  padding: 15px;
  letter-spacing: 0.2rem;
  font-family: var(--font);
  color: #fff;
  font-weight: bold;
}

/* h2 span {
  padding: 0 130px;
  border-bottom: 5px solid #0ff;
  background-color: rgba(200, 200, 200, .7);
} */

#Quiz_site {
  margin: 0 auto;
  text-align: center;
  background-image: url(../image/bg/Quiz_bg.png);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

#aori_text {
  font-size: 50px;
  color: #ddd;
}

#question1,
#question2,
#question3,
#question4,
#question5 {
  border-bottom: 5px solid rgba(255, 255, 255, .9);
  padding: 60px 5%;
}

.question_wrap {
  border: 30px ridge #999;
  padding: 20px;
  /* background: rgba(125, 125, 125, .8); */
  border-image: url(../image/frame/cyber_frame.png);
  border-image-slice: 100 fill;
  border-radius: 10%;
}


#Quiz_site .question {
  margin: 10px 25%;
  font-size: 50px;
  font-family: var(--srffont);
  font-weight: bold;
  background-color: #f7ae49;
}

#Quiz_site .question .level {
  font-size: 24px;
  font-family: var(--font);
  font-weight: normal;
  background-color: #eee;

}

#Quiz_site img {
  border: 8px ridge #f55;
  max-width: 750px;
  width: 80%;
  max-height: 500px;
  height: 100%;
  padding: 15px;
  background-color: #ddd;
}

#q_img1,
#q_img2,
#q_img3,
#q_img4,
#q_img5 {
  visibility: hidden;
}

.q_img {
  animation: QImageScale 1s linear forwards;
}

#Quiz_site input[type="text"] {
  margin: 20px auto;
  border: 5px double #f00;
  max-width: 550px;
  width: 100%;
  max-height: 100px;
  height: 100%;
  background-color: #fff;
  font-size: 30px;
}

#Quiz_site button {
  background-color: #f18e1d;
  border: 5px double #f00;
  border-radius: 5px;
  font-size: 50px;
  font-weight: bold;
  padding: 20px 15%;
  margin: 10px auto;
}

#Quiz_site details {
  margin: 10px auto;
  font-size: 30px;
  max-width: 400px;
  width: 100%;
  border: 1px solid #000;
  background-color: rgb(249, 175, 0);
  line-height: 1.3;
}

#Quiz_site summary {
  position: relative;
  background-color: #ff3700;
}

#Quiz_site summary::after {
  position: absolute;
  /* border: 1px solid #f00; */
  content: "";
  background-image: url(../image/icon/hinto.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 10%;
  height: 100%;
}

#Quiz_site details ol {
  list-style: upper-roman;
  list-style-position: inside;
}

#Quiz_site details li {
  padding: 0 10px;
  font-size: 25px;
  text-align: left;
  line-height: 1.3;
}

#ans_mask {
  background: rgba(0, 0, 0, .6);
  position: fixed;
  inset: 0;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
}

.seikai_close,
.fuseikai_close {
  background: #eb8;
  border: 3px solid #f00;
  border-radius: .5rem;
  padding: 1rem 6rem;
  cursor: pointer;
  font-size: 35px;
  margin-top: 65px;
}

.modal {
  font-size: 100px;
  max-width: 600px;
  width: 80%;
  padding: 4rem;
  border-radius: .5rem;
  position: fixed;
  inset: 25% 0 auto;
  margin: auto;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
}

#seikai_modal {
  background: #ff3700;
}

#fuseikai_modal {
  background: #0045ff;
}

footer {
  text-align: center;
  font-size: 36px;
}

footer img{
  width: 7%;
  margin: 5px 20px;
  background: #000;
  padding: 3px;
  border-radius: 5px;
}
/* アニメーション関連******************************************************************************** */
@keyframes QImageScale {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }

}
/* アニメーション関連終了******************************************************************************** */

/* レスポンシブデザイン関連******************************************************************************** */
@media screen and (max-width:840px) {
  #Quiz_site .question {
    font-size: 26px;
    margin: 0 auto;
  }

  #Quiz_site .question .level {
    font-size: 16px;
  }

  #Quiz_site img {
    margin: 20px 0 0 0;
    width: 95%;
    height: 60%;
    padding: 5px;
  }

  #Quiz_site input[type="text"] {
    width: 80%;
    height: 50px;
    font-size: 20px;
  }

  #Quiz_site button {
    font-size: 24px;
  }

  #Quiz_site details {
    font-size: 20px;
    width: 70%;
  }

  .modal {
    font-size: 50px;
  }
}

/* レスポンシブデザイン関連終了******************************************************************************** */