@charset "UTF-8";
#insta{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 50px;
    z-index: -10;
    position: relative;

    & a{
        text-decoration: none;
    }

    & div{
        box-sizing: border-box;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        padding-left: 0;

        & div{
            list-style: none;
            box-sizing: border-box;
            width: calc((100%  - 20px )/ 3 );
            margin-bottom: 0.8em;
            height: 240px;
            position: relative;
            height: auto;
            aspect-ratio: 1;

            & .captionTxt{
                display: block;
                width: 100%;
                height: 100%;
                padding: 16px;
                font-size: 14px;
                line-height: 1.8;
                text-align: left;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: rgba(0,0,0,.75);
                color: #fff;
                opacity: 0;
                
            }

            & .like_count{
                font-size: 12px;
                line-height: 2;
                display: block;
                text-align: center;
                position: relative;

                &::before{
                    content: "\02665";
                    color: #d4245f;
                    font-size: 14px;
                    vertical-align: middle;
                    padding-right: 0.25em;
                }
            }

            &:hover{
                & .captionTxt{
                    transition: .5s opacity, .25s filter;
                    opacity: 1;
                }
            }

            & img{
                object-fit: cover;
                width: 100%;
                height: 100%;
                aspect-ratio: 1;
                
            }
        }
    }
}
@media only screen and (max-width: 440px){
#insta{
    width: 95vw;
    margin: 0 auto;
    padding-top: 50px;

    & a{
        text-decoration: none;
    }

    & div{
        box-sizing: border-box;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        padding-left: 0;

        & div{
            list-style: none;
            box-sizing: border-box;
            width: calc((100%  - 5px )/ 2 );
            margin-bottom: 0.3em;
            height: 240px;
            position: relative;
            height: auto;
            aspect-ratio: 1;

            & .captionTxt{
                display: block;
                width: 100%;
                height: 100%;
                padding: 0px;
                font-size: 14px;
                line-height: 1.8;
                text-align: left;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: rgba(0,0,0,.75);
                color: #fff;
                opacity: 0;
                
            }

            & .like_count{
                font-size: 12px;
                line-height: 2;
                display: block;
                text-align: center;
                position: relative;

                &::before{
                    content: "\02665";
                    color: #d4245f;
                    font-size: 14px;
                    vertical-align: middle;
                    padding-right: 0.25em;
                }
            }

            &:hover{
                & .captionTxt{
                    transition: .5s opacity, .25s filter;
                    opacity: 1;
                }
            }

            & img{
                object-fit: cover;
                width: 100%;
                height: 100%;
                aspect-ratio: 1;
            }
        }
    }
}
}