/* ========================================
   /service/ — サービス（マーケティング支援の全体像）
   既存デザイントークン（common.css :root）を流用。
   セクション部品は子ページ /service/web/ と同じ .svc-* 系で統一。
======================================== */

.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-section--ink { position: relative; background: var(--color-ink); }
/* 下端の三角タブ。FV帯（.r3-fv-band）と同じ形だが、面が広いぶん大きめに出す */
.svc-section--ink::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 0;
  height: 0;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
  border-top: 28px solid var(--color-ink);
}

.svc-head--center { margin-inline: auto; text-align: center; }
.svc-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--color-primary);
}
.svc-eyebrow--invert { color: #7fb4dd; }
.svc-title {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--color-ink);
}
.svc-title--invert { color: #fff; }
.svc-lead {
  margin: 16px 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; }
/* ネイビー背景の上に置くリード文。本文は白の透過、強調は eyebrow と同じ淡いブルー */
.svc-lead--invert { color: rgba(255, 255, 255, .86); }
.svc-lead--invert strong { color: #7fb4dd; }
/* 狭い画面だけ有効になる改行。放っておくと「分けるほ／ど、」のように語の途中で折れるため、
   1行に収まらなくなる 600px 以下でだけ句読点の位置で切る */
.svc-br-sp { display: none; }
@media (max-width: 600px) {
  .svc-br-sp { display: inline; }
}

/* ----- 共通ボタン ----- */

/* ========================================
   1. ヒーロー
======================================== */
.svc-hero {
  position: relative;
  padding-block: clamp(16px, 2.4vw, 36px) clamp(48px, 7vw, 88px);
  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__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* 1行目「制作会社でも代理店でもない、」は 38px で 532px 必要だが左カラムは 525px。
   図解との余白へ 20px だけはみ出させて2行を保つ（列幅は変えないので図解は元のサイズのまま）。 */
.svc-hero__title {
  margin: 0 -20px 0 0;
  font-size: clamp(23px, 2.8vw, 38px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--color-ink);
  -webkit-text-stroke: .5px var(--color-ink);
}

.svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-top: clamp(28px, 3.5vw, 40px);
}
/* 左カラム内でも確実に横並びにする（TOPより主ボタンの最小幅を抑える） */
.svc-hero__actions .btn-cta-primary { min-width: 280px; }

/* ハブ＆スポーク図 */
.svc-hero__viz { justify-self: center; width: 100%; max-width: 500px; }
.svc-orbit { width: 100%; height: auto; overflow: visible; }
.svc-orbit__goal { font-family: var(--font-jp); font-weight: 800; font-size: 17px; fill: #fff; }
.svc-orbit__goal-en { font-family: var(--font-en); font-weight: 700; font-size: 9px; letter-spacing: .12em; fill: #7fb4dd; }
/* 周回ノード：戦略→集客→制作→SEO→広告→解析 と順に活性化（各ノードに --d で遅延） */
.svc-orbit__node circle {
  fill: #fff;
  stroke: var(--color-line);
  stroke-width: 1.5px;
  animation: svcNodeRing 7.2s linear infinite;
  animation-delay: var(--d, 0s);
}
.svc-orbit__node text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  fill: var(--color-ink);
  animation: svcNodeTxt 7.2s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes svcNodeRing {
  0%   { fill: #fff; stroke: var(--color-line); stroke-width: 1.5px; }
  3%   { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 2.6px; }
  14%  { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 2.6px; }
  19%  { fill: #fff; stroke: var(--color-line); stroke-width: 1.5px; }
  100% { fill: #fff; stroke: var(--color-line); stroke-width: 1.5px; }
}
@keyframes svcNodeTxt {
  0%   { fill: var(--color-ink); }
  3%   { fill: var(--color-primary); }
  14%  { fill: var(--color-primary); }
  19%  { fill: var(--color-ink); }
  100% { fill: var(--color-ink); }
}

/* 中心リングの“ふわふわ”：呼吸するリム＋やわらかな放射ping */
.svc-orbit__rim {
  transform-box: fill-box;
  transform-origin: center;
  animation: svcRim 3.2s ease-in-out infinite;
}
@keyframes svcRim {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.07); opacity: .45; }
}
.svc-orbit__ping {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: svcPing 2.8s ease-out infinite;
}
.svc-orbit__ping--2 { animation-delay: 1.4s; }
@keyframes svcPing {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-orbit__node circle,
  .svc-orbit__node text,
  .svc-orbit__rim,
  .svc-orbit__ping { animation: none !important; }
  .svc-orbit__ping { display: none; }
  .svc-orbit__nodes g:first-child circle { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 2.6px; }
  .svc-orbit__nodes g:first-child text { fill: var(--color-primary); }
}

/* ========================================
   1.5 主要サービスへのページ遷移（FV直下）
======================================== */
.svc-quicknav {
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, #fff 100%);
  padding-block: clamp(4px, 1vw, 16px) clamp(40px, 6vw, 72px);
}
.svc-quicknav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
/* 写真バナー：写真の上に濃紺グラデーション、左上に見出し、右下に円形の矢印 */
.svc-qbanner {
  position: relative;
  display: block;
  height: 220px;
  overflow: hidden;
  border-radius: var(--radius-md);
  color: #fff;
}
.svc-qbanner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
/* 写真を沈める幕。左ほど濃くして見出しを、下端も暗くして右下の矢印を読ませる */
.svc-qbanner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(10, 37, 64, .5) 0%, rgba(10, 37, 64, 0) 40%),
    linear-gradient(100deg, rgba(10, 37, 64, .86) 0%, rgba(10, 37, 64, .66) 55%, rgba(10, 37, 64, .26) 100%);
  transition: opacity .4s var(--ease);
}
.svc-qbanner__body {
  position: relative;
  z-index: 2;
  display: block;
  padding: clamp(24px, 3.4vw, 44px) clamp(22px, 3vw, 40px);
}
.svc-qbanner__title {
  display: block;
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  /* 写真の明るい部分（白い斜め帯など）に重なっても輪郭が消えないように */
  text-shadow: 0 1px 10px rgba(10, 37, 64, .5);
}
.svc-qbanner__en {
  display: block;
  margin-top: .8em;
  font-family: var(--font-en);
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 500;
  letter-spacing: .28em;
  color: rgba(255, 255, 255, .82);
}
/* 誰に向けたサービスかの一文。右下の矢印と横位置が重ならない幅に収める。
   狭い画面で折り返すときは、末尾に1〜2文字だけ残らないよう balance で均等に割る。 */
.svc-qbanner__lead {
  display: block;
  max-width: 76%;
  margin-top: 14px;
  text-wrap: balance;
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 8px rgba(10, 37, 64, .55);
}
.svc-qbanner__arrow {
  position: absolute;
  z-index: 2;
  right: clamp(18px, 2.4vw, 32px);
  bottom: clamp(18px, 2.4vw, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 5.4vw, 68px);
  height: clamp(52px, 5.4vw, 68px);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  /* 明るい写真の上でも丸が沈まないよう、ごく薄く下地を敷く */
  background: rgba(10, 37, 64, .22);
  color: #fff;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.svc-qbanner__arrow svg { width: 46%; height: auto; }
/* ホバー：写真がゆっくり寄り、矢印の丸が白く反転する */
.svc-qbanner:hover { opacity: 1; }
.svc-qbanner:hover .svc-qbanner__img { transform: scale(1.06); }
.svc-qbanner:hover::before { opacity: .88; }
.svc-qbanner:hover .svc-qbanner__arrow {
  background: #fff;
  border-color: #fff;
  color: var(--color-ink);
}
@media (prefers-reduced-motion: reduce) {
  .svc-qbanner__img,
  .svc-qbanner:hover .svc-qbanner__img { transition: none; transform: none; }
}
@media (max-width: 640px) {
  .svc-quicknav__list { grid-template-columns: 1fr; }
  .svc-qbanner { height: 160px; }
}

/* ========================================
   2. 全体最適コントラスト（表組）
======================================== */
/* 観点を行見出しに、列は waltsu／制作会社／広告代理店／フリーランス の4社。
   セルどうしを隙間で分け、見出し（列・行とも）をネイビーの札に、waltsu 列だけブルーで強調する。 */
.svc-vs-wrap { max-width: 1080px; margin-inline: auto; }
/* 表の下に薄グレーの面を敷く。ネイビーのセクション背景に直置きすると
   行見出し（ネイビーの札）が背景と同化して読めなくなるため。 */
.svc-vs {
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(12px, 1.6vw, 20px);
  background: var(--color-bg-alt);
  border-radius: 16px;
}
.svc-vs-note {
  max-width: 1080px;
  margin: 16px auto 0;
  font-size: 12px;
  line-height: 1.7;
  color: #9fb3c8;
  text-align: right;
}
.svc-vstable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;   /* セルの間に隙間をつくり、罫線なしで区切る */
  table-layout: fixed;
}
.svc-vstable__c-axis { width: 13%; }
.svc-vstable__c-us   { width: 23.5%; }
.svc-vstable__c-oth  { width: 21%; }

.svc-vstable th,
.svc-vstable td {
  padding: clamp(14px, 1.8vw, 20px) clamp(10px, 1.3vw, 16px);
  text-align: center;
  vertical-align: middle;
}

/* 左上の角は空白（背景をそのまま見せる） */
.svc-vstable th.svc-vstable__hcorner { background: transparent; padding: 0; }
.svc-vstable__hcorner-txt { display: none; }

/* 行見出し（観点）：ネイビーの札 */
.svc-vstable th.svc-vstable__axis {
  background: var(--color-ink);
  border-radius: 8px;
}
.svc-vstable__axis b {
  display: block;
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.5;
  color: #fff;
}

/* 列見出し：他社はネイビー、waltsu はブルー */
.svc-vstable thead th {
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.5;
  color: #fff;
  border-radius: 8px 8px 0 0;
}
.svc-vstable__hoth { background: var(--color-ink); }
.svc-vstable__hus  { background: var(--color-primary); }

/* セル共通：記号を上に大きく、説明はその下（縦積み・中央揃え） */
.svc-vstable__us,
.svc-vstable__oth {
  font-size: clamp(12px, 1.3vw, 14px);
  line-height: 1.65;
  border-radius: 8px;
}
.svc-vstable__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.svc-vstable__mk {
  flex: none;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
/* 記号は評価に対応させる（× は使わない）。◎=青／○=濃いグレー／△=淡いグレー */
.svc-vstable__mk--a { color: var(--color-primary); }
.svc-vstable__mk--b { color: var(--color-ink-soft); }
.svc-vstable__mk--c { color: var(--color-mute); }

/* 他社列：白のセル */
.svc-vstable__oth {
  background: #fff;
  color: var(--color-ink-soft);
}

/* waltsu 列：薄青フィル＋ブルーの縁で強調 */
.svc-vstable__us {
  background: var(--color-primary-soft);
  color: var(--color-ink);
  font-weight: 700;
}

/* PC：waltsu 列のセルだけブルーの縁を足して、列としてのまとまりを出す */
@media (min-width: 721px) {
  .svc-vstable__us { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
}

/* 「横にスクロールできます」：表が画面に収まらない SP だけ出す */
.svc-vs-hint { display: none; }

/* スマホ：表の形はそのままに、横スクロールで見せる（縮めると字が潰れるため） */
@media (max-width: 720px) {
  .svc-vs-hint {
    display: block;
    max-width: 1080px;
    margin: 0 auto 8px;
    font-size: 11px;
    letter-spacing: .04em;
    color: #9fb3c8;
    text-align: right;
  }
  .svc-vs-hint::before { content: "←→ "; }
  .svc-vs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* none にすると、端まで来たときにゴムのように引っ張られる（バウンス）動きが止まる */
    overscroll-behavior-x: none;
    /* 左右の内側余白をなくす。ここが残っていると、貼り付けた観点列(left:0)の
       さらに左を、スクロール中の他社セルが通り抜けて見えてしまう。 */
    padding-inline: 0;
  }
  .svc-vstable {
    min-width: 700px;   /* これ以上は縮めない。足りない分は横スクロール */
  }
  /* 観点列は左に貼り付けて、横に振っても行を見失わないようにする。
     1つ目の影はセル間の隙間（border-spacing）を面の色で塞いで下を通る文字を隠し、
     2つ目はスクロール中であることを示す右側の陰。 */
  .svc-vstable th.svc-vstable__hcorner,
  .svc-vstable th.svc-vstable__axis {
    position: sticky;
    /* border-spacing と同じ 4px。0 にすると貼り付いた瞬間に元位置から横へずれる */
    left: 4px;
    z-index: 2;
    box-shadow: 0 0 0 5px var(--color-bg-alt), 9px 0 10px -7px rgba(10, 37, 64, .4);
  }
  .svc-vstable th.svc-vstable__hcorner { background: var(--color-bg-alt); }
  .svc-vstable th,
  .svc-vstable td { padding: 14px 10px; }
  .svc-vstable__us,
  .svc-vstable__oth { font-size: 13px; }
  .svc-vstable thead th { font-size: 13px; }
  .svc-vstable__axis b { font-size: 12px; }
  .svc-vstable__mk { font-size: 19px; }
}

/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 920px) {
  /* 1列に落として、タイトル → テキスト → 図解 → CTA の順に並べ替える。
     copy を display:contents にして中の3つを grid の直接の子に上げ、order で並べる。
     行間は各要素の margin で作るので row-gap は 0。 */
  .svc-hero__grid { grid-template-columns: 1fr; row-gap: 0; }
  .svc-hero__copy { display: contents; }
  .svc-hero__title { order: 1; margin-right: 0; } /* 1列なので、はみ出しは不要 */
  .svc-hero__sub   { order: 2; }
  .svc-hero__viz   { order: 3; max-width: 320px; margin: clamp(20px, 4vw, 30px) auto 0; }
  .svc-hero__actions { order: 4; }
  /* 1行に収まらなくなるので、PC用の改行位置は解除して自然に折り返す */
  .svc-hero__sub br { display: none; }
}

/* 「waltsuの／マーケティング支援」は PC では1行に。狭い画面だけ2行に折る */
@media (min-width: 769px) {
  #support .svc-title br { display: none; }
}

/* 画面下に追従CTA（.sp-cta-bar）が出る幅では、FV内のCTAは重複するので隠す */
@media (max-width: 768px) {
  .svc-hero__actions { display: none; }
}

@media (max-width: 560px) {
  .svc-hero__actions { gap: 14px; }
  .svc-hero__actions .cta-block,
  .svc-hero__actions .btn-cta-secondary { width: 100%; }
  .svc-hero__actions .btn-cta-primary { min-width: 0; width: 100%; }
}