html,
body {
  background-color: rgba(3, 7, 18, 1);
  color: white;
  font-family:  system-ui,sans-serif;
}

:target {
  scroll-margin-top: 10vw;
}
a{
  color: inherit; /* リンクの色を親要素と同じにする */
  text-decoration: none; /* 下線を消す */
}
h1 {
  font-family: "Hiragino Mincho Pro", "MS PMincho", "MS Mincho", serif;
  font-size: 5rem;
  margin: 1rem;
}
header {
  display: flex;
  background-color: rgba(3, 7, 18, 1);
  justify-content: space-around;
  align-items: center;
  height: 10vw;
  width: 100%;
  font-weight: 700;
  position: fixed; /* ヘッダーを固定 */
  top: 0; /* ビューポートの上端から0の位置に */
  left: 0; /* ビューポートの左端から0の位置に */
  z-index: 1000; /* 他の要素より前面に表示 */
}

p {
  font-size: 1.5rem;
  color: gray;
  margin: 1rem;
  font-weight: 700;
}

.sp {
  display: none;
}
.logoImg {
  width: 25vw;
  margin: auto;
  height: auto;
}


.headerLink {
  font-size: 2rem;
}

/* #mainCanvas {
  height: 35vh;
} */

.section {
  height: 100vh;
  width: 90%;
  display: flex;
  align-items: center;
  margin: auto;
  border-top-style: solid;
  border-top-width: 1px;
}
#hero {
  padding: 1rem;
}
.heroSpan {
  font-family: "Times New Roman", Times, serif;
  font-size: 13rem;
  font-style: normal;
}

#about {
  margin: 1rem;
  background-color: rgba(3, 7, 18, 1);
}
#works {
  margin: 1rem;
  background-color: rgba(3, 7, 18, 1);
}
#contact {
  margin: 1rem;
  background-color: rgba(3, 7, 18, 1);
}
.contactSection {
  height: 40vw;
}

.page{
  margin-top: 150px;
}
@media screen and (max-width: 768px) {
  header {
    height: 10vw;
  }

  .sp {
    display: block;
  }

  .headerLink {
    font-size: 1rem;
  }
  /* #mainCanvas {
    height: 55vh;
  } */

  h1 {
    font-size: 4rem;
  }


}