/* Kantan Nenkin — site-wide header + footer, ported verbatim from home.html (.nav-bar / .site-footer) */

.kn-header,.kn-footer,.kn-social-float{
  --color-ink:#15181b;
  --color-ink-2:#4c5459;
  --color-ink-3:#5f676c;
  --color-ink-4:#7d868c;
  --color-paper:#ffffff;
  --color-paper-2:#f5f3f0;
  --color-paper-3:#e9e5df;
  --color-accent:#d93d27;
  --color-accent-2:#b32f1c;
  --color-accent-wash:#fbeeeb;
  --color-line:#ded9d3;
  --color-line-2:#c6bfb6;
  --color-dark:#101d35;
  --color-on-dark:#ffffff;
  --color-on-dark-2:#a9b1b6;
  --color-on-dark-line:#33383c;

  --font-sans:"IBM Plex Sans","Noto Sans JP","Helvetica Neue",sans-serif;
  --font-jp:"Noto Sans JP","IBM Plex Sans",sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;

  --fw-medium:500;
  --fw-semi:600;
  --fw-bold:700;

  --fs-h2:34px;
  --fs-h3:19px;
  --fs-body:16px;
  --fs-sm:14px;
  --fs-xs:12px;
  --fs-nav:15px;

  --lh-tight:1.06;
  --lh-head:1.22;
  --lh-body:1.6;
  --ls-eyebrow:0.14em;

  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;

  --pad-section-x:40px;
  --pad-section-y:104px;
  --gap-col:64px;
  --w-shell:1200px;
  --w-full:100%;
  --w-card:44%;
  --w-card-3:30%;

  --h-nav:104px;
  --h-tap:48px;
  --h-mark:88px;
  --bw-1:1px;
  --bw-2:2px;
  --bw-6:7px;
  --radius:2px;

  --logo-box-w:203px;
  --logo-box-h:94px;
  --logo-img:249px;
  --logo-x:-22px;
  --logo-y:-84px;

  --shadow-frame:0 18px 60px rgba(16,29,53,0.30);
}
.kn-header *,.kn-footer *{box-sizing:border-box;}
.kn-header{margin:0;width:100%;}
.kn-header a,.kn-footer a{text-decoration:none;}

/* ---- neutralize Astra's own header/footer chrome so our markup sits flush ---- */
#masthead{background:transparent;box-shadow:none;border:none;padding:0;margin:0;}
#masthead .ast-main-header-wrap,#masthead .ast-primary-header-bar,#masthead .site-primary-header-wrap{background:transparent;border:none;box-shadow:none;padding:0;margin:0;max-width:100%;}
#masthead .ast-builder-grid-row,#masthead .site-header-primary-section-left{padding:0;margin:0;width:100%;}
#masthead .ast-builder-grid-row{grid-template-columns:1fr !important;}
#masthead .ast-header-html-1,#masthead .ast-header-html,#masthead .ast-builder-html-element{padding:0;margin:0;width:100%;}
@media (max-width:921.99px){
  #ast-desktop-header{display:block !important;}
}
#ast-mobile-header{display:none !important;}

#colophon{background:transparent;box-shadow:none;border:none;padding:0;margin:0;}
#colophon .site-primary-footer-wrap,#colophon .ast-builder-grid-row-container-inner,#colophon .ast-builder-footer-grid-columns{background:transparent;border:none;box-shadow:none;padding:0;margin:0;max-width:100%;width:100%;}
#colophon .ast-builder-grid-row{grid-template-columns:1fr !important;}
#colophon .footer-widget-area,#colophon .ast-footer-html-1,#colophon .ast-header-html,#colophon .ast-builder-html-element{padding:0;margin:0;width:100%;}

