/* 物件詳細の印刷専用 */

/* 既定はA4縦＝物件詳細情報 */
@page { size: A4 portrait; margin: 12mm; }
/* 画像ページ用にA4横の名前付きページを定義（※Chromeしか対応できないため、現時点では使用していない！） */
@page landscape { size: A4 landscape; margin: 12mm; }


@media print {
    html, body {
        background: #fff !important;
        color: #000 !important;
    }

    /* 画像ページの横印刷対応のクラス(landscape) ------------------------ */
    /* 現時点ではページで縦・横指定は、Chromeしか対応できないため、landscapeクラスは使用しないこととなった。今後他のブラウザも対応することになったら、画像ページのみ横印刷対応が可能となる */
    /* このクラスが付いた要素配下はA4横ページに割り当て */
    .landscape { page: landscape; }

    /* 横ページ余白をゼロに */
    .landscape#print_image_list,
    .landscape {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 各 li を必ず新しいページ先頭に（=改ページ） */
    .landscape > li {
        break-before: page;
        page-break-before: always;
        break-inside: avoid-page;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -webkit-region-break-inside: avoid;
        height: 186mm; /* 印刷領域の高さ：A4横の内容高 */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 余白リセット */
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        float: none !important;
        position: static !important;
    }

    .landscape > li:first-child {
        break-before: auto;
        page-break-before: auto;
    }

    .landscape > li img {
        max-width: 100% !important;
        max-height: 186mm !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
        display: block;
        /* 分割防止 */
        break-inside: avoid-page;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -webkit-region-break-inside: avoid;
    }
    /* -------------------------------------------------------------- */


    /* 画像ページの縦印刷対応のクラス(image_page) ------------------------ */
    /* 余白をゼロに */
    .image_page#print_image_list,
    .image_page {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 各 li を必ず新しいページ先頭に（=改ページ） */
    .image_page > li {
        break-before: page;
        page-break-before: always;
        break-inside: avoid-page;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -webkit-region-break-inside: avoid;
        height: 186mm;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 余白リセット */
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        float: none !important;
        position: static !important;
    }

    .image_page > li:first-child {
        break-before: auto;
        page-break-before: auto;
    }

    .image_page > li img {
        max-width: 100% !important;
        max-height: 186mm !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
        display: block;
        /* 分割防止 */
        break-inside: avoid-page;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -webkit-region-break-inside: avoid;
    }
    /* -------------------------------------------------------------- */


    /* 1ページ目だけ縦・改ページ */
    .print_first_page, .print_first_page * {
        float: none !important;
        position: static !important;
        clear: both !important;
    }
    .print_first_page {
        break-after: page;
        page-break-after: always;
    }

    /* 物件のタイトル */
    h4.tit01 {
        margin-bottom: 20px;
        padding:5px 0 5px 13px;
        letter-spacing: 0.15em;
        color: #333333;
        font-size: 17px;
        line-height: 1;
        text-align: left;
        border-left: 10px solid #53a3b9;
        font-weight: 500;
    }

    .characteristic{
        color: #12576d;
        font-size: 16px;
        font-weight: 500;
        margin: 0 0 20px 23px;
    }


    /* 物件詳細テーブル */
    .detailInfo {
        background: #dddddd;
        width: 100%;
        margin-bottom: 30px;
        border-bottom: 1px solid #dddddd;
        font-size: 14px;
    }
    .detailInfo th {
        background: #ffffff;
        padding: 18px 24px;
        background-image: url(../images/contact_line.png);
        background-repeat: repeat-y;
        background-position: right;
        border-top: 1px solid #dddddd;
        border-left: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
        text-align: left;
        font-weight: 500;
        letter-spacing: 1px;
        font-size: 14px;
    }
    .detailInfo td {
        background: #ffffff;
        padding: 16px 15px 18px 15px;
        border-top: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
        line-height: 1.8;
    }
    .type01 th {
        width: 125px;
    }
    .type01 td {
        width: 520px;
        line-height: 1.6;
        letter-spacing: 1px;
    }
    .type02 th {
        width: 125px;
    }
    .type02 td {
        width: 200px;
        line-height: 1.6;
        letter-spacing: 1px;
    }

    .type03 th {
        width: 140px;
    }
    .type03 td {
        width: 200px;
        line-height: 1.6;
        letter-spacing: 1px;
    }
}