/* =====================================================
   focus.css — FOCUSページ専用
   ===================================================== */

/* ---- Section head ---------------------------------- */
.fc-section-head .section-head {
  margin-bottom: var(--sp-32);
}
.fc-section-desc {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-top: 8px;
}

/* ---- FEATURED HERO --------------------------------- */
.fc-hero {
  border-top: 1px solid #e8e8e8;
}
.fc-hero-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--sp-32) 64px;
  color: #000;
  text-decoration: none;
}
.fc-hero-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f0f0f0;
}
.fc-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.fc-hero-link:hover .fc-hero-img img {
  transform: scale(1.03);
}
.fc-hero-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fc-hero-title {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.55;
  color: #000;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s;
}
.fc-hero-link:hover .fc-hero-title {
  text-decoration-color: #000;
}
.fc-hero-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #999;
  order: -1; /* date before title */
}
.fc-hero-excerpt {
  font-size: 15px;
  line-height: 1.85;
  color: #555;
}
.fc-hero-more {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #000;
  padding-bottom: 2px;
  align-self: flex-start;
  transition: opacity 0.2s;
}
.fc-hero-link:hover .fc-hero-more {
  opacity: 0.55;
}

/* ---- CATEGORY BADGES ------------------------------- */
.fc-cat {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  white-space: nowrap;
  display: inline-block;
  line-height: 1.6;
}
/* hero内バッジは小さめに */
.fc-hero-content .fc-cat {
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  align-self: flex-start;
}

.fc-cat--tech      { background: #000;     color: #fff; }
.fc-cat--ux-design { background: #3c3c3c;  color: #fff; }
.fc-cat--ai        { background: #000;     color: #fff; }
.fc-cat--gitlab    { background: #555;     color: #fff; }
.fc-cat--career    { background: #5c5c5c;  color: #fff; }
.fc-cat--culture   { background: #777;     color: #fff; }

/* ---- TABS ------------------------------------------ */
.fc-tabs-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-32);
  border-top: 1px solid #e8e8e8;
}
.fc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e8e8e8;
  padding-top: 40px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fc-tabs::-webkit-scrollbar { display: none; }
.fc-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #666;
  padding: 12px 20px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.fc-tab:hover {
  color: #000;
}
.fc-tab.is-active {
  color: #000;
  border-bottom-color: #000;
}

/* ---- CARD GRID ------------------------------------- */
.fc-grid-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px var(--sp-32) 48px;
}
.fc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.fc-grid > li { display: contents; }

/* ---- CARD ------------------------------------------ */
.fc-card {
  display: block;
  color: #000;
  text-decoration: none;
}
.fc-card[hidden] {
  display: none;
}
.fc-card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f0f0f0;
  margin-bottom: 18px;
}
.fc-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.fc-card:hover .fc-card-thumb img {
  transform: scale(1.05);
}
.fc-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.fc-card-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #aaa;
}
.fc-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: opacity 0.2s;
}
.fc-card:hover .fc-card-title {
  opacity: 0.65;
}

/* ---- LOAD MORE ------------------------------------- */
.fc-load-more-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-32) 120px;
  display: flex;
  justify-content: center;
}
.fc-load-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 48px;
  border: 1px solid #000;
  background: transparent;
  color: #000;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.fc-load-more:hover {
  background: #000;
  color: #fff;
}
.fc-load-more[hidden] {
  display: none;
}

/* ---- RESPONSIVE ------------------------------------ */
@media (max-width: 960px) {
  .fc-hero-link {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 48px;
  }
  .fc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
  }
}

@media (max-width: 768px) {
  .fc-grid-wrap {
    padding: 40px 24px 40px;
  }
  .fc-load-more-wrap {
    padding: 0 24px 80px;
  }
  .fc-tabs-wrap {
    padding: 0 24px;
  }
  .fc-tab {
    font-size: 13px;
    padding: 12px 14px;
  }
}

