noindex: true

パーツリスト

■ぱんくず

通常

<nav class="l-breadcrumb">
  <ul>
    <li><a href="/">トップ</a></li>
    <li>パーツリスト</li>
  </ul>
</nav>
<!-- カテゴリトップ（第2階層）の場合は、bodyタグにclass="is-categorytop"を付与 -->

■カテゴリトップ（第2階層）H1

対応決済サービス

ペイジェントの特徴

安全性・サポート

導入事例

ネットショップ開業コラム

<div class="c-heading--categorytop is-service">
  <h1 class="c-heading--lv1 c-heading--categorytop--lv1">対応決済サービス</h1>
</div>
<div class="c-heading--categorytop is-payment_service">
  <h1 class="c-heading--lv1 c-heading--categorytop--lv1">ペイジェントの特徴</h1>
</div>
<div class="c-heading--categorytop is-safety">
  <h1 class="c-heading--lv1 c-heading--categorytop--lv1">安全性・サポート</h1>
</div>
<div class="c-heading--categorytop is-result">
  <h1 class="c-heading--lv1 c-heading--categorytop--lv1">導入事例</h1>
</div>
<div class="c-heading--categorytop is-success_guide">
  <h1 class="c-heading--lv1 c-heading--categorytop--lv1">ネットショップ開業コラム</h1>
</div>
<!-- カテゴリトップ（第2階層）の場合は、bodyタグにclass="is-categorytop"を付与 -->

■H1～4

H1-テキストテキストテキストテキストテキストテキストテキストテキ

<h1 class="c-heading--lv1">H1-テキストテキストテキストテキストテキストテキストテキストテキ</h1>

H2-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス

<h2 class="c-heading--lv2">H2-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス</h2>

H3-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<h3 class="c-heading--lv3">H3-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h3>

H4-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ

<h4 class="c-heading--lv4">H4-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ</h4>

■テキストボックス

テキストボックス - 1カラム

1カラム-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキスト

<div class="c-text01">
  <p>1カラム-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキスト</p>
</div>
<!-- pタグを.l-container--contentsの子要素として配置しても、同様のスタイルを適用できます。-->

テキストボックス - 2カラム

2カラム-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="c-grid-pc is-col2-pc is-gutter72-pc">
  <div class="c-grid__unit">
    <div class="c-text01">
      <p>2カラム-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
  <div class="c-grid__unit">
    <div class="c-text01">
      <p>2カラム-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
</div>

テキストボックス - 3カラム

3カラム-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="c-grid-pc is-col3-pc is-gutter72-pc">
  <div class="c-grid__unit">
    <div class="c-text01">
      <p>3カラム-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
  <div class="c-grid__unit">
    <div class="c-text01">
      <p>3カラム-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
  <div class="c-grid__unit">
    <div class="c-text01">
      <p>3カラム-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
</div>

注釈 - 1カラム

（注）-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキスト

<p class="c-notes01">（注）-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキスト</p>

注釈 - 2カラム

<div class="c-grid-pc is-col2-pc is-gutter72-pc">
  <div class="c-grid__unit">
    <p class="c-notes01">（注）-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="c-grid__unit">
    <p class="c-notes01">（注）-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
</div>

注釈 - 3カラム

（注）-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="c-grid-pc is-col3-pc is-gutter72-pc">
  <div class="c-grid__unit">
    <p class="c-notes01">（注）-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="c-grid__unit">
    <p class="c-notes01">（注）-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="c-grid__unit">
    <p class="c-notes01">（注）-テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
</div>

■テキスト-寄せ

左寄せ、中央寄せ、右寄せ

テキスト-左寄せ

（注）-左寄せ

テキスト-中央寄せ

（注）-中央寄せ

テキスト-右寄せ

（注）-右寄せ

