/* Club Visionary 会員サイト 共通スタイル
   2026-10-13 白×青に変更（本人の指示。スポンサー資料と同じ 1F5FAD／5BB4E5、赤は時々アクセント）
   変数名は前の配色のまま残している（navy=主の青、gold=水色、accent=赤） */
:root{
  --navy:      #1F5FAD;
  --navy-deep: #17497f;
  --navy-soft: #2f74c4;
  --gold:      #5BB4E5;
  --gold-hi:   #e6f3fc;
  --accent:    #d0342c;
  --bg:        #f4f8fc;
  --card:      #ffffff;
  --line:      #e3e8ef;
  --text:      #1e2733;
  --text-sub:  #63748a;
  --text-dim:  #93a1b3;
  --danger:    #c0392b;
  --ok:        #1e8a5f;
  --sans: "Yu Gothic UI","Yu Gothic","Hiragino Sans","Meiryo",system-ui,sans-serif;
  --serif: "Yu Mincho","Hiragino Mincho ProN",serif;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(27,39,56,.06), 0 6px 20px rgba(27,39,56,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:15px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:#2a5db0}
button{font:inherit}
h1,h2,h3{margin:0}

/* ===== デモ帯 ===== */
#demoBar{
  background:#fff4d6; color:#6b4e00; text-align:center; border-bottom:1px solid #f0dc9c;
  padding:7px 14px; font-size:12.5px; letter-spacing:.03em;
  position:sticky; top:0; z-index:100;
}
#demoBar b{color:#3d2c00}
#demoBar[hidden]{display:none}

/* ===== ログイン画面 ===== */
.auth-wrap{
  min-height:100%; display:grid; place-items:center; padding:40px 20px;
  background:
    radial-gradient(900px 500px at 85% 5%, rgba(91,180,229,.28), transparent 60%),
    radial-gradient(700px 500px at 5% 95%, rgba(31,95,173,.16), transparent 62%),
    #f4f8fc;
}
.auth-card{
  width:min(440px,100%); background:var(--card); border-radius:16px; border:1px solid var(--line);
  padding:clamp(28px,5vw,44px); box-shadow:0 18px 50px rgba(31,95,173,.14);
}
.auth-brand{display:flex; align-items:center; gap:13px; margin-bottom:6px}
.auth-brand .mark{width:42px; height:42px; flex:none}
.auth-brand .nm{font-family:var(--serif); font-size:19px; letter-spacing:.06em; line-height:1.3}
.auth-brand .nm small{display:block; font-family:var(--sans); font-size:9.5px; letter-spacing:.26em; color:var(--text-dim)}
.auth-card h1{font-size:21px; margin:22px 0 6px; letter-spacing:.03em}
.auth-card .desc{color:var(--text-sub); font-size:13.5px; margin:0 0 26px}
.auth-links{margin-top:22px; text-align:center; font-size:13px}
.auth-links a{display:inline-block; margin:0 10px}
.auth-foot{margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--text-dim); text-align:center; line-height:1.9}

