.strength-test{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:5em;
}


.strength-test__text{
  font-size:0.8em;
}

        .strength-test__circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            text-align: center;
            font-size:0.8em;
            line-height: 40px;
            color: #000;
            margin-top: 10px;
            background: #fff;
            border:1px solid #ccc;
        }

        .strength-test__circle.lv1 {
            background: conic-gradient(
              red 0% 25%,
              white 25% 100%
            );
        }

        .strength-test__circle.lv2 {
            background: conic-gradient(
              yellow 0% 50%,
              white 50% 100%
            );
        }

        .strength-test__circle.lv3 {
            background: conic-gradient(
              lightgreen 0% 75%,
              white 75% 100%
            );
        }

        .strength-test__circle.lv4 {
            background: conic-gradient(
              green 0% 100%
            );
            color: #fff;
        }

.signup-form__inner{
    display:flex;
    margin:auto;
    justify-content:center;
    align-items:center;
}
.signup-form__inner__left{
  flex-basis:400px;
}
.signup-form__inner__right{
  flex-basis:50px;
}

.btn1_wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4em 0 3em 0;
}

.btn1 {
  /* 基本設定: インライン要素をブロック化し、中央揃えを容易に */
  display: inline-block;
  text-align: center;
  text-decoration: none; /* リンクの下線を削除 */
  cursor: pointer; /* マウスカーソルを指の形にする */

  /* サイズと形状 */
  padding: 0.5em 1.5em; /* 上下左右の余白を確保 */
  border-radius: 6px; /* 適度な角丸 */
  border: none; /* 枠線をなしに */

  /* 色とフォント（キーカラー: 濃い青を想定） */
  background-color: #007bff; /* 背景色 */
  color: #ffffff; /* 文字色（白） */
  font-size: 1.8em; /* フォントサイズ */
  font-weight: bold; /* 文字を太く */
  
  /* アニメーション設定 */
  transition: background-color 0.3s ease, transform 0.1s ease;
}

/* ホバー時（マウスオーバー時）のエフェクト */
.btn1:hover {
  background-color: #0056b3; /* 色を少し濃くして、変化を明確にする */
}

/* アクティブ時（クリックしている間）のエフェクト */
.btn1:active {
  transform: translateY(1px); /* ボタンが少し沈むような効果 */
}