html {
    height: 100%;
    font-size: 62.5%; /* 1rem = 10px */
    overflow-x: hidden;
    background: #fff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    color: rgb(51, 51, 51);
    font-size: 1.6rem; 
    line-height: 1.8;
    margin: 0 auto;
    background: #fff;
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
[id] {
    scroll-margin-top: 110px;
}

.headline {
    color: var(--green-text);
    font-size: 3.4rem;
    font-weight: 600;
}

.splash-text {
    color: var(--main);
    font-size: 1.8rem;
}

.logo {
  transition: 0.5s;
}
.logo:hover {
  opacity: 0.5;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0, rgba(0, 0, 0, 0.247), rgba(0, 0, 0, 0));
  transition: background 0.4s;
}