マンスリーレポート

マンスリーレポートのレイアウトについての章です。

コンテンツエリア毎のラッピング

各コンテンツエリアは「t-monthly」クラスを付与したタグで囲ってください。


  <div class="t-monthly">
    <!-- 各コンテンツが入ります -->
  </div>

ユーザー情報

ユーザー情報は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。

恵比寿 太郎

  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-user">
          <div class="t-monthly-user-text">恵比寿 太郎</div>
        <!-- /.t-monthly-user --></div>

      </div><!-- /.t-monthly -->

    </section>
  </body>

タイトル

タイトルは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。

マンスリーレポート


  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-title">
          <div class="t-monthly-title-image"><img src="images/monthly/title_img01.png" alt=""></div>
          <h2 class="t-monthly-title-page">ドライブレポート</h2>
        </div><!-- /.t-monthly-title -->

      </div><!-- /.t-monthly -->

    </section>
  </body>

上部UI

上部UIは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
プルダウンメニューはjavascriptで実装をしております。（※関連ファイル：jquery-3.4.1.min.js、monthly.js）

2020年1月走行分：1月20日～2月19日


  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-block">

          <div class="t-input-group">
            <div class="t-input-select">
              <div class="t-input-select-label"></div>
              <select name="s01" id="s01">
                <option value="0">2020年4月走行分</option>
                <option value="1">2020年3月走行分</option>
              </select>
            </div><!-- /.t-input-select -->
          </div><!-- /.t-input-group -->

          <div class="t-text center">
            <p class="t-color-dark">2020年1月走行分：1月20日～2月19日</p>
          </div><!-- /.t-text -->

        <!-- /.t-block --></div>

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

詳細：通常画面

詳細は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
評価の数値を変更することができます「１：charts01.png」「２：charts02.png」「３：charts03.png」「４：charts04.png」「５：charts05.png」

当月の安全運転お得額
▲ 600 円
基準額
750円
安全運転お得額
600円
100%
OFF
運転分保険料 150 円
＋ 基本保険料 7,760 円
当月分のご請求保険料 7,910 円

詳 細

項目ごとの評価
スピード
アクセル
ブレーキ
ランキング
0000 000
走行距離
99,999 99,999
  • 上記の保険料に所定の事務委託手数料が必要となります。
  • 保険料の払込方法によっては、お支払時期が異なることがあります。また、ご契約内容の変更等があった場合、実際のご請求額と異なることがあります。詳しくは代理店・扱者までお問合わせください。

  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-result">

          <header class="t-result-header">
            <div class="t-result-header-top">
              <div class="t-result-header-item">
                <div class="t-result-header-title">当月の安全運転お得額</div>
                <div class="t-result-header-text">
                  <span class="t-result-header-icon">▲</span>
                  <span class="t-result-header-price">600</span>
                  <span class="t-result-header-yen">円</span>
                </div><!-- /.t-result-header-text -->
              </div><!-- /.t-result-header-item -->
            </div><!-- /.t-result-header-top -->
            <div class="t-result-header-bottom">
              <div class="t-result-header-calculation">
                <div class="t-result-header-calculation-base">
                  基準額<br>750円
                </div>
                <div class="t-result-header-calculation-otoku">
                  安全運転お得額<br>600円
                </div>
                <div class="t-result-header-calculation-discount">
                  <div class="t-result-header-calculation-item">
                    <div class="t-result-header-calculation-discount-percent">100%</div>
                    <div class="t-result-header-calculation-discount-off">OFF</div>
                  </div>
                </div><!-- /.t-result-header-calculation-discount -->
              </div><!-- /.t-result-header-calculation -->
            </div><!-- /.t-result-header-item -->
          </header>

          <div class="t-result-claim">
            <table class="t-result-claim-table">
              <tbody>
                <tr>
                  <th>
                    <span class="t-result-claim-text">運転分保険料</span>
                  </th>
                  <td>
                    <span class="t-result-claim-price">150</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
                <tr>
                  <th>
                    <span class="t-result-claim-sign">＋</span>
                    <span class="t-result-claim-text">基本保険料</span>
                  </th>
                  <td>
                    <span class="t-result-claim-price">7,760</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <th>当月分のご請求保険料</th>
                  <td>
                    <span class="t-result-claim-price">7,910</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div><!-- /.t-result-claim -->

          <div class="t-monthly-detail">
            <div class="t-monthly-detail-title">
              <h3>詳 細</h3>
            </div><!-- /.t-drive-detail-title -->
            <div class="t-monthly-detail-combo">
              <div class="t-monthly-detail-combo-header">
                <div class="t-monthly-detail-combo-header-text">項目ごとの評価</div>
              </div><!-- /.t-monthly-detail-combo-header -->
              <div class="t-monthly-detail-combo-group">
                <div class="t-monthly-detail-combo-charts">
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts04.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">スピード</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts03.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">アクセル</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts02.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">ブレーキ</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                </div><!-- /.t-monthly-detail-combo-charts -->
              </div><!-- /.t-monthly-detail-combo-group -->
              <div class="t-monthly-detail-ranking">
                <div class="t-monthly-detail-ranking-header">
                  <div class="t-monthly-detail-ranking-title">
                    <div class="t-monthly-detail-ranking-title-text">ランキング</div>
                  </div><!-- /.t-monthly-detail-ranking-title -->
                </div><!-- /.t-monthly-detail-ranking-header -->
                <div class="t-monthly-detail-ranking-body">
                  <div class="t-monthly-detail-ranking-text">
                    <span class="t-monthly-detail-ranking-text-main">0000</span>
                    <small class="t-monthly-detail-ranking-text-sub">000</small>
                  </div><!-- /.t-monthly-detail-ranking-text -->
                </div><!-- /.t-monthly-detail-ranking-body -->
              </div><!-- /.t-monthly-detail-ranking -->
              <div class="t-monthly-detail-distance">
                <div class="t-monthly-detail-distance-header">
                  <div class="t-monthly-detail-distance-title">
                    <div class="t-monthly-detail-distance-title-text">走行距離</div>
                </div> <!-- /.t-monthly-detail-distance-title -->
                </div><!-- /.t-monthly-detail-distance-header -->
                <div class="t-monthly-detail-distance-body">
                  <div class="t-monthly-detail-distance-text">
                    <span class="t-monthly-detail-distance-text-main">99,999</span>
                    <small class="t-monthly-detail-distance-text-sub">99,999</small>
                  </div><!-- /.t-monthly-detail-distance-text -->
                </div><!-- /.t-monthly-detail-distance-body -->
              </div><!-- /.t-monthly-detail-distance -->
            </div><!-- /.t-monthly-detail-combobox -->

            <ul class="t-monthly-annotation">
              <li class="t-monthly-annotation-item">上記の保険料に所定の事務委託手数料が必要となります。</li>
              <li class="t-monthly-annotation-item">保険料の払込方法によっては、お支払時期が異なることがあります。また、ご契約内容の変更等があった場合、実際のご請求額と異なることがあります。詳しくは代理店・扱者までお問合わせください。</li>
            </ul>

          </div><!-- /.t-monthly-detail -->

        </div><!-- /.t-result -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

詳細：途中経過画面

詳細は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
評価の数値を変更することができます「１：charts01.png」「２：charts02.png」「３：charts03.png」「４：charts04.png」「５：charts05.png」

詳 細

項目ごとの評価
スピード
アクセル
ブレーキ
ランキング
0000 000
走行距離
99,999 99,999
  • YYYY年MM月の保険料・アドバイス等については、YYYY年MM+2月中旬ごろにご案内します。

  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-result">

          <div class="t-monthly-detail">
            <div class="t-monthly-detail-title">
              <h3>詳 細</h3>
            </div><!-- /.t-drive-detail-title -->
            <div class="t-monthly-detail-combo">
              <div class="t-monthly-detail-combo-header">
                <div class="t-monthly-detail-combo-header-text">項目ごとの評価</div>
              </div><!-- /.t-monthly-detail-combo-header -->
              <div class="t-monthly-detail-combo-group">
                <div class="t-monthly-detail-combo-charts">
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="images/monthly/charts04.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">スピード</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="images/monthly/charts03.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">アクセル</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="images/monthly/charts02.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">ブレーキ</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                </div><!-- /.t-monthly-detail-combo-charts -->
              </div><!-- /.t-monthly-detail-combo-group -->
              <div class="t-monthly-detail-ranking">
                <div class="t-monthly-detail-ranking-header">
                  <div class="t-monthly-detail-ranking-title">
                    <div class="t-monthly-detail-ranking-title-text">ランキング</div>
                </div> <!-- /.t-monthly-detail-ranking-title -->
                </div><!-- /.t-monthly-detail-ranking-header -->
                <div class="t-monthly-detail-ranking-body">
                  <div class="t-monthly-detail-ranking-text">
                    <span class="t-monthly-detail-ranking-text-main">0000</span>
                    <small class="t-monthly-detail-ranking-text-sub">000</small>
                  </div><!-- /.t-monthly-detail-ranking-text -->
                </div><!-- /.t-monthly-detail-ranking-body -->
              </div><!-- /.t-monthly-detail-ranking -->
              <div class="t-monthly-detail-distance">
                <div class="t-monthly-detail-distance-header">
                  <div class="t-monthly-detail-distance-title">
                    <div class="t-monthly-detail-distance-title-text">走行距離</div>
                  </div><!-- /.t-monthly-detail-distance-title -->
                </div><!-- /.t-monthly-detail-distance-header -->
                <div class="t-monthly-detail-distance-body">
                  <div class="t-monthly-detail-distance-text">
                    <span class="t-monthly-detail-distance-text-main">99,999</span>
                    <small class="t-monthly-detail-distance-text-sub">99,999</small>
                  </div><!-- /.t-monthly-detail-distance-text -->
                </div><!-- /.t-monthly-detail-distance-body -->
              </div><!-- /.t-monthly-detail-distance -->
            </div><!-- /.t-monthly-detail-combobox -->

            <ul class="t-monthly-annotation">
              <li class="t-monthly-annotation-item">YYYY年MM月の保険料・アドバイス等については、YYYY年MM+2月中旬ごろにご案内します。</li>
            </ul>

          </div><!-- /.t-monthly-detail -->

        </div><!-- /.t-result -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

詳細：年払い

詳細は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
評価の数値を変更することができます「１：charts01.png」「２：charts02.png」「３：charts03.png」「４：charts04.png」「５：charts05.png」

NN月の運転分保険料
0,000 円
当月の安全運転お得額
▲ 600 円
基準額
750円
安全運転お得額
600円
80%
OFF
運転分保険料 150 円
＋ 基本保険料 7,760 円
当月分のご請求保険料 7,910 円

詳 細

