@charset "utf-8";

@import "layout_pc.css";

/* ============================================================

    style info : PC用のスタイルを記述

============================================================ */

/* -----------------------------------
    utils
----------------------------------- */
.f-left{ float: left;}
.f-right{ float: right;}
.spOnly{ display: none; }
.pcOnly{ display: inherit; }
button{outline:none;}
.btn-a50 img{
    -webkit-transition: opacity 0.3s linear;
         -moz-transition: opacity 0.3s linear;
            -ms-transition: opacity 0.3s linear;
             -o-transition: opacity 0.3s linear;
                    transition: opacity 0.3s linear;
}
.btn-a50:hover img{
    -ms-filter: "alpha(opacity=50)";
    opacity:0.5;
}
.fade-in{
    -webkit-animation: fade-in 0.3s;
    -moz-animation:    fade-in 0.3s;
    -o-animation:      fade-in 0.3s;
    animation:         fade-in 0.3s;
}

/* width */
.w20  { width: 20px !important; }
.w30  { width: 30px !important; }
.w50  { width: 50px !important; }
.w80  { width: 80px !important;}
.w100 { width: 100px !important; }
.w130 { width: 130px !important; }
.w120 { width: 120px !important; }
.w140 { width: 140px !important; }
.w150 { width: 150px !important; }
.w160 { width: 160px !important; }
.w180 { width: 180px !important; }
.w200 { width: 200px !important; }
.w250 { width: 250px !important; }
.w300 { width: 300px !important; }
.w330 { width: 330px !important; }
.w350 { width: 350px !important; }
.w380 { width: 380px !important; }
.w400 { width: 400px !important; }
.w420 { width: 420px !important; }
.w450 { width: 450px !important; }
.w500 { width: 500px !important; }
.w600 { width: 600px !important; }



/* -----------------------------------
    layout
----------------------------------- */
body { min-width: 1020px; }
#contents { 
    position: relative;
    margin-top: 25px;
}
#contents .content {
    overflow: hidden;
    text-align: center;
}
#contents .contentInner{
    width: 1020px;
    margin: 0 auto;
    text-align: left;
    position: relative;
}

/* -----------------------------------
    parts > パンクズ
----------------------------------- */
.breadcrumb{
    width: 100%;
    padding: 18px 20px;
    box-sizing:border-box;
    font-size: 12px;
    line-height:1;
    background-color: #f1f1f1;
    text-align: left;
    border-bottom: #dadada solid 1px;
}
.breadcrumb .inner{
    max-width: 1020px;
    margin:auto;
}
.breadcrumb a{ text-decoration: underline; }
.breadcrumb a:hover{ text-decoration: none; }

/* -----------------------------------
    parts > text
----------------------------------- */
.txt-limited{
    background: url(../img/common/icon_limitedList.png) no-repeat 10px center;
    background-color: #fff;
    font-size: 16px;
    display: inline-block;
    padding: 6px 10px 6px 45px;
    border-top: #e5e5e5 solid 1px;
    border-bottom: #e5e5e5 solid 1px;
    color: #df4363;
}

/* -----------------------------------
    parts > title
----------------------------------- */
/* 新しいタイプのタイトル */
.title-section{
    text-align: center;
    line-height: 1;
    padding: 60px 0;
}
/* 古いタイプのタイトル */
.ttl-section{
    width: 100%;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    line-height: 28px;
    padding: 60px 0;
}
.ttl-section:before{
    content: url(../img/common/title_slash.png);
    display: inline-block;
    vertical-align: top;
    height: 28px;
    width: 48px;
    padding: 0 30px;
}
.ttl-section:after{
    content: url(../img/common/title_slash.png);
    display: inline-block;
    vertical-align: top;
    height: 28px;
    width: 48px;
    padding: 0 30px;
}
.ttl-section img {
    margin: 3px 0;
}

/* title logo */
.ttl-logo{ padding: 40px; }
.ttl-logo img{
    width: auto;
    height: auto;
    max-height: 136px;
    vertical-align: top;
}

/* -----------------------------------
    parts > スライドカスタム
----------------------------------- */
.Slide,.itemView { position: relative; }
.Slide .slick-next,.Slide .slick-prev,.itemView .slick-next,.itemView .slick-prev {
    position: absolute;
    top: 10px;
    width: 50px;
    height: 230px;
    border:none;
    z-index: 1;
    text-indent:-9999px;
    cursor:pointer;
    -webkit-transition: all 0.2s linear;
         -moz-transition: all 0.2s linear;
            -ms-transition: all 0.2s linear;
             -o-transition: all 0.2s linear;
                    transition: all 0.2s linear;
}
.Slide .slick-next:hover,.Slide .slick-prev:hover,.itemView .slick-next:hover,.itemView .slick-prev:hover {
    -ms-filter: "alpha(opacity=50)";
    opacity: 0.5;
}
.Slide .slick-next.slick-disabled,.Slide .slick-prev.slick-disabled,.itemView .slick-next.slick-disabled,.itemView .slick-prev.slick-disabled {
    -ms-filter: "alpha(opacity=20)";
    opacity: 0.2;
}
.Slide .slick-prev,.itemView .slick-prev{
    background: url(../img/common/btn_arrow_left.png) center center no-repeat;
}
.Slide .slick-next,.itemView .slick-next {
    background: url(../img/common/btn_arrow_right.png) center center no-repeat;
}
.Slide .slick-prev { left: -40px; }
.Slide .slick-next { right: -40px; }
.itemView .slick-prev { left: -76px;  }
.itemView .slick-next  { right: -76px;  }

