@charset "utf-8";
/* =========================================================
   TOP の SP（767px 以下）。1rem = 100 design-px（SP基準 430）
   新デザイン（2026-10）は Figma に SP 版が無いため、PC の構成と前回の SP（sp.css）の流儀から推論して組んでいる
   ========================================================= */

/* ---------- ABOUT〜主導権 ---------- */
.tab { height: auto; gap: .80rem; padding: .80rem 0 1.10rem; }
.tab__band { width: 4.3rem; height: 8.6rem; }
.tab__intro { width: 3.70rem; height: auto; padding-left: 0; gap: .30rem; }
.tab__ttl { gap: 0; font-size: .32rem; line-height: .50rem; letter-spacing: .0224rem; }
.tab__txt { gap: .26rem; font-size: .15rem; line-height: .30rem; letter-spacing: .015rem; white-space: normal; }
.tab__txt br { display: none; }

.two { width: 3.70rem; height: auto; gap: .30rem; }
.two__ttl { height: auto; font-size: .22rem; line-height: .38rem; letter-spacing: .0154rem; white-space: normal; }
.two__ttl em::before { left: 0; right: 0; top: calc(50% - .1325rem); height: .30rem; } /* 文字が塗りの上下中央 */
.two__row { flex-direction: column; gap: .06rem; }
.two__card, .two__card--auto, .two__card--or { width: 3.70rem; height: auto; padding: calc(.22rem + .02785rem) calc(.24rem + .02785rem); }
.two__h { height: auto; }
.two__list li, .two__list li.s { width: auto; }
.two__op { font-size: .30rem; line-height: .44rem; }

.tmovie { width: 3.70rem; height: auto; flex-direction: column; gap: .24rem; padding: .32rem .20rem; border-radius: .18rem; }
.tmovie__thumb { width: 3.30rem; height: 1.86rem; }
.tmovie__body { align-items: center; gap: .14rem; }
.tmovie__ttl { font-size: .24rem; line-height: .38rem; letter-spacing: .0168rem; text-align: center; }
.tmovie__txt { font-size: .14rem; line-height: .26rem; letter-spacing: .014rem; white-space: normal; text-align: center; }
.tmovie__txt br { display: none; }
.tmovie__body .btn { margin-top: .12rem; }

