@charset "UTF-8";
/* CSS Document */

body {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}
body.loaded {
    opacity: 1;
}
#fv_logo_s {
	fill: none;
	stroke-dasharray: 2000;
	/*線の間隔を指定する*/
	stroke-dashoffset: 0;
	/*線の位置を指定する(IEは効かない属性)*/
	stroke-width: 6;
	/*線の太さを指定する*/
	stroke: #fff;
	/*線の色を指定する*/
	animation: fv_logo_s 2s ease-in forwards;
	animation-delay: 0s;
}
@keyframes fv_logo_s {
	0% {
		stroke-dashoffset: 2000;
		stroke-width: 6;
		/*線の太さを指定する*/
		fill: transparent;
		/*透過*/
	}
	50% {
		stroke-width: 6;
		fill: transparent;
		/*透過*/
	}
	100% {
		stroke-dashoffset: 0;
		fill: #fff;
		stroke-width: 0;
		/*線の太さを指定する*/
	}
}
#fv_logo_ai {
	fill: none;
	animation: fv_logo_heart .5s ease-in forwards;
	animation-delay: 2.2s;
}
#fv_logo_heart {
	fill: none;
	animation: fv_logo_heart .5s ease-in forwards;
	animation-delay: 2.2s;
}
@keyframes fv_logo_heart {
	0% {
		fill: transparent;
	}
	100% {
		fill: #fff;
	}
}


/* 画像フェードイン*/
.fadein, .fadein2 {
	opacity: 0;
}
.fadein-act, .fadein2-act {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: fadein;
	-ms-animation-name: fadein;
	animation-name: fadein;
	visibility: visible !important;
}
@-webkit-keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* 画像ポップアップ*/
.popup {
	-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
}
.popup-act {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: .3s;
	-ms-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-name: popup;
	-ms-animation-name: popup;
	animation-name: popup;
	visibility: visible !important;
}
@-webkit-keyframes popup {
	0% {
		-webkit-transform: scale(0.5);
		-ms-transform: scale(0.5);
		transform: scale(0.5);
	}
	70% {
		-webkit-transform: scale(1.5);
		-ms-transform: scale(1.5);
		transform: scale(1.5);
	}
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes popup {
	0% {
		-webkit-transform: scale(0.5);
		-ms-transform: scale(0.5);
		transform: scale(0.5);
	}
	70% {
		-webkit-transform: scale(1.5);
		-ms-transform: scale(1.5);
		transform: scale(1.5);
	}
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
}



/* 左に動きながらフェードイン　*/
.move-left {
	opacity: 0;
}
.move-left-act {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: move-left;
	-ms-animation-name: move-left;
	animation-name: move-left;
	visibility: visible !important;
}
@-webkit-keyframes move-left {
	0% {
		opacity: 0;
		-webkit-transform: translateX(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}
@keyframes move-left {
	0% {
		opacity: 0;
		-webkit-transform: translateX(30px);
		-ms-transform: translateX(30px);
		transform: translateX(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}
/* 上に動きながらフェードイン */
.move-top {
	opacity: 0;
}
.move-top-act {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: move-top;
	-ms-animation-name: move-top;
	animation-name: move-top;
	visibility: visible !important;
}
@-webkit-keyframes move-top {
	0% {
		opacity: 0;
		-webkit-transform: translateY(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
@keyframes move-top {
	0% {
		opacity: 0;
		-webkit-transform: translateY(30px);
		-ms-transform: translateY(30px);
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}
/* 右に動きながらフェードイン */
.move-right {
	opacity: 0;
}
.move-right-act {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: move-right;
	-ms-animation-name: move-right;
	animation-name: move-right;
	visibility: visible !important;
}
@-webkit-keyframes move-right {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}
@keyframes move-right {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-30px);
		-ms-transform: translateX(-30px);
		transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}
/* 下に動きながらフェードイン */
.move-bottom {
	opacity: 0;
}
.move-bottom-act {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: move-bottom;
	-ms-animation-name: move-bottom;
	animation-name: move-bottom;
	visibility: visible !important;
}
@-webkit-keyframes move-bottom {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
@keyframes move-bottom {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-30px);
		-ms-transform: translateY(-30px);
		transform: translateY(-30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}


.rotate_-5deg {
	transform: rotate(0);
}
.rotate_-5deg-act {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: .3s;
	-ms-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-name: rotate_-5deg;
	-ms-animation-name: rotate_-5deg;
	animation-name: rotate_-5deg;
	visibility: visible !important;
}

@-webkit-keyframes rotate_-5deg {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(-5deg);
	}
}
@keyframes rotate_-5deg {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(-5deg);
	}
}
.rotate_-5deg {
	transform: rotate(0);
}
.rotate_5deg-act {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: .3s;
	-ms-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-name: rotate_5deg;
	-ms-animation-name: rotate_5deg;
	animation-name: rotate_5deg;
	visibility: visible !important;
}

@-webkit-keyframes rotate_5deg {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(5deg);
	}
}
@keyframes rotate_5deg {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(5deg);
	}
}