@charset "utf-8";

/********** ローディング ********/
.loading_logo{
	animation: flash 1s ease-in-out 0s infinite;
}
.loading {
	animation: loading 1s ease-in-out 2.6s forwards;
}
@keyframes loading {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		z-index: -9;
	}
}

/********** ローディング時固定 ********/
body {
	/*overflow: hidden;*/
	overscroll-behavior: none;
}
body.active {
	animation: loading2 0.1s ease-in-out 2.6s forwards;
}
@keyframes loading2 {
	0% {
		overflow: hidden
	}
	100% {
		overflow: auto;
	}
}





main .contents#tec02 .inr > ul > li{
    opacity: 0;
}
main .contents#tec02 .inr > ul > li.active{
    animation:fade-in-top-new 0.3s ease-in-out 0s forwards;
}
@keyframes fade-in-top-new {
  0% {
    opacity: 0;
    transform: translate3d(0, -30px, 0) scale(1.2);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0px, 0) scale(1.0);
  }
}

main .contents#tec01 h3,
main .contents#tec02 h3 {
	overflow: hidden;
	position: relative;
}
main .contents#tec01 h3 img,
main .contents#tec02 h3 img{
    opacity: 0;
}
main .contents#tec01 h3.active img,
main .contents#tec02 h3.active img{
    animation:fade-in 0.6s ease-in-out 0.3s forwards;
}
main .contents#tec01 h3:before,
main .contents#tec02 h3:before{
	background: #222;
	bottom: 0;
	content: '';
	left: 0;
    width: 100%;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
    opacity: 0;
}
main .contents#tec01 h3.active:before,
main .contents#tec02 h3.active:before{
	animation: img-wrap 0.5s cubic-bezier(.4, 0, .2, 1) forwards;
}
main .contents#tec02 h3.other img{
    opacity: 1;
}
main .contents#tec02 h3.other.active img{
    animation: none;
}
main .contents#tec02 h3.other:before {
    display: none;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes img-wrap {
	0% {
        opacity: 1;
		transform: translateX(-100%);
	}
	30% {
        opacity: 1;
		transform: translateX(0%);
	}
    60% {
        opacity: 1;
		transform: translateX(0%);
	}
	100% {
        opacity: 1;
		transform: translateX(100%);
	}
}



main .contents h2,
main .contents#tec01 .inr a,
main .contents#pfm h3,
main .contents#videos,
main .contents#lineup h3{
    opacity: 0;
}
main .contents h2.active,
main .contents#tec01 .inr a.active,
main .contents#pfm h3.active,
main .contents#videos.active,
main .contents#lineup h3.active{
    animation:fade-in-foot-new 1.0s ease-in-out 0s forwards;
}
@keyframes fade-in-foot-new {
  0% {
    opacity: 0;
    transform: translate3d(0px, 30px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0px, 0);
  }
}







main .contents#pfm .inr ul li::before,
main .contents#pfm .inr ul li::after{
    content:"";
    position: absolute;
    background:#FFF;
    width: 0;
    height:1px;
    transition: all 0.2s linear;
}
main .contents#pfm .inr ul li::before{
  right: 0;
  bottom: 0;
}
main .contents#pfm .inr ul li::after{
  left: 0;
  top: 0;
}
main .contents#pfm .inr ul li > div{
    display: block;
}
main .contents#pfm .inr ul li > div::before,
main .contents#pfm .inr ul li > div::after{
  content:"";
  position: absolute;
  background: #FFF;
  width:1px;
  height:0;
  transition: all 0.1s linear;
}
main .contents#pfm .inr ul li > div::before{
  left: 0;
  bottom: 0;
}
main .contents#pfm .inr ul li > div::after{
  right: 0;
  top: 0;
}
main .contents#pfm .inr ul li.active::before,
main .contents#pfm .inr ul li.active::after{
  width: 100%;
}
main .contents#pfm .inr ul li.active::after{
  transition-delay: 0s;
}
main .contents#pfm .inr ul li.active::before{
  transition-delay: 0.3s;
}
main .contents#pfm .inr ul li.active > div::before,
main .contents#pfm .inr ul li.active > div::after{
  height: 100%;
}
main .contents#pfm .inr ul li.active > div::before{
  transition-delay: 0.5s;
}
main .contents#pfm .inr ul li.active > div::after{
  transition-delay: 0.2s;
}
main .contents#pfm .inr ul li > div > span{
    opacity: 0;
    display: block;
}
main .contents#pfm .inr ul li.active > div > span{
    animation:fade-in-foot-new 1.0s ease-in-out 0s forwards;
}