*{
    box-sizing:border-box;
    }
    
    body{
    background-color:black;
    margin:0;
    }
    p{color:#FAFAFA;}
    a{
    text-decoration:none;
    color:#FAFAFA;
    }
    a:hover{
    color:gray;
    }
    #main a:hover{
    font-weight: bold;
    color:#000;
    background-color:#FAFAFA;
    }
    #main p{
    display:flex;
    justify-content: space-around;
    margin:.5%;
    }
    
    #header{
    padding-top:1%;
    background-color:#00008b;
    }
    #top-nav{
    background-color:#000;
    border-top: 1px #FAFAFA solid;
    border-bottom: 1px #FAFAFA solid;
    }
    #top-nav .list a:hover{
    font-weight: bold;
    color:#000;
    }
    
    .list{
    display:flex;
    justify-content: space-around;
    list-style-type: none;
    padding:.5%;
    margin:0;
    }
    .list:hover{
    color:#000;
    background-color:#FAFAFA;
    
    }
    
    #footer{
    display:flex;
    justify-content: center;
    }

    /* form.php */
.sitemap{
    color: #FAFAFA;
    margin:.5%;
    }
.container {
    margin:auto;
    max-width: 767px;
    background: #FAFAFA;
    padding: 30px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;

    }
.container .labtitle{color:#000;}
#form_title{
     display:flex;
    justify-content:center;
    color:#000;
    }
#formarea textarea{
    width: 100%;
    padding: 8px;
    resize: none;
    }
form { max-width: 500px; margin: auto; }
#formarea input{
    width: 100%;
    padding: 8px;
}
.labelname{
    color:#FAFAFA;
    }
.req{color:red; font-size:x-small;}
.non_req{color:blue; font-size:x-small;}
#btnarea{
    display:flex;
    justify-content:space-evenly;
    }
#btnarea input{
    background-color:#00008b;
    color:#FAFAFA;
    margin-top: 20px;
    padding: 10px 20px;
    border-radius:25% 10%;
    }
#btnarea input:hover{
    background-color:blue;
    }

/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
    body{margin:0;}
    .container {
        max-width:100%;
        margin: 20px;
        padding: 20px;
    }
    #form{margin:0;}
}