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

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