@charset "UTF-8";

/* box Animation
====================================================================*/

.fadeInBox {
	opacity: 0;
}

.fadeIn {
	animation: fadeIn 2s ease 0s 1 normal forwards;
}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

.fadeInLeftBox {
	opacity: 0;
}

.fadeInLeft {
	animation: fadeInLeft 1.5s ease 0s 1 normal forwards;
}

	@keyframes fadeInLeft {
		from {
			opacity: 0;
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

.fadeInUpBox {
	opacity: 0;
}

.fadeInUp {
	animation: fadeInUp 1.5s ease 0s 1 normal forwards;
}

.fadeInUpBox02 {
	opacity: 0;
}

.fadeInUp02 {
	animation: fadeInUp 0.6s ease 0s 1 normal forwards;
}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

			/* 【タブレット用のスタイル記述】 */
			@media (min-width: 761px) {
				.fadeInUp02 {
					animation: fadeInUp 0.6s ease 0.3s 1 normal forwards;
				}
			}

.fadeInUpBox {
	opacity: 0;
}

.fadeInUp {
	animation: fadeInUp 0.8s ease 0s 1 normal forwards;
}

.fadeInUpBox02 {
	opacity: 0;
}

.fadeInUp02 {
	animation: fadeInUp 0.6s ease 0s 1 normal forwards;
}

.fadeInUpBox03 {
	opacity: 0;
}

.fadeInUp03 {
	animation: fadeInUp 0.6s ease 0s 1 normal forwards;
}

.fadeInUpBox04 {
	opacity: 0;
}

.fadeInUp04 {
	animation: fadeInUp 0.6s ease 0s 1 normal forwards;
}
			
	@keyframes fadeInUp {
		from {
			opacity: 0;
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

			/* 【タブレット用のスタイル記述】 */
			@media (min-width: 761px) {
				.fadeInUp02 {
					animation: fadeInUp 0.6s ease 0.1s 1 normal forwards;
				}
				.fadeInUp03 {
					animation: fadeInUp 0.6s ease 0.2s 1 normal forwards;
				}
				.fadeInUp04 {
					animation: fadeInUp 0.6s ease 0.3s 1 normal forwards;
				}
			}


.scrolled.fadeOut {
  animation: fadeOut 1s;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
      transform: translateY(0);
  }
  100% {
    opacity: 0;
      transform: translateY(20px);
  }
}


.flip a:hover,
.flip a:active {
	opacity: 1;
}

.flip a:hover img,
.flip a:active img {
	opacity: 1;
}

.pic_active, .pic {
    position: absolute;
    display: block;
}

.flip {
    perspective: 800px;
}

.flip .pic_active {
    transition: all 0.8s;
    opacity: 0;
    transform-style: preserve-3d;
}

.flip .pic_active img {
    transform: rotateY(180deg);
    vertical-align: top;
}

.flip .pic {
    transition: all 0.8s;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    opacity: 1;
}

.flip a:hover .pic_active,
.flip a:active .pic_active {
    transform: rotateY(180deg);
    opacity: 1;
}

.flip a:hover .pic,
.flip a:active .pic {
    transform: rotateY(180deg);
    opacity: 0;
}

.dl1 { animation-delay: 0.1s; }
.dl2 { animation-delay: 0.2s; }
.dl3 { animation-delay: 0.3s; }
.dl4 { animation-delay: 0.4s; }
.dl5 { animation-delay: 0.5s; }
.dl6 { animation-delay: 0.6s; }
.dl7 { animation-delay: 0.7s; }
.dl8 { animation-delay: 0.8s; }
.dl9 { animation-delay: 0.9s; }
.dl10 { animation-delay: 1.0s; }
.dl11 { animation-delay: 1.1s; }
.dl12 { animation-delay: 1.2s; }
.dl13 { animation-delay: 1.3s; }
.dl14 { animation-delay: 1.4s; }
.dl15 { animation-delay: 1.5s; }
.dl16 { animation-delay: 1.6s; }
.dl17 { animation-delay: 1.7s; }
.dl18 { animation-delay: 1.8s; }
.dl19 { animation-delay: 1.9s; }
.dl20 { animation-delay: 2.0s; }
.dl30 { animation-delay: 3.0s; }
.dl200 { animation-delay: 20.0s; }



/* clearfix
------------------------------------*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	overflow: hidden;
}

.clearfix {
	display: inline-block;
}

/* exlude MacIE5 \*/
* html .clearfix {
	height: 1%
}

.clearfix {
	display: block;
}
/* end MacIE5 */