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

/* ===== HEADER / NAV ===== */
#header{position:fixed; top:0; left:0; width:100%; z-index:1000; background:var(--white); 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; background:linear-gradient(90deg, var(--cyan) 0%, var(--red) 100%);}
.headerInner{max-width:1280px; margin:0 auto; padding:0 40px; height:68px; display:flex; align-items:center; justify-content:space-between;}

/* ロゴ */
.headerLogo{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.headerLogo img{max-width:100%;}
.headerLogoMark{max-width:100%; background:var(--navy); border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex-shrink:0;}
.headerLogoBar{height:2px; background:var(--cyan); border-radius:1px; transition:width 0.3s;}
.headerLogoBar:nth-child(1){width:20px;}
.headerLogoBar:nth-child(2){width:15px;}
.headerLogoBar:nth-child(3){width:10px;}
.headerLogoTextMain{font-family:'Noto Serif JP', serif; font-size:15px; font-weight:700; color:var(--navy); letter-spacing:2px; display:block;}
.headerLogoTextSub{font-size:9px; letter-spacing:3px; color:var(--gray); display:block; margin-top:1px;}

/* グローバルナビ */
.headerNav{display:flex; align-items:stretch; height:68px;}
.headerNavLink{display:flex; align-items:center; padding:0 16px; font-size:12px; color:var(--gray); letter-spacing:0.3px; border-bottom:3px solid transparent; margin-bottom:-3px; transition:color 0.2s, border-color 0.2s; white-space:nowrap;}
.headerNavLink:hover, .headerNavLink.active{color:var(--navy); border-bottom-color:var(--cyan);}

/* CTAエリア */
.headerActions{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.headerTel{text-align:right;}
.headerTelNum{font-family:'Bebas Neue', sans-serif; font-size:20px; color:var(--navy); letter-spacing:1px; line-height:1;}
.headerTelLabel{font-size:10px; color:var(--gray); letter-spacing:0.5px;}
.headerCta{display:inline-flex; align-items:center; gap:6px; background:var(--red); color:var(--white); padding:10px 20px; font-size:12px; font-weight:500; letter-spacing:0.5px; border-radius:4px; transition:background 0.2s; white-space:nowrap;}
.headerCta:hover{background:var(--red-dark);}

/* ハンバーガー（SP用） */
.headerHamburger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px;}
.headerHamburger span{display:block; width:24px; height:2px; background:var(--navy); border-radius:1px; transition:all 0.3s;}

/* ===== PAGE TOP ボタン ===== */
.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: enter; justify-content:center; color:var(--white); 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; transform:translateY(0);}
.pageTop:hover{background:var(--cyan);}

/* ===== BREADCRUMB ===== */
.breadcrumb{font-size:11px; color:var(--gray); margin-bottom:8px; letter-spacing:0.3px;}
.breadcrumb a{color:var(--cyan);}

/* ===== RESPONSIVE — header ===== */
@media screen and (max-width:1024px) {
  .headerInner{padding:0 24px;}
  .headerNav{display:none;}
  .headerCta{display:none;}
  .headerHamburger{display:flex;}
}