.elementor-401 .elementor-element.elementor-element-283ce92{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-401 .elementor-element.elementor-element-b8bd1a5{z-index:999;}.elementor-401 .elementor-element.elementor-element-18d3e1e{width:100%;max-width:100%;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-b8bd1a5 *//* =================================================
   HEADER
================================================= */
.site-header {
  height: 90px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 24px;
  overflow: hidden;
}

.header-inner {
  display: flex;
  align-items: center;
  width: 100%;
}

/* =================================================
   LOGO ANIMATION
================================================= */
.logo-car {
  width: 280px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: visible;
}

.logo-car img:nth-child(1) {
  height: 65px;
  transform: translateX(100vw);
  animation: car-arrival 4.5s cubic-bezier(.25,1,.5,1) forwards;
}

.logo-car img:nth-child(2) {
  height: 60px;
  opacity: 0;
  animation: logo-fadein .5s ease-out 3.8s forwards;
}

@keyframes car-arrival {
  0% { transform: translateX(100vw); }
  85% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

@keyframes logo-fadein {
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =================================================
   GLOBAL NAV (PC)
================================================= */
.global-nav {
  margin-left: auto;
  margin-right: 110px;
  display: flex;
  align-items: center;
  height: 90px;
}

.global-nav ul {
  display: flex;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.global-nav a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  transition: .3s;
  position: relative;
  padding-bottom: 8px;
}

.global-nav a:hover,
.global-nav a.is-active {
  color: #e65330;
}

.global-nav a.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: #e65330;
  border-radius: 50%;
  animation: ppochi-fade .4s ease-out forwards;
}

@keyframes ppochi-fade {
  from { opacity: 0; transform: translate(-50%, 5px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* =================================================
   HAMBURGER BUTTON
================================================= */
.fab-menu {
  position: fixed;
  top: 10px;
  right: 15px;
  z-index: 9999;
}

.hamburger {
  width: 70px;
  height: 70px;
  background: #167f4b;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hamburger .stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hamburger .line {
  width: 30px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: .3s;
}

.hamburger .label {
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  margin-top: 2px;
}

/* メニューが開いている時のボタン変形（※クラス名はHTMLに合わせて適宜調整してください） */
.is-open ~ .fab-menu .line:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}
.is-open ~ .fab-menu .line:nth-child(2) {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* =================================================
   RESPONSIVE
================================================= */
@media (max-width: 1024px) {
  .global-nav {
    display: none;
  }

  .logo-car {
    width: 220px;
    height: 45px;
  }

  .logo-car img:nth-child(1) {
    height: 35px;
  }

  .logo-car img:nth-child(2) {
    height: 25px;
  }
}

/* リストの不要な装飾をリセット */
.global-nav ul,
.global-nav li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.global-nav li::before {
  content: none !important;
  display: none !important;
}

/* =================================================
   FULL SCREEN MENU LAYOUT (再現)
================================================= */
.maruzen-menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #f9f9e9; /* 背景のクリーム色 */
  z-index: 9998;
  display: none; /* JSで.is-open時に表示 */
  overflow-y: auto;
  padding: 60px 20px;
  box-sizing: border-box;
}

.maruzen-menu-wrap.is-open {
  display: block;
}

.menu-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* 2カラムレイアウト */
.flex-columns {
  display: flex;
  justify-content: flex-start;
  gap: 60px;
  margin-bottom: 40px;
}

/* 各列の幅調整 */
.menu-col:nth-child(1) { width: 30%; }
.menu-col:nth-child(2) { width: 65%; }

/* カテゴリタグ (SERVICE / INFORMATION) */
.category-tag {
  display: inline-block;
  padding: 8px 30px;
  border-radius: 100px;
  font-weight: bold;
  font-size: 24px;
  color: #fff;
  margin-bottom: 25px;
  min-width: 300px;
  text-align: center;
}

.tag-green { background-color: #b3cc86; } /* SERVICE用 */
.tag-gray { background-color: #dbb358; }  /* INFORMATION用（スクショの色味） */

/* リストスタイル */
.nav-main, .nav-info-style, .grandchild-group {
  list-style: none;
  padding: 0;
}

/* メインの大きな項目 (HOME, 業務案内, 会社概要) */
.nav-parent, .section-label-link, .nav-main > li > a {
  font-size: 26px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

/* 緑の四角アイコン（擬似要素） */
.nav-main > li > a::before, 
.nav-info-style > li > a::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #b3cc86;
  margin-right: 12px;
  flex-shrink: 0;
}

/* 子要素（家庭ごみ、所有車両など）の横線ライン */
.nav-info-style li, .grandchild-group li {
  margin-bottom: 10px;
}

.nav-info-style a, .grandchild-group a {
  text-decoration: none;
  color: #333;
  font-size: 20px;
  display: flex;
  align-items: center;
}

/* 黄色の横棒 */
.nav-info-style ul li a::before,
.grandchild-group li a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background-color: #dbb358;
  margin-right: 10px;
}

/* INFORMATION内の2段組み (会社概要とその他) */
.info-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* 下部エリア (フッター) */
.menu-footer {
  margin-top: 40px;
  border-top: 1px solid #ccc;
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-info .company-name {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
}

.contact-box {
  display: flex;
  gap: 40px;
  align-items: center;
}

.tel-number {
  font-size: 32px;
  font-weight: bold;
  color: #555;
  text-decoration: none;
}

.btn-contact {
  background-color: #e65330;
  color: #fff;
  padding: 15px 40px;
  border-radius: 40px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .flex-columns { flex-direction: column; }
  .menu-col { width: 100% !important; }
  .info-two-column { grid-template-columns: 1fr; }
  .menu-footer { flex-direction: column; }
  .contact-box { flex-direction: column; align-items: flex-start; }
}
/* =================================================
   レイアウト崩れの修正
================================================= */

/* メニュー全体のコンテナ */
.maruzen-menu-wrap {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background-color: #f9f9e9;
  z-index: 9998;
  padding: 40px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* 中央の大きなロゴ・トラックを背景として配置 */
.header-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%); /* 位置は適宜調整 */
  opacity: 0.1; /* 透かして背景のように見せる場合 */
  z-index: 0;
  pointer-events: none; /* クリックを邪魔しない */
  width: 80%;
  max-width: 800px;
}

.header-logo img {
  width: 100%;
  height: auto;
}

/* コンテンツ部分を前面に出す */
.flex-columns {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 20px;
}

/* 左カラム (SERVICE) */
.menu-col:nth-child(1) {
  flex: 0 0 250px;
}

/* 右カラム (INFORMATION) */
.menu-col:nth-child(2) {
  flex: 1;
}

/* INFORMATIONの中身を3つに分ける（会社概要 | SDGs | 連絡先） */
.info-two-column {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1.5fr; /* 3つの列の比率 */
  gap: 20px;
  list-style: none;
  padding: 0;
}

/* 子要素の文字サイズ調整 */
.nav-info-style a, .grandchild-group a {
  font-size: 16px; /* 18px〜20pxだと改行しやすいため少し下げます */
  white-space: nowrap; /* 勝手に改行させない */
}

/* 会社情報のエリア */
.footer-info {
  margin-top: 0; /* flex-columns内で並べるため */
  padding-left: 20px;
  border-left: 1px solid #ccc;
}

.company-name {
  font-size: 18px !important;
  margin-top: 0;
}

/* お問い合わせボタンの縦長解消 */
.btn-contact {
  padding: 10px 20px;
  font-size: 16px;
  width: fit-content;
}

/* お電話の文字 */
.tel-number {
  font-size: 24px;
}
/* =================================================
   全画面メニュー再現CSS
================================================= */
.maruzen-menu-wrap {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background-color: #f9f9e9; /* 背景のクリーム色 */
  z-index: 9998;
  padding: 80px 40px;
  box-sizing: border-box;
  display: none; /* JSで.is-open時に表示 */
  overflow-y: auto;
}

.maruzen-menu-wrap.is-open {
  display: block;
}

.menu-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------
   背景グラフィック（トラックと巨大ロゴ）
------------------------------------------------- */
.menu-bg-graphics {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 900px;
  z-index: 1;
  opacity: 0.15; /* 1枚目のような薄い透かし */
  pointer-events: none;
  text-align: center;
}

.bg-truck { width: 70%; margin-bottom: -50px; }
.bg-logo { width: 90%; }

/* -------------------------------------------------
   コンテンツレイアウト
------------------------------------------------- */
.menu-main-content {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.col-service { flex: 0 0 280px; }
.col-info-group { flex: 1; }

/* カテゴリタグ */
.category-tag {
  display: inline-block;
  padding: 5px 30px;
  border-radius: 15px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 30px;
}
.tag-green { background-color: #b3cc86; }
.tag-gold { background-color: #dbb358; }

/* -------------------------------------------------
   リストデザイン
------------------------------------------------- */
.nav-list { list-style: none; padding: 0; margin: 0; }
.nav-list > li { margin-bottom: 20px; }

.nav-parent {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* 緑の四角アイコン */
.nav-parent::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  background-color: #b3cc86;
  margin-right: 12px;
}

/* 子リスト（業務案内の中身など） */
.sub-list, .sub-list-line {
  list-style: none;
  padding-left: 22px;
  margin-top: 10px;
}

.sub-list li, .sub-list-line li { margin-bottom: 8px; }

.sub-list a, .sub-list-line a {
  font-size: 18px;
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* 緑の小四角（業務案内用） */
.sub-list a::before {
  content: "";
  width: 15px; height: 2px;
  background-color: #b3cc86;
  margin-right: 10px;
}

/* 黄色の横棒（会社概要用） */
.sub-list-line a::before {
  content: "";
  width: 15px; height: 2px;
  background-color: #dbb358;
  margin-right: 10px;
}

/* お知らせ・ブログなどの並び */
.nav-list-inline {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}
.nav-list-inline li { margin-bottom: 15px; }

/* -------------------------------------------------
   右側：連絡先エリア (CONTACT)
------------------------------------------------- */
.info-split {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.info-contact {
  flex: 0 0 320px;
  border-left: 1px solid #ccc;
  padding-left: 30px;
}

.comp-name { font-size: 20px; font-weight: bold; margin: 0; }
.comp-address { font-size: 14px; margin-bottom: 30px; }

.tel-area p { font-size: 14px; margin-bottom: 5px; }
.tel-link {
  font-size: 28px!important;
  font-weight: bold;
  color: #444;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tel-link img { width: 25px; }
.tel-time { font-size: 13px; color: #666; }

.btn-mail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #e65330;
  color: #fff;
  text-decoration: none;
  padding: 15px;
  border-radius: 10px;
  margin-top: 20px;
  font-weight: bold;
}
.btn-mail img { width: 20px; }

/* -------------------------------------------------
   モバイル対応
------------------------------------------------- */
@media (max-width: 900px) {
  .menu-main-content, .info-split {
    flex-direction: column;
  }
  .info-contact {
    border-left: none;
    padding-left: 0;
    margin-top: 40px;
  }
}
/* =================================================
   背景グラフィックの削除と整理
================================================= */
/* 前回のHTMLで追加した背景グラフィック全体を非表示にする */
.menu-bg-graphics, .menu-bg-graphics * {
  display: none !important;
}

/* 2. トラックの画像だけは残して、少し薄くする（1枚目の再現） */
/* ※HTMLが「トラック単体」と「巨大ロゴ単体」に分かれている場合のみ */
/* .bg-truck { display: block !important; opacity: 0.1; } */
/* .bg-logo { display: none !important; } */

/* コンテンツ部分を中央に寄せる（ロゴを消して空いたスペースを埋める） */
.menu-main-content {
  justify-content: center; /* 左右に広げすぎない */
  gap: 80px; /* SERVICEとINFORMATIONの間隔を広げる */
}


/* 帯の中の矢印アイコン（擬似要素） */
.left-sticky-band::after {
  content: "›"; /* 右矢印、画像を使わない簡便な方法 */
  display: block;
  font-size: 24px;
  margin-top: 15px;
  font-weight: normal;
}
/* INFORMATION内のすべてのリンクの色を統一（青色を上書き） */
.col-info-group a,
.nav-list-inline a {
  color: #333 !important; /* 黒に変更 */
  text-decoration: none;
  font-size: 20px; /* 会社概要と同じサイズに */
  font-weight: bold;
  display: flex;
  align-items: center;
  transition: color 0.3s;
}

/* ホバー時に色を変える（任意） */
.col-info-group a:hover {
  color: #e65330 !important;
}

/* SDGs〜スタッフブログにも「緑の四角」アイコンを付ける */
.nav-list-inline {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.nav-list-inline li {
  margin-bottom: 20px; /* 項目間の余白 */
}

.nav-list-inline a::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #b3cc86; /* SERVICE等と同じ緑色 */
  margin-right: 12px;
  flex-shrink: 0;
}
/* -------------------------------------------------
   メールでお問い合わせボタンの修正
------------------------------------------------- */
.btn-mail, 
.btn-contact {
  background-color: #e65330 !important; /* オレンジ赤 */
  color: #ffffff !important;           /* 文字色を白に */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;                           /* アイコンと文字の間隔 */
  padding: 15px 30px;                  /* 上下左右の余白を広げてゆったりさせる */
  border-radius: 10px;                 /* 角丸 */
  font-weight: bold;
  font-size: 16px!important;                     /* 文字サイズ */
  width: 100%;                         /* 横幅いっぱい、または fit-content */
  max-width: 320px;
  box-sizing: border-box;
  transition: opacity 0.3s;
}

/* ボタン内のアイコンの色を白にする（SVGやアイコンフォントの場合） */
.btn-mail img, 
.btn-contact img {
  width: 22px;
  height: auto;
  filter: brightness(0) invert(1); /* 黒いアイコン画像を強制的に白くする魔法のコード */
}

/* ホバー時の演出（少し薄くする） */
.btn-mail:hover, 
.btn-contact:hover {
  opacity: 0.8;
  color: #ffffff !important;
}
/* =================================================
   干渉を解消し、文字色を強制的に正す設定
================================================= */

/* 1. お問い合わせボタンを強制的に白文字・白アイコンにする */
.maruzen-menu-wrap .btn-mail, 
.maruzen-menu-wrap .btn-contact,
.maruzen-menu-wrap a.btn-mail,
.maruzen-menu-wrap a.btn-contact {
  color: #ffffff !important; /* 何が何でも白 */
  background-color: #e65330 !important;
}

/* 2. ボタン内のアイコン画像を強制的に白くする */
.maruzen-menu-wrap .btn-mail img, 
.maruzen-menu-wrap .btn-contact img {
  filter: brightness(0) invert(1) !important;
}

/* 3. ボタン以外のテキストリンク（SDGs、お知らせ等）は黒にする */
/* ボタン（.btn-mail）を除外する設定を追加して干渉を防ぐ */
.col-info-group a:not(.btn-mail):not(.btn-contact),
.nav-list-inline a {
  color: #333 !important;
  text-decoration: none;
}

/* 4. [おまけ] 会社名などのテキストの重なりを防ぐ微調整 */
.info-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* 追加したロゴ画像のサイズ調整 */
.comp-logo {
  margin-bottom: 20px;
}

.comp-logo img {
  width: 100%;
  max-width: 280px; /* デザインに合わせて調整 */
  height: auto;
  display: block;
}

/* =================================================
   ロゴ調整 & アクティブ色・ホバー色の復活
================================================= */

/* 追加したロゴのサイズ調整 */
.comp-logo {
  margin-bottom: 15px;
}
.comp-logo img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
}

/* 社名テキストを非表示（HTMLから消した場合は不要ですが念のため） */
.info-contact .comp-name {
  display: none;
}

/* --- ナビゲーションの色設定（復活） --- */

/* 全画面メニュー内のリンク共通（通常時） */
.maruzen-menu-wrap a {
  transition: color 0.3s ease;
}

/* ホバーした時とアクティブ（現在地）の時にオレンジ赤にする */
.maruzen-menu-wrap a:hover,
.maruzen-menu-wrap a.is-active,
.global-nav a:hover,
.global-nav a.is-active {
  color: #e65330 !important;
}

/* アクティブ時のポッチ（丸）も復活させる場合（global-nav用） */
.global-nav a.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: #e65330;
  border-radius: 50%;
  animation: ppochi-fade .4s ease-out forwards;
}

/* --- ボタンの白文字を死守（再掲） --- */
.maruzen-menu-wrap .btn-mail,
.maruzen-menu-wrap .btn-contact {
  color: #ffffff !important; /* ここだけはオレンジ赤にならないように固定 */
  background-color: #e65330 !important;
}

.maruzen-menu-wrap .btn-mail img {
  filter: brightness(0) invert(1) !important;
}
/* =================================================
   アクティブ・ホバー時の色（最優先設定）
================================================= */

/* 全画面メニューとヘッダーナビ両方のアクティブ色 */
.maruzen-menu-wrap a.active-page,
.maruzen-menu-wrap a.is-active,
.global-nav a.active-page,
.global-nav a.is-active {
  color: #e65330 !important;
}

/* ホバー時も同じ色にする */
.maruzen-menu-wrap a:hover,
.global-nav a:hover {
  color: #e65330 !important;
}

/* アクティブ時のポッチ（ヘッダー用） */
.global-nav a.active-page::after,
.global-nav a.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: #e65330;
  border-radius: 50%;
  display: block;
}
/* =================================================
   INFORMATIONカラムも含めたアクティブ色強制適用
================================================= */

/* 1. 通常のリンク色設定（既存の設定を邪魔しないよう調整） */
.maruzen-menu-wrap .col-info-group a:not(.btn-mail):not(.btn-contact) {
  color: #333; /* 基本は黒 */
}

/* 2. アクティブ時の色（!importantを重ねて最優先にする） */
.maruzen-menu-wrap .col-info-group a.active-page,
.maruzen-menu-wrap .col-info-group a.is-active,
.maruzen-menu-wrap .nav-list-inline a.active-page,
.maruzen-menu-wrap .nav-list-inline a.is-active {
  color: #e65330 !important; /* オレンジ赤を強制 */
}

/* 3. アクティブ時の横棒（会社概要の子要素）の色も変える場合 */
.maruzen-menu-wrap .sub-list-line a.active-page::before {
  background-color: #e65330 !important;
}

/* 4. アクティブ時の緑の四角（SDGs〜スタッフブログ）の色も変える場合 */
.maruzen-menu-wrap .nav-list-inline a.active-page::before {
  background-color: #e65330 !important;
}
/* =================================================
   INFORMATION内 子要素の書体統一（サイズ・太さ）
================================================= */

/* すべての子要素リンク（家庭ごみ〜プライバシーポリシー）を統一 */
.maruzen-menu-wrap .sub-list a, 
.maruzen-menu-wrap .sub-list-line a,
.maruzen-menu-wrap .grandchild-group a {
  font-size: 20px !important;    /* サイズを20pxに固定 */
  font-weight: bold !important;  /* すべて太字にする */
  color: #333;                   /* 基本は黒 */
}

/* アクティブ時の色（ここでも念のため強制） */
.maruzen-menu-wrap .sub-list a.active-page,
.maruzen-menu-wrap .sub-list-line a.active-page {
  color: #e65330 !important;
}

/* INFORMATION側の横棒（ゴールド）の太さ微調整 */
.maruzen-menu-wrap .sub-list-line a::before {
  width: 18px;    /* 棒の長さ */
  height: 3px;    /* 棒の太さを少し増して視認性アップ */
  background-color: #dbb358;
  margin-right: 10px;
}

/* アクティブ時は横棒もオレンジ赤にする */
.maruzen-menu-wrap .sub-list-line a.active-page::before {
  background-color: #e65330 !important;
}
/* =================================================
   INFORMATIONカラムの「■」の色をゴールドに変更
================================================= */

/* SDGs〜スタッフブログの「■」をゴールドにする */
.maruzen-menu-wrap .nav-list-inline a::before {
  background-color: #dbb358 !important; /* カテゴリタグと同じ色 */
}

/* 会社概要の「■」をゴールドにする */
.maruzen-menu-wrap .col-info-group .nav-parent::before {
  background-color: #dbb358 !important;
}

/* --- アクティブ時の挙動 --- */

/* アクティブな時は「■」もオレンジ赤（#e65330）にする */
.maruzen-menu-wrap .col-info-group a.active-page::before,
.maruzen-menu-wrap .nav-list-inline a.active-page::before {
  background-color: #e65330 !important;
}
/* =================================================
   アクティブ時も「■」と「横棒」の色を固定する設定
================================================= */

/* 1. SERVICEカラムの「■」は常に緑に固定 */
.maruzen-menu-wrap .col-service .nav-parent::before,
.maruzen-menu-wrap .sub-list a::before {
  background-color: #b3cc86 !important;
}

/* 2. INFORMATIONカラムの「■」と「横棒」は常にゴールドに固定 */
/* 会社概要の■ */
.maruzen-menu-wrap .col-info-group .nav-parent::before,
/* SDGs〜スタッフブログの■ */
.maruzen-menu-wrap .nav-list-inline a::before,
/* 所有車両〜プライバシーポリシーの横棒 */
.maruzen-menu-wrap .sub-list-line a::before {
  background-color: #dbb358 !important;
}

/* 3. 文字だけをアクティブ色（オレンジ赤）にする */
.maruzen-menu-wrap a.active-page,
.maruzen-menu-wrap a.is-active {
  color: #e65330 !important;
}
/* =================================================
   アクティブ時の文字色を強制的にオレンジ赤にする
================================================= */

/* 1. すべてのメニューリンクについて、アクティブ時は文字だけを色変え */
.maruzen-menu-wrap a.active-page,
.maruzen-menu-wrap a.is-active,
.maruzen-menu-wrap .col-info-group a.active-page,
.maruzen-menu-wrap .nav-list-inline a.active-page,
.maruzen-menu-wrap .sub-list a.active-page,
.maruzen-menu-wrap .sub-list-line a.active-page {
  color: #e65330 !important; /* 何が何でもこの色にする */
}

/* 2. ■と横棒の色は指定の色で固定（アクティブ時も変えない） */
/* SERVICE側の■ */
.maruzen-menu-wrap .col-service .nav-parent::before,
.maruzen-menu-wrap .sub-list a::before {
  background-color: #b3cc86 !important;
}

/* INFORMATION側の■と横棒 */
.maruzen-menu-wrap .col-info-group .nav-parent::before,
.maruzen-menu-wrap .nav-list-inline a::before,
.maruzen-menu-wrap .sub-list-line a::before {
  background-color: #dbb358 !important;
}

/* 3. ホバー時もオレンジ赤にする */
.maruzen-menu-wrap a:hover {
  color: #e65330 !important;
}
/* お問い合わせボタン：active-pageクラスがついても、ホバーしても「白」を絶対維持 */
.maruzen-menu-wrap a.btn-mail,
.maruzen-menu-wrap a.btn-mail.active-page,
.maruzen-menu-wrap a.btn-mail:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ボタン内のアイコンも白く維持 */
.maruzen-menu-wrap a.btn-mail img {
  filter: brightness(0) invert(1) !important;
}
/* =================================================
   アクティブ時に「■」や「横棒」もオレンジにする設定
================================================= */

/* 1. SERVICE側の親メニュー（HOME・業務案内）の■ */
.maruzen-menu-wrap .col-service .nav-parent.active-page::before,
.maruzen-menu-wrap .col-service a.active-page::before {
  background-color: #e65330 !important;
}

/* 2. SERVICE側の子メニュー（家庭ごみ〜）の横棒 */
.maruzen-menu-wrap .sub-list a.active-page::before {
  background-color: #e65330 !important;
}

/* 3. INFORMATION側の親メニュー（会社概要）の■ */
.maruzen-menu-wrap .col-info-group .nav-parent.active-page::before,
.maruzen-menu-wrap .col-info-group a.active-page::before {
  background-color: #e65330 !important;
}

/* 4. INFORMATION側の中段（SDGs〜）の■ */
.maruzen-menu-wrap .nav-list-inline a.active-page::before {
  background-color: #e65330 !important;
}

/* 5. INFORMATION側の下段（所有車両〜）の横棒 */
.maruzen-menu-wrap .sub-list-line a.active-page::before {
  background-color: #e65330 !important;
}

/* =================================================
   RESPONSIVE (Tablet & Mobile)
================================================= */

@media (max-width: 900px) {
  /* 1. 指定のパッカー車画像を非表示 */
  img[src*="packer1.svg"],
  .hide-on-mobile {
    display: none !important;
  }

  /* 2. PC用グローバルメニュー(Gメニュー)を非表示 */
  .global-nav {
    display: none !important;
  }

  /* 3. ヘッダー自体の高さを少しコンパクトに（任意） */
  .site-header {
    height: 70px;
    padding: 0 15px;
  }

  /* 4. ロゴのサイズ調整（スマホで収まりを良くする） */
  .logo-car {
    width: auto; /* 幅固定を解除 */
    height: 50px;
  }

  /* ロゴ内の「動くトラック」サイズ調整 */
  .logo-car img:nth-child(1) {
    height: 40px;
  }

  /* ロゴ内の「社名ロゴ」サイズ調整 */
  .logo-car img:nth-child(2) {
    height: 35px;
  }

  /* 5. ハンバーガーボタン(fab-menu)の位置調整 */
  .fab-menu {
    top: 5px;
    right: 10px;
  }

  .hamburger {
    width: 60px;
    height: 60px;
  }

  /* 6. 全画面メニューが開いた時の調整 */
  .maruzen-menu-wrap {
    padding: 60px 20px 40px; /* 上部の余白を調整 */
  }

  .menu-main-content {
    flex-direction: column; /* 縦並びに変更 */
    gap: 30px;
  }

  .col-service, 
  .col-info-group {
    flex: none;
    width: 100%;
  }

  /* 会社情報・連絡先エリアの縦並び */
  .info-split {
    flex-direction: column;
    gap: 20px;
  }

  .info-contact {
    border-left: none; /* 縦並びなので線を消す */
    padding-left: 0;
    border-top: 1px solid #ccc; /* 代わりに上に線を引く */
    padding-top: 20px;
  }

  .tel-link {
    font-size: 24px !important;
  }

  .btn-mail {
    max-width: 100%; /* ボタンを横幅いっぱいに */
  }
}/* End custom CSS */