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

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: qk-galaxy-fade-out 0.25s ease-out;
}

::view-transition-new(root) {
  animation: qk-galaxy-fade-in 0.25s ease-in;
}

@keyframes qk-galaxy-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes qk-galaxy-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes qk-galaxy-cards-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-50% - (var(--loop-gap, 0px) / 2)), 0, 0);
  }
}

@keyframes qk-galaxy-cards-scroll-reverse {
  from {
    transform: translate3d(calc(-50% - (var(--loop-gap, 0px) / 2)), 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes qk-galaxy-enter-up {
  from {
    transform: translateY(20px);
    opacity: 0;
    /*filter: blur(6px);*/
  }
  to {
    transform: translateY(0);
    opacity: 1;
    /*filter: blur(0);*/
  }
}

@keyframes qk-galaxy-enter-card {
  from {
    opacity: 0;
    /*filter: blur(6px);*/
  }
  to {
    opacity: 1;
    /*filter: blur(0);*/
  }
}

@keyframes qk-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

#galaxy-type-app {
  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;
  background: linear-gradient(192deg, #fdfdfd 0%, #d0d1d8 100%);
  text-rendering: optimizeLegibility;

  --text-color: #03112a;
  --consultant-gradient: linear-gradient(90deg, #db112c 0%, #ff2f4b 100%);
  --presenter-gradient: linear-gradient(90deg, #36db11 0%, #88ff56 100%);
  --supporter-gradient: linear-gradient(90deg, #11b9db 0%, #56f4ff 100%);
  --speed-gradient: linear-gradient(90deg, #dbd811 0%, #e6ff56 100%);
  --demonstrator-gradient: linear-gradient(90deg, #db11a2 0%, #ff5683 100%);
  --closing-gradient: linear-gradient(90deg, #1183db 0%, #56b5ff 100%);
  --balance-gradient: linear-gradient(90deg, #db5b11 0%, #ffb356 100%);
  --adviser-gradient: linear-gradient(90deg, #269e0b 0%, #35622b 100%);

  --consultant-color: #fe2f4a;
  --presenter-color: #36db11;
  --supporter-color: #11b9db;
  --speed-color: #dbd811;
  --demonstrator-color: #ff5683;
  --closing-color: #1183db;
  --balance-color: #db5b11;
  --adviser-color: #35622b;

  color: var(--text-color);
}

#galaxy-type-app::before,#galaxy-type-app::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
  }

#galaxy-type-app::before {
    opacity: 0.65;
    z-index: 0;
    mix-blend-mode: overlay;
    background-image: url(/img/shared/qk-bg-texture.png);
    background-size: 220px 220px;
  }

#galaxy-type-app::after {
    z-index: 1;
    background:
      linear-gradient(to right, rgba(3, 17, 42, 0.04) 1px, transparent 1px) 0
        0 / 60px 60px,
      linear-gradient(to bottom, rgba(3, 17, 42, 0.04) 1px, transparent 1px) 0
        0 / 60px 60px;
  }

@media (min-width: 768px) {

#galaxy-type-app::after {
      background-size: 100px 100px;
  }
    }

#galaxy-type-app  > * {
    position: relative;
    z-index: 2;
  }

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

#galaxy-type-app  > .hero {
    display: grid;
    flex: 1;
    align-content: center;
    gap: 20px;
    padding: 22px 0;
    text-align: center;
  }

@media (min-width: 768px) {

#galaxy-type-app  > .hero {
      gap: 40px;
      padding: 40px 0;
  }
    }

#galaxy-type-app .hero__logos {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    animation: qk-galaxy-enter-up 1400ms cubic-bezier(0.22, 1, 0.36, 1) 100ms
      backwards;
    padding-inline: 20px;
  }

@media (min-width: 768px) {

#galaxy-type-app .hero__logos {
      justify-content: center;
      gap: 20px;
  }
    }

:is(#galaxy-type-app .hero__logos) .hero__logos--galaxy {
      width: 75px;
    }

@media (min-width: 768px) {

:is(#galaxy-type-app .hero__logos) .hero__logos--galaxy {
        width: 125px;
    }
      }

:is(#galaxy-type-app .hero__logos) .hero__logos--quizknock {
      width: 90px;
    }

@media (min-width: 768px) {

:is(#galaxy-type-app .hero__logos) .hero__logos--quizknock {
        width: 167px;
    }
      }

#galaxy-type-app .hero__title {
    animation: qk-galaxy-enter-up 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms
      backwards;
    margin: 6px 0 0;
    margin-bottom: 20px;
    padding-inline: 20px;
    font-weight: 700;
    font-size: clamp(20px, 11vw, 50px);
    line-height: 1.25;
    font-family: "LINE Seed JP", sans-serif;
    text-align: left;

    word-break: keep-all;
    overflow-wrap: break-word;
  }

@media (min-width: 768px) {

#galaxy-type-app .hero__title {
      margin: 0;
      font-size: 54px;
      text-align: center;
  }
    }

