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

/* ---- /assets/styles/css/page/service-creative.css ---- */
/* ============================================================
   クリエイティブ制作 ページ専用CSS（2026-09-23 まとめ）
   共通ルールは service-common.css に集約。ここには本ページだけのルールが残る。
   色・文字サイズ・太さ・余白・角丸などの決まりの値は fiz-tokens.css（src/tokens.css の写し）を使う。
   ============================================================ */

/* 見出し（.svc-hero__title）と画像の入れ方（.svc-hero__visual img）は5ページ共通のため service-parts/hero.css へ移動（2026-09-24）。
   ここには読み込み待ちの背景色だけ残す */
.svc-hero__visual {
  background: #eee; /* 画像（sns-hero.png）はまだ書き出されていない。読み込みに失敗している間、この背景色が薄い灰色の枠として見える（2026-09-16） */
}

/* ---- 改善フロー図（画像ではなくHTML/CSSで組む。Figma: 白背景＋赤帯タイトル＋黒文字リード＋縦の流れ図） ---- */
.svc-reason__flow {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 32px 20px;
  color: var(--color-text);
}

.svc-reason__flow-badge {
  white-space: nowrap; /* 「ー」だけ次の行に落ちるのを防ぐ。折る位置は <br class="svc-br-sp"> で決める（2026-09-17 本人指摘・390px幅） */
  background: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（名札の帯） */
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  margin: 0 0 16px;
}

.svc-reason__flow-lead {
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 24px;
  text-align: center;
}

.svc-flowchart {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.svc-flowchart__step {
  width: 100%;
  max-width: 320px;
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  text-align: center;
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  position: relative;
}

/* Figma: 最初の「事業目標」だけ黒地白文字 */
.svc-flowchart__step--dark {
  background: #111111;
  border-color: #111111;
  color: var(--color-white);
}

/* Figma: 途中の「クリエイティブ」だけ赤地白文字（2026-09-24 本人決定: 赤は差し色として使う） */
.svc-flowchart__step--accent {
  background: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
  border-color: var(--color-primary);
  color: var(--color-white);
}

.svc-flowchart__step--branch {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 100%;
}

.svc-flowchart__parallel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.svc-flowchart__parallel li {
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  width: 160px;
  text-align: center;
}

.svc-flowchart__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 2px;
  height: 10px;
  background: var(--color-border);
  transform: translateX(-50%);
}

/* sns専用: 改善フロー図（BRAND〜UGCの5段）。
   Figma（PC-sns-要素一覧.md 131〜176行）は「箱を積んで線でつなぐ」Meta の図ではなく、
   帯（グラデーション・中央 668px・白 24px）→ 1行のリード → 5行の表（左にグラデーションのタグ 133×38、右に見出し 24px＋説明 15px）。
   行の枠・つなぐ線・赤い強調の段は無い。最初は Meta の作りを流用していたが本人指摘で作り直した（2026-09-16） */
.svc-reason__flow--plain {
  border: 0;               /* Figma は白い面だけで枠線が無い */
  padding: 32px 0;
}

.svc-reason__flow--plain .svc-reason__flow-badge {
  background: var(--color-primary); /* 主ボタンと同じグラデーション（Figma id 3:9213） */
  clip-path: polygon(23px 0, 100% 0, calc(100% - 23px) 100%, 0 100%); /* 平行四辺形（Figma の path：横 23px／縦 33px の傾き） */
  border-radius: 0;
  text-align: center;
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  padding: 6px 16px;
  margin: 0 auto 24px;
  max-width: 668px;
}

.svc-reason__flow--plain .svc-reason__flow-lead {
  font-size: 15px;
  margin-bottom: 32px;
}

.svc-flowchart--detailed {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  max-width: 567px;        /* Figma の表の幅 */
  margin: 0 auto;
}

.svc-flowchart--detailed .svc-flowchart__step {
  max-width: none;
  display: grid;
  grid-template-columns: 110px 1fr;
  column-gap: 12px;
  align-items: start;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-align: left;
}

.svc-flowchart--detailed .svc-flowchart__step::after {
  display: none; 
}

