@charset "utf-8";

.l-footer {
  background: white;
}
.l-footer__pagetop {
  display: none;
}
.l-footer__top {
  padding-top: 24px !important;
}
.p-typetest a:hover {
  opacity: unset;
}

/* :::::: Button :::::: */
.c-button {
  --bgColor: transparent;
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  place-content: center;
  column-gap: 1em;
  z-index: 0;
  position: relative;
  width: min(var(--cw) * 256 / var(--aspect), 256px);
  height: min(var(--cw) * 64 / var(--aspect), 64px);
  padding: 0 1.5em;
  border-radius: 64px;
  font-weight: 500;
  --fontBasis: 16;
  font-size: var(--fontSize);
  letter-spacing: .05em;
}
.c-button::before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--deepblue);
  border-radius: inherit;
  background: var(--bgColor);
}
.c-button .arr,
.c-button .ico {
  overflow: visible;
  width: 1em;
  height: auto;
  fill: none;
  stroke: currentcolor;
}
.c-button .arr line {
  stroke-dasharray: 8 8;
}
.c-button .arr polyline {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 10 10;
}
.c-button .ico {
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Motion */
@media (hover) {
  .c-button {
    cursor: pointer;
  }
  .c-button:not(:hover)::before {
    animation: buttonLeave .2s both;
  }
  .c-button:hover::before {
    inset: -2px;
    animation: buttonEnter .4s both;
  }
}
.c-button .arr line {
  animation: appealLine 3s -.6s infinite;
}
.c-button .arr polyline {
  animation: appealArrow 3s -.3s infinite;
}
@keyframes appealLine {
  from { stroke-dashoffset: 24; }
  20%, 80% { stroke-dashoffset: 16; }
  to { stroke-dashoffset: 8; }
}
@keyframes appealArrow {
  from { stroke-dashoffset: 30; }
  30%, 80% { stroke-dashoffset: 20; }
  to { stroke-dashoffset: 10; }
}
@keyframes buttonEnter {
  from { inset: 0; }
  30% { inset: -4px; }
  to { inset: -2px; }
}
@keyframes buttonLeave {
  from { inset: -2px; }
  40% { inset: 1px; }
  to { inset: 0; }
}

/* :::::: Lead :::::: */
.c-lead {
  --fontBasis: 14;
  font-size: var(--fontSize);
  line-height: 1.8;
  letter-spacing: .05em;
}

/* :::::: Paragraph :::::: */
.c-paragraph {
  font-weight: 500;
  --fontBasis: 16;
  font-size: var(--fontSize);
  line-break: strict;
}
.c-paragraph strong {
  font-weight: 700;
  background: linear-gradient(to top, transparent 5%, var(--secondary) 5%, var(--secondary) 90%, transparent 90%) center center / 100% 100% no-repeat;
}

/* :::::: Character card :::::: */
.type_visual {
  display: grid;
}
.type_character {
  display: grid;
  place-items: center;
  z-index: 0;
}
.type_character > * {
  z-index: 1;
  grid-area: 1 / 1;
}
.type_character .name {
  display: grid;
  place-content: center;
  position: relative;
  margin-inline: -.5em;
  font-weight: 900;
  font-size: var(--fontSize);
  line-height: 1.1;
  font-family: var(--fontLabel);
  white-space: nowrap;
}
.type_character .name span {
  position: relative;
  color: transparent;
  -webkit-text-stroke: 3px white;
  text-stroke: 6px white;
}
.type_character .name span::before {
  content: attr(data-text);
  position: absolute;
  color: var(--primary);
  -webkit-text-stroke: 0;
  text-stroke: 0;
}
@media print, (min-width: 769px) {
  .type_visual > * {
    grid-column: 1;
  }
  .type_visual .type_character {
    grid-row: 1 / 4;
  }
  .type_visual .type_subject {
    grid-row: 3;
  }
  .type_visual .type_status {
    grid-row: 4;
  }
  .type_visual .type_character .illust {
    max-width: calc((100vh - var(--frameSpace) * 2) * 9 / 12);
  }
}

/* :::::: Profile data :::::: */
.type_subject,
.type_status {
  transform-origin: left bottom;
  transform: skewY(-5deg);
}
.type_subject {
  display: grid;
  row-gap: .5em;
  font-size: var(--fontSize);
  line-height: 1.2;
  white-space: nowrap;
}
.type_subject > * {
  padding: .4em .8em;
  border: 2px solid currentcolor;
  background: white;
  box-shadow: 4px 4px 0 currentcolor;
}
.type_subject .main {
  padding: .2em .5em .25em;
  font-size: 181.2%;
}
.type_status {
  display: flex;
  align-items: baseline;
  column-gap: .5em;
  margin-top: 1em;
  font-size: var(--fontSize);
}
.type_status .label {
  position: relative;
  top: -.2em;
}
.type_status .star {
  display: inherit;
  align-items: inherit;
  column-gap: .3em;
  position: relative;
  top: .1em;
}
.type_status .star svg {
  overflow: visible;
  width: 1.8em;
  height: auto;
  fill: var(--secondary);
  stroke: #084f83;
  stroke-width: 1.6;
}
.type_status::after {
  content: "";
  align-self: center;
  position: relative;
  height: 1.5em;
  margin-inline: .3em;
  border-left: 1.5px solid currentcolor;
}
.type_status .label:not(:first-of-type),
.type_status .star:not(:first-of-type) {
  order: 1;
}

/* :::::: Tarot :::::: */
.c-tarot {
  --iconWidth: min(var(--cw) * 132 / var(--aspect), 132px);
  display: grid;
}
.c-tarot .tarot_icon {
  z-index: 1;
  position: relative;
  width: var(--iconWidth);
  border: 2px solid currentcolor;
  border-radius: var(--iconWidth);
  background: #3b8bc6;
}
.c-tarot .tarot_icon > * {
  width: 100%;
  padding: 4%;
  border-radius: inherit;
}
.c-tarot .tarot_text {
  padding: 1em .5em;
  border: 2px solid currentcolor;
  color: #23689b;
  --fontBasis: 16;
  font-size: var(--fontSize);
  background: #dceffe;
}
.c-tarot .tarot_text dt {
  line-height: 1.36875;
}
.c-tarot .tarot_text dd {
  margin-top: .5em;
  font-size: 68.75%;
  line-height: 1.5;
}
@media screen and (max-width: 768.98px) {
  .c-tarot {
    grid-template-rows: var(--iconWidth) 1fr;
    place-content: start center;
    text-align: center;
  }
  .c-tarot .tarot_text {
    margin-top: calc(var(--iconWidth) * -.5);
    padding-top: calc(var(--iconWidth) * .5 + 1em);
    border-top: 0;
    border-radius: 0 0 .5em .5em;
  }
}
@media print, (min-width: 769px) {
  .c-tarot {
    grid-template-columns: var(--iconWidth) 1fr;
  }
  .c-tarot .tarot_text {
    display: grid;
    align-content: center;
    margin-left: calc(var(--iconWidth) * -.5);
    padding-right: 1em;
    padding-left: calc(var(--iconWidth) * .5 + 1.25em);
    border-left: 0;
    border-radius: 0 .5em .5em 0;
  }
}

/* :::::: Frame :::::: */
.c-frame {
  pointer-events: none;
  z-index: 4;
  position: absolute;
  inset: 0;
  height: max(100svh, 100%);
  /* MEMO: 隅々まで隠す用 */
  border: var(--frameSpace) solid var(--spaceColor);
}
.frame_outer {
  /* MEMO: 角丸部分隠す用 */
  position: absolute;
  inset: calc(var(--frameSpace) * -1);
  border: calc(var(--frameSpace) + 1px) solid var(--spaceColor);
  border-radius: calc(var(--frameSpace) + var(--frameRadius));
}
.frame_outer::before {
  content: "";
  position: absolute;
  inset: auto calc(var(--frameSpace) * -1) 101%;
  height: 100px;
  background: white;
}
.c-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--deepblue);
  border-radius: var(--frameRadius);
}
/* Layout */
.frame_inner {
  display: grid;
  z-index: 1;
  position: absolute;
  inset: 0;
}
.c-frame :is(.title,.number,.name) {
  z-index: 0;
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  font-weight: 800;
  font-size: var(--fontSize);
  line-height: 1.1;
}
.c-frame .title::before,
.c-frame :is(.number,.name) {
  padding: 1em 1.5em;
  padding-block-start: .5em;
  border: 2px solid var(--deepblue);
  background: var(--maskColor);
}
/* 登山家タイプ診断 */
.c-frame .title {
  pointer-events: auto;
  place-self: start;
  display: grid;
  place-items: center;
  padding: 0;
  --fontBasis: 12;
}
.c-frame .title a,
.c-frame .title::before {
  grid-area: 1 / 1;
}
.c-frame .title a {
  display: block;
  padding: .5em 2em 1em 1.5em;
  color: inherit;
}
.c-frame .title::before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  border-top-width: 0;
  border-left-width: 0;
  border-bottom-right-radius: 20px;
}
/* Motion */
@media (hover) {
  .c-frame .title:not(:hover)::before {
    animation: titleLeave .2s both;
  }
  .c-frame .title:hover::before {
    inset: 0 -4px -2px 0;
    animation: titleEnter .4s both;
  }
}
@keyframes titleEnter {
  from { inset: 0; }
  30% { inset: 0 -6px -6px 0; }
  to { inset: 0 -4px -2px 0; }
}
@keyframes titleLeave {
  from { inset: 0 -4px -2px 0; }
  40% { inset: 0 2px 1px 0; }
  to { inset: 0; }
}
/* Type Number */
.c-frame .number {
  place-self: start end;
  padding-inline-end: 1em;
  display: grid;
  justify-items: center;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-left-radius: 30px;
  font-family: var(--fontLabel);
  --fontBasis: 15.82;
}
.c-frame .number b {
  font-weight: 700;
  font-size: 300%;
  letter-spacing: -.1em;
}
.c-frame .number span {
  position: relative;
  left: .1em;
  letter-spacing: .1em;
}
/* Type Name */
.c-frame .name {
  place-self: end;
  padding-inline: 2em;
  --fontBasis: 10.88;
  border-right-width: 0;
  border-bottom-width: 0;
  border-top-left-radius: 20px;
  font-family: var(--fontLabel);
  letter-spacing: .1em;
  writing-mode: vertical-rl;
}
.c-frame .name span {
  display: block;
  rotate: 180deg;
}
@media print, (min-width: 769px) {
  .c-frame {
    inset: 0;
  }
  .c-frame .title {
    --fontBasis: 12;
  }
  .c-frame .number {
    --fontBasis: 15.82;
  }
  .c-frame .name {
    --fontBasis: 10.88;
  }
}
/* Motion */
.frame_inner {
  overflow: hidden;
  --r: calc(var(--frameRadius) - 1px);
  clip-path: inset(-.25px round 0 var(--r) var(--r) 0);
  margin: -.28px;
}
.c-frame :is(.number,.name) {
  overflow: hidden;
  right: -1px;
}
.c-frame :is(.number,.name),
.c-frame :is(.number,.name) > * {
  transition: scale .4s var(--easeBack), translate .6s var(--easeOut), border-radius .6s var(--easeBack);
  backface-visibility: hidden;
}
.c-frame .number {
  transform-origin: right top;
}
.c-frame .number > * {
  transform-origin: left bottom;
}
.c-frame .name {
  transform-origin: right bottom;
}
.c-frame.is-simple :is(.number,.name),
.c-frame.is-simple :is(.number,.name) > * {
  transition-duration: .6s;
  transition-delay: .2s, 0s, 0s;
  transition-timing-function: var(--easeOut);
}
.c-frame.is-simple .number {
  scale: .8;
  translate: 100px -80px;
  border-bottom-left-radius: 100px;
}
.c-frame.is-simple .name {
  scale: .8;
  translate: 40px 40px;
  border-top-left-radius: 60px;
}
.c-frame.is-simple .number > * {
  scale: 1.25;
  translate: -100px 80px;
}
.c-frame.is-simple .name > * {
  scale: 1.25;
  translate: -40px -40px;
}
@media print, (min-width: 769px) {
  .frame_inner {
    --r: calc(var(--frameRadius) - .75px);
  }
}

