@charset "UTF-8";
body {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  color: #3c3c3c;
  font-size: 3.90625vw;
  position: relative;
  line-height: 1.8;
}

figure {
  line-height: 0;
}

img {
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

ul, ol {
  list-style: none;
}

.pc {
  display: none;
}

.pcW {
  display: none;
}

.pcS {
  display: none;
}

.sp {
  display: block;
}

.contWrap {
  width: 94%;
  margin: 0 auto;
  box-sizing: border-box;
}

.pArea p:not(:last-of-type),
.pMB {
  margin-bottom: 3.90625vw;
}

.toTop {
  width: 13.0208333333vw;
  position: fixed;
  right: 2.6041666667vw;
  bottom: 2.6041666667vw;
}

@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
  .sp {
    display: none;
  }
  .pcW {
    display: none;
  }
  .pcS {
    display: block;
  }
  .pc {
    display: block;
  }
  .contWrap {
    width: calc(100% - 2.5rem);
    max-width: 1000px;
    box-sizing: border-box;
  }
  .pArea p:not(:last-of-type),
  .pMB {
    margin-bottom: 1rem;
  }
  .toTop {
    width: 3.75rem;
    right: 1.25rem;
    bottom: 1.25rem;
  }
}
@media screen and (min-width: 1080px) {
  .pcS {
    display: none;
  }
  .pcW {
    display: block;
  }
}
.accordionBtn {
  position: relative;
  background: #a5d8ff;
  font-size: 4.53vw;
  line-height: 1;
  color: #004ead;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  height: 12vw;
  border-radius: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accordionBtn::after {
  content: "";
  display: inline-block;
  width: 4vw;
  height: 0.4vw;
  background-color: #004ead;
  position: absolute;
  right: 4vw;
}
.accordionBtn::before {
  content: "";
  display: inline-block;
  width: 4vw;
  height: 0.4vw;
  background-color: #004ead;
  position: absolute;
  right: 4vw;
  transform: rotate(90deg);
}
.accordionBtn.active::before {
  display: none;
}

.accordionContent {
  display: none;
}
.accordionContent.show {
  display: block;
}

@media screen and (min-width: 768px) {
  .accordionBtn {
    max-width: 650px;
    margin-inline: auto;
    height: 90px;
    font-size: 34px;
    line-height: 65px;
    border-radius: 6vw;
  }
  .accordionBtn::after {
    width: 30px;
    height: 2px;
    right: 4vw;
  }
  .accordionBtn::before {
    width: 30px;
    height: 2px;
    right: 4vw;
    transform: rotate(90deg);
  }
  .accordionBtn.active::before {
    display: none;
  }
}
.leadArea {
  margin-bottom: 20.8333333333vw;
}
.leadArea p:nth-of-type(1) {
  margin-bottom: 3.90625vw;
}
.leadArea ul {
  margin-bottom: 7.8125vw;
}
.leadArea .quizLead {
  padding: 5.2083333333vw;
  font-size: 5.7291666667vw;
  font-weight: 700;
  color: #00b16a;
  background-color: #7fffd4;
}
.leadArea .quizLead span {
  background-image: linear-gradient(transparent 76%, #ffe066 76%);
}

h2::after, h2::before {
  width: 0.5208333333vw;
  height: 100%;
  content: "";
  background-color: #004ead;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transform: translateY(-50%) rotate(20deg);
}

h2 {
  margin: 0 auto 13.0208333333vw;
  font-size: 6.5104166667vw;
  font-weight: 700;
  text-align: center;
  color: #004ead;
  position: relative;
}
h2::before {
  left: 5.2083333333vw;
}
h2::after {
  right: 5.2083333333vw;
}

.step > div h3 {
  width: fit-content;
  margin-bottom: 3.90625vw;
  padding: 0.78125vw 2.6041666667vw 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: #fff;
  background-color: #004ead;
}
.step > div h3 span {
  font-family: "Caflisch Script Pro", sans-serif;
  font-size: 19.53125vw;
  line-height: 0;
  color: #a7d8ff;
}
.step > div:nth-child(1) {
  margin-bottom: 3.90625vw;
}
.step:not(:last-of-type) {
  margin-bottom: 18.2291666667vw;
}

.step01 div:nth-child(1) > p {
  margin-bottom: 3.90625vw;
  font-size: 4.9479166667vw;
  font-weight: 700;
}
.step01 div:nth-child(1) dl {
  margin-bottom: 5.2083333333vw;
  display: flex;
}
.step01 div:nth-child(1) dl dd, .step01 div:nth-child(1) dl dt {
  padding: 2.0833333333vw;
  box-sizing: border-box;
  text-align: center;
}
.step01 div:nth-child(1) dl dt {
  width: 40%;
  color: #fff;
  background-color: #00b16a;
}
.step01 div:nth-child(1) dl dd {
  width: 60%;
  background-color: #7fffd4;
}
.step01 div:nth-child(2) {
  padding: 5.2083333333vw;
  background-color: #e5edf7;
}
.step01 div:nth-child(2) p {
  text-align: center;
}
.step01 div:nth-child(2) p:nth-child(2) img {
  width: 36.4583333333vw;
}
.step01 div:nth-child(2) p:not(:last-child) {
  margin-bottom: 3.90625vw;
}
@media (hover: hover) {
  .step01 div:nth-child(2) p a {
    transition: ease 0.3s;
  }
  .step01 div:nth-child(2) p a:hover {
    opacity: 0.7;
  }
}

.step02 div:nth-child(1) p:nth-of-type(1) {
  margin-bottom: 3.90625vw;
}
.step02 div:nth-child(1) p:nth-of-type(1) span {
  font-size: 4.9479166667vw;
  font-weight: 700;
}
.step02 div:nth-child(1) p:nth-of-type(2) {
  padding-left: 3.90625vw;
  text-indent: -3.90625vw;
}

.stepEnd {
  margin: 13.0208333333vw auto;
  font-size: 6.5104166667vw;
  font-weight: 700;
  text-align: center;
  color: #004ead;
}

@media screen and (min-width: 768px) {
  .leadArea {
    margin-bottom: 6.25rem;
  }
  .leadArea p:nth-of-type(1) {
    margin-bottom: 1.875rem;
  }
  .leadArea ul {
    margin-bottom: 3.75rem;
  }
  .leadArea .quizLead {
    padding: 1.25rem;
    font-size: 1.5rem;
    text-align: center;
  }
  h2::after, h2::before {
    width: 0.125rem;
    height: 160%;
    transform: translateY(-50%) rotate(30deg);
  }
  h2 {
    width: fit-content;
    margin: 0 auto 6.25rem;
    padding: 0 7.5rem;
    font-size: 1.75rem;
  }
  h2::before {
    left: 2.5rem;
  }
  h2::after {
    right: 2.5rem;
  }
  .step {
    display: flex;
    justify-content: space-between;
  }
  .step > div {
    width: 48%;
    box-sizing: border-box;
  }
  .step > div h3 {
    margin-bottom: 1.875rem;
    padding: 0.1875rem 1rem 0;
  }
  .step > div h3 span {
    font-size: 5rem;
  }
  .step > div:nth-child(1) {
    margin-bottom: 0;
  }
  .step figure {
    width: 48%;
  }
  .step:not(:last-of-type) {
    margin-bottom: 6.25rem;
  }
  .step01 div:nth-child(1) > p {
    margin-bottom: 1rem;
    font-size: 1.25rem;
  }
  .step01 div:nth-child(1) dl dd, .step01 div:nth-child(1) dl dt {
    padding: 1rem;
  }
  .step01 div:nth-child(2) {
    padding: 1.25rem;
  }
  .step01 div:nth-child(2) p:nth-child(2) img {
    width: 10rem;
  }
  .step01 div:nth-child(2) p:nth-child(3) img {
    width: 10rem;
  }
  .step01 div:nth-child(2) p:not(:last-child) {
    margin-bottom: 1.875rem;
  }
  .step02 div:nth-child(1) p:nth-of-type(1) {
    margin-bottom: 1rem;
  }
  .step02 div:nth-child(1) p:nth-of-type(1) span {
    font-size: 1.25rem;
  }
  .step02 div:nth-child(1) p:nth-of-type(2) {
    padding-left: 1.875rem;
    text-indent: -1.875rem;
  }
  .stepEnd {
    margin: 5rem auto 3.75rem;
    font-size: 1.75rem;
  }
}
@media screen and (min-width: 1080px) {
  .step01 div:nth-child(2) {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1.5fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .step01 div:nth-child(2) p {
    text-align: left;
  }
  .step01 div:nth-child(2) p:nth-child(1) {
    padding-bottom: 1.875rem;
    grid-area: 1/1/2/2;
    display: flex;
    align-items: flex-end;
  }
  .step01 div:nth-child(2) p:nth-child(2) {
    grid-area: 2/1/3/2;
  }
  .step01 div:nth-child(2) p:nth-child(3) {
    grid-area: 1/2/3/3;
    display: flex;
    align-items: center;
  }
  .step01 div:nth-child(2) p:not(:last-child) {
    margin-bottom: 0;
  }
}
/* ------------------------------------------------------------------------ */
/* 2025/09/05クイズページ制作scss

/* ------------------------------------------------------------------------ */
.h1Area {
  height: 75.5208333333vw;
  background-color: #fff;
  background-image: url(/assets_80th/teaser/img/common/bg_flag.png);
  background-size: 78.125vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h1Area h1 {
  width: fit-content;
  margin: auto;
  font-size: 8.3333333333vw;
  font-weight: 700;
  color: #004ead;
}
.h1Area h1 span {
  display: block;
  max-width: 35.73vw;
  width: 100%;
  margin: 0px auto 4.47vw;
  padding: 1.87vw 0;
  font-size: 4.9479166667vw;
  line-height: 1;
  color: #fff;
  background-color: #004ead;
  border-radius: 2.6041666667vw;
}
.h1Area h1.hasSpan {
  position: relative;
  top: -1.47vw;
  text-align: center;
  line-height: 12.93vw;
}

main.contWrap {
  margin: 3.8125vw auto;
  margin-bottom: 5.6vw;
  padding-top: 3.87vw;
  padding-inline: 3.87vw;
}

.image-area__img {
  width: 100%;
  height: auto;
}
.image-area__note {
  text-align: right;
  font-size: 3.2vw;
}

@media screen and (min-width: 768px) {
  .h1Area {
    height: 25rem;
    background-size: 37.5rem;
  }
  .h1Area h1 {
    line-height: 1;
    font-size: 2.125rem;
  }
  .h1Area h1 span {
    margin: 0 auto 1.25rem;
    padding: 0 1.25rem 0.125rem;
    font-size: 1.25rem;
    border-radius: 0.625rem;
    line-height: 1.5;
    max-width: fit-content;
    width: auto;
  }
  .h1Area h1.hasSpan {
    top: -1.5rem;
    line-height: 1.5;
  }
}
@media screen and (min-width: 768px) {
  .image-area {
    max-width: 653px;
    margin-inline: auto;
  }
  .image-area__img {
    margin-inline: auto;
    display: block;
  }
  .image-area__note {
    font-size: 18px;
    margin-top: 16px;
  }
}
.tips-area {
  margin-top: 9.67vw;
  position: relative;
  background-color: #E5EDF7;
  padding: 2.33vw 5.2vw 6.67vw;
  text-align: center;
}
.tips-area__title {
  font-size: 5.6vw;
  line-height: 8.67vw;
  font-weight: 700;
  font-family: "Zen Maru Gothic";
  text-align: center;
  color: #3c3c3c;
  margin: 0;
  margin-left: 10.07vw;
}
.tips-area__title::before {
  content: "";
  display: inline-block;
  background: url(/assets_80th/quiz/img/img_tips_icon.png) no-repeat center center/cover;
  width: 8vw;
  height: 14vw;
  transform: translateY(0%) rotate(0deg);
  position: absolute;
  left: 42%;
  top: -20px;
  transform: translateX(-167%);
}
.tips-area__title::after {
  display: none;
}
.tips-area__text {
  margin-top: 5.33vw;
  line-height: 8vw;
  font-size: 4vw;
  text-align: left;
}
.tips-area__tipsBtn {
  font-size: 4.53vw;
  margin-top: 6.67vw;
  border-radius: 1.33vw;
  text-align: left;
  background-color: #004ead;
  color: #ffffff;
}
.tips-area__tipsBtn::before {
  background-color: #fff;
}
.tips-area__tipsBtn::after {
  background-color: #fff;
}
.tips-area__btn {
  display: inline-flex; /* インラインフレックスにする */
  align-items: center; /* 縦方向を中央揃え */
  justify-content: center; /* 横方向を中央揃え */
  background-color: #004ead;
  font-size: 4vw;
  line-height: 7.2vw;
  color: #ffffff;
  font-weight: 500;
  max-width: 45.33vw;
  width: 100%;
  margin-inline: auto;
  margin-top: 8.4vw;
  padding-block: 1.47vw;
  border-radius: 0.67vw;
  text-decoration: none; /* 必要なら追加 */
}
.tips-area__btn::after {
  content: "";
  display: inline-block;
  background: url(/assets_80th/quiz/img/img_tips_btn.png) no-repeat center/contain;
  width: 2.4vw;
  height: 2.4vw;
  margin-left: 0.8vw; /* 文字との間隔 */
}

@media screen and (min-width: 768px) {
  .tips-area {
    margin-top: 80px;
    padding: 35px 50px;
  }
  .tips-area__title {
    font-size: 42px;
    line-height: 65px;
    margin-left: 0;
    width: auto;
  }
  .tips-area__title::before {
    width: 61px;
    height: 106px;
  }
  .tips-area__text {
    margin-top: 60px;
    font-size: 30px;
    line-height: 2.5;
    text-align: center;
  }
  .tips-area__tipsBtn {
    font-size: 34px;
    line-height: 65px;
    margin-top: 50px;
    border-radius: 10px;
    text-align: left;
    background-color: #004ead;
    color: #ffffff;
  }
  .tips-area__tipsBtn::before {
    background-color: #fff;
  }
  .tips-area__tipsBtn::after {
    background-color: #fff;
  }
  .tips-area__btn {
    display: block;
    width: 341px;
    font-size: 30px;
    line-height: 1;
    margin-top: 60px;
    padding: 22px;
  }
  .tips-area__btn::after {
    margin-left: 12px;
    width: 18px;
    height: 18px;
  }
  .tips-area__btn + a {
    margin-top: 30px;
  }
}
.answer-area {
  margin-top: 11vw;
}
.answer-area__05 {
  margin-top: 10vw;
}
.answer-area .input05 {
  background-color: #E5EDF7;
  border: none;
  border-radius: 0.67vw;
  width: calc(100% - 8.54vw);
  height: 12vw;
  padding: 0 4.27vw;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: max(3.2vw, 16px);
  font-weight: 500;
}
.answer-area .button05 {
  position: relative;
  display: block;
  max-width: 45.33vw;
  width: 100%;
  height: 9.6vw;
  background-color: #004EAD;
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 4.27vw;
  font-weight: 500;
  border: none;
  border-radius: 0.67vw;
  margin-top: 6.93vw;
  margin-inline: auto;
}
.answer-area .button05::before {
  content: "";
  background-image: url(/assets_80th/teaser/img/common/arrow_white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  width: 2vw;
  height: 2vw;
  position: absolute;
  top: 51%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transform: translateY(-46%);
  transform: translateY(-46%);
  right: 18%;
}
.answer-area__title {
  font-size: 5.6vw;
  line-height: 7.2vw;
  color: #333333;
  font-weight: 700;
  font-family: "Zen Maru Gothic";
  text-align: center;
  margin-bottom: 0;
}
.answer-area__title::before {
  display: block;
  background-color: #333333;
  width: 1px;
  transform: translateY(-50%) rotate(332deg);
  height: 10vw;
  left: 13.67vw;
}
.answer-area__title::after {
  display: block;
  background-color: #333333;
  width: 1px;
  transform: translateY(-50%) rotate(28deg);
  height: 10vw;
  right: 13.67vw;
}
.answer-area__supplement {
  font-size: 3.2vw;
  line-height: 7.2vw;
  color: #333333;
  font-weight: 500;
  text-align: center;
  margin-top: 1.6vw;
}
.answer-area .btn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 4vw;
  grid-row-gap: 4vw;
  margin-top: 4.8vw;
}
.answer-area .btn-grid__btn {
  max-width: 41.33vw;
  width: 100%;
  height: 25.6vw;
  border-radius: 1.33vw;
  cursor: pointer;
  color: #333333;
}
.answer-area .btn-grid .btn-green {
  background-color: #e9f6de;
  border: 0.27vw solid #6fc024;
}
.answer-area .btn-grid .btn-green .btn__alphabet {
  background-color: #6fc024;
}
.answer-area .btn-grid .btn-yellow {
  background-color: #fcf1d9;
  border: 0.27vw solid #eca200;
  position: relative;
}
.answer-area .btn-grid .btn-yellow::after {
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border: 0.27vw solid #eca200;
  border-radius: 0.53vw;
  width: calc(100% - 1.6vw);
  height: calc(100% - 1.6vw);
}
.answer-area .btn-grid .btn-yellow .btn__alphabet {
  background-color: #eca200;
}
.answer-area .btn-grid .btn-blue {
  background-color: #E8E3F7;
  border: 0.7vw solid #6446C8;
}
.answer-area .btn-grid .btn-blue .btn__alphabet {
  background-color: #6446C8;
}
.answer-area .btn-grid .btn-red {
  background-color: #f8ddd9;
  border: 0.5vw dashed #d11900;
}
.answer-area .btn-grid .btn-red .btn__alphabet {
  background-color: #d11900;
}
.answer-area .btn-grid .btn-pink {
  background-color: #fae9f3;
  border: 0.13vw dashed #e06cb0;
}
.answer-area .btn-grid .btn-pink .btn__alphabet {
  background-color: #e06cb0;
}
.answer-area .btn-grid .btn__alphabet {
  top: -20px;
  left: 0;
  right: 0;
  margin-inline: auto;
  font-size: 4.8vw;
  color: #ffffff;
  font-weight: 700;
  width: 9.47vw;
  height: 9.47vw;
  margin-inline: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.answer-area .btn-grid .btn__text {
  font-size: 6.13vw;
  font-weight: 700;
  font-family: "Zen Maru Gothic";
  text-align: center;
}
.answer-area .btn-grid__modal--flex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 4vw;
  grid-row-gap: 4vw;
  margin-top: 8.67vw;
}
.answer-area .modal {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1010;
  background: #fff;
  padding: 13.33vw 6.93vw;
  border-radius: 1em;
  max-width: 86.67vw;
  width: 100%;
  height: auto;
  border-radius: 1.33vw;
  font-size: 5.73vw;
  line-height: 8.67vw;
  text-align: center;
}
.answer-area .modal.active {
  display: block;
  font-weight: 700;
}
.answer-area .modal__yes, .answer-area .modal__no {
  position: relative;
  max-width: 41.33vw;
  width: 100%;
  height: 25.6vw;
  border-radius: 1.33vw;
  color: #333333;
  font-size: 6.13vw;
  font-weight: 700;
  font-family: "Zen Maru Gothic";
  text-align: center;
  padding-top: 11.33vw;
}
.answer-area .modal__yes::before, .answer-area .modal__no::before {
  content: "";
  position: absolute;
  top: 2.33vw;
  left: 0;
  right: 0;
  margin-inline: auto;
  font-size: 4.8vw;
  color: #ffffff;
  font-weight: 700;
  width: 9.47vw;
  height: 9.47vw;
  margin-inline: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.answer-area .modal__yes::after, .answer-area .modal__no::after {
  top: 7vw;
}
.answer-area .modal__yes {
  background-color: #f8ddd9;
  border: 0.5vw dashed #d11900;
}
.answer-area .modal__yes .btn__alphabet {
  background-color: #d11900;
}
.answer-area .modal__yes {
  font-size: 6.13vw;
  cursor: pointer;
}
.answer-area .modal__yes::before {
  background-color: #d11900;
}
.answer-area .modal__yes::after {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  transform: translateY(-50%);
  font-family: "Font Awesome 6 Free";
  font-size: 4.53vw;
  font-weight: 400;
  content: "\f111";
  color: #fff;
}
.answer-area .modal__no {
  font-size: 4.53vw;
  border: 2px solid #333;
  cursor: pointer;
}
.answer-area .modal__no::before {
  background-color: #333333;
}
.answer-area .modal__no::after {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  transform: translateY(-50%);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f00d";
  color: #fff;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: none;
  transition: opacity 0.2s;
  opacity: 0;
  pointer-events: none;
}
.modal-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

@media screen and (min-width: 768px) {
  .answer-area {
    margin-top: 90px;
  }
  .answer-area__05 {
    margin-top: 75px;
  }
  .answer-area .input05 {
    height: 90px;
    font-size: 24px;
  }
  .answer-area .button05 {
    margin-top: 52px;
    height: 72px;
    font-size: 30px;
  }
  .answer-area__title {
    font-size: 42px;
    line-height: 54px;
  }
  .answer-area__title::before {
    width: 2px;
    height: 74px;
    left: 41px;
  }
  .answer-area__title::after {
    width: 2px;
    height: 74px;
    right: 41px;
  }
  .answer-area__supplement {
    font-size: 24px;
    line-height: 54px;
  }
  .answer-area .btn-grid {
    max-width: 650px;
    margin-inline: auto;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin-top: 4.8vw;
  }
  .answer-area .btn-grid__btn {
    max-width: 310px;
    height: auto;
    padding: 25px 0 35px;
  }
  .answer-area .btn-grid .btn__alphabet {
    font-size: 36px;
    width: 71px;
    height: 71px;
    border-radius: 35px;
  }
  .answer-area .btn-grid .btn__text {
    font-size: 46px;
  }
  .answer-area .modal {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 78px 52px;
    border-radius: 1em;
    max-width: 650px;
    border-radius: 1.33vw;
    font-size: 43px;
    line-height: 65px;
  }
  .answer-area .modal__yes, .answer-area .modal__no {
    width: 100%;
    height: 200px;
    border-radius: 1.33vw;
    font-size: 46px;
    padding-top: 87px;
  }
  .answer-area .modal__yes::before, .answer-area .modal__no::before {
    width: 71px;
    height: 71px;
    border-radius: 35px;
    top: 26px;
    left: 0;
    right: 0;
    margin-inline: auto;
  }
  .answer-area .modal__yes::after, .answer-area .modal__no::after {
    top: 62px;
    left: 0;
    right: 0;
    margin-inline: auto;
  }
  .answer-area .modal__yes {
    background-color: #f8ddd9;
    border: 0.5vw dashed #d11900;
  }
  .answer-area .modal__yes .btn__alphabet {
    background-color: #d11900;
  }
  .answer-area .modal__yes {
    font-size: 46px;
  }
  .answer-area .modal__yes::after {
    font-size: 37px;
  }
  .answer-area .modal__no {
    font-size: 34px;
  }
  .answer-area .modal__no::after {
    position: absolute;
  }
}
.deadline {
  background-color: #004ead;
  padding-top: 8.8vw;
  padding-bottom: 8.8vw;
  margin-top: 10.13vw;
  font-size: 4.53vw;
  line-height: 1;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}
.deadline__period {
  margin-top: 4.67vw;
  font-size: 5.6vw;
}
.deadline__note {
  margin-top: 15px;
  font-size: 4vw;
}
.deadline__note li {
  padding-left: 1em;
  text-indent: -1em;
}
.deadline__link {
  position: relative;
  display: block;
  background-color: #fae222;
  max-width: 71.47vw;
  height: 12.53vw;
  border-radius: 6.27vw;
  margin-inline: auto;
  margin-bottom: 7.47vw;
  font-size: 4vw;
  line-height: 6vw;
  color: #004ead;
  font-weight: 700;
  text-align: center;
  line-height: 12.53vw;
  text-decoration: none;
}
.deadline__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6vw;
  transform: translateY(-50%);
  background: url(/assets_80th/quiz/img/img_apply_btn.png) no-repeat center/contain;
  width: 2.4vw;
  height: 2.4vw;
}

@media screen and (min-width: 768px) {
  .deadline {
    padding-top: 72px;
    padding-bottom: 66px;
    margin-top: 74px;
    font-size: 34px;
    line-height: 1;
  }
  .deadline__note {
    margin-top: 42px;
    font-size: 30px;
    line-height: 60px;
  }
  .deadline__note__note li {
    padding-left: 1.5em;
    text-indent: -1.5em;
  }
  .deadline__period {
    margin-top: 35px;
    font-size: 42px;
    line-height: 65px;
  }
  .deadline__link {
    font-size: 30px;
    line-height: 94px;
    max-width: 536px;
    height: 94px;
    border-radius: 47px;
    margin-bottom: 60px;
  }
  .deadline__link::after {
    width: 18px;
    height: 18px;
    top: 52%;
    right: 50px;
  }
}
.past-presents {
  margin-top: 10.4vw;
  overflow: hidden;
}
.past-presents__supplement {
  margin-top: 4.27vw;
  font-size: 4vw;
  line-height: 8vw;
  font-weight: 500;
  text-align: center;
}
.past-presents ul.past-presents__supplement {
  margin-top: 15px;
  text-align: left;
}
.past-presents ul.past-presents__supplement li {
  padding-left: 1em;
  text-indent: -1em;
}
.past-presents .presents {
  margin-top: 6.67vw;
}
.past-presents .presents .item {
  border-bottom: 0.27vw solid #b3cae6;
  padding-bottom: 7.73vw;
  margin-top: 8.8vw;
}
.past-presents .presents .item:first-child {
  margin-top: 0;
}
.past-presents .presents .item:last-child {
  border: none;
  padding-bottom: 0;
}
.past-presents .presents .item__title {
  font-size: 4vw;
  line-height: 8vw;
  color: #004ead;
  font-weight: 700;
}
.past-presents .presents .item__participants {
  margin-top: 2.4vw;
  width: 21.47vw;
  height: 7.73vw;
  background-color: #e6edf7;
  font-size: 4vw;
  line-height: 1;
  color: #333333;
  font-weight: 500;
  font-family: "Zen Maru Gothic";
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.past-presents .presents .item__description {
  margin-top: 5.87vw;
  font-size: 4vw;
  line-height: 8vw;
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  .past-presents {
    margin-top: 55px;
  }
  .past-presents__supplement {
    margin-top: 42px;
    font-size: 30px;
    line-height: 60px;
  }
  .past-presents .presents .item {
    border-bottom: 2px solid #b3cae6;
    padding-bottom: 67px;
    margin-top: 66px;
  }
  .past-presents .presents .item__title {
    font-size: 30px;
    line-height: 60px;
  }
  .past-presents .presents .item__participants {
    margin-top: 27px;
    width: 161px;
    height: 58px;
    font-size: 30px;
    line-height: 60px;
  }
  .past-presents .presents .item__description {
    margin-top: 60px;
    font-size: 30px;
    line-height: 60px;
  }
  .past-presents .presents .item .img02_01 {
    max-width: 203px;
    margin-top: 50px;
  }
  .past-presents .presents .item .img02_02 {
    max-width: 232px;
    margin-top: 40px;
  }
  .past-presents .presents .item .img02_03 {
    max-width: 343px;
    margin-top: 50px;
  }
  .past-presents .presents .item .img03_01 {
    max-width: 511px;
    margin-top: 50px;
  }
  .past-presents .presents .item .img03_02 {
    max-width: 407px;
    margin-top: 40px;
  }
  .past-presents .presents .item .img03_03 {
    max-width: 409px;
    margin-top: 50px;
  }
  .past-presents .presents .item .img04_01 {
    max-width: 533px;
    margin-top: 50px;
  }
  .past-presents .presents .item .img04_02 {
    max-width: 533px;
    margin-top: 50px;
  }
  .past-presents .presents .item .img04_03 {
    max-width: 533px;
    margin-top: 50px;
  }
  .past-presents .presents .item .img05_01 {
    max-width: 533px;
    margin-top: 50px;
  }
  .past-presents .presents .item .img05_02 {
    max-width: 533px;
    margin-top: 50px;
  }
  .past-presents .presents .item .img05_03 {
    max-width: 448px;
    margin-top: 50px;
  }
  .past-presents .presents .item .img05_04 {
    max-width: 533px;
    margin-top: 50px;
  }
}
.shipping {
  margin-top: 7.33vw;
}
.shipping ul {
  margin-top: 5.87vw;
  font-size: 4vw;
  line-height: 8vw;
  font-weight: 500;
}
.shipping ul li {
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.shipping ul span {
  margin-right: 0.5em;
}
.shipping p {
  margin-top: 5.33vw;
}

@media screen and (min-width: 768px) {
  .shipping {
    margin-top: 55px;
  }
  .shipping ul {
    margin-top: 42px;
    font-size: 30px;
    line-height: 60px;
  }
  .shipping ul li {
    padding-left: 1.5em;
    text-indent: -1.5em;
  }
  .shipping ul span {
    margin-right: 0.5em;
  }
  .shipping p {
    margin-top: 38px;
    font-size: 30px;
  }
}
.past-quizzes {
  margin-top: 7.33vw;
}
.past-quizzes ul {
  margin-top: 5.87vw;
  font-size: 4vw;
  line-height: 8vw;
  font-weight: 500;
}
.past-quizzes ul li {
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.past-quizzes ul span {
  margin-right: 0.5em;
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .past-quizzes {
    margin-top: 55px;
  }
  .past-quizzes ul {
    margin-top: 42px;
    font-size: 30px;
    line-height: 60px;
  }
  .past-quizzes ul li {
    padding-left: 1.5em;
    text-indent: -1.5em;
  }
  .past-quizzes ul span {
    margin-right: 0.5em;
  }
}
.privacy-policy {
  margin-top: 7.33vw;
  margin-bottom: 9vw;
}
.privacy-policy p {
  margin-top: 5.87vw;
}
.privacy-policy ul {
  margin-top: 5.87vw;
  font-size: 4vw;
  line-height: 8vw;
  font-weight: 500;
}
.privacy-policy ul li {
  margin-top: 15px;
  padding-left: 1em;
  text-indent: -1em;
}
.privacy-policy ul span {
  margin-right: 0.5em;
}

@media screen and (min-width: 768px) {
  .privacy-policy {
    margin-top: 55px;
    margin-bottom: 105px;
  }
  .privacy-policy p {
    margin-top: 38px;
    font-size: 30px;
  }
  .privacy-policy ul {
    margin-top: 42px;
    font-size: 30px;
    line-height: 60px;
  }
  .privacy-policy ul li {
    padding-left: 1.5em;
    text-indent: -1.5em;
  }
  .privacy-policy ul span {
    margin-right: 0.5em;
  }
}
.result-area .inner {
  position: relative;
  padding-bottom: 30.67vw;
}
.result-area .five {
  padding-bottom: 11.67vw;
}
.result-area video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.result-area__left {
  max-width: 24.13vw;
  width: 100%;
  position: absolute;
  left: -2.67vw;
  top: 22.13vw;
  transform: translateX(-50px);
  opacity: 0;
  animation: slideInLeft 0.8s ease-in forwards;
}
.result-area__right {
  max-width: 24.13vw;
  width: 100%;
  position: absolute;
  right: -2.67vw;
  top: 22.13vw;
  transform: translateX(50px);
  opacity: 0;
  animation: slideInRight 0.8s ease-in forwards;
}
.result-area {
  /* 左下から斜めにスライドイン */
}
@keyframes slideInLeft {
  0% {
    transform: translate(-50px, 50px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.result-area {
  /* 右下から斜めにスライドイン */
}
@keyframes slideInRight {
  0% {
    transform: translate(50px, 50px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.result-area__answer {
  position: absolute;
  top: 16.53vw;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 10.67vw;
  line-height: 8.67vw;
  color: #333333;
  text-align: center;
}
.result-area__answer::before {
  display: none;
}
.result-area__answer::after {
  display: none;
}
.result-area__btn {
  border-radius: 1.07vw;
  max-width: 41.07vw;
  width: 100%;
  height: 30.33vw;
  position: absolute;
  right: 0;
  left: 0;
  margin-inline: auto;
  bottom: 8vw;
}
.result-area .btn-green {
  background-color: #e9f6de;
  border: 0.27vw solid #6fc024;
}
.result-area .btn-green .btn__alphabet {
  background-color: #6fc024;
}
.result-area .btn-yellow {
  background-color: #fcf1d9;
  border: 0.27vw solid #eca200;
  position: relative;
}
.result-area .btn-yellow::after {
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border: 0.27vw solid #eca200;
  border-radius: 0.53vw;
  width: calc(100% - 1.6vw);
  height: calc(100% - 1.6vw);
}
.result-area .btn-yellow .btn__alphabet {
  background-color: #eca200;
}
.result-area .btn-blue {
  background-color: #E8E3F7;
  border: 0.7vw solid #6446C8;
}
.result-area .btn-blue .btn__alphabet {
  background-color: #6446C8;
}
.result-area .btn-red {
  background-color: #f8ddd9;
  border: 0.5vw dashed #d11900;
}
.result-area .btn-red .btn__alphabet {
  background-color: #d11900;
}
.result-area .btn-pink {
  background-color: #fae9f3;
  border: 0.13vw dashed #e06cb0;
}
.result-area .btn-pink .btn__alphabet {
  background-color: #e06cb0;
}
.result-area .btn__alphabet {
  top: -20px;
  left: 0;
  right: 0;
  margin-inline: auto;
  font-size: 4.8vw;
  color: #ffffff;
  font-weight: 700;
  width: 9.47vw;
  height: 9.47vw;
  margin-inline: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-area .btn__text {
  font-size: 6.13vw;
  font-weight: 700;
  font-family: "Zen Maru Gothic";
  color: #333333;
  text-align: center;
}
.result-area__text {
  font-size: 4vw;
  line-height: 8vw;
  color: #333333;
  font-weight: 500;
}
.result-area__number {
  font-size: 15.73vw;
  line-height: 1;
  color: #004ead;
  font-weight: 700;
  text-align: center;
  margin-top: -6.73vw;
}

@media screen and (min-width: 768px) {
  .result-area .inner {
    padding-bottom: 190px;
  }
  .result-area .five {
    padding-bottom: 100px;
  }
  .result-area video {
    max-width: 650px;
    margin: 0 auto;
    display: block;
  }
  .result-area__answer {
    top: 124px;
    font-size: 80px;
    line-height: 65px;
  }
  .result-area__left {
    max-width: 181px;
    width: 100%;
    position: absolute;
    left: -2.67vw;
    top: 195px;
  }
  .result-area__right {
    max-width: 181px;
    width: 100%;
    position: absolute;
    right: -2.67vw;
    top: 195px;
  }
  .result-area__btn {
    max-width: 306px;
    height: 190px;
    bottom: 30px;
  }
  .result-area .btn__alphabet {
    width: 71px;
    height: 71px;
    font-size: 36px;
  }
  .result-area .btn__text {
    font-size: 46px;
  }
  .result-area__text {
    font-size: 30px;
    line-height: 60px;
  }
  .result-area__number {
    font-size: 118px;
    line-height: 1;
    color: #004ead;
    font-weight: 700;
    text-align: center;
    margin-top: -54px;
  }
}
.explanation {
  margin-top: 15.6vw;
}
.explanation__text {
  font-size: 4vw;
  letter-spacing: -0.27vw;
  line-height: 8vw;
  font-weight: 500;
}
.explanation__btn {
  position: relative;
  background: #a5d8ff;
  font-size: 4.53vw;
  line-height: 1;
  color: #004ead;
  font-weight: 700;
  text-align: center;
  height: 12vw;
  border-radius: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .explanation {
    margin-top: 117px;
  }
  .explanation__text {
    font-size: 30px;
    letter-spacing: -1px;
    line-height: 60px;
  }
  .explanation__btn {
    max-width: 650px;
    margin-inline: auto;
    height: 90px;
    font-size: 34px;
    line-height: 65px;
    border-radius: 6vw;
  }
}
.wrong-area {
  margin-top: 7.73vw;
  margin-bottom: 5vw;
}
.wrong-area__text {
  font-size: 4vw;
  line-height: 8vw;
  font-weight: 500;
  text-align: center;
}
.wrong-area__answer {
  margin-top: 9.33vw;
  margin-bottom: 15.73vw;
  font-size: 10.67vw;
  line-height: 8.67vw;
  color: #333333;
  text-align: center;
}
.wrong-area__answer::before {
  display: none;
}
.wrong-area__answer::after {
  display: none;
}
.wrong-area__exenp {
  font-size: min(3.4vw, 26px);
  text-align: center;
}
.wrong-area__link {
  display: block;
}
.wrong-area__img {
  margin-top: 3.33vw;
}
.wrong-area__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fae222;
  max-width: 71.47vw;
  height: 12.53vw;
  border-radius: 6.27vw;
  margin-top: 6.13vw;
  margin-inline: auto;
  margin-bottom: 7.47vw;
  font-size: 4vw;
  line-height: 6vw;
  color: #004ead;
  font-weight: 700;
}
.wrong-area__btn::before {
  content: "";
  background-image: url(/assets_80th/teaser/img/common/arrow_blue.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  width: 2vw;
  height: 2vw;
  position: absolute;
  top: 51%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transform: translateY(-46%);
  transform: translateY(-46%);
  right: 22%;
}

@media screen and (min-width: 768px) {
  .wrong-area {
    margin-top: 100px;
    margin-bottom: 50px;
  }
  .wrong-area__text {
    font-size: 30px;
    line-height: 60px;
  }
  .wrong-area__answer {
    margin-top: 83px;
    margin-bottom: 111px;
    font-size: 80px;
    line-height: 65px;
  }
  .wrong-area__btn {
    font-size: 30px;
    line-height: 45px;
    max-width: 536px;
    height: 94px;
    border-radius: 47px;
    margin-top: 60px;
    margin-inline: auto;
    margin-bottom: 7.47vw;
  }
  .wrong-area__btn::before {
    width: 18px;
    height: 18px;
    right: 20%;
  }
  .wrong-area__img {
    display: block;
    max-width: 600px;
    width: 100%;
    margin-top: 26px;
    margin-inline: auto;
  }
}

/*# sourceMappingURL=quiz.css.map */