/* 商業施設・スーパー向けページ（facility.html）専用スタイル / Figma node 325:1476（PC 1280×3210）・460:5077（SP 440×4902） */

/* ---------- ページ固有トークン ---------- */
.fc-hero,
.fc-service,
.fc-strength,
.fc-works,
.fc-cta {
  --fc-navy: #17325f;
  /* テーマ基調色（紺） */
  --fc-navy-deep: #0f2547;
  /* 見出し・グラデーション終端 */
  --fc-red: #cc242b;
  /* セクションラベル・メーカー向け導線 */
  --fc-font-head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
}

/* ---------- セクション見出し（SERVICE / STRENGTH / WORKS 共通・Figma 325:1572 ほか） ---------- */
.fc-sec-head {
  text-align: center;
}

.fc-sec-label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2.4px;
  color: var(--fc-red);
}

.fc-sec-title {
  margin-top: 16px;
  font-family: var(--fc-font-head);
  font-weight: 900;
  font-size: 36px;
  line-height: 50px;
  /* Figma 325:1575 の実測高さ 50px に合わせる */
  color: var(--fc-navy-deep);
}

/* ============================================================
   ヒーロー（Figma node 325:1535 / 1280×601）
   ============================================================ */
.fc-hero {
  background: linear-gradient(180deg, #f4f8fc 0%, #e9eff8 100%);
  padding: 80px 0;
}

.fc-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.fc-hero__back {
  height: 28px;
}

/* 「トップへ戻る」リンク（Figma 325:1538） */
.fc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--color-text-sub);
}

.fc-back-link img {
  width: 20px;
  height: 20px;
}

.fc-back-link:hover {
  color: var(--fc-navy);
}

.fc-hero__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.fc-hero__text {
  width: 100%;
  min-width: 0;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

/* 対象者バッジ（Figma 325:1544） */
.fc-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 8px 16px;
  border-radius: 16px;
  background: var(--fc-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.fc-hero__badge img {
  width: 19px;
  height: 19px;
}

/* 見出し（Figma 325:1553 / Zen Kaku Gothic New Black 48px） */
.fc-hero__title {
  font-family: var(--fc-font-head);
  font-weight: 900;
  font-size: 48px;
  line-height: 62px;
  /* Figma 325:1552 = 124px / 2行 */
  color: var(--fc-navy-deep);
}

.fc-hero__lead {
  font-size: 16px;
  line-height: 31px;
  /* Figma 325:1554 = 93px / 3行 */
  color: var(--color-text-sub);
}

.fc-hero__actions {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  width: 100%;
}

/* 主CTA（Figma 325:1556 / 256×64・2段組み） */
.fc-btn-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 256px;
  height: 64px;
  padding: 16px 32px;
  border-radius: 8px;
  background: var(--fc-navy);
  box-shadow: 0 16px 32px -16px rgba(23, 50, 95, .6);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.fc-btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px -16px rgba(23, 50, 95, .7);
}

.fc-btn-hero__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, .6);
  white-space: nowrap;
}

.fc-btn-hero__main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.fc-btn-hero__main img {
  width: 24px;
  height: 24px;
}

/* 副CTA＝メーカー向け導線（Figma 325:1562 / 208×48） */
.fc-btn-maker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 208px;
  height: 48px;
  padding: 13px 25px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--fc-red);
  white-space: nowrap;
  transition: border-color .2s ease, transform .2s ease;
}

.fc-btn-maker:hover {
  border-color: var(--fc-red);
  transform: translateY(-2px);
}

.fc-btn-maker img {
  width: 20px;
  height: 20px;
}

/* ヒーロー画像（Figma 325:1566 — 背景に紺10%のずらし面を敷く） */
.fc-hero__visual {
  position: relative;
  width: 100%;
  min-width: 0;
}

.fc-hero__visual-shade {
  position: absolute;
  left: 15%;
  top: 16%;
  width: 88%;
  height: 88%;
  border-radius: 16px;
  background: var(--fc-navy);
  opacity: .1;
  z-index: 0;
}

.fc-hero__visual-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 36px rgba(23, 50, 95, .22);
}

.fc-hero__visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   提供サービス（Figma node 325:1570 / 1280×594）
   ============================================================ */
.fc-service {
  background: #fff;
  padding: 80px 0;
}

.fc-service__inner {
  max-width: 1072px;
  /* Figma 325:1571（1072）— 他セクションより狭い */
  margin: 0 auto;
  padding: 0 32px;
}

