*{/*全ての要素*/
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
  list-style-type: none;
  box-sizing: border-box;
}
body{/*body要素*/
  color: #444;
  background: #f7f7f7;
  line-height: 1.6;
  font-size: 12px;
  font-family: 'Assistant', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  word-break: break-all;
  text-align: justify;
}
a{/*リンク*/
  color: #8e8b82;
}
article{
  margin: 40px auto;
  max-width: 600px;
}
.header,footer{/*ヘッダーとフッター*/
  font-size: 16px;
  width: 100%;
  max-width: 100;
  padding: 22px 10px 15px 10px;
  color: #444;
  background: #fff;
  text-align:center;
  box-shadow: 6px 5px 8px rgba(0,0,0,0.1);
}
.header{/*ヘッダー*/
  margin: -40px 0 40px 0;
}
footer{/*フッター*/
  padding: 22px 10px 35px 10px;
  margin: 0 auto;
  max-width: 600px;
}
.card{/*カードBOX領域*/
  width: 100%;
  max-width: 280px;
  margin: 0 auto 30px;
  padding: 22px 10px 15px 10px;
  color: #bcbcbc;
  background: #fff;
  box-shadow: 6px 5px 8px rgba(0,0,0,0.1);
}
.card .upper{
  font-weight: bold;
}
.card::before{/*セロテープ部分*/
  content: '';
  display: block;
  width: 80px;
  height: 14px;
  background: rgba(90,90,90,0.1);
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
  margin: 0 auto -25px;
  position: relative;
  top: -28px;
  z-index:2;
}
.card .upper img{/*カード部分の画像*/
  width: 100%;
  margin: 0;
}
.card .upper span{
  font-weight: normal;
  font-size: 20px;
  font-family: 'Alike', serif;
  display: inline-block;
  width: 40px;
  height:40px;
  line-height:40px;
  color: #cfcfcf;
  float:left;
}
.card .upper a{/*カード部分のリンク*/
  text-decoration: none;
  padding: 0 4px;
  margin: 0;
  width: calc(100% - 40px);
  height:40px;
  line-height:40px;
  display: block;
  text-align: right;
  font-weight: bold;
  font-size: 12px;
  color: #666;
  float:right;
}
.card .upper a:hover{/*カード部分のONリンク*/
  color: #cc7140;
  background: #fcfcfc;
}
.card p{
  color: #7f7f7f;
  padding-top: 15px;
  border-top: 1px solid #efefef;
}
.card:nth-child(odd){
  float:left;
}
.card:nth-child(even){
  float:right;
}
.card:last-child{
}
footer,center{
  clear:both;
}