#contents-area,
.lyt-col-1 #contents-body {
  width: 100%;
  min-width: 0;
}

#galaxy-quiz {
  --color-base: #db112c;
  --color-foreground: #000000;
  --color-foreground-light: #ffffff;
  --color-primary: #28aee2;
  --color-gray: #efefef;

  --gradient-base: linear-gradient(180deg, #db112c 0%, #f30020 100%);
  --shadow-base: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  --shadow-drop: 0 4px 10px rgba(0, 0, 0, 0.1);

  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.7;
  font-family:
    "LINE Seed JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;

  color: var(--color-foreground);
  text-rendering: optimizeLegibility;
}

#galaxy-quiz,#galaxy-quiz * {
    box-sizing: border-box;
  }

#galaxy-quiz img {
    max-width: 100%;
  }

.newwindowicon:is(#galaxy-quiz img) {
      display: none;
    }

#galaxy-quiz p {
    margin: 0;
  }

#galaxy-quiz .upper {
    background-image: var(--gradient-base);
  }

:is(#galaxy-quiz .upper) .hero {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      background-image: url("/mobile/set/data/special/samsung-galaxy/img/shared/qk-background.png");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      padding-inline: 20px;
      padding-block-start: 16px;
      padding-block-end: 32px;
      color: var(--color-foreground-light);
    }

@media (min-width: 768px) {

:is(#galaxy-quiz .upper) .hero {
        padding-block-start: 40px;
    }
      }

