/* =========================================================
   Nutrits 共通ヘッダー（グローバルメニュー 案A「青のCTAバー」）
   ・原則 .nav-a の内側に限定。LINE相談ボタンの共通色指定は全ページに適用
   ・それ以外の例外は次の4つだけ（いずれも na- 接頭辞で衝突しない）
       html.na-js       … header.js が読み込まれた印（無いときはJS無効の表示）
       html.na-locked   … スマホメニュー表示中の背面スクロール停止
       html.na-scrolled … スクロールしてヘッダーが縮んだ状態
       --na-hh          … いまのヘッダーの高さ（ページ側の sticky / scroll-margin 用）
   ・CSSで初期非表示にする演出は置かない。開閉は hidden 属性（header.js が管理）
   ・GSAP には依存しない。動きは transition / animation だけ（reduced-motion では無し）
   ========================================================= */
:root{--na-hh:84px}
html.na-scrolled{--na-hh:64px}
@media (max-width:1023.98px){
  :root{--na-hh:64px}
  html.na-scrolled{--na-hh:56px}
}
html.na-locked body{position:fixed;left:0;right:0;width:100%;overflow:hidden}

.nav-a{
  --blue:#479CD9;--deep:#1E5F8C;--ink:#10161b;--muted:#4b5a63;--line:#cddce8;--paper:#f8fbfd;--sky:#a9d6f5;
  --en:'Barlow Condensed','Noto Sans JP',sans-serif;
  --ja:'Noto Sans JP',sans-serif;
  --hh:84px;
  /* 固定ヘッダーの高さぶんの余白（縮んでも本文の位置は動かさない） */
  display:block;padding-top:var(--hh);
  font-family:var(--ja);font-size:16px;font-weight:400;line-height:1.8;letter-spacing:normal;text-align:left;color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.nav-a,.nav-a *,.nav-a *::before,.nav-a *::after{box-sizing:border-box}
:where(.nav-a) :is(h1,h2,h3,p,ul,ol,li,figure,dl,dd){margin:0}
:where(.nav-a) :is(ul,ol){padding:0;list-style:none}
:where(.nav-a) a{color:inherit}
:where(.nav-a) img{display:block;max-width:100%;height:auto}
:where(.nav-a) svg{display:block}
:where(.nav-a) button{appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;padding:0;margin:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}
.nav-a [hidden]{display:none !important}
.nav-a img.is-missing{visibility:hidden}
.nav-a :focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.nav-a .arr{display:inline-block;font-family:var(--en);font-weight:800;line-height:1;transition:transform .2s}

.nav-a .na-skip{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:6px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;line-height:1.5;text-decoration:none}
.nav-a .na-skip:focus{top:12px}

/* =========================================================
   ヘッダー
   ========================================================= */
.nav-a .na-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:#fff;border-bottom:1px solid transparent;
  transition:box-shadow .3s, border-color .3s;
}
.nav-a .na-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 12px 30px -20px rgba(16,40,60,.45)}
.nav-a .na-bar{display:flex;align-items:stretch;height:var(--hh);padding-left:clamp(20px, 3vw, 40px);transition:height .3s}
.nav-a .na-header.is-scrolled .na-bar{height:64px}

.nav-a .na-brand{display:flex;align-items:center;margin-right:auto;text-decoration:none}
.nav-a .na-brand img{width:auto;height:30px;transition:height .3s}
.nav-a .na-header.is-scrolled .na-brand img{height:26px}
.nav-a .na-brand-txt{display:none;font-family:var(--en);font-size:30px;font-weight:900;line-height:1;letter-spacing:.02em;color:var(--ink)}
.nav-a .na-brand.is-noimg img{display:none}
.nav-a .na-brand.is-noimg .na-brand-txt{display:block}

.nav-a .na-nav{display:flex;align-items:stretch}
.nav-a .na-menu{display:flex;align-items:stretch}
.nav-a .na-menu > li{display:flex;align-items:stretch}
.nav-a .na-link{
  position:relative;display:flex;align-items:center;gap:6px;padding:0 16px;
  font-size:15px;font-weight:700;line-height:1.4;text-decoration:none;white-space:nowrap;
}
.nav-a .na-link::after{
  content:"";position:absolute;left:16px;right:16px;bottom:calc(50% - 19px);height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .25s;
}
.nav-a .na-link:hover::after,
.nav-a .na-link[aria-current]::after,
.nav-a .na-trigger[aria-expanded="true"]::after{transform:scaleX(1)}
.nav-a .na-link[aria-current]{color:var(--deep)}
.nav-a .na-link:focus-visible{outline-offset:-6px}
.nav-a .na-chev{width:8px;height:8px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s, margin .25s}
.nav-a .na-trigger[aria-expanded="true"]{color:var(--deep)}
.nav-a .na-trigger[aria-expanded="true"] .na-chev{transform:rotate(-135deg);margin-top:3px}

