/* ==========================================================
   メニュー 案A（ホワイト×製品カード）
   1100px以上: 横並びメニュー / 1099px以下: ハンバーガーメニュー
   ========================================================== */
.page { overflow: clip; } /* 既存の overflow:hidden だと上部固定が効かないため */
html.rd-navbar-fixed-linked .page { padding-top: 0; } /* 旧メニュー用の上余白を打ち消す */

.na, .na * { box-sizing: border-box; }
.na {
  --na-gap: clamp(10px, calc(4.4vw - 39px), 24px); /* メニュー名の左右の余白（画面幅に合わせて変化） */
  position: sticky; top: 0; z-index: 1000;
  background: #fff; color: #1f2d33;
  font-size: 14px; line-height: 1.5; text-align: left;
  box-shadow: 0 1px 0 #e3ebee;
}
.na ul { list-style: none; margin: 0; padding: 0; }
.na li, .na p { margin: 0; padding: 0; }
.na a, .na button, .na p + * { margin: 0; }
.na a { color: inherit; text-decoration: none; }
.na a:hover, .na a:focus { color: inherit; text-decoration: none; }
.na button { font: inherit; }
.na a:focus-visible, .na button:focus-visible { outline: 2px solid #00788a; outline-offset: -2px; }
.na svg { flex: none; }

/* 最上段 */
.na-top {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; padding: 0 24px;
  background: #f3f6f7; font-size: 12px; color: #51626a;
}
.na-top ul { display: flex; gap: 20px; }
.na .na-top a:hover { color: #006d7d; }

/* メインバー */
.na-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; padding: 0 24px;
}
.na-logo { display: block; flex: none; }
.na-logo img { display: block; width: auto; height: 58px; }
.na-list { display: flex; align-items: center; }
.na .na-link {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 76px; padding: 0 var(--na-gap);
  color: #1f2d33; font-weight: 500; white-space: nowrap;
}
.na .na-link:hover, .na .na-link:focus { color: #006d7d; }
.na .na-item.is-open > .na-link, .na .na-item.is-current > .na-link { color: #006d7d; }
.na-item.is-open > .na-link::after, .na-item.is-current > .na-link::after {
  content: ""; position: absolute; left: var(--na-gap); right: var(--na-gap); bottom: 0; height: 3px; background: #00bcd4;
}
.na-list:has(.is-open) .is-current:not(.is-open) > .na-link::after { display: none; }
.na .na-list:has(.is-open) .is-current:not(.is-open) > .na-link { color: #1f2d33; }
.na-item.is-open > .na-link svg { transform: rotate(180deg); }
.na .na-cta {
  display: flex; align-items: center; flex: none; height: 44px; padding: 0 16px;
  border-radius: 6px; background: #00788a; color: #fff; font-weight: 700; white-space: nowrap;
  transition: background .15s;
}
.na .na-cta:hover, .na .na-cta:focus { background: #005f6d; color: #fff; }
.na-burger, .na-sp-cta, .na-sp-only { display: none; }

/* ドロップダウン */
.na-panel {
  display: none; position: absolute; top: 100%; left: 32px; right: 32px;
  max-height: calc(100vh - 108px); overflow-y: auto;
  background: #fff; border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 40px rgba(16, 50, 60, .18);
}
.na-item.is-open > .na-panel { display: block; }
.na-simple { display: flex; gap: 40px; padding: 26px 28px; }
.na .na-ptitle { flex: 0 0 200px; font-size: 18px; font-weight: 700; }
.na-links { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* カード */
.na .na-card, .na .na-links a {
  display: block; height: 100%; padding: 14px 16px;
  border: 1px solid #e3ebee; border-radius: 8px; background: #fff; color: #1f2d33;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.na .na-links a { font-weight: 700; }
.na .na-card:hover, .na .na-links a:hover, .na .na-card:focus, .na .na-links a:focus {
  border-color: #00bcd4; box-shadow: 0 6px 18px rgba(0, 110, 125, .14); transform: translateY(-2px); color: #1f2d33;
}
.na-card small { display: block; font-size: 12px; font-weight: 500; color: #006d7d; }
.na-card strong { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; color: #1f2d33; }
.na .na-card--more { background: #eef8fa; border-color: #eef8fa; }
.na .na-card--more strong { color: #006d7d; }

/* 製品紹介 */
.na-product {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px 250px; gap: 28px;
  padding: 26px 28px 28px;
}
.na-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.na .na-gtitle { font-size: 15px; font-weight: 700; }
.na-head span { font-size: 12px; color: #51626a; }
.na-sfa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.na-tools { padding-left: 28px; border-left: 1px solid #e3ebee; }
.na-tools .na-gtitle { margin-bottom: 8px; }
.na .na-row {
  display: block; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: #1f2d33;
  transition: background .15s;
}
.na .na-row:hover, .na .na-row:focus { background: #eef8fa; color: #1f2d33; }
.na-row small { display: block; font-size: 11px; line-height: 1.5; color: #51626a; }
.na-row strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.4; }
.na-aside { display: flex; flex-direction: column; gap: 18px; }
.na-aside .na-gtitle { margin-bottom: 8px; }
.na .na-aside .na-card { height: auto; }
.na-box { margin-top: auto; padding: 18px; border-radius: 10px; background: #0f3a46; color: #fff; }
.na .na-box p { font-size: 14px; font-weight: 700; }
.na .na-box a { display: flex; align-items: center; min-height: 44px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.na .na-box a:last-child { border-bottom: 0; }
.na .na-box a:hover, .na .na-box a:focus { color: #6be0ee; }

@media (max-width: 1399px) {
  .na-logo img { height: 54px; }
}
/* 幅が狭いPC */
@media (max-width: 1279px) {
  .na-top, .na-bar { padding-left: 20px; padding-right: 20px; }
  .na-logo img { height: 48px; }
  .na .na-cta { padding: 0 14px; }
  .na-panel { left: 20px; right: 20px; }
  .na-product { grid-template-columns: minmax(0, 1fr) 260px 210px; gap: 20px; padding: 22px; }
  .na-tools { padding-left: 20px; }
}

/* タブレット・スマートフォン */
@media (max-width: 1199px) {
  .na-logo img { height: 44px; }
}
@media (max-width: 1149px) {
  .na-logo img { height: 40px; }
}
@media (max-width: 1099px) {
  html.na-lock { overflow: hidden; }
  .na-top, .na-bar > .na-cta { display: none; }
  .na-bar { height: 60px; padding: 0 8px 0 20px; }
  .na-logo img { height: 44px; }
  .na-burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  }
  .na-burger span { display: block; width: 22px; height: 2px; background: #1f2d33; transition: transform .2s, opacity .2s; }
  .na.is-menu .na-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .na.is-menu .na-burger span:nth-child(2) { opacity: 0; }
  .na.is-menu .na-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .na-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px);
    overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border-top: 1px solid #e3ebee;
    box-shadow: 0 18px 40px rgba(16, 50, 60, .18);
  }
  .na.is-menu .na-nav { display: block; }
  .na-list { display: block; }
  .na-item { border-bottom: 1px solid #e3ebee; }
  .na .na-link { justify-content: space-between; height: auto; min-height: 54px; padding: 0 20px; font-size: 15px; }
  .na .na-item.is-open > .na-link { font-weight: 700; }
  .na .na-item.is-current > .na-link { color: #1f2d33; }
  .na-item.is-open > .na-link::after, .na-item.is-current > .na-link::after { display: none; }

  .na-panel { position: static; max-height: none; overflow: visible; border-radius: 0; box-shadow: none; }
  .na-sp-only { display: block; }
  .na-simple { display: block; padding: 0 20px 16px; }
  .na .na-ptitle { display: none; }
  .na-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .na .na-links a { display: flex; align-items: center; min-height: 48px; padding: 8px 12px; font-weight: 500; }

  .na-product { display: block; padding: 0 20px 18px; }
  .na-head { margin-bottom: 8px; }
  .na-head span { display: none; }
  .na .na-gtitle { font-size: 13px; color: #51626a; }
  .na-sfa { gap: 8px; }
  .na .na-card { padding: 11px 12px; }
  .na-card small { font-size: 11px; line-height: 1.45; }
  .na-card strong { font-size: 14px; }
  .na-tools { margin-top: 18px; padding-left: 0; border-left: 0; }
  .na-tools .na-gtitle { margin-bottom: 4px; }
  .na .na-row { padding: 9px 0; border-bottom: 1px solid #eef2f3; border-radius: 0; }
  .na-aside { display: block; margin-top: 18px; }
  .na-aside .na-gtitle { margin-bottom: 8px; }
  .na-box { display: none; }

  .na-sp-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px 20px; }
  .na .na-sp-cta a {
    display: flex; align-items: center; justify-content: center; min-height: 48px;
    border: 1px solid #00788a; border-radius: 6px; color: #006d7d; font-size: 13px; font-weight: 700; text-align: center;
  }
  .na .na-sp-cta a.na-sp-primary { background: #00788a; color: #fff; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .na-sfa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .na-tools ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 399px) {
  .na-links { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .na * { transition: none !important; }
  .na .na-card:hover, .na .na-links a:hover { transform: none; }
}