@charset "utf-8";

.special_TTL {
background-color:#93c703;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#93c703, endColorstr=#b4d934);
background-image:-moz-linear-gradient(top, #93c703 30%, #b4d934 90%,#91c600 100%);
background-image:linear-gradient(top, #93c703 30%, #b4d934 90%,#91c600 100%);
background-image:-webkit-linear-gradient(top, #93c703 30%, #b4d934 90%,#91c600 100%);
background-image:-o-linear-gradient(top, #93c703 30%, #b4d934 90%,#91c600 100%);
background-image:-ms-linear-gradient(top, #93c703 30%, #b4d934 90%,#91c600 100%);
background-image:-webkit-gradient(linear, right top, right bottom, color-stop(30%,#93c703), color-stop(90%,#b4d934),color-stop(100%,#91c600));
border-radius: 4px;
border: solid 2px #a2d000;
box-shadow: 0px 0px 0px 1px #FFF inset;
margin-bottom: 15px;
}

.special_TTL h2 {
color: #FFF;
font-weight: bold;
padding: 14px 14px 8px 14px;
font-size: 140%;
}

.sp_linkBox {
margin-top: 20px;
line-height: 1.5;
border: solid 1px #DDD;
border-radius: 5px;
box-shadow: 0 -2px 1px #FFF inset;
background: none;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 23%, #ececec 100%);
background: -webkit-linear-gradient(top, #ffffff 23%,#ececec 100%);
background: linear-gradient(to bottom, #ffffff 23%,#ececec 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ececec',GradientType=0 );
cursor: pointer;
}

.sp_linkBox .inner {
padding: 18px;

}

.sp_linkBox .inner .ttl {
font-weight: bold;
font-size: 112%;
}
.sp_linkBox .inner .caption {
color: #333;
}

.sp_conttl {
background: #EBEFEF;
max-width: 610px;
width: 100%;
font-weight: bold;
border-radius: 4px;
margin-top: 20px;
}

.sp_conttl h2 {
padding: 13px 18px 10px 18px;
font-size: 128%;
}

.sp_linkBox .inner .arrow {
position: relative;
display: inline-block;
padding-left: 20px;
}

.sp_linkBox .inner a {
text-decoration: none;

}
.sp_linkBox .inner a:hover {
opacity: 0.8;

}
.sp_linkBox .inner .arrow:before {
content: '';
width: 14px;
height: 14px;
background: linear-gradient(90deg, #7ed300, #a2e22b);
border: solid 1px #7ed300;
border-radius: 50%;
position: absolute;
top: 8px;
left: -2px;
margin-top: -7px;
}
.sp_linkBox .arrow:after {
content: '';
width: 0;
height: 0;
border: solid 4px transparent;
border-left: solid 6px #ffffff;
position: absolute;
top: 8px;
left: 4px;
margin-top: -3px;
}

@media screen and (max-width: 480px){
.special_TTL h2 {
font-size: 98%
}
.sp_linkBox .inner .arrow:before {
top: 12px;
left: -2px;
}
.sp_linkBox .arrow:after {
top: 12px;
left: 4px;
}
}