/* encoding */

@charset "utf-8";

/* fade-animation */

#fade-animation > ul {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	list-style: none;
}#fade-animation > ul > li {
	display: block;
	position: absolute;
	top: 0px; left: 0px; right: 0px; bottom: 0px;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}#fade-animation > ul > li > img {
	width: 100%;
	height: 100%;
	border: none;
}#fade-animation > ul > li > label {
	display: inline;
	position: absolute;
	margin: 0px;
	padding: 0px;
	color: rgba(255, 255, 255, 1.0);
	font-size: 28px;
	font-weight: normal;
	line-height: 1.2em;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
}#fade-animation > ul > li#pic01 > label {
	top: 32px; left: 34px;
}#fade-animation > ul > li#pic02 > label {
	top: 29px; left: 69px;
}#fade-animation > ul > li#pic03 > label {
	top: 24px; left: 419px;
}#fade-animation > ul > li#pic04 > label {
	top: 25px; left: 112px;
}#fade-animation > ul > li#pic05 > label {
	top: 18px; left: 76px;
}#fade-animation > ul > li#pic06 > label {
	top: 155px; left: 200px;
	color: rgba(0, 0, 0, 1.0);
	font-size: 65px;
}#fade-animation > div#msg-box {
	overflow-y: scroll;
	position: absolute;
	top: 121px; left: 122px;
	width: 219px;
	height: 219px;
	margin: 0px;
	padding: 10px;
	color: rgba(0, 0, 0, 1.0);
	font-family: 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
	font-size: 14px;
	line-height: 1.5em;
}

/* animation class */

.fade-in {
	opacity: 0;
	animation: elm-fade-in 4s ease 0s 1 alternate both;
	-moz-animation: elm-fade-in 4s ease 0s 1 alternate both;
	-webkit-animation: elm-fade-in 4s ease 0s 1 alternate both;
}@keyframes elm-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}@-moz-keyframes elm-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}@-webkit-keyframes elm-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.fade-out {
	opacity: 1;
	animation: elm-fade-out 4s ease 0s 1 alternate both;
	-moz-animation: elm-fade-out 4s ease 0s 1 alternate both;
	-webkit-animation: elm-fade-out 4s ease 0s 1 alternate both;
}@keyframes elm-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}@-moz-keyframes elm-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}@-webkit-keyframes elm-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.zoom-out {
	opacity: 1;
	animation: elm-zoom-out 2s ease 0s 1 alternate both;
	-moz-animation: elm-zoom-out 2s ease 0s 1 alternate both;
	-webkit-animation: elm-zoom-out 2s ease 0s 1 alternate both;
	transform-origin: center center;
	-moz-transform-origin: center center;
	-webkit-transform-origin: center center;
}@keyframes elm-zoom-out {
	from {
		opacity: 1;
		transform: scale(1.0);
	}
	to {
		opacity: 0;
		transform: scale(0);
	}
}@-moz-keyframes elm-zoom-out {
	from {
		opacity: 1;
		-moz-transform: scale(1.0);
	}
	to {
		opacity: 0;
		-moz-transform: scale(0);
	}
}@-webkit-keyframes elm-zoom-out {
	from {
		opacity: 1;
		-webkit-transform: scale(1.0);
	}
	to {
		opacity: 0;
		-webkit-transform: scale(0);
	}
}