:root{
    --main_bg_color:#efefef;
    --main_tx_color:#222222;
    --nav_bg_color: #7b8660;
    --nav_tx_color: #efefef;
    --nav_link_color: #c09f9f;
    --image_border:#715e51;
    --button_normal:#715e51;
    --button_hover:#ab907e;
    --before_link:#193acf;
    --after_link:#6276d1;
}

@media (prefers-color-scheme: dark) {
    :root{
        --main_bg_color:#222222;
        --main_tx_color:#cfcfcf;
        --nav_bg_color: #7b8660;
        --nav_tx_color: #efefef;
        --nav_link_color: #c09f9f;
        --image_border:#715e51;
        --button_normal:#715e51;
        --button_hover:#ab907e;
        --before_link:#cf9f19;
        --after_link:#d1b362;
    }
}


*:visited{
    color:var(--after_link);
}

*:link{
    color:var(--before_link);
}

*{
    font-family: "Noto Sans JP", sans-serif;
}
  

body{
    color: var(--main_tx_color);
    background-color: var(--main_bg_color);
}

#header{
    display:inline-block;
    position: fixed;
    top:0px;
    overflow: hidden;
    display:inline-block;
    color: var(--nav_tx_color);
    background-color: var(--nav_bg_color);
    height: 7vh;
    font-size: 5vh;
    width: 100vw;
}

#header img{
    display: inline-block;
    margin-top: 1vh;
    margin-left: 1vh;
    height: 5vh;
}

#header ul{
    display: inline-flex;
    list-style-type: none;
    position: fixed;
    max-width: 50vw;
    right:0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 7vh;
    overflow-x: scroll;
    overflow-y:hidden;
    scrollbar-width:thin;

    li{
        white-space:nowrap;
        padding-left: 1vw;
        padding-right: 1vw;
        font-size: 3vh;
        text-decoration: none;
        height: 7vh;
        background-color: var(--button_normal);
        color: var(--nav_link_color);
    }

    li:hover{
        background-color: var(--button_hover);
    }
}

#content{
    margin-top: 10vh;
    margin-bottom: 10vh;
    text-align: center;
}

#footer {
    display:inline-block;
    position: fixed;
    text-align: center;
    bottom:0px;
    overflow: hidden;
    display:inline-block;
    color: var(--nav_tx_color);
    background-color: var(--nav_bg_color);
    font-size: 2vh;
    height: 6vh;
    width: 100vw;
}

#page_top{
    display:inline-block;
    position: fixed;
    text-align: center;
    margin-bottom: 7vh;
    margin-right: 2vw;
    bottom:0px;
    right: 0px;
    bottom:0px;
    overflow:hidden;
    display:inline-block;
    border-radius: 2.5vh;
    height: 5vh;
    width: 5vh;
    font-size: 3.5vh;
    text-decoration: none;
    background-color: var(--button_normal);
    color: var(--nav_link_color);
}

#page_top:hover{
    background-color: var(--button_hover);
}


img {
    border-radius: 1vh;
    border: solid 0.3vh var(--image_border);
    max-height: 50vh;
    max-width: 90%;
}

@media (orientation: portrait) { /*縦*/
    #content{
        margin-right: 10vw;
        margin-left: 10vw;
        font-size: 3vh;
    }
}

@media (orientation: landscape) { /*横*/
    #content{
        margin-right: 20vw;
        margin-left: 20vw;
        font-size: 2vh;
    }
}