/**
 * ----------------------------------------
 * animation kenburns-top
 * ----------------------------------------
 */
@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */

@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
/**
 * ----------------------------------------
 * animation flip-vertical-right
 * ----------------------------------------
 */
@-webkit-keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  10% { /* 最初の0.5秒で2回転 */
    -webkit-transform: rotateY(720deg);
            transform: rotateY(720deg);
  }
  100% {
    -webkit-transform: rotateY(720deg);
            transform: rotateY(720deg);
  }
}

@keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  10% { /* 最初の0.5秒で2回転 */
    -webkit-transform: rotateY(720deg);
            transform: rotateY(720deg);
  }
  100% {
    -webkit-transform: rotateY(720deg);
            transform: rotateY(720deg);
  }
}

/**
 * ----------------------------------------
 * animation pulsate-fwd
 * ----------------------------------------
 */

@keyframes pulsate-fwd {
  0%   { transform: scale(1); }
  6%   { transform: scale(1.1); }
  12%  { transform: scale(1); }
  18%  { transform: scale(1.1); }
  24%  { transform: scale(1); }
  100% { transform: scale(1); }
}
/**
 * ----------------------------------------
 * animation fade--in
 * ----------------------------------------
 */
@-webkit-keyframes fade--in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade--in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-in-right
 * ----------------------------------------
 */

@-webkit-keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation jello-vertical
 * ----------------------------------------
 */
