@charset "UTF-8";
/* CSS Document */

#page_title{
background-image: url(images/pagetitle_bg.jpg);
background-image: -webkit-image-set(url(images/pagetitle_bg.jpg) 1x, url(images/pagetitle_bg@2x.jpg) 2x);
}

/* 中身-モバイルファースト======================================================================================================== */

/* スペシャルピックアップ */
#special li{
margin-top: 20px;
}
#special li a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
background-image: url(../images/special_bg.png);
background-repeat: no-repeat;
background-position: left top;
background-size: 100%;
width: 100%;
aspect-ratio: 3 / 2;
color: #fff;
font-weight: 700;
text-shadow: 0px 0px 10px #000;
padding: 0 5vw;
text-align: center;
outline: solid 1px #eee;
outline-offset: -5px;
position: relative;
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.15);
}
#special li:nth-child(4n-3) a{ background-color: #ea5504; }
#special li:nth-child(4n-2) a{ background-color: #ffcc00; }
#special li:nth-child(4n-1) a{ background-color: #3db22a; }
#special li:nth-child(4n) a{ background-color: #ff7381; }

#special li a::before{
content: "";
display: block;
width: 15%;
aspect-ratio: 1;
clip-path: polygon(0 100%,100% 0,100% 100%);
position: absolute;
right: 0;
bottom: 0;
}
#special li:nth-child(4n-3) a::before{ background-color: #ffcc00; }
#special li:nth-child(4n-2) a::before{ background-color: #ea5504; }
#special li:nth-child(4n-1) a::before{ background-color: #90c31f; }
#special li:nth-child(4n) a::before{ background-color: #ffa7c6; }

#special li a::after{
content: "CLICK";
text-shadow: none;
position: absolute;
font-size: 3vw;
line-height: 1;
right: 0;
bottom: 2.5vw;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#special li .new{
width: 15%;
aspect-ratio: 1;
color: #fff;
background-color: #c80000;
clip-path: polygon(0 0,100% 0,0 100%);
position: absolute;
left: 0;
top: 0;
}
#special li .new span{
text-shadow: none;
position: absolute;
font-size: 3vw;
line-height: 1;
left: 1vw;
top: 3vw;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#special li em{
display: block;
font-size: 8vw;
}
#special li p{
font-size: 5vw;
line-height: 1.8;
max-height: calc((5vw * 1.8) * 3);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}



/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#special ul{
display: flex;
flex-wrap: wrap;
}
#special li{
margin-top: 0px;
width: 32%;
margin-right: 2%;
margin-bottom: 2%;
}
#special li:nth-child(3n){
margin-right: 0;
}
#special li a{
padding: 0 2vw;
}
#special li a:hover{
transform: scale(1.05);
}
#special li a::after{
font-size: 1vw;
bottom: 0.8vw;
}

#special li .new span{
font-size: 1vw;
left: 0.2vw;
top: 1vw;
}

#special li em{
font-size: 2.2vw;
}
#special li p{
font-size: 1.4vw;
max-height: calc((1.4 * 1.8) * 3);
}





}