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

@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:15px 10px;
padding-top:10px;
border:#CCC solid 1px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
#recomend_area h2{
font-size:12px;
margin-left:10px;
}
#recomend_area li{
width:290px;
}
.recomendblock{
width:270px;
padding:5px 10px 5px 8px;
margin:0;
clear:both;
}
.recomendblock img{
width:80px;
float:left;
}
.recomendblock .productContents{
width:68%;
float:right;
text-align:left;
}
.recomendblock .productContents p{
clear:both;
}
.recomendblock .productContents p.comment{
width:17em;
height:3.7em;
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:95%;
height:auto;
position:relative;
overflow:hidden;
-webkit-box-sizing:border-box;
}
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
#recomend_area div.moveWrap {
width:85%;
}
}
@media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) {
#recomend_area div.moveWrap {
width:95%;
}
}
@media all and (orientation:landscape) {
#recomend_area div.moveWrap {
width:95%;
}
}
#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:0;
padding:0;
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 {
width:290px!important;
margin:0;
padding:0;
float:left;
list-style:none;
text-align:center;
-webkit-box-sizing:border-box;
}
#recomend_area li.slideUnit>div {
padding: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;
line-height:1.3em;
vertical-align:middle;
}

#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{
padding:0.6em 0;
}
.category_body {
display: inline-block;
}
.category_body a {
width: 100%;
display: inline-block;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
cursor:pointer;
}
#categorytree ul li li{
padding-bottom:0.6em;
}
.category_header {
width: 1.5em;
margin:0 6px 0 8px;
display:inline-block;
background: transparent;
text-align:right;
}
.category_header.plus, .category_header.minus{
color:#FFF;
margin:0 6px 0 8px;
padding-bottom:4px;
display: inline-block;
text-align: center;
line-height:0.4;
width: 1.5em;
height:1.3em;
-webkit-border-radius: 8px;
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.plus > a, .category_header.minus > a{
width: 1.5em;
color:#FFF;
display: inline-block;
margin:0;
padding: 0;
text-decoration: none;
}

/*レベル調整*/
#categorytree .level1 .category_header{
width:1.5em;
}
#categorytree .level1 .category_body{
width:86.5%;
}
#categorytree .level2 .category_header{
width: 1.5em;
margin-left:2em;
}
#categorytree .level2 .category_body{
width:79%;
}
#categorytree .level3 .category_header{
width: 1.5em;
margin-left:3.4em;
}
#categorytree .level3 .category_body{
width:71.5%;
}
#categorytree .level4 .category_header{
width: 1.5em;
margin-left:4.8em;
}
#categorytree .level4 .category_body{
width:64%;
}

#categorytree .level5 .category_header{
margin-left:6.2em;
}
#categorytree .level5 .category_body{
width:56%;
}


/*リンクカラー*/
.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;
}