/*
*
* login画面　css
* 画面幅md以上
*
*/
.add_opacity{
    opacity           : 0;
}

html,.main_container,.container,.row {
    height            : 100%;
}
body {
    background        : #e6e7e7;
    height            : 100%;
    overflow          : hidden;
}
#bglogo{
    position          : absolute;
    height            : auto;
    width             : 335px;
    top               : 50%;
    left              : 50%;
    transform         : translateY(-50%) translateX(-50%);
    z-index           : 999;
}


#login_content{
    position          : absolute;
    width             : 60%;
    top               : 50%;
    left              : 120px;
    transform: translate(0,-50%);
    z-index           : 3;
}
.login_content_animation{
    -webkit-animation : fadein 2s ease-in-out forwards;
    animation         : fadein 2s ease-in-out forwards;
}
.bg-shadow{
    box-shadow: 1px 1px 3px #CCC;
    border: solid 1px #CCC;
}
@keyframes fadein {
    0% {
        opacity       : 0;
    }
    100% {
        opacity       : 1;
    }
}
@-webkit-keyframes fadein {
    0% {
        opacity       : 0;
    }
    100% {
        opacity       : 1;
    }
}
.login_bg_border{
    position          : relative;
    overflow          : hidden;
    height            : 100%;
}
.login_bg1{
    position          : relative;
    height            : 100%;
    z-index           : 2;
}
.login_bg2{
    position          : relative;
    height            : 100%;
    z-index           : 1;
}
.login_bg1:before{
    content           : '';
    position          : absolute;
    transform         : rotate(19deg);
    background-color  : #385a7a;
    width             : 1216px;
    height            : 364px;
    z-index           : 2;
}
.login_bg1{
    animation         : borderAnimeBefore 1.5s ease 0s forwards;
    -webkit-animation : borderAnimeBefore 1.5s ease 0s forwards;
}
@keyframes borderAnimeBefore {
    0% {
        left          : 30px;
        top           : 1800px;
        opacity       : 0;
    }
    100% {
        left          : 39px;
        top           : 64%;
        opacity       : 1;
    }
}
@-webkit-keyframes borderAnimeBefore {
    0% {
        left          : 30px;
        top           : 1800px;
        opacity       : 0;
    }
    100% {
        left          : 39px;
        top           : 64%;
        opacity       : 1;
    }
}
.login_bg2:before{
    content           : '';
    position          : absolute;
    transform         : rotate(19deg);
    background-color  : #c5c5c5;
    width             : 1216px;
    height            : 364px;
}
.login_bg2{
    animation         : borderAnimeAfter 1.5s ease 0s forwards;
    -webkit-animation : borderAnimeAfter 1.5s ease 0s forwards;
}
@keyframes borderAnimeAfter {
    0% {
        left          : 1000px;
        top           : -338px;
        opacity       : 0;
    }
    100% {
        left          : 29px;
        top           : -35.5%;
        opacity       : 1;
    }
}
@-webkit-keyframes borderAnimeAfter {
    0% {
        left          : 1000px;
        top           : -338px;
        opacity       : 0;
    }
    100% {
        left          : 29px;
        top           : -35.5%;
        opacity       : 1;
    }
}
.title_area {
    z-index           : 2;
    top               : 303px;
    left              : 7%;
    font-size         : 6em;
}
.system_title {
    overflow          : hidden;
    z-index           : 999;
    font-size         : 4em;
}
.system_title_animation {
    animation         : fadein 2s ease-in-out forwards;
    -webkit-animation : fadein 2s ease-in-out forwards;
}
.login_title{
    position          : relative;
    left              : 148px;
    top               : 0;
}

.form-control {
    display           : block;
    width             : 100%;
    height            : calc(2.25rem + 2px);
    padding           : .375rem .75rem;
    font-size         : 1rem;
    line-height       : 1.5;
    color             : #495057;
    border-radius     : 0;
    border            : none;
}
@media (max-width: 991px){
    .form-control {
        border        : 1px solid #ced4da;;
    }
  }
.form-control:focus {
    box-shadow        : none!important;
}
.form-control:focus {
    color             : #495057;
    box-shadow        : 0 0 0 0.2rem rgba(0,123,255,.25);
}

#message{
    position          : absolute;
    top               : 17%;
    left              : 62%;
    font-size         : 3em;
    color             : #385a7a;
}

/* === 正方形部分  =========================== */
.square_area{
    position                  : relative;
    transform                 : rotate(-71deg) scale(1.2);
    left                      : 98px;
    top                       : -63px;

}
.square1 li,
.square2 li,
.square3 li{
    position                  : relative;
    overflow                  : hidden;
    width                     : 155px;
    left                      : 600px;
}
.square1 > li:nth-child(1):before,
.square1 > li:nth-child(3):before,
.square2 > li:nth-child(2):before,
.square3 > li:nth-child(1):before,
.square3 > li:nth-child(3):before{
    background-color          : #385a7a;
}
.square1 li:before,
.square2 li:before,
.square3 li:before {
    content                   : '';
    position                  : absolute;
    border-radius             : 0;
    background-color          : #1e3b54;
    width                     : 150px;
    height                    : 150px;
}
.li_Animation{
    animation                 : liAnimation 1s ease-in-out 1 forwards;
    -webkit-animation         : liAnimation 1s ease-in-out 1 forwards;
}
.square1 > li:nth-child(1){
    animation-delay           : 0;
}
.square2 > li:nth-child(1){
    animation-delay           : 0.1s;
}
.square3 > li:nth-child(1){
    animation-delay           : 0.2s;
}
.square1 > li:nth-child(2){
    animation-delay           : 0.3s;
}
.square2 > li:nth-child(2){
    animation-delay           : 0.4s;
}
.square3 > li:nth-child(2){
    animation-delay           : 0.5s;
}
.square1 > li:nth-child(3){
    animation-delay           : 0.6s;
}
.square2 > li:nth-child(3){
    animation-delay           : 0.7s;
}
.square3 > li:nth-child(3){
    animation-delay           : 0.8s;
}
@keyframes liAnimation {
    0% {
        left                  : 600px;
    }
    100% {
        left                  : 0px;
    }
}
@-webkit-keyframes liAnimation {
    0% {
        left                  : 600px;
    }
    100% {
        left                  : 0px;
    }
}
.square1 li div,
.square2 li div,
.square3 li div {
    width                     : 170px;
    height                    : 170px;
    margin                    : 5px 10px 5px 0;
    padding                   : 9px 12px;
}

