@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=M+PLUS+Rounded+1c&display=swap");
body {
  font-size: 16px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  line-height: 1.75em; }

input,
button {
  font-size: 16px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  line-height: 1.75em;
  color: #000; }

.min {
  font-size: .85em;
  line-height: 1.75em; }

.bld {
  font-weight: bold; }

.strong {
  font-size: 1.2em;
  font-weight: bold; }

.card-head {
  font-size: 1.2em;
  font-weight: bold; }

.hint-head {
  font-size: 1.2em; }

.hint-item {
  font-weight: bold; }

.dela-head {
  font-size: 3em;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 500;
  line-height: 1; }

.dela-box .min {
  font-size: 15px;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 500;
  line-height: 1; }

.sche-head {
  font-size: 1.2em;
  font-weight: bold; }

.sche-text {
  font-size: 1.2em;
  font-weight: bold; }

.time-text {
  font-size: 1.4em;
  font-weight: bold; }

.buy-head {
  font-size: 1.2em;
  font-weight: bold; }

.buy-btn {
  font-size: 1.2em;
  font-weight: bold; }

.goods-head {
  font-weight: bold;
  line-height: 1.5; }

.goods-price {
  font-size: 1.2em;
  font-weight: bold; }

.copyright {
  font-size: 10px; }

#menu {
  font-size: 1.2em;
  font-weight: bold; }

.close-btn {
  letter-spacing: 2px;
  font-size: 1.2em;
  font-weight: bold; }

@media screen and (max-width: 900px) {
  body {
    font-size: 15px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
    line-height: 1.75em; } }
@media screen and (max-width: 540px) {
  body {
    font-size: 13.5px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
    line-height: 1.75em; }

  #goods .goods-flex .goods-head {
    font-size: 11.5px; } }
html,
body {
  width: 100%;
  overflow-x: hidden; }

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-10px); } }
@keyframes hand-bounce {
  0% {
    transform: translateY(0); }
  20% {
    transform: translateY(-5px); }
  40% {
    transform: translateY(-5px); }
  100% {
    transform: translateY(0); } }
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.fade {
  opacity: 0; }

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

a {
  transition-duration: .3s; }
  a:hover {
    opacity: .8; }

.text-link {
  text-decoration: underline; }

img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; }

section {
  padding: 80px 0; }

.head-box {
  max-width: 450px;
  margin: 1em auto 40px;
  text-align: center; }

.inner-wrap {
  padding: 0 1em;
  width: calc(100% - 2em);
  margin: 0 auto; }

.bg-red {
  background: #e74d63;
  color: #fff; }

.bg-ya {
  background: #fccc00; }

.menu-btn {
  position: fixed;
  right: 0;
  top: 1em;
  z-index: 10;
  max-width: 80px;
  cursor: pointer;
  transition-duration: .5s; }
  .menu-btn.menu-active {
    right: -90px; }

.menu-close-btn {
  position: fixed;
  right: -90px;
  top: 1em;
  z-index: 12;
  max-width: 80px;
  cursor: pointer;
  transition-duration: .5s; }
  .menu-close-btn.menu-active {
    right: 0; }

#menu {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #e74d63;
  z-index: 11;
  left: 120%;
  top: 0;
  transition-duration: 1s; }
  #menu.menu-active {
    left: 0; }
  #menu .menu-in {
    background: #fff;
    border-radius: 12px;
    position: absolute;
    left: 1em;
    top: 1em;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
    display: flex;
    align-items: center;
    justify-content: center; }
  #menu ul {
    width: 100%; }
  #menu li {
    padding-bottom: .5em;
    border-bottom: solid 1px #e74d63;
    width: 90%;
    margin: .5em auto 0; }
    #menu li a {
      display: flex;
      align-items: center;
      width: calc(100% - 2em);
      padding: .5em 1em;
      color: #e74d63; }
      #menu li a:before {
        content: "";
        width: 1.5em;
        height: 1.5em;
        background: url(../images/menu-ico.svg);
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        margin-right: .5em; }

.sns-menu {
  position: fixed;
  right: 0;
  bottom: 210px;
  max-width: 50px;
  z-index: 5;
  display: none; }
  .sns-menu a {
    display: block;
    margin-top: -10px; }
  .sns-menu .ico-line {
    margin-top: 0; }

.buy-link {
  max-width: 55px;
  position: fixed;
  right: 0;
  bottom: 1em;
  z-index: 5;
  display: none; }

