マニュアルページにサイドバー固定機能とメモ機能を追加した最新版

バックアップとして。

load_header.js

load_header.js

/* --------------------------------------------------
   load_header.js (v2025‑07‑15)
   ‑ UNC ネットワークパス (file://server/...) とローカルパス (file:///D:/...) の両方で
     VS Code/メモ帳/Explorer リンクが正しく動作するように改良しました。
   -------------------------------------------------- */

document.addEventListener('DOMContentLoaded', function () {
  /*───────────────────────────────────────────────
    1. ヘッダーナビのリンク先を決定
  ───────────────────────────────────────────────*/
  const currentPathname = window.location.pathname;
  const pathSegments = currentPathname.split('/');
  const currentDir = pathSegments[pathSegments.length - 2]; // 現在のディレクトリ名
  const currentFilePath = window.location.pathname;


  let homeLink, blogLink, sonotaLink, gijyutuLink;

  if (currentDir === 'blog') {
    homeLink     = '../index.html';
    blogLink     = 'blog.html';
    sonotaLink   = '../sonota/sonota.html';
    gijyutuLink   = '../gijyutu/gijyutu.html';   
  } else if (currentDir === 'kihon') {
    homeLink     = '../index.html';
    blogLink     = '../blog/blog.html';
    sonotaLink   = '../sonota/sonota.html';
    gijyutuLink   = '../gijyutu/gijyutu.html';   
  } else if (currentDir === 'sonota') {
    homeLink     = '../index.html';
    blogLink     = '../blog/blog.html';
    sonotaLink   = 'sonota.html';
    gijyutuLink   = '../gijyutu/gijyutu.html';   
  } else if (currentDir === 'gijyutu') {
    homeLink     = '../index.html';
    blogLink     = '../blog/blog.html';
    sonotaLink   = '../sonota/sonota.html';
    gijyutuLink   = 'gijyutu.html';   
  } else if (currentDir === 'zakki') {
    homeLink     = '../index.html';
    blogLink     = '../blog/blog.html';
    sonotaLink   = '../sonota/sonota.html';
    gijyutuLink   = '../gijyutu/gijyutu.html';   
  } else {
    homeLink     = 'index.html';
    blogLink     = 'blog/blog.html';
    sonotaLink   = 'sonota/sonota.html';
    gijyutuLink   = 'gijyutu/gijyutu.html';   
  }

  /*───────────────────────────────────────────────
    2. Windows パスを取得（UNC 対応）
       ‑ file:///D:/foo/bar.html  →  D:\foo\bar.html
       ‑ file://server/share/foo →  \\server\share\foo\bar.html
  ───────────────────────────────────────────────*/
  function getWindowsFullPath () {
    const url = new URL(window.location.href);
    if (url.protocol !== 'file:') return '';

    // UNC (file://server/share/...)
    if (url.host) {
      return '\\\\' + url.host + decodeURIComponent(url.pathname).replace(/\//g, '\\');
    }
    // ローカルドライブ (file:///D:/...)
    return decodeURIComponent(url.pathname)
      .replace(/\//g, '\\')   // / → \
      .replace(/^\\/, '');     // 先頭の \ を除去
  }

  const fullPathWin = getWindowsFullPath();                      // 例: D:\work\index.html or \\server\share\index.html
  const dirPathWin  = fullPathWin.substring(0, fullPathWin.lastIndexOf('\\'));
  const VsPathWin = `vscode://file${currentFilePath}`;
  const VsDirPathWin = `vscode://file${currentFilePath.substring(0, currentFilePath.lastIndexOf('/'))}`;

  /*───────────────────────────────────────────────
    3. VS Code / メモ帳 / Explorer 用 URI を生成
  ───────────────────────────────────────────────*/
  const toPosix = p => p.replace(/\\/g, '/');

  const vscodeFileUri   = `vscode://file${toPosix(currentFilePath)}`;
  const vscodeFolderUri = `vscode://file${toPosix(currentFilePath.substring(0, currentFilePath.lastIndexOf('/')))}`;

  const notepadFileUri  = `note:${fullPathWin}`;
  const notepadFolderUri= `note:${dirPathWin}`;

  const explorerFolderUri = dirPathWin.toLowerCase().startsWith('explorer:')
    ? dirPathWin
    : `explorer:${dirPathWin}`;

  /*───────────────────────────────────────────────
    4. ヘッダとサイドバーを描画
  ───────────────────────────────────────────────*/
  const headerContent = `
<header class="main-header">
  <div class="container">
    <div class="header-left">
      <button class="hamburger-menu" aria-label="メニューを開く">
        <span class="bar"></span><span class="bar"></span><span class="bar"></span>
      </button>
      <div class="logo"><a href="${homeLink}">manual</a></div>
    </div>
    <nav class="main-nav" id="main-nav-menu">
      <ul>
        <li><a href="${sonotaLink}">その他</a></li>
        <li><a href="${blogLink}">ブログ</a></li>
        <li><a href="${gijyutuLink}">技術</a></li>
      </ul>
    </nav>
    <button class="memo-toggle" aria-label="メモを開く" title="メモ">
    <!-- 依存なしのアイコン（SVG） -->
    <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M8 4h8a2 2 0 0 1 2 2v7.17a2 2 0 0 1-.59 1.41l-3.83 3.83A2 2 0 0 1 12.17 19H8a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" fill="currentColor"/>
    <path d="M13 19v-3a2 2 0 0 1 2-2h3" fill="none" stroke="currentColor" stroke-width="2"/>
    </svg>
    </button>
  </div>
</header>`;
  document.getElementById('header-placeholder').innerHTML = headerContent;

  const sidebarContent = `
<ul>
  <!-- <li><a href="${vscodeFolderUri}">VS Codeでフォルダを開く</a></li> -->
  <li><a href="${notepadFileUri}">メモ帳で開く</a></li>
  <li><a href="${explorerFolderUri}">フォルダを開く</a></li>
  <li><a href="/kyoyubunsyo/00.manyual/kihon/todo.html">TODOリスト</a></li>
  <li><a href="◯◯◯">カレンダー</a></li>
  <li><a href="https://kyokench.github.io/4masumemo/4masu-sumahotest_ver8.html">４マスメモ</a></li>
  <li><a href="/kyoyubunsyo/00.manyual/kihon/calc.html">計算支援アプリ</a></li>
  <li><a href="${vscodeFileUri}">VS Code</a></li>
  <li><a href="/kyoyubunsyo/00.manyual/zakki/zakki.html">雑記</a></li>
  <li><a href="https://google.com" target="_blank">Google検索</a></li>
</ul>`;
  document.getElementById('sidebar').innerHTML = sidebarContent;

// ▼ sidebar に未完了 TODO を表示 ▼
const sidebarElement = document.getElementById('sidebar');
const sidebarTodoContainer = document.createElement('div');
sidebarTodoContainer.style.padding = '10px 15px';
sidebarTodoContainer.style.borderTop = '1px solid #777';
sidebarTodoContainer.style.marginTop = '15px';
sidebarTodoContainer.style.color = '#ccc';
sidebarTodoContainer.innerHTML = `
  <div style="font-size:13px;">TODOリストの未完項目</div>
  <ul id="sidebar-todo-list" style="
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 16px;
    padding-left: 0;
    margin-top: 8px;
  "></ul>
`;
sidebarElement.appendChild(sidebarTodoContainer);

const sidebarTodoList = document.getElementById('sidebar-todo-list');
const allTodos = JSON.parse(localStorage.getItem('todos')) || [];
const sidebarTodos = allTodos.filter(todo => !todo.completed).slice(0, 5); // 最大5件まで表示

// ヘッダー/サイドバー挿入の直後あたりに追記
const memoPanel = document.createElement('aside');
memoPanel.id = 'memo-panel';
memoPanel.innerHTML = `
  <div class="memo-header">
    <span>クイックメモ</span>
    <button id="memo-close" aria-label="メモを閉じる">×</button>
  </div>
  <textarea id="memo-text" placeholder="ここにメモを書けます（自動保存）"></textarea>
`;
document.body.appendChild(memoPanel);

// ===== Memo panel state & content =====
const MEMO_OPEN_KEY = 'memoOpen';
const MEMO_TEXT_KEY = 'memoText';

// 要素取得
const memoToggleBtn = document.querySelector('.memo-toggle');
const memoPanelEl   = document.getElementById('memo-panel');
const memoTextEl    = document.getElementById('memo-text');
const memoCloseBtn  = document.getElementById('memo-close');

// 初期復元（開閉状態のチラつき防止）
(function restoreMemoState() {
  if (!memoPanelEl) return;
  const savedOpen  = localStorage.getItem(MEMO_OPEN_KEY) === 'true';
  const savedText  = localStorage.getItem(MEMO_TEXT_KEY) || '';

  // 初回はアニメーション無効にしてから状態反映
  const prev = memoPanelEl.style.transition;
  memoPanelEl.style.transition = 'none';
  memoPanelEl.classList.toggle('active', savedOpen);
  memoPanelEl.style.transition = prev || '';

  memoTextEl.value = savedText;
})();

// トグル（ボタン／クローズ×）
function setMemoOpen(next) {
  memoPanelEl.classList.toggle('active', next);
  localStorage.setItem(MEMO_OPEN_KEY, String(next));
}
if (memoToggleBtn && memoPanelEl) {
  memoToggleBtn.addEventListener('click', () => {
    const willOpen = !memoPanelEl.classList.contains('active');
    setMemoOpen(willOpen);
  });
}
if (memoCloseBtn) {
  memoCloseBtn.addEventListener('click', () => setMemoOpen(false));
}

// 入力の自動保存（300ms デバウンス）
let memoSaveTimer = null;
if (memoTextEl) {
  memoTextEl.addEventListener('input', () => {
    clearTimeout(memoSaveTimer);
    memoSaveTimer = setTimeout(() => {
      localStorage.setItem(MEMO_TEXT_KEY, memoTextEl.value || '');
    }, 300);
  });
}

// 複数タブ同期（開閉のみ同期。本文は最後の入力が勝つ想定）
window.addEventListener('storage', (ev) => {
  if (!memoPanelEl) return;
  if (ev.key === MEMO_OPEN_KEY) {
    const open = ev.newValue === 'true';
    memoPanelEl.classList.toggle('active', open);
  } else if (ev.key === MEMO_TEXT_KEY && memoTextEl) {
    memoTextEl.value = ev.newValue || '';
  }
});

if (sidebarTodos.length > 0) {
  sidebarTodos.forEach(todo => {
    const li = document.createElement('li');
    li.textContent = todo.text;
    li.style.fontSize = '12px';
    sidebarTodoList.appendChild(li);
  });
} else {
  const li = document.createElement('li');
  li.textContent = '未完了なし';
  li.style.fontSize = '12px';
  sidebarTodoList.appendChild(li);
}


// 5. ハンバーガーメニュー制御 の直前あたりで追記
const SIDEBAR_STORAGE_KEY = 'sidebarOpen'; // "true" / "false"

// 初期状態を localStorage から復元（初回描画のチラつき防止つき）
(function restoreSidebarState() {
  const saved = localStorage.getItem(SIDEBAR_STORAGE_KEY);
  const shouldOpen = saved === 'true'; // 未保存なら false（閉）
  const hamburger = document.querySelector('.hamburger-menu');
  const sidebar   = document.getElementById('sidebar');
  const contentWrapper = document.querySelector('.content-wrapper');
  if (!hamburger || !sidebar || !contentWrapper) return;

  // ★ 初期復元時のアニメーション無効化
  const sidebarPrev = sidebar.style.transition;
  const contentPrev = contentWrapper.style.transition;
  sidebar.style.transition = 'none';
  contentWrapper.style.transition = 'none';

  // クラス付与で見た目を復元（ここでは一切アニメーションしない）
  hamburger.classList.toggle('active', shouldOpen);
  sidebar.classList.toggle('active', shouldOpen);
  contentWrapper.classList.toggle('sidebar-active', shouldOpen);
  document.body.classList.toggle('sidebar-open', shouldOpen);
  hamburger.setAttribute('aria-expanded', String(shouldOpen));

  // ★ 次フレームで transition を元に戻す（以降の操作は通常どおりアニメーション）
  requestAnimationFrame(() => {
    sidebar.style.transition = sidebarPrev || '';
    contentWrapper.style.transition = contentPrev || '';
  });
})();

  /*───────────────────────────────────────────────
    5. ハンバーガーメニュー制御
  ───────────────────────────────────────────────*/
  const hamburger = document.querySelector('.hamburger-menu');
  const sidebar   = document.getElementById('sidebar');
  const contentWrapper = document.querySelector('.content-wrapper');

// 既存の 5. ハンバーガーメニュー制御 内のクリック処理を少し拡張
if (hamburger && sidebar && contentWrapper) {
  hamburger.addEventListener('click', () => {
    const nowOpen = !sidebar.classList.contains('active');

    hamburger.classList.toggle('active', nowOpen);
    sidebar.classList.toggle('active', nowOpen);
    contentWrapper.classList.toggle('sidebar-active', nowOpen);
    document.body.classList.toggle('sidebar-open', nowOpen);

    // 状態を保存
    localStorage.setItem(SIDEBAR_STORAGE_KEY, String(nowOpen));
    // ARIA 更新
    hamburger.setAttribute('aria-expanded', String(nowOpen));
  });
}

window.addEventListener('storage', (ev) => {
  if (ev.key !== SIDEBAR_STORAGE_KEY) return;
  const shouldOpen = ev.newValue === 'true';
  const hamburger = document.querySelector('.hamburger-menu');
  const sidebar   = document.getElementById('sidebar');
  const contentWrapper = document.querySelector('.content-wrapper');
  if (!hamburger || !sidebar || !contentWrapper) return;

  hamburger.classList.toggle('active', shouldOpen);
  sidebar.classList.toggle('active', shouldOpen);
  contentWrapper.classList.toggle('sidebar-active', shouldOpen);
  document.body.classList.toggle('sidebar-open', shouldOpen);
  hamburger.setAttribute('aria-expanded', String(shouldOpen));
});


  /*───────────────────────────────────────────────
    6. index.html のみ TODO 概要を表示
  ───────────────────────────────────────────────*/
  if (window.location.pathname.endsWith('/index.html') || window.location.pathname.endsWith('/')) {
    const indexTodoList = document.getElementById('index-todo-list');
    const noTodoMessage = document.getElementById('no-todo-message');
    const todos = JSON.parse(localStorage.getItem('todos')) || [];
    const incompleteTodos = todos.filter(todo => !todo.completed);

    if (incompleteTodos.length > 0) {
      incompleteTodos.forEach(todo => {
        const li = document.createElement('li');
        li.textContent = todo.text;
        li.setAttribute('style', 'font-size:11px; color:#ccc;'); // ← ここでサイズも色も強制指定
        indexTodoList.appendChild(li);
      });
      if (noTodoMessage) noTodoMessage.style.display = 'none';
    } else if (noTodoMessage) {
      noTodoMessage.style.display = 'block';
    }
  }
});

document.addEventListener('DOMContentLoaded', () => {
  const debugDiv = document.getElementById('debug');

  document.querySelectorAll('a.openfolder').forEach(a => {
    const raw = a.dataset.path || '';

    // セグメントごとに encodeURIComponent して openfolder: URI を生成
    const uri = 'openfolder:' +
      raw.replace(/\\/g, '/')
         .split('/')
         .map(encodeURIComponent)
         .join('/');

    a.href = uri;

    // デバッグ出力（#debug があるときだけ）
    if (debugDiv) {
      debugDiv.innerHTML += `<p>元のパス: ${raw}<br>変換後URI: ${uri}</p>`;
    }

    // クリック時ログ（任意）
    a.addEventListener('click', () => console.log('クリック:', uri));
  });
});

style.css

style.css

:root { --memo-w: 420px; }
body.sidebar-open { --memo-w: 320px; } 

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background-color: #f8f9fa;
    color: #343a40;
}

.main-header {
    height: 42px; /* ← 高さを40pxに */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    color: #ecf0f1;
    display: flex;
    align-items: center;
    padding: 1px 5px 3px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 999;
    box-sizing: border-box;
}

.main-header .container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;          /* 高さを親と揃える */
  width: 100%;         /* ← max-widthをやめて100%表示に */
  margin: 0;           /* ← 中央寄せを解除 */
  box-sizing:border-box;
  padding: 0 20px;
}


