@charset "UTF-8";

/* ==========================================================================
   Variables / Reset
   ========================================================================== */
:root {
  --brand-blue: #007bff;
  --brand-green: #28a745;
  --text-strong: #111827;
  --text-muted: #444;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.06);
  --shadow-md-hover: 0 10px 24px rgba(0, 0, 0, 0.08);
}
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
.is-gray { background: #F5F5F7; padding: 40px 0; margin: 0; }

/* ==========================================================================
   Hero spacing / mobile
   ========================================================================== */
.products__sec01 { padding: 20px 0 10px; padding-top: 0; }
.products__sec01 .products__catch-copy { margin: 6px 0 10px; }
.products__sec01 .responsive-table { margin-top: 8px; }
.products__sec01__copy-container { overflow: hidden; margin-top: -12px; }
.products__sec01.sec-type-A { margin-bottom: 20px !important; margin-top: 0 !important; }

@media (max-width: 640px) {
  .products__catch-copy { font-size: 1.35rem; line-height: 1.35; margin: 6px 0 10px; }
  .products__sec01 .products__sec01__copy-container { display: block; }
  .products__sec01 { padding-bottom: 16px; }
  .responsive-table { width: 100%; margin: 8px auto 0; border-spacing: 0; }
  .responsive-table td { display: inline-block; width: auto; padding: 0 6px 6px 0; }
  .products-btn { font-size: 14px; padding: 10px 16px; border-radius: 8px; }
  .products__sec01__item-right { margin-top: 12px; }
  .products__sec01__item-right img { width: 92%; height: auto; margin: 0 auto; object-fit: contain; }
}

/* ==========================================================================
   サブヘッダー（固定2段目ナビ） - 最終安定版
   ========================================================================== */

/* ① グローバルヘッダーを最前面に */
header.site-header,
.site-header,
header[role="banner"],
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000 !important; /* ← 最前面 */
  background: #fff;
  overflow: visible !important; /* ドロップダウンを隠さない */
}

/* ② サブヘッダーは①の直下。本文より前面だが①より下 */
.subhero-bar {
  position: fixed;
  top: calc(var(--adminbar, 0px) + var(--header-h, 80px));
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(247, 247, 249, 0.96);
  border-bottom: 1px solid #e5e7eb;
  z-index: 2000 !important; /* ← ①より下 */
}

/* コンテンツが潜らないようスペーサ */
.subhero-placeholder { height: 48px; }

/* ①のドロップダウンは②よりも上に出す */
header nav.nav-menu-pc,
header nav.nav-menu-pc ul,
header nav.nav-menu-pc li {
  overflow: visible !important;
}
header nav.nav-menu-pc ul li ul {
  position: absolute;
  z-index: 4000 !important; /* ← ②より高い */
}

/* サブヘッダーの中身 */
.subhero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  gap: 24px;
  justify-content: center;
  list-style: none;
  box-sizing: border-box;
}
.subhero-inner li { margin: 0; padding: 0; }

/* サブヘッダーの文字を1段目と統一（太さ・色味・フォント） */
.subhero-inner a {
  display: inline-block;
  line-height: 48px;
  padding: 0 10px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;

  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 400 !important; /* 500→400で太り軽減 */
  font-size: clamp(12px, 0.95vw, 14px) !important;
  color: #707070 !important;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* スマホでは非表示 */
@media (max-width: 768px) {
  .subhero-bar { display: none; }
  .subhero-placeholder { height: 0; }
}

/* ==== グローバルヘッダーとドロップダウンを最前面に（サブヘッダーより上） ==== */

/* 1段目ヘッダー本体を最前面に */
header.site-header,
.site-header,
header[role="banner"],
#header {
  position: fixed;         /* テーマがfixedでない場合でも前提を固定化 */
  top: 0; left: 0; right: 0;
  z-index: 3000 !important;  /* ← サブヘッダーより高く */
  background: #fff;
  overflow: visible !important;  /* ドロップダウンを切らない */
}

/* ドロップダウンULを更に上に（サブヘッダーより上） */
header nav.nav-menu-pc ul li ul {
  position: absolute;
  z-index: 4000 !important;      /* ← サブヘッダー(110〜)より高い */
}

