img {
  display: block;
  max-width: 100%;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.wrapper {
  max-width: 1000px;
  width: 98%;
  margin: 0 auto;
  padding: 1rem;
}

#mogumogu {
  font-family: "Sawarabi Gothic", sans-serif;
  background-color: #ffeb3c;
  overflow-x: hidden;
  background: repeating-linear-gradient(135deg, #ffeb3c, #ffeb3c 20px, #fff6aa 20px, #fff6aa 40px);
}
#mogumogu .mv picture {
  position: relative;
  display: block;
}
#mogumogu .mv .logo_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 900px;
  width: 70%;
}
@media (min-width: 768px) {
  #mogumogu .mv .logo_wrapper {
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
#mogumogu .mv .logo_wrapper .logo {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: url(../img/logo.png) no-repeat top/contain;
  animation: fadeUp 1s ease-in forwards;
}
@keyframes fadeUp {
  0% {
    transform: scale(1) translateY(0);
    opacity: 0;
  }
  20% {
    transform: scale(0.95, 0.9) translateY(18px);
  }
  40% {
    transform: scale(1.08, 1.02) translateY(-22px);
  }
  65% {
    transform: scale(0.97, 1.05) translateY(14px);
  }
  85% {
    transform: scale(1.03, 0.98) translateY(-10px);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
#mogumogu .time {
  max-width: 1000px;
  width: 98%;
  padding: 2rem 1rem;
  margin: 8rem auto 3rem;
  text-align: center;
  color: #fff;
  letter-spacing: 0.1rem;
  background-color: #a70808;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 2px, transparent 2px), radial-gradient(circle, rgba(255, 255, 255, 0.3) 2px, transparent 2px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  background-repeat: repeat;
  box-shadow: 2px 2px 1px #840000;
}
#mogumogu .time .anime-up {
  overflow: hidden;
  font-size: clamp(1.1rem, 5vw, 3rem);
  line-height: 1;
}
#mogumogu .time .anime-up > span > span {
  text-shadow: 4px 3px 1px #840000;
  line-height: 1;
  font-weight: bold;
}
#mogumogu .time .anime-up.displayed > span {
  display: inline-block;
  overflow: hidden;
}
#mogumogu .time .anime-up.displayed > span > span {
  display: inline-block;
  transform: translateY(100%);
  animation: showTextFromBottom 0.6s ease-out forwards;
}
@keyframes showTextFromBottom {
  0% {
    transform: translateY(100%);
  }
  60% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(0);
  }
}
#mogumogu .about {
  position: relative;
  overflow: hidden;
}
#mogumogu .about .wrapper {
  padding: 0 0.5rem;
}
#mogumogu .about_text {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
  line-break: strict;
  word-break: keep-all;
}
#mogumogu .about_text p {
  margin-bottom: 9px;
}
#mogumogu .about .scroll_inner {
  height: 50vh;
  display: flex;
  align-items: flex-start;
  padding-top: 0;
}
#mogumogu .about .scroll_inner .scroll_list {
  display: flex;
  gap: 2rem;
  padding-inline: 5vw;
}
#mogumogu .about .scroll_inner .scroll_list .scroll_card {
  flex: 0 0 400px;
  aspect-ratio: 16/9;
  display: block;
}
@media (min-width: 768px) {
  #mogumogu .about .scroll_inner .scroll_list .scroll_card {
    flex: 0 0 800px;
  }
}
@media (min-width: 768px) {
  #mogumogu .about .scroll_inner {
    align-items: center;
  }
}
#mogumogu .bn {
  width: 100%;
  margin-top: 5rem;
}
#mogumogu .bn table {
  width: 100%;
  border-spacing: 12px;
  border-collapse: separate;
}
#mogumogu .bn table tr {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
#mogumogu .bn table tr th {
  width: 100%;
  padding: 1rem;
  background-color: #000;
  color: #fff;
  font-size: 1.1rem;
}
#mogumogu .bn table tr td {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  background-color: #fff;
  text-align: center;
  font-weight: bold;
}
@media (min-width: 768px) {
  #mogumogu .bn table {
    border-spacing: 0 12px;
    width: 70%;
    margin: 0 auto;
  }
  #mogumogu .bn table tr {
    display: table-row;
  }
  #mogumogu .bn table tr th {
    width: 30%;
    text-align: left;
  }
  #mogumogu .bn table tr td {
    width: 40%;
  }
}
#mogumogu .movie {
  box-sizing: border-box;
  overflow: hidden;
  max-width: 800px;
  width: 98%;
  margin: 5rem auto;
  padding: 1rem;
}
#mogumogu .movie_wrap {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}
#mogumogu .movie_wrap iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}
#mogumogu .guest {
  background: url(../img/back.png) no-repeat center/cover;
  padding: 5rem 0;
  position: relative;
}
@media (min-width: 768px) {
  #mogumogu .guest {
    height: 100vh;
  }
}
#mogumogu .guest::after {
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio: 16/1;
  background: url(../img/waku.png) no-repeat center/cover;
  bottom: 0;
  left: 0;
}
#mogumogu .guest_box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  gap: 35px;
  color: #fff;
}
@media (min-width: 768px) {
  #mogumogu .guest_box {
    gap: 5rem 1rem;
  }
}
#mogumogu .guest_box_item {
  max-width: 300px;
  flex: 0 0 100%;
  position: relative;
}
@media (min-width: 768px) {
  #mogumogu .guest_box_item {
    flex: 0 0 calc(33.333% - 1rem);
    justify-content: space-around;
  }
}
#mogumogu .guest_box_item::before {
  content: "";
  width: 38px;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  z-index: 15;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 35%), radial-gradient(circle at center, #ffeb3c 0%, rgb(213, 191.1538461538, 0) 70%);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.4), 0 5px 6px rgba(0, 0, 0, 0.6);
  top: -8%;
  left: 10%;
}
#mogumogu .guest_box_item::after {
  content: "";
  width: 38px;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  z-index: 15;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 35%), radial-gradient(circle at center, #ffeb3c 0%, rgb(213, 191.1538461538, 0) 70%);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.4), 0 5px 6px rgba(0, 0, 0, 0.6);
  top: -8%;
  right: 10%;
}
#mogumogu .guest_box_item:first-child::before {
  content: "";
  width: 38px;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  z-index: 15;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 35%), radial-gradient(circle at center, #ff7436 0%, rgb(207, 63.8507462687, 0) 70%);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.4), 0 5px 6px rgba(0, 0, 0, 0.6);
  top: -8%;
  left: 10%;
}
#mogumogu .guest_box_item:nth-child(2)::after {
  content: "";
  width: 38px;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  z-index: 15;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 35%), radial-gradient(circle at center, red 0%, #990000 70%);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.4), 0 5px 6px rgba(0, 0, 0, 0.6);
  top: -8%;
  right: 10%;
}
#mogumogu .guest_box_item:nth-child(3)::before {
  content: "";
  width: 38px;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  z-index: 15;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 35%), radial-gradient(circle at center, blue 0%, #000099 70%);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.4), 0 5px 6px rgba(0, 0, 0, 0.6);
  top: -8%;
  left: 10%;
}
#mogumogu .guest_box_item:last-child::after {
  content: "";
  width: 38px;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  z-index: 15;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 35%), radial-gradient(circle at center, red 0%, #990000 70%);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.4), 0 5px 6px rgba(0, 0, 0, 0.6);
  top: -8%;
  right: 10%;
}
#mogumogu .guest_box_item .anime-up {
  overflow: hidden;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1;
  margin-top: 13px;
}
#mogumogu .guest_box_item .anime-up > span > span {
  line-height: 1;
  font-weight: bold;
}
#mogumogu .guest_box_item .anime-up.displayed > span {
  display: inline-block;
  overflow: hidden;
}
#mogumogu .guest_box_item .anime-up.displayed > span > span {
  display: inline-block;
  transform: translateY(100%);
  animation: showTextFromBottom 0.6s ease-out forwards;
}
@keyframes showTextFromBottom {
  0% {
    transform: translateY(100%);
  }
  60% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(0);
  }
}/*# sourceMappingURL=style.css.map */