@charset "UTF-8";

/*------------------------------------------------------------
CSS Document

Machie's 商品一覧用CSS

MAKING 171130 sim_mano
-------------------------------------------------------------*/


/*------------------------------------------------------------
CSSの構造

・並べ替え
・アイテム一覧
・ページネーション
-------------------------------------------------------------*/
/*------------------------------------------------------------
商品検索エリアありの場合のスタイル
-------------------------------------------------------------*/
#contents {
padding:100px 0 0px 0;
}

@media screen and (max-width: 799px){
#contents {
padding:0 0 60px 0;
}
}








#topicpath li:nth-child(1):after{
content: "" !important;
}

/*------------------------------------------------------------
並べ替え
-------------------------------------------------------------*/

#list_header_menu li:first-child{
display: none;
}

#list_header_menu li:last-child{
display: block;
}

#result_info_box{
margin-bottom: 10px;
}

#result_info_box__menu_box{
float: right;
}

#result_info_box__menu li{
font-size: 12px;
color: #fff;
}

#result_info_box__menu li select{
border-radius: 0px !important;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #000;
font-size: 12px;
height: 30px;
padding-right: 20px;
background: #fff;
}


/*------------------------------------------------------------
アイテム一覧
-------------------------------------------------------------*/


ul#item_list > li{
width: 100%;
min-height: 160px;
background: #fff;
margin-bottom: 20px;
padding: 20px 0 20px 20px;
color: #000;
display: table;
}

ul#item_list h2,
ul#item_list li,
ul#item_list a,
ul#item_list p{
color: #7a6a55;
}

ul#item_list > li .item-description,
ul#item_list > li .item-price{
display: table-cell;
}

/*写真*/

ul#item_list > li .item_photo{
display: block;
float: left;
width: 33%;
height: 100%;
padding-right: 20px;
margin: 0;
}

ul#item_list > li .item_photo a{
vertical-align: middle;
}

/*商品タイトル・説明*/

ul#item_list h2{
font-size: 15px;
margin: 0;
vertical-align: top;
}

ul#item_list > li .item-description{
margin: 0;
vertical-align: top;
border-right:1px solid #000;
padding-right: 20px;
}

ul#item_list > li .item-description p{
font-size: 12px;
display: inline-block;
visibility:hidden;
max-width: 100%;
line-height: 1.5em;
padding-bottom: 10px;
}

ul#item_list > li .item-description-text{
display: block;
float: right;
width: 67%;
height: 100%;
}

/*商品タグ*/
ul#item_list > li .product_tag{
/* height: 24px; */
line-height: 1em;
}

.product_tag_list{
background: #f00;
color: #fff;
font-size: 8px;
line-height: 16px;
height: 16px;
border: none;
border-radius: 0px;
vertical-align: top;
}

/*商品カテゴリ*/
ul#item_list > li #category-list {
display: inline-block;
float: left;
width: 100%;
margin: 5px 0 10px 0;
}

ul#item_list > li #category-list > li{
padding-right: 15px;
}

ul#item_list > li #category-list li{
display: inline-block;
float: left;
line-height: 15px;
}

ul#item_list > li #category-list > li:first-child,
ul#item_list > li #category-list > li:nth-child(3),
ul#item_list > li #category-list > li:nth-child(5){
display: none;
}

ul#item_list > li #category-list li a{
font-size: 11px;
line-height: 15px;
vertical-align: middle;
}

ul#item_list > li #category-list li ul li:first-child a{
text-decoration: none;
}

ul#item_list > li #category-list li ul li:last-child a{
text-decoration: underline;
}

ul#item_list > li #category-list li ul li:first-child:after{
content: "：";
font-size: 11px;
line-height: 15px;
vertical-align: middle;
}

/*価格・詳細ボタン*/

ul#item_list > li .item-price{
position: relative;
width: 25%;
margin: 0;
text-align: center;
}

ul#item_list > li .item-price span{
font-size: 14px;
margin-left: 1em;
    display: inline-block;
}

ul#item_list > li .item-price .text-danger{
position: absolute;
bottom: 50px;
right: 0;
width: 100%;
font-size: 12px;
}

ul#item_list > li .item-price .price{
font-family: "arno-pro-display",serif;
font-size: 24px;
position: absolute;
top: 50px;
right: 0;
width: 100%;
display: block;
}

ul#item_list > li .item-price .link-btn{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
display: block;
}

ul#item_list > li .item-price .link-btn a{
    width: 160px;
    height: 34px;
    /* padding: 10px; */
    vertical-align: middle;
    color: #FFF;
    background: #000;
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    line-height: 34px;
transition: 0.3s;
}

ul#item_list > li .item-price .link-btn a:hover{
text-decoration: none;
opacity: 0.7;
}


@media only screen and (max-width: 1099px) {

ul#item_list{
margin: 0 16px;
}

}

@media only screen and (max-width: 767px) {

ul#item_list > li{
padding: 20px 20px 20px 20px !important;
}

ul#item_list > li .item_photo{
display: none;
}

ul#item_list > li .item_photo_sp{
display: block;
float: left;
width: 40%;
max-width: 146px;
padding:0 16px 10px 0;
}

ul#item_list > li .item-description,
ul#item_list > li .item-price{
display: inline-block;
width: 100%;
}

ul#category-list li:last-child,
ul#item_list > li .item-description p{
display: none !important;
}


ul#item_list > li .item-description{
padding-bottom: 100px;
border-right: inherit;
border-bottom: 1px solid #000;
padding: 0;
}

ul#item_list > li .item-description-text{
width: 100%;
padding: 0;
}

ul#item_list > li .item-price{
padding-top: 25px;
vertical-align: middle;
}

ul#item_list > li .item-price .link-btn{
width: 130px;
bottom: inherit;
right: inherit;
left: 0;
top: inherit;
position: inherit;
}

ul#item_list > li .item-price .link-btn a{
width: 100%;
height: 50px;
font-size: 15px;
line-height: 50px;

}

ul#item_list > li .item-price .price{
width: 200px;
bottom: 20px;
text-align: right;
right: 0;
/* left: 0; */
}

ul#item_list > li .item-price .text-danger{
width: 150px;
bottom: 0;
text-align: right;
}


ul#item_list > li .item-price span{
font-size: 12px;
font-size: 2.6vw;
margin-left: .5em;
}

}


@media only screen and (max-width: 499px) {

ul#item_list > li .item-price .price{
width: inherit;
text-align: right;
position: inherit;
bottom: inherit;
top: inherit;
right: inherit;
left: inherit;
margin-bottom: 25px;
}

ul#item_list > li .item-price .link-btn{
width: 100%;
}

}

/*------------------------------------------------------------
ページネーション
-------------------------------------------------------------*/

.pagination ul li a{
font-size: 12px;
}

.pagination ul li.active a{
background: none;
}

.pagination ul li a{
color: #fff;
line-height: 1.3em;
}

.pagenation__item-next{
border: 1px solid #fff;
}

.pagination ul li a:hover{
background: none;
opacity: 0.8;
}

.pagination ul li.active a:hover{
background: none;
}

.item_photo_sp{
display: none;
}