@charset "UTF-8";

/*--------------------------------------------------------------*/
/* キャラクター個別ページ
/*--------------------------------------------------------------*/

#main{
	padding-top: 135px;
}

#header h1 a{
	text-indent: -9999px;
	background-image: url(../img/header_logo.png);
	background-repeat: no-repeat;
	background-position: left top;
}


/*====== main部のヘッダ ===========*/

#intro h2{
	position: absolute;
	color: #990000;
	font-size: 280%;
	font-weight: bold;
	letter-spacing: 0.2em;
	top: 85px;
	left: 70px;
	padding: 0.25em;
}

#intro h2.new{
	left: 160px;
}

#intro p{
	position: absolute;
	top: 5px;
	left: 0;
}


/*--------- 印刷ボタン ----------*/

#useful{
	position: absolute;
	top: 90px;
	right: 50px;
}

#useful h3{
	position: absolute;
	width: 0;
	text-indent: -9999px;
}

#useful ul li{
	margin-right: 15px;
	list-style: none;
	float: left;
}

#useful ul li.print{ font-size: 70%; }
#useful ul li.print a{ text-decoration: none; }
#useful ul li.print a:link { color: #333333 }
#useful ul li.print a:visited { color: #333333 }
#useful ul li.print a:hover { text-decoration: underline; }


/*========== キャラクター情報 =============*/

#character{
	position: relative;
	margin-bottom: 70px;
	padding-top: 10px;
}

#character h2{
	position: absolute;
	text-indent: -9999px;
}


/*--------- 横レイアウトのキャラ画像 ----------*/

#summary_x h3{
	position: absolute;
	text-indent: -9999px;
}

#summary_x p{
	height: 300px;
	text-align: center;
	overflow: hidden;
}


/*------ 横レイアウトのデザインコンセプト -------*/

#concept_x{
	position: relative;
	width: 685px;
	margin: 0 auto 10px auto;
	padding: 45px 30px 55px 35px;
	font-size: 90%;
	line-height: 1.5em;
	background-image: url(../img/character/concept_x_bg.png);
	background-repeat: repeat-y;
}

#concept_x h3{
	width: 159px;
	height: 29px;
	margin-bottom: 10px;
	text-indent: -9999px;
	background-image: url(../img/character/h3_concept.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#concept_x div.top{
	position: absolute;
	top: 0;
	left: 0;
	width: 750px;
	height: 57px;
	background-image: url(../img/character/concept_x_top.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#concept_x div.bottom{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 750px;
	height: 39px;
	background-image: url(../img/character/concept_x_bottom.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#concept_x div.bottom img{
	position: absolute;
	top: -20px;
	right: 25px;
}


/*---------- 縦レイアウトのキャラ画像 ---------*/

#summary_y h3{
	position: absolute;
	text-indent: -9999px;
}

#summary_y p{
	width: 430px;
	height: 500px;
	margin-left: 50px;
	text-align: center;
	overflow: hidden;
	float: left;
}


/*------ 縦レイアウトのデザインコンセプト -------*/

#concept_y{
	position: relative;
	top: 40px;
	width: 296px;
	margin: 0 0 0 480px;
	padding: 55px 35px 60px 35px;
	font-size: 90%;
	line-height: 1.5em;
	background-image: url(../img/character/concept_y_bg.png);
	background-repeat: repeat-y;
}

#concept_y h3{
	width: 159px;
	height: 29px;
	margin-bottom: 10px;
	text-indent: -9999px;
	background-image: url(../img/character/h3_concept.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#concept_y div.top{
	position: absolute;
	top: 0;
	left: 0;
	width: 366px;
	height: 55px;
	background-image: url(../img/character/concept_y_top.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#concept_y div.bottom{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 366px;
	height: 45px;
	background-image: url(../img/character/concept_y_bottom.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#concept_y div.bottom img{
	position: absolute;
	top: -10px;
	right: 20px;
}


/*---------- 購入情報 ---------*/

#buy{
	position: relative;
	margin: 50px 0 40px 50px;
	clear: both;
}

#buy h3{
	position: absolute;
	text-indent: -9999px;
}

/*-- 詳細 --*/

#buy dl.detail{
	width: 520px;
	margin-bottom: 20px;
	font-size: 77%;
	line-height: 1.5em;
	float: left;
}

#buy dl.detail dt{
	width: 5.5em;
	font-weight: bold;
	float: left;
}

#buy dl.detail dd{
	margin-bottom: 5px;
	padding: 0 0 5px 6.5em;
	border-bottom: dotted 1px #999999;
}

#buy dl.detail dd em{
	font-weight: bold;
	color: #047E8C;
}

/*-- CD納品紹介 --*/

#buy div.cd{
	width: 260px;
	height: 150px;
	margin-left: 540px;
}

#buy div.cd h4{
	position: absolute;
	text-indent: -9999px;
}

#buy div.cd dt{
	margin-bottom: 15px;
	padding-left: 15px;
	font-size: 75%;
	line-height: 1.5em;
	background-image: url(../img/character/star.png);
	background-repeat: no-repeat;
	background-position: left top;
}



