@charset "UTF-8";
/* ============================================================
   プロジェクトの流れ（お問い合わせ〜レポート納品の8ステップ）の見た目。組み方は template-parts/service/flow.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。グリッド型の見た目は meta だけ違うため、meta 用の指定は service-meta.css に残る。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 流れ（ol・順序に意味あり／meta専用: グリッド型8ステップ） ---- */
.svc-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-16);
  counter-reset: flow;
}

.svc-flow li {
  border-left: 3px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
  padding: 4px 0 4px 20px;
}

.svc-flow h3 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  margin: 0 0 4px;
}

.svc-flow p {
  margin: 0;
  font-size: var(--font-size-body);
}

.svc-flow--grid {
  counter-reset: flowgrid;
  gap: 20px;
}

.svc-flow--grid li {
  /* スマホ（Figma SP-meta の SP flow）：カード 350×126・白・角丸なし・余白 18/17/19/16。
     左に丸枠の番号 45px、間隔 16、右に CONTACT（12px 赤）→ 見出し（16px）→ 説明（12px #666666）。カード間 20px
     （2026-09-17 本人指摘：4ページとも縦積みでデザインと違う） */
  display: grid;
  grid-template-columns: 45px 1fr;
  column-gap: var(--space-16);
  align-items: start;
  border-radius: 0;
  background: var(--color-white);
  border: 0.5px solid #dedede;
  padding: 18px 17px 19px 16px;
  position: relative;
}

.svc-flow--grid li::before {
  counter-increment: flowgrid;
  content: counter(flowgrid, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（流れの丸番号） */
  font-family: var(--font-en);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
  line-height: 1;
  padding-top: 3px; /* Josefin Sans は字が行の上寄りに置かれるため、上に 3px 足して丸の中央に見せる（2026-09-17 本人指摘・4ページ共通） */
  margin: 0;
  grid-row: 1 / span 3;
}

/* Figma SP：丸（45px）の上下 ＝ CONTACT（12px・行高15）＋間6＋見出し（16px・行高20）＝41px。行の高さを合わせて丸と見出しの高さをそろえる（2026-09-17 本人指摘） */
.svc-flow--grid .svc-flow__en {
  grid-column: 2; margin: 2px 0 6px; line-height: 15px; 
}

.svc-flow--grid li h3 {
  grid-column: 2; margin: 0 0 16px; font-size: var(--font-size-body); line-height: 20px; 
}

.svc-flow--grid li p:not(.svc-flow__en) {
  grid-column: 2; margin: 0; font-size: var(--font-size-body); color: #666666; 
}

.svc-flow__en {
  font-family: var(--font-en);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '12'px→14px */
  font-weight: var(--font-weight-bold);
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
  margin: 0 0 4px;
  letter-spacing: 1px;
}



@media (min-width: 768px) {

  .svc-flow--grid {
      grid-template-columns: repeat(2, 1fr);

  }}

/* PC（1024px〜）のグリッド型の見た目は SNS・インフルエンサー・クリエイティブ・SEOコンサルティングの4ページで共通（メタだけ別の見た目のため service-meta.css に残す）。
   各ページとも <main> に svc-page--sns / svc-page--influencer / svc-page--creative / svc-page--seo-consulting が付く前提で絞る（2026-09-24 部品ごとの整理でここへ移動。元は各ページの CSS に3回重複していた。SEOコンサルティングページ追加で4ページに）。 */
@media (min-width: 1024px) {
  .svc-page--sns .svc-flow--grid,
  .svc-page--influencer .svc-flow--grid,
  .svc-page--creative .svc-flow--grid,
  .svc-page--seo-consulting .svc-flow--grid {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
    row-gap: 14px;
    padding: 0 20px; /* Figma は行の内側 1160px */
  }

  .svc-page--sns .svc-flow--grid li,
  .svc-page--influencer .svc-flow--grid li,
  .svc-page--creative .svc-flow--grid li,
  .svc-page--seo-consulting .svc-flow--grid li {
    display: block;
    position: relative;
    z-index: 0;
    border: 0;
    border-radius: 0;
    background: none;
    min-height: 102px;
    padding: 13px 24px 12px 48px;
  }

  .svc-page--sns .svc-flow--grid li::before,
  .svc-page--influencer .svc-flow--grid li::before,
  .svc-page--creative .svc-flow--grid li::before,
  .svc-page--seo-consulting .svc-flow--grid li::before {
    counter-increment: none;
  }

  .svc-page--sns .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--influencer .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--creative .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--seo-consulting .svc-flow--grid li p:not(.svc-flow__en) {
    margin: 0;
    font-size: var(--font-size-min);
    line-height: 1.35;
    color: #121212;
  }

  .svc-page--sns .svc-flow--grid li h3,
  .svc-page--influencer .svc-flow--grid li h3,
  .svc-page--creative .svc-flow--grid li h3,
  .svc-page--seo-consulting .svc-flow--grid li h3 {
    position: relative;
    margin: 0 0 8px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: #212121; /* 2026-09-24 本人決定: 飾りの赤を減らす */
    line-height: 1.25;
  }

  /* 箱の形：赤い層の上に、1px 内側の白い層を重ねて枠線に見せる */
  .svc-page--sns .svc-flow--grid li::before, .svc-page--sns .svc-flow--grid li::after,
  .svc-page--influencer .svc-flow--grid li::before, .svc-page--influencer .svc-flow--grid li::after,
  .svc-page--creative .svc-flow--grid li::before, .svc-page--creative .svc-flow--grid li::after,
  .svc-page--seo-consulting .svc-flow--grid li::before, .svc-page--seo-consulting .svc-flow--grid li::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
    clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 50%, calc(100% - 19px) 100%, 0 100%);
  }

  .svc-page--sns .svc-flow--grid li::after,
  .svc-page--influencer .svc-flow--grid li::after,
  .svc-page--creative .svc-flow--grid li::after,
  .svc-page--seo-consulting .svc-flow--grid li::after {
    inset: 1px 1px 1px 1px;
    background: var(--color-white);
    clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 50%, calc(100% - 19px) 100%, 0 100%);
  }

  .svc-page--sns .svc-flow__en,
  .svc-page--influencer .svc-flow__en,
  .svc-page--creative .svc-flow__en,
  .svc-page--seo-consulting .svc-flow__en {
    display: none;
  }

  .svc-page--sns .svc-flow--grid li h3::before,
  .svc-page--influencer .svc-flow--grid li h3::before,
  .svc-page--creative .svc-flow--grid li h3::before,
  .svc-page--seo-consulting .svc-flow--grid li h3::before {
    counter-increment: flowgrid;
    content: counter(flowgrid);
    position: absolute;
    left: -32px;
    top: -2px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
    color: var(--color-white);
    font-family: var(--font-en);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    padding-top: 2px; /* Josefin Sans の上寄りを補正 */
  }
}