/* ========================================
   /service/ — サービス（ピラーページ。2026-11-01 作り直し。旧版の CSS は /service-old/style.css）
   既存デザイントークン（common.css :root）を流用。
   セクション部品は子ページと同じ .svc-* 系。svc-section / svc-head / svc-faq__item 等の共通18部品は common.css（MAINTENANCE §2）。
   2つの事業（.biz）の装飾も common.css。ここにはこのページ固有の値だけ置く。
======================================== */

.svc {
  color: var(--color-ink);
  background: #fff;
  overflow-x: clip;
}

/* ----- スクロールリビール（JS有効時のみ初期状態を適用） ----- */
.js-reveal .svc-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js-reveal .svc-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .svc-reveal { opacity: 1; transform: none; transition: none; }
}

/* ----- セクション共通リズム ----- */

.svc-head--center { margin-inline: auto; text-align: center; }
.svc-eyebrow {
  display: inline-block;
  margin: 0 0 6px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--color-primary);
}
@media (max-width: 560px) {
  .svc-eyebrow { font-size: 12px; }
}
.svc-head { max-width: none; margin-bottom: clamp(28px, 4vw, 44px); } /* 見出しの型は TOP・ハブ・配下ページと同じ（2026-11-03 r86） */
.svc-title {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--color-ink);
}
.svc-lead {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-ink-soft);
}
.svc-head--center .svc-lead { margin-inline: auto; }
.svc-lead strong { color: var(--color-primary); font-weight: 700; }
.svc-lead a { color: var(--color-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* 狭い画面だけ有効になる改行。放っておくと「分けるほ／ど、」のように語の途中で折れるため、
   1行に収まらなくなる 600px 以下でだけ句読点の位置で切る */
.svc-br-sp { display: none; }
@media (max-width: 600px) {
  .svc-br-sp { display: inline; }
}

/* ========================================
   1. ヒーロー（タイトル＋テキストのみ・中央揃え。2026-11-01 に図解と CTA を外した）
======================================== */
.svc-hero {
  position: relative;
  background:
    radial-gradient(120% 140% at 88% -10%, var(--color-primary-soft) 0%, rgba(232,241,249,0) 55%),
    linear-gradient(180deg, #fff 0%, var(--color-bg-alt) 100%);
  overflow: hidden;
}
/* 上下の余白はここで持つ（.svc-hero.r3-fv の padding は common.css で 上0／下40 に固定されていて、帯の下は 32px しか空かないため）。
   PC は帯の下から約 80px、SP は約 56px */
.svc-hero__inner { text-align: center; padding-block: clamp(24px, 3.4vw, 48px) clamp(8px, 2vw, 28px); }
/* 1行目「制作会社でも代理店でもない、」（14字）が SP 390px の本文幅 350px に収まる大きさから始める */
.svc-hero__title {
  margin: 0;
  font-size: clamp(23px, 3.3vw, 46px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--color-ink);
  -webkit-text-stroke: .5px var(--color-ink);
}
.svc-hero__inner .svc-hero__sub {
  max-width: 760px;
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 2.1;
  letter-spacing: .03em;
  text-wrap: var(--body-wrap);
}
.svc-hero__sub b { color: var(--color-ink); font-weight: 700; }
/* 最後の1文は少し間をあける */
.svc-hero__next { display: block; margin-top: .7em; }
.svc-hero__sub strong { color: var(--color-primary); font-weight: 800; }
/* 語の途中で折らない（HTML の <wbr> の位置だけで折る）。中央揃えなので、行の長さの差は左右に均等に出る */
.svc-hero__inner .svc-hero__sub { word-break: keep-all; overflow-wrap: anywhere; }

/* ========================================
   3. 課題から探す（アコーディオン 8件。2026-11-01 夜にカード8枚から変更）
   閉：白い箱（1px罫・角丸）に 番号＋課題＋下向きの山形。開：見出しを紺に塗り、下に進め方と行き先ボタン（.view-more）
======================================== */
.svc-acc__title { flex: 1; min-width: 0; font-size: clamp(16px, 1.4vw, 18px); font-weight: 800; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.svc-acc__body p { margin: 0; font-size: 15px; line-height: 1.95; color: var(--color-ink-soft); text-wrap: var(--body-wrap); word-break: keep-all; overflow-wrap: anywhere; } /* 語の途中で折らない（HTML の <wbr> の位置だけで折る。Safari は auto-phrase に未対応） */
/* PC でも文節で折らず、行の右端まで流す文（2026-11-03 しゅんすけ指示） */
.svc-acc__body .svc-acc__flow { word-break: normal; text-wrap: wrap; text-align: justify; }
.svc-acc__body .svc-acc__flow .u-nobr { display: inline; }
.svc-acc__flow .web-tail { white-space: normal; }
@media (max-width: 600px) {
  .svc-acc__q { gap: 8px; padding: 16px 12px; }
  .svc-acc__title { font-size: clamp(13px, 3.6vw, 16px); } /* 「SEO・LLMO、何から手をつけるか」を 360px まで1行に収める（2026-11-03 しゅんすけ指示） */
  .svc-acc__body p { font-size: 14.5px; line-height: 1.9; word-break: normal; text-align: justify; } /* SP は文節で折らず行の右端まで流す（2026-11-03 しゅんすけ指示。ハブと同じ） */
  .svc-acc__body .u-nobr { display: inline; }
  .svc-acc__body .web-tail { white-space: normal; } /* 語尾のまとめ（slider.js）で早く折れるので外す */
  .svc-acc__body .svc-acc__flow { font-size: min(14.5px, 3.6vw); } /* 「中心なら／microCMS、」と英単語の前で早く折れないように */
}

/* ========================================
   2. 2つの事業（TOP の SERVICES 節と同じ .services / .section-heading と共通部品 .biz を使う。ここで足すものはない）
   2026-11-01 夜：目次・他社との違い（COMPARE）・進め方（FLOW）はしゅんすけ指示で削除
======================================== */
#issue .svc-lead { font-weight: 700; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; } /* 課題から探すの導入文：語の途中で折らない。ハブと同じ文なので同じ型に */

/* ========================================
   SP の見直し（2026-11-01 夜、シニア／ジュニアデザイナーのレビュー）
======================================== */
@media (max-width: 600px) {
  /* 見出しの1行目（14字）が 375px・360px で「…でもな／い、」と割れるので、画面幅に合わせて縮める */
  .svc-hero__title { font-size: min(23px, 5.8vw); }
  /* HERO の下端をグレーで終わらせると、下の白との間に線のような境目が出るので、白で終える */
  .svc-hero {
    background:
      radial-gradient(120% 140% at 88% -10%, var(--color-primary-soft) 0%, rgba(232,241,249,0) 55%),
      linear-gradient(180deg, #fff 0%, var(--color-bg-alt) 55%, #fff 100%);
  }
  /* 2つの事業：帯（画面幅いっぱいの薄青）の上下の白を詰める */
  .svc #business { padding-block: 24px 0; }
  /* 課題から探す：見出しも左寄せ（2026-11-03 しゅんすけ指示） */
  #issue .svc-head { margin-inline: 0; text-align: left; }
  /* 課題から探すの導入文：操作の説明なので HERO の本文と同じ大きさ・左揃えに */
  #issue .svc-lead { text-align: left; font-size: clamp(13px, 3.7vw, 15.5px); text-wrap: var(--body-wrap); word-break: normal; } /* SP は文節で折らず行の右端まで流す（2026-11-03 しゅんすけ指示） */
  #issue .svc-lead .u-nobr { display: inline; }
  #issue .svc-lead br { display: none; }
}

/* ========================================
   レスポンシブ
======================================== */
/* 「〜決める。」（20字）は SP の 15px で 300px＝1行に入るので、PC と同じ位置で改行したままにする */

/* PC：課題の本文は文節で折らず行の右端まで流す（2026-11-03 しゅんすけ指示）。配置は変えない。SP は触らない */
@media (min-width: 601px) {
  .service-top .svc-acc__body p { word-break: normal; text-wrap: var(--body-wrap); text-align: justify; }
  .service-top .svc-acc__body .u-nobr { display: inline; }
}