@charset "UTF-8";

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


#wrapper { overflow: hidden;}
#container { overflow: visible; max-width: 1600px; margin: 0 auto; }
#contents { overflow: visible; }
#contents { background: url(../_img/character/bg.jpg) top center repeat;}
/* --------------------------------------------------------
.contents_block
-------------------------------------------------------- */

hr { background: url(../_common/img/line.png) center center repeat-x; width: 100%; height: 18px; border: none; margin: 0;}

/* #c1
-------------------------------------------------------- */
#c1 { background: url(../_img/character/c1_bg_r.png) center top repeat-x; height: 619px; }

#c1 #mainchara { position: absolute; top: -65px; left: 50%; margin-left: -430px; z-index: 10;}
#c1 #mainchara area { outline: none;}
#c1 .inner {}
#c1 .picList { position: relative; width: 100%; }
#c1 .picList li { position: absolute;}
#c1 .picList li img { position: relative;}
#c1 .picList .p1 { top: 119px; left: -142px;}
#c1 .picList .p2 { top: 28px; left: 825px;}
#c1 .picList .p3 { top: 347px; left: 862px;}
#c1 .picList .p4 { top: 331px; left: -162px;}
#c1 .picList .p5 { top: 210px; left: 781px;}

#c1 .inner2 { position: relative; width: 960px; margin: 0 auto; z-index: 11; }
#c1 .btnList { position: relative; width: 100%; }
#c1 .btnList li { position: absolute;}
#c1 .btnList li img { position: relative;}
#c1 .btnList .b1 { top: 394px; left: 524px;}
#c1 .btnList .b2 { top: 418px; left: 115px;}
#c1 .btnList .b3 { top: 349px; left: 39px;}
#c1 .btnList .b4 { top: 438px; left: 762px;}
#c1 .btnList .b5 { top: 157px; left: 604px;}


/*
#c1 .pic { width: 100%; height: auto; left: 0; margin-left: 0;}
#c1 .ttl { margin-left: 3.2291%; margin-bottom: 37px; }
#c1 .text { margin-left: 3.2291%; }

@media screen and (min-width: 1401px) {
#c1 .pic { width: 1400px; left: 50%; margin-left: -700px; position: relative; }
}
*/


/* #c2
-------------------------------------------------------- */
#c2 { padding-top: 78px; padding-bottom: 68px; }

#c2 .ttl { text-align: center; position: relative; top: -40px; z-index: 100; margin-bottom: -80px; }
#c2 .picList { position: relative; width: 100%; letter-spacing: -.45em; font-size: 0; vertical-align: bottom; }
#c2 .picList li { display: inline-block; letter-spacing: normal; position: relative;}
#c2 .picList .p1 { margin-left: -33px; width: 326px; height: 461px; }
#c2 .picList .p2 { margin-left: -12px; }
#c2 .picList .p3 { margin-left: -176px; }
#c2 .picList .p4 { margin-left: 20px; padding-top: 14px; }
#c2 .picList li a { position: relative; }
#c2 .picList li img { position: relative;}

#c2 .picList li a { position: absolute; left: 0; bottom: 0px; display: block; }
#c2 .picList .p1 a { left: 117px; }
#c2 .picList .p2 a { left: 109px; }
#c2 .picList .p3 a { left: 123px; }
#c2 .picList .p4 a { left: 380px; }