@charset "UTF-8";

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

/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents { background: #000311 url(../_img/story-character/bg.jpg) top center no-repeat;}
#ttl { margin-bottom: 24px;}


/* --------------------------------------------------------
#c1
-------------------------------------------------------- */
#c1 { padding-top: 0px; padding-bottom: 30px; height:508px; }
#c1 .inner-cont { width: 960px; margin: 0 auto; }
#c1 #video-box { width: 808px; height: 478px; background: url(../_img/videos/yt_bg.png) top center no-repeat; margin: 0 auto 30px; padding: 15px 4px 0; position: relative; background-size:cover; }


/* --------------------------------------------------------
#c2
-------------------------------------------------------- */
#c2 { padding-bottom:55px; }
#c2 .hl { text-align:center; }
#c2 .diagram-box { position:relative; width:919px; height:1010px; background:url(../_img/story-character/diagram_bg.png) no-repeat; }

#c2 .diagram-box .character li { position:absolute; z-index:0; }
#c2 .diagram-box .character .li01 { left:150px; top:209px; }
#c2 .diagram-box .character .li02 { left:517px; top:213px; }
#c2 .diagram-box .character .li03 { left:263px; top:328px; }
#c2 .diagram-box .character .li04 { left:395px; top:279px; }
#c2 .diagram-box .character li img {
	-webkit-transition:all 0.15s linear 0s;
	-moz-transition:all 0.15s linear 0s;
	transition:all 0.15s linear 0s;
}
#c2 .diagram-box .character li.zoom img {
	margin-top:-5px;
	--webkit-transform:scale(1.05);
	-moz-transform:scale(1.05);
	-ms-transform:scale(1.05);
	transform:scale(1.05);
}

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

#c2 .diagram-box .character-btns-index { margin-left:52px; }
#c2 .diagram-box .character-btns-index li { margin-right:9px; padding-top:73px; width:183px; float:left; }

#c2 .diagram-box .character-btns-index li a img { opacity:0; filter:alpha(opacity=0); -ms-filter:"alpha(opacity=0)"; }
#c2 .diagram-box .character-btns-index li a:hover img { opacity:1; filter:alpha(opacity=100); -ms-filter:"alpha(opacity=100)"; }

#c2 .diagram-box .character-btns-index .li01 { background:url(../_img/story-character/character_btn01_off.png); }
#c2 .diagram-box .character-btns-index .li03 { background:url(../_img/story-character/character_btn03_off.png); }
#c2 .diagram-box .character-btns-index .li04 { background:url(../_img/story-character/character_btn04_off.png); }
#c2 .diagram-box .character-btns-index .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:490px; top:773px; }