:root{
    --common-header-h1-color:           black;
    --common-header-h1-color-hover:     #619947;
    --common-header-height:             6em;
    --common-header-height-mini:        3.0em;
    --common-header-horizontal-padding: 2em;
    --common-header-vertical-padding:   1em;
}

/*
    "Mochiy Pop One" is lisenced under the SIL Open Font License 1.1
    by The Mochiypop Project Authors(https://github.com/fontdasu/Mochiypop)
*/
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');

header{
    position:               fixed;
    top:                    0px;
    left:                   0px;
    width:                  calc(100% - 2 * var(--common-header-horizontal-padding));
    height:                 var(--common-header-height);
    padding:                var(--common-header-vertical-padding) var(--common-header-horizontal-padding);
    white-space:            nowrap;
    z-index:		        16777215;
    background:             #ffffff;
}

header.mini{
    height:                 var(--common-header-height-mini);
}

header h1{
    margin:                 0;
    max-width:              100%;
    font-family:            "Mochiy Pop One", sans-serif;
    container:              headerH1Parent / inline-size;
}

header h1 a{
    color:                  var(--common-header-h1-color);
    text-decoration:        inherit;
    transition:             0.25s;
}

header h1 a:hover{
    color:                  var(--common-header-h1-color-hover);
}

@container headerH1Parent (max-width: 544px){
    header h1 span.HideShort,
    header h1 span.AfterPart{
        font-size:          0.75em;
    }
}

@media screen and (max-width: 567px){
    header{
        width:              calc(100% - 2em);
        height:             calc(var(--common-header-height) + 2em);
        padding-left:       1em;
        padding-right:      1em;
    }

    header.mini{
        height:             calc(var(--common-header-height-mini) + 2em);
    }
    
    header h1 a{
        display:            block;
        width:              320px;
        margin-left:        auto;
        margin-right:       auto;
    }

    header h1 span.HideShort{
        display:            none;
    }
    
    header h1 span.AfterPart{
        display:            block;
        font-size:          0.75em;
        width:              6em;
        margin-left:        calc(320px - 6em);
    }
}

@media screen and (max-width: 384px){
    header{
        width:              calc(100% - 2em);
        padding-left:       1em;
        padding-right:      1em;
    }
    
    header h1 a{
        margin-left:        auto;
        margin-right:       auto;
    }
}

header ul.global_menu{
    display:                flex;
    justify-content:        center;
    list-style-type:        none;
    padding:                0;
    margin:                 0.5em auto;
}

header ul.global_menu .menu_content{
    display:                block;
    padding:                0.5em;
    margin-right:           0.1em;
    width:                  10em;
    border:                 0.15em solid;
    font-family:            "Mochiy Pop One", sans-serif;
    text-align:             center;
    text-decoration-line:   none;
    border-radius:          0.1em;
    transition:             0.1s;
}

header ul.global_menu a.menu_content{
    border-color:           deepskyblue;
    color:                  deepskyblue;
}

header ul.global_menu a.menu_content:hover{
    border-style:           outset;
    color:                  white;
    background-color:       deepskyblue;
    border-radius:          1em;
    transition:             0.1s;
}

header ul.global_menu a.menu_content:active{
    border-style:           inset;
    color:                  lightcyan;
    background-color:       dodgerblue;
    border-color:           dodgerblue;
    border-radius:          0.75em;
    transition:             0.1s;
}