/**
 * common-overrides.css
 * WPテーマへの共通上書きスタイル（ヘッダー・フッター・ベース）
 * 全ページから読み込む共有CSS
 */

/* ============================================================
   ① 横幅スクロール修正
   WPテーマの main.css が #header, #main, #footer に
   min-width:1384px を設定しているため静的サイトでは解除する
   ============================================================ */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
#header, #main, #footer {
  min-width: 0 !important;
}
html.wp-toolbar {
  padding-top: 0 !important;
}

/* ============================================================
   ② ヘッダーナビ 1行化
   フォントサイズ・パディング・min-width を縮小
   ============================================================ */
#header-nav .nav--list > li > a {
  font-size: 1.35rem !important;
  padding: 0 10px !important;
  min-width: 0 !important;
}

/* ============================================================
   ③ プロダクト一覧・サービス紹介 ドロップダウン
   コンパクトな縦リスト（白背景・アイコン+名前+矢印）
   ============================================================ */

/* li を基準点にする → 項目の真下に出る */
#header-nav .nav--products,
#header-nav .nav--service {
  position: relative !important;
}

/* ドロップダウン全体：固定幅の縦リスト */
#header-nav .nav--products .nav--child,
#header-nav .nav--service .nav--child {
  width: 320px !important;
  left: 0 !important;
  right: auto !important;
  margin: 0 !important;
}

#header-nav .nav--products .nav--child > ul,
#header-nav .nav--service .nav--child > ul {
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  border-radius: 0 0 8px 8px;
  padding: 4px 0 !important;
}

/* 各項目：縦1列 */
#header-nav .nav--products .nav--child > ul li,
#header-nav .nav--service .nav--child > ul li {
  width: 100% !important;
  float: none !important;
  border-bottom: 1px solid #f0f0f0;
}
#header-nav .nav--products .nav--child > ul li:last-child,
#header-nav .nav--service .nav--child > ul li:last-child {
  border-bottom: none;
}

/* リンク：flexbox 横並び */
#header-nav .nav--products .nav--child > ul li a,
#header-nav .nav--service .nav--child > ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: transparent !important;
  color: #1a1a1a !important;
  text-align: left !important;
  position: relative !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}
#header-nav .nav--products .nav--child > ul li a:hover,
#header-nav .nav--service .nav--child > ul li a:hover {
  background: #f6f6f6 !important;
}

/* 矢印 */
#header-nav .nav--products .nav--child > ul li a::after,
#header-nav .nav--service .nav--child > ul li a::after {
  content: '→';
  color: #bbb;
  margin-left: auto;
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: color 0.2s, transform 0.2s;
}
#header-nav .nav--products .nav--child > ul li a:hover::after,
#header-nav .nav--service .nav--child > ul li a:hover::after {
  color: #555;
  transform: translateX(3px);
}

/* サムネイル画像 */
#header-nav .nav--products .nav--child .nav--child--img,
#header-nav .nav--service .nav--child .nav--child--img {
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  line-height: 1 !important;
  position: static !important;
}
#header-nav .nav--products .nav--child .nav--child--img::before,
#header-nav .nav--service .nav--child .nav--child--img::before {
  display: none !important;
}
#header-nav .nav--products .nav--child .nav--child--img img,
#header-nav .nav--service .nav--child .nav--child--img img {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
  border-radius: 4px;
  display: block !important;
}
/* プロダクトアイコンは contain（透過PNG）*/
#header-nav .nav--products .nav--child .nav--child--img img {
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* テキスト列 */
#header-nav .nav--products .nav--child .nav--child--txt,
#header-nav .nav--service .nav--child .nav--child--txt {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  position: static !important;
  transform: none !important;
  width: auto !important;
  text-align: left !important;
  flex: 1 !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* ナビ ドロップダウン内テキスト */
.prd-name {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
}
.prd-sub {
  display: block;
  font-size: 1.15rem;
  color: #888;
  font-weight: 400;
  line-height: 1.3;
}