:root {
    --default-menu-button-size: 7vmin;
    --default-font-size: 2.7vmin;
    --default-menu-size: 50vmin;
    --default-border-width: 1vmin;
    /* 上記の値は実際にはbase.js内の処理で上書きされる */
}

:root {
    --blank-space: 0px;
}

* {
    box-sizing: border-box;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
    width: 100%;
    height: 100%;
}

body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
    width: 100%;
    height: auto;
}

h1,h2,h3,h4,h5,h6,p {
    margin: 0;
}
body,h1,h2,h3,h4,h5,h6,p {
    --text-stroke-color: rgba(0,0,0,1);
    text-shadow: var(--text-stroke-color) 0.10em 0.00em 0em, var(--text-stroke-color) 0.10em 0.02em 0em, var(--text-stroke-color) 0.09em 0.04em 0em, var(--text-stroke-color) 0.08em 0.06em 0em, var(--text-stroke-color) 0.07em 0.07em 0em, var(--text-stroke-color) 0.06em 0.08em 0em, var(--text-stroke-color) 0.04em 0.09em 0em, var(--text-stroke-color) 0.02em 0.10em 0em, var(--text-stroke-color) 0.00em 0.10em 0em, var(--text-stroke-color) -0.02em 0.10em 0em, var(--text-stroke-color) -0.04em 0.09em 0em, var(--text-stroke-color) -0.06em 0.08em 0em, var(--text-stroke-color) -0.07em 0.07em 0em, var(--text-stroke-color) -0.08em 0.06em 0em, var(--text-stroke-color) -0.09em 0.04em 0em, var(--text-stroke-color) -0.10em 0.02em 0em, var(--text-stroke-color) -0.10em 0.00em 0em, var(--text-stroke-color) -0.10em -0.02em 0em, var(--text-stroke-color) -0.09em -0.04em 0em, var(--text-stroke-color) -0.08em -0.06em 0em, var(--text-stroke-color) -0.07em -0.07em 0em, var(--text-stroke-color) -0.06em -0.08em 0em, var(--text-stroke-color) -0.04em -0.09em 0em, var(--text-stroke-color) -0.02em -0.10em 0em, var(--text-stroke-color) -0.00em -0.10em 0em, var(--text-stroke-color) 0.02em -0.10em 0em, var(--text-stroke-color) 0.04em -0.09em 0em, var(--text-stroke-color) 0.06em -0.08em 0em, var(--text-stroke-color) 0.07em -0.07em 0em, var(--text-stroke-color) 0.08em -0.06em 0em, var(--text-stroke-color) 0.09em -0.04em 0em, var(--text-stroke-color) 0.10em -0.02em 0em;
    color: rgb(255,255,255);
}
html,body,p {font-size: calc( var(--default-font-size) * 1.0 );}
h1 {font-size: calc( var(--default-font-size) * 2.0 );}
h2 {font-size: calc( var(--default-font-size) * 1.5 );}
h3 {font-size: calc( var(--default-font-size) * 1.2 );}
h4 {font-size: calc( var(--default-font-size) * 0.9 );}
h5 {font-size: calc( var(--default-font-size) * 0.75 );}
h6 {font-size: calc( var(--default-font-size) * 0.5 );}

a:link { color: rgb(63,63,255); }
a:visited { color: rgb(127,63,255); }
a:hover { color: rgb(63,127,255); }
a:active { color: rgb(255,63,63); }

hr {
    --hr-size: 0.3vmin;
    background-color: white;
    border-width: var(--hr-size);
    border-style: solid;
    border-color: rgb(127,127,127);
    border-radius: calc( var(--hr-size) * 2 );
    box-shadow:0em 0em 0em var(--hr-size) rgb(255,255,255),0em 0em 0em calc( var(--hr-size) * 2 ) rgb(0,0,0);
    margin: calc( var(--hr-size) * 4 );
    width: calc( 100% - var(--hr-size) * 10 );
}

#menu-button-check {
    display: none;
}

.menu-button {
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    width: calc( var(--default-menu-button-size) );
    height: calc( var(--default-menu-button-size) );
    background-color: rgba(63,63,63,0.8);
    background-image: url("menu-open.svg");
    background-size: 60% 60%;
    background-repeat: no-repeat;
    background-position: left 50% top 50%;
    z-index: 100;
    border-radius: calc( var(--default-menu-button-size) / 4 ) 0 0 calc( var(--default-menu-button-size) / 4 );
    border: solid var(--default-border-width) rgba(0,0,0,1);
}

.menu-content {
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    display: block;
    visibility: hidden;
    padding: 1vmin;
    background-color: rgba(0,0,0,0.8);
    color: rgba(255,2552,255,1);
    margin-left: 0vw;
    margin-top: var(--default-menu-button-size);
    width: calc( var(--default-menu-size) );
    height: calc( 100% - var(--default-menu-button-size) - var(--blank-space) );
    z-index: 100;
    border-radius: calc( var(--default-menu-button-size) / 5 );
    border: solid var(--default-border-width) rgba(0,0,0,1);
}

#title {
    display: flex;
    align-items: center;
    position: absolute;
    padding-left: 1vh;
    margin-left: var(--default-menu-button-size);
    margin-top: 0px;
    width: calc( 100% - var(--default-menu-button-size) );
    height: calc( var(--default-menu-button-size) );
    background-color: rgba(255,255,255,0.8);
    z-index: 100;
    border-radius: 0 calc( var(--default-menu-button-size) / 2 ) calc( var(--default-menu-button-size) / 2 ) 0;
    border: solid var(--default-border-width) rgba(0,0,0,1);
}

#main {
    position: absolute;
    width: calc( 100% );
    height: calc( 100% - var(--default-menu-button-size) - var(--blank-space) );
    margin: 0;
    padding: 0;
    visibility: visible;
}

#main iframe {
    position: absolute;
    width: 100%;
    height: calc( 100% );
    border: none;
    margin: 0;
    padding: 0;
    margin-top: var(--default-menu-button-size);
    background-color: rgba(255,255,255,0.8);
    border-radius: calc( var(--default-menu-button-size) / 5 );
    border: solid var(--default-border-width) rgba(0,0,0,1);
}

#menu-button-check:checked ~ .menu-button {
    background-image: url("menu-close.svg");
}

#menu-button-check:checked ~ .menu-content {
    visibility: visible;
}
@media screen and (orientation: portrait) {
    .menu-content {
        width: 100%;
    }
}

#menu-button-check:checked ~ #main {
    margin-left: var(--default-menu-size);
    width: calc( 100% - var(--default-menu-size) );
}
@media screen and (orientation: portrait) {
    #menu-button-check:checked ~ #main {
        visibility: hidden;
        width: calc( 100% - var(--default-menu-size) );
    }
}