#galaxy-type-app .hero__cards {
    padding-block: 8px 20px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
  }

#galaxy-type-app .hero__cards--wrapper {
    display: grid;
    position: relative;
  }

#galaxy-type-app .hero__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    margin-bottom: 0;
    border: solid 1px #d4d6d8;

    border-radius: 80px;
    background: #ffffff;
    padding: 10px 15px;
    font-size: 15px;
    letter-spacing: 0.1em;
    word-break: keep-all;
  }

@media (min-width: 768px) {

#galaxy-type-app .hero__badge {
      display: none;
  }
    }

@media (min-width: 768px) {

#galaxy-type-app .hero__cards-track {
      --loop-gap: 22px;
      display: flex;
      gap: 22px;
      transform: translateZ(0);
      animation: qk-galaxy-cards-scroll 40s linear 0ms infinite;
      will-change: transform;
      width: -moz-max-content;
      width: max-content;
  }
    }

@media (max-width: 767px) {

#galaxy-type-app .hero__cards-track {
      display: flex;
      flex-direction: column;
      gap: 16px;
  }
    }

@media (min-width: 768px) {

#galaxy-type-app .hero__cards-row {
      display: contents;
  }
    }

@media (max-width: 767px) {

#galaxy-type-app .hero__cards-row {
      --loop-gap: 16px;
      display: flex;
      gap: 16px;
      width: -moz-max-content;
      width: max-content;
  }
    }

@media (max-width: 767px) {

#galaxy-type-app .hero__cards-row--upper {
      transform: translateZ(0);
      animation: qk-galaxy-cards-scroll 20s linear 0ms infinite;
      will-change: transform;
  }
    }

@media (max-width: 767px) {

#galaxy-type-app .hero__cards-row--lower {
      transform: translateZ(0);
      animation: qk-galaxy-cards-scroll-reverse 20s linear 0ms infinite
        backwards;
      will-change: transform;
  }
    }

@media (min-width: 768px) {
    #galaxy-type-app .hero__cards-row--upper .hero-card:nth-child(1) {
      order: 1;
    }
    #galaxy-type-app .hero__cards-row--upper .hero-card:nth-child(2) {
      order: 2;
    }
    #galaxy-type-app .hero__cards-row--upper .hero-card:nth-child(3) {
      order: 3;
    }
    #galaxy-type-app .hero__cards-row--upper .hero-card:nth-child(4) {
      order: 4;
    }
    #galaxy-type-app .hero__cards-row--lower .hero-card:nth-child(1) {
      order: 5;
      animation: qk-galaxy-enter-card 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        600ms backwards;
    }
    #galaxy-type-app .hero__cards-row--lower .hero-card:nth-child(2) {
      order: 6;
      animation: qk-galaxy-enter-card 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        700ms backwards;
    }
    #galaxy-type-app .hero__cards-row--lower .hero-card:nth-child(3) {
      order: 7;
      animation: qk-galaxy-enter-card 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        800ms backwards;
    }
    #galaxy-type-app .hero__cards-row--lower .hero-card:nth-child(4) {
      order: 8;
      animation: qk-galaxy-enter-card 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        900ms backwards;
    }
    #galaxy-type-app .hero__cards-row--upper .hero-card:nth-child(5) {
      order: 9;
    }
    #galaxy-type-app .hero__cards-row--upper .hero-card:nth-child(6) {
      order: 10;
    }
    #galaxy-type-app .hero__cards-row--upper .hero-card:nth-child(7) {
      order: 11;
    }
    #galaxy-type-app .hero__cards-row--upper .hero-card:nth-child(8) {
      order: 12;
    }
    #galaxy-type-app .hero__cards-row--lower .hero-card:nth-child(5) {
      order: 13;
    }
    #galaxy-type-app .hero__cards-row--lower .hero-card:nth-child(6) {
      order: 14;
    }
    #galaxy-type-app .hero__cards-row--lower .hero-card:nth-child(7) {
      order: 15;
    }
    #galaxy-type-app .hero__cards-row--lower .hero-card:nth-child(8) {
      order: 16;
    }
  }

