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

/* ---- /assets/styles/css/page/service-service.css ---- */
/* ============================================================
   SERVICE（サービス一覧）ページ専用CSS
   本番配置先: fiz-theme/assets/styles/css/page/service.css
   規則: デザインシステム（トークン）・コーディングルール§8 準拠
   出典: meta.css と同じトークン・ボタン・見出しの組み方を踏襲し、
         PC-service-要素一覧.md（Figma）の値に合わせて新規に組んだ
   ============================================================ */

:root {
  /* 2026-09-24: --color-placeholder 以外は fiz-tokens.css と同じ値だったため削除し、共通の土台に寄せた（横スクロール修正のついでに整理） */
  --color-placeholder: #D9D9D9; /* Figmaのイメージ画像プレースホルダー背景（Rectangle #d9d9d9）。fiz-tokens.css には無い、このページ固有の値 */
}

/* ---- ページ基礎（svc- プレフィックスで既存CSSと衝突回避） ---- */
.svc {
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-white);
  font-size: 15px;
  line-height: 1.8;
}
.svc-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.svc a:focus-visible,
.svc button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- パンくず：template-parts/common/breadcrumb.php と parts/breadcrumb.css に1つにまとめた（2026-09-29） ---- */

/* ---- ボタン共通 ---- */
.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 32px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.svc-btn--primary {
  /* 2026-09-24 本人決定：サービス4ページの主ボタンと同じにそろえる。赤→明るい赤のグラデーションが左→右へ流れる（先に進む印象）。影で押せると分かるようにする */
  background: linear-gradient(90deg, #c10000 0%, #dc2618 50%, #c10000 100%); /* 2026-09-24 本人指摘：明るい所が2本あり縞に見えたため、山を1つにしてなだらかに */
  background-size: 200% 100%;
  background-position: 100% 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .24);
  border: 0;
  color: var(--color-white);
  padding: 16px 40px;
  font-size: 20px;
  font-weight: var(--font-weight-bold, 700);
  min-height: 0;
  line-height: 1.25;
  transition: background-position .8s var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.svc-btn--primary:hover {
  background-position: 0 0;
  color: var(--color-white);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .24);
  transform: translateY(-2px);
  transition: background-position .8s var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.svc-btn--primary:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
  transform: translateY(0);
}
/* 2026-09-24 本人指示：動きを強く見せる。カーソルオンで白い光の帯が左から右へ横切る（止まっているときは見えない） */
.svc-btn--primary {
  position: relative;
  overflow: hidden;
}
.svc-btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
}
.svc-btn--primary:hover::after {
  left: 125%;
  transition: left 1.2s var(--ease); /* 2026-09-24 本人指摘：光が速すぎるので .8s→1.2s */
}
@media (prefers-reduced-motion: reduce) {
  .svc-btn--primary:hover::after { transition: none; left: -75%; }
}

/* ボタン「VIEW MORE」: 白地・文字#212121・右に赤丸(30px)矢印（Figma Link要素） */
.svc-btn--more {
  /* Figma の指定：塗りなし・枠線 1px #efefef・影 0 2px 5px rgba(0,0,0,.2)・余白 15px 30px・角丸 999（2026-09-13 本人指摘で修正） */
  background: var(--color-white);
  color: #212121;
  border: 1px solid #efefef;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 15px 30px;
  gap: 30px;
  min-height: 0;
  transition: box-shadow .2s ease, transform .2s ease;
}
.svc-btn--more:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}
.svc-btn--more__arrow {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として戻す（VIEW MOREの矢印） */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.svc-btn--more__arrow svg {
  display: block;
  width: 6px;
  height: 10px;
}

/* ---- ヒーロー（左: eyebrow＋H1 / 右: リード文。Figma Section 01 Hero） ---- */
.svc-hero {
  /* 2026-09-24 余白の決まり: パンくず下端→題名上端／題名下端→中身上端 */
  padding: var(--space-breadcrumb-to-title) 0 var(--space-title-to-content);
}
.svc-hero__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.svc-hero__eyebrow {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;
  color: var(--color-primary);
  margin: 0 0 16px;
  letter-spacing: 0.5px;
}
.svc-hero__title {
  font-family: var(--font-en);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.12;
  color: #111111;
  margin: 0;
}
.svc-hero__lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  color: #333333;
  margin: 0;
}

/* Figma どおりの改行位置（PC のみ効かせる。スマホは自然に折り返す） */
.svc-br-pc { display: none; }

/* ---- 文字揃えの固定 ----
   本番の共通 CSS は全要素を両端揃え（text-align: justify）にしている。複数行の見出し・ラベル類は、
   英字（meta / SNS / PDCA / Instagram など）が混じると行内の文字間が引き伸ばされる。
   見出し・リード・ボタン・ラベルは左揃えに固定し、本文の段落は本番サイトと同じ両端揃えのまま残す
   （2026-09-17 本人指示：文字間が動的に変わらないよう固定する。両ページ・PC/スマホの洗い出し結果に基づく） */
.svc h1, .svc h2, .svc h3, .svc h4,
.svc-eyebrow, .svc-lead, .svc-hero__copy, .svc-hero__desc, .svc-hero__title,
.svc-card__title, .svc-value__title, .svc-work-card__body h3,
.svc-flowchart__step, .svc-flowchart__step strong, .svc-flowchart__parallel li,
.svc-reason__flow-badge, .svc-reason__flow-lead, .svc-subnav__link, .svc-btn,
.svc-faq__q, .svc-flow__title, .svc-flow__num, .svc-flow__en {
  text-align: left;
  letter-spacing: 0;
  text-justify: none;
}
.svc-flowchart__step, .svc-flowchart__parallel li, .svc-reason__flow-badge, .svc-reason__flow-lead, .svc-btn { text-align: center; } /* 中央揃えの要素は中央のまま。CTA 帯は元の指定に任せる */

@media (min-width: 1024px) { .svc-br-pc { display: inline; } }

/* ---- サービス項目の並び（画像＋文章の行）は部品化した（2026-09-25） ----
   .svc-service 系の見た目は service-parts/service-row.css にある。
   ここに残すのはこのページだけの関係（ヒーローの直後だけ上余白を0にする）だけ */
.svc-hero + .svc-service {
  /* 2026-09-24 余白の決まり: 題名のすぐ下のセクションだけ上を0にする（題名の下の余白と足し算にしない） */
  padding-top: 0;
}

