@charset "utf-8";
/* =========================================================
   kintone × AI SP（767px 以下 / 337:22663）1rem = 430分の100
   PC と同じ DOM を組み替える。図版の一部は PC の縮小（zoom）
   ========================================================= */

/* 見出し（SP 共通の Frame 318：左揃え） */
.khead { align-items: flex-start; gap: .18rem; width: 3.70rem; text-align: left; }
.khead__label { height: .26rem; font-family: Montserrat, "Noto Sans JP", sans-serif; font-weight: 700; font-size: .20rem; line-height: .26rem; letter-spacing: .026rem; }
.khead__ttl { font-size: .28rem; line-height: .44rem; letter-spacing: .0196rem; }
.khead__lead, .khead--l .khead__lead { width: 3.70rem; margin-top: .19rem; font-size: .16rem; line-height: .39rem; letter-spacing: .024rem; white-space: normal; }
.khead--l { gap: .18rem; }

/* HERO (337:23626) */
.chero { height: 8.44rem; margin-top: 0; }
.chero__bg { inset: auto; left: .0039rem; top: .688rem; width: 4.2966rem; height: 7.933rem; }
.chero__bg img { object-fit: fill; }
.chero::after { background: linear-gradient(to bottom, rgba(53,46,46,0) 71%, #352e2e); }
.chero__txt { top: 3.31rem; gap: .18rem; }
.chero__sub { font-size: .20rem; line-height: .37rem; letter-spacing: .028rem; }
.chero__ttl, .khero__ttl { padding-left: .027734rem; font-size: .3962rem; line-height: .63rem; letter-spacing: .027734rem; }
.khero__ttl .tk { letter-spacing: -.064rem; }
.khero__ttl .kuten { letter-spacing: -.088rem; }
.khero__ttl em { left: .045rem; top: 0; }
.chero__scroll { left: calc(50% - .005rem); top: 7.06rem; color: #fff; }
.chero__scroll i { background: #fff; }

/* kintone × AI (337:22680) */
.kx { padding: 1.00rem 0; }
.kx__ghost { top: .49rem; height: .69735rem; padding-left: .026596rem; font-size: .66491rem; line-height: 1.5872rem; letter-spacing: .026596rem; color: rgba(255,255,255,.6); mix-blend-mode: overlay; }
.kx__main { width: 3.70rem; gap: .63rem; }
.kx__head { align-self: stretch; align-items: flex-start; gap: .18rem; text-align: left; }
.kx__label { height: .26rem; padding-left: 0; font-family: Montserrat, "Noto Sans JP", sans-serif; font-weight: 700; font-size: .20rem; line-height: .26rem; letter-spacing: .026rem; }
.kx__ttl { top: 0; height: 1.86rem; padding-left: 0; font-size: .42rem; line-height: .63rem; letter-spacing: .0203rem; }
.kx__ttl .l1 { font-size: .23rem; }
.kx__lead { gap: .27rem; }
.kx__lead h3 { font-size: .36rem; line-height: .61rem; letter-spacing: .0252rem; }
.kx__lead p { width: 3.70rem; font-size: .16rem; line-height: .39rem; letter-spacing: .024rem; text-align: left; white-space: normal; }
.kx__down { margin: .32rem 0 .63rem; }
.dg { zoom: .46141; } /* PC の図の ×0.46141 */

/* STAGE CHECK (337:23784) */
.stage { margin-top: 1.00rem; padding: .59rem 0; gap: .63rem; }
.stage .khead__ttl { font-size: .34rem; line-height: .53rem; letter-spacing: .0238rem; }
.stage .khead__lead { width: 3.70rem; }
.stage__body { gap: .12rem; }
.stage__row, .stage__row--2 { display: contents; }
.scard, .scard:first-child { width: 3.50rem; padding: .19rem .16264rem; white-space: nowrap; }
.stage__row--2 .scard { padding: .23rem .16264rem; }
.sarw { width: .45033rem; height: .255rem; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.stage__msg { align-items: center; margin-top: .18rem; }
.stage__tail { width: .18821rem; height: .3245rem; margin-bottom: -.01298rem; object-fit: cover; object-position: right; }
.stage__pill { padding: .23418rem .48709rem; border-radius: .93671rem; font-size: .14468rem; line-height: .30503rem; letter-spacing: .010127rem; }
.stage__pill strong { font-size: .28556rem; line-height: .30503rem; }

/* Excel vs DB (337:24017)：PC の図の ×0.60259 を横スクロール */
.kvs { width: 3.70rem; margin-top: 1.00rem; gap: .27rem; }
.kvs__ttl { height: 1.53rem; padding-left: 0; font-size: .31rem; line-height: .51rem; letter-spacing: .0217rem; }
.hscroll--kvs { height: 4.68rem; }
.hscroll--kvs .kvs__fig { zoom: .60259; }
.kvs .hscroll__bar { align-self: center; margin: calc(.295rem - .27rem) 0 0; }

/* SYSTEMIZATION GAP (337:25147) */
.gap { padding: 1.138rem .30rem .023rem; gap: .43rem; }
.gap__bg { inset: auto; left: -8.3837rem; top: 0; width: 23.0854rem; height: 44.577rem; object-fit: fill; }
.gap__dome { height: .31817rem; }
.gap__ghost { top: .758rem; height: .52111rem; font-size: .6731rem; line-height: 1.60675rem; letter-spacing: .026924rem; color: #f5b369; }
.gap__main { gap: .43rem; }
.gap__body { align-items: center; gap: .21rem; }
.gap__cards { display: grid; grid-template-columns: repeat(2, 1.76453rem); gap: .16559rem .17093rem; filter: drop-shadow(0 .11104rem .14805rem rgba(0,0,0,.08)); }
.gap__row { display: contents; }
.gcard { width: 1.76453rem; justify-content: center; gap: .05437rem; padding: .12851rem .20759rem; border-radius: .04943rem; }
.gcard__t { width: 1.34441rem; height: auto; font-size: .15817rem; line-height: .22736rem; letter-spacing: .011072rem; }
.gcard__d { width: 1.52729rem; height: auto; font-size: .12rem; line-height: .18rem; letter-spacing: .018rem; }
.gcard__n { left: -.0989rem; top: -.1335rem; width: .3707rem; height: .3707rem; font-size: .19766rem; line-height: .15303rem; letter-spacing: .021743rem; text-indent: 0; padding-bottom: .017rem; }
.gap__goal { flex-direction: column; align-items: center; gap: .21rem; width: auto; }
.gap__goal > .gap__arrow { width: .08789rem; height: .80569rem; }
.gap__goal-t { font-size: .19315rem; line-height: .36rem; letter-spacing: .01352rem; text-align: center; }
.gap__goal-t .g2 { display: block; margin-top: .04rem; font-size: .2533rem; line-height: .40297rem; letter-spacing: .017731rem; }
.gap__goal-t .hl { left: -.03rem; top: .97rem; width: 1.41rem; height: .19rem; }
.use { flex: none; width: 5.28rem; padding: .68rem .79rem; }
.use .khead { align-items: center; text-align: center; }
.use .khead__ttl { font-size: .31rem; line-height: .49rem; letter-spacing: .0217rem; }
.use__list { flex-direction: column; align-items: flex-start; }

/* MCP SERVER (337:25412) */
.srv { padding: 1.30rem .62rem 1.00rem; gap: 1.00rem; }
.srv__corner { top: -.0021rem; width: 1.51rem; height: 3.07154rem; }
.srv__ghost { left: 1.04rem; top: .4942rem; width: auto; height: .60731rem; mix-blend-mode: normal; font-size: .78444rem; line-height: 1.87254rem; letter-spacing: .031378rem; color: #554a4a; }
.srv__main { gap: 1.00rem; }
.srv .khead__label { width: auto; }
.mcpf { flex-direction: column; gap: .25rem; }
.farw { display: flex; align-items: center; justify-content: center; height: .29723rem; }
.farw img { transform: rotate(90deg); }
.srv__demo.lcd { width: 12.33rem; zoom: .300081; } /* Figma SP は PC のデモ画面の縮小（370/1233） */

/* MOVIE / LIVE DEMO (337:25551) */
.off { padding: 1.00rem .62rem; gap: .82rem; }
.off__ghost { left: .46rem; top: .50rem; width: auto; height: .61318rem; font-size: .79203rem; line-height: 1.89065rem; letter-spacing: .031681rem; }
.off__movie { width: 3.70rem; gap: .30rem; }
.off__movie .khead__ttl { font-size: .42rem; line-height: .67rem; letter-spacing: .0294rem; }
.mv { flex-direction: column; gap: .23rem; padding: .25rem .17rem; border: .02rem solid #e7e7e7; border-radius: .20rem; filter: drop-shadow(0 .12rem .16rem rgba(0,0,0,.08)); }
.mv__thumb { width: 3.00rem; height: 1.69259rem; border-radius: .04486rem; }
.mv__txt { align-items: center; gap: .26rem; }
.mv__ttl { font-size: .28878rem; line-height: .46rem; letter-spacing: .020215rem; text-align: center; }
.mv__p { width: 3.00rem; margin-top: calc(.10rem - .26rem); font-size: .16rem; line-height: .27rem; letter-spacing: .024rem; white-space: normal; }
.off__demo { width: 3.70rem; gap: .53rem; }
.off__imgs.ldemo { width: 10.02rem; zoom: .369261; } /* 370/1002 */

/* DIAGNOSIS (337:26725) */
.diag { padding: 1.00rem .62rem; gap: .33rem; }
.diag__bg { inset: auto; left: -8.3837rem; top: 0; width: 23.0854rem; height: 14.6609rem; object-fit: fill; }
.diag .khead { align-items: center; gap: .11rem; text-align: center; }
.diag .khead__label.diag__label { padding: 0 .20038rem; font-family: "Noto Sans JP", sans-serif; font-size: .2605rem; line-height: .40077rem; letter-spacing: .03647rem; }
.diag .khead__ttl { font-size: .39626rem; line-height: .62635rem; letter-spacing: .027738rem; }
.diag .khead__lead { margin-top: calc(.08rem - .11rem); text-align: left; }
.diag__img { flex: none; width: 5.28rem; height: 2.96rem; }

/* CASE + SERVICE (337:22952) */
.kcase { gap: 0; padding: 1.00rem 0; }
.kcase__ghost { left: 1.86rem; top: .7273rem; width: auto; height: .69735rem; font-size: .90074rem; line-height: 2.15015rem; letter-spacing: .03603rem; }
.kcase__main { width: 3.70rem; gap: .30rem; }
.kcase .khead__ttl { font-size: .42rem; line-height: .64rem; letter-spacing: .0294rem; }
.kcase__list { gap: .30rem; }
.kcase__tags { flex-wrap: wrap; gap: .12rem; }
.kcase__tags a { padding: calc(.03648rem + .01459rem) calc(.19702rem + .01459rem - .010865rem) calc(.03648rem + .01459rem) calc(.19702rem + .01459rem); box-shadow: inset 0 0 0 .01459rem #9f9f9f; border-radius: .24387rem; font-size: .15521rem; line-height: .24954rem; letter-spacing: .010865rem; }
.kcase__rows { gap: .21rem; }
.kcase > .btn { margin-top: .87rem; }
.kcase > .svc { margin-top: .82rem; }

/* PROCESS (337:26849)：フェーズは PC の ×0.85294 */
.kproc { padding: .80rem 0; gap: .54rem; }
.kproc__phases { flex-direction: column; gap: .37rem; }
.phase { zoom: .85294; }
.kproc__shift { display: none; }

/* CONSULT FORM (337:26971) */
.kform { padding: .61rem 0; }
.kform__panel { width: 3.75774rem; flex-direction: column; gap: .39rem; padding: .41rem .12887rem; border-radius: .0789rem; }
.kform__panel::after { left: calc(50% - .115rem); top: calc(50% - .3122rem); width: 7.25983rem; height: 9.18rem; }
.kform__txt { align-items: flex-start; }
.kform__ttl { font-size: .28rem; line-height: .40rem; letter-spacing: .0196rem; }
.kform__p { width: 3.45rem; margin-top: .16rem; font-size: .12rem; line-height: .20rem; letter-spacing: .018rem; white-space: normal; }
.kform__stats { align-self: center; margin-top: .22rem; gap: .27762rem; }
.kform__stats li { gap: .1026rem; }
.kform__stats li + li::before { left: calc(-.27762rem / 2); height: .55523rem; }
.kform__stats .b { width: .57938rem; height: .57938rem; font-size: .09318rem; line-height: .13733rem; letter-spacing: .009318rem; }
.kform__stats .n { gap: .01811rem; font-size: .18943rem; line-height: .27919rem; letter-spacing: .01326rem; }
.kform__stats .n b { height: .31728rem; font-size: .40982rem; line-height: .97829rem; letter-spacing: .012295rem; }
.kform__form { width: 3.50rem; padding: 0; }
.kform__lb { align-self: center; width: 3.44793rem; padding-bottom: calc(.06rem + .03102rem); background-size: 100% .03102rem; font-size: .18rem; line-height: .18914rem; letter-spacing: .0126rem; }
.kform__lb .en { font-size: .06832rem; line-height: .1699rem; letter-spacing: .004783rem; }
.kform__ta { height: 1.01594rem; margin-top: .16198rem; }
.kform__hint { margin-top: .33rem; font-size: .12rem; line-height: .2263rem; letter-spacing: .018rem; }
.kform__chips { margin-top: .12rem; grid-template-columns: auto; grid-auto-flow: row; grid-template-rows: none; zoom: 1.3138; }
.kform__btn {
  --k: .71278 !important; margin-top: .32rem;
  gap: calc(.04rem * var(--k)); padding: calc(.24rem * var(--k)) calc(.51rem * var(--k)); border-radius: .77rem;
  font-size: calc(.18rem * var(--k)); line-height: calc(.26869rem * var(--k)); letter-spacing: calc(.027rem * var(--k));
}
.kform__btn > span { width: calc(2.57rem * var(--k)); }
.kform__btn .btn__arw { width: calc(.923048rem * var(--k)); height: calc(.0826171rem * var(--k)); margin: calc(-.005747rem * var(--k)) calc(-.023048rem * var(--k)) calc(-.00687rem * var(--k)) 0; }
.khead[style] { width: 3.70rem !important; } /* PC 用のインライン幅を打ち消す */
.kproc .khead { align-items: center; text-align: center; }
.kproc .khead__ttl { font-size: .39rem; line-height: .61rem; letter-spacing: .0273rem; }
.kx__ttl em { color: #fff; } /* SP は白 */
.kx__ttl { line-height: .65rem; }
.kx__ttl .l1 { display: block; line-height: .63rem; }
.kx__ttl .l1 + br { display: none; }
.kx__ttl .l1 { margin-bottom: -.07rem; } /* カンプ実測 */
.scard, .scard:first-child { padding-bottom: calc(.19rem + .012rem); } /* テキスト枠の整数切り上げぶん */
.stage__row--2 .scard { padding-bottom: calc(.23rem + .012rem); }
.stage__pill { padding-bottom: calc(.23418rem - .0615rem); } /* 最終行だけ行高 24.354 */
.kcase .acard { box-shadow: inset 0 0 0 var(--bw) #e7e7e7; } /* SP カンプは TOP と同じ淡い枠 */
.kcase__rows { align-self: center; }