.bg
{
  position: relative;
}

.bg__main
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: url("../img/bg_main.jpg") center / cover no-repeat;

  z-index: 0;
}

.bg__main::after
{
  content: "";
  position: absolute;
  inset: 0;

  background: url("../img/bg_ef.png") center / cover no-repeat;
  opacity: 1.0;
  pointer-events: none;

  z-index: 1;
}

.bg__common
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background: url("../img/bg_common.png") center top / cover no-repeat;
  background-attachment: fixed;

  z-index: 0;
}

.bg__effect
{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg__effect--heart
{
  position: absolute;
  pointer-events: none;
  transform: rotate(-45deg);
}

.bg__effect--sparkle
{
  position: absolute;
  pointer-events: none;
}

.content__wrap
{
  position: relative;
  padding: 0;

  z-index: 1;
}

.content
{
  max-width: 1600px;
  margin: 0 auto;
  padding-bottom: 100px
}

.hero__visual
{
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero__layer
{
  display: flex;
  position: relative;
  width: 100%;
  max-width: 2000px;
  aspect-ratio: 2028 / 1258;
}

.hero__bg
{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero__item
{
  position: absolute;
  z-index: 2;
}

.hero__item--character
{
  top: 3%;
  left: 17%;
  width: 38%;
}

.hero__item--baloon
{
  top: 8%;
  left: 7%;
  width: 22%;
}


.hero__item--gamelogo
{
  top: 56%;
  left: 5%;
  width: 30%;
}

.hero__item--title
{
  top: 38%;
  left: 60%;
  width: 35%;
  transform: translateX(-50%) translateY(50px);

  /* アニメーション */
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.8s ease;
}

.hero__item--title.is-show
{
  opacity: 1;
  transform: translateX(-50%) translateY(0px);
}

.hero__item--entrybtn
{
  top: 49%;
  right: 5%;
  width: 14%;
  height: auto;

  animation: hero-pulse 1.5s ease-in-out infinite;
}

@keyframes hero-pulse
{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.hero__item--entrybtn
{
  filter: brightness(1.1);
}

@media (max-width: 480px)
{
  .hero__visual
  {
    width: 100%;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero__layer
  {
    width: auto;
    height: 100%;
  }

  .hero__bg
  {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: 60%;
    object-fit: cover;
  }
  
  .hero__item--character
  {
    top: 95vw;
    left: 49%;
    width: clamp(300px, 90vw, 600px);
    transform: translateX(-50%);
  }

  .hero__item--baloon
  {
    top: 103vw;
    left: 48%;
    width: clamp(200px, 40vw, 640px);
  }

  .hero__item--title
  {
    top: 55vw;
    left: 50%;
    width: clamp(320px, 80vw, 480px);
    transform: translateX(-50%) translateY(100px);
  }

  .hero__item--gamelogo
  {
    top: 25vw;
    left: 50%;
    width: clamp(280px, 70vw, 480px);
    transform: translateX(-50%);
  }
}

.audition__lead
{
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

  position: relative;
  margin: 0 auto;
  margin-top: clamp(-300px, -14vw, -50px);
  width: 80%;
  
  background: rgba(255,251,214,0.9);
  outline: 8px dotted #fec823;
  outline-offset: -4px;
  border-radius: 20px;
  box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.2);

  z-index: 4;
}

.audition__lead h1
{
  margin-bottom: 0px;
  font-family: 'Mochiy Pop One', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 50px);
  letter-spacing: 0.2em;

  color: #ff7b48;
  text-shadow:
    -2px -2px 0 #ffffff,
     2px -2px 0 #ffffff,
    -2px  2px 0 #ffffff,
     2px  2px 0 #ffffff;
}

.audition__lead p
{
  font-size: clamp(14px, 1.2vw, 64px);
}

.heart__inner
{
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.heart__inner img 
{
  width: auto;
  height: 24px;
  flex-shrink: 0;
}

@media (max-width: 480px)
{
  .audition__lead
  {
    width: 100%;
    margin-top: 0px;
  }
}

/* ==============================
  特典
============================== */
.benefit__box
{
  display: block;  
  text-align: center;

  margin: 0 auto;
  margin-top:15px;
  margin-bottom:15px;
  padding: 20px;
  max-width: 1100px;
  width: 80%;

  position: relative;
  background: rgba(255,252,221,0.5);
  outline: 4px solid #ff7b48;
  border-radius: 10px;
  box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.2);
}

.benefit__box p
{
  display: inline-block;
  text-align: left;
  font-size: clamp(16px, 1.2vw, 64px);
}

.benefit__highlight
{
  display: inline-block;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.benefit__highlight-line
{
  position: relative;
  display: inline-block;
  color: #ffffff;

  max-width: 100%;
  overflow-wrap: break-word;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

  z-index: 1;
}

.benefit__highlight-line::before
{
  content: "";
  position: absolute;
  inset: 0;
  background:#ff7b48;
  transform: skew(-15deg);
  z-index: -1;
}

.benefit__highlight-line--lead
{
  padding: 1px 18px;
  font-size: clamp(16px, 1.2vw, 50px);
  margin-bottom: 5px;
}

.benefit__highlight-line--main
{
  padding: 6px 18px;
  font-size: clamp(16px, 1.2vw, 50px);
  margin-bottom: 5px;
  max-width: 100%;
}

@media (max-width: 480px)
{
  .benefit__box p
  {
    display: inline-block;
    text-align: left; 
  }
  .benefit__highlight-line--main
  {
    padding: 6px 10px;
  }
}

/* ==============================
  紹介文内のエントリーボタン
============================== */
.lead__entry-btn
{
  display: block;
  width: clamp(240px, 30vw, 500px);
  margin: 0 auto;
  animation: lead-pulse 1.5s ease-in-out infinite;
}

.lead__entry-btn:hover
{
  filter: brightness(1.1);
}

@keyframes lead-pulse
{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.lead__entry-btn img
{
  display: block;
  width: 100%;
  height: auto;
}

.lead__entry-text
{
  line-height: 1.6;
  white-space: nowrap;
  font-size: clamp(18px, 1.8vw, 32px) !important;
}

@media (max-width: 480px)
{
  .lead__entry-text.overlap-text
  {
    margin-top: -50px;
    position: relative;
  }
}

/* ==============================
  ゲーム紹介
============================== */
.gameintro__box
{
  display: flex;
  align-items: center;
  gap: 20px;

  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 80px;
  padding: 20px;
  max-width: 1100px;
  width: 80%;

  position: relative;
  background: rgba(235,243,248,0.5);
  outline: 4px solid rgba(83,164,219,0.5);
  border-radius: 10px;
  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);
}

.gameintro__left,
.gameintro__right
{
  display: flex;
  justify-content: center;
}

.gameintro__left
{
  flex-direction: column;
  align-items: center;
}

.gameintro__left img
{
  display: block;
  width: clamp(100px, 24vw, 320px);
  height: auto;
}

.gameintro__right p
{
  display: inline-block;
  text-align: left;
  font-size: clamp(14px, 1.0vw, 50px);
}

.gamelogo--btn
{
  transition: transform 0.3s ease;
}

.gamelogo--btn:hover
{
  transform: scale(1.05);
}

@media (max-width: 480px)
{
  .gameintro__box
  {
    flex-direction: column;
    gap: 10px;
  }
  .gameintro__left img
  {
    width: clamp(250px, 40vw, 400px);
  }
}


/* ==============================
  オーディション内容
============================== */
.audition__content
{
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
  z-index: 0;
}

.content__box
{
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

  margin: 0 auto;
  width: 70%;

  background: rgba(255,251,214,0.9);
  border-radius: 20px;
  box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.2);
}

.content__box section
{
  margin: 20px 0px;
}

.content__title
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 24px 0px;
}

.content__title-img
{
  width: clamp(100px, 20vw, 170px);
  height: auto;
  padding: 0px 10px;
}

.content__voice-title-img
{
  width: clamp(240px, 40vw, 340px);
  height: auto;
  padding: 0px 10px;
}

.content__heart-img
{
  width: clamp(20px, 4vw, 40px);
  height: auto;
}

.discription__box
{
  display: flex;
  flex-direction: column;

  width: 90%;
  box-sizing: border-box;

  margin: 0 auto;
  margin-bottom: 20px;
  padding: 10px 30px;
}

.discription__box p
{
  text-align: left;
  margin: 0;
}

.discription__box ul
{
  padding-left: 10px;
}

.discription__box li
{
  text-align: left;
  margin: 0;
}

.discription__box--yellow
{
  background: #fff8b5;
}

.discription__box--light-yellow
{
  background: #fffde7;
}

@media (max-width: 480px)
{
  .content__box
  {
    width: 95%;
  }

  .content__title-img
  {
    width: clamp(100px, 30vw, 170px);
  }

  .content__voice-title-img
  {
    width: clamp(240px, 38vw, 400px);
  }

  .content__heart-img
  {
    width: clamp(20px, 6vw, 40px);
    height: auto;
  }

  .discription__box
  {
    width: 95%;
    padding: 10px 20px;
  }

  .discription__box ul
  {
    padding-inline-start: 10px;
  }
}

/* ==============================
  選考方法
============================== */
.review__inner
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  max-width: 100%;
}

.review-img
{
  width: 24%;
  height: auto;
  flex-shrink: 0;
}

.review__allow-img
{
  width: 20px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 480px)
{
  .review__inner
  {
    flex-direction: column;
  }
  
  .review-img
  {
    width: 70%;
    height: auto;
    flex-shrink: 0;
  }

  .review__allow-img
  {
    display: none;
  }
}

.requirements__inner
{
  width: 100%;
  margin: 0 auto;
  padding: 0px 30px;
  box-sizing: border-box;
}

.requirements__title
{
  text-align: left;
  border-left: 4px solid #242424;
  padding-left: 12px;
  font-size: clamp(16px, 1.2vw, 40px);
}

.requirements__inner .discription__box
{
  width: 100%;
}

@media (max-width: 480px)
{
  .requirements__inner
  {
    padding: 0px 10px;
  }

  .requirements__inner p
  {
    white-space: nowrap;
    font-size: clamp(14px, 3.7vw, 16px);
  }
}

/* ==============================
  ボイスサンプル
============================== */
.voice-sample__boxes
{
  position: relative;
}

.voice-sample__box
{
  display: inline-block;
  text-align: center;

  margin: 0 auto;
  margin-top:15px;
  margin-bottom:15px;
  padding: 10px;
  max-width: 1100px;
  width: 90%;

  position: relative;
  background: rgba(255,252,221,0.5);
  border-radius: 10px;
  box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.2);
  z-index: 1;
}

