@charset "utf-8";


#itembox {
	background: #FFF;	/*背景色#efefef*/
	padding: 5px;
	border: 1px solid #808080;	/*ボックスのライン設定*/
	width: 390px;
	height: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-left: 5px;
	line-height: 2em;
	margin-bottom: 10px;
	float: left;
}

#itemtxt {
	/*background: #efefef;*/	/*背景色*/
	padding: 5px;
	/*border: 1px solid #808080;	*//*ボックスのライン設定*/
	width: 280px;
	margin-top: 0px;
	margin-right: 20px;
	margin-left: 5px;
	line-height: 2em;
	margin-bottom: 10px;
	float: right;
	text-align: left;

}

/*#itemtxt p.btn001{
	margin: 20px 10px 10px 0px;
}*/
/*#itemtxt p{
	margin: 0px !important;
}*/


/*ここ商品のリスト*/
.main,
.main li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.main {
  margin-bottom: 5px;
}
.main li {
  width: 385px;
  height: 385px;
  overflow: hidden;
}
.main li.item2,
.main li.item3,
.main li.item4 {
  display: none;
}
.main li:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}
.thumb,
.thumb li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.thumb li {
  display: inline-block;
  width: 111px;
  height: 111px;
  overflow: hidden;
  cursor: pointer;
  vertical-align: top;
  margin-bottom: 4px;
}
.thumb li img {
  width: 100%;
  height: auto;
}
.thumb li:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}


/* ▼タブ機能の掲載領域の装飾(※必須ではありません) */
.tabbox {
	margin-left: 5px;
	padding: 0em;
	background-color: #f8f8ff;
	text-align: left;
	width: 98.5%;
}


/*CSSだけのタブメニュー*/
/* ▼タブ機能を制御するラジオボタン(非表示にする) */
.tabbox input {
	display: none;
	margin-left: 5px;
	
}
/* ▼タブ(共通装飾＋非選択状態の装飾) */
.tab {
      display: inline-block;
      border-width: 1px 1px 0px 1px;
      border-style: solid;
      border-color: black;
      border-radius: 0.4em 0.4em 0px 0px;/*0.75em 0.75em 0px 0px*/
      padding: 0.2em 1em;
      color: black;
      background-color: #e0e0e0;
      font-weight: bold;
   }
/* ▼タブにマウスポインタが載った際の装飾 */
.tab:hover {
	background-color: #ccffcc;
	color: green;
	cursor: pointer;
   }
/* ▼チェックが入っているラジオボタンの隣にあるタブの装飾(＝選択状態のタブ) */
input:checked + .tab {
	color: red;
	background-color: #ffffcc;
	position: relative;
	z-index: 10;
   }
/* ▼タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
	display: none;
	border: 1px solid black;
	margin-top: -1.5px;
	padding: 1em;position: relative;
	z-index: 0;
	background-color: #ffffcc;
   }
/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#tabcheck1:checked ~ #tabcontent1 { display: block; }
#tabcheck2:checked ~ #tabcontent2 { display: block; }
#tabcheck3:checked ~ #tabcontent3 { display: block; }
#tabcheck4:checked ~ #tabcontent4 { display: block; }
#tabcheck5:checked ~ #tabcontent5 { display: block; }
#tabcheck6:checked ~ #tabcontent6 { display: block; }
#tabcheck7:checked ~ #tabcontent7 { display: block; }
#tabcheck8:checked ~ #tabcontent8 { display: block; }
#tabcheck9:checked ~ #tabcontent9 { display: block; }
#tabcheck10:checked ~ #tabcontent10 { display: block; }






/*jsタイプのタブメニュー*/
/* ▼タブ */
#tabcontrol{
	width: 97%;
	text-align: left;
	padding-left: 0px !important;
	padding-bottom: 0px !important;
	margin-left: 5px;
	margin-top:20px;
}

#tabcontrol a {
   display: inline-block;            /* インラインブロック化 */
   border-width: 1px 1px 0px 1px;    /* 下以外の枠線を引く */
   border-style: solid;              /* 枠線の種類：実線 */
   border-color: black;              /* 枠線の色：黒色 */
   border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */
   padding: 0.2em 1em;              /* 内側の余白 */
   text-decoration: none;            /* リンクの下線を消す */
   color: black;                     /* 文字色：黒色 */
   background-color: white;          /* 背景色：白色 */
   font-weight: bold;                /* 太字 */
   position: relative;               /* JavaScriptでz-indexを調整するために必要 */
}
/* ▼タブにマウスポインタが載った際（任意） */
#tabcontrol a:hover {
   text-decoration: underline;   /* リンクの下線を引く */
}
/* ▼タブの中身 */
#tabbody div {
   border: 1px solid black; /* 枠線：黒色の実線を1pxの太さで引く */
   margin-top: -2px;        /* 上側にあるタブと1pxだけ重ねるために「-1px」を指定 */
   padding: 1em;            /* 内側の余白量 */
   background-color: white; /* 背景色：白色 */
   position: relative;      /* z-indexを調整するために必要 */
   z-index: 0;              /* 重なり順序を「最も背面」にするため */
	width: 94.5%;
	margin-left: 5px;
	margin-bottom: 20px;
}
/* ▼タブの配色 */
#tabcontrol a:nth-child(1), #tabbody div:nth-child(1) { background-color: #ffffdd; }/* 1つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(2), #tabbody div:nth-child(2) { background-color: #ddffdd; }/* 2つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(3), #tabbody div:nth-child(3) { background-color: #ddddff; }/* 3つ目のタブとその中身用の配色 */



.clearitembox{
	width: 100%;
	clear: both;
	height: 50px;
}