@charset "utf-8";

/* //////////////////////////// */
/* mobile design */

@media (max-width: 919px) {
  .works_h2 {
    width: 80vw;
    padding-top: 15vh;
    padding-left: 10vw;
    font-size: 2rem;
  }

  .works .demo_link{
    margin-top: 5vh;
    margin-left: 10vw;
    margin-bottom: 15vh;
    background-color: #b2c3d5;
    display: inline-block;
    padding: 10px;
    text-decoration: none;
  }

  .works .demo_link a{
    text-decoration: none;
  }

  .container {
    display: block;
    padding-top: 10vh;
    padding-bottom: 10vh;
    background-color: #fbfbfd;
  }

  .container ul li {
    margin-bottom: 5vh;
    width: 80vw;
  }

  .container .list {
    transform: scale(1, 0);
    opacity: 0;
  }

  .container .list.show {
    transform: scale(1, 1);
    opacity: 1;
    transition: 0.5s 0.5s;
  }

  .container .list.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 100%;
    height: 100%;
    margin-left: 10vw;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  li img,
  li a p {
    width: 100%;
    height: auto;
    margin-left: 10vw;
    margin-bottom: 1vh;
  }

  .pagenation {
    text-align: center;
    padding: 2vh 0vw;
  }
}

/* //////////////////////////// */
/* pc design */
@media (min-width: 920px) {
  .works_h2 {
    width: 80vw;
    padding-top: 25vh;
    padding-left: 10vw;
    font-size: 4vw;
  }

  .works .demo_link{
    margin-top: 5vh;
    margin-left: 10vw;
    margin-bottom: 15vh;
    background-color: #b2c3d5;
    display: inline-block;
    padding: 10px;
    text-decoration: none;
  }

  .works .demo_link a{
    text-decoration: none;
  }

  .container {
    /* display: block; */
    padding-top: 10vh;
    padding-bottom: 10vh;
    background-color: #fbfbfd;
  }

  .container ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .container ul li {
    margin-bottom: 5vh;
    margin-left: 5vw;
    width: 30vw;
  }

  .container .list {
    transform: scale(1, 0);
    opacity: 0;
  }

  .container .list.show {
    transform: scale(1, 1);
    opacity: 1;
    transition: 0.5s 0.5s;
  }

  .container .list.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 100%;
    height: 100%;
    margin-left: 10vw;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  li img,
  li a p {
    width: 100%;
    height: auto;
    margin-left: 10vw;
    margin-bottom: 1vh;
  }

  .pagenation {
    text-align: center;
    padding: 2vh 0vw;
  }
}