@charset "utf-8";

#about_me {
  max-width: 1000px;
  margin: 150px auto 250px;
}
h2 {
  text-align: center;
}
h2 img {
  width: 50%;
}
.myself {
  display: flex;
  align-items: center;
  margin-top: 100px;
}
.my_pic {
  width: 50%;
  margin-left: 0;
}
.my_pic img {
  width: 100%;
}
.skills_info {
  display: block;
  width: 50%;
}
#skills {
  width: 30%;
  min-width: 90px;
}
#expertise {
  width: 45%;
  min-width: 120px;
  margin-top: 80px;
}
#skills,
#expertise {
  scroll-margin-top: 120px; /* 位置のズレを修正 */
}
.skills_info p,
.introduction p {
  font-size: 1em;
  line-height: 2;
}
.my_name img {
  width: 40%;
  margin: 20px 0 auto;
}
.my_name,
.introduction {
  margin-left: 7%;
}

/* レスポンシブ */
@media screen and (max-width: 767px) {
  #about_me {
    margin: 80px 30px 200px;
  }
  h2 img {
    width: 75%;
  }
  .myself {
    display: flex;
    margin: 60px 0 0;
    flex-direction: column-reverse;
  }
  .skills_info {
    width: 100%;
    margin: 0;
  }
  #skills,
  #expertise {
    width: 100%;
  }
  #skills img {
    width: 30%;
    min-width: 90px;
  }
  #expertise img {
    width: 45%;
    min-width: 120px;
  }
  #expertise {
    margin-top: 50px;
  }

  .my_pic {
    width: 70%;
    margin-top: 60px;
  }
  .my_name {
    width: 100%;
    text-align: center;
    margin: 0 auto 40px;
  }
  .my_name img {
    width: 65%;
  }
  .introduction {
    margin-left: 0;
  }
}