@charset "utf-8";
body {
	font-family: "noto-sans-cjk-jp", sans-serif;
    background-color: #fcf9f7;
}
p, figure, img, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, blockquote, pre, form, fieldset, legend, table, th, td {
	font-family: "noto-sans-cjk-jp", sans-serif; font-weight: 200; font-style: normal; margin: 0; padding: 0; list-style: none;
}
.helvetica {
	font-family: "helvetica-neue-lt-pro", sans-serif;
	font-weight: 100;
}
/*works_base.html==============================================================================================*/
#works_base h1 {
 background-size: cover;
 background-position: center;
 padding: 80px 0;
 font-size: 45px;
 color: #fff;
 text-align: center;
 font-weight: 100;
 margin: 0 auto;
}
#works_base h1 span {
 font-family: "helvetica-neue-lt-pro", "noto-sans-cjk-jp", sans-serif;
 display: block;
 font-size: 12px;
}
/*ーーーーーーーーーーーーーーーーーーー*/
#works_base .contents {
 margin: 80px auto;
}
#works_base .mockup {
 position: relative;
 height: 700px;
 margin-top: 30px;
}
/*mac-------------*/
#works_base .inner .mac {
 z-index: -1;
 position: absolute;
 left: 0;
 top: 0;
}
#works_base .inner .mac img {
 width: 750px;
}
#works_base .inner .mac_img {
 z-index: -2;
 position: absolute;
 left: 20px;
 top: 30px;
}
#works_base .inner .mac_img img {
 width: 700px;
}
/*iphone----------*/
#works_base .inner .iphone {
 position: absolute;
 right: 0;
 bottom: 0;
}
#works_base .inner .iphone img {
 width: 290px
}
#works_base .inner .iphone_img {
 z-index: -1;
 position: absolute;
 right: 17px;
 bottom: 45px;
}
#works_base .inner .iphone_img img {
 width: 260px;
 border-radius: 10px;
}
/*text----------*/
#works_base .text h2 {
 text-align: left;
 font-size: 12px;
 color: #666;
 margin: 0;
 font-weight: normal;
}
#works_base .text h2::before {
 content: '\f02b';
 font-family: 'Font Awesome 5 Free';
 font-weight: 900;
 margin-right: 7px;
}
#works_base .text h3 {
 font-family: "helvetica-neue-lt-pro", "noto-sans-cjk-jp", sans-serif;
 text-align: left;
 font-size: 24px;
 color: #1a1a1a;
 font-weight: 100;
 letter-spacing: 2px;
 margin: 10px 0 5px 0;
}
#works_base .text h4 {
 margin: 0;
}
#works_base .text h4 a {
 font-size: 14px;
 color: #999;
 font-weight: 300;
 letter-spacing: 1px;
}
/*works.html==============================================================================================*/
#works h1 {
 font-family: "helvetica-neue-lt-pro", "noto-sans-cjk-jp", sans-serif;
 background-size: cover;
 background-position: center;
 padding: 80px 0;
 font-size: 45px;
 color: #fff;
 text-align: center;
 font-weight: normal;
 margin: 0 auto;
 font-weight: 100;
}
#works h1 span {
 font-family: "helvetica-neue-lt-pro", "noto-sans-cjk-jp", sans-serif;
 display: block;
 font-size: 12px;
}
#works .contents {
 width: 100%;
 height: auto;
 margin: 80px auto;
}
#wrapper {
 overflow: hidden;
}
/*フィルターメニュー*/
#works ul.filter {
 width: 960px;
 height: auto;
 margin: 50px auto 30px;
 padding: 0;
 font-size: 13px;
}
#works .filter li {
 width: 110px;
 height: auto;
 list-style: none;
 text-align: center;
 float: left;
 border-right: solid 1px #EBEBEB;
}
#works .filter li:last-child {
 border-right: none;
}
#works .filter li a {
 width: 100%;
 height: auto;
 color: #1a1a1a;
 padding: 10px 0;
 text-decoration: none;
 display: block;
 letter-spacing: 1px;
 font-size: 12px;
}
#works .filter li a:hover {
 color: #1a1a1a;
 background-color: #EBEBEB;
 transition: all .6s ease;
 -webkit-transition: all .6s ease;
}
#works .filter a.current {
 color: #fff;
 background-color: #A1A1A1;
}
#works .filter li.wur {
 background-color: #FFFFF0;
}
/*画像ボックス*/
#works .grid {
 padding-top: 30px;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 max-width: 1500px;
 margin: 0 auto;
}
#works .grid-sizer {
 width: 33.3%;
 text-align: center;
}
#works .work_box {
 width: 30%;
 height: auto;
 min-height: 250px;
 margin: 0 0.1% 40px 20px;
 align-self: flex-end;
}
#works figure {
 margin: 0 auto;
 padding: 0;
}
#works figure img {
 width: 100%;
 padding: 0;
 object-fit: cover;
}
#works figcaption {
 padding: 10px 10px;
 box-sizing: border-box;
 font-size: 14px;
 color: #444;
 font-weight: 500;
 letter-spacing: 0px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
