@charset "UTF-8";

@-webkit-keyframes infinity-scroll-01 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -4000px 0;
  }
}
@keyframes infinity-scroll-01 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -4000px 0;
  }
}

@-webkit-keyframes infinity-scroll-02 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 4000px 0;
  }
}
@keyframes infinity-scroll-02 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 4000px 0;
  }
}

#sidebar {
  position: relative;
}
#campaign_main {
  position: relative;
  max-width: 640px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  margin: 0 auto calc(42 / 640 * 100vw);
  background-size: 100%;
}
#campaign_main img {
  width: 100%;
}
#campaign_main::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(105 / 640 * 100vw);
  z-index: 2;
}
#kv {
  position: relative;
  height: calc(775 / 640 * 100vw);
  z-index: 2;
}
#kv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(1027 / 640 * 100vw);
}

#kv .inner {
  position: relative;
  max-width: 640px;
  height: 100%;
  overflow: hidden;
}
#kv h1 {
  width: calc(640 / 640 * 100vw);
  position: absolute;
  top: calc(150 / 640 * 100vw);
  left: 0;
}
#kv h1 .base {
  position: relative;
  z-index: 2;
  opacity: 0;
}
#kv h1 .hana {
  width: 100%;
  position: absolute;
  top: 0;
  left: calc(-28 / 640 * 100vw);
  opacity: 0;
  width: calc(668 / 640 * 100vw);
}
#kv .catch span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.9);
  width: 0;
}
#kv .catch img {
  position: relative;
  opacity: 0;
}
#kv .catch1 {
  width: calc(350 / 640 * 100vw);
  position: absolute;
  top: calc(540 / 640 * 100vw);
  left: calc(141 / 640 * 100vw);
}
#kv .catch2 {
  width: calc(495 / 640 * 100vw);
  position: absolute;
  top: calc(586 / 640 * 100vw);
  left: calc(74 / 640 * 100vw);
}

.intro {
  position: relative;
  margin-top: calc(-146 / 640 * 100vw);
  height: calc(395 / 640 * 100vw);
  background: url("https://mequrimequru.jp/kimg/static/kado_press/44/bg_intro.png") no-repeat top center;
  background-size: 100%;
  z-index: 2;
}
.intro .read {
  margin: calc(4 / 640 * 100vw) 0 calc(10 / 640 * 100vw);
  opacity: 0;
}
.intro .text {
  margin-bottom: calc(12 / 640 * 100vw);
  opacity: 0;
}
.intro .btns {
  display: flex;
  justify-content: center;
  gap: 0 calc(28 / 640 * 100vw);
  margin-bottom: calc(12 / 640 * 100vw);
  opacity: 0;
}
.intro .btns.off {
  pointer-events: none;
}
.intro .btns li {
  width: calc(287 / 640 * 100vw);
}
.intro .btns li.off {
  filter: grayscale(100%);
}
.intro .note {
  font-size: calc(14 / 640 * 100vw);
  font-weight: bold;
  color: #ff0000;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
}


#campaign_main .quiz-block{
  position: relative;
  margin-top: calc(-14 / 640 * 100vw);
}
#campaign_main .quiz-block::before {
  content: "";
  width: 100%;
  height: calc(105 / 640 * 100vw);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
