@charset "UTF-8";
/* color
=================================================================== */
/* common
=================================================================== */
/* layout
=================================================================== */
/* background
=================================================================== */
/* flex
=================================================================== */
/* animation delay
=================================================================== */
/* 3d
=================================================================== */
/* font
=================================================================== */
/* vw
=================================================================== */
/* form
=================================================================== */
/* defult
=================================================================== */
.chara {
  display: block;
  padding-top: 100%;
  background-repeat: no-repeat;
  animation-play-state: paused !important; }
  .chara.chara--a {
    background-position-y: 0; }
  .chara.chara--b {
    background-position-y: 50%; }
  .chara.chara--c {
    background-position-y: 100%; }
  .chara.active {
    animation-play-state: running !important; }

@keyframes animeX--2 {
  to {
    background-position-x: 40%; } }
@keyframes animeX--3 {
  to {
    background-position-x: 60%; } }
@keyframes animeX--4 {
  to {
    background-position-x: 80%; } }
@keyframes animeX--5 {
  to {
    background-position-x: 100%; } }
@keyframes animeX--6 {
  to {
    background-position-x: 120%; } }
@keyframes animeX--6d {
  to {
    background-position-x: 120%; } }
@keyframes animeX--7 {
  to {
    background-position-x: 150%; } }
@keyframes animecup {
  to {
    transform: translateX(-92.8%); } }
