@charset "Shift_JIS";
/* ==================================================================
CSS information
style info :INDEX—p
================================================================== */



/*#container { background: url(../_img/world/contents_bg_top.png) 0 0 no-repeat; background-size: 100%;}
#contents { background: url(../_img/world/contents_bg_bottom.png) bottom left no-repeat; background-size: 100%;}*/

/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents { }

.cha01 #contents { background: url(../_img/character/itsuki/visual_itsuki.jpg) 0 0 no-repeat; background-size: 100%;}
.cha01m #contents { background: url(../_img/character/chrom/visual_chrom.jpg) 0 0 no-repeat; background-size: 100%;}
.cha02 #contents { background: url(../_img/character/tsubasa/visual_tsubasa.jpg) 0 0 no-repeat; background-size: 100%;}
.cha02m #contents { background: url(../_img/character/sheeda/visual_sheeda.jpg) 0 0 no-repeat; background-size: 100%;}
.cha03 #contents { background: url(../_img/character/toma/visual_toma.jpg) 0 0 no-repeat; background-size: 100%;}
.cha03m #contents { background: url(../_img/character/kain/visual_kain.jpg) 0 0 no-repeat; background-size: 100%;}
.cha04 #contents { background: url(../_img/character/kiria/visual_kiria.jpg) 0 0 no-repeat; background-size: 100%;}
.cha04m #contents { background: url(../_img/character/sallya/visual_sallya.jpg) 0 0 no-repeat; background-size: 100%;}
.cha05 #contents { background: url(../_img/character/eleonora/visual_eleonora.jpg) 0 0 no-repeat; background-size: 100%;}
.cha05m #contents { background: url(../_img/character/viaur/visual_viaur.jpg) 0 0 no-repeat; background-size: 100%;}
.cha06 #contents { background: url(../_img/character/maiko/visual_maiko.jpg) 0 0 no-repeat; background-size: 100%;}
.cha07 #contents { background: url(../_img/character/tiki/visual_tiki.jpg) 0 0 no-repeat; background-size: 100%;}
.cha08 #contents { background: url(../_img/character/mamori/visual_mamori.jpg) 0 0 no-repeat; background-size: 100%;}
.cha08m #contents { background: url(../_img/character/dohga/visual_dohga.jpg) 0 0 no-repeat; background-size: 100%;}
.cha09 #contents { background: url(../_img/character/goodman/visual_goodman.jpg) 0 0 no-repeat; background-size: 100%;}
.cha10 #contents { background: url(../_img/character/yashiro/visual_yashiro.jpg) 0 0 no-repeat; background-size: 100%;}
.cha10m #contents { background: url(../_img/character/nabarl/visual_nabarl.jpg) 0 0 no-repeat; background-size: 100%;}


#content-Area { width: 100%; max-width: 640px; position:relative; padding: 0 0px 20px; margin: 0 auto; }

#index #content-Area , #others #content-Area { margin-bottom: 30px;}
.cha01c #content-Area , .cha02c #content-Area , .cha03c #content-Area , .cha04c #content-Area , .cha05c #content-Area , .cha08c #content-Area , .cha10c #content-Area { width: 100%; max-width: none; }



#chara-Block { background: url(../_img/character/line.png) left bottom no-repeat; padding-bottom: 40px;}
#chara-Block:after { content: ""; display: block; clear: both; }
#chara-Block { zoom:1; }

#chara-Block.cha01c , #chara-Block.cha02c , #chara-Block.cha03c , #chara-Block.cha04c , #chara-Block.cha05c , #chara-Block.cha08c , #chara-Block.cha10c { background: none; padding-bottom: 0px;}


h2 { display:block; position: absolute; top: 20px; left: 30px; width: 30%; z-index: 101;}
h2 a { display: block; height: 80px; }
h2 a span { display: none;}

.copy { max-width: 560px; margin: 0 auto;}
.name { padding: 0 40px;}
.text { padding: 0 40px;}

.pic_cform { margin-top: -45px;}
.pic_cform img { width: 100%;}

.copy { position: relative; width: 100%; height: auto;}
.copy:before { content: ""; display: block; padding-top: 37.857%;}
.copy .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.copy .inner img { position: absolute; bottom: 0; left: 0;}

.change { float: right; padding-right: 40px; position: relative; z-index: 101;}
.change a { display: inline-block; margin-top: -60px;}
.change a img { width: 100px; height: 128px;}

.form { float: right; padding-right: 40px; position: relative; z-index: 101;}
.form a { display: inline-block; margin-top: -35px;}
.form a img { width: 100px; height: 153px;}

