@charset "utf-8";
/* =========================================================
   サービス系 4 ページ共通の SP（767px 以下・基準 430）
   Figma に SP 版は無いため、PC の構成から縦積みに推論
   ========================================================= */
.svp ~ .cta { padding: .50rem 0; }

/* ヒーロー：中身が多いので高さは中身なり */
.svp-hero { height: auto; padding: .56rem .30rem 1.10rem; }
.svp-hero .lhero__in { position: relative; left: auto; top: auto; transform: none; width: 100%; gap: .30rem; }
.svp-hero .lhero__ttl { font-size: .34rem; line-height: .48rem; letter-spacing: .0204rem; white-space: normal; }
.svp-hero .lhero__lead { line-height: .24rem; }
.svp-hero__sub { font-size: .17rem; line-height: .28rem; letter-spacing: .0102rem; white-space: normal; }
.svp-hero__foot { gap: .26rem; }
.svp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .16rem .10rem; width: 3.70rem; }
.svp-stats > i { display: none; }
.svp-stats > li { min-width: 0; padding: .10rem .04rem; background: rgba(255,255,255,.7); border-radius: .10rem; white-space: normal; }
.svp-stats b { font-size: .13rem; line-height: .20rem; letter-spacing: .01rem; }
.svp-stats b small { font-size: .11rem; }
.svp-stats strong { font-size: .21rem; line-height: .32rem; letter-spacing: .01rem; }
.svp-stats span { font-size: .11rem; line-height: .17rem; letter-spacing: .005rem; }
.svp-stats strong .t { font-size: inherit; line-height: inherit; letter-spacing: -.01rem; }
.svp-hero__btns { flex-direction: column; gap: .14rem; }
.svp-hero__btns .btn, .svp-btn-line { width: 3.30rem; padding-left: .16rem; padding-right: .16rem; }
.svp-hero__btns .btn > span { width: auto; white-space: nowrap; font-size: .16rem; letter-spacing: .016rem; }
.svp-hero .fv__scroll { top: auto; bottom: -.24rem; }
.svp-hero .fv__scroll i { height: .40rem; }

/* 見出し */
.svp-ghost { top: -.30rem; height: .62rem; font-size: .64rem; line-height: 1.5rem; letter-spacing: .02rem; }
.svp-h2 { gap: .14rem; }
.svp-h2__t { font-size: .24rem; line-height: .38rem; letter-spacing: .0168rem; white-space: normal; }
.svp-h2__l { font-size: .14rem; line-height: .26rem; white-space: normal; }
.svp-bh2 { width: 3.70rem; gap: .12rem; }
.svp-bh2::before { width: .07rem; }
.svp-bh2 > h2 { font-size: .24rem; line-height: .40rem; letter-spacing: .0168rem; }

/* 暗い地のブロック */
.svp-dark { gap: .80rem; padding: .70rem .30rem .80rem; }
.svp-dark > .svp-ghost { top: -.40rem; height: 1.5rem; }
.svp-about { width: 3.70rem; gap: .30rem; }
.svp-about__t { height: auto; font-size: .30rem; line-height: .42rem; letter-spacing: .021rem; white-space: normal; text-align: center; }
.svp-about__t { top: 0; padding-left: 0; }
.svp-about__l { font-size: .14rem; line-height: .26rem; letter-spacing: .014rem; text-align: left; white-space: normal; }
.svp-about__l br { display: none; }
.svp-kv { width: 3.70rem; font-size: .13rem; line-height: .22rem; letter-spacing: .008rem; }
.svp-kv th, .svp-kv td { height: auto; padding: .12rem .12rem; white-space: normal; }
.svp-kv th { width: 1.10rem; }
.svp-kv td { width: auto; }

