@charset "utf-8";

.support__head {
   font-size: 4rem;
   font-weight: 600;
   color: var(--color-blue);
}
@media screen and (max-width: 767px) {
   .support__head {
      font-size: 2rem;
   }
}


/*=================================================================
   安心のサポート
=================================================================*/
.page_support .content{
   padding: 0!important;
}
.support-change {
   text-align: center;
   background-color: var(--color-lightblue);
   padding-block: 10rem;
}
.support-change__sub-head{
   font-weight: 600;
   line-height: calc(30 / 18);
   margin-top: 3rem;
}
.support-change__container {
   display: flex;
   gap: 9rem;
   margin-top: 10rem;
}
.support-change__section {
   position: relative;
   background-color: #ffffff;
   padding: 2rem 5rem 4rem 6rem;
   border-radius: 0.8rem;
}
.support-change__section-header {
   position: absolute;
   top: -3rem;
   left: 50%;
   transform: translateX(-50%);
   background-color: var(--color-blue);
   border-radius: 0.8rem;
   padding-block: 1.4rem 1.8rem;
   text-align: center;
   width: calc(344 / 550 * 100%);
   height: 6rem;
   font-weight: 600;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.8rem;
}
.support-change__content {
   margin-top: 3rem;
}
.support-change__emphasis {
   font-size: 3rem;
}
.support-change__normal {
   font-size: 2.2rem;
}
.support-change__list {
   display: grid;
   gap: 2.5rem;
   margin-top: 3.8rem;
   text-align: left;
   padding: 0;
}
.support-change__item {
   position: relative;
   list-style: none;
   padding-left: 2.5rem;
}
.support-change__item::before {
   content: "";
   position: absolute;
   top: 1rem;
   left: 0;
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 50%;
   background-color: var(--color-blue);
}
.support-change__item-title {
   font-size: 2.2rem;
   font-weight: 600;
   color: var(--color-blue);
   margin: 0;
}
.support-change__item-description {
   line-height: calc(30 / 17);
   margin: 0;
}

@media screen and (max-width: 767px) {

   .support-change {
      padding-block: 5.5rem 6rem;
   }
   .support-change__inner {
      padding-inline: 1.75rem;
   }
   .support-change__sub-head{
      margin-top: 1.2rem;
   }
   .support-change__container {
      gap: 6rem;
      flex-direction: column;
      margin-top: 6rem;
   }
   .support-change__section {
      padding: 3.6rem 1.2rem 2.8rem 2.3rem;
      border-radius: 0.4rem;
   }
   .support-change__section-header {
      padding-block: 1.4rem 1.3rem;
      width: calc(540 / 640 * 100%);
      border-radius: 0.4rem;
      height: 4.8rem;
      top: -2.4rem;
      gap: 0.4rem;
   }
   .support-change__emphasis {
      font-size: 2rem;
   }
   .support-change__normal {
      font-size: 1.5rem;
   }
   .support-change__content {
      margin-top: 1.5rem;
   }
   .support-change__list {
      gap: 1.2rem;
      margin-top: 2.4rem;
   }
   .support-change__item {
      padding-left: 1.8rem;
   }
   .support-change__item::before {
      width: .9rem;
      height: .9rem;
      top: 0.7rem;
   }
   .support-change__item-title {
      font-size: 1.5rem;
   }
}


/*=================================================================
   サポート体制
=================================================================*/
.support-content {
   margin-top: 10rem;
   max-width: 86rem;
   margin-inline: auto;
   text-align: center;
}
.support-content__container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   row-gap: 6rem;
   column-gap: 12.5rem;
   margin-top: 6rem;
}
/* .support-content__container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 4.5rem;
}
.support-content__item{
   width: calc(100% / 3 - 4.5rem);
} */
.support-content__title {
   font-size: 2.2rem;
   font-weight: 600;
   color: var(--color-blue);
   margin: 0.5rem 0 0;
}
.support-content__description {
   font-size: 1.6rem;
   line-height: calc(26 / 16);
   margin-top: 0.5rem;
}

@media screen and (max-width: 767px) {

   .support-content {
      margin-top: 5.5rem;
      padding-inline: 1.75rem;
      width: 100%;
   }
   .support-content__container {
      grid-template-columns: repeat(2, 1fr);
      row-gap: 2rem;
      column-gap: 2rem;
      margin-top: 3rem;
   }
   .support-content__image {
      max-width: 12rem;
   }
   .support-content__title {
      font-size: 1.6rem;
      margin-top: 0.2rem;
   }
   .support-content__description {
      font-size: 1.3rem;
      margin-top: initial;
   }
}

/*=================================================================
   導入までの流れ
=================================================================*/
.support-step {
   background-color: var(--color-lightblue);
   padding-block: 10rem 15rem;
   margin-top: 10rem;
   text-align: center;
}
.support-step__inner {
   max-width: 86rem;
   margin-inline: auto;
}
.support-step__container {
   display: grid;
   gap: 6rem;
   margin-top: 6.5rem;
}
.support-step__item {
   background-color: #fff;
   border-radius: 0.8rem;
   display: flex;
   align-items: center;
   text-align: left;
}
.support-step__item:not(:last-child) {
   position: relative;
}
.support-step__item:not(:last-child)::after {
   content: "";
   position: absolute;
   background-image: url(../img/support/support_step.png);
   background-size: contain;
   background-repeat: no-repeat;
   bottom: -3rem;
   left: 50%;
   transform: translateX(-50%);
   width: 7rem;
   height: 3rem;
}
.support-step__head {
   background-color: var(--color-blue);
   border-radius: 0.8rem 0 0 0.8rem;
   text-align: center;
   width: calc(84 / 860 * 100%);
   min-width: 8.4rem;
   height: 100%;
   display: grid;
   place-content: center;
   color: #fff;
}
.support-step__number-text {
   font-size: 1.5rem;
}
.support-step__number {
   font-size: 4rem;
   font-weight: 600;
   line-height: 1;
   margin: 0;
}
.support-step__content {
   padding: 3rem 3rem 3rem 4rem;
}
.support-step__title {
   font-size: 2.4rem;
   font-weight: 600;
   color: var(--color-blue);
   margin: 0;
}
.support-step__description {
   margin-top: 0.5rem;
}
@media screen and (max-width: 767px) {

   .support-step {
      padding-block: 5.5rem 6rem;
      margin-top: 5.5rem;
   }
   .support-step__inner {
      padding-inline: 1.75rem;
   }
   .support-step__container {
      gap: 4rem;
      margin-top: 4.75rem;
   }
   .support-step__item {
      flex-direction: column;
   }
   .support-step__item:not(:last-child)::after {
      width: 5rem;
      height: 2rem;
      bottom: -2rem;
   }
   .support-step__head {
      border-radius: 0.6rem 0.6rem 0 0;
      width: 100%;
      padding-block: 0.5rem;
   }
   .support-step__number {
      font-size: 2.5rem;
   }
   .support-step__number-text {
      font-size: 1.2rem;
   }
   .support-step__content {
      padding: 2rem 1.8rem 2.5rem 1.8rem;
   }
   .support-step__title {
      font-size: 1.8rem;
      text-align: center;
   }
   .support-step__description {
      font-size: 1.4rem;
      margin-top: 0.5rem;
   }

}