:root{
    --navy:#1d4463;
    --ink:#161f28;
    --sub:#4d5b68;
    --line:#d7e1e9;
    --card:#ffffff;
    --page:#eef3f7;
    --panel:#ffffff;
    --shadow:rgba(18,44,66,.14);
    --star:#e0a326;
    --shift:#2f6fa5;
    --riyou:#2b8a68;
    --soigei:#b4762a;
    --kenshu:#7a58a3;
    --sokutei:#b04d5b;
    --fs:1;            /* 文字サイズ倍率 */
  }
  html[data-theme="dark"]{
    --navy:#8dc2e4;
    --ink:#e8eef3;
    --sub:#a8b8c6;
    --line:#2c3a47;
    --card:#1b242e;
    --page:#121a22;
    --panel:#1b242e;
    --shadow:rgba(0,0,0,.5);
    --shift:#6fa8d6;
    --riyou:#63bd98;
    --soigei:#d8a05c;
    --kenshu:#ab8ad0;
    --sokutei:#dc8794;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth;font-size:calc(16px * var(--fs))}
  body{
    margin:0;
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Meiryo",sans-serif;
    color:var(--ink);background:var(--page);
    -webkit-text-size-adjust:100%;
  }
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(1200px 500px at 12% -8%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 60%),
      radial-gradient(900px 420px at 96% 6%, rgba(200,225,240,.65) 0%, rgba(200,225,240,0) 65%);
  }
  html[data-theme="dark"] body::before{opacity:.12}

  a{color:var(--navy)}
  :focus-visible{outline:3px solid #f0a92c;outline-offset:2px;border-radius:8px}

  /* ── ヘッダー ── */
  header{
    position:relative;color:#fff;overflow:hidden;
    background:linear-gradient(140deg,#12304a 0%,#1d4463 50%,#356f92 100%);
    padding:calc(2rem + env(safe-area-inset-top)) 1.25rem 2.6rem;
    border-bottom-left-radius:26px;border-bottom-right-radius:26px;
  }
  header::after{content:"";position:absolute;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.07)}
  header::before{content:"";position:absolute;right:60px;bottom:-140px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.05)}
  .head-in{max-width:1120px;margin:0 auto;position:relative;z-index:1}
  .head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
  .eyebrow{
    display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.22em;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);
    padding:.3rem .75rem;border-radius:999px;margin-bottom:.7rem;
  }
  header h1{margin:0;font-size:clamp(1.5rem,5.4vw,2.25rem);font-weight:800;letter-spacing:.05em}
  header p{margin:.5rem 0 0;font-size:.875rem;opacity:.92;line-height:1.65}
  .pref{display:flex;gap:.4rem;flex-wrap:wrap}
  .pbtn{
    font-family:inherit;font-size:.78rem;font-weight:700;cursor:pointer;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;
    border-radius:999px;padding:.42rem .8rem;white-space:nowrap;
  }
  .pbtn:hover{background:rgba(255,255,255,.26)}

  /* ── 検索バー ── */
  .toolbar{max-width:1120px;margin:-1.7rem auto 0;padding:0 1rem;position:relative;z-index:6}
  .toolbar-in{
    background:var(--panel);border:1px solid var(--line);border-radius:16px;
    box-shadow:0 10px 28px var(--shadow);padding:.9rem 1rem;
  }
  .search-wrap{position:relative;display:flex;align-items:center}
  #search{
    width:100%;font-size:1rem;font-family:inherit;color:var(--ink);
    padding:.8rem 2.6rem .8rem 2.6rem;border:1px solid var(--line);border-radius:11px;
    background:var(--page);
  }
  #search::-webkit-search-cancel-button{display:none}
  .search-ico{position:absolute;left:.9rem;font-size:1rem;opacity:.55;pointer-events:none}
  #clear{
    position:absolute;right:.5rem;border:0;background:transparent;cursor:pointer;
    font-size:1.15rem;line-height:1;color:var(--sub);padding:.35rem .5rem;display:none;
  }
  .kbd-hint{position:absolute;right:.7rem;font-size:.68rem;color:var(--sub);opacity:.7;pointer-events:none}
  .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
  .chip{
    font-size:.84rem;font-family:inherit;font-weight:700;cursor:pointer;
    padding:.45rem .9rem;border-radius:999px;
    border:1px solid var(--line);background:var(--card);color:var(--sub);
    transition:all .12s ease;
  }
  .chip:hover{border-color:#8fb4cd}
  .chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
  html[data-theme="dark"] .chip[aria-pressed="true"]{color:#12212c}
  .chip .n{opacity:.7;font-weight:700;margin-left:.25rem;font-size:.76rem}
  #hits{margin-top:.6rem;font-size:.8rem;color:var(--sub);display:none}

  /* ── 目次 ── */
  nav.toc{
    position:sticky;top:0;z-index:5;
    padding:.6rem 1rem;margin-top:.9rem;
    background:color-mix(in srgb, var(--page) 88%, transparent);
    backdrop-filter:blur(8px);
    border-bottom:1px solid transparent;
  }
  nav.toc.stuck{border-bottom-color:var(--line)}
  .toc-in{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.45rem}
  nav.toc a{
    font-size:.83rem;font-weight:700;text-decoration:none;color:var(--navy);
    background:var(--card);border:1px solid var(--line);
    padding:.42rem .85rem;border-radius:999px;transition:all .12s ease;
  }
  nav.toc a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
  nav.toc a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
  html[data-theme="dark"] nav.toc a:hover,html[data-theme="dark"] nav.toc a.on{color:#12212c}

  /* ── 本体 ── */
  main{max-width:1120px;margin:0 auto;padding:1.2rem 1rem 3.5rem}
  section{margin-top:2rem;scroll-margin-top:4.2rem}
  .sec-head{display:flex;align-items:center;gap:.7rem;margin:0 0 .85rem;padding-left:.8rem;position:relative}
  .sec-head::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:5px;border-radius:3px;background:var(--c,var(--navy))}
  .sec-head h2{margin:0;font-size:1.22rem;font-weight:800;letter-spacing:.03em}
  .sec-head .count:empty{display:none}
  .sec-head .count{font-size:.74rem;color:var(--sub);font-weight:700;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem}
  .sec-note{margin:-.3rem 0 .8rem .8rem;font-size:.8rem;color:var(--sub)}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:.85rem}
  a.card{
    display:flex;align-items:center;gap:.85rem;
    background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:.85rem 2.2rem .85rem 1rem;
    text-decoration:none;color:inherit;
    box-shadow:0 2px 6px var(--shadow);
    transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
    position:relative;overflow:hidden;min-height:5.2rem;
  }
  a.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--navy));opacity:.9}
  a.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px var(--shadow);border-color:#a9c6d8}
  a.card img{
    width:3.9rem;height:3.9rem;flex:0 0 3.9rem;
    border-radius:14px;object-fit:cover;background:#f6f2e9;border:1px solid rgba(0,0,0,.06);
  }
  .cbody{display:flex;flex-direction:column;gap:.15rem;min-width:0}
  .name{font-size:1.03rem;font-weight:800;line-height:1.34}
  .desc{font-size:.8rem;color:var(--sub);line-height:1.5}
  .meta{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.2rem;align-items:center}
  .tag{font-size:.68rem;font-weight:800;letter-spacing:.04em;padding:.16rem .55rem;border-radius:999px}
  .t-app{background:#e2ecf5;color:#1b4667}
  .t-sheet{background:#dff0e7;color:#1c6047}
  .t-form{background:#eee2f6;color:#553078}
  html[data-theme="dark"] .t-app{background:#25384b;color:#a9cfea}
  html[data-theme="dark"] .t-sheet{background:#1f3a30;color:#8fd8b6}
  html[data-theme="dark"] .t-form{background:#332845;color:#c8aae6}
  .glogin{font-size:.68rem;font-weight:700;color:var(--sub);border:1px dashed var(--line);border-radius:999px;padding:.14rem .5rem}
  .ext{position:absolute;right:.7rem;top:.7rem;font-size:.72rem;color:var(--sub);opacity:.6}
  .fav{
    position:absolute;right:.35rem;bottom:.35rem;
    border:0;background:transparent;cursor:pointer;
    font-size:1.05rem;line-height:1;padding:.4rem;color:#c3ccd4;
  }
  .fav[aria-pressed="true"]{color:var(--star)}
  .fav:hover{transform:scale(1.15)}

  /* ── 使い方（マニュアル）行 ── */
  .howto{
    margin-top:.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
    background:color-mix(in srgb, var(--card) 70%, transparent);
    border:1px dashed var(--line);border-radius:12px;padding:.6rem .8rem;
  }
  .howto .lb{font-size:.78rem;font-weight:800;color:var(--sub);letter-spacing:.04em}
  a.mn{
    font-size:.82rem;font-weight:700;text-decoration:none;color:var(--navy);
    background:var(--card);border:1px solid var(--line);border-radius:999px;
    padding:.38rem .8rem;transition:all .12s ease;
  }
  a.mn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
  html[data-theme="dark"] a.mn:hover{color:#12212c}

  /* ── よく使う／最近 ── */
  #pinned .grid,#recent .grid{margin-top:0}
  .empty-note{font-size:.82rem;color:var(--sub);background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:.7rem .9rem}

  /* ── すべてのマニュアル（帯） ── */
  a.banner{
    display:flex;align-items:center;gap:1rem;margin-top:2rem;
    text-decoration:none;color:#fff;
    background:linear-gradient(120deg,#2c5772 0%,#4a8199 100%);
    border-radius:18px;padding:1rem 1.25rem;box-shadow:0 6px 18px var(--shadow);
    transition:transform .14s ease,box-shadow .14s ease;
  }
  a.banner:hover{transform:translateY(-3px)}
  a.banner img{width:4rem;height:4rem;border-radius:14px;flex:0 0 4rem;object-fit:cover;background:#fff}
  a.banner .name{font-size:1.15rem}
  a.banner .desc{color:rgba(255,255,255,.88);font-size:.82rem}

  #empty{display:none;text-align:center;color:var(--sub);font-size:.95rem;padding:2.6rem 0}
  #empty button{
    display:inline-block;margin-top:.8rem;font-family:inherit;font-size:.85rem;font-weight:700;
    background:var(--navy);color:#fff;border:0;border-radius:999px;padding:.5rem 1.1rem;cursor:pointer;
  }
  section.hide,a.card.hide,a.banner.hide,.howto.hide,a.mn.hide{display:none}

  /* ── 困ったとき ── */
  .help{
    margin-top:2rem;background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:1rem 1.15rem;font-size:.85rem;color:var(--sub);line-height:1.8;
  }
  .help b{color:var(--ink)}

  footer{max-width:1120px;margin:0 auto;padding:0 1rem 3rem;font-size:.78rem;color:var(--sub);line-height:1.8}
  footer hr{border:0;border-top:1px solid var(--line);margin:0 0 .9rem}

  /* ── 上に戻る ── */
  #top{
    position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:20;
    width:3rem;height:3rem;border-radius:50%;border:1px solid var(--line);
    background:var(--card);color:var(--navy);font-size:1.1rem;cursor:pointer;
    box-shadow:0 6px 18px var(--shadow);opacity:0;pointer-events:none;transition:opacity .18s ease;
  }
  #top.show{opacity:1;pointer-events:auto}

  @media (max-width:560px){
    .grid{grid-template-columns:1fr}
    a.card img{width:3.3rem;height:3.3rem;flex-basis:3.3rem}
    .kbd-hint{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{transition:none !important;animation:none !important}
    a.card:hover{transform:none}
  }
  @media print{
    header,.toolbar,nav.toc,#top,.fav,.help,.ext{display:none !important}
    body{background:#fff}
    main{padding:0}
    a.card,a.banner{break-inside:avoid;box-shadow:none;border:1px solid #999;color:#000;background:#fff}
    a.card::after{content:" " attr(href);display:block;font-size:9pt;color:#333;word-break:break-all;grid-column:1/-1}
    a.mn::after{content:" (" attr(href) ")";font-size:8pt;color:#333}
    .grid{grid-template-columns:1fr}
    section.hide,a.card.hide{display:block !important}
  }

/* ── 職員用／管理者用のタブ ── */
.tabs{max-width:1120px;margin:-1.7rem auto .8rem;padding:0 1rem;position:relative;z-index:7}
.tabs-in{
  display:flex;gap:.4rem;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:.32rem;box-shadow:0 8px 22px var(--shadow);width:fit-content;
}
a.tab{
  display:flex;align-items:center;gap:.35rem;
  font-size:.92rem;font-weight:800;text-decoration:none;color:var(--sub);
  padding:.55rem 1.15rem;border-radius:999px;white-space:nowrap;
  transition:all .12s ease;
}
a.tab:hover{color:var(--ink);background:var(--page)}
a.tab.on{background:var(--navy);color:#fff}
html[data-theme="dark"] a.tab.on{color:#12212c}
.tabs + .toolbar{margin-top:0}
@media (max-width:420px){ a.tab{font-size:.85rem;padding:.5rem .85rem} }

/* 管理者ページの見出し帯 */
.kanri-note{
  max-width:1120px;margin:.2rem auto 0;padding:0 1rem;
  font-size:.8rem;color:var(--sub);
}
.pw{font-size:.68rem;font-weight:800;color:#8a5b12;background:#fdf1d8;border-radius:999px;padding:.16rem .55rem}
html[data-theme="dark"] .pw{background:#3d3218;color:#e6c078}