@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
/* ヘッダー */
/* TOP画像スライド */
.top-animate {
  position: relative;
}

.top-animate_item {
  position: absolute;
}

.top-animate_item img {
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
}

.top-animate_item img.next {
  position: relative;
  z-index: 2;
  animation: slide-animation 3s;
  mask-image: linear-gradient(60deg, #000 0%, #000 0%, transparent 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(60deg, #000 0%, #000 0%, transparent 0%, transparent 100%);
  -webkit-mask-size: auto 100%;
          mask-size: auto 100%;
  mask-repeat: no-repeat;
  mask-position: 0 0;
  animation-fill-mode: forwards;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
}

.top-animate_item img.now {
  position: relative;
  z-index: 1;
  animation: inherit;
}

.top-animate_item img.first_item {
  position: relative;
  z-index: 1;
  animation: inherit;
}

@keyframes slide-animation {
  39% {
    mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 0%, transparent 100%);
  }
  40% {
    mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 0%, transparent 100%);
  }
  41% {
    mask-image: linear-gradient(90deg, #000 0%, #000 5%, transparent 5%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 5%, transparent 5%, transparent 100%);
  }
  42% {
    mask-image: linear-gradient(90deg, #000 0%, #000 10%, transparent 10%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 10%, transparent 10%, transparent 100%);
  }
  43% {
    mask-image: linear-gradient(90deg, #000 0%, #000 15%, transparent 15%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 15%, transparent 15%, transparent 100%);
  }
  44% {
    mask-image: linear-gradient(90deg, #000 0%, #000 20%, transparent 20%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 20%, transparent 20%, transparent 100%);
  }
  45% {
    mask-image: linear-gradient(90deg, #000 0%, #000 25%, transparent 25%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 25%, transparent 25%, transparent 100%);
  }
  46% {
    mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 30%, transparent 100%);
  }
  47% {
    mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 35%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 35%, transparent 100%);
  }
  48% {
    mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 40%, transparent 100%);
  }
  49% {
    mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 45%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 45%, transparent 100%);
  }
  50% {
    mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 50%, transparent 100%);
  }
  51% {
    mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 55%, transparent 100%);
  }
  52% {
    mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 60%, transparent 100%);
  }
  53% {
    mask-image: linear-gradient(90deg, #000 0%, #000 65%, transparent 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 65%, transparent 65%, transparent 100%);
  }
  54% {
    mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 70%, transparent 100%);
  }
  55% {
    mask-image: linear-gradient(90deg, #000 0%, #000 75%, transparent 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 75%, transparent 75%, transparent 100%);
  }
  56% {
    mask-image: linear-gradient(90deg, #000 0%, #000 80%, transparent 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 80%, transparent 80%, transparent 100%);
  }
  57% {
    mask-image: linear-gradient(90deg, #000 0%, #000 85%, transparent 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 85%, transparent 85%, transparent 100%);
  }
  58% {
    mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 90%, transparent 100%);
  }
  59% {
    mask-image: linear-gradient(90deg, #000 0%, #000 95%, transparent 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 95%, transparent 95%, transparent 100%);
  }
  60% {
    mask-image: linear-gradient(90deg, #000 0%, #000 100%, transparent 100%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%, transparent 100%, transparent 100%);
  }
  61% {
    mask-image: linear-gradient(90deg, #000 0%, #000 105%, transparent 105%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 105%, transparent 105%, transparent 100%);
  }
  62% {
    mask-image: linear-gradient(90deg, #000 0%, #000 110%, transparent 110%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 110%, transparent 110%, transparent 100%);
  }
  63% {
    mask-image: linear-gradient(90deg, #000 0%, #000 115%, transparent 115%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 115%, transparent 115%, transparent 100%);
  }
  64% {
    mask-image: linear-gradient(90deg, #000 0%, #000 120%, transparent 120%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 120%, transparent 120%, transparent 100%);
  }
  65% {
    mask-image: linear-gradient(90deg, #000 0%, #000 125%, transparent 125%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 125%, transparent 125%, transparent 100%);
  }
  66% {
    mask-image: linear-gradient(90deg, #000 0%, #000 130%, transparent 130%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 130%, transparent 130%, transparent 100%);
  }
  67% {
    mask-image: linear-gradient(90deg, #000 0%, #000 135%, transparent 135%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 135%, transparent 135%, transparent 100%);
  }
  68% {
    mask-image: linear-gradient(90deg, #000 0%, #000 140%, transparent 140%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 140%, transparent 140%, transparent 100%);
  }
  69% {
    mask-image: linear-gradient(90deg, #000 0%, #000 145%, transparent 145%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 145%, transparent 145%, transparent 100%);
  }
  100% {
    mask-image: linear-gradient(90deg, #000 0%, #000 100%, transparent 100%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%, transparent 100%, transparent 100%);
  }
}/*# sourceMappingURL=scss_style.css.map */