/**
 * |=================================================================
 * | L喰霊－零－ CSS
 * |=================================================================
 */

/*
 * ------------------------------------------------------------------
 * Common styles
 * ------------------------------------------------------------------
 */
html,
body {
  width: 100vw;
  background-color: black;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

h2.label {
  display: block;
  width: 51.32%;
  max-width: 739px;
  margin: 0 auto;
  padding: 0;
}
@media screen and (max-width: 767px) {
  h2.label {
    width: 100%;
    max-width: 700px;
  }
}

section {
  display: none;
  width: 100%;
  max-width: 1440px;
  margin: 48px auto;
  padding: 0 12px;
}

section .inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/*
 * ------------------------------------------------------------------
 * Hero section
 * ------------------------------------------------------------------
 */
div#hero {
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 1440 / 788;
  position: relative;
  margin: 0 auto;
  background-image: url(../images/pc/background.png);
  background-image: -webkit-image-set(
    url('../images/pc/background.webp') type('image/webp'),
    url('../images/pc/background.png') type('image/png')
  );
  background-image: image-set(
    url('../images/pc/background.webp') type('image/webp'),
    url('../images/pc/background.png') type('image/png')
  );
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  div#hero {
    width: 100vw;
    aspect-ratio: 780 / 1137;
    background-image: url(../images/sp/background.png);
    background-image: -webkit-image-set(
      url('../images/sp/background.webp') type('image/webp'),
      url('../images/sp/background.png') type('image/png')
    );
    background-image: image-set(
      url('../images/sp/background.webp') type('image/webp'),
      url('../images/sp/background.png') type('image/png')
    );
    background-size: contain;
  }
}

/*--- Background shadow ---*/
div#hero #background-shadow {
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
}

/*--- Oizumi logo ---*/
div#hero #oizumi-logo {
  position: absolute;
  width: 11.94%;
  height: 5.71%;
  left: 85.69%;
  top: 3.43%;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  div#hero #oizumi-logo {
    width: 16.15%;
    height: 2.9%;
    left: 80.13%;
    top: 1.58%;
  }
}

/*--- Catchcopy ---*/
div#hero #catchcopy {
  position: absolute;
  width: 6.74%;
  height: 52.79%;
  left: 34.44%;
  top: 0;
  z-index: 1;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  div#hero #catchcopy {
    width: 10.9%;
    height: 32.19%;
    left: 27.56%;
    top: 2.02%;
  }
}

/*--- Left character ---*/
div#hero #character-left {
  position: absolute;
  width: 36.74%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  div#hero #character-left {
    width: 36.03%;
    height: 64.47%;
    left: 0;
    top: 0;
  }
}

/*--- Right character ---*/
div#hero #character-right {
  position: absolute;
  width: 38.33%;
  height: 100%;
  left: 41.18%;
  top: 0;
  z-index: 1;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  div#hero #character-right {
    width: 52.44%;
    height: 64.47%;
    left: 36.03%;
    top: 0;
  }
}

/*--- Machine ---*/
div#hero #machine {
  position: absolute;
  width: 19.31%;
  height: 60.53%;
  left: 78.33%;
  top: 12.31%;
  z-index: 3;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  div#hero #machine {
    width: 27.82%;
    height: 32.72%;
    left: 68.46%;
    top: 5.63%;
  }
}

/*--- Machine logo ---*/
div#hero #machine-logo {
  position: absolute;
  width: 17.71%;
  height: 34.14%;
  left: 79.24%;
  top: 62.44%;
  z-index: 4;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  div#hero #machine-logo {
    width: 20.9%;
    height: 15.13%;
    left: 71.92%;
    top: 33.42%;
  }
}

/*--- REAL A+ icon ---*/
div#hero #icon-a-plus {
  position: absolute;
  width: 6.94%;
  height: 12.69%;
  left: 73.61%;
  top: 54.44%;
  z-index: 5;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  div#hero #icon-a-plus {
    width: 10.26%;
    height: 7.04%;
    left: 63.85%;
    top: 31.31%;
  }
}

