@charset "utf-8";

/*
============================================================
top.css
------------------------------------------------------------

■メインスライド
■NEW ITEM
■人気ランキング
■今週のおすすめ商品
■バナー
■おすすめ特集
■おすすめブランド
■ZUTTO スタッフ
■ZUTTO お知らせ
■ZUTTO instagram
■商品履歴

作成日：2014.07.25
作成者：kikuchi
更新日：
更新者：
バージョン： 1.0
会社名：Dynamite Brothers Syndicate

============================================================
*/

/* ---------------------------------------------------------
■メインスライド
--------------------------------------------------------- */
#topSlide {
    position: relative;
    margin: 0 0 35px;
    zoom: 1; }

#carouWrapper {
    overflow: hidden; }

#carouWrapper li {
    float: left;
    width: 920px;
    _width: 920px!important;
    _height: 460px;
    margin: 0 20px;
    line-height: 0; }

.prev,
.next {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    text-indent: -99999px; }

.prev { background: url(/images/common/btn_slide_prev.jpg) no-repeat; }
.next { background: url(/images/common/btn_slide_next.jpg) no-repeat; }

#mainPrev {
    top: 50%;
    left: 8.3%;
    margin-top: -20px;
    background: url(/images/top/btn_mainslide_prev.png) no-repeat; }

#mainNext {
    top: 50%;
    right: 8.3%;
    margin-top: -20px;
    background: url(/images/top/btn_mainslide_next.png) no-repeat; }




/* ---------------------------------------------------------
■NEW ITEM
--------------------------------------------------------- */
#newitem {
    margin-right: -10px;
    zoom: 1; }

#newitem ul {
    margin-right: -10px; }

#newitem li {
    padding: 0;
    margin-right: 10px; }




/* ---------------------------------------------------------
■人気ランキング
--------------------------------------------------------- */
.grid {
    margin-bottom: 65px; }

.rankingWrapper {
    overflow: hidden;
    margin-bottom: 65px; }


/*
 *ナビ
 */
.rankingNav {
    position: relative;
    float: left;
    width: 220px;
    margin-right: -220px;
    z-index: 1; }

.rankingNav li {
    color: #555;
    font-size: 75%;
    line-height: 32px;
    cursor: pointer; }

.rankingNav li.on {
    font-weight: bold;
    background: url(/images/top/bg_ranking_nav.jpg) repeat; }

.rankingNav li:hover {
    font-weight: bold;
    background: url(/images/top/bg_ranking_nav.jpg) repeat; }


/*
 *商品
 */
.rankingitem {
    float: right;
    width: 100%;
    margin: 0; }

.rankingitemInner {
    height: 359px;
    margin-left: 220px;
    padding: 12px 0 10px 10px;
    border: 1px dotted #dcdcdc; }

.rgridWrapper {
    position: relative; }

.rgridWrapper .gridInner li {
    width: 31.8%;
    height: 359px; }


.rgridWrapper .gridInner h3 {
    overflow: hidden;
    max-height: 60px;
    margin-bottom: 8px;
    padding: 0;
    background: none; }

.rgridWrapper .gridInner .fee {
	padding-top: 10px;
	background: url(/images/common/bg_grid_line.jpg) no-repeat 0 0; }


.rgridWrapper .prev,
.rgridWrapper .next {
    margin-top: 20px; }


.rankingitem .img {
    padding-top: 20px; }

.rankingitem .img img {
/width: 235px;
/height: 235px; }

.rankingitemInner .rgridWrapper {
    display: none; }

.rankingitemInner .on {
    display: block; }

/* ---------------------------------------------------------
■STYLE SAMPLE
--------------------------------------------------------- */
#styleSample {
	padding: 30px 9px 40px;
	margin-bottom: 60px;
	background: url(/images/top/styleSample_bg.png) 0 0 repeat; }
	
#styleSample .grid {
	margin-bottom: 0;
}

#styleSample ul {
	overflow: hidden;
}

#styleSample li {
    width: 26.6%; }

#styleSample .gridInner li {
    padding-right: 5px; }

#styleSample .gridInner li img {
	max-width: 100%;  }
	
#styleSample .grid .next {
	right: 5px;
}


/* ---------------------------------------------------------
■今週のおすすめ商品
--------------------------------------------------------- */
#recommenditem {
    overflow: hidden;
    height: 664px; }


