@charset "Shift_JIS";
/* CSS Document */

/* ====================================================================

   サイト共通設定

==================================================================== */

/* ブラウザ表示対策------------------------------------------------- */

/* モダンブラウザ（Firefox Opera Safari）対策 */
.clearfix:after{
   content:".";
   display:block;
   height:0px;
   clear:both;
   visibility:hidden;
}

/* Win版IE7とMac版IE5対策 */
.clearfix{
   display:inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html .clearfix{
   height:1px;
}

.clearfix{
   display:block;
}
/* End hide from IE-mac */


/* 共通設定--------------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
}
a {
	/* macIE対策\*/
	overflow: hidden;
	/* macIE対策\*/
	}
a img {
	border: 0;
}
a:hover img {
	opacity:0.8;
	filter: alpha(opacity=80);
}
ul,ol,dl{
	list-style:none;
}

img {
	vertical-align: bottom;
}


body {
	background: #FCC;
	font-size: 12px;
	line-height: normal;
}

#container {
/*	background: url(../images/main_bg.jpg) top center repeat-y;*/
}

#top-wrapper {
	min-width:1014px;
	background: url(../images/top/bg.jpg) top center no-repeat;
	




	
}

#wrapper {
	background: url(../images/bg.jpg) top center no-repeat;
}

#page {
	width: 910px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

.topagetop {
	text-align: right;
	font-size: 0.9em;
}


/* link--------------------------------------------------------- */

a {
	color: #F09;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}


/* header--------------------------------------------------------- */

div#header {
	margin: 0 5px;
	height: 360px;
	position: relative;
}

.news div#header {
	background: url(../images/news/head.jpg) no-repeat;
}

.story div#header {
	background: url(../images/story/head.jpg) no-repeat;
}

.staff div#header {
	background: url(../images/staff/head.jpg) no-repeat;
}

.character1 div#header {
	background: url(../images/character/head1.jpg) no-repeat;
}

.character2 div#header {
	background: url(../images/character/head2.jpg) no-repeat;
}

.character3 div#header {
	background: url(../images/character/head3.jpg) no-repeat;
}

.character4 div#header {
	background: url(../images/character/head4.jpg) no-repeat;
}

.character5 div#header {
	background: url(../images/character/head5.jpg) no-repeat;
}

.character6 div#header {
	background: url(../images/character/head6.jpg) no-repeat;
	height: 370px;
}

.arasuji div#header {
	background: url(../images/arasuji/head.jpg) no-repeat;
}

.goods div#header {
	background: url(../images/goods/head.jpg) no-repeat;
}

.special div#header {
	background: url(../images/special/head.jpg) no-repeat;
}

h1 {
	text-indent: -9999px;
}

div#header h1 {
	padding: 10px;
}

div#header h1#totop a {
	display: block;
	width: 270px;
	height: 100px;
}


/* nav--------------------------------------------------------- */

ul#gloval-nav li {
}

ul#gloval-nav li.nav01 {
	top: 127px;
	left: 8px;
	position: absolute;
}

ul#gloval-nav li.nav02 {
	top: 207px;
	left: 123px;
	position: absolute;
}

ul#gloval-nav li.nav03 {
	top: 257px;
	left: 254px;
	position: absolute;
}

ul#gloval-nav li.nav04 {
	top: 222px;
	left: 392px;
	position: absolute;
}

ul#gloval-nav li.nav05 {
	top: 257px;
	left: 538px;
	position: absolute;
}

ul#gloval-nav li.nav06 {
	top: 207px;
	left: 670px;
	position: absolute;
}

ul#gloval-nav li.nav07 {
	top: 127px;
	right: 8px;
	position: absolute;
}


/* main--------------------------------------------------------- */

div#main {
	padding: 0 5px;
}

h2 {
	display: none;
}

/* top */

#top-flash {
	width: 1000px;
	margin: 0 auto;
}

#top-flash,  x:-moz-any-link  {
	padding: 1 0 0 0;
}

