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

@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;
}

/*-----------------------------------------------
オススメ商品
----------------------------------------------- */
#recommend_area {
    margin: 15px 10px 20px 10px;
    padding-top: 10px;
    border: #CCC solid 1px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}
#recommend_area h2 {
    font-size: 12px;
    margin-left: 10px;
}
#recommend_area li {
    width: 290px;
}
.recommendblock {
    width: 270px;
    padding: 5px 10px 5px 8px;
    margin: 0 auto;
    clear: both;
}
.recommendblock img {
    width: 80px;
    float: left;
}
.recommendblock .productContents {
    width: 68%;
    float: right;
    text-align: left;
}
.recommendblock .productContents p {
    clear: both;
}
.recommendblock .productContents p.comment {
    width: 17em;
    height: 3.7em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    clear: both;
}
.recommendblock .sale_price {
    clear: both;
    float: right;
    text-align: right;
}
#recommend_area div.moveWrap {
    width: 290px;
    height: auto;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    -webkit-box-sizing: border-box;
}

#recommend_area ul.moveWrapBG {
    margin: 0;
    padding: 0;
    display: inline-block;
    position: relative;
    width: 100%;
    height: auto;
    visibility: hidden;
    -webkit-box-sizing: border-box;
}
#recommend_area div.slideMask {
    margin: 0 auto;
    padding: 0;
    margin-right: 1px;
    position: absolute;
    top: 0;
    left: 0;
    border: 4px #FFF solid;
    -webkit-box-sizing: border-box;
}
#recommend_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;
}
#recommend_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;
}
#recommend_area li.slideUnit>div {
    padding: 4px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    -webkit-box-sizing: border-box;
}
#recommend_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;
}
#recommend_area div.flickSlideBottom div.bottomLeft,
#recommend_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;
}
#recommend_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;
}
#recommend_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;
}
#recommend_area div.flickSlideBottom div.bottomLeft:after {
    font-size: 10px;
    padding: 5px;
    text-align: left;
    display: table-cell;
}
#recommend_area div.flickSlideBottom div.bottomLeft:before {
    margin-top: 2px;
    padding: 5px;
    text-align: left;
    display: table-cell;
}
#recommend_area div.flickSlideBottom div.bottomRight:before {
    font-size: 10px;
    padding: 5px;
    text-align: right;
    display: table-cell;
}
#recommend_area div.flickSlideBottom div.bottomRight:after {
    margin-top: 2px;
    padding: 5px;
    text-align: right;
    display: table-cell;
}
#recommend_area div.flickSlideBottom ul.slidePager {
    width: 100%;
    margin: 0;
    padding: 0;
    display: table-cell;
    text-align: center;
}
#recommend_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;
}
#recommend_area div.flickSlideBottom ul.slidePager li.slidePagerPointer.active {
    background-color: #333;
}

/*-----------------------------------------------
カテゴリリスト（アコーディオン）
----------------------------------------------- */
#category_area {
    margin-bottom: 20px;
}
#categorytree ul {
    margin: 10px 10px 0 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 {
    margin-bottom: 20px;
}
#news_area ul {
}
#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;
}