/*
----------------------------------------------------------
                        1連
----------------------------------------------------------
*/
/* 
デフォルト：479px以下用の記述 
*/

body{
    line-height: 160%;
    font-size: 100%;
}

/*全体*/
#columns{
    flex-wrap:wrap;
}

/*上*/
#contents_F{
    width:100%; 
    padding:10px;
    order:1;
}

.icon_matomari{
    display:flex;
    flex-direction:row;
    padding-bottom:10px;
    border-radius: 5px;
}

.icon_matomari [data-icon_adr="#"]{
    display:none;
}

.svg_cap2{
    display:none;
}
    
/*中*/
#center{
    width:100%;
    order:2;
}


/*下*/
#contents_D{
    width:100%;
    order:3;
}


/*
----------------------------------------------------------
                        2連
----------------------------------------------------------
*/
/* 
480px-980px用の記述
10:90
100
*/


@media screen and (min-width: 480px) {

    /*左*/
    #contents_F{
        width:10%;
        padding-top:10px;
        padding-bottom:10px;
        padding-right:0px;
        padding-left:0px;
        /*min-width:60px;これを入れるとカラム落ちする*/    
        order:1;
    }

    .icon_matomari{
        flex-direction:column;
        position: sticky;
        top:0;
    }

    .icon_matomari [data-icon_adr="#"]{
        display:flex    ;
    }
    
    .svg_cap2{
        display:none;
    }

    /*センター*/
    #center{
        width:90%;
        order:2;
    }

    /*下*/
    #contents_D{
        width:100%;
        order:3;
    }
    
}
/*
----------------------------------------------------------
                        3連
----------------------------------------------------------
*/
/* 980px以上用の記述 */
@media screen and (min-width: 980px) {

    #columns{
        flex-wrap:nowrap;
    }

    /*左*/
    #contents_F{
        flex:1;
        order:1;
    }

    /*センター*/
    #center{
        /*F欄60pxは仮定*/
        width:calc(100% - 210px - 60px);
        /*flex:1;*/
        order:2;
    }

    /*右*/
    #contents_D{
        min-width:210px;
        flex:1;
        order:3;
    }

    .icon .svg_cap2{
        display:none;
    }
 

}

/* 1180px以上用（PC用）の記述 */
/*3連*/
@media screen and (min-width: 1180px) {
    #contents_F .icon{
        flex-direction: row;
    }
    .icon svg{
        flex:1;
    }
    .icon .svg_cap2{
        flex:1;
        display:block;
    }
    .icon .svg_cap{
        display: none;
    }

}