.Slide .slick-dots{ position:relative;  bottom: inherit;    margin-top: 20px; }
.itemView .slick-dots{ display: none; }
/* listType1 Slide */
.listType1.Slide .slick-dots{   margin-top: 40px;}
.listType3.Slide .slick-next,.listType3.Slide .slick-prev{height: 256px;}


/* -----------------------------------
    parts > list
----------------------------------- */
#cart #contents ul.plainList li {
    list-style: none;
    text-align: right;
}

/* -----------------------------------
    parts > list > .listType1
----------------------------------- */
.listType1{
    width: 1040px;
    margin: -10px -10px;
}
.listType1 .item *{
    box-sizing:content-box;
}
.listType1 .item{
    background-color:#FFFFFF;
    display: block;
    width: 240px;
    float: left;
    margin: 10px;
    position: relative;
    font-size: 12px;
}
.listType1 .item .visual{
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 240px;
    /* 修正0024 */
    vertical-align:middle;
    display: table-cell;
    width: 240px;
    /* 修正0024 */
    
    background: url(../img/common/bg_dot.png) center top repeat;
}
/* 修正0024 */
.listType1 .item.level2 .visual{
    width:500px;
}
/* 修正0024 */

.listType1 .item .visual img{
    display: inline-block;
}
.listType1 .item img{
    width: auto;
    height: auto;
/* 修正0065 */
    max-height: 100%;
    /* 修正0069 */
    /* max-height: 200px; */
    max-width: 100%;
}
.listType1 .item .badge{
    position: absolute;
    top: -10px;
    right: -10px;
    width: 78px;
}
.listType1 .item .badge img{ width: 100%; }
.listType1 .item .info{
    padding: 20px;
    text-align: left;
    padding-bottom: 68px;
}
.listType1 .item span{
    background-color: #f1f1f1;
    line-height: 1.8;
    padding: 5px;
    display: inline-block;
    -webkit-transition: all 0.2s linear;
         -moz-transition: all 0.2s linear;
            -ms-transition: all 0.2s linear;
             -o-transition: all 0.2s linear;
                    transition: all 0.2s linear;
}
.listType1 .item .ttl{
    margin-bottom: 4px;
    line-height: 1.8;
}
.listType1 .item .limitedList{
    margin-top: 20px;
    border-top: #e5e5e5 solid 1px;
    border-bottom: #e5e5e5 solid 1px;
    background-color: transparent;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    color: #df2c52;
    padding: 5px 0;
    position: absolute;
    bottom: 20px;
    left: 20px;
    right:20px;
}
.listType1 .item .newsList{
    border-bottom: #e5e5e5 solid 1px;
    padding:5px 0 3px;
    font-size: 12px;
}
.listType1 .item .newsList dt{
    display: inline-block;
    background-color: #df4363;
    color: #FFFFFF;
    padding:0 5px;
    font-size: 11px;
}
.listType1 .item .newsList dd{ display:inline-block; }
.listType1 .item .sales{
    word-spacing:-0.5em;
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 4px;
    font-size: 14px;
    font-weight: bold;
}

.listType1 .item .date{
    color:#df2c52;
    font-size: 12px;
    margin-bottom: 4px;
}
/* level 1 */
.listType1 .item.level1{
    background: #FFF url(../img/common/bg_dot.png) center top repeat;
    width: 1020px;
    margin:10px;
    padding: 20px;
    box-sizing: border-box;
    position:relative;
}
.listType1 .item.level1 .visual{
    width: 535px;
    height: 430px;
    background: #fff;
    padding:0;
}
.listType1 .item.level1 .info{
    position:absolute;
    right: 0;
    top: 0;
    width: 445px;
    padding:48px;
    box-sizing: border-box;
    height: 100% !important;
    background-color: #fff;
}
.listType1 .item.level1 .info .badge{
    position: absolute;
    width: 130px;
    right: -50px;
    top: -40px;
}
.listType1 .item.level1 .ttl{ font-size: 24px; }
.listType1 .item.level1 .spec{
    font-size: 14px;
    display: inline-block;
    font-weight: normal;
}
.listType1 .item.level1 .txt-limited{
    display: inline-block;
    position: absolute;
    bottom: 48px;
    left: 48px;
    width: 314px;
    box-sizing: border-box;
    font-size: 14px;
}
.listType1 .item.level1 .sales { left: 0; font-size: 16px; }



/* level 2 */
.listType1 .item.level2{ width: 500px; }
.listType1 .item.level2 .ttl,
.listType1 .item.level2 .spec{ font-size: 18px; }
.listType1 .item.level2 .limitedList{ display: inline-block; }

/* hover */
.listType1 .item:hover .info span{
    background-color: #6d61a5;
    color:#FFFFFF;
}
.listType1 .item:hover .info .limitedList span{
    background-color: transparent;
    color: #df2c52;
}

/* -----------------------------------
    parts > list > .listType2
----------------------------------- */
.listType2 {
    width:1000px;
    margin:-10px auto 0;
    position:relative;
}
.listType2 .item {
    width: 230px;
    margin: 10px;
    float: left;
    text-align: left;
    display: block;
    font-size:12px;
    font-weight: bold;
    line-height: 1.8;
    position: relative;
}
.listType2 .item .visual{
    width: 230px;
    height: 230px;
    background: #fff url(../img/common/bg_dot.png);
    margin-bottom: 8px;
    position: relative;
    /* 修正0024 */
    vertical-align:middle;
    display: table-cell;
    /* 修正0024 */
    
    padding: 15px 10px;
    box-sizing: border-box;
    text-align:center;
}
/* 修正0024 */
.listType2 .item .ttl{
    margin-top:8px;
}
/* 修正0024 */

.listType2 .item img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}
.listType2 .item.first{
    clear: both;
}
.listType2 .item .sales{
    font-size: 14px;
    margin-top: 10px;
}
.listType2 .item .badge{
    width: 50px;
    position: absolute;
    right: -5px; top: -10px;
}

