/* Focus On Corporation - Site CSS */
/* SWELLの上書きを受けないようにfoc-siteスコープで管理 */

.foc-site {
  --foc-bg:          #F4F2EE;
  --foc-white:       #FFFFFF;
  --foc-text:        #1A1A18;
  --foc-text-sub:    #3A3A38;
  --foc-text-hint:   #888780;
  --foc-navy:        #1E3A5F;
  --foc-navy-mid:    #2E5280;
  --foc-navy-lite:   #DCE9F5;
  --foc-orange:      #E8733A;
  --foc-orange-lite: #FDF0E8;
  --foc-border:      #C8C4BC;
  --foc-border-blue: #B0C8E0;
  --foc-container:   1120px;
}

.foc-site .foc-container {
  width: min(var(--foc-container), calc(100% - 48px));
  margin-inline: auto;
}

.foc-site .foc-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px;
  align-items: start;
}

@media (max-width: 768px) {
  .foc-site .foc-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
}

/* ============================================================
   TOPページ ヒーロー直下〜Track Records直前 再設計（2026-06-08）
   すべて .foc-top-main 配下にスコープ。既存 --c-* 変数に準拠。
   ============================================================ */

/* 共通：セクション余白圧縮・見出し・リード */
.foc-top-main .foc--padded .foc__inner {
  padding-top: 64px;
  padding-bottom: 64px;
}
.foc-top-main .foc--dark.foc--padded .foc__inner {
  padding-top: 80px;
  padding-bottom: 80px;
}
.foc-top-main .foc__title {
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.25 !important;
}
.foc-top-main .foc__lead {
  font-size: 17px !important;
  line-height: 1.8 !important;
}

/* About：信頼バンド */
.foc-top-main .foc-stats {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 48px;
  border-top: 1px solid var(--c-border);
}
.foc-top-main .foc-stat {
  padding: 32px 16px 0 0;
}
.foc-top-main .foc-stat__num {
  font-size: clamp(40px, 5vw, 64px) !important;
  letter-spacing: -0.03em !important;
}
@media (max-width: 768px) {
  .foc-top-main .foc-stats { gap: 28px 24px; }
  .foc-top-main .foc-stat { flex: 0 0 calc(50% - 12px); }
}

/* Services：3カード */
.foc-top-main .foc-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.foc-top-main .foc-service {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.foc-top-main .foc-service:last-child { border-bottom: 1px solid var(--c-border); }
.foc-top-main .foc-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}
.foc-top-main .foc-service > div { margin-bottom: 2px; }
.foc-top-main .foc-service__num {
  font-size: clamp(28px, 3vw, 34px) !important;
  font-weight: 700 !important;
  color: var(--c-orange) !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 0 6px !important;
}
.foc-top-main .foc-service__name {
  font-size: 17px !important;
  line-height: 1.5 !important;
  word-break: keep-all;
  overflow-wrap: normal;
  margin: 0 !important;
}
.foc-top-main .foc-service__desc {
  font-size: 15px !important;
  line-height: 1.85 !important;
}
.foc-top-main .foc-service__link {
  margin-top: auto;
  padding-top: 6px;
  text-align: left !important;
  color: var(--c-orange) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
@media (max-width: 768px) {
  .foc-top-main .foc-services { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .foc-top-main .foc-services { grid-template-columns: 1fr; }
}

/* Pain Points：ネイビー帯＋カード */
.foc-top-main .foc--dark .foc__rule { background: rgba(255,255,255,0.2); }
.foc-top-main .foc-pains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.foc-top-main .foc-pain {
  padding: 24px 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
}
.foc-top-main .foc-pain:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.foc-top-main .foc-pain__q {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  margin: 0 0 12px !important;
}
.foc-top-main .foc-pain__a {
  color: var(--c-orange) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
@media (max-width: 768px) {
  .foc-top-main .foc-pains { grid-template-columns: 1fr; }
}

/* How We Work：4ステップカード＋橋渡し文 */
.foc-top-main .foc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.foc-top-main .foc-step {
  padding: 24px 20px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.foc-top-main .foc-step__num {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--c-orange) !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 10px !important;
}
.foc-top-main .foc-step__name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  margin: 0 0 8px !important;
}
.foc-top-main .foc-step__desc {
  font-size: 13.5px !important;
  color: var(--c-sub) !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}
.foc-top-main .foc-steps__bridge {
  margin: 28px 0 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  line-height: 1.8 !important;
}
@media (max-width: 768px) {
  .foc-top-main .foc-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .foc-top-main .foc-steps { grid-template-columns: 1fr; }
}


/* 信頼バンド：単位/ラベル視認性 + 「最大」プレフィックス（2026-06-08） */
.foc-top-main .foc-stat__num-unit { color: #3A3A38 !important; }
.foc-top-main .foc-stat__label { color: #3A3A38 !important; }
.foc-top-main .foc-stat__num-pre { margin: 0 5px 0 0; }