html {
  font-size: 16px;
  height: -webkit-fill-available;
}

body {
  font-family: "Futura", "Century Gothic", "CenturyGothic", "Franklin Gothic Medium", "Franklin Gothic", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
}

body,
h1,
h2,
article img {
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h1 strong {
  font-weight: 100;
}

h1 strong,
h2 strong {
  font-size: 150%;
}

h1,
h2 {
  font-size: 125%;
}

h3,
#agave h3 em {
  font-size: 111%;
}

#agave section h3::after {
  font-size: 90%;
}

button {
  background: transparent;
  border: none;
  outline: none;
  color: darkblue;
  font-family: inherit;
  font-size: 150%;
}

button:hover {
  color: orangered;
  cursor: pointer;
}

#menu {
  position: fixed;
  bottom: 0.25rem;
  right: 2.5rem;
  transform: rotate(90deg);
  transform-origin: bottom right;
  z-index: 5;
}

#menu:hover {
  background: darkblue;
}

#agave {
  box-sizing: border-box;
  padding: 2rem 4rem 2rem 2rem;
}

#agave #next {
  background-position: center;
  background-repeat: no-repeat;
}

article img {
  display: block;
  width: 100%;
}

#agave {
  position: relative;
  width: 100%;
  height: 100vh;
  max-height: -webkit-fill-available;
}

#agave #next {
  float: right;
  background-size: 75%;
  background-image: url("icon.png");
  width: 5rem;
  height: 5rem;
}

#agave section {
  box-sizing: border-box;
  position: absolute;
  top: 57.5%;
  left: 47.5%;
  transform: translate(-50%, -50%);
  width: 75%;
  max-width: 750px;
  max-height: 70%;
  overflow: auto;
}

#agave section h3 {
  float: left;
  padding: 0.5rem;
  margin: 0;
}

#agave section h3::after,
#agave section aside::after {
  content: attr(data-ja);
  display: inline;
  background: darkblue;
  color: #fff;
}

#agave section aside {
  margin-top: 1rem;
  transform: scale(0.95);
  float: right;
  text-align: right;
}

@media (orientation: portrait) {
  html {
    font-size: 2.5vw;
  }

  button {
    font-size: 200%;
  }

  #open {
    right: 7.5%;
  }

  #agave {
    height: 100vh;
    max-height: -webkit-fill-available;
  }

  article #about,
  #agave {
    padding: 3.33% 12.5% 3.33% 3.33%;
  }
}