.header {background:#fff; border-bottom:2px solid #e2e4d9; padding:0 24px; height:56px; display:flex; align-items:center; position:sticky; top:0; z-index:1000; box-shadow:0 2px 8px #0000000a; font-family:-apple-system,BlinkMacSystemFont,"BIZ UDPGothic",sans-serif;}
.header-logo {display:flex;align-items:center;flex-shrink:0;} .header-logo img {height:28px;width:auto;max-width:55vw;object-fit:contain;}
.header-nav {display:flex;align-items:center;gap:4px;flex:1;}
.header-nav a {display:inline-flex;align-items:center;gap:6px;color:#333;font-size:15px;padding:8px 14px;border-radius:6px;text-decoration:none;white-space:nowrap;position:relative;}
.header-nav a:hover,.header-nav a.active {background:#eff3e9;color:#1a1a1a;}
.header-nav a.active {border-bottom:2px solid #5b8c2a;}
.header-nav-step::before {content:attr(data-step);position:absolute;left:-2px;top:50%;transform:translateY(-50%);font-size:2rem;font-weight:800;opacity:.1;}
.mobile-menu-panel {display:contents;} .hamburger-btn {display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto;}
.header a:focus-visible,.hamburger-btn:focus-visible {outline:3px solid #4abaa4;outline-offset:3px;}
html {scroll-padding-top:76px;} a.step-card {display:block;color:inherit;text-decoration:none;} .step-card:focus-visible {outline:3px solid #4abaa4;outline-offset:4px;} .step-detail-link {font-size:12px;color:#456d60;display:block;margin-top:12px;}
@media(max-width:768px){.header{padding:0 16px}.hamburger-btn{display:flex}.mobile-menu-panel{display:none;position:absolute;top:42px;left:-16px;right:-16px;background:white;border-bottom:2px solid #e2e4d9;box-shadow:0 6px 18px #0000001a}.mobile-menu-panel.mobile-menu-open{display:block}.header-nav{display:flex;flex-direction:column;align-items:stretch;padding:8px 16px}.header-nav a{padding:12px 16px}.header-user{display:none}}
.header-account {display:flex;align-items:center;gap:10px;flex-shrink:0;font-size:13px;color:#555;} .header-account[hidden] {display:none;} .header-account form {margin:0;}
.header-account-name {max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.header-account-link {color:#456d60;text-decoration:none;white-space:nowrap;} .header-account-link:hover {text-decoration:underline;}
.header-account-logout {font:inherit;font-size:13px;color:#456d60;background:#fff;border:1px solid #c9d6d2;border-radius:6px;padding:5px 10px;cursor:pointer;white-space:nowrap;} .header-account-logout:hover {background:#eff3e9;} .header-account-logout:focus-visible {outline:3px solid #4abaa4;outline-offset:3px;}
@media(max-width:768px){.header-account{gap:8px}.header-account-name,.header-account-link{display:none}.header-account-logout{padding:4px 8px;font-size:12px}}
/* ヘッダーの主CTA（#295。Figma Desktop 3:12：高さ92px・中身1120px・右端に132×44pxの「AI見積を試す →」／Mobile 45:159：高さ76px・CTAを常に表示）。
   公式ロゴ・ナビ・ログイン中の表示はそのまま。狭い幅ではメニューボタンと並べる */
.header {height:92px;}
.header-inner {max-width:1120px;margin:0 auto;display:flex;align-items:center;width:100%;height:100%;gap:1rem;position:relative;}
.header-cta {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:132px;min-height:44px;padding:0 16px;border-radius:6px;background:#2e4a44;color:#fff;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;}
.header-cta:hover {background:#1f3631;}
.header .header-cta:focus-visible {outline:3px solid #2e4a44;outline-offset:3px;}
html {scroll-padding-top:108px;}
@media(max-width:768px){
 .header{height:76px}
 html{scroll-padding-top:92px}
 .header-logo{min-width:0;flex-shrink:1}
 .header-logo img{max-width:100%}
 .header-cta{order:1;margin-left:auto;min-width:0;padding:0 12px}
 .hamburger-btn{order:2;margin-left:0;min-width:44px;min-height:44px;align-items:center;justify-content:center}
 .header-inner{gap:8px}
 .mobile-menu-panel{top:100%}
 .mobile-menu-panel .header-account{flex-wrap:wrap;gap:12px 16px;padding:4px 32px 16px;font-size:14px}
 .mobile-menu-panel .header-account-name,.mobile-menu-panel .header-account-link{display:inline}
 .mobile-menu-panel .header-account-logout{padding:8px 14px;font-size:14px;min-height:44px}
}
@media(min-width:769px) and (max-width:1180px){.header-account-name{display:none}.header-nav a{padding:8px 10px}}
@media(max-width:360px){.header-cta{padding:0 10px;font-size:13px}}
/* 375px 端末の 200% 拡大（CSS 約187px）でメニューボタンが右へはみ出さないように（#261） */
@media(max-width:240px){.header{padding:0 12px}.header-inner{gap:4px}.header-cta{padding:0 8px}}