#main-v {
  position: relative; }
  #main-v .main-v-box {
    position: relative;
    background-color: #62B5E6;
    z-index: 0; }
    #main-v .main-v-box::after {
      content: "";
      width: 100%;
      height: 100%;
      background: linear-gradient(#fff 5%, rgba(88, 162, 217, 0.3) 30%);
      z-index: -1;
      position: absolute;
      left: 0;
      top: 0;
      mix-blend-mode: color-burn; }
    #main-v .main-v-box .nmg-logo {
      position: absolute;
      width: 60px;
      left: 1em;
      top: 1em; }
    #main-v .main-v-box .main-vis {
      width: 100%;
      margin-left: auto;
      position: relative;
      z-index: 3;
      padding-top: 200px; }
    #main-v .main-v-box .main-block {
      max-width: 1300px;
      margin-left: auto; }
    #main-v .main-v-box .main-logo {
      max-width: 600px;
      position: absolute;
      right: 850px;
      top: 150px;
      z-index: 5;
      animation: bounce 5s infinite; }
    #main-v .main-v-box .cloud {
      position: absolute;
      max-width: 400px;
      z-index: 0;
      animation: bounce 5s infinite; }
      #main-v .main-v-box .cloud img {
        width: initial; }
    #main-v .main-v-box .cloud-1 {
      max-width: 250px;
      right: 1350px;
      bottom: 50px; }
    #main-v .main-v-box .cloud-2 {
      max-width: 270px;
      right: 680px;
      top: 110px; }
    #main-v .main-v-box .cloud-3 {
      max-width: 400px;
      right: -140px;
      top: 240px; }
  #main-v .date {
    padding: 2em 1em;
    background: #09015a; }
    #main-v .date .date-in {
      position: relative;
      max-width: 740px;
      margin: 0 auto; }
      #main-v .date .date-in .date-l {
        width: 38%;
        position: absolute;
        left: 0;
        bottom: -2em; }
      #main-v .date .date-in .date-r {
        width: 58%;
        margin-left: auto; }

.card-box {
  max-width: 900px;
  background: #F4F4F4;
  padding: 1em;
  margin: 1em auto;
  text-align: center;
  border-radius: 16px; }
  .card-box .card-head {
    padding: .5em 4.5em;
    background: #09015a;
    color: #fccc00;
    margin: 0 auto 1em;
    border-radius: 50px;
    width: fit-content;
    position: relative; }
    .card-box .card-head::after {
      content: "";
      background-image: url(../images/book.svg);
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      left: 0;
      top: -1.5em;
      width: 4.5em;
      height: 4.5em; }
    .card-box .card-head.phone::after {
      background-image: url(../images/phone.svg); }

#about .copy {
  max-width: 960px;
  margin: 0 auto 80px; }
  #about .copy .copy-top {
    margin-bottom: 1em; }
  #about .copy .sp {
    display: none; }
#about .about-head {
  max-width: 1920px;
  margin: 0 auto; }
  #about .about-head .about-head-in {
    position: relative;
    margin-top: 40px;
    margin-left: -10%;
    z-index: 1;
    padding: 5% 0 2%;
    width: 120%; }
    #about .about-head .about-head-in::after {
      content: "";
      background: url(../images/bg-town.webp);
      background-repeat: no-repeat;
      background-size: 100%;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      top: 0;
      z-index: 1;
      width: 100%;
      height: 100%; }
  #about .about-head img {
    width: 100%; }
#about .about-text {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: -2%;
  margin-bottom: 20px; }

.about-pop {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #e74d63;
  z-index: 9;
  left: 0;
  top: 0;
  z-index: 30;
  display: none; }
  .about-pop .about-pop-in {
    background: #fff;
    border-radius: 12px;
    position: absolute;
    left: 1em;
    top: 1em;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column; }
  .about-pop .about-main {
    max-width: 400px;
    width: 80%; }
  .about-pop .close-btn {
    position: fixed;
    right: -90px;
    top: 1em;
    z-index: 10;
    max-width: 80px;
    cursor: pointer;
    transition-duration: .5s; }
    .about-pop .close-btn.close-active {
      right: 0; }
  .about-pop .pop-head {
    padding: 1em;
    color: #e74d63;
    border-bottom: solid 1px #e74d63;
    text-align: center;
    width: calc(100% - 2em);
    margin: 1em auto; }
  .about-pop .tmc {
    text-align: center;
    max-width: 600px;
    width: calc(100% - 2em);
    margin: 0 auto;
    display: none; }
    .about-pop .tmc.pop-active {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center; }
    .about-pop .tmc .youtube-box {
      margin: 1em auto 0;
      width: 100%; }
      .about-pop .tmc .youtube-box iframe {
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: 16/9; }
    .about-pop .tmc .link-btn {
      display: block;
      margin: 1em auto;
      background: #e74d63;
      color: #fff;
      border-radius: 50px;
      width: calc(100% - 2em);
      padding: 1em;
      max-width: 300px;
      border: solid 1px #e74d63; }
      .about-pop .tmc .link-btn:hover {
        background: #fff;
        color: #e74d63;
        opacity: 1; }
  .about-pop .kumakey {
    text-align: center;
    max-width: 600px;
    width: calc(100% - 2em);
    margin: 0 auto;
    height: 100%;
    overflow: auto;
    padding: 1em;
    display: none; }
    .about-pop .kumakey.pop-active {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center; }
    .about-pop .kumakey .prof {
      margin-top: 1em;
      width: 100%; }
      .about-pop .kumakey .prof li {
        text-align: left;
        border-bottom: solid 1px #e74d63;
        margin-bottom: .5em;
        padding-bottom: .5em;
        color: #e74d63; }

#story .inner-wrap {
  max-width: 1500px;
  margin: 0;
  margin-left: auto; }
#story .story-flex {
  display: flex; }
