article{
    font-size: var(--font-size-p);
    font-weight: var(--fontweight-article);

    & p{
        font-size: var(--font-size-p);
        font-weight: var(--fontweight-article);
    }

    & div.flex-wrap{
        display: flex;
        max-width: var(--page-max-width);
        margin: -16px auto 0 auto;
        
        & div.nav{
            position: sticky;
            top: 0;
            left: 0;
            width: 300px;
            margin: calc(-1 * var(--body-top-padding)) auto 0 auto;
            padding: calc(var(--body-top-padding) + 16px) 0 4em 0;
            flex-shrink: 0;
            align-self: baseline;
            pointer-events: none;

            & ul{
                padding: 0;
                
                & li{
                    position: relative;
                    width: 200px;
                    padding: 0;
                    list-style: none;
                    font-size: 12px;
        
                    & a{
                        display: block;
                        padding-right: 2em;
                        font-weight: 700;
                        color: #999;
                        text-decoration: none;
                        pointer-events: auto;
        
                        &::after{
                            position: absolute;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            display: block;
                            width: 1.5em;
                            height: 1.5em;
                            margin: auto 0;
                            border-radius: 50%;
                            font-family: FontAwesome;
                            content: "\f105";
                            font-weight: 900;
                            text-align: center;
                            line-height: 1.5em;
                            color: var(--color-theme1-reverse);
                            background-color: var(--color-theme1);
                            transition: 0.5s all;
                        }
                    }
        
                    &.active{
                        & a{
                            color: var(--color-theme1);
        
                            &::after{
                                color: var(--color-theme1);
                                background-color: var(--color-theme1-reverse);
                            }
                        }
                    }
                }
            }
        }

        & div.main{
            width: calc(100% - var(--side-nav2-width));
            padding-top: 16px;

            & section.loop_section{
                margin: 0 0 0 auto;
        
                & div.wrapper{
                    margin: 0 0 0 auto;
                }
            }
        }
    }
}

@media only screen and (max-width: 1100px) {
    article{
        margin-top: 0;

        & div.flex-wrap{
            display: block;
            
            & div.nav{
                display: none;
            }

            & div.main{
                width: 100%;
                padding-top: 0;

                & section.loop_section{
                    & div.bg_cover{
                        left: 50%;
                    }
                }

                & section.bg{
                    &::after{
                        left: 50%;
                    }
                }
            }
        }
    }
}