.voice-sample__box--red
{
  outline: 4px solid #ff8895;
}

.voice-sample__box--green
{
  outline: 4px solid #33e18d;
}

.voice-sample__box--blue
{
  outline: 4px solid #35a6de;
}

.voice-sample__box p
{
  text-align: left;
}

.voice-sample__characters
{
  position: absolute;
  right: 2%;
  bottom: 0;

  width: 60%;
  max-width: 1400px;

  z-index: 0;
  pointer-events: none;
}

.voice-sample__characters img
{
  width: 100%;
  height: auto;
}

.voice-sample__type
{
  color: #ffffff;
  padding: 3px 10px;
  white-space: nowrap;
}

.voice-sample__type--red
{
  background-color: #ff8895;
}

.voice-sample__type--green
{
  background-color: #33e18d;
}

.voice-sample__type--blue
{
  background-color: #35a6de;
}

.voice-sample__inner
{
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 3px solid #929292;
}

.voice-sample__inner p
{
  font-size: clamp(14px, 1.8vw, 24px);
  font-weight: 500;
  font-family: 'Mochiy Pop One', sans-serif;
}

@media (max-width: 480px)
{
  .voice-sample__characters
  {
    position: static;
    transform: none;

    width: 100%;
    max-width: none;
  }

  .voice-sample__inner
  {
    flex-direction: column;
    gap: 0px;
  }
  
  .voice-sample__inner p
  {
    font-size: clamp(16px, 4.0vw, 36px);
  }
}

.notice__title
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;

  margin: 0;
  padding: 0;
  margin-left: -5px;
  margin-top: 10px;
}

.notice__title img
{
  width: 20px;
}

@media (max-width: 480px)
{
  .notice__title
  {
    margin-left: -12px;
  }
}