/**
 * 場面
 * -------------------------------------------------- */
.l-wrap {
  --frameSpace: min(var(--cw) * 16 / var(--aspect), 16px);
  --frameRadius: min(var(--cw) * 40 / var(--aspect), 40px);
  --spaceColor: transparent;
  --maskColor: transparent;
  --spaceBasis: min(var(--cw) * 40 / var(--aspect), 40px);
  --sectionSpace: min(var(--cw) * 16 / var(--aspect), 16px);
  display: grid;
  min-height: 100svh;
}
@media print, (min-width: 769px) {
  .l-wrap {
    --frameSpace: min(var(--cw) * 32 / var(--aspect), 32px);
    --frameRadius: min(var(--cw) * 32 / var(--aspect), 32px);
    --sectionSpace: min(var(--cw) * 32 / var(--aspect), 32px);
  }
}
.l-cover:not(.is-active),
.l-contents:not(.is-active),
.l-result:not(.is-active) {
  display: none;
}
.l-cover,
.l-contents,
.l-result {
  grid-area: 1 / 1;
  z-index: 0;
  position: relative;
  max-width: var(--cw);
  min-height: inherit;
}

/* :::::: オープニングモーション (現れる表紙) :::::: */
:where(.l-cover.is-opening).is-motion {
  --delay: 1s;
}
:where(.l-cover.is-opening):not(.is-motion) .cover_title > * {
  opacity: 0;
}
:where(.l-cover.is-opening):not(.is-motion) .cover_title .balloon,
:where(.l-cover.is-opening):not(.is-motion) .cover_title .lead {
  scale: .6;
}
:where(.l-cover.is-opening):not(.is-motion) .cover_title .tail {
  transform: scaleY(0) skewX(40deg);
}
:where(.l-cover.is-opening).is-motion .cover_title .balloon,
:where(.l-cover.is-opening).is-motion .cover_title .lead {
  transition: opacity .4s var(--easeOut), scale .4s var(--easeBack);
}
:where(.l-cover.is-opening).is-motion .cover_title .tail {
  transform-origin: right top;
  transition: transform .2s var(--easeBack);
}
:where(.l-cover.is-opening).is-motion .cover_title .t1 {
  transform-origin: right bottom;
  animation: openTitleT1 1s both;
}
:where(.l-cover.is-opening).is-motion .cover_title .t2 {
  transform-origin: center bottom;
  animation: openTitleT2 1s both;
}
:where(.l-cover.is-opening).is-motion .cover_title .t3 {
  transform-origin: left bottom;
  animation: openTitleT3 1s both;
}
:where(.l-cover.is-opening).is-motion .cover_title .t4,
:where(.l-cover.is-opening).is-motion .cover_title .t5,
:where(.l-cover.is-opening).is-motion .cover_title .t6,
:where(.l-cover.is-opening).is-motion .cover_title .t7,
:where(.l-cover.is-opening).is-motion .cover_title .t8 {
  transform-origin: center bottom;
  animation: openTitleUnder .6s both;
}
:where(.l-cover.is-opening).is-motion .cover_title .t1,
:where(.l-cover.is-opening).is-motion .cover_title .t2,
:where(.l-cover.is-opening).is-motion .cover_title .t3      { animation-delay: .4s; }
:where(.l-cover.is-opening).is-motion .cover_title .t4      { animation-delay: 1s; }
:where(.l-cover.is-opening).is-motion .cover_title .t5      { animation-delay: 1.1s; }
:where(.l-cover.is-opening).is-motion .cover_title .t6      { animation-delay: 1.2s; }
:where(.l-cover.is-opening).is-motion .cover_title .t7      { animation-delay: 1.3s; }
:where(.l-cover.is-opening).is-motion .cover_title .t8      { animation-delay: 1.4s; }
:where(.l-cover.is-opening).is-motion .cover_title .balloon { transition-delay: 1.5s; }
:where(.l-cover.is-opening).is-motion .cover_title .lead    { transition-delay: 1.6s; }
:where(.l-cover.is-opening).is-motion .cover_title .tail    { transition-delay: 1.8s; }
@keyframes openTitleBalloon {
  from { transform: scale(.9); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: scale(1.2,1.1); }
  50% { transform: scale(.9,.92); }
  75% { transform: scale(1.02,1.04); }
  to { transform: none; opacity: 1; }
}
@keyframes openTitleT1 {
  from { transform: translateX(-40px) scale(1.1,.9); opacity: 0; }
  20% { transform: translateX(28px) scale(.6,1.2); opacity: 1; }
  40% { transform: scale(1.1,.9); }
  60% { transform: translateX(8px) scale(.92,1.08); }
  80% { transform: scale(1.02,.98); }
  to { transform: none; opacity: 1; }
}
@keyframes openTitleT2 {
  from { transform: scale(1); opacity: 0; }
  20% { transform: scale(.4,1.5); opacity: 1; }
  36% { transform: scale(1.1,.9); }
  66% { transform: scale(.92,1.08); }
  88% { transform: scale(1.02,.98); }
  to { transform: none; opacity: 1; }
}
@keyframes openTitleT3 {
  from { transform: translateX(40px) scale(1.1,.9); opacity: 0; }
  20% { transform: translateX(-28px) scale(.6,1.2); opacity: 1; }
  40% { transform: scale(1.1,.9); }
  60% { transform: translateX(-8px) scale(.92,1.08); }
  80% { transform: scale(1.02,.98); }
  to { transform: none; opacity: 1; }
}
@keyframes openTitleUnder {
  from { transform: translate(-8px,-20px) scale(.8,1.2); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: scale(1.2,.8) skewX(12deg); }
  50% { transform: scale(.92,1.08) skewX(-6deg); }
  75% { transform: scale(1.02,.98) skewX(2deg); }
  to { transform: none; opacity: 1; }
}
/* その他 */
:where(.l-cover.is-opening):not(.is-motion) .cover_logo {
  translate: 0 -108%;
}
:where(.l-cover.is-opening):not(.is-motion) .cover_mountains {
  translate: 0 100%;
}
:where(.l-cover.is-opening):not(.is-motion) .c-frame::after {
  inset: calc(var(--frameSpace) * -1 - 2px);
  border-radius: 0;
}
:where(.l-cover.is-opening):not(.is-motion) .cover_character .chara {
  opacity: 0;
  scale: .8;
}
:where(.l-cover.is-opening) .c-lead {
  clip-path: inset(0);
}
:where(.l-cover.is-opening):not(.is-motion) .c-lead {
  clip-path: inset(0 0 100%);
}
:where(.l-cover.is-opening):not(.is-motion) .c-button {
  pointer-events: none;
  opacity: 0;
}
:where(.l-cover.is-opening).is-motion .cover_logo {
  transition: translate 1s var(--easeOut);
}
:where(.l-cover.is-opening).is-motion .cover_mountains {
  transition: translate 1s var(--easeOut);
}
:where(.l-cover.is-opening).is-motion .cover_title {
  transition: translate 1s var(--easeOut);
}
:where(.l-cover.is-opening).is-motion .c-frame::after {
  transition: inset 1s var(--easeOut), border-radius 1s var(--easeOut);
}
:where(.l-cover.is-opening).is-motion .cover_character .chara {
  transition: opacity .6s var(--easeOut), scale .6s var(--easeBack);
}
:where(.l-cover.is-opening).is-motion .c-lead {
  transition: clip-path .8s var(--easeOut);
}
:where(.l-cover.is-opening).is-motion .c-button {
  animation: openingButton .8s both;
}
:where(.l-cover.is-opening).is-motion .cover_mountains     { transition-delay: calc(var(--delay) + .8s); }
:where(.l-cover.is-opening).is-motion .cover_logo          { transition-delay: calc(var(--delay) + 1s); }
:where(.l-cover.is-opening).is-motion .c-frame::after      { transition-delay: calc(var(--delay) + 1.2s); }
:where(.l-cover.is-opening).is-motion .cover_character .c1 { transition-delay: calc(var(--delay) + 1.2s); }
:where(.l-cover.is-opening).is-motion .cover_character .c3 { transition-delay: calc(var(--delay) + 1.3s); }
:where(.l-cover.is-opening).is-motion .cover_character .c5 { transition-delay: calc(var(--delay) + 1.4s); }
:where(.l-cover.is-opening).is-motion .cover_character .c4 { transition-delay: calc(var(--delay) + 1.5s); }
:where(.l-cover.is-opening).is-motion .cover_character .c2 { transition-delay: calc(var(--delay) + 1.6s); }
:where(.l-cover.is-opening).is-motion .c-lead              { transition-delay: calc(var(--delay) + 1.8s); }
:where(.l-cover.is-opening).is-motion .c-button            { animation-delay: calc(var(--delay) + 2s); }
@keyframes openingButton {
  from { transform: scale(.6); opacity: 0; }
  20% { transform: scale(1.12); opacity: 1; }
  40% { transform: scale(.92); }
  70% { transform: scale(1.02); }
  to { transform: none; opacity: 1; }
}

/**
 * 表紙
 * -------------------------------------------------- */
