@charset "UTF-8";
/* CSS Document */
#spsingle h2 {
 background: #82021C;
    padding: 15px 20px;
    color: #fff;
    margin: 30px 0;
    font-size: 20px;
    font-weight: normal;
    font-weight: bold;
}
#sppostbox {
  display: flex;
  flex-wrap: wrap;
}
.sppost {
  width: 48%;
  margin: 30px 1%;
  display: flex;
  flex-wrap: wrap;
}
.sppost .img {
  margin: 0 auto;
  width: 90%;
  height: auto;
  padding: 0;
  position: relative;
}
.sppost .category {
 font-weight:bold;
 font-size:.85em;
 padding:5px 10px;
 min-width:10%;
 text-align:center;
}
.sppost .category {
   position: absolute;
  top: 0;
  left: 0;
 }
.sppost .detail {
 width:90%;
 margin:0 auto;
}
.sppost h3 {
 margin:10px 0;
 font-size:1.25em;
 display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.sppost .excerpt {
   display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
@media screen and (max-width: 999px) {
 #sppostbox {
  display: block;
  flex-wrap: wrap;
}
.sppost {
  width: 90%;
  margin: 30px auto;
  padding:0 0 20px 0;
  display: block;
  border-bottom:dashed 1px #ccc;
}
.sppost .img {
  margin: 0 auto;
  width: 100%;
  height: auto;
  padding: 0;
  position: relative;
}

element.style {
}
.sppost .detail {
    width: 100%;
    margin: 0 auto;
}
.sppost h3 {
    margin: 5px 0;
    font-size: 1em;
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.sppost .excerpt {
 font-size:.75em;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

}
}