@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
* {
  margin: 0;
  padding: 0;
}

@media (max-width: 479px) {
  body {
    --shadow-component-outer: none;
    --prompt-width: 100%;
  }
}

.login-page {
  font-family: -apple-system, BlinkMacSystemFont, ".SFNSDisplay-Regular", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  width: 100%;
  height: 100%;
  font-size: 100%;
}
.login-page a {
  text-decoration: none;
}
.login-page a:hover {
  text-decoration: underline;
}
.login-page a svg {
  width: 16px;
  height: 16px;
  fill: #1a50b7;
  margin-left: 4px;
  vertical-align: middle;
}
.login-page .login-contents {
  display: flex;
}
@media (max-width: 1279px) {
  .login-page .login-contents {
    flex-direction: column;
  }
}
@media (min-width: 1280px) {
  .login-page .login-contents {
    flex-direction: row;
  }
}
@media (max-width: 479px) {
  .login-page .login-contents {
    min-height: calc(100% - 120px);
  }
}
@media (min-width: 480px) {
  .login-page .login-contents {
    min-height: calc(100% - 48px);
  }
}
.login-page .login-contents .login-container {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1 0 50%;
  box-sizing: border-box;
  margin: 0 auto;
  padding-bottom: 8px;
}
.login-page .login-contents .login-container .login-header {
  padding-top: 24px;
}
@media (max-width: 479px) {
  .login-page .login-contents .login-container .login-header {
    margin-bottom: 0;
  }
}
@media (min-width: 480px) {
  .login-page .login-contents .login-container .login-header {
    margin-bottom: 32px;
  }
}
.login-page .login-contents .login-container .login-header .logo-chatwork {
  margin: 0 auto;
  width: 220px;
  height: 45px;
}
.login-page .login-contents .login-container .error-container {
  display: none;
  border: 2px solid rgb(209, 0, 19);
  box-sizing: border-box;
  font-size: 15px;
  line-height: 1.5em;
  padding: 8px 16px 16px 16px;
}
@media (max-width: 399px) {
  .login-page .login-contents .login-container .error-container {
    width: calc(100% - 80px);
    margin: 32px auto 0 auto;
  }
}
@media (min-width: 400px) and (max-width: 479px) {
  .login-page .login-contents .login-container .error-container {
    width: 320px;
    margin: 32px auto 0 auto;
  }
}
@media (min-width: 480px) {
  .login-page .login-contents .login-container .error-container {
    width: 400px;
    margin: 0 auto 24px auto;
  }
}
.login-page .login-contents .login-container .error-container h2 {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5em;
}
.login-page .login-contents .login-container .error-container .error-list {
  color: rgb(209, 0, 19);
  font-weight: 400;
  margin: 8px 16px 8px 16px;
  list-style: initial;
}
.login-page .login-contents .login-container .error-container .help-navigation {
  font-weight: 400;
  margin-bottom: 8px;
}
.login-page .login-contents .login-container .error-container .help-link-list {
  color: rgba(36, 36, 36, 0.85);
  margin-left: 16px;
  list-style: initial;
}
.login-page .login-contents .login-container .login-form-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (max-width: 479px) {
  .login-page .login-contents .login-container .login-form-container {
    margin-bottom: 0;
  }
}
@media (min-width: 480px) {
  .login-page .login-contents .login-container .login-form-container {
    margin-bottom: 40px;
  }
}
.login-page .login-contents .login-container .horizontal-line {
  height: 0;
  border: 1px solid #D2DBE5;
  margin-bottom: 56px;
}
@media (max-width: 479px) {
  .login-page .login-contents .login-container .horizontal-line {
    max-width: 320px;
    width: calc(100% - 80px);
  }
}
@media (min-width: 480px) {
  .login-page .login-contents .login-container .horizontal-line {
    width: 400px;
  }
}
.login-page .login-contents .login-container .privacy-policy {
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 40px;
}
.login-page .login-contents .login-container .login-help {
  font-weight: 400;
  font-size: 16px;
  margin-top: 16px;
  margin-bottom: 56px;
}
.login-page .login-contents .login-container .cancel-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 320px;
  height: 52px;
  margin: 0 0 40px 0;
  border: 1px solid #8ba0b9;
  border-radius: 3px;
  background: #f8fafc;
  padding: 0;
  line-height: 21px;
  font-size: 16px;
  font-weight: 400;
  color: #242424;
}
.login-page .login-contents .login-container .cancel-button:hover {
  border-color: #a9bace;
  background: #ffffff;
  color: #000000;
  text-decoration: none;
}
.login-page .login-contents .login-container .cancel-button:active {
  border-color: #8ba0b9;
  background: #ebeff4;
  color: #242424;
  text-decoration: none;
}
.login-page .login-contents .login-container .cancel-button:focus {
  outline: solid 3px rgba(171, 199, 230, 0.4980392157);
}
.login-page .login-contents .login-container .register-link {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 56px;
}
.login-page .login-contents .login-container .download-application {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 56px;
}
.login-page .login-contents .login-container .application-navigation {
  width: 400px;
  display: flex;
  align-items: center;
}
@media (max-width: 479px) {
  .login-page .login-contents .login-container .application-navigation {
    flex-direction: column;
  }
}
@media (min-width: 480px) {
  .login-page .login-contents .login-container .application-navigation {
    justify-content: space-between;
  }
}
.login-page .login-contents .login-container .kcw-to-ecw {
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 56px;
}
.login-page .login-contents .login-container .kcw-to-ecw .kcw-to-ecw-link {
  font-weight: 400;
  font-size: 16px;
}
.login-page .login-contents .ad-container {
  flex: 1 0 50%;
  width: 100%;
  min-width: 400px;
  background-color: #fcf9f0;
  color: #756b59;
  padding: 0 80px;
}
.login-page .login-contents .ad-container .ad-summary {
  padding-top: 72px;
  margin-bottom: 40px;
  font-family: "UD新ゴNT M", ".SFNSDisplay-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
  font-size: 22px;
}
.login-page .login-contents .ad-container .ad-description-container {
  padding: 0 20px 40px;
}
.login-page .login-contents .ad-container .ad-description-container .ad-description {
  line-height: 1.6;
  font-size: 14px;
}
.login-page .login-contents .ad-container .ad-button {
  box-sizing: border-box;
  -webkit-appearance: none;
  display: block;
  margin: 0 auto;
  height: 48px;
  line-height: 48px;
  width: 256px;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  font-size: 16px;
  background-color: #614e26;
  color: #FFFFFF;
}
.login-page .login-contents .ad-container .ad-image {
  width: 400px;
  margin: 60px auto 0;
  padding-bottom: 40px;
}
.login-page .login-contents .ad-container .ad-text-container {
  max-width: 900px;
  text-align: center;
  margin: 0 auto 40px;
  padding: 0 80px;
}
.login-page .login-contents .ad-container .ad-download-button {
  height: 100%;
  background-color: #F7E160;
}
.login-page .global-footer {
  background-color: #13202F;
  text-align: center;
  position: sticky;
  top: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 479px) {
  .login-page .global-footer {
    min-height: 120px;
    flex-direction: column;
  }
}
@media (min-width: 480px) {
  .login-page .global-footer {
    min-height: 48px;
  }
}
.login-page .global-footer small {
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 24px 0;
}
@media (max-width: 479px) {
  .login-page .global-footer small {
    height: 40px;
  }
}
@media (min-width: 480px) {
  .login-page .global-footer small {
    height: 24px;
  }
}
.login-page .global-footer small a {
  color: #ffffff;
}