@media (max-width: 600px) {
  .fc-hero-link {
    padding: 32px 24px 40px;
  }
  .fc-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* =====================================================
   記事詳細ページ（.fa-* = focus article）
   ===================================================== */

/* ---- コンテナ（WORKS詳細と同じ 1200px 幅） -------- */
.fa-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-32); }

/* ---- HERO（タイトル先行＋全幅KV） ------------------ */
.fa-hero { padding: 48px 0 0; }
.fa-hero-meta { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; }
.fa-hero-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--gray-64);
}
.fa-hero-title {
  font-size: 28px;
  font-weight: 700; line-height: 1.5; letter-spacing: 0.05em;
  margin: 0 0 32px; color: var(--black);
}
.fa-hero-kv {
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px;
  background: var(--gray-4);
}
.fa-hero-kv img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 本文 共通タイポ ------------------------------- */
.fa-body { font-size: 18px; line-height: 2.0; letter-spacing: 0.03em; color: #1a1a1a; }
.fa-body p { margin: 0 0 28px; }
.fa-body a {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 3px; font-weight: 700;
}
.fa-body a:hover { opacity: 0.7; }
.fa-body strong { font-weight: 700; }

/* ---- 参加者紹介（座談会など・一覧カード） ---------- */
.fa-cast {
  max-width: 760px; margin: 8px auto 0;
  padding: 28px 32px; background: var(--gray-4); border-radius: 14px;
  font-size: 15px; line-height: 1.9; letter-spacing: 0.02em; color: #333;
}
.fa-cast-title { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: var(--black); margin: 0 0 12px; }
.fa-cast ul { margin: 0; padding-left: 1.3em; }
.fa-cast li { margin-bottom: 6px; }
.fa-cast li:last-child { margin-bottom: 0; }
.fa-cast li b { font-weight: 700; color: var(--black); }
.fa-cast p { margin: 16px 0 0; }
.fa-cast p b { font-weight: 700; color: var(--black); }
@media (max-width: 768px) { .fa-cast { padding: 22px 20px; } }

/* ---- 5人前後のキャスト（写真付きカード） ----------- */
.fa-cast-item { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.fa-cast-item + .fa-cast-item { border-top: 1px solid var(--gray-16); }
.fa-cast-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.fa-cast-meta { flex: 1; min-width: 0; }
.fa-cast-name { font-size: 15px; font-weight: 700; color: var(--black); margin: 0; }
.fa-cast-role { font-size: 13px; color: var(--gray-64); margin: 2px 0 0; }

/* ---- 対談（インタビュー）レイアウト ----------------- */
.fa-talk-sec { padding: 8px 0 16px; }
/* 読み物（.fa-sec-main）と同じ列に揃える */
.fa-talk-sec .fa-wrap {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 40px;
}
.fa-talk {
  grid-column: 2;
  max-width: 840px;
  margin: 0;
}
@media (max-width: 768px) {
  .fa-talk-sec .fa-wrap { display: block; }
  .fa-talk { max-width: none; }
}
.fa-talk-heading {
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.55; letter-spacing: 0.02em;
  color: var(--black); margin: 72px 0 40px; padding-top: 40px; border-top: 1px solid var(--gray-16);
}
.fa-talk-heading:first-child { margin-top: 24px; padding-top: 0; border-top: none; }

.fa-turn { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: baseline; margin: 0 0 24px; }
/* 左カラム：名前のみ（アイコンは非表示） */
.fa-turn-speaker { display: block; }
.fa-turn-photo { display: none; }
/* 特異度バグ修正：.fa-body p { margin: 0 0 28px } に勝つよう .fa-body を付与 */
.fa-body .fa-turn-name { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--black); margin: 0; text-align: left; line-height: 1.45; }
.fa-turn-content { padding-top: 0; }
.fa-turn-body { font-size: 18px; line-height: 2.0; letter-spacing: 0.03em; color: #1a1a1a; }
.fa-turn-body p { margin: 0 0 24px; }
.fa-turn-body p:last-child { margin-bottom: 0; }

/* 聞き手の質問：トーンのみ控えめにして区別 */
.fa-turn--q .fa-turn-name { color: var(--gray-64); }
.fa-turn--q .fa-turn-body { color: var(--gray-64); font-weight: 500; }

@media (max-width: 768px) {
  .fa-turn { grid-template-columns: 1fr; gap: 8px; }
  .fa-turn-name { font-size: 13px; }
}

/* ---- リード＋登場人物（記事冒頭・全幅） ------------- */
.fa-lead-sec { padding: 56px 0 64px; }
.fa-lead-sec .fa-wrap {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 40px;
}
.fa-body .fa-lead {
  grid-column: 2;
  max-width: 840px;
  font-size: 18px; line-height: 1.95; font-weight: 500;
  color: var(--black); margin: 0 0 44px; text-align: left;
}
.fa-lead-sec .fa-profiles { grid-column: 1 / -1; }
@media (max-width: 768px) {
  .fa-lead-sec .fa-wrap { display: block; }
  .fa-body .fa-lead { margin: 0 0 44px; }
}

/* ---- 関連キーワード（タグチップ） ------------------ */
.fa-tags { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: 760px; margin: 28px auto 0; }
.fa-tags-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--gray-64); margin-right: 4px; }
.fa-tags span.fa-tag { font-size: 12px; color: var(--gray-64); border: 1px solid var(--gray-16); border-radius: 999px; padding: 5px 14px; line-height: 1.5; }

