@charset "utf-8";

/************************************************
 ブロック用
************************************************ */
/*** 目次 ***

▼ブロック共通
リスト
タイトル
ヘッダー上、フッター下のブロックエリア

▼各機能ブロックの指定
-新着情報
-現在のカゴの中
-カテゴリ
-ガイドリンク
-ログイン（サイド用）
-検索
-カレンダー
-おすすめ商品
    *メインカラム用 1カラム時 [one_maincolumn]
    *メインカラム用 2カラム時 [two_maincolumn_left]
                              [two_maincolumn_right]
    *メインカラム用 3カラム時 [three_maincolumn]
    *サイドカラム用           [side_column]
    *商品詳細のオススメ商品   [whobought_area]
 */




/* ==============================================
ブロック共通
/* ============================================= */


/* リスト
----------------------------------------------- */
/* ログイン 検索条件 */

#container .block_outer .block_body dl.formlist span {
    vertical-align: top;
}


/* タイトル
----------------------------------------------- */
#news_area h2 .rss{
    position: absolute;
    top: 5px;
    right: 0.5em;
}


/* ==============================================
▼ヘッダー上、フッター下のブロックエリア
=============================================== */
div#topcolumn {
    margin: 0px;
    clear: both;
}
div#bottomcolumn {
    margin: 0px;
    clear: both;
}


/* ***********************************************
▼各機能ブロックの指定
/*********************************************** */

/* ===============================================
▼新着情報
=============================================== */
#news_area .block_body {
    padding: 10px;
    padding: 0;
}
#news_area .news_contents li{
    position: relative;
    padding-left: 16px;
    line-height: 1.6em;
}
#news_area .news_contents li:before,
#news_area .news_contents li:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    margin: -4px 0 0 0;
    border-top-width: 6px;
    border-top-style: solid;
    border-left: 6px solid transparent;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
#news_area .news_contents li:before{
    left: 0;
    border-top-color: #83a400;
}
#news_area .news_contents li:after{
    left: -2px;
    border-top-color: #fff;
}
#news_area p{
    margin: 10px 0 0 0;
}



/* ===============================================
▼カテゴリ
=============================================== *
#category_area h2{
    background-color: #c2da63;
    background-image: url(/store/assets/pc/block_category_area_background.png);
    background-position: 0 0;
    padding: 9px 0 7px 0;
    line-height: 1em;
}
#category_area .block_body{
    background-color: #fff;
    border: solid 3px #c2da63;
    border-top: 0;
    padding: 0 10px;
}
#categorytree{
    padding: 10px 0;
}
#category_area li {
    letter-spacing: -1px;
    margin: 5px 0;
}
#category_area li a{
    position: relative;
    padding-left: 12px;
    display: inline-block;
}
#category_area li a:before,
#category_area li a:after{
    display: block;
    content: "";
    position: absolute;
    top: .5em;
    width: 0;
    height: 0;
    margin: -2px 0 0 0;
    border-top-width: 6px;
    border-top-style: solid;
    border-left: 6px solid transparent;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
#category_area li a:before{
    left: 0;
    border-top-color: #c1da5e;
}
#category_area li a:after{
    left: -2px;
    border-top-color: #fff;
}




/* ===============================================
▼ガイドリンク
=============================================== */
#guide_area {
    margin-top: 1em;
    border: none;
}
#guide_area li {
    margin-bottom: 5px;
    letter-spacing: -0.05em;
}
ul.button_like li {
    margin: 0;
    padding: 0 0 1px 0;
    background: url("../img/background/bg_btn_list.jpg") bottom repeat-x;
}
ul.button_like li a {
    margin: 0;
    padding: 10px 15px 10px 10px;
    border: 1px solid;
    border-bottom: none;
    border-color: #ccc;
    display: block;
    background: url("../img/icon/ico_arrow_02.gif") no-repeat right;
    text-decoration: none;
    outline: none;
}


