/* =========================
   相場一覧（画像のPCデザイン）スキン
   .price-table ／ .table-header ／ .table-row 構造を装飾
   ========================= */
.price-table{
  --tbl-border: #6F7D99;          /* 罫線色 */
  --tbl-header: #BAD7E9;           /* 見出し背景 */
  --tbl-head-text: #2B3467;        /* 見出し文字 */
  --tbl-area-bg: #FAFCFF;          /* 左列の背景（行見出し） */
  --link-navy: #2B4E9C;            /* 通常リンク色 */
  --count-pink: #C44;              /* 件数の小さな赤系 */
  border: 1px solid var(--tbl-border);
  /* border-radius: 12px; */
  overflow: hidden;                /* 角丸を活かす */
  background: #fff;
  text-align: center;

  /* ★ 追加：描画の安定化（罫線消え対策） */
  position: relative;
  transform: translateZ(0);
}

/* 列構成：左に“区・エリア名”、右に6レンジ */
.price-table .table-header,
.price-table .table-row{
  display: grid;
  grid-template-columns: 200px repeat(6, 1fr); /* 左列固定幅 + 6列 */
}

/* ヘッダー */
.price-table .table-header{
  background: var(--tbl-header);
  color: var(--tbl-head-text);
  font-weight: 700;
  /* 行自体には横罫線を持たせない */
  border-bottom: none;
}
.price-table .header-bucket:last-child{
  border-right: none;
}

/* ===== 横罫線はセル単位で管理 ===== */

/* ヘッダー行の各セル + データ行の各セルに 1px の横罫線 */
.price-table .table-header > div,
.price-table .table-row > div{
  border-bottom: 1px solid var(--tbl-border);
}

/* 最終行だけ下罫線を消す */
/* .price-table .table-row:last-child > div{
  border-bottom: none;
} */

/* 左端セル（“区名/エリア名/駅名”） */
.price-table .row-area{
  padding: 12px 14px;
  font-weight: 700;
  color: var(--link-navy);
  border-right: 1px solid var(--tbl-border);
}

@media (max-width:780px) {
  .price-table .row-area{
    padding: 12px 8px;
  }
}

.price-table .row-area a{
  color: var(--link-navy);
  text-decoration: none;
}
.price-table .row-area a:hover{
  text-decoration: underline;
}

/* “区”の行はリンク/文字を赤系にして強調（画像の千代田区のイメージ） */
.price-table .ward-row .row-area,
.price-table .ward-row .row-area a{
  color: #D05151;
}

/* 右側レンジ6列のセル */
.price-table .row-data{
  padding: 12px 12px;
  text-align: right;
  border-right: 1px solid var(--tbl-border);
}
.price-table .row-data:last-child{
  border-right: none;
}

/* 金額・件数・ダッシュ */
.price-table .price{ font-weight: 700; }
.price-table .count{ font-size: 15px; }
.price-table .dash{ opacity: .5; text-align: center; }

/* 件数リンク */
.price-table .mp-count-link{
  color: inherit; text-decoration: none;
}
.price-table .mp-count-link:hover{
  text-decoration: underline;
}

/* 右上CTA：2ボタン横並び */
.rent-market .cta-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
@media (max-width:780px){
  .rent-market .cta-row{ flex-direction:column; gap:8px; }
}

.rent-market .cta-row{display:flex;gap:12px;align-items:flex-start}
@media (max-width:780px){.rent-market .cta-row{flex-direction:column;gap:8px}}
.rent-market .cta-outline{
  align-items:center;
  justify-content:center;
  min-width:220px;
  padding:9px 18px;
  border:1px solid #2B3467;
  border-radius:8px;
  background:#fff;
  color:#2B3467;
  font-weight:700;
  text-decoration:none;
  line-height:1.2;
  position:relative;
  padding-right:46px
}

