@charset "utf-8";
/* =========================================================================
   サービスページの見た目を作り替える（指示 2026-09-18）
     「サービスのこの３つのボタンの形を変更して」
     「こんな課題を解決します この６個の枠の形を変更して 水色の丸を削除して」
     「主なサービス 01 ホームページ制作 この表示の仕方も含めて
       元サイトのデザインと似ているところは変更してください」

   ・原本 p-service-sense.css は無変更。このファイルをその後に読んで上書きする（_tools/build.py の PAGES）。
   ・サービスの3ページ（集客支援／採用支援／WEB制作・運用）はどれも同じ部品（.pg-sv / sv-*）で組んであるので全部に効く。
     （WEB制作・運用も指示「他の2ページと同じようにして」で 2026-09-18 に同じ部品へ組み直した。旧は _removed/body_service-s-pf.html）
   ・色はトークン（--c-blue 系・sky.css の --lg-*）で書いているのでテーマを替えても追従する。

   作り替えたところ
     1. サービスの切替 … 上がタブ型の4枚 → 丸いトラックの中で選ぶ「セグメント」型
     2. 概要           … 灰色の帯＋写真が左 → 白地・写真は右・写真の後ろに水色の板
     3. 課題の6枠      … 横長の枠＋右に水色の丸 → 吹き出し型のカード（3列。4項目のページは2列）＋チェック印・丸は削除
     4. セクション見出し … 左の縦罫＋和文＋薄い欧文 → 欧文の小見出し（短い線つき）＋大きな和文を中央に
     5. 主なサービス    … 並び方は元のまま（PCは写真の横に見出し・本文・補足／スマホは写真が上）＝指示で戻した。
                         見た目は「01＋帯」→ 枠つきのカード・写真は角丸・「SERVICE 01」の札・水色のキャッチ
     6. PASSO SCAN／特徴   … 灰色のカード・写真が下 → 白いカード・写真が上・番号は札
     7. 導入実例       … 枠なしの写真カード → 枠つきカード・タグは角の小さい札・「一覧を見る」はボタン
     8. 料金           … 左見出し＋右本文 → 1枚の水色パネル
     9. よくある質問    … 丸いQ/A → 文字だけのQ/A・＋／−で開閉・1列で中央
    10. 導入の流れ      … 灰色のカード3列2行 → 横一列のタイムライン（〜1024pxは縦のタイムライン）
    11. ヒーロー        … 添付画像（スマホの画面）の再現。切替ボタンはヒーローの中（→末尾の 11）
   ========================================================================= */

/* =========================================================================
   1. サービスの切替（3ページ共通）
   ========================================================================= */
.sv-tabs {
  align-items: stretch;
  gap: 6px;
  width: 760px;
  margin-top: 40px;
  padding: 6px;
  border-radius: 99px;
  background: var(--lg-mist);
}
.sv-tabs a {
  height: 52px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--c-ink);
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.sv-tabs a:hover { background: #fff; color: var(--c-blue); }
.sv-tabs a.is-on {
  height: 52px;
  background: linear-gradient(115deg, var(--c-blue) 0%, var(--c-grad-a) 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(24, 154, 211, .28);
}

/* =========================================================================
   2. 概要（集客支援・採用支援）
   ========================================================================= */
.pg-sv .sv-intro { padding: 72px 0 0; background: none; }
.pg-sv .sv-intro__top { flex-direction: row-reverse; gap: 72px; }
.pg-sv .sv-intro__ph {
  width: 520px;
  height: 350px;
  border-radius: 28px;
  box-shadow: -22px 22px 0 var(--lg-mist);
}
.pg-sv .sv-intro__ttl {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.55;
  word-break: auto-phrase;   /* 「お悩み／を」のような割れ方を防ぐ */
}
.pg-sv .sv-intro__ttl::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 26px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-grad-a));
}
.pg-sv .sv-intro__lead { margin-top: 22px; font-size: 16px; line-height: 2; }
.pg-sv .sv-intro__lead + .sv-intro__lead { margin-top: 10px; }

/* ---- 集客支援の概要：desamis「U-motion Platform」冒頭の版面（指示 2026-09-18「文字を中央に配置して完全に再現」）
   実測（desamis.co.jp/service/ump）：PC＝上の余白 100px・見出し 36px/54px・本文 18px/32.4px・色 #393633。
   スマホ(390)＝見出し 20px/30px・本文 15px/27px・見出しと本文の間 24px。
   飾り＝水色の雲形（左）・薄い点の網（左と右）・濃い青の雲形（スマホの右上）・色が明滅する小さな丸。
   位置は desamis と同じく画面の端から測る（PC は見出しの上端＝区画の上端＋100px の関係も同じ）。
   desamis は2段組だが、指示で見出しと本文を中央にそろえて縦に積んだ。 */
.pg-sv .sv-intro--msg { padding-top: 100px; }
.sv-msg__deco {
  position: absolute;
  inset: 0;
  overflow: clip;            /* 右の点の網（上に 60px はみ出す）は上のタブの帯にかかるので区画の上端で切る */
  pointer-events: none;
}
.sv-intro--msg > .av-wrap { position: relative; z-index: 1; }
.sv-msg__d { position: absolute; background: center / 100% 100% no-repeat; }
/* 水色は「点の網＋雲形」から、やわらかい色のにじみ2つに変えた（指示 2026-09-19）。
   形は角丸の割合で作った有機的な楕円、色は水色の薄いグラデーション。文字の後ろで薄く敷く */
