/**
 * ログイン（/login/）・パスワード再設定（/reset-password/）・ログインモーダル（keep-login-modal.css から @import）。
 * 07-login-mypage §0〜§3（PC 本体 pad 80/0 中身 700 幅 gap 60、SP pad 40/0/80 中身 335 gap 40）。
 * エラー帯は 07 §4 ②（14px primary、欄枠 primary）。
 */
.p-login { padding: 40px 20px 80px; }
.p-login__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.p-login__heading { font-size: 18px; }
.p-login__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}
.p-login__fields { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.p-login__field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.p-login__label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--jn-color-text-strong);
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: 0.8px;
  flex-wrap: wrap;
  row-gap: 4px;
}
.p-login__req {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--jn-color-primary);
  color: var(--jn-color-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 16.8px;
  letter-spacing: 0.6px;
}
.p-login__input {
  width: 100%;
  height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--jn-color-border);
  border-radius: 4px;
  background: var(--jn-color-white);
  color: var(--jn-color-text-strong);
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.8px;
}
.p-login__en {
  color: var(--jn-color-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  letter-spacing: 0;
}
.p-login__remember .p-login__en { display: block; }
.p-login__label .p-login__en { white-space: nowrap; }
.p-login__lead .p-login__en { display: block; }
.p-login__link-text { display: flex; flex-direction: column; }
.p-login__link-text .p-login__en { color: inherit; opacity: 0.8; }
/* エラー帯のすぐ下の再設定リンク（フォームの gap を打ち消して 8px に寄せる） */
.p-login__error-help { width: 100%; margin-top: -32px; }
.p-login__input::placeholder { color: var(--jn-color-border); }
.p-login__input:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 1px; }
.p-login__input.is-error { border-color: var(--jn-color-primary); }
.p-login__note { color: var(--jn-color-text); font-size: 12px; line-height: 1.6; }
.p-login__lead { width: 100%; color: var(--jn-color-text-strong); font-size: 16px; line-height: 1.8; }
.p-login__error {
  width: 100%;
  color: var(--jn-color-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
.p-login__error[hidden] { display: none; }
/* ログインモーダル: 帯の中の文言と「再読み込み」ボタン（画面の期限切れのときだけ。タップ領域 44px 以上。UX r4 L3） */
.p-login__error-text { margin: 0; }
.p-login__reload { width: auto; min-width: 160px; height: auto; min-height: 44px; margin-top: 12px; padding: 6px 24px; gap: 8px; font-size: 14px; }
.p-login__reload .p-login__en { color: inherit; }
.p-login__reload[hidden] { display: none; }
/* 欄の下のエラー（page-login.js の送信前チェック・サーバー側の欄エラー。/mypage/account/ の .c-mf__error と同じ見た目） */
.p-login__field-error { margin: 0; color: var(--jn-color-primary); font-size: 14px; font-weight: 700; line-height: 1.5; }
.p-login__field-error[hidden] { display: none; }
.p-login__note .p-login__en { margin-left: 8px; }
.p-login__remember {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--jn-color-text-strong);
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: 0.8px;
  cursor: pointer;
}
/* 「ログイン状態を保持」は 24×24 白地・1px #CCC・r2、チェック時はティール地に白のレ点（Figma 07。お問い合わせ .p-contact__consent と同じ。pp forms M6）。
   input のまま appearance だけ外すので Tab・Space の操作とフォーカスリングはそのまま */
.p-login__remember input {
  flex: none;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--jn-color-white);
  border: 1px solid var(--jn-color-border);
  border-radius: 2px;
  cursor: pointer;
}
.p-login__remember input:checked {
  background: var(--jn-color-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 20px no-repeat;
  border-color: var(--jn-color-secondary);
}
.p-login__remember input:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 2px; }
button.c-btn-gloss { font: inherit; cursor: pointer; }
.p-login__submit { width: 335px; }
.p-login__submit .c-btn-gloss__label { font-size: 16px; font-weight: 700; letter-spacing: 0.8px; }
.p-login__submit:disabled { opacity: 0.6; cursor: wait; }
.p-login__links { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.p-login__link {
  display: inline-flex;
  align-items: flex-start; /* 矢印は日本語の行の横（英語の 2 行目まで含めた中央ではない。Figma、pp2 forms2#L2） */
  gap: 16px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--jn-color-secondary);
  color: var(--jn-color-contact);
  font-size: 14px;
  font-weight: 500;
  line-height: 22.4px;
}
.p-login__link::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
  margin-top: 8px; /* 1 行目 22.4 の中央 */
}
.p-login__link:hover { opacity: 0.8; }

