@charset "utf-8";

/* ====================================================================================
    basic setting
======================================================================================*/


/* Reset */

#m1-login * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 none;
  font-size: 16px;
}


/* hidden */

#m1-login {
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}


/* show */

#m1-login.is-show {
  opacity: 1;
  visibility: visible;
}


/* cover layer */

#m1-login .mod__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.7);
}


/* container */

#m1-login .mod__container {
  position: relative;
  width: 280px;
  margin: 15px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background-color: #eee;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3);
}


/* title */

#m1-login .mod__title {
  margin-top: 15px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

#m1-login .mod__title::before {
  content: "ログイン";
}


/* fieldset */

#m1-login .mod__fieldset {
  padding: 5px;
  text-align: center;
}


/* input id and password */

#m1-login .mod__inputArea {
  margin-top: 15px;
}

#m1-login .mod__inputText, #m1-login .mod__inputPassword {
  width: 100%;
  height: 60px;
  padding: 5px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  line-height: 40px;
  outline: 0 none;
}

#m1-login .mod__inputText:focus, #m1-login .mod__inputPassword:focus {
  border-color: #999;
}


/* error message */

#m1-login .mod__errorMessage {
  margin-top: 15px;
  color: #c00;
  font-size: 14px;
  font-weight: bold;
  line-height: 2;
  text-align: center;
}


/* submit button */

#m1-login button {
  width: 112px;
  border: 0 none;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 3.5;
  transition: background-color .5s;
  cursor: pointer;
}

#m1-login button:focus {
  outline: none !important;
}

#m1-login .mod__submitArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 15px;
}

#m1-login .mod__submitBtn {
  background-color: #c00;
}

#m1-login .mod__submitBtn::before {
  content: "ログイン";
}

#m1-login .mod__submitBtn:hover {
  background-color: #f00;
}


/* cancel button*/

#m1-login .mod__cancelBtn {
  background-color: #999;
}

#m1-login .mod__cancelBtn::before {
  content: "キャンセル";
}

#m1-login .mod__cancelBtn:hover {
  background-color: #333;
}


/* close button*/

#m1-login .mod__closeArea {
  position: absolute;
  top: -20px;
  right: -20px;
}

#m1-login .mod__closeBtn {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 6px solid #eee;
  background-color: #999;
  transform: rotate(45deg);
  transition: background-color .5s;
}

#m1-login .mod__closeBtn::before, #m1-login .mod__closeBtn::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  height: 4px;
  margin: auto;
  background-color: #fff;
}

#m1-login .mod__closeBtn::before {
  transform: rotate(90deg)
}

#m1-login .mod__closeBtn:hover {
  background-color: #666;
}


/* ====================================================================================
    design setting
======================================================================================*/


/* title */

#m1-login #m1-reDesign .mod__title {}

#m1-login #m1-reDesign .mod__title::before {}


/* container */

#m1-login #m1-reDesign .mod__container {}


/* fieldset */

#m1-login #m1-reDesign .mod__fieldset {}


/* input id and password */

#m1-login #m1-reDesign .mod__inputArea {}

#m1-login #m1-reDesign .mod__inputText {}

#m1-login #m1-reDesign .mod__inputPassword {}

#m1-login #m1-reDesign .mod__inputText:focus, #m1-login #m1-reDesign .mod__inputPassword:focus {}


/* error message */

#m1-login #m1-reDesign .mod__errorMessage {}


/* button */

#m1-login #m1-reDesign button {}

#m1-login #m1-reDesign button:focus {}

#m1-login #m1-reDesign .mod__submitArea {}

#m1-login #m1-reDesign .mod__submitBtn {}

#m1-login #m1-reDesign .mod__submitBtn:hover {}

#m1-login #m1-reDesign .mod__submitBtn::before {}

#m1-login #m1-reDesign .mod__cancelBtn {}

#m1-login #m1-reDesign .mod__cancelBtn:hover {}

#m1-login #m1-reDesign .mod__cancelBtn::before {}


/* close button */

#m1-login #m1-reDesign .mod__closeArea {}

#m1-login #m1-reDesign .mod__closeBtn {}

#m1-login #m1-reDesign .mod__closetBtn::before {}

#m1-login #m1-reDesign .mod__closetBtn::after {}

#m1-login #m1-reDesign .mod__closeBtn:hover {}