.sv-msg__d--wash-l,
.sv-msg__d--wash-r {
  background-image: linear-gradient(140deg, #eaf7fc 0%, #bde5f4 45%, #8fd3ea 100%);
}
.sv-msg__d--wash-l {
  left: -260px; top: -40px; width: 520px; height: 470px;
  border-radius: 58% 42% 46% 54% / 52% 46% 54% 48%;
  opacity: .45;
}
.sv-msg__d--wash-r {
  right: -230px; top: 250px; width: 430px; height: 390px;
  border-radius: 46% 54% 58% 42% / 48% 56% 44% 52%;
  opacity: .32;
}
.sv-msg__d--dot-s  { right: 243px; top: 90px;  width: 20px;  height: 20px;  background-image: url(images/deco/circle-grad.svg); animation: sv-msg-blink 1.8s ease-in-out infinite; }
.sv-msg__d--dot-m  { right: 50px;  top: 180px; width: 43px;  height: 43px;  background-image: url(images/deco/circle-grad.svg); animation: sv-msg-blink 3.6s ease-in-out infinite; }
@keyframes sv-msg-blink { 50% { opacity: .08; } }   /* desamis の丸は色が薄くなって戻る GIF */
.sv-msg { text-align: center; }
.sv-msg__ttl {
  font-size: 36px;
  font-weight: 700;          /* A1ゴシック M の太さに見た目を合わせる */
  word-break: auto-phrase;
  line-height: 54px;
  color: var(--c-ink);
}
.sv-msg__txt {
  max-width: 960px;          /* 2文目が1行に収まる幅（それより狭い画面では文節で折り返す） */
  margin: 40px auto 0;
  font-size: 18px;
  font-weight: 500;          /* A1ゴシック R の太さに見た目を合わせる */
  line-height: 32.4px;
  color: var(--c-ink);
  word-break: auto-phrase;
  text-wrap: balance;
}
.sv-msg__nb { white-space: nowrap; }
.sv-msg__br-sp { display: none; }   /* スマホだけの改行（下の 767px 以下で出す） */
.sv-msg__sp { display: none; }   /* 集客支援：スマホだけの改行の版（指示 2026-09-18） */
.sv-msg__ln { white-space: nowrap; }   /* 「S-」と「PASSO」の間で折り返さない */
.sv-msg__txt + .sv-msg__txt { margin-top: 32.4px; }   /* desamis の段落の間＝空行1つ分 */
@media (prefers-reduced-motion: reduce) {
  .sv-msg__d--dot-s, .sv-msg__d--dot-m { animation: none; }
}
@media (max-width: 767px) {
  .pg-sv .sv-intro--msg { padding-top: 44px; }
  .sv-msg__d--wash-l { left: -175px; top: 175px; width: 300px; height: 275px; opacity: .45; }
  .sv-msg__d--wash-r { right: -145px; top: -20px; width: 265px; height: 250px; opacity: .4; }
  /* 小さな丸は本文にかからない左上（見出しの横・本文の上）へ */
  .sv-msg__d--dot-s { left: 22px; right: auto; top: 102px; }
  .sv-msg__d--dot-m { display: none; }
  .sv-msg__ttl { font-size: 20px; line-height: 30px; }
  .sv-msg__txt { margin-top: 24px; font-size: 15px; line-height: 27px; }
  .sv-msg__txt + .sv-msg__txt { margin-top: 27px; }
  .sv-msg__br-sp { display: inline; }
  .sv-msg__br-pc { display: none; }   /* PC だけの改行（スマホは文節で自然に折り返す） */
  /* スマホは文字を横幅いっぱいに（指示 2026-09-18）：左右の余白を 30px → 16px にし、
     行をそろえる折り返し（balance・文節）をやめて1行に入るだけ詰める。文の途中の改行は PC だけ */
  .sv-msg { margin-inline: calc(16px - var(--side)); }
  .sv-msg__txt { word-break: normal; text-wrap: pretty; }   /* 最後の行が1〜2字だけにならないように */
  /* 本文が端まで来るので、小さな丸は本文にかからない左上（見出しの横・本文の上）へ */
  .sv-msg__d--dot-s { left: 22px; right: auto; top: 102px; }
  /* 集客支援はスマホ用の本文に切り替え、指示の改行どおりに1行ずつ置く（WEB制作・運用は .sv-msg__lines＝PC とスマホで同じ改行）。
     いちばん長い行（29字）が 360px の画面でも1行に入るよう、字の大きさを画面幅に合わせて下げる（最大 15px） */
  .sv-msg__pc { display: none; }
  .sv-msg__sp { display: block; }
  .sv-msg__sp .sv-msg__txt,
  .sv-msg__lines .sv-msg__txt { font-size: min(15px, (100vw - 32px) * .0344); line-height: 1.8; }   /* いちばん長い行（29字）＝字の大きさの 29.0 倍（実測）→ 幅 ÷ 29.1 */
}

/* =========================================================================
   3. 課題の6枠（枠の形は3ページ共通・水色のパネルは集客支援・採用支援だけ）
   ========================================================================= */
.pg-sv .sv-issue {
  margin-top: 96px;
  padding: 60px 56px 64px;
  border-radius: 32px;
  background: linear-gradient(160deg, var(--lg-mist) 0%, var(--lg-mist2) 100%);
}
.sv-issue__h {
  border-left: 0;
  padding-left: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
  text-align: center;
}
.sv-issue__h::before {
  content: "PROBLEM";
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.6;
  color: var(--c-blue);
}
.sv-issue__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
  margin-top: 36px;
}
.sv-issue__list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: auto;
  height: auto;
  min-height: 100px;
  padding: 20px 24px 20px 22px;
  border-radius: 24px 24px 24px 6px;   /* 左下だけ角を立てた吹き出しの形 */
  background: #fff;
  box-shadow: 0 10px 26px rgba(14, 99, 156, .07);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sv-issue__list a:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(14, 99, 156, .12); }
/* チェック印（角の丸い四角＋レ点） */
.sv-issue__list a::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--lg-mist);
}
.sv-issue__list a::after {
  content: "";
  position: absolute;
  left: 33px;
  top: 50%;
  width: 7px;
  height: 13px;
  border: solid var(--c-blue);
  border-width: 0 2.5px 2.5px 0;
  transform: translate(0, -62%) rotate(45deg);
}
.sv-issue__list p {
  padding: 0;
  border-right: 0;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.65;
  text-align: left;
  word-break: auto-phrase;   /* 「目に／見えない」のような語の途中の折り返しを防ぐ */
  text-wrap: balance;
  transition: color .3s var(--ease);
}
.sv-issue__list a:hover p { color: var(--c-blue); }
.sv-issue__list i { display: none; }   /* 右の水色の丸は削除（指示） */

/* 課題が4つのページ（WEB制作・運用）は2列×2段 */
.sv-issue__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* =========================================================================
   4. セクション見出し（集客支援・採用支援）
   ========================================================================= */
