@charset "euc-jp";
/* CSS Document */


/* ------------------------------
 TOPメニュー
------------------------------ */
ul.nav  {
	margin-bottom:10px;
}
ul.nav li{
    display: inline-block;
	font-weight:bold;
	padding:5px;
}

.TopleftContents{
	box-sizing: border-box;
	width: 692px;
	height:338px;
	border: 1px dotted #CCC;
	padding: 3px;
}
/* ------------------------------
 新着TXT
------------------------------ */
.newitem-box{
	width:700px;
	overflow:hidden;
}

.newitem-box dt{
	width:128px;
	float:left;
	padding:6px;
}

/* ------------------------------
 新着画像
------------------------------ */

.Contents-l dt{
	float:left;
	padding:1px;
}

.Contents-r dt{
	float:left;
	padding:1px;
}

/* ------------------------------
 リスト小
------------------------------ */

.Minilist dl{
	padding:2px;
}

.Minilist dt{
	float:left;
	padding:2px;
}

/* ------------------------------
 コンテンツ分割
------------------------------ */

.Contents1024{
	width:1024px;
	margin: auto;
	margin-bottom:10px;
	overflow:hidden;
}

.Contents-l{
	float:left;
	width:692px;
}


.Contents-r{
	float:right;
	width:305px;
}

/* ------------------------------
メインコンテンツ
------------------------------ */

.mainContents{
	float:right;
	width: 700px;
	margin-bottom:40px;
	border: 1px dotted #CCC;
}

.mainContents2-L{
	margin-right: 10px;
	float:right;
	width: 345px;
	margin-bottom:40px;
	border: 1px dotted #CCC;
}
.mainContents2-R{
	float:right;
	width: 345px;
	margin-bottom:40px;
	border: 1px dotted #CCC;
}

.Riders{
	padding:1em;
}

/* ------------------------------
サイド
------------------------------ */


#side{
	width:284px;
	float:left;
	margin-bottom:50px;
}

#side-l{
	float:left;
	width:160px;
	border: 1px dotted #CCC;
}

#side-r{
	float:right;
	width:100px;
}

#side-category ul{
	list-style-type: none;
	padding:0 5px;
}


#side-category a:link {
	color:#333;
	text-decoration:none;	
}
#side-category a:visited {
	color:#333;
	text-decoration:none;	
}
#side-category a:hover {
	color:#FF9900;
	text-decoration:underline;
}
#side-category a:active {
	color:#333;
	text-decoration:none;	
}


/* ------------------------------
CLB オススメアイテム
------------------------------ */

.clb{
	text-align:center;
}
.clb dt{
	margin-bottom:15px;
}


/* ------------------------------
サイド縦長バナー
------------------------------ */
.side-r-banner dt{
	margin-bottom:15px;	
}

/* ------------------------------
サイドインフォメーション
------------------------------ */

.side-info p{
	padding:0 5px;
}

/* ------------------------------
 フッター
------------------------------ */

#footer{
	clear:both;
	box-sizing: border-box;
	width:1024px;
	border: 1px dotted #CCC;
	padding:10px;
}

.footerContents{
	clear:both;
	width:100%;
}

.footerContents-l{
	width:49%;
	float:left;
}

.footerContents-r{
	width:49%;
	float:right;
}	


.footerContents ul{
	display: table;
	table-layout: fixed;
	width: 100%;
	border-collapse:separate;
}
.footerContents li{
	display: table-cell;
	vertical-align:middle;
	text-align:center;
}




/* ------------------------------
 背景指定
------------------------------ */

.chaos-back{
	width:1024px;
	height:50px;
	background:url(../img/material/back.gif);
}


/* ------------------------------
 マージン調整
------------------------------ */

.mb10{
	margin-bottom:10px;
}

.mb20{
	margin-bottom:20px;
}

.mb30{
	margin-bottom:30px;
}

.mb40{
	margin-bottom:40px;
}

.mb50{
	margin-bottom:50px;
}

/* ------------------------------
 flexリスト(左右余白あり)
------------------------------ */

.list-flex {
    width: 100%;
    display: flex;
    display: -moz-flex;
    display: -o-flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content: space-around;
    -moz-justify-content: space-around;
    -o-flex-justify-content: space-around;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
}
.elements {
    width: 160px;
	margin-bottom:10px;
}


/* ------------------------------
 flexリスト(左右余白なし)
------------------------------ */

.list-flex-w {
    width: 100%;
    display: flex;
    display: -moz-flex;
    display: -o-flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content: space-between;
    -moz-justify-content: space-between;
    -o-flex-justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
}
.elements-w {
    width: 160px;
	margin-bottom:10px;
}

/* ------------------------------
 横型検索
------------------------------ */
#ca_search{
	width:1024px;
	margin:0 auto;
}

#ca_search p{
	float:left;
	margin:10px 0 10px 20px;
}

#ca_search p.kara{
	margin:20px -12px 0 10px;
}

#ca_search p input.keywords1, #ca_search p input.keywords2{
	border:2px solid #000;
	padding:6px 6px 6px 25px;
}

#ca_search p input.keywords1{
	width:400px;
}

#ca_search p input.keywords2{
	width:166px;
}
.keywords1	{
	background: url(../img/material/search.png) no-repeat 8px 7px;
}

/* ------------------------------
 ScrollUp 
------------------------------ */

#scrollUp {
	bottom: 0px;
	right: 30px;
	width: 70px;
	height: 70px;
	margin-bottom: -10px;
	padding: 10px 5px;
	font-family: sans-serif;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
	color: #828282;
	-webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.2);
	background-color: #E6E6E6;
	background-image: -moz-linear-gradient(top, #EBEBEB, #DEDEDE);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#EBEBEB), to(#DEDEDE));
	background-image: -webkit-linear-gradient(top, #EBEBEB, #DEDEDE);
	background-image: -o-linear-gradient(top, #EBEBEB, #DEDEDE);
	background-image: linear-gradient(to bottom, #EBEBEB, #DEDEDE);
	background-repeat: repeat-x;
	-webkit-transition: margin-bottom 150ms linear;
	-moz-transition: margin-bottom 150ms linear;
	transition: margin-bottom 150ms linear;
}
	#scrollUp:hover {
		margin-bottom: 0px;
	}		
	
/* ------------------------------
 固定バナー
------------------------------ */	
	
@media screen and (min-width: 400px /*表示させたくない最小の大きさを記入（これはスマホの画面の大きさ）*/){
#sidebanner a{ display: none;}
}
#sidebanner a{
display: block;
background: url("http://www.rakuten.ne.jp/gold/chaos-accessory//re/img/rakuten/supersale300.png")/*通常時画像*/ no-repeat scroll 0 0;
width: 100px;/*画像幅*/
height: 500px;/*画像高さ*/
text-indent:-9999px;
position:fixed;
right:0px;
top:20px;
}
  
#sidebanner a:hover{
display: block;
background: url("http://www.rakuten.ne.jp/gold/chaos-accessory//re/img/rakuten/supersale300.png")/*マウスオーバー時画像*/ no-repeat scroll 0 0;
width: 100px;/*画像幅*/
height: 500px;/*画像高さ*/
text-indent:-9999px;
position:fixed;
right:0px;
top:20px;
-webkit-transition: width ease-in-out 0.5s;/*マウスオーバーの動く時間を記入して滑らかさを調節*/
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}