@charset "UTF-8";

body{
    font-family:Verdana,'Arial Black',メイリオ,sans-serif;
    background:#e7e7eb;
    /* background:repeating-linear-gradient(90deg,#068b71 25%,#fff 50%,#00a5de 75%); */
    /* background-image:url(../img/背景.jpg);*/
  }

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

table{
  width:100%;
}

/* button{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 300px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  background-color: #cccccc;
  box-shadow: 0 5px 0 #aaaaaa;
  transition: 0.3s;
}

button ::after{
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

button :hover{
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 2px 0 #aaaaaa;
} */
  
#header{
  width:100%;
}

.img{
  width:100%;
}

h1 {
    position: relative;
    padding: 0.1em 0.5em;
    background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
    background: linear-gradient(to right, rgb(255, 186, 115), transparent);
    color: #545454;
  }

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

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

  #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;
    }

#archive a{
    /* background-color:#fffafa; */
    color:blue;
    border:1px solid #556b2f;
    text-decoration:none;
    margin-top:15px;
    font-size:20px;
    display:block;
}

h3{
    padding:3px;
}

.item a{
    background-color:#008080;
    margin-left:15px;
}

.link-img{
  display: block;
  position:relative;
  float:left;
  border:2px groove #6495ed;
  margin-left:3px;
  width:180px;
}

.link-img img{
width:180;
}

.link-img span{
  left:0px;
  position:absolute;
  bottom:5px;
  width:180px;
  text-align:center;
  color:white;
  background-color:black;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
}

.link-img a{
display:block;
}

#back{
  display:inline-block;
}

#next{
  display:inline-block;
  margin-left:25px;
}

/* 目次 */
#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;
}

/* 余白あけるぞ */
.new_line{
  line-height:350%;
}

/* 戻るボタン装飾 */
/* パソコン・スマホ共通のCSS */
#PageTopBtn {
  position: fixed; /*ボタンの配置場所を固定*/
  bottom: 10px; /*下からのボタンの配置場所を指定*/
  right: 10px; /*右からのボタンの配置場所を指定*/
}
#PageTopBtn a {
  display: block; /*配置の調整*/
  text-decoration: none; /*文字の下線を消す*/
  color: #fff; /*文字の色*/
  background: #006400; /*ボタンの背景色*/
  text-align: center; /*文字を中央に配置*/
  border-radius: 5%; /*ボタンの角を少し丸くする*/
  outline: none; /*クリックしたときの黒い枠を消す*/
}
#PageTopBtn a:hover {
  text-decoration: none; 
  background: #3cb371; /*マウスオーバー時の背景色*/
}

/* パソコンで表示する場合のCSS */
@media (min-width: 768px) {
  #PageTopBtn {
    font-size: 13px; /*文字のサイズ*/
  }
  #PageTopBtn a {
    width: 100px; /*ボタンの幅*/
    height: 50px; /*ボタンの高さ*/
    padding: 24px 0; /*文字の配置場所の調整*/
  }
  }
  
  /* スマホで表示する場合のCSS */
  @media (max-width: 767px) {
  #PageTopBtn {
    font-size: 10px;
  }
  #PageTopBtn a {
    width: 70px;
    height: 50px;
    padding: 17px 0;
    background-color: rgba( 204, 255, 204, 0.55 );
    color:#4682b4;
  }
  }

@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%;
  }
}

#hole1,#hole2,#hole3,#hole4{
  color:	#191970;
  font-weight: bold;
  font-size: 1.3em;
}

.hole1,.hole2,.hole3,.hole4{
  color:	#191970;
  font-weight: bold;
  font-size: 1.3em;
}

#answerHidden,#btCommentary{
  background-color: #b0c4de;
  border-style: none;
  height: 35px;
  width: 150px;
}

#question{
  margin-bottom: 50px;
}

#backQuestion,#nextQuestion{
  border-style: none;
  margin:auto 0;
  height: 35px;
  width:40%;
  font-size: 0.8em;
  background-color: #ffa500;
}

#backQuestion:hover,#nextQuestion:hover{
  background-color: #ff8c00;
}

#nextBack{
  margin-top:20px;
}

#canvas{
  width:100%;
  height: 100px;
  /* margin-top: 30px; */
}

#progress{
  /* margin: 0 auto; */
  height: 100px;
  width: 100%;
}

#commentary{
  display: none;
  background-color: #e6e6fa;
}

#index{
  margin-top:20px;
}

#index button{
  margin-top:10px; 
  margin-right:10px;
  border-style: none;
  height: 35px;
  width:10%;
  font-size: 0.8em;
  background-color: #add8e6;
}

*{
  letter-spacing: .0.4em;
}

#howUse{
  background-color: #b0c4de;
}