import Image from "next/image";

export default function RoofComplianceDetailPop(){
  return(
    <div className="modal-popup">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <div className="modal-header-inner">
              <div className="modal-name-wrap">
                <div className="modal-img"> 
                  <Image src="/assets/images/layout/modal_header_icon03.svg" width={22} height={22} alt="" />
                </div>
                <div className="modal-name">屋根材適合性詳細 </div>
              </div>
              <button className="modal-close"></button>
            </div>
          </div>
          <div className="modal-body">
            <div className="compliance-check-pop-wrap">
              <div className={`compliance-check-bx act`}>
                <div className="check-name-wrap">
                  <div className="check-name">アースティ４０</div>
                  <div className="check-name-btn">
                    <button className="bx-btn"></button>
                  </div>
                </div>
                <div className="compliance-check-pop-contents">
                  <div className="check-pop-data-wrap">
                    <div className="check-pop-data-tit">屋根技研 支持瓦</div>
                    <div className="check-pop-data-txt">㈱ダイトー</div>
                  </div>
                  <div className="check-pop-data-wrap">
                    <div className="check-pop-data-tit">屋根材</div>
                    <div className="check-pop-data-txt">瓦</div>
                  </div>
                  <div className="check-pop-data-wrap">
                    <div className="check-pop-data-tit">金具タイプ</div>
                    <div className="check-pop-data-txt">木ねじ打ち込み式</div>
                  </div>
                  <div className="check-pop-data-table-wrap">
                    <div className="check-pop-data-table">
                      <div className="pop-data-table-head">
                        <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
                        <div className="pop-data-table-head-icon">
                          <div className="compliance-icon">
                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
                          <div className="compliance-icon">
                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
                        </div>
                      </div>
                      <div className="pop-data-table-body">Ｄで設置可</div>
                      <div className="pop-data-table-footer">
                        <div className="pop-data-table-footer-unit">備考</div>
                        <div className="pop-data-table-footer-data">桟木なしの場合は支持金具平ー１で設置可能。その場合水返しが高い為、レベルプレート使用。桟木ありの場合は支持金具平ー２で設置可能</div>
                      </div>
                    </div>
                    <div className="check-pop-data-table">
                      <div className="pop-data-table-head">
                        <div className="pop-data-table-head-name">屋根技研支持金具</div>
                        <div className="pop-data-table-head-icon">
                          <div className="compliance-icon">
                            <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
                          <div className="compliance-icon">
                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
                        </div>
                      </div>
                      <div className="pop-data-table-body">設置不可</div>
                      <div className="pop-data-table-footer">
                        <div className="pop-data-table-footer-unit">備考</div>
                        <div className="pop-data-table-footer-data">入手困難</div>
                      </div>
                    </div>
                    <div className="check-pop-data-table">
                      <div className="pop-data-table-head">
                        <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
                        <div className="pop-data-table-head-icon">
                          <div className="compliance-icon">
                            <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
                        </div>
                      </div>
                      <div className="pop-data-table-body">お問い合わせください</div>
                      <div className="pop-data-table-footer">
                        <div className="pop-data-table-footer-unit">備考</div>
                        <div className="pop-data-table-footer-data">入手困難</div>
                      </div>
                    </div>
                    <div className="check-pop-data-table">
                      <div className="pop-data-table-head">
                        <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
                        <div className="pop-data-table-head-icon">
                          <div className="compliance-icon">
                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
                        </div>
                      </div>
                      <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
                      <div className="pop-data-table-footer">
                        <div className="pop-data-table-footer-unit">備考</div>
                        <div className="pop-data-table-footer-data">入手困難</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className={`compliance-check-bx`}>
                <div className="check-name-wrap">
                  <div className="check-name">アースティ４０</div>
                  <div className="check-name-btn">
                    <button className="bx-btn"></button>
                  </div>
                </div>
                <div className="compliance-check-pop-contents">
                  <div className="check-pop-data-wrap">
                    <div className="check-pop-data-tit">屋根技研 支持瓦</div>
                    <div className="check-pop-data-txt">㈱ダイトー</div>
                  </div>
                  <div className="check-pop-data-wrap">
                    <div className="check-pop-data-tit">屋根材</div>
                    <div className="check-pop-data-txt">瓦</div>
                  </div>
                  <div className="check-pop-data-wrap">
                    <div className="check-pop-data-tit">金具タイプ</div>
                    <div className="check-pop-data-txt">木ねじ打ち込み式</div>
                  </div>
                  <div className="check-pop-data-table-wrap">
                    <div className="check-pop-data-table">
                      <div className="pop-data-table-head">
                        <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
                        <div className="pop-data-table-head-icon">
                          <div className="compliance-icon">
                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
                          <div className="compliance-icon">
                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
                        </div>
                      </div>
                      <div className="pop-data-table-body">Ｄで設置可</div>
                      <div className="pop-data-table-footer">
                        <div className="pop-data-table-footer-unit">備考</div>
                        <div className="pop-data-table-footer-data">入手困難</div>
                      </div>
                    </div>
                    <div className="check-pop-data-table">
                      <div className="pop-data-table-head">
                        <div className="pop-data-table-head-name">屋根技研支持金具</div>
                        <div className="pop-data-table-head-icon">
                          <div className="compliance-icon">
                            <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
                          <div className="compliance-icon">
                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
                        </div>
                      </div>
                      <div className="pop-data-table-body">設置不可</div>
                      <div className="pop-data-table-footer">
                        <div className="pop-data-table-footer-unit">備考</div>
                        <div className="pop-data-table-footer-data">入手困難</div>
                      </div>
                    </div>
                    <div className="check-pop-data-table">
                      <div className="pop-data-table-head">
                        <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
                        <div className="pop-data-table-head-icon">
                          <div className="compliance-icon">
                            <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
                        </div>
                      </div>
                      <div className="pop-data-table-body">お問い合わせください</div>
                      <div className="pop-data-table-footer">
                        <div className="pop-data-table-footer-unit">備考</div>
                        <div className="pop-data-table-footer-data">入手困難</div>
                      </div>
                    </div>
                    <div className="check-pop-data-table">
                      <div className="pop-data-table-head">
                        <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
                        <div className="pop-data-table-head-icon">
                          <div className="compliance-icon">
                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
                        </div>
                      </div>
                      <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
                      <div className="pop-data-table-footer">
                        <div className="pop-data-table-footer-unit">備考</div>
                        <div className="pop-data-table-footer-data">入手困難</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="btn-flex-wrap com">
              <div className="btn-bx">
                <button className="btn-frame n-blue icon">閉じる<i className="btn-arr"></i></button>
              </div>
              <div className="btn-bx">
                <button className="btn-frame red icon">ウンロード<i className="btn-arr"></i></button>
              </div>
              <div className="btn-bx">
                <button className="btn-frame n-blue icon">1：1お問い合わせ<i className="btn-arr"></i></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}