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

/* service-function */
/* ============================================ */

body.service-function {
  background: var(--bg02_c);
}

/* body */
/* ============================================ */
.function-body {
  position: relative;
  background: #fff;
  border-radius: 50px 50px 0 0;
}

/* tabs */
/* ============================================ */
.function-tabs {
  max-width: 1340px;
  margin-inline: auto;
  padding: clamp(2.5rem, 1.2864rem + 5.178vw, 7.5rem) 20px 0; /* 120-40(1920-375) */
  @media (width <= 896px) {
  }
}
.function-tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  @media (width <= 896px) {
    width: fit-content;
    gap: 10px;
  }
}
.function-tabs__link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 26px;
  border-radius: 7px;
  background: var(--bg02_c);
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1rem, 0.4955rem + 0.9009vw, 1.25rem); /* 20-16(1340-896) */
  font-weight: 500;
  color: var(--main_c);
  white-space: nowrap;
  > img {
    flex-shrink: 0;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      background: var(--main_c);
      color: #fff;
      > img {
        filter: brightness(0) invert(1);
      }
    }
  }
}

/* group（機能カテゴリ） */
/* ============================================ */
.function-group {
  max-width: 1340px;
  margin-inline: auto;
  padding: clamp(3.75rem, 4.6vw, 6.25rem) 20px 0; /* 60-100(1340-896) */
  position: relative;
  @media (width <= 896px) {
    padding: 48px 20px 0;
  }
}
.function-group__ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.375rem, -0.3908rem + 3.1532vw, 2.25rem); /* 36-22(1340-896) */
  font-weight: 700;
  color: var(--main_c);
  margin-bottom: clamp(1.25rem, 1.6vw, 2.1875rem); /* 20-35(1340-896) */
  @media (width <= 896px) {
    margin-bottom: 24px;
  }
}
.function-group__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto); /* カード内の img/ttl/txt/btn の4行、subgrid非対応ブラウザ用フォールバック */
  gap: 40px;
  @media (width <= 1025px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (width <= 600px) {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
    gap: 32px;
  }
}

/* card */
/* ============================================ */
.function-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0; /* 親.function-group__listのgapを内部行間に継承させない（間隔はmargin-topで個別指定） */
  justify-items: center;
}
.function-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 356px;
  margin-top: 29px; /* 旧flex gap25px + 旧margin-top4px */
  @media (width <= 896px) {
    margin-top: 22px; /* 旧flex gap18px + 旧margin-top4px */
  }
  padding: 20px 32px;
  border-radius: 999px;
  background: var(--main_c);
  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;
  > img {
    transform: scaleX(-1);
  }
  &:hover {
    @media (hover: hover) {
      background: var(--dark_c);
      opacity: 1;
    }
  }
}
.function-card__img {
  width: 100%;
  aspect-ratio: 420 / 318;
  border-radius: 20px;
  overflow: hidden;
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.function-card__body {
  /* .function-cardのsubgrid（img/ttl/txt/btnの4行）に子(ttl/txt)を直接参加させるため、
     このラッパー自体はボックスを生成しない（margin-top等は子側のttl/txtに個別指定） */
  display: contents;
  color: var(--font_c);
}
.function-card__ttl {
  width: 100%;
  margin-top: 25px; /* 旧.function-card__bodyのmargin-top（画像→本文間）を移設 */
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.3682rem + 1.3514vw, 1.5rem); /* 24-18(1340-896) */
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  @media (width <= 896px) {
    margin-top: 18px;
  }
}
.function-card__txt {
  width: 100%;
  margin-top: 20px; /* 旧.function-card__bodyのgap（見出し→本文間）を移設 */
  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.1;
  text-align: justify;
  @media (width <= 896px) {
    margin-top: 12px;
    line-height: 1.8;
  }
}

/* suggest（課題別の解決策） */
/* ============================================ */
.function-suggest {
  max-width: 1340px;
  width: calc(100% - 40px);
  margin-inline: auto;
  margin-top: clamp(3.75rem, 4.6vw, 6.25rem); /* 60-100(1340-896) */
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2rem); /* 20-32(1340-896) */
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  @media (width <= 896px) {
    margin-top: 60px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}
.function-suggest__icon {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #D9E7FB;
  @media (width <= 896px) {
    width: 80px;
    height: 80px;
    > img {
      width: 40px;
      height: 40px;
    }
  }
}
.function-suggest__body {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.function-suggest__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.function-suggest__label {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1rem, 0.3694rem + 1.1261vw, 1.3125rem); /* 21-16(1340-896) */
  font-weight: 500;
  color: var(--main_c);
}
.function-suggest__ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.25rem, -0.0113rem + 2.2523vw, 1.875rem); /* 30-20(1340-896) */
  font-weight: 500;
  color: var(--font_c);
  word-break: keep-all;
}
.function-suggest__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;
  color: var(--font_c);
}
.function-suggest__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 40px 32px;
  min-width: 340px;
  border-radius: 999px;
  background: var(--main_c);
  @media (width <= 896px) {
    padding: 24px 28px;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      background: var(--dark_c);
    }
  }
  > span {
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: clamp(1.125rem, 0.3683rem + 1.1261vw, 1.5rem); /* 24~18(1340~896) */
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
  }
  > img {
    flex-shrink: 0;
    transform: scaleX(-1);
  }
  @media (width <= 896px) {
    width: 100%;
    justify-content: center;
  }
}