.l-cover {
  display: grid;
  justify-items: center;
  overflow: hidden;
  padding: calc(var(--frameSpace) + 2px + var(--sectionSpace));
  background: #fdff9c;
}
.cover_logo {
  z-index: 5;
  position: absolute;
  top: 0;
  width: var(--ribbonWidth);
  height: min(12.5svh, var(--ribbonWidth) * 1.375);
}
.cover_logo a {
  display: grid;
  place-items: center;
  height: inherit;
}
.cover_logo a > * {
  grid-area: 1 / 1;
  height: auto;
}
.cover_logo .ribbon {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
}
/* Motion */
@media (hover) {
  :where(.cover_logo a:not(:hover)) .ribbon {
    animation: ribbonLeave .2s both;
  }
  :where(.cover_logo a:hover) .ribbon {
    inset: auto -2px -2px;
    width: calc(100% + 4px);
    animation: ribbonEnter .4s both;
  }
}
@keyframes ribbonEnter {
  from { inset: auto 0 0; width: 100%; }
  30% { inset: auto -4px -4px; width: calc(100% + 8px); }
  to { inset: auto -2px -2px; width: calc(100% + 4px); }
}
@keyframes ribbonLeave {
  from { inset: auto -2px -2px; width: calc(100% + 4px); }
  40% { inset: auto 1px 1px; width: calc(100% - 2px); }
  to { inset: auto 0 0; width: 100%; }
}
.cover_logo .persol {
  position: relative;
  width: 50%;
  padding-bottom: 12.532%;
}
.cover_inner,
.cover_hgroup {
  display: grid;
  align-content: center;
  justify-items: center;
}
.cover_inner {
  z-index: 1;
  text-align: center;
}
@media screen and (max-width: 768.98px) {
  .l-cover {
    --ribbonWidth: min(var(--cw) * 64 / var(--aspect), 64px);
  }
  .cover_inner {
    padding-top: min(var(--cw) * 32 / var(--aspect), 32px);
  }
}
@media screen and (max-width: 768.98px) and (orientation: portrait) {
  /* MEMO: 縦持ちの時は3:4以下にしない */
  .l-cover {
    min-height: 133.3333vw;
  }
}
@media print, (min-width: 769px) {
  .l-cover {
    --ribbonWidth: min(var(--cw) * 112 / var(--aspect), 112px);
  }
  .cover_logo {
    left: 64px;
    height: calc(var(--ribbonWidth) * 1.143);
  }
  .cover_logo .ribbon {
    stroke-width: 2;
  }
  .cover_logo .persol {
    width: 45%;
  }
  .cover_inner {
    align-content: center;
  }
}

/* タイトル */
.cover_title {
  position: relative;
  width: var(--titleWidth);
  height: calc(var(--titleWidth) * .9);
}
.cover_title .lead {
  fill: white;
}
.cover_title .tail    { --t: 97;    --l: 178.5; --sizeBasis: 15; }
.cover_title .balloon { --t: 0;     --l: 39;    --sizeBasis: 204; }
.cover_title .lead    { --t: 24;    --l: 81;    --sizeBasis: 118; }
.cover_title .t1      { --t: 111;   --l: 0.2;   --sizeBasis: 93; }
.cover_title .t2      { --t: 110.6; --l: 96.7;  --sizeBasis: 93; }
.cover_title .t3      { --t: 110.5; --l: 191.4; --sizeBasis: 88; }
.cover_title .t4      { --t: 222;   --l: 0.9;   --sizeBasis: 51; }
.cover_title .t5      { --t: 222;   --l: 50.6;  --sizeBasis: 46; }
.cover_title .t6      { --t: 222.6; --l: 101.5; --sizeBasis: 54; }
.cover_title .t7      { --t: 221.9; --l: 160.3; --sizeBasis: 55; }
.cover_title .t8      { --t: 222.4; --l: 220.1; --sizeBasis: 60; }
.cover_title svg,
.cover_title img:not(.auto) {
  width: var(--imgWidth);
}
.cover_title svg {
  position: absolute;
  top: calc(var(--t) * .356%);
  left: calc(var(--l) * .356%);
  width: calc(var(--sizeBasis) * .356%);
  fill: currentcolor;
}
.cover_title .watermark {
  visibility: hidden;
}
.cover_title .watermark img {
  width: 100%;
}
.l-cover .c-lead,
.l-cover .c-button {
  margin-top: 1.25em;
  font-weight: 700;
}
.l-cover .c-button {
  --bgColor: var(--red);
  padding-left: 2.5em;
}

/* 山脈と枠 */
.cover_mountains {
  --mountainsHeight: min(var(--cw) * 206 / var(--aspect), 206px);
  z-index: -1;
  position: absolute;
  inset: auto 0 0;
  height: var(--mountainsHeight);
}
.cover_mountains::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/mountains.svg) 50% top / cover repeat-x;
}
.l-cover .c-frame {
  z-index: -1;
}
@media screen and (max-width: 768.98px) {
  .cover_mountains::after {
    background: url(../images/mountains_md.svg) 96% top / cover repeat-x;
  }
}

