@charset "utf-8";

/*!
 * "LINE Seed" licensed under the SIL Open Font License
 * https://seed.line.me/index_jp.html
 * https://scripts.sil.org/OFL
 * © LY Corporation
*/
@font-face {
  font-family: 'LINESeedJP_Rg';
  src: url('../font/LINESeedJP_OTF_Rg.woff') format('woff');
}
@font-face {
  font-family: 'LINESeedJP_Eb';
  src: url('../font/LINESeedJP_OTF_Eb.woff') format('woff');
}

:root{
  --font-size: calc(10px * calc(620 / 750));
  --font-size-note: 2.2rem;
  --width-contents: 620px;
  --max-width--modal: 600px;
  --min-width--modal: 600px;
}


/* ==================================================
base
================================================== */
html{
  font-size: var(--font-size);
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
}
img, video{
  width: 100%;
}
a{
  display: block;
}
a, div, dt, :focus{
  outline: none; -webkit-tap-highlight-color:rgba(0,0,0,0);
}
#contents{
  width: var(--width-contents);
  overflow: hidden;
  margin: auto;
  background: #583412;
}
section{
  position: relative;
}
.content{
  position: relative;
}


.inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dn{
  display: none;
}

.head-tape:before{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 25.866%;
  background: url("../img/border_keepout.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: -2.4% 0 0 0;
  pointer-events: none;
}


/* ==================================================
pc
================================================== */
.pcbg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/pc_bg.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.pcbg:before{
  content: "";
  display: block;
  width: calc(var(--width-contents) + 6px);
  height: 100%;
  margin: auto;
  background: #fff;
  position: relative;
  z-index: 5;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.pcbg-wrap:before{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 268px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: url("../img/pc_shadow_top.png") repeat-x top center / 100% 268px;
  pointer-events: none;
}
.pcbg-wrap:after{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 319px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: url("../img/pc_shadow_bottom.png") repeat-x bottom center / 100% 319px;
  pointer-events: none;
}

.pcbg-side{
  position: absolute;
  width: calc((100% - var(--width-contents)) / 2);
  height: 100%;
  top: 0;
  z-index: 1;
  position: fixed;
  display: flex;
  transition: 0.2s;
  overflow: hidden;
}
.pcbg-side.--left{ position: absolute; top: 0; left: 0; }
.pcbg-side.--right{ position: absolute; top: 0; right: 0; }

.pcbg-left-logo{
  width: 16.197vw;
  max-width: 311px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pcbg-right-qr{
  width: 21.093vw;
  max-width: 405px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pcbg-right-qr img{
  z-index: 2;
  position: relative;
}
.pcbg-right-qr:before{
  content: "";
  display: block;
  width: 150%;
  padding-bottom: 150%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../img/pc_bg_light.png") no-repeat top center / 100% auto;
  pointer-events: none;
}
@media screen and (max-width: 1100px){
  .pcbg-side.--scale{
    opacity: 0;
  }
}
.pcbg-left-tape{
  width: calc(935px * 1);
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 0%;
}
.pcbg-side.--left:not(.--scale):after{
  content: "";
  display: block;
  width: 100%;
  height: 46px;
  position: absolute;
  bottom: 80px;
  left: 0;
  background: url("../img/pc_bg_tape.png") repeat top left / auto 100%;
  transform: rotate(-1deg);
  transform-origin: left bottom;
  opacity: 1;
  pointer-events: none;
}
.pcbg-right-tape{
  width: calc(680px * 1);
  position: absolute;
  top: 0;
  right: 0;
}


/* ==================================================
animation
================================================== */
.animation-jump{
  display: block;
  animation: animation__jump 5s 1s ease infinite;
}
@keyframes animation__jump{
  0% { translate: 0 0; }
  3.5% { translate: 0 -0.75rem; }
  7% { translate: 0 0; }
  10.5% { translate: 0 -0.75rem; }
  14% { translate: 0 0; }
  100% { translate: 0 0; }
}


/* ==================================================
top
================================================== */
.top-bg{
  background: url("../img/top/bg.jpg") no-repeat top center / 100% auto;
  padding-top: 1%;
  position: relative;
  z-index: 2;
  padding-bottom: 8%;
}
.top-bg:before, .top-bg:after{
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
}
.top-bg:before{
  width: 86.533%;
  padding-bottom: 50%;
  background: url("../img/top/chara_left.png") no-repeat top center / 100% auto;
  top: 0;
  left: 0;
  margin: 0.2% 0 0 0;
}
.top-bg:after{
  width: 74.8%;
  padding-bottom: 42.933%;
  background: url("../img/top/chara_right.png") no-repeat top center / 100% auto;
  top: 0;
  right: 0;
  margin: 15.6% 2% 0 0;
}
.top-logo{
  width: 43.066%;
  margin: 0 auto 0;
  transform: translate(-3.2%, 0);
}
.top-icon{
  width: 11.866%;
  position: absolute;
  top: 0;
  right: 0;
  margin: 6.4% 0.6% 0 0;
}
.top-title{
  width: 97.333%;
  margin: 4.6% auto 0;
}
.top-info{
  position: relative;
}
.top-info-main{
  width: 94.666%;
  margin: 0 auto 0;
}
.top-info-post{
  width: 85.466%;
  padding-bottom: 32.133%;
  background: url("../img/top/frame_post.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 60% auto 0;
  font-family: LINESeedJP_Eb, sans-serif;
}
.top-info-post span{
  font-size: 950%;
  display: block;
  color: #c31014;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 13% auto 0;
  text-align: center;
  font-weight: bold;
}
.top-info-btn{
  width: 82.133%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 100% auto 0;
}
.top-info:before{
  content: "";
  display: block;
  width: 16.266%;
  padding-bottom: 16.133%;
  background: url("../img/top/ic_01.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: 14% 0 0 1%;
  pointer-events: none;
}
.top-info:after{
  content: "";
  display: block;
  width: 21.066%;
  padding-bottom: 21.066%;
  background: url("../img/top/ic_02.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: 144.8% 0 0 2%;
  pointer-events: none;
}




/* ==================================================
quiz
================================================== */
#quiz .head-tape:before{
  margin: -3.4% 0 0 0;
}
.quiz-bg{
  background: url("../img/quiz/bg_top.png") no-repeat top 5.8rem center / 100% auto, url("../img/quiz/bg.jpg") repeat top center / 100% auto;
}
.quiz-bg:after{
  content: "";
  display: block;
  background: #583412;
  background: linear-gradient(0deg,rgba(88, 52, 18, 1) 0%, rgba(88, 52, 18, 1) 10%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  padding-bottom: 50%;
  position: absolute;
  bottom: 0;
}
.quiz-head{
  padding-bottom: 46.666%;
  position: relative;
  background: url("../img/quiz/bg_title.png") no-repeat top center / 100% auto;
  z-index: 2;
}
.quiz-title{
  width: 88.4%;
  margin: 17% auto 0;
}
.quiz-date{
  width: 83.733%;
  margin: 1.2% auto 0;
}
.quiz-main{
  padding-bottom: 6%;
  position: relative;
  z-index: 2;
}
.quiz-list{
  margin-top: 3.2%;
}
.quiz-list > div{
  position: relative;
  margin-bottom: 3%;
}
.quiz-list > div.--clear:after{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 34.266%;
  background: url("../img/quiz/clear.png") no-repeat top left / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.quiz-list > div:last-child{
  margin-bottom: 0;
}
.quiz-list > div .question{
  width: 99.733%;
}
.answer{
  width: 82%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 85% auto 0;
}
.answer input{
  width: 100%;
  background: #faec96;
  border: solid #fff 0.6rem;
  border-radius: 1rem;
  padding: 1.5rem;
  font-size: 2.8rem;
  font-family: LINESeedJP_Rg;
  box-shadow: 0 0.3rem 1rem rgba(118, 118, 118, 0.7);
}
.answer input::placeholder{
  color: #bdad56;
}
.answer-atn{
  width: 16.4%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 98% 0 0 75%;
}
.send{
  width: 48%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 99% auto 0;
}
.send.--disabled{
  pointer-events: none;
}
.send.--disabled:before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/quiz/btn_answer_fin.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
}
.send.--disabled img{
  opacity: 0;
}
.tips{
  width: 14%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 68.2% 0 0 81.4%;
}
.quiz-atn{
  width: 92.266%;
  margin: 3% auto 0;
}
.quiz-notes{
  width: 34.266%;
  margin: 3% auto 0;
}

.--clear .answer input{
  pointer-events: none;
  background: #e5e7e9;
}
.--clear .answer input::placeholder{
  color: #a8a8a8;
}




/* ==================================================
footer
================================================== */
.footer-bg{
  background: url("../img/footer/bg.jpg") no-repeat top -1rem center / 100% auto;
  padding-top: 24%;
}
.footer-stamp, .footer-event{
  width: 96%;
  margin: 0 auto 0;
  position: relative;
}
.footer-stamp{
  margin-bottom: 4%;
}
.footer-event{
  margin-bottom: 9.6%;
}
.footer-stamp-link{
  width: 85.555%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto 5.4%;
}
.footer-event-link{
  width: 85.555%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto 29.6%;
}
.footer-pagetop{
  width: 17.6%;
  padding-bottom: 17.6%;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 0 8.4% 0;
  z-index: 2;
}
.footer-bottom{
  position: relative;
  margin-top: 2%;
  padding-bottom: 26.4%;
  background: url("../img/frame.png") no-repeat top center / 100% auto;
}
.footer-support{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8%;
}
.footer-support a{
  margin: 0 6.666%;
}
.support-policy{
  width: 37.466%;
}
.support-contact{
  width: 23.466%;
}
.footer-copyright{
  width: 52.4%;
  margin: 4.4% auto 0;
}




/* ==================================================
result
================================================== */
.result-label{
  width: 66.4%;
  margin: -22% auto 0;
}
.result-text{
  width: 84.266%;
  margin: 3% auto 0;
}
.result-question{
  width: 94.666%;
  margin: 0 auto 0;
}
.result-text-answer{
  width: 54.666%;
  margin: 1.6% auto 0;
}



/* ==================================================
incorrect
================================================== */
.incorrect-bg{
  background: url("../img/result/bg_incorrect.jpg") no-repeat top center / 100% auto, #e7c075;
  min-height: 100vh;
  padding-bottom: 22%;
}
.result-quiz .answer{
  position: static;
  margin: 3% auto 0;
}
.result-quiz .send{
  position: relative;
  margin: 3% auto 0;
}
.result-quiz .answer-atn{
  margin: 138.4% 0 0 75%;
}
.result-quiz .tips{
  margin: 109.6% 0 0 81.4%;
}
.result-pageback{
  width: 68.533%;
  margin: 1.6% auto 0;
}
.result-footer{
  background: url("../img/footer_s.png") no-repeat top center / 100% auto;
  padding-bottom: 16%;
  width: 100%;
  position: absolute;
  bottom: 0;
}
.result-footer img{
  width: 52.4%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto 3%;
}




/* ==================================================
correct
================================================== */
.correct-bg{
  background: url("../img/result/bg_correct.jpg") no-repeat top center / 100% auto, #e7c075;
  min-height: 100vh;
  padding-bottom: 18%;
}
/* common */
.result-explanation, .result-back{
  width: 82.133%;
}
.result-explanation{
  margin: 2% auto 0;
}
.result-back{
  margin: -1.5% auto 0;
}
.result-correct-common{
  width: 95.466%;
  margin: 1.5% 2.5% 0 auto;
}
.result-correct-info{
  width: 96%;
  padding-bottom: 41.333%;
  background: url("../img/result/frame_ad.png") no-repeat top center / 100% auto;
  position: relative;
  margin: 4.2% auto 0;
}
.result-correct-info:before{
  content: "";
  display: block;
  width: 23.194%;
  padding-bottom: 20.277%;
  background: url("../img/result/icon_left.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: -1.3% 0 0 -1.5%;
  pointer-events: none;
}
.result-correct-info:after{
  content: "";
  display: block;
  width: 20%;
  padding-bottom: 16.666%;
  background: url("../img/result/icon_right.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0.4% 0 0 0;
  pointer-events: none;
}
.result-correct-info-btn{
  display: flex;
  justify-content: center;
}
.result-correct-info-btn a{
  margin-top: 20.4%;
  width: 45.694%;
}
/* 1~3 */
#page-correct .correct-bg:before{
  content: "";
  display: block;
  width: 74.533%;
  padding-bottom: 16.666%;
  background: url("../img/result/eff_kira.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: 42.6% 0 0 14%;
  pointer-events: none;
}
#page-correct .result-text{
  width: 29.333%;
  margin: 1.8% auto 0;
}
#page-correct .quiz-atn{
  margin: 1% auto 0;
}
#page-correct .quiz-notes{
  margin: 2.4% auto 0;
}
/* complete */
.correct-bg.--complete{
  background: url("../img/result/bg_correct_complete.jpg") no-repeat top center / 100% auto, #e7c075;
}
#page-correct .correct-bg.--complete:before{
  width: 98.533%;
  padding-bottom: 26.266%;
  background: url("../img/result/eff_kira_complete.png") no-repeat top center / 100% auto;
  margin: 38% 0 0 1%;
}
#page-correct .--complete .result-text{
  width: 89.866%;
}
#page-correct .--complete .result-post-btn{
  width: 82.133%;
  margin: 1% auto 0;
}
#page-correct .--complete .result-correct-post.--first{
  margin: -2.4% auto 0;
}
#page-correct .--complete .result-correct-post.--second{
  margin: 2.4% auto 0;
}
#page-correct .complete .result-correct-common{
  margin: 1.5% 2.5% 3% auto;
}
#page-correct .--complete .result-post-atn{
  width: 89.6%;
  margin: 2.4% auto 0;
}
#page-correct .--complete .result-back2{
  width: 82.133%;
  margin: 3% auto 0;
}