.pg-sv .av-sh {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
  border-left: 0;
  padding: 0;
  text-align: center;
}
.pg-sv .av-sh__en {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.6;
  color: var(--c-blue);
}
.pg-sv .av-sh__en::before,
.pg-sv .av-sh__en::after {
  content: "";
  width: 22px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-grad-a));
}
.pg-sv .av-sh__ja {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.45;
  color: var(--c-ink);
  word-break: auto-phrase;   /* 長い見出し（S-PASSOで自社でできること）を語の途中や「こと」だけで折らない */
  text-wrap: balance;
}

/* =========================================================================
   5. 主なサービス（1項目1行＝写真の横に見出し・本文・補足。--rev は写真が右）
   ========================================================================= */
.pg-sv .sv-fn { margin-top: 0; padding-top: 120px; }
.pg-sv .sv-fn > .av-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.pg-sv .sv-fn .av-sh { margin-bottom: 16px; }
.pg-sv .sv-fn__line { display: none; }

.pg-sv .sv-fn__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 52px;
  padding: 18px 52px 18px 18px;
  border: 1px solid var(--lg-line);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(14, 99, 156, .06);
}
.pg-sv .sv-fn__item--rev { flex-direction: row-reverse; padding: 18px 18px 18px 52px; }
.pg-sv .sv-fn__ph,
.pg-sv .sv-fn__item--s .sv-fn__ph {
  flex: none;
  width: 46%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
}
.pg-sv .sv-fn__txt { padding: 18px 0; }
.pg-sv .sv-fn__head { flex-direction: column; align-items: flex-start; gap: 12px; }
.pg-sv .sv-fn__no {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 7px 14px;
  border-radius: 99px;
  background: var(--lg-mist);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--c-blue);
}
.pg-sv .sv-fn__no::before { content: "SERVICE"; }
.pg-sv .sv-fn__tag {
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.45;
  color: var(--c-ink);
}
.pg-sv .sv-fn__ttl {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.7;
  color: var(--c-blue);
}
.pg-sv .sv-fn__p { margin-top: 12px; font-size: 15px; line-height: 1.95; }
.pg-sv .sv-fn__note { margin-top: 12px; font-size: 12.5px; line-height: 1.8; color: var(--c-ink-2); }

/* =========================================================================
   6. PASSO SCAN／特徴／採用動画（3枚のカード）
   ========================================================================= */
.pg-sv .sv-card-sec { padding-top: 120px; }
.pg-sv .sv-sensor {
  margin-top: 120px;
  padding: 100px 0 108px;
  background: linear-gradient(180deg, var(--lg-mist2) 0%, var(--lg-mist) 100%);
}
.pg-sv .sv-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
}
.pg-sv .sv-cards > div {
  display: flex;
  flex-direction: column;
  width: auto;
  padding: 14px 14px 30px;
  border: 1px solid var(--lg-line);
  border-radius: 26px;
  background: #fff;
}
.pg-sv .sv-feat .sv-cards > div { padding-top: 30px; }
.pg-sv .sv-card__ph {
  order: -1;
  height: auto;
  margin-bottom: 24px;
  aspect-ratio: 296 / 180;
  border-radius: 16px;
}
.pg-sv .sv-card__head,
.pg-sv .sv-card__p,
.pg-sv .sv-card__note { padding-inline: 14px; }
.pg-sv .sv-card__head { flex-direction: column; align-items: flex-start; gap: 12px; }
.pg-sv .sv-card__no {
  min-width: 44px;
  padding: 0 12px;
  border-radius: 99px;
  background: linear-gradient(115deg, var(--c-blue), var(--c-grad-a));
  font-size: 12.5px;
  letter-spacing: .14em;
  line-height: 26px;
  color: #fff;
  text-align: center;
}
.pg-sv .sv-card__ttl {
  border-left: 0;
  padding-left: 14px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.5;
}
.pg-sv .sv-card__p,
.pg-sv .sv-sensor .sv-card__p { margin-top: 12px; font-size: 15px; line-height: 1.9; text-align: left; }
.pg-sv .sv-card__note { margin-top: 8px; font-size: 12px; line-height: 1.8; color: var(--c-ink-2); text-align: left; }

/* =========================================================================
   7. 導入実例（枠つきカード）＋「一覧を見る」「料金の一覧を見る」のボタン
   ========================================================================= */
.pg-sv .sv-case { padding-top: 120px; }
.pg-sv .sv-case__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
}
.pg-sv .sv-case__list article { width: auto; }
.pg-sv .sv-case__list a {
  display: block;
  height: 100%;
  padding: 12px 12px 24px;
  border: 1px solid var(--lg-line);
  border-radius: 24px;
  background: #fff;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pg-sv .sv-case__list a:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14, 99, 156, .10); }
.pg-sv .sv-case__ph { height: auto; aspect-ratio: 373 / 209; border-radius: 16px; }
.pg-sv .sv-case__meta,
.pg-sv .sv-case__ttl,
.pg-sv .sv-case__name { padding-inline: 10px; }
.pg-sv .sv-case__meta { gap: 8px 14px; margin-top: 18px; }
.pg-sv .sv-case__date { font-size: 13px; letter-spacing: .06em; }
.pg-sv .sv-case__tags { gap: 6px; }
.pg-sv .sv-case__tags li {
  width: auto;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--lg-plate);
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  line-height: 22px;
  color: var(--c-blue);
}
.pg-sv .sv-case__ttl { margin-top: 12px; font-size: 17px; font-weight: 700; line-height: 1.65; }
.pg-sv .sv-case__name { margin-top: 10px; font-size: 13px; font-weight: 700; line-height: 1.6; }

/* ---- 制作実績：カードの形は works-card.css（WEB制作・運用と制作実績のページで共用）。ここは区画の余白だけ */
.pg-sv .sv-works { padding-top: 120px; }
@media (max-width: 767px) { .pg-sv .sv-works { padding-top: 72px; } }