/* キャラクター */
.cover_character {
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.cover_character .chara {
  position: absolute;
  width: min(var(--cw) * var(--charaBasis) / var(--aspect), var(--charaBasis) * 1px)
}
.cover_character img:not(.auto) {
  width: inherit;
}

/* :::::: デバイス別レイアウト調整 (サイズは横幅準拠) :::::: */
.cover_character img:not(.auto) {
  width: inherit;
}
@media print, (min-width: 769px) {
  .cover_inner {
    padding-top: 8%;
  }
  .cover_mountains {
    background-position: center top;
  }
  .l-cover .c-lead .u-sponly {
    display: block;
  }
}
@media (min-width: 1033px) {
  .cover_inner {
    padding-top: 0;
  }
  .l-cover .c-lead .u-sponly {
    display: none;
  }
}
/* レイアウトは縦横比準拠 */
.l-cover {
  --titleWidth: calc(var(--cw) * 213 / var(--aspect));
}
.cover_character .chara {
  --charaBasis: 132;
  width: calc(var(--cw) * var(--charaBasis) / var(--aspect));
}
.cover_character .c5 {
  --charaBasis: 124;
}
.cover_character .c1 {
  top: auto;
  right: auto;
  bottom: calc(50% + var(--cw) * 124 / var(--aspect));
  left: calc(27% - var(--titleWidth) * .5);
}
.cover_character .c2 {
  top: calc(50% + var(--cw) * 32 / var(--aspect));
  right: calc(22% - var(--titleWidth) * .5);
  bottom: auto;
  left: auto;
}
.cover_character .c3 {
  top: calc(50% - var(--cw) * 200 / var(--aspect));
  right: calc(18% - var(--titleWidth) * .5);
  bottom: auto;
  left: auto;
  rotate: -4deg;
}
.cover_character .c4 {
  top: calc(50% - var(--cw) * 16 / var(--aspect));
  right: auto;
  bottom: auto;
  left: calc(24% - var(--titleWidth) * .5);
}
.cover_character .c5 {
  top: auto;
  right: calc(34% - var(--titleWidth) * .5);
  bottom: calc(50% + var(--cw) * 160 / var(--aspect));
  left: auto;
  rotate: 4deg;
}
@media (min-width: 580px) and (max-width: 768.98px) {
  /* MEMO: ロゴは広がるがテキストが大き行くならない分微調整 */
  .cover_character .c1 {
    bottom: calc(50% + var(--cw) * .75 * 124 / var(--aspect));
  }
  .cover_character .c2 {
    top: calc(50% + var(--cw) * .75 * 32 / var(--aspect));
  }
  .cover_character .c3 {
    top: calc(50% - var(--cw) * .75 * 200 / var(--aspect));
  }
  .cover_character .c4 {
    top: calc(50% - var(--cw) * .75 * 16 / var(--aspect));
  }
  .cover_character .c5 {
    bottom: calc(50% + var(--cw) * .75 * 160 / var(--aspect));
  }
}
@media (min-width: 769px) {
  .l-cover {
    --titleWidth: min(var(--cw) * 281.6 / var(--aspect), 281.6px);
  }
  .cover_character .chara {
    --charaBasis: 250;
  }
  .cover_character .c1 {
    left: calc(29% - var(--titleWidth) * .5);
  }
  .cover_character .c2 {
    top: min(50% + var(--cw) * 32 / var(--aspect), 50% + 32px);
  }
  .cover_character .c3 {
    top: calc(50% - var(--cw) * 200 / var(--aspect));
    right: calc(18% - var(--titleWidth) * .5);
  }
  .cover_character .c4 {
    top: min(50% + var(--cw) * 8 / var(--aspect), 50% + 8px);
    left: calc(24% - var(--titleWidth) * .5);
  }
}
@media (min-width: 1033px) {
  .cover_character .chara {
    width: min(var(--cw) * var(--charaBasis) / var(--aspect), var(--charaBasis) * 1px);
  }
  .cover_character .c2 {
    --charaBasis: 254;
  }
  .cover_character :is(.c3,.c4,.c5) {
    --charaBasis: 244;
  }
  .cover_character .c1 {
    top: auto;
    right: auto;
    bottom: 52%;
    left: max(50% - var(--cw) * 400 / var(--aspect), 50% - 400px);
  }
  .cover_character .c2 {
    top: 44%;
    right: auto;
    bottom: auto;
    left: max(50% - var(--cw) * 484 / var(--aspect), 50% - 484px);
  }
  .cover_character .c3 {
    top: auto;
    right: max(50% - var(--cw) * 400 / var(--aspect), 50% - 400px);
    bottom: 61%;
    left: auto;
    rotate: -8deg;
  }
  .cover_character .c4 {
    top: 46%;
    right: max(50% - var(--cw) * 400 / var(--aspect), 50% - 400px);
    bottom: auto;
    left: auto;
  }
  .cover_character .c5 {
    top: 45%;
    right: max(50% - var(--cw) * 520 / var(--aspect), 50% - 520px);
    bottom: auto;
    left: auto;
    rotate: 8deg;
    transform: translateY(-50%);
  }
}

/* :::::: 場面転換モーション (消える表紙) :::::: */
:where(.l-cover.is-start) .cover_inner .c-lead,
:where(.l-cover.is-start) .cover_inner .c-button {
  pointer-events: none;
  opacity: 0;
  scale: .8;
}
:where(.l-cover.is-start) .cover_character img {
  opacity: 0;
  scale: .8;
}
:where(.l-cover.is-start).is-motion .cover_inner .c-lead,
:where(.l-cover.is-start).is-motion .cover_inner .c-button,
:where(.l-cover.is-start).is-motion .cover_character .chara img {
  transition: opacity .3s, scale .3s var(--easeOut);
}
:where(.l-cover.is-start) .cover_character .c1 { transition-delay: .05s; }
:where(.l-cover.is-start) .cover_character .c3 { transition-delay: .1s; }
:where(.l-cover.is-start) .cover_character .c5 { transition-delay: .15s; }
:where(.l-cover.is-start) .cover_character .c4 { transition-delay: .2s; }
:where(.l-cover.is-start) .cover_character .c2 { transition-delay: .25s; }
/* ロゴ */
:where(.l-cover.is-start) .cover_logo .persol {
  translate: 0 -150%;
  transition-delay: .4s;
}
:where(.l-cover.is-start).is-motion .cover_logo .persol {
  transition: translate .6s var(--easeInOut);
}
:where(.l-cover.is-start).is-motion .cover_logo .ribbon {
  transform-origin: center top;
  animation: ribbonShrink .6s .4s both;
}
@keyframes ribbonShrink {
  from { transform: scale(1); }
  30% { transform: scale(1, 1.08); }
  to { transform: scale(1, .6) translateY(-105%); }
}
/* 山脈 */
:where(.l-cover.is-start).is-motion .cover_mountains {
  transform-origin: center bottom;
  animation: mountainsShrink .8s .2s both;
}
@keyframes mountainsShrink {
  from { transform: scale(1); }
  20% { transform: scale(1, 1.24); }
  to { transform: scale(1, .6) translateY(100%); }
}
/* タイトル */
:where(.l-cover.is-start).is-motion .cover_inner .cover_title {
  animation: titleOut 1s .2s var(--easeInOut) both;
}
@keyframes titleOut {
  from { transform: scale(1); }
  50% { opacity: 1; transform: translateY(10%) scale(1.2); }
  to { opacity: 0; transform: scale(.6) translateY(20%); }
}

/* :::::: 場面転換モーション (現れる設問エリア) :::::: */
:where(.l-contents.is-start) {
  clip-path: inset(0);
  transition: clip-path .6s var(--easeInOut);
}
:where(.l-contents.is-start) .is-motion {
  /* MEMO: モーション中は触れない */
  pointer-events: none;
}
:where(.l-contents.is-start) .c-lead,
:where(.l-contents.is-start) .progress {
  clip-path: inset(0);
  transition: clip-path 1s var(--easeInOut);
}
:where(.l-contents.is-start):not(.is-appear),
:where(.l-contents.is-start):not(.is-appear) .c-lead,
:where(.l-contents.is-start):not(.is-appear) .progress {
  clip-path: inset(100% 0 0);
}
:where(.l-contents.is-start):not(.is-appear) .stage {
  --stageHeight: 0%;
  opacity: 0;
  translate: 0 calc(100% + var(--sectionSpace) + var(--mountainsHeight));
}
:where(.l-contents.is-motion).is-appear .c-lead,
:where(.l-contents.is-motion).is-appear .progress {
  transition: clip-path 1s var(--easeOut);
}
:where(.l-contents.is-motion).is-appear .stage {
  transition: opacity .4s, height 1s var(--easeOut), translate 1s var(--easeOut);
}
:where(.l-contents.is-motion).is-appear .c-lead {
  transition-delay: .4s;
}
:where(.l-contents.is-motion).is-appear .progress {
  transition-delay: .5s;
}
:where(.l-contents.is-motion).is-appear .stage {
  transition-delay: .5s;
}
/* 設問パーツ */
.l-contents .questions li p {
  transform-origin: center bottom;
}
.l-contents .questions li::after {
  transform-origin: center top;
}
.l-contents .answers::before {
  transform-origin: left center;
}
.l-contents:not(.is-appear) .numbering {
  scale: 0;
}
.l-contents:not(.is-appear) .answers li {
  opacity: 0;
  scale: .4;
}
.l-contents:not(.is-appear) .questions li p {
  opacity: 0;
}
.l-contents:not(.is-appear) .questions li::after {
  visibility: hidden;
  scale: 1 0;
}
.l-contents:not(.is-appear) .answers::before {
  scale: 0 1;
}
.l-contents:not(.is-appear) .c-button {
  opacity: 0;
  scale: .4;
}
:where(.l-contents.is-motion).is-appear .numbering {
  transition: scale .4s var(--easeBack);
}
:where(.l-contents.is-motion).is-appear .questions li p {
  animation: appearQuestions .8s both;
}
:where(.l-contents.is-motion).is-appear .questions li::after {
  transition: scale .4s var(--easeBack);
}
:where(.l-contents.is-motion).is-appear .answers li {
  transition: opacity .2s, scale .4s var(--easeBack);
}
:where(.l-contents.is-motion).is-appear .answers::before {
  transition: scale 1s var(--easeOut);
}
:where(.l-contents.is-motion).is-appear .c-button {
  transition: opacity .4s, scale .4s var(--easeBack);
}
:where(.l-contents.is-motion).is-appear .numbering                  { transition-delay: 1.2s; }
:where(.l-contents.is-motion).is-appear .questions li:first-child p { animation-delay:  1.2s; }
:where(.l-contents.is-motion).is-appear .questions li:last-child p  { animation-delay:  1.2s; }
:where(.l-contents.is-motion).is-appear .questions li::after        { transition-delay: 1.5s; }
:where(.l-contents.is-motion).is-appear .answers::before            { transition-delay: 1.2s; }
:where(.l-contents.is-motion).is-appear .answers li:nth-child(1)    { transition-delay: 1.2s; }
:where(.l-contents.is-motion).is-appear .answers li:nth-child(2)    { transition-delay: 1.2s; }
:where(.l-contents.is-motion).is-appear .answers li:nth-child(3)    { transition-delay: 1.2s; }
:where(.l-contents.is-motion).is-appear .answers li:nth-child(4)    { transition-delay: 1.2s; }
:where(.l-contents.is-motion).is-appear .answers li:nth-child(5)    { transition-delay: 1.2s; }
:where(.l-contents.is-motion).is-appear .c-button                   { transition-delay: 1.4s; }

@keyframes appearQuestions {
  from { transform: scale(.6); opacity: 0; }
  30% { transform: scale(1.04); opacity: 1; }
  70% { transform: scale(.99); }
  to { transform: none; opacity: 1; }
}

/**
 * 診断
 * -------------------------------------------------- */
.l-contents {
  --topSpace: calc(var(--frameSpace) + 2px + var(--sectionSpace) * 3);
  --btmSpace: calc(var(--frameSpace) + 2px + var(--sectionSpace) * 2);
  --btmAdjust: min(4vh, var(--btmSpace));
  display: grid;
  grid-template-rows: repeat(3, auto);
  align-content: end;
  justify-items: center;
  padding: calc(var(--frameSpace) + 2px + var(--sectionSpace));
  padding-top: min(6vh, var(--topSpace));
  padding-bottom: var(--btmAdjust);
  text-align: center;
  background: linear-gradient(to top, #33bec7 50%, #aee2ff 50%);
  background: #aee2ff;
}
.l-contents .c-frame::after {
  border-top-left-radius: 0;
}
.l-contents .c-frame :is(.title,.number,.name) {
  --maskColor: #aee2ff;
}
@media screen and (max-width: 768.98px) {
  .l-contents {
    align-content: center;
  }
}
@media print, (min-width: 769px) {
  .l-contents {
    grid-template-rows: repeat(3, auto);
    padding-top: min(4vh, var(--btmSpace));
  }
}
@media (min-width: 769px) and (max-height: 619.89px) {
  .l-contents {
    align-content: center;
  }
}
@media (min-width: 769px) and (min-height: 620px) {
  .l-contents {
    --btmAdjust: max(100vh - 768px + var(--btmSpace), var(--btmSpace));
  }
}

/* :::::: 進捗 :::::: */
.progress {
  --progress: 50%;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: .6em;
  height: fit-content;
  margin-top: .5em;
  font-weight: 500;
  --fontBasis: 14;
  font-size: var(--fontSize);
}
.progress .bar {
  position: relative;
  width: min(var(--cw) * 200 / var(--aspect), 200px);
  height: 16px;
  margin-left: 3.2em;
  border: 1px solid #959595;
  border-radius: 16px;
  background: white;
}
.progress .bar::after {
  content: "";
  position: absolute;
  inset: -1px auto -1px -1px;
  width: calc(var(--progress) + 2px);
  height: inherit;
  border: 1px solid var(--deepblue);
  border-radius: inherit;
  background: var(--red);
}
.progress[data-current="1"] .bar::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.progress .count {
  width: 3em;
  font-weight: 400;
  font-family: var(--fontNum);
}
@media print, (min-width: 769px) {
  .progress .bar {
    width: min(var(--cw) * 292 / var(--aspect), 292px);
  }
}
/* Motion */
.progress .bar::after {
  transition: width .6s var(--easeOut);
}
.progress[data-current="1"] .bar::after,
.progress[data-current="2"] .bar::after {
  transition: width .6s var(--easeOut), border-radius .6s var(--easeOut);
  will-change: width, border-radius;
}

/* :::::: 診断エリア :::::: */
.stage {
  align-self: end;
  --stageSpace: min(var(--cw) * 16 / var(--aspect), 16px);
  --answerWidth: min(var(--cw) * 344 / var(--aspect), 344px);
  --answerButtonSize: min(var(--cw) * 56 / var(--aspect), 56px);
  --stageHeight: 100%;
  --mountainsHeight: min(var(--cw) * 48 / var(--aspect), 48px);
  position: relative;
  width: 100%;
  height: calc(var(--stageHeight) - var(--mountainsHeight) * 1.25);
  margin-top: calc(var(--mountainsHeight) * 1.25);
}
.stage_inner {
  display: grid;
  justify-items: center;
  margin-top: -.5em;
}
.stage_mountains {
  z-index: -1;
  position: absolute;
  inset: 0 calc(var(--frameSpace) * -1 - 2px - var(--sectionSpace));
  background: #33bec7;
  border-image: linear-gradient(#33bec7, #33bec7) 0 fill / 0 / 0 0 50vh;
}
.stage_mountains::before {
  content: "";
  position: absolute;
  inset: auto 0 calc(100% - 1px) 0;
  height: var(--mountainsHeight);
  background: var(--mountainsilhouette) center bottom / 184% 100% repeat-x;
  backface-visibility: hidden;
  /* animation: mountainsloop 60s linear infinite; */
}
@media screen and (max-width: 768.98px) {
  .stage {
    grid-template-rows: repeat(3, auto) 1fr;
  }
}
@keyframes mountainsloop {
  from { background-position: 0% bottom; }
  to { background-position: calc(100% - var(--cw)) bottom; }
}
@media print, (min-width: 769px) {
  .stage {
    --answerWidth: 400px;
    --mountainsHeight: min(var(--cw) * 80 / var(--aspect), 80px);
    align-content: start;
  }
  .stage_mountains::before {
    background-size: 100% 100%;
  }
}
@media (min-width: 769px) and (max-height: 619.89px) {
  .stage {
    --mountainsHeight: min(10vh, var(--cw) * 80 / var(--aspect));
  }
}

/* :::::: 診断中インジケーター :::::: */
.waiting {
  pointer-events: none;
  position: absolute;
  top: calc(44% - 5em);
  left: calc(50% - 5em);
  width: 10em;
  height: 10em;
  color: white;
  font-size: min(var(--cw) * 22 / var(--aspect), 2.2rem);
}
.waiting,
.waiting_bar,
.waiting_character {
  display: grid;
  place-items: center;
  place-content: center;
}
.waiting > *,
.waiting_bar > *,
.waiting_character > * {
  grid-area: 1 / 1;
}
.waiting svg {
  overflow: visible !important;
  height: auto;
}
.waiting_bar svg {
  z-index: 1;
  width: 10em;
  height: 10em;
  fill: none;
  stroke: var(--deepblue);
  stroke-width: calc(.6em + 4px);
}
.waiting_bar .avanti {
  stroke-linecap: round;
  stroke-dasharray: 760 760;
  stroke-dashoffset: 760;
  rotate: -90deg;
}
.waiting_bar .track + .track,
.waiting_bar .avanti + .avanti {
  stroke-width: .6em;
}
.waiting_bar .track + .track {
  stroke: white;
}
.waiting_bar .avanti + .avanti {
  stroke: var(--red);
}
.waiting_text {
  display: grid;
  align-content: space-between;
  position: absolute;
  inset: 0;
  justify-items: center;
}
.waiting_text svg {
  position: relative;
  width: 8em;
  fill: white;
}
.waiting_text .t1 {
  top: -2em;
}
.waiting_text .t2 {
  bottom: -2em;
  rotate: 180deg;
}
.waiting_character {
  width: 75%;
}
.waiting_character svg {
  width: 100%;
}

/* :::::: 診断中モーション :::::: */
.l-contents .c-lead,
.l-contents .progress {
  transition: clip-path 1s var(--easeInOut);
  clip-path: inset(0);
}
.is-letmesee .c-lead,
.is-letmesee .progress {
  clip-path: inset(100% 0 0);
}
.is-letmesee .progress {
 transition-delay: .2s;
}
.is-letmesee .stage {
  --stageHeight: 120px;
  transition: height .8s .2s var(--easeInOut);
}
.is-letmesee .stage .stage_inner {
  /* MEMO: js で height を書き替える */
  overflow: hidden;
  transition: height .8s var(--easeInOut);
}
.is-letmesee .stage_mountains {
  translate: 0 calc(var(--btmAdjust) * .5);
  transition: translate .8s .2s var(--easeInOut);
}
@media screen and (max-width: 768.98px) {
  /* 山脈の位置調整 */
  .is-letmesee .stage_mountains {
    translate: 0 25vh;
  }
}
@media (min-width: 769px) and (max-height: 619.89px) {
  /* 山脈の位置調整 */
  .is-letmesee .stage_mountains {
    translate: 0 25vh;
  }
}
.waiting {
  opacity: 0;
  scale: .6;
}
.waiting_character li {
  opacity: 0;
  transform: scale(.4);
}
.is-letmesee .waiting {
  opacity: 1;
  scale: 1;
  transition: opacity .6s, scale .6s var(--easeOut);
}
.is-letmesee .waiting_bar svg {
  animation: pseudoLoading 5s linear both;
}
.is-letmesee .waiting_text {
  animation: waitingText 5s linear infinite both;
}
.is-letmesee .waiting_character li {
  animation: waitingCharacter 4s infinite both;
}
/* 遅延 */
.is-letmesee .waiting {
  --delay: .8s;
}
.is-letmesee .waiting {
  transition-delay: var(--delay);
}
.is-letmesee .waiting_bar,
.is-letmesee .waiting_bar svg,
.is-letmesee .waiting_text,
.is-letmesee .waiting_character li {
  animation-delay: var(--delay);
}
.is-letmesee .waiting_character li:nth-child(1) { animation-delay: calc(var(--delay) - 4s); }
.is-letmesee .waiting_character li:nth-child(2) { animation-delay: calc(var(--delay) - 3s); }
.is-letmesee .waiting_character li:nth-child(3) { animation-delay: calc(var(--delay) - 2s); }
.is-letmesee .waiting_character li:nth-child(4) { animation-delay: calc(var(--delay) - 1s); }
@keyframes waitingCharacter {
	from, to { opacity: 0; transform: scale(.4); }
	16%, 44% { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.2,1.8,.8,1); }
	24%, 36% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.8,0,.2,1); }
}
@keyframes pseudoLoading {
  from { stroke-dashoffset: 760; animation-timing-function: cubic-bezier(.2,1,.3,1); }
  20% { stroke-dashoffset: 400; animation-timing-function: cubic-bezier(.8,0,.2,1); }
  40% { stroke-dashoffset: 320; animation-timing-function: linear; }
  60% { stroke-dashoffset: 240; animation-timing-function: cubic-bezier(.8,0,.2,1); }
  to { stroke-dashoffset: 0; }
}
@keyframes waitingText {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* :::::: 診断後モーション :::::: */
.l-contents.is-complete .waiting {
  opacity: 0;
  scale: .3;
  transition: opacity 1s, scale 1s var(--easeOut);
}
.l-curtain {
  pointer-events: none;
  --holeSize: 0;
  display: grid;
  place-content: center;
  z-index: 5;
  position: fixed;
  height: 100lvh;
  inset: auto 0 0;
  clip-path: circle(0);
}
.l-curtain::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 100vw var(--primary);
}
.l-curtain.is-close {
  clip-path: circle(100%);
  animation: closeCurtain 1s .2s var(--easeInOut) both;
}
.l-curtain.is-open::before {
  animation: openCurtain 1s .2s var(--easeInOut) both;
}
@keyframes closeCurtain {
  from { clip-path: circle(0); }
  to { clip-path: circle(100%); }
}
@keyframes openCurtain {
  from { width: 0; height: 0; }
  to { width: 141.4vmax; height: 141.4vmax; }
}
@keyframes fadeCurtain {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* :::::: 設問 :::::: */
.stage .numbering {
  --fontBasis: 24;
  font: 500 var(--fontSize) / 1 var(--fontNum);
}
.stage .questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: .75em;
  position: relative;
  width: min(100%, 480px);
  margin-top: 1em;
  font-weight: 500;
  --fontBasis: 16;
  font-size: var(--fontSize);
  line-height: 1.5;
}
.stage .questions li p {
  display: grid;
  place-items: center;
  height: 9em;
  border-radius: 13px;
  background: #adf0f4;
}
.stage .questions li::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  width: 24px;
  height: 13px;
  background: var(--tail) center top / 100% 100% no-repeat;
}
/* MEMO: 吹き出しを回答の両端に合わせる */
.stage .questions li:first-child::after {
  left: calc(50% - 12px - var(--answerWidth) * .5 + var(--answerButtonSize) * .5);
}
.stage .questions li:last-child::after {
  right: calc(50% - 12px - var(--answerWidth) * .5 + var(--answerButtonSize) * .5);
}
.stage .questions b {
  font-weight: 900;
}
@media print, (min-width: 769px) {
  .stage .numbering {
    --fontBasis: 30;
  }
  .stage .questions {
    column-gap: 2em;
    width: min(var(--cw) * 654 / var(--aspect), 654px);
    --fontBasis: 18;
  }
  .stage .questions li p {
    height: 6em;
  }
}

