メガメニュー

追加可能	変更可能箇所	NG	同一ページに複数設置	ページ複製・クリップボード使用可否
■ナビ部分ボタン（〜2個まで）^_※1 ナビ数（〜5個まで推奨）^_※1 検索パーツ^_※2	ナビ部分とメニュー内の幅・背景色メニュー内のスクロール有無セクションに入る仕様範囲のものであれば追加可能（4カラム以上などは✕） JS変更箇所ナビのホバー/クリック選択^_※5 変数名：MEGA_PC_OPEN_BY_HOVER	スムーズスクロールの速度変更 ■メニューに追加NG デザインパーツ^_※3 （▼自動吐き出しパーツ）^_※4 記事リストパーツタグ記事リストパーツタグ一覧パーツカテゴリ一覧パーツ記事ランキングパーツ　etc..	×	◯ ※6

追加可能

変更可能箇所

NG

同一ページ
に複数設置

ページ複製・クリップボード使用可否

■ナビ部分

ボタン
（〜2個まで）^_※1
ナビ数
（〜5個まで推奨）^_※1
検索パーツ^_※2

ナビ部分とメニュー内の幅・背景色
メニュー内のスクロール有無
セクションに入る仕様範囲のものであれば追加可能
（4カラム以上などは✕）

JS変更箇所

ナビのホバー/クリック選択^_※5
変数名：MEGA_PC_OPEN_BY_HOVER

スムーズスクロールの
速度変更

■メニューに追加NG

デザインパーツ^_※3

（▼自動吐き出しパーツ）^_※4

記事リストパーツ
タグ記事リストパーツ
タグ一覧パーツ
カテゴリ一覧パーツ
記事ランキングパーツ　etc..

×

◯
※6

※留意事項
○構造・仕様上の制約 ※1：それ以上は、レスポンシブ時に崩れる恐れがあります。 ※2：検索結果ページは、共通ナビと仕様が異なります。メインビジュアル・サイドバー、擬似フッター（セクションで作成したもの）は表示されないのでご注意ください。 ※5：メガメニューを持つ第2階層は、クリックでメニューを開くだけで遷移せず、下層を持たない第2階層のみページ遷移します。 ※6：メガメニュー格納用セクションは、クリップボードで配置する運用になります。フェードインアニメーションを使用している場合はページ内リンク位置が一瞬ずれる不安定な挙動になります。ページ内リンクはスクロール位置がずれる恐れがあるため非推奨です。 ○使用可否のパーツ ※3：メガメニュー内ではデフォルトパーツのみ使用してください。デザインパーツは、CSSを別ページから読み込む構造になっています。そのため、メガメニューを表示するページではそのCSSが反映されず、デザインパーツが正しく表示できません。 ※4：自動出力パーツ（記事リスト等）はメガメニュー内では使用できません。（別ページから読み込む構造のため）メガメニュー内のリンクの設定は「リッチテキストパーツ」「リンクリストパーツ」「ボタンパーツ」のみ使用可能。 ○更新・運用時の注意リッチテキストは操作性が悪いので、頻繁に更新されるのに向きません。この点をご了承のうえ、引き継ぎをお願いします。文言やリンクを変更する前には、クリップボードでバックアップを保存することを推奨します。 ○編集時のルールリンク、文言、文字色を変更する際は、リッチテキスト内の文字行を１行ずつドラッグし編集してください。複数の文字列をまとめて選択した状態で行うと、公開画面でメガメニューが崩れる恐れがあります。 ○表示崩れ・不安定挙動に関する注意テキストパーツのHTMLモードを使用した文言の編集・修正はしないでください。コードの確認、不要なインラインスタイルを削除する、入り込んでしまった不要なデータコードをHTMLモードで削除することは可能です。新リッチテキストパーツのリストを使ってメニューリストを作成する際にプレーンテキストをコピペした場合、作成後のメニューリストのHTML構造が「ul > li > div > aになっていることを確認してください。li > p > aの構造になっていた場合、リスト化を解除した上でもう一度リスト化し　li > div > aに構造が変更されていることを確認してください。 JSがうまくあたらない場合、divが生成されていない可能性があります。

※留意事項

○構造・仕様上の制約

※1：それ以上は、レスポンシブ時に崩れる恐れがあります。
※2：検索結果ページは、共通ナビと仕様が異なります。
メインビジュアル・サイドバー、擬似フッター（セクションで作成したもの）は表示されないのでご注意ください。
※5：メガメニューを持つ第2階層は、クリックでメニューを開くだけで遷移せず、下層を持たない第2階層のみページ遷移します。
※6：メガメニュー格納用セクションは、クリップボードで配置する運用になります。
フェードインアニメーションを使用している場合はページ内リンク位置が一瞬ずれる不安定な挙動になります。
ページ内リンクはスクロール位置がずれる恐れがあるため非推奨です。

○使用可否のパーツ

※3：メガメニュー内ではデフォルトパーツのみ使用してください。
デザインパーツは、CSSを別ページから読み込む構造になっています。そのため、メガメニューを表示するページではそのCSSが反映されず、デザインパーツが正しく表示できません。
※4：自動出力パーツ（記事リスト等）はメガメニュー内では使用できません。（別ページから読み込む構造のため）
メガメニュー内のリンクの設定は「リッチテキストパーツ」「リンクリストパーツ」「ボタンパーツ」のみ使用可能。

○更新・運用時の注意

リッチテキストは操作性が悪いので、頻繁に更新されるのに向きません。
この点をご了承のうえ、引き継ぎをお願いします。
文言やリンクを変更する前には、クリップボードでバックアップを保存することを推奨します。

○編集時のルール

リンク、文言、文字色を変更する際は、リッチテキスト内の文字行を１行ずつドラッグし編集してください。
複数の文字列をまとめて選択した状態で行うと、公開画面でメガメニューが崩れる恐れがあります。

○表示崩れ・不安定挙動に関する注意

テキストパーツのHTMLモードを使用した文言の編集・修正はしないでください。コードの確認、不要なインラインスタイルを削除する、入り込んでしまった不要なデータコードをHTMLモードで削除することは可能です。
新リッチテキストパーツのリストを使ってメニューリストを作成する際にプレーンテキストをコピペした場合、作成後のメニューリストのHTML構造が「ul > li > div > aになっていることを確認してください。li > p > aの構造になっていた場合、リスト化を解除した上でもう一度リスト化し　li > div > aに構造が変更されていることを確認してください。 JSがうまくあたらない場合、divが生成されていない可能性があります。

構造図

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

設定方法

CSSをカスタムCSSに記述。
編集画面用CSSを適切な位置に記述。
JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
クラス名を見本とあわせる。

①メガメニューを表示させたいページでの設定

ページ一覧にて、[メガメニューを表示させたいページ]を作成。
編集画面内の設定から、「ナビゲーションを表示する」のチェックを外す。
JavaScriptをフッター等に入れる。（※②メガメニュー編集用ページでの設定の3の手順が終わってから）
格納用の空セクションを用意し、クラス名「js-megaMenu_contents_sec」を追加。フッター前などに配置する。
※このセクションがないとメガメニューが反映されません。

②メガメニュー編集用ページでの設定