#galaxy-type-app .hero-card {
    display: block;
    flex-shrink: 0;
    box-shadow: 0 5.625px 11.25px 0 rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 22.5px;
    aspect-ratio: 374 / 476;
    width: auto;
    height: clamp(240px, 45vh, 600px);
    -o-object-fit: cover;
       object-fit: cover;
  }

@media (max-width: 767px) {

#galaxy-type-app .hero-card {
      border-radius: 14px;
      height: 200px;
  }
    }

:is(#galaxy-type-app .hero-card):nth-child(1) {
      animation: qk-galaxy-enter-card 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        200ms backwards;
    }

:is(#galaxy-type-app .hero-card):nth-child(2) {
      animation: qk-galaxy-enter-card 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        300ms backwards;
    }

:is(#galaxy-type-app .hero-card):nth-child(3) {
      animation: qk-galaxy-enter-card 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        400ms backwards;
    }

:is(#galaxy-type-app .hero-card):nth-child(4) {
      animation: qk-galaxy-enter-card 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        500ms backwards;
    }

:is(#galaxy-type-app .hero-card):nth-child(5) {
      animation: qk-galaxy-enter-card 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        600ms backwards;
    }

:is(#galaxy-type-app .hero-card):nth-child(6) {
      animation: qk-galaxy-enter-card 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        700ms backwards;
    }

:is(#galaxy-type-app .hero-card):nth-child(7) {
      animation: qk-galaxy-enter-card 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        800ms backwards;
    }

:is(#galaxy-type-app .hero-card):nth-child(8) {
      animation: qk-galaxy-enter-card 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        900ms backwards;
    }

#galaxy-type-app .hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    animation: qk-galaxy-enter-up 1400ms cubic-bezier(0.22, 1, 0.36, 1) 300ms
      backwards;
    margin-top: 14px;
  }

#galaxy-type-app .diagnosis {
    display: grid;
    align-content: start;
    gap: 20px;
    margin: 0 auto;
    padding: 20px 16px;
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
    width: min(100%, 950px);
  }

@media (min-width: 768px) {

#galaxy-type-app .diagnosis {
      gap: 40px;
      padding: clamp(12px, 2vw, 24px);
      padding-top: 32px;
      padding-bottom: 120px;
  }
    }

#galaxy-type-app .diagnosis__intro {
    display: grid;
    gap: 6px;
  }

#galaxy-type-app .diagnosis__cards {
    display: grid;
    gap: 15px;
  }

#galaxy-type-app .diagnosis__title {
    margin: 0;
    color: #101010;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
  }

@media (min-width: 768px) {

#galaxy-type-app .diagnosis__title {
      font-size: 24px;
  }
    }

#galaxy-type-app .diagnosis__lead {
    margin: 0;
    color: #101010;
    font-size: 14px;
    line-height: 1.5;
  }

@media (min-width: 768px) {

#galaxy-type-app .diagnosis__lead {
      font-size: 16px;
  }
    }

#galaxy-type-app .diagnosis-card {
    box-shadow: 0 4px 8.75px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #d4d6d8;
    border-radius: 20px;
    background: #ffffff;
    width: 100%;
    overflow: hidden;
  }