#story .col-l {
  width: 48%;
  margin: 0 auto; }
  #story .col-l p {
    margin-bottom: 1em; }
#story .col-r {
  width: 64%;
  margin: 0 auto;
  margin-right: -16%; }
#story .sp {
  display: none; }
#story .sp-ac-btn {
  display: none; }
#story .about-flex {
  display: flex;
  max-width: 300px;
  margin: 40px auto; }
#story .about-kumakey {
  max-width: 140px;
  margin: 0 auto;
  width: 48%;
  cursor: pointer; }
  #story .about-kumakey .kumakey-box {
    position: relative;
    z-index: 0;
    transition-duration: .3s; }
    #story .about-kumakey .kumakey-box:hover {
      opacity: .8; }
  #story .about-kumakey .kuma-hand {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: hand-bounce 1s infinite; }
#story .about-tmc {
  max-width: 140px;
  margin: 0 auto;
  width: 48%;
  cursor: pointer; }
  #story .about-tmc .tmc-box {
    transition-duration: .3s; }
    #story .about-tmc .tmc-box:hover {
      opacity: .8; }

#cm {
  padding-top: 0;
  padding-bottom: 200px; }
  #cm .movie-box {
    max-width: 960px;
    margin: 1em auto;
    border-radius: 8px;
    overflow: hidden; }
  #cm iframe {
    max-width: 960px;
    margin: 1em auto;
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto; }

#webnazo {
  background: #5e466d;
  position: relative; }
  #webnazo:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 200px;
    background: url(../images/bg-wave-tp.svg);
    background-size: 1920px 100%;
    background-position: top;
    top: -160px;
    background-repeat: repeat-x; }
  #webnazo:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 200px;
    background: url(../images/bg-wave-bt.svg);
    background-size: 1920px 100%;
    background-position: bottom;
    bottom: -160px;
    background-repeat: repeat-x; }
  #webnazo .inner-wrap {
    max-width: 1300px; }
  #webnazo .nazo-flex {
    display: flex; }
    #webnazo .nazo-flex .col-l {
      width: 48%;
      margin: 0 auto; }
    #webnazo .nazo-flex .col-r {
      width: 48%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
  #webnazo .hint-item {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 1em;
    padding: 1em; }
    #webnazo .hint-item .hint-head {
      color: #e74d63;
      cursor: pointer; }
    #webnazo .hint-item .hint-desc {
      border-top: solid 1px #ccc;
      padding-top: 1em;
      margin-top: 1em;
      display: none; }
  #webnazo .ans-box .ans {
    display: block;
    font-size: 16px;
    margin-bottom: 1em;
    padding: 2em 1em;
    background: #fccc00;
    border-radius: 12px;
    width: calc(100% - 2em);
    font-weight: bold; }
  #webnazo .ans-box .inp-btn {
    max-width: 180px;
    padding: 1.25em 1em;
    color: #fff;
    background: #E4005E;
    border-radius: 100px;
    border: solid 2px #fff;
    text-align: center;
    margin: 1em auto;
    display: block;
    width: 100%;
    cursor: pointer;
    transition-duration: .3s; }
    #webnazo .ans-box .inp-btn:hover {
      background: #fff;
      border-color: #E4005E;
      color: #E4005E; }

.ans-pop {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #e74d63;
  z-index: 9;
  left: 0;
  top: 0;
  z-index: 30;
  display: none; }
  .ans-pop .ans-pop-in {
    background: #fff;
    border-radius: 12px;
    position: absolute;
    left: 1em;
    top: 1em;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column; }
  .ans-pop .ans-main {
    max-width: 400px;
    width: 80%; }
  .ans-pop .true {
    width: calc(100% - 2em);
    margin: 0 auto; }
  .ans-pop .false {
    display: none;
    max-width: 500px;
    width: calc(100% - 2em);
    margin: 0 auto; }
  .ans-pop .close-btn {
    position: fixed;
    right: -90px;
    top: 1em;
    z-index: 10;
    max-width: 80px;
    cursor: pointer;
    transition-duration: .5s; }
    .ans-pop .close-btn.close-active {
      right: 0; }
  .ans-pop .sns {
    display: flex;
    align-items: center;
    max-width: 200px;
    margin: 1em auto; }
    .ans-pop .sns a {
      width: 48%;
      display: block;
      margin: 0 auto;
      padding: 1em;
      max-width: 35px;
      border-radius: 80px; }
    .ans-pop .sns .ico-x {
      background: #333; }
    .ans-pop .sns .ico-line {
      background: #00B14E; }

#play {
  padding-top: 0;
  padding-bottom: 200px; }
  #play .play-flex {
    display: flex;
    flex-flow: wrap;
    max-width: 800px;
    margin: 40px auto; }
    #play .play-flex .play-item {
      width: 21%;
      margin: 2%; }
  #play .sankajo {
    max-width: 900px;
    margin: 0 auto; }

