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

@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://fonts.googleapis.com/css?family=Poppins);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

body{ font-family:"Noto Sans JP", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif; margin: 0;}

h4{margin:0; padding:0;}
ul , li{list-style:none; margin:0; padding:0;}

/*-各タイトル--*/
h4.lineup{border-bottom:3px solid #e60012; text-align:center; padding:20px 0; margin-bottom:20px; font-size: 20px;}

/*-ランキング-*/
.ranks{width:100%; margin:0 0 20px 0;
	width:100%; 
	display:         flex;
	display: -webkit-flex;

	        flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	-js-display: flex;
	justify-content : space-between;
}

.ranks td {padding: 10px 0;}
.ranks .ranking{background:#e60012; padding:5px 0; text-align:center; font-weight:bold; color:#fff; margin-bottom: 20px;}
.ranks li {width:31%; box-sizing:border-box; font-size:12px; margin-bottom: 5%;}
.ranks li img {width: 100%; height: auto;}

/*-ラインナップ-*/
.recomend{	width:100%; 
	display:         flex;
	display: -webkit-flex;

	        flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	-js-display: flex;
	justify-content : space-between;
}

.recomend::before{
  content:"";
  display: block;
  width:24%;
  order:1;
}

.recomend::after{
  content:"";
  display: block;
  width:24%;
}

.recomend .ranking{background:#e60012; padding:5px 0; text-align:center; font-weight:bold; color:#fff;}
.recomend .block{margin:0 0 5% 0; width:24%; display:block;}
 .block:nth-child(4n){margin-right:0;}
.recomend dl{margin:0; padding:10px 0; overflow: hidden;}
.recomend dt , .recomend dd{float:left; box-sizing:border-box; font-size:12px;}
.recomend dt{font-size: 10px; width:60%; line-height: 190%;}
.recomend dd{font-size: 11px; width:40%;}
.recomend .block { margin:0 0 30px 0;}
.recomend .block img{width: 100%; height: auto;}

.name{text-align:left;}
.price , .csv-price{font-size:12px; margin:0; text-align:right; padding: 0; color: #cc0000; font-weight: bold;}
.size{text-align:right; font-size:12px; padding:10px 0;}
.rank{text-align:right; font-size:14px; color:#cc0000; font-weight:bold;}
.size a{color:#444444; text-align:center; border:#444444 solid 1px; padding:5px 5px 3px 5px; text-decoration:none; border-radius: 3px;/* CSS3草案 */  -webkit-border-radius: 3px; /* Safari,Google Chrome用 */ -moz-border-radius: 3px; /* Firefox用 */ margin-bottom:5px; box-sizing: content-box; width:auto; font-size:0.7em; margin-right:5px; float:left;}
.size a:hover{background:#444444; color:#fff;}

.price::after{
	font-size:10px;
	font-style:normal;
	color:#cc0000;
	content:"～"}

.other_btn{margin-top:20px; border-bottom:#CBCBCB dotted 1px;}
.other_btn a{border:solid 1px #444; text-align:center; padding:15px; display:block; color:#444; margin-bottom:40px; text-decoration:none;}
.other_btn a:hover{background:#444; text-align:center; padding:15px; display:block; color:#FFF; margin-bottom:40px; text-decoration:none;}

.border_none{border-bottom:none; margin-top: 25px;}

@media screen and (max-width: 740px) {

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

/*-ラインナップ-*/
.recomend , .ranks{	width:94%; 
	display:         flex;
	display: -webkit-flex;

	        flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	-js-display: flex;
	justify-content : space-between;
	margin: 0 auto;
}	
	
.recomend::after , .ranks::after{
  content:"";
  display: block;
  width:31%;
}
	
  table td.size {
    display: block;
	text-align:left;
	padding:0;
  }
  table td.name {
    display: block;
    border-top: none;
    border-bottom: none;
    width: 100%;
	font-size: 10px;
  }
  
  table td.price {
    display: block;
	margin:0;
  }

/*-各タイトル--*/
h4.lineup{border-bottom:3px solid #e60012; text-align:center; padding:0 0 10px 0; margin:20px 0; font-size: 16px;}

/*-ランキング-*/
.rank{text-align:left;	font-size:12px;}

/*-ラインナップ-*/
.recomend .ranking{background:#e60012; padding:5px 0; text-align:center; font-weight:bold; color:#fff;}
.recomend .block{ width:31%; box-sizing:border-box; margin:0 0 20px 0;}
/*.block:nth-child(3n){margin-right:0;}*/
.size{font-size:12px; padding:0;}
.recomend dl {margin:0 0 10px 0; padding: 0;}
.recomend dt {width:100%; box-sizing:border-box; font-size:10px; float:none; text-align:left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.recomend dd {width:100%; box-sizing:border-box; font-size:12px; float:none; text-align:left;}
.recomend .block img{width: 100%; height: auto;}
  
.size a{color:#444444; text-align:center; padding:1px 3px 1px 3px; text-decoration:none; border-radius: 3px;/* CSS3草案 */  -webkit-border-radius: 3px;    /* Safari,Google Chrome用 */  -moz-border-radius: 3px;   /* Firefox用 */ margin-bottom:5px; font-size:10px; margin-right:2%;}
	
.other_btn a{border:solid 1px #444; text-align:center; padding:15px; display:block; font-size: 12px; margin: 0 auto; color:#444; margin-bottom:40px; text-decoration:none; width: 80%;}	
}