/* ========================================
   /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 { background: 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; }
@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); }
}
@keyframes svcRim {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.07); opacity: .45; }
}
@keyframes svcPing {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ========================================
   5. 支援の流れ
======================================== */
.svc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 8ステップ＝4列×2段 */
  gap: 16px 16px;
  row-gap: 42px;                          /* 2段目のバッジがカード上辺にかかるので広めに取る */
  margin-top: 18px; /* 上部 straddle バッジ分の余白 */
}
.svc-step {
  position: relative;
  padding: 42px 20px 26px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
/* 番号バッジ：カード上辺に半分かかる */
.svc-step__no {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 700;
}
.svc-step__title {
  margin: 0 0 14px;
  text-align: center;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-ink);
}
.svc-step__text {
  margin: 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-ink-soft);
}
/* カード間のフロー矢印（PC・多カラム時のみ）。行末（4の倍数）は次が右にないので出さない。
   カードの天地中央に置く（高さは行内で揃うので、行のどのカードでも同じ位置になる） */
.svc-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -12px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--color-ink-soft);
  z-index: 2;
}
.svc-step:nth-child(4n)::after { content: none; }

/* 濃紺背景のとき（PROCESS）：白カードはそのまま活かし、地に埋もれる要素だけ配色を差し替える */
.svc-section--ink .svc-lead { color: #c6d8ea; }
.svc-section--ink .svc-step {
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
/* バッジはカード上辺をまたぐ＝上半分が濃紺の上に乗るため、濃紺のままだと消える */
.svc-section--ink .svc-step__no { background: var(--color-primary); }
/* 矢印もカード間（濃紺の上）に出るので明るい色へ（PCは右向き＝border-left） */
.svc-section--ink .svc-step:not(:last-child)::after { border-left-color: #7fb4dd; }

/* 支援の流れ：中間幅は2列（8枚を1列に積むと縦に伸びすぎるため） */
@media (max-width: 1024px) and (min-width: 721px) {
  .svc-steps { grid-template-columns: repeat(2, 1fr); row-gap: 42px; }
  .svc-step:nth-child(4n)::after { content: ""; }   /* 4列前提の除外を解除 */
  .svc-step:nth-child(2n)::after { content: none; } /* 2列の行末を除外 */
}
/* SPは縦並び（長文も読みやすく） */
@media (max-width: 720px) {
  .svc-steps {
    grid-template-columns: 1fr;
    gap: 26px;
    max-width: 760px;
    margin-inline: auto;
  }
  .svc-step { padding: 26px 26px 26px 84px; }
  .svc-step__no { top: 26px; left: 26px; transform: none; }
  .svc-step__title { text-align: left; }
  .svc-step__text { text-align: left; }
  /* 縦並びなので矢印も下向きに。カード下辺の中央、次のカードとの間に置く */
  .svc-step:not(:last-child)::after {
    display: block;
    content: "";
    top: auto;
    right: auto;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid var(--color-ink-soft);
    border-bottom: 0;
  }
  /* 4列前提で消していた行末（4番）も、縦並びでは出す */
  .svc-step:nth-child(4n)::after { content: ""; }
  .svc-step:last-child::after { content: none; }
  /* 濃紺背景の色指定はPCの右向き前提なので、SPの下向き三角に付け替える */
  .svc-section--ink .svc-step:not(:last-child)::after {
    border-left-color: transparent;
    border-top-color: #7fb4dd;
  }
}

/* ========================================
   6. FAQ（アコーディオン）
======================================== */
.svc-faq {
  max-width: 860px;
  margin-inline: auto;
  border-top: 1px solid var(--color-line);
}

.svc-faq__q:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.svc-faq__a {
  padding: 0 15px 24px 41px; /* 左は 質問の padding 15px ＋ Q＋gap 26px ＝ 質問タイトルの開始位置 */
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--color-ink-soft);
}

/* ========================================
   HOW TO（waltsuのWeb集客コンサルティングとは：左=テキスト／右=図解）
======================================== */
.cns-howto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(28px, 4vw, 44px);
}
.cns-howto__title {
  margin: 0 0 20px;
  /* PCで 28px。カラムが狭くなる幅では折り返しが崩れるので縮小させる */
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--color-primary);
}
.cns-howto__text {
  margin: 0;
  /* PCで 18px */
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 2;
  color: var(--color-ink-soft);
}
.cns-howto__text strong { color: var(--color-ink); font-weight: 700; }
/* マーカー：文字の下側だけに色を敷く蛍光ペン風。太字と併用しても濃くなりすぎない濃度に */
.cns-howto__text mark {
  padding: 0 .06em;
  background: linear-gradient(transparent 58%, rgba(242, 157, 0, .38) 58%);
  color: var(--color-ink);
  font-weight: 700;
}

