html {
  scroll-behavior: smooth;
  --sw: 100vw;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 400;
  color: #1a1a1a;
  background: #23252a;
  font-feature-settings: "palt" 1;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}
a:hover {
  opacity: 0.7;
}

img {
  width: 100%;
  height: auto;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid #c8a14a;
  outline-offset: 2px;
}

.u-center {
  text-align: center;
}

.u-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media screen and (min-width: 768px) {
  .u-sp {
    display: none !important;
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes result-rise {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes badge-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
.l-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../img/design/stage/simulation_bg_chara.webp") center center/cover no-repeat, url("../img/design/stage/simulation_wrapper_bg.webp") center center/cover no-repeat, #23252a;
}
@media screen and (max-width: 1110px) {
  .l-stage {
    background-image: url("../img/design/stage/simulation_wrapper_bg.webp");
  }
}
@media screen and (max-width: 767px) {
  .l-stage {
    padding: 0;
    background-image: none;
    background: #0d1f38;
  }
  .l-stage::before {
    display: none;
  }
}

.l-stage__logo {
  position: absolute;
  top: calc(var(--sw) * 0.0213333333);
  right: calc(var(--sw) * 0.0266666667);
  width: calc(var(--sw) * 0.1);
  height: auto;
}
@media screen and (max-width: 767px) {
  .l-stage__logo {
    display: none;
  }
}

.l-stage__copy {
  position: absolute;
  bottom: calc(var(--sw) * 0.0213333333);
  right: calc(var(--sw) * 0.0266666667);
  color: #fff;
  font-size: 13px;
}
@media screen and (max-width: 767px) {
  .l-stage__copy {
    display: none;
  }
}

.l-stage__center {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .l-stage__center {
    flex: 1 1 auto;
    width: 100%;
  }
}
.l-stage__center .c-imgbtn {
  width: calc(var(--sw) * 0.6433333333);
}

.l-stage__side {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .l-stage__side {
    display: none;
  }
}

.l-stage__hero {
  width: 25vw;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.l-stage__hero img {
  display: block;
  width: 100%;
  height: auto;
}

.l-stage__title {
  width: 100%;
}

.l-stage__start {
  width: 76.6666666667%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 0.12s ease;
  margin-left: min(var(--sw) * 0.0104166667, 20px);
  filter: drop-shadow(0 0 calc(var(--sw) * 0.02) rgba(0, 0, 153, 0.7));
}
.l-stage__start:hover {
  transform: translateY(-2px);
}

.l-stage__top {
  width: 10.4166666667vw;
  max-width: 200px;
  transition: transform 0.12s ease;
}
.l-stage__top img {
  display: block;
  width: 100%;
  height: auto;
}
.l-stage__top:hover {
  transform: scale(1.03);
}

.l-device {
  --fh: min(960px, calc(100dvh - 56px));
  --sw: calc(var(--fh) * 460 / 960);
  position: relative;
  z-index: 2;
  width: calc(var(--fh) * 500 / 960);
  max-width: 100%;
  height: var(--fh);
  background: #0a0a0a;
  border-radius: calc(var(--fh) * 40 / 960);
  padding: calc(var(--fh) * 71 / 960) calc(var(--fh) * 20 / 960) calc(var(--fh) * 71 / 960);
}
@media screen and (max-width: 767px) {
  .l-device {
    --fh: 100dvh;
    --sw: 100vw;
    width: 100%;
    max-width: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
}

.l-device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background: linear-gradient(180deg, #173a64 0%, #0d1f38 100%);
  scrollbar-width: none;
}
.l-device__screen::-webkit-scrollbar {
  display: none;
}

.p-shindan {
  min-height: 100%;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background: transparent;
}
.p-shindan__screen {
  display: none;
}
.p-shindan__screen.is-active {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  animation: fade-up 0.6s ease-out both;
}
.p-shindan__inner {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: 28px 18px 56px;
}
@media screen and (max-width: 767px) {
  .p-shindan__inner {
    padding: 24px 16px 56px;
  }
}

.c-imgbtn {
  display: block;
  width: calc(var(--sw) * 0.5666666667);
  max-width: 100%;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.15s ease, filter 0.15s ease;
  opacity: 0.2s ease;
}
.c-imgbtn img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 calc(var(--sw) * 0.02) rgba(0, 0, 153, 0.7));
}
.c-imgbtn:hover {
  filter: brightness(1.04);
  opacity: 0.6;
}
.c-imgbtn:active {
  opacity: 0.85;
}

.c-top {
  background-image: url("../img/design/start/start_bg.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  flex: 1 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.c-top__wrap {
  display: flex;
  justify-content: space-between;
}
.c-top__link {
  width: calc(var(--sw) * 0.1666666667);
  margin-top: calc(var(--sw) * 0.0226666667);
  margin-left: calc(var(--sw) * 0.0306666667);
  display: block;
}
.c-top__link02 {
  width: calc(var(--sw) * 0.2613333333);
  margin-top: calc(var(--sw) * 0.02);
  margin-right: calc(var(--sw) * 0.02);
  display: block;
}
.c-top__hero {
  display: block;
  width: 100%;
  height: auto;
}
.c-top__start {
  margin-bottom: calc(var(--sw) * 0.5046666667);
}
.c-top__copy {
  color: #fff;
  font-size: calc(var(--sw) * 0.0266666667);
  font-weight: 500;
  text-align: end;
  display: block;
  margin-right: calc(var(--sw) * 0.0333333333);
  margin-bottom: calc(var(--sw) * 0.0266666667);
}
.c-top__copy__txt {
  text-shadow: 0px 0px calc(var(--sw) * 0.02) rgba(60, 60, 206, 0.8);
}

.c-howto {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #ffffff;
}
.c-howto__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/design/start/bg_main.webp") center center/cover no-repeat;
  transform: translateZ(0);
}
.c-howto__layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  padding-bottom: calc(var(--sw) * 0.1133333333);
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  will-change: opacity;
  backface-visibility: hidden;
  scrollbar-width: none;
}
.c-howto__layer::-webkit-scrollbar {
  display: none;
}
.c-howto[data-phase=intro] .c-howto__intro, .c-howto[data-phase=proceed] .c-howto__proceed {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s ease;
}
.c-howto__title {
  display: block;
  width: 100%;
  height: auto;
  margin-top: calc(var(--sw) * 0.03);
}
.c-howto__lead {
  width: calc(var(--sw) * 0.8613333333);
  margin-top: calc(var(--sw) * 0.0253333333);
  font-size: max(13px, var(--sw) * 0.0453333333);
  font-weight: 800;
  text-shadow: 0 0 calc(var(--sw) * 0.02) rgba(0, 0, 153, 0.7);
  line-height: 1.75;
}
.c-howto__credit {
  margin-top: calc(var(--sw) * 0.0693333333);
  font-size: max(13px, var(--sw) * 0.04);
  font-weight: 800;
  text-shadow: 0 0 calc(var(--sw) * 0.02) rgba(0, 0, 153, 0.7);
  line-height: 1.4038461538;
}
.c-howto__block:first-child {
  margin-top: calc(var(--sw) * 0.1493333333);
}
.c-howto__block + .c-howto__block {
  margin-top: calc(var(--sw) * 0.0866666667);
}
.c-howto__head {
  font-size: calc(var(--sw) * 0.06);
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 0 calc(var(--sw) * 0.02) rgba(0, 0, 153, 0.7);
}
.c-howto__text {
  width: 100%;
  margin-top: calc(var(--sw) * 0.0426666667);
  font-size: max(13px, var(--sw) * 0.04);
  font-weight: 800;
  text-shadow: 0 0 calc(var(--sw) * 0.02) rgba(0, 0, 153, 0.7);
  line-height: 1.75;
}
.c-howto__block:first-child .c-howto__text:first-of-type {
  margin-top: calc(var(--sw) * 0.06);
}
.c-howto__action {
  width: 100%;
  margin-top: calc(var(--sw) * 0.376);
}
.c-howto__action:first-of-type {
  margin-top: calc(var(--sw) * 0.0253333333);
}

.c-quiz {
  position: relative;
  flex: 1 0 auto;
  overflow: hidden;
}
.c-quiz__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.c-quiz__layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease-out, visibility 0s linear 0.6s;
  will-change: opacity;
  backface-visibility: hidden;
  scrollbar-width: none;
}
.c-quiz__layer::-webkit-scrollbar {
  display: none;
}
.c-quiz__ask {
  justify-content: flex-start;
  padding: 0 calc(var(--sw) * 0.0573333333);
  padding-bottom: calc(var(--sw) * 0.08);
}
.c-quiz__spacer {
  display: block;
  flex-shrink: 0;
  width: 100%;
  transition: height 0.7s ease-in-out;
}
.c-quiz__ttl {
  display: block;
  width: 100%;
  height: auto;
  flex-shrink: 0;
}
.c-quiz__qwrap {
  width: 100%;
  opacity: 0;
  transform: translateY(calc(var(--sw) * 0.0333333333));
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.c-quiz__q {
  margin-top: calc(var(--sw) * 0.06);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: max(13px, var(--sw) * 0.0453333333);
  font-weight: 800;
  line-height: 1.75;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}
.c-quiz__choices {
  margin: calc(var(--sw) * 0.0946666667) auto 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--sw) * 0.0333333333);
  list-style: none;
  padding-left: 0;
}
.c-quiz__splash {
  position: absolute;
  inset: 0;
  z-index: 6;
  justify-content: center;
  gap: calc(var(--sw) * 0.0113333333);
}
.c-quiz__splash-ttl {
  width: 100%;
  height: auto;
  flex-shrink: 0;
}
.c-quiz__splash-get {
  width: 100%;
  height: auto;
  flex-shrink: 0;
}
.c-quiz__splash-badge {
  flex-shrink: 0;
}
.c-quiz__splash-badge .c-badge__img {
  width: calc(var(--sw) * 0.2733333333);
}
.c-quiz__splash-ttl, .c-quiz__splash-get, .c-quiz__splash-badge {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.c-quiz[data-phase=splash] .c-quiz__splash-ttl, .c-quiz[data-phase=splash] .c-quiz__splash-get, .c-quiz[data-phase=splash] .c-quiz__splash-badge {
  opacity: 1;
  transform: scale(1);
}
.c-quiz__exp {
  position: absolute;
  inset: 0;
  z-index: 5;
  justify-content: flex-start;
  padding-bottom: calc(var(--sw) * 0.08);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  color: #ffffff;
  scrollbar-width: none;
}
.c-quiz__exp::-webkit-scrollbar {
  display: none;
}
.c-quiz__exp-ttl {
  display: block;
  width: 100%;
  height: auto;
  margin-top: calc(var(--sw) * 0.06);
  flex-shrink: 0;
}
.c-quiz__exp-q {
  margin-top: calc(var(--sw) * 0.044);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: max(13px, var(--sw) * 0.0453333333);
  font-weight: 800;
  line-height: 1.75;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.c-quiz__exp-ans {
  width: calc(var(--sw) * 0.9066666667);
  margin: calc(var(--sw) * 0.04) auto 0;
}
.c-quiz__exp-ans .c-choice {
  margin-top: calc(var(--sw) * 0.0306666667);
}
.c-quiz__exp-ans .c-choice.is-answer {
  pointer-events: none;
}
.c-quiz__exp-ans-label {
  font-weight: 800;
  font-size: calc(var(--sw) * 0.06);
  line-height: 1.3333333333;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.c-quiz__exp-text {
  margin-top: calc(var(--sw) * 0.0626666667);
  font-weight: 800;
  font-size: max(13px, var(--sw) * 0.0453333333);
  line-height: 1.75;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.c-quiz__exp-get {
  display: block;
  width: 100%;
  height: auto;
  margin-top: calc(var(--sw) * 0.0666666667);
}
.c-quiz__exp-badge .c-badge__img {
  width: calc(var(--sw) * 0.2733333333);
}
.c-quiz__exp-badge-label {
  font-weight: 800;
  font-size: max(13px, var(--sw) * 0.0453333333);
  letter-spacing: 0.04em;
}
.c-quiz__next {
  margin-top: calc(var(--sw) * 0.08);
  width: 100%;
  text-align: center;
}
.c-quiz[data-phase=intro] .c-quiz__ask, .c-quiz[data-phase=ask] .c-quiz__ask {
  opacity: 1;
  visibility: visible;
}
.c-quiz[data-phase=ask] .c-quiz__ask {
  pointer-events: auto;
}
.c-quiz[data-phase=splash] .c-quiz__splash {
  opacity: 1;
  visibility: visible;
}
.c-quiz[data-phase=exp] .c-quiz__exp {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.c-quiz[data-phase=image] .c-quiz__ask, .c-quiz[data-phase=intro] .c-quiz__ask, .c-quiz[data-phase=ask] .c-quiz__ask, .c-quiz[data-phase=splash] .c-quiz__splash, .c-quiz[data-phase=exp] .c-quiz__exp {
  transition: opacity 0.6s ease-out, visibility 0s;
}
.c-quiz[data-phase=load] .c-quiz__spacer, .c-quiz[data-phase=load] .c-quiz__qwrap {
  transition: none;
}
.c-quiz[data-phase=load] .c-quiz__layer {
  transition: none;
}
.c-quiz[data-phase=load] .c-quiz__spacer, .c-quiz[data-phase=load] .c-quiz__qwrap {
  transition: none;
}
.c-quiz[data-phase=load] .c-quiz__spacer, .c-quiz[data-phase=image] .c-quiz__spacer, .c-quiz[data-phase=intro] .c-quiz__spacer {
  height: calc(50% - calc(var(--sw) * 0.18));
}
.c-quiz[data-phase=load] .c-quiz__qwrap, .c-quiz[data-phase=image] .c-quiz__qwrap, .c-quiz[data-phase=intro] .c-quiz__qwrap {
  opacity: 0;
  transform: translateY(calc(var(--sw) * 0.0333333333));
}
.c-quiz[data-phase=ask] .c-quiz__spacer, .c-quiz[data-phase=clear] .c-quiz__spacer, .c-quiz[data-phase=splash] .c-quiz__spacer, .c-quiz[data-phase=exp] .c-quiz__spacer {
  height: calc(var(--sw) * 0.1133333333);
}
.c-quiz[data-phase=ask] .c-quiz__qwrap, .c-quiz[data-phase=splash] .c-quiz__qwrap, .c-quiz[data-phase=exp] .c-quiz__qwrap {
  opacity: 1;
  transform: none;
  transition-delay: 0.45s;
}

.c-choice {
  display: flex;
  align-items: center;
  gap: calc(var(--sw) * 0.04);
  width: 100%;
  padding: calc(var(--sw) * 0.0133333333) calc(var(--sw) * 0.0373333333);
  text-align: left;
  color: #1a1a1a;
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.c-choice:hover:not(:disabled) {
  transform: translateY(-1px);
}
.c-choice__key {
  flex-shrink: 0;
  text-align: center;
  font-family: "Chakra Petch", "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: calc(var(--sw) * 0.12);
  line-height: 2;
  color: #1a1a1a;
}
.c-choice__text {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: max(13px, var(--sw) * 0.0453333333);
  line-height: 1.3970588235;
  font-weight: 800;
}
.c-choice.is-correct, .c-choice.is-answer {
  color: #ffffff;
}
.c-choice.is-correct .c-choice__key, .c-choice.is-answer .c-choice__key {
  color: #ffffff;
}

.c-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.c-badge__img {
  display: block;
  width: 96px;
  height: auto;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22));
}
.c-badge.is-silver .c-badge__img {
  filter: grayscale(1) contrast(0.92) brightness(1.05) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.18));
}
.c-badge.is-locked .c-badge__img {
  filter: grayscale(1) brightness(1.12) opacity(0.75);
}

.c-result {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #ffffff;
  background: linear-gradient(180deg, #173a64 0%, #0d1f38 100%);
}
.c-result__intro, .c-result__bg, .c-result__overlay, .c-result__main {
  position: absolute;
  inset: 0;
}
.c-result__intro, .c-result__overlay, .c-result__main {
  will-change: opacity;
  backface-visibility: hidden;
}
.c-result__intro {
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #173a64 0%, #0d1f38 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease-out, visibility 0s linear 0.6s;
}
.c-result__header {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.c-result__bg {
  z-index: 0;
}
.c-result__bg img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translateZ(0);
}
.c-result__copy {
  position: absolute;
  right: calc(var(--sw) * 0.0333333333);
  bottom: calc(var(--sw) * 0.0266666667);
  z-index: 1;
  color: #ffffff;
  font-size: calc(var(--sw) * 0.0266666667);
  font-weight: 500;
  text-shadow: 0 0 calc(var(--sw) * 0.0133333333) rgba(0, 0, 0, 0.7);
  display: none;
}
.c-result[data-grade=SCORE5] .c-result__copy {
  display: block;
}
.c-result__overlay {
  z-index: 1;
  background: rgba(0, 0, 0, 0.59);
  opacity: 0;
  transition: opacity 0.7s ease-out;
}
.c-result__main {
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease-out, visibility 0s linear 0.6s;
}
.c-result__main::-webkit-scrollbar {
  display: none;
}
.c-result[data-phase=intro] .c-result__main, .c-result[data-phase=type] .c-result__main {
  overflow: hidden;
  touch-action: none;
}
.c-result[data-phase=main] .c-result__main {
  overflow-y: auto;
  touch-action: pan-y;
}
.c-result[data-phase=intro] .c-result__intro, .c-result[data-phase=type] .c-result__main, .c-result[data-phase=main] .c-result__main {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.6s ease-out;
}
.c-result[data-phase=main] .c-result__overlay {
  opacity: 1;
}
.c-result[data-phase=intro] .c-result__spacer, .c-result[data-phase=type] .c-result__spacer {
  height: calc(50% - calc(var(--sw) * 0.2133333333));
}
.c-result[data-phase=main] .c-result__spacer {
  height: calc(var(--sw) * 0.08);
}
.c-result__spacer {
  display: block;
  flex-shrink: 0;
  width: 100%;
  transition: height 0.7s ease-in-out;
}
.c-result__hero {
  width: 100%;
  flex-shrink: 0;
}
.c-result__type {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}
.c-result__inner {
  padding: calc(var(--sw) * 0.0933333333) calc(var(--sw) * 0.04) calc(var(--sw) * 0.08);
  opacity: 0;
  transform: translateY(calc(var(--sw) * 0.04));
  pointer-events: none;
  transition: opacity 0.7s ease-out 0.2s, transform 0.7s ease-out 0.2s;
}
.c-result[data-phase=main] .c-result__inner {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.c-result__greet {
  font-size: calc(var(--sw) * 0.08);
  font-weight: 800;
  line-height: 1.3333333333;
  text-align: center;
  color: #ffffff;
}
.c-result__comment {
  margin-top: calc(var(--sw) * 0.0453333333);
  font-weight: 800;
  font-size: max(13px, var(--sw) * 0.0453333333);
  line-height: 1.75;
  text-align: center;
  color: rgba(255, 255, 255, 0.94);
}
.c-result__badges {
  margin-top: calc(var(--sw) * 0.1066666667);
  text-align: center;
}
.c-result__badges-head {
  font-size: max(13px, var(--sw) * 0.0453333333);
  font-weight: 700;
}
.c-result__badge-grid {
  margin-top: calc(var(--sw) * 0.0266666667);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--sw) * 0.0106666667);
}
.c-result .c-badge {
  width: calc(var(--sw) * 0.2666666667);
}
.c-result .c-badge .c-badge__img {
  width: 100%;
}
.c-result .c-cp {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease-out 0.25s;
}
.c-result[data-phase=main] .c-cp {
  opacity: 1;
  pointer-events: auto;
}

.c-review,
.c-terms {
  margin-top: calc(var(--sw) * 0.12);
  text-align: left;
}
.c-review__heading,
.c-terms__heading {
  margin: 0;
}
.c-review__heading img,
.c-terms__heading img {
  width: 100%;
}
.c-review__toggle,
.c-terms__toggle {
  position: relative;
  justify-content: center;
  width: 100%;
  height: calc(var(--sw) * 0.108);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../img/design/ui/btn_accordion.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0px 0px calc(var(--sw) * 0.032) rgba(60, 60, 206, 0.7));
  color: #ffffff;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  font-size: max(13px, var(--sw) * 0.0453333333);
  line-height: 1.75;
}
.c-review__title-jp,
.c-terms__title-jp {
  font-size: max(13px, var(--sw) * 0.0453333333);
  font-weight: 800;
}
.c-review__icon,
.c-terms__icon {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
}
.c-review__icon::before, .c-review__icon::after,
.c-terms__icon::before,
.c-terms__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #ffffff;
  transition: 0.3s all ease;
}
.c-review__icon::before,
.c-terms__icon::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.c-review__icon::after,
.c-terms__icon::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}
.c-review__toggle[aria-expanded=true] .c-review__icon::after,
.c-terms__toggle[aria-expanded=true] .c-review__icon::after {
  opacity: 0;
}
.c-review__panel,
.c-terms__panel {
  display: grid;
  list-style: none;
  padding-left: 0;
  padding-bottom: calc(var(--sw) * 0.0533333333);
  background: rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(var(--sw) * 0.0086666667)), calc(100% - calc(var(--sw) * 0.0086666667)) 100%, calc(var(--sw) * 0.0086666667) 100%, 0 calc(100% - calc(var(--sw) * 0.0086666667)));
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}
.c-review__panel.is-open,
.c-terms__panel.is-open {
  max-height: 20000px;
  opacity: 1;
}
.c-review__item,
.c-terms__item {
  padding-top: calc(var(--sw) * 0.1066666667);
}
.c-review__q,
.c-terms__q {
  font-size: max(13px, var(--sw) * 0.0346666667);
  font-weight: 700;
  line-height: 1.6;
}
.c-review__no,
.c-terms__no {
  display: inline-block;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  color: #c0392b;
}
.c-review__txt,
.c-terms__txt {
  text-align: center;
  color: #ffffff;
  font-size: max(13px, var(--sw) * 0.0453333333);
  line-height: 1.75;
  padding-top: calc(var(--sw) * 0.0666666667);
  font-weight: 800;
}
.c-review__a,
.c-terms__a {
  font-size: max(13px, var(--sw) * 0.032);
  color: #1f8a5b;
  font-weight: 700;
}
.c-review__a-label,
.c-terms__a-label {
  display: block;
  margin-top: calc(var(--sw) * 0.0633333333);
  font-size: calc(var(--sw) * 0.06);
  line-height: 1.3333333333;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}
