/* =========================================================
   Print CSS
   Bootstrap5をxxl表示のままA4に縮小印刷
========================================================= */

@page {
  size: A4 portrait;
  margin: 8mm;
}

@media print {

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /*
    Bootstrap xxl相当の画面幅として扱う
    xxl breakpoint = 1400px以上
    container max-width = 1320px
  */
  html,
  body {
    width: 1400px !important;
    min-width: 1400px !important;
    max-width: none !important;
  }

  /*
    A4縦に収めるために全体を縮小
    A4幅210mm - 左右8mm = 約194mm
    194mm ≒ 733px
    733px / 1400px ≒ 0.52
  */
  body {
    zoom: 52%;
  }

  /*
    zoomがうまく効かない環境用の保険
    ※通常はzoomが優先されます
  */
  @supports not (zoom: 1) {
    body {
      transform: scale(0.52);
      transform-origin: top left;
    }
  }

  /* ---------------------------------------------
     Bootstrap containerをxxl状態に固定
  --------------------------------------------- */

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    width: 1320px !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ---------------------------------------------
     Bootstrap row / colを印刷時も横並びにする
  --------------------------------------------- */

  .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: calc(-1 * var(--bs-gutter-y)) !important;
    margin-right: calc(-0.5 * var(--bs-gutter-x)) !important;
    margin-left: calc(-0.5 * var(--bs-gutter-x)) !important;
  }

  .row > * {
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
    margin-top: var(--bs-gutter-y) !important;
  }

  /* ---------------------------------------------
     Bootstrap col指定を、印刷時は全ブレイクポイント有効化
     sm → md → lg → xl → xxl の順で書くことで、
     col-sm-12 col-lg-6 の場合は col-lg-6 が勝ちます
  --------------------------------------------- */

  .col {
    flex: 1 0 0% !important;
  }

  .col-auto {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .col-1 { flex: 0 0 auto !important; width: 8.33333333% !important; }
  .col-2 { flex: 0 0 auto !important; width: 16.66666667% !important; }
  .col-3 { flex: 0 0 auto !important; width: 25% !important; }
  .col-4 { flex: 0 0 auto !important; width: 33.33333333% !important; }
  .col-5 { flex: 0 0 auto !important; width: 41.66666667% !important; }
  .col-6 { flex: 0 0 auto !important; width: 50% !important; }
  .col-7 { flex: 0 0 auto !important; width: 58.33333333% !important; }
  .col-8 { flex: 0 0 auto !important; width: 66.66666667% !important; }
  .col-9 { flex: 0 0 auto !important; width: 75% !important; }
  .col-10 { flex: 0 0 auto !important; width: 83.33333333% !important; }
  .col-11 { flex: 0 0 auto !important; width: 91.66666667% !important; }
  .col-12 { flex: 0 0 auto !important; width: 100% !important; }

  .col-sm { flex: 1 0 0% !important; }
  .col-sm-auto { flex: 0 0 auto !important; width: auto !important; }
  .col-sm-1 { flex: 0 0 auto !important; width: 8.33333333% !important; }
  .col-sm-2 { flex: 0 0 auto !important; width: 16.66666667% !important; }
  .col-sm-3 { flex: 0 0 auto !important; width: 25% !important; }
  .col-sm-4 { flex: 0 0 auto !important; width: 33.33333333% !important; }
  .col-sm-5 { flex: 0 0 auto !important; width: 41.66666667% !important; }
  .col-sm-6 { flex: 0 0 auto !important; width: 50% !important; }
  .col-sm-7 { flex: 0 0 auto !important; width: 58.33333333% !important; }
  .col-sm-8 { flex: 0 0 auto !important; width: 66.66666667% !important; }
  .col-sm-9 { flex: 0 0 auto !important; width: 75% !important; }
  .col-sm-10 { flex: 0 0 auto !important; width: 83.33333333% !important; }
  .col-sm-11 { flex: 0 0 auto !important; width: 91.66666667% !important; }
  .col-sm-12 { flex: 0 0 auto !important; width: 100% !important; }

  .col-md { flex: 1 0 0% !important; }
  .col-md-auto { flex: 0 0 auto !important; width: auto !important; }
  .col-md-1 { flex: 0 0 auto !important; width: 8.33333333% !important; }
  .col-md-2 { flex: 0 0 auto !important; width: 16.66666667% !important; }
  .col-md-3 { flex: 0 0 auto !important; width: 25% !important; }
  .col-md-4 { flex: 0 0 auto !important; width: 33.33333333% !important; }
  .col-md-5 { flex: 0 0 auto !important; width: 41.66666667% !important; }
  .col-md-6 { flex: 0 0 auto !important; width: 50% !important; }
  .col-md-7 { flex: 0 0 auto !important; width: 58.33333333% !important; }
  .col-md-8 { flex: 0 0 auto !important; width: 66.66666667% !important; }
  .col-md-9 { flex: 0 0 auto !important; width: 75% !important; }
  .col-md-10 { flex: 0 0 auto !important; width: 83.33333333% !important; }
  .col-md-11 { flex: 0 0 auto !important; width: 91.66666667% !important; }
  .col-md-12 { flex: 0 0 auto !important; width: 100% !important; }

  .col-lg { flex: 1 0 0% !important; }
  .col-lg-auto { flex: 0 0 auto !important; width: auto !important; }
  .col-lg-1 { flex: 0 0 auto !important; width: 8.33333333% !important; }
  .col-lg-2 { flex: 0 0 auto !important; width: 16.66666667% !important; }
  .col-lg-3 { flex: 0 0 auto !important; width: 25% !important; }
  .col-lg-4 { flex: 0 0 auto !important; width: 33.33333333% !important; }
  .col-lg-5 { flex: 0 0 auto !important; width: 41.66666667% !important; }
  .col-lg-6 { flex: 0 0 auto !important; width: 50% !important; }
  .col-lg-7 { flex: 0 0 auto !important; width: 58.33333333% !important; }
  .col-lg-8 { flex: 0 0 auto !important; width: 66.66666667% !important; }
  .col-lg-9 { flex: 0 0 auto !important; width: 75% !important; }
  .col-lg-10 { flex: 0 0 auto !important; width: 83.33333333% !important; }
  .col-lg-11 { flex: 0 0 auto !important; width: 91.66666667% !important; }
  .col-lg-12 { flex: 0 0 auto !important; width: 100% !important; }

  .col-xl { flex: 1 0 0% !important; }
  .col-xl-auto { flex: 0 0 auto !important; width: auto !important; }
  .col-xl-1 { flex: 0 0 auto !important; width: 8.33333333% !important; }
  .col-xl-2 { flex: 0 0 auto !important; width: 16.66666667% !important; }
  .col-xl-3 { flex: 0 0 auto !important; width: 25% !important; }
  .col-xl-4 { flex: 0 0 auto !important; width: 33.33333333% !important; }
  .col-xl-5 { flex: 0 0 auto !important; width: 41.66666667% !important; }
  .col-xl-6 { flex: 0 0 auto !important; width: 50% !important; }
  .col-xl-7 { flex: 0 0 auto !important; width: 58.33333333% !important; }
  .col-xl-8 { flex: 0 0 auto !important; width: 66.66666667% !important; }
  .col-xl-9 { flex: 0 0 auto !important; width: 75% !important; }
  .col-xl-10 { flex: 0 0 auto !important; width: 83.33333333% !important; }
  .col-xl-11 { flex: 0 0 auto !important; width: 91.66666667% !important; }
  .col-xl-12 { flex: 0 0 auto !important; width: 100% !important; }

  .col-xxl { flex: 1 0 0% !important; }
  .col-xxl-auto { flex: 0 0 auto !important; width: auto !important; }
  .col-xxl-1 { flex: 0 0 auto !important; width: 8.33333333% !important; }
  .col-xxl-2 { flex: 0 0 auto !important; width: 16.66666667% !important; }
  .col-xxl-3 { flex: 0 0 auto !important; width: 25% !important; }
  .col-xxl-4 { flex: 0 0 auto !important; width: 33.33333333% !important; }
  .col-xxl-5 { flex: 0 0 auto !important; width: 41.66666667% !important; }
  .col-xxl-6 { flex: 0 0 auto !important; width: 50% !important; }
  .col-xxl-7 { flex: 0 0 auto !important; width: 58.33333333% !important; }
  .col-xxl-8 { flex: 0 0 auto !important; width: 66.66666667% !important; }
  .col-xxl-9 { flex: 0 0 auto !important; width: 75% !important; }
  .col-xxl-10 { flex: 0 0 auto !important; width: 83.33333333% !important; }
  .col-xxl-11 { flex: 0 0 auto !important; width: 91.66666667% !important; }
  .col-xxl-12 { flex: 0 0 auto !important; width: 100% !important; }

  /* ---------------------------------------------
     印刷時に不要なUIのみ非表示
  --------------------------------------------- */

  .back-to-top,
  .scroll-progress,
  .cursor-page-inner,
  .preloader,
  .page-loader,
  .navbar-toggler,
  .swiper-button-next,
  .swiper-button-prev,
  .swiper-pagination {
    display: none !important;
  }

  /*
    fixed要素が印刷で変な位置に出る場合の対策
    ヘッダーを印刷にも出したい場合は header / .navbar は消さない
  */
  .fixed-top,
  .fixed-bottom,
  .position-fixed {
    position: static !important;
  }

  /*
    画像がコンテナからはみ出すのを防止
  */
  img,
  svg,
  video,
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}