@charset "UTF-8";
/* ログインフォームスタイルシート */
/* ログインフォームボックス */
div#box_login_form {
  margin: 20px calc(50% - 490px) 19px;
}
div#box_login_form a {
  color: #0094de;
  text-decoration: none;
}

/* ログインフォームボックス下部 */
div#box_login_form_bottom {
  padding: 14px 12px 0;
}

/* セッションタイムアウトメッセージ */
p#session_timeout_message {
  margin-top: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  color: red;
}

/* エラーメッセージ */
p#error_message {
  margin-top: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #f00;
}

/* ログイン情報入力フォーム */
div#login_info_input_form {
  margin-bottom: 7px;
  padding: 0 15px;
  border: 1px #e6e6e6 solid;
  background: #f5f5f5;
}
div#login_info_input_form table {
  width: 100%;
  font-size: 11px;
}
div#login_info_input_form table tr#login_id {
  border-bottom: 1px #d0d0d0 dotted;
}
div#login_info_input_form table tr th {
  width: 32%;
  padding: 14px 0;
  text-align: right;
  vertical-align: middle;
}
div#login_info_input_form table tr th p {
  display: none;
  margin-top: 10px;
}
div#login_info_input_form table tr td.input {
  padding: 14px 0 14px 15px;
  vertical-align: middle;
}
div#login_info_input_form table tr td.input input {
  height: 25px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px #ccc solid;
}
div#login_info_input_form table tr td.note {
  width: 25%;
  padding: 15px;
  padding-right: 0;
  text-align: right;
  vertical-align: middle;
}

/* 自動ログインフラグ */
div#autoLogin_flg {
  margin-bottom: 12px;
}

/* ログインボタン */
div#login_btn {
  text-align: center;
  margin-bottom: 15px;
}
div#login_btn input#login_submit {
  height: 28px;
  width: 88px;
  border-style: none;
  cursor: pointer;
  background: url("/img/btn/btn_login.png") left top no-repeat;
}

/* 会員登録ボックス */
div#box_membership_registration {
  margin: 0 calc(50% - 490px) 73px;
}
div#box_membership_registration a {
  color: #0094de;
  text-decoration: none;
}

/* 会員登録ボックス下部 */
div#box_membership_registration_bottom {
  padding: 14px 12px 16px;
  font-size: 0;
}
div#box_membership_registration_bottom div#table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

/* 会員登録ボタン */
div#membership_registration_btn {
  display: table-cell;
  width: 100%;
  padding-left: 77px;
  text-align: center;
}
div#membership_registration_btn a img {
  width: 100%;
  max-width: 230px;
}

/* 「うたスキとは？」のリンク */
div#link {
  display: table-cell;
  width: 77px;
  text-align: right;
  vertical-align: middle;
  font-size: 11px;
}

/*-----------------------------------------------------------
	 画面サイズが1015px以下
-----------------------------------------------------------*/
@media screen and (max-width: 1015px) {
  /* ログインフォームボックス（左右マージン変更） */
  div#box_login_form {
    margin: 20px 10px 19px;
  }

  /* 会員登録ボックス */
  div#box_membership_registration {
    margin: 0 10px 73px;
  }
}
/*-----------------------------------------------------------
	画面サイズが768px以下
		1.ログインフォームテーブル見出しセル（見出し表示変更）
		2.ログインフォームテーブルデータ入力セル（横幅変更）
		3.ログインフォームテーブル備考セル（非表示）
		4.会員登録ボックス下部テーブル（表示形式変更）
		5.会員登録ボタン
			・表示形式変更
			・横幅変更
			・パディング削除
		6.「うたスキとは？」のリンク
			・表示形式変更
			・横幅変更
-----------------------------------------------------------*/
@media screen and (max-width: 768px) {
  /*----*/
  /* 1. */
  /*----*/
  /* ログインフォームテーブル見出しセル */
  div#login_info_input_form table tr th p {
    display: block;
  }

  div#login_info_input_form table tr td.note {
    display: none;
  }

  /*----*/
  /* 2. */
  /*----*/
  /* ログインフォームテーブルデータ入力セル */
  div#login_info_input_form table tr td#input {
    width: 60%;
  }

  /*----*/
  /* 3. */
  /*----*/
  /* ログインフォームテーブル備考セル */
  div#login_info_input_form table tr td#note {
    display: none;
  }

  /*----*/
  /* 4. */
  /*----*/
  /* 会員登録ボックス下部テーブル */
  div#box_membership_registration_bottom div#table {
    display: block;
  }

  /*----*/
  /* 5. */
  /*----*/
  /* 会員登録ボタン */
  div#membership_registration_btn {
    display: block;
    width: 100%;
    padding: 0;
  }

  /*----*/
  /* 6. */
  /*----*/
  /* 「うたスキとは？」のリンク */
  div#link {
    display: block;
    width: 100%;
  }
}