#recommenditem .gridInner {
    overflow: hidden;
    margin-right: -10px;
    zoom: 1; }

#recommenditem .gridInner h3 {
    overflow: hidden;
    max-height: 60px;
	margin-bottom: 8px;
	padding: 0;
	background: none; }

#recommenditem .gridInner .text {
    overflow: hidden;
    height: 30px;
	margin-bottom: 5px;
	padding-top: 10px;
	background: url(/images/common/bg_grid_line.jpg) no-repeat 0 0; }

#recommenditem li {
    overflow: hidden;
    width: 154px;
    height: 292px;
    margin-bottom: 40px;
    padding-right: 9px; }




/* ---------------------------------------------------------
■バナー
--------------------------------------------------------- */
#contentsMiddleWrapper {
    overflow: hidden;
    margin-bottom: 40px; }

#contentsMiddleWrapper .left {
    overflow: hidden;
    float: left;
    width: 82.5%; }

#contentsMiddleWrapper .right {
    float: right;
    width: 16.6%; }

#contentsMiddleWrapper .right .top {
    margin-bottom: 10px; }




/* ---------------------------------------------------------
■おすすめ特集
--------------------------------------------------------- */
#specialitem {
    overflow: hidden;
    margin-right: -10px;
    margin-bottom: 20px;
    zoom: 1; }

#specialitem li {
    width: 15.9%; }

#specialitem .gridInner li {
    padding-right: 9px; }

#specialitem .gridInner li img {
    _width: 192px;
    _width: 192px; }

#specialitem .gridInner h3 {
    background: none; }




/* ---------------------------------------------------------
■おすすめブランド
--------------------------------------------------------- */
#brandWrapper {
    padding: 20px 0 0;
    border-top: 1px dotted #dcdcdc; }

#brand {
    overflow: hidden;
    zoom: 1; }

#brand .gridInner{
    overflow: hidden;
    height: 466px;
    margin-right: -12px;
    zoom: 1; }

#brand li {
    overflow: hidden;
    width: 182px;
    height: 223px;
    margin-right: 10px;
    padding-right: 10px;
    text-align: center;
    background: url(/images/brand/bg_glidline.jpg) no-repeat right -10px; }

#brand li .img {
    position: relative; }

#brand .gridInner h3 {
    background: none; }

#brandWrapper .reverse:hover {
    opacity: 1!important;
    filter: alpha(opacity=100)!important;
    -ms-filter: "alpha(opacity=100)"!important; }


/* ---------------------------------------------------------
■ZUTTO スタッフ
--------------------------------------------------------- */
#staffWrapper {
    overflow: hidden;
    padding: 20px 0 0;
    border-top: 1px dotted #dcdcdc;
    zoom: 1; }

#staffWrapper .left {
    float: left;
    width: 49%; }

#staffWrapper .right {
    float: right;
    width: 49%; }

#staffWrapper .gridInner {
    overflow: hidden;
    margin-right: -10px;
    zoom: 1; }

#staffWrapper .gridInner li {
    width: 48%; }

#staffWrapper .gridInner li:nth-child(2) {
    float: right; }

#staffWrapper .gridInner h3 {
    font-size: 63%;
    background: none; }

#staffWrapper .gridInner h3 span {
    font-weight: bold;
    font-size: 120%; }




/* ---------------------------------------------------------
■ZUTTO お知らせ
--------------------------------------------------------- */
#noticeWrapper {
    padding: 20px 0 35px;
    border-top: 1px dotted #dcdcdc; }

#noticeWrapper .contentsHead {
    margin: 0; }

#noticeWrapper .notice {
    overflow-y: scroll;
    height: 200px;
    padding: 0 0 0 25%; }

#noticeWrapper .notice li {
    overflow: hidden;
    margin: 0 0 10px;
    zoom: 1; }

#noticeWrapper .date {
    float: left;
    width: 11%; }

#noticeWrapper .text {
    float: right;
    width: 88%;
    padding: 0 0 10px;
    border-bottom: 1px dotted #dcdcdc; }

#noticeWrapper .text h3 {
    font-weight: bold; }


