@charset "UTF-8";
/*! インデックス */
.cl { display: inline-block; min-height: 1%; display: block; *zoom: 1; }
.cl:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; }
* html .cl { height: 1%; }

/*----------------------------------
content
----------------------------------*/
.login-wrap { position: fixed; display: table; width: 100%; height: 100%; text-align: center; }
#wrapper.index-wrap { height: -moz-calc(100% - 41px); height: -webkit-calc(100% - 41px); height: calc(100% - 41px); box-sizing: border-box; }

.login-wrap .login-inr { display: table-cell; vertical-align: middle; padding-bottom: 41px; }
.login-wrap .login-inr h1 { opacity: 0; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
.login-wrap .login-inr > div { display: inline-block; padding: 32px; height: 422px; box-sizing: border-box; }
.login-wrap .login-inr > div form .login-input { opacity: 0; }
.login-wrap .login-inr > div form .sign-btn { opacity: 0; }
.login-wrap .login-inr > div form .btn01 { opacity: 0; }

.login-wrap.load .login-inr h1 { opacity: 1; transition: all 2s; -ms-transition: all 2s; }

.login-wrap.display .login-inr h1 { top: 0; left: 0; transition: all 1s; -ms-transition: all 1s; transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); }

.login-wrap.display3 .login-inr > div form .login-input { opacity: 1; transition: all .5s; -ms-transition: all .5s; }

.login-wrap.display4 .login-inr > div form .sign-btn, .login-wrap.display4 .login-inr > div form .btn01 { opacity: 1; transition: all 1s; -ms-transition: all 1s; }

.login-wrap .login-inr .error-msg { text-align: center; }
.login-wrap .login-inr .error-msg span { display: inline-block; padding: 10px; background: #fed2d1; color: #ff0000; border: 2px solid #c51015; }

.login-input { margin-top: 48px; }
.login-input table { width: 352px; margin: 0 auto; table-layout: fixed; }
.login-input table th, .login-input table td { box-sizing: border-box; }
.login-input table th { width: 80px; text-align: right; }
.login-input table td { position: relative; padding: 22px 8px; }
.login-input table td span { position: relative; display: block; }
.login-input table td span:before { content: " "; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: #007dc5; transition: 0.4s; }
.login-input table td .in-for:before { width: 100%; height: 1px; background: #08ae9e; }
.login-input table td input { width: 100%; border-width: 0 0 1px 0; border-style: solid; border-color: #d6d6d6; padding: 4px 8px; box-sizing: border-box; }
.login-input table td p { position: absolute; right: 8px; top: -14px; background: #c51015; color: #fff; font-size: 85.71429%; }
.login-input table td p strong { padding: 4px 6px; position: relative; display: block; }
.login-input table td p strong:before { content: " "; border: 6px; border-color: #c51015 transparent transparent transparent; border-style: solid; position: absolute; top: 100%; left: 10px; }
.login-input table .err-f input { background: #fed2d1; }

.sign-btn { margin-top: 48px; }

.btn01 { margin-top: 16px; }