:root {
  --public-page-width: 1680px;
  --public-page-gap: 36px;
  --public-reading-width: 1160px;
}

/* 公開ページの作業スペースはトップページと同じ幅にする。　*/
body[data-page="home"] > main,
body[data-page="blogs"] > main,
body[data-page="cards"] > main,
body[data-page="equipment"] > main,
body[data-page="site"] .siteSheet {
  width: min(var(--public-page-width), calc(100% - var(--public-page-gap)));
  max-width: var(--public-page-width);
  margin-left: auto;
  margin-right: auto;
}

/* 一覧・本文は、広い作業スペースの中で読みやすい行長に保つ。　*/
body[data-page="blogs"] .hero,
body[data-page="blogs"] .contentMain,
body[data-page="cards"] .hero,
body[data-page="cards"] .contentMain,
body[data-page="equipment"] .hero,
body[data-page="equipment"] .contentMain {
  width: min(100%, var(--public-reading-width));
  max-width: var(--public-reading-width);
  margin-left: auto;
  margin-right: auto;
}

body[data-page="comments"] .commentsMain {
  width: min(var(--public-page-width), calc(100% - var(--public-page-gap)));
  max-width: var(--public-page-width);
  margin-left: auto;
  margin-right: auto;
}

/* 単独型は広い一枚シートにし、長文そのものは読みやすい行長に保つ。　*/
body[data-page="site"] .siteSheet > * {
  width: min(100%, var(--public-reading-width));
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 720px) {
  :root {
    --public-page-gap: 24px;
  }
}