.p-mv {
  aspect-ratio: 1920 / 790;
  background: url(../img/quiz/mv-bg.png) no-repeat center center / cover #e5f1f9;
  @media (max-width: 767.98px) {
    aspect-ratio: 1440 / 790;
  }
}
.p-mv__inner {
  display: grid;
  grid-template-rows: 80fr auto 128fr;
  height: 100%;
}
.p-mv__title {
  grid-row: 2 / 3;
  width: fit-content;
  margin-inline: auto;
  img {
    width: calc(568 / 1920 * 100 * var(--vw));
    @media (max-width: 767.98px) {
      width: calc(568 / 1440 * 100 * var(--vw));
    }
  }
}

.p-quiz {
  padding-top: min(44px, 15px + (44 - 15) * var(--slope-1920-420));
  padding-bottom: 150px;
  background-color: #e5f1f9;
  font-feature-settings: "palt";
}
.p-quiz__inner {
  max-width: none;
}
.p-quiz__cards {
  display: grid;
  /** 
   * 画面幅　 1920px → 420px
   * カード幅  297px → 186px
   * カラム数  最小値2
   */
  grid-template-columns: repeat(auto-fill, minmax(0, min(297px, 186px + (297 - 186) * var(--slope-1920-420), (100% - var(--column-gap) * 1) / 2)));
  row-gap: min(88px, 16px + (88 - 16) * var(--slope-1920-420));
  --column-gap: min(80px, 16px + (80 - 16) * var(--slope-1920-420));
  column-gap: var(--column-gap);
  justify-content: center;
  counter-reset: quiz-card;
}
.p-quiz__card {
  container-type: inline-size;
}
.p-quiz__card-link {
  display: block;
  aspect-ratio: 297 / 432;
  border: calc(18 / 297 * 100cqw) solid #0075c2;
  background-color: #0075c2;
  &:hover {
    opacity: 0.7;
  }
}
.p-quiz__card-link-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  align-content: start;
  height: 100%;
  background: var(--background-image, none) no-repeat center center / cover #fff;
  border-radius: calc(16 / 297 * 100cqw);
  position: relative;
  isolation: isolate;
}
.p-quiz__card-number {
  align-content: center;
  width: calc(61 / 297 * 100cqw);
  aspect-ratio: 1;
  margin-top: calc(9 / 297 * 100cqw);
  margin-right: calc(9 / 297 * 100cqw);
  margin-left: auto;
  border-radius: 50%;
  padding-left: 0.04em;
  background-color: #0075c2;
  color: #fff;
  font-family: var(--ff-roboto-mono);
  font-weight: 700;
  font-size: calc(32 / 297 * 100cqw);
  letter-spacing: 0.04em;
  text-align: center;
  &::first-letter {
    font-size: calc(20 / 32 * 1em);
  }
}
.p-quiz__card-title {
  display: grid;
  margin-inline: auto;
  margin-top: calc(22 / 297 * 100cqw);
}
.p-quiz__card-title-inner {
  font-weight: 700;
  font-size: calc(32 / 297 * 100cqw);
  line-height: calc(56 / 32);
  font-feature-settings: "vpal";
  letter-spacing: 0.03em;
  writing-mode: vertical-rl;
}

