タブ切り替え
（colボタンver.）

colをボタンとしてタブを切り替える

※デザインにより工数変動あり

追加可能パーツ 変更可能箇所 変更NG 同一ページに複数設置 ページ複製・
クリップボード使用可否

■タブ
（カラムに設置可能なパーツ）

  • リッチテキストパーツ
  • 見出しパーツ
  • 画像パーツ


■タブコンテンツ
（セクションに設置可能なパーツ）

  • 行
  • カラム
  • デザインパーツ
  • タブの数※1
    （編集画面で増減可能。一段につき4個まで/5個以上は2段）
  • タブの背景色/テキストカラー/余白
  • タブボタンのデザイン
  • タブコンテンツ部分の背景色
  • タブコンテンツ部分の背景色を顧客側で変更※2
 〇 〇
※留意事項

※1：タブ用のカラム（col）を増やす際には、クラス「js-tabNav_col」を付与する必要あり。
※2：構造上、タブコンテンツエリアの背景色をinnerで指定しているため、顧客側で後から色を変更することはできません。
また、セクションの背景色が白だった場合はタブ切り替えパーツと同化して境界線がなくなってしまうため、顧客側でパーツを複製・配置される際はご注意ください。（元々タブコンテンツエリアの色が白以外の場合は特に問題ありません）
※タブエリアとタブコンテンツエリアのセクションが分かれる形になります。
※SP時はタブ部分がスクロールします。2段の場合は縦並びになります。（初期設定なのでCSSで適宜変更可）
※タブ切り替え（リストボタンver.）と比べて置けるパーツの自由度は高いです。

フェレットワンで管理されたページのコンテンツ量の上限は、カラムにして大体150カラムが上限です。（個社ごとの扱い方によって変動します）
このタブ切り替えパーツでは、多くの情報をタブに分割・格納するパーツである特徴から、データ量の上限にあたりやすい特性を持ちます。
データ量の上限にあたると、「変更を保存できませんでした」というメッセージが表示されます。
上記のエラーメッセージが表示された場合、パーツや行、カラム数を減らしていただく必要がございますので予めご了承ください。

構造図を見る

2タブ デモ

タブメニュー１

タブメニュー2

タブ切り替えセクション01

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

ダミー

機能１の見出し（h3）

ダミー

機能２の見出し（h3）

ダミー

機能3の見出し（h3）

サービスについて

タブ切り替えセクション02

・ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
・ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
・ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
・ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

3タブ デモ

タブメニュー１

タブメニュー2

タブメニュー3

タブ切り替えセクション01

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

・ ○○ができていない○○ができていない

・ ○○を改善したい○○を改善したい

・ ○○に不満を感じている○○に不満を感じている

サービスについて

タブ切り替えセクション02

  • ○○ができていない
  • ○○を改善したい
  • ○○に不満を感じている

タブ切り替えセクション03

  • ○○ができていない
  • ○○を改善したい
  • ○○に不満を感じている

4タブ デモ

タブメニュー１

タブメニュー2

タブメニュー3

タブメニュー4

タブ切り替えセクション01

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

ダミー

機能１の見出し（h3）

ダミー

機能２の見出し（h3）

ダミー

機能3の見出し（h3）

サービスについて

タブ切り替えセクション02

  • ○○ができていない
  • ○○を改善したい
  • ○○に不満を感じている

タブ切り替えセクション03

  • ○○ができていない
  • ○○を改善したい
  • ○○に不満を感じている

タブ切り替えセクション04

  • ○○ができていない
  • ○○を改善したい
  • ○○に不満を感じている

5タブ デモ

※上段3タブ、下段2タブも可能

タブメニュー１

タブメニュー2

タブメニュー3

タブメニュー4

タブメニュー5

タブ切り替えセクション01

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

・ 〇〇〇〇〇〇〇〇〇を改善したい企業様
・ 〇〇〇〇〇〇〇〇〇にお困りの担当者様
・ 〇〇〇〇〇〇〇〇〇に興味がある方

サービスについて

タブ切り替えセクション02

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

ダミー

機能１の見出し（h3）

ダミー

機能２の見出し（h3）

ダミー

機能3の見出し（h3）

サービスについて

タブ切り替えセクション03

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション04

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション05

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

