*{
    box-sizing:border-box;
    }
    /* 全共通 */
    body{
    background-color:black;
    margin:0;
    }
    p{color:#FAFAFA;}
    a{
    text-decoration:none;
    color:#FAFAFA;
    }
    a:hover{
    color:gray;
    }

    #footer{
    max-width:100%;
    width: 100%;
    position: fixed;
    bottom: 0;
    justify-items: center;
    color: #FAFAFA;
    background-color:#00008b;
    border-top:#FAFAFA solid 1px;
    }


    /* index.html */

    #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 li{
        padding:10px 10px;
        margin:0;
    }
    .list li:hover{
    color:#000;
    background-color:#FAFAFA;  
    }

    /* 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;
    }

/* list.html */

#base{
  background-color: #000;
  color: #FAFAFA;
}
a{
text-decoration:none;
color:#FAFAFA;
}
a:hover{font-weight: bold;}
#header{
padding-top:1%;
background-color:#00008b;
}
#top-nav{
background-color:#000;
border-top: 1px #FAFAFA solid;
border-bottom: 1px #FAFAFA solid;
}
.top-list{
color: #FAFAFA;
display:flex;
justify-content: space-around;
list-style-type: none;
padding:.5%;
margin:0;
}

.dev_title{
	font-size: larger;
	font-weight: bold;
  padding: 1% 0 1% 0;
	margin:0 5%;
}

.dev_desc{
  border-top:#FAFAFA solid 1px;
	margin:0 5%;
}

#main{
	color:#FAFAFA;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    body{
        display: grid;
        margin:0;
    }
    .counter{
      border:1px solid #000;
      border-radius:2cap;
      padding:4%;
      background:#fff;
      max-width:100%;
    }

    #plusbtn{
        padding:16px 24px;
    }

    #pageupbtn{
        font-size: large;
        display: flex;
        padding:16px 24px;
    }

    #form{margin:0;}

}