@charset "UTF-8";

@media (max-width:670px ){
  *{
      width:60%;
   }
}


header{
   margin-left:auto;
   margin-right:auto;
}
body{
   display:block;
   margin:0 auto;
}
.center{
   width:950px;
   margin:0 auto;
}
.header-img{
   width:950px;
}

.root{
   margin:30px 0 20px 0;
   color:black;
}
.root span{
   margin:0 10px
}

.index{
   width:200px;
}
.index p{
   background-color:orange;
   color:white;
   padding:10px 30px 5px 30px;
   text-align:center;
   font-weight:bold;
   font-size:18px;
}
.index-in{
   border:2px dotted darkorange;
   color:white;
   text-align:left;
}

.index-in ul{
   margin:0px;
   padding:10px;
   font-size:16px;
}
.index-in a{
   background-color:linen;
   border-left:3px solid orange;
   padding:10px;
   margin:10px 0px;
   color:orange;
   font-weight:bold;
   display:block

}
.index-in a:hover{
   background-color:#ffc680;
   color:white;
}

.index-in p{
 background-color:#dcdcdc;
   text-align:left;
   border-left:3px solid #a9a9a9;
   padding:10px;
   margin:10px 0px;
   color:white;
   font-weight:bold;
   display:block;
   font-size:16px;
}


.main{
   width:720px;
   float:left;
   
   margin-top:18px;
   margin-left:30px;
   display:inline-block;
}
.contents{
   background-color:linen;
   margin-bottom:45px;
   padding:20px;
}
.contents span{
   color:orange;
}
.a{
   display:flex;
   width:950px;
}
h1{
   border-bottom:4px solid orange;
   margin:0 0 20px 0;
   font-weight:normal;
}
h2{
   font-weight:normal;
   border-bottom:2px double orange;
}
   
.clear{
   clear:left;
}
.footer-img{
   text-align:center;
}