/* -----------------------------------
    parts > list > .listType3
----------------------------------- */
.listType3 .item {
    width:  155px;
    margin: 9px;
    float: left;
    text-align: left;
    display: block;
    font-size:14px;
    font-weight: bold;
    line-height: 1.8;
    position: relative;
}
.listType3 .item.first{
    clear: both;
}
.listType3 .item .visual{
    width:  155px;
    background: #fff url(../img/common/bg_dot.png);
    margin-bottom: 8px;
    position: relative;
    box-sizing: border-box;
    text-align:center;
    vertical-align: middle;
    display: table-cell;
}
.listType3 .item img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}
.listType3 .item .ttl{
    line-height: 1.6;
}
.listType3 .item .sales{
    font-size: 18px;
    margin-top: 10px;
}
.listType3 .item .badge{
    width: 50px;
    position: absolute;
    right: -5px; top: -10px;
}



/* -----------------------------------
    parts > button
----------------------------------- */
button {
    background-color: transparent;
    border:none;
    cursor: pointer;
}
html.cssanimations .button {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.button {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    border: none !important;
    position: relative;
    z-index: 1;
    zoom: 1;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    line-height: 1.2;
    color: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    behavior: url('/js/PIE.htc');
}

.button:hover {
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
.button-gray{
    cursor:default;
}
.button-gray:hover {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

.button-s {
    padding: 7px 19px;
    font-size: 100%;
}

.button-m {
    padding: 10px 19px;
    font-size: 115%;
}

.button-l {
    padding: 12px 19px;
    font-size: 115%;
}

.button-pnk-f {
    font-size: 14px;
    box-sizing: border-box;
    text-align: center;
    background-color: #df4363;
    padding: 1.5em 0 1.4em;
    line-height: 1;
}
a.button-pnk {
    color: #FFFFFF;
}
.button-pnk {
    background-color: #df2c52;
    background: -webkit-gradient(linear, left top, left bottom, from(#df2c52), to(#b42342));
    background: -moz-linear-gradient(top, #df2c52, #b42342);
    background: linear-gradient(to bottom, #df2c52, #b42342);
    -pie-background: linear-gradient(top, #df2c52, #b42342);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#df2c52', endColorstr='#b42342', GradientType=0)";
}

.button-wht {
    color: #333 !important;
    background-color: #e6e6e6;
    background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#bababa));
    background: -moz-linear-gradient(top, #e6e6e6, #bababa);
    background: linear-gradient(to bottom, #e6e6e6, #bababa);
    -pie-background: linear-gradient(top, #e6e6e6, #bababa);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#bababa', GradientType=0)";
}

/* 修正0046 ここから*/
.button-wht-next {
    color: #333 !important;
    background-color: #e6e6e6;
    background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#bababa));
    background: -moz-linear-gradient(top, #e6e6e6, #bababa);
    background: linear-gradient(to bottom, #e6e6e6, #bababa);
    -pie-background: linear-gradient(top, #e6e6e6, #bababa);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#bababa', GradientType=0)";
}
/* 修正0046 ここまで*/

.button-blue { 
    background-color: #00b1e3;
    background: -webkit-gradient(linear, left top, left bottom, from(#00b1e3), to(#0094be));
    background: -moz-linear-gradient(top, #00b1e3, #0094be);
    background: linear-gradient(to bottom, #00b1e3, #0094be);
    -pie-background: linear-gradient(top, #00b1e3, #0094be);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b1e3', endColorstr='#0094be', GradientType=0)";
}

.button-gray { 
    background-color: #4b4b4b;
    background: -webkit-gradient(linear, left top, left bottom, from( #4b4b4b), to( #4b4b4b));
    background: -moz-linear-gradient(top,  #4b4b4b,  #4b4b4b);
    background: linear-gradient(to bottom,  #4b4b4b,  #4b4b4b);
    -pie-background: linear-gradient(top,  #4b4b4b,  #4b4b4b);
}

.btn{
    width: 100%;
    padding: 18px 0 15px;
    background: #fff url(../img/common/icon_down.png) no-repeat 94% center;
    position: relative;
    text-align:center;
    display:block;
}
.btn:after{
    background-color:#FFF;
    display: block;
    width:100%;
    height:100%;
    position:absolute;
    left:0; top:0;
    content:"";
    opacity: 0;
    -ms-filter: "alpha(opacity=0)";
    -webkit-transition: all 0.2s linear;
         -moz-transition: all 0.2s linear;
            -ms-transition: all 0.2s linear;
             -o-transition: all 0.2s linear;
                    transition: all 0.2s linear;
}
.btn:hover:after{
    opacity: 0.5;
    -ms-filter: "alpha(opacity=50)";
}

.btn-more{
    color :#df2c52; /* 修正0070*/
    font-weight : bold; /* 修正0070*/
    display:none;
    border-top: #dadada solid 1px;
    border-bottom: #dadada solid 1px;
    background-position: 99% center;
    /* background-color: transparent; */   /* 修正0070*/
    background-color: #fff; /* 修正0070*/
}
.over {
    opacity: 1; 
    -ms-filter: "alpha(opacity=100)";
    -webkit-transition: all 0.2s linear;
         -moz-transition: all 0.2s linear;
            -ms-transition: all 0.2s linear;
             -o-transition: all 0.2s linear;
                    transition: all 0.2s linear;
}
.over:hover{ 
    opacity: 0.5;
    -ms-filter: "alpha(opacity=50)";
}

.btn-link{ background: #fff url(../img/common/icon_link.png) no-repeat 94% center; }



/* -----------------------------------
    parts > select
----------------------------------- */
.selectBox {
    position: relative;
    z-index: 0;
}

.custom {
    outline: none;
    text-indent: 0.01px;
    text-overflow: '';
    cursor: pointer;
    text-align: left;
    border: 1px solid #ccc !important;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    behavior: url('/js/PIE.htc');
}

/* 修正0047 */
.custom::-ms-expand { display: none; }

select.custom:-moz-focusring {
    color: transparent; 
    text-shadow: 0 0 0 #000;
}

.basicNum { background: #fff url(../img/common/form_arrow.png) no-repeat right 50%;  }
.cartNum {  background: #fff url(../img/common/form_arrow2.png) no-repeat right 50%;   }
.reseveNum { background: #fff url(../img/common/form_arrow3.png) no-repeat right 50%; }
.deadstockNum { background: #fff url(../img/common/form_arrow4.png) no-repeat right 50%; }

.paddEdit{
    text-align: right;
    margin: 0 0 10px 0; /* 修正0048 */
}






/* -----------------------------------
    header
----------------------------------- */
#header{
    height:60px;
    width: 100%;
    z-index: 300;
    position: relative;
}
#header .cover{
    position:fixed;
    width: 100%;
    height: 100%;
    left: 0; top: 0;
    display:none;
    z-index: 300;
    background-color: #000;
    opacity: 0;
    -ms-filter: "alpha(opacity=0)";
}
#header .menu{
    width: 100%;
    position: absolute;
}
#header .holderFix{
    background: url(../img/common/bg_body.png) center top repeat;
    width: 100%;
    height: 60px;
    min-width:1020px;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 20;
}
#header .holderFix .holderFixInner{
    max-width:1060px;
    position: relative;
    margin: 0 auto;
}
#header .logo{
    z-index:3;
    display:block;
    height:auto;
    width:169px;
    position:absolute;
    left:20px; top:15px;
}
#header .logo a{
    display: block;
}
#header .logo img{
    display: block;
    width: 100%;
}
#header .menuHolder{
    margin: 0 auto;
    position:relative;
    top:0 !important;
    display:block !important;
}
#header .inner{
    margin: 0 auto;
    position:relative;
    height:100%;
}
#header .nav-tools{
    position: absolute;
    top: 17px;
    right: 10px;
    z-index:2;
}
#header .nav-tools li{
    float:left;
}
#header .nav-tools li a{
    font-size: 12px;
    font-weight: bold;
    height: 25px;
    display: inline-block;
    box-sizing:border-box;
    position:relative;
}
#header .nav-tools li a .num{
    background-color: #df4363;
    width: 20px;
    height: 20px;
    
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url('assets/js/PIE.htc');
    
    display: block;
    position:absolute;
    top: -10px;
    right: 0px;
    font-size: 9px;
    text-align: center;
    color: #fff;
    line-height: 20px;
}
#header .nav-tools li.login a,
#header .nav-tools li.member a{
    padding: 0 3px;
}
#header .nav-tools li.member{display: none;}
#header .nav-tools li.news{margin-right: 5px;}
#header .nav-tools li.news a,
#header .nav-tools li.history a,
#header .nav-tools li.cart a{
    background: url(../img/common/header_icon.png) 0 0 no-repeat;
    width: 38px;
}
#header .nav-tools li.news a{background-position:0 0;}
#header .nav-tools li.news a:hover{background-position:0 100%;}
#header .nav-tools li.history a{background-position:-38px 0;}
#header .nav-tools li.history a:hover{background-position:-38px 100%;}
#header .nav-tools li.cart a{background-position:-76px 0;}
#header .nav-tools li.cart a:hover{background-position:-76px 100%;}
#header .nav-global{
    position: absolute;
    width: 100%;
    left: 0;
    top: 16px;
    z-index:1;
}
#header .nav-global > ul > li{
    display:inline-block;
    position:relative;
}
#header .nav-global .m-category:before,
#header .nav-global .m-category:after{
    content: url(../img/common/header_slash.png);
    display: inline-block;
    width: 15px;
    height: 20px;
    vertical-align:bottom;
    margin: 0 10px 1px;
}
#header .nav-global > ul >li > a{
    display: inline-block;
    margin: 1px 10px;
    position: relative;
    top: 5px;
}
#header .nav-global > ul >li.m-list > a{
    background: url(../img/common/header_menu01.png) 0 0 no-repeat;
    background-position: 0 0;
    width: 58px;
    height: 14px;
}
#header .nav-global > ul >li.m-list > a:hover{ background-position: 0 100%; }
#header .nav-global > ul >li.m-category > a{
    background: url(../img/common/header_menu02.png) 0 0 no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 14px;
}
#header .nav-global > ul >li.m-category > a:hover{ background-position: 0 100%; }
#header .nav-global > ul >li.m-search > a{
    background: url(../img/common/header_menu03.png) 0 0 no-repeat;
    background-position: 0 0;
    width: 58px;
    height: 14px;
}
#header .nav-global > ul >li.m-search > a:hover{ background-position: 0 100%; }


/* searchBox */
#header .nav-global .m-search .searchBoxHolder{
    display: none;
    position: absolute;
    top:0;
    width: 130px;
}
#header .nav-global .m-search.show .searchBoxHolder{ 
    display: block; 
}


/* mypagePanel */
#header .navPanel{ 
    display:none;
    position: absolute;
    top: 56px;
    background-color: #666666 ;
    color:#FFF;
    z-index: 100;
}
#header .navPanel a{
    color:#FFF;
}
#header .navPanel a:hover{
    -ms-filter: "alpha(opacity=50)";
    opacity:0.7;
}
#header .navPanel.show{
    display:block;
}
#header .navPanel:before{
    content:"";
    display:block;
    position: absolute;
    //top: -8px; /* 修正0024 */
    top: -7px;
    /* 修正0024 */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 8px 6px;
    border-color: transparent transparent #666666 transparent;
}