#works figcaption .tag {
 display: block;
 color: #aaa;
 font-size: 10px;
 margin-top: 10px;
 padding: 0;
 margin: 0;
 line-height: 25px;
 font-weight: 200;
}
#works figcaption .tag::before {
 content: '\f02b';
 font-family: 'Font Awesome 5 Free';
 font-weight: 900;
 margin-right: 7px;
}
#works a {
 text-decoration: none;
}
#works a img:hover {
 opacity: 0.8;
 transition: all .6s ease;
 -webkit-transition: all .6s ease;
}
@media screen and (max-width:1050px) { /*タブレット縦横*/
 #wrapper {
  padding-left: 0px;
 }
 /*ーーーーーーーーーーーーーーーーーーー*/
 #works_base .mockup {
  height: 570px;
 }
 #works_base .contents {
  width: 90%;
  margin: 40px auto;
 }
 /*mac-------------*/
 #works_base .inner .mac img {
  width: 600px;
 }
 #works_base .inner .mac_img {
  left: 24px;
  top: 26px;
 }
 #works_base .inner .mac_img img {
  width: 556px;
 }
 /*iphone----------*/
 #works_base .inner .iphone img {
  width: 250px
 }
 #works_base .inner .iphone_img {
  right: 14px;
  bottom: 38px;
 }
 #works_base .inner .iphone_img img {
  width: 224px;
 }
 #works .contents {
  margin: 50px auto;
 }
 #works ul.filter {
  width: 690px;
  margin: 50px auto 20px;
 }
 #works .filter li {
  width: 137.2px;
  border-right: solid 1px #eee;
  border-bottom: solid 0px #eee;
  margin-bottom: 3px
 }
 #works .filter li:last-child {
  border-right: solid 1px #eee;
 }
 #works .grid {
  padding-top: 30px;
  width: 90%;
 }
 #works .grid-sizer {
  width: 50%;
 }
 #works .work_box {
  width: 45%;
  height: auto;
  margin: 0 auto 50px;
  float: none;
  padding: 0 2.5%;
 }
}
@media screen and (max-width:700px) { /*スマホ縦-スマホ横*/
 /*ーーーーーーーーーーーーーーーーーーー*/
 #works_base .contents {
  width: 90%;
  margin: 40px auto;
 }
 /*text----------*/
 #works_base .text h2 {
  font-size: 10px;
 }
 #works_base .text h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0px 0 5px 0;
 }
 #works_base .text h4 a {
  font-size: 12px;
 }
 #wrapper {
  padding-left: 0px;
 }
 #works .contents {
  margin: 50px auto;
 }
 #works ul.filter {
  width: 100%;
 }
 #works .filter li {
  width: 100%;
  border-right: solid 0px #eee;
  border-bottom: solid 1px #eee;
 }
 #works .filter li:last-child {
  border-bottom: none;
 }
 #works .grid {
  width: 100%;
 }
 #works .grid-sizer {
  width: 50%;
 }
 #works .work_box {
  width: 100%;
  min-height: 30px;
  margin: 0 auto 20px;
  float: none;
  padding: 0 2.5%;
 }
 #works .work_box figure {
  display: inline-block;
  width: 45%;
 }
 #works .work_box figcaption {
  display: inline-block;
  width: 53%;
  vertical-align: top;
  font-size: 12px;
  letter-spacing: 0px;
 }
 #works .work_box figcaption .tag {
  display: block;
  font-size: 10px;
  padding-top: 5px;
  font-weight: 100;
 }
}
 @media screen and (max-width:500px) { /*スマホ縦-スマホ横*/
  #works_base .mockup {
   position: relative;
   height: 400px;
   margin-top: 30px;
  }
  /*mac-------------*/
  #works_base .inner .mac {
   z-index: -1;
   position: absolute;
   left: 0;
   top: 0;
  }
  #works_base .inner .mac img {
   width: 340px;
  }
  #works_base .inner .mac_img {
   z-index: -2;
   position: absolute;
   left: 14px;
   top: 15px;
  }
  #works_base .inner .mac_img img {
   width: 315px;
  }
  /*iphone----------*/
  #works_base .inner .iphone {
   position: absolute;
   right: 0;
   bottom: 0;
  }
  #works_base .inner .iphone img {
   width: 130px
  }
  #works_base .inner .iphone_img {
   z-index: -1;
   position: absolute;
   right: 8px;
   bottom: 21px;
  }
  #works_base .inner .iphone_img img {
   width: 116px;
  }
 }