[0-0] パーツについて

各パーツはHTML内に記述してある、「.p-content .inner」（下層ページ共通）の中でのみ使用してください。それ以外の場所で使用すると崩れる原因となります。

[0-1] 見出し

・h2_見出し

タイトルタイトル

<h2 class="heading2">タイトルタイトル</h2>

・h3_見出し

タイトルタイトル

<h3 class="heading3">タイトルタイトル</h3>

タイトルタイトル

<h3 class="heading3 center">タイトルタイトル</h3>

タイトルタイトル

<h3 class="heading3 right">タイトルタイトル</h3>

[0-3] テキスト

「.text-box」は横幅900px指定にしたいときに使用してください。

・左寄せ

<div class="text-box"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div>

横幅900px

・中央寄せ

<div class="text-box"> <p class="center">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div>

横幅900px

・右寄せ

<div class="text-box"> <p class="right">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div>

横幅900px

・リンクあり

<div class="text-box"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<a href="#" class="icon-window">テキストテキスト</a>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div>

横幅900px

・背景はり

<div class="text-block bg-gray"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div>

テキストの横幅900px

・注釈

テキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキスト

<p class="c-note font-s">テキストテキストテキストテキストテキストテキストテキスト</p> <p class="c-note font-s">テキストテキストテキストテキストテキストテキストテキスト</p> <p class="c-note font-s">テキストテキストテキストテキストテキストテキストテキスト</p> <p class="c-note font-s right">テキストテキストテキストテキストテキストテキストテキスト</p> <p class="c-note font-s center">テキストテキストテキストテキストテキストテキストテキスト</p>

[0-4] リスト

・リスト

• テキストテキストテキスト
• テキストテキストテキスト
• テキストテキストテキスト
• テキストテキストテキスト

• テキストテキストテキスト
• テキストテキストテキスト
• テキストテキストテキスト
• テキストテキストテキスト

<ul class="list-dot"> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ul> <ul class="list-dot black"> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ul> <ul class="list-dot white"> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ul>

丸ぽちの色を変更する場合「black / white」のクラスを追加してください。

上下に余白を付けたい場合は、「div class="text-block"」or「div class="text-box"」で囲むか「.mb00」クラスを追加してください。

・番号リスト

1. テキストテキストテキスト
2. テキストテキストテキスト
3. テキストテキストテキスト
4. テキストテキストテキスト

<ol class="list-num"> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ol>

上下に余白を付けたい場合は、「div class="text-block"」or「div class="text-box"」で囲むか「.mb00」クラスを追加してください。

・リストタイプ1

• テキストテキストテキスト
• テキストテキストテキスト
• テキストテキストテキスト
• テキストテキストテキスト

<ul class="list-type1"> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ul>

[0-5] テキスト + 画像