項目ごとの評価
スピード
アクセル
ブレーキ
ランキング
0000 000
走行距離
99,999 99,999
  • 上記の保険料に所定の事務委託手数料が必要となります。
  • 保険料の払込方法によっては、お支払時期が異なることがあります。また、ご契約内容の変更等があった場合、実際のご請求額と異なることがあります。詳しくは代理店・扱者までお問合わせください。

  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-result">

          <header class="t-result-header">
            <div class="t-result-header-top">
              <div class="t-result-header-item">
                <div class="t-result-header-title">NN月の運転分保険料</div>
                <div class="t-result-header-text">
                  <span class="t-result-header-price">0,000</span>
                  <span class="t-result-header-yen">円</span>
                </div><!-- /.t-result-header-text -->
              </div><!-- /.t-result-header-item -->
              <div class="t-result-header-item">
                <div class="t-result-header-title">当月の安全運転お得額</div>
                <div class="t-result-header-text">
                  <span class="t-result-header-icon">▲</span>
                  <span class="t-result-header-price">600</span>
                  <span class="t-result-header-yen">円</span>
                </div><!-- /.t-result-header-text -->
              </div><!-- /.t-result-header-item -->
            </div><!-- /.t-result-header-top -->
            <div class="t-result-header-bottom">
              <div class="t-result-header-calculation t-add-margin">
                <div class="t-result-header-calculation-base">
                  基準額<br>750円
                </div>
                <div class="t-result-header-calculation-otoku">
                  安全運転お得額<br>600円
                </div>
                <div class="t-result-header-calculation-discount no_joint">
                  <div class="t-result-header-calculation-item">
                    <div class="t-result-header-calculation-discount-percent">80%</div>
                    <div class="t-result-header-calculation-discount-off">OFF</div>
                  </div>
                </div><!-- /.t-result-header-calculation-discount -->
              </div><!-- /.t-result-header-calculation -->
            </div><!-- /.t-result-header-item -->
          </header>

          <div class="t-result-claim">
            <table class="t-result-claim-table">
              <tbody>
                <tr>
                  <th>
                    <span class="t-result-claim-text">運転分保険料</span>
                  </th>
                  <td>
                    <span class="t-result-claim-price">150</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
                <tr>
                  <th>
                    <span class="t-result-claim-sign">＋</span>
                    <span class="t-result-claim-text">基本保険料</span>
                  </th>
                  <td>
                    <span class="t-result-claim-price">7,760</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <th>当月分のご請求保険料</th>
                  <td>
                    <span class="t-result-claim-price">7,910</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div><!-- /.t-result-claim -->

          <div class="t-monthly-detail">
            <div class="t-monthly-detail-title">
              <h3>詳 細</h3>
            </div><!-- /.t-drive-detail-title -->
            <div class="t-monthly-detail-combo">
              <div class="t-monthly-detail-combo-header">
                <div class="t-monthly-detail-combo-header-text">項目ごとの評価</div>
              </div><!-- /.t-monthly-detail-combo-header -->
              <div class="t-monthly-detail-combo-group">
                <div class="t-monthly-detail-combo-charts">
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts04.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">スピード</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts03.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">アクセル</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts02.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">ブレーキ</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                </div><!-- /.t-monthly-detail-combo-charts -->
              </div><!-- /.t-monthly-detail-combo-group -->
              <div class="t-monthly-detail-ranking">
                <div class="t-monthly-detail-ranking-header">
                  <div class="t-monthly-detail-ranking-title">
                    <div class="t-monthly-detail-ranking-title-text">ランキング</div>
                  </div><!-- /.t-monthly-detail-ranking-title -->
                </div><!-- /.t-monthly-detail-ranking-header -->
                <div class="t-monthly-detail-ranking-body">
                  <div class="t-monthly-detail-ranking-text">
                    <span class="t-monthly-detail-ranking-text-main">0000</span>
                    <small class="t-monthly-detail-ranking-text-sub">000</small>
                  </div><!-- /.t-monthly-detail-ranking-text -->
                </div><!-- /.t-monthly-detail-ranking-body -->
              </div><!-- /.t-monthly-detail-ranking -->
              <div class="t-monthly-detail-distance">
                <div class="t-monthly-detail-distance-header">
                  <div class="t-monthly-detail-distance-title">
                    <div class="t-monthly-detail-distance-title-text">走行距離</div>
                  </div><!-- /.t-monthly-detail-distance-title -->
                </div><!-- /.t-monthly-detail-distance-header -->
                <div class="t-monthly-detail-distance-body">
                  <div class="t-monthly-detail-distance-text">
                    <span class="t-monthly-detail-distance-text-main">99,999</span>
                    <small class="t-monthly-detail-distance-text-sub">99,999</small>
                  </div><!-- /.t-monthly-detail-distance-text -->
                </div><!-- /.t-monthly-detail-distance-body -->
              </div><!-- /.t-monthly-detail-distance -->
            </div><!-- /.t-monthly-detail-combobox -->

            <ul class="t-monthly-annotation">
              <li class="t-monthly-annotation-item">上記の保険料に所定の事務委託手数料が必要となります。</li>
              <li class="t-monthly-annotation-item">保険料の払込方法によっては、お支払時期が異なることがあります。また、ご契約内容の変更等があった場合、実際のご請求額と異なることがあります。詳しくは代理店・扱者までお問合わせください。</li>
            </ul>

          </div><!-- /.t-monthly-detail -->

        </div><!-- /.t-result -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

詳細：運転分保険料0円

詳細は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
評価の数値を変更することができます「１：charts01.png」「２：charts02.png」「３：charts03.png」「４：charts04.png」「５：charts05.png」

※今月分の運転分保険料は発生しません。
運転分保険料 150 円
＋ 基本保険料 7,760 円
当月分のご請求保険料 7,910 円

詳 細

項目ごとの評価
スピード
アクセル
ブレーキ
ランキング
0000 000
走行距離
99,999 99,999
  • 上記の保険料に所定の事務委託手数料が必要となります。
  • 保険料の払込方法によっては、お支払時期が異なることがあります。また、ご契約内容の変更等があった場合、実際のご請求額と異なることがあります。詳しくは代理店・扱者までお問合わせください。

  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-result">

          <header class="t-result-header">
            <div class="t-result-header-message">
              <div class="t-result-header-message-block">
                <div class="t-result-header-message-text">※今月分の運転分保険料は発生しません。</div>
              </div><!-- /.t-result-header-message-block -->
            </div><!-- /.t-result-header-message -->
          </header>

          <div class="t-result-claim">
            <table class="t-result-claim-table">
              <tbody>
                <tr>
                  <th>
                    <span class="t-result-claim-text">運転分保険料</span>
                  </th>
                  <td>
                    <span class="t-result-claim-price">150</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
                <tr>
                  <th>
                    <span class="t-result-claim-sign">＋</span>
                    <span class="t-result-claim-text">基本保険料</span>
                  </th>
                  <td>
                    <span class="t-result-claim-price">7,760</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <th>当月分のご請求保険料</th>
                  <td>
                    <span class="t-result-claim-price">7,910</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div><!-- /.t-result-claim -->

          <div class="t-monthly-detail">
            <div class="t-monthly-detail-title">
              <h3>詳 細</h3>
            </div><!-- /.t-drive-detail-title -->
            <div class="t-monthly-detail-combo">
              <div class="t-monthly-detail-combo-header">
                <div class="t-monthly-detail-combo-header-text">項目ごとの評価</div>
              </div><!-- /.t-monthly-detail-combo-header -->
              <div class="t-monthly-detail-combo-group">
                <div class="t-monthly-detail-combo-charts">
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts04.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">スピード</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts03.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">アクセル</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts02.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">ブレーキ</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                </div><!-- /.t-monthly-detail-combo-charts -->
              </div><!-- /.t-monthly-detail-combo-group -->
              <div class="t-monthly-detail-ranking">
                <div class="t-monthly-detail-ranking-header">
                  <div class="t-monthly-detail-ranking-title">
                    <div class="t-monthly-detail-ranking-title-text">ランキング</div>
                  </div><!-- /.t-monthly-detail-ranking-title -->
                </div><!-- /.t-monthly-detail-ranking-header -->
                <div class="t-monthly-detail-ranking-body">
                  <div class="t-monthly-detail-ranking-text">
                    <span class="t-monthly-detail-ranking-text-main">0000</span>
                    <small class="t-monthly-detail-ranking-text-sub">000</small>
                  </div><!-- /.t-monthly-detail-ranking-text -->
                </div><!-- /.t-monthly-detail-ranking-body -->
              </div><!-- /.t-monthly-detail-ranking -->
              <div class="t-monthly-detail-distance">
                <div class="t-monthly-detail-distance-header">
                  <div class="t-monthly-detail-distance-title">
                    <div class="t-monthly-detail-distance-title-text">走行距離</div>
                  </div><!-- /.t-monthly-detail-distance-title -->
                </div><!-- /.t-monthly-detail-distance-header -->
                <div class="t-monthly-detail-distance-body">
                  <div class="t-monthly-detail-distance-text">
                    <span class="t-monthly-detail-distance-text-main">99,999</span>
                    <small class="t-monthly-detail-distance-text-sub">99,999</small>
                  </div><!-- /.t-monthly-detail-distance-text -->
                </div><!-- /.t-monthly-detail-distance-body -->
              </div><!-- /.t-monthly-detail-distance -->
            </div><!-- /.t-monthly-detail-combobox -->

            <ul class="t-monthly-annotation">
              <li class="t-monthly-annotation-item">上記の保険料に所定の事務委託手数料が必要となります。</li>
              <li class="t-monthly-annotation-item">保険料の払込方法によっては、お支払時期が異なることがあります。また、ご契約内容の変更等があった場合、実際のご請求額と異なることがあります。詳しくは代理店・扱者までお問合わせください。</li>
            </ul>

          </div><!-- /.t-monthly-detail -->

        </div><!-- /.t-result -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

詳細：年払い＋運転分0円

詳細は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
評価の数値を変更することができます「１：charts01.png」「２：charts02.png」「３：charts03.png」「４：charts04.png」「５：charts05.png」

NN月の運転分保険料
0,000 円
当月の安全運転お得額
▲ 600 円
※今月分の運転分保険料は発生しません。
運転分保険料 150 円
＋ 基本保険料 7,760 円
当月分のご請求保険料 7,910 円

詳 細

