/*
  cf/cf_id_portal/portal.css — CF-IDポータル（会員サービス一覧）v0.1
  作成: スパイダー / 2026-06-30 / 手本=MoneyForwardクラウド「サービス一覧」
  色: 青CF #103070 基調・士業色(緑sr/菫紫gyo)・絵文字なし
*/
:root{
  --cf:#103070;          /* CF primary navy */
  --cf2:#3050A0;         /* CF secondary */
  --sr:#2E9E50;          /* 社労士 緑（顧問サービス） */
  --gyo:#5E4B8B;         /* 行政書士 菫紫 */
  --sma:#2FA0A6;         /* スマウェブ ティール */
  --ban:#E0795A;         /* 伴走ロボ 橙 */
  --jb:#2E7DA8;          /* じぶんシリーズ 青 */
  --text:#16243a;
  --text-sub:#5b6472;
  --line:#e4e7ee;
  --bg:#f4f6f9;
  --card:#ffffff;
  --maxw:1040px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.7}
.pf-wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ヘッダー */
.pf-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.pf-nav{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;gap:12px}
.pf-logo{width:40px;height:40px;flex:none;border-radius:9px;background:linear-gradient(135deg,var(--cf),var(--cf2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800;letter-spacing:.5px}
.pf-brand{display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.pf-title{font-size:17px;font-weight:800;color:var(--cf)}
.pf-sub{font-size:11.5px;color:var(--text-sub)}
.pf-navbtns{margin-left:auto;display:flex;gap:10px;align-items:center}
.pf-btn{display:inline-block;text-decoration:none;border-radius:8px;font-weight:700;transition:.12s}
.pf-btn.ghost{background:#fff;color:var(--cf);border:1.5px solid var(--cf)}
.pf-btn.sm{font-size:13.5px;padding:8px 16px}
.pf-btn.ghost:hover{background:var(--cf);color:#fff}

/* ウェルカム */
.pf-welcome{background:linear-gradient(135deg,var(--cf),var(--cf2));color:#fff;padding:30px 0}
.pf-welcome-row{display:flex;align-items:center;gap:18px}
.pf-welcome-key{width:60px;height:60px;flex:none;border-radius:50%;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center}
.pf-welcome-title{margin:0;font-size:22px;font-weight:800;letter-spacing:.3px}
.pf-welcome-lead{margin:4px 0 0;font-size:14.5px;opacity:.95}

/* メイン */
.pf-main{padding:38px 0 56px}
.pf-h2{font-size:20px;font-weight:800;color:var(--cf);margin:38px 0 4px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.pf-h2:first-child{margin-top:0}
.pf-h2-note{font-size:13.5px;color:var(--text-sub);margin:0 0 18px}

/* カードグリッド（MF型・2列） */
.pf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:720px){.pf-grid{grid-template-columns:1fr}}
.pf-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 20px 18px;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 16px;
  box-shadow:0 1px 3px rgba(16,32,64,.05);transition:box-shadow .12s,transform .12s}
.pf-card:hover{box-shadow:0 6px 18px rgba(16,32,64,.10);transform:translateY(-1px)}
.pf-card-ic{grid-row:1/3;width:46px;height:46px;border-radius:10px;flex:none;
  background:var(--ac,var(--cf));color:#fff;font-size:18px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.pf-card-body h3{margin:0 0 4px;font-size:16.5px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px}
.pf-card-body p{margin:0;font-size:13.5px;line-height:1.7;color:var(--text-sub)}
.pf-tag{font-size:10.5px;font-weight:700;color:var(--text-sub);background:var(--bg);border:1px solid var(--line);
  border-radius:4px;padding:1px 7px}
.pf-use{grid-column:2;justify-self:start;margin-top:12px;text-decoration:none;
  background:var(--cf);color:#fff;font-size:13.5px;font-weight:700;border-radius:7px;padding:9px 22px;transition:.12s}
.pf-use:hover{filter:brightness(1.08)}
.pf-use.disabled{background:#eef0f4;color:#9aa3b0;cursor:default;pointer-events:none}
.pf-card.soon{opacity:.92}
.pf-card.soon .pf-card-ic{background:#aeb6c4}

/* 注記 */
.pf-foot-note{margin:28px 0 0;font-size:12.5px;color:var(--text-sub);text-align:center;line-height:1.7}

/* フッター */
.pf-footer{background:var(--cf);color:rgba(255,255,255,.9);padding:28px 22px;text-align:center;font-size:13px}
.pf-footer-nav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.pf-footer-nav a{color:#fff;text-decoration:none;font-size:13px;opacity:.92}
.pf-footer-nav a:hover{text-decoration:underline}
.pf-footer-legal{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:0 0 6px}
.pf-footer-legal a{color:rgba(255,255,255,.8);text-decoration:none;font-size:12px}
.pf-footer-legal a:hover{text-decoration:underline}
.pf-copy{font-size:11.5px;opacity:.7;margin-top:6px}