.fc-service__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* サービスカード（Figma 325:1579 / 320×142） */
.fc-service-card {
  position: relative;
  min-height: 142px;
  /* border-box のため枠線1pxぶんを差し引き、内容の位置をFigmaの 20px / 32px に揃える */
  padding: 31px 19px;
  border: 1px solid var(--fc-navy);
  border-radius: 8px;
  background: #f6f8fb;
  transition: box-shadow .2s ease, transform .2s ease;
}

.fc-service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(23, 50, 95, .35);
}

.fc-service-card__num {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  color: var(--fc-navy);
}

.fc-service-card__title {
  padding-right: 56px;
  /* 右上の連番を避ける */
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  /* Figma 325:1581 = 24px */
  color: var(--fc-navy-deep);
}

.fc-service-card__desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 23px;
  /* Figma 325:1584 = 46px / 2行 */
  color: var(--color-text-sub);
}

/* ============================================================
   商業施設に選ばれる理由（Figma node 325:1615 / 1280×540）
   ============================================================ */
.fc-strength {
  background: #eef2f8;
  padding: 80px 0;
}

.fc-strength__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* 強みカード（Figma 325:1622 / 357.33×254） */
.fc-strength-card {
  min-height: 254px;
  padding: 25px 33px 33px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px -12px rgba(23, 50, 95, .18);
}

.fc-strength-card__num {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--color-border);
}

.fc-strength-card__title {
  margin-top: 16px;
  /* Figma 325:1624 の見出し枠内トップ余白 */
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  /* Figma 325:1625 = 27px */
  color: var(--fc-navy-deep);
}

.fc-strength-card__desc {
  margin-top: 16px;
  font-size: 14px;
  line-height: 27px;
  /* Figma 325:1627 = 81px / 3行 */
  color: var(--color-text-sub);
}

/* ============================================================
   商業施設向けの実績（Figma node 325:1643 / 1280×705.85）
   ============================================================ */
.fc-works {
  background: #fff;
  padding: 80px 0;
}

.fc-works__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 357.33px);
  justify-content: center;
  gap: 32px;
}

/* 実績カード（Figma 325:1652 / 357.33×373.85） */
.fc-works-card {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px -12px rgba(23, 50, 95, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.fc-works-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(23, 50, 95, .3);
}

.fc-works-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  /* Figma「3：2」フレーム */
  overflow: hidden;
}

.fc-works-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* カテゴリバッジ（Figma 325:1655 / 96×24） */
.fc-works-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--fc-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.fc-works-card__badge img {
  width: 20px;
  height: 20px;
}

.fc-works-card__body {
  min-height: 136px;
  padding: 24px;
}

.fc-works-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  /* Figma 325:1666 = 26px */
  color: var(--fc-navy-deep);
}

.fc-works-card__desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 25px;
  /* Figma 325:1685 = 50px / 2行 */
  color: var(--color-text-sub);
}

.fc-works__note {
  margin-top: 32px;
  text-align: center;
  font-size: 12px;
  line-height: 14px;
  /* Figma 325:1686 = 14px */
  color: var(--color-text-sub);
}

/* ============================================================
   CTAバンド（Figma node 325:1687 / 1280×386）
   ============================================================ */
.fc-cta {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--fc-navy) 0%, var(--fc-navy-deep) 100%);
  color: #fff;
  text-align: center;
}

.fc-cta-br {
  display: none;
}

.fc-cta__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.fc-cta__title {
  font-family: var(--fc-font-head);
  font-weight: 900;
  font-size: 32px;
  line-height: 48px;
  /* Figma 325:1690 = 48px */
  color: #fff;
}

.fc-cta__lead {
  margin-top: 12px;
  font-size: 16px;
  line-height: 30px;
  /* Figma 325:1693 = 30px */
  color: rgba(255, 255, 255, .75);
}

.fc-cta__actions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* CTAボタン（Figma 325:1695 / 320×56・白地に紺文字） */
.fc-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Figma 325:1696→325:1697 の文字列と矢印の間隔 */
  width: 320px;
  height: 56px;
  border-radius: 8px;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--fc-navy);
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}

.fc-btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .45);
}

/* 「商業施設向け｜お問い合わせ」はFigma上ひと続きのテキスト（208px）なので区切り文字に余白を足さない */
.fc-btn-cta__text {
  white-space: nowrap;
}

.fc-btn-cta__sep {
  color: #b9c5d8;
  font-weight: 400;
}

.fc-btn-cta img {
  width: 24px;
  height: 24px;
}