.pg-sv .sv-more { justify-content: center; margin-top: 48px; }
.pg-sv .sv-more a,
.pg-sv .sv-price__link a {
  flex-direction: row-reverse;
  gap: 14px;
  height: 58px;
  padding: 0 28px 0 34px;
  border-radius: 99px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.pg-sv .sv-more a { border: 1px solid var(--c-blue); background: #fff; color: var(--c-blue); }
.pg-sv .sv-more a:hover { background: var(--c-blue); color: #fff; }
.pg-sv .sv-price__link a {
  background: linear-gradient(115deg, var(--c-blue) 0%, var(--c-grad-a) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(24, 154, 211, .26);
}
.pg-sv .sv-price__link a:hover { filter: brightness(1.06); box-shadow: 0 14px 30px rgba(24, 154, 211, .34); }
/* 矢印は丸の中の三角 → 線の矢印だけに */
.pg-sv .sv-more i,
.pg-sv .sv-price__link i,
.pg-sv .sv-more a:hover i,
.pg-sv .sv-price__link a:hover i {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: none;
}
.pg-sv .sv-more i::before,
.pg-sv .sv-price__link i::before {
  background: currentColor;
  -webkit-mask: url(images/icon/arrow-r-thin.svg) center / 20px 20px no-repeat;
  mask: url(images/icon/arrow-r-thin.svg) center / 20px 20px no-repeat;
  transform: none;
  transition: translate .3s var(--ease);
}
.pg-sv .sv-more a:hover i::before,
.pg-sv .sv-price__link a:hover i::before { translate: 3px 0; }

/* =========================================================================
   8. 料金（1枚のパネル）
   ========================================================================= */
.pg-sv .sv-price { padding: 120px 0; }
.pg-sv .sv-price .sv-2col {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: center;
  gap: 28px 56px;
  padding: 56px 64px;
  border: 1px solid var(--lg-line);
  border-radius: 32px;
  background: linear-gradient(120deg, var(--lg-mist) 0%, var(--lg-mist2) 55%, #fff 100%);
}
.pg-sv .sv-price .sv-2col__h { width: auto; }
.pg-sv .sv-price .av-sh { align-items: flex-start; text-align: left; }
.pg-sv .sv-price__p { font-size: 16px; line-height: 2; }
.pg-sv .sv-price__link { margin-top: 26px; }

/* =========================================================================
   9. よくある質問（1列・中央）
   ========================================================================= */
.pg-sv .sv-faq { padding: 110px 0 120px; background: var(--lg-mist2); }
.pg-sv .sv-faq .sv-2col { display: block; width: 880px; }
.pg-sv .sv-faq .sv-2col__h { width: auto; }
.pg-sv .sv-faq .sv-2col__b { margin-top: 44px; }
.pg-sv .sv-faq__list { gap: 14px; }
.pg-sv .sv-faq__list details { border: 1px solid var(--lg-line); border-radius: 18px; }
.pg-sv .sv-faq__list summary { gap: 16px; padding: 22px 66px 22px 28px; }
.pg-sv .sv-faq__q,
.pg-sv .sv-faq__a > span {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}
.pg-sv .sv-faq__q { color: var(--c-blue); }
.pg-sv .sv-faq__a > span { color: var(--lg-sub); }
.pg-sv .sv-faq__t { font-size: 16.5px; line-height: 1.6; }
/* 開閉の印は ＋ と − */
.pg-sv .sv-faq__list summary::after {
  right: 28px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  -webkit-mask: none;
  mask: none;
  background:
    linear-gradient(var(--c-blue), var(--c-blue)) center / 16px 2px no-repeat,
    linear-gradient(var(--c-blue), var(--c-blue)) center / 2px 16px no-repeat;
  transition: none;
}
.pg-sv .sv-faq__list details[open] summary::after {
  transform: none;
  background: linear-gradient(var(--c-blue), var(--c-blue)) center / 16px 2px no-repeat;
}
.pg-sv .sv-faq__a {
  gap: 16px;
  margin: 0 28px;
  padding: 18px 0 24px;
  border-top: 1px dashed var(--lg-plate);
}
.pg-sv .sv-faq__a p { padding-top: 0; font-size: 15px; line-height: 1.9; }

/* =========================================================================
   10. 導入の流れ（横一列のタイムライン）
   ========================================================================= */
.pg-sv .sv-flow { padding: 120px 0 130px; }
.pg-sv .sv-flow__list {
  position: relative;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 22px;
  margin-top: 52px;
}
/* ノードをつなぐ線（01 の中心から 06 の中心まで。6列・間22px・ノード56px） */
.pg-sv .sv-flow__list::before {
  content: "";
  position: absolute;
  left: 28px;
  right: calc(100% / 6 - 46.33px);
  top: 27px;
  height: 2px;
  background: linear-gradient(90deg, var(--lg-plate), var(--c-blue));
}
.pg-sv .sv-flow__list article {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}
.pg-sv .sv-flow__list article:nth-child(n)::after { content: none; }
.pg-sv .sv-flow__head { flex-direction: column; align-items: flex-start; }
.pg-sv .sv-flow__no {
  position: relative;
  display: grid;
  place-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-grad-a) 100%);
  box-shadow: 0 8px 18px rgba(24, 154, 211, .25);
  text-align: center;
}
.pg-sv .sv-flow__no span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.2;
  color: rgba(255, 255, 255, .85);
}
.pg-sv .sv-flow__no strong {
  font-size: 19px;
  letter-spacing: .04em;
  line-height: 1.1;
  color: #fff;
}
.pg-sv .sv-flow__ttl {
  margin: 20px 0 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.5;
}
.pg-sv .sv-flow__p {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
  font-size: 14px;
  line-height: 1.85;
}

/* =========================================================================
   〜1180px
   ========================================================================= */
@media (max-width: 1180px) {
  .pg-sv .sv-intro__top { gap: 48px; }
  .pg-sv .sv-intro__ph { width: 44%; height: 300px; }
  .pg-sv .sv-intro__ttl { font-size: 30px; }
  .pg-sv .sv-issue { padding: 52px 40px 56px; }
  .pg-sv .sv-price .sv-2col { padding: 48px 44px; }
  .pg-sv .sv-fn__item { gap: 36px; padding-right: 36px; }
  .pg-sv .sv-fn__item--rev { padding: 18px 18px 18px 36px; }
}

/* =========================================================================
   〜1024px
   ========================================================================= */
@media (max-width: 1024px) {
  .sv-tabs { width: 640px; }
  .pg-sv .sv-intro__ttl { font-size: 26px; }

  .sv-issue__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 主なサービス：写真の横に文章のまま、写真を少し細く */
  .pg-sv .sv-fn > .av-wrap { gap: 24px; }
  .pg-sv .sv-fn__item { gap: 28px; padding: 14px 28px 14px 14px; border-radius: 26px; }
  .pg-sv .sv-fn__item--rev { padding: 14px 14px 14px 28px; }
  .pg-sv .sv-fn__ph,
  .pg-sv .sv-fn__item--s .sv-fn__ph { width: 42%; border-radius: 16px; }
  .pg-sv .sv-fn__txt { padding: 12px 0; }
  .pg-sv .sv-fn__tag { font-size: 22px; }

  .pg-sv .sv-price .sv-2col { grid-template-columns: minmax(0, 1fr); }

  /* 導入の流れ：縦のタイムライン */
  .pg-sv .sv-flow__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    width: 720px;
    max-width: 100%;
    margin-inline: auto;
  }
  .pg-sv .sv-flow__list::before {
    left: 27px;
    right: auto;
    top: 28px;
    bottom: 28px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--lg-plate), var(--c-blue));
  }
  .pg-sv .sv-flow__list article {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 24px;
  }
  .pg-sv .sv-flow__head { display: contents; }
  .pg-sv .sv-flow__no { grid-column: 1; grid-row: 1 / span 2; }
  .pg-sv .sv-flow__ttl { grid-column: 2; margin-top: 4px; }
  .pg-sv .sv-flow__p { grid-column: 2; }
}

