/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESIGN TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* ロール別カラー */
  --corp:      #1A4F7A;  /* 日本企業：紺 */
  --corp-l:    #2E7BB8;
  --corp-bg:   #EBF4FD;
  --corp-mid:  #D0E8F8;
  --agency:    #C05A08;  /* 送出し機関：オレンジ */
  --agency-l:  #E07020;
  --agency-bg: #FEF3E8;
  --cand:      #5C2D8C;  /* 候補者：紫 */
  --cand-l:    #7B4AB5;
  --cand-bg:   #F3EEF9;
  /* ステータス */
  --green:     #186B38;
  --green-l:   #25A05A;
  --green-bg:  #E8F7EE;
  --orange:    #B85C00;
  --orange-bg: #FEF3E5;
  --red:       #B91C1C;
  --gold:      #B45309;
  --gold-bg:   #FEF3C7;
  /* ニュートラル */
  --ink:       #0F172A;
  --ink2:      #334155;
  --ink3:      #64748B;
  --ink4:      #94A3B8;
  --border:    #E2E8F0;
  --border2:   #CBD5E1;
  --bg:        #F1F5F9;
  --bg2:       #F8FAFC;
  --white:     #FFFFFF;
  /* スペーシング・シェイプ */
  --r-sm: 6px;  --r: 10px;  --r-lg: 16px;  --r-xl: 24px;
  --sh:   0 1px 4px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  --sh-lg: 0 4px 12px rgba(0,0,0,0.1), 0 16px 40px rgba(0,0,0,0.1);
  /* PC サイドバー幅 */
  --sb: 220px;
  --hd: 52px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESET & BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-text-size-adjust:100%}
body{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden}
button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit}
input,select{font-family:inherit;font-size:inherit}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT — PC
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.app{min-height:100vh;display:flex;flex-direction:column}

/* PC ヘッダー */
.pc-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--hd);background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:16px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.logo{font-size:17px;font-weight:900;color:var(--corp);letter-spacing:-0.01em}
.logo em{color:var(--agency-l);font-style:normal}
.header-divider{width:1px;height:20px;background:var(--border)}
.header-role-badge{
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;
  letter-spacing:.04em;
}
.header-screen{font-size:13px;color:var(--ink3);flex:1}
.header-back{
  font-size:13px;color:var(--corp-l);font-weight:500;
  display:flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:var(--r-sm);
  transition:background .15s;cursor:pointer;
}
.header-back:hover{background:var(--corp-bg)}
.header-right{display:flex;align-items:center;gap:8px;margin-left:auto}












/* メインコンテンツ */
.main-content{
  margin-top:var(--hd);margin-left:0;
  min-height:calc(100vh - var(--hd));
  padding:24px 28px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCREEN SYSTEM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.screen{display:none;animation:fadeUp .2s ease both}
.screen.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPONENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ページタイトル */
.page-title{font-size:22px;font-weight:900;color:var(--ink);margin-bottom:4px;letter-spacing:-.02em}
.page-sub{font-size:13px;color:var(--ink3);margin-bottom:20px}

/* カード */
.card{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--sh);padding:20px}
.card+.card{margin-top:12px}

/* セクションラベル */
.sec-label{
  font-size:11px;font-weight:700;letter-spacing:.06em;
  color:var(--ink3);text-transform:uppercase;
  padding:10px 0 6px;border-bottom:1px solid var(--border);margin-bottom:12px;
}

/* バッジ */
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:20px;letter-spacing:.03em}
.badge-corp{background:var(--corp-bg);color:var(--corp)}
.badge-agency{background:var(--agency-bg);color:var(--agency)}
.badge-cand{background:var(--cand-bg);color:var(--cand)}
.badge-green{background:var(--green-bg);color:var(--green)}
.badge-orange{background:var(--orange-bg);color:var(--orange)}
.badge-gold{background:var(--gold-bg);color:var(--gold)}
.badge-gray{background:var(--bg);color:var(--ink3);border:1px solid var(--border)}

