.name-fortune {
  --nf-main: #65527a;
  --nf-main-dark: #493a5c;
  --nf-main-soft: #f4f0f7;
  --nf-accent: #a77b43;
  --nf-text: #333238;
  --nf-muted: #716d78;
  --nf-line: #e4dfe8;
  --nf-bg: #fff;
  --nf-shadow: 0 8px 28px rgba(52, 43, 63, .08);
  box-sizing: border-box;
  color: var(--nf-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.85;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}
.name-fortune *, .name-fortune *::before, .name-fortune *::after { box-sizing: inherit; }
.name-fortune a { color: var(--nf-main); text-decoration: none; }
.name-fortune a:hover { text-decoration: underline; }
.name-fortune h1, .name-fortune h2, .name-fortune h3 { color: var(--nf-main-dark); line-height: 1.45; margin-top: 0; }
.name-fortune p { margin: 0 0 1em; }
.nf-hero { background: linear-gradient(145deg,#fff 0%,var(--nf-main-soft) 100%); border: 1px solid var(--nf-line); border-radius: 22px; box-shadow: var(--nf-shadow); padding: 46px 42px; text-align: center; }
.nf-kicker { color: var(--nf-accent); font-size: .88rem; font-weight: 700; letter-spacing: .13em; margin-bottom: .4em!important; }
.nf-hero h1 { font-size: clamp(2rem,6vw,3rem); letter-spacing: .08em; margin-bottom: .35em; }
.nf-hero > p:not(.nf-kicker) { color: var(--nf-muted); margin-left: auto; margin-right: auto; max-width: 650px; }
.nf-search { background: #fff; border: 1px solid var(--nf-line); border-radius: 16px; margin: 28px auto 0; max-width: 610px; padding: 22px; text-align: left; }
.nf-search label { display:block; font-weight:700; margin-bottom:8px; }
.nf-search-row { display:flex; gap:10px; }
.nf-search input { border:1px solid #cfc7d5; border-radius:10px; flex:1; font-size:1.05rem; min-width:0; padding:13px 15px; }
.nf-search input:focus { border-color:var(--nf-main); box-shadow:0 0 0 3px rgba(101,82,122,.12); outline:none; }
.nf-search button,.nf-button { background:var(--nf-main); border:0; border-radius:10px; color:#fff!important; cursor:pointer; display:inline-flex; font-weight:700; justify-content:center; padding:13px 20px; text-decoration:none!important; }
.nf-search button:hover,.nf-button:hover { background:var(--nf-main-dark); }
.nf-search small { color:var(--nf-muted); display:block; margin-top:8px; }
.nf-kana-nav { margin:30px 0; }
.nf-kana-nav h2 { font-size:1.25rem; text-align:center; }
.nf-kana-grid { display:grid; gap:8px; grid-template-columns:repeat(10,1fr); }
.nf-kana-grid a { background:#fff; border:1px solid var(--nf-line); border-radius:9px; font-weight:700; padding:10px 4px; text-align:center; }
.nf-kana-grid a:hover { background:var(--nf-main-soft); text-decoration:none; }
.nf-two-column { display:grid; gap:22px; grid-template-columns:1fr 1fr; margin:32px 0; }
.nf-panel,.nf-guide,.nf-compatibility,.nf-article { background:#fff; border:1px solid var(--nf-line); border-radius:18px; box-shadow:var(--nf-shadow); padding:26px; }
.nf-panel-heading { align-items:center; display:flex; gap:15px; justify-content:space-between; margin-bottom:16px; }
.nf-panel-heading h2 { font-size:1.15rem; margin:0; }
.nf-panel-heading a { font-size:.85rem; white-space:nowrap; }
.nf-name-list { display:grid; gap:8px; }
.nf-name-card { align-items:center; background:#faf9fb; border-radius:9px; display:grid; gap:8px; grid-template-columns:48px 1fr auto; padding:10px 12px; }
.nf-name-card:hover { background:var(--nf-main-soft); text-decoration:none; }
.nf-rank { color:var(--nf-accent); font-size:.8rem; }
.nf-arrow { color:#aaa1b2; font-size:1.5rem; }
.nf-guide { margin:32px 0; }
.nf-guide > h2 { text-align:center; }
.nf-guide-grid { display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.nf-guide-grid article { background:#faf9fb; border-radius:12px; padding:18px; }
.nf-guide-grid h3 { font-size:1rem; margin-bottom:6px; }
.nf-guide-grid p { color:var(--nf-muted); font-size:.92rem; margin:0; }
.nf-breadcrumb { align-items:center; color:var(--nf-muted); display:flex; flex-wrap:wrap; font-size:.85rem; gap:8px; margin-bottom:18px; }
.nf-result-header { background:linear-gradient(145deg,#fff,var(--nf-main-soft)); border:1px solid var(--nf-line); border-radius:20px; box-shadow:var(--nf-shadow); margin-bottom:25px; padding:38px 30px; text-align:center; }
.nf-result-header h1 { font-size:clamp(1.7rem,5vw,2.5rem); margin:12px 0 8px; }
.nf-profile-title { color:var(--nf-accent); font-weight:700; }
.nf-gender { border-radius:999px; display:inline-block; font-size:.78rem; font-weight:700; padding:3px 10px; }
.nf-gender.is-male { background:#edf3fa; color:#416487; }
.nf-gender.is-female { background:#faeef2; color:#9b526b; }
.nf-gender.is-unisex { background:#eef7f1; color:#4c765d; }
.nf-rank-line { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:16px; }
.nf-rank-line span { background:#fff; border:1px solid var(--nf-line); border-radius:999px; font-size:.82rem; padding:5px 12px; }
.nf-result-grid { display:grid; gap:18px; grid-template-columns:1fr 1fr; width: 95%;margin: 0 auto;}
.nf-result-card { background:#fff; border:1px solid var(--nf-line); border-radius:16px; padding:25px; }
.nf-result-card h2 { border-bottom:1px solid var(--nf-line); font-size:1.2rem; margin-bottom:15px; padding-bottom:10px; }
.nf-card-wide { grid-column:1/-1; }
.nf-positive { border-top:4px solid #83a98e; }
.nf-caution { border-top:4px solid #c79c68; }
.nf-job-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.nf-job-tags span { background:var(--nf-main-soft); border-radius:999px; color:var(--nf-main-dark); font-size:.85rem; padding:5px 12px; }
.nf-compatibility { margin-top:25px; }
.nf-compatibility > h2 { text-align:center; }
.nf-compat-grid { display:grid; gap:14px; }
.nf-compat-card { background:#faf9fb; border-radius:13px; padding:18px; }
.nf-compat-head { align-items:center; display:flex; gap:12px; justify-content:space-between; margin-bottom:8px; }
.nf-compat-head a { font-size:1.15rem; font-weight:700; }
.nf-compat-head span { color:var(--nf-accent); font-size:.78rem; font-weight:700; }
.nf-compat-card p { color:var(--nf-muted); font-size:.93rem; margin:0; }
.nf-back-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:25px 0; }
.nf-button-sub { background:#fff; border:1px solid var(--nf-main); color:var(--nf-main)!important; }
.nf-button-sub:hover { background:var(--nf-main-soft); }
.nf-note { background:#f7f5f8; border-radius:10px; color:var(--nf-muted); font-size:.82rem; padding:14px 18px; }
.nf-note p { margin:0; }
.nf-list-header { background:var(--nf-main-soft); border-radius:16px; margin-bottom:20px; padding:28px; text-align:center; }
.nf-list-header h1 { margin-bottom:5px; }
.nf-list-header p { color:var(--nf-muted); margin:0; }
.nf-filter-links { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px; }
.nf-filter-links a { background:#fff; border:1px solid var(--nf-line); border-radius:999px; padding:7px 14px; }
.nf-kana-nav-small { margin:20px 0; }
.nf-search-results { display:grid; gap:10px; }
.nf-search-result { align-items:center; background:#fff; border:1px solid var(--nf-line); border-radius:12px; display:grid; gap:12px; grid-template-columns:auto 85px 1fr auto; padding:15px; }
.nf-search-result:hover { background:var(--nf-main-soft); text-decoration:none; }
.nf-search-result small { color:var(--nf-muted); }
.nf-message { background:#fff; border:1px solid var(--nf-line); border-radius:16px; padding:30px; text-align:center; }
.nf-message-error { border-color:#d8a1a1; }
.nf-message-success { background:#f3f8f4; margin-bottom:16px; padding:15px; }
.nf-sitemap-group { margin-bottom:25px; }
.nf-sitemap-group h2 { border-bottom:1px solid var(--nf-line); padding-bottom:8px; }
.nf-sitemap-links { display:flex; flex-wrap:wrap; gap:8px; }
.nf-sitemap-links a { background:#fff; border:1px solid var(--nf-line); border-radius:8px; padding:7px 12px; }
.nf-article h2 { border-left:4px solid var(--nf-main); font-size:1.25rem; margin:2em 0 .7em; padding-left:12px; }
.nf-article h2:first-child { margin-top:0; }
.name-fortune code { background:#f1eef3; border-radius:4px; padding:2px 5px; }
.name-fortune {
  --nf-main: #65527a;
}
@media (max-width:700px) {
  .name-fortune { width:95%; }
  .nf-hero { padding:32px 20px; }
  .nf-search-row { flex-direction:column; }
  .nf-search button { width:100%; }
  .nf-kana-grid { grid-template-columns:repeat(5,1fr); }
  .nf-two-column,.nf-guide-grid,.nf-result-grid { grid-template-columns:1fr; width: 95%;margin: 0 auto;}
  .nf-card-wide { grid-column:auto; }
  .nf-panel,.nf-guide,.nf-compatibility,.nf-article { padding:20px; }
  .nf-search-result { grid-template-columns:auto 1fr auto; }
  .nf-search-result small { grid-column:2/3; }
}
@media (max-width:420px) {
  .nf-result-header { padding:28px 16px; }
  .nf-result-card { padding:20px; }
  .nf-compat-head { align-items:flex-start; flex-direction:column; gap:3px; }
}