#galaxy-type-app .diagnosis-card.is-answered {
    opacity: 0.5;
    pointer-events: none;
  }

#galaxy-type-app .diagnosis-card.is-active {
    opacity: 1;
    animation: qk-galaxy-enter-up 500ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

#galaxy-type-app .diagnosis-card__prompt {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #03112a;
    padding: 10px 20px;
    min-height: 74px;
  }

#galaxy-type-app .diagnosis-card__question {
    margin: 0;
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
  }

#galaxy-type-app .diagnosis-card__text {
    margin: 0;
    padding: 20px;
    color: #101010;
  }

#galaxy-type-app .diagnosis-card__answer {
    display: grid;
    gap: 10px;
    padding: 20px;
  }

#galaxy-type-app .diagnosis-card__labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #101010;
    font-size: 12px;
    line-height: 1.5;
  }

:is(#galaxy-type-app .diagnosis-card__labels) p {
      margin: 0;
    }

#galaxy-type-app .diagnosis-card__scale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

#galaxy-type-app .diagnosis-card__scale-dot {
    flex-shrink: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    opacity: 0.5;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      opacity 0.2s ease,
      transform 0.2s ease;
    cursor: pointer;
    border: 2px dashed #101010;
    border-radius: 9999px;
    background: transparent;
    padding: 0;
    width: 30px;
    height: 30px;
  }

:is(#galaxy-type-app .diagnosis-card__scale-dot):hover {
      transform: translateY(-1px);
      opacity: 0.75;
    }

:is(#galaxy-type-app .diagnosis-card__scale-dot):focus-visible {
      opacity: 1;
      outline: 2px solid #03112a;
      outline-offset: 2px;
    }

[aria-pressed="true"]:is(#galaxy-type-app .diagnosis-card__scale-dot),.is-selected:is(#galaxy-type-app .diagnosis-card__scale-dot) {
      opacity: 1;
      background: #101010;
    }

#galaxy-type-app .diagnosis-card__scale-dot--1 {
    width: 50px;
    height: 50px;
  }

#galaxy-type-app .diagnosis-card__scale-dot--2 {
    width: 40px;
    height: 40px;
  }

#galaxy-type-app .diagnosis-card__scale-dot--3 {
    width: 30px;
    height: 30px;
  }

#galaxy-type-app .diagnosis-card__scale-dot--4 {
    width: 40px;
    height: 40px;
  }

#galaxy-type-app .diagnosis-card__scale-dot--5 {
    width: 50px;
    height: 50px;
  }

#galaxy-type-app .diagnosis-card__sr-only {
    position: absolute;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
  }

#galaxy-type-app .skeleton-line {
    background: rgba(0, 0, 0, 0.08);
  }

#galaxy-type-app .skeleton-pulse {
    animation: qk-skeleton-pulse 1.5s ease-in-out infinite;
  }

@media (min-width: 768px) {
    #galaxy-type-app .diagnosis__cards {
      gap: 20px;
    }

    #galaxy-type-app .diagnosis-card__prompt {
      padding: 20px 50px;
    }

    #galaxy-type-app .diagnosis-card__question {
      font-size: 20px;
    }

    #galaxy-type-app .diagnosis-card__answer {
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      padding: 32px clamp(24px, 10vw, 150px);
    }

    #galaxy-type-app .diagnosis-card__labels {
      display: flex;
      position: absolute;
      top: 50%;
      right: clamp(24px, 10vw, 150px);
      left: clamp(24px, 10vw, 150px);
      justify-content: space-between;
      align-items: center;
      transform: translateY(-50%);
      pointer-events: none;
    }

    #galaxy-type-app .diagnosis-card__labels p:first-child {
      white-space: nowrap;
    }

    #galaxy-type-app .diagnosis-card__labels p:last-child {
      white-space: nowrap;
    }

    #galaxy-type-app .diagnosis-card__scale {
      justify-content: space-between;
      gap: clamp(8px, 1.5vw, 24px);
      width: min(100%, 430px);
    }
  }

