.quiz-top,
.quiz-play,
.quiz-result {
  --quiz-bg: #ffe2d8;
  --quiz-ink: #000;
  --quiz-gold: #c1b084;
  position: relative;
  background-color: var(--quiz-bg);
  color: var(--quiz-ink);
  font-family: var(--font-zenmaru);
  font-weight: var(--font-weight-normal);

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  &::before {
    content: "";
    position: absolute;
    top: 212px;
    right: 0;
    width: clamp(100px, 16vw, 365px);
    aspect-ratio: 948 / 954;
    background: url('../../images/page/special/quiz/illust_taiyou.png') center / contain no-repeat;
    pointer-events: none;

    @media (max-width: 1400px) {
      width: 20vw;
    }

    @media (max-width: 1000px) {
      top: 110px;
      width: 22vw;
    }
  }
}

.quiz-top__inner {
  position: relative;
  width: min(1100px, calc(100% - 40px));
  margin-inline: auto;
  text-align: center;
}

.quiz-top__mv {
  .quiz-top__rope {
    width: min(340px, 100%);
    margin-inline: auto;
    margin-bottom: 110px;

    @media (max-width: 1000px) {
      width: 260px;
      margin-bottom: 60px;
    }

    @media (max-width: 600px) {
      width: 180px;
      margin-bottom: 80px;
      display: none!important;
    }
  }

  .quiz-top__title {
    width: min(577px, 76%);
    margin: 0 auto 60px;

    @media (min-width: 1001px) and (max-width: 1400px) {
      width: 62%;
    }

    @media (max-width: 1000px) {
      margin-bottom: 35px;
    }

    @media (max-width: 600px) {
      padding-top: 190px;
    }
  }

  .quiz-top__lead {
    margin: 0;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 2.63;
    letter-spacing: 0.042em;

    strong {
      color: var(--color-main);
      font-weight: var(--font-weight-black);
    }

    @media (max-width: 1000px) {
      font-size: 22px;
      line-height: 2.2;
    }

    @media (max-width: 600px) {
      font-size: 20px;
      line-height: 2;
    }

    @media (max-width: 375px) {
      text-align: left;
    }
  }

  .quiz-top__illustration {
    width: min(800px, 100%);
    margin: 69px auto;

    @media (max-width: 1000px) {
      margin-block: 40px;
    }
  }
}

.quiz-top__cta {
  width: min(400px, 100%);
  padding: 22px 85px;
  font-size: 25px;
  font-family: var(--font-zenmaru);
  font-weight: var(--font-weight-bold);
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);

  @media (max-width: 1000px) {
    min-height: 0;
    width: min(400px, 100%);
    padding: 22px 50px;
    font-size: 26px;
  }

  @media (max-width: 600px) {
    padding: 20px 38px;
    font-size: 22px;
  }

  &::after {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 12px solid var(--color-white);

    @media (max-width: 600px) {
      right: 22px;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 10px solid var(--color-white);
    }
  }
}

.quiz-top__panels {
  display: grid;
  gap: 88px;
  margin-top: 136px;

  @media (max-width: 1000px) {
    gap: 75px;
    margin-top: 90px;
  }
}

