@charset "UTF-8";

/* ===== service_hero ===== */
.service_hero {
  background-color: #F7F7F7;
}
.service_hero .service_hero_inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 60px);
  padding-top: 70px;
  padding-bottom: 70px;
}
.service_hero .service_hero_text .hero_title {
  font-weight: 700;
  font-size: 38px;
  line-height: 54px;
  color: #121212;
  margin-bottom: 24px;
}
.service_hero .service_hero_text .hero_title span {
  display: inline-block;
}
.service_hero .service_hero_text .hero_lead {
  font-size: 16px;
  line-height: 2;
  color: #121212;
}
.service_hero .service_hero_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 960px) {
  .service_hero .service_hero_inner {
    grid-template-columns: 1fr;
  }
  .service_hero .service_hero_image {
    order: 2;
  }
}
@media screen and (max-width: 750px) {
  .service_hero .service_hero_inner {
    gap: 24px;
    padding: 40px 0 20px;
  }
  .service_hero .service_hero_text .hero_title {
    font-size: 22px;
    line-height: 1.5;
  }
  .service_hero .service_hero_text .hero_lead {
    font-size: 14px;
  }
}

/* ===== service_strip ===== */
.service_strip .strip_outer {
  padding: 0 0 80px;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
}
.service_strip .strip_track {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3.5vw, 40px);
  width: max-content;
  will-change: transform;
  animation: marquee 40s linear infinite;
}
.service_strip .strip_item {
  flex: 0 0 auto;
  width: clamp(160px, 25vw, 310px);
  height: clamp(100px, 15vw, 190px);
  overflow: hidden;
  background: #fff;
}
.service_strip .strip_item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media screen and (max-width: 750px) {
  .service_strip .strip_outer {
    padding: 20px 0 40px;
  }
}

/* ===== service_intro ===== */
.service_intro .wrap {
  padding-top: 80px;
  padding-bottom: 0;
}
@media screen and (max-width: 750px) {
  .service_intro .wrap {
    padding-top: 50px;
  }
}
.service_intro p {
  max-width: 900px;
  margin-top: 12px;
}
@media screen and (max-width: 750px) {
  .service_intro p {
    font-size: 14px;
  }
}

/* ===== service_list ===== */
.service_list {
  background-color: #FBFBFB;
}
.service_list .wrap {
  padding: 80px 0 120px;
}
@media screen and (max-width: 750px) {
  .service_list .wrap {
    padding: 40px 0 80px;
  }
}
.service_list .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 30px);
  align-items: start;
}
@media screen and (max-width: 960px) {
  .service_list .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 750px) {
  .service_list .grid {
    grid-template-columns: 1fr;
  }
}
.service_list .service_card {
  display: grid;
  row-gap: 10px;
}
.service_list .service_card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #C60309;
}
.service_list .service_card p {
  font-size: 16px;
  color: #121212;
  line-height: 1.8;
}
@media screen and (max-width: 750px) {
  .service_list .service_card h3 {
    font-size: 16px;
  }
  .service_list .service_card p {
    font-size: 14px;
  }
}
.service_list .service_card .card_image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #FFFFFF;
  min-height: 0;
}
.service_list .service_card .card_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service_list .service_card .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #FCF2F1;
  color: #C60309;
  font-weight: 700;
  font-size: 16px;
  padding: 8px 50px;
  margin: 0;
  width: fit-content;
  justify-self: start;
}
.service_list .tabs__panel {
  margin: 48px 0 0;
}
@media screen and (max-width: 750px) {
  .service_list .tabs__btn:not(.is-active) {
    background-color: #E8E8E8;
    color: #888888;
  }
  .service_list .tabs__panel {
    padding-top: 16px;
  }
  .service_list .service_card .badge {
    font-size: 14px;
    padding: 6px 28px;
  }
  .service_list .service_card .card_image {
    aspect-ratio: 16 / 9;
  }
}