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;
                }
            }
        }
    }

    & section.entry-content,
    section.post-content,
    section.category-content{
        padding: 0 0 var(--padding-base9) 0;
        margin: 0;
    }

    & section{
        padding: var(--padding-base9) 0;
    }

    & section.loop_section{
        position: relative;
        width: 100%;
        padding: var(--padding-base9) 0;
        margin: 0;

        &.right{
            & div.flex{
                display: flex;
        
                & div.photo{
                    position: relative;
                    order: 2;
                }
        
                & div.text{
                    padding: 0 2.4em 0 0;
                    order: 1;
                }
            }
        }
    
        &.flex5_5{
            & div.flex{
                & div.photo{
                    width: 50%;
                }
        
                & div.text{
                    width: 50%;
                }
            }
        }
    
        &.flex4_6{
            & div.flex{
                & div.photo{
                    width: 40%;
                }
        
                & div.text{
                    width: 60%;
                }
            }
        }
    
        &.flex3_7{
            & div.flex{
                & div.photo{
                    width: 30%;
                }
        
                & div.text{
                    width: 70%;
                }
            }
        }
    
        &.flex2_8{
            & div.flex{
                & div.photo{
                    width: 20%;
                }
        
                & div.text{
                    width: 80%;
                }
            }
        }
    
        &.flex_top{
            & div.flex{
                flex-wrap: wrap;
                
                & div.photo{
                    width: 100%;
                    aspect-ratio: 2.35 / 1;
                    overflow: hidden;
                    position: relative;
                    order: 1;

                    & img{
                        top: 0;
                        bottom: 0;
                        width: 100%;
                        height: auto;
                        margin: auto;
                        position: absolute;
                    }
                }
        
                & div.text{
                    width: 100%;
                    padding: 2.4em 0 0 0;
                    order: 2;
                }
            }
        }
    
        &.flex_bottom{
            & div.flex{
                flex-wrap: wrap;
                
                & div.photo{
                    width: 100%;
                    aspect-ratio: 2.35 / 1;
                    overflow: hidden;
                    position: relative;
                    order: 2;

                    & img{
                        top: 0;
                        bottom: 0;
                        width: 100%;
                        height: auto;
                        margin: auto;
                        position: absolute;
                    }
                }
        
                & div.text{
                    width: 100%;
                    padding: 0 0 2.4em 0;
                    order: 1;
                }
            }
        }

        & .li_2column,
        & .li_3column,
        & .li_4column,
        & .li_5column{
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            gap: var(--gap);

            > li{
                margin: 0;

                &:last-child{
                    margin: 0;
                }
            }
        }

        & .li_2column{
            > li{
                width: var(--col-2-n);
                list-style: none;
            }
        }
        
        & .li_3column{
            > li{
                width: var(--col-3-n);
                list-style: none;
            }
        }

        & .li_4column{
            > li{
                width: var(--col-4-n);
                list-style: none;
            }
        }

        & .li_5column{
            > li{
                width: var(--col-5-n);
                list-style: none;
            }
        }

        & .li_flex2_8,
        & .li_flex3_7,
        & .li_flex4_6,
        & .li_flex5_5{
            display: flex;
            flex-wrap: wrap;
            
            &.li_right{
                > li{                      
                    > div.photo{
                        order: 2;
                    }
            
                    > div.text{
                        padding: 1em 1.6em 1em 1em;
                        order: 1;
                    }
                }
            }

            > li{
                display: flex;
                flex-wrap: wrap;
                
                > div.photo{
                    position: relative;
                    background-color: var(--bgcolor-white);
                    flex-shrink: 0;
                    aspect-ratio: 3 / 2;
                    overflow: hidden;

                    & img{
                        position: absolute;
                        top: 0;
                        left: -50%;
                        right: -50%;
                        bottom: 0;
                        width: auto;
                        max-width: initial;
                        height: 100%;
                        margin: auto;
                    }
                }
                
                > div.text{
                    height: 100%;
                    padding: 1em 1em 1em 1.6em;
                    background-color: #fff;
                    box-sizing: border-box;

                    & h3,h4,h5,h6{
                        width: initial;
                        height: initial;
                        padding: 0;
                        margin: 0 0 0.5em 0;
                        border: none;
                        background: none;
                        font-size: 90%;
                        line-height: 1.35;

                        &::before{
                            display: none;
                        }

                        &::after{
                            display: none;
                        }
                    }

                    & p{
                        font-size: 90%;
                    }
                }
            }
        }

        & .li_flex5_5{
            > li{
                & div.photo{
                    width: 50%;
                }
        
                & div.text{
                    width: 50%;
                }
            }
        }
    
        & .li_flex4_6{
            > li{
                & div.photo{
                    width: 40%;
                }
        
                & div.text{
                    width: 60%;
                }
            }
        }
    
        & .li_flex3_7{
            > li{
                & div.photo{
                    width: 30%;
                }
        
                & div.text{
                    width: 70%;
                }
            }
        }
    
        & .li_flex2_8{
            > li{
                & div.photo{
                    width: 20%;
                }
        
                & div.text{
                    width: 80%;
                }
            }
        }

        & .li_flex_top{
            display: flex;
            flex-wrap: wrap;

            > li{
                display: flex;
                
                & div.photo{
                    width: 100%;
                    order: 1;
                }
        
                & div.text{
                    width: 100%;
                    padding: 2.4em 0 0 0;
                    order: 2;
                }
            }
        }
    
        & .li_flex_bottom{
            display: flex;
            flex-wrap: wrap;

            > li{
                & div.photo{
                    width: 100%;
                }
        
                & div.text{
                    width: 100%;
                    padding: 0 0 2.4em 0;
                    order: 1;
                }
            }
        }

        & .li_max300{
            display: flex;
            flex-wrap: wrap;
            padding: 0;

            > li{
                width: 100%;
                max-width: 300px;
                margin: 1em;
            }
        }

        & .li_max400{
            display: flex;
            flex-wrap: wrap;
            padding: 0;

            > li{
                width: 100%;
                max-width: 400px;
                margin: 1em;
            }
        }

        & .li_radiuscircle{
            > li{
                border-radius: 50%;
                overflow: hidden;
            }
        }

        & .li_radius1em{
            > li{
                border-radius: 1em;
                overflow: hidden;
            }
        }

        & .li_radius5px{
            > li{
                border-radius: 5px;
                overflow: hidden;
            }
        }

        & .li_radius10px{
            > li{
                border-radius: 10px;
                overflow: hidden;
            }
        }

        & .li_radius15px{
            > li{
                border-radius: 15px;
                overflow: hidden;
            }
        }

        & .li_radius30px{
            > li{
                border-radius: 30px;
                overflow: hidden;
            }
        }

        & .li_radius50px{
            > li{
                border-radius: 50px;
                overflow: hidden;
            }
        }

        & .li_aspect1_1{
            > li{
                > div.photo{
                    aspect-ratio: 2.35 / 1;
                }
            }
        }

        & .li_aspect3_2{
            > li{
                > div.photo{
                    aspect-ratio: 3 / 2;
                }
            }
        }

        & .li_aspect4_3{
            > li{
                > div.photo{
                    aspect-ratio: 4 / 3;
                }
            }
        }

        & .li_aspect16_9{
            > li{
                > div.photo{
                    aspect-ratio: 16 / 9;
                }
            }
        }

        & div.wrapper{
            margin: 0;
        }

        &:first-child{
            padding-top: 0;
        }

        &:last-child{
            padding-bottom: var(--padding-base9);
        }

        & div.flex{
		    display: flex;

            & div.photo{
                width: 40%;
                padding: 0;
                flex-shrink: 0;
                order: 1;

                & img{
                    width: 100%;
                    height: auto;
                    margin: 0;
                }
            }

            & div.text{
                width: 60%;
                padding: 0 0 0 2.4em;
                order: 2;
            }
        }
	}

    & div.bg_cover{
        position: absolute;
        top: 0;
        left: calc(50% - calc(var(--side-nav2-width) / 2) + calc(var(--side-nav1-width) / 2));
        content: "";
        width: calc(100vw - var(--scrollbar-width));
        height: 100%;
        background: var(--bgcolor-white);
        transform: translateX(-50%);
        z-index: -1;

        &.overlay::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.2);
            background-image: radial-gradient(rgba(0,0,0,0.5) 30%, transparent 31%), radial-gradient(rgba(0,0,0,0.5) 30%, transparent 31%);
            background-size: 3px 3px;
            background-position: 0 0, 2px 2px;
            z-index: 1;
        }
    }

    & section.bg{
        &::after{
            position: absolute;
            top: 0;
            left: calc(50% - calc(var(--side-nav2-width) / 2) + calc(var(--side-nav1-width) / 2));
            content: "";
            width: calc(100vw - var(--scrollbar-width));
            height: 100%;
            background: var(--bgcolor-white);
            transform: translateX(-50%);
            z-index: -1;
        }
    }
}

