:root { --primary:#3d6399; --primary-light:#edf0f5; --border:#abb8cb; --sidebar-bg:#f6f8fb; --text:#1f324d; -bg:#ffffff; }
  *{ box-sizing:border-box; }
  html,body{ margin:0; font-family:"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--text); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  header{ position:relative; background:var(--primary); color:#fff; padding:12px 48px 12px 56px; font-size:18px; line-height:1.2; min-height:48px; display:flex; align-items:center; }
  #site-stats{ position:fixed; top:10px; right:16px; background:rgba(255,255,255,0.9); border:1px solid var(--border); border-radius:8px; padding:0px 8px; font-size:12px; line-height:1.2; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,0.08); display:none; }
  body{ display:flex; flex-direction:column; min-height:100vh; }
  header{ flex:0 0 auto;}
  main{ flex:1 0 auto; display:flex; overflow-x:auto;}
  nav{ background:var(--sidebar-bg); border-right:1px solid var(--border); overflow-y:auto; padding:12px 10px; font-size:14px; flex-shrink:0; }
  .tree-item{ margin-bottom:6px; }
  .tree-header{ cursor:pointer; padding:6px 8px; border-radius:6px; font-weight:600; display:flex; align-items:center; gap:6px; }
  .tree-header.has-children::before{ content:"▶"; font-size:10px; }
  .tree-header.open.has-children::before{ content:"▼"; }
  .tree-header:hover{ background:var(--primary-light); }
  .tree-children{ margin-left:14px; padding-left:8px; border-left:2px solid #dde3ef; display:none; }
  .tree-children.open{ display:block; }
  .tree-header.level-2{ font-size:13px; font-weight:600; }
  .tree-header.level-3{ font-size:13px; font-weight:500; }
  .tree-header.level-0::before { content: none !important;}
  .tree-item:has(> .tree-header.level-0) { border-left: none !important; padding-left: 0 !important;}
  .tree-header.level-0 { padding-left: 0 !important;} 
  .tree-item > .tree-header.level-0 + .tree-children { border-left: none !important; }  
  section{ flex:1 1 auto; min-width:0; flex-shrink:1; padding:20px; overflow-y:auto; overflow-x:auto; }
  #content{ overflow-x:visible; }
  h2{ margin:0 0 8px 0; font-size:20px; }
  .hint{ color:#666; font-size:13px; margin-bottom:12px; white-space:pre-line; }
  .cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; border:1px solid var(--border); border-radius:8px; background:#fff; overflow:hidden; max-width:100%; }
  @media (max-width:480px){ .cards{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); } }
  .cards.fixed4{ border:none; background:transparent; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
  .card{ border:1px solid var(--border); border-radius:8px; background:#fff; overflow:hidden; display:flex; flex-direction:column; max-width:100%; }
  .card-thumb{ aspect-ratio:4 / 2.5; background:#eef2ff; display:flex; align-items:center; justify-content:center; }
  .card-thumb img{ width:100%; height:100%; object-fit:contain; }
  .card-body{ padding:10px; display:flex; flex-direction:column; gap:6px; }
  .card-title{ font-size:12px; font-weight:600; word-break:break-all; line-height:1.2; max-height:2.4em; overflow:hidden; }
  .card-meta{ font-size:12px; color:#666; }
  .card-actions{ margin-top:auto; display:flex; justify-content:flex-end; gap:10px; }
  .card-actions button{ padding:6px 14px; font-size:13px; border-radius:6px; border:1px solid var(--primary); background:var(--primary); color:#fff; cursor:pointer; min-width:100px; height:34px; }
  .card-actions button.secondary{ background:#fff; color:var(--primary); }
  .card-desc{ font-size:12.5px; font-weight:600; color:#333; margin-bottom:4px; }
  .group-download-top{ position:fixed; top:80px; right:30px; display:flex; gap:12px; z-index:200; }
  .group-download-top button{ padding:8px 16px; font-size:13px; font-weight:600; border-radius:999px; border:1px solid var(--primary); background:var(--primary); color:#fff; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.15); transition:all 0.15s ease; }
  .group-download-top button:hover{ background:#003d99; transform:translateY(-1px); }
  .group-download-top button.secondary{ background:#fff; color:var(--primary); }
  .group-download-top button.secondary:hover{ background:var(--primary-light); }
  .group-block{ border:1px solid var(--border); background:#f8faff; border-radius:10px; padding:12px 14px 16px; margin-bottom:20px; }
  .group-header{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-weight:700; }
  .group-header .badge{ display:inline-block; padding:2px 8px; background:#e6ecf8; color:#003d99; border-radius:999px; font-size:12px; border:1px solid #99b4ff; }
  .group-block.var-mode{ border:none !important; background:transparent !important; padding:0 !important; margin:0 0 12px !important; }
  .group-block.var-mode .group-header{ display:flex; align-items:center; gap:8px; margin:0 0 6px; }
  .modal{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:50; }
  .modal.open{ display:flex; }
  .modal-card{ background:#fff; max-width:800px; width:90%; border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25); }
  .modal-head,.modal-foot{ padding:12px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
  .modal-foot{ border-top:1px solid var(--border); border-bottom:none; }
  .modal-body{ padding:14px; display:grid; grid-template-columns:1.2fr 1fr; gap:12px; }
  .modal-body img{ max-width:100%; border:1px solid var(--border); border-radius:8px; }
  .meta dt{ font-weight:600; } .meta dd{ margin:0 0 6px; }
  .menu-toggle{ display:none !important; }
  @media (max-width:600px){
    header{ padding:12px 16px 12px 56px; }
    .menu-toggle{ display:inline-flex !important; align-items:center; justify-content:center; position:absolute; left:12px; top:6px; width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.65); background:rgba(255,255,255,.15); color:#fff; font-size:18px; line-height:1; backdrop-filter:blur(2px); cursor:pointer; z-index:350; }
    nav{ position:fixed; top:48px; left:0; height:calc(100dvh - 48px); z-index:300; transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 8px 20px rgba(0,0,0,.15); flex-basis:clamp(160px, 40vw, 220px); width:clamp(160px, 40vw, 220px); min-width:160px; font-size:13px; }
    nav.open{ transform:translateX(0); }
    .drawer-backdrop{ position:fixed; inset:48px 0 0 0; background:rgba(0,0,0,.32); display:none; z-index:250; }
    .drawer-backdrop.show{ display:block; }
    section{ padding:14px; }
    .tree-children{ margin-left:10px; padding-left:6px; }
    .tree-header{ padding:6px; }
    .tree-leaf{ padding:4px 6px; }
  }
  @media (min-width:600px){
    nav{ flex:0 0 clamp(200px, 28vw, 300px); width:clamp(200px, 28vw, 300px); min-width:200px; max-width:300px; }
  }
  .bin-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px; box-shadow:0 4px 16px rgba(0,0,0,.05); max-width:820px; }
  .bin-list{ background:#f8faff; padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; line-height:1.6; }
  .accordion{ border:1px solid #e5e7eb; border-radius:8px; background:#fff; margin-bottom:16px; }
  .acc-header{ padding:12px; cursor:pointer; font-weight:600; background:#f3f6ff; }
  .acc-body{ display:none; padding:12px 16px; font-size:13px; line-height:1.6; }
  .acc-body.open{ display:block; }
  html{ font-size:16px; }
  body{ font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "メイリオ", Meiryo, sans-serif; font-size:1rem; line-height:1.6; color:var(--text); background:#fff; }
  h1,h2,h3,h4{ font-weight:700; color:#000; letter-spacing:0.01em; margin:0.4em 0 0.6em; }
  h2{ font-size:1.75rem; } h3{ font-size:1.375rem; } h4{ font-size:1.125rem; }
  header{ background:var(--primary); color:#fff; font-weight:600; }
  nav{ background:var(--sidebar-bg); border-right:1px solid var(--border); font-size:14px; }
  .tree-header{ border-radius:6px; }
  .tree-header:hover{ background:var(--primary-light); }
  .group-header .badge{ background:#e6ecf8; color:var(--primary); border:1px solid #99b4ff; }
  .card{ border:1px solid var(--border); border-radius:10px; background:#fff; }
  .card-title{ font-size:13px; font-weight:600; color:#1f324d; }
  .card-meta{ font-size:12.5px; color:#666; }
  .card-actions button,.group-download-top button{ border:1px solid var(--primary); background:var(--primary); color:#fff; font-weight:600; border-radius:999px; padding:8px 16px; height:auto; min-width:120px; box-shadow:0 5px 0 0 #bacae0; }
  .card-actions button:hover,.group-download-top button:hover{ background:#4b76b6; }
  .card-actions button.secondary,.group-download-top button.secondary{ background:#fff; color:var(--primary); border:1px solid var(--primary); }
  .bin-card{ border:1px solid var(--border); border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,.05); }
  .bin-list{ background:#f8faff; border-radius:8px; }
  .bin-card .card-actions{ display:flex; justify-content:flex-end; gap:10px; }
  .hint{ font-size:13px; color:#556; }
  .card-thumb{ background:#eef2ff; }
  .preview-img{ display:block; width:100%; height:auto; max-width:100%; }
  .site-footer {  flex:0 0 auto; margin-top: 32px; border-top: 1px solid #E5E7EB;}
  .site-footer_copy { display: block; text-align: center; color: #6B7280; font-size: 12.5px; padding: 12px 0;}
    @media (max-width:1042px){
	  .group-download-top{right:10px;top:60px;flex-direction:column;}
	  .modal-body{grid-template-columns:1fr;}
	  .card-actions button{flex:1;padding:6px 8px;}
	}