- 週間ランキング
.grad-wrap {
position: relative;
}
.grad-wrap+.grad-wrap {
margin-top: 40px;
}
.grad-title {
background-color: #F2F2F2;
font-size: 1.8rem;
font-weight: bold;
display: block;
border: 1px solid #D9D9D9;
padding: 1rem 2rem;
cursor: pointer;
position: relative;
}
.grad-btn {
z-index: 2;
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 148px;
margin: auto;
padding: .5em 0;
border-radius: 2px;
background: #FFAF8C;
color: #fff;
font-size: 1.3rem;
text-align: center;
cursor: pointer;
transition: .2s ease;
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
.grad-btn::before {
content: "続きを読む";
}
.grad-btn:hover {
background: #fff;
color: #FFAF8C;
}
.grad-item {
position: relative;
overflow: hidden;
height: 250px;
margin-bottom: 3.2rem;
}
.grad-item p+p {
margin-top: 1em;
}
.grad-item::after {
display: block;
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 100%;
height: 95%;
background: linear-gradient(rgba(255, 255, 255, 0), #fff 100%);
}
.grad-trigger {
display: none;
}
.grad-trigger:checked~.grad-btn::before {
content: "閉じる";
}
.grad-trigger:checked~.grad-item {
height: auto;
}
.grad-trigger:checked~.grad-item::after {
display: none;
}