/* ---- 赤帯（ALL You Young, GO CRAZY!!） ---- */
.svc-band {
  background: #212121; /* 2026-09-24 本人決定: 飾りの赤を減らす（帯地に白文字） */
  padding: var(--space-section-y) 0; /* 2026-09-24 余白の決まり: セクションの上下の余白 */
  text-align: center;
}
.svc-band__title {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: var(--font-weight-bold, 700); /* 2026-09-24 DADS対応: 600→700 */
  line-height: 1.1;
  color: var(--color-white);
  margin: 0;
  overflow-wrap: break-word;
}

/* ---- 締めのブロック（WHAT'S NEXT…??） ---- */
.svc-closing {
  padding: var(--space-section-y) 0; /* 2026-09-24 余白の決まり: セクションの上下の余白 */
  text-align: center;
}
.svc-closing__eyebrow {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
  margin: 0 0 12px;
}
.svc-closing__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: #111111;
  margin: 0 0 var(--space-section-heading); /* 2026-09-24 余白の決まり: セクションの見出し→その中身 */
}
.svc-closing__desc {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #111111;
  margin: 0 0 24px;
}

/* スクロールで現れる動き（旧 .svc-fade）は全ページ共通の部品に移した（parts/fade-in.css・2026-10-06） */
@media (prefers-reduced-motion: reduce) {
  .svc * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============ Tablet ============ */
@media (min-width: 768px) {
  .svc {
    font-size: 16px;
  }
  .svc-hero {
    padding: 56px 0;
  }
  .svc-hero__title {
    font-size: 42px;
  }
  .svc-band {
    padding: 90px 0;
  }
  .svc-band__title {
    font-size: 42px;
  }
  .svc-closing {
    padding: 90px 0;
  }
  .svc-closing__title {
    font-size: 38px;
  }
}

/* ============ PC ============ */
@media (min-width: 1024px) {
  .svc-wrap {
    padding: 0 40px;
  }
  .svc-hero {
    /* 2026-09-24 余白の決まり: パンくず下端→題名上端／題名下端→中身上端 */
    padding: var(--space-breadcrumb-to-title) 0 var(--space-title-to-content);
  }
  .svc-hero__lead {
    letter-spacing: 0;
  }
  .svc-hero__eyebrow {
    font-size: 16px;
  }
  .svc-hero__title {
    font-size: 50px;
    line-height: 1.12;
  }
  .svc-hero__lead {
    font-size: 18px;
    line-height: 1.78;
    max-width: 558px;
  }
/* 2026-09-24 本人決定: 左632px+右580px+間10px＝合計1222pxが固定幅で、
   .svc-wrap の左右余白80px(1024px以上)を足すと1302px必要になり、1100px幅ではみ出していた
   （直す前の調査は原因をドロワーと見ていたが、実際は左右2カラムの固定幅。この固定幅レイアウトが
   収まる1330px以上でだけ横並びにし、それ未満は下のブロックの縦積みのまま） */
@media (min-width: 1330px) {
  .svc-hero__grid {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
  }
  .svc-hero__left {
    flex: 0 0 632px;
  }
  .svc-hero__right {
    flex: 0 0 580px;
  }
}

  .svc-band {
    padding: var(--space-section-y) 0; /* 2026-09-24 余白の決まり: セクションの上下の余白 */
  }
  .svc-band__title {
    font-size: 62px;
  }
  .svc-closing {
    padding: var(--space-section-y) 0; /* 2026-09-24 余白の決まり: セクションの上下の余白 */
  }
  .svc-closing__eyebrow {
    font-size: 20px;
  }
  .svc-closing__title {
    font-size: 50px;
  }
  .svc-closing__desc {
    font-size: 20px;
  }
}

/* ---- /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); }
}

/* ---- /assets/styles/css/service-parts/motion-sns.css ---- */
/* ============================================================
   SNSマーケティングの絵の動き（2026-10-21）
   飾りの組み方は template-parts/service/motion-sns.php、どの絵でも同じ所は service-parts/motion.css。
   SNSマーケティングのページと、サービス一覧で読み込む（functions.php）。一覧では他の絵の CSS と一緒に読むので、クラス名と動きの名前に sns を入れる。
   見本（fiz-seo-llmo/会社の案件-FIZ/design/絵の動き/見本-SNS.html）の「おすすめの組み合わせ」と同じ動き。
   見本から変えたのは書き方だけ：Safari でも同じに動くよう、線の長さの指定（pathLength）を実際の長さに、CSS の変数を使った動きを飾りごとの値に直した。
   始まる時刻：ハートと「…」の点 0秒・スマホのグラフ 0.9秒・折れ線 1.6秒・通知の丸 3.2秒。最後は通知の丸が 4.8秒で消える（5秒以内）
   ============================================================ */

/* 小さな飾りは、自分の中心を軸に大きさを変える。最初は見えない */
.svc-motion-sns__heart,
.svc-motion-sns__dot,
.svc-motion-sns__badge,
.svc-motion-sns__ridge-ping,
.svc-motion-sns__line-ring {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

/* ハートが3つ、0.5秒おきに浮かんで消える（3.4秒で終わる） */
.svc-motion-sns__heart { animation: 2.4s ease-out 1 both; }
.svc-motion-sns__heart--1 { animation-name: svc-motion-sns-heart-1; }
.svc-motion-sns__heart--2 { animation-name: svc-motion-sns-heart-2; animation-delay: .5s; }
.svc-motion-sns__heart--3 { animation-name: svc-motion-sns-heart-3; animation-delay: 1s; }
@keyframes svc-motion-sns-heart-1 {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  14% { opacity: 1; transform: translate(-2.64px, -5.52px) scale(1); }
  72% { opacity: 1; transform: translate(-16.28px, -34.04px) scale(1); }
  100% { opacity: 0; transform: translate(-22px, -46px) scale(.85); }
}
@keyframes svc-motion-sns-heart-2 {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  14% { opacity: 1; transform: translate(-1.2px, -8.4px) scale(1); }
  72% { opacity: 1; transform: translate(-7.4px, -51.8px) scale(1); }
  100% { opacity: 0; transform: translate(-10px, -70px) scale(.85); }
}
@keyframes svc-motion-sns-heart-3 {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  14% { opacity: 1; transform: translate(3.6px, -5.28px) scale(1); }
  72% { opacity: 1; transform: translate(22.2px, -32.56px) scale(1); }
  100% { opacity: 0; transform: translate(30px, -44px) scale(.85); }
}

/* 「…」の点：左から順に赤く光る（1秒を3回・3.5秒で終わる）。そのあと通知の丸が付いて消える（3.2秒から 4.8秒） */
.svc-motion-sns__dot { animation: svc-motion-sns-dot 1s ease-out 3 both; }
.svc-motion-sns__dot--2 { animation-delay: .25s; }
.svc-motion-sns__dot--3 { animation-delay: .5s; }
@keyframes svc-motion-sns-dot {
  0% { opacity: 0; transform: scale(.6); }
  14% { opacity: 1; transform: scale(1.25); }
  28% { opacity: 1; transform: scale(1); }
  50% { opacity: 1; transform: scale(1); }
  72%, 100% { opacity: 0; transform: scale(.8); }
}
.svc-motion-sns__badge { animation: svc-motion-sns-badge 1.6s ease-out 3.2s 1 both; }
@keyframes svc-motion-sns-badge {
  0% { opacity: 0; transform: scale(.2); }
  14% { opacity: 1; transform: scale(1.3); }
  26% { opacity: 1; transform: scale(1); }
  82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* スマホのグラフ：白い光が線に沿って走り（0.9秒から 2.2秒）、頂上で輪が広がる（2.66秒から 1.1秒）。
   光の長さ 21.8・すき間 217.5 は線の実際の長さ（108.8）に合わせた値 */
.svc-motion-sns__ridge-streak {
  stroke-dasharray: 21.8 217.5;
  stroke-dashoffset: 21.8;
  opacity: 0;
  animation: svc-motion-sns-ridge-streak 2.2s linear .9s 1 both;
}
@keyframes svc-motion-sns-ridge-streak {
  0% { stroke-dashoffset: 21.8; opacity: 0; }
  5% { opacity: 1; }
  80% { stroke-dashoffset: -87; opacity: 1; }
  100% { stroke-dashoffset: -87; opacity: 0; }
}
/* 光の先の白い点。線の曲がり角を順にたどる（位置は viewBox の座標） */
.svc-motion-sns__ridge-dot {
  opacity: 0;
  animation: svc-motion-sns-ridge-dot 2.2s linear .9s 1 both;
}
@keyframes svc-motion-sns-ridge-dot {
  0% { opacity: 0; transform: translate(181px, 169px); }
  4% { opacity: 1; }
  7.57% { transform: translate(190px, 164px); }
  18.03% { transform: translate(201px, 155px); }
  25.95% { transform: translate(211px, 151px); }
  32.53% { transform: translate(219px, 155px); }
  39.31% { transform: translate(226px, 161px); }
  43.06% { transform: translate(231px, 162px); }
  52.96% { transform: translate(242.5px, 155px); }
  64.29% { transform: translate(255px, 146px); }
  74.7% { transform: translate(265px, 136px); }
  78% { opacity: 1; }
  80% { transform: translate(271px, 132px); }
  84%, 100% { opacity: 0; transform: translate(271px, 132px); }
}
.svc-motion-sns__ridge-ping { animation: svc-motion-sns-ping 1.1s ease-out 2.66s 1 both; }
@keyframes svc-motion-sns-ping {
  0% { opacity: 0; transform: scale(.6); }
  12% { opacity: .9; }
  100% { opacity: 0; transform: scale(2.6); }
}

/* 右下の折れ線：赤い光が点を順に灯して玉に届き、玉のまわりに輪が広がる（1.6秒から 2.2秒を1回）。
   光の長さ 18.5・すき間 346.8 は線の実際の長さ（115.6）に合わせた値 */
.svc-motion-sns__line-streak {
  stroke-dasharray: 18.5 346.8;
  stroke-dashoffset: 18.5;
  opacity: 0;
  animation: svc-motion-sns-line-streak 2.2s linear 1.6s 1 both;
}
@keyframes svc-motion-sns-line-streak {
  0% { stroke-dashoffset: 18.5; opacity: 0; }
  4% { opacity: 1; }
  60% { stroke-dashoffset: -97.1; opacity: 1; }
  70%, 100% { stroke-dashoffset: -97.1; opacity: 0; }
}
.svc-motion-sns__line-ring { animation: 2.2s linear 1.6s 1 both; }
.svc-motion-sns__line-ring--1 { animation-name: svc-motion-sns-ring-1; }
.svc-motion-sns__line-ring--2 { animation-name: svc-motion-sns-ring-2; }
.svc-motion-sns__line-ring--3 { animation-name: svc-motion-sns-ring-3; }
.svc-motion-sns__line-ring--4 { animation-name: svc-motion-sns-ring-4; }
.svc-motion-sns__line-ring--5 { animation-name: svc-motion-sns-ring-5; }
@keyframes svc-motion-sns-ring-1 {
  0% { opacity: 0; transform: scale(.6); }
  3% { opacity: .9; transform: scale(.6); animation-timing-function: ease-out; }
  24%, 100% { opacity: 0; transform: scale(2.6); }
}
@keyframes svc-motion-sns-ring-2 {
  0%, 11.09% { opacity: 0; transform: scale(.6); }
  14.09% { opacity: .9; transform: scale(.6); animation-timing-function: ease-out; }
  35.09%, 100% { opacity: 0; transform: scale(2.6); }
}
@keyframes svc-motion-sns-ring-3 {
  0%, 25.05% { opacity: 0; transform: scale(.6); }
  28.05% { opacity: .9; transform: scale(.6); animation-timing-function: ease-out; }
  49.05%, 100% { opacity: 0; transform: scale(2.6); }
}
@keyframes svc-motion-sns-ring-4 {
  0%, 30.22% { opacity: 0; transform: scale(.6); }
  33.22% { opacity: .9; transform: scale(.6); animation-timing-function: ease-out; }
  54.22%, 100% { opacity: 0; transform: scale(2.6); }
}
@keyframes svc-motion-sns-ring-5 {
  0%, 60% { opacity: 0; transform: scale(.6); }
  63% { opacity: .9; transform: scale(.6); animation-timing-function: ease-out; }
  84%, 100% { opacity: 0; transform: scale(2.6); }
}

/* ---- /assets/styles/css/service-parts/motion-influencer.css ---- */
/* ============================================================
   インフルエンサーマーケティングの絵の動き（2026-10-21）
   飾りの組み方は template-parts/service/motion-influencer.php、どの絵でも同じ所は service-parts/motion.css。
   インフルエンサーマーケティングのページと、サービス一覧で読み込む（functions.php）。一覧では他の絵の CSS と一緒に読むので、クラス名と動きの名前に influencer を入れる。
   見本（fiz-seo-llmo/会社の案件-FIZ/design/絵の動き/見本-インフルエンサー.html）の「おすすめの組み合わせ」と同じ動き。
   見本から変えたのは書き方だけ：Safari でも同じに動くよう、CSS の変数で決めていた始まる時刻を飾りごとの値に直した（ブラウザで実際に当たっていた値を写した）。
   始まる時刻：真ん中の輪 0秒・線を走る光 0.3秒（1.4秒に全員へ届く）・輪を回る光 1.4秒・赤い玉 2.4秒。最後は3つ目の玉の輪が 4.6秒で消える（5秒以内）
   ============================================================ */

/* 輪の飾りは、自分の中心を軸に大きさを変える。最初は見えない */
.svc-motion-influencer__ripple,
.svc-motion-influencer__node,
.svc-motion-influencer__person,
.svc-motion-influencer__ball {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.svc-motion-influencer__run,
.svc-motion-influencer__orbit {
  opacity: 0;
}

/* 真ん中の人から広がる輪（0秒と 0.7秒に1つずつ・2秒） */
.svc-motion-influencer__ripple { animation: svc-motion-influencer-ripple 2s ease-out 1 both; }
.svc-motion-influencer__ripple--2 { animation-delay: .7s; }
@keyframes svc-motion-influencer-ripple {
  0% { opacity: 0; transform: scale(.55); }
  8% { opacity: .9; transform: scale(.62); }
  100% { opacity: 0; transform: scale(1.55); }
}

/* 5本の線を走る光（0.3秒から 2.2秒・線ごとに長さが違うので、動きも線ごと） */
.svc-motion-influencer__run { animation: 2.2s linear .3s 1 both; }
.svc-motion-influencer__run--tl { animation-name: svc-motion-influencer-run-tl; }
.svc-motion-influencer__run--top { animation-name: svc-motion-influencer-run-top; }
.svc-motion-influencer__run--tr { animation-name: svc-motion-influencer-run-tr; }
.svc-motion-influencer__run--br { animation-name: svc-motion-influencer-run-br; }
.svc-motion-influencer__run--bl { animation-name: svc-motion-influencer-run-bl; }
@keyframes svc-motion-influencer-run-tl {
  0% { stroke-dashoffset: 14; opacity: 0; }
  4% { opacity: 1; }
  51.7% { opacity: 1; }
  55.7%, 100% { stroke-dashoffset: -71.8; opacity: 0; }
}
@keyframes svc-motion-influencer-run-top {
  0% { stroke-dashoffset: 14; opacity: 0; }
  4% { opacity: 1; }
  24.62% { opacity: 1; }
  28.62%, 100% { stroke-dashoffset: -30.1; opacity: 0; }
}
@keyframes svc-motion-influencer-run-tr {
  0% { stroke-dashoffset: 14; opacity: 0; }
  4% { opacity: 1; }
  52.64% { opacity: 1; }
  56.64%, 100% { stroke-dashoffset: -73.2; opacity: 0; }
}
@keyframes svc-motion-influencer-run-br {
  0% { stroke-dashoffset: 14; opacity: 0; }
  4% { opacity: 1; }
  33.93% { opacity: 1; }
  37.93%, 100% { stroke-dashoffset: -44.4; opacity: 0; }
}
@keyframes svc-motion-influencer-run-bl {
  0% { stroke-dashoffset: 14; opacity: 0; }
  4% { opacity: 1; }
  55.4% { opacity: 1; }
  59.4%, 100% { stroke-dashoffset: -77.5; opacity: 0; }
}

/* 線の途中の点に出る小さな輪（光が通る時刻に合わせて始まる） */
.svc-motion-influencer__node { animation: svc-motion-influencer-node 2.2s linear 1 both; }
.svc-motion-influencer__node--1 { animation-delay: .39s; }
.svc-motion-influencer__node--2 { animation-delay: .79s; }
.svc-motion-influencer__node--3 { animation-delay: .42s; }
.svc-motion-influencer__node--4 { animation-delay: .53s; }
.svc-motion-influencer__node--5 { animation-delay: 1.02s; }
.svc-motion-influencer__node--6 { animation-delay: 1.3s; }
.svc-motion-influencer__node--7 { animation-delay: .59s; }
.svc-motion-influencer__node--8 { animation-delay: .71s; }
.svc-motion-influencer__node--9 { animation-delay: 1.11s; }
@keyframes svc-motion-influencer-node {
  0% { opacity: 0; transform: scale(.6); }
  2% { opacity: .9; transform: scale(.6); animation-timing-function: ease-out; }
  43.18%, 100% { opacity: 0; transform: scale(2.4); }
}

/* 光が着いた人の丸のまわりに出る輪 */
.svc-motion-influencer__person { animation: svc-motion-influencer-person 2.2s linear 1 both; }
.svc-motion-influencer__person--1 { animation-delay: 1.33s; }
.svc-motion-influencer__person--2 { animation-delay: .73s; }
.svc-motion-influencer__person--3 { animation-delay: 1.35s; }
.svc-motion-influencer__person--4 { animation-delay: .93s; }
.svc-motion-influencer__person--5 { animation-delay: 1.41s; }
@keyframes svc-motion-influencer-person {
  0% { opacity: 0; transform: scale(1); }
  2% { opacity: .9; transform: scale(1); animation-timing-function: ease-out; }
  47.73%, 100% { opacity: 0; transform: scale(1.6); }
}

/* 真ん中をかこむ輪を回る光（1.4秒から 2.6秒でひと回り） */
.svc-motion-influencer__orbit { animation: svc-motion-influencer-orbit 2.6s linear 1.4s 1 both; }
@keyframes svc-motion-influencer-orbit {
  0% { stroke-dashoffset: 90; opacity: 0; }
  3% { opacity: 1; }
  97% { opacity: 1; }
  100% { stroke-dashoffset: -594.3; opacity: 0; }
}

/* 赤い玉のまわりの輪（2.4秒・2.8秒・3.2秒から 1.4秒） */
.svc-motion-influencer__ball { animation: svc-motion-influencer-ball 1.4s linear 1 both; }
.svc-motion-influencer__ball--1 { animation-delay: 2.4s; }
.svc-motion-influencer__ball--2 { animation-delay: 2.8s; }
.svc-motion-influencer__ball--3 { animation-delay: 3.2s; }
@keyframes svc-motion-influencer-ball {
  0% { opacity: 0; transform: scale(.85); }
  8% { opacity: .95; transform: scale(1); animation-timing-function: ease-out; }
  100% { opacity: 0; transform: scale(1.9); }
}

/* ---- /assets/styles/css/service-parts/motion-creative.css ---- */
/* ============================================================
   クリエイティブ制作の絵の動き（2026-10-21）
   飾りの組み方は template-parts/service/motion-creative.php、どの絵でも同じ所は service-parts/motion.css。
   クリエイティブ制作のページと、サービス一覧で読み込む（functions.php）。一覧では他の絵の CSS と一緒に読むので、クラス名と動きの名前に creative を入れる。
   見本（fiz-seo-llmo/会社の案件-FIZ/design/絵の動き/見本-クリエイティブ.html）の「おすすめの組み合わせ」と同じ動き。
   見本から変えたのは書き方だけ：Safari でも同じに動くよう、CSS の変数で決めていた始まる時刻と回数を飾りごとの値に直した（ブラウザで実際に当たっていた値を写した）。
   始まる時刻：再生ボタン 0秒・ペンツール 0.9秒・写真 1.6秒・きらめき 2.3秒。最後は赤い丸の2つ目の輪が 4.75秒で消える（5秒以内）
   ============================================================ */

/* 再生ボタンの輪：三角の重心（153.7, 165.3）を軸に広がる。0秒・0.5秒・1秒から 1.4秒 */
.svc-motion-creative__play {
  transform-box: view-box;
  transform-origin: 153.7px 165.3px;
  opacity: 0;
  animation: svc-motion-creative-play 1.4s ease-out 1 both;
}
.svc-motion-creative__play--2 { animation-delay: .5s; }
.svc-motion-creative__play--3 { animation-delay: 1s; }
@keyframes svc-motion-creative-play {
  0% { opacity: 0; transform: scale(1.05); }
  12% { opacity: .95; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.55); }
}

/* ほかの輪ときらめきは、自分の中心を軸に大きさを変える。最初は見えない */
.svc-motion-creative__pen-ring,
.svc-motion-creative__ridge-ping,
.svc-motion-creative__sun,
.svc-motion-creative__spark {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

/* ペンツール：曲線を光が走り（0.9秒から 1.7秒を1回）、先の四角に輪が出る */
.svc-motion-creative__pen-streak {
  stroke-dasharray: 20 84;
  stroke-dashoffset: 20;
  opacity: 0;
  animation: svc-motion-creative-pen-streak 1.7s linear .9s 1 both;
}
@keyframes svc-motion-creative-pen-streak {
  0% { stroke-dashoffset: 20; opacity: 0; }
  5% { opacity: 1; }
  62% { stroke-dashoffset: -54; opacity: 1; }
  68%, 100% { stroke-dashoffset: -54; opacity: 0; }
}
.svc-motion-creative__pen-ring { animation: svc-motion-creative-pen-ring 1.7s ease-out .9s 1 both; }
@keyframes svc-motion-creative-pen-ring {
  0%, 62% { opacity: 0; transform: scale(.6); }
  65% { opacity: .9; transform: scale(.6); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* 写真：山の稜線を白い光が走り（1.6秒から 1.3秒）、頂上で輪（2.7秒から）、赤い丸の輪（2.9秒・3.45秒から） */
.svc-motion-creative__ridge-streak {
  stroke-dasharray: 24 162;
  stroke-dashoffset: 24;
  opacity: 0;
  animation: svc-motion-creative-ridge-streak 1.3s linear 1.6s 1 both;
}
@keyframes svc-motion-creative-ridge-streak {
  0% { stroke-dashoffset: 24; opacity: 0; }
  5% { opacity: 1; }
  85% { stroke-dashoffset: -128; opacity: 1; }
  100% { stroke-dashoffset: -128; opacity: 0; }
}
.svc-motion-creative__ridge-ping { animation: svc-motion-creative-ridge-ping .9s ease-out 2.7s 1 both; }
@keyframes svc-motion-creative-ridge-ping {
  0% { opacity: 0; transform: scale(.6); }
  14% { opacity: .9; transform: scale(.8); }
  100% { opacity: 0; transform: scale(2.6); }
}
.svc-motion-creative__sun { animation: svc-motion-creative-sun 1.3s ease-out 2.9s 1 both; }
.svc-motion-creative__sun--2 { animation-delay: 3.45s; }
@keyframes svc-motion-creative-sun {
  0% { opacity: 0; transform: scale(1); }
  12% { opacity: .9; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(2); }
}

/* きらめき：赤い立方体・右の黒い球・下の黒い球の順（2.3秒・2.85秒・3.4秒から 1.3秒） */
.svc-motion-creative__spark { animation: svc-motion-creative-spark 1.3s ease-in-out 2.3s 1 both; }
.svc-motion-creative__spark--2 { animation-delay: 2.85s; }
.svc-motion-creative__spark--3 { animation-delay: 3.4s; }
@keyframes svc-motion-creative-spark {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.1) rotate(40deg); }
  100% { opacity: 0; transform: scale(0) rotate(90deg); }
}

/* ---- /assets/styles/css/service-parts/motion-seo-consulting.css ---- */
/* ============================================================
   SEOコンサルティングの絵の動き（2026-10-21）
   飾りの組み方は template-parts/service/motion-seo-consulting.php、どの絵でも同じ所は service-parts/motion.css。
   SEOコンサルティングのページと、サービス一覧で読み込む（functions.php）。
   見本（fiz-seo-llmo/会社の案件-FIZ/design/絵の動き/見本-SEOコンサルティング.html）の「おすすめの組み合わせ」と同じ動き。
   飾りごとの時刻・回数・軸は、見本でブラウザが実際に当てていた値を写した（Safari でも同じに動くよう、CSS の変数やまとめた指定は使わない）。
   始まる時刻：虫眼鏡の縁 0秒・1位の行 0.8秒・棒グラフ 1.5秒・矢印 2.4秒・きらめき 2.9秒。4.8秒で全部止まる（5秒以内）。白い棒は元の色が白に近いので、白い光は灰色の側面にだけ薄く出る（本人に伝えたうえで、おすすめのまま入れた）。
   ============================================================ */

.svc-motion-seo__lens-rim {
  animation-name: svc-motion-seo-lens;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
  stroke-dasharray: 56px, 400px;
}
.svc-motion-seo__row-band {
  animation-name: svc-motion-seo-row;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.8s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-seo__bar-light--1 {
  animation-name: svc-motion-seo-bar-1;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-seo__bar-light--2 {
  animation-name: svc-motion-seo-bar-2;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.75s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-seo__bar-light--3 {
  animation-name: svc-motion-seo-bar-3;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-seo__bar-light--4 {
  animation-name: svc-motion-seo-bar-4;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-delay: 2.25s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-seo__arrow-streak {
  animation-name: svc-motion-seo-arrow-streak;
  animation-duration: 1.8s;
  animation-timing-function: linear;
  animation-delay: 2.4s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
  stroke-dasharray: 34px, 300px;
}
.svc-motion-seo__arrow-ring {
  animation-name: svc-motion-seo-arrow-ring;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
  animation-delay: 2.4s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 7px 7px;
}
.svc-motion-seo__spark--1 {
  animation-name: svc-motion-seo-spark;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 2.9s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9px 9px;
}
.svc-motion-seo__spark--2 {
  animation-name: svc-motion-seo-spark;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.2s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9px 9px;
}
.svc-motion-seo__spark--3 {
  animation-name: svc-motion-seo-spark;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.5s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9px 9px;
}
.svc-motion-seo__spark--4 {
  animation-name: svc-motion-seo-spark;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.8s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9px 9px;
}

@keyframes svc-motion-seo-row { 
  0% { opacity: 0; transform: translateX(0px); }
  14% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(260px); }
}
@keyframes svc-motion-seo-lens { 
  0% { stroke-dashoffset: 56; opacity: 0; }
  6% { opacity: 1; }
  86% { stroke-dashoffset: -218; opacity: 1; }
  100% { stroke-dashoffset: -274; opacity: 0; }
}
@keyframes svc-motion-seo-bar-1 { 
  0% { opacity: 0; transform: translateY(0px); }
  14% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-82px); }
}
@keyframes svc-motion-seo-bar-2 { 
  0% { opacity: 0; transform: translateY(0px); }
  14% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-106px); }
}
@keyframes svc-motion-seo-bar-3 { 
  0% { opacity: 0; transform: translateY(0px); }
  14% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-141px); }
}
@keyframes svc-motion-seo-bar-4 { 
  0% { opacity: 0; transform: translateY(0px); }
  14% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-171px); }
}
@keyframes svc-motion-seo-arrow-streak { 
  0% { stroke-dashoffset: 34; opacity: 0; }
  4% { opacity: 1; }
  66% { stroke-dashoffset: -190; opacity: 1; }
  72%, 100% { stroke-dashoffset: -190; opacity: 0; }
}
@keyframes svc-motion-seo-arrow-ring { 
  0%, 64% { opacity: 0; transform: scale(0.6); }
  67% { opacity: 0.9; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.6); }
}
@keyframes svc-motion-seo-spark { 
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.1) rotate(40deg); }
  100% { opacity: 0; transform: scale(0) rotate(90deg); }
}

