/* 全体 */
main>section>*{padding: 0 30px 30px;}
.row:before{content:none;}
.col{word-break: normal;}

h1.heading{padding-top: 30px; font-size: 1.2em; max-width: 380px; margin: 0 auto 10px; border-bottom: 1px solid #a1a1a1;}
.coffee_list_exp{max-width: 380px; margin: 0 auto;}

ul.category-list{text-align: center; margin: 20px 38px 80px;}
ul.category-list li {position: relative; max-width: 300px; margin: 0 auto 20px;}
ul.category-list li:before{content:""; display: block; position: absolute; top: 50%; left: -38px; width: 33px; height: 17px; background:url(https://contents.vidacafetera.com/images/our_coffee_left.svg) no-repeat; transform: translateY(-50%);}
ul.category-list li:after{content:""; display: block; position: absolute; top: 50%; left: auto; right: -38px; width: 33px; height: 17px; background:url(https://contents.vidacafetera.com/images/our_coffee_right.svg) no-repeat; transform: translateY(-50%);}

ul.product_ul{display: flex; flex-wrap: wrap; margin: 0 -10px 30px;}
.product_ul li{position: relative; padding: 0 10px 30px; margin-bottom: 20px;}
.product_ul li .text_area{max-width: 280px; margin: 0 auto;}

.product_ul li a{color: #3b3b3b;}
.product_ul li a:hover{color: #08c;}
.product_ul li img{margin-bottom: 10px; width: 100%; max-width: none;}
.product_ul li a:hover img{opacity: 0.6;}
.product_ul li h2{font-size: 1em; line-height: 1.2; margin-bottom: 10px;}
.product_ul li .product_exp{font-size: 0.8em; margin-bottom: 10px;}
.price{position: absolute; top: auto; bottom: 0; left: 50%; transform: translateX(-50%); font-weight: 700; font-size: 1.2em; text-align: center;}
.soldout{position: absolute; top: auto; bottom: 0; left: 50%; transform: translateX(-50%); font-weight: 400; font-size: 1.0em; text-align: center; color: #777;}
.tax{font-weight: 400; font-size: 0.6em;}

.pager_block{text-align: center;}
.pager_block li{margin-bottom: 5px;}


/* コーヒー豆リスト */
.coffee_list_exp{1.3em;}

/* 価格 */
.list_text_area{position: relative; text-align: center;}
.list-price{font-size: 20px; font-weight: 700;}
.list-price span{font-size: 16px;}
.price span{font-size: 12px; font-weight: 400;}
.discount_rate_box{position: absolute; top: -90px; left: auto; right: 20px; line-height: 1.2; border-radius: 50%; background-color: #3C1619; color: #E2C80F; border: 1px solid #E2C80F; text-align: center; font-size: 14px; font-weight: 700; width: 80px; height: 80px; padding: 28px 0 0;}
.discount_rate_box span.text{font-size: 10px; font-weight: 400;}
.discount_rate_box span.rate{font-size: 16px;}



@media screen and (min-width: 897px){
  }