@charset 'UTF-8';
@import "/Applications/MAMP/htdocs/asakura-garden/src/scss/utility/_media-queries.scss";
@import "/Applications/MAMP/htdocs/asakura-garden/src/scss/utility/_mixin.scss";


.works{
  main{
    margin-top: 164px;
  }
  .sec-c-ttl{
    .c-ttl-jp{
      span{
        @include PC() {
          width: 515px;
        }
      }
    }
    .c-txt-en{
      letter-spacing: .06em;
    }
  }
  .list-works{
    @include SP() {
      background-color: $color_bg;
      width: calc(100% + 44px);
      margin-left: -24px;
      padding: 28px 24px;
      margin-top: 28px;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      margin: -63px 0 0 -18px;
      @include SP() {
        margin: -14px 0 0 -9px;
      }
    }
    li{
      width: calc(33.33% - 18px);
      margin: 63px 0 0 18px;
      @include SP() {
        width: calc(50% - 9px);
        margin: 14px 0 0 9px;
      }
    }
    a{
      display: block;
    }
    .img{
      @include aspect-ratio(285px, 285px);
      img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .title{
      @include ffSG;
      @include font(13, 19, .04, 400);
      @include multiLineEllipsis;
      padding: 6px 0 0 4px;
      @include SP() {
        padding-top: 4px;
      }
    }
  }

  .c-footer{
    margin-top: 0;
  }
}
.works-single{
  main{
    @include SP() {
      margin-top: 75px;
    }
  }
  .content-single{
    margin-top: 20px;
    padding-bottom: 70px;
    @include PC() {
      padding-bottom: 130px;
    }
  }
  .title-blog{
    @include font(20, 30, .06, 700);
    width: calc(100% + 10px);
    margin-left: -5px;
    margin-bottom: 16px;
    @include PC() {
      margin-top: 32px;
      @include font(36, 55, .117);
    }
  }
  .inner{
    &--title{
      @include PC() {
        max-width: 1210px;
      }
    }
  }
  .thumb{
    width: 100%;
    img{
      width: 100%;
    }
  }
  .text-content{
    margin-top: 24px;
    .inner{
      @include PC() {
        max-width: 745px
      }
    }
    p{
      @include PC() {
        @include font(16, 45, .1, 400);
      }
      @include SP() {
        @include font(16, 37, .04);
      }
    }
  }
  .works-detail{
    background-color: #F8F7F7;
    padding: 19px 24px 50px;
    @include PC() {
      padding: 50px 0 68px;
    }
    .inner{
      @include PC() {
        width: 100%;
        display: flex;
        align-items: flex-start;
        padding: 0 40px;
      }
      @include SP() {
        padding: 0;
      }
    }
    &__title{
      @include ffZKG;
      @include font(20, 22, .1, 500);
      @include PC() {
        @include font(18, 22, '', 700);
        flex-shrink: 0;
        width: 158px;
      }
    }
    &__box{
      display: flex;
      flex-wrap: wrap;
      margin: -1px 0 0 -18px;
      @include PC() {
        flex: 1;
        margin: -30px 0 0 -48px;
      }
    }
    dl{
      @include ffSG;
      border-bottom: 1px solid #919193;
      width: calc(50% - 18px);
      margin: 17px 0 0 18px;
      padding-bottom: 1px;
      @include PC() {
        width: calc(33.33% - 48px);
        margin: 30px 0 0 48px;
        padding-bottom: 2px;
      }
    }
    dt{
      color: #919193;
      @include font(13, 22, .03, 400);
      margin-left: -5px;
      @include PC() {
        @include font(15, 21, .04);
      }
    }
    dd{
      @include font(16, 22, .03, 400);
      @include PC() {
        @include font(17, 24);
      }
    }
  }
  .before-after{
    &__before{
      padding-top: 45px;
      @include PC() {
        padding-top: 140px;
      }
      .title{
        color: #919193;
        @include font(15, 22, .1, 400);
        @include PC() {
          max-width: 964px;
          margin: 0 auto;
          margin-bottom: 15px;
          @include font(18);
        }
      }
      .before-after__img{
        text-align: center;
        @include PC() {
          max-width: 894px;
        }
        img{
          width: auto;
          @include PC() {
            max-width: 100%;
          }
        }
      }
    }
    .title{
      padding: 0 35px;
      @include SP() {
        margin-bottom: 5px;
      }
    }
    &__img{
      max-width: 1130px;
      margin: 0 auto;
    }
    &__after{
      padding: 15px 0 27px;
      background-color: #F8F7F7;
      margin: 17px 0 0 0;
      @include PC() {
        margin-top: 112px;
        padding: 90px 0;
      }
      .title{
        color: $color_heading02;
        @include font(21, 29, .1, 400);
        @include PC() {
          max-width: 1200px;
          margin: 0 auto;
          @include font(20);
        }
      }
      &__box{
        max-width: 1130px;
        margin: 0 auto;
      }
      .flex{
        display: flex;
        flex-wrap: wrap;
        margin-left: -21px;
        @include SP() {
          margin-left: 0;
        }
      }
      .img{
        margin: 19px 0 0 21px;
        text-align: center;
        @include PC() {
          width: calc(50% - 21px);
        }
        @include SP() {
          padding: 0 48px;
          margin: 14px 0 0 0;
          width: 100%;
        }
        img{
          width: auto;
          max-width: 100%;
        }
        &:first-child{
          width: 100%;
          @include SP() {
            padding: 0;
            margin-top: 0;
            margin-bottom: 20px;
          }
          &:before{
            display: none;
          }
          img{
            width: auto;
            max-width: 100%;
            position: static;
          }
        }
      }
    }
  }

  .c-box-link-others{
    @include PC() {
      margin-top: 202px;
    }
    @include SP() {
      margin-top: 55px;
    }
  }
}