body { font-size: 18px; }
#Login, #Login * {box-sizing: border-box;}
#Login{ background-color: #efefef; padding: 5px; border-radius: 3px;}
#Login > div{ min-height: 350px; }
#Login h2 { text-align: center; margin: 0; color: #222d41;}
#Login form{ text-align: center; height: 100%;}
#Login ul{ list-style: none; padding: 0; margin: 0;}
#Login ul li { padding: 0 2px; }
#Login ul li input {
	border: 1px solid #ddd;
	padding: 5px;
	border-radius: 3px;
	font-family: auto;
	padding: 10px;
	width: 100%;
}
#Login .l { text-align: left; } 
#Login .c { text-align: center; } 
#Login .r { text-align: right; } 
#Login .t { color: #91aaaa; padding-top: 10px;}
#Login .lh_x3 { line-height: 300%;} 
#Login .mt10per { margin-top: 10%; }
#Login .note { color: green; } 
#Login .btn { padding: 20px 0 0;}
#Login .err { font-weight: bold; color: #dc3545; }
#Login li.err{ font-size: 75%;}
#Login button {
	background-color: #222d41;
	border: 2px solid #222d41;
	border-radius: 8px;
	color:white;
	cursor: pointer;
	font-weight: bold;
	padding: 5px 10px;
}
#Login button:hover { background-color: white; color: #222d41; }
#Login button:disabled{ opacity: 0.2; pointer-events: none;}
#Login a { color: #91aaaa; }
#Login a:hover { color: #222d41; }
#Login a.sub_link { font-size: 75%; }
#Sending { display: none; text-align: center; padding-top: 20px;}
.ouro {
    position: relative;
    display:inline-block;
    height: 46px;
    width: 46px;
    margin: 1em;
    border-radius: 50%;  
    background: none repeat scroll 0 0 #FFFFFF; /* ベースの色 - 可変 */
    overflow:hidden;
}
.ouro:after {
    content: "";
    position: absolute;
    top: 9px; left: 9px;
    display: block;
    height: 28px; width: 28px;
    background: none repeat scroll 0 0 #F2F2F2;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.ouro > span {
    position: absolute;
    height: 100%; width: 50%;
    overflow: hidden;
}
.left  { left:0   }
.right { left:50% }
.anim {
    position: absolute;
    left: 100%; top: 0;
    height: 100%; width: 100%;
    border-radius: 999px;
    background: none repeat scroll 0 0 #91aaaa; /* Ouroborosの色 - 可変 */
    opacity: 0.8;
    -webkit-animation: ui-spinner-rotate-left 3s infinite;
    animation: ui-spinner-rotate-left 3s infinite;
    -webkit-transform-origin: 0 50% 0;
    transform-origin: 0 50% 0;
}
.left .anim {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.right .anim {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    left: -100%;
    -webkit-transform-origin: 100% 50% 0;
    transform-origin: 100% 50% 0;
}
/* v2 */
.ouro2 .anim {
   -webkit-animation-delay:0;
   animation-delay:0;
}
.ouro2 .right .anim{
   -webkit-animation-delay: 1.5s;
   animation-delay: 1.5s;
}
/* v3 */
.ouro3 .anim {
   -webkit-animation-delay: 0s;
   -webkit-animation-duration:3s;
   -webkit-animation-timing-function: linear;
   animation-delay: 0s;
   animation-duration:3s;
   animation-timing-function: linear;
}
.ouro3 .right .anim{
   -webkit-animation-name: ui-spinner-rotate-right;
   -webkit-animation-delay:0;
   -webkit-animation-delay: 1.5s;
   animation-name: ui-spinner-rotate-right;
   animation-delay:0;
   animation-delay: 1.5s;
}
/* round variation */
.round .ouro:after {display:none }
/* double variation */
.double .ouro:after {
  height: 13px; width: 13px;
  left: 7px; top: 7px;
  border: 10px solid #ddd;
  background: transparent;
  box-shadow: none;
}
@keyframes ui-spinner-rotate-right{
  0%{transform:rotate(0deg)}
  25%{transform:rotate(180deg)}
  50%{transform:rotate(180deg)}
  75%{transform:rotate(360deg)}
  100%{transform:rotate(360deg)}
}
@keyframes ui-spinner-rotate-left{
  0%{transform:rotate(0deg)}
  25%{transform:rotate(0deg)}
  50%{transform:rotate(180deg)}
  75%{transform:rotate(180deg)}
  100%{transform:rotate(360deg)}
}
@-webkit-keyframes ui-spinner-rotate-right{
  0%{-webkit-transform:rotate(0deg)}
  25%{-webkit-transform:rotate(180deg)}
  50%{-webkit-transform:rotate(180deg)}
  75%{-webkit-transform:rotate(360deg)}
  100%{-webkit-transform:rotate(360deg)}
}
@-webkit-keyframes ui-spinner-rotate-left{
  0%{-webkit-transform:rotate(0deg)}
  25%{-webkit-transform:rotate(0deg)}
  50%{-webkit-transform:rotate(180deg)}
  75%{-webkit-transform:rotate(180deg)}
  100%{-webkit-transform:rotate(360deg)}
}