.fc-cta__note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 24px;
  /* Figma 325:1699 の行高 24px */
  color: rgba(255, 255, 255, .75);
}

.fc-cta__note img {
  width: 20px;
  height: 20px;
}

/* ============================================================
   タブレット（〜1100px）
   ============================================================ */
@media (max-width: 1100px) {
  .fc-hero__body {
    gap: 40px;
  }

  .fc-hero__visual {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .fc-hero__title {
    font-size: 40px;
    line-height: 1.35;
  }

  .fc-service__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fc-works__grid {
    grid-template-columns: repeat(2, minmax(0, 357.33px));
  }
}

/* ============================================================
   スマートフォン（〜768px / Figma node 460:5077「0806_SP」440×4902 準拠）
   デザイン幅440px・左右余白20px＝内容幅400px。数値はSPメタデータの実測値。
   ============================================================ */
@media (max-width: 768px) {

  /* --- セクション見出し：SPでは左寄せ（Figma 472:686/472:688 は x=0） --- */
  .fc-sec-head {
    text-align: left;
  }

  .fc-sec-title {
    font-size: 28px;
    line-height: 39px;
  }

  /* --- ヒーロー（Figma 460:6186 / 440×931） --- */
  .fc-hero {
    padding: 60px 0;
  }

  .fc-hero__inner {
    padding: 0 20px;
  }

  .fc-hero__body {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* 460:6194→460:6217 の間隔 */
  .fc-hero__text {
    width: 100%;
    padding-top: 40px;
    gap: 20px;
  }

  .fc-hero__title {
    font-size: 36px;
    line-height: 47px;
  }

  /* 460:6203 = 94px / 2行 */
  .fc-hero__lead {
    font-size: 14px;
    line-height: 27px;
  }

  /* 460:6205 = 81px / 3行 */

  /* ボタンは縦積み。幅はFigmaどおり固定（256/208）で全幅化しない */
  .fc-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .fc-btn-hero {
    width: 256px;
    max-width: 100%;
  }

  .fc-btn-hero__label {
    font-size: 10px;
  }

  /* 460:6208 = 110px / 11文字 */
  .fc-btn-hero__main {
    font-size: 14px;
  }

  /* 460:6210 = 140px / 10文字 */
  .fc-btn-hero__main img {
    width: 20px;
    height: 20px;
  }

  .fc-btn-maker {
    width: 208px;
    max-width: 100%;
  }

  .fc-hero__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .fc-hero__visual-shade {
    right: -12px;
    bottom: -12px;
    width: 88.06%;
    height: 88.06%;
    /* 460:6218 */
  }

  /* --- 提供サービス（Figma 472:684 / 440×1009） --- */
  .fc-service {
    padding: 60px 0;
  }

  .fc-service__inner {
    padding: 0 20px;
  }

  .fc-service__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }

  /* カード内部の余白・文字サイズはPCと同一（472:693 は x=20 y=32 w=360） */

  /* --- 商業施設に選ばれる理由（Figma 476:728 / 440×903） --- */
  .fc-strength {
    padding: 60px 0;
  }

  .fc-strength__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }

  .fc-strength-card {
    min-height: 0;
    padding: 25px;
  }

  .fc-strength-card__num {
    font-size: 32px;
    line-height: 40px;
  }

  /* 476:740 = 50×40 */

  /* --- 商業施設向けの実績（Figma 476:851 / 440×1046.25） --- */
  .fc-works {
    padding: 60px 0;
  }

  .fc-works__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }

  .fc-works-card__body {
    min-height: 0;
  }

  .fc-works__note {
    margin-top: 24px;
    text-align: left;
  }

  /* 476:940 は x=0 の左寄せ */

  /* --- CTA（Figma 476:995 / 440×394） --- */
  .fc-cta {
    padding: 60px 0;
  }

  .fc-cta-br {
    display: block;
  }

  .fc-cta__inner {
    padding: 0 20px;
  }

  .fc-cta__title {
    font-size: 24px;
    line-height: 36px;
  }

  /* 476:998 = 72px / 2行 */
  .fc-cta__lead {
    font-size: 14px;
    line-height: 27px;
  }

  /* 476:1000 = 54px / 2行 */
  /* ボタンはPCと同じ320×56のまま中央寄せ（476:1002） */
}

/* 狭い端末（〜360px）での破綻防止：固定幅ボタンだけ全幅に逃がす */
@media (max-width: 360px) {

  .fc-btn-hero,
  .fc-btn-maker,
  .fc-btn-cta {
    width: 100%;
  }
}