ロゴマーク

/* ========================================================================== 共通・ベーススタイル ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } ul { list-style: none; } a { text-decoration: none; color: #333; } /* ========================================================================== PC環境のスタイル（768px以上） ========================================================================== */ @media (min-width: 768px) { /* ヘッダーのレイアウト（横並び） */ .header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 20px; } /* スマホ用ボタンはPCでは隠す */ .menu-toggle { display: none; } /* メインメニューの横並び */ .nav-list { display: flex; gap: 20px; } .nav-item { position: relative; } /* PC版ドロップダウンメニューの隠し設定 */ .custom-embedded-nav .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 200px; z-index: 100; padding: 10px 0; } .custom-embedded-nav .dropdown-menu a { display: block; padding: 10px 20px; } /* PC版：マウスホバーでドロップダウンを表示 */ .nav-item.dropdown:hover .dropdown-menu { display: block; } } /* ========================================================================== スマホ環境のスタイル（767px以下） ========================================================================== */ @media (max-width: 767px) { .header-container { display: flex; justify-content: space-between; padding: 15px; } /* メインメニューを画面外、またはアコーディオン用に縦並びにする */ .custom-embedded-nav { display: none; /* 必要に応じてハンバーガー開閉と連動 */ position: absolute; top: 60px; left: 0; width: 100%; background: #fff; padding: 20px; } .nav-list { display: flex; flex-direction: column; gap: 15px; } /* スマホ版ドロップダウンは初期非表示（jQueryで制御） */ .custom-embedded-nav .dropdown-menu { display: none; background: #f9f9f9; padding-left: 15px; margin-top: 10px; } } $(function() { // メニューのクリックイベント $('.custom-embedded-nav .nav-link').on('click', function(e) { // スマホ環境（767px以下）の場合のみクリック処理を実行 if (window.matchMedia('(max-width: 767px)').matches) { var $dropdown = $(this).next('.dropdown-menu'); if ($dropdown.length > 0) { e.preventDefault(); // リンク遷移を防止 e.stopPropagation(); // イベントのバブリングを防止 // 他に開いているドロップダウンメニューがあれば先に閉じる $('.custom-embedded-nav .dropdown-menu').not($dropdown).slideUp(200); // 対象のメニューをスライド開閉 $dropdown.slideToggle(200); } } }); // スマホ環境でメニュー以外の場所をタップした際にメニューを自動で閉じる $(document).on('click touchend', function(e) { if (!$(e.target).closest('.custom-embedded-nav').length) { if (window.matchMedia('(max-width: 767px)').matches) { $('.custom-embedded-nav .dropdown-menu').slideUp(200); } } }); });