/* ============================================================
   共通デザイン（kaizen-app から抽出）
   依存: Bootstrap 5.3.3 + Bootstrap Icons 1.11.3
   ------------------------------------------------------------
   このCSSを <link> で読み込み、header.html / login.html の
   スニペットを貼り付ければ同じ見た目になります。
   ============================================================ */

/* ── デザイントークン（色） ─────────────────────────────── */
:root {
  --brand-primary: #1a56db;   /* 青：プライマリ */
  --brand-accent:  #3aa76d;   /* 緑：アクセント（グラデの右側／A案明緑） */
  --bg-page:       #f0f4f8;   /* 画面背景 */
  --text-muted-2:  #6b7280;   /* セクションタイトル等の弱い文字色 */
  --line-2:        #e5e7eb;   /* 弱い罫線 */
  --danger:        #ef4444;   /* 必須マーク等 */
}

/* ── ベース ─────────────────────────────────────────── */
body { background-color: var(--bg-page); }

/* ── ヘッダーバー ─────────────────────────────────────── */
.header-bar {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  color: white;
  padding: 1rem 0;
  overflow: visible;
}

/* ── カード（ログインフォーム等） ───────────────────────── */
.form-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

/* ── セクションタイトル（フォーム見出し用） ───────────────── */
.section-title {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted-2);
  border-bottom: 2px solid var(--line-2);
  padding-bottom: .4rem;
  margin-bottom: 1rem;
}

/* ── 必須マーク ─────────────────────────────────────── */
.required::after {
  content: " ※";
  color: var(--danger);
  font-size: .85em;
}

/* ── マスコット ─────────────────────────────────────── */
.mascot {
  filter: drop-shadow(1px 3px 6px rgba(0, 0, 0, .2));
  flex-shrink: 0;
}
.mascot-float { animation: mfloat 3s ease-in-out infinite; }
@keyframes mfloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* ヘッダー右端からひょっこりマスコットを出すための位置調整。
   header.html の <img class="header-mascot"> に対して効く。 */
.header-mascot {
  height: 72px;
  margin-bottom: -22px;
}

/* ログイン画面：タイトルをカード幅（420px）に揃えて左寄せ */
#loginSection .header-bar { margin-bottom: 1.25rem; }
#loginSection .header-bar > .container {
  max-width: 420px;
  justify-content: flex-start;
  align-items: flex-start !important;
  text-align: left;
}

/* ── レスポンシブ：PC（≥992px）はヘッダー横並び、それ未満は縦2段 ── */
@media (max-width: 991.98px) {
  .header-mascot { display: none !important; }

  .header-bar > .container {
    flex-direction: column;
    align-items: stretch !important;
    gap: .35rem !important;
    padding-left: .75rem;
    padding-right: .75rem;
  }
  .header-bar h1 {
    white-space: nowrap;
    font-size: 1.5rem;
  }
  .header-actions {
    margin-left: auto !important;
    justify-content: flex-end;
    gap: .35rem !important;
    align-items: center;
  }
  .header-actions > * { margin-bottom: 0 !important; }
  .header-actions .btn-sm {
    line-height: 1.05;
    padding: .3rem .5rem;
    font-size: .72rem;
  }
}