#galaxy-type-app .diagnosis__sticky {
    display: grid;
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom));
    justify-items: center;
    gap: 10px;
    z-index: 10;
    padding-inline: 20px;
    pointer-events: none;
  }

@media (min-width: 768px) {

#galaxy-type-app .diagnosis__sticky {
      padding-inline: 0;
  }
    }

#galaxy-type-app .diagnosis__sticky-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

#galaxy-type-app .diagnosis__sticky-dot {
    border-radius: 9999px;
    background: #ffffff;
    width: 8px;
    height: 8px;
  }

#galaxy-type-app .diagnosis__sticky-dot.is-done {
    opacity: 0.4;
    background: #03112a;
  }

#galaxy-type-app .diagnosis__sticky-dot.is-active {
    background: #03112a;
  }

#galaxy-type-app .diagnosis__sticky-button {
    width: min(100%, 360px);
    pointer-events: auto;
  }

#galaxy-type-app .diagnosis__sticky-button:disabled {
    cursor: default;
    background: #ffffff;
    color: rgba(3, 17, 42, 0.3);
  }

#galaxy-type-app .diagnosis__sticky-button:disabled .button__badge {
    border-color: currentColor;
  }

#galaxy-type-app .diagnosis__sticky-button:disabled:hover {
    transform: none;
    cursor: not-allowed;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.25);
  }

@media (max-width: 767px) {
    #galaxy-type-app .diagnosis__sticky-button {
      padding-inline: 20px;
      width: 100%;
    }
  }

#galaxy-type-app .hero__actions-note {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.4px;
  }

#galaxy-type-app .result {
    display: flex;
    flex-direction: column;
    align-content: start;
    align-items: center;
    gap: 20px;
    margin: 0 auto;
    padding: 20px 16px;
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
    width: min(100%, 950px);
  }

@media (min-width: 768px) {

#galaxy-type-app .result {
      gap: 40px;
      padding: clamp(12px, 2vw, 24px);
      padding-top: 32px;
      padding-bottom: 120px;
  }
    }

:is(#galaxy-type-app .result) .result__intro {
      align-self: flex-start;
      animation: qk-galaxy-enter-up 1400ms cubic-bezier(0.22, 1, 0.36, 1) 100ms
        backwards;
    }

@media (min-width: 768px) {

:is(#galaxy-type-app .result) .result__intro {
        align-self: center;
    }
      }

:is(#galaxy-type-app .result) .result__title {
      font-weight: 700;
      font-size: 16px;
    }

@media (min-width: 768px) {

:is(#galaxy-type-app .result) .result__title {
        font-size: 24px;
    }
      }

:is(#galaxy-type-app .result) .result__ribbon {
      color: #000000;
      font-weight: 800;
      font-size: 8px;
      font-family: "Mulish", sans-serif;
      text-transform: uppercase;
    }

:is(#galaxy-type-app .result) .result__wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 50px;
    }

@media (min-width: 768px) {

:is(#galaxy-type-app .result) .result__wrapper {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
    }
      }

:is(#galaxy-type-app .result) .result__actor {
      position: relative;
      animation: qk-galaxy-enter-up 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms
        backwards;
      padding-inline: 17px;
      width: min(400px, 100%);
      max-width: 100%;
      height: auto;
    }

@media (min-width: 768px) {

:is(#galaxy-type-app .result) .result__actor {
        width: -moz-fit-content;
        width: fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }
      }

