@charset "utf-8";
/************************************************************
CSS Information
 File name:      top.css
 Style Info:     トップページのスタイル
************************************************************/

/*============================================================
 トップビジュアル
 ============================================================*/
#owl-demo{
	margin: 0 auto;
	display:block;
	text-align:center;
	background:url(../images/top/top_bg.jpg) no-repeat top center;
}
.announce {
  max-width:1200px;
  margin:0 auto;
   font-size:1.142em;/*16px*/
   padding-bottom:10px;
  text-align:center;
}
/*============================================================
 商品一覧カルーセル 
 ============================================================*/
.top_item_carousel {
  background:#E9E6E2;
  padding:5px 0 15px 0;
}
#container {
  max-width:1200px;
  margin:0 auto;
}
#container .icTit {
  margin:0 auto;
   font-size:1.142em;/*16px*/
   padding-bottom:10px;
  text-align:center;
  font-weight:bold;
}
#container .icbox {
  margin:0 auto;
  padding:0 3px;/*0 5px*/
  text-align:center;
}
#container .btn_ic{
	max-width:100%;
	text-align:center;
	font-size:0.7em;/*0.7692em 10px *//* 0.8571em/12px */
	border:none;
	cursor:pointer;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	color:#FFF;
	padding:5px 3px;/*5px*/
	background-color:#7E1D03;	
	}
#container .btn_ic:hover{
	background:#B20000;		
	}	

#container .btn_ic a:link {color: #FFF;text-decoration: none;}
#container .btn_ic a:visited {color: #FFF;text-decoration: none;}
#container .btn_ic a:hover {color: #FFF; text-decoration:none;}
#container .btn_ic a:active {color: #FFF;text-decoration: none;}

@media screen and (max-width: 1024px) {
	}

@media screen and (max-width: 768px) {
	}

@media screen and (max-width: 480px) {	
.item_carousel {
  background:#fff;
  padding:10px 0;
}
#container .btn_ic{
	display:none;		
	}
	}


/*
article#topmain　メインコンテンツ
 ============================================================*/
#topmain{
	width:46.6666%;/*560px*/
	float:left;
	margin:60px 0 30px 0;
	position:relative;
	}
#topmain .topsubBtn{
	position:absolute;
	right:0;
	top:20px;
	}

@media screen and (max-width: 1024px) {
#topmain{
	width:63%;
	}
	}

@media screen and (max-width: 768px) {
#topmain{
	width:60%;
	}
	}

@media screen and (max-width: 480px) {
#topmain{
	width:100%;
	float:none;
	margin:10px 0 30px 0;
	}
	}
	
/*
div#topsub　サイドバー
 ============================================================*/
#topsub{
	width:53.3333%;/*640px*/
	float:left;
	margin:60px 0 30px 0;
	}

@media screen and (max-width: 1024px) {
#topsub{
	width:35%;
	}
	}

@media screen and (max-width: 768px) {
#topsub{
	width:38%;
	}
	}

@media screen and (max-width: 480px) {
#topsub{
	width:90%;
	float:none;
	margin:50px auto;
	}
	}


/*============================================================
 新着情報 
 ============================================================*/
 
#contents #horizontalTab {
	width:46.6666%;/*560px*/
} 

/* タブ色指定 */
.resp-tabs-list li.tabAll {border-top:2px solid #FD7215;}
.resp-tabs-list li.tabProduct {border-top:2px solid #CE513F;}
.resp-tabs-list li.tabMedia {border-top:2px solid #F3BE36;}
.resp-tabs-list li.tabEvent {border-top:2px solid #5869B3;}
.resp-tabs-list li.tabOther {border-top:2px solid #2F8237;}


.resp-tab-active.tabAll{ background:#FD7215; color:#FFF;}
.resp-tab-active.tabProduct{ background:#CE513F; color:#FFF;}
.resp-tab-active.tabMedia{ background:#F3BE36; color:#FFF;}
.resp-tab-active.tabEvent{ background:#5869B3; color:#FFF;}
.resp-tab-active.tabOther{ background:#2F8237; color:#FFF;}

/*---  新着情報-詳細  -----------*/

.news_line{
	float:left;
	width:96%;
	border-bottom:#CCC 1px dotted;
	padding:5px 5px 9px 5px;
	margin-bottom:9px;
	overflow:auto;
	}
/* アイコン */
.news_line dt.goods{ /*商品情報*/
	float:left;
	width:60px;
	text-align:center;
	font-size:12px;
	border:none;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	line-height:1.8;
	color:#FFF;
	padding:5px;
	background-color:#CE513F;
	font-weight:bold;
	}
.news_line dt.media{/*メディア*/
	float:left;
	width:60px;
	text-align:center;
	font-size:12px;
	border:none;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	line-height:1.8;
	color:#FFF;
	padding:5px;
	background-color:#F3BE36;
	font-weight:bold;	
	}
.news_line dt.event{/*イベント*/
	float:left;
	width:60px;
	text-align:center;
	font-size:12px;
	border:none;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	line-height:1.8;
	color:#FFF;
	padding:5px;
	background-color:#5869B3;
	font-weight:bold;	
	}
.news_line dt.other{/*その他*/
	float:left;
	width:60px;
	text-align:center;
	font-size:12px;
	border:none;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	line-height:1.8;
	color:#FFF;
	padding:5px;
	background-color:#2F8237;
	font-weight:bold;	
	}

.news_line dt{
	width:80px;
	clear: left;
    float: left;
	}
.news_line dd{
	margin-left:80px;
	}
.news_line dd span{
	color:#A4A473;
	}
	
@media screen and (max-width: 1024px) {
	}

@media screen and (max-width: 768px) {
	}

@media screen and (max-width: 480px) {	
	}

/*============================================================
 バナー
 ============================================================*/
#topbn {
	width:300px;/*300px*/
	float:left;
	margin-left:1.6666%;/*20px*/
}
#topbn2 {
	width:300px;/*300px*/
	float:left;
	margin-left:1.6666%;/*20px*/
}
#topbn li, #topbn2 li {
	display:block;
	float:left;
	padding-bottom:1.4285em;/*20px*/
	width:300px;/*300px*/
	list-style:none;
} 
@media screen and (max-width: 1024px) {
#topbn2 {
	float:none;
	margin-left:1.6666%;/*20px*/
}
	}

@media screen and (max-width: 768px) {
#topbn {
	float:none;
	margin-left:0px;
}
#topbn2 {
	float:none;
	margin-left:0px;
}
#topbn img, #topbn2 img {
	width:82%;
	padding-left:1.6666%;/*20px*/
}
	}

@media screen and (max-width: 480px) {
#topbn {
	float:none;
	margin-left:0px;
}
#topbn2 {
	float:none;
	margin-left:0px;
} 
#topbn img, #topbn2 img {
	width:90%;
	padding-left:0px;
}	
	}