/* 図解：画像の地色がセクション背景とほぼ同じなので、枠や影は付けず素置きにする */
.cns-howto__visual { min-width: 0; }
.cns-howto__visual img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .cns-howto { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  /* h3側の手動改行は解除（幅が足りず不自然に割れるため）。文字サイズは指定の28px */
  .cns-howto__title br { display: none; }
  .cns-howto__title { font-size: 28px; }
}

/* ISSUES（こんな課題ありませんか？：左=悩みリスト／右=イラストの2カラム） */
.cns-issues {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  align-items: stretch;
  margin-top: clamp(28px, 4vw, 44px);
}
.cns-issues__list {
  grid-column: 2 / 11;
  width: 728px;      /* 内側（padding内）を680pxにするための外形（680 + 左右24px） */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cns-issue {
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 24px;
  background: var(--color-bg-alt);
  border-radius: 10px;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 700;
  line-height: 1.65;
  color: var(--color-ink);
  font-feature-settings: "palt";  /* 読点など約物の余分なアキを詰める */
}
/* テキスト全体を1つのflexアイテムに（テキストとstrongの間にflex gapが入るのを防ぐ） */
.cns-issue__text { min-width: 0; }
/* 強調語は行末で分断させない（塊で折り返す） */
.cns-issue strong { color: var(--color-primary); font-weight: 700; white-space: nowrap; }
.cns-issue::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23036EB8'/%3E%3Cpath d='M6.8 12.4l3.2 3.2 7.2-7.2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
}
/* 画像を絶対配置にして visual の自然高さを0にする → grid行の高さは左リスト基準になり、
   画像はその枠に object-fit:cover で敷き詰め、上部（顔〜上半身）を見せる（＝左リストと同じ高さ） */
.cns-issues__visual {
  grid-column: 11 / 13;
  align-self: stretch;
  position: relative;
  min-height: 0;
  width: 100%;
  overflow: visible; /* 右にはみ出してOK（イラストを大きく見せる） */
}
.cns-issues__visual img {
  position: absolute;
  bottom: 0;
  left: 25%;                    /* grid11 の中央にイラスト中央を合わせる（visual枠2列の左列中央≒25% − 実測補正30px） */
  transform: translateX(calc(-50% - 30px));
  height: 100%;      /* 課題6段の高さと同じにする */
  width: auto;
  max-width: none;   /* 縦長比率を保つ（中央基準・はみ出し許容） */
}
@media (max-width: 860px) {
  .cns-issues { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
  .cns-issues__list,
  .cns-issues__visual { grid-column: auto; }
  /* PC用の固定幅728pxが残ると 1fr トラックがその幅まで広がり、画面外へはみ出す */
  .cns-issues__list { width: auto; }
  .cns-issues__visual { max-width: 480px; margin-inline: auto; position: static; }
  .cns-issues__visual img { position: static; height: auto; width: 100%; max-width: 100%; transform: none; }
}

/* ABOUT（定義段落） */
/* VALUE見出し：他セクションより文が長い（1文まるごと）ので、上限を少し下げて2行に収める */
.cns-value__title { font-size: clamp(20px, 2.6vw, 28px); }
@media (max-width: 720px) {
  .cns-value__br { display: none; }   /* 手動改行を解除してブラウザ任せの折り返しに */
  .cns-value__title { font-size: 28px; }
}

.cns-def { max-width: 820px; margin-inline: auto; text-align: center; }
.cns-def p { margin: 0 0 18px; font-size: 16px; line-height: 2; color: var(--color-ink-soft); }
.cns-def p:last-child { margin-bottom: 0; }
.cns-def strong { color: var(--color-ink); font-weight: 700; }

/* VALUE：見出しと直下の説明文を一体で読ませるため、見出し下の余白を詰める */
.svc-head:has(.cns-value__title) { margin-bottom: 20px; }

/* VALUE内 5ステップ（アイコン＋番号＋見出しを1行にまとめ、本文はその下に全幅。2列で並べる） */
.cns-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 4.4vw, 54px) clamp(28px, 4vw, 56px);
  max-width: 980px;
  margin: clamp(28px, 3.4vw, 44px) auto 0;
  text-align: left;
}
.cns-step {
  display: grid;
  /* 左＝アイコン／右＝番号＋見出し。本文とCTAは下に全幅で回り込む */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "fig  head"
    "text text"
    "cta  cta";
  align-items: center;
  /* カードごとに高さが違う（04だけCTAがある）ため、余りを行間に配らず上詰めにする */
  align-content: start;
  gap: 12px 14px;
}
/* __body は枠として使わず、中の head / text / cta を直接グリッドに載せる */
.cns-step__body { display: contents; }
.cns-step__head { grid-area: head; }
.cns-step__num {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: .08em;
}
.cns-step__title {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 800;
  color: var(--color-ink);
  line-height: 1.45;
}
.cns-step__text {
  grid-area: text;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--color-ink-soft);
}
.cns-step__cta {
  grid-area: cta;
  position: relative;
  display: flex;
  width: fit-content;
  margin-left: auto;   /* 04 CTA を右揃え（本文は左のまま） */
  align-items: center;
  justify-content: center;
  min-width: 220px;
  margin-top: 4px;
  padding: 13px 48px;
  background: #fff;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  transition: background-color .25s var(--ease, ease), color .25s var(--ease, ease);
}
.cns-step__cta:hover { background: var(--color-ink); color: #fff; }
.cns-step__cta-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}
/* アイコン：Material Symbols（Apache-2.0）をインラインSVGで配置。
   枠は持たせず、見出しの左に置くマーク扱いにする */