項目ごとの評価
スピード
アクセル
ブレーキ
ランキング
0000 000
走行距離
99,999 99,999
  • 上記の保険料に所定の事務委託手数料が必要となります。
  • 保険料の払込方法によっては、お支払時期が異なることがあります。また、ご契約内容の変更等があった場合、実際のご請求額と異なることがあります。詳しくは代理店・扱者までお問合わせください。

  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-result">

          <header class="t-result-header">
            <div class="t-result-header-top">
              <div class="t-result-header-item">
                <div class="t-result-header-title">NN月の運転分保険料</div>
                <div class="t-result-header-text">
                  <span class="t-result-header-price">0,000</span>
                  <span class="t-result-header-yen">円</span>
                </div><!-- /.t-result-header-text -->
              </div><!-- /.t-result-header-item -->
              <div class="t-result-header-item">
                <div class="t-result-header-title">当月の安全運転お得額</div>
                <div class="t-result-header-text">
                  <span class="t-result-header-icon">▲</span>
                  <span class="t-result-header-price">600</span>
                  <span class="t-result-header-yen">円</span>
                </div><!-- /.t-result-header-text -->
              </div><!-- /.t-result-header-item -->
            </div><!-- /.t-result-header-top -->
            <div class="t-result-header-bottom">
              <div class="t-result-header-calculation">
                <div class="t-result-header-calculation-message">
                  <div class="t-result-header-calculation-message-block">
                    <div class="t-result-header-calculation-message-text">※今月分の運転分保険料は発生しません。</div>
                  </div><!-- .t-result-header-calculation-message-block -->
                </div><!-- .t-result-header-calculation-message -->
              </div><!-- /.t-result-header-calculation -->
            </div><!-- /.t-result-header-item -->
          </header>

          <div class="t-result-claim">
            <table class="t-result-claim-table">
              <tbody>
                <tr>
                  <th>
                    <span class="t-result-claim-text">運転分保険料</span>
                  </th>
                  <td>
                    <span class="t-result-claim-price">150</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
                <tr>
                  <th>
                    <span class="t-result-claim-sign">＋</span>
                    <span class="t-result-claim-text">基本保険料</span>
                  </th>
                  <td>
                    <span class="t-result-claim-price">7,760</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <th>当月分のご請求保険料</th>
                  <td>
                    <span class="t-result-claim-price">7,910</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div><!-- /.t-result-claim -->

          <div class="t-monthly-detail">
            <div class="t-monthly-detail-title">
              <h3>詳 細</h3>
            </div><!-- /.t-drive-detail-title -->
            <div class="t-monthly-detail-combo">
              <div class="t-monthly-detail-combo-header">
                <div class="t-monthly-detail-combo-header-text">項目ごとの評価</div>
              </div><!-- /.t-monthly-detail-combo-header -->
              <div class="t-monthly-detail-combo-group">
                <div class="t-monthly-detail-combo-charts">
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts04.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">スピード</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts03.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">アクセル</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts02.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">ブレーキ</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                </div><!-- /.t-monthly-detail-combo-charts -->
              </div><!-- /.t-monthly-detail-combo-group -->
              <div class="t-monthly-detail-ranking">
                <div class="t-monthly-detail-ranking-header">
                  <div class="t-monthly-detail-ranking-title">
                    <div class="t-monthly-detail-ranking-title-text">ランキング</div>
                  </div><!-- /.t-monthly-detail-ranking-title -->
                </div><!-- /.t-monthly-detail-ranking-header -->
                <div class="t-monthly-detail-ranking-body">
                  <div class="t-monthly-detail-ranking-text">
                    <span class="t-monthly-detail-ranking-text-main">0000</span>
                    <small class="t-monthly-detail-ranking-text-sub">000</small>
                  </div><!-- /.t-monthly-detail-ranking-text -->
                </div><!-- /.t-monthly-detail-ranking-body -->
              </div><!-- /.t-monthly-detail-ranking -->
              <div class="t-monthly-detail-distance">
                <div class="t-monthly-detail-distance-header">
                  <div class="t-monthly-detail-distance-title">
                    <div class="t-monthly-detail-distance-title-text">走行距離</div>
                  </div><!-- /.t-monthly-detail-distance-title -->
                </div><!-- /.t-monthly-detail-distance-header -->
                <div class="t-monthly-detail-distance-body">
                  <div class="t-monthly-detail-distance-text">
                    <span class="t-monthly-detail-distance-text-main">99,999</span>
                    <small class="t-monthly-detail-distance-text-sub">99,999</small>
                  </div><!-- /.t-monthly-detail-distance-text -->
                </div><!-- /.t-monthly-detail-distance-body -->
              </div><!-- /.t-monthly-detail-distance -->
            </div><!-- /.t-monthly-detail-combobox -->

            <ul class="t-monthly-annotation">
              <li class="t-monthly-annotation-item">上記の保険料に所定の事務委託手数料が必要となります。</li>
              <li class="t-monthly-annotation-item">保険料の払込方法によっては、お支払時期が異なることがあります。また、ご契約内容の変更等があった場合、実際のご請求額と異なることがあります。詳しくは代理店・扱者までお問合わせください。</li>
            </ul>

          </div><!-- /.t-monthly-detail -->

        </div><!-- /.t-result -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

詳細：割引なし

詳細は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
評価の数値を変更することができます「１：charts01.png」「２：charts02.png」「３：charts03.png」「４：charts04.png」「５：charts05.png」

当月の安全運転お得額
▲ 600 円
基準額
750円
安全運転お得額
600円
割引なし
運転分保険料 150 円
＋ 基本保険料 7,760 円
当月分のご請求保険料 7,910 円

詳 細

項目ごとの評価
スピード
アクセル
ブレーキ
ランキング
0000 000
走行距離
99,999 99,999
  • 上記の保険料に所定の事務委託手数料が必要となります。
  • 保険料の払込方法によっては、お支払時期が異なることがあります。また、ご契約内容の変更等があった場合、実際のご請求額と異なることがあります。詳しくは代理店・扱者までお問合わせください。

  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-result">

          <header class="t-result-header">
            <div class="t-result-header-top">
              <div class="t-result-header-item">
                <div class="t-result-header-title">当月の安全運転お得額</div>
                <div class="t-result-header-text">
                  <span class="t-result-header-icon">▲</span>
                  <span class="t-result-header-price">600</span>
                  <span class="t-result-header-yen">円</span>
                </div><!-- /.t-result-header-text -->
              </div><!-- /.t-result-header-item -->
            </div><!-- /.t-result-header-top -->
            <div class="t-result-header-bottom">
              <div class="t-result-header-calculation t-add-margin">
                <div class="t-result-header-calculation-base">
                  基準額<br>750円
                </div>
                <div class="t-result-header-calculation-otoku">
                  安全運転お得額<br>600円
                </div>
                <div class="t-result-header-calculation-nodiscount">
                  <div class="t-result-header-calculation-item">
                    <div class="t-result-header-calculation-nodiscount-text">割引なし</div>
                  </div>
                </div><!-- /.t-result-header-calculation-discount -->
              </div><!-- /.t-result-header-calculation -->
            </div><!-- /.t-result-header-item -->
          </header>

          <div class="t-result-claim">
            <table class="t-result-claim-table">
              <tbody>
                <tr>
                  <th>
                    <span class="t-result-claim-text">運転分保険料</span>
                  </th>
                  <td>
                    <span class="t-result-claim-price">150</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
                <tr>
                  <th>
                    <span class="t-result-claim-sign">＋</span>
                    <span class="t-result-claim-text">基本保険料</span>
                  </th>
                  <td>
                    <span class="t-result-claim-price">7,760</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <th>当月分のご請求保険料</th>
                  <td>
                    <span class="t-result-claim-price">7,910</span>
                    <span class="t-result-claim-yen">円</span>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div><!-- /.t-result-claim -->

          <div class="t-monthly-detail">
            <div class="t-monthly-detail-title">
              <h3>詳 細</h3>
            </div><!-- /.t-drive-detail-title -->
            <div class="t-monthly-detail-combo">
              <div class="t-monthly-detail-combo-header">
                <div class="t-monthly-detail-combo-header-text">項目ごとの評価</div>
              </div><!-- /.t-monthly-detail-combo-header -->
              <div class="t-monthly-detail-combo-group">
                <div class="t-monthly-detail-combo-charts">
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts04.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">スピード</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts03.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">アクセル</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                  <div class="t-monthly-detail-combo-item">
                    <div class="t-monthly-detail-combo-image"><img src="../images/monthly/charts02.png" alt=""></div>
                    <div class="t-monthly-detail-combo-text">ブレーキ</div>
                  </div><!-- /.t-monthly-detail-combo-item -->
                </div><!-- /.t-monthly-detail-combo-charts -->
              </div><!-- /.t-monthly-detail-combo-group -->
              <div class="t-monthly-detail-ranking">
                <div class="t-monthly-detail-ranking-header">
                  <div class="t-monthly-detail-ranking-title">
                    <div class="t-monthly-detail-ranking-title-text">ランキング</div>
                  </div><!-- /.t-monthly-detail-ranking-title -->
                </div><!-- /.t-monthly-detail-ranking-header -->
                <div class="t-monthly-detail-ranking-body">
                  <div class="t-monthly-detail-ranking-text">
                    <span class="t-monthly-detail-ranking-text-main">0000</span>
                    <small class="t-monthly-detail-ranking-text-sub">000</small>
                  </div><!-- /.t-monthly-detail-ranking-text -->
                </div><!-- /.t-monthly-detail-ranking-body -->
              </div><!-- /.t-monthly-detail-ranking -->
              <div class="t-monthly-detail-distance">
                <div class="t-monthly-detail-distance-header">
                  <div class="t-monthly-detail-distance-title">
                    <div class="t-monthly-detail-distance-title-text">走行距離</div>
                  </div><!-- /.t-monthly-detail-distance-title -->
                </div><!-- /.t-monthly-detail-distance-header -->
                <div class="t-monthly-detail-distance-body">
                  <div class="t-monthly-detail-distance-text">
                    <span class="t-monthly-detail-distance-text-main">99,999</span>
                    <small class="t-monthly-detail-distance-text-sub">99,999</small>
                  </div><!-- /.t-monthly-detail-distance-text -->
                </div><!-- /.t-monthly-detail-distance-body -->
              </div><!-- /.t-monthly-detail-distance -->
            </div><!-- /.t-monthly-detail-combobox -->

            <ul class="t-monthly-annotation">
              <li class="t-monthly-annotation-item">上記の保険料に所定の事務委託手数料が必要となります。</li>
              <li class="t-monthly-annotation-item">保険料の払込方法によっては、お支払時期が異なることがあります。また、ご契約内容の変更等があった場合、実際のご請求額と異なることがあります。詳しくは代理店・扱者までお問合わせください。</li>
            </ul>

          </div><!-- /.t-monthly-detail -->

        </div><!-- /.t-result -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

タブメニュー

タブメニューは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
初期表示させたいタブ「t-monthly-tab-item」クラスとコンテナ「t-monthly-content-item 」クラスに「active」クラスを併記してください。
（※関連ファイル：jquery-3.4.1.min.js、component.js）

アドバイス
ランキング
保険料推移
走行実績

アドバイス

ランキング

保険料推移

走行実績


  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-tab">
          <div class="t-monthly-tab-item active">
            <span class="t-monthly-tab-item-main">アドバイス</span>
          </div>
          <div class="t-monthly-tab-item">
            <span class="t-monthly-tab-item-main">ランキング</span>
          </div>
          <div class="t-monthly-tab-item">
            <span class="t-monthly-tab-item-main">保険料推移</span>
          </div>
          <div class="t-monthly-tab-item">
            <span class="t-monthly-tab-item-main">走行実績</span>
          </div>
        </div><!-- /.t-monthly-tab -->

        <div class="t-monthly-content">

          <div class="t-monthly-content-item active">

            <div class="t-monthly-content-header">
              <div class="t-monthly-content-icon"><img src="images/monthly/ico05.png" alt=""></div>
              <h4 class="t-monthly-content-title">アドバイス</h4>
            </div><!-- /.t-monthly-content-header -->

          </div><!-- /.t-monthly-content-item -->

          <div class="t-monthly-content-item">

            <div class="t-monthly-content-header">
              <div class="t-monthly-content-icon"><img src="images/monthly/ico06.png" alt=""></div>
              <h4 class="t-monthly-content-title">ランキング</h4>
            </div><!-- /.t-monthly-content-header -->

          </div><!-- /.t-monthly-content-item -->

          <div class="t-monthly-content-item">

            <div class="t-monthly-content-header">
              <div class="t-monthly-content-icon"><img src="images/monthly/ico07.png" alt=""></div>
              <h4 class="t-monthly-content-title">保険料推移</h4>
            </div><!-- /.t-monthly-content-header -->

          </div><!-- /.t-monthly-content-item -->

          <div class="t-monthly-content-item">

            <div class="t-monthly-content-header">
              <div class="t-monthly-content-icon"><img src="images/monthly/ico08.png" alt=""></div>
              <h4 class="t-monthly-content-title">走行実績</h4>
            </div><!-- /.t-monthly-content-header -->

          </div><!-- /.t-monthly-content-item -->

        </div><!-- /.t-monthly-content -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

