@charset "utf-8";

/* <共通：全体> */
html, body{
  height : 100%;
  margin : 0;
  padding : 0;
}
body {
  background-color : #EEEEEE;
  margin : 0 auto;
}
header {
  padding :0;
}

h2 {
  color : #FFFFFF;
  background-color : #8E8E8E;
  font-weight : normal;
  padding-left : 10px;
}
article {
}
time {
  margin-right : 5px;
}

/* </共通：全体> */



/* <共通：header> */

header p {
  float : right;
}

/* <navi> */
nav {
  clear : both;
  margin : 10px 0;
}
nav ul {
  list-style-type : none;
  height : 40px;
  background-color : #8E8E8E;
}
nav li {
  float : left;
  text-align : center;
  width : 100px;
  height : 100%;
  position : relative;
}
nav li a {
  text-decoration : none;
  color : #FFFFFF;
  line-height: 40px;
  vertical-align : middle;
}
/* </navi> */


/* </共通：header> */

/* <main> */
#illusts section:after{
  content : "";
  clear : both;
  display: flow-root;
}
#illusts h3, #illusts h4 {
  text-align : center;
  position : relative;
  clear : both;
}
#illusts h3 {
  border-top : solid 1px #8E8E8E;
  border-bottom : solid 1px #8E8E8E;
  margin : 12px;
}
#illusts h3:before,#illusts h3:after {
  content : "■"
}
#illusts h4 {
  margin : 3px;
}
#illusts h4:before,#illusts h4:after {
  content : "◇"
}

#illusts section p {
  width : 42px;
  height : 42px;
  float : left;
  margin : 3px;
}
#illusts ul#illusts_navi{
  list-style-type : none;
  text-align : right;
  font-size : 70%;
}
/* </main> */

/*   PC  */
@media screen and (min-width : 750px){
body{
  width : 900px;
}
header h1, header p {
  margin : 5px 0;
  height : 40px;
  line-height : 40px;
}
h1 {
  float : left;
  width : 350px;
  font-weight : normal;
  padding-left : 14px;
  border-left : solid 7px #8E8E8E;
}
nav li a:before, nav li a:after {
  content : "";
  width : 3px;
  height : 90%;
  margin : 2% 0;
  position : absolute;
  /*left : 0;*/
  background-color : #FFFFFF;
  opacity : 0;
  transition : all 0.1s;
}
nav li a:before{
  left : 5px;
  transform : translateX(45px) rotate(90deg);
}
nav li a:after{
  right : 5px;
  transform : translateX(-45px) rotate(90deg);
}
nav li a:hover:before, nav li a:hover:after{
  opacity : 1;
  transform : translateX(0);
}
}
/* mobile */
@media screen and (max-width : 750px){
*{  max-width : 100%; }
nav ul { margin:0 5px; padding : 0; height:1.5em; }
nav li{ width : 12%;margin:0 5px; }
nav li a{line-height:1em; }
#asumi-frame-440-1833{display:none;}
}