@charset "UTF-8";


.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}

.fadeIn_up {
  opacity: 0;
}
.fadeIn_up.is-show {
	animation-name:fadeUpAnime;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(60px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


#header.is-show {
	background: #312b07;
  transition: 0.8s;
}

.delay-time03{
	animation-delay: 0.3s;
}
.delay-time06{
	animation-delay: 0.6s;
}





:root {
  --delay: 800ms;
  --duration: 800ms;
  --iterations: 1;
}
/* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */


.reveal-text,
.reveal-text::after {
  -webkit-animation-delay: var(--animation-delay, 2s);
          animation-delay: var(--animation-delay, 2s);
  -webkit-animation-iteration-count: var(--iterations, 1);
          animation-iteration-count: var(--iterations, 1);
  -webkit-animation-duration: var(--duration, 800ms);
          animation-duration: var(--duration, 800ms);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
          animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  -webkit-animation-name: clip-text;
          animation-name: clip-text;
}

.reveal-text::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #bf9600;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    -webkit-animation-name: text-revealer;
            animation-name: text-revealer;
  }


@-webkit-keyframes clip-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}


@keyframes clip-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}


@-webkit-keyframes text-revealer {
  
  0%, 50% {
    transform-origin: 0 50%;
  }
  
  60%, 100% {
    transform-origin: 100% 50%;   
  }

  
  60% {
    transform: scaleX(1);
  }
  
  100% {
    transform: scaleX(0);
  }
}


@keyframes text-revealer {
  
  0%, 50% {
    transform-origin: 0 50%;
  }
  
  60%, 100% {
    transform-origin: 100% 50%;   
  }

  
  60% {
    transform: scaleX(1);
  }
  
  100% {
    transform: scaleX(0);
  }
}




/* 画像マウスオーバー•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */


.imgAni {
  position: relative;
  overflow: hidden;
}
img{
  cursor: pointer;
}
.imgAni img {
  transform: scale(1);
  transition: .3s ease-in-out;
}
.imgAni:hover img {
  transform: scale(1.3);
}



/* ボタンマウスオーバー•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */

.btnAni {
  overflow: hidden;
}
.btnAni::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 120%;
  height: 100%;
  background: #bf9600;
  transform-origin: right top;
  transform: skewX(-30deg) scale(0, 1);
  transition: transform .3s;
}
.btnAni:hover::before {
  transform-origin: left top;
  transform: skewX(-30deg) scale(1, 1);
}