body {
    margin: 0;
    /* width: 100vw; */
    width: calc(100vw - calc(100vw - 100%));
    /* overflow-x: hidden; */
    font-family: 'Times New Roman','Meiryo',sans-serif;
    display: grid;
    grid-template:
    "header" 40px
    "main" auto/
    auto;
}
@media (min-width: 767px){
    body {
        grid-template:
    "header header header " 40px
    "...... main   ...... " auto/
    100px  auto 120px;
    }
}
main{
    grid-area: main;
}
header{
    grid-area: header;
    /* padding: .5rem; */
    color: #fff;
    background-color: #373a3e;
    font-size: 1.5rem;
    border: solid;
    border-color: #373a3e;
    display: grid;
    grid-template:
    "title ... logout" /
    auto auto 120px;
}
logo{
    grid-area: title;
}
logout{
    grid-area: logout;
}
/* minna > a,
logout > a */
header a{
    color: white;
    text-decoration: none;
}
main a:visited{
    color: blue;
}

.submit{
    background-color: #0d6efd;
    border-color: #0d6efd;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    padding: 2px 4px;
    text-decoration-line: none;
    transition-delay: 0s, 0s, 0s;
    transition-duration: 0.15s, 0.15s, 0.15s;
    transition-property: color, background-color, border-color;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
    user-select: none;
}
.singup:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}