/*------------------------------------------
common css

1 reset
2 common
3 header
  3.1 header icon
  3.2 header right layer
    3.2.1 user name layer
    3.2.2 header help link
  3.3 navigation
4 middle menu
  4.1 search form
  4.2 middle banner
5 left block
  5.1 category filter
  5.2 category list
6 item list
7 mode change
8 footer
  8.1 mail magazine
9 popup window
  9.1 popup left layer
  9.2 popup right layer
    9.2.1 popup form
  9.3 popup success
  9.4 popup error
10 cart popup
------------------------------------------*/

/*------------------------------------------
1 reset
------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, p, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 14px;
    font: inherit;
    vertical-align: baseline;
    font-family: "メイリオ" , Meiryo ,  "Meiryo UI" ,Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1.3;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input{
    font-family: "メイリオ" , Meiryo ,  "Meiryo UI" ,Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
input:focus{
    outline: none;
}
a{
    text-decoration: none;
    color: inherit;
}
.forcms_block #topHeader a{
    color: inherit;
}
b,strong{
    font-weight: bold;
}
i{
    font-style: italic;
}
/*------------------------------------------
2 common
------------------------------------------*/
@font-face {
    font-family: 'hareruya_icon';
    src:    url('/css/fonts/hareruya_icon.eot?yaowt2');
    src:    url('/css/fonts/hareruya_icon.eot?yaowt2#iefix') format('embedded-opentype'),
        url('/css/fonts/hareruya_icon.ttf?yaowt2') format('truetype'),
        url('/css/fonts/hareruya_icon.woff?yaowt2') format('woff'),
        url('/css/fonts/hareruya_icon.svg?yaowt2#hareruya_icon') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
    background-repeat: repeat-x;
    background-position: top;
    min-width:960px;
    background-image: url(http://www.hareruyamtg.com/img/usr/base_top.png);
}
section{
    position: relative;
}
.wrapper_{
    width: 960px;
    margin:0 auto;
    padding-top: 10px;
}
.wrapper_:after{
    content: "";
    display: block;
    clear: both;
}
/*Tamai追記0831*/
/*.formdetail_ tr:nth-child(3) td input {
    width: 210px;
}*/
.formdetail_ .small_ {
    display: inline-block;
}
/*ここまで*/
/*------------------------------------------
3 header
------------------------------------------*/
#topHeader{
    background: white;
    box-shadow: 4px 4px 5px -1px rgba(0,0,0,0.4);
    margin-bottom: 30px;
}
/*kusu追記0426*/
#topHeader #topCart .cart_box_{
	display:none;
}
/*ここまで*/

/* 3.1 header icon */
#topHeader .topHeaderLeft{
    float: left;
    line-height: 0;
    font-size: 0;
}
#topHeader .topHeaderLeft img{
    line-height: 0;
    font-size: 0;
}

/* 3.2 header right layer */
#topHeader .topHeaderRight{
    float: right;
    width: 700px;
    
}

/* 3.2.1 user name layer*/
#topHeader .topHeaderUser{
    background: #DDDBCE;
}
#topHeader .topHeaderUser:after{
    clear: both;
    display: block;
    content: "";
}
#topHeader .userName{
    font-size:12px;
    line-height:16px;
    padding:13px;
    padding-left:30px; 
    float: left;
}
#topHeader .systemLink{
    float: right;
    padding-right: 20px;
}
#topHeader .systemLink li{
    float: left;
    line-height: 22px;
    padding:10px 16px;
    font-size:14px;
    position: relative;
}
#topHeader .systemLink li:before{
    font-family: 'hareruya_icon';
    margin-right: 5px;
    font-size: 16px;
    line-height: 1em;
    color: #333;   
}
#headerLogin:before{content:"\e902"}
#headerLogout:before{content:"\e902"}
#headerRegist:before{content:"\e901"}
#topCart:before{content:"\e900"}
#topHeader .systemLink li .cartNum{
    border:1px solid;
    background: white;
    padding:2px 6px;
    display: inline-block;
    text-align: center;
    line-height: 16px;
    margin-left: 5px;
}