/* タグ */
.tag{display:inline-flex;font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:4px;line-height:1.4}
.tag-blue{background:var(--corp-bg);color:var(--corp)}
.tag-green{background:var(--green-bg);color:var(--green)}
.tag-yellow{background:var(--gold-bg);color:var(--gold)}
.tag-gray{background:var(--bg);color:var(--ink3);border:1px solid var(--border)}
.tag-purple{background:var(--cand-bg);color:var(--cand)}
.tag-red{background:#FEF2F2;color:var(--red)}

/* ボタン */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 18px;border-radius:var(--r-sm);font-size:13px;font-weight:700;
  transition:all .15s;cursor:pointer;border:none;white-space:nowrap;
}
.btn-primary{background:var(--corp);color:var(--white)}
.btn-primary:hover{background:var(--corp-l)}
.btn-agency{background:var(--agency);color:var(--white)}
.btn-agency:hover{background:var(--agency-l)}
.btn-green{background:var(--green);color:var(--white)}
.btn-green:hover{background:var(--green-l)}
.btn-outline{background:var(--white);color:var(--corp);border:1.5px solid var(--corp)}
.btn-outline:hover{background:var(--corp-bg)}
.btn-outline-agency{background:var(--white);color:var(--agency);border:1.5px solid var(--agency)}
.btn-ghost{background:var(--bg);color:var(--ink2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--bg2);border-color:var(--border2)}
.btn-lg{padding:12px 28px;font-size:15px;border-radius:var(--r)}
.btn-sm{padding:5px 12px;font-size:11px}
.btn-full{width:100%;display:flex}

/* 入力フォーム */
.field-group{margin-bottom:14px}
.field-label{font-size:12px;font-weight:700;color:var(--ink2);margin-bottom:5px;display:flex;align-items:center;gap:4px}
.field-req{color:var(--red);font-size:10px}
.field-input{
  width:100%;padding:9px 12px;
  border:1.5px solid var(--border2);border-radius:var(--r-sm);
  font-size:13px;color:var(--ink);background:var(--white);
  transition:border-color .15s;
}
.field-input:focus{outline:none;border-color:var(--corp)}
.field-input.filled{background:var(--bg2);color:var(--ink)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* 通知ボックス */
.notice{padding:10px 14px;border-radius:var(--r-sm);font-size:12px;line-height:1.7;margin-bottom:10px}
.notice-blue{background:var(--corp-bg);color:var(--corp);border-left:3px solid var(--corp)}
.notice-orange{background:var(--agency-bg);color:var(--agency);border-left:3px solid var(--agency)}
.notice-green{background:var(--green-bg);color:var(--green);border-left:3px solid var(--green)}
.notice-yellow{background:var(--gold-bg);color:var(--gold);border-left:3px solid var(--gold)}

/* チェックボックス行 */
.check-row{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--corp-bg);border:1.5px solid var(--corp-mid);
  border-radius:var(--r);padding:12px 14px;
}
.check-box{
  width:22px;height:22px;background:var(--corp);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);font-size:13px;flex-shrink:0;margin-top:1px;
}
.check-text{font-size:12px;color:var(--corp);font-weight:600;line-height:1.6}

/* プログレスバー */
.progress-wrap{background:var(--border);border-radius:3px;height:5px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width .3s}
.fill-corp{background:var(--corp)}
.fill-green{background:var(--green)}
.fill-cand{background:var(--cand)}

/* 統計カード */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.stat-card{
  background:var(--white);border-radius:var(--r);border:1px solid var(--border);
  padding:16px;text-align:center;
}
.stat-num{font-size:28px;font-weight:900;line-height:1;margin-bottom:4px}
.stat-label{font-size:11px;color:var(--ink3)}
.stat-diff{font-size:11px;margin-top:4px}
.diff-up{color:var(--green)}
.diff-down{color:var(--red)}

/* 候補者カード */
.cand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.cand-card{
  background:var(--white);border-radius:var(--r-lg);border:1.5px solid var(--border);
  box-shadow:var(--sh);padding:16px;cursor:pointer;
  transition:all .2s;position:relative;overflow:hidden;
}
.cand-card:hover{border-color:var(--corp-l);box-shadow:var(--sh-lg);transform:translateY(-2px)}
.review-ribbon{
  position:absolute;top:0;right:0;
  background:var(--green);color:var(--white);
  font-size:10px;font-weight:700;padding:3px 10px 3px 14px;
  clip-path:polygon(8px 0,100% 0,100% 100%,0 100%);
}
.cand-header{display:flex;gap:12px;margin-bottom:10px}
.cand-photo{
  width:52px;height:64px;border-radius:var(--r-sm);
  background:var(--border);display:flex;align-items:center;
  justify-content:center;font-size:26px;flex-shrink:0;
}
.cand-meta{flex:1;min-width:0}
.cand-name{font-size:14px;font-weight:700;margin-bottom:5px}
.cand-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px}
.cand-agency-name{font-size:11px;color:var(--ink4)}
.cand-footer{display:flex;gap:6px;margin-top:10px}

/* 表スタイル */
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{
  background:var(--corp);color:var(--white);
  padding:9px 12px;font-size:11px;font-weight:700;text-align:left;
}
.data-table td{padding:9px 12px;border-bottom:1px solid var(--border)}
.data-table tr:nth-child(even) td{background:var(--bg2)}
.data-table tr:hover td{background:var(--corp-bg);cursor:pointer}