/* =========================================================================
   768〜900px：3枚並びのカードは1列にして写真を左に
   ========================================================================= */
@media (min-width: 768px) and (max-width: 900px) {
  .pg-sv .sv-cards,
  .pg-sv .sv-case__list { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .pg-sv .sv-cards > div:has(.sv-card__ph) {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    align-content: start;
    column-gap: 10px;
    padding: 14px 14px 22px;
  }
  .pg-sv .sv-cards > div:has(.sv-card__ph) > * { grid-column: 2; }
  .pg-sv .sv-cards > div > .sv-card__ph {
    grid-column: 1;
    grid-row: 1 / span 4;
    height: 100%;
    min-height: 200px;
    margin: 0;
    aspect-ratio: auto;
  }
  .pg-sv .sv-cards > div:has(.sv-card__ph) .sv-card__head { padding-top: 10px; }

  .pg-sv .sv-case__list a {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    align-content: start;
    column-gap: 10px;
    padding: 12px;
  }
  .pg-sv .sv-case__list a > * { grid-column: 2; }
  .pg-sv .sv-case__list a > .sv-case__ph { grid-column: 1; grid-row: 1 / span 3; }
  .pg-sv .sv-case__meta { margin-top: 8px; }
}

/* =========================================================================
   スマホ（〜767px）
   ========================================================================= */
@media (max-width: 767px) {
  .sv-tabs { gap: 4px; width: auto; margin-top: 28px; padding: 5px; }
  .sv-tabs a,
  .sv-tabs a.is-on { flex: 1 1 auto; height: 46px; padding: 0 8px; font-size: 13px; letter-spacing: 0; white-space: nowrap; }

  .pg-sv .sv-intro { padding-top: 44px; }
  .pg-sv .sv-intro__ph { width: auto; height: 220px; border-radius: 20px; box-shadow: -12px 12px 0 var(--lg-mist); margin-left: 12px; }
  .pg-sv .sv-intro__txt { margin-top: 36px; }
  .pg-sv .sv-intro__ttl { font-size: 23px; line-height: 1.6; }
  .pg-sv .sv-intro__ttl::before { width: 36px; margin-bottom: 18px; }
  .pg-sv .sv-intro__lead { margin-top: 16px; font-size: 15px; line-height: 1.95; }

  .pg-sv .sv-issue { margin-top: 56px; padding: 40px 18px 22px; border-radius: 24px; }
  .sv-issue__h { font-size: 21px; }
  .sv-issue__h::before { font-size: 12px; margin-bottom: 4px; }
  .sv-issue__list { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
  .sv-issue__list a { gap: 14px; min-height: 72px; padding: 16px 18px 16px 16px; border-radius: 20px 20px 20px 5px; }
  .sv-issue__list a::before { width: 26px; height: 26px; }
  .sv-issue__list a::after { left: 26px; }
  .sv-issue__list p { font-size: 15px; line-height: 1.6; }

  .pg-sv .av-sh { gap: 8px; }
  .pg-sv .av-sh__en { font-size: 12px; gap: 10px; }
  .pg-sv .av-sh__en::before,
  .pg-sv .av-sh__en::after { width: 16px; }
  .pg-sv .av-sh__ja { font-size: 25px; }

  .pg-sv .sv-fn { padding-top: 72px; }
  .pg-sv .sv-fn > .av-wrap { gap: 18px; }
  .pg-sv .sv-fn .av-sh { margin-bottom: 8px; }
  /* スマホは写真が上・その下に見出し・本文・補足 */
  .pg-sv .sv-fn__item,
  .pg-sv .sv-fn__item--rev { flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border-radius: 22px; }
  .pg-sv .sv-fn__ph,
  .pg-sv .sv-fn__item--s .sv-fn__ph { width: auto; aspect-ratio: 16 / 10; border-radius: 14px; }
  .pg-sv .sv-fn__txt { margin-top: 0; padding: 22px 10px 12px; }
  .pg-sv .sv-fn__no { padding: 6px 12px; font-size: 11px; }
  .pg-sv .sv-fn__tag { height: auto; padding: 0; font-size: 21px; line-height: 1.45; }
  .pg-sv .sv-fn__ttl { margin-top: 10px; font-size: 16px; line-height: 1.7; }
  .pg-sv .sv-fn__p { margin-top: 10px; font-size: 14.5px; line-height: 1.9; }
  .pg-sv .sv-fn__note { font-size: 12px; }

  .pg-sv .sv-card-sec { padding-top: 72px; }
  .pg-sv .sv-sensor { margin-top: 72px; padding: 60px 0 64px; }
  .pg-sv .sv-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .pg-sv .sv-cards > div { padding: 10px 10px 24px; border-radius: 22px; }
  .pg-sv .sv-feat .sv-cards > div { padding-top: 24px; }
  .pg-sv .sv-card__ph { height: auto; margin-bottom: 20px; border-radius: 14px; }
  .pg-sv .sv-card__head,
  .pg-sv .sv-card__p,
  .pg-sv .sv-card__note { padding-inline: 10px; }
  .pg-sv .sv-card__no { font-size: 12px; line-height: 24px; }
  .pg-sv .sv-card__ttl { font-size: 18px; }
  .pg-sv .sv-card__p,
  .pg-sv .sv-sensor .sv-card__p { font-size: 14.5px; line-height: 1.9; }

  .pg-sv .sv-case { padding-top: 72px; }
  .pg-sv .sv-case__list { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .pg-sv .sv-case__list article + article { margin-top: 0; }
  .pg-sv .sv-case__list a { padding: 10px 10px 20px; border-radius: 22px; }
  .pg-sv .sv-case__ph { height: auto; border-radius: 14px; }
  .pg-sv .sv-case__meta { margin-top: 14px; }
  .pg-sv .sv-case__ttl { font-size: 16px; line-height: 1.6; }
  .pg-sv .sv-more { margin-top: 32px; }
  .pg-sv .sv-more a,
  .pg-sv .sv-price__link a { height: 54px; padding: 0 24px 0 28px; font-size: 14.5px; }

  .pg-sv .sv-price { padding: 72px 0; }
  .pg-sv .sv-price .sv-2col { gap: 18px; padding: 36px 22px 32px; border-radius: 24px; }
  .pg-sv .sv-price .sv-2col__b { margin-top: 0; }
  .pg-sv .sv-price__p { font-size: 14.5px; line-height: 1.95; }
  .pg-sv .sv-price__link { margin-top: 22px; }

  .pg-sv .sv-faq { padding: 64px 0 72px; }
  .pg-sv .sv-faq .sv-2col { width: auto; }
  .pg-sv .sv-faq .sv-2col__b { margin-top: 28px; }
  .pg-sv .sv-faq__list { gap: 10px; }
  .pg-sv .sv-faq__list details { border-radius: 14px; }
  .pg-sv .sv-faq__list summary { gap: 12px; padding: 16px 46px 16px 18px; }
  .pg-sv .sv-faq__q,
  .pg-sv .sv-faq__a > span { width: auto; height: auto; font-size: 18px; }
  .pg-sv .sv-faq__t { font-size: 15px; line-height: 1.6; }
  .pg-sv .sv-faq__list summary::after { right: 18px; width: 14px; height: 14px; margin-top: -7px; background-size: 14px 2px, 2px 14px; }
  .pg-sv .sv-faq__list details[open] summary::after { background-size: 14px 2px; }
  .pg-sv .sv-faq__a { gap: 12px; margin: 0 18px; padding: 14px 0 18px; }
  .pg-sv .sv-faq__a p { padding-top: 0; font-size: 14.5px; line-height: 1.9; }

  .pg-sv .sv-flow { padding: 64px 0 72px; }
  .pg-sv .sv-flow__list { gap: 24px; margin-top: 32px; }
  .pg-sv .sv-flow__list article { column-gap: 18px; padding: 0; }
  .pg-sv .sv-flow__list::before { left: 25px; top: 26px; bottom: 26px; }
  .pg-sv .sv-flow__list article { grid-template-columns: 52px minmax(0, 1fr); }
  .pg-sv .sv-flow__no { width: 52px; height: 52px; border-radius: 16px; }
  .pg-sv .sv-flow__no strong { font-size: 18px; line-height: 1.1; }
  .pg-sv .sv-flow__ttl { font-size: 16.5px; line-height: 1.5; }
  .pg-sv .sv-flow__p { font-size: 14px; line-height: 1.85; }
}

/* =========================================================================
   11. ヒーロー（サービス3ページ）
   経緯（どれも 2026-09-18 の指示）
     ・「各サービスのページのヒーロ画面を添付した画像を再現して」… スマホの画面3枚（941×1672）
     ・「サービスのヒーロ画面を PC画面はこれにして」             … PC の画面3枚（1672×941）
     ・「画像がモーション、浮いたり、動くようにしてほしい」「背景がトップページのヒーロ画面と同じようにしてほしい」
   作り
     ・背景＝トップのヒーローと同じ空（images/photo/hx-bg.jpg を枠いっぱいに）。下の端は白いページへ溶かす。
     ・写真＝添付画像から1枚ずつ輪郭どおりに切り抜いた透過 WebP（sv-sp-<p|r|s>-<n>.webp／sv-pc-<p|r|s>-<n>.webp。
       scratchpad の cut.py）。<picture> で 768px から PC 用に差し替える。WEB制作・運用の PC は写真が3枚なので4枠目は空の画像。
       位置と幅は添付画像の画素を「絵の枠」に対する % に直した値（下の表・枠はスマホ＝添付の y=130 から下 941×1542、
       PC＝y=62 から下 1672×879）。重なっている写真は、後ろの写真の隠れた所を埋めてあるので別々に揺れてもすき間は出ない。
     ・動き＝写真とロゴが順に下からぼけて浮かび上がる → そのあと写真は1枚ずつ別の周期でゆっくり上下に浮く
       （トップの写真カードと同じ動き）。動きを減らす設定の端末では止める。
     ・ロゴ＝sv-logo-<p|r|s>.png（スマホと PC 共通）。R・S は正式ロゴ（svc_logo_r/s.png を切り詰めたもの・2026-09-18）。
       縦長なので P と同じ面積になる幅にした。切替ボタンは本物（.sv-tabs）を絵の上に重ねる。
     ・ロゴの下の「集客支援」などは読み上げ用（画面には出さない）。PC も指示で消した（2026-09-18）＝
       消えた文字の高さ（ロゴとの間＋字の大きさ）だけロゴを下げ、ロゴの下端が前の文字の下端の位置に来る。
   ========================================================================= */
.pg-sv { padding-top: var(--hd-h); }

/* --svh-logo / --svh-logo-y … スマホ　　--svh-pc-* … PC・タブレット（ロゴの幅・ロゴの上端） */
.svh--p { --svh-logo: 31.35%; --svh-logo-y: 78.3%;
          --svh-pc-w: 17.77%; --svh-pc-y: 30.38cqw; }
.svh--r { --svh-logo: 24.6%;  --svh-logo-y: 77.6%;
          --svh-pc-w: 13.97%; --svh-pc-y: 31.9cqw; }
.svh--s { --svh-logo: 25.95%; --svh-logo-y: 76.9%;
          --svh-pc-w: 14.71%; --svh-pc-y: 31.97cqw; }

.svh {
  --svh-out: cubic-bezier(.215, .61, .355, 1);   /* 出てくる動きの減速（トップと同じ） */
  --fa: 1.6vw;                                    /* 写真が浮く幅（片側） */
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #eaf5fd;                            /* 空の画像が来る前の下地 */
}
.svh__art { position: relative; aspect-ratio: 941 / 1542; }
.svh__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  animation: svh-sky 2.4s var(--svh-out) both;
}
/* 空の下の端 → 白いページ（写真より後ろ） */
.svh__art::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: 16%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

/* 写真：出てくる動きは枠（picture）、浮く動きは中の画像 */
.svh__ph {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  animation: svh-rise .9s var(--svh-out) var(--d, 0s) both;
}
.svh__ph img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 0 1.3vw rgba(255, 255, 255, .6)) drop-shadow(0 2.2vw 4vw rgba(28, 92, 160, .16));
  animation: svh-float var(--fl, 8s) ease-in-out var(--fd, 0s) infinite alternate;
}
.svh__ph--1 { --d: 0.15s; --fl: 6s; --fd: -1.2s; }
.svh__ph--2 { --d: 0.30s; --fl: 7.4s; --fd: -4.1s; }
.svh__ph--3 { --d: 0.45s; --fl: 6.8s; --fd: -2.6s; }
.svh__ph--4 { --d: 0.60s; --fl: 8s; --fd: -6s; }

