/* 目次のサイドバー（フリグマ形式・2026-10-14 TAMA：LP（依頼者・専門業者）・コラム・サービスのトップで同じ部品）
   ・パソコン（幅1100以上）：左に固定の欄（幅280・2026-10-15 TAMA：右→左）。中身はその右（資料＝#deck を、ふつうのページ＝body をずらす）
   ・スマホ・タブレット：下に固定の帯（目次・先行登録）。資料は枚の高さを帯の分だけ縮め、ふつうのページは下に帯の分の余白を足す（帯が中身に重ならない）
   部品の作りは src/client/sidebar.ts（html に deck-side／page-side の印が付く）
   色（2026-10-15 TAMA 夕方の直し）：地の橙はブランドの橙 #e4690e（濃い橙 #c2540a は暗くて色が悪いのでやめた）。橙の地に白い字は大きな太字（18.66px 以上の太字）だけ＝大きな文字の基準 3:1
   小さな字の今の目次は、薄い橙の地に濃い字。白地の上の小さな橙の字は #bb5008・目次の番号は #6b6b73 */
:root{--sdw:280px;--bbh:68px}
/* 前の部品（右の点・右下の浮いたボタン・コラムの下の帯）は、サイドバーの時は出さない */
html.deck-side #dots,html.deck-side #fcta,html.deck-side .flogin,html.page-side .fcta{display:none!important}
#sd-side a,#sd-drawer a{text-decoration:none}
#sd-side,#sd-bar,#sd-drawer{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",YuGothic,Meiryo,"Noto Sans JP",system-ui,sans-serif;color:#16161a;box-sizing:border-box;-webkit-font-smoothing:antialiased}
#sd-side *,#sd-bar *,#sd-drawer *{box-sizing:border-box}
#sd-side button,#sd-bar button,#sd-drawer button{font-family:inherit}

