@media screen and (min-width: 601px) {
#chara_cgbox { width: 980px; height: 230px; padding:0 0 0 160px; margin: 0 auto 20px auto; }
#chara_cgbox .btm { float: left; width: 240px; height:64px; margin: 0 5px 5px 0; }

.chara_imgfl { position: absolute; top:0px; left: 140px; width: 328px; height: 715px; z-index:3; }
.chara_facefl01 { position: absolute; top:450px; left: 480px; width: 212px; height: 204px; z-index:5; }
.chara_facefl02 { position: absolute; top:450px; left: 620px; width: 212px; height: 204px; z-index:4; }
.chara_facefl03 { position: absolute; top:450px; left: 760px; width: 212px; height: 204px; z-index:3; }

.t_name { position: absolute; top:40px; left: 480px; font-size:100px; width: 600px; height: 180px; font-weight:900; color:#FFF; z-index:3; }
.t_name rt { font-size:20px; color:#555; }
.t_comm { position: absolute; top:220px; left: 480px; font-size:18px; width: 600px; font-weight:600; line-height: 36px; z-index:3; color:#FFF; }

}

@media screen and (max-width: 600px) {
#chara_cgbox { width: 490px; margin: 50px auto; }
#chara_cgbox .btm { float: left; width: 240px; height:64px; margin: 0 5px 5px 0; }

.chara_imgfl { position: absolute; top:10px; left: 50%; width: 500px; height: 700px; margin: 0 0 0 -250px; z-index:3; }
.chara_facefl01 { position: absolute; top:530px; left: 50px; width: 212px; height: 204px; z-index:5; }
.chara_facefl02 { position: absolute; top:530px; left: 190px; width: 212px; height: 204px; z-index:4; }
.chara_facefl03 { position: absolute; top:530px; left: 330px; width: 212px; height: 204px; z-index:3; }

.t_name { position: absolute; top:740px; left: 35px; font-size:80px; width: 480px; height: 180px; font-weight:900; color:#FFF; z-index:3; }
.t_name rt { font-size:16px; color:#555; }
.t_comm { position: absolute; top:920px; left: 35px; font-size:20px; width: 480px; font-weight:600; line-height: 45px; z-index:3; color:#FFF; }

}

.chara_tit { background:url(../images/chara/title_chara.png) no-repeat center center; background-size:100% auto; }
#chara_cgbox .btm img { display:none; }

.chara_n01 { background: url(../images/chara/name/t_name01.png) no-repeat center center; background-size:100% auto; }
.chara_n02 { background: url(../images/chara/name/t_name02.png) no-repeat center center; background-size:100% auto; }
.chara_n03 { background: url(../images/chara/name/t_name03.png) no-repeat center center; background-size:100% auto; }
.chara_n04 { background: url(../images/chara/name/t_name04.png) no-repeat center center; background-size:100% auto; }

.chara_facefl01.c01 { background:url(../images/chara/chara_img/chara_face01_img01.png) no-repeat; background-size:100% auto;}
.chara_facefl02.c01 { background:url(../images/chara/chara_img/chara_face01_img02.png) no-repeat; background-size:100% auto;}
.chara_facefl03.c01 { background:url(../images/chara/chara_img/chara_face01_img03.png) no-repeat; background-size:100% auto;}
.chara_facefl01.c02 { background:url(../images/chara/chara_img/chara_face02_img01.png) no-repeat; background-size:100% auto;}
.chara_facefl02.c02 { background:url(../images/chara/chara_img/chara_face02_img02.png) no-repeat; background-size:100% auto;}
.chara_facefl03.c02 { background:url(../images/chara/chara_img/chara_face02_img03.png) no-repeat; background-size:100% auto;}
.chara_facefl01.c03 { background:url(../images/chara/chara_img/chara_face03_img01.png) no-repeat; background-size:100% auto;}
.chara_facefl02.c03 { background:url(../images/chara/chara_img/chara_face03_img02.png) no-repeat; background-size:100% auto;}
.chara_facefl03.c03 { background:url(../images/chara/chara_img/chara_face03_img03.png) no-repeat; background-size:100% auto;}
.chara_facefl01.c04 { background:url(../images/chara/chara_img/chara_face04_img01.png) no-repeat; background-size:100% auto;}
.chara_facefl02.c04 { background:url(../images/chara/chara_img/chara_face04_img02.png) no-repeat; background-size:100% auto;}
.chara_facefl03.c04 { background:url(../images/chara/chara_img/chara_face04_img03.png) no-repeat; background-size:100% auto;}

a .btm.chara_cbtm01 { background:url(../images/chara/btm/chara_cc_btm01.jpg) no-repeat; background-size:100% auto; transition-duration:0.5s; }
a .btm.chara_cbtm02 { background:url(../images/chara/btm/chara_cc_btm02.jpg) no-repeat; background-size:100% auto; transition-duration:0.5s; }
a .btm.chara_cbtm03 { background:url(../images/chara/btm/chara_cc_btm03.jpg) no-repeat; background-size:100% auto; transition-duration:0.5s; }
a .btm.chara_cbtm04 { background:url(../images/chara/btm/chara_cc_btm04.jpg) no-repeat; background-size:100% auto; transition-duration:0.5s; }

a:hover .btm.chara_cbtm01 { background:url(../images/chara/btm/chara_cc_btm01b.jpg) no-repeat; background-size:100% auto; transition-duration:0.5s; }
a:hover .btm.chara_cbtm02 { background:url(../images/chara/btm/chara_cc_btm02b.jpg) no-repeat; background-size:100% auto; transition-duration:0.5s; }
a:hover .btm.chara_cbtm03 { background:url(../images/chara/btm/chara_cc_btm03b.jpg) no-repeat; background-size:100% auto; transition-duration:0.5s; }
a:hover .btm.chara_cbtm04 { background:url(../images/chara/btm/chara_cc_btm04b.jpg) no-repeat; background-size:100% auto; transition-duration:0.5s; }


@media screen and (min-width: 601px) {
.chara_imgfl.c01 { background:url(../images/chara/chara_img/chara_img01.png) no-repeat; background-size:100% auto; background-position: center center; }
.chara_imgfl.c02 { background:url(../images/chara/chara_img/chara_img02.png) no-repeat; background-size:100% auto; background-position: center center; }
.chara_imgfl.c03 { background:url(../images/chara/chara_img/chara_img03.png) no-repeat; background-size:100% auto; background-position: center center; }
.chara_imgfl.c04 { background:url(../images/chara/chara_img/chara_img04.png) no-repeat; background-size:100% auto; background-position: center center; }
}

@media screen and (max-width: 600px) {
.chara_imgfl.c01 { background:url(../images/chara/chara_img/chara_img01.png) no-repeat; background-position: top center; }
.chara_imgfl.c02 { background:url(../images/chara/chara_img/chara_img02.png) no-repeat; background-position: top center; }
.chara_imgfl.c03 { background:url(../images/chara/chara_img/chara_img03.png) no-repeat; background-position: top center; }
.chara_imgfl.c04 { background:url(../images/chara/chara_img/chara_img04.png) no-repeat; background-position: top center; }
}

/* sliderPro */

@media screen and (min-width: 601px) {
#chara { min-width:100%; max-width: 1200px; padding: 30px 0 0 0; }
.sp_block { position: relative; width:100%; max-width: 1100px; margin: 0 auto; }
.sliderPro {width:100%; }
.sp-slide { min-height:770px; }
#chara img { width:100%;}
}

@media screen and (max-width: 600px) {
#chara { min-width:600px; max-width:600px; }
.sp_block { position: relative; width:540px; margin: 0 auto;  }
.sliderPro {width:540px; }
.sp-slide { min-height:1200px;}
#chara img { width:540px; margin:0 0 65px 0;}
}