#campaign_main .quiz-block h2.mb {
  margin-top: -100vh;
}
#campaign_main .quiz-block h2 {
  position: relative;
  width: calc(454 / 640 * 100vw);
  padding-top: calc(55 / 640 * 100vw);
  margin: 0 auto calc(60 / 640 * 100vw);
}
#campaign_main .quiz-block .quiz-box {
  position: relative;
  width: calc(541 / 640 * 100vw);
  margin: 0 auto calc(55 / 640 * 100vw);
  padding: calc(10 / 640 * 100vw) calc(22 / 640 * 100vw) calc(28 / 640 * 100vw);
  background-color: #fff;
  border:calc(2 / 640 * 100vw) solid #000;
  border-top: calc(16 / 640 * 100vw) solid #000;
}
#campaign_main .quiz-block .quiz-box .number {
  position: absolute;
  top: calc(-29 / 640 * 100vw);
  left: calc(-16 / 640 * 100vw);
}
#campaign_main .quiz-block .quiz-box .number::before {
  content: "";
  display: block;
  width: calc(92 / 640 * 100vw);
  height: calc(165 / 640 * 100vw);
  background: url("https://mequrimequru.jp/kimg/static/kado_press/44/img_q01.png") no-repeat top center;
  background-size: contain;
}
#campaign_main .quiz-block .quiz-box .number p {
  position: absolute;
  bottom: calc(28 / 640 * 100vw);
  left: 0;
  width: calc(85/ 640 * 100vw);
  font-size: calc(45 / 640 * 100vw);
  font-weight: bold;
  color: #fff;
  text-align: center;
}
#campaign_main .quiz-block .quiz-box .question {
  font-size: calc(24 / 640 * 100vw);
  font-weight: bold;
  padding: 0 calc(15 / 640 * 100vw);
  min-height: calc(118 / 640 * 100vw);
  line-height: 1.8;
  margin-left: calc(50 / 640 * 100vw);
  margin-bottom: calc(25 / 640 * 100vw);
}
#campaign_main .quiz-block .quiz-box .image {
  padding: 0 calc(15 / 640 * 100vw);
  line-height: 1.8;
  margin-left: calc(50 / 640 * 100vw);
  margin: calc(-25 / 640 * 100vw) 0 calc(25 / 640 * 100vw) calc(50 / 640 * 100vw);
}
#campaign_main .quiz-block .quiz-box .image.type2{
  width: 50%;
  margin: 0 auto calc(25 / 640 * 100vw);
  border: 1px solid #ddd;
  padding: 0;
}
#campaign_main .quiz-block .quiz-box .answer li {
      display: grid;
    grid-template-columns: calc(95 / 640 * 100vw) 1fr;
  box-sizing: border-box;
  min-height: calc(90 / 640 * 100vw);
  border: calc(1 / 640 * 100vw) solid #000;
  box-shadow:   calc(3 / 640 * 100vw)  calc(3 / 640 * 100vw)  calc(6 / 640 * 100vw) rgba(0,0,0,0.16);
}
#campaign_main .quiz-block .quiz-box .answer li:not(:last-child) {
  margin-bottom: calc(22 / 640 * 100vw);
}
#campaign_main .quiz-block .quiz-box .answer li span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(50 / 640 * 100vw);
  color: #fff;
  font-weight: bold;
  text-align: center;
  background-color: #000;
  border-right: 1px solid #000;
}
#campaign_main .quiz-block .quiz-box .answer li p {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(24 / 640 * 100vw);
  line-height: 1.3;
  padding: calc(15 / 640 * 100vw);
  font-weight: bold;
}
#campaign_main .quiz-block .quiz-box.easy .number::before {
  background: url("https://mequrimequru.jp/kimg/static/kado_press/44/img_q01.png") no-repeat top center;
  background-size: contain;
}
#campaign_main .quiz-block .quiz-box.easy,.quiz-block .quiz-box.easy .answer li {
  border-color: #33C195;
}
#campaign_main .quiz-block .quiz-box.easy .answer li span {
  background-color: #33C195;
}
#campaign_main .quiz-block .quiz-box.normal .number::before {
  background: url("https://mequrimequru.jp/kimg/static/kado_press/44/img_q02.png") no-repeat top center;
  background-size: contain;
}
#campaign_main .quiz-block .quiz-box.normal,.quiz-block .quiz-box.normal .answer li {
  border-color: #FFB53E;
}
#campaign_main .quiz-block .quiz-box.normal .answer li span {
  background-color: #FFB53E;
}
#campaign_main .quiz-block .quiz-box.quiz-box.hard .number::before {
  background: url("https://mequrimequru.jp/kimg/static/kado_press/44/img_q03.png") no-repeat top center;
  background-size: contain;
}
#campaign_main .quiz-block .quiz-box.hard,.quiz-block .quiz-box.hard .answer li {
  border-color: #B38BCC;
}
#campaign_main .quiz-block .quiz-box.hard .answer li span {
  background-color: #B38BCC;
}
#campaign_main .quiz-block .quiz-box.done .answer li {
  pointer-events: none;
}
#campaign_main .quiz-block .quiz-box.done .answer li.off {
  background-color: #ddd;
}
#campaign_main .quiz-block .quiz-box.done .answer li.incor {
  background-color: rgba(34, 143, 212, 0.3);
}
#campaign_main .quiz-block .quiz-box.done .answer li.correct.on {
  background-color: rgba(299, 34, 48, 0.3);
}