/* 添付画像での位置（--x/--y/--w＝スマホ、--xp/--wp＝PC。絵の枠に対する %。PC の上端 --yp は幅に対する cqw＝絵の下を伸ばしても写真は動かない） */
.svh--p .svh__ph--1 { --x: 0%; --y: 1.56%; --w: 58.98%; --xp: 0%; --yp: -0.18cqw; --wp: 55.32%; }
.svh--p .svh__ph--2 { --x: 51.33%; --y: 5.58%; --w: 48.67%; --xp: 0%; --yp: 25.6cqw; --wp: 37.02%; }
.svh--p .svh__ph--3 { --x: 0%; --y: 34.95%; --w: 53.13%; --xp: 55.74%; --yp: 2.33cqw; --wp: 44.26%; }
.svh--p .svh__ph--4 { --x: 46.65%; --y: 38.65%; --w: 53.35%; --xp: 67.46%; --yp: 23.68cqw; --wp: 32.54%; }
.svh--r .svh__ph--1 { --x: 0%; --y: 2.14%; --w: 62.91%; --xp: 0%; --yp: 5.44cqw; --wp: 38.76%; }
.svh--r .svh__ph--2 { --x: 65.57%; --y: 5.58%; --w: 34.43%; --xp: 23.92%; --yp: 1.26cqw; --wp: 44.08%; }
.svh--r .svh__ph--3 { --x: 0%; --y: 33.85%; --w: 46.23%; --xp: 58.91%; --yp: 5.56cqw; --wp: 35.59%; }
.svh--r .svh__ph--4 { --x: 41.34%; --y: 37.81%; --w: 58.66%; --xp: 59.81%; --yp: 19.62cqw; --wp: 40.19%; }
.svh--s .svh__ph--1 { --x: 0%; --y: 3.76%; --w: 59.51%; --xp: 51.56%; --yp: 6.58cqw; --wp: 48.44%; }
.svh--s .svh__ph--2 { --x: 56.96%; --y: 12.71%; --w: 41.66%; --xp: 16.51%; --yp: 1.2cqw; --wp: 39.41%; }
.svh--s .svh__ph--3 { --x: 0%; --y: 33.85%; --w: 50.37%; --xp: 0%; --yp: 18.42cqw; --wp: 36.48%; }
.svh--s .svh__ph--4 { --x: 52.92%; --y: 39.75%; --w: 47.08%; }

