メニュー
メニューのレイアウトについての章です。
コンテンツの包括的なラッピング（1）
<body>にid「home」を追加してください。
<body id="home">
</body>
コンテンツの包括的なラッピング（2）
<body>タグ直下に下記を参考に記述してください。
<body id="home">
<!-- テンプレートが入ります -->
<div id="body_inner01" class="d-flex flex-column position-relative">
<div id="body_inner02">
<div class="body_inner02_inner01">
<main>
<section class="t-container">
</section>
</main>
</div><!-- /.body_inner02_inner01 -->
</div><!-- /#body_inner02 -->
</div><!-- /#body_inner01 -->
<!-- テンプレートが入ります -->
</body>
コンテンツエリア毎のラッピング
各コンテンツエリアは下記を参考に記述してください。
<body id="home">
<!-- テンプレートが入ります -->
<main>
<section class="t-container">
<div class="t-home-user-info">
<div class="t-home-user-name">
<span class="t-home-user-name-first">恵比寿</span>
<span class="t-home-user-name-last">太郎</span>
</div><!-- /.t-home-user-name -->
<div class="t-home-user-footer">
<span class="t-home-user-policynumber">A123456789</span>
<span class="t-home-user-car">Vitz</span>
</div><!-- /.t-home-user-footer -->
</div><!-- /.t-home-user-info -->
<div class="t-home-info">
<div class="t-home-info-header">
<h2 class="t-home-info-title">お知らせ</h2>
</div><!-- /.t-home-info-header -->
<div class="t-home-info-body">
<a href="./information/">
<span class="t-home-info-body-sub">2020年12月31日</span>
<span class="t-home-info-body-main">XXXXXXXXXXXXXのお知らせ</span>
</a>
<a href="./information/">
<span class="t-home-info-body-sub">2020年12月31日</span>
<span class="t-home-info-body-main">長いタイトル長いタイトル長いタイトル長いタイトル長いタイトル</span>
</a>
<a href="./information/" class="t-home-info-body-last">一覧を見る</a>
</div><!-- /.t-home-info-body -->
</div><!-- /.t-home-info -->
</section>
<section class="t-container">
<div class="t-home-grandmenu">
<div class="t-home-grandmenu-list">
<a href="drive/" class="t-home-grandmenu-list-item">
<span class="t-home-grandmenu-list-item-header">運転ごとの診断結果</span>
<span class="t-home-grandmenu-list-item-body">
<span class="t-home-grandmenu-list-item-body-icon">
<img src="apl/sp/images/home/grandmenu_ico01.png" width="32" height="30" alt="">
</span>
<span class="t-home-grandmenu-list-item-body-text">
<span class="t-home-grandmenu-list-item-body-text-main"><img src="apl/sp/images/home/grandmenu_title01.png" width="118" height="20" alt="Drive Report" class="t-home-grandmenu-list-item-body-text-main-title-1"></span>
<div class="t-home-grandmenu-list-item-body-text-sub">ドライブレポート</div>
</span>
</span>
</a>
<a href="monthly/" class="t-home-grandmenu-list-item">
<span class="t-home-grandmenu-list-item-header">1か月ごとの診断結果</span>
<span class="t-home-grandmenu-list-item-body">
<span class="t-home-grandmenu-list-item-body-icon">
<img src="apl/sp/images/home/grandmenu_ico02.png" width="32" height="30" alt="">
</span>
<span class="t-home-grandmenu-list-item-body-text">
<span class="t-home-grandmenu-list-item-body-text-main"><img src="apl/sp/images/home/grandmenu_title02.png" width="133" height="20" alt="Monthly Report" class="t-home-grandmenu-list-item-body-text-main-title-2"></span>
<div class="t-home-grandmenu-list-item-body-text-sub">マンスリーレポート</div>
</span>
</span>
</a>
</div><!-- /.t-home-grandmenu-list -->
</div><!-- /.t-home-grandmenu -->
<div class="t-home-nicemenu">
<div class="t-home-nicemenu-column">
<a href="javascript:void(0);" class="t-home-nicemenu-column-item">
<span class="t-home-nicemenu-column-item-header">運転技能向上<br class="t-home-nicemenu-column-item-header-br">トレーニング</span>
<span class="t-home-nicemenu-column-item-body">
<span class="t-home-nicemenu-column-item-body-icon">
<img src="apl/sp/images/home/nicemenu_ico01.png" width="32" height="30" alt="">
</span>
<span class="t-home-nicemenu-column-item-body-text">
<span class="t-home-nicemenu-column-item-body-text-main"><img src="apl/sp/images/home/nicemenu_title01.png" width="131" height="21" alt="Brain Training" class="t-home-nicemenu-column-item-body-text-main-title-1"></span>
<span class="t-home-nicemenu-column-item-body-text-sub">いきいき脳体操<span class="t-home-nicemenu-column-item-body-text-sub-small"> ※</span></span>
</span>
</span>
</a>
<a href="javascript:void(0);" class="t-home-nicemenu-column-item">
<span class="t-home-nicemenu-column-item-header">安全運転で<br class="t-home-nicemenu-column-item-header-br">貯まる</span>
<span class="t-home-nicemenu-column-item-body">
<span class="t-home-nicemenu-column-item-body-icon">
<img src="apl/sp/images/home/nicemenu_ico02.png" width="32" height="30" alt="">
</span>
<span class="t-home-nicemenu-column-item-body-text">
<span class="t-home-nicemenu-column-item-body-text-main"><img src="apl/sp/images/home/nicemenu_title02.png" width="43" height="21" alt="Point" class="t-home-nicemenu-column-item-body-text-main-title-2"></span>
<span class="t-home-nicemenu-column-item-body-text-sub">ADテレマイレージ</span>
</span>
</span>
</a>
</div><!-- /.t-home-nicemenu-colomn -->
<div class="t-home-nicemenu-textlink">
<div class="t-home-nicemenu-textlink-flat">
<a href="javascript:void(0);" class="t-home-nicemenu-textlink-flat-item">※「川島隆太教授のいきいき脳体操」とは</a>
</div><!-- /.t-home-nicemenu-textlink-flat -->
</div><!-- /.t-home-nicemenu-textlink -->
<div class="t-home-nicemenu-flat">
<a href="faq" class="t-home-nicemenu-flat-item">
<span class="t-home-nicemenu-flat-item-header">
<span class="t-home-nicemenu-flat-item-header-icon-1"><img src="apl/sp/images/home/nicemenu_ico03.png" alt=""></span>
<span class="t-home-nicemenu-flat-item-header-title-1"><img src="apl/sp/images/home/nicemenu_title03.png" alt="FAQ"></span>
</span>
<span class="t-home-nicemenu-flat-item-body">よくあるご質問</span>
</a>
<a href="contact/" class="t-home-nicemenu-flat-item">
<span class="t-home-nicemenu-flat-item-header">
<span class="t-home-nicemenu-flat-item-header-icon-2"><img src="apl/sp/images/home/nicemenu_ico04.png" alt=""></span>
<span class="t-home-nicemenu-flat-item-header-title-2"><img src="apl/sp/images/home/nicemenu_title04.png" alt="Contact"></span>
</span>
<span class="t-home-nicemenu-flat-item-body">お問合わせ先</span>
</a>
</div><!-- /.t-home-nicemenu-flat -->
</div><!-- /.t-home-nicemenu -->
<div class="t-home-footermenu">
<div class="t-home-footermenu-flat">
<a href="javascript:void(0);" class="t-home-footermenu-flat-item">
<span class="t-home-footermenu-flat-item-icon-1"><img src="apl/sp/images/home/footermenu_ico01.png" alt=""></span>
<span class="t-home-footermenu-flat-item-title">表示中のご契約に関する設定</span>
</a>
<a href="javascript:void(0);" class="t-home-footermenu-flat-item">
<span class="t-home-footermenu-flat-item-icon-2"><img src="apl/sp/images/home/footermenu_ico02.png" alt=""></span>
<span class="t-home-footermenu-flat-item-title">表示するご契約の変更</span>
</a>
</div><!-- /.t-home-footermenu-flat -->
</div><!-- /.t-home-footermenu -->
</section>
</main>
<!-- テンプレートが入ります -->
</body>
ドライブレポート・マンスリーレポートの非活性化
ドライブレポート・マンスリーレポートの非活性化をする際は、下記を参考に「aタグ」を「divタグ」に変更してください。
<body id="home">
<!-- テンプレートが入ります -->
<main>
<section class="t-container">
<div class="t-home-grandmenu">
<div class="t-home-grandmenu-list">
<div class="t-home-grandmenu-list-item">
<span class="t-home-grandmenu-list-item-header">運転ごとの診断結果</span>
<span class="t-home-grandmenu-list-item-body">
<span class="t-home-grandmenu-list-item-body-icon">
<img src="apl/sp/images/home/grandmenu_ico01.png" width="32" height="30" alt="">
</span>
<span class="t-home-grandmenu-list-item-body-text">
<span class="t-home-grandmenu-list-item-body-text-main"><img src="apl/sp/images/home/grandmenu_title01.png" width="118" height="20" alt="Drive Report" class="t-home-grandmenu-list-item-body-text-main-title-1"></span>
<div class="t-home-grandmenu-list-item-body-text-sub">ドライブレポート</div>
</span>
</span>
</div>
<div class="t-home-grandmenu-list-item">
<span class="t-home-grandmenu-list-item-header">1か月ごとの診断結果</span>
<span class="t-home-grandmenu-list-item-body">
<span class="t-home-grandmenu-list-item-body-icon">
<img src="apl/sp/images/home/grandmenu_ico02.png" width="32" height="30" alt="">
</span>
<span class="t-home-grandmenu-list-item-body-text">
<span class="t-home-grandmenu-list-item-body-text-main"><img src="apl/sp/images/home/grandmenu_title02.png" width="133" height="20" alt="Monthly Report" class="t-home-grandmenu-list-item-body-text-main-title-2"></span>
<div class="t-home-grandmenu-list-item-body-text-sub">マンスリーレポート</div>
</span>
</span>
</div>
</div><!-- /.t-home-grandmenu-list -->
</div><!-- /.t-home-grandmenu -->
</section>
</main>
<!-- テンプレートが入ります -->
</body>
いきいき脳体操・ADテレマイレージ：削除する場合
登録内容変更・お問合わせは「t-container」クラス内の「t-home-nicemenu」クラス内に下記を参考に記述してください。
<body id="home">
<!-- テンプレートが入ります -->
<main>
<section class="t-container">
<div class="t-home-nicemenu">
<div class="t-home-nicemenu-flat">
<a href="faq/" class="t-home-nicemenu-flat-item">
<span class="t-home-nicemenu-flat-item-header">
<span class="t-home-nicemenu-flat-item-header-icon-1"><img src="apl/sp/images/home/nicemenu_ico03.png" alt=""></span>
<span class="t-home-nicemenu-flat-item-header-title-1"><img src="apl/sp/images/home/nicemenu_title03.png" alt="FAQ"></span>
</span>
<span class="t-home-nicemenu-flat-item-body">よくあるご質問</span>
</a>
<a href="contact/" class="t-home-nicemenu-flat-item">
<span class="t-home-nicemenu-flat-item-header">
<span class="t-home-nicemenu-flat-item-header-icon-2"><img src="apl/sp/images/home/nicemenu_ico04.png" alt=""></span>
<span class="t-home-nicemenu-flat-item-header-title-2"><img src="apl/sp/images/home/nicemenu_title04.png" alt="Contact"></span>
</span>
<span class="t-home-nicemenu-flat-item-body">お問合わせ先</span>
</a>
</div><!-- /.t-home-nicemenu-flat -->
</div><!-- /.t-home-nicemenu -->
</section>
</main>
<!-- テンプレートが入ります -->
</body>