.index活動3 {
    /*container-type: inline-size;*/
    --column-gap: 0;
    --row-gap: 0;
    --color01: olivedrab;
    --color02: blueviolet;
    --color03: blue;
    --color04: brown;
    --border: solid 1px #FFFFFF;
    --text-padding: 10px;
    --date-bg-color: orange;
    --heading-font-color: #FFFFFF;
}

.index活動3 .blockTitle
{
   text-align : center; 
}

    .index活動3 .elementContainer {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
    }

    .index活動3 .eachActivity {
        position: relative;
        border: var(--border);
    }

        .index活動3 .eachActivity .heading {
            position: absolute;
            padding: var(--text-padding);
            word-break: break-all;
            color: var(--heading-font-color);
        }

        .index活動3 .eachActivity .date {
            position: absolute;
            padding: var(--text-padding);
            background-color: var(--date-bg-color);
        }

        /*======== 1st ===========================================*/
        .index活動3 .eachActivity:nth-child(7n+1) {
            width: calc(100% / 6);
        }

            .index活動3 .eachActivity:nth-child(7n+1) .heading {
                left: 0;
                bottom: 0;
                width: 100%;
                background-color: var(--color01);
            }

            .index活動3 .eachActivity:nth-child(7n+1) .date {
                left: 0;
                top: 0;
            }

        /*============== 2nd =======================================*/
        .index活動3 .eachActivity:nth-child(7n+2) {
            width: calc(100% / 3);
        }

            .index活動3 .eachActivity:nth-child(7n+2) .heading {
                left: 0;
                top: 0;
                width: 20%;
                height: 100%;
                background-color: var(--color02);
            }

            .index活動3 .eachActivity:nth-child(7n+2) .date {
                right: 0;
                top: 0;
            }

        /* ================= 3rd ======================================*/
        .index活動3 .eachActivity:nth-child(7n+3) {
            width: calc(100% / 4);
        }

            .index活動3 .eachActivity:nth-child(7n+3) .heading {
                left: 0;
                top: 0;
                width: 100%;
                background-color: var(--color03);
            }

            .index活動3 .eachActivity:nth-child(7n+3) .date {
                left: 0;
                bottom: 0;
            }

        /* ================== 4th ========================================*/
        .index活動3 .eachActivity:nth-child(7n+4) {
            width: calc(100% / 4);
        }

            .index活動3 .eachActivity:nth-child(7n+4) .heading {
                right: 0;
                top: 0;
                width: 20%;
                height: 100%;
                background-color: var(--color04);
            }

            .index活動3 .eachActivity:nth-child(7n+4) .date {
                left: 0;
                top: 0;
            }

        /* ================== 5th ========================================*/
        .index活動3 .eachActivity:nth-child(7n+5) {
            width: calc(100% / 3);
        }

            .index活動3 .eachActivity:nth-child(7n+5) .heading {
                right: 0;
                top: 0;
                width: 20%;
                height: 100%;
                background-color: var(--color03);
            }

            .index活動3 .eachActivity:nth-child(7n+5) .date {
                left: 0;
                top: 0;
            }

        /* ================== 6th ========================================*/
        .index活動3 .eachActivity:nth-child(7n+6) {
            width: calc(100% / 3);
        }

            .index活動3 .eachActivity:nth-child(7n+6) .heading {
                left: 0;
                bottom: 0;
                width: 100%;
                background-color: var(--color01);
            }

            .index活動3 .eachActivity:nth-child(7n+6) .date {
                left: 0;
                top: 0;
            }

        /* ================== 7th ========================================*/
        .index活動3 .eachActivity:nth-child(7n+7) {
            width: calc(100% / 3);
        }

            .index活動3 .eachActivity:nth-child(7n+7) .heading {
                left: 0;
                top: 0;
                width: 100%;
                background-color: var(--color02);
            }

            .index活動3 .eachActivity:nth-child(7n+7) .date {
                right: 0;
                bottom: 0;
            }


    .index活動3 .thumbContainer {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
    }

    .index活動3 .link {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }


