@charset "UTF-8";

@media screen and (max-width: 900px){
  #memu{
  	width: 25vw;
  }
  #memu .nav{
  	width:25vw;
  }
}
@media screen and (max-width: 768px){
  main{overflow-x: hidden;}
  .pc{display: none;}
  .sp{display: block;}
  .wrapper{
    display: block;
  }
  #memu{
width: 100%;
position: relative;
  }
  #wrap{
  	width: 100%;
  }
  .hamburger-button{
    display: block;
  }
  .hamburger-nav a{
    font-size: 2.5rem;
    padding: 30px 15px;
  }
  .hamburger-nav a::after {
    width: 12px;
    height: 12px;
    border-top: solid 2px #333;
    border-right: solid 2px #333;
  }
  .top .object01 {
    left: -155px;
    top: 220px;
    width: 50%;
}
.top .object02 {
    right: -100px;
    top: -60px;
    width: 60%;
}
#wrap .top-illust {
  top: 70px;
width: 100%;
margin-bottom: 60%;
}
#wrap .illust-box {
  width: 70%;
margin-left: 0;
}
#wrap .top-illust .illust-box p {
  right: -110px;
bottom: 15px;
font-size: 1.2rem;
}

.hamburger-nav {
  z-index: 99;
}
#works .works-list ul li {
    width: 48%;
        margin-bottom: 20px;
}
#works .works-list ul li .tag {
    font-size: 1.3rem;
}
h3 {
    font-size: 1.4rem;
    margin-top: 7px;
    line-height: 2rem;
}
#works .works-list .thumbnail {
    margin-bottom: 10px;
}
#about {
    flex-flow: column;
}
#about .left {
    width: 100%;
            margin-bottom: 25px;
}
#about .right {
    width: 90%;
    margin: 0 auto;
}
h2 {
    font-size: 4rem;
    letter-spacing: 0.2rem;
    text-align: center;
}
#works {
    margin-bottom: 120px;
}
#works h2 {
    margin-bottom: 25px;
}
#about .right p {
    line-height: 2.5rem;
}
#about {
	margin-bottom: 120px;
}
.works-detail h2 {
    margin-top: 30px;
}
}