/* ========== 相場ページ用（サンプルのトンマナ踏襲） ========== */
/* 余白微調整（任意） */
.rent-market .updated{ margin-left: .25em; opacity: .75; }

/* ヘッダーを2行グリッド：1行目=タイトル、2行目=説明とCTAを左右並び */
.rent-market .market-header{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title title"
    "lead  cta";
  gap: 12px 20px;
  align-items: start;
  margin: 18px 0 10px;
}
.rent-market .market-title{ grid-area: title; }
.rent-market .lead-wrap { grid-area: lead; }

@media (max-width: 780px){
  .rent-market .market-header{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "lead"
      "cta";
  }
  .rent-market .market-cta{ justify-content: flex-start; }
}

/* 右上のミニCTA（画像①右上の赤ボタンを踏襲） */
.rent-market .cta-mini{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width:240px;
  padding:10px 14px;
  border-radius: 8px;
  background: #EB455F;
  color: #fff;
  text-decoration: none;
  line-height: 1.3;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
}
.rent-market .cta-mini:hover{ filter: brightness(0.98); }
.rent-market .market-cta{ grid-area: cta; display:flex; align-items:flex-start; justify-content:flex-end; }

/* ブロック見出し */
.rent-market .headline.with-underline{
  font-size: clamp(16px, 1.7vw, 20px); margin: 12px 0 14px; position: relative;
}
.rent-market .headline.with-underline::after{
  content:""; display:block; width: 100%; height: 2px; background:#EEF1F6; margin-top: 10px;
}



/* チップ */
.rent-market .chip-grid{
  --min: 190px;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(var(--min),1fr));
  gap: 10px 12px; list-style:none; padding:0; margin: 0;
}
.rent-market .chip {
  display:block; text-align:center; padding:6px 12px; border:1px solid #E3E7EE; border-radius: 8px;
  text-decoration:none;
}

/* SPの段落改行制御 */
.sp-only{ display:none; }

/* 縦線だけを表示、アンダーラインは削除 */
.rent-market .headline.with-bar {
  position: relative;
  padding-left: 12px;
  /* font-size: 18px; */
  border-bottom: none !important; /* underline を打ち消す */
  margin-bottom: 8px;
}

.rent-market .headline.with-bar::after {
  display: none !important; /* underline 用の疑似要素も消す */
}

.rent-market .headline.with-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #BAD7E9;  /* 青色 */
  border-radius: 2px;
}

/* ===== FULLHD最適化（超ワイド向けの圧縮レイアウト） ===== */
  /* ヘッダーの上下余白・字間を圧縮 */
  .rent-market .market-header{
    gap: 8px 20px;
    margin: 0px 0 10px;
  }
  .rent-market .section-title{
    /* font-size: clamp(22px, 2vw, 26px); */
    line-height: 1.25;
    margin: 0;
  }
  .rent-market .lead{ margin:0; line-height:1.55; font-size: 15px; }
  .rent-market .updated{ opacity:.7; }

  /* セクション間のマージン圧縮 */
  .rent-market .market-block{ margin: 18px 0 10px; }

  .rent-market .headline.with-bar::before{ width: 3px; border-radius: 2px; }

  /* チップの列数UP＆高さ圧縮 */
  .rent-market .chip-grid{ gap: 8px 10px; }

  /* 沿線ブロック内の行間を詰める */
  .rent-market .subhead{ font-size: 15px; margin: 12px 0 6px;}
  .rent-market .line-group + .line-group{ margin-top: 10px; }

  /* } */

@media (max-width: 780px){
  .sp-only { display: block; }
  .pc-only { display: none; }

  /* ヘッダー：SPでは説明文・右上CTAを消し、セクション内のCTAを使う */
  .rent-market .market-cta { display: none; }        /* 右上の小CTAはSPで非表示 */

  /* 見出し（青い縦線のみ／下線なし） */
  .rent-market .headline.with-bar{
    font-size: 16px;
    margin: 0 0 10px;
    padding-left: 10px;
    border-bottom: none !important;
  }
  .rent-market .headline.with-bar::after{ display:none !important; }
  .rent-market .headline.with-bar::before{
    width: 3px; height: 100%; border-radius: 2px;
    background:#2B4E9C; content:""; position:absolute; left:0; top:0;
  }

  /* チップ：2カラムに固定（画像の並び） */
  .rent-market .chip-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);   /* ← 2列固定 */
    gap: 10px 10px;
    margin-bottom: 10px;
  }
  .rent-market .chip-grid.smaller{ grid-template-columns: repeat(2, 1fr); }
  .rent-market .chip{
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
  }

  /* サブ見出し（JR線/東京メトロ/…）の間隔 */
  .rent-market .subhead{ margin: 10px 0 10px; font-weight:700; color:#2B3467; }

  /* SP専用の大きいCTA（画像のピンクボタン） */
  .rent-market .sp-cta-row{ margin: 0 0 10px; }
  .rent-market .cta-sp{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #EB455F;        /* サンプルのピンク寄り */
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .02em;
    box-shadow: 0 2px 0 rgba(0,0,0,.06);
    position: relative;
  }
  .rent-market .cta-sp::after{
    content: "›";                /* 右端の矢印 */
    position: absolute;
    right: 12px;
    font-size: 18px;
    line-height: 1;
    opacity: .95;
  }

  /* ページ下の説明文（SPのみ） */
  .rent-market .sp-bottom-lead{
    margin: 16px 0 24px;
  }
  .rent-market .sp-bottom-lead .lead{
    font-size: 13.5px;
    line-height: 1.7;
    opacity: .9;
  }
}

