@charset "utf-8";
/* 下層共通 */

* {
  margin: 0;
  padding: 0;
}

.underPage-title {
  margin: 0 0 30px;
  padding: 10px 0 10px 15px;
  font-size: 2.4rem;
  border-left: 3px solid #1a59c2;
  font-weight: 600;
}

@media screen and (max-width: 767px) {
  .underPage-title {
    margin: 0 0 30px;
    padding: 10px 0 10px 15px;
    font-size: 1.5rem;
    border-left: 3px solid #1a59c2;
    font-weight: 600;
  }
}

.underPage-heading {
  text-align: center;
}

.underPage-heading__main {
  font-size: 4rem;
  font-weight: 600;
  color: var(--color-blue);
}
.underPage-heading__main.underPage-heading__main--middle {
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--color-base);
}

.underPage-heading__desc {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: calc(30 / 18);
  margin-top: 3rem;
}
.underPage-heading__desc.underPage-heading__desc--mainColor {
  color: var(--color-blue);
  font-size: 2.8rem;
  margin-top: 0;
}

.underPage-heading__desc.underPage-heading__desc--feature {
  margin-top: 2rem;
  font-size: 2rem;
}

@media screen and (max-width: 767px) {
   .underPage-heading__main {
      font-size: 2rem;
   }
   .underPage-heading__main.underPage-heading__main--middle {
      font-size: 2.1rem;
   }
   .underPage-heading__desc {
      font-size: 1.3rem;
      margin-top: 2rem;
   }
   .underPage-heading__desc.underPage-heading__desc--feature {
      font-size: 1.5rem;
      margin-top: 1rem;
   }
   .underPage-heading__desc.underPage-heading__desc--mainColor {
      font-size: 1.6rem;
   }
   .underPage-heading__desc.underPage-heading__desc--left {
      text-align: left;
   }
}

/* ここまで */


/* ページ上部
-------------------------------------*/
.feature-head{
   height: 460px;
   overflow: hidden;
}
.feature-head::after {
   width: 0;
   height: 0;
   border-style: solid;
   border-color: transparent transparent var(--color-lightblue) transparent;
   border-width: 0px 0px 280px 40vw;
}
.feature-head__contents{
   display: flex;
   align-items: center;
}
.feature-head__text{
   padding-right: 50px;
}
.feature-head__text .page-head__name{
   padding: 0;
}
.feature-head__link-btn .btn{
   font-size: 2.2rem;
   margin: 25px 0 0;
   width: 440px;
   height: 70px;
}
@media screen and (max-width: 767px) {
   .feature-head{
      padding: 40px 25px;
      height: auto!important;
   }
   .feature-head::after {
      border-width: 0px 0px 150px 100vw;
   }
   .feature-head__contents{
      flex-flow: column;
      text-align: left;
   }
   .feature-head__text{
      padding-right: 0;
      margin-bottom: 20px;
   }
   .feature-head__link-btn{
      width: 100%;
   }
   .feature-head__link-btn .btn{
      font-size: 1.7rem;
      width: 100%;
      height: 60px;
   }
   .feature-head__video {
      width: 100%;
      aspect-ratio: 16 / 9;
   }
   .feature-head__video iframe {
      width: 100%;
      height: 100%;
   }
}

/* 共通のページ内リンクボタン
-------------------------------------*/
.feature__anker {
   max-width: 100rem;
   margin-inline: auto;
}
.feature-list__anker {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.2rem;
   list-style: none;
}
.feature-list__anker-item {
   display: grid;
}
.feature-list__anker-link::before {
   content: "";
   display: block;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 1.4rem;
   width: 8px;
   height: 8px;
   border-top: 3px solid var(--color-blue);
   border-right: 3px solid var(--color-blue);
   transform: translateX(-50%) rotate(135deg);
}
.feature-list__anker-link {
   display: block;
   color:var(--color-blue);
   font-size: 1.8rem;
   font-weight: 500;
   text-decoration: none;
   background-color:  #fff;
   border: 1px solid var(--color-blue);
   border-radius: 0.9rem;
   padding-block: 1.6rem 2.6rem;
   text-align: center;
   position: relative;
   place-content: center;
}