/*--- Campaign title ---*/
div#hero h1#campaign-title {
  position: absolute;
  width: 74.31%;
  height: 19.42%;
  left: 4.03%;
  top: 59.52%;
  z-index: 5;
  margin: 0;
  padding: 0;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  div#hero h1#campaign-title {
    width: 100%;
    height: 27.09%;
    left: 0;
    top: 50.66%;
  }
}

/*--- Campaign period ---*/
div#hero #campaign-period {
  position: absolute;
  width: 74.17%;
  height: 13.07%;
  left: 4.03%;
  top: 76.78%;
  z-index: 5;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  div#hero #campaign-period {
    width: 98.33%;
    height: 13.54%;
    left: 0.9%;
    top: 77.48%;
  }
}

/*--- Button entry ---*/
div#hero #button-entry {
  position: absolute;
  width: 44.31%;
  height: 7.61%;
  left: 27.85%;
  top: 89.85%;
  z-index: 5;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  div#hero #button-entry {
    width: 81.79%;
    height: 5.28%;
    left: 9.1%;
    top: 92%;
  }
}

/*
 * ------------------------------------------------------------------
 * Howto section
 * ------------------------------------------------------------------
 */
div#entry-steps {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 32px;
}
@media screen and (max-width: 767px) {
  div#entry-steps {
    flex-direction: column;
    gap: 48px;
  }
}

div.entry-step {
  position: relative;
}

div#step2-additional {
  position: absolute;
  width: 100%;
  left: 20%;
  top: 70%;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  div#step2-additional {
    width: 100%;
    left: 5%;
    top: 80%;
    z-index: 1;
  }
}

/*
 * ------------------------------------------------------------------
 * Announcement section
 * ------------------------------------------------------------------
 */
section#announcement {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1440 / 700;
  width: 100%;
  max-width: 1440px;
  margin: 48px auto;
  padding: 0 12px;
  background-image: url(../images/pc/announcement-background.png);
  background-image: -webkit-image-set(
    url('../images/pc/announcement-background.webp') type('image/webp'),
    url('../images/pc/announcement-background.png') type('image/png')
  );
  background-image: image-set(
    url('../images/pc/announcement-background.webp') type('image/webp'),
    url('../images/pc/announcement-background.png') type('image/png')
  );
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  section#announcement {
    max-width: none;
    aspect-ratio: 780 / 769;
    background-image: url(../images/sp/announcement-background.png);
    background-image: -webkit-image-set(
      url('../images/sp/announcement-background.webp') type('image/webp'),
      url('../images/sp/announcement-background.png') type('image/png')
    );
    background-image: image-set(
      url('../images/sp/announcement-background.webp') type('image/webp'),
      url('../images/sp/announcement-background.png') type('image/png')
    );
  }
}

/*
 * ------------------------------------------------------------------
 * Note section
 * ------------------------------------------------------------------
 */
section#note .inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

div#note-top,
div#note-bottom {
  width: 100%;
  margin: 0;
  padding: 0;
}

div#note-middle {
  width: 100%;
  height: 50vh;
  overflow-y: scroll;
  margin: 0;
  padding: 1rem;
  background-image: url(../images/pc/note-middle.png);
  background-image: -webkit-image-set(
    url('../images/pc/note-middle.webp') type('image/webp'),
    url('../images/pc/note-middle.png') type('image/png')
  );
  background-image: image-set(
    url('../images/pc/note-middle.webp') type('image/webp'),
    url('../images/pc/note-middle.png') type('image/png')
  );
  background-position: center center;
  background-size: contain;
  background-repeat: repeat-y;
  color: white;
}

/*
 * ------------------------------------------------------------------
 * Campaign End Section
 * ------------------------------------------------------------------
 */
section#campaign-end img {
  display: block;
  width: 100%;
  max-width: 976px;
  margin: 0 auto;
}

/*
 * ------------------------------------------------------------------
 * Copyright section
 * ------------------------------------------------------------------
 */
section#copyright img {
  display: block;
  width: 100%;
  max-width: 407px;
  margin: 0 auto;
}

/*
 * ------------------------------------------------------------------
 * Fade-in animation
 * ------------------------------------------------------------------
 */
.fade-in-down {
  opacity: 0;
  transform: translateY(-20px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}
.fade-in-down.animate-in {
  opacity: 1;
  transform: translateY(0);
}