タブメニュー（非活性化）

タブメニューは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
初期表示させたいタブ「t-monthly-tab-item」クラスとコンテナ「t-monthly-content-item 」クラスに「active」クラスを併記してください。
非活性化させたいタブ「t-monthly-tab-item」クラスに「inactive」クラスを併記してください。
（※関連ファイル：jquery-3.4.1.min.js、component.js）

アドバイス
ランキング
保険料推移
走行実績 （No Data）

アドバイス

ランキング

保険料推移

走行実績


  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-tab">
          <div class="t-monthly-tab-item active">
            <span class="t-monthly-tab-item-main">アドバイス</span>
          </div>
          <div class="t-monthly-tab-item">
            <span class="t-monthly-tab-item-main">ランキング</span>
          </div>
          <div class="t-monthly-tab-item">
            <span class="t-monthly-tab-item-main">保険料推移</span>
          </div>
          <div class="t-monthly-tab-item inactive">
            <span class="t-monthly-tab-item-main">走行実績</span>
            <small class="t-monthly-tab-item-sub"n>（No Data）</smalln>
          </div>
        </div><!-- /.t-monthly-tab -->

        <div class="t-monthly-content">

          <div class="t-monthly-content-item active">

            <div class="t-monthly-content-header">
              <div class="t-monthly-content-icon"><img src="images/monthly/ico05.png" alt=""></div>
              <h4 class="t-monthly-content-title">アドバイス</h4>
            </div><!-- /.t-monthly-content-header -->

          </div><!-- /.t-monthly-content-item -->

          <div class="t-monthly-content-item">

            <div class="t-monthly-content-header">
              <div class="t-monthly-content-icon"><img src="images/monthly/ico06.png" alt=""></div>
              <h4 class="t-monthly-content-title">ランキング</h4>
            </div><!-- /.t-monthly-content-header -->

          </div><!-- /.t-monthly-content-item -->

          <div class="t-monthly-content-item">

            <div class="t-monthly-content-header">
              <div class="t-monthly-content-icon"><img src="images/monthly/ico07.png" alt=""></div>
              <h4 class="t-monthly-content-title">保険料推移</h4>
            </div><!-- /.t-monthly-content-header -->

          </div><!-- /.t-monthly-content-item -->

          <div class="t-monthly-content-item">

            <div class="t-monthly-content-header">
              <div class="t-monthly-content-icon"><img src="images/monthly/ico08.png" alt=""></div>
              <h4 class="t-monthly-content-title">走行実績</h4>
            </div><!-- /.t-monthly-content-header -->

          </div><!-- /.t-monthly-content-item -->

        </div><!-- /.t-monthly-content -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

アドバイス：通常画面

アドバイスは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。

アドバイス

総合評価
★★★

今回の総合得点は95点でした。
最高のメダル３つ獲得、おめでとうございます！

今月のいいね！ポイント
ブレーキ

月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。

今月の改善ポイント
アクセル

急加速の約60％が高速道の走行でありました。カカトが固定されていない状態でのアクセル操作は、踏み込みすぎてしまう可能性があります。

チャレンジ
次回の目標

これからの3ヶ月間で、総合得点満点の獲得を目指しましょう！毎月の改善ポイントを参考に、目標達成に向けて頑張りましょう。

ワンポイントアドバイス
駐車場の事故

日没時間が早くなり、周囲が見えにくくなることで起きる事故が増えます。特にバックするときは、死角に危険が潜んでいないか十分によく確認し、歩くくらいのスピードで駐車しましょう。


  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-content">

          <div class="t-monthly-content-item">

          <div class="t-monthly-content-header">
            <div class="t-monthly-content-icon"><img src="../images/monthly/ico05.png" alt=""></div>
            <h4 class="t-monthly-content-title">アドバイス</h4>
          </div><!-- /.t-monthly-content-header -->

          <div class="t-monthly-content-advice">

            <div class="t-block">
              <h5 class="t-monthly-content-advice-title">総合評価</h5>
              <div class="t-monthly-content-advice-item">
                <div class="t-monthly-content-advice-subtitle">
                  <div class="t-monthly-content-advice-document">
                    <h6 class="t-monthly-content-advice-icon">★★★</h6>
                  </div>
                </div><!-- /.t-monthly-content-advice-subtitle -->
                <p class="t-monthly-content-advice-text">今回の総合得点は95点でした。<br>最高のメダル３つ獲得、おめでとうございます！</p>
              </div><!-- /.t-monthly-content-advice-item -->
            </div><!-- /.t-block -->

            <div class="t-block">
              <h5 class="t-monthly-content-advice-title">今月のいいね！ポイント</h5>
              <div class="t-monthly-content-advice-item">
                <div class="t-monthly-content-advice-subtitle">
                  <div class="t-monthly-content-advice-good">
                    <h6 class="t-monthly-content-advice-icon">ブレーキ</h6>
                  </div>
                </div><!-- /.t-monthly-content-advice-subtitle -->
                <p class="t-monthly-content-advice-text">月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。</p>
              </div><!-- /.t-monthly-content-advice-item -->
            </div><!-- /.t-block -->

            <div class="t-block">
              <h5 class="t-monthly-content-advice-title">今月の改善ポイント</h5>
              <div class="t-monthly-content-advice-item">
                <div class="t-monthly-content-advice-subtitle">
                  <div class="t-monthly-content-advice-accel">
                    <h6 class="t-monthly-content-advice-icon">アクセル</h6>
                  </div>
                </div><!-- /.t-monthly-content-advice-subtitle -->
                <p class="t-monthly-content-advice-text">急加速の約60％が高速道の走行でありました。カカトが固定されていない状態でのアクセル操作は、踏み込みすぎてしまう可能性があります。</p>
              </div><!-- /.t-monthly-content-advice-item -->
            </div><!-- /.t-block -->

            <div class="t-block">
              <h5 class="t-monthly-content-advice-title">チャレンジ</h5>
              <div class="t-monthly-content-advice-item">
                <div class="t-monthly-content-advice-subtitle">
                  <div class="t-monthly-content-advice-comment">
                    <h6 class="t-monthly-content-advice-icon">次回の目標</h6>
                  </div>
                </div><!-- /.t-monthly-content-advice-subtitle -->
                <p class="t-monthly-content-advice-text">これからの3ヶ月間で、総合得点満点の獲得を目指しましょう！毎月の改善ポイントを参考に、目標達成に向けて頑張りましょう。</p>
              </div><!-- /.t-monthly-content-advice-item -->
            </div><!-- /.t-block -->

            <div class="t-block">
              <div class="t-monthly-content-advice-item">
                <h5 class="t-monthly-content-advice-title">ワンポイントアドバイス</h5>
                <div class="t-monthly-content-advice-subtitle">
                  <div class="t-monthly-content-advice-moon">
                    <h6 class="t-monthly-content-advice-icon">駐車場の事故</h6>
                  </div>
                </div><!-- /.t-monthly-content-advice-subtitle -->
                <p class="t-monthly-content-advice-text">日没時間が早くなり、周囲が見えにくくなることで起きる事故が増えます。特にバックするときは、死角に危険が潜んでいないか十分によく確認し、歩くくらいのスピードで駐車しましょう。</p>
              </div><!-- /.t-monthly-content-advice-item -->
            </div><!-- /.t-block -->

          </div><!-- /.t-monthly-content-item -->

        </div><!-- /.t-monthly-content -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

アドバイス：チャレンジ項目追加

アドバイスは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。

アドバイス

総合評価
★★★

今回の総合得点は95点でした。
最高のメダル３つ獲得、おめでとうございます！

今月のいいね！ポイント
ブレーキ

月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。

今月の改善ポイント
アクセル

急加速の約60％が高速道の走行でありました。カカトが固定されていない状態でのアクセル操作は、踏み込みすぎてしまう可能性があります。

チャレンジ
目標の振り返り

今回の目標は、「2018年10月～2018年12月までに、80点以上獲得を目指しましょう！」でした。
結果は．．．
10月：69点
11月：73点
12月：76点
残念ながら目標達成とはいきませんでした。
ただ、点数は改善傾向にあるので、次回は目標を達成できるよう、引き続き安全運転を心がけましょう。

次回の目標

これからの6か月間、80点以上獲得を目指しましょう！

ワンポイントアドバイス
駐車場の事故