/* ---- /assets/styles/css/service-parts/motion-aio.css ---- */
/* ============================================================
   AIO対策コンサルティングの絵の動き（2026-10-21）
   飾りの組み方は template-parts/service/motion-aio.php、どの絵でも同じ所は service-parts/motion.css。
   AIO対策コンサルティングのページと、サービス一覧で読み込む（functions.php）。
   見本（fiz-seo-llmo/会社の案件-FIZ/design/絵の動き/見本-AIO対策.html）の「おすすめの組み合わせ」と同じ動き。
   飾りごとの時刻・回数・軸は、見本でブラウザが実際に当てていた値を写した（Safari でも同じに動くよう、CSS の変数やまとめた指定は使わない）。
   始まる時刻：送信ボタン 0秒・質問の吹き出し 0.5秒・3つの点 1.2秒・回答のバー 2.2秒（チェックの輪 2.5秒・2.95秒）・きらめき 3.15秒。4.75秒で全部止まる（5秒以内）。
   ============================================================ */

.svc-motion-aio__send-ring--1 {
  animation-name: svc-motion-aio-send-ring;
  animation-duration: 1.1s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 6.75px 6.75px;
}
.svc-motion-aio__send-ring--2 {
  animation-name: svc-motion-aio-send-ring;
  animation-duration: 1.1s;
  animation-timing-function: ease-out;
  animation-delay: 0.35s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 6.75px 6.75px;
}
.svc-motion-aio__send-ring--3 {
  animation-name: svc-motion-aio-send-ring;
  animation-duration: 1.1s;
  animation-timing-function: ease-out;
  animation-delay: 0.7s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 6.75px 6.75px;
}
.svc-motion-aio__glint-bubble {
  animation-name: svc-motion-aio-glint-bubble;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-aio__dot--1 {
  animation-name: svc-motion-aio-dot-pulse;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.2s;
  animation-iteration-count: 2;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 3.75px 3.75px;
}
.svc-motion-aio__dot--2 {
  animation-name: svc-motion-aio-dot-pulse;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.35s;
  animation-iteration-count: 2;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 3.75px 3.75px;
}
.svc-motion-aio__dot--3 {
  animation-name: svc-motion-aio-dot-pulse;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
  animation-iteration-count: 2;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 3.75px 3.75px;
}
.svc-motion-aio__glint-bar {
  animation-name: svc-motion-aio-glint-bar;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-delay: 2.2s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-aio__check-ring--1 {
  animation-name: svc-motion-aio-check-ring;
  animation-duration: 1.1s;
  animation-timing-function: ease-out;
  animation-delay: 2.5s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 7px 7px;
}
.svc-motion-aio__check-ring--2 {
  animation-name: svc-motion-aio-check-ring;
  animation-duration: 1.1s;
  animation-timing-function: ease-out;
  animation-delay: 2.95s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 7px 7px;
}
.svc-motion-aio__spark--1 {
  animation-name: svc-motion-aio-spark;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.15s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9px 9px;
}
.svc-motion-aio__spark--2 {
  animation-name: svc-motion-aio-spark-flat;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.35s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9px 9px;
}
.svc-motion-aio__spark--3 {
  animation-name: svc-motion-aio-spark-flat;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.55s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9px 9px;
}
.svc-motion-aio__spark--4 {
  animation-name: svc-motion-aio-spark;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.75s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9px 9px;
}

@keyframes svc-motion-aio-send-ring { 
  0% { opacity: 0; transform: scale(1); }
  12% { opacity: 0.95; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(2.6); }
}
@keyframes svc-motion-aio-glint-bubble { 
  0% { opacity: 0; transform: translateX(0px); }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(175px); }
}
@keyframes svc-motion-aio-dot-pulse { 
  0% { opacity: 0; transform: scale(1); }
  25% { opacity: 1; transform: scale(1.4); }
  55%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes svc-motion-aio-glint-bar { 
  0% { opacity: 0; transform: translateX(0px); }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(220px); }
}
@keyframes svc-motion-aio-check-ring { 
  0% { opacity: 0; transform: scale(1); }
  12% { opacity: 0.95; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.9); }
}
@keyframes svc-motion-aio-spark { 
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.1) rotate(40deg); }
  100% { opacity: 0; transform: scale(0) rotate(90deg); }
}
@keyframes svc-motion-aio-spark-flat { 
  0% { opacity: 0; transform: scale(0); }
  40% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(0); }
}

