@layer custom;

@layer custom {
    html {
        color: #222;
        font-size: 100%;
        font-size: calc(1em + 1vw);
    }
    
    body {
        width: 70%;
        margin: auto;
        background: #eee;
    }
    
    p {
        margin: 1.5em 0;
        font-size: 1em;
        line-height: 1.5;
    }
    
    p a:focus {
        outline: none;
        background-color: #ffbf47;
    }
    
    [href^="https"]:not([href*="tomcatwork.conf.jp"])::after {
        content: "(外部リンク)";
        overflow: hidden;
        white-space: nowrap;
    
        display: inline-block;
        width: 1em;
        height: 1em;
    
        text-indent: 1em;
    
        background-image: url("assets/img/external_icon.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 75% auto;
    }


    header {
        display: flex;
        justify-content: space-between;

        margin: 2em 0;
    }

    header h1.maintitle {
        margin: 1em 0;
        font-size: 120%;
        text-decoration: none;
    }
        header h1.maintitle a {
            color: #222;
            text-decoration: none;
        }
    
    header .mainguide {
        font-size: 90%;
    }
    

    .dateseparator {
        display: none;
        font-size: 0.5em;
    }

    .onelogside {
        display: none;
    }

    .onelogbox {
        margin-bottom: 5em;
    }

    .oneloginfo {
        font-size: 70%;
    }
}