.tfirst { width: 3.70rem; height: auto; gap: .26rem; padding: calc(.32rem + .04rem) calc(.22rem + .04rem); box-shadow: inset 0 0 0 .04rem #fd6a05; border-radius: .30rem; }
.tfirst__txt { gap: .12rem; white-space: normal; }
.tfirst__txt h2 { height: auto; font-size: .20rem; line-height: .32rem; letter-spacing: .014rem; }
.tfirst__txt p { font-size: .14rem; line-height: .26rem; letter-spacing: .014rem; }
.tfirst__txt br:not(.sp) { display: none; }
.tfirst__btns { flex-direction: column; align-items: center; gap: .16rem; }
.btn--auto { padding-left: .24rem; padding-right: .24rem; }
.tfirst__btns .btn--auto > span { letter-spacing: .01rem; } /* 「資料を受け取る（導入前ガイド）」を1行に収める */
.btn--line { height: auto; box-shadow: inset 0 0 0 .03rem #fd6a05, 0 .115rem .15333rem rgba(0,0,0,.08); }

.trouble { width: 4.3rem; height: auto; gap: .36rem; padding: .80rem .30rem .90rem; }
.trouble__warn { left: calc(50% - .80rem); top: .30rem; width: 1.60rem; height: 1.60rem; }
.trouble__ttl { font-size: .26rem; line-height: .46rem; letter-spacing: .0182rem; }
.trouble__row { flex-direction: column; gap: .24rem; }
.tbox, .tbox--a { width: 3.70rem; height: auto; box-shadow: inset 0 0 0 .04rem #fff; border-radius: .16rem; }
.tbox__h { height: .58rem; padding-top: .04rem; font-size: .20rem; line-height: .54rem; }
.tbox__list { gap: .14rem; padding: .24rem .22rem .26rem; }
.tbox__list li { width: auto; padding-left: .28rem; font-size: .14rem; line-height: .25rem; letter-spacing: .014rem; }
.tbox__list li::before { top: .045rem; width: .16rem; height: .16rem; }
.trouble__msg { font-size: .18rem; line-height: .32rem; letter-spacing: .018rem; white-space: normal; text-align: center; }
.trouble__down { left: calc(50% - .055rem); top: auto; bottom: -.62rem; width: .11rem; height: 1.10rem; }

.cause { width: 3.70rem; height: auto; padding-top: .30rem; gap: .40rem; }
.cause__ttl { font-size: .24rem; line-height: .42rem; letter-spacing: .0168rem; }

.tab .shift { width: 3.70rem; height: auto; margin: 0; }
.tab .shift__ttl { font-size: .24rem; line-height: .41rem; }
.tab .shift__lead { height: auto; }
.tab .shift__lead br { display: none; }

.thow { width: 3.70rem; height: auto; font-size: .20rem; line-height: .36rem; white-space: normal; }
.thow > span { display: inline-block; }
.tab__dome { width: 4.3rem; height: .31817rem; }

/* ---------- 担当者を育成 ---------- */
.grow { height: auto; gap: .40rem; padding: .70rem .30rem .80rem; }
.grow__head { width: 3.70rem; gap: .16rem; }
.grow__ttl { font-size: .26rem; line-height: .42rem; letter-spacing: .0182rem; }
.grow__lead { width: auto; font-size: .15rem; line-height: .26rem; letter-spacing: .015rem; }
.grow__list { gap: .16rem; }
.grow__list li { width: 3.70rem; gap: .10rem; padding: .20rem .20rem .22rem; }
.grow__list h3 { align-items: flex-start; gap: .14rem; font-size: .18rem; line-height: .30rem; letter-spacing: .0126rem; white-space: normal; }
.grow__list b { width: .36rem; height: .36rem; padding: 0; margin-top: -.03rem; font-size: .20rem; line-height: .30rem; }
.grow__list p { width: auto; padding-left: 0; font-size: .14rem; line-height: .26rem; letter-spacing: .014rem; }

/* ---------- 営業と開発の分断 ---------- */
.split { height: auto; gap: .44rem; padding: 0 .30rem .80rem; overflow: hidden; }
.split__dome { width: 4.3rem; height: .31817rem; margin-left: -.30rem; margin-right: -.30rem; }
.split__head { width: 3.70rem; gap: .18rem; }
.split__ttl { padding-top: 0; font-size: .22rem; line-height: .40rem; letter-spacing: .0154rem; white-space: normal; }
.split__ttl > span { height: auto; padding-top: 0; line-height: .40rem; }
.split__ttl em::before { top: calc(50% - .17rem); height: .34rem; left: -.02rem; right: 0; }
.split__lead { width: auto; font-size: .15rem; line-height: .26rem; letter-spacing: .015rem; }
.stbl-wrap { display: flex; flex-direction: column; align-items: center; gap: .14rem; width: 3.70rem; }
.stbl-wrap .hscroll { width: 3.70rem; }
.split .stbl { margin-top: 0; zoom: .5; }
.split__msg { white-space: normal; gap: .10rem; }
.split > .split__msg { margin-top: 0; }
.split__msg .l { font-size: .20rem; line-height: .34rem; letter-spacing: .014rem; }
.split__msg .s { font-size: .14rem; line-height: .26rem; letter-spacing: .014rem; }

/* ---------- 3つのサービス ---------- */
.tsvc { height: auto; gap: .40rem; padding: .80rem .30rem; }
.tsvc__deco { width: 1.47rem; height: 2.98rem; }
.tsvc__head { width: 3.70rem; gap: .16rem; }
.tsvc__ttl > span, .tsvc__ttl > span:first-child { height: auto; padding: 0; font-size: .22rem; line-height: .36rem; }
.tsvc__ttl .p { letter-spacing: 0; }
.tsvc__ttl .l { font-size: .27rem; line-height: .50rem; }
.tsvc__ttl em { font-size: .44rem; }
.tsvc__lead { width: auto; font-size: .15rem; line-height: .26rem; letter-spacing: .015rem; }
.tsvc__cards { flex-direction: column; align-items: center; gap: .36rem; }
.tsvc__note { width: 3.70rem; font-size: .14rem; line-height: .26rem; letter-spacing: .014rem; white-space: normal; }
.tsvc__note br { display: none; }
.tsvc__note br + br { display: block; content: ""; margin-top: .10rem; }

/* ---------- 数字で知る ---------- */
.tdata { height: auto; gap: .60rem; padding: .80rem .30rem; }
.tdata__bg img { left: -194.97%; width: 536.87%; height: 120%; }
.tdata__main { width: 3.70rem; gap: .40rem; }
.tdata .thead, .thead { width: 3.70rem; gap: .16rem; }
.thead__ttl, .tdata .thead__ttl { padding-top: 0; font-size: .30rem; line-height: .46rem; letter-spacing: .021rem; }
.thead__lead { width: auto; font-size: .14rem; line-height: .26rem; letter-spacing: .014rem; }
.thead__lead br { display: none; }
.thead__lead--b { white-space: normal; font-size: .15rem; letter-spacing: .015rem; }
.tdata .dcard { box-shadow: none; }
.tdata__awards { flex-direction: column; gap: .12rem; }
.tdata__awards img { width: 3.70rem; height: auto; }

/* ---------- 支援実績 ---------- */
.tcase { height: auto; gap: .40rem; padding: .80rem .30rem; }
.ncards { gap: .30rem; }
.ncards__row { flex-direction: column; gap: .30rem; }
.ncard { width: 3.70rem; }
.ncard__img { width: 3.70rem; height: 2.08rem; }
.ncard__ttl { font-size: .18rem; line-height: .29rem; }
.ncard__meta { font-size: .14rem; line-height: .28rem; }
.ncard__co, .ncard__date { min-height: .28rem; height: auto; }
.tcase > .btn { margin-top: .10rem; }

/* ---------- メディア ---------- */
.tmedia { height: auto; padding: .80rem 0; }
.tmedia__main { width: 3.70rem; gap: .40rem; }
.tmedia .mblk__cards { flex-direction: column; gap: .21rem; }
.ncards--white .ncard { width: 3.70rem; }
.ncards--white .ncard__img { width: 3.20rem; height: 1.80rem; }
/* 「初めての方へ」の箱：ボタンは中身の幅で小さめに */
.tfirst:not(.tfirst--consult) > .btn { align-self: center; gap: .20rem; padding: .13rem .28rem; font-size: .145rem; line-height: .21rem; }
.tfirst:not(.tfirst--consult) > .btn > span { width: auto; }
.tfirst:not(.tfirst--consult) > .btn .btn__arw { width: .40rem; }
/* 支援実績：SP は横に送るカルーセル（カード 3.0rem・次のカードを少し見せる・1枚ずつ吸着） */
.hscroll--cards { width: calc(100% + .60rem); margin: 0 -.30rem; padding: 0 .30rem; scroll-snap-type: x mandatory; scroll-padding: 0 .30rem; }
.hscroll--cards .ncards { flex-direction: row; gap: .16rem; padding-right: .30rem; }
.hscroll--cards .ncards__row { display: contents; }
.hscroll--cards .ncard { flex: none; width: 3.00rem; scroll-snap-align: start; }
.hscroll--cards .ncard__img { width: 3.00rem; height: 1.69rem; }
.hscroll--cards + .hscroll__bar { align-self: center; }
.ncard__ttl { text-align: left; } /* SP は両端揃えだと語間が空くため左揃え */
/* サービスカードのサービス名（SP）：2行になっても行間が開きすぎないように */
.scard__name { display: block; height: auto; margin-top: .12rem; font-size: .24rem; line-height: .34rem; letter-spacing: .015rem; white-space: normal; }
.scard--s .scard__name { font-size: .22rem; line-height: .32rem; }