body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}
a{text-decoration:none; outline:none!important;}
table {border-spacing: 0;}
fieldset,img {border: 0;}
html,body,div,article,section,nav,header,footer,input,textarea {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
div,article,section{display:block; overflow:hidden;}
strong{font-weight: bold;}
ol,ul {list-style: none;margin:0;padding:0;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;margin:0;padding:0;}
q:before,q:after {content:'';}
abbr,acronym { border: 0;}

html{
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
}
html,body{
	position:relative;
	height:100%;
	min-height:100%;
}
body{
	color:#555;
	background:#ebe7e2;
	font-size:1.6rem;
  font-family: tbchibirgothicplusk-pro,sans-serif;
  font-weight: 400;
  font-style: normal;
	position:relative;
}
a{color:#b2b2b2; text-decoration:none;}
img{max-width:100%; vertical-align:bottom;}


/* ----------------- common ------------------ */

footer{
  background: #a59c8c;
  text-align: center;
  padding: 20px 0 5px;
}
footer .logo{
  width: 200px;
  padding: 15px 0 5px;
}
footer p{
  font-size: 1.3rem;
  line-height: 1.6rem;
  margin-top: 5px;
}
#copy{
  font-size:1.2rem;
  line-height: 30px;
}


/* ----------------- top ------------------ */
body{
  background: #ebe7e2 url(../img/bg.png) center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
nav{
  margin: 80px 0;
}
nav .logo{
  text-align: center;
  display: block;
  padding: 20px;
}
.btn{
  text-align: center;
  padding: 10px 0 40px;
}
.btn a{
  margin: 5px auto;
  color: #4c443c;
  background: #fff;
  border: 1px solid #fff;
  padding: 6px 20px;
  border-radius: 4px;
}

#gallery{

}
#ilgenre{
  margin: 20px auto;
  text-align: center;
}
#ilgenre li{
  border: 1px solid #fff;
  color:#fff;
  background: #c4c2be;
  font-size: 1.15rem;
  line-height: 1.8rem;
  padding: 9px 9px 5px;
  margin: 0 10px 0 0;
  border-radius: 4px;
  display: inline-block;
  vertical-align: top;
}
#ilgenre li.active{
    pointer-events: none;
    background: #a59c8c;
  }
#ilgenre li small{
  font-family: edding-780,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  display: block;
}
#illustlist{
  margin: 100px auto;
  width: 95vw;
  max-width: 1500px;
  text-align: center;
  padding-left: 3vw;
}
.illust{
  display: block;
  margin: 0 auto 50px;
}

a.ilimg{
  position: relative;
  display: block;
  background: #a59c8c;
  border-radius: 4px;
  overflow: hidden;
  width: 90vw;
  height: 90vw;
}
.ilimg img{
  background-color: #fff;
}
.illust p{
  color: #333;
  display: block;
  font-size: 1.6rem;
  line-height: 2.2rem;
  margin-top: 3vw;
}
.illust p span{
  color: #a59c8c;
  font-size: 1.2rem;
  margin-top: 5px;
  display: block;
}

#single{
  background: #fff;
  width: 95vw;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 50px;
  padding: 40px 0;
  border-radius: 15px;
}
#single h1{
  font-size: 1.8rem;
}
.genre{
  color:#fff;
  background: #a59c8c;
  border: 1px solid #fff;
  font-size: 1.2rem;
  padding: 3px 6px;
  margin: 0 10px;
  border-radius: 4px;
  display: inline-block;
  vertical-align: top;
}
.img_1{
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 20px auto;
  display: block;
}
#single .description{
  text-align: left;
  margin: 0 auto 30px;
  width: 90%;
  max-width: 900px;
}
#sub a{
  display: inline-block;
  vertical-align: top;
  margin: 2vw 2vw auto auto;
}
#sub a:nth-child(even){
  margin-right: 0;
}
#sub a img{
  width: 45vw;
  max-width: 250px;
  height: auto;
}

#contact{
  text-align: center;
  margin: 60px auto;
}
#contact h2{
  display: block;
  margin: 0 auto 30px;
}
#contact .caption{
  display: block;
    margin: 0 auto 15px;
}
.wpcf7-form-control-wrap{
  padding: 5px;
  display: inline-block;
  }
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap select,
.wpcf7-form-control-wrap textarea{
  padding: 8px;
  border: none;
  border-radius: 4px;
  width: 360px;
}
.wpcf7-submit{
  padding: 6px 20px;
  border: 1px solid #fff;
  background: #4c443c;
  border-radius: 4px;
  color: #fff;
  font-size: 1.8rem;
}
.screen-reader-response{
  display: inline-block;
  color: #fff;
  background-color: #f00;
  border-radius: 4px;
}
.screen-reader-response ul,
.wpcf7-not-valid-tip,
.wpcf7-response-output{
  display: none!important;
}

/* ---------------------------------------------------------------------------------------- */
@media screen and (min-width: 800px){

  .btn a:hover{
    color: #fff;
    background: #a59c8c;
    transition: .8s;
  }
  #ilgenre li:hover{
    background: #a59c8c;
    cursor: pointer;
    transition: .8s;
  }
  .illust{
    display: inline-block;
    vertical-align: top;
    margin: 0 2vw 2vw 0;
    position: relative;
  }
  a.ilimg{
    width: 23vw;
    height: 23vw;
    max-width: 300px;
    max-height: 300px;
  }
  .ilimg img{
    transform: scale(1);
    opacity: 1;
  }
  .ilimg:hover img {
    transform: scale(1.1);
    transition: 1s;
    opacity: .5;
  }
  .illust p{
    color: #fff;
    width: 90%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
    transition: .8s;
    opacity: 0;
    pointer-events: none;
  }
  .illust p span{
    color: #fff;
  }
  .illust:hover p,
  .illust:hover span{
    opacity: 1;
  }

  #sub a{
    margin: 20px auto auto 20px;
  }
  #sub a:nth-child(even){
    margin-right: 20px;
  }
}

/* ---------------------------------------------------------------------------------------- */
@media screen and (min-width: 1000px){

}