@charset "UTF-8";

body {
    margin: 0 ;/*外側の余白ゼロ*/
    padding: 0;/*外側の余白ゼロ2*/
    display: flex;/*上にロゴ下にフォームになるよ*/
    flex-direction: column; /* パーツを縦に並べる */
    align-items: center;     /* 全てのパーツ真ん中に集める */
    justify-content: center;   /* 画面の縦方向の真ん中に集める */
    height: 100vh;/*縦横幅100パーにして*/
    width: 100vw;
    position: relative;/*とらわれた牛*/

  /*絶対クリーム色にしてね*/
    background-color: #fbfbfa !important;

    
    background-image: 
         /*グラデ空上端から１５％水色、２５％グラデ*/
        linear-gradient(180deg, #d4f0ff 0%, #d4f0ff 15%, transparent 25%),
        /* グラデ草下端から１５％緑、２２％グラデ*/
        linear-gradient(0deg, #d3edd2 0%, #d3edd2 15%, transparent 22%);
  /*画面１００％*/
    background-size: 100% 100%, 100% 100% !important;
}

/* ウシ専用箱*/
.login-container {
  position: absolute; /* 牛を浮かせえる */
  top: 50% ;
  left: 50% ;
  transform: translate(-50%, -50%); /* 画面真ん中に配置 */
  width: 100%;
  max-width: 680px; /* ウシとフォームがぴったり密着する横幅 */
  height: 0 ; /* 草の上に乗らせるために大切 */
  display: flex;
  justify-content: space-between ; /* 左右の端に牛 */
 
}

.login-container img {
  height: 240px; 
  width: auto ;
  display: block;
}

/* 左側のウシを少しだけ内側に寄せる */
.cowleft {
  margin-left: -10px ;
}

/* 右側のウシを少しだけ内側に寄せる */
.cowright {
  margin-right: -10px;
}

/*ロゴ画像を安全に指定*/
img[src*="logo3.png"],
img[alt="神牛乳のロゴ"],
body > img {
  width:440px !important;       /* ロゴサイズ変えられるとこ */
  height: auto ;       
  display: block;
  position: relative ;
 
}


/* 入力欄（テキストとパスワード）のスタイル */
input[type="text"], input[type="password"] {
    width: 100% ;
    padding: 12px;
    margin-top: 6px;
    margin-bottom: 18px;
    border: 1px solid #ccd0d4;
    border-radius: 6px ;
    box-sizing: border-box ;
    font-size: 14px;
}

/*エラーメッセージ表示欄 */
#errorArea {
    color: #d9534f ;
    font-size: 13px ;
    font-weight: bold ;
    text-align: center ;
}

/* ログインボタン　*/
button[type="submit"] {
    width: 100% ;
    padding: 14px ;
    background-color: #01bdf1 ; /* 水色 */
    color: white ; /* 文字白 */
    border: none ;
    border-radius: 6px ; /* 角丸　*/
    font-weight: bold ;
    font-size: 14px ;
    cursor: pointer ;/*カーソル指*/
}

button[type="submit"]:hover {
    background-color: #aadcea ;
}
button[type="submit"]::after {
    content: "ログイン" ;
}