<div class="c-grid-pc is-col3-pc is-gutter72-pc">
  <div class="c-grid__unit">
    <div class="c-text01">
      <p>テキスト-左寄せ</p>
    </div>
    <p class="c-notes01">（注）-左寄せ</p>
  </div>
  <div class="c-grid__unit">
    <div class="c-text01 u-alignC">
      <p>テキスト-中央寄せ</p>
    </div>
    <p class="c-notes01 u-alignC">（注）-中央寄せ</p>
  </div>
  <div class="c-grid__unit">
    <div class="c-text01 u-alignR">
      <p>テキスト-右寄せ</p>
    </div>
    <p class="c-notes01 u-alignR">（注）-右寄せ</p>
  </div>
</div>

■画像

画像 - 1カラム

<div class="c-imageText__picture--top"><img src="http://placehold.jp/24/ececec/000000/1200x510.png?text=1枚-image"></div>

画像 - 2カラム

<div class="c-grid-pc is-col2-pc is-gutter72-pc">
  <div class="c-grid__unit">
    <div class="c-imageText__picture--top"><img src="http://placehold.jp/24/ececec/000000/564x400.png?text=左寄せ-image"></div>
  </div>
  <div class="c-grid__unit">
    <div class="c-imageText__picture--top"><img src="http://placehold.jp/24/ececec/000000/564x400.png?text=右寄せ-image"></div>
  </div>
</div>

画像 - 3カラム

<div class="c-grid-pc is-col3-pc is-gutter72-pc">
  <div class="c-grid__unit">
    <div class="c-imageText__picture--top"><img src="http://placehold.jp/24/ececec/000000/352x250.png?text=左寄せ-image"></div>
  </div>
  <div class="c-grid__unit">
    <div class="c-imageText__picture--top"><img src="http://placehold.jp/24/ececec/000000/352x250.png?text=中央寄せ-image"></div>
  </div>
  <div class="c-grid__unit">
    <div class="c-imageText__picture--top"><img src="http://placehold.jp/24/ececec/000000/352x250.png?text=右寄せ-image"></div>
  </div>
</div>

■リンク

アンカーリンク

<ul class="c-link--anchor">
  <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>

テキストリンク

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

テキストリンク
 テキストリンク
 テキストリンク

<div class="c-text01">
  <p><a href="#" class="c-link">テキストテキストテキスト</a></p>
</div>
<ul class="c-list--link">
  <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>
<div class="c-text01">
  <p><a href="#" class="c-link is-pdf">テキストリンク</a><br><a href="#" class="c-link is-external">テキストリンク</a><br><a href="#" class="c-link is-zip">テキストリンク</a></p>
</div>

■ボタン

コンバージョンボタン

<div class="u-alignC-sp"><a class="c-button--cv" href="#">コンバージョンボタン</a></div>

リンクボタン

<div class="u-alignC-sp"><a class="c-button icon-arrow-right" href="#">リンクボタン</a></div>

戻るボタン

戻る

<div class="u-alignC-sp"><a class="c-button--back" href="#">戻る</a></div>

■テーブル

テーブル - 4カラム

見出し 1	見出し 1	見出し 1	見出し 1
見出し 2	見出し 2	見出し 2	見出し 2
テキスト	テキスト	テキスト	テキスト

<table class="c-table">
  <thead>
    <tr>
      <th>見出し 1</th>
      <th>見出し 1</th>
      <th>見出し 1</th>
      <th>見出し 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>見出し 2</th>
      <th>見出し 2</th>
      <th>見出し 2</th>
      <th>見出し 2</th>
    </tr>
    <tr>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
  </tbody>
</table>

テーブル - 5カラム（SPのみスクロール）

見出し 1	見出し 1	見出し 1	見出し 1	見出し 1
見出し 2	見出し 2	見出し 2	見出し 2	見出し 2
テキスト	テキスト	テキスト	テキスト	テキスト