.quiz-panel {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding: 57px 54px 60px;
  border-radius: 20px;
  background: var(--color-white);

  @media (max-width: 1000px) {
    padding: 60px 30px 40px;
  }

  @media (max-width: 600px) {
    padding-inline: 20px;
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    background: center / contain no-repeat;
    pointer-events: none;
  }

  .quiz-panel__title {
    display: table;
    max-width: 100%;
    margin: 0 auto 42px;
    padding-bottom: 15px;
    border-bottom: 4px solid var(--quiz-gold);
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    line-height: 1.975;
    letter-spacing: 0.0315em;

    @media (max-width: 1000px) {
      font-size: 30px;
      line-height: 1.6;
      margin-bottom: 30px;
    }

    @media (max-width: 600px) {
      font-size: 24px;
    }
  }

  .quiz-panel__lead {
    margin: 0 0 44px;
    color: var(--color-main);
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    line-height: 1.97;
    letter-spacing: 0.042em;

    @media (max-width: 1000px) {
      font-size: 23px;
      line-height: 1.8;
      margin-bottom: 30px;
    }

    @media (max-width: 600px) {
      font-size: 19px;
    }

    @media (max-width: 375px) {
      text-align: left;
    }
  }

  .quiz-panel__text {
    font-size: 20px;
    line-height: 2.4;
    letter-spacing: 0.013em;

    p {
      margin: 0;

      + p {
        margin-top: 48px;
      }
    }

    @media (max-width: 1000px) {
      font-size: 17px;
      line-height: 2;

      br {
        display: none;
      }

      p + p {
        margin-top: 30px;
      }
    }

    @media (max-width: 600px) {
      font-size: 16px;
      text-align: left;
    }
  }

  .quiz-panel__categories {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 18px 20px;
    margin: 60px 11px 0;
    padding: 0;
    list-style: none;

    li {
      display: grid;
      align-content: center;
      margin: 0;
      padding: 25px 10px;
      border-radius: 10px;
      background-color: var(--quiz-gold);
      color: var(--color-white);
      font-size: 20px;
      font-weight: var(--font-weight-black);
      line-height: 1.45;
    }

    @media (max-width: 1000px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin: 35px 0 0;
    }

    @media (max-width: 600px) {
      gap: 12px;

      li {
        padding: 20px 8px;
        font-size: 16px;
      }
    }
  }

  .quiz-panel__people {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 46px 39px;
    margin-inline: 11px;

    @media (max-width: 1000px) {
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
      margin-inline: 0;
    }
  }

  .quiz-panel__person {
    padding: 22px 20px;
    border: 1px solid var(--color-main);
    border-radius: 15px;

    h3 {
      margin: 0 0 14px;
      color: var(--color-main);
      font-size: 20px;
      font-weight: var(--font-weight-bold);
      line-height: 1.9;
      letter-spacing: 0.013em;

      @media (max-width: 375px) {
        text-align: left;
      }
    }

    p {
      margin: 0;
      font-size: 15px;
      font-weight: var(--font-weight-regular);
      line-height: 2;
      letter-spacing: 0.017em;

      @media (max-width: 375px) {
        text-align: left;
      }
    }
  }
}

.quiz-panel--about {
  &::before {
    top: -22px;
    right: 66px;
    width: 114px;
    aspect-ratio: 228 / 346;
    background-image: url('../../images/page/special/quiz/illust_god1.png');

    @media (max-width: 1000px) {
      top: -35px;
      right: 12px;
      width: 65px;
    }
  }

  &::after {
    left: -147px;
    bottom: 110px;
    width: 241px;
    aspect-ratio: 482 / 226;
    background-image: url('../../images/page/special/quiz/illust_cloud1.png');

    @media (max-width: 1400px) {
      left: -30px;
      bottom: -25px;
      width: 130px;
    }

    @media (max-width: 600px) {
      left: -15px;
      width: 95px;
    }
  }
}

.quiz-panel--themes {
  &::before {
    top: -29px;
    left: 72px;
    width: 133px;
    aspect-ratio: 266 / 358;
    background-image: url('../../images/page/special/quiz/illust_god2.png');

    @media (max-width: 1000px) {
      top: -35px;
      left: 12px;
      width: 70px;
    }
  }

  &::after {
    top: 105px;
    right: -57px;
    width: 211px;
    aspect-ratio: 423 / 218;
    background-image: url('../../images/page/special/quiz/illust_cloud2.png');

    @media (max-width: 1400px) {
      top: -25px;
      right: -15px;
      width: 120px;
    }

    @media (max-width: 600px) {
      width: 85px;
    }
  }
}

.quiz-panel--people {
  &::before {
    top: 35px;
    right: -35px;
    width: 160px;
    aspect-ratio: 320 / 486;
    background-image: url('../../images/page/special/quiz/illust_izumojin1.png');

    @media (max-width: 1400px) {
      top: -50px;
      right: 10px;
      width: 75px;
    }
  }

  &::after {
    bottom: 25px;
    left: -114px;
    width: 160px;
    aspect-ratio: 320 / 412;
    background-image: url('../../images/page/special/quiz/illust_izumojin2.png');

    @media (max-width: 1400px) {
      bottom: -35px;
      left: -15px;
      width: 85px;
    }
  }

  .quiz-panel__people {
    &::before {
      content: "";
      position: absolute;
      top: 189px;
      left: -87px;
      width: 225px;
      aspect-ratio: 450 / 194;
      background: url('../../images/page/special/quiz/illust_cloud3.png') center / contain no-repeat;
      pointer-events: none;

      @media (max-width: 1400px) {
        top: -20px;
        left: -15px;
        width: 110px;
      }

      @media (max-width: 1000px) {
        width: 70px;
      }
    }
  }
}

