/*************************************************
LIVE配信
*************************************************/
#live .section_ttl img {
  max-width: 425px;
}
#live.section_main-content .section_ttl img.character-img-left {
  top: -70px;
}
.live_text {
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  background-color: #fff;
  margin: 0 auto;
  padding: 60px 100px;
}
/* .live_text img {
  display: block;
  width: fit-content;
  margin: 0 auto 30px;
  background-color: var(--main-color);
} */
/******* ボタン *******/
#live .button_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#live .more_btn {
  display: block;
  position: relative;
  margin: 20px 10px 0;
}
#live .more_btn a {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-size: min(5vw, 20px);
  line-height: 1.2;
  font-weight: bold;
  /* width: 70%; */
  /* max-width: 300px; */
  /* aspect-ratio: 7/1; */
  background-color: #000;
  border-radius: 7px;
  transition-duration: 0.4s;
  z-index: 1;
  padding-left: min(10px, 5vw);
  margin: 0 auto;
}
#live .more_btn a .logo-box {
  width: min(10vw, 45px);
  aspect-ratio: 1;
  background-size: contain;
}
#live .more_btn a .logo-box.tiktok {
  background-image: url("../images/tiktok-white.svg");
}
#live .more_btn a .logo-box.youtube {
  background-image: url("../images/youtube-white.svg");
}
#live .more_btn a::after {
  background: var(--main-color);
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
#live .more_btn a:hover {
  color: #000;
  transform: scale(1.1);
}
#live .more_btn a:hover .logo-box.tiktok {
  background-image: url("../images/tiktok.svg");
}
#live .more_btn a:hover .logo-box.youtube {
  background-image: url("../images/youtube.svg");
}
#live .more_btn a:hover::after {
  transform: scale(1.1);
}
#live .more_btn a span {
  display: inline-block;
  padding-left: min(2vw, 20px);
}
@media (max-width: 599px) {
  #live {
    padding-top: 0;
  }
  .section_main-content .section_ttl {
    max-width: 450px !important;
  }
  .section_main-content .section_ttl img.character-img-left {
    top: -80px;
  }
  .live_text {
    padding: 60px 30px;
  }
  #live .more_btn a {
    padding: min(5vw, 10px);
  }
}