.cns-step__figure {
  grid-area: fig;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 3vw, 36px);
  color: var(--color-primary);   /* SVGは fill="currentColor" */
}
.cns-step__icon { width: 100%; height: auto; }
@media (max-width: 720px) {
  .cns-steps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* SCOPE（支援領域・2×2） */
.svc-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.svc-type {
  padding: 32px 30px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
.svc-type__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-line);
  font-size: 19px;
  font-weight: 800;
  color: var(--color-ink);
}
.svc-type__en { font-family: var(--font-en); font-size: 15px; font-weight: 700; color: var(--color-primary); }
.svc-type__meta { margin: 0; display: grid; gap: 14px; }
.svc-type__meta dt { margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--color-primary); }
.svc-type__meta dd { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--color-ink-soft); }

/* PRICE（料金カード） */
/* PRICE：オフィス写真にブランドブルーを重ねた角丸バナー（左=コピー／右=CTA2つ） */
.cns-price {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding: clamp(34px, 4.4vw, 58px) clamp(26px, 4vw, 60px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: #fff;
  text-align: left;
}
/* 背景写真 */
.cns-price::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url(../../images/bg/choice-reasons.jpg) center / cover no-repeat;
}
/* ブランドカラーのオーバーレイ。写真は気配だけ残して、文字の可読性を優先する */
.cns-price::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(2, 62, 107, .95) 0%, rgba(3, 110, 184, .90) 58%, rgba(3, 110, 184, .82) 100%);
}
.cns-price__body { min-width: 0; }
.cns-price__lead {
  margin: 0 0 16px;
  font-size: clamp(21px, 2.5vw, 30px);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: .01em;
  color: #fff;
}
.cns-price__note {
  margin: 0;
  font-size: clamp(14px, 1.5vw, 15.5px);
  line-height: 1.95;
  color: rgba(255, 255, 255, .92);
}
/* CTA：配色は common.css の .contact-btn--primary（赤）/ --outline（白） をそのまま使う */
.cns-price__cta { display: grid; gap: 14px; }

@media (max-width: 900px) {
  .cns-price { grid-template-columns: 1fr; gap: 26px; }
  .cns-price__br { display: none; }
}

