/* usp */
section.usp {
  &>div {
    text-align: center;
  }
}
section.usp nav {
  margin: 0 auto 4rem;
  max-width: 900px;
  ol {
    display: flex;
    gap: 3rem;
    li {
      &.active {
        a {
         opacity: 1;
        }
      }
      a {
        transition: var(--opacity);
        opacity: 1;
        &:hover {
          opacity: .8;
          &>div {
            p {
              &::before {
                top: calc(50% + 1rem);
              }
              &::after {
                top: calc(50% + 1rem);
              }
            }
          }
        }
        figure {

        }
        &>div {
          display: flex;
          align-items: center;
          color: var(--bodycolor);
          h3 {
            padding: 1rem 2rem;
            span {
              display: block;
              font-size: .8rem;
            }
            n {
              font-size: 2.5rem;
              line-height: 1em;
            }
          }
          p {
            position: relative;
            padding: 1rem 0 1rem 3rem;
            width: 100%;
            font-size: 1.5rem;
            letter-spacing: .2rem;
            &::before {
              content: '';
              position: absolute;
              right: 3.2rem;
              top: calc(50% + .6rem);
              width: 1.2rem;
              height: 1px;
              background-color: var(--bodycolor);
              transition: var(--all);
              transform-origin: right center;
              transform: rotate(45deg);
            }
            &::after {
              content: '';
              position: absolute;
              right: 2rem;
              top: calc(50% + .6rem);
              width: 1.2rem;
              height: 1px;
              background-color: var(--bodycolor);
              transition: var(--all);
              transform-origin: left center;
              transform: rotate(-45deg);
            }
          }
        }
      }
      &:nth-child(1) {
        a {
          &>div {
            background-color: #a5ae99;
            h3 {
              height: 100%;
              text-align: center;
              background: linear-gradient(90deg,rgba(165, 174, 153, 1) 35%, rgba(142, 152, 129, 1) 100%);
            }
          }
        }
      }
      &:nth-child(2) {
        a {
          &>div {
            background-color: #baa5c4;
            h3 {
              background: linear-gradient(90deg,rgba(186, 165, 196, 1) 35%, rgba(166, 142, 178, 1) 100%);
            }
          }
        }
      }
    }
  }
}

section.voice {
  padding: 4rem 0;
  background-color: var(--themecolor);
  h2 {
    font-size: 2.5rem;
    text-align: center;
  }
  .bodycopy {
    margin-top: 2rem;
    font-size: 1.5rem;
    letter-spacing: .2rem;
    text-align: center;
  }
  .prof {
    display: flex;
    margin-top: 2rem;
    div {
      display: flex;
      flex-direction: column;
      width: 50%;
      color: var(--bodycolor);
      h3 {
        padding: .5rem 2rem;
        font-size: 1.5rem;
        span {
          display: block;
        }
      }
      p {
        display: flex;
        align-items: center;
        padding: 1rem 2rem;
        height: 100%;
      }
    }
    figure {
      width: 50%;
    }
  }
  .answer {
    padding: 8%;
    background-color: var(--bodycolor);
    h3 {
      display: flex;
      align-items: center;
      p {
        padding: 1rem 0;
        color: #a5ae99;
        &:nth-child(1) {
          text-align: right;
          span {
            display: block;
          }
          n {
            font-size: 2.5rem;
            line-height: 1em;
          }
        }
        &:nth-child(2) {
          padding-left: 2rem;
          font-size: 1.5rem;
        }
      }
    }
    ol {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
        figure {
          figcaption {
            position: relative;
            bottom: unset;
            margin-top: .4rem;
          }
        }
        &>div {
          padding: 2rem 0;
          .title {
            padding-bottom: 1rem;
            font-size: 1.1rem;
          }
          .explanation {
            padding-top: 1rem;
            letter-spacing: initial;
            transition: all .5s var(--easeOutCubic);
            y {
              display: inline-block;
              margin: .1rem 0;
              background-color: #ffe59d;
            }
            sup {
              /* position: absolute; */
              font-size: 0.5rem;
            }
            .annotation {
              display: block;
              margin-top: .4rem;
              font-size: .6rem;
            }
          }
          &.copy {
            position: relative;
            .explanation {
              position: relative;
              height: 0;
              overflow: hidden;
            }
            button {
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              left: 0;
              bottom: calc(.5rem + 1em);
              z-index: 1;
              width: 100%;
              height: calc(.2rem + 1em);
              padding: .2rem 0;
              font-size: 1.5rem;
              color: var(--bodycolor);
              border: unset;
              border-radius: unset;
              cursor: pointer;
            }
            &.isOpen {
              .explanation {
                height: fit-content;
              }
              button {
                position: relative;
                bottom: 0;
                margin: 1rem 0;
                width: 100% !important;
              }
            }
          }
        }
        &:nth-child(1):not(.pl) {
          &>div {
            padding-right: 1rem;
            &.copy {
              button {
                width: calc(100% - 1rem);
              }
            }
          }
        }
        &:nth-child(2):not(.pl) {
          &>div {
            padding-left: 1rem;
            &.copy {
              button {
                left: unset;
                right: 0;
                width: calc(100% - 1rem);
              }
            }
          }
        }
        &.w2 {
          width: 100%;
          &>div {
            .explanation {
              column-count: 2;
              column-gap: 2rem;
            }
          }
        }
      }
    }

  }
}
section#voice1 {
  h2 {
    color: #a5ae99;
  }
  .bodycopy {
  }
  .prof {
    div {
      color: var(--bodycolor);
      background-color: #a5ae99;
      h3 {
        border-left: #949e87 solid 10px;
        background: linear-gradient(180deg,rgba(165, 174, 153, 1) 0%, rgba(148, 158, 135, 1) 100%);
        span {
        }
      }
      p {
      }
    }
    figure {
    }
  }
  .answer {
    h3 {
      p {
        color: #a5ae99;
      }
    }
    ol {
      li {
        figure {
        }
        &>div {
          .title {
          }
          .explanation {
            border-top: #a5ae99 solid 5px;
          }
          &.copy {
            button {
              background-color: #a9ae99;
            }
          }
        }
      }
    }

  }
}
section#voice2 {
  h2 {
    color: #baa5c4;
  }
  .bodycopy {
  }
  .prof {
    div {
      color: var(--bodycolor);
      background-color: #baa5c4;
      h3 {
        border-left: #ab94b6 solid 10px;
        background: linear-gradient(180deg,rgba(186, 165, 196, 1) 0%, rgba(171, 148, 183, 1) 100%);
        span {
        }
      }
      p {
      }
    }
    figure {
    }
  }
  .answer {
    h3 {
      p {
        color: #baa5c4;
      }
    }
    ol {
      li {
        figure {
        }
        &>div {
          .title {
          }
          .explanation {
            border-top: #baa5c4 solid 5px;
          }
          &.copy {
           button {
              background-color: #baa5c4;
            }
          }
        }
      }
    }

  }
}



