/*成約ページテーブル関連*/


/*表全体*/


.box1 {
margin: 2.5em auto;
width: 97%;
height: 300px;
text-align: center;
overflow-y: scroll;
background-color: #ffffff;
border: solid 4px #cccccc;
scrollbar-color: #FAF8D8 #cccccc;
scrollbar-width: auto;
border-radius: 5px;

}

main a{
	text-decoration: none;
	color: #1a73e8;
}

main a:hover {
    color: #ff0000; /* ホバー時の色 */
}
.box1::-webkit-scrollbar {
    width: 8px;
}

.box1::-webkit-scrollbar-thumb {
    width: 6px;
    border-radius: 5px;
}

@supports not (display: grid) { //gridの使用ができないブラウザの場合、括弧の中の記述を適応。
  div {
    display: flex; 
  }
}

.box1 td:first-child {
  background: #fbf5f5;
}

.box1 td , .box1 th , .box1 tr{
    white-space: nowrap;
    padding: 2px ;　/* 上下 2pxの余白 */
    border-collapse: collapse;
    border: 1px solid #a3a3a3;　/*表全体を1pxの線で囲う*/

  }

.box1 table,.box2 table {
margin-right: auto;
margin-left: auto;
border-collapse: collapse;
text-align: center;
width: 100%;
empty-cells: useful;

}

.box1 thead th,.box2 thead th {
color: #666;
background-color: #a2d4fa;
padding: 0.8rem 0.5rem;
text-align: center;
position: sticky;
top: 0;
empty-cells: useful;

}

.scroller::-webkit-scrollbar {
    width: 8px;
    background-color: #DE94BF; 
}

.scroller::-webkit-scrollbar-thumb {
    background: #FAF8D8;
    width: 6px;
    border-radius: 5px;
}


.c_price {
color: #00acfe;
font-size: 24px;
font-weight: bold;
}
.b_price {
color: #192cff;
font-weight: bold;
}
.c_green {
color: #19bf19;
font-weight: bold;
}
.c_red {
color: #ff2c2f;
font-weight: bold;
}

