@charset "UTF-8";
/* ============================================================
   サービス各ページの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;
    
  }}