/* 選手情報管理システム 提案用モック 共通スタイル */
:root{
  --navy:#0E2240;--navy-2:#16315A;--navy-3:#22457A;
  --pitch:#19B36B;--pitch-d:#0F8A51;--pitch-l:#E6F7EE;
  --gold:#E8B547;--gold-l:#FBF2DC;
  --red:#D9534F;--ink:#1C2433;--sub:#667085;--line:#E4E7EC;--bg:#F4F6F9;--card:#FFFFFF;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.en{font-family:"Oswald","Noto Sans JP",sans-serif;letter-spacing:.04em}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;transition:.15s}
.btn:hover{border-color:var(--navy-3)}
.btn.primary{background:var(--pitch);border-color:var(--pitch);color:#fff}
.btn.primary:hover{background:var(--pitch-d)}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--sub)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* badges */
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:700;white-space:nowrap}
.pos{display:inline-flex;align-items:center;justify-content:center;min-width:34px;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:800;color:#fff}
.pos-GK{background:#E8B547}.pos-FIXO{background:#2F6FD6}.pos-ALA{background:#19B36B}.pos-PIVO{background:#D9534F}
.st-1{background:#EEF2FF;color:#3949AB}.st-2{background:#E0F2FE;color:#0369A1}.st-3{background:#FEF3C7;color:#92400E}
.st-4{background:#DCFCE7;color:#166534}.st-5{background:#F3E8FF;color:#6B21A8}.st-6{background:#FCE7F3;color:#9D174D}
.chip{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;margin:0 4px 6px 0}

/* form controls */
.field{margin-bottom:16px}
.field label.lb{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.req{color:#fff;background:var(--red);border-radius:4px;font-size:10px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.opt{color:var(--sub);background:#EEF0F4;border-radius:4px;font-size:10px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.help{font-size:11.5px;color:var(--sub);margin-top:4px}
.inp{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;font-size:15px;background:#fff;outline:none;transition:.15s}
.inp:focus{border-color:var(--pitch);box-shadow:0 0 0 3px rgba(25,179,107,.15)}
.inp.err{border-color:var(--red)}
textarea.inp{min-height:96px;resize:vertical}

/* toast & modal */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal-bg{position:fixed;inset:0;background:rgba(14,34,64,.5);display:none;align-items:center;justify-content:center;z-index:150;padding:16px}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:18px;max-width:560px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-h{padding:18px 22px;border-bottom:1px solid var(--line);font-weight:800;display:flex;align-items:center;justify-content:space-between}
.modal-b{padding:20px 22px}
.modal-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}

/* demo ribbon */
.demo-ribbon{background:linear-gradient(90deg,#8FD3C5,#DBA6A9,#F2EA6E,#989AB6);color:#30354C;text-align:center;font-size:11.5px;font-weight:700;padding:5px 12px}
.demo-ribbon a{font-weight:800}

/* crest (貴社ロゴ差し替え位置) */
.crest{width:34px;height:34px;flex:none}