/*-- ポーズ展開 --*/

#buy dl.pose{
	position: relative;
	float: left;
	clear: both;
}

#buy dl.pose dt{
	position: absolute;
	padding-left: 15px;
	font-size: 75%;
	line-height: 1.5em;
	background-image: url(../img/character/star.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#buy dl.pose dd{
	padding: 5px 0 0 15px;
}

/*-- 注文周り --*/

#buy div.order{
	position: relative;
}

#buy div.order h4{
	position: relative;
	text-indent: -9999px;
}

#buy div.order p.or{
	position: absolute;
	top: 80px;
	right: 207px;
	width: 1em;
}

/*-- このキャラを注文するボタン --*/

#buy div.order div.select{
	position: relative;
	width: 200px;
	height: 120px;
	padding: 15px;
	margin-left: 390px;
	background-color: #EEEEEE;
	font-size: 78%;
	line-height: 1.4em;
}

#buy div.order div.select h5{
	font-size: 110%;
	font-weight: bold;
}

#buy div.order div.select dl{
	margin: 6px 0 13px 0;
	padding-top: 6px;
	border-top: dotted 1px #999999;
}

#buy div.order div.select dt{
	width: 3.5em;
	float: left;
}

#buy div.order div.select dd{
	padding-left: 4em;
}

#buy div.order div.select dd span{
	color: #CC0000;
}

#buy div.order div.select form p{
	position: absolute;
	bottom: 15px;
	width: 200px;
	text-align: center;
}

/*-- このタッチでオーダーメードボタン --*/

#buy div.order div.ordermade{
	position: absolute;
	bottom: 0;
	right: 50px;
	width: 150px;
	height: 150px;
	margin-top: 25px;
	background-color: #EEEEEE;
}

#buy div.order div.ordermade p.text{
	font-size: 75%;
	line-height: 1.4em;
	text-align: center;
}

#buy div.order div.ordermade form p{
	position: absolute;
	bottom: 15px;
	width: 150px;
	text-align: center;
}


/*---------- 評価システム ---------

#valuate{
	position: relative;
	width: 782px;
	height: 335px;
	margin: 0 auto;
	padding: 20px 20px 20px 20px;
	background-image: url(../img/character/valuate_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#valuate h3{
	position: absolute;
	top: 50px;
	left: 32px;
	width: 756px;
	height: 50px;
	text-indent: -9999px;
	background-image: url(../img/character/valuate_h3.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#valuate p.image{
	position: absolute;
	top: 318px;
	left: 25px;
}


/*-----

#graph{
	position: absolute;
	width: 180px;
	height: 240px;
	top: 110px;
	left: 35px;
	text-align: center;
}

#graph dt{
	position: absolute;
	font-size: 75%;
	line-height: 1em;
	font-weight: bold;
	color: #2C8F9A;
}
#graph dt.point1{ top: 20px; left: 70px; }
#graph dt.point2{ top: 65px; right: -10px; }
#graph dt.point3{ top: 150px; right: -5px; }
#graph dt.point4{ bottom: 35px; left: 55px; }
#graph dt.point5{ top: 150px; left: 0; }
#graph dt.point6{ top: 63px; left: 0; }

#graph dd{
	position: absolute;
	text-indent: -9999px;
}

#graph p{ margin-top:25px; }

/*-----

#rating{
	position: absolute;
	top: 125px;
	left: 250px;
	width: 270px;
}

#rating p{ clear: both; }

#rating p span{ font-size:80%; }

#rating p input#comment{
	float: left;
	padding: 1px;
	width: 200px;
	margin-right: 10px;
}

#rating ul{
	font-size:90%;
	margin-bottom:12px;
}

#rating ul li{
	clear: both;
	list-style:none;
	margin-bottom:2px;
}

#rating ul li p{
	float: left;
	width: 8em;
	font-size: 90%;
}

#rating ul li span{
	font-size:75%;
	line-height:1em;
	margin-left:3px;
}

/*-----

#comment_view{
	position: absolute;
	top: 125px;
	right: 35px; width: 255px;
}

#comment_view div{
	border: solid 1px #CCCCCC;
	height: 180px;
	padding: 8px;
	overflow:auto;
	outline:none;
}

#comment_view div ul{ font-size:75%; }

#comment_view div ul li{
	list-style:none;
	border-bottom: dotted 1px #CCCCCC;
	padding-top: 0.3em;
	margin-bottom: 0.3em; 
}


/*--------- オススメかもなキャラ ----------*/

#same{
	position: relative;
	width: 808px;
	min-height: 162px;
	margin: 50px 0 15px 50px;
	padding: 12px 0 15px 0;
	background-image: url(../img/character/koma_same_bg.png);
	background-repeat: repeat-y;
	clear: both;
	z-index: 50;
}

#same h3{
	width: 471px;
	height: 31px;
	text-indent: -9999px;
	margin: 0 10px 10px 30px;
	background-image: url(../img/character/h3_sametag.png);
	background-repeat: no-repeat;
	background-position: top left;
}