/* ===== フォーム部品 ===== */
.field{margin-bottom:18px}
.field label{display:block; font-size:13px; font-weight:700; margin-bottom:7px}
.field .hint{font-size:12px; color:var(--text-sub); margin:0 0 7px; line-height:1.7}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],
input[type=date],input[type=datetime-local],input[type=number],select,textarea{
  width:100%; padding:11px 13px; font:inherit; font-size:14.5px;
  border:1px solid #cfd8e3; border-radius:8px; background:#fff; color:var(--text);
}
textarea{min-height:110px; resize:vertical; line-height:1.8}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--navy-soft); box-shadow:0 0 0 3px rgba(38,55,79,.12)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--danger); background:#fff7f6}
.field .err{color:var(--danger); font-size:12.5px; margin:6px 0 0; display:none}
.field.bad .err{display:block}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:14.5px; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn:disabled{opacity:.55; cursor:progress}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover:not(:disabled){background:var(--navy-soft)}
.btn-gold{background:var(--accent); color:#fff}   /* 申し込みなど、いちばん押してほしいボタン（赤） */
.btn-gold:hover:not(:disabled){background:#b32a23}
.btn-line{background:#fff; border-color:#cfd8e3; color:var(--text)}
.btn-line:hover{border-color:var(--navy-soft)}
.btn-danger{background:#fff; border-color:#e0b4ae; color:var(--danger)}
.btn-block{width:100%}
.btn-sm{padding:7px 14px; font-size:13px; border-radius:7px}

.notice{padding:13px 16px; border-radius:8px; font-size:13.5px; margin-bottom:20px; line-height:1.8}
.notice-err{background:#fdf1ef; border:1px solid #f0cdc6; color:#8f2a1c}
.notice-ok{background:#eef8f3; border:1px solid #bfe3d2; color:#15654a}
.notice-info{background:#eef3fa; border:1px solid #cddcf0; color:#2a4a78}
.notice[hidden]{display:none}

/* ===== アプリ枠 ===== */
.shell{display:flex; min-height:100vh}
.side{
  width:266px; flex:none; background:#fff; color:var(--text); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.side-head{display:flex; align-items:center; gap:12px; padding:20px 18px}
.side-head .mark{width:40px; height:40px; flex:none}
.side-head .nm{font-family:var(--serif); color:var(--text); font-size:16px; line-height:1.35; letter-spacing:.05em}
.side-head .nm small{display:block; font-family:var(--sans); font-size:9px; letter-spacing:.24em; color:var(--text-dim); margin-top:2px}
.side-label{font-size:10.5px; letter-spacing:.24em; color:var(--text-dim); padding:14px 22px 8px}
.side nav{padding:0 12px; display:flex; flex-direction:column; gap:3px; overflow-y:auto; flex:1}
.side nav a{
  display:flex; align-items:center; gap:13px; padding:11px 14px; border-radius:9px;
  color:#3b4a5e; text-decoration:none; font-size:14.5px; font-weight:500;
}
.side nav a[hidden]{display:none}
.side nav a:hover{background:var(--bg); color:var(--navy)}
.side nav a.on{background:var(--gold-hi); color:var(--navy); font-weight:700; box-shadow:inset 3px 0 0 var(--navy)}
.side nav a svg{width:19px; height:19px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7}
.side nav a .badge{
  margin-left:auto; background:var(--accent); color:#fff; font-size:11px; font-weight:800;
  border-radius:999px; padding:1px 8px; min-width:20px; text-align:center;
}
.side-sep{height:1px; background:var(--line); margin:12px 22px}
.side-foot{padding:0 22px 20px; font-size:11.5px; color:var(--text-dim); line-height:1.8}

.main{flex:1; min-width:0; padding:clamp(20px,3.2vw,38px) clamp(16px,3.2vw,40px) 60px}
.page-head{display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:26px}
.page-head h1{font-size:clamp(23px,3.2vw,31px); letter-spacing:.05em; font-family:var(--serif)}
.page-head .sub{color:var(--text-sub); font-size:13.5px; width:100%; margin:0}

/* ===== タブ ===== */
.tabs{display:flex; gap:10px; flex-wrap:wrap}
.tab{
  display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:11px; padding:11px 20px; cursor:pointer; font-weight:700; font-size:15px; color:var(--text);
}
.tab .cnt{background:var(--bg); color:var(--text-sub); border-radius:999px; font-size:12px; padding:1px 9px; font-weight:700}
.tab.on{background:var(--navy); color:#fff; border-color:var(--navy)}
.tab.on .cnt{background:rgba(255,255,255,.16); color:#fff}

/* ===== 検索行 ===== */
.searchbar{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.searchbar .grow{flex:1 1 300px; position:relative}
.searchbar .grow input{padding-left:42px; height:50px; border-radius:11px}
.searchbar .grow svg{position:absolute; left:15px; top:15px; width:19px; height:19px; stroke:var(--text-dim); fill:none; stroke-width:2}
.searchbar select{flex:0 1 220px; height:50px; border-radius:11px}
.searchbar .btn{height:50px; border-radius:11px; padding-inline:28px}
.chiprow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:22px; font-size:13px; color:var(--text-sub)}
.chip{background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 16px; cursor:pointer; font-size:13.5px; color:var(--text-sub)}
.chip.on{background:var(--navy); color:#fff; border-color:var(--navy); font-weight:700}

/* ===== カード・一覧 ===== */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.empty{padding:70px 24px; text-align:center}
.empty .ic{width:82px; height:82px; border-radius:50%; background:var(--bg); display:grid; place-items:center; margin:0 auto 22px}
.empty .ic svg{width:30px; height:30px; stroke:var(--text-dim); fill:none; stroke-width:2}
.empty h3{font-size:19px; margin-bottom:12px}
.empty p{color:var(--text-sub); font-size:13.5px; margin:0 auto; max-width:660px; line-height:2}

.result-count{font-size:13.5px; color:var(--text-sub); margin:0 0 14px}
.result-count b{color:var(--text); font-size:16px}

.mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px}
.mcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit}
.mcard:hover{border-color:var(--navy-soft)}
.mcard .top{display:flex; gap:14px; align-items:flex-start}
.ava{
  width:52px; height:52px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--gold-hi); color:var(--navy); font-family:var(--serif); font-size:19px; letter-spacing:.02em;
}
.ava.staff{background:linear-gradient(135deg,var(--navy),var(--gold)); color:#fff}
.mcard .nm{font-size:16.5px; font-weight:700; letter-spacing:.03em}
.mcard .kana{font-size:11.5px; color:var(--text-dim)}
.mcard .co{font-size:13px; color:var(--text-sub); margin-top:5px; line-height:1.6}
.mcard .meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:13px}
.pill{font-size:11.5px; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:3px 11px; color:var(--text-sub)}
.pill.gold{background:var(--gold-hi); border-color:#b9dcf3; color:var(--navy); font-weight:700}
.mcard .biz{font-size:12.5px; color:var(--text-sub); margin-top:12px; line-height:1.75; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* ===== 一覧（お知らせ・資料・動画・イベント） ===== */
.list{display:flex; flex-direction:column}
.list > *{border-bottom:1px solid var(--line); padding:20px 22px; display:block; text-align:left; width:100%; background:none; border-left:0; border-right:0; border-top:0; font:inherit; color:inherit}
.list > *:last-child{border-bottom:0}
.list a{text-decoration:none; color:inherit}
.list a:hover,.list button:hover{background:#fafbfd; cursor:pointer}
.row-t{font-size:15.5px; font-weight:700; margin-bottom:5px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row-d{font-size:12.5px; color:var(--text-dim)}
.row-x{font-size:13px; color:var(--text-sub); margin-top:7px; line-height:1.75}
.tag{font-size:11px; font-weight:800; border-radius:4px; padding:2px 8px; letter-spacing:.04em}
.tag-new{background:#fdecea; color:#b03024}
.tag-imp{background:var(--navy); color:#fff}
.tag-done{background:#eef8f3; color:var(--ok); border:1px solid #bfe3d2}
.tag-close{background:var(--bg); color:var(--text-dim); border:1px solid var(--line)}

.vgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.vcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.vcard .thumb{aspect-ratio:16/9; background:#000}
.vcard .thumb iframe{width:100%; height:100%; border:0; display:block}
.vcard .body{padding:16px 18px}

/* ===== ホーム ===== */
.hero-card{
  background:linear-gradient(120deg,var(--navy),var(--gold));
  color:#fff; border-radius:16px; padding:clamp(24px,4vw,38px); margin-bottom:24px; position:relative; overflow:hidden;
}
.hero-card::after{content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%)}
.hero-card h2{font-family:var(--serif); font-size:clamp(20px,3vw,27px); letter-spacing:.04em; margin-bottom:8px; position:relative}
.hero-card p{margin:0; color:#eaf5fd; font-size:13.5px; position:relative}
.stat3{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:24px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow)}
.stat .k{font-size:12px; color:var(--text-sub); letter-spacing:.06em}
.stat .v{font-family:var(--serif); font-size:31px; line-height:1.3; margin-top:4px}
.stat .v small{font-size:14px; color:var(--text-sub); margin-left:5px}
.home2{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:18px}
.sec-h{display:flex; align-items:center; margin:0 0 12px}
.sec-h h3{font-size:16px; letter-spacing:.04em}
.sec-h a{margin-left:auto; font-size:12.5px}

/* ===== 会員詳細・各種モーダル ===== */
.modal{position:fixed; inset:0; z-index:200; display:none; padding:20px; overflow-y:auto}
.modal.open{display:block}
.modal::before{content:""; position:fixed; inset:0; background:rgba(15,22,33,.62)}
.modal-box{position:relative; width:min(680px,100%); margin:40px auto; background:#fff; border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.35)}
.modal-head{display:flex; align-items:flex-start; gap:16px; padding:26px 26px 0}
.modal-head h2{font-size:21px; letter-spacing:.04em; font-family:var(--serif)}
.modal-x{margin-left:auto; background:none; border:0; font-size:26px; line-height:1; color:var(--text-dim); cursor:pointer; padding:0 4px}
.modal-body{padding:22px 26px 26px}
dl.kv{display:grid; grid-template-columns:auto 1fr; gap:11px 20px; margin:0; font-size:14px}
dl.kv dt{color:var(--text-sub); font-size:12.5px; white-space:nowrap; padding-top:2px}
dl.kv dd{margin:0; line-height:1.85; word-break:break-word}
.modal-body h4{font-size:13px; color:var(--text-sub); margin:24px 0 8px; letter-spacing:.06em}
.modal-body p.para{margin:0; line-height:2; font-size:14px; white-space:pre-wrap}

table.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
table.tbl th,table.tbl td{border-bottom:1px solid var(--line); padding:11px 12px; text-align:left; vertical-align:top}
table.tbl th{background:var(--bg); font-size:12px; color:var(--text-sub); letter-spacing:.06em; white-space:nowrap}

/* ===== 事務局の管理画面 ===== */
/* 会員ページと見分けがつくよう、左の帯に青い線を入れる */
.side-admin{border-right:3px solid var(--navy)}
.side-admin .side-head .nm small{color:var(--navy)}

.page-head > .btn{margin-left:auto}

/* 一覧の行：左に中身、右にボタン */
.list > .adm-row{display:flex; gap:16px; align-items:flex-start}
.adm-row-main{flex:1; min-width:0}
.adm-row-act{display:flex; gap:8px; align-items:center; flex:none; padding-top:2px}
.adm-row-act select{width:auto; min-width:104px; padding:7px 10px; font-size:13px}

/* 窓の下のボタン列 */
.modal-actions{display:flex; gap:10px; align-items:center; margin-top:26px; padding-top:20px; border-top:1px solid var(--line)}
.modal-actions .grow{flex:1}

.field .must{
  float:right; font-weight:700; font-size:10.5px; letter-spacing:.08em;
  color:#8f2a1c; background:#fdf1ef; border:1px solid #f0cdc6;
  border-radius:4px; padding:1px 7px;
}
.field-check label{display:flex; align-items:center; gap:9px; font-weight:400; font-size:14px; cursor:pointer}
.field-check input[type=checkbox]{width:18px; height:18px; accent-color:var(--navy); margin:0; cursor:pointer}
.field input[type=file]{
  width:100%; padding:11px 13px; font:inherit; font-size:13.5px;
  border:1px dashed #cfd8e3; border-radius:8px; background:#fbfcfe;
}
.field.bad input[type=file]{border-color:var(--danger); background:#fff7f6}

/* ===== ラベル横の小さな印 ===== */
.field .req,.field .opt{
  margin-left:8px; font-weight:700; font-size:10.5px; letter-spacing:.06em;
  border-radius:4px; padding:1px 7px; vertical-align:1px;
}
.field .req{color:#8f2a1c; background:#fdf1ef; border:1px solid #f0cdc6}
.field .opt{color:var(--text-sub); background:var(--bg); border:1px solid var(--line); font-weight:500}

/* ===== スポンサー企業の名簿 ===== */
.plan-sec{margin-bottom:30px}
.plan-h{
  font-size:14px; letter-spacing:.14em; margin:0 0 12px; padding-left:12px;
  border-left:4px solid var(--plan, var(--navy)); color:var(--text);
}
/* プランの色。上のプランほど濃い */
.plan-プラチナ{--plan:#1F5FAD}
.plan-ゴールド{--plan:#2f86c9}
.plan-シルバー{--plan:#5BB4E5}
.plan-ブロンズ{--plan:#93cdee}
.plan-応援   {--plan:#b9c6d6}
.plan-pill{background:#fff; border-color:var(--plan, var(--line)); color:var(--plan, var(--text-sub)); font-weight:700}
.plan-pill.plan-ブロンズ,.plan-pill.plan-応援{color:#4f6c8a}

.sgrid{display:grid; gap:14px}
.sgrid-特大{grid-template-columns:1fr}
.sgrid-大  {grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr))}
.sgrid-中  {grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr))}
.sgrid-小  {grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.scard{
  display:flex; gap:18px; align-items:flex-start; text-align:left; width:100%;
  background:var(--card); border:1px solid var(--line); border-top:3px solid var(--plan, var(--line));
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  cursor:pointer; font:inherit; color:inherit;
}
.scard:hover{border-color:var(--navy-soft); border-top-color:var(--plan, var(--navy-soft))}
.sgrid-中 .scard,.sgrid-小 .scard{flex-direction:column; gap:12px}
.scard-body{min-width:0; flex:1}
.scard .nm{font-size:16.5px; font-weight:700; letter-spacing:.03em}
.sgrid-特大 .scard .nm{font-size:20px}
.scard .meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.scard .pr{
  font-size:13px; color:var(--text-sub); margin:11px 0 0; line-height:1.75;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
}
.sgrid-特大 .scard .pr{font-size:14px}

/* ロゴ：画像がないときは頭文字の札を出す */
.slogo{flex:none; border-radius:10px; background:#fff; border:1px solid var(--line); object-fit:contain; padding:6px}
.slogo-特大{width:180px; height:120px}
.slogo-大  {width:130px; height:90px}
.slogo-中  {width:110px; height:66px}
.slogo-小  {width:84px;  height:50px}
.slogo-窓  {width:110px; height:72px}
.slogo-ph{
  display:grid; place-items:center; padding:0;
  background:var(--gold-hi); color:var(--navy); border-color:#cfe6f7;
  font-family:var(--serif); font-size:24px;
}
.slogo-特大.slogo-ph{font-size:46px}
.slogo-大.slogo-ph{font-size:34px}
.slogo-小.slogo-ph{font-size:19px}

.sp-names{display:flex; flex-wrap:wrap; gap:8px 22px; padding:16px 20px; font-size:14px}
.sp-preview{display:flex; gap:16px; align-items:center; padding:16px; margin-bottom:22px; background:var(--bg); border-radius:10px}
.sp-preview .nm{font-size:17px; font-weight:700}
.sp-preview .kana{font-size:11.5px; color:var(--text-dim); margin-bottom:4px}
.form-sec{font-size:13px; color:var(--text-sub); letter-spacing:.08em; margin:30px 0 14px; padding-top:20px; border-top:1px solid var(--line)}

/* マッチング希望の入口（会員・会社の詳細の下） */
.match-box{margin-top:26px; padding:18px 20px; background:var(--bg); border:1px solid var(--line); border-radius:12px}
.match-box .field{margin-bottom:14px}

/* ===== スマホ ===== */
.side-toggle{display:none}
@media(max-width:900px){
  .list > .adm-row{flex-direction:column; gap:12px}
  .adm-row-act{width:100%}
  .modal-actions{flex-wrap:wrap}
  .modal-actions .grow{flex:1 1 100%; height:0}
  .page-head > .btn{margin-left:0; width:100%}
  .shell{flex-direction:column}
  .side{
    position:sticky; top:0; width:100%; height:auto; z-index:60;
    flex-direction:row; align-items:center; gap:10px; padding:0 12px;
  }
  .side-head{padding:12px 4px}
  .side-label,.side-sep,.side-foot{display:none}
  .side{border-right:0; border-bottom:1px solid var(--line)}
  .side-admin{border-bottom:3px solid var(--navy)}
  .side nav{
    display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
    padding:10px 12px 18px; border-top:1px solid var(--line); max-height:70vh;
    box-shadow:0 12px 24px rgba(31,95,173,.12);
  }
  .side.open nav{display:flex}
  .side-toggle{
    display:block; margin-left:auto; background:var(--bg); border:0; color:var(--navy);
    border-radius:8px; padding:9px 13px; cursor:pointer; font-size:20px; line-height:1;
  }
  .searchbar select,.searchbar .btn{flex:1 1 100%}
  .sgrid-特大 .scard,.sgrid-大 .scard{flex-direction:column; gap:12px}
  .slogo-特大{width:150px; height:100px}
  .modal-box{margin:12px auto}
  dl.kv{grid-template-columns:1fr; gap:3px 0}
  dl.kv dt{margin-top:12px}
}