@charset "utf-8";

/* default style reset
------------------------*/
body,div,dl,dt,dd,ul,li,ol,
h1,h2,h3,h4,h5,form,p,table,th,td,
address,input{
	margin:0;
	padding:0;
}

body{
	line-height:1;
}
	
a img,img{
	border:0;
}

table{
    border-collapse:collapse;
   	border-spacing:0;
}
	
caption,th{
    text-align:left;
}
	
ul,li,ol,li{
	list-style:none;
}

a{
	color:#67b9ca;
}

a:hover{
	text-decoration:none;
}

address{
	font-style:normal;
}

iframe{
	border:0;
}

textarea{
	width:98%;
}

/* clearfix
------------------------*/
.clearfix{
	zoom:1;
}

.clearfix:after{
	content:'';
	display:block;
	clear:both;
	height:0;
}

/* layout
------------------------*/
body{
	color:#444;
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* common
------------------------*/
img{
	max-width:100%;
	height: 200px;
	display: table-cell;
    object-fit: cover;
    vertical-align: middle;
}

/* module new
------------------------*/
ul{
	text-align:center;
    display:inline-block;
    vertical-align: top;
    width: 100%;
}

li{
	width:23%;
	text-align:left;
	margin:1% 0.5%;
	display:inline-block;
    vertical-align: top;
}

li h3{
	color:#67b9ca;
	font-size:85%; /* defaluts 87.5% */
	line-height:140%;
	display:block;
	margin:10px 0 0 0;
	text-overflow:ellipsis;
	-webkit-text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

li p{
	font-size:65%;  /* defaluts 75% */
	line-height:150%;
}

li .price{
	color:red;
	font-weight:bold;
}

.icon_new{
	width:50px;
	height:50px;
	text-indent:-9999px;
	overflow:hidden;
	background:url(img/icon_new.png) no-repeat 0 0;
	position:absolute;
	top:-3px;
	left:-7px;
}

.box_top {
    height: 200px;
}
.box_top img {
    max-width: 100%;
    object-fit: cover;
    vertical-align: middle;
    height: 200px;
}

@media all and (max-width:769px){
    .box_top img {
        height: auto;
    }
    .box_top {
        height: 20vw;
    }
}

@media all and (max-width:479px){
	li{
		width:47%;
        border-bottom: 1px solid black;
        padding-bottom: 5px;
        margin-bottom: 20px;
        height: auto;
	}

	li h3{
		/*display:none;*/
	}

	li p.name{
		margin-top:5px;
	}
    .box_top {
        height: auto;
    }
}