.square1{
    height                    : 155px;
    list-style-type           : none;
    overflow                  : hidden;
    display                   : -webkit-flex;
    display                   : flex;
    -webkit-flex-wrap         : wrap;
    flex-wrap                 : wrap;
    padding-inline-start      : 0;
    margin-bottom             : 0px;
}
.square2{
    height                    : 155px;
    list-style-type           : none;
    overflow                  : hidden;
    display                   : -webkit-flex;
    display                   : flex;
    -webkit-flex-wrap         : wrap;
    flex-wrap                 : wrap;
    padding-inline-start      : 0;
    margin-bottom             : 0px;
}
.square3{
    height                    : 155px;
    list-style-type           : none;
    overflow                  : hidden;
    display                   : -webkit-flex;
    display                   : flex;
    -webkit-flex-wrap         : wrap;
    flex-wrap                 : wrap;
    padding-inline-start      : 0;
    margin-bottom             : 0px;
}

@media (max-width:1280px) {
    .square_area{
        position              : relative;
        transform             : rotate(-71deg) scale(1.2);
        left                  : 102px;
        top                   : -60px;

    }
    .square1,
    .square2,
    .square3 {
        height                : 150px;
    }
    .square1 li, .square2 li, .square3 li {
        width                 : 150px;
    }
    .square1 li:before, .square2 li:before, .square3 li:before {
        content               : '';
        position              : absolute;
        width                 : 145px;
        height                : 145px;
    }
 }
/* === /正方形部分  =========================== */



/*
*
* login画面　css
* 画面幅md以下
*
*/
#sp {
    overflow-x: hidden;
}
.md-body{
    position          :relative;
    height            :100%;
}
.md-login_wrap {
    position: relative;
    background-color: #FFF;
    border-radius: 10px;
}
.md-login_wrap:before {
    content: '';
    position: absolute;
    background-color: #385a7a;
    border-radius: 6px;
    width: 97%;
    height: 3rem;
    top: -4px;
    left: 5px;
    z-index: -1;
}
.md-login_title {
    position: relative;
    font-size: 1.3rem;
}
.md-login_title:before {
    content: "";
    position: absolute;
    background-color: #FFF;
    height: 100%;
    width: 90%;
    top: 0;
    left: 5%;
}
.md-message {
    font-size         : 1rem;
    color             : #385a7a;
}
.md-login_footer {
    background-color: transparent;
    position: absolute;
    right: 0;
}

/* === 正方形部分  =========================== */
#square{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    z-index: 4;
}
.circle{
    position: relative;
    width: 60px;
    height: 60px;
    border: 3px solid;
    border-color: transparent;
    border-radius: 50%;
}
.md-square_content {
    position          : absolute;
    width             : 100%;
    top               : 50%;
    left              : 50%;
    transform         : translateY(-50%) translateX(-50%);
    -webkit-transform : translateY(-50%) translateX(-50%);
}

.md-square1{
    padding-inline-start      : 0;
    padding-left              : 0;
    list-style-type           : none;
    overflow                  : hidden;
    display                   : -webkit-flex;
    display                   : flex;
    -webkit-justify-content   : center;
    justify-content           : center;
    -webkit-flex-wrap         : wrap;
    flex-wrap                 : wrap;
    margin-bottom             : 0px;
}
.md-square2{
    padding-inline-start      : 0;
    padding-left              : 0;
    list-style-type           : none;
    overflow                  : hidden;
    display                   : -webkit-flex;
    display                   : flex;
    -webkit-justify-content   : center;
    justify-content           : center;
    -webkit-flex-wrap         : wrap;
    flex-wrap                 : wrap;
    margin-bottom             : 0px;
}
.md-square3{
    padding-inline-start      : 0;
    padding-left              : 0;
    list-style-type           : none;
    overflow                  : hidden;
    display                   : -webkit-flex;
    display                   : flex;
    -webkit-justify-content   : center;
    justify-content           : center;
    -webkit-flex-wrap         : wrap;
    flex-wrap                 : wrap;
    margin-bottom             : 0px;
}

.md-square1 li,
.md-square2 li,
.md-square3 li{
    position                  : relative;
    right                     : -500px;
}

.md-square1 > li div,
.md-square2 > li div,
.md-square3 > li div {
    width                     : 10px;
    height                    : 10px;
    margin                    : 1px 1px 1px 1px;
    background-color          : #1e3b54;
}
.md-square1 > li:nth-child(1) div,
.md-square1 > li:nth-child(3) div,
.md-square2 > li:nth-child(2) div,
.md-square3 > li:nth-child(1) div,
.md-square3 > li:nth-child(3) div{
    background-color          : #385a7a;
}

a.password-reset {
    color: #FFF;
}
a.password-reset:hover {
    text-decoration: underline;
}
@media (max-width: 991px){
    a.password-reset {
        color: #3e3d42;
    }
    a.password-reset:hover {
        text-decoration: none;
    }
}