/* 相場詳細ページ専用CSS */

.rent-market-intro .updated {
  font-size: 0.9em;
  color: #666;
  margin-left: 0.5em;
}

.row-area {
  font-weight: bold;
  line-height: 1.3;
}

.count {
  font-size: 0.85em;
  color: #666;
  margin-top: 2px;
}

.dash {
  color: #bbb;
  font-size: 1.2em;
}

.cta-row {
  display: flex;
  justify-content: center;
  margin: 30px 0;
  padding: 0 15px;
}

.button-sp-only {
  display: none;
}

@media (max-width: 1000px) {
  body {
    overflow-x: hidden;
  }
  .rent-market-intro {
    flex-direction: column;
    padding: 15px;
    gap: 15px;
  }

  .rent-market-intro .intro-cta {
    width: 100%;
    min-width: auto;
    padding: 0 15px;
  }

  .btn-consult {
    width: 100%;
    margin-bottom: 8px;
  }

  .btn-search {
    display: none;
  }

  .rent-market-intro .intro-cta {
    flex-direction: column;
  }

  /* 中身の行を“中身の幅”ぶん横に広げる */
  .price-table .table-header,
  .price-table .table-row {
    width: max-content;
  }
  .table-header,
  .table-row {
    display: grid;              /* PCと同じくgridで1行レイアウトを維持 */
    grid-template-columns: 200px repeat(5, 140px);
    width: max-content;         /* 中身の幅に合わせて横スクロールさせる */
  }

  .header-area,
  .row-area {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f8f9fa;
    min-width: 150px;
    flex-shrink: 0;
    border-right: 2px solid #ddd;
  }

  .row-area {
    padding: 12px 8px;
    font-size: 0.9rem;
  }
}

.mp-link-button .label {
  flex: 1;
}

.mp-link-button .arrow {
  margin-left: 16px;
  font-size: 1.2em;
  line-height: 1;
  color: #FE9F13;  /* 既存のオレンジに合わせる */
}

/* SP では縦積み＆ボタン幅100% */
@media (max-width: 780px) {

  /* ボタン本体：横いっぱい＆テキスト左、矢印右 */
  .mp-link-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 14px 18px;
    border-radius: 8px;
  }

  .mp-link-button .label {
    flex: 1;
    text-align: left;
    /* font-size: 0.95rem; */
  }

  .mp-link-button .arrow {
    margin-left: 8px;
    font-size: 1.2rem;
    line-height: 1;
  }
}
/* 区名／エリア名リンク用 */
.row-area a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;             /* 文字色は元のまま */
  text-decoration: none;      /* 通常時は下線なし */
}

/* 坪数セル内のリンク */
.mp-data-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  /* padding: 6px 0; */
}

.mp-data-link:hover {
  background-color: #fff8ec; /* やや淡いオレンジでhover感を */
  text-decoration: underline;
  color: #FE9F13;
}

/* hover時は色変化・背景変化ともに無し */
.header-area .mp-area-link:hover,
.row-area .mp-area-link:hover {
  color: #FE9F13;
  background: #fff;
  text-decoration: none;
}

.row-area,
.row-data {
  gap: 6px;
}
/* === 区名／エリア名リンク（オレンジ＋中央寄せ、hoverなし） === */
.header-area .mp-area-link,
.row-area .mp-area-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #FE9F13;          /* オレンジ */
  font-weight: bold;
  text-decoration: none;
  background: #fff;
}

/* === 件数リンクもオレンジに（価格は今のまま） === */
.mp-data-link {
  display: block;
  width: 100%;
  text-decoration: none;
}

.mp-data-link .count {
  color: #FE9F13;          /* (○件) をオレンジに */
}

.mp-data-link:hover {
  text-decoration: none;   /* hoverで色も背景も変えない */
  background: transparent;
  color: inherit;
}

.table-header,
.table-row {
  margin: 2px 0;           /* 各ブロックの上下に少し余白 */
}

