"use client";

import { useRef } from "react";
import generatePDF, { Margin, Resolution } from "react-to-pdf";

export default function PDFTablePage(){
  const targetRef = useRef<HTMLDivElement>(null);
  const handleDownPdf = () => {
    const options = {
      method: "open" as const,
      resolution: Resolution.HIGH,
      page: {
        margin: Margin.SMALL,
        format: "A4",
        orientation: "landscape" as const, // 'portrait' 세로 | 'landscape' 가로
      },
      canvas: {
        mimeType: "image/png" as const,
        qualityRatio: 1,
      },
      overrides: {
        pdf: {
          compress: true,
        },
        canvas: {
          useCORS: true,
        },
      },
    };

    generatePDF(targetRef, options);
    // generatePDF(targetRef, { filename: 'page.pdf' })
  };
  return(
    <>
      <button className="btn-frame n-blue min" onClick={handleDownPdf}>
        PDF Download
      </button>
      <div className="pdf-table-wrap" ref={targetRef}>
        <div className="pdf-intro-page">
          <div className="pdf-intro-tit-wrap">
            <div className="pdf-intro-tit mb20">ハンファジャパン株式会社</div>
            <div className="pdf-intro-tit mb20">(瓦) 屋根材適合表</div>
            <div className="pdf-intro-date">2025年4月30日 10:40</div>
          </div>
          <div className="pdf-intro-cont-wrap">
            <p>本適合表は参考資料としてご使用下さい。</p>
            <p>屋根材製品の形状・仕様はメーカーより変更される場合が御座います。</p>
            <p>又、現場環境（働き、勾配、瓦桟木条件等）により本適合表と異なる適合結果となる場合が御座います。予めご了承下さい。</p>
            <p>屋根材以外の設置条件（垂木、野地板等の設置基準）も必ずご確認下さい。</p>
          </div>
          <div className="pdf-intro-foot-date">2025年4月30日 10:40</div>
        </div>
        <div className="pdf-table-content">
          <div className="pdf-table-grid-wrap">
            <div className="pdf-table-card">
              <div className="pdf-table-tit-wrap">
                <span>屋根材製品名</span>
                <span>メーカー名</span>
                <span>屋根材の種類</span>
              </div>
              <div className="pdf-roof-table">
                <table>
                  <colgroup>
                    <col width={'18%'} />
                    <col width={'23%'}/>
                    <col width={'18%'}/>
                    <col />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>金具タイプ</th>
                      <th>金具名</th>
                      <th>設置可否</th>
                      <th>備考</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div className="pdf-table-card">
              <div className="pdf-table-tit-wrap">
                <span>屋根材製品名</span>
                <span>メーカー名</span>
                <span>屋根材の種類</span>
              </div>
              <div className="pdf-roof-table">
                <table>
                  <colgroup>
                    <col width={'18%'} />
                    <col width={'23%'}/>
                    <col width={'18%'}/>
                    <col />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>金具タイプ</th>
                      <th>金具名</th>
                      <th>設置可否</th>
                      <th>備考</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div className="pdf-table-card">
              <div className="pdf-table-tit-wrap">
                <span>屋根材製品名</span>
                <span>メーカー名</span>
                <span>屋根材の種類</span>
              </div>
              <div className="pdf-roof-table">
                <table>
                  <colgroup>
                    <col width={'18%'} />
                    <col width={'23%'}/>
                    <col width={'18%'}/>
                    <col />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>金具タイプ</th>
                      <th>金具名</th>
                      <th>設置可否</th>
                      <th>備考</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div className="pdf-table-card">
              <div className="pdf-table-tit-wrap">
                <span>屋根材製品名</span>
                <span>メーカー名</span>
                <span>屋根材の種類</span>
              </div>
              <div className="pdf-roof-table">
                <table>
                  <colgroup>
                    <col width={'18%'} />
                    <col width={'23%'}/>
                    <col width={'18%'}/>
                    <col />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>金具タイプ</th>
                      <th>金具名</th>
                      <th>設置可否</th>
                      <th>備考</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div className="pdf-table-card">
              <div className="pdf-table-tit-wrap">
                <span>屋根材製品名</span>
                <span>メーカー名</span>
                <span>屋根材の種類</span>
              </div>
              <div className="pdf-roof-table">
                <table>
                  <colgroup>
                    <col width={'18%'} />
                    <col width={'23%'}/>
                    <col width={'18%'}/>
                    <col />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>金具タイプ</th>
                      <th>金具名</th>
                      <th>設置可否</th>
                      <th>備考</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div className="pdf-table-card">
              <div className="pdf-table-tit-wrap">
                <span>屋根材製品名</span>
                <span>メーカー名</span>
                <span>屋根材の種類</span>
              </div>
              <div className="pdf-roof-table">
                <table>
                  <colgroup>
                    <col width={'18%'} />
                    <col width={'23%'}/>
                    <col width={'18%'}/>
                    <col />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>金具タイプ</th>
                      <th>金具名</th>
                      <th>設置可否</th>
                      <th>備考</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div className="pdf-table-card">
              <div className="pdf-table-tit-wrap">
                <span>屋根材製品名</span>
                <span>メーカー名</span>
                <span>屋根材の種類</span>
              </div>
              <div className="pdf-roof-table">
                <table>
                  <colgroup>
                    <col width={'18%'} />
                    <col width={'23%'}/>
                    <col width={'18%'}/>
                    <col />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>金具タイプ</th>
                      <th>金具名</th>
                      <th>設置可否</th>
                      <th>備考</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div className="pdf-table-card">
              <div className="pdf-table-tit-wrap">
                <span>屋根材製品名</span>
                <span>メーカー名</span>
                <span>屋根材の種類</span>
              </div>
              <div className="pdf-roof-table">
                <table>
                  <colgroup>
                    <col width={'18%'} />
                    <col width={'23%'}/>
                    <col width={'18%'}/>
                    <col />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>金具タイプ</th>
                      <th>金具名</th>
                      <th>設置可否</th>
                      <th>備考</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div className="pdf-table-card">
              <div className="pdf-table-tit-wrap">
                <span>屋根材製品名</span>
                <span>メーカー名</span>
                <span>屋根材の種類</span>
              </div>
              <div className="pdf-roof-table">
                <table>
                  <colgroup>
                    <col width={'18%'} />
                    <col width={'23%'}/>
                    <col width={'18%'}/>
                    <col />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>金具タイプ</th>
                      <th>金具名</th>
                      <th>設置可否</th>
                      <th>備考</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div className="pdf-table-card">
              <div className="pdf-table-tit-wrap">
                <span>屋根材製品名</span>
                <span>メーカー名</span>
                <span>屋根材の種類</span>
              </div>
              <div className="pdf-roof-table">
                <table>
                  <colgroup>
                    <col width={'18%'} />
                    <col width={'23%'}/>
                    <col width={'18%'}/>
                    <col />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>金具タイプ</th>
                      <th>金具名</th>
                      <th>設置可否</th>
                      <th>備考</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                    <tr>
                      <td>木ねじ打ち込み式</td>
                      <td>屋根技研支持瓦</td>
                      <td>Ｃ で設置可</td>
                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div className="pdf-intro-foot-date">2025年4月30日 10:40</div>
        </div>
      </div>
    </>
  )
}