/* ベース */
body { font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; }
.brand-header { background-color: #E9DEFB; }

.logo {
	height: 48px;
}

/* セクション背景 */
.bg-common { background-color: #F9F7FF; }

/* 必須マーク（ラベル末尾に赤*） */
.req::after { content: " *"; color: #dc3545; }

/* 入力枠線の標準色を #c0c0c0 で固定 */
.form-control, .form-select { border-color: #c0c0c0 !important; box-shadow: none !important; }
.form-control:focus, .form-select:focus { border-color: #c0c0c0 !important; outline: none; box-shadow: none !important; }

/* 赤枠は使わないポリシーに変更（保険として無効化） */
.is-error { border-color: #c0c0c0 !important; }
.is-error-group { outline: none !important; }

/* 送信時のエラー強調（赤枠） */
.is-error { border-color: #dc3545 !important; }
.is-error-group { outline: 2px solid #dc3545; outline-offset: 2px; border-radius: .375rem; padding: .25rem .5rem; }

/* 個別エラー（初期は非表示。blur時のみ表示） */
.invalid-feedback { display: none; color: #b30000; font-size: 0.875rem; }

/* まとめエラー */
.err-summary {
  background: #ffe5e5;
  color: #b30000;
  border: 1px solid #b30000;
  padding: 0.75rem 1rem;
  margin: 1rem 1rem 0;
  border-radius: 0.5rem;
}

/* セレクトの最小幅は維持（理想.pngの見た目に合わせる） */
#kbKojinKaiinGroup { flex-wrap: wrap; gap: .25rem .75rem; max-width: 100%; }
#kbKojinKaiinGroup { 
  flex: 1 1 220px;      /* 余裕があれば 220px 程度、なければ縮む */
  max-width: 100%;      /* セクション外にはみ出さない */
  min-width: 0;         /* flex 子要素のはみ出し防止 */
}

/* ボタン（初期から活性＝青） */
.btn-submit {   
  /* Bootstrapのボタン用変数を明示指定（状態別の色も定義） */
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;         /* 少し濃く */
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 13,110,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;

  /* なめらかに変化 */
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .2s ease, transform .1s ease; 
}

.btn-submit { background-color: #0d6efd; border-color: #0d6efd; }
.btn-submit:hover { background-color: #0b5ed7; border-color: #0a58ca; }

.btn.btn-primary:hover,
.btn.btn-submit:hover {
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); /* うっすらリング */
  transform: translateY(-1px);                   /* ほんの少し持ち上げる */
}
.btn.btn-primary:active,
.btn.btn-submit:active {
  transform: none;
}

/* フォームの最小幅を定義 */
.date-min-width {
    min-width: 140px; /* 好きな幅に調整 */
}

/* 見出し・ポリシー枠 */
.section-title { margin-bottom: .75rem; }
.policy-box {
  border: 1px dashed #c0c0c0;
  background: #fafafa;
  padding: .75rem 1rem;
  border-radius: .5rem;
}

/* レスポンシブ（小画面で文字・ボタンを縮小） */
@media (max-width: 992px) {
  h1.h3 { font-size: 1.25rem; }
  .brand-header .h5 { font-size: 1rem; }
  .btn.btn-submit { padding: .5rem 1rem; font-size: .9rem; }
  label.form-label, .col-form-label { font-size: .95rem; }
}
@media (min-width: 768px) {
  #kbKojinKaiinGroup {
    width: auto;          /* Bootstrapのwidth:100%を上書き */
    flex: 0 1 auto;       /* 余白があっても伸びない */
    min-width: 220px;     /* 使いやすい最小幅 */
    max-width: 360px;     /* 好みで 320~420px 程度に調整可 */
  }
}
@media (max-width: 576px) {
  #kbKojinKaiinGroup { width: 100%; margin-left: 0 !important; }
  .btn.btn-submit { padding: .45rem .9rem; font-size: .85rem; }
  label.form-label, .col-form-label { font-size: .9rem; }
  .form-text { font-size: .70rem; }
}

/* パスワードの目玉アイコンを消す */
input::-ms-reveal {
	display: none;
}
/* 初期表示は目玉アイコン非表示 */
.toggle-password-button {
	display: none;
}

/* 目玉ボタン：通常時の位置 */
.toggle-password-button {
  right: .50rem;          /* 左に寄せたければ増やす */
  z-index: 2;             /* 入力枠より上に */
  padding: .25rem .5rem;  /* btnのデフォpaddingがデカいので縮める（任意） */
}

/* invalid（! が出る）時：目玉をさらに左へ逃がす */
.password-basic.is-invalid ~ .toggle-password-button,
.was-validated .password-basic:invalid ~ .toggle-password-button {
  right: 2.25rem;
}