@charset "utf-8";

#blog{
    .wrap{
        .contents{
            a.more{
                z-index: 2;
                max-width: 1200px;
                margin: 3em auto 0;
            }
            .contents_inner{
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-gap: 50px;
                dl{
                    background-color: #fff;
                    border-radius: 20px 0 20px 0;
                    height: 240px;
                    position: relative;
                    &::after{
                        content:"";
                        position: absolute;
                        bottom: 1em;
                        right: 1em;
                        display: inline-block;
                        background-image: url('https://renew.mizuho.ed.jp/mizuho_wp/wp-content/themes/theme_mizuho/img/common/arrow_01.svg');
                        background-size: contain;
                        background-repeat: no-repeat;
                        width: 20px;
                        height: 7px;
                        z-index: 2;
                    }
                    .date{
                        font-size: 1.4rem;
                        padding: 15px 20px 0;
                    }
                    dt{
                        font-size: 1.5rem;
                        line-height: 1.5;
                        padding: 20px 20px 30px;
                    }
                    .img{
                        img{
                            width:100%;
                            height:110px;
                            object-fit: cover;
                            border-radius: 20px 0 0 0;
                        }                      
                    }

                }
            }

        }
    }
}

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

}
@media screen and (max-width:1200px) {

    #blog{
        .wrap{
            .contents{
                .contents_inner{
                    grid-gap: 40px;
                    dl{
                        height: 220px;
                        .date{
                            font-size: 1.3rem;
                            padding: 15px 15px 0;
                        }
                        dt{
                            padding: 15px 15px 20px;
                        }
                        .img{
                            img{
                                height:100px;
                            }                      
                        }

                    }
                }
            }
        }
    }

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

    #blog{
        .wrap{
            .contents{
                .contents_inner{
                    grid-template-columns: repeat(3, 1fr);
                    grid-gap: 30px;
                }
            }
        }
    }
}

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

    #blog{
        .wrap{
            .contents{
                .contents_inner{
                    grid-template-columns: repeat(2, 1fr);
                    grid-gap: 20px;
                    dl{
                        height: 200px;
                        .date{
                            font-size: 1.2rem;
                        }
                        dt{
                            font-size: 1.3rem;
                            padding: 10px 10px 20px;
                        }
                        .img{
                            img{
                                height:90px;
                            }                      
                        }
                    }
                }
            }
        }
    }

}

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

}