@media screen and (max-width: 767px) {
   .feature__anker{
      padding: 0 20px;
   }
   .feature-list__anker {
       grid-template-columns: repeat(2, 1fr);
       margin-top: 2.3rem;
       column-gap: 0.9rem;
       row-gap: 1rem;
   }
   .feature-list__anker-link {
       font-size: 1.3rem;
       padding-block: 1.3rem 2.5rem;
   }
   .feature-list__anker-link::before {
      width: 6px;
      height: 6px;
   }
}

/* BSSとは
-------------------------------------*/
.feature-about {
   max-width: 100rem;
   margin-inline: auto;
   margin-top: 7.2rem;
}
.feature-about__image {
   max-width: 93rem;
   margin-inline: auto;
}
.feature-about__text {
   max-width: 68rem;
   margin-inline: auto;
   margin-top: 1rem;
   line-height: 1.8;
}
.feature-about__link {
   color: var(--color-blue);
   text-decoration: underline;
}

@media screen and (max-width: 767px) {
   .feature__head {
      padding-inline: 1.75rem;
      margin-top: 3rem;
   }
   .feature-about {
      max-width: 100rem;
      margin-inline: auto;
      margin-top: 4.2rem;
      padding-inline: 1.75rem;
   }
   .feature-about__image {
      max-width: 35rem;
      margin-top: 10px;
   }
   .feature-about__text {
      max-width: 100%;
      margin-top: 1rem;
   }
}


/* システム概要
-------------------------------------*/
.feature-system {
   background-color: var(--color-lightblue);
   padding-block: 7.2rem 10rem;
   margin-top: 6.6rem;
}
.feature-system__inner {
   max-width: 100rem;
   margin-inline: auto;
}
.feature-system__image {
   max-width: 77rem;
   margin-inline: auto;
   margin-top: 3rem;
}
@media screen and (max-width: 767px) {
   .feature-system {
      padding-block: 5rem 5.6rem;
      margin-top: 7rem;
   }
   .feature-system__inner {
      padding-inline: 1.75rem;
   }
   .feature-system__image {
      max-width: 100%;
      margin-inline: auto;
      margin-top: 3rem;
   }
}

/* BSSの3つのコンセプト
-------------------------------------*/
.feature-concept {
   margin-top: 8.4rem;
}
.feature-concept__anker {
   max-width: 83rem;
   margin-inline: auto;
   margin-top: 4.8rem;
}
.feature-concept__anker .feature-list__anker {
   grid-template-columns: repeat(3, 1fr);
}
.feature-concept__items {
   margin-top: 6.8rem;
   display: grid;
   gap: 6rem;
}
.feature-concept__item {
   border: 3px solid var(--color-blue);
   padding: 5.5rem 6rem;
   background-color: #fff;
   border-radius: 3rem;
}
.feature-concept__wrap {
   display: flex;
   /*align-items: flex-start;*/
   justify-content: space-between;
   column-gap: 5.5rem;
}
.feature-concept__grid {
   display: grid;
   column-gap: 5rem;
   grid-template-columns: 58rem 47rem;
   grid-template-rows: 20% 40% 1fr;
   grid-template-areas:
      "item01 item02"
      "item03 item02"
      "item04 item02";
}
.feature-concept__head {
   display: flex;
   align-items: center;
   justify-content: flex-start;
}
.item01 {
   grid-area: item01;
}
.item02 {
   grid-area: item02;
}
.item03 {
   grid-area: item03;
}
.item04 {
   grid-area: item04;
}
.feature-concept__number {
   font-size: 5.5rem;
   font-weight: 600;
   color: var(--color-blue);
   line-height: 1;
   white-space: nowrap;
}
.feature-concept__title {
   font-size: 2.8rem;
   font-weight: 600;
   margin-left: 1rem;
   line-height: 1.4;
}
.feature-concept__description {
   margin-top: 3rem;
   font-size: 1.8rem;
   line-height: calc(30 / 18);
}