#flow .flow-box {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 calc(50px + 1em); }
#flow .fl-swiper {
  overflow: hidden; }
#flow .swiper-btn {
  position: absolute;
  right: 0;
  top: 50%;
  background: url(../images/arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 25px;
  height: 25px;
  cursor: pointer;
  transition-duration: .3s; }
  #flow .swiper-btn.swiper-prev {
    right: initial;
    left: 0;
    transform: rotate(-180deg); }
  #flow .swiper-btn.pc-no-active {
    opacity: 0;
    pointer-events: none; }
#flow .flow-card {
  /*     display: flex;
  justify-content: center; */ }
  #flow .flow-card .swiper-slide {
    position: relative;
    height: initial; }
  #flow .flow-card .card-item {
    border-radius: 8px;
    background: #f4f4f4;
    overflow: hidden;
    height: 100%; }
    #flow .flow-card .card-item .card-head {
      text-align: center;
      padding: 1em 1em 0; }
    #flow .flow-card .card-item .card-text {
      padding: 1em;
      text-align: center; }

#schedule {
  padding-top: 200px; }
  #schedule .schedule-flex {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
    margin-top: 60px; }
    #schedule .schedule-flex .sche-item {
      width: 48%;
      margin: 0 auto;
      text-align: center;
      position: relative; }
    #schedule .schedule-flex .sche-card {
      border: solid 1px #09015a;
      border-radius: 12px;
      filter: drop-shadow(5px 5px 0px #09015a);
      background-color: #fff;
      padding: 1em;
      width: calc(100% - 2em);
      padding-top: 1.5em;
      min-height: 300px; }
    #schedule .schedule-flex .fc-link-text {
      color: #0071BC; }
    #schedule .schedule-flex .dela-box {
      position: absolute;
      top: -25px;
      left: 0;
      width: 100%;
      z-index: 1; }
      #schedule .schedule-flex .dela-box.fc-box {
        top: -40px; }
      #schedule .schedule-flex .dela-box .min {
        color: #09015a;
        display: block;
        text-align: center; }
    #schedule .schedule-flex .dela-head {
      color: #fff;
      text-shadow: 1px 1px 0 #09015a, -1px 1px 0 #09015a, -1px -1px 0 #09015a, 1px -1px 0 #09015a;
      filter: drop-shadow(3px 3px 0px #09015a);
      display: block;
      text-align: center; }
    #schedule .schedule-flex .sche-head {
      border: solid 1px #09015a;
      background: #09015a;
      color: #fccc00;
      padding: .5em 2em;
      text-align: center;
      border-radius: 50px;
      margin: 1em auto; }
    #schedule .schedule-flex .fc-link-box {
      margin-top: 1em; }
    #schedule .schedule-flex .sche-text {
      margin-bottom: 2em; }
  #schedule .time-flex {
    display: flex;
    align-items: center;
    max-width: 620px;
    margin: 1em auto; }
    #schedule .time-flex .col-l {
      width: 240px;
      padding-right: 2em;
      position: relative; }
      #schedule .time-flex .col-l::after {
        content: "";
        height: 70%;
        top: 15%;
        right: 1em;
        width: 1px;
        background: #000;
        position: absolute; }
    #schedule .time-flex .col-r {
      width: calc(100% - 240px - 1em);
      margin: 0 auto; }

#price {
  padding-top: 0; }
  #price .price-kit {
    max-width: 580px;
    margin: 0 auto;
    margin-bottom: 40px; }
  #price .price-parts-wrap {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto; }
    #price .price-parts-wrap:before {
      content: "";
      background: url(../images/parts-kit.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: left bottom;
      width: 100px;
      height: 200px;
      position: absolute;
      left: 0;
      top: -160px;
      z-index: 0; }
  #price .price-card {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 1em;
    border: solid 1px #09015a;
    border-radius: 12px;
    background: #fff;
    position: relative;
    z-index: 0;
    overflow: hidden;
    filter: drop-shadow(5px 5px 0px #09015a); }
    #price .price-card .price-in {
      display: flex;
      width: calc(100% - 2em);
      padding: 1em; }
      #price .price-card .price-in .col-l {
        width: 38%;
        margin: 0 auto;
        display: flex;
        align-items: center; }
      #price .price-card .price-in .col-r {
        width: 48%;
        margin: 0 auto; }
    #price .price-card.u22-card {
      background: #88C4C3;
      position: relative;
      z-index: 1; }
      #price .price-card.u22-card:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 50%;
        width: 100%;
        background: #fff;
        z-index: -1; }
    #price .price-card.forkids {
      background: #FFFFC3; }
      #price .price-card.forkids .col-r {
        display: flex;
        align-items: center; }
  #price .bnr-box {
    margin: 1em auto;
    display: block;
    text-align: center;
    max-width: 600px;
    color: #09015a; }
    #price .bnr-box a {
      display: block;
      margin: 1em auto;
      border: solid 2px #09015a;
      border-radius: 12px;
      overflow: hidden; }
  #price .u22-price {
    margin-bottom: 20px; }