/* 2行表示用：改行許可 & 幅を制限して折り返し */
.rent-market .cta-mini,
.rent-market .cta-outline{
  white-space: normal;      /* nowrapを無効化 */
  line-height: 1.35;        /* 2行の行間をやや詰める */
  text-align: left;         /* 画像と同じく左寄せ */
}

/* モバイルは縦積みなので幅制限を緩める */
@media (max-width: 780px){
  .rent-market .cta-outline,
  .rent-market .cta-mini{
    max-width: 100%;
  }
}


/* ヘッダーを左：タイトル＆リード／右：CTA に分割 */
.rent-market .market-header{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  margin-bottom: 10px;
}
@media (max-width: 780px){
  .rent-market .market-header{
    gap: 0px;
  }
}
.rent-market .market-title,
.rent-market .lead-wrap{ grid-column: 1; }
.rent-market .market-cta{ grid-column: 2; }

/* 2ボタンを横並び・同じ高さに */
.rent-market .cta-row{
  display: flex;
  align-items: stretch;   /* 高さをそろえる */
  gap: 12px;
}

/* 枠ボタンの矢印（after） */
.rent-market .cta-outline::after{
  content:"";
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px;
  background:url("/images/icon/arrow-right-bl.svg") no-repeat center/contain;
  opacity:.95;
}

/* 2行になりやすい幅（必要に応じて微調整） */
.rent-market .cta-mini{   max-width: 330px; }

/* SPは縦積み */
@media (max-width: 780px){
  .rent-market .market-cta{ grid-column: 1; }
  .rent-market .cta-row{ flex-direction: column; }
  .rent-market .cta-mini, .rent-market .cta-outline{ max-width: 100%; }
}

/* 区名・エリア名セル */
.price-table .header-area,
.price-table .row-area {
  text-align: center;
  font-weight: 700;
}

/* 見出し行（青背景）の中央寄せ */
.price-table .table-header > div {
  text-align: center;
  vertical-align: middle;
}

/* 各データ行のセルも中央寄せ */
.price-table .table-row > div {
  text-align: center;
  vertical-align: middle;
  min-height: 58px;
}

/* 価格と件数を中央寄せに統一 */
.price-table .price,
.price-table .count,
.price-table .dash {
  text-align: center;
  display: block;
  line-height: 1.4;
  margin: 0 auto;
}

/* 区名・エリア名リンクを中央に */
.price-table .mp-area-link {
  display: inline-block;
  text-align: center;
}

/* 念のため行の高さが崩れないように（グリッドアイテムを伸張） */
.price-table .table-row{ align-items: stretch; }

/* 左列の区名・エリア名セルの縦中央揃え */
.price-table .header-area,
.price-table .row-area {
  display: flex;
  align-items: center;         /* 縦中央 */
  justify-content: center;     /* 横中央 */
  text-align: center;
  line-height: 1.3;
  white-space: normal;
}

/* 区名とエリア名のリンク文字を赤に統一 */
.price-table .row-area .mp-area-link {
  color: #eb455F;              /* 千代田区と同じ赤色 */
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
}

@media (max-width: 780px){
  .price-table .row-area .mp-area-link {
    font-size: 14px;
  }
}

/* 区名セル（上部の「千代田区」）も同色・同スタイル */
.price-table .ward-row .row-area a {
  color: #eb455F;
  font-weight: 700;
  text-decoration: none;
}