:is(:is(#galaxy-quiz .upper) .hero)::before {
        position: absolute;
        bottom: 0;
        background-image: linear-gradient(
          180deg,
          rgba(230, 9, 39, 0) 0%,
          #e90826 100%
        );
        width: 100%;
        height: 96px;
        content: "";
      }

:is(:is(#galaxy-quiz .upper) .hero) .brands {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border-radius: 9999px;
        background-color: var(--color-foreground-light);
        padding: 9px 20px;
        max-width: 578px;
      }

@media (min-width: 390px) {

:is(:is(#galaxy-quiz .upper) .hero) .brands {
          gap: 8px;
      }
        }

:is(:is(:is(#galaxy-quiz .upper) .hero) .brands) .brand-samsung {
          margin-block-start: 2px;
          width: 122px;
          height: auto;
          color: black;
        }

@media (min-width: 390px) {

:is(:is(:is(#galaxy-quiz .upper) .hero) .brands) .brand-samsung {
            width: 174px;
        }
          }

:is(:is(:is(#galaxy-quiz .upper) .hero) .brands) .brand-quizknock {
          width: 56px;
          height: auto;
        }

@media (min-width: 390px) {

:is(:is(:is(#galaxy-quiz .upper) .hero) .brands) .brand-quizknock {
            width: 80px;
        }
          }

:is(:is(#galaxy-quiz .upper) .hero) .logo {
        padding-block-start: 32px;
        padding-block-end: 8px;
      }

:is(:is(:is(#galaxy-quiz .upper) .hero) .logo) .logo_image {
          max-width: 100%;
        }

@media (min-width: 768px) {

:is(:is(:is(#galaxy-quiz .upper) .hero) .logo) .logo_image {
            max-width: 538px;
        }
          }

:is(:is(#galaxy-quiz .upper) .hero) .period {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        margin: 0;
        font-weight: 700;
        /*letter-spacing: 0.04288em;*/
        font-size: 12px;
        line-height: 1;
      }

@media (min-width: 390px) {

:is(:is(#galaxy-quiz .upper) .hero) .period {
          font-size: 16px;
      }
        }

:is(:is(:is(#galaxy-quiz .upper) .hero) .period) .day-of-week {
          display: inline-block;
          border-radius: 9999px;
          background-color: var(--color-foreground-light);
          padding: 4px;
          aspect-ratio: 1 / 1;
          color: var(--color-base);
          font-size: 10px;
          line-height: 1;
        }

@media (min-width: 390px) {

:is(:is(:is(#galaxy-quiz .upper) .hero) .period) .day-of-week {
            font-size: 13px;
        }
          }

:is(:is(#galaxy-quiz .upper) .hero) .player {
        margin-block-start: 34px;
        width: 100%;
      }

@media (min-width: 768px) {

:is(:is(#galaxy-quiz .upper) .hero) .player {
          padding-inline: 20px;
          max-width: 538px;
      }
        }

:is(:is(:is(#galaxy-quiz .upper) .hero) .player) .iframe_wrapper {
          position: relative;
          border: 4px solid var(--color-foreground-light);
          border-radius: 10px;
          aspect-ratio: 16 / 9;

          /*@media (min-width: 1000px) {
            position: absolute;
            right: 24px;
            bottom: 32px;
          }*/
        }

:is(:is(:is(:is(#galaxy-quiz .upper) .hero) .player) .iframe_wrapper) .iframe_label {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 9999px;
            background-color: var(--color-foreground-light);
            padding-inline: 10px;
            color: var(--color-base);
            font-weight: 700;
            font-size: clamp(14px, 3vw, 18px);
            letter-spacing: 0.1em;
            word-break: keep-all;
          }

@media (min-width: 390px) {

:is(:is(:is(:is(#galaxy-quiz .upper) .hero) .player) .iframe_wrapper) .iframe_label {
              padding-inline: 20px;
          }
            }

:is(:is(:is(:is(#galaxy-quiz .upper) .hero) .player) .iframe_wrapper) iframe {
            display: block;
            margin: 0;
            border-radius: 6px;
            width: 100%;
            height: 100%;
          }

:is(#galaxy-quiz .upper) .project {
      margin-block-start: 16px;
      padding-inline: 20px;
    }

@media (min-width: 768px) {

:is(#galaxy-quiz .upper) .project {
        margin-block-start: 32px;
    }
      }

:is(:is(#galaxy-quiz .upper) .project) .detail {
        display: grid;
        position: relative;
        gap: 14px;
        margin-inline: auto;
        border-radius: 10px;
        background:
          linear-gradient(to right, rgba(3, 17, 42, 0.03) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(3, 17, 42, 0.03) 1px, transparent 1px)
            var(--color-primary);
        background-size: 46px 46px;
        padding: 20px;
        padding-block-start: 32px;
        max-width: 950px;
        color: var(--color-foreground-light);
      }

@media (min-width: 768px) {

:is(:is(#galaxy-quiz .upper) .project) .detail {
          gap: 12px;
          padding: 40px;
      }
        }

:is(:is(:is(#galaxy-quiz .upper) .project) .detail) .detail__head {
          display: grid;
          gap: 4px;
        }

:is(:is(:is(:is(#galaxy-quiz .upper) .project) .detail) .detail__head) .detail__head--label {
            position: relative;
            font-weight: 700;
            font-size: 15px;
          }

@media (min-width: 768px) {

:is(:is(:is(:is(#galaxy-quiz .upper) .project) .detail) .detail__head) .detail__head--label {
              position: static;
          }
            }

:is(:is(:is(:is(:is(#galaxy-quiz .upper) .project) .detail) .detail__head) .detail__head--label) .detail__head--balloon {
              position: absolute;
              right: -24px;
              bottom: 20px;
              rotate: 10.2deg;
              width: 80px;
              height: auto;
            }

@media (min-width: 768px) {

:is(:is(:is(:is(:is(#galaxy-quiz .upper) .project) .detail) .detail__head) .detail__head--label) .detail__head--balloon {
                top: 0;
                right: 0;
                bottom: auto;
                transform: translateY(-50%);
                width: 90px;
            }
              }

:is(:is(:is(:is(#galaxy-quiz .upper) .project) .detail) .detail__head) .detail__head--content {
            font-weight: 800;
            font-size: 22px;
            line-height: 1.5;
          }

:is(:is(:is(#galaxy-quiz .upper) .project) .detail) .catch_image {
          border: 2px solid var(--color-foreground-light);
          border-radius: 6px;
          width: 100%;
        }

:is(:is(:is(#galaxy-quiz .upper) .project) .detail) .detail__content {
          font-size: 16px;
          line-height: 1.75;
          letter-spacing: 0.1em;
        }

:is(:is(:is(:is(#galaxy-quiz .upper) .project) .detail) .detail__content) a {
            border-block-end: 1px solid var(--color-foreground-light);
            color: inherit;
            font-weight: 700;
          }

:is(:is(:is(:is(:is(#galaxy-quiz .upper) .project) .detail) .detail__content) a):hover {
              outline: none;
              border-block-end: 2px solid var(--color-foreground-light);
              text-decoration: none;
            }

:is(:is(:is(:is(#galaxy-quiz .upper) .project) .detail) .detail__content) span {
            color: var(--color-foreground-light);
            font-weight: 700;
          }

@media (min-width: 768px) {

:is(:is(#galaxy-quiz .upper) .project) .detail {
          grid-template-rows: auto 1fr;
          grid-template-columns: 1fr 1fr;
      }

          :is(:is(:is(#galaxy-quiz .upper) .project) .detail) .detail__head {
            grid-row: 1;
            grid-column: 1;
          }
          :is(:is(:is(#galaxy-quiz .upper) .project) .detail) .catch_image {
            grid-row: 1 / -1;
            grid-column: 2;
            align-self: center;
          }
          :is(:is(:is(#galaxy-quiz .upper) .project) .detail) .detail__content {
            grid-row: 2;
            grid-column: 1;
          }
        }

:is(#galaxy-quiz .upper) .goods {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 27px;
      margin-block-start: 40px;
    }

@media (min-width: 768px) {

:is(#galaxy-quiz .upper) .goods {
        position: relative;
        gap: 42px;
        z-index: 1;
        margin-block-start: 60px;
        margin-block-end: -120px;
    }
      }

:is(:is(#galaxy-quiz .upper) .goods) .goods__head {
        color: var(--color-foreground-light);
        font-weight: 800;
        font-size: 20px;
        line-height: 1.5;
      }

@media (min-width: 768px) {

:is(:is(#galaxy-quiz .upper) .goods) .goods__head {
          font-size: 24px;
      }
        }

:is(:is(#galaxy-quiz .upper) .goods) .goods__content {
        display: flex;
        position: relative;
        justify-content: center;
        margin-inline: auto;
        width: 100%;
        max-width: 890px;
        overflow-x: clip;
      }

@media (min-width: 768px) {

:is(:is(#galaxy-quiz .upper) .goods) .goods__content {
          gap: 50px;
          padding-inline: 20px;
      }
        }

:is(:is(:is(#galaxy-quiz .upper) .goods) .goods__content)::before {
          aspect-ratio: 1 / 1;
          width: 44.5%;
          height: auto;
          content: "";
        }

@media (min-width: 768px) {

:is(:is(:is(#galaxy-quiz .upper) .goods) .goods__content)::before {
            display: none;
        }
          }

:is(:is(:is(#galaxy-quiz .upper) .goods) .goods__content) .goods__content--item {
          display: grid;
          position: absolute;
          flex-shrink: 0;
          place-items: center;
          box-shadow: var(--shadow-base);
          border: 4px solid var(--color-gray);
          border-radius: 6px;
          background-color: var(--color-foreground-light);
          aspect-ratio: 1 / 1;
          width: 44.5%;
        }

@media (min-width: 768px) {

:is(:is(:is(#galaxy-quiz .upper) .goods) .goods__content) .goods__content--item {
            position: relative;
            flex-shrink: 1;
        }
          }

:is(:is(:is(:is(#galaxy-quiz .upper) .goods) .goods__content) .goods__content--item) img {
            position: absolute;
            width: 73%;
            height: auto;
          }

:is(:is(:is(:is(#galaxy-quiz .upper) .goods) .goods__content) .goods__content--item):first-child {
            left: -15%;
            rotate: -10deg;
            margin-block-start: 6%;
          }

@media (min-width: 768px) {

:is(:is(:is(:is(#galaxy-quiz .upper) .goods) .goods__content) .goods__content--item):first-child {
              left: 0;
              rotate: 0deg;
              margin-block-start: 0;
          }
            }

:is(:is(:is(:is(#galaxy-quiz .upper) .goods) .goods__content) .goods__content--item):first-child img {
              bottom: 15%;
              width: 66%;
            }

:is(:is(:is(:is(#galaxy-quiz .upper) .goods) .goods__content) .goods__content--item):last-child {
            right: -13%;
            rotate: 15deg;
            margin-block-start: 6%;
          }

@media (min-width: 768px) {

:is(:is(:is(:is(#galaxy-quiz .upper) .goods) .goods__content) .goods__content--item):last-child {
              right: 0;
              rotate: 0deg;
              margin-block-start: 0;
          }
            }

:is(:is(:is(:is(#galaxy-quiz .upper) .goods) .goods__content) .goods__content--item):last-child img {
              width: 70%;
            }

#galaxy-quiz .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-inline: 20px;
    padding-block: 30px;
  }

:is(#galaxy-quiz .button) .button_label {
      position: relative;
      margin: 0;
      padding-inline: 8px;
      font-weight: 700;
      /*font-size: 15px;*/
      font-size: clamp(13px, 8px + 1.5385vw, 15px);
      line-height: 1;
      letter-spacing: 0.1em;
      word-break: keep-all;
    }

:is(:is(#galaxy-quiz .button) .button_label)::before,:is(:is(#galaxy-quiz .button) .button_label)::after {
        position: absolute;
        background: var(--color-foreground-light);
        width: 1px;
        height: 100%;
        content: "";
      }

:is(:is(#galaxy-quiz .button) .button_label)::before {
        left: 0;
        rotate: -10deg;
      }

:is(:is(#galaxy-quiz .button) .button_label)::after {
        right: 0;
        rotate: 10deg;
      }

:is(#galaxy-quiz .button) .button_start {
      position: relative;
      transition:
        background 0.15s ease,
        transform 0.1s ease,
        box-shadow 0.1s ease;
      cursor: pointer;
      box-shadow: 0 4px 0 0 #6b4e00;
      border: 3px solid #6b4e00;
      border-radius: 90px;
      background: #ffe403;
      padding: 21px 20px;
      width: 100%;
      color: #6b4e00;
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 2px;
      text-align: center;
    }

:is(:is(#galaxy-quiz .button) .button_start):hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 0 0 #6b4e00;
        background: #fff34a;
      }

:is(:is(#galaxy-quiz .button) .button_start):active {
        transform: translateY(2px);
        box-shadow: 0 1px 0 0 #6b4e00;
      }

:is(:is(#galaxy-quiz .button) .button_start):focus-visible {
        outline: 3px solid #4a90d9;
        outline-offset: 3px;
      }

:is(:is(#galaxy-quiz .button) .button_start)::after {
        position: absolute;
        inset: -3px;
        box-shadow: 4px 4px 4px 0 rgba(255, 255, 255, 0.7) inset;
        border-radius: inherit;
        pointer-events: none;
        content: "";
      }

:is(:is(#galaxy-quiz .button) .button_start) span {
        font-size: 1.1em;
      }

#galaxy-quiz .lower {
    display: grid;
    gap: 78px;
    background-color: var(--color-gray);
    padding-inline: 20px;
    padding-block-start: 80px;
    padding-block-end: 60px;
    overflow-wrap: anywhere;
  }

:is(#galaxy-quiz .lower) > * {
      min-width: 0;
    }

@media (min-width: 768px) {

#galaxy-quiz .lower {
      padding-block-start: 200px;
  }
    }

:is(#galaxy-quiz .lower) .descriptions {
      display: grid;
      gap: 11px;
      margin-inline: auto;
      width: 100%;
      max-width: 850px;
    }

:is(:is(#galaxy-quiz .lower) .descriptions) details {
        background-color: var(--color-foreground-light);
        font-weight: 400;
        font-size: 16px;
        line-height: 1.75;
        letter-spacing: 2px;
      }

:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content {
          padding-inline: 20px;
          padding-block-start: 0;
          padding-block-end: 20px;
          overflow: hidden;
        }

@media (min-width: 768px) {

:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            -moz-column-gap: 20px;
                 column-gap: 20px;
        }
            :is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step:nth-child(1),:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step:nth-child(4),:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) > p {
              grid-column: 1 / -1;
            }
          }

:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step):not(:last-child) {
              border-block-end: 1px solid var(--color-gray);
              padding-block-end: 24px;
            }

:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step):not(:first-child) {
              padding-block-start: 14px;
            }

:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__head {
              color: var(--color-primary);
              font-weight: 700;
              font-size: 15px;
              line-height: 1.75;
            }

:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__body {
              margin-block-start: 14px;
            }

:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__body) a {
                border-block-end: 2px solid var(--color-primary);
                color: inherit;
              }

:is(:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__body) a):hover {
                  outline: none;
                  border-block-end: 3px solid var(--color-primary);
                  text-decoration: none;
                }

:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__body) span {
                color: var(--color-primary);
                font-weight: 700;
              }

:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__image {
              filter: drop-shadow(var(--shadow-drop));
              width: 100%;
            }

:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__image) > img {
                width: 100%;
              }

.step1:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__image) {
                box-shadow: var(--shadow-base);
                border-radius: 10px;
                padding: 14px;
              }

.step4:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__image) {
                border-radius: 10px;
                background-color: white;
              }

@media (min-width: 768px) {

:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__image) .step__image--form {
                  width: 50%;
              }
                }

:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__image) .step__profile {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
              }

:is(:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__image) .step__profile) .step__profile--image {
                  width: 50%;
                }

@media (min-width: 768px) {

:is(:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__image) .step__profile) .step__profile--image {
                    width: 25%;
                }
                  }

:is(:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__image) .step__profile) .step__profile--follow {
                  border-radius: 9999px;
                  background: var(--color-foreground);
                  padding: 2px 12px;
                  color: var(--color-foreground-light);
                  font-weight: 700;
                  font-size: clamp(8px, 3vw, 13px);
                }

:is(:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__image) .step__profile) .step__profile--body {
                  display: flex;
                }

:is(:is(:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content) .step) .step__image) .step__profile) .step__profile--body) .step__profile--icon {
                    width: 44px;
                    height: 44px;
                  }

:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content.terms {
          display: block;
          font-size: 14px;
          line-height: 1.8;
          letter-spacing: 0.05em;
        }

:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content.terms) > p {
            margin-block-end: 1em;
          }

:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content.terms) .terms__section {
            margin-block-start: 1.5em;
          }

:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content.terms) .terms__section) h3 {
              margin-block-end: 0.5em;
              font-weight: 700;
              font-size: 15px;
            }

:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content.terms) .terms__section) p {
              margin-block-end: 0.5em;
            }

:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content.terms) .terms__section) ul {
              margin-block-end: 0.5em;
              padding-inline-start: 1.5em;
            }

:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content.terms) .terms__section) ul) li {
                margin-block-end: 0.3em;
                list-style: disc;
              }

:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) .content.terms) .terms__section) .terms__note {
              color: #666;
              font-size: 13px;
            }

.is-opened:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) summary .icon .line:first-child {
          rotate: 0deg;
        }

:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) summary {
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          background-color: var(--color-foreground-light);
          padding: 20px;
        }

:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) summary) .summary__title {
            font-weight: 700;
            font-size: 17px;
            line-height: 1;
            letter-spacing: 0.10625em;
          }

:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) summary) .icon {
            display: grid;
            position: relative;
            place-items: center;
            aspect-ratio: 1 / 1;
            width: 16px;
          }

:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) summary) .icon) .line {
              position: absolute;
              transition: 0.3s;
              border-radius: 2px;
              background: var(--color-foreground);
              width: 10px;
              height: 2px;
            }

:is(:is(:is(:is(:is(:is(#galaxy-quiz .lower) .descriptions) details) summary) .icon) .line):first-child {
                rotate: 90deg;
              }

:is(#galaxy-quiz .lower) .button {
      margin-inline: auto;
      padding-inline: 0;
      max-width: 380px;
    }

:is(:is(#galaxy-quiz .lower) .button) .button_label {
        color: var(--color-foreground);
        font-size: clamp(12px, 8px + 1.5385vw, 15px);
      }

:is(:is(:is(#galaxy-quiz .lower) .button) .button_label)::before,:is(:is(:is(#galaxy-quiz .lower) .button) .button_label)::after {
          background: var(--color-foreground);
        }

:is(:is(#galaxy-quiz .lower) .about) .label {
        margin-inline: auto;
        padding-inline: 20px;
        width: 100%;
        max-width: 890px;
        color: var(--color-base);
        font-weight: 700;
        font-size: 15px;
      }

:is(:is(#galaxy-quiz .lower) .about) .content {
        display: grid;
        gap: 13px;
        margin-inline: auto;
        border-radius: 10px;
        background-color: var(--color-foreground-light);
        padding-inline: 20px;
        padding-block: 28px;
        width: 100%;
        max-width: 950px;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.75;
        letter-spacing: 2px;
      }

:is(:is(:is(#galaxy-quiz .lower) .about) .content) .images {
          position: relative;
          margin-inline: auto;
          width: 100%;
          max-width: 850px;
        }

:is(:is(:is(:is(#galaxy-quiz .lower) .about) .content) .images) .brand {
            width: 150px;
            max-width: 38%;
          }

@media (min-width: 768px) {

:is(:is(:is(:is(#galaxy-quiz .lower) .about) .content) .images) .brand {
              position: absolute;
              top: 20px;
              left: 20px;
              z-index: 1;
          }
            }

:is(:is(:is(:is(#galaxy-quiz .lower) .about) .content) .images) .member_image {
            position: absolute;
            right: -20px;
            bottom: 0;
            rotate: 7.25deg;
            border: 2px solid var(--color-foreground-light);
            border-radius: 2px;
            width: 160px;
            max-width: 65%;
          }

@media (min-width: 768px) {

:is(:is(:is(:is(#galaxy-quiz .lower) .about) .content) .images) .member_image {
              position: relative;
              right: 0;
              rotate: 0deg;
              /*border-radius: 10px;*/
              width: 100%;
              max-width: 100%;
          }
            }

:is(:is(:is(#galaxy-quiz .lower) .about) .content) > p {
          margin-inline: auto;
          width: 100%;
          max-width: 850px;
        }

/* ===== Quiz Overlay ===== */

#galaxy-quiz .quiz-overlay {
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    z-index: 9999;
    transition: visibility 0.3s ease;
    inset: 0;
  }

.is-open:is(#galaxy-quiz .quiz-overlay) {
      visibility: visible;
    }

.is-open:is(#galaxy-quiz .quiz-overlay) .quiz-overlay__backdrop {
        opacity: 1;
        backdrop-filter: blur(12.5px);
        -webkit-backdrop-filter: blur(12.5px);
      }

.is-open:is(#galaxy-quiz .quiz-overlay) .quiz-overlay__content {
        opacity: 1;
      }

#galaxy-quiz .quiz-overlay__backdrop {
    position: absolute;
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition:
      opacity 0.3s ease,
      backdrop-filter 0.3s ease;
    inset: 0;
    background: rgba(97, 0, 13, 0.6);
  }

#galaxy-quiz .quiz-overlay__content {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    width: 100%;
    height: 100%;
  }

#galaxy-quiz .quiz-overlay__how-to {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-foreground-light);
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    white-space: nowrap;
  }

/* ===== Quiz Carousel ===== */

#galaxy-quiz .quiz-carousel__heading {
    align-self: stretch;
    margin-block-end: -50px;
    padding-left: 24px;
    color: var(--color-foreground-light);
    font-weight: 700;
    font-size: clamp(9px, 3vw, 14px);
    line-height: 1.25;
    letter-spacing: 1.6px;
    text-align: left;
  }

@media (min-width: 390px) {

#galaxy-quiz .quiz-carousel__heading {
      font-size: clamp(10px, 3vw, 14px);
  }
    }

@media (min-width: 768px) {

#galaxy-quiz .quiz-carousel__heading {
      align-self: auto;
      padding-left: 16px;
      width: 50%;
      max-width: 520px;
      font-size: clamp(16px, 4vw, 16px);
      text-align: center;
  }
    }

#galaxy-quiz .quiz-carousel__heading--highlight {
    font-size: clamp(14px, 4vw, 20px);
    letter-spacing: 2.5px;
  }

@media (min-width: 768px) {

#galaxy-quiz .quiz-carousel__heading--highlight {
      font-size: clamp(16px, 4vw, 25px);
  }
    }

#galaxy-quiz .quiz-carousel {
    position: relative;
    padding-top: 70px;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
  }

#galaxy-quiz .quiz-carousel__track {
    display: flex;
    align-items: center;
    will-change: transform;
  }

#galaxy-quiz .quiz-carousel__card {
    position: relative;
    flex: 0 0 calc(100% - 40px);
    transform: scale(0.98);
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    padding: 0 4px;
  }

.is-active:is(#galaxy-quiz .quiz-carousel__card) {
      transform: scale(1);
    }

@media (min-width: 768px) {

#galaxy-quiz .quiz-carousel__card {
      flex: 0 0 65%;
      padding: 0 16px;
      max-width: 520px;
  }
    }

@media (min-width: 1080px) {

#galaxy-quiz .quiz-carousel__card {
      flex: 0 0 50%;
  }
    }

#galaxy-quiz .quiz-carousel__card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background: var(--color-foreground-light);
    padding: 20px 18px;
  }

@media (min-width: 768px) {

#galaxy-quiz .quiz-carousel__card-inner {
      gap: 32px;
      padding: 30px;
  }
    }

#galaxy-quiz .quiz-carousel__balloon {
    position: absolute;
    top: -60px;
    right: -10px;
    transform: rotate(10.196deg);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.4s ease;
    width: 20.8vw;
    max-width: 100px;
    height: auto;
    pointer-events: none;
  }

@media (min-width: 768px) {

#galaxy-quiz .quiz-carousel__balloon {
      opacity: 1;
  }
    }

#galaxy-quiz .quiz-carousel__card.is-active .quiz-carousel__balloon {
    opacity: 1;
  }

#galaxy-quiz .quiz-carousel__image {
    border-radius: 8px;
    width: 100%;
    height: auto;
  }

#galaxy-quiz .quiz-carousel__button {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    transition:
      background 0.15s ease,
      transform 0.1s ease,
      box-shadow 0.1s ease;
    cursor: pointer;
    box-shadow: 0 4px 0 0 #363636;
    border: 3px solid #363636;
    border-radius: 90px;
    background: #000;
    padding: 25px 20px;
    width: 100%;
    max-width: 340px;
    color: var(--color-foreground-light);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.3px;
    text-align: center;
    text-decoration: none;
    word-break: keep-all;
  }

:is(#galaxy-quiz .quiz-carousel__button)::after {
      position: absolute;
      inset: -3px;
      box-shadow: 4px 4px 4px 2px rgba(255, 255, 255, 0.7) inset;
      border-radius: inherit;
      pointer-events: none;
      content: "";
    }

:is(#galaxy-quiz .quiz-carousel__button):hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 0 0 #363636;
    }

:is(#galaxy-quiz .quiz-carousel__button):active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 0 #363636;
    }

#galaxy-quiz .quiz-carousel__button-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

#galaxy-quiz .quiz-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-block-start: 10px;
  }

#galaxy-quiz .quiz-carousel__dot {
    transition: background 0.2s ease;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background: #9c9c9c;
    padding: 0;
    width: 10px;
    height: 10px;
  }

.is-active:is(#galaxy-quiz .quiz-carousel__dot) {
      background: #ffe403;
    }

:is(#galaxy-quiz .quiz-carousel__dot):focus-visible {
      outline: 3px solid #4a90d9;
      outline-offset: 3px;
    }