html {
    width: 100vw;
    height: 100vh;
}

@media screen and (orientation: landscape) {
    body {
        background-image: url(./bg_pc.png);
    }
}
@media screen and (orientation: portrait) {
    body {
        background-image: url(./bg_phone.png);
    }
}
body {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.titleArea {
    margin: 1em auto;
    max-width: 7em;
    font-size: min(3.5rem, max(13vw, 1.56rem));
}
.inputDate {
    margin: 0;
    border: none;
    text-align: right;
    font-size: min(2.7rem, max(10vw, 1.2rem));
}
.inputDate:disabled {
    background-color: rgb(216, 216, 216);
}
.inputSeparater {
    font-size: min(2.7rem, max(10vw, 1.2rem));
}
.inputArea {
    font-size: 0;
    display: flex;
    justify-content: center;
}
.inputWrapper {
    padding: 0px 5px;
    border: 1px solid black;
    background-color: rgba(255, 255, 255, 0.7);
}
.inputWrapper input {
    background-color: rgba(0,0,0,0);
}
.outputArea {
    margin: 1.5em auto;
    max-width: 100%;
    width: fit-content;
    font-size: min(1.8rem, max(4.5vw, 1rem));
}
footer {
    position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}

#inYear {
    width: 3em;
}
#inMonth, #inDate {
    width: 1.7em;
}