@charset "utf-8";
/************************************

■TOPページ用CSS 目次

1.コンテンツ

************************************/



/************************************

1.コンテンツ

************************************/

/*--- メインコンテンツ（TOPページ用） ---*/
#contentsTop {
	width: 898px;
}
.fs-l-sideArea + .fs-l-pageMain, .fs-l-pageMain + .fs-l-sideArea {
  max-width: 898px;
}

#contentsTop a:hover {
	text-decoration:none;
}


/*--- 見出し ---*/

#contentsTop h2{
	margin-top:30px;
	margin-bottom:30px;
	background: url('https://cucan.itembox.design/item/img01/tit_top_bg_line.gif') repeat-x;
	background-position: center;
	text-align: center;
}

#contentsTop h3{
	background:inherit;
	height:inherit;
	color:inherit;
	padding:0;
	font-size:inherit;
	margin: 20px auto;
	background: url('https://cucan.itembox.design/item/img01/tit_top_bg_dot.gif') repeat-x;
	background-position: center;
	text-align: center;
}
#contentsTop .pickup h3{
	background: url('https://cucan.itembox.design/item/img01/tit_top_bg_line.gif'), linear-gradient(180deg,#FFF 0%,#FFF 50%,#eee 50%,#eee 100%);
	background-repeat: repeat-x;
	background-position: center;
}

#contentsTop h3 img{
	background-color:#FFF;
}

#contentsTop .categoryTop .categoryBox h3 + p{
	position:absolute;
	top:9px;
	left:9em;
	color:#FFF;
	font-size:120%;
	z-index:1;
}

#contentsTop h4{
	background:#e7e7e7;
	border-top:1px solid #282828;
	padding:8px 10px;
	color:#282828;
	font-weight:bold;
	font-size:120%;
}


/*--- JSスライダー ---*/

#contentsTop #jslider {
}

/* slider layout */
.lof-slidecontent {
	position: relative;
	overflow: hidden;
/*	border: #F4F4F4 solid 1px;*/
	background: #eeeeee;
}
.lof-slidecontent .preload {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
	text-align: center;
	background: #FFF
}
.lof-slidecontent .preload div {
	height: 100%;
	width: 100%;
	background: transparent no-repeat scroll 50% 50%;
}
.lof-slidecontent .sliders-wrapper {
	position: relative;
	height: 100%;
	width: 750px;
	z-index: 3px;
	overflow: hidden;
}
.lof-slidecontent ul.sliders-wrap-inner {
	overflow: hidden;
	background: transparent no-repeat scroll 50% 50%;
	padding: 0px;
	margin: 0;
	position: absolute;
}
.lof-slidecontent ul.sliders-wrap-inner li {
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	float: left;
	position: relative;
}
.lof-slidecontent .lof-opacity li {
	position: absolute;
	top: 0;
	left: 0;
	float: inherit;
}
.lof-slidecontent .navigator-content {
	position: absolute;
	bottom: 0;
	right: 0;
	padding-bottom: 7px;
	background: #eeeeee;
	width: 750px;
}
.lof-slidecontent .navigator-wrapper {
	position: relative;
	z-index: 10;
	height: 68px;
	width: 750px;
	color: #FFF;
	float: left;
}
.lof-slidecontent ul.navigator-wrap-inner {
	top: 0;
	padding: 0;
	margin: 0;
	position: absolute;
	width: 100%;
}
.lof-slidecontent ul.navigator-wrap-inner li {
	cursor: hand;
	cursor: pointer;
	list-style: none;
	padding: 0;
	margin-left: 0px;
	overflow: hidden;
	float: left;
	display: block;
	text-align: center;
}
/*******************************************************/
 
ul.sliders-wrap-inner li img {
	padding: 0px;
}
.lof-slidecontent .item-meta a:hover {
	text-decoration: underline;
}
.lof-slidecontent .item-meta i {
	font-size: 70%;
}
/* item navigator */