.p-modal {
  display: none;
  background-color: color-mix(in srgb, #000 30%, transparent);
  position: fixed;
  inset-block: var(--header-height) 0;
  inset-inline: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  font-feature-settings: "palt";
  z-index: 1;
}
.p-modal__inner {
  margin-block: clamp(40px, 5vw, 50px);
  position: relative;
  isolation: isolate;
}
.p-modal__close {
  width: clamp(47px, 9.4vw, 94px);
  aspect-ratio: 1;
  border-radius: 50%;
  --background-color: #595858;
  background-color: var(--background-color);
  position: absolute;
  top: 0;
  right: 0;
  translate: calc(20 / 94 * 100%) calc(-20 / 94 * 100%);
  z-index: 1;
  &::before,
  &::after {
    content: "";
    display: block;
    width: calc(35 / 94 * 100%);
    height: fit-content;
    margin: auto;
    border-top: 2px solid #fff;
    position: absolute;
    inset: 0;
  }
  &::before {
    rotate: 45deg;
  }
  &::after {
    rotate: 135deg;
  }
  &:hover {
    background-color: color-mix(in srgb, var(--background-color) 90%, #fff);
  }
}
.p-modal__item {
  display: none;
  padding: clamp(10px, 2vw, 20px);
  background-color: #0075c2;
  &:nth-child(n + 2) {
    display: none;
  }
}
.p-modal__item-inner {
  border-radius: clamp(15px, 3vw, 30px);
  padding: clamp(40px, 8vw, 80px) min(80px, 16px + (80 - 16) * var(--slope-1260-420));
  background-color: #fff;
}
.p-modal__item-head {
  align-content: center;
  min-height: clamp(70px, 10.6vw, 106px);
  border-radius: clamp(10px, 1.5vw, 15px);
  padding-block: clamp(27px, 3.7vw, 37px) clamp(24px, 3.4vw, 34px);
  background-color: #0075c2;
  position: relative;
  color: #fff;
  isolation: isolate;
}
.p-modal__item-number {
  align-content: center;
  width: calc(68 / (22 * 1.6) * 1em);
  min-height: fit-content;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  padding-left: 0.1em;
  background-color: inherit;
  position: absolute;
  top: 0;
  inset-inline: 0;
  font-family: var(--ff-roboto-mono);
  font-weight: 700;
  font-size: clamp(1.5rem * 1.6, 2.2vw * 1.6, 2.2rem * 1.6);
  text-align: center;
  z-index: -1;
  translate: 0 calc(-26 / 68 * 100%);
  &::first-letter {
    font-size: calc(1 / 1.6 * 1em);
  }
}
.p-modal__item-title {
  margin-right: -0.05em;
  padding-inline: 1em;
  font-weight: 700;
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  letter-spacing: 0.05em;
  text-align: center;
}
.p-modal__question {
  margin-top: calc(43 / 20 * 1em);
  margin-right: -0.05em;
  line-height: calc(45 / 20);
  font-size: clamp(1.6rem, 2vw, 2rem);
  letter-spacing: 0.05em;
  text-align: center;
  @media (max-width: 767.98px) {
    line-height: 1.6;
    text-align: left;
  }
}
.p-modal__choices {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 34px;
  margin-top: clamp(35px, 5.2vw, 52px);
  @media (max-width: 767.98px) {
    grid-template-rows: auto;
    grid-template-columns: minmax(0, auto);
    row-gap: 25px;
  }
}
.p-modal__choice {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  @media (max-width: 767.98px) {
    grid-row: auto;
    display: block;
  }
}
.p-modal__choice-button {
  display: grid;
  grid-template-rows: max-content auto;
  filter: drop-shadow(5px 5px 5px color-mix(in srgb, #000 30%, transparent));
  margin-bottom: 19px;
  @media (max-width: 767.98px) {
    grid-template-rows: auto;
    grid-template-columns: max-content auto;
    align-items: center;
    margin-bottom: 0;
  }
  &:hover {
    opacity: 0.7;
  }
}
.p-modal__choice-mark {
  display: block;
  align-content: center;
  width: calc(68 / 30 * 1em);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  padding-left: 0.05em;
  background-color: #0075c2;
  color: #fff;
  font-weight: 700;
  font-size: clamp(2.2rem, 3vw, 3rem);
  text-align: center;
  letter-spacing: 0.05em;
  zoom: 0.5;
  transform-origin: center top;
  scale: 2;
  @media (max-width: 767.98px) {
    transform-origin: left center;
    margin-left: calc(-4 * var(--vw));
  }
}
.p-modal__choice-title {
  align-content: center;
  align-self: stretch;
  margin-right: -0.05em;
  border: clamp(3px, 0.5vw, 5px) solid #0075c2;
  border-radius: clamp(10px, 1.5vw, 15px);
  padding-block: clamp(20px, 3.4vw, 34px) clamp(20px, 2.6vw, 26px);
  padding-inline: 4%;
  background-color: #fff;
  line-height: calc(30 / 16);
  font-size: clamp(1.5rem, 1.6vw, 1.6rem);
  letter-spacing: 0.05em;
  text-align: center;
  @media (max-width: 767.98px) {
    padding-left: 1.5em;
  }
}
.p-modal__feedback {
  display: none;
  margin-bottom: auto;
  &::before {
    content: "";
    display: block;
    width: calc(48px * 0.49 + 1px);
    min-height: fit-content;
    aspect-ratio: 48 / 42;
    margin-inline: auto;
    margin-bottom: -1px;
    background-color: var(--background-color);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    @media (max-width: 767.98px) {
      margin-top: 16px;
    }
  }
}
.p-modal__feedback--correct {
  --background-color: #faf0e8;
}
.p-modal__feedback--wrong {
  --background-color: #cce3f3;
}
.p-modal__feedback-inner {
  border-radius: 15px;
  padding-block: 26px;
  padding-inline: 28px;
  background-color: var(--background-color);
  /* position: relative;
  isolation: isolate; */
}
.p-modal__feedback-title {
  color: #0075c2;
  font-weight: 700;
  font-size: clamp(2rem, 2.5vw, 2.5rem);
  letter-spacing: 0.05em;
  text-align: center;
}
.p-modal__feedback-icon {
  margin-top: 20px;
  .p-modal__feedback--correct & {
    &::before {
      content: "";
      display: block;
      width: clamp(80px, 10.5vw, 105px);
      aspect-ratio: 1;
      border: clamp(16px, 2vw, 20px) solid #d16c15;
      border-radius: 50%;
      margin-inline: auto;
    }
  }
  .p-modal__feedback--wrong & {
    align-content: center;
    height: clamp(80px, 10.5vw, 105px);
    position: relative;
    &::before,
    &::after {
      content: "";
      display: block;
      width: clamp(95px, 12.3vw, 123px);
      height: fit-content;
      margin-inline: auto;
      border-top: clamp(16px, 2vw, 20px) solid #0075c2;
      border-radius: 10px;
      rotate: 45deg;
    }
    &::after {
      margin-block: auto;
      position: absolute;
      inset: 0;
      rotate: 135deg;
    }
  }
}
.p-modal__feedback-comment {
  margin-top: clamp(30px, 4.6vw, 46px);
}
.p-modal__feedback-comment-title {
  border-radius: 5em;
  padding-block: calc(15.5 / 16 * 1em);
  padding-left: 0.05em;
  background-color: #0075c2;
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  text-align: center;
  &::after {
    content: "";
    display: block;
    width: clamp(60px, 8.074vw, 80.74px);
    aspect-ratio: 80.74 / 131.26;
    background: url(../img/quiz/modal-comment-illust.svg) no-repeat center center / cover;
    position: absolute;
    bottom: 5px;
    right: -5px;
    @media (max-width: 767.98px) {
      right: 5px;
    }
  }
}
.p-modal__feedback-comment-desc {
  margin-top: 12px;
  line-height: calc(30 / 16);
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  letter-spacing: 0.05em;
}
.p-modal__hint {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, auto);
  align-items: center;
  margin-top: 27px;
  isolation: isolate;
  @media (max-width: 767.98px) {
    /* grid-template-columns: minmax(0, auto); */
  }
}
.p-modal__hint-title {
  align-content: center;
  width: fit-content;
  aspect-ratio: 1;
  padding-inline: 1.9em calc(1.9em - 0.05em);
  background: url(../img/quiz/modal-hint-title-bg.svg) no-repeat center center / contain;
  position: relative;
  color: #fff;
  font-weight: 700;
  line-height: calc(35 / 20);
  font-size: clamp(1.5rem, 2vw, 2rem);
  letter-spacing: 0.05em;
  text-align: center;
  z-index: 1;
  @media (max-width: 767.98px) {
    padding-inline: 1.6em calc(1.6em - .05em);
    line-height: 1.6;
  }
}
.p-modal__hint-body {
  align-content: center;
  min-height: calc(86 / 20 * 1em);
  margin-top: calc(10 / 20 * 1em);
  margin-left: calc(-37 / 20 * 1em);
  border-radius: 0 calc(15 / 20 * 1em) calc(15 / 20 * 1em) 0;
  padding-block: 1em;
  padding-left: calc(111 / 20 * 1em);
  padding-right: 1em;
  background-color: #cce3f3;
  position: relative;
  font-size: clamp(1.5rem, 2vw, 2rem);
  letter-spacing: 0.05em;
  @media (max-width: 767.98px) {
    /* margin-top: -10px; */
    margin-left: -1em;
    border-radius: calc(15 / 20 * 1em);
    padding-left: 1.5em;
  }
  &::before {
    content: "";
    display: block;
    width: calc(93 / 20 * 1em);
    aspect-ratio: 93 / 134;
    background: url(../img/quiz/modal-hint-illust.svg) no-repeat center center / cover;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    @media (max-width: 767.98px) {
      content: none;
      /* bottom: calc(100% - 5px);
      left: 110px; */
    }
  }
}