@charset "UTF-8";
ul.talck-box01 li p.ani {
  opacity: 0;
  transform: translate(0, 0.6em);
}
ul.talck-box01 li p.ani.animation {
  animation: fadeup 0.4s 0.4s ease-out forwards;
}
ul.talck-box01 li p span.morkerani.ani {
  padding-bottom: 0.25em;
  background-image: linear-gradient(90deg, #FFFF00, #FFFF00); /* マーカーの色を指定 */
  background-repeat: no-repeat;
  background-position: left bottom 25%; /* マーカーの発生位置を左下に設定 */
  background-size: 0 40%; /* マーカーの横幅 / 縦幅 */
}
ul.talck-box01 li p span.morkerani.animation {
  animation: marker-ani01 1.8s 1.6s ease forwards;
}
ul.talck-box01 li p span.morkerani:nth-of-type(2).animation {
  animation-delay: 3.6s;
}
ul.talck-box01 li.figure02.ani {
  opacity: 0;
  transform: translate(0, 0.6em);
}
ul.talck-box01 li.figure02.ani.animation {
  animation: fadeup 0.4s 0.4s ease-out forwards;
}

@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translate(0, 0.6em);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes marker-ani01 {
  0% {
    background-size: 0 40%; /* マーカーの横幅 / 縦幅 */
  }
  100% {
    background-size: 100% 40%;
  }
}
div.main-title-wrap span.illust01.ani {
  opacity: 0;
  animation: scale-ani01 0.4s 1s ease-out forwards;
}

div.main-title-wrap span.illust02.ani {
  opacity: 0;
  animation: scale-ani01 0.4s 1.4s ease-out forwards;
}

section.contents div.q-title-box h3.ani::after {
  transform-origin: left center;
  transform: translate(-44%, 0) scaleX(0);
}
section.contents div.q-title-box h3.ani.animation::after {
  animation: scaleX-ani 0.4s 1.4s ease-out forwards;
}

@keyframes scaleX-ani {
  0% {
    transform-origin: left center;
    transform: translate(-44%, 0) scaleX(0);
  }
  100% {
    transform-origin: left center;
    transform: translate(-44%, 0) scaleX(1);
  }
}
@keyframes scale-ani01 {
  0% {
    opacity: 0;
    transform-origin: center center;
    transform: translate(0, 0) scale(0);
  }
  80% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(1.2);
  }
  100% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(1);
  }
}
/*イラスト部分アニメーション*/
section.contents ul.talck-box01 li.mryonden figure.illust-yonden02.ani,
section.contents ul.talck-box01 li.mryonden figure.illust-yonden01.ani {
  transform-origin: center center;
  transform: translate(15%, 0) scale(0);
}
section.contents ul.talck-box01 li.mryonden figure.illust-yonden02.animation,
section.contents ul.talck-box01 li.mryonden figure.illust-yonden01.animation {
  animation: scale-kozooani-B 0.4s ease-out forwards;
}

section.contents ul.talck-box01 li.kozoo figure.illust-kozoo02.ani,
section.contents ul.talck-box01 li.kozoo figure.illust-kozoo01.ani {
  transform-origin: center center;
  transform: translate(15%, 0) scale(0);
}
section.contents ul.talck-box01 li.kozoo figure.illust-kozoo02.animation,
section.contents ul.talck-box01 li.kozoo figure.illust-kozoo01.animation {
  animation: scale-kozooani-A 0.4s ease-out forwards;
}
section.contents ul.talck-box01 li.kozoo figure.illust-kozoo02.animation img.buruburu,
section.contents ul.talck-box01 li.kozoo figure.illust-kozoo01.animation img.buruburu {
  animation: buruani 5s infinite;
}
@media screen and (min-width: 768px) {
  section.contents ul.talck-box01 li.kozoo figure.illust-kozoo02.animation img.buruburu,
  section.contents ul.talck-box01 li.kozoo figure.illust-kozoo01.animation img.buruburu {
    animation: buruani 4.4s infinite;
  }
}

@keyframes scale-kozooani-A {
  0% {
    transform-origin: center center;
    transform: translate(15%, 0) scale(0);
  }
  80% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(15%, 0) scale(1.2);
  }
  100% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(15%, 0) scale(1);
  }
}
@keyframes scale-kozooani-B {
  0% {
    transform-origin: center center;
    transform: translate(0, 0) scale(0);
  }
  80% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(1.2);
  }
  100% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes buruani02 {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  7% {
    transform: translate(2px, 2px) rotateZ(1deg);
  }
  14% {
    transform: translate(0px, 2px) rotateZ(0deg);
  }
  21% {
    transform: translate(2px, 0px) rotateZ(-1deg);
  }
  28% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  35% {
    transform: translate(2px, 2px) rotateZ(1deg);
  }
  42% {
    transform: translate(0px, 2px) rotateZ(0deg);
  }
  49% {
    transform: translate(2px, 0px) rotateZ(-1deg);
  }
  56% {
    transform: translate(2px, 2px) rotateZ(1deg);
  }
  63% {
    transform: translate(0px, 2px) rotateZ(0deg);
  }
  70% {
    transform: translate(2px, 0px) rotateZ(-1deg);
  }
  77% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  84% {
    transform: translate(2px, 2px) rotateZ(1deg);
  }
  91% {
    transform: translate(0px, 2px) rotateZ(0deg);
  }
  98% {
    transform: translate(2px, 0px) rotateZ(-1deg);
  }
  100% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
}
@keyframes buruani {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  1% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  2% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  3% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  4% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  5% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  6% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  7% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  8% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  9% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  10% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  11% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  12% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  13% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  14% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  15% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  16% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  17% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  18% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  19% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  20% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  21% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  22% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  23% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  24% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  25% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  26% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  27% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  28% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  29% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  30% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  31% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  32% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  33% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  34% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  35% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  36% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  37% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  38% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  39% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  40% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  41% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  42% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  43% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  44% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  45% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  46% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  47% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  48% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  49% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  50% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  51% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  52% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  53% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  54% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  55% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  56% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  57% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  58% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  59% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  60% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  61% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  62% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  63% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  64% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  65% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  66% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  67% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  68% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  69% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  70% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  71% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  72% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  73% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  74% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  75% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  76% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  77% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  78% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  79% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  80% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  81% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  82% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  83% {
    transform: translate(1px, 0px) rotateZ(-0.8deg);
  }
  84% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  85% {
    transform: translate(1px, 1px) rotateZ(0.8deg);
  }
  86% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }
  87% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  100% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
}/*# sourceMappingURL=animation.css.map */