/* :::::: 選択肢 :::::: */
.stage .answers {
  display: flex;
  justify-content: space-between;
  z-index: 0;
  width: var(--answerWidth);
  position: relative;
  margin-top: min(6vh, var(--spaceBasis));
  --fontBasis: 12;
  font-size: var(--fontSize);
  line-height: 1.25;
}
.stage .answers::before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0 calc(var(--answerButtonSize) * .5);
  top: calc(var(--answerButtonSize) * .5 - 1px);
  border-top: 2px solid currentcolor;
}
.stage .answers label {
  display: grid;
  justify-items: center;
  row-gap: .5em;
}
.stage .answers .c-radio {
  position: relative;
  width: var(--answerButtonSize);
  height: var(--answerButtonSize);
  border-radius: var(--answerButtonSize);
  background: #33bec7;
}
.stage .answers .c-radio::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid currentcolor;
  border-radius: inherit;
  box-shadow: inset 0 0 0 6px white;
  background: #d9d9d9;
}
.stage .answers .c-radio:checked::after {
  background: currentcolor;
}
.stage .answers .label {
  margin-inline: -1.25em;
}
/* Motion */
@media (hover) {
  .stage .answers .c-radio {
    cursor: pointer;
    transition: scale .4s var(--easeOut);
  }
  .stage .answers .c-radio:hover {
    transition-duration: .2s;
    transition-timing-function: var(--easeBack);
  }
  .stage .answers .c-radio:hover {
    scale: 1.08;
  }
}
:where(.stage .answers) .c-radio:checked {
  animation: checkAction .4s both;
}
:where(.stage .answers) .c-radio:not(:checked) {
  animation: unCheckAction .4s both;
}
@media print, (min-width: 769px) {
  .stage .answers {
    margin-top: calc(var(--spaceBasis) * .75);
  }
}
@keyframes checkAction {
  34% { transform: scale(.9); }
  68% { transform: scale(1.04); }
}
@keyframes unCheckAction {
  34% { transform: scale(.96); }
  68% { transform: scale(1.01); }
}

/* :::::: 次の設問へ :::::: */
.stage .c-button {
  --bgColor: #ff9e98;
  margin-top: min(3vh, 2em);
}
.stage .c-button > * {
  grid-area: 1 / 1;
}
.stage .c-button:disabled {
  --bgColor: #ff9e9800;
  pointer-events: none;
  filter: opacity(.5);
}
.stage .c-button:not(:disabled) {
}
.stage .c-button.is-last .label,
.stage .c-button:not(.is-last) .last {
  opacity: 0;
  scale: .8;
}
.stage .c-button.is-last > * {
  transition: opacity .4s, scale .4s var(--easeOut);
}
@media screen and (max-width: 768.98px) {
  .stage .c-button {
    align-self: end;
  }
}
@media print, (min-width: 769px) {
  .stage .c-button {
    margin-top: min(3vh, 3em);
  }
}

