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

/* ---- /assets/styles/css/page/service-common.css ---- */
/* ============================================================
   サービスページ（一覧・SNS・meta・インフルエンサー・クリエイティブ）の土台（2026-09-24 部品ごとの整理）
   ここにあるのは、どの部品にも属さない土台だけ：ページ全体の余白・見出し・ボタン・スクロール連動フェードインなど。
   パンくず・ヒーロー・アンカーナビ・課題カード・選ばれる理由・CTA帯・提供価値・流れ・料金・関連実績・FAQ の
   部品ごとの見た目は assets/styles/css/service-parts/ に分けた（形は template-parts/service/ の同名 php）。
   色・文字サイズ・太さ・余白・角丸などの決まりの値は fiz-tokens.css（src/tokens.css の写し）を使う。
   ============================================================ */

/* ---- ページ基礎（svc- プレフィックスで既存CSSと衝突回避） ---- */
.svc {
  /* font-weight は 2026-09-24 に外した: common.css の html が 400 になったので重複だった */
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-white);
  font-size: 15px;
  line-height: var(--line-height-body);
}

.svc-wrap {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 20px;
}

/* セクション上下余白: Figma（PC-meta要素一覧）は各セクション余白60px基準 */
.svc-section {
  padding: var(--space-40) 0;
  scroll-margin-top: 100px; /* 浮いた本番ヘッダー（下端 約85px）に見出しが隠れないよう、ジャンプの着地をずらす */
}

.svc a:focus-visible,
.svc button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- 見出しセット（eyebrow → H2 →（必要なら）リード文） ---- */
.svc-eyebrow {
  font-family: var(--font-en);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（見出し上の英字ラベル） */
  margin: 0 0 8px;
}

.svc-h2 {
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin: 0 0 16px;
}

.svc-lead {
  font-weight: var(--font-weight-bold);
  margin: 0 0 24px;
  font-size: var(--font-size-body);
}

/* ---- 文中リンク（選ばれる理由・よくある質問の文の後ろ。2026-09-27 追加）
   赤は文字に使わない決まり（tokens.css）なので、色は本文のまま・下線で示す ---- */
.svc-textlink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.svc-textlink:hover {
  text-decoration: none;
}

.svc-br-sp {
  display: inline; 
}

