@font-face {
  font-family: Gothampro;
  src: url('../fonts/GothamPro-Black.woff') format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Helios;
  src: url('../fonts/Helios.woff') format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  color: #333;
  background-color: #000;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 1vw;
  line-height: 1.3;
}

img {
  max-width: 1000%;
  display: inline-block;
}

.pano {
  z-index: 10;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0%;
}

.header {
  z-index: 100;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 0;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
  position: fixed;
  top: 0%;
}

.logo.logo--gigarama {
  flex: none;
  width: 12em;
  margin-top: 1.5em;
}

.logo.logo--9may {
  z-index: 20;
  width: 4em;
  margin-top: 1em;
  position: relative;
}

.logo.logo--gigarama--mob {
  flex: none;
  width: 12em;
  margin-top: 1.5em;
  display: none;
}

.tint {
  z-index: 10;
  pointer-events: none;
  background-image: linear-gradient(#0000, #000000e6);
  width: 100%;
  height: 25em;
  position: absolute;
  inset: auto 0% -5em;
}

.tint.tint--top {
  pointer-events: none;
  background-image: linear-gradient(#00000080, #0000);
  width: 100%;
  height: 10em;
  margin-top: -3em;
  position: absolute;
  inset: 0% 0% auto;
}

.link {
  z-index: 20;
  position: relative;
}

.link.link--gigarama {
  width: 15em;
}

.info {
  z-index: 20;
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  cursor: pointer;
  border-radius: 1em 1em 0 0;
  justify-content: center;
  align-items: center;
  width: 72em;
  height: 11em;
  margin-bottom: -1px;
  padding: 1em 3em;
  display: flex;
  position: relative;
  box-shadow: inset 0 0 0 1px #fff3;
}

.image.image--info--stripe {
  z-index: 30;
  flex: none;
  width: 110%;
  margin-top: -13.5em;
  position: absolute;
}

.txt.txt--header {
  z-index: 20;
  color: #fff;
  text-transform: uppercase;
  font-family: Gothampro, Tahoma, sans-serif;
  font-size: 2em;
  font-weight: 900;
  position: relative;
}

.txt.txt--info {
  z-index: 20;
  color: #fff;
  text-align: left;
  width: 100%;
  font-family: Helios, Tahoma, sans-serif;
  font-size: 1.8em;
  position: relative;
}

.txt.txt--binoculars {
  color: #fff;
  text-transform: uppercase;
  font-family: Gothampro, Tahoma, sans-serif;
  font-size: .6em;
}

.txt.txt--chapter {
  color: #fff;
  text-align: center;
  white-space: nowrap;
  font-family: Gothampro, Tahoma, sans-serif;
  font-size: 1em;
  font-weight: 900;
}

.wrap.wrap--9may {
  justify-content: flex-end;
  align-items: center;
  width: 15em;
  display: flex;
}

.wrap.wrap--info {
  z-index: 50;
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 0;
  display: flex;
  position: fixed;
  inset: auto 0% 5em;
}

.controls {
  z-index: 500;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 0;
  height: 100%;
  display: flex;
  position: fixed;
}

.button.button--info--in, .button.button--info--out {
  background-color: #ff00004d;
  flex: none;
  width: 3em;
  height: 3em;
}

.button.button--left, .button.button--right {
  z-index: 20;
  background-image: linear-gradient(#ec6607, #e7342c 50%, #d2132e);
  border-radius: 1em;
  flex: none;
  width: 4em;
  height: 3em;
  padding-top: .2em;
  padding-bottom: .2em;
  position: relative;
}

.timeline {
  z-index: 100;
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 0;
  display: flex;
  position: fixed;
  left: 0%;
  right: 0%;
}

.timeline.timeline--mob {
  display: none;
}

.zoom {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  border-radius: 100%;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon.icon--binoculars {
  background-image: linear-gradient(#ec6607, #e7342c 50%, #d2132e);
  border-radius: 100%;
  width: 4em;
  height: 4em;
  padding: .8em;
}

.box.box--info--txt {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.box.box--chapter {
  z-index: 20;
  background-image: linear-gradient(#ec6607, #e7342c 50%, #d2132e);
  border-bottom-right-radius: 1em;
  border-bottom-left-radius: 1em;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 6em;
  height: 3em;
  padding: .8em 1em;
  display: flex;
  position: relative;
}

@media screen and (max-width: 479px) {
  body {
    font-size: 2.4vw;
  }

  .header {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  .logo.logo--gigarama {
    display: none;
  }

  .logo.logo--9may {
    width: auto;
    height: 4em;
  }

  .logo.logo--gigarama--mob {
    width: auto;
    height: 3.5em;
    margin-top: 1.4em;
    display: inline-block;
  }

  .tint {
    height: 40em;
    bottom: -8em;
  }

  .info {
    height: 12em;
    box-shadow: none;
    margin-bottom: 0;
    padding: 0;
  }

  .txt.txt--header {
    display: none;
  }

  .txt.txt--info {
    text-align: center;
    font-size: 1.6em;
  }

  .txt.txt--binoculars {
    font-size: .8em;
  }

  .txt.txt--chapter {
    font-size: 1.4em;
  }

  .wrap.wrap--info {
    bottom: 6em;
  }

  .button.button--left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 3em;
    height: 6em;
    padding-top: 1.4em;
    padding-bottom: 1.4em;
    left: 0;
  }

  .button.button--right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 3em;
    height: 6em;
    padding-top: 1.4em;
    padding-bottom: 1.4em;
    right: 0;
  }

  .timeline.timeline--mob {
    display: flex;
    bottom: 16em;
  }

  .zoom.zoom--pc {
    display: none;
  }

  .icon.icon--binoculars {
    width: 5em;
    height: 5em;
  }

  .box.box--chapter {
    width: 8em;
    height: 5em;
  }
}