/* 送信完了・完了・リンク無効（07 §5: キープ 0 件の中央寄せ文言＋枠ボタン） */
.p-login__notice { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.p-login__notice-title { color: var(--jn-color-contact); font-size: 22px; font-weight: 700; line-height: 1.4; }
.p-login__notice-text { color: var(--jn-color-text-strong); font-size: 16px; line-height: 1.8; }
.p-login__notice-en { display: block; margin-top: 4px; color: var(--jn-color-text); font-size: 14px; font-weight: 400; line-height: 1.6; }
.p-login__notice-title .p-login__notice-en { font-size: 16px; font-weight: 500; }
.p-login__notice-btn { height: auto; min-height: 56px; padding: 8px 36px; }
.p-login__notice-btn .p-login__link-text { align-items: center; }
.p-login__notice-btn .p-login__en { color: inherit; }

@media (max-width: 767px) {
  .p-login__input { height: 44px; min-height: 44px; }
}

@media (min-width: 768px) {
  .p-login { padding: 80px 20px; }
  .p-login__inner { gap: 60px; }
  /* ログインページだけ フォーム→自動ログイン→ボタンを 60（07 §1 Frame 97 gap 60。pixel-triage A11）。モーダル（.p-login 無し）・再設定（remember 無し）は変えない */
  .p-login .p-login__remember { margin-block: 20px; }
  .p-login__heading { font-size: 20px; }
  .p-login__submit { width: 400px; }
  .p-login__submit .c-btn-gloss__label { font-size: 18px; letter-spacing: 0.9px; }
  .p-login__notice-title { font-size: 28px; }
}

/* ログインモーダル（template-parts/modal/login.php） */
.c-modal--login .c-modal__panel { width: min(560px, 100%); }
.c-modal--login .p-login__inner { gap: 24px; }
.c-modal--login .p-login__form,
.c-modal--login .p-login__fields { gap: 20px; }
.c-modal--login .p-login__submit { width: 100%; max-width: 335px; }
.c-modal--login .p-login__links { gap: 16px; }

/* 見出しアイコンはお問い合わせ・会員登録と同じ鉛筆（icons/pen.svg。pixel-compare-b2 M1）。このページは member-form.css を読まないのでここでも色を指定 */
.p-login__heading .c-heading__icon.jn-icon--pen { color: var(--jn-color-primary); }

/* ログイン PC の左右あしらい（ティールの霞。Figma 07 `232:73537` [-104,179 1623×851]、#00CAC2 実効 15%）。1 組だけ。
   素材は検索結果（page-job-archive.css の .p-job-archive::before）と同じ。横位置は Figma 画素で合わせて左 x=-104・右 x=1184（検索結果より 13 左）。.p-login の上端は 88（パンくず無し）なので top 91（179-88）。
   再設定（.p-login--reset）は Figma 未確認のため出さない。SP も Figma に無いため出さない（pp forms H1） */
@media (min-width: 1200px) {
  .p-login:not(.p-login--reset) { position: relative; isolation: isolate; overflow: clip; }
  .p-login:not(.p-login--reset)::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 91px;
    left: 0;
    width: 100%;               /* 1440 固定の箱だと広い画面で箱の端で霞が縦に切れる（先方指摘 TOP⑦ の横展開）。位置は中央基準 */
    height: 851px;
    background:
      url("../img/deco-kasumi-teal.svg") calc(50% - 656.5px) 0 / 335px 980px no-repeat,
      url("../img/deco-kasumi-teal.svg") calc(50% + 631.5px) 0 / 335px 980px no-repeat;
    pointer-events: none;
  }
}

/* ハイコントラスト表示（forced-colors）では背景画像のレ点が消えるので、チェック済みの箱だけ色を固定する（UX pp1 M2） */
@media (forced-colors: active) {
  .p-login__remember input:checked { forced-color-adjust: none; }
}