@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  overflow: auto;
  font-size: 100%;
}
@media (max-width: 320px) {
  * {
    font-size: 50%;
  }
}
body {
  background-color: #fff;
  font-family: "Meiryo", "メイリオ", Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  color: #555;
}
#page {
  margin: 0 auto;
  background-color: #fdfdfd;
  color: #555;
  width: 480px;
}
#header {
  margin: 2px 0 12px 0;
  border-bottom: 1px solid #00f;
}
#content {
  background-color: #fdfdfd;
  color: #555;
  width: 480px;
}
.content-left {
  background-color: #fdfdfd;
  color: #555;
  width: 480px;
}
.content-left .head {
  background-color: #777;
  color: #fff;
  width: 98%;
  padding: 2px 0;
  margin: 8px auto;
  text-align: center;
  font-size: 1.05em;
  font-weight: normal;
}
.head {
  background-color: #ddd;
  color: #222;
  width: 480px;
  padding: 8px 0 4px 0;
  margin: 16px 0 4px 0;
  text-align: center;
  font-size: 1.05em;
  font-weight: normal;
}
.content-right {
  margin: 0;
  padding: 0;
  float: right;
  background-color: #fff;
  color: #555;
  width: 240px;
}
.adv-center {
  margin: 0;
  padding: 0;
  width: 480px;
}
.adv-left {
  margin: 0;
  padding: 0;
  width: 480px;
}
@media (max-width: 640px) {
  #page {
    width: 100%;
  }
  #content {
    width: 100%;
  }
  .head {
    width: 100%;
  }
  .content-left {
    width: 100%;
  }
  .content-right {
    width: 100%;
  }
  .adv-center {
    width: 100%;
  }
  .adv-left {
    width: 100%;
  }
}
#footer {
  margin: 2px auto;
  padding: 2px;
  background-color: #fff;
  color: #555;
  width: 100%;
}
#footer .logo {
  margin: 2px auto;
  color: #555;
  padding: 2px;
}
#footer .logo img {
  padding: 6px;
  float: left;
  display: block;
}
#footer .logo .txt {
  padding: 4px;
  float: left;
  display: block;
  text-align: left;
}
#footer .logo a {
  text-decoration: none;
  padding: 0 4px;
}
#footer .logo a:hover,
#footer .logo a:link,
#footer .logo a:visited {
  color: #555;
}
.navi,
.navi_main,
.navi_sub,
.navi_ticker,
.navi_year,
.navi_month,
.navi_tab {
  list-style: none;
  display: block;
  outline: none;
  overflow: hidden;
}
.navi_main {
  background-color: #fff;
  float: left;
  width: 70%;
}
.navi_main .item {
  float: left;
  background-color: #fff;
}
.navi_main .item a {
  display: block;
  text-decoration: none;
  font-weight: bold;
  background-color: #fdfdfd;
  font-size: 1em;
  margin: 2px 1px;
  padding: 4px;
}
.navi_main .item a:hover,
.navi_main .item a:link,
.navi_main .item a:visited {
  border: 1px solid #fff;
  color: #00f;
}
.navi_main .item a:hover {
  border: 1px solid #ddd;
  background: #77f;
  color: #00f;
}
.navi_sub {
  background-color: #fff;
  float: right;
  width: 30%;
}
.navi_sub .item {
  float: right;
  background-color: #fff;
}
.navi_sub .item a {
  display: block;
  text-decoration: none;
  font-weight: bold;
  background-color: #fdfdfd;
  font-size: 1em;
  margin: 2px 1px;
  padding: 4px;
}
.navi_sub .item a:hover,
.navi_sub .item a:link,
.navi_sub .item a:visited {
  border: 1px solid #fff;
  color: #00f;
}
.navi_sub .item a:hover {
  border: 1px solid #ddd;
  background: #777;
  color: #fff;
}
.navi_ticker {
  border-bottom: 1px solid #00f;
  background-color: #fff;
}
.navi_ticker .item {
  float: left;
}
.navi_ticker .item a {
  display: block;
  text-decoration: none;
  font-weight: bold;
  font-size: 1em;
  margin: 0px 1px;
  padding: 1px 4px;
  color: #00f;
}
.navi_ticker .item a:hover {
  color: #000;
}
.navi_year {
  border-bottom: 1px solid #00f;
  background-color: #fff;
  width: 480px;
}
.navi_year .item {
  float: left;
}
.navi_year .item a {
  display: block;
  text-decoration: none;
  font-weight: bold;
  font-size: 1em;
  margin: 2px 1px;
  padding: 4px;
  color: #00f;
}
.navi_year .item a:hover {
  color: #000;
}
.navi_month {
  border-bottom: 1px solid #00f;
  background-color: #fff;
  width: 480px;
}
.navi_month .item {
  float: left;
}
.navi_month .item a {
  display: block;
  text-decoration: none;
  font-weight: bold;
  font-size: 1em;
  margin: 2px 1px;
  padding: 4px;
  color: #00f;
}
.navi_month .item a:hover {
  color: #000;
}
.navi_tab .item {
  margin: 0;
  padding: 0;
  float: left;
  text-align: center;
}
.navi_tab .item a {
  padding: 4px 2px;
  background-color: #eee;
  font-size: 0.92em;
  color: #000;
  text-decoration: none;
  display: block;
  width: 45px;
  margin: 1px;
}
.navi_tab .item a.selected {
  background-color: #bbb;
  color: #fff;
}
.navi_tab .item a:hover {
  background-color: #aaa;
  color: #fff;
}
@media (max-width: 640px) {
  .navi_year {
    width: 100%;
  }
  .navi_month {
    width: 100%;
  }
}
.charts {
  width: 100%;
  text-align: center;
}
.chart {
  width: 98%;
  margin: 10px auto;
  padding: 4px;
  background: #fff;
}
.chart .title {
  margin: 8px auto;
  padding: 2px 0;
  background-color: #777;
  color: #fff;
  text-align: center;
  font-size: 1.05em;
  font-weight: normal;
  width: 98%;
}
.chart .img {
  margin: 2px auto;
  width: 100%;
}
.chart .bankrate {
  margin: 12px auto;
  padding: 5px;
  width: 95%;
  border: 1px solid #e6e6e6;
  border-collapse: collapse;
  border-spacing: 0;
  background: #fafafa;
}
.chart .bankrate td,
.chart .bankrate th {
  padding: 0.3em 0.2em;
  border: 1px solid #e6e6e6;
  vertical-align: middle;
  text-align: center;
  font-weight: normal;
  color: #666;
  font-size: 0.75em;
}
.chart .bankrate tr:nth-child(odd) {
  background: #fff;
}
.chart .event {
  width: 95%;
}
.forecast {
  width: 98%;
  margin: 2px auto;
  padding: 2px;
  border: 1px solid #e6e6e6;
  border-collapse: collapse;
  border-spacing: 0;
  background: #fafafa;
}
.forecast h3 {
  margin: 8px auto;
  padding: 2px 0;
  background-color: #777;
  color: #fff;
  text-align: center;
  font-size: 1em;
  font-weight: normal;
  width: 98%;
}
.forecast td,
.forecast th {
  padding: 0.2em 0.15em;
  border: 1px solid #e6e6e6;
  vertical-align: middle;
  text-align: center;
  font-weight: normal;
  color: #666;
  font-size: 0.8em;
}
.forecast td a,
.forecast th a {
  text-decoration: none;
}
.forecast td.rate,
.forecast td.high,
.forecast td.low {
  font-weight: bold;
}
.forecast td.time {
  font-size: 0.75em;
}
.forecast td.sell {
  color: #fff;
  background-color: #af1010;
  text-align: center;
}
.forecast td.buy {
  color: #fff;
  background-color: #1010af;
  text-align: center;
}
.forecast tr:nth-child(odd) {
  background: #fff;
}