/* style.css */



/* for ~IE8 */
header, footer, section, nav, article, aside, hgroup {
  display:block;
}



* {
  margin:0;
  padding:0;
}

body {
  padding:0 0 20px 0;
  font-size:14px;
  line-height:1.5;
  font-family:'Meiryo UI','Hiragino Kaku Gothic Pro',Osaka,'MS UI Gothic',sans-serif;
  color:#333;
  background:#fff;
  text-align:center;
}

h2 {
  position:relative;
  height:25px;
  margin:10px 0 20px 0;
  text-align:right;
  line-height:1;
  font-weight:normal;
  font-size:1.2em;
  color:#999;
  border-bottom:solid 10px #ccc;
}
h2 em {
  position:absolute;
  left:20px;
  bottom:-10px;
  font-family:'Playfair Display',serif;
  font-weight:bold;
  font-style:italic;
  font-size:54px;
  color:#333;
  text-shadow:0 0 2px #fff, 0 0 2px #fff;
}

h3 {
  height:1.2em;
  margin:0 0 15px 0;
  padding:0 0 0 5px;
  line-height:1;
  font-size:1.2em;
  color:#333;
  border-left:solid 10px #ccc;
}

a {
  color:#09f;
}
a:hover {
  color:#f60;
}

header,
nav,
article,
footer {
  width:1000px;
  margin:0 auto;
  background:#fff;
}



header {
  position:relative;
  z-index:1;
  height:220px;
}
header h1 {
  padding:50px 0 0 0;
}
header h1 a {
  display:block;
  width:560px;
  height:120px;
  margin:0 auto;
  text-indent:-999em;
  overflow:hidden;
  background:url(../img/logo.png) no-repeat 0 0;
  background-size:auto 100%;
  -webkit-transition:0.2s ease-in-out;
  -moz-transition:0.2s ease-in-out;
  -o-transition:0.2s ease-in-out;
  transition:0.2s ease-in-out;
}
header h1 a:hover {
  -webkit-filter:blur(3px);
  -moz-filter:blur(3px);
  -ms-filter:blur(3px);
  -o-filter:blur(3px);
  filter:blur(3px);
}
header p {
  display:none;
}



nav {
  position:relative;
  z-index:2;
  height:60px;
  border-bottom:solid 5px #666;
}
nav ul {
  margin:0 auto;
}
nav ul li {
  display:inline-block;
  height:20px;
  margin:0;
  padding:0 20px;
  border-left:solid 2px #666;
}
nav ul li:first-child {
  border:none;
}
nav ul li a {
  position:relative;
  top:-7px;
  display:inline-block;
  width:120px;
  height:30px;
  margin:0 -0.45em 0 0;
  line-height:30px;
  text-decoration:none;
  letter-spacing:5px;
  font-size:1.2em;
  color:#333;
  -webkit-transition:0.1s ease-in-out;
  -moz-transition:0.1s ease-in-out;
  -o-transition:0.1s ease-in-out;
  transition:0.1s ease-in-out;
}
nav ul li a:hover {
  color:#000;
  background:#eee;
  background-image:-moz-linear-gradient(top,#cccccc 0%,#ffffff 50%,#cccccc);
  background-image:-webkit-gradient(linear,left top,left bottom,from(#cccccc),color-stop(0.49,#ffffff),color-stop(0.50,#ffffff),to(#cccccc));
}
nav ul li a:active,
nav ul li a.focus {
  color:#fff;
  background:#666;
}



article {
  position:relative;
  z-index:3;
  width:760px;
  max-height:100%;
  min-height:400px;
  padding:30px 0 20px 0;
  text-align:left;
  background:#fff;
}
article p {
  margin:0 0 15px 0;
}



footer {
  position:relative;
  z-index:4;
  max-height:100%;
  padding:40px 0 30px 0;
  font-size:1em;
  background:#fff;
  border-top:solid 5px #666;
}
footer a#facebook {
  display:block;
  position:absolute;
  right:10px;
  top:20px;
  width:50px;
  height:50px;
  background:url(../img/facebook.png) no-repeat left top;
  background-size:auto 100%;
  opacity:0.7;
  -webkit-transition:0.2s ease-in-out;
  -moz-transition:0.2s ease-in-out;
  -o-transition:0.2s ease-in-out;
  transition:0.2s ease-in-out;
}
footer a#facebook:hover {
  opacity:1.0;
}