/*kvCharaAnime
ーーーーーーーーーーーーーーーーーーーーーーーー */
@keyframes kvCharaAnime {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  10% {
    transform: scale(1.1, 0.9) translate(0%, 5%); }
  40% {
    transform: scale(1.2, 0.8) translate(0%, 15%); }
  50% {
    transform: scale(1, 1) translate(0%, 0%); }
  60% {
    transform: scale(0.9, 1.2) translate(0%, -50%); }
  75% {
    transform: scale(0.9, 1.2) translate(0%, -20%); }
  85% {
    transform: scale(1.2, 0.8) translate(0%, 15%); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }
@keyframes kvCharaAnimeMax {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  10% {
    transform: scale(1.1, 0.9) translate(0%, 5%); }
  40% {
    transform: scale(1.2, 0.8) translate(0%, 15%); }
  50% {
    transform: scale(1, 1) translate(0%, 0%); }
  60% {
    transform: scale(0.9, 1.2) translate(0%, -100%); }
  75% {
    transform: scale(0.9, 1.2) translate(0%, -20%); }
  85% {
    transform: scale(1.2, 0.8) translate(0%, 15%); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }
/*CharaAnime
ーーーーーーーーーーーーーーーーーーーーーーーー */
@keyframes anime-Run {
  0% {
    transform: translate3d(10%, 0, 0); }
  100% {
    transform: translate3d(200%, 0, 0); } }
@keyframes anime-Rotate {
  0% {
    transform: translate(0%, 0%); }
  5% {
    transform: translate(10%, 0%) rotate(10deg); }
  25% {
    transform: translate(20%, 0%) rotate(20deg); }
  30% {
    transform: translate(-10%, 0%) rotate(-10deg); }
  35% {
    transform: translate(-15%, 0%) rotate(-15deg); }
  45% {
    transform: translate(10%, 0%) rotate(10deg); }
  50% {
    transform: translate(15%, 0%) rotate(15deg); }
  60% {
    transform: translate(-5%, 0%) rotate(-5deg); }
  65% {
    transform: translate(-7%, 0%) rotate(-7deg); }
  75% {
    transform: translate(0%, 0%) rotate(0deg); }
  100% {
    transform: translate(0%, 0%) rotate(0deg); } }
@keyframes anime-Puru {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  20% {
    transform: scale(1, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  50% {
    transform: scale(1, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  65% {
    transform: scale(1, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  80% {
    transform: scale(1, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }
@keyframes anime-Jump {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  5% {
    transform: scale(1.1, 0.9) translate(0%, 5%); }
  20% {
    transform: scale(1.2, 0.8) translate(0%, 15%); }
  25% {
    transform: scale(1, 1) translate(0%, 0%); }
  30% {
    transform: scale(0.9, 1.2) translate(0%, -50%); }
  37% {
    transform: scale(0.9, 1.2) translate(0%, -20%); }
  43% {
    transform: scale(1.2, 0.8) translate(0%, 15%); }
  50% {
    transform: scale(1, 1) translate(0%, 0%); } }
@keyframes anime-Fly {
  0% {
    transform: translate(0%, 0%); }
  25% {
    transform: translate(0%, -20%); }
  50% {
    transform: translate(0%, 10%); }
  75% {
    transform: translate(0%, -10%); }
  100% {
    transform: translate(0%, 0%); } }
@keyframes anime-Down {
  0% {
    transform: scale(0.8, 1.4) translate(0%, -100%);
    visibility: visible; }
  10% {
    transform: scale(0.8, 1.4) translate(0%, -15%); }
  20% {
    transform: scale(1.4, 0.6) translate(0%, 30%); }
  30% {
    transform: scale(0.9, 1.1) translate(0%, -10%); }
  40% {
    transform: scale(0.95, 1.2) translate(0%, -30%); }
  50% {
    transform: scale(0.95, 1.2) translate(0%, -10%); }
  60% {
    transform: scale(1.1, 0.9) translate(0%, 5%); }
  70% {
    transform: scale(1, 1) translate(0%, 0%); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }
@keyframes anime-Visible {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  15% {
    transform: scale(0.9, 0.9) translate(0%, 5%); }
  30% {
    transform: scale(1.3, 0.8) translate(0%, 10%); }
  50% {
    transform: scale(0.8, 1.3) translate(0%, -10%); }
  70% {
    transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }
/* vw
================================================*/
/* vh
================================================*/
@keyframes slideImg {
  0% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(-825px, 0, 0); } }
/*============================================================================================ anime */
/*============================================================================================ INSIDE CUP NOODLE */
.inside.inside__02 .slideImg__chara--wrapper {
  overflow: hidden;
  height: 440px;
  margin-bottom: 60px; }
.inside.inside__02 .inside__article--top02--slideImg {
  overflow: hidden;
  transform: translateX(-825px) scale(2.45);
  -webkit-transform: translateX(-825px) scale(2.45);
  transform-origin: left top; }
  .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper {
    -webkit-animation: slideImg 30s linear infinite;
    animation: slideImg 30s linear infinite;
    white-space: nowrap;
    font-size: 0; }
    .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div {
      display: inline-block;
      width: 825px; }
      .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul {
        position: relative;
        padding-top: calc(178 / 825 * 100%); }
        .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li {
          position: absolute; }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li > span {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 5px; }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(1) {
            width: calc(258 / 825 * 100%);
            height: 100%;
            top: 0;
            left: 0; }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(2), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(3), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(4), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(5) {
            width: calc(135 / 825 * 100%);
            height: calc(50% - 4px); }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(2), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(4) {
            top: 0; }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(3), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(5) {
            bottom: 0; }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(2), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(3) {
            left: calc(258 / 825 * 100% + 8px); }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(4), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(5) {
            left: calc(393 / 825 * 100% + 16px); }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(6), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(7), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(8), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(9), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(10) {
            width: calc(83 / 825 * 100%);
            height: calc((100% - 16px) / 3); }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(6), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(7), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(8) {
            left: calc(528 / 825 * 100% + 24px); }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(6), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(9), .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(10) {
            top: 0; }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(7) {
            top: calc((100% - 16px) / 3 + 8px); }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(8) {
            bottom: 0; }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(9) {
            left: calc(611 / 825 * 100% + 32px); }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(10) {
            left: calc(694 / 825 * 100% + 40px); }
          .inside.inside__02 .inside__article--top02--slideImg .inside__article--top02--slideImg--wrapper > div > ul > li:nth-child(11) {
            width: calc(166 / 825 * 100% + 8px);
            height: calc((100% - 16px) / 3 * 2 + 8px);
            bottom: 0;
            left: calc(611 / 825 * 100% + 32px); }
.inside.inside__02 .inside__article .inside__article--top02--movie {
  flex-direction: column; }
  .inside.inside__02 .inside__article .inside__article--top02--movie > li {
    position: relative;
    width: 100%; }
    .inside.inside__02 .inside__article .inside__article--top02--movie > li img {
      height: 25px; }
    .inside.inside__02 .inside__article .inside__article--top02--movie > li > div {
      position: absolute;
      width: 255px;
      top: 4px;
      left: 5%;
      pointer-events: none;
      animation: anime-Run 1s linear infinite alternate;
      -webkit-animation: anime-Run 1s linear infinite alternate; }
      .inside.inside__02 .inside__article .inside__article--top02--movie > li > div > span {
        background-image: url("../img/character/2__1.png");
        background-size: 600% auto;
        display: block;
        -webkit-animation: animeX--6 0.5s steps(6) infinite;
        animation: animeX--6 0.5s steps(6) infinite;
        transform: translateY(-95%); }
    .inside.inside__02 .inside__article .inside__article--top02--movie > li > ul > li {
      position: absolute;
      width: 255px;
      z-index: 2;
      pointer-events: none;
      animation-delay: 1s; }
      .inside.inside__02 .inside__article .inside__article--top02--movie > li > ul > li span {
        background-image: url("../img/character/2__1.png");
        background-size: 600% auto;
        display: block; }
      .inside.inside__02 .inside__article .inside__article--top02--movie > li > ul > li.active {
        animation: anime-Down 1.6s linear 0s 1;
        -webkit-animation: anime-Down 1.6s linear 0s 1; }
      .inside.inside__02 .inside__article .inside__article--top02--movie > li > ul > li:nth-child(1) {
        top: 68%;
        right: 5%;
        animation: anime-Puru 1s linear 0s infinite;
        -webkit-animation: anime-Puru 1s linear 0s infinite; }
      .inside.inside__02 .inside__article .inside__article--top02--movie > li > ul > li:nth-child(2) {
        top: -43.6%;
        right: 71%; }
        .inside.inside__02 .inside__article .inside__article--top02--movie > li > ul > li:nth-child(2) span {
          -webkit-animation: animeX--5 1s steps(5) infinite;
          animation: animeX--5 1s steps(5) infinite; }
    .inside.inside__02 .inside__article .inside__article--top02--movie > li:first-child {
      margin-bottom: 60px; }