.nav-a .na-contact{
  display:flex;align-items:center;gap:8px;margin-left:8px;padding:0 22px;
  border-left:1px solid var(--line);font-size:15px;font-weight:700;line-height:1.4;text-decoration:none;white-space:nowrap;
}
.nav-a .na-contact svg{width:18px;height:18px;color:var(--blue)}
.nav-a .na-contact:hover{color:var(--deep)}
.nav-a .na-contact:focus-visible{outline-offset:-6px}

/* 右端の青いCTAバー（ヘッダーの高さいっぱい） */
.nav-a .na-cta{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  min-width:212px;padding:0 28px;
  background:var(--blue);color:#fff;text-decoration:none;
  transition:background-color .2s;
}
.nav-a .na-cta:hover{background:var(--deep)}
.nav-a .na-cta:hover .arr{transform:translateX(4px)}
.nav-a .na-cta:focus-visible{outline:3px solid var(--ink);outline-offset:-5px}
.nav-a .na-cta-sub{font-size:11.5px;font-weight:700;line-height:1.3;letter-spacing:.04em;color:rgba(255,255,255,.9)}
.nav-a .na-cta-main{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:17px;font-weight:900;line-height:1.3;white-space:nowrap}
.nav-a .na-cta-main .arr{font-size:20px}

.nav-a .na-burger{display:none}

/* 読了バー（スクロール後に出る） */
.nav-a .na-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;opacity:0;transition:opacity .3s;pointer-events:none}
.nav-a .na-progress i{display:block;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:0 50%}
.nav-a .na-header.is-scrolled .na-progress{opacity:1}