/* mypagePanel */
#header #mypagePanel{width: 305px; right:-18px;}
#header #mypagePanel:before{ right:148px; }
#header #mypagePanel li{ border-top:#949494 solid 1px; }
#header #mypagePanel li.first-child{ border-top: none; }
#header #mypagePanel li a{ padding: 1em 0; display: block; }

/* newsPanel */
/* 修正0024 */
//#header #newsPanel{ width: 490px; right:20px; z-index: 301;   top: 56px !important;}
//#header #newsPanel:before{ right:84px; }
//#header #newsPanel ul{ box-sizing:border-box; padding: 45px 60px 60px; }
#header #newsPanel{ width: 490px; right:20px; z-index: 301; top: 56px !important; box-sizing:border-box; padding:45px 30px 60px;}
#header #newsPanel:before{ right:43px; }
#header #newsPanel .scroll-inner{ box-sizing:border-box; padding: 0 30px; overflow:auto; max-height:350px; }
#header #newsPanel ul{  }
/* 修正0024 */

#header #newsPanel li{ text-align: left; border-bottom:#949494 solid 1px; font-size: 12px; padding-bottom: 15px;}
#header #newsPanel .ttl{ font-size: 14px; padding: 15px 0 10px;}
#header #newsPanel .date{ padding-bottom: 3px; }
#header #newsPanel .btn-close{ background: none; border: none; position: absolute; width: 200px; left: 145px; bottom: 15px; z-index:1; cursor: pointer; padding: 10px 0;}
#header #newsPanel .btn-close img{ width: 20px;}

