/* =============================
   ChimonsTheme app.css (simple hamburger, always-on)
   ============================= */

/* フォント・ベース */
:root {
  --font-sans: "Meiryo UI","Meiryo","Yu Gothic UI","Segoe UI",
               "Hiragino Kaku Gothic ProN","Hiragino Sans",
               "Noto Sans JP","Yu Gothic","Helvetica Neue",Arial,sans-serif;
  --gap: 16px;
}
html, body { margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-sans);
  line-height:1.7;
  color:#111; background:#fff;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* レイアウト幅 */
.site-container { max-width:700px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
main#content { max-width:700px; margin:40px auto; padding:0 20px; box-sizing:border-box; }
main#content p { margin:1em 0; line-height:1.8; }

/* ヘッダー + ハンバーガー（常時） */
.site-header {
  position: relative;           /* ドロップダウンの基準 */
  display:flex; align-items:center; justify-content:space-between;
  max-width:700px; margin:0 auto; padding:16px 20px; box-sizing:border-box;
}
.site-logo { height:48px; width:auto; display:block; max-height:48px; }
.nav-toggle {
  display:inline-block; appearance:none; border:0; background:transparent;
  width:40px; height:40px; padding:0; margin-left:8px; cursor:pointer;
  position:relative; z-index:3000;
}
.nav-toggle-bar { display:block; width:24px; height:2px; margin:6px auto; background:#333; }

/* ドロップダウン・ナビ（常時ハンバーガー基準） */
.global-nav {
  position:absolute; top:100%; left:20px; right:20px;
  background:#fff; border:1px solid #ddd; border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  max-height:0; overflow:hidden; opacity:0; pointer-events:none;
  transition:max-height .25s ease, opacity .2s ease;
  z-index:2000;
}
.global-nav ul { list-style:none; margin:0; padding:8px 0; display:flex; flex-direction:column; gap:0; }
.global-nav a { display:block; padding:12px 16px; text-decoration:none; }
.global-nav a:focus { outline:2px solid #999; outline-offset:2px; }

/* 開状態 */
.global-nav.is-open { max-height:60vh; overflow:auto; opacity:1; pointer-events:auto; }

/* ヒーロー・フッター（簡略） */
.hero { padding:64px 0; }
.hero h1 { margin:0 0 8px; font-size:clamp(28px, 4vw, 40px); font-weight:700; letter-spacing:.02em; }
.site-footer { max-width:700px; margin:40px auto; padding:20px; color:#666; border-top:1px solid #eee; }

/* 目次ボックス（枠内右に背景画像） */
.toc-with-bg {
  position:relative; margin:40px auto; max-width:700px; box-sizing:border-box;
  --art-w:160px; --art-gap:16px; --pad-x:20px;
  padding:24px calc(var(--pad-x) + var(--art-w) + var(--art-gap)) 24px var(--pad-x);
  background:#fff; line-height:1.7;
}
.toc-with-bg::after{
  content:""; position:absolute; top:16px; bottom:16px; right:var(--pad-x);
  width:var(--art-w); background:url("../img/powersof10.png") no-repeat right center;
  background-size:contain; opacity:.4; pointer-events:none;
}
.toc-with-bg h2{ margin-top:0; font-size:1.3rem; font-weight:700; }
.toc-with-bg ul{ list-style:disc; padding-left:1.5em; }
.toc-with-bg a{ color:#3b3be0; text-decoration:none; }
.toc-with-bg a:hover{ text-decoration:underline; }

/* 汎用 */
img, svg, video { max-width:100%; height:auto; }

/* モバイル最適化：目次の背景は隠す（任意） */
@media (max-width: 768px){
  .site-container, main#content { padding:0 16px; }
  .site-logo { max-height:40px; }
  .toc-with-bg { --art-w:0px; padding-right:var(--pad-x); }
  .toc-with-bg::after { display:none; }
}

/* 広め画面で背景少し拡大（任意） */
@media (min-width: 1024px){
  .toc-with-bg { --art-w:180px; }
}