@charset "utf-8";
/* CSS Document */

:root{
  --main-color:#0c6d44;
  --txt-color:#1e0e07;
}

body {
  background-color: #fff;
  color: var(--txt-color);
  font-family: "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "游ゴシック Mediu", YuGothic, YuGothicM, 'メイリオ', meiryo, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.7;
  font-feature-settings: "palt";
  position: relative;
  margin: 0;
  padding: 0;
}
p, h1, h2, h3  {
  margin: 0;
  padding: 0;
}
p {
  color: var(--main-color);
  text-align: center;
}
img {
  max-width: 100%;
  vertical-align: top;
}
a {
  text-decoration: none;
}
.sp {
  display: none;
}
@media(max-width:500px) {
  .sp {
    display: block;
  }
}

/*共通*/
.l-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.l-wrap:before {
  width: 100%;
  height: 100%;
  background: url(../images/bg.jpg) center top / cover;
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}
.l-contents {
  width: 100%;
  max-width: 500px;
  margin: auto;
  background-color: #fffff8;
  position: relative;
  z-index: 1;
  min-height: 100vh;
}
.common_text-content {
  width: min(420px, 90%);
  margin: 0 auto;
}

.sec_kv {
  position: relative;
}
.kv_img img {
  width: 100%;
}
.sec_detail {
  padding-top: 60px;
}
.sec_ball {
  position: absolute;
  bottom: -56px;
  left: 24px;
  z-index: 2;
}
.sec_ball img {
  width: 90px;
}
@media(max-width:500px) {
  .sec_ball img {
    width: 80px;
  }
}
@media(max-width:370px) {
  .sec_ball {
    bottom: -46px;
    left: 16px;
  }
  .sec_ball img {
    width: 70px;
  }
}

.detail_ttl{
  width: 90%;
  margin: 0 auto;
}

.item_top{
  margin-top: 40px;
}

.detail_btn{
  width: 75%;
  margin: 40px auto 0;
}
.detail_item{
  width: 90%;
  margin: 64px auto 0;
}

.q_box{
  background-color: #fff;
  border: 3px solid #1d4936;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 5px 0 #1d4936;
}
.ttl_q{
  color: #fff;
}
.ttl_q span{
  background-color: #215942;
  padding: 5px 16px;
  border-radius: 8px;
}
.q_txt{
  margin-top: 16px;
  color: var(--txt-color);
  text-align: left;
}
.q_btn_list{
  margin-top: 24px;
}
.q_btn + .q_btn{
  margin-top: 20px;
}

.cp_box{
  padding-bottom: 80px;
}
.cp_box p{
  color: var(--txt-color);
  text-align: left;
  font-weight: 400;
}
.cp_ttl span{
  color: var(--main-color);
}

.footer{
  background-color: #215942;
  height: 56px;
}


/* -----------  correct / incorrect ----------- */

.sec_contents{
  margin-bottom: 56px;
  position: relative;
  z-index: 1;
}
.correct_ttl{
  width: 85%;
  margin: -28px auto 0;
}
.barcode_box{
  background-color: #fff;
  border: 1px solid var(--txt-color);
  border-radius: 8px;
  margin-top: 24px;
}
p.barcode_txt{
  color:var(--txt-color);
  font-size: 20px;
  padding: 24px 0 16px;
}
p.barcode_txt span {
  background: linear-gradient(transparent 65%, rgba(251, 198, 0, 0.5) 65%);
}
.barcode_img{
  width: 90%;
  margin: 0 auto;
  padding-bottom: 16px;
}
.correct_txt{
  margin-top: 24px;
}
.correct_txt p{
  font-weight: normal;
  color: var(--txt-color);
  text-align: left;
  font-size: clamp(15px, 4vw, 18px);
}
.correct_txt_area{
  display: flex;
}
.btn_contents{
  width: 90%;
  margin: 80px auto 0;
}

.incorrect_ttl{
  width: 85%;
  margin: 0 auto;
}
.movie_txt{
  width: 80%;
  margin: 56px auto 0;
}
.q_movie .movie_wrap{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.q_movie .movie_wrap iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}