@charset "utf-8";

body
{
	background: url(../img/item/bg.png) repeat 50% 50%;
}

/*************************
	bg
*************************/

#bg
{
	width: 50%;
	height: 1440px;
	position: absolute;
	background: url(../img/item/bg_stripe.gif) repeat 0 0;
	margin: -720px 0 0 28px;
	top: 50%;
	left: 50%;
}

#bg div
{
	width: 100%;
	height: 100%;
	padding-right: 43px;
	background: url(../img/item/bg_pattern.png) repeat 0 0;
}

/*************************
	content
*************************/

#content
{
	width: 1124px;
	height: 772px;
	margin: -441px 0 0 -562px;
	background: url(../img/item/cha.png) no-repeat 458px 98px;
}

/*************************
	subttl
*************************/

#subttl
{
	width: 377px;
	height: 109px;
	background: url(../img/item/subttl.png) no-repeat 0 0;
	margin: 106px 0 0 263px;
}

#subttl h2, #subttl p
{
	visibility: hidden;
}

/*************************
	movie
*************************/

#movie
{
	width: 512px;
	height: 288px;
	background: url(../img/item/movie_frame.png) no-repeat 0 0;
	padding: 5px 11px 10px 5px;
	margin: 17px 0 0 122px;
}

/*************************
	externalSwfContainer
*************************/

#externalSwfContainer
{
	width: 512px;
	height: 288px;
}

#externalSwfContainer img
{
	margin: 119px 0;
}

/*************************
	hatena
*************************/

#hatena
{
	width: 185px;
	height: 201px;
	position: absolute;
	top: 81px;
	left: 66px;
}

/*************************
	item
*************************/

#item
{
	width: 520px;
	height: 185px;
	background: url(../img/item/item_bg.png) no-repeat 9px 147px;
	margin: 6px 0 0 117px;
	padding-left: 12px;
	overflow: hidden;
}

#item li
{
	width: 142px;
	height: 145px;
	float: left;
	margin-left: -12px;
}

#item li a
{
	display: block;
	width: 142px;
	height: 145px;
	background: url(../img/item/item.png) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

#item li.item_1 a{ background-position: 0 0; }
#item li.item_2 a{ background-position: -142px 0; }
#item li.item_3 a{ background-position: -284px 0; }
#item li.item_4 a{ background-position: -426px 0; }
body#pc #item li.item_1 a:hover{ background-position: 0 -145px; }
body#pc #item li.item_2 a:hover{ background-position: -142px -145px; }
body#pc #item li.item_3 a:hover{ background-position: -284px -145px; }
body#pc #item li.item_4 a:hover{ background-position: -426px -145px; }
#item li.item_1 a.select{ background-position: 0 -290px!important; }
#item li.item_2 a.select{ background-position: -142px -290px!important; }
#item li.item_3 a.select{ background-position: -284px -290px!important; }
#item li.item_4 a.select{ background-position: -426px -290px!important; }
body#ds #item li.item_1 a.select{ background-position: 0 0; }
body#ds #item li.item_2 a.select{ background-position: -142px 0; }
body#ds #item li.item_3 a.select{ background-position: -284px 0; }
body#ds #item li.item_4 a.select{ background-position: -426px 0; }