@charset "UTF-8";

/* ==================================================================
CSS information
style info :「story-character」下層用
================================================================== */

/* --------------------------------------------------------
keyframes
-------------------------------------------------------- */
@-webkit-keyframes flipInX {
	from {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}

	to {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}

@keyframes flipInX {
	from {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}

	to {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}

.flipInX {
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	animation-name: flipInX;
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

@keyframes slideFadeinRight {
	from {
		-webkit-transform: translate3d(10%, 0, 0);
		transform: translate3d(10%, 0, 0);
		visibility: visible;
		opacity:0;
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity:1;
	}
}

.slideFadeinRight {
	-webkit-animation-name: slideFadeinRight;
	animation-name: slideFadeinRight;
}

/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents { padding-top:0; background:#040404 url(../_img/story-character/character_bg.jpg) top center no-repeat;}
#ttl { height:239px; }

/* --------------------------------------------------------
#c1
-------------------------------------------------------- */
#c1 { padding-top: 0px; }
#c1 .inner-cont { width: 960px; margin: 0 auto; position:relative; }

#c1 .detail_box {
	margin-bottom:95px;
	width:581px; height:336px;
	background:url(../_img/story-character/detail_box.png);
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
}
#c1 .detail_box dt {
	padding:46px 0 24px 30px;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay:0.5s;
	animation-delay:0.5s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
#c1 .detail_box dd {
	padding-left:30px;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay:0.8s;
	animation-delay:0.8s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

#c1 .charapic {
	position:absolute;
	-webkit-animation-delay:0.3s;
	animation-delay:0.3s;
	-webkit-animation-duration: 1.2s;
	animation-duration: 1.2s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
#c1 .charapic01 { top:-112px; right:-19px; }
#c1 .charapic02 { top:-139px; right:20px; }
#c1 .charapic03 { top:-9px; right:11px; }
#c1 .charapic04 { top:-119px; right:2px; }

/* --------------------------------------------------------
#c2
-------------------------------------------------------- */
#c2 { padding-bottom:61px; }
#c2 .hl { text-align:center; }

#c2 .diagram-box .character-dl01 {
	padding-top:456px;
	text-align:center;
	position:relative;
	z-index:0;
}

#c2 .diagram-box .character-btns {
	margin-left:81px;
}
#c2 .diagram-box .character-btns li {
	margin-right:9px; padding-top:73px;
	width:183px;
	float:left;
}
#c2 .diagram-box .character-btns li a img { opacity:0; filter:alpha(opacity=0); -ms-filter:"alpha(opacity=0)"; }
#c2 .diagram-box .character-btns li a:hover img { opacity:1; filter:alpha(opacity=100); -ms-filter:"alpha(opacity=100)"; }

#c2 .diagram-box .character-btns .li01 {
	background:url(../_img/story-character/character_btn01_off.png);
}

#c2 .diagram-box .character-btns .li03 {
	background:url(../_img/story-character/character_btn03_off.png);
}

#c2 .diagram-box .character-btns .li04 {
	background:url(../_img/story-character/character_btn04_off.png);
}

#c2 .diagram-box .character-btns .li02 {
	background:url(../_img/story-character/character_btn02_off.png);
}

#c2 .diagram-box .character-dl02,
#c2 .diagram-box .character-dl03,
#c2 .diagram-box .character-dl04,
#c2 .diagram-box .character-dl05 {
	position:absolute;
}

#c2 .diagram-box .character-dl02 dd,
#c2 .diagram-box .character-dl03 dd,
#c2 .diagram-box .character-dl04 dd,
#c2 .diagram-box .character-dl05 dd {
	margin-top:9px; margin-left:3px;
}

#c2 .diagram-box .character-dl02 { left:143px; top:17px; }
#c2 .diagram-box .character-dl03 { left:496px; top:17px; }
#c2 .diagram-box .character-dl04 { left:144px; top:773px; }
#c2 .diagram-box .character-dl05 { left:498px; top:774px; }