/* ---- ボタン ---- */
.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 40px;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-min);
  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 {
  /* Figma の指定：横向きグラデーション #3a3838 → #7d1c1c（50%）→ #c10000、角丸 999、余白 14px 40px、文字 白 20px 900（2026-09-13 本人指摘で修正） */
  /* カーソルオンで「グラデーションを流す」ため、背景を2倍の幅（黒→赤→黒）にして左半分だけ見せる。
     見た目は元の 黒→赤 と同じ。見比べ（ボタンのホバー案.html）で本人が案2を選択（2026-09-13） */
  /* 2026-09-24 本人指示：流れる向きを左→右に（先に進む印象）。背景を 赤→黒→赤 にして右半分（黒→赤）を見せ、カーソルオンで左端へ動かす */
  background: linear-gradient(90deg, #c10000 0%, #dc2618 50%, #c10000 100%); /* 2026-09-24 本人指摘：明るい所が2本あり縞に見えたため、山を1つにしてなだらかに */ /* 2026-09-24 本人決定：黒→赤は重く不穏に見えるため、赤→明るい赤に。黒い帯の上でも形が分かる */
  background-size: 200% 100%;
  background-position: 100% 0;
  /* 2026-09-24 本人指示：影を付けて押せるボタンだと分かるようにする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, .24);
  transition: background-position .8s var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
  border: 0; /* 透明の枠線の下にグラデーションが回り込み、左端に赤いふちが見えていたので枠線をなくした（2026-09-13 本人指摘） */
  color: var(--color-white);
  padding: var(--space-16) var(--space-40); /* 枠線 1px ぶんを余白に足して、大きさは同じに保つ */
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  min-height: 0;
  line-height: 1.25;
}

.svc-btn--primary:hover {
  /* 背景の位置を右端へ動かし、黒→赤の境目が右へ流れる。載せている間は赤が左に来る並びになる。
     案1「反転（白地に赤文字）」は試作したが、本人が案2を選んだので捨てた（2026-09-13） */
  background-position: 0 0;
  color: var(--color-white);
  /* 2026-09-24 本人指示：グラデーションをゆっくり流す（.5s→.8s）。カーソルオンで少し浮かせて影を広げる */
  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 */
}

/* スクロールで現れる動き（旧 .svc-fade）は全ページ共通の部品に移した（parts/fade-in.css・2026-10-06） */

.svc-section, .svc-cta {
  scroll-margin-top: 166px; 
}


@media (prefers-reduced-motion: reduce) {
  .svc-btn--primary:hover::after { transition: none; left: -75%; }}



@media (min-width: 768px) {
  .svc {
      font-size: var(--font-size-body);
    
  }

  .svc-section {
      padding: var(--space-48) 0;
    
  }

  .svc-h2 {
      font-size: 32px;

  }}



@media (min-width: 1024px) {
  .svc-wrap {
      padding: 0 40px;
    
  }

  .svc-section {
      padding: var(--space-64) 0;
    
  }

  .svc-br-sp {
    display: none; 
  }

  .svc-h2 {
      font-size: 42px;
      margin-bottom: var(--space-24);
    
  }

  .svc-eyebrow {
      font-size: 20px;
    
  }

  .svc-lead {
      font-size: var(--font-size-body);
    
  }

  .svc-btn {
      min-height: 56px;
      font-size: 15px;
    
  }

  .svc-btn--primary {
      min-height: 0;
      font-size: 20px; /* PC のメディアクエリで .svc-btn が 15px に上書きするので、主ボタンは Figma の 20px を保つ */
    
  }

  .svc-flowchart {
      max-width: 600px;
      margin: 0 auto;
    
  }

  .svc-section, .svc-cta {
    scroll-margin-top: 166px; 
  }}



@media (max-width: 1023px) {

  .svc-section, .svc-cta {
    scroll-margin-top: 106px; 
  }}



@media (prefers-reduced-motion: reduce) {
  .svc * {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    
  }}

/* ---- /assets/styles/css/service-parts/hero.css ---- */
/* ============================================================
   サービス各ページの1枚目の帯（見出し＋画像）の見た目。組み方は template-parts/service/hero.php。
   SNS・meta・インフルエンサー・クリエイティブ・SEOコンサルティングの5ページで使う（サービス一覧の1枚目の帯は形が違うため別。service-service.css 側）。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   見出し（.svc-hero__title）と画像の入れ方（.svc-hero__visual img）は、5ページのうち値が同じ所をここに集約した
   （2026-09-24 SEOコンサルティングページ追加時、書き写しに気づいて整理）。値が違う所だけ、そのページの CSS に残る：
   - インフルエンサーだけ word-break: keep-all（見出しの折り返し位置を <wbr> だけに絞るため）
   - meta だけ画像の切り抜き位置が独自（Figma の割合指定のクロップ）
   ============================================================ */
/* ---- ヒーロー ---- */
.svc-hero {
  /* 2026-09-24 余白の決まり: パンくず下端→題名上端／題名下端→中身上端（PCは変数が自動で切り替わる）。
     題名のすぐ下は .svc-section ではなく .svc-subnav（ページ内メニュー）で、
     svc-subnav 側に上の余白が無いため、二重にはならない（/service/ページのような0上書きは不要） */
  padding: var(--space-breadcrumb-to-title) 0 var(--space-title-to-content);
}

.svc-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 画像の枠（形・角丸・比率・最大幅）は4ページで同じ。中の画像の切り抜き位置と、読み込み待ちの背景色は
   ページごとに違うため service-<名前>.css に残す（2026-09-24 部品ごとの整理でここへ移動）。
   横スクロール修正（2026-09-24）: 768px からの横並びで、この枠だけ縮められない指定（flex: none; width: 45%;）が
   service-common.css に残っていて、ページ側の width:100%/max-width:500px と合わずタブレット幅ではみ出していた。
   その指定を削除。ここでは幅を固定せず、他の要素と同じく必要なら縮められるようにする */
.svc-hero__visual {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 500 / 370;
  width: 100%;
  max-width: 500px;
}

/* 画像の入れ方。SNS・インフルエンサー・クリエイティブ・SEOコンサルティングの4ページで同じ（切り抜きなし・そのままcover）。
   meta だけ Figma の割合指定でクロップするため service-meta.css に独自の指定が残る */
.svc-hero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.svc-hero__title {
  font-size: 30px; /* SP-meta-要素一覧.md のヒーロー見出しサイズ(30px)に合わせる */
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--color-text);
  /* 本番の共通 CSS が全要素を両端揃え（text-align: justify）にしているため、2行に折れると1行目の文字間が
     引き伸ばされていた。見出しは左揃え・文字間固定にし、改行位置は <br class="svc-br-sp"> で決める（2026-09-17 本人指摘） */
  text-align: left;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal; /* インフルエンサーだけ keep-all で上書き（service-influencer.css） */
}