/* cartPanel */
#header #cartPanel{ width: 490px; right:20px; z-index: 301; top: 56px !important;background:#fff;color: #000;}
#header #cartPanel:before{ right:3px; border-color: transparent transparent #fff transparent;}
#header #cartPanel .inner{ padding:30px 20px;}
#header #cartPanel .frame{ max-height: 300px; overflow-y:auto;border-bottom:#949494 solid 1px;}
#header #cartPanel .frame > ul{ box-sizing:border-box; padding: 0;}
#header #cartPanel .frame > ul > li{ text-align: left; border-top:#949494 solid 1px; font-size: 12px; padding: 10px 5px; position:relative; }
#header #cartPanel .frame > ul > li:first-child{ border-top: none; }
#header #cartPanel .frame > ul > li>div{ position:relative;padding-left: 90px;box-sizing:border-box; min-height:80px;}
#header #cartPanel .frame .ttl{  font-size: 14px; font-weight: normal;}
/* 修正0024 */
//#header #cartPanel .frame .photo{ position: absolute;left: 0;top: 0; max-width:80px;max-height:80px;}
//#header #cartPanel .frame .photo img{ height: auto; width: auto; max-height:100%; max-width:100%;}
#header #cartPanel .frame .photo{ position: absolute;left: 0;top: 0; width:80px;height:80px; text-align:center;}
#header #cartPanel .frame .photo img{ height: auto; width: auto; max-height:80px; max-width:80px;}
/* 修正0024 */
#header #cartPanel .frame .limitedList{padding-bottom: 20px;}
#header #cartPanel .frame .limitedList li{font-size: 12px;color: #df2c52; padding: 0 0 2px 0;}
#header #cartPanel .frame .subtotal{ text-align: right; font-size: 14px; position: absolute;bottom: 0;right: 0;}
#header #cartPanel .frame .subtotal .button {padding:2px 10px 2px 9px;font-size: 12px;margin: 0px 17px 0 0;display: inline-block; background:#E4E4E4; }
#header #cartPanel .action .button{ width: 217px; margin: 10px;}
#header #cartPanel .total{ text-align: right; margin: 15px 0; font-size: 14px;}
#header #cartPanel .total span{color: #df2c52; font-size: 16px; font-weight: bold;}




/* loginPanel */
#header #loginRegistPanel{
    position:fixed;
    z-index: 301;
}
#header #loginPanel,
#header #registerPanel{
    position: fixed;
    box-sizing: border-box;
    width: 382px;
    min-height: 350px;
    padding:40px 0 30px;
    background:#e7e7e7;
    font-size: 12px;
    color: #000;
    line-height: 1.5;
    top: 50%;
    margin-top: -175px;
    text-align:center;
}
#header #loginPanel{
    right: 50%;
    margin-right:10px;
}
#header #registerPanel{
    left: 50%;
    margin-left:10px;
}
#loginPanel p,
#registerPanel p{
    width: 300px;
    margin: 0 auto;
    box-sizing: border-box;
}
#header #loginPanel:before,
#header #registerPanel:before{
    content:none;
}
#loginPanel .inner,
#registerPanel .inner{
    position:relative;
}
#header #loginPanel a,
#header #registerPanel a{
    color: #df4363;
    text-decoration: underline;
}
#loginPanel h4,
#registerPanel h4{
    color:#df4363;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 26px;
}
#registerPanel h4{
    margin-bottom: 46px;
}
#loginPanel .option{
    padding-top: 10px;
    color:#000000;
}
#loginPanel .option input[type=checkbox]{
    vertical-align: middle;
    display: inline-block;
    margin-top: -1px;
}

#header input.text{
    padding: 1em;
    width: 300px;
    box-sizing: border-box;
    margin: 5px auto;
    border: none;
    font-size: 14px;
    border-radius: 0;
}
#header .button-pnk-f {
    width: 300px;
    margin: 15px auto;
}

/* ログアウト */
#header .nav-tools li.member{display: none;}

