@charset "utf-8";
/* CSS Document */
.details {
  line-height: 2;
  border: 1px solid #B2E8F9;
  color: #28697E;
  width: 80%;
  margin: 0 auto 20px;
  &__summary {
    position: relative;
    cursor: pointer;
    background: #F3FCFF;
    margin: 0;
    padding: 10px 16px;
    &:first-child {
      margin-top: 0;
    }
    &::before {
      display: block;
      content: "";
      box-sizing: border-box;
      position: absolute;
      top: calc(50% - 6px);
      right: 16px;
      width: 6px;
      height: 6px;
      border: 6px solid transparent;
      border-left: 6px solid #28697E;
      transition: all 0.4s ease-out;
      transform-origin: 3px 6px;
      transform: rotate(90deg);
    }
    &.active::before {
      transform: rotate(-90deg);
    }
  }
  &__content {
    overflow: hidden;
    margin: 0;
    padding: 0 16px;
    * {
      transition: all 0.4s ease-out;
      line-height: 0;
      opacity: 0;
      margin: 0;
      padding: 0;
    }
    &.active {
      * {
        border-width: 0 1px 1px;
        line-height: 2;
        opacity: 1;
        padding: 16px 0;
      }
    }
  }
}