@charset "utf-8";

/* ==================================================================

    news.css

=================================================================== */

/* --------------------------------
■mv
-------------------------------- */ 
.secondary .contents .visual{
    background-image: url("../../images/column/visual.jpg");
}
.secondary .contents .visual.before_after{
    background-image: url("../../images/before_after/visual.jpg");
}
.secondary .contents .visual.news{
    background-image: url("../../images/news/visual.jpg");
}

/* --------------------------------
■category
-------------------------------- */ 
#category{
    padding: 41px 0;
    background: #F6F6F6;
    border-radius: 4px;
}

#category dl{
    display: flex;
    align-items: center;
}

    #category dl dt{
        width: 23.8%;
        text-align: center;
    }
    #category dl dd{
        flex-grow: 1;
    }
    #category dl dd .tagsList{
        gap:20px 13px;
    }


/* --------------------------------
■.entries
-------------------------------- */ 
.contents .entries{
    margin-top: 79px;
}

ul.itemList{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap:24px 32px;
}

ul.itemList li{
    width: calc((100% / 3) - 32px);
}
    ul.itemList li a{
        display: block;
        height: 100%;
        text-decoration: none;
        color: #333;
        padding: 0 10px 10px 10px;
        transition: .3s;
    }
    ul.itemList li a:hover{
        background: #eee;
    }
    ul.itemList li a figure .image{
        margin-left: -10px;
        margin-right: -10px;
        overflow: hidden;
        aspect-ratio: 381 / 254;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    ul.itemList li a figure .image img{
        width: 100%;
        transition: .3s;
        object-fit: cover;
    }
    ul.itemList li a:hover figure .image img{
        transform:scale(1.1);
    }

    ul.itemList li a figure figcaption{
        display: flex;
        flex-direction: column;
    }
    ul.itemList li a figure figcaption p{
        margin: 0;
    }
    ul.itemList li a figure figcaption p.date{
        font-size: 1.4rem;
        color: #777;
    }
    ul.itemList li a figure figcaption p.title{
        flex-grow: 1;
    }

@media only screen and
(max-width : 767px) {

/* --------------------------------
■category
-------------------------------- */ 
#category{
    padding: 21px 4vw;
}

#category dl{
    display: block;
    align-items: center;
}

    #category dl dt{
        width: auto;
        text-align: left;
        margin-bottom: 12px;
    }
    #category dl dd .tagsList{
        gap:12px 10px;
    }

/* --------------------------------
■.entries
-------------------------------- */ 
.contents .entries{
    margin-top: 49px;
}

.contents ul.itemList{
    display: block;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px 2%;
}
    .contents ul.itemList > li{
        width: auto;
    }
    
    .contents ul.itemList > li + li{
        margin-top: 12px;
    }

    .contents ul.itemList > li a{

    }
    .contents ul.itemList > li a:hover{
        background: #fff;
    }
    .contents ul.itemList > li a:hover figure .image img{
        transform: scale(1);
    }

        .contents ul.itemList > li .image{
            margin: 0;
        }
        .contents ul.itemList > li figure figcaption{
            padding: 16px 8px;
        }
        .contents ul.itemList > li figure figcaption dl dt{
            font-size: 1.6rem;
            font-weight: 700;
        }

        .contents ul.itemList > li figure figcaption dl dt + dd{
            margin-top: 10px;
        }

        .contents ul.itemList > li figure figcaption dl dd{
            font-size: 1.3rem;
        }
    
        .contents ul.itemList > li figure figcaption  p.date{
            font-size: 1.1rem;
        }
    
        .contents ul.itemList > li figure figcaption dl + p.date,
        .contents ul.itemList > li figure figcaption p.date + dl{
            margin: 2px 0 0 0;
        }
}