/* =====================================================================
   シフト管理システム — Landing / Legal shared design system
   Palette は本体アプリ(shift-manager.html)と統一
   ===================================================================== */
:root{
  --s9:#1a2636; --s8:#2c3e56; --s7:#3a5068; --s6:#4a6fa5;
  --s5:#6a8fc5; --s4:#8aa0b8; --s3:#b8cde0; --s2:#dde4ed;
  --s1:#e8eef6; --s0:#f0f4f8; --w:#ffffff;
  --ink:#16202e;
  --danger:#dc2626; --success:#1f9d57; --success-l:#eef8f1; --warn:#d97706;
  --line:#e3e9f1;
  --radius:16px; --radius-sm:10px;
  --shadow-xs:0 1px 2px rgba(26,38,54,.06);
  --shadow:0 6px 22px rgba(26,38,54,.07);
  --shadow-md:0 16px 44px rgba(26,38,54,.10);
  --maxw:1140px;
  --ease:cubic-bezier(.4,.14,.18,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',system-ui,sans-serif;
  color:var(--ink); background:var(--w); line-height:1.75; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; font-feature-settings:"palt" 1;
}
a{color:inherit; text-decoration:none;}
svg{display:block;}
::selection{background:var(--s3); color:var(--s9);}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px;}
.section{padding:96px 0;}
.section.tint{background:var(--s0);}
.section.dark{background:var(--s9); color:#fff;}

/* kicker / headings ------------------------------------------------- */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--s6);
}
.kicker::before{content:""; width:26px; height:1.5px; background:var(--s5); display:inline-block;}
.dark .kicker, .kicker.on-dark{color:#9dbbe8;}
.dark .kicker::before{background:#5e7aa8;}
h1,h2,h3,h4{line-height:1.28; letter-spacing:.01em; color:var(--s9); font-weight:800;}
.dark h1,.dark h2,.dark h3{color:#fff;}
.display{font-size:clamp(32px,5.2vw,56px); font-weight:900; line-height:1.14; letter-spacing:-.01em;}
.h2{font-size:clamp(26px,3.6vw,38px); font-weight:850;}
.lead{font-size:clamp(15px,1.5vw,17.5px); color:var(--s7); margin-top:18px; max-width:60ch;}
.dark .lead{color:#c4d2e6;}
/* 日本語を文節単位で自然に折り返す(中途半端な改行を防ぐ)。未対応ブラウザは通常折返しにフォールバック */
.display,.h2,.lead,.hero h1,.feat .it h3,.feat .it p,.role h3,.role li,.tl .bd h4,.tl .bd p,
.flow .n h4,.flow .n p,.faq summary,.faq p,.mpill,.stat .lb,.band .lb,.doc p,.doc li{
  line-break:strict; word-break:auto-phrase;
}
.muted{color:var(--s4);}
.center{text-align:center;} .center .lead{margin-inline:auto;}
.head{max-width:720px;} .head .lead{margin-top:16px;}

/* buttons ----------------------------------------------------------- */
.btn{
  --bg:var(--s6); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:15px; padding:14px 28px; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer; transition:transform .2s var(--ease), background .2s, box-shadow .2s, border-color .2s; white-space:nowrap;
}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--s6); color:#fff; box-shadow:0 8px 22px rgba(74,111,165,.32);}
.btn-primary:hover{background:var(--s7); transform:translateY(-2px); box-shadow:0 14px 30px rgba(74,111,165,.40);}
.btn-line{background:transparent; color:var(--s7); border-color:var(--s3);}
.btn-line:hover{border-color:var(--s6); color:var(--s6);}
.btn-ondark{background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.42); backdrop-filter:blur(4px);}
.btn-ondark:hover{background:rgba(255,255,255,.18);}
.btn-sm{padding:10px 20px; font-size:14px;}

/* header ------------------------------------------------------------ */
.hd{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);}
.hd-in{display:flex; align-items:center; gap:20px; height:64px;}
.brand{display:flex; align-items:center; gap:11px; font-weight:850; font-size:16.5px; color:var(--s9);}
.brand .mark{width:32px;height:32px;flex:none;}
.hd-nav{display:flex; gap:28px; margin-left:auto; font-size:14px; font-weight:600; color:var(--s7);}
.hd-nav a{position:relative; padding:4px 0;}
.hd-nav a::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--s6); transition:width .2s var(--ease);}
.hd-nav a:hover{color:var(--s6);} .hd-nav a:hover::after{width:100%;}
.hd-cta{margin-left:6px;}
@media(max-width:900px){ .hd-nav{display:none;} .hd-cta{margin-left:auto;} }