.quiz-top__end {
  padding-block: 110px 100px;
  @media (max-width: 1000px) {
    padding-block: 70px 60px;
  }

  p {
    margin-bottom: 90px;
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    line-height: 1.975;

    @media (max-width: 1000px) {
      font-size: 26px;
      margin-bottom: 40px;
    }

    @media (max-width: 600px) {
      font-size: 22px;
    }
  }
}

.quiz-play__inner,
.quiz-result__inner {
  position: relative;
  width: min(930px, calc(100% - 40px));
  margin-inline: auto;
  padding-bottom: 150px;
  text-align: center;
}

.quiz-play__rope,
.quiz-result__rope {
  width: 260px;
  margin: 0 auto 60px;

  @media (max-width: 600px) {
    width: 180px;
    margin-bottom: 80px;
    display: none!important;
  }
}

.quiz-play__logo,
.quiz-result__logo {
  width: min(465px, 76%);
  margin: 0 auto 56px;

  @media (max-width: 600px) {
    padding-top: 190px;
    margin-bottom: 46px;
  }
}

.quiz-play__card,
.quiz-result__card {
  position: relative;
  padding: 56px 42px 34px;
  border-radius: 20px;
  background-color: var(--color-white);

  @media (max-width: 1000px) {
    padding: 38px 30px 30px;
  }

  @media (max-width: 600px) {
    padding: 28px 18px 24px;
  }
}

.quiz-play {
  .quiz-play__progress {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 42px;

    @media (max-width: 600px) {
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
      margin-bottom: 28px;
    }
  }

  .quiz-play__counter {
    flex-shrink: 0;
    margin: 0;
    font-size: 18px;
    font-weight: var(--font-weight-bold);

    b {
      margin-inline: 8px;
      font-family: serif;
      font-size: 62px;
      line-height: 1;
      color: var(--color-main);
    }

    > span {
      font-size: 15px;
      color: var(--color-muted);
    }
  }

  .quiz-play__bar {
    flex: 1;
    width: 100%;
    height: 8px;
    appearance: none;
    border: 0;
    background: var(--color-border);
    color: var(--color-main);

    &::-webkit-progress-bar {
      background: var(--color-border);
    }

    &::-webkit-progress-value {
      background: var(--color-main);
    }

    &::-moz-progress-bar {
      background: var(--color-main);
    }

    @media (max-width: 600px) {
      flex: auto;
    }
  }

  .quiz-play__label {
    display: none;
  }

  .quiz-play__question {
    margin: 0 0 38px;
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    line-height: 1.58;
    text-align: left;
    letter-spacing: 0.08em;

    @media (max-width: 600px) {
      font-size: 21px;
      letter-spacing: 0.04em;
    }
  }

  .quiz-play__answers {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      margin: 0;
    }
  }

  .quiz-play__option {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--quiz-ink);
    font: inherit;
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1.45;
    text-align: left;
    cursor: pointer;

    &:hover {
      border-color: var(--quiz-gold);
    }

    &[aria-pressed="true"] {
      background: var(--color-gold-base);
      border-color: var(--color-gold-base);
      color: var(--color-white);

      .quiz-play__number {
        background: var(--color-white);
        color: var(--quiz-ink);
      }
    }

    @media (max-width: 600px) {
      padding: 12px;
      gap: 12px;
      font-size: 17px;
    }
  }

  .quiz-play__number {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--quiz-gold);
    color: var(--color-white);
    line-height: 1;
  }

  .quiz-play__actions {
    margin-top: 40px;
  }

  .quiz-play__hint {
    margin: 26px 0 0;
    font-size: 15px;

    &.quiz-play__hint--selected {
      visibility: hidden;
    }
  }
}

.quiz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(330px, 100%);
  padding: 18px 30px;
  border: 0;
  border-radius: 80px;
  background: var(--color-main);
  color: var(--color-white);
  font: inherit;
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
  cursor: pointer;

  &:hover:not(:disabled) {
    background: var(--color-font);
  }

  &:disabled {
    background: var(--color-border);
    cursor: not-allowed;
  }

  @media (max-width: 600px) {
    padding: 18px 24px;
    font-size: 19px;
  }
}