/* :::::: 次の設問への遷移モーション :::::: */
:where(.l-contents.is-answering) .questions li p {
  transition: scale .4s var(--easeOut);
}
:where(.l-contents.is-answering).is-replace .questions li p {
  animation: replaceQuestions .8s both;
}
:where(.l-contents.is-answering).is-replace .questions li::after {
  animation: replaceQuestionsTail .8s both;
}
@keyframes replaceQuestions {
  from { transform: scale(.8); opacity: 0; }
  30% { transform: scale(1.08); opacity: 1; }
  70% { transform: scale(.98); }
  to { transform: none; opacity: 1; }
}
@keyframes replaceQuestionsTail {
  from, 60% { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: none; }
}

/**
 * 診断結果
 * -------------------------------------------------- */
.l-result {
  --vHeight: min(var(--cw) * 64 / var(--aspect), 64px);
  --spaceColor: white;
  --maskColor: white;
}
.p-type01 {
  --primary: #fe99bc;
  --secondary: #efff7f;
}
.p-type02 {
  --primary: #78dfff;
  --secondary: #ffae8b;
}
.p-type03 {
  --primary: #ffae8b;
  --secondary: #82ece1;
}
.p-type04 {
  --primary: #8be398;
  --secondary: #ffb0c8;
}
.p-type05 {
  --primary: #caa0ff;
  --secondary: #92f396;
}

/* :::::: フレーム :::::: */
.l-result .c-frame {
  position: sticky;
  top: auto;
  width: 99.925%;
  height: 100dvh;
  margin-top: -100dvh;
}
.l-result .c-frame.is-release {
  position: absolute;
}
.l-result .c-frame::after,
.l-result .frame_outer {
  border-top-left-radius: 0;
}

/* :::::: V :::::: */
.result_v {
  pointer-events: none;
  overflow: visible;
  z-index: 1;
  position: absolute;
  inset: 0 var(--frameSpace) auto;
  width: calc(var(--cw) - var(--frameSpace) * 2);
  height: var(--vHeight);
  fill: none;
  stroke: var(--deepblue);
  stroke-width: 2;
}
:where(.l-result) :is(.result_type,.result_hint,.result_more) {
  padding: 0 var(--frameSpace);
}
:where(.l-result) :is(.hint_inner,.result_more) {
  margin-top: calc(var(--vHeight) * -1);
}
.result_inner {
  padding-block: var(--sectionSpace);
  padding-inline: calc(var(--sectionSpace) * 1.5);
}

/* :::::: タイプ詳細 :::::: */
.type_inner {
  --innerTopSpace: calc(var(--frameSpace) + var(--sectionSpace) * 3);
  display: grid;
  justify-content: center;
  padding-top: var(--innerTopSpace);
  padding-bottom: calc(var(--spaceBasis) * 4);
  background: var(--primary);
}
/* レイアウト */
@media print, (min-width: 769px) {
  .type_inner {
    --innerTopSpace: clamp(var(--frameSpace) * 2, 16vh, var(--frameSpace) + var(--sectionSpace) * 4);
    --visualHeight: min(var(--cw) * 512 / var(--aspect), 512px);
    column-gap: min(4vw, 80px);
    align-items: start;
  }
  .type_inner .type_visual {
    grid-template-rows: 1fr auto auto;
    grid-row: span 2;
    grid-column: 1;
    position: sticky;
    top: calc(50vh - var(--visualHeight) * .5);
    width: min(var(--cw) * 420 / var(--aspect), 480px);
    height: var(--visualHeight);
    margin-top: calc(var(--frameSpace) * -1.6);
    margin-bottom: calc(var(--frameSpace) * -1);
    translate: 0 -4%;
  }
  .type_inner .type_visual .type_character {
    align-self: start;
  }
  .type_inner .type_profile,
  .type_inner .type_karte {
    grid-column: 2;
    width: min(var(--cw) * 380 / var(--aspect), 380px);
  }
  .p-type01 .type_inner .type_character {
    margin-top: calc(var(--innerTopSpace) * -1 + var(--frameSpace));
  }
  .p-type02 .type_inner .type_character {
    translate: 0 -2.5%;
  }
}
@media screen and (max-width: 768.98px) {
  .type_inner {
    overflow: hidden;
  }
  .type_inner > * {
    max-width: 350px;
  }
}
@media (max-width: 1032px) and (min-width: 768px) and (orientation: portrait) {
  /* MEMO: 縦持ち大きめタブレットは1カラム */
  :root {
    --aspect: 430;
  }
  .type_inner {
    overflow: hidden;
  }
  .result_type .type_inner {
    --innerTopSpace: calc(var(--frameSpace) + var(--sectionSpace) * 3);
  }
  .result_type .type_visual {
    grid-row: unset;
    grid-column: 1;
    position: static;
  }
  .result_type .type_visual .type_subject {
    justify-items: unset;
  }
  .result_type .type_profile,
  .result_type .type_karte {
    grid-column: 1;
    width: min(var(--cw) * 420 / var(--aspect), 480px);
  }
  .result_type .type_profile .c-paragraph {
    margin-top: 1.75em;
  }
  .result_type .type_character .name {
    left: 0 !important;
  }
}
/* キャラクター */
.result_type .type_character .illust:not(.auto) {
  position: relative;
  --sizeBasis: 440;
  width: var(--imgWidth);
  max-width: 100%;
}
.result_type .type_character img.illust {
  z-index: 2;
}
.result_type .type_character.has-canvas img.illust {
  opacity: 0;
}
.p-type01 .type_character .name {
  --fontBasis: 76;
  top: .4em;
}
.p-type02 .type_character .name {
  --fontBasis: 86;
  top: .8em;
}
.p-type03 .type_character .name {
  --fontBasis: 80;
  top: -.4em;
}
.p-type04 .type_character .name {
  --fontBasis: 86;
  top: -.4em;
}
.p-type05 .type_character .name {
  --fontBasis: 78;
  top: -1em;
}
@media screen and (max-width: 768.98px) {
  .type_inner .type_character {
    min-height: min(90vw, 400px);
  }
  .p-type01 .type_inner .type_character .illust {
    margin-top: calc(var(--sectionSpace) * -4);
  }
  .p-type03 .type_inner .type_character .illust {
    top: 4vw;
  }
}
@media print, (min-width: 769px) {
  .result_type .type_character .name {
    left: -.1em;
  }
  .p-type01 .result_type .type_character .name {
    --fontBasis: 98;
    top: .5em;
  }
  .p-type02 .result_type .type_character .name {
    --fontBasis: 98;
    top: .2em;
  }
  .p-type03 .result_type .type_character .name {
    --fontBasis: 94;
    top: -.2em;
  }
  .p-type04 .result_type .type_character .name {
    --fontBasis: 100;
  }
  .p-type04 .type_visual .type_character .illust {
    left: min(var(--cw) * 64 / var(--aspect), 64px);
  }
  .p-type05 .result_type .type_character .name {
    --fontBasis: 92;
  }
  .p-type05 .type_visual .type_character .illust {
    left: min(var(--cw) * 16 / var(--aspect), 16px);
  }
}
/* プロフィール */
.result_type .type_subject {
  --fontBasis: 19.9;
}
.result_type .type_status {
  --fontBasis: 14;
}
@media screen and (max-width: 768.98px) {
  .result_type .type_subject {
    margin-right: calc(var(--sectionSpace) * -1.5);
  }
  .result_type .type_profile .c-paragraph {
    margin-top: 1.75em;
  }
}
@media print, (min-width: 769px) {
  .result_type .type_subject {
    justify-items: start;
    --fontBasis: 16.91;
  }
  .result_type .type_status {
    --fontBasis: 10.67;
  }
}
/* カルテ */
.type_karte {
  --radius: 16px;
  margin-top: var(--spaceBasis);
}
.type_karte + .type_karte {
  margin-top: calc(var(--spaceBasis) * .8);
}
.karte_head {
  padding: .5em;
  border: 2px solid currentcolor;
  border-radius: var(--radius) var(--radius) 0 0;
  --fontBasis: 20;
  font-size: var(--fontSize);
  text-align: center;
  background: var(--secondary);
}
.karte_body {
  display: grid;
  padding: min(var(--cw) * 32 / var(--aspect), 32px);
  border: 2px solid currentcolor;
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: white;
}
.karte_body .c-paragraph {
  margin-top: 1.75em;
}
@media screen and (max-width: 768.98px) {
  .karte_body {
    column-gap: 14px;
  }
  .karte_body > * {
    grid-column: 1/ 3;
  }
  .karte_body.-multitarot .c-tarot {
    grid-column: 1;
    justify-self: end;
  }
  .karte_body .c-tarot + .c-tarot {
    grid-column: 2;
    justify-self: start;
  }
}
@media print, (min-width: 769px) {
  .karte_body {
    row-gap: 14px;
  }
  .type_karte .karte_head {
    --fontBasis: 16;
  }
  .type_karte + .type_karte {
    margin-top: calc(var(--spaceBasis) * .4);
  }
}

