@charset "UTF-8";
/*
 home css
*/

.sec-column {
    margin: 12.0rem auto;

    .inner {
        max-width: 980px;
        margin: 0 auto 70px;
        width: 100%;

        .list-column {
            display: flex;
            flex-direction: column;

            .item-column {
                border-bottom: 1px solid #ecd421;
                padding: 30px 0;

                a {
                    display: flex;
                    width: 100%;
                    gap: 0 30px;
                    text-decoration: none;
                    color: #4d4d4d;
                    font-weight: 400;

                    figure {
                        height: 185px;
                        overflow: hidden;
                        position: relative;
                        transition: all .4s ease-in-out;
                        width: 246px;

                        img {
                            object-fit: cover;
                            width: 100%;
                            height: 100%;
                        }
                    }

                     .elem-data {
                        width: 100%;
                        display: flex;
                        gap: 20px 0;
                        line-height: 1;
                        flex-direction: column;
                        flex: 1;

                        .ttl-time {
                            display: flex;
                            justify-content: space-between;
                            align-items: flex-start;
                            flex-direction: row-reverse;

                            .ttl-post {
                                font-size: 2.4rem;
                                font-family: "Noto Serif JP", serif;
                                line-height: 1.6;
                                letter-spacing: .01em;
                                font-feature-settings: "palt";
                                font-weight: normal;
                                text-align: left;
                            }

                            time {
                                font-size: 1.4rem;
                                line-height: 1;
                                padding-top: 13px;
                            }
                        }
                        .txt-post {
                            font-size: 1.6rem;
                            text-align: left;
                            line-height: 1.45;
                        }
                     }
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .sec-column {
        padding: 0 20px;

        .inner {
            max-width: 100%;

            .list-column {
                .item-column {
                    a {
                        gap: 0 20px;

                        figure {
                            height: 160px;
                            width: 160px;
                        }

                        .elem-data {
                            gap: 5px 0;

                            .ttl-time {
                                flex-direction: column;
                                align-items: flex-start;

                                .ttl-post {
                                    font-size: 2.6rem;
                                }

                                time {
                                    margin-left: auto;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}