<div class="c-table-scroll">
  <table class="c-table">
    <thead>
      <tr>
        <th>見出し 1</th>
        <th>見出し 1</th>
        <th>見出し 1</th>
        <th>見出し 1</th>
        <th>見出し 1</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>見出し 2</th>
        <th>見出し 2</th>
        <th>見出し 2</th>
        <th>見出し 2</th>
        <th>見出し 2</th>
      </tr>
      <tr>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
      </tr>
    </tbody>
  </table>
</div>

テーブル - 2カラム

見出し 1	見出し 1
見出し 2	見出し 2
テキスト	テキスト

<table class="c-table">
  <thead>
    <tr>
      <th>見出し 1</th>
      <th>見出し 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>見出し 2</th>
      <th>見出し 2</th>
    </tr>
    <tr>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
  </tbody>
</table>

テーブル - 1カラム

見出し 1
見出し 2
テキスト

<table class="c-table">
  <thead>
    <tr>
      <th>見出し 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>見出し 2</th>
    </tr>
    <tr>
      <td>テキスト</td>
    </tr>
  </tbody>
</table>

テーブル - 別タイプ

	見出し 1	見出し 1
見出し 2	テキスト	テキスト
見出し 2	テキスト	テキスト

<table class="c-table">
  <thead>
    <tr>
      <th></th>
      <th>見出し 1</th>
      <th>見出し 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>見出し 2</th>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th>見出し 2</th>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
  </tbody>
</table>

■リスト

順不同リスト

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

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

順リスト

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

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

■各種パーツ

サービス一覧パーツ

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

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

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

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

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

<div class="c-card01">
  <div class="c-card01__head">
    <div class="c-card01__image"><img src="http://placehold.jp/24/ececec/000000/352x180.png?text=image"></div>
  </div>
  <div class="c-card01__body">
    <p class="c-card01__title"><a href="#">テキストテキストテキスト</a></p>
    <div class="c-card01__text">
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p><a href="#">テキストテキストテキスト</a></p>
    </div>
  </div>
</div>
<div class="c-card01">
  <div class="c-card01__head">
    <p class="c-card01__title"><a href="#">テキストテキストテキスト</a></p>
  </div>
  <div class="c-card01__body">
    <div class="c-card01__text">
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテテキストテキストテキ</p>
    </div>
  </div>
</div>
<div class="c-card01 is-vcenter">
  <div class="c-card01__head">
    <div class="c-card01__image"><img src="http://placehold.jp/24/ececec/000000/352x180.png?text=image"></div>
  </div>
  <div class="c-card01__body">
    <p class="c-card01__title"><a href="#">テキストテキストテキスト</a></p>
  </div>
</div>

対応決済サービスパーツ

テキストテキストテキスト（H3）

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

テキストリンク

テキストテキストテキスト（H3）

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

リストリストリスト
リストリストリスト
リストリストリスト
リストリストリスト

テキストテキストテキスト（H3）

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

<div class="p-service__item-wrap">
  <div class="p-service__item">
    <a href="#">テキストテキストテキスト（H3）</a>
    <div class="p-service__item__img"><img src="http://placehold.jp/24/ececec/000000/352x180.png?text=image" alt="テキストテキストテキスト（H3）" ></div>
    <div class="p-service__item__text">
      <h3 class="p-service__heading--lv3">テキストテキストテキスト（H3）</h3>
      <p>テキストテキストテキストテキストテキストテキ</p>
      <ul class="c-list--link">
        <li><a href="#"><i class="c-link__icon c-list__icon"></i>テキストリンク</a></li>
      </ul>
    </div>
  </div>
  <div class="p-service__item">
    <a href="#">テキストテキストテキスト（H3）</a>
    <div class="p-service__item__img"><img src="http://placehold.jp/24/ececec/000000/352x180.png?text=image" alt="テキストテキストテキスト（H3）" ></div>
    <div class="p-service__item__text">
      <h3 class="p-service__heading--lv3">テキストテキストテキスト（H3）</h3>
      <p>テキストテキストテキストテキストテキストテキ</p>
      <ul class="c-list">
        <li>リストリストリスト</li>
        <li>リストリストリスト</li>
        <li>リストリストリスト</li>
        <li>リストリストリスト</li>
      </ul>
    </div>
  </div>
  <div class="p-service__item">
    <a href="#">テキストテキストテキスト（H3）</a>
    <div class="p-service__item__img"><img src="http://placehold.jp/24/ececec/000000/352x180.png?text=image" alt="テキストテキストテキスト（H3）" ></div>
    <div class="p-service__item__text">
      <h3 class="p-service__heading--lv3">テキストテキストテキスト（H3）</h3>
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
</div>

