/* -----------------------------------------------------------------------*/
/* 【注意】

/* 既存クラスの修正は、影響範囲を限定したいので、:has(.c-mansion-view)を設定してください。
/* -----------------------------------------------------------------------*/

/* -----------------------------------------------------------------------*/
/* ランキングページ共通コンポーネント
/* -----------------------------------------------------------------------*/
.c-mansion-view {
  aspect-ratio: var(--ratio, 333/250);
  background: var(--src), url(/mansion/library/images/icon_noimg.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover, 127px 117px;
  height: auto !important;
}
@media screen and (max-width: 767px) {
  .c-mansion-view {
    background-size: cover, 30%;
  }
}

/* -----------------------------------------------------------------------*/
/* 全国ページ
/* -----------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
  .c-box001__list:has(.c-mansion-view) {
    overflow: hidden;
    height: 220px;
  }
  .c-mansion-view--zenkoku {
    margin-top: -15px;
  }
}

/* -----------------------------------------------------------------------*/
/* エリア・路線ページ
/* -----------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .c-mansion-view--area {
    height: 200px !important;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .c-mansion-view--area {
    height: 220px !important;
  }
}

/* -----------------------------------------------------------------------*/
/* MDPページ
/* -----------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
  .c-mansion-view--mdp {
    height: 220px !important;
  }
}

/* -----------------------------------------------------------------------*/
/* distribution ページ
/* -----------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .c-box002__img:has(.c-mansion-view) {
    overflow: hidden;
  }
  .c-mansion-view--distribution {
    height: 266px !important;
    width: 100%;
  }
}
.c-box002__img--img1:has(.c-mansion-view) {
  /* 既存の height: 317px; を打ち消し */
  height: auto;
}
@media screen and (min-width: 768px) {
  .l-content {
    width: 868px;
  }
}