/* パスワードレスのログイン画面では、サインアップのリンクを非表示にする */
.login-id-email .ulp-alternate-action {
  display: none;
}

.login-passwordless-email div:has(> p) {
  text-align: left;
}

div:has(> .ulp-action-form-resend) {
  text-align: left;
}

/* 共通スタイル: パスワード認証・パスワードレス認証のメアド入力画面 */
.login-id-password, .login-id-email {
  .divider-container {
    display: flex;
    align-items: center;
    margin: 0;
    padding-top: var(--spacing-1-5);
    color: #1e212a;
  }
  .divider-container::before,
  .divider-container::after {
    content: "";
    flex: 1 0 auto;
    height: .5em;
    border-bottom: 1px solid var(--border-default-color);
    margin: 0;
  }
  .divider-text {
    font-size: 12px;
    text-align: center;
    flex: 0.2 0 auto;
    margin: 0;
  }

  .kcw-connection-button-container {
    margin-top: var(--spacing-3);
  }

  .signin-button:active {
    box-shadow: var(--button-dark-focus-shadow);
  }
  .signin-button:focus {
    outline: none;
    background-color: var(--transparency-focus-color);
    box-shadow: 0 0 0 4px var(--transparency-focus-color);
  }
  .signin-button:hover {
    box-shadow: var(--button-hover-shadow);
  }
  .signin-button {
    box-sizing: border-box;
    margin: 0 0 var(--spacing-1) 0;
    vertical-align: baseline;
    font: inherit;
    display: flex;
    position: relative;
    padding: 0 var(--spacing-1) 0 var(--spacing-6-5);
    background: var(--widget-background-color);
    align-items: center;
    width: 100%;
    font-size: var(--lg-font-size);
    font-family: inherit;
    height: var(--button-height);
    border: var(--social-button-border-width) solid var(--social-button-border-color);
    border-radius: var(--button-border-radius);
    color: var(--secondary-button-text-color);
    cursor: pointer;
    outline: 0;
    transition: box-shadow var(--transition-speed) var(--transition-easing),background-color var(--transition-speed) var(--transition-easing);
  }

  .signin-icon {
    color: var(--secondary-button-text-color);
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    position: absolute;
    left: calc(var(--spacing-6-5)/2);
    top: 50%;
  }

  .signin-label {
    color: var(--secondary-button-text-color);
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    text-align: left;
  }
}

