@CHARSET "UTF-8";
/*******************************************************************************
	フォント設定
*******************************************************************************/
@font-face
{
	font-family : 'GD-hwGoJA';
	src : url(/font/GDhwGoJA-TTF106b.ttf);
}

/*******************************************************************************
	全般
	イメージカラー : #4c8,#482

*******************************************************************************/

html,body
{
	height       : 100%;
	font-size    : 14px;
	color        : #444;
	margin       : 0px;
	padding      : 0px;
	text-align   : center;
	//behavior     : url( "/css/csshover.htc" );
	//background : url(/img/background/left-right.png) repeat-y #fff;
	background   : #111;
	margin-top : 4px;
}

hr
{
	clear      : both;

	border     : none;
	border-top : solid 1px #0e1b79;
}


a,
a:link,
a:visited,
a:active,
a:hover,
a:visited:hover
{
	color           : #482;
	text-decoration : none;
}

div.wrapper
{
	position   : relative;
	width      : 100%;
	min-height : 100%;
	height     : auto;
	background : #111;//url(/img/background/black_192.png);
}
h1
{
	clear : both;
	border-bottom : solid 1px #4c8;
	padding-left : 6px;
	font-family : 'arial black';
	font-size:22px;
	color : #3a4;
}
/*
h1:before
{
	content : url(/img/mark3.png);
	position:relative;
	top:13px;
	left:-12px;
}
*/
h2
{
	clear : both;
	border-bottom : solid 1px #4c8;
	padding-left : 6px;
	font-family : 'arial black';
	font-size:16px;
	color : #3a4;
}
h3
{
	clear : both;
	border-bottom : solid 1px #4c8;
	padding-left : 6px;
	font-family : 'arial black';
	font-size:14px;
	color : #3a4;
}
img
{
	border:none;
}
hr
{
}

table
{
	margin-top : 0.8em;
	margin-bottom : 0.2em;
}
/*******************************************************************************
	メニューバー
*******************************************************************************/

div.site_header_bar
{
	//background  : #fff;/*#333 url(/img/tile.png) repeat-x;*/
	background  : #111;//url(/img/background/black_192.png);
	line-height : 24px;
	height      : 40px;
	width       : 100%;
	min-width   : 800px;

	vertical-align : bottom;

	border-top    :solid 4px #111;
	border-bottom :solid 4px #4c8;

	font-family    : 'Estrangelo Edessa','Tunga','Mangal','Latha','serif';
/*
	box-shadow         : 0px 4px 4px rgba(60,60,60,.5);
	-moz-box-shadow    : 0px 4px 4px -moz-rgba(60,60,60,.5);
	-webkit-box-shadow : 0px 4px 4px rgba(60,60,60,.5);
*/
}

img.logo
{
	margin   : 0 15px 0 5px;
	padding  : 2px;
	position : relative;
	float    : left;
}

.site_header_bar_item
{
	position: relative;
	float: left;

	width      :100px;
	line-height: 24px;

	margin     : 15px 2px 0 2px;
	padding    :  1px 3px 0 3px;

	border-top  : solid 1px #4c8;
	border-left : solid 1px #4c8;
	border-right: solid 1px #4c8;

	border-radius        : 10px 10px 0 0;
	-moz-border-radius   : 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	background : #fff;
	background :
		-moz-linear-gradient(
			top,
			rgba( 255, 255, 255, 1 ),
			rgba( 255, 255, 255, 1 ) 50%,
			rgba( 200, 200, 200, 1 )
			);
	background :
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(            rgba( 255, 255, 255, 1 ) ),
			color-stop( 0.5, rgba( 255, 255, 255, 1 ) ),
			to(              rgba( 200, 200, 200, 1 ) )
			);
}
.site_header_bar_item:hover
{
}

.site_header_bar_link,
.site_header_bar_link:link,
.site_header_bar_link:visited,
.site_header_bar_link:active,
.site_header_bar_link:hover,
.site_header_bar_link:visited:hover
{
	color           : #222;
	text-decoration : none;
}


.site_header_bar_item:hover a,
.site_header_bar_item:hover a:link,
.site_header_bar_item:hover a:visited,
.site_header_bar_item:hover a:active,
.site_header_bar_item:hover a:hover,
.site_header_bar_item:hover a:visited:hover
{
	color       : #4c8;
	text-shadow :1px 1px 0 #444;
}