[メガメニューを表示するページ]の下の階層に、[メガメニュー編集用ページ]を新規作成。
[メガメニュー編集用ページ]の共通エリア設定で、「共通ヘッダーを使用」をOFFにする。
[サイト内検索の検索結果から除外する]と[NOINDEX]にチェックを入れる。
任意のURLを設定。
例：mega-menu-parts
コピーしたJavaScript内の、【const megaMenuPartsPath = '/js/mega-menu01-parts';】の'URL部分'を手順4で設定したURLに変更する。
例：URLがmega-menu-partsの場合 →【const megaMenuPartsPath = '/mega-menu-parts';】
[メガメニュー編集用ページ]の編集画面に入り、
「ヘッダー・フッター・パンくずリストの表示」をONにする。
※検索結果画面で表示されるレイアウトは[メガメニュー編集用ページ]のレイアウト設定に依存します。
フッターにメガメニュー用のJSパーツが埋め込んであることを確認。
ヘッダー（メインビジュアル部分）を格納用セクションにするため、ヘッダーにクラス名「js-megaMenu_contents_sec」を追加。
セクションを新規作成し、
クラス名「js-megaMenu_custom_sec megaMenu_custom_sec fixed」を追加。
※ナビを固定したくない場合、クラス「fixed」は削除してください。
上記セクション内で行（row）を新規作成し、クラス名「navigation-cont_row」を追加。
上記行（row）を2分割する。
左のカラム（col）にクラス名「logo_col」を追加。
右のカラム（col）にクラス名「cont_col」を追加。
※ロゴ画像「logo_img（デフォルトで準備）」やボタンは必要があれば追加。
※別ページから読み込んでいるために一部デザインパーツのCSSが効かないので、デフォルトパーツのみ使用。
上記「cont_col」内にリンクリストを配置し、クラス名「nav_menu_list」を追加。
→第2階層のリンクを設定。
上記セクションのすぐ下に新規セクションを作成し、
クラス名「js-megaMenu_down_list_sec megaMenu_down_list_sec」を追加。
上記セクション内で、行（row）を新規作成し、クラス名「js-downMenu_reference_row」を追加。
「js-downMenu_reference_row」内にリッチテキストを配置し、先程設定した第2階層のメニュー名と合わせる。
（リッチテキストにはクラスの追加不要）※仕組みは構造図参照
「js-downMenu_reference_row」の下に新規行（row）を作成し、デザインに合わせて通常通りパーツを置く。
※例として、デモでは「sub_menu_list_row」を準備。（詳細はCSS参照）必要に応じて活用してください。
※ボックスリンクを設置する場合、デザインパーツではなくデフォルトパーツを使用し、従来のクラス付与の方法（colに「box_link_col」、追加ボタンパーツに「btn_custom_boxlink」を付与）で設定をお願いします。
※別ページから読み込んでいるために一部デザインパーツのCSSが効かないので、デフォルトパーツのみ使用。
第2階層のメニューを表示させたい分だけセクションを用意し、手順13〜16と同じ流れで設定してください。

【新CMSの場合】
別ページから読み込んでいるために一部デザインパーツのCSSが効かないので、デフォルトパーツのみ使用可能です。
※デザパは使用禁止です。
rowについても新規作成した方が確実にCSSの影響を受けないので安心かと思います。

注意点

ページ内アンカーリンクの設置は禁止です。SP時にハンバーガーメニューが崩れます。
テキストパーツのHTMLモードを使用した文言の編集・修正はしないでください。コードの確認、不要なインラインスタイルを削除する、入り込んでしまった不要なデータコードをHTMLモードで削除することは可能です。
メニューリストを作成する際にプレーンテキストをコピペした場合、作成後のメニューリストのHTML構造が「ul > li > div > aになっていることを確認してください。li > p > aの構造になっていた場合、リスト化を解除した上でもう一度リスト化し　li > div > aに構造が変更されていることを確認してください。 JSがうまくあたらない場合、divが生成されていない可能性があります。
アップセル等でCSSが古い場合があるので、カスタムCSSに「scroll-behavior: smooth;」が適用されているか必ず確認して下さい。こちらのスタイルが当たっていないとスムーズスクロールが効きません。
SP編集画面で設定した画像はTAB時に反映されません。
※代替案として、【pcOnly/spOnly】で出し分けるなどで対応してください。
一部のデザインパーツ（ボタンやリッチテキストなど）は、CSSを別ページから読み込む構造になっています。そのため、メガメニューを表示するページではそのCSSが反映されず、これらのパーツは正しく表示できません。そのため、メガメニュー内ではデフォルトパーツのみ使用できます。
パーツ配置時に同じテキスト・同じリンク先のメニューを複数設置しないようご注意ください。
ただし、階層構造が異なる場合（別の親メニュー下など）や同じテキストでもリンク先が異なる場合は除きます。

メガメニューを一時的に格納するセクション（消さないでください）

JS・CSS・編集画面用CSS

jQuery
JS
CSS
編集画面用CSS

JavaScript埋め込みパーツを設置し、CDNで読み込んだ最新バージョンのjQueryを反映させます。
※jQueryコンフリクト回避のため

複数のJSパーツを使用する場合は、こちらの①jQueryの読み込みは一度だけで大丈夫です。

JSをコピーする

2024-01更新（v1.0.0）

<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script>
'use strict';
/--- jQueryコンフリクト回避 v1.0.0---/
jQuery.noConflict();

/--- この下にJavaScriptを記述していく---/
</script>

JSをコピーする

2025-11-06更新（v3.0.0）

