/*---------------------------
アニメーション用CSS
-----------------------------*/
.filterBlur-02{
  opacity: 0;
  filter: blur(4px);
  transition: 1.2s ease;
  -webkit-transition: 1.2s ease;
  -webkit-filter: blur(4px);
}
.filterBlur-02.active{
  opacity: 1;
  filter: blur(0);
  -webkit-filter: blur(0);
}

.filterBlur{
  filter: blur(4px);
  transition: .6s ease;
  -webkit-transition: .6s ease;
  -webkit-filter: blur(4px);
}
.filterBlur.active{
  filter: blur(0);
  -webkit-filter: blur(0);
}

.blurUp{
  filter: blur(4px);
  -webkit-filter: blur(4px);
  transform: translate(0px, 10px);
  -webkit-transform: translate(0px, 10px);
  transition: .6s ease;
  -webkit-transition: .6s ease;
}
.blurUp.active{
  filter: blur(0);
  -webkit-filter: blur(0);
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
}

.clipPath{
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition: 3s ease;
  -webkit-transition: 3s ease;
}
.clipPath.delay{
  transition-delay: 1s;
  -webkit-transition-delay: 1s;
}
.clipPath.active{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
.clipPath.left-to-right{
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: 2s ease-out;
  -webkit-transition: 2s ease-out;
}
.clipPath.left-to-right.active{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
.clipPath.right-to-left{
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);
  transition: 2s ease-out;
  -webkit-transition: 2s ease-out;
}
.clipPath.right-to-left.active{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

.overflowHidden{
  overflow: hidden;
}
.scaleDown{
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transition: 2s ease;
  -webkit-transition: 2s ease;
}
.scaleDown.small{
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transition: .4s ease;
  -webkit-transition: .4s ease;
  overflow: .8;
}
.scaleDown.slow{
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transition: 3s ease;
  -webkit-transition: 3s ease;
}
.scaleDown.active{
  transform: scale(1);
  -webkit-transform: scale(1);
  overflow: 1;
}

.scaleUp{
  transform: scale(.5);
  -webkit-transform: scale(.5);
  transition: 3s ease-out;
  -webkit-transition: 3s ease-out;
}
.scaleUp.active{
  transform: scale(1);
  -webkit-transform: scale(1);
}

.translateUp{
  transform: translate(0px, 20px);
  -webkit-transform: translate(0px, 20px);
  opacity: 0;
  transition: 1s ease;
  -webkit-transition: 1s ease;
}
.translateUp.active{
  opacity: 1;
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
}

.translateUp-02{
  position: relative;
  top: 0;
  left: 0;
  transform: translateY(100%);
  transition: 1.5s ease;
  -webkit-transition: 1.5s ease;
  opacity: 0;
  filter: blur(4px);
  -webkit-filter: blur(4px);
}
.translateUp-02.active{
  transform: translateY(0);
  -webkit-transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  -webkit-filter: blur(0);
}

.rotateTxt span{
  display: inline-block;
  opacity: 0;
  transform: rotateY(90deg);
  -webkit-transform: rotateY(90deg);
  transition: transform 2s ease-out, opacity 2s ease-out;
  -webkit-transition: transform 2s ease-out, opacity 2s ease-out;
}
.rotateTxt span.space{
  width: .5vw;
}
.rotateTxt.active span:nth-child(1){ transition-delay: 0s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(2){ transition-delay: 0.05s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(3){ transition-delay: 0.1s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(4){ transition-delay: 0.15s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(5){ transition-delay: 0.2s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(6){ transition-delay: 0.25s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(7){ transition-delay: 0.3s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(8){ transition-delay: 0.35s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(9){ transition-delay: 0.4s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(10){ transition-delay: 0.45s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(11){ transition-delay: 0.5s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(12){ transition-delay: 0.55s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(13){ transition-delay: 0.6s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(14){ transition-delay: 0.65s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(15){ transition-delay: 0.7s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(16){ transition-delay: 0.75s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(17){ transition-delay: 0.8s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(18){ transition-delay: 0.85s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(19){ transition-delay: 0.9s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(20){ transition-delay: 0.95s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(21){ transition-delay: 1.0s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(22){ transition-delay: 1.05s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(23){ transition-delay: 1.1s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(24){ transition-delay: 1.15s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(25){ transition-delay: 1.2s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}



.opacityChange{
  opacity: 0.8;
  transition-delay: .5s;
  -webkit-transition-delay: .5s;
  filter: blur(4px);
  -webkit-filter: blur(4px);
}
.opacityChange.early{
  transition: .4s ease-out;
  -webkit-transition: .4s ease-out;
}
.opacityChange.active{
  opacity: 1;
  -webkit-opacity: 1;
  filter: blur(0);
  -webkit-filter: blur(0);
}
.transform-accelerate{
  transform: translate3d(0, 0, 0);
}


.shine_box,
.shine_box_repeat{
  position: relative;
  overflow: hidden;
}
.shine_box::before{
  content: '';
  width: 50%;
  height: 100%;
  left: -75%;
  pointer-events: none;
  position: absolute;
  top: 0;
  -webkit-transform: skewX(-25deg);
  transform: skewX(35deg);
  background: linear-gradient(to right, rgba(192, 192, 192, 0) 0%, rgba(220, 220, 220, 0.3) 20%, rgba(240, 240, 240, 0.8) 50%, rgba(192, 192, 192, 0.3) 80%, rgba(192, 192, 192, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s;
}
.shine_box:hover::before{
  animation: shine2 2s infinite;
  opacity: 1;
}
@keyframes shine2 {
  0% {
    left: -75%;
    opacity: 0;
  }
  10% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    left: 125%;
    opacity: 0;
  }
}


.borderAnimation.right,
.borderAnimation.left{
  position: relative;
  z-index: 2;
}
.borderAnimation.right::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100.2%;
  height: 100.2%;
  border: 7px solid transparent;
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.borderAnimation.left::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100.2%;
  height: 100.2%;
  border: 7px solid transparent;
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* leftのアニメーション: 左下→左上→右上→右下→左下 */
.borderAnimation.left.active::before {
  opacity: 1;
  animation: borderLeft 2s ease forwards;
}

/* rightのアニメーション: 右下→右上→左上→左下→右下 */
.borderAnimation.right.active::before {
  opacity: 1;
  animation: borderRight 2s ease forwards;
}

@keyframes borderLeft {
  0% {
    clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
  }
  25% {
    clip-path: polygon(100% 100%, 100% 0, 100% 0, 100% 100%);
  }
  50% {
    clip-path: polygon(100% 100%, 100% 0, 0 0, 100% 100%);
  }
  75% {
    clip-path: polygon(100% 100%, 100% 0, 0 0, 0 100%);
  }
  100% {
    clip-path: polygon(100% 100%, 100% 0, 0 0, 0 100%, 100% 100%);
  }
}

@keyframes borderRight {
  0% {
    clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
  }
  25% {
    clip-path: polygon(0 100%, 0 0, 0 0, 0 100%);
  }
  50% {
    clip-path: polygon(0 100%, 0 0, 100% 0, 0 100%);
  }
  75% {
    clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
  }
  100% {
    clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* 線を1つだけ表示するための調整 */
.borderAnimation.right.active + .txt_box {
  position: relative;
  z-index: 3;
}

.borderAnimation.left.active + .txt_box {
  position: relative;
  z-index: 3;
}

@media(max-width: 750px){
  .shine_box::before{
    animation: none;
  }
  .shine_box_repeat::before{
    content: '';
    width: 50%;
    height: 100%;
    left: -75%;
    pointer-events: none;
    position: absolute;
    top: 0;
    -webkit-transform: skewX(-25deg);
    transform: skewX(35deg);
    background: linear-gradient(to right, rgba(192, 192, 192, 0) 0%, rgba(220, 220, 220, 0.3) 20%, rgba(240, 240, 240, 0.8) 50%, rgba(192, 192, 192, 0.3) 80%, rgba(192, 192, 192, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .shine_box_repeat::before{
    animation: shine2 2s infinite;
    opacity: 1;
  }
}