.lof-slidecontent ul.navigator-wrap-inner li img {
	border: #666 solid 2px;
}
.lof-slidecontent ul.navigator-wrap-inner li.active img, .lof-slidecontent ul.navigator-wrap-inner li:hover img {
	border: #A8A8A8 solid 2px;
	-moz-transition: border-color ease-in-out 0.4s;
}
.lof-slidecontent .navigator-content .button-next, .lof-slidecontent .navigator-content .button-previous {
	display: block;
	width: 22px;
	height: 30px;
	color: #FFF;
	cursor: pointer;
}
.lof-slidecontent .navigator-content .button-next {
	float: left;
	text-indent: -999px;
	margin-right: 5px;
	margin-top: 17px;
	background: url(https://www.cucannetshop.jp/img/imgTop/slideshow/arrow-r.png) no-repeat right center;
}
.lof-slidecontent .navigator-content .button-previous {
	float: left;
	text-indent: -999px;
	margin-left: 5px;
	margin-top: 17px;
	background: url(https://www.cucannetshop.jp/img/imgTop/slideshow/arrow-l.png) no-repeat left center;
}

/*--- NEW ARRIVAL ---*/
#contentsTop .top_newitem{
	margin-bottom:20px;
}

/*--- 特集一覧 ---*/

#contentsTop #featureTop {
	overflow:hidden;
	margin-top:20px;
}

#contentsTop #featureTop p {
	padding:10px;
	color:#fff;
	font-size:16px;
	line-height:28px;
}

/*General Mosaic Styles*/
.mosaic-block {
	float:left;
	position:relative;
	overflow:hidden;
	width:290px;
	height:290px;
	margin-right:14px;
	margin-bottom:14px;
	padding:0;
	font-size:120%;
	background:#111 url(https://www.cucannetshop.jp/img/top/progress.gif) no-repeat center center;
}
.mosaic-block:nth-child(3n){
	margin-right:0;
}
	.mosaic-backdrop {
		display:none;
		position:absolute;
		top:0;
		height:100%;
		width:100%;
		background:#111;
	}
	
	.mosaic-overlay {
		display:none;
		z-index:5;
		position:absolute;
		width:100%;
		height:100%;
		background:#111;
	}
	
		/*** Custom Animation Styles (You can remove/add any styles below) ***/
		.circle .mosaic-overlay {
			background:url(https://www.cucannetshop.jp/img/top/hover-magnify.png) no-repeat center center;
			opacity:0;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
			filter:alpha(opacity=00);
			display:none;
		}
		
		.fade .mosaic-overlay {
			opacity:0;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
			filter:alpha(opacity=00);
			background:url(https://www.cucannetshop.jp/img/top/bg-black.png);
		}
		
		.bar .mosaic-overlay {
			bottom:-100px;
			height:100px;
			background:url(https://www.cucannetshop.jp/img/top/bg-black.png);
		}
		
		.bar2 .mosaic-overlay {
			bottom:-50px;
			height:100px;
			opacity:0.8;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
			filter:alpha(opacity=80);
		}
		
			.bar2 .mosaic-overlay:hover {
				opacity:1;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				filter:alpha(opacity=100);
			}
		
		.bar3 .mosaic-overlay {
			top:-100px;
			height:100px;
			background:url(https://www.cucannetshop.jp/img/top/bg-black.png);
		}
		/*** End Animation Styles ***/

/*--- カテゴリー別 ---*/
#contentsTop .categoryTop .categoryBox{
}
#contentsTop .categoryTop .categoryBox .itemList{
	letter-spacing: -.4em;
}
#contentsTop .categoryTop .categoryBox .itemList li{
	display:inline-block;
	width: 286px;
	margin-right:14px;
	margin-bottom:30px;
	vertical-align:top;
	font-size:12px;
	letter-spacing: normal;
}
#contentsTop .categoryTop .categoryBox .itemList li:nth-child(3n){
	margin-right:0;
}
#contentsTop .categoryTop .categoryBox .itemList li img{
	width:100%;
}
#contentsTop .categoryTop .categoryBox .itemList li p{
	padding:3px;
}
#contentsTop .categoryTop .categoryBox .itemList li .spec{
	background-color:#EEEEEE;
	padding: 7px;
	text-align:center;
	margin-top:7px;
}

