@charset "UTF-8";
* {
  box-sizing: border-box; }

html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 62.5%; }

body {
  display: table;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 10px;
  font-size: 1.0rem;
  font-family: 'メイリオ', Meiryo, Hiragino Kaku Gothic ProN, 'ヒラギノ角ゴ ProN W3', sans-serif; }

a {
  color: #06F;
  text-decoration: underline; }

form {
  margin: 0; }

#leftArea {
  display: table-cell;
  position: relative;
  width: 45%;
  height: 100%;
  background: #E0E2E6;
  background: -webkit-radial-gradient(farthest-side circle at center top, #ffffff 0%, #bfc5cd 100%);
  background: radial-gradient(farthest-side circle at center top, #ffffff 0%, #bfc5cd 100%);
  vertical-align: top; }

.loginArea {
  width: 370px;
  margin: 50px auto 0; }
  .loginArea img {
    display: block;
    margin: 0 auto; }
  .loginArea p {
    margin: 0 0 10px;
    font-size: 13px;
    font-size: 1.3rem; }

.container {
  margin: 30px 0;
  padding: 25px;
  border-radius: 5px;
  background: #FFF;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  font-size: 1.3em; }

.loginUserID {
  display: block;
  margin-bottom: 3px;
  padding: 0 0 0 22px;
  background: url("../image/icon_user.png") no-repeat 5px 2px; }

.loginPassword {
  display: block;
  margin-bottom: 3px;
  padding: 0 0 0 22px;
  background: url("../image/icon_lock.png") no-repeat 5px 2px; }

input[name="USER_ID"],
input[name="PASSWORD"] {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  padding: 5px;
  border: 1px solid #B0BBC9;
  border-radius: 3px;
  background: #E5EBF2;
  background: -webkit-linear-gradient(top, #E5EBF2, #F9F9F9);
  background: linear-gradient(to bottom, #E5EBF2, #F9F9F9);
  box-shadow: 0 3px 3px #D9DFE8 inset; }

input[type="radio"] {
  display: none; }

.radioLabel {
  position: relative;
  display: inline-block;
  margin: 0 15px 0 0;
  padding: 0 12px 0 26px;
  vertical-align: middle;
  cursor: pointer; }
  .radioLabel:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    display: block;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background-color: #53b300;
    opacity: 0;
    filter: alpha(opacity=0); }
  .radioLabel:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }

input[type=radio]:checked + .radioLabel:before {
  opacity: 1;
  filter: alpha(opacity=100); }

input[type="submit"] {
  display: block;
  width: 100%;
  margin-top: 15px;
  padding: 8px;
  border: none;
  border-radius: 3px;
  background: #009966;
  background: -webkit-linear-gradient(top, #09C888, #009966);
  background: linear-gradient(to bottom, #09C888, #009966);
  box-shadow: 0 2px 0 #026B48;
  color: #FFF; }

.copyright {
  padding-top: 15px;
  font-size: 13px;
  font-size: 1.3rem;
  text-align: center; }

.topic {
  position: absolute;
  top: 0;
  right: 0; }

#rightArea {
  display: table-cell;
  width: 55%;
  height: 100%;
  padding: 10px 15px;
  background: #4e6673;
  background: -webkit-linear-gradient(45deg, #354555 0%, #4e6673 50%, #315d6c 100%);
  background: linear-gradient(45deg, #354555 0%, #4e6673 50%, #315d6c 100%);
  color: #FFF;
  font-size: 13px;
  font-size: 1.3rem;
  text-align: right;
  vertical-align: top; }

#newsArea {
  position: absolute;
  top: 60px;
  bottom: 30px;
  padding: 0 15px;
  text-align: left;
  overflow-y: auto; }
  #newsArea.noScroll {
    position: static; }
  #newsArea p {
    margin: 0;
    font-size: 13px;
    font-size: 1.3rem; }
  #newsArea a {
    color: #FFCC00; }
  #newsArea b {
    font-weight: bold; }