@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
color
#F08300
#FDD000
-----------------------------------------------*/


/*-----------------------------------------------
  list
-----------------------------------------------*/

#list .info {
padding: 0.25em 1em;
background: #F1F1F1;
border-radius: 0.2em;
}
#list .info span {
font-size: 1.5em;
color: #F90;
}
#list .inner {
display:flex;
flex-flow:row wrap;
justify-content:flex-start;
align-items:stretch;
margin-top: 1em;
}
#list dl {
display:block;
width:23.5%;
margin:1em 1%;
text-align:center;
color:#333;
transition:all 0.3s ease;
}
#list dl:nth-child(4n + 1) {
margin-left: 0;
}
#list dl:nth-child(4n + 4) {
margin-right: 0;
}
#list a:hover {
opacity:0.8;
}
#list .category {
padding:0.2em 0.5em;
color:#FFF;
background:#E86480;
}
#list .photo img{
width:100%;
height:160px;
object-fit:cover;
}
#list .name {
margin-top:0.5em;
}
#list .price {
}
#list .price span {
font-size:1.5em;
font-weight: bold;
}
#list .price span.seiyaku {
font-size:1.5em;
font-weight: normal;
}
#list .comment {
font-size:0.9em;
text-align:left;
}
#list .detail {
margin-top:2px;
text-align:left;
}
#list .detail a {
padding-left:12px;
color:#F60;
background:url(../img/arw_osusume_detail.gif) left center no-repeat;
}
#list .detail a:hover {
text-decoration:underline;
}
#list .movie {
margin-top:2px;
text-align:left;
}
#list .movie a {
padding-left:12px;
color:#060;
background:url(../img/arw_osusume_movie.gif) left center no-repeat;
}
#list .movie a:hover {
text-decoration:underline;
}

@media screen and (max-width:800px) {
#list .inner {
justify-content: space-between;
}
#list dl {
width:48%;
}
}