/* ===================================================
   物件詳細ページ 印刷用スタイルシート
   対象URL: https://heiseibldg.svcms.jp/test/79706/34/property/572.html
   =================================================== */
@media print {

  /* --- ページ設定 --- */
  @page {
    size: A4 portrait; /* A4縦向き */
    margin: 8mm;      /* 上下左右の余白をさらに縮小 */
  }

  /* --- 基本設定 --- */
  body, html {
    background: #fff !important;
    color: #000 !important;
    font-size: 8pt; /* 全体のフォントサイズを縮小 */
  }

  /* ===================================================
     STEP 1: 印刷しないパーツをすべて非表示
     =================================================== */
  
  /* ページ全体のヘッダー、メニュー、フッター、バナーなど */
  header,
  .pullmenu,
  #teaser,
  #breadcrumb,
  .common_banner,
  #sp_bottom,
  footer,
  .pagetop,
  #contents > .inner > .com_box.contact, /* 下部のお問い合わせエリア */
  #contents > .inner > h2.com_tit01,     /* 下部の「お問い合わせ」タイトル */
  .property_detail > .inner > .com_box,  /* 物件詳細内のPR文など */
  .view360, /* 360度画像 */
  .show /* PRコメントなどの表示クラス */
  {
    display: none !important;
  }
  
  /* コンテンツ内の不要なボタン */
  .btn_center, /* 「物件一覧に戻る」など全てのボタン */
  .property_box .btn { /* PDFダウンロードボタンなど */
      display: none !important;
  }
  
  /* 写真エリアの拡大アイコン */
  .visible-pc,
  .visible-ts {
    display: none !important;
  }
  
  /* 物件詳細情報テーブルは非表示 */
  table.tbl_detail {
      display: none !important;
  }

  img {
    max-width: 100%;
  }

  /* ===================================================
     STEP 2: 印刷するパーツだけを表示し、スタイルを調整
     =================================================== */

  /* 全体のラッパー要素の余白や線をリセット */
  #wrapper,
  #contents,
  .com_box.property_detail,
  .pageinner,
  .inner {
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    float: none !important;
    background: none !important;
  }

  /* property_boxの背景と余白も念のためリセット */
  .property_box {
      background: none !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
  }
  
  /* --- 1. 物件名 --- */
  h2.postTit {
    font-size: 15pt !important;
    text-align: center;
    margin: 0 0 0 0; 
    line-height: 1.2;
    background: none !important; 
    z-index: 10 !important;
  }

  /* --- 2. 物件写真 & 3. 間取図 & その他画像 (3列レイアウト) --- */
  .property_detail .imageBox {
    display: flex !important;
    background: none !important;
    gap: 5px;
    align-items: stretch; /* 子要素(leftBox, rightBox)の高さを揃える */
    margin: 0 0 0 0; 
    page-break-inside: avoid;
    position: relative; /* 重なり順の制御のため追加 */
    z-index: 1;      /* 重なり順の制御のため追加 */
    height: auto !important;
  }
  
  /* レイアウトのズレを修正するため、左右のエリアの余白などをリセット */
  .property_detail .imageBox .leftBox, .imageBox .rightBox {
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      height: auto !important;
  }

  /* 「物件写真」と「間取図」を内包する左側エリア */
  .property_detail .imageBox .leftBox {
    display: flex !important;
    justify-content: space-between;
    gap: 5px;
    width: calc(66.66% - 3px) !important;
  }
  .property_detail .imageBox .leftBox .img {
    width: calc(50% - 3px) !important;
    position: relative;
    height: auto !important;
  }
  .property_detail .imageBox .leftBox .img a > img {
    width: 100% !important;
    height: auto;
    /*max-height: 250px !important;*/
    display: block;
    object-fit: contain;
  }
  /* メイン写真を左、間取り図を右にするため順番を調整 */
  .property_detail .imageBox .leftBox .img:has(a[href*="heimenzu"]) {
    order: 1; /* 間取図を一番左に */
  }
  .property_detail .imageBox .leftBox .img:has(a[href*="main_"]) {
    order: 2; /* 物件写真を中央に */
  }
  /* 「その他画像」の右側エリア */
  .property_detail .imageBox .rightBox {
    display: flex !important; /* 子要素を中央揃えするためflexに変更 */
    align-items: center; /* 子要素(.otherImg)を垂直方向に中央揃え */
    order: 3;
    width: calc(33.33% - 3px) !important;
    background: none !important;
  }
  .property_detail .imageBox .rightBox .otherImg {
      display: flex;
      flex-wrap: wrap;
      gap: 2px;
      width: 100%;
  }
  .property_detail .imageBox .rightBox .otherImg .img {
       width: calc((100% - 4px) / 3); /* 3列レイアウト */
       height: 60px; /* 高さを固定してグリッドを整える */
       box-sizing: border-box;
       overflow: hidden; /* はみ出した部分を隠す */
       padding: 4 !important;
       margin: 0 !important;
   }
  .property_detail .imageBox .rightBox .otherImg .img img {
       width: 100%;
       height: 100%;
       object-fit: cover; /* はみ出した部分をトリミングしてコンテナに合わせる */
       vertical-align: top;
   }

   .property_detail .zoom_icon {
    width: 60%;
    position: static;
    display: none;
   }

  .property_detail .zoom_icon img {
    width: 23px;
   }

   .property_detail .view360 {
    display: none !important;
    margin-top: 0 !important;
   }

   .property_detail .btn_pdf {
    margin-top: 0 !important;
   }

  /* --- 4. 物件概要 --- */
  table.tbl_property {
    width: calc(100% - 2px) !important;
   margin-top: 15px;
    page-break-inside: avoid;
    border-collapse: collapse !important; /* テーブルの線を綺麗に表示 */
    border: 1px solid !important;
    position: relative; /* 重なり順の制御のため追加 */
    z-index: 10 !important;      /* 重なり順の制御のため追加 */
  }
  table.tbl_property th,
  table.tbl_property td {
    padding: 3px 1rem !important;
    border: 1px solid !important;
    font-size: 10pt !important;
    line-height: 1.1 !important;
  }

  /*--- 5. 地図*/
  .property_map {
    page-break-inside: avoid;
    text-align: center;
    margin-top: 15px !important;
  }
  .property_map iframe {
    height: 300px !important;
    border: 1px solid #ccc !important;
  } 
}