/* :::::: はたらくヒント :::::: */
.result_hint {
  --loupeSize: min(var(--cw) * 184 / var(--aspect), 184px);
  --loupeStroke: 2.7px;
  text-align: center;
  position: relative;
  margin-top: calc(var(--vHeight) * -1);
}
.hint_inner {
  margin-top: calc(var(--loupeSize) * -1);
  padding-top: var(--loupeSize);
  padding-bottom: calc(var(--spaceBasis) * 3);
  background: var(--secondary);
  clip-path: polygon(0 0, 50% var(--vHeight), 100% 0, 100% 100%, 0 100%);
}
.hint_title {
  display: grid;
  place-items: center;
  z-index: 2;
  position: relative;
  font-weight: 900;
  --fontBasis: 16;
  font-size: var(--fontSize);
  line-height: 1.25;
}
.hint_title > * {
  grid-area: 1 / 1;
}
.hint_title .main,
.hint_title .sub {
  width: 6.125em;
  fill: currentcolor;
}
.hint_title .main {
  padding-top: .4em;
}
.hint_title .sub {
  align-self: end;
  overflow: visible;
  position: relative;
  bottom: -1.5em;
  transform-origin: center top;
  /* rotate: 45deg; */
}
.result_hint .c-paragraph {
  margin-top: 4.5em;
  font-weight: 700;
  line-height: 2;
}
@media print, (min-width: 769px) {
  .result_hint {
    --loupeSize: min(var(--cw) * 168 / var(--aspect), 168px);
    --loupeStroke: 2.43px;
  }
  .hint_title .main,
  .hint_title .sub {
    width: 5.5em;
  }
}
/* 虫眼鏡 */
.hint_title .loupe {
  z-index: -1;
  position: relative;
  width: var(--loupeSize);
  height: var(--loupeSize);
  border-radius: var(--loupeSize);
  rotate: -42.38deg;
}
.hint_title .loupe::before,
.hint_title .loupe::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--loupeStroke) solid currentcolor;
  border-radius: inherit;
  background: #d8e7f3;
}
.hint_title .loupe::after {
  inset: 8px;
}
.hint_title .loupe .grip {
  overflow: visible;
  z-index: -1;
  position: absolute;
  top: 96%;
  left: 50%;
  width: 13%;
  fill: #d8e7f3;
  stroke: currentcolor;
  stroke-width: var(--loupeStroke);
  translate: -50% 0;
}
/* カルテャーデッキ */
.culturedeck_image {
  position: relative;
  width: min(var(--cw) * 352 / var(--aspect), 352px);
  margin: 0 auto;
  margin-top: var(--spaceBasis);
  padding: 4px;
  border-radius: 12px;
}
.culturedeck_image::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid currentcolor;
  border-radius: 12px;
  pointer-events: none;
}
/* Motion */
@media (hover) {
  .culturedeck_image {
    cursor: pointer;
  }
  .culturedeck_image:not(:hover)::before {
    animation: culturedeckLeave .2s both;
  }
  .culturedeck_image:hover::before {
    inset: -2px;
    border-radius: 14px;
    animation: culturedeckEnter .4s both;
  }
}
@keyframes culturedeckEnter {
  from { inset: 0; border-radius: 12px; }
  30% { inset: -4px; border-radius: 16px; }
  to { inset: -2px; border-radius: 14px; }
}
@keyframes culturedeckLeave {
  from { inset: -2px; border-radius: 14px; }
  40% { inset: 1px; border-radius: 11px; }
  to { inset: 0; border-radius: 12px; }
}
.culturedeck_image img {
  border: 1px solid currentcolor;
  border-radius: 8px;
}
.culturedeck_slide {
  margin-top: calc(var(--spaceBasis) * .4);
  margin-inline: calc(var(--sectionSpace) * -1.5);
}
.culturedeck_slide .item {
  max-width: min(var(--cw) * 176 / var(--aspect), 176px);
}
.culturedeck_slide .item .num {
  fill: #79a3c2;
  line-height: 1.25;
  text-align: left;
}
.culturedeck_slide .item .num svg {
  width: min(var(--cw) * 16 / var(--aspect), 16px);
}
.culturedeck_slide .item img {
  border: 3px solid #79a3c2;
  border-radius: 6px;
}
@media print, (min-width: 769px) {
  .culturedeck_image {
    width: min(var(--cw) * 608 / var(--aspect), 608px);
    margin-top: var(--spaceBasis);
  }
  .culturedeck_slide {
    margin-top: var(--spaceBasis);
  }
  .culturedeck_slide .item {
    max-width: min(var(--cw) * 320 / var(--aspect), 320px);
  }
  .culturedeck_slide .item img {
    border-width: 5px;
    border-radius: 8px;
  }
}
.hint_inner .c-button {
  --bgColor: var(--deepblue);
  column-gap: .75em;
  width: min(var(--cw) * 312 / var(--aspect), 312px);
  height: min(var(--cw) * 74 / var(--aspect), 74px);
  margin: 0 auto;
  margin-top: calc(var(--spaceBasis) * 1.4);
  color: white;
}
@media print, (min-width: 769px) {
  .hint_inner .c-button {
    margin-top: calc(var(--spaceBasis) * 1.6);
  }
}

/* :::::: 診断結果をシェアする :::::: */
.result_more {
  position: relative;
  padding-bottom: var(--frameSpace);
}
.more_inner {
  overflow: hidden;
  padding-top: calc(var(--vHeight) + var(--spaceBasis) * 1.6);
  padding-bottom: calc(var(--spaceBasis) * 2);
  background: var(--gray);
  clip-path: polygon(0 0, 50% var(--vHeight), 100% 0, 100% 100%, 0 100%);
}
.more_inner .c-button {
  margin: 0 auto;
  margin-top: var(--spaceBasis);
  color: var(--deepblue);
}
.result_more .share {
  --iconSize: 64px;
  display: grid;
  justify-content: center;
  gap: 12.8px;
}
.result_more .share .title {
  grid-column: span 2;
  --fontBasis: 16;
  font-size: var(--fontSize);
  text-align: center;
}
.result_more .share .item {
  display: grid;
  place-items: center;
  z-index: 0;
  position: relative;
  width: var(--iconSize);
  height: var(--iconSize);
  border-radius: var(--iconSize);
  color: currentcolor;
}
.result_more .share .item::before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  border: 2.4px solid currentcolor;
  border-radius: inherit;
  background: var(--primary);
}
.result_more .share .item:first-of-type {
  justify-self: end;
}
.result_more .share .item:last-of-type {
  justify-self: start;
}
.result_more .share .item svg {
  width: 50%;
  fill: currentcolor;
}
/* Motion */
@media (hover) {
  .result_more .share .item {
    cursor: pointer;
  }
  .result_more .share .item:not(:hover)::before {
    animation: buttonLeave .2s both;
  }
  .result_more .share .item:hover::before {
    inset: -4px;
    animation: buttonEnter .4s both;
  }
}
@media print, (min-width: 769px) {
  .more_inner {
    padding-top: calc(var(--vHeight) + 80px);
  }
  .result_more .share .item::before {
    border-width: 3px;
  }
}

/* :::::: ほかにはこんな仲間がいるよ :::::: */
.result_more .other {
  margin-top: 64px;
}
.result_more .other .title {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5em;
  padding-bottom: .25em;
  --fontBasis: 16;
  font-size: var(--fontSize);
  text-align: center;
}
.result_more .other .title::before,
.result_more .other .title::after {
  content: "";
  display: inline-block;
  height: 1em;
  border-left: 2px solid currentcolor;
  transform-origin: center bottom;
}
.result_more .other .title::before {
  rotate: -30deg;
}
.result_more .other .title::after {
  rotate: 30deg;
}
/* ラインアップ */
.type_lineup {
  margin-top: calc(var(--spaceBasis) * .4);
}
.type_lineup .splide__track {
  overflow: visible;
}
.type_lineup .item {
  overflow: hidden;
  max-width: min(var(--cw) * 312 / var(--aspect), 312px);
  margin-right: 10px;
  padding: 24px;
  border: min(var(--cw) * 6 / var(--aspect), 6px) solid currentcolor;
  border-radius: 16px;
  background: var(--primary);
}
.type_lineup .type_character {
  align-content: center;
  z-index: 0;
  position: relative;
  height: min(var(--cw) * 280 / var(--aspect), 280px);
}
.type_lineup .type_character .name {
  margin-inline: -24px;
}
.type_lineup .type_character img:not(.auto) {
  width: 104%;
  max-width: none;
}
.type_lineup .p-type01 .type_character .illust {
  margin-bottom: calc(var(--spaceBasis) * 1.2);
}
.type_lineup .p-type02 .type_character .illust {
  width: 100%;
}
.type_lineup .p-type03 .type_character .illust {
  margin-top: calc(var(--spaceBasis) * .4);
}
.type_lineup .p-type04 .type_character .illust {
  margin-bottom: calc(var(--spaceBasis) * .2);
}
.type_lineup .p-type01 .type_character .name {
  --fontBasis: 58;
  top: .4em;
}
.type_lineup .p-type02 .type_character .name {
  --fontBasis: 58;
  top: .7em;
}
.type_lineup .p-type03 .type_character .name {
  --fontBasis: 60;
  top: -.4em;
}
.type_lineup .p-type04 .type_character .name {
  --fontBasis: 52;
}
.type_lineup .p-type05 .type_character .name {
  --fontBasis: 54;
  top: -1em;
}
@media print, (min-width: 769px) {
  .type_lineup {
    max-width: 900px;
    margin-inline: auto;
  }
  .type_lineup .item {
    padding: calc(var(--spaceBasis) * .4);
    border-width: 4.16px;
  }
  .type_lineup .type_character {
    height: min(var(--cw) * 200 / var(--aspect), 200px);
  }
  .type_lineup .type_character .name {
    --fontBasis: 40;
    margin-inline: -1em;
  }
  .type_lineup .p-type01 .type_character .name {
    --fontBasis: 35;
    top: .2em;
  }
  .type_lineup .p-type02 .type_character .name {
    --fontBasis: 38;
  }
  .type_lineup .p-type03 .type_character .name {
    --fontBasis: 37;
  }
  .type_lineup .p-type04 .type_character .name {
    --fontBasis: 38;
    top: 0;
  }
  .type_lineup .p-type05 .type_character .name {
    --fontBasis: 35;
  }
  .type_lineup .type_character .name span {
    -webkit-text-stroke: 2px white;
  }
}
.type_lineup .type_number {
  display: grid;
  justify-items: center;
  z-index: 1;
  position: absolute;
  inset: 0 auto auto 0;
  padding: .5em .75em .75em .25em;
  border-bottom-right-radius: inherit;
  color: white;
  font-weight: 800;
  --fontBasis: 11.83;
  font-size: var(--fontSize);
  line-height: 1;
  font-family: var(--fontLabel);
  background: var(--deepblue);
}
.type_lineup .type_number span {
  position: relative;
  left: .1em;
  letter-spacing: .1em;
}
.type_lineup .type_number b {
  font-weight: 600;
  font-size: 300%;
  letter-spacing: -.1em;
}
.type_lineup .type_subject {
  margin-top: .5em;
  margin-right: -26px;
  --fontBasis: 14.32;
}
.type_subject > * {
  border-width: 1.5px;
  box-shadow: 3px 3px 0 currentcolor;
}
.type_lineup .type_status {
  --fontBasis: 11.5;
  white-space: nowrap;
}
.type_lineup .type_status .star svg {
  width: 1.5em;
}
.type_lineup .c-paragraph {
  margin-top: 1.5em;
  --fontBasis: 15;
}
@media print, (min-width: 769px) {
  .type_lineup .item {
    width: min(var(--cw) * 216 / var(--aspect), 216px);
  }
  .type_lineup .type_number {
    --fontBasis: 8.2;
  }
  .type_lineup .type_subject {
    --fontBasis: 9;
  }
  .type_lineup .type_status {
    --fontBasis: 7.5;
  }
  .type_lineup .c-paragraph {
    --fontBasis: 10.39;
  }
}

/**
 * Loading (html に style で)
 * ---------------------------------------- */
.p-typetest.l-loading {
  z-index: 10;
  display: grid;
  place-content: center;
  position: fixed;
  inset: 0;
}
.p-typetest.l-loading::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 100vw var(--primary);
}
.p-typetest.l-loading.is-loaded {
  background: transparent;
}
.p-typetest.l-loading.is-loaded::before {
  animation: openCurtain 1s .2s var(--easeInOut) both;
}