/* ---- 本文セクション（左:番号 / 右:見出し＋本文） ---- */
.fa-section { padding: 64px 0; border-top: 1px solid var(--gray-16); }
.fa-section .fa-wrap {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 40px; align-items: start;
}
.fa-sec-no {
  font-family: 'DM Sans', sans-serif;
  font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em;
  color: var(--accent); margin: 0;
}
.fa-sec-main { max-width: 840px; }
.fa-sec-main > :last-child { margin-bottom: 0; }
.fa-sec-title {
  font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; line-height: 1.5;
  letter-spacing: 0.02em; margin: 0 0 24px; color: var(--black);
}
.fa-sec-main h3 {
  font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: 0.03em;
  margin: 40px 0 16px; color: var(--black);
}
.fa-sec-main ul,
.fa-sec-main ol { margin: 0 0 28px; padding-left: 1.5em; }
.fa-sec-main li { margin-bottom: 10px; }

/* ---- 図版（本文中の画像＋キャプション） ------------- */
.fa-figure { margin: 40px 0; }
.fa-figure img { width: 100%; display: block; border-radius: 10px; background: var(--gray-4); }
.fa-figure figcaption {
  font-size: 13px; line-height: 1.7; letter-spacing: 0.03em;
  color: var(--gray-64); margin-top: 12px;
}

/* ---- インタビュー Q&A（記号を廃し、左罫＋色で表現） -- */
.fa-qa {
  margin: 36px 0; padding: 4px 0 4px 28px;
  border-left: 2px solid var(--gray-16);
}
.fa-q {
  font-size: 20px; font-weight: 700; line-height: 1.65; letter-spacing: 0.02em;
  color: var(--black); margin: 0 0 14px;
}
.fa-a { margin: 0; color: #333; }

/* ---- 引用・本文中の発言ブロック ------------------- */
.fa-quote {
  margin: 24px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--gray-16);
  font-size: 16px; line-height: 1.9; letter-spacing: 0.02em;
  font-weight: 500; color: var(--gray-64);
}