/* FAQ回答内のリンク（相談フォームへの導線） */
.svc-faq__link {
  display: inline-block;
  margin-top: 4px;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.svc-faq__link:hover { color: var(--color-primary-dark); }

/* ----- レスポンシブ ----- */
@media (max-width: 920px) {
  .svc-types { grid-template-columns: 1fr; }
}
@media (max-width: 375px) {
  .svc-type { padding: 26px 22px; }
}

/* ========================================================================
   FV（fv3デザイン移植）: 濃紺グラデの左コピー＋右に無料相談フォーム
   ＋ FV直下の権威性（顧客満足度 / 年間継続率・金月桂樹バッジ）
   ※ url() は consulting/style.css 基準（dist/service/consulting/）→ ../../images/
======================================================================== */
.lp3 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 76px);
  background:
    radial-gradient(95% 80% at 50% 38%, #155fa6 0%, #0c4680 26%, #07294b 54%, #04172e 80%, #03101f 100%);
  color: #fff;
}
.lp3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: .09;
  mix-blend-mode: soft-light;
}
/* FVの左右をヘッダー(左右3%)の際〜少し外まで広げる。max-widthは1240のまま、余白だけ詰めてgridが内側に寄るのを解消 */
.lp3__inner { position: relative; z-index: 3; padding-inline: clamp(16px, 2.4%, 40px); }

/* 2カラム（12カラム基準：コピー=1〜7 / フォーム=8〜12） */
.lp3__main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  align-items: start;
}
.lp3__copy { grid-column: 1 / 8; text-align: center; }
.lp3__form { grid-column: 8 / 13; }
@media (max-width: 960px) {
  .lp3__main { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; gap: clamp(28px, 5vw, 44px); }
  .lp3__copy, .lp3__form { grid-column: auto; }
  .lp3__form { max-width: 432px; margin-inline: auto; }
}

/* 左：コピー */
.lp3__pill {
  display: inline-block;
  margin: 0 0 10px;
  background: transparent;
  color: #fff;
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .12em;
  animation: lp3-up .7s var(--ease) both;
}
.lp3__title {
  margin: 0 0 8px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: .01em;
  color: #fff;
  font-size: clamp(25px, 3.3vw, 43px);
  animation: lp3-up .7s var(--ease) .06s both;
}
.lp3__em-key { font-style: normal; color: #ffc83d; font-size: 1.3em; }
.lp3__em-key { margin-left: .02em; white-space: nowrap; }
@media (max-width: 720px) {
  /* SPは「丸っと明日から」をより強く見せる */
  .lp3__em-key { font-size: 1.8em; }
  /* 「必要な機能を、」の後で強制改行しない（折り返しはブラウザ任せ） */
  .lp3__lead-br { display: none; }
}
.lp3__lead {
  margin: 0 auto 18px;
  max-width: 540px;
  font-size: clamp(14px, 1.45vw, 16px);
  font-weight: 500;
  line-height: 1.85;
  color: #fff;
  animation: lp3-up .7s var(--ease) .12s both;
}
.lp3__lead strong { color: #fff; font-weight: 700; }

/* ビジュアル（ノートPCフレーム＋動画） */
.lp3__visual { position: relative; margin-top: 44px; margin-bottom: 6px; animation: lp3-up .8s var(--ease) .18s both; }
/* 1カラム（≤960px）では PCモック直下がフォームカード。
   吹き出しが下へ約12px はみ出す分を足して詰まりを防ぐ（この行より前の @media では上書きされるため後置） */
@media (max-width: 960px) {
  .lp3__visual { margin-bottom: 18px; }
}
.lp3__browser { position: relative; aspect-ratio: 1200 / 630; overflow: visible; }
.lp3__browser::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../../images/laptop-frame.png) no-repeat center / 100% 100%;
  pointer-events: none;
  z-index: 2;
}
/* 画面部分：3枚のスライドを重ねて、右から左へ流れるスライドで入れ替える */
.lp3__slides {
  position: absolute;
  top: 2.6%;
  left: 9.4%;
  width: 81.1%;
  height: 87.3%;
  overflow: hidden;          /* 画面の外に出たスライドを隠す＝ベゼルからはみ出さない */
  background: var(--color-ink);
  z-index: 1;
}
.lp3__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 待機中は右側（画面外）。is-active で 0 に入り、is-leaving で左へ抜ける */
  transform: translateX(100%);
  transition: transform .7s var(--ease);
}
.lp3__slide.is-active  { transform: translateX(0); }
.lp3__slide.is-leaving { transform: translateX(-100%); }
/* 抜けたあと右の待機位置へ戻すとき、画面を逆走して見えないよう瞬間移動させる */
.lp3__slide.is-reset { transition: none; }

