@media screen and (min-width: 481px) {
.chara_title { position:absolute; top:75px; left:280px; font-family: Lato, sans-serif; font-size:46px; font-weight:900; font-style:italic; color:#FFF; letter-spacing: 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease; text-shadow:0 0 10px #19B4FF, 0 0 10px #19B4FF, 0 0 10px #19B4FF; text-decoration:none; margin: 0 0 10px 25px; z-index:3; }

.chara_info { position:absolute; top:75px; left:280px; right:30px; bottom:0; min-height:760px; max-width:1050px; color:#FFF; letter-spacing: 2px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease; text-decoration:none; margin: 0 0 10px 25px; padding:85px 0 0 0; z-index:2; min-width:640px; word-wrap:break-all; }
.chara_info .sub_title { font-family: "メイリオ", Meiryo , sans-serif; font-weight:400; letter-spacing: 3px; width:60%; mix-width:640px; margin:0 0 10px 0; border-bottom:1px #196D8A solid; clear:both; }
.chara_info .sub_title.cn01 { font-size:45px; }
.chara_info .sub_title.cn02 { font-size:40px; line-height:45px; }

.chara_changer_m { display:none; }

.chara_info ruby { position: relative; }
.chara_info ruby rt { position: relative; top: 0.6ex; font-size:10px; letter-spacing: 3px; }
.chara_info .info_comm { font-family: "メイリオ", Meiryo , sans-serif; font-weight:400; font-size:12px; letter-spacing: 2px; line-height:30px; clear:both; min-width:430px; width:60%; }

.chara_info.chara01 { background:url(../images/chara/chara_01.png) no-repeat 95% 10px; background-size:20% auto; }
.chara_info.chara02 { background:url(../images/chara/chara_02.png) no-repeat 95% 10px; background-size:25% auto; }
.chara_info.chara03 { background:url(../images/chara/chara_03.png) no-repeat 95% 10px; background-size:32% auto; }
.chara_info.chara04 { background:url(../images/chara/chara_04.png) no-repeat 98% 20%; background-size:40% auto; }
.chara_info.chara05 { background:url(../images/chara/chara_05.png) no-repeat 98% 20%; background-size:40% auto; }
.chara_info.chara06 { background:url(../images/chara/chara_06.png) no-repeat 95% 10%; background-size:23% auto; }
.chara_info.chara07 { background:url(../images/chara/chara_07.png) no-repeat 95% 10%; background-size:29% auto; }
.chara_info.chara08 { background:url(../images/chara/chara_08.png) no-repeat 95% 10%; background-size:20% auto; }
.chara01 .chara_info_bg { height:70%; min-height:540px; background:url(../images/chara/chara_face01.png) no-repeat 0 90%; }
.chara02 .chara_info_bg { height:70%; min-height:540px; background:url(../images/chara/chara_face02.png) no-repeat 0 90%; }
.chara03 .chara_info_bg { height:70%; min-height:540px; background:url(../images/chara/chara_face03.png) no-repeat 0 90%; }
.chara04 .chara_info_bg { height:70%; min-height:540px; background:url(../images/chara/chara_face04.png) no-repeat 0 90%; }
.chara05 .chara_info_bg { height:70%; min-height:540px; background:url(../images/chara/chara_face05.png) no-repeat 0 90%; }
.chara06 .chara_info_bg { height:70%; min-height:540px; background:url(../images/chara/chara_face06.png) no-repeat 0 90%; }
.chara07 .chara_info_bg { height:70%; min-height:540px; background:url(../images/chara/chara_face07.png) no-repeat 0 90%; }
.chara08 .chara_info_bg { height:70%; min-height:540px; background:url(../images/chara/chara_face08.png) no-repeat 0 90%; }

.chara_info .c_change_fl { position:absolute; bottom:40px; width:80%; min-width:640px; clear:both; }
.chara_info .c_change_fl ul li { float:left; position:relative; width:88px; height:100px; list-style-type: none; margin:0 5px 0 0; }
.chara_info .c_change_fl ul li.c01 { background:url(../images/chara/btm/chara_btm_img01a.png) no-repeat; }
.chara_info .c_change_fl ul li.c02 { background:url(../images/chara/btm/chara_btm_img02a.png) no-repeat; }
.chara_info .c_change_fl ul li.c03 { background:url(../images/chara/btm/chara_btm_img03a.png) no-repeat; }
.chara_info .c_change_fl ul li.c04 { background:url(../images/chara/btm/chara_btm_img04a.png) no-repeat; }
.chara_info .c_change_fl ul li.c05 { background:url(../images/chara/btm/chara_btm_img05a.png) no-repeat; }
.chara_info .c_change_fl ul li.c06 { background:url(../images/chara/btm/chara_btm_img06a.png) no-repeat; }
.chara_info .c_change_fl ul li.c07 { background:url(../images/chara/btm/chara_btm_img07a.png) no-repeat; }
.chara_info .c_change_fl ul li.c08 { background:url(../images/chara/btm/chara_btm_img08a.png) no-repeat; }
.chara_info .c_change_fl ul li.c01 span.hover { position:absolute; top:0; left:0; width:100px; height:115px; background:url(../images/chara/btm/chara_btm_img01b.png) no-repeat; }
.chara_info .c_change_fl ul li.c02 span.hover { position:absolute; top:0; left:0; width:100px; height:115px; background:url(../images/chara/btm/chara_btm_img02b.png) no-repeat; }
.chara_info .c_change_fl ul li.c03 span.hover { position:absolute; top:0; left:0; width:100px; height:115px; background:url(../images/chara/btm/chara_btm_img03b.png) no-repeat; }
.chara_info .c_change_fl ul li.c04 span.hover { position:absolute; top:0; left:0; width:100px; height:115px; background:url(../images/chara/btm/chara_btm_img04b.png) no-repeat; }
.chara_info .c_change_fl ul li.c05 span.hover { position:absolute; top:0; left:0; width:100px; height:115px; background:url(../images/chara/btm/chara_btm_img05b.png) no-repeat; }
.chara_info .c_change_fl ul li.c06 span.hover { position:absolute; top:0; left:0; width:100px; height:115px; background:url(../images/chara/btm/chara_btm_img06b.png) no-repeat; }
.chara_info .c_change_fl ul li.c07 span.hover { position:absolute; top:0; left:0; width:100px; height:115px; background:url(../images/chara/btm/chara_btm_img07b.png) no-repeat; }
.chara_info .c_change_fl ul li.c08 span.hover { position:absolute; top:0; left:0; width:100px; height:115px; background:url(../images/chara/btm/chara_btm_img08b.png) no-repeat; }
}

@media screen and (max-width: 480px) {
.chara_title { position:absolute; top:75px; left:0; font-family: Lato, sans-serif; font-size:40px; font-weight:900; font-style:italic;; color:#FFF; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease; text-shadow:0 0 10px #19B4FF, 0 0 10px #19B4FF, 0 0 10px #19B4FF; text-decoration:none; margin: 0 0 10px 25px; z-index:2; }

.chara_info { position:absolute; top:140px; left:0; right:30px; bottom:30px; color:#FFF; letter-spacing: 2px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease; text-decoration:none; margin: 0 0 10px 25px; padding:460px 0 50px 0; z-index:2; max-width:480px; min-height:400px; word-wrap:break-all; }

.chara_info .sub_title { font-family: "メイリオ", Meiryo , sans-serif; font-weight:400; letter-spacing: 3px; clear:both; }
.chara_info .sub_title.cn01 { font-size:40px; }
.chara_info .sub_title.cn02 { font-size:40px; padding: 10px 0; }

.chara_changer_m { position:absolute; top:80px; right:0; width: 0; height: 0; border-top: 60px solid transparent; border-right: 100px solid #000; border-bottom: 60px solid transparent; border-left: 30px solid transparent; padding:0 0 0 0; z-index:3; }
.chara_changer_m p { position:absolute; top:-15px; right:-100px; font-size:14px; color:#FFF; text-align:right; }

.chara_info ruby { position: relative; }
.chara_info ruby rt { position: relative; top: 0.6ex; font-size:8px; letter-spacing: 3px; }
.chara_info .info_comm { font-family: "メイリオ", Meiryo , sans-serif; font-weight:400; font-size:12px; line-height:24px; clear:both; width:100%; }
.chara_info_bg { width:100%; background:rgba(0,0,0,0.5); padding:10px; border-radius:5px; }

.chara_info.chara01 { background:url(../images/chara/chara_01.png) no-repeat 50% 10px; background-size:50% auto; }
.chara_info.chara02 { background:url(../images/chara/chara_02.png) no-repeat 70% 10px; background-size:60% auto; }
.chara_info.chara03 { background:url(../images/chara/chara_03.png) no-repeat 55% 10px; background-size:75% auto; }
.chara_info.chara04 { background:url(../images/chara/chara_04.png) no-repeat 60% 20%; background-size:70% auto; }
.chara_info.chara05 { background:url(../images/chara/chara_05.png) no-repeat 60% 20%; background-size:70% auto; }
.chara_info.chara06 { background:url(../images/chara/chara_06.png) no-repeat 50% 10px; background-size:55% auto; }
.chara_info.chara07 { background:url(../images/chara/chara_07.png) no-repeat 60% 10px; background-size:70% auto; }
.chara_info.chara08 { background:url(../images/chara/chara_08.png) no-repeat 50% 10px; background-size:50% auto; }

.chara_info .c_change_fl { display:none; }
}