/* ログイン */
#header.login .nav-tools li.login{display: none;}
#header.login .nav-tools li.member{display: block;}



/********** トップページ 縦積み **********/
body#top #header{height: 205px;}
body#top #header .holderFix{
    height: 205px;
}
body#top #header .logo {
    position: absolute;
    display: block;
    top: -52px;
    left: 50%;
    margin: 0 0 0 -224px;
    width: 461px;
    z-index:0;
}
body#top #header .logo a{
    opacity:0;
    -webkit-transition: all 0.3s linear;
         -moz-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
             -o-transition: all 0.3s linear;
                    transition: all 0.3s linear;
}
body#top #header .logo img{ display:none;}
body#top #header .logo .animationLogo{ display:block;}
body#top #header .nav-global{top: 144px; width: 100%;}




/********** トップページ 横積み **********/
body#top #header.slim{ }
body#top #header.slim .holderFix{ 
    height:60px; 
    top:0 !important;
    -webkit-animation: fall-in 0.3s;
    -moz-animation:    fall-in 0.3s;
    -o-animation:      fall-in 0.3s;
    animation:         fall-in 0.3s;
}
body#top #header.slim .logo{
    position:absolute;
    left:20px; top:15px;
    display:block;
    height:auto;
    width:169px;
    margin:0;
}
body#top #header.slim .logo a{ 
opacity: 1; 
}
body#top #header.slim .logo img{ display: block; }
body#top #header.slim .logo .animationLogo{ display: none; }
body#top #header.slim .nav-global{ top: 16px;  width: 100%;}



/* 20170501 */
body #header .tickerArea{
	width: 100%;
	height: 25px;
	position: absolute;
	bottom: -25px;
	left: 0;
	background-color: #b63e3d;
}
body.top #header .tickerArea{
	bottom: 0;
}
body.top #header.slim .tickerArea{
	bottom: -25px;
}
body #header .tickerArea .bx-wrapper{
	width: 100%;
	margin: 0 auto;
}
body #header .tickerArea .ticker {
	width: 100%;
}
body #header .tickerArea .ticker .item{
	display: block;
	float: left;
	color: #c49a63;
	font-weight: bold;
	text-align: center;
	padding: 0 10px;
}
body #header .tickerArea .ticker .item{
	-webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}
body #header .tickerArea .ticker .item:hover{
	opacity: 0.5;
}
/* 20170501 */

/* -----------------------------------
    footer
----------------------------------- */
#page {
    position: relative;
    min-height: 100%;
    box-sizing: border-box;
}

#footer{
    width: 100%;
    position: relative;
    bottom: 0;
    background: url(../img/common/bg_body.png) center top repeat;
    padding-top: 40px;
    margin-top: 80px;
}
#footer .pagetopButton{
    position: absolute;
    right: 0;
    top: -77px;
    width: 104px;
    height:64px;
}
#footer .pagetopButton a{
    padding-top: 40px;
    display: block;
    font-size: 11px;
    text-align: center;
    font-family:Arial, Helvetica, sans-serif;
    background: url(../img/common/footer_pagetop.png) center 10px no-repeat;
}
#footer .pagetopButton a:hover{
    background: url(../img/common/footer_pagetop.png) center -48px no-repeat;
}
#footer .container{
    max-width: 1021px;
    width: 100%;
    //height: 146px; /* 修正0024 */
    margin: 0 auto;
    border-bottom:#cfcfcf solid 1px;
}
#footer .footerTags{
    padding-bottom: 7px;
}
#footer .footerTags ul{
    display: inline-block;
}
#footer .footerTags li{
    display: inline-block;
    margin-bottom: 14px;
}
#footer .footerTags li:before{
    display:inline;
    content:" / ";
}
#footer .footerTags li.first:before{
    content:none;
}
#footer .searchBoxHolder{
    display: inline-block;
    position: relative;
    /*margin-bottom: 33px;*/
    margin-bottom: 33px; /* 修正0024 */
}
#footer .searchBoxHolder .searchBox{
    width: 208px;
}

#footer .footerNav{
    padding: 24px 0;
    height: 73px;
}
#footer .footerNav li{
    display: inline-block;
}
#footer .footerNav li:before{ display:inline; content:" / "; }
#footer .footerNav li.first:before{ content:none; }
#footer .copyright{
    font-size: 10px;
    font-weight: bold;
    font-family:Arial, Helvetica, sans-serif;
    border-top:#cfcfcf solid 1px;
    line-height: 1;
    padding: 24px;
}

/* -----------------------------------
    検索
----------------------------------- */
.searchBoxHolder {
    width: 208px;
    text-align: left;
}
.searchBoxHolder .searchBox{
    width: 100%; /* 修正0024 */  
    border:none;
    padding: 5px 26px 5px 5px;
    box-sizing:border-box;
    height: 28px;
    background: #FFF url(../img/common/icon_search.png) 96% center no-repeat;
}
.searchBoxHolder .btn-submit{
    opacity:0;
    -ms-filter: "alpha(opacity=0)";
    width: 26px;
    height: 28px;
    position:absolute;
    top: 0;
    right: 0;
    cursor:pointer;
    z-index:1;
}
.searchBoxHolder .searchList{
    display: none;
    background-color: #fff;
    position:absolute;
    border:#ccc solid 1px;
    max-height: 150px;
    overflow-y: auto;
}
.searchBoxHolder .searchList.show{
    display: block;
}
.searchBoxHolder .searchList li a{
    text-align: left;
    box-sizing: border-box;
    padding: 5px;
    display: block;
}
.searchBoxHolder .searchList li a:hover{
    background-color: #f1f1f1;
}