/*--- カテゴリー別 ピックアップ ---*/
#contentsTop .categoryTop .pickup h3{
	margin-bottom:0;
}
#contentsTop .categoryTop .pickup .pickupBoxes{
	background-color:#EEEEEE;
	padding:25px;
}
#contentsTop .categoryTop .pickup .pickupBox{
}
#contentsTop .categoryTop .pickup .pickupBox h4{
	background: inherit;
	border-top: none;
	padding: 0;
}
#contentsTop .categoryTop .pickup .pickupBox .series_desc{
	font-size: 12px;
	padding: 5px;
	margin-bottom: 20px;
	margin-top: 5px;
	line-height: 22px;
}
#contentsTop .categoryTop .pickup .pickupBox  ul.itemList{
	letter-spacing: -.4em;
}

#contentsTop .categoryTop .pickup .pickupBox .itemList li{
	display:inline-block;
	width: 198px;
	margin-right: 13px;
	margin-bottom:20px;
	vertical-align:top;
	font-size:12px;
	letter-spacing: normal;
}
#contentsTop .categoryTop .pickup .pickupBox .itemList li:nth-child(4n){
	margin-right:0;
}
#contentsTop .categoryTop .pickup .pickupBox .itemList li img{
	width:100%;
}
#contentsTop .categoryTop .pickup .pickupBox .itemList li p{
	padding:3px;
}
#contentsTop .categoryTop .pickup .pickupBox .itemList li .spec{
	text-align:right;
	color: #999;
}

#contentsTop .categoryTop table.pickup{
	width:750px;
	margin:7px 0;
	font-size:120%;
}

#contentsTop .categoryTop table.pickup a:hover{
	color:#305B8F;
}

#contentsTop .categoryTop table.pickup th{
	padding-left:10px;
}

#contentsTop .categoryTop table.pickup th p{
	padding:7px 0;
}
#contentsTop .categoryTop table.pickup th p.spec{
	background:#666;
	color:#FFF;
	padding:7px;
}

#contentsTop .categoryTop table.pickup th p.spec{

}

#contentsTop .categoryTop table.pickup th span{
	color:#FFAAAC;
}

#contentsTop .categoryTop table.pickup td{
	padding-left:10px;
}

#contentsTop .categoryTop table.pickup td p{
	width:200px;
	padding:3px 0 5px 0;
}

#contentsTop .categoryTop .sizeArea,
#contentsTop .categoryTop .functionArea{
	margin:10px 0 10px 0;
	font-size:120%;
}
#contentsTop .categoryTop .sizeArea ul{
	margin:0;
	padding:0;
}
#contentsTop .categoryTop .sizeArea li{
	float:left;
	padding:0 7px 7px 0;
}
#contentsTop .categoryTop .sizeArea li.last{
	padding-right:0;
}

#contentsTop .categoryTop .functionArea ul{
	margin:20px 0 0 0;
	padding:0;
	height:30px;
}
#contentsTop .categoryTop .functionArea li{
	float:left;
	padding:10px 0;
	margin-right:10px;
	color:#FFF;
	background:#253767;
}
#contentsTop .categoryTop .functionArea li a{
	color:#FFF;
	background:#253767;
	padding:10px;
}
#contentsTop .categoryTop .functionArea li a:hover{
	color:#FFF;
	background:#116BAE;
}

#contentsTop .categoryTop table.designCurtain{
	width:750px;
	margin:15px 0;
}

