@charset "UTF-8";

#container{
    Width:1000px;
    margin:0 auto;
    text-align:left;
    line-height:220%;
    border-style:groove;
    background:white;
  }

#header{
  width:100%;
}

/* 要素セレクター----------------------------*/
h1{
    border-bottom:solid 2px #b0c4de;
}

h2{
    padding-left:10px;
    border-left:solid 5px #3cb371;
    border-bottom:solid 1px #b0c4de;
}

h3{
  padding-left:10px;
  border-left:solid 5px rgb(36, 36, 107);
  border-bottom:solid 1px #b0c4de;
}

/* code{
    padding:10;
    margin-top:0px;
}

pre{
    padding:0;
    margin-top:0px;
    margin-right:6px;margin-left:6px;
    border-style:ridge;
    line-height:150%;
    font-size:15px;
    background-color:#f5f5f5;
    overflow:auto;white-space:pre-wrap;word-wrap:break-word;
} */

p{
    margin-left:5px;
  }
/* ---------------------------------------- */

.red{
    color:red;
}

/* .html:before{
    content:"htmlファイル";
    font-weight: bold;
    color:black;
} */

h3.problem{
  padding-left:10px;
  border-left:solid 5px red;
  border-bottom:solid 1px #b0c4de;
}

/* .css:before{
    content:"cssファイル";
    font-weight: bold;
    color:black;
} */

#web_menu{
  display:flex;
  justify-content:center;
  list-style:none;
  padding:0px;
  /* height:50px; */
 }
  
#web_menu li{
  width:49%;
  /* display:block; */
  /* margin-right:2px;
  margin-left:2px; */
  margin-left:1px;
  text-align:center;
  background-color:#83ccd2;
  border-style:groove;
  /* float:left; */
  }
#web_menu li a{
  text-decoration:none;
  display:block;

  font-weight:bold;
  }
  
#web_menu li:hover{
  background-color:#84b9cb;
  }

#note-mokuzi{
  margin:10px;
  margin-right:50%;
  padding:15px 10px 15px 35px;
  border:solid 1px #777;
  background:#f7f7f7;
}

/* before要素の前に挿入 */
#note-mokuzi:before{
  content:"目次";
  font-weight: bold;
  color:black;
}

/* 画像の扱い */
.IMG{
  width:100%;
}

.kakomi{
  background-color:rgb(209, 209, 209);
}

.browser_result{
  border:3px outset #14ce68;
}

/* 公開日・更新日 */
#publish:before{
  content:"公開日：";
}

#modifi{
  margin-left:30px;
}

#modifi:before{
  content:"更新日：";
}

@media screen and (max-width: 979px){
  #container{
    width:100%;
  }
  #web_menu li{
    width:40%;
  }
  .link-img{
    width:170px;
  }
  .link-img span{
    width:170px;
  }
  .link-img img{
    width:170px;
  }
  #note-mokuzi{
    margin-right:10px;
  }
  .IMG{
    width:100%;
  }

}
  
@media screen and (max-width: 767px) {
  #container{
    width:100%;
  }
  #web_menu li{
    width:40%;
  }
  .link-img{
    width:170px;
  }
  .link-img span{
    width:170px;
  }
  .link-img img{
    width:170px;
  }
  #note-mokuzi{
    margin-right:10px;
  }
  .IMG{
    width:100%;
  }

}
  
@media screen and (max-width: 479px) {
  #container{
    width:100%;
  }
  #web_menu li{
    width:40%;
  }
  .link-img{
    width:150px;
  }
  .link-img span{
    width:150px;
  }
  .link-img img{
    width:150px;
  }
  #note-mokuzi{
    margin-right:10px;
  }
  .IMG{
    width:100%;
  }
}