
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="format-detection" content="telephone=no" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1, viewport-fit=cover" />
  <meta name="robots" content="noindex">

  <title>◯◯製品サポート</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@700&family=Zen+Maru+Gothic:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link href="/assets/css/common.css?20250307102601" rel="stylesheet" type="text/css" />
  <link href="/style.css?20250307102601" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="wrapper">
    <div id="loadingSpinner">
  <div class="spinner"></div>
</div>
<div id="vue_header">
  <header id="ly_header" :class="{active:isActive}">
    <h1 class="logo"><a href="/">◯◯製品サポート</a></h1>
    <div class="header_menu">
      <ul class="header_hNav flex between">
        <li><a href="./">TOP</a></li>
        <li><a href="privacy.php">プライバシーポリシー</a></li>
      </ul>
      <ul class="header_hSubNav">
        <li><a href="./faq.php"><span class="ico"><img src="assets/images/ico_btn_faq.svg"></span>よくある質問</a></li>
        <li><a href="tel:"><span class="ico min"><img src="assets/images/ico_btn_tel.svg"></span>電話対応</a></li>
        <li><a href="./login.php"><span class="ico min"><img src="assets/images/ico_btn_gear.svg"></span>スタッフ用</a></li>
      </ul>
      <div class="header_hNav_product">
        <div class="head flex">
          <div class="img"><img src="assets/images/ph_dummy_item.jpg"></div>
          <div class="ttls">
            <p>Safie One<br />（セーフィー ワン）</p>
          </div>
        </div>
        <div class="body">
          <p class="product_caution">シリアルをクリックするとコピーできます。</p>
          <table class="product_tbl">
            <tr>
              <th>シリアル</th>
              <td>
                <div class="clipbox">
                  <p class="js-clipBoard" :[device.data_attr]="device.serial_no" @click="animCopy($event)"><strong id="wrapper_serial_no">{{ device.serial_no }}</strong></p>
                </div>
              </td>
            </tr>
            <tr>
              <th>保守開始日</th>
              <td id="wrapper_service_start">{{ device.service_start }}</td>
            </tr>
            <tr>
              <th>保守終了日</th>
              <td id="wrapper_service_end">{{ device.service_end }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <a class="un_menuTrigger" :class="{active:isActive}" @click.stop.prevent="toggleMenu">
      <span></span>
      <span></span>
      <span></span>
    </a>
  </header>
</div>
<!-- /header -->
    <div id="main">
      <section class="sec_topProduct sec">
        <div class="ly_inner">
          <div class="img"><img src="assets/images/ph_dummy_item.jpg"></div>
          <p class="ttl">Safie One<br />
            （セーフィー ワン）</p>
        </div>
      </section>

      <div id="topSupport">
        <template v-if="nowSupport">
          <section class="sec_topNowSupport sec">
            <div class="ly_inner">
              <div class="nSupport_info">
                <div class="head">現在進行中のお問い合わせ</div>
                <div class="body">
                  <p class="date" id="sup_first_inquiry">{{ supportStats.first_inquiry }}</p>
                  <p class="ttl" id="sup_ttl">{{ supportStats.inquiry_summary }}</p>
                  <template v-if="nowSupportType">
                    <p class="status" v-if="nowSupportType">
                      <span class="badge">対応種別</span><span class="sup_type">{{ supportStats.support_type }}</span><br /><span class="badge">対応状況</span><span class="sup_status">{{ supportStats.supportStats }}</span>
                    </p>
                  </template>
                  <template v-if="nowSupportTypeVisit">
                    <p class="status non_bd" v-if="nowSupportTypeVisit">
                      <span class="badge">訪問予定日時</span><span class="sup_date">{{ supportStats.fix_datetime }}</span>
                    </p>
                  </template>
                </div>
              </div>
            </div>
          </section>
        </template>
      </div>

      <section class="sec_topProductInfo sec">
        <div class="ly_inner">
          <p class="ttl">機種情報</p>
          <p class="product_caution">シリアルをクリックするとコピーできます。</p>
          <table class="product_tbl" id="device_info">
            <tr>
              <th>シリアル</th>
              <td>
                <div class="clipbox">
                  <p class="js-clipBoard" :[device.data_attr]="device.serial_no" @click="animCopy($event)"><strong id="main_serial_no">{{ device.serial_no }}</strong></p>
                </div>
              </td>
            </tr>
            <tr>
              <th>保守開始日</th>
              <td id="main_service_start">{{ device.service_start }}</td>
            </tr>
            <tr>
              <th>保守終了日</th>
              <td id="main_service_end">{{ device.service_end }}</td>
            </tr>
          </table>
        </div>
      </section>

      <section class="sec_contactGuides sec">
        <div class="ly_inner">
          <div class="box_contactGuide">
  <div class="img"><img src="assets/images/ico_faq.svg"></div>
  <p class="ttl">よくある質問</p>
  <p class="desc">製品についてのトラブル対応や、<br />故障や修理に関するサポートについてなどを記載しています。</p>
  <div class="link">
    <a href="./faq.php">FAQ</a>
  </div>
</div>          <div class="box_contactGuide">
  <div class="img"><img src="assets/images/ico_chat.svg"></div>
  <p class="ttl">チャットのお問い合わせ</p>
  <p class="desc">24時間自動応答でチャットボットが対応します。<br />右下の吹き出しマークから、お気軽にご利用ください。</p>
  <p class="subInfo"><strong>【自動回答の受付時間】</strong><br />
    24時間対応<br />
    <strong>【オペレーター受付時間】</strong><br />
    10:00〜17:00（平日）
  </p>
</div>          <div class="box_contactGuide">
  <div class="img"><img src="assets/images/ico_tel.svg"></div>
  <p class="ttl">電話のお問い合わせ</p>
  <p class="desc">FAQ等で解決できない問題についてオペレーターが対応します。<br />お気軽にご利用ください。</p>
  <p class="subInfo"><strong>【電話応対の受付時間】</strong><br />
    10:00〜17:00（平日）
  </p>
  <div class="link">
    <a href="tel:">電話</a>
  </div>
</div>        </div>
      </section>
    </div>
    <!-- /main -->
    <div class="bl_float_btns">
  <a href="tel:"><img src="assets/images/ico_btn_tel.svg"></a>
  <a href="./faq.php"><img src="assets/images/ico_btn_faq.svg"></a>
</div>    <footer id="ly_footer">
  <p class="un_Copyright">&copy; 2025 CorporationName.</p>
</footer>
<!-- /footer -->  </div>
  <!-- /wrapper -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="assets/js/common.js?20250307102601"></script>  <script type="text/javascript" src="assets/js/index.js"></script>
</body>

</html>