/* -----------------------------------
    parts > keyframes
----------------------------------- */
/* keyframes fall-in */
@-webkit-keyframes fall-in {
    0%   { top: -60px; }
    100% { top: 0; }
}
@-moz-keyframes fall-in {
    0%   { top: -60px; }
    100% { top: 0; }
}
@-o-keyframes fall-in {
    0%   { top: -60px; }
    100% { top: 0; }
}
@keyframes fall-in {
    0%   { top: -60px; }
    100% { top: 0; }
}

/* keyframes fade-in */
@-webkit-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-o-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

.fade-out{
    -webkit-animation: fade-out 0.3s;
    -moz-animation:    fade-out 0.3s;
    -o-animation:      fade-out 0.3s;
    animation:         fade-out 0.3s;
}
/* keyframes fade-out */
@-webkit-keyframes fade-out {
    0%   { opacity: 1; display:block; }
    100% { opacity: 0; display:block; }
}
@-moz-keyframes fade-out {
    0%   { opacity: 1;  display:block;}
    100% { opacity: 0;  display:block;}
}
@-o-keyframes fade-out {
    0%   { opacity: 1;  display:block;}
    100% { opacity: 0;  display:block;}
}
@keyframes fade-out {
    0%   { opacity: 1;  display:block;}
    100% { opacity: 0;  display:block;}
}

/* 修正0049 
   修正0050 */
/* 修正130702 */

/* -----------------------------------
    special
----------------------------------- */

#specialHeader {
    background: #fff;
    line-height: 1.4;
}
#specialHeader .layoutInner {
    max-width: 1100px;
    min-width: 980px;
    margin: 0 auto;
    padding: 0 10px;
    text-align: left;
}
#specialHeader .visualColumn {
    float: right;
    text-align: right;
}
/*
#specialHeader .visualColumn .img img {
    visibility: hidden;;
}
*/
#specialHeader .visualColumn .copyright {
    padding: 10px 0;
    color: #5a5a5a;
    font-size: 72%;
}
#specialHeader .textColumn {
    overflow: hidden;
    padding-top: 35px;
}
#specialHeader .title {
    display: table-row;
}
#specialHeader .title .logo,
#specialHeader .title h1 {
    display: table-cell;
    vertical-align: middle;
    padding-bottom: 20px;
}
#specialHeader .title .logo {
    padding-right: 30px;
}
#specialHeader .title h1 {
    display: table-cell;
    font-size: 240%;
    font-weight: bold;
    line-height: 1.3;
}
.tbScreen #specialHeader .title h1 {
    font-size: 200%;
}
#specialHeader .title h1 span {
    font-size: 80%;
}
#specialHeader dl.benefit {
    margin-left: 15px;
    padding-bottom: 25px;
}
#specialHeader dl.benefit dt {
    color: #ff4165;
    font-size: 172%;
    font-weight: bold;
}
#specialHeader dl.benefit dd {
    font-size: 115%;
}
#specialHeader dl.benefit dd ul li {
    margin-top: 10px;
    padding: 0 0 0 28px;
    background: url(../../img/common/icn_circle_pnk.png) 5px 0.35em no-repeat;
}
#specialHeader .cautions {
    clear: both;
    padding: 25px 0;
    background: url(../../img/common/bg_shadow_down.png) left top repeat-x;
}
#specialHeader .cautions dl {
    display: table-row;
}
#specialHeader .cautions dl dt,
#specialHeader .cautions dl dd {
    display: table-cell;
    vertical-align: middle;
    padding: 0 25px;
}
#specialHeader .cautions dl dt {
    padding-right: 39px;
    border-right: dotted 1px #f00;
}
#specialHeader .cautions dl dt span {
    padding: 10px 0 10px 48px;
    background: url(../../img/common/icn_alert_l.png) left center no-repeat;
    color: #ff0000;
    font-size: 143%;
    font-weight: bold;
}
#specialHeader .cautions dl dd {
    overflow: hidden;
    font-size: 115%;
}
#specialHeader .cautions dl dd ul {
    position: relative;
    margin: -8px 0;
    font-weight: bold;
}
#specialHeader .cautions dl dd ul li {
    margin: 8px 0;
    padding-left: 20px;
    background: url(../../img/common/icn_circle_gry.png) 0 0.4em no-repeat;
}
#specialHeader .spCopyright {
    display: none;
}
/* //修正130702 */

/* 修正0051 ここから */

/* 会社概要
----------------------------------------------------*/

/* 修正0052 ここから */
.companyInner {
    background-color:#fff;
    padding:20px 20px 0px 20px;
}
/* 修正0052 ここまで */

.companyTitle {
    overflow:hidden;
    padding:5px 15px 0;
    /* 修正0052 ここから */
    /* background:#f3f3f3; */
    /* 修正0052 ここまで */
}

.companyTitle h1 {
    float:left;
    font-size:129%;
}

.companyTitle p {
    float:right;
    padding-top:3px;
}

.companyInfo {
    overflow:hidden;
    padding:10px 15px 5px;
    border-bottom:1px dotted #ccc;
}

.companyInfo dt {
    clear:both;
    float:left;
    width:85px;
    font-weight:bold;
}

.companyInfo dd {
    float:left;
    width:700px;
}

.lastInfo {
    padding-bottom:30px;
    border-bottom:none;
}

.executiveList {
    overflow:hidden;
    padding-top:5px;
}

.executiveList dt {
    clear:both;
    float:left;
    width:115px;
    padding-bottom:5px;
}

.executiveList dd {
    float:left;
    width:200px;
    padding-bottom:5px;
}

/* .greetingTitle, */
.historyTitle {
    padding:5px 15px 0px;
    font-size:126%;
    background:#F3F3F3;
}

