/* ============ Base (mobile-first) ============ */
:root{
  --bg:#fffef2; --text:#222; --muted:#666; --brand:#00bfff;
  --accent:#33cc66; --border:#222; --line:#33cc66; --sidebar-bg:#f7f7f7;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",
               "Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  line-height:1.6;

  /* モバイル：1カラム（ヘッダ → サイドバー(画像+メニュー) → 本文） */
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "head"
    "sidebar"
    "body";
  min-height:100vh;
  gap:0;
  overflow:visible;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
a:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* 領域 */
#mainhead{ grid-area:head; margin:0; padding:1rem 1.25rem 0; min-width:0; }
#mainbody{ grid-area:body; margin:0; padding:1rem 1.25rem 2rem; overflow:visible; min-width:0; }
#leftbox{
  grid-area:sidebar;
  background:var(--sidebar-bg);
  border-bottom:1px solid #ddd;      /* モバイルは下罫線 */
  padding:.75rem;
  line-height:1.4;
  min-width:0;
  overflow:visible;                  /* ← stickyを全体に効かせる */
}
/* サイドバー内の画像：幅いっぱい・比率維持 */
#leftbox img{ width:100%; height:auto; margin:0; display:block; }

/* details/summary 折りたたみ（JS不要） */
.nav-details{ margin:.5rem 0 0; padding:0; }
.nav-details > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:inline-block;             /* モバイルはボタンを出す */
  margin:.5rem 0; padding:.5rem .75rem;
  border:1px solid #ccc; border-radius:.5rem; background:#fff;
  position:sticky; top:0; z-index:10;            /* 画像直下に貼り付け */
  background:var(--bg); border-bottom:1px solid #ddd;
}
/* summary のデフォルト三角を消す（Safari対策） */
.nav-details > summary::-webkit-details-marker{ display:none; }

/* 見出し/ボックス類（元クラス踏襲） */
.hLg05{
  padding:.3rem .75rem; margin:.5rem; font-size:2rem; line-height:1.3;
  border-left:15px solid var(--brand); border-bottom:1px dotted var(--text); font-weight:700;
}
.hLl05{
  padding:.3rem .75rem; margin:.5rem; font-size:1.3rem; line-height:1.3;
  border-left:15px solid var(--brand); border-bottom:1px dotted var(--text); font-weight:700;
}
.hLm00,.hLn00,.hLm70{
  padding:0 .5rem; margin:.5rem .5rem .3rem 0; font-size:1.1rem; line-height:1.2;
  border-left:5px solid var(--brand); border-bottom:1px dotted var(--text); font-weight:700;
}
.hLn00{ font-size:1rem; }
.hLm70{ margin-left:4.375rem; }
.hDm45,.hDm05{
  padding:.25rem .5rem; margin:.9rem .3rem .3rem .9rem; line-height:1.2; font-weight:700;
  white-space:nowrap; border:1px solid var(--brand); border-left-width:10px;
}
.hDm05{ margin-left:.3rem; }
.hDm45box{ padding:.25rem .5rem; margin:.9rem .3rem .3rem .9rem; line-height:1.2; font-weight:700; border:2px solid var(--text); }
.hDm00{
  padding:.25rem .5rem; margin:.9rem .3rem .3rem 0; line-height:1.2;
  border:1px solid var(--accent); border-top-width:10px; font-size:.95rem;
}
.hDm01{ padding:.25rem .5rem; margin:.9rem .3rem .3rem 0; line-height:1.2; font-weight:700; font-size:1.1rem; }
.hQs45{
  padding:.25rem .5rem; margin:.6rem .3rem .3rem .9rem; line-height:1.3; font-size:.85rem;
  border:1px solid var(--border); background:#fff; white-space:normal;
}
/* テキストブロック */
.rm45r,.rm05r,.rm70r,.rm45{ color:#333; }
.rm45r{ margin:.3rem 1.6rem .3rem .9rem; line-height:1.5; }
.rm05r{ margin:.3rem; line-height:1.5; }
.rm70r{ margin:.3rem 1.6rem .3rem 4.375rem; line-height:1.5; }
.rm45{  margin:.3rem 1.6rem .3rem .9rem; line-height:1.4; }
.menu{  padding-bottom:.6rem; margin:.6rem; line-height:1.5; }
.ruby{  font-size:.7rem;  margin:.3rem .9rem 0; line-height:1.3; }
.name{  font-size:1.2rem; margin:0 .9rem .6rem; line-height:1.3; }
.roman{ font-size:.9rem; color:var(--muted); line-height:1.3; }
.affil{ font-size:.9rem; margin:.6rem .9rem; line-height:1.3; }
.update{font-size:.75rem; margin:.2rem 1.25rem; color:var(--muted); line-height:1.3; }
.dline{ padding:.3rem .9rem; margin-left:.3rem; border-bottom:1px dotted var(--line); font-size:.85rem; line-height:1.3; }
.bottom{ font-size:.8rem; padding-bottom:.9rem; margin:.3rem .9rem 1rem; text-align:center; }
#leftnavi{ font-size:.85rem; }
#leftnavi a{ text-decoration:none; }

/* ============ Desktop / Tablet (ここだけ @media) ============ */
@media (min-width:769px){
  body{
    /* PC：2カラム（左：サイドバー / 右：本文、ヘッダは右上） */
    grid-template-columns:220px 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "sidebar head"
      "sidebar body";
  }
  #leftbox{
    border-bottom:none;          /* モバイルは下罫線 → PCは右罫線 */
    border-right:1px solid #ddd;
    padding:1rem;
    overflow:auto;               /* PCだけ独自スクロール容器に */
  }
  /* PCでは折りたたみボタンは隠し、メニューは常時表示 */
  .nav-details > summary{ display:none; }
  #leftnavi{ display:block; }
}

