@charset "utf-8";
/*---------------------
セクション名
----------------------*/

.top .mv {
  aspect-ratio: 750/1080;
  position: relative;
  background: url(../img/top/mv-bg.jpg) no-repeat center center /cover;
}

.top .mv .video-wrapper {
  width: 100%;
  aspect-ratio: 750/1080;
  transition: opacity 1s;
  position: absolute;
  left: 0;
  top: 0;
}
.top .mv .video-wrapper.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.top .mv .video-wrapper .btn-volume {
  width: 100px;
  height: 100px;
  border-radius: 999rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/top/btn-play.svg);
  cursor: pointer;
  box-shadow: 0 0 60px 10px #fff;
  transition: filter 0.2s;
  position: absolute;
  right: 30px;
  top: 25px;
  z-index: 1;
}

.top .mv .video-wrapper .btn-volume.is-muted {
  background-image: url(../img/top/btn-muted.svg);
}

.top .mv .video-wrapper #audio {
  display: none;
}

.top .mv .video-wrapper video {
  width: 100%;
  vertical-align: bottom;
  pointer-events: none;
}

.top .contents .btn01 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -485px 0 0;
}

.top .contents .btn02 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -260px 0 0;
}

.top .contents .btn03 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -235px 0 0;
}

.top .contents .btn04 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -160px 0 0;
}

.top .contents .btn05 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -220px 0 0;
}

.top .contents .btn06 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -200px 0 0;
}

.top .contents .btn07 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -230px 0 0;
}

.top .contents .btn08 {
  position: absolute;
  margin: -560px 530px 0;
}

.top .contents .btn09 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -133px 0 0;
}

.top .contents .btn10 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -180px 0 0;
}

.top .contents .btn11 {
  position: absolute;
  margin: -550px 100px 0;
}

.top .contents .btn12 {
  position: absolute;
  margin: -510px 475px 0;
}

.top .contents .btn13 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -190px 0 0;
}

.top .contents .btn14 {
  position: absolute;
  margin: -410px 411px 0;
}

.top .contents .btn15 {
  position: absolute;
  margin: -458px 408px 0;
}

.top .contents .btn16 {
  position: absolute;
  margin: -638px 408px 0;
}

.top .contents .btn17 {
  position: absolute;
  margin: -297px 408px 0;
}

.top .contents .btn18 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -190px 0 0;
}

.top .mv .btn19 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -337px 0 0;
}

aside.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  margin: 0 auto;
  background: rgba(0 0 0 / 50%);
  display: flex;
  align-items: center;
  opacity: 0;
}
aside.modal.is-activated {
  z-index: 20;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s;
}
aside.modal.is-hidden {
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
aside.modal .inner {
  width: 100vw;
  max-width: 750px;
  max-height: calc(100svh - 200px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  padding-top: 50px;
  background: url(../img/top/ico-close.svg) no-repeat right 10px top / 50px auto;
}
aside.modal .inner iframe {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
aside.modal .inner .masking {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
}