.dib {
      display: inline-block;
    }

    .accordion-container,
    .accordion-container *,
    .accordion-container *::before,
    .accordion-container *::after {
      box-sizing: border-box;
    }

    .accordion-container a {
      color: inherit;
      text-decoration: none;
    }

    .accordion-container {
      display: flex;
      width: 100%;
      min-height: 300px;
      height: calc(100dvh - 80px);
      min-height: 480px;
      max-height: 640px;
      gap: 0px;
      container-type: inline-size;
      margin-block: 80px;
      overflow: hidden;
    }

    .accordion-item input[type="radio"] {
      display: none;
    }

    .accordion-item {
      position: relative;
      flex: 0 0 48px;
      transition: flex 0.5s cubic-bezier(0.85, 0, 0.15, 1),
        background-color 0.3s ease;
      cursor: pointer;
      overflow: hidden;
      color: #fff;
      background-color: #020823;
      border-radius: 8px;
      background-image: url(/wp-content/uploads/2024/11/test_bg_ma01.png);
      background-size: cover;
      border: 1px solid #171c33;
      margin-left: -1px;
    }

    .accordion-item::before {
      content: "";
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.9;
      background-color: #020823;
    }

    .accordion-item:not(:has(input:checked)):hover {
      flex: 0 0 72px;
      background-color: #020823;
    }

    .accordion-item:has(input:checked) {
      flex: 1 1 0;
      cursor: default;
      background-color: #020823;
      color: white;
    }

    .accordion-item label {
      display: block;
      width: 100%;
      height: 100%;
      cursor: pointer;
      position: relative;
      overflow: visible;
    }

    .accordion-item label::-webkit-scrollbar {
      display: none;
    }

    .accordion-item:has(input:checked) label {
      overflow-y: scroll;
      overflow-x: hidden;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .content-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: calc(100cqi - ((var(--items-count) - 1) * (48px)));
      height: max-content;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      padding: 64px 0px;
      box-sizing: border-box;
      opacity: 0;
      transform: translateX(120px);
      transition: transform 0.5s cubic-bezier(0.85, 0, 0.15, 1),
        opacity 0s 0.5s;
      pointer-events: none;
      overflow: hidden;
    }

    .accordion-item:has(input:checked) .content-wrapper {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
      transition: transform 0.5s cubic-bezier(0.85, 0, 0.15, 1),
        opacity 0.4s ease 0.1s;
    }

    .vertical-title {
      position: absolute;
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.2em;
      color: #fff;
      opacity: 1;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transition: transform 0.5s cubic-bezier(0.85, 0, 0.15, 1), opacity 0.4s ease 0.2s;
      pointer-events: none;
      white-space: nowrap;
      text-transform: uppercase;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: none;
      display: flex;
      align-items: center;
      padding-inline: 24px;
      letter-spacing: -0.04em;
      background: linear-gradient(to right, rgba(2, 8, 35, 1) 0%, rgb(18, 18, 56) 50%, rgba(2, 8, 35, 1) 100%);
    }

    .vertical-title::before {
      content: "";
      display: block;
      width: calc(100% - 8px);
      height: 2px;
      background: linear-gradient(to right, rgba(151, 7, 38, 0.4) 0%, rgba(151, 7, 38, 1) 50%, rgba(151, 7, 38, 0.4) 100%);
      margin-bottom: 24px;
    }

    .accordion-item:has(input:checked) .vertical-title {
      opacity: 0;
      transform: translateX(calc(-50% - 120px));
      transition: transform 0.5s cubic-bezier(0.85, 0, 0.15, 1),
        opacity 0.3s ease;
    }

    .content-wrapper .accordion-item-tag {
      position: absolute;
      color: #fff;
      background-color: #df0939;
      padding: 2px 8px;
      font-size: 12px;
      top: 32px;
      left: 0;
      font-weight: 700;
    }

    .content-wrapper .accordion-item-title {
      font-size: 48px;
      font-weight: 700;
      margin: 0;
      width: max-content;
      text-transform: uppercase;
    }

    .accordion-item-title.sp-only {
      display: none;
      color: #fff;
    }

    @keyframes infinity-scroll-left {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-100%);
      }
    }

    .scroll-infinity {
      margin-top: 20px;
    }

    @media (max-width: 767px) {
      .scroll-infinity {
        margin-top: 30px;
      }
    }

    .scroll-infinity__wrap {
      display: flex;
      align-items: center;
      overflow: hidden;
      gap: 20px;
      height: 50px;
    }

    .scroll-infinity__list {
      display: flex;
      align-items: center;
      list-style: none;
      gap: 20px;
      padding: 0;
      margin: 0;
    }

    .scroll-infinity__list--left {
      animation: infinity-scroll-left var(--scroll-duration, 90s) infinite linear 0.5s both;
    }

    .scroll-infinity__item {
      width: calc(100vw / 6);
    }

    .accordion-item-detail {
      max-width: 1080px;
      width: calc(100% - 80px);
      height: 100%;
      margin-inline: auto;
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .accordion-item-detail .accordion-item-detail-body {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .accordion-item-detail-tags {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .accordion-item-detail-tag {
      width: fit-content;
      padding: 2px 16px;
      border-radius: 999px;
      background-color: #020823;
      border: 1px solid #fff;
      color: #fff;
      margin: 0;
      font-size: 12px;
      font-weight: 700;
    }

    .accordion-item-detail-text {
      margin: 0;
      margin-top: 32px;
    }

    @media (max-width: 1080px) {
      .accordion-item-detail {
        width: calc(100% - 40px);
        margin-top: 12px;
      }
    }

    @media (max-width: 767px) {

      .accordion-item-detail-text {
        margin: 0;
      }

      .accordion-container {
        flex-direction: column;
        height: auto;
        padding-block: 64px 80px;
        max-height: none;
        min-height: auto;
      }

      .accordion-item {
        flex: none;
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-left: 0;
        margin-top: -1px;
      }

      .accordion-item:not(:has(input:checked)):hover,
      .accordion-item:has(input:checked) {
        flex: none;
      }

      .accordion-item label {
        display: grid;
        grid-template-rows: 48px 0fr;
        transition: grid-template-rows 0.5s cubic-bezier(0.85, 0, 0.15, 1);
        overflow: hidden;
      }

      .accordion-item:has(input:checked) label {
        grid-template-rows: 32px 1fr;
      }

      .vertical-title {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        writing-mode: horizontal-tb;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0 16px;
        opacity: 1;
        pointer-events: auto;
        letter-spacing: -0.08em;
        font-size: 14px;
        background: linear-gradient(to bottom, rgb(4, 10, 39) 0%, rgb(18, 18, 56) 50%, rgba(4, 10, 39) 100%);
      }

      .vertical-title::before {
        content: "";
        display: block;
        width: 2px;
        height: calc(100% - 8px);
        background: linear-gradient(to bottom, rgba(151, 7, 38, 0.4) 0%, rgb(151, 7, 38) 50%, rgba(151, 7, 38, 0.4) 100%);
        margin-right: 16px;
        margin-bottom: 0;
      }

      .accordion-item:has(input:checked) .vertical-title {
        opacity: 1;
        transform: translateY(calc(-50% - 120px));
        transition: transform 0.5s cubic-bezier(0.85, 0, 0.15, 1),
          opacity 0.3s ease;
      }

      .content-wrapper {
        position: relative;
        width: 100%;
        min-width: 0;
        height: auto;
        padding: 0;
        box-sizing: border-box;
        opacity: 0;
        transform: none;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }

      .accordion-item:has(input:checked) .content-wrapper {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition: opacity 0.5s ease 0.3s;
      }

      .content-wrapper .accordion-item-tag {
        top: 0;
      }

      .content-wrapper .accordion-item-title {
        font-size: 32px;
      }

      .accordion-item-title.sp-only {
        display: block;
        margin-top: 40px;
      }

      .accordion-item-detail {
        width: 100%;
        margin-top: 24px;
        padding-bottom: 64px;
        padding-inline: 12px;
      }
    }

    .accordion-item .accordion-item-detail .accordion-item-detail-text {
      font-size: 20px;
      letter-spacing: 0em;
      text-align: center;
      margin: 0;
    }

    @media (max-width: 1080px) {
      .accordion-item .accordion-item-detail .accordion-item-detail-text {
        font-size: 16px;
        text-align: left;
      }
    }

    .accordion-item .accordion-item-detail-title {
      color: #fff;
      font-size: 18px;
      text-align: center;
      font-weight: 700;
      margin: 0;
      margin-top: 24px;
    }

    @media (max-width: 1080px) {
      .accordion-item .accordion-item-detail-title {
        font-size: 16px;
      }
    }