日没時間が早くなり、周囲が見えにくくなることで起きる事故が増えます。特にバックするときは、死角に危険が潜んでいないか十分によく確認し、歩くくらいのスピードで駐車しましょう。


  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-content">

          <div class="t-monthly-content-item">

            <div class="t-monthly-content-header">
              <div class="t-monthly-content-icon"><img src="images/monthly/ico05.png" alt=""></div>
              <h4 class="t-monthly-content-title">アドバイス</h4>
            </div><!-- /.t-monthly-content-header -->

            <div class="t-monthly-content-advice">

              <div class="t-block">
                <h5 class="t-monthly-content-advice-title">総合評価</h5>
                <div class="t-monthly-content-advice-item">
                  <div class="t-monthly-content-advice-subtitle">
                    <div class="t-monthly-content-advice-document">
                      <h6 class="t-monthly-content-advice-icon">★★★</h6>
                    </div>
                  </div><!-- /.t-monthly-content-advice-subtitle -->
                  <p class="t-monthly-content-advice-text">今回の総合得点は95点でした。<br>最高のメダル３つ獲得、おめでとうございます！</p>
                </div><!-- /.t-monthly-content-advice-item -->
              </div><!-- /.t-block -->

              <div class="t-block">
                <h5 class="t-monthly-content-advice-title">今月のいいね！ポイント</h5>
                <div class="t-monthly-content-advice-item">
                  <div class="t-monthly-content-advice-subtitle">
                    <div class="t-monthly-content-advice-good">
                      <h6 class="t-monthly-content-advice-icon">ブレーキ</h6>
                    </div>
                  </div><!-- /.t-monthly-content-advice-subtitle -->
                  <p class="t-monthly-content-advice-text">月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。</p>
                </div><!-- /.t-monthly-content-advice-item -->
              </div><!-- /.t-block -->

              <div class="t-block">
                <h5 class="t-monthly-content-advice-title">今月の改善ポイント</h5>
                <div class="t-monthly-content-advice-item">
                  <div class="t-monthly-content-advice-subtitle">
                    <div class="t-monthly-content-advice-accel">
                      <h6 class="t-monthly-content-advice-icon">アクセル</h6>
                    </div>
                  </div><!-- /.t-monthly-content-advice-subtitle -->
                  <p class="t-monthly-content-advice-text">急加速の約60％が高速道の走行でありました。カカトが固定されていない状態でのアクセル操作は、踏み込みすぎてしまう可能性があります。</p>
                </div><!-- /.t-monthly-content-advice-item -->
              </div><!-- /.t-block -->

              <div class="t-block">
                <h5 class="t-monthly-content-advice-title">チャレンジ</h5>
                <div class="t-monthly-content-advice-item">
                  <div class="t-monthly-content-advice-subtitle">
                    <div class="t-monthly-content-advice-comment">
                      <h6 class="t-monthly-content-advice-icon">目標の振り返り</h6>
                    </div>
                  </div><!-- /.t-monthly-content-advice-subtitle -->
                  <p class="t-monthly-content-advice-text">今回の目標は、「2018年10月～2018年12月までに、80点以上獲得を目指しましょう！」でした。<br>結果は．．．<br>10月：69点<br>11月：73点<br>12月：76点<br>残念ながら目標達成とはいきませんでした。<br>ただ、点数は改善傾向にあるので、次回は目標を達成できるよう、引き続き安全運転を心がけましょう。</p>
                </div><!-- /.t-monthly-content-advice-item -->
                <div class="t-monthly-content-advice-item">
                  <div class="t-monthly-content-advice-subtitle">
                    <div class="t-monthly-content-advice-comment">
                      <h6 class="t-monthly-content-advice-icon">次回の目標</h6>
                    </div>
                  </div><!-- /.t-monthly-content-advice-subtitle -->
                  <p class="t-monthly-content-advice-text">これからの6か月間、80点以上獲得を目指しましょう！</p>
                </div><!-- /.t-monthly-content-advice-item -->
              </div><!-- /.t-block -->

              <div class="t-block">
                <div class="t-monthly-content-advice-item">
                  <h5 class="t-monthly-content-advice-title">ワンポイントアドバイス</h5>
                  <div class="t-monthly-content-advice-subtitle">
                    <div class="t-monthly-content-advice-moon">
                      <h6 class="t-monthly-content-advice-icon">駐車場の事故</h6>
                    </div>
                  </div><!-- /.t-monthly-content-advice-subtitle -->
                  <p class="t-monthly-content-advice-text">日没時間が早くなり、周囲が見えにくくなることで起きる事故が増えます。特にバックするときは、死角に危険が潜んでいないか十分によく確認し、歩くくらいのスピードで駐車しましょう。</p>
                </div><!-- /.t-monthly-content-advice-item -->
              </div><!-- /.t-block -->

            <!-- /.t-monthly-content-advice --></div>

          </div><!-- /.t-monthly-content-item -->

        </div><!-- /.t-monthly-content -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

アドバイス：アドバイスのみ

アドバイスは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。

アドバイス

今回の総合得点は95点でした。最高のメダル３つ獲得、おめでとうございます！月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。急加速の約60％が高速道の走行でありました。カカトが固定されていない状態でのアクセル操作は、踏み込みすぎてしまう可能性があります。これからの3ヶ月間で、総合得点満点の獲得を目指しましょう！毎月の改善ポイントを参考に、目標達成に向けて頑張りましょう。日没時間が早くなり、周囲が見えにくくなることで起きる事故が増えます。特にバックするときは、死角に危険が潜んでいないか十分によく確認し、歩くくらいのスピードで駐車しましょう。今回の総合得点は95点でした。最高のメダル３つ獲得、おめでとうございます！月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。急加速の約60％が高速道の走行でありました。カカトが固定されていない状態でのアクセル操作は、踏み込みすぎてしまう可能性があります。これからの3ヶ月間で、総合得点満点の獲得を目指しましょう！毎月の改善ポイントを参考に、目標達成に向けて頑張りましょう。日没時間が早くなり、周囲が見えにくくなることで起きる事故が増えます。特にバックするときは、死角に危険が潜んでいないか十分によく確認し、歩くくらいのスピードで駐車しましょう。
今回の総合得点は95点でした。最高のメダル３つ獲得、おめでとうございます！月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。急加速の約60％が高速道の走行でありました。カカトが固定されていない状態でのアクセル操作は、踏み込みすぎてしまう可能性があります。これからの3ヶ月間で、総合得点満点の獲得を目指しましょう！毎月の改善ポイントを参考に、目標達成に向けて頑張りましょう。日没時間が早くなり、周囲が見えにくくなることで起きる事故が増えます。特にバックするときは、死角に危険が潜んでいないか十分によく確認し、歩くくらいのスピードで駐車しましょう。
今回の総合得点は95点でした。最高のメダル３つ獲得、おめでとうございます！月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。急加速の約60％が高速道の走行でありました。


  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-content">

          <div class="t-monthly-content-item">

            <div class="t-monthly-content-header">
              <div class="t-monthly-content-icon"><img src="images/monthly/ico05.png" alt=""></div>
              <h4 class="t-monthly-content-title">アドバイス</h4>
            </div><!-- /.t-monthly-content-header -->

            <div class="t-monthly-content-advice">

              <div class="t-block">
                <p class="t-monthly-content-advice-text">今回の総合得点は95点でした。最高のメダル３つ獲得、おめでとうございます！月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。急加速の約60％が高速道の走行でありました。カカトが固定されていない状態でのアクセル操作は、踏み込みすぎてしまう可能性があります。これからの3ヶ月間で、総合得点満点の獲得を目指しましょう！毎月の改善ポイントを参考に、目標達成に向けて頑張りましょう。日没時間が早くなり、周囲が見えにくくなることで起きる事故が増えます。特にバックするときは、死角に危険が潜んでいないか十分によく確認し、歩くくらいのスピードで駐車しましょう。今回の総合得点は95点でした。最高のメダル３つ獲得、おめでとうございます！月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。急加速の約60％が高速道の走行でありました。カカトが固定されていない状態でのアクセル操作は、踏み込みすぎてしまう可能性があります。これからの3ヶ月間で、総合得点満点の獲得を目指しましょう！毎月の改善ポイントを参考に、目標達成に向けて頑張りましょう。日没時間が早くなり、周囲が見えにくくなることで起きる事故が増えます。特にバックするときは、死角に危険が潜んでいないか十分によく確認し、歩くくらいのスピードで駐車しましょう。<br>今回の総合得点は95点でした。最高のメダル３つ獲得、おめでとうございます！月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。急加速の約60％が高速道の走行でありました。カカトが固定されていない状態でのアクセル操作は、踏み込みすぎてしまう可能性があります。これからの3ヶ月間で、総合得点満点の獲得を目指しましょう！毎月の改善ポイントを参考に、目標達成に向けて頑張りましょう。日没時間が早くなり、周囲が見えにくくなることで起きる事故が増えます。特にバックするときは、死角に危険が潜んでいないか十分によく確認し、歩くくらいのスピードで駐車しましょう。<br>今回の総合得点は95点でした。最高のメダル３つ獲得、おめでとうございます！月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。月間500km走行しましたが、急減速のない、とても素晴らしい運転ができていたようです。急減速の少ない運転は、燃費向上にもつながります。急加速の約60％が高速道の走行でありました。</p>
              </div><!-- /.t-block -->

            <!-- /.t-monthly-content-advice --></div>

          </div><!-- /.t-monthly-content-item -->

        </div><!-- /.t-monthly-content -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

ランキング

ランキングは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。

ランキング

同車種
00000
100人中の順位
0000
トップとの差
0000
平均との差
0000
同年代
00000
100人中の順位
0000
トップとの差
0000
平均との差
0000
同都道府県
00000
100人中の順位
0000
トップとの差
0000
平均との差
0000
 

  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-content">

          <div class="t-monthly-content-item">

            <div class="t-monthly-content-ranking">
                          
              <div class="t-block">
                
                <div class="t-monthly-content-ranking-component">
                  <div class="t-monthly-content-ranking-component-header">
                    <h5 class="t-monthly-content-ranking-item-title">同車種</h5>
                    <div class="t-monthly-content-ranking-item-rank t-monthly-content-ranking-icon-up">00000</div>
                  </div><!-- /.t-monthly-content-ranking-component-header -->
                  <div class="t-monthly-content-ranking-component-body">
                    <table class="t-monthly-content-ranking-table">
                      <tbody>
                        <tr>
                          <th>100人中の順位</th>
                          <td>
                            <div class="t-monthly-content-ranking-item-rank">0000</div>
                          </td>
                        </tr>
                        <tr>
                          <th>トップとの差</th>
                          <td>
                            <div class="t-monthly-content-ranking-item-point">0000</div>
                          </td>
                        </tr>
                        <tr>
                          <th>平均との差</th>
                          <td>
                            <div class="t-monthly-content-ranking-item-point">0000</div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div><!-- /.t-monthly-content-ranking-component-body -->
                </div><!-- /.t-monthly-content-ranking-component -->
                
              </div><!-- /.t-block -->
              
              <div class="t-block">
                
                <div class="t-monthly-content-ranking-component">
                  <div class="t-monthly-content-ranking-component-header">
                    <h5 class="t-monthly-content-ranking-item-title">同年代</h5>
                    <div class="t-monthly-content-ranking-item-rank t-monthly-content-ranking-icon-up">00000</div>
                  </div><!-- /.t-monthly-content-ranking-component-header -->
                  <div class="t-monthly-content-ranking-component-body">
                    <table class="t-monthly-content-ranking-table">
                      <tbody>
                        <tr>
                          <th>100人中の順位</th>
                          <td>
                            <div class="t-monthly-content-ranking-item-rank">0000</div>
                          </td>
                        </tr>
                        <tr>
                          <th>トップとの差</th>
                          <td>
                            <div class="t-monthly-content-ranking-item-point">0000</div>
                          </td>
                        </tr>
                        <tr>
                          <th>平均との差</th>
                          <td>
                            <div class="t-monthly-content-ranking-item-point">0000</div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div><!-- /.t-monthly-content-ranking-component-body -->
                </div><!-- /.t-monthly-content-ranking-component -->
                
              </div><!-- /.t-block -->
              
              <div class="t-block">
                
                <div class="t-monthly-content-ranking-component">
                  <div class="t-monthly-content-ranking-component-header">
                    <h5 class="t-monthly-content-ranking-item-title">同都道府県</h5>
                    <div class="t-monthly-content-ranking-item-rank t-monthly-content-ranking-icon-down">00000</div>
                  </div><!-- /.t-monthly-content-ranking-component-header -->
                  <div class="t-monthly-content-ranking-component-body">
                    <table class="t-monthly-content-ranking-table">
                      <tbody>
                        <tr>
                          <th>100人中の順位</th>
                          <td>
                            <div class="t-monthly-content-ranking-item-rank">0000</div>
                          </td>
                        </tr>
                        <tr>
                          <th>トップとの差</th>
                          <td>
                            <div class="t-monthly-content-ranking-item-point">0000</div>
                          </td>
                        </tr>
                        <tr>
                          <th>平均との差</th>
                          <td>
                            <div class="t-monthly-content-ranking-item-point">0000</div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div><!-- /.t-monthly-content-ranking-component-body -->
                </div><!-- /.t-monthly-content-ranking-component -->
                
              </div><!-- /.t-block -->

            </div><!-- /.t-monthly-content-ranking -->

          </div><!-- /.t-monthly-content-item -->

        </div><!-- /.t-monthly-content -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

