@charset "UTF-8";

body, h1, h2, p, ol, ul {
  margin: 0;
  padding: 0;
  font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic
    , "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN"
    , "メイリオ", Meiryo, sans-serif;
  font-size: 14px;
}

body {
  background-color: #acf;
  text-align: center;
}
/* ページ構造の設定*/
header, #contents, footer {
  width: 960px;
  margin: 0 auto;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
  background-color: #fff;
  overflow: hidden;
}

main {
  width: 800px;
  float: left;
}

.sidebar {
  width: 160px;
  border-top: solid 1px #000;
  float: right;
}

/* ヘッダーの設定 */
header h1 {
  width: 300px;
  background-color: #000;
  float: left;
}

header a h1 {
  color: #fff;
  text-decoration: none;
}

header h1 #subtitle {
  line-height: 16px;
  font-size: 16px;
  font-family: 'Tinos', serif;
}

header h1 #title {
  line-height: 32px;
  font-size: 32px;
  font-family: 'Titillium Web', sans-serif;
}

/* ナビゲーションの設定 */
nav {
  width: 660px;
  border-top: solid 1px #000;
  background-color: #59f;
  float: right;
}

nav li {
  display: block;
  width: 128px;
  margin: 1px 1px 4px 1px;
  float: left;
  font-weight: bold;
  line-height: 40px;
}

.page1 nav li:nth-of-type(1),
.page2 nav li:nth-of-type(2),
.page3 nav li:nth-of-type(3),
.page4 nav li:nth-of-type(4),
.page5 nav li:nth-of-type(5),
nav a {
  display: block;
  border: solid 1px #04a;
  border-radius: 64px / 20px;
  box-shadow: 2px 2px 4px -1px #04a;
  text-decoration: none;
}

nav a:link {
  background-color: #acf;
  color: #000;
}

nav a:visited {
  background-color: #caf;
  color: #555;
}

nav a:hover {
  background-color: #cfa;
  color: #f93;
}

nav a:active {
  background-color: #f93;
  color: #cfa;
}

.page1 nav li:nth-of-type(1),
.page2 nav li:nth-of-type(2),
.page3 nav li:nth-of-type(3),
.page4 nav li:nth-of-type(4),
.page5 nav li:nth-of-type(5){
  background-color: #036; 
  color: #fff;
}

/* フッターの設定 */
footer p {
  padding: 0 8px;
  background-color: #000;
  line-height: 24px;
  text-align: right;
}

footer p small {
  color: #fff;
  font-family: 'Gravitas One', cursive;
}

/* メインコンテンツの設定 */

main #topic-path ,
main article {
  width: 799px;
  border-top: solid 1px #000;
  border-right: solid 1px #000;
}

main #topic-path {
  background: #cfd;
  text-indent: 2em;
  text-align: left;
}

main #topic-path li {
  display: inline;
}

main article {
  overflow: hidden;
}

main article h2 ,
main article li {
  width: 159px;
  height: 32px;
  border-right: solid 1px transparent;
  line-height: 32px;
  float: left;
}
main article h2:before {
  content: "【";
}

main article h2:after {
  content: "】";
}

main article li {
  display: block;
}

main article li:nth-of-type(5n+4) {
  border-right:none 0;
}

main article a {
  font-family: Consolas, 'Courier New', "Droid Sans", "游ゴシック", YuGothic
    , "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN"
    , "メイリオ", Meiryo, sans-serif;
  display: block;
}

main article a:link {
  color: #06f;
}

main article a:visited {
  color: #a5f;
}

main article a:hover {
  background-color: #cfa;
  color: #f93;
  text-decoration: none;
}

main article a:active {
  background-color: #f93;
  color: #cfa;
}

/* サイドバーの設定 */
.sidebar {
}