@charset "utf-8";

body.login {background-color: var(--main-color);}
body.login .wrap {display: flex; justify-content: center; align-items: center; width: 100%; height: 100dvh; padding: 50px; flex-wrap: wrap; flex-direction: column; gap: 5em;}


/* logo_wrap */
.logo_wrap {display: flex; flex-direction: column;}
.logo_wrap h1 {display: block; text-align: center; font-weight: normal;}
.logo_wrap h1 img {height: 5em;}
.logo_wrap p {display: flex; justify-content: center; gap: 0.5em; padding-top: 1em;}
.logo_wrap b {display: inline-block;}

/* login_wrap */
.login_wrap {display: flex; flex-direction: column; flex-wrap: wrap; gap: 1.5em; width: 100%;  max-width: 370px;}
.login_wrap > * {width: 100%;}
.login_wrap > input {background-color: #fff; padding: 0.5em; text-align: center; line-height: 1.9; color: initial; border: 3px solid #fff; border-radius: 5em;;}
.login_wrap > .btn_rd.btn_login {border: 3px solid #fff; padding: 0.5em; line-height: 1.9; text-align: center; font-weight: 500; border-radius: 5em;}
.login_wrap > .btn_rd.btn_login:hover {background-color: #fff; color: var(--main-color);}
.login_wrap > .notice {width: 100%; text-align: center;}
.login_wrap > .notice > img {width: 22px; margin: 0 auto 0.5em;}
.login_wrap > .notice > p {font-size: 0.875em; color:#fff;}
.login_wrap > .notice > p.flex {vertical-align: middle; justify-content: center; padding-top: 0.25em; gap: 0.25em;}

p.copy {font-size: 0.875em;}

@media screen and (max-width: 768px){
    body.login .wrap {padding: 5vw;}
}