.svc-hero__en {
  font-family: var(--font-en);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-primary);
  margin: 0 0 16px;
  letter-spacing: 1px;
}

/* スマホだけ改行。PC では消す */
.svc-hero__copy {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  margin: 0 0 10px;
  color: var(--color-text);
}

.svc-hero__desc {
  font-size: var(--font-size-body);
  margin: 0 0 24px;
  color: var(--color-text);
}



@media (min-width: 768px) {

  .svc-hero__inner {
      flex-direction: row;
      align-items: center;
    
  }

  .svc-hero__body {
      flex: 1;
    
  }}



@media (min-width: 1024px) {

  .svc-hero__en {
      font-size: var(--font-size-body);
    
  }

  .svc-hero__title {
      font-size: 30px; /* 2026-09-24：42px の指定は各ページの 30px に上書きされ一度も効いていなかったため、実際の見た目の 30px にそろえた */
  }

  .svc-hero__copy {
      font-size: 18px;
    
  }

  .svc-hero__desc {
      max-width: 680px;
    
  }}

/* ---- /assets/styles/css/service-parts/subnav.css ---- */
/* ============================================================
   ページ内の目次（アンカーナビ）の見た目。組み方は template-parts/service/subnav.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- アンカーナビ（デザインシステム6-8） ---- */
.svc-subnav {
  /* 追従（sticky）はやめた。本番に無い挙動で、浮いたヘッダーと重なるため（2026-09-11） */
  position: static;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-gray-light);
  overflow: visible; /* スクロールは内側の箱で行う。下線までぼけないように（2026-09-17） */
  position: sticky;
  top: 100px;
  z-index: 20;
  transition: top 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.svc-subnav__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none; /* 目次はぼかしで「続き」を示すので、スクロールバーは出さない（PC のブラウザで太い線が出るのを防ぐ） */
  display: flex;
  gap: var(--space-8);
  height: 56px;
  align-items: center;
  white-space: nowrap;
}

.svc-subnav__link {
  flex: none;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.svc-subnav__link:hover {
  background: #212121; /* 2026-09-24 本人決定: 飾りの赤を減らす（現在地の表示は is-active に残す） */
  color: var(--color-white);
}

/* ---- 目次（スマホ）：右端をぼかして「続きがある」と見せる ----
   スクロールできることが分かりにくいと本人指摘（2026-09-17）。案1「右端のぼかし」を採用（案2 スクロールバー常時表示・案3 2段折り返しは捨てた：線が増える／Figma の1行から離れる）。
   ぼかしは mask で描く（スクロールする箱自体に掛けるので、動いても端に留まる）。左端にも出すかは JS が data-fade で切り替える */
.svc-subnav__inner[data-fade="right"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); 
}

.svc-subnav__inner[data-fade="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); 
}

.svc-subnav__inner[data-fade="left"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); 
}

.svc-subnav__inner::-webkit-scrollbar {
  display: none; 
}

.svc-subnav.is-header-hidden {
  top: 0; 
}

.svc-subnav__link.is-active {
  background: var(--color-primary); color: var(--color-white); 
}



@media (min-width: 1024px) {

  .svc-subnav__inner {
      padding: 0 40px;
    
  }

  .svc-subnav__inner[data-fade] {
    -webkit-mask-image: none; mask-image: none; 
  }

  .svc-subnav {
    top: 100px; 
  }}



@media (max-width: 1023px) {
  .svc-subnav {
      position: sticky;
      top: 90px; /* JS が動かないときの備え：ヘッダーの下（90px）に並べて出す。JS が動いたら下の .is-auto-hide に切り替わる */
      z-index: 20;
      /* 本番ヘッダーは下スクロールで隠れ（.is-hidden、0.3s）、上スクロールで出る。隠れている間は目次を画面上端に上げ、
         出たらヘッダー分（90px）下がる。JS がヘッダーの class を見て .is-header-hidden を付け替える（2026-09-17 本人指摘：隙間が空くだけで気持ち悪い） */
      transition: top 0.3s cubic-bezier(0.4, 0.4, 0, 1);
    
  }

  /* 2026-09-21 本人決定：スマホではヘッダーと目次を同時に出さない（2つ並ぶと画面の上が約150px埋まり、浮いた帯と白い帯が並んで違和感があった）。ヘッダーが出ている間は目次を画面の外（上）に置き、ヘッダーが隠れたら .is-header-hidden の top:0 で出す。ヘッダーは60px（下端90px）。PCは従来どおり並べて出す */
  .svc-subnav.is-auto-hide:not(.is-header-hidden) {
    top: -100px; 
  }

  .svc-subnav.is-header-hidden {
      top: 0;
    
  }

  .svc-subnav__link.is-active {
      background: var(--color-primary);
      color: var(--color-white);
    
  }}