保険料推移タイトル

保険料推移タイトルは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。

保険料推移


  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-content">

          <div class="t-monthly-content-item">

            <div class="t-monthly-content-header">
              <div class="t-monthly-content-icon"><img src="images/monthly/ico07.png" alt=""></div>
              <h4 class="t-monthly-content-title">保険料推移</h4>
            </div><!-- /.t-monthly-content-header -->

          </div><!-- /.t-monthly-content-item -->

        </div><!-- /.t-monthly-content -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

走行実績タイトル

走行実績タイトルは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。

走行実績


  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-content">

          <div class="t-monthly-content-item">

            <div class="t-monthly-content-header">
              <div class="t-monthly-content-icon"><img src="images/monthly/ico08.png" alt=""></div>
              <h4 class="t-monthly-content-title">走行実績</h4>
            </div><!-- /.t-monthly-content-header -->

          </div><!-- /.t-monthly-content-item -->

        </div><!-- /.t-monthly-content -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

走行実績 - 上部コメント＋月間走行実績

走行実績 上部コメント＋月間走行実績は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
（※関連ファイル：jquery-3.4.1.min.js、component.js）

運転の傾向を確認することで、改善ポイントが見つかります。安全運転アドバイスとあわせてご活用ください。

  • 車両運行情報等の修正があった場合でも、データは更新されません。
月間走行実績
走行数
88
走行時間
月間累計
36
13
走行ごとの平均
0
24
走行距離
月間累計
1175.2
走行ごとの平均
13.3
月間走行実績
月間の「走行数」「走行時間」「走行距離」の累計および走行ごとの平均値を確認できます。
ご注意
「走行数」「走行時間」「走行距離」は、当月に表示されたドライブレポートの数および各ドライブレポートが対象とする走行の時間・距離の合計を表しているため、実際の走行と異なる場合があります。
  • ドライブレポートは、お車の通信環境等により、1回の運転であっても複数に分かれて提供される場合があります。
  • ドライブレポートは、走行距離が運転診断を行う基準に達しない場合には表示されないことがあります。

  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-content">

          <div class="t-monthly-content-item active">

            <div class="t-monthly-content-performance">

              <div class="t-monthly-content-performance-header">
                <p class="t-monthly-content-performance-text">運転の傾向を確認することで、改善ポイントが見つかります。安全運転アドバイスとあわせてご活用ください。</p>
                <ul class="t-annotation">
                  <li class="t-annotation-item">車両運行情報等の修正があった場合でも、データは更新されません。</li>
                </ul>
              </div><!-- /.t-monthly-content-performance-header -->

              <div class="t-monthly-content-performance-block-wrap">

                <div class="t-monthly-content-performance-title">
                  <span class="t-monthly-content-performance-title-icon t-modal-open" data-openMadal="modal01"><img src="../images/monthly/ico25.png" alt=""></span>
                  <div class="t-monthly-content-performance-title-text">月間走行実績</div>
                </div><!-- /.t-monthly-content-performance-title -->

                <div class="t-monthly-content-performance-block">
                  <div class="t-monthly-content-performance-header">
                    <div class="t-monthly-content-performance-header-title">走行数</div>
                  </div><!-- /.t-monthly-content-performance-header-->
                  <div class="t-monthly-content-performance-body">
                    <div class="t-monthly-content-performance-item-count">88</div>
                  </div><!-- /.t-monthly-content-performance-body-->
                </div><!-- /.t-monthly-content-performance-block -->

                <div class="t-monthly-content-performance-flat">

                  <div class="t-monthly-content-performance-block">
                    <div class="t-monthly-content-performance-header">
                      <div class="t-monthly-content-performance-header-title">走行時間</div>
                    </div><!-- /.t-monthly-content-performance-header-->
                    <div class="t-monthly-content-performance-body">
                      <div class="t-monthly-content-performance-item">
                        <div class="t-monthly-content-performance-item-title">月間累計</div>
                        <div class="t-monthly-content-performance-item-time">
                          <div class="t-monthly-content-performance-item-time-hour">36</div>
                          <div class="t-monthly-content-performance-item-time-minute">13</div>
                        </div><!-- /.t-monthly-content-performance-item-time -->
                      </div><!-- /.t-monthly-content-performance-item -->
                      <div class="t-monthly-content-performance-item">
                        <div class="t-monthly-content-performance-item-title">走行ごとの平均</div>
                        <div class="t-monthly-content-performance-item-time">
                          <div class="t-monthly-content-performance-item-time-hour">0</div>
                          <div class="t-monthly-content-performance-item-time-minute">24</div>
                        </div><!-- /.t-monthly-content-performance-item-time -->
                      </div><!-- /.t-monthly-content-performance-item -->
                    </div><!-- /.t-monthly-content-performance-body-->
                  </div><!-- /.t-monthly-content-performance-block -->

                  <div class="t-monthly-content-performance-block">
                    <div class="t-monthly-content-performance-header">
                      <div class="t-monthly-content-performance-header-title">走行距離</div>
                    </div><!-- /.t-monthly-content-performance-header-->
                    <div class="t-monthly-content-performance-body">
                      <div class="t-monthly-content-performance-item">
                        <div class="t-monthly-content-performance-item-title">月間累計</div>
                        <div class="t-monthly-content-performance-item-time">
                        <div class="t-monthly-content-performance-item-km">1175.2</div>
                        </div><!-- /.t-monthly-content-performance-item-time -->
                      </div><!-- /.t-monthly-content-performance-item -->
                      <div class="t-monthly-content-performance-item">
                        <div class="t-monthly-content-performance-item-title">走行ごとの平均</div>
                        <div class="t-monthly-content-performance-item-time">
                          <div class="t-monthly-content-performance-item-km">13.3</div>
                        </div><!-- /.t-monthly-content-performance-item-time -->
                      </div><!-- /.t-monthly-content-performance-item -->
                    </div><!-- /.t-monthly-content-performance-body-->
                  </div><!-- /.t-monthly-content-performance-block -->

                </div><!-- /.t-monthly-content-performance-flat -->

              </div><!-- /.t-monthly-content-performance-block-wrap -->

            </div><!-- /.t-monthly-content-performance -->

          </div><!-- /.t-monthly-content-item -->

        </div><!-- /.t-monthly-content -->

        <div id="modal01" class="t-modal">

          <div class="t-modal-inner">
            
            <div class="t-modal-scroll">
        
              <div class="t-modal-card">
        
                <div class="t-modal-card-header">
                  <div class="t-modal-card-title">
                    <div class="t-modal-card-text">月間走行実績</div>
                  </div><!-- /.t-modal-card-title -->
                  <span class="btn-close t-modal-card-close t-modal-close">
                    <span class="t-modal-card-close-icon"></span>
                  </span>
                </div><!-- /.t-modal-card-header -->
                <div class="t-modal-card-body">
                  <div class="t-modal-card-body-block t-padding-top-fix">
                    <div class="t-modal-card-body-text">月間の「走行数」「走行時間」「走行距離」の累計および走行ごとの平均値を確認できます。</div>
                    <div class="t-modal-card-body-block-sub">
                      <div class="t-modal-card-body-readtitle">ご注意</div>
                      <div class="t-modal-card-body-readtext">「走行数」「走行時間」「走行距離」は、当月に表示されたドライブレポートの数および各ドライブレポートが対象とする走行の時間・距離の合計を表しているため、実際の走行と異なる場合があります。</div>
                      <ul class="t-annotation">
                        <li class="t-annotation-item">ドライブレポートは、お車の通信環境等により、1回の運転であっても複数に分かれて提供される場合があります。</li>
                        <li class="t-annotation-item">ドライブレポートは、走行距離が運転診断を行う基準に達しない場合には表示されないことがあります。</li>
                      </ul>
                    </div><!-- /.t-modal-card-body-block-sub -->
                  </div><!-- /.t-modal-card-body-block -->
                </div><!-- /.t-modal-card-body -->
        
              </div><!-- /.t-modal-card -->
        
            </div><!-- /.t-modal-scroll -->
        
          </div><!-- /.t-modal-inner -->
        
        </div><!-- /.t-modal -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

走行実績 - 月間走行実績：モーダル

走行実績 月間走行実績のモーダルウィンドウは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。


  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div id="modal01" class="t-modal">

          <div class="t-modal-inner">
            
            <div class="t-modal-scroll">
        
              <div class="t-modal-card">
        
                <div class="t-modal-card-header">
                  <div class="t-modal-card-title">
                    <div class="t-modal-card-text">月間走行実績</div>
                  </div><!-- /.t-modal-card-title -->
                  <span class="btn-close t-modal-card-close t-modal-close">
                    <span class="t-modal-card-close-icon"></span>
                  </span>
                </div><!-- /.t-modal-card-header -->
                <div class="t-modal-card-body">
                  <div class="t-modal-card-body-block t-padding-top-fix">
                    <div class="t-modal-card-body-text">月間の「走行数」「走行時間」「走行距離」の累計および走行ごとの平均値を確認できます。</div>
                    <div class="t-modal-card-body-block-sub">
                      <div class="t-modal-card-body-readtitle">ご注意</div>
                      <div class="t-modal-card-body-readtext">「走行数」「走行時間」「走行距離」は、当月に表示されたドライブレポートの数および各ドライブレポートが対象とする走行の時間・距離の合計を表しているため、実際の走行と異なる場合があります。</div>
                      <ul class="t-annotation">
                        <li class="t-annotation-item">ドライブレポートは、お車の通信環境等により、1回の運転であっても複数に分かれて提供される場合があります。</li>
                        <li class="t-annotation-item">ドライブレポートは、走行距離が運転診断を行う基準に達しない場合には表示されないことがあります。</li>
                      </ul>
                    </div><!-- /.t-modal-card-body-block-sub -->
                  </div><!-- /.t-modal-card-body-block -->
                </div><!-- /.t-modal-card-body -->
        
              </div><!-- /.t-modal-card -->
        
            </div><!-- /.t-modal-scroll -->
        
          </div><!-- /.t-modal-inner -->
        
        </div><!-- /.t-modal -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

走行実績 - 運転特性

運転特性は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
（※関連ファイル：jquery-3.4.1.min.js、component.js）

