div.ccm-block-productpage-list-header {
	max-width:960px !important;/* custom */
	width:100% !important;/* custom */
	height:auto !important;/* custom */
	margin:0 auto !important;/* custom */
	margin-bottom:-25px !important;
}

div.ccm-block-productpage-list-header h5 {
	text-align:left;
	font-size:24px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important; 
	font-weight: 500 !important;
}

div.ccm-block-page-list-thumbnail-grid-wrapper{
	max-width:960px !important;
	width:100% !important;
	height:auto !important;
	margin:0 auto !important;
}

div.ccm-block-page-list-thumbnail-grid-wrapper div.parent{
	width:980px;
	margin-right:-20px;
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	justify-content:flex-start;
	-webkit-justify-content:flex-start;
	font-size:16px !important;
	-webkit-text-size-adjust:100%;
}

div.ccm-block-page-list-page-entry-grid-oil {
	width:220px !important;
	height:auto !important;
	border:#CCCCCC solid 1px !important;
	margin-top:0;
	margin-right: 20px;
	padding:0 !important;
	text-align:center !important;
	overflow:hidden !important;
/* box-shadow */
box-shadow:0px 0px 10px 0px #c98827 inset;
-moz-box-shadow:0px 0px 10px 0px #c98827 inset;
-webkit-box-shadow:0px 0px 10px 0px #c98827 inset;

/* border-radius */
border-radius:5%;
-moz-border-radius:5%;
-webkit-border-radius:5%;

/* border */
border:1px solid #cccccc;
background:url(./bg01.png) repeat;
}


div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-title {
	max-width:220px !important;
	width:100% !important;
	height:50px !important;
	margin:0 !important;
	padding:0 !important;
	color: #FFF !important;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-size:0.95em !important;
		display: -webkit-flex;
			overflow:hidden !important;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
}

.honey {
	background:rgba(255,0,147,0.75);
}

.sauce {
	background:rgba(255,61,0,0.75);
}

.others {
	background:rgba(112,49,0,0.75);
}

.pasta {
	background:rgba(0,0,255,0.75);
}

.can {
	background:rgba(163,0,0,0.75);
}

.oil {
	background:rgba(0,145,0,0.75);
}

div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-title p {
	max-width:95% !important;
	width:100% !important;
	height:auto;
	line-height:120%;
	margin:0 auto !important;
}

div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-page-entry-grid-thumbnail-hover {
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-page-entry-grid-thumbnail {
	display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
  height: 200px;
  overflow: hidden !important;
}

div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-page-entry-grid-thumbnail img {
	width:70% !important;
	height:auto !important;
}


div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-page-entry-grid-thumbnail a {
    position: relative;
    display: table;
}

div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-page-entry-grid-thumbnail-hover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 95%;
    background-color:rgba(255,255,0,0.3) !important;
    z-index: 2;
	-webkit-filter: blur(15px);
}

div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-page-entry-grid-thumbnail a:hover
div.ccm-block-page-list-page-entry-grid-thumbnail-hover {
    opacity: 1;
}

div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-page-entry-grid-thumbnail-title-wrapper {
    display: table;
    width: 100%;
    height: 100%;
	margin:0 !important;
	padding:0 !important;
}

div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-page-entry-grid-thumbnail-title {
    display: table-cell;
    width: 100%;
    text-align: center;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    color: #000;

}

div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-page-entry-grid-thumbnail-title i {
    display: none;
}

@media only screen 
   and (max-width : 1200px)  {
   /* Styles here */
div.ccm-block-page-list-thumbnail-grid-wrapper{
	display:flex;
	display:-webkit-flex;
	justify-content:center;
	-webkit-justify-content:center;
	-webkit-text-size-adjust:100%;
}
}

