@charset "UTF-8";
/* ==========================================================================
   variables
========================================================================== */
/*===========================================
# Color
/*===========================================*/
/*===========================================
# Font Famiry
/*===========================================*/
/*===========================================
# root
/*===========================================*/
/* ==========================================================================
   function
========================================================================== */
/* ==========================================================================
  mixin
========================================================================== */
/* --------------------------------------------------------------------------
  media query (SP（小）→ PC（大）の順に適用)
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
  arrow 
-------------------------------------------------------------------------- */
/*# アロー
/*===========================================*/
/* --------------------------------------------------------------------------
  login icon
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
  button size
-------------------------------------------------------------------------- */
/* ==========================================================================
  quiz
========================================================================== */
.p-quiz-type {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
@media screen and (max-width: 767px) {
  .p-quiz-type {
    gap: 6.4vw;
  }
}
.p-quiz-type.p-quiz-type--other {
  -moz-column-gap: 16px;
       column-gap: 16px;
}
.p-quiz-type.p-quiz-type--other .p-quiz-type__item {
  padding: 24px;
  width: calc((100% - 48px) / 4);
}
@media screen and (max-width: 767px) {
  .p-quiz-type.p-quiz-type--other .p-quiz-type__item {
    padding: 6.4vw;
    width: 100%;
  }
}
.p-quiz-type.p-quiz-type--other .p-quiz-type__number {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  font-size: 28px;
}
@media screen and (max-width: 767px) {
  .p-quiz-type.p-quiz-type--other .p-quiz-type__number {
    flex: 0 0 14.9333333333vw;
    width: 14.9333333333vw;
    height: 14.9333333333vw;
    font-size: 7.4666666667vw;
  }
}

.p-quiz-type__item {
  width: calc((100% - 48px) / 3);
  padding: 32px;
  border: 1px solid #D5D5D6;
}
@media screen and (max-width: 767px) {
  .p-quiz-type__item {
    width: 100%;
    padding: 8.5333333333vw;
  }
}

.p-quiz-type__title {
  display: flex;
  align-items: center;
  -moz-column-gap: 16px;
       column-gap: 16px;
  margin: 16px 0;
}
@media screen and (max-width: 767px) {
  .p-quiz-type__title {
    -moz-column-gap: 4.2666666667vw;
         column-gap: 4.2666666667vw;
    margin: 4.2666666667vw 0;
  }
}

.p-quiz-type__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  font-family: "Alumni Sans", sans-serif;
  line-height: 1.45;
  background: #0089A8;
  color: #fff;
  font-size: 40px;
}
@media screen and (max-width: 767px) {
  .p-quiz-type__number {
    width: 16vw;
    height: 16vw;
    font-size: 10.6666666667vw;
  }
}

.p-quiz-select {
  padding: 56px 80px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-quiz-select {
    padding: 4.2666666667vw;
  }
}
.p-quiz-select .p-quiz-type__number {
  margin: 0 auto;
}

.p-quiz-select__item {
  display: flex;
}
.p-quiz-select__item:has(a) {
  display: block;
}
.p-quiz-select__item a {
  display: flex;
}
.p-quiz-select__item.p-quiz-select__item--answer {
  pointer-events: none;
}
.p-quiz-select__item.p-quiz-select__item--answer .p-quiz-select__number {
  background: #EDEAE5;
  color: #2C2D31;
}
.p-quiz-select__item.p-quiz-select__item--answer .p-quiz-select__text {
  color: #D5D5D6;
}
.p-quiz-select__item.selected .p-quiz-select__number {
  background: #0089A8;
  color: #fff;
}
.p-quiz-select__item.selected .p-quiz-select__text {
  color: #0089A8;
}
.p-quiz-select__item + .p-quiz-select__item {
  margin-top: 16px;
}
@media screen and (max-width: 767px) {
  .p-quiz-select__item + .p-quiz-select__item {
    margin-top: 4.2666666667vw;
  }
}
.p-quiz-select__item:not(.p-quiz-select__item--answer):hover .p-quiz-select__number {
  background: #0089A8;
  color: #fff;
}

.p-quiz-select__image {
  max-width: 700px;
  margin: 40px auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-quiz-select__image {
    margin: 10.6666666667vw auto;
  }
}
.p-quiz-select__image img {
  max-width: 100%;
  width: auto;
}

.p-quiz-select__movie {
  max-width: 700px;
  margin: 40px auto;
}
@media screen and (max-width: 767px) {
  .p-quiz-select__movie {
    margin: 10.6666666667vw auto;
  }
}
.p-quiz-select__movie iframe {
  aspect-ratio: 16/9;
  width: 100%;
}

.p-quiz-select__number {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Alumni Sans", sans-serif;
  line-height: 1.45;
  background: #2C2D31;
  color: #fff;
  font-size: 40px;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .p-quiz-select__number {
    flex: 0 0 72px;
    width: 72px;
    min-height: 72px;
  }
}
@media screen and (max-width: 767px) {
  .p-quiz-select__number {
    flex: 0 0 10.6666666667vw;
    height: auto;
    font-size: 5.3333333333vw;
  }
}