/* ---- /assets/styles/css/service-parts/challenges.css ---- */
/* ============================================================
   「こんな課題はありませんか」課題カードの見た目。組み方は template-parts/service/challenges.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 課題カード ---- */
.svc-cards {
  display: grid;
  gap: var(--space-16);
  counter-reset: card;
}

.svc-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
  padding: var(--space-24);
}

.svc-card__title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  margin: 0 0 8px;
  color: var(--color-text);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Figmaの課題カードは連番でなくアイコン表示のため、アイコンありのカードは装飾番号を出さない */
/* アイコンは見出しの上下の中央に置く（2026-10-29 本人指摘：見出しが2行のとき1行目に寄っていた。選ばれる理由の見出しと同じ揃え方） */
.svc-card--icon .svc-card__title {
  align-items: center;
}

.svc-card--icon .svc-card__icon {
  flex: none;
  width: 32px;
  height: 32px;
}

.svc-card--numbered .svc-card__title::before {
  counter-increment: card;
  content: counter(card, decimal-leading-zero);
  display: block;
  font-family: var(--font-en);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '13'px→14px */
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（課題カードの番号） */
  letter-spacing: 1px;
  margin-bottom: var(--space-8);
}

.svc-card__desc {
  margin: 0;
  font-size: var(--font-size-body);
  color: var(--color-text);
}

.svc-card__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
}

.svc-card__chips li {
  font-size: var(--font-size-min);
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}



@media (min-width: 768px) {

  .svc-cards {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-24);
    
  }}



@media (min-width: 1024px) {

  .svc-cards {
      grid-template-columns: repeat(3, 1fr);
    
  }

  .svc-cards--five {
      grid-template-columns: repeat(3, 1fr);
    
  }}

/* ---- /assets/styles/css/service-parts/reasons.css ---- */
/* ============================================================
   「選ばれる理由」の見た目。組み方は template-parts/service/reasons.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。ページだけの図（改善フロー図など）は各ページの CSS に残る。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 選ばれる理由 ---- */
.svc-reason {
  background: var(--color-bg-soft);
}

.svc-reason__points {
  display: grid;
  gap: var(--space-16);
  margin-bottom: 32px;
}

.svc-reason__point {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-24);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1); /* Figma の note カードの影（DROP_SHADOW 0,2 / ぼかし8 / 黒10%）。抜けていたと本人指摘（2026-09-17） */
}

.svc-reason__point h3 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.svc-reason__icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
}

.svc-reason__point p {
  margin: 0;
  font-size: var(--font-size-body);
}



@media (min-width: 768px) {

  .svc-reason__points {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
  }

  /* 3つ横並びのとき、見出しの行と本文の行をカードどうしでそろえる（見出しが1行と2行で混ざっても本文の始まりがそろう。2026-09-27 本人指示） */
  .svc-reason__point {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
  }}

/* ---- /assets/styles/css/service-parts/cta.css ---- */
/* ============================================================
   お問い合わせの帯（ダーク）の見た目。組み方は template-parts/service/cta.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- CTA帯 ---- */
.svc-cta {
  /* 2026-09-24 本人決定: 赤は差し色として絞る。帯は背景#F2F2F2・文字#212121に。ボタンは赤のまま残す */
  background: var(--color-bg-neutral, #F2F2F2);
  color: var(--color-text);
  text-align: center;
  padding: var(--space-40) 0;
}

.svc-cta--dark {
  background: var(--color-text);
  color: var(--color-white); /* 2026-09-24 本人決定: 帯を#F2F2F2にしたぶん、ダーク帯側は白文字を明示 */
}

.svc-cta__title {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  margin: 0 0 16px;
}

.svc-cta__desc {
  margin: 0 0 24px;
  font-size: var(--font-size-body);
}



@media (min-width: 1024px) {

  .svc-cta__title {
      font-size: 32px;
    
  }}

/* ---- /assets/styles/css/service-parts/values.css ---- */
/* ============================================================
   提供価値カード（アイコン＋見出し＋説明＋タグ）の見た目。組み方は template-parts/service/values.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 提供価値（横長カード：アイコン＋見出し＋説明＋#タグ） ---- */
.svc-values-section {
  background: var(--color-bg-neutral, #F2F2F2); /* 2026-09-24 本人決定: うすいピンク→決まりの薄背景色 */
}

.svc-values {
  display: grid;
  gap: var(--space-16);
}

.svc-value {
  background: var(--color-white);
  border-radius: var(--radius-card);
  border: 0.5px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（カードの枠線） */
  padding: 24px 20px;
}

.svc-value__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

.svc-value__icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
}

.svc-value__title {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-text);
}

