<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";

.u-section {
  margin-inline: auto;
  text-align: left;
  max-width: clamp(calc(var(--section-width) * 1em/16), calc(var(--section-width) / 1400*100vw), calc(var(--section-width) * 1.2em/16));
  width: calc(345/375*100%);
  &amp;:where(.is-wide) {
    --section-width: 1300;
    width: calc(350/375*100%);
  }
  @media screen and (max-width: 880px) {
    width: calc(360/400*100%);
  }
}

@media (any-hover: hover) {
  .u-target:where(:any-link, :enabled) {
    transition: opacity var(--transition);
  }
  .u-target:where(:any-link,:enabled):hover {
    opacity: .6;
  }

  .u-arrowtarget__arrow {
    .u-arrowtarget:is(:hover, :focus-visible) &amp; {
      animation-name: arrow_move_hr;
      animation-duration: .6s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: linear;
    }
    .u-arrowtarget.is-left:is(:hover, :focus-visible) &amp; {
      animation-name: arrow_move_hr_toleft;
    }
  }
  @keyframes arrow_move_hr {
    0% {
      translate: calc(0em/16) 0;
    }
    25% {
      translate: calc(0em/16) 0;
    }
    25.1% {
      translate: calc(1em/16) 0;
    }
    50% {
      translate: calc(1em/16) 0;
    }
    50.1% {
      translate: calc(2em/16) 0;
    }
    75% {
      translate: calc(2em/16) 0;
    }
    75.1% {
      translate: calc(3em/16) 0;
    }
    100% {
      translate: calc(3em/16) 0;
    }
  }
  @keyframes arrow_move_hr_toleft {
    0% {
      translate: calc(0em/16) 0;
    }
    25% {
      translate: calc(0em/16) 0;
    }
    25.1% {
      translate: calc(-1em/16) 0;
    }
    50% {
      translate: calc(-1em/16) 0;
    }
    50.1% {
      translate: calc(-2em/16) 0;
    }
    75% {
      translate: calc(-2em/16) 0;
    }
    75.1% {
      translate: calc(-3em/16) 0;
    }
    100% {
      translate: calc(-3em/16) 0;
    }
  }
}