運転特性
速度超過 急アクセル 急ブレーキ
月間累計
400
145
220
走行ごとの平均
4.5
1.6
2.5
運転特性
月間の「速度超過」「急アクセル」「急ブレーキ」の発生回数の累計および走行ごとの平均値を確認できます。
安全運転のポイント
【発進】ふんわりアクセル
発進時はおだやかにアクセルを踏んで発進しましょう。その後、アクセルを踏み増して徐々に加速します。
【運転中】適切な車間距離
走行中は加減速を少なくし、交通状況（車の流れ）に応じた一定の速度で運転しましょう。そのためには車間距離を十分にとることがポイントです。
【停止】早めのアクセルオフ
減速時は早めにアクセルを離しましょう。ブレーキの踏み始めはおだやかに踏み、効き始めたらしっかり踏み込んで減速します。
ご注意
実際に走行する際は交通ルールを守って安全運転を心がけてください。子どもの飛出し等の事故につながる危険を察知した場合は、急激なブレーキ操作をしてでも衝突を回避してください。

  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-content">

          <div class="t-monthly-content-item active">

            <div class="t-monthly-content-performance">

              <div class="t-monthly-content-performance-block-wrap">

                <div class="t-monthly-content-performance-title">
                  <span class="t-monthly-content-performance-title-icon t-modal-open" data-openMadal="modal03"><img src="images/monthly/ico25.png" alt=""></span>
                  <div class="t-monthly-content-performance-title-text">運転特性</div>
                </div><!-- /.t-monthly-content-performance-title -->

                <div class="t-monthly-content-performance-block">
                  
                  <table class="t-monthly-content-performance-character-table">
                    <thead>
                      <tr>
                        <th><img src="images/monthly/ttl01.png" alt="速度超過"></th>
                        <th><img src="images/monthly/ttl02.png" alt="急アクセル"></th>
                        <th><img src="images/monthly/ttl03.png" alt="急ブレーキ"></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th colspan="3">月間累計</th>
                      </tr>
                      <tr>
                        <td>
                          <div class="t-monthly-content-performance-item-count">400</div>
                        </td>
                        <td>
                          <div class="t-monthly-content-performance-item-count">145</div>
                        </td>
                        <td>
                          <div class="t-monthly-content-performance-item-count">220</div>
                        </td>
                      </tr>
                      <tr>
                        <th colspan="3">走行ごとの平均</th>
                      </tr>
                      <tr>
                        <td>
                          <div class="t-monthly-content-performance-item-count">4.5</div>
                        </td>
                        <td>
                          <div class="t-monthly-content-performance-item-count">1.6</div>
                        </td>
                        <td>
                          <div class="t-monthly-content-performance-item-count">2.5</div>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                </div><!-- /.t-monthly-content-performance-block -->

              </div><!-- /.t-monthly-content-performance-block-wrap -->

            </div><!-- /.t-monthly-content-performance -->

          </div><!-- /.t-monthly-content-item -->

        </div><!-- /.t-monthly-content -->

        <div id="modal03" class="t-modal">

          <div class="t-modal-inner">
            
            <div class="t-modal-scroll">
        
              <div class="t-modal-card">
        
                <div class="t-modal-card-body">
                  <div class="t-modal-card-header">
                    <div class="t-modal-card-title">
                      <div class="t-modal-card-text">運転特性</div>
                    </div><!-- /.t-modal-card-title -->
                    <span class="btn-close t-modal-card-close t-modal-close">
                      <span class="t-modal-card-close-icon"></span>
                    </span>
                  </div><!-- /.t-modal-card-header -->
                  <div class="t-modal-card-body">
                    <div class="t-modal-card-body-block">
                      <div class="t-modal-card-body-text">月間の「速度超過」「急アクセル」「急ブレーキ」の発生回数の累計および走行ごとの平均値を確認できます。</div>
                      <div class="t-modal-card-body-block-sub">
                        <div class="t-modal-card-body-readtitle">安全運転のポイント</div>
                        <div class="t-modal-card-body-readtext">【発進】ふんわりアクセル<br>発進時はおだやかにアクセルを踏んで発進しましょう。その後、アクセルを踏み増して徐々に加速します。</div>
                        <div class="t-modal-card-body-readtext">【運転中】適切な車間距離<br>走行中は加減速を少なくし、交通状況（車の流れ）に応じた一定の速度で運転しましょう。そのためには車間距離を十分にとることがポイントです。</div>
                        <div class="t-modal-card-body-readtext">【停止】早めのアクセルオフ<br>減速時は早めにアクセルを離しましょう。ブレーキの踏み始めはおだやかに踏み、効き始めたらしっかり踏み込んで減速します。</div>
                      </div><!-- /.t-modal-card-body-block-sub -->
                      <div class="t-modal-card-body-block-sub">
                        <div class="t-modal-card-body-readtitle">ご注意</div>
                        <div class="t-modal-card-body-readtext">実際に走行する際は交通ルールを守って安全運転を心がけてください。子どもの飛出し等の事故につながる危険を察知した場合は、急激なブレーキ操作をしてでも衝突を回避してください。</div>
                      </div><!-- /.t-modal-card-body-block-sub -->
                    </div><!-- /.t-modal-card-body-block -->
                  </div><!-- /.t-modal-card-body -->
                </div><!-- /.t-modal-card-body -->
        
              </div><!-- /.t-modal-card -->
        
            </div><!-- /.t-modal-scroll -->
        
          </div><!-- /.t-modal-inner -->
        
        </div><!-- /.t-modal -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

走行実績 - 運転特性：モーダル

運転特性のモーダルウィンドウは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。


  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div id="modal03" class="t-modal">

          <div class="t-modal-inner">
            
            <div class="t-modal-scroll">
        
              <div class="t-modal-card">
        
                <div class="t-modal-card-body">
                  <div class="t-modal-card-header">
                    <div class="t-modal-card-title">
                      <div class="t-modal-card-text">運転特性</div>
                    </div><!-- /.t-modal-card-title -->
                    <span class="btn-close t-modal-card-close t-modal-close">
                      <span class="t-modal-card-close-icon"></span>
                    </span>
                  </div><!-- /.t-modal-card-header -->
                  <div class="t-modal-card-body">
                    <div class="t-modal-card-body-block">
                      <div class="t-modal-card-body-text">月間の「速度超過」「急アクセル」「急ブレーキ」の発生回数の累計および走行ごとの平均値を確認できます。</div>
                      <div class="t-modal-card-body-block-sub">
                        <div class="t-modal-card-body-readtitle">安全運転のポイント</div>
                        <div class="t-modal-card-body-readtext">【発進】ふんわりアクセル<br>発進時はおだやかにアクセルを踏んで発進しましょう。その後、アクセルを踏み増して徐々に加速します。</div>
                        <div class="t-modal-card-body-readtext">【運転中】適切な車間距離<br>走行中は加減速を少なくし、交通状況（車の流れ）に応じた一定の速度で運転しましょう。そのためには車間距離を十分にとることがポイントです。</div>
                        <div class="t-modal-card-body-readtext">【停止】早めのアクセルオフ<br>減速時は早めにアクセルを離しましょう。ブレーキの踏み始めはおだやかに踏み、効き始めたらしっかり踏み込んで減速します。</div>
                      </div><!-- /.t-modal-card-body-block-sub -->
                      <div class="t-modal-card-body-block-sub">
                        <div class="t-modal-card-body-readtitle">ご注意</div>
                        <div class="t-modal-card-body-readtext">実際に走行する際は交通ルールを守って安全運転を心がけてください。子どもの飛出し等の事故につながる危険を察知した場合は、急激なブレーキ操作をしてでも衝突を回避してください。</div>
                      </div><!-- /.t-modal-card-body-block-sub -->
                    </div><!-- /.t-modal-card-body-block -->
                  </div><!-- /.t-modal-card-body -->
                </div><!-- /.t-modal-card-body -->
        
              </div><!-- /.t-modal-card -->
        
            </div><!-- /.t-modal-scroll -->
        
          </div><!-- /.t-modal-inner -->
        
        </div><!-- /.t-modal -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

走行実績 - 予防安全装置

予防安全装置は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
（※関連ファイル：jquery-3.4.1.min.js、monthly.js、component.js）

予防安全装置
予防安全装置の作動状況
ABS
ABSとは
月間累計
10
走行ごとの平均
0.1
TRC
TRCとは
月間累計
5
走行ごとの平均
0.1
VSC
VSCとは
月間累計
3
走行ごとの平均
0.0
PCS
PCSとは
月間累計
2
走行ごとの平均
0.0
予防安全装置の利用状況
LDA
LDAとは
月間累計
30
LTA
LTAとは
月間累計
0
TMN
TMNとは
月間累計
80
DRCC
DRCCとは
月間累計
0
走行アドバイス

（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）

