よくあるご質問 | スタイルガイド

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

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


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

基本レイアウト

基本レイアウトは「t-container」クラス内の「t-faq」クラス内に下記を参考に記述してください。
（※関連ファイル：jquery-3.4.1.min.js、faq.js）

よく見られているご質問

一二三四伍六七八九十一二三四伍六七八九十一二三四伍六

一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三

画像を表示

詳しくはこちら

一二三四伍六七八九十一二三四伍六七八九十一二三四伍六

一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三


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

      <div class="t-faq">
        <div class="t-faq-container">
          <div class="t-faq-category">
            <div class="t-faq-category-block">
              <div class="t-faq-category-title">
                <div class="t-faq-category-title-text">よく見られているご質問</div>
              </div><!-- .t-faq-category-title -->
              <div class="t-faq-item-container">
                <div class="t-faq-item">
                  <div class="t-faq-item-header">
                    <div class="t-faq-item-title">一二三四伍六七八九十一二三四伍六七八九十一二三四伍六</div>
                  </div><!-- /.t-faq-item-header -->
                  <div class="t-faq-item-collapse">
                    <p class="t-faq-item-text">一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三</p>
                    <div class="t-faq-item-image"><img src="../images/faq/img01.jpg" alt=""></div>
                    <div class="t-faq-item-image-controler">
                      <div class="t-faq-item-image-controler-text">画像を表示</div>
                    </div><!-- .t-faq-item-image-controler -->
                    <a href="javascript: void(0);" class="t-faq-item-link">
                      <div class="t-faq-item-link-text">詳しくはこちら</div>
                    </a>
                  </div><!-- /.t-faq-item-collapse -->
                </div><!-- /.t-faq-item -->
                <div class="t-faq-item">
                  <div class="t-faq-item-header">
                    <div class="t-faq-item-title">一二三四伍六七八九十一二三四伍六七八九十一二三四伍六</div>
                  </div><!-- /.t-faq-item-header -->
                  <div class="t-faq-item-collapse">
                    <p class="t-faq-item-text">一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三</p>
                  </div><!-- /.t-faq-item-collapse -->
                </div><!-- /.t-faq-item -->
              </div><!-- /.t-faq-item-container -->
            </div><!-- /.t-faq-category-block -->
          </div><!-- /.t-faq-category -->
        </div><!-- /.t-faq-container -->
      </div><!-- /.t-faq -->

    </section><!-- /.t-container -->
  </body>

中カテゴリがある場合

中カテゴリがある場合は「t-container」クラス内の「t-faq」クラス内に下記を参考に記述してください。
（※関連ファイル：jquery-3.4.1.min.js、faq.js）

カテゴリから探す

各種設定

メールアドレスの変更・再登録はどう行いますか？

一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三

画像を表示

詳しくはこちら

パスワードの変更はどう行いますか？

一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三

画像を表示

詳しくはこちら


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

      <div class="t-faq">
        <div class="t-faq-container">
          <div class="t-faq-category">
            <div class="t-faq-category-block">
              <div class="t-faq-category-title">
                <div class="t-faq-category-title-text">カテゴリから探す</div>
              </div><!-- .t-faq-category-title -->
              <div class="t-faq-subcategory-block">
                <div class="t-faq-subcategory-item">
                  <div class="t-faq-subcategory-title">
                    <div class="t-faq-category-title-text">各種設定</div>
                  </div><!-- .t-faq-subcategory-title -->
                  <div class="t-faq-item-container">
                    <div class="t-faq-item">
                      <div class="t-faq-item-header">
                        <div class="t-faq-item-title">メールアドレスの変更・再登録はどう行いますか？</div>
                      </div><!-- /.t-faq-item-header -->
                      <div class="t-faq-item-collapse">
                        <p class="t-faq-item-text">一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三</p>
                        <div class="t-faq-item-image"><img src="../images/faq/img01.jpg" alt=""></div>
                        <div class="t-faq-item-image-controler">
                          <div class="t-faq-item-image-controler-text">画像を表示</div>
                        </div><!-- .t-faq-item-image-controler -->
                        <a href="javascript: void(0);" class="t-faq-item-link">
                          <div class="t-faq-item-link-text">詳しくはこちら</div>
                        </a>
                      </div><!-- /.t-faq-item-collapse -->
                    </div><!-- /.t-faq-item -->
                    <div class="t-faq-item">
                      <div class="t-faq-item-header">
                        <div class="t-faq-item-title">パスワードの変更はどう行いますか？</div>
                      </div><!-- /.t-faq-item-header -->
                      <div class="t-faq-item-collapse">
                        <p class="t-faq-item-text">一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三四伍六七八九十一二三</p>
                        <div class="t-faq-item-image"><img src="../images/faq/img01.jpg" alt=""></div>
                        <div class="t-faq-item-image-controler">
                          <div class="t-faq-item-image-controler-text">画像を表示</div>
                        </div><!-- .t-faq-item-image-controler -->
                        <a href="javascript: void(0);" class="t-faq-item-link">
                          <div class="t-faq-item-link-text">詳しくはこちら</div>
                        </a>
                      </div><!-- /.t-faq-item-collapse -->
                    </div><!-- /.t-faq-item -->
                  </div><!-- /.t-faq-item-container -->
                </div><!-- /.t-faq-subcategory-item -->
              </div><!-- /.t-faq-subcategory-block -->
            </div><!-- /.t-faq-category-block -->
          </div><!-- /.t-faq-category -->
        </div><!-- /.t-faq-container -->
      </div><!-- /.t-faq -->

    </section><!-- /.t-container -->
  </body>