/* ============================================================
   MONO WIRELESS DEMO SITE — Global CSS
   2.4GHz帯 IEEE802.15.4 TWELITE シリーズ
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700;800;900&display=swap');

:root {
  --ico-bar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%203v16a2%202%200%200%200%202%202h16%27/%3E%3Cpath%20d%3D%27M18%2017V9%27/%3E%3Cpath%20d%3D%27M13%2017V5%27/%3E%3Cpath%20d%3D%27M8%2017v-3%27/%3E%3C/svg%3E");
  --ico-alert: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%27/%3E%3Cpath%20d%3D%27M12%209v4%27/%3E%3Cpath%20d%3D%27M12%2017h.01%27/%3E%3C/svg%3E");

  --ico-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E");
  --ico-trophy: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209H4.5a2.5%202.5%200%200%201%200-5H6%27/%3E%3Cpath%20d%3D%27M18%209h1.5a2.5%202.5%200%200%200%200-5H18%27/%3E%3Cpath%20d%3D%27M4%2022h16%27/%3E%3Cpath%20d%3D%27M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%27/%3E%3Cpath%20d%3D%27M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%27/%3E%3Cpath%20d%3D%27M18%202H6v7a6%206%200%200%200%2012%200V2Z%27/%3E%3C/svg%3E");

  --brand:        #E4007F;
  --brand-dark:   #b8006a;
  --brand-light:  #fff0f7;
  --brand-mid:    #fce4f2;
  --text:         #1a1a1a;
  --text-sub:     #4b5563;
  --muted:        #9ca3af;
  --border:       #e5e7eb;
  --border-light: #f3f4f6;
  --bg:           #f9fafb;
  --nav-h:        68px;
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    16px;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.06);
  --shadow:       0 2px 16px rgba(0,0,0,.08);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.12);
  --shadow-brand: 0 4px 20px rgba(228,0,127,.22);
  --green:        #16a34a;
  --green-bg:     #f0fdf4;
  --green-border: #bbf7d0;
  --blue:         #2563eb;
  --blue-bg:      #eff6ff;
  --blue-border:  #bfdbfe;
  --orange:       #ea580c;
  --orange-bg:    #fff7ed;
  --orange-border:#fed7aa;
  --purple:       #7c3aed;
  --purple-bg:    #f5f3ff;
  --purple-border:#e9d5ff;
  --teal:         #0d9488;
  --teal-dark:    #0f766e;
  --teal-bg:      #f0fdfa;
  --teal-border:  #99f6e4;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'M PLUS 1p', -apple-system, "Hiragino Sans", Meiryo, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* === Lucide SVG icons (絵文字置換・全ページ確定版v2) ===
   旧: 各ページの<style>に同一ブロックを重複コピペしていた(97ページ)。
   2026-06-26にここへ巻き上げて一元化。各ページ側の重複定義は削除。 */
.lucide-ico{display:inline-block;width:1em;height:1em;vertical-align:-0.125em;flex:none;}
.status-dot{display:inline-block;width:.7em;height:.7em;border-radius:50%;vertical-align:-0.05em;flex:none;}
.header-search .lucide-ico,.hd-panel-btn .lucide-ico,.btn-cta-primary .lucide-ico,.btn-cta-outline .lucide-ico,
.sub-cta-text .lucide-ico,.hd-noprog .lucide-ico,.hd-panel-case-label .lucide-ico{margin-right:.4em;}
.hd-noprog .lucide-ico{color:#16a34a;}
.hd-step-emoji .lucide-ico,.hd-panel-icon .lucide-ico,.sub-cta-icon .lucide-ico,
.hub3-icon-wrap .lucide-ico,.mw-cross-bar__icon .lucide-ico{margin:0;}
.hd-step-emoji .lucide-ico,.hd-panel-icon .lucide-ico{color:#E4007F;}
.hub3-icon-wrap .lucide-ico{width:28px;height:28px;color:var(--brand,#E4007F);}

/* ──────────────────────────────────────────────
   本文インラインリンク = 青＋下線（一般的なリンク視認性）
   - 対象: 本文中の素の<a>（クラスなし）と .ext-link 単体
   - 除外: ボタン/カード/ナビ/ロゴ/タグ等のUIコンポーネント
     （UIは個別クラスで色・装飾を持つため、下記 :not() と
      主要UIコンテナ配下の打ち消しで本文リンクのみに限定）
   ────────────────────────────────────────────── */
/* (1) 本文コンテナ配下のクラスを持たない素の<a> = 本文内部リンク
       ※対象は「記事・説明文の本文ラッパー」に限定する。
         .container 全体を対象にするとヒーロー/カード/お知らせ一覧等の
         UIリンクまで巻き込むため、本文ラッパーをホワイトリスト指定する。 */
.tech-body a:not([class]),
.news-body a:not([class]),
.faq-a a:not([class]),
.pp-text a:not([class]),
.usecase-body a:not([class]),
.s-body a:not([class]) {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tech-body a:not([class]):hover,
.news-body a:not([class]):hover,
.faq-a a:not([class]):hover,
.pp-text a:not([class]):hover,
.usecase-body a:not([class]):hover,
.s-body a:not([class]):hover {
  color: var(--brand-dark);
}
/* (2) 本文中の外部リンク（.ext-link 単体）を青＋下線にする。
       詳細度を a.ext-link（0,1,1）に揃え、ボタン/カード/フッタ等の
       打ち消し（同詳細度・後勝ち）で本文以外を従来デザインに戻す。 */
a.ext-link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.ext-link:hover {
  color: var(--brand-dark);
}
a.ext-link .ext-link__domain {
  color: var(--blue);
}
/* (2b) ボタン/カード型の .ext-link は青下線にしない（本来のボタン/カード装飾を維持）
        ※ btn系は属性セレクタ、その他はクラスで打ち消し。詳細度はボタン側の
          クラスルールが別途効くため、ここは color/装飾の継承戻しに留める。 */
a.ext-link[class*="btn"],
a.ext-link.tool-card,
a.ext-link.shop-logo-card,
a.ext-link.pdf-link,
a.ext-link.dl-btn,
a.ext-link.doc-banner-btn,
a.ext-link.case-nav-item,
a.ext-link.hbtn-o,
a.ext-link.hero-btn-primary,
a.ext-link.btn-ghost {
  color: inherit;
  text-decoration: none;
}
a.ext-link[class*="btn"] .ext-link__domain,
a.ext-link.tool-card .ext-link__domain,
a.ext-link.shop-logo-card .ext-link__domain {
  color: inherit;
}
/* (3) UIコンテナ配下の素の<a>は本文リンク化しない（打ち消し）
       ＝ナビ/ヘッダ/フッタ/パンくず/CTA/カード型リンク/サイドバー目次など。
       本文（記事・説明文）以外のリンクは従来デザインを維持する。 */
.global-header a:not([class]),
.global-nav a:not([class]),
.mega-footer a:not([class]),
.site-footer a:not([class]),
.mw-cross-bar a:not([class]),
.inpage-nav a:not([class]),
.breadcrumb a:not([class]),
.bottom-cta a:not([class]),
.news-item > a,                 /* TOP等のお知らせカード（日付/カテゴリ/タイトルを内包） */
.hero-d-scroll a,               /* ヒーローのスクロール誘導CTA「あなたの実装は？↓」 */
.tech-sidebar a:not([class]),   /* tech記事サイドバーの目次リンク */
.sidebar-card a:not([class]),   /* サイドバーカード内の目次リンク */
.toc a:not([class]),            /* 目次（Table of Contents） */
.related-grid a:not([class]),
.related-card a:not([class]) {
  color: inherit;
  text-decoration: none;
}
/* (3b) フッター等のUIコンテナ内 .ext-link は本文外部リンク扱いしない */
.mega-footer a.ext-link,
.site-footer a.ext-link,
.global-header a.ext-link,
.mw-cross-bar a.ext-link {
  color: inherit;
  text-decoration: none;
}
.mega-footer a.ext-link .ext-link__domain,
.site-footer a.ext-link .ext-link__domain {
  color: inherit;
}
/* (4) 事例の企業情報行(.cv)は既定のブランド色運用を尊重しつつ下線で視認性確保 */
.cv a.ext-link:not([class*="btn"]) {
  color: var(--blue);
}

/* ── Container ── */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── Typography ── */
.section-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.section-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--brand); }
.section-title { font-size: clamp(20px,2.5vw,28px); font-weight: 900; letter-spacing: -.02em; margin-bottom: 8px; }
.section-sub   { font-size: 13px; color: var(--text-sub); }

/* セクション見出しブロックは原則「左寄せ」(サイト共通ルール / 2026-05-27)。
   B2B情報サイトとして、情報スキャン重視・読みやすさを優先。
   ヒーロー(.hub-hero / .hero-* )やCTAブロック(.cta-final 等)はセンタリング許容。
   個別ページでセンタリングしたい場合は .section-head--centered を追加するか、
   ヒーロー/CTAクラスを使うこと。 */
.section-head  { margin-bottom: 36px; text-align: left; }
.section-head .section-eyebrow { justify-content: flex-start; }

/* 例外: 明示的にセンタリングしたいセクション(原則ヒーロー/CTAのみ使用) */
.section-head.section-head--centered { text-align: center; }
.section-head.section-head--centered .section-eyebrow { justify-content: center; }
.section-head.section-head--centered .section-sub { margin-left: auto; margin-right: auto; }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 800;
  padding: 13px 28px; border-radius: var(--radius); border: none;
  cursor: pointer; font-family: inherit; transition: all .18s;
  box-shadow: var(--shadow-brand); text-decoration: none;
}
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-2px); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--brand); font-size: 14px; font-weight: 800;
  padding: 13px 28px; border-radius: var(--radius);
  border: 2px solid var(--brand); cursor: pointer; font-family: inherit;
  transition: all .18s; text-decoration: none;
}
.btn-secondary:hover { background: var(--brand-light); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13px;
  font-weight: 700; background: #fff; color: var(--text-sub);
  border: 1.5px solid var(--border); cursor: pointer; font-family: inherit;
  transition: all .15s; text-decoration: none;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }

/* ── Badges ── */
.badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: .04em; }
.badge-new    { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.badge-blue   { background: var(--blue-bg);   color: #1e40af; border: 1px solid var(--blue-border); }
.badge-red    { background: #fff5f5;           color: #991b1b; border: 1px solid #fca5a5; }
.badge-green  { background: var(--green-bg);  color: #166534; border: 1px solid var(--green-border); }

/* ── Global Header ── */
.global-header {
  position: sticky; top: 0; z-index: 1000;
  background: #fff; border-bottom: 1px solid var(--border);
  height: var(--nav-h); box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.header-inner  { height: 100%; display: flex; align-items: center; }
.header-logo   { display: flex; align-items: center; margin-right: 32px; flex-shrink: 0; text-decoration: none; }
.header-logo img { height: calc(var(--nav-h) / 2); width: auto; display: block !important; }
.header-logo-text { font-size: 13px; font-weight: 900; color: var(--brand); letter-spacing: .04em; }
.global-nav    { display: flex; height: 100%; }
.global-nav a  {
  display: flex; align-items: center; height: 100%; padding: 0 16px;
  font-size: 13px; font-weight: 700; color: var(--text);
  border-bottom: 3px solid transparent; transition: all .15s; white-space: nowrap; text-decoration: none;
}
.global-nav a:hover,
.global-nav a.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ── グローバルナビ・ドロップダウン (共通パーツ / 2026-05-27) ──
   「技術情報 ▾」のようにサブメニューを持つ項目用。
   PC: hoverで展開、モバイル: クリック(JS制御)で展開。
   外部リンク子項目には .gn-ext-link クラス + ↗アイコンで明示。 */
.global-nav-item-has-sub {
  position: relative;
  height: 100%;
}
.global-nav-item-has-sub > a {
  /* ▾ アイコン分のpadding余白 */
  padding-right: 26px;
}
.global-nav-item-has-sub > a::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s;
  opacity: .7;
}
.global-nav-item-has-sub.is-open > a::after,
.global-nav-item-has-sub:hover > a::after {
  transform: translateY(-30%) rotate(-135deg);
  opacity: 1;
}
.global-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(0,0,0,.12);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 1100;
  display: flex;
  flex-direction: column;
}
.global-nav-item-has-sub:hover > .global-nav-dropdown,
.global-nav-item-has-sub.is-open > .global-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.global-nav-dropdown a {
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 10px 14px;
  border-bottom: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.global-nav-dropdown a:hover {
  background: var(--brand-light, #fdf2f8);
  color: var(--brand);
  border-bottom: none;
}
.global-nav-dropdown a small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-sub);
  margin-top: 3px;
}
.global-nav-dropdown a:hover small {
  color: var(--brand);
}
/* 外部リンク子項目 (twelite.net など) */
.global-nav-dropdown a.gn-ext-link::after {
  content: ' ↗';
  font-size: 11px;
  font-weight: 800;
  color: var(--brand);
  margin-left: 4px;
}
/* 区切り(サイト内/外部の境目) */
.global-nav-dropdown .gn-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}
.global-nav-dropdown .gn-section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
  padding: 6px 14px 2px;
}

.header-spacer { flex: 1; }
.header-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 14px;
  font-size: 12px; color: var(--muted); cursor: pointer; margin-right: 12px;
  text-decoration: none;
}
.header-lang   { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 14px; border-right: 1px solid var(--border); margin-right: 14px; }
.header-cta    {
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 800;
  padding: 9px 20px; border-radius: var(--radius-sm); border: none;
  cursor: pointer; font-family: inherit; text-decoration: none; display: inline-flex; align-items: center;
}