/* PCモックに少しかぶる吹き出し（上向きしっぽでPCを指す） */
.lp3__bubble {
  position: absolute;
  left: 50%;
  /* laptop-frame.png は下端 約5%が影用の透明領域。そこを避けて「PC本体の底面」に基準を合わせる
     （＝ウィンドウ幅が変わってもPC底面との間隔が一定になる） */
  bottom: 5.1%;
  /* 高さの50%を下に出す＝PC底面のラインが吹き出しテキストの上下中央に重なる */
  transform: translate(-50%, 50%);
  z-index: 5;
  /* 3文言を同じセルに重ねる＝いちばん長い文言の幅で固定され、切替時に幅が動かない */
  display: inline-grid;
  place-items: center;
  padding: 4px 22px;
  background: #fff;
  border-radius: 999px;
  /* SPでも1行に収まるよう可変（最長の文言＝19文字が基準）。PCでは 24px */
  font-size: clamp(11px, 3.7vw, 24px);
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
  filter: drop-shadow(0 8px 16px rgba(3, 16, 31, .32));
}
/* 文言は「奥から手前へ」出てくる：小さく透明な状態から等倍へ */
.lp3__bubble-text {
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(.78);
  /* 退場（is-active が外れる側）はサッと奥へ引く */
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.lp3__bubble-text.is-active {
  opacity: 1;
  transform: scale(1);
  /* 登場は画像のスライドに少し遅れて、ゆっくり手前に来る */
  transition: opacity .6s var(--ease) .18s, transform .6s var(--ease) .18s;
}
/* 2カラムのままPCモックが小さくなる帯（961〜1140px）。
   24pxのままだと吹き出しがモックの横幅いっぱいになるので、ここだけ少し落とす */
@media (min-width: 961px) and (max-width: 1140px) {
  .lp3__bubble { font-size: clamp(17px, 2vw, 24px); }
}
/* 狭い画面では左右の余白を詰めて、文字サイズを確保する */
@media (max-width: 480px) {
  .lp3__bubble { padding-inline: 16px; }
}
.lp3__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-bottom-color: #fff;
  border-top: 0;
}

/* 右：フォームカード */
.lp3__form {
  position: relative;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #d8e6f2;
  box-shadow: 0 24px 64px rgba(10, 37, 64, .13);
  padding: 32px;
  animation: lp3-up .8s var(--ease) .1s both;
}
.lp3__form-head { margin: 0 0 18px; text-align: center; }
.lp3__form-badge {
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  background: #fff;
  border: 1.5px solid var(--color-cta);
  border-radius: 999px;
  color: var(--color-cta);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  transform-origin: bottom center;
  animation: floatingKickerSway 1.8s ease-in-out infinite;
}
.lp3__form-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-right: 1.5px solid var(--color-cta);
  border-bottom: 1.5px solid var(--color-cta);
  transform: translateX(-50%) rotate(45deg);
}
.lp3__form-title {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-primary);
}
.lp3__fields { display: flex; flex-direction: column; gap: 13px; }
.lp3__field {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.lp3__field:has(textarea) { align-items: start; }
.lp3__field:has(textarea) .lp3__label { padding-top: 11px; }
.lp3__label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  color: var(--color-ink);
}
.lp3__req {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--color-cta);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.lp3__field input,
.lp3__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccd8e3;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-ink);
  background: #fbfdff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.lp3__field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.lp3__field input::placeholder,