/* 3.2.2 header help link */
#topHeader .topHeaderHelp{

}
#topHeader .snsLink{
    padding:12px 0;
    float: left;
}
#topHeader .snsLink{
    line-height: 0;
}
#topHeader .snsLink:after{
    clear: both;
    display: block;
    content: "";
}
#topHeader .snsLink li{
    float: left;
    margin-right: 10px;
}
#topHeader .headerMailMagazine{
    font-size:10px;
    line-height: 24px;
    background:#F18336;
    padding:0 10px;
    border-radius: 5px;
    color: white;
    padding-left: 30px;
    position: relative;
}
#topHeader .headerMailMagazine:before{
    content: "\e903";
    font-family: 'hareruya_icon';
    font-size: 10px;
    line-height: 1em;
    height: 1em;
    color: white;
    position: absolute;
    top: 0;
    bottom: 0;
    left:10px;
    margin:auto 0;
}
#topHeader .helpLink{
    float: right;
}
#topHeader .helpLink li{
    float: left;
    font-size:14px;
    line-height: 14px;
    padding:17px 15px 17px 22px;
    color: #EA5404;
    position: relative;
}
#topHeader .helpLink li:before{
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ea5404;
    left:0;
    top:0;
    bottom: 0;
    margin:auto 0;
}
#topHeader .helpLink li:after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border:5px solid transparent;
    border-left: 8px solid white;
    left:5px;
    top:0;
    bottom: 0;
    margin:auto 0;
}
#topHeader .helpLink:after{
    clear: both;
    display: block;
    content: "";
}
#topHeader .helpLink .engLink{
    padding-left:28px;
}
#topHeader .helpLink .engLink:before{
    content: url("http://img.hareruyamtg.com/img/usr/icon/header_eng.png");
    width: 22px;
    height: 14px;
    border-radius: 0;
    background: transparent;
}
#topHeader .helpLink .engLink:after{
    content:none;
}


/* 3.3 navigation */
#topHeader #contentLink{
    clear: both;
}
#topHeader #contentLink ul{
    display: table;
    width: 100%;
    border:2px solid #ea5404;
    box-sizing: border-box;
}
#topHeader #contentLink li{
    display: table-cell;
    font-size:15px;
    background: #FFF5D6;
    text-align: center;
    white-space: nowrap;
    color: #ea5404;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
#topHeader #contentLink li a{
    display: block;
    padding: 12px 27px;
    line-height: 1;
}
#topHeader #contentLink li:hover{
    background:#EF7C39;
    color: white;
}
#topHeader #contentLink .linkOnlineShop{
    color: white;
    background:#ea5404;
    font-weight: bold;
}


/*------------------------------------------
4 middle menu
------------------------------------------*/
#searchBlock{
    margin-bottom:20px;
}
#searchBlock:after{
    content: "";
    display: block;
    clear: both;
}


/* 4.1 search form */
#searchForm{
    float: left;
    width: 520px;
    font-size: 0;
    line-height: 1;
}
#searchForm form{
    display: inline-block;
    margin-right: 10px;
    vertical-align: bottom;
}
#searchForm #leftmenu_search_goods_name{
    width: 380px;
    border:2px solid #ea5404;
    border-right: 0;
    padding:15px 0 15px 20px;
    font-size: 16px;
    line-height: 18px;
    box-sizing:border-box;
    vertical-align: top;
    margin:0;
    height: 52px;
    border-radius: 0;
}
#searchForm #leftmenu_search_goods_submit{
    width: 52px;
    height: 52px;
    font-size: 30px;
    line-height: 30px;
    background: #ea5404;
    border:0;
    padding:0;
    margin:0;
    cursor: pointer;
    vertical-align: top;
    position: relative;
    font-family: 'hareruya_icon';
    color: #FAD9A4;
}
#searchForm p{
    font-size:16px;
    border-bottom: 1px solid #ea5404;
    display: inline-block;
    color: #ea5404;
    vertical-align: bottom;
    line-height: 1;
}

