/* 共通ヘッダー・フッター（top.ns-education.jp と同じ見た目）
   色・フォントは net-school-site の brand/README.md と header.tsx / footer.tsx の値 */
:root{
  --ns-primary:#3A8F6A;      /* メイン（primary・accent） */
  --ns-text:#333333;         /* 本文 */
  --ns-text-sub:#666666;     /* 補助テキスト */
  --ns-text-strong:#222222;  /* コピーライト */
  --ns-bg:#FFFFFF;           /* 背景 */
  --ns-bg-soft:#F5F5F5;      /* 薄い背景 */
  --ns-bg-beige:#F1F0E8;     /* 薄い背景（ベージュ） */
  --ns-line:#E5E5E5;         /* 線 */
  --ns-line-soft:#F0F0F0;    /* フッターの区切り線 */
  --ns-line-faint:#F3F4F6;   /* ヘッダー1段目の下線 */
  --ns-tax:#21B3A3;          /* 差し色（税務） */
  --ns-labor:#E4748D;        /* 差し色（労務） */
  --ns-legal:#F2B93D;        /* 差し色（法務） */
  --ns-cta:#FF7222;          /* 無料相談ボタン（header.tsx） */
  --ns-menu-exams:#005BAC;   /* メガメニュー：講座一覧 */
  --ns-menu-publish:#29B6A1; /* メガメニュー：教材出版 */
  --ns-menu-training:#E07B91;/* メガメニュー：社員研修 */
  --ns-menu-recruit:#F7C137; /* メガメニュー：人材紹介 */
  --ns-font-ja:"Noto Sans JP",sans-serif;
  --ns-font-en:"Inter","Noto Sans JP",sans-serif;
  --ns-radius:8px;
  --ns-radius-pill:30px;
  --ns-header-h:120px;       /* 1段目75px＋2段目45px */
}
@media (max-width:767px){:root{--ns-header-h:64px}}

ns-header{display:block;height:var(--ns-header-h)}
ns-footer{display:block}

