@charset "UTF-8";
/* ===================================================================
CSS information

 file name  :character.css
 style info :キャラクターページのスタイル
=================================================================== */

/* ==========================================================
	#main
========================================================== */

#main {
	background:url(/sp/images/shared/bg_contents02.gif)}
  
body#character h3{
  text-align:center;
  margin-bottom:8px;
}

.footerInfo .character li.new a:before,
.footerInfo .character li.new a:before{
  width:27px;
  height:13px;
  position:absolute;
  top:-4px;
  right:2px;
  content: "New";
  background-size:27px 13px;
  text-indent:-9999px;
  background:url(/sp/images/shared/gnavi_new.png) no-repeat;}


/* ==========================================================
	contents
========================================================== */

/* 背景パターン
========================================================== */

body.pattern02 .contents{
  background:url(/sp/images/character/bg_pattern02.png) no-repeat;
  background-size:320px 250px;
  -webkit-background-size:320px 250px;
}

body.pattern03 .contents{
  position: relative;
	top: 0px;
  background: url(/sp/images/character/bg_pattern03.png) no-repeat;
  background-size:320px 250px;
  -webkit-background-size:320px 250px;
}

/* CV プロフィール
========================================================== */

.profile { width:313px; margin:0 auto}
.profile dt{ float:left}
.profile dd{ font-size:9px; margin-left:122px}
.profile dd img{ margin:3px 0 10px}

/* h1
========================================================== */
 
#page h1.character div{
  width: 100%;
  height: 31px;
  text-indent: -9999px;
  background-position:center -75px
}

/* h2
========================================================== */
  
body.top h2{
  padding: 32px 0 6px 0;
  text-align:center
}

body.chara01 h2{
	padding:8px 10px 0 0;
	text-align: right;
}

body.chara02 h2{
	padding:38px 28px 0 0;
	text-align: right;
}

body.chara03 h2{
	padding:37px 20px 0 0;
	text-align: right;
}

body.chara04 h2{
	padding:16px 5px 0 0;
	text-align: right;
}

body.chara05 h2{
	padding:38px 6px 10px 0;
	text-align: right;
}

body.chara06 h2{
	padding:38px 0px 10px 0;
	text-align: right;
}

body.chara07 h2{
	padding:38px 0px 10px 0;
	text-align: right;
}

body.chara08 h2{
	padding:38px 5px 10px 0;
	text-align: right;
}

/* キャラクタートップ
========================================================== */
    
body.top .characterBtn { width:314px; margin:0 auto }
body.top .characterBtn li{ position:relative; float:left; margin-bottom:8px;display:block;}
body.top .characterBtn li:nth-child(odd){ margin-right:2px}

body.top .characterBtn li.new a:before{
  width:27px;
  height:13px;
  position:absolute;
  top:-4px;
  right:2px;
  content: "New";
  text-indent:-9999px;
  background:url(/sp/images/shared/gnavi_new.png) no-repeat;
  background-size:27px 13px;
  -webkit-background-size:27px 13px;}



/* ==========================================================
	footerInfo
========================================================== */

/* ナビゲーション
========================================================== */

.footerInfo .character li{
  float:left;
  width:154px;
  margin-bottom:4px;
  position: relative;
}

.footerInfo .character li:nth-child(odd) {
  margin-right:3px;
}

.footerInfo .character li a{
  display:block;
  width:154px;
  height:40px;
  text-indent:-9999px;
  background-image:url(/sp/images/character/navigation.png);
  background-repeat:no-repeat;
  background-size:311px 320px;
  -webkit-background-size:311px 320px;
}

/* default
---------------------------------------------------------- */
.footerInfo .character li.chara01 a{background-position:0 0;}
.footerInfo .character li.chara02 a{background-position:-157px 0;}
.footerInfo .character li.chara03 a{background-position:0 -40px;}
.footerInfo .character li.chara04 a{background-position:-157px -40px;}
.footerInfo .character li.chara05 a{background-position:0 -80px;}
.footerInfo .character li.chara06 a{background-position:-157px -80px;}
.footerInfo .character li.chara07 a{background-position:0 -120px;}
.footerInfo .character li.chara08 a{background-position:-157px -120px;}

/* active
---------------------------------------------------------- */
body.chara01 .footerInfo .character li.chara01 a{background-position:0 -160px;}
body.chara02 .footerInfo .character li.chara02 a{background-position:-157px -160px;}
body.chara03 .footerInfo .character li.chara03 a{background-position:0 -200px;}
body.chara04 .footerInfo .character li.chara04 a{background-position:-157px -200px;}
body.chara05 .footerInfo .character li.chara05 a{background-position:0 -240px;}
body.chara06 .footerInfo .character li.chara06 a{background-position:-157px -240px;}
body.chara07 .footerInfo .character li.chara07 a{background-position:0 -280px;}
body.chara08 .footerInfo .character li.chara08 a{background-position:-157px -280px;}


/* ==========================================================
	footer
========================================================== */

ul.indent10{ font-size:9px;}