/* === 旧形式ナビ(未ログインページ用) === */ .nav { background:#0f172a; padding:12px 0; } .nav-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; } .nav-logo { color:#fbbf24; font-weight:700; font-size:18px; text-decoration:none; display:flex; align-items:center; gap:8px; } .nav-logo-sub { font-size:10px; color:#94a3b8; font-weight:400; } .nav-links { display:flex; gap:20px; align-items:center; } .nav-links a { color:#94a3b8; text-decoration:none; font-size:13px; font-weight:500; transition:color 0.2s; } .nav-links a:hover { color:#fbbf24; } .nav-links a.active { color:#fbbf24; border-bottom:2px solid #fbbf24; padding-bottom:2px; } @media(max-width:768px) { .nav-links { gap:10px; flex-wrap:wrap; } .nav-links a { font-size:11px; } } /* === 2段ヘッダー(上段:ロゴ+ユーティリティ、下段:主要ナビ) === */ .ssr-header { background:#fff; border-bottom:1px solid #e2e8f0; box-shadow:0 2px 8px rgba(0,0,0,0.06); position:sticky; top:0; z-index:50; } /* 上段: ロゴ + ユーティリティ */ .ssr-header-top { background:#0f172a; border-bottom:1px solid #1e293b; } .ssr-header-top-inner { max-width:1280px; margin:0 auto; padding:0 24px; height:48px; display:flex; align-items:center; justify-content:space-between; } /* 下段: 主要ナビ */ .ssr-header-bottom { background:#fff; } .ssr-header-bottom-inner { max-width:1280px; margin:0 auto; padding:0 24px; height:44px; display:flex; align-items:center; gap:0; } /* ロゴ */ .ssr-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; } .ssr-logo-icon { background:#1e293b; padding:5px; border-radius:7px; display:flex; align-items:center; justify-content:center; } .ssr-logo-text { display:flex; align-items:baseline; gap:4px; } .ssr-logo-name { font-size:18px; font-weight:800; color:#fbbf24; line-height:1; letter-spacing:-0.02em; } .ssr-logo-sub { font-size:11px; color:#94a3b8; font-weight:400; } .ssr-logo-tagline { font-size:10px; color:#475569; font-weight:500; letter-spacing:0.03em; margin-left:8px; padding-left:8px; border-left:1px solid #334155; white-space:nowrap; } /* 公開ナビ(下段左側) */ .ssr-nav-public { display:flex; align-items:stretch; gap:0; } .ssr-nav-link { font-size:13px; font-weight:600; color:#374151; text-decoration:none; padding:0 14px; height:44px; line-height:44px; border-radius:0; transition:color 0.2s, background 0.2s; white-space:nowrap; background:none; border:none; cursor:pointer; font-family:inherit; border-bottom:2px solid transparent; display:inline-flex; align-items:center; } .ssr-nav-link:hover { color:#d97706; background:#fffbeb; border-bottom-color:#fbbf24; } .ssr-nav-link-active { color:#d97706; border-bottom-color:#d97706; background:#fffbeb; } /* ドロップダウン */ .ssr-dropdown { position:relative; } .ssr-dropdown-btn { display:flex; align-items:center; } .ssr-dropdown-menu { position:absolute; top:calc(100% + 8px); left:0; width:192px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,0.15); border-radius:12px; border:1px solid #f1f5f9; padding:8px 0; opacity:0; visibility:hidden; transform:translateY(8px); transition:all 0.2s; z-index:100; } .ssr-dropdown-menu.ssr-dropdown-open { opacity:1; visibility:visible; transform:translateY(0); } .ssr-dropdown-menu-right { left:auto; right:0; } .ssr-dropdown-item { display:block; width:100%; padding:8px 16px; font-size:13px; color:#0f172a; text-decoration:none; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; transition:background 0.15s, color 0.15s; } .ssr-dropdown-item:hover { background:#f8fafc; color:#d97706; } .ssr-dropdown-item-bold { font-weight:700; background:#f8fafc; } .ssr-dropdown-item-danger { color:#ef4444; } .ssr-dropdown-item-danger:hover { background:#fef2f2; color:#dc2626; } .ssr-dropdown-divider { height:1px; background:#f1f5f9; margin:4px 0; } /* 区切り線(下段ナビ内) */ .ssr-nav-divider { width:1px; height:24px; background:#e2e8f0; margin:0 12px; flex-shrink:0; } /* 認証ナビ(下段右側) */ .ssr-nav-auth { display:flex; align-items:stretch; gap:0; margin-left:auto; } .ssr-nav-auth-link { font-size:13px; font-weight:600; color:#374151; text-decoration:none; padding:0 12px; height:44px; line-height:44px; border-radius:0; transition:all 0.2s; white-space:nowrap; border-bottom:2px solid transparent; display:inline-flex; align-items:center; } .ssr-nav-auth-link:hover { color:#d97706; background:#fffbeb; border-bottom-color:#fbbf24; } .ssr-nav-auth-link-active { color:#d97706; background:#fffbeb; border-bottom-color:#d97706; } .ssr-nav-auth-link-cta { background:#fbbf24; color:#0f172a !important; font-weight:700; border-radius:6px; margin:8px 0 8px 4px; height:28px; line-height:28px; padding:0 12px; border-bottom:none; } .ssr-nav-auth-link-cta:hover { background:#f59e0b; border-bottom-color:transparent; } /* 右側ユーティリティエリア(上段) */ .ssr-nav-right { display:flex; align-items:center; gap:4px; flex-shrink:0; } /* 上段アイコンボタン(ダーク背景) */ .ssr-icon-btn { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:7px; color:#94a3b8; background:none; border:none; cursor:pointer; font-family:inherit; text-decoration:none; transition:background 0.15s, color 0.15s; } .ssr-icon-btn:hover { background:#1e293b; color:#fbbf24; } /* ユーザーボタン(上段ダーク背景) */ .ssr-user-btn { display:flex; align-items:center; gap:6px; padding:4px 10px; border-radius:7px; background:none; border:none; cursor:pointer; font-family:inherit; transition:background 0.15s; } .ssr-user-btn:hover { background:#1e293b; } .ssr-user-avatar { width:30px; height:30px; border-radius:50%; background:#fbbf24; color:#0f172a; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ssr-user-name { font-size:13px; font-weight:600; color:#e2e8f0; } /* フッター */ .ssr-footer { background:#f8fafc; border-top:1px solid #e2e8f0; margin-top:auto; } .ssr-footer-inner { max-width:1280px; margin:0 auto; padding:48px 24px 24px; } .ssr-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px; } .ssr-footer-brand {} .ssr-footer-logo { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:800; color:#0f172a; margin-bottom:12px; } .ssr-footer-tagline { font-size:12px; color:#64748b; line-height:1.7; } .ssr-footer-heading { font-size:13px; font-weight:700; color:#0f172a; margin-bottom:16px; } .ssr-footer-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; } .ssr-footer-list a { font-size:13px; color:#64748b; text-decoration:none; transition:color 0.2s; } .ssr-footer-list a:hover { color:#d97706; } .ssr-footer-link-bold { font-weight:700; color:#0f172a !important; } .ssr-footer-link-partner { color:#4338ca !important; font-weight:500; } .ssr-footer-status { display:flex; align-items:center; gap:6px; } .ssr-footer-status-dot { width:8px; height:8px; border-radius:50%; background:#10b981; flex-shrink:0; } .ssr-footer-bottom { padding-top:24px; border-top:1px solid #e2e8f0; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#94a3b8; } @media(max-width:1024px) { .ssr-footer-grid { grid-template-columns:1fr 1fr; gap:24px; } .ssr-logo-tagline { display:none; } } @media(max-width:768px) { .ssr-header-bottom { display:none; } .ssr-logo-tagline { display:none; } .ssr-user-name { display:none; } .ssr-footer-grid { grid-template-columns:1fr 1fr; gap:20px; } .ssr-footer-brand { grid-column:1/-1; } } /* === ページバナー(ダッシュボードSPAと完全一致) === */ .ssr-page-banner { position:relative; overflow:hidden; height:104px; border-bottom:1px solid #cbd5e1; } .ssr-page-banner-bg { position:absolute; inset:0; width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0.8; } .ssr-page-banner-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(0,0,0,0.4),rgba(0,0,0,0.2),transparent); } .ssr-page-banner-accent { position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(to bottom,#fbbf24,#f59e0b,#fbbf24); } .ssr-page-banner-inner { position:relative; max-width:1280px; margin:0 auto; padding:0 24px; height:100%; display:flex; flex-direction:column; justify-content:center; } .ssr-page-banner-breadcrumb { display:flex; align-items:center; gap:6px; margin-bottom:8px; } .ssr-page-banner-home { color:rgba(255,255,255,0.9); text-decoration:none; display:flex; align-items:center; transition:color 0.2s; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } .ssr-page-banner-home:hover { color:#fff; } .ssr-page-banner-chevron { color:rgba(255,255,255,0.5); flex-shrink:0; } .ssr-page-banner-crumb { font-size:12px; font-weight:600; color:#fff; text-decoration:none; transition:color 0.2s; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; } .ssr-page-banner-crumb:hover { color:#fff; } .ssr-page-banner-titles { display:flex; align-items:baseline; gap:12px; } .ssr-page-banner-title { font-size:26px; font-weight:700; color:#fff; margin:0; letter-spacing:-0.025em; text-shadow:0 2px 4px rgba(0,0,0,0.6); } .ssr-page-banner-title-ja { font-size:13px; font-weight:500; color:rgba(255,255,255,0.9); text-shadow:0 1px 3px rgba(0,0,0,0.5); display:none; } @media(min-width:640px) { .ssr-page-banner-title-ja { display:inline; } } /* === ポイント残高バー(全管理画面共通) === */ .point-bar { background:#0f172a; border-radius:12px; padding:16px 24px; margin-bottom:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .point-bar-label { font-size:12px; color:#94a3b8; } .point-bar-value { font-size:22px; font-weight:800; color:#fbbf24; } .point-bar-sub { font-size:11px; color:#64748b; } .point-bar-link { font-size:12px; color:#fbbf24; font-weight:700; text-decoration:none; } .point-bar-link:hover { text-decoration:underline; } /* === トースト通知 === */ .verid-toast-container { position:fixed; top:20px; right:20px; z-index:10000; display:flex; flex-direction:column; gap:10px; pointer-events:none; } .verid-toast { pointer-events:auto; display:flex; align-items:center; gap:10px; padding:14px 20px; border-radius:12px; font-size:14px; font-weight:500; color:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.18); backdrop-filter:blur(8px); max-width:400px; animation:verid-toast-in 0.3s ease-out; transition:opacity 0.3s, transform 0.3s; } .verid-toast.hiding { opacity:0; transform:translateX(100px); } .verid-toast-success { background:linear-gradient(135deg,#10b981,#059669); } .verid-toast-error { background:linear-gradient(135deg,#ef4444,#dc2626); } .verid-toast-warning { background:linear-gradient(135deg,#f59e0b,#d97706); } .verid-toast-info { background:linear-gradient(135deg,#3b82f6,#2563eb); } .verid-toast-icon { font-size:18px; flex-shrink:0; } .verid-toast-msg { flex:1; line-height:1.4; } .verid-toast-close { cursor:pointer; opacity:0.7; font-size:16px; padding:0 4px; } .verid-toast-close:hover { opacity:1; } @keyframes verid-toast-in { from { opacity:0; transform:translateX(100px); } to { opacity:1; transform:translateX(0); } } /* === ローディングオーバーレイ === */ .verid-loading-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.5); backdrop-filter:blur(4px); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.2s; } .verid-loading-overlay.active { opacity:1; pointer-events:auto; } .verid-loading-spinner { width:48px; height:48px; border:4px solid rgba(251,191,36,0.3); border-top-color:#fbbf24; border-radius:50%; animation:verid-spin 0.8s linear infinite; } .verid-loading-text { color:#fbbf24; font-size:14px; font-weight:600; margin-top:16px; text-align:center; } @keyframes verid-spin { to { transform:rotate(360deg); } } /* === フォームバリデーション === */ .verid-field-error { border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,0.15) !important; } .verid-error-msg { color:#ef4444; font-size:12px; margin-top:4px; display:none; animation:verid-shake 0.3s; } .verid-error-msg.show { display:block; } @keyframes verid-shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } } /* === レスポンシブテーブル === */ .verid-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } @media(max-width:768px) { .verid-table-wrap table { min-width:600px; } .verid-table-wrap td, .verid-table-wrap th { padding:8px 10px !important; font-size:12px !important; } }
VERIDの使い方・機能・料金・セキュリティについてのご質問にお答えします