6タブ（3タブの2行） デモ

タブメニュー１

タブメニュー2

タブメニュー3

タブメニュー4

タブメニュー5

タブメニュー6

タブ切り替えセクション01

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

・ 〇〇〇〇〇〇〇〇〇を改善したい企業様
・ 〇〇〇〇〇〇〇〇〇にお困りの担当者様
・ 〇〇〇〇〇〇〇〇〇に興味がある方

サービスについて

タブ切り替えセクション02

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション03

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション04

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション05

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション06

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

6タブ（4タブ・2タブの2行） デモ

※上段2タブ、下段4タブも可能

タブメニュー１

タブメニュー2

タブメニュー3

タブメニュー4

タブメニュー5

タブメニュー6

タブ切り替えセクション01

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション02

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション03

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション04

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション05

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション06

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

7タブ デモ

※上段3タブ、下段4タブも可能

タブメニュー１

タブメニュー2

タブメニュー3

タブメニュー4

タブメニュー5

タブメニュー6

タブメニュー7

タブ切り替えセクション01

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション02

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション03

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション04

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション05

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション06

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

タブ切り替えセクション06

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

サービスについて

8タブ デモ

タブメニュー１

タブメニュー2

タブメニュー3

タブメニュー4

タブメニュー5

タブメニュー6

タブメニュー7

タブメニュー8

タブ切り替えセクション01

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

・ 〇〇〇〇〇〇〇〇〇を改善したい企業様
・ 〇〇〇〇〇〇〇〇〇にお困りの担当者様
・ 〇〇〇〇〇〇〇〇〇に興味がある方

サービスについて

タブ切り替えセクション02

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

・ 〇〇〇〇〇〇〇〇〇を改善したい企業様
・ 〇〇〇〇〇〇〇〇〇にお困りの担当者様
・ 〇〇〇〇〇〇〇〇〇に興味がある方

サービスについて

タブ切り替えセクション03

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

・ 〇〇〇〇〇〇〇〇〇を改善したい企業様
・ 〇〇〇〇〇〇〇〇〇にお困りの担当者様
・ 〇〇〇〇〇〇〇〇〇に興味がある方

サービスについて

タブ切り替えセクション04

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

・ 〇〇〇〇〇〇〇〇〇を改善したい企業様
・ 〇〇〇〇〇〇〇〇〇にお困りの担当者様
・ 〇〇〇〇〇〇〇〇〇に興味がある方

サービスについて

タブ切り替えセクション05

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

・ 〇〇〇〇〇〇〇〇〇を改善したい企業様
・ 〇〇〇〇〇〇〇〇〇にお困りの担当者様
・ 〇〇〇〇〇〇〇〇〇に興味がある方

サービスについて

タブ切り替えセクション06

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

・ 〇〇〇〇〇〇〇〇〇を改善したい企業様
・ 〇〇〇〇〇〇〇〇〇にお困りの担当者様
・ 〇〇〇〇〇〇〇〇〇に興味がある方

サービスについて

タブ切り替えセクション07

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

・ 〇〇〇〇〇〇〇〇〇を改善したい企業様
・ 〇〇〇〇〇〇〇〇〇にお困りの担当者様
・ 〇〇〇〇〇〇〇〇〇に興味がある方

サービスについて

タブ切り替えセクション08

サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。

・ 〇〇〇〇〇〇〇〇〇を改善したい企業様
・ 〇〇〇〇〇〇〇〇〇にお困りの担当者様
・ 〇〇〇〇〇〇〇〇〇に興味がある方

サービスについて

構造図

デモのパーツの構造を説明しています。

構造図_タブ切り替え（複数対応）

