@charset "UTF-8";
/* =================================================
   Works.css
================================================= */
/* -----------------------------------------------
    COMMON
----------------------------------------------- */
.gridContainer {
  width: 87.5%;
}

#div2 {
  width: 100%;
  overflow: hidden;
}

.worksImage {
  display: flex;
  flex-wrap: wrap;
  width: 103.57143%;
  margin: 0 auto;
}
.worksImage a,
.worksImage a:link {
  display: block;
  width: 21.55172%;
  margin: 0 3.44828% 0 0;
}
.worksImage a img,
.worksImage a:link img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.7rem;
}

.lity {
  color: #fff;
  font-size: 0.8rem;
}
.lity .lity-container .lity-content {
  width: 86.45%;
  margin: 0 auto;
}

/* -----------------------------------------------
    Tablet Layout: 481px to 768px.
    Inherits styles from: Mobile Layout.
----------------------------------------------- */
@media only screen and (min-width: 481px) {
  .gridContainer {
    width: 90.625%;
  }

  .worksImage {
    width: 103.44828%;
  }
  .worksImage a,
  .worksImage a:link {
    width: 21.66667%;
    margin: 0 3.33333% 0 0;
  }
  .worksImage a img,
  .worksImage a:link img {
    margin-bottom: 1.4rem;
  }
}
/* -----------------------------------------------
    Desktop Layout: 769px to a max of 1232px.
    Inherits styles from: Mobile Layout and Tablet Layout.
----------------------------------------------- */
@media only screen and (min-width: 769px) {
  .gridContainer {
    width: 640px;
  }

  .worksImage {
    width: 660px;
  }
  .worksImage a,
  .worksImage a:link {
    width: 21.875%;
    margin: 0 3.125% 0 0;
  }
  .worksImage a img,
  .worksImage a:link img {
    margin-bottom: 1.4rem;
  }

  /* -----------------------------------------------
  
  body{
      min-height:1000px;
  }
  .pcOnly{
      display:block;
  }
  .gridContainer {
  	width: 88.5%;
  	max-width: 1232px;
  	padding-left: 0.75%;
  	padding-right: 0.75%;
  	margin: auto;
  	clear: none;
  	float: none;
  	margin-left: auto;
  }
  #div1 {
      width: 32.2033%;
      margin-left: 0;
      clear: both;
      position:fixed;
      right:1.6949%;
      top:0;
      z-index:999;
  }
  .div1ContentsInner{
  	height:30rem;
  	overflow:scroll;
  	overflow-y:scroll;
  	overflow-x:hidden;
  }
  #div2 {
      width: 66.1016%;
      margin-left: 1.6949%;
      padding-top:1.6949%;
      clear: none;
  }
  #div2 img{
  	width:98.3051%;
  }
  .zeroMargin_desktop {
      margin-left: 0;
  }
  .hide_desktop {
      display: none;
  }
  
  ----------------------------------------------- */
}