.page-wrapper {
    margin-top: 40px;
}

.main a{
 text-decoration: none;
 font-size:14px;
}

.main pre{
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 margin:0;
 white-space: pre-wrap;
 font-size:15px;
}


.header-left {
    display: flex;
    align-items: center;
}

.main-header .logo a {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-left: 20px; /* ハンバーガーメニューとの間隔 */
}

.main-nav {
    margin-left: 13px; /* サイト名との間隔 */
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav ul li {
    margin-left: 30px;
}

.main-nav ul li a {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 0.95rem; /* ← 元は1.1rem。控えめに調整 */
    font-weight: 500;
    transition: color 0.3s ease, transform 0.2s ease;
    position: relative;
}

.main-nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #3498db; /* Blue accent */
    transition: width 0.3s ease;
}

.main-nav ul li a:hover {
    color: #3498db;
    transform: translateY(-2px);
}

.main-nav ul li a:hover::after {
    width: 100%;
}

/*★★★ ハンバーガーメニューのスタイル ★★★*/
.hamburger-menu {
    width: 19px;
    height: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 1000;
    margin-top: 4px; /* ← この行を追加：下にずらす */
}

.hamburger-menu .bar {
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: #ecf0f1;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
    position: absolute;
    left: 0;
}

.hamburger-menu .bar:nth-child(1) { top: 0; }
.hamburger-menu .bar:nth-child(2) { top: 5px; }
.hamburger-menu .bar:nth-child(3) { top: 10px; }