/* ---- /assets/styles/css/service-parts/motion-inbound.css ---- */
/* ============================================================
   インバウンド集客支援の絵の動き（2026-10-21）
   飾りの組み方は template-parts/service/motion-inbound.php、どの絵でも同じ所は service-parts/motion.css。
   インバウンド集客支援のページと、サービス一覧で読み込む（functions.php）。
   見本（fiz-seo-llmo/会社の案件-FIZ/design/絵の動き/見本-インバウンド.html）の「おすすめの組み合わせ」と同じ動き。
   飾りごとの時刻・回数・軸は、見本でブラウザが実際に当てていた値を写した（Safari でも同じに動くよう、CSS の変数やまとめた指定は使わない）。
   始まる時刻：スマホ 0秒・地球儀と紙飛行機 0.7秒・検索の1位 1.5秒・AI の回答 2.1秒・棒グラフとピン 2.6秒。4.8秒で全部止まる（5秒以内）。白い棒は元の色が白に近いので、白い光は灰色の側面にだけ薄く出る（本人に伝えたうえで、おすすめのまま入れた）。
   ============================================================ */

.svc-motion-inbound__ring--1 {
  animation-name: svc-motion-inbound-ring-play;
  animation-duration: 1.2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 12.2px 12.2px;
}
.svc-motion-inbound__ring--2 {
  animation-name: svc-motion-inbound-ring-play;
  animation-duration: 1.2s;
  animation-timing-function: ease-out;
  animation-delay: 0.45s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 12.2px 12.2px;
}
.svc-motion-inbound__ring--3 {
  animation-name: svc-motion-inbound-ring-out;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.9s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 8px 8px;
}
.svc-motion-inbound__ring--4 {
  animation-name: svc-motion-inbound-ring-ball;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1.15s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 13px 13px;
}
.svc-motion-inbound__ring--5 {
  animation-name: svc-motion-inbound-ring-globe;
  animation-duration: 1.2s;
  animation-timing-function: ease-out;
  animation-delay: 0.7s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 31px 31px;
}
.svc-motion-inbound__streak {
  animation-name: svc-motion-inbound-arc-streak;
  animation-duration: 1.4s;
  animation-timing-function: linear;
  animation-delay: 1.1s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
  stroke-dasharray: 22px, 132px;
}
.svc-motion-inbound__ring--6 {
  animation-name: svc-motion-inbound-ring-out;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1.93s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9px 9px;
}
.svc-motion-inbound__ring--7 {
  animation-name: svc-motion-inbound-ring-out;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 8px 8px;
}
.svc-motion-inbound__band--1 {
  animation-name: svc-motion-inbound-glint-rank;
  animation-duration: 1.1s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-inbound__spark--1 {
  animation-name: svc-motion-inbound-spark;
  animation-duration: 1.1s;
  animation-timing-function: ease-in-out;
  animation-delay: 2.1s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9px 9px;
}
.svc-motion-inbound__band--2 {
  animation-name: svc-motion-inbound-glint-bubble;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-delay: 2.5s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-inbound__spark--2 {
  animation-name: svc-motion-inbound-spark;
  animation-duration: 1.1s;
  animation-timing-function: ease-in-out;
  animation-delay: 2.6s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9px 9px;
}
.svc-motion-inbound__ring--8 {
  animation-name: svc-motion-inbound-ring-ball;
  animation-duration: 1.1s;
  animation-timing-function: ease-out;
  animation-delay: 3.1s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9.8px 9.8px;
}
.svc-motion-inbound__band--3 {
  animation-name: svc-motion-inbound-rise;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-delay: 2.6s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-inbound__band--4 {
  animation-name: svc-motion-inbound-rise;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-delay: 2.8s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-inbound__band--5 {
  animation-name: svc-motion-inbound-rise;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-inbound__band--6 {
  animation-name: svc-motion-inbound-rise;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.2s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-inbound__ring--9 {
  animation-name: svc-motion-inbound-ring-out;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 3.8s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 7px 7px;
}

@keyframes svc-motion-inbound-ring-play { 
  0% { opacity: 0; transform: scale(1); }
  12% { opacity: 0.95; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.9); }
}
@keyframes svc-motion-inbound-ring-out { 
  0% { opacity: 0; transform: scale(0.8); }
  12% { opacity: 0.9; transform: scale(0.95); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes svc-motion-inbound-ring-ball { 
  0% { opacity: 0; transform: scale(1); }
  12% { opacity: 0.9; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.8); }
}
@keyframes svc-motion-inbound-ring-globe { 
  0% { opacity: 0; transform: scale(1); }
  12% { opacity: 0.9; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes svc-motion-inbound-spark { 
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.1) rotate(40deg); }
  100% { opacity: 0; transform: scale(0) rotate(90deg); }
}
@keyframes svc-motion-inbound-arc-streak { 
  0% { stroke-dashoffset: 22; opacity: 0; }
  4% { opacity: 1; }
  72% { stroke-dashoffset: -103.9; opacity: 1; }
  78%, 100% { stroke-dashoffset: -103.9; opacity: 0; }
}
@keyframes svc-motion-inbound-glint-rank { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(215px); }
}
@keyframes svc-motion-inbound-glint-bubble { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(130px); }
}
@keyframes svc-motion-inbound-rise { 
  0% { transform: translateY(0px); }
  100% { transform: translateY(-140px); }
}

/* ---- /assets/styles/css/service-parts/motion-listing-ads.css ---- */
/* ============================================================
   リスティング広告運用代行の絵の動き（2026-10-29）
   飾りの組み方は template-parts/service/motion-listing-ads.php、どの絵でも同じ所は service-parts/motion.css。
   リスティング広告運用代行のページと、サービス一覧で読み込む（functions.php）。
   見本（fiz-seo-llmo/会社の案件-FIZ/design/絵の動き/見本-リスティング広告.html）の「おすすめの組み合わせ」と同じ動き。
   飾りごとの時刻・回数・軸は、見本でブラウザが実際に当てていた値を写した（Safari でも同じに動くよう、CSS の変数やまとめた指定は使わない）。
   始まる時刻：虫眼鏡と検索窓 0秒（検索語の光 0.5秒）・広告の行 1.4秒・クリック 2.2秒・点線と問い合わせ 2.8秒・棒グラフと矢印 3.2秒。4.8秒で全部止まる（5秒以内）。白い棒は元の色が白に近いので、白い光は灰色の側面にだけ薄く出る。
   ============================================================ */

.svc-motion-listing-ads__ring--1 {
  animation-name: svc-motion-listing-ads-ring-lens;
  animation-duration: 1.1s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 50px 50px;
}
.svc-motion-listing-ads__band--1 {
  animation-name: svc-motion-listing-ads-glint-lens;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-listing-ads__band--2 {
  animation-name: svc-motion-listing-ads-glint-query;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-listing-ads__ring--2 {
  animation-name: svc-motion-listing-ads-ring-out;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
  animation-delay: 1.2s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 6px 6px;
}
.svc-motion-listing-ads__band--3 {
  animation-name: svc-motion-listing-ads-glint-ad;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.4s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-listing-ads__spark {
  animation-name: svc-motion-listing-ads-spark;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.9s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 9px 9px;
}
.svc-motion-listing-ads__ring--3 {
  animation-name: svc-motion-listing-ads-ring-click;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
  animation-delay: 2.2s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 13px 13px;
}
.svc-motion-listing-ads__ring--4 {
  animation-name: svc-motion-listing-ads-ring-out;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
  animation-delay: 2.4s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 20px 20px;
}
.svc-motion-listing-ads__streak--1 {
  animation-name: svc-motion-listing-ads-streak-dot;
  animation-duration: 1.2s;
  animation-timing-function: linear;
  animation-delay: 2.8s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
  stroke-dasharray: 16px, 78px;
}
.svc-motion-listing-ads__band--4 {
  animation-name: svc-motion-listing-ads-glint-env;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.5s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-listing-ads__ring--5 {
  animation-name: svc-motion-listing-ads-ring-ball;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
  animation-delay: 3.8s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 10px 10px;
}
.svc-motion-listing-ads__band--5 {
  animation-name: svc-motion-listing-ads-rise;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.2s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-listing-ads__band--6 {
  animation-name: svc-motion-listing-ads-rise;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.35s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-listing-ads__band--7 {
  animation-name: svc-motion-listing-ads-rise;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.5s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-listing-ads__band--8 {
  animation-name: svc-motion-listing-ads-rise;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 3.65s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
.svc-motion-listing-ads__streak--2 {
  animation-name: svc-motion-listing-ads-streak-arrow;
  animation-duration: 0.9s;
  animation-timing-function: linear;
  animation-delay: 3.6s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: view-box;
  transform-origin: 0px 0px;
  stroke-dasharray: 22px, 157px;
}
.svc-motion-listing-ads__ring--6 {
  animation-name: svc-motion-listing-ads-ring-out;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
  animation-delay: 3.9s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  transform-box: fill-box;
  transform-origin: 8px 8px;
}

@keyframes svc-motion-listing-ads-ring-lens { 
  0% { opacity: 0; transform: scale(1); }
  12% { opacity: 0.9; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes svc-motion-listing-ads-ring-out { 
  0% { opacity: 0; transform: scale(0.8); }
  12% { opacity: 0.9; transform: scale(0.95); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes svc-motion-listing-ads-ring-ball { 
  0% { opacity: 0; transform: scale(1); }
  12% { opacity: 0.9; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.8); }
}
@keyframes svc-motion-listing-ads-ring-click { 
  0% { opacity: 0; transform: scale(1); }
  15% { opacity: 0.95; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes svc-motion-listing-ads-spark { 
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.1) rotate(40deg); }
  100% { opacity: 0; transform: scale(0) rotate(90deg); }
}
@keyframes svc-motion-listing-ads-streak-dot { 
  0% { stroke-dashoffset: 16; opacity: 0; }
  4% { opacity: 1; }
  72% { stroke-dashoffset: -65.7; opacity: 1; }
  78%, 100% { stroke-dashoffset: -65.7; opacity: 0; }
}
@keyframes svc-motion-listing-ads-streak-arrow { 
  0% { stroke-dashoffset: 22; opacity: 0; }
  4% { opacity: 1; }
  72% { stroke-dashoffset: -144.6; opacity: 1; }
  78%, 100% { stroke-dashoffset: -144.6; opacity: 0; }
}
@keyframes svc-motion-listing-ads-glint-lens { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(36px); }
}
@keyframes svc-motion-listing-ads-glint-query { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(105px); }
}
@keyframes svc-motion-listing-ads-glint-ad { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(216px); }
}
@keyframes svc-motion-listing-ads-glint-env { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(95px); }
}
@keyframes svc-motion-listing-ads-rise { 
  0% { transform: translateY(0px); }
  100% { transform: translateY(-140px); }
}