@media print {
    /*oli-はオリジナルの意味*/
    body {
          
        background: none !important; /* ボディの背景を無効にする */
    } 
    /* 印刷時に表示にする要素 */
    .oli-yes-print {
        display: block; /* すべての要素を表示にする */
    }
    /* 印刷時に非表示にする要素 */
    .oli-no-print {
        display: none; /* すべての要素を非表示にする */
    }
    h1{
        font-size: 20pt !important; /* フォントサイズを調整 */ 
        padding-bottom: 0px !important; 
    }
    .oli-wid100{
        width: 100% !important; /* 幅を100%に設定し、優先順位を上げる */
        max-width: none !important; /* 最大幅を解除 */
    }
    .oli-age-chart {
       font-size: 9pt !important;  /*印刷時のフォントサイズを調整 */  
    }
    /* col-md-4を印刷時に強制的に適用 */
    .col-md-4 {
        float: left; /* 左に寄せる */
        width: 33.3333%; /* 3列に分ける */     
    } 
    /* 印刷時のみ表の上下のパディングを狭める */
    .oli-print-table-sm > :not(caption) > * > * {
        padding: 0.25rem 0.25rem;
    }
    /* 印刷時フッターを内容量によらずに最下部へ.1 */
    .oli-wrap {
        display: block; /* 印刷時はブロック要素に変更 */
        min-height: auto; /* 最小高さを自動に設定 */
    }
    /* 印刷時フッターを内容量によらずに最下部へ.2 */
    footer {
        position: fixed; /* フッターを固定位置に設定 */
        bottom: 20px; /* ページの下部に配置 */
        left: 0;
        right: 0;
        height: 50px; /* フッターの高さを指定 */
        background-color: #007bff; /* フッターの背景色を指定 */
        color: white; /* フッターの文字色を指定 */
        text-align: center; /* 中央揃え */
        padding: 10px 0; /* 上下のパディングを指定 */
        margin-left: 27px; /* 左のマージンを10pxに設定 */
        margin-right: 27px; /* 右のマージンを10pxに設定 */
    }
    
    /* 印刷時のみsaftyのカレンダーは2列にする */
    .calendar-zone {
        display: flex; /* フレックスボックスを使用して横並びにする */
        flex-wrap: wrap; /* 要素が折り返されるようにする */
        justify-content: space-between; /* 要素間のスペースを均等にする */
        margin: 0; /* マージンをリセット */
        padding: 0; /* パディングをリセット */
    }

    .calendar-container {
        width: 48%; /* 各カレンダーを2列にするための幅 */
        margin: 1%; /* カレンダー間のマージン */
        page-break-inside: avoid;  /*ページ内での分割を避ける */
        vertical-align: top; /* 上揃え */
    }

    .calendar {
        width: 100%; /* カレンダーの幅を100%に設定 */
        border-collapse: collapse; /* ボーダーを重ねる */
    }

    .calendar th, .calendar td {
        border: 1px solid black;
        width: calc(100% / 7); /* 7列の幅を設定 */
        text-align: left;
        vertical-align: top;
        padding: 6px; /* 左上から始めるためのパディング */
    }

    .calendar th {
        background-color: #ffe4e1; /* 曜日部分の背景を薄いピンクに */
        height: 40px; /* 曜日の段の高さを狭く */
        text-align: center; /* 曜日は中央寄せ */
        vertical-align: middle; /* 曜日は中央寄せ */
    }

    .calendar td {
        background-color: #ffffff; /* 日付部分の背景を白に */
        height: 65px; /* 日付の段の高さを高く */
    }
     /* 印刷時のページ設定 */
 @page {
    size: A4 portrait; /* A4サイズの縦向き */
    margin: 0mm 5mm; /* マージンを設定 */
}

}