/* icon chip --------------------------------------------------------- */
.ico{width:46px;height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--s1);color:var(--s6);}
.ico svg{width:23px;height:23px;}

/* generic card ------------------------------------------------------ */
.card{background:var(--w); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-xs);}

/* footer ------------------------------------------------------------ */
footer{background:var(--s9); color:#9fb2cb; padding:64px 0 34px; font-size:14px;}
.ft-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px;}
.ft-brand{display:flex; align-items:center; gap:11px; color:#fff; font-weight:850; font-size:17px; margin-bottom:14px;}
.ft-brand .mark{width:30px;height:30px;}
.ft p{font-size:13.5px; color:#8ca3c0; max-width:42ch;}
.ft h5{color:#cdd9ea; font-size:13px; letter-spacing:.04em; margin-bottom:14px; font-weight:700;}
.ft ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
.ft a{color:#aebed5;} .ft a:hover{color:#fff;}
.ft-copy{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09); font-size:12.5px; color:#7e93b0; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between;}
@media(max-width:760px){ .ft-grid{grid-template-columns:1fr; gap:30px;} }

/* ===== Document (legal/support) ===== */
.doc-hero{background:linear-gradient(160deg,var(--s9),var(--s7)); color:#fff; padding:64px 0 56px;}
.doc-hero .crumb{font-size:13px; color:#9dbbe8; margin-bottom:14px;}
.doc-hero .crumb a:hover{color:#fff;}
.doc-hero h1{font-size:clamp(26px,4vw,40px); font-weight:900;}
.doc-hero p{color:#c4d2e6; margin-top:12px;}
.doc-wrap{max-width:840px; margin-inline:auto; padding:64px 24px 90px;}
.doc{font-size:15.5px; color:var(--s8); line-height:1.95;}
.doc h2{font-size:21px; margin:42px 0 12px; padding-top:18px; border-top:1px solid var(--line); color:var(--s9);}
.doc h2:first-of-type{border-top:none; padding-top:0; margin-top:0;}
.doc h3{font-size:16.5px; margin:24px 0 8px; color:var(--s8);}
.doc p{margin:10px 0;}
.doc ul,.doc ol{margin:10px 0 10px 1.3em;}
.doc li{margin:6px 0;}
.doc a{color:var(--s6); text-decoration:underline; text-underline-offset:3px;}
.doc table{width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px;}
.doc th,.doc td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top;}
.doc th{background:var(--s1); font-weight:700; color:var(--s8); width:34%;}
.doc .updated{font-size:13.5px; color:var(--s4); margin-bottom:26px;}
.fill{background:#fff6e6; border-bottom:1px dashed var(--warn); padding:0 3px; color:#a8650a; font-weight:600;}
.callout{background:var(--s0); border:1px solid var(--line); border-left:3px solid var(--s6); border-radius:10px; padding:16px 18px; margin:20px 0; font-size:14.5px; color:var(--s7);}
.toc{background:var(--s0); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin-bottom:30px;}
.toc h4{font-size:13px; letter-spacing:.04em; color:var(--s6); margin-bottom:10px;}
.toc ul{list-style:none; columns:2; gap:24px;}
.toc li{margin:5px 0; font-size:14px;}
.toc a{color:var(--s7); text-decoration:none;} .toc a:hover{color:var(--s6);}
@media(max-width:560px){ .toc ul{columns:1;} .doc th{width:auto;} }

/* legal: 1ページ統合(タブ) */
.legal-nav{position:sticky; top:64px; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);}
.legal-nav .in{display:flex; gap:26px; max-width:840px; margin-inline:auto; padding:0 24px; overflow-x:auto;}
.legal-nav a{padding:15px 0; font-size:14px; font-weight:700; color:var(--s5); border-bottom:2px solid transparent; white-space:nowrap; transition:.18s;}
.legal-nav a.active,.legal-nav a:hover{color:var(--s6); border-bottom-color:var(--s6);}
.legal-section{scroll-margin-top:128px; padding-top:40px;}
.legal-section:not(:first-of-type){margin-top:30px; border-top:8px solid var(--s0);}
.legal-section > .sec-h{display:flex; align-items:center; gap:12px; margin-bottom:8px;}
.legal-section > .sec-h .badge{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--s6); padding:5px 12px; border-radius:999px;}
.legal-section > .sec-h h2{font-size:25px; border:none; padding:0; margin:0;}