/*
 *  ###########################################################################
 *    [Login]画面用
 *  ###########################################################################
 */

.mainArea
{
  min-height: 300px;
  /* 水平・垂直方向の中央揃え */
  display: flex;
  /*justify-content: center;*/
  align-items: center;
}

.loginHeader
{
  margin: 10px 0;
  text-align: center;
}

.msgArea
{
  border: 2px solid #FF3232;
  border-radius: 10px;
  font-size: 1rem;
  width: 100%;
  max-width: 330px;
  padding: 1rem;
  margin: 0 auto;
}

.btnArea
{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ログインボタン */
.btn-primary
{
  --tw-border-opacity: 1;
  border-color: rgb(2 80 187 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(2 80 187 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line: none;
  width: auto;
}

.btn-contact
{
  color: white;
  background-color: #F79646;
  --tw-border-opacity: 1;
  border-color: rgb(247 150 70 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(247 150 70 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line: none;
  width: auto;
  /* hover用プロパティ */
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #EB8E42;
  --bs-btn-hover-border-color: #EB8E42;
  /* active用プロパティ */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #DE873F;
  --bs-btn-active-border-color: #DE873F;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  /* disabled用プロパティ */
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-disabled-bg: #F79646;
  --bs-btn-disabled-border-color: #F79646;
}

.btn
{
  border-radius: .375rem;
  padding: 1rem;
  line-height: 25px;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  max-width: 330px;
  height: 100px;
  margin: 20px 0px;
}