/* 開いた時の変形（アニメーション） */
.hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}
.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* ページ全体のレイアウト */
.page-wrapper {
    display: flex;
    min-height: 200px;
}

/* サイドバーのスタイル */
#sidebar {
    position: fixed;
    top: 40px;  /* ← ヘッダーの高さに合わせる */
    left: 0;
    height: calc(100% - 50px);
    width: 0;
    background-color: #34495e;
    color: #ecf0f1;
    overflow-x: hidden;
    transition: width 0.15s ease-in-out;
    z-index: 998;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

/* サイドバーが開いたときの幅 */
#sidebar.active {
    width: 250px;
}

/* コンテンツラッパー */
.content-wrapper {
    flex-grow: 1;
    transition: padding-left 0.3s ease-in-out;
    padding-left: 0;
    max-width:100%;
}

/* サイドバーが開いているときに右にずらす */
.content-wrapper.sidebar-active {
    margin-left: 0; /* サイドバーが開いたときにコンテンツがずれないように */
    padding-left: 250px;
}


#sidebar h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #ecf0f1;
}

#sidebar ul {
    list-style: none;
    padding: 0;
    font-size:14px;
}

#sidebar ul li a {
    display: block;
    padding: 10px 15px;
    color: #ecf0f1;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

#sidebar ul li a:hover {
    background-color: #4a627a;
}


