@charset "UTF-8";

/*
商品詳細
*/


/*
#productSection
*/
#productSection{
    display: block;
    margin: 0 auto;
    padding: 0;
}

/*
#prodcutDetail
*/
#prodcutDetail{
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    font-size: 1.2rem;
}




input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"]{
color: #666;
}
input::-webkit-input-placeholder{ color: #999;}
input::-moz-placeholder{ color: #999;}
input:-ms-input-placeholder{ color: #999;}


/*
ポイントお知らせエリア
*/
.detail_headmsg_point {
    position: relative;
    width: 100%;
    background-color: #fff;
    margin: 0px auto 15px;
    padding: 6px 8px 6px 32px;
    font-size: 1.2rem;
    text-align: left;
    border-bottom: solid 1px #ddd;
    line-height: 1.618  ;
    letter-spacing: 0.075em;
    color: #333;
    display: none !important;
}

.detail_headmsg_point span{
    font-size: 14px;
    color: #b71b48;
    line-height: 2.4rem;
}

div.detail_headmsg_point .rank
{
    position: absolute;
    left: 9px;
    top: 9px;
    height: 19px;
    width: 16px;
    background-position: 0px center;
    background-size: auto 100%;
    display: block;
    z-index: 10;
    padding: 0;
    margin: 0;
}

div.detail_headmsg_point.PLATINUM .rank{background-image: url(../../Contents/ImagesPkg/mypage/icon_rank_platinum.svg);}
div.detail_headmsg_point.GOLD .rank{background-image: url(../../Contents/ImagesPkg/mypage/icon_rank_gold.svg);}
div.detail_headmsg_point.SILVER .rank{background-image: url(../../Contents/ImagesPkg/mypage/icon_rank_silver.svg);}
div.detail_headmsg_point.BRONZE .rank{background-image: url(../../Contents/ImagesPkg/mypage/icon_rank_bronze.svg);}
div.detail_headmsg_point.REGULAR .rank{background-image: url(../../Contents/ImagesPkg/mypage/icon_rank_regular.svg);}

.breadcrumbs
{
    display: none;
}



/*
  #nameBox
*/
#nameBox h1 {
    margin: 8px 0 0 0;
    font-size: 2.0rem;
    line-height: 1.618;
    letter-spacing: 0.075em;
}

#nameBox h2{
    display: block;
    margin: 8px 0 0 0;
    text-align: left;
    font-size: 1.20rem;
    line-height: 1.28;
    letter-spacing: 0.075em;
}



/*
#reviewStarBox
*/
#reviewStarBox {
    padding: 0;
    margin: 0;
}

#reviewStarBox div.itemStar {
    position: relative;
    padding: 0;
    margin: 8px 0 0;
}

#rating-data {
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #ddd;
    font-size: 1.6rem;
}

#rating-data span.count {
    position: absolute;
    left: 84px;
    top: 3px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #666;
}
#rating-data span.count a{
    text-decoration: underline;
}

#rating-data em.date {
    font-size: 1.0rem;
    margin: 0 0px 0 5px;
    color: #999;
}


.point_area {
    width: 100%;
    background-color: #efefef;
    margin: 20px auto 0;
    padding: 14px;
    font-size: 1.4rem;
    color: #383838;
    text-align: center;
    border: saddlebrown;
    line-height: 1.618  ;
    letter-spacing: 0.075em;
}


.point_area a {
    display: block;
    text-decoration: underline;
    font-size: 1.2rem;
    color: #333;
    margin: 5px 0  0 0;
    text-align: center;
}

.return_point_area {
    position: relative;
    font-size: 1.2rem;
    color: #333;
    padding: 0px 0 8px;
    letter-spacing: 0.01rem;
}

.return_point_area .point
{
    display: inline-block;
}
.return_point_area .return
{
    display: inline-block;
    font-size: 1.2rem;
}



.return_point_area.basic .rank
,.return_point_area.cycle .rank
{
    position: absolute;
    left: 0px;
    top: 2px;
    height: 19px;
    width: 16px;
    background-position: 0px center;
    background-size: auto 100%;
    display: block;
    z-index: 10;
    padding: 0;
    margin: 0;
}


.return_point_area.basic.PLATINUM .rank
,.return_point_area.cycle.PLATINUM .rank
{background-image: url(../../Contents/ImagesPkg/mypage/icon_rank_platinum.svg);}

.return_point_area.basic.GOLD .rank
,.return_point_area.cycle.GOLD .rank
{background-image: url(../../Contents/ImagesPkg/mypage/icon_rank_gold.svg);}

