@charset "UTF-8";
/* =============================================================
   mase 標準ボタン/バッジ/ページャ/サイドメニューの文字色を修復し、
   公開ページのボタン(モック準拠のピル型 Teal)に見た目を揃える。

   ★なぜレイヤ外(このファイル)で宣言するのか
     mase.css の色指定は `@layer mase { ... }` の中にある。一方 tailwind.css は
     レイヤ無しで読み込むので、その preflight にある
       a { color: inherit }  /  button, input, select, textarea { color: inherit }
     が **セレクタの詳細度と無関係に**(レイヤ無し > レイヤ有り のカスケード規則で)
     mase の `color` を上書きしてしまう。
     結果、`.u-btn.mainPrimary`(背景=--color-main=Teal / 文字=--color-main-on=white)が
     「緑背景＋黒文字」になっていた(受付詳細の「メッセージを送る」で報告された症状)。
     同じ理由で .u-sideMenu の current/hover、.t-pager のリンク、.u-label のリンクも
     緑背景に黒文字で出ていた。→ ここ(レイヤ外)で色を再宣言して直す。

   ※ 管理画面(_backend)にも同じ不具合があるため、ここではスコープを絞らず
     公開/管理の両方に当てる(管理画面のボタン色を一般画面に合わせる要望も満たす)。
   ※ 読み込みは partial/_head_tailwind.html.twig。
   ============================================================= */

/* --- ボタン: mase の色ペアを復元しつつ、公開ページのピル型に寄せる ---

   ★枠線と背景もここで再宣言する理由
     tailwind の preflight には
       *, ::before, ::after { border: 0 solid #e5e7eb }
       button, input[type="submit"] { background-color: transparent }
     があり、これもレイヤ無しで読まれる。そのため mase.css(@layer mase)の
       .u-btn { background-color: white; border: 1px solid var(--color-border-gray) }
     が詳細度と無関係に潰され、バリアント(mainPrimary 等)が付かない素の .u-btn は
     枠線も背景も無い「ただの文字」に見えていた(確認画面の「戻る」で報告された症状)。
     mainPrimary / mainSecondary は下で border/background を再宣言済みのため無事だった。
     素の .u-btn はサイト全体で 270 箇所以上あるので、ここで基底ごと直す。 */
:where(a, button, input[type="submit"], input[type="button"]).u-btn,
.u-btn {
  border-radius: 9999px;
  font-weight: 700;
  padding-right: 1.5em;
  padding-left: 1.5em;
  background-color: #fff;
  border: 1px solid #cbd5e1;
}

/* 主ボタン(塗り): Teal ベタ塗り + 白文字 */
:where(a, button, input[type="submit"], input[type="button"]).u-btn.mainPrimary,
.u-btn.mainPrimary {
  color: #fff;
  background-color: #0d9488;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
:where(a, button, input[type="submit"], input[type="button"]).u-btn.mainPrimary:hover,
.u-btn.mainPrimary:hover {
  color: #fff;
  background-color: #0f766e;
  border-color: transparent;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
  opacity: 1;
}

/* 副ボタン(白地・Teal枠) → hover で反転。求人詳細の save-search と同仕様 */
:where(a, button, input[type="submit"], input[type="button"]).u-btn.mainSecondary,
.u-btn.mainSecondary {
  color: #0d9488;
  background-color: #fff;
  border: 1px solid #0d9488;
}
:where(a, button, input[type="submit"], input[type="button"]).u-btn.mainSecondary:hover,
.u-btn.mainSecondary:hover {
  color: #fff;
  background-color: #0d9488;
  opacity: 1;
}

/* 既定(クラス無し)の u-btn は白地。文字が inherit で薄くならないよう明示する */
:where(a, button, input[type="submit"], input[type="button"]).u-btn:not(.mainPrimary):not(.mainSecondary):not(.subPrimary):not(.subSecondary) {
  color: #334155;
}
:where(a, button, input[type="submit"], input[type="button"]).u-btn:not(.mainPrimary):not(.mainSecondary):not(.subPrimary):not(.subSecondary):hover {
  color: #0f766e;
  border-color: #0d9488;
  opacity: 1;
}

/* 副系(sub=青)も同様に文字色を復元 */
:where(a, button, input[type="submit"], input[type="button"]).u-btn.subPrimary { color: #fff; }
:where(a, button, input[type="submit"], input[type="button"]).u-btn.subSecondary { color: #056cf2; }

/* 危険操作(削除/退会)は赤系のまま読める色に */
:where(a, button, input[type="submit"], input[type="button"]).u-btn.warning,
:where(a, button, input[type="submit"], input[type="button"]).u-btn.delete { color: #b91c1c; }

/* --- サイドメニュー(マイページ左ナビ): current / hover の文字色 --- */
.u-sideMenu .current,
.u-sideMenu .current span,
.u-sideMenu :where(a, label).current { color: #fff; }
.u-sideMenu :where(a, label):hover,
.u-sideMenu a.related:hover { color: #fff; }

/* --- ページャ: 現在ページ(b) と hover の文字色 --- */
.t-pager b { color: #fff; }
.t-pager a:hover { color: #fff; }

/* --- ラベル(申込一覧などの `dl.u-label`): 塗りリンクの文字色 --- */
.u-label a { color: #fff; }

/* --- 未読バッジ(ベル `.u-status.ringing`) ---
   未読が「ぱっと分かる」ように、ベルのアイコンだけ琥珀色にする。
   文字は読みやすさ優先で Teal の太字（白背景に amber の文字は薄くて読みにくい）。 */
.u-status.ringing { color: #0f766e; font-weight: 700; }
.u-status.ringing::before {
  color: #f59e0b;
  font-size: 1.2em;
}

/* --- 件数表示(`.t-resultCount`) ---
   mase 既定は --color-gray(#999)で、薄い背景(#fafafa)だとコントラスト 2.7:1 で読みづらい。 */
.t-resultCount { color: #64748b; }

/* --- mase 既定のピンクが直値で残っていた箇所 ---
   mase.css は基本 --color-main を参照するが、メッセージスレッドの日付ピルだけ
   `rgba(242,65,113,.1)`(ピンク) が直書きされており、受付詳細/メッセージ詳細で
   1か所だけピンクの帯が出ていた。Teal の薄い色に合わせる。 */
.e-messages .message .date {
  background-color: rgba(13, 148, 136, .1);
  color: #0f766e;
}

/* --- フッターのコピーライト ---
   gray-400 / slate-100 でコントラスト 2.3:1 しか無く読みづらかったので落ち着いた濃さに。 */
.t-siteFooter .copyright,
footer .border-t.text-center > p { color: #64748b; }