/* ==============================================
   共通ヘッダー: header.css
============================================== */

#header{position:fixed; top:0; left:0; width:100%; z-index:1000; background:#fff; border-bottom:1px solid var(--rule); box-shadow:0 1px 12px rgba(13,43,62,0.06); transition:box-shadow 0.3s;}
#header.scrolled{box-shadow:0 2px 20px rgba(13,43,62,0.12);}
#header::after{content:''; display:block; height:3px;}

.headerInner{max-width:1280px; margin:0 auto; padding:0 40px; height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px;}

.headerLogo{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.headerLogoTexts{display:flex; flex-direction:column;}
.headerLogoName{font-size:15px; font-weight:700; color:var(--navy); letter-spacing:2px; line-height:1.8;}
.headerLogoSub{font-size:9px; color:var(--cyan); letter-spacing:3px; margin-top:2px;}

.headerNav{display:flex; align-items:center; height:68px; flex:1; justify-content:center;}
.headerNav a{display:flex; align-items:center; height:68px; padding:0 16px; font-size:12px; color:var(--gray); border-bottom:3px solid transparent; margin-bottom:-3px; white-space:nowrap; transition:color 0.2s, border-color 0.2s;}
.headerNav a:hover, .headerNav a.active{color:var(--navy); border-bottom-color:var(--cyan);}

/* ===== MEGA MENU ===== */
.headerNav .hasDrop{position:relative;}
.headerNav .hasDrop > a{padding-right:20px; position:relative;}
.headerNav .hasDrop > a::after{content:''; position:absolute; right:6px; top:50%; transform:translateY(-50%); width:0; height:0; border-left:3px solid transparent; border-right:3px solid transparent; border-top:4px solid currentColor; opacity:0.4; transition:transform 0.2s, opacity 0.2s;}
.headerNav .hasDrop:hover > a{color:var(--navy); border-bottom-color:var(--cyan);}
.headerNav .hasDrop:hover > a::after{transform:translateY(-50%) rotate(180deg); opacity:0.7;}

.megaMenu{display:none; position:absolute; top:67px; left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--rule); border-top:2px solid var(--cyan); border-radius:0 0 4px 4px; box-shadow:0 8px 24px rgba(0,0,0,0.09); padding:20px 8px; z-index:200; white-space:nowrap; min-width:480px;}
.megaMenu.megaSm{min-width:220px;}
.headerNav .hasDrop:hover .megaMenu{display:flex; gap:0;}

.megaCol{flex:1; padding:0 16px; border-right:1px solid var(--rule);}
.megaCol:last-child{border-right:none;}
.megaColTitle{font-size:9px; font-weight:700; letter-spacing:2.5px; color:var(--cyan); text-transform:uppercase; margin-bottom:9px; padding-bottom:7px; border-bottom:1px solid var(--rule);}
.megaCol a{display:flex !important; align-items:center; gap:7px; height:auto !important; padding:6px 0 !important; font-size:12px; color:var(--text-sub); border-bottom:none !important; margin-bottom:0; white-space:nowrap; transition:color 0.15s;}
.megaCol a:hover{color:var(--cyan) !important; border-bottom-color:transparent !important;}
.megaDot{width:4px; height:4px; background:var(--cyan); border-radius:50%; flex-shrink:0; opacity:0.35; transition:opacity 0.15s;}
.megaCol a:hover .megaDot{opacity:1;}

.headerActions{display:flex; align-items:center; gap:16px; flex-shrink:0;}
.headerTelNum{font-size:20px; font-weight:700; color:var(--navy); letter-spacing:1px; line-height:1;}
.headerTelLabel{font-size:10px; color:var(--gray);}
.headerCta{background:var(--cyan); color:#fff; padding:10px 20px; font-size:12px; font-weight:700; border-radius:3px; white-space:nowrap; transition:background 0.18s;}
.headerCta:hover{background:var(--cyan-dark);}


/* ===== HAMBURGER ===== */
.headerHamburger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; flex-shrink:0;}
.headerHamburger span{display:block; width:24px; height:2px; background:var(--navy); border-radius:1px; transition:all 0.3s;}

/* ===== SP DRAWER ===== */
.spDrawer{position:fixed; top:0; right:0; width:280px; height:100vh; background:var(--navy); z-index:1100; transform:translateX(100%); transition:transform 0.3s ease; overflow-y:auto;}
.spDrawer.isOpen{transform:translateX(0);}
.spDrawerNav{padding:80px 24px 40px; display:flex; flex-direction:column;}
.spDrawerLink{display:block; padding:14px 0; font-size:14px; color:rgba(255,255,255,0.8); border-bottom:1px solid rgba(255,255,255,0.08); transition:color 0.18s;}
.spDrawerLink:hover{color:var(--cyan);}
.spDrawerContact{margin-top:28px; display:flex; flex-direction:column; gap:10px;}
.spDrawerTel{display:block; padding:12px 16px; background:rgba(255,255,255,0.06); border-radius:3px; font-size:14px; color:#fff; text-align:center;}
.spDrawerBtn{display:block; padding:12px 16px; background:var(--cyan); border-radius:3px; font-size:13px; font-weight:700; color:#fff; text-align:center; transition:background 0.18s;}
.spDrawerBtn:hover{background:var(--cyan-dark);}
.spOverlay{position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1050; opacity:0; pointer-events:none; transition:opacity 0.3s;}
.spOverlay.isOpen{opacity:1; pointer-events:auto;}

.pageTop{position:fixed; bottom:32px; right:32px; width:44px; height:44px; background:var(--navy); border:1px solid rgba(255,255,255,0.1); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; cursor:pointer; opacity:0; transform:translateY(10px); transition:opacity 0.3s, transform 0.3s, background 0.2s; z-index:500;}
.pageTop.isVisible{opacity:1; pointer-events:auto; transform:translateY(0);}
.pageTop:hover{background:var(--cyan);}

.breadcrumb{font-size:11px; color:var(--gray); margin-bottom:8px;}
.breadcrumb a{color:var(--cyan);}

@media (max-width:1280px){
  .headerCta{display:none;}
}

@media (max-width:1024px){
  .headerInner{padding:0 20px;}
  .headerNav{display:none;}
  .headerTel{display:none;}
  .headerCta{display:none;}
  .headerHamburger{display:flex;}
}