<script>
/* ---------------------------
メガメニュー v3.0.0
--------------------------- /
/--- PC or SP　判定 ---/
function windowPCorSP() {
if (window.matchMedia('(min-width: 770px)').matches) {
/ 画面幅が770px以上のときの処理(PC) /
return 'pc';
} else {
/ 画面幅が769px以下のときの処理(SP) /
return 'sp';
}
};

/--- メガメニュー ---/
jQuery(function () {
/---------------------------------
初期化 (変数定義やクラス付与) START
---------------------------------/
/ 設定：PC時の開閉方式（true=ホバー、false=クリック） /
const MEGA_PC_OPEN_BY_HOVER = true;
/ メガメニューのパーツを配置しているURLのパスを指定する (先頭に「/」を入れてください) /
const megaMenuPartsPath = '/js/mega-menu01-parts';
/ メガメニューを一時的に格納するセクション /
const megaMenuTemporarilyContentsSec = jQuery('.js-megaMenu_contents_sec');
/ theme-fo-base /
const themeFoBase = jQuery('#fo-base');
/ メインビジュアル（main-visual） /
const mainVisual = jQuery('.main-visual');
/--- 初期化 (変数定義やクラス付与) END ---/

/--- メガメニューを別ページから読み込んで初期機能設定 START ---/
megaMenuTemporarilyContentsSec.load(`${megaMenuPartsPath} .contents`, function () {
/---------------------------------
メガメニューPC時 START
---------------------------------/
/ ナビゲーションメガメニュー /
const megaMenuSec = jQuery('.js-megaMenu_custom_sec');
/ メガダウンメニュー /
const megaDownMenuSec = jQuery('.js-megaMenu_down_list_sec');
/ メガメニューナビゲーションリンク /
const nav_menu_link = jQuery('.js-megaMenu_custom_sec .nav_menu_list a');
/ ダウンメニューか否か判定用テキスト /
const downMenu_reference_text = jQuery('.js-downMenu_reference_row p');

/ メガメニュー要素以外のセクションを削除 /
jQuery('.js-megaMenu_contents_sec section')
.not('.js-megaMenu_custom_sec, .js-megaMenu_down_list_sec')
.css('display', 'none');
/ メガメニューを「#fo-base」の上に配置 /
megaMenuTemporarilyContentsSec.insertBefore(themeFoBase);
/ メガメニューを囲んでいる不要なタグを削除 /
megaMenuSec.unwrap().unwrap();
/ JSで「display: none;」を付与して、チラツキ防止用クラスを外す /
megaDownMenuSec.css('display', 'none');

/--- ダウンメニューか否か判定してクラスを付与 ----/
nav_menu_link.each(function (index01, element01) {
downMenu_reference_text.each(function (index02, element02) {
if (jQuery(element01).text() === jQuery(element02).text()) {
/ idを生成 /
let id = index01 + 101;
let list = jQuery(element01).parent();
let downMenu = jQuery(element02).closest('.js-megaMenu_down_list_sec');
/ ダウンメニューをリンクリスト内部に移動 /
downMenu.appendTo(list);
/ ダウンメニュー用のクラスを付与 /
list.addClass('downMenu');
/ ダウンメニュー用のidをdata属性で付与 /
list.attr('data-mega-target', `${id}`);
downMenu.attr('data-mega-id', `${id}`);
}
});
});

/ トグルクリック処理 /
jQuery('.main-megaMenu').on('click', '.toggle_icon', function (e) {
e.preventDefault();
const toggle = jQuery(this);
const li = toggle.closest('li');
const childUl = li.children('ul').first();
/ トグルの開閉 /
if (childUl.length) {
childUl.slideToggle(200);
li.toggleClass('is-open');
}
});

/ 判定用に使用したテキストを削除 /
jQuery('.js-downMenu_reference_row').css('display', 'none');

/ ダウンメニューのリンクのみを取得 /
const downMenuLink = jQuery('.js-megaMenu_custom_sec .nav_menu_list .downMenu');

/ PC時の開閉方式を切り替え /
if (MEGA_PC_OPEN_BY_HOVER) {
downMenuLink.hover(function () {
const $li = jQuery(this);
const id = $li.attr('data-mega-target');
$li.addClass('is-opened');
jQuery(`.js-megaMenu_down_list_sec[data-mega-id="${id}"]`).css('display', '');
}, function () {
const $li = jQuery(this);
const id = $li.attr('data-mega-target');
jQuery(`.js-megaMenu_down_list_sec[data-mega-id="${id}"]`).css('display', 'none');
$li.removeClass('is-opened');
});
} else {
jQuery(document)
.off('click.mm-open', '.js-megaMenu_custom_sec .downMenu > a')
.on('click.mm-open', '.js-megaMenu_custom_sec .downMenu > a', function (e) {
e.preventDefault();
if (windowPCorSP() === 'pc') {
const li = jQuery(this).parent('.downMenu');
const targetId = li.attr('data-mega-target');
const downMenu = jQuery(`.js-megaMenu_down_list_sec[data-mega-id="${targetId}"]`);
const isOpened = li.hasClass('is-opened');
jQuery('.js-megaMenu_down_list_sec').css('display', 'none');
jQuery('.downMenu').removeClass('is-opened');
if (!isOpened) {
downMenu.css('display', '');
li.addClass('is-opened');
}
}
});

/ ヘッダー内クリックでのクローズ判定（クリックした箇所以外をクリックしたら閉じる） /
jQuery(document)
.off('mousedown.mm-header')
.on('mousedown.mm-header', function (e) {
if (windowPCorSP() !== 'pc' || MEGA_PC_OPEN_BY_HOVER) return;
const $t = jQuery(e.target);
const insideHeader = $t.closest('.js-megaMenu_custom_sec').length > 0;
const onTrigger = $t.closest('.js-megaMenu_custom_sec .nav_menu_list .downMenu > a').length > 0;
const insidePanel = $t.closest('.js-megaMenu_custom_sec .js-megaMenu_down_list_sec').length > 0;
if (insideHeader && !onTrigger && !insidePanel) {
jQuery('.js-megaMenu_down_list_sec').css('display', 'none');
jQuery('.downMenu').removeClass('is-opened');
}
});
}

/ メガメニュー外クリックで閉じる（PC時のみ） /
jQuery(document)
.off('mousedown.mm-outside')
.on('mousedown.mm-outside', function (e) {
if (windowPCorSP() !== 'pc') return;
const $t = jQuery(e.target);
const insideMega =
$t.closest('.js-megaMenu_custom_sec').length > 0 ||
$t.closest('.js-megaMenu_down_list_sec').length > 0;
if (!insideMega) {
jQuery('.js-megaMenu_down_list_sec').css('display', 'none');
jQuery('.downMenu').removeClass('is-opened');
}
});

/------------- メガメニューPC時 END -------------/

/---------------------------------
メガメニューSP時 START
---------------------------------/
/ ハンバーガーメニューボタン /
const megaMenuTriggerElement = jQuery(
'<div class="megaMenu_trigger"><span></span><span></span><span></span></div>'
);
const mainMegaMenuElement = jQuery('<nav class="main-megaMenu"><ul></ul></nav>');

function spMegaMenuSetUp() {
function getStructureKey(ul) {
const items = [];
ul.find('> li').each(function () {
const li = jQuery(this);
const anchor = li.find('> p > a, > a, a').first();
const linkText = anchor.text().trim();
const href = anchor.attr('href') || '';
const childUl = li.children('ul');
let childKey = '';
if (childUl.length) {
childKey = getStructureKey(childUl);
}
items.push(`${linkText}::${href}${childKey ? ` (${childKey})` : ''}`);
});
return items.join('|');
}

/ ハンバーガメニューを挿入＆削除 /
if (windowPCorSP() === 'sp' && !jQuery('.megaMenu_trigger').length) {
/--- 画面幅SPのとき ---/
/ ハンバーガーメニューボタンとメインメニューを追加 /
megaMenuTriggerElement.appendTo('.js-megaMenu_custom_sec > .inner').ready(function () {
mainMegaMenuElement.insertAfter('.megaMenu_trigger');
const megaMenuTrigger = jQuery('.megaMenu_trigger');
const mainMegaMenu = jQuery('.main-megaMenu');
mainMegaMenu.css('display', 'none');

/ メインメニューにメニュー項目を追加 /
nav_menu_link.each(function () {
const parentLi = jQuery(this).parent('li');
const newText = parentLi.text().trim();
const newDataTarget = parentLi.attr('data-mega-target');
const exists = jQuery('.main-megaMenu > ul > li').filter(function () {
const existingText = jQuery(this).text().trim();
const existingDataTarget = jQuery(this).attr('data-mega-target');
return existingText === newText && existingDataTarget === newDataTarget;
}).length > 0;
if (!exists) {
const clonedLi = parentLi.clone(true, true);
clonedLi.appendTo('.main-megaMenu > ul');
}
});

const level01 = jQuery('.main-megaMenu > ul > li');
level01.addClass('js-level-01');
level01.each(function (index01, element01) {
let id = jQuery(element01).attr('data-mega-target');
let section = jQuery(
`.main-megaMenu .js-megaMenu_down_list_sec[data-mega-id="${id}"]`
);
let buttonLink = section.find('.button a').clone();
let buttonLinkList = buttonLink.removeClass().addClass('wrap-item');
if (buttonLink.length) {
buttonLinkList.appendTo(jQuery(element01));
}
const addedStructureKeys = new Set();
section.find('.component.richtext, .component.list').each(function (groupIndex) {
const comp = jQuery(this);
const ul = comp.find('ul').first();
if (!ul.length) return;
const groupID = `${id}-${groupIndex}`;
const structureKey = getStructureKey(ul);
if (!addedStructureKeys.has(structureKey)) {
const clonedUl = ul.clone(true, true);
clonedUl.attr('data-group-id', groupID);
clonedUl.appendTo(jQuery(element01));
addedStructureKeys.add(structureKey);
}
});
section.remove();
});

jQuery('.main-megaMenu .js-megaMenu_down_list_sec').css('display', 'none');
jQuery('.wrap-item').wrap('<li class="js-level-02">');
jQuery('.wrap-item').removeAttr('class');
level01.each(function (index, element) {
let target = jQuery(element).find('.js-level-02');
target.wrapAll('<ul class="js-level-01-cont">');
});

const level01List = jQuery('.main-megaMenu > ul > li');
const level02List = jQuery('.main-megaMenu > ul > li > ul > li');
const level03List = jQuery('.main-megaMenu > ul > li > ul > li > ul > li');
const level04List = jQuery('.main-megaMenu > ul > li > ul > li > ul > li > ul > li');
level01List.addClass('js-level-01');
level02List.addClass('js-level-02');
level03List.addClass('js-level-03');
level04List.addClass('js-level-04');
level02List.closest('ul').addClass('js-level-01-cont');
level03List.closest('ul').addClass('js-level-02-cont');
level04List.closest('ul').addClass('js-level-03-cont');

/ トグルアイコンを追加 /
jQuery('.main-megaMenu li').each(function () {
const li = jQuery(this);
const childUl = li.children('ul');
if (childUl.length) {
let anchor = li.children('a, p > a, strong > a').first();
if (!anchor.length) {
anchor = li.find('a').first();
}
if (anchor.length && anchor.find('.toggle_icon').length === 0) {
anchor.append('<span class="toggle_icon"></span>');
}
}
});
jQuery('.main-megaMenu .downMenu > a').each(function () {
if (jQuery(this).find('.toggle_icon').length === 0) {
jQuery(this).append('<span class="toggle_icon"></span>');
}
});

/ ハンバーガーメニューにクリックイベントを付与 /
megaMenuTrigger.on('click', function () {
megaMenuTrigger.toggleClass('is-active');
mainMegaMenu.toggleClass('is-active');
mainMegaMenu.toggle();
jQuery('html').toggleClass('is-locked');
megaMenuSec.toggleClass('is-open');
});

/ トグル初期化用：すべて非表示にする /
jQuery('.main-megaMenu li ul').css('display', 'none');
});
} else if (windowPCorSP() === 'pc') {
/--- 画面幅PCのとき ---/
jQuery('.megaMenu_trigger').removeClass('is-active');
jQuery('.main-megaMenu').removeClass('is-active');
jQuery('.megaMenu_trigger').css('display', 'none');
jQuery('.main-megaMenu ul li').css('display', 'none');
jQuery('.main-megaMenu').css('display', 'none');
jQuery('.downMenu a .toggle_icon').css('display', 'none');
jQuery('html').removeClass('is-locked');
}
}
/------------- メガメニューSP時 END -------------/

/--- ウィンドウのリサイズ完了後の処理 ---/
const windowResize = () => {
let timer = 0;
let delay = 100;
window.addEventListener('resize', () => {
clearTimeout(timer);
timer = setTimeout(() => {
spMegaMenuSetUp();
}, delay);
}, false);
};
spMegaMenuSetUp();
windowResize();
});
/------------- メガメニューを別ページから読み込んで初期機能設定 END -------------/
});

/ SPメニューのトグル処理（再定義） /
jQuery(document)
.off('click', '.main-megaMenu .toggle_icon')
.on('click', '.main-megaMenu .toggle_icon', function (e) {
e.preventDefault();
const li = jQuery(this).closest('li');
const targetUl = li.children('ul');
if (targetUl.length) {
targetUl.stop(true, true).slideToggle(200);
li.toggleClass('is-open');
jQuery(this).toggleClass('is-open');
}
});

/--- ページ内遷移ずれる対策 ---/
window.addEventListener('load', () => {
setTimeout(() => {
const headerSec = document.querySelector('.js-megaMenu_custom_sec');
if (headerSec) {
const headerHeight = headerSec.offsetHeight;
if (headerSec.classList.contains('fixed')) {
document.documentElement.style.setProperty('--navi-height', `${headerHeight}px`);
}
}
}, 300);
});
/--- ページ内遷移ずれる対策 END ---/
/ ---------------------------
メガメニュー END
--------------------------- */
</script>

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