/* 右端に矢印を出すための余白を確保 */
.rent-market .cta-mini,
.rent-market .cta-sp{
  position: relative;
  padding-right: 46px; /* ← 矢印の分だけ右側に余白 */
}

/* 右端の矢印（SVG）。以前の "›" はこれで上書きされます */
.rent-market .cta-mini::after,
.rent-market .cta-sp::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url("/images/icon/arrow-right-wh.svg") no-repeat center / contain;
  pointer-events: none;
  opacity: .98;
}

/* （任意）ホバー時に少しだけ見やすく */
.rent-market .cta-mini:hover::after,
.rent-market .cta-sp:hover::after{
  opacity: 1;
}

/* PCでは沿線チップも6列で並べる */
@media (min-width: 781px){
  /* 念のためチップをセルいっぱいに */
  .rent-market .chip { width: 100%; }
}

/* 2ブロック横並び（PC）／縦積み（SP） */
.market-two-col{
  display: grid;
  gap: 24px 32px;              /* 行間 / 列間 */
  align-items: start;
}
@media (min-width: 781px){
    .market-two-col{ grid-template-columns: 1fr 1fr; }
}

/* 2カラム時の内側グリッド最適化（読みやすい幅に） */
@media (min-width: 781px){
  /* エリア側：そのまま自動フィット */
  .market-two-col .market-area .chip-grid{
    grid-template-columns: repeat(3, 1fr);  /* 半幅なので3列程度が見やすい */
  }

  /* 沿線側：6列指定があると潰れるので半幅時は4列に調整 */
  .market-two-col .market-lines .line-group .chip-grid.smaller{
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* FULLHD等の超ワイドで少しだけ密度を上げる（任意） */
.market-two-col{ gap: 22px 36px; }
.market-two-col .market-area .chip-grid{
  grid-template-columns: repeat(4, 1fr);
}
.market-two-col .market-lines .line-group .chip-grid.smaller{
  grid-template-columns: repeat(5, 1fr) !important;
}

/* 2ブロック横並び（PC）／縦積み（SP） */
.market-two-col{
  display: grid;
  gap: 24px 32px;      /* 行間 / 列間 */
  align-items: start;
}
@media (min-width: 781px){
  .market-two-col{ grid-template-columns: 1fr 1fr; }
}

/* 半幅になった時の列数最適化 */
@media (min-width: 781px){
  /* エリア側：半幅なので3列に（好みで調整可） */
  .market-two-col .market-area .chip-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  /* 沿線側：6列だと窮屈なので半幅時は4列に（好みで調整可） */
  .market-two-col .market-lines .line-group .chip-grid.smaller{
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* 超ワイド時は密度UP（任意） */
.market-two-col{ gap: 22px 36px; }
.market-two-col .market-area .chip-grid{
  grid-template-columns: repeat(4, 1fr);
}
.market-two-col .market-lines .line-group .chip-grid.smaller{
  grid-template-columns: repeat(5, 1fr) !important;
}

/* === PCでは縦並び＆両方とも6列で整列 === */
@media (min-width: 781px){
  /* 万一 market-two-col の2カラム指定が残っていても無効化 */
  .market-two-col{
    display: block !important;
    grid-template-columns: 1fr !important;
  }
}


/* パンくずの前後余白を詰める（このページだけ適用） */
.market_price .bread_list{
  margin: 6px 0 8px !important;   /* 上・下の余白を小さく */
  padding: 0 !important;           /* テーマ側で余白がある場合に打消し */
  line-height: 1.2;
}

/* パンくず直下のH1ブロックの上マージンも詰める */
.market_price .rent-market .market-header{
  margin-top: 8px !important;      /* 既存の 18px を圧縮 */
}

/* さらに詰めたい場合は 0～6px に */
@media (max-width: 780px){
  .market_price .bread_list{ margin: 0 0 10px !important; }
  .market_price .rent-market .market-header{ margin-top: 6px !important; }
}

/* 念のため：H1自体に上マージンが設定されているテーマもあるので打ち消し */
.market_price .rent-market .section-title{ margin-top: 0 !important; }

/* ヘッダー直下の余白を、このページだけ詰める */
.grid-header {
  margin-bottom: 10px;
}

/* 画面幅ごとの微調整（任意） */
.grid-header + .grid-main .market_price{ margin-top: -20px; }
@media (max-width: 780px){
  .grid-header + .grid-main .market_price{ margin-top: -10px; }
}

/* PC / SP 出し分け */
.pc-only-lead { display: block; }
.sp-only-lead { display: none; }

@media (max-width: 780px){
  .pc-only-lead { display: none !important; }
  .sp-only-lead { display: block !important; }
}

@media (max-width: 780px){
  .rent-market .market-block{
    margin: 0 0 10px !important;
  }
  .rent-market .market-header{
    display: block !important;
  }
}