@media (any-hover: hover) {
  .u-buruburutarget__body {
    .u-buruburutarget:is(:hover, :focus-visible) &amp; {
      animation: buruburu .8s forwards;
      animation-timing-function: var(--ease-out-quad);
    }
    .u-buruburutarget.is-infinyty:is(:hover, :focus-visible) &amp; {
      animation: buruburu 1s infinite;
    }
  }
  @keyframes buruburu {
    2% {
      transform: translate(calc(3em/16*.5), calc(-8em/16*.5)) rotate(-0.5deg);
    }
    4% {
      transform: translate(calc(-9em/16*.5), calc(5em/16*.5)) rotate(-0.5deg);
    }
    6% {
      transform: translate(calc(-6em/16*.5), calc(9em/16*.5)) rotate(2.5deg);
    }
    8% {
      transform: translate(calc(-8em/16*.5), calc(9em/16*.5)) rotate(0.5deg);
    }
    10% {
      transform: translate(calc(-6em/16*.5), calc(-1em/16*.5)) rotate(0.5deg);
    }
    12% {
      transform: translate(calc(-9em/16*.5), calc(2em/16*.5)) rotate(2.5deg);
    }
    14% {
      transform: translate(calc(-2em/16*.5), calc(9em/16*.5)) rotate(-1.5deg);
    }
    16% {
      transform: translate(calc(0em/16*.5), calc(10em/16*.5)) rotate(-0.5deg);
    }
    18% {
      transform: translate(calc(-3em/16*.5), calc(-3em/16*.5)) rotate(3.5deg);
    }
    20% {
      transform: translate(calc(8em/16*.5), calc(-1em/16*.5)) rotate(3.5deg);
    }
    22% {
      transform: translate(calc(10em/16*.5), calc(-4em/16*.5)) rotate(-0.5deg);
    }
    24% {
      transform: translate(calc(0em/16*.5), calc(-8em/16*.5)) rotate(0.5deg);
    }
    26% {
      transform: translate(calc(-1em/16*.5), calc(2em/16*.5)) rotate(-1.5deg);
    }
    28% {
      transform: translate(calc(8em/16*.5), calc(8em/16*.5)) rotate(-1.5deg);
    }
    30% {
      transform: translate(calc(-9em/16*.5), calc(5em/16*.5)) rotate(-0.5deg);
    }
    32% {
      transform: translate(calc(1em/16*.5), calc(10em/16*.5)) rotate(1.5deg);
    }
    34% {
      transform: translate(calc(7em/16*.5), calc(-4em/16*.5)) rotate(3.5deg);
    }
    36% {
      transform: translate(calc(2em/16*.5), calc(-8em/16*.5)) rotate(-1.5deg);
    }
    38% {
      transform: translate(calc(6em/16*.5), calc(10em/16*.5)) rotate(-2.5deg);
    }
    40% {
      transform: translate(calc(3em/16*.5), calc(-1em/16*.5)) rotate(0.5deg);
    }
    42% {
      transform: translate(calc(-5em/16*.5), calc(-4em/16*.5)) rotate(-0.5deg);
    }
    44% {
      transform: translate(calc(-3em/16*.5), calc(10em/16*.5)) rotate(-2.5deg);
    }
    46% {
      transform: translate(calc(-7em/16*.5), calc(2em/16*.5)) rotate(-2.5deg);
    }
    48% {
      transform: translate(calc(-5em/16*.5), calc(-1em/16*.5)) rotate(3.5deg);
    }
    50% {
      transform: translate(calc(-7em/16*.5), calc(-1em/16*.5)) rotate(1.5deg);
    }
    52% {
      transform: translate(calc(2em/16*.5), calc(8em/16*.5)) rotate(-1.5deg);
    }
    54% {
      transform: translate(calc(7em/16*.5), calc(-9em/16*.5)) rotate(0.5deg);
    }
    56% {
      transform: translate(calc(-4em/16*.5), calc(1em/16*.5)) rotate(1.5deg);
    }
    58% {
      transform: translate(calc(-2em/16*.5), calc(-8em/16*.5)) rotate(1.5deg);
    }
    60% {
      transform: translate(calc(-7em/16*.5), calc(1em/16*.5)) rotate(-0.5deg);
    }
    62% {
      transform: translate(calc(-5em/16*.5), calc(-2em/16*.5)) rotate(-0.5deg);
    }
    64% {
      transform: translate(calc(-2em/16*.5), calc(5em/16*.5)) rotate(-2.5deg);
    }
    66% {
      transform: translate(calc(-2em/16*.5), calc(7em/16*.5)) rotate(3.5deg);
    }
    68% {
      transform: translate(calc(-7em/16*.5), calc(-1em/16*.5)) rotate(-0.5deg);
    }
    70% {
      transform: translate(calc(-5em/16*.5), calc(8em/16*.5)) rotate(-2.5deg);
    }
    72% {
      transform: translate(calc(-3em/16*.5), calc(-9em/16*.5)) rotate(-2.5deg);
    }
    74% {
      transform: translate(calc(-2em/16*.5), calc(-7em/16*.5)) rotate(3.5deg);
    }
    76% {
      transform: translate(calc(-5em/16*.5), calc(-4em/16*.5)) rotate(2.5deg);
    }
    78% {
      transform: translate(calc(-2em/16*.5), calc(10em/16*.5)) rotate(-1.5deg);
    }
    80% {
      transform: translate(calc(4em/16*.5), calc(9em/16*.5)) rotate(3.5deg);
    }
    82% {
      transform: translate(calc(3em/16*.5), calc(-1em/16*.5)) rotate(-1.5deg);
    }
    84% {
      transform: translate(calc(4em/16*.5), calc(-6em/16*.5)) rotate(0.5deg);
    }
    86% {
      transform: translate(calc(-1em/16*.5), calc(4em/16*.5)) rotate(-0.5deg);
    }
    88% {
      transform: translate(calc(10em/16*.5), calc(-5em/16*.5)) rotate(3.5deg);
    }
    90% {
      transform: translate(calc(-3em/16*.5), calc(7em/16*.5)) rotate(-0.5deg);
    }
    92% {
      transform: translate(calc(5em/16*.5), calc(-2em/16*.5)) rotate(2.5deg);
    }
    94% {
      transform: translate(calc(-2em/16*.5), calc(-7em/16*.5)) rotate(-0.5deg);
    }
    96% {
      transform: translate(calc(0em/16*.5), calc(10em/16*.5)) rotate(-2.5deg);
    }
    98% {
      transform: translate(calc(-4em/16*.5), calc(3em/16*.5)) rotate(2.5deg);
    }
    0%, 100% {
      transform: translate(0, 0) rotate(0);
    }
  }
}

.u-zawazawa {
  opacity: 0;
  animation: zawazawa_animation 4.5s var(--ease-inout-sine) infinite;
}
@keyframes zawazawa_animation {
  0% {
    opacity: 0;
    translate: 0px 0px;
  }
  10% {
    translate: 2px 0px;
  }
  20% {
    opacity: 1;
    translate: 0px 1px;
  }
  30% {
    translate: 1px 1px;
  }
  40% {
    translate: -1px 0px;
    opacity: 1;
  }
  50% {
    translate: -2px 0px;
  }
  60% {
    translate: 0px 1px;
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    translate: 0px 0px;
    opacity: 0;
  }
}

