@charset "utf-8"; /* =================================================================== CSS information file name :contents.css style info :コンテンツ用(商品一覧/検索結果/商品詳細) =================================================================== */ /* ----------------------------------------------- 商品一覧・商品詳細・商品検索結果共通 ----------------------------------------------- */ .pagenumberarea { margin-top: 10px; display: block; float: right; width: 70%; margin-bottom: 10px; } .pagenumberarea ul { width: 95%; margin: 0 auto; border: #ddd solid 1px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; display: block; padding: 1px; } .pagenumberarea li { color: #000; font-weight: bold; margin: 0; padding: 0; display: inline; float: left; width: 50%; text-align: center; color: #FFF; background: #5393c5; background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2)); text-shadow: 0px 1px 1px rgba(0,0,0,0.5); } .pagenumberarea li a:link, .pagenumberarea li a:visited { color: #000; } .pagenumberarea li a { color: #FFF; display: block; padding: 11px 0; text-decoration: none; text-shadow: 1px 1px 1px rgba(255,255,255,1); } .pagenumberarea li.on_number { color: #FFF; display: block; padding: 11px 0; text-shadow: 0px 1px 1px rgba(0,0,0,0.5); } .pagenumberarea li:first-child { border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; } .pagenumberarea li:last-child { border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; } .pagenumberarea li:first-child a { border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-right: #A9ABAD solid 1px; text-shadow: 1px 1px 1px rgba(255,255,255,1); background: #FDFDfD; background: -moz-linear-gradient(center top, #FDFDFD 0%,#99917F 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #99917F)); } .pagenumberarea li:last-child a { border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-left: #FFF solid 1px; text-shadow: 1px 1px 1px rgba(255,255,255,1); background: #FDFDfD; background: -moz-linear-gradient(center top, #FDFDFD 0%,#99917F 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #99917F)); box-shadow: 1px 0px 1px 1px rgba(255,255,255,1) inset; -webkit-box-shadow: 1px 0px 1px 0px rgba(255,255,255,1) inset; -moz-box-shadow: 1px 1px 1px 0px rgba(255,255,255,1) inset; } .pagenumberarea li.on_number { color: #333; text-shadow: 1px 1px 1px rgba(255,255,255,1); background: #99917F; background: -moz-linear-gradient(center top, #99917F 10%,#FDFDFD 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #99917F),color-stop(1, #FDFDFD)); } ul.status_icon { clear: both; } ul.status_icon li { color: #FFF; background: #9AAABD; display: inline; float: left; margin-right :5px; margin-bottom: 2px; padding: 2px 5px; font-size: 11px; text-shadow: none; } /* ----------------------------------------------- 商品一覧 ----------------------------------------------- */ #product_list { padding-bottom: 35px; } .prdcBrandBg { padding-bottom: 11px; background-image: url(../img/products/brand_bg.jpg); background-repeat: repeat-x; background-size: 11px; background-position: left bottom; } .prdcBrand { background: rgb(161,136,96); background: -moz-linear-gradient(top, rgba(161,136,96,1) 0%, rgba(253,239,217,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(161,136,96,1)), color-stop(100%,rgba(253,239,217,1))); background: -webkit-linear-gradient(top, rgba(161,136,96,1) 0%,rgba(253,239,217,1) 100%); background: -o-linear-gradient(top, rgba(161,136,96,1) 0%,rgba(253,239,217,1) 100%); background: -ms-linear-gradient(top, rgba(161,136,96,1) 0%,rgba(253,239,217,1) 100%); background: linear-gradient(to bottom, rgba(161,136,96,1) 0%,rgba(253,239,217,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a18860', endColorstr='#fdefd9',GradientType=0 ); text-align: center; font-weight: bold; color: #fff; } .prdcSubCate { width: 293px; margin-right: auto; margin-left: auto; } .prdcSubCate li { margin-bottom: 7px; } .prdcResult { float: left; padding-top: 22px; } .prdcListBg { background-image:-webkit-gradient(linear, left top, left bottom, from(#ffe995), color-stop(0.05, #fdd32f)); border:1px solid #fcf6e1; -webkit-border-radius:7px; margin:0 10px 21px; padding:5px; } /* アイテムリスト(div)の処理 ----------------------------------------------- */ .list_area { margin: 0; padding: 12px; background-color: #FEFEFE; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f3f3)); border-bottom: #CCC dotted 1px; display: block; clear: both; position: relative; cursor: pointer; } .list_area h3 { margin-bottom: 10px; } .list_area h3 a:link { color: #e1001f; } .list_area ul.status_icon { margin-bottom: 5px; display: none; } .listphoto { float: left; clear: left; width: 30%; } .listrightblock { width: 70%; float: right; position: relative; font-size: 85%; } .listrightblock .listArrow { position: absolute; top: 20%; right: 0; } .listrightblock .price01 span.price { font-weight: normal; color: #333; } .listrightblock .price02 span.sale_price { color: #d90313; } .listrightblock .price02 span.price { color: #333; font-weight: normal; } .listrightblock p span.price span.number { font-size: 136.4%; } .listrightblock .price03 span.sale_price { background-color: #d90313; color: #fff; } .listrightblock .price03 span.price { font-weight: normal; } .listrightblock .listcomment { line-height: 1.4; } /* 5. catScroll */ /* ------------------------------------------------------------------------------------ */ #catScrollWrap { padding: 0 10px; text-align: left; margin-top: 25px; } div#tlCateWrap { background-image:-webkit-gradient(linear, left top, left bottom, from(#fef8df), color-stop(0.5, #fbfbfb)); } h3#tlCate { background-image:-webkit-gradient(linear, left top, left bottom, from(#ffe995), color-stop(0.05, #fdd32f)); border:1px solid #fcf6e1; -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; padding: 13px; } #catScroll { position: relative; margin-top: 18px; min-height:0; } #catScroll .catBoxWrap{ width:250px; margin:0 auto; } #catScroll .catBox{ width:80px; float:left; } #catScroll .catBox.mr{ margin-right:5px; } #catScroll ul#catScrollItem li { float: left; width: 80px; /*margin-right: 25px;*/ text-align: center; font-size: 12px; color: #e3112e; font-weight: bold; min-height:0; } #catScrollItem{ min-height:0; } #catScroll ul#catScrollItem li.last { margin-right: 0; } #catScroll ul#catScrollItem li a { display: block; } /* 6. cat-prevNext */ /* ------------------------------------------------------------------------------------ */ #cat-prevNext ul li { } #cat-prevNext ul li a { } #cat-prevNext ul li.prevBtn a { position: absolute; top: 20px; left: 0; } #cat-prevNext ul li.nextBtn a { position: absolute; top: 20px; right: 0; } /* 7. registLink */ /* ------------------------------------------------------------------------------------ */ ul#registLink { margin: 25px 0; background: #fff; } ul#registLink li { border-bottom: 1px solid #a18860; text-align: left; font-size: 15px; } ul#registLink li a { display: block; text-decoration: none; color: #271c18; background: url(../img/common/ico_arrow05_r.png) no-repeat 98% 20px; padding: 18px 20px; font-weight: bold; background-size: 10px 14px; text-align: left; } /* ----------------------------------------------- 商品詳細 ----------------------------------------------- */ #product_detail { padding-bottom: 35px; } #product_detail h2.title { font-size: 123.1%; } #cartbtn_default { padding-left: 10px; padding-right: 10px; } /*サブナビ*/ .navSub { padding-top: 5px; padding-bottom: 5px; } .navSub li { width: 50%; float: left; text-align: center; } .navSub li a { padding-top: 12px; padding-bottom: 12px; display: block; background: url(../img/common/btn_CatBuy_down.png) no-repeat 90% 50%; border-left: 1px solid #EEE; } .pdMenu li { border-bottom: 1px dotted #BBB; } .pdMenu li a { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; display: block; background: url(../img/common/ico_arrow05_r.png) no-repeat 98% 50%; background-size: 10px 14px; } .close { text-align: center; padding-top: 5px; padding-bottom: 5px; } .arrHistory { padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; } .mod-menuList { margin: 10px 0 21px; } .mod-menuList li { border-bottom: 1px dotted #BBB; color: #000; text-align: left; padding: 12px; } .menuListWrap { background: url(../img/common/ico_arrow05_r.png) no-repeat 98% 50%; background-size: 10px 14px; } .mod-menuList li p.imgBox { float: left; text-align: center; width: 30%; } .mod-menuList li div.rightBox { float: right; font-size: 11px; font-weight: normal; width: 70%; position: relative; } .mod-menuList li div.rightBox h3 { font-size: 13px; color: #e1001f; margin-bottom: 7px; } .mod-menuList li div.rightBox dl dt { float: left; width: 50px; font-weight: bold; font-size: 12px; } /*商品情報*/ #detailarea { padding: 20px 10px 35px 10px; } #detail_area p { text-align: center; } #detail_area p img { max-width: 300px; height: auto; } #detailrightblock { margin-top: 25px; padding: 0; background: #FFF; border: #CCC solid 1px; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; margin-bottom: 25px; } #detailrightblock div:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } #detailrightblock div { border-bottom: #CCC solid 1px; } #detailrightblock div#cartbtn_default { border-bottom: none; } #detailrightblock>div:last-child { border-radius: 0 0 7px 7px; -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px; } #detailrightblock div:not(.ui-body-f):last-child { border-bottom: none; } /* 商品ステータスアイコン */ #detailrightblock .status_icon { padding: 10px 12px; border-bottom: #CCC solid 1px; } /* 商品詳細 */ .detailCommentTit { color: #372925; font-size: 15px; line-height: 1.2em; margin-bottom: 15px; padding-bottom: 9px; border-bottom: 1px dotted #ccc; padding-top: 21px; } .prdcDtlTable { border-top: none; border-left: none; } .prdcDtlTable th { background-color: #e7e7e7; border-bottom-color: #fff; border-right: none; } .prdcDtlTable td { border-bottom: none; border-right: none; } .prdcDtlTeiki a { text-align: center; display: block; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; text-decoration: none; color: #fff; font-size: 13px; background: #42B8B8 url(../img/common/ico_arrow05_r.png) no-repeat 95% 50%; background-size: 10px 14px; padding: 12px 0; vertical-align: middle; font-weight: bold; } .prdcDtlTeiki a:link, .prdcDtlTeiki a:visited { color: #fff; } /*商品情報(テキストなど)*/ #detailrightblock .product_detail { padding: 12px; border-bottom: #CCC solid 1px; } #detailrightblock h3 { font-size: 14px; clear: both; } #detailrightblock .price { font-size: 14px; } #detailrightblock .normal_price { } .relative_cat { font-size: 12px; margin-bottom: 10px; } /*商品情報(規格部分)*/ .classlist { padding: 12px; } .classlist dl { margin: 0; padding: 0; } .classlist dt { margin: 0; font-weight: bold; line-height: 1.3; } .classlist dd { padding: 0; clear: both; padding-bottom: 5px; } .classlist dd:last-child { padding-bottom: 0; } /*商品情報(数量)*/ .cartin_btn { padding: 15px 15px 15px 8px; background: #F1F0E7; border-top: #FFF solid 1px; } .cartin_btn dl { width: 40%; float: left; clear: left; } .cartin_btn dt { width: 2em; float: left; padding: 15px 5px 0 5px; line-height: 1.1; font-weight: bold; } .cartin_btn dd { width: 3.2em; display: inline; float: left; padding-top: 5px; } .detail_quantity dd .quantitybox { width: 3em; } .cartbtn_default { border-radius: 5px; } /*お気に入り*/ .btn_favorite { padding: 10px 15px; background: #F1F0E7; } /*サブエリア*/ .subarea { padding: 0 10px 20px 10px; margin-bottom: 15px; border-bottom: #CCC solid 1px; clear: both; } .subarea h3 { margin-bottom: 10px; padding: 5px 0; border-bottom: #CCC solid 1px; clear: both; } .subphotoimg { margin-left: 10px; float: right; clear: right; } #sub_area div:last-child { border-bottom: none; } /*商品詳細メイン画像スライド*/ #detailphotoblock { width: 100%; background-color: #ffffff; text-align: center; position: relative; padding-bottom: 11px; background-image: url(../img/products/brand_bg.jpg); background-size: 11px; background-repeat: repeat-x; background-position: left bottom; margin-bottom: 11px; } #detailphotoblock div.moveWrap { width: 200px; height: 200px; margin: 0 auto; position: relative; overflow: hidden; -webkit-box-sizing: border-box; } #detailphotoblock ul.moveWrapBG { width: 200px; height: auto; visibility: hidden; display: inline-block; position: relative; -webkit-box-sizing: border-box; margin: 0 auto; padding: 0; } #detailphotoblock li { width: 200px; } #detailphotoblock div.slideMask { position: absolute; top: 0; left: 0; /*border:4px #FFF solid;*/ -webkit-box-sizing: border-box; margin-right: 0!important; } #detailphotoblock div.moveWrap>ul.move { margin: 0; padding: 0; position: relative; left: 0; top: 0; list-style: none; width: 2000px; -webkit-transition: all 0.6s ease-in-out; -webkit-transform: translate3d(0,0,0); -webkit-transition-duration: 400ms; -webkit-transition-property: -webkit-transform; margin: 0; padding: 0; display: none; } #detailphotoblock div.moveWrap>ul.move li.slideUnit { margin: 0px; padding: 0; float: left; list-style: none; text-align: center; -webkit-box-sizing: border-box; } #detailphotoblock li.slideUnit>div { padding: 0px; display: inline-block; vertical-align: middle; text-align: center; -webkit-box-sizing: border-box; } .flickSlideContainer { background: rgb(161,136,96); /* Old browsers */ background: -moz-linear-gradient(top, rgba(161,136,96,1) 0%, rgba(253,239,217,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(161,136,96,1)), color-stop(100%,rgba(253,239,217,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(161,136,96,1) 0%,rgba(253,239,217,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(161,136,96,1) 0%,rgba(253,239,217,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(161,136,96,1) 0%,rgba(253,239,217,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(161,136,96,1) 0%,rgba(253,239,217,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a18860', endColorstr='#fdefd9',GradientType=0 ); /* IE6-9 */ } #detailphotoblock div.flickSlideBottom { width: 100%; } #detailphotoblock div.flickSlideBottom div.bottomLeft, #detailphotoblock div.flickSlideBottom div.bottomRight { padding: 0 10px; display: table-cell; vertical-align: middle; } #detailphotoblock div.flickSlideBottom div.bottomRight { font-size: 24px; font-weight: bold; color: #7F7F7F; background-color: transparent; right: 5px; top: 100px; position: absolute; } #detailphotoblock div.flickSlideBottom div.bottomLeft { font-size: 24px; font-weight: bold; color: #7F7F7F; background-color: transparent; left: 5px; top: 100px; position: absolute; } #detailphotoblock div.flickSlideBottom div.bottomLeft:after { font-size: 12px; padding: 5px; text-align: left; display: table-cell; } #detailphotoblock div.flickSlideBottom div.bottomLeft:before { padding: 5px; text-align: left; display: table-cell; } #detailphotoblock div.flickSlideBottom div.bottomRight:before { font-size: 12px; padding: 5px; text-align: right; display: table-cell; } #detailphotoblock div.flickSlideBottom div.bottomRight:after { padding: 5px; text-align: right; display: table-cell; } #detailphotoblock div.flickSlideBottom ul.slidePager { display: block; width: auto; text-align: center; margin: 0 auto;; padding: 0; } #detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer { font-size: 11px; width: 6px; height: 6px; margin: 0 6px 10px 6px; display: inline-block; background-color: #CCC; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; } #detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer.active { background-color: #333; } /*その他オススメ商品スライド*/ #product_detail .title_box_sub:last-child { margin-top: 20px; } #whobought_area { width: 100%; clear: both; position: relative; } #whobought_area .flickSlideContainer { width: 100%; clear: both; position: relative; background-image:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fdefd9)); } #whobought_area h3 { clear: both; line-height: 1.2; } /*liの長さ追加*/ #whobought_area li { width: 80px; } #whobought_area li img { margin-bottom: 5px; clear: both; } #whobought_area li a { color: #e1001f; font-size: 85%; } #whobought_area .sale_price { clear: both; float: right; text-align: right; } #whobought_area div.moveWrap { width: 80%; height: auto; position: relative; margin: 0 auto; overflow: hidden; -webkit-box-sizing: border-box; } #whobought_area ul.moveWrapBG { width: auto; height: auto; display: inline-block; position: relative; visibility: hidden; -webkit-box-sizing: border-box; margin: 0; padding: 0; } #whobought_area div.slideMask { position: absolute; top: 0; left: 0; border: 4px #FFF solid; -webkit-box-sizing: border-box; margin-right: 1px; } #whobought_area div.moveWrap>ul.move { width: 600px; margin: 0; padding: 0; position: relative; left: 0; top: 0; list-style: none; -webkit-transition: all 0.6s ease-in-out; -webkit-transform: translate3d(0,0,0); /*-webkit-transition-duration: 400ms; -webkit-transition-property: -webkit-transform; */ margin: 0; padding: 0; display: none; } #whobought_area div.moveWrap>ul.move li.slideUnit { width: 130px!important; float: left; display: inline; list-style: none; padding: 4px 8px 4px 0; margin-right: 0px; -webkit-box-sizing: border-box; text-align: center; border-right: 1px dotted #ccc; } #whobought_area li.slideUnit>div { padding: 4px; display: inline; vertical-align: middle; -webkit-box-sizing: border-box; } #whobought_area div.flickSlideBottom { width: 100%; margin-top: 5px; } #whobought_area div.flickSlideBottom div.bottomLeft, #whobought_area div.flickSlideBottom div.bottomRight { padding: 0 10px; display: table-cell; vertical-align: middle; } #whobought_area div.flickSlideBottom div.bottomRight { font-size: 16px; font-weight: bold; color: #7F7F7F; background-color: transparent; right: 0; top: 80px; position: absolute; } #whobought_area div.flickSlideBottom div.bottomLeft { font-size: 16px; font-weight: bold; color: #7F7F7F; background-color: transparent; left: 0; top: 80px; position: absolute; } #whobought_area div.flickSlideBottom div.bottomLeft:after { font-size: 10px; padding: 0; text-align: left; display: table-cell; } #whobought_area div.flickSlideBottom div.bottomLeft:before { padding: 0; text-align: left; display: table-cell; } #whobought_area div.flickSlideBottom div.bottomRight:before { font-size: 10px; padding: 0; text-align: right; display: table-cell; } #whobought_area div.flickSlideBottom div.bottomRight:after { padding: 0; text-align: right; display: table-cell; } #whobought_area div.flickSlideBottom ul.slidePager { display: block; width: auto; text-align: center; margin: 0 auto; padding: 0; } #whobought_area div.flickSlideBottom ul.slidePager li.slidePagerPointer { display: none; } /* ----------------------------------------------- 定期お届け制度 ----------------------------------------------- */ #main-content .teikiCat { margin: 14px 0; text-align: center; } #main-content .teikiCat li { display: inline-block; line-height: 200%; margin-right: 14px; } #main-content .teikiCat li a { color: #666; padding-left: 10px; text-decoration: underline; background-attachment: scroll; background-color: rgba(0, 0, 0, 0); background-image: url(../img/common/ico_arrow02.gif); background-repeat: no-repeat; background-position: left center; background-size: 6px 5px; }