<!-- CSS -->
<style type="text/css">

/* ▼リセット
=========================*/
html,body,h1,h2,h3,h4,h5,h6,div,span,a,img,table,tr,th,td,ul,ol,li,dl,dt,dd,form {
  margin:0;
  padding:0;
  border:0;
  outline:none;
  list-style:none;
  font-size:100%;
  font-weight:normal;
}
img {
  max-width:100%;
  height:auto;
  vertical-align:bottom;
}
br {
  letter-spacing:normal;
}

/* ▼サイト全体
=========================*/
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  text-align:center;
  line-height:1.5;
}

.headerInner, .navInner,
.contents, .footerInner {
  margin:0 auto;
  max-width:800px;
  _width:800px;
  text-align:left;
  letter-spacing:2px;
}

/* ウェブフォントの指定 */
h1,h2,h3,.nav,.page,.footer {
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing:4px;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /**//*/
  height: auto;
  overflow: hidden;
  /**/
}


/* ▼見出しの設定
=========================*/
h1 {
  font-size:150%;
}
h1 a {
  color:#ffffff;
}

h2 {
  font-size:150%;
}
h2:first-letter {
  font-size:150%;
}
h2:first-letter,
h2 span {
  color:#76aec8;
}

h3 {
  margin-bottom:5px;
  color:#76aec8;
  font-size:100%;
}

/* ▼リンクの設定
=========================*/
a {
  color:#76aec8;
  text-decoration:none;
}

/* ▼フォームの設定
=========================*/
input, textarea {
  color:#76aec8;
  background-color:#ffffff;
  border:1px solid #cccccc;
}

input[type="text"],
input[type="password"],
textarea {
  margin:8px 0;
  padding:5px;
  width:70%;
}
input[type="submit"] {
  padding:8px 15px;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
  outline:none;
  border-color:#76aec8;
}
input[type="submit"]:focus {
  outline:none;
  color:#fff;
  background:#76aec8;
}


/* ▼ヘッダーの設定
=========================*/
.header {
  padding:10px 0;
  background-color:#000000;
}

/* ▼メインイメージの設定
=========================*/
.image{ /* 画像横の帯 */
  text-align:center;
  background-color:#76aec8;
  line-height:1;
}
.image.section {
  width:90%;
  margin:0 auto;
}

/* ▼ナビゲーションの設定
=========================*/
.nav{
  background-color:#000000;
}
.nav a {
  display:block;
  float:left;
  width:12.5%;
  _width:99px;
  height:40px;
  color:#fff;
  text-align:center;
  line-height:40px;
}
.nav a:hover {
  position:static;
  background:#76aec8;

 /* 色が変わる時間 */
 -webkit-transition-duration:0.8s;
 -moz-transition-duration:0.8s;
 -o-transition-duration:0.8s;
 -ms-transition-duration:0.8s;
 transition-duration:0.8s;
}


/* ▼メインコンテンツ
=========================*/
.main {
  float:left;
  width:72.5%;
}
p {
  font-size:88%;
}

/* 余白 */
.section {
  margin-bottom:10px;
}

/* ページ移動 */
.page {
  text-align:center;
}
.page a {
  margin:5px;
}

/* カレンダー */
.calender {
  font-size:90%;
  font-family:monospace;
  text-align:center;
}

/* ▼サブコンテンツの設定
=========================*/
.sub {
  width:25%;
  float:right;
}

/* ▼フッターの設定
=========================*/
.footer {
  margin-top:20px;
  padding:12px 0;
  color:#ffffff;
  background-color:#000000;
}
.footerInner {
  text-align:right;
}

</style>


<style type="text/css">
<!--<pc_only>-->

/* ▼リンクの設定
=========================*/
a:hover {
  position:relative;
  top:1px; left:1px;
}

/* ▼マウスドラッグの設定
=========================*/
::selection {
  color:#ffffff;
  background:#76aec8;
}
::-moz-selection {
 color:#ffffff;
 background:#76aec8;
}
<!--</pc_only>-->


@media only screen and (max-width:600px) {

/* ▼リセット
=========================*/
.main, .sub {
  float:none;
  width:100%;
}
.headerInner,
.contents,
.footerInner {
  margin:0 auto;
  width:94%;
} 

/* ▼見出し
=========================*/
h1 {
  font-size:120%;
}

/* ▼ナビゲーション
=========================*/
.nav a {
 width:25%;
}

}
</style>
<!-- ▲pcやスマホ向け▲ --><!--</pc>-->