#special #contents{padding:1.5em 0 2em;}
#contents .inner{width:95%;}
#special #contents .inner p{line-height:160%; word-break: break-all;}
#special #contents .inner p:first-of-type{font-size:110%; font-weight:600;}
#special h2{font-size:200%; font-weight: 600; text-align:center; line-height:140%; padding:0; margin:1.2em auto .5em; position: relative; color:#8d1524; border-left:5px solid #a07548; border-right:5px solid #a07548; background: url(./img/bdr.png) repeat-x center 0;  background-size:contain;}
#special h2:first-of-type{margin:.8em auto .5em;}

ul.sp_topics{margin:1em auto; display: flex; flex-flow: row wrap; width:100%;}
ul.sp_topics li{margin:.5em .8em 1em; position:relative; border-radius:6px; background-color:#fbf1cc; box-shadow:6px 6px 10px rgba(126,100,64,0.4);
width: -webkit-calc(100% / 3 - 3%) ;
width: calc(100% / 3 - 3%);
}
ul.sp_topics li figure{display:block; width:100%; height:0; padding:60% 0 0; background-size: cover; background-repeat: no-repeat; background-position: center top; border-bottom:1px solid #a07548; border-radius: 6px 6px 0 0;}
ul.sp_topics li figure img{position:absolute;left:0;top:0; width:100%; height:100%;}
ul.sp_topics li span.title {display:inline-block; font-size:100%; line-height:130%; color:#6a3000; font-weight: 600; padding:.25em 5% 1em;}
ul.sp_topics li a{display:block; width:100%; height:100%; text-align:left; position:relative; background-size: cover; background-repeat: no-repeat; background-position: center center; border-radius:6px; transition: .5s;} 
ul.sp_topics li a:hover{opacity:0.70;}

ul.sp_topics li.sp1_1 figure{background-image:url(./img/sp1_1.jpg);}
ul.sp_topics li.sp1_2 figure{background-image:url(./img/sp1_2.jpg);}
ul.sp_topics li.sp1_3 figure{background-image:url(./img/sp1_3.jpg);}
ul.sp_topics li.sp1_4 figure{background-image:url(./img/sp1_4.jpg);}
ul.sp_topics li.sp2_7 figure{background-image:url(./img/sp2_7.jpg);}
ul.sp_topics li.sp2_6 figure{background-image:url(./img/sp2_6.jpg);}
ul.sp_topics li.sp2_5 figure{background-image:url(./img/sp2_5.jpg);}
ul.sp_topics li.sp2_4 figure{background-image:url(./img/sp2_4.jpg);}
ul.sp_topics li.sp2_3 figure{background-image:url(./img/sp2_3.jpg);}
ul.sp_topics li.sp2_2 figure{background-image:url(./img/sp2_2.jpg);}
ul.sp_topics li.sp2_1 figure{background-image:url(./img/sp2_1.jpg);}

.ribbon {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  margin: -1px 0 0 -8px;
  background: #ee6b75;
  padding:5px 0 6px;
}
.ribbon h3{padding: 0 1em 0 .5em; font-size:95%; color:#fff; font-weight: 600;}
.ribbon:after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-width: 14px 7px 14px 0px;
  border-color: transparent #fbf1cc transparent transparent;
  border-style: solid;
}
.ribbon:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 6px transparent;
  border-right: solid 8px #a4353d;
}

@media all and (min-width: 768px) {
}

@media all and (max-width: 767px) {
#special #contents{padding:5% 0 8%;}
#contents .inner{width:92% !important;}
#special #contents .inner p:first-of-type{font-size:3.8vw; line-height:150% !important;}
#special h2{font-size:6vw; padding:0 0; margin:5% auto 2%;}
#special h2:first-of-type{margin:2% auto;}
ul.sp_topics{margin:0 auto;}
ul.sp_topics li{margin:2.5% 1.5%; box-shadow:4px 4px 6px rgba(126,100,64,0.4);
width: -webkit-calc(100% / 2 - 3%) ;
width: calc(100% / 2 - 3%);
}
ul.sp_topics li span.title{font-size:3.2vw;  padding:2% 5% 6%;}
.ribbon {
  margin: -1px 0 0 -6px;
  padding:2.5% 0 3%;
}
.ribbon h3{padding: 0 1em 0 .5em; font-size:3vw;}
.ribbon:after {
  border-width:3vw 1.5vw 3vw 0px;
}
.ribbon:before {
  border-bottom: solid 6px transparent;
  border-right: solid 6px #a4353d;
}
}