/* ===============================================
▼ログイン（サイド用）
※ヘッダー用はbloc_alpha.css内に記述
=============================================== */
#container #login_area{
    position: relative;
  padding: 13px 0 0 0;
}
#container #login_area h2{
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
#container #login_area .block_body {
    border: solid 3px #c1da5e;
  background-color: #fff;
  padding: 28px 0 9px 0;
}

#container #login_area .block_body p {
    margin: 0;
    clear: both;
}

#container .login_area dl.formlist {
    margin-bottom: 8px;
    width: 200px;
}
#container .login_area dl.formlist dt {
    margin-bottom: 3px;
    padding-left: 0;
    color: #333;
    width: 78px;
    float: left;
    font-size: 12px;
    text-align: right;
}
#container .login_area dl.formlist dd {
    margin-bottom: 5px;
    float: right;
    width: 118px;
    vertical-align: bottom;
    text-align: left;
}

#container .main_column .login_area dl.formlist {
    width: auto;
}
#container .main_column .login_area dl.formlist dt{
    width: 120px;
}
#container .main_column .login_area dl.formlist dd{
    width: 550px;
}

#container .login_area dl.formlist dd .box100{
    font-size: 12px;
}
#container div#login_area .block_body .mini {
    margin-top: 5px;
    letter-spacing: -0.01em;
    font-size: 12px;
    width: 180px;
    margin-right: 1em;
    text-align: right;
}
#container #login_area .block_body .user{
    padding: 0 10px;
    margin: 0 0 5px 0;
}
#container #login_area .block_body .user .user_name{
    font-weight: normal;
}
#container #login_area .block_body .btn {
    text-align: center;
    padding-top: 5px;
}
#container #login_area .block_body .btn a{
    display: inline-block;
    color: #fff;
    background-color: #a3be36;
    padding: 0 10px;
    line-height: 2em;
    font-size: 12px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
#container #login_area .block_body .btn a:hover{
    text-decoration: none;
    background-color: #b3cc50;
}
#container #login_area .block_body .register {
    margin-top: 5px;
    font-size: 12px;
    padding: 5px 10px 0 10px;
}
#container #login_area .block_body .register a{
   background-color: #eff9c8;
   display: block;
   margin: 5px auto;
   line-height: 2em;
   text-align: center;
}

/* ===============================================
▼検索
=============================================== */
div#search_area .block_body {
    padding: 10px;
}
div#search_area .block_body .btn {
    text-align: center;
}



/* ===============================================
▼おすすめ商品
=============================================== */
/*
   tplファイルのマークアップが同じ項目
   メインカラム用 2カラム時 [two_maincolumn_left]
                            [two_maincolumn_right]
   メインカラム用 3カラム時 [three_maincolumn]
   サイドカラム用           [side_column]
   商品詳細のオススメ商品   [whobought_area]
=============================================== */
/* 共通
----------------------------------------------- */

#whobought_area .product_item p {
    margin: 0 0 5px 0;
}

#whobought_area .product_item img {
    margin: 0 5px 0 0;
}

#whobought_area .product_item h3 {
    font-size: 100%;
    font-weight: normal;
}


/* 画像
----------------------------------------------- */
/* メインカラム用 */
#whobought_area .product_item .productImage {
    margin-bottom: 10px;
    float: left;
    width: 90px;
}

/* 左右の振り分け
----------------------------------------------- */
#whobought_area .product_item {
    float: left;
    width: 47.5%;
    padding-left: 1%;
    padding-right: 1%;
}


/* 商品説明テキスト
----------------------------------------------- */
/* メインカラム用 2カラム時*/
#two_maincolumn_right #whobought_area .productContents,
#two_maincolumn_left #whobought_area .productContents {
    float: right;
    width: 74%;
}

/* メインカラム用 3カラム時*/
#three_maincolumn #whobought_area .productContents {
    float: right;
    width: 67%;
}