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

/* リセット */
h1,h2,ul,li,dl,dt,dd,div{
margin: 0;
padding: 0;
font-weight: normal;
list-style: none;
}
body{
background:#f4f4f4;
}
.clearfix:after,
#info dl:after{
content:" ";
display:block;
clear:both;
}
span.red{
color:#cc0000;
}
a{
font-weight:bold;
text-decoration: none;
}
a:link,a:visited{
color:crimson;
}
a:hover,a:active{
color:cornflowerblue;
}

/* 見出し */
h1{
padding: 0 0 0 10px;
font-size: 12px;
color: #fff;
}
h2{
font-size: 24px;
letter-spacing: 10px;
text-align: center;
color: #555;
padding: 0 0 10px;
}

/* ヘッダー */
header{
width: 100%;
background-color: #2e2d30;
}
header div{
width: 1200px;
margin: 0 auto;
padding: 20px 0;
}

/* 上部固定ナビゲーションバー */
nav {
font-size: 12px;
height: 60px;
line-height: 60px;
background: #fff;
}
nav ul{
max-width: 1200px;
margin: 0 auto;
}
nav li{
display: inline;
padding: 0 10px 0 0;
}

/* セクション */
section{
width:1200px;
margin: 40px auto 100px;
}

/* 新着情報 */
#info{
}
#info div{
padding: 10px;
background: #fff;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
}
#info dl{
padding: 10px;
border-bottom: 1px dotted #ddd;
line-height: 200%;
}
#info dt,
#info dd{
font-size: 12px;
float: left;
}
#info dt{
font-weight: bold;
color: #2b9ed8;
}
#info dd{
padding-left:10px;
}

/* 商品一覧 */
#products{
width: 1220px;
height: auto;
}
#products figure {
float:left;
width:calc(100% / 4 - 20px);
height:auto;
line-height:auto;
position: relative;
padding: 0 !important;
margin: 10px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
background-color:#FFF;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, #products figure {
width: 284px;
  }
}
#products figure img {
width: 90%;
height: 90%;
margin-left:5%;
margin-top:5%;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, #products figure img {
width: 257px;
height: 192px;
  }
}
#products figure figcaption {
font-family: Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 12px;
text-align:left;
width:90%;
margin-left: 5%;
padding: 0 0 10px;
line-height:150%;
}
/* フッター */
/* ヘッダー */
footer{
width: 100%;
background-color: #fff;
}
footer div{
width: 1200px;
margin: 0 auto;
padding: 20px 0;
}
footer div p{
color: #333;
text-align: center;
}