/* 会計士Village online 公開側 共通スタイル（261022 新設・第1弾「入口」）
   原則: 受付票（券面＋記入欄）／金は送信ボタンだけ／見出しは日本語・左揃え／必須・任意は文字で
   仕様の正は 12_Webサイト/261022_experts配下ブラッシュアップ_第1弾デザイン計画_01.md */
:root {
  --vf-ink: #0f172a; --vf-ink2: #475569; --vf-ink3: #8a94a6;
  --vf-paper: #ffffff; --vf-floor: #F9FAFB; --vf-rule: #dfe3e8; --vf-rule2: #eef1f4; --vf-head: #f6f7f9;
  --vf-gold: #D4AF37; --vf-gold-dark: #c5a028;
  --vf-ok: #1a7f4b; --vf-ok-bg: #e3f4ea; --vf-wait: #b45309; --vf-wait-bg: #fdf1dc; --vf-shu: #c73b22; --vf-shu-bg: #fbeae6;
}
body.vf { background: var(--vf-floor); color: var(--vf-ink); font-family: "Noto Sans JP", sans-serif; font-feature-settings: "palt"; }

/* ---- ページ枠（受付票は 36rem・中央） ---- */
.vf-main { max-width: 36rem; margin: 0 auto; padding: 40px 1rem 56px; }
.vf-head { margin-bottom: 16px; }
.vf-title { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: .01em; }
.vf-sub { margin-top: 6px; font-size: 13px; color: var(--vf-ink3); line-height: 1.6; }

/* ---- 受付票 ---- */
.vf-sheet { background: var(--vf-paper); border: 1px solid var(--vf-rule); border-radius: 10px; overflow: hidden; }
.vf-sheet-body { padding: 24px; }
/* 券面（何に申し込むか） */
.vf-ticket { display: flex; gap: 16px; align-items: flex-start; padding: 18px 24px; background: var(--vf-head); border-bottom: 1px solid var(--vf-rule); }
.vf-ticket-date { flex-shrink: 0; min-width: 4.5rem; text-align: center; border-right: 1px solid var(--vf-rule); padding-right: 16px; }
.vf-ticket-date .md { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.vf-ticket-date .wd { font-size: 12px; color: var(--vf-ink2); margin-top: 4px; }
.vf-ticket-date .tm { font-size: 12px; color: var(--vf-ink2); margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vf-ticket-main { min-width: 0; flex: 1; }
.vf-ticket-title { font-size: 19px; font-weight: 700; line-height: 1.4; }   /* 題と講師は券面の主役＝大きく（261022 Kazuyoshi指摘で 15→19px・12→14px） */
.vf-ticket-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--vf-ink); flex-wrap: wrap; }
.vf-ticket-meta img, .vf-ticket-meta .ev-avatar { width: 32px; height: 32px; border-radius: 9999px; object-fit: cover; border: 1px solid var(--vf-rule); }
.vf-ticket-meta .ev-svc svg { width: 18px; height: 18px; }
.vf-ticket-meta .ev-svc, .vf-ticket-meta .ev-fallback { width: 32px; height: 32px; font-size: 13px; }
@media (max-width: 640px) { .vf-ticket-title { font-size: 17px; } }
/* 常設（日付なし）は券面の左をアイコンに */
.vf-ticket-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 9999px; background: #fff; border: 1px solid var(--vf-rule); display: flex; align-items: center; justify-content: center; color: var(--vf-ink2); }
.vf-ticket-icon svg { width: 22px; height: 22px; }