テキストテキストテキスト（H3）

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

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

<section class="p-service__frame js-effect c-effect01 is-effectActive" id="service-16">
  <div class="p-service__frame__inner">
    <h2 class="p-service__frame__title">テキストテキストテキスト（H3）</h2>
    <div class="p-service__frame__image"><img src="http://placehold.jp/24/ececec/000000/575x210.png?text=image"></div>
    <div class="p-service__frame__text">
      <p>テキストテキストテキストテキストテキストテキスト</p>
    </div>
    <div class="p-service__frame__button"><a href="#">テキストテキストテキスト<br>テキストテキストテキスト</a></div>
  </div><!-- /p-service__frame__inner -->
</section>

タブパーツ

特徴コンテンツ

アンカーリンク1
アンカーリンク2

アンカーリンク1

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

アンカーリンク2

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

導入方法コンテンツ

ニーズコンテンツ

<div class="c-tab">
  <ul class="c-tab__nav">
    <li class="c-tab__nav__item is-active" data-js="change-tab" data-tab="1">特徴</li>
    <li class="c-tab__nav__item" data-js="change-tab" data-tab="2">詳細</li>
    <li class="c-tab__nav__item" data-js="change-tab" data-tab="3">導入方法</li>
    <li class="c-tab__nav__item" data-js="change-tab" data-tab="4">ニーズ</li>
  </ul>
  <div class="c-tab__content__outer">
    <div class="c-tab__content" data-tab-content="1">
      <div class="c-tab__content__inner">
        <div class="l-container--contents">
          <p>特徴コンテンツ</p>
        </div>
      </div>
    </div>
    <div class="c-tab__content" data-tab-content="2">
      <div class="c-tab__content__inner">
        <ul class="c-link--anchor">
          <li><a href="#sec01" class="js-scroll">アンカーリンク1</a></li>
          <li><a href="#sec02" class="js-scroll">アンカーリンク2</a></li>
        </ul>
        <div class="l-container--contents">
          <h3 class="c-heading--lv3" id="sec01">アンカーリンク1</h3>
          <div class="c-text01">
            <p>テキストテキストテキストテキスト</p>
          </div>
        </div>
        <div class="l-container--contents">
          <h3 class="c-heading--lv3" id="sec02">アンカーリンク2</h3>
          <div class="c-text01">
            <p>テキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
    </div>
    <div class="c-tab__content" data-tab-content="3">
      <div class="c-tab__content__inner">
        <div class="l-container--contents">
          <p>導入方法コンテンツ</p>
        </div>
      </div>
    </div>
    <div class="c-tab__content" data-tab-content="4">
      <div class="c-tab__content__inner">
        <div class="l-container--contents">
          <p>ニーズコンテンツ</p>
        </div>
      </div>
    </div>
  </div>
</div>

タブパーツ（均等幅）※JS動作なし

<div class="c-tab">
  <ul class="c-tab__nav is-eq">
    <li class="c-tab__nav__item is-active">特徴</li>
    <li class="c-tab__nav__item">詳細</li>
    <li class="c-tab__nav__item">導入方法</li>
  </ul>
</div>

タブパーツ（自動幅）※JS動作なし