.return_point_area.basic.SILVER .rank
,.return_point_area.cycle.SILVER .rank
{background-image: url(../../Contents/ImagesPkg/mypage/icon_rank_silver.svg);}

.return_point_area.basic.BRONZE .rank
,.return_point_area.cycle.BRONZE .rank
{background-image: url(../../Contents/ImagesPkg/mypage/icon_rank_bronze.svg);}

.return_point_area.basic.REGULAR .rank
,.return_point_area.cycle.REGULAR .rank
{background-image: url(../../Contents/ImagesPkg/mypage/icon_rank_regular.svg);}



 #tag_hanbaimei {
    font-size: 1.0rem;
    color: #666;
    padding: 8px;
    background-color: #fbfbfb;
    margin: 0 0 0 0;
}



/*
#priceBox
*/
#priceBox {
    margin: 16px 0 0;
    padding: 0;
    display: none;
}

#priceBox .price {
    position: relative;
    display: block;
    text-align: left;
    line-height: 1;
    padding: 0;
}

#priceBox .price > dl{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

    position: relative;
    padding: 4px 0;
    margin: 0 0 8px 0;
    letter-spacing: 0.024em;
}

#priceBox .price > dl > dt{
    padding: 0px 6px 6px 0px;
    margin: 0;
    text-align: left;
}

#priceBox .price > dl > dd{
    position: relative;
}


#priceBox .price > dl > dd > span.peroff {
    position: absolute;
    top: 0;
    padding: 4px 6px;
    margin: 0 0 0 8px;
    font-size: 1.1rem;
    line-height: 1.3rem;
    text-align: center;
    background: #fff;
    font-weight: 700;
    border: solid 2px #333;
    font-weight: 700;
    width: 120px;
}
#priceBox .price > dl > dd > span.tologin {
    position: absolute;
    top: 0;
    padding: 6px 6px;
    margin: 0 0 0 16px;
    font-size: 1.1rem;
    line-height: 1.3rem;
    text-align: center;
    background: #fff;
    font-weight: 700;
    border: solid 1px #999;
    font-weight: 700;
    width: 140px;
    background-color: #fff;
    color: #000;
}
#priceBox .price > dl > dd > span.tologin a{
    color: #b81649;
    text-decoration: underline;
    text-decoration-color: #b81649;
}
#priceBox p.pricecaution {
    margin: 12px 0px 0 0;
    text-align: left;
    color: #999;
    font-size: 1.0rem;
    font-weight: 300;
}

#priceBox .price > dl.normal{color: #333333;}
#priceBox .price > dl.sale{color: #b81649;}
#priceBox .price > dl.sale > dd > span.peroff {border-color:#b81649;}
#priceBox .price > dl.cycle {color: #128e52;}
#priceBox .price > dl.cycle > dd > span.peroff {border-color:#128e52;}








#rating-data{
position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #ddd;
    font-size: 1.6rem;
}

#rating-data:before, 
#rating-data:after{
    content: '★★★★★';
}

#rating-data:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #666;
}


#rating-data[data-ratingvalue="5"]:after{ width: 100%; } /* 星5 */
#rating-data[data-ratingvalue="4.5"]:after{ width: 90%; } /* 星4.5 */
#rating-data[data-ratingvalue="4"]:after{ width: 80%; } /* 星4 */
#rating-data[data-ratingvalue="3.5"]:after{ width: 70%; } /* 星3.5 */
#rating-data[data-ratingvalue="3"]:after{ width: 60%; } /* 星3 */
#rating-data[data-ratingvalue="2.5"]:after{ width: 50%; } /* 星2.5 */
#rating-data[data-ratingvalue="2"]:after{ width: 40%; } /* 星2 */
#rating-data[data-ratingvalue="1.5"]:after{ width: 30%; } /* 星1.5 */
#rating-data[data-ratingvalue="1"]:after{ width: 20%; } /* 星1 */
#rating-data[data-ratingvalue="0.5"]:after{ width: 10%; } /* 星0.5 */
#rating-data[data-ratingvalue="0"]:after{ width: 0%; } /* 星0 */







p.cartin_specal {
    margin: 0;
    font-size: 1.0rem;
    width: 100%;
    padding: 8px 8px 0px 8px;
}



.btnBasic,
.btnSubscription{
    position: relative;
}


.btnSubscription > a{
    background: none;
    background-color: #b71b48;
}




.detailDescription3{
    padding-top: 0px;
}





/** detailCartBox **********/


/** quantitySelect **********/



