@charset "UTF-8";
/* rest */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* base */
img, video {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

html {
  font-size: 2.6666666666667vw;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-family: YakuHanJPs, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@media (min-width: 525px) {
  html {
    font-size: 14px;
  }
}
body {
  font-size: 1.6rem;
}

.layout {
  height: 100%;
  position: relative;
  z-index: 1;
  background-color: #000;
  background-repeat: no-repeat;
  background-size: cover;
}
.layout > .layout-inner {
  max-width: 525px;
  margin: 0 auto;
  overflow: hidden;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.05));
}

footer {
  margin-top: auto;
  text-align: center;
  background-color: #000;
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  margin-right: auto;
  margin-left: auto;
}

.img-container {
  padding: 0 1rem;
}

.btn {
  position: relative;
  padding: 4rem 2rem;
  display: block;
  text-align: center;
}
.btn .btn-inner {
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
  position: relative;
  z-index: 120;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.85, 0.005, 0.25, 1);
  animation-name: btn-anime;
  animation-iteration-count: infinite;
}
.btn .btn-inner > img {
  width: 95%;
}
.btn .btn-inner > img + a {
  margin-top: .5rem;
  display: inline-block;
}
.btn .btn-inner a {
  position: relative;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.85, 0.005, 0.25, 1);
  animation-name: bound;
  animation-iteration-count: infinite;
}

header {
  position: relative;
  height: 97dvh;
}
header .video-wrapper {
  height: 100%;
}
header .video-wrapper video {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0%;
  height: 100%;
  width: auto;
  display: none;
}
header .btn {
  padding: 0 1.5rem;
}
header .btn .btn-inner > img {
  width: 100%;
}
header .btn .btn-inner a {
  margin: 0;
}
header .btn .btn-inner a img {
  width: 85%;
}

.top-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.top-img-right {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-height: 56rem;
}

.bottom-catch {
  position: absolute;
  bottom: 5.5rem;
  right: 0;
  z-index: 111;
}
.bottom-catch .btn > a {
  padding: 0;
}

.video-wrapper {
  position: relative;
}

.video-wrapper-bg {
  position: relative;
  height: 100dvh;
  position: fixed;
  width: 100%;
  top: 0;
  max-width: 525px;
  left: 50%;
  translate: -50% 0%;
  overflow: hidden;
  height: 100dvh;
}
.video-wrapper-bg video {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: auto;
  height: 100%;
}

.overlay {
  width: 100%;
  height: 100%;
  background-image: url("../images/img-dot.svg"), linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
  background-size: 1.5%;
  position: absolute !important;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 100;
  opacity: 1;
}

section {
  position: relative;
}
section.about {
  padding-bottom: 4rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.95);
}
section.about .video-wrapper-sp {
  top: 5rem;
  left: 1.3rem;
  position: absolute;
  width: 15rem;
}
section.about .photo {
  position: relative;
  z-index: 111;
  margin-top: -4.6rem;
}
section.about .video-wrapper {
  margin-top: -1.5rem;
}
section.about .photo-text {
  margin-top: -3rem;
  position: relative;
  z-index: 11;
}
section.about .img-device-photo {
  width: 32rem;
}
section.about .img-device {
  width: 22rem;
  margin-top: .5rem;
  margin-bottom: 1.5rem;
}
section.safe {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 4.5rem 0;
}
section.safe h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  position: relative;
}
section.safe h2 span:after {
  content: '';
  position: absolute;
  left: 15%;
  bottom: -11%;
  translate: 0% 0%;
  display: inline-block;
  height: 5px;
  width: 100%;
  background-image: linear-gradient(to right, #ed1e79 0%, #93278f 50%, rgba(147, 39, 143, 0) 80%);
}
section.safe ul {
  padding: 0 2rem;
}
section.safe ul li {
  display: flex;
  align-items: flex-start;
  margin-top: 3rem;
}
section.safe ul li img {
  width: 5rem;
  margin-right: 1.5rem;
}
section.safe ul li p {
  text-align: justify;
}

.swiper {
  padding: 3rem 0 0rem 3rem !important;
  z-index: 120 !important;
}
.swiper .video-wrapper-bg {
  position: absolute;
}
.swiper .swiper-slide {
  overflow: hidden;
  border-radius: 15px;
}

footer {
  padding: 2rem 0 2rem 0;
  color: #fff;
  font-size: 1.2rem;
  background-color: #000;
}
footer p + p {
  margin-top: 1em;
}

/*アニメーション*/
@keyframes fade-btn {
  0% {
    transform: scale(0);
    bottom: -300px !important;
    opacity: 0;
  }
  18% {
    bottom: 0px !important;
    opacity: 1;
  }
  55% {
    transform: scale(1.1);
    opacity: 1;
  }
  60% {
    transform: scale(0.9);
    opacity: 1;
  }
  70% {
    transform: scale(1.1);
    opacity: 1;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  90% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes btn-anime {
  0% {
    transform: translate(0px, 6px);
  }
  5% {
    transform: translate(0px, -2px);
  }
  10% {
    transform: translate(0px, 4px);
  }
  15% {
    transform: translate(0px, -2px);
  }
  20% {
    transform: translate(0px, 6px);
  }
  25% {
    transform: translate(0px, -2px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}
@keyframes btn-top-anime {
  0% {
    transform: translate(4px, 0px);
  }
  5% {
    transform: translate(-4px, 0px);
  }
  10% {
    transform: translate(4px, 0px);
  }
  15% {
    transform: translate(-4px, 0px);
  }
  20% {
    transform: translate(4px, 0px);
  }
  25% {
    transform: translate(-4px, 0px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}
@keyframes arrow {
  0% {
    transform: translate(0px, -8rem);
    opacity: 1;
  }
  30% {
    transform: translate(0px, 0rem);
    opacity: 1;
  }
  90% {
    transform: translate(0px, 0rem);
    opacity: 1;
  }
  100% {
    transform: translate(0px, 2rem);
    opacity: 0;
  }
}
@keyframes bound {
  0%, 100% {
    top: 0;
    transform: scale(1);
  }
  60% {
    top: -60%;
    transform: scale(0.98, 1.02);
  }
  70% {
    transform: scale(1);
  }
  85% {
    top: 0;
    transform: scale(1.1, 0.95);
  }
}