.bottom_bar
{
	width       : auto;
	border-top  : solid 3px #4c8;
	margin      : 0 -3px 0 -3px;
	padding-top : 0;
}
.site_header_bar_item:hover .bottom_bar
{
	border-top         : solid 3px #4c8;
	-webkit-transition : all 0.2s ease;
	-moz-transition    : all 0.2s ease;
	transition         : all 0.2s ease;

}
.drop_panel
{
	position : absolute;
	top      : 29px;
	left     :  0px;

	text-align:left;

	background   : url(/img/background/black.png);

	border-top    : none;
	border-right  : #666 1px solid;
	border-left   : #666 1px solid;
	border-bottom : #666 1px solid;

	padding : 3px 0px;
	margin  : -1px 0 0 -1px;
	z-index : 100;
	height  : 0px;
	width   : 106px;
	zoom    : 100%;

	overflow : hidden;

	color   : #fff;
	font    : normal 12px Helvetica, sans-serif;
/*
	box-shadow         : 0 0px 5px rgba(0,0,0,.5);
	-moz-box-shadow    : 0 0px 5px -moz-rgba(0,0,0,.5);
	-webkit-box-shadow : 0 0px 5px rgba(0,0,0,.5);
*/
	border-radius         : 0 0 10px 10px;
	-moz-border-radius    : 0 0 10px 10px;
	-webkit-border-radius : 0 0 10px 10px;

	-webkit-transition : all 0.5s ease;
	-moz-transition    : all 0.5s ease;
	transition         : all 0.5s ease;
}
.drop_panel:hover
{
 	overflow : visible;
}

.site_header_bar_item:hover .drop_panel
{
	background:url(/img/background/black.png);

	box-shadow         : 0 4px 5px rgba(0,0,0,.5);
	-moz-box-shadow    : 0 4px 5px -moz-rgba(0,0,0,.5);
	-webkit-box-shadow : 0 4px 5px rgba(0,0,0,.5);
}
.site_header_bar_item:hover .drop_panel_2
{
	height:60px;
	-webkit-transition : all 0.1s ease;
	-moz-transition    : all 0.1s ease;
	transition         : all 0.1s ease;
}
.site_header_bar_item:hover .drop_panel_4
{
	height:100px;
	-webkit-transition : all 0.2s ease;
	-moz-transition    : all 0.2s ease;
	transition         : all 0.2s ease;
}
.site_header_bar_item:hover .drop_panel_6
{
	height:150px;
	-webkit-transition : all 0.3s ease;
	-moz-transition    : all 0.3s ease;
	transition         : all 0.3s ease;
}
.site_header_bar_item:hover .drop_panel_8
{
	height:170px;
	-webkit-transition : all 0.4s ease;
	-moz-transition    : all 0.4s ease;
	transition         : all 0.4s ease;
}
.site_header_bar_item:hover .drop_panel_10
{
	height:220px;
	-webkit-transition : all 0.5s ease;
	-moz-transition    : all 0.5s ease;
	transition         : all 0.5s ease;
}

.site_header_panel_row .site_header_sub_panel
{
	position : absolute;
	z-index  : 1000;
	top      : 6px;
	left     : 93px;

	padding     : 6px 0;
	margin-top  : -1px;
	margin-left : -1px;
	zoom        : 100%;

	text-align :left;

	background : url(/img/background/black_192.png);
	border     : none;
	color      : #fff;
	font       : normal 12px Helvetica, sans-serif;

	border-radius        : 0 10px 10px 10px;
	-moz-border-radius   : 0 10px 10px 10px;
	-webkit-border-radius: 0 10px 10px 10px;

	box-shadow         : 0 4px 10px rgba(0,0,0,.5);
	-moz-box-shadow    : 0 4px 10px -moz-rgba(0,0,0,.5);
	-webkit-box-shadow : 0 4px 10px rgba(0,0,0,.5);

	width    :  0px;
	height   : 12px;
	overflow : hidden;

}