.lp3__field textarea::placeholder { color: #9aa6b3; }
.lp3__field input:focus,
.lp3__field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(3, 110, 184, .15);
  background: #fff;
}
.lp3__field input:user-invalid,
.lp3__field textarea:user-invalid {
  border-color: #d83a3a;
  box-shadow: 0 0 0 3px rgba(216, 58, 58, .12);
}
.lp3__field input:user-valid:not(:placeholder-shown),
.lp3__field textarea:user-valid:not(:placeholder-shown) {
  border-color: #2f9e6d;
  box-shadow: 0 0 0 3px rgba(47, 158, 109, .12);
}
.lp3__agree {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  text-align: center;
}
.lp3__agree a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.lp3__submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: fit-content;
  min-width: min(300px, 100%);
  margin: 8px auto 0;
  padding: 17px 56px;
  background: var(--color-primary);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.lp3__submit:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.lp3__submit-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .25s var(--ease);
  display: inline-block;
  width: .8em;
  height: .8em;
  background-color: currentColor;
  -webkit-mask: url(../../images/arrow.svg?v=2) no-repeat center / contain;
  mask: url(../../images/arrow.svg?v=2) no-repeat center / contain;
  text-indent: 9999px;
  overflow: hidden;
  line-height: 1;
}
.lp3__submit:hover .lp3__submit-arrow { transform: translateY(-50%) translateX(4px); }
.lp3__submit:disabled,
.lp3__submit[disabled] {
  background: #b9c2cc;
  border-color: #b9c2cc;
  color: #fff;
  cursor: not-allowed;
  opacity: .85;
}
.lp3__submit:disabled:hover,
.lp3__submit[disabled]:hover { background: #b9c2cc; border-color: #b9c2cc; }
.lp3__note { margin: 0; font-size: 12px; color: var(--color-mute); text-align: center; }
/* iOS Safari：入力欄のフォントが16px未満だとフォーカス時に自動ズーム（画面が寄る）するため、
   モバイル幅では16pxに引き上げてズームを抑止（PCの見た目15pxは維持。プレースホルダーは別途13pxのまま） */
@media (max-width: 980px) {
  .lp3__field input,
  .lp3__field textarea { font-size: 16px; }
}

/* 権威性（FV直下・白基調グラデ） */
.authority {
  padding-block: clamp(20px, 3vw, 40px);
  background: #fff;
}
.authority .lp3__trust { margin: 0; }
.lp3__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 5vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp3__award { display: flex; flex-direction: column; align-items: center; }
.lp3__award-badge { display: flex; align-items: center; gap: clamp(2px, 0.6vw, 6px); }
.lp3__award-branch {
  flex: none;
  width: clamp(86px, 11vw, 104px);
  height: clamp(116px, 16vw, 132px);
  background: url(../../images/decor/laurel-gold.png) no-repeat;
  background-size: auto 100%;
}
.lp3__award-branch--l { background-position: left center; }
.lp3__award-branch--r { background-position: right center; }
.lp3__award-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: clamp(104px, 14vw, 124px);
}
.lp3__award-label {
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--color-ink);
}
.lp3__award-value {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-family: var(--font-en);
  font-weight: 800;
  line-height: 1;
  color: var(--color-cta);
}
.lp3__award-value b { font-size: clamp(44px, 6.2vw, 56px); font-weight: 800; }
.lp3__award-unit {
  margin-left: 1px;
  font-family: var(--font-jp);
  font-size: clamp(17px, 2.4vw, 22px);
  font-weight: 800;
  letter-spacing: .01em;
}
.lp3__award-sub {
  margin-left: 5px;
  font-family: var(--font-jp);
  font-size: clamp(12px, 1.5vw, 13.5px);
  font-weight: 700;
  color: var(--color-ink);
}
.lp3__award-note {
  margin-top: -12px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--color-mute);
  text-align: center;
}
@media (max-width: 520px) {
  /* SP：2つの実績バッジを横並びで表示（折り返さない）。reason FV の権威性ブロックと同設計 */
  .lp3__trust { flex-wrap: nowrap; gap: 2px; }
  .lp3__award { flex: 0 0 auto; min-width: 0; }
  .lp3__award-badge { gap: 0; justify-content: center; }
  .lp3__award-branch {
    width: clamp(30px, 10.8vw, 48px);  /* 中の月桂樹を広く（約42px @390） */
    height: clamp(84px, 24vw, 122px);
    background-size: auto 84%;          /* 上下に余白を作り、葉先が切れないように */
  }
  /* 中央幅を両バッジで統一 → 左右の月桂樹の開きを一致させる */
  .lp3__award-center { min-width: clamp(68px, 22.3vw, 94px); }
  .lp3__award-label { font-size: clamp(11.5px, 3.3vw, 16px); }
  .lp3__award-value b { font-size: clamp(25px, 7.9vw, 44px); }  /* 月桂樹拡大分、数字をごく僅かに縮小 */
  .lp3__award-unit { font-size: clamp(12px, 3.4vw, 17px); }
  .lp3__award-sub { margin-left: 3px; font-size: clamp(9.5px, 2.5vw, 12px); }
  .lp3__award-note { margin-top: -2px; font-size: clamp(9px, 2.5vw, 11.5px); }
}
/* 極小幅（〜360px）は月桂樹を少し控えめにして横はみ出しを防ぐ */
@media (max-width: 360px) {
  .lp3__award-branch { width: clamp(24px, 8vw, 34px); }
}

