body  {
  max-width:960px;
  min-width:320px;
  margin: 0 auto;                /* 上下マージン 0、左右マージンを自動（=中央）*/
  padding: 0px 2px 2px 2px;               /* 全パディング 8 */
  background-color: #111;     /* 背景色 */
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

header,nav,article,footer {
  margin:8px 0px 0px 0px;
  border-radius: 5px;        /* CSS3草案 */
  -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 5px;   /* Firefox用 */
  background-color: #555;
  border: 0px solid #ccc;    /* BODYの範囲表示デバッグ用 */
}

header {
  position: relative;
  text-align: center;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100&1+0,0+100;Blue+to+Transparent */
  background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */
}

header h1 {
  color: #abf;
  font-size: 24pt;
  padding:6px 0px 0px 5px;
  margin:0px;
}

header h1 span {
  color: #eef;
  top:0px;
  left:1px;
  letter-spacing : 2px;
  font-size: 18pt;
  padding:0px 0px 0px 0px;
  margin:0px;
}

header p {
  color: #ddd;
  font-size: 10pt;
  padding:0px 0px 6px 5px;
  margin:0px;
}

div#item {
  color:white;
  position: absolute;
  margin-top: 10px;
  width:auto;
  background: #444;

  right:0px;
  padding: 10px;
  border:0px dotted  #fee;
  border-radius: 5px;
  text-align: left;
  font-size:15pt;
}

div#item a {
  color:#fee;
  text-decoration: none;  margin:0px;
  border-bottom:1px dotted  #fee;
}

div.menu {
  z-index:1000;
  font-size:10pt;
  border:0px none white;
  border-radius: 5px;
  position: absolute;
  right:30px;
  top:0px;
  width: 66px;
  height:32px;
  background-color: #fee;
  color:#000;
  padding:5px;
  text-align: center;
  margin:0px;

  -moz-transition: -moz-transform 0.3s ease-in;
  -webkit-transition: -webkit-transform 0.3s ease-in;
  -o-transition: -o-transform 0.3s ease-in;
  -ms-transition: -ms-transform 0.3s ease-in;
  transition: transform 0.3s ease-in;

  -moz-transform-origin:66px 0px;
  -webkit-transform-origin:66px 0px;
  -o-transform-origin:66px 0px;
  -ms-transform-origin:66px 0px;
  transform-origin:66px 0px;

  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);

  overflow:hidden;
  display: none;
}

div.menu:hover {
  overflow:visible;
  -moz-transform: rotate(6deg);
  -webkit-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg) translate(20px,6px);
}

nav {
  color: #49f;
  padding:5px 0px;
  font-size: 10pt;
  text-align: center;
}

nav a {
  color: #eef;
   text-decoration: none;  margin:0px;
}

nav ol {
  display: inline-block;
  margin:0px;                 /* 上下を開けるデフォルトをクリア */
  padding:0px;                /* 左を開けるデフォルトをクリア */
}
nav li {
  display: inline-block;
  border-left: 1px solid #fee;
  padding: 0px 12px 0px 14px;
}

nav li.last {
  border-right: 1px solid #fee;
  padding-right:14px;
}

@media screen and (max-width: 640px) {
  nav li {
    padding: 0px 2px 0px 4px;
  }

  nav li.last {
    padding-right:4px;
  }
}

@media screen and (max-width: 480px) {
  header {
    text-align: left;
  }
  nav {
    display: none;
  }
  div.menu {
    display: block;
  }
}




article {
  background: #FEE; color:#000; border-radius: 5px; box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8); padding:3px;
}

footer {
  color: #eef;
  text-align: center;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+0,000000+0,f1da36+100&0+20,0.65+60 */
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(48,44,11,0) 20%, rgba(145,131,33,0.65) 60%, rgba(241,218,54,0.65) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(48,44,11,0) 20%,rgba(145,131,33,0.65) 60%,rgba(241,218,54,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(48,44,11,0) 20%,rgba(145,131,33,0.65) 60%,rgba(241,218,54,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6f1da36',GradientType=0 ); /* IE6-9 */
}

footer h1 {
  font-size:9pt;
  margin:0px;
  padding:5px 0px;
}
footer address {
  font-size:9pt;
  margin:0px;
  padding:0px 0px 5px 0px;
}
footer a {
   color:#eef;
   text-decoration: none;  margin:0px;
}

.listBtnIcon {
	  display: inline-block;
	  position: relative;
    vertical-align:middle;
	  width: 14px;
	  height: 2px;
	  margin: 0 0 0 3px;
	  background: #2196F3;
}

.listBtnIcon:before, .listBtnIcon:after{
	  display: block;
	  content: "";
	  position: absolute;
	  width: 14px;
	  height: 2px;
	  background: #2196F3;
	  transition: .3s;
}

.listBtnIcon:before{
	  margin-top: -6px;
}

.listBtnIcon:after{
	  margin-top: 6px;
}