.svp-fit { width: auto; margin: 0 -.30rem; align-self: stretch; gap: .30rem; padding: .60rem .30rem; }
.svp-fit__t { font-size: .24rem; line-height: .38rem; letter-spacing: .0168rem; }
.svp-fit__row { flex-direction: column; gap: .24rem; }
.svp-fit__box, .svp-fit__box--no { width: 3.70rem; height: auto !important; }
.svp-fit__box h3 { height: .56rem; font-size: .18rem; line-height: .56rem; letter-spacing: .0126rem; }
.svp-fit__box ul, .svp-fit__box--no ul { gap: .16rem !important; padding: .22rem .18rem; }
.svp-fit__box li { gap: .12rem; font-size: .14rem; line-height: .24rem; letter-spacing: .014rem; }
.svp-fit__box li::before { width: .14rem; height: .18rem; margin-top: .03rem; }
.svp-fit__box li > span { flex: 1 1 0; min-width: 0; width: auto; }

.svp-mech { width: 3.70rem; gap: .40rem; }
.svp-mech__top { gap: .36rem; }
.svp-mech__h { gap: .14rem; }
.svp-mech__h h2 { font-size: .24rem; line-height: .38rem; white-space: normal; }
.svp-mech__h p { font-size: .14rem; line-height: .26rem; letter-spacing: .014rem; white-space: normal; text-align: left; }
.svp-mech__h p br { display: none; }
.svp-mech__cards { flex-direction: column; align-items: center; gap: .36rem; }
.svp-mech__cards > .svp-mc { order: 2; }
.svp-mech__col { width: 3.70rem; gap: .14rem; }
.svp-here { height: .34rem; font-size: .20rem; line-height: .34rem; }
.svp-here::before, .svp-here::after { width: .22rem; height: .26rem; }
.svp-mc, .svp-mc--gray { width: 3.70rem; height: auto; }
.svp-mc__head { gap: .12rem; padding: .20rem 0; }
.svp-mc__tag { font-size: .16rem; line-height: .30rem; }
.svp-mc__name { height: auto; font-size: .28rem; line-height: .40rem; }
.svp-mc__body { gap: .22rem; padding: .26rem .16rem .30rem; }
.svp-rel, .svp-env { zoom: .74; }
.svp-roles { width: auto; gap: .20rem; }
.svp-roles > div { gap: .10rem; }
.svp-roles p { gap: .10rem; font-size: .13rem; line-height: .22rem; letter-spacing: .008rem; }
.svp-roles i, .svp-roles i.o { width: .80rem; height: .26rem; font-size: .12rem; }
.svp-roles span { width: auto; flex: 1; min-width: 0; }
.svp-mc__note { width: auto; font-size: .13rem; line-height: .22rem; }
.svp-path { flex-direction: column; gap: .06rem; }
.svp-path li { width: 2.60rem; height: auto; padding: .14rem .16rem; }
.svp-path b { height: auto; font-size: .24rem; line-height: .36rem; }
.svp-path span { font-size: .14rem; line-height: .22rem; }
.svp-path span br { display: none; }
.svp-path .ar { width: .22rem; height: .30rem; padding: 0; }
.svp-path .ar::before { left: calc(50% - .175rem); right: auto; top: calc(50% - .11rem); width: .35rem; height: .22rem; transform: rotate(90deg) scale(.7); }

.svp-cmp { width: 3.70rem; gap: .30rem; }
.svp-cmp__wrap { width: 3.70rem; align-items: stretch; gap: .16rem; }
.hscroll--ct { width: 3.70rem; }
.hscroll--ct .hscroll__in { zoom: .72; }
.svp-cmp .hscroll__bar { align-self: center; margin: .02rem 0; }
.svp-cmp__note { width: auto; font-size: .13rem; line-height: .24rem; letter-spacing: .01rem; }

