/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#cardlayout-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
 
    margin: 0em auto;
    max-width: 1025px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.card-list{
     text-align:center;
}

/* リンクテキストの下線を非表示 */
a.card-link {
    text-decoration: none;
}

/* カードレイアウト内の画像を幅いっぱいに表示 */
#cardlayout-wrap img {
    display: block;
    border-color:transparent ;
    border-radius: 8px; /* 半径が8pxの角丸 */
    max-width: 100%;
    height: auto;
    position:relative;
   　　　border-style: solid;
    border:0.5px;
    border-color:#979797
}

.example {
  position: relative;
}　

.example span{
  position: absolute;
  top: 0;/*画像の左上に配置*/
  left: 0;
  margin: 0; /*余計な隙間を除く*/
  color: #ffffff;/*文字を白に*/
  background: #00a61b;/*背景色*/
  font-size: 12px;
  line-height: 1;/*行高は1に*/
  padding: 8px 8px;/*文字周りの余白*/
  border-radius：1rem;
  }

.example span.sample{
  position:absolute;
  top:5px;
  left:30px;
  border-radius：1rem;
  margin:0;
  color: #ffffff;
  background: #00a61b;
  font-size: 12px;
  line-height: 1;
  padding: 8px 8px;
}

/* カードレイアウトのタイトル部分 */
.card-title {
    margin: 0.4em 0;
    text-align: center;
    font-size:24px;
    font-weight: bold;
	  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";
    line-height: 1.2em;
    color:#000;
}

span.price {
  font-size:18px;
}

span.price b{
  font-weight:normal;
  font-size:16px;
}

@media all and and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
}
    .card-list {
        margin: 0.5em 0;
        width: calc(100% / 2); /* 100%幅を2で割るという指定 */
    }

/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 900px) {
    .card-list {
        width: calc(96% / 3); /* 100%幅を3で割るという指定 */
    }
    
/* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
    #cardlayout-wrap::after{
        content: "";
        display: block;
        width: calc(100% / 3);
    }
  
 
.card-list p{
  display: inline-block;
  border-radius:100px;
  border:1px solid #000;
  font-size: 14px;
  padding: 2px 8px;
  margin: 0 2px 6px 0;
  line-height: 20px;
  text-rendering:optimizeLegibility;
  color:#000;
  position:relative;
}
  
.card-list p#e01:before{display:block;position:relative;content:"円形";} 
.card-list p#e02:before{display:block;position:relative;content:"三角形";} 
.card-list p#e03:before{display:block;position:relative;content:"1個用";}
.card-list p#e04:before{display:block;position:relative;content:"2個用";} 
.card-list p#e05:before{display:block;position:relative;content:"縦置き2個用";}
.card-list p#e06:before{display:block;position:relative;content:"仕切有";}
.card-list p#e07:before{display:block;position:relative;content:"入数50枚";} 
.card-list p#e08:before{display:block;position:relative;content:"入数100枚";} 
.card-list p#e09:before{display:block;position:relative;content:"かぶせ透明蓋付";} 
.card-list p#e10:before{display:block;position:relative;content:"縦置き3個用";} 
.card-list p#e11:before{display:block;position:relative;content:"縦置き2~4個用";} 
.card-list p#e12:before{display:block;position:relative;content:"縦置き3~5個用";} 
.card-list p#e13:before{display:block;position:relative;content:"入数20枚";} 
.card-list p#e14:before{display:block;position:relative;content:"パリパリ派に";} 
.card-list p#e15:before{display:block;position:relative;content:"しっとり派に";} 
.card-list p#e16:before{display:block;position:relative;content:"紙";} 
.card-list p#e17:before{display:block;position:relative;content:"組み立て式";} 
.card-list p#e18:before{display:block;position:relative;content:"蓋別売";} 
.card-list p#e19:before{display:block;position:relative;content:"天然竹皮";} 
.card-list p#e20:before{display:block;position:relative;content:"約120〜140枚入";} 
.card-list p#e21:before{display:block;position:relative;content:"入数350枚";} 
.card-list p#e22:before{display:block;position:relative;content:"1枚入";} 
.card-list p#e23:before{display:block;position:relative;content:"250枚入";} 
.card-list p#e24:before{display:block;position:relative;content:"フィット感抜群";} 
.card-list p#e25:before{display:block;position:relative;content:"丈夫で折れにくい竹素材";} 
.card-list p#e26:before{display:block;position:relative;content:"100枚入";} 
.card-list p#e27:before{display:block;position:relative;content:"除菌効果";} 
.card-list p#e28:before{display:block;position:relative;content:"JAN入";} 
.card-list p#e29:before{display:block;position:relative;content:"入数200枚";} 
.card-list p#e37:before{display:block;position:relative;content:"100膳入";} 
.card-list p#e38:before{display:block;position:relative;content:"しっかり厚手";} 
.card-list p#e39:before{display:block;position:relative;content:"米離れ◎";} 
.card-list p#e40:before{display:block;position:relative;content:"1000枚入";} 
.card-list p#e41:before{display:block;position:relative;content:"装着簡単";} 
.card-list p#e42:before{display:block;position:relative;content:"環境配慮";} 
.card-list p#e43:before{display:block;position:relative;content:"500枚入";} 
  
a.original-button {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 160px;
	margin: auto;
	padding: 4px;
	border: 2px solid #eb5522;
	background: #eb5522;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
  letter-spacing:0.05em;
  font-size:17px;
}
a.original-button:hover {
	color: #eb5522;
	background: #fff;
}

@media screen and (max-width:480px) { 
h2.card-title{
     font-size:15px;
}
  .card-figure{
    margin:10px 8%;
}
  
  .card-list p{
    font-size: 12px;
    line-height: 14px;
    margin: 0 2px 6px 0;
    padding: 2px 7px;
    border: 1px solid #000;
  }
  
  span.price{
  font-size:14px!important;
  margin-top:10px!important;
  }
  
  b.price{
  font-weight:normal;
  font-size:13px;
}
}