/* 4.2 middle banner */
#middleBanner{
    float: right;
    width: 420px;
}
#middleBanner li{
    font-size:0;
    float: left;
    line-height:0;
    width: 100px;
    height: 52px;
    background: url(http://img.hareruyamtg.com/img/top/copy.png);
    margin-right: 5px;
    position: relative;
    z-index: 10;
}
#middleBanner li.paymant{
    background-position: 0;
}
#middleBanner li.tcget{
    background-position: -100px 0;
}
#middleBanner li.ship{
    background-position: -200px 0;
}
#middleBanner li.points{
    background-position: -300px 0;
}
#middleBanner li .mPop{
    display: none;
    position: absolute;
    top:55px;
    right: 0;
}
#middleBanner li:hover>.mPop{
    display: block;
}

/* 4.3 suggest */
.np-keyword-suggest{
    font-size: 14px;
    line-height: 130%;
}


/*------------------------------------------
5 left block
------------------------------------------*/
.leftmenuframe_{
    width: 240px;
    float: left;
    line-height: 1;
}

/* 5.1 category filter */
#block_of_categorytree h2{
    padding:20px 0 5px 5px;
    color: #ea5404;
    border-bottom: 1px solid;
    margin-bottom:20px;
    line-height: 1;
}
#block_of_categorytree .category_button p.selected{
    background: #ea5404;
    color: white;
    font-weight: bold;
}
#block_of_categorytree .category_button{
    font-size: 0;
    margin-bottom: 20px;
}
#block_of_categorytree .category_button p{
    width:50%;
    border:1px solid #ea5404;
    text-align: center; 
    display: inline-block;
    font-size: 14px;
    padding:8px 0;
    box-sizing:border-box;
    cursor: pointer;
}
#block_of_categorytree .category_button #alpha{
    border-left: 0;
}
#block_of_categorytree .category_button{
    font-size: 0;
    margin-bottom: 20px;
}
#block_of_categorytree .category_button p{
    border:1px solid #ea5404;
    display: inline-block;
    padding:8px 0;
    font-size: 14px;
    line-height: 14px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
}
#block_of_categorytree .category_button #keyStandard{
    width: 100px;
    border-right: 0;
    border-bottom: 0;
}
#block_of_categorytree .category_button #keyModern{
    width: 60px;
    border-right: 0;
    border-bottom: 0;
}
#block_of_categorytree .category_button #keyLegacy{
    width: 80px;
    border-bottom: 0;
}
#block_of_categorytree .category_button #keyPromo{
    width: 50%;
    border-right: 0;
    border-bottom: 0;
    font-size: 12px;
}
#block_of_categorytree .category_button #keyRelated{
    width: 50%;
    border-bottom: 0;
    font-size: 12px;
}
#block_of_categorytree .category_button #keyAll{
    width: 100%;
}


/* 5.2 category list */
#block_of_categorytree .category_tree_ ul{
    display: none;

}
#block_of_categorytree .category_key h5{
    padding:8px 0;
    color:#333;
    border-bottom:1px dotted;
    font-size: 14px;
    height: 42px;
    box-sizing: border-box;
    display: table-cell;
    vertical-align: middle;
    width: 240px;
    cursor: pointer;
    line-height: 1;
}
#block_of_categorytree .category_key:nth-last-of-type(1) h5{
    border-bottom: none;
}
#block_of_categorytree .category_tree2_ a{
    display: block;
    color:#333;
    font-size:14px;
    line-height: 14px;
    padding:10px 15px;
    background: #eee;
    border-bottom: 1px solid white;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
#block_of_categorytree .category_tree2_ a:hover{
    color: white;
    background: #999;
}
#block_of_categorytree .exIcon{
    width: 25px;
    height: 25px;
    vertical-align: middle;
    margin-right: 8px;
}
#block_of_categorytree .exIcon.after{
    margin:0 0 0 8px;
}

/*------------------------------------------
6 item list
------------------------------------------*/


