/* ぽすりん堂共通スタイル
 * 手作りの個人サイト風。画像・JavaScript・外部フォントなし。
 * 本文とリンクは各index.htmlに直接書きます。
 */

html { background: #eae9e3; }

body {
  max-width: 44em;
  margin: 1.5em auto;
  padding: 1.5em 2em;
  border: 1px solid #aaa9a1;
  background: #fff;
  color: #252525;
  font-family: "MS PGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.75;
}

a { color: #0645ad; text-decoration: underline; }
a:visited { color: #653b91; }
a:hover { color: #a32b22; }

/* 先頭のサイト名。ここはページごとに手で変更できます。 */
body > p:first-child {
  margin-top: 0;
  padding: 0.5em 0.8em;
  border: 1px solid #b6bdc2;
  background: #eff1ef;
}

h1 { font-size: 1.6em; margin: 1em 0 0.5em; }
h2 {
  margin-top: 1.7em;
  padding: 0.25em 0.6em;
  border-left: 5px solid #7d8793;
  background: #ededeb;
  font-size: 1.15em;
}

hr { border: 0; border-top: 1px dashed #aaa; margin: 1.4em 0; }
ul { padding-left: 1.7em; }
li { margin: 0.25em 0; }
.small { font-size: 0.85em; color: #666; }

.menu {
  padding: 0.5em 0.7em;
  border: 1px solid #c2c1bb;
  background: #f7f7f2;
}
.menu a { margin-right: 1em; }
.box { padding: 0.5em 1em; border: 1px solid #c8c3a3; background: #ffffed; }
.footer { margin-top: 2em; padding-top: 0.7em; border-top: 1px dashed #aaa; font-size: 0.8em; color: #666; }

/* 狭い画面では余白を減らす。CSSが無くても本文は読めます。 */
@media (max-width: 650px) {
  html { background: #fff; }
  body { margin: 0; padding: 1em; border: 0; }
}