@charset "UTF-8";

/* ============================================================
   SALE定型 共通スタイル
   single-sales.php 配下の定型テンプレートから読み込まれる
   （style.css は Prepros コンパイル物のため直接編集しない）
============================================================ */

/* 買付申込有りカバー
   .seiyakuzumi / .omoushikomizumi（style.css）と同じ仕組みの「買付申込有り」版。
   写真ブロックを <div class="kaitsukeari">…</div> で囲うと
   半透明の黒幕＋白帯バッジが重なる（スライダー操作は可能） */
.kaitsukeari {
  position: relative;
}
.kaitsukeari::before {
  content: "";
  background-image: url(kaitsukeari.svg);
  background-repeat: no-repeat;
  width: 200px;
  height: 50px;
  background-size: contain;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}
@media screen and (max-width: 480px) {
  .kaitsukeari::before {
    width: 160px;
    height: 40px;
  }
}
.kaitsukeari::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.34);
  z-index: 1;
}

/* ============================================================
   メイン画像（新築・リノベ定型 .salebuilt-townhead-img）
   旧テンプレートの inline style（max-width:1200px; margin:0 auto;）を移設。
   買付・成約時はこのブロックに .kaitsukeari 等を直接付与するため、
   カバーの黒幕が画像の外へ広がらないよう幅指定をブロック側に持つ
============================================================ */
.sale-teikei .salebuilt-townhead-img {
  max-width: 1200px;
  margin-inline: auto;
}
.sale-teikei .salebuilt-townhead-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   縦長画像の巨大化対策（縦上限1200px）
   縦長1枚画像（例: リノベの縦長間取り図）が幅100%で巨大化しないよう
   高さ上限を設け、横位置は中央寄せにする
============================================================ */
/* 新築・リノベ定型: Plan 間取り図 */
.sale-teikei .madori-wrapper img {
  max-width: 100%;
  max-height: 1200px;
  width: auto;
  height: auto;
  display: block;
  margin-inline: auto;
}

/* 売地定型: 参考プランの間取り図・断面図 */
.sale-teikei .house-intro-plan img,
.sale-teikei .house-intro-danmen img {
  max-width: 100%;
  max-height: 1200px;
  width: auto;
  height: auto;
  display: block;
  margin-inline: auto;
}

/* ============================================================
   一覧カードの表記統一（SALE一覧・HOME）
   SALE一覧の写真下テキストは HOME のSALE枠カード
   （.home-sale_column .card .date_item）と同一マークアップ・同一スタイル
   （2026-07-13 クライアント指示。style.cssのHOME側定義をここに転記して
   .sale-index スコープで再現する）
============================================================ */

/* カード全体リンク化 */
.sale-index a.sales-card { display: block; color: inherit; text-decoration: none; }

/* サムネをHOMEと同じ統一トリミング（1000:659） */
.sale-index .sales-card .model-type_img img { width: 100%; aspect-ratio: 1000 / 659; height: auto; object-fit: cover; }

/* 写真下テキスト（HOMEの .date_item と同スタイル・左寄せ） */
.sale-index .sales-card .date_item { margin: 0.5rem; text-align: left; }
.sale-index .sales-card .date_item .ttl {
  margin-top: 0;
  font-family: "FP-HiraKakuProN-W6";
  font-style: normal;
  font-weight: 600;
  color: #222222;
  letter-spacing: 0.05em;
  line-height: 1.6923076923;
  font-size: 1.1rem;
}
@media screen and (min-width: 480px) {
  .sale-index .sales-card .date_item .ttl { font-size: calc(0.6944444444vw + 7.6666666667px); }
}
@media screen and (min-width: 768px) {
  .sale-index .sales-card .date_item .ttl { font-size: 1.3rem; }
}
.sale-index .sales-card .date_item .price {
  margin-top: 5px;
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: #222222;
  letter-spacing: 0.03em;
  line-height: 1.1;
  font-size: 1.8rem;
}
@media screen and (min-width: 480px) {
  .sale-index .sales-card .date_item .price { font-size: calc(2.7777777778vw + 4.6666666667px); }
}
@media screen and (min-width: 768px) {
  .sale-index .sales-card .date_item .price { font-size: 2.6rem; }
}
.sale-index .sales-card .date_item .price .price-lavel {
  font-family: "FP-HiraKakuProN-W6";
  font-style: normal;
  font-weight: 600;
  font-size: 1.4rem;
  color: #222222;
  letter-spacing: 0.05em;
  line-height: 1.1428571429;
  display: inline-block;
  margin-right: 5px;
}
.sale-index .sales-card .date_item .price .price-mini {
  font-family: "FP-HiraKakuProN-W6";
  font-style: normal;
  font-weight: 600;
  font-size: 1.2rem;
  color: #222222;
  letter-spacing: 0.05em;
  line-height: 1.1666666667;
  display: inline-block;
}

/* style.css（Prepros産・編集禁止）の .sales-card .price::after が "(税込)" を
   自動付与するため打ち消す（税込表記はHOMEと同じく price-mini で個別に持つ） */
.sale-index .sales-card .price::after { content: none; }

.sale-index .sales-card .date_item .dl-set {
  font-style: normal;
  font-weight: 300;
  font-size: 1.1rem;
  color: #222222;
  letter-spacing: 0.05em;
  line-height: 1.6727272727;
}
@media screen and (max-width: 480px) {
  .sale-index .sales-card .date_item .dl-set { margin-top: 10px; }
}
.sale-index .sales-card .date_item .dl-set .dltable-set { display: flex; justify-content: space-between; }
.sale-index .sales-card .date_item .dl-set .dltable-set > dt { flex: 0 0 72px; }
.sale-index .sales-card .date_item .dl-set .dltable-set > dd { flex: 1; }
@media screen and (max-width: 480px) {
  .sale-index .sales-card .date_item .dl-set .dltable-set { display: block; }
  .sale-index .sales-card .date_item .dl-set .dltable-set > dd {
    margin-left: 10px;
    padding-bottom: 3px;
    border-bottom: solid #c2a979 1px;
  }
}

/* 買付・注釈はHOMEと同じ全体共通スタイルに戻す
   （style.cssの .sales-card-column .sales-card .sold-lable 上書きを打ち消し） */
.sale-index .sales-card .sold-lable { margin: 0; font-weight: 600; font-size: 1.2rem; }
@media screen and (min-width: 480px) {
  .sale-index .sales-card .sold-lable { font-size: calc(0.6944444444vw + 8.6666666667px); }
}
@media screen and (min-width: 768px) {
  .sale-index .sales-card .sold-lable { font-size: 1.4rem; }
}

/* HOMEのSALE枠サムネをサイズ統一（1000:659でトリミング） */
.home-sale_area .home-sale_column .card .img img { width: 100%; aspect-ratio: 1000 / 659; height: auto; object-fit: cover; }

/* ============================================================
   分譲地定型: ページ冒頭のトピックラベル（買付あり等）の余白
   販売区画数の行と詰まって見えるため上に余白を取る（2026-07-16）
============================================================ */
.sale-teikei .sale-built-town-date .sold-lable {
  margin-top: 0.8em;
}

/* ============================================================
   売地定型: まち散歩の縦長画像はトリミングせずそのまま表示
   （built_43 CSS の aspect-ratio 3/2 + object-fit: cover を打ち消す。2026-07-16）
============================================================ */
.sale-teikei .town-walk-images .town-walk-image.is-portrait img {
  aspect-ratio: auto;
}