/* 6.1 icon */
.icon{
    position: absolute;
    left:-10px;
    top:55px;
    font-size: 10px;
}
.icon p{
    margin-top:-5px;
    position: relative;
}
.icon p:nth-of-type(1){z-index: 4}
.icon p:nth-of-type(2){z-index: 3}
.icon p:nth-of-type(3){z-index: 2}
.icon p:nth-of-type(4){z-index: 1}
.icon p.iconNew{
}
.icon p.iconPrice{
}
.icon p.iconRefill{
}
.moreLink{
    margin:15px 0;
    float: right;
    background: #3A3C3B;
    padding:5px 15px 5px 25px;
    color: white;
    position: relative;
    line-height: 1;
}
.moreLink:before{
    content: "";
    position: absolute;
    top:0;
    bottom:0;
    left:10px;
    margin:auto 0;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left: 7px solid white;
}

/* 6.2 soldout */
.soldout{
    position: absolute;
    background-color: white;
    opacity: 0.6;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5
}
.soldout p{
    position: absolute;
    font-family: 'Fira Sans', sans-serif;
    font-size: 24px;
    text-align: center;
    white-space: nowrap;
    line-height: 24px;
    height: 24px;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    margin: auto;
}


/* 6.3 line item list */
.itemListLine{
    font-size: 0;
    text-align: center;
}
.itemListLine li{
    font-size: 11px;
    display: inline-block;
    width: 100px;
    height: 226px;
    border:1px solid;
    vertical-align: top;
    padding:10px;
    margin:0 8px;
    text-align: left;
    color: #333;
    position: relative;
    -o-transition: background 0.3s;
    -moz-transition: background 0.3s;
    -ms-transition: background 0.3s;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
}
.itemListLine li:hover{
    background:#ffc;
}
.itemListLine .itemImg{
    width: 100px;
    height: 120px;
    position: relative;
    margin-bottom:10px;
}
.itemListLine .itemImg img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
}
.itemListLine .itemName{
    line-height: 16px;
    height: 48px;
    overflow: hidden;
    margin-bottom: 15px;
}
.itemListLine .itemStock{
    margin-bottom: 6px;
    line-height: 1;
}
.itemListLine .itemPrice{
    font-size: 14px;
    color:#b00;
    line-height: 1;
}