※新旧どちらにも対応できるようにデフォルトでは固定値で設定しているため、必要に応じて変数を設定してください。

CSSをコピーする

2025-10-10更新（v2.1.1）

/----- メガメニュー（1段） START v2.1.1 -----/
/* --------------------------------
variables（変数）
----------------------------------- /
$mega-navigation_bg_color: #fff; //メガメニューの背景色
$mega-navigation_font_size: 14px; //メガメニューのフォントサイズ（1〜3階層）
$mega-navigation_font_weight: bold; //メガメニューのフォントの太さ（1〜3階層） normal or bold
$mega-navigation_hover_opacity: 1; //メガメニューをホバーした時の透視度
$mega-navigation_bg2_color: #ffad2f; //メガメニューの背景色（2階層以下）
$mega-navigation_text_color: #2d2d2d; //メガメニューのテキストカラー
$mega-navigation_hover_text_color: #ffad2f; //メガメニューをホバーした時のテキストカラー
$mega-navigation_text2_color: #fff; //メガメニューのテキストカラー（2階層以下）

//メガメニュー（1段）ハンバーガーメニュー
$mega-navigation_sp_font_size: 14px; //メガメニュー（SP）時のテキストサイズ（1〜3階層）
$mega-navigation_sp_font_weight: bold; //メガメニュー（SP）時のテキストの太さ（1〜3階層） normal or bold
$mega-navigation_sp_text_color: $mega-navigation_text2_color; //メガメニュー（SP）時のテキストカラー１階層
$mega-navigation_sp_text2_color: $mega-navigation_sp_text_color; //メガメニュー（SP）時のテキストカラー（2階層）
$mega-navigation_sp_text3_color: $mega-navigation_sp_text_color; //メガメニュー（SP）時のテキストカラー（3階層）
$mega-navigation_sp_hover_text_color: #ffad2f; //メガメニュー（SP）時のホバーした時の2階層のテキスト＆矢印のカラー
$mega-navigation_sp_arrow1_color: $mega-navigation_sp_text_color; //メガメニュー（SP）矢印カラー（1階層）
$mega-navigation_sp_arrow2_color: $mega-navigation_sp_text2_color; //メガメニュー（SP）矢印カラー（2階層）
$mega-navigation_sp_bg_color: #fff; //メガメニュー（SP）時の背景色（1階層）
$mega-navigation_sp_bg2_color: $mega-navigation_bg_color; //メガメニュー（SP）時の背景色（２階層）
$mega-navigation_sp_bg3_color: #eee; //メガメニュー（SP）時の背景色（3階層）
$mega-navigation_sp_border-bottom: 1px dashed #ffad2f; //メガメニュー（SP）時のボーダー（hamburger_custom 使用時）
/------------- variables（変数）END -------------/

//初期読み込み時に格納セクションが一瞬見えてしまう（チラつき）防止
.js-megaMenu_contents_sec {
display: none !important;
}
//固定サイドバー対策
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&.js-megaMenu_custom_sec {
&.has-fixed-side {
@media screen and (min-width: 1201px) {
width: calc(100% - 420px);
}
}
}
}
/ SP時 iOSのアドレスバーズレ防止 /
html {
&.is-locked {
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
&::before {
content: '';
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #ffad2f;
}
}
}

/-- メガメニュー（1段）共通設定 --/
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&:is(
.megaMenu_custom_sec,
.megaMenu_down_list_sec,
) {
box-sizing: border-box;
}
}
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&:where(
.megaMenu_custom_sec,
.megaMenu_down_list_sec
) {
width: 100%;
font-family: 'Noto Sans JP', sans-serif;//適宜変更
line-height: 1.5;//適宜変更
letter-spacing: .04em;//適宜変更
.inner {
width: 100% !important;
max-width: 100% !important;
margin: auto;
.row {
.col {
.component {
margin: 10px 0;
a {
text-decoration: none;
&:hover {
opacity: $hover_opacity;
}
}
// CTA共通
&.cta {
margin: 0;
.cta-row {
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
@include breakpoint-sp {
display: block;
}
& + .cta-row {
@include breakpoint-pc {
padding-top: 10px;
}
}
.cta-column {
display: table-cell;
vertical-align: top;
margin: 0;
@include breakpoint-sp {
display: block;
width: 100% !important;
}
}
}
}
}
}
}
}
}
}
/-- メガメニュー（1段）共通設定 END--/

:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
/-- メガメニュー（1段）ナビ部分 --/
&.megaMenu_custom_sec {
background: $mega-navigation_bg_color;
box-shadow: $navigation_box_shadow_common;
position: relative;
z-index: 10;
padding: 0;
// オプションナビゲーション上部固定のとき
&.fixed {
position: sticky;
z-index: 1001;
top: 0;
}
&.is-open {
@include breakpoint-sp {
box-shadow: none;
}
}
.inner {
.row {
&.navigation-cont_row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 20px;
@include breakpoint-sp {
min-height: 51px;
padding: 0;
}
.col {
padding: 0;
&.logo_col {
display: flex !important;
align-items: center;
justify-content: flex-start;
width: auto !important;
@include breakpoint-sp {
padding: 0 0 0 10px;
}
.component {
margin: 0;
&.image {
&.logo_img {
max-width: $header_logo;
img {
@include breakpoint-pc {
max-height: 56px;//ナビhover時の上矢印▲の位置ズレ対策
}
@include breakpoint-sp {
max-height: $header_sp_logo;
}
}
}
}
}
}
&.cont_col {
display: flex !important;
align-items: center;
justify-content: flex-end;
width: auto !important;
@include breakpoint-sp {
padding: 0 60px 0 0;
}
.component {
margin: 0;
&.list {
&.nav_menu_list {
height: 100%;
@include breakpoint-sp {
display: none !important;
}
> ul {
display: flex;
height: 100%;
> li {
display: block;
margin: 0;
padding: 0;
font-size: $mega-navigation_font_size;
color: $mega-navigation_text_color;
&.downMenu {
> a {
position: relative;
&::after {
content: "\f0d7";//＋の場合："\2b"
font-family: $font_family_awsm6;
margin-left: 5px;
font-size: 16px;
font-weight: 900;
line-height: 1;
color: $mega-navigation_text_color;
}
}
&.is-opened {
> a {
&::before {
content: '';
position: absolute;
left: calc(50% - 3px);
bottom: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent #ffad2f transparent;
transform: translateX(-50%);
}
//-の場合
// &::after {
// content: "\f068";
// }
}
}
}
> a {
display: flex;
align-items: center;
height: 100%;
padding: 20px 10px;
text-decoration: none;
font-weight: $mega-navigation_font_weight;
line-height: 1.2;
color: $mega-navigation_text_color;
&:hover {
color: $mega-navigation_hover_text_color;
opacity: $mega-navigation_hover_opacity;
&::before,
&::after {
color: $mega-navigation_hover_text_color;
}
}
}
}
}
}
}
&.button {
margin-left: 10px;
@include breakpoint-sp {
margin: 0;
}
.button-cont {
a {
&:is(.size-s, .size-m, .size-l) {
@include breakpoint-msp {
min-width: initial;
background: none;
border: none;
border-radius: 0;
font-size: 0;
padding: 5px;
}
&::before {
@include breakpoint-msp {
font-size: 22px;
color: #ffad2f;
margin: 0;
}
}
}
}
}
}
}
}
}
}
}
// ハンバーガーメニュー
.megaMenu_trigger {
cursor: pointer;
width: 60px;
height: 51px;
position: absolute;
right: 0;
top: 0;
background: #ffad2f;
span {
display: inline-block;
width: 30px;
height: 3px;
border-radius: 3px;
background: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: all .4s;
&:nth-child(1) {
top: 15px;
}
&:nth-child(2) {
top: 24px;
}
&:nth-child(3) {
bottom: 15px;
}
}
/* ハンバーガメニューオープン時 /
&.is-active {
span {
&:nth-child(1) {
-webkit-transform: translateY(10px) translateX(-50%) rotate(-45deg);
transform: translateY(10px) translateX(-50%) rotate(-45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
-webkit-transform: translateY(-8px) translateX(-50%) rotate(45deg);
transform: translateY(-8px) translateX(-50%) rotate(45deg);
}
}
}
}
// メインメガメニュー（1段） PC時 {
@include breakpoint-pc {
.main-megaMenu {
display: none;
}
}
// メインメガメニュー（1段） SP時
@include breakpoint-sp {
.main-megaMenu {
height: calc(100vh + 100px);
overflow: auto;
font-family: 'Noto Sans JP', sans-serif;//適宜変更
background: #ffad2f;
padding: 20px 0 250px;
ul {
li {
a {
display: block;
position: relative;
padding: 20px;
text-decoration: none;
font-size: $mega-navigation_sp_font_size;
font-weight: $mega-navigation_sp_font_weight;
line-height: 1.2;
color: $mega-navigation_sp_text_color;
span {
font-weight: inherit;
}
}
/ 2階層目トリガー /
&.downMenu {
a {
padding: 20px 45px 20px 20px;
.toggle_icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
right: 0;
width: 50px;
height: 45px;
transform: translateY(-50%);
&::before,
&::after {
background-color: $mega-navigation_sp_arrow1_color;
}
&::before {
content: '';
width: 2px;
height: 18px;
transform: rotate(0);
-webkit-transform: rotate(0);
z-index: 1;
transition: all .5s ease;
}
&::after {
content: '';
position: relative;
right: 2px;
width: 2px;
height: 18px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transition: all .5s ease;
}
&.is-open {
&::before {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
}
}
}
}
ul {
&.js-level-01-cont {
position: relative;
&:first-of-type {
&::before {
content: '';
position: absolute;
left: 50%;
top: 0;
width: calc(100% - 33px);
height: 0.1rem;
transform: translateX(-50%);
background: #fff;
}
}
}
&:first-of-type {
padding: 5px 0 0;
}
&:last-of-type {
padding: 0 0 5px;
}
.js-level-02 {
a {
padding: 15px 30px 15px calc(20px + 1em);
}
.js-level-03 {
a {
padding: 15px 30px 15px calc(20px + 2em);
}
.js-level-04 {
a {
padding: 15px 30px 15px calc(20px + 3em);
}
}
}
}
}
}
}
}
}
}
}
/-- メガメニュー（1段）メニュー内 --/
&.megaMenu_down_list_sec {
background: $mega-navigation_bg2_color;
color: $mega-navigation_text2_color;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
padding: 20px 0;
.inner {
padding: 20px;
.row {
// 以下、メニュー内のデザインに合わせて適宜変更（不要であれば削除）
&.sub_menu_list_row {
display: flex;
gap: 20px;
& + .sub_menu_list_row {
margin-top: 30px;
}
.col {
padding: 0;
.component {
&.richtext {
// メニュー内タイトル部分
&.sub_menu_title_text {
margin-bottom: 10px;
}
// [お知らせ]リスト
&.megaMenu_list01 {
ul {
display: flex;
flex-direction: column;
margin: 0;
li {
display: block;
margin: 0;
padding: 0;
font-size: 16px;
a {
display: block;
padding: 10px 0;
border-bottom: 1px solid #fff;
text-decoration: none;
color: #fff;
&:hover {
opacity: $hover_opacity;
}
}
ul {
margin: 0 0 0 10px !important;
li {
font-size: 14px;
a {
border: none;
}
}
}
}
}
/ 1階層目 /
> ul {
margin: 0;
> li {
& + li {
margin-top: 10px;
}
/ 2階層目 /
> ul {
padding: 5px 0;
}
}
}
}
}
&.list {
// [お知らせ]リスト
&.megaMenu_list02 {
ul {
display: flex;
flex-direction: column;
li {
display: block;
margin: 0;
padding: 0;
font-size: 16px;
a {
display: block;
padding: 10px 0;
text-decoration: none;
font-weight: bold;
color: #fff;
&:hover {
opacity: $hover_opacity;
background: none;
}
}
}
}
}
}
}
}
}
.col {
// ボックスリンク用
&.box_link_col {
position: relative;
&:hover {
opacity: $hover_opacity;
}
}
}
}
}
}
}
/----- メガメニュー（1段） END -----*/

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