.svc-value__desc {
  margin: 0 0 12px;
  font-size: var(--font-size-body);
}

.svc-value__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
}

.svc-value__tags li {
  /* Figma：#タグは 16px・太さ400・色 #666666（本文より薄い灰色）。本文と同じ濃さ・太さになっていて文章量が多く見えると本人指摘（2026-09-17） */
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-normal);
  color: #666666;
}



@media (min-width: 1024px) {

  .svc-value__tags li {
      font-size: var(--font-size-body); /* Figma の PC 指定 */
      font-size: var(--font-size-body);
    
  }

  /* 5枚のカードで左の列の幅を共有する（subgrid）。一番長い見出しに合わせた幅を全カードで使うので、右の説明文の始点がそろう
       （2026-09-17 本人指摘：カードごとに幅が変わって右側の始点がガタガタになった） */
  .svc-values {
      display: grid;
      grid-template-columns: minmax(287px, max-content) 1fr;
      grid-auto-rows: 1fr; /* カードの高さを一番高いカードにそろえる（2026-10-29 本人指摘：説明が1行のカードだけ低く見えた） */
      column-gap: 32px;
    
  }

  .svc-value {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      row-gap: 10px;
      align-items: start;
      align-content: center; /* 高さをそろえて余った分は上下に分け、説明文を見出しと同じ高さに置く */
      padding: 36px 32px 37px;
      border: 0.5px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
    
  }

  .svc-value__head {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: center;
      margin: 0;
      gap: 11px;
    
  }

  .svc-value__icon {
      width: 40px;
      height: 40px;
    
  }

  .svc-value__title {
      font-size: 24px;
      line-height: 1.3;
      white-space: nowrap;
    
  }

  .svc-value__desc {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      font-size: var(--font-size-body);
      line-height: 1.6;
    
  }

  /* #タグの無いカード（リスティング広告など）は、説明文を見出しと同じ2行分に置いて上下の中央に寄せる
     （2026-10-29 本人指摘「上下中央寄せじゃない」。空いたタグの行と行間の分だけ説明文が上にずれていた） */
  .svc-value__desc:last-child {
      grid-row: 1 / span 2;
      align-self: center;
  }

  .svc-value__tags {
      grid-column: 2;
      grid-row: 2;
      gap: 6px 16px;
    
  }}

/* ---- /assets/styles/css/service-parts/flow.css ---- */
/* ============================================================
   プロジェクトの流れ（お問い合わせ〜レポート納品の8ステップ）の見た目。組み方は template-parts/service/flow.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。グリッド型の見た目は meta だけ違うため、meta 用の指定は service-meta.css に残る。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 流れ（ol・順序に意味あり／meta専用: グリッド型8ステップ） ---- */
.svc-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-16);
  counter-reset: flow;
}

.svc-flow li {
  border-left: 3px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
  padding: 4px 0 4px 20px;
}

.svc-flow h3 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  margin: 0 0 4px;
}

.svc-flow p {
  margin: 0;
  font-size: var(--font-size-body);
}

.svc-flow--grid {
  counter-reset: flowgrid;
  gap: 20px;
}

.svc-flow--grid li {
  /* スマホ（Figma SP-meta の SP flow）：カード 350×126・白・角丸なし・余白 18/17/19/16。
     左に丸枠の番号 45px、間隔 16、右に CONTACT（12px 赤）→ 見出し（16px）→ 説明（12px #666666）。カード間 20px
     （2026-09-17 本人指摘：4ページとも縦積みでデザインと違う） */
  display: grid;
  grid-template-columns: 45px 1fr;
  column-gap: var(--space-16);
  align-items: start;
  border-radius: 0;
  background: var(--color-white);
  border: 0.5px solid #dedede;
  padding: 18px 17px 19px 16px;
  position: relative;
}