@media only screen and (min-width: 1451px) {
    article{
        & section.loop_section{
            & .li_4column,
            .li_5column{
                &.li_flex3_7,
                &.li_flex4_6,
                &.li_flex5_5{
                    &,
                    &.li_right{
                        &.li_bottom{
                            >li{
                                > div.photo{
                                    order: 2;
                                }
                        
                                > div.text{
                                    order: 1;
                                }
                            }
                        }

                        > li{
                            > div.photo{
                                width: 100%;
                                order: 1;
                            }
                    
                            > div.text{
                                width: 100%;
                                padding: 1em;
                                order: 2;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (min-width: 1281px) and (max-width: 1450px) {
    article{
        & div.flex-wrap{
            & section.loop_section{
                & .li_3column,
                .li_4column,
                .li_5column{
                    &.li_flex4_6,
                    &.li_flex5_5{
                        &,
                        &.li_right{
                            &.li_bottom{
                                >li{
                                    > div.photo{
                                        order: 2;
                                    }
                            
                                    > div.text{
                                        order: 1;
                                    }
                                }
                            }

                            > li{
                                > div.photo{
                                    width: 100%;
                                    order: 1;
                                }
                        
                                > div.text{
                                    width: 100%;
                                    padding: 1em;
                                    order: 2;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


@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%;
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 800px) {
    article{
        & section.loop_section{
            &,
            &.flex5_5,
            &.flex4_6,
            &.flex3_7,
            &.flex2_8,
            &.right{
                > div.wrapper{
                    > div.flex{
                        display: flex;
                        flex-wrap: wrap;
                
                        > div.photo{
                            width: 100%;
                            padding: 0;
                            margin: 0;
                            order: 2;
                        }
                
                        > div.text{
                            width: 100%;
                            padding: 0 0 2.4em 0;
                            order: 1;
                        }

                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 600px) {
    article{
        & section.loop_section{
            & .li_2column,
            .li_3column,
            .li_4column,
            .li_5column{
                &.li_flex2_8,
                &.li_flex3_7,
                &.li_flex4_6,
                &.li_flex5_5,
                &.li_right{
                    &.li_bottom{
                        >li{
                            > div.photo{
                                order: 2;
                            }
                    
                            > div.text{
                                order: 1;
                            }
                        }
                    }

                    > li{
                        > div.photo{
                            width: 100%;
                            order: 1;
                        }
                
                        > div.text{
                            width: 100%;
                            padding: 1em;
                            order: 2;
                        }
                    }
                }
            }
        }
    }
}