.c-review__answer,
.c-terms__answer {
  display: flex;
  align-items: center;
  gap: calc(var(--sw) * 0.0453333333);
  padding: calc(var(--sw) * 0.0133333333) calc(var(--sw) * 0.0373333333);
  text-align: left;
  color: #ffffff;
  font-size: max(13px, var(--sw) * 0.0453333333);
  line-height: 1.3970588235;
  font-weight: 800;
  margin-top: calc(var(--sw) * 0.0373333333);
  width: 100%;
  height: calc(var(--sw) * 0.24);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.c-review__answer .c-choice__key,
.c-terms__answer .c-choice__key {
  color: #ffffff;
}
.c-review__answer--q1,
.c-terms__answer--q1 {
  background-image: url("../img/design/questions/bg_q1_clear.webp");
}
.c-review__answer--q2,
.c-terms__answer--q2 {
  background-image: url("../img/design/questions/bg_q2_clear.webp");
}
.c-review__answer--q3,
.c-terms__answer--q3 {
  background-image: url("../img/design/questions/bg_q3_clear.webp");
}
.c-review__answer--q4,
.c-terms__answer--q4 {
  background-image: url("../img/design/questions/bg_q4_clear.webp");
}
.c-review__answer--q5,
.c-terms__answer--q5 {
  background-image: url("../img/design/questions/bg_q5_clear.webp");
}
.c-review__e,
.c-terms__e {
  margin-top: 8px;
  font-size: max(13px, var(--sw) * 0.0306666667);
  line-height: 1.8;
  color: #555;
}

.c-cp {
  position: relative;
  color: #ffffff;
  text-align: center;
}
.c-cp__bg {
  position: absolute;
  inset: 0;
  background: url("../img/design/campaign/bg_entry.webp") top center/cover no-repeat;
  z-index: 1;
  opacity: var(--bg-opacity, 0);
  transform: scale(var(--bg-scale, 1));
  will-change: opacity, transform;
  pointer-events: none;
}
.c-cp__body {
  position: relative;
  z-index: 1;
  padding: calc(var(--sw) * 0.0133333333) calc(var(--sw) * 0.0453333333) calc(var(--sw) * 0.1693333333);
}
.c-cp__ttl {
  display: block;
  width: 100%;
  margin: 0 auto;
  height: auto;
  filter: drop-shadow(0px 0px calc(var(--sw) * 0.032) rgba(60, 60, 206, 0.7));
}
.c-cp__term-label {
  width: calc(var(--sw) * 0.1333333333);
  height: calc(var(--sw) * 0.0826666667);
  margin: calc(var(--sw) * 0.08) auto 0;
  font-size: max(13px, var(--sw) * 0.0373333333);
  line-height: 1.75;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../img/design/campaign/deco_term.webp");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  text-shadow: 0px 0px calc(var(--sw) * 0.02) rgba(60, 60, 206, 0.7);
}
.c-cp__term {
  margin-top: calc(var(--sw) * 0.0066666667);
  font-size: max(13px, var(--sw) * 0.0426666667);
  line-height: 1.75;
  font-weight: 700;
  text-shadow: 0px 0px calc(var(--sw) * 0.02) rgba(60, 60, 206, 0.7);
}
.c-cp__steps {
  margin-top: 24px;
  display: grid;
  gap: 14px;
  list-style: none;
  padding-left: 0;
}
.c-cp__step {
  display: flex;
  align-items: center;
  height: calc(var(--sw) * 0.2);
  padding-left: calc(var(--sw) * 0.2266666667);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border-radius: 10px;
  text-align: left;
  font-size: max(13px, var(--sw) * 0.04);
  line-height: 1.75;
}
.c-cp__step--01 {
  background-image: url("../img/design/campaign/bg_order01.webp");
}
.c-cp__step--02 {
  background-image: url("../img/design/campaign/bg_order02.webp");
}
.c-cp__step .c-txt {
  font-size: max(13px, var(--sw) * 0.04);
  line-height: 1.75;
  font-weight: 800;
  filter: drop-shadow(0 0 calc(var(--sw) * 0.02) rgba(0, 0, 153, 0.7));
}
.c-cp__step .c-link {
  text-decoration: underline;
}
.c-cp__note {
  margin-top: calc(var(--sw) * 0.0533333333);
  font-size: max(13px, var(--sw) * 0.0266666667);
  font-weight: 400;
  line-height: 1.75;
  text-align: left;
  color: #ffffff;
}
.c-cp__note__list {
  text-indent: -1em;
  padding-left: 1em;
}
.c-cp__note__link {
  text-decoration: underline;
}
.c-cp__prizes {
  margin-top: calc(var(--sw) * 0.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 0;
}
.c-cp__prizes .c-imgbtn {
  width: 100%;
}
.c-cp__prize {
  padding: calc(var(--sw) * 0.044) 0;
  background: #172a88;
  border-radius: calc(var(--sw) * 0.02);
}
.c-cp__prize-rank {
  font-size: calc(var(--sw) * 0.0586666667);
  font-weight: 800;
}
.c-cp__prize-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: calc(var(--sw) * 0.0066666667);
}
.c-cp__prize-name {
  margin-top: calc(var(--sw) * 0.0066666667);
  font-size: max(13px, var(--sw) * 0.04);
  font-weight: bold;
  line-height: 1.875;
}
.c-cp__prize-name--small {
  font-size: calc(var(--sw) * 0.028);
  font-weight: bold;
  line-height: 1.619047619;
  margin-top: calc(var(--sw) * 0.0333333333);
}
.c-cp__prize-name--b {
  margin-top: calc(var(--sw) * 0.0466666667);
}
.c-cp__prize-sub {
  font-size: max(13px, var(--sw) * 0.032);
  line-height: 1.875;
  color: #ffffff;
  font-weight: 400;
}
.c-cp__prize-sub--b {
  margin-top: calc(var(--sw) * 0.084);
}
.c-cp .c-cp__entry {
  width: calc(var(--sw) * 0.36);
  margin-top: calc(var(--sw) * 0.0266666667);
}
.c-cp__disclaimer {
  margin-top: calc(var(--sw) * 0.0533333333);
  font-size: max(13px, var(--sw) * 0.0266666667);
  line-height: 1.75;
  text-align: left;
  color: #ffffff;
}
.c-cp__retry {
  position: relative;
  margin-top: calc(var(--sw) * 0.0666666667);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--sw) * 0.1066666667);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 800;
  font-size: max(13px, var(--sw) * 0.0453333333);
  color: #000;
  background: #ffffff;
  border: 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
  list-style: none;
  background: #ffffff;
  clip-path: polygon(calc(var(--sw) * 0.0086666667) 0, calc(100% - calc(var(--sw) * 0.0086666667)) 0, 100% calc(var(--sw) * 0.0086666667), 100% calc(100% - calc(var(--sw) * 0.0086666667)), calc(100% - calc(var(--sw) * 0.0086666667)) 100%, calc(var(--sw) * 0.0086666667) 100%, 0 calc(100% - calc(var(--sw) * 0.0086666667)), 0 calc(var(--sw) * 0.0086666667));
}
.c-cp__retry::after {
  content: "";
  background-image: url("../img/design/ui/icon_retry.webp");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  width: calc(var(--sw) * 0.0453333333);
  height: calc(var(--sw) * 0.0466666667);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(var(--sw) * 0.0233333333);
}
.c-cp__retry:hover {
  opacity: 0.9;
}
.c-cp__retry-icon {
  width: 22px;
  height: auto;
}
.c-cp__portal {
  margin-top: calc(var(--sw) * 0.096);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #ffffff;
}
.c-cp__portal img {
  width: calc(var(--sw) * 0.1333333333);
  height: auto;
}
.c-cp__portal .c-txt {
  font-size: max(13px, var(--sw) * 0.0266666667);
  display: block;
  font-weight: 800;
  position: relative;
}
.c-cp__portal .c-txt::before {
  content: "";
  background-image: url("../img/design/campaign/icon_arrow.webp");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  width: calc(var(--sw) * 0.0106666667);
  height: calc(var(--sw) * 0.0166666667);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(var(--sw) * -0.018);
}

