@charset "UTF-8";

/* 物件情報ページ専用スタイル */

/* 各物件カテゴリのセクション（共通スタイル） */
.property-category {
  margin-bottom: 30px; /* カテゴリ間の下部余白（SP/PC共通） */
}

/* property-item のラッパー。PC版で中央寄せと最大幅を設定するため */
.property-item-wrapper {
  margin: 0 10px; /* SP版の左右余白 */
}

/* 各物件アイテムの四角いブロック（共通スタイル） */
.property-item {
  background-color: #ffffff;
  padding: 20px; /* SP版のパディング */
  border: 1px solid #ff9933; /* ロゴと同じオレンジ色の罫線で囲む */
  border-radius: 0; /* 角を丸くしない */
  box-shadow: none; /* 影を付けない */
  height: auto; /* SP版では高さを自動調整 */
}

/* カテゴリヘッダー（カテゴリ名）共通スタイル */
.category-header {
  padding-left: 0;
  border-left: none;
  margin-bottom: 20px;
}

.category-header h2 {
  font-size: 26px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
  color: #333;
}

/* 物件詳細と画像をまとめるコンテナ（共通スタイル） */
.property-content {
  /* SP版では通常のブロック表示に戻すため、display:flexやflex-direction、gapはここに書かない */
}

/* 物件詳細エリア（物件名リスト）共通スタイル */
.property-details {
  width: 100%; /* SP版では幅100% */
  margin-bottom: 20px; /* SP版で画像との間に余白を確保 */
}

.property-details ul {
  list-style-type: disc;
  margin-left: 20px;
  padding: 0;
  font-size: 16px; /* SP版の物件名の文字サイズを本文と同じくらいに調整 */
  color: #000;
  font-weight: normal;
}

.property-details li {
  margin-bottom: 5px;
  line-height: 1.5;
}

/* 物件画像エリア（共通スタイル） */
.property-image {
  width: 100%; /* SP版では幅100% */
  justify-content: center; /* SP版でも画像が中央に来るように維持 */
  align-items: center; /* SP版でも画像が中央に来るように維持 */
  overflow: hidden;
  border-radius: 0;
}

.property-image img {
  width: 100%;
  height: auto; /* SP版では高さを自動調整 */
  max-width: 400px; /* ロードサイド/商業ビル画像に合わせる */
  max-height: 250px; /* ロードサイド/商業ビル画像に合わせる */
  object-fit: cover; /* 画像をトリミングして領域に合わせる */
  display: block;
}

/* --- リード文のマージン調整 --- */
.kiji .lead { /* style-contents.cssの.kiji .leadよりも詳細度を上げて上書き */
    margin-bottom: 40px; /* リード文の下にマージンを追加 */
}


/*---------------------------768px以上 (PC版)---------------------------*/
@media (min-width: 768px){

/* property-category は property-grid-container の子要素として横並び */
.property-category {
  margin-bottom: 0; /* Flexアイテムなので個別の下余白は不要 */
  flex: 1; /* property-grid-container内で均等な幅を確保 */
  margin-left: 0;
  margin-right: 0;
}

.property-item-wrapper {
  max-width: none;
  margin: 0;
  height: 100%; /* 親要素の高さに合わせる */
}

.property-item {
  display: flex;
  flex-direction: column; /* カテゴリ名とコンテンツ部分を縦に並べる */
  padding: 30px;
  height: 100%; /* 親要素の高さに合わせて高さを確保 */
}

.category-header {
  margin-bottom: 30px;
}

.category-header h2 {
  font-size: 30px;
}

/* --- ロードサイド店舗と商業ビル (PC版) --- */
/* property-grid-container 内の property-content に適用されるスタイル */
.property-grid-container .property-content {
  display: flex;
  flex-direction: column; /* 物件詳細と画像を縦並びにする */
  align-items: center; /* 子要素（物件詳細と画像）を中央揃えにする */
  gap: 30px; /* 物件詳細と画像の間隔 */
  flex: 1; /* property-item内で利用可能な高さを埋める */
}

.property-grid-container .property-details {
  width: 100%;
  margin-bottom: 0;
}

.property-grid-container .property-image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 0;
}

.property-grid-container .property-image img {
  width: 100%;
  height: 250px; /* 画像の高さを固定 */
  object-fit: cover;
  max-width: 400px; /* ロードサイド/商業ビル画像の最大幅 */
}

/* --- property-grid-container （PC版）--- */
.property-grid-container {
  display: flex; /* Flexboxを有効にして横並びにする */
  gap: 30px; /* カラム間の隙間 */
  margin-bottom: 60px; /* 上段と下段の間隔を調整 */
  max-width: 1000px; /* 全体のコンテンツ最大幅 */
  margin-left: auto;
  margin-right: auto;
  align-items: stretch; /* 高さの異なる子要素のボックスの高さを揃える */
}


/* --- レジデンスビルカテゴリ (PC版の特別なレイアウト) --- */
/* residence-category クラスを持つ property-category に適用されるスタイル */
.residence-category {
  max-width: 1000px; /* **全体のコンテンツ最大幅に合わせる** */
  margin-left: auto; /* **中央寄せ** */
  margin-right: auto; /* **中央寄せ** */
  margin-bottom: 30px;

}

.residence-category .property-item {
  display: flex;
  flex-direction: column; /* カテゴリ名とコンテンツ部分を縦に並べる */
  padding: 30px;
  height: auto; /* 高さを自動調整 */
}

.residence-category .property-content {
  display: flex;
  flex-direction: row; 
  justify-content: space-between; /* 左右に要素を配置 */
  align-items: flex-start; /* 上揃え */
  gap: 30px; /* 物件詳細と画像間の間隔 */
  flex: 1;
}

.residence-category .property-details {
  width: calc(50% - 15px); 
  margin-bottom: 0;
}

.residence-category .property-image {
  width: calc(50% - 15px); /* **写真エリアを50%幅に戻す** */
  max-width: 400px; /* **画像自体の最大幅を400pxに戻す（ロードサイド/商業ビルと同じ）** */
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 0;
}

.residence-category .property-image img {
  width: 100%;
  height: 250px; /* 画像の高さを固定 */
  object-fit: cover; /* 画像をトリミングして領域に合わせる */
}

} /* @media (min-width: 768px) の閉じ括弧 */