source: branches/version-2_11-dev/html/user_data/packages/sphone/css/block.css @ 21052

@charset "utf-8";
/* ===================================================================
CSS information
file name  :block.css
style info :ブロック用
=================================================================== */
/*-----------------------------------------------
ブロック共通
----------------------------------------------- */
.title_block{
color: #FFF;
font-size:16px;
font-weight:bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
line-height:20px;
margin:0;
padding:5px 10px 3px 10px;
background-color:#787E8A;
background: -moz-linear-gradient(center top, #787E8A 0%,#CBCDD0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #787E8A),color-stop(1, #CBCDD0));
border-top:#E1DCDA solid 1px;
border-bottom:#B5B5B5 solid 2px;
-webkit-box-shadow: 0 1px #FFF;
-moz-box-shadow: 0 1px #FFF;
text-align:left;
vertical-align: middle;
text-overflow: ellipsis;
clear:both;
}

/*-----------------------------------------------
オススメ商品
----------------------------------------------- */
#recomend_area{
margin:10px;
padding-top:10px;
border:#CCC solid 1px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
#recomend_area h2{
font-size:16px;
margin-left:10px;
}
.recomendblock{
padding:10px;
clear:both;
}
.recomendblock img{
float:left;
}
.recomendblock .productContents{
width:65%;
float:right;
text-align:left;
}
.recomendblock .productContents p{
clear:both;
}
.recomendblock .productContents p.comment{
width:15em;
height:3.5em;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
clear:both;
}
.recomendblock .sale_price{
clear:both;
float:right;
text-align:right;
}

#recomend_area div.moveWrap {
width:100%;
height:auto;
position:relative;
overflow:hidden;
-webkit-box-sizing:border-box;
}
#recomend_area ul.moveWrapBG {
margin:0;
padding:0;
display:inline-block;
position:relative;
width:100%;
height:auto;
visibility:hidden;
-webkit-box-sizing:border-box;
}
#recomend_area div.slideMask {
margin-right:1px;
position:absolute;
top:0;
left:0;
border:4px #FFF solid;
-webkit-box-sizing:border-box;
}
#recomend_area div.moveWrap>ul.move {
width:10000px;
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);
margin:0;
padding:0;
display:none;
}
#recomend_area div.moveWrap>ul.move li.slideUnit {
margin:0;
padding:0;
float:left;
list-style:none;
text-align:center;
-webkit-box-sizing:border-box;
}
#recomend_area li.slideUnit>div {
padding:4px 4px 4px 4px;
display:inline-block;
vertical-align:middle;
text-align:center;
-webkit-box-sizing:border-box;
}
#recomend_area div.flickSlideBottom {
width:100%;
margin-top:5px;
border-top:#DBDBDB solid 1px;   
background: -moz-linear-gradient(center top, #FFFFFF 0%,#DEE4EA 95%,#FFFFFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF),color-stop(0.95, #DEE4EA),color-stop(0, #FFFFFF));
border-bottom-right-radius:8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-bottom-right-radius: 8px;
border-bottom-left-radius:8px;
-webkit-border-bottom-left-radius:8px;
moz-border-bottom-left-radius:8px;
}
#recomend_area div.flickSlideBottom div.bottomLeft,#recomend_area div.flickSlideBottom div.bottomRight {
display:table-cell;
-webkit-box-sizing:border-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.0976562) 0px 1px 3px, rgba(255, 255, 255, 1) 0px 0px 0px inset;
vertical-align:middle;
padding:0 10px;
}
#recomend_area div.flickSlideBottom div.bottomRight {
font-size:16px;
font-weight: bold;
color:#7F7F7F;background-color:transparent;
border-bottom-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-bottom-right-radius: 8px;
border-left:#DBDBDB solid 1px;
}
#recomend_area div.flickSlideBottom div.bottomLeft {
font-size:16px;
font-weight: bold;
color:#7F7F7F;
background-color:transparent;
border-bottom-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-bottom-left-radius:8px;
border-right:#DBDBDB solid 1px;
}
#recomend_area div.flickSlideBottom div.bottomLeft:after {
font-size:10px;
padding:5px;
text-align:left;
display:table-cell;
}
#recomend_area div.flickSlideBottom div.bottomLeft:before {
margin-top:2px;
padding:5px;
text-align:left;
display:table-cell;
}
#recomend_area div.flickSlideBottom div.bottomRight:before {
font-size:10px;
padding:5px;
text-align:right;
display:table-cell;
}
#recomend_area div.flickSlideBottom div.bottomRight:after {
margin-top:2px;
padding:5px;
text-align:right;
display:table-cell;
}
#recomend_area div.flickSlideBottom ul.slidePager {
width:100%;
margin:0;
padding:0;
display:table-cell;
text-align:center;
}
#recomend_area div.flickSlideBottom ul.slidePager li.slidePagerPointer {
font-size:10px;
width:6px;
height:6px;
margin:12px 6px 6px 6px;
display:inline-block;
background-color:#CCC;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
#recomend_area div.flickSlideBottom ul.slidePager li.slidePagerPointer.active {
background-color:#333;
}

