body {
    background-color:#8EABDB ;
}

.logo{
    text-align: center;
}

.text{
    display: flex;
    justify-content: center;
}

.login-cord {
    /* 1. 大きさを変える */
    width: 90%;
    max-width: 400px;
    height: 100px;
    font-size: 50px;

    /* 2. 背景色と文字の色を変える */
    background-color: #B0D8E2;
    color: #EB9A8A; /* #を追加しました */
        /* ★ 入力した文字の色を変える */
    color: #000000;
    /* ★ 入力した文字を中央に寄せる */
    text-align: center;

    /* 3. 角を丸くする・枠線を消す */
    border: none;              /* 枠線を完全に消す場合 */
    border-radius: 50px;
    outline: none;             /* 選択したときの青い枠線を消す */
    
    /* 数値入力の上下矢印を消す設定 */
    appearance: none;

    /* 内側の文字の余白 */
    padding: 0 16px;

    margin: 0 auto;
    display: block;

}

/* ChromeやSafariなどの数値矢印を消す追加設定 */
.login-cord::-webkit-inner-spin-button,
.login-cord::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.login-btn {
  display: block;       /* ★これが必須 */
  margin: 20px auto 0;  /* 上に20pxの隙間を空け、左右は自動で中央に */  
  width: 90%;
  max-width: 400px;
  height: 90px;
  font-size: 30px;           /* ボタンの文字の大きさを18pxにする */
  font-weight: bold;         /* ボタンの文字を太字にする */
  text-align: center;        /* ボタンの文字を中央に寄せる */
  background-color: #B0D8E2; /* ボタンの背景色を指定する */
  color: #000000;            /* ボタンの文字色を白にする */
  border: none;              /* 枠線を消す */
  border-radius: 50px;       /* 角を丸くする */
  cursor: pointer;           /* マウスを乗せたときに指のマークにする */
  transition: opacity 0.2s;  /* マウスを乗せたときのアニメーションを設定する */
}