.mainv_toptxt01 {
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 60%, #000 65%);
  animation: mainv_toptxt01-animation 0.5s 2.2s cubic-bezier(0.25, 0.06, 0.5, 1) forwards;
  mask-size: 100% 200%;
  mask-position: center 0%; }
  .mainv_toptxt01 .mainv_txt0101 {
    opacity: 0;
    animation: mainv_txt0101-animation 3s 1.5s cubic-bezier(0.25, 0.06, 0.5, 1) forwards; }
  .mainv_toptxt01 .mainv_txt0102 {
    transform-origin: center top;
    transform: scaleY(0);
    animation: mainv_txt0102-animation 0.8s 1.5s cubic-bezier(0.25, 0.06, 0.5, 1) forwards; }
  .mainv_toptxt01 .mainv_txt0103 {
    mask-image: linear-gradient(180deg, black 0%, black 40%, rgba(0, 0, 0, 0) 60%);
    mask-repeat: no-repeat;
    mask-size: 100% 250%;
    mask-position: center 100%;
    animation: mask-animation2 1s 2s cubic-bezier(0.25, 0.06, 0.5, 1) forwards; }

@keyframes mainv_toptxt01-animation {
  0% {
    mask-position: center 100%; }
  100% {
    mask-position: center 0%; } }
@keyframes mainv_txt0101-animation {
  0% {
    opacity: 0;
    filter: brightness(100%) drop-shadow(0 0 40px #fff); }
  50% {
    opacity: 1;
    filter: brightness(100%) drop-shadow(0 0 20px #fff); }
  100% {
    opacity: 1;
    filter: brightness(100%) drop-shadow(0 0 0 #fff); } }
@keyframes mainv_txt0102-animation {
  0% {
    transform: scaleY(0); }
  100% {
    transform: scale(1); } }
@keyframes mainv_txt0103-animation {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.slick-slide .mainv01_img01 {
  opacity: 0;
  mask-image: radial-gradient(black 0%, black 10%, rgba(0, 0, 0, 0) 15%);
  mask-repeat: no-repeat;
  mask-position: 50% 50%; }
.slick-slide.slick-current .mainv01_img01 {
  animation: mask-animation 2s 0s cubic-bezier(0.25, 0.06, 0.5, 1) forwards; }
.slick-slide .mainv_undertxt02, .slick-slide .mainv_undertxt03 {
  display: block;
  mask-image: linear-gradient(180deg, black 0%, black 40%, rgba(0, 0, 0, 0) 60%);
  mask-repeat: no-repeat;
  mask-size: 100% 250%;
  mask-position: center 100%; }
.slick-slide.slick-current .mainv_undertxt02, .slick-slide.slick-current .mainv_undertxt03 {
  animation: mask-animation2 1.5s 0.2s cubic-bezier(0.25, 0.06, 0.5, 1) forwards; }
.slick-slide .mainv01_txt01 {
  transition: opacity .9s .7s ease-in-out; }
.slick-slide .mainv_undertxt01wrap {
  transition: opacity .9s .7s ease-in-out; }
.slick-slide:not(.slick-current) .mainv01_txt01 {
  transition: opacity .4s .0s ease-in-out;
  opacity: 0; }
.slick-slide:not(.slick-current) .mainv_undertxt01wrap {
  transition: opacity .4s .0s ease-in-out;
  opacity: 0; }

@keyframes mask-animation {
  0% {
    opacity: 0;
    mask-size: 10% 10%; }
  100% {
    opacity: 1;
    mask-size: 1000% 1000%; } }
@keyframes mask-animation2 {
  0% {
    mask-position: center 100%; }
  100% {
    mask-position: center 0%; } }
.slick-slider .slick-list {
  pointer-events: none; }
.slick-slider .slick-dots {
  z-index: 5;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px; }
  .slick-slider .slick-dots li {
    width: auto; }
    .slick-slider .slick-dots li button {
      width: 80px;
      height: 20px;
      padding: 0 10px; }
      .slick-slider .slick-dots li button::before, .slick-slider .slick-dots li button::after {
        content: '';
        width: 100%;
        height: 4px;
        border-radius: 0;
        position: absolute;
        top: calc(50% - 2px);
        left: 0;
        background: #ddd;
        opacity: 1; }
      .slick-slider .slick-dots li button::after {
        background: #111;
        position: absolute;
        width: 100%;
        transition: opacity .5s;
        opacity: 0; }
    .slick-slider .slick-dots li.slick-active button::after {
      transition: opacity 0s;
      opacity: 1;
      animation: nav-animation 5s linear forwards; }
@media screen and (max-width: 768px) {
  .slick-slider {
    padding-bottom: 25px; }
    .slick-slider .slick-dots {
      bottom: 0; }
      .slick-slider .slick-dots li button {
        max-width: 10vw; } }

@keyframes nav-animation {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }
