/*----------------------------------------
 special
----------------------------------------*/

.special_bg{
background-color: #f0eee8;
}

.special_wrap{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 40px 0 0 0;
}

.special_wrap_inner{
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.special_title{
width: 100%;
}

.special_title h3{
font-size: 3rem;
text-align: center;
letter-spacing: 5px;
position: relative;
width: 100%;
}

.special_title h3::before,
.special_title h3::after{
content: "";
position: absolute;
top: 0;
border-top: solid 1px #333;
border-bottom: solid 1px #333;
height: 100%;
width: 20%;
}

.special_title h3::before{
top: 0;
left: 0;
border-left: solid 1px #333;
}

.special_title h3::after{
top: 0;
right: 0;
border-right: solid 1px #333;
}

.special_box{
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
margin: 60px 0 60px 0;
}

.special_box_item{
width: 29%;
margin: 0 2% 40px 2%;
}

.special_box_item p{
text-align: center;
letter-spacing: 0;
margin: 20px 0 0;
font-size: 15px;
line-height: 1.8;
}

.special_box_item a{
display: block;
width: 100%;
}

.special_box_item a img{
filter: drop-shadow(0 0 5px #999);
will-change: filter;
}

.special_box_item a:hover img{
filter: none;
}



/*-sp-*/
@media screen and (max-width : 896px) {


.special_wrap{
margin: 20px 0 0 0;
}

.special_wrap_inner{
width: 90%;
max-width: 90%;
}

.special_title h3{
font-size: 1.8rem;
letter-spacing: 0;
}

.special_title h3::before,
.special_title h3::after{
width: 10%;
}

.special_title h3 span{
font-size: 1.5rem;
display: block;
}

.special_box_item{
width: 98%;
margin: 0 1% 30px 1%;
}

.special_box_item:last-child{
margin: 0 1% 0 1%;
}

.special_box_item p{
text-align: left;
margin: 20px 0 0;
}

.special_box_item p br{
display: none !important;
}

}