.br {
  display: inline-block;
}

.p-24 {
  padding: 2.4rem;
}

.box-shadow {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.cc-btns{
  display: flex;
  gap: 16px 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.fs-22{
  font-size: 2.2rem;
}

.pc-only {
  @media screen and (max-width:768px) {
    display: none;
  }
}

/* mv */
.mv {
  background: url(/lp/premium_support/img/mv-bg.png) no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 530px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;

  @media screen and (max-width:767px) {
    padding: 29px;
  }

  .mv-inner {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    position: relative;

    .mv-text {
      color: #fff;
      margin-bottom: 0;

      .mv-title {
        font-weight: bold;
        font-size: 5.8rem;
        line-height: 1.3;
        margin:0;
        letter-spacing: 0.04em;
        .mv-subTitle{
          font-size: 4rem;
          display: block;
          letter-spacing: 0.04em;
          @media screen and (max-width:768px) {
            font-size: 2.2rem;
            line-height: 1.2;
          }
        }
        .mv-strong{
          background: linear-gradient(90deg, #FF5F01 0%, #FCBA02 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          @media screen and (max-width:768px) {
            font-size: 4rem;
            line-height: 1.2;
            letter-spacing: 1px;
          }
        }
      }

      .mv-list {
        display: flex;
        gap: 16px;
        margin: 24px 0;
        padding-left: 0;
        flex-wrap: wrap;
        
        li {
          background: rgba(255, 255, 255, 0.2);
          padding: 8px 16px;
          line-height: 1;
          letter-spacing: 0;
        }
      }

      .mv-subTitle {
        font-size: 1.8rem;
        line-height: 1.4;
        font-weight: bold;
        margin-bottom: 0;
        letter-spacing: 0;
      }

    }

    .mv-bottom {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 24px 16px;
      align-items: center;
      .badge{
        display: none;
      }

      .mv-btn {
        display: flex;
        gap: 24px;
        margin-bottom: 0;
        flex-wrap: wrap;
        justify-content: center;

        .btn {
          box-shadow: 0px 0px 10px 0px #00000033 !important;
          border-radius: 70px !important;
          height: 79px;
          display: grid;
          place-content: center;
          font-size: 2.2rem;
          letter-spacing: 1.2px;
          line-height: 1.3;
          background-position: 92% 50%;

          &:hover {
            background-position: 95% 50%;
          }

          span {
            padding: 0 2rem;
          }

          @media screen and (max-width:767px) {
            font-size: 1.8rem;
            height: 67px;
            width: 100%;

            span {
              padding: 0 1.5rem;
              font-size: 1.6rem;
              letter-spacing: 0.97px;
            }
          }
        }
      }

      @media screen and (max-width:1100px) {
        .badge{
          display: block;
        }
        justify-content: center;
        gap: 24px;
      }
    }
  }
}

.badge {
  background-color: #fff;
  padding: 7px;
  border-radius: 4px;
  width: fit-content;
  &.pc-only {
  position: absolute;
  bottom: 0;
  right: 0;
  }

  img {
    width: 160px;
    height: auto;
  }

  @media screen and (max-width:1100px) {
    display: none;
  }

}

/* 回すだけの運用から、改善が進む運用へ */
.cc-basically {
  background-image: url(/template/img/arrow_v2.png);
}

/* CloudCREWが選ばれる理由 */
.reason-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reason-item {
  display: flex;
  gap: 2.5rem 5rem;
  padding-bottom: 10rem;

  .reason-image {
    width: 50%;

    img {
      width: 100%;
      height: auto;
      /* box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); */
      border-radius: 16px;
    }
  }

  .reason-text {
    width: calc(50% + 90px);

    .reason-detail {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      row-gap: 2.5rem;

      @media screen and (min-width:769px) {
        padding-left: 3.2rem;
      }
    }
  }

  @media screen and (max-width:768px) {
    flex-direction: column;
    max-width: 515px;
    padding-bottom: 3rem;

    .reason-image,
    .reason-text {
      width: 100%;

      img {
        display: block;
        margin-inline: auto;
      }
    }
  }
}

.reason-num {
  font-size: 6.4rem;
  font-weight: bold;
  line-height: 1;
  background: linear-gradient(90deg, #FF5F01 0%, #FCBA02 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

/* CloudCREWが選ばれる理由 */
.columns-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  @media screen and (max-width:768px) {
    grid-template-columns: repeat(1, 1fr);
  }
}
.card {
  display: flex;
  flex-direction: column;
  padding: 60px 30px;
  box-sizing: border-box;
  row-gap: 30px;
  align-items: center;

  ul {
    margin-bottom: 0;
  }

  p,
  h3 {
    padding: 0;
    margin-bottom: 0;
  }

  .card-img{
    height: 122px;
    display: grid;
    place-content: center;
    img {
      width: 100%;
    }
  }

  @media screen and (max-width:767px) {
    padding: 50px;
    flex-direction: column;
    align-items: center;
  }
}

/* ご要望に応じて設計できる支援領域 */
.accordion-button {
  background-color: #296985 !important;

  &::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
  }

  &:not(.collapsed):after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
  }
}

.accordion-item {
  .accordion-inner {
    padding: 25px;

    .accordion-item {
      border-bottom: 1px #296985 dotted;
      padding: 15px 0;
      display: flex;
      gap: 15px;

      h4 {
        padding-left: 10px;
        width: 380px;
        margin-bottom: 0;
        font-size: 1.3rem;
        flex-shrink: 0;
      }

      ul li {
        font-size: 1.3rem;
      }

      &:first-child {
        border-top: 1px #296985 dotted;
      }

      @media screen and (max-width:768px) {
        h4 {
          width: 260px;
        }
      }
    }
  }
}

/* ご利用開始までの流れ */
.cc-list-flow .cc-list-flow-item .sky-blue {
  background-color: #3B7C97;
  color: #fff;
}

.cc-list-flow .cc-list-flow-item .orange {
  background: #fcba04;
  color: #233546;
}

/* cv */
.cv {
  background: linear-gradient(90deg, #296985 0%, #378AAF 100%);
  padding: 50px 0;

  .cv-button {
    border: 2px solid #fff;
    letter-spacing: 0;
    height: 80px;
    display: grid;
    place-content: center;
    max-width: 360px;
    margin-inline: auto;

    span {
      font-size: 2.2rem;
    }

    small {
      font-size: 1.4rem;
      display: block;
    }

    &:hover {
      background-color: #fff;
      color: #ff5f01;
      border: 2px solid #ff5f01;
      background-image: url("/template/img/button/ico_arrow_cc-sub-accent.svg") !important;
    }
  }
}

/* 導入事例 */
.case_list .case_tag {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #545454;
  padding: 6px 24px;
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.75;
}