#detailCartBox dl.quantitySelect > dd > button.quantityDown {
    left: 0;
}
#detailCartBox dl.quantitySelect > dd > button.quantityUp {
    right: 0;
}
#detailCartBox dl.quantitySelect > dd > button.quantityDown::before,
#detailCartBox dl.quantitySelect > dd > button.quantityUp::before,
#detailCartBox dl.quantitySelect > dd > button.quantityUp:after{
    content: '';
    display: block;
    width: 12px; 
    height: 2px;
    background: #333;
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 7px);
}

#detailCartBox dl.quantitySelect > dd > button.quantityUp:after{
    transform: rotate(90deg);
}



/** spec **********/
.spec{
    display: block;
    margin-top: 12px;
}


#prodcutDetail .spec > ul{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    margin-top: 0px;
}

#prodcutDetail .spec > ul > li{display: none;}

#prodcutDetail .spec > ul > li.active{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: calc((100% - 40px) / 5);
    height: 64px;
    width: 64px;
    margin: 0 6px 0 0;
    background: #fbfbfb;
    border-radius: 32px;
    border: 1px solid #333;
    padding: 6px 0px;
    color: #ffffff;
    font-size: 1.2rem;
}
#prodcutDetail .spec > ul > li.active:nth-of-type(5n){margin-right: 0;}

#prodcutDetail .spec > ul > li img{
    display: block;
    width: 100%; height: auto;
}

#prodcutDetail .spec > ul > li > span{
    display: block;
    width: 100%;
    text-align: center;
    color: #333333;
    font-weight: 700;
    line-height: 1.16667;
}

#prodcutDetail .spec > ul > li > span > span{
    display: block;
    text-align: center;
}
#prodcutDetail .spec > ul > li > span > span.ml-10{ font-size: 1.0rem;}
#prodcutDetail .spec > ul > li > span > span.ml-14{ font-size: 1.4rem;}
#prodcutDetail .spec > ul > li > span > span.ml-18{ font-size: 1.8rem;}

#prodcutDetail .spec > ul > li sup{vertical-align: super; font-size: 1.0rem;}




/** itemCap **********/




/** detailDescription **********/
 #detailDescription1 {
}

#detailDescription1 img{max-width: 100%;}


.detailDescription3{
    display: block;
    width: 100%;
    /* padding-top: 40px; */
}

.detailDescription3 img{max-width: 100%;vertical-align: bottom;}


#recommendarea{
    display: none;
}










/**************************************
errMsg
**************************************/
.cartBoxError{}

.error{display: block; font-size: 12px; line-height: 1.4; color: #bd1b21; font-weight: 700; margin-top: 5px;}
.error_inline{display: block; font-size: 12px; line-height: 1.4; color: #bd1b21; font-weight: 700; margin-top: 5px;}
.errMsg{display: block; font-size: 12px; line-height: 1.4; color: #bd1b21; font-weight: 700; margin-top: 5px;}

.error:nth-child(1),
.error_inline:nth-child(1),
.errMsg:nth-child(1){margin-top: 0;}

.cartBoxError .error:nth-last-of-type(1),
.cartBoxError .error_inline:nth-last-of-type(1),
.cartBoxError .errMsg:nth-last-of-type(1){padding-bottom: 20px;}








/*

*/


/**/
div#recommendarea {
    margin: 0;
    font-size: 12px;
}

#dvRecommend h3{
    display: none;
}

.recommendItems {
    display: block;
    width: 100%;
    margin: 26px auto;
    padding: 0 20px;
}

.recommendItems h2.recommendTtl {
    font-size: 1.6rem;
    border-bottom: solid 1px #ccc;
    padding: 0 0 8px 0;
}

.recommendItems .dv_recommend .dv_rc_items .dv_rc_name {
    font-size: 1.0rem;
}
.recommendItems .dv_recommend .dv_rc_items .dv_rc_price {
    font-size: 1.2rem;
}

.formTable > dl.required > dt::after {
    display: none;
}



#detailCartBox .cartInBtnArea {
    padding: 0 0 0;
}

#detailCartBox .cartInBtnArea .price {

}

#detailCartBox .cartInBtnArea .price .name{
    display: block;
    margin-bottom: 0px;
    font-size: 1.4rem;
}



#detailCartBox span.peroff{
position: absolute;
    top: 20px;
    left: 72px;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1.3rem;
    text-align: center;
    font-weight: 500 !important;
    /* border: solid 1px #fff; */
    /* font-weight: 700; */
    z-index: 10;
    color: #ffffff;
    display: inline-block;
    font-family: Helvetica;
    z-index: 10;
}
#detailCartBox span.peroff em {
    display: block;
    font-size: 1.1rem;
}


