@charset "UTF-8";

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

/* --- タブエリア --- */
div.section ul.tabs {
width: 657px; /* タブエリアの幅 */
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: 8.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:#333;
font-weight:bold;
position:absolute;
float:left;
border-left:8px solid #F00;
text-align:left;
padding:2px;
width:550px;
}
/* --- リンクエリア --- */
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;
width:635px;
z-index: 2;
overflow: auto; /* はみ出た場合はスクロールで表示 */
height:470px; /* 本文領域の高さ */
padding: 10px; /* 本文領域のパディング */
background-color: #ffffff; /* 本文領域の背景色 */
border: 1px #c0c0c0 solid; /* 本文領域の境界線 */
}
/* --- 本文領域の各ボックス --- */
.item-box { 
width:635px;
height:470px;
margin:0 auto;
margin-top:8px;
margin-left:-3px;
position:relative;
}
.item-box1 { 
width:635px;
height:460px;
margin:0 auto;
margin-top:8px;
position:relative;
}
/* --- 本文領域のボックス内画像 --- */
.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;
color:#FF6633;
margin-left:16px;
}
/* --- 本文領域の各ボックス リスト --- */

.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;
}
* { font-family: "Arial","Helvetica" !important; }
<!-- /*+++++++ 【スマホで文字サイズ自動拡大しない設定】+++++++　*/-->
body {-webkit-text-size-adjust: 100%;}
<!-- /*+++++++ 【スマホで文字サイズ自動拡大しない設定END】+++++++　*/-->

/* リンクの指定 */
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);}

<!--
hr {
border:none;
border-top:dotted 1px #AFAFAF;
height:1px;
color:#FFFFFF;
width:100%;
}
.h1{
  color:#666666;
  text-align:center;
}
.h2{
  border-left: 10px solid #669966;
  border-bottom: 1px dotted #669966; 
  padding:1px;
  color:#666666;
  text-align:center;
}
/* th */
.shiyou{
width: 650px;
border-collapse: collapse;
font-size:12px;
color:#666666;
}
.shiyou th{
width: 25%;
padding: 6px;
font-size:12px 
text-align: left;
vertical-align: top;
color: #333;
background-color: #fff;
border: 1px solid #b9b9b9;
}
.shiyou td{
padding: 6px;
font-size:12px 
background-color: #fff;
border: 1px solid #fff;
}
.ttl_61 {font-size : 12px;
border-bottom : 2px solid #73A4BC ;
border-left : 10px ridge #73A4BC ;
width:400px;
height : 25px;
padding:5px 0px 0px 9px;
}

/* 見出し */
.heading04{
	position:relative;
	padding:5px;
	background:#73A4BC;
	width:630px;
	top:10px;
	right:-8px;
	color:#FFFFFF;
	text-align:center;
	box-shadow:
		0 -10px 0 0 #9CBDCB,
		6px 0 0 0 #73A4BC,
		-14px 0 0 0 #73A4BC,
		0 3px 3px 0 rgba(0,0,0,0.1);
}
.heading04:before{
	content:" ";
	position:absolute;
	top:-10px;
	left:-14px;
	width:0;
	height:0;
	border-width:0 0 10px 14px;
	border-style:solid;
	border-color:transparent;
	border-bottom-color:#9CBDCB;
}
.heading04:after{
	content:" ";
	position:absolute;
	top:-10px;
	left:100%;
	width:0;
	height:0;
	border-width:0 6px 10px 0;
	border-style:solid;
	border-color:transparent;
	border-bottom-color:#9CBDCB;
}

.goodsBoxLeft img{ padding: 5px; border: 1px solid #d7d7d7; width:200px;box-shadow: 0px 13px 5px -7px rgba(0, 0, 0, 0.1); }
.goodsBoxLeft1 img{ padding: 5px; width:300px;}


.goodsBoxRight{float: center; width:230px; padding: 0 1px 1px 1px; color:#262402;}

.goodsBoxRight .caption{font-size:12px;color:#666;}
.goodsBoxRight .title{font-size:17px; font-weight:bold; color:#047c18; line-height:0.5em;}
.goodsBoxRight .itemNumber{font-size:12px;}
.goodsBoxRight .number{color:#bbbbbb;}
.goodsBoxRight .itemPrice{font-size:12px;}
.goodsBoxRight .price{font-size:20px; color:#FF0000; font-weight:bold;}
.goodsBoxRight .base{border-bottom:1px dotted #dcdcdc; margin-bottom:1px; padding-bottom:1px;}
.goodsBoxRight .doukon{font-size:13px;}
.goodsBoxRight .more a{ background-color:#73A4BC; color:#fff; font-size:12px; padding:5px; width:160px; display:block; text-align:center; border-radius:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; margin-top:10px;}

.unit{font-size:13px;}
.bunner{margin-top:20px;}
.goodsBoxLeft .more a{ background-color:#73A4BC; color:#fff; font-size:12px; padding:5px; width:160px; display:block; text-align:center; border-radius:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; margin-top:10px;}

.flame { 
border:1px solid #047c18; 
padding:5px; 
margin:0px;
width:240px;
line-height:1.3em;
height:20px;
border-radius:3px;
font-size:17px;
text-align:center;
color:#047c18;
}
/* cut */
.heading01{
	position:absolute;
	width:100%;
	top:230px;
	left:0;
	padding:5px;
	font:bold 13px/1.6 Arial, Helvetica, sans-serif;
	text-align:center;
	color:#CD5C5C;
	border-top:1px dashed #aaa;
	border-bottom:1px dashed #aaa;
	background:#eee;
	text-shadow:1px 1px 0 rgba(255,255,255,1);
	box-shadow:	0 5px 4px -4px rgba(0,0,0,0.3) inset;
}
.merumaga a{ 
background-color:#669966; 
color:#fff; 
font-size:12px; 
padding:5px; 
width:160px; 
display:block; 
text-align:center; 
border-radius:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; margin-top:10px;
margin: 0 auto;
}

#sapo {
width:320px;
height:270px;
padding:5px;
line-height:1.8em;
font-size:13px;
color:#333;
text-align:left;
position:absolute;
top:30px;
right:5px;

}
#sapo1 {
padding:10px;
width:320px;
font-size:13px;
color:#333;
text-align:left;
position:absolute;
left:20px;
top:280px;
}
#sapo2 {
width:320px;
padding:10px;
line-height:1.8em;
font-size:13px;
color:#333;
text-align:left;
position:absolute;
top:280px;
right:5px;
}