/* 必要なときに必要な人へ */
.item-first .feature-concept__image {
   max-width: 48.2rem;
   display: flex;
   align-items: center;
}
.feature-check {
   display: grid;
   gap: 1rem;
   margin-top: 2rem;
}
.feature-check__item {
   position: relative;
   list-style: none;
   padding-left: 3rem;
}
.feature-check__item::before {
   content: "";
   position: absolute;
   top: 0.8rem;
   left: 0;
   width: 2.6rem;
   height: 2.2rem;
   background-image: url(../img/feature/icon_check.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

/* 調べるから知らせてくれる */
.item-second .feature-concept__wrap {
   column-gap: 2.6rem;
   flex-direction: row-reverse;
}
.item-second .feature-concept__description {
   margin-top: 2.2rem;
}
.item-second .feature-concept__content{
   width: 50%;
}
.item-second .feature-concept__image{
   width: 50rem;
}
.feature-concept__head-img {
   margin-top: 1.6rem;
   display: grid;
   column-gap: 1.5rem;
   grid-template-columns: repeat(2, 1fr);
}
.feature-concept__bottom {
   border-top: 2px solid var(--color-lightblue);
   margin-top: 3.4rem;
}
.feature-concept__bottom-text {
   font-size: 2rem;
   font-weight: 600;
   margin-top: 2.6rem;
}
.feature-concept__bottom-image {
   max-width: 106rem;
   margin-inline: auto;
   margin-top: 1.2rem;
}
.feature-concept__btn {
   margin-top: 2rem;
   margin-left: 0;
   width: 38rem;
}
@media screen and (max-width: 767px) {
   .feature-concept {
      margin-top: 4.8rem;
   }
   .feature-concept__anker {
      max-width: 90%;
      margin-top: 2rem;
   }
   .feature-concept__anker .feature-list__anker {
      grid-template-columns: 1fr;
   }
   .feature-concept__anker .feature-list__anker-link {
      padding-block: 1.5rem;
   }
   .feature-concept__anker .feature-list__anker-link::before {
      bottom: 45%;
      left: initial;
      right: 2rem;
   }
   .feature-concept__items {
      margin-top: 4.75rem;
      gap: 4rem;
      max-width: 100%;
      padding-inline: 1.75rem;
   }
   .feature-concept__item {
      padding: 2.5rem;
      border: 2px solid var(--color-blue);
      border-radius: 1.6rem;
   }
   .feature-concept__wrap {
      flex-direction: column;
      row-gap: 1.4rem;
   }
   .feature-concept__grid {
      grid-template-rows: 1fr;
      grid-template-areas: initial;
      grid-template-columns: 1fr;
   }
   .item01,
   .item02,
   .item03,
   .item04 {
      grid-area: initial;
   }
   .feature-concept__head {
      flex-direction: column;
   }
   .feature-concept__number {
      position: relative;
      font-size: 3.2rem;
      text-align: center;
   }
   .feature-concept__title {
      font-size: 2rem;
      margin-left: initial;
      margin-top: 1.2rem;
      text-align: center;
   }
   .feature-concept__description {
      margin-top: 1.5rem;
      font-size: 1.4rem;
   }
   .feature-concept__image {
      margin-top: 1rem;
      width: 25rem;
      margin-inline: auto;
   }
   .feature-concept__btn {
      margin-top: 2.9rem;
      margin-inline: auto;
      width: 100%;
   }
  /* 必要なときに必要な人へ */
   .item-first .feature-concept__image {
      max-width: 100%;
      width: auto;
   }
   .feature-check {
      display: grid;
      margin-top: 1.4rem;
   }
   .feature-check__item {
      position: relative;
      list-style: none;
      padding-left: 3rem;
      font-size: 1.4rem;
   }
   .feature-check__item::before {
      content: "";
      position: absolute;
      top: 6px;
      width: 1.664rem;
      height: 1.408rem;
   }
   /* 調べるから知らせてくれる */
   .item-second .feature-concept__wrap {
      row-gap: 1.8rem;
      flex-direction: column;
   }
   .feature-concept__head-img {
      column-gap: 0.5rem;
      margin-top: 1.8rem;
   }
   .item-second .feature-concept__content,
   .item-second .feature-concept__image{
      width: 100%;
   }
   .feature-concept__bottom {
      margin-top: 3rem;
   }
   .feature-concept__bottom-text {
      font-size: 1.3rem;
      margin-top: 1.65rem;
      text-align: center;
   }
   .feature-concept__bottom-image {
      max-width: 106rem;
      margin-inline: auto;
      margin-top: 1.2rem;
   }
   /* 運用に合わせて必要な機能を選択できる */
   .item-third .feature-concept__image {
      width: 90%;
      margin-top: 3rem;
   }
   .item-third .feature-concept__btn {
      text-align: center;
   }
}

/* BSSの機能一覧
-------------------------------------*/
.feature-function {
   margin-top: 8.4rem;
   padding-block: 8rem 9rem;
   background-color: var(--color-lightblue);
}
.feature-function__inner {
   max-width: 100rem;
   margin-inline: auto;
}
.feature-function__box-function {
   background-color: var(--color-lightblue2);
   padding-block: 3.8rem 6rem;
   margin-top: 4.6rem;
}
.feature-function__sub-title{
   font-size: 2.4rem;
   font-weight: 600;
   text-align: center;
   line-height: 1.4;
}
.feature-function__sub-title.feature-function__sub-title--schedule{
   color: var(--color-orange);
}
.feature-function__image {
   max-width: 82.4rem;
   margin-inline: auto;
   margin-top: 3rem;
}
.feature-function__box-schedule {
   margin-top: 3rem;
   background-color: #fff3db;
   padding-block: 2.8rem 4rem;
}
.schedule-list {
   max-width: 70rem;
   margin-inline: auto;
   margin-top: 1.6rem;
   list-style: none;
   display: grid;
   grid-template-columns: 18rem 21.2rem 21.9rem 9.6rem;
   grid-template-rows: repeat(3, 1fr);
   grid-template-areas:
      "item01 item02 item03 item04"
      "item05 item06 item07 item08"
      "item09 item10 item11 item12";
}
.schedule-item01 {
   grid-area: item01;
}
.schedule-item02 {
   grid-area: item02;
}
.schedule-item03 {
   grid-area: item03;
}
.schedule-item04 {
   grid-area: item04;
}
.schedule-item05 {
   grid-area: item05;
}
.schedule-item06 {
   grid-area: item06;
}
.schedule-item07 {
   grid-area: item07;
}
.schedule-item08 {
   grid-area: item08;
}
.schedule-item09 {
   grid-area: item09;
}
.schedule-item10 {
   grid-area: item10;
}
.schedule-item11 {
   grid-area: item11;
}
.schedule-list__item {
   font-size: 1.7rem;
   position: relative;
   padding-left: 1.6rem;
}
.schedule-list__item::before {
   content: "";
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 0;
   width: 3px;
   height: 3px;
   border-radius: 100px;
   background-color: var(--color-base);
}
.feature-function__anker {
   width: 54.4rem;
   margin-inline: auto;
   margin-top: 4rem;
}
.feature-function__anker .feature-list__anker {
   grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 767px) {
   .feature-function {
      padding-block: 5rem 5.6rem;
      margin-top: 7rem;
   }
   .feature-function__anker {
      max-width: 90%;
      margin-top: 2rem;
   }
   .feature-function__inner {
      padding-inline: 1.75rem;
   }
   .feature-function__box-function {
      background-color: var(--color-lightblue);
      margin-top: 3.6rem;
      padding-block: initial;
   }
   .feature-function__box-schedule {
      margin-top: 2.5rem;
      padding-block: 2rem 3.1rem;
   }
   .feature-function__sub-title {
      font-size: 1.5rem;
   }
   .schedule-list {
      max-width: 54.7rem;
      column-gap: clamp(1rem, 2vw, 3rem);
      width: fit-content;
      margin-top: 1.3rem;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-template-areas:
         "item01 item02"
         "item03 item04"
         "item05 item06"
         "item07 item08"
         "item09 item10"
         "item11 item12";
   }
   .schedule-list__item {
      font-size: 1.2rem;
      padding-left: 0.6rem;
   }
   .feature-function__image {
      margin-top: 2rem;
   }
   .feature-function__anker {
      width: 90%;
      margin-top: 3.5rem;
   }
   .feature-function__anker .feature-list__anker {
      grid-template-columns: 1fr;
   }
   .feature-function__anker .feature-list__anker-link {
      padding-block: 1.5rem;
   }
   .feature-function__anker .feature-list__anker-link::before {
      bottom: 45%;
      left: initial;
      right: 2rem;
   }
}

/* 基本機能一覧（１アカウント無償）
-------------------------------------*/
.feature-basic {
   margin-top: 8.9rem;
}
.feature-basic__title {
   font-size: 3.2rem;
   color: var(--color-blue);
   font-weight: 600;
   text-align: center;
}
.feature-basic__items {
   margin-top: 5.5rem;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   column-gap: 4rem;
   row-gap: 4.7rem;
   list-style-type: none;
}
.modal__image {
   position: relative;
   padding: 1rem;
   background-color: #fff;
   box-shadow: 0px 7px 16px 3px rgb(var(--color-blue-rgb), 0.15);
}
.modal__image img{
   aspect-ratio:353/200;
   height: 100%;
   object-fit: cover;
}
.modal__image::before {
   position: absolute;
   content:"";
   background-image: url(../img/feature/popup_btn@2x.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   width: 2.8rem;
   height: 2.8rem;
   bottom: 0.8rem;
   right: 0.8rem;
}
.modal__head {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin-top: 1.6rem;
   gap: 1rem;
}
.modal__icon {
   width: 3rem;
}
.modal__title {
   color: var(--color-blue);
   font-size: 2rem;
   font-weight: 600;
}
.modal__text {
   font-size: 1.6rem;
   margin-top: 1rem;
}

/* magnificPopupのfade */
.mfp-fade.mfp-bg {
   opacity: 0;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   transition: all .3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
   opacity: .8;
}
.mfp-fade.mfp-bg.mfp-removing {
   opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
   opacity: 0;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   transition: all .3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
   opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
   opacity: 0;
}

@media screen and (max-width: 767px){
   .feature-basic {
      margin-top: 5.4rem;
   }
   .feature-basic__title {
      font-size: 1.8rem;
   }
   .feature-basic__items {
      margin-top: 2.8rem;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 1.3rem;
      row-gap: 2.2rem;
      padding-inline: 1.75rem;
   }
   .modal__image {
      padding: 0.6rem;
   }
   .modal__image::before {
      width: 1.4rem;
      height: 1.4rem;
      bottom: 0.4rem;
      right: 0.4rem;
   }
   .modal__head {
      gap: 0.7rem;
      flex-direction: column;
      text-align: center;
   }
   .modal__icon {
      margin-inline: auto;
      width: 2rem;
   }
   .modal__title {
      font-size: 1.3rem;
   }
   .modal__text {
      font-size: 1rem;
      margin-top: 1rem;
   }
}

/* オプション機能
-------------------------------------*/
.feature-option__tit{
   font-size: 3.2rem;
}
.top-function__box{
   margin-top: 50px;
   padding: 50px 90px;
   background: var(--color-lightblue);
   border-radius: 34px;
}
.top-function__tit{
   font-size: 2.7rem;
   text-align: center;
}
.top-function__subtit{
   font-weight: 700;
   margin: 8px auto 20px;
}
.top-function__list{
   display: flex;
   flex-wrap: wrap;
}
.top-function__item{
   width: 32.5%;
   margin-bottom: 1.5%;
}
.top-function__link{
   display: flex;
   align-items: center;
   text-decoration: none;;
   width: 100%;
   height: 100%;
   padding: 10px 15px 10px 30px;
   background: #fff;
   border-radius: 14px;
   box-shadow: 0px 7px 16px 3px rgb(var(--color-blue-rgb), 0.15);
}
@media (hover: hover) {
   .top-function__link:hover{
      box-shadow: 0px 0px 2px 0px rgb(var(--color-blue-rgb), 0.15);
   }
   .top-function__link:hover .top-function__link-tit{
      color: var(--color-blue);
   }
}
@media print, screen and (min-width: 768px) {
   .top-function__item:nth-child(3n-1){
      margin-left: 1.25%;
      margin-right: 1.25%;
   }
}
.top-function__img{
   width: 45px;
}
.top-function__link-tit{
   flex: 1;
   color: var(--color-base);
   font-weight: 500;
   line-height: 1.3;
   text-align: left;
   font-size: 2rem;
   padding-left: 20px;
   margin: 1em 0;
}
.dan2 .top-function__link-tit{
  margin: 10px 0;
  font-size: .95em;
}
.top-function__free{
  position: relative;
}
.top-function__free::after{
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  margin: auto;
  content: "";
  width: 70px;
  height: 70px;
  background: url("../img/common/icon_plus.png");
  background-size: cover;
}
.top-function__option{
  margin-top: 30px;
  background: var(--color-lightblue2);
}
.top-function__option .top-function__tit{
  margin-bottom: 30px;
}
.top-function__more-tit{
  font-weight: 700;
  font-size: 2.2rem;
  margin: 60px 0 25px;
}
@media screen and (max-width: 767px) {
   .top-function{
      padding: 0 20px 50px;
   }
   .feature-option__tit{
      font-size: 1.8rem;
   }
  .top-function__box{
     padding: 30px 15px;
     margin-top: 20px;
     border-radius: 16px;
  }
  .top-function__tit {
     font-size: 1.8rem;
  }
  .top-function__list{
     border-radius: 10px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0px 7px 16px 3px rgb(var(--color-blue-rgb), 0.15);
  }
  .top-function__item{
     width: calc(100% / 3);
     margin: 0;
  }
  .top-function__link{
     position: relative;
     border-radius: 0;
     box-shadow: none;
     padding: 12px 5px;
     flex-flow: column;
     justify-content: center;
     border-top: 1px solid #f2f6fb;
  }
  .top-function__item:nth-child(-n+3) .top-function__link{
     border-top: 0;
  }
  .top-function__item:nth-child(3n-1) .top-function__link::before,
  .top-function__item:nth-child(3n-1) .top-function__link::after{
     content: "";
     position: absolute;
     top: 0;
     width: 1px;
     height: 100%;
     background: #f2f6fb;
  }
  .top-function__item:nth-child(3n-1) .top-function__link::before{
     left: 0;
  }
  .top-function__item:nth-child(3n-1) .top-function__link::after{
     right: 0;
  }
  .top-function__img{
     width: 35%;
  }
  .top-function__link-tit{
     flex: none;
     padding: 0;
     margin: 10px 0 0;
     font-size: 1.2rem;
     line-height: 1.2;
     text-align: center;
  }
  .dan2 .top-function__link-tit{
     font-size: 1.2rem;
  }
  .top-function__free::after{
     width: 45px;
     height: 45px;
     bottom: -31px;
  }
  .top-function__option .top-function__tit{
     margin: 0 10px 15px;
     text-align: center;
     font-size: 1.4rem;
     line-height: 1.5;
  }
  .top-function__more-tit{
     font-size: 1.4rem;
     margin: 30px 0 20px;
  }
}

.feature-option {
  margin-top: 9.4rem;
}

.feature-option__bottom{
  margin-top: 4rem;
  text-align: center;
  font-size: 2rem;
}

@media screen and (max-width: 767px) {
  .feature-option {
    margin-top: 5.5rem;
    padding-inline: 1.75rem;
  }

  .feature-option__bottom{
    margin-top: 3rem;
    font-size: 1.4rem;
  }
}

/* ---------------
乗務員向けスマホアプリ
--------------- */

.feature-app {
  margin-top: 7.4rem;
}

.feature-app__images {
  margin-top: 3.6rem;
  max-width: 61rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.feature-app__image {

}
@media screen and (max-width: 767px) {
   .feature-app {
      margin-top: 5rem;
      padding-inline: 1.75rem;
      padding-bottom: 3rem;
   }
   .feature-app__images {
      margin-top: 3.4rem;
      width: 100%;
      max-width: 30.5rem;
      gap: 0.9rem;
   }
}