設定方法

  • CSSをカスタムCSSに記述。
  • 編集画面用CSSを適切な位置に記述。
  • JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
  • クラス名を見本とあわせる。
  1. セクションを新規作成し、クラス名「tabNav_sec js-tabNav_sec」の２つを追加。[=タブエリア]
  2. 上記セクション内に新規行（row）を作成し、クラス名「tabNav_row」を追加。
  3. 上記行を配置したいタブの数だけ分割し、全てのカラム（col）にクラス名「js-tabNav_col」を追加。[=トリガー要素]
    ※4カラムまでしか分割できないため、5個以上置きたい場合は、2カラムor3カラムにして行ごと複製し、2段で構築するなどして下さい。※デモ参照
    ※中のテキストは適宜設定してください。
  4. 上記セクションのすぐ下にタブコンテンツ表示用のセクションを新規作成し、クラス名「tab_sec js-tab_sec」を追加。
    ※セクションの背景色は上で用意したタブエリア用のセクションと同じ色に設定してください。
    ※コンテンツ部分の背景色はカスタムCSSにて、innerに対して指定してください。
  5. 上で用意したタブ切り替え用のボタン（カラム）「js-tabNav_col」の並び順とセクション「tab_sec js-tab_sec」の配置順が連動しているので、タブ切り替え用のボタン（カラム）の数だけセクションを下に順番に追加していってください。
    ※構造図参照
  6. SP時はタブ切り替え用のボタンを横スクロールさせています。ボタンが5個以上（行が2段以上）ある場合は「tabNav_row」にオプションクラス「tiered」を追加することで、SP時にタブが縦に並ぶようになります。

※デフォルトではSP時タブ部分がスクロールします。2段の場合は縦並びになります。（CSSで適宜変更可能）
※後からタブ切り替え用のボタン（カラム）を増やす場合、必ずクラス名「js-tabNav_col」を忘れずに追加してください。

  • 新CMSの場合：基本デザインパーツ（セクションパーツ、複合パーツ、単体パーツ）を使用して問題ありません。

注意点

  • innerの背景色はカスタムCSSから変更可能です。
  • タブ切り替え用セクションの間にタブ切り替え以外のセクションを配置しないでください。
  • スマホ編集画面機能との併用はできません。

JS・CSS・編集画面用CSS

  • JS
  • CSS
  • 編集画面用CSS
JSをコピーする

2025-06-20更新（v1.0.0）

<script>
/* ---------------------------------
タブ切り替え（colボタンver.）v1.0.0
--------------------------------- */
'use strict';

document.addEventListener('DOMContentLoaded', function () {
/* ------------- 変数定義 【変更可能】 START ------------- */
const tabNavSec = document.querySelectorAll('.js-tabNav_sec'); /* タブ切り替えのボタンが入ったセクション */
const tabNavBtn = document.querySelectorAll('.js-tabNav_col'); /* タブ切り替えのボタン */
const tabSec = document.querySelectorAll('.js-tab_sec'); /* 切り替え対象のセクション */
/* ------------- 変数定義 【変更可能】 END ------------- */

/* data属性を付与する関数 */
function assignDataAttributes() {
tabNavSec.forEach((navSec, i) => {
const tabNavButtons = navSec.querySelectorAll('.js-tabNav_col');
const tabSections = document.querySelectorAll('.js-tab_sec:not(.finish)');
tabNavButtons.forEach((button, m) => {
button.setAttribute('data-tab-target', `${i + 1}`);
button.setAttribute('data-tab-id', `${m + 1}`);
tabSections[m].setAttribute('data-tab-target', `${i + 1}`);
tabSections[m].classList.add('finish');
});
});
tabSec.forEach(sec => sec.classList.remove('finish')); /* 全て処理が終わったら.finishを外す */
}

/* 初期設定を行う関数 */
function initializeTabs() {
tabNavSec.forEach((navSec, index) => {
const targetSec = document.querySelectorAll(`.js-tab_sec[data-tab-target="${index + 1}"]`);
const targetBtn = document.querySelectorAll(`.js-tabNav_col[data-tab-target="${index + 1}"]`);
if (targetSec.length > 0) {
targetSec[0].style.display = 'block';
targetSec[0].classList.add('is-active');
}
if (targetBtn.length > 0) {
targetBtn[0].classList.add('is-active');
}
});
}

/* タブ切り替え用のクリックイベントを設定する関数 */
function setupTabClickEvents() {
tabNavBtn.forEach(button => {
button.addEventListener('click', function () {
const targetNumber = this.getAttribute('data-tab-target');
const targetId = this.getAttribute('data-tab-id') - 1;

const targetSec = document.querySelectorAll(`.js-tab_sec[data-tab-target="${targetNumber}"]`);
const targetBtn = document.querySelectorAll(`.js-tabNav_col[data-tab-target="${targetNumber}"]`);

targetSec.forEach(sec => {
sec.style.display = 'none';
sec.classList.remove('is-active');
});
targetBtn.forEach(btn => btn.classList.remove('is-active'));

this.classList.add('is-active');
if (targetSec[targetId]) {
targetSec[targetId].style.display = 'block';
targetSec[targetId].classList.add('is-active');
}
});
});
}

/* 初期化処理 */
assignDataAttributes();
initializeTabs();
setupTabClickEvents();
});
/* ---------------------------------
タブ切り替え（colボタンver.） END
--------------------------------- */
</script>

CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。

CSSをコピーする

2023-07-18更新（v1.0.0）

/*----- タブ切り替え（colボタンver.） START v1.0.0-----*/
.theme-fo-base .wrapper .contents {
:is(section, section[data-designpart-id]:not(:root:root:root:root)) {
// タブ切り替え ボタンエリア
&.tabNav_sec {
padding-bottom: 0;
& + .tab_sec {
display: block; // １つ目のタブコンテンツだけ初期読み込み時に表示
}
.inner {
padding-bottom: 0;
.row {
&.tabNav_row {
display: flex;
gap: 5px;
@include breakpoint-pc {
width: calc(100% + 40px);
margin-inline: -20px;
}
@include breakpoint-pro_s {
width: auto;
margin-inline: auto;
}
@include breakpoint-ssp {
overflow: auto; //SP時横にスライド
padding-bottom: 5px;
}
&::-webkit-scrollbar {
display: none; //スクロールバー非表示
-ms-overflow-style: none; //Edge対策
scrollbar-width: none; //Firefox対策
}
& + .tabNav_row {
margin-top: 5px;
padding-bottom: 5px;
@include breakpoint-sp {
margin-top: 0;
}
}
.col {
cursor: pointer;
display: block;
background: #fff;
padding: 20px;
@include breakpoint-ssp {
min-width: 130px;
padding: 5px 10px;
}
&:hover {
background: #ffc72e;
.component {
&.richtext {
color: #fff;
}
}
}
// タブ選択時の色指定
&.is-active {
background: #ffad2f;
.component {
&.richtext {
color: #fff;
}
}
}
&:empty {
cursor: auto;
pointer-events: none;
background: none;
}
.component {
&.richtext {
margin: 0;
@include breakpoint-ssp {
font-size: 14px;
}
}
// 見出しにカーソル当たらない対策（不要であれば削除）
&.heading {
:is(h2, h3, h4, h5) {
cursor: inherit;
}
}
}
}
// rowが2個以上〜（SP時スクロールなし・縦並び）
&.tiered {
@include breakpoint-ssp {
flex-wrap: wrap;
}
.col {
@include breakpoint-ssp {
min-width: initial;
width: 100% !important;
}
}
}
}
}
}
}
// タブ切り替え コンテンツエリア
&.tab_sec {
display: none; // 2個目以降のタブコンテンツ初期読み込み時に非表示
padding-top: 0;
@include breakpoint-sp {
padding-bottom: 30px;
}
.inner {
width: calc(100% - 40px);
background: #fff;
}
}
}
}
/*----- タブ切り替え（colボタンver.） END -----*/

編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。

CSSをコピーする

2023-07-25更新（v1.0.0）

/*-- タブ切り替え（colボタンver.） 編集画面用 START v1.0.0--*/
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&.tabNav_sec {
padding: 20px;
.inner {
padding: 20px;
}
}
&.tab_sec {
display: block !important;
&:hover {
outline: 2px solid #000 !important;
&::before {
content: "タブ切り替えセクション用";
display: inline-block;
background-color: #000;
color: #fff;
position: absolute;
top: -34px;
left: 0;
padding: 5px 10px;
}
}
.inner {
padding: 20px;
}
}
}
/*-- タブ切り替え（colボタンver.） 編集画面用 END --*/
JSパーツ集ロゴ

      JSが必要な実装の注意点スプレッドシート（H列）は読みましたか？

      ※必ず注意点（H列）をご確認の上閲覧ください

      はい
      いいえ
      ページトップへ戻る

      © Basic Inc. All Rights Reserved.