.svc-flow--grid li::before {
  counter-increment: flowgrid;
  content: counter(flowgrid, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（流れの丸番号） */
  font-family: var(--font-en);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
  line-height: 1;
  padding-top: 3px; /* Josefin Sans は字が行の上寄りに置かれるため、上に 3px 足して丸の中央に見せる（2026-09-17 本人指摘・4ページ共通） */
  margin: 0;
  grid-row: 1 / span 3;
}

/* Figma SP：丸（45px）の上下 ＝ CONTACT（12px・行高15）＋間6＋見出し（16px・行高20）＝41px。行の高さを合わせて丸と見出しの高さをそろえる（2026-09-17 本人指摘） */
.svc-flow--grid .svc-flow__en {
  grid-column: 2; margin: 2px 0 6px; line-height: 15px; 
}

.svc-flow--grid li h3 {
  grid-column: 2; margin: 0 0 16px; font-size: var(--font-size-body); line-height: 20px; 
}

.svc-flow--grid li p:not(.svc-flow__en) {
  grid-column: 2; margin: 0; font-size: var(--font-size-body); color: #666666; 
}

.svc-flow__en {
  font-family: var(--font-en);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '12'px→14px */
  font-weight: var(--font-weight-bold);
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
  margin: 0 0 4px;
  letter-spacing: 1px;
}



@media (min-width: 768px) {

  .svc-flow--grid {
      grid-template-columns: repeat(2, 1fr);

  }}

/* PC（1024px〜）のグリッド型の見た目は SNS・インフルエンサー・クリエイティブ・SEOコンサルティング・インバウンド集客支援の5ページで共通（メタだけ別の見た目のため service-meta.css に残す）。
   各ページとも <main> に svc-page--sns / svc-page--influencer / svc-page--creative / svc-page--seo-consulting / svc-page--inbound が付く前提で絞る（2026-09-24 部品ごとの整理でここへ移動。元は各ページの CSS に3回重複していた。SEOコンサルティングページ追加で4ページに。2026-10-20 インバウンド集客支援ページ追加で5ページに。2026-10-29 リスティング広告運用代行ページ（svc-page--listing-ads）追加で6ページに。2026-11-11 採用広告運用代行ページ（svc-page--recruiting-ads）追加で7ページに）。 */
@media (min-width: 1024px) {
  .svc-page--sns .svc-flow--grid,
  .svc-page--influencer .svc-flow--grid,
  .svc-page--creative .svc-flow--grid,
  .svc-page--seo-consulting .svc-flow--grid,
  .svc-page--inbound .svc-flow--grid,
  .svc-page--listing-ads .svc-flow--grid,
  .svc-page--recruiting-ads .svc-flow--grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr; /* 上の段と下の段の箱を同じ高さにする（2026-10-29 本人指摘「1つ1つのサイズをみんな同じにして」） */
    column-gap: 20px;
    row-gap: 14px;
    padding: 0 20px; /* Figma は行の内側 1160px */
  }

  .svc-page--sns .svc-flow--grid li,
  .svc-page--influencer .svc-flow--grid li,
  .svc-page--creative .svc-flow--grid li,
  .svc-page--seo-consulting .svc-flow--grid li,
  .svc-page--inbound .svc-flow--grid li,
  .svc-page--listing-ads .svc-flow--grid li,
  .svc-page--recruiting-ads .svc-flow--grid li {
    display: block;
    position: relative;
    z-index: 0;
    border: 0;
    border-radius: 0;
    background: none;
    min-height: 102px;
    padding: 13px 24px 12px 48px;
  }

  .svc-page--sns .svc-flow--grid li::before,
  .svc-page--influencer .svc-flow--grid li::before,
  .svc-page--creative .svc-flow--grid li::before,
  .svc-page--seo-consulting .svc-flow--grid li::before,
  .svc-page--inbound .svc-flow--grid li::before,
  .svc-page--listing-ads .svc-flow--grid li::before,
  .svc-page--recruiting-ads .svc-flow--grid li::before {
    counter-increment: none;
  }

  .svc-page--sns .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--influencer .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--creative .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--seo-consulting .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--inbound .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--listing-ads .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--recruiting-ads .svc-flow--grid li p:not(.svc-flow__en) {
    margin: 0;
    font-size: var(--font-size-min);
    line-height: 1.35;
    color: #121212;
  }

  .svc-page--sns .svc-flow--grid li h3,
  .svc-page--influencer .svc-flow--grid li h3,
  .svc-page--creative .svc-flow--grid li h3,
  .svc-page--seo-consulting .svc-flow--grid li h3,
  .svc-page--inbound .svc-flow--grid li h3,
  .svc-page--listing-ads .svc-flow--grid li h3,
  .svc-page--recruiting-ads .svc-flow--grid li h3 {
    position: relative;
    margin: 0 0 8px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: #212121; /* 2026-09-24 本人決定: 飾りの赤を減らす */
    line-height: 1.25;
  }

  /* 箱の形：赤い層の上に、1px 内側の白い層を重ねて枠線に見せる */
  .svc-page--sns .svc-flow--grid li::before, .svc-page--sns .svc-flow--grid li::after,
  .svc-page--influencer .svc-flow--grid li::before, .svc-page--influencer .svc-flow--grid li::after,
  .svc-page--creative .svc-flow--grid li::before, .svc-page--creative .svc-flow--grid li::after,
  .svc-page--seo-consulting .svc-flow--grid li::before, .svc-page--seo-consulting .svc-flow--grid li::after,
  .svc-page--inbound .svc-flow--grid li::before, .svc-page--inbound .svc-flow--grid li::after,
  .svc-page--listing-ads .svc-flow--grid li::before, .svc-page--listing-ads .svc-flow--grid li::after,
  .svc-page--recruiting-ads .svc-flow--grid li::before, .svc-page--recruiting-ads .svc-flow--grid li::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
    clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 50%, calc(100% - 19px) 100%, 0 100%);
  }

  .svc-page--sns .svc-flow--grid li::after,
  .svc-page--influencer .svc-flow--grid li::after,
  .svc-page--creative .svc-flow--grid li::after,
  .svc-page--seo-consulting .svc-flow--grid li::after,
  .svc-page--inbound .svc-flow--grid li::after,
  .svc-page--listing-ads .svc-flow--grid li::after,
  .svc-page--recruiting-ads .svc-flow--grid li::after {
    inset: 1px 1px 1px 1px;
    background: var(--color-white);
    clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 50%, calc(100% - 19px) 100%, 0 100%);
  }

  .svc-page--sns .svc-flow__en,
  .svc-page--influencer .svc-flow__en,
  .svc-page--creative .svc-flow__en,
  .svc-page--seo-consulting .svc-flow__en,
  .svc-page--inbound .svc-flow__en,
  .svc-page--listing-ads .svc-flow__en,
  .svc-page--recruiting-ads .svc-flow__en {
    display: none;
  }

  .svc-page--sns .svc-flow--grid li h3::before,
  .svc-page--influencer .svc-flow--grid li h3::before,
  .svc-page--creative .svc-flow--grid li h3::before,
  .svc-page--seo-consulting .svc-flow--grid li h3::before,
  .svc-page--inbound .svc-flow--grid li h3::before,
  .svc-page--listing-ads .svc-flow--grid li h3::before,
  .svc-page--recruiting-ads .svc-flow--grid li h3::before {
    counter-increment: flowgrid;
    content: counter(flowgrid);
    position: absolute;
    left: -32px;
    top: -2px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
    color: var(--color-white);
    font-family: var(--font-en);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    padding-top: 2px; /* Josefin Sans の上寄りを補正 */
  }
}

