.logoarea {
   width: 100%;
   overflow: auto;
   text-align: center;
}

.titlearea {
   width: 100%;
   overflow: auto;
   text-align: center;
}

.menutitle {
   display: inline-block;
   position: relative;
   width: 366px;
   margin: 10px;
   padding: 6px;
   color: #fff;
   border-radius: 10px;
   background-image: -webkit-linear-gradient(315deg, #185aa5, #185ca7, #1861ad, #1769b6, #1672c0, #147dcc, #1189d9, #0d94e4, #089eef, #04a6f7, #01acfd, #00aeff);
   background-image: linear-gradient(-225deg, #185aa5, #185ca7, #1861ad, #1769b6, #1672c0, #147dcc, #1189d9, #0d94e4, #089eef, #04a6f7, #01acfd, #00aeff);
}

.menutitle span {
   display: block;
   padding: 0.5rem 2rem;
   background: rgba(255, 255, 255, .01);
}

form {
   display: flex;
   justify-content: center;
}

.loginarea {
   position: relative;
   width: 350px;
   padding: 6px;
   border-radius: 4px;
   background-image: -webkit-linear-gradient(315deg, #185aa5, #185ca7, #1861ad, #1769b6, #1672c0, #147dcc, #1189d9, #0d94e4, #089eef, #04a6f7, #01acfd, #00aeff);
   background-image: linear-gradient(-225deg, #185aa5, #185ca7, #1861ad, #1769b6, #1672c0, #147dcc, #1189d9, #0d94e4, #089eef, #04a6f7, #01acfd, #00aeff);
}

.loginarea tbody {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   width: 350px;
   padding: 1rem 2rem;
   background: #fff;
}

.loginarea tbody tr {
   width: 100%;
}

.loginarea tbody tr td {
   width: 100%;
   display: flex;
   justify-content: center;
}

.title {
   font-weight: bold;
   color: #185aa5;
}

input[type="text"], input[type="password"] {
   width: 70%;
   height: 35px;
   border: none;
   border-radius: 20px;
   padding-left: 15px;
   margin: 10px;
   background: lightgray;
}

.btnrow {
   margin-top: 10px;
}

.loginbtn {
   width: 180px;
   text-align: center;
   background-color: #0082d5;
   color: #fff;
   text-decoration: none;
   font-size: 0.8em;
   font-weight: bold;
   margin: 4px;
   padding: 0.5rem;
   border: none;
   border-radius: 4px;
}

.loginbtn:hover {
   transition: background-color .3s;
   background-color: #fff;
   color: royalblue;
   box-shadow:0px 0px 4px 2px royalblue;
   cursor: pointer;
}

.loginbtn:active {
   outline: none;
}

.loginbtn:focus {
   outline: none;
}

.toppagebtn {
   width: 280px;
   text-align: center;
   background-color: #0082d5;
   color: #fff;
   text-decoration: none;
   font-size: 0.8em;
   font-weight: bold;
   margin: 4px;
   padding: 0.5rem;
   border: none;
   border-radius: 4px;
}

.toppagebtn:hover {
   transition: background-color .3s;
   background-color: #fff;
   color: royalblue;
   box-shadow:0px 0px 4px 2px royalblue;
   cursor: pointer;
}

.toppagebtn:active {
   outline: none;
}

.toppagebtn:focus {
   outline: none;
}

.loginerrmsg {
   color: red;
   font-size: 0.8rem;
}

@media screen and (max-width: 480px) {
   /* 480px以下に適用されるCSS（スマホ用） */
   .menutitle {
      width: calc(100% - 10px);
      margin: 10px 5px;
   }

   .loginarea {
      width: calc(100% - 10px);
      margin: 0 5px;
   }

   .loginarea tbody {
      width: 100%;
   }

   .loginbtn:hover {
      transition: none;
   }
}