@charset "Shift_JIS";
/* ==================================================================
CSS information
style info :「CHARACTERページ」 用
================================================================== */


#wrapper { background: url(../_img/world/bg_c.jpg) top center no-repeat; }
/*#wrapper-circle { background: url(../_img/world/bg_circle.png) top center no-repeat; }*/
/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents {}



#content-Area { padding-top: 218px; position:relative; }

.line { position: absolute; top: 128px; left: 0;}

h2 { position: relative; z-index: 1000;}
h2 .ttl { position: absolute; top:1px; left: -1px;}



#flashArea { position: relative; top: -55px; right: 0; margin-bottom: -115px;}


#chara-Block { position: relative; top: -95px; left: 0; margin-bottom: -225px;}
#chara-Block img { position: relative;}

#chara-Block .chara-bg { position: relative; }

#chara-Block .copy { position: absolute; top: 160px; left: 70px; z-index:1;}
#chara-Block .text { position: absolute; top: 276px; left: 70px; z-index:2;}

#chara-Block .chara { position: absolute; top: 0; right: 0;}
#chara-Block .change { position: absolute; top: 545px; right: 15px;}
#chara-Block .form { position: absolute; top: 530px; right: 15px;}

#chara-Block #media-Block { position: absolute; top: 615px; left: 70px; z-index: 20;}
#chara-Block #media-Block .mv-Box { float: left; margin-right: 10px; position: relative;}
#chara-Block #media-Block .mv-Box .icon_new { position: absolute; top: 0; left: 0;}
#chara-Block #media-Block .voice-Box { float: left; letter-spacing: -.45em;}
#chara-Block #media-Block .voice-Box li { letter-spacing: normal; display: inline-block; margin-right: 10px; vertical-align: top; float: left;}
#chara-Block #media-Block .voice-Box li.btn_v01 { padding-top: 76px;}
#chara-Block #media-Block .voice-Box li.btn_v02 { padding-top: 60px;}

#chara-Block #control-Box { position: absolute; top: 0; left: 0; width: 100%;}
#chara-Block #control-Box .btn_left { position: absolute; top: 400px; left: 0;}
#chara-Block #control-Box .btn_right { position: absolute; top: 243px; right: 0;}

#voiceCtrl { display: none;}


#chara-Block.cha01m #media-Block .voice-Box li.btn_v01 , #chara-Block.cha02m #media-Block .voice-Box li.btn_v01 , #chara-Block.cha03m #media-Block .voice-Box li.btn_v01 , #chara-Block.cha04m #media-Block .voice-Box li.btn_v01 , 
#chara-Block.cha05m #media-Block .voice-Box li.btn_v01 , #chara-Block.cha08m #media-Block .voice-Box li.btn_v01 , #chara-Block.cha10m #media-Block .voice-Box li.btn_v01 , #chara-Block.cha10m #media-Block .voice-Box li.btn_v01 { padding-top: 112px;}
#chara-Block.cha01m #media-Block .voice-Box li.btn_v02 , #chara-Block.cha02m #media-Block .voice-Box li.btn_v02 , #chara-Block.cha03m #media-Block .voice-Box li.btn_v02 , #chara-Block.cha04m #media-Block .voice-Box li.btn_v02 , 
#chara-Block.cha05m #media-Block .voice-Box li.btn_v02 , #chara-Block.cha08m #media-Block .voice-Box li.btn_v02 , #chara-Block.cha10m #media-Block .voice-Box li.btn_v02 , #chara-Block.cha10m #media-Block .voice-Box li.btn_v02 { padding-top: 96px;}


#chara-Block.cha01 .change , #chara-Block.cha01m .change , #chara-Block.cha02 .change , #chara-Block.cha02m .change , #chara-Block.cha03 .change , #chara-Block.cha03m .change , 
#chara-Block.cha04 .change , #chara-Block.cha04m .change , #chara-Block.cha05 .change , #chara-Block.cha05m .change , #chara-Block.cha08 .change , #chara-Block.cha08m .change , 
#chara-Block.cha10 .change , #chara-Block.cha10m .change { top: 435px;}


#chara-Block.cha03 .chara { top: -17px;}
#chara-Block.cha03m .chara { top: -85px;}

#chara-Block.cha04 .copy { top: 150px;}
#chara-Block.cha04 .chara { top: -2px;}
#chara-Block.cha04m .chara { top: -44px;}

#chara-Block.cha05 .copy { top: 137px;}
#chara-Block.cha05m .chara { top: -106px;}

#chara-Block.cha07 .chara { top: -31px;}

#chara-Block.cha08 .copy { top: 140px;}
#chara-Block.cha08 .chara { top: 26px;}
#chara-Block.cha08m .chara { top: -29px;}

#chara-Block.cha09 .copy { top: 140px;}
#chara-Block.cha09 .chara { top: 7px;}



/* --------------------------------------------------------
#others
-------------------------------------------------------- */
#otcharalist { padding-top: 42px; margin-bottom: -110px; }
#otcharalist ul { letter-spacing: -.45em; font-size: 0;}
#otcharalist ul li { letter-spacing: normal; display: inline-block; vertical-align: top; margin-right: 14px;}
#otcharalist ul li:nth-child(3n) { margin-right: 0;}
#otcharalist ul li img { position: relative;}

#otcharalist ul li.cha01 {}
#otcharalist ul li.cha02 { margin-top: -57px;}
#otcharalist ul li.cha03 { margin-top: -114px;}
#otcharalist ul li.cha04 { margin-top: -44px;}
#otcharalist ul li.cha05 { margin-top: -101px;}
#otcharalist ul li.cha06 { margin-top: -159px;}
#otcharalist ul li.cha07 { margin-top: -44px;}
#otcharalist ul li.cha08 { margin-top: -101px;}
#otcharalist ul li.cha09 { margin-top: -159px;}
#otcharalist ul li.cha10 { margin-top: -44px;}




/* --------------------------------------------------------
共通
-------------------------------------------------------- */
.subMenu { margin-bottom: 40px; }
.subMenu area { outline: none;}

.menulist-Block { letter-spacing: -.45em; font-size: 0; text-align: right;}
.menulist-Block li { letter-spacing: normal; display: inline-block; margin-left: 20px; position: relative; vertical-align: top; }

.menulist-Block li.btn01 { top: -0px;}
.menulist-Block li.btn02 { top: -47px;}

.menulist-Block { height: 0;}
.menulist-Block li { z-index: 100;}



.subMenu_top { position: absolute; top: 103px; right: 0; z-index: 301;}

.menulist-Block_top { letter-spacing: -.45em; font-size: 0; text-align: right; height: 1px;}
.menulist-Block_top li { letter-spacing: normal; display: inline-block; margin-left: 40px; position: relative; vertical-align: top; }
.menulist-Block_top li a { position: relative; display: inline-block; }

.menulist-Block_top li.btn01_top { top: -0px;}
.menulist-Block_top li.btn02_top { top: -21px;}