#buy {
  padding: 0; }
  #buy .buy-parts-wrap {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto; }
    #buy .buy-parts-wrap:before {
      content: "";
      background: url(../images/parts-kit-2.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right bottom;
      width: 100px;
      height: 200px;
      position: absolute;
      right: 0;
      top: -160px;
      z-index: 0; }
  #buy .buy-box {
    max-width: 900px;
    position: relative;
    margin: 1em auto;
    margin-bottom: 120px;
    z-index: 1; }
    #buy .buy-box .dela-box {
      position: absolute;
      top: -30px;
      left: 0;
      margin: 0 auto;
      width: 100%;
      z-index: 2; }
    #buy .buy-box .dela-head {
      color: #fff;
      text-shadow: 1px 1px 0 #09015a, -1px 1px 0 #09015a, -1px -1px 0 #09015a, 1px -1px 0 #09015a;
      filter: drop-shadow(3px 3px 0px #09015a);
      display: block;
      text-align: center; }
    #buy .buy-box .buy-in {
      background: #F4F4F4;
      padding: 2em;
      padding-top: 40px;
      margin: 1em auto;
      text-align: center;
      border-radius: 16px;
      border: solid 1px #09015a;
      filter: drop-shadow(5px 5px 0px #09015a); }
    #buy .buy-box .strong {
      color: #09015a; }
  #buy .online-box {
    margin-bottom: 0; }
  #buy .clr-bl {
    color: #09015a; }
  #buy p {
    margin-bottom: 1em; }
  #buy .buy-head {
    border: solid 1px #09015a;
    background: #09015a;
    color: #fccc00;
    padding: .5em 2em;
    text-align: center;
    border-radius: 50px;
    margin: 1em auto;
    max-width: 440px;
    width: calc(100% - 4em); }
  #buy .text-link {
    color: #09015a; }
  #buy .buy-btn {
    border: solid 1px #09015a;
    color: #09015a;
    background: #fccc00;
    padding: .5em 2em;
    text-align: center;
    border-radius: 50px;
    margin: 1em auto;
    max-width: 440px;
    width: calc(100% - 4em);
    display: block;
    filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.3));
    transition-duration: .3s; }
    #buy .buy-btn:hover {
      filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.3)); }

#goods {
  position: relative;
  background: linear-gradient(rgba(88, 162, 217, 0.3) 5%, #fff 30%);
  z-index: 0; }
  #goods::after {
    content: "";
    width: 100%;
    height: 200px;
    position: absolute;
    left: 0;
    top: -40px;
    background: url(../images/bg-bottom.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: -1; }
  #goods .head-box-2 {
    max-width: 360px;
    margin: 0 auto 40px; }
  #goods .goods-flex {
    display: flex;
    flex-flow: wrap;
    max-width: 900px;
    margin: 0 auto; }
    #goods .goods-flex .goods-item {
      width: 31%;
      margin: 1%;
      text-align: center; }
    #goods .goods-flex .goods-head {
      margin: -1em auto 1em;
      text-align: center;
      background: #09015a;
      color: #fff;
      z-index: 1;
      position: relative;
      border-radius: 50px;
      width: calc(90% - 2em);
      padding: .25em 1em; }
    #goods .goods-flex .goods-price {
      color: #09015a;
      margin-top: .5em; }
  #goods .goods-thm {
    position: relative;
    cursor: pointer; }
    #goods .goods-thm:after {
      content: "";
      position: absolute;
      top: .5em;
      right: .5em;
      background: url(../images/pick.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      width: 2em;
      height: 2em;
      transition-duration: .3s; }
    #goods .goods-thm:hover::after {
      transform: scale(1.5); }

.goods-pop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  background: rgba(0, 0, 0, 0.8);
  display: none; }
  .goods-pop .goods-close-btn {
    max-width: 30px;
    position: fixed;
    top: -3em;
    right: 0;
    width: 100%;
    cursor: pointer; }
  .goods-pop .img-box {
    position: absolute;
    width: 90%;
    max-width: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

#readme {
  position: relative;
  z-index: 1;
  padding: 0; }
  #readme.obj-off:after {
    right: -100%; }
  #readme:after {
    content: "";
    max-width: 1000px;
    width: 100%;
    height: 330px;
    margin: 0 auto;
    position: absolute;
    top: -50px;
    right: 1em;
    left: 0;
    z-index: 1;
    background-image: url(../images/parts-readme.svg);
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    pointer-events: none;
    transition-duration: 1s; }
  #readme .read-head {
    background: #e74d63;
    border-bottom: solid 2px #fff;
    cursor: pointer; }
    #readme .read-head .read-in {
      max-width: 900px;
      width: calc(100% - 2em);
      padding: 2em 1em;
      margin: 0 auto;
      position: relative; }
      #readme .read-head .read-in:before {
        content: "";
        position: absolute;
        left: 1em;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        background-image: url(../images/tri.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        transition-duration: .3s; }
      #readme .read-head .read-in img {
        max-width: 240px;
        margin: 0;
        margin-left: calc(30px + 1em); }
    #readme .read-head.read-active .read-in:before {
      transform: translateY(-50%) rotate(180deg); }
  #readme .read-desc {
    display: none;
    max-width: 900px;
    margin: 1em auto;
    padding: 1em; }
  #readme .read-box {
    margin-bottom: 2em; }
    #readme .read-box .read-box-head {
      margin-bottom: 1em;
      padding: .5em 0;
      color: #e74d63;
      border-bottom: solid 1px #e74d63; }
    #readme .read-box p {
      margin-bottom: 1em; }
    #readme .read-box .min-head {
      color: #e74d63; }
    #readme .read-box.mark p {
      padding-left: 1em;
      position: relative; }
      #readme .read-box.mark p:before {
        content: "";
        position: absolute;
        left: 0;
        top: calc(0.5em + 2.5px);
        width: 5px;
        height: 5px;
        border-radius: 1em;
        background: #000; }

