/* ============================================================
   機能一覧 (function.html) — screen-specific styles
   ============================================================ */
.function {
  width: 1440px;
  max-width: 100%;
  margin-inline: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 90px 0 100px;
}
.function__category {
  width: 1000px;
  max-width: 100%;
}
.function__category-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
  padding-bottom: 40px;
}
.function__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 32px;
}

.function-card {
  background: var(--bg-quaternary);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.function-card--single { width: calc((100% - 64px) / 3); }
.function-card__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text-primary);
  text-align: center;
  width: 100%;
}
.function-card__title--2line { height: 70px; display: flex; align-items: center; justify-content: center; }
.function-card__icon {
  width: 90px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.function-card__icon img { max-width: 90px; max-height: 80px; width: auto; height: auto; }
.function-card__desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  width: 100%;
}

@media (max-width: 1040px) {
  .function { width: 100%; padding-inline: 24px; }
  .function__category-title { font-size: clamp(24px, 3.4vw, 30px); }
  .function-card { padding: 3.07vw; }
  .function-card__title { font-size: clamp(17px, 2.2vw, 22px); }
}

@media (max-width: 935px) {
  .function-card__title--2line br { display: none; }
}

/* ============================================================
   SP layout (max-width: 768px)
   Figma: Header → PageHeading → 機能一覧本体(plan) → Breadcrumb → CTA → Footer
   （Breadcrumbの位置がデスクトップ=page-heading直後 と異なり本体の後ろに移動する）
   ============================================================ */
@media (max-width: 768px) {

  body { display: flex; flex-direction: column; }
  .breadcrumb { order: 1; }
  .cta { order: 2; }
  .footer { order: 3; }
  
  /* ---- function セクション：固定1440幅→流動化 ---- */
  .function {
    width: 100%;
    padding: 64px clamp(16px, 3.4vw, 24px);
  }
  .function__category { width: 100%; }

  /* ---- カード：3カラムグリッド→1カラム ---- */
  .function__cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* ---- カード内部：中央揃え縦積み→アイコン+タイトル横並び、説明文は下に折返し ---- */
  .function-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 24px 20px;
    padding: 20px 24px 24px;
  }
  .function-card--single { width: 100%; }
  .function-card__icon { order: 1; width: 56px; height: 50px; }
  .function-card__icon img { max-width: 56px; max-height: 50px; }
  .function-card__title { order: 2; flex: 1; width: auto; text-align: left; font-size: 16px; }
  .function-card__title--2line { height: auto; justify-content: flex-start; }
  .function-card__desc { order: 3; flex-basis: 100%; width: 100%; text-align: left; font-size: 15px; line-height: 1.6; }

  /* 「設定ファイルアクセス防止」はSPでは1行に収まる（Figma実測）ため、
     デスクトップ用の明示的な改行のみ非表示にする */
  .function-card__br--sp-hide { display: none; }
}