CSSをコピーする

2024-01-11更新（v1.0.0）

/-- メガメニュー（1段）編集画面用 START v1.0.0--/
//初期読み込み時に格納セクションが一瞬見えてしまう（チラつき）防止
.js-megaMenu_contents_sec {
display: block !important;
border: 1px solid #f00;
&::before {
content: "メガメニュー格納セクション";
position: absolute;
color: #fff;
background: #f00;
padding: 5px 5px;
right: 0;
top: -24px;
font-size: 14px;
line-height: 1;
}
}
.theme-fo-base .wrapper .contents {
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&.megaMenu_custom_sec {
padding: 20px 0 !important;
.inner {
max-width: 1100px !important;
padding: 0 20px !important;
.row {
&.navigation-cont_row {
.col {
&.logo_col {
width: 20% !important;
}
&.cont_col {
width: 80% !important;
}
}
}
}
}
&.fixed {
position: relative;
top: initial;
border: 1px solid blue;
&::before {
content: "メガメニュー上部固定中（クラス名：fixed） ※固定を外したい場合はこのクラスを外す。";
position: absolute;
color: #fff;
background: blue;
padding: 0 5px;
right: 0;
top: -24px;
}
}
}
&.megaMenu_down_list_sec {
position: relative;
top: initial;
left: initial;
.inner {
.row {
// メガメニューでドロップダウンメニューがついているリンクかどうか判定するためのrow
&.js-downMenu_reference_row {
border: 1px solid red;
background: #000;
&::before {
content: "ナビゲーションのメニュー名と同じものを入れてください。（どのメニューに対応するか判定用。公開画面では非表示の行になります。）";
position: absolute;
color: #fff;
background: red;
padding: 5px 5px;
right: 0;
top: -24px;
font-size: 14px;
line-height: 1;
}
.col {
padding: 10px 20px;
.component {
color: #fff;
&.heading {
:is(h2, h3) {
margin: 0;
}
}
}
}
}
}
}
}
}
}
/-- メガメニュー（1段）編集画面用 END --/

旧リッチテキストパーツ用
JS・CSS・編集画面用CSS

【旧リッチテキストパーツ】で組み込みが必要な場合にお使いください。

詳細内容

jQuery
JS
CSS
編集画面用CSS

JavaScript埋め込みパーツを設置し、CDNで読み込んだ最新バージョンのjQueryを反映させます。
※jQueryコンフリクト回避のため

複数のJSパーツを使用する場合は、こちらの①jQueryの読み込みは一度だけで大丈夫です。

JSをコピーする

2024-01更新（v1.0.0）

<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script>
'use strict';
/--- jQueryコンフリクト回避 v1.0.0---/
jQuery.noConflict();

/--- この下にJavaScriptを記述していく---/
</script>

jQueryの下に新規でJavaScript埋め込みパーツを設置し、コピー＆ペーストします。

JSをコピーする

2025-08-15更新（v1.1.0）