@media screen and (max-width: 640px) {
  .box1 {
    width: 100%;
  }
  .box1 thead {
    display: none;
    empty-cells: useful;

  }
  .box1 tr {
    width: 100%;
  }
  .box1 td {
    display: block;
    text-align: right;
    width: 100%;
    padding: 2px ;　/* 上下 2pxの余白 */
    white-space: nowrap;
    empty-cells: useful;

  }
  .box1 td:first-child {
    background: #a2d4fa;
    color: #666;
    font-weight: bold;
    text-align: center;
    empty-cells: useful;
  }
  .box1 td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
    empty-cells: useful;

  }
}
/*ステップ　1 2 3 */

    .step-heading {
      font-size: 1.5em;
      font-weight: bold;
      text-align: center;
      margin: 20px 0;
      color: #333;
    }

    .step-highlight {
      display: inline-block;
      background-color: #E63946; /* 赤を基調 */
      color: #fff;
      font-size: 0.9em;
      font-weight: bold;
      padding: 5px 10px;
      border-radius: 20px;
      margin: 0 5px;

/*ここから新レイアウト */

    /* ====== Hero ====== */
    .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;
    }
    .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);
    }
    .container{
      max-width:1200px;
      margin:0 auto;
      padding:0 20px;
      position:relative;
      z-index:1;
      width:100%;
    }
    h1{font-size:2.5rem;color:#fff;margin:0 0 8px}
    h2{font-size:1.8rem;margin:30px 0 20px;color:#2c3e50}
    h3{font-size:1.4rem;margin:25px 0 15px;color:var(--c-primary)}
    .intro-text{font-size:1.05rem;line-height:1.7;margin:0 0 26px}

    /* ====== Cards & Stats: Grid で確実に“カード型”に ====== */
    .info-card-container,
    .stats-container{
      display:grid;
      gap:20px;
      margin:0 0 30px;
      grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .stats-container{grid-template-columns:repeat(3,minmax(0,1fr));}
    @media (max-width: 992px){
      .info-card-container{grid-template-columns:repeat(2,minmax(0,1fr))}
      .stats-container{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media (max-width: 640px){
      .info-card-container,
      .stats-container{grid-template-columns:1fr}
    }

    .info-card{
      padding:20px;border-radius:var(--radius);
      box-shadow:var(--shadow);
      transition:transform .2s ease;
      background:#fff;
    }
    .info-card:hover{transform:translateY(-4px)}
    .info-card.selling{background:#ebf5ff;border-left:5px solid var(--c-primary)}
    .info-card.actual{background:#ecfdf5;border-left:5px solid #10b981}
    .info-card.difference{background:#fffbeb;border-left:5px solid #f59e0b}

    .card-header{display:flex;align-items:center;margin:0 0 10px}
    .card-header i{font-size:1.25rem;margin-right:10px}
    .card-header h4{font-size:1.15rem;margin:0}

    .stats-card{
      background:#fff;padding:20px;border-radius:var(--radius);
      box-shadow:var(--shadow);transition:transform .2s ease;
    }
    .stats-card:hover{transform:translateY(-4px)}
    .stats-card.price-per-tsubo{border-bottom:4px solid var(--c-primary)}
    .stats-card.price-per-sqm{border-bottom:4px solid #10b981}
    .stats-card.transactions{border-bottom:4px solid #f59e0b}
    .stats-label{font-size:.9rem;letter-spacing:.04em;color:#6b7280;margin:0 0 6px}
    .stats-value{display:flex;align-items:flex-end}
    .stats-value .number{font-size:1.8rem;font-weight:700;color:#1f2937}
    .stats-value .unit{font-size:1rem;color:#4b5563;margin-left:6px}
    .stats-comparison{display:flex;align-items:center;font-size:.9rem;margin-top:8px;gap:6px;color:#6b7280}
    .stats-comparison .value{font-weight:600}
    .stats-comparison .value.positive{color:#10b981}
    .stats-comparison .value.negative{color:#ef4444}

    /* ====== Chart Block ====== */
    .chart-container{
      background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
      padding:20px;margin:0 0 30px;
    }
    .chart-header{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px}
    .chart-wrapper{height:300px;position:relative}
    .chart-wrapper canvas{position:absolute;inset:0;width:100% !important;height:100% !important}

    /* ====== Table ====== */
    .data-table-container{
      background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
      padding:20px;margin:0 0 30px;overflow:auto;-webkit-overflow-scrolling:touch
    }
    .data-table-header{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;gap:12px;flex-wrap:wrap}
    table{width:100%;border-collapse:collapse;white-space:nowrap}
    th,td{padding:12px 14px;text-align:left;border-bottom:1px solid #e5e7eb}
    th{background:#f9fafb;font-weight:600;color:#374151}
    tr:hover{background:#f9fafb}
    .price-column,.area-column,.unit-price-column,.tsubo-price-column{text-align:right}

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

    /* ====== CTA / Footer ====== */
    .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
    }
    .cta-icon{font-size:2rem;line-height:1}
    footer{background:#1f2937;color:#fff;padding:24px 0;margin:50px 0 0;text-align:center}
    .source-note{font-size:.85rem;color:#6b7280;margin:16px 0 0}
    .source-note a{color:#6b7280;text-decoration:underline}
    /* ====== Responsive text sizes ====== */
    @media (max-width: 992px){
      h1{font-size:2rem} h2{font-size:1.5rem}
    }
    @media (max-width: 768px){
      .header{height:150px}
      .chart-wrapper{height:260px}
    }
    @media (max-width: 576px){
      .container{padding:0 15px}
      h1{font-size:1.8rem}
      .cta-section{flex-direction:column;text-align:center}
      .cta-icon{margin:0 0 6px}
      th,td{padding:10px 12px;font-size:.95rem}
    }

/* H4を確実にこのページ用に上書き */
.price-page .info-card .card-header > h4,
.price-page .chart-container .chart-header > h3,
.price-page h4 {
  all: unset;
  display: block;
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0;
  font-weight: 700;
  color: #111827;
}

/* 必要なら一般の見出しもページ内だけで整える */
.price-page h1 { font-size: 2.5rem; color:#fff; margin:0 0 8px; }
.price-page h2 { font-size: 1.8rem; color:#2c3e50; margin:30px 0 20px; }
.price-page h3 { font-size: 1.4rem; color:#3b82f6; margin:25px 0 15px; }