/* パスワード認証のメアド入力画面の個別スタイル */
.login-id-password {
  #email-connection-authorize-link-container {
    display: flex;
    flex-direction: column;
  }

  .other-connection-button-container {
    margin: 0;
  }

  .signin-icon {
    /* SVGアイコン自体が中央揃えではないため、下に2.5pxずらしている */
    transform: translateX(-50%) translateY(calc(-50% + 2.5px));
  }

  .email-signin-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8.59375,6.5625 L1.40625,6.5625 C1.1475,6.5625 0.9375,6.3525 0.9375,6.09375 L0.9375,1.54375 L4.659375,4.853125 C4.864375,5.068125 5.175625,5.02875 5.340625,4.853125 L9.0625,1.473125 L9.0625,6.09375 C9.0625,6.3525 8.8525,6.5625 8.59375,6.5625 L8.59375,6.5625 Z M8.251875,0.9375 L5,3.848125 L1.673125,0.9375 L8.251875,0.9375 Z M9.0625,0 L0.9375,0 C0.42,0 0,0.42 0,0.9375 L0,6.5625 C0,7.08 0.42,7.5 0.9375,7.5 L9.0625,7.5 C9.58,7.5 10,7.08 10,6.5625 L10,0.9375 C10,0.42 9.58,0 9.0625,0 L9.0625,0 Z'%3E%3C/path%3E%3C/svg%3E");
  }

  /* Auth0によって自動で付与される余計なmargin-topを打ち消す */
  #ulp-container-secondary-actions-end {
    margin-top: 0 !important;
  }
  #ulp-container-secondary-actions-end .ulp-field {
    margin-top: 0 !important;
  }
}

/* パスワードレス認証のメアド入力画面の個別スタイル */
.login-id-email {
  #default_authorize_link_container {
    display: flex;
    flex-direction: column;
  }

  .other-connection-button-container {
    margin-top: var(--spacing-3);
  }

  .signin-icon {
    transform: translateX(-50%) translateY(-50%);
  }

  .password-signin-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8.53 1.46A5 5 0 0 0 6.29.17L5.1 1.35a2.31 2.31 0 0 0-.54 2.31L.69 7.53a5.21 5.21 0 0 0 .56.77l.87-.87 1.11 1.1.66-.66-1.11-1.1.45-.45 1.1 1.11.67-.66-1.11-1.11L5 4.53a1.57 1.57 0 0 0 .2.25 2.43 2.43 0 0 0 3.42.11l1.2-1.18a5 5 0 0 0-1.29-2.25zm-.44 2.65A1.56 1.56 0 0 1 5.88 1.9l.66-.66a4 4 0 0 1 1.33.89 4.07 4.07 0 0 1 .88 1.32z'/%3E%3C/svg%3E");
  }

  .google-signin-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpath id='a' d='M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z'/%3E%3C/defs%3E%3CclipPath id='b'%3E%3Cuse xlink:href='%23a' overflow='visible'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23b)' fill='%23FBBC05' d='M0 37V11l17 13z'/%3E%3Cpath clip-path='url(%23b)' fill='%23EA4335' d='M0 11l17 13 7-6.1L48 14V0H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%2334A853' d='M0 37l30-23 7.9 1L48 0v48H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%234285F4' d='M48 48L17 24l-4-3 35-10z'/%3E%3C/svg%3E");
  }

  .apple-signin-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='170' xmlns='http://www.w3.org/2000/svg' height='170'%3E%3Cpath d='M150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.197-2.12-9.973-3.17-14.34-3.17-4.58 0-9.492 1.05-14.746 3.17-5.262 2.13-9.501 3.24-12.742 3.35-4.929.21-9.842-1.96-14.746-6.52-3.13-2.73-7.045-7.41-11.735-14.04-5.032-7.08-9.169-15.29-12.41-24.65-3.471-10.11-5.211-19.9-5.211-29.378 0-10.857 2.346-20.221 7.045-28.068 3.693-6.303 8.606-11.275 14.755-14.925s12.793-5.51 19.948-5.629c3.915 0 9.049 1.211 15.429 3.591 6.362 2.388 10.447 3.599 12.238 3.599 1.339 0 5.877-1.416 13.57-4.239 7.275-2.618 13.415-3.702 18.445-3.275 13.63 1.1 23.87 6.473 30.68 16.153-12.19 7.386-18.22 17.731-18.1 31.002.11 10.337 3.86 18.939 11.23 25.769 3.34 3.17 7.07 5.62 11.22 7.36-.9 2.61-1.85 5.11-2.86 7.51zM119.11 7.24c0 8.102-2.96 15.667-8.86 22.669-7.12 8.324-15.732 13.134-25.071 12.375a25.222 25.222 0 0 1-.188-3.07c0-7.778 3.386-16.102 9.399-22.908 3.002-3.446 6.82-6.311 11.45-8.597 4.62-2.252 8.99-3.497 13.1-3.71.12 1.083.17 2.166.17 3.24z'/%3E%3C/svg%3E");
  }
}