/* ========== Theme (classic) ========== */
:root {
  --brand1:#ff8a00;  /* オレンジ（左） */
  --brand2:#ffb200;  /* オレンジ（右） */
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#fff;
  --surface:#ffffff;
  --soft:#f5f7fb;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.10);
}

/* Reset */
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
body {
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color:var(--ink); background:#fff; line-height:1.75;
}

/* ========== Header ========== */
.site-header {
  position:sticky; top:0; z-index:100;
  background:#fff; border-bottom:1px solid #eef2f7;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.header-inner {
  max-width:1200px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:12px; justify-content:space-between;
}
.logo img { height:60px; }
.btn-estimate {
  display:inline-block; padding:10px 18px; border-radius:9999px; color:#fff; font-weight:700;
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  box-shadow:0 10px 24px rgba(255,138,0,.28);
}
.pnav { display:none; }
@media (min-width:960px) {
  .pnav { display:block; }
  .pnav-list { list-style:none; display:flex; gap:22px; margin:0; padding:0; }
  .pnav a { color:#111; }
}

/* ========== Mobile Nav & Backdrop ========== */
.backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
  z-index: 900;
}
.backdrop.show { opacity: 1; pointer-events: auto; }
#mnav {
  position: fixed; top:0; right:0; bottom:0; width:min(86vw,360px);
  background:#fff; z-index:1000;
  transform:translateX(100%);
  transition:transform .25s ease;
  padding:20px;
}
#mnav[aria-hidden="false"] { transform:translateX(0); }
.mnav-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.mnav a { display:block; padding:12px 10px; border-radius:10px; background:#f8fafc; }

/* ========== Slider ========== */
.slider { position:relative; height:56vh; min-height:320px; overflow:hidden; background:#eee; }
.slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s; }
.slide.active { opacity:1; }
.slider::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15));
}
.cap {
  position:absolute; inset:auto 6% 12% 6%; z-index:2; color:#fff; text-shadow:0 6px 24px rgba(0,0,0,.45);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.cap h1 { margin:0; font-size:clamp(22px,5.2vw,44px); line-height:1.25; }
.cap p { margin:0; opacity:.95; }
.cta-hero {
  display:inline-block; margin-top:6px; padding:12px 22px; border-radius:9999px; font-weight:700; color:#fff;
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  box-shadow:0 12px 28px rgba(255,138,0,.35);
}

/* ========== Search ========== */
.search-box {
  padding:28px 16px; text-align:center;
  background:linear-gradient(180deg,#ffe6cf 0%, #fff 45%);
}
.search-box h2 { margin:0 0 6px; font-size:22px; }
.search-box p { margin:0 0 14px; color:var(--muted); }
.search { display:flex; gap:10px; max-width:760px; margin:0 auto; }
.search input {
  flex:1; padding:14px 18px; border-radius:9999px; border:1px solid #e5e9f0; background:#fff;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.03);
}
.search input:focus {
  outline:none; border-color:#ffc56a;
  box-shadow:0 0 0 4px rgba(255,178,0,.22);
}
.search button {
  padding:14px 18px; border:none; border-radius:9999px; font-weight:700; color:#fff;
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  box-shadow:0 10px 26px rgba(255,138,0,.28);
}

/* ========== Sections & Blocks ========== */
.section { padding:36px 16px; }
.inner { max-width:1200px; margin:0 auto; }

/* 3 points */
.points-3 { display:grid; gap:16px; margin:8px 0; }
.point {
  background:#fff; border-radius:16px; padding:18px; box-shadow:var(--shadow);
}
.point h3 { margin:0 0 6px; font-size:18px; }
.point p { margin:0; color:var(--muted); }

/* ========== Agent Cards (Responsive) ========== */
.tier-title { margin:22px 0 10px; font-size:1.05rem; color:#9aa4b2; }
.tier-title.gold { color:#e09a00; }
.tier-title.silver { color:#8092a5; }
.tier-title.bronze { color:#b07a38; }

.cards-12 {
  display:grid;
  grid-template-columns:repeat(2, 1fr); /* スマホ：2列固定 */
  gap:16px;
}
@media (min-width:640px) {
  .cards-12 { grid-template-columns:repeat(3, 1fr); }
}
@media (min-width:960px) {
  .cards-12 { grid-template-columns:repeat(4, 1fr); }
}

.card {
  position:relative; text-align:center; background:#fff;
  border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow); overflow:hidden;
}
.avatar-wrap { display:flex; justify-content:center; margin-bottom:10px; }
.avatar {
  width:120px; height:120px; object-fit:cover; border-radius:20px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.badge {
  position:absolute; top:12px; left:12px; padding:6px 10px; border-radius:9999px;
  background:linear-gradient(90deg,#ffd54a,#ffb300); color:#4b3b00; font-weight:700; font-size:12px;
  box-shadow:0 8px 20px rgba(255,179,0,.35);
}
.card h3 { margin:6px 0 4px; font-size:18px; }
.card p { margin:0 0 12px; color:var(--muted); }
.btn {
  display:inline-block; padding:10px 14px; border-radius:9999px; font-weight:700; color:#fff;
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  box-shadow:0 10px 24px rgba(255,138,0,.28);
}

/* Silver/Bronze nuance */
.card--pro { background:linear-gradient(180deg,#fff 0%, #fff 100%); }
.card--silver { background:linear-gradient(180deg,#f8fbff 0%, #ffffff 100%); }
.card--bronze { background:linear-gradient(180deg,#fffaf2 0%, #ffffff 100%); }

/* ========== Footer ========== */
.site-foot {
  margin-top:20px; padding:22px 16px; text-align:center;
  color:#7a8699; background:#fff;
  border-top:1px solid #eef2f7;
}

/* ========== Desktop tweaks ========== */
@media (min-width: 960px) {
  .slider { height:64vh; min-height:400px; }
  .cap { left:8%; right:auto; align-items:flex-start; }
  .points-3 { grid-template-columns:repeat(3,1fr); }
  .card { text-align:left; }
  .avatar-wrap { justify-content:flex-start; }
}



/* === モバイルメニューとバックドロップ === */
.menu-toggle{background:transparent;border:0;padding:8px;margin-left:8px;display:inline-flex}
@media(min-width:960px){.menu-toggle{display:none}} /* PCでは隠す */

.mnav{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); height:100vh;
  background:#fff; transform:translateX(100%); transition:transform .25s ease;
  z-index:1000; padding:20px; box-shadow:-12px 0 24px rgba(0,0,0,.08);
}
.mnav[aria-hidden="false"]{ transform:translateX(0); }
.mnav-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.mnav a{ display:block; padding:12px 10px; border-radius:10px; background:#f8fafc; }

.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:900;
}
.backdrop.show{ opacity:1; pointer-events:auto; }

/* === スライダーの透明アニメ === */
.slider{ position:relative; height:56vh; min-height:320px; overflow:hidden; background:#eee; }
.slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s; z-index:1; }
.slide.active{ opacity:1; }
.slider::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15)); z-index:1; }
.cap{ position:absolute; inset:auto 6% 12% 6%; z-index:2; color:#fff; text-shadow:0 6px 24px rgba(0,0,0,.45); }

<div class="inner">
  <h2 class="tier-title gold">注目の宅建士</h2>
</div>

/* ==== 注目の宅建士のプロフィール画像を丸にする ==== */
.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;  /* ← 完全な円形に */
  box-shadow: 0 6px 18px rgba(255,138,0,.35); /* ← オレンジ系の柔らかい影 */
  margin: 0 auto 10px;
  display: block;
}


/* === 注目の宅建士カード：写真を丸く、見栄えをクラファン向けに === */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
  gap: 16px;
}

@media (min-width: 960px) {
  .cards {
    grid-template-columns: repeat(4, 1fr); /* PCは4列 */
  }
}

.card {
  position: relative;
  text-align: center;
  background: #fff;
  border-radius: 18px;
  padding: 20px 16px;
  box-shadow: 0 10px 24px rgba(255, 138, 0, .25); /* オレンジ系の影 */
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(255, 138, 0, .35);
}

/* 丸いプロフィール画像 */
.avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%; /* 完全な円形 */
  box-shadow: 0 6px 18px rgba(255,138,0,.35);
  border: 3px solid #fff;
}

/* 名前と肩書き */
.card h3 {
  margin: 6px 0 4px;
  font-size: 18px;
  font-weight: 700;
}
.card p {
  margin: 0 0 12px;
  font-size: 14px;
  color: #666;
}

/* プロフィールボタン */
.card .btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 9999px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #ff8a00, #ffb200);
  box-shadow: 0 6px 16px rgba(255,138,0,.35);
}


/* === PCのズレ修正・整列強化 ===================== */
.inner{max-width:1200px;margin:0 auto;padding:0 16px;}            /* 中央寄せを強制 */
.cards-12{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));                   /* SP 2列 */
  gap:24px;
  align-items:stretch;                                             /* 各カードの高さを揃える */
  justify-items:stretch;
}
@media(min-width:960px){
  .cards-12{ grid-template-columns:repeat(4,minmax(0,1fr)); }      /* PC 4列固定 */
}

.card{
  height:100%;
  display:flex; flex-direction:column; align-items:center;         /* 内容を中央に */
  text-align:center;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 24px rgba(255,138,0,.20),0 4px 10px rgba(255,138,0,.10);
  padding:20px 16px;
}

/* ボタンは下に揃う（高さ差を吸収） */
.card .btn{ margin-top:auto; }

/* タイトルの位置ズレ解消＆見栄え */
.tier-title{
  margin:28px 0 14px;
  display:inline-block;
  padding:6px 10px;
  background:linear-gradient(90deg,#3b82f6,#60a5fa);
  color:#fff; border-radius:8px; font-weight:700;
}

/* 画像を“真ん丸＋オレンジ影”で中央に */
.avatar-wrap{display:flex; justify-content:center; align-items:center; margin-bottom:12px;}
.avatar{
  width:120px; height:120px; object-fit:cover; border-radius:50%;
  border:3px solid #fff; box-shadow:0 8px 22px rgba(255,138,0,.35);
  display:block; margin:0 auto;
}

/* ====== PCズレ取り・タイトル位置合わせ・丸写真強制 ====== */

/* コンテナは常に中央＆左右パディング統一 */
.inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* 「注目の宅建士」見出しはブロック表示にして左基準をグリッドと揃える */
.tier-title{
  position:static !important;   /* 念のため強制 */
  display:block !important;
  margin:28px 0 14px !important;
  padding:0 !important;         /* 左に謎の余白が入っていた場合をリセット */
  transform:none !important;    /* translate などを無効化 */
}

/* グリッド：SP 2列／PC 4列。高さも揃える */
.cards-12{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
  justify-items:stretch;
}
@media (min-width:960px){
  .cards-12{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* カードの高さ揃え＆中央寄せ */
.card{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#fff;
  border-radius:18px;
  padding:20px 16px;
  box-shadow:0 10px 24px rgba(255,138,0,.20),0 4px 10px rgba(255,138,0,.10);
}
.card .btn{ margin-top:auto; }  /* ボタンを最下部に揃える */

/* 丸写真（念のため強制） */
.avatar-wrap{display:flex;justify-content:center;align-items:center;margin-bottom:12px;}
.avatar{
  width:120px;height:120px;object-fit:cover;border-radius:50% !important;
  border:3px solid #fff;box-shadow:0 8px 22px rgba(255,138,0,.35);
  display:block;margin:0 auto;
}


/* === 注目の宅建士：画像スタイル === */
.avatar {
  width: 140px;              /* サイズ調整（お好みで変更可） */
  height: 140px;
  object-fit: cover;          /* 画像をはみ出さずに丸く切り抜き */
  border-radius: 50%;         /* ←丸くする */
  display: block;
  margin: 0 auto 10px;        /* 中央寄せ＋下に余白 */
  box-shadow: 0 8px 18px rgba(255, 138, 0, 0.35); /* オレンジの影 */
  border: 3px solid #fff;     /* 白枠（高級感UP） */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバーした時に少し浮かせる */
.card:hover .avatar {
  transform: scale(1.05);
  box-shadow: 0 12px 24px rgba(255, 138, 0, 0.45);
}

.tier-title.gold {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  margin: 0 auto 20px auto;
  text-align: center;
}


/* ===== ポイント3のカード：オレンジ色のドロップシャドウを付与 ===== */
.points-3 .point{
  position: relative;
  background: #fff;                 /* グレー面だと影が目立ちにくいので白に */
  border-radius: 12px;
  padding: 16px;
  overflow: visible;                /* 影のにじみを見せるために可視化 */
  box-shadow:
    /* メインのオレンジ影 */
    0 12px 28px rgba(255, 153, 0, 0.22),
    /* 補助の淡い影（立体感） */
    0 4px 10px rgba(255, 153, 0, 0.12);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* 触ったときに少し持ち上がる演出（任意） */
.points-3 .point:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 44px rgba(255, 153, 0, 0.28),
    0 6px 14px rgba(255, 153, 0, 0.14);
}



/* ===== 注目の宅建士：レイアウトを元に戻す ===== */

/* 行間・コンテナ */
.section { padding: 40px 16px; }
.inner { max-width: 1200px; margin: 0 auto; }

/* タイトル色（ゴールド／シルバー／ブロンズ） */
.tier-title { margin: 24px 0 12px; font-size: 1.1rem; }
.tier-title.gold { color: #b8860b; }
.tier-title.silver { color: #6b7280; }
.tier-title.bronze { color: #b45309; }

/* ★ 列数指定：スマホ2列、PC4列（各tierとも同じレイアウト） */
.cards,
.cards.cards-12 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列（SP） */
  gap: 16px;
}
@media (min-width: 960px) {
  .cards,
  .cards.cards-12 {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4列（PC） */
  }
}

/* カード（ドロップシャドウを元の雰囲気に） */
.card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  overflow: hidden;
  /* シャドウ強めに（上品めの二重影） */
  box-shadow:
    0 10px 24px rgba(17, 24, 39, 0.12),
    0 2px 6px rgba(17, 24, 39, 0.06);
}

/* アバターの見た目（円形＆影） */
.avatar-wrap { display: flex; justify-content: center; }
.card .avatar {
  width: 120px; height: 120px; object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  margin: 0 auto 10px;
}

/* ラベル（PR／おすすめ／掲載枠）を画像の上に重ねる */
.badge {
  position: absolute; top: 10px; left: 10px;
  background: #111827; color: #fff;
  padding: 4px 10px; border-radius: 9999px; font-size: .75rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* ボタン（元の淡い色味をキープ） */
.card .btn {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 9999px;
  background: #f3f4f6;      /* ベース */
  color: #111827;
  text-decoration: none;
}
.card--pro .btn    { background: #ffedd5; } /* ゴールド */
.card--silver .btn { background: #e5e7eb; } /* シルバー */
.card--bronze .btn { background: #fef3c7; } /* ブロンズ */

/* ポイント3（元の淡いカード調） */
.points-3 {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px; margin:16px 0;
}
.point {
  background:#f9fafb; border-radius:12px; padding:16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}


<style id="center-fix">
/* === 検索セクションを中央寄せ === */
.search-box{
  position:relative !important;
  z-index:0 !important;
  padding:28px 16px !important;
  text-align:center !important;
}
.search-box h2{ margin:0 0 8px !important; }
.search-box p{ margin:0 0 16px !important; color:#4b5563 !important; }

/* 入力＋ボタンを中央で横並び（小画面は縦積み） */
.search-box .search{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.search-box input{
  width:min(92vw, 480px) !important;
  max-width:100% !important;
  padding:12px 14px !important;
  border:1px solid #d1d5db !important;
  border-radius:10px !important;
  outline:0 !important;
}
.search-box button{
  padding:12px 16px !important;
  border:0 !important;
  border-radius:10px !important;
  background:#007acc !important;
  color:#fff !important;
  font-weight:700 !important;
  cursor:pointer !important;
}
@media (max-width: 480px){
  .search-box .search{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }
  .search-box button{ width:100% !important; }
}

/* === お知らせ（ボタン含む）を中央寄せ === */
.greeting .greeting-inner{ text-align:center !important; }
.greeting .greeting-actions{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
</style>

/* ===== Minimal Member-CTA (lean, non-intrusive) ===== */
:root{ --reg-orange:#ff9900; --reg-o25:rgba(255,153,0,.25); --reg-o35:rgba(255,153,0,.35); }

/* 細いバー：主張しすぎず、でも視認性は確保 */
.register-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#fff; border-radius:14px; padding:14px 18px;
  box-shadow:0 12px 30px var(--reg-o25), 0 3px 10px var(--reg-o35);
}
.register-copy{ margin:0; font-size:.98rem; color:#374151; }
.register-copy .thin{ color:#6b7280; }
.btn-register{
  display:inline-block; padding:10px 16px; border-radius:9999px; font-weight:700;
  background:var(--reg-orange); color:#fff; text-decoration:none;
  box-shadow:0 6px 14px var(--reg-o35);
  white-space:nowrap;
}
@media (max-width: 640px){
  .register-bar{ flex-direction:column; text-align:center; }
  .btn-register{ width:100%; }
}

/* カードのサブCTA（既存の主ボタンはそのまま） */
.card .btn-sub{
  margin-top:6px;
  background:#fff7e6; color:#7c2d12;
  box-shadow:0 4px 10px var(--reg-o25);
}

/* モバイル専用 固定ピルCTA（PCでは控えめに非表示） */
#registerSticky{
  display:none;
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:14px; z-index:2147483645;
  background:var(--reg-orange); color:#fff; font-weight:700; text-decoration:none;
  padding:12px 18px; border-radius:9999px;
  box-shadow:0 12px 30px var(--reg-o25), 0 3px 10px var(--reg-o35);
}
@media (max-width: 768px){ #registerSticky{ display:inline-block; } }

                      
/* ===== Full-width Blue Register Banner ===== */
:root{
  --reg-blue1:#0ea5e9;  /* 水色寄り */
  --reg-blue2:#2563eb;  /* 濃い青 */
}

#regBlue{
  width:100%;
  background: linear-gradient(90deg, var(--reg-blue1), var(--reg-blue2));
  color:#fff;
}
#regBlue .regblue-inner{
  max-width:1200px; margin:0 auto;
  padding:18px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#regBlue .regblue-lead{
  margin:0;
  font-weight:800;
  font-size:clamp(18px, 4vw, 22px);
  letter-spacing:.02em;
}
#regBlue .regblue-sub{
  margin:0;
  opacity:.95;
  font-size:.96rem;
}
#regBlue .regblue-btn{
  display:inline-block;
  background:#fff; color:#1e3a8a;    /* 文字は濃紺で視認性UP */
  font-weight:700; text-decoration:none;
  padding:10px 18px; border-radius:9999px; white-space:nowrap;
  box-shadow:0 8px 20px rgba(14,165,233,.35), 0 2px 6px rgba(14,165,233,.25);
  transition:transform .05s ease;
}
#regBlue .regblue-btn:active{ transform:translateY(1px); }

/* スマホ最適化：中央寄せ＆ボタン全幅 */
@media (max-width: 800px){
  #regBlue .regblue-inner{ flex-direction:column; text-align:center; gap:8px; }
  #regBlue .regblue-btn{ width:100%; }
}

/* 既存の“青帯”が上下に密着しないよう軽く余白（必要なら） */
.search-box{ margin-top: 0 !important; }


/* === Agent cards layout fix: SP=2列, PC=4列 === */
.section .inner{ max-width:1200px; margin:0 auto; padding:0 16px; } /* 念のため器を広げる */

#tierGold, #tierSilver, #tierBronze, .cards{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important; /* スマホ=2列 */
  gap:16px !important;
}
@media (min-width: 1024px){
  #tierGold, #tierSilver, #tierBronze, .cards{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important; /* PC=4列 */
  }
}
/* 古い幅指定/floatの無効化 */
.cards > .card{ width:auto !important; float:none !important; margin:0 !important; }


/* 棒グラフの色部分をブロック化して幅%が効くようにする */
.fin-bar .fill{
  display:block;      /* ← これが肝心！ */
  height:100%;
  background:var(--pri);
}


/* ページ全体に左右余白をつける */
.page-container {
  max-width: 1200px;  /* 最大幅 */
  margin: 0 auto;     /* 中央寄せ */
  padding: 0 16px;    /* 左右余白 */
}












/* ===== 強制パッチ：ナビの不要な広がりを全部リセット ===== */
:root{ --nav-gap: 18px; }

/* ヘッダーの行レイアウトを固定 */
header, .header, .site-header, .topbar {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap: var(--nav-gap) !important;
}

/* ナビは“1つ目だけ”残し、横並び・左寄せ・均一間隔 */
header nav, .header nav, nav[role="navigation"] {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap: var(--nav-gap) !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
}

/* 二重ナビ対策：2つ目以降の nav/ul は消す */
header nav ~ nav,
header nav ul ~ ul,
.header nav ~ nav {
  display:none !important;
}

/* li/a が勝手に広がるのを禁止（flex:1 や autoマージンの無効化） */
header nav > *, header nav li, header nav a,
.header nav > *, .header nav li, .header nav a {
  flex:0 0 auto !important;
  margin:0 !important;
}

/* “最後の項目が右へ飛ぶ”系のルールを殺す */
header nav > *:last-child,
.header nav > *:last-child {
  margin-left:0 !important;
}

/* プロチェックをピン留め（万一個別に auto が当たっている場合） */
a[href*="inspection"], a[href*="プロチェック"] {
  margin-left:0 !important;
  flex:0 0 auto !important;
}

/* 右端の「無料見積り」(CTA) だけ右へ寄せたい時だけ使用 */
a.cta, .cta, .header .cta {
  margin-left:auto !important;
}

















.results {
  padding: 40px;
  text-align: center;
}

.results h2 {
  margin-bottom: 10px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
  text-align: left;
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-5px);
}

.card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.card h3 {
  margin-bottom: 10px;
  color: #333;
}