<div class="c-tab">
  <ul class="c-tab__nav is-auto">
    <li class="c-tab__nav__item is-active">都市銀行・ネットバンク</li>
    <li class="c-tab__nav__item">地方銀行</li>
    <li class="c-tab__nav__item">信用金庫</li>
    <li class="c-tab__nav__item">ゆうちょ銀行・労働金庫・農協・漁協</li>
  </ul>
</div>

■フォーム用パーツ

テキスト入力系

項目名必須: テキストテキストテキストテキストテキスト

項目名必須: テキストテキストテキストテキストテキスト

項目名

<div class="c-form__inner c-table--dl p-contact__table">
  <dl>
    <dt>項目名<span class="c-form-required">必須</span></dt>
    <dd>
      <input class="c-form-input" id="input1" name="input1" placeholder="例）テキストテキストテキスト" type="text" value="">
      <span class="c-form-text">テキストテキストテキストテキストテキスト</span>
    </dd>
  </dl>
  <dl>
    <dt>項目名<span class="c-form-required">必須</span></dt>
    <dd>
      <input class="c-form-input" id="input2" name="input2" placeholder="例）テキストテキストテキスト 太郎" type="text" value="">
      <span class="c-form-text">テキストテキストテキストテキストテキスト</span>
    </dd>
  </dl>
  <dl>
    <dt>項目名</dt>
    <dd>
      <textarea class="c-form-input--textarea errPosRight" cols="60" id="textarea1" name="" placeholder="例）テキストテキストテキスト" rows="4"></textarea>
    </dd>
  </dl>
</div>

ドロップダウン系

項目名必須: ご希望のサービスをお選びください。

項目名必須: ご希望のサービスをお選びください。

<div class="c-form__inner c-table--dl p-contact__table">
  <dl>
    <dt>項目名<span class="c-form-required">必須</span></dt>
    <dd>
      <span class="c-form-text">ご希望のサービスをお選びください。</span>
      <select class="c-form-select" id="" name="">
        <option label="選択なし" value="">選択なし</option>
      </select>
    </dd>
  </dl>
  <dl>
    <dt>項目名<span class="c-form-required">必須</span></dt>
    <dd>
      <span class="c-form-text">ご希望のサービスをお選びください。</span>
      <select class="c-form-select" id="" name="">
        <option label="選択なし" value="">選択なし</option>
      </select>
    </dd>
  </dl>
</div>

チェックボックス系

セキュリティチェック必須

<div class="c-form__inner c-table--dl p-contact__table">
  <dl>
    <dt>検討中の決済手段<span class="c-form-required">必須</span></dt>
    <dd>
      <span class="c-form-text">※複数選択可能</span>
      <details class="c-form-details">
        <summary>決済手段選択</summary>
        <div class="c-form__inner">
          <ul class="c-form-toggle__list">
            <li><label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="クレジットカード（都度決済）">クレジットカード（都度決済）</label></li>
            <li><label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="クレジットカード（継続課金）">クレジットカード（継続課金）</label></li>
            <li><label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="外貨建てクレジットカード決済（海外向け）">外貨建てクレジットカード決済（海外向け）</label></li>
            <li><label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="銀行ネット（ネットバンキング）">銀行ネット（ネットバンキング）</label></li>
            <li><label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="銀行ATM（ペイジー）">銀行ATM（ペイジー）</label></li>
            <li>
              <label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="後払い決済">後払い決済</label>
              <span class="c-form-toggle__attention">※法人様、物品販売のみご契約可</span>
            </li>
            <li><label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="Paidy">Paidy</label></li>
            <li>
              <label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="コンビニ番号方式">コンビニ番号方式</label>
              <span class="c-form-toggle__attention">※法人様のみご契約可</span>
            </li>
            <li><label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="コンビニ払込票">コンビニ払込票</label></li>
            <li>
              <label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="キャリア決済">キャリア決済</label>
              <span class="c-form-toggle__attention">※法人様のみご契約可</span>
            </li>
            <li>
              <label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="電子マネー（Webmoney）">電子マネー（Webmoney）</label>
              <span class="c-form-toggle__attention">※法人様のみご契約可</span>
            </li>
            <li>
              <label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="銀行振込決済（仮想口座方式）">銀行振込決済（仮想口座方式）</label>
              <span class="c-form-toggle__attention">※法人様のみご契約可</span>
            </li>
            <li>
              <label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="口座振替">口座振替</label>
              <span class="c-form-toggle__attention">※法人様のみご契約可</span>
            </li>
            <li><label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="銀聯ネット決済">銀聯ネット決済</label></li>
            <li><label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="Alipay国際決済">Alipay国際決済</label></li>
            <li>
              <label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="楽天ペイ（オンライン決済）">楽天ペイ（オンライン決済）</label>
              <span class="c-form-toggle__attention">※法人様のみご契約可</span>
            </li>
            <li><label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="Apple Pay">Apple Pay</label></li>
            <li><label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="GooglePay">GooglePay</label></li>
            <li><label class="c-form-toggle__label"><input class="c-form-toggle__checkbox" id="cb_03_01" name="00N10000001eDMz" type="checkbox" value="未定">未定</label></li>
          </ul>
        </div>
      </details>
    </dd>
  </dl>