/* ---------------------------------------------------------
■ZUTTO instagram
--------------------------------------------------------- */
#top-instagram {
	margin-right: -10px;
	position: relative;
}
#top-instagram .instagram-bg {
	background-color: #f6f7f8;
	position: absolute;
	top: 0;
	left: -500px;
	height: 400px;
	width: 3000%;
	z-index: 0;
}
#top-instagram .instagram-wrap {
	padding: 50px 0;
	position: relative;
	z-index: 1;
}
#top-instagram h2 {
	padding-left: 30px;
	background: url(/images/top/icon_instagram.png) 0 4px no-repeat;
}
#top-instagram h2 span {
	font-size: inherit;
	line-height: inherit;
}
#top-instagram .more-btn {
	margin-right: 10px;
	padding: 8px 15px;
	border: 1px solid #004879;
	float: right;
	font-size: 78%;
	color: #004879;
}
#top-instagram .more-btn:hover {
	background-color: #004879;
	color: #fff;
	text-decoration: none;
}
#top-instagram ul {
	height: 208px;
}
#top-instagram li {
	width: 15.9%;
}
#top-instagram li img {
	width: 100%;
	height: auto;
}
#top-instagram .gridInner li {
	padding-right: 9px;
}
#top-instagram .gridInner li h3 {
	background: none;
	height: 2.6em;
	overflow: hidden;
	padding-bottom: 0;
	margin-bottom: 10px;
}
#top-instagram .instagram-item {
	position: relative;
}



/* ---------------------------------------------------------
■買い忘れ
--------------------------------------------------------- */
#forgetBuying {
	padding: 25px 10px 0 30px;
	width: 450px;
	box-sizing: border-box;
	background-color: #fff;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.3), -1px -1px 5px rgba(0,0,0,0.3);
	color: #333;
}
#forgetBuying .title {
	margin-bottom: 20px;
	font-size: 18px;
}
#forgetBuying .goodsList {
	padding-right: 20px;
	max-height: 310px;
	overflow-x: hidden;
	overflow-y: scroll;
}
#forgetBuying li {
	margin-bottom: 20px;
}
#forgetBuying li img {
	width: 100px;
	float: left;
}
#forgetBuying li p {
	margin-left: 115px;
	font-size: 12px;
	line-height: 1.5;
}
#forgetBuying li .fee {
	margin-top: 4px;
	padding-top: 8px;
	font-size: 14px;
	font-weight: bold;
	background: url(/images/common/bg_grid_line.jpg) 0 0 no-repeat;
}
#forgetBuying li .fee span {
	font-size: 12px;
	font-weight: normal;
}
#forgetBuying li a {
	overflow: hidden;
	display: block;
}
#forgetBuying li a:hover {
	text-decoration: none;
}
#forgetBuying li a img:hover {
	opacity: 1;
}
#forgetBuying li a:hover img {
	opacity: 0.8;
}
#forgetBuying li a:hover .name {
	text-decoration: underline;
}
#forgetBuying .cartBtn {
	margin: 0 -10px 0 -30px;
}
#forgetBuying .cartBtn a {
	padding: 0 20px;
	display: block;
	border: 1px solid #222;
	background-color: #222;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}
#forgetBuying .cartBtn span {
	display: inline-block;
	padding: 20px 36px;
	background: url(/images/top/icon_cart_w.png) 0 15px no-repeat;
}
#forgetBuying .cartBtn a:hover {
	background-color: #fff;
	color: #222;
}
#forgetBuying .cartBtn a:hover span {
	background-image: url(/images/top/icon_cart_b.png);
}
#forgetBuying .closeBtn {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
}
#forgetBuying .closeBtn:before,
#forgetBuying .closeBtn:after {
	content: " ";
	width: 100%;
	height: 2px;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -1px;
	background: #939292;
}
#forgetBuying .closeBtn:before {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
}
#forgetBuying .closeBtn:after {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}
#forgetBuying .closeBtn:hover:before,
#forgetBuying .closeBtn:hover:after {
	background: #222;
}





/* ---------------------------------------------------------
■商品履歴
--------------------------------------------------------- */
#historyWrapper {
    padding: 20px 0 55px; }

#historyWrapper .grid {
    margin-bottom: 0; }

#history .gridInner {
    overflow: hidden;
    height: 111px;
    margin-right: -10px;
    zoom: 1; }
#historyfellowPrev,
#historyfellowNext {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    text-indent: -99999px; }

#historyfellowPrev {
    background: url(/images/common/btn_slide_prev.jpg) no-repeat; }

#historyfellowNext {
    background: url(/images/common/btn_slide_next.jpg) no-repeat; }

#historyfellowPrev:hover,
#historyfellowNext:hover {
    background-position: 0-60px; }