.greetingTitle{
    padding:5px 15px 0px;
    font-size:126%;
    /* 修正0052 ここから */
    /* background:#F3F3F3; */
    /* 修正0052 ここまで */
}



.greetingSubtitle {
    padding: 15px 15px 5px;
}

.greetingText {
    padding:0 15px 20px;
}

.historyList {
    padding-top:20px;
    color:#333333;
}

.historyList li {
    overflow:hidden;
    padding:10px 15px 5px;
    border-bottom:1px dotted #ccc;
}

.historyList li h3 {
    float:left;
    width:100px;
    font-size:100%;
}

.historyList li p {
    float:left;
    width:830px;
}

.historyList .lastElem {
    border-bottom:none;
}


/* 配送料と支払い方法
----------------------------------------------------*/

/* 修正0052 ここから */
.howInner {
    background-color:#fff;
    padding:0px 20px 0px 20px;
}
/* 修正0052 ここまで */

.howTitle {
    overflow:hidden;
    padding:5px 10px 0;
    background:#f3f3f3;
}

.howTitle h1 {
    float:left;
    font-size:129%;
}

.howTitle p {
    float:right;
    padding-top:3px;
}

.howtoText {
    padding:20px 10px;
    line-height:1.5em;
}

.howtoText2 {
    padding:0 10px 30px;
    line-height:1.5em;

}

.howtoText3 {
    padding:10px 25px 30px;
    line-height:1.5em;
}

.howtoText span {
    font-size:86%;
}

.caseTitle {
    padding:0 10px;
    margin-left:1.0em;
    text-indent:-1.0em;
    margin-top: 20px;
}

.caseTitle span {
    padding-left:10px;
    border-left:4px solid #000;
}

.chargeList {
    margin-top:15px;
    margin-left:10px;
    width:380px;
}

.chargeList li {
    overflow:hidden;
    padding: 10px 15px 5px;
    /* width:350px; */ /* 修正0043 */
    border-bottom:1px dotted #ccc;
}

.chargeList li.firstElem {
    border-top:1px dotted #ccc;
}

.chargeList h3 {
    clear:both;
    float:left;
    width:150px;
}

.chargeList p {
    float:left;
    width:200px;
}

.txtChargeAttent {
    margin-left:1.0em;
    padding:15px 10px 20px;
    text-indent:-1.0em;
    font-size:86%;
}

/* プライバシーポリシー
----------------------------------------------------*/

/* 修正0052 ここから */
.privacyInner {
    background-color:#fff;
    padding:15px 20px 0px 20px;
}
/* 修正0052 ここまで */

.pricacyLink{
    margin:20px 0;
    text-align: right;

}

.privacyTitle {
    padding:5px 10px 0;
    background:#f3f3f3;
    font-size:129%;
}

.privacyTitle span {
    font-size:79%;
}

.dateList {
    padding:8px 0 15px;
    font-size:86%;
    line-height:1.6em;
    text-align:right;
}

.privacyText {
    padding-left:10px;
    padding-bottom:20px;
    line-height:1.5em;
}

.privacyText2 {
    padding-left:10px;
    padding-bottom:10px;
    line-height:1.5em;
}

.privacyText3 {
    padding-left:10px;
    padding-bottom:20px;
    font-size:86%;
}

.privacyList {
    padding:10px 10px 30px;
}

.privacyList dt {
    padding-bottom:5px;
    font-weight:bold;
}

.privacyList dd {
    padding-bottom:15px;
    line-height:1.5em;
}

/* プライバシーポリシー　法的開示
----------------------------------------------------*/

#privacy .list_level1{
margin-left: 40px;
}

#privacy .list_level2{
margin-left: 80px;
}

#privacy .head-caption{
    text-align: center;
}
#privacy h3,
#privacy h4{
    margin-top: 20px;
}
#privacy .list_level1,
#privacy .list_level2{
margin-bottom: 10px;
}

#privacy .contact{
border: solid #ccc 1px;
    margin: 10px 0 ;
    padding: 15px;
}

#privacy .text-right{
    text-align: right;
}

/* 開示等請求の手続きについて
----------------------------------------------------*/


#privacy table.box {
    border-left: 1px solid #AFAFAF;
    border-top: 1px solid #AFAFAF;
    margin: 10px 0 10px 20px;
    width: 240px;
}

#privacy table.box td {
    border-bottom: 1px solid #AFAFAF;
    border-right: 1px solid #AFAFAF;
    padding: 10px;
    text-align: center;
}

/* 特定商取引法に基づく表示
----------------------------------------------------*/

#asct .content {
    padding-bottom: 20px;
}
#asct .content h2 {
    margin: 0 10px 20px 10px;
    padding-left: 10px;
    border-left:4px solid #000;
    font-size: 129%;
    line-height: 1.2;
}
#asct .content h2.second {
    margin-top: 40px;
}
#asct .content p {
    margin: 1em 10px;
}
#asct .content dl {
    margin: 0 10px;
    padding: 15px 0;
    border-bottom: dotted 1px #ccc;
    line-height: 1.5;
}
#asct .content dl dt {
    font-weight: bold;
}
#asct .content dl dd {
    margin-top: -1.5em;
    margin-left: 14em;
}
#asct .content dl dd span {
    font-size: 86%;
    line-height:1.3em;
}
#asct .content dl.line2 dd {
    margin-top: -3em;
}

#asct .content dl.company_info {
    overflow:hidden;
}

#asct .content dl.company_info dt {
    float:left;
    width: 200px;
}
#asct .content dl.company_info dd {
    float:left;
    margin:0;
    width: 585px;
}

#asct .priceTable {
    margin-top:20px;
    width:350px;
}

#asct .priceTable th,
#asct .priceTable td {
    width:100px;
}

/* 修正0051 ここまで */