@keyframes bound {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  12.5% {
    transform: scale(1.05);
  }
  25% {
    transform: scale(0.97);
    opacity: 1;
  }
  37.5% {
    transform: scale(1.04);
  }
  50% {
    transform: scale(0.98);
  }
  62.5% {
    transform: scale(1.03);
  }
  75% {
    transform: scale(0.99);
  }
  87.5% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
@media screen and (min-width: 0px) {
  .pin.orange .main {
    fill: #ffaf66;
  }
  .pin.orange .shadow {
    fill: #f68c2c;
  }
  .pin.yellow .main {
    fill: #ffe83e;
  }
  .pin.yellow .shadow {
    fill: #ffc747;
  }
  .pin.red .main {
    fill: #f98c8c;
  }
  .pin.red .shadow {
    fill: #ef6464;
  }
  .pin.blue .main {
    fill: #9ee4ef;
  }
  .pin.blue .shadow {
    fill: #6ad0e1;
  }
  .pin.pink .main {
    fill: #fdc1e8;
  }
  .pin.pink .shadow {
    fill: #f8a2db;
  }
  .pin.purple .main {
    fill: #c0a9f7;
  }
  .pin.purple .shadow {
    fill: #aa89fb;
  }
  .star.orange .body {
    fill: #ffc793;
  }
  .star.yellow .body {
    fill: #ffef77;
  }
  .star.red .body {
    fill: #fcbdbd;
  }
  .star.blue .body {
    fill: #c6eef5;
  }
  .star.pink .body {
    fill: #fdc6ea;
  }
  .star.purple .body {
    fill: #d3c2f8;
  }
  #m_movie .star.orange .body {
    fill: #ffaf66;
  }
  #m_movie .star.yellow .body {
    fill: #ffe83e;
  }
  #m_movie .star.red .body {
    fill: #f98c8c;
  }
  #m_movie .star.blue .body {
    fill: #9ee4ef;
  }
  #m_movie .star.pink .body {
    fill: #fdc1e8;
  }
  #m_movie .star.purple .body {
    fill: #c0a9f7;
  }
  .road.orange {
    background: linear-gradient(0deg, rgb(255, 199, 147) 0%, rgba(255, 199, 147, 0.8) 30%, rgba(255, 199, 147, 0) 100%);
  }
  .road.yellow {
    background: linear-gradient(0deg, rgb(255, 239, 119) 0%, rgba(255, 239, 119, 0.8) 30%, rgba(255, 239, 119, 0) 100%);
  }
  .road.red {
    background: linear-gradient(0deg, rgb(252, 188, 187) 0%, rgba(252, 188, 187, 0.8) 30%, rgba(252, 188, 187, 0) 100%);
  }
  .road.blue {
    background: linear-gradient(0deg, rgb(203, 240, 245) 0%, rgba(203, 240, 245, 0.8) 30%, rgba(203, 240, 245, 0) 100%);
  }
  .road.pink {
    background: linear-gradient(0deg, rgb(253, 198, 234) 0%, rgba(253, 198, 234, 0.8) 30%, rgba(253, 198, 234, 0) 100%);
  }
  .road.purple {
    background: linear-gradient(0deg, rgb(211, 195, 249) 0%, rgba(211, 195, 249, 0.8) 30%, rgba(211, 195, 249, 0) 100%);
  }
  body {
    position: relative;
    overflow: hidden;
  }
  body #m_scroller {
    width: 100%;
    height: 100vh;
    position: fixed;
    overflow-y: scroll;
    z-index: 9001;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  body #m_scroller::-webkit-scrollbar {
    display: none;
  }
  body #m_upper,
  body #downer {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }
  body #m_upper {
    height: 200vh;
    /* pointer-events: none;*/
  }
  body #m_downer {
    pointer-events: none;
    position: relative;
  }
  body #m_downer .page {
    height: 100vh;
  }
  body #m_particles {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  body #m_particles canvas {
    width: 100%;
    height: 100%;
  }
  body #m_fixedStage {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 9002;
  }
  .portrait #m_movie .logoWrapper {
    transform: scale(2);
  }
  #m_movie {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(254, 220, 211) 100%);
    z-index: 2001;
    opacity: 1;
    transition: opacity 100ms;
  }
  #m_movie.complete {
    opacity: 0;
    transition: opacity 3s;
  }
  #m_movie .logoWrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25rem;
    margin-left: -25rem;
    transform: scale(1);
  }
  #m_movie #m_starContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scale(0.1);
    opacity: 0;
    transition: transform 4s, opacity 1s;
  }
  #m_movie #m_starContainer .star {
    transition: width 4s;
    height: 5rem;
    width: 5rem;
    opacity: 1;
    position: absolute;
    right: 50vw;
    left: auto;
    top: calc(50vh - 2.5rem);
    transform-origin: center right;
  }
  #m_movie #m_starContainer .star svg {
    width: 5rem;
    height: 5rem;
  }
  #m_movie #m_starContainer .star.purple {
    transform: rotate(60deg);
  }
  #m_movie #m_starContainer .star.purple svg {
    transform: rotate(-60deg);
  }
  #m_movie #m_starContainer .star.orange {
    transform: rotate(120deg);
  }
  #m_movie #m_starContainer .star.orange svg {
    transform: rotate(-120deg);
  }
  #m_movie #m_starContainer .star.yellow {
    transform: rotate(180deg);
  }
  #m_movie #m_starContainer .star.yellow svg {
    transform: rotate(180deg);
  }
  #m_movie #m_starContainer .star.pink {
    transform: rotate(2400deg);
  }
  #m_movie #m_starContainer .star.pink svg {
    transform: rotate(-2400deg);
  }
  #m_movie #m_starContainer .star.red {
    transform: rotate(300deg);
  }
  #m_movie #m_starContainer .star.red svg {
    transform: rotate(-300deg);
  }
  #m_movie #m_starContainer2 {
    position: absolute;
    top: 100vh;
    left: calc(50% - 60rem);
    width: 120rem;
    display: flex;
    justify-content: space-between;
    transition: all 0.1s;
  }
  #m_movie #m_starContainer2 > div {
    width: 12%;
    height: 150vh;
    position: relative;
  }
  #m_movie #m_starContainer2 > div .star {
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 1;
  }
  #m_movie #m_starContainer2 > div .bg {
    width: 100%;
    height: 100%;
    margin-top: 100%;
    transform: scaleX(0.1);
    transition: all 0.1s;
  }
  #m_movie.sn01 .logoWrapper {
    transition: all 1s;
    transform: scale(0.2);
    opacity: 0;
  }
  #m_movie.sn02 #m_starContainer {
    transform: scale(10);
    opacity: 1;
  }
  #m_movie.sn02 #m_starContainer .star {
    width: 30rem;
  }
  #m_movie.sn02 .logoWrapper {
    transition: transform 4s, opacity 1s;
    transform: scale(10);
    opacity: 1;
  }
  #m_movie.sn02 .logoWrapper .roadto {
    display: none;
  }
  #m_movie.sn02.sn03 .logoWrapper {
    transition: all 1s;
    opacity: 0;
  }
  #m_movie.sn02.sn03 .logoWrapper .roadto {
    display: none;
  }
  #m_movie.sn03 #m_starContainer2 {
    top: -50vh;
    transition: all 4s;
  }
  #m_movie.sn03 #m_starContainer2 > div .bg {
    transition: all 4s;
    transform: scaleX(1);
  }
  window,
  body {
    margin: 0;
    padding: 0;
  }
  html {
    font-size: 10px;
  }
  a {
    text-decoration: none;
    color: #333;
  }
  #m_pin0 {
    opacity: 0;
  }
  #m_debugger {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    font-size: 20px;
    z-index: 10000;
    display: none;
  }
  #m_kv iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  #m_main {
    top: 0;
    left: 0;
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(254, 220, 211) 100%);
  }
  #m_assets {
    display: none;
  }
  .page {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
  }
  #m_main {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #m_main * {
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
  }
  #m_main .logoWrapper {
    width: 50rem;
    height: 50rem;
    position: relative;
  }
  #m_main .logoWrapper > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
  }
  #m_main .logoWrapper .logo {
    background-image: url("../../images/logo.webp");
    z-index: 711;
  }
  #m_main .logoWrapper .tobe {
    background-image: url("../../images/roadto.webp");
  }
  #m_main .logoWrapper .roadto {
    background-image: url("../../images/roadto.webp");
  }
  #m_main .logoWrapper .commingsoon {
    scale: 0;
    opacity: 0;
    background-image: url("../../images/commingsoon.webp");
    z-index: 710;
  }
  #m_main #m_cakes {
    width: 100%;
    height: 100dvh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 703;
    opacity: 0;
    transition: all 2s;
  }
  #m_main #m_cakes .chars {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100rem;
    height: 20rem;
    left: calc(50% - 50rem);
    bottom: 150px;
  }
  #m_main #m_cakes .chars > div {
    height: 100%;
    width: 15%;
    background-size: auto 100%;
    background-position: center;
  }
  #m_main #m_cakes .orange {
    background-image: url("../../images/cake_orange.webp");
  }
  #m_main #m_cakes .yellow {
    background-image: url("../../images/cake_yellow.webp");
  }
  #m_main #m_cakes .red {
    background-image: url("../../images/cake_red.webp");
  }
  #m_main #m_cakes .blue {
    background-image: url("../../images/cake_blue.webp");
  }
  #m_main #m_cakes .pink {
    background-image: url("../../images/cake_pink.webp");
  }
  #m_main #m_cakes .purple {
    background-image: url("../../images/cake_purple.webp");
  }
  #m_main #m_ending {
    z-index: 792;
  }
  #m_main #m_footer {
    z-index: 701;
  }
  #m_main #m_ending,
  #m_main #m_footer {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  #m_main #m_ending .logoWrapper,
  #m_main #m_footer .logoWrapper {
    will-change: transform;
    position: absolute;
    left: 50%;
    top: 30%;
    margin-top: -25rem;
    margin-left: -25rem;
    transform: scale(0.01);
    transition: all 2s;
    opacity: 0;
    z-index: 202;
  }
  #m_main #m_ending .logoWrapper .tobe,
  #m_main #m_footer .logoWrapper .tobe {
    transform: rotate(-30deg);
    opacity: 0;
    transition-property: all;
    transition: all 2s;
    transition-delay: 2s;
  }
  #m_main #m_ending .logoWrapper .logo,
  #m_main #m_footer .logoWrapper .logo {
    background-image: url("../../images/logo.webp");
  }
  #m_main #m_ending .footer,
  #m_main #m_footer .footer {
    pointer-events: auto;
    width: 100%;
    height: 138px;
    position: absolute;
    left: 0;
    bottom: -140px;
    background: linear-gradient(90deg, #fd719b 0%, #fd9371 106.82%);
    transition: all 1000ms;
    transition-delay: 200ms;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  #m_main #m_ending .footer .icons,
  #m_main #m_footer .footer .icons {
    display: flex;
    justify-content: center;
  }
  #m_main #m_ending .footer .icons a,
  #m_main #m_footer .footer .icons a {
    display: flex;
    justify-content: center;
    display: block;
    margin: 10px;
  }
  #m_main #m_ending .footer .icons a img,
  #m_main #m_footer .footer .icons a img {
    width: 48px;
    height: 48px;
  }
  #m_main #m_ending .footer .copyright,
  #m_main #m_footer .footer .copyright {
    padding-top: 5px;
    color: #fff;
    font-size: 13px;
    text-align: center;
  }
  #m_main.scene-ending #m_cakes {
    opacity: 1;
  }
  #m_main.scene-ending #m_ending .logoWrapper,
  #m_main.scene-ending #m_footer .logoWrapper {
    position: absolute;
    opacity: 1;
    transform: scale(1);
    z-index: 190;
  }
  #m_main.scene-ending #m_ending .logoWrapper .tobe,
  #m_main.scene-ending #m_footer .logoWrapper .tobe {
    opacity: 1;
    transform: rotate(0deg);
  }
  #m_main.scene-ending #m_ending .logoWrapper .commingsoon,
  #m_main.scene-ending #m_footer .logoWrapper .commingsoon {
    scale: 1;
    opacity: 1;
    transition: all 2s;
    transition-delay: 2s;
  }
  #m_main.scene-ending #m_ending .footer,
  #m_main.scene-ending #m_footer .footer {
    bottom: 0px;
    transition: all 1s;
    transition-delay: 200ms;
  }
  #m_main #m_mask {
    position: absolute;
    width: 100%;
    height: 100dvh;
  }
  #m_main #m_mask .mask {
    margin-top: 15rem;
    margin-left: 30rem;
    width: 100rem;
    height: 60rem;
    background-image: url("../../images/mask.webp");
    background-size: 100% 100%;
    z-index: 199;
    opacity: 0.8;
  }
  #m_main #m_sliders {
    aspect-ratio: 16/9;
    position: relative;
  }
  #m_main #m_sliders #m_stage2d,
  #m_main #m_sliders #m_stage3d {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 300;
    transition: transform 1s ease-out, filter 1s ease-in-out, opacity 1s ease-in-out;
  }
  #m_main #m_sliders #m_stage2d.introNotDone,
  #m_main #m_sliders #m_stage3d.introNotDone {
    transition: transform 9s ease-out, filter 5s ease-in-out, opacity 3s ease-in-out;
  }
  #m_main #m_sliders #m_stage2d.last,
  #m_main #m_sliders #m_stage3d.last {
    transform: translateX(0px) translateY(15rem) translateZ(5rem) rotateX(40deg) rotateY(0deg) rotateZ(0deg) scale(1.5);
    transition: transform 2s;
  }
  #m_main #m_sliders #m_stage2d.first,
  #m_main #m_sliders #m_stage3d.first {
    transform: translateX(0px) translateY(55rem) translateZ(5rem) rotateX(40deg) rotateY(0deg) rotateZ(0deg) scale(8);
    filter: blur(5rem);
    transition: transform 1s, filter 1s, opacity 10s;
    opacity: 0;
  }
  #m_main #m_sliders #m_stage2d {
    transition: all 5s;
  }
  #m_main #m_sliders #m_stage2d.first2 {
    opacity: 0;
    filter: blur(2rem);
  }
  #m_main #m_sliders #m_stage2d .star {
    z-index: 500;
  }
  #m_main #m_sliders #m_stage3d {
    z-index: 200;
    perspective: 5rem;
    perspective-origin: 50% 50%;
  }
  #m_main #m_sliders #m_stage3d #m_dammy {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 30px;
    left: 50px;
    background-color: #f00;
    display: none;
  }
  #m_main #m_panel {
    display: none;
    position: absolute;
    margin-top: 10rem;
    width: 80rem;
    height: 45rem;
    background-color: rgba(255, 255, 255, 0.8);
    border: 6px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
    border-image: linear-gradient(90deg, #d7d1a0 0%, #cdbfa3 35.58%, #d7d1a0 56.73%, #fff7af 74.52%, #d7d1a0 100%);
    border-image-slice: 1;
    box-shadow: 5px 5px 20px -5px #777777;
    opacity: 0;
    transition: all 3s;
  }
  #m_main #m_panel a {
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #m_main #m_panel.bound {
    opacity: 1;
  }
  #m_main #m_panel .panelContent {
    pointer-events: auto;
    width: 64rem;
    height: 36rem;
    align-items: center;
    flex-flow: column;
    justify-content: space-between;
    display: none;
    cursor: pointer;
  }
  #m_main #m_panel .panelContent.on {
    display: flex;
  }
  #m_main #m_panel .image {
    height: 25rem;
    width: 100%;
    text-align: center;
  }
  #m_main #m_panel .image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  #m_main #m_panel .information {
    height: 10rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  #m_main #m_panel .heading {
    width: 100%;
    color: rgb(238, 67, 136);
    font-size: 1.6rem;
    font-weight: 700;
  }
  #m_main #m_panel .text {
    width: 100%;
    font-size: 1.2rem;
  }
  #m_main #m_floor {
    top: 45rem;
    left: 24rem;
    position: absolute;
    width: 112rem;
    height: 45rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateX(0px) translateY(0rem) translateZ(-2rem) rotateX(30deg) rotateY(0deg) rotateZ(0deg);
    transform-origin: 50% 50%;
  }
  #m_main #m_floor .road {
    position: relative;
    width: 10%;
    height: 100%;
  }
  #m_main #m_floor .road .end {
    top: 0;
  }
  #m_main #m_floor .road .checker {
    width: 100%;
    position: absolute;
    height: 20px;
    font-size: 0.8vw;
  }
  #m_main #m_floor .road #m_checker01 {
    top: 50px;
    background-color: #f00;
  }
  #m_main #m_floor .road #m_checker02 {
    bottom: 50px;
    background-color: #0f0;
  }
  #m_main #m_floor .road .pointer {
    opacity: 0;
    width: 100%;
    position: absolute;
    height: 1px;
    background-color: #f00;
  }
  #m_main #m_floor .road .pointer .center {
    width: 1px;
    height: 1px;
    margin: 0 auto;
    background-color: #000;
  }
  #m_main #m_floor .road #m_pointer01 {
    bottom: 200px;
  }
  #m_main #m_floor .road #m_pointer02 {
    top: 50px;
  }
  #m_main #m_particles > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    mix-blend-mode: overlay;
    opacity: 0;
    transition: all 1000ms ease-out;
  }
  #m_main #m_particles > div.show {
    opacity: 1;
  }
  #m_main #m_particles #kirakira01 {
    background-image: url("../../images/kirakira01.webp");
  }
  #m_main #m_particles #kirakira02 {
    background-image: url("../../images/kirakira02.webp");
  }
  #m_main #m_particles #kirakira03 {
    background-image: url("../../images/kirakira03.webp");
  }
  #m_main #m_particles #bg01 {
    background-image: url("../../images/bg01.webp");
  }
  #m_main #m_particles #bg02 {
    background-image: url("../../images/bg02.webp");
  }
  #m_main #m_particles #bg03 {
    background-image: url("../../images/bg03.webp");
  }
  #m_main.portrait #m_main,
  #m_main.portrait #m_kv {
    height: 100dvh;
  }
  #m_main.portrait #m_mask .mask {
    margin-top: 35vh;
    margin-left: 30rem;
    width: 100rem;
    height: 30vh;
  }
  #m_main.portrait #m_sliders {
    width: 100%;
    height: 100dvh;
    aspect-ratio: auto;
  }
  #m_main.portrait #m_sliders #m_stage3d.first {
    transform: translateX(0px) translateY(55rem) translateZ(5rem) rotateX(40deg) rotateY(0deg) rotateZ(0deg) scale(3);
  }
  #m_main.portrait #m_sliders #m_stage3d.last {
    transform: translateX(0px) translateY(35rem) translateZ(5rem) rotateX(40deg) rotateY(0deg) rotateZ(0deg) scale(1.5);
  }
  #m_main.portrait #m_panel {
    width: 90%;
    height: 70%;
    margin-top: 25%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
  }
  #m_main.portrait #m_panel .panelContent {
    width: 80%;
    height: 80%;
  }
  #m_main.portrait #m_panel .image {
    width: 100%;
    height: 70%;
  }
  #m_main.portrait #m_panel .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  #m_main.portrait #m_panel .information {
    height: 25%;
  }
  #m_main.portrait #m_panel .heading {
    font-size: 5rem;
  }
  #m_main.portrait #m_panel .text {
    font-size: 5rem;
  }
  #m_main.portrait #m_floor {
    top: 50%;
    height: 125rem;
  }
  #m_main.portrait #m_floor .road {
    width: 12%;
  }
  #m_main.portrait #m_ending .logoWrapper,
  #m_main.portrait #m_footer .logoWrapper {
    top: 36%;
  }
  #m_main.portrait #m_ending .footer .icons a,
  #m_main.portrait #m_footer .footer .icons a {
    margin: 1vw;
  }
  #m_main.portrait #m_ending .footer .icons a img,
  #m_main.portrait #m_footer .footer .icons a img {
    width: 8.5vw;
    height: 8.5vw;
  }
  #m_main.portrait #m_ending .footer .copyright,
  #m_main.portrait #m_footer .footer .copyright {
    padding-top: 5px;
    color: #fff;
    font-size: 13px;
    text-align: center;
  }
  #m_main.portrait #m_cakes > div {
    width: 90%;
    height: 12vh;
    left: 5%;
    bottom: 160px;
  }
  #m_main.portrait.scene-ending #m_ending .logoWrapper,
  #m_main.portrait.scene-ending #m_footer .logoWrapper {
    transform: scale(2.6);
  }
  #m_main.portrait.scene-ending #m_ending .footer,
  #m_main.portrait.scene-ending #m_footer .footer {
    bottom: 0;
  }
  .pin {
    position: absolute;
    width: 50.5px;
    height: 107.1px;
    top: 0;
    left: 0;
    transform-origin: top left;
  }
  .pin svg {
    width: 100%;
  }
  .star {
    position: absolute;
    width: 51px;
    height: 51px;
    top: 0;
    left: 0;
    transform-origin: top left;
    opacity: 0.6;
  }
  .star svg {
    width: 100%;
  }
  .dammyButton {
    width: 20px;
    height: 20px;
    position: fixed;
    background-color: #000;
    top: 10vh;
    z-index: 10000;
  }
}
@media screen and (min-width: 1900px) {
  #m_main #m_sliders {
    width: 1900px;
  }
}

/*# sourceMappingURL=style.css.map */