@charset "UTF-8";
/* ============================================================
   サービスページ（一覧・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 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.svc-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.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 *,
    .svc-fade {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    
  }}