/* 共通：目次の並び */
.sd-note{margin:0;text-align:center;font-size:13px;font-weight:800;color:#bb5008;line-height:1.5}
.sd-h{margin:0;font-size:14px;font-weight:900;color:#6b6b73;letter-spacing:.08em}
.sd-toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sd-toc button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:10px;background:none;color:#26262e;font-size:15px;font-weight:700;line-height:1.35;text-align:left;cursor:pointer}
.sd-toc .sd-n{flex:none;width:24px;text-align:right;font-size:14px;font-weight:900;color:#6b6b73;font-variant-numeric:tabular-nums}
.sd-toc .sd-t{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.sd-toc li.cur button{background:#fdeadb;color:#16161a}
.sd-toc li.cur .sd-n{color:#a34606}
@media(hover:hover){.sd-toc li:not(.cur) button:hover{background:#faf6f2}}

/* 共通：申込のボタン */
.sd-cta{display:flex;flex-direction:column;gap:8px}
.sd-go{display:block;width:100%;text-align:center;text-decoration:none;border:0;cursor:pointer;border-radius:16px;padding:16px 8px;background:#e4690e;color:#fff;font-size:19px;font-weight:900;line-height:1.3;box-shadow:0 5px 0 #b44f0a}
.sd-sub{display:block;width:100%;text-align:center;text-decoration:none;border-radius:14px;padding:12px 8px;background:#fff;color:#16161a;border:1.5px solid #16161a2e;font-size:16px;font-weight:700;line-height:1.3}
.sd-login{display:flex;align-items:center;justify-content:center;min-height:40px;text-decoration:none;color:#6e6e76;font-size:14px;font-weight:700;border-radius:10px}
@media(hover:hover){.sd-go:hover{filter:brightness(1.06)}.sd-sub:hover,.sd-login:hover{background:#faf6f2}}

/* 共通：‹ n / N › */
.sd-nav,.sd-nav2{display:flex;align-items:center;justify-content:space-between;gap:6px}
.sd-prev,.sd-next{flex:none;width:48px;height:44px;border-radius:12px;border:1px solid #e7e2dc;background:#fff;color:#16161a;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.sd-prev:disabled,.sd-next:disabled{opacity:.35;cursor:default}
.sd-pg{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ───── パソコン：左の欄 ───── */
#sd-side{display:none}
@media(min-width:1100px){
html.deck-side #deck{margin-left:var(--sdw)}
html.page-side body{padding-left:var(--sdw)}
#sd-side{display:flex;flex-direction:column;gap:12px;position:fixed;left:0;top:0;bottom:0;width:var(--sdw);background:#fff;border-right:1px solid #e7e2dc;padding:20px 16px calc(16px + env(safe-area-inset-bottom));z-index:20}
.sd-logo{color:#16161a;display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 4px;font-size:20px;font-weight:900;line-height:1}
.sd-logo img{width:34px;height:34px;border-radius:9px;display:block}
#sd-toc1{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px}
#sd-bar,#sd-drawer{display:none!important}
}
/* 低いパソコンの画面：目次の行を詰める */
@media(min-width:1100px) and (max-height:760px){
#sd-side{gap:8px;padding-top:14px}
.sd-toc button{min-height:34px;padding:4px 10px;font-size:14px}
.sd-go{padding:13px 8px;font-size:17px}
.sd-sub{padding:10px 8px;font-size:15px}
.sd-login{min-height:34px}
}

/* ───── スマホ・タブレット：下の帯 ───── */
@media(max-width:1099px){
html.deck-side #deck{padding-bottom:calc(var(--bbh) + env(safe-area-inset-bottom))}
html.deck-side #deck .s,html.deck-side #deck .s.vid-s{height:calc(100vh - var(--bbh) - env(safe-area-inset-bottom));height:calc(100dvh - var(--bbh) - env(safe-area-inset-bottom))}
html.page-side body{padding-bottom:calc(var(--bbh) + env(safe-area-inset-bottom))}
#sd-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(var(--bbh) + env(safe-area-inset-bottom));padding:0 calc(8px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(8px + env(safe-area-inset-left));background:#fff;border-top:1px solid #e7e2dc;box-shadow:0 -4px 16px #16161a0d;display:flex;align-items:center;justify-content:center;gap:4px}
.sd-tocbtn{flex:none;height:46px;padding:0 12px;border-radius:12px;border:1px solid #e7e2dc;background:#fff;color:#16161a;font-size:15px;font-weight:900;cursor:pointer;display:flex;align-items:center;gap:6px}
.sd-nav2{flex:none;gap:2px}
.sd-nav2 .sd-prev,.sd-nav2 .sd-next{width:30px;border:0;background:none;font-size:28px}
.sd-nav2 .sd-pg{min-width:3.3em;text-align:center;font-size:13px}
.sd-go2{flex:1 1 auto;min-width:0;max-width:340px;height:46px;display:flex;align-items:center;justify-content:center;padding:0 8px;border-radius:999px;background:#e4690e;color:#fff;text-decoration:none;font-size:19px;font-weight:900;white-space:nowrap;border:0;cursor:pointer;box-shadow:0 3px 0 #b44f0a}
.sd-login2{flex:none;height:44px;display:flex;align-items:center;padding:0 4px;color:#6e6e76;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* 目次の引き出し（下から） */
#sd-drawer{position:fixed;inset:0;z-index:40}
#sd-drawer[hidden]{display:none}
.sd-bg{position:absolute;inset:0;background:#16161a73}
.sd-box{position:absolute;left:0;right:0;bottom:0;max-height:82dvh;overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:20px 20px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;max-width:560px;margin:0 auto}
.sd-dh{display:flex;align-items:center;justify-content:space-between}
.sd-x{width:44px;height:44px;border:0;background:none;font-size:26px;line-height:1;color:#6b6b73;cursor:pointer}
#sd-drawer .sd-cta{padding-top:6px;border-top:1px solid #e7e2dc}
html.sd-open{overflow:hidden}
}
/* 狭い画面：‹ n/N › を詰めて、先行登録のボタンをつぶさない */
@media(max-width:374px){.sd-nav2 .sd-prev,.sd-nav2 .sd-next{width:24px}.sd-nav2 .sd-pg{min-width:2.8em}.sd-tocbtn{padding:0 9px}.sd-go2{font-size:19px;padding:0 4px;letter-spacing:-.03em}}
@media(prefers-reduced-motion:reduce){.sd-go,.sd-go2{transition:none}}