/* メインコンテンツのスタイル */
.main{
 width:100%;
 max-width:720px;
 margin-top: 17px;
 margin-left:30px;
 min-height: 500px;
 background-color: #fff;
 padding:20px 30px 20px;
 box-sizing:border-box;
}

.hyoudai{
 font-size:23px;
 text-align:center;
 margin-bottom:-20px;
}

.head-i {
 border-left: solid 6px #4865b2;
 font-weight: bold;
 padding-left: 10px;
 padding-top: 2px;
 padding-bottom: 2px;
 line-height:1.4;
 font-size:16px;
 letter-spacing: 1.6px;
 white-space: nowrap;
 margin-bottom: 10px !important; 
}

.head-a {
 border-left: solid 6px #4865b2;
 font-weight: bold;
 padding-left: 10px;
 padding-top: 3px;
 padding-bottom: 3px;
 line-height:1.4;
 font-size:18px;
 letter-spacing: 1.6px;
 white-space: nowrap;
 margin-bottom: -22px !important; 
 margin-top: -4px !important; 
}

.page-title{
 text-align:center;
}

.grayboxpre{
 width:92%;
 background-color:#efefef;
 border:solid 1px gray;
 margin-left:12px;
 padding-bottom: 20px;
 padding-right: 20px;
 padding-left: 20px;
 padding-top:5px;
 display:table;
 margin-bottom:-20px;
 white-space: pre-wrap;
 line-height:1.5;
}

