header{
  display: flex;
  justify-content: center;
  background-color: #495057;
  color: white;
}
body{
  overflow: hidden scroll;
}

#head{
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#head div{
  margin: 0.5em;
}
#head a{
  text-decoration: none;
  width: 30vw;
  padding-left: 2vw;
}
#head_play{
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  aspect-ratio:1/1;
  border: rgb(167,210,141) 3px solid;
  border-radius: 3em;
  color: black;
  text-align: center;
  font-size: larger;
  font-weight: bold;
  color: rgb(127,159,53);
}
pre{
  margin-left: 3em;
  border: gray 1px solid;
  border-radius: 1em;
  width: 13em;
  padding: 2em
}

#main{
  width: 50vw;
  margin-left: 25vw;
}

#contents{
  margin-left: 2em;
  margin-right: 2em;
}
#contents p{
  margin-left: 1em;
}

#contents ul{
  list-style-type: none;
  margin-left: 1em;
}

.center_img{
  display: flex;
  justify-content: center;
}
.center_img img{
  max-width: 90vw;
}

.left_img{
  display: flex;
}
.left_img img{
  max-width: 20vw;
  object-fit: contain;
}
#main ol li{
  padding-bottom: 2ex;
}

#main h3{
  border-left:  gray solid 0.3em;
  padding-left: 0.5em;
  border-bottom: dotted gray 1px;
  margin-top: 2ex;
}
#main h4{
  padding-left: 0.5em;
  font-size: larger;
}
#main dt {
  clear: left ;
  margin-bottom: 1.5ex;
  margin-left: 2em;
}
#main dd {
  margin-left: 1em ;
  font-weight: bold;
  margin-top: 1.5ex;
}

@media screen and (max-width: 1700px){
  #main{
    margin-left: 15vw;
    width: 70vw;
  }
}
@media screen and (max-width: 1500px){
  #main{
    margin-left: 10vw;
    width: 80vw;
  }
}
@media screen and (max-width: 1300px){
  #main{
    margin-left: 5vw;
    width: 90vw;
  }
  #head{
    flex-direction: column;
    align-items: flex-start;
  }
  #head_play{
    width: 80vw;
    aspect-ratio:4/1;
  }
  #head img{
    width: 80vw;
  }
  .left_img{
    display: flex;
    flex-direction:column;
    align-items: center;
  }
  .left_img img{
    max-width: 60vw;
  }
}
@media screen and (max-width: 1024px){
  #main{
    margin-left: 1vw;
    width: 98vw;
  }
  #head{
    flex-direction: column;
    align-items: center;
  }
  #head_play{
    width: 60vw;
    aspect-ratio:4/1;
  }
  #head img{
    width: 80vw;
  }
  #head a{
    width: auto;
    padding-left: auto;
  }
  #contents{
    margin-left: 1em;
    margin-right: 1em;
  }
  #contents p{
    margin-left: 0.5em;
  }
}
@media screen and (max-width: 980px){
/*  */
}
@media screen and (min-width: 426px)and (max-width: 980px){
  /*  */
}