@media (any-hover: hover) {
  .u-targetcharrotate__char {
    .u-targetcharrotate:is(:hover, :focus-visible) &amp; {
      animation-name: chara_rotate;
      animation-duration: .6s;
      animation-timing-function: var(--ease-inout-expo);
      animation-fill-mode: both;
      will-change: transform;
    }
  }
}
@keyframes chara_rotate {
  0% {
    transform: scaleX(1);
  }
  45% {
    transform: scaleX(0);
  }
  55% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@media (any-hover: hover) {
  .u-targetmoyamoya__body {
    .u-targetmoyamoya:is(:hover, :focus-visible) &amp; {
      animation: moyamoya_animation 1.2s var(--ease-out-sine) both;
      /* animation-iteration-count: 2; */
    }
  }
}
@keyframes moyamoya_animation {
  0% {
    translate: 0px 0;
    scale: .98;
    opacity: 0;
  }
  15% {
    translate: -1px 0;
  }
  45% {
    translate: 1px 0;
    scale: 1;
  }
  60% {
    translate: 0px 0;
    opacity: 1;
  }
  75% {
    translate: -1px 0;
  }
  90% {
    translate: 0px 0;
  }
  100% {
    translate: 0px 0;
  }
}

.u-markertarget {
  padding-bottom: .2em;
  background: linear-gradient(to bottom, transparent calc(100% - 2px), #878787 calc(100% - 2px));
  @media (any-hover: hover) {
    &amp;:is(:hover, :focus-visible) {
      background: linear-gradient(to bottom, transparent, transparent 25%, var(--yellow-color02) 25%, var(--yellow-color02) 80%, transparent 80%,  transparent calc(100% - 2px), #878787 calc(100% - 2px));
    }
  }
  @media screen and (max-width: 880px) {
    background: linear-gradient(to bottom, transparent, transparent 25%, var(--yellow-color02) 25%, var(--yellow-color02) 80%, transparent 80%,  transparent calc(100% - 1px), var(--main-color) calc(100% - 1px));
  }
}

.u-yellowlinelink {
  --base-fontsize: 16;
  --text-underline-offset: 10;
  --text-underline-color: #a3a3a3;
  --text-background-color: var(--yellow-color02);
  letter-spacing: .04em;
  text-decoration: underline;
  text-decoration-color: var(--text-underline-color);
  text-decoration-thickness: 2px;
  text-underline-offset: calc(var(--text-underline-offset) * 1em / var(--base-fontsize));
  line-height: 2.2;
  @media (any-hover: hover) {
    &amp;:hover {
      text-decoration: underline;
      text-decoration-color: var(--text-underline-color);
      text-decoration-thickness: 2px;
      text-underline-offset: calc(var(--text-underline-offset) * 1em / var(--base-fontsize));
    }
  }
  @media screen and (max-width: 880px) {
    --text-underline-offset: 9;
    line-height: 1.8;
  }
}
.u-yellowlinelink__txt {
  background-image: linear-gradient(to right, var(--text-background-color) 0%, var(--text-background-color) 100%);
  background-position: 0 80%;
  background-size: 100% 80%;
  background-repeat: repeat-x;
  line-height: 1;
}

.u-animateblock {
  opacity: 0;
}
@media (scripting: none) {
  .u-animateblock {
    opacity: 1;
  }
}

.u-vt {
  writing-mode: vertical-rl;
  font-family: var(--font-family-noyakuhan);
  /* font-feature-settings: 'pkna'; */
  font-feature-settings: initial;
  white-space: nowrap;
}

.u-hr {
  writing-mode: horizontal-tb;
  font-family: var(--font-family);
  font-feature-settings : "palt";
}

.u-fontnoto {
  font-family: YakuHanJP, "Noto Sans JP", serif;
  &amp;.is-medium {
    font-weight: 500;
  }
  &amp;.is-bold {
    font-weight: 700;
  }
  &amp;.is-black {
    font-weight: 900;
  }
  &amp;.is-italic {
    font-style: italic;
  }
}
.u-fontzenkaku {
  font-family: YakuHanJP, "Zen Kaku Gothic New", serif;
  font-weight: 700;
  &amp;.is-black {
    font-weight: 900;
  }
}
.u-fonten {
  font-family: "Kanit", serif;
  font-weight: 700;
  &amp;.is-italic {
    font-style: italic;
  }
  &amp;.is-medium {
    font-weight: 500;
  }
  &amp;.is-semibold {
    font-weight: 600;
  }
  &amp;.is-black {
    font-weight: 900;
  }
}

.u-graphbg {
  position: relative;
  &amp;::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/image/feature/fx/beginner/common/bg-graph.png');
    background-size: calc(52em/16) calc(54em/16);
    background-repeat: repeat;
    mix-blend-mode: multiply;
  }
  &amp;.is-small {
    &amp;::before {
      background-image: url('/image/feature/fx/beginner/common/bg-graph-small.png');
      background-size: calc(14em/16);
    }
  }
}

.u-objectfit {
  object-fit: cover;
  height: 100%;
}

/* .u-fsajust {
  --ajust-fontsize: 16;
  font-size: clamp(var(--ajust-fontsize) * 1em/16, var(--ajust-fontsize) / 1600*100vw, var(--ajust-fontsize) * 1.1em/16);
} */

.u-alternative:lang(ja) {
  position: fixed !important;
  inset-block-start: 0 !important;
  inset-inline-start: 0 !important;
  display: block !important;
  inline-size: 4px !important;
  block-size: 4px !important;
  contain: strict !important;
  pointer-events: none !important;
  opacity: 0 !important;
}</pre></body></html>