/* つなぐ線は無い */
.svc-flowchart__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  background: linear-gradient(90deg, #c10000 0%, #3a3838 100%); /* Figma id 3:9182：左が赤、右が黒 */
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%); /* 平行四辺形（Figma の path：横 20px／縦 38px の傾き）。FIZ のロゴと同じ右上がり */
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  letter-spacing: .5px;
  border-radius: 0;
  padding: 3px 8px 0; /* Josefin Sans は字が行の上寄りに置かれるため、上の余白を足して見た目の中央に合わせる。本番の CONTACT ボタン（上15/下12）と同じ考え方（2026-09-17 本人指摘） */
  line-height: 1;
  margin: 2px 0 0;
  grid-row: 1 / span 2;
}

.svc-flowchart__step strong {
  display: block;
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1.3;
  margin: 0 0 4px;
}

.svc-flowchart__step p {
  margin: 0;
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-normal);
  color: var(--color-dark-sub);
  line-height: 1.5;
}

/* Meta 由来の「赤い強調の段」は、この図では使わない */
.svc-flowchart--detailed .svc-flowchart__step--accent {
  background: none;
  color: var(--color-text);
}

/* ---- プランニングフロー図（クリエイティブ制作専用: svc-reason__combo） ----
   Figma（creative-02.png）は SNS の「5行の表」と違い、
   帯 → 「プロダクトアウト思考／マーケットイン思考」の2カラム比較（三角アイコン＋見出し＋補足＋本文＋結果の帯）→ 結論の1文、という構成。
   svc-flowchart--detailed は流用できないため、新規クラスで組んだ（実装メモ参照） */
.svc-reason__combo {
  background: none; /* Figma（PC・SP とも）に白い囲いは無い（2026-09-17 本人指摘） */
  padding: 24px 0 8px;
  text-align: center;
}

.svc-reason__combo-badge {
  /* 他ページの帯と同じ：平行四辺形のグラデーション。1行に固定し、スマホは小さく（Figma SP の帯は1行・小さい文字） */
  background: var(--color-primary);
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  border-radius: 0;
  white-space: nowrap;
  max-width: 668px;
  margin: 0 auto 20px;
  padding: 6px 24px;
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold, 700); /* 2026-09-24 DADS対応: 500→700 */
  text-align: center;
}

/* 横スクロール修正（2026-09-24）: 帯の文字は改行しない指定（white-space:nowrap）なのに、375px幅だと
   文字が帯の外まで伸びて横スクロールの原因になっていた。375〜414px幅だけ、HTML側に入れた
   <br class="svc-reason__combo-badge-br"> で改行する。768px幅からは元どおり1行のまま（見た目を変えない） */
@media (min-width: 768px) {
  .svc-reason__combo-badge-br {
    display: none;
  }
}

.svc-reason__combo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto 20px;
}

.svc-reason__combo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.svc-reason__combo-col .svc-reason__combo-result {
  margin-top: auto; /* 右の列の補足が2行になっても、「〜が見えてくる」の高さを左右でそろえる */
}

/* 三角（下向き＝プロダクトアウト思考／上向き＝マーケットイン思考）。Figmaは細い白の縁取りがある二重線だったが、
   ここでは内側にひとまわり小さい三角を重ねて縁取りを表現する（捨てた案：box-shadowでの縁取り → clip-pathの角では効かず、二重の三角に変更） */
.svc-reason__combo-tri {
  position: relative;
  display: block;
  width: 56px;
  height: 48px;
  margin: 0 auto 12px;
  background: none; /* 白い四角が三角の後ろに見えていた（灰色の面の上）。2026-09-17 */
}

.svc-reason__combo-tri::before,
.svc-reason__combo-tri::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-primary) 0%, #1a1a1a 100%); /* 2026-09-24 本人決定: 赤は差し色として使う（三角アイコン） */
}

.svc-reason__combo-tri::after {
  inset: 3px;
  background: linear-gradient(180deg, var(--color-primary) 0%, #1a1a1a 100%); /* 2026-09-24 本人決定: 赤は差し色として使う（三角アイコン） */
}

.svc-reason__combo-tri--down::before {
  clip-path: polygon(0 0, 100% 0, 50% 100%); 
}

.svc-reason__combo-tri--down::after {
  clip-path: polygon(4% 0, 96% 0, 50% 92%); 
}

.svc-reason__combo-tri--up::before {
  clip-path: polygon(50% 0, 100% 100%, 0 100%); 
}

.svc-reason__combo-tri--up::after {
  clip-path: polygon(50% 8%, 96% 100%, 4% 100%); 
}

.svc-reason__combo-name {
  color: #212121; /* 2026-09-24 本人決定: 飾りの赤を減らす */
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  margin: 0 0 4px;
}

.svc-reason__combo-sub {
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 12px;
}

.svc-reason__combo-main {
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 4px;
}

.svc-reason__combo-etc {
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-normal);
  color: var(--color-dark-sub);
  margin: 0 0 12px;
}