<script>
/* ---------------------------
メガメニュー（1段）v1.1.0
--------------------------- /
/--- PC or SP　判定 ---/
function windowPCorSP() {
if (window.matchMedia('(min-width: 770px)').matches) {
/ 画面幅が770px以上のときの処理(PC) /
return 'pc';
} else {
/ 画面幅が769px以下のときの処理(SP) /
return 'sp';
}
};

/--- メガメニュー（1段） ---/
jQuery(function () {
/---------------------------------
初期化 (変数定義やクラス付与) START
---------------------------------/
/ メガメニューのパーツを配置しているURLのパスを指定する (先頭に「/」を入れてください) /
const megaMenuPartsPath = '/js/mega-menu01-parts';
/ メガメニューを一時的に格納するセクション /
const megaMenuTemporarilyContentsSec = jQuery('.js-megaMenu_contents_sec');
/ theme-fo-base /
const themeFoBase = jQuery('#fo-base');
/ メインビジュアル（main-visual） /
const mainVisual = jQuery('.main-visual');
/------------- 初期化 (変数定義やクラス付与) END -------------/

/------------- メガメニューを別ページから読み込んで初期機能設定 START -------------/
megaMenuTemporarilyContentsSec.load(`${megaMenuPartsPath} .contents`, function() {

/---------------------------------
メガメニューPC時 START
---------------------------------/
/ ナビゲーションメガメニュー /
const megaMenuSec = jQuery('.js-megaMenu_custom_sec');
/ 固定サイドバー /
const fixedSide = document.querySelector('.fixed-side');
/ メガダウンメニュー /
const megaDownMenuSec = jQuery('.js-megaMenu_down_list_sec');
/ メガメニューナビゲーションリンク /
const nav_menu_link = jQuery('.js-megaMenu_custom_sec .nav_menu_list a');
/ ダウンメニューか否か判定用テキスト /
const downMenu_reference_text = jQuery('.js-downMenu_reference_row p');
/ サイドバーがあればクラスを追加 /
if (fixedSide && megaMenuSec.length) {
megaMenuSec.addClass('has-fixed-side');
}
/ メガメニュー要素以外のセクションを削除 /
jQuery('.js-megaMenu_contents_sec section').not('.js-megaMenu_custom_sec, .js-megaMenu_down_list_sec').css('display','none');
/ メガメニューを「#fo-base」の上に配置 /
megaMenuTemporarilyContentsSec.insertBefore(themeFoBase);
/ メガメニューを囲んでいる不要なタグを削除 /
megaMenuSec.unwrap().unwrap();
/ JSで「display: none;」を付与して、チラツキ防止用クラスを外す /
megaDownMenuSec.css('display', 'none');

/--- ダウンメニューか否か判定してクラスを付与 ----/
nav_menu_link.each(function(index01, element01) {
downMenu_reference_text.each(function(index02, element02) {
if ( jQuery(element01).text() === jQuery(element02).text() ) {
/ idを生成 /
let id = index01 + 101;
let list = jQuery(element01).parent();
let downMenu = jQuery(element02).closest('.js-megaMenu_down_list_sec');

/ ダウンメニューをリンクリスト内部に移動 /
downMenu.appendTo(list);

/ ダウンメニュー用のクラスを付与 /
list.addClass('downMenu');
/ ダウンメニュー用のidをdata属性で付与 /
list.attr('data-mega-target', `${id}`);
/ ダウンメニュー用のidをdata属性で付与 /
downMenu.attr('data-mega-id', `${id}`);
}
});
});

/ 判定用に使用したテキストを削除 /
jQuery('.js-downMenu_reference_row').css('display','none');

/ ダウンメニューのリンクのみを取得 /
const downMenuLink = jQuery('.js-megaMenu_custom_sec .nav_menu_list .downMenu');

/ダウンメニューをホバーしたときにサブメガメニューを開く /
downMenuLink.hover(
function() {
/--- マウスカーソルが重なった時の処理 ---/
/ ホバーしているリンクにクラス付与 /
jQuery(this).addClass('is-opened');
let hoverLinkId = jQuery(this).attr('data-mega-target');
let downMenu = jQuery(`[data-mega-id="${hoverLinkId}"]`);
downMenu.css('display', '');
},
function() {
/--- マウスカーソルが離れた時の処理 ---/
let hoverLinkId = jQuery(this).attr('data-mega-target');
let downMenu = jQuery(`[data-mega-id="${hoverLinkId}"]`);
downMenu.css('display', 'none');
jQuery(this).removeClass('is-opened');
}
);
/------------- メガメニューPC時 END -------------/

/---------------------------------
メガメニューSP時 START
---------------------------------/
/--- 変数定義 ---/
/ ハンバーガーメニューボタン /
const megaMenuTriggerElement = jQuery('<div class="megaMenu_trigger">' +
'<span></span>' +
'<span></span>' +
'<span></span>' +
'</div>');
const mainMegaMenuElement = jQuery('<nav class="main-megaMenu"><ul></ul></nav>');

function spMegaMenuSetUp() {

/ ハンバーガメニューを挿入＆削除 /
if ( windowPCorSP() === 'sp' && !jQuery('.megaMenu_trigger').length ) {
/--- 画面幅SPのとき ---/

/ ハンバーガメニューボタンとメインメニューを追加 /
megaMenuTriggerElement.appendTo('.js-megaMenu_custom_sec > .inner').ready(function () {

mainMegaMenuElement.insertAfter('.megaMenu_trigger');

const megaMenuTrigger = jQuery('.megaMenu_trigger');
const mainMegaMenu = jQuery('.main-megaMenu');

mainMegaMenu.css('display', 'none');
/ メインメニューにメニュー要素を追加 /
nav_menu_link.parent().clone().appendTo('.main-megaMenu > ul');

/ メニューの下層（プルダウン）要素を追加する /
/ 1階層目のメニューを取得 /
const level01 = jQuery('.main-megaMenu > ul > li');
level01.addClass('js-level-01');

level01.each(function(index01, element01) {
let id = jQuery(element01).attr('data-mega-target');
let section = jQuery(`.main-megaMenu .js-megaMenu_down_list_sec[data-mega-id="${id}"]`);

/ ボタンパーツの場合 /
let buttonLink = section.find('.button a').clone();
let buttonLinkList = buttonLink.removeClass().addClass('wrap-item');
if ( buttonLink.length ) {
buttonLinkList.appendTo(jQuery(element01));
}

/ リッチテキストもしくはリンクリストの場合 /
let listLink = section.find('.richtext > ul, .list > ul');
let listLinkList = listLink.closest('.component').children('ul');
if ( listLinkList.length ) {
listLinkList.appendTo(jQuery(element01));
}

section.css('display','none');
});

jQuery('.main-megaMenu .js-megaMenu_down_list_sec').css('display', 'none');
jQuery('.wrap-item').wrap('<li class="js-level-02">');
jQuery('.wrap-item').removeAttr('class');

level01.each(function(index, element) {
let target = jQuery(element).find('.js-level-02');
target.wrapAll('<ul class="js-level-01-cont">');
});

/ 1階層目 /
const level01List = jQuery('.main-megaMenu > ul > li');
const level02List = jQuery('.main-megaMenu > ul > li > ul > li');
const level03List = jQuery('.main-megaMenu > ul > li > ul > li > ul > li');
const level04List = jQuery('.main-megaMenu > ul > li > ul > li > ul > li > ul > li');

level01List.addClass('js-level-01');
level02List.addClass('js-level-02');
level03List.addClass('js-level-03');
level04List.addClass('js-level-04');

level02List.closest('ul').addClass('js-level-01-cont');
level03List.closest('ul').addClass('js-level-02-cont');
level04List.closest('ul').addClass('js-level-03-cont');

const downMenu = jQuery('.downMenu a');
const toggleIconElement = jQuery('<span class="toggle_icon"></span>');
jQuery('.main-megaMenu > ul > li ul').css('display', 'none');

let toggle_icon_link = [];

jQuery('.main-megaMenu > ul li ul').prevAll().each(function(index, element) {
if ( element.tagName.toLowerCase() === 'a' ) {
toggle_icon_link.push(jQuery(element));
return
} else if ( element.tagName.toLowerCase() === 'strong' ) {
toggle_icon_link.push(jQuery(element).find('a'));
}
});
toggleIconElement.appendTo(toggle_icon_link);

jQuery('.downMenu a .toggle_icon').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
let list = jQuery(this).closest('li');
let openTarget = list.children('ul');
jQuery(this).toggleClass('is-open');
openTarget.toggleClass('is-open');
openTarget.stop(true, true).slideToggle(300);
});

/ ハンバーガメニュークリックイベント /
megaMenuTrigger.on('click', function() {
megaMenuTrigger.toggleClass('is-active');
mainMegaMenu.toggleClass('is-active');
mainMegaMenu.toggle();
jQuery('html').toggleClass('is-locked');
megaMenuSec.toggleClass('is-open');
});

});

} else if ( windowPCorSP() === 'pc' ) {
/--- 画面幅PCのとき ---/
/ ハンバーガメニューボタンとメインメニューを削除 /
jQuery('.megaMenu_trigger').removeClass('is-active');
jQuery('.main-megaMenu').removeClass('is-active');
jQuery('.megaMenu_trigger').css('display','none');
jQuery('.main-megaMenu ul li').css('display','none');
jQuery('.main-megaMenu').css('display','none');
jQuery('.downMenu a .toggle_icon').css('display','none');

/ ハンバーガメニューが開いてるときのクラス名を削除 /
jQuery('html').removeClass('is-locked');
}
};

/------------- メガメニューSP時 END -------------/

/--- ウィンドウのリサイズ完了後の処理 ---/
const windowResize = () => {
let timer = 0;
let delay = 100;
window.addEventListener('resize', () => {
clearTimeout(timer);
timer = setTimeout(() => {
spMegaMenuSetUp();
}, delay);
}, false);
};

spMegaMenuSetUp();
windowResize();

});

/------------- メガメニューを別ページから読み込んで初期機能設定 END -------------/
});

/--- ページ内遷移ずれる対策 ---/
window.addEventListener('load', () => {
setTimeout(() => {
const headerSec = document.querySelector('.js-megaMenu_custom_sec'); / メガメニューを取得 /
if (headerSec) {
const headerHeight = headerSec.offsetHeight; / メガメニューの高さを取得 /
/ 固定ナビの場合の処理 /
if (headerSec.classList.contains('fixed')) {
document.documentElement.style.setProperty('--navi-height', `${headerHeight}px`);
}
}
}, 300);
});
/--- ページ内遷移ずれる対策 END ---/
/ ---------------------------
メガメニュー（1段） END
--------------------------- */
</script>

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

