@import url(./global/_variable.css);

/* service-function-detail（機能詳細ページ共通レイアウト） */
/* ============================================ */

/* function-detail-hero */
/* ============================================ */
.function-detail-hero {
  position: relative;
  overflow: visible;
  padding-block: clamp(8.75rem, 13.51vw + 1.183rem, 12.5rem) 60px; /* 200-140(1340-896) */
  background-color: #EDF2F9; /* department等の下層詳細ページと同じ薄い青背景 */
  @media (width <= 896px) {
    padding-block: 120px 40px;
  }
}
.function-detail-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  @media (width <= 896px) {
    flex-direction: column-reverse;
    gap: 30px;
  }
}
.function-detail-hero__text {
  max-width: 600px;
  flex-shrink: 0;
  @media (width <= 896px) {
    width: 100%;
  }
}
.function-detail-hero__label {
  margin-bottom: 8px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1rem, 0.7477rem + 0.4505vw, 1.125rem); /* 18~16(1340~896) */
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--main_c);
}
.function-detail-hero__ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.75rem, -0.268rem + 3.6036vw, 2.75rem); /* 44~28(1340~896) */
  font-weight: 700;
  line-height: 1.5;
  color: var(--font_c);
  word-break: keep-all;
}
.function-detail-hero__lead {
  margin-top: 20px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.6227rem + 0.4505vw, 1rem); /* 16~14(1340~896) */
  font-weight: 500;
  line-height: 2;
  color: var(--font_c);
  word-break: keep-all;
}
.function-detail-hero__cta {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  @media (width <= 896px) {
    flex-direction: column;
    gap: 14px;
  }
}
.function-detail-hero__cta-btn {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 32px;
  border-radius: 999px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1rem, 0.7477rem + 0.4505vw, 1.125rem); /* 18~16(1340~896) */
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.function-detail-hero__cta-btn--download {
  background: var(--point_c);
  box-shadow: 0 0 7.379px var(--point_c);
  &:hover {
    @media (hover: hover) {
      background: var(--dark_c);
      opacity: 1;
      box-shadow: 0 0 7.379px var(--dark_c);
    }
  }
}
.function-detail-hero__cta-btn--contact {
  background: var(--main_c);
  box-shadow: 0 0 7.379px rgba(6, 54, 153, 0.4);
  &:hover {
    @media (hover: hover) {
      background: var(--dark_c);
      opacity: 1;
      box-shadow: 0 0 7.379px var(--dark_c);
    }
  }
}
.function-detail-hero__img {
  display: block;
  flex-shrink: 0;
  width: 40vw;
  max-width: 544px;
  height: auto;
  border-radius: 20px;
  @media (width <= 896px) {
    width: 100%;
  }
}

/* function-detail-features */
/* ============================================ */
.function-detail-features {
  padding-block: clamp(3.75rem, 2.6295rem + 2.9279vw, 5.625rem); /* 90~60(1920~896) */
  background-color: #FFF;
  @media (width <= 896px) {
    padding-block: 60px;
  }
}
.function-detail-features__inner {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 20px;
}
.function-detail-features__head {
  text-align: center;
  margin-bottom: 60px;
  @media (width <= 896px) {
    margin-bottom: 40px;
  }
}
.function-detail-features__head-en {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1rem, 0.7477rem + 0.4505vw, 1.25rem); /* 20~16(1340~896) */
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--main_c);
}
.function-detail-features__head-ja {
  margin-top: 10px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.5rem, 0.7455rem + 1.8018vw, 2.25rem); /* 36~24(1340~896) */
  font-weight: 700;
  color: var(--font_c);
  word-break: keep-all;
}
.function-detail-features__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px 60px;
  @media (width <= 896px) {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.function-detail-features__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.function-detail-features__item-img {
  display: block;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--bg02_c);
  border-radius: 50%;
}
.function-detail-features__item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.6205rem + 0.9009vw, 1.375rem); /* 22~18(1340~896) */
  font-weight: 700;
  line-height: 1.6;
  color: var(--font_c);
  word-break: keep-all;
}
.function-detail-features__item-txt {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.6227rem + 0.4505vw, 1rem); /* 16~14(1340~896) */
  font-weight: 500;
  line-height: 1.9;
  color: var(--font_c);
}

