@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200..800&display=swap");

:root {
  --accent-color: #e84509;
  --selection-color: #ff6133;
  --back-color: #eee;
  --text-color: #111;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-color: #e84509;
    --selection-color: #c13600;
    --back-color: #111;
    --text-color: #eee;
  }
}

body {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px max(4vw, 16px);
  color: var(--text-color);
  background-color: var(--back-color);
  font: normal 400 16px/1.5 "Noto Sans JP", sans-serif;
}

::selection {
  color: #fff;
  background-color: var(--selection-color);
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.1;
}

main {
  margin: 0 0 150px 0; /* footer用スペース */
  max-width: 40ic;
  text-align: left;
  line-height: 30px;
}

nav {
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: 16px;
  font-size: large;
  font-weight: 300;

  .logo {
    margin: 5px 0;
    img {
      width: 70px;
      height: auto;
    }
  }

  .page_list {
    margin: -0.5em 0 0 0; /* ロゴと上辺合わせ */
    padding: 0;
    text-align: right;
    line-height: 1.8em;
    li {
      list-style: none;
    }
  }

  .sns_icon_wrapper {
    display: none;
  }
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 16px;
  font-size: small;
  text-align: center;

  .sns_icon_wrapper {
    display: flex;
    flex-flow: row nowrap;
    gap: 48px;
  }

  p a {
    color: var(--text-color);
    text-decoration: underline;
  }
}

h1 {
  color: var(--accent-color);
  font-weight: 500;
  font-style: normal;
  margin-block: 1.33em;
}

h2 {
  color: var(--accent-color);
  font-weight: 500;
  font-style: normal;
}

a {
  text-decoration: none;
  color: var(--accent-color);
}

.hover_fade {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;

  &:hover {
    opacity: 0.5;
  }
}

@media (width >= 768px) {
  nav {
    position: fixed;
    top: 25px;
    left: 3vw;
    flex-flow: column nowrap;

    .page_list {
      text-align: left;
      line-height: 2.2em;

      a {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        @media (hover: hover) {
          transition: letter-spacing 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
          width: calc(5ch + 5em); /* hoverした時の字間を考慮して5文字分 */
          &:hover {
            letter-spacing: 1em;
          }
        }
      }
    }

    .sns_icon_wrapper {
      display: flex;
      flex-flow: row nowrap;
      gap: 24px;
    }
  }

  main {
    margin: 0 0 150px 15vw; /* navとfooter用スペース */
  }

  h1 {
    margin-block: 1.67em;
  }
}