@charset "UTF-8";


/* スマホ用の印刷スタイル（画面幅が767px以下） */
@media print and (max-width: 767px) {

    html, body {
      margin: 0;
      padding: 0;
      height: 100pt !important;
      width: 266mm !important;
 overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; /* ページ全体を中央に */
      background-color: #fff;
    }

  body *:not(.print-erea1):not(.print-title2):not(.image-grid2):not(.image-grid2 *) {
    visibility: hidden; /* .print-title と .image-grid 以外を非表示 */
  }

  .print-erea1 {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 266mm;
    height: 100pt !important;
    background-color: #fff;
}


  /* 印刷時に表示する要素 */
  .print-erea1,
  .print-title2,
  .image-grid2,
  .image-grid2 * {
    visibility: visible !important; /* 強制的に表示 */
  }


  .image-grid2 {
    position: absolute;
    top: 0pt !important; /* タイトルの高さを考慮 */
    left: 0pt;
    width: 266mm;
   /* height: 549.88pt;*/
    /*max-height: calc(100% - 30px - 30px);  タイトルと下部余白を調整 */
    box-sizing: border-box;
    /*overflow: visible;
    page-break-inside: avoid;
    break-inside: avoid; 全体を表示するために変更 */
    margin: 0px;
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 7列 */
    grid-template-rows: repeat(7, 1fr); /* 10行 */
    gap: 0; /* 列間・行間の隙間をゼロ */
    /*justify-items: stretch;  セルを完全に引き伸ばす */
    /*align-items: stretch;  セルを完全に引き伸ばす */
    transform: scale(0.81); /* 全体をさらに縮小して10行を収める */
    transform-origin: center;
    border: 2px #000 solid;
    background-color: #fff;
     }

  /* 画像やセルのマージン/パディングをリセット */
  .image-grid2 img,
  .image-grid2 > * {
    margin: 0;
    padding: 0;
    width: 100%; /* セルの幅いっぱいに */
    height: 100%; /* セルの高さいっぱいに */
    /*object-fit: fill;  画像をセルにぴったり */
    box-sizing: border-box;

  }

  /* 最下行の画像にだけ余白を10px設定
  .image-grid2 img:nth-child(n+64):nth-child(-n+70) {
    margin-bottom: 70px;
  border-bottom: 1px solid #333;
}*/

.print-title2 {
    display: block !important;
    margin-top: 0pt;
  }

  .print-erea1 .print-title2 span{
    display: none;
  color: #00FF00;}

    .print-title2 {
      display: block !important; /* 強制的に表示 */
      visibility: visible !important; /* 強制的に表示 */
      text-align: center;
      font-size: 16pt; /* フォントサイズを小さく */
      font-weight: bold;
      margin-bottom: 13pt; /* マージンを小さく */
      padding: 0 0 0 0;
  /*    margin-left: 43pt;*/
      /*width: 266mm;*/
      }

  /* ページ設定 */
  @page {
    size: A4 landscape;
    margin: 0mm 10mm 0mm 0mm; /* 下部余白をさらに増やして最下行が切れないように */
  }

  /* ページブレークの制御 */
  body {
    page-break-after: avoid;
    page-break-before: avoid;
    page-break-inside: avoid;
  }


}



/* スマホ用の印刷スタイル（画面幅が768px以上） */
@media print and (min-width: 768px) {

  html, body {
    margin: 0;
    padding: 0;
    height: 100pt !important;
    width: 266mm !important;
overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* ページ全体を中央に */
    background-color: #fff;
  }

body *:not(.print-erea1):not(.print-title2):not(.image-grid2):not(.image-grid2 *) {
  visibility: hidden; /* .print-title と .image-grid 以外を非表示 */
}

.print-erea1 {
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 266mm;
  height: 100pt !important;
  background-color: #fff;
}


/* 印刷時に表示する要素 */
.print-erea1,
.print-title2,
.image-grid2,
.image-grid2 * {
  visibility: visible !important; /* 強制的に表示 */
}


.image-grid2 {
  position: absolute;
  top: 45pt; /* タイトルの高さを考慮 */
  left: 46pt;
  width: 266mm;
 /* height: 549.88pt;*/
  /*max-height: calc(100% - 30px - 30px);  タイトルと下部余白を調整 */
  box-sizing: border-box;
  /*overflow: visible;
  page-break-inside: avoid;
  break-inside: avoid; 全体を表示するために変更 */
  margin: 0px;
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 7列 */
  grid-template-rows: repeat(7, 1fr); /* 10行 */
  gap: 0; /* 列間・行間の隙間をゼロ */
  /*justify-items: stretch;  セルを完全に引き伸ばす */
  /*align-items: stretch;  セルを完全に引き伸ばす */
  transform: scale(0.95); /* 全体をさらに縮小して10行を収める */
  transform-origin: center;
  border: 2px #000 solid;
  background-color: #fff;
   }

/* 画像やセルのマージン/パディングをリセット */
.image-grid2 img,
.image-grid2 > * {
  margin: 0;
  padding: 0;
  width: 100%; /* セルの幅いっぱいに */
  height: 100%; /* セルの高さいっぱいに */
  /*object-fit: fill;  画像をセルにぴったり */
  box-sizing: border-box;

}

/* 最下行の画像にだけ余白を10px設定
.image-grid2 img:nth-child(n+64):nth-child(-n+70) {
  margin-bottom: 70px;
border-bottom: 1px solid #333;
}*/

.print-title2 {
  display: block !important;
  margin-top: 0pt;
}

.print-erea1 .print-title2 span{
  display: none;
color: #00FF00;}

  .print-title2 {
    display: block !important; /* 強制的に表示 */
    visibility: visible !important; /* 強制的に表示 */
    text-align: center;
    font-size: 16pt; /* フォントサイズを小さく */
    font-weight: bold;
    margin-bottom: 6pt; /* マージンを小さく */
    padding: 0 0 0 0;
margin-left: 110pt;
margin-top: 10pt;
/*width: 266mm;*/
    }

/* ページ設定 */
@page {
  size: A4 landscape;
  margin: 0mm 10mm 0mm 0mm; /* 下部余白をさらに増やして最下行が切れないように */
}

/* ページブレークの制御 */
body {
  page-break-after: avoid;
  page-break-before: avoid;
  page-break-inside: avoid;
}


}