/* ---------- header ---------- */
.ns-header{position:fixed;top:0;left:0;width:100%;z-index:50;background:var(--ns-bg);line-height:1.5;font-family:var(--ns-font-ja);color:var(--ns-text);transition:box-shadow .3s}
.ns-header.is-scrolled{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.ns-header a{color:inherit;text-decoration:none}
.ns-header ul{list-style:none;margin:0;padding:0}
.ns-tier1{border-bottom:1px solid var(--ns-line-faint)}
.ns-container{max-width:1440px;margin:0 auto;padding:0 48px}
.ns-tier1 .ns-container{height:75px;display:flex;align-items:center;justify-content:space-between}
.ns-logo{display:flex;align-items:center;height:45px}
.ns-logo img{height:100%;width:auto}
.ns-right{display:flex;align-items:center;height:100%}
.ns-nav{display:flex;align-items:center;height:100%;margin-right:48px}
.ns-nav > ul{display:flex;align-items:center;gap:32px;height:100%}
.ns-nav > ul > li{height:100%;display:flex;align-items:center;position:relative}
.ns-nav-link{font-size:15px;white-space:nowrap;display:flex;align-items:center;height:100%;transition:color .2s}
.ns-nav-link:hover{color:var(--ns-primary)}
.ns-mega{position:absolute;top:75px;left:50%;width:1000px;background:var(--ns-bg);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);border-top:1px solid var(--ns-line);opacity:0;visibility:hidden;transform:translate(-50%,-8px);transition:all .3s;pointer-events:none}
.ns-has-mega:hover .ns-mega,.ns-has-mega:focus-within .ns-mega{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
.ns-mega-inner{padding:40px;display:flex;gap:40px}
.ns-mega-col{flex:1}
.ns-mega-col h3{margin:0;letter-spacing:normal;line-height:1.5;padding-bottom:8px;border-bottom:2px solid var(--c);color:var(--c);font-weight:700;font-size:16px;white-space:nowrap}
.ns-mega-col div{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.ns-mega-col div a{font-size:14px;white-space:nowrap;transition:color .2s}
.ns-mega-col div a:hover{color:var(--ns-primary)}
.ns-contact{display:flex;align-items:center;gap:24px}
.ns-tel-wrap{display:flex;align-items:center;gap:16px}
.ns-tel{display:flex;align-items:center;gap:8px}
.ns-tel-icon{background:var(--ns-primary);border-radius:50%;padding:6px;display:flex}
.ns-tel-icon svg{width:14px;height:14px;color:#fff}
.ns-tel-num{font-family:var(--ns-font-en);font-weight:700;font-size:20px;line-height:1;white-space:nowrap;transition:color .2s}
.ns-tel:hover .ns-tel-num{color:var(--ns-primary)}
.ns-tel-sub{font-size:11px;color:var(--ns-text-sub);white-space:nowrap}
.ns-cta{display:flex;align-items:center;justify-content:center;min-width:180px;height:48px;padding:0 16px;border-radius:4px;background:var(--ns-cta);color:#fff!important;font-weight:700;font-size:14px;white-space:nowrap;transition:opacity .2s}
.ns-cta:hover{opacity:.9}
.ns-tier2 .ns-container{min-height:45px;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.ns-tier2 .ns-container::-webkit-scrollbar{display:none}
.ns-tier2 nav{width:100%}
.ns-tier2 ul{display:flex;align-items:center;justify-content:space-between;width:100%;gap:24px;padding:4px 0}
.ns-tier2 li{flex-shrink:0}
.ns-tier2 a{display:block;font-size:12px;font-weight:700;line-height:1.25;text-align:center;padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.ns-tier2 a:hover{color:var(--ns-primary);border-color:var(--ns-primary)}
.ns-burger{display:none;width:48px;height:48px;border:0;background:none;cursor:pointer;padding:12px;margin-left:8px;color:var(--ns-text)}
.ns-burger span{display:block;height:2px;background:currentColor;border-radius:1px;transition:transform .25s,opacity .25s}
.ns-burger span+span{margin-top:6px}
.ns-header.is-open .ns-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.ns-header.is-open .ns-burger span:nth-child(2){opacity:0}
.ns-header.is-open .ns-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.ns-drawer{display:none}
.ns-header a:focus-visible,.ns-burger:focus-visible{outline:2px solid var(--ns-primary);outline-offset:2px;border-radius:2px}

/* 1280px未満：メインメニューをハンバーガーへ（元サイトもこの幅でメインメニューを隠す） */
@media (max-width:1279px){
  .ns-nav{display:none}
  .ns-burger{display:block}
  .ns-drawer{position:fixed;left:0;right:0;top:var(--ns-header-h);bottom:0;background:var(--ns-bg);overflow-y:auto;padding:8px 24px 40px;border-top:1px solid var(--ns-line)}
  .ns-header.is-open .ns-drawer{display:block}
  .ns-drawer-group{border-bottom:1px solid var(--ns-line);padding:16px 0}
  .ns-drawer-group h3{margin:0 0 10px;letter-spacing:normal;font-size:15px;font-weight:700;color:var(--c,var(--ns-text));padding-left:10px;border-left:3px solid var(--c,var(--ns-primary));line-height:1.4}
  .ns-drawer-group ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
  .ns-drawer-group li a{display:block;padding:8px 0;font-size:14px}
  .ns-drawer-main a{display:block;padding:14px 0;font-size:15px;font-weight:700;border-bottom:1px solid var(--ns-line)}
  .ns-drawer-contact{padding-top:24px;display:flex;flex-direction:column;align-items:center;gap:12px}
  .ns-drawer-contact .ns-cta{width:100%;max-width:360px}
}
@media (max-width:767px){
  .ns-container{padding:0 4px 0 16px}
  .ns-tier1 .ns-container{height:64px}
  .ns-logo{height:36px}
  .ns-tel-wrap,.ns-contact > .ns-cta,.ns-tier2{display:none}
}
@media (min-width:768px) and (max-width:1279px){
  .ns-tier2 .ns-container{padding:0 16px}
}
body.ns-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.ns-header,.ns-header *{transition:none!important}}

/* ---------- footer ---------- */
.ns-footer{background:var(--ns-bg);padding:80px 0 60px;font-family:var(--ns-font-ja);color:var(--ns-text);line-height:1.5}
.ns-footer a{color:inherit;text-decoration:none}
.ns-footer ul{list-style:none;margin:0;padding:0}
.ns-footer-inner{max-width:1248px;margin:0 auto;padding:0 24px}
.ns-footer-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:60px}
.ns-footer-logo img{width:180px;height:auto}
.ns-footer-nav{flex:1;margin-left:100px}
.ns-footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 20px}
.ns-footer-grid ul{display:flex;flex-direction:column;gap:15px}
.ns-footer-grid a{font-size:14px;font-weight:500;letter-spacing:.05em;transition:color .2s}
.ns-footer-grid a:hover{color:var(--ns-text-sub)}
.ns-sns{display:flex;justify-content:center;gap:16px;margin-bottom:28px}
.ns-sns a{width:40px;height:40px;border-radius:50%;background:var(--ns-bg-soft);display:grid;place-items:center;color:var(--ns-text);transition:background .2s,color .2s}
.ns-sns a:hover{background:var(--ns-primary);color:#fff}
.ns-sns svg{width:18px;height:18px}
.ns-copy{text-align:center;padding-top:20px;border-top:1px solid var(--ns-line-soft)}
.ns-copy span{font-family:var(--ns-font-en);font-size:11px;letter-spacing:.05em;color:var(--ns-text-strong)}
.ns-footer a:focus-visible{outline:2px solid var(--ns-primary);outline-offset:2px}
@media (max-width:767px){
  .ns-footer-top{flex-direction:column}
  .ns-footer-logo{margin-bottom:40px}
  .ns-footer-nav{margin-left:0;width:100%}
  .ns-footer-grid{grid-template-columns:1fr 1fr}
}