/* ---- 登場人物プロフィール（カード・複数は2列） ------ */
.fa-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 800px; margin: 0 auto 48px; }
/* 座談会など3名はコンテナ幅で3カラム */
.fa-profiles--3 { grid-template-columns: repeat(3, 1fr); max-width: var(--container); }
@media (max-width: 900px) { .fa-profiles--3 { grid-template-columns: 1fr; max-width: 760px; } }
/* 語り手が1名のときは中央に1枚 */
.fa-profiles--1 { grid-template-columns: 1fr; max-width: 600px; }
.fa-profile {
  display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: start;
  padding: 22px 24px; background: var(--gray-4); border-radius: 12px;
}
.fa-profile-photo {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  background-color: var(--gray-16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='40' r='15' fill='%23c8c8c8'/%3E%3Cpath d='M50 60c-16 0-29 13-29 29v8h58v-8c0-16-13-29-29-29z' fill='%23c8c8c8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center 22%; background-size: 78% auto;
}
.fa-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-profile-name { font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: 0.03em; margin: 0 0 6px; color: var(--black); }
.fa-profile-name span { font-size: 12.5px; font-weight: 500; color: var(--gray-64); margin-left: 8px; }
.fa-profile-role { font-size: 13.5px; font-weight: 700; line-height: 1.65; letter-spacing: 0.02em; color: var(--gray-64); margin: 0; }
.fa-profile-bio { font-size: 14.5px; line-height: 1.85; letter-spacing: 0.02em; color: #444; margin: 10px 0 0; }

/* ---- クロージング（記事末の締めメッセージ・全幅中央） */
.fa-closing { padding: 72px 0 48px; text-align: center; }
.fa-closing-mark { width: 48px; height: 4px; background: var(--accent); margin: 0 auto 28px; }
.fa-closing-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--gray-64); margin: 0 0 20px;
}
.fa-body .fa-closing-text {
  max-width: 760px; margin: 0 auto;
  font-size: 16px; line-height: 1.9; letter-spacing: 0.02em;
  font-weight: 500; color: var(--black); text-align: left;
}

/* ---- 写真ギャラリー（イベントレポート用） ---------- */
.fa-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0; }
.fa-gallery figure { margin: 0; }
.fa-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--gray-4); display: block; }
.fa-gallery figcaption { font-size: 13px; line-height: 1.65; letter-spacing: 0.02em; color: var(--gray-64); margin-top: 10px; }
@media (max-width: 768px) { .fa-gallery { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* ---- 執筆者バイライン（レポート冒頭） --------------- */
.fa-byline { display: flex; justify-content: center; margin-top: 4px; }
.fa-byline-inner { display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; background: var(--gray-4); border-radius: 999px; }
.fa-byline-photo { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--gray-16); flex: 0 0 auto; }
.fa-byline-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-byline-label { font-size: 11px; letter-spacing: 0.08em; color: var(--gray-64); margin: 0; }
.fa-byline-name { font-size: 14px; font-weight: 700; color: var(--black); margin: 2px 0 0; }
.fa-byline-name span { font-weight: 500; color: var(--gray-64); font-size: 12px; margin-left: 8px; }

/* ---- 注釈（※ 用語解説など・本文中） --------------- */
.fa-note {
  font-size: 13px; line-height: 1.7; letter-spacing: 0.02em; color: var(--gray-64);
  border-left: 2px solid var(--gray-16); padding-left: 14px; margin: 0 0 16px;
}
.fa-note + .fa-note { margin-top: -8px; }

/* ---- 記事のポイント（冒頭サマリーボックス） --------- */
.fa-points {
  max-width: 720px; margin: 8px auto 48px; padding: 32px 36px;
  background: var(--gray-4); border-radius: 8px; text-align: left;
}
.fa-points-label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent);
  margin: 0 0 16px;
}
.fa-points-group { margin: 0 0 20px; }
.fa-points-group:last-child { margin-bottom: 0; }
.fa-points-head { font-size: 16px; font-weight: 700; color: var(--black); margin: 0 0 8px; }
.fa-points-head a, .fa-points li a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.fa-points-head a:hover, .fa-points li a:hover { border-bottom-color: var(--accent); }
.fa-points ul { margin: 0; padding-left: 20px; }
.fa-points li {
  font-size: 15px; line-height: 1.8; color: var(--gray-64); margin: 0 0 4px; list-style: disc;
}
@media (max-width: 768px) {
  .fa-points { padding: 24px 20px; }
}

