@font-face{
font-family:'font';
src: url('https://cldup.com/xjdxknJUFF.woff2') format("woff2")
}

*{/*全ての要素*/
  margin: 0;
  padding: 0;
  font-size: 105%;
  font-weight: normal;
  list-style-type: none;
  box-sizing: border-box;
}
body{/*body要素*/
  color: #666;
  background: #e6eaff;
  font-family: 'Alice', 'font', serif;
  line-height: 1.8;
  font-size: 12px;
  word-break: break-all;
  text-align: justify;
}
a{/*リンク*/
  color: #7C83A5;
}

a:active,a:hover{
  text-decoration:none;
  color:#666;
  text-shadow:0 0 3px #5f6796}

article{
  margin: 40px auto;
  max-width: 600px;
}
.header,footer{/*ヘッダーとフッター*/
  font-size: 16px;
  width: 100%;
  max-width: 100;
  padding: 22px 10px 15px 10px;
  color: #666;
  background: #fff;
  text-align:center;
  box-shadow: 6px 5px 8px rgba(0,0,0,0.2);
}
.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: #9296A9;
  background: #fff;
  box-shadow: 6px 5px 8px rgba(0,0,0,0.2);
}
.card .upper{
  font-weight: bold;
}
.card::before{/*セロテープ部分*/
  content: '';
  display: block;
  width: 80px;
  height: 14px;
  font-family: 'Milonga', 'font', serif !important;
  color: #9296A9;
  background: rgba(167,177,202,0.7);
  -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;
  display: inline-block;
  width: 40px;
  height:40px;
  line-height:40px;
}
.card .upper a{/*カード部分のリンク*/
  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: #7d8091;
  float:right;
}
.card .upper a:hover{/*カード部分のONリンク*/
  color: #777;
  background: #d9e3fc;
}
.card p{
  color: #707694;
  padding-top: 15px;
  border-top: 1.3px dashed #D7DCF1;
}

.card:nth-child(even){
  float:left
}

.card:nth-child(odd){
  float:right
}