@charset "UTF-8";

/* ==================================================================
CSS information
style info :「characters」 用
================================================================== */



#container { background: url(../_img/storychara/bg_r_b.png) top center repeat;}
#contents { background: url(../_img/storychara/bg_r.png) top center repeat-x;}

/* --------------------------------------------------------
#subnavi {}
-------------------------------------------------------- */
#subnavi { background: url(../_img/storychara/subnavi_bg.png) top center repeat-x; position: relative;}


/* --------------------------------------------------------
#ttl-block
-------------------------------------------------------- */
#ttl-block { background: url(../_img/storychara/ttl_bg.png) top center repeat-x; }
#ttl-block .inner-cont { padding-bottom: 30px; }


#ttl-block #tf { top: -8px; left: 50%; margin-left: -215px; }
#ttl-block #category { margin-bottom: 49px;}
#ttl-block #ttl { margin-bottom: 0px;}




/* --------------------------------------------------------
#c1
-------------------------------------------------------- */
#c1 { margin-bottom: 21px; }
#c1 .inner-cont { }

#c1 .pic_list { position: relative; width: 100%; text-align: center; }
#c1 .pic_list .chara2 { float: left; width: 50%; padding: 20px 10px 0px 20px; }
#c1 .pic_list .chara4 { float: right; width: 50%; padding: 20px 20px 0px 10px; }
#c1 .pic_list .chara2 img { width: 100%; height: auto; position: relative; max-width: 511px;}
#c1 .pic_list .chara4 img { width: 100%; height: auto; position: relative; max-width: 490px;}

#c1 .pic_list .chara5 { clear:both; float: left; width: 58%; padding: 0px 10px 20px 20px; }
#c1 .pic_list .chara3 { float: right; width: 42%; padding: 0px 20px 20px 10px; }
#c1 .pic_list .chara5 img { width: 100%; height: auto; position: relative; max-width: 528px;}
#c1 .pic_list .chara3 img { width: 100%; height: auto; position: relative; max-width: 370px;}

#c1 .pic_list .chara6 { clear: both; padding: 20px 30px; }

@media screen and (max-width: 1279px) {
#c1 .pic_list .chara2 { display: none;}
#c1 .pic_list .chara3 { display: none;}
#c1 .pic_list .chara4 { display: none;}
#c1 .pic_list .chara5 { display: none;}
#c1 .pic_list .chara6 { display: none;}
}

@media screen and (min-width: 1280px) {
#c1 .pic_list li { position: absolute;}
#c1 .pic_list li img { width: 100%; height: auto; position: relative;}

#c1 .pic_list .chara1 { top: 0; left: 28.375%; width: 43.4375%; height: auto; position: relative; }
#c1 .pic_list .chara2 { top: -15.4761%; left: 1.625%; width: 31.9375%; height: auto; padding: 0; }
#c1 .pic_list .chara3 { top: 59.3537%; left: 63.625%; width: 23.125%; height: auto; padding: 0; }
#c1 .pic_list .chara4 { top: -13.6054%; left: 66.125%; width: 30.625%; height: auto; padding: 0; }
#c1 .pic_list .chara5 { top: 55.6122%; left: 3.9375%; width: 33.000%; height: auto; padding: 0; }
#c1 .pic_list .chara6 { top: 36.9047%; left: 75.000%; width: 24.9375%; height: auto; padding: 0; }
}

@media screen and (min-width: 1600px) {
#c1 .pic_list { width: 1600px; margin: 0 auto; }
}