@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ▼ ボタン全体を囲っている枠の背景色と余白調整 */
#nav_menu-3.mv-bottom-widget.widget_nav_menu {
  background-color: #f3f1e9 !important;
  margin: 0px!important;
  padding: 10px 0 10px 0 !important;
}

/* ▼ ul（メニュー全体）の背景・余白除去と横スクロール対応 */
#nav_menu-3 .menu {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important; /* 横スクロールにするため折り返さない */
  overflow-x: auto !important;
  overflow-y: hidden;
  white-space: nowrap;
  gap: 10px;
  -webkit-overflow-scrolling: touch; /* スムーズスクロール */
  scrollbar-width: none; /* Firefoxでスクロールバー非表示 */
}

/* ▼ スクロールバー非表示（Chrome等） */
#nav_menu-3 .menu::-webkit-scrollbar {
  display: none;
}

/* ▼ li要素を横並び固定に */
#nav_menu-3 .menu li {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  flex: 0 0 auto; /* 横幅を固定し、折り返さない */
}

/* ▼ 各ボタンのスタイル */
#nav_menu-3 .menu a {
  background-color: #fff !important;
  border: 0px solid #fff;
  width: 95px !important;
  height: 40px !important;
  border-radius: 2px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
	font-size: 13px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.4;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
  text-decoration: none;
  color: #333;
}

/* ▼ ホバー時 */
#nav_menu-3 .menu a:hover {
  background-color: #333 !important;
  color: #fff !important;
}

/* ▼ ナビメニュー上のタイトルを中央揃えに */
#nav_menu-3 .widget-title {
  text-align: center !important;
  padding: 0 0 3px 0 !important;
}

/* ▼ コンテンツの余白調整（お好みで） */
.l-content {
  padding-top: 1.5em !important;
}

/* ▼ スクロールヒント（任意） */
#nav_menu-3 .menu li:first-child {
  display: flex;
  align-items: center;
}
#nav_menu-3 .menu li:first-child::before {
  content: 'カテゴリ>> ';
	  font-weight: bold !important;
  color: #333;
  display: inline-block;
  white-space: nowrap;
	  margin: 0 20px 0 20px; /* ← 左に余白を追加 */

}

/* 英語表記の文字サイズなど */
#nav_menu-3 .menu a .en {
  display: block;
  font-size: 10px;
  color: #333;
  margin-top: 2px;
}

#nav_menu-3 .menu a:hover .en {
  color: #fff !important;
}

/* 2行を中央揃え */
#nav_menu-3 .menu a {
  flex-direction: column; /* 上下に並べる */
  text-align: center;
  line-height: 1.2;
}