main
{
    aside
    {
        padding-top:50px;
        padding-bottom:50px;

        ul
        {
            border-bottom: 1px solid #E0E0E0;
            padding-bottom: 50px;
            margin-bottom:50px;
            display: flex;
            justify-content:center;
            li
            {
                a
                {
                    display: block;
                    padding:5px 20px;
                    color:$main-color;
                }
                &.active
                {
                    border-bottom: 1px solid #333;
                }
            }
        }
    }

    #article-list
    {

        article
        {
            margin-bottom:50px;
            a
            {
                display: block;
                height: 100%;
                padding-bottom:20px;
                position: relative;
                picture
                {

                    position: relative;
                    width: 100%;
                    padding-top:72%;
                    overflow: hidden;
                    display: block;
                    margin-bottom:20px;
                    img
                    {
                        position: absolute;
                        top:0px;
                        left: 0px;
                        display: block;
                        width: 100%;
                    }
                }
                time
                {
                    color:#B5B5B5;
                    display: block;
                    margin-bottom:20px;
                    font-size:14px;
                    letter-spacing: 1px;
                }
                h2
                {
                    color:#333;
                    margin-bottom: 20px;
                    font-size:1.2em;
                    letter-spacing: 1px;
                    line-height: 120%;
                }
                p
                {
                    line-height: 140%;
                    color:#333;
                    letter-spacing: 1px;
                    padding-bottom:30px;
                }

                span.more
                {
                    position: absolute;
                    bottom:0px;
                    left: 0px;
                    color:#333;
                    letter-spacing: 4px;
                    border-bottom:1px solid #333;
                    padding-bottom:5px;
                }
            }
        }

        @media(min-width:767px)
        {
            display: flex;
            flex-wrap:wrap;
            article
            {
                width: calc(90% / 3);
                margin:0 2.5% 5% 2.5%;

                &:nth-child(3n)
                {
                    margin-right:0px;
                }
                &:nth-child(3n + 1)
                {
                    margin-left:0px;
                }
            }
        }
    }
}