@charset "utf-8";

/*
===================================================================================================
 製品紹介固有のCSS
===================================================================================================
*/

/* A:LINK, A:VISITED, A:ACIVE, A:HOVER */
a:link,
a:visited,
a:active{
	color:#000000;
	text-decoration:underline;
}
a:hover{
color:#AF5207;
	text-decoration:underline;
}

/*
 ヘッダ右に表示するタイトル画像
---------------------------------------------------------------------------------------------------
*/
h2#products{
width:107px;
height:45px;
background:url(../image/products-title.gif);
}
/*
h2#product_page{
width:107px;
height:45px;
background:url(../image/products-title.gif);
}
*/

/*
 製品紹介画面で使用する画面全体の領域
---------------------------------------------------------------------------------------------------
*/
div#container-inner {
	width:989px;
}

/*
 画面左側のメインコンテンツの表示領域を定義
---------------------------------------------------------------------------------------------------
*/
div#main_content {
	width:736px;
	float:left;
	border-right: 1px solid silver;

	margin: 0 auto;
	padding-bottom: 0px
}

div.left_content
{
	float:left;
	margin-top:13px;
	margin-left:4px;
	vartical-align: top;
	width: 444px;
}

div.right_content
{
	float: right;
	margin:13px auto 0px;
	width: 282px;
}


div.left_content_skin
{
	float:left;
	margin-top:13px;
	margin-left:4px;
	vartical-align: top;
	width: 438px;
}

div.right_content_skin
{
	float: right;
	margin:13px auto 0px;
	width: 288px;

}

/*
 画面右側のサイドメニューの領域を定義
---------------------------------------------------------------------------------------------------
*/
div#side_menu {
	width:250px;;
	float:right;
}


/*
 【共通】→全体共通に移動すべき？
 テキストの表示方向を定義（横）
---------------------------------------------------------------------------------------------------
*/
.ta-c { text-align:center; }
.ta-l { text-align:left; }
.ta-r { text-align:right; }


/*
 【共通】→全体共通に移動すべき？
 マージントップ指定
---------------------------------------------------------------------------------------------------
*/
.mt10 { margin-top:10px;}
.mt20 { margin-top:20px;}
.mt25 { margin-top:25px;}
.mt30 { margin-top:30px;}
.mt40 { margin-top:40px;}


/*
 【共通】→全体共通に移動すべき？
 マージンライト指定
---------------------------------------------------------------------------------------------------
*/
.mr20 { margin-right:20px;}


/*
 【共通】→全体共通に移動すべき？
 指定したオブジェクトにマウスカーソルが合わさると、カーソルが指に変更される。
---------------------------------------------------------------------------------------------------
*/
.cursor_hand {
	cursor:pointer;
}

/*
 カートへ入れるボタン
---------------------------------------------------------------------------------------------------
*/
table.intoCart {
	border:0px;
	border-collapse: collapse;
	margin-top:24px;
	margin-right:5px;
	float: right;
}

table.intoCart td.cart_label {
	font-size:120%;
	font-weight:900;
}

table.intoCart td.quantity {
	padding-left:5px;
}

table.intoCart td.quantity input[type="text"] { width: 15px; }

table.intoCart td.btn_updown {
	cursor:pointer;
	padding-right:5px;
}

table.intoCart td.btn_updown div{
	display:block;
}

/*
 テキストサイズ
---------------------------------------------------------------------------------------------------
*/
.product_text_size
{
	font-size: 90%;
}

span.sub_title_text
{
	font-weight: 900;
}

span.shikaku
{
	font-size: 170%;
}


/*
 ページアップへ画面の基本情報を定義
 右側のラインと合わない場合は、padding-rightの幅を調整することで表示をコントロールできる。
 各画面固有の情報の場合はソースコードに直指定する。
---------------------------------------------------------------------------------------------------
*/
p#pageup{
	clear:both;
	margin:0 auto;
	width:110px;
}
p#pageup a{
	display:block;
	width:110px;
	height:30px;
	background:url(../../common/images/ptop.gif) no-repeat 0 0;
}
p#pageup a:hover{background:url(../../common/images/ptopov.gif) no-repeat 0 0;}


/*
 【商品画面共通】
 右サイドメニューのCSS
 基本的にはカートのサイドメニューの踏襲
---------------------------------------------------------------------------------------------------
*/
table#menu_table {
	border-style: 0px solid;
	padding: 0px;
	border-collapse: collapse;
	width: 250px;
}


tr.menu_tab {
	height:27px;
	text-align:left;
}

tr.menu_tab td {
	border-bottom: solid 1px #000000;

}

span.menu_title_text {
	font-size: 120%;
	font-weight: 900;
}

span.menu_title_text_small {
	font-size: 100%;
	font-weight: 900;
}


span.menu_text {
	font-size: 100%;
	font-weight: 700;
}

span.menu_text_small  {
	font-size: 80%;
	font-weight: 700;
}


span.shikaku2 {
	font-size: 140%;
	margin-left:9px;
	margin-right:2px;
}


span.shikaku3 {
	font-size: 140%;
	margin-right:2px;
}



/*
 【商品一覧用CSS】
---------------------------------------------------------------------------------------------------
*/

table.table_products_list {
	border-collapse: collapse;
}

table.table_products_list tr.title td {
	text-align:left;
	color:gray;
	font-size:80%;
	width:120px;
}

table.table_products_list tr.title_mini td {
	text-align:left;
	color:gray;
	font-size:75%;
	width:120px;
}

table.table_products_list span.name_mini {
	text-align:left;
	font-size:70%;
	width:120px;
}




table.table_products_list td.empty {
	height:25px;
}



/*
 【共通】商品明細
---------------------------------------------------------------------------------------------------
*/
table.product_detail_table {
	width:279px;
	border-collapse: collapse;
}

table.product_detail_table td {
	border-bottom: 1px solid black;
	padding-top:0.3em;
	padding-bottom:0.3em;
}

table.product_detail_table td.name span.shikaku {
	font-size:170%;
}

table.product_detail_table td.name span.productName {
	font-size:100%;
	font-weight:900;
}

table.product_detail_table td.title {
	padding-left:5px;
	font-size:100%;
	font-weight:900;
	width:100px;
	text-align:left;
	//height:27px;
}

/*
 【共通】その他
---------------------------------------------------------------------------------------------------
*/

/* float解除 */

div.clear_float 
{
    zoom: 100%;
}
div.clear_float hr
{
	display: none;
}
div.clear_float:after 
{
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}