/* ---------- メガメニュー（5サービスを料金つきカードで） ---------- */
.nav-a .na-mega{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 34px 60px -34px rgba(16,40,60,.45);
}
.nav-a .na-mega-in{width:min(1200px, 100% - 48px);margin-inline:auto;padding:26px 0 24px}
.nav-a .na-mega-head{display:flex;align-items:baseline;gap:16px;margin-bottom:16px;line-height:1.5}
.nav-a .na-mega-en{font-family:var(--en);font-size:13px;font-weight:700;letter-spacing:.26em;color:var(--blue)}
.nav-a .na-mega-t{font-size:15px;font-weight:700}
.nav-a .na-cards{display:grid;grid-template-columns:repeat(4, minmax(0,1fr)) minmax(0,.84fr);gap:12px}
.nav-a .na-cards > li{display:flex}
.nav-a .na-card{
  position:relative;display:flex;flex-direction:column;width:100%;
  padding:20px 20px 18px;border:1px solid var(--line);border-radius:10px;background:#fff;
  text-decoration:none;transition:border-color .2s, box-shadow .2s, transform .2s;
}
.nav-a .na-card:hover,
.nav-a .na-card[aria-current="page"]{border-color:var(--blue)}
.nav-a .na-card:hover{box-shadow:0 18px 36px -22px rgba(30,95,140,.5);transform:translateY(-2px)}
.nav-a .na-card-en{font-family:var(--en);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.22em;color:var(--blue)}
.nav-a .na-card-name{margin-top:6px;font-size:17px;font-weight:900;line-height:1.45}
.nav-a .na-card-desc{margin-top:8px;font-size:13px;line-height:1.75;color:var(--muted)}
.nav-a .na-card-foot{margin-top:auto;padding-top:16px}
.nav-a .na-card-pl{display:block;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;font-weight:700;line-height:1.4;color:var(--muted)}
.nav-a .na-card-fig{display:flex;align-items:baseline;flex-wrap:wrap;margin-top:6px;line-height:1;color:var(--deep)}
.nav-a .na-card-fig .pre{margin-right:3px;font-size:13px;font-weight:900}
.nav-a .na-card-fig .num{font-family:var(--en);font-size:36px;font-weight:900;letter-spacing:-.005em}
.nav-a .na-card-fig .unit{margin-left:2px;font-size:13px;font-weight:900}
.nav-a .na-card-note{display:block;margin-top:6px;font-size:11.5px;font-weight:700;line-height:1.5;color:var(--deep)}
.nav-a .na-card--all{color:#fff;border-color:transparent;background:linear-gradient(150deg, #479CD9 0%, #3483bf 50%, #1E5F8C 100%)}
.nav-a .na-card--all:hover,
.nav-a .na-card--all[aria-current="page"]{border-color:transparent}
.nav-a .na-card--all .na-card-en{color:rgba(255,255,255,.9)}
.nav-a .na-card--all .na-card-desc{color:rgba(255,255,255,.92)}
.nav-a .na-card-go{
  display:grid;place-items:center;width:44px;height:44px;margin-top:auto;border-radius:50%;
  background:#fff;color:var(--deep);font-family:var(--en);font-size:20px;font-weight:800;line-height:1;transition:transform .2s;
}
.nav-a .na-card--all:hover .na-card-go{transform:translateX(4px)}
.nav-a .na-mega-strip{
  display:flex;align-items:center;gap:16px 24px;margin-top:14px;padding:14px 18px 14px 20px;
  border:1px solid var(--line);border-radius:10px;background:var(--paper);
}
.nav-a .na-mega-strip p{flex:1;font-size:13.5px;line-height:1.7;color:var(--muted)}
.nav-a .na-mega-strip b{margin-right:10px;font-size:14.5px;color:var(--ink)}
.nav-a .na-strip-link{display:inline-flex;align-items:center;gap:10px;flex:none;min-height:44px;padding:0 22px;border-radius:999px;background:var(--blue);color:#fff;font-size:14.5px;font-weight:700;line-height:1.4;text-decoration:none;transition:background-color .2s}
.nav-a .na-strip-link:hover{background:var(--deep)}
.nav-a .na-strip-link:hover .arr{transform:translateX(4px)}

/* メガメニューの下の暗幕 */
.nav-a .na-scrim{position:fixed;inset:0;z-index:40;background:rgba(16,22,27,.32);opacity:0;pointer-events:none;transition:opacity .25s}
.nav-a.is-mega-open .na-scrim{opacity:1;pointer-events:auto}

/* =========================================================
   スマホ：青の全画面メニュー
   ========================================================= */
.nav-a .na-sheet{
  position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  color:#fff;background:linear-gradient(160deg, #479CD9 0%, #3483bf 46%, #1E5F8C 100%);
  opacity:0;transform:translateY(-10px);transition:opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav-a.is-menu-open .na-sheet{opacity:1;transform:none}
.nav-a .na-sheet::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background-image:linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px);background-size:calc(100% / 6) 100%;
}
.nav-a .na-sheet > *{position:relative}
.nav-a .na-sheet-top{display:flex;align-items:center;justify-content:space-between;height:64px;padding-left:20px;flex:none}
.nav-a .na-sheet-top img{width:auto;height:26px;filter:brightness(0) invert(1)}
.nav-a .na-close{position:relative;width:64px;height:64px;flex:none}
.nav-a .na-close::before,.nav-a .na-close::after{content:"";position:absolute;left:20px;top:31px;width:24px;height:2px;background:#fff;border-radius:1px}
.nav-a .na-close::before{transform:rotate(45deg)}
.nav-a .na-close::after{transform:rotate(-45deg)}
.nav-a .na-close:focus-visible,.nav-a .na-sheet :focus-visible{outline-color:#fff}
.nav-a .na-sl{padding:4px 24px 0}
.nav-a .na-sl > li{border-bottom:1px solid rgba(255,255,255,.24)}
.nav-a .na-sl-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:68px;
  font-size:28px;font-weight:900;line-height:1.3;letter-spacing:.01em;text-align:left;text-decoration:none;
}
.nav-a .na-sl-link .en{font-family:var(--en);font-size:13px;font-weight:700;letter-spacing:.24em;color:rgba(255,255,255,.72)}
.nav-a .na-sl-link[aria-current] .ja{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:var(--sky)}
.nav-a .na-sl-r{display:flex;align-items:center;gap:12px}
.nav-a .na-pm{position:relative;width:22px;height:22px;flex:none}
.nav-a .na-pm::before,.nav-a .na-pm::after{content:"";position:absolute;left:3px;top:10px;width:16px;height:2px;background:#fff;transition:transform .25s}
.nav-a .na-pm::after{transform:rotate(90deg)}
.nav-a .na-acc[aria-expanded="true"] .na-pm::after{transform:rotate(0)}
.nav-a .na-sl-sub{padding:0 0 16px}
.nav-a .na-sl-sub a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 0 11px 16px;border-left:2px solid rgba(255,255,255,.4);
  font-size:16px;font-weight:700;line-height:1.5;text-decoration:none;
}
.nav-a .na-sl-sub a[aria-current="page"]{border-left-color:#fff}
.nav-a .na-sl-sub .p{flex:none;font-size:12px;font-weight:700;color:var(--sky);white-space:nowrap}
.nav-a .na-sl-sub .p b{font-family:var(--en);font-size:17px;font-weight:800;letter-spacing:.01em}
.nav-a .na-sheet-cta{margin-top:auto;display:grid;gap:10px;padding:28px 24px calc(24px + env(safe-area-inset-bottom))}
.nav-a .na-sbtn{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:8px 18px;border-radius:999px;
  font-size:15.5px;font-weight:700;line-height:1.35;text-decoration:none;text-align:center;
}
.nav-a .na-sbtn svg{flex:0 0 20px;width:20px;height:20px}
.nav-a .na-sbtn--main{flex-direction:column;gap:2px;min-height:72px;background:#fff;color:var(--deep);box-shadow:0 14px 30px rgba(10,40,64,.28)}
.nav-a .na-sbtn--main small{font-size:12px;font-weight:700;color:var(--muted)}
.nav-a .na-sbtn--main span{font-size:19px;font-weight:900}
.nav-a .na-sbtn-row{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
.nav-a .na-sbtn--ghost{border:1.5px solid rgba(255,255,255,.85);color:#fff}

/* =========================================================
   開いたときの動き（GSAPなし。reduced-motion では動かさない）
   ========================================================= */
@keyframes na-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes na-slide{from{opacity:0;transform:translateX(-10px)}}
@media (prefers-reduced-motion:no-preference){
  .nav-a.is-mega-open .na-cards > li,
  .nav-a.is-mega-open .na-mega-strip{animation:na-rise .42s cubic-bezier(.2,.7,.2,1) backwards}
  .nav-a.is-mega-open .na-cards > li:nth-child(2){animation-delay:.045s}
  .nav-a.is-mega-open .na-cards > li:nth-child(3){animation-delay:.09s}
  .nav-a.is-mega-open .na-cards > li:nth-child(4){animation-delay:.135s}
  .nav-a.is-mega-open .na-cards > li:nth-child(5){animation-delay:.18s}
  .nav-a.is-mega-open .na-mega-strip{animation-delay:.225s}

  .nav-a.is-menu-open .na-sl > li,
  .nav-a.is-menu-open .na-sheet-cta > *{animation:na-rise .5s cubic-bezier(.2,.7,.2,1) .06s backwards}
  .nav-a.is-menu-open .na-sl > li:nth-child(2){animation-delay:.11s}
  .nav-a.is-menu-open .na-sl > li:nth-child(3){animation-delay:.16s}
  .nav-a.is-menu-open .na-sl > li:nth-child(4){animation-delay:.21s}
  .nav-a.is-menu-open .na-sl > li:nth-child(5){animation-delay:.26s}
  .nav-a.is-menu-open .na-sheet-cta > *:nth-child(1){animation-delay:.31s}
  .nav-a.is-menu-open .na-sheet-cta > *:nth-child(2){animation-delay:.36s}

  .nav-a .na-acc[aria-expanded="true"] + .na-sl-sub > li{animation:na-slide .35s cubic-bezier(.2,.7,.2,1) backwards}
  .nav-a .na-acc[aria-expanded="true"] + .na-sl-sub > li:nth-child(2){animation-delay:.04s}
  .nav-a .na-acc[aria-expanded="true"] + .na-sl-sub > li:nth-child(3){animation-delay:.08s}
  .nav-a .na-acc[aria-expanded="true"] + .na-sl-sub > li:nth-child(4){animation-delay:.12s}
  .nav-a .na-acc[aria-expanded="true"] + .na-sl-sub > li:nth-child(5){animation-delay:.16s}
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1199.98px){
  .nav-a .na-link{padding:0 12px}
  .nav-a .na-link::after{left:12px;right:12px}
  .nav-a .na-contact{padding:0 16px}
  .nav-a .na-cta{min-width:0;padding:0 20px}
  .nav-a .na-cta-sub{display:none}
  .nav-a .na-card{padding:16px 14px}
  .nav-a .na-card-name{font-size:15.5px}
  .nav-a .na-card-fig .num{font-size:30px}
}
@media (max-width:1023.98px){
  .nav-a{--hh:64px}
  .nav-a .na-header.is-scrolled .na-bar{height:56px}
  .nav-a .na-bar{padding-left:20px}
  .nav-a .na-brand img{height:26px}
  .nav-a .na-header.is-scrolled .na-brand img{height:24px}
  .nav-a .na-nav,.nav-a .na-contact{display:none}
  .nav-a .na-cta{padding:0 16px;gap:0}
  .nav-a .na-cta-sub{display:block;font-size:10.5px}
  .nav-a .na-cta-main{font-size:14.5px;gap:8px}
  .nav-a .na-cta-main .arr{font-size:16px}
  .nav-a .na-burger{position:relative;display:block;width:60px;flex:none}
  .nav-a .na-burger span{position:absolute;left:19px;width:22px;height:2px;border-radius:1px;background:var(--ink)}
  .nav-a .na-burger span:nth-child(1){top:calc(50% - 8px)}
  .nav-a .na-burger span:nth-child(2){top:calc(50% - 1px)}
  .nav-a .na-burger span:nth-child(3){top:calc(50% + 6px);width:14px}
  .nav-a .na-burger:focus-visible{outline-offset:-6px}
}
@media (max-width:359.98px){
  .nav-a .na-cta-sub{display:none}
  .nav-a .na-sl-link{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .nav-a *,.nav-a *::before,.nav-a *::after{transition-duration:0s !important;animation:none !important}
}

/* =========================================================
   JS無効時（html に .na-js が無い）：メニューのリンクを一覧として見せる
   ・PC：サービスはホバー／キーボードのフォーカスで開く
   ・スマホ：全画面メニューの中身を、ヘッダーの下に通常の一覧として並べる
   ========================================================= */
html:not(.na-js) .nav-a .na-dd:hover .na-mega[hidden],
html:not(.na-js) .nav-a .na-dd:focus-within .na-mega[hidden]{display:block !important}
html:not(.na-js) .nav-a .na-dd:hover .na-trigger,
html:not(.na-js) .nav-a .na-dd:focus-within .na-trigger{color:var(--deep)}
html:not(.na-js) .nav-a .na-dd:hover .na-trigger::after,
html:not(.na-js) .nav-a .na-dd:focus-within .na-trigger::after{transform:scaleX(1)}
html:not(.na-js) .nav-a .na-dd:hover .na-chev,
html:not(.na-js) .nav-a .na-dd:focus-within .na-chev{transform:rotate(-135deg);margin-top:3px}
@media (max-width:1023.98px){
  html:not(.na-js) .nav-a .na-sheet[hidden]{display:flex !important}
  html:not(.na-js) .nav-a .na-sheet{position:relative;inset:auto;z-index:auto;overflow:visible;opacity:1;transform:none}
  html:not(.na-js) .nav-a .na-sheet::before{position:absolute}
  html:not(.na-js) .nav-a .na-sheet-top,
  html:not(.na-js) .nav-a .na-burger,
  html:not(.na-js) .nav-a .na-pm{display:none}
  html:not(.na-js) .nav-a .na-sl{padding-top:12px}
  html:not(.na-js) .nav-a .na-sl-sub[hidden]{display:block !important}
  html:not(.na-js) .nav-a .na-acc{cursor:default}
}

/* 共通メニューと各ページのLINE相談ボタンを、LINEと分かる緑に統一する。 */
a[href^="https://lin.ee/"]:is(.na-sbtn,.tb-btn,.ib-btn,.sla-btn,.btn,.wa-btn,.bb-btn,.xb-btn,.cb-btn,.ca-btn){
  background:#06C755 !important;
  border-color:#06C755 !important;
  color:#fff !important;
}
a[href^="https://lin.ee/"]:is(.na-sbtn,.tb-btn,.ib-btn,.sla-btn,.btn,.wa-btn,.bb-btn,.xb-btn,.cb-btn,.ca-btn):hover{
  background:#05A847 !important;
  border-color:#05A847 !important;
}