@media only screen 
   and (max-width : 991px)  {
   /* Styles here */
div.ccm-block-productpage-list-header {
		width:85.25% !important;/* custom */
	height:auto !important;/* custom */
}

div.ccm-block-page-list-thumbnail-grid-wrapper{
	max-width:100vw;
	width:95% !important;
	height:auto !important;
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	justify-content:center;
	-webkit-justify-content:center;
}
   
div.ccm-block-page-list-thumbnail-grid-wrapper div.parent{
	width:100vw !important;
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	margin:0 0 0 5% !important;
	justify-content:flex-start;
	-webkit-justify-content:flex-start;
	font-size:16px !important;
	-webkit-text-size-adjust:100%;
	}
div.ccm-block-page-list-page-entry-grid-oil {
	margin-right:8%;
}
   }
   
@media only screen 
   and (max-width : 987px)  {   
div.ccm-block-page-list-page-entry-grid-oil {
	margin-right:7%;
}
   }
   
@media only screen 
   and (max-width : 955px)  {
div.ccm-block-page-list-page-entry-grid-oil {
	margin-right:6% !important;
}
   }
@media only screen 
   and (max-width : 918px)  {
div.ccm-block-page-list-page-entry-grid-oil {
	margin-right:4% !important;
}
   }
@media only screen 
   and (max-width : 855px)  {
div.ccm-block-page-list-thumbnail-grid-wrapper{
	margin:0 5% 0 5% !important;
}
div.ccm-block-page-list-thumbnail-grid-wrapper div.parent{
	margin:0 0 0 2% !important;
}

div.ccm-block-page-list-page-entry-grid-oil {
	margin-right:2% !important;
}
   }
@media only screen 
   and (max-width : 785px)  {
div.ccm-block-page-list-page-entry-grid-oil {
	margin-left:5% !important;
	margin-right:10% !important;
}
   }
   
@media only screen 
   and (max-width : 739px)  {
div.ccm-block-page-list-page-entry-grid-oil {
	margin-left:6% !important;
	margin-right:5% !important;
}
   }
   
@media only screen 
   and (max-width : 615px)  {
div.ccm-block-page-list-thumbnail-grid-wrapper div.parent{
	margin:0 !important;
}

div.ccm-block-page-list-page-entry-grid-oil {
	margin-left:3% !important;
	margin-right:5% !important;
}
   }
   
@media only screen 
   and (max-width : 573px)  {

div.ccm-block-page-list-page-entry-grid-oil {
	margin-left:3% !important;
	margin-right:3% !important;
}
   }   

@media only screen 
   and (max-width : 554px)  {
   /* Styles here */
div.ccm-block-page-list-thumbnail-grid-wrapper div.parent{
	margin:5% auto !important;

	}
}

@media only screen 
   and (max-width : 548px)  {
   /* Styles here */
div.ccm-block-page-list-thumbnail-grid-wrapper div.parent{
	width:95%;
	margin:0 auto;
}
div.ccm-block-page-list-page-entry-grid-oil {
	margin-left:0% !important;
	margin-right:2% !important;
}
}

@media only screen 
   and (max-width : 500px)  {
   /* Styles here */
div.ccm-block-page-list-thumbnail-grid-wrapper div.parent{
	margin:0 6% 0 4% !important;
}
div.ccm-block-page-list-page-entry-grid-oil {
    position: relative !important;
	max-width:500px !important;
    width: 40% !important;
    height: auto !important;
	float:left;
				overflow:hidden !important;
}

div.ccm-block-page-list-page-entry-grid-oil:before {
    content:"";
    display: block !important;
    padding-top:100% !important; /* 高さを幅の75%に固定 */
	padding-bottom:25% !important;
				overflow:hidden !important;
}

div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-title,div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-page-entry-grid-thumbnail{
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	    font-size:3vw !important;
    line-height:1.5em !important;
	float:left !important;
}
div.ccm-block-page-list-page-entry-grid-oil div.ccm-block-page-list-page-entry-grid-thumbnail {
	width: 85% !important;
	margin:0 auto !important;
    height: auto !important;
	padding-top:40% !important;
	}

   }