.p-quiz-select__text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 100%;
  text-align: center;
  background: #fff;
}
@media screen and (min-width: 768px) {
  .p-quiz-select__text {
    padding: 0 30px;
  }
}
@media screen and (max-width: 767px) {
  .p-quiz-select__text {
    padding: 2.1333333333vw;
    font-size: 4.2666666667vw;
  }
}

.p-quiz-grades {
  display: flex;
  margin-top: 16px;
}
@media screen and (max-width: 767px) {
  .p-quiz-grades {
    margin-top: 4.2666666667vw;
  }
}

.p-quiz-grades__item {
  width: 20%;
  border: 1px solid #D5D5D6;
}

.p-quiz-grades__number {
  background: #676767;
  color: #fff;
  padding: 10px 0;
  line-height: 1.45;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #D5D5D6;
}
@media screen and (max-width: 767px) {
  .p-quiz-grades__number {
    padding: 2.6666666667vw 0;
    font-size: 3.7333333333vw;
  }
}

.p-quiz-grades__icon {
  padding: 10px 0;
  width: 64px;
  margin: 0 auto;
  height: 84px;
}
@media screen and (max-width: 767px) {
  .p-quiz-grades__icon {
    padding: 2.6666666667vw 0;
    width: 17.0666666667vw;
    height: 22.4vw;
  }
}

.p-quiz-answer {
  height: 400px;
}
@media screen and (max-width: 767px) {
  .p-quiz-answer {
    height: 80vw;
  }
}

.p-quiz-answer__result {
  position: relative;
  text-align: center;
  padding-top: 94px;
}
@media screen and (max-width: 767px) {
  .p-quiz-answer__result {
    padding-top: 20vw;
  }
}
.p-quiz-answer__result::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  width: 320px;
  aspect-ratio: 320/320;
}
@media screen and (max-width: 767px) {
  .p-quiz-answer__result::before {
    width: 66.6666666667vw;
  }
}

.p-quiz-answer__correct::before {
  background-image: url("../img//about/quiz/correct02.png");
}

.p-quiz-answer__incorrect::before {
  background-image: url("../img//about/quiz/incorrect02.png");
}

.p-quiz-explanation__image {
  max-width: 1080px;
  padding: 0 20px;
  margin: 16px auto 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-quiz-explanation__image {
    margin: 4.2666666667vw auto 0;
    padding: 0 5.3333333333vw;
  }
}
.p-quiz-explanation__image img {
  max-width: 100%;
  width: auto;
}

.p-quiz-explanation__movie {
  margin-top: 16px;
  width: 400px;
}
@media screen and (max-width: 767px) {
  .p-quiz-explanation__movie {
    margin-top: 4.2666666667vw;
    width: 100%;
  }
}
.p-quiz-explanation__movie iframe {
  aspect-ratio: 16/9;
  width: 100%;
}

.p-quiz-explanation__box {
  position: relative;
  margin-top: 32px;
}
@media screen and (min-width: 768px) {
  .p-quiz-explanation__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
@media screen and (max-width: 767px) {
  .p-quiz-explanation__box {
    margin-top: 8.5333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .p-quiz-explanation__box .c-button-black {
    margin-top: 8.5333333333vw;
    text-align: center;
  }
}

.p-quiz-explanation__link a {
  display: block;
}

@media screen and (min-width: 768px) {
  .p-quiz-explanation__button {
    position: absolute;
    top: 0;
    right: 0;
  }
}

.p-quiz-result {
  padding: 80px 56px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-quiz-result {
    padding: 21.3333333333vw 14.9333333333vw;
  }
}
.p-quiz-result.p-quiz-result--perfect {
  background-image: url("../img//about/quiz/perfect-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}
.p-quiz-result.p-quiz-result--perfect .p-quiz-result__bnr {
  background: #F7F5F1;
  color: #2C2D31;
}
.p-quiz-result.p-quiz-result--perfect .p-quiz-result__title {
  position: relative;
  color: #fff;
  z-index: 2;
}
.p-quiz-result.p-quiz-result--perfect .p-quiz-result__title span {
  display: block;
}
.p-quiz-result.p-quiz-result--perfect .p-quiz-result__text {
  color: #6AC9D3;
  font-family: "Alumni Sans", sans-serif;
  line-height: 1.45;
  font-size: 40px;
}
@media screen and (max-width: 767px) {
  .p-quiz-result.p-quiz-result--perfect .p-quiz-result__text {
    font-size: 10.6666666667vw;
  }
}

.p-quiz-result__bnr {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 365px;
  height: 62px;
  margin: 0 auto;
  background: #0089A8;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .p-quiz-result__bnr {
    max-width: 97.3333333333vw;
    height: 16.5333333333vw;
  }
}

.p-quiz-result__title {
  text-align: center;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .p-quiz-result__title {
    margin-top: 10.6666666667vw;
  }
}
.p-quiz-result__title span {
  display: block;
}
/*# sourceMappingURL=maps/quiz.css.map */