/* 動きを減らす */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* 上部画像 #mastimage をグリッドに参加させ、重複を防ぐ */
#mastimage { grid-area: mast; }

/* モバイル：ヘッダ → 画像 → 左メニュー → 本文 の順に明示 */
body{
  grid-template-rows: auto auto auto auto !important;
  grid-template-areas:
    "head"
    "mast"
    "sidebar"
    "body" !important;
}

/* デスクトップ：左にメニュー、右側にヘッダ→画像→本文の順で重複なし */
@media (min-width: 769px){
  body{
    grid-template-columns: 220px 1fr !important;
    grid-template-rows: auto auto 1fr !important;
    grid-template-areas:
      "sidebar head"
      "sidebar mast"
      "sidebar body" !important;
  }
}

/* --- mastimage はモバイルだけ表示（PCでは非表示） --- */
#mastimage { grid-area: mast; }
#mastimage img { width: 100%; height: auto; display: block; }

@media (max-width: 768px){
  /* ヘッダ → 画像 → 左メニュー → 本文 の順 */
  body{
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "head"
      "mast"
      "sidebar"
      "body" !important;
  }
  /* モバイルではサイドバー内の重複画像を隠す */
  #leftbox a:first-child { display: none !important; }
}

@media (min-width: 769px){
  /* PCでは mastimage を出さない（本文に巨大表示されるのを防止） */
  #mastimage { display: none !important; }
}



/* ===== モバイル：メニューボタンを小さな“ボタン風”に（固定表示） ===== */
@media (max-width: 768px){
  /* 小さなフローティングボタン（右上） */
  .nav-details > summary{
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0) + .5rem);
    right: .75rem;
    left: auto !important;            /* 以前の full-width 指定を打ち消す */
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: .5rem;
    padding: .5rem .8rem;
    background: #fff;                 /* 見た目を“ボタン”に */
    border: 1px solid #ccc;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    z-index: 1000;
  }

  /* もう全幅バーじゃないので押し下げは不要に */
  body{ padding-top: 0 !important; }

  /* メニュー展開は上からフル幅ドロップダウン（見やすさ重視） */
  .nav-details[open] #leftnavi{
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0) + 3.25rem);
    left: 0; right: 0;
    z-index: 999;
    background: var(--bg);
    border-bottom: 1px solid #ddd;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    max-height: calc(100vh - (env(safe-area-inset-top, 0) + 3.25rem));
    overflow: auto;
    padding: .5rem .75rem;
  }

  /* クリッピング防止（念のため） */
  #leftbox{ overflow: visible !important; }
}

/* PCは従来どおり */
@media (min-width: 769px){
  .nav-details > summary{ display: none !important; }
}

/* ===== スマホ：上部写真(#mastimage)を少し小さく中央寄せ ===== */
@media (max-width: 768px){
  /* 左右に余白を作る（画面端ベタ付きをやめる） */
  #mastimage{ padding-inline: 1rem; }

  /* 画像自体の横幅を控えめに、縦横比は維持 */
  #mastimage img{
    width: auto !important;                     /* 既存の width:100% を上書き */
    max-width: calc(100vw - 2rem) !important;   /* 端の余白分だけ狭く */
    /* さらに小さくしたい場合は 88vw などにしてもOK → 例: max-width: 88vw; */
    margin: .5rem auto 0;                       /* 中央寄せ */
    height: auto;
    display: block;
    /* お好みで角丸： */
    /* border-radius: 8px; */
  }
}

@media (max-width: 768px){
  #mastimage{ background: var(--bg); }                  /* 念のため */
  #leftbox{ background: var(--bg) !important;           /* ←ここで同色に */
           border-bottom: 0 !important; }               /* 罫線も消すなら */
}

/* === Patch: mobile menu should not span full width; keep it on the LEFT only === */
@media (max-width: 768px){
  /* （任意）メニューボタンを左上に */
  .nav-details > summary{
    right: auto !important;
    left: .75rem !important;
  }

/* メニューは左側のみ・幅を制限 */
@media (max-width: 768px){
  .nav-details[open] #leftnavi{
    left: 0 !important;
    right: auto !important;          /* 全幅化を止める */
    width: 60vw !important;          /* 画面の約8割 */
    max-width: 320px !important;     /* 大きい端末では上限 */
    border-right: 1px solid #ddd;
    box-shadow: 6px 0 18px rgba(0,0,0,.12);
  }
}

/* ===== Mobile: menu should be a LEFT panel, not full width ===== */
@media (max-width: 768px){
  /* メニューボタンの位置（任意：左上に寄せる） */
  .nav-details > summary{
    left: .75rem !important;
    right: auto !important;
  }

  /* ← ここが本体：open時のメニューを“左側半分”に限定 */
  .nav-details[open] #leftnavi{
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0) + 3.25rem) !important;
    left: 0 !important;
    right: auto !important;           /* 全幅をやめる */
    width: 50vw !important;           /* 画面の約半分 */
    max-width: 320px !important;      /* 大きい端末では上限 */
    max-height: calc(100vh - (env(safe-area-inset-top, 0) + 3.25rem)) !important;
    overflow: auto !important;

    background: var(--bg);
    border-right: 1px solid #ddd;
    box-shadow: 6px 0 18px rgba(0,0,0,.12);
    z-index: 999;
    padding: .5rem .75rem;
  }
}