@keyframes lp3-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .lp3__field { grid-template-columns: 78px minmax(0, 1fr); gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp3__pill, .lp3__title, .lp3__lead, .lp3__visual, .lp3__form {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .lp3__form-badge { animation: none !important; }
  /* FVスライダー：動きを止めて瞬時に切り替える（自動送り自体は app.js 側で停止） */
  .lp3__slide, .lp3__bubble-text { transition: none !important; }
}

/* ===== SP：FVフォームをコンパクト化 ===== */
.lp3__brsp { display: none; }                 /* ラベル内改行は SP のみ有効化 */
@media (max-width: 560px) {
  /* 項目同士の余白を約半分に */
  .lp3__fields { gap: 7px; }
  /* ラベル列を固定幅（最大幅の「電話番号*」基準＝62px）に統一 → 全入力欄の横幅をそろえる。右詰め */
  .lp3__field { grid-template-columns: 62px minmax(0, 1fr); gap: 9px; }
  .lp3__brsp { display: inline; }             /* メール/アドレス・ご相談/内容 を改行 */
  .lp3__label { gap: 3px; font-size: 12.5px; line-height: 1.3; }
  /* 必須：赤い「*」マークに（「必須」バッジは非表示） */
  .lp3__req { background: none; padding: 0; color: var(--color-cta); font-size: 0; line-height: 1; }
  .lp3__req::before { content: "*"; font-size: 15px; font-weight: 800; }
  /* 記入欄の縦幅を縮小（パディングを詰める） */
  .lp3__field input,
  .lp3__field textarea { padding: 9px 12px; }
  /* プレースホルダーのフォントサイズを少し下げる（長いメール例なども収まりやすく） */
  .lp3__field input::placeholder,
  .lp3__field textarea::placeholder { font-size: 13px; }
  /* ご相談内容は約2/3の高さに */
  .lp3__field textarea { min-height: 60px; height: 60px; }
}

/* FV：フォームを左カラム（コピー＋PCモック）の下端までそろえる。
   縦を詰める画面ではフォームだけ先に終わってカード下に余白が残るため、
   カードを行の高さいっぱいに伸ばし、余った分は「ご相談内容」欄に吸わせる。
   1カラムになる 960px 以下は縦積みなので対象外。 */
@media (min-width: 961px) {
  .lp3__form { align-self: stretch; display: flex; flex-direction: column; }
  .lp3__fields { flex: 1; }
  /* 「ご相談内容」は高さ100px固定。項目名は欄の上端にそろえる */
  .lp3__field:last-of-type .lp3__label { align-self: start; }
  .lp3__field:last-of-type textarea { height: 100px; min-height: 100px; }
}

/* ==========================================================================
   FV：縦の狭い画面（ノートPC）でも1画面に収める
   ノートPCの表示領域は 640〜900px 程度しかなく、既定のままだと FV（コピー＋
   PCモック＋フォーム）が画面からあふれてスクロールしないと全体が見えない。
   ブレークポイントで段階的に切り替えると境界で見た目が跳ねるため、余白と文字を
   画面の高さに対して連続的に補間する（100vh が 640px で最小、960px 以上は既定値）。
   式はすべて clamp(最小値, 最小値 + (100vh - 640px) × 係数, 既定値) の形で、
   係数 = (既定値 - 最小値) ÷ 320。値を触るときは係数も計算し直すこと。
   SP は縦積みでそもそも事情が違うため、2カラム表示（961px以上）だけを対象にする。
   ========================================================================== */
@media (min-width: 961px) {
  .lp3 {
    padding-block:
      clamp(6px, calc(6px + (100vh - 640px) * .15625), 56px)
      clamp(10px, calc(10px + (100vh - 640px) * .20625), 76px);
  }
  .lp3__pill {
    font-size: clamp(16px, calc(16px + (100vh - 640px) * .025), 24px);
    margin-bottom: clamp(3px, calc(3px + (100vh - 640px) * .021875), 10px);
  }
  /* 見出しは横幅由来の既定サイズと高さ由来の上限の、小さいほうを採る */
  .lp3__title {
    font-size: min(
      clamp(25px, 3.3vw, 43px),
      clamp(24px, calc(24px + (100vh - 640px) * .059375), 43px)
    );
  }
  /* 左カラムを行の高さ（＝フォームカードの高さ）まで伸ばし、余った縦は
     コピーとPCモックの間に入れる。結果、PCモックの下端がフォームの下端にそろう */
  .lp3__copy { display: flex; flex-direction: column; align-self: stretch; }
  .lp3__lead { margin-bottom: auto; }
  .lp3__visual {
    /* コピーとの最小間隔。上の margin-bottom:auto と足し合わさる */
    margin-top: clamp(8px, calc(8px + (100vh - 640px) * .1125), 44px);
    /* 縦に余裕がある画面ではカラム幅いっぱいまで大きく、足りない画面では縮める。
       ％と px は混ぜると「幅の78%＋◯px」になって補間にならないので、px で組んでから
       min(100%, …) でカラム幅を超えないよう抑える */
    /* flex アイテムなので、幅は明示しないと内容幅（＝中身が絶対配置ばかりでゼロ）になる */
    width: 100%;
    max-width: min(100%, calc(510px + (100vh - 640px) * .6));
    margin-inline: auto;
  }
  .lp3__form { padding: clamp(12px, calc(12px + (100vh - 640px) * .0625), 32px); }
  .lp3__form-head { margin-bottom: clamp(8px, calc(8px + (100vh - 640px) * .03125), 18px); }
  .lp3__fields { gap: clamp(4px, calc(4px + (100vh - 640px) * .028125), 13px); }
  .lp3__field input,
  .lp3__field textarea { padding-block: clamp(5px, calc(5px + (100vh - 640px) * .021875), 12px); }
  .lp3__submit { padding-block: clamp(9px, calc(9px + (100vh - 640px) * .025), 17px); }
}

/* ==========================================================================
   フォントサイズの下限ルール（このページ共通）
   文章として読ませるテキストは PC 16px ／ SP 14px を下回らせない。
   見出し・ボタンは本文と並んだときに沈まないよう、ひとまわり上を下限にする。
   番号（01）・バッジ（必須／60分無料相談）・矢印・実績まわりの数値装飾は
   文章ではないので対象外＝従来のサイズのまま。
   FVフォームの項目名・同意文・注記（.lp3__label / __agree / __note）も対象外。
   これらを16pxにすると行数が増えてフォームが80px近く伸び、FVが1画面に
   収まらなくなるため（入力欄と送信ボタンの文字は16pxにしている）。
   ファイル末尾に置き、上にある個別指定へ後勝ちで効かせている。
   ========================================================================== */

/* --- 本文：SP 14px --- */
.svc-step__text,
.svc-faq__a,
.svc-faq__link,
.cns-step__text,
.svc-type__meta dt,
.svc-type__meta dd,
.cns-price__note { font-size: 14px; }

/* --- 見出し・ボタン・入力欄：SP 15px --- */
.svc-step__title { font-size: 15px; }
.cns-step__cta,
.lp3__submit,
.lp3__field input,
.lp3__field textarea { font-size: 15px; }

@media (min-width: 961px) {
  /* --- 本文：PC 16px --- */
  .svc-step__text,
.svc-faq__a,
.svc-faq__link,
.cns-step__text,
.svc-type__meta dt,
.svc-type__meta dd,
.cns-price__note { font-size: 16px; }

  /* --- 見出し・ボタン・入力欄：PC 17px／16px --- */
  .svc-step__title { font-size: 17px; }
  .cns-step__cta,
.lp3__submit,
.lp3__field input,
.lp3__field textarea { font-size: 16px; }
}