#same ul{
	width: 765px;
	min-height: 80px;
	padding: 20px 0 20px 15px;
	margin-left: 15px;
	background-color: #F5F5F5;
	background-image: url(../img/character/line_same.png);
	background-repeat: no-repeat;
	background-position: top;
}

#same li{
	width: 87px;
	height: 84px;
	margin-right: 8px;
	list-style: none;
	float: left;
}

#same li img{
	padding: 2px 4px 2px 3px;
	background-image: url(../img/thumb_bg_g.png);
	background-repeat: no-repeat;
	background-position: top left;
}

#same div.top{
	position: absolute;
	top: 0;
	left: 0;
	width: 808px;
	height: 5px;
	background-image: url(../img/character/koma_same_top.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#same div.bottom{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 808px;
	height: 4px;
	background-image: url(../img/character/koma_same_bottom.png);
	background-repeat: no-repeat;
	background-position: left top;
}


/*---------- タグ ---------*/

#tag{
	position: relative;
	width: 380px;
	min-height: 114px;
	margin: 0 0 30px 50px;
	padding: 12px 0px 1px 0;
	background-image: url(../img/character/koma_tag_bg.png);
	background-repeat: repeat-y;
	float: left;
	z-index: 50;
}

#tag h3{
	width: 66px;
	height: 33px;
	margin: 0 10px 10px 30px;
	text-indent: -9999px;
	background-image: url(../img/character/h3_tag.png);
	background-repeat: no-repeat;
	background-position: top left;
}

#tag ul{
	min-height: 50px;
	margin: 0 20px 15px 20px;
	padding: 10px;
	background-color: #F5F5F5;
	background-image: url(../img/character/line_tag.png);
	background-repeat: no-repeat;
	background-position: top;
}

#tag li{
	display: inline;
	margin-right: 1.5em;
}

#tag div.top{
	position: absolute;
	top: 0;
	left: 0;
	width: 808px;
	height: 5px;
	background-image: url(../img/character/koma_tag_top.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#tag div.bottom{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 808px;
	height: 4px;
	background-image: url(../img/character/koma_tag_bottom.png);
	background-repeat: no-repeat;
	background-position: left top;
}


/*--------- 検索フォーム ----------*/

#search{
	position: relative;
	width: 420px;
	margin: 0 45px 0 435px;
	padding: 12px 0 15px 0;
	background-image: url(../img/character/koma_search_bg.png);
	background-repeat: repeat-y;
	background-position: left;
	z-index: 50;
}

#search h3{
	width: 286px;
	height: 37px;
	margin: 0 10px 10px 30px;
	text-indent: -9999px;
	background-image: url(../img/character/h3_search.png);
	background-repeat: no-repeat;
	background-position: top left;
}

#search p{
	width: 375px;
	margin-left: 15px;
	padding: 10px 10px 5px 10px;
	background-image: url(../img/character/line_search.png);
	background-repeat: no-repeat;
	background-position: top;
	background-color: #F5F5F5;
}

#search p #word{
	position: relative;
	bottom: 13px;
	width: 240px;
	margin-right: 17px;
	padding: 2px;
}

#search div.top{
	position: absolute;
	top: 0;
	left: 0;
	width: 420px;
	height: 5px;
	background-image: url(../img/character/koma_search_top.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#search div.bottom{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 420px;
	height: 4px;
	background-image: url(../img/character/koma_search_bottom.png);
	background-repeat: no-repeat;
	background-position: left top;
}


/*---------- 他ページへのナビ ---------*/

#navi{
	position: relative;
	z-index: 50;
	clear: both;
}

#navi h2{
	position: absolute;
	text-indent: -9999px
}

#navi ul{
	margin-left: 50px;
}

#navi li{
	margin-right: 10px;
	list-style: none;
	float: left;
}

#navi #navi_case a{
	display: block;
	width: 274px;
	height: 120px;
	margin-bottom: 30px;
	text-indent: -9999px;
	background-image: url(../img/character/goto_case.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#navi #navi_request a{
	display: block;
	width: 292px;
	height: 121px;
	margin-bottom: 30px;
	text-indent: -9999px;
	background-image: url(../img/character/goto_request.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#navi #navi_inquiry a{
	display: block;
	width: 217px;
	height: 120px;
	margin-bottom: 30px;
	text-indent: -9999px;
	background-image: url(../img/character/goto_inquiry.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#navi #navi_case a:hover,
#navi #navi_request a:hover,
#navi #navi_inquiry a:hover{
	position: relative;
	top: 1px;
	left: 1px;
}

#main p.back{ margin-bottom: 0; }



/*========== 表示できません =============*/

#inaccessible{
	position: relative;
	width: 421px;
	height: 57px;
	margin: 25px 0 70px 260px;
	padding-top: 30px;
	text-align: center;
	background-image: url(../img/inaccessible_bg.png);
	background-repeat: no-repeat;
	z-index: 11;	
}