html {
    scroll-behavior: smooth;
  }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
      background: #f5f7fb; color: #1a1a2e; font-size: 16px; line-height: 1.6;
    }

    /* ===== サイトヘッダー ===== */
    .site-header {
      background: #0d2d5e; height: 56px; padding: 0 28px;
      display: flex; align-items: center; gap: 14px;
      box-shadow: 0 2px 8px rgba(0,0,0,.2); position: sticky; top: 0; z-index: 100;
    }
    .site-header-logo {
      width: 34px; height: 34px; background: rgba(255,255,255,.14); border-radius: 7px;
      display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0;
    }
    .site-header-name { font-size: 1rem; font-weight: 700; color: #fff; }
    .site-header-sub  { font-size: 0.75rem; color: rgba(255,255,255,.5); margin-top: 1px; }

    /* ===== パンくず ===== */
    .breadcrumb {
      background: #fff; border-bottom: 1px solid #e0e6f0;
      padding: 8px 28px; font-size: 0.88rem; color: #5a6787;
      display: flex; justify-content: space-between; align-items: center;
    }
    .breadcrumb a { color: #1565c0; text-decoration: none; }
    .breadcrumb a:hover { text-decoration: underline; }
    .breadcrumb-admin { font-size: 0.82rem; color: #8a96aa; text-decoration: none; display: flex; align-items: center; gap: 4px; }
    .breadcrumb-admin:hover { color: #1565c0; }

    /* ===== ページラッパー ===== */
    .page-wrapper {
      display: flex; align-items: flex-start;
      max-width: 1440px; margin: 0 auto;
      padding: 28px 28px 100px; gap: 24px;
    }

    /* ===== サイドバー ===== */
    .sidebar {
      width: 220px; flex-shrink: 0;
      position: sticky; top: 72px;
      max-height: calc(100vh - 88px); overflow-y: auto;
      background: #fff; border: 1px solid #dde3ef;
      border-radius: 12px; padding: 8px 0;
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
    }
    .sidebar::-webkit-scrollbar { width: 4px; }
    .sidebar::-webkit-scrollbar-thumb { background: #d0d8e8; border-radius: 2px; }
    .nav-label {
      font-size: 0.75rem; font-weight: 700; color: #9aa3b8;
      letter-spacing: 0.06em; padding: 10px 18px 6px;
    }
    .nav-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 10px; font-size: 0.92rem; font-weight: 600;
      color: #3a5a80; text-decoration: none; cursor: pointer;
      border-left: 3px solid transparent;
      transition: background .14s, border-color .14s, color .14s;
      font-family: inherit; background: none; border-top: none;
      border-right: none; border-bottom: none; width: 100%; text-align: left;
    }
    .nav-item:hover { background: #f6f9ff; }
    .nav-item.active { background: #f0f6ff; }
    .nav-item.active[data-color="gray"]   { border-left-color: #546e7a; color: #546e7a; }
    .nav-item.active[data-color="blue"]   { border-left-color: #1565c0; color: #1565c0; }
    .nav-item.active[data-color="navy"]   { border-left-color: #0d2d5e; color: #0d2d5e; }
    .nav-item.active[data-color="purple"] { border-left-color: #6a1b9a; color: #6a1b9a; }
    .nav-item.active[data-color="red"]    { border-left-color: #c62828; color: #c62828; }
    .nav-item-emoji { font-size: 1.15rem; flex-shrink: 0; }
    .nav-item-text  { flex: 1; line-height: 1.3; }
    .nav-item-count {
      margin-left: auto; font-size: 0.75rem; font-weight: 700;
      background: #eef1f8; color: #7a8499;
      border-radius: 10px; padding: 1px 7px; flex-shrink: 0;
    }
    .sub-item{
        padding: 5px 17px;  font-size: 0.90rem; font-weight: 300;
    }
    .sub-item.active{
        font-weight: 600;
    }
    
    /* ===== コンテンツスクロール ===== */
    .content-scroll { flex: 1; min-width: 0; }

    /* ===== 役割セクション ===== */
    .role-section {
      margin-bottom: 40px;
      scroll-margin-top: 80px;
      scroll-margin-bottom: 64px;
    }
    .section-header {
      border-radius: 10px 10px 0 0;
      padding: 16px 22px;
      display: flex; align-items: center; gap: 14px;
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .section-header[data-color="gray"]   { background: linear-gradient(135deg,#f0f3f8,#e8ecf5); }
    .section-header[data-color="blue"]   { background: linear-gradient(135deg,#e8f0fb,#dde8f8); }
    .section-header[data-color="navy"]   { background: linear-gradient(135deg,#e4eaf5,#d8e0f0); }
    .section-header[data-color="purple"] { background: linear-gradient(135deg,#f0e8f8,#ebe0f5); }
    .section-header[data-color="red"]    { background: linear-gradient(135deg,#fde8e8,#fad8d8); }
    .section-emoji { font-size: 1.8rem; flex-shrink: 0; }
    .section-label { font-size: 1.15rem; font-weight: 700; color: #0d2d5e; }
    .section-meta  { font-size: 0.85rem; color: #8a96aa; margin-top: 3px; }

    /* ===== サブセクション ===== */
    .subsection {
      background: #fff;
      border: 1px solid #dde3ef; border-top: none;
    }
    .subsection:last-child { border-radius: 0 0 10px 10px; }
    .subsection + .subsection { border-top: none; }

    /* ===== 動画グリッド ===== */
    .video-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px; padding: 18px 22px;
    }
    .video-card {
      border: 1.5px solid #e0e6f0;
      border-radius: 10px; background: #fff;
      display: flex; flex-direction: column;
      transition: box-shadow .18s, transform .18s;
      overflow: hidden;
    }
    .video-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
    .video-thumb {
      height: 140px; position: relative;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .video-thumb[data-color="gray"]   { background: linear-gradient(135deg, #b0bec533, #546e7a55); }
    .video-thumb[data-color="blue"]   { background: linear-gradient(135deg, #1565c022, #1565c055); }
    .video-thumb[data-color="navy"]   { background: linear-gradient(135deg, #0d2d5e22, #0d2d5e55); }
    .video-thumb[data-color="purple"] { background: linear-gradient(135deg, #6a1b9a22, #6a1b9a55); }
    .video-thumb[data-color="red"]    { background: linear-gradient(135deg, #c6282822, #c6282855); }
    .video-thumb-icon { font-size: 2.4rem; opacity: .75; user-select: none; }

    .video-card-body { padding: 13px 14px 6px; flex: 1; }
    .video-card-title { font-size: 0.98rem; font-weight: 700; color: #0d2d5e; line-height: 1.5; }
    .video-card-desc  { font-size: 0.86rem; color: #7a8499; margin-top: 6px; line-height: 1.6; }
    .video-card-tags  { display: flex; gap: 6px; padding: 4px 14px 0; flex-wrap: wrap; }
    .video-card-footer { padding: 12px 14px 16px; display: flex; gap: 8px; flex-wrap: wrap; }

    /* ===== 手順書リスト ===== */
    .proc-list { padding: 4px 0; }
    .proc-row {
      display: flex; align-items: center; gap: 16px;
      padding: 16px 22px; border-bottom: 1px solid #f0f3f8;
      transition: background .14s;
    }
    .proc-row:last-child { border-bottom: none; }
    .proc-row:hover { background: #f6f9ff; }
    .proc-num {
      width: 30px; height: 30px; border-radius: 50%;
      color: #fff; font-size: 0.82rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .proc-num[data-color="gray"]   { background: #546e7a; }
    .proc-num[data-color="blue"]   { background: #1565c0; }
    .proc-num[data-color="navy"]   { background: #0d2d5e; }
    .proc-num[data-color="purple"] { background: #6a1b9a; }
    .proc-num[data-color="red"]    { background: #c62828; }
    .proc-info { flex: 1; min-width: 0; }
    .proc-name { font-size: 1rem; font-weight: 600; color: #1a1a2e; line-height: 1.5; }
    .proc-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
    .proc-actions { flex-shrink: 0; padding-left: 12px; }

    /* ===== タグ ===== */
    .tag { font-size: 0.8rem; font-weight: 700; padding: 3px 9px; border-radius: 8px; }
    .tag-new    { background: #e4f7f0; color: #0a7a4e; }
    .tag-update { background: #fef3e2; color: #b26b00; }

    /* ===== ボタン共通 ===== */
    .btn-pdf {
      display: inline-flex; align-items: center; gap: 6px;
      border-radius: 7px; padding: 9px 18px;
      font-size: 0.92rem; font-weight: 700; font-family: inherit;
      cursor: pointer; text-decoration: none; transition: all .16s;
      background: #f0f4fc; border: 1.5px solid #c0cce0; color: #0d2d5e;
      white-space: nowrap;
    }
    .btn-pdf:hover { background: #1565c0; border-color: #1565c0; color: #fff; }

    .btn-play {
      display: inline-flex; align-items: center; gap: 6px;
      border-radius: 7px; padding: 9px 18px;
      font-size: 0.92rem; font-weight: 700; font-family: inherit;
      cursor: pointer; border: 1.5px solid; transition: all .16s;
      background: none; white-space: nowrap;
    }
    .btn-play[data-color="gray"]   { border-color: #546e7a; color: #546e7a; }
    .btn-play[data-color="blue"]   { border-color: #1565c0; color: #1565c0; }
    .btn-play[data-color="navy"]   { border-color: #0d2d5e; color: #0d2d5e; }
    .btn-play[data-color="purple"] { border-color: #6a1b9a; color: #6a1b9a; }
    .btn-play[data-color="red"]    { border-color: #c62828; color: #c62828; }
    .btn-play[data-color="gray"]:hover   { background: #546e7a; color: #fff; }
    .btn-play[data-color="blue"]:hover   { background: #1565c0; color: #fff; }
    .btn-play[data-color="navy"]:hover   { background: #0d2d5e; color: #fff; }
    .btn-play[data-color="purple"]:hover { background: #6a1b9a; color: #fff; }
    .btn-play[data-color="red"]:hover    { background: #c62828; color: #fff; }

    /* ===== 動画カテゴリラベル ===== */
    .video-cat-label {
      padding: 10px 4px 6px; font-size: 0.95rem; font-weight: 700;
      color: #6b7a99; letter-spacing: .04em; text-transform: none;
      border-bottom: 1px solid #eaecf4; margin-bottom: 8px;
      grid-column: 1 / -1;
    }

    /* ===== 手順書セクション区切り ===== */
    .proc-section-card {
      border: 1px solid #e8eef8; border-radius: 10px; overflow: hidden;
      margin-top: 16px;
    }
    .proc-section-label {
      font-size: 0.78rem; font-weight: 700; color: #6b7a99;
      padding: 10px 22px 10px; letter-spacing: 0.04em;
      border-bottom: 1px solid #e8eef8; background: #f8faff;
    }

    /* ===== 動画モーダル ===== */
    .video-modal-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.76); z-index: 500;
      align-items: center; justify-content: center; padding: 20px;
    }
    .video-modal-overlay.open { display: flex; animation: modalFadeIn .18s ease; }
    @keyframes modalFadeIn { from { opacity:0; } to { opacity:1; } }
    .video-modal {
      background: #0d1a2e; border-radius: 14px; width: 100%; max-width: 860px;
      box-shadow: 0 24px 64px rgba(0,0,0,.65); overflow: hidden;
      animation: modalSlideUp .22s ease;
    }
    @keyframes modalSlideUp { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }
    .video-modal-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      padding: 18px 22px 14px; gap: 12px;
    }
    .video-modal-title { font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.5; }
    .video-modal-close {
      background: rgba(255,255,255,.12); border: none; color: #fff;
      font-size: 1.1rem; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background .15s;
    }
    .video-modal-close:hover { background: rgba(255,255,255,.28); }
    .video-modal-player { position: relative; padding-bottom: 56.25%; height: 0; background: #000; }
    .video-modal-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
    .video-modal-footer { padding: 12px 22px; display: flex; justify-content: flex-end; }
    .video-modal-yt-link {
      font-size: 0.88rem; color: rgba(255,255,255,.45); text-decoration: none;
      display: flex; align-items: center; gap: 5px; transition: color .15s;
    }
    .video-modal-yt-link:hover { color: #fff; }

    /* ===== フッター ===== */
    .site-footer {
      background: #0d2d5e; color: rgba(255,255,255,.5);
      text-align: center; padding: 20px; font-size: 0.88rem;
    }

    /* ===== モバイルタブバー ===== */
    .mobile-tab-bar {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      background: #fff; border-top: 1px solid #dde3ef;
      z-index: 200; overflow-x: auto;
      -webkit-overflow-scrolling: touch; scrollbar-width: none;
      padding: 0 4px; gap: 2px;
      height: 56px; align-items: stretch;
    }
    .mobile-tab-bar::-webkit-scrollbar { display: none; }
    .mob-tab {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 2px;
      padding: 4px 14px; cursor: pointer; flex-shrink: 0;
      border-bottom: 3px solid transparent;
      font-size: 0.78rem; font-weight: 700; color: #9aa3b8;
      transition: color .15s, border-color .15s;
      background: none; border-top: none; border-left: none; border-right: none;
      font-family: inherit;
    }
    .mob-tab-emoji { font-size: 1.2rem; }
    .mob-tab.active[data-color="gray"]   { color: #546e7a;  border-bottom-color: #546e7a; }
    .mob-tab.active[data-color="blue"]   { color: #1565c0;  border-bottom-color: #1565c0; }
    .mob-tab.active[data-color="navy"]   { color: #0d2d5e;  border-bottom-color: #0d2d5e; }
    .mob-tab.active[data-color="purple"] { color: #6a1b9a;  border-bottom-color: #6a1b9a; }
    .mob-tab.active[data-color="red"]    { color: #c62828;  border-bottom-color: #c62828; }

    /* ===== レスポンシブ ===== */
    @media (max-width: 768px) {
      .page-wrapper { padding: 14px 14px 80px; gap: 0; }
      .sidebar { display: none; }
      .mobile-tab-bar { display: flex; }
    }
    @media (max-width: 480px) {
      .video-grid { grid-template-columns: 1fr; }
      .proc-row { flex-wrap: wrap; gap: 10px; }
      .proc-actions { padding-left: 46px; }
      .mob-tab-label { display: none; }
    }
  
    .badge-pending-proc { font-size:0.75rem;color:#9aa3b8;border:1px solid #d1d5e0;border-radius:4px;padding:2px 8px;background:#f4f6fa; }
    .video-card.featured-card { border:1.5px solid #e0e6f0; }
    .badge-featured { display:inline-flex;align-items:center;gap:4px;font-size:0.72rem;font-weight:700;color:#b26b00;background:#fef3e2;border:1px solid #f5d080;border-radius:4px;padding:2px 6px;margin-left:4px;white-space:nowrap; }
    .proc-row--clickable { cursor:pointer; }
    .proc-row--clickable:hover { background:#f0f4fb; }