/* 情報行 */
.info-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;
}
.info-key{color:var(--ink3);flex-shrink:0;min-width:120px}
.info-val{color:var(--ink);font-weight:600;text-align:right}

/* プロフィールヒーロー */
.profile-hero{
  display:flex;gap:20px;padding:20px;
  background:var(--white);border-radius:var(--r-lg);
  border:1px solid var(--border);box-shadow:var(--sh);margin-bottom:16px;
}
.profile-photo-lg{
  width:88px;height:110px;border-radius:var(--r);
  background:var(--border);display:flex;align-items:center;
  justify-content:center;font-size:42px;flex-shrink:0;
}
.profile-id{font-size:12px;color:var(--ink4);margin-bottom:4px}
.profile-age{font-size:26px;font-weight:900;line-height:1;margin-bottom:8px}
.sjt-pill{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--cand-bg);color:var(--cand);
  border:1.5px solid #C8A8E8;
  font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;margin-top:6px;
}

/* SJTテーブル */
.sjt-table{width:100%;font-size:12px;border-collapse:collapse}
.sjt-table tr{border-bottom:1px solid var(--border)}
.sjt-table tr:nth-child(even){background:var(--cand-bg)}
.sjt-table td{padding:7px 10px}
.sjt-result{font-weight:700;color:var(--cand);text-align:right;white-space:nowrap}

/* 適応評価 */
.adapt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.adapt-card{background:var(--white);border-radius:var(--r-sm);border:1px solid var(--border);padding:10px;text-align:center}
.lang-btn{padding:5px 10px;border-radius:20px;border:1.5px solid var(--border2);background:var(--bg2);font-size:11px;font-weight:700;cursor:pointer;color:var(--ink2);transition:all .15s}
.lang-btn:hover{border-color:var(--cand);color:var(--cand)}
.lang-btn-active{background:var(--cand)!important;color:var(--white)!important;border-color:var(--cand)!important}
.adapt-label{font-size:11px;color:var(--ink3);margin-bottom:4px}
.adapt-val{font-size:20px;font-weight:900}
.val-high{color:var(--green)}
.val-mid{color:var(--orange)}

/* 送出し機関ヒーロー */
.agency-hero{
  background:linear-gradient(135deg,var(--corp) 0%,#0D2E4A 100%);
  border-radius:var(--r-lg);padding:20px;color:var(--white);margin-bottom:16px;
  position:relative;overflow:hidden;
}
.agency-hero::before{
  content:'';position:absolute;top:-40px;right:-40px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,.05);
}
.premium-bar{
  background:var(--gold);color:var(--white);
  font-size:11px;font-weight:700;padding:5px 14px;
  border-radius:var(--r-sm);display:inline-flex;align-items:center;gap:5px;
  margin-bottom:10px;
}
.agency-name-lg{font-size:22px;font-weight:900;margin-bottom:2px}
.agency-sub{font-size:12px;opacity:.7;margin-bottom:14px}
.kpi-row{display:flex;gap:24px}
.kpi-num{font-size:30px;font-weight:900;line-height:1}
.kpi-label{font-size:11px;opacity:.65}

/* ダッシュボード アクション */
.dash-action{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;transition:all .15s;margin-bottom:8px;
  border-left:4px solid var(--agency);
}
.dash-action:hover{box-shadow:var(--sh);transform:translateX(3px)}
.dash-action-label{font-size:13px;font-weight:700;color:var(--agency)}
.dash-arrow{font-size:18px;color:var(--border2)}

/* 学習モジュール */
.module-item{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  padding:12px 14px;display:flex;align-items:center;gap:12px;
  margin-bottom:6px;cursor:pointer;transition:all .15s;
}
.module-item:hover{border-color:var(--corp-l);box-shadow:var(--sh)}
.mod-icon{
  width:38px;height:38px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.mod-done{background:var(--green-bg)}
.mod-todo{background:var(--bg)}
.mod-title{font-size:13px;font-weight:700;flex:1}
.mod-status{font-size:11px;color:var(--ink3)}
.mod-check{font-size:16px;margin-left:auto}

/* テスト設問 */
.q-card{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--border);padding:20px;margin-bottom:12px}
.q-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.q-num{font-size:11px;color:var(--ink3)}
.q-text{font-size:14px;font-weight:700;color:var(--ink);line-height:1.65;margin-bottom:16px}
.q-options{display:flex;flex-direction:column;gap:8px}
.q-opt{
  background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:10px 14px;display:flex;align-items:flex-start;gap:10px;
  cursor:pointer;transition:all .15s;font-size:13px;
}
.q-opt:hover{border-color:var(--corp);background:var(--corp-bg);color:var(--corp)}
.q-opt.selected{border-color:var(--corp);background:var(--corp);color:var(--white)}
.q-opt-key{
  width:22px;height:22px;border-radius:50%;background:var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;color:var(--ink3);
}
.q-opt.selected .q-opt-key{background:rgba(255,255,255,.25);color:var(--white)}