@media (max-width: 480px) {
    .index活動3 .eachActivity:nth-child(7n+1),
    .index活動3 .eachActivity:nth-child(7n+2),
    .index活動3 .eachActivity:nth-child(7n+3),
    .index活動3 .eachActivity:nth-child(7n+4),
    .index活動3 .eachActivity:nth-child(7n+5),
    .index活動3 .eachActivity:nth-child(7n+6),
    .index活動3 .eachActivity:nth-child(7n+7) {
        width: 100%;
    }

    .index活動3 .eachActivity {
        aspect-ratio: 1 / 1;
    }

        .index活動3 .eachActivity:nth-child(7n+2) .heading,
        .index活動3 .eachActivity:nth-child(7n+4) .heading,
        .index活動3 .eachActivity:nth-child(7n+5) .heading {
            width: 30%;
        }

        .index活動3 .eachActivity:nth-child(7n+5) .heading {
            left: 0;
            right: auto;
        }

        .index活動3 .eachActivity .date {
            padding: 5px;
            font-size: 0.8em;
        }

        .index活動3 .eachActivity:nth-child(7n+5) .date {
            right: 0;
            bottom: 0;
            top: auto;
            left: auto;
        }
}

@media (min-width: 481px) and (max-width: 767px) {
    .index活動3 .eachActivity:nth-child(7n+1),
    .index活動3 .eachActivity:nth-child(7n+2),
    .index活動3 .eachActivity:nth-child(7n+4),
    .index活動3 .eachActivity:nth-child(7n+5),
    .index活動3 .eachActivity:nth-child(7n+6),
    .index活動3 .eachActivity:nth-child(7n+7) {
        width: calc(100% / 2);
        height: 40cqw;
    }

    .index活動3 .eachActivity:nth-child(7n+3) {
        width: 100%;
        height: 80cqw;
    }

        .index活動3 .eachActivity:nth-child(7n+1) .heading,
        .index活動3 .eachActivity:nth-child(7n+2) .heading,
        .index活動3 .eachActivity:nth-child(7n+3) .heading,
        .index活動3 .eachActivity:nth-child(7n+4) .heading,
        .index活動3 .eachActivity:nth-child(7n+5) .heading,
        .index活動3 .eachActivity:nth-child(7n+6) .heading,
        .index活動3 .eachActivity:nth-child(7n+7) .heading {
            left: 0;
            bottom: 0;
            top: auto;
            height: fit-content;
            width: 100%;
        }

    .index活動3 .eachActivity .date {
        padding: 5px;
        font-size: 0.8em;
    }

    .index活動3 .eachActivity:nth-child(7n+3) .date,
    .index活動3 .eachActivity:nth-child(7n+7) .date {
        top: 0;
        bottom: auto;
    }


    .index活動3 .eachActivity {
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .index活動3 .eachActivity:nth-child(7n+1),
    .index活動3 .eachActivity:nth-child(7n+2),
    .index活動3 .eachActivity:nth-child(7n+3) {
        width: calc(100% / 3);
    }

    .index活動3 .eachActivity:nth-child(7n+4),
    .index活動3 .eachActivity:nth-child(7n+5),
    .index活動3 .eachActivity:nth-child(7n+6),
    .index活動3 .eachActivity:nth-child(7n+7) {
        width: calc(100% / 2);
    }

    .index活動3 .eachActivity {
        height: 40vw;
    }
}

@media (min-width: 980px) and (max-width:1199px) {
    .index活動3 .eachActivity:nth-child(7n+1),
    .index活動3 .eachActivity:nth-child(7n+2),
    .index活動3 .eachActivity:nth-child(7n+3) {
        width: calc(100% / 3);
    }

    .index活動3 .eachActivity:nth-child(7n+4),
    .index活動3 .eachActivity:nth-child(7n+5),
    .index活動3 .eachActivity:nth-child(7n+6),
    .index活動3 .eachActivity:nth-child(7n+7) {
        width: calc(100% / 2);
    }

    .index活動3 .eachActivity {
        height: 40vw;
    }
}

@media (min-width: 1200px) and (max-width:1919px) {
    .index活動3 .eachActivity {
        height: 25vw;
    }
}

@media (min-width: 1920px) {
    .index活動3 .eachActivity {
        height: 20vw;
    }
}