/* ログイン・無料登録のスマホ試作。LPと同じ767px以下の１段階。
   PCの基準CSSは維持し、このファイルはログイン前の３画面だけで読み込む。 */
@media (max-width:767px){
  /* 背景は全画面共通のmobile-background.cssで管理する。 */
  .paw-login{min-width:0;padding-inline:16px}
  .paw-login-header{width:100%;max-width:660px;min-height:88px;gap:16px}
  .paw-login-brand img{width:44px;height:44px}
  .paw-login-brand>span{font-size:24px}
  .paw-login-back{font-size:13px;gap:6px;white-space:nowrap}

  /* スマホのログインはフォーム１列。格言は表示・読み上げの両方から外す。 */
  .paw-login-shell{width:100%;max-width:440px;grid-template-columns:minmax(0,1fr);gap:0;padding-block:20px 32px}
  .paw-login-quote{display:none}
  .paw-login-card{width:100%;max-width:440px;padding:24px;justify-self:center}
  .paw-login-card h1{font-size:26px;margin-bottom:32px}
  .paw-login-form{gap:24px}

  .signup-shell{width:100%;max-width:660px;padding-block:20px 32px}
  .signup-layout{width:100%;max-width:660px}
  .signup-heading h1{font-size:28px}
  .signup-card{padding:24px}
  .signup-stage h2{font-size:23px}
  /* ４段階は２列×２行。番号と読み順は変えず、横へのはみ出しを防ぐ。 */
  .signup-progress{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .signup-progress li{min-width:0}
  .signup-progress li+li:before{display:none}
  .signup-secondary-actions{column-gap:16px}
  .signup-dialog{width:calc(100% - 32px);max-width:520px}
  .signup-dialog-body{padding:20px}
  .signup-dialog h2{font-size:22px}
  .signup-dialog-actions{gap:16px}
}