・h2 + (テキスト+画像）

タイトルが入ります

<h2 class="heading2 left">タイトルが入ります</h2> <!-- h2は img-text-set 内に入れない様注意してください --> <div class="img-text-set"> <div class="text-area"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="img-area"> <figure> <img decoding="async" src="/assets/images/topics/bummy.jpg" alt=""> <figcaption>テキストテキスト</figcaption> </figure> </div>

・h2 + (画像+テキスト ）

タイトルが入ります

<h2 class="heading2 left">タイトルが入ります</h2> <!-- h2は img-text-set 内に入れない様注意してください --> <div class="img-text-set reverse"> <div class="text-area"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="img-area"> <figure> <img decoding="async" src="/assets/images/topics/bummy.jpg" alt=""> <figcaption>テキストテキスト</figcaption> </figure> </div>

・画像右（キャプション有り）

<div class="img-text-set"> <div class="text-area"> <h3 class="title">h3タイトル</h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="img-area"> <figure> <img decoding="async" src="/assets/images/topics/bummy.jpg" alt=""> <figcaption>テキストテキスト</figcaption> </figure> </div> </div>

h2は img-text-set の中に入れないでください。

h3タイトルが不要な場合は削除してください。

・画像左（キャプション有り）

<div class="img-text-set reverse"> <div class="text-area"> <h3 class="title">h3タイトル</h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="img-area"> <figure> <img decoding="async" src="/assets/images/topics/bummy.jpg" alt=""> <figcaption>テキストテキスト</figcaption> </figure> </div> </div>

h2は img-text-set の中に入れないでください。

h3タイトルが不要な場合は削除してください。

・「お客様の声」で使用 - 画像右

<div class="img-text-set"> <div class="text-area"> <!-- h3不要な場合は外してください --> <h3 class="title">h3タイトル</h3> <dl class="voice-list"> <dt>名前</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dt>名前</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dt>名前</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dt>名前</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> </div> <div class="img-area"> <figure> <img decoding="async" src="/assets/images/topics/bummy.jpg" alt=""> <figcaption>テキストテキスト</figcaption> </figure> </div> </div>

・「お客様の声」で使用 - 画像左

<div class="img-text-set reverse"> <div class="text-area"> <h3 class="title">h3タイトル</h3> <dl class="voice-list"> <dt>名前</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dt>名前</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dt>名前</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dt>名前</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> </div> <div class="img-area"> <figure> <img decoding="async" src="/assets/images/topics/bummy.jpg" alt=""> <figcaption>テキストテキスト</figcaption> </figure> </div> </div>

・画像が小さい時（テキストと画像 2:1）

<div class="text-box"> <div class="img-text-set"> <div class="text-area col2-3"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="img-area col1-3"> <img decoding="async" src="/assets/images/topics/ph_11_01.jpg" alt=""> </div> </div> </div>

「.text-box」は横幅900pxに設定するために使用しています。

・画像が小さい時（画像+テキスト 1:2）

<div class="text-box"> <div class="img-text-set reverse"> <div class="text-area col2-3"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="img-area col1-3"> <img decoding="async" src="/assets/images/topics/ph_11_01.jpg" alt=""> </div> </div> </div>

「.text-box」は横幅900pxに設定するために使用しています。

・画像が小さい時（テキスト+画像 3:1）

<div class="text-box"> <div class="img-text-set"> <div class="text-area col3-4"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="img-area col1-4"> <img decoding="async" src="/assets/images/topics/ph_11_01.jpg" alt=""> </div> </div> </div>

「.text-box」は横幅900pxに設定するために使用しています。

・画像が小さい時（画像+テキスト 1:3）

<div class="text-box"> <div class="img-text-set reverse"> <div class="text-area col3-4"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="img-area col1-4"> <img decoding="async" src="/assets/images/topics/ph_11_01.jpg" alt=""> </div> </div> </div>

[0-5_a]画像3つ

<div class="img-set"> <div class="img1-3"> <figure> <img decoding="async" src="/assets/images/topics/bummy.jpg" alt=""> <figcaption>テキストテキスト</figcaption> </figure> </div> <div class="img1-3"> <figure> <img decoding="async" src="/assets/images/topics/bummy.jpg" alt=""> <figcaption>テキストテキスト</figcaption> </figure> </div> <div class="img1-3"> <figure> <img decoding="async" src="/assets/images/topics/bummy.jpg" alt=""> <figcaption>テキストテキスト</figcaption> </figure> </div> </div>

[0-6] 画像

・画像左（キャプション有り）

<div class="img-block"> <figure class="img left"> <img decoding="async" src="/assets/images/topics/bummy.jpg" alt=""> <figcaption class="caption">テキストテキスト</figcaption> </figure> </div>

・画像中央（キャプション有り）

<div class="img-block"> <figure class="img center"> <img decoding="async" src="/assets/images/topics/bummy.jpg" alt=""> <figcaption class="caption">テキストテキスト</figcaption> </figure> </div>

・画像右（キャプション有り）

<div class="img-block"> <figure class="img right"> <img decoding="async" src="/assets/images/topics/bummy.jpg" alt=""> <figcaption class="caption">テキストテキスト</figcaption> </figure> </div>

[0-7] アコーディオン

Qテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

Aテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

Qテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

Aテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

Qテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

Aテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<dl class="faq"> <dt><span class="font-en">Q</span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<span class="btn-plus"></span></dt> <dd><span class="font-en">A</span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dt><span class="font-en">Q</span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<span class="btn-plus"></span></dt> <dd><span class="font-en">A</span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dt><span class="font-en">Q</span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<span class="btn-plus"></span></dt> <dd><span class="font-en">A</span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl>

[0-8] テーブル

<div class="text-box"> <dl class="dl-list"> <dt>社名</dt> <dd>株式会社JTBコミュニケーションデザイン<br>（英文名称：JTB Communication Design, Inc.）</dd> <dt>設立</dt> <dd>1988年4月8日<br>（2016年4月1日 株式会社JTBコミュニケーションデザインとして営業開始）</dd> <dt>拠点</dt> <dd>東京、大阪、名古屋、東北、北陸、福岡</dd> <dt>URL</dt> <dd><a class="icon-window" href="https://www.jtbcom.co.jp/">https://www.jtbcom.co.jp/</a></dd> </dl> </div>

「.text-box」→ 横幅900px用

「.dl-list」→ このスタイルのテーブル共通クラス

[0-9] サイトマップ

<div class="sitemap"> <dl class="sitemap-nav"> <dt class="sitemap-nav__title"><a href="#">周年事業</a></dt> <dd class="sitemap-nav__contents"> <ul class="sitemap-nav-list"> <li><a href="#">周年イベント</a></li> </ul> </dd> </dl> <dl class="sitemap-nav"> <dt class="sitemap-nav__title"><a href="#">企業イベント</a></dt> <dd class="sitemap-nav__contents"> <ul class="sitemap-nav-list"> <li><a href="#">表彰イベント</a></li> <li><a href="#">キックオフイベント</a></li> <li><a href="#">運動会・スポーツフェスティバル</a></li> <li><a href="#">インバウンド</a></li> <li><a href="#">チームビルディング</a></li> <li><a href="#">海外イベント</a></li> <li><a href="#">株主総会</a></li> <li><a href="#">カンファレンス・セミナー</a></li> </ul> </dd> </dl> <ul class="sitemap-nav"> <li class="sitemap-nav__title"><a href="#">セミナー情報</a></li> <li class="sitemap-nav__title"><a href="#">トピックス</a></li> <li class="sitemap-nav__title"><a href="#">コンサルタント</a></li> <li class="sitemap-nav__title"><a href="#">イベント事例</a></li> </ul> <ul class="sitemap-nav"> <li class="sitemap-nav__title"><a href="#">お客様の声</a></li> <li class="sitemap-nav__title"><a href="#">プロフェッショナル</a></li> <li class="sitemap-nav__title"><a href="#">お問い合わせ</a></li> <li class="sitemap-nav__title"><a href="#">メルマガ登録</a></li> </ul> <ul class="sitemap-nav"> <li class="sitemap-nav__title"><a href="#">コンセプト</a></li> <li class="sitemap-nav__title"><a href="#">会社情報</a></li> <li class="sitemap-nav__title"><a href="#" class="icon-window">アクセス</a></li> <li class="sitemap-nav__title"><a href="#" class="icon-window">運用会社</a></li> </ul> <ul class="sitemap-nav"> <li class="sitemap-nav__title"><a href="#" class="icon-window">個人情報保護方針</a></li> <li class="sitemap-nav__title"><a href="#" class="icon-window">ギネスワールドレコーズ公式サイト</a></li> </ul> </div>

[0-10]

・フォントサイズ