/* 明るい地 */
.svp-peach { gap: .70rem; padding: 1.10rem .30rem .70rem; }
.svp-peach__dome { height: .50rem !important; }
.svp-sup { width: 3.70rem; gap: .30rem; }
.svp-sup__list { width: 3.70rem; flex-direction: column; flex-wrap: nowrap; gap: .16rem; }
.svp-sup__list > li { gap: .14rem; padding: .20rem .20rem; }
.svp-sup__list h3 { height: auto; font-size: .19rem; line-height: .30rem; white-space: normal; }
.svp-sup__list p { width: auto; font-size: .14rem; line-height: .24rem; }
.svp-scope { width: 3.70rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .12rem; }
.svp-scope > li, .svp-scope > li:first-child { min-width: 0; gap: .08rem; padding: .14rem .12rem; }
.svp-scope h3, .svp-scope h3.s, .svp-scope > li:first-child h3 { width: auto; height: auto; font-size: .135rem; line-height: .22rem; letter-spacing: .005rem; white-space: normal; }
.svp-scope p, .svp-scope > li:first-child p { width: auto; min-height: 0; font-size: .12rem; line-height: .19rem; letter-spacing: .005rem; }
.svp-cyc { width: 3.70rem; gap: .40rem; }
.svp-cyc__lbl { padding: .04rem .12rem; font-size: .15rem; line-height: .26rem; letter-spacing: .012rem; white-space: normal; text-align: center; }
.svp-cyc__list { width: 3.70rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: .40rem .14rem; } /* 4枚とも同じ大きさ */
.svp-cyc__list > li, .svp-cyc--w .svp-cyc__list > li { width: auto; height: auto !important; padding: .34rem .08rem .18rem; }
.svp-cyc__list b { left: calc(50% - .21rem); top: -.21rem; width: .42rem; height: .42rem; font-size: .24rem; }
.svp-cyc__list h3 { height: auto !important; font-size: .16rem; line-height: .24rem; letter-spacing: .008rem; white-space: normal; }
.svp-cyc__list p { width: auto; height: auto; min-height: 0; font-size: .12rem; line-height: .19rem; letter-spacing: .006rem; }
.svp-steps { width: 3.70rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .14rem; }
.svp-steps > li, .svp-steps > li:nth-child(-n+2) { width: auto; height: auto; min-width: 0; gap: .10rem; padding: .18rem .08rem; }
.svp-steps > li:not(:last-child)::after { display: none; }
.svp-steps__h { gap: .06rem; }
.svp-steps__h b, .svp-steps__h b.s, .svp-steps__h b.xs, .svp-steps__h b.xxs { font-size: .16rem; line-height: .24rem; letter-spacing: .008rem; }
.svp-steps p { width: auto; font-size: .12rem; line-height: .19rem; letter-spacing: .006rem; }
.svp-price { width: 3.70rem; gap: .30rem; }
.svp-price__body { width: 3.70rem; gap: .16rem; }
.svp-price__tbl { width: 3.70rem; justify-content: flex-start; }
.svp-price__body .hscroll__bar { align-self: center; }
.svp-price__note { font-size: .12rem; line-height: .22rem; letter-spacing: .008rem; white-space: normal; }

/* 白地：事例・FAQ */
.svp-white { gap: .90rem; padding: .80rem .30rem .80rem; }
.svp-cases { width: 3.70rem; gap: .36rem; }
.svp-cases .ncards__row { width: 3.70rem; flex-direction: column; gap: .24rem; }
.svp-cases .ncard { width: 3.70rem; }
.svp-cases .ncard__img { width: 100%; height: auto; aspect-ratio: 313.428 / 176.101; }
.svp-cases .ncard__ttl { font-size: .17rem; line-height: .28rem; }
.svp-cases .ncard__meta { font-size: .14rem; line-height: .26rem; }
.svp-cases > .btn > span, .svp-faq ~ .btn > span { white-space: normal; }
.svp-faq { width: 3.70rem; gap: .36rem; }

/* あわせて読みたい／他のサービス */
.svp-read { gap: .36rem; padding: .60rem .30rem .40rem; }
.svp-other { gap: .36rem; padding: .40rem .30rem .60rem; }
.svp-scards, .svp-scards--3 { width: 3.70rem; flex-direction: column; align-items: stretch; gap: .20rem; }
.svp-scard, .svp-scards--3 .svp-scard { min-height: 0; gap: .20rem; padding: .22rem .20rem; }
.svp-scard__in, .svp-scards--3 .svp-scard__in { gap: .16rem; }
.svp-scard__hd, .svp-scards--3 .svp-scard__hd { gap: .14rem; }
.svp-scard__tag { font-size: .15rem; line-height: .27rem; }
.svp-scard__name { height: auto; font-size: .26rem; line-height: .38rem; white-space: normal; }
.svp-scard__txt, .svp-scards--3 .svp-scard__txt { width: auto; font-size: .14rem; line-height: .24rem; }