/* ---- 記入欄 ---- */
.vf-field { margin-top: 18px; }
.vf-field:first-child { margin-top: 0; }
.vf-row { display: flex; gap: 12px; }
.vf-row > .vf-field { flex: 1; margin-top: 0; }
.vf-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--vf-ink); margin-bottom: 6px; }
.vf-req, .vf-opt { font-size: 10px; font-weight: 600; line-height: 1; padding: 3px 5px; border-radius: 3px; letter-spacing: .02em; }
.vf-req { color: #fff; background: var(--vf-ink); }
.vf-opt { color: var(--vf-ink3); border: 1px solid var(--vf-rule); }
.vf-input { display: block; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--vf-rule); border-radius: 6px; font-size: 15px; color: var(--vf-ink); background: #fff; font-family: inherit; -webkit-appearance: none; appearance: none; }
select.vf-input { padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.vf-input:focus { outline: none; border-color: var(--vf-ink); box-shadow: 0 0 0 3px rgba(15,23,42,.12); }
.vf-input::placeholder { color: #b5bcc8; }
.vf-input.field-invalid { border-color: var(--vf-shu) !important; box-shadow: 0 0 0 3px rgba(199,59,34,.12) !important; }
.vf-hint { font-size: 12px; color: var(--vf-ink3); line-height: 1.6; margin-top: 6px; }
.vf-hint + .vf-hint { margin-top: 2px; }
/* 選択肢タイル */
.vf-tiles { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.vf-tiles-4 { grid-template-columns: repeat(4, 1fr); }
.vf-tile { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 8px; border: 1px solid var(--vf-rule); border-radius: 6px; font-size: 14px; color: var(--vf-ink); background: #fff; cursor: pointer; text-align: center; line-height: 1.2; }
.vf-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vf-tile:has(input:checked) { border: 2px solid var(--vf-ink); background: var(--vf-head); font-weight: 600; }
.vf-tile:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(15,23,42,.12); }
.vf-tile.field-invalid { border-color: var(--vf-shu); }
/* チェック（ログイン保持） */
.vf-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vf-ink2); cursor: pointer; }
.vf-check input { width: 18px; height: 18px; accent-color: var(--vf-ink); }
/* 6桁コード */
.vf-code { font-size: 20px; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- ボタン ---- */
.vf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 6px; font-size: 15px; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; font-family: inherit; transition: background .12s, border-color .12s; white-space: nowrap; }
.vf-btn-gold { background: var(--vf-gold); color: var(--vf-ink); }
.vf-btn-gold:hover { background: var(--vf-gold-dark); }
.vf-btn-plain { background: #fff; border-color: var(--vf-rule); color: var(--vf-ink); font-weight: 600; }
.vf-btn-plain:hover { background: var(--vf-head); }
.vf-btn-block { display: flex; width: 100%; }
.vf-btn:focus-visible { outline: 2px solid var(--vf-ink); outline-offset: 2px; }
.vf-submit { margin-top: 24px; }
.vf-link { color: var(--vf-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vf-ink3); }
.vf-link:hover { text-decoration-color: var(--vf-ink); }
.vf-foot { margin-top: 16px; font-size: 12px; color: var(--vf-ink3); line-height: 1.7; text-align: center; }
.vf-foot a { color: var(--vf-ink2); text-decoration: underline; text-underline-offset: 3px; }

/* ---- 帯（完了・注意・エラー） ---- */
.vf-note { border: 1px solid var(--vf-rule); border-left-width: 3px; border-radius: 6px; padding: 12px 16px; font-size: 13px; line-height: 1.6; background: #fff; margin-bottom: 16px; }
.vf-note-ok { border-left-color: var(--vf-ok); }
.vf-note-wait { border-left-color: var(--vf-wait); }
.vf-note-shu { border-left-color: var(--vf-shu); }
.vf-note-title { font-weight: 700; margin-bottom: 4px; }
.vf-note-text { color: var(--vf-ink2); }
.vf-note a { color: var(--vf-ink); text-decoration: underline; text-underline-offset: 3px; }
/* 票の中の区切り線・小さな見出し */
.vf-divider { height: 1px; background: var(--vf-rule2); margin: 20px 0; }
.vf-list { font-size: 13px; color: var(--vf-ink2); line-height: 1.8; padding-left: 1.2em; }
.vf-merits { display: grid; gap: 6px; font-size: 13px; color: var(--vf-ink2); }
.vf-merits li { display: flex; gap: 8px; align-items: flex-start; }
.vf-merits li::before { content: "✓"; color: var(--vf-ok); font-weight: 700; flex-shrink: 0; }
.vf-share { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.vf-share a, .vf-share button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--vf-rule); border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--vf-ink); background: #fff; text-decoration: none; cursor: pointer; font-family: inherit; }

/* ---- スマホ ---- */
@media (max-width: 640px) {
  .vf-main { padding: 24px 1rem 40px; }
  .vf-title { font-size: 22px; }
  .vf-sheet-body { padding: 20px 16px; }
  .vf-ticket { padding: 16px; gap: 12px; }
  .vf-ticket-date { min-width: 4rem; padding-right: 12px; }
  .vf-ticket-date .md { font-size: 26px; }
  .vf-input { font-size: 16px; }   /* iOSのフォーカス時自動ズーム防止 */
  .vf-tiles-4 { grid-template-columns: repeat(2, 1fr); }
  .vf-row { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .vf * { transition: none !important; } }

/* ---- フォーム本体・完了画面（261022 実装時に追加） ---- */
.vf-form > :not([hidden]) ~ :not([hidden]) { margin-top: 18px; }
.vf-form .vf-check { margin-top: 14px; }
.vf-tiles-4 .vf-tile { font-size: 13px; padding: 0 4px; letter-spacing: -.01em; }   /* 「会計士試験合格者」を1行に */
.vf-result { padding: 28px 24px; }
.vf-result-title { font-size: 18px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
.vf-result-text { font-size: 14px; color: var(--vf-ink2); line-height: 1.75; }
.vf-result-text strong { color: var(--vf-ink); }
.vf-result .vf-btn { margin-top: 4px; }
.vf-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; color: var(--vf-ink3); padding: 4px; }
.vf-eye:hover { color: var(--vf-ink); }
@media (max-width: 640px) { .vf-result { padding: 24px 16px; } .vf-result .vf-btn { width: 100%; } }

/* ---- 第2弾「会員の部屋」（261022）: 会員証・節の票・行・タグ・定義リスト・リンクタイル・プラン行・保存バー ---- */
.vf-main-room { max-width: 40rem; }
.vf-main-wide { max-width: 44rem; }
.vf-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.vf-id-name { font-size: 15px; font-weight: 600; }
.vf-id-mail { width: 100%; font-size: 12px; color: var(--vf-ink3); }
.vf-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.vf-tag-ok { background: var(--vf-ok-bg); color: var(--vf-ok); }
.vf-tag-wait { background: var(--vf-wait-bg); color: var(--vf-wait); }
.vf-tag-info { background: #e8ecf3; color: var(--vf-ink); }
.vf-tag-off { background: #eff1f4; color: var(--vf-ink2); }
.vf-tag-sm { height: 20px; font-size: 11px; padding: 0 6px; }
/* 節の票 */
.vf-sec { background: var(--vf-paper); border: 1px solid var(--vf-rule); border-radius: 10px; padding: 20px 24px; }
.vf-sec + .vf-sec { margin-top: 16px; }
.vf-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.vf-sec-head svg { width: 18px; height: 18px; color: var(--vf-ink); flex-shrink: 0; }
.vf-sec-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.vf-sec-note { font-size: 12px; color: var(--vf-ink3); margin-left: 2px; }
.vf-sec-sub { font-size: 13px; font-weight: 700; color: var(--vf-ink2); margin: 16px 0 4px; }
.vf-sec-desc { font-size: 13px; color: var(--vf-ink2); line-height: 1.7; }
/* 罫線区切りの行 */
.vf-rows { display: block; }
.vf-row-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--vf-rule2); }
.vf-row-item:first-child { border-top: 0; }
.vf-row-item.is-past { color: var(--vf-ink3); }
.vf-row-item.is-past .vf-row-title { color: var(--vf-ink2); font-weight: 500; }
.vf-row-avatar { width: 40px; height: 40px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--vf-rule); background: var(--vf-head); }
.vf-row-main { flex: 1; min-width: 0; }
.vf-row-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.vf-row-title a { color: inherit; text-decoration: none; }
.vf-row-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vf-row-meta { font-size: 12px; color: var(--vf-ink3); margin-top: 3px; line-height: 1.5; }
.vf-row-action { flex-shrink: 0; }
/* 紺の枠の小ボタン（行の操作） */
.vf-btn-outline { background: #fff; border-color: var(--vf-ink); color: var(--vf-ink); font-weight: 600; }
.vf-btn-outline:hover { background: var(--vf-head); }
.vf-btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.vf-btn-plain.vf-btn-sm { font-weight: 500; }
.vf-btn[disabled], .vf-btn.is-disabled { opacity: .45; cursor: not-allowed; }
.vf-more { margin-top: 12px; }
/* 定義リスト */
.vf-dl { display: grid; grid-template-columns: 7rem 1fr; row-gap: 0; font-size: 14px; }
.vf-dl > dt { color: var(--vf-ink3); font-size: 12px; padding: 10px 0; border-top: 1px solid var(--vf-rule2); display: flex; align-items: center; }
.vf-dl > dd { padding: 10px 0; border-top: 1px solid var(--vf-rule2); margin: 0; }
.vf-dl > dt:first-child, .vf-dl > dt:first-child + dd { border-top: 0; }
/* ボタン群（手続き） */
.vf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vf-actions .vf-btn { flex: 1 1 calc(50% - 4px); min-width: 12rem; }
.vf-link-danger { color: var(--vf-shu); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
/* リンクタイル（Discord） */
.vf-tiles-link { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.vf-tiles-link a { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--vf-rule); border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--vf-ink); text-decoration: none; background: #fff; }
.vf-tiles-link a:hover { background: var(--vf-head); }
.vf-tiles-link a::after { content: "↗"; font-size: 12px; color: var(--vf-ink3); }
/* 入会プランの選択行 */
.vf-plan { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--vf-rule); border-radius: 6px; cursor: pointer; background: #fff; }
.vf-plan + .vf-plan { margin-top: 8px; }
.vf-plan input { width: 18px; height: 18px; accent-color: var(--vf-ink); flex-shrink: 0; }
.vf-plan:has(input:checked) { border: 2px solid var(--vf-ink); padding: 11px 13px; background: var(--vf-head); }
.vf-plan-name { font-size: 14px; font-weight: 600; flex: 1; }
.vf-plan-price { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vf-plan-price small { font-size: 12px; font-weight: 400; color: var(--vf-ink3); }
/* 保存バー（プロフィール編集） */
.vf-savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255,255,255,.96); border-top: 1px solid var(--vf-rule); padding: 12px 1rem; }
.vf-savebar-in { max-width: 44rem; margin: 0 auto; display: flex; justify-content: flex-end; gap: 8px; }
/* フォーム内の追加行（SNS・連絡先・経歴など） */
.vf-addrow { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--vf-rule2); }
.vf-addrow:first-child { border-top: 0; }
.vf-addrow .vf-input { height: 40px; font-size: 14px; }
.vf-addrow-del { flex-shrink: 0; width: 32px; height: 32px; border: 0; background: none; color: var(--vf-shu); font-size: 16px; cursor: pointer; border-radius: 4px; }
.vf-addrow-del:hover { background: var(--vf-shu-bg); }
.vf-check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; font-size: 14px; }
.vf-check-list label { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.vf-check-list input { width: 18px; height: 18px; accent-color: var(--vf-ink); }
@media (max-width: 640px) {
  .vf-sec { padding: 16px; }
  .vf-row-item { flex-wrap: wrap; }
  .vf-row-item .vf-row-action { width: 100%; display: flex; justify-content: flex-end; }
  .vf-dl { grid-template-columns: 6rem 1fr; }
  .vf-actions .vf-btn { flex-basis: 100%; min-width: 0; }
  .vf-tiles-link { grid-template-columns: 1fr; }
  .vf-check-list { grid-template-columns: 1fr; }
}

/* ---- 第2弾 モック点検での修正（261022 Kazuyoshi指摘10件） ---- */
.vf-row-title, .vf-row-meta { display: block; }               /* 行のタイトルと日時は必ず2行（1行に流れない） */
.vf-row-main { display: block; }
.vf-row-action .vf-btn { min-width: 6.5rem; justify-content: center; }   /* 行の操作は同じ幅（申し込む／会員限定／満席） */
.vf-row > .vf-field, .grid > .vf-field, .vf-field .vf-field { margin-top: 0; }   /* 2列・格子の中では上余白を付けない（姓名のずれ防止） */
.vf-tiles-2 { grid-template-columns: repeat(2, 1fr); }        /* 2択のタイルは2列で幅100% */
.vf-plan .vf-tag { margin-right: 10px; }                      /* プラン行のCPタグは価格の左・価格の大きさは変えない */
.vf-plan-price { display: inline-flex; align-items: baseline; gap: 0; }
.vf-actions > * { flex: 0 0 calc(50% - 4px); min-width: 0; }  /* 手続きボタンは2列・同じ幅 */
.vf-actions-foot { margin-top: 12px; }                        /* ログアウトはボタン群の下・左 */
.vf-form-foot { margin-top: 24px; }                            /* 小さなフォーム: 金の全幅ボタン＋下に取消リンク */
.vf-form-foot .vf-foot { margin-top: 12px; }
@media (max-width: 640px) {
  .vf-row-item { flex-wrap: nowrap; }                          /* スマホでも操作ボタンは行の右（下に落とさない） */
  .vf-row-item .vf-row-action { width: auto; display: block; }
  .vf-row-action .vf-btn { min-width: 5.5rem; padding: 0 10px; }
  .vf-actions > * { flex-basis: 100%; }
}
.flex > .vf-field, .flex-1.vf-field { margin-top: 0; }        /* 横並び（flex）の中の記入欄も上余白なし（入会申込の姓名） */
.vf-toggle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }   /* 公開する／非公開・受付中／停止中の2択 */
.vf-toggle .vf-tile { height: 44px; }
.vf-dl { grid-template-columns: minmax(6rem, auto) 1fr; column-gap: 12px; }   /* ラベル幅は内容に合わせる（CPD研修登録番号が値に接しない） */
@media (max-width: 640px) {
  .vf-dl { grid-template-columns: minmax(5.5rem, auto) 1fr; }
  .vf-plan-price { flex-direction: column; align-items: flex-end; }           /* スマホはCPタグを価格の上に（プラン名を折らない） */
  .vf-plan .vf-tag { margin-right: 0; margin-bottom: 4px; }
}
/* 幅の指定（Tailwind の w-24 / flex-1 など）を .vf-input と併用したときは幅指定を優先する（経歴の年欄は 6rem のまま） */
.vf-input.w-24 { width: 6rem; flex: 0 0 6rem; }
.vf-input.flex-1 { width: auto; flex: 1 1 0%; min-width: 0; }
.vf-input.sm\:max-w-xs { max-width: 20rem; }
.vf-input.w-28 { width: 7rem; flex: 0 0 7rem; }
.vf-input.w-32 { width: 8rem; flex: 0 0 8rem; }
.vf-input.w-36 { width: 9rem; flex: 0 0 9rem; }
.vf-input.w-40 { width: 10rem; flex: 0 0 10rem; }
.vf-input.w-48 { width: 12rem; flex: 0 0 12rem; }

/* パンくず（会員の部屋の各画面・12px） */
.vf-crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vf-ink3); margin-bottom: 12px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.vf-crumbs::-webkit-scrollbar { display: none; }
.vf-crumbs a { color: var(--vf-ink3); text-decoration: none; }
.vf-crumbs a:hover { color: var(--vf-ink); }
.vf-crumbs svg { width: 12px; height: 12px; flex-shrink: 0; }
.vf-crumbs .current { color: var(--vf-ink2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.vf-input-ro { background: var(--vf-head); color: var(--vf-ink2); }
textarea.vf-input { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.vf-note-info { border-left-color: var(--vf-ink); }           /* 事実の通知（ログイン中・確認画面の案内）は墨の線 */
.vf-sec-head .vf-req, .vf-sec-head .vf-opt { margin-left: 2px; }
.vf-check.is-top { align-items: flex-start; }
.vf-check.is-top input { margin-top: 1px; }
.vf-check a { color: var(--vf-ink); text-decoration: underline; text-underline-offset: 3px; }
/* 編集画面のトグル（公開する／非公開・受付中／停止中）: ボタン要素のタイル。状態は JS が付ける .active */
button.vf-tile { font: inherit; font-size: 14px; color: var(--vf-ink2); }
.vf-toggle .vf-tile.active { border: 2px solid var(--vf-ink); background: var(--vf-head); font-weight: 600; color: var(--vf-ink); }
.vf-tile svg { width: 16px; height: 16px; flex-shrink: 0; }
.vf-check-wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; }   /* 資格など少数のチェック */
.vf-sec-head h2.vf-sec-title { margin: 0; }
.vf-sec-box { margin-top: 14px; padding: 12px 14px; background: var(--vf-head); border-radius: 6px; }   /* 節の中の補助枠（経歴プレビュー） */
.vf-field > .vf-addrow:first-of-type { border-top: 0; }
a.vf-row-title { color: inherit; text-decoration: none; }     /* LPのある回はタイトル自身がリンク */
a.vf-row-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.vf-row-title .vf-tag { margin-left: 6px; vertical-align: middle; position: relative; top: -1px; }   /* 会員限定・参加確定・出欠はタイトルの後ろ */
.vf-row-meta .vf-tag { margin-left: 6px; vertical-align: middle; }
.vf-sec-head + .vf-sec-sub, .vf-sec-sub:first-child { margin-top: 0; }
.vf-input.w-44 { width: 11rem; flex: 0 0 11rem; }
/* ===== 第3弾「外向きの顔」の部品（名鑑トップ・プロフィール・AI検索）261022 ===== */
.vf-main-list { max-width: 72rem; }
.vf-main-profile { max-width: 56rem; }
.vf-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.vf-head-row > div:first-child { min-width: 0; }
.vf-head-row .vf-sub { margin-bottom: 0; }
@media (max-width: 640px) { .vf-head-row { flex-direction: column; align-items: flex-start; } }
.vf-tag-line { background: #fff; border: 1px solid var(--vf-rule); color: var(--vf-ink2); }      /* 資格＝名鑑の肩書き（枠線だけ） */
.vf-controls { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--vf-ink2); flex-shrink: 0; flex-wrap: wrap; }
.vf-controls label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.vf-switch { position: relative; width: 32px; height: 18px; background: #c9d0da; border-radius: 9999px; flex-shrink: 0; }
.vf-switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: #fff; border-radius: 9999px; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
input:checked + .vf-switch { background: var(--vf-ink); }
input:checked + .vf-switch::after { transform: translateX(14px); }
input:focus-visible + .vf-switch { box-shadow: 0 0 0 3px rgba(15,23,42,.18); }
.vf-select { height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--vf-rule); border-radius: 6px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230f172a' stroke-width='1.6'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; font-size: 13px; color: var(--vf-ink); appearance: none; -webkit-appearance: none; font-family: inherit; }
.vf-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
.vf-chip { flex-shrink: 0; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--vf-rule); border-radius: 6px; background: #fff; font-size: 13px; color: var(--vf-ink2); text-decoration: none; white-space: nowrap; }
.vf-chip:hover { border-color: var(--vf-ink); color: var(--vf-ink); }
.vf-chip.active { background: var(--vf-ink); color: #fff; border-color: var(--vf-ink); font-weight: 600; }
.vf-subchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 10px 12px; background: var(--vf-head); border: 1px solid var(--vf-rule); border-radius: 6px; }
.vf-subchips .vf-chip { height: 28px; font-size: 12px; padding: 0 10px; }
.vf-note-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.vf-note-row > div { min-width: 0; flex: 1 1 24rem; }
/* 名鑑の1項目（一覧カード・AIの提案） */
.vf-entry { display: block; background: var(--vf-paper); border: 1px solid var(--vf-rule); border-radius: 8px; padding: 16px; color: inherit; text-decoration: none; }
a.vf-entry:hover { border-color: var(--vf-ink); }
.vf-entry-head { display: flex; gap: 12px; align-items: flex-start; }
.vf-entry-photo { position: relative; overflow: hidden; width: 56px; height: 56px; border-radius: 9999px; flex-shrink: 0; border: 1px solid var(--vf-rule); background: var(--vf-head); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: var(--vf-ink3); }
.vf-entry-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-entry-main { flex: 1; min-width: 0; }
.vf-entry-name { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; line-height: 1.3; min-width: 0; }
.vf-entry-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-entry-office { font-size: 12px; color: var(--vf-ink3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-entry-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.vf-entry-skills { font-size: 12px; color: var(--vf-ink2); margin-top: 8px; line-height: 1.6; }
.vf-entry-skills .more { color: var(--vf-ink3); margin-left: 4px; }
.vf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }   /* minmax(0,…)＝折り返さない事務所名で列が広がらない */
@media (max-width: 1024px) { .vf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vf-grid { grid-template-columns: minmax(0, 1fr); } }
.vf-group + .vf-group { margin-top: 24px; }
.vf-about { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--vf-rule); }
.vf-about h2 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.vf-about p { font-size: 13px; color: var(--vf-ink2); line-height: 1.8; }
.vf-faq { border-top: 1px solid var(--vf-rule2); }
.vf-faq summary { cursor: pointer; padding: 12px 32px 12px 0; font-size: 14px; font-weight: 600; list-style: none; position: relative; }
.vf-faq summary::-webkit-details-marker { display: none; }
.vf-faq summary::after { content: '＋'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--vf-ink3); font-weight: 400; }
.vf-faq[open] summary::after { content: '－'; }
.vf-faq p { padding: 0 0 14px; font-size: 13px; color: var(--vf-ink2); line-height: 1.8; }
.vf-faq + .vf-faq { border-top: 1px solid var(--vf-rule2); }
/* プロフィールの先頭票 */
.vf-share { display: flex; gap: 8px; flex-shrink: 0; }
.vf-share a { width: 32px; height: 32px; border-radius: 9999px; border: 1px solid var(--vf-rule); display: inline-flex; align-items: center; justify-content: center; color: var(--vf-ink); background: #fff; }
.vf-share a:hover { border-color: var(--vf-ink); }
.vf-share a svg { width: 14px; height: 14px; flex: 0 0 14px; display: block; }
.vf-hero { display: flex; gap: 20px; align-items: flex-start; }
.vf-hero-photo { width: 96px; height: 96px; font-size: 28px; }
.vf-hero-main { flex: 1; min-width: 0; }
.vf-hero-name { font-size: 24px; font-weight: 700; line-height: 1.2; }
.vf-hero-en { font-size: 13px; color: var(--vf-ink3); margin-top: 2px; }
.vf-hero-office { font-size: 14px; color: var(--vf-ink2); margin-top: 8px; line-height: 1.6; }
.vf-hero-office a { color: inherit; }
.vf-hero .vf-entry-tags { margin-top: 10px; gap: 6px; }
.vf-hero-contacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.vf-hero-contacts a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--vf-rule); border-radius: 6px; background: #fff; font-size: 13px; font-weight: 500; color: var(--vf-ink); text-decoration: none; }
.vf-hero-contacts a:hover { background: var(--vf-head); }
.vf-hero-contacts svg { width: 16px; height: 16px; flex-shrink: 0; }
.vf-hero-edit { display: inline-block; margin-top: 12px; font-size: 13px; }
@media (max-width: 640px) { .vf-hero { flex-direction: column; gap: 14px; } .vf-hero-photo { width: 80px; height: 80px; } }
/* 経歴・箇条書き・対応領域 */
.vf-timeline { list-style: none; margin: 0; padding: 0; }
.vf-timeline li { position: relative; padding: 0 0 12px 20px; }
.vf-timeline li::before { content: ''; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 9999px; border: 2px solid var(--vf-ink); background: #fff; }
.vf-timeline li::after { content: ''; position: absolute; left: 4px; top: 18px; bottom: -2px; width: 1px; background: #cfd4dc; }
.vf-timeline li:last-child { padding-bottom: 0; }
.vf-timeline li:last-child::after { display: none; }
.vf-tl-year { font-size: 13px; font-weight: 600; color: var(--vf-ink2); font-variant-numeric: tabular-nums; }
.vf-tl-text { font-size: 14px; line-height: 1.6; margin-top: 1px; }
.vf-list { list-style: none; margin: 0; padding: 0; }
.vf-list li { font-size: 14px; line-height: 1.7; padding: 3px 0 3px 1em; text-indent: -1em; }
.vf-list li::before { content: '・'; color: var(--vf-ink3); }
.vf-skills-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 20px; }
@media (max-width: 1024px) { .vf-skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vf-skills-grid { grid-template-columns: minmax(0, 1fr); } }
.vf-skills-cat { font-size: 12px; font-weight: 700; color: var(--vf-ink3); margin: 10px 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--vf-rule2); }
.vf-skills-item { display: flex; gap: 6px; align-items: baseline; font-size: 13px; padding: 4px 0; color: var(--vf-ink2); }
.vf-skills-item .mk { width: 1em; flex-shrink: 0; color: var(--vf-ink3); }
.vf-skills-item.is-primary { font-weight: 700; color: var(--vf-ink); }
.vf-skills-item.is-primary .mk { color: var(--vf-ink); }
.vf-sec-legend { font-size: 12px; color: var(--vf-ink3); margin-left: auto; }
/* 連絡帯（紺・フラット）とスマホ固定バー */
.vf-cta { background: var(--vf-ink); color: #fff; border-radius: 10px; padding: 24px; }
.vf-cta h2 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.vf-cta p { font-size: 13px; color: rgba(255,255,255,.68); margin-bottom: 16px; }
.vf-cta-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.vf-cta .vf-btn { height: 40px; font-size: 13px; padding: 0 16px; gap: 6px; }
.vf-cta .vf-btn svg { width: 16px; height: 16px; }
.vf-btn-white { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; font-weight: 600; }
.vf-btn-white:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.vf-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--vf-ink); padding: 10px 16px; display: none; }
.vf-cta-bar .vf-btn { height: 44px; width: 100%; }
@media (max-width: 640px) { .vf-cta-bar { display: flex; } body.vf.has-cta-bar { padding-bottom: 4.5rem; } }
/* AI検索 */
.vf-title .ai-hero-icon { display: inline-flex; width: 24px; height: 24px; color: var(--vf-ink); margin-right: 6px; vertical-align: -3px; }
.vf-chip-ex { font-size: 12px; color: var(--vf-ink2); background: #fff; border: 1px solid var(--vf-rule); border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.vf-chip-ex:hover { border-color: var(--vf-ink); color: var(--vf-ink); }
.vf-ai-reason { background: var(--vf-head); border-left: 3px solid var(--vf-ink); border-radius: 0 6px 6px 0; padding: 10px 12px; font-size: 13px; line-height: 1.7; color: var(--vf-ink2); margin-top: 10px; }
.vf-entry-link { display: inline-block; margin-top: 10px; font-size: 13px; }
.vf-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.village-verified, .village-legend-mark { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; color: #1e3a8a; flex-shrink: 0; }   /* Village会員の紺のチェック印（2026-06 確定） */
.village-verified svg, .village-legend-mark svg { width: 15px; height: 15px; display: block; }
.village-legend-mark { width: 14px; height: 14px; }
.vf-entry-name h3 { font: inherit; margin: 0; }
.vf-stack > * + * { margin-top: 16px; }                      /* プロフィールの節の縦積み */
.vf-col { display: flex; flex-direction: column; gap: 16px; }
.vf-col > .vf-sec + .vf-sec { margin-top: 0; }
.vf-about-faq { margin-top: 28px; border-top: 0; padding-top: 0; }
.vf-hero-office a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vf-sec-head .vf-sec-legend { margin-left: auto; }

/* ===== モーダル（ご利用の流れ・よくあるご質問・会社概要・利用規約・プライバシーポリシー）261022 第4弾で modals.php から移設 ===== */
.legal-modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(15,23,42,.55); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; }
.legal-modal-backdrop.active { opacity: 1; visibility: visible; transition: opacity .22s ease; }
.legal-modal-content { background: #fff; width: 100%; max-width: 640px; max-height: 85vh; max-height: min(85vh, 85dvh); display: flex; flex-direction: column; border-radius: 10px; border: 1px solid var(--vf-rule); transform: translateY(8px); transition: transform .22s cubic-bezier(.16, 1, .3, 1); overflow: hidden; }
.legal-modal-backdrop.active .legal-modal-content { transform: none; }
.legal-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--vf-rule); flex-shrink: 0; transition: box-shadow .2s; }
.legal-modal-head h2 { font-size: 16px; font-weight: 700; color: var(--vf-ink); margin: 0; line-height: 1.4; }
.legal-modal-head.scrolled { box-shadow: 0 4px 10px rgba(15,23,42,.06); }
.legal-modal-close { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--vf-rule); cursor: pointer; color: var(--vf-ink); font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: inherit; }
.legal-modal-close:hover { background: var(--vf-head); }
.legal-modal-close:focus-visible { outline: 2px solid var(--vf-ink); outline-offset: 2px; }
.legal-modal-body { padding: 12px 20px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
.legal-modal-body::-webkit-scrollbar { width: 6px; }
.legal-modal-body::-webkit-scrollbar-track { background: transparent; }
.legal-modal-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
.legal-modal-body h3 { font-size: 14px; font-weight: 700; color: var(--vf-ink); margin: 18px 0 6px; }
.legal-modal-body h3:first-child { margin-top: 0; }
.legal-modal-body p { font-size: 13px; color: var(--vf-ink2); line-height: 1.75; margin-bottom: 10px; }
.legal-modal-body ul, .legal-modal-body ol { font-size: 13px; color: var(--vf-ink2); line-height: 1.75; padding-left: 1.6em; margin: 0 0 10px; }
.legal-modal-body ol { list-style: none; padding-left: 0; }   /* 規約の各項＝番号なしで本文と同じ左端に（1文だけの条に「1」が無いため番号を付けると不揃い・261022 Kazuyoshi指示） */
.legal-modal-body ol > li { padding-left: 0; margin-bottom: 8px; }
.legal-modal-body ul { list-style: disc; }                    /* 禁止事項・取得情報などの列挙＝点 */
.legal-modal-body li { margin-bottom: 4px; padding-left: 2px; }
.legal-modal-body li::marker { color: var(--vf-ink3); font-variant-numeric: tabular-nums; }
.legal-modal-body a { color: var(--vf-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-modal-body .legal-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.legal-modal-body .legal-table th { background: var(--vf-head); color: var(--vf-ink2); font-size: 12px; font-weight: 600; text-align: left; padding: 10px 12px; border: 1px solid var(--vf-rule); width: 30%; vertical-align: top; }
.legal-modal-body .legal-table td { padding: 10px 12px; border: 1px solid var(--vf-rule); color: var(--vf-ink); }
.vf-steps > div { padding: 16px 0; display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid var(--vf-rule2); }   /* ご利用の流れ＝順番のある内容だけ番号 */
.vf-steps > div:first-child { border-top: 0; padding-top: 6px; }
.vf-step-no { width: 28px; height: 28px; border-radius: 9999px; border: 1px solid var(--vf-ink); color: var(--vf-ink); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vf-steps h3 { margin: 0 0 4px; font-size: 14px; }
.vf-steps p { margin: 0; font-size: 13px; }
.vf-faqs > div { padding: 14px 0; border-top: 1px solid var(--vf-rule2); }
.vf-faqs > div:first-child { border-top: 0; padding-top: 6px; }
.vf-faqs h3 { margin: 0 0 6px; font-size: 14px; }
.vf-faqs p { margin: 0; font-size: 13px; }
@media (max-width: 640px) {   /* スマホはボトムシート（下から全幅） */
  .legal-modal-backdrop { padding: 0; align-items: flex-end; }
  .legal-modal-content { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 10px 10px 0 0; border: 0; transform: translateY(100%); }
  .legal-modal-backdrop.active .legal-modal-content { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .legal-modal-backdrop, .legal-modal-content { transition: none; } }
body.modal-open { overflow: hidden; }