:is(:is(#galaxy-type-app .result) .result__actor) .hero-card {
        rotate: 3.44deg;
        width: 100%;
        height: auto;
      }

@media (min-width: 768px) {

:is(:is(#galaxy-type-app .result) .result__actor) .hero-card {
          width: auto;
          height: 430px;
      }
        }

:is(:is(#galaxy-type-app .result) .result__actor) .result__actor--back {
        position: absolute;
        rotate: -7.32deg;
        border-radius: 22.5px;
        background: var(--text-color);
        width: calc(100% - 17px * 2);
        height: 100%;
      }

:is(:is(#galaxy-type-app .result) .result__actor) .result__actor--texture {
        position: absolute;
        rotate: -7.32deg;
        opacity: 0.65;
        mix-blend-mode: overlay;
        border-radius: 22.5px;
        background-image: url(/img/shared/qk-bg-texture.png);
        background-size: 220px 220px;
        width: calc(100% - 17px * 2);
        height: 100%;
      }

.consultant:is(#galaxy-type-app .result) .result__card--title {
        color: var(--consultant-color);
      }

.consultant:is(#galaxy-type-app .result) .result__card--head {
        background: color-mix(
          in srgb,
          var(--consultant-color) 10%,
          transparent
        );
      }

.consultant:is(#galaxy-type-app .result) .result__callout {
        background: var(--consultant-gradient);
      }

.presenter:is(#galaxy-type-app .result) .result__card--title {
        color: var(--presenter-color);
      }

.presenter:is(#galaxy-type-app .result) .result__card--head {
        background: color-mix(in srgb, var(--presenter-color) 10%, transparent);
      }

.presenter:is(#galaxy-type-app .result) .result__callout {
        background: var(--presenter-gradient);
      }

.supporter:is(#galaxy-type-app .result) .result__card--title {
        color: var(--supporter-color);
      }

.supporter:is(#galaxy-type-app .result) .result__card--head {
        background: color-mix(in srgb, var(--supporter-color) 10%, transparent);
      }

.supporter:is(#galaxy-type-app .result) .result__callout {
        background: var(--supporter-gradient);
      }

.speed:is(#galaxy-type-app .result) .result__card--title {
        color: var(--speed-color);
      }

.speed:is(#galaxy-type-app .result) .result__card--head {
        background: color-mix(in srgb, var(--speed-color) 10%, transparent);
      }

.speed:is(#galaxy-type-app .result) .result__callout {
        background: var(--speed-gradient);
      }

.demonstrator:is(#galaxy-type-app .result) .result__card--title {
        color: var(--demonstrator-color);
      }

.demonstrator:is(#galaxy-type-app .result) .result__card--head {
        background: color-mix(
          in srgb,
          var(--demonstrator-color) 10%,
          transparent
        );
      }

.demonstrator:is(#galaxy-type-app .result) .result__callout {
        background: var(--demonstrator-gradient);
      }

.closing:is(#galaxy-type-app .result) .result__card--title {
        color: var(--closing-color);
      }

.closing:is(#galaxy-type-app .result) .result__card--head {
        background: color-mix(in srgb, var(--closing-color) 10%, transparent);
      }

.closing:is(#galaxy-type-app .result) .result__callout {
        background: var(--closing-gradient);
      }

.balance:is(#galaxy-type-app .result) .result__card--title {
        color: var(--balance-color);
      }

.balance:is(#galaxy-type-app .result) .result__card--head {
        background: color-mix(in srgb, var(--balance-color) 10%, transparent);
      }

.balance:is(#galaxy-type-app .result) .result__callout {
        background: var(--balance-gradient);
      }

.adviser:is(#galaxy-type-app .result) .result__card--title {
        color: var(--adviser-color);
      }

.adviser:is(#galaxy-type-app .result) .result__card--head {
        background: color-mix(in srgb, var(--adviser-color) 10%, transparent);
      }

.adviser:is(#galaxy-type-app .result) .result__callout {
        background: var(--adviser-gradient);
      }

:is(#galaxy-type-app .result) .result__cards {
      display: grid;
      gap: 20px;
      animation: qk-galaxy-enter-up 1400ms cubic-bezier(0.22, 1, 0.36, 1) 350ms
        backwards;
    }

:is(#galaxy-type-app .result) .result__card {
      border-radius: 20px;
      background: #ffffff;
    }

:is(:is(#galaxy-type-app .result) .result__card) .result__card--head {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border-radius: 20px 20px 0 0;
        padding: 20px 15px;
      }

@media (min-width: 768px) {

:is(:is(#galaxy-type-app .result) .result__card) .result__card--head {
          flex-direction: row-reverse;
          justify-content: space-between;
          align-items: flex-end;
      }
        }

:is(:is(:is(#galaxy-type-app .result) .result__card) .result__card--head) .result__card--label {
          font-weight: 700;
          font-size: 12px;
          line-height: 1;
        }

:is(:is(:is(#galaxy-type-app .result) .result__card) .result__card--head) .result__card--title {
          font-weight: 700;
          font-size: 18px;
          line-height: 1;
        }

:is(:is(#galaxy-type-app .result) .result__card) .result__card--body {
        border-radius: 0 0 20px 20px;
        padding: 20px;
      }

:is(:is(:is(#galaxy-type-app .result) .result__card) .result__card--body) .result__card--content {
          font-size: 14px;
          line-height: 1.75;
        }

:is(#galaxy-type-app .result) .result__callout {
      position: relative;
      animation: qk-galaxy-enter-up 1400ms cubic-bezier(0.22, 1, 0.36, 1) 500ms
        backwards;
      border: 2px solid #ffffff;
      border-radius: 20px;
      padding: 20px;
      padding-right: calc(20px + 100px);
      width: 100%;
      max-width: 480px;
    }

:is(:is(#galaxy-type-app .result) .result__callout) .result__callout--label {
        display: inline-block;
        position: absolute;
        top: 0;
        transform: translateY(-50%);
        border-radius: 4px;
        background: #ffffff;
        padding: 3px 6px;
        font-size: 12px;
        line-height: 100%;
      }

:is(:is(#galaxy-type-app .result) .result__callout) .result__callout--content {
        margin-bottom: 0;
        color: #ffffff;
        font-weight: 700;
        font-size: 17px;
        line-height: 1.5;
        text-align: center;
        word-break: keep-all;
        overflow-wrap: break-word;
      }

:is(:is(#galaxy-type-app .result) .result__callout) .result__callout--actor {
        position: absolute;
        right: 0;
        bottom: 0;
        height: min(146px, 160%);
      }

@media (min-width: 768px) {

:is(:is(#galaxy-type-app .result) .result__callout) .result__callout--actor {
          right: 10px;
      }
        }

:is(#galaxy-type-app .result) .result__buttons {
      display: flex;
      flex-direction: column;
      gap: 18px;
      animation: qk-galaxy-enter-up 1400ms cubic-bezier(0.22, 1, 0.36, 1) 650ms
        backwards;
      padding: 0 20px;
    }

@media (min-width: 768px) {

:is(#galaxy-type-app .result) .result__buttons {
        flex-direction: row;
        justify-content: center;
    }
      }

:is(#galaxy-type-app .result) .result__back {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      animation: qk-galaxy-enter-up 1400ms cubic-bezier(0.22, 1, 0.36, 1) 800ms
        backwards;
      color: var(--text-color);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.06em;
      text-decoration: none;
    }

:is(#galaxy-type-app .result) .result__back--icon {
      display: block;
    }

#galaxy-type-app .button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border: none;
    border-radius: 86px;
    padding: 20px 48px;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
  }

#galaxy-type-app [data-save-card] {
    white-space: nowrap;
  }

@media (max-width: 767px) {
    #galaxy-type-app [data-save-card] {
      padding-inline: 24px;
    }
  }

#galaxy-type-app .button--primary {
    position: relative;
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.25);
    background:
      linear-gradient(
        288deg,
        rgba(255, 255, 255, 0) 74.23%,
        rgba(255, 255, 255, 0.3) 100%
      ),
      #03112a;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.96px;
  }

:is(#galaxy-type-app .button--primary):hover {
      transform: translateY(-3px);
      box-shadow:
        4px 8px 24px 0 rgba(59, 130, 246, 0.35),
        4px 4px 10px 0 rgba(0, 0, 0, 0.25);
    }

:is(#galaxy-type-app .button--primary)::after {
      position: absolute;
      opacity: 0;
      transition: opacity 0.3s ease;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      content: "";
    }

.is-copied:is(#galaxy-type-app .button--primary)::after {
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 1;
      animation: share-feedback 2s ease forwards;
      background: #16a34a;
      content: "URLをコピーしました";
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.5px;
    }

.is-copy-failed:is(#galaxy-type-app .button--primary)::after {
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 1;
      animation: share-feedback 2s ease forwards;
      background: #dc2626;
      content: "コピーできませんでした";
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.5px;
    }

#galaxy-type-app {

  @keyframes share-feedback {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }
    10% {
      transform: scale(1);
      opacity: 1;
    }
    75% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }
}

#galaxy-type-app .button__badge {
    border: 1px solid #fff;
    border-radius: 100px;
    padding: 2px 7px;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 1px;
  }

#galaxy-type-app .button--ghost {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #111827;
  }

/* ── Card Button (floating) ── */

#galaxy-type-app .card-button-anchor {
    position: sticky;
    top: 0;
    z-index: 100;
    margin-inline: auto;
    /* 950px content area に合わせて中央寄せ */
    width: min(100%, 950px);
    height: 0;
    overflow: visible;
    pointer-events: none;
  }

#galaxy-type-app .card-button {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    transition: background-color 180ms ease;
    cursor: pointer;
    margin-top: 10px;
    margin-right: 10px;
    box-shadow: 2.839px 2.839px 7.097px 0 rgba(0, 0, 0, 0.25);
    border: none;
    border-radius: 9999px;
    background:
      linear-gradient(
        288deg,
        rgba(255, 255, 255, 0) 74.23%,
        rgba(255, 255, 255, 0.3) 100%
      ),
      #03112a;
    padding: 11px;
    pointer-events: auto;
  }

#galaxy-type-app .card-button__icon {
    display: block;
    transition:
      opacity 180ms ease,
      transform 180ms ease;
    width: 22px;
    height: 22px;
  }

#galaxy-type-app .card-button__icon--cards {
    transform: scale(1);
    opacity: 1;
  }

#galaxy-type-app .card-button__icon--close {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
  }

#galaxy-type-app .card-button.is-open .card-button__icon--cards {
    transform: scale(0.9);
    opacity: 0;
  }

#galaxy-type-app .card-button.is-open .card-button__icon--close {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

#galaxy-type-app .card-overlay {
    display: flex;
    position: fixed;
    top: var(--card-overlay-top, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: center;
    align-items: flex-start;
    z-index: 50;
    background: rgba(3, 17, 42, 0.8);
    padding: 20px;
    padding-top: 60px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 220ms ease,
      visibility 0s linear 220ms;
    pointer-events: none;
  }

#galaxy-type-app .card-overlay.is-open {
    visibility: visible;
    opacity: 1;
    transition:
      opacity 220ms ease,
      visibility 0s linear 0s;
    pointer-events: auto;
  }

#galaxy-type-app .card-overlay.is-closing {
    pointer-events: none;
  }

#galaxy-type-app .card-overlay[hidden] {
    display: none;
  }

#galaxy-type-app .card-overlay__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition:
      transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 220ms ease;
    will-change: transform, opacity;
    width: 100%;
    max-width: 480px;
  }

#galaxy-type-app .card-overlay.is-open .card-overlay__grid {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

#galaxy-type-app .card-overlay__item {
    display: block;
    border-radius: 12px;
    overflow: hidden;
  }

#galaxy-type-app .card-overlay__item:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

#galaxy-type-app .card-overlay__card-img {
    display: block;
    width: 100%;
    height: auto;
  }

@media (prefers-reduced-motion: reduce) {
    #galaxy-type-app .card-button__icon,#galaxy-type-app .card-overlay,#galaxy-type-app .card-overlay__grid {
      transition: none;
    }
  }

@media (min-width: 768px) {
    #galaxy-type-app .card-button {
      margin-right: 0;
      padding: 14px;
    }

    #galaxy-type-app .card-button__icon {
      width: 30px;
      height: 30px;
    }

    #galaxy-type-app .card-overlay {
      padding-top: 70px;
    }

    #galaxy-type-app .card-overlay__grid {
      gap: 16px;
      max-width: 600px;
    }
  }