@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:auto;
	display:block;
}

/* module reco
------------------------*/
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%;  /* default 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%;  /* default 75%  */
	line-height:150%;
}

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

@media all and (max-width:479px){
	li{
		width:46%;
        height: 300px;
	}

	li h3{
		display:none;
	}

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