@media screen and (min-width: 960px) {
  /* PC */
  /* ----------  ---------- */
  details.accordion-item {
    --transition-duration: 300ms;
    height: fit-content;
    display: block;
  }

  details.accordion-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-top: 1.75rem;
    padding-right: 0px;
    padding-bottom: 1.75rem;
    padding-left: 0px;
  }

  details.accordion-item summary span.title {
    font-weight: 500;
  }

  details.accordion-item summary span.icon {
    display: block;
    position: relative;
  }



  details.accordion-item summary span.icon:before, 
  details.accordion-item summary span.icon:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateX(-100%);

    display: inline-block;

    width: 25px;
    min-width: 20px;
    height: 10%;
    min-height: 2.5px;
    background-color: #000000;

    border-radius: 10px;

    transition-property: all;
    transition-duration: var(--transition-duration);
    transition-timing-function: ease;
  }

  details.accordion-item summary span.icon:before {
  }

  details.accordion-item summary span.icon:after {
    transform: translateX(-100%) rotate(90deg);
  }

  details[open].accordion-item summary span.icon:before {
    transform: translateX(-100%) rotate(-90deg);

    opacity: 0;
  }
  details[open].accordion-item summary span.icon:after {
    transform: translateX(-100%) rotate(0deg);
  }


  details.accordion-item .content {
    display: block;
    padding-bottom: 1.75rem;
  }



  details::details-content {
    overflow: clip;
    max-height: 0;

    transition-property: max-height, content-visibility;
    transition-duration: var(--transition-duration), var(--transition-duration);
    transition-timing-function: ease;
    transition-behavior: allow-discrete;
  }
  details[open]::details-content {
    max-height: 100vh;
  }

}

@media screen and (max-width: 959px) {
  /* Tablet and Mobile */
  /* ----------  ---------- */
    details.accordion-item {
    --transition-duration: 300ms;

    height: fit-content;
    display: block;
  }

  details.accordion-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-top: 1.75rem;
    padding-right: 0px;
    padding-bottom: 1.75rem;
    padding-left: 0px;
  }

  details.accordion-item summary span.title {
    font-weight: 500;
  }

  details.accordion-item summary span.icon {
    display: block;
    position: relative;
  }



  details.accordion-item summary span.icon:before, 
  details.accordion-item summary span.icon:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateX(-100%);

    display: inline-block;

    width: 25px;
    min-width: 20px;
    height: 10%;
    min-height: 2.5px;
    background-color: #000000;

    border-radius: 10px;

    transition-property: all;
    transition-duration: var(--transition-duration);
    transition-timing-function: ease;
  }

  details.accordion-item summary span.icon:before {
  }

  details.accordion-item summary span.icon:after {
    transform: translateX(-100%) rotate(90deg);
  }

  details[open].accordion-item summary span.icon:before {
    transform: translateX(-100%) rotate(-90deg);

    opacity: 0;
  }
  details[open].accordion-item summary span.icon:after {
    transform: translateX(-100%) rotate(0deg);
  }


  details.accordion-item .content {
    display: block;
    padding-bottom: 1.75rem;
  }

  details::details-content {
    max-height: 0;
    overflow: clip;

    transition-property: max-height, content-visibility;
    transition-duration: var(--transition-duration), var(--transition-duration);
    transition-timing-function: ease;
    transition-behavior: allow-discrete;
  }
  details[open]::details-content {
    max-height: 100vh;
  }

}