@charset "utf-8";



/*=================================================

top

=================================================== */


/*
top
必要なら入れる：behavior:url(js/iepngfix.htc);
-------------------------------------*/


h2.ttl_pickupmaterial {
background:url(../img/top/ttl_pickupmaterial.png) no-repeat left top;
_background:url(../img/top/ttl_pickupmaterial.gif) no-repeat left top;
width:283px;
height:33px;
text-indent:-9999px;
position:absolute;
top:270px;
left:180px;
}

/* ---------------------
scrollbox
----------------------- */

div#scrollBox {
width:480px;
z-index:90;
position:absolute;
top:310px;
left:170px;
z-index:99;
}


/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
    /* required settings */
	position:relative;
    overflow:hidden; 
    width: 450px; 
	_width:440px;
    height:130px;
	float:left;
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left; 
	width:100px;
	text-align:center;
	margin:0 0 0 10px;
	padding:10px 0 0 0;
	position:relative;
} 


div.scrollable div.items div img {

}

div.scrollable div.items div img.new {
position:absolute;

width:43px;
height:43px;
top:0px;
right:-20px;
z-index:200;
}

div.scrollable div.items div a { 
text-decoration:none;
text-align:center;
font-size:92%;
color:#663333;
} 


/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}


/* button */
/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(../img/common/cursor.gif) no-repeat;
	
	display:block;
	width:15px;
	height:100px;
	float:left;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -90px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-15px -90px; }
a.right:active 	{ background-position:-30px -90px; } 


/* left */
a.left				{ margin-left: 0px;z-index:99; } 
a.left:hover  		{ background-position:-15px 0; }
a.left:active  	{ background-position:-30px 0; }

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

/**/

/* ---------------------
news
----------------------- */
div#news {
background:url(../img/common/news_bg.png) no-repeat left top;
_background:url(../img/common/news_bg.gif) no-repeat left top;
width:452px;
height:68px;
position:absolute;
left:170px;
top:430px;
padding:50px 0 0 55px;
z-index:90;
}


div#news dl {
display:block;
margin:0;
width:445px;
height:55px;
z-index:100;
}

div#news dl dt {
display:block;
color:#663333;
padding:0 10px 0 0;
margin:0 0 15px 0;
font-size:85%;
float:left;
clear:left;
width:75px;
}


div#news dl dd {
display:block;
color:#663333;
margin:0 0 15px 0;
font-size:85%;
float:left;
width:330px;
}

div#news dl dd a {
color:#CC3333;
text-decoration:none;
z-index:100;
}

div#news dl dd a:hover {
color:#FF9966;
text-decoration:none;
}