.section-rakusta-lp-usecase__root {
  /*@media (min-width: 0px) {*/
  /*  padding: calc(40 * var(--as1Px)) 0;*/
  /*}*/
  /*@media (min-width: 768px) {*/
  /*  padding: calc(80 * var(--as1Px)) 0;*/
  /*}*/

  .rlp-usecase-intro {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 700;
    line-height: 200%;
    letter-spacing: 0.05em;
    color: #212121;
    @media (min-width: 0px) {
      text-align: left;
      margin: calc(24 * var(--as1Px)) calc(16 * var(--as1Px));
      font-size: calc(14 * var(--as1Px));
    }
    @media (min-width: 768px) {
      text-align: center;
      margin: calc(80 * var(--as1Px)) auto;
      font-size: calc(20 * var(--as1Px));
    }
  }

  .rlp-usecase-content {

  }

  .rlp-usecase-head-list {
    padding: 0;
    list-style: none;
    justify-content: center;
    gap: calc(20 * var(--as1Px));
    margin: calc(80 * var(--as1Px)) auto;
    @media (min-width: 0px) {
      display: none;
    }
    @media (min-width: 768px) {
      display: flex;
    }
  }
  .rlp-usecase-head-item {
    box-sizing: border-box;
    width:  calc(265 * var(--as1Px));
    height: calc(168 * var(--as1Px));
    border-radius: calc(8 * var(--as1Px));

    border: calc(2 * var(--as1Px)) solid #E50051;

    background: #FFFFFF;
    * {
      color: #E50051;
    }

    &.rlp-usecase-head-item--active, &:hover {
      background: #E50051;
      * {
        color: #FFFFFF;
      }
    }

    a, p {
      cursor: pointer;
      text-decoration: none;
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap:    calc(16 * var(--as1Px));

      font-family: 'Noto Sans JP';
      font-style: normal;
      font-weight: 700;
      font-size:   calc(24 * var(--as1Px));
      line-height: 100%;
      text-align: center;

      svg {
        width:  calc(40 * var(--as1Px));
        height: calc(40 * var(--as1Px));
      }
    }
  }


  .rlp-usecase-body-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(24 * var(--as1Px));
  }
  .rlp-usecase-body-item {
    margin: 0;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(40 * var(--as1Px));
    border-radius: calc(8 * var(--as1Px));
    border-width: calc(2 * var(--as1Px));
    border-style: solid;
    border-color: var(--rlpUsecaseNodyItemTextColor);

    @media (min-width: 0px) {
      width: calc(288 * var(--as1Px));
      padding: calc(48 * var(--as1Px)) 0 calc(24 * var(--as1Px));
      display: flex;
    }
    @media (min-width: 768px) {
      width: calc(1120 * var(--as1Px));
      padding: calc(48 * var(--as1Px)) calc(80 * var(--as1Px));

      display: none;
      &.rlp-usecase-body-item--active {
        display: flex;
      }
    }

    &.rlp-usecase-body-item--instantwin {
      background: #FFF3F3;
      --rlpUsecaseNodyItemTextColor: #F96060;
    }
    &.rlp-usecase-body-item--campaign {
      background: #FFFBF0;
      --rlpUsecaseNodyItemTextColor: #FF5600;
    }
    &.rlp-usecase-body-item--lp {
      background: #F6F2FF;
      --rlpUsecaseNodyItemTextColor: #8F67DF;
    }
    &.rlp-usecase-body-item--others {
      background: #F3F8FF;
      --rlpUsecaseNodyItemTextColor: #005CD4;
    }
  }

  .rlp-usecase-body-item__title {
    margin: 0;
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-align: center;
    color: var(--rlpUsecaseNodyItemTextColor);
    /*margin: 0 0 calc(40 * var(--as1Px));*/
    @media (min-width: 0px) {
      font-size:   calc(20 * var(--as1Px));
    }
    @media (min-width: 768px) {
      font-size:   calc(40 * var(--as1Px));
    }
  }


  .rlp-benefit-list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    @media (min-width: 0px) {
      width: 100%;
      grid-template-columns: repeat(1, 1fr);
      gap: 0;
    }
    @media (min-width: 768px) {
      width: unset;
      grid-template-columns: repeat(2, 1fr);
      gap: calc(20 * var(--as1Px));
    }
  }
  .rlp-benefit-item {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    @media (min-width: 0px) {
      /*padding: calc(16 * var(--as1Px));*/
      width:  100%;
      height: max-content;
      border-bottom: calc(2 * var(--as1Px)) solid var(--rlpUsecaseNodyItemTextColor);
      border-top: calc(2 * var(--as1Px)) solid var(--rlpUsecaseNodyItemTextColor);
      &:not(:first-child) {
        border-top: none;
      }
      border-radius: unset;
    }
    @media (min-width: 768px) {
      /*padding: calc(32 * var(--as1Px)) calc(24 * var(--as1Px));*/
      width:  calc(470 * var(--as1Px));
      height: calc(200 * var(--as1Px));
      border-bottom: none;
      border-top: none;
      border-radius: calc(16 * var(--as1Px));
    }
  }

  .rlp-benefit-item__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--rlpUsecaseNodyItemTextColor);
    @media (min-width: 0px) {
      margin: calc(16 * var(--as1Px)) 0 calc(16 * var(--as1Px));
      padding: 0 calc(16 * var(--as1Px));
      gap: calc(8 * var(--as1Px));
    }
    @media (min-width: 768px) {
      margin: calc(24 * var(--as1Px)) 0 calc(12 * var(--as1Px));
      padding: 0 calc(24 * var(--as1Px));
      gap: calc(11 * var(--as1Px));
    }
    img {
      @media (min-width: 0px) {
        width:  calc(40 * var(--as1Px));
        height: calc(40 * var(--as1Px));
      }
      @media (min-width: 768px) {
        width:  calc(64 * var(--as1Px));
        height: calc(64 * var(--as1Px));
      }
    }
    h5 {
      margin: 0;
      font-family: 'Noto Sans JP';
      font-style: normal;
      font-weight: 700;
      line-height: 150%;
      letter-spacing: 0.05em;
      white-space: nowrap;
      @media (min-width: 0px) {
        font-size:   calc(16 * var(--as1Px));
      }
      @media (min-width: 768px) {
        font-size:   calc(24 * var(--as1Px));
      }
    }
    .rlp-benefit-item__toggle {
      cursor: pointer;
      user-select: none;
      @media (min-width: 0px) {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 0 0 auto;
        width: calc(24 * var(--as1Px));
      }
      @media (min-width: 768px) {
        display: none;
      }
      svg {
        transform: rotate(0deg);
        width: calc(14 * var(--as1Px));
        height: calc(14 * var(--as1Px));
        transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease;
        path {
          fill: currentColor;
        }
      }
    }
    &.rlp-benefit-item__head--open {
      .rlp-benefit-item__toggle {
        svg {
          @media (min-width: 0px) {
            transform: rotate(45deg);
            width: calc(20 * var(--as1Px));
            height: calc(20 * var(--as1Px));
          }
        }
      }
    }
  }
  .rlp-benefit-item__body {
    @media (min-width: 0px) {
      display: grid;
      padding: 0 calc(16 * var(--as1Px));
      grid-template-rows: 0fr;
      transition: padding 0.2s ease-out, grid-template-rows 0.2s ease-out;
      &.rlp-benefit-item__body--open {
        padding: calc(8 * var(--as1Px)) calc(16 * var(--as1Px)) calc(32 * var(--as1Px));
        grid-template-rows: 1fr;
      }
    }
    @media (min-width: 768px) {
      display: block;
      padding: 0 calc(24 * var(--as1Px)) calc(51 * var(--as1Px));
    }
    p {
      margin: 0;
      font-family: 'Noto Sans JP';
      font-style: normal;
      font-weight: 400;
      font-size:   calc(14 * var(--as1Px));
      letter-spacing: 0.05em;
      color: #000000;
      overflow: hidden;
      @media (min-width: 0px) {
        line-height: 180%;
      }
      @media (min-width: 768px) {
        line-height: 150%;
      }
    }
  }
}