/* 6.4 row item list */
#forRank{
    font-size: 0;
    text-align: center;
}
.itemListHeader{
    font-size: 16px;
    border-bottom: 2px solid;
    padding:5px 0px 5px 10px;
    text-align: left;
}
.itemListHeader:after{
    content: "";
    clear: both;
    display: block;
}
.itemListHeader h3{
    line-height: 22px;
    float: left;
}
.itemListHeader .moreLink{
    float: right;
    margin:0;
    font-size: 12px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5b3b8+0,5a5657+100 */
    background: rgb(181,179,184); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(181,179,184,1) 0%, rgba(90,86,87,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(181,179,184,1) 0%,rgba(90,86,87,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(181,179,184,1) 0%,rgba(90,86,87,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5b3b8', endColorstr='#5a5657',GradientType=0 ); /* IE6-9 */
}
.listRow{
    display: inline-block;
    width: 210px;
    border:2px solid;
    margin:0 8px 40px;
    vertical-align:top;
}
.itemListRow{
    font-size: 0;
    text-align: center;
}
.itemListRow li{
    font-size: 11px;
    padding:5px;
    height: 70px;
    overflow: hidden;
    border-bottom:1px solid #333;
}
.itemListRow a:nth-last-of-type(1) li{
    border-bottom: 0;
}
.itemListRow li:after{
    content: "";
    display: block;
    clear: both;
}
.itemListRow .itemImg{
    width: 80px;
    position: relative;

}
.itemListRow .itemImg img{
    max-width: 100%;
    float: left;
    margin-right: 10px;
}
.itemListRow .itemName{
    line-height: 16px;
    height: 64px;
    overflow: hidden;
    margin-bottom: 15px;
    text-align: left;
    color: #333;
}


/* 6.5 special item list */
.itemListSpecial{
    text-align: center;
    font-size: 0;
    line-height: 1;
}
.itemListSpecial li{
    display: inline-block;
    border:1px solid;
    color: #333;
    width: 320px;
    height: 150px;
    margin:0px 5px 20px;
    text-align: left;
    font-size: 12px;
    box-sizing: border-box;
    padding:10px;
    background: white;
    position: relative;
}
.itemListSpecial .itemImg{
    height: 100%;
    width: 90px;
    float: left;
    position: relative;
    margin-right: 15px;
}
.itemListSpecial .itemImg img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    margin:auto;
}
.itemListSpecial .itemName{
    line-height: 18px;
    height: 72px;
    overflow: hidden;
    margin-bottom: 15px;
}
.itemListSpecial .itemStock{
    margin-bottom: 6px;
}
.itemListSpecial .itemPrice{
    font-size: 14px;
    color:#b00;
}
.itemListSpecial a:nth-of-type(3) li,
.itemListSpecial a:nth-of-type(4) li,
.itemListSpecial a:nth-of-type(5) li{
    width: 210px;
    height: 100px;
    margin: 0 5px; 
    padding:5px; 
    font-size: 11px;
    line-height: 16px;
}
.itemListSpecial a:nth-of-type(3) .itemImg,
.itemListSpecial a:nth-of-type(4) .itemImg,
.itemListSpecial a:nth-of-type(5) .itemImg{
    width: 62px;
    margin-right: 10px;
}
.itemListSpecial a:nth-of-type(3) .itemName,
.itemListSpecial a:nth-of-type(4) .itemName,
.itemListSpecial a:nth-of-type(5) .itemName{
    height: 48px;
    line-height: 16px;
    margin-bottom:8px;
}
.itemListSpecial a:nth-of-type(3) .itemStock,
.itemListSpecial a:nth-of-type(4) .itemStock,
.itemListSpecial a:nth-of-type(5) .itemStock{
    margin-bottom: 0;
}
.itemListSpecial a:nth-of-type(3) .icon,
.itemListSpecial a:nth-of-type(4) .icon,
.itemListSpecial a:nth-of-type(5) .icon{
    position: absolute;
    left:-10px;
    top:50px;
}
.itemListSpecial a:nth-of-type(3) .icon p,
.itemListSpecial a:nth-of-type(4) .icon p,
.itemListSpecial a:nth-of-type(5) .icon p{

}

/* 6.6 history item list */
#history{
    margin-bottom: 40px;
}
.itemListHistory{
    text-align: left;
    font-size: 0;
}
.itemListHistory li{
    display: inline-block;
    width:75px;
    height: 105px;
    margin:20px;
    position: relative;
}
.itemListHistory li img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    margin: auto;
}


/* 6.7 slide item list */
.overLayer{
    margin:0 5px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: 222px;
}
.overLayer .itemListLine{
    text-align: left;
    white-space: nowrap;
    position: absolute;
    line-height: 1;
}
.overLayer .itemListLine li{
    white-space: normal;
    height: 200px;
}
.overLayer .itemListLine .itemName{
    line-height: 18px;
    height: 72px;
    overflow: hidden;
    margin-bottom: 15px;
}
.slideLeftButton{
    position: absolute;
    left: 0;
    bottom:100px;
    z-index: 10;
}
.slideRightButton{
    position: absolute;
    right: 0;
    bottom:100px;
    z-index: 10;
}


/*------------------------------------------
7 mode change
------------------------------------------*/
#displayMode{
    background: #694b3a;
    text-align: center;
    color: white;
    clear: both;
    line-height: 36px;
}

#displayMode a{
    text-decoration: underline;
}


/*------------------------------------------
8 footer
------------------------------------------*/
#topFooter{
    clear: both;
    color:#666;
    position: relative;
    width: 960px;
    margin:0 auto;
}
#topFooter:after{
    clear: both;
    display: block;
    content: "";
}
#topFooter .footerNav{
    float: left;
    padding:20px 30px;
    width: 200px;
}
#topFooter h3{
    border-bottom: 1px solid;
    padding:5px 15px;
    margin-bottom:20px;
    position: relative;
    line-height: 1;
}
#topFooter h3:before{
    content: "";
    width: 4px;
    height: 16px;
    background: #666;
    position: absolute;
    left: 0;
    top:0;
    bottom: 0;
    margin:auto 0;
}
#topFooter li{
    line-height: 180%;
}


