/* ==============================
   Base Settings
   ============================== */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

   :root {
     --bg-dark: #0f1115;
     --bg-light: #181b21;
     --text-color: #e2e2e2;
     --accent: #4da3ff;
     --accent-light: #8ecaff;
     --muted: #9a9a9a;
     --card-bg: #1d2028;
     --border-color: #2a2e38;
   }
   
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   body {
     font-family: 'Inter', 'Segoe UI', sans-serif;
     background-color: var(--bg-dark);
     color: var(--text-color);
     line-height: 1.7;
     letter-spacing: 0.03em;
     scroll-behavior: smooth;
   }
   
   /* ==============================
      Header (Hero)
      ============================== */
   .hero {
     text-align: center;
     padding: 6rem 2rem 4rem 2rem;
     background: linear-gradient(180deg, #13161b 0%, #0f1115 100%);
     border-bottom: 1px solid var(--border-color);
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
     animation: fadeIn 1s ease-in-out;
   }
   
   .hero h1 {
     font-size: 2.8rem;
     font-weight: 700;
     color: var(--accent);
     margin-bottom: 0.8rem;
   }
   
   .hero .subtitle {
     font-size: 1.2rem;
     color: var(--muted);
   }
   
   /* ==============================
      Sections
      ============================== */
   .section {
     padding: 4rem 2rem;
     max-width: 900px;
     margin: 0 auto;
     opacity: 0;
     transform: translateY(20px);
     animation: fadeUp 0.8s ease forwards;
   }
   
   .section h2 {
     font-size: 1.8rem;
     color: var(--accent);
     margin-bottom: 1.5rem;
     border-left: 4px solid var(--accent);
     padding-left: 12px;
   }
   
   .section p {
     margin-bottom: 1rem;
     color: var(--text-color);
   }
   
   /* ==============================
      Diagram
      ============================== */
   .diagram {
     text-align: center;
     margin: 2rem 0;
   }
   
   .diagram img {
     width: 100%;
     max-width: 700px;
     border-radius: 12px;
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
     transition: transform 0.3s ease;
   }
   
   .diagram img:hover {
     transform: scale(1.02);
   }
   
   .diagram figcaption {
     font-size: 0.9rem;
     color: var(--muted);
     margin-top: 0.5rem;
   }
   
   /* ==============================
      Concept Blocks
      ============================== */
   .highlight {
     background-color: var(--bg-light);
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
   }
   
   .concept-block {
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 12px;
     padding: 1.5rem;
     margin-bottom: 1.5rem;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     transition: transform 0.2s ease;
   }
   
   .concept-block:hover {
     transform: translateY(-4px);
   }
   
   .concept-block h3 {
     color: var(--accent-light);
     margin-bottom: 0.8rem;
   }
   
   .concept-block p {
     color: var(--text-color);
   }
   
   /* ==============================
      Table of Contents (TOC)
      ============================== */
   .toc {
     list-style: none;
     margin-top: 1.5rem;
   }
   
   .toc li {
     margin: 0.6rem 0;
   }
   
   .toc a {
     text-decoration: none;
     color: var(--accent);
     font-weight: 600;
     transition: color 0.2s ease;
   }
   
   .toc a:hover {
     color: var(--accent-light);
   }

       .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: 240px;
      height: 100%;
      background: #1e1e1e;
      color: #fff;
      padding: 20px 15px;
      box-shadow: 2px 0 6px rgba(0, 0, 0, 0.4);
      overflow-y: auto;
      z-index: 100;
    }

    .sidebar h2 {
      font-size: 1.2em;
      margin-bottom: 10px;
      border-bottom: 1px solid #555;
      padding-bottom: 6px;
    }

    .sidebar ul {
      list-style: none;
      padding: 0;
      margin: 10px 0 25px 0;
    }

    .sidebar li {
      margin: 6px 0;
    }

    .sidebar a {
      color: #ddd;
      text-decoration: none;
      font-size: 0.95em;
      transition: color 0.2s;
    }

    .sidebar a:hover {
      color: #00b3ff;
    }

    /* ===== Main Content Area ===== */
    main {
      margin-left: 260px;
      padding: 30px 40px;
      max-width: 900px;
    }

/* --- Sidebar offset handling (修正版) --- */
body {
  display: flex;
  flex-direction: row;
}

/* Sidebar remains fixed */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100%;
  background: #1e1e1e;
  color: #fff;
  padding: 20px 15px;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  z-index: 100;
}
    
video {
  max-width: 100%; /* 動画の最大幅を100%に設定 */
  height: auto; /* 高さを自動調整 */
  display: block; /* 余白が生じないようにブロック要素として表示 */
  margin: 20px 0; /* 必要に応じて余白を設定 */
}

/* Main wrapper for all page content */
.main-content {
  margin-left: 240px;  /* ← サイドバー分を避ける */
  width: calc(100% - 240px);
}

/* ヘッダーとセクションの中央基準を一致させる */
.main-content header.hero,
.main-content .section,
.main-content footer.footer {
  max-width: 900px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

    /* スクロール位置補正（見出しがヘッダに隠れないように） */
    section {
      scroll-margin-top: 80px;
    }
   
   /* ==============================
      Footer
      ============================== */
   .footer {
     text-align: center;
     padding: 2rem 0;
     font-size: 0.9rem;
     color: var(--muted);
     border-top: 1px solid var(--border-color);
     margin-top: 4rem;
   }
   
/* ==============================
   Sidebar Toggle System
   ============================== */
.menu-toggle {
  position: fixed;
  top: 15px;
  left: 15px;
  background: #1e1e1e;
  color: #fff;
  border: none;
  font-size: 1.5rem;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  z-index: 200;
  display: none; /* ← PCでは非表示 */
  transition: background 0.2s ease;
}

.menu-toggle:hover {
  background: #2a2a2a;
}

/* Sidebar animation */
.sidebar {
  transition: transform 0.3s ease;
}

/* 閉じた状態（スマホ） */
.sidebar.closed {
  transform: translateX(-100%);
}

/* Responsive behavior */
@media screen and (max-width: 900px) {
  .menu-toggle {
    display: block; /* スマホで表示 */
  }

  .sidebar {
    transform: translateX(-100%); /* 初期は閉じている */
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
    width: 100%;
  }
}


   /* ==============================
      Animations
      ============================== */
   @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
   }
   
   @keyframes fadeUp {
     from {
       opacity: 0;
       transform: translateY(20px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }