/* hero */
.hero-section {
  font-size: larger;
  position: relative;
  height: 500px;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

}

.hero-section > h1 {
  margin: 0;
  color: #2c2c2c;
  padding: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500px;
  font-style: italic;
}

@media screen and (max-width: 750px) {
  .hero-section {
    height: 350px;
  }

  .hero-section > h1 {
    font-size: 20px;
    width: 100%;
    position: absolute;
    text-align: center; /* 中央寄せ */
    display: inline-block;/* 文字の大きさにフィットさせる */
  }
}


h2.top-h2 {
  margin: 0;
  font-size: 2.3rem;
}

h3.top-h3 {
  margin: 0;
  font-size: 1.3rem;
}

h4.top-h4 {
  margin: 0;
}

/* moon icon */
.moon-icon {
  /* #f6b9eb - ピンク */
  filter: brightness(0) saturate(100%) invert(91%) sepia(98%) saturate(1161%) hue-rotate(288deg) brightness(96%) contrast(95%);
}

.health-icon {
  /* #ebef76 - 黄緑 */
  filter: brightness(0) saturate(100%) invert(95%) sepia(88%) saturate(397%) hue-rotate(17deg) brightness(99%) contrast(93%);
}

.sun-icon {
  /* #90f4e8 - 水色 */
  filter: brightness(0) saturate(100%) invert(88%) sepia(22%) saturate(791%) hue-rotate(128deg) brightness(96%) contrast(91%);
}

@media screen and (max-width: 768px) {
  h2.top-h2 {
    margin: 0;
    font-size: 1.5rem;
  }

  h3.top-h3 {
    margin: 0;
    font-size: 1.1rem;
  }
}