#campaign_main .quiz-block .quiz-box .answer-detail {
  display: none;
  opacity: 0;
}
#campaign_main .quiz-block .quiz-box .answer-effect .answer-detail {
  display: block;
}

#campaign_main .quiz-block .quiz-box .answer-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(299, 34, 48, 0.9);
  z-index: 999;
  display: none;
}
#campaign_main .quiz-block .quiz-box .answer-effect {
  overflow-y: scroll;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#campaign_main .quiz-block .quiz-box .answer-effect .img {
  padding-top: calc(50 / 640 * 100vw);
  width: calc(360 / 640 * 100vw);
  margin: 0 auto;
}
#campaign_main .quiz-block .quiz-box .answer-detail {
  margin-top: calc(30 / 640 * 100vw);
}
#campaign_main .quiz-block .quiz-box .answer-detail .txt {
  width: calc(445 / 640 * 100vw);
  padding: calc(25 / 640 * 100vw);
  margin: 0 auto calc(18 / 640 * 100vw);
  background-color: #fff;
  border: 1px solid #707070;
}
#campaign_main .quiz-block .quiz-box .answer-detail .txt p {
  font-size: calc(22 / 640 * 100vw);
  line-height: 1.8;
}
#campaign_main .quiz-block .quiz-box .answer-effect .image {
  margin: 0 auto calc(18 / 640 * 100vw);
}
#campaign_main .quiz-block .quiz-box .answer-effect .close {
  width: calc(70 / 640 * 100vw);
  margin: 0 auto calc(70 / 640 * 100vw);
}
#campaign_main .quiz-block .quiz-box .answer-effect .close.top {
  position: absolute;
  top: calc(20 / 640 * 100vw);
  right: calc(20 / 640 * 100vw);
}

#campaign_main .quiz-block .quiz-box .incorrect-box {
  background-color: rgba(34, 143, 212, 0.9);
}
#campaign_main .quiz-block .quiz-box .correct-box .img img,#campaign_main .quiz-block .quiz-box .incorrect-box .img img {
  opacity: 0;
}


