@charset "UTF-8";
.page_body{
width: 90%;
margin: 0 auto;
}

.gallery{
columns: 3;/*段組みの数*/
padding:0 15px;/*ギャラリー左右に余白をつける*/
margin-bottom:30px;
}

.gallery li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
  width:100%;
  height:auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/}

@media only screen and (max-width: 768px) {
  .gallery{
  columns: 2;
  } 
}


/*========= レイアウトのためのCSS ===============*/

/*画像を出現させるアニメーションCSS*/

.flipLeft{
animation-name: flipLeft;
animation-duration:0.5s;
animation-fill-mode:forwards;
perspective-origin: left center;
opacity: 0;
}

@keyframes flipLeft{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


#works .list {
    list-style-type: none;
    margin-bottom: 60px;
}

#works .list li {
    display: flex;
    align-items: center;
    gap: 0 10px;
    position: relative;
    padding: .3em .3em .3em 1.5em;
}

#works .list li::before,
#works .list li::after {
    position: absolute;
    content: '';
}

#works .list li::before {
    left: 0;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background-color: #2589d0;
}

#works .list li::after {
    left: .6em;
    transform: translateX(-75%) rotate(-45deg);
    width: .3em;
    height: .3em;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}