/*body内の文字の設定(全体)*/
body {
    font-family:"メイリオ","Arial",sans-serif;
    background-color:#ebebeb;
    background-image: url("haikei1.jpg");
    background-attachment: fixed;
}

 /*サイドバーの設定*/
 .side {
   background-color:rgba(97, 27, 0, 0.600);
   width:300px;
   height:1200px;
   text-align:center;
 } 

 #side {
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(97, 27, 0, 0.600);
  }
 
  /*メイン画面の設定*/
 .main {
   background-color:rgba(97, 55, 0, 0.600);
   width:1600px;
   height:1200px;
   text-align:center;
   margin-left:10px;/*サイドバーとメインコンテンツの間に隙間をあけた*/
 }

 article {
    display:flex;/*サイドバーとメインコンテンツを横並びにする指定をした*/
  }

 /*メインの文字の装飾*/
h1 {
    font-size: 2.8rem;
    font-weight: bold;
    color: rgba(201, 90, 0, 0.900);
    text-shadow: -1px -1px 1px rgb(31, 7, 0),
                 0px 4px 1px rgba(0,0,0,0.5),
                 4px 4px 5px rgba(0,0,0,0.7),
                 0px 0px 7px rgba(0,0,0,0.4);
  }

.class1 {
    font-size: 1.6rem;
    color: rgba(0, 0, 0, 0.9);
  }
 
  /*サイドバーの文字の装飾*/
a:link {
        color: rgba(39, 18, 0, 0.900);
        font-size: 1.8rem;
        text-decoration:none;
    }
a:hover {color: rgba(39, 18, 0, 0.460)}
a:visited {color: rgba(39, 18, 0, 0.700)}



/* 以下サイズ別の記述 */

@media screen and (max-width: 959px) {
	/* タブレット用 */
 /*メインの文字の装飾*/
 h1 {
  font-size: 2.0rem;
  font-weight: bold;
  color: rgba(201, 90, 0, 0.900);
  text-shadow: -1px -1px 1px rgb(31, 7, 0),
               0px 4px 1px rgba(0,0,0,0.5),
               4px 4px 5px rgba(0,0,0,0.7),
               0px 0px 7px rgba(0,0,0,0.4);
}

.class1 {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.9);
}

/*サイドバーの文字の装飾*/
a:link {
      color: rgba(39, 18, 0, 0.900);
      font-size: 1.4rem;
      text-decoration:none;
  }
a:hover {color: rgba(39, 18, 0, 0.460)}
a:visited {color: rgba(39, 18, 0, 0.700)}

}


@media screen and (max-width: 480px) {
  /* スマホ用 */
 /*メインの文字の装飾*/
 h1 {
  font-size: 1.4rem;
  font-weight: bold;
  color: rgba(201, 90, 0, 0.900);
  text-shadow: -1px -1px 1px rgb(31, 7, 0),
               0px 4px 1px rgba(0,0,0,0.5),
               4px 4px 5px rgba(0,0,0,0.7),
               0px 0px 7px rgba(0,0,0,0.4);
}

.class1 {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.9);
}

/*サイドバーの文字の装飾*/
a:link {
      color: rgba(39, 18, 0, 0.900);
      font-size: 1.0rem;
      text-decoration:none;
  }
a:hover {color: rgba(39, 18, 0, 0.460)}
a:visited {color: rgba(39, 18, 0, 0.700)}
}