/* ---- nav-bar ---- */
.kn-header .nav-bar{position:sticky;top:0;z-index:5;flex:none;display:flex;flex-direction:column;background:var(--color-paper);border-bottom:var(--bw-1) solid var(--color-line);width:100%;}
.kn-header .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);height:var(--h-nav);width:var(--w-full);max-width:calc(var(--w-shell) + var(--pad-section-x) * 2);margin-left:auto;margin-right:auto;padding-left:var(--pad-section-x);padding-right:var(--pad-section-x);}
.kn-header .logo-lock{width:var(--logo-box-w);height:var(--logo-box-h);flex:none;display:flex;overflow:hidden;cursor:pointer;background:var(--color-paper);}
.kn-header .logo-lock img{width:var(--logo-img);height:var(--logo-img);max-width:none;flex:none;margin-left:var(--logo-x);margin-top:var(--logo-y);}
.kn-header .nav-links{display:flex;align-items:center;gap:var(--sp-6);min-width:0;}
.kn-header .nav-link{font-family:var(--font-sans);font-size:var(--fs-nav);font-weight:var(--fw-medium);color:var(--color-ink-2);background:none;border:none;border-bottom:var(--bw-2) solid transparent;padding-top:var(--sp-1);padding-bottom:var(--sp-1);padding-left:0;padding-right:0;border-radius:0;box-shadow:none;cursor:pointer;}
.kn-header .nav-link:hover{color:var(--color-ink);}
.kn-header .nav-link-on{color:var(--color-ink);border-bottom-color:var(--color-accent);}
.kn-header .nav-right{display:flex;align-items:center;gap:var(--sp-4);flex:none;white-space:nowrap;}
.kn-header .nav-phone{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-ink-2);white-space:nowrap;}
.kn-header .burger{display:none;flex-direction:column;justify-content:center;gap:var(--sp-1);width:var(--h-tap);height:var(--h-tap);flex:none;padding:var(--sp-3);background:var(--color-paper-2);border:var(--bw-1) solid var(--color-line);border-radius:var(--radius);box-shadow:none;cursor:pointer;}
.kn-header .burger-line{display:block;width:var(--w-full);height:var(--bw-2);background:var(--color-ink);}
.kn-header .mobile-menu{display:flex;flex-direction:column;border-top:var(--bw-1) solid var(--color-line);}
.kn-header .mobile-link{display:flex;align-items:center;min-height:var(--h-tap);padding:var(--sp-3) var(--pad-section-x);font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--color-ink);background:var(--color-paper);border:none;border-bottom:var(--bw-1) solid var(--color-line);text-align:left;cursor:pointer;}
.kn-header .mobile-link-on{background:var(--color-accent-wash);color:var(--color-accent-2);}
.kn-header .mobile-sublink{padding-left:var(--sp-7);font-size:var(--fs-sm);color:var(--color-ink-2);}
.kn-header .nav-drop-wrap{position:relative;display:flex;align-items:center;}
.kn-header .subnav{position:absolute;top:calc(100% + 12px);left:calc(var(--sp-4) * -1);display:flex;min-width:300px;background:var(--color-paper);border:var(--bw-1) solid var(--color-line);box-shadow:var(--shadow-frame);z-index:50;}
.kn-header .subnav-inner{display:flex;flex-direction:column;align-items:stretch;width:var(--w-full);padding:var(--sp-2) 0;}
.kn-header .subnav-link{display:flex;align-items:center;min-height:var(--sp-6);font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--color-ink-2);background:none;border:none;border-left:var(--bw-2) solid transparent;padding:var(--sp-2) var(--sp-4);text-align:left;cursor:pointer;}
.kn-header .subnav-link:hover{color:var(--color-ink);background:var(--color-paper-2);}
.kn-header .subnav-link-on{color:var(--color-accent-2);border-left-color:var(--color-accent);background:var(--color-accent-wash);}
.kn-header .caret-down{width:var(--sp-1);height:var(--sp-1);flex:none;margin-left:var(--sp-2);border-right:var(--bw-2) solid var(--color-ink-3);border-bottom:var(--bw-2) solid var(--color-ink-3);transform:rotate(45deg);}
.kn-header .nav-link-drop{display:flex;align-items:center;}
.kn-header .mobile-cta{padding:var(--sp-4) var(--pad-section-x);display:flex;}

.kn-header .button-primary{display:flex;align-items:center;justify-content:center;min-height:var(--h-tap);padding:var(--sp-3) var(--sp-6);font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-semi);color:var(--color-on-dark);background:var(--color-accent);border:var(--bw-2) solid var(--color-accent);border-radius:var(--radius);cursor:pointer;}
.kn-header .button-primary:hover{background:var(--color-accent-2);border-color:var(--color-accent-2);}
.kn-header .button-primary:active{transform:translateY(1px);}
.kn-header .button-primary,.kn-header .nav-link,.kn-header .subnav-link,.kn-header .mobile-link,.kn-header .logo-lock{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .15s ease,box-shadow .2s ease;}
.kn-header .logo-lock:hover{transform:scale(1.03);}
.kn-header .button-primary:focus-visible,.kn-header .nav-link:focus-visible,.kn-header .subnav-link:focus-visible,.kn-header .mobile-link:focus-visible,.kn-header .logo-lock:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}