@keyframes jello-vertical {
  0% {
    transform: scale3d(1, 1, 1);
  }
  6% {
    transform: scale3d(0.75, 1.25, 1);
  }
  12% {
    transform: scale3d(1.25, 0.75, 1);
  }
  18% {
    transform: scale3d(0.85, 1.15, 1);
  }
  24% {
    transform: scale3d(1.05, 0.95, 1);
  }
  30% {
    transform: scale3d(0.95, 1.05, 1);
  }
  36% {
    transform: scale3d(1, 1, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
/**
 * ----------------------------------------
 * animation wobble-hor-bottom
 * ----------------------------------------
 */
@-webkit-keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}
@keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}

/**
 * ----------------------------------------
 * animation tracking-in-contract
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}
@keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation bounce-bottom
 * ----------------------------------------
 */
@-webkit-keyframes bounce-bottom {
  0% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(9px);
            transform: translateY(9px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-bottom {
  0% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(9px);
            transform: translateY(9px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@keyframes shake-horizontal {
  0%, 100% {
    transform: translateX(0);
  }
  2%, 6%, 10%, 14% {
    transform: translateX(-5px);
  }
  4%, 8%, 12%, 16% {
    transform: translateX(5px);
  }
  18% {
    transform: translateX(4px);
  }
  20% {
    transform: translateX(-4px);
  }
  22%, 100% {
    transform: translateX(0);
  }
}
/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */

@keyframes blink-1 {
  0%, 10% {
    opacity: 1;
  }
  5%, 15% {
    opacity: 0;
  }
  20%, 100% {
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation tilt-in-br
 * ----------------------------------------
 */

@keyframes tilt-in-br {
  0% {
    -webkit-transform: rotateY(-35deg) rotateX(-20deg) translate(250px, 250px) skew(12deg, 15deg);
            transform: rotateY(-35deg) rotateX(-20deg) translate(250px, 250px) skew(12deg, 15deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation tilt-in-left-2
 * ----------------------------------------
 */

@keyframes tilt-in-left-2 {
  0% {
    -webkit-transform: rotateX(30deg) translateX(-300px) skewX(30deg);
            transform: rotateX(30deg) translateX(-300px) skewX(30deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg) translateX(0) skewX(0deg);
            transform: rotateX(0deg) translateX(0) skewX(0deg);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */

@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
/**
 * ----------------------------------------
 * animation fade-in-fwd
 * ----------------------------------------
 */
@keyframes fade-in-fwd {
  0% {
    -webkit-transform: translateZ(-80px);
            transform: translateZ(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * poyoyon
 * ----------------------------------------
 */
.poyoyon {
  opacity: 0;
    animation:
        fadeUp 0.5s ease forwards,
        poyoyon 1.6s linear .4s infinite;          
}

.poyoyon-once {
  opacity: 0;
    animation:
        fadeUp 0.5s ease forwards,
        poyoyon 1.6s;          
}

@keyframes poyoyon {
    0% {
		-webkit-transform: scale(1, 1) translate(0, 0);
		transform: scale(1, 1) translate(0, 0)
	}
	15% {
		-webkit-transform: scale(0.95, 0.95) translate(0%, 3%);
		transform: scale(0.95, 0.95) translate(0%, 3%)
	}
	30% {
		-webkit-transform: scale(1.05, 0.95) translate(0%, 8%);
		transform: scale(1.05, 0.95) translate(0%, 8%)
	}
	50% {
		-webkit-transform: scale(0.95, 1.05) translate(0%, -8%);
		transform: scale(0.95, 1.05) translate(0%, -8%)
	}
	70% {
		-webkit-transform: scale(1.05, 0.95) translate(0%, 3%);
		transform: scale(1.05, 0.95) translate(0%, 3%)
	}
	100% {
		-webkit-transform: scale(1, 1) translate(0, 0);
		transform: scale(1, 1) translate(0, 0)
	}
}
/**
 * ----------------------------------------
 * 点滅
 * ----------------------------------------
 */
@keyframes blink-1 {
  0%, 20% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1; 
  }
}

/**
 * ----------------------------------------
 * 大きめタイトル用
 * ----------------------------------------
 */
/* 文字ごと */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateX(-30px);
}
.char.animate {
  animation: slideIn 0.8s ease-out forwards;
}
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 単語ごと */
.head__staff--ttl span.word ,
.voice__title--voice span.word,
.visit__btn em span.word{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* slow アニメーション用 */
.char.slow {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) scale(0.95); 
}

.char.slow-animate {
  animation: slowSlideIn 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes slowSlideIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1); 
  }
}

/* 左右から中央にフェードイン */
.char.slide-in {
  opacity: 0;
  transform: translateX(50px);
  animation: slideInCenter 0.6s forwards;
}
.char.slide-in:nth-child(even) {
  transform: translateX(-50px);
}

@keyframes slideInCenter {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ふわっとフェードアップ */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s ease-out forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ふわっとみぎからフェード*/
.fade-right {
  opacity: 0;
  transform: translatex(30px);
  animation: fadeRight 1s ease-out forwards;
}

@keyframes fadeRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ふわっとひだりからフェード*/
.fade-left {
  opacity: 0;
  transform: translatex(-30px);
  animation: fadeLeft 1s ease-out forwards;
}

@keyframes fadeLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* .jump-target内は別クラスで管理 */
.jump-target .char {
  display: inline-block;
  opacity: 1;
  transform: unset;
  will-change: transform;
}
.jump-target .char.jump-active,
.jump-loop .char.jump-active {
  animation: jump-once 0.3s forwards; 
}
.jump-loop .char {
  opacity: 1;
  transform: translateX(0);
}
@keyframes jump-once {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}


/**
 * ----------------------------------------
 * title-left
 * ----------------------------------------
 */
 .tilt-left{
	  animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }

@keyframes tilt-in-fwd-bl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
            transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}


 /**
 * ----------------------------------------
 * tilt-right
 * ----------------------------------------
 */
 .tilt-right{
     animation: tilt-in-fwd-br 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }

@keyframes tilt-in-fwd-br {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(-35deg) translate(300px, 300px) skew(35deg, -10deg);
            transform: rotateY(20deg) rotateX(-35deg) translate(300px, 300px) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}



/**
 * ----------------------------------------
 * wabe-btn
 * ----------------------------------------
 */

    .wave-btn {
      position: relative;
      display: inline-block;
      padding: 16px 60px;
      border-radius: 100px;
      margin-bottom: 30px;
      text-align: center;
      text-transform: uppercase;
      font-size: 2rem;
      font-weight: bold;
      background-color: #fff;
      color: #02001a!important;
      min-width: 400px;
      margin: auto;
      box-sizing: border-box;
      text-decoration: none;
      overflow: hidden;
      cursor: pointer;
      transition: color 0.5s ease-in-out;
      z-index: 1;
      border: 2px solid #fff;
    }
    .wave-btn:hover {
      color: #fff!important;
      border: 2px solid #fff;
      opacity: 1;
    }
    .wave-btn:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    .wave-btn:after {
      content: "";
      position: absolute;
      left: 9px;
      top: 9px;
      width: 100%;
      height: 100%;
      transition: all 0.3s 0.2s;
      z-index: -2;
    }
    .wave-btn:hover:after {
      left: 0;
      top: 0;
      transition: all 0.3s;
    }
    .wave-btn__inner {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -1;
    }
    .wave-btn__blobs {
      position: relative;
      height: 100%;
      filter: url('#wave');
      display: block;
    }
    .wave-btn__blob {
      position: absolute;
      top: 6px; /* border width */
      width: 25%; /* 100% / 4 blobs */
      height: 100%;
      background: #000;
      border-radius: 100%;
      transform: translate3d(0, 150%, 0) scale(1.4);
      transition: transform 0.45s;
    }
    .wave-btn__blob:nth-child(1) { left: 0; transition-delay: 0s; }
    .wave-btn__blob:nth-child(2) { left: 25%; transition-delay: 0.08s; }
    .wave-btn__blob:nth-child(3) { left: 50%; transition-delay: 0.16s; }
    .wave-btn__blob:nth-child(4) { left: 75%; transition-delay: 0.24s; }
    .wave-btn:hover .wave-btn__blob {
      transform: translate3d(0, 0, 0) scale(1.4);
    }

    @media(max-width: 767px){
      .wave-btn{
        font-size: 1.4rem;
        padding: 10px 0;
        max-width: 100%;
        min-width: 100%;;
      }
      .wave-btn:hover{
        animation: none !important;
      }
        
    }
    /**
 * ----------------------------------------
 * 当社の強み背景アニメーション
 * ----------------------------------------
 */

      @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes fillIn {
    to {
      opacity: 1;
    }
  }