/* メディカルマネー 共通ヘッダー ── 全ページ単一ソース（色・フォントは直値で自己完結） */
/* このファイルが唯一のヘッダー定義。全ページ同一の <header class="site-header"> マークアップで使う。 */
.site-header{position:sticky;top:0;z-index:50;background:rgba(253,252,249,.88);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid #ECE6DB}
.site-header .header-inner{max-width:1040px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:16px}
.site-header .brand{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none;color:inherit}
.site-header .brand:hover{text-decoration:none;opacity:.9}
.site-header .brand-mark{width:42px;height:42px;flex-shrink:0;filter:drop-shadow(0 3px 8px rgba(30,111,98,.25))}
.site-header .brand-text{display:flex;flex-direction:column;line-height:1.15}
.site-header .brand-text b{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:17.5px;color:#36423C;letter-spacing:.02em}
.site-header .brand-text small{font-size:11.5px;color:#5E685F;font-weight:500;line-height:1.2}

/* ナビ：アイコン付きピル（キャッチー＆押したくなる演出） */
.site-header .site-nav{margin-left:auto;display:flex;gap:7px;align-items:center}
.site-header .site-nav a{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13px;color:#1E6F62;
  border:1.5px solid #D6ECE5;background:#fff;padding:7px 14px 7px 12px;border-radius:999px;
  white-space:nowrap;text-decoration:none;box-shadow:0 1px 2px rgba(40,80,70,.06);
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease,color .14s ease;
}
.site-header .site-nav a .nv-i{width:17px;height:17px;flex-shrink:0;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.site-header .site-nav a:hover{background:#E8F4F0;border-color:#2B9686;color:#1E6F62;transform:translateY(-1.5px);box-shadow:0 6px 14px rgba(43,150,134,.20)}
.site-header .site-nav a:active{transform:translateY(0);box-shadow:0 2px 6px rgba(43,150,134,.20)}
.site-header .site-nav a.on{background:#2B9686;color:#fff;border-color:#2B9686;box-shadow:0 3px 10px rgba(43,150,134,.32)}
.site-header .site-nav a.on:hover{background:#1E6F62;border-color:#1E6F62;color:#fff}

@media(max-width:560px){
  .site-header .brand-text{display:none}
  .site-header .header-inner{gap:10px;padding:10px 14px}
  .site-header .brand{gap:9px}
  .site-header .site-nav{gap:5px}
  .site-header .site-nav a{padding:6px 11px;font-size:12.5px;gap:0}
  .site-header .site-nav a .nv-i{display:none} /* モバイルは文字のみ（4ピルを収めるため） */
}
@media(max-width:380px){
  .site-header .header-inner{gap:8px;padding:10px 12px}
  .site-header .site-nav{gap:4px}
  .site-header .site-nav a{padding:6px 9px;font-size:12px}
}

/* 職種パーソナライズ・チップバー（persona.js）— ヘッダー一体でsticky */
.persona-bar{background:#EFEBE2;border-bottom:1px solid #E2DDD0;position:sticky;z-index:49}
.persona-note{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:6px;padding:5px 16px 0;font-size:11.5px;font-weight:700;color:#4f5c54;letter-spacing:.01em}
.persona-note svg{flex:0 0 auto;margin-top:-1px}
.persona-note .persona-hint{font-size:10.5px;font-weight:600;color:#94a09a}
.persona-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:5px 16px 7px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.persona-chips{display:flex;gap:6px;flex-wrap:nowrap}
.persona-chip{flex:0 0 auto;font-size:12.5px;line-height:1;padding:6px 11px;border-radius:999px;border:1px solid #D6DDD7;background:#fff;color:#36423C;cursor:pointer;white-space:nowrap;font-weight:700;font-family:inherit;transition:background .12s,border-color .12s,color .12s}
.persona-chip:hover{border-color:#2B9686;color:#1E6F62}
.persona-chip.on{background:#1E6F62;border-color:#1E6F62;color:#fff}
.persona-clear{flex:0 0 auto;font-size:11.5px;color:#8a948c;background:none;border:none;cursor:pointer;white-space:nowrap;padding:4px 2px;text-decoration:underline}
.persona-clear[hidden]{display:none}
@media(max-width:760px){.persona-note{padding:5px 12px 0;font-size:10.5px}.persona-note .persona-hint{display:none}.persona-inner{padding:4px 12px 6px;gap:6px}}
.persona-active .persona-off{display:none!important}

/* 職種別おすすめツール帯（persona.js・ホーム） */
.persona-tools{max-width:1100px;margin:20px auto 0;padding:0 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.persona-tools .pt-label{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:#1E6F62;white-space:nowrap}
.persona-tools .pt-label svg{flex:0 0 auto}
.persona-tools .pt-chips{display:flex;gap:7px;flex-wrap:wrap}
.persona-tools .pt-chip{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;background:#E8F4F0;border:1px solid #CFE6DE;color:#1E6F62;text-decoration:none;white-space:nowrap;transition:background .12s,color .12s}
.persona-tools .pt-chip:hover{background:#1E6F62;color:#fff;border-color:#1E6F62}
@media(max-width:760px){.persona-tools{margin:16px auto 0;padding:0 12px;gap:6px}.persona-tools .pt-label{font-size:11.5px;width:100%}}