@charset "utf-8";
/* =========================================================
   サービス系 4 ページ共通（service / service-dev / service-edu / service-course）
   Figma 613:20748 / 613:21867 / 613:23209 / 613:24497
   1rem = 100 design-px。クラス接頭辞 svp-
   ========================================================= */
.svp { position: relative; }
.svp ~ .cta { padding: .70rem 0; } /* Frame 637：上下 70 */

/* ---------- ヒーロー（Frame 744 の中身違い） ---------- */
.svp-hero .lhero__ttl { font-size: .88377rem; line-height: 1.22rem; letter-spacing: .061864rem; white-space: nowrap; }
.svp-hero__tg { display: flex; flex-direction: column; align-items: center; gap: .06rem; }
.svp-hero__sub { font-weight: 700; font-size: .41828rem; line-height: .64351rem; letter-spacing: .058559rem; white-space: nowrap; }
.svp-hero .lhero__lead { line-height: .39rem; }
.svp-hero .fv__scroll { top: 7.39rem; }
.svp-hero__foot { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.svp-stats { display: flex; align-items: center; gap: .36rem; }
.svp-stats > li { display: flex; flex-direction: column; align-items: center; gap: .04195rem; text-align: center; white-space: nowrap; }
.svp-stats > i { flex: none; width: 0; height: 1.11rem; box-shadow: 0 0 0 .01rem #352e2e; }
.svp-stats b { font-weight: 700; font-size: .19438rem; line-height: .26846rem; letter-spacing: .029157rem; }
.svp-stats b small { display: block; font-size: .15244rem; }
.svp-stats strong { font-weight: 900; font-size: .34614rem; line-height: .49386rem; letter-spacing: .05192rem; color: #fd6a05; }
.svp-stats strong .t { font-size: inherit; line-height: inherit; letter-spacing: -.0515rem; } /* 下の .svp-stats span（注記の小さい字）に巻き込まれないように */
.svp-stats span { font-size: .15101rem; line-height: .21546rem; letter-spacing: .022652rem; }
.svp-hero__btns { display: flex; align-items: center; gap: .49rem; }
.svp-btn-line {
  display: flex; align-items: center; justify-content: center; width: 2.64rem; padding: calc(.2294rem + .03rem) .48747rem;
  background: #fff; box-shadow: inset 0 0 0 .03rem #fd6a05; border-radius: .77rem; filter: drop-shadow(0 .12rem .16rem rgba(0,0,0,.08));
  color: #fd6a05; font-weight: 700; font-size: .172rem; line-height: .24547rem; letter-spacing: .0258rem; white-space: nowrap;
}

/* ---------- 共通の見出し ---------- */
.svp-h2 { position: relative; display: flex; flex-direction: column; align-items: center; gap: .29rem; text-align: center; }
.svp-h2__t { position: relative; font-weight: 700; font-size: .43424rem; line-height: .71rem; letter-spacing: .030397rem; white-space: nowrap; }
.svp-h2__l { position: relative; font-size: .17603rem; line-height: .39117rem; letter-spacing: .026404rem; white-space: nowrap; }
.svp-ghost {
  position: absolute; left: calc(50% - .005rem); top: -.83rem; height: 1.37rem; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1.76616rem; line-height: 4.21599rem; letter-spacing: .070646rem; white-space: nowrap;
}
.svp-bh2 { width: 11rem; display: flex; align-items: stretch; gap: .19rem; }
.svp-bh2::before { content: ""; flex: none; width: .10rem; background: #f1a36e; }
.svp-bh2 > h2 { font-weight: 700; font-size: .38rem; line-height: .64rem; letter-spacing: .0266rem; white-space: nowrap; }
.svp .bh--dark { color: #352e2e; }

/* ---------- 暗い地の本文ブロック（Frame 247） ---------- */
.svp-dark { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.48rem; padding: 1.00rem 0 1.30rem; background: #352e2e; overflow-x: clip; }
.svp-dark > .svp-ghost { top: -.83rem; left: calc(50% + .01rem); height: 4.21599rem; color: #554a4a; }

/* 〜とは（Frame 1321321346） */
.svp-about { position: relative; display: flex; flex-direction: column; align-items: center; gap: .70rem; }
.svp-about__t { display: flex; align-items: center; height: .64rem; font-weight: 700; font-size: .70398rem; line-height: 1.03755rem; letter-spacing: .049279rem; white-space: nowrap; }
.svp-about__t { position: relative; top: -.02rem; padding-left: .049279rem; } /* 行末の字間ぶんの中央ずれと縦位置をカンプに合わせる */
.svp-about__l { font-size: .17603rem; line-height: .39rem; letter-spacing: .026404rem; text-align: center; white-space: nowrap; }
.svp-kv { border-collapse: separate; border-spacing: 0; font-weight: 700; font-size: .16rem; line-height: .35542rem; letter-spacing: .0112rem; }
.svp-kv th, .svp-kv td { height: .60rem; padding: 0 .29rem; box-shadow: inset 0 0 0 .01rem #fff; text-align: left; vertical-align: middle; white-space: nowrap; }
.svp-kv th { width: calc(1.57rem + .58rem); background: #4b4344; }
.svp-kv td { width: calc(var(--tw, 5.77rem) + .58rem); }

/* こんな会社に向いています（Frame 555） */
.svp-fit { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .54rem; padding: 1.00rem 0; background: #4b4344; }
.svp-fit__t { font-weight: 700; font-size: .43424rem; line-height: .64rem; letter-spacing: .030397rem; white-space: nowrap; }
.svp-fit__row { display: flex; align-items: flex-start; gap: .37rem; }
.svp-fit__box { width: 5.332731rem; display: flex; flex-direction: column; padding: .06rem; background: #4d3529; box-shadow: inset 0 0 0 .06rem #fd6a05; border-radius: .20rem; overflow: hidden; }
.svp-fit__box h3 { display: flex; align-items: center; justify-content: center; height: .74rem; background: #fd6a05; font-weight: 700; font-size: .27rem; line-height: .74rem; letter-spacing: .0189rem; white-space: nowrap; }
.svp-fit__box ul { display: flex; flex-direction: column; gap: .22rem; padding: .36rem .33rem; }
.svp-fit__box li { display: flex; align-items: flex-start; gap: .16637rem; font-weight: 500; font-size: .16rem; line-height: .29rem; letter-spacing: .024rem; }
.svp-fit__box li::before { content: ""; flex: none; width: .16637rem; height: .2118rem; margin-top: .04rem; background: url(../img/svcpage/check-or.svg) no-repeat center / 111.9% 100%; }
.svp-fit__box li > span { flex: none; width: calc(4.22rem + .03rem); } /* 行末の字間ぶん（Figma は行末の字間を幅に数えない） */
.svp-fit__box--no { width: 5.272731rem; padding: .03rem; background: #352e2e; box-shadow: inset 0 0 0 .03rem #fff; }
.svp-fit__box--no h3 { background: #fff; color: #352e2e; }
.svp-fit__box--no ul { flex: 1; justify-content: center; gap: .35rem; } /* Figma：右の箱は項目間 35 */
.svp-fit__box--no li::before { background-image: url(../img/top/check-gray.svg); }
.svp-fit__box a { font-weight: 700; color: #fd6a05; text-decoration: underline; text-decoration-thickness: 9.5%; }

/* 伴走開発と伴走教育の仕組み（Frame 1321321381） */
.svp-mech { display: flex; flex-direction: column; align-items: center; gap: .72rem; }
.svp-mech__top { display: flex; flex-direction: column; align-items: center; gap: .49rem; }
.svp-mech__h { display: flex; flex-direction: column; align-items: center; gap: .29rem; text-align: center; }
.svp-mech__h h2 { font-weight: 700; font-size: .43424rem; line-height: .71rem; letter-spacing: .030397rem; white-space: nowrap; }
.svp-mech__h p { font-size: .17603rem; line-height: .39117rem; letter-spacing: .026404rem; white-space: nowrap; }
.svp-mech__cards { display: flex; align-items: flex-end; justify-content: center; gap: .49rem; }
.svp-mech__col { width: 5.50224rem; display: flex; flex-direction: column; align-items: center; gap: .38rem; }
.svp-here { display: flex; align-items: flex-end; gap: .12234rem; height: .45rem; color: #fbff1d; font-weight: 900; font-size: .27869rem; line-height: .44043rem; letter-spacing: .019509rem; white-space: nowrap; }
.svp-here::before, .svp-here::after { content: ""; flex: none; width: .29362rem; height: .34255rem; background: url(../img/svcpage/slash.svg) no-repeat center / 100% 100%; }
.svp-here::after { transform: scaleX(-1); }
.svp-mc { width: 5.50224rem; height: 10.1181rem; display: flex; flex-direction: column; background: #fff; box-shadow: inset 0 0 0 .04rem var(--mc, #fd6a05); border-radius: .20rem; overflow: hidden; color: #352e2e; }
.svp-mc--gray { --mc: #9f9f9f; width: 5.51rem; }
.svp-mc__head { flex: none; display: flex; flex-direction: column; align-items: center; gap: .20rem; margin: .04rem .04rem 0; padding: .29rem 0; background: var(--mc, #fd6a05); border-radius: .16rem .16rem 0 0; }
.svp-mc__tag { padding: 0 .085rem .04rem .11432rem; background: #feedcf; color: #fd6a05; font-weight: 700; font-size: .23945rem; line-height: .37677rem; /* 文字を塗りの上下中央に */ letter-spacing: .016761rem; white-space: nowrap; }
.svp-mc__name { display: flex; align-items: center; height: .44585rem; color: #fff; font-weight: 900; font-size: .42569rem; line-height: .76493rem; letter-spacing: .029798rem; white-space: nowrap; }
.svp-mc__body { display: flex; flex-direction: column; align-items: center; gap: .33rem; padding: .45rem .42rem; }
.svp-rel { display: flex; align-items: center; gap: .20858rem; }
.svp-rel__who { flex: none; width: 1.22539rem; height: .94729rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: .11298rem .17381rem; background: #9f9f9f; border-radius: .17381rem; color: #fff; text-align: center; white-space: nowrap; }
.svp-rel__who--p { width: 1.22763rem; justify-content: center; background: #fd6a05; }
.svp-rel__who b { margin-bottom: -.05214rem; font-weight: 700; font-size: .19371rem; line-height: .34809rem; letter-spacing: .01356rem; }
.svp-rel__who small, .svp-rel__mid p { font-size: .12167rem; line-height: .20858rem; letter-spacing: .008517rem; }
.svp-rel__mid { width: 1.712068rem; display: flex; flex-direction: column; align-items: center; gap: .15643rem; text-align: center; white-space: nowrap; }
.svp-rel__mid i { display: block; width: 1.712068rem; height: 0; position: relative; }
.svp-rel__mid i::before { content: ""; position: absolute; left: -.0087rem; right: -.0087rem; top: -.064rem; height: .128rem; background: url(../img/svcpage/dbl-arrow.svg) no-repeat center / 100% 100%; }
.svp-env { width: 4.2211572rem; display: flex; flex-direction: column; align-items: center; gap: .05009rem; padding: calc(.17531rem + .03757rem) calc(.28801rem + .03757rem); background: #ffead7; border-radius: .2254rem; position: relative; }
.svp-env::before { content: ""; position: absolute; inset: 0; border: .03757rem dashed #fd6a05; border-radius: .2254rem; }
.svp-env > p { height: .34rem; display: flex; align-items: center; font-size: .20036rem; line-height: .3381rem; letter-spacing: .014025rem; white-space: nowrap; }
.svp-env > div { display: flex; flex-direction: column; align-items: center; gap: .10018rem; }
.svp-env b { display: flex; align-items: center; height: .51rem; font-weight: 700; font-size: .27912rem; line-height: .50156rem; letter-spacing: .019538rem; white-space: nowrap; }
.svp-env em { display: flex; align-items: center; padding: .07168rem .34407rem; background: #fd6a05; border-radius: .28672rem; color: #fff; font-weight: 700; font-size: .25209rem; line-height: .40rem; letter-spacing: .017646rem; white-space: nowrap; }
.svp-env em.d { background: #352e2e; }
.svp-roles { width: 4.15rem; display: flex; flex-direction: column; gap: .44rem; }
.svp-roles > div { display: flex; flex-direction: column; gap: .12rem; }
.svp-roles p { display: flex; align-items: flex-start; gap: .18rem; font-size: .16rem; line-height: .27rem; letter-spacing: .0112rem; }
.svp-roles p.c { align-items: center; }
.svp-roles i { flex: none; width: 1.01rem; height: .31211rem; display: flex; align-items: center; justify-content: center; background: #352e2e; border-radius: .16423rem; color: #fff; font-style: normal; font-weight: 700; font-size: .14439rem; line-height: .22862rem; letter-spacing: .010107rem; white-space: nowrap; }
.svp-roles i.o { width: 1.00415rem; background: #fd6a05; }
.svp-roles span { width: 2.96rem; }
.svp-mc__note { width: 4.59rem; font-size: .16rem; line-height: .27rem; letter-spacing: .0112rem; }
.svp-path { display: flex; align-items: center; gap: .31rem; }
.svp-path li { width: 2.25rem; height: 1.6158rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08rem; padding: .23rem .24rem; background: #ffead7; border-radius: .24rem; color: #fd6a05; text-align: center; white-space: nowrap; }
.svp-path li:nth-child(3) { background: #ffb97a; color: #352e2e; }
.svp-path li:nth-child(5) { background: #fd6a05; color: #fff; }
.svp-path b { display: flex; align-items: center; height: .44585rem; font-weight: 900; font-size: .32rem; line-height: .76493rem; letter-spacing: .0224rem; }
.svp-path span { font-weight: 700; font-size: .1851rem; line-height: .31235rem; letter-spacing: .012957rem; }
.svp-path .ar { width: .35rem; height: 0; padding: 0; background: none; position: relative; }
.svp-path .ar::before { content: ""; position: absolute; left: 0; right: -.015rem; top: -.1105rem; height: .221rem; background: url(../img/svcpage/arrow-r.svg) no-repeat center / 100% 100%; }

/* 比較表（列で組む：Figma の行高が列ごとに違う箇所があるため） */
.svp-cmp { display: flex; flex-direction: column; align-items: center; gap: .70rem; }
.svp-cmp__wrap { display: flex; flex-direction: column; align-items: center; gap: .24rem; }
.svp-ct { display: flex; align-items: flex-start; color: #352e2e; }
.svp-ct__col { display: flex; flex-direction: column; position: relative; }
.svp-ct__col > * {
  height: .74rem; display: flex; align-items: center; padding: .11rem .29rem; background: #fff; box-shadow: inset 0 0 0 .01rem #352e2e;
  font-size: .16rem; line-height: .25rem; letter-spacing: .0112rem;
}
.svp-ct__col > * > span { width: var(--w); }
.svp-ct__col > :first-child { height: .60rem; justify-content: center; background: #9f9f9f; color: #fff; font-weight: 700; line-height: .35542rem; text-align: center; }
.svp-ct__col > .s { height: .49rem; }
.svp-ct__col--lab > * { background: #e7e7e7; font-weight: 700; line-height: .35542rem; }
.svp-ct__col--lab > :first-child.blank { background: #352e2e; }
.svp-ct__col--our > * { background: #ffead7; box-shadow: inset 0 0 0 .01rem #fd6a05; }
.svp-ct__col--our > :first-child { background: #fd6a05; }
.svp-ct__col--our::after { content: ""; position: absolute; inset: -.0039rem 0 0; box-shadow: inset 0 0 0 .06rem #fd6a05; pointer-events: none; }
.svp-cmp__note { width: 11rem; font-size: .17603rem; line-height: .39117rem; letter-spacing: .026404rem; }
.svp-cmp__note a { font-weight: 700; color: #f1a36e; text-decoration: underline; text-decoration-thickness: from-font; }

/* ---------- 明るい地（Frame 246：グラデ地＋上の丸み） ---------- */
.svp-peach { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.00rem; padding: 3.00rem 0 1.00rem; overflow: hidden; color: #352e2e; }
.svp-peach__bg { position: absolute; left: -23.74%; top: -5.44%; width: 147.42%; height: 187.39%; max-width: none; pointer-events: none; }
.svp-peach__dome { position: absolute; left: 0; top: -2px; width: 100%; height: calc(1.70rem + 2px); pointer-events: none; } /* 上の面と 2px 重ねてすき間を防ぐ */
.svp-peach > :not(.svp-peach__bg):not(.svp-peach__dome) { position: relative; }
.svp-peach .svp-ghost { color: #ffb075; }

/* 支援内容（Frame 887 ×4） */
.svp-sup { display: flex; flex-direction: column; align-items: center; gap: .49rem; }
.svp-sup__list { width: 11.56rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .49rem; }
.svp-sup__list > li { display: flex; flex-direction: column; gap: .23rem; padding: .33rem .30rem; background: #fff; border-radius: .20rem; filter: drop-shadow(0 .12rem .16rem rgba(0,0,0,.08)); }
.svp-sup__list h3 { display: flex; align-items: center; height: .34rem; padding-bottom: 0; color: #fd6a05; font-weight: 700; font-size: .28rem; line-height: .45rem; letter-spacing: .0196rem; white-space: nowrap; }
.svp-sup__list i { display: block; height: 0; box-shadow: 0 0 0 .01rem #fd6a05; }
.svp-sup__list p { width: calc(4.40rem + .0112rem); font-size: .16rem; line-height: .28rem; letter-spacing: .0112rem; }

/* 対応範囲（Frame 1321321367 ×8） */
.svp-scope { width: 11.40rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .215835rem .22565rem; }
.svp-scope > li { display: flex; flex-direction: column; gap: .13667rem; padding: .21183rem .164rem; background: #fff; border-radius: .1393rem; filter: drop-shadow(0 .082rem .10933rem rgba(0,0,0,.08)); }
.svp-scope h3 { width: 2.24664rem; display: flex; align-items: center; height: .17659rem; color: #fd6a05; font-weight: 700; font-size: .1717rem; line-height: .3075rem; letter-spacing: .012019rem; white-space: nowrap; }
.svp-scope h3.s { font-size: .1292rem; letter-spacing: .009044rem; }
.svp-scope i { display: block; height: 0; box-shadow: 0 0 0 .0068rem #fd6a05; }
.svp-scope p { width: 2.24186rem; min-height: .41rem; font-size: .1336rem; line-height: .20034rem; letter-spacing: .009352rem; }

/* 1ヶ月の進み方（Frame 1321321… の番号カード） */
.svp-cyc { display: flex; flex-direction: column; align-items: center; gap: .62rem; }
.svp-cyc__lbl { padding: 0 .22rem; background: #fff; color: #fd6a05; font-weight: 700; font-size: .2791rem; line-height: .62022rem; letter-spacing: .041865rem; white-space: nowrap; }
.svp-cyc__list { display: flex; align-items: center; gap: .26rem; }
.svp-cyc__list > li { position: relative; width: 2.51rem; display: flex; flex-direction: column; align-items: center; gap: .09rem; padding: .45rem 0 .28rem; background: #4b4344; border-radius: .20rem; color: #fff; text-align: center; }
.svp-cyc__list b { position: absolute; left: calc(50% - .275rem); top: -.3038rem; width: .55rem; height: .55rem; border-radius: 50%; background: #fd6a05; display: flex; align-items: center; justify-content: center; padding-left: .035rem; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .34347rem; line-height: .8199rem; letter-spacing: .037782rem; }
.svp-cyc__list h3 { height: .82rem; font-weight: 700; font-size: .28rem; line-height: .41rem; /* Figma 値は 33.345 だがカンプの行送りは 41 */ letter-spacing: .0196rem; white-space: nowrap; }
.svp-cyc__list p { width: 2.19rem; height: .51rem; font-size: .14rem; line-height: .23rem; letter-spacing: .021rem; }
.svp-cyc--w .svp-cyc__list > li { width: 2.87rem; }

/* ご相談から運用開始までの流れ（STEP カード） */
.svp-steps { display: flex; align-items: center; gap: .15rem; }
.svp-steps > li { position: relative; width: 1.76rem; height: var(--sh, 2.0115rem); display: flex; flex-direction: column; align-items: center; gap: .15669rem; padding: .25071rem .12742rem; background: #fff; border-radius: .20rem; filter: drop-shadow(0 .09402rem .12535rem rgba(0,0,0,.08)); color: #fd6a05; text-align: center; }
.svp-steps > li:nth-child(-n+2) { width: 1.75rem; }
.svp-steps > li:not(:last-child)::after { content: ""; position: absolute; right: calc(-.095rem - .0045rem); top: calc(50% - .16rem + .0004rem); width: .19rem; height: .32rem; background: url(../img/svcpage/tri-or.svg) no-repeat center / 100% 100%; }
.svp-steps__h { display: flex; flex-direction: column; align-items: center; gap: .10968rem; }
.svp-steps__h small { display: flex; align-items: center; height: .147rem; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .16066rem; line-height: .38351rem; letter-spacing: .017673rem; white-space: nowrap; }
.svp-steps__h b { font-weight: 700; font-size: .2266rem; line-height: .30rem; letter-spacing: .015862rem; white-space: nowrap; }
.svp-steps__h b.s { font-size: .2066rem; letter-spacing: .014462rem; }
.svp-steps__h b.xs { font-size: .1966rem; line-height: .29rem; letter-spacing: .013762rem; }
.svp-steps__h b.xxs { font-size: .1766rem; line-height: .26rem; letter-spacing: .012362rem; }
.svp-steps i { display: block; width: .36823rem; height: 0; margin: 0 auto; box-shadow: 0 0 0 .0235rem #fd6a05; }
.svp-steps p { width: 1.50425rem; color: #352e2e; font-size: .12rem; line-height: .21153rem; letter-spacing: .018rem; }
.svp-steps__h + i { margin-top: calc(.04701rem); }
.svp-dark .svp-steps__wrap { color: inherit; }

/* 料金表（first.html の .ptbl / .ptbl3 を流用。明るい地では見出し列が #4b4344・本文色） */
.svp .ptbl__lab li, .svp .ptbl3__lab li { background: #4b4344; }
.svp .pcol__body li, .svp .p3c, .svp .p3s { color: #4b4344; }
.svp-price { display: flex; flex-direction: column; align-items: flex-start; gap: .70rem; }
.svp-price__body { display: flex; flex-direction: column; align-items: flex-start; gap: .22rem; }
.svp-price__tbl { width: 11rem; display: flex; justify-content: center; }
.svp-price__note { font-size: .17603rem; line-height: .32rem; letter-spacing: .026404rem; white-space: nowrap; }

/* ---------- 導入事例＋よくある質問（Frame 828：白地） ---------- */
.svp-white { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.69rem; padding: 1.70rem 0 1.30rem; background: #fff; color: #352e2e; overflow-x: clip; }
.svp-white .svp-ghost { color: #ffead7; }
.svp-cases { display: flex; flex-direction: column; align-items: center; gap: .59rem; }
.svp-cases .ncards__row { width: 11.56rem; gap: .34rem; }
.svp-cases .ncard {
  width: 3.519798rem; gap: .16522rem; padding: calc(.27rem + .02754rem) calc(.16522rem + .02754rem) calc(.19rem + .02754rem);
  background: #ffead7; box-shadow: inset 0 0 0 .02754rem #f1a36e; border-radius: .16156rem; filter: drop-shadow(0 .09694rem .12925rem rgba(0,0,0,.08)); color: #352e2e;
}
.svp-cases .ncard__img { width: 3.13428rem; height: 1.76101rem; border-radius: .09639rem; }
.svp-cases .ncard__body { gap: .08261rem; }
.svp-cases .ncard__tags { gap: .11567rem; min-height: .33rem; }
.svp-cases .ncard__tags > span { padding: .03524rem .20259rem; border-radius: .25076rem; font-size: .14096rem; line-height: .25659rem; letter-spacing: .015506rem; }
.svp-cases .ncard__ttl { font-size: .19278rem; line-height: .30697rem; letter-spacing: .013494rem; }
.svp-cases .ncard__meta { margin-top: calc(.11rem - .08261rem); font-size: .15422rem; line-height: .30697rem; letter-spacing: .010796rem; }
.svp-cases .ncard__co { min-height: .31rem; margin-bottom: 0; }
.svp-cases .ncard__date { height: auto; }
.svp-cases > .btn { gap: .19rem; }
.svp-faq { display: flex; flex-direction: column; align-items: center; gap: .70rem; }
.svp-faq .faq__item { background: #ffead7; }
.svp-faq--w .faq__item { background: #fff; }

/* ---------- あわせて読みたい／他のサービスも見る（Frame 905 / 906） ---------- */
.svp-read { display: flex; flex-direction: column; align-items: center; gap: .70rem; padding: .70rem 0 .50rem; background: #352e2e; }
.svp-read .ncards__row { gap: .38rem; }
.svp-other { display: flex; flex-direction: column; align-items: center; gap: .70rem; padding: .50rem 0 .70rem; background: #352e2e; }
.svp-scards { display: flex; align-items: flex-start; justify-content: center; gap: .59rem; }
.svp-scard { min-height: 3.15rem; display: flex; flex-direction: column; align-items: flex-end; gap: .33rem; padding: calc(.28rem + .01rem) calc(.40rem + .01rem); background: #4b4344; box-shadow: inset 0 0 0 .01rem #fff; border-radius: .20rem; color: #fff; }
.svp-scard__in { display: flex; flex-direction: column; align-items: flex-start; gap: .28rem; }
.svp-scard__hd { display: flex; flex-direction: column; align-items: flex-start; gap: .24rem; }
.svp-scard__tag { padding: 0 .08594rem; background: #feedcf; color: #fd6a05; font-weight: 700; font-size: .18rem; line-height: .3133rem; letter-spacing: .0126rem; white-space: nowrap; }
.svp-scard__name { display: flex; align-items: center; height: .33516rem; font-weight: 700; font-size: .32rem; line-height: .57502rem; letter-spacing: .0224rem; white-space: nowrap; }
.svp-scard__in > i { display: block; align-self: stretch; height: 0; box-shadow: 0 0 0 .01rem #fff; }
.svp-scard__txt { width: 3.71rem; font-size: .16rem; line-height: .28rem; letter-spacing: .0112rem; }
.svp-scard__more { display: flex; align-items: flex-start; gap: .11164rem; font-weight: 700; font-size: .14774rem; line-height: .21425rem; letter-spacing: .022161rem; text-decoration: underline; text-decoration-thickness: from-font; white-space: nowrap; }
.svp-scard__more::after { content: ""; flex: none; width: .22327rem; height: .22327rem; background: url(../img/arrow-circle.svg) no-repeat center / 100% 100%; }
/* サービス・料金ページ（3枚・余白が小さい版） */
.svp-scards--3 { gap: .28rem; }
.svp-scards--3 .svp-scard { min-height: 3.31rem; padding-left: calc(.20rem + .01rem); padding-right: calc(.20rem + .01rem); }
.svp-scards--3 .svp-scard__in { gap: .23rem; }
.svp-scards--3 .svp-scard__hd { gap: .22rem; }
.svp-scards--3 .svp-scard__txt { width: 3.06rem; }

@media (hover: hover) {
  .svp-btn-line { transition: filter .3s; }
  .svp-btn-line:hover { filter: brightness(1.03) drop-shadow(0 .12rem .16rem rgba(0,0,0,.12)); } /* ボタンのホバー（animations.txt） */
}
/* 対応範囲の1枚目だけ Figma で一回り大きい（Frame 1321321367：229×18／17.503px） */
.svp-scope > li:first-child { gap: .1393rem; padding: .21592rem .16716rem; filter: drop-shadow(0 .08358rem .11144rem rgba(0,0,0,.08)); }
.svp-scope > li:first-child h3 { width: 2.29rem; height: .18rem; font-size: .17503rem; line-height: .31343rem; letter-spacing: .012252rem; }
.svp-scope > li:first-child i { box-shadow: 0 0 0 .007rem #fd6a05; }
.svp-scope > li:first-child p { width: 2.28512rem; font-size: .13613rem; line-height: .2042rem; letter-spacing: .009529rem; }
.svp-cases .ncard__meta { gap: .04rem; }
/* 料金表のセル文字：Figma の値（11.9 / 8.33 / 15.48 / 10.71px）よりカンプの字幅が約1.3倍広い（字面を実測）。価格・定価の行以外を拡大 */
.svp .pcol__body li { font-size: .1547rem; letter-spacing: .010829rem; }
.svp .pcol__body li.is-price, .svp .pcol__body li.is-list { font-size: .1543rem; letter-spacing: .007098rem; }
.svp .pcol__body li.is-sm { font-size: .10829rem; line-height: .15475rem; letter-spacing: .00758rem; }
.svp .pcol__body li.is-mk { padding-top: .04rem; font-size: .205rem; line-height: .205rem; letter-spacing: 0; font-weight: 700; color: #352e2e; -webkit-text-stroke: .012rem currentColor; }
.svp .pcol__body li.is-xs { font-size: .13923rem; letter-spacing: .009746rem; }
.svp .pcol__body .l2 { line-height: .20891rem; }
/* 事例カードの成果バッジ（伴走開発・伴走教育の Figma のみ。138×30・#fbff1d） */
.svp-cases .ncard__kpi { align-self: flex-start; display: flex; align-items: center; height: .30rem; margin-top: .05rem; padding: 0 .09rem 0 .10rem; background: #fbff1d; color: #352e2e; white-space: nowrap; }