/* headerの文字（区名・エリア名）を中央寄せ維持 */
.price-table .table-header .header-area {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 件数リンクの色だけ赤、括弧は黒のまま */
.price-table .count {
  color: #000000;
}

.price-table .count .mp-count-link {
  color: #eb455F; /* 赤 */
  text-decoration: none;
}

.price-table .count .mp-count-link:hover {
  text-decoration: underline;
}

/* 下部リンク全体を中央寄せに */
.market-block.center {
  display: flex;
  justify-content: center; /* 横方向中央寄せ */
  align-items: center;     /* 縦方向中央寄せ（高さがある場合に） */
  margin-top: 30px;
  margin-bottom: 40px;
}

/* ボタン自体のスタイル調整 */
.market-block.center .cta-outline.lg {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  color: #2B3467;
  border: 1px solid #2B3467;
  border-radius: 8px;
  padding: 14px 40px;
  min-height: 56px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap; /* ← これを追加 */
}

.market-block.center .cta-outline.lg {
  min-width: 320px; /* ← お好みで調整可能（300〜340pxが目安） */
  text-align: center;
}

/* ===== 1100px 以下：1列目固定 + 横スクロール ===== */
@media (max-width: 1100px){

  /* 表全体を横スクロール領域に */
  .price-table{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    position: relative;
  }

  /* 左1列 + 右6列を grid で横並び＆横スクロール */
  .price-table .table-header,
  .price-table .table-row{
    display: grid;
    grid-template-columns: 190px repeat(6, 120px); /* 幅はお好みで */
    width: max-content;
  }

  /* ★ 1列目（区名／エリア名）を固定 */
  .price-table .header-area,
  .price-table .row-area{
    position: sticky;
    left: 0;
    z-index: 3;
    background: #FFF;
    /* 罫線は通常の border を使う（擬似要素は使わない） */
    border-right: 1px solid var(--tbl-border);
    border-bottom: 1px solid var(--tbl-border);
  }

  /* ヘッダー1列目はヘッダー色＋一段前面に */
  .price-table .table-header .header-area{
    background: var(--tbl-header, #E6EFFA);
  }

  /* 右側セル（ヘッダー＆データ）の縦罫線だけ管理 */
  .price-table .header-bucket,
  .price-table .row-data{
    border-right: 1px solid var(--tbl-border);
  }

  /* 最右列は右罫線なし */
  .price-table .header-bucket:last-child,
  .price-table .row-data:last-child{
    border-right: none;
  }

  .price-table .header-area,
  .price-table .row-area{
    backface-visibility: hidden;
    will-change: transform;
  }
}
.price-table .row-area .mp-area-link:hover {
  text-decoration: underline;   /* 下線のみ表示 */
}

/* 件数リンクも下線のみ */
.price-table .count .mp-count-link {
  text-decoration: none;
}

.price-table .count .mp-count-link:hover {
  text-decoration: underline;
}

/* データセルを中央揃えの flex にする */
.price-table .row-data {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* ← 縦中央 */
    align-items: center;      /* ← 横中央 */
    padding: 10px 8px;        /* 高さは必要に応じて調整 */
    text-align: center;
    gap: 5px;
}

/* price と count の行間を少し調整 */
.price-table .price {
    line-height: 1;
    margin-bottom: 2px;
}

.price-table .count {
    line-height: 1;
}

/* ダッシュ（ー）を自然に中央寄せ */
.price-table .dash {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* セルいっぱいで中央 */
    font-size: 15px;
    opacity: 0.7;
}

@media (max-width: 780px){
  /* 左1列 + 右6列を grid で横並び＆横スクロール */
  .price-table .table-header,
  .price-table .table-row{
    grid-template-columns: 160px repeat(6, 110px); /* 幅はお好みで */
  }
}

/* PC幅が狭くなった時：タイトルは1行のまま、lead/CTA を縦積み */
@media (max-width: 780px){
  /* 3つとも1列目に並べる（上から title → lead → CTA） */
  .rent-market .market-title,
  .rent-market .lead-wrap,
  .rent-market .market-cta{
    grid-column: 1;
  }

  /* タイトルは折り返さないようにする */
  .rent-market .market-title .section-title{
    white-space: nowrap;  /* 折り返し禁止 */
    font-size: 2.2rem;    /* 少しだけ小さめに（必要なら調整） */
  }

  /* CTAの2ボタンは縦並びにする */
  .rent-market .cta-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 780px){
  .rent-market .market-title .section-title{
    white-space: normal;   /* SPは折り返しOKに戻す */
  }
}

/* H1タイトルは基本1行で表示 */
.rent-market .market-title .section-title{
  white-space: nowrap;
}

/* 780px以下では title → lead → CTA を縦並び */
@media (max-width: 780px){
    .rent-market .market-cta{ justify-content: flex-start; }

    .rent-market .market-header{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "lead"
      "cta";
  }
  .rent-market .market-cta{
    justify-content: flex-start;
  }
}

@media (max-width: 780px){
  .rent-market .market-title .section-title{
    font-size: 24px;
    white-space: normal;   /* スマホは折り返しOK */
  }
}

/* ==========================================
   1440px ～ 780px の CTA ボタン崩れ対策
   ========================================== */
@media (max-width: 1440px) and (min-width: 781px){

  /* CTAボタンを1行確保して横幅いっぱいに */
  .rent-market .market-cta {
    width: 100%;
    margin-top: 12px;
  }

  /* 2つのボタンを縦並びに */
  .rent-market .cta-row {
    flex-direction: column;
    align-items: stretch;  /* ← 幅を揃える */
    gap: 10px;
  }
}

/* 1440px～780px：CTAを縦並び＋文字は1行で表示 */
@media (max-width: 1440px) and (min-width: 781px){

  /* ヘッダーは縦積み（title → lead → CTA） */
  .rent-market .market-header{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "lead"
      "cta";
  }
  .rent-market .market-cta{
    grid-column: 1;
    justify-content: flex-start;
    width: 100%;
    margin-top: 16px;
  }

  /* 2ボタンを縦並びにして幅をそろえる */
  .rent-market .cta-row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* ボタンは幅100%・文字は1行で中央寄せ */
  .rent-market .cta-mini,
  .rent-market .cta-outline{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;    /* ← 1行に固定 */
    text-align: center;
    font-size: 14px;        /* はみ出し防止で少しだけ小さめ（お好みで調整OK） */
  }

  /* middle-less の <br> はこの幅帯では消す */
  .rent-market .market-cta br{
    display: none;
  }
}

/* SP(780px未満)では改行を戻す */
@media (max-width: 780px){
  .rent-market .market-cta br{
    display: inline;
  }
}

@media (max-width: 1440px) and (min-width: 780px){

  /* ヘッダーは縦積み（title → lead → CTA） */
  .rent-market .market-header{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "lead"
      "cta";
  }
  .rent-market .market-cta{
    grid-column: 1;
    justify-content: flex-start;
    width: 100%;
    margin-top: 16px;
  }

  /* ★ ボタン2つを横並びのまま維持 */
  .rent-market .cta-row{
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
}

/* 780〜1440px：CTAブロックだけ lead の下に移動（文字はPCと同じ2行のまま） */
@media (max-width: 1440px) and (min-width: 780px){

  /* ヘッダーは縦積み（title → lead → CTA） */
  .rent-market .market-header{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "lead"
      "cta";
  }

  /* CTA ブロックを lead の下・左寄せに */
  .rent-market .market-cta{
    grid-column: 1;
    justify-content: flex-start;
    width: 100%;
    margin-top: 16px;
  }

  /* ボタン2つは横並びのまま */
  .rent-market .cta-row{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }
}


/* 780〜1440px の CTA を再調整（2行表示を維持） */
@media (max-width: 1440px) and (min-width: 780px){

  /* CTAブロックは lead の下にあるまま、ボタンは横並びにする */
  .rent-market .cta-row{
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  /* ボタンのテキストは 2行OK（PCと同じ） */
  .rent-market .cta-mini,
  .rent-market .cta-outline{
    width: auto;
    max-width: 100%;
    white-space: normal !important;  /* ← 2行OKに上書き */
    text-align: left;
  }

  /* middle-less の <br> も有効に戻す */
  .rent-market .market-cta br{
    display: inline !important;
  }
}

/* SP版：他のエリアボタンを下のCTAと同じ幅(100%)にする */
@media (max-width: 780px){
  .market-block.center .cta-outline.lg{
    display: block;
    width: 100%;        /* コンテナ幅いっぱい */
    max-width: 100%;
    min-width: 0;       /* PC用のmin-widthを打ち消す */
    box-sizing: border-box;
    text-align: center; /* 文字は中央寄せ */
  }
}

/* SP版：他のエリアボタンの文言位置をピンクボタンと同じにする */
@media (max-width: 780px){

  .market-block.center .cta-outline.lg {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 16px;   /* 文言位置をピンクCTAと同じに */
    padding-right: 40px;  /* 矢印のための余白（調整用） */
    text-align: left;     /* 重要：ピンクCTAと揃う */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左寄せ */
    position: relative;
  }

  /* 矢印位置も調整 */
  .market-block.center .cta-outline.lg::after {
    right: 16px;  /* ピンクCTAと同じ矢印位置に寄せる */
    transform: translateY(-50%);
  }
}

/* SPでは「他のエリアの相場情報を調べる」の文字を中央寄せに戻す */
@media (max-width: 780px){
  .market-block.center .cta-outline.lg{
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 780px){
  .market_price .rent-market .market-title .section-title{
    font-size: 22px;   /* 画像くらいの大きさに */
    line-height: 1.3;  /* 詰めすぎない程度に行間調整 */
  }
}

@media (min-width: 781px){
  .market-two-col .cta-box .cta-outline.lg {
    text-align: left !important;
    justify-content: flex-start !important;
    padding-left: 20px; /* 左寄せの調整。お好みで16〜24px */
  }
}

/* 左端「駅名」ヘッダーセル */
.price-table .header-area{
  padding: 12px 14px;               /* .row-area と同じ */
  display: flex;
  align-items: center;              /* 縦中央 */
  justify-content: center;          /* 横中央 */
}

/* 坪数レンジのヘッダーセル */
.price-table .header-bucket{
  padding: 12px 12px;               /* .row-data と同じ */
  display: flex;
  align-items: center;              /* 縦中央 */
  justify-content: center;          /* 横中央 */
  text-align: center;
}

@media (min-width: 1101px){
    /* 左端のヘッダー（区名 / エリア名） */
    .price-table .header-area {
        border-right: 1px solid var(--tbl-border);
    }
}

/* 坪数レンジのヘッダーセル（15〜20坪、20〜30坪…) */
.price-table .header-bucket {
    border-right: 1px solid var(--tbl-border);
}

/* 最後のセルは右罫線なし */
.price-table .header-bucket:last-child {
    border-right: none;
}

/* 「○○の貸事務所を探す」ボタン下の注記 */
.rent-market .market-cta-note{
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  width: 100%;
  display: block;
  text-align: right !important;
  margin: 0;  /* 左に寄せてしまう余白を消す */
  margin-right: -28px;
}

@media (max-width: 780px){
  .rent-market .price-table{
    margin-right: -28px;
    margin-bottom: 10px;
  }
}
.sticky-column {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ===== 最下行の二重線対策（PC/SP 共通） ===== */

/* 最終行のセルの下罫線を消す（セルと枠の二重線防止） */
.price-table .table-row:last-child > div{
  border-bottom: none;
}

/* 表の一番下は枠線として 1 本だけ描く */
.price-table{
  border-bottom: 1px solid var(--tbl-border);
}

@media (max-width: 1440px){
  .lead .br-1440{
    display: block;      /* ← 改行として表示 */
  }
}

/* SP版（1100px以下）：最下行の二重線対策 */
@media (max-width: 1100px){
  /* 最後の行の各セルの下線を消す */
  .price-table .table-row:last-child > div{
    border-bottom: none;
  }

  /* 表全体の下罫線だけ残す（1本） */
  .price-table{
    border-bottom: 1px solid var(--tbl-border);
  }
}