@media all and (max-width: 768px) {

  section.usp {
    &>div {
    }
  }
  section.usp nav {
    margin: 0 auto 2rem;
    max-width: unset;
    ol {
      gap: 2px;
      li {
        a {
          figure {
          }
          &>div {
            display: flex;
            flex-direction: column;
            h3 {
              padding: .2rem 1rem;
              width: 100%;
              text-align: center;
              span {
                display: inline-block;
                font-size: .6rem;
              }
              n {
                font-size: 1.2rem;
                margin-left: .2rem;
              }
            }
            p {
              position: relative;
              padding: .2rem .2rem 1.5rem .2rem;
              width: 100%;
              font-size: 1rem;
              letter-spacing: .1rem;
              text-align: center;
              &::before {
                content: '';
                position: absolute;
                right: unset;
                left: calc(50% - .7rem);
                top: unset;
                bottom: 1rem;
                width: 1rem;
                height: 1px;
                background-color: var(--bodycolor);
                transition: var(--all);
                transform-origin: left center;
                transform: rotate(45deg);
              }
              &::after {
                content: '';
                position: absolute;
                right: calc(50% - .7rem);
                top: unset;
                bottom: 1rem;
                width: 1rem;
                height: 1px;
                background-color: var(--bodycolor);
                transition: var(--all);
                transform-origin: right center;
                transform: rotate(-45deg);
              }
            }
          }
        }
        &:nth-child(1) {
          a {
            &>div {
              background-color: #a5ae99;
              h3 {
                height: 100%;
                text-align: center;
                background: linear-gradient(90deg,rgba(165, 174, 153, 1) 35%, rgba(142, 152, 129, 1) 100%);
              }
            }
          }
        }
        &:nth-child(2) {
          a {
            &>div {
              background-color: #baa5c4;
              h3 {
                background: linear-gradient(90deg,rgba(186, 165, 196, 1) 35%, rgba(166, 142, 178, 1) 100%);
              }
            }
          }
        }
      }
    }
  }

  section.voice {
    padding: 0 0 2rem 0;
    h2 {
      font-size: 1.8rem;
      text-align: left;
    }
    .bodycopy {
      margin-top: -2rem;
      font-size: 1rem;
      letter-spacing: .1rem;
      text-align: right;
    }
    .prof {
      flex-direction: column;
      margin-top: 1rem;
      div {
        width: 100%;
        h3 {
          padding: .5rem;
          font-size: 1.2rem;
          span {
            display: inline-block;
            padding-right: .5rem;
          }
        }
        p {
          padding: 1rem;
          font-size: .8rem;
        }
      }
      figure {
        width: 100%;
      }
    }
    .answer {
      padding: unset;
      &>div {
        margin-top: 1rem;
      }
      h3 {
        flex-direction: column;
        p {
          padding: 1rem 0;
          &:nth-child(1) {
            padding: 1rem 0 0;
            text-align: right;
            span {
              display: inline-block;
              padding-right: .5rem;
            }
            n {
              font-size: 1.8rem;
              line-height: 1em;
            }
          }
          &:nth-child(2) {
            padding-top: unset;
            padding-left: unset;
            font-size: .85rem;
            letter-spacing: 0;
          }
        }
      }
      ol {
        flex-direction: column;
        li {
          width: 100%;
          figure {
            display: flex;
            figcaption {
            }
          }
          &>div {
            padding: 1rem 0;
            .title {
              padding-bottom: 1rem;
              font-size: .9rem;
              /* letter-spacing: 0; */
              text-align: center;
            }
            .explanation {
              padding-top: .5rem;
              font-size: .7rem;
              sup {
              }
              .annotation {
                font-size: .5rem;
              }
            }
            &.copy {
              padding: .5rem .5rem 1rem !important;
              width: 100%;
              .explanation {
              }
              button {
                bottom: calc(.5rem + 0em);
              }
              &.isOpen {
                .explanation {
                }
                button {
                }
              }
            }
          }
          &:nth-child(1):not(.pl) {
            &>div {
              padding-right: unset;
              &.copy {
                button {
                  width: 100%;
                }
              }
            }
          }
          &:nth-child(2):not(.pl) {
            &>div {
              padding-left: unset;
              &.copy {
                button {
                  width: 100%;
                }
              }
            }
          }
          &.w2 {
            &>div {
              .explanation {
                column-count: 1;
                column-gap: unset;
              }
            }
          }
        }
      }

    }
}


}