@charset "UTF-8";

:root {
  --vivant-color-primary: #D71718;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

#header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 80px;
  padding: 0 1em;
  background-color: #00000099;
  p {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vivant-color-primary);
  }
}

#chart-area {
  width: 100vw;
  height: 100vh;
}

#chart-navigation {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template: auto / 1fr auto;
  align-items: center;
  width: 100vw;
  height: 48px;
  padding: 0 1em;
  background-color: #00000099;
  /* 初期表示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
  /* */
  h1 {
    font-size: clamp(2rem, 2vw, 3rem);
    font-weight: 700;
    color: var(--vivant-color-primary);
    line-height: 1;
    font-family: "anton", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  .buttons {
    display: flex;
    align-items: center;
    grid-gap: .5em;
    button {
      display: block;
      appearance: none;
      border: none;
      outline: none;
      background-color: #222;
      color: #fff;
      font-size: clamp(1rem, 1vw, 1.5rem);
      line-height: 2.5;
      padding: 0 .8em;
      cursor: pointer;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
      transition: color .15s;
      &.disabled {
        color: #000;
        pointer-events: none;
        cursor: default;
      }
    }
  }
}
body.is-chart-ready #chart-navigation {
  opacity: 1;
  visibility: visible;
}
/* height 100vh を保つために上書き */
.is-chart-ready #menu_new {
  position: fixed !important;
}

#sp_menu {
  position: fixed !important;
}