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

/* ---- /assets/styles/css/page/service-inbound.css ---- */
/* ============================================================
   インバウンド集客支援 ページだけの見た目（2026-10-20）。
   ほかは部品（service-parts/）を使う。値は fiz-tokens.css（src/tokens.css の写し）を使う。
   赤の使い方は tokens.css の決まりに従う：文字には赤を使わない。赤は小さな目印（図の矢印）だけ。ページの途中に赤い帯は置かない。
   ============================================================ */

/* 見出し「インバウンド集客支援」は、「インバウンド」と「集客支援」の間（<wbr>）でだけ折り返す。「援」だけが2行目に落ちるのを防ぐ
   （AIO対策・インフルエンサーのページと同じやり方） */
.svc-page--inbound .svc-hero__title {
  word-break: keep-all;
}

/* 関連実績は2件だけだが、カードの大きさはほかのサービスページと同じ3列のまま（右の1枠は空く。2026-10-20 本人「ほかとサイズ感が違う」） */

/* ---- 考え方の図（選ばれる理由のセクションの図の枠） ----
   SNS で知ってもらう → 名前で検索される → Web に情報をまとめる（コンテンツSEO）→ AI の答えにも出る（AIO）→ 訪日客に選ばれるブランド。
   文字は HTML で持つ（画像にしない）。作り方は meta・SNS などの改善フロー図（.svc-flowchart）と同じ：
   FIZ のロゴと同じ右上がりの斜め（平行四辺形）の箱・1px の濃い枠線（#212121）・文字 16px 太字・最後の箱だけ黒地白文字。
   違う所：箱をつなぐ矢印を足した（5つの順番を示すため。矢印は赤の小さな目印）。赤い箱と赤い帯の題は置かない（ページの途中に赤い帯を置かない決まり）。
   SP は縦に積み、PC（1024px〜）は横に並べる */
.svc-reason__flow {
  background: none;
  border: 0;
  padding: var(--space-24) 0 var(--space-8);
  color: var(--color-text);
}

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

.svc-flowchart__step {
  width: 320px;
  max-width: 100%;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  color: var(--color-text);
  padding: var(--space-8) var(--space-24);
  text-align: center;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  word-break: keep-all; /* 折ってよい位置は HTML の <wbr> だけ（「もらう」の「う」だけ落ちるのを防ぐ） */
}

/* 箱は平行四辺形。文字は傾けないので、枠だけ ::before に描いて skew する。左右 10px の余白は、傾けた分のはみ出し */
.svc-flowchart__step::before {
  content: "";
  position: absolute;
  inset: 0 10px;
  z-index: -1;
  background: var(--color-white);
  border: 1px solid var(--color-text);
  transform: skewX(-24deg);
}

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

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

/* 括弧の中の語（コンテンツSEO・AIO）。主の文より小さく細くする（最小 14px・太さ 400 の決まり） */
.svc-flowchart__sub {
  display: block;
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-normal);
  color: var(--color-muted);
}

/* 箱と箱の間の矢印（SP は下向き）。赤は小さな目印だけ、の決まりに合わせる */
.svc-flowchart__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--space-24) + 7px);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid var(--color-primary);
  transform: translateX(-50%);
}

@media (min-width: 1024px) {
  .svc-reason__flow {
    --inb-gap: var(--space-24); /* 箱と箱の間隔。1280px 以上で広げる */
    padding: var(--space-24) 0 var(--space-8);
  }

  .svc-flowchart {
    width: 100%;
    max-width: none; /* service-common.css が PC で 600px に絞っているので外す（横並びは本文の幅いっぱいに使う） */
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: var(--inb-gap);
  }

  .svc-flowchart__step {
    width: auto;
    flex: 1 1 0;
    min-height: 72px;
    padding: var(--space-8) var(--space-16);
  }

  /* PC は横に並べるので、矢印は右向き。箱と箱の間（斜めの切れ目の中ほど）の真ん中に置く */
  .svc-flowchart__step:not(:last-child)::after {
    left: auto;
    right: calc(-1 * (var(--inb-gap) / 2 + 5px));
    bottom: auto;
    top: 50%;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid var(--color-primary);
    border-right: 0;
    transform: translateY(-50%);
  }
}

@media (min-width: 1280px) {
  .svc-reason__flow {
    --inb-gap: var(--space-40);
  }

  .svc-flowchart__step {
    padding: var(--space-8) var(--space-24);
  }
}

/* プロジェクトの流れの題名は、小さい「ッ」「ャ」や「ー」を行の頭に置かない（2026-10-20 iPhone の Safari で「ペルソナ・カスタマージャーニーマ／ップの作成」と折れていた） */
.svc-page--inbound .svc-flow h3 {
  line-break: strict;
}

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