#contentsTop .categoryTop table.designCurtain td{
	padding-right:7px;
	color:#FFF;
}
#contentsTop .categoryTop table.designCurtain td.last{
	padding-right:0;
}

#contentsTop .categoryTop table.designCurtain td img{
	border:1px solid #eee;
}

#contentsTop .categoryTop table.designCurtain td p{
	background:#666;
	color:#FFF;
	padding:5px 3px;
	text-align:center;
	margin-top:3px;
	width:80px;
}

#contentsTop .categoryTop table.sSize{
	width:465px !important;
}

#contentsTop .categoryTop table.designCurtain td a,
#contentsTop .categoryTop table.designCurtain td a:hover{
	color:#FFF;
}

#contentsTop .recommendTop table.pickup{
	width:750px;
}

#contentsTop .recommendTop table.pickup td{
	width:20%;
	padding-left:10px;
	padding-right:0;
	padding-top:10px;
	vertical-align:top;
}

#contentsTop .recommendTop table.pickup td.last{
	padding-right:0;
}

#contentsTop .recommendTop table.pickup td p{
	width:140px;
	padding-top:3px;
}

#contentsTop .cateLink{
	margin-bottom:30px;
}
#contentsTop .cateLink p{
	background:url(/img/top/linkicon_img01.gif) left 6px no-repeat;
	padding:3px 0 0 15px;
	float:right;
	font-size:14px;
}

/*===============================================
●タブレット  画面の横幅が1024pxまで
===============================================*/
@media screen and (max-width: 1024px){
	#contentsTop{
		width:100%;
	}
	#contentsTop .pickup .pickupBoxes .pickupBox h4 img{
		width:100%;
		height:inherit;
	}
	#contentsTop .categoryTop .pickup .pickupBox .itemList li{
		width: 23%;
		margin-right:2%;
	}
	#contentsTop .categoryTop .categoryBox .itemList li{
		width: 32%;
		margin-right: 2%;
		margin-bottom:30px;
	}
	#contentsTop .categoryTop .categoryBox .itemList li:nth-child(3n){
		margin-right:0;
	}
	#contentsTop .categoryTop .categoryBox .itemList li a img{
		height:100%;
	}

	/*休業のお知らせ*/
	.mosaic-block {
		width: 32%;
		height: 33%;
		margin-right: 2%;
	}
	.fade .mosaic-overlay{
		height: 100%;
	}
	.mosaic-backdrop{
		position:relative;
	}
	.mosaic-backdrop img{
		width: 100%;
	}
}

/*===============================================
●スマホ  画面の横幅が750pxまで
===============================================*/
@media screen and (max-width:750px){
	#contentsTop h2 img, #contentsTop .pickup h3 img{
		width:75%;
		height:auto;
	}
	#contentsTop h2{
		margin-top: 5%;
    margin-bottom: 5%;
	}
	#contentsTop #featureTop{
		margin-top:0;
		padding: 0 5%;
	}
	.mosaic-block{
		width:47%;
		height:47%;
		margin-right:6%;
		margin-bottom:6%;
	}
	.mosaic-block:nth-child(3n){
		margin-right:6%;
	}
	.mosaic-block:nth-child(2n){
		margin-right:0;
	}
	.review_list_contents{
    width: 96%;
    padding: 0 2%;
	}
	#contentsTop .categoryTop .categoryBox .itemList{
		padding:0 5%;
	}
	#contentsTop .categoryTop .categoryBox .itemList li{
    width: 47%;
    margin-right: 6%;
    margin-bottom: 6%;
	}
	#contentsTop .categoryTop .categoryBox .itemList li:nth-child(3n){
		margin-right:6%;
	}
	#contentsTop .categoryTop .categoryBox .itemList li:nth-child(2n){
		margin-right:0;
	}
	#contentsTop .categoryTop .pickup .pickupBoxes{
    padding: 25px 10px;
	}
		
}