.c-terms__heading {
  margin: 0;
}
.c-terms__toggle {
  position: relative;
  justify-content: center;
  width: 100%;
  height: calc(var(--sw) * 0.1066666667);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../img/design/ui/btn_accordion.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 calc(var(--sw) * 0.02) rgba(0, 0, 153, 0.7));
  color: #ffffff;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  font-size: max(13px, var(--sw) * 0.0453333333);
  line-height: 1.75;
}
.c-terms__title {
  font-size: max(13px, var(--sw) * 0.0453333333);
}
.c-terms__icon {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
}
.c-terms__icon::before, .c-terms__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #ffffff;
}
.c-terms__icon::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.c-terms__icon::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}
.c-terms__toggle[aria-expanded=true] .c-terms__icon::after {
  opacity: 0;
}
.c-terms__list {
  list-style: none;
  padding: calc(var(--sw) * 0.0633333333) calc(var(--sw) * 0.04) calc(var(--sw) * 0.0906666667);
  background: rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(var(--sw) * 0.0086666667)), calc(100% - calc(var(--sw) * 0.0086666667)) 100%, calc(var(--sw) * 0.0086666667) 100%, 0 calc(100% - calc(var(--sw) * 0.0086666667)));
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}
.c-terms__list.is-open {
  max-height: 20000px;
  opacity: 1;
  padding: calc(var(--sw) * 0.0633333333) calc(var(--sw) * 0.04) calc(var(--sw) * 0.0906666667);
}
.c-terms__text {
  font-size: max(13px, var(--sw) * 0.0293333333);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.92);
}
.c-terms .indent {
  display: inline-block;
  text-indent: -1em;
  padding-left: 1em;
}