@charset "UTF-8";
/* =============================================================================
   page-login.css — ログイン系ページ（login.php / no-role.php）固有のレイアウト
   部品と色は kq-swiss.css。ここは骨格の寸法と並びだけ（色はトークンのみ）。
   旧 css/login.css はロールバック用に残置（参照なし）。
   ============================================================================= */

/* 和文見出し6字（メンバー専用／アクセス権限）が 320〜375 幅でも1行に収まるよう、最小値だけ下げる */
.page-login { --fs-h1: clamp(3rem, 10vw, 9.5rem); }

/* ヒーローを大きく使い、その上に紙面を載せる */
.page-hero--gate { min-height: clamp(560px, 92svh, 980px); }
.page-hero--gate .page-hero__body { gap: var(--space-5); }

/* 白い紙面（.plate 相当のブロック版） */
.gate-sheet {
  display: grid; gap: var(--space-4);
  width: min(100%, 38rem);
  margin-top: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--color-paper);
  text-align: left;
  word-break: auto-phrase;   /* 和文を文節で折り返し、行末に1字だけ残るのを防ぐ */
  text-wrap: pretty;
}
@media (min-width: 720px) {
  .gate-sheet { padding: var(--space-6); gap: var(--space-5); }
}
.gate-sheet__cta { width: 100%; }
.gate-sheet__cta svg { width: 1.3em; height: 1.3em; flex: none; }
.gate-sheet__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4);
  padding-top: var(--space-3); border-top: var(--line-soft);
}

/* no-role：案内文のまとまり（1文目を強める） */
.gate-notice__body { display: grid; gap: var(--space-2); }
.gate-notice__body > p:first-child { font-weight: 700; }
@media (max-width: 480px) {
  /* 狭い画面ではラベルを上に置き、本文の幅を確保する */
  .gate-sheet .notice { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* login.php?error= のエラーダイアログ（開閉は既存の closeCustomDialog が hidden で行う） */
.gate-dialog { width: min(100%, 28rem); }
.gate-dialog .dialog__body > p { overflow-wrap: anywhere; }