@media (max-width: 1000px) {
  body {
    overflow-x: hidden;
  }

  .rent-market-intro {
    flex-direction: column;
    padding: 15px;
    gap: 15px;
  }

  .rent-market-intro .intro-cta {
    width: 100%;
    min-width: auto;
    padding: 0 15px;
  }

  .btn-consult {
    width: 100%;
    margin-bottom: 8px;
  }

  .btn-search {
    display: none;
  }

  .rent-market-intro .intro-cta {
    flex-direction: column;
  }

  /* ★ PCと同じgridレイアウトを維持したまま、横幅に応じてスクロール */
  .table-header,
  .table-row {
    width: max-content;     /* 中身の幅に合わせる */
  }

  /* ★ 1列目（区名・エリア名）を固定表示 */
  .row-area {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;       /* 下のセルと同じ白にして段差を消す */
  }

  /* ▼ ここから追加：SPでも1行レイアウトを維持する */
  .table-header,
  .table-row {
    display: grid;                            /* flex を上書き */
    grid-template-columns: 200px repeat(5, 140px);
    /* 1列目 : 200px（区名／エリア名）
       残り5列 : 140px固定 */
    width: max-content;                       /* 内容幅分だけ横に伸ばして横スクロール */
  }

  /* ★ price-table だけ左右余白なし＋横スクロール */
  .price-table {
    margin: 0;                  /* 左右 0 → 右側の空白なし */
    margin-bottom: 10px;
    border-radius: 0;
    overflow-x: auto;           /* 横スクロールON */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  /* 中身の行を“中身の幅”ぶん横に広げる */
  .price-table .table-header,
  .price-table .table-row {
    width: max-content;
  }

}

/* データ行の1列目（千代田区など）は他セルと同じ白背景に揃える */
.price-table .table-row > .header-area {
  background: #fff;
  color: inherit;
  box-sizing: border-box;
}

/* === 見出し行もデータ行と同じ隙間（gap:2px）を持たせる === */
.table-header {
  color: #fff;                  /* 文字は白のまま */
  box-sizing: border-box;
}

/* 一番上の余白と区切りを整える */
.table-header .header-area:first-child,
.table-header .header-bucket:first-child {
  border-left: none;
}

.table-header .header-bucket:last-child,
.table-row .row-data:last-child {
  border-right: 1px solid #bfbfbf;
}

/* === 表全体：隙間部分を完全に白に === */
.table-header,
.table-row {
  display: grid;
  gap: 2px;                  /* セル間の余白は維持 */
  background: #fff !important;  /* 隙間背景を白に強制 */
}

/* === 左右端の罫線補強 === */
.table-header .header-area:first-child,
.table-row .row-area:first-child {
  border-left: 1px solid #bfbfbf;
}
.table-header .header-bucket:last-child,
.table-row .row-data:last-child {
  border-right: 1px solid #bfbfbf;
}

/* === 表全体の背景を白に統一 === */
.price-table {
  background: #fff !important;  /* 背景を完全に白に */
  box-shadow: none;             /* もし影が残っていたら消す */
}

/* ===============================
   共通：PC版の表レイアウト
   =============================== */

/* 見出し行・データ行の基本レイアウト */
.table-header,
.table-row {
  display: grid;
  /* 1列目: 200px + 残り5列（自動伸長） */
  grid-template-columns: 200px repeat(5, 1fr);
  gap: 2px;                        /* セル間のホワイトスペース */
  background: #fff;
}

/* セル共通：白背景＋黒枠＋中央寄せ */
.header-area,
.header-bucket,
.row-area,
.row-data {
  background: #fff;
  /* border: 1px solid #000; */
  border: 1px solid #bfbfbf;   /* お好みで #dcdcdc や #cccccc など */
  box-sizing: border-box;
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;         /* 縦方向センター */
  align-items: center;             /* 横方向センター */
  min-height: 55px;
}

/* 見出しセルだけオレンジ背景 */
.table-header .header-area,
.table-header .header-bucket {
  background: #FE9F13;
  color: #fff;
  font-weight: bold;
  border: 1px solid #bfbfbf;
  text-align: center;
  padding: 16px 12px;
}

/* ===============================
   SP版（横スクロール＋1列目固定）
   =============================== */
@media (max-width: 1000px) {
  /* 列幅を固定して「1行に6列並ぶ」状態にする */
  .table-header,
  .table-row {
    grid-template-columns: 200px repeat(5, 150px);
    width: max-content;        /* コンテンツ幅ぶんだけ横に広げる */
  }

  /* 1列目（区名・エリア名）は左に固定 */
  .header-area,
  .row-area {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
  }

  /* 見出し行1列目はオレンジのまま、最前面に */
  .table-header .header-area {
    background: #FE9F13;
    color: #fff;
    z-index: 3;
  }

  /* SPでは少し詰めた余白＆文字サイズ */
  .header-area,
  .header-bucket {
    padding: 12px 8px;
    font-size: 0.8rem;
  }
  .row-area,
  .row-data {
    padding: 12px 8px;
    font-size: 0.9rem;
  }
}

@media (max-width: 780px) {
  .table-header,
  .table-row {
    grid-template-columns: 160px repeat(5, 110px);
  }
}
/* === 件数リンク（数字＋件）のみオレンジ、括弧は黒 === */
.count {
  font-size: 0.85em;
  color: #000; /* 括弧は黒 */
}

.mp-count-link {
  color: #FE9F13;              /* 数字と件だけオレンジ */
  text-decoration: none;
}

.header-area .mp-area-link:hover,
.row-area .mp-area-link:hover,
.mp-count-link:hover {
  color: #FE9F13;              /* hover時も変化なし */
  text-decoration: underline;  /* 下線でリンク感 */
}



@media (max-width: 1000px) {

  .rent-market-intro {
    flex-direction: column;
    padding: 15px;
    gap: 15px;

    /* ★ 左右 15px で、下の一覧（.price-table）と揃える */
    margin: 0 15px 20px;
  }

  .rent-market-intro .intro-cta {
    width: 100%;
    min-width: auto;

    /* ★ ここがはみ出しの原因なので左右 padding を外す */
    padding: 0;
  }

  .btn-consult {
    width: 100%;
    margin-bottom: 8px;
    box-sizing: border-box; /* 念のため */
  }

  /* 一覧も同じ左右 15px に揃える */
  .price-table {
    margin: 0;
    margin-bottom: 10px;
    border-radius: 0;
    overflow-x: auto;  /* 横スクロールON（既存のまま） */
    overflow-y: visible;
  }
}

/* ボタン本体（PCでは最大幅を決めて真ん中） */

.mp-link-button .label {
  flex: 1;
}

.mp-link-button .arrow {
  margin-left: 12px;
  font-size: 1.2em;
  line-height: 1;
  color: #FE9F13;  /* 既存オレンジと同じ */
}

/* 矢印アイコンをSVGで統一 */
.mp-link-button::after {
  display: inline-block;
  margin-left: 5px;
  content: url(../images/right.svg);
}

@media (max-width: 780px) {
  .mp-link-button {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
  }

  .mp-link-button::after {
    margin-left: 8px;
    vertical-align: middle;
  }
}

/* 矢印 */
.mp-link-button::after {
  display: inline-block;
  margin-left: 8px;
  content: url(../images/right.svg);
  vertical-align: middle;
}

@media (max-width: 780px) {
  .mp-link-button {
    width: 100%;
    max-width: none;
    padding: 16px 22px;
    font-size: 1rem;
    border-radius: 8px;
    justify-content: center;
  }

  .mp-link-button::after {
    margin-left: 6px;
    content: url(../images/right.svg);
  }
}

/* ===== 見出し下：説明文＋2ボタン（PC 基本レイアウト） ===== */
.rent-market-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;      /* 左テキストの1行目とボタン上辺を揃える */
  gap: 32px;
  margin-bottom: 10px;
  padding: 0;                   /* グレーの背景ボックスは無しに */
  background: transparent;
  border-radius: 0;
}