/* 8.1 mail magazine */
#mailMagazine{
    float: right;
    margin-top: 200px;
    width: 350px;
    line-height: 1
}
#mailMagazine .mailTop{
    background:#F7AE69;
    color:white;
    padding:15px 30px;
}
#mailMagazine .mailTop:after{
    content: "";
    display: block;
    clear: both;
}
#mailMagazine .mailTop img{
    float: right;
    width: 80px;
}
#mailMagazine h2{
    font-size:16px;
    font-weight: bold;
    margin-bottom: 10px;
}
#mailMagazine p{
    font-size:12px;
    margin-bottom:0;
    line-height: 130%;
}
#mailMagazine .mailBottom{
    background:#888;
    color:white;
    text-align: center;
    padding:5px;
}
#mailMagazine .mailBottom p:after{
    content:"＞";
    margin:0 5px;
}
.footerCopy{
    clear: both;
    margin:20px 0 10px;
    text-align: center;
    line-height:1;
}


/*------------------------------------------
9 popup window
------------------------------------------*/

#popupProduct{
    z-index: 999 ;
    position: absolute; 
    top: 0 ;
    left: 0 ;
    padding: 15px 5px;
    display: none;
    line-height: 1;
}
#popupProduct a{
    color: #333;
}
#popupProduct p{
    margin-bottom: 0;
}
#popupProduct .popupOverray{
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 120% ;
}
#popupProduct .popupWindow{
    border: 2px solid #ea5404;
    padding: 8px;
    width: 360px;
    background: white;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    overflow: hidden;
    position: relative;
}
#popupProduct .popupWindow:after{
    content:"";
    clear: both;
    display: block;
}

/* 9.1 popup left layer */
#popupProduct .popupLeft{
    width: 170px;
    height: 238px;
    float:left;
    font-size: 0;
    line-height: 0;
    position: relative;
}
#popupProduct .popupLeft img{
    max-width: 100%;
    max-height: 100%;
    left:0;
    right: 0;
    top:0;
    bottom:0;
    margin:auto;
    position: absolute;
}

/* 9.2 popup right layer */
#popupProduct .popupRight{
    width: 180px;
    float:right;
    text-align: left;
}
#popupProduct .popupName{
    font-size: 13px;
    line-height: 18px;
    overflow: hidden;
    margin-bottom:10px;
    padding-top:5px;
    text-align: left;
    height: 72px;
    font-weight:bold;
}
#popupProduct .popupStock{
    text-align: right;
    padding-right: 5px;
    font-size: 13px;
}
#popupProduct .popupPriceTitle{
    text-align: left;
    color:red;
    font-size: 13px;
    margin-bottom:5px;
    font-weight: bold;
}
#popupProduct .popupPrice{
    clear: both;
    color: red;
    font-size:16px;
    margin-bottom: 15px;
    font-weight: bold;
}

