@charset "UTF-8";
/* ==========================================================================
   インフィニティ 社内ポータル 共通スタイル
   デザイン標準（LINE構造 + Infinity ブランド色）に準拠。
   CSS変数は使わず値を直書きし、このファイル1本に集約する。
   Primary #1D2D50 / Accent #F48B21 / LINE Green は使わない。

   決め事（2026-09-09 のブラッシュアップで揃えた）
   ・色は Navy #1D2D50 と Orange #F48B21 の2色。
     オレンジは白地の上に「文字として」置かない（2.45:1 しかなく読めない）。
     使うのは印だけ：未読の丸・数字の地（文字は紺）・フォーカスの輪・リンクの下線・アクセントボタンの地
   ・文字の灰は #666666 まで。#999999 は文字に使わない（2.85:1）。無効も #666666 で地を薄くして示す
   ・罫線は2段： #e5e5e5（構造）／ #eef0f2（繰り返す行）。行の罫まで濃いと格子に見える
   ・影は3段：
       標準   0 2px 8px rgba(0,0,0,.08) + 1px solid #e5e5e5   … カード・タイル（デザイン標準の値）
       持ち上げ 0 6px 20px rgba(0,0,0,.12)                     … ホバー中のタイル
       重なり  0 8px 24px rgba(0,0,0,.16)                      … 新着の一覧・確認・お知らせ
   ・動きは 120ms（色・影）と 200ms（開閉）だけ。低減モーションの設定では 0 にする
   ・フォーカスの輪はオレンジ 2px（紺の面の上では白）。入力欄は紺の枠で示す
   ・余白は 4 / 8 / 16 / 24 / 40 / 64 の6段だけ（12px は 44・48px の部品の内側と表のセルだけ。間隔には使わない）

   文字の段（2026-09-15 のブラッシュアップで揃えた）
   ・大きさは 38（画面の題）／24（節）／20（カードの見出し）／16（操作・表・補足）／14（表の見出し・注記）の5段。
     本文は 20px（モバイル 17px）。数字の強調（.fig）だけ 48px（モバイル 40px）
   ・太さは 400 と 700 の2つだけ
   ・行の高さは normal（操作・表）／1.27（見出し）／1.75（読む文章）／1.5（部品の中の複数行）／1.1（大きい数字）／1（丸の中の数字）の6つだけ
   ・読む文章（.lead .hint .sub .man など）は1行を 40em（和文でおよそ40字）までにする。画面はフルワイドのまま
   ・大きい数字（.fig）は「その数字を見るための画面」にだけ1つ置く（打刻の時刻・差引支給額・承認待ちの金額・残額）。
     どの画面にも置く飾りにはしない
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* hidden 属性を必ず効かせる。
   .btn や .hd-badge に display:inline-flex を書いているため、
   これが無いと JS で hidden にしても消えない（ボタンが両方出る・空のバッジが出る）。 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: SFPro, Arial, "Noto Sans JP", "Noto Sans KR", sans-serif;
  font-size: 20px;
  line-height: normal;
  color: #000000;
  background: #f7f8f9;
  font-feature-settings: "palt" 0;
  word-break: break-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* 本文が短くてもフッターを画面下に置く。
   width:100% は必須。flexの子に margin:0 auto があると stretch が効かず、
   中身の幅まで縮んでしまう（タイルが1列になる） */
main.wrap { flex: 1 0 auto; width: 100%; }
.ft { flex: none; width: 100%; }

img { max-width: 100%; height: auto; }

/* リンク。下線は薄い紺で控えめに引き、触るとオレンジの下線が太くなる。
   文字色をオレンジにすると白地で 2.45:1 になり読めないので、印は下線に持たせる */
