/* Theme Name:horsejapan Theme URI: Description:for HorseJapan Theme Template:shapely Author:Design Site 7110 Author URI:https://ds7110.jp/ Version:1.00 */ .main-navigation .menu > li ul { background-color: #000000; } /* ========================================= Mobile menu toggle: FA icon + OPEN/CLOSE PCでは非表示 モバイル（〜991px）のみ有効 ========================================= */ /* ===== PC表示（992px以上）は非表示 ===== */ @media screen and (min-width: 992px){ #site-navigation .mobile-toggle{ display: none !important; } } /* ===== モバイル表示（991px以下）のみ有効 ===== */ @media screen and (max-width: 991px){ /* 元の横長ロゴ(img)は隠す */ #site-navigation .site-title-container .custom-logo{ display: none !important; } /* ロゴリンク(a)をシンボル背景で表示 */ #site-navigation .site-title-container .custom-logo-link{ display: block; background-image: url("http://horsejapan.com/wp-content/uploads/2026/02/horse-japan_symbol.png"); background-repeat: no-repeat; background-position: center; background-size: contain; /* モバイルでロゴが主張しすぎないサイズ感（可変＋上限下限） */ width: 10vw; max-width: 44px; min-width: 32px; aspect-ratio: 1 / 1; } /* ヘッダーを折り返しOKにして、2段構成にする */ #site-navigation .flex-row{ display: flex !important; flex-wrap: wrap !important; align-items: center !important; } /* ロゴ（1行目の左） */ #site-navigation .site-title-container{ order: 1; flex: 0 0 auto !important; width: auto !important; } /* ハンバーガー（1行目の右） */ #site-navigation .mobile-toggle{ order: 2; flex: 0 0 auto !important; margin-left: auto !important; } /* メニュー領域は “必ず2行目” に落とす（これが超重要） */ #site-navigation .module-group.right{ order: 3; flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; } /* 縦並び */ #site-navigation .mobile-toggle{ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; line-height: 1 !important; } /* 疑似要素はブロック化 */ #site-navigation .mobile-toggle::before, #site-navigation .mobile-toggle::after{ display: block; color: #fff; } /* 元の は消す */ #site-navigation .mobile-toggle i{ display: none !important; } /* 閉：bars + OPEN */ #site-navigation .mobile-toggle::before{ content: "\f0c9"; /* bars */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 20px; line-height: 1; } #site-navigation .mobile-toggle::after{ content: "OPEN"; font-weight: 700; font-size: 11px; letter-spacing: 1px; margin-top: 4px; } /* 開：xmark + CLOSE */ #site-navigation .nav-bar.nav-open .mobile-toggle::before{ content: "\f00d"; /* xmark */ } #site-navigation .nav-bar.nav-open .mobile-toggle::after{ content: "CLOSE"; } .shapely-dropdown { border: 1px solid #ffffff; color: #ffffff; } .main-navigation .menu > li ul { background-color: #000000 !important; } } /* ========================================= パララックス（parallax-window）: モバイル縦だけ調整 ========================================= */ @media screen and (max-width: 991px) and (orientation: portrait){ /* 高さの主導権を parallax-window 側に持たせる */ .shapely_home_parallax .parallax-window.fullscreen{ height: 60svh !important; /* 60〜80svhで調整 */ min-height: 60svh !important; } /* 親sectionが102.6vhとかを持ってても暴れないように */ .shapely_home_parallax section.cover.fullscreen{ height: auto !important; min-height: 0 !important; } /* 背景として描画されている場合の中心（効く環境だけ効く） */ .shapely_home_parallax .parallax-window{ background-position: 50% 50% !important; /* 左右が切れるなら、まずここは触らず高さを詰める */ background-size: cover !important; } } /* ========================================= Mobile Menu - Final (Shapely) ・行まるごとリンク（タップ領域を行全体に） ・親メニューだけ波線（dotted） ・子メニュー（配下）は必ず「下」に展開（右回り込み防止） ・子メニュー（配下）には波線を付けない ・↓アイコンを消して「＋ / −」切替（ul.dropdown-menu.active 対応） ========================================= */ @media screen and (max-width: 991px){ /* ------------------------------- 親メニュー（トップ階層） ------------------------------- */ /* 親li：a と toggle を同一行にして、下に波線 */ .main-navigation .menu > li{ display: flex; align-items: center; flex-wrap: nowrap; /* 子があるliは下で wrap に切替 */ border-bottom: 2px dotted rgba(255,255,255,0.4); } .main-navigation .menu > li:last-child{ border-bottom: none; } /* 親リンク：行まるごとクリック */ .main-navigation .menu > li > a{ flex: 1 1 auto; min-width: 0; /* 文字の縦潰れ/変な折返し抑制 */ display: block; padding: 14px 16px; box-sizing: border-box; border: none; /* 波線はli側で管理 */ overflow-wrap: break-word; /* 長い文言の保険 */ } /* ------------------------------- サブメニュー（配下）の展開レイアウト ------------------------------- */ /* 子を持つ親だけ：2段構成にできるよう wrap を許可 */ .main-navigation .menu > li.menu-item-has-children{ flex-wrap: wrap; } /* 配下ulは必ず次の行で100% */ .main-navigation .menu > li.menu-item-has-children > ul.dropdown-menu{ flex: 0 0 100%; width: 100%; position: static; /* 右に飛ぶ/重なるのを防ぐ */ float: none; margin: 0; padding: 0; } /* 配下li：横並びにする必要なし（toggleも無い想定） */ .main-navigation .menu > li.menu-item-has-children > ul.dropdown-menu > li{ display: block; border-bottom: none !important; /* 配下は波線なし */ } /* 配下リンク：インデント＋行全体クリック。波線は付けない */ .main-navigation .menu > li.menu-item-has-children > ul.dropdown-menu > li > a{ display: block; width: 100%; padding: 12px 16px 12px 28px; /* 左インデント */ box-sizing: border-box; border: none !important; /* aに波線が残るケース潰し */ } /* ------------------------------- 「＋ / −」トグル（配下開閉ボタン） ------------------------------- */ /* 既存の矢印アイコンを消す */ .main-navigation .dropdown-toggle.shapely-dropdown i{ display: none !important; } /* トグルの“囲い”サイズ（必要ならここで調整） */ .main-navigation .dropdown-toggle.shapely-dropdown{ display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto; } /* デフォルト：＋ */ .main-navigation .dropdown-toggle.shapely-dropdown::before{ content: "+"; font-size: 16px; font-weight: 700; line-height: 1; color: #fff; } /* 開いている時：−（ul.dropdown-menu.active が付く仕様に対応） */ .main-navigation li.menu-item-has-children:has(> ul.dropdown-menu.active) > .dropdown-toggle.shapely-dropdown::before{ content: "−"; } }