/* ========================================
   SERVICES PAGE
======================================== */

.services-page {
  width:
    min(
      980px,
      calc(100% - 28px)
    );

  margin:
    28px auto 75px;
}



/* ========================================
   HEADER
======================================== */

.services-header {
  margin-bottom:
    18px;

  padding:
    30px 32px;

  background:
    #ffffff;

  border:
    1px solid
    #e1e7e3;

  border-radius:
    16px;

  box-shadow:
    0 10px 30px
    rgba(20, 50, 30, 0.06);
}


.services-eyebrow {
  color:
    #08733d;

  font-size:
    10px;

  font-weight:
    950;

  letter-spacing:
    0.18em;
}


.services-header h1 {
  margin:
    6px 0 5px;

  color:
    #172019;

  font-size:
    31px;

  line-height:
    1.35;

  letter-spacing:
    -0.04em;
}


.services-header p {
  max-width:
    580px;

  margin:
    0;

  color:
    #707c74;

  font-size:
    12px;

  line-height:
    1.8;
}



/* ========================================
   GRID
======================================== */

.service-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    15px;
}



/* ========================================
   CARD
======================================== */

.service-card {
  position:
    relative;

  padding:
    27px;

  overflow:
    hidden;

  background:
    #ffffff;

  border:
    1px solid
    #e1e7e3;

  border-radius:
    17px;

  box-shadow:
    0 10px 30px
    rgba(20, 50, 30, 0.05);
}


.service-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  height:
    4px;
}



/* ========================================
   CARD HEAD
======================================== */

.service-card-head {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}


.service-logo {
  width:
    55px;

  height:
    55px;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    15px;

  color:
    #ffffff;

  font-size:
    21px;

  font-weight:
    950;
}


.service-small {
  display:
    block;

  margin-bottom:
    2px;

  color:
    #919b94;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.13em;
}


.service-card h2 {
  margin:
    0;

  color:
    #172019;

  font-size:
    22px;

  line-height:
    1.35;
}



/* ========================================
   TEXT
======================================== */

.service-description {
  min-height:
    48px;

  margin:
    20px 0 22px;

  color:
    #68756c;

  font-size:
    12px;

  line-height:
    1.8;
}



/* ========================================
   BUTTON
======================================== */

.service-card-actions {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    8px;
}


.service-board-btn,
.service-activity-btn {
  min-height:
    45px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    10px;

  font-size:
    11px;

  font-weight:
    900;
}


.service-board-btn {
  color:
    #08733d;

  background:
    #ffffff;

  border:
    1px solid
    rgba(
      24,
      201,
      100,
      0.25
    );
}


.service-activity-btn {
  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #1bd169,
      #0eac51
    );
}



/* ========================================
   Uber Eats
======================================== */

.service-card-uber::before {
  background:
    #58c96a;
}


.service-logo-uber {
  background:
    #58c96a;
}



/* ========================================
   出前館
======================================== */

.service-card-demae::before {
  background:
    #e34b4b;
}


.service-logo-demae {
  background:
    #e34b4b;
}



/* ========================================
   Rocket Now
======================================== */

.service-card-rocket::before {
  background:
    #f28c28;
}


.service-logo-rocket {
  background:
    #f28c28;
}



/* ========================================
   menu
======================================== */

.service-card-menu::before {
  background:
    #f3d34a;
}


.service-logo-menu {
  color:
    #292929;

  background:
    #f3d34a;
}



/* ========================================
   その他
======================================== */

.service-card-other::before {
  background:
    #4f8ff7;
}


.service-logo-other {
  background:
    #4f8ff7;
}



/* ========================================
   MOBILE
======================================== */

@media (max-width: 640px) {

  .services-page {
    width:
      calc(100% - 20px);

    margin:
      18px auto 60px;
  }


  .services-header {
    padding:
      24px 21px;
  }


  .services-header h1 {
    font-size:
      26px;
  }


  .service-grid {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .service-card {
    padding:
      22px 20px;
  }


  .service-logo {
    width:
      49px;

    height:
      49px;

    border-radius:
      13px;

    font-size:
      18px;
  }


  .service-card h2 {
    font-size:
      20px;
  }


  .service-description {
    min-height:
      auto;

    margin:
      16px 0 19px;

    font-size:
      11px;
  }


  .service-card-actions {
    gap:
      7px;
  }


  .service-board-btn,
  .service-activity-btn {
    min-height:
      43px;

    font-size:
      10px;
  }

}