#campaign_main .quiz-block .result-box {
  position: relative;
  z-index: 3;
  margin-top: calc(-22 / 640 * 100vw);
}
#campaign_main .quiz-block .result-box p {
  width: calc(398 / 640 * 100vw);
  margin: 0 auto calc(5 / 640 * 100vw);
}
#campaign_main .quiz-block .result-box .btn {
  width: calc(545 / 640 * 100vw);
  margin: 0 auto;
}
#campaign_main .quiz-block .result-box .btn-reset {
  width: calc(293 / 640 * 100vw);
  margin: calc(65 / 640 * 100vw) auto 0;
}
#campaign_main .quiz-block .result-box .detail {
  display: none;
}
#campaign_main .quiz-block .result-box .detail .result-number {
  position: relative;
  width: 100%;
  height: calc(148 / 640 * 100vw);
  background: url("https://mequrimequru.jp/kimg/static/kado_press/44/bg_quick_result.png") no-repeat top center;
  background-size: contain;
  margin-bottom: calc(8 / 640 * 100vw);
  opacity: 0;
}
#campaign_main .quiz-block .result-box .detail .result-number .result {
  width: calc(120 / 640 * 100vw);
  display: block;
  position: absolute;
  top: calc(8 / 640 * 100vw);
  right: calc(168 / 640 * 100vw);
  font-size: calc(80 / 640 * 100vw);
  letter-spacing: -0.15em;
  font-weight: bold;
  color: #FFFF00;
  text-align: center;
}
#campaign_main .quiz-block .result-box .detail .result-number .all {
  width: calc(120 / 640 * 100vw);
  display: block;
  position: absolute;
  top: calc(58 / 640 * 100vw);
  right: calc(60 / 640 * 100vw);
  font-size: calc(60 / 640 * 100vw);
  letter-spacing: -0.15em;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
#campaign_main .quiz-block .result-box .detail .image {
  position: relative;
  width: calc(584 / 640 * 100vw);
  margin: 0 auto;
  opacity: 0;
}
#campaign_main .quiz-block .result-box .detail .stamp {
  width: 100%;
  position: absolute;
  top:0;
  left: 0;
  opacity: 0;
}
#campaign_main .quiz-block .result-box .detail .post {
  width: calc(492 / 640 * 100vw);
  margin: calc(25 / 640 * 100vw) auto 0;
  opacity: 0;
}
#campaign_main .quiz-block .result-box .detail .btn-re {
  width: calc(379 / 640 * 100vw);
  margin: calc(70 / 640 * 100vw) auto 0;
} 
#campaign_main .quiz-block .result-box .detail .answer-list a {
  color: #ff0000;
  font-size: calc(30 / 640 * 100vw);
  margin-top:  calc(50 / 640 * 100vw);
  font-weight: bold;
  text-align: center;
  text-shadow:calc(2 / 640 * 100vw) calc(2 / 640 * 100vw) 0 #FFF, calc(-2 / 640 * 100vw) calc(-2 / 640 * 100vw) 0 #FFF,
              calc(-2 / 640 * 100vw) calc(2 / 640 * 100vw) 0 #FFF, calc(2 / 640 * 100vw) calc(-2 / 640 * 100vw) 0 #FFF,
              0px calc(2 / 640 * 100vw) 0 #FFF,  0 calc(-2 / 640 * 100vw) 0 #FFF,
              calc(-2 / 640 * 100vw) 0 0 #FFF, calc(2 / 640 * 100vw) 0 0 #FFF;
              opacity: 0;
}


#quiz-1st{
  display: none;
  background: url("https://mequrimequru.jp/kimg/static/kado_press/44/bg_1st_btm.png") no-repeat bottom center,url("https://mequrimequru.jp/kimg/static/kado_press/44/bg_1st_top.png") no-repeat top center,url("https://mequrimequru.jp/kimg/static/kado_press/44/bg_1st_base.jpg") repeat-y top center;
  background-size: 100%;
}
#quiz-1st .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://mequrimequru.jp/kimg/static/kado_press/44/bg_1st_rp.png") repeat-y top center;
  background-size: 100%;
}


#quiz-2nd {
  position: relative;
  display: none;
}
#quiz-2nd .bg-base {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url("https://mequrimequru.jp/kimg/static/kado_press/44/bg_2nd_base.jpg") repeat-y top center;
  background-size: cover;
}
#quiz-2nd .bg-deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://mequrimequru.jp/kimg/static/kado_press/44/bg_2nd_btm.png") no-repeat bottom center,url("https://mequrimequru.jp/kimg/static/kado_press/44/bg_2nd_top.png") no-repeat top center;
  background-size: 100%;
}
#quiz-2nd .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://mequrimequru.jp/kimg/static/kado_press/44/bg_2nd_rp.png") repeat-y top center;
  background-size: 100%;
}

