body{ background-color:azure; }
#wrapper{ background-color: beige; }
#header{ background-color: cadetblue;
         text-align: center;
         color: khaki;
         padding: 12px;
}
#navi{ background-color: darkolivegreen; }
#contents{ background-color: darkgoldenrod; }
#side{ background-color: darkkhaki;}
#main{ background-color: linen;}
#footer{ background-color: green;
         margin-bottom: 15px;
         color: yellow; 
         padding: 12px;
         font-size: 20px;
         text-align: center;    
        
        }

#keyimage{ 
          display: flex;
          width: 400px;
          margin-left: auto;
          margin-right: auto;
          margin-top: 10px;
          margin-bottom: 10px;
          align-items: center;
         }
        #info img {
          
          border-radius: 50%;
          border-width: 5px;
          border-style: solid;
          border-color:indianred;
        }          
#icon ul li {

 margin-left: 10px;
 font-size: 18px;
 color:rgb(7, 22, 241);
width: 500px;
line-height: 1.8;
font-family: Verdana, sans-serif;

  
}


*{ 
  margin: 0;   
  padding: 0; 
  box-sizing: border-box;  
}
li{ list-style-type: none; }
img { vertical-align: bottom; }


#wrapper{
  width: 940px;
  margin: 0 auto 0 auto;
}
#navi ul{
  display: flex;
  flex-wrap: wrap;
}
#navi ul li{
  width: 20%;
  background-color: aqua;
}
#navi ul li a{
  display: block; 
  text-align: center; 
  text-decoration: none; 
  height: 100px;
  padding: 30px 0 0 0; 
}
#navi ul li a:hover{
  background-image: url("../html.css/images/原田.png");
  background-position: top left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}

#navi ul li.sato a:hover{
  background-image: url("../html.css/images/佐藤.png");
  background-position: top left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}
#navi ul li.hanari a:hover{
  background-image: url("../html.css/images/羽成真.png");
  background-position: top left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}
#navi ul li.tamaru a:hover{
  background-image: url("../html.css/images/田丸.png");
  background-position: top left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}
#navi ul li.kuramochi a:hover{
  background-image: url("../html.css/images/倉持\ 先生.png");
  background-position: top left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}

#contents{
  display: flex;
  flex-wrap: wrap;
}
#side{
  width: 300px;
}

#side ul li a{
  display:block;
  background-color: aqua;
  text-decoration: none;
  padding: 10px;
  margin: 0 0 10px 0;
}
#side ul li a:hover{
  background-color: beige;
}
#main{
  width:620px;
  margin: 0 0 0 20px;
  display: flex;
  flex-wrap: wrap;
 
}
#main h2{
  width: 100%;
  color: red;
}
#main .box{
  width: 50%;
  margin: 0 0 50px 0;
  padding: 5px;
}
#main h3{
  position: relative;
  padding: 0.5em;
  background: #a6d3c8;
  color:black;
}
#main h3::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}
#contents h2 {
  padding: 20px;
  color: darkmagenta;
  background: thistle;
  border-left: solid 5px #ffaf58;
  margin: 0 0 20px 0;
  text-align: center;
}