body {
  color: #000;
  background: #FFF;
  font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #000;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  width /***/:auto;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

a:link,a:visited { color: #333; }
a:hover { color: #FF0000; }


.red { color: #FF3333; }
.pink { color: #FF3366; }
.orange { color: #FF6633; }
.blue { color: #0066CC; }
.skyblue { color: #3399CC; }
.green { color: #009966; }
.grey { color: #999; }
.italic { font-style: italic; font-weight: bold;}
.underline { text-decoration: underline; }
.topic { text-align: center; }

.midashi {
  background: #FF3300;
  border-radius: 20px;
  color: #FFF;
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.3em;
}

h1 {
  font-size: 16px;
  font-weight: normal;
}

#header {
  background: linear-gradient(#FFF, #F5F5F5);
  border-bottom: 1px solid #CCC;
  overflow: hidden;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

#header ul {
  margin: 0 auto;
  max-width: 1024px;
  text-align: center;
}

#header li {
  display: inline-block;
  padding: 20px;
}

#header a {
  color: #000;
  border-radius: 10px;
  text-decoration: none;
  display: block;
  padding: 10px;
  transition: background-color 0.3s linear;
}

#header a:hover {
  background: #CCC;
  border-radius: 10px;
  padding: 10px;
  transition: background-color 0.3s linear;
}

.head_sub {
  font-size: 0.8em;
  font-weight: bold;
  letter-spacing: 3px;
}

.title {
  background: #333;
  color: #FFF;
  border-radius: 0 0 5px 5px / 0 0 5px 5px;
}

.head_title {
  font-size: 2.0em;
}

#header_sp { display: none; }

#main {
  width: 85%;
  margin: 0 auto;
  position :relative;
  top: 150px;
}

#main h2 {
  background: #F5F5F5;
  border-bottom: 1px solid #CCC;
  margin: 60px 0 30px 0;
  padding: 10px 10px 10px 30px;
}

#main hr {
  border-top: 1px solid #CCC;
  border-bottom: 0;
}

#main table {
  border-collapse: collapse;
  width: 500px;
}

#main th {
  font-weight: normal;
  background: #F0F0F0;
  padding: 10px;
}

#main td {
  border: 1px solid #CCC;
  padding: 10px;
}

.sub_info { border-left: 20px solid #FF6633; }
.sub_chara { border-left: 20px solid #FF3366; }
.sub_text { border-left: 20px solid #0066CC; }
.sub_link { border-left: 20px solid #009966; }

.sub {
  margin-left: 20px;
  background: #F5F5F5;
  padding: 20px;
}

#footer {
  margin: 30px 0 30px 0;
  text-align: center;
}

@media screen and (max-width:900px) {

#main { width: 95%; top: 70px; font-size: 14px; }
#header { display: none; }
#header_sp { display: block; position: fixed; top: 0; width: 100%; z-index: 999; }
#main table { width: 95%; }

.title_sp { width: 100%; color: #FFF; background: #333; font-size: 1.3em; font-weight: bold; text-align: center;}
.menu { background: #F5F5F5; border-bottom: 1px solid #CCC; margin-top: -1px; padding: 10px 0 10px 0; text-align: center;}
.menu li { display: inline-block; padding: 0 3px 0 3px; }
.menu a { display: block; text-decoration: none; }
.menu a:hover { border-radius: 5px; background: #CCC; color: #000; }
}