/* サブヘッダーは1段目より下に固定 */
nav.subhero-bar {
  position: fixed !important;
  top: calc(var(--adminbar, 0px) + var(--header-h, 80px)) !important;
  left: 0; right: 0;
  height: 48px;
  background: rgba(247,247,249,.96);
  border-bottom: 1px solid #e5e7eb;
  z-index: 2000 !important;      /* ← ヘッダー(3000)より低く、本文より高く */
}

/* フォントを1段目と合わせる（太く見える対策） */
nav.subhero-bar .subhero-inner a {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 400 !important;                 /* 500→400 */
  font-size: clamp(12px, 0.95vw, 14px) !important;
  color: #707070 !important;
  line-height: 48px;
  padding: 0 10px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* スマホは非表示のまま */
@media (max-width: 768px) {
  nav.subhero-bar { display: none !important; }
  .subhero-placeholder { height: 0 !important; }
}

/* ==== 1段目を最前面、2段目は下に。重なり完全解消パッチ ==== */

/* 1) グローバルヘッダー(1段目)を最前面へ */
header.site-header,
.site-header,
header[role="banner"],
#header {
  position: fixed !important;     /* fixedで確実に最前面の土台を作る */
  top: 0; left: 0; right: 0;
  z-index: 10000 !important;      /* ← サブヘッダーより必ず高い */
  background: #fff;
  overflow: visible !important;   /* ドロップダウンが切れないように */
  transform: none !important;     /* 不要なstacking contextを潰す */
}

/* 2) ドロップダウン(1段目のサブメニュー)をさらに上に */
header nav.nav-menu-pc ul li ul {
  position: absolute !important;
  z-index: 11000 !important;      /* ← サブヘッダーより必ず上 */
}

/* 3) サブヘッダー(2段目)は1段目の“下”に固定 */
nav.subhero-bar {
  position: fixed !important;
  top: calc(var(--adminbar, 0px) + var(--header-h, 80px)) !important;
  left: 0; right: 0;
  height: 48px;
  background: rgba(247,247,249,.96);
  border-bottom: 1px solid #e5e7eb;
  z-index: 5000 !important;       /* ← 1段目(10000)より低い */
}

/* コンテンツの潜り込み防止（高さのスペーサ） */
.subhero-placeholder { height: 48px !important; }

/* 2段目の文字を1段目に寄せる（太く見える対策） */
nav.subhero-bar .subhero-inner a {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 400 !important;        /* 500→400で細めに */
  font-size: clamp(12px, 0.95vw, 14px) !important;
  color: #707070 !important;
  line-height: 48px;
  padding: 0 10px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* スマホ時は従来通り非表示 */
@media (max-width: 768px){
  nav.subhero-bar { display: none !important; }
  .subhero-placeholder { height: 0 !important; }
}

/* === Subhero nav: 最終版（1か所だけ定義）============================== */

nav.subhero-bar .subhero-inner > li > a{
  /* レイアウトを常に一定にして、切替時の“角丸ちらつき”を根絶 */
  display: inline-block;
  line-height: 48px;
  padding: 0 12px;
  white-space: nowrap;

  /* 文字まわり */
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 400;
  color: #707070;
  text-decoration: none;
  border-bottom: 2px solid transparent;

  /* 角丸は常時つけておく（背景が無い時も形だけ保持）→ちらつき防止 */
  border-radius: 8px 8px 0 0;
  background: transparent;

  /* “薄くなる”フェードやテーマ側のトランジションを完全無効化 */
  opacity: 1 !important;
}

/* ホバー＆現在地：背景ネイビー＋白太字＋下線消し（色ぶれ無し） */
nav.subhero-bar .subhero-inner > li > a:hover,
nav.subhero-bar .subhero-inner > li > a.is-active,
nav.subhero-bar .subhero-inner > li > a[aria-current="true"]{
  /*   background: #F5F5F7 !important; */

  color: #fff !important;
  font-weight: 800 !important;
  border-bottom-color: #20348B !important;
}

/* アクティブ上にホバーしても変化させない（チラつき対策の保険） */
nav.subhero-bar .subhero-inner > li > a.is-active:hover,
nav.subhero-bar .subhero-inner > li > a[aria-current="true"]:hover{
 /*  background: #F5F5F7 !important; */

  color: #fff !important;
  border-bottom-color: #20348B !important;
}