*:first-child+html #top-flash {
	padding: 1 0 0 0;
}

#top-header {
	margin: 0 auto;
	width: 900px;
	height: 399px;
	padding: 341px 0 0;
}

#top-header ul#gloval-nav {
	position: relative;
}

.top #main {
	background: url(../images/top/contents_bg.gif) 5px top repeat-y;
	padding: 0 35px;
	width: 840px;
}

/*.top #main,  x:-moz-any-link {
	margin: -5px 0 0;
}*/

.top #topics {
	background: url(../images/top/topics_bg.jpg) no-repeat;
	float: left;
	width: 370px;
	height: 450px;
	padding: 30px 20px 25px;
}

.top .contents {
	float: right;
	width: 410px;
}

.top .contents #yokoku {
	background: url(../images/top/next_bg.jpg) no-repeat;
	height: 210px;
	padding: 20px 20px 0;
	margin: 0 0 20px;
}

.top .contents #yokoku p.title {
	width: 235px;
	background: url(../images/top/border.gif) bottom left no-repeat;
	padding: 0 0 20px;
	font-weight: bold;
	font-size: 1.2em;
	color: #F00;
}

.top .contents #yokoku p.text {
	padding: 5px 0;
}

.top .contents #yokoku .btn {
	text-align: center;
	margin-top:5px;
}

.top .contents div.deco {
	background: url(../images/top/deco_bg.jpg) no-repeat;
	width: 410px;
	height: 250px;
}

ul#series {
	background: url(../images/top/list_bg.jpg) no-repeat;
	padding: 60px 0 0 10px;
	height: 75px;
	clear: both;
}

ul#series li {
	float: left;
}



/* news */

.news div#topics {
	background: url(../images/news/topics.jpg) no-repeat;
	height: 90px;
	padding: 20px 50px 40px 220px;
}

#news-list {
	background: url(../images/news/contents_bg.gif) repeat-y;
}

#news-list ul li {
	padding: 0 0 10px;
}

#news-list ul li div.wrap {
	background: url(../images/news/contents_bottom.gif) bottom left no-repeat;
	padding: 0 0 13px;
}

#news-list ul li div.inner {
	background: url(../images/news/list_bg.gif) repeat-y;
}

#news-list ul li div.box {
	background: url(../images/news/contents_head.jpg) top left no-repeat;
	padding: 50px 70px;
}

#news-list ul li p.date {
	text-align: center;
	font-size: 0.9em;
	color: #6C0;
}

#news-list ul li h3 {
	text-align: center;
	color: #F09;
	font-size: 1.2em;
	padding: 20px 0;
}

#news-list ul li p.text {
	padding: 10px 0;
}

#news-list ul li div.images {
	padding: 10px 0;
	text-align: center;
}

#news-list ul li p.topagetop {
	padding: 5px 40px;
}

#news-list ul li p.topagetop a {
	color: #6C0;
}



/* story */

.story div.bottom {
	background: url(../images/story/bottom.jpg) bottom left no-repeat;
	height: 80px;
	padding: 20px 40px 0;
}

.story .topagetop a {
	color: #09F;
}


/* staff */

.staff div.bottom {
	background: url(../images/staff/bottom.jpg) bottom left no-repeat;
	height: 90px;
	padding: 10px 50px 0;
}

.staff .topagetop a {
	color: #C9F;
}


/* character */

ul#character-btn {
	background: url(../images/character/contents1_bg.jpg) no-repeat;
	padding: 80px 0 120px 30px;
}

ul#character-btn li {
	float: left;
}

div#chara-pr {
	background: url(../images/character/contents2_bg.jpg) no-repeat;
	height: 800px;
}

div#chara-other {
	background: url(../images/character/contents4_bg.jpg) no-repeat;
	height: 800px;
}

div#chara-bad {
	background: url(../images/character/contents5_bg.jpg) no-repeat;
	height: 800px;
}

div#chara-akanbe {
	background: url(../images/character/deco_bg.gif) center top repeat-y;
}