.site_header_panel_row:hover .site_header_sub_panel
{
	width        : auto;
	border-color : #777 #BBB #777;
	border       : 1px solid;
}
.site_header_panel_row:hover .site_header_sub_panel_2
{
	height:50px;
	-webkit-transition : height 0.3s ease;
	-moz-transition    : height 0.3s ease;
	transition         : height 0.3s ease;
}
.site_header_panel_row:hover .site_header_sub_panel_4
{
	height:100px;
	-webkit-transition : height 0.3s ease;
	-moz-transition    : height 0.3s ease;
	transition         : height 0.3s ease;
}
.site_header_panel_row:hover .site_header_sub_panel_6
{
	height:150px;
	-webkit-transition : height 0.3s ease;
	-moz-transition    : height 0.3s ease;
	transition         : height 0.3s ease;
}
.site_header_panel_row:hover .site_header_sub_panel_8
{
	height:200px;
	-webkit-transition : height 0.3s ease;
	-moz-transition    : height 0.3s ease;
	transition         : height 0.3s ease;
}
.site_header_panel_row:hover .site_header_sub_panel_12
{
	height:300px;
	-webkit-transition : height 0.3s ease;
	-moz-transition    : height 0.3s ease;
	transition         : height 0.3s ease;
}
.site_header_panel_row:hover .site_header_sub_panel_14
{
	height:350px;
	-webkit-transition : height 0.3s ease;
	-moz-transition    : height 0.3s ease;
	transition         : height 0.3s ease;
}
.site_header_panel_row:hover .site_header_sub_panel_16
{
	height:400px;
	-webkit-transition : height 0.3s ease;
	-moz-transition    : height 0.3s ease;
	transition         : height 0.3s ease;
}
.site_header_panel_row
{
	width       : auto;
	white-space : nowrap;
	line-height : 20px;
	padding     : 2px 10px;
	font-size   : 12px;

	color:transpalent;

}

.site_header_sub_panel_row
{
	width       : auto;
	min-width   : 150px;
	white-space : nowrap;
	line-height : 20px;
	padding     : 2px 10px;
	font-size   : 12px;
	color       : white;
}
.site_header_panel_row:hover,
.site_header_sub_panel_row:hover
{
	background : #aaa;
}

.site_header_bar_item .site_header_panel_row a,
.site_header_bar_item .site_header_panel_row a:link,
.site_header_bar_item .site_header_panel_row a:visited,
.site_header_bar_item .site_header_panel_row a:active,
.site_header_bar_item .site_header_panel_row a:hover,
.site_header_bar_item .site_header_panel_row a:visited:hover
{
	color       : #4c8;
	text-shadow : 1px 1px 1px black;
}

.site_header_bar_item .has_sub_panel a,
.site_header_bar_item .has_sub_panel a:link,
.site_header_bar_item .has_sub_panel a:visited,
.site_header_bar_item .has_sub_panel a:active,
.site_header_bar_item .has_sub_panel a:hover,
.site_header_bar_item .has_sub_panel a:visited:hover
{
	color       : #fff;
	text-shadow : 1px 1px 1px black;
}
.site_header_bar_item .has_sub_panel:hover a,
.site_header_bar_item .has_sub_panel:hover a:link,
.site_header_bar_item .has_sub_panel:hover a:visited,
.site_header_bar_item .has_sub_panel:hover a:active,
.site_header_bar_item .has_sub_panel:hover a:hover,
.site_header_bar_item .has_sub_panel:hover a:visited:hover
{
	color       : #4c8;
	text-shadow : 1px 1px 1px black;
}

.site_header_bar_item .has_sub_panel
{
	color       : #fff;
	text-shadow : 1px 1px 0 black;
}

.site_header_panel_row span.name
{
	display : inline-block;
	width   : 100px;
}
.site_header_panel_row span.type
{
	display : inline-block;
	width   : 300px;
	font-size:14px;
}


/*******************************************************************************
	フッターバー
*******************************************************************************/
div.footer_bar
{
	position : absolute;
	bottom   : 0px;

	width     : 100%;
	min-width : 800px;

	padding    :3px 0;

	border-top : solid 3px #4c8;
	background : #111;//url(/img/background/black_192.png);
}
div.site_footer_bar
{
	font-size : 12px;
	margin    : 6px auto;
}
.site_footer_bar_item
{
	display       : inline;
	border-right  : solid 1px black;
	padding-right : 10px;
	margin-left   : 10px;
}
.site_footer_bar_end_item
{
	display       : inline;
	border-right  : none;
	padding-right : 10px;
	margin-left   : 10px;
}

