@charset "UTF-8";
.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.kv-page-name {
  position: absolute;
  color: #ff026f;
  font-weight: bold;
  font-size: clamp(24px, 2.2vw, 46px);
  bottom: 20%;
  left: 18%;
  background-color: rgba(255, 255, 255, 1);
  border-top-right-radius: 15px;
  border-bottom: 4px solid #ff026f;
  padding: 15px 30px;
}
.campaign-banner > .campaign-banner-img {
  height: 570px;
  width: 100%;
  aspect-ratio: 5 / 2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: ellipse(90% 96% at 50% 0%);
  position: relative;
  background-image: url(/common/images/renew/about/choice/kv-about-choice.webp);
  margin: 0 auto;
}
main.page-about_choice section.back-white {
  display: none;
}
body > main > section.map-section > div > div {
  background-color: #fef6f8;
}
body > main > section.map-section > div {
  background-image: none;
}
.contents-title-area {
  background-color: #fef6f8;
  text-align: center;
  color: #ff026f;
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: center;
  align-items: center;
}
.contents-title {
  width: fit-content;
  padding: 70px 20px 0;
  font-weight: bold;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.about-choice-section {
  width: 100%;
  margin: 0 auto;
}
.about-choice-section .bg-03-img {
  padding: 20px 0px;
}

.grid-container {
  padding: 20px;
  max-width: 860px;
  margin: 0 auto;
}

.content-card {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background-size: cover;
  background-position: center;
  position: relative;
  margin-top: 120px;
  padding: 0 0 2px;
  z-index: 0;
}
.content-card .genreBar {
  position: absolute;
  top: -70px;
  width: 25%;
  z-index: -1;
}
.content-card .genreBar img {
  width: 100%;
  height: auto;
}
.content-card h2 {
  border-radius: 10px 10px 0 0;
  position: relative;
  color: #fff;
  text-align: center;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  font-family: "Noto Sans JP";
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  line-height: 130%; /* 26px */
  padding: 24px 0 38px;
  margin: 0;
  z-index: -2;
}
.content-body {
  position: relative;
  margin-top: -18px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  clip-path: url(#clipArch);
  z-index: -3;
}
.content-body p {
  margin-right: 40px;
  line-height: 2;
  width: 48%;
}
.content-body span {
  background: #ffffff;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 1) 95%, rgba(255, 255, 255, 0) 95%);
}
.card-button {
  color: #fff;
  text-shadow: 1px 1px 1px #00000040;
  font-weight: 700;
  width: 275px;
  text-align: center;
  display: block;
  padding: 16px 8px;
  margin: 8px auto 16px;
  border-radius: 20px;
  text-decoration: none;
  letter-spacing: 0.1rem;
  border-radius: 58px;
  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.15) inset, 0px -1px 2px 0px rgba(0, 0, 0, 0.1) inset, 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  z-index: -3;
}
.btn-hiphop {
  background: radial-gradient(88.68% 144.44% at 50.67% -0.56%, #ff9bb2 2.49%, #ea5f7f 100%);
}
.btn-kpop {
  background: radial-gradient(88.68% 144.44% at 50.67% -0.56%, #decd7f 2.49%, #ad9625 61.97%);
}
.btn-idol {
  background: radial-gradient(88% 144% at 50% -5%, #e7aaff 2.5%, #b568d4 100%);
}
.btn-jazzdance {
  background: radial-gradient(88% 144% at 50% -5%, #ffb2a1 2.5%, #e87324 100%);
}
.btn-themepark {
  background: radial-gradient(88% 144% at 50% -5%, #77c15e 2.5%, #499131 100%);
}
.btn-ballet {
  background: radial-gradient(88% 144% at 50% -5%, #80d0c6 2.5%, #54b2a6 100%);
}
.btn-mensidol {
  background: radial-gradient(88% 144% at 50% -5%, #6c6ca9 2.5%, #454591 100%);
}
.btn-heeldance {
  background: radial-gradient(88% 144% at 50% -5%, #aa80cb 2.5%, #7d3f9e 100%);
}
.btn-bellydance {
  background: radial-gradient(88% 144% at 50% -5%, #ecb348 2.5%, #e3a83b 100%);
}
.btn-dancevocal {
  background: radial-gradient(88% 144% at 50% -5%, #FF5262 2.5%, #F13849 100%)
}
.content-card h2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content-card h2 br.sp {
  display: none;
}

.content-card h2::before,
.content-card h2::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.content-card h2::before {
  background-image: url("/common/images/renew/about/choice/stars-01.svg"); /* 左のSVGアイコン */
}

.content-card h2::after {
  background-image: url("/common/images/renew/about/choice/stars-02.svg"); /* 右のSVGアイコン */
}

.card-button::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-left: 0.5rem;
  background-image: url("/common/images/renew/about/choice/arrow-right.svg"); /* 矢印アイコン */
}
section.ctaBox {
  width: 90%;
  margin: 0 auto;
}
section.ctaBox .video-check-banner {
  background-color: #fef6f8;
  padding: 20px 0px;
  margin-top: 50px;
}
section.ctaBox .video-check-banner {
  margin-bottom: 0px;
}
#contentGrid > section.curved {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  margin-top: 50px;
}
main.page-about_choice > section.map-section {
  margin-top: 0px;
}

.lazy-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.image-wrapper {
  width: 54%;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); /* 台形例 */
}

.clipped-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: inherit;
}
@media screen and (max-width: 767px) {
  .contents-title {
    padding: 50px 20px 0;
  }
  .kv-page-name {
    left: 0%;
    font-size: 5vw;
    padding: 10px 15px;
    bottom: 10%;
  }
  .campaign-banner > .campaign-banner-img {
    height: 230px;
    clip-path: none;
    position: relative;
    background-image: url(/common/images/renew/about/choice/kv-about-choice-sp.webp);
  }
  .about-choice-section {
    max-width: 100%;
  }
  .content-card {
    margin-top: 100px;
  }
  .content-card .genreBar {
    position: absolute;
    top: -60px;
    left: -8px;
    width: 40%;
  }
  .content-body {
    align-items: center;
    justify-content: space-between;
    margin-top: -14px;
    height: 290px;
  }
  .content-body svg {
    width: 52%;
  }
  .content-body p {
    width: 48%;
    margin-right: 10px;
    line-height: 1.7;
    font-size: 14px;
    font-weight: 500;
    text-wrap: balance;
  }
  .content-card h2 {
    font-size: 16px;
    border-radius: 10px 10px 0 0;
    padding: 20px 0 27px;
  }
  .content-card h2 br.sp {
    display: block;
  }
  .card-button {
    width: 70%;
    padding: 12px 8px;
    font-size: 14px;
  }
  .card-button::after {
    width: 12px;
    height: 16px;
  }
  .bg-03-img .video-check-banner .video-check-banner-text > p > span.choice_text {
    font-size: 16px;
  }
  .content-body span {
    background: #ffffff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 90%);
  }
  #contentGrid > section.curved {
    width: inherit;
  }
  .clipped-img {
    position: absolute;
  }
}