//旧CMS用（不要であれば削除）
//新CMS用（不要であれば削除）
と2つ記述を用意している箇所がいくつかありますので必要に応じて削除orコメントアウトを外してください。
※デフォルトでは新CMS用の記述が当たるようにしています。

CSSをコピーする

2025-08-15更新（v1.1.0)

/----- メガメニュー（1段） START v1.1.0-----/
/* --------------------------------
variables（変数）
----------------------------------- /
$mega-navigation_bg_color: #fff; //メガメニューの背景色
$mega-navigation_font_size: 14px; //メガメニューのフォントサイズ（1〜3階層）
$mega-navigation_font_weight: bold; //メガメニューのフォントの太さ（1〜3階層） normal or bold
$mega-navigation_hover_opacity: 1; //メガメニューをホバーした時の透視度
$mega-navigation_bg2_color: #ffad2f; //メガメニューの背景色（2階層以下）
$mega-navigation_text_color: #2d2d2d; //メガメニューのテキストカラー
$mega-navigation_hover_text_color: #ffad2f; //メガメニューをホバーした時のテキストカラー
$mega-navigation_text2_color: #fff; //メガメニューのテキストカラー（2階層以下）

//メガメニュー（1段）ハンバーガーメニュー
$mega-navigation_sp_font_size: 14px; //メガメニュー（SP）時のテキストサイズ（1〜3階層）
$mega-navigation_sp_font_weight: bold; //メガメニュー（SP）時のテキストの太さ（1〜3階層） normal or bold
$mega-navigation_sp_text_color: $mega-navigation_text2_color; //メガメニュー（SP）時のテキストカラー１階層
$mega-navigation_sp_text2_color: $mega-navigation_sp_text_color; //メガメニュー（SP）時のテキストカラー（2階層）
$mega-navigation_sp_text3_color: $mega-navigation_sp_text_color; //メガメニュー（SP）時のテキストカラー（3階層）
$mega-navigation_sp_hover_text_color: #ffad2f; //メガメニュー（SP）時のホバーした時の2階層のテキスト＆矢印のカラー
$mega-navigation_sp_arrow1_color: $mega-navigation_sp_text_color; //メガメニュー（SP）矢印カラー（1階層）
$mega-navigation_sp_arrow2_color: $mega-navigation_sp_text2_color; //メガメニュー（SP）矢印カラー（2階層）
$mega-navigation_sp_bg_color: #fff; //メガメニュー（SP）時の背景色（1階層）
$mega-navigation_sp_bg2_color: $mega-navigation_bg_color; //メガメニュー（SP）時の背景色（２階層）
$mega-navigation_sp_bg3_color: #eee; //メガメニュー（SP）時の背景色（3階層）
$mega-navigation_sp_border-bottom: 1px dashed #ffad2f; //メガメニュー（SP）時のボーダー（hamburger_custom 使用時）
/------------- variables（変数）END -------------/

//初期読み込み時に格納セクションが一瞬見えてしまう（チラつき）防止
.js-megaMenu_contents_sec {
display: none !important;
}
//固定サイドバー対策
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&.js-megaMenu_custom_sec {
&.has-fixed-side {
@media screen and (min-width: 1201px) {
width: calc(100% - 420px);
}
}
}
}
/ SP時 iOSのアドレスバーズレ防止 /
html {
&.is-locked {
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
&::before {
content: '';
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #ffad2f;
}
}
}

/-- メガメニュー（1段）共通設定 --/
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&:is(
.megaMenu_custom_sec,
.megaMenu_down_list_sec,
) {
box-sizing: border-box;
}
}
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&:where(
.megaMenu_custom_sec,
.megaMenu_down_list_sec
) {
width: 100%;
font-family: 'Noto Sans JP', sans-serif;//適宜変更
line-height: 1.5;//適宜変更
letter-spacing: .04em;//適宜変更
.inner {
width: 100% !important;
max-width: 100% !important;
margin: auto;
.row {
.col {
.component {
margin: 10px 0;
a {
text-decoration: none;
&:hover {
opacity: $hover_opacity;
}
}
// CTA共通
&.cta {
margin: 0;
.cta-row {
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
@include breakpoint-sp {
display: block;
}
& + .cta-row {
@include breakpoint-pc {
padding-top: 10px;
}
}
.cta-column {
display: table-cell;
vertical-align: top;
margin: 0;
@include breakpoint-sp {
display: block;
width: 100% !important;
}
}
}
}
}
}
}
}
}
}
/-- メガメニュー（1段）共通設定 END--/

:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
/-- メガメニュー（1段）ナビ部分 --/
&.megaMenu_custom_sec {
background: $mega-navigation_bg_color;
box-shadow: $navigation_box_shadow_common;
position: relative;
z-index: 10;
padding: 0;
// オプションナビゲーション上部固定のとき
&.fixed {
position: sticky;
z-index: 1001;
top: 0;
}
&.is-open {
@include breakpoint-sp {
box-shadow: none;
}
}
.inner {
.row {
&.navigation-cont_row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 20px;
@include breakpoint-sp {
min-height: 51px;
padding: 0;
}
.col {
padding: 0;
&.logo_col {
display: flex !important;
align-items: center;
justify-content: flex-start;
width: auto !important;
@include breakpoint-sp {
padding: 0 0 0 10px;
}
.component {
margin: 0;
&.image {
&.logo_img {
max-width: $header_logo;
img {
@include breakpoint-pc {
max-height: 56px;//ナビhover時の上矢印▲の位置ズレ対策
}
@include breakpoint-sp {
max-height: $header_sp_logo;
}
}
}
}
}
}
&.cont_col {
display: flex !important;
align-items: center;
justify-content: flex-end;
width: auto !important;
@include breakpoint-sp {
padding: 0 60px 0 0;
}
.component {
margin: 0;
&.list {
&.nav_menu_list {
height: 100%;
@include breakpoint-sp {
display: none !important;
}
> ul {
display: flex;
height: 100%;
> li {
display: block;
margin: 0;
padding: 0;
font-size: $mega-navigation_font_size;
color: $mega-navigation_text_color;
&.downMenu {
> a {
position: relative;
&::after {
content: "\f0d7";
font-family: $font_family_awsm6;
margin-left: 5px;
font-size: 16px;
font-weight: 900;
line-height: 1;
color: $mega-navigation_text_color;
}
}
&.is-opened {
> a {
&::before {
content: '';
position: absolute;
left: calc(50% - 3px);
bottom: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent #ffad2f transparent;
transform: translateX(-50%);
}
}
}
}
> a {
display: flex;
align-items: center;
height: 100%;
padding: 20px 10px;
text-decoration: none;
font-weight: $mega-navigation_font_weight;
line-height: 1.2;
color: $mega-navigation_text_color;
&:hover {
color: $mega-navigation_hover_text_color;
opacity: $mega-navigation_hover_opacity;
&::before,
&::after {
color: $mega-navigation_hover_text_color;
}
}
}
}
}
}
}
&.button {
margin-left: 10px;
@include breakpoint-sp {
margin: 0;
}
.button-cont {
a {
&:is(.size-s, .size-m, .size-l) {
@include breakpoint-msp {
min-width: initial;
background: none;
border: none;
border-radius: 0;
font-size: 0;
padding: 5px;
}
&::before {
@include breakpoint-msp {
font-size: 22px;
color: #ffad2f;
margin: 0;
}
}
}
}
}
}
}
}
}
}
}
// ハンバーガーメニュー
.megaMenu_trigger {
cursor: pointer;
width: 60px;
height: 51px;
position: absolute;
right: 0;
top: 0;
background: #ffad2f;
span {
display: inline-block;
width: 30px;
height: 3px;
border-radius: 3px;
background: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: all .4s;
&:nth-child(1) {
top: 15px;
}
&:nth-child(2) {
top: 24px;
}
&:nth-child(3) {
bottom: 15px;
}
}
/* ハンバーガメニューオープン時 /
&.is-active {
span {
&:nth-child(1) {
-webkit-transform: translateY(10px) translateX(-50%) rotate(-45deg);
transform: translateY(10px) translateX(-50%) rotate(-45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
-webkit-transform: translateY(-8px) translateX(-50%) rotate(45deg);
transform: translateY(-8px) translateX(-50%) rotate(45deg);
}
}
}
}
// メインメガメニュー（1段） PC時 {
@include breakpoint-pc {
.main-megaMenu {
display: none;
}
}
// メインメガメニュー（1段） SP時
@include breakpoint-sp {
.main-megaMenu {
height: calc(100vh + 100px);
overflow: auto;
font-family: 'Noto Sans JP', sans-serif;//適宜変更
background: #ffad2f;
padding: 20px 0 250px;
ul {
li {
a {
display: block;
position: relative;
padding: 20px;
text-decoration: none;
font-size: $mega-navigation_sp_font_size;
font-weight: $mega-navigation_sp_font_weight;
line-height: 1.2;
color: $mega-navigation_sp_text_color;
span {
font-weight: inherit;
}
}
/ 2階層目トリガー /
&.downMenu {
a {
padding: 20px 45px 20px 20px;
.toggle_icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
right: 0;
width: 50px;
height: 45px;
transform: translateY(-50%);
&::before,
&::after {
background-color: $mega-navigation_sp_arrow1_color;
}
&::before {
content: '';
width: 2px;
height: 18px;
transform: rotate(0);
-webkit-transform: rotate(0);
z-index: 1;
transition: all .5s ease;
}
&::after {
content: '';
position: relative;
right: 2px;
width: 2px;
height: 18px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transition: all .5s ease;
}
&.is-open {
&::before {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
}
}
}
}
ul {
&.js-level-01-cont {
position: relative;
&:first-of-type {
&::before {
content: '';
position: absolute;
left: 50%;
top: 0;
width: calc(100% - 33px);
height: 0.1rem;
transform: translateX(-50%);
background: #fff;
}
}
}
&:first-of-type {
padding: 5px 0 0;
}
&:last-of-type {
padding: 0 0 5px;
}
.js-level-02 {
a {
padding: 15px 30px 15px calc(20px + 1em);
}
.js-level-03 {
a {
padding: 15px 30px 15px calc(20px + 2em);
}
.js-level-04 {
a {
padding: 15px 30px 15px calc(20px + 3em);
}
}
}
}
}
}
}
}
}
}
}
/-- メガメニュー（1段）メニュー内 --/
&.megaMenu_down_list_sec {
background: $mega-navigation_bg2_color;
color: $mega-navigation_text2_color;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
padding: 20px 0;
.inner {
padding: 20px;
.row {
// 以下、メニュー内のデザインに合わせて適宜変更（不要であれば削除）
&.sub_menu_list_row {
display: flex;
gap: 20px;
& + .sub_menu_list_row {
margin-top: 30px;
}
.col {
padding: 0;
.component {
&.richtext {
// メニュー内タイトル部分
&.sub_menu_title_text {
margin-bottom: 10px;
}
// [お知らせ]リスト
&.megaMenu_list01 {
ul {
display: flex;
flex-direction: column;
li {
display: block;
margin: 0;
padding: 0;
font-size: 16px;
a {
display: block;
padding: 10px 0;
border-bottom: 1px solid #fff;
text-decoration: none;
color: #fff;
&:hover {
opacity: $hover_opacity;
}
}
ul {
margin: 0 0 0 10px !important;
li {
font-size: 14px;
a {
border: none;
}
}
}
}
}
/ 1階層目 /
> ul {
margin: 0;
> li {
& + li {
margin-top: 10px;
}
/ 2階層目 /
> ul {
padding: 5px 0;
}
}
}
}
}
&.list {
// [お知らせ]リスト
&.megaMenu_list02 {
ul {
display: flex;
flex-direction: column;
li {
display: block;
margin: 0;
padding: 0;
font-size: 16px;
a {
display: block;
padding: 10px 0;
text-decoration: none;
font-weight: bold;
color: #fff;
&:hover {
opacity: $hover_opacity;
background: none;
}
}
}
}
}
}
}
}
}
.col {
// ボックスリンク用
&.box_link_col {
position: relative;
&:hover {
opacity: $hover_opacity;
}
}
}
}
}
}
}
/----- メガメニュー（1段） END -----*/

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

