/* ============================ BCJ Member Styles — v2 ============================ */ /* --- Google Fonts は layout の で読み込み --- */ :root { --bcj-bg: #f5f6f8; --bcj-bg-card: #ffffff; --bcj-bg-hover: #f0f1f4; --bcj-bg-elevated: #eaebef; --bcj-fg: #1a1a1a; --bcj-fg-dim: #6b7280; --bcj-fg-mute: #9ca3af; --bcj-blue: #1f4ef0; --bcj-blue-bright: #1f4ef0; --bcj-blue-glow: rgba(31, 78, 240, 0.2); --bcj-blue-bg: rgba(31, 78, 240, 0.06); --bcj-border: #e2e4e9; --bcj-border-hover: #c9cdd5; --bcj-danger: #dc2626; --bcj-success: #16a34a; --bcj-warning: #ca8a04; --bcj-radius: 10px; --bcj-radius-sm: 6px; --bcj-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --bcj-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } body.member-body { margin: 0; font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bcj-bg); color: var(--bcj-fg); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } a { color: var(--bcj-blue-bright); text-decoration: none; } a:hover { color: #1a3ed0; } /* ========================================= Header ========================================= */ .member-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--bcj-border); padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; } .member-header-brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .member-header-logo { height: 24px; width: auto; } .member-header-nav { display: flex; gap: 4px; align-items: center; } .member-header-nav a { color: var(--bcj-fg-dim); text-decoration: none; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: var(--bcj-radius-sm); transition: all var(--bcj-transition); white-space: nowrap; } .member-header-nav a:hover { color: var(--bcj-fg); background: var(--bcj-bg-hover); } .member-header-nav a.active { color: var(--bcj-blue-bright); background: var(--bcj-blue-bg); } /* ハンバーガーメニュー（モバイル） */ .member-hamburger { display: none; background: none; border: none; color: var(--bcj-fg); cursor: pointer; padding: 8px; font-size: 24px; line-height: 1; } /* ドロワー背景（モバイルのみ表示） */ .member-nav-overlay { display: none; } /* ========================================= Main Content ========================================= */ .member-main { flex: 1; max-width: 760px; width: 100%; margin: 0 auto; padding: 32px 24px 60px; } /* ========================================= Footer ========================================= */ .member-footer { border-top: 1px solid var(--bcj-border); padding: 32px 24px; text-align: center; color: var(--bcj-fg-mute); font-size: 12px; line-height: 2; } .member-footer a { color: var(--bcj-fg-dim); text-decoration: none; margin: 0 8px; } .member-footer a:hover { color: var(--bcj-fg); } .member-footer-brand { margin-bottom: 10px; } .member-footer-logo { height: 28px; width: auto; opacity: 0.5; } /* ========================================= Flash Messages ========================================= */ .member-flash { padding: 14px 18px; border-radius: var(--bcj-radius-sm); margin-bottom: 20px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; } .member-flash-notice { background: #ecfdf5; color: var(--bcj-success); border: 1px solid #bbf7d0; } .member-flash-notice::before { content: "\2713"; font-weight: 700; } .member-flash-alert { background: #fef2f2; color: var(--bcj-danger); border: 1px solid #fecaca; } .member-flash-alert::before { content: "\26A0"; } /* ========================================= Page Header (Welcome / Title) ========================================= */ .member-page-header { margin-bottom: 28px; } .member-page-header h1 { font-size: 26px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.5px; } .member-page-header p { color: var(--bcj-fg-dim); font-size: 14px; margin: 0; } /* 旧名との互換 */ .member-welcome { margin-bottom: 28px; } .member-welcome h1 { font-size: 26px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.5px; } .member-welcome p { color: var(--bcj-fg-dim); font-size: 14px; margin: 0; } /* ========================================= Cards ========================================= */ .member-card { background: var(--bcj-bg-card); border: 1px solid var(--bcj-border); border-radius: var(--bcj-radius); padding: 24px; margin-bottom: 16px; box-shadow: var(--bcj-shadow); transition: border-color var(--bcj-transition); } .member-card:hover { border-color: var(--bcj-border-hover); } .member-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .member-card h2 { font-size: 15px; font-weight: 700; margin: 0 0 18px; color: var(--bcj-fg); display: flex; align-items: center; gap: 8px; } .member-card h2 .card-icon { font-size: 18px; opacity: 0.7; } .member-card-count { font-size: 13px; color: var(--bcj-fg-mute); font-weight: 400; } /* ========================================= Profile Grid ========================================= */ .member-profile-grid { display: grid; grid-template-columns: 110px 1fr; gap: 0; font-size: 14px; } .member-profile-grid dt { padding: 10px 0; color: var(--bcj-fg-mute); border-bottom: 1px solid var(--bcj-border); font-weight: 500; } .member-profile-grid dd { padding: 10px 0; margin: 0; border-bottom: 1px solid var(--bcj-border); } /* ========================================= Chips / Tags ========================================= */ .member-category-chips { display: flex; gap: 6px; flex-wrap: wrap; } .member-chip { display: inline-flex; align-items: center; padding: 3px 10px; background: #ebf0ff; color: #1f4ef0; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid #d6e0ff; } /* ========================================= Badges (Status) ========================================= */ .member-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; letter-spacing: 0.3px; } .member-badge-blue { background: #ebf0ff; color: #1f4ef0; border: 1px solid #d6e0ff; } .member-badge-yellow { background: #fef9e7; color: #92700c; border: 1px solid #fde68a; } .member-badge-green { background: #ecfdf5; color: #15803d; border: 1px solid #bbf7d0; } .member-badge-gray { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; } /* ========================================= Buttons ========================================= */ .member-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: none; border-radius: var(--bcj-radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all var(--bcj-transition); line-height: 1.4; } .member-btn:active { transform: scale(0.97); } .member-btn-primary { background: var(--bcj-blue); color: #ffffff; box-shadow: 0 1px 3px rgba(31, 78, 240, 0.25); } .member-btn-primary:hover { background: #1a3ed0; color: #ffffff; box-shadow: 0 2px 8px rgba(31, 78, 240, 0.35); } .member-btn-primary.full-width { width: 100%; } .member-btn-secondary { background: var(--bcj-bg-hover); color: var(--bcj-fg-dim); border: 1px solid var(--bcj-border); } .member-btn-secondary:hover { border-color: var(--bcj-border-hover); color: var(--bcj-fg); background: var(--bcj-bg-elevated); } .member-btn-danger { background: #fef2f2; color: var(--bcj-danger); border: 1px solid #fecaca; } .member-btn-danger:hover { background: #fee2e2; } .member-btn-sm { padding: 6px 14px; font-size: 12px; } .member-actions { display: flex; gap: 10px; margin-top: 16px; } /* ========================================= Forms ========================================= */ .member-form-group { margin-bottom: 20px; } .member-form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--bcj-fg-dim); margin-bottom: 6px; } .member-form-input, .member-form-select { width: 100%; padding: 11px 14px; background: var(--bcj-bg); border: 1px solid var(--bcj-border); border-radius: var(--bcj-radius-sm); font-size: 15px; color: var(--bcj-fg); transition: border-color var(--bcj-transition), box-shadow var(--bcj-transition); font-family: inherit; } .member-form-input:focus, .member-form-select:focus { outline: none; border-color: var(--bcj-blue); box-shadow: 0 0 0 3px var(--bcj-blue-glow); } .member-form-input::placeholder { color: var(--bcj-fg-mute); } .member-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .member-form-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bcj-fg-dim); cursor: pointer; } .member-form-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--bcj-blue); } .member-form-checkbox a { color: var(--bcj-blue-bright); text-decoration: underline; } .member-form-actions { display: flex; gap: 12px; margin-top: 28px; } /* Checkbox grid (categories) */ .member-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .member-checkbox-chip { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bcj-bg); border: 1px solid var(--bcj-border); border-radius: var(--bcj-radius-sm); font-size: 13px; color: var(--bcj-fg-dim); cursor: pointer; transition: all var(--bcj-transition); } .member-checkbox-chip:hover { border-color: var(--bcj-border-hover); } .member-checkbox-chip:has(input:checked) { border-color: var(--bcj-blue); background: #ebf0ff; color: var(--bcj-blue); } .member-checkbox-chip input { accent-color: var(--bcj-blue); } /* Errors */ .member-errors { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--bcj-radius-sm); padding: 14px 18px; margin-bottom: 20px; } .member-errors h3 { margin: 0 0 8px; font-size: 14px; color: var(--bcj-danger); } .member-errors ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--bcj-danger); } /* ========================================= Auth Layout (Login / Signup) ========================================= */ .member-auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #eef0f4; margin: 0; font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, sans-serif; color: var(--bcj-fg); -webkit-font-smoothing: antialiased; } .member-auth-wrapper { width: 100%; max-width: 420px; padding: 24px; } .member-auth-brand { text-align: center; margin-bottom: 36px; } .member-auth-brand img { height: 30px; width: auto; } .member-auth-brand p { color: var(--bcj-fg-mute); font-size: 13px; margin: 10px 0 0; } .member-auth-card { background: var(--bcj-bg-card); border: 1px solid var(--bcj-border); border-radius: var(--bcj-radius); padding: 32px; box-shadow: var(--bcj-shadow); } .member-auth-card h2 { margin: 0 0 24px; font-size: 18px; font-weight: 700; } .member-auth-links { text-align: center; margin-top: 24px; font-size: 14px; color: var(--bcj-fg-dim); } .member-auth-links a { color: var(--bcj-blue-bright); text-decoration: none; } .member-auth-links a:hover { text-decoration: underline; } /* ========================================= Dashboard — Recent Lists ========================================= */ .member-recent-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 12px; } .member-recent-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bcj-border); font-size: 14px; } .member-recent-item:last-child { border-bottom: none; } .member-recent-item-info { flex: 1; min-width: 0; } .member-recent-item-info a { color: var(--bcj-fg); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; transition: color var(--bcj-transition); } .member-recent-item-info a:hover { color: var(--bcj-blue-bright); } .member-recent-item-info span { display: block; font-size: 12px; color: var(--bcj-fg-mute); margin-top: 2px; } /* ========================================= Applications List ========================================= */ .member-applications-list { display: flex; flex-direction: column; gap: 8px; } .member-application-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 18px 20px; background: var(--bcj-bg-card); border: 1px solid var(--bcj-border); border-radius: var(--bcj-radius); transition: all var(--bcj-transition); box-shadow: var(--bcj-shadow); } .member-application-item:hover { border-color: var(--bcj-border-hover); background: var(--bcj-bg-hover); } .member-application-info { flex: 1; min-width: 0; } .member-application-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; } .member-application-title a { color: var(--bcj-fg); text-decoration: none; transition: color var(--bcj-transition); } .member-application-title a:hover { color: var(--bcj-blue-bright); } .member-application-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--bcj-fg-dim); } .member-application-status { flex-shrink: 0; text-align: right; } .member-application-date { font-size: 12px; color: var(--bcj-fg-mute); margin-top: 6px; } /* ========================================= Application Detail ========================================= */ .member-application-job-info { margin-top: 8px; } .member-application-job-title { margin: 0 0 10px; font-size: 17px; font-weight: 600; } .member-application-job-title a { color: var(--bcj-fg); text-decoration: none; transition: color var(--bcj-transition); } .member-application-job-title a:hover { color: var(--bcj-blue-bright); } .member-detail-grid { display: grid; grid-template-columns: 130px 1fr; gap: 0; font-size: 14px; } .member-detail-grid dt { padding: 10px 0; color: var(--bcj-fg-mute); border-bottom: 1px solid var(--bcj-border); font-weight: 500; } .member-detail-grid dd { padding: 10px 0; margin: 0; border-bottom: 1px solid var(--bcj-border); } /* Status display */ .member-status-current { margin-bottom: 20px; } /* Timeline */ .member-timeline { position: relative; padding-left: 28px; } .member-timeline::before { content: ""; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--bcj-border); border-radius: 1px; } .member-timeline-item { position: relative; padding-bottom: 22px; display: flex; align-items: flex-start; gap: 12px; } .member-timeline-item:last-child { padding-bottom: 0; } .member-timeline-dot { position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #d1d5db; border: 3px solid var(--bcj-bg-card); transition: background var(--bcj-transition); } .member-timeline-done .member-timeline-dot { background: var(--bcj-blue); box-shadow: 0 0 0 3px rgba(31, 78, 240, 0.15); } .member-timeline-label { font-size: 14px; font-weight: 600; color: var(--bcj-fg); } .member-timeline-date { font-size: 12px; color: var(--bcj-fg-mute); margin-top: 2px; } /* ========================================= Favorites ========================================= */ .member-favorites-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .member-favorite-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 18px 20px; border: 1px solid var(--bcj-border); border-radius: var(--bcj-radius); background: var(--bcj-bg-card); transition: all var(--bcj-transition); box-shadow: var(--bcj-shadow); } .member-favorite-item:hover { border-color: var(--bcj-border-hover); background: var(--bcj-bg-hover); } .member-favorite-info { flex: 1; min-width: 0; } .member-favorite-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--bcj-fg); } .member-favorite-title a { color: var(--bcj-fg); text-decoration: none; transition: color var(--bcj-transition); } .member-favorite-title a:hover { color: var(--bcj-blue-bright); } .member-favorite-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--bcj-fg-dim); margin-bottom: 8px; } .member-favorite-salary { font-size: 14px; color: var(--bcj-blue); font-weight: 700; margin-bottom: 4px; } .member-favorite-date { color: var(--bcj-fg-mute); font-size: 12px; } .member-favorite-actions { flex-shrink: 0; } /* ========================================= Empty State ========================================= */ .member-empty-state { text-align: center; padding: 40px 16px; color: var(--bcj-fg-dim); } .member-empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; } .member-empty-state p { margin: 6px 0; font-size: 14px; } /* ========================================= Pagination ========================================= */ .member-pagination { margin-top: 24px; text-align: center; } .member-pagination .pagination { display: inline-flex; gap: 4px; list-style: none; padding: 0; margin: 0; } .member-pagination .pagination a, .member-pagination .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--bcj-border); border-radius: var(--bcj-radius-sm); font-size: 13px; color: var(--bcj-fg-dim); transition: all var(--bcj-transition); } .member-pagination .pagination a:hover { border-color: var(--bcj-blue); color: var(--bcj-fg); background: var(--bcj-blue-bg); } .member-pagination .pagination .current { background: var(--bcj-blue); border-color: var(--bcj-blue); color: #fff; font-weight: 600; } /* ========================================= Text Utilities ========================================= */ .member-text-muted { color: var(--bcj-fg-mute); font-size: 13px; } .member-link { color: var(--bcj-blue-bright); text-decoration: none; transition: color var(--bcj-transition); } .member-link:hover { text-decoration: underline; color: #7ba4ff; } .member-external-icon { font-size: 11px; color: var(--bcj-fg-mute); margin-left: 4px; vertical-align: top; } /* ========================================= Responsive ========================================= */ @media (max-width: 640px) { .member-header { padding: 0 16px; height: 56px; } .member-header-nav { display: flex; position: fixed; top: 56px; right: 0; /* .member-header に backdrop-filter があるため、fixed 子要素の包含ブロックが header になる。right:0 は header(全幅)の右端=ビューポート右端に一致するので、 右からスライドインする細いドロワーとして扱う。高さはビューポート基準で明示。 */ height: calc(100vh - 56px); height: calc(100dvh - 56px); width: min(280px, 82vw); background: #ffffff; border-left: 1px solid var(--bcj-border); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12); overflow-y: auto; flex-direction: column; padding: 12px 16px; gap: 0; transform: translateX(100%); transition: transform 0.25s ease; z-index: 99; } body.member-nav-open .member-header-nav { transform: translateX(0); } .member-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 98; } body.member-nav-open .member-nav-overlay { display: block; } .member-header-nav a { font-size: 16px; padding: 16px 0; border-bottom: 1px solid var(--bcj-border); border-radius: 0; } .member-hamburger { display: block; } .member-main { padding: 24px 16px 40px; } .member-welcome h1 { font-size: 22px; } .member-form-row { grid-template-columns: 1fr; } .member-profile-grid, .member-detail-grid { grid-template-columns: 100px 1fr; } .member-application-item { flex-direction: column; align-items: flex-start; gap: 12px; } .member-application-status { text-align: left; display: flex; align-items: center; gap: 10px; } .member-favorite-item { flex-direction: column; gap: 12px; } .member-favorite-actions { align-self: flex-end; } }