@charset "UTF-8";

/* =====================================================
   サインインページ: 1カラム中央配置
   signup/css/index.css の共通コンポーネントを上書き
   ===================================================== */
body{
  background : linear-gradient(135deg, rgba(72, 63, 255, 1) 0%, rgba(221, 71, 211, 1) 100%);
}


.signin-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 80px 24px 40px;
}

.signin-page .trial-card {
  width: 380px;
  max-width: 100%;
  margin: 0 auto;
}

.signin-page .trial-left-foot {
  width: 380px;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 40px;
}

/* 見出し: モックアップ準拠で左寄せ */
.signin-page .trial-card h1 {
  text-align: left;
}

/* フォーム: 2入力欄の間隔 */
.signin-page .trial-card form {
  gap: 8px;
}

/* テキスト・パスワード入力（email と同スタイル） */
.signin-page .trial-card input[type="text"],
.signin-page .trial-card input[type="password"] {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--input-bg) !important;
  border: none;
  border-radius: 4px;
  color: var(--text-primary) !important;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  min-height: 46px;
  -webkit-appearance: none;
  appearance: none;
}

.signin-page .trial-card input[type="text"]::placeholder,
.signin-page .trial-card input[type="password"]::placeholder {
  color: #777;
}

.signin-page .trial-card input[type="text"]:-webkit-autofill,
.signin-page .trial-card input[type="text"]:-webkit-autofill:hover,
.signin-page .trial-card input[type="text"]:-webkit-autofill:focus,
.signin-page .trial-card input[type="password"]:-webkit-autofill,
.signin-page .trial-card input[type="password"]:-webkit-autofill:hover,
.signin-page .trial-card input[type="password"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #000000 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
}

/* IP制限エラー内リンク */
.signin-page .trial-card .error-message a {
  color: #fff;
  text-decoration: underline;
}

.signin-page .trial-card .error-message a:hover {
  opacity: 0.85;
}

/* SNSエラーメッセージ（CakePHP flash: div.message / div.trial-sns-err） */
.signin-page .trial-sns-err,
.signin-page .trial-card .message {
  margin-top: 12px;
  font-size: 14px;
  color: #ff6b6b;
  text-align: center;
}

/* SNSエラー内リンク（サインアップ） */
.signin-page .trial-sns-err a,
.signin-page .trial-sns-err a:visited,
.signin-page .trial-card .message a,
.signin-page .trial-card .message a:visited {
  color: #fff;
  text-decoration: underline;
}

.signin-page .trial-sns-err a:hover,
.signin-page .trial-card .message a:hover {
  color: #fff;
  opacity: 0.85;
}

/* =====================================================
   パスワード再設定・完了画面（auth レイアウト）
   signup の完了画面用ダーク青背景をサインインと同じグラデに上書き
   ===================================================== */
body:has(.trial-page--complete-auth) {
  background: linear-gradient(135deg, rgba(72, 63, 255, 1) 0%, rgba(221, 71, 211, 1) 100%);
}

.trial-page--complete-auth::before {
  display: none;
}

/* PC: 見出しを1行・画面中央揃え */
@media only screen and (min-width: 768px) {
  .trial-page--complete-auth .trial-complete {
    width: min(100%, 920px);
  }

  .trial-page--complete-auth .trial-complete__title-row {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .trial-page--complete-auth .trial-complete__title-row .trial-complete__title {
    white-space: nowrap;
    text-align: center;
    margin-bottom: 28px;
  }
}

/* パスワード再設定完了: 見出し下の余白 */
.trial-page--complete-auth .trial-complete--reset-paswd-success .trial-complete__title {
  margin-bottom: 68px;
}

/* パスワード再設定エラー: 本文内 (?) リンク */
.trial-page--complete-auth .trial-complete__body a,
.trial-page--complete-auth .trial-complete__body a:visited {
  color: #fff;
  text-decoration: underline;
}

.trial-page--complete-auth .trial-complete__body a:hover {
  color: #fff;
  opacity: 0.85;
}

/* =====================================================
   レスポンシブ
   ===================================================== */
@media only screen and (min-width: 1024px) {
  .trial-page--complete-auth:has(.trial-complete__help) .trial-complete {
    transform: translateY(-74px);
  }
}

@media only screen and (max-width: 767px) {
  .signin-page {
    padding: 70px 16px 40px;
    justify-content: flex-start;
  }
}