/**
 * Utility / Common
 * ---------------------------------------- */
.u-visuallyhidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  opacity: 0;
}
@media screen and (max-width: 768.98px) {
  .u-pconly { display: none; }
  :root {
    --aspect: 430;
  }
}
@media print, (min-width: 769px) {
  .u-sponly { display: none; }
  :root {
    --aspect: 960;
  }
}
:where(.p-typetest) :is(img,canvas,svg) {
  --imgWidth: min(var(--cw) * var(--sizeBasis) / var(--aspect), var(--sizeBasis) * 1px);
  height: auto;
  vertical-align: middle;
}
:where(.p-typetest) :is(h1,h2,h3,p,ul,dl,figcaption,.c-button) {
  --fontSize: min(var(--cw) * var(--fontBasis) / var(--aspect), var(--fontBasis) * .1rem);
}
body {
  color: var(--deepblue);
  font: 500 1em / 1.75 var(--font);
  --breakout: calc(50% - var(--cw) * .5);
}
body.is-fixed {
  position: fixed;
  inset: 0;
}
body.u-scrollbar {
  overflow-y: scroll;
}
html {
  -webkit-text-size-adjust: 100%;
}
:root {
  --deepblue: #084f83;
  --gray: #e6ebed;
  --red: #ff9e98;
  
  --mountainshadow: #a5cdea;
  
  --font: "Zen Kaku Gothic New", sans-serif;
  --fontLabel: "Lexend Tera", sans-serif;
  --fontNum: "Jost", sans-serif;
  
  --easeIn: cubic-bezier(.7,0,.8,0);
  --easeOut: cubic-bezier(.2,1,.3,1);
  --easeInOut: cubic-bezier(.8,0,.2,1);
  --easeBack: cubic-bezier(.2,1.8,.8,1);
  
  /* 吹き出しの尾 */
  --tail: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="14" viewBox="0 0 23 14" preserveAspectRatio="none" fill="%23adf0f4"><path d="M23,0l-9.915,12.971c-.801,1.04-2.369,1.04-3.17,0L0,0"/></svg>');
  /* 山脈シルエット */
  --mountainsilhouette: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="80" viewBox="0 0 1280 80" preserveAspectRatio="none" fill="%2333bec7"><path d="M1264.35,30.985c-2.36-.829-4.73-1.659-7.04-2.526-5.77-2.152-11.04-4.666-16.26-7.155-3.29-1.529-7.03-2.281-11.59-2.462-3.07-.128-6.1-.321-9.15-.515-1.27-.08-2.54-.161-3.82-.237-2.25-.13-4.01-.544-5.43-1.477-.74-.465-1.61-.895-2.47-1.324-1.26-.624-2.51-1.246-3.36-1.968-4.78-4.122-12.47-6.455-21.26-8.217-2.67-.548-5.3-1.17-7.92-1.791-1.48-.349-2.96-.699-4.44-1.035-.82-.181-1.7-.233-2.09.311-2.6.682-4.41,1.744-6.23,2.804-.94.553-1.89,1.105-2.94,1.603-.51.233-1.09.456-1.67.68-1.41.546-2.84,1.099-3.39,1.834-2.07,2.798-6.61,4.503-11.13,6.196-1.46.55-2.93,1.099-4.3,1.684-2.19.93-4.65,1.715-7.12,2.504-3.18,1.016-6.38,2.038-9.03,3.38-.59.3-1.26.573-1.92.845-.94.387-1.88.772-2.59,1.229-2.31,1.477-5.49,2.411-8.73,3.318.25.909-1.09,1.448-2.42,1.987-1.56.629-3.12,1.257-2.14,2.471-2.39.464-4.17,1.297-5.96,2.134-.82.379-1.63.759-2.5,1.106-.27.108-.35.341-.43.568-.04.101-.07.2-.12.288-1.32.078-2.53.052-3.74-.285-5.51-1.545-11.43-2.688-17.35-3.83-3.81-.735-7.63-1.471-11.33-2.314-.66-.155-1.21.078-1.43.415-.23.015-.48.011-.73.006-.61-.011-1.21-.023-1.68.253-2.83,1.669-6.41,2.905-10.06,4.162l-.11.038-.57.194c-3.03,1.032-6.29,2.142-8.05,3.849-1.12.194-2.25.387-3.37.579-9.69,1.665-19.35,3.324-28.66,5.461-.48.056-.97.109-1.46.161-3.34.359-6.69.719-8.703,2.301-.198.15-.68.218-1.14.284-.179.025-.354.05-.508.079-.786.155-1.574.309-2.363.464-1.526.299-3.056.598-4.587.897l-3.086.604c-1.29.252-2.579.505-3.863.757v-.32c-4.739-.19-8.728-1.155-12.713-2.12-1.763-.426-3.525-.853-5.35-1.211-9.566-1.875-15.762-5.266-21.879-8.615-.414-.226-.827-.452-1.241-.678-5.637-3.086-12.99-4.578-21.813-5.087-2.324-.131-4.679-.178-7.039-.226h-.002c-4.358-.087-8.735-.175-12.974-.791-.349-.048-.946.178-1.527.398-.097.037-.193.074-.288.109-.135.05-.266.097-.391.137-.557.101-1.113.177-1.67.254-1.322.182-2.645.364-3.967.865-3.03,1.129-5.322,2.511-7.603,3.888-2.517,1.517-5.021,3.028-8.491,4.184-2.799.924-5.053,2.054-7.301,3.181-.64.32-1.279.641-1.931.956-7.025-1.967-12.744-4.578-16.91-7.596-4.995-3.65-11.712-6.736-18.422-9.819-3.827-1.758-7.651-3.515-11.152-5.375-2.666-1.414-4.526-.432-6.19.447-.172.09-.341.18-.509.266-4.616.372-8.527,1.329-12.484,2.298h-.004c-1.085.266-2.173.532-3.28.788-2.227.53-4.178,1.213-6.122,1.893-2.906,1.017-5.795,2.028-9.563,2.515-1.961.238-2.696.95-3.431,1.764-4.167,4.782-11.111,8.41-23.692,9.665-1.015.085-1.862.309-2.727.537l-.223.059c-.106.028-.211.055-.318.082-4.983,1.255-10.212,2.341-15.849,2.985-7.374-3.523-16.258-6.263-25.15-9.005-3.519-1.085-7.04-2.171-10.469-3.306-8.578-2.815-16.421-6.104-24.182-9.36-4.902-2.001-10.457-2.984-17.238-3.222-4.559-.167-9.077-.42-13.612-.673-1.885-.105-3.773-.211-5.668-.31-3.349-.17-5.964-.712-8.088-1.933-1.097-.608-2.384-1.17-3.668-1.731h0c-1.869-.817-3.731-1.631-4.99-2.576-7.108-5.392-18.545-8.445-31.616-10.751-3.974-.716-7.881-1.529-11.785-2.342h-.004c-2.194-.458-4.388-.915-6.593-1.354-1.225-.238-2.533-.305-3.104.407-3.866.891-6.567,2.281-9.264,3.668-1.406.723-2.811,1.446-4.38,2.097-.759.305-1.615.597-2.476.889-2.101.715-4.228,1.438-5.039,2.401-3.083,3.66-9.842,5.89-16.555,8.106h-.002c-2.181.72-4.357,1.438-6.4,2.203-3.25,1.216-6.907,2.244-10.58,3.277-4.728,1.329-9.484,2.666-13.438,4.422-.877.392-1.865.749-2.849,1.105-1.401.506-2.795,1.01-3.85,1.608-3.432,1.933-8.17,3.154-12.99,4.341.377,1.189-1.611,1.894-3.598,2.599-2.319.823-4.635,1.645-3.183,3.234-3.543.607-6.195,1.696-8.863,2.791h0c-1.208.496-2.419.994-3.717,1.448-.396.141-.518.445-.637.743-.052.131-.105.262-.18.376-1.96.102-3.758.068-5.555-.373-8.199-2.022-17.003-3.516-25.805-5.01-5.669-.963-11.336-1.925-16.84-3.028-.98-.203-1.797.102-2.124.543-.356.02-.725.014-1.094.008h0c-.903-.015-1.804-.03-2.5.331-4.206,2.183-9.534,3.8-14.952,5.445h0l-.16.049c-.281.085-.564.169-.849.254-4.511,1.351-9.365,2.804-11.978,5.037-1.641.249-3.282.497-4.923.744l-.085.013c-14.418,2.178-28.782,4.348-42.62,7.145-.72.073-1.446.142-2.173.21-4.965.47-9.948.94-12.941,3.011-.294.196-1.011.285-1.695.371-.266.033-.527.066-.756.104-3.421.592-6.862,1.184-10.304,1.775l-.03.006c-3.171.545-6.343,1.09-9.498,1.635v.851c-5.133-.096-9.37-1.121-13.603-2.146-1.763-.426-3.525-.853-5.35-1.211-9.566-1.875-15.762-5.266-21.88-8.615-.413-.226-.826-.452-1.24-.678-5.637-3.086-12.99-4.578-21.813-5.087-2.325-.131-4.68-.178-7.041-.226-4.358-.087-8.735-.175-12.974-.791-.349-.048-.946.178-1.527.398-.235.09-.467.178-.679.246-.557.101-1.114.177-1.67.254-1.323.182-2.645.364-3.967.865-3.03,1.129-5.322,2.511-7.604,3.888-2.516,1.517-5.02,3.028-8.49,4.184-2.799.924-5.052,2.054-7.301,3.181-.64.32-1.279.641-1.931.956-7.025-1.967-12.744-4.578-16.911-7.596-4.994-3.65-11.711-6.736-18.421-9.819-3.827-1.758-7.651-3.515-11.152-5.375-2.666-1.414-4.526-.432-6.19.447-.171.09-.341.18-.509.266-4.616.372-8.527,1.329-12.484,2.298-1.086.266-2.175.532-3.284.788-2.227.53-4.178,1.213-6.123,1.893-2.905,1.017-5.794,2.028-9.562,2.515-1.961.238-2.696.95-3.431,1.764-4.166,4.782-11.111,8.41-23.692,9.665-1.015.084-1.862.308-2.727.537-.179.047-.359.095-.541.141-4.983,1.255-10.212,2.341-15.849,2.985-7.375-3.523-16.597-8.176-25.15-11.84-3.362-1.44-7.04-6.01-10.469-7.145-4.303-1.412-8.539-2.671-12.435-4.53v42.787h1280v-42.787c-4.696-2.381-10.168-4.307-15.65-6.228Z"/></svg>');
}

/** splide-core.min.css */
@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}