/* =========================
   相場ページ 共通（スコープ：.price-page）
   ========================= */

/* 変数（フォールバック付） */
:root{
  --c-primary: #3b82f6;
  --c-primary-dark: #2563eb;
  --c-deep: #2c3e50;
  --radius: 8px;
  --shadow: 0 4px 6px rgba(0,0,0,.1);
}

/* ------------ ベース / レイアウト ------------ */
.price-page .container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  position:relative;
  z-index:1;
  width:100%;
}

/* Hero */
.price-page .header{
  background:linear-gradient(135deg,#4a6fa1 0%, var(--c-deep) 100%);
  height:180px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.price-page .header::before{
  content:'';
  position:absolute; inset:0;
  background-image:url('https://estate-agent.net/seiyaku/images/seiyakubanner.png');
  background-size:cover; background-position:center;
  opacity:.15; transform:scale(1.1);
}

/* 見出し（テーマ装飾をリセット） */
.price-page .card-header > h4,
.price-page .card-header > h4::before,
.price-page .card-header > h4::after{
  background:none !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  outline:0 !important;
  content:none !important;
}
.price-page .card-header > h4{
  all:unset;
  display:block;
  font-size:1.15rem;
  line-height:1.35 !important;
  margin:0 !important;
  padding:0 !important;
  font-weight:700;
  color:#111827;
}
.price-page h2{ font-size:1.8rem; color:#2c3e50; margin:25px 0 15px; }
.price-page h3{ font-size:1.4rem; color:var(--c-primary); margin:25px 0 15px; }

/* カード＆統計：Grid */
.price-page .info-card-container,
.price-page .stats-container{
  display:grid;
  gap:20px;
  margin:0 0 30px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width: 992px){
  .price-page .info-card-container,
  .price-page .stats-container{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .price-page .info-card-container,
  .price-page .stats-container{ grid-template-columns:1fr; }
}

/* ------------ コンポーネント ------------ */

/* インフォカード（背景は変数で制御） */
.price-page .info-card{
  all:unset;                 /* テーマ影響をリセット */
  display:block;
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .2s ease;
  background:var(--card-bg, #fff);
}
.price-page .info-card:hover{ transform:translateY(-4px); }
.price-page .info-card.selling   { --card-bg:#ebf5ff; border-left:5px solid var(--c-primary); }
.price-page .info-card.actual    { --card-bg:#ecfdf5; border-left:5px solid #10b981; }
.price-page .info-card.difference{ --card-bg:#fffbeb; border-left:5px solid #f59e0b; }
.price-page .card-header{ display:flex; align-items:center; margin:0 0 10px; }
.price-page .card-header i{ font-size:1.25rem; margin-right:10px; }

/* ステータスカード */
.price-page .stats-card{
  background:#fff;
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .2s ease;
}
.price-page .stats-card:hover{ transform:translateY(-4px); }
.price-page .stats-container{ overflow:visible; } /* 影が切れないように */
.price-page .stats-card.price-per-tsubo{ border-bottom:4px solid var(--c-primary); }
.price-page .stats-card.price-per-sqm{  border-bottom:4px solid #10b981; }
.price-page .stats-card.transactions{   border-bottom:4px solid #f59e0b; }
.price-page .stats-label{ font-size:.9rem; letter-spacing:.04em; color:#6b7280; margin:0 0 6px; }
.price-page .stats-value{ display:flex; align-items:flex-end; }
.price-page .stats-value .number{ font-size:1.8rem; font-weight:700; color:#1f2937; }
.price-page .stats-value .unit{ font-size:1rem; color:#4b5563; margin-left:6px; }
.price-page .stats-comparison{ display:flex; align-items:center; font-size:.9rem; margin-top:8px; gap:6px; color:#6b7280; }
.price-page .stats-comparison .value{ font-weight:600; }
.price-page .stats-comparison .value.positive{ color:#10b981; }
.price-page .stats-comparison .value.negative{ color:#ef4444; }

/* チャートブロック */
.price-page .chart-container{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  margin:0 0 30px;
}
.price-page .chart-header{ display:flex; justify-content:space-between; align-items:center; margin:0 0 14px; }
.price-page .chart-wrapper{ height:300px; position:relative; }
.price-page .chart-wrapper canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; }
.price-page .data-table-header{ display:flex; justify-content:space-between; align-items:center; margin:0 0 12px; gap:12px; flex-wrap:wrap; }

/* ランキング */
.price-page .ranking-item{ display:flex; align-items:center; gap:12px; margin:10px 0; }
.price-page .ranking-name{ width:7em; min-width:7em; font-weight:600; }
.price-page .ranking-bar{ height:22px; background:#f3f4f6; border-radius:11px; overflow:hidden; flex:1; }
.price-page .ranking-bar-fill{ height:100%; background:linear-gradient(90deg,var(--c-primary) 0%, var(--c-primary-dark) 100%); }
.price-page .ranking-value{ width:7.5em; min-width:7.5em; text-align:right; font-weight:700; }

/* CTA / フッター */
.price-page .cta-section{
  background:var(--c-primary);
  color:#fff;
  border-radius:var(--radius);
  padding:24px;
  display:flex;
  align-items:center;
  gap:20px;
  margin:0 0 30px;
}

.price-page .cta-icon{ font-size:2rem; line-height:1; }
.price-page footer{ background:#1f2937; color:#fff; padding:24px 0; margin:50px 0 0; text-align:center; }
.price-page .source-note{ font-size:.85rem; color:#6b7280; margin:16px 0 0; }
.price-page .source-note a{ color:#6b7280; text-decoration:underline; }


/* 地域相場一覧 */

    .button-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px;
      max-width: 900px;  /* 必要に応じて調整 */
      margin: 0 auto 25px auto;
    }

    .button-container a {
      display: block;
      padding: 10px 0;
      border: 1px solid #009fe8;
      border-radius: 6px;
      text-decoration: none;
      color: #009fe8;
      font-size: 16px;
      text-align: center;
      transition: all 0.2s;
    }

    .button-container a:hover {
      background-color: #009fe8;
      color: #fff;
    }

    /* スマホ時は必ず2列均等幅 */
    @media (max-width: 600px) {
      .button-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    
    

/* ------------ レスポンシブ ------------ */
@media (max-width: 992px){
  .price-page h2{ font-size:1.5rem; }
}
@media (max-width: 768px){
  .price-page .header{ height:150px; }
  .price-page .chart-wrapper{ height:260px; }
}
@media (max-width: 576px){
  .price-page .container{ padding:0 15px; }
  .price-page .cta-section{ flex-direction:column; text-align:center; }
  .price-page .cta-icon{ margin:0 0 6px; }
  .price-page th, .price-page td{ padding:10px 12px; font-size:.95rem; }
}