@media screen and (min-width: 768px) {
div{
  font-size: 28px;
}

h1 img{
  width: 20%;
  margin-right: auto;
}

h2 img{
  width: 10%;
  padding: 20px;
}

.logo{
  padding: 140px;
}

.logo img{
  width: 20%;
}

.hesitation img{
  width: 100%;
}

.merit img{
  width: 30%;
  padding: 10px;
}

.support img{
  width: 40%;
  padding: 10px;
  padding-bottom: 40px;
}

.recommendation{
  background-color: #f5f5f5;
  padding-bottom: 40px;
}


.recommendation_text img{
  width: 20%;
  padding: 100px 10px 20px;
}

.recommendation_main img{
  width: 30%;
  padding-bottom: 40px;
}

.simulation img{
  width: 30%;
}

.flow{
  padding-bottom: 40px;
}

.flow_text img{
  width: 20%;
  padding: 100px 10px 20px;
}

.flow_main img{
  width: 30%;
}

.qa{
  background-color: #f5f5f5;
  padding-bottom: 40px;
}

.qa_text img{
  width: 15%;
  padding: 100px 10px 20px;
}

.qa_main{
  text-align: left;
  padding: 0 200px;
}

.qa_main p:nth-of-type(odd){
  font-weight: normal;
}

.qa_main p:nth-of-type(even){
  font-size: 20px;
  font-weight: normal;
}

.scroll-button {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

button {
  cursor: pointer;
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0;
  appearance: none;
}

 button img{
   width: 80%;
 }

}