@charset "utf-8";
/* -------------------------------------
     sp CSS
 (c) Copyright 2020 Sketches of Design
     version 2020-12-26
------------------------------------- */

/* 1280
--------------------------------------*/
@media screen and (max-width: 1280px) {
  header h1 a{
    letter-spacing: 0.3em;
    font-size: 4.0rem;
  }
  body#z-idx #mainarea .inner p img,
  body#home #mainarea .inner p img{
    width: 80%;
    height: auto;
  }

}
/*  1024
--------------------------------------*/
@media screen and (max-width: 1024px) {

  body#gallery-idx .gallery a{
    height: 80px;
  }
}

/*  960
--------------------------------------*/
@media screen and (max-width: 960px) {

  body#gallery-idx .gallery a{
    /*width: 20%;*/
    height: 60px;
  }

/* font */
/*h1{
  font-size: 4.0rem;
}
h2{
  font-size: 2.0rem;
}
h3{
  font-size: 1.6rem;
}
main p,
main dl,
main table,
main ul,
#hdmenu nav ul li{
  font-size: 1.3rem;
}
main section .inner{
  width: auto !important;
  height: 100%;
}
main section .inner{
  margin: 0 5%;
}*/
/*
#{
  float: none !important;
  display: block !important;
}
#{
  display:block;
}
#{
  display:none;
}
#{
  margin: 0;
  padding: 0;
}
#{
  padding: 0 5%;
}
#{
	background-size: 100px 100px !important;
	-webkit-background-size: 100px 100px !important;
	-moz-background-size: 100px 100px !important;
	-ms-background-size: 100px 100px !important;
	-o-background-size: 100px 100px !important;
  width: 100px;
  height: 100px;
}
*/


}
/*  768
--------------------------------------*/
@media screen and (max-width: 768px) {
  img{
    max-width: 100%;
    height: auto;
    width /***/:auto;
  }
  br.sp{
    display: block;
  }
  .copy,
  #content #mainarea,
  #content #info{
    width: 100%;
    border-right: none;
  }
  body#z-idx #mainarea .inner p img,
  body#home #mainarea .inner p img{
    position: static;
    padding: 80px 40px;
    width: 100%;
  }
  #content #info{
    padding: 10px 30px 10px 10px;
    border-bottom: 1px solid #c8c2c6;
  }
  body#z-idx #content{
    height: 100%;
  }
  body.blog #content-inner #mainarea,
  body#home #content-inner #mainarea{
    order: 1;
    border-bottom: 1px solid #c8c2c6;
  }
  body.blog #content-inner #info,
  body#home #content-inner #info{
    order: 2;
    padding: 10px;
  }
  body.blog #content-inner .copy,
  body#home #content-inner .copy{
    order: 3;
  }
  body#gallery-idx .gallery a{
    width: 20%;
    height: 100px;
  }
  body.blog #mainarea .inner{
    padding: 20px;
  }


}
/*  480
--------------------------------------*/
@media screen and (max-width: 480px) {
  header h1 a{
    font-size: 3.2rem;
  }
  body#z-idx #mainarea .inner p img,
  body#home #mainarea .inner p img{
    position: static;
    padding: 40px;
    width: 100%;
  }
  body.blog #mainarea section ul,
  body.blog #mainarea section p,
  #content #info p{
    font-size: 1.4rem;
  }
  body#home #mainarea .inner{
    margin: 0;
    background: url("../img/p-ymmzz-02.png") right 10px no-repeat;
    background-size: 50% auto !important;
    background-color:rgba(51,62,54,0.2);
    background-blend-mode:lighten;
  }
  body#gallery-idx .gallery a{
    width: 33.33%;
    height: 100px;
  }

}


/*  320
--------------------------------------*/
@media screen and (max-width: 320px) {




}