.site_footer_bar_item:hover a,
.site_footer_bar_item:hover a:link,
.site_footer_bar_item:hover a:visited,
.site_footer_bar_item:hover a:active,
.site_footer_bar_item:hover a:hover,
.site_footer_bar_item:hover a:visited:hover
{
	color       : #4c8;
	text-shadow :1px 1px 0 #222;
}

div.copyright
{
	margin     :  2px;
	padding    :  2px;
	font-size  : 10px;
	text-align : right;
}
div.footer_bar a,
div.footer_bar a:link,
div.footer_bar a:visited,
div.footer_bar a:active,
div.footer_bar a:hover,
div.footer_bar a:visited:hover
{
	color:#fff;
}

/*******************************************************************************
	メインブロック
*******************************************************************************/
div.main_flame
{
	position   : relative;
	width      : 100%;
	min-width  : 840px;
	max-width  : 900px;
	min-height : 600px;
	height     : auto;

	margin : 0 auto 0 auto;
	background : #fff;
}

div.main
{
	clear : both;

	width  : 800px;
	margin : 16px auto 40px auto;
	text-align : left;
}

div.content
{
	margin-left:14px;
	padding-left:14px;
}
.clear
{
	clear : both;
}
div.thumbnail
{
	float:left;
	margin-right : 12px;
}

ul.item_list li
{
	clear : both;
}

ul.item_list li span.mark
{
	display : block;
	float   : left;
	width   : 30px;
}

ul.item_list li span.separator
{
	display : block;
	float   : left;
	width   : 8px;
}

ul.item_list li span.memo
{
	display : block;
	float   : left;
	width   : 600px;

	margin-bottom : 3px;
}
img.product
{
	//display : inline-block;
	margin  : 0px 10px 0px 0px;
	padding : 0px  0px 0px 0px;
	width   : 100px;

	float:left;
}

div.price_link
{
	margin-top    : 0.5em;
	margin-bottom : 0.5em;
	padding : 0.5em;
	border : solid 1px #4c8;
	width : 12em;
	text-align : center;
	border-radius : 8px;
	background : -moz-linear-gradient( top, rgba( 222,222,222,0 ), rgba( 222,222,222,1 ) );
	background : -webkit-gradient( linear, left top, left bottom, from(rgba( 222,222,222,0 )), to(rgba( 222,222,222,1 )) );
}
div.info_link
{
	margin-top    : 0.5em;
	margin-bottom : 0.5em;
	padding : 0.5em;
	border : solid 1px #4c8;
	width : 12em;
	text-align : center;
	border-radius : 8px;
	background : -moz-linear-gradient( top, rgba( 222,222,222,0 ), rgba( 222,222,222,1 ) );
	background : -webkit-gradient( linear, left top, left bottom, from(rgba( 222,222,222,0 )), to(rgba( 222,222,222,1 )) );
}
div.ask_link
{
	margin-top    : 0.5em;
	margin-bottom : 0.5em;
	padding : 0.5em;
	border : solid 1px #4c8;
	width : 12em;
	text-align : center;
	border-radius : 8px;
	background : -moz-linear-gradient( top, rgba( 222,222,222,0 ), rgba( 222,222,222,1 ) );
	background : -webkit-gradient( linear, left top, left bottom, from(rgba( 222,222,222,0 )), to(rgba( 222,222,222,1 )) );
}
div.ask_link:hover
{
	margin-top    : 0.5em;
	margin-bottom : 0.5em;
	padding : 0.5em;
	border : solid 1px #4c8;
	width : 12em;
	text-align : center;
	border-radius : 8px;
	background : -moz-linear-gradient( top, rgba( 200,200,200,0 ), rgba( 200,200,200,1 ) );
	background : -webkit-gradient( linear, left top, left bottom, from(rgba( 200,200,200,0 )), to(rgba( 200,200,200,1 )) );
}
div.shade_image
{
    position    : relative;

    margin  : 0;
    padding : 0;
    border  : 0;
}
div.shade_image:after
{
    position : absolute;
    content  : " ";

    left   : -1px;
    top    : -1px;
    right  : -1px;
    bottom : -1px;

    -moz-box-shadow    : inset 0px 0px 10px 10px #fff;
    -webkit-box-shadow : inset 0px 0px 10px 10px #fff;
    box-shadow         : inset 0px 0px 10px 10px #fff;
}