.svc-reason__combo-result {
  display: inline-block;
  background: linear-gradient(90deg, var(--color-primary) 0%, #3a3838 100%); /* 2026-09-24 本人決定: 赤は差し色として使う（結果の帯） */
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  color: var(--color-white);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  padding: 6px 18px;
  margin: 0 auto;
  white-space: nowrap;
}

.svc-reason__combo-conclusion {
  color: #212121; /* 2026-09-24 本人決定: 飾りの赤を減らす */
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  margin: 0 0 24px;
}

/* Figmaで「制作プロセスの最適化」「効果検証・改善」の2行だけ白いアイコン＋丸背景で描かれていたための修飾クラス（実装メモ参照。2026-09-24 本人決定: 赤を差し色として使う） */
.svc-value__icon--circle {
  align-items: center;
  justify-content: center;
  background: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（アイコン） */
  border-radius: 50%;
  padding: 6px;
  box-sizing: border-box;
}

/* 文字揃えの固定（5ページ共通ぶん）は service-parts/text-align.css へ移動（2026-09-24）。
   クリエイティブだけの追加クラス（svc-reason__combo-*）はここに残す。書き写す前は「左揃えの指定」に
   このクラスを足したうえで、後ろの「中央揃えに戻す指定」にも同じクラスを足して中央に戻していた
   （text-align は後勝ち。letter-spacing・text-justify は前の指定のまま残る）。結果は同じ値を1つのルールで指定する */
.svc-reason__combo-name, .svc-reason__combo-sub, .svc-reason__combo-main, .svc-reason__combo-etc, .svc-reason__combo-result, .svc-reason__combo-conclusion {
  text-align: center;
  letter-spacing: 0;
  text-justify: none;
}

@media (min-width: 768px) {
  .svc-flowchart__step,
    .svc-flowchart__parallel li {
      font-size: 15px;
    
  }

}

@media (min-width: 1024px) {
  /* グリッド型 flow（.svc-flow--grid）の PC 見た目は service-parts/flow.css へ移動（2026-09-24。SNS・インフルエンサー・クリエイティブの3ページで同じ指定だったため） */

  .svc-reason__flow {
      padding: var(--space-40);

  }

  .svc-reason__flow--plain {
      padding: 40px 0 24px;

  }

  .svc-reason__flow--plain .svc-reason__flow-badge {
      font-size: 24px;
      padding: 4px 16px;   /* Figma: 帯の高さ 33px */
      margin-bottom: 38px;

  }

  .svc-flowchart--detailed {
      gap: 25px;           /* Figma: 行の間隔 25px */

  }

  .svc-flowchart--detailed .svc-flowchart__step {
      grid-template-columns: 133px 1fr;
      column-gap: 14px;

  }

  .svc-flowchart__tag {
      height: 38px;
      font-size: 15px;
      margin-top: 5px;

  }

  .svc-flowchart__step strong {
      font-size: 24px;

  }

  .svc-flowchart__step p {
      font-size: 15px;

  }

  .svc-reason__combo {
      padding: 40px 0 16px;
    
  }

  .svc-reason__combo-badge {
      font-size: 24px;
      padding: 4px 32px;
      clip-path: polygon(23px 0, 100% 0, calc(100% - 23px) 100%, 0 100%);
      margin-bottom: 32px;
    
  }

  .svc-reason__combo-grid {
      max-width: 760px;
      gap: var(--space-40);
    
  }

  .svc-reason__combo-tri {
      width: 96px;
      height: 82px;
    
  }

  .svc-reason__combo-name {
      font-size: 22px;
    
  }

  .svc-reason__combo-sub {
      font-size: var(--font-size-min);
    
  }

  .svc-reason__combo-main {
      font-size: 20px;
    
  }

  .svc-reason__combo-etc {
      font-size: var(--font-size-min);
    
  }

  .svc-reason__combo-result {
      font-size: var(--font-size-min);
      padding: 10px 20px;
    
  }

  .svc-reason__combo-conclusion {
      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-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); }
}