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

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

section {
  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/preparing/pc/background.png);
  background-image: -webkit-image-set(
    url('../images/preparing/pc/background.webp') type('image/webp'),
    url('../images/preparing/pc/background.png') type('image/png')
  );
  background-image: image-set(
    url('../images/preparing/pc/background.webp') type('image/webp'),
    url('../images/preparing/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/preparing/sp/background.png);
    background-image: -webkit-image-set(
      url('../images/preparing/sp/background.webp') type('image/webp'),
      url('../images/preparing/sp/background.png') type('image/png')
    );
    background-image: image-set(
      url('../images/preparing/sp/background.webp') type('image/webp'),
      url('../images/preparing/sp/background.png') type('image/png')
    );
    background-size: contain;
  }
}

/*--- 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%;
  }
}

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

/*--- Catchcopy ---*/
div#hero #catchcopy {
  position: absolute;
  width: 15.21%;
  height: 65.48%;
  left: 42.43%;
  top: 9.14%;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  div#hero #catchcopy {
    width: 28.08%;
    height: 45.38%;
    left: 36.03%;
    top: 17.24%;
  }
}

/*--- Campaign title ---*/
div#hero h1#campaign-title {
  position: absolute;
  width: 74.31%;
  height: 19.42%;
  left: 12.85%;
  top: 73.1%;
  z-index: 5;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  div#hero h1#campaign-title {
    width: 93.59%;
    height: 25.33%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
  }
}