@media all and (max-width:900px) {

.header {
    background-color: #253565;
    width:100%;
    display: flex;
}

.header-logo img {
 display:none;
}

.header-logo-small {
    width: 50px;
    flex: auto;
}

.header-logo-small img{
  display:block;
  width: 45px;
  padding-top:10px;
  height: auto;
}

.header-list {
  padding: 10px 0px 40px 10px;
}


.flex-list li {
  flex: auto;
  margin-right: 10px;
  font-family: sans-serif;
}

.header-list a {
 font-size: 8px;
}

.header-list a:hover {
  color:#51b6d7;
}

.explain {
padding:0px 0px 50px 0px;
}

.explain p{
padding:0px 15px;
}

.topics {
  padding:0px 0px 50px 0px;
}

.topics li {
  list-style: none;
  padding-left:0px;
  margin-right:20px;
}

.douga {
  padding:0px 20px;
}

.movie1{
  position:relative;
  width:100%;
padding-top:56.25%;
}

.movie1 iframe {
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

.author {
    padding:50px 0px 50px 0px;
}

.author p{
padding:0px 15px;
}

.purchase {
padding:0px 30px 0px 0px;
}

。purchase-box {
  display: block;
}





}