@charset "utf-8";

.body-container {
  height:100%;
}


.sso-wrap {
  background:#f1f6fb; width:100%; height:100%;
  .logo-wrap {
    margin-bottom:20px; width:1050px; margin:0 auto; padding:50px 20px 20px 0;
    img {
      width:315px; height:42px; 
    }
  }
  .sso-box {
    width:1050px; margin:0 auto; background:#fff;
    .sso {
      border:1px solid var(--line-color); 
      .left-box {
        float:left; width: calc(100% - 382px); height:100%; padding:40px;
        .join-notice {
          padding-top: 15px; text-align: center; font-size: 1.5rem; line-height: 1.6; letter-spacing: -0.2px; color: #333333;
          .point {
            font-weight: 600; color: #4e8cd7;
          }
          .point-icon {
            position: relative; top: 4px;
          }
        }
      }
      .right-box {
        float:left; width:382px; height:100%;
        img {
          width:100%; height:auto; max-width:100%; max-height:100%   
        }
      }
    }    
  }
  &.step {
    .logo-wrap {text-align: center; margin:0 auto;}
  }
}

@media(max-width:1050px) {
  .sso-wrap {
    .logo-wrap {
      width:100%
    }
    .sso-box {
      width:100%; padding:0 20px; background: none;
      .sso { background: #fff; }
    }
  }
}

@media(max-width:1024px) {
  .sso-wrap {
    .logo-wrap {
      padding:30px 20px 20px 0; text-align: center;
      img {
        width:250px; height:auto;
      }
    }
    .sso-box {      
      .sso {
        height: auto;
        .right-box {
          display:none;
        }
        .left-box {
          width:100%; float:none;
          .join-notice {
            font-size: 1.4rem;
          }
        }
      }
    }
  }
}

@media(max-width:768px) {
  .sso-wrap {
    .logo-wrap {
      padding:30px 15px 15px 0;
    }
    .sso-box {
      padding:0 15px;
      .sso {
        .left-box {
          padding:30px;
        }
      }
    }
  }
}

@media(max-width:500px) {
  .sso-wrap {
    .sso-box {
      .sso {
        .left-box {
          padding:20px;
          .join-notice {
            font-size: 1.3rem;
          }
        }
      }      
    }
  }
}
  

.login {
  .btn-wrap {
    button {
      img {
        width:20px; height:18px; vertical-align: middle; margin-right:5px;
      }
    }
  }
}

.sns-login {
  margin-top:40px; 
  &.mg-b20 {
    margin-top: 20px;
  }
  p {text-align: center; position:relative; font-size:1.3rem; color:#adadad; font-weight:500;
    &:after {
      content:''; position:absolute; top:50%; transform: translateY(-50%); width:100%; height:1px; border-bottom:1px dashed #aaa; left:0;
    }
    span {
      background:#fff; display:inline-block; padding: 0 10px; position:relative; z-index:1
    }
  }
  ul {
    margin-top:30px;
    li {
      margin-bottom:10px;
      &:last-child {
        margin-bottom:0;
      }
      .btn-wrap {
        button {
          font-size:1.2rem; height:40px; line-height:38px;
          img {
            width:20px; height:20px; vertical-align: middle; margin-right:3px; position:relative; top:-1px;
          }
        }
      }
    }
  }
}

@media(max-width:500px) {
  .sns-login {
    &.mg-b20 {
      margin-top: 15px;
    }
  }
}

.imp { background: #ff5b5e; margin-left: 5px; width: 4px; height: 4px; display: inline-block; border-radius: 10px; position: relative; top: -7px; }