#detailCartBox .cartInBtnArea.basic {color: #b81649;}
#detailCartBox .cartInBtnArea.cycle {
    color: #128e52;
    border: solid 1px #bbb;
    margin: 16px 0 0 0;
    padding: 16px;
}


#detailCartBox .cartInBtnArea.basic span.peroff{}
#detailCartBox .cartInBtnArea.cycle span.peroff{
        left: 56px;
}

.exeBtn {
    position: relative;
}




/*
PC
*/
@media screen and (min-width: 780px) {


    #prodcutDetail{
        position: relative;
        justify-content: space-between;
        display: flex;
    }


    .detail_headmsg_point {
        margin: 0px auto 0;
        padding: 4px 0;
        font-size: 1.4rem;
        text-align: center;
        color: #333;
        background-color: #f8f8f8;
        border:none;
        display: none !important;
    }

    #prodcutDetail .datawrap{
        margin: 0;
        padding: 0;
    }





    #detailCartBox {
/*
        display: block;
        width: 320px;
        margin-top: 0px;
        padding: 24px 16px;
        background-color: #f8f8f8;
        border: #f0f0f0 solid 1px;
        right: 0;
        top: 0;
*/
        order: 3;
    }

    #prodcutDetail .icons > li {
        font-size: 1.2rem;
        padding: 2px 8px;
    }

    #nameBox h1 {
        font-size: 2.4rem;
    }

    #nameBox h2 {
        font-size: 1.8rem;
    }

    #reviewStarBox div.itemStar {
        margin: 16px 0 0;
    }

    #rating-data {
        font-size: 1.8rem;
    }

    #rating-data span.count {
        left: 96px;
        top: 2px;
        font-size: 1.4rem;
    }

    #priceBox .price > dl > dt {
        font-size: 1.4rem;
    }


    #priceBox .price > dl > dd > span.peroff {
        top: 2px;
        left: 160px;
    }
    #detailCartBox .cartInBtnArea.basic span.peroff{
        left: 176px;
    }
    #detailCartBox .cartInBtnArea.cycle span.peroff {
        left: 160px;
    }

    #priceBox p.pricecaution {
        margin: 8px 0px 0 0;
        font-size: 1.2rem;
    }



    #prodcutDetail .spec {
        margin-top: 24px;
    }
    .detailDescription3 {
        width: 1080px;
        margin: 0 auto;
    }

    #detailCartBox dl.colorSelect > dd > ul > li > a {
        font-size: 1.4rem;
    }



}



/* SERVICE AREA */
#service {
    margin: 0 0 0 0;
    padding: 8px 0 0;
    line-height: 1.618;
    letter-spacing: 0.075em;
}
#service .cycleguidebox{
    margin: 0 0 0;
    padding: 16px 0;
    /* border: solid 3px #eee; */
    background-color: #f8f8f8;
    font-family: "ヒラギノ角ゴ W5 JIS2004", "Hiragino Kaku Gothic W5 JIS2004",sans-serif;
}

#service .cycleguidebox .ttl {
    text-align: center;
    font-size: 1.2rem;
    padding: 0 0 16px 0;
    /* color: #666; */
}

#service .cycleguidebox ul{
    margin:0;
    display: flex;
    justify-content: space-between;
}

#service .cycleguidebox ul li {
    margin:0;
    padding:0;
    text-align: center;
}
#service .cycleguidebox ul li p{
    border: solid 3px #969696;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    text-align: center;
}
#service .cycleguidebox ul li img {
    width: 32px;
    display: block;
    margin: 21px auto 0;
}
#service .cycleguidebox ul li span {
    display: block;
    margin: 4px auto 0;
    font-size: 1.2rem;
    line-height: 16px;
    letter-spacing: 0.08rem;
}
#service .caution {
    font-size: 0.8rem;
    text-align: right;
    color: #999;
    margin: 0 0 0;
}
#service .menubox{

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#service .menubox li{
    width: 48%;
    padding: 0 0 8px 0;
}

#service .menubox li:nth-child(1),
#service .menubox li:nth-child(3){
    margin: 0 1% 0 0;
}
#service .menubox li:nth-child(2),
#service .menubox li:nth-child(4){
    margin: 0 0 0 1% ;
}

#service .menubox a {
    position: relative;
    display: block;
    text-align: center;
    border-bottom : 1px solid #ccc;
    font-size:  1.2rem;
    padding: 8px 0;
}


#service .menubox a::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 1px #333 solid;
    border-bottom: 1px #333 solid;
    transform: rotate(-45deg);
    position: absolute;
    top: 10px;
    right: 4px;
}

.ml-about-item .ml-heading-2{
    display: none;
}