.bnr-flex {
  display: flex;
  max-width: 950px;
  margin: 0 auto; }
  .bnr-flex .col-l {
    width: 48%;
    margin: 0 auto; }
  .bnr-flex .col-r {
    width: 48%;
    margin: 0 auto; }
  .bnr-flex .bnr-rdg,
  .bnr-flex .bnr-nmg {
    cursor: pointer;
    transition-duration: .3s; }
    .bnr-flex .bnr-rdg:hover,
    .bnr-flex .bnr-nmg:hover {
      opacity: .8; }

#contact {
  background: #E6E6E6;
  padding: 2em 0; }
  #contact .contact-flex {
    display: flex;
    align-items: center;
    max-width: 900px;
    margin: 0 auto; }
    #contact .contact-flex .col-l {
      width: 300px;
      margin: 0 auto;
      position: relative; }
      #contact .contact-flex .col-l::before {
        content: "";
        max-width: 900px;
        width: 110px;
        height: 150px;
        margin: 0 auto;
        position: absolute;
        bottom: -3em;
        left: 1em;
        z-index: 1;
        background-image: url(../images/post.svg);
        background-size: contain;
        background-position: left;
        background-repeat: no-repeat;
        pointer-events: none; }
      #contact .contact-flex .col-l img {
        max-width: 140px;
        margin: 0;
        margin-left: auto; }
    #contact .contact-flex .col-r {
      width: calc(100% - 380px);
      margin: 0 auto; }
      #contact .contact-flex .col-r a:hover {
        color: #09015a;
        opacity: 1; }

#contact-event {
  background: #ddd;
  padding: 40px 0;
  text-align: center; }
  #contact-event .contact-head {
    border: solid 1px #09015a;
    background: #09015a;
    color: #fccc00;
    padding: .5em 2em;
    text-align: center;
    border-radius: 50px;
    margin: 1em auto;
    max-width: 320px;
    width: calc(100% - 4em); }
  #contact-event p {
    margin-bottom: 1em; }
  #contact-event a {
    display: inline-block;
    margin-bottom: 1em; }

footer {
  padding: 40px 0 80px;
  position: relative;
  z-index: 2;
  background: #09015a;
  text-align: center;
  color: #fff; }
  footer .bnr-flex {
    max-width: 700px;
    margin: 1em auto 2em; }
  footer .scrap-logo {
    display: block;
    max-width: 160px;
    margin: 40px auto; }
  footer p {
    margin-bottom: 2em; }
  footer .ft-sns {
    display: flex;
    justify-content: center;
    margin: 20px auto;
    width: 80%; }
    footer .ft-sns .sns {
      margin: 0 10px; }

#rdg-pop,
#nmg-pop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 110;
  display: none; }
  #rdg-pop .close-bt,
  #nmg-pop .close-bt {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: #fff;
    border: solid 2px #09015a;
    padding: 2px; }
    #rdg-pop .close-bt:before,
    #nmg-pop .close-bt:before {
      content: "";
      width: 100%;
      height: 3px;
      background: #09015a;
      position: absolute;
      right: 0;
      top: 50%;
      transform: rotate(-45deg); }
    #rdg-pop .close-bt:after,
    #nmg-pop .close-bt:after {
      content: "";
      width: 100%;
      height: 3px;
      background: #09015a;
      position: absolute;
      right: 0;
      top: 50%;
      transform: rotate(45deg); }
  #rdg-pop .rdg-in,
  #nmg-pop .rdg-in {
    width: calc(90% - 2em - 6px);
    padding: 1em;
    border: solid 3px #09015a;
    max-width: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff; }
  #rdg-pop .youtube iframe,
  #nmg-pop .youtube iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    display: block; }
  #rdg-pop .img,
  #nmg-pop .img {
    width: 100%;
    height: auto; }
  #rdg-pop .rdg-text,
  #nmg-pop .rdg-text {
    margin: 1em auto; }
  #rdg-pop .btn,
  #nmg-pop .btn {
    max-width: 280px;
    text-align: center;
    padding: .5em;
    display: block;
    width: 100%;
    background: #000;
    color: #fff;
    margin: 0 auto;
    transition-duration: .3s;
    border: solid 2px #000; }
    #rdg-pop .btn:hover,
    #nmg-pop .btn:hover {
      background: rgba(0, 0, 0, 0);
      color: #000; }