/* ---- 後編／関連記事への誘導リンク（ピル） ---------- */
.fa-readmore { display: flex; justify-content: center; margin: 0 auto 48px; max-width: 760px; }
.fa-readmore a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 40px; border: 1px solid var(--black); border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.03em; color: var(--black);
  text-decoration: none; transition: background 0.2s, color 0.2s;
}
.fa-readmore a:hover { background: var(--black); color: #fff; }

/* ---- 執筆者紹介（経歴つき） ------------------------- */
.fa-author {
  max-width: 760px; margin: 0 auto;
  padding: 32px 36px; background: var(--gray-4); border-radius: 14px;
}
.fa-author-label { font-size: 13px; letter-spacing: 0.1em; color: var(--gray-64); margin: 0 0 18px; }
.fa-author-body { display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: start; }
.fa-author-photo {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background-color: var(--gray-16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='40' r='15' fill='%23c8c8c8'/%3E%3Cpath d='M50 60c-16 0-29 13-29 29v8h58v-8c0-16-13-29-29-29z' fill='%23c8c8c8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center 22%; background-size: 78% auto;
}
.fa-author-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-author-name { font-size: 22px; font-weight: 700; color: var(--black); margin: 0; line-height: 1.4; }
.fa-author-name span { font-size: 14px; font-weight: 500; color: var(--gray-64); margin-left: 10px; }
.fa-author-role { font-size: 15px; color: var(--gray-64); margin: 4px 0 0; line-height: 1.6; }
.fa-author-bio { font-size: 16px; line-height: 1.9; letter-spacing: 0.02em; color: #333; margin: 16px 0 0; }
/* 記事末に置かれた執筆者カードは、次セクションの区切り線と重ならないよう下に余白 */
.fa-body > .fa-author:last-child { margin-bottom: 64px; }
@media (max-width: 768px) {
  .fa-author { padding: 24px; }
  .fa-author-body { grid-template-columns: 1fr; gap: 16px; }
  .fa-author-bio { font-size: 15px; }
}

/* ---- 株式会社ジークスについて知る（3カード導線） ---- */
.fa-about { padding: 56px 0 72px; border-top: 1px solid var(--gray-16); }
.fa-about-title {
  font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em;
  text-align: center; margin: 0 0 40px; color: var(--black);
}
.fa-about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fa-about-card {
  display: flex; flex-direction: column;
  padding: 32px 28px 28px; border: 1px solid var(--gray-16); border-radius: 12px;
  text-decoration: none; color: var(--black); background: #fff;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.fa-about-card:hover {
  border-color: var(--black); transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}
.fa-about-card-en {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--accent);
  margin-bottom: 12px;
}
.fa-about-card-ja { font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; margin-bottom: 12px; }
.fa-about-card-desc { font-size: 14px; line-height: 1.75; letter-spacing: 0.03em; color: var(--gray-64); margin: 0 0 24px; }
.fa-about-card-arrow {
  margin-top: auto; align-self: flex-end;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gray-16);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--black); transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fa-about-card:hover .fa-about-card-arrow { background: var(--black); color: #fff; border-color: var(--black); }

@media (max-width: 768px) {
  .fa-about { padding: 56px 0; }
  .fa-about-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- 関連記事（.fc-grid / .fc-card を再利用） ------- */
.fa-related { padding: 72px 0; border-top: 1px solid var(--gray-16); background: var(--gray-4); }
.fa-related-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: 0.1em;
  margin: 0 0 36px; color: var(--black);
}
.fa-related .fc-card-thumb { border-radius: 8px; }

/* ---- RESPONSIVE ------------------------------------ */
@media (max-width: 900px) {
  .fa-section .fa-wrap { grid-template-columns: 1fr; gap: 16px; }
  .fa-sec-no { font-size: 28px; }
  .fa-sec-main { max-width: none; }
}
@media (max-width: 768px) {
  .fa-hero { padding-top: 36px; }
  .fa-wrap { padding: 0 24px; }
  .fa-body { font-size: 16px; line-height: 1.95; }
  .fa-lead { font-size: 18px; }
  .fa-profiles { grid-template-columns: 1fr; }
}