@charset "UTF-8";

@page {
  margin: 15mm;
  size: A4 portrait; /* A4 縦 */
  /*  size: A4 landscape; /* A4 横 */
} /* @page */

@media print {   /* */

  /* 印刷時 フォントサイズ */
  h1 { font-size: 21px; }               /* 商品名 */
  h2 { font-size: 19px; }               /* おいしい温め方、商品情報 */
  h3 { font-size: 17px; }               /* (中身)温め方、冷凍状態の場合、解凍状態の場合 */
  h4 { font-size: 15px; }
  h5 { font-size: 13px; }
  body { font-size: 11.5px; }           /* 基本サイズ */
  .Caution div { font-size: 10px; }     /* ご注意 */
  #Explanation { 11px }                 /* 商品紹介文 */
  dl dt { font-size: 10.5px; }          /* 商品情報 項目 */
  dl dd { font-size: 10px; }            /* 商品情報 内容 */
  footer div { font-size: 10px; }


  body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #FFFFFF;
    color: #000000;

/*    border: 1px solid red；/**/

    page-break-inside: avoid;
    break-inside: avoid;
  }

  hr {
    display: none;
    margin: 0;
  }

  a {
    color: #000000;
    text-decoration: none;   /* 下線を消す（必要に応じて） */
  }

  a:hover {
    color: #000000;
    text-decoration: underline; /* ホバー時だけ下線追加で視認性UP */
  }

  a:visited {
    color: #000000;
  }

  a:active {
    color: #2A4E60;           /* クリック時に一瞬変化 */
  }
  header {
    display: flex;
    width: fit-content;
    align-items: center;
    margin-bottom: 0;
  }

  header div {
    flex-grow: 0;
    display: inline-block;
    height: 100%;
    text-align: left;
  }


  #logo {
    height: 100px;
    width: 100px;
/*    border: 1px solid red; /**/
  }

  #main {
    height: 100px;
    width: 100px;
/*    border: 1px solid red; /**/
  }

  #Explanation {
    width: 450px;
    margin: 0;
    text-align: left;
/*    border: 1px solid red; /**/
  }
  #Explanation h1 {
    text-align: left;
  }

  h2 {
/*    margin-top: 0.5em;/**/
  }

  footer {
    border-top: 1px solid black;
  }

  footer div {
    display: flex;
    align-items: center; /* 高さを画像に合わせる＋文字上下中央 */
    justify-content: center; /* 左右中央配置 */
    width: fit-content; /* 子要素のサイズに応じて幅を調整 */
    margin: 5px auto 0; /* 外側の余白で中央配置 */
  }
  footer div div {
    display: inline;
    margin: 0;
  }

  footer #About {
    display: none;
  }

  footer #SazaLogo {
  }

  footer #SazaLogo img {
    width: auto;
    height: 3em;
    display: inline;
  }

  footer .Link {
    margin-right: 2em;
  }

  .Link img {
    display: inline;
    width: 60px;
    margin-right: 3em;
    vertical-align: middle;
  }

  footer #Copyright {
    padding: 0 10px; /* 文字と画像の間に余白 */
  }

  section {
    display: flex;
    margin-bottom: 1em;
    border-top: 1px solid black;

  }
  section div {
    flex: 1; /* すべての要素が均等に広がる */
    padding: 0 0.5em 0 0.5em;
  }

  li {
    flex-direction: row;
    margin-bottom: 0.7em;
    margin-right: 0;
    gap: 2px;
    border-top: 1px dashed gray;
  }
  li img {
    width: 100px;
    height: 100px;
  }

  ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 0.3px;
    margin-block-end: 0.3px;
    padding-inline-start: 1em;
    unicode-bidi: isolate;
  }

  dl {
    margin-bottom: 0;
  }
  dl dd {
  }

  section {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 3px;
  }

  .ProductList a {
    width: 20%;
    margin-bottom: 0;
  }

  .Caution {
    display: block;
  }
  .Caution div {
    margin: 5px;
    border: 1px dashed gray;
  }
  .Caution div h3 {
    margin: 0 0 5px 0;
  }
  .Caution div br {
    display: none;
  }

  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    #Product {
      break-before: page;
    }
  }

  .qrcode {
    width: 50px !important;
    height: auto;
  }
  .off {
    display: none;
  }

  .printOff {
    display: none !important;
  }
  .printOn {
    display: inline;
  }


  .debug {
    display: none;
    margin: 0;
  }


} /* @media print */