@CHARSET "UTF-8";
  
body {

/*   左から ロゴ、建物群、横棒、PC類、背景 */
  background:url("../img/kabenashi-logo-rgb-cloud-yoko-41d110619afdf7e3f1d9e94c9208f1fa.png"), url("../img/login_town-885d25b2aa9fcaa2624350eab0d24c20.png"), url("../img/login_line-2e1721533f96ae76a788bfeb24d8f327.png"), url("../img/login_illust_orange-14d5cec166c14fbb33537fa437b7e2f1.png"), url("../img/login_background-af88feacd5538c000118086516dded4e.png");
  background-size: 35% auto, 130% auto, 30%, 50% auto, cover;
  background-repeat: no-repeat;
  background-attachment:fixed,fixed,fixed,fixed,fixed;
  background-position: center 10%, center bottom, 25% 35%, 80% 80%,center;
}

.login-form-area {
    width: 385px;
    margin-bottom: 90px;
}

.card {
    background-color: #FDFDFC;
    border-color: #E9D3B7;
    border-width: medium;
/*   height: 320px; */
}

.form-item input {
  background: #fafafa;
  border: none;
  border-bottom: 2px solid #e9e9e9;
  color: #666;
  font-size: 1em;
  height: 50px;
  transition: border-color 0.3s;
  width: 100%;
  padding: 0px .7rem;
}

.form-item input:focus {
  border-bottom: 2px solid #c0c0c0;
  outline: none;
}

.button-panel {
  margin: 1.4em 0 1em 0;
  width: 100%;
}

.button-panel .button {
  background: #E57547;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 50px;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.3s ease-in-out;
  width: 100%;
}

.button:hover {
  background: #a93d0e;
}

#content {
  min-height: 100vh;
  top: 0 !important;
}



@media (max-width: 768px) { /* ウィンドウ幅が0～767pxの場合にCSSを適用 */
   body { 
    /* 左から ロゴ、建物群、横棒、PC類、背景 */
    background:url("../img/kabenashi-logo-rgb-cloud-yoko-41d110619afdf7e3f1d9e94c9208f1fa.png"), url("../img/login_town-885d25b2aa9fcaa2624350eab0d24c20.png"), url("../img/login_line-2e1721533f96ae76a788bfeb24d8f327.png"), url("../img/login_illust_orange-14d5cec166c14fbb33537fa437b7e2f1.png"), url("../img/login_background-af88feacd5538c000118086516dded4e.png");
    background-size: 60% auto, 120% auto, 40%, 70% auto, cover;
    background-repeat: no-repeat;
    background-attachment:fixed,fixed,fixed,fixed,fixed;
    background-position: center 10%, center bottom, 10% 35%, 80% 80%,center;
  }
  
  .login-form-area {
    width: 385px;
    margin-bottom: 150px;
  }
    
  .card {
    background-color: #FDFDFC;
    border-color: #E9D3B7;
    border-width: medium;
/*     height: 320px;  */
  }
  
  .form-item input {
    background: #fafafa;
    border: none;
    border-bottom: 2px solid #e9e9e9;
    color: #666;
    font-size: 1em;
    height: 50px;
    transition: border-color 0.3s;
    width: 100%;
    padding: 0px .7rem;
  }
  
  .form-item input:focus {
    border-bottom: 2px solid #c0c0c0;
    outline: none;
  }

  .button-panel {
    margin: 1.4em 0 1em 0;
    width: 100%;
  }

  .button-panel .button {
    background: #E57547;
    border: none;
    color: #fff;
    cursor: pointer;
    height: 50px;
    font-size: 1.2em;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    transition: background 0.3s ease-in-out;
    width: 100%;
  }

  .button:hover {
    background: #a93d0e;
  }

  #content {
    min-height: 100vh;
    top: 0 !important;
  }
}

@media (max-width: 479px) { /* ウィンドウ幅が0～479pxの場合にCSSを適用 */

  body {
    /* 左から ロゴ、建物群、横棒、PC類、背景 */
    background:url("../img/kabenashi-logo-rgb-cloud-yoko-41d110619afdf7e3f1d9e94c9208f1fa.png"), url("../img/login_town-885d25b2aa9fcaa2624350eab0d24c20.png"), url("../img/login_line-2e1721533f96ae76a788bfeb24d8f327.png"), url("../img/login_illust_orange-14d5cec166c14fbb33537fa437b7e2f1.png"), url("../img/login_background-af88feacd5538c000118086516dded4e.png");
    background-size: 70% auto, 150% auto, 80%, 90% auto, cover;
    background-repeat: no-repeat;
    background-attachment:fixed,fixed,fixed,fixed,fixed;
    background-position: center 10%, center bottom,30% 31%,center 80%,center;
  }
  
  .login-form-area {
    width: 300px;
    margin-bottom: 90px;
  }
    
  .card {
    background-color: #FDFDFC;
    border-color: #E9D3B7;
    border-width: medium;
/*     height: 300px;  */
  }
  
  .form-item input {
    background: #fafafa;
    border: none;
    border-bottom: 2px solid #e9e9e9;
    color: #666;
    font-size: 1em;
    height: 50px;
    transition: border-color 0.3s;
    width: 100%;
    padding: 0px .7rem;
  }
  
  .form-item input:focus {
    border-bottom: 2px solid #c0c0c0;
    outline: none;
  }

  .button-panel {
    margin: 1.4em 0 1em 0;
    width: 100%;
  }

  .button-panel .button {
    background: #E57547;
    border: none;
    color: #fff;
    cursor: pointer;
    height: 50px;
    font-size: 1.2em;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    transition: background 0.3s ease-in-out;
    width: 100%;
  }

  .button:hover {
    background: #a93d0e;
  }

  #content {
    min-height: 100vh;
    top: 0 !important;
  }
  
  .alert {
    padding: 0.5rem;
  }
}