/* frameset cols=18,82 と同じ見え方を1枚のページで再現する。
   実測(ビューポート1280px): 左229px / 仕切り6px / 右1045px。
   フレームは marginwidth=0 marginheight=0 なので中身は余白ゼロから始まる。 */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: #ffffff;
}

.pane {
  height: 100vh;
  overflow: auto;
  min-width: 0;
}

.pane-menu {
  flex: 18 1 0;
  background-color: #f0f0ff;
}

/* フレームの境界線と同じ幅の隙間 */
.pane-gap {
  flex: 0 0 6px;
  background-color: #ffffff;
}

.pane-main {
  flex: 82 1 0;
  background-image: url("/image/bg.jpg");
}

/* 管理者ページはフレーム時代も背景がタイルではなく単色だった */
.pane-plain {
  background-image: none;
  background-color: #f0f0ff;
}

/* 原画は背景が透過しているので、タイルが透けないよう白地を敷く。
   画像そのものには手を加えない。 */
.illust {
  background-color: #ffffff;
  max-width: 100%;
  height: auto;
}

/* 下層ページの見出しはH1だが、描画はH2のままにする。
   ブラウザ既定のH2は 24px / bold / 上下マージン0.83em。 */
.page-title {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.83em 0;
}

/* スクロール用にmainをフォーカス可能にしているので、
   マウス操作で枠が出ないようにする。キーボード操作では出す。 */
.pane:focus {
  outline: none;
}

.pane:focus-visible {
  outline: 2px solid #333399;
  outline-offset: -2px;
}

/* 画面では100vhに閉じ込めているため、そのままでは1画面しか印刷されない */
@media print {
  html,
  body {
    height: auto;
  }

  body {
    display: block;
    overflow: visible;
  }

  .pane {
    height: auto;
    overflow: visible;
  }

  .pane-menu,
  .pane-gap {
    display: none;
  }

  .pane-main {
    background-image: none;
    background-color: #ffffff;
  }
}