/* ---- /assets/styles/css/service-parts/price.css ---- */
/* ============================================================
   料金の見た目。組み方は template-parts/service/price.php。
   1つの箱（single）と、プランごとの表（table）の2つの形がある。
   2026-09-28 仮の3プラン（ライト・スタンダード・カスタム）は、全ページの料金が決まって使う所が無くなったので消した。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* 1つの箱で出す料金（price.php の single 引数）。プランに分けられないサービス用（2026-09-24 追加） */
.svc-price-single {
  border: 0;
  border-radius: var(--radius-card);
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3); /* Figma の料金カードの影（0,12 / ぼかし32 / 黒30%） */
  max-width: 480px;
  margin: 0 auto;
}

.svc-price-single p {
  margin: 0 0 8px;
  font-size: var(--font-size-body);
}

.svc-price-single p:last-child {
  margin-bottom: 0;
}

.svc-price-single p:nth-child(2) {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
}

/* ---- プランごとの料金を1つの箱に表で出す（price.php の table 引数。2026-09-27 AIO対策ページで追加） ---- */
.svc-price-table {
  border-radius: var(--radius-card);
  padding: 32px 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3); /* Figma の料金カードの影（0,12 / ぼかし32 / 黒30%） */
  max-width: 640px;
  margin: 0 auto;
}

