/* ===== 全体のスタイル ===== */
* {
  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;
}
/* ===== メニューのスタイル ===== */
/* h2見出し */
h2 {
  color: snow;
  font-size: 20px;
  margin-bottom: 20px;
}

/* メニューのセクション */
.about {
  padding: 30px;
}

.about-p{
  font-size:20px;
  color:sienna;
  font-family:serif;
  margin-bottom:30px;
  padding:20px;
}

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

.kuwashiku-1{
  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;
}

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

.kuwashiku-1-p{
  font-size:20px;
}

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

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

.kuwashiku-2-p{
  font-size:20px;
}

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

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

.kuwashiku-3-p{
  font-size:20px;
}

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

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

.kuwashiku-4-p{
  font-size:20px;
}

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

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

.kuwashiku-5-p{
  font-size:20px;
}

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

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

.kuwashiku-6-p{
  font-size:20px;
}

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

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

.kuwashiku-7-p{
  font-size:20px;
}

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

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

.kuwashiku-8-p{
  font-size:20px;
}

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

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