/* ===== 全体のスタイル ===== */
* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
   height: 100%;
  background-color:antiquewhite;
  text-align:center;
}

/* ===== ヘッダーのスタイル ===== */
/* ヘッダー */
header {
  color: antiquewhite;
  padding: 50px;
  background-image:url(img/School.jpg);
  background-color:gray;
  background-blend-mode:multiply;
}

/* h1見出し */
h1 {
  font-size: 40px;
  font-family: serif;
}

.subtitle{
  font-size:25px;
}

/*ナビゲーションの箱*/
nav{
background-color:antiquewhite;
padding-top:30px;
padding-bottom:30px;
}

/*リスト全体*/
nav ul{
margin-top:0px;
margin-bottom:0px;
text-align:center;
}

/*1つ１つのリスト*/
nav li{
display:inline-block;
margin-right:100px;
}

/*リンク*/
nav a{
color:indianred;
font-size:17px;
font-family:serif;
text-decoration:none;
background-color:antiquewhite;
background-image:linear-gradient(to right,antiquewhite 40%,transparent 50%,rosybrown 50%);
background-position:0 0;
background-size:200% auto;
transition:0.3s;
border-radius:3px;
padding:10px;
}

/*リンクに触れた時*/
nav a:hover{
color:white;
background-position:-100% 0;
}





/* リンク */
a {
  color: indianred;
  background-color: antiquewhite;
  background-image:linear-gradient(to right,transparent 50%,rosybrown 50%);
  background-position:0 0;
  background-size:200% auto;
  transition:0.3s;
  padding: 10px;
  text-decoration: none;
  border-radius: 3px;
  display: block;
  text-align: center;
}

/* リンクにさわった時 */
a:hover {
 color: white;
  background-position:-100% 0;
}

.brief{
  font-family:serif;
  color:rosybrown;
  font-size:15px;
  margin-top:50px;
  margin-bottom:100px;
}

/* ===== フッターのスタイル ===== */
/* フッター */
footer {
  color: rosybrown;
  text-align: center;
  padding-top: 100px;
}