header div {
  display: flex;
  align-items: flex-end;
  padding: 8px 4px 4px 4px;
}
header div p:first-child {
  flex: 1;
  flex-basis: 463px;
  width: 463px;
}
header div p:first-child img {
  max-width: 463px;
}
header div p.help {
  flex-basis: 60px;
  min-width: 60px;
  text-align: right;
  padding-right: 12px;
}
header div p.help a {
  color: inherit;
  font-size: 12px;
  text-decoration: none;
}

.top-img {
  position: relative;
  text-align: center;
}
.top-img .toplogo {
  max-width: 380px;
}
.top-img .baselogo {
  position: absolute;
  display: block;
  max-width: 160px;
  max-height: 300px;
  z-index: -1;
}
.top-img .base01 {
  bottom: 40px;
  right: 60px;
  transform: rotate(-45deg);
}
.top-img .base02 {
  top: -50px;
  left: 60px;
  transform: rotate(135deg);
}

.top-img-mini {
  display: none;
}
.top-img-mini img {
  width: 100%;
  margin-top: 24px;
}

.img-license {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: right;
  padding: 0 8px;
}
.img-license a {
  font-size: 13px;
  color: #bcbcbc;
}

#bg-imgs {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -99;
}
#bg-imgs img {
  position: absolute;
}
#bg-imgs .center-box {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.flogo {
  display: none;
  opacity: 0;
}

.left01 {
  width: 120px;
  height: 160px;
  top: -280px;
  left: -380px;
}

.left02 {
  width: 120px;
  height: 250px;
  top: -40px;
  left: -420px;
}

.left03 {
  width: 140px;
  height: 290px;
  top: -340px;
  left: -570px;
  transform: rotate(-30deg);
}

.left04 {
  width: 120px;
  height: 250px;
  top: 100px;
  left: -570px;
}

.left05 {
  width: 110px;
  height: 210px;
  top: -210px;
  left: -700px;
  transform: rotate(-60deg);
}

.left06 {
  width: 120px;
  height: 250px;
  top: 0px;
  left: -720px;
  transform: rotate(20deg);
}

.right01 {
  width: 160px;
  height: 160px;
  top: -340px;
  left: 280px;
}

.right02 {
  width: 140px;
  height: 140px;
  top: -170px;
  left: 300px;
}

.right03 {
  width: 200px;
  height: 300px;
  top: 80px;
  left: 240px;
  transform: rotate(20deg);
}

.right04 {
  width: 140px;
  height: 160px;
  top: 200px;
  left: 420px;
  transform: rotate(-60deg);
}

.right05 {
  width: 160px;
  height: 300px;
  top: -20px;
  left: 500px;
  transform: rotate(-20deg);
}

.right06 {
  width: 200px;
  height: 300px;
  top: -350px;
  left: 500px;
  transform: rotate(30deg);
}

div.info-area {
  overflow-y: auto;
  height: 256px;
  margin-top: 16px;
}

ul.information-list {
  overflow: hidden;
  padding: 8px 0;
}
ul.information-list li {
  display: flex;
  align-items: start;
  margin: 0;
  padding: 12px 8px;
}
ul.information-list li p {
  font-size: 15px;
}
ul.information-list li p:first-child {
  flex-basis: 128px;
  font-size: 14px;
}
ul.information-list li p:last-child {
  flex: 1;
  color: #5367a3;
}
ul.information-list li p:last-child a {
  color: inherit;
}
ul.information-list li.past-list {
  display: block;
  text-align: center;
}
ul.information-list li.past-list a {
  color: #bcbcbc;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media screen and (max-width: 520px) {
  article#login {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 16px 0;
  }
  div.info-area {
    overflow-y: initial;
    margin-top: 16px;
  }
  .top-img {
    display: none;
  }
  .top-img-mini {
    display: block;
  }
}
@media screen and (min-width: 521px) {
  article#login {
    height: 500px;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 50%;
    min-width: 488px;
    max-width: 488px;
    padding: 0;
  }
  article#login ul.fm {
    display: flex;
  }
  article#login ul.fm li:first-child {
    flex: 1;
  }
  article#login ul.fm li:first-child input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  article#login ul.fm li:last-child {
    flex-basis: 80px;
  }
  article#login ul.fm li:last-child input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
@media screen and (min-width: 800px) {
  .first {
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    display: block;
  }
}
@media screen and (min-width: 1050px) {
  .second {
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
    -webkit-animation-duration: 6s;
            animation-duration: 6s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    display: block;
  }
}
@media screen and (min-width: 1300px) {
  .third {
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
    -webkit-animation-duration: 9s;
            animation-duration: 9s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    display: block;
  }
}