/* 9.2.1 popup form */
#popupProduct #cartNum{
    border:1px solid #ea5404;
    width: 3em;
    border-radius: 5px;
    padding:2px 5px;
    font-size:14px;
    -webkit-appearance:none;
    vertical-align: bottom;   
    margin: 0 6px 0 0;
    height: 21px;
}
#popupProduct .cartPlus,
#popupProduct .cartMinus{
    width:27px;
    text-align:center;
    margin-right: 6px;
    border-radius: 5px;
    font-size: 17px;
    line-height: 17px;
    padding:4px 0;
    color: white;
    -webkit-appearance:none;
    outline: none;
    border:1px solid;
    vertical-align: middle;
    font-family: hareruya_icon;
}
#popupProduct .cartPlus{
    background: #E84728;
    border-color:#E84728;
}
#popupProduct .cartPlus:active{
    background:white;
    color:#E84728;
}
#popupProduct .cartMinus{
    background: #204C9F;
    border-color:#204C9F;
}
#popupProduct .cartMinus:active{
    background:white;
    color:#204C9F;
}
#popupProduct .btn_cart_{
    margin-top: 17px;
    cursor: pointer;
}
#popupProduct .popupArrow{
    position: absolute;
    left:150px;
    width: 0;
    height: 0;
    border:26px solid transparent;
    z-index: 1;
}
#popupProduct .popupArrow:after{
    content: "";
    position: absolute;
    left:-26px;
    width: 0;
    height: 0;
    border:26px solid transparent;
    z-index: 2;
}
#popupProduct .popupArrow.downArrow{
    bottom:-11px;
    border-top:26px solid #ea5404;
    border-bottom: 0;
}
#popupProduct .popupArrow.downArrow:after{
    top:-29px;
    border-top:26px solid white;
}
#popupProduct .popupArrow.upArrow{
    top:-11px;
    border-bottom:26px solid #ea5404;
    border-top:0;
}
#popupProduct .popupArrow.upArrow:after{
    bottom:-29px;
    border-bottom:26px solid white;
}

/* 9.3 popup success */
#popupProduct .cartSuccess{
    font-weight:bold;
    font-size:20px;
    text-align: center;
    color: #ea5404;
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    background: white;
    display: none;
}
#popupProduct .cartSuccess p{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin:auto;
    height: 20px
}

/* 9.4 popup error */
#popupProduct .popupErrorLeft{
    font-family: 'Fira Sans', sans-serif;
    font-size: 24px;
    line-height: 24px;
    padding:88px 0;
    background: #FFFCDB;
    text-align:center;
}
#popupProduct .popupErrorRight{
    display: table-cell;
    height: 200px;
    vertical-align: middle;
    padding-left: 10px;
    line-height: 130%;
}

/* 9.5 ecb build */
a.popup_product{
        display:inline-block;
}

.listRow a.ecb_popup_product{
        display:inline;
}

#jscart_replace_{
        display:inline;
}


/*------------------------------------------
10 cart popup
------------------------------------------*/
#jscart_replace_{
    display: inline-block;
}
.cartOver{
    position: absolute;
    top:37px;
    right: 0;
    z-index: 999;
    display: none;
}
.cartOver a{
    color: #22c;
    text-decoration: underline;
}
.cart_on_box_{
    padding-top:5px;
    top:30px;
    right:-6px;
    z-index:10;
}
#cart_frame_{
    background:#fff299;
    border:solid 1px #EA5404;
    width:270px;
    box-shadow: 4px 4px 5px -1px rgba(0,0,0,0.4);
}
.cart_goods_box{
    padding:10px;
    overflow-y:auto;
    max-height:400px;
    background:white;
}
.cart_goods_box dl:after{
    content: "";
    display: block;
    clear: both;
}
.cart_goods_box dt{
    float: left;
}
.cart_goods_box dd{
    float: right;
}
.cart_goods_box .price_{
    color: #c30;
    font-weight: bold;
} 
.cart_on_box_ .name1_{
    height:auto;
    font-size: 12px;
}
.cart_postage_{
    padding-bottom:0;
    margin-bottom:0;
    border-bottom:0;
}
.cart_to_order_{
    padding:10px;
    border-top:1px solid #EA5404;
    text-align: center;
}
.cart_to_order_ a{
    color:white;
    text-decoration: none;
}
.cart_to_order_ span{
    padding:5px 10px;
    border-radius: 10px;
    background: #999;
    font-size: 12px;
}
.cart_to_order_ span:before{
    content: "\e900";
    font-family: 'hareruya_icon';
    padding-right:5px;
}
dl.cart_goods_ dt div.name1_{
    width:auto;
    word-break:break-all;
}
dl.cart_goods_{
    border-bottom:1px #555 dotted;
}
.cart_postage_{
    color:#000;
    font-size:12px;
}
.cart_total_{
    margin-top:10px;
}