a {
  color: #1D2D50;
  text-decoration: underline;
  text-decoration-color: rgba(29, 45, 80, .35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .12s ease-out, text-decoration-color .12s ease-out;
}
a:hover { color: #1D2D50; text-decoration-color: #F48B21; text-decoration-thickness: 2px; }

/* 見出しの段は4つだけ：画面の題 38 ／ 節（カードの束）24 ／ カードの見出し 20 ／ カードの中の小見出し 16。
   各アプリの見出し（.talent-h2 .ex-h2 .rc-h2 など）もこの段に合わせてある */
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.27; text-wrap: balance; }
h1 { font-size: 38px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

p { margin: 0 0 16px; }
p.lead { line-height: 1.75; max-width: 40em; }
/* 補足文の共通定義。.field の中だけでなく、どの画面でも同じ大きさにする（アプリごとに本文20pxを継承していた） */
.hint { font-size: 16px; color: #666666; line-height: 1.75; max-width: 40em; }

/* 原則フルワイド（ボスの指定）。画面の幅いっぱいまで使い、左右の余白だけ残す。
   1行が長くなりすぎる読み物や入力欄は、そこだけ .form-narrow と下の入力欄の上限で抑える。 */
.wrap { max-width: none; margin: 0 auto; padding: 0 24px; }

/* ---------- キーボードで触ったときの輪 ----------
   マウスでは出ず、Tab で来たときだけ出る。オレンジの輪は「今ここ」の印。 */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid #F48B21;
  outline-offset: 2px;
}
/* 紺の面（サイドバー・通知）の上では白い輪。
   紺のボタン（.btn）は白いカードの上に置かれるので、白い輪だと見えない。オレンジのまま */
.side a:focus-visible, .side button:focus-visible, .toast button:focus-visible {
  outline-color: #ffffff;
}
.btn-sub:focus-visible, .btn-danger:focus-visible, .btn-accent:focus-visible { outline-color: #F48B21; }

/* ---------- 左のサイドメニュー ---------- */
/* 画面の左端に固定し、ロゴ・新着・メニュー・名前・ログアウトをまとめて持つ。
   本文（.side-main）はその幅ぶん右に寄せる。
   狭い画面では上の帯に畳み、メニューは押したときだけ下に開く（モバイルの節）。 */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #ffffff; color: #1D2D50; padding: 12px 16px;
  border-radius: 0 0 8px 0; font-size: 16px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

.side {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: 240px;
  display: flex; flex-direction: column;
  background: #1D2D50;
  padding-top:  env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

/* 上の段：ロゴと新着。狭い画面ではここだけが常に見える帯になる */
.side-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 24px 16px 8px 24px; }
.side-logo { display: flex; align-items: center; min-height: 44px; line-height: 0; flex: 1 1 auto; min-width: 0; }   /* 押せる高さは 44px（狭い画面の帯でロゴが 29px しかなかった） */
.side-logo img { display: block; width: 150px; max-width: 100%; height: auto; }

/* 開閉ボタン。広い画面では出さない */
.side-toggle {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: background-color .12s ease-out, border-color .12s ease-out;
}
.side-toggle:hover { background: rgba(255, 255, 255, .12); border-color: #ffffff; }
.side-toggle svg { display: block; width: 22px; height: 22px; margin: 0 auto; }
.side-toggle .ico-close { display: none; }
.side-toggle[aria-expanded="true"] .ico-open { display: none; }
.side-toggle[aria-expanded="true"] .ico-close { display: block; }

/* メニューと名前。広い画面では縦に並び、メニューが増えたときはメニューだけがスクロールする */
.side-drawer { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.side-nav { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 8px 16px; }
.side-nav a {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 12px; border-radius: 8px;
  color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 400;
  transition: background-color .12s ease-out, color .12s ease-out;
}
.side-nav a:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }
.side-nav a.on { background: #ffffff; color: #1D2D50; font-weight: 700; }   /* 現在地は面で示す */
.side-ico { flex: none; width: 20px; height: 20px; opacity: .8; transition: opacity .12s ease-out; }
.side-ico svg { display: block; width: 20px; height: 20px; }
.side-nav a:hover .side-ico, .side-nav a.on .side-ico { opacity: 1; }
.side-nav a .side-label { flex: 1 1 auto; min-width: 0; }
.side-nav a.ext .ext-ico { flex: none; opacity: .7; }
.side-nav a.ext:hover .ext-ico { opacity: 1; }

.side-me {
  flex: none; display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-top: 1px solid rgba(255, 255, 255, .2);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.side-user { display: flex; align-items: center; gap: 8px; min-height: 32px; min-width: 0; }
/* サイドバーの自分のアイコン。濃紺の上に置くので、頭文字の丸だけ白抜きにする */
.side-user .ava { border: 1px solid rgba(255, 255, 255, .5); }
.side-user .ava-txt { background: #ffffff; color: #1D2D50; }
.side-name { color: #ffffff; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-out { margin: 0; }
.side-out button {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 8px;
  padding: 8px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color .12s ease-out, border-color .12s ease-out;
}
.side-out button:hover { border-color: #ffffff; background: rgba(255, 255, 255, .12); }

/* 本文側。フッターを画面の下に置くため、この中で縦に伸ばす */
.side-main { margin-left: 240px; display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- 人のアイコン ----------
 * 写真は加工せず原本を持つ。丸の中へまるごと収め（contain）、
 * 見せたい場所を中心に寄せて拡大することで、全身のイラストからも顔だけを出す。
 * 寄せと拡大は人ごとに違うので app.js が data- 属性から当てる。
 * 当たらなくても「画像全体が丸に収まった状態」で普通に見える。
 */
.ava {
  position: relative;
  display: inline-block;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  line-height: 0;
  vertical-align: middle;
}
.ava img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.ava-txt {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #1D2D50;
  color: #ffffff;
  font-weight: 700;
  line-height: 1;
}
.ava-sm { width: 28px; height: 28px; }
.ava-sm .ava-txt { font-size: 14px; }
.ava-md { width: 40px; height: 40px; }
.ava-md .ava-txt { font-size: 16px; }
.ava-lg { width: 96px; height: 96px; }
.ava-lg .ava-txt { font-size: 40px; }

/* 画面には出さず、読み上げにだけ渡す文字（外部リンクの「別のタブで開きます」など）。
   top/left を 0 にしておく。無いと、横に流す表の中（在籍のチェックなど）に置いたとき
   元の位置（表の右端）に 1px の箱が残り、狭い画面で文書全体が横にはみ出す */
.sr-only {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 本文 ---------- */

main.wrap { padding-top: 40px; padding-bottom: 64px; }

.page-head { margin-bottom: 40px; }
.page-head h1 { font-size: 38px; }
.page-head .sub { color: #666666; font-size: 16px; margin-top: 8px; line-height: 1.75; max-width: 40em; }

/* ---------- カード ---------- */

.card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  padding: 24px;
}

/* ---------- ダッシュボードのタイル ---------- */
/* アイコンと名前だけの横並び。説明文は出さない（何のアプリかは名前で足りる） */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  text-decoration: none;
  color: #000000;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  padding: 16px 24px;
  transition: box-shadow .12s ease-out, border-color .12s ease-out;
}
.tile:hover { border-color: #1D2D50; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); color: #000000; }
.tile:has(.tile-badge) { padding-right: 72px; }   /* 未読の数と名前が重ならないよう右を空ける */

.tile-ico { flex: 0 0 auto; display: block; width: 32px; height: 32px; color: #1D2D50; }
.tile-ico svg { display: block; width: 32px; height: 32px; }
.tile-name { display: block; min-width: 0; font-size: 20px; font-weight: 700; line-height: 1.27; }

/* 未読の数。app.js が /api/notice の結果から付ける。オレンジの地に紺の文字（5.55:1） */
.tile-badge {
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: 12px; background: #F48B21; color: #1D2D50;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.empty {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 64px 24px;
  text-align: center;
  color: #666666;
}
.empty strong { display: block; color: #000000; font-size: 20px; margin-bottom: 16px; }
.empty .lead { margin-left: auto; margin-right: auto; }

/* ---------- ログイン画面 ---------- */

body.bare { background: #f7f8f9; }

.gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.gate-card {
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  padding: 40px;
}

.gate-logo { margin-bottom: 40px; }
.gate-logo img { display: block; width: 180px; height: auto; }
.gate-card h1 { font-size: 32px; margin-bottom: 8px; }
.gate-card .gate-note { font-size: 16px; color: #666666; line-height: 1.75; margin-bottom: 24px; }
.gate-foot { margin-top: 24px; font-size: 16px; color: #666666; }

.gate-links { margin-top: 24px; font-size: 16px; }
.gate-links a { color: #666666; }
.gate-links a:hover { color: #1D2D50; }

/* ---------- フォーム ---------- */

.field { margin-bottom: 24px; }

.field label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="search"],
.field input[type="number"],
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="time"],
.field input[type="month"],
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: #000000;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 12px 16px;
  min-height: 48px;
  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #666666; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid #1D2D50;
  outline-offset: -1px;
  border-color: #1D2D50;
}

.field .hint { font-size: 16px; color: #666666; margin-top: 8px; line-height: 1.75; }
.field .req { color: #9a2a2a; margin-left: 4px; }

/* 日付・時刻の入力欄。iOS Safari は素のままだと値を中央寄せで描き、高さも詰まる。
   ほかの入力欄はすべて左寄せなので、そこだけ揃わず崩れて見える。見た目を合わせる。
   appearance を切ってもカレンダーの出し方は変わらない（タップすると同じピッカーが出る）。 */
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="time"],
.field input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  max-width: 100%;
}

/* 画面はフルワイドでも、入力欄まで横に伸ばすと打ちにくい。
   1つぶんの幅は .form-narrow と同じところで止める（表や図はフルワイドのまま） */
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="search"],
.field input[type="number"],
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="time"],
.field input[type="month"],
.field select,
.field textarea { max-width: 640px; }

/* ボタンの文字は途中で折らない。
   本文は デザイン標準どおり word-break: break-all にしてあるが、それがボタンの中まで
   効くと、幅の狭い場所（表の操作列など）で和文が1文字ずつ縦に積み上がり、
   行の高さが数百pxに伸びてしまう。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 32px;
  min-height: 48px;
  border: 1px solid #1D2D50;
  background: #1D2D50;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease-out, border-color .12s ease-out, color .12s ease-out, box-shadow .12s ease-out;
}
.btn:hover { background: #16223c; border-color: #16223c; color: #ffffff; }
.btn:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2); }
.btn-wide { width: 100%; }

.btn-sub { background: #ffffff; color: #1D2D50; border-color: #e5e5e5; }
.btn-sub:hover { background: #f7f8f9; color: #1D2D50; border-color: #1D2D50; }

/* アクセントは地だけオレンジ。文字は紺（白だと 2.45:1 で読めない） */
.btn-accent { background: #F48B21; border-color: #F48B21; color: #1D2D50; }
.btn-accent:hover { background: #ffa04a; border-color: #ffa04a; color: #1D2D50; }

.btn-danger { background: #ffffff; color: #9a2a2a; border-color: #e5e5e5; }
.btn-danger:hover { background: #fdf3f3; border-color: #9a2a2a; color: #9a2a2a; }

/* 無効は地を薄くして示す。文字は #666666 で読める濃さを保つ */
.btn[disabled], .btn:disabled { background: #f7f8f9; border-color: #e5e5e5; color: #666666; cursor: not-allowed; box-shadow: none; }

/* 表の中や行の端に置く小さいボタン。指で押す端末では 44px を確保する */
.btn-small { min-height: 40px; padding: 4px 12px; font-size: 14px; }
@media (pointer: coarse) {
  .btn-small { min-height: 44px; }
  /* 表の中で、それだけが置かれたリンク（名前など）と、行の見出しの名前のリンクは指で押せる高さにする */
  table.tbl td > a:only-child, table.tbl tbody th > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
  /* ファイルを選ぶ欄（ボタンと名前）も指で押せる高さにする */
  input[type="file"] { min-height: 44px; }
}

.actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* 表の中のボタンは横に並べる。折り返すと、その行だけ高さが2倍になって空きに見える。
   はみ出す分は .tbl-scroll が横スクロールで受ける。 */
table.tbl .actions { flex-wrap: nowrap; gap: 8px; }

/* 月や年を前後に送る。h1 の横に置く小さな対 */
.pager { display: inline-flex; gap: 8px; align-items: center; }
.pager .btn { min-height: 44px; padding: 8px 16px; }
.pager .btn svg { display: block; width: 16px; height: 16px; }

/* ---------- メッセージ ---------- */
/* 成功と情報は app.js が右下のお知らせ（.toast）に移す。エラーだけその場に残る */

.flash {
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.75;
  border: 1px solid #e5e5e5;
  background: #ffffff;
}
.flash-success { border-color: #1D2D50; background: #f4f6fa; }
.flash-error   { border-color: #9a2a2a; background: #fdf3f3; color: #9a2a2a; }
.flash-info    { border-color: #e5e5e5; background: #ffffff; color: #666666; }

/* ---------- お知らせ（右下に出て、数秒で消える） ---------- */

@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.toasts {
  position: fixed;
  left: calc(240px + 24px);
  bottom: 24px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(440px, calc(100vw - 240px - 48px));
  padding: 12px 16px;
  border-radius: 8px;
  background: #1D2D50;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  animation: toast-in .2s cubic-bezier(.2, 0, 0, 1) both;
  pointer-events: auto;
}
.toast.is-error { background: #9a2a2a; }
.toast-msg { flex: 1; min-width: 0; }
.toast-act {
  flex: none;
  border: none;
  background: none;
  color: #F48B21;          /* 紺地の上なので 5.55:1 で読める */
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  min-height: 40px;
  padding: 0 8px;
  border-radius: 8px;
}
.toast.is-error .toast-act { color: #ffffff; text-decoration: underline; }
.toast-x {
  flex: none;
  width: 40px; height: 40px; min-height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: #ffffff;
  cursor: pointer;
  opacity: .7;
  transition: opacity .12s ease-out, background-color .12s ease-out;
}
.toast-x:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.toast-x svg { display: block; width: 16px; height: 16px; margin: 0 auto; }
@media (pointer: coarse) { .toast-act, .toast-x { min-height: 44px; } .toast-x { width: 44px; height: 44px; } }

/* ---------- 確認（消す・差し戻すなど、戻れない操作の前に聞く） ---------- */

@keyframes dlg-in { from { opacity: 0; transform: translateY(8px); } }

.dlg {
  width: min(440px, calc(100vw - 32px));
  margin: auto;
  padding: 24px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #ffffff;
  color: #000000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  animation: dlg-in .2s cubic-bezier(.2, 0, 0, 1) both;
}
.dlg::backdrop { background: rgba(29, 45, 80, .4); }
.dlg-title { font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.dlg-msg { font-size: 16px; line-height: 1.75; margin: 0 0 24px; color: #000000; white-space: pre-line; }
.dlg-act { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---------- 表 ---------- */

.tbl-scroll { overflow-x: auto; }

table.tbl {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  font-size: 16px;
}
table.tbl th, table.tbl td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #eef0f2;      /* 繰り返す行の罫は薄く */
  vertical-align: top;
}
/* 見出しの行は小さく薄く。見出しが本文より目立つと、読む所が分からなくなる */
table.tbl thead th {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #666666;
  background: #f7f8f9;
  white-space: nowrap;
  border-bottom: 1px solid #e5e5e5;
}
/* 行の見出し（氏名など）は本文と同じ大きさ */
table.tbl tbody th { font-size: 16px; font-weight: 700; color: #000000; }
table.tbl tfoot th, table.tbl tfoot td { background: #f7f8f9; font-weight: 700; border-top: 1px solid #e5e5e5; border-bottom: none; }
table.tbl tbody tr:last-child th, table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background-color .12s ease-out; }
table.tbl tbody tr:hover th, table.tbl tbody tr:hover td { background: #f7f8f9; }
table.tbl caption {
  caption-side: top;
  text-align: left;
  padding: 16px 16px 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #666666;
}
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tbl tr.skip td, table.tbl tr.skip th { color: #666666; }
table.tbl td.warn { color: #9a2a2a; font-weight: 700; }

/* 列がとても多い表（メンバー管理など）。左右の詰めだけ狭くして、
   フルワイドの画面に収まるようにする。行の高さと文字の大きさは変えない */
table.tbl.tbl-tight th, table.tbl.tbl-tight td { padding-left: 12px; padding-right: 12px; }

.tag {
  display: inline-block;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  color: #666666;
  white-space: nowrap;
  transition: border-color .12s ease-out, color .12s ease-out;
}
.tag-on  { border-color: #1D2D50; color: #1D2D50; }
.tag-off { border-color: #e5e5e5; color: #666666; }
.tag-new { border-color: #F48B21; color: #1D2D50; }   /* 印は枠。文字はオレンジにしない */

.muted { color: #666666; }
.nowrap { white-space: nowrap; }

/* ---------- アプリの中の共通部品 ----------
 * 勤怠・給与明細・経費が同じ部品を使う。ここに1本だけ持ち、各アプリのCSSには写さない。
 * 名前は先に作った給与明細（ps-）と勤怠（hr-）のものをそのまま残す（HTML を変えないため）。
 */

/* タブの帯（画面の一番上。アプリの中の切り替え） */
.ps-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
/* min-width: 0 が無いと、狭い画面で横に送るとき（下のモバイルの節）に帯が縮まず画面からはみ出す */
.ps-tabs { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.ps-tabs a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  border-radius: 8px; text-decoration: none; color: #1D2D50; font-size: 16px; font-weight: 700;
  transition: background-color .12s ease-out, color .12s ease-out;
}
.ps-tabs a:hover { background: #eef0f2; color: #1D2D50; }
.ps-tabs a.on { background: #1D2D50; color: #ffffff; }
.ps-tabs a.on:hover { background: #16223c; }

/* 狭い画面でタブが横に流れるとき、右端に「続きがある」印を出す（app.js が付け外しする） */
.ps-bar { position: relative; }
.ps-tabs-more {
  display: none;
  position: absolute; right: 0; top: 0;
  width: 44px; height: 44px;
  padding: 0; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 16px;
  background: #ffffff; color: #1D2D50; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.ps-tabs-more svg { display: block; width: 16px; height: 16px; margin: 0 auto; }
.ps-bar.has-more .ps-tabs-more { display: block; }
.ps-bar.has-more .ps-tabs { padding-right: 52px; }
/* 折り返す版（タレントのように項目が多く、隠さずに全部見せたいタブ）。狭い画面でも横に送らず2行に折る */
.ps-tabs.ps-tabs-wrap { flex-wrap: wrap; }

/* 送信中のボタン。二度押しを防ぎ、待っていることを見せる。
   文字を消してその場に回る輪を出す（ボタンの幅は変えない）。動きを減らす設定では止まった輪になる */
@keyframes portal-spin { to { transform: rotate(360deg); } }
.btn.is-busy { position: relative; color: transparent !important; cursor: progress; }
.btn.is-busy::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 2px solid #ffffff; border-top-color: transparent; border-radius: 50%;
  animation: portal-spin .8s linear infinite;
}
.btn-sub.is-busy::after, .btn-danger.is-busy::after, .btn-accent.is-busy::after { border-color: #1D2D50; border-top-color: transparent; }

/* 件数の丸（承認待ち・未読など）。オレンジの地に紺の文字（5.55:1）。
   .pill が共通の名前。.hr-pill .ps-new は先に作った画面のための別名（HTML を変えないため残す） */
.pill, .hr-pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;
  padding: 0 8px; border-radius: 12px; background: #F48B21; color: #1D2D50; font-size: 14px; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ps-new { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 12px; background: #F48B21; color: #1D2D50; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; }

/* 札（案件名・区分・非公開など、行に添える短い印）。枠と文字だけで、地は塗らない。
   .chip-on は選んでいる・当てはまる、.chip-ng は注意（赤は文字でなく枠と地で示す） */
.chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px;
  border: 1px solid #e5e5e5; border-radius: 8px; background: #ffffff; color: #666666;
  font-size: 14px; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle;
}
.chip-on { border-color: #1D2D50; color: #1D2D50; }
.chip-ng { border-color: #9a2a2a; background: #fdf3f3; color: #9a2a2a; }

/* 年や区分の切り替え（枠のあるチップ） */
.ps-year { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 24px; }
.ps-year a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 8px;
  border: 1px solid #e5e5e5; background: #ffffff; color: #1D2D50; text-decoration: none; font-weight: 700; font-size: 16px;
  transition: background-color .12s ease-out, border-color .12s ease-out, color .12s ease-out;
}
.ps-year a:hover { background: #f7f8f9; border-color: #1D2D50; color: #1D2D50; }
.ps-year a.on { background: #1D2D50; border-color: #1D2D50; color: #ffffff; }

/* 見出しと操作を左右に置く行 */
.ps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.ps-hint { font-size: 16px; color: #666666; line-height: 1.75; margin: 8px 0 16px; }
.ps-ok { color: #1D2D50; font-weight: 700; }
.ps-why { display: block; font-size: 14px; color: #666666; font-weight: 400; }

/* 数字の並び（今月の集計・残りなど）。.fig-row が共通の名前。.hr-stat は勤怠のための別名 */
.fig-row, .hr-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px 24px; margin: 0 0 24px; }
.hr-stat-wide { margin-bottom: 40px; }
.fig-row > div, .hr-stat div { margin: 0; min-width: 0; }
.fig-row dt, .hr-stat dt { font-size: 14px; font-weight: 700; color: #666666; margin-bottom: 4px; }
.fig-row dd, .hr-stat dd { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.27; font-variant-numeric: tabular-nums; }
.fig-row dd small, .hr-stat dd small { font-size: 16px; font-weight: 700; margin-left: 4px; }

/* ---------- その画面でいちばん見る数字（.fig）2026-09-15 ----------
 * 打刻の時刻・差引支給額・承認待ちの金額・残額など、数字そのものが画面の仕事のときだけ1つ置く。
 *   <div class="fig"><span class="fig-k">差引支給額</span><span class="fig-v">248,300<span class="fig-u">円</span></span><span class="fig-s">補足</span></div>
 * .fig.hi は紺の面（1画面に1つまで）。
 */
.fig { display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; }
.fig-k { font-size: 14px; font-weight: 700; color: #666666; line-height: normal; }
.fig-v { font-size: 48px; font-weight: 700; line-height: 1.1; color: #1D2D50; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.fig-u { font-size: 20px; font-weight: 700; margin-left: 4px; letter-spacing: 0; }
.fig-v.fig-none { color: #666666; font-weight: 400; }   /* まだ値が無い（時刻の形だけ出す） */
.fig-s { font-size: 16px; color: #666666; line-height: 1.5; }
.fig.hi { padding: 16px 24px; border-radius: 12px; background: #1D2D50; }
.fig.hi .fig-k, .fig.hi .fig-s { color: rgba(255, 255, 255, .8); }
.fig.hi .fig-v { color: #ffffff; }
/* 見出しの横に置くとき（.ps-head の右） */
.ps-head > .fig { align-items: flex-end; text-align: right; }

/* ---------- 進み具合（申請→承認→支払など、順番のある段）---------- */
.steps4 { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; padding: 0; list-style: none; }
.steps4 li {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px;
  border-radius: 8px; background: #f7f8f9; color: #666666; font-size: 16px; font-weight: 700;
}
.steps4 li.on { background: #1D2D50; color: #ffffff; }
.steps4 li.done { background: #eef0f2; color: #1D2D50; }
.steps4 a { color: inherit; text-decoration: none; }
/* 段を押して移るときは、リンクを段いっぱいに広げて 44px を確保する。日時などの添え書きは細く */
.steps4 > li:has(> a) { padding: 0; }
.steps4 > li > a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 44px; padding: 8px 16px; border-radius: 8px; }
.steps4 time { font-weight: 400; }

/* ---------- 下線のタブ（ひとつの画面の中の表示の切り替え）----------
   画面の上の帯（.ps-tabs）とは役目が違う。同じ画面の見せ方を変えるときに使う */
.tabs-line { display: flex; gap: 4px; min-width: 0; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid #e5e5e5; }   /* overflow-y を切らないと、下線の -1px の分だけ縦に 1px 流れてスクロールバーが出る */
.tabs-line a {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  color: #666666; text-decoration: none; font-size: 16px; font-weight: 700;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s ease-out, border-color .12s ease-out;
}
.tabs-line a:hover { color: #1D2D50; }
.tabs-line a.on { color: #1D2D50; border-bottom-color: #1D2D50; }

/* ---------- カードの見出しと、カードの中の「まだありません」 ---------- */
.card-title { font-size: 20px; font-weight: 700; line-height: 1.27; margin: 0 0 16px; }
/* 表を入れる余白0のカード（.card-flush）では、見出しと空の表示にだけカードと同じ余白を持たせる */
.card-flush > .card-title { padding: 24px 24px 0; }
.card-flush > .empty-inline, .card-flush > .ps-hint { margin: 0; padding: 0 24px 24px; }
/* 承認の1件の右に置く金額（.hr-appr の中の .fig）は右に寄せる */
.hr-appr > .fig { align-items: flex-end; text-align: right; }
.empty-inline { margin: 0; padding: 24px 0; font-size: 16px; line-height: 1.75; color: #666666; }
.empty-inline strong { display: block; color: #000000; margin-bottom: 4px; }
.empty-inline .btn { margin-top: 16px; }
td.empty-cell { padding: 24px 16px; color: #666666; text-align: center; }

/* ---------- 読み込み中の形（中身が来るまで、来る形の灰色の帯を置く）----------
   グラデーションは使わない。濃さを行き来させるだけ。動きを減らす設定では止める */
@keyframes portal-pulse { 50% { opacity: .5; } }
.skeleton { display: grid; gap: 16px; padding: 8px 0; }
.skeleton span { display: block; height: 16px; border-radius: 4px; background: #eef0f2; animation: portal-pulse 1.2s ease-in-out infinite; }
.skeleton span:nth-child(1) { width: 60%; height: 24px; }
.skeleton span:nth-child(2) { width: 90%; }
.skeleton span:nth-child(3) { width: 75%; }
.skeleton span:nth-child(4) { width: 40%; }

/* ラベルと値の並び（申請の詳細など） */
.hr-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; margin: 0; }
.hr-detail div { margin: 0; }
.hr-detail dt { font-size: 14px; font-weight: 700; color: #666666; margin-bottom: 4px; }
.hr-detail dd { margin: 0; font-size: 16px; line-height: 1.5; }

.hr-warn { padding: 16px 24px; border: 1px solid #9a2a2a; border-radius: 12px; background: #fdf3f3; color: #9a2a2a; font-size: 16px; line-height: 1.75; margin-bottom: 24px; }
.hr-warn a { color: #9a2a2a; }

/* 申請の状態 */
.hr-status { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 14px; font-weight: 700; white-space: nowrap; background: #f7f8f9; color: #666666; }
.hr-status-pending_manager, .hr-status-pending_final { background: #F48B21; color: #1D2D50; }
.hr-status-approved { background: #1D2D50; color: #ffffff; }
.hr-status-rejected { background: #fdf3f3; color: #9a2a2a; }
.hr-status-canceled { background: #f7f8f9; color: #666666; }

/* 承認の1件 */
.hr-appr { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.hr-appr h3 { font-size: 20px; margin-bottom: 8px; }
.hr-appr-day { margin: 0 0 8px; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hr-appr-reason { margin: 0 0 8px; font-size: 16px; line-height: 1.75; }
.hr-appr-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.hr-appr-act input[type="text"] {
  font-family: inherit; font-size: 16px; color: #000000; background: #ffffff;
  border: 1px solid #e5e5e5; border-radius: 8px; padding: 8px 12px; min-height: 44px; width: 220px; max-width: 100%;
  transition: border-color .12s ease-out;
}
.hr-appr-act input[type="text"]:focus { outline: 2px solid #1D2D50; outline-offset: -1px; border-color: #1D2D50; }

/* 横に並べる入力（フォームの1行・表の中の入力） */
.ps-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; }
.ps-form-row .field { margin-bottom: 16px; }
.ps-inline select, .ps-inline input[type="text"], .ps-inline input[type="date"], .ps-inline input[type="time"], .ps-inline input[type="number"] {
  font-family: inherit; font-size: 16px; color: #000000; background: #ffffff;
  border: 1px solid #e5e5e5; border-radius: 8px; padding: 8px 12px; min-height: 44px; max-width: 100%;
  transition: border-color .12s ease-out;
}
.ps-inline select:focus, .ps-inline input:focus { outline: 2px solid #1D2D50; outline-offset: -1px; border-color: #1D2D50; }
.ps-inline input.w-num { width: 120px; }
.ps-file input[type="file"] { display: block; font-size: 16px; padding: 12px 0; font-family: inherit; }
.hr-weekdays { display: flex; gap: 16px; flex-wrap: wrap; }
.hr-weekdays .check { margin-bottom: 0; }

/* 社員一覧は列が多い。氏名がつぶれないよう幅を持たせ、あふれた分は横に流す */
.hr-emp-tbl th[scope="row"] { min-width: 180px; }
.hr-emp-tbl td { white-space: nowrap; }

/* 社員一覧の「その人の所定」（始業〜終業・1日の所定分） */
.hr-std { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.hr-std input[type="time"] { width: 110px; }
.hr-std .hr-std-min { width: 80px; }
.hr-std-sep, .hr-std-unit { color: #666666; }
ul.ps-hint { padding-left: 24px; }

/* 時短社員・パートの休憩（分）。退勤ボタンの前と、勤怠表の各日 */
.hr-break { flex-basis: 100%; margin-bottom: 8px; }
.hr-break input[type="number"] { width: 120px; }
.hr-break-form { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.hr-break-form input[type="number"] { width: 88px; text-align: right; }
.hr-month td.hr-break-cell { padding-top: 4px; padding-bottom: 4px; }
ul.ps-hint li + li { margin-top: 4px; }

/* ---------- フッター ---------- */

.ft { border-top: 1px solid #e5e5e5; background: #ffffff; }
.ft-in {
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 16px;
  color: #666666;
}
.ft-note { color: #666666; }

/* ---------- タブレット ---------- */

@media (max-width: 1024px) {
  .side { width: 200px; }
  .side-top { padding: 24px 12px 8px 16px; }
  .side-logo img { width: 130px; }
  .side-nav { padding: 8px 12px; }
  .side-main { margin-left: 200px; }
  .toasts { left: calc(200px + 24px); }
  .toast { max-width: min(440px, calc(100vw - 200px - 48px)); }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ---------- モバイル ---------- */

@media (max-width: 767px) {
  body { font-size: 17px; }

  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }

  .page-head h1 { font-size: 32px; }
  .fig-v { font-size: 40px; }
  .ps-head > .fig { align-items: flex-start; text-align: left; }
  .hr-appr > .fig { align-items: flex-start; text-align: left; }
  .card-flush > .card-title { padding: 16px 16px 0; }
  .card-flush > .empty-inline, .card-flush > .ps-hint { padding: 0 16px 16px; }

  /* 狭い画面では縦のサイドバーをやめ、上の帯にする。
     帯にはロゴ・新着・開閉ボタンだけを置き、メニューと名前は押したときに下へ開く */
  .side {
    position: relative; inset: auto; width: auto; z-index: 40;
    display: block;
    padding: 0;
  }
  .side-top {
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    gap: 8px;
  }
  .side-logo img { width: 120px; }
  .side-toggle { display: block; }

  .side-drawer {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 45;
    background: #1D2D50;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
  .side.is-open .side-drawer { display: flex; flex-direction: column; }
  .side-nav { padding: 8px 16px; overflow: visible; }
  .side-me { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .side-main { margin-left: 0; min-height: 0; }

  /* 新着の一覧は帯の下に画面幅いっぱい */
  .side .hd-notice { left: 16px; right: 16px; width: auto; max-width: none; }

  .wrap { padding: 0 16px; }
  main.wrap { padding-top: 24px; padding-bottom: 40px; }

  .tiles { grid-template-columns: 1fr; gap: 16px; }
  .gate-card { padding: 24px; }
  .card { padding: 16px; }

  table.tbl th, table.tbl td { padding: 12px; }

  /* アプリの中のタブは1行に並べ、はみ出す分は横に送る（2行に折り返すと本文が下がる） */
  .ps-bar { margin-bottom: 24px; }
  .ps-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; max-width: 100%; }
  .ps-tabs a { flex: none; }
  .ps-tabs.ps-tabs-wrap { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
  .page-head { margin-bottom: 24px; }

  .toasts { left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
  .pager .btn .pager-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
}

/* ==========================================================================
   ホーム画面アプリ（PWA）まわり
   ========================================================================== */

/* iPhone のノッチとホームバーを避ける。
   ステータスバーを black-translucent にしているので、サイドメニュー自身に余白を持たせる
   （.side の padding-top / padding-left。モバイルの帯も同じ考え方） */
.wrap {
  padding-left:  max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

.ft-in { padding-bottom: max(24px, env(safe-area-inset-bottom)); }

.gate {
  padding-top:    max(40px, env(safe-area-inset-top));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* 未読件数。押すと、どのアプリに何件あるかの一覧（.hd-notice）が開く。
   ロゴの横（上の段）にあるので、一覧は下へ開く */
.hd-notice-wrap { position: relative; display: flex; align-items: center; flex: none; min-height: 44px; }
.hd-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 14px;
  background: #F48B21;
  color: #1D2D50;            /* オレンジの地に紺（5.55:1）。白だと 2.45:1 で読めない */
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s ease-out, color .12s ease-out;
}
/* 見た目は 28px の丸のまま、押せる範囲は 44px にする */
.hd-badge::before { content: ''; position: absolute; inset: -8px; border-radius: 22px; }
.hd-badge:hover, .hd-badge[aria-expanded="true"] { background: #ffffff; color: #1D2D50; }
.hd-notice {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  width: 360px; max-width: calc(100vw - 32px);
  background: #ffffff; border: 1px solid #e5e5e5; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  color: #000000; font-size: 16px; text-align: left;
  animation: dlg-in .2s cubic-bezier(.2, 0, 0, 1) both;
}
/* サイドバーの中では右端が画面の外に出るので、左に寄せて開く */
.side .hd-notice { right: auto; left: 0; }
.hd-notice-title { margin: 0; padding: 12px 16px 8px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #666666; border-bottom: 1px solid #e5e5e5; }
.hd-notice-item { display: block; padding: 12px 16px; text-decoration: none; color: #000000; border-bottom: 1px solid #eef0f2; transition: background-color .12s ease-out; }
.hd-notice-item:last-child { border-bottom: none; border-radius: 0 0 12px 12px; }
.hd-notice-item:hover { background: #f7f8f9; color: #000000; }
.hd-notice-item .app { display: inline-block; font-weight: 700; color: #1D2D50; margin-right: 8px; }
.hd-notice-item .cnt { display: inline-block; font-weight: 700; font-variant-numeric: tabular-nums; }
.hd-notice-item .body { display: block; margin-top: 4px; font-size: 14px; color: #666666; line-height: 1.5; }
.hd-notice-empty { margin: 0; padding: 16px; font-size: 16px; color: #666666; }

/* チェックボックス（ログイン状態を保持する など） */
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  min-height: 44px;
  font-size: 16px;
  cursor: pointer;
}
.check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: #1D2D50;
  flex: none;
  cursor: pointer;
}

/* 通知の設定 */
.notify-box { margin-top: 40px; }
.notify-box h3 { font-size: 20px; margin-bottom: 8px; }
.notify-box .notify-state {
  display: block;
  font-size: 16px;
  color: #666666;
  line-height: 1.75;
  margin-bottom: 16px;
}
.notify-box .steps {
  margin: 16px 0 0;
  padding-left: 24px;
  font-size: 16px;
  color: #666666;
  line-height: 1.75;
}
.notify-box .steps li { margin-bottom: 8px; }
/* スマートフォンで使う手順は、開いたり閉じたりできる（閉じたことは端末に覚えておく。app.js） */
.notify-guide summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
}
.notify-guide summary::-webkit-details-marker { display: none; }
.notify-guide summary h3 { margin: 0; }
.notify-guide summary::after {
  content: ""; width: 8px; height: 8px; margin-left: 8px; flex: none;
  border-right: 2px solid #1D2D50; border-bottom: 2px solid #1D2D50; transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease-out;
}
.notify-guide[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.notify-guide[open] > summary { margin-bottom: 8px; }
/* ホーム画面から開いているなら、追加の手順はもう要らない */
@media (display-mode: standalone) { .notify-guide, .notify-guide + .rule { display: none; } }

@media (max-width: 767px) {
  .wrap {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* ==========================================================================
   小さな用途別クラス
   CSP が style-src 'self' なので、HTML に style="" を書いても効かない。
   その場しのぎで書いていた分をここに集めた。
   ========================================================================== */

.card-flush     { padding: 0; }                 /* 表を入れるカード */
.card-flush .tbl-scroll { border-radius: 12px; }
.card-gap       { margin-bottom: 24px; }
.card-top-gap   { margin-top: 24px; }
.form-narrow    { max-width: 640px; }
.tabs           { margin-bottom: 40px; }
.mb-0           { margin-bottom: 0; }
.mb-16          { margin-bottom: 16px; }
.detail-line    { font-size: 16px; color: #666666; }
.summary-line   { font-size: 16px; margin-top: 4px; }
.rule           { border: none; border-top: 1px solid #e5e5e5; margin: 24px 0; }

/* 起動に失敗したときの最終手段の画面 */
.fatal          { padding: 64px 24px; text-align: center; line-height: 1.75; }

/* 英単語やURLが途中で切れないようにする。
   本文は デザイン標準どおり word-break: break-all（和文の折り返しのため）だが、
   そのままだと「Asana」が「Asa / na」のように割れてしまう。
   リンクとボタンだけ、単語の切れ目で折り返す形に戻す。 */
a, .btn, .tag, code, .tk-tag {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ---------- 動きを減らす設定の人には動かさない ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 一覧の並び替え・絞り込み（2026-09-11。全アプリ共通） ---------- */

/* 並び替えできる見出し。th 全体が押せる。押している列は濃く、向きの三角が出る */
table.tbl thead th.th-sort { padding: 0; }
table.tbl thead th.th-sort a {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; min-height: 44px;
  color: #666666; text-decoration: none; white-space: nowrap;
  transition: background-color .12s ease-out, color .12s ease-out;
}
table.tbl.tbl-tight thead th.th-sort a { padding-left: 12px; padding-right: 12px; }
table.tbl thead th.th-sort.num a { justify-content: flex-end; }
table.tbl thead th.th-sort a:hover { color: #1D2D50; background: #eef0f2; }
table.tbl thead th.th-sort.is-on a { color: #1D2D50; }
.th-sort-i { position: relative; display: inline-block; width: 10px; height: 14px; opacity: .35; flex: none; }
.th-sort-i::before, .th-sort-i::after {
  content: ""; position: absolute; left: 0; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
}
.th-sort-i::before { top: 0; border-bottom: 5px solid currentColor; }
.th-sort-i::after { bottom: 0; border-top: 5px solid currentColor; }
.th-sort.is-on .th-sort-i { opacity: 1; }
.th-sort.is-asc .th-sort-i::after { display: none; }
.th-sort.is-desc .th-sort-i::before { display: none; }
.th-sort.is-asc .th-sort-i::before { top: 4px; }
.th-sort.is-desc .th-sort-i::after { bottom: 4px; }

/* 絞り込みの帯（全アプリで使う）。操作の置き場なので、カードのように持ち上げない（影を付けない） */
.ps-filter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  margin-bottom: 24px; padding: 16px 24px 24px;
  background: #ffffff; border: 1px solid #e5e5e5; border-radius: 12px;
}
.ps-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ps-f-wide { flex: 1 1 240px; }
.ps-f label { font-size: 16px; font-weight: 700; color: #666666; }
.ps-f input, .ps-f select {
  width: 100%; font-family: inherit; font-size: 16px; color: #000000; background: #ffffff;
  border: 1px solid #e5e5e5; border-radius: 8px; padding: 8px 12px; min-height: 48px;
  transition: border-color .12s ease-out;
}
.ps-f input[type="date"],
.ps-f input[type="datetime-local"],
.ps-f input[type="time"],
.ps-f input[type="month"] { -webkit-appearance: none; appearance: none; text-align: left; max-width: 100%; }
.ps-f input:hover, .ps-f select:hover { border-color: #666666; }
.ps-f input:focus, .ps-f select:focus { outline: 2px solid #1D2D50; outline-offset: -1px; border-color: #1D2D50; }
.ps-f select { min-width: 160px; }
.ps-f input[type="date"], .ps-f input[type="month"] { min-width: 152px; }
.ps-f-go { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.ps-f-go .btn { min-height: 48px; padding: 12px 24px; }
.ps-f-clear { font-size: 16px; color: #1D2D50; white-space: nowrap; }
.ps-count { margin: 0 0 8px; font-size: 16px; color: #666666; }
.ps-count b { color: #000000; font-weight: 700; }
@media (max-width: 767px) {
  .ps-filter { padding: 16px; gap: 8px 16px; }
  .ps-f { flex: 1 1 100%; }
  .ps-f-go { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ---------- 2026-09-11 見た目の調整（全アプリ） ---------- */
/* カードの直後にカードが来るのに card-gap が無い所（タレントの周波数・カルテなど）は、間を 24px 空ける。
   main の直下だけ。グリッドの中で横に並ぶカードには効かない */
main.wrap > .card:not(.card-gap) + .card { margin-top: 24px; }

/* ---------- 使い方（マニュアル）・全アプリ共通 ----------
   経費・勤怠・福利厚生・採用の「使い方」が使う（採用の .rc-man-* は 2026-09-15 にここへ寄せた）。 */
.man-toc { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.man-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; font-size: 16px; font-weight: 700; }
.man-toc a:hover { background: #f7f8f9; }
.man p { line-height: 1.75; max-width: 40em; }
.man h2 { font-size: 24px; font-weight: 700; margin: 0 0 16px; }
.man h3 { font-size: 20px; font-weight: 700; margin: 24px 0 8px; }
.man > :last-child { margin-bottom: 0; }

/* 全体の流れ。番号つきの札を並べる */
.man-flow { counter-reset: flow; list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.man-flow li { counter-increment: flow; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 16px 56px; position: relative; border: 1px solid #e5e5e5; border-radius: 12px; background: #ffffff; }
.man-flow li::before { content: counter(flow); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: #1D2D50; color: #ffffff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.man-flow li b { font-size: 16px; }
.man-flow li span { font-size: 14px; color: #666666; line-height: 1.5; }

.man-steps { margin: 0 0 16px; padding-left: 28px; line-height: 1.75; }
.man-steps li { margin-bottom: 8px; }

/* 画面の絵 */
.man-fig { margin: 16px 0 24px; }
.man-fig img { display: block; width: 100%; max-width: 960px; height: auto; border: 1px solid #e5e5e5; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.man-fig figcaption { margin-top: 8px; font-size: 14px; color: #666666; }

.man-dl { margin: 0 0 16px; }
.man-dl div { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid #eef0f2; }
.man-dl div:first-child { border-top: 0; padding-top: 0; }
.man-dl dt { flex: 0 0 200px; font-weight: 700; color: #1D2D50; line-height: 1.5; }
.man-dl dd { margin: 0; flex: 1 1 auto; min-width: 0; line-height: 1.75; }

.man-tbl td { font-size: 16px; line-height: 1.5; }
.man-tbl td:first-child { font-weight: 700; min-width: 10em; }   /* 1列目（言葉）が1文字ずつ折れて表が縦に伸びないように */
.man-note { background: #f7f8f9; border-radius: 12px; padding: 16px; margin: 0 0 16px; line-height: 1.75; }
.man-note b { display: block; margin-bottom: 4px; }

@media (max-width: 767px) {
  .man-dl div { flex-direction: column; gap: 4px; }
  .man-dl dt { flex: none; }
  .man-flow { grid-template-columns: 1fr; }
}

/* ---------- ページ送り（2026-09-15）----------
   前へ・何件目か・次へ。数字は桁をそろえる。押せないほうは面を沈めて示す */
.pgn { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 24px 0; flex-wrap: wrap; }
.pgn-at { font-size: 16px; color: #666666; font-variant-numeric: tabular-nums; }
.pgn .is-off { color: #666666; background: #f7f8f9; border-color: #e5e5e5; cursor: default; pointer-events: none; }