/* 修了証 */
.cert-hero{
  background:linear-gradient(135deg,var(--green) 0%,#0B3B20 100%);
  border-radius:var(--r-xl);padding:32px;text-align:center;color:var(--white);
  margin-bottom:16px;
}
.cert-icon-lg{font-size:56px;margin-bottom:12px}
.cert-title{font-size:22px;font-weight:900;margin-bottom:8px}
.cert-sub{font-size:13px;opacity:.75;line-height:1.7;margin-bottom:16px}
.cert-id{
  display:inline-block;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);border-radius:var(--r-sm);
  padding:8px 16px;font-size:12px;font-family:monospace;opacity:.85;
}

/* ロール選択 */
.role-screen{
  min-height:100vh;background:linear-gradient(145deg,#0D2440 0%,#1A3A5C 100%);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.role-inner{width:100%;max-width:480px}
.role-logo{font-size:26px;font-weight:900;color:var(--white);text-align:center;margin-bottom:6px}
.role-logo em{color:#FF8533;font-style:normal}
.role-desc{font-size:13px;color:rgba(255,255,255,.5);text-align:center;margin-bottom:32px}
.role-card{
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:18px 20px;cursor:pointer;
  transition:all .2s;display:flex;align-items:center;gap:14px;margin-bottom:10px;
}
.role-card:hover{background:rgba(255,255,255,.14);transform:translateY(-2px);border-color:rgba(255,255,255,.25)}
.role-card-icon{font-size:28px;width:48px;text-align:center;flex-shrink:0}
.role-card-name{font-size:16px;font-weight:700;color:var(--white);margin-bottom:2px}
.role-card-sub{font-size:12px;color:rgba(255,255,255,.5)}
.role-card-arrow{font-size:18px;color:rgba(255,255,255,.3);margin-left:auto}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE (〜767px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:767px){
  .pc-header{display:none}
  
  .main-content{margin:0;padding:0;min-height:100vh}

  .screen{padding-bottom:60px}
  .screen.login-screen{padding:0}

  /* モバイルトップバー */
  .mob-topbar{
    position:sticky;top:0;z-index:50;background:var(--white);
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;padding:10px 14px;gap:10px;min-height:48px;
  }
  .mob-title{font-size:15px;font-weight:700;flex:1}
  .mob-back{font-size:13px;color:var(--corp-l);cursor:pointer;padding:4px 8px;border-radius:var(--r-sm)}

  /* モバイルボトムナビ */
  .mob-navbar{
    position:fixed;bottom:0;left:0;right:0;z-index:50;
    background:var(--white);border-top:1px solid var(--border);
    display:flex;padding:6px 0 8px;
    box-shadow:0 -2px 8px rgba(0,0,0,.07);
  }
  .mob-nav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    font-size:9px;font-weight:600;color:var(--ink4);cursor:pointer;
    transition:color .15s;
  }
  .mob-nav-item.active{color:var(--corp)}
  .mob-nav-item.active-agency{color:var(--agency)}
  .mob-nav-icon{font-size:18px;line-height:1}

  /* モバイルでのカードグリッドは1列 */
  .cand-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .adapt-grid{grid-template-columns:repeat(2,1fr)}
  .field-row{grid-template-columns:1fr}

  /* paddingをモバイル用に調整 */
  .card{padding:14px}
  .agency-hero{border-radius:0}
  .cert-hero{border-radius:var(--r-lg)}
}

@media(min-width:768px){
  .mob-topbar,.mob-navbar{display:none!important}
  .role-screen{margin-left:0!important}
}
.badge-red{background:#FEF2F2;color:var(--red);border:1px solid #FECACA}

</style>
</head>
<body>

<!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     PC ヘッダー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
<header class="pc-header" id="pcHeader">
  <div class="logo">特定技能<em>MATCH</em></div>
  <div class="header-divider"></div>
  <span class="header-role-badge badge-corp" id="hdrBadge">日本企業</span>
  <span class="header-screen" id="hdrScreen">候補者を探す</span>
  <div class="header-right">
    <button class="btn btn-ghost btn-sm" onclick="go('s_login')">← ロール選択</button>
  </div>
</header>