.graybox{
 width:92%;
 background-color:#efefef;
 border:solid 1px gray;
 margin-left:12px;
 padding-bottom: 20px;
 padding-right: 20px;
 padding-left: 20px;
 padding-top:5px;
 display:table;
 margin-bottom:-20px;
 white-space: pre-wrap;
 line-height:1.5;
}

.link-box{
 width:92%;
 background-color:#efefef;
 margin-left:5px;
 padding-bottom: 20px;
 padding-right: 20px;
 padding-left: 20px;
 padding-top:5px;
 display:table;
 margin-bottom:-20px;
 white-space: pre-wrap;
 line-height:1.5;
 cursor: pointer;
 user-select: all;
}

.pre {
 background-color: rgba(250, 250, 250, .48);
 outline: 1px solid rgba(228, 228, 228, .8705882353);
 color: #444;
 overflow: auto;
 display: block;
 list-style-type: disc;
 list-style-position: outside;
 padding: 0px 10px 30px 20px;
 margin-bottom:-10px;
  line-height: 1.7;
}

.picmax{
 width:100%;
 border:solid 1px;
}

img{
 max-width:100%;
}

/* TODOリストのスタイル */
.todo-container {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #f9f9f9;
}

#todo-input {
    width: calc(100% - 80px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 1rem;
}

