/* ソクヨヤ 新しいヘッダー・フッター・動き（全ページ共通。LP も読む）
   ⚠️ 名前は全部 sx- で始める。各ページの class とぶつけないため */
:root{--sx-blue:#2563EB;--sx-blue-d:#1D4ED8;--sx-bg:#F8FAFC;--sx-ink:#101828;--sx-sub:#667085;--sx-line:#E4E7EC;--sx-max:1280px;--sx-gut:clamp(20px,5vw,80px);--sx-ease:cubic-bezier(.2,.7,.2,1);--sx-font:"Inter","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,sans-serif}
/* ── 新しいヘッダー ── */
/* 上に固定する（コンサルの LP と同じ）。本文を下げるのは skin.css の body の padding-top */
header.sx-hd{position:fixed;inset:0 0 auto 0;z-index:100;padding:0;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
header.sx-hd.stuck{border-bottom-color:var(--sx-line)}
.sx-hd .sx-in{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1440px;margin-inline:auto;padding-inline:var(--sx-gut)}
.sx-logo{display:inline-flex;align-items:center;min-height:44px}
.sx-logo img{height:26px;width:auto}
.sx-nav{display:flex;align-items:center;gap:4px}
.sx-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:14px;font-weight:500;color:var(--sx-ink);text-decoration:none;border-radius:999px;transition:background-color .2s}
.sx-nav a:hover,.sx-nav a[aria-current="page"]{background:var(--sx-bg)}
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none;background:var(--sx-blue);color:#fff!important;transition:background-color .2s,transform .25s var(--sx-ease),box-shadow .25s var(--sx-ease)}
.sx-btn:hover{background:var(--sx-blue-d);transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(37,99,235,.6)}
.sx-nav .sx-btn{margin-left:10px;min-height:42px;padding:0 20px;font-size:14px}
.sx-menu{display:none;min-width:44px;min-height:44px;border:0;background:none;align-items:center;justify-content:center;cursor:pointer}
.sx-menu span,.sx-menu span::before{display:block;width:20px;height:1.5px;background:var(--sx-ink);position:relative;transition:transform .3s var(--sx-ease)}
.sx-menu span{transform:translateY(-3px)}
.sx-menu span::before{content:"";position:absolute;top:6px}
.sx-menu[aria-expanded="true"] span{transform:rotate(45deg)}
.sx-menu[aria-expanded="true"] span::before{transform:translateY(-6px) rotate(-90deg)}
.sx-mnav{display:none}
@media (max-width:1023.98px){
  .sx-nav{display:none}
  .sx-menu{display:inline-flex}
  .sx-mnav{position:fixed;inset:72px 0 auto;background:#fff;border-bottom:1px solid var(--sx-line);padding:8px var(--sx-gut) 24px;flex-direction:column}
  .sx-mnav.open{display:flex}
  .sx-mnav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--sx-line);font-size:16px;font-weight:500;color:var(--sx-ink);text-decoration:none}
  .sx-mnav .sx-btn{margin-top:18px;border-bottom:0}
}

/* ── 新しいフッター ── */
footer.sx-ft{margin:0;border-radius:0;background:#fff;color:var(--sx-sub);border-top:1px solid var(--sx-line);padding:clamp(56px,7vw,96px) 0 32px;overflow:visible}
.sx-ft .sx-in{max-width:var(--sx-max);margin-inline:auto;padding-inline:var(--sx-gut)}
.sx-ft-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px}
.sx-ft-brand img{height:26px;width:auto}
.sx-ft-brand p{margin-top:18px;font-size:14px;line-height:1.8;max-width:26em}
.sx-ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sx-ft-cols h2{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--sx-ink);margin-bottom:8px}
.sx-ft-cols a{display:flex;align-items:center;min-height:40px;font-size:14px;color:var(--sx-sub);text-decoration:none}
.sx-ft-cols a:hover{color:var(--sx-ink)}
.sx-ft-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:48px;padding-top:20px;border-top:1px solid var(--sx-line);font-size:12px}
@media (max-width:767.98px){.sx-ft-top{grid-template-columns:minmax(0,1fr)}.sx-ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── 動き（v2.js が付ける） ── */
.sx-ln{display:block}
.sx-js .sx-ln{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.sx-js .sx-ln > span{display:block;transform:translateY(108%);transition:transform 1.05s var(--sx-ease);transition-delay:calc(var(--li,0) * 110ms + 80ms)}
.sx-js .sx-lnw.sx-in .sx-ln > span{transform:none}
.sx-js .sx-rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--sx-ease),transform .9s var(--sx-ease);transition-delay:var(--rd,0s)}
.sx-js .sx-rv.sx-in{opacity:1;transform:none}
.sx-js .sx-stg > *{opacity:0;transform:translateY(16px);transition:opacity .6s var(--sx-ease),transform .7s var(--sx-ease);transition-delay:calc(var(--i,0) * 70ms)}
.sx-js .sx-stg.sx-in > *{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sx-js .sx-ln > span,.sx-js .sx-rv,.sx-js .sx-stg > *{opacity:1!important;transform:none!important;transition:none!important}
}

/* 大見出しの行は折らない（字の大きさは v2.js の sxFit が合わせる）*/
.sx-fit .sx-ln > span{white-space:nowrap}