/* ===== 全体のスタイル ===== */
* {
  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;
}

.tokyo{
  font-size:20px;
  padding:20px;
  font-family:serif;
  color:sienna;
  
}

.tokyo-school{
  font-family:serif;
  color:sienna;
  font-size:20px;
  text-align:center;
   margin-left: auto;
    margin-right: auto;
    width: 800px
}

.tokyo-school1{
  background-color: rgba(255,255,255,0.3);
  padding:20px;
  border-style:solid;
  border-color:rosybrown;
  border-radius:10px;
  margin-bottom:20px;
  font-family:serif;
}

.tokyo-school1-title{
  font-size:20px;
  margin-bottom:20px;
  border-style: dashed;/* 線の種類 */
  border-color: rosybrown;/* 線の色 */
  padding:10px;
  border-radius:10px;
}

.tokyo-school1-p{
  font-size:20px;
}

.tokyo-school2{
   background-color: rgba(255,255,255,0.3);
  padding:20px;
  border-style:solid;
  border-color:rosybrown;
  border-radius:10px;
  margin-bottom:20px;
}

.tokyo-school2-title{
  font-size:20px;
  margin-bottom:20px;
  border-style: dashed;/* 線の種類 */
  border-color: rosybrown;/* 線の色 */
  padding:10px;
  border-radius:10px;
}

.tokyo-school-p{
  font-size:20px;
}

.tokyo-school3{
   background-color: rgba(255,255,255,0.3);
  padding:20px;
  border-style:solid;
  border-color:rosybrown;
  border-radius:10px;
  margin-bottom:20px;
}

.tokyo-school3-title{
  font-size:20px;
  margin-bottom:20px;
  border-style: dashed;/* 線の種類 */
  border-color: rosybrown;/* 線の色 */
  padding:10px;
  border-radius:10px;
}

.tokyo-school3-p{
  font-size:20px;
}

.tokyo-school4{
   background-color: rgba(255,255,255,0.3);
  padding:20px;
  border-style:solid;
  border-color:rosybrown;
  border-radius:10px;
  margin-bottom:20px;
}

.tokyo-school4-title{
  font-size:20px;
  margin-bottom:20px;
  border-style: dashed;/* 線の種類 */
  border-color: rosybrown;/* 線の色 */
  padding:10px;
  border-radius:10px;
}

.tokyo-school4-p{
  font-size:20px;
}

.tokyo-school5{
   background-color: rgba(255,255,255,0.3);
  padding:20px;
  border-style:solid;
  border-color:rosybrown;
  border-radius:10px;
  margin-bottom:20px;
}

.tokyo-school5-title{
  font-size:20px;
  margin-bottom:20px;
  border-style: dashed;/* 線の種類 */
  border-color: rosybrown;/* 線の色 */
  padding:10px;
  border-radius:10px;
}

.tokyo-school5-p{
  font-size:20px;
}

.tokyo-school6{
   background-color: rgba(255,255,255,0.3);
  padding:20px;
  border-style:solid;
  border-color:rosybrown;
  border-radius:10px;
  margin-bottom:20px;
}

.tokyo-school6-title{
  font-size:20px;
  margin-bottom:20px;
  border-style: dashed;/* 線の種類 */
  border-color: rosybrown;/* 線の色 */
  padding:10px;
  border-radius:10px;
}

.tokyo-school6-p{
  font-size:20px;
}

.tokyo-school7{
   background-color: rgba(255,255,255,0.3);
  padding:20px;
  border-style:solid;
  border-color:rosybrown;
  border-radius:10px;
  margin-bottom:20px;
}

.tokyo-school7-title{
  font-size:20px;
  margin-bottom:20px;
  border-style: dashed;/* 線の種類 */
  border-color: rosybrown;/* 線の色 */
  padding:10px;
  border-radius:10px;
}

.tokyo-school7-p{
  font-size:20px;
}

.tokyo-school8{
   background-color: rgba(255,255,255,0.3);
  padding:20px;
  border-style:solid;
  border-color:rosybrown;
  border-radius:10px;
  margin-bottom:20px;
}

.tokyo-school8-title{
  font-size:20px;
  margin-bottom:20px;
  border-style: dashed;/* 線の種類 */
  border-color: rosybrown;/* 線の色 */
  padding:10px;
  border-radius:10px;
}

.tokyo-school8-p{
  font-size:20px;
}

.tokyo-school9{
   background-color: rgba(255,255,255,0.3);
  padding:20px;
  border-style:solid;
  border-color:rosybrown;
  border-radius:10px;
  margin-bottom:20px;
}

.tokyo-school9-title{
  font-size:20px;
  margin-bottom:20px;
  border-style: dashed;/* 線の種類 */
  border-color: rosybrown;/* 線の色 */
  padding:10px;
  border-radius:10px;
}

.tokyo-school9-p{
  font-size:20px;
}

.tokyo-school10{
   background-color: rgba(255,255,255,0.3);
  padding:20px;
  border-style:solid;
  border-color:rosybrown;
  border-radius:10px;
  margin-bottom:20px;
}

.tokyo-school10-title{
  font-size:20px;
  margin-bottom:20px;
  border-style: dashed;/* 線の種類 */
  border-color: rosybrown;/* 線の色 */
  padding:10px;
  border-radius:10px;
}

.tokyo-school10-p{
  font-size:20px;
}

.tokyo-school11{
   background-color: rgba(255,255,255,0.3);
  padding:20px;
  border-style:solid;
  border-color:rosybrown;
  border-radius:10px;
  margin-bottom:20px;
}

.tokyo-school11-title{
  font-size:20px;
  margin-bottom:20px;
  border-style: dashed;/* 線の種類 */
  border-color: rosybrown;/* 線の色 */
  padding:10px;
  border-radius:10px;
}

.tokyo-school11-p{
  font-size:20px;
}


/*ナビゲーションの箱*/
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;
}