/* ══════════════════════════════════════════════════════
   Mega Menu
══════════════════════════════════════════════════════ */
/* トリガー（製品リンクを包むラッパー） */
.nav-item-mega {
  position: static;  /* メガメニューをheader幅いっぱいに広げるためstaticにする */
  display: flex; align-items: center; height: 100%;
}
.nav-item-mega > a {
  display: flex; align-items: center; height: 100%; padding: 0 16px;
  font-size: 13px; font-weight: 700; color: var(--text);
  border-bottom: 3px solid transparent; transition: all .15s; white-space: nowrap; text-decoration: none;
  gap: 4px;
}
.nav-item-mega > a::after {
  content: '▾'; font-size: 10px; color: var(--muted);
  transition: transform .2s; display: inline-block;
}
.nav-item-mega.is-open > a,
.nav-item-mega > a:hover  { color: var(--brand); border-bottom-color: var(--brand); }
.nav-item-mega.is-open > a::after { transform: rotate(180deg); }

/* パネル本体 */
.mega-panel {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: #fff;
  border-top: 2px solid var(--brand);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  z-index: 999;
  /* 非表示状態 */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.mega-panel.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mega-inner {
  max-width: 1120px; margin: 0 auto; padding: 28px 24px 32px;
  display: grid;
  grid-template-columns: 200px 1fr 1fr 1fr;
  gap: 0;
}

/* 左ペイン：カテゴリ見出し列 */
.mega-category-list {
  border-right: 1px solid var(--border);
  padding-right: 20px;
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 4px;
}
.mega-cat-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700; color: var(--text-sub);
  background: none; border: none; cursor: pointer; font-family: inherit;
  text-align: left; transition: all .12s; white-space: nowrap;
}
.mega-cat-btn:hover  { background: var(--bg); color: var(--text); }
.mega-cat-btn.active { background: var(--brand-light); color: var(--brand); }
.mega-cat-icon { font-size: 16px; flex-shrink: 0; }

/* 右ペイン：製品リンクグリッド (3列) */
.mega-products {
  grid-column: 2 / 5;
  padding-left: 24px;
  display: none; /* JS で active を切り替え */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px 16px;
  align-content: start;
}
.mega-products.is-active { display: grid; }

/* 製品リンク行 */
.mega-prod-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; transition: all .12s;
}
.mega-prod-link:hover { background: var(--bg); }
.mega-prod-link:hover .mega-prod-name { color: var(--brand); }
.mega-prod-img {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 6px; background: var(--brand-light);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mega-prod-img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.mega-prod-img .mega-prod-emoji { font-size: 18px; }
.mega-prod-name { font-size: 12px; font-weight: 900; line-height: 1.3; margin-bottom: 1px; }
.mega-prod-sub  { font-size: 11px; color: var(--text-sub); line-height: 1.35; }

/* 区切り見出し（製品グループタイトル） */
.mega-group-label {
  grid-column: 1 / -1;
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding: 12px 10px 4px; border-bottom: 1px solid var(--border-light);
  margin-bottom: 2px;
}
.mega-group-label:first-child { padding-top: 0; }

/* 「すべての製品を見る」フッター */
.mega-footer {
  grid-column: 2 / 5;
  padding-left: 24px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
}
.mega-footer.is-active { display: flex; }
.mega-footer a {
  font-size: 12px; font-weight: 700; color: var(--brand);
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.mega-footer a:hover { text-decoration: underline; }
.mega-footer-all {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 800;
  padding: 7px 16px; border-radius: var(--radius-sm); text-decoration: none;
  transition: background .15s;
}
.mega-footer-all:hover { background: var(--brand-dark) !important; text-decoration: none !important; }

/* オーバーレイ（パネル外クリックで閉じる用） */
.mega-overlay {
  display: none;
  position: fixed; inset: var(--nav-h) 0 0;
  z-index: 998;
  background: rgba(0,0,0,.25);
}
.mega-overlay.is-visible { display: block; }

/* ── Breadcrumb ── */
.breadcrumb-bar { background: var(--bg); border-bottom: 1px solid var(--border); padding: 10px 0; }
.breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { margin: 0 3px; }
.breadcrumb .current { color: var(--text); font-weight: 700; }
.breadcrumb .bc-parent { color: var(--muted); }

/* ===================================================================
   ── In-page Navigation (共通パーツ) ──────────────────────────────
   全ページで使い回す「ページ内ナビゲーション」コンポーネント。
   個別ページでは原則これを使用し、独自CSSは持たない。
   色などをページ別にカスタムしたい場合は CSS変数を上書きする。
-------------------------------------------------------------------
   HTML構造 (基本):
     <div class="inpage-nav-wrap">
       <div class="container">
         <nav class="inpage-nav">
           <a href="#xxx" class="active">セクション名</a>
           ...
         </nav>
       </div>
     </div>

   ダーク版を使う場合:
     <div class="inpage-nav-wrap inpage-nav-wrap--dark">
       (中身は同じ)
     </div>

   カスタム例(個別ページの<style>内):
     .inpage-nav-wrap { --inpage-nav-accent: var(--teal); }  // ホバー/アクティブ色をティールに

   CSS変数:
     --inpage-nav-bg        背景色  (デフォルト: #fff)
     --inpage-nav-text      通常テキスト色 (デフォルト: var(--text-sub))
     --inpage-nav-accent    ホバー/アクティブの色 (デフォルト: var(--brand))
     --inpage-nav-border    下境界線色 (デフォルト: var(--border))
     --inpage-nav-shadow    シャドウ (デフォルト: 0 2px 8px rgba(0,0,0,.05))
=================================================================== */
.inpage-nav-wrap {
  /* カスタム可能なCSS変数(個別ページの<style>で上書き可) */
  --inpage-nav-bg:     #fff;
  --inpage-nav-text:   var(--text-sub);
  --inpage-nav-accent: var(--brand);
  --inpage-nav-border: var(--border);
  --inpage-nav-shadow: 0 2px 8px rgba(0,0,0,.05);

  background: var(--inpage-nav-bg);
  border-bottom: 1px solid var(--inpage-nav-border);
  position: sticky;
  top: var(--nav-h);
  z-index: 150;
  box-shadow: var(--inpage-nav-shadow);
}
body.has-mw-crossbar .inpage-nav-wrap {
  top: calc(var(--mw-crossbar-height, 40px) + var(--nav-h));
}

.inpage-nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.inpage-nav::-webkit-scrollbar { display: none; }

.inpage-nav a {
  flex-shrink: 0;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--inpage-nav-text);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.inpage-nav a:hover  { color: var(--inpage-nav-accent); }
.inpage-nav a.active { color: var(--inpage-nav-accent); border-bottom-color: var(--inpage-nav-accent); }

/* ── ダーク版 (apps / tools / products/twelite 等で使用) ── */
.inpage-nav-wrap--dark,
.inpage-nav-dark {  /* 旧クラス名も互換維持 */
  --inpage-nav-bg:     #1e293b;
  --inpage-nav-text:   #94a3b8;
  --inpage-nav-accent: #fff;
  --inpage-nav-border: #334155;
  --inpage-nav-shadow: none;
}
/* 旧 .inpage-nav-dark をそのまま使うレガシー構造のためのフォールバック
   (.inpage-nav-dark の直下に .inpage-nav が来る場合) */
.inpage-nav-dark {
  position: sticky;
  top: var(--nav-h);
  z-index: 150;
  background: var(--inpage-nav-bg);
  border-bottom: 1px solid var(--inpage-nav-border);
}
body.has-mw-crossbar .inpage-nav-dark {
  top: calc(var(--mw-crossbar-height, 40px) + var(--nav-h));
}
.inpage-nav-dark .inpage-nav a {
  color: var(--inpage-nav-text);
}
.inpage-nav-dark .inpage-nav a:hover,
.inpage-nav-dark .inpage-nav a.active {
  color: var(--inpage-nav-accent);
  border-bottom-color: var(--brand);
}

/* ===================================================================
   ── Related Cases グリッド (共通パーツ / 2026-05-27) ──────────
   事例個別ページ末尾の「関連事例」セクション。横3列カードレイアウト。
-------------------------------------------------------------------
   HTML構造:
     <section class="related-cases-section">
       <div class="container">
         <div class="related-cases-head">
           <div class="related-cases-eyebrow">Related Cases</div>
           <h2 class="related-cases-title">関連する事例</h2>
         </div>
         <div class="related-cases-grid">
           <a href="..." class="related-case-card">
             <div class="related-case-icon">🌾</div>
             <div class="related-case-cat">業種 / 用途</div>
             <div class="related-case-title">事例タイトル</div>
             <div class="related-case-co">会社名</div>
           </a>
           ... (3件)
         </div>
         <div class="related-cases-back">
           <a href="../index.html" class="related-cases-back-btn">← 事例ギャラリーに戻る</a>
         </div>
       </div>
     </section>
=================================================================== */
.related-cases-section {
  padding: 56px 0;
  background: var(--bg, #f8fafc);
  border-top: 1px solid var(--border);
}
.related-cases-head {
  margin-bottom: 28px;
}
.related-cases-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.related-cases-eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--brand);
}
.related-cases-title {
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 900;
  margin: 0;
  letter-spacing: -.02em;
}
.related-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
.related-case-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all .18s;
  box-shadow: var(--shadow-sm);
}
.related-case-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  text-decoration: none;
}
.related-case-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 6px;
}
.related-case-cat {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.related-case-title {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  color: #0f172a;
  flex: 1;
}
.related-case-co {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 4px;
  line-height: 1.5;
}
.related-cases-back {
  text-align: center;
}
.related-cases-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-sub);
  background: #fff;
  border: 1.5px solid var(--border);
  padding: 10px 22px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all .15s;
}
.related-cases-back-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
}
@media (max-width: 768px) {
  .related-cases-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   ── NEXT STEP カード (共通パーツ / 2026-05-27) ─────────────────
   事例個別ページ等のサイドバーに置く「次のアクション」カード。
   構造・見た目は完全統一。文言・リンク先はページごとに自由に書き換える。
-------------------------------------------------------------------
   HTML構造(テンプレ):
     <div class="next-step-card">
       <div class="next-step-eyebrow">NEXT STEP</div>
       <h3 class="next-step-title">{タイトル}</h3>
       <p class="next-step-lead">{リード文}</p>
       <div class="next-step-btns">
         <a href="{主アクション}" class="next-step-btn-primary">{主ボタン文言}</a>
         <a href="{副アクション}" class="next-step-btn-outline">{副ボタン文言}</a>
       </div>
     </div>
=================================================================== */
.next-step-card {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark, #a30067) 100%);
  border-radius: var(--radius-lg);
  padding: 26px;
  color: #fff;
}
.next-step-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}
.next-step-title {
  font-size: 16px;
  font-weight: 900;
  margin: 0 0 10px;
  line-height: 1.35;
  color: #fff;
}
.next-step-lead {
  font-size: 12px;
  color: rgba(255,255,255,.85);
  line-height: 1.75;
  margin: 0 0 18px;
}
.next-step-btns {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.next-step-btn-primary,
.next-step-btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 900;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all .15s;
}
.next-step-btn-primary {
  background: #fff;
  color: var(--brand);
  font-size: 13px;
  padding: 10px;
}
.next-step-btn-primary:hover {
  background: var(--brand-light, #fdf2f8);
  text-decoration: none;
  transform: translateY(-1px);
}
.next-step-btn-outline {
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.3);
}
.next-step-btn-outline:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.5);
  text-decoration: none;
  transform: translateY(-1px);
}