.svh__side { position: absolute; inset: 0; z-index: 2; }
.svh__id {
  position: absolute;
  left: 50%;
  top: var(--svh-logo-y);
  width: var(--svh-logo);
  margin: 0;
  translate: -50% -50%;
  animation: svh-rise .9s var(--svh-out) .75s both;
}
.svh__logo { display: block; width: 100%; height: auto; }
.svh__kana {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.svh__deco { display: none; }      /* WEB制作・運用の飾り文字（PC だけ） */

/* 切替ボタン：空の上に乗るすりガラスの帯。スマホは画像と同じく左右に 3%・下から1割あたり */
.svh .sv-tabs {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 88.6%;
  width: auto;
  max-width: none;
  margin: 0;
  padding: .64vw;
  gap: .6vw;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(28, 92, 160, .12), inset 0 0 0 1px rgba(255, 255, 255, .9);
}
.svh .sv-tabs a {
  flex: 1 1 0;
  height: 10.4vw;
  padding: 0 4px;
  font-size: clamp(12px, 3.35vw, 15px);
  letter-spacing: .02em;
  white-space: nowrap;
}
.svh .sv-tabs a:hover { background: rgba(255, 255, 255, .8); }
/* 選ばれていない2つが隣り合うところに細い区切り線（画像のとおり） */
.sv-tabs a { position: relative; }
.sv-tabs a:not(.is-on) + a:not(.is-on)::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 24%;
  bottom: 24%;
  width: 1px;
  background: rgba(57, 54, 51, .14);
}