/* ==================================================
modal
================================================== */
.modal-box {
  display: none;
}
.modaal-container {
  width: 90.133%;
  max-width: var(--max-width--modal);
  min-width: var(--min-width--modal);
  margin: 0 auto 0;
  background-color: transparent !important;
  box-shadow: none !important;
}
.modaal-content-container {
  position: relative;
  padding: 0 !important;
}
.modal_close {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 44.8%;
  padding-top: 0;
  margin-top: 4%;
  cursor: pointer;
}
.modaal-inner-wrapper{
  padding: 3% 0 13%;
}

/* ent */
.modal-ent-wrap{
  position: relative;
}
.modal-ent-wrap .ent-buttons{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 31.5% auto 0;
  width: 70.414%;
}
.modal-ent-wrap .ent-buttons a{
  margin-bottom: 3.4%;
}

/* tips */
.tips-box{
  border: #f3e0b0 solid 0.4rem;
  border-radius: 3rem;
  overflow: hidden;
  background: #FFB400;
}
.tips-box-head{
  background: #FFB400;
  background: linear-gradient(0deg,rgba(255, 180, 0, 1) 0%, rgba(255, 245, 0, 1) 100%);
  border-bottom: #f3e0b0 solid 0.4rem;
  text-align: center;
  padding: 4.8% 0;
  position: relative;
}
.tips-box-head:before{
  content: "";
  display: block;
  width: 21.246%;
  padding-bottom: 21.246%;
  background: url("../img/modal/tips/ic_bg_target.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: -4% 0 0 4.5%;
  pointer-events: none;
}
.tips-box-body{
  background: url("../img/modal/tips/bg.jpg") repeat top center / 100% auto;
}
.tips-box-body dt{
  background: #9F814D;
  background: linear-gradient(90deg,rgba(159, 129, 77, 1) 0%, rgba(225, 183, 109, 1) 50%, rgba(159, 129, 77, 1) 100%);
  position: relative;
}
.tips-box-body dl dt:after{
  content: "";
  display: block;
  width: 9.467%;
  padding-bottom: 9.467%;
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translate(0, -50%);
  transform-origin: top;
}
.tips-box-body dl.--close dt:after{
  background: url("../img/modal/tips/ic_arrow.png") repeat top center / 100% auto;
  scale: 1 -1;
}
.tips-box-body dl.--open dt:after{
  background: url("../img/modal/tips/ic_arrow.png") repeat top center / 100% auto;
}
.tips-box-body dt{
  text-align: center;
  padding: 3.6% 0;
}
.tips-box-body dl:nth-child(1) dt{
  border-bottom: #f3e0b0 solid 0.4rem;
}
.tips-box-body dl:nth-child(1) dd{
  border-bottom: #f3e0b0 solid 0.4rem;
}
.tips-box-body dl:nth-child(2) dd{
  border-top: #f3e0b0 solid 0.4rem;
}
.tips-box-body dt img{
  width: 29.733%;
}
.tips-box-body dd{
  text-align: center;
}

/* tips1 */
.--q1 .tips-box-head img{
  width: 48.402%;
}
.--q1 .tips-box-body dl:nth-child(1) dd img{
  width: 66.715%;
}
.--q1 .tips-box-body dl:nth-child(2) dd img{
  width: 72.781%;
}
.--q1 .tips-box-body dd{
  padding: 6% 0;
}

/* tips2 */
.--q2 .tips-box-head img{
  width: 48.402%;
}
.--q2 .tips-box-body dl:nth-child(1) dd img{
  width: 73.372%;
}
.--q2 .tips-box-body dl:nth-child(2) dd img{
  width: 83.875%;
}
.--q2 .tips-box-body dl:nth-child(1) dd{
  padding: 3% 0;
}
.--q2 .tips-box-body dl:nth-child(2) dd{
  padding: 5% 0;
}

/* tips3 */
.--q3 .tips-box-head img{
  width: 48.402%;
}
.--q3 .tips-box-body dl:nth-child(1) dd img{
  width: 57.100%;
}
.--q3 .tips-box-body dl:nth-child(2) dd img{
  width: 56.656%;
}
.--q3 .tips-box-body dd{
  padding: 5% 0;
}

/* tips4 */
.--q4 .tips-box-head img{
  width: 52.218%;
}
.--q4 .tips-box-body dl:nth-child(1) dd img{
  width: 81.213%;
}
.--q4 .tips-box-body dl:nth-child(2) dd img{
  width: 45.857%;
}
.--q4 .tips-box-body dl:nth-child(1) dd{
  padding: 8% 0;
}
.--q4 .tips-box-body dl:nth-child(2) dd{
  padding: 6% 0;
}

/* notes */
.modal-terms-contents{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  color: #64360e;
  background: #fffcda;
  border-radius: 3rem;
  display: flex;
  flex-flow: column;
  padding-bottom: 4%;
}
.modal-terms-contents{
  background: #f8d79c;
  font-size: var(--font-size-note);
  box-shadow: inset 0px 0px 1.5rem #7b4411;
}
.modal-notes-title{
  text-align: center;
  padding: 10% 0 2%;
  font-size: calc(var(--font-size-note) * 1.8);
  font-weight: bold;
  color: #64360e;
}
.modal-terms-contents .modal-notes-text{
  overflow-y: scroll;
  word-break: break-all;
  font-size: var(--font-size-note);
  height: 100%;
  line-height: 1.25;
  padding-left: 4%;
  padding-right: 3.5%;
  width: 96%;
  margin: 5% auto 0;
}
.modal-terms-contents .modal-notes-text li{
  line-height: 1.5;
}
.modal-terms-contents .modal-notes-text li a{
  display: inline;
  color: #0000d5;
}
.modal-terms-contents ul li{
  padding-left: 1em;
  transform: rotate(0.03deg);
}
.modal-terms-contents ul li:before{
  display: inline-block;
  content: "・";
  width: 1em;
  margin-left: -1em;
  color: #64360e;
}