#add-todo-btn {
    padding: 10px 15px;
    background-color: #28a745; /* Green */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

#add-todo-btn:hover {
    background-color: #218838;
}

#todo-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    font-size: 1.1rem;
    color: #333;
}

.todo-item:last-child {
    border-bottom: none;
}

.todo-item span {
    flex-grow: 1;
    cursor: pointer;
}

.todo-item.completed span {
    text-decoration: line-through;
    color: #888;
}

.two-column-layout {
    display: flex;
    gap: 20px;
}

.main-content {
    flex: 1;
}

.todo-summary {
    width: 300px;
    border: 1px solid #ccc;
    background-color: #f4f4f4;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}


.delete-btn {
    background-color: #dc3545; /* Red */
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.delete-btn:hover {
    background-color: #c82333;
}


/* ==== Memo Panel ==== */
.memo-toggle{
  margin-left: auto;
  background: transparent;
  border: none;
  color: #ecf0f1;
  cursor: pointer;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
}
.memo-toggle:hover{ opacity:.85; }

#memo-panel{
  position: fixed;
  top: 42px;               /* ヘッダー高に合わせる */
  right: 0;
  height: calc(100% - 42px);
  width: var(--memo-w);
  max-width: calc(100vw - var(--sidebar-w) - 12px); /* 画面が狭い時の保険 */
  background: #ffffff;
  border-left: 1px solid #ddd;
  box-shadow: -2px 0 8px rgba(0,0,0,.08);
  transform: translateX(100%);
  transition: transform .2s ease-in-out, width .2s ease-in-out;
  z-index: 1000;           /* ヘッダー(999)より上にしない */
}
#memo-panel.active{ transform: translateX(0); }

#memo-panel .memo-header{
  display:flex; align-items:center; justify-content:space-between;
  height:40px; padding:0 10px; border-bottom:1px solid #eee; background:#f7f7f7;
  font-size:14px; color:#333;
}
#memo-close{
  border:none; background:transparent; cursor:pointer; font-size:18px; line-height:1;
}

#memo-text{
  width: 100%; height: calc(100% - 40px);
  border: none; outline: none; resize: none;
  padding: 12px; box-sizing: border-box;
  font-size: 14px; color:#333;
}

@media screen and (max-width: 768px) {
  .main {
    margin-left: 0px;
    padding: 20px;
  }

.graybox {width:90%;}
.grayboxpre {width:90%;}



  /* 必要に応じて sidebar や hamburger を再配置 */
}