/* === メインナビ: サブメニュー対応 === */
.mast-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mast-nav>a,.mast-nav .nav-item>a{display:inline-block;padding:10px 12px;color:inherit;text-decoration:none;border-radius:8px;white-space:nowrap}
.mast-nav>a:hover,.mast-nav .nav-item>a:hover{background:rgba(255,255,255,.07)}
.nav-item{position:relative;display:inline-block}
.nav-item .caret{font-size:9px;opacity:.7;margin-left:5px}
.subnav{display:none;position:absolute;top:100%;left:0;z-index:60;min-width:250px;padding:8px;background:#0e141b;border:1px solid #263241;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.subnav a{display:block;padding:9px 12px;border-radius:8px;color:#dbe5ee;text-decoration:none;font-size:13.5px;line-height:1.45;white-space:nowrap}
.subnav a:hover{background:rgba(63,209,191,.12);color:#fff}
.subnav .sub-sep{height:1px;margin:6px 4px;background:#263241}
@media(hover:hover){}
.nav-item.open>.subnav{display:block}
@media(max-width:960px){
  .subnav{position:static;min-width:0;box-shadow:none;border-radius:10px;margin:2px 0 6px}
  .subnav a{white-space:normal}
}

/* メガメニュー */
.subnav.mega{display:none;grid-template-columns:repeat(3,minmax(180px,1fr));gap:4px 18px;min-width:0;width:max-content;max-width:min(820px,calc(100vw - 32px));max-height:min(74vh,640px);overflow:auto;padding:14px}
@media(hover:hover){}
.nav-item.open>.subnav.mega{display:grid}
.sub-h{font-size:11.5px;color:#7f93a5;letter-spacing:.08em;padding:4px 12px 6px;border-bottom:1px solid #223040;margin-bottom:4px}
.sub-col{min-width:0}
.subnav.mega a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:7px 12px;font-size:13px}
@media(max-width:960px){.subnav.mega{grid-template-columns:1fr;width:auto;max-height:60vh}}

/* === navfix-v2: ヘッダー安定化(全幅対応) === */
.masthead .mast-in{display:flex !important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 26px;max-width:1320px;margin:0 auto;padding:10px 20px;box-sizing:border-box}
.masthead .brand{flex:0 0 auto;display:flex;align-items:center}
.masthead .brand img{height:40px;width:auto;max-width:none}
.mast-nav{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:2px;flex-wrap:wrap}
.mast-nav>a,.mast-nav .nav-item>a{padding:9px 11px;font-size:13.5px}
/* ドロップダウンは右端基準で必ず画面内に */
.nav-item .subnav{left:auto;right:0}
.subnav.mega{right:0;left:auto}
/* ナビが2段目に折り返した時は中央寄せで安定 */
@media(max-width:1200px){.mast-nav{width:100%;justify-content:center;margin-left:0}}
/* タブレット以下: 縦積み+パネルはインライン展開(既定) */
@media(max-width:960px){
  .masthead .mast-in{justify-content:center}
  .mast-nav{justify-content:center;gap:0 2px}
  .nav-item .subnav,.subnav.mega{position:static;right:auto;width:100%;max-width:none}
}
@media(max-width:480px){.mast-nav>a,.mast-nav .nav-item>a{padding:8px 8px;font-size:12.5px}.masthead .brand img{height:34px}}

/* === navfix-v3: 実ページの .wrap を含む全ヘッダー安定化（全幅） === */
.masthead{position:sticky;top:0}
.masthead .wrap,.masthead .mast-in{
  display:flex !important;align-items:center;justify-content:space-between;flex-wrap:wrap;
  height:auto !important;min-height:64px;gap:4px 22px;
  max-width:1320px;margin:0 auto;padding:10px 20px;box-sizing:border-box;
}
.masthead .brand,.masthead .wrap>a:first-child{flex:0 0 auto;display:flex;align-items:center}
.masthead .brand img,.masthead .wrap>a:first-child img{height:40px;width:auto}
.masthead .mast-nav{margin-left:auto;justify-content:flex-end}
@media(max-width:1200px){
  .masthead .mast-nav{width:100%;justify-content:center;margin-left:0}
}
@media(max-width:960px){
  .masthead .wrap,.masthead .mast-in{justify-content:center;padding:8px 12px}
  .masthead .mast-nav{justify-content:center}
}
@media(max-width:480px){
  .masthead .brand img,.masthead .wrap>a:first-child img{height:32px}
}
/* 仕様一覧などの幅広テーブルは タブレット/スマホで横スクロール化（潰れ防止） */
@media(max-width:1024px){
  main table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;white-space:nowrap}
  main table td,main table th{white-space:normal;min-width:110px}
}

/* === click-affordance-v1: 一覧の押せる場所を明確に === */
.hub-list{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.hub-list li{margin:0;border:0;padding:0}
.hub-list a{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid #223040;border-radius:12px;background:#0e141b;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.hub-list a:hover{border-color:var(--accent);background:#101922}
.hub-list a::after{content:"→";margin-left:auto;color:var(--accent);font-weight:700;flex:0 0 auto}
.hub-thumb{width:58px;height:44px;object-fit:contain;background:#fff;border-radius:7px;flex:0 0 auto}
.hl-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.hl-txt>span:first-child{font-weight:600;line-height:1.4}
.hl-txt .hl-code{color:var(--ink-faint);font-size:11.5px}
main table tbody tr:hover{background:rgba(63,209,191,.07)}
.tbl-c1{min-width:230px}
.tbl-link{display:flex;align-items:center;gap:10px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.tbl-thumb{width:48px;height:36px;object-fit:contain;background:#fff;border-radius:5px;flex:0 0 auto}
@media(max-width:640px){.hub-list{grid-template-columns:1fr}.hub-thumb{width:50px;height:38px}}

/* === mega4: スクロール不要の4カラム一覧 === */
.subnav.mega.mega4{grid-template-columns:repeat(4,minmax(185px,1fr));gap:2px 22px;max-width:min(1000px,calc(100vw - 24px));max-height:none;overflow:visible;padding:16px 18px}
.subnav.mega.mega4 a{padding:6px 10px;font-size:13px;line-height:1.5}
.subnav.mega.mega4 .sub-h{font-size:11px;padding:2px 10px 6px;margin-bottom:6px}
.sub-strong{color:var(--accent) !important;font-weight:700}
@media(max-height:760px){.subnav.mega.mega4{max-height:calc(100vh - 90px);overflow:auto}}
@media(max-width:1100px){.subnav.mega.mega4{grid-template-columns:repeat(2,1fr);max-height:calc(100vh - 90px);overflow:auto}}
@media(max-width:960px){.subnav.mega.mega4{grid-template-columns:1fr;max-height:60vh}}

.subnav-2col{min-width:430px;display:none;grid-template-columns:1fr 1fr;gap:0 14px}
@media(hover:hover){}
.nav-item.open>.subnav-2col{display:grid}
.subnav-2col>.sub-strong,.subnav-2col>.sub-h,.subnav-2col>.sub-sep{grid-column:1/-1}
@media(max-width:960px){.subnav-2col{position:static;min-width:0;grid-template-columns:1fr;width:100%}}

/* === モバイルDrawerナビ === */
.nav-burger{display:none;width:44px;height:44px;border:1px solid #2a3644;border-radius:10px;background:#121a23;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;z-index:75}
.nav-burger span{display:block;width:20px;height:2px;background:#dbe5ee;border-radius:2px;transition:.2s}
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
html.nav-lock,html.nav-lock body{overflow:hidden}
@media(max-width:768px){
  .nav-burger{display:flex;margin-left:auto}
  .masthead .wrap,.masthead .mast-in{justify-content:space-between;flex-wrap:nowrap}
  .masthead .mast-nav{position:fixed;top:var(--mast-b,58px);right:0;bottom:0;left:auto;width:min(330px,88vw);margin:0;padding:18px 16px 28px;background:#0b1016;border-left:1px solid #223040;box-shadow:-18px 0 40px rgba(0,0,0,.5);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;overflow-y:auto;overflow-x:hidden;transform:translateX(105%);transition:transform .22s ease;z-index:60}
  .masthead .mast-nav.open{transform:none}
  .mast-nav>a,.mast-nav .nav-item>a{display:block;padding:13px 12px;font-size:15px;border-bottom:1px solid #17212c}
  .nav-item{display:block}
  .nav-item .subnav,.subnav.mega,.subnav-2col{position:static;display:none;min-width:0;width:100%;max-width:none;box-shadow:none;border:0;border-radius:0;padding:2px 0 8px 10px;grid-template-columns:1fr}
  .nav-item.open>.subnav,.nav-item.open>.subnav.mega,.nav-item.open>.subnav-2col{display:grid}
  .nav-cta{margin:14px 0 0;text-align:center}
}

/* mobile polish v159 */
@media(max-width:768px){
  .masthead .wrap{padding-top:10px;padding-bottom:10px;gap:10px}
  .brand-logo{width:176px;height:auto}
  .subnav,.subnav.mega,.subnav-2col{max-width:96vw;min-width:0}
}
@media(max-width:520px){
  .brand-logo{width:150px}
}


/* nav positioning v161: 通常サブ=ボタン直下 / メガ・2colのみ=メニューバー直下(画面中央固定) */
@media(min-width:769px){
  .mast-nav .nav-item{position:relative}
  .mast-nav .nav-item .subnav{left:0;right:auto;top:100%}
  .mast-nav .nav-item .subnav.mega,
  .mast-nav .nav-item .subnav-2col{
    position:fixed;left:50%;right:auto;top:var(--mast-b,64px);
    transform:translateX(-50%);width:max-content;max-width:min(96vw,960px)}
  .subnav.mega,.subnav.mega.mega4{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
  .subnav-2col{min-width:0;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  /* 右端の通常メニューが画面外へ出ないための保険 */
  .mast-nav .nav-item:nth-last-child(-n+2) .subnav:not(.mega):not(.subnav-2col){left:auto;right:0}
}

/* header containment fix v162: モバイルではヘッダーのblurを外し、fixed封じ込めを解除 */
@media(max-width:768px){
  .masthead{backdrop-filter:none;-webkit-backdrop-filter:none;filter:none;transform:none;
    background:rgba(13,17,23,.97)}
}

/* hover continuity v163: トリガーをヘッダー下端まで伸ばし、ボタン→パネル間の隙間を無くす */
@media(min-width:769px){
  .masthead .wrap{align-items:stretch}
  .brand{display:flex;align-items:center}
  .masthead .mast-nav{align-items:stretch}
  .mast-nav>a{display:inline-flex;align-items:center}
  .mast-nav .nav-item{display:inline-flex;align-items:stretch}
  .mast-nav .nav-item>a{display:inline-flex;align-items:center}
  .nav-cta{align-self:center}
  /* 保険: パネル上端に透明ブリッジ(12px)を敷き、微小な隙間でもホバーを維持 */
  .subnav::before,.subnav.mega::before,.subnav-2col::before{
    content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
}

/* v165: クリックで開閉(ホバー全廃)。開いたメニューは自分で閉じるまで消えない */
@media(min-width:769px){
  .nav-item.open>.subnav{display:block}
  .nav-item.open>.subnav.mega,.nav-item.open>.subnav-2col{display:grid}
  .nav-item.has-sub>a{cursor:pointer}
}
/* v164: ドロワー内サブメニューの整形 */
@media(max-width:768px){
  .masthead .mast-nav .nav-item.open>.subnav,
  .masthead .mast-nav .nav-item.open>.subnav.mega,
  .masthead .mast-nav .nav-item.open>.subnav-2col{max-height:56vh;overflow-y:auto}
  .masthead .mast-nav .nav-item>a .caret{transition:transform .15s}
  .masthead .mast-nav .nav-item.open>a .caret{transform:rotate(180deg)}
  .masthead .mast-nav .nav-item:hover>.subnav{display:none}
  .masthead .mast-nav .nav-item.open>.subnav{display:grid}
}

/* caret split v171: 項目名=リンク / ▼=開閉ボタン */
.mast-nav .nav-item>a .caret{display:inline-block;padding:8px 10px;margin:-8px -6px -8px 2px;cursor:pointer;border-radius:6px}

@media(max-width:768px){
  .masthead .mast-nav .nav-item>a{display:flex;align-items:center;justify-content:space-between}
  .masthead .mast-nav .nav-item>a .caret{padding:10px 14px;margin:-10px -8px;font-size:1.05em}
}