.quiz-dialog {
  --quiz-correct: #389c95;
  width: min(840px, calc(100% - 40px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow-y: auto;
  border: 0;
  border-radius: 20px;
  background: var(--color-white);
  color: var(--quiz-ink);
  overscroll-behavior: contain;

  &::backdrop {
    background: rgb(35 24 21 / 78%);
    backdrop-filter: blur(2px);
  }

  .quiz-dialog__verdict {
    padding: 30px 28px 24px;
    background: #63b3a3;
    color: var(--color-white);
    text-align: center;

    &.quiz-dialog__verdict--wrong {
      background: #cf7761;
    }
  }

  .quiz-dialog__mark {
    display: block;
    margin-bottom: 8px;
    font-size: 50px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
  }

  .quiz-dialog__word {
    margin: 0;
    font-size: 38px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }

  .quiz-dialog__image {
    width: 150px;
    margin: 18px auto 0;
  }

  .quiz-dialog__body {
    padding: 34px 48px 0;

    @media (max-width: 600px) {
      padding: 22px 20px 0;
    }
  }

  .quiz-dialog__answers {
    margin: 0;

    > div {
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      gap: 30px;
      padding-bottom: 24px;

      + div {
        padding-top: 22px;
        border-top: 1px dotted var(--color-border);
      }

      @media (max-width: 600px) {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }
    }

    dt {
      font-size: 18px;
      font-weight: var(--font-weight-bold);
    }
  }

  .quiz-dialog__value {
    margin: 0;
    color: var(--color-main);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 1.45;

    &.quiz-dialog__value--correct {
      color: var(--quiz-correct);
    }

    @media (max-width: 600px) {
      font-size: 18px;
    }
  }

  .quiz-dialog__explain {
    margin-top: 24px;
    padding: 22px 30px;
    border-radius: 8px;
    background: var(--color-surface);

    h3 {
      margin: 0 0 10px;
      color: var(--color-main);
      font-size: 24px;
      font-weight: var(--font-weight-bold);
    }

    p {
      margin: 0;
      font-size: 16px;
      line-height: 1.75;
    }

    @media (max-width: 600px) {
      padding: 18px;
    }
  }

  .quiz-dialog__actions {
    padding: 34px 20px;
    text-align: center;
  }
}

.quiz-result {
  .quiz-result__title {
    width: min(280px, 75%);
    margin: -80px auto 36px;

    @media (max-width: 1000px) {
      margin-top: -60px;
    }
  }

  .quiz-result__label {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: var(--font-weight-bold);
  }

  .quiz-result__rate {
    margin: 0 0 12px;
    color: var(--color-main);
    font-family: serif;
    line-height: 1;

    b {
      font-size: clamp(60px, 9vw, 108px);
    }

    span {
      margin-left: 6px;
      font-size: 38px;
    }
  }

  .quiz-result__score {
    max-width: 510px;
    margin: 0 auto 24px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 16px;

    b {
      margin-inline: 4px;
      font-family: serif;
      font-size: 38px;
    }
  }

  .quiz-result__rank {
    margin: 36px 0 10px;
    font-size: clamp(26px, 4.2vw, 42px);
    font-weight: var(--font-weight-bold);
  }

  .quiz-result__illustration {
    width: min(460px, 100%);
    margin: 12px auto 18px;
  }

  .quiz-result__badge {
    width: min(220px, 60%);
    margin: 0 auto 10px;
  }

  .quiz-result__message {
    max-width: 520px;
    margin: 16px auto 30px;
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    line-height: 2.2;

    @media (max-width: 600px) {
      font-size: 15px;

      br {
        display: none;
      }
    }
  }

  .quiz-result__share {
    margin: 82px auto 85px;

    @media (max-width: 600px) {
      margin-block: 50px;
    }
  }

  .quiz-result__share-title {
    width: min(300px, 100%);
    margin: 0 auto 48px;
  }

  .quiz-result__icons {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 3.5vw, 38px);
  }

  .quiz-result__sns {
    display: grid;
    place-items: center;
    width: clamp(64px, 7vw, 80px);
    height: clamp(64px, 7vw, 80px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #000;
    cursor: pointer;

    img {
      width: 50%;
      height: 50%;
      object-fit: contain;
    }

    &:hover {
      opacity: 0.75;
    }
  }

  .quiz-result__feedback {
    margin: 20px 0 0;
    font-size: 16px;

    &:empty {
      margin: 0;
    }
  }
}

.quiz-top + .article-search,
.quiz-play + .article-search,
.quiz-result + .article-search {
  background-color: #ffe2d8;
}