@charset "utf-8";

#endayori,#kyusyoku{
    .wrap{
        .contents{
            .contents_inner{
                display: grid;
                grid-template-columns: repeat(3, auto);
                grid-gap: 50px;
                border-radius: 0 30px 0 30px;
                dl{
                    dt{
                        background-color: #FACFE3;
                        font-size: 2rem;
                        padding: 15px 30px;
                        border-radius: 0 30px 0 0;
                    }
                    dd.img{
                        a{
                            position: relative;
                            display: block;
                            padding: 30px 30px 25px;
                            background-color: #fff;
                            &::after{
                                content: "";
                                position: absolute;
                                display: inline-block;
                                top:50%;
                                left:50%;
                                transform: translate(-50%, -50%);
                                width: 36px;
                                height: 36px;
                                background-position: center;
                                background-size: contain;
                                background-image: url('https://renew.mizuho.ed.jp/mizuho_wp/wp-content/themes/theme_mizuho/img/common/Icon_search_plus.svg');
                                background-repeat: no-repeat;
                            }
                        }
                    }
                    .btn.dl{
                        padding: 0 30px 30px;
                        border-radius: 0 0 0 30px;
                        background-color: #fff;
                            width: 100%;
                        a{
                            width: 90%;
                        }
                    }
                }
            }
            a.more{
                z-index: 2;
                margin-bottom: 50px;
            }
        }
    }
}
#kyusyoku{
    .wrap{
        background-color: #EAE7E1;
        .contents{
            .contents_inner{
                dl{
                    dt{
                        background-color: #F5DA9A;
                    }
                }
            }
            a.more{
                margin-bottom: 0;
            }
        }
    }
}

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

    #endayori,#kyusyoku{
        .wrap{
            .contents{
                .contents_inner{
                    grid-gap: 30px;
                    dl{
                        dt{
                            font-size: 1.8rem;
                        }
                        .btn.dl{
                            width: 100%;
                            a{
                                width: 100%;
                                grid-column-gap: 5px;
                                grid-template-columns: 15px 1fr 15px;
                                
                            }
                        }
                    }
                }
            }
        }
    }

}

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

   #endayori,#kyusyoku{
        .wrap{
            .contents{
                .contents_inner{
                    display: grid;
                    grid-template-columns: repeat(3, auto);
                    grid-gap: 20px;
                    grid-row-gap: 30px;
                    dl{
                        dt{
                            font-size: 1.6rem;
                            padding: 10px 20px;
                        }
                        dd.img{
                            a{
                                padding: 20px 20px 15px;
                                &::after{
                                    width: 25px;
                                    height: 25px;
                                }
                            }
                        }
                        .btn.dl{
                            padding: 0 15px 20px;
                            a{
                                padding: 0.7em 1em;
                                grid-column-gap: 0;
                                grid-template-columns: 13px 1fr 13px;
                                font-size: 1.4rem;
                            }
                        }
                    }
                }
            }
        }
    }

}

@media screen and (max-width:768px){
    
   #endayori,#kyusyoku{
        .wrap{
            .contents{
                .contents_inner{
                    grid-template-columns: 1fr;
                    grid-row-gap: 30px;
                    dl{
                        dd.img{
                            a{
                                padding: 20px 20px 15px;
                                &::after{
                                    width: 25px;
                                    height: 25px;
                                }
                            }
                        }
                        .btn.dl{
                            padding: 0 15px 20px;
                            a{
                                width: 80%;
                                grid-column-gap: 1em;
                                grid-template-columns: 15px auto 15px;
                            }
                        }
                    }
                }
            }
        }
    }
    
}