@charset "UTF-8";
/* ============================================================
   SNSマーケティング ページ専用CSS（2026-09-23 まとめ）
   共通ルールは service-common.css に集約。ここには本ページだけのルールが残る。
   色・文字サイズ・太さ・余白・角丸などの決まりの値は fiz-tokens.css（src/tokens.css の写し）を使う。
   ============================================================ */

/* 見出し（.svc-hero__title）と画像の入れ方（.svc-hero__visual img）は5ページ共通のため service-parts/hero.css へ移動（2026-09-24）。
   ここには読み込み待ちの背景色だけ残す */
.svc-hero__visual {
  background: #eee; /* 画像（sns-hero.png）はまだ書き出されていない。読み込みに失敗している間、この背景色が薄い灰色の枠として見える（2026-09-16） */
}

/* ---- 改善フロー図（画像ではなくHTML/CSSで組む。Figma: 白背景＋赤帯タイトル＋黒文字リード＋縦の流れ図） ---- */
.svc-reason__flow {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 32px 20px;
  color: var(--color-text);
}

.svc-reason__flow-badge {
  white-space: nowrap; /* 「ー」だけ次の行に落ちるのを防ぐ。折る位置は <br class="svc-br-sp"> で決める（2026-09-17 本人指摘・390px幅） */
  background: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（名札の帯） */
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  margin: 0 0 16px;
}

.svc-reason__flow-lead {
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 24px;
  text-align: center;
}

.svc-flowchart {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.svc-flowchart__step {
  width: 100%;
  max-width: 320px;
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  text-align: center;
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  position: relative;
}

/* Figma: 最初の「事業目標」だけ黒地白文字 */
.svc-flowchart__step--dark {
  background: #111111;
  border-color: #111111;
  color: var(--color-white);
}

/* Figma: 途中の「クリエイティブ」だけ赤地白文字（2026-09-24 本人決定: 赤は差し色として使う） */
.svc-flowchart__step--accent {
  background: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
  border-color: var(--color-primary);
  color: var(--color-white);
}

.svc-flowchart__step--branch {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 100%;
}

.svc-flowchart__parallel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.svc-flowchart__parallel li {
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  width: 160px;
  text-align: center;
}

/* 文字揃えの固定（5ページ共通ぶん）は service-parts/text-align.css へ移動（2026-09-24） */

.svc-flowchart__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 2px;
  height: 10px;
  background: var(--color-border);
  transform: translateX(-50%);
}

/* sns専用: 改善フロー図（BRAND〜UGCの5段）。
   Figma（PC-sns-要素一覧.md 131〜176行）は「箱を積んで線でつなぐ」Meta の図ではなく、
   帯（グラデーション・中央 668px・白 24px）→ 1行のリード → 5行の表（左にグラデーションのタグ 133×38、右に見出し 24px＋説明 15px）。
   行の枠・つなぐ線・赤い強調の段は無い。最初は Meta の作りを流用していたが本人指摘で作り直した（2026-09-16） */
.svc-reason__flow--plain {
  border: 0;               /* Figma は白い面だけで枠線が無い */
  padding: 32px 0;
}

.svc-reason__flow--plain .svc-reason__flow-badge {
  background: var(--color-primary); /* 主ボタンと同じグラデーション（Figma id 3:9213） */
  clip-path: polygon(23px 0, 100% 0, calc(100% - 23px) 100%, 0 100%); /* 平行四辺形（Figma の path：横 23px／縦 33px の傾き） */
  border-radius: 0;
  text-align: center;
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  padding: 6px 16px;
  margin: 0 auto 24px;
  max-width: 668px;
}

.svc-reason__flow--plain .svc-reason__flow-lead {
  font-size: 15px;
  margin-bottom: 32px;
}

.svc-flowchart--detailed {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  max-width: 567px;        /* Figma の表の幅 */
  margin: 0 auto;
}

.svc-flowchart--detailed .svc-flowchart__step {
  max-width: none;
  display: grid;
  grid-template-columns: 110px 1fr;
  column-gap: 12px;
  align-items: start;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-align: left;
}

.svc-flowchart--detailed .svc-flowchart__step::after {
  display: none; 
}

/* つなぐ線は無い */
.svc-flowchart__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  background: linear-gradient(90deg, #c10000 0%, #3a3838 100%); /* Figma id 3:9182：左が赤、右が黒 */
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%); /* 平行四辺形（Figma の path：横 20px／縦 38px の傾き）。FIZ のロゴと同じ右上がり */
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  letter-spacing: .5px;
  border-radius: 0;
  padding: 3px 8px 0; /* Josefin Sans は字が行の上寄りに置かれるため、上の余白を足して見た目の中央に合わせる。本番の CONTACT ボタン（上15/下12）と同じ考え方（2026-09-17 本人指摘） */
  line-height: 1;
  margin: 2px 0 0;
  grid-row: 1 / span 2;
}

.svc-flowchart__step strong {
  display: block;
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1.3;
  margin: 0 0 4px;
}

.svc-flowchart__step p {
  margin: 0;
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-normal);
  color: var(--color-dark-sub);
  line-height: 1.5;
}

/* Meta 由来の「赤い強調の段」は、この図では使わない */
.svc-flowchart--detailed .svc-flowchart__step--accent {
  background: none;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .svc-flowchart__step,
    .svc-flowchart__parallel li {
      font-size: 15px;
    
  }

}

@media (min-width: 1024px) {
  /* グリッド型 flow（.svc-flow--grid）の PC 見た目は service-parts/flow.css へ移動（2026-09-24。SNS・インフルエンサー・クリエイティブの3ページで同じ指定だったため） */

  .svc-reason__flow {
      padding: var(--space-40);

  }

  .svc-reason__flow--plain {
      padding: 40px 0 24px;

  }

  .svc-reason__flow--plain .svc-reason__flow-badge {
      font-size: 24px;
      padding: 4px 16px;   /* Figma: 帯の高さ 33px */
      margin-bottom: 38px;

  }

  .svc-flowchart--detailed {
      gap: 25px;           /* Figma: 行の間隔 25px */

  }

  .svc-flowchart--detailed .svc-flowchart__step {
      grid-template-columns: 133px 1fr;
      column-gap: 14px;

  }

  .svc-flowchart__tag {
      height: 38px;
      font-size: 15px;
      margin-top: 5px;

  }

  .svc-flowchart__step strong {
      font-size: 24px;

  }

  .svc-flowchart__step p {
      font-size: 15px;

  }

}