@media screen and (max-width: 1500px) {
  #main-v {
    position: relative; }
    #main-v .main-v-box .main-vis {
      padding-top: 200px; }
    #main-v .main-v-box .main-block {
      width: 90%; }
    #main-v .main-v-box .main-logo {
      right: initial;
      left: 4%;
      max-width: 1300px;
      width: 40%;
      top: 150px; }
      #main-v .main-v-box .main-logo img {
        max-width: 600px;
        margin-left: 0; }
    #main-v .main-v-box .cloud {
      width: 20%; }
      #main-v .main-v-box .cloud img {
        width: 100%; }
    #main-v .main-v-box .cloud-1 {
      right: initial;
      left: 0; }
    #main-v .main-v-box .cloud-2 {
      max-width: 270px;
      left: 38%;
      right: initial;
      top: 7%; }
    #main-v .main-v-box .cloud-3 {
      max-width: 400px;
      right: -140px;
      top: 240px; } }
@media screen and (max-width: 900px) {
  .menu-btn {
    max-width: 70px; }

  .menu-close-btn {
    max-width: 70px; }

  .about-pop .close-btn {
    max-width: 70px; }

  .ans-pop .close-btn {
    max-width: 70px; }

  .sns-menu {
    max-width: 50px; }

  #main-v .main-v-box {
    height: 75vh;
    height: 75dvh;
    min-height: 880px; }
    #main-v .main-v-box .main-logo {
      right: initial;
      left: 4%;
      max-width: 1300px;
      width: 65%;
      top: 13%; }
    #main-v .main-v-box .cloud-2 {
      max-width: 400px;
      left: initial;
      top: 14vh;
      width: 30%;
      right: 10%; }
    #main-v .main-v-box .cloud-3 {
      max-width: 400px;
      right: 0;
      top: 40vh;
      width: 30%; }
    #main-v .main-v-box .main-vis {
      padding-top: 0;
      position: absolute;
      right: 0;
      bottom: 0; }
      #main-v .main-v-box .main-vis .main-block {
        width: 100%; }

  #about .about-head .about-head-in {
    position: relative;
    margin-left: -10%;
    z-index: 1;
    padding: 5% 0 2%;
    width: 120%; }
    #about .about-head .about-head-in::after {
      left: -10%;
      width: 120%;
      height: 120%; }
  #about .about-head img {
    width: 126%;
    margin-left: -13%; }

  #story .story-flex {
    position: relative; }
  #story .col-l {
    width: 85%;
    margin: 0;
    position: relative;
    z-index: 1; }
    #story .col-l p {
      text-shadow: 1px 1px 0 #e74d63, -1px 1px 0 #e74d63, -1px -1px 0 #e74d63, 0px -1px 0 #e74d63, 1px -1px 0 #e74d63, 0.5px 0.5px 0 #e74d63, -0.5px 0.5px 0 #e74d63, -0.5px -0.5px 0 #e74d63, 0.5px -0.5px 0 #e74d63;
      filter: drop-shadow(0px 1px 0px #e74d63); }
  #story .col-r {
    width: 70%;
    margin: 0 auto;
    margin-right: 0;
    position: absolute;
    right: -35%;
    top: -30%; }
  #story .pc {
    display: none; }
  #story .sp {
    display: block; }
  #story .col-r {
    width: 90%;
    right: -45%;
    top: -26%; }
    #story .col-r.st-no-active {
      top: -60%; }
  #story .sp-ac-btn {
    padding: .5em;
    border-radius: 4px;
    display: block;
    width: 100px;
    text-align: center;
    margin: 1em auto;
    border-radius: 50px;
    font-weight: bold;
    background: #fff;
    color: #e74d63;
    /*  &.st-active:after {
      content: "閉じる";
    } */ }
  #story .sp-ac {
    display: none; }

  #cm {
    padding-bottom: 120px; }

  #webnazo:before {
    height: 60px;
    top: -60px; }
  #webnazo:after {
    height: 60px;
    bottom: -60px; }
  #webnazo .nazo-flex {
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto; }
    #webnazo .nazo-flex .col-l {
      width: 100%; }
    #webnazo .nazo-flex .col-r {
      width: 100%; }

  #price .price-kit {
    margin-right: 0; }

  #flow {
    padding-top: 120px; }
    #flow .swiper-btn.pc-no-active {
      opacity: 1;
      pointer-events: initial; }
    #flow .swiper-btn.sp-no-active {
      opacity: 0;
      pointer-events: none; }

  #schedule {
    padding-top: 120px; }
    #schedule .schedule-flex {
      flex-direction: column;
      margin: 40px auto; }
      #schedule .schedule-flex .sche-item {
        width: 100%;
        margin: 60px auto 0; }
      #schedule .schedule-flex .sche-card {
        min-height: initial; }

  #buy .head-box {
    margin-bottom: 60px; }
  #buy .buy-box {
    margin-bottom: 90px; }
  #buy .online-box {
    margin-bottom: 0; }

  #goods .goods-flex .goods-item {
    width: 48%;
    margin: 1%; } }
