@charset "UTF-8";

body {-webkit-text-size-adjust: 100%;  font-family: "Arial","Helvetica";}



/* --- メインボックス --- */
div.section {
width: 900px; /* ボックスの幅 */
font-size: 80%; /* ボックスの文字サイズ */
color: #333; /* ボックスの文字色 */
}

/* --- タブエリア --- */
div.section ul.tabs {
width: 900px; /* タブエリアの幅 */
margin: 0;
padding: 0;
background-color: #fff; /* タブエリアの背景色 */
list-style-type: none;
}
div.section ul.tabs a hover{ 
background:#009933;
color:#fff;
}
div.section ul.tabs li {
position: relative;
z-index: 1;
width: 7.5em; /* タブの幅 */
margin-bottom: -1px; /* タブの下マージン */
text-align: center;
background:#eee;
color:#000;
float: right;
font-size:12px;
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
}
#title{ 
font-size:13px;
color:#000;
font-weight:bold;
position:absolute;
float:left;
text-align:left;
padding:2px;
letter-spacing:0.1em;
}
/* --- リンクエリア --- */
div.section ul.tabs li a {
display: block;
color:#444;
position: relative; /* IE6用 */
padding: 3px 2px; /* リンクエリアのパディング（上下、左右） */
border-left: 1px #ffffff solid; /* リンクエリアの左境界線 */
border-right: 1px #c0c0c0 solid; /* リンクエリアの右境界線 */
outline: none; /* アウトライン（なし） */
text-decoration: none; /* テキストの下線（なし） */
}
/* --- ポイント時の設定 --- */
div.section ul.tabs li a:hover {
text-decoration: underline; /* テキストの下線（あり） */
}

/* --- アクティブなタブ --- */
div.section ul.tabs li.active {
z-index: 3;
background-color:#008000; /* アクティブタブの背景色 */
font-weight: bold; /* 太字 */
}
div.section ul.tabs li.active a {
color: #fff; /* アクティブタブの文字色 */
}
/* --- ポイント時の設定 --- */
div.section ul.tabs li.active a:hover {
text-decoration: none; /* テキストの下線（なし） */
}

/* --- 本文領域 --- */
div.section div.topicArea {
position: relative;
z-index: 2;
height: 180px; /* 本文領域の高さ */
padding: 10px; /* 本文領域のパディング */
background-color: #ffffff; /* 本文領域の背景色 */
border: 1px #c0c0c0 solid; /* 本文領域の境界線 */
}
/* --- 本文領域の各ボックス --- */
.item-box { 
width:898px;
height:180px;
margin:0 auto;
margin-top:8px;
}
/* --- 本文領域のボックス内画像 --- */
.item-box-img { 
width:150px;
margin-bottom:5px;
cursor:pointer;
overflow:hidden;
border-radius:10px;
display:inline-block;
}
/* --- 本文領域のボックス内商品名 --- */
.item-box-name { 
text-align:center;
font-size:12px;
color:#444;
}
/* --- 本文領域のボックス内価格 --- */
.item-box-price { 
font-weight:bold;
text-align:center;
font-size:12px;
background:#FF6633;
color:#FFF;
display:inline-block;
margin-left:16px;
padding-left:4px;
padding-right:5px;
border-radius:3px;
}
/* --- 本文領域の各ボックス リスト --- */

.item-box ul{ 
width:850px;
}

.item-box li{ 
width:145px;
height:178px;
list-style:none;
margin-right:25px;
margin-left:7px;
float:left;
}
/* --- 段落 --- */
div.section div.topicArea p {
margin: 0 0 1em; /* 段落のマージン（上、左右、下） */
}

/* --- 本文領域内の各ボックス --- */
div.section div.topicArea div.topic {
padding-top: 1em; /* JavaScriptがオフの場合の設定 */
border-bottom: 1px #c0c0c0 solid; /* JavaScriptがオフの場合の設定 */
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

/* リンクの指定 */
a{text-decoration:none;}
a:visited{color:#444;}
a:link{color:#444;}
a:hover{color:#5387C2;}
a:active{color:#444;}
a img { -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;}
a:hover img { opacity:0.85; filter:alpha(opacity=85);}