/* 左側の説明文（3行表示をそのまま使う） */
.rent-market-intro .intro-text {
  flex: 1;
  line-height: 1.5;
}

/* 右側：ボタン2つ横並び */
.rent-market-intro .intro-cta {
  display: flex;
  flex-direction: row;
  gap: 12px;                    /* ボタン同士の間隔 */
}

/* ボタン本体（赤＆オレンジ共通） */
.btn-consult,
.btn-search {
  box-sizing: border-box;
}

.btn-consult,
.btn-search {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;          /* 余白も少し広めにしてバランスUP */
  border-radius: 8px;
  font-size: 16px;             /* ← ここを拡大（従来14px） */
  line-height: 1.6;
  color: #fff;
  text-decoration: none;
  min-width: 280px;            /* 横幅を少し広げて改行を安定化 */
  white-space: normal;
}

.btn-consult {
  background: #F05D5B;
}

.btn-search {
  background: #FE9F13;
}

.btn-search:hover {
  background: #FFC46C;
  text-decoration: none;
}

/* 矢印アイコン */
.btn-search::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: 12px;
  background-image: url(../images/right-white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

@media (max-width: 1000px) {

  .rent-market-intro {
    padding: 0;
  }

  .rent-market-intro .intro-cta {
    width: 100%;
    flex-direction: column;
  }

  /* SPでは「詳しい〜」ボタンを横いっぱいに */
  .btn-consult {
    width: 100%;
    min-width: auto;
    box-sizing: border-box;
    justify-content: space-between;  /* 左テキスト / 右矢印 */
  }

  /* SPでは「○○区の賃貸オフィスを探す」ボタンは非表示 */
  .btn-search {
    display: none;
  }
}

/* SP時のみ表示 */
@media (max-width: 1000px) {
  /* 既存の2ボタンはSP時は非表示に */
  .rent-market-intro .btn-consult,
  .rent-market-intro .btn-search {
    display: none;
  }

  /* SPでは説明文と更新日を非表示 */
  .rent-market-intro .intro-text {
    display: none;
  }

  /* すでに追加しているSP専用ボタン（例） */
  .btn-consult-sp {
    display: block;
    margin: 20px 0;
    text-align: center;
  }

  /* ボタンとの間を詰める */
  .btn-consult-sp {
    margin-top: 4px;      /* h1との間を小さく */
    margin-bottom: 16px;  /* 下の余白は少し残す */
  }

  /* 全体のコンテナの上下余白も調整 */
  .rent-market {
    margin-top: 8px;
    margin-bottom: 16px;
  }
}

/* 矢印アイコン（右側） */
.mp-link-button::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  background-image: url(../images/right.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* ホバー時：背景色を変えず、ボタン全体を薄く（透けるように） */
.mp-link-button:hover {
  opacity: 0.7; /* ← ボタン全体を少し薄くする */
  text-decoration: none; /* 下線を消す */
}

/* ==== 他のエリアの相場情報を調べる（中央の白ボタン） ==== */
.mp-link-row{
  display:flex;
  justify-content:center;
  margin:16px 0 24px;
}

.mp-link-button{
  display:inline-flex;
  align-items:center;         /* テキストと矢印を垂直中央 */
  justify-content:center;
  gap:10px;                   /* 文字と矢印の間隔 */
  min-width:320px;
  padding:14px 20px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  color:#111;
  font-weight:600;
  font-size:16px;
  line-height:1;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:opacity .2s ease;
}

/* 右矢印（afterで画像を表示） */
.mp-link-button::after{
  content:"";
  width:14px;
  height:14px;
  background-image:url(../images/right_24.svg); /* オレンジ矢印SVG */
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  flex:0 0 auto;              /* 収縮させない */
}

.mp-link-button:hover{
  opacity:.8;
  text-decoration:none;
}

@media (max-width:780px){
  .mp-link-button{
    width:100%;
    min-width:0;
    justify-content:center;   /* SPは中央揃えで幅いっぱい */
    padding:16px 22px;
    border-radius:8px;
  }
}

/* === 他のエリアの相場情報を調べる：ボタンサイズ拡大 === */
.mp-link-button {
  min-width: 300px;        /* ← 横幅を広げる（元320px） */
  padding: 18px 28px;      /* ← 内側余白を増やす（上下+左右） */
  font-size: 18px;         /* ← 文字を少し大きく */
  border-radius: 12px;     /* ← 丸みも少し強調 */
  box-shadow: 0 3px 8px rgba(0,0,0,0.08); /* ← 影をわずかに強調 */
}

.mp-link-button::after {
  width: 20px;             /* ← 矢印も少し大きく */
  height: 20px;
}

/* 賃料注記「※賃料は税別です。」 */
.rent-market .rent-note {
  font-size: 0.85rem;
  color: #555;
  text-align: right;   /* 右寄せ（画像2枚目のイメージに近づける） */
  margin-bottom: 10px;
}

/* SP 時は左右の余白を少しだけ揃える */
@media (max-width: 780px) {
  .rent-market .rent-note {
    font-size: 0.8rem;
  }
}

/* ボタン本体 */
.other-area-btn {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    background: #ffffff;
    border:1px solid #e5e7eb;
    border-radius: 12px;
    padding: 25px 40px;
    font-weight:600;
    font-size:18px;
    color: #111;
    text-decoration: none;
    transition: all .25s ease;
    position: relative;
}

/* 矢印アイコン（after） */
.other-area-btn::after {
    content: "";
    width: 8px;
    height: 12px;
    background-image: url('/images/right-orange.svg');  /* ←利用中の矢印に置き換えてOK */
    background-size: contain;
    background-repeat: no-repeat;
    transition: filter .25s ease;
}

/* hover：背景オレンジ・文字白・矢印白、下線無し */
.other-area-btn:hover {
    background-color: #F5A623;
    border-color: #F5A623;
    color: #ffffff;
    text-decoration: none;         /* hover でも下線なし */
}

/* hover 時の矢印を白化 */
.other-area-btn:hover::after {
    filter: brightness(0) invert(1); /* 白に変える */
}

.price-table-wrap table {
  display: block;
}

/* SP版：price-table だけ右の余白をなくす */
@media (max-width: 1000px) {
  .price-table {
    /* コンテナの右 padding 20px を打ち消して、画面端まで伸ばす */
    margin-right: -20px;
  }
}

/* === SP版：テキスト中央 ＋ 矢印は右端に固定 === */
@media (max-width: 1000px){
  /* テキスト（span.label）も明示的に中央寄せ */
  .other-area-btn .label{
    width: 100%;
    text-align: center;
  }
}


/* === SP版：テキスト中央＋矢印をすぐ右に置いて、セットで中央揃え === */
@media (max-width: 1000px) {

  .other-area-btn {
    width: 100% !important;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center !important;  /* テキスト＋矢印のセットを中央に */
    padding: 16px 22px !important;
    position: static !important;        /* 右端固定していた absolute を打ち消す */
    white-space: nowrap !important;
    font-size: 16px;
  }

  .other-area-btn::after {
    position: static !important;        /* absolute を無効化 */
    right: auto;
    top: auto;
    transform: none;
    margin-left: 0 !important;
  }
}

.card-property .card-title {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.card-property .card-address {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: #555;
}

.card-property {
    display: block !important;   /* flex → block（縦方向）に戻す */
}

.property-main {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

@media (min-width: 1199px) {
    .property-image img {
        width: 150px !important; /* お好みで */
        height: 210px !important;
    }
}

.property-info .station::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

@media (max-width: 680px) {
    .card-property img {
        width: 180px !important;
        height: 248px !important;
        border-radius: 5px !important;

        max-height: none !important;   /* 上書きのため追加 */
    }
}

.card-property {
  border: 1px solid #e5e7eb;
}

/* 550px 未満：画像の下に情報ブロックを配置 */
@media (max-width: 550px) {

  /* 画像＋情報を縦並びにする */
  .property-main {
    display: flex;          /* 念のため明示 */
    flex-direction: column; /* ← ここがポイント：縦並び */
    align-items: flex-start;
    gap: 0;
  }

  /* 画像は中央寄せにしたい場合（任意） */
  .property-image {
    margin: 12px auto 10px;
    text-align: center;
  }

  .property-image img {
    display: block;
    margin: 0 auto;
  }
}

/* 550px未満：カード内を中央に寄せる */
@media (max-width: 550px) {

  /* カード全体の横幅を自動センターに */
  .card-property {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* カード内部の本文部分も中央寄せ */
  .card-property .property-info {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 550px) {
  .slider .slick-slide {
    display: flex !important;
    justify-content: center !important;
  }
}

@media (max-width: 680px) {
  .property-info {
    max-width: 100% !important;  /* ← 幅制限を解除 */
    width: 100% !important;
    margin: 0 !important;
  }
}

@media (max-width: 1000px) {
  section {
    margin-bottom: 20px !important;
  }
}

.property-image img {
  object-fit: contain !important;
}

.card {
  box-shadow: none !important;
  margin-bottom: 1px !important;
}