@media screen and (max-width: 540px) {
  .sp-no {
    display: none; }

  @keyframes bounce {
    0%,
    100% {
      transform: translateY(0); }
    50% {
      transform: translateY(-15px); } }
  .menu-btn {
    max-width: 50px; }

  .menu-close-btn {
    max-width: 50px; }

  .about-pop .close-btn {
    max-width: 50px; }

  .ans-pop .close-btn {
    max-width: 50px; }

  .sns-menu {
    max-width: 40px;
    bottom: 160px; }

  .buy-link {
    max-width: 40px; }

  #menu {
    transition-duration: .5s; }

  #main-v .main-v-box {
    height: 90vh;
    height: 90dvh;
    min-height: 650px; }
    #main-v .main-v-box .nmg-logo {
      max-width: 50px; }
    #main-v .main-v-box .main-logo {
      left: 7.5%;
      width: 85%;
      top: 18%; }
    #main-v .main-v-box .cloud-1 {
      width: 40%;
      bottom: 25%; }
    #main-v .main-v-box .cloud-2 {
      left: initial;
      top: 5vh;
      width: 50%;
      right: 5%; }
    #main-v .main-v-box .cloud-3 {
      right: -20px;
      top: 38vh;
      width: 40%; }
    #main-v .main-v-box .main-vis {
      padding-top: 0;
      position: absolute;
      right: 0;
      bottom: 0; }
      #main-v .main-v-box .main-vis .main-block {
        width: 130%;
        margin-left: -25%; }

  #story {
    padding-top: 120px; }

  section {
    padding: 60px 0; }

  .card-box .card-head {
    padding: .5em 2em .5em 4.5em; }

  #about .copy {
    margin: 0 auto 60px; }
    #about .copy .pc {
      display: none; }
    #about .copy .sp {
      display: block;
      width: 70%; }
  #about .about-head .about-head-in {
    width: 180%;
    margin-left: -40%; }
  #about .about-head img {
    width: 130%;
    margin-left: -15%;
    margin-top: 2%; }
  #about .about-kumakey {
    max-width: 120px; }
  #about .about-tmc {
    max-width: 120px; }

  #schedule .time-flex {
    flex-direction: column; }
    #schedule .time-flex .col-l {
      width: 100%;
      border-bottom: solid 1px #000;
      padding: 0;
      margin: 0 auto 1em;
      padding-bottom: 1em; }
      #schedule .time-flex .col-l img {
        max-width: 200px;
        margin: 0 auto; }
      #schedule .time-flex .col-l::after {
        display: none; }
    #schedule .time-flex .col-r {
      width: 100%;
      text-align: center; }

  #cm {
    padding-bottom: 80px; }

  #play {
    padding-bottom: 120px; }
    #play .play-flex {
      justify-content: center; }
      #play .play-flex .play-item {
        width: 38%;
        margin: 2%; }

  #flow {
    padding-top: 80px; }
    #flow .flow-box {
      padding: 0 calc(0px + 1em); }

  #webnazo::before {
    height: 40px;
    top: -39px; }
  #webnazo::after {
    height: 40px;
    bottom: -39px; }

  #price .price-kit {
    margin: 0 auto 120px; }
  #price .price-parts-wrap:before {
    top: -130px;
    width: 70px;
    height: 170px; }
  #price .price-card .price-in {
    flex-direction: column; }
    #price .price-card .price-in .col-l {
      width: 280px; }
    #price .price-card .price-in .col-r {
      width: 100%; }
      #price .price-card .price-in .col-r .u22-price {
        margin-top: 40px; }
  #price .price-card.u22-card:after {
    height: calc(100% - 140px - 4em); }

  #buy .head-box {
    margin-bottom: 120px; }
  #buy .buy-parts-wrap:before {
    top: -130px;
    width: 70px;
    height: 170px; }

  #readme:after {
    right: -6em;
    height: 280px; }
  #readme .read-head .read-in img {
    max-width: 180px;
    margin-left: calc(20px + 1em); }
  #readme .read-head .read-in:before {
    width: 20px;
    height: 20px; }

  .bnr-flex {
    flex-direction: column; }
    .bnr-flex .col-l {
      width: 100%;
      margin: 1em auto; }
    .bnr-flex .col-r {
      width: 100%;
      margin: 1em auto; }

  #contact .contact-flex {
    flex-direction: column; }
    #contact .contact-flex .col-l img {
      max-width: 140px;
      margin-left: 90px; }
    #contact .contact-flex .col-l::before {
      width: 90px;
      height: 90px;
      top: -3em;
      left: 0; }
    #contact .contact-flex .col-r {
      width: calc(100% - 70px);
      margin-top: 2em; }

  #rdg-pop .close-bt,
  #nmg-pop .close-bt {
    right: -5px; }
  #rdg-pop .rdg-box,
  #nmg-pop .rdg-box {
    max-height: 70dvh;
    overflow-x: auto; } }

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