@media (max-width:1150px){
  .kn-header .nav-phone,.kn-header .nav-right{display:none;}
}
@media (max-width:1150px) and (min-width:641px){
  .kn-header .nav-links{gap:var(--sp-4);}
}
@media (max-width:640px){
  .kn-header{--h-nav:76px;--logo-box-w:145px;--logo-box-h:67px;--logo-img:178px;--logo-x:-16px;--logo-y:-60px;}
  .kn-header .nav-links{display:none;}
  .kn-header .burger{display:flex;}
}

/* ---- floating contact buttons, bottom-left, site-wide ---- */
.kn-social-float{position:fixed;left:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:10px;}
.kn-social-float a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;padding:0;border-radius:50%;background:var(--color-paper);border:var(--bw-1) solid var(--color-line);color:var(--color-ink);box-shadow:0 2px 10px rgba(16,29,53,0.16);transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;}
.kn-social-float a:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-dark);transform:translateY(-2px);}
.kn-social-float svg{width:24px;height:24px;fill:currentColor;display:block;}
@media (max-width:640px){
  .kn-social-float{left:12px;bottom:12px;gap:8px;}
  .kn-social-float a{width:44px;height:44px;}
  .kn-social-float svg{width:22px;height:22px;}
}
@media (prefers-reduced-motion:reduce){
  .kn-social-float a:hover{transform:none;}
}

/* ---- site-footer ---- */
.kn-footer .site-footer{flex:none;display:flex;flex-direction:column;background:var(--color-dark);width:100%;}
.kn-footer .footer-inner{display:flex;flex-wrap:wrap;gap:var(--gap-col);width:var(--w-full);max-width:var(--w-shell);margin-left:auto;margin-right:auto;padding:var(--pad-section-y) var(--pad-section-x);}
.kn-footer .footer-brand{display:flex;flex-direction:column;gap:var(--sp-4);flex:1 1 var(--w-card);min-width:var(--sp-8);}
.kn-footer .footer-col{display:flex;flex-direction:column;gap:var(--sp-3);flex:1 1 var(--w-card-3);min-width:var(--sp-8);}
.kn-footer .footer-head{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-on-dark-2);margin-bottom:var(--sp-1);}
.kn-footer .footer-link{display:flex;align-items:center;min-height:var(--sp-5);font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--color-on-dark);background:none;border:none;padding:0;text-align:left;cursor:pointer;transition:color .2s ease;}
.kn-footer .footer-link:hover{color:var(--color-accent);}
.kn-footer .footer-text{font-family:var(--font-sans);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--color-on-dark-2);}

/* social icons in the brand column. The negative margin pulls the first 40px tap
   target back so the icon's visual edge lines up with the text above it. */
.kn-footer .footer-social{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);margin-left:-10px;}
.kn-footer .footer-social-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;padding:0;border:none;background:none;box-shadow:none;border-radius:0;color:var(--color-on-dark-2);transition:color .18s ease;}
.kn-footer .footer-social-link:hover,.kn-footer .footer-social-link:focus-visible{color:var(--color-accent);}
.kn-footer .footer-social-link svg{width:20px;height:20px;fill:currentColor;display:block;}
.kn-footer .footer-lockup{display:flex;align-items:center;gap:var(--sp-5);}
.kn-footer .footer-mark{width:auto;height:var(--h-mark);max-width:none;flex:none;}
.kn-footer .footer-wordmark{display:flex;flex-direction:column;gap:var(--sp-1);align-items:stretch;}
.kn-footer .lockup-bar{width:var(--w-full);height:var(--bw-6);background:var(--color-accent);flex:none;}
.kn-footer .lockup-tag{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--color-on-dark);line-height:var(--lh-head);}
.kn-footer .lockup-jp{font-family:var(--font-jp);font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--color-accent);line-height:var(--lh-tight);}
.kn-footer .lockup-en{font-family:var(--font-sans);font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--color-on-dark);line-height:var(--lh-tight);letter-spacing:-0.02em;}
.kn-footer .footer-bottom{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;width:var(--w-full);max-width:var(--w-shell);margin-left:auto;margin-right:auto;padding:var(--sp-5) var(--pad-section-x);border-top:var(--bw-1) solid var(--color-on-dark-line);}

@media (max-width:900px){
  .kn-footer .footer-inner{gap:var(--sp-7);}
}
@media (max-width:640px){
  .kn-footer{--pad-section-y:52px;--pad-section-x:20px;--gap-col:28px;}
  .kn-footer .footer-brand,.kn-footer .footer-col{flex:1 1 100%;}
}
