@charset "UTF-8";
/* fiz-css-bundle 68f9db456c0baab9765be3a67f4743c9 */
/* 自動でまとめたファイル（inc/css-bundle.php）。直すときは元のファイルを直す。ここを直しても次に作り直されて消える */

/* ---- /assets/styles/css/page/service-meta.css ---- */
/* ============================================================
   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）。
   枠の形と画像の入れ方も同じく移動済み。
   画像の切り抜き（2026-10-21 やめた）：以前は 2580×1720（113KB）の画像を CSS で拡大し、Figma 仕様の範囲
   （1290×860 で配置した画像の左上 170px,24px から 500×370）だけを見せていた。見えるのは画像の約17%で、
   スマホの表示が遅くなる一番の原因だった。同じ範囲を切り出した 1000×740（31KB）の hero.webp に替え、
   ほかのページと同じ入れ方（service-parts/hero.css）にした。元の画像は fiz-サイト運用/控え/開発サイト_スマホの速さ_2026-10-21の前/ */

/* ---- 改善フロー図（画像ではなく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);
    
  }

}

/* ---- /assets/styles/css/service-parts/motion.css ---- */
/* ============================================================
   サービスの絵の動き・共通の所（2026-10-21 meta から）
   使う場所：サービス各ページのヒーロー（template-parts/service/hero.php）と、サービス一覧の行（service-row.php）。
   飾りの組み方は template-parts/service/motion-<名前>.php、絵ごとの動きは service-parts/motion-<名前>.css。
   飾りのファイルがある絵だけ動く。読み込みは functions.php（飾りのファイルがあるページだけ、この CSS と絵ごとの CSS を読む）。
   決まり：
   - 動きは5秒以内に全部止める。自動で5秒を超えて動き続けるものには止める手段が要るため（WCAG 2.2.2）。
     止めるボタンを付ける案もあったが、見た目を変えずに済む「自動で止める」を本人が選んだ（2026-10-21）
   - 赤は小さな目印だけ（tokens.css の赤の使い方の決まり）
   - 重くしない：画像・JS・書体を足さない。動きは位置と透明度の変化を基本にする
   ============================================================ */

/* 絵と飾りをまとめて包む箱。全体がふわっと1回浮く */
.svc-motion__float {
  position: relative;
  animation: svc-motion-float 4s ease-in-out 1 both;
}

/* ヒーローは画像を枠に絶対配置で入れている（meta は切り抜き）ので、包む箱も枠いっぱいにする */
.svc-hero__visual > .svc-motion__float {
  position: absolute;
  inset: 0;
}

/* 一覧の行は画像が流れの中にあり、最大幅が 460px（service-row.css の .svc-service__img と同じ）。
   包む箱も同じ幅にして、行が 460px より広いときに飾りが画像からずれないようにする */
.svc-service__media > .svc-motion__float {
  width: 100%;
  max-width: 460px;
}

/* 飾りの層（SVG）。絵と同じ枠に重ねる */
.svc-motion__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

@keyframes svc-motion-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* 一覧の行：画像が画面に半分入るまで止めておく（外すのは service-pages.js）。
   一覧は下に長く、読み込んですぐ動かすと、下の行は見る前に5秒たって止まってしまうため。
   JS が動かないときは止まったまま＝静止画で出る（飾りは最初の透明な状態のまま）。
   絵ごとの CSS が後から animation を書くので、クラス2つ分の強さで止める */
.svc-motion__float.svc-motion--wait,
.svc-motion--wait .svc-motion__fx * {
  animation-play-state: paused;
}

/* 端末で「視差効果を減らす」を設定している人には、動きを出さず静止画だけにする */
@media (prefers-reduced-motion: reduce) {
  .svc-motion__float {
    animation: none;
  }
  .svc-motion__fx {
    display: none;
  }
}

