body {
    --baseFonts: "Outfit", "Outfit_Local", "Noto Sans JP", "SF Pro JP", "Arial", "Roboto", sans-serif;
    --baseTextColor: black;
    --baseBgColor: hsl(0, 0%, 100%);
    --baseDuration: 0.3s;
    --baseRadius: 25px;
    --headerTop: 0px;
    --headerHeight: 50px;
    --headerTotalHeight: calc(
        var(--headerTop) + var(--headerHeight)
    );
    --baseLayeredBg: rgba(
        255,
        255,
        255,
        .8
    );
    --baseBdFilter: blur(20px);
    --baseBtnPadding: 10px;
    --baseBoxShadow: gray 0 0 20px;
    --dScrollY: 0px;

    background-color: var(--baseBgColor);
    margin: 0;
    padding: 0;
    font-family: var(--baseFonts);
    color: var(--baseTextColor);
}
body > div.top.contents {
    position: relative;
    width: 100%;
    height: 50vh;
    margin-top: calc(var(--headerTotalHeight) + 5px);
}
body > main,
body > main-area,
body > div.main.contents {
    --mainContentsWidth: 100vw;
    display: block;
    position: relative;
    width: var(--mainContentsWidth);
    height: auto;
    min-height: calc(100vh - var(--headerHeight) - 10px);
    margin-top: calc(
        var(--headerTotalHeight) + 10px
    );
}
body .button,
body button {
    --btnVerticalPadding: 5px;
    background-color: var(--baseLayeredBg);
    padding: var(--baseBtnPadding);
    padding-top   : var(--btnVerticalPadding);
    padding-bottom: var(--btnVerticalPadding);
    box-shadow: var(--baseBoxShadow);
    border-radius: var(--baseRadius);
    border: none;
    outline: none;
    transition: 
    width      var(--baseDuration) ease-in-out,
    height     var(--baseDuration) ease-in-out,
    opacity    var(--baseDuration) ease-in-out,
    box-shadow var(--baseDuration) ease-in-out;
}
body .button:hover,
body button:hover {
    box-shadow: gray 0 0 20px;
    cursor: pointer;
}

.invalid {
    opacity: .5;
    pointer-events: none;
}