/* ── NEXT STEPカード: 全幅独立セクション版 (事例個別ページ末尾用) ── */
.next-step-section {
  padding: 56px 24px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark, #a30067) 100%);
  color: #fff;
  text-align: center;
}
.next-step-section .next-step-inner {
  max-width: 720px;
  margin: 0 auto;
}
.next-step-section .next-step-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 14px;
  display: inline-block;
}
.next-step-section .next-step-title {
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 900;
  line-height: 1.4;
  margin: 0 0 14px;
  color: #fff;
}
.next-step-section .next-step-lead {
  font-size: 14px;
  line-height: 1.85;
  margin: 0 0 28px;
  color: rgba(255,255,255,.92);
}
.next-step-section .next-step-btns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.next-step-section .next-step-btn-primary,
.next-step-section .next-step-btn-outline {
  font-size: 14px;
  padding: 13px 28px;
  min-width: 200px;
}
@media (max-width: 640px) {
  .next-step-section .next-step-btns {
    flex-direction: column;
    align-items: stretch;
  }
  .next-step-section .next-step-btn-primary,
  .next-step-section .next-step-btn-outline {
    min-width: 0;
    width: 100%;
  }
}

/* ===================================================================
   ── Bottom CTA (共通パーツ / 2026-05-27) ──────────────────────
   フッター直前に配置する共通CTAブロック。ページのカテゴリーによって
   バリアント(--product / --app / --case / --hub / --form)を選択する。
-------------------------------------------------------------------
   HTML構造:
     <section class="bottom-cta bottom-cta--{variant}">
       <div class="container bottom-cta-inner">
         <h2 class="bottom-cta-title">見出し</h2>
         <p class="bottom-cta-sub">リード文</p>
         <div class="bottom-cta-btns">
           <a href="..." class="btn-cta-primary">🛒 主アクション</a>
           <a href="..." class="btn-cta-outline">📩 副アクション</a>
         </div>
         <p class="bottom-cta-note">補足テキスト(任意)</p>
       </div>
     </section>

   バリアント:
     --product  製品詳細 (ブランドピンク背景)
     --app      アプリ/ツール (ティール背景)
     --case     事例 (ダーク背景)
     --hub      ハブ/概要 (薄いグラデ背景)
     --form     フォーム/サポート (グレー背景、控えめ)
=================================================================== */
.bottom-cta {
  padding: 64px 24px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark, #a30067) 100%);
  color: #fff;
  text-align: center;
}
.bottom-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.bottom-cta-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  line-height: 1.35;
}
.bottom-cta-sub {
  font-size: 14px;
  line-height: 1.85;
  opacity: .92;
  margin: 0 0 28px;
}
.bottom-cta-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
}

/* ── 3CTA配置 (購入 / 技術情報 / サポート) 用バリアント ──
   3カード横並び・主副の区別なし(全カード白背景で統一)・PCで確実に3列 */

/* 3CTAを含むbottom-ctaは親inner幅を拡大(720px → 960px)してgrid展開を確保 */
/* :has() が使えるモダンブラウザ用 */
.bottom-cta-inner:has(.bottom-cta-btns--3col) {
  max-width: 960px;
}
/* :has() フォールバック: 3CTAを使う全バリアントの inner を直接指定 */
.bottom-cta--product .bottom-cta-inner,
.bottom-cta--app .bottom-cta-inner,
.bottom-cta--hub .bottom-cta-inner {
  max-width: 960px;
}

.bottom-cta-btns--3col {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px;
  width: 100%;
  max-width: none;
  margin: 0 auto 16px;
}

