.mv {
  width: 100%;
  height: 74rem;
  position: relative;
  overflow: hidden;
  background-color: #000;
  color: #fff;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg__contents {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  z-index: 2;
}

/* Character sections */
.avan,
.dai {
  position: relative;
  width: 50%;
  height: 100%;
  display: block;
  overflow: hidden;
}

main,
footer {
  opacity: 0;
}

body {
  background-color: #0b1120;
}

body.loaded main,
body.loaded footer {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.bg-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 0;
}

.avan__bg {
  width: 50%;
  height: 100%;
  background-image: url(../img/top/main-gb-avan.webp);
  background-position: right;
  background-size: cover;
  transform: translateX(-100%);
}

.dai__bg {
  width: 50%;
  height: 100%;
  background-image: url(../img/top/main-gb-dai.webp);
  background-position: left;
  background-size: cover;
  transform: translateX(100%);
}

.avan__bg img,
.dai__bg img {
  display: none;
}

body.loaded .avan__bg {
  animation: slideInBgLeft 0.8s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

body.loaded .dai__bg {
  animation: slideInBgRight 0.8s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

@keyframes slideInBgLeft {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideInBgRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

/* Base sizing mapped closely to aspect ratio and typical hero layout */
.avan__img,
.dai__img {
  position: absolute;
  bottom: 9%;
  width: 86%;
  max-width: 800px;
  z-index: 2;
  transition: transform 0.5s ease;
  opacity: 0;
}

.avan__img {
  left: 12.5%;
  width: 84%;
  bottom: 11.5%;
  margin-bottom: -18.5%;
  /* Offset extended legs in main-avan2.webp */
}

.dai__img {
  right: 8%;
  width: 80%;
  bottom: 6%;
}

/* Animate characters on load */
body.loaded .avan__img {
  animation: bounceUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
  animation-delay: 0.4s;
}

body.loaded .dai__img {
  animation: bounceUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
  animation-delay: 0.6s;
}

@keyframes bounceUp {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

/* Background logos */
.avan__logo,
.dai__logo {
  position: absolute;
  z-index: 1;
  width: 35%;
  max-width: 300px;
  opacity: 0;
}

.avan__logo {
  left: 5%;
  width: 24.3%;
  top: 5%;
}

.dai__logo {
  right: 5%;
  width: 25.16%;
  top: 6%;
}

body.loaded .avan__logo {
  animation: fadeInLogo 1.0s ease forwards;
  animation-delay: 0.4s;
}

body.loaded .dai__logo {
  animation: fadeInLogo 1.0s ease forwards;
  animation-delay: 0.6s;
}

@keyframes fadeInLogo {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Hover buttons under characters */
.avan__button,
.dai__button {
  position: absolute;

  z-index: 3;
  width: calc(36% * 1.075);
  max-width: none;
  transition: transform 0.3s ease;
}

.avan__button {
  right: 47.5%;
  top: 28.5%;
}

.dai__button {
  left: 51%;
  width: calc(33% * 1.075);
  top: 31%;

}

@media screen and (min-width: 769px) {

  .avan:hover .avan__button,
  .dai:hover .dai__button {
    transform: scale(1.05);
  }
}

.bg__bottoms {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  height: 23.25rem;
}

.avan__bg-bottom {
  background-image: url(../img/top/main-gb-bottom-avan.webp);
  background-position: right;
}

.dai__bg-bottom {
  background-image: url(../img/top/main-gb-bottom-dai.webp);
  background-position: left;
}

body.loaded .avan__bg-bottom {
  animation: slideUpBgBottom 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 1.0s;
}

body.loaded .dai__bg-bottom {
  animation: slideUpBgBottom 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 1.2s;
}

@keyframes slideUpBgBottom {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.avan__bg-bottom,
.dai__bg-bottom {
  width: 50%;
  background-size: cover;
}

.avan__bg-bottom img,
.dai__bg-bottom img {
  width: 100%;
  display: none;
}

.bg__front {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  width: 33.4%;
  max-width: 452px;
  top: 1em;
  z-index: 1;
  transition: opacity 1s ease-out 0.7s;
}

body.loaded .bg__front {
  opacity: 1;
}

/* Front items */
.front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  align-items: center;
  z-index: 10;
  padding-top: 4em;
}

.front__contents {
  width: 100%;
  max-width: 1280px;
  position: relative;
  text-align: center;
  margin: 0 auto;
}

.main-logo__line1 {
  margin-bottom: -0.5rem;
}

.main-logo__wrapper h2 {
  margin-bottom: 2.2rem;
}

/* Center main logo */
.main-logo__wrapper {
  width: 28%;
  margin: 0 auto 2rem;
  position: relative;
}

.logo-topline,
.logo-bottomline {
  width: 92%;
  margin: 0 auto;
  display: block;
  opacity: 0;
}

body.loaded .logo-topline,
body.loaded .logo-bottomline {
  animation: fadeInLogo 0.6s ease forwards;
  animation-delay: 1.2s;
}

.logo-text1-6 {
  display: flex;
  justify-content: space-between;
  gap: 2%;
  margin: 0.5rem 0;
  width: 91%;
  margin-left: 4%;
}

.logo-text1-6 img {
  max-width: none;
  height: auto;
}

/* オリジナルサイズ(text5の幅49)からの比率を基準にした各文字サイズ */
.logo-text1-6 img:nth-child(1) {
  width: 16.53%;
}

/* ダ (54/49) */
.logo-text1-6 img:nth-child(2) {
  width: 12.85%;
}

/* イ (42/49) */
.logo-text1-6 img:nth-child(3) {
  width: 16.22%;
}

/* の (53/49) */
.logo-text1-6 img:nth-child(4) {
  width: 18.06%;
}

/* 大 (59/49) */
.logo-text1-6 img:nth-child(5) {
  width: 15%;
}

/* 冒 (基準) */
.logo-text1-6 img:nth-child(6) {
  width: 17.75%;
}

/* 険 (58/49) */

body.loaded .logo-text1-6 img {
  animation: bounceIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body.loaded .logo-text1-6 img:nth-child(1) {
  animation-delay: 1.0s;
  margin-right: -0.8em;
}

body.loaded .logo-text1-6 img:nth-child(2) {
  animation-delay: 1.1s;
  margin-right: -0.4em;
}

body.loaded .logo-text1-6 img:nth-child(3) {
  animation-delay: 1.2s;
}

body.loaded .logo-text1-6 img:nth-child(4) {
  animation-delay: 1.3s;
}

body.loaded .logo-text1-6 img:nth-child(5) {
  animation-delay: 1.4s;
}

body.loaded .logo-text1-6 img:nth-child(6) {
  animation-delay: 1.5s;
}

@keyframes bounceIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  60% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.main-logo__line2 img {
  width: 65%;
  max-width: none;
  margin: 0.5rem auto;
  opacity: 0;
}

.main-logo__line3 img {
  width: 93%;
  max-width: none;
  margin: 0.5rem auto;
  opacity: 0;
}

.main-logo__line4 img {
  width: 94%;
  max-width: none;
  margin: 0.5rem auto;
  opacity: 0;
}

.main-logo__line5 img {
  width: 108.5%;
  max-width: none;
  margin: 0.5rem auto;
  margin-top: -4.0rem;
  margin-left: -0.75rem;
  opacity: 0;
}

body.loaded .main-logo__line2 img {
  animation: fadeInLogo 0.7s ease forwards;
  animation-delay: 2.3s;
}

body.loaded .main-logo__line3 img {
  animation: fadeInLogo 0.7s ease forwards;
  animation-delay: 1.7s;
  animation-delay: 1.9s;
}

body.loaded .main-logo__line4 img {
  animation: fadeInLogo 0.7s ease forwards;
  animation-delay: 2.0s;
  animation-delay: 2.2s;
}

body.loaded .main-logo__line5 img {
  animation: wipeInLeft 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 2.6s;
  animation-delay: 2.8s;
}

@keyframes wipeInLeft {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }

  1% {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
  }

  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.main-logo-bird {
  position: absolute;
  top: 16.5%;
  right: -3.25%;
  width: 28%;
  max-width: none;
}

body.loaded .main-logo-bird {
  animation: fadeInLogo 0.5s ease both;
  animation-delay: 2.3s;
}

/* Buttons */
.main-buttons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  pointer-events: auto;
  margin-top: 6rem;
}

.main-btn {
  display: block;
  width: 20%;
  max-width: 250px;
  position: relative;
}

.main-btn .btn-on {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: none;
}

@media screen and (min-width: 769px) {
  .main-btn:hover .btn-off {
    opacity: 0;
    transition: none;
  }

  .main-btn:hover .btn-on {
    opacity: 1;
    transition: none;
  }
}

body.loaded .main-btn {
  animation: slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body.loaded .main-buttons .main-btn:nth-child(1) {
  animation-delay: 2.9s;
}

body.loaded .main-buttons .main-btn:nth-child(2) {
  animation-delay: 3.0s;
}

body.loaded .main-buttons .main-btn:nth-child(3) {
  animation-delay: 3.1s;
}

body.loaded .main-buttons .main-btn:nth-child(4) {
  animation-delay: 3.2s;
}

@keyframes slideUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.maintext {
  width: 100%;
  margin-top: 7.75rem;

}

.maintext-img {
  width: 55%;
  margin: 0 auto;
  /*max-width: 600px;*/
}

body.loaded .maintext {
  animation: slideUpAndFlare 4.0s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 2.6s;
}

@keyframes slideUpAndFlare {
  0% {
    transform: translateY(30px);
    opacity: 0;
    filter: brightness(1) drop-shadow(0 0 0px rgba(255, 243, 192, 0)) drop-shadow(0 0 0px rgba(255, 243, 192, 0)) drop-shadow(0 0 0px rgba(255, 243, 192, 0));
  }

  /* 出現を早く(1.2s -> 0.8s)し、ここから光り始める */
  20% {
    transform: translateY(0);
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 0px rgba(255, 243, 192, 0)) drop-shadow(0 0 0px rgba(255, 243, 192, 0)) drop-shadow(0 0 0px rgba(255, 243, 192, 0));
  }

  50% {
    transform: translateY(0);
    opacity: 1;
    filter: brightness(1.5) drop-shadow(0 0 0.5em #fff3c0) drop-shadow(0 0 0.5em #fff3c0) drop-shadow(0 0 0.5em #fff3c0);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 0.5em rgba(255, 243, 192, 0.5)) drop-shadow(0 0 0.5em rgba(255, 243, 192, 0.5)) drop-shadow(0 0 0.5em rgba(255, 243, 192, 0.0));
  }
}

@media screen and (max-width: 768px) {

  .mv {
    height: 272vw;
  }

  .maintext-img {
    width: 100%;
  }

  .bg__contents {}

  .main-logo__wrapper {
    width: 50%;
    margin: 8em auto 2rem;
  }

  .avan,
  .dai {
    height: 80%;
  }

  .avan__logo {
    width: calc(24.3% * 1.45);
    left: 10%;
    top: 4.5%;
  }

  .dai__logo {
    right: 10%;
    top: 5%;
    width: calc(25.16% * 1.45);
  }

  .bg__front {
    width: 67.4%;
    top: 15em;
  }

  .main-logo-bird {
    top: 15.25%;
    right: -2%;
  }

  .avan__button {
    width: 100%;
    right: 0%;
    top: 51.7%;
  }

  .dai__button {
    left: 0%;
    width: 100%;
    top: 51.7%;
  }

  body.loaded .avan__img {
    width: 226%;
    left: -40%;
    bottom: -2%;
    margin-bottom: -32%;
  }

  .bg__bottoms {
    height: 41.25rem;
  }

  .avan__bg {
    background-image: url(../img/top/main-gb-avan-sp.webp);
  }

  .dai__bg {
    background-image: url(../img/top/main-gb-dai-sp.webp);
  }


  body.loaded .dai__img {
    width: 218%;
    right: -61%;
    bottom: -3%;
  }

  .main-buttons {
    flex-wrap: wrap;
    margin-top: 55.65rem;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 3rem 1%;
    gap: 1.75rem 7%;
  }

  .main-btn {
    width: 41%;
  }

  .maintext {
    width: 79%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8.5rem;
  }

  .avan__bg-bottom,
  .dai__bg-bottom {
    background-size: 463%;
  }

  .bg__bottoms {
    height: 43.7rem;
  }

  body.loaded .avan__bg-bottom,
  body.loaded .dai__bg-bottom,
  body.loaded .maintext {
    animation: none;
  }

  .avan__bg-bottom {
    background-position: right center;
  }

  .dai__bg-bottom {
    background-position: left center;

  }

  .footer__inner {
    flex-direction: column;
    gap: 2.5rem;
    font-size: 1.9rem;
    line-height: 1.6;
    padding: 3rem 1rem;
  }

  .footer {
    height: auto;
    min-height: 27rem;
    padding: 2.5em;
  }
}