/* 社内アプリポータル。インラインCSSを使わない(厳格なCSPを適用するため) */
:root {
  /* ★2026-09-08 代表指示: 保守業務管理と同じヘッダー色に揃える。
     #19448e は自社サイトのテーマに key-color として定義されている色。 */
  --navy:#19448e; --navy2:#2e58a6; --ice:#CADCFC; --coral:#E8654F;
  --ink:#22293B; --mut:#5A6478; --tint:#EEF3FB;
}
* { box-sizing: border-box; }
body { margin:0; font-family:"Meiryo UI","Segoe UI",sans-serif; color:var(--ink); background:#fff; }

header { background:var(--navy); color:#fff; padding:18px 28px;
         display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
header h1 { font-size:1.15rem; margin:0; font-weight:700; }

/* ★ロゴ（2026-09-08 代表指示）。
   ロゴは濃い青なので、濃紺のヘッダーに直接置くと読めない（実測でコントラスト約2.2:1）。
   ブランドの色を変えずに済むよう、白いプレートに載せる。 */
.brand { display:flex; align-items:center; gap:14px; }
.logo { height:30px; width:auto; display:block; background:#fff;
        padding:6px 10px; border-radius:6px; }
.userbox { font-size:.85rem; color:var(--ice); display:flex; align-items:center; gap:14px; }
.userbox a { color:#fff; }

main { max-width:1080px; margin:0 auto; padding:36px 24px 60px; }
footer { text-align:center; color:var(--mut); font-size:.75rem; padding:24px; }

.lead { color:var(--mut); font-size:.9rem; margin:0 0 24px; }

/* 節の見出し。社内アプリと外部サービスを見分けられるようにする(2026-09-08) */
.sec { font-size:1rem; color:var(--navy); margin:0 0 6px; padding-bottom:8px;
       border-bottom:1px solid var(--tint); }
.tiles + .sec { margin-top:40px; }

/* ログイン画面 */
.login { max-width:460px; margin:60px auto; text-align:center; }
.login .mark { font-size:3rem; line-height:1; margin-bottom:18px; }
.login h2 { margin:0 0 12px; color:var(--navy); }
.login p { color:var(--mut); font-size:.9rem; line-height:1.7; margin:0 0 28px; }
.btn-signin { display:inline-block; background:var(--navy); color:#fff; text-decoration:none;
              padding:14px 30px; border-radius:8px; font-weight:700; font-size:1rem; }
.btn-signin:hover { background:var(--navy2); }
.alert { background:#FDECEA; color:#8A2A1B; border-radius:8px; padding:12px 16px;
         font-size:.85rem; margin:0 0 20px; }

/* タイル */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.tile { text-decoration:none; color:inherit; background:var(--tint); border-radius:12px;
        padding:22px; display:block; border:1px solid transparent; transition:border-color .15s; }
.tile:hover, .tile:focus-visible { border-color:var(--coral); outline:none; }
.tile .icon { font-size:1.9rem; line-height:1; margin-bottom:12px; }
.tile .name { font-weight:700; color:var(--navy); font-size:1.05rem; margin-bottom:6px; }
.tile .desc { color:var(--mut); font-size:.82rem; line-height:1.6; }

.empty { background:var(--tint); border-radius:12px; padding:28px; text-align:center; color:var(--mut); }