#media-Block:after {content: ""; display: block; clear: both;}
#media-Block {zoom:1;}
#media-Block { padding-left: 40px; position: relative; z-index: 100; }
#media-Block .mv-Box { float: left; margin-right: 10px; position: relative;}
#media-Block .mv-Box .icon_new { position: absolute; top: 0; left: 0;}
#media-Block .voice-Box { float: left; }
#media-Block .voice-Box li { letter-spacing: normal; vertical-align: top;}
#media-Block .voice-Box li.btn_v01 { margin-top: -29px;}
#media-Block .voice-Box li.btn_v02 { padding-top: 0px;}

#voiceCtrl { display: none;}




.cha01 .copy:before { padding-top: 57.857%;}
.cha01 .name { margin-bottom: -40px;}
.cha01 .text { margin-bottom: -0px;}

.cha01m .copy:before { padding-top: 57.857%;}
.cha01m .name { margin-bottom: -40px;}
.cha01m .text { margin-bottom: -140px;}
.cha01m .change a { margin-bottom: 87px;}

.cha02 .copy:before { padding-top: 57.857%;}
.cha02 .name { margin-bottom: -40px;}
.cha02 .text { margin-bottom: -45px;}

.cha02m .copy:before { padding-top: 57.857%;}
.cha02m .name { margin-bottom: -40px;}
.cha02m .text { margin-bottom: -90px;}
.cha02m .change a { margin-bottom: 87px;}

.cha03 .copy:before { padding-top: 57.857%;}
.cha03 .name { margin-bottom: -40px;}
.cha03 .text { margin-bottom: 50px;}

.cha03m .copy:before { padding-top: 57.857%;}
.cha03m .name { margin-bottom: -40px;}
.cha03m .text { margin-bottom: -140px;}
.cha03m .change a { margin-bottom: 87px;}

.cha04 .copy:before { padding-top: 57.857%;}
.cha04 .name { margin-bottom: -40px;}
.cha04 .text { margin-bottom: -45px;}

.cha04m .copy:before { padding-top: 57.857%;}
.cha04m .name { margin-bottom: -40px;}
.cha04m .text { margin-bottom: 0px;}
.cha04m .change a { margin-bottom: 87px;}

.cha05 .copy:before { padding-top: 57.857%;}
.cha05 .name { margin-bottom: -40px;}
.cha05 .text { margin-bottom: -45px;}

.cha05m .copy:before { padding-top: 57.857%;}
.cha05m .name { margin-bottom: -40px;}
.cha05m .text { margin-bottom: 40px;}
.cha05m .change a { margin-bottom: 87px;}

.cha06 .copy:before { padding-top: 68.857%;}
.cha06 .name { margin-bottom: -40px;}
.cha06 .text { margin-bottom: -45px;}

.cha07 .copy:before { padding-top: 57.857%;}
.cha07 .name { margin-bottom: -40px;}
.cha07 .text { margin-bottom: -140px;}

.cha08 .copy:before { padding-top: 57.857%;}
.cha08 .name { margin-bottom: -40px;}
.cha08 .text { margin-bottom: -45px;}

.cha08m .copy:before { padding-top: 57.857%;}
.cha08m .name { margin-bottom: -40px;}
.cha08m .text { margin-bottom: 40px;}
.cha08m .change a { margin-bottom: 87px;}

.cha09 .copy:before { padding-top: 57.857%;}
.cha09 .name { margin-bottom: -40px;}
.cha09 .text { margin-bottom: -45px;}

.cha10 .copy:before { padding-top: 57.857%;}
.cha10 .name { margin-bottom: -40px;}
.cha10 .text { margin-bottom: -45px;}

.cha10m .copy:before { padding-top: 57.857%;}
.cha10m .name { margin-bottom: -40px;}
.cha10m .text { margin-bottom: -90px;}
.cha10m .change a { margin-bottom: 87px;}


/*


.text-Box { position: relative; z-index: 1; margin-bottom: -40px;}

.movie-Box { position: relative; z-index: 0; margin-bottom: -50px;}
.movie-Box  a { position: absolute; top: 0; left: 0;}

.pic-Box { position: relative; z-index: 1; margin-bottom: 0px;}

*/



.control-Block:after {content: ""; display: block; clear: both;}
.control-Block {zoom:1;}
.control-Block { width: 100%; max-width: 560px; margin:0 auto 40px; padding-top: 0px; }
.control-Block li.btn_back { float: left;}
.control-Block li.btn_next { float: right;}
.control-Block li.btn_close { text-align: center;}



/* --------------------------------------------------------
#others
-------------------------------------------------------- */
#otherslistbox { position: relative; z-index: 1;}

#otcharalist { margin-top: -67px;}
#otcharalist ul { padding: 0 40px; }
#otcharalist ul li { margin-top: -79px; }
#otcharalist ul li:first-child { margin-top: 0px; }