/* ============================================================
お役立ち資料のダウンロードページ用css
URL:/download_contents/
============================================================ */


/* ============================================================
共通パーツ
============================================================ */
.download_list{
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
    .download_list__item{
        width: calc(100% - 23px);
        border: 2px solid #D9D9D9;
        border-radius: 8px;
        margin: 0 auto;
        position: relative;
        display: grid;
        grid-template-rows: auto 1fr;
        &.--new{
            &:before{
                position: absolute;
                right: -12px;
                top: -24px;
                content: "new";
                width: 64px;
                height: 64px;
                border: 3px solid #fff;
                background-color: #45B035;
                border-radius: 50%;
                z-index: 1;
                color: #fff;
                font-weight: bold;
                font-size: 18px;
                line-height: 1;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
        }
    }
    .download_list__item__img{
        overflow: hidden;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        img{
            width: 100%;
        }
    }
    .download_list__item__desc{
        padding: 24px 24px 40px;
        display: grid;
        grid-template-rows: 1fr auto;
        background-color: #fff;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;

        .download_list__item__heading{
            font-size: 16px;
            line-height: 1.7;
            font-weight: 400;
            color: #2b2b2b;
        }
        .text_link{
            color: #00A867;
            font-size: 14px;
            font-weight: bold;
            text-align: right;
            display: block;
            margin-top: 32px;
            i{
                margin-left: 16px;
                &:before{
                    color: #00A867;
                }
            }
        }
    }
}

.download_category + .download_category{
    margin-top: 80px;
}

/* PC */
@media screen and (min-width: 768px){
    .download_list{
        grid-template-columns: repeat(3, 1fr);
        gap: 48px 40px;
        margin-top: 48px;
        .download_list__item{
            width: auto;
            &.--new{
                &:before{
                    width: 75px;
                    height: 75px;
                    font-size: 20px;
                }
                
            }
        }
        .download_list__item__desc{
            .download_list__item__heading{
                font-size: 18px;
            }
            .text_link{
                font-size: 16px;
            }
        }
    }
    .download_category + .download_category{
        margin-top: 160px;
    }
}

/* ============================================================
new_section
============================================================ */
.new_section{
    container-name: new-section;
    container-type: inline-size;
    padding: 0 16px;
    &.--bg{
        --bg--color: #E8F5E6;
    }
    .download_list{
        padding: 0 16px;
    }
}
/* PC */
@media screen and (min-width: 768px){
    .new_section{
        &.--bg{
                --bg--color: #E8F5E6;
        }
        .download_list{
            grid-template-columns: repeat(5, minmax(0, 320px));
            padding: 0 40px;
            gap: 40px 24px;
            place-content: center;
        }
        
    }
}

@media screen and (min-width: 768px){
    @container new-section (max-width: 1399px){
        .new_section .download_list{
            grid-template-columns: repeat(6, minmax(0, 1fr));
            max-width: 1032px;
            margin-right: auto;
            margin-left: auto;

            .download_list__item{
                grid-column: span 2;

                &:nth-child(4){
                    grid-column: 2 / span 2;
                }

                &:nth-child(5){
                    grid-column: 4 / span 2;
                }
            }
        }
    }
}