.works-top-txt {
    margin: 5rem 0 6rem;
    font-style: normal;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 180%;
    letter-spacing: 0.08em;
    font-feature-settings: 'palt' on;
    color: #FFFFFF;

    @media screen and (max-width: 767px) {
      margin: 4rem 0 6rem;
      font-size: 1.4rem; 
    }
}

.history-construction {
  .construction-history-container {
    padding-bottom: 4rem;
    /* padding-right: 4rem; */
    border-bottom: 1px solid #FFFFFF;
    margin-bottom: 4rem;
    cursor: pointer;
    transition: all 0.25s ease;

    @media screen and (max-width: 767px) {
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    

    .list-title {
      font-style: normal;
      font-weight: 700;
      font-size: 2.4rem;
      letter-spacing: 0.1em;
      color: #E0B91C;
      /* margin-bottom: 2rem; */
      position: relative;

      &.open {
        margin-bottom: 2rem;
      }

      @media screen and (max-width: 767px) {
        font-size: 1.8rem;
        margin-bottom: 0;
      }

        &::after {
            /* | */
            content: '';
            position: absolute;
            right: 2rem;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 0.4rem;
            height: 2.8rem;
            background-color: #E0B91C;
            transition: transform 0.3s ease;

            @media screen and (max-width: 767px) {
                width: 0.3rem;
                height: 2rem;
                top: 0.1rem;
                right: 1.8rem;
            }
        }

        &::before {
            /* - */
            content: '';
            position: absolute;
            right: 0.9rem;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 2.8rem;
            height: 0.4rem;
            background-color: #E0B91C;
            transition: transform 0.3s ease;

            @media screen and (max-width: 767px) {
                width: 2rem;
                height: 0.3rem
            }
        }   
    }

    &.open .list-title::after {
      transform: rotate(90deg);
    }

    .list-detail {
      font-style: normal;
      font-weight: 400;
      font-size: 1.8rem;
      line-height: 2.8rem;
      letter-spacing: 0.1em;
      color: #FFFFFF;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      padding: 0;
      margin: 0;
      /* transition: max-height 0.5s ease, opacity 0.4s ease, padding 0.3s ease, margin 0.3s ease; */
      transition: all 0.25s ease;

      @media screen and (max-width: 767px) {
        font-size: 1.4rem;
        line-height: 2.4rem;
      }
    }

    &.open .list-detail {
      max-height: 50rem;
      opacity: 1;
      padding-top: 1rem;
      margin-bottom: 1rem;

      @media screen and (max-width: 767px) {
        padding-top: 2rem;
      }
    }
  }

  & .construction-history-container:first-child {
    border-top: 1px solid #FFFFFF;
    padding-top: 4rem;
    @media screen and (max-width: 767px) {
      padding-top: 2rem;  
    }
  }
}

.section-exemple {
    margin: 14rem 0 0;

    @media screen and (max-width: 767px) {
      margin: 8rem 0 0; 
    }
}


footer {
  margin-top: 15rem;

  @media screen and (max-width: 767px) {
    margin-top: 8rem;    
  }
}