div#chara-pr ul.list,
div#chara-bad ul.list {
	width: 175px;
	float: left;
	padding: 130px 0 0 30px;

}

div#chara-other ul.list {
	width: 190px;
	float: left;
	overflow-y:scroll;
	overflow-x: hidden;
	height: 780px;
	padding-top: 0px;
	padding-left: 30px;

}

div#chara-akanbe ul.list {
	padding: 0 0 0 35px
}

div#chara-akanbe ul.list li {
	width: 165px;
	float:left;
	margin-right:1px;
}

div#chara-pr ul.list li a:hover img,
div#chara-other ul.list li a:hover img,
div#chara-bad ul.list li a:hover img{
	opacity: 0.7;
	filter: alpha(opacity=70);
}

div#chara-pr div.main,
div#chara-other div.main,
div#chara-bad div.main {
	float: right;
	width: 640px;
	height: 785px;
	padding: 0 40px 0 0;
}

div#chara-pr div.main .images,
div#chara-other div.main .images,
div#chara-bad div.main .images,
div#chara-akanbe div.main .images {
	padding: 120px 10px 0;
}

div#chara {
	background: url(../images/character/deco_bg.gif) repeat-y;
	padding: 0 0 20px;
}

div#chara p.chara-nav {
	padding: 20px 0;
	text-align: center;
}

div#chara p.chara-nav img{
	margin-right:8px;
}

div#chara p.chara-nav a:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
}

div.chara1 {
	background: url(../images/character/main1.jpg) no-repeat;
}

div.chara2 {
	background: url(../images/character/main2.jpg) no-repeat;
}

div.chara3 {
	background: url(../images/character/main3.jpg) no-repeat;
}

div.chara4 {
	background: url(../images/character/main4.jpg) no-repeat;
}

div.chara5 {
	background: url(../images/character/main5.jpg) no-repeat;
}

div#chara-pr div.main ul.change {
	text-indent: -9999px;
	padding: 0 0 0 180px;
}

div#chara-pr div.main ul.change li {
	float: left;
	padding-right:15px;
}

div#chara-pr div.main ul.change li a {
	display: block;
	width: 130px;
	height: 35px;
}

div#chara-pr div.main ul.change3 {
	text-indent: -9999px;
	padding: 0 0 0 20px;
}

div#chara-pr div.main ul.change3 li {
	float: left;
	padding-right:13px;
}

div#chara-pr div.main ul.change3 li a {
	display: block;
	width: 110px;
	height: 35px;
}


/* arasuji */

div#arasuji {
	background: url(../images/arasuji/contents_bg.gif) repeat-y;
	padding: 0 0 30px;
}

div#arasuji div.episode-list {
	background: url(../images/arasuji/contents_head1.jpg) top left no-repeat;
	padding: 150px 70px 0;
}

div#arasuji div.episode-list ul li {
	padding: 5px 0 30px 40px;
	background: url(../images/arasuji/point.gif) top left no-repeat;
}

div#arasuji div.episode-list ul li p.title {
	font-size: 1.2em;
	font-weight: bold;
	float: left;
}

div#arasuji div.episode-list ul li p.title a {
	color: #09F;
}

div#arasuji div.episode-list ul li p.date {
	float: right;
	color: #666;
	font-size: 0.9em;
}

div#arasuji div.box {
	background: url(../images/arasuji/contents_head2.jpg) top left no-repeat;
	padding: 80px 70px 20px;
	position: relative;
}

div#arasuji div.box #ichiran {
	position: absolute;
	right: 17px;
	top: 80px;
}

div#arasuji div.box h3 {
	text-align: center;
	font-size: 1.2em;
	color: #09F;
	padding: 0 0 75px;
}

div#arasuji div.box p.date {
	text-align: center;
	font-size: 0.9em;
	color: #666;
	padding: 0 0 10px;
}

div#arasuji div.box p.staff {
	text-align: center;
	font-size: 0.9em;
	padding: 0 0 25px;
}

