#head
{
    position: absolute;
    top:0px;
    z-index:1;
    width: 100%;
    left: 0px;

    @media(min-width:1200px)
    {
        #main-menu
        {
            ul
            {
                li
                {
                    a
                    {
                        color:#fff;
                    }
                }
            }
        }
    }
    #tool-menu
    {
        li
        {
            a
            {
                color:#fff;
            }
        }
    }

}
#body
{
    header
    {
        padding-top: 70vh;
        padding-bottom:10vh;
        background-image:url("<?=userimg($article->photo)?>");
        background-repeat: no-repeat;
    //    background-attachment: fixed;
        background-position: center;
        background-size: cover;
        color:#fff;
        margin-bottom:100px;
        h1
        {
            color:#fff;
        }

        .breadcrumb
        {
            li
            {
                a
                {
                    color:#fff;
                }
            }
        }
    }
    main
    {
        article
        {

            #content
            {
                line-height: 150%;
                letter-spacing: 2px;
                width: 600px;
                margin-left: auto;
                margin-right:auto;
                margin-bottom: 100px;
                p
                {
                    padding:10px 0;
                }
                @media(max-width:600px)
                {
                    width: 100%;
                    padding-left:10px;
                    padding-right:10px;
                }
            }

            #bottom-photo
            {
                width: 100%;
                display: block;
                margin-bottom:100px;
                img
                {
                    width: 100%;
                    display: block;
                }
            }

            #note
            {
                h2
                {
                    margin-bottom:100px;
                    letter-spacing: 2px;
                    font-size:1.4em;
                    text-align: center;
                    font-weight: 600;
                }
                .l
                {
                    margin-bottom: 50px;
                    ul
                    {
                        letter-spacing: 1px;
                        line-height: 140%;
                        list-style-type:square;
                        li
                        {
                            margin-bottom: 10px;
                            a
                            {
                                color:$main-color;
                            }
                        }
                    }
                }
                .s
                {
                    margin-bottom:50px;
                    picture
                    {
                        display: block;
                        width: 100%;
                        img
                        {
                            width: 100%;
                            display: block;
                        }
                    }
                }
                @media(min-width:767px)
                {
                    display: flex;
                    flex-wrap:wrap;
                    h2
                    {
                        width: 100%;
                    }
                    .l
                    {
                        width: 70%;
                        padding-right: 10%;
                    }
                    .s
                    {
                        width: 30%;
                    }
                }
            }
        }
    }
}