/* Visa Lawyers Cafe 共通スタイル（トップ以外の一覧・下層ページ用）
   色はトップページ index.html の定義に合わせている。ここを直せば全ページに効く。 */
:root {
  --main-color: #2c6fbb;
  --main-color-light: #4a8fd6;
  --accent-color: #ff5f7e;
  --cta-color: #8a63f2;
  --bg-light: #f6f8fc;
  --text-color: #2a2a2a;
  --line: #e7ebef;
  --radius: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Noto Sans JP", "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-color);
  line-height: 1.75;
  background: #fff;
}
a { color: inherit; }
img { max-width: 100%; }

header.site {
  background: #fff;
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
header.site .logo img { height: 34px; display: block; }
.lang-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-switch a {
  color: var(--text-color);
  text-decoration: none;
  border: 1px solid #ddd;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.85em;
  transition: background 0.15s, color 0.15s;
}
.lang-switch a:hover { background: #f3f3f3; }
.lang-switch a.current { background: var(--cta-color); border-color: var(--cta-color); color: #fff; font-weight: 700; }

.page-head {
  background: linear-gradient(120deg, #eaf3ff 0%, #f3ecfb 45%, #fdeef0 100%);
  padding: 44px 24px 40px;
  text-align: center;
}
.page-head h1 { font-size: 1.8em; font-weight: 900; margin: 0 0 12px; }
.page-head p { max-width: 680px; margin: 0 auto; color: #555; font-size: 0.98em; }

main { max-width: 1000px; margin: 0 auto; padding: 40px 24px 48px; }
section { margin-bottom: 56px; }
.section-head { text-align: center; margin-bottom: 28px; }
.section-head h2 {
  display: inline-block; color: var(--main-color); font-size: 1.3em;
  margin: 0; padding-bottom: 10px; border-bottom: 4px solid var(--accent-color);
}

.crumb { max-width: 1000px; margin: 0 auto; padding: 16px 24px 0; font-size: 0.82em; color: #777; }
.crumb a { color: #777; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.cat-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; box-shadow: 0 4px 16px rgba(16,58,92,0.06);
  text-decoration: none; display: block;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(16,58,92,0.12); }
.cat-card .icon { font-size: 1.8em; margin-bottom: 8px; display: block; }
.cat-card h3 { margin: 0 0 8px; color: var(--main-color); font-size: 1.05em; }
.cat-card p { font-size: 0.9em; margin: 0 0 10px; color: #555; }
.cat-card .count { font-size: 0.78em; color: var(--cta-color); font-weight: 700; }

.art-list { list-style: none; padding: 0; margin: 0; }
.art-list li {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 14px; background: #fff;
  box-shadow: 0 4px 16px rgba(16,58,92,0.05);
}
.art-list .badge {
  background: var(--main-color); color: #fff; font-size: 0.72em; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; display: inline-block; margin-bottom: 8px;
}
.art-list h3 { margin: 0 0 6px; font-size: 1.06em; }
.art-list h3 a { color: var(--main-color); text-decoration: none; }
.art-list h3 a:hover { text-decoration: underline; }
.art-list p { margin: 0 0 10px; font-size: 0.9em; color: #555; }
.art-list .langs { font-size: 0.78em; color: #888; }
.art-list .langs a { color: var(--cta-color); text-decoration: none; margin-right: 8px; }

.pending {
  background: var(--bg-light); border: 1px dashed #c8d2e0; border-radius: var(--radius);
  padding: 20px 24px; font-size: 0.88em; color: #667;
}

.cta-band {
  background: var(--bg-light); border-radius: var(--radius);
  padding: 40px 24px; text-align: center;
}
.cta-band h2 { color: var(--main-color); margin: 0 0 10px; font-size: 1.25em; }
.cta-band p { margin: 0 0 20px; color: #555; font-size: 0.95em; }
.cta-btn {
  display: inline-block;
  background: var(--cta-color); color: #fff; font-weight: 700;
  padding: 13px 32px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 8px 20px rgba(138,99,242,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(138,99,242,0.45); }

.hs-form-frame { max-width: 500px; margin: 24px auto 0; text-align: left; }

footer.site {
  background: #17232e; color: #aab4bd; text-align: center;
  padding: 28px; font-size: 0.85em;
}
footer.site .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
footer.site img.footer-logo { height: 26px; opacity: 0.9; }
footer.site a { color: #cfd8e0; }

/* 運営団体ロゴ（横組み）。背景が白の画像なので、暗いフッターでは白いチップに載せる */
footer.site .feso-yoko {
  background: #fff; padding: 9px 16px; border-radius: 6px;
  max-width: 300px; width: 100%; height: auto; display: block;
}