/* ---- /assets/styles/css/service-parts/motion-meta.css ---- */
/* ============================================================
   meta(Instagram)広告運用の絵の動き（2026-10-21）
   飾りの組み方は template-parts/service/motion-meta.php、どの絵でも同じ所は service-parts/motion.css。
   meta のページと、サービス一覧で読み込む（functions.php）。一覧では他の絵の CSS と一緒に読むので、クラス名と動きの名前に meta を入れる。
   元は本人が作った一式 fiz-hero-motion。一式は止まらずに繰り返す作りだったが、5秒以内に全部止まるよう回数だけ変えた
   （波紋・矢印の光・矢印の先の光は2回、光の帯・いいね・通知は1回。動きそのものは一式のまま）。
   長さを変えるときは、最後の動きが5秒以内に終わるか確かめる（いま最後は いいね・通知の3つ目＝2秒待って3秒動く＝5秒）
   ============================================================ */

/* 光の帯（初めの1.6秒で1回横切る） */
.svc-motion-meta__shine {
  transform-box: fill-box;
  transform-origin: center;
  animation: svc-motion-meta-shine 5.4s cubic-bezier(.4, 0, .2, 1) 1 both;
}
@keyframes svc-motion-meta-shine {
  0% { transform: translateX(-60px) rotate(20deg); }
  30%, 100% { transform: translateX(640px) rotate(20deg); }
}

/* メガホンの波紋（中心 190,200） */
.svc-motion-meta__wave {
  transform-box: view-box;
  transform-origin: 190px 200px;
  opacity: 0;
  animation: svc-motion-meta-wave 2.4s ease-out 2 both;
}
.svc-motion-meta__wave--2 { animation-delay: .3s; }
.svc-motion-meta__wave--3 { animation-delay: .6s; }
@keyframes svc-motion-meta-wave {
  0% { opacity: 0; transform: scale(.88); }
  20% { opacity: 1; }
  70%, 100% { opacity: 0; transform: scale(1.14); }
}

/* 矢印に沿って走る光 */
.svc-motion-meta__streak {
  stroke-dasharray: 34 600;
  animation: svc-motion-meta-streak 2.4s ease-in 2 both;
}
@keyframes svc-motion-meta-streak {
  0% { stroke-dashoffset: 34; opacity: 0; }
  6% { opacity: 1; }
  55% { stroke-dashoffset: -245; opacity: 1; }
  62%, 100% { stroke-dashoffset: -245; opacity: 0; }
}

/* 矢印の先が光る */
.svc-motion-meta__ping {
  transform-box: fill-box;
  transform-origin: center;
  animation: svc-motion-meta-ping 2.4s ease-out 2 both;
}
@keyframes svc-motion-meta-ping {
  0%, 50% { opacity: 0; transform: scale(.6); }
  56% { opacity: .9; }
  85%, 100% { opacity: 0; transform: scale(2.8); }
}

/* いいね・通知（メガホンの口から1秒おきに3つ飛び出す） */
.svc-motion-meta__like {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: 3s ease-out 1 both;
}
.svc-motion-meta__like--1 { animation-name: svc-motion-meta-like-1; }
.svc-motion-meta__like--2 { animation-name: svc-motion-meta-like-2; animation-delay: 1s; }
.svc-motion-meta__like--3 { animation-name: svc-motion-meta-like-3; animation-delay: 2s; }
@keyframes svc-motion-meta-like-1 {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  12% { opacity: 1; transform: translate(6px, -10px) scale(1); }
  75% { opacity: 1; transform: translate(46px, -72px) scale(1); }
  100% { opacity: 0; transform: translate(58px, -96px) scale(.9); }
}
@keyframes svc-motion-meta-like-2 {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  12% { opacity: 1; transform: translate(14px, -4px) scale(1); }
  75% { opacity: 1; transform: translate(84px, -40px) scale(1); }
  100% { opacity: 0; transform: translate(104px, -52px) scale(.9); }
}
@keyframes svc-motion-meta-like-3 {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  12% { opacity: 1; transform: translate(2px, -14px) scale(1); }
  75% { opacity: 1; transform: translate(18px, -96px) scale(1); }
  100% { opacity: 0; transform: translate(22px, -122px) scale(.9); }
}