.svc-price-table__lead {
  text-align: center;
  margin: 0 0 var(--space-16);
}

.svc-price-table__rows {
  margin: 0;
}

.svc-price-table__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-border);
}

.svc-price-table__row:first-child {
  border-top: 1px solid var(--color-border);
}

.svc-price-table__row dt {
  font-weight: var(--font-weight-bold);
}

.svc-price-table__row dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.svc-price-table__note {
  text-align: center;
  margin: var(--space-16) 0 0;
}

/* ---- /assets/styles/css/service-parts/works.css ---- */
/* ============================================================
   関連実績カードの見た目。組み方は template-parts/service/works.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 関連実績 ---- */
.svc-works {
  background: var(--color-gray-light);
}

.svc-works__grid {
  display: grid;
  gap: var(--space-16);
}

.svc-work-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  display: block;
}

.svc-work-card__img {
  aspect-ratio: 4 / 3;
  /* サムネは実データ未確定のため赤系グラデーションで代用（Figmaも仮の赤グラデーション） */
  background: linear-gradient(135deg, #f2c9c9, var(--color-primary));
 overflow: hidden; 
}

.svc-work-card__body {
  padding: var(--space-24);
}

.svc-work-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
}

.svc-work-card__tag {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（実績タグ） */
  margin: 0;
}

.svc-work-card__date {
  font-family: var(--font-en);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  color: #6a6a6a;
}

.svc-work-card h3 {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  margin: 0;
  line-height: var(--line-height-heading);
}

.svc-work-card__img img {
  display: block; width: 100%; height: 100%; object-fit: cover; 
}



@media (min-width: 768px) {

  .svc-works__grid {
      grid-template-columns: repeat(3, 1fr);
    
  }}
/* 関連実績が3列で割り切れないとき、2段目以降の残り（1枚・2枚）を中央に寄せる（2026-11-11 本人指示「実績5つ出すなら、下段は中央寄せ」。全サービスページ共通）。
   6列にして1枚を2列ぶんにし、最後の段の先頭だけ開始位置をずらす。1段目（3枚以下）は今までどおり */
@media (min-width: 768px) {
  .svc-works__grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .svc-works__grid > * {
    grid-column: span 2;
  }
  .svc-works__grid > :nth-child(3n+4):nth-last-child(2) {
    grid-column: 2 / span 2;
  }
  .svc-works__grid > :nth-child(3n+4):last-child {
    grid-column: 3 / span 2;
  }
}

/* ---- /assets/styles/css/service-parts/faq.css ---- */
/* ============================================================
   よくある質問の見た目。組み方は template-parts/service/faq.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- FAQ（質問=H3 + 回答=p） ---- */
.svc-faq {
  display: grid;
  gap: var(--space-16);
}

.svc-faq__item {
  border-bottom: 1px solid var(--color-gray-light);
  padding-bottom: var(--space-16);
}

.svc-faq__item h3 {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  margin: 0 0 8px;
  display: flex;
  gap: 12px;
}

.svc-faq__item h3::before {
  content: "Q";
  font-family: var(--font-en);
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（FAQのQ） */
  flex: none;
}

.svc-faq__item p {
  margin: 0;
  font-size: var(--font-size-body);
  padding-left: var(--space-24);
  color: var(--color-muted);
}

/* ---- /assets/styles/css/service-parts/text-align.css ---- */
/* ============================================================
   サービス各ページ・サービス一覧の「文字揃えの固定」。1つの部品ファイルに収まらず、
   breadcrumb・hero・subnav・challenges・reasons・cta・values・flow・price・works・faq の
   複数の部品ファイルにまたがるクラスを一括で指定するため、部品と同じ場所に専用ファイルとして置く
   （2026-09-24 SEOコンサルティングページ追加時、5ページに同じブロックが書き写されていたのに気づいて整理）。
   読み込み順は「部品の CSS の後・ページの CSS の前」（functions.php）。ページ側で同じクラスに別の指定が
   無いことを確認したうえでこの位置にした。値が違う所（クリエイティブの追加クラス）はそのページの CSS に残す。
   ============================================================ */
/* ---- 文字揃えの固定 ----
   本番の共通 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;
}

/* 中央揃えに戻す指定。上のうち、実際は中央揃えのままにしたい要素だけ text-align: center で戻す */
.svc-flowchart__step, .svc-flowchart__parallel li, .svc-reason__flow-badge, .svc-reason__flow-lead, .svc-btn {
  text-align: center;
}