/* ==========================================================================
   機能紹介ページ (function.html) 専用スタイル
   元ページ https://sunshore.jp/katteni/function の内容・配色を
   このサイトのデザイントークンで静的に再現したもの。
   ========================================================================== */

.site-nav a.is-active { color: var(--color-brand-teal); }

/* --- Hero --- */
.func-hero {
  background: #E3F4F7;
  padding-top: var(--space-24);
  padding-bottom: var(--space-16);
  text-align: center;
}
.func-hero-inner { display: flex; flex-direction: column; align-items: center; }
.func-hero-title {
  font-size: var(--text-display);
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: var(--space-6);
  max-width: 900px;
}
.func-hl {
  background: linear-gradient(transparent 55%, var(--color-orange-light) 55%);
  padding: 0 var(--space-1);
}
.func-hero .section-lead { margin-bottom: 0; }

/* --- 機能一覧グリッド --- */
.func-list-section { background: #E3F4F7; padding-bottom: var(--space-24); }
.func-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16) var(--space-12);
}
.func-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}
.func-item-wide { grid-column: 1 / -1; max-width: 620px; }
.func-num {
  font-size: 64px;
  font-weight: 900;
  color: var(--color-brand-orange);
  line-height: 1;
  flex: none;
}
.func-item-body { flex: 1; min-width: 0; order: 1; }
.func-phone { flex: none; order: 2; }
.func-phone .phone-mock { width: 170px; }
.func-title { color: var(--color-brand-orange); font-size: var(--text-h3); font-weight: 900; margin-bottom: var(--space-3); line-height: 1.4; }
.func-highlight { font-weight: 700; color: var(--color-text-primary); margin-bottom: var(--space-3); line-height: 1.6; }
.func-desc { color: var(--color-text-primary); font-size: var(--text-small); line-height: 1.8; }

/* --- まとめセクション --- */
.func-summary { background: #E3F4F7; padding: var(--space-16) 0 var(--space-24); text-align: center; }
.func-summary-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.func-summary-lead { font-size: var(--text-h3); font-weight: 700; line-height: 1.6; }
.func-summary-punch {
  display: inline-block;
  background: #1A1A1A;
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--text-body-lg);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
  .func-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .func-item { flex-direction: column; }
  .func-item-wide { max-width: none; }
  .func-num { font-size: 44px; }
  .func-phone { align-self: center; }
}