#campaign_main #quiz-2nd h2 {
  margin-top: -100vh;
}

#quiz-2nd-result {
  position: relative;
  z-index: 2;
  margin-top: calc(-22 / 640 * 100vw);
}

#quiz {
  display: none;
}

#campaign_main p.copy {
  position: relative;
  font-size: calc(13 / 640 * 100vw);
  text-align: center;
  font-weight: bold;
  margin-top: calc(45 / 640 * 100vw);
  padding-bottom: calc(68 / 640 * 100vw);
  z-index: 3;
}

#pagetop,#pagebottom {
  display: none;
  position: fixed;
  width:  calc(64 / 640 * 100vw);
  bottom: calc(15 / 640 * 100vw);
  right:  calc(4 / 640 * 100vw);
  z-index: 10;
}
#pagebottom.off {
  display: none !important;
}
#footer {
  position: relative;
}
#resetlink {
  position: absolute;
  bottom: calc(400 / 640* 100vw);
}
@media screen and (min-width:641px){
  #campaign_main {
    margin: 0 auto;
  }
  #campaign_main::after {
    height: 105px;
    width: 100%;
    background-size: cover;
  }

  #kv {
    height: 775px;
  }
  #kv::before {
    height: 1027px;
  }
  #kv h1 {
    width: 640px;
    top: 150px;
  }
  #kv h1 .hana {
    left: -28px;
    width: 668px;
  }
  #kv .catch1 {
    width: 350px;
    top: 540px;
    left: 141px;
  }
  #kv .catch2 {
    width: 495px;
    top: 586px;
    left: 74px;
  }
  
  .intro {
    margin-top: -146px;
    height: 395px;
  }
  .intro .read {
    margin: 4px 0 10px;
  }
  .intro .text {
    margin-bottom: 12px;
  }
  .intro .btns {
    gap: 0 28px;
    margin-bottom: 12px;
  }
  .intro .btns li {
    width: 287px;
  }
  .intro .note {
    font-size: 14px;
  }
  

  #campaign_main .quiz-block::before {
    height: 105px;
  }
  #campaign_main .quiz-block h2 {
    width: 454px;
    padding-top: 55px;
    margin: 0 auto 60px;
  }
  #campaign_main .quiz-block .quiz-box {
    width: 541px;
    margin: 0 auto 35px;
    padding: 10px 22px 28px;
    border:2px solid #000;
    border-top: 16px solid #000;
  }
  #campaign_main .quiz-block .quiz-box .number {
    top: -29px;
    left: -16px;
  }
  #campaign_main .quiz-block .quiz-box .number::before {
    width: 92px;
    height: 165px;
  }
  #campaign_main .quiz-block .quiz-box .number p {
    bottom: 28px;
    width: 85px;
    font-size: 45px;
  }
  #campaign_main .quiz-block .quiz-box .question {
    font-size: 22px;
    min-height: 118px;
    padding: 0 15px;
    margin-left: 50px;
    margin-bottom: 25px;
  }
  #campaign_main .quiz-block .quiz-box .image {
    padding: 0 15px;
    margin-left: 50px;
    margin: -25px 0 25px 50px;
  }
  #campaign_main .quiz-block .quiz-box .image.type2{
    margin: 0 auto 25px;
  }
  #campaign_main .quiz-block .quiz-box .answer li {
  grid-template-columns: 95px 1fr;
    border: 1px solid #000;
    box-shadow:  3px 3px 6px rgba(0,0,0,0.16);
    min-height: 90px;
  }
  #campaign_main .quiz-block .quiz-box .answer li:not(:last-child) {
    margin-bottom: 22px;
  }
  #campaign_main .quiz-block .quiz-box .answer li span {
    font-size: 50px;
  }
  #campaign_main .quiz-block .quiz-box .answer li p {
    font-size: 22px;
    padding: 15px;
  }
  #campaign_main .quiz-block .quiz-box.easy,.quiz-block .quiz-box.easy .answer li {
    border-color: #33C195;
  }
  #campaign_main .quiz-block .quiz-box.normal,.quiz-block .quiz-box.normal .answer li {
    border-color: #FFB53E;
  }
  #campaign_main .quiz-block .quiz-box.hard,.quiz-block .quiz-box.hard .answer li {
    border-color: #B38BCC;
  }
  

  
  #campaign_main .quiz-block .quiz-box .correct-box .img {
    padding-top: 50px;
    width: 360px;
  }
  #campaign_main .quiz-block .quiz-box .answer-detail {
    margin-top: 30px;
  }
  #campaign_main .quiz-block .quiz-box .answer-effect .txt {
    width: 445px;
    padding: 25px;
    margin: 0 auto 18px;
  }
  #campaign_main .quiz-block .quiz-box .answer-effect .txt p {
    font-size: 20px;
  }
  #campaign_main .quiz-block .quiz-box .answer-effect .image {
    margin: 0 auto 18px;
  }
  #campaign_main .quiz-block .quiz-box .answer-effect .close {
    width: 70px;
    margin-bottom: 70px;
  }
  #campaign_main .quiz-block .quiz-box .answer-effect .close.top {
    top: 20px;
    right: 20px;
  }
  
  #campaign_main .quiz-block .quiz-box .incorrect-box .img {
    width: 293px;
  }
  
  
  #campaign_main .quiz-block .result-box {
    margin-top:  -22px;
  }
  #campaign_main .quiz-block .result-box p {
    width: 398px;
    margin: 0 auto 5px;
  }
  #campaign_main .quiz-block .result-box .btn {
    width: 545px;
  }
  #campaign_main .quiz-block .result-box .btn-reset {
    width: 293px;
    margin: 65px auto 0;
  }
  #campaign_main .quiz-block .result-box .detail .result-number {
    height: 148px;
    margin-bottom: 8px;
  }
  #campaign_main .quiz-block .result-box .detail .result-number .result {
    width: 120px;
    top: 8px;
    right: 168px;
    font-size: 80px;
  }
  #campaign_main .quiz-block .result-box .detail .result-number .all {
    width: 120px;
    top: 58px;
    right: 60px;
    font-size: 60px;
  }
  #campaign_main .quiz-block .result-box .detail .image {
    width: 584px;
  }
  #campaign_main .quiz-block .result-box .detail .post {
    width: 492px;
    margin: 25px auto 0;
  }
  #campaign_main .quiz-block .result-box .detail .btn-re {
    width: 379px;
    margin: 70px auto 0;
  } 
  #campaign_main .quiz-block .result-box .detail .answer-list a {
    width: auto;
    text-align: center;
    font-size: 30px;
    margin-top: 50px;
    text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0-2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
  }
  
  #quiz-2nd #btn-nav {
    top: 5px;
    right: 3px;
    width: 64px;
  }
  #quiz-2nd #btn-nav.fixed {
    top: 5px;
    right: calc(50% - 146px);
  }
  #quiz-2nd-result {
    margin-top: -22px;
  }
  
  
  #campaign_main p.copy {
    margin-top: 45px;
    font-size: 13px;
    padding-bottom: 68px;
  }
 
  #pagetop,#pagebottom {
    width:  64px;
    bottom: 15px;
    right: calc(50% - 146px);
  }
#resetlink {
  bottom: 400px;
}
  #footer {
    position: relative;
  }
}

@keyframes infinity-scroll1 {
  0% {
        background-position: 0 0;
    }
    100% {
        background-position: -4000px 0;
    }
}

@keyframes infinity-scroll2 {
  0% {
        background-position: 0 0;
    }
    100% {
        background-position: 4000px 0;
    }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}