/***************************************************
*2018.12.25 add
****************************************************/
.hidden_box {
    margin: 0 2% 0 0;
    padding: 0;
    float:right;
}

.detail_btn {
    padding: 15px 9px;
    color: #ffffff;
    border-radius:4px;
    background-color: #d51c29;
    cursor :pointer;
}

.detail_btn:hover {
    background: #de2532;
}

.hidden_box input {
    display: none;
}

/*boxを非表示に*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    /*transition: 0.8s;*/
}

/*クリックでbox表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
    position:absolute;
    width:230px;
    margin-left:-224px;
    background-color:#ffffff;
    border:1px solid #dcdcdc;
    border-radius:0 0 4px 4px;
}

#product-list .box .box_head .label {
    display: table-cell;
    font-size: 85%;
    line-height: 1.2;
    vertical-align: middle;
}
#product-list .box .box_head .label:nth-of-type(2) {
    width: 110px;
}

@media screen and (max-width: 640px) {
    #product-list .box .box_head .label:nth-of-type(2) {
        width: 78px;
    }
}

#product-list .box .box_body .detail{
    height:100%;
}

#product-list .box .box_body .detail a{
    text-decoration:underline;
}

.box_body .detail .closr_text{
    padding:0;
    color: #000000;
    border-radius:0;
    background-color: none;
    cursor :pointer;
    
    position: absolute;
    right: 1.5em;
}


/*閉じるボタン右寄せ*/
#product-list .box .box_body .detail {
    position: relative;
}

@media screen and (max-width: 640px) {
.hidden_box label {
    padding: 15px 6px;
}
#product-list .box .box_head .label{font-size:72%;}
#product-list .box .box_head .icon{width:27%;}

.hidden_box input:checked ~ .hidden_show {
    width:43.3%;
    margin-left:-42.3% !important;
	z-index: 7000;
}
    
.box_body .detail .closr_text{
    right: 1em;
}

/* safari表示崩れ対策 */
_::-webkit-full-page-media, _:future, :root .hidden_box input:checked ~ .hidden_show {
		margin-left:0 !important;
}

}

/***************************************************
*2019.01.16 add
****************************************************/
@media screen and (max-width: 350px) {
#content {padding: 0;}
#product-list .box .box_head .icon{width: 23%;}
.hidden_box input:checked ~ .hidden_show {
    width:46.3%;
    margin-left:-45.3% !important;
}

}
/***************************************************
*2019.03.27 add
****************************************************/
.btn_tres{
    display: flex;
}
@media screen and (max-width: 640px){
    .btn_tres{
        display: block;
    }
}