/* ---------- PC・タブレット（768px〜）：添付の PC 画面の配置 ---------- */
@media (min-width: 768px) {
  /* 指示「サービスページのこの表示（ロゴ・サービス名・切替ボタン）をもっと下にしてほしい」（2026-09-18）：
     絵の下に空を 80px（添付画像の px）足して、ロゴ・サービス名・切替ボタンを同じだけ下げた＝--svh-pc-drop */
  .svh { --fa: .6vw; --svh-pc-drop: 4.78cqw; container-type: inline-size; }
  .svh__art { aspect-ratio: 1672 / 959; }
  .svh__ph { left: var(--xp); top: var(--yp); width: var(--wp); }
  .svh__ph img { filter: drop-shadow(0 0 .8vw rgba(255, 255, 255, .6)) drop-shadow(0 1vw 2.4vw rgba(28, 92, 160, .16)); }
  .svh--s .svh__ph--4 { display: none; }
  .svh__art::after { height: 12%; }
  .svh__id {
    display: flex;
    flex-direction: column;
    align-items: center;
    top: calc(var(--svh-pc-y) + var(--svh-pc-drop));
    width: var(--svh-pc-w);
    translate: -50% 0;
  }
  /* 切替ボタン：画像の 420〜1253px・上端 765px（絵の上から）＋下げた分・高さ 70px */
  .svh .sv-tabs {
    left: 25.12%;
    right: auto;
    top: calc(45.75cqw + var(--svh-pc-drop));
    width: 49.82%;
    height: max(36px, 4.19cqw);
    padding: 0;
    gap: 0;
    box-shadow: 0 .6cqw 1.8cqw rgba(28, 92, 160, .12), inset 0 0 0 1px rgba(255, 255, 255, .9);
  }
  .svh .sv-tabs a,
  .svh .sv-tabs a.is-on {
    height: 100%;
    padding: 0 .5cqw;
    font-size: max(12px, 1.26cqw);
    letter-spacing: .04em;
  }
  .svh .sv-tabs a.is-on { box-shadow: 0 .5cqw 1.4cqw rgba(24, 154, 211, .3); }
  .svh .sv-tabs a:not(.is-on) + a:not(.is-on)::before { left: -.5px; }
}
/* WEB制作・運用の飾り文字（添付の PC 画面の右上・左上・右下。位置は画素 → cqw） */
@media (min-width: 1025px) {
  .svh__deco { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .svh__copy,
  .svh__en {
    position: absolute;
    animation: svh-rise .9s var(--svh-out) 1s both;
  }
  .svh__copy {
    left: 84.8cqw;
    top: 2.96cqw;
    font-size: 1.32cqw;
    font-weight: 500;
    letter-spacing: .2em;
    line-height: 1.6;
    color: #3c4b5c;
    white-space: nowrap;
  }
  .svh__en {
    display: block;
    font-family: var(--f-en);
    font-size: .84cqw;
    font-weight: 500;
    letter-spacing: .22em;
    line-height: 1.82;
    color: #7f9ab3;
    white-space: nowrap;
  }
  .svh__en--a { left: 4.3cqw; top: 6.5cqw; }
  .svh__en--b { left: 84.7cqw; top: calc(39.2cqw + var(--svh-pc-drop)); }
  .svh__copy::after,
  .svh__en::after {
    content: "";
    display: block;
    width: 2.7cqw;
    height: 2px;
    margin-top: 1.2cqw;
    background: var(--c-blue);
    opacity: .7;
  }
}

@keyframes svh-sky   { from { scale: 1.06; } to { scale: 1; } }
@keyframes svh-rise  { from { opacity: 0; filter: blur(10px); transform: translateY(30px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes svh-float { from { translate: 0 calc(var(--fa) * -1); } to { translate: 0 var(--fa); } }

@media (prefers-reduced-motion: reduce) {
  .svh__sky, .svh__ph, .svh__ph img, .svh__id, .svh__copy, .svh__en { animation: none; }
}

/* ---------- アプリ紹介のしめくくり（「作って終わり」にしない・料金は税抜 1,920円・2026-09-19） ---------- */
.pg-sv .sv-app-end { margin-top: 28px; padding: 44px 32px; border-radius: 30px; background: var(--lg-mist); text-align: center; }
.pg-sv .sv-app-end__msg { font-size: 22px; font-weight: 700; letter-spacing: .04em; line-height: 1.75; color: var(--c-ink); }
.pg-sv .sv-app-end__nb { white-space: nowrap; }
.pg-sv .sv-app-end__note { margin-top: 16px; font-size: 14px; font-weight: 500; line-height: 1.8; color: var(--c-ink-2); }
@media (max-width: 767px) {
  .pg-sv .sv-app-end { margin-top: 18px; padding: 30px 12px; border-radius: 22px; }
  .pg-sv .sv-app-end__msg { font-size: min(15px, 3.8vw); letter-spacing: .02em; line-height: 1.8; word-break: auto-phrase; text-wrap: balance; }
  .pg-sv .sv-app-end__note { margin-top: 12px; font-size: 12px; word-break: auto-phrase; text-wrap: balance; }
}

/* ---------- 重要なお知らせ（料金パネルの枠で・乗り換えのご案内→無料相談へ・2026-09-19） ---------- */
.pg-sv .sv-notice .av-sh__ja { white-space: nowrap; }
/* 見出しはPCでも上（2026-09-19 指示） */
.pg-sv .sv-notice .sv-2col { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.pg-sv .sv-notice__lead { font-size: 21px; font-weight: 700; letter-spacing: .04em; line-height: 1.75; color: var(--c-ink); }
.pg-sv .sv-notice__note { margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--c-ink-2); }
.pg-sv .sv-notice__p { margin-top: 18px; font-size: 16px; font-weight: 500; line-height: 1.9; }
/* PC は中央ぞろえ（見出し・文章・ボタン・2026-09-19 指示）。スマホは左ぞろえのまま */
@media (min-width: 768px) {
  .pg-sv .sv-notice .sv-2col { justify-items: center; text-align: center; }
  .pg-sv .sv-notice .av-sh { align-items: center; text-align: center; }
  .pg-sv .sv-notice .sv-price__link { display: flex; justify-content: center; }
}
@media (max-width: 767px) {
  .pg-sv .sv-notice__lead { font-size: min(17px, 3.9vw); letter-spacing: .02em; }
  .pg-sv .sv-notice__note { font-size: 12px; word-break: auto-phrase; }
  .pg-sv .sv-notice__p { margin-top: 14px; font-size: min(14.5px, 3.7vw); white-space: nowrap; }
}

/* ---------- ご利用の流れ：スマホだけ「い。」「す。」が次の行に残らないよう、言葉の切れ目で折り返す（PCは列が狭く逆に読みにくいので従来どおり・2026-09-19） ---------- */
@media (max-width: 767px) { .pg-sv .sv-flow__p { word-break: auto-phrase; } }