div#arasuji div.box div.images {
	float: left;
	background: url(../images/arasuji/photo_bg.jpg) no-repeat;
	width: 320px;
	height: 180px;
	padding: 9px;
	margin: 0 10px 0 0;
}

div#arasuji div.box div.clearfix {
	padding: 0 0 15px;
}

div#arasuji div.box div.images img {
	border: solid 1px #FFF;
}

div#arasuji div.box p.text {
	padding: 5px 0 0 0;
}

.arasuji div.bottom {
	background: url(../images/arasuji/bottom.jpg) bottom left no-repeat;
	height: 90px;
	padding: 20px 50px 0;
}

.arasuji .topagetop a {
	color: #F00;
}


/* goods */

#goods {
	background: url(../images/goods/contents_head.jpg) no-repeat;
	padding: 29px 0 0;
}

#goods ul.nav {
	padding: 0 0 130px 209px;
}

#goods ul.nav li {
	float: left;
}

#goods ul.list-nav {
	height: 110px;
	overflow: auto;
	margin: 8px 80px 15px;
	padding: 0 0 0 10px;
}

#goods ul.list-nav li {
	float: left;
	padding: 10px 0 4px 20px;
}

#goods ul.list-nav li img {
	height: 80px;
}

#goods ul.list {
	background: url(../images/goods/contents_bg.gif) repeat-y;
	padding: 0 80px 20px;
}

#goods ul.list li {
	background: url(../images/goods/border.gif) bottom left repeat-x;
	padding: 30px 0;
}

#goods ul.list li:last-child {
	background: none;
}

#goods ul.list li div.images {
	float: left;
	width: 180px;
}

#goods ul.list li div.images div.btn {
	padding: 10px 0 0;
}

#goods ul.list li div.text {
	float: right;
	width: 550px;
}

#goods ul.list li div.text h3 {
	border-left: solid 5px #F90;
	padding: 0 0 0 10px;
	font-size: 1.2em;
	color: #F90;
}

#goods ul.list li div.text dl {
	padding: 10px 0 5px;
}

#goods ul.list li div.text dl dt {
	color: #6C0;
}

#goods ul.list li div.text dl dd {
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 50px;
	clear: none;
	height: 12px;
}

.goods div.bottom {
	background: url(../images/goods/bottom.jpg) bottom left no-repeat;
	height: 70px;
	padding: 20px 50px 0;
}

.goods .topagetop a {
	color: #F90;
}


/* special */

#special {
	background: url(../images/special/contents_bg.gif) repeat-y;
	padding: 0 0 30px;
}

#special div.inner {
	background: url(../images/special/contents_head.jpg) top left no-repeat;
	padding: 100px 80px 20px;
}

#special div.inner h3 {
	text-align: center;
	font-size: 1.2em;
	color: #F09;
	padding: 0 0 60px;
}

#special div.inner p.date {
	text-align: center;
	font-size: 0.9em;
	color: #F90;
	padding: 0 0 40px;
}

#special div.inner div.box div.images {
	float: left;
	padding: 0 20px 0 0;	
}

#special div.inner div.box div.text ul {
	padding: 40px 0 0;
}

#special div.inner div.box div.text ul li {
	padding: 0 0 10px;
}

#special div.inner p.text {
	padding: 20px 0 0;
}

#special div.inner p.text span.pink {
	font-weight: bold;
	color: #F09;
}

#special div.inner p.text span.blue {
	color: #09F;
}

.special div.bottom {
	background: url(../images/special/bottom.jpg) bottom left no-repeat;
	height: 80px;
	padding: 20px 50px 0;
}

.special .topagetop a {
	color: #F00;
}



/* footer--------------------------------------------------------- */

div#footer {
	padding: 0 0 30px;
}

div.bnr {
	text-align: center;
	padding: 10px 0;
}

div.bnr img {
	padding: 0 5px;
}

div.copyright {
	text-align: center;
	font-size: 0.9em;
}
