@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;
                    box-shadow: 0 0 2px gray;
                    &::after{
                        content:"";
                        position: absolute;
                        bottom: 0.5em;
                        right: 1em;
                        display: inline-block;
                        background-image: url('	https://soare.kids/soare_wp/wp-content/themes/soare_theme/img/common/icon_arrow_orange.svg');
                        background-size: contain;
                        background-repeat: no-repeat;
                        width: 7px;
                        height: 20px;
                        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;
                        }                      
                    }

                }
            }

        }
    }
    &.single{
            .wrap{
                .contents{
                    .contents_inner{
                        grid-template-columns: 1fr;
                        justify-items: center;
                        grid-row-gap: 2em;
                        .title_box{
                            h2{
                                font-weight: 400;
                                font-size: 2.6rem;
                                margin-bottom: 0.5em;
                            }
                            span.date{
                                text-align: center;
                                display: block;
                            }
                        }
                        .contbox{
                            p{
                                font-size: 1.8rem;
                                text-align: center;
                                line-height: 2;
                                margin-bottom: 1em;
                            }
                        }
                        .wp-block-image{
                            img{
                                max-width: 640px;
                            }
                        }
                        
                    }
                    a.btn{
                        &::after {
                            position: absolute;
                            content: "";
                            top: 50%;
                            transform: translateY(-50%);
                            right: 1em;
                            width: 6px;
                            height: 12px;
                            background-image: url(../img/common/icon_arrow_right.svg);
                            background-size: contain;
                        }
                    }
                }
            }
    }
}
@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;
                            }                      
                        }
                    }
                }
            }
        }
        &.single{
            .wrap{
                .contents{
                    .contents_inner{
                        grid-row-gap: 1.5em;
                        .title_box{
                            h2{
                                font-size: 1.6rem;
                            }
                            span.date{
                                font-size: 1.3rem;
                            }
                        }
                        .contbox{
                            p{
                                font-size: 1.4rem;
                                text-align: left;
                            }
                        }
                        .wp-block-image{
                            img{
                                max-width: 100%;
                            }
                        }
                        
                    }
                }
            }
        }
    }

}

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

}