body {
  display: flex;
  flex-flow: column;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/*kv*/
.kv {
  width: 100%;
  aspect-ratio: 1434 / 1035;
  position: relative;
}

@media screen and (max-width: 840px) {
  .kv {
    width: 100%;
    aspect-ratio: 1423 / 2011;
    position: relative;
  }
}

.kv__image--pc {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  z-index: -1;
  object-position: top;
  aspect-ratio: 1434 / 1035;
}

.kv__image--sp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  z-index: -1;
  object-position: top;
  aspect-ratio: 1423 / 2011;
}

@media screen and (max-width: 840px) {
  .kv__img--pc {
    display: none;
  }

  .kv__img--sp {
    display: block;
  }
}

/*announce-box*/
.white_box {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #ffffff;
  width: 928px;
  padding: 30px 15px;
}

@media screen and (max-width: 1023px) {
  .white_box {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
    width: 85%;
    padding: 30px 15px;
  }
}

@media screen and (max-width: 840px) {
  .white_box {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
    width: 85%;
    padding: 25px 15px;
  }
}

@media screen and (max-width: 540px) {
  .white_box {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
    width: 85%;
    padding: 15px 5px;
  }
}

/*text*/

.text-1 {
  margin: 0px;
  font-family: "Manrope", sans-serif;
  display: inline-block;
}

.text-1__day {
  font-weight: 800;
  font-size: 4.25rem;
}
@media screen and (max-width:840px) {
  .text-1__day {
    font-weight: 800;
    font-size: 8.2vw;
  }
}

.text-1__week {
  font-weight: 700;
  font-size: 2rem;
}
@media screen and (max-width:840px) {
  .text-1__week {
    font-weight: 700;
    font-size: 3.75vw;
  }
}
@media screen and (max-width:540px) {
  .text-1__week {
    font-weight: 700;
    font-size: 4.1vw;
  }
}

.text-1__year {
  font-weight: 800;
  font-size: 4.25rem;
}
@media screen and (max-width:840px) {
  .text-1__year {
    font-weight: 800;
    font-size: 8.2vw;
  }
}

.text-1__place {
  font-weight: 400;
  font-size: 2rem;
}
@media screen and (max-width:840px) {
  .text-1__place {
    font-weight: 400;
    font-size: 3.75vw;
  }
}
@media screen and (max-width:540px) {
  .text-1__place {
    font-weight: 400;
    font-size: 4.1vw;
  }
}

/*footer*/

footer {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 28px;
  background-color: #231815;
  color: #999;
  gap: 56px;
}

.logo {
  color: #ffffff;
  transition: 0.3s;
}

.logo:hover {
  opacity: 0.7;
  transition: 0.3s;
}