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

.cm-theater {
  position: relative;
  z-index: 2;
  &amp;::before,
  &amp;::after {
    content: '';
    position: absolute;
    top: 1px;
    z-index: 4;
    margin-top: calc((var(--vw) * 100 - 1100em/16)/300*125*-1);
    width: calc((var(--vw) * 100 - 1100em/16));
    height: auto;
    aspect-ratio: 300/125;
    background-size: cover;
  }
  &amp;::before {
    left: 0;
    background-image: url('/image/feature/fx/beginner/top/intro-top-radius-left-2x.png');
  }
  &amp;::after {
    right: 0;
    background-image: url('/image/feature/fx/beginner/top/intro-top-radius-right-2x.png');
  }
  @media screen and (min-width: 881px) and (max-width: 1024px) {
    &amp;::before,
    &amp;::after {
      margin-top: calc((var(--vw) * 100 - 1100em/16*.7)/300*125*-1);
      width: calc((var(--vw) * 100 - 1100em/16*.7));
    }
  }
  @media screen and (max-width: 880px) {
    &amp;::before,
    &amp;::after {
      margin-top: calc(-63em/16);
      width: calc(150em/16);
    }
  }
}
.cm-theater__bg {
  position: relative;
  z-index: 1;
  padding-top: calc(82em/16);
  background-color: #222222;
  overflow: hidden;
  @media screen and (min-width: 1025px) and (max-height: calc(780/1400*100vw)) {
    font-size: calc(16/780*100vh);
  }
  @media screen and (max-width: 880px) {
    font-size: 1em;
  }
  :where(.p-top__intro) &amp; {
    height: 100lvh;
    /* @media screen and (min-width: 1025px) and (max-height: calc(900/1400*100vw)) {
      height: calc(100lvh + 60/900*100vh);
    } */
    @media screen and (min-width: 881px) and (max-width: 1024px) and (min-height: calc(701/1024*100vw)) {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    @media screen and (max-width: 880px) {
      padding-top: 0;
      padding-bottom: calc(104/400*100%);
    }
  }
  :where(.p-top__outro) &amp; {
    @media screen and (max-width: 880px) {
      padding-top: calc(92em/16);
    }
  }
}
.cm-theater__bgBody {
  display: flex;
  justify-content: center;
  height: 100%;
  :where(.p-top__intro) &amp; {
    @media screen and (min-width: 881px) and (max-width: 1024px) and (min-height: calc(701/1024*100vw)) {
      height: auto;
    }
    @media screen and (max-width: 880px) {
      align-items: center;
    }
  }
}
.cm-theater__bgBodyWall {
  position: relative;
  flex: 1;
  width: calc((var(--vw) * 100 - 1100em/16)/2 - 10em/16);
  @media screen and (max-width: 1024px) {
    width: calc((var(--vw) * 100 - 1100em/16*.7)/2);
  }
  @media screen and (max-width: 880px) {
    width: calc(25em/16);
  }
  :where(.p-top__intro) &amp; {
    @media screen and (max-width: 880px) {
      display: flex;
    }
  }
  :where(.p-top__outro) &amp; {
    @media screen and (max-width: 880px) {
      margin-top: calc(-40em/16);
    }
  }
  &amp; .wall {
    position: absolute;
    top: 0;
    z-index: 1;
    margin: calc(-81em/16) 0 0;
    width: 100%;
    height: calc(781em/16);
    :where(.cm-theater__bgBodyWall.is-left) &amp; {
      right: calc(10em/16);
      background: linear-gradient(to left, rgb(255 255 255/.2), rgb(255 255 255/.6));
      clip-path: polygon(0 0, 100% calc(81em/16), 100% calc(700em/16), 0% 100%);
    }
    :where(.cm-theater__bgBodyWall.is-right) &amp; {
      left: calc(10em/16);
      background: linear-gradient(to right, rgb(255 255 255/.2), rgb(255 255 255/.6));
      clip-path: polygon(0% calc(81em/16), 100% 0, 100% 100%, 0 calc(700em/16));
    }
    @media screen and (min-width: 881px) and (max-width: 1024px) {
      height: calc(162em/16 + 619em/16*.7);
      :where(.cm-theater__bgBodyWall.is-left) &amp; {
        clip-path: polygon(0 0, 100% calc(81em/16), 100% calc(619em/16*.7 + 81em/16), 0% 100%);
      }
      :where(.cm-theater__bgBodyWall.is-right) &amp; {
        clip-path: polygon(0% calc(81em/16), 100% 0, 100% 100%, 0 calc(619em/16*.7 + 81em/16));
      }
    }
    @media screen and (max-width: 880px) {
      position: relative;
      top: auto;
      margin: 0;
      height: calc(275em/16);
      :where(.cm-theater__bgBodyWall.is-left) &amp; {
        right: calc(5em/16);
        clip-path: polygon(0 0, 100% calc(40em/16), 100% calc(235em/16), 0% 100%);
      }
      :where(.cm-theater__bgBodyWall.is-right) &amp; {
        left: calc(5em/16);
        clip-path: polygon(0% calc(40em/16), 100% 0, 100% 100%, 0 calc(235em/16));
      }
    }
  }
  &amp; .light {
    position: absolute;
    top: calc(64em/16);
    z-index: 2;
    :where(.cm-theater__bgBodyWall.is-left) &amp; {
      right: calc(56em/16);
    }
    :where(.cm-theater__bgBodyWall.is-right) &amp; {
      left: calc(56em/16);
    }
    @media screen and (max-width: 880px) {
      top: calc(143em/16);
      font-size: .5em;
      :where(.cm-theater__bgBodyWall.is-left) &amp; {
        right: calc(-7.5em/16);
      }
      :where(.cm-theater__bgBodyWall.is-right) &amp; {
        left: calc(-7.5em/16);
      }
    }
  }
  &amp; .light__body {
    position: relative;
    z-index: 1;
    width: calc(51em/16);
    height: calc(65em/16);
    :where(.cm-theater__bgBodyWall.is-left) &amp; {
      rotate: -45deg;
    }
    :where(.cm-theater__bgBodyWall.is-right) &amp; {
      rotate: 45deg;
      transform: scaleX(-1);
    }
  }
  &amp; .light__ray {
    position: absolute;
    top: calc(-22em/16);
    width: calc(770em/16);
    height: calc(725em/16);
    pointer-events: none;
    :where(.cm-theater__bgBodyWall.is-left) &amp; {
      left: calc(68em/16);
      /* opacity: 0.6; */
      rotate: -9deg;
    }
    :where(.cm-theater__bgBodyWall.is-right) &amp; {
      right: calc(68em/16);
      transform: scaleX(-1);
      /* opacity: 0.5; */
      rotate: 9deg;
    }
    .p-top__intro &amp; {
      opacity: 0;
    }
    @media screen and (max-width: 880px) {
      top: calc(-14em/16);
      width: calc(520em/16);
      height: calc(490em/16);
      :where(.cm-theater__bgBodyWall.is-left) &amp; {
        left: calc(48em/16);
        opacity: 0.6;
        rotate: -9deg;
      }
      :where(.cm-theater__bgBodyWall.is-right) &amp; {
        right: calc(48em/16);
        transform: scaleX(-1);
        opacity: 0.5;
        rotate: 9deg;
      }
    }
  }
  &amp; .kokky {
    position: absolute;
    top: calc(476em/16);
    z-index: 2;
    left: calc(-97em/16);
    width: calc(223em/16);
    opacity: 0;
    translate: -100% calc(15em/16);
    transform: scaleX(-1);
    transition: opacity .3s ease-in, translate .3s ease-in;
    .p-top__intro.is-second &amp; {
      opacity: 1;
      translate: 0% calc(0em/16);
      transition: opacity .5s var(--ease-out-circ), translate .5s var(--ease-out-circ);
    }
    @media screen and (max-width: 1024px) {
      top: calc(476em/16*.6);
    }
    @media screen and (max-width: 880px) {
      top: auto;
      bottom: calc(-98em/16);
      left: calc(-53em/16);
      width: calc(121em/16);
    }
  }
}
.cm-theater__bgBodyMain {
  flex-shrink: 0;
  width: calc(1100em/16);
  @media screen and (min-width: 881px) and (max-width: 1024px) {
    width: calc(1100em/16*.7);
  }
  @media screen and (max-width: 880px) {
    width: calc(340em/16);
  }
  &amp; .monitor {
    position: relative;
    &amp;::before,
    &amp;::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    &amp;::before {
      z-index: 1;
      background: linear-gradient(to bottom, var(--main-color), var(--main-color) 25%, transparent 25%, transparent);
      background-size: 1px 4px;
      background-repeat: repeat;
    }
    &amp;::after {
      background-color: var(--main-color);
      opacity: 0.3;
    }
    @media screen and (max-width: 880px) {
      &amp;::before {
        background-size: 1px 2px;
      }
    }
  }
  &amp; .monitor__body {
    position: relative;
    overflow: hidden;
    :where(.p-top__outro) &amp;{
      width: 100%;
      height: auto;
      aspect-ratio: 1100/619;
    }
  }
  &amp; .monitor__body-inner {
    position: relative;
    width: 100%;
    height: 100%;
    :where(.p-top__intro) &amp; {
      filter: blur(calc(30em/16));
      @media screen and (max-width: 880px) {
        filter: blur(calc(15em/16));
      }
    }
    :where(.p-top__outro) &amp;{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: auto;
      aspect-ratio: 1100/619;
      background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
      filter: blur(calc(5em/16));
      @media screen and (max-width: 880px) {
        filter: blur(calc(2.5em/16));
      }
    }
  }
  &amp; .monitor__bodyImg {
    width: calc(681/1100*100%);
  }
  &amp; .monitor__fukidashi {
    position: absolute;
    top: 0;
    bottom: calc(60em/16);
    left: 0;
    right: 0;
    z-index: 3;
    margin: auto;
    width: calc(440em/16);
    height: calc(425em/16);
    scale: 0;
    @media screen and (max-width: 880px) {
      top: 0;
      bottom: auto;
      margin-top: calc(-29/340*100%);
      width: calc(242em/16);
      height: calc(234em/16);
    }
  }
  &amp; .people {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: calc(-228/1100*100%) calc(-50/1100*100%) 0;
    @media screen and (max-width: 880px) {
      margin: calc(-40/340*100%) calc(-30/340*100%) 0;
    }
  }
  &amp; .people__img {
    --mb: 0;
    --w: 1;
    margin-bottom: calc(var(--mb)/1200*100%);
    width: calc(var(--w)/1200*100%);
    /* scale: 0 1; */
    &amp;.is-b {
      --mb: 73;
      --w: 169;
    }
    &amp;.is-a {
      --mb: 83;
      --w: 138;
    }
    &amp;.is-c {
      --mb: 73;
      --w: 131;
    }
    &amp;.is-kokky {
      --mb: 0;
      --w: 256;
      margin-left: calc(13/1200*100%);
      margin-right: calc(13/1200*100%);
    }
    &amp;.is-e {
      --mb: 73;
      --w: 134;
    }
    &amp;.is-f {
      --mb: 83;
      --w: 142;
    }
    &amp;.is-d {
      --mb: 73;
      --w: 144;
    }
    @media screen and (max-width: 880px) {
      position: relative;
      width: calc(var(--w)/400*100%*.5);
      &amp;.is-b {
        --mb: 72;
        margin-bottom: calc(var(--mb)/400*100%);
      }
      &amp;.is-a {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        margin: auto auto calc(25/400*100%) calc(45/400*100%);
      }
      &amp;.is-c {
        position: absolute;
        bottom: 0;
        left: 0;
        margin: auto auto calc(60/400*100%) calc(80/400*100%);
      }
      &amp;.is-kokky {
        margin: 0 calc(13/400*100%) 0 0;
      }
      &amp;.is-e {
        position: absolute;
        bottom: 0;
        right: 0;
        margin: auto calc(76/400*100%) calc(74/400*100%) auto;
      }
      &amp;.is-f {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 2;
        margin: auto calc(38/400*100%) calc(28/400*100%) auto;
      }
      &amp;.is-d {
        --mb: 58;
        margin-bottom: calc(var(--mb)/400*100%);
      }
    }
  }
  &amp; .seat {
    left: 0;
    right: 0;
    z-index: 100;
    :where(.p-top__intro) &amp; {
      position: absolute;
      bottom: 0;
      margin: 0 calc(50% - var(--vw) * 50);
      @media screen and (min-width: 1025px) and (max-height: calc(880/1400*100vw)) {
        top: calc(600em/16 + 60/880*100vh);
      }
      @media screen and (min-width: 881px) and (max-width: 1024px) {
        top: auto;
      }
      @media screen and (min-width: 881px) and (max-width: 1024px) and (max-height: calc(630/1024*100vw)) {
        top: calc(587em/16*.7 + 81em/16);
      }
      @media screen and (min-width: 881px) and (max-width: 950px) and (max-height: calc(670/950*100vw)) {
        top: calc(587em/16*.7 + 81em/16);
      }
      @media screen and (max-width: 880px) {
        top: auto;
      }
      @media screen and (max-width: 768px) and (max-height: calc(800/768*100vw)) {
        top: calc(360em/16*.9);
      }
      @media screen and (max-width: 768px) and (max-height: calc(700/768*100vw)) {
        top: calc(360em/16*.8);
      }
    }
    :where(.p-top__outro) &amp; {
      position: relative;
      margin: calc(-43/1100*100%) calc(50% - var(--vw) * 50) 0;
    }
  }
  &amp; .seat__img {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline: auto;
    width: min(calc(1400em/16), 100%);
    :where(.p-top__outro) &amp; {
      @media screen and (max-width: 880px) {
        margin: 0 calc(-150/400*100%);
        width: calc(700/400*100%);
      }
    }
  }
  &amp; .seat__imgLine {
    --seat-w: 1400;
    width: calc(var(--seat-w)/1400*100%);
    position: relative;
    &amp;:nth-child(1) {
      --seat-w: 1120;
      z-index: 1;
      /* width: calc(1120/1400*100%); */
    }
    &amp;:nth-child(2) {
      --seat-w: 1265;
      z-index: 2;
      margin-top: calc(-72/1400*100%);
    }
    &amp;:nth-child(3) {
      z-index: 3;
      margin-top: calc(-72/1400*100%);
      width: 100%;
    }
    &amp; .seat__imgLineImg {
      --mt: 0;
      --ml: 0;
      --mr: 0;
      --w: 1;
      position: absolute;
      top: 0;
      margin: calc(var(--mt)/var(--seat-w)*100%) calc(var(--mr)/var(--seat-w)*100%) 0 calc(var(--ml)/var(--seat-w)*100%);
      :where(.p-top__outro) &amp;{
        width: calc(var(--w)/var(--seat-w)*100%);
        transform-origin: center bottom;
        &amp;.is-fun {
          --mt: -36;
          --mr: 406;
          --w: 185;
          right: 0;
          animation-name: emo_motion_fine;
          animation-duration: 11s;
          animation-timing-function: var(--ease-inout-sine);
          animation-iteration-count: infinite;
          animation-direction: reverse;
        }
        &amp;.is-happy {
          --mt: -68;
          --mr: 302;
          --w: 95;
          right: 0;
          animation-name: emo_motion_fine;
          animation-duration: 16s;
          animation-timing-function: var(--ease-inout-sine);
          animation-iteration-count: infinite;
          animation-delay: .3s;
        }
        &amp;.is-sad {
          --mt: -32;
          --ml: 284;
          --w: 135;
          left: 0;
          animation-name: emo_motion_cool;
          animation-duration: 9s;
          animation-timing-function: var(--ease-inout-sine);
          animation-iteration-count: infinite;
        }
        &amp;.is-worry {
          --mt: -32;
          --ml: 426;
          --w: 131;
          left: 0;
          animation-name: emo_motion_cool;
          animation-duration: 7.5s;
          animation-timing-function: var(--ease-inout-sine);
          animation-iteration-count: infinite;
          animation-delay: 1.2s;
          animation-direction: reverse;
        }
        &amp;.is-calm {
          --mt: -44;
          --mr: 418;
          --w: 145;
          right: 0;
          animation-name: emo_motion_cool;
          animation-duration: 8s;
          animation-timing-function: var(--ease-inout-sine);
          animation-iteration-count: infinite;
          animation-delay: .6s;
        }
        &amp;.is-hope {
          --mt: -78;
          --mr: 285 ;
          --w: 142;
          right: 0;
          animation-name: emo_motion_fine;
          animation-duration: 15.2s;
          animation-timing-function: var(--ease-inout-sine);
          animation-iteration-count: infinite;
          animation-delay: .5s;
          animation-direction: reverse;
        }
      }
    }
  }
  &amp; .seat__imgLineBody {
    position: relative;
    z-index: 1;
  }
  &amp; .seat__txt {
    opacity: 1;
    transition: opacity var(--transition);
    .p-top__intro.is-second &amp; {
      opacity: 0;
    }
  }
  &amp; .seat__txtLine {
    --fs: 16;
    position: absolute;
    color: #fff;
    font-size: calc(var(--fs) * 1em/16);
    @media screen and (min-width: 1400px) {
      font-size: calc(var(--fs)/1400*100vw);
    }
    @media screen and (max-width: 880px) {
      font-size: calc(var(--fs) * .8em/16);
    }
    &amp;:where(:nth-child(1)) {
      --fs: 18;
      top: calc(-13em/var(--fs));
      left: calc(234em/var(--fs));
      animation-delay: 1s;
    }
    &amp;:where(:nth-child(2)) {
      --fs: 24;
      top: calc(68em/var(--fs));
      left: calc(422em/var(--fs));
      animation-duration: 5s;
    }
    &amp;:where(:nth-child(3)) {
      --fs: 22;
      top: calc(-38em/var(--fs));
      right: calc(216em/var(--fs));
      animation-delay: 2s;
      animation-duration: 6s;
    }
    &amp;:where(:nth-child(4)) {
      --fs: 20;
      top: calc(76em/var(--fs));
      right: calc(376em/var(--fs));
    }
    @media screen and (max-width: 880px) {
      &amp;:where(:nth-child(1)) {
        top: calc(30em/var(--fs));
        left: auto;
        right: calc(30em/var(--fs));
      }
      &amp;:where(:nth-child(3)) {
        top: calc(-18em/var(--fs));
      }
      &amp;:where(:nth-child(2)) {
        display: none;
      }
      &amp;:where(:nth-child(4)) {
        top: calc(52em/var(--fs));
      }
    }
  }
}
@keyframes emo_motion_fine {
  0% {
    rotate: 0deg;
  }
  12.5% {
    rotate: -12deg;
  }
  25% {
    rotate: 0deg;
  }
  37.5% {
    rotate: 12deg;
  }
  40% {
    translate: 0 0;
  }
  41.25% {
    translate: 0 calc(-20em/16);
  }
  42.5% {
    translate: 0 0;
  }
  43.75% {
    translate: 0 calc(-20em/16);
  }
  45% {
    translate: 0 0;
  }
  50% {
    rotate: 0deg;
  }
  62.5% {
    rotate: -12deg;
  }
  75% {
    rotate: 0deg;
  }
  82.5% {
    translate: 0 0;
  }
  83.375% {
    translate: 0 calc(-20em/16);
  }
  85% {
    translate: 0 0;
  }
  87.5% {
    rotate: 12deg;
  }
  100% {
    rotate: 0deg;
  }
}
@keyframes emo_motion_cool {
  0% {
    translate: 0 0;
  }
  2.5% {
    translate: 0 calc(-5em/16);
  }
  5% {
    translate: 0 0;
  }
  7.5% {
    translate: 0 calc(-5em/16);
  }
  10% {
    translate: 0 0;
  }
  50% {
    rotate: 0deg;
  }
  75% {
    rotate: 5deg;
  }
  90% {
    rotate: 0deg;
  }
}</pre></body></html>