</div>
<div class="c-form__inner c-table--dl is-type2 p-contact__table">
  <dl>
    <dt>セキュリティチェック<span class="c-form-required">必須</span></dt>
    <dd>
      <!-- GACLIENTID --><input id="00N10000008rHp2" maxlength="50" name="00N10000008rHp2" size="20" type="hidden">
      <!-- GACLIENTID --><div class="g-recaptcha" data-callback="authSuccess" data-expired-callback="authTimeout" data-sitekey="6LfczbgUAAAAACebg9qrkEKjllEnsI9FGmcpD673" error-callback="authError" id="recaptcha"></div>
    </dd>
  </dl>
</div>

ラジオボタン系

初めてのお問い合わせですか？必須

新規のお問い合わせの方
既にお問い合わせをしている方

秘密保持規約への同意必須

秘密保持規約（NDA）に同意する

株式会社ペイジェントが提供する決済代行サービスのシステム仕様書のダウンロードの請求をされる方は、秘密保持規約に同意する必要があります。
同意される方はチェックボックスにチェックを入れてください。

<div class="c-form__inner c-table--dl p-contact__table">
  <dl>
    <dt>初めてのお問い合わせですか？<span class="c-form-required">必須</span></dt>
    <dd>
      <ul class="c-form-toggle__list--inline">
        <li><label><input class="c-form-toggle__radio errPosRight" id="cb_12_01" name="cb_12" required="" type="radio" value="新規のお問い合わせの方">新規のお問い合わせの方</label></li>
        <li><label><input class="c-form-toggle__radio errPosRight" id="cb_12_02" name="cb_12" type="radio" value="既にお問い合わせをしている方">既にお問い合わせをしている方</label></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt>秘密保持規約への同意<span class="c-form-required">必須</span></dt>
    <dd>
      <ul class="c-form-toggle__list--inline">
        <li><span id="checkradio" class="chkradio errPosRight"><label><input class="c-form-toggle__radio errPosRight" id="radio" name="cb_11" type="radio" value="秘密保持規約（NDA）に同意する">秘密保持規約（NDA）に同意する</label><input name="00N1000000470pw" type="hidden" value="1" class="errPosRight"> <input name="init" type="hidden" value="2" class="errPosRight"> <input name="text_03" type="hidden" value="1" class="errPosRight"></span></li>
      </ul>
      <p class="c-form-text">株式会社ペイジェントが提供する決済代行サービスのシステム仕様書のダウンロードの請求をされる方は、<a rel="noopener" href="https://www.paygent.co.jp/contact/detail/nda/" target="_blank">秘密保持規約</a>に同意する必要があります。<br>
      同意される方はチェックボックスにチェックを入れてください。</p>
    </dd>
  </dl>
</div>