@charset "utf-8";

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

body {
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #000;
  line-height: 1.5em;
}

ul,
ol {
  list-style-type: none;
}

a:hover {
  opacity: 1.0;
}

a:focus {
  outline: none;
}

.content_wrap {
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
}

.content_wrap img {
  height: auto;
  display: block;
  height: auto;
  border: 0;
  max-width: 100%;
  margin: 0;
}

.content_wrap video {
  width: 100%;
  display: block;
  height: auto;
  border: 0;
  outline: none;
}

.content_wrap a {
  display: block;
}

.content_wrap .rl {
  position: relative;
}

.content_wrap .video01 {
  position: absolute;
  width: 52%;
  right: -4%;
  bottom: 1%;
}

.content_wrap .video01 video {
  border-radius: 50%;
  border: solid #fff min(1.2vw, 8px);
}

.content_wrap .hikari {
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.content_wrap .btn01 {
  position: absolute;
  width: calc(87.3% + 4px);
  top: 67.45%;
  left: 7.2%;
}

.content_wrap .hikari:before {
  content: "";
  animation: hikari 4s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #fff;
  width: 140%;
  height: 100%;
  transform: skewX(-45deg);
  top: -0;
  left: -140%;
  opacity: 0.5;
  position: absolute;
}

@keyframes hikari {
  0% {
    left: -160%;
    opacity: 0;
  }

  70% {
    left: -160%;
    opacity: 0.5;
  }

  71% {
    left: -160%;
    opacity: 1;
  }

  100% {
    left: -20%;
    opacity: 0;
  }
}

.content_wrap .video02 {
  position: absolute;
  width: 87%;
  left: 6.5%;
  top: 51.6%;
}

.content_wrap .video02 video {
  border-radius: min(2vw, 15px);
  border: solid #fff min(0.66vw, 5px);
}

.content_wrap .video03 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 19.6%;
  z-index: -1;
}

.content_wrap .video04 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 6.9%;
  z-index: -1;
}

.content_wrap .pup {
  margin-top: -3%;
}

@media(max-width:749px) {
  .content_wrap img {
    width: 100%;
  }
}

/***********************

フローティングバナー関連
 
************************/

.f-block {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 50;
  transition: opacity 0.5s ease;
}

@media (min-width: 768px) {
  .f-block {
    max-width: 42rem;
    /* 672px相当 */
  }
}

/* JSがバナーを隠す時に付与するスタイル（デフォルトは表示状態） */
.opacity-0 {
  opacity: 0;
}

.invisible {
  visibility: hidden;
}

.pointer-events-none {
  pointer-events: none;
}

.f-bnr {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  height: auto;
  filter: brightness(0.95);
  transition: filter 0.5s ease;
}

@media (min-width: 768px) {
  .f-bnr {
    width: 70%;
  }
}

/* ホバー時の挙動 */
.f-bnr:hover {
  filter: brightness(1.1);
}