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

/* 見出し（.svc-hero__title）は5ページ共通のため service-parts/hero.css へ移動（2026-09-24）。
   枠の形も同じく移動済み。meta は中の画像の切り抜き位置だけページ固有 */

/* Figma仕様の切り抜き: 1290×860で配置した画像のうち、左上(170px,24px)を起点に500×370を等倍で切り抜く。
   実ファイルは2倍書き出し(2580×1720)だが、レイアウト上の基準は1290×860のためCSSは1290×860基準の割合で指定する。 */
.svc-hero__visual img {
  position: absolute;
  top: -6.486%;    /* -24 / 370 */
  left: -34%;      /* -170 / 500 */
  width: 258%;     /* 1290 / 500 */
  height: 232.432%; /* 860 / 370 */
  max-width: none;
  display: block;
}

/* ---- 改善フロー図（画像ではなくHTML/CSSで組む。Figma: 白背景＋赤帯タイトル＋黒文字リード＋縦の流れ図） ---- */
/* ---- 改善フロー図 ----
   Figma（PC-meta-要素一覧.md の Group 130）に合わせて作り直した（2026-09-16 本人指摘）。
   帯：グラデーション・幅 668px 中央・白 24px（太さ500）。リード：15px 太字 中央。
   箱：220×45・角丸なし・1px の濃い枠線（#212121）・間隔 16px・文字 16px 太字。つなぐ線は無い。
   「事業目標」は黒地白文字、途中の「クリエイティブ」は赤地白文字。並ぶ2つは中央の列より広く左右に張り出す（合計 500px・間 60px）。
   以前の「枠付きの囲い・赤ベタの帯・角丸の箱・線でつなぐ」作りは Figma に無かったので捨てた */
.svc-reason__flow {
  background: none;
  border: 0;
  padding: 24px 0 8px;
  color: var(--color-text);
}

.svc-reason__flow-badge {
  white-space: nowrap; /* 「ー」だけ次の行に落ちるのを防ぐ。折る位置は <br class="svc-br-sp"> で決める（2026-09-17 本人指摘・390px幅） */
  /* 帯も平行四辺形（Figma の path は横 23px／縦 35px の傾き ＝ 約 33°）。clip-path で切り抜く */
  background: var(--color-primary); /* 主ボタンと同じ（Figma id 3:8832） */
  clip-path: polygon(23px 0, 100% 0, calc(100% - 23px) 100%, 0 100%);
  color: var(--color-white);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  text-align: center;
  padding: 6px 16px;
  margin: 0 auto 24px;
  max-width: 668px;
}

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

.svc-flowchart {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.svc-flowchart__step {
  width: 220px;
  max-width: 100%;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  color: #111111;
  padding: 0 24px;
  text-align: center;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

/* 箱は平行四辺形（FIZ のロゴと同じ右上がりの斜め）。Figma の path は横 20px／縦 45px の傾き ＝ 約 24°。
   文字は傾けないので、枠は ::before に描いて枠だけ skew する。左右 10px の余白は、傾けた分のはみ出し */
.svc-flowchart__step::before {
  content: "";
  position: absolute;
  inset: 0 10px;
  z-index: -1;
  background: var(--color-white);
  border: 1px solid #212121;
  transform: skewX(-24deg);
}

.svc-flowchart__step--dark {
  color: var(--color-white); 
}

.svc-flowchart__step--dark::before {
  background: #212121; border-color: var(--color-text); 
}

.svc-flowchart__step--accent {
  color: var(--color-white); 
}

.svc-flowchart__step--accent::before {
  background: var(--color-primary); border-color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
}

.svc-flowchart__step--branch {
  width: auto;
  min-height: 0;
  padding: 0;
  max-width: 100%;
}

.svc-flowchart__step--branch::before {
  display: none; 
}

.svc-flowchart__parallel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-16);
}

.svc-flowchart__parallel li {
  width: 150px;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  color: #111111;
  padding: 0 16px;
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.svc-flowchart__parallel li::before {
  content: "";
  position: absolute;
  inset: 0 10px;
  z-index: -1;
  background: var(--color-white);
  border: 1px solid #212121;
  transform: skewX(-24deg);
}

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

@media (min-width: 768px) {
  .svc-flowchart__parallel {
    gap: 60px; 
  }

  /* Figma: 並ぶ2つの間 60px */
  .svc-flowchart__parallel li {
    width: 220px; font-size: var(--font-size-body); 
  }

}

@media (min-width: 1024px) {
  .svc-flow--grid {
      grid-template-columns: repeat(4, 1fr);
      column-gap: 20px;
      row-gap: 14px;
    
  }

  .svc-reason__flow {
      padding: 32px 0 8px;
    
  }

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

  .svc-flow--grid li {
      display: block; /* PC は丸の下に内容を積む（Figma PC） */
      border-radius: 0;
      border: 0.5px solid #dedede;
      padding: 20px;
    
  }

  .svc-flow--grid li::before {
      width: 46px;
      height: 45px;
      border: 0.5px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（流れの丸番号） */
      font-size: var(--font-size-body);
      margin: 0 0 20px;
    
  }

  .svc-flow--grid li p:not(.svc-flow__en) {
    font-size: var(--font-size-min); 
      font-size: var(--font-size-min);
      color: #666666;
    
  }

  .svc-flow--grid li h3 {
      font-size: var(--font-size-body);
    
  }

}