予防安全装置
ABS（アンチロック・ブレーキシステム）等の予防安全装置の作動状況と、LDA（レーンディパーチャーアラート）等の利用状況を確認できます。
ABS・TRC・VSC・PCSの各装置が作動しないよう、周囲や路面の状況に注意して、適切な運転操作を心がけましょう。
また、LDA・LTA・TMN・DRCCの各装置を活用することで、事故低減を図ることができます。
ご注意
車両入替があった場合、入替前後のお車のデータが合算されて表示されます。そのため、入替後のお車に非搭載の装置のデータも表示される場合があります。また、予防安全装置の作動状況・利用状況が高く（または低く）表示される場合があります。

  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div class="t-monthly-content">

          <div class="t-monthly-content-item active">

            <div class="t-monthly-content-performance">

              <div class="t-monthly-content-performance-block-wrap">

                <div class="t-monthly-content-performance-title">
                  <span class="t-monthly-content-performance-title-icon t-modal-open" data-openMadal="modal04"><img src="../images/monthly/ico25.png" alt=""></span>
                  <div class="t-monthly-content-performance-title-text">予防安全装置</div>
                </div><!-- /.t-monthly-content-performance-title -->

                <div class="t-monthly-content-performance-subtitle">
                  <div class="t-monthly-content-performance-subtitle-text margin_fix">予防安全装置の作動状況</div>
                </div><!-- /.t-monthly-content-performance-subtitle -->

                <div class="t-monthly-content-performance-block">
                
                  <div class="t-monthly-content-performance-links">
                    <div class="t-monthly-content-performance-links-header">
                      <div class="t-monthly-content-performance-links-header-title">
                        <div class="t-monthly-content-performance-links-text">ABS</div>
                        <a href="javascript: void(0);" class="t-monthly-content-performance-links-link">
                          <span class="t-monthly-content-performance-links-link-icon">ABSとは</span>
                        </a>
                      </div>
                    </div>
                    <div class="t-monthly-content-performance-links-body">
                      <div class="t-monthly-content-performance-links-item">
                        <div class="t-monthly-content-performance-links-title">月間累計</div>
                        <div class="t-monthly-content-performance-links-count">10</div>
                      </div>
                      <div class="t-monthly-content-performance-links-item">
                        <div class="t-monthly-content-performance-links-title">走行ごとの平均</div>
                        <div class="t-monthly-content-performance-links-count">0.1</div>
                      </div>
                    </div>
                  </div>
                
                  <div class="t-monthly-content-performance-links">
                    <div class="t-monthly-content-performance-links-header">
                      <div class="t-monthly-content-performance-links-header-title">
                        <div class="t-monthly-content-performance-links-text">TRC</div>
                        <a href="javascript: void(0);" class="t-monthly-content-performance-links-link">
                          <span class="t-monthly-content-performance-links-link-icon">TRCとは</span>
                        </a>
                      </div>
                    </div>
                    <div class="t-monthly-content-performance-links-body">
                      <div class="t-monthly-content-performance-links-item">
                        <div class="t-monthly-content-performance-links-title">月間累計</div>
                        <div class="t-monthly-content-performance-links-count">5</div>
                      </div>
                      <div class="t-monthly-content-performance-links-item">
                        <div class="t-monthly-content-performance-links-title">走行ごとの平均</div>
                        <div class="t-monthly-content-performance-links-count">0.1</div>
                      </div>
                    </div>
                  </div>
                
                  <div class="t-monthly-content-performance-links">
                    <div class="t-monthly-content-performance-links-header">
                      <div class="t-monthly-content-performance-links-header-title">
                        <div class="t-monthly-content-performance-links-text">VSC</div>
                        <a href="javascript: void(0);" class="t-monthly-content-performance-links-link">
                          <span class="t-monthly-content-performance-links-link-icon">VSCとは</span>
                        </a>
                      </div>
                    </div>
                    <div class="t-monthly-content-performance-links-body">
                      <div class="t-monthly-content-performance-links-item">
                        <div class="t-monthly-content-performance-links-title">月間累計</div>
                        <div class="t-monthly-content-performance-links-count">3</div>
                      </div>
                      <div class="t-monthly-content-performance-links-item">
                        <div class="t-monthly-content-performance-links-title">走行ごとの平均</div>
                        <div class="t-monthly-content-performance-links-count">0.0</div>
                      </div>
                    </div>
                  </div>
                
                  <div class="t-monthly-content-performance-links">
                    <div class="t-monthly-content-performance-links-header">
                      <div class="t-monthly-content-performance-links-header-title">
                        <div class="t-monthly-content-performance-links-text">PCS</div>
                        <a href="javascript: void(0);" class="t-monthly-content-performance-links-link">
                          <span class="t-monthly-content-performance-links-link-icon">PCSとは</span>
                        </a>
                      </div>
                    </div>
                    <div class="t-monthly-content-performance-links-body">
                      <div class="t-monthly-content-performance-links-item">
                        <div class="t-monthly-content-performance-links-title">月間累計</div>
                        <div class="t-monthly-content-performance-links-count">2</div>
                      </div>
                      <div class="t-monthly-content-performance-links-item">
                      <div class="t-monthly-content-performance-links-title">走行ごとの平均</div>
                      <div class="t-monthly-content-performance-links-count">0.0</div>
                      </div>
                    </div>
                  </div>

                </div><!-- /.t-monthly-content-performance-block -->

                <div class="t-monthly-content-performance-subtitle t-margin">
                  <div class="t-monthly-content-performance-subtitle-text">予防安全装置の利用状況</div>
                </div><!-- /.t-monthly-content-performance-subtitle -->

                <div class="t-monthly-content-performance-block t-flat">
                
                  <div class="t-monthly-content-performance-links">
                    <div class="t-monthly-content-performance-links-header">
                      <div class="t-monthly-content-performance-links-header-title">
                        <div class="t-monthly-content-performance-links-text">LDA</div>
                        <a href="javascript: void(0);" class="t-monthly-content-performance-links-link">
                          <span class="t-monthly-content-performance-links-link-icon">LDAとは</span>
                        </a>
                      </div>
                    </div>
                    <div class="t-monthly-content-performance-links-body">
                      <div class="t-monthly-content-performance-links-title">月間累計</div>
                      <div class="t-monthly-content-performance-links-data">
                        <div class="t-monthly-content-performance-links-graph">
                          <div class="t-monthly-content-performance-links-graph-bar"></div>
                        </div>
                        <div class="t-monthly-content-performance-links-data-percent">30</div>
                      </div>
                    </div>
                  </div>

                  <div class="t-monthly-content-performance-links">
                    <div class="t-monthly-content-performance-links-header">
                      <div class="t-monthly-content-performance-links-header-title">
                        <div class="t-monthly-content-performance-links-text">LTA</div>
                        <a href="javascript: void(0);" class="t-monthly-content-performance-links-link">
                          <span class="t-monthly-content-performance-links-link-icon">LTAとは</span>
                        </a>
                      </div>
                    </div>
                    <div class="t-monthly-content-performance-links-body">
                      <div class="t-monthly-content-performance-links-title">月間累計</div>
                      <div class="t-monthly-content-performance-links-data">
                        <div class="t-monthly-content-performance-links-graph">
                          <div class="t-monthly-content-performance-links-graph-bar"></div>
                        </div>
                        <div class="t-monthly-content-performance-links-data-percent">0</div>
                      </div>
                    </div>
                  </div>
                
                  <div class="t-monthly-content-performance-links">
                    <div class="t-monthly-content-performance-links-header">
                      <div class="t-monthly-content-performance-links-header-title">
                        <div class="t-monthly-content-performance-links-text">TMN</div>
                        <a href="javascript: void(0);" class="t-monthly-content-performance-links-link">
                          <span class="t-monthly-content-performance-links-link-icon">TMNとは</span>
                        </a>
                      </div>
                    </div>
                    <div class="t-monthly-content-performance-links-body">
                      <div class="t-monthly-content-performance-links-title">月間累計</div>
                      <div class="t-monthly-content-performance-links-data">
                        <div class="t-monthly-content-performance-links-graph">
                          <div class="t-monthly-content-performance-links-graph-bar"></div>
                        </div>
                        <div class="t-monthly-content-performance-links-data-percent">80</div>
                      </div>
                    </div>
                  </div>

                  <div class="t-monthly-content-performance-links">
                    <div class="t-monthly-content-performance-links-header">
                      <div class="t-monthly-content-performance-links-header-title">
                        <div class="t-monthly-content-performance-links-text">DRCC</div>
                        <a href="javascript: void(0);" class="t-monthly-content-performance-links-link">
                          <span class="t-monthly-content-performance-links-link-icon">DRCCとは</span>
                        </a>
                      </div>
                    </div>
                    <div class="t-monthly-content-performance-links-body">
                      <div class="t-monthly-content-performance-links-title">月間累計</div>
                      <div class="t-monthly-content-performance-links-data">
                        <div class="t-monthly-content-performance-links-graph">
                          <div class="t-monthly-content-performance-links-graph-bar"></div>
                        </div>
                        <div class="t-monthly-content-performance-links-data-percent">0</div>
                      </div>
                    </div>
                  </div>

                </div><!-- /.t-monthly-content-performance-block -->

                <div class="t-monthly-content-performance-subtitle t-margin">
                  <div class="t-monthly-content-performance-subtitle-text">走行アドバイス</div>
                </div><!-- /.t-monthly-content-performance-subtitle -->

                <div class="t-monthly-content-performance-advice">
                  <p class="t-monthly-content-performance-advice-text">（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）（アスアからのメッセージ表示）</p>
                </div><!-- /.t-monthly-content-performance-advice -->

              </div><!-- /.t-monthly-content-performance -->

          </div><!-- /.t-monthly-content-item -->

        </div><!-- /.t-monthly-content -->

        <div id="modal04" class="t-modal">

          <div class="t-modal-inner">
            
            <div class="t-modal-scroll">
        
              <div class="t-modal-card">
        
                <div class="t-modal-card-body">
                  <div class="t-modal-card-header">
                    <div class="t-modal-card-title">
                      <div class="t-modal-card-text">予防安全装置</div>
                    </div><!-- /.t-modal-card-title -->
                    <span class="btn-close t-modal-card-close t-modal-close">
                      <span class="t-modal-card-close-icon"></span>
                    </span>
                  </div><!-- /.t-modal-card-header -->
                  <div class="t-modal-card-body">
                    <div class="t-modal-card-body-block">
                      <div class="t-modal-card-body-text">ABS（アンチロック・ブレーキシステム）等の予防安全装置の作動状況と、LDA（レーンディパーチャーアラート）等の利用状況を確認できます。</div>
                      <div class="t-modal-card-body-text">ABS・TRC・VSC・PCSの各装置が作動しないよう、周囲や路面の状況に注意して、適切な運転操作を心がけましょう。<br>また、LDA・LTA・TMN・DRCCの各装置を活用することで、事故低減を図ることができます。</div>
                      <div class="t-modal-card-body-block-sub">
                        <div class="t-modal-card-body-readtitle">ご注意</div>
                        <div class="t-modal-card-body-readtext">車両入替があった場合、入替前後のお車のデータが合算されて表示されます。そのため、入替後のお車に非搭載の装置のデータも表示される場合があります。また、予防安全装置の作動状況・利用状況が高く（または低く）表示される場合があります。</div>
                      </div><!-- /.t-modal-card-body-block-sub -->
                    </div><!-- /.t-modal-card-body-block -->
                  </div><!-- /.t-modal-card-body -->
                </div><!-- /.t-modal-card-body -->
        
              </div><!-- /.t-modal-card -->
        
            </div><!-- /.t-modal-scroll -->
        
          </div><!-- /.t-modal-inner -->
        
        </div><!-- /.t-modal -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>

走行実績 - 予防安全装置

予防安全装置は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。


  <body>
    <section class="t-container">

      <div class="t-monthly">

        <div id="modal04" class="t-modal">

          <div class="t-modal-inner">
            
            <div class="t-modal-scroll">
        
              <div class="t-modal-card">
        
                <div class="t-modal-card-body">
                  <div class="t-modal-card-header">
                    <div class="t-modal-card-title">
                      <div class="t-modal-card-text">予防安全装置</div>
                    </div><!-- /.t-modal-card-title -->
                    <span class="btn-close t-modal-card-close t-modal-close">
                      <span class="t-modal-card-close-icon"></span>
                    </span>
                  </div><!-- /.t-modal-card-header -->
                  <div class="t-modal-card-body">
                    <div class="t-modal-card-body-block">
                      <div class="t-modal-card-body-text">ABS（アンチロック・ブレーキシステム）等の予防安全装置の作動状況と、LDA（レーンディパーチャーアラート）等の利用状況を確認できます。</div>
                      <div class="t-modal-card-body-text">ABS・TRC・VSC・PCSの各装置が作動しないよう、周囲や路面の状況に注意して、適切な運転操作を心がけましょう。<br>また、LDA・LTA・TMN・DRCCの各装置を活用することで、事故低減を図ることができます。</div>
                      <div class="t-modal-card-body-block-sub">
                        <div class="t-modal-card-body-readtitle">ご注意</div>
                        <div class="t-modal-card-body-readtext">車両入替があった場合、入替前後のお車のデータが合算されて表示されます。そのため、入替後のお車に非搭載の装置のデータも表示される場合があります。また、予防安全装置の作動状況・利用状況が高く（または低く）表示される場合があります。</div>
                      </div><!-- /.t-modal-card-body-block-sub -->
                    </div><!-- /.t-modal-card-body-block -->
                  </div><!-- /.t-modal-card-body -->
                </div><!-- /.t-modal-card-body -->
        
              </div><!-- /.t-modal-card -->
        
            </div><!-- /.t-modal-scroll -->
        
          </div><!-- /.t-modal-inner -->
        
        </div><!-- /.t-modal -->

      </div><!-- /.t-monthly -->
  
    </section>
  </body>