/** @format */

@charset 'UTF-8';

body {
  background-color: #000;
  text-align: center;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  font-family: "Sawarabi Gothic";
  overscroll-behavior-y: none;
}

img {
  max-width: 100%;
}

/*　TOPページ--------------*/
.lesson_op {
  max-width: 900px;
  background: url(../images/op_bg.png) no-repeat;
  background-size: 100%;
  position: relative;
  padding-bottom: 2rem;
}
.op_read {
  position: absolute;
  width: 15vw;
  top: 40vw;
  right: 5vw;
}

/*　コンテンツ幅--------------*/
.contents_op {
  padding: 65vw 0 30px 0;
  margin: 0 auto;
  width: 85%;
}
.contents_op div {
  margin-bottom: 13%;
}
.contents {
  margin: 0 auto;
  width: 85%;
}

/*　質問ページ--------------*/
.q_icon {
  width: 50%;
  margin: 0 auto;
}
.answer {
  width: 30%;
  margin: 2rem auto;
}
.q_txt {
  font-size: 5vw;
  text-align: left;
  margin: 1.3rem auto;
  width: 90%;
}
.lesson_q1 {
  max-width: 900px;
  background: url(../images/q1_bg.jpg) no-repeat;
  background-size: cover;
  padding-bottom: 5rem;
}
.lesson_q2 {
  max-width: 900px;
  background: url(../images/q2_bg.jpg) no-repeat;
  background-size: cover;
  padding-bottom: 5rem;
}
.lesson_q3 {
  max-width: 900px;
  background: url(../images/q3_bg.jpg) no-repeat;
  background-size: cover;
  padding-bottom: 5rem;
}
.lesson_q4 {
  max-width: 900px;
  background: url(../images/q4_bg.jpg) no-repeat;
  background-size: cover;
  padding-bottom: 5rem;
}

/*　ボタンリスト--------------*/
ul li a {
  display: block;
  padding: 2rem;
  text-decoration: none;
  color: #000;
  text-align: left;
  font-size: 1.2rem;
}
ul li a:hover {
  text-decoration: none;
  color: #000;
}

/*　ボタン背景--------------*/
ul li:nth-child(1) {
  margin: 0 auto 1rem;
  background: #fffe55 url(../images/bg_a1.png) no-repeat top 50% left 3%;
  background-size: 30px;
  padding-left: 5%;
  transition: all 0.5s;
}
ul li:nth-child(2) {
  margin: 0 auto 1rem;
  background: #fffe55 url(../images/bg_a2.png) no-repeat top 50% left 3%;
  background-size: 30px;
  padding-left: 5%;
}
ul li:nth-child(3) {
  margin: 0 auto 1rem;
  background: #fffe55 url(../images/bg_a3.png) no-repeat top 50% left 3%;
  background-size: 30px;
  padding-left: 5%;
}
ul li:nth-child(4) {
  margin: 0 auto 1rem;
  background: #fffe55 url(../images/bg_a4.png) no-repeat top 50% left 3%;
  background-size: 30px;
  padding-left: 5%;
}

/*　ボタン背景ロールオーバー --------------*/
ul li:nth-child(1):hover {
  background: #ffffff url(../images/bg_a1.png) no-repeat top 50% left 3%;
  background-size: 30px;
  padding-left: 5%;
}
ul li:nth-child(2):hover {
  background: #ffffff url(../images/bg_a2.png) no-repeat top 50% left 3%;
  background-size: 30px;
  padding-left: 5%;
}
ul li:nth-child(3):hover {
  background: #ffffff url(../images/bg_a3.png) no-repeat top 50% left 3%;
  background-size: 30px;
  padding-left: 5%;
}
ul li:nth-child(4):hover {
  background: #ffffff url(../images/bg_a4.png) no-repeat top 50% left 3%;
  background-size: 30px;
  padding-left: 5%;
}

/*　最終設問ページ--------------*/
.q_fin {
  background: url(../images/q_fin.png) no-repeat top center;
  background-size: cover;
  position: relative;
  padding-bottom: 5rem;
  text-align: left;
}

/*　正解ページ--------------*/
.lesson_correct {
  background: url(../images/correct_bg.png) no-repeat;
  background-size: 100%;
  position: relative;
  padding-bottom: 5rem;
}
.correct_ttl {
  width: 60%;
  padding-top: 5%;
  margin: 0 auto;
}
.correct_read {
  position: absolute;
  width: 12vw;
  top: 40vw;
  right: 8vw;
}
.correct_txt {
  width: 30%;
  margin: 0 auto;
}
.correct_txt2 {
  font-size: 1.3rem;
  text-align: left;
}
.contents_correct {
  padding-top: 75vw;
}
.contents_correct div {
  margin-bottom: 5%;
}

/*　不正解ページ--------------*/
.lesson_incorrect {
  background: url(../images/incorrect_bg.png) no-repeat;
  background-size: 100%;
  position: relative;
  padding-bottom: 5rem;
}
.incorrect_ttl {
  width: 80%;
  padding-top: 5%;
  margin: 0 auto;
}
.incorrect_read {
  position: absolute;
  width: 11vw;
  top: 40vw;
  right: 8vw;
}
.contents_incorrect {
  padding-top: 75vw;
}
.contents_incorrect div {
  margin-bottom: 5%;
}

/*　最終ページ--------------*/
.fin {
  background: url(../images/op_bg.png) no-repeat;
  background-size: 100%;
  background-color: #000;
  position: relative;
  padding-bottom: 5rem;
  text-align: left;
}
.contents_fin {
  padding-top: 95vw;
  margin: 0 auto;
  width: 80%;
}
.contents_fin div {
  margin-bottom: 3rem;
}
span.min {
  color: #ff0;
  display: block;
  margin: 0.5rem;
}
.caution {
  line-height: 1.7;
  font-size: 0.9rem;
}
.caution a {
  color: #ff0;
  text-decoration: underline;
}

/***/
/***/
/***/
/***************************************************PC***********************/
@media (min-width: 769px) {
  /*　コンテンツ幅--------------*/
  .contents {
    margin: 0 auto;
    width: 80%;
  }
  /*　ボタンリスト--------------*/
  ul li a {
    font-size: 1.5rem;
  }
  /*　質問ページ--------------*/
  .q_icon {
    width: 40%;
  }

  /*end media*/
}

/*========= ローディング画面のためのCSS ===============*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999999;
  text-align: center;
  color: #fff;
}

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/

body {
  background: #00276f;
  /*遷移アニメーションと同じ色を指定*/
}

body.appear {
  background: #000;
  /*画面を開いた後の背景色を指定*/
}

.splashbg {
  display: none;
  content: "";
  position: fixed;
  transform: scale(100);
  background-color: #00276f;
  /*伸びる背景色の設定*/
  z-index: 999;
  /*丸のスタートの形状*/
  top: calc(50% - 1rem);
  /*50%から円の半径を引いた値*/
  left: calc(50% - 1rem);
  /*50%から円の半径を引いた値*/
  width: 2rem;
  height: 2rem;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg {
  display: block;
  border-radius: 50%;
  animation-name: PageAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes PageAnime {
  0% {
    /*丸のスタート位置と形状*/
    transform: scale(100);
  }

  100% {
    /*丸の終了位置と形状*/
    transform: scale(0);
    display: none;
    /*終了時は消える*/
  }
}

/*画面遷移の後現れるコンテンツ設定*/
#container {
  opacity: 0;
  /*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}