CSSをコピーする

2024-09-13更新（v1.0.0）

/-- メガメニュー（1段）編集画面用 START v1.0.0--/
//初期読み込み時に格納セクションが一瞬見えてしまう（チラつき）防止
.js-megaMenu_contents_sec {
display: block !important;
border: 1px solid #f00;
&::before {
content: "メガメニュー格納セクション";
position: absolute;
color: #fff;
background: #f00;
padding: 5px 5px;
right: 0;
top: -24px;
font-size: 14px;
line-height: 1;
}
}
.theme-fo-base .wrapper .contents {
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&.megaMenu_custom_sec {
padding: 20px 0 !important;
.inner {
max-width: 1100px !important;
padding: 0 20px !important;
.row {
&.navigation-cont_row {
.col {
&.logo_col {
width: 20% !important;
}
&.cont_col {
width: 80% !important;
}
}
}
}
}
&.fixed {
position: relative;
top: initial;
border: 1px solid blue;
&::before {
content: "メガメニュー上部固定中（クラス名：fixed） ※固定を外したい場合はこのクラスを外す。";
position: absolute;
color: #fff;
background: blue;
padding: 0 5px;
right: 0;
top: -24px;
}
}
}
&.megaMenu_down_list_sec {
position: relative;
top: initial;
left: initial;
.inner {
.row {
// メガメニューでドロップダウンメニューがついているリンクかどうか判定するためのrow
&.js-downMenu_reference_row {
border: 1px solid red;
background: #000;
&::before {
content: "ナビゲーションのメニュー名と同じものを入れてください。（どのメニューに対応するか判定用。公開画面では非表示の行になります。）";
position: absolute;
color: #fff;
background: red;
padding: 5px 5px;
right: 0;
top: -24px;
font-size: 14px;
line-height: 1;
}
.col {
padding: 10px 20px;
.component {
color: #fff;
&.heading {
:is(h2, h3) {
margin: 0;
}
}
}
}
}
}
}
}
}
}
/-- メガメニュー（1段）編集画面用 END --/

メガメニュー

構造図

内部リンク確認用

設定方法

注意点

JS・CSS・編集画面用CSS

旧リッチテキストパーツ用JS・CSS・編集画面用CSS

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

旧リッチテキストパーツ用
JS・CSS・編集画面用CSS