@charset "utf-8";

._summary {
  @media (min-width: 960px) {
    table th {
      width: 20%;
    }
  }
}

/* 簡易アコーディオン */
.bl_accordion {
  details {
    margin-right: auto;
    margin-left: auto;

    &:not(:first-child) {
      margin-top: .5%;
    }

    &[open] {
      summary::after {
        transform: rotate(45deg);
      }

      ._inner {
        margin-bottom: 30px;
      }
    }

    @media screen and (max-width: 960px) {
      ._inner {
        padding: 10px;

        * {
          font-size: 15px;
        }
      }

      &[open] ._inner {
        margin-bottom: 20px;
      }
    }
  }

  summary {
    &::-webkit-details-marker {
      display: none;
    }

    color: #000;
    font-size: 20px;
    font-weight: bold;
    padding: 15px;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition-duration: 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    list-style: none;
    -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

    ._ttl {
      display: flex;
      align-items: center;
      column-gap: 15px;
      font-size: 18px;
      -webkit-user-select: auto;
          -moz-user-select: auto;
          -ms-user-select: auto;
              user-select: auto;

      &::before {
        align-self: flex-start;
        content: "Q.";
        color: #555;
      }
    }

    &::after {
      content: '＋';
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      color: #555;
      font-size: 20px;
      line-height: 0;
      font-weight: bolder;
      transition: transform .25s;
    }

    @media screen and (max-width: 960px) {
      padding: 10px 15px;
      font-size: 16px;

      &::after {
        font-size: 18px;
      }

      ._ttl {
        column-gap: 10px;
        font-size: 16px;
      }
    }
  }

  .content {
    overflow: hidden;
  }

  ._inner {
    padding: 15px 20px;
    box-sizing: border-box;
  }
}