/* ログイン画面 */ .auth-title { font-size: 8vw; text-align: center; font-weight: bold; color: #2E96DD; } @media screen and (min-width:1080px) { .auth-title { font-size: 32px; } } .auth-title::after { position: absolute; bottom: -35%; left: 50%; transform: translateX(-50%); width: 100%; height: 5px; content: ""; display: block; background-color: #2E96DD; } .auth-inner { max-width: 1000px; margin: 0 auto; } .auth-notice { margin-top: 7%; } @media screen and (min-width: 1080px) { .auth-notice { margin-top: 30px; } } .auth-group { width: 100%; margin: 11% auto 0; } @media screen and (min-width: 1080px) { .auth-group { margin: 30px auto 0; width: 370px; } } .auth-group.login-container { margin: 13% auto 0; } @media screen and (min-width: 1080px) { .auth-group.login-container { margin: 60px auto 0; } } .auth-link-list { text-align: center; padding: 2.5% 1.5% 2.5% 10%; border-radius: 8px; border: 1px solid #707070; } @media screen and (min-width: 1080px) { .auth-link-list { text-align: center; padding: 0% 0% 0% 4%; border-radius: 8px; } } .auth-link-list+.auth-link-list { margin-top: 4%; } @media screen and (min-width: 1080px) { .auth-link-list+.auth-link-list { margin-top: 10px; } } .auth-link-list.line { background: #fff url(/images/top/line.svg) no-repeat 5% 50%/28px 28px; } .auth-link-list.facebook { background: #fff url(/images/top/facebook.svg) no-repeat 5% 50%/28px 28px; } .auth-link-list.google { background: #fff url(/images/register/google.svg) no-repeat 5% 50%/28px 28px; } .auth-link { color: #141414; padding: 2.5% 16.5% 2.5% 11%; font-size: 4.2666666667vw; } @media screen and (min-width: 1080px) { .auth-link { display: block; font-size: 18px; } } .auth-title-medium { font-size: 5vw; font-weight: bold; margin-bottom: 7%; } @media screen and (min-width: 1080px) { .auth-title-medium { font-size: 18px; margin-bottom: 30px; } } input[type=text] { width: 100%; font-size: 4.2666666667vw; padding: 4.2% 0% 4.2% 15%; border: solid 1px #707070; border-radius: 8px; } @media screen and (min-width: 1080px) { input[type=text] { font-size: 18px; padding: 12px 0 12px 62px; margin: 0; } } input[type=text]:focus { border-color: #2E96DD; outline: 0; } input[type='password'] { font-size: 4.2666666667vw; padding: 4.2% 0% 4.2% 15%; margin: 0; border: solid 1px #707070; border-radius: 8px; width: 100%; } @media screen and (min-width: 1080px) { input[type='password'] { font-size: 18px; padding: 12px 0 12px 62px; margin: 0; border: solid 1px #707070; border-radius: 8px; } } .auth-delimiter { font-size: 4.2666666667vw; margin: 50px auto 50px; margin: 9% auto 12%; text-align: center; color: #8E8E8E; } @media screen and (min-width: 1080px) { .auth-delimiter { font-size: 18px; margin: 50px auto 50px; } } .auth-delimiter-line { padding: 0 30%; } .auth-delimiter-line:before, .auth-delimiter-line:after { content: ""; position: absolute; top: 50%; display: inline-block; width: 30%; height: 1px; background-color: #8E8E8E; } .auth-delimiter-line:before { left: 0; } .auth-delimiter-line:after { right: 0; } .auth-button { font-weight: bold; background-color: #2E96DD; padding: 2.8% 16.5% 2.8%; font-size: 4.2666666667vw; text-align: center; color: #fff; border-radius: 8px; width: 100%; position: relative; border-bottom: 2px solid #707070; } @media screen and (min-width: 1080px) { .auth-button { font-size: 18px; width: 100%; padding: 8px 55px 8px; cursor: pointer; } } .auth-arrow-right { position: absolute; top: 32%; right: 15%; width: 3%; } @media screen and (min-width: 1080px) { .auth-arrow-right { position: absolute; top: 23%; right: 8%; width: 12px; } } .auth-text-link { font-size: 4vw; color: #2C93D8; margin-top: 4%; } @media screen and (min-width: 1080px) { .auth-text-link { font-size: 14px; color: #2C93D8; margin-top: 20px; } } .auth-text-link+.auth-text-link { margin-top: 2%; } @media screen and (min-width: 1080px) { .auth-text-link+.auth-text-link { margin-top: 8px; } } .auth-underline { text-decoration: underline; } .auth-input-label { font-size: 3vw; margin-bottom: 1%; } @media screen and (min-width: 1080px) { .auth-input-label { font-size: 14px; margin-bottom: 5px; } } .auth-input-container { margin: 11% auto 0; } @media screen and (min-width: 1080px) { .auth-input-container { margin-top: 20px; } } @media screen and (min-width: 1080px) { .auth-input-container.password-remind-mail { margin-top: 46px; } } .auth-input-icon { top: 50%; transform: translateY(-50%); left: 3%; width: 6%; pointer-events: none } @media screen and (min-width: 1080px) { .auth-input-icon { width: 24px; } } /* パスワード再設定画面 */ .auth-password-reset-container { margin-top: 12%; line-height: 1.6; } @media screen and (min-width: 1080px) { .auth-password-reset-container { margin-top: 70px; line-height: 1.6; } } .auth-password-reset-guide { font-size: 3.4vw; color: #141414; text-align: center; } @media screen and (min-width: 1080px) { .auth-password-reset-guide { font-size: 16px; } } .auth-password-reset-guide:last-of-type { margin-top: 30px; } .auth-dialog { max-width: 430px !important; border-radius: 4px; } .auth-dialog-button-group { display: flex; justify-content: space-between; align-items: center; flex-direction: column; } @media not screen and (min-width: 1080px) { .auth-dialog-button-group { gap: 10px 0; } } @media screen and (min-width: 1080px) { .auth-dialog-button-group { display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; } } .auth-dialog-button { font-size: 16px; height: 46px; border-radius: 4px; width: calc(100%/2 - 9px); } .auth-dialog-button.blue { color: #fff; background-color: #2E96DD; } .auth-dialog-button.white { border: 1px solid #707070; } .auth-password-caption { font-size: 3.5vw; color: #141414; margin-top: 5%; } @media screen and (min-width:1080px){ .auth-password-caption { font-size: 16px; margin-top: 32px; } } .auth-navigation-text { font-size: 3.5vw; color: #141414; } @media screen and (min-width:1080px){ .auth-navigation-text { font-size: 16px; } }