.column-apply {
    flex-direction: column;
}


.character-containar {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    /* background-color: rgb(159, 160, 160); */
    background-repeat: no-repeat;
    /* background-position: top center; */
    z-index: 1;
}


/* キャラごとに背景の色を変更 */
.character-containar_01 {
    background-color: rgb(159, 160, 160);
}

.character-containar_02 {
    background-color: rgb(89, 87, 87);
}

.character-containar_03 {
    background-color: rgb(231, 36, 24);
}

.character-containar_04 {
    background-color: rgb(0, 140, 207);
}

.character-containar_05 {
    background-color: rgb(255, 244, 98);
}

.character-containar_06 {
    background-color: rgb(141, 197, 86);
}

.character-containar_07 {
    background-color: rgb(240, 131, 0);
}

.character-containar_08 {
    background-color: rgb(246, 191, 215);
}

.character-image {
    z-index: 10;
    width: 400px;
    animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.character-name {
    z-index: 10;
    padding: 10px 40px;
    border-radius: 50px;
    margin: 16px;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

/* キャラごとに名前表示の色を変更 */
.character-name_01 {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}

.character-name_02 {
    /* color: rgb(255, 255, 255);
    background-color: rgb(89, 87, 87); */
    color: rgb(89, 87, 87);
    background-color: rgb(255, 255, 255);
}

.character-name_03 {
    color: rgb(234, 85, 50);
    background-color: rgb(255, 255, 255);
}

.character-name_04 {
    color: rgb(0, 140, 207);
    background-color: rgb(255, 255, 255);

}

.character-name_05 {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(248 183 61);
}

.character-name_06 {
    color: rgb(0, 153, 68);
    background-color: rgb(255, 255, 255);
}

.character-name_07 {
    color: rgb(240, 131, 0);
    background-color: rgb(255, 255, 255);
}

.character-name_08 {
    /* color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(236 122 172); */
    color: rgb(236 122 172);
    background-color: rgb(255, 255, 255);

}


.agreement-check {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.checkbox-items {
        display: flex;
        align-items: center;
    }



/* 　以下、キャラクター背景　 星空の背景のスタイル */

.stars {
  position: relative;
  width: 100%; /* 星空の横幅 */
    /* 星空の背景色 */
    overflow: hidden; /* 星が枠外にはみ出すのを防ぐ */
}

/* 星のスタイル */
.star {
  position: absolute;
  display: block;
  background-color: #fff; /* 星の色 */
  border-radius: 50%;
  box-shadow: 0 0 4px 2px rgba(#fff, 0.2); /* 星の影 */
  opacity: 0;
  animation: twinkle 5s infinite;
}

/* 星がキラキラ光るアニメーション */
@keyframes twinkle {
  0% {
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}