/* function-detail-change（導入後の変化 BEFORE/AFTER） */
/* ============================================ */
.function-detail-change {
  padding-block: clamp(3.75rem, 2.6295rem + 2.9279vw, 5.625rem); /* 90~60(1920~896) */
  background-color: var(--bg02_c);
  @media (width <= 896px) {
    padding-block: 60px;
  }
}
.function-detail-change__inner {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 20px;
}
.function-detail-change__head {
  text-align: center;
  margin-bottom: 60px;
  @media (width <= 896px) {
    margin-bottom: 40px;
  }
}
.function-detail-change__head-en {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1rem, 0.7477rem + 0.4505vw, 1.25rem); /* 20~16(1340~896) */
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--main_c);
}
.function-detail-change__head-ja {
  margin-top: 10px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.5rem, 0.7455rem + 1.8018vw, 2.25rem); /* 36~24(1340~896) */
  font-weight: 700;
  color: var(--font_c);
  word-break: keep-all;
}
.function-detail-change__scene {
  margin-top: 16px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.6205rem + 0.9009vw, 1.375rem); /* 22~18(1340~896) */
  font-weight: 700;
  color: var(--font_c);
  word-break: keep-all;
}
.function-detail-change__list {
  display: flex;
  flex-direction: column;
  gap: 50px;
  @media (width <= 896px) {
    gap: 32px;
  }
}
.function-detail-change__item {
  display: flex;
  align-items: center;
  gap: 50px;
  @media (width <= 1025px) {
    gap: 30px;
  }
  @media (width <= 896px) {
    flex-direction: column;
    gap: 20px;
  }
  &--after {
    flex-direction: row-reverse;
    @media (width <= 896px) {
      flex-direction: column;
    }
  }
}
.function-detail-change__item-img {
  display: block;
  width: 45%;
  flex-shrink: 0;
  aspect-ratio: 7 / 5;
  object-fit: cover;
  border-radius: 20px;
  @media (width <= 896px) {
    width: 100%;
  }
}
.function-detail-change__item-body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  padding: 32px;
  border-radius: 20px;
  @media (width <= 896px) {
    width: 100%;
  }
}
.function-detail-change__item-label {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.6205rem + 0.9009vw, 1.375rem); /* 22~18(1340~896) */
  font-weight: 700;
  color: var(--font_c);
}
.function-detail-change__item--after .function-detail-change__item-label {
  color: var(--main_c);
}
.function-detail-change__item-txt {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.6227rem + 0.4505vw, 1rem); /* 16~14(1340~896) */
  font-weight: 500;
  line-height: 1.9;
  color: var(--font_c);
  text-align: justify;
}

/* function-detail-related */
/* ============================================ */
.function-detail-related {
  padding-block: clamp(3.75rem, 2.6295rem + 2.9279vw, 5.625rem); /* 90~60(1920~896) */
  background-color: #FFF;
}
.function-detail-related__inner {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 20px;
  text-align: center;
}
.function-detail-related__head {
  margin-bottom: 40px;
}
.function-detail-related__head-en {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1rem, 0.7477rem + 0.4505vw, 1.25rem); /* 20~16(1340~896) */
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--main_c);
}
.function-detail-related__head-ja {
  margin-top: 10px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.5rem, 0.7455rem + 1.8018vw, 2.25rem); /* 36~24(1340~896) */
  font-weight: 700;
  color: var(--font_c);
  word-break: keep-all;
}
.function-detail-related__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.function-detail-related__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 40px;
  border-radius: 999px;
  background: var(--main_c);
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.8636rem + 0.4505vw, 1.5rem); /* 24~18(1340~896) */
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  &:hover {
    @media (hover: hover) {
      background: var(--dark_c);
      opacity: 1;
    }
  }
}

/* ページごとの機能数の違いによるグリッド列数の調整 */
/* ============================================ */
.service-function-alcohol-check .function-detail-features__list,
.service-function-digital-key .function-detail-features__list {
  grid-template-columns: repeat(3, 1fr); /* 特長が5件（3+2）のため3列に */
  @media (width <= 896px) {
    grid-template-columns: 1fr;
  }
}
.service-function-vehicle-utilization .function-detail-features__list,
.service-function-alcohol-interlock .function-detail-features__list,
.service-function-vehicle-management .function-detail-features__list {
  grid-template-columns: repeat(3, 1fr); /* 特長が3件のため3列に */
  @media (width <= 896px) {
    grid-template-columns: 1fr;
  }
}