body {
    background-color: #ee9090;
  }
  
  /* form { */
    /* width: 800px; */
    /* padding: 40px 40px; */
    /* border:5px solid white;
    position: absolute; */
    /* top: 50%; */
    /* top: 90%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #000;
    text-align: center;
  } */

  form {
  width: 800px;
  border: 5px solid white;
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%); /* Y方向はずらさない */
  background-color: #000;
  text-align: center;
}
  
  /* formの中のh1 */
  form h1 {
    color: white;
    font-weight: 500;  /* 文字太さ */
  }

  form h2 {
    color: white;
    font-weight: 500;
  }
  
  form h3 {
    color: white;
    /* font-weight: 500; */
  }

  form p {
    color: white;
    font-size: 15px;
  }
  
  form input[type = "text"],
  form input[type = "password"] {
    border: 0;
    background: none;
    /* display: block; */
    margin: 20px auto;
    border: 2px solid #ff69b4;
    padding: 15px 10px;
    width: 200px;
    outline: none;
    border-radius: 24px;
    transition: 0.25s;
    text-align: center;
  }

  /* <form> 内の type="text" または type="password" の <input> 要素が フォーカス（クリックまたはタブで選択）されたとき に、
幅が 280px に広がり、背景色が #f0f8ff（淡い水色）に変わる、 */
  form input[type = "text"]:focus,
  form input[type = "password"]:focus {
    width: 280px;
    background-color: #f0f8ff;
  }
  
  form input[type = "submit"]{
    border: 0;
    background: none;
    /* display: block; */
    margin: 20px auto;
    border: 2px solid #f0f8ff;
    padding: 15px 10px;
    width: 200px;
    outline: none;
    color: white;
    border-radius: 25px;
    transition: 0.25s;
    text-align: center;
    cursor: pointer;
  }

  form input[type = "button"]{
    border: 0;
    background: none;
    /* display: block; */
    margin: 20px auto;
    border: 2px solid #f0f8ff;
    padding: 15px 10px;
    width: 200px;
    outline: none;
    color: white;
    border-radius: 25px;
    transition: 0.25s;
    text-align: center;
    cursor: pointer;
  }
  
  /* <form> 内の type="submit" の <input> 要素に マウスカーソルを乗せたとき（hover） に、
背景色が #ff69b4（ピンク系）になり、枠線（border）も #ff69b4 に変わる。 */
  form input[type = "submit"]:hover {
    background-color: #ff69b4;
    border: 2px solid #ff69b4;
  }

.login_form_btm input {
  /* display: inline-block; 横並びに表示 */
  display: block;
  margin-right: 10px; /* 各入力フィールド間にスペースを追加 */
}

/* .login_form_btm input[type="submit"] {
  width: auto; /* サブミットボタンの幅を自動調整 
  } */

  .float_test {
    background-color:  #ccc;    /* 背景色指定 */
    float:  left;               /* 横並びにする */
    margin:  5px;               /* 要素と要素の間を開ける */
    padding:  10px;             /* 余白指定 */
}

.btn {
    padding: 10px 10px;       /*余白を設定*/
    color: #0f0808;            /*文字の色*/
    border-radius: 3px;     /*角を丸める*/
    display: inline;
}
#blue_btn {
    background: #6ce6d1;    /*ボタン色を設定*/
}

#pink_btn {
  background: #feaec7;    /*ボタン色を設定*/
}

#yellow_btn {
  background: #fdeca6;    /*ボタン色を設定*/
}

#glay_btn {
  background: #53524e;    /*ボタン色を設定*/
}