/* 3CTAでは主副の区別をなくし、3つとも同じ「白背景カード」で統一(全バリアント共通) */
.bottom-cta-btns--3col .btn-cta-primary,
.bottom-cta-btns--3col .btn-cta-outline {
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px;
  min-width: 0;
  width: 100%;
  text-align: center;
  /* 白背景カード(全バリアント共通) */
  background: #fff;
  color: var(--brand);
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
/* ext-link 併用ボタンの文字色打ち消し（2026-06-27）
   a.ext-link[class*="btn"]{color:inherit}(詳細度0,2,1)が上記(0,2,0)に勝ち、
   親.bottom-cta の白文字を継承 → 白背景に白文字で消える不具合を解消。
   詳細度を(0,3,0)に上げてブランド色を確実に当てる。 */
.bottom-cta-btns--3col .btn-cta-primary.ext-link,
.bottom-cta-btns--3col .btn-cta-outline.ext-link {
  color: var(--brand);
}
.bottom-cta-btns--3col .btn-cta-primary:hover,
.bottom-cta-btns--3col .btn-cta-outline:hover {
  background: var(--brand-light, #fdf2f8);
  border-color: var(--brand-light, #fdf2f8);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
/* ext-link 併用ボタンの hover も文字色を維持（薄ピンク背景に白文字で消えるのを防ぐ） */
.bottom-cta-btns--3col .btn-cta-primary.ext-link:hover,
.bottom-cta-btns--3col .btn-cta-outline.ext-link:hover {
  color: var(--brand);
}
.bottom-cta-btns--3col .btn-cta-sub {
  font-size: 11px;
  font-weight: 600;
  opacity: .75;
  line-height: 1.3;
  display: block;
}
/* 3カードの縦位置を揃える：アイコン帯を固定高にして見出し位置を統一し、
   sub(説明)文をカード下端へ寄せる。真ん中だけ説明が2行でもズレない。 */
.bottom-cta-btns--3col .btn-cta-primary,
.bottom-cta-btns--3col .btn-cta-outline {
  justify-content: flex-start;
}
.bottom-cta-btns--3col .btn-cta-primary > .lucide-ico,
.bottom-cta-btns--3col .btn-cta-outline > .lucide-ico {
  height: 28px;            /* アイコン帯の高さを固定 */
  width: 28px;
  margin: 0 auto 8px;      /* 中央・下に余白 */
  flex: none;
}
.bottom-cta-btns--3col .btn-cta-sub {
  margin-top: 4px;         /* 見出し直後に固定配置（下端寄せにしない）。
                              3枚とも説明文の開始位置が揃い、真ん中2行カードの
                              1行目「開発者向けサイト」の高さに左右1行カードが合う。 */
  padding-top: 0;
}
/* 縦並びCTAカード内の外部リンクは、アイコンが単独で改行して3行になるのを防ぐ。
   ドメインspan(.is-dup)は非表示。アイコンはサブ文言(.btn-cta-sub)内に入れて
   「twelite.net ↗」のように1行に収める（HTML側でアイコンを btn-cta-sub 内へ移設済み）。 */
.bottom-cta-btns--3col a.ext-link.btn-cta-outline .btn-cta-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}

/* app(ティール背景)バリアントでも白カード+ティール文字 */
.bottom-cta--app .bottom-cta-btns--3col .btn-cta-primary,
.bottom-cta--app .bottom-cta-btns--3col .btn-cta-outline {
  color: var(--teal, #0d9488);
}

/* hub(薄い背景)バリアントは元々白背景+ブランド色 */
.bottom-cta--hub .bottom-cta-btns--3col .btn-cta-primary,
.bottom-cta--hub .bottom-cta-btns--3col .btn-cta-outline {
  background: #fff;
  color: var(--brand);
  border: 2px solid var(--brand);
  box-shadow: 0 4px 14px rgba(228,0,127,.15);
}
.bottom-cta--hub .bottom-cta-btns--3col .btn-cta-primary:hover,
.bottom-cta--hub .bottom-cta-btns--3col .btn-cta-outline:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand-dark, #a30067);
}

@media (max-width: 720px) {
  .bottom-cta-btns--3col {
    /* 基本定義が !important のため、MQ側にも付けてスマホ1列化を効かせる */
    grid-template-columns: 1fr !important;
  }
}

.bottom-cta-note {
  font-size: 12px;
  opacity: .8;
  margin: 14px 0 0;
  line-height: 1.7;
}

/* ── CTAボタン(共通) ── */
.btn-cta-primary,
.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all .18s;
  min-width: 200px;
  justify-content: center;
}
.btn-cta-primary {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.btn-cta-primary:hover {
  background: var(--brand-light, #fdf2f8);
  transform: translateY(-2px);
  text-decoration: none;
}
.btn-cta-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.7);
}
.btn-cta-outline:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

/* ── バリアントA: 製品詳細 (デフォルトのブランド色) ── */
.bottom-cta--product { /* デフォルトと同じ */ }

/* ── バリアントB: アプリ/ツール (ティール背景) ── */
.bottom-cta--app {
  background: linear-gradient(135deg, var(--teal, #0d9488) 0%, #115e59 100%);
}
.bottom-cta--app .btn-cta-primary { color: var(--teal, #0d9488); }
.bottom-cta--app .btn-cta-primary:hover { background: #ccfbf1; }

/* ── バリアントC: 事例 (ダーク背景) ── */
.bottom-cta--case {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.bottom-cta--case .btn-cta-primary { color: var(--brand); }

/* ── バリアントD: ハブ/概要 (薄いグラデ + ダーク文字) ── */
.bottom-cta--hub {
  background: linear-gradient(135deg, var(--brand-light, #fdf2f8) 0%, #fff 100%);
  color: #0f172a;
  border-top: 1px solid var(--border);
}
.bottom-cta--hub .bottom-cta-sub { color: var(--text-sub); opacity: 1; }
.bottom-cta--hub .bottom-cta-note { color: var(--muted, #94a3b8); opacity: 1; }
.bottom-cta--hub .btn-cta-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(228,0,127,.25);
}
.bottom-cta--hub .btn-cta-primary:hover { background: var(--brand-dark, #a30067); }
.bottom-cta--hub .btn-cta-outline {
  color: var(--brand);
  border-color: var(--brand);
  background: #fff;
}
.bottom-cta--hub .btn-cta-outline:hover { background: var(--brand-light, #fdf2f8); }

/* ── バリアントE: フォーム/サポート (控えめなグレー) ── */
.bottom-cta--form {
  background: var(--bg, #f8fafc);
  color: #0f172a;
  border-top: 1px solid var(--border);
  padding: 48px 24px;
}
.bottom-cta--form .bottom-cta-title { font-size: clamp(18px, 2.2vw, 22px); }
.bottom-cta--form .bottom-cta-sub { color: var(--text-sub); opacity: 1; }
.bottom-cta--form .btn-cta-primary {
  background: #fff;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  box-shadow: none;
}
.bottom-cta--form .btn-cta-primary:hover { background: var(--brand-light, #fdf2f8); }
.bottom-cta--form .btn-cta-outline {
  color: var(--text-sub);
  border-color: var(--border);
  background: #fff;
}
.bottom-cta--form .btn-cta-outline:hover { border-color: var(--brand); color: var(--brand); }

/* ── レスポンシブ ── */
@media (max-width: 640px) {
  .bottom-cta { padding: 48px 20px; }
  .bottom-cta-btns { flex-direction: column; align-items: stretch; }
  .btn-cta-primary, .btn-cta-outline { min-width: 0; width: 100%; }
}

/* ===================================================================
   アンカージャンプ時のスクロール位置調整（共通仕様 / 2026-05-27）
   -------------------------------------------------------------------
   設計思想:
   - 画面上に固定表示されるすべての要素（クロスバー / グローバルヘッダー /
     ページ内ナビ）の高さを合計し、その下に視覚余白を加えて着地させる
   - JS制御（js/anchor-scroll.js）が読み込まれているページではJSが優先
   - JSが無効/読み込まれていないページでもCSSのscroll-margin-topで担保

   CSS変数:
   --inpage-nav-h           : ページ内ナビの想定高さ(デフォルト 50px)
                              背高いナビのページは個別ページCSSで上書き可
   --anchor-landing-padding : 見出しと固定ナビの間の視覚余白(デフォルト 20px)

   ロールバック:
   このブロック全体を _backup_YYYYMMDD_HHMMSS/global.css.bak の同等部分に
   差し替えれば旧仕様(50px固定)に戻る
=================================================================== */
:root {
  --inpage-nav-h:            50px;
  --anchor-landing-padding:  60px;
}

:target,
[id]:not([id=""]) {
  scroll-margin-top: calc(var(--nav-h) + var(--inpage-nav-h) + var(--anchor-landing-padding));
}
body.has-mw-crossbar :target,
body.has-mw-crossbar [id]:not([id=""]) {
  scroll-margin-top: calc(var(--mw-crossbar-height, 40px) + var(--nav-h) + var(--inpage-nav-h) + var(--anchor-landing-padding));
}
/* html 自体への scroll-padding-top も追加（ブラウザのデフォルトジャンプ用） */
html {
  scroll-padding-top: calc(var(--mw-crossbar-height, 40px) + var(--nav-h) + var(--inpage-nav-h) + var(--anchor-landing-padding));
}

/* ── Sections ── */
.wf-section     { padding: 72px 0; border-bottom: 1px solid var(--border); }
.wf-section-alt { background: var(--bg); }

/* ── Grid Layouts ── */
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ── Cards ── */
.card {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); transition: all .2s; cursor: pointer;
}
.card:hover { border-color: var(--brand); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.card-img   { aspect-ratio: 4/3; background: var(--brand-light); display: flex; align-items: center; justify-content: center; font-size: 40px; border-bottom: 1px solid var(--border); }
.card-body  { padding: 16px; }
.card-name  { font-size: 15px; font-weight: 900; margin-bottom: 6px; }
.card-desc  { font-size: 12px; color: var(--text-sub); line-height: 1.6; margin-bottom: 10px; }
.card-tag   { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--brand-light); color: var(--brand); margin-right: 4px; margin-bottom: 4px; }
.card-arrow { display: block; text-align: center; padding: 10px; background: var(--bg); font-size: 12px; font-weight: 800; color: var(--brand); border-top: 1px solid var(--border); }

/* ── Feature card ── */
.feature-card { background: #fff; border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); border-top: 4px solid var(--brand); }
/* .fi is intentionally omitted here — defined per-page inline to avoid conflicts with casestudy .fi */
.ft { font-size: 15px; font-weight: 900; margin-bottom: 10px; }
.fb { font-size: 13px; color: var(--text-sub); line-height: 1.75; }

/* ── Hero ── */
.hero { padding: 60px 0 52px; position: relative; overflow: hidden; border-bottom: 3px solid var(--brand-mid); background: linear-gradient(150deg, var(--brand-light) 0%, #fff5fb 40%, #fff 100%); }
.hero-inner { display: grid; grid-template-columns: 1fr 420px; gap: 52px; align-items: center; position: relative; z-index: 1; }
/* apps下層ページ=ライトヒーローの単一カラム上書き（旧:各ページ<style>でimportant指定していた重複を集約。詳細度0,2,0で.hero-innerに勝つためimportant不要） */
.hero-app .hero-inner { display: block; grid-template-columns: none; gap: 0; max-width: 880px; position: relative; z-index: 1; }
.hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.hero-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--brand); }
.hero-h1 { font-size: clamp(28px,3.8vw,44px); font-weight: 900; letter-spacing: -.03em; line-height: 1.18; margin-bottom: 14px; }
.hero-h1 em { color: var(--brand); font-style: normal; }
.hero-tagline { font-size: 16px; font-weight: 700; color: var(--text-sub); margin-bottom: 14px; line-height: 1.5; }
.hero-sub { font-size: 14px; color: var(--text-sub); line-height: 1.85; margin-bottom: 24px; }
.hero-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.spec-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--brand-mid); border-radius: 100px; padding: 6px 14px; font-size: 12px; font-weight: 700; color: var(--brand-dark); }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-visual-inner { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand-mid) 100%); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; border: 2px solid var(--brand-mid); }
.hero-img-ph { text-align: center; color: var(--brand-dark); }
.hero-img-ph .pi { font-size: 64px; margin-bottom: 12px; }
.hero-img-ph .pl { font-size: 14px; font-weight: 800; }

/* ── Spec table ── */
.spec-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); border: 1.5px solid var(--border); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spec-table th, .spec-table td { padding: 12px 20px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.spec-table th { background: var(--bg); width: 38%; font-weight: 700; font-size: 12px; color: var(--text-sub); white-space: nowrap; }
.spec-table td { background: #fff; font-weight: 600; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }
/* spec仕様表のグループ見出し行。背景グレーグラデ＋装飾を共通化（旧:各製品ページ<style>で重複定義していたものを集約）。文字色は製品アクセント(--ar-dark等)を各ページで指定するためここでは持たない */
.spec-group-head th, .spec-group-head td { background: linear-gradient(90deg, #f9fafb, #f3f4f6); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 8px 18px; }

/* ── Info Boxes ── */
.info-box  { background: var(--blue-bg);   border: 1px solid var(--blue-border);  border-radius: var(--radius); padding: 16px 20px; }
.warn-box  { background: #fffbeb;           border: 1px solid #fcd34d;             border-radius: var(--radius); padding: 16px 20px; }
.note-box  { background: var(--bg);         border: 1px solid var(--border);       border-radius: var(--radius); padding: 16px 20px; }
.ok-box    { background: var(--green-bg);   border: 1px solid var(--green-border); border-radius: var(--radius); padding: 16px 20px; }
.checklist { list-style: none; padding: 0; }
.checklist li { font-size: 13px; color: var(--text-sub); padding: 5px 0; border-bottom: 1px solid var(--border-light); display: flex; align-items: flex-start; gap: 8px; line-height: 1.6; }
.checklist li::before { content: '✓'; color: var(--green); font-weight: 900; flex-shrink: 0; margin-top: 2px; }

/* ── Form ── */
.form-group   { margin-bottom: 20px; }
.form-label   { display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.form-required { display: inline-block; font-size: 10px; font-weight: 700; background: #fee2e2; color: #991b1b; padding: 1px 6px; border-radius: 3px; margin-left: 6px; }
.form-input   { width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; font-family: inherit; background: #fff; color: var(--text); transition: border-color .15s; }
.form-input:focus   { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(228,0,127,.1); }
.form-select  { width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; font-family: inherit; background: #fff; }
.form-textarea { width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; font-family: inherit; min-height: 140px; resize: vertical; }
.form-check   { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-sub); }
.form-check input { margin-top: 3px; flex-shrink: 0; accent-color: var(--brand); }
.form-submit  { background: var(--brand); color: #fff; font-size: 15px; font-weight: 900; padding: 15px 40px; border-radius: var(--radius); border: none; cursor: pointer; font-family: inherit; box-shadow: var(--shadow-brand); display: inline-flex; align-items: center; gap: 8px; }
.form-hint    { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.form-divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* ── Bottom CTA (旧定義) ── 共通パーツ(.bottom-cta 700行台)に統合済み・削除 (2026-05-27)
   旧 .bottom-cta-btns の flex 指定が --3col のgridを上書きしていた問題を解消 */
/* レガシー互換: .btn-outline-white は他の場所で使われている可能性があるので残す */
.btn-outline-white { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: rgba(255,255,255,.8); font-size: 14px; font-weight: 800; padding: 13px 28px; border-radius: var(--radius); border: 2px solid rgba(255,255,255,.3); text-decoration: none; }

/* ── Footer ── */
.site-footer { background: #1a0010; color: #fff; padding: 40px 0 0; }
.footer-grid { display: grid; grid-template-columns: 200px repeat(4,1fr); gap: 32px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-logo-text { font-size: 15px; font-weight: 900; color: #fff; letter-spacing: .04em; }
.footer-brand p { font-size: 11px; color: rgba(255,255,255,.45); line-height: 1.9; margin-top: 12px; }
.footer-col h4 { font-size: 12px; font-weight: 800; color: rgba(255,255,255,.9); margin-bottom: 14px; }
.footer-col a  { display: block; font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 9px; transition: color .15s; text-decoration: none; }
.footer-col a:hover { color: #fff; }
/* コピーライト: 上罫線なしでロゴと近接、上下paddingを最小限に */
.footer-bottom { padding: 10px 0 14px; display: flex; justify-content: center; align-items: center; font-size: 11px; color: rgba(255,255,255,.3); flex-wrap: wrap; gap: 8px; text-align: center; }
.footer-bottom-links { display: flex; gap: 20px; justify-content: center; }

/* ── Case Study: 企業情報行（.crow/.ck/.cv） ── */
.crow { display: flex; align-items: flex-start; gap: 11px; font-size: 12px; margin-bottom: 6px; }
.ck   { font-weight: 700; color: var(--text-sub); flex-shrink: 0; width: 52px; }
.cv   { flex: 1; line-height: 1.6; word-break: break-all; }
.cv a { color: var(--brand); font-weight: 700; }

/* ── Case Study: 企業情報カード（.contact-card 系） ── */
.contact-card    { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 24px 28px; box-shadow: var(--shadow); max-width: 560px; }
.contact-company { font-size: 17px; font-weight: 900; margin-bottom: 14px; }
.contact-row     { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; margin-bottom: 7px; }
.contact-key     { font-weight: 700; color: var(--text-sub); flex-shrink: 0; width: 54px; }
.contact-val     { flex: 1; line-height: 1.6; word-break: break-all; }
.contact-val a   { color: var(--brand); font-weight: 700; }

/* ── Case Study: 前後ナビ ── */
.case-nav           { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 32px 0; }
.case-nav-item      { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: all .2s; }
.case-nav-item:hover{ border-color: var(--brand); box-shadow: var(--shadow); }
.case-nav-item.next { flex-direction: row-reverse; text-align: right; }
.case-nav-item.prev { flex-direction: row; text-align: left; }
.case-nav-dir       { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.case-nav-title     { font-size: 13px; font-weight: 900; margin-top: 2px; }
.case-nav-co        { font-size: 11px; color: var(--text-sub); }
.case-nav-arrow     { font-size: 22px; color: var(--brand); flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; }
  /* hero-vis slider */
  .hero-thumb-row { flex-wrap: wrap; }
  /* kit-contents */
  .kit-item { grid-template-columns: 52px 1fr auto; }
  /* buy section */
  .buy-sub-grid { grid-template-columns: 1fr 1fr; }
  .buy-main { flex-direction: column; gap: 16px; }

  .hero-visual { order: -1; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .feature-card { grid-column: span 1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .container { padding: 0 16px; }
  /* buy section */
  .buy-sub-grid { grid-template-columns: 1fr; }

}

/* ════════════════════════════════════════════════════════
   ヒーロー画像スライダー (.hero-vis / .hero-slide / .hero-thumb)
   複数画像をマウスオーバー・自動スライドで切り替える共通コンポーネント
   HTML構造:
     <div class="hero-vis" id="heroVis">
       <div class="hero-slide hero-active"><img ...><div class="hero-caption">...</div></div>
       ...
     </div>
     <div class="hero-thumb-row" id="heroThumbs">
       <div class="hero-thumb active"><img ...></div> ...
     </div>
     <div class="hero-dots" id="heroDots">
       <button class="hero-dot active"></button> ...
     </div>
   ════════════════════════════════════════════════════════ */
.hero-vis { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: linear-gradient(135deg, var(--ac-bg, var(--brand-light)), var(--ac-border, var(--brand-mid))); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ac-border, var(--brand-mid)); position: relative; cursor: pointer; }
.hero-vis .hero-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s; padding: 16px; }
.hero-vis .hero-slide.hero-active { opacity: 1; }
.hero-vis .hero-slide img { max-width: 72%; max-height: 68%; object-fit: contain; }
.hero-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.45); color: #fff; font-size: 12px; font-weight: 700; text-align: center; padding: 7px 12px; letter-spacing: 0.02em; pointer-events: none; }
.hero-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background 0.2s, transform 0.2s; border: none; padding: 0; }
.hero-dot.active { background: var(--brand); transform: scale(1.3); }
.hero-thumb-row { display: flex; gap: 8px; margin-top: 8px; }
.hero-thumb { width: 52px; height: 52px; border-radius: var(--radius-sm); border: 2px solid var(--border); overflow: hidden; cursor: pointer; transition: border-color 0.15s, opacity 0.15s; opacity: 0.55; flex-shrink: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.hero-thumb img { width: 100%; height: 100%; object-fit: contain; }
.hero-thumb.active { border-color: var(--brand); opacity: 1; }

/* ════════════════════════════════════════════════════════
   セット内容リスト (.kit-contents / .kit-item)
   製品ページへリンク付きで各同梱品を一覧表示する共通コンポーネント
   HTML構造:
     <div class="kit-contents">
       <a class="kit-item" href="...">
         <div class="kit-img"><img ...></div>
         <div>
           <div class="kit-name">製品名</div>
           <div class="kit-sku">型番</div>
           <div class="kit-note">説明</div>
         </div>
         <div class="kit-qty">× N</div>
         <div class="kit-arrow">›</div>
       </a>
       ...
     </div>
   ════════════════════════════════════════════════════════ */
.kit-contents { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.kit-item { display: grid; grid-template-columns: 64px 1fr auto 20px; gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background 0.15s; color: inherit; text-decoration: none; }
.kit-item:last-child { border-bottom: none; }
.kit-item:hover { background: var(--ac-bg, var(--brand-light)); }
.kit-item:hover .kit-name { color: var(--brand); }
.kit-img { background: var(--bg); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; height: 52px; width: 52px; transition: background 0.15s; }
.kit-item:hover .kit-img { background: var(--ac-border, var(--brand-mid)); }
.kit-img img { max-height: 44px; width: auto; object-fit: contain; }
.kit-img .ki { font-size: 26px; }
.kit-name { font-size: 13px; font-weight: 900; margin-bottom: 2px; transition: color 0.15s; }
.kit-name a { color: inherit; text-decoration: none; }
.kit-img a { display: contents; }
.kit-sku { font-size: 11px; color: var(--muted); font-family: monospace; margin-bottom: 3px; }
.kit-note { font-size: 11px; color: var(--text-sub); line-height: 1.5; }
.kit-qty { font-size: 15px; font-weight: 900; color: var(--brand); white-space: nowrap; }
.kit-arrow { font-size: 14px; color: var(--muted); opacity: 0; transition: opacity 0.15s, transform 0.15s; transform: translateX(-4px); }
.kit-item:hover .kit-arrow { opacity: 1; transform: translateX(0); }

/* ════════════════════════════════════════════════════════
   購入方法セクション (.buy-main / .buy-sub-grid / .buy-sub-card)
   購入CTAとネット販売・店舗販売・関連製品の3カード表示
   HTML構造:
     <div class="buy-main">
       <div class="buy-main-icon">🛒</div>
       <div>
         <div class="buy-main-title">...</div>
         <div class="buy-main-desc">...</div>
         <div class="buy-main-btns">
           <a class="btn-white" href="...">購入ページへ</a>
           <a class="btn-outline-sm" href="...">見積依頼</a>
         </div>
       </div>
     </div>
     <div class="buy-sub-grid">
       <div class="buy-sub-card">...</div> × 3
     </div>
   ════════════════════════════════════════════════════════ */
.buy-main { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); border-radius: var(--radius-lg); padding: 32px 36px; color: #fff; display: flex; align-items: center; gap: 32px; margin-bottom: 20px; }
.buy-main-icon { font-size: 48px; flex-shrink: 0; }
.buy-main-title { font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.buy-main-desc { font-size: 13px; opacity: .85; line-height: 1.7; margin-bottom: 16px; }
.buy-main-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-white { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--brand); font-size: 13px; font-weight: 800; padding: 10px 22px; border-radius: var(--radius-sm); text-decoration: none; transition: all .15s; }
.btn-white:hover { background: var(--brand-light); }
.btn-outline-sm { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: #fff; font-size: 13px; font-weight: 800; padding: 10px 22px; border-radius: var(--radius-sm); border: 2px solid rgba(255,255,255,.6); text-decoration: none; transition: all .15s; }
.btn-outline-sm:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.buy-sub-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.buy-sub-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow); }
.buy-sub-icon { font-size: 28px; margin-bottom: 10px; }
.buy-sub-title { font-size: 14px; font-weight: 900; margin-bottom: 5px; }
.buy-sub-desc { font-size: 12px; color: var(--text-sub); line-height: 1.65; margin-bottom: 12px; }

/* =====================================================
   CROSS-SITE BAR / クロスサイトバー（公式サイト版）
   -------------------------------------------------------------------
   挿入位置: <body> 直下
   対応HTML: index.html の <body> 直後
   作成: 取締役検証用PoC（公式サイト版・MWブランド色）
   ===================================================== */

:root {
  --mw-cross-bar-mw-bg:       #5a0e30;  /* primary暗色 */
  --mw-cross-bar-mw-bg-2:     #88004C;  /* MW wine（既存varの値と合わせる） */
  --mw-cross-bar-mw-accent:   #E4007F;  /* MW corporate pink */
  --mw-crossbar-height:       40px;
}

.mw-cross-bar {
  width: 100%;
  background: linear-gradient(90deg, var(--mw-cross-bar-mw-bg), var(--mw-cross-bar-mw-bg-2));
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  border-bottom: 2px solid var(--mw-cross-bar-mw-accent);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1101;  /* 既存global-header(1000)より上 */
}

.mw-cross-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  /* 固定値にする（重要）: var(--mw-crossbar-height) を参照すると、
     JSが実高を変数へ書き戻した際に 計測→伸長→再計測 の自己増幅ループになる。
     変数は「他要素がクロスバー高を知るため」専用で、クロスバー自身は参照しない */
  min-height: 40px;
}

.mw-cross-bar__brand {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-weight: 700;
  letter-spacing: .05em;
  font-size: 12.5px;
}

.mw-cross-bar__tabs {
  display: flex;
  margin-left: auto;
}

.mw-cross-bar .mw-cross-bar__tab,
a.mw-cross-bar__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 700;
  border-left: 1px solid rgba(255, 255, 255, .25);
  transition: all .15s ease;
}

.mw-cross-bar .mw-cross-bar__tab:hover,
a.mw-cross-bar__tab:hover {
  background: rgba(255, 255, 255, .15);
  color: #ffffff !important;
  text-decoration: none !important;
}

.mw-cross-bar .mw-cross-bar__tab--active,
a.mw-cross-bar__tab--active {
  background: rgba(255, 255, 255, .22);
  color: #ffffff !important;
  box-shadow: inset 0 -2px 0 var(--mw-cross-bar-mw-accent);
}

.mw-cross-bar__icon {
  font-size: 14px;
}

.mw-cross-bar__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
/* クロスバー「開発者向けサイト」ラベル＋外部リンクアイコン（2026-06-27 全97ページのインラインstyleを集約） */
.mw-cross-bar__ext-label { display: inline-flex; align-items: center; gap: 5px; }
.mw-cross-bar__ext-ico { opacity: .85; flex-shrink: 0; }

.mw-cross-bar .mw-cross-bar__meta {
  display: block;
  font-size: 10px;
  opacity: 1;
  font-weight: 500;
  margin-top: 1px;
  color: rgba(255, 255, 255, .90) !important;
}

/* body全体を下にシフト */
body.has-mw-crossbar {
  padding-top: var(--mw-crossbar-height);
}

/* 既存sticky headerをクロスバー分下にずらす */
body.has-mw-crossbar .global-header {
  top: var(--mw-crossbar-height) !important;
}

/* レスポンシブ：タブレット
   クロスバーの実高は mobile-drawer.js が getBoundingClientRect で実測し
   body のインラインCSS変数 --mw-crossbar-height へ反映する（全幅で正確）。
   ここでは固定値の上書きはしない（実測とズレてパンくず被りの原因になるため） */
@media (max-width: 768px) {
  /* 詳細度を定義元(.mw-cross-bar .mw-cross-bar__meta)に合わせる
     ※従来は1クラスで詳細度負けし display:none が効いていなかった */
  .mw-cross-bar .mw-cross-bar__meta { display: none; }
  .mw-cross-bar .mw-cross-bar__tab,
  a.mw-cross-bar__tab { padding: 8px 14px; }
}

/* レスポンシブ：スマホ */
@media (max-width: 480px) {
  .mw-cross-bar__brand { display: none; }
  .mw-cross-bar__tabs { width: 100%; margin-left: 0; }
  .mw-cross-bar .mw-cross-bar__tab,
  a.mw-cross-bar__tab {
    flex: 1;
    justify-content: center;
    padding: 8px 6px;
  }
  .mw-cross-bar .mw-cross-bar__tab:first-child,
  a.mw-cross-bar__tab:first-child { border-left: none; }
}

/* =====================================================
   外部リンク統一スタイル（サイト全体・Phase 1）
   - target="_blank" 全リンクに .ext-link クラスを付与
   - SVGアイコン .ext-link__icon でWikipedia/MDN標準のExternal Link Icon表示
   - ドメイン名併記用に .ext-link__domain クラス
===================================================== */
a.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
a.ext-link .ext-link__domain {
  font-size: 0.82em;
  color: var(--muted, #94a3b8);
  font-weight: 500;
  margin-left: 2px;
}
a.ext-link .ext-link__icon {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.1em;
  opacity: .85;
  transition: transform .18s, opacity .18s;
}
a.ext-link:hover .ext-link__icon {
  transform: translate(1px, -1px);
  opacity: 1;
}
a.ext-link:hover .ext-link__domain {
  color: var(--text-sub, #cbd5e1);
}
/* ドメイン表記の重複抑制（main.js が判定して .is-dup を付与）
   重複（リンク文言にドメイン名を含む）→ ドメインspanを非表示にしアイコンのみ表示。
   非重複 → ドメインspanを表示（既定のまま）。JS無効時は従来通り全表示で実害なし。 */
a.ext-link .ext-link__domain.is-dup {
  display: none;
}

/* =====================================================
   Phase 2/3 UI規則統一（サイト全体）
   - 2-A: タグ系を非インタラクティブ化（cursor:default）
   - 2-B: カード型リンクに右上「→」インジケータ
   - 3-B: 主要ボタンのホバー時→スライドアニメ
===================================================== */

/* === Phase 2-A: 装飾タグの非インタラクティブ化 === */
/* クリック可と誤認されやすいpill/badge/tag/chip系に明示 */
.spec-pill,
.status-badge,
.cc-tag,
.app-tag,
.hub3-tag,
.industry-tag,
.usecase-tag,
.pop-tag,
.case-tag,
.variant-badge,
.prod-pill,
.app-pill,
.pn-chip,
.tag-iot,
.tag-manufacturing,
.tag-other,
.tag-medical,
.tag-agri,
.tag-construction,
.tag-research,
.tag-others,
.tag-entertainment,
.tag-infrastructure {
  cursor: default;
  user-select: none;
}
/* aタグ内のタグは除外（クリック可能なリンク内のタグはカーソルポインタを維持） */
a .spec-pill,
a .status-badge,
a .cc-tag,
a .app-tag,
a .hub3-tag,
a .industry-tag,
a .usecase-tag,
a .case-tag,
a .pop-tag,
a .variant-badge,
a .prod-pill,
a .app-pill,
a .pn-chip {
  cursor: inherit;
}

/* === Phase 2-B: カード型リンクに右上→インジケータ === */
/* 共通: aタグ＋カードクラスを持つ要素の右上に薄いグレーで→表示、ホバーでブランド色化 */
a.related-card,
a.related-case-card,
a.case-card,
a.app-card,
a.tech-card,
a.tool-card,
a.usecase-card,
a.buy-card,
a.rel-card,
a.shop-logo-card,
a.starter-app-card,
a.hpd-card,
a.products-cat-card,
a.finder-card,
a.apps-prod-card,
a.child-card,
a.selfhelp-card,
a.hub3-card,
a.ut-card,
a.tools-prod-card {
  position: relative;
}

/* 円形バッジ型「→」インジケータ：白半透明背景＋細枠でどんな背景・画像にも視認性確保
   ページ内<style>の上書き対策で !important を付与
   ホバー時：ブランド色（ピンク）塗りに変化＋1.1倍スケール
   aタグ + onclick型divカード両方に適用、hpd-cardはTOPで独自::after定義済みのため除外 */
a.related-card::after,
a.related-case-card::after,
a.case-card::after,
div.case-card[onclick]::after,
a.app-card::after,
a.tech-card::after,
a.tool-card::after,
a.usecase-card::after,
a.buy-card::after,
a.rel-card::after,
a.shop-logo-card::after,
a.starter-app-card::after,
a.finder-card::after,
a.apps-prod-card::after,
a.child-card::after,
a.selfhelp-card::after,
a.ut-card::after,
a.tools-prod-card::after,
a.products-cat-card::after,
a.hub3-card::after,
div.detail-product-card[onclick]::after {
  content: '→' !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #444 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease !important;
  pointer-events: none !important;
  z-index: 10 !important;
  opacity: 1 !important;
}

a.related-card:hover::after,
a.related-case-card:hover::after,
a.case-card:hover::after,
div.case-card[onclick]:hover::after,
a.app-card:hover::after,
a.tech-card:hover::after,
a.tool-card:hover::after,
a.usecase-card:hover::after,
a.buy-card:hover::after,
a.rel-card:hover::after,
a.shop-logo-card:hover::after,
a.starter-app-card:hover::after,
a.finder-card:hover::after,
a.apps-prod-card:hover::after,
a.child-card:hover::after,
a.selfhelp-card:hover::after,
a.ut-card:hover::after,
a.tools-prod-card:hover::after,
a.products-cat-card:hover::after,
a.hub3-card:hover::after,
div.detail-product-card[onclick]:hover::after {
  background: var(--brand, #E4007F) !important;
  color: #fff !important;
  border-color: var(--brand, #E4007F) !important;
  box-shadow: 0 4px 12px rgba(228, 0, 127, 0.4) !important;
  transform: scale(1.12) !important;
}

/* 親カードに position:relative を強制（::after の絶対配置基準点を確保）
   overflow:hidden は維持。バッジはカード内側のtop:10/right:10に配置されるため切られない */
a.related-card,
a.related-case-card,
a.case-card,
div.case-card[onclick],
a.app-card,
a.tech-card,
a.tool-card,
a.usecase-card,
a.buy-card,
a.rel-card,
a.shop-logo-card,
a.starter-app-card,
a.finder-card,
a.apps-prod-card,
a.child-card,
a.selfhelp-card,
a.ut-card,
a.tools-prod-card,
a.products-cat-card,
a.hub3-card,
div.detail-product-card[onclick] {
  position: relative !important;
}

/* === Phase 3-B: 主要ボタンのホバー時→スライドアニメ === */
/* ページ内<style>定義の上書き対策で !important を付与 */
a.btn-cta-primary,
a.btn-cta-outline,
a.btn-primary,
a.btn-secondary,
a.btn-ghost,
a.btn-outline,
a.btn-white,
a.hero-cta-primary,
a.hero-cta-outline,
a.cta-primary,
a.cta-btn,
a.sub-cta-item,
a.next-step-btn-primary,
a.next-step-btn-outline,
a.related-cases-back-btn,
a.hd-panel-btn,
a.dl-btn {
  transition: all .2s ease !important;
}

/* ホバー時の浮き上がり＋影強化 */
a.btn-cta-primary:hover,
a.btn-cta-outline:hover,
a.btn-primary:hover,
a.btn-secondary:hover,
a.hero-cta-primary:hover,
a.hero-cta-outline:hover,
a.cta-primary:hover,
a.cta-btn:hover,
a.sub-cta-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(228, 0, 127, 0.25) !important;
}

/* ホバー時に矢印を持つボタン内のテキスト要素のスライドアニメ（オプション） */
a.btn-cta-primary,
a.btn-cta-outline,
a.btn-primary {
  position: relative !important;
}

/* =====================================================
   フッター新構造（4列リンク + ブランドセンター + コピーライト）
   全ページ統一フッターのCSS
===================================================== */

/* 上段: リンク4列フル幅展開 */
.site-footer .footer-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: start;
  padding-bottom: 28px;
}
.site-footer .footer-col h4 { padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 16px; }
.site-footer .footer-col a { margin-bottom: 11px; font-size: 12px; display: block; }

/* 下段: キャッチコピー＋ロゴ センター配置（ブランド主張型） */
.site-footer .footer-brand-center {
  text-align: center;
  padding: 24px 20px 20px;
  border-top: 1px solid rgba(255,255,255,.1);
}
/* キャッチコピー上・ロゴ下の並び。間隔は最小限 */
.site-footer .footer-brand-center .footer-logo {
  display: inline-block;
  margin: 0;
}
/* 横長フルロゴ(logo-lands.png)。背景透過・ブランド色そのまま */
.site-footer .footer-brand-center .footer-logo img {
  height: 56px;
  width: auto;
  display: block;
  margin: 0 auto;
}
.site-footer .footer-tagline {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
  margin: 0 0 6px;
  letter-spacing: .02em;
}
.site-footer .footer-tagline strong {
  color: #fff;
  font-weight: 700;
  margin-left: 2px;
}

@media (max-width: 900px){
  .site-footer .footer-links-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; padding-bottom: 24px; }
  .site-footer .footer-brand-center { padding: 20px 20px 16px; }
  .site-footer .footer-brand-center .footer-logo img { height: 44px; width: auto; }
  .site-footer .footer-tagline { font-size: 13px; }
}
@media (max-width: 540px){
  .site-footer .footer-links-grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 20px; }
  .site-footer .footer-brand-center .footer-logo img { height: 36px; width: auto; max-width: 90%; }
  .site-footer .footer-tagline br { display: none; }
}

/* ============================================================
   モバイルヘッダー（ハンバーガー＋ドロワー）共通パーツ
   2026-06-04 スマホレイアウト崩れ修正
   - 900px以下: ナビ/検索/CTAをドロワーへ収納、ハンバーガー表示
   - ヘッダーのはみ出しがページ全体を押し広げる不具合の根本対応
============================================================ */
.mw-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; margin-left: auto;
  background: none; border: none; cursor: pointer; padding: 0;
  flex-shrink: 0;
}
.mw-hamburger span {
  display: block; width: 22px; height: 2.5px; border-radius: 2px;
  background: var(--text); transition: transform .25s, opacity .2s;
}
.mw-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.mw-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mw-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* PC幅: ドロワー用の複製要素・オーバーレイは常時非表示（二重表示防止）
   ※.global-nav a (0,1,1) の display:flex に詳細度で勝つため
     .global-nav 付き(0,2,0)＋!important で確実に非表示にする */
.global-nav .mw-drawer-search,
.global-nav .mw-drawer-cta,
.global-nav .mw-drawer-flat,
.mw-drawer-search, .mw-drawer-cta, .mw-drawer-flat, .mw-drawer-overlay, .mw-drawer-close { display: none !important; }

@media (max-width: 900px) {
  /* はみ出しの保険：横スクロール禁止
     重要: html と body の両方に overflow-x:hidden を指定すると
     body がスクロールコンテナ化し position:sticky が壊れる（仕様）。
     overflow-x:clip はスクロールコンテナを作らずクリップだけ行う */
  html { overflow-x: clip; }

  .mw-hamburger { display: flex; }
  .header-inner { gap: 8px; }
  .header-spacer { display: none; }

  /* ナビ・検索・CTAはドロワー内に移動表示
     注: .global-nav は sticky ヘッダー(z-index:1000)内にあるため、
     親の stacking context に閉じ込められる。ドロワー展開中は
     ヘッダー自体の z-index をオーバーレイ(1100)より上げて解決する */
  body.mw-drawer-open .global-header { z-index: 1300; }
  .global-nav {
    display: none;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(82vw, 320px);
    background: #fff; z-index: 1200;
    flex-direction: column; height: 100vh; height: 100dvh;
    padding: calc(var(--nav-h) + 12px) 0 24px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 32px rgba(0,0,0,.18);
  }
  body.mw-drawer-open .global-nav { display: flex; }
  /* ドロワー右上の閉じる(✕)ボタン
     ドロワーは top:0 から始まり、上部にクロスバー＋ヘッダーが重なる。
     ✕はそれらに隠れないよう、ヘッダー下の余白(= padding-top と同じ位置)に置く。 */
  .global-nav .mw-drawer-close {
    display: flex !important;
    position: absolute;
    top: calc(var(--mw-crossbar-height, 40px) + 14px); right: 12px;
    width: 40px; height: 40px; align-items: center; justify-content: center;
    background: var(--bg); border: 1px solid var(--border); cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--brand);
    border-radius: 8px; padding: 0; z-index: 5;
  }
  body:not(.has-mw-crossbar) .global-nav .mw-drawer-close { top: 14px; }
  .global-nav .mw-drawer-close:hover { background: var(--brand); color: #fff; }
  .global-nav a {
    height: auto; padding: 14px 22px;
    border-bottom: 1px solid var(--border-light);
    border-left: 3px solid transparent; font-size: 14px;
  }
  .global-nav a:hover, .global-nav a.active {
    border-bottom-color: var(--border-light); border-left-color: var(--brand);
    background: var(--brand-light);
  }
  /* ドロワー内ではドロップダウン（技術情報▾）を廃止。
     PCメガメニュー用の項目は丸ごと隠し、JSが生成するフラットリンク
     （.mw-drawer-flat: 技術情報＋twelite.net系3リンク）を表示する */
  .global-nav .global-nav-item-has-sub { display: none !important; }
  .global-nav .mw-drawer-flat { display: block !important; width: 100%; }
  .global-nav .mw-drawer-flat a {
    display: flex; align-items: center; justify-content: space-between;
    height: auto; padding: 14px 22px;
    border-bottom: 1px solid var(--border-light);
    border-left: 3px solid transparent; font-size: 14px;
  }
  .global-nav .mw-drawer-flat .mw-drawer-ext { font-size: 13px; color: var(--text-sub); }
  .global-nav .mw-drawer-flat .mw-drawer-ext-domain {
    font-size: 10px; color: var(--muted); font-weight: 700; flex-shrink: 0; margin-left: 8px;
  }
  /* ヘッダー右側の検索/CTAはドロワー外では非表示（ドロワー下部に複製ボタンをJSで追加） */
  .header-search { display: none; }
  .header-cta {
    display: none;
  }
  /* ドロワー内に複製された検索/CTA */
  .global-nav .mw-drawer-search,
  .global-nav .mw-drawer-cta {
    display: flex !important; /* ベースの非表示(!important)をMQ内で上書き */
    align-items: center; justify-content: center;
    margin: 10px 18px 0; padding: 12px 16px;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
    border-bottom: none;
  }
  .global-nav .mw-drawer-search {
    background: var(--bg); border: 1px solid var(--border); color: var(--text-sub);
  }
  .global-nav .mw-drawer-cta {
    background: var(--brand); color: #fff; box-shadow: var(--shadow-brand);
  }
  .global-nav .mw-drawer-cta:hover { background: var(--brand-dark); border-left-color: transparent; }

  /* 背景オーバーレイ */
  .mw-drawer-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 1100;
  }
  body.mw-drawer-open .mw-drawer-overlay { display: block; }
  body.mw-drawer-open { overflow: hidden; }
}

/* ── フォームページ共通: 本文+サイド窓口の2カラム（900px以下で1カラム化） ──
   2026-06-04 スマホ崩れ修正: 旧インラインstyle直書きをクラス化 */
.form-2col { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
@media (max-width: 900px) {
  .form-2col { grid-template-columns: 1fr; gap: 28px; }
  /* サイド窓口（他の窓口/FAQ/DevPortal）はフォームの後ろに回す */
  .form-2col > div:last-child { order: 2; }
}

/* ============================================================
   サイト共通：表（テーブル）のレスポンシブ標準ルール（2026-06-16）
   ① 全ての表ラッパーに横スクロールを保証＝はみ出しによるレイアウト崩れを根絶
   ② ラッパー無しの裸テーブルも救済（display:block + overflow-x）
   ③ 2列の仕様表（.spec-table）はスマホで縦積みカード化＝スクロール不要
   ============================================================ */
/* ★ Grid item の min-width:auto 落とし穴対策（はみ出しの根本原因／全幅で適用）
      CSS Gridの子(grid item)は既定 min-width:auto ＝中身が縮まないと縮まない。
      中に長文や表があると grid トラック幅を無視して中身幅まで膨張し、本文ごと横はみ出す。
      tech-layout > tech-body がこれに該当（記事全体が膨張）。min-width:0 で根治。 */
.tech-layout > .tech-body,
.tech-body,
[class*="-layout"] > article,
[class*="-grid"] > * {
  min-width: 0;
}
/* ① 既存の各種ラッパーを一括で横スクロール保証（実在ラッパー名を漏れなく列挙）
      ※ compare-wrap / matrix-wrap / preload-wrap は "-table-wrap" を含まないため個別指定が必須 */
[class*="table-wrap"],
.spec-table-wrap, .compare-table-wrap, .pin-table-wrap, .qty-table-wrap, .guide-table-wrap,
.compare-wrap, .matrix-wrap, .preload-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
@media (max-width: 600px) {
  /* ② ラッパー無し裸テーブルの救済。各techコラムページがページ固有<style>で
        .tech-body table{overflow:hidden} を後勝ちで定義しているため、!important で確実に上書き */
  .tech-body table, .pp-body table, .cs table, .container > table,
  .quote-items-table, .profile-table, .compare-table, .matrix-table, .pin-table,
  .usecase-quicktable, .qty-table, .guide-table, .tbl, .spec-tw, .preload-tbl {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* ②-b JS(table-scroll-hint.js)が .mw-scrollbox で包んだテーブルは、
         ボックス側が横スクロールを担うため table 自身は通常表示に戻す。
         （block化したままだと幅がボックス基準に固定されずはみ出すため。802-15-4等の多列裸テーブル対策） */
  .mw-scrollbox > table {
    display: table !important;
    overflow: visible !important;
    max-width: none !important;
    width: auto;
  }
  /* ③ 2列仕様表（項目:値）をスマホでカード化：行ごとにブロック表示。
        .spec-table は大半が2列のため既定でカード化。3列以上の例外は .spec-table--nostack を付けて除外 */
  .spec-table:not(.spec-table--nostack) { display: block !important; }
  .spec-table:not(.spec-table--nostack) thead { display: none !important; }
  .spec-table:not(.spec-table--nostack) tbody { display: block; }
  .spec-table:not(.spec-table--nostack) tr { display: block; border-bottom: 1px solid var(--border-light); padding: 4px 0; }
  .spec-table:not(.spec-table--nostack) tr:last-child { border-bottom: none; }
  .spec-table:not(.spec-table--nostack) th,
  .spec-table:not(.spec-table--nostack) td {
    display: block !important; width: auto !important; white-space: normal; border: none; padding: 4px 14px; text-align: left;
  }
  .spec-table:not(.spec-table--nostack) th { color: var(--brand-dark); font-size: 11px; padding-bottom: 0; }
  .spec-table:not(.spec-table--nostack) td { padding-top: 0; font-size: 13.5px; }
  /* グループ見出し行はカード化時も見出しとして残す */
  .spec-table:not(.spec-table--nostack) .spec-group-head th { color: var(--brand-dark) !important; font-size: 11px; font-weight: 800; background: var(--brand-light) !important; padding: 6px 14px; }

  /* 横スクロールが残る表には「→」フェードでスクロール可能を示唆 */
  [class*="table-wrap"], .spec-table-wrap, .compare-table-wrap, .compare-wrap, .matrix-wrap, .preload-wrap {
    background-image: linear-gradient(to right, transparent calc(100% - 24px), rgba(0,0,0,.05));
    background-attachment: local;
  }
}

/* ④ スクロールヒント（table-scroll-hint.js が付与する .mw-scrollbox 用）全画面共通 */
.mw-scrollbox { max-width: 100%; }
.mw-scrollbox__hint {
  display: none;
  font-size: 11px; font-weight: 700; color: var(--brand);
  background: var(--brand-light); border: 1px solid var(--brand-mid);
  border-radius: 100px; padding: 3px 12px; margin: 0 0 8px;
  text-align: center; letter-spacing: .04em;
  transition: opacity .3s;
}
.mw-scrollbox.is-scrolled .mw-scrollbox__hint { opacity: .35; }
@media (max-width: 600px) {
  .mw-scrollbox__hint { display: block; }
}
/* スクロールボックスは横スクロールを担い、内部のmin-width表もはみ出さず収める */
.mw-scrollbox { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   サイト共通：スマホ時のボタン群・カードグリッド崩れ対策（2026-06-16）
   ⑥ inline系ボタン（btn-primary/secondary/ghost等）が縦折り返し時に
      隙間ゼロで密着するのを防ぐ＝縦マージンを保証
   ⑦ テキスト量の多い大きめカードグリッドはスマホで1列に
   ============================================================ */
@media (max-width: 600px) {
  /* ⑥ 横並びボタンが縦に折り返したときの縦間隔を保証 */
  .btn-primary, .btn-secondary, .btn-ghost, .btn-outline,
  .btn-white, .btn-section, .btn-grade, .btn-consult, .btn-consult-outline,
  .btn-tw-buy, .btn-tw-spec, .btn-diagnose {
    margin-bottom: 10px;
  }
  /* margin-left での横並び指定はスマホで無効化（縦並び時の左ズレ防止） */
  .btn-primary[style*="margin-left"], .btn-secondary[style*="margin-left"],
  .btn-ghost[style*="margin-left"], .btn-outline[style*="margin-left"] {
    margin-left: 0 !important;
  }

  /* ⑦ いかなるmediaでも未対応だった多列グリッドをスマホで2列に（極端な3〜5列の窮屈を解消）。
        さらに極小幅(下の420px)で1列へ。各ページで既に1列化済みのものはこのルールに含めない */
  .value-grid, .hero-d-products-grid, .viewer-grid, .os-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* ⑦-b 不均衡2列（左カラムが極端に狭く縦書きで崩れる）はスマホで即1列化。
         modes-grid（76px:263px）が代表例。均等2列でも狭くて窮屈なものを420px以下で1列に */
  .modes-grid {
    grid-template-columns: 1fr !important;
  }
  /* ⑦-c 1列化したグリッド内の「2列ぶち抜き」インライン指定(grid-column:span 2)は、
         1列レイアウトを強制的に多列へ戻してしまうためスマホで打ち消す。
         （twelite-cueのmode-card等。子のspanがgrid-template-columns:1frを無効化する不具合の根治） */
  .modes-grid > [style*="grid-column"],
  .value-grid > [style*="grid-column"],
  .axis-grid > [style*="grid-column"],
  .battery-grid > [style*="grid-column"],
  .usecase-grid > [style*="grid-column"],
  .parts-img-grid > [style*="grid-column"] {
    grid-column: auto !important;
  }
  /* ⑦-d インラインstyleで多列(grid-template-columns)を直接指定したグリッドは、
         @media の1列化ルールより詳細度が高く勝ってしまい、スマホで多列のまま崩れる。
         スマホでは一律1列化して根治（ant-grid-2 style="1fr 2fr" 等が代表例）。
         ※ ant-spec dl 等の小さな「項目:値」2列リストは下の例外で維持する。 */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* 例外: 仕様の「項目:値」リスト（auto 1fr系の横並びは維持した方が読みやすい） */
  .ant-spec dl, .spec-dl, dl[style*="auto 1fr"] {
    grid-template-columns: auto 1fr !important;
  }
}
@media (max-width: 420px) {
  .value-grid, .hero-d-products-grid, .viewer-grid, .os-grid,
  .hero-img-grid,
  .axis-grid, .battery-grid, .parts-img-grid, .usecase-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   事例ページ（casestudies）共通スタイル（2026-06-17 共通化）
   旧: 各事例ページの<style>に同一CSSをコピペ（約20ページ重複）。
   ここに1回だけ定義し各ページから削除。画像(.gi)はトリミングせず全体表示(contain)に統一。
   ※ページ固有の上書き（gunze等の独自デザイン）は各ページのstyleに残す。
   ============================================================ */
.case-hero{background:linear-gradient(150deg,#fff0f7 0%,#fff5fb 40%,#fff 100%);padding:52px 0 44px;border-bottom:3px solid var(--brand-mid);}
.hero-2col{display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:start;}
.case-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.case-eyebrow::before{content:'';width:20px;height:2px;background:var(--brand);}
.itags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.itag{font-size:11px;font-weight:700;padding:4px 12px;border-radius:100px;border:1.5px solid var(--border);background:#fff;color:var(--text-sub);}
.case-title{font-size:clamp(20px,3vw,30px);font-weight:900;letter-spacing:-.03em;line-height:1.25;margin-bottom:10px;}
.case-co{font-size:14px;font-weight:700;color:var(--text-sub);margin-bottom:18px;}
.case-lead{font-size:14px;color:var(--text-sub);line-height:1.9;margin-bottom:20px;}
.pchip{display:inline-flex;align-items:center;gap:5px;background:var(--brand-light);color:var(--brand);font-size:11px;font-weight:800;padding:4px 11px;border-radius:100px;text-decoration:none;border:1px solid var(--brand-mid);margin-right:5px;margin-bottom:5px;transition:all .15s;}
.pchip:hover{background:var(--brand);color:#fff;}
.kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.kpi{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:12px 16px;text-align:center;min-width:90px;box-shadow:var(--shadow-sm);}
.kpi-n{font-size:20px;font-weight:900;color:var(--brand);line-height:1.1;}
.kpi-l{font-size:10px;font-weight:700;color:var(--muted);margin-top:3px;}
.hero-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:var(--bg);}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block;}
.metacard{margin-top:14px;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:14px 18px;box-shadow:var(--shadow-sm);}
.mr{display:flex;align-items:flex-start;gap:10px;padding:6px 0;border-bottom:1px solid var(--border-light);font-size:12px;}
.mr:last-child{border-bottom:none;}
.mk{font-weight:700;color:var(--text-sub);flex-shrink:0;width:56px;}
.mv{font-weight:600;flex:1;line-height:1.5;}
.cs{padding:52px 0;border-bottom:1px solid var(--border);}
.cs-alt{background:var(--bg);}
.cshead{margin-bottom:24px;}
.cseb{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.cseb::before{content:'';width:16px;height:2px;background:var(--brand);}
.cst{font-size:clamp(17px,2.2vw,21px);font-weight:900;}
.btext{font-size:14px;color:var(--text);line-height:1.9;}
.btext p+p{margin-top:12px;}
.fl{display:flex;flex-direction:column;gap:12px;max-width:680px;}
.fi{display:flex;align-items:flex-start;gap:14px;padding:15px 20px;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.fi-ic{width:36px;height:36px;border-radius:10px;background:var(--brand-light);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.fi-t{font-size:13px;font-weight:900;margin-bottom:3px;}
.fi-d{font-size:12px;color:var(--text-sub);line-height:1.6;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
/* 事例画像：トリミングせず素材のまま全体表示（contain統一） */
.gi{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;padding:10px;}
.gi img{width:100%;height:auto;object-fit:contain;display:block;border-radius:4px;}
.gi.h200,.gi.h220,.gi.h240,.gi.h280{height:auto;}
.gi.portrait{display:flex;align-items:center;justify-content:center;}
.gi.portrait img{width:auto;max-width:100%;max-height:420px;}
.gi-contain{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff;padding:12px;display:flex;align-items:center;justify-content:center;}
.gi-contain img{width:100%;height:auto;object-fit:contain;display:block;}
.gcap{font-size:11px;color:var(--muted);margin-top:6px;text-align:center;font-weight:600;}
.rl{display:flex;flex-direction:column;gap:9px;max-width:600px;}
.ri{display:flex;align-items:flex-start;gap:11px;padding:13px 18px;background:#fff;border-left:4px solid var(--brand);border-radius:0 var(--radius) var(--radius) 0;box-shadow:var(--shadow-sm);}
.rck{width:21px;height:21px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;flex-shrink:0;margin-top:1px;}
.rt{font-size:13px;font-weight:800;color:var(--text);line-height:1.55;}
.cc{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:22px 26px;box-shadow:var(--shadow);max-width:540px;}
.cc-co{font-size:16px;font-weight:900;margin-bottom:12px;}
/* .rg / .reli（旧事例テンプレートの未使用クラス）は削除済み（2026-06-27・全HTML/JSで参照0を確認） */
/* .rei/.recl/.ret/.reco（旧related item部品・未使用）は削除済み（2026-06-27・全HTML参照0を確認） */
/* .cnav（旧事例テンプレートの未使用クラス）は削除済み（2026-06-27・参照0を確認） */
/* .cni/.cnd/.cnco/.cna（旧case nav部品・未使用）は削除済み（2026-06-27・全HTML参照0を確認）。.cnt はcasestudies一覧で現役のため残置 */
.cnt{font-size:12px;font-weight:900;margin-top:2px;}
@media(max-width:768px){.case-cs .hero-2col,.cs .g2,.cs .g3{grid-template-columns:1fr;}}
@media(max-width:768px){.hero-2col,.g2,.g3{grid-template-columns:1fr;}}

/* ============================================================
   事例ページ共通スタイル2（新テンプレート系：rohto/kdk等）（2026-06-17 共通化）
   フルネーム命名の新テンプレート。旧短縮名系(.cst/.btext/.reli等)とは別系統で衝突しない。
   ※ .case-title/.case-lead/.cs は旧ブロックと同名のため重複定義せず旧値を共有(差は2〜4pxで実害なし)。
   ============================================================ */
.case-hero-inner{display:grid;grid-template-columns:1fr 360px;gap:44px;align-items:start;}
.industry-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.industry-tag{font-size:11px;font-weight:700;padding:4px 12px;border-radius:100px;border:1.5px solid var(--border);background:#fff;color:var(--text-sub);}
.case-company{font-size:15px;font-weight:700;color:var(--text-sub);margin-bottom:20px;}
.product-chip{display:inline-flex;align-items:center;gap:5px;background:var(--brand-light);color:var(--brand);font-size:11px;font-weight:800;padding:4px 11px;border-radius:100px;text-decoration:none;border:1px solid var(--brand-mid);margin-right:5px;margin-bottom:5px;transition:all .15s;}
.product-chip:hover{background:var(--brand);color:#fff;}
.hero-img-wrap{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:var(--bg);}
.hero-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.meta-card{margin-top:14px;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-sm);}
.meta-row{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid var(--border-light);font-size:12px;}
.meta-row:last-child{border-bottom:none;}
.meta-key{font-weight:700;color:var(--text-sub);flex-shrink:0;width:58px;}
.meta-val{font-weight:600;color:var(--text);flex:1;line-height:1.55;}
.feat-list{display:flex;flex-direction:column;gap:12px;max-width:680px;}
.feat{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.feat-icon{width:38px;height:38px;border-radius:10px;background:var(--brand-light);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.feat-title{font-size:14px;font-weight:900;margin-bottom:4px;}
.feat-desc{font-size:12px;color:var(--text-sub);line-height:1.65;}
.cue-badge{display:inline-flex;align-items:center;gap:8px;background:var(--brand-light);border:1.5px solid var(--brand-mid);border-radius:var(--radius);padding:12px 16px;margin-top:4px;}
.cue-badge-icon{font-size:24px;}
.cue-badge-text{font-size:12px;font-weight:700;color:var(--text);line-height:1.5;}
.cue-badge-link{font-size:12px;font-weight:800;color:var(--brand);}
.cs-head{margin-bottom:28px;}
.cs-eyebrow{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.cs-eyebrow::before{content:'';width:16px;height:2px;background:var(--brand);}
.cs-title{font-size:clamp(18px,2.2vw,22px);font-weight:900;}
.body-text{font-size:14px;color:var(--text);line-height:1.9;}
.doc-figs{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;}
.doc-fig{border:1px solid var(--border);border-radius:var(--radius);background:#fff;padding:12px;box-shadow:var(--shadow-sm);}
.doc-fig img{width:100%;height:auto;display:block;border-radius:4px;}
.doc-fig-cap{font-size:11px;color:var(--muted);margin-top:8px;text-align:center;font-weight:600;}
.reason-list{display:flex;flex-direction:column;gap:10px;max-width:600px;}
.reason{display:flex;align-items:flex-start;gap:12px;padding:14px 20px;background:#fff;border-left:4px solid var(--brand);border-radius:0 var(--radius) var(--radius) 0;box-shadow:var(--shadow-sm);}
.reason-check{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0;margin-top:1px;}
.reason-text{font-size:13px;font-weight:800;color:var(--text);line-height:1.55;}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
.related-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);text-decoration:none;color:inherit;transition:all .2s;margin-bottom:12px;}
.related-item:hover{border-color:var(--brand);box-shadow:var(--shadow);}
.related-icon{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--brand-light);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.related-cat{font-size:10px;font-weight:700;color:var(--muted);margin-bottom:2px;}
.related-title{font-size:13px;font-weight:900;}
.related-co{font-size:11px;color:var(--text-sub);margin-top:1px;}
@media(max-width:768px){.case-hero-inner,.doc-figs,.related-grid{grid-template-columns:1fr;}}

/* ============================================================
   製品ページ共通スタイル（2026-06-17 共通化・低リスク分のみ）
   12ページ以上で完全一致し、既存定義と衝突しないルールだけを集約。
   ※ hero-*/related-grid/section-head/wf-section 等は値が衝突するため各ページに残置。
   ============================================================ */
.related-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:20px 44px 20px 22px;text-decoration:none;color:inherit;transition:all .18s;display:flex;gap:14px;align-items:flex-start;}
/* flex子(本文ブロック)に min-width:0 を与え、長い見出し＋インラインSVG等が
   収縮できずカード幅を押し広げ右にはみ出すのを防ぐ(レスポンシブ崩れ4大真因①と同型)。
   ext-link付きカード(技術資料等)で特に顕在化するため恒久対策として共通化。 */
.related-card > div{min-width:0;}
/* ext-link併用時、a.ext-link{display:inline-flex;align-items:center;gap:4px} が
   カードのflexレイアウトを上書きするのを打ち消す(横並びアイコン＋本文のカード型を維持)。 */
a.related-card.ext-link{display:flex;align-items:flex-start;gap:14px;}
.related-h{font-size:14px;font-weight:900;margin-bottom:4px;}
.related-sub{font-size:11px;color:var(--text-sub);line-height:1.6;}
.fc-body{font-size:13px;color:var(--text-sub);line-height:1.75;}
.caution-icon{font-size:20px;flex-shrink:0;}
/* info-banner を caution と同じ「アイコン左独立」構造に統一(2026-06-25)。
   各ページの .info-banner 基本色/padは個別inlineのまま、レイアウトのみ共通化。
   .info-icon/.info-body を持つHTMLで有効。アイコンは本文1行目の行高内で縦中央＝1行/複数行とも位置一貫。 */
.info-banner{display:flex;gap:12px;align-items:flex-start;}
.info-icon{flex-shrink:0;height:1.75em;display:flex;align-items:center;}
.info-icon .lucide-ico{width:1.25em;height:1.25em;vertical-align:0;}
.info-body{min-width:0;}
.btn-outline-white:hover{background:rgba(255,255,255,.1);}
.hero-visual-inner img{max-width:100%;max-height:100%;object-fit:contain;}

/* ============================================================
   tech（技術コラム）共通スタイル（2026-06-17 共通化）
   14ページ以上で完全一致するtechコラムテンプレート。tech-* 名前空間で他と衝突しない。
   ※ tech-body table 系は第1段で各ページ個別修正済みのため共通化対象外。
   ============================================================ */
.tech-hero{background:linear-gradient(150deg,var(--brand-light) 0%,#fff5fb 40%,#fff 100%);padding:56px 0 48px;border-bottom:3px solid var(--brand-mid);}
.tech-hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.tech-hero-eyebrow::before{content:'';width:20px;height:2px;background:var(--brand);}
.tech-hero h1{font-size:clamp(22px,3.8vw,34px);font-weight:900;letter-spacing:-.02em;line-height:1.2;margin-bottom:12px;}
.tech-hero p{font-size:14px;color:var(--text-sub);line-height:1.85;max-width:680px;}
.tech-layout{display:grid;grid-template-columns:1fr 260px;gap:48px;padding:56px 0 80px;align-items:start;}
.tech-body h2{font-size:20px;font-weight:900;color:var(--text);margin:36px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--brand-mid);}
.tech-body h2:first-child{margin-top:0;}
.tech-body h3{font-size:15px;font-weight:900;color:var(--brand-dark,#b8006a);margin:24px 0 8px;}
.tech-body p{font-size:13px;color:var(--text-sub);line-height:1.9;margin:0 0 14px;}
.tech-body ul,.tech-body ol{padding-left:20px;margin:0 0 14px;}
.tech-body li{font-size:13px;color:var(--text-sub);line-height:1.85;margin-bottom:5px;}
.tech-body .note-box{background:var(--brand-light);border-left:4px solid var(--brand);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:14px 18px;margin:16px 0;font-size:12px;color:var(--text-sub);line-height:1.75;}
.tech-body .note-box strong{color:var(--brand);}
.tech-body .code-block{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;font-family:monospace;font-size:13px;color:var(--text);line-height:1.7;margin:14px 0;overflow-x:auto;}
.tech-sidebar{position:sticky;top:calc(var(--nav-h) + 16px);}
.sidebar-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow-sm);}
.sidebar-card h4{font-size:11px;font-weight:900;color:var(--text);margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--brand-mid);letter-spacing:.04em;text-transform:uppercase;}
.sidebar-card ul{list-style:none;padding:0;margin:0;}
.sidebar-card li{margin-bottom:1px;}
.sidebar-card a{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-sub);text-decoration:none;padding:5px 8px;border-radius:var(--radius-sm);transition:all .15s;}
.sidebar-card a:hover,.sidebar-card a.current-page{background:var(--brand-light);color:var(--brand);}
.sidebar-card a::before{content:"›";font-size:14px;color:var(--muted);flex-shrink:0;}
.sidebar-card a:hover::before,.sidebar-card a.current-page::before{color:var(--brand);}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--brand);text-decoration:none;margin-top:28px;padding:9px 18px;border:1.5px solid var(--brand);border-radius:var(--radius-sm);transition:all .15s;}
.back-link:hover{background:var(--brand);color:#fff;}
@media(max-width:900px){.tech-layout{grid-template-columns:1fr;}.tech-sidebar{position:static;}}

/* tech-body 表セル共通（14ページ完全一致・2026-06-17共通化）
   ※antennaは別パターンのため対象外(各ページ残置) */
.tech-body table{width:100%;border-collapse:collapse;font-size:12px;margin:16px 0;box-shadow:var(--shadow-sm);border-radius:var(--radius);border:1.5px solid var(--border);}
.tech-body th{background:var(--bg);font-weight:700;padding:10px 14px;text-align:left;font-size:11px;color:var(--text-sub);border-bottom:1px solid var(--border);}
.tech-body td{padding:10px 14px;border-bottom:1px solid var(--border-light);color:var(--text-sub);vertical-align:top;}
.tech-body tr:nth-child(even) td{background:var(--bg);}
.tech-body tr:last-child td{border-bottom:none;}

/* ============================================================
   A/Bテスト用: ハブヒーロー C案(ライトパネル)オーバーライド（2026-06-17）
   通常はB案(ミディアムネイビー)が適用される。公開後のA/Bテストで body.ab-hero-c が
   付与された時だけC案(淡グレー背景+ブランド差し色)に切替。HTMLは不変=SEO影響なし。
   ============================================================ */
body.ab-hero-c .hero-d,
body.ab-hero-c .hero-apps,
body.ab-hero-c .hero-tools{
  background:#f4f6f9 !important;
  border-bottom:none !important;
  border-top:4px solid var(--brand) !important;
}
/* C案: 背景が明るいのでグロー(::before)は消す */
body.ab-hero-c .hero-d::before,
body.ab-hero-c .hero-apps::before,
body.ab-hero-c .hero-tools::before{ display:none !important; }
/* C案: 文字色をダークに(明るい背景用) */
body.ab-hero-c .hero-d-h1,
body.ab-hero-c .hero-h1{ color:#1a2433 !important; }
body.ab-hero-c .hero-d-lead,
body.ab-hero-c .hero-lead,
body.ab-hero-c .hero-sub{ color:#5a6573 !important; }
body.ab-hero-c .hero-d-eyebrow,
body.ab-hero-c .hero-eyebrow{ color:var(--brand) !important; }
/* C案: アイブロウの灰色横線→ブランド色 */
body.ab-hero-c .hero-eyebrow::before{ background:var(--brand) !important; }
/* C案: サブラベル(ダーク背景用の半透明白)を明るい背景向けに */
body.ab-hero-c .hero-sub-label{ background:var(--brand-light) !important; color:var(--brand-dark) !important; border-color:var(--brand-mid) !important; }

/* === 製品メガメニュー（mega-prodnav）2026-06-27 TOPから巻き上げ・全ページ共通 === */
.global-nav-item-has-sub:focus-within > .global-nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.global-nav-dropdown.mega-prodnav { left: 0; right: auto; min-width: 860px; max-width: calc(100vw - 32px); padding: 18px 18px 10px; border-top: 3px solid var(--brand); }
.mega-prodnav .mega-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.mega-prodnav .mega-col--mid { border-left: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0 18px; }
.mega-prodnav .mega-col-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: #27384f; letter-spacing: .02em; margin-bottom: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.mega-prodnav .mega-col-head .lucide-ico { width: 17px; height: 17px; }
.mega-prodnav .mega-col-sub { font-size: 11px; font-weight: 500; color: var(--text-sub); margin: 8px 0 6px 0; }
.mega-prodnav .mega-col > a { position: relative; padding: 7px 22px 7px 8px; font-weight: 500; }
.mega-prodnav .mega-col > a::after { content: '›'; position: absolute; right: 9px; top: 7px; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--text-sub); opacity: .55; transition: transform .15s, color .15s, opacity .15s; }
.mega-prodnav .mega-col > a:hover::after { color: var(--brand); opacity: 1; transform: translateX(3px); }
.mega-prodnav .mega-hub { flex-direction: row; align-items: flex-start; gap: 9px; padding-right: 22px; }
.mega-prodnav .mega-hub .lucide-ico { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--text-sub); }
.mega-prodnav .mega-hub:hover .lucide-ico { color: var(--brand); }
.mega-prodnav .mega-hub span { display: flex; flex-direction: column; font-weight: 500; }
.mega-prodnav .mega-utilities { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.mega-prodnav .mega-utilities a.mega-util { position: relative; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; padding: 8px 26px 8px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.mega-prodnav .mega-utilities a.mega-util .lucide-ico { width: 15px; height: 15px; }
.mega-prodnav .mega-utilities a.mega-util::after { content: '›'; position: absolute; right: 11px; top: 50%; transform: translateY(-55%); font-size: 15px; font-weight: 700; color: var(--text-sub); opacity: .55; transition: transform .15s, color .15s, opacity .15s; }
.mega-prodnav .mega-utilities a.mega-util:hover::after { color: var(--brand); opacity: 1; transform: translate(3px,-55%); }
.mega-prodnav .mega-utilities a.mega-util--primary { background: var(--brand-light, #fdf2f8); border-color: transparent; color: var(--brand); font-weight: 800; }
.mega-prodnav .mega-utilities a.mega-util--primary::after { color: var(--brand); opacity: .85; }
/* ドロワー内 メガメニュー小見出し（2026-06-27 製品メガのモバイル展開用） */
.mw-drawer-flat .mw-drawer-sub { font-size: 11px; font-weight: 800; color: var(--text-sub); letter-spacing: .04em; margin: 14px 0 2px; padding-top: 10px; border-top: 1px solid var(--border); }
.mw-drawer-flat .mw-drawer-sub:first-child { border-top: none; padding-top: 0; margin-top: 6px; }