/*-----------------------------------------------
カテゴリリスト（アコーディオン）
----------------------------------------------- */
#category_area{
}
#categorytree ul{
margin:10px;
border:#A9ACAB solid 1px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
background:#f4F6F8;
}
#categorytree li{
font-size:16px;
font-weight:bold;
-webkit-transition: opacity 0.3s ease-in;
-webkit-transition-delay: 0.2s;
clear: both;
border-bottom:#CCC solid 1px;
border-top:#FFF solid 1px;
}
#categorytree li:first-child{
border-top:none;
}
#categorytree li li:first-child{
border-top:#CCC solid 1px;
} 
#categorytree li:last-child,#categorytree li li:last-child{
border-bottom:none;
} 
#categorytree ul li a , .categorytree > ul > li > ul > li a{
margin: 0;
padding: 0.5em 0 0.5em 0;
}
#categorytree ul li li{
padding-bottom:0.5em;
}
.category_number_tag {
color: #FFF;
width: 2em;
float: right;
text-align: center;
background-color: rgba(0,0,0,0.5);
-webkit-border-radius: 8px;
}
.category_body {
width: 83%;
padding-left:6px;
display:inline-block;
cursor:pointer;
}
.category_body > a {
width: 100%;
display: inline-block;
}
.category_header {
width: 15%;
display: inline-block;
background: transparent;
-webkit-border-radius: 8px;
text-align:center;
}
.category_header.plus, .category_header.minus{
color:#FFF;
margin:0 0 0 10px;
display: inline-block;
text-align: center;
line-height:0.3;
width: 1.4em;
height:1.3em;
background:#515866;
background: -moz-linear-gradient(center top, #6D7481 0%,#515866 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6D7481),color-stop(1, #515866));
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.7);
-webkit-border-radius: 3px;
}
.category_header + a{
margin-left: 0;
margin-right: 0;
width: auto;
font-weight: bold;
font-family: verdana;
}
.category_header.plus > a, .category_header.minus > a{
color:#FFF;
display: inline-block;
margin: 0;
padding: 0;
text-decoration: none;
}
/*リンクカラー*/
.category_body a:link,.category_body a:visited{
color:#000;
text-decoration:none;
cursor:pointer;
}
.category_header.plus a, .category_header.minus a{
color:#FFF;
}

/*-----------------------------------------------
news
----------------------------------------------- */
#news_area{
}
#news_area ul{
margin-bottom:10px;
}
#news_area li{
display:block;
clear:both;
padding:10px;
line-height:1.3;
background-color:#FEFEFE;
background: -moz-linear-gradient(center top, #FEFEFE 0%,#EEEEEE 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #EEEEEE));
border-top:#FFF solid 1px;
border-bottom:#CCC solid 1px;
}
#news_area .news_date{
clear:both;
font-size:12px;
letter-spacing:0.1em;
}