@charset "utf-8";
/* =========================================================
   kintone × AI（kintone-ai.html / PC 247:6219）
   ヘッダー・HERO の土台（.chero）・SERVICE・記事カード・フッターは style.css / company.css と共通
   ========================================================= */

/* Figma は約物を詰めない（「。（」など）→ このページは詰め処理を切る */
main { text-spacing-trim: space-all; }

/* ---- HERO（.chero を company.css から流用するため最小限を再掲） ---- */
.chero { position: relative; height: 8.02rem; margin-top: var(--hdr-h); overflow: hidden; background: #efefef; font-family: "Noto Sans JP", sans-serif; }
.chero__bg { position: absolute; inset: 0; }
.chero__bg img { width: 100%; height: 100%; object-fit: cover; }
.chero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(53,46,46,0) 82%, rgba(53,46,46,.75)); pointer-events: none; }
.chero__txt { position: absolute; z-index: 1; left: 50%; top: 1.835rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .42rem; white-space: nowrap; }
.chero__sub { font-weight: 500; font-size: .29181rem; line-height: .44894rem; letter-spacing: .040854rem; }
.chero__ttl { position: relative; font-weight: 900; font-size: 1.04974rem; line-height: 1.47rem; letter-spacing: .073482rem; text-align: center; }
.chero__ttl em { color: #fd6a05; }
.khero__ttl { padding-left: .073482rem; } /* 行末字間ぶん（中央揃え） */
.khero__ttl .kuten { letter-spacing: -.0736rem; }
.khero__ttl em { position: relative; left: .16rem; top: -.03rem; } /* 末尾の「。」＋半角スペース込みで中央揃え（カンプ実測） */
.chero__scroll { z-index: 1; left: calc(50% + .005rem); top: 6.25rem; transform: translateX(-50%); }

/* ---- 見出し（ラベル＋h2＋リード） ---- */
.khead { position: relative; display: flex; flex-direction: column; align-items: center; gap: .13rem; text-align: center; font-family: "Noto Sans JP", sans-serif; }
.khead__label { display: flex; align-items: center; height: .28rem; font-weight: 500; font-size: .18rem; line-height: .27692rem; letter-spacing: .0252rem; color: #fd6a05; white-space: nowrap; }
.khead__ttl { font-weight: 700; font-size: .43424rem; line-height: .64rem; letter-spacing: .030397rem; white-space: nowrap; }
.khead__ttl em { color: #fd6a05; }
.khead__lead { margin-top: calc(.29rem - .13rem); font-weight: 400; font-size: .17603rem; line-height: .39117rem; letter-spacing: .026404rem; white-space: nowrap; }
.khead__lead b { font-weight: 700; color: #fd6a05; }
.khead--l { align-items: flex-start; gap: .24rem; text-align: left; }
.khead--l .khead__lead { margin-top: 0; font-size: .16rem; line-height: .34rem; letter-spacing: .024rem; }

/* ---------------------------------------------------------
   kintone × AI (247:6222)
   --------------------------------------------------------- */
.kx { position: relative; overflow: clip; display: flex; flex-direction: column; align-items: center; padding: 2.02rem 0 1.70rem; background: #352e2e; color: #fff; font-family: "Noto Sans JP", sans-serif; }
.kx__ghost { position: absolute; left: 0; right: 0; top: .05rem; height: 4.22rem; display: flex; align-items: center; justify-content: center; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1.76616rem; line-height: 4.21599rem; letter-spacing: .070646rem; color: #554a4a; white-space: nowrap; pointer-events: none; padding-left: .070646rem; }
/* 中央揃え＋字間：Chrome は行末の字間まで含めて中央に置く（Figma は含めない）→ 字間ぶん左に padding */
.kx__main { position: relative; width: 11.22rem; display: flex; flex-direction: column; align-items: center; gap: .53rem; }
.kx__head { display: flex; flex-direction: column; align-items: center; gap: .21075rem; text-align: center; white-space: nowrap; }
.kx__label { padding-left: .0364rem; height: .45rem; font-weight: 500; font-size: .26rem; line-height: .44894rem; letter-spacing: .0364rem; color: #fd6a05; }
.kx__ttl { position: relative; top: -.02rem; padding-left: .049279rem; height: 2.08rem; font-weight: 700; font-size: .70398rem; line-height: 1.03755rem; letter-spacing: .049279rem; }
.kx__ttl em { color: #fd6a05; }
.kx__body { display: flex; flex-direction: column; align-items: center; }
.kx__lead { display: flex; flex-direction: column; align-items: center; gap: .12rem; text-align: center; white-space: nowrap; }
.kx__lead h3 { font-weight: 700; font-size: .45256rem; line-height: .667rem; letter-spacing: .031679rem; }
.kx__lead p { font-weight: 400; font-size: .17603rem; line-height: .39rem; letter-spacing: .026404rem; }
.kx__down { width: .74rem; height: .30726rem; margin: .38rem 0 .74rem; background: #d9d9d9; clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* 5つの円（Frame 757） */
.dg { position: relative; width: 7.52046rem; height: 8.02138rem; }
.dg__cs { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.dg__row { display: flex; align-items: center; }
.dg__row--1 { gap: 3.01rem; }
.dg__row--2 { gap: .72rem; margin-top: .68rem; }
.dg__c {
  flex: none; width: 2.61046rem; height: 2.61046rem; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 .2348rem rgba(255,255,255,.69); /* Figma は外側ストローク（レイアウトに影響しない） */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08rem;
  padding: .62rem .12189rem .57897rem; color: #352e2e; text-align: center; white-space: nowrap;
}
.dg__c h3 { font-weight: 700; font-size: .3243rem; line-height: .35429rem; letter-spacing: .019458rem; color: #fd6a05; }
.dg__c p { font-weight: 400; font-size: .17714rem; line-height: .24357rem; letter-spacing: .026571rem; }
.dg__c--1 { margin-bottom: -.49rem; padding-top: .81rem; }
.dg__c--5 { padding-top: .72rem; }
.dg__center { position: absolute; left: calc(50% + .0055rem); top: calc(50% + .1412rem); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .05rem; font-weight: 700; font-size: .3558rem; line-height: .52439rem; letter-spacing: .024906rem; text-align: center; white-space: nowrap; }
.dg__center span { padding: .07192rem .28769rem; background: #fbff1d; color: #352e2e; font-weight: 900; font-size: .54843rem; line-height: .52439rem; letter-spacing: .03839rem; }

/* STAGE CHECK (259:1840) */
.stage { position: relative; width: 100%; margin-top: 1.48rem; display: flex; flex-direction: column; align-items: center; gap: .54rem; padding: 1.00rem 0; background: #5c5151; }
.stage .khead__lead { width: 4.79rem; white-space: normal; }
.stage__body { display: flex; flex-direction: column; align-items: center; gap: .30rem; }
.stage__row { display: flex; align-items: stretch; gap: .26rem; }
.stage__row--2 { align-self: flex-start; margin-top: .26rem; padding-left: 1.38rem; }
.stage__body > .stage__row:first-child { align-self: flex-start; }
.sarw { align-self: center; width: .255rem; height: .45033rem; background: #fd6a05; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.scard { display: flex; flex-direction: column; align-items: center; gap: .08457rem; padding: .23rem .16264rem; background: #fff; color: #352e2e; text-align: center; white-space: nowrap; }
.scard:first-child { width: 2.38528rem; }
.scard__n { display: flex; align-items: center; justify-content: center; width: .44239rem; height: .44239rem; border-radius: 50%; background: #fd6a05; color: #fff; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .27627rem; line-height: .25277rem; letter-spacing: .03039rem; text-indent: .03039rem; }
.scard__t { margin-top: calc(.1036rem - .08457rem); font-weight: 700; font-size: .22625rem; line-height: .33345rem; letter-spacing: .015837rem; }
.scard__d { margin-top: calc(-.01301rem - .08457rem); font-weight: 400; font-size: .12rem; line-height: .25448rem; letter-spacing: .018rem; }
.scard__g { padding: .06506rem .15614rem; background: linear-gradient(to bottom, #fd6a05, #fd8d05 80.288%); color: #fff; font-weight: 700; font-size: .17506rem; line-height: .25801rem; letter-spacing: .012254rem; }
.scard--on { border: .14rem solid #fd6a05; }
.stage__msg { display: flex; flex-direction: column; align-items: flex-start; }
.stage__tail { width: 2.64rem; height: .50rem; margin-bottom: -.02rem; }
.stage__pill { padding: .29197rem .56569rem; border-radius: .83029rem; background: linear-gradient(to right, #f3904f, #3b4371); color: #fff; font-weight: 700; font-size: .22292rem; line-height: .47rem; letter-spacing: .015604rem; text-align: center; white-space: nowrap; }
.stage__pill strong { font-weight: 900; font-size: .44rem; }
.stage__pill em { font-weight: 900; color: #fbff1d; }

/* Excel vs DB (259:2045) */
.kvs { width: 9.045rem; margin-top: 1.48rem; display: flex; flex-direction: column; align-items: center; gap: .49rem; }
.kvs__ttl { padding-left: .037856rem; height: 1.60rem; font-weight: 700; font-size: .54081rem; line-height: .79706rem; letter-spacing: .037856rem; text-align: center; white-space: nowrap; }
.kvs__fig { position: relative; width: 9.045rem; height: 7.52497rem; }
.kvs__note { position: absolute; display: flex; align-items: flex-end; gap: .10rem; font-weight: 700; font-size: .2278rem; line-height: .36rem; letter-spacing: .015946rem; color: #dedcdc; text-align: center; white-space: nowrap; }
.kvs__note img { width: .26278rem; height: .29952rem; margin: -.00977rem -.0114rem; }
.kvs__note img.flip { transform: scaleX(-1); }
.kvs__note--x { left: 2.77rem; top: .36rem; }
.kvs__note--db { left: 5.9825rem; top: 0; font-weight: 900; color: #fbff1d; }
.kvs__tbl { position: absolute; left: 0; top: 1.3671rem; width: 9.045rem; height: 6.15785rem; color: #352e2e; }
.kvs__hd { position: absolute; left: 2.4752rem; top: 0; display: flex; }
.kvs__h { width: 3.28491rem; height: 1.29286rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .02638rem; border: .01319rem solid #352e2e; border-radius: .26385rem .26385rem 0 0; background: #dedcdc; font-weight: 400; font-size: .17942rem; line-height: .27704rem; letter-spacing: .012559rem; white-space: nowrap; }
.kvs__h b { font-weight: 700; font-size: .36669rem; line-height: .52911rem; letter-spacing: .025668rem; }
.kvs__h--db { border: 0; background: #fd6a05; color: #fff; }
.kvs__h--db b { font-size: .36675rem; letter-spacing: .025672rem; }
.kvs__bd { position: absolute; left: 0; top: 1.2929rem; width: 5.76509rem; display: flex; flex-direction: column; gap: .02638rem; border: .01319rem solid #352e2e; }
.kvs__r { display: flex; align-items: stretch; }
.kvs__th { flex: none; width: 2.48017rem; display: flex; align-items: center; justify-content: center; padding: .08581rem; border-right: .01319rem solid #352e2e; border-bottom: .01319rem solid #352e2e; background: #dedcdc; font-weight: 700; font-size: .23851rem; line-height: .34415rem; letter-spacing: .016695rem; white-space: nowrap; }
.kvs__td { flex: none; height: 1.19119rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .14512rem; padding: .18469rem .01319rem .10554rem; border: .01319rem solid #352e2e; border-top: 0; background: #fff; font-weight: 400; font-size: .1989rem; line-height: .31662rem; letter-spacing: .013923rem; white-space: nowrap; width: 3.28491rem; } /* ヘッダーセルと同幅 */
.kvs__td img { width: .43065rem; height: .43065rem; }
.kvs__td--db { width: calc(9.0332rem - 5.76508rem); /* 右端をオレンジ枠の外径に揃える */ border-color: #fd6a05; background: #feedcf; color: #fd6a05; font-weight: 700; } /* MCP は 26.25px を返すがカンプの字幅は Excel 列と同じ 19.89px */
.kvs__frame { position: absolute; left: 5.7476rem; top: .0016rem; width: 3.28557rem; height: 6.15624rem; box-shadow: inset 0 0 0 .11873rem #fd6a05; border-radius: .26385rem .26385rem 0 0; pointer-events: none; }

/* ---------------------------------------------------------
   SYSTEMIZATION GAP (265:2908)
   --------------------------------------------------------- */
.gap { position: relative; overflow: clip; display: flex; flex-direction: column; align-items: center; gap: .58rem; padding: 2.17rem .62rem 1.00rem; color: #352e2e; font-family: "Noto Sans JP", sans-serif; }
.gap__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gap__dome { position: absolute; left: 0; top: 0; width: 100%; height: 1.0704rem; }
.gap__ghost { position: absolute; left: 0; right: 0; top: 1.80rem; height: 1.37rem; display: flex; align-items: center; justify-content: center; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1.76616rem; line-height: 4.21599rem; letter-spacing: .070646rem; color: #ffd3a2; white-space: nowrap; pointer-events: none; }
.gap__main { position: relative; display: flex; flex-direction: column; align-items: center; gap: .54rem; }
.gap__body { display: flex; flex-direction: column; align-items: flex-start; gap: .57rem; }
.gap__cards { display: flex; flex-direction: column; gap: .66623rem; }
.gap__row { display: flex; align-items: flex-start; gap: .4349rem; filter: drop-shadow(0 .11104rem .14805rem rgba(0,0,0,.08)); }
.gcard { position: relative; width: 3.3034rem; display: flex; flex-direction: column; align-items: center; gap: .10179rem; padding: .24058rem .38864rem; border-radius: .10rem; background: #fff; text-align: center; }
.gcard__t { width: 2.51688rem; height: .86rem; white-space: nowrap; /* Figma のテキスト枠は整数に切り上げ */ font-weight: 700; font-size: .2961rem; line-height: .42565rem; letter-spacing: .020727rem; color: #fd6a05; }
.gcard__d { width: 2.85924rem; height: .47rem; font-weight: 400; font-size: .1481rem; line-height: .23133rem; letter-spacing: .022215rem; white-space: nowrap; }
.gcard__n { position: absolute; left: -.1712rem; top: -.2312rem; width: .69399rem; height: .69399rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fd6a05; color: #fff; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .37rem; line-height: .28649rem; letter-spacing: .0407rem; }
.gcard__n { text-indent: calc(.0407rem - .042rem); padding-bottom: .032rem; }
.gap__goal { display: flex; align-items: flex-start; justify-content: center; gap: .22365rem; width: 10.02124rem; }
.gap__goal > img { width: .72256rem; height: .53332rem; }
.gap__goal-t { position: relative; font-weight: 700; font-size: .31842rem; line-height: .46929rem; letter-spacing: .022289rem; white-space: nowrap; }
.gap__goal-t .hl { position: absolute; left: 4.7813rem; top: .7642rem; width: 1.70rem; height: .19rem; background: #fbff1d; }
.gap__goal-t > span { position: relative; }
.use { position: relative; display: flex; flex-direction: column; align-items: center; gap: .54rem; padding: .47rem .79rem; border-radius: .20rem; background: rgba(255,255,255,.66); }
.use__list { display: flex; align-items: center; gap: .46rem; }
.ucard { display: flex; flex-direction: column; align-items: center; gap: .18rem; padding: .18rem .23rem .25rem; border-radius: .20rem; background: #fff; text-align: center; white-space: nowrap; }
.ucard img { height: 1.70rem; }
.ucard__t { font-weight: 700; font-size: .26rem; line-height: .37rem; letter-spacing: .0182rem; color: #fd6a05; }
.ucard__d { margin-top: calc(.10rem - .18rem); font-weight: 400; font-size: .16rem; line-height: .25rem; letter-spacing: .024rem; }

/* ---------------------------------------------------------
   MCP SERVER (266:2750)
   --------------------------------------------------------- */
.srv { position: relative; overflow: clip; display: flex; flex-direction: column; align-items: center; gap: .90rem; padding: 1.00rem 0; background: #352e2e; color: #fff; font-family: "Noto Sans JP", sans-serif; }
.srv__corner { position: absolute; left: 0; top: .0042rem; width: 2.93rem; height: 5.96rem; }
.srv__ghost { position: absolute; left: .35rem; top: .5642rem; width: 7.74rem; height: 1.37rem; display: flex; align-items: center; justify-content: center; mix-blend-mode: overlay; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1.76616rem; line-height: 4.21599rem; letter-spacing: .070646rem; color: rgba(255,255,255,.6); white-space: nowrap; pointer-events: none; }
.srv__main { position: relative; display: flex; flex-direction: column; align-items: center; gap: .63rem; }
.srv .khead__label { width: 3.33rem; }
.mcpf { display: flex; align-items: center; gap: .25rem; }
.fbox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .16rem; padding: .28rem .16264rem; border: .02rem solid #fff; border-radius: .20rem; background: #4b4344; text-align: center; white-space: nowrap; }
.fbox__tag { padding: .06506rem .15614rem; border-radius: .05rem; background: linear-gradient(to bottom, #fd6a05, #fd8d05 80.288%); font-weight: 700; font-size: .17506rem; line-height: .25801rem; letter-spacing: .012254rem; }
.fbox__t { width: 1.68rem; font-weight: 700; font-size: .22625rem; line-height: .33345rem; letter-spacing: .015837rem; }
.fbox__d { margin-top: calc(.08rem - .16rem); font-weight: 400; font-size: .12rem; line-height: .18rem; letter-spacing: .018rem; }
.farw img { width: .31929rem; height: .16241rem; margin: 0 -.011rem; }
.srv__demo { width: 12.33rem; display: flex; flex-direction: column; }
.srv__demo img { width: 100%; height: auto; }

/* ---------------------------------------------------------
   MOVIE / LIVE DEMO (271:5792)
   --------------------------------------------------------- */
.off { position: relative; overflow: clip; display: flex; flex-direction: column; align-items: center; gap: .71rem; padding: 1.00rem .62rem; background: #fff; color: #352e2e; font-family: "Noto Sans JP", sans-serif; }
.off__ghost, .kcase__ghost { position: absolute; top: .5588rem; height: 1.37rem; display: flex; align-items: center; justify-content: center; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1.76616rem; line-height: 4.21599rem; letter-spacing: .070646rem; color: #ffead7; white-space: nowrap; pointer-events: none; }
.off__ghost { left: 5.45rem; width: 9.10rem; }
.off__movie { position: relative; width: 11rem; display: flex; flex-direction: column; align-items: center; gap: .26rem; }
.off__movie > .khead { align-self: stretch; }
.mv { display: flex; align-items: center; gap: .79rem; border-radius: .20rem; background: #fff; }
.mv__thumb { display: block; width: 5.86rem; height: 3.30618rem; border-radius: .08763rem; overflow: hidden; }
.mv__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mv__txt { display: flex; flex-direction: column; align-items: flex-start; gap: .40rem; }
.mv__ttl { font-weight: 700; font-size: .43424rem; line-height: .64rem; letter-spacing: .030397rem; white-space: nowrap; }
.mv__p { margin-top: calc(.18rem - .40rem); font-weight: 400; font-size: .16rem; line-height: .34rem; letter-spacing: .024rem; white-space: nowrap; }
.off__demo { position: relative; width: 11rem; display: flex; flex-direction: column; align-items: center; gap: .52rem; }
.off__imgs { width: 10.02rem; display: flex; flex-direction: column; }
.off__imgs img { width: 100%; height: auto; }

/* ---------------------------------------------------------
   DIAGNOSIS (271:5850)
   --------------------------------------------------------- */
.diag { position: relative; overflow: clip; display: flex; flex-direction: column; align-items: center; gap: .58rem; padding: 1.00rem .62rem; color: #352e2e; font-family: "Noto Sans JP", sans-serif; }
.diag__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.diag .khead__label.diag__label { height: auto; padding: 0 .24rem; background: #fff; font-weight: 700; font-size: .312rem; line-height: .48rem; letter-spacing: .04368rem; }
.diag__img { position: relative; width: 9.33rem; height: 5.23rem; }
.diag > .btn { position: relative; }

/* ---------------------------------------------------------
   CASE + SERVICE (271:5955)
   --------------------------------------------------------- */
.kcase { position: relative; overflow: clip; display: flex; flex-direction: column; align-items: center; gap: .71rem; padding: 1.00rem 0; background: #fff; color: #352e2e; font-family: "Noto Sans JP", sans-serif; }
.kcase__ghost { left: 9.72rem; width: 5.14rem; }
.kcase__main { position: relative; width: 11.42rem; display: flex; flex-direction: column; align-items: center; gap: .70rem; }
.kcase__list { display: flex; flex-direction: column; align-items: flex-start; gap: .40rem; }
.kcase__tags { display: flex; gap: .21292rem; }
.kcase__tags a { display: flex; align-items: center; padding: calc(.04258rem + .01703rem) calc(.22995rem + .01703rem); box-shadow: inset 0 0 0 .01703rem #9f9f9f; /* 小数 px の border は Chrome で切り捨て */ border-radius: .28463rem; background: #fff; font-weight: 500; font-size: .18116rem; line-height: .29125rem; letter-spacing: .012681rem; white-space: nowrap; }
.kcase__rows { display: flex; flex-direction: column; gap: .48841rem; }
.kcase > .btn { flex: none; }

/* ---------------------------------------------------------
   PROCESS (271:6585)
   --------------------------------------------------------- */
.kproc { display: flex; flex-direction: column; align-items: center; gap: .63rem; padding: 1.00rem 0; background: #352e2e; color: #fff; font-family: "Noto Sans JP", sans-serif; }
.kproc__body { display: flex; flex-direction: column; align-items: center; gap: .59rem; }
.kproc__phases { display: flex; align-items: flex-start; }
.phase__h { display: flex; justify-content: space-between; align-items: flex-start; width: 4.08rem; padding: calc(.12331rem + .01762rem) calc(.18496rem + .01762rem); box-shadow: inset 0 0 0 .01762rem #fff; font-weight: 700; font-size: .19927rem; line-height: .29369rem; letter-spacing: .013949rem; white-space: nowrap; }
.phase__h .en { font-family: Montserrat, sans-serif; font-size: .16808rem; letter-spacing: .011765rem; color: #fd6a05; }
.phase--3 .phase__h { background: rgba(253,106,5,.32); }
.phase__cards { display: flex; }
.pcard { width: 2.04rem; display: flex; flex-direction: column; align-items: flex-start; padding: .28rem .18rem .20rem; box-shadow: inset 0 0 0 .02rem #fff; background: #4b4344; } /* Figma の線はレイアウト寸法に含まれない → inset の影で描く */
.phase--3 .pcard:last-child { background: linear-gradient(to bottom, #fd6a05, #fd8d05 80.288%); }
.pcard__n { display: flex; align-items: center; height: .36366rem; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .46972rem; line-height: 1.12128rem; letter-spacing: .05167rem; color: #aaa; }
.phase--3 .pcard:last-child .pcard__n { color: #ffdfc9; }
.pcard__t { margin-top: .33rem; font-weight: 700; font-size: .22625rem; line-height: .33345rem; letter-spacing: .015837rem; white-space: nowrap; }
.pcard__d { width: 1.68rem; margin-top: .06rem; font-weight: 400; font-size: .12rem; line-height: .18rem; letter-spacing: .018rem; }
.pcard__p { margin-top: .20rem; padding: .04rem .16rem; box-shadow: inset 0 0 0 .01rem #fff; border-radius: .30rem; font-size: .12rem; line-height: .18rem; letter-spacing: .018rem; white-space: nowrap; }
.kproc__shift { position: relative; width: 10.85rem; height: .64rem; }
.kproc__shift img { position: absolute; left: 0; top: calc(.3176rem - .1105rem); width: 10.865rem; height: .22092rem; }
.kproc__shift span { position: absolute; left: 2.71rem; top: 0; padding: 0 .26rem; background: #352e2e; font-weight: 700; font-size: .3542rem; line-height: .64rem; letter-spacing: .060214rem; white-space: nowrap; }

/* ---------------------------------------------------------
   CONSULT FORM (274:2639)
   --------------------------------------------------------- */
.kform { display: flex; flex-direction: column; align-items: center; padding: .70rem 0; background: #352e2e; color: #fff; font-family: "Noto Sans JP", sans-serif; }
.kform__panel { position: relative; overflow: hidden; width: 11.9494rem; display: flex; align-items: center; justify-content: center; gap: .45797rem; padding: 0 .43155rem; border-radius: .26421rem; }
.kform__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kform__panel::after { content: ""; position: absolute; left: calc(50% - .1438rem); top: calc(50% + .3097rem); width: 12.22003rem; height: 5.97588rem; transform: translate(-50%, -50%); background: #fd6a05; opacity: .6; pointer-events: none; }
.kform__txt, .kform__form { z-index: 1; }
.kform__txt, .kform__form { position: relative; }
.kform__txt { display: flex; flex-direction: column; align-items: flex-start; }
.kform__ttl { font-weight: 700; font-size: .38244rem; line-height: .56366rem; letter-spacing: .026771rem; white-space: nowrap; }
.kform__p { margin-top: .19376rem; font-weight: 400; font-size: .15503rem; line-height: .34451rem; letter-spacing: .023254rem; white-space: nowrap; }
.kform__stats { margin-top: .52843rem; display: flex; align-items: center; gap: .40513rem; }
.kform__stats li { display: flex; align-items: center; gap: .14972rem; }
.kform__stats li + li { position: relative; }
.kform__stats li + li::before { content: ""; position: absolute; left: calc(-.40513rem / 2 - .0044rem); top: 50%; width: .00881rem; height: .81026rem; transform: translateY(-50%); background: #fff; }
.kform__stats .b { width: .84549rem; height: .84549rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #352e2e; font-weight: 700; font-size: .13598rem; line-height: .20041rem; letter-spacing: .013598rem; text-align: center; white-space: nowrap; }
.kform__stats .n { display: flex; align-items: flex-end; gap: .02642rem; font-weight: 700; font-size: .27644rem; line-height: .40743rem; letter-spacing: .019351rem; }
.kform__stats .n b { display: flex; align-items: center; height: .46301rem; font-family: Montserrat, sans-serif; font-size: .59806rem; line-height: 1.42762rem; letter-spacing: .017942rem; }
.kform__form { width: 5.24906rem; display: flex; flex-direction: column; align-items: flex-end; padding: .31706rem 0; }
.kform__lb { align-self: stretch; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: calc(.06165rem + .04722rem); background: url(../img/kai/underline.svg) no-repeat left bottom / 100% .04722rem; font-weight: 700; font-size: .19537rem; line-height: .28794rem; letter-spacing: .013676rem; white-space: nowrap; }
.kform__lb .en { font-family: Montserrat, sans-serif; font-size: .10401rem; line-height: .25866rem; letter-spacing: .007281rem; color: #352e2e; }
.kform__ta { align-self: stretch; height: 1.52364rem; margin-top: .2466rem; padding: .10rem; border: .00881rem solid #9f9f9f; border-radius: 0; background: #fff5e8; font: inherit; font-size: .14rem; color: #352e2e; resize: none; }
.kform__hint { align-self: flex-start; margin-top: .14091rem; font-weight: 700; font-size: .10569rem; line-height: .34451rem; letter-spacing: .015853rem; }
.kform__chips { align-self: flex-start; margin-top: .06165rem; display: grid; grid-template-columns: auto auto; grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
.chip { display: flex; align-items: center; gap: .0759rem; padding: 0 .17458rem; border: .00759rem solid #9f9f9f; background: #fff; font-size: .09108rem; line-height: .29691rem; letter-spacing: .013662rem; color: #9f9f9f; text-align: left; }
.kform__chips li:nth-child(3n+1) .chip { border-width: .01518rem; }
.chip > :first-child, .chip { white-space: nowrap; }
.chip img { width: .10626rem; height: .10626rem; margin-left: auto; }
.chip { width: 2.66rem; height: .29691rem; } /* Figma の枠線は内側 */
.kform__btn { margin-top: .27302rem; }


/* Figma のテキスト枠の整数切り上げで生じる 1〜2px の不足をセクション末尾で補う（カンプ実測） */
.stage__row--2 { margin-top: .27rem; }
.stage { padding-bottom: 1.011rem; }
.srv { padding-bottom: 1.011rem; }
.off { padding-bottom: 1.006rem; }
.diag { padding-bottom: 1.009rem; }
.kcase__list { gap: .417rem; }
.kproc { padding-bottom: 1.007rem; }
.kform__form { padding: .32771rem 0; }
.kcase .acard { box-shadow: inset 0 0 0 .01rem #9f9f9f; } /* カンプは #9f9f9f の 1px 枠（TOP のカードより濃い） */
.kcase__tags a { padding-right: calc(.22995rem + .01703rem - .012681rem); } /* 行末の字間ぶん */

/* =========================================================
   動くデモ（kai-demo.js）。見た目は Figma のデモ画面（画像）から採寸
   ========================================================= */
.lcd, .ldemo { --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: "Noto Sans JP", sans-serif; text-align: left; }
.lcd button, .ldemo button { font: inherit; cursor: pointer; }

/* ---- LIVE CONNECTION DEMO ---- */
.srv__demo.lcd { display: block; padding: .23rem .24rem .34rem; background: #121212; color: #fff; }
.lcd__head { position: relative; padding: .50rem .48rem .38rem; border: 1px solid #333; border-radius: .10rem .10rem 0 0; background: #1b1b1b; }
.lcd__label { font-family: Montserrat, sans-serif; font-weight: 600; font-size: .12rem; letter-spacing: .024rem; color: #fd6a05; }
.lcd__ttl { margin-top: .08rem; font-weight: 700; font-size: .36rem; line-height: 1.3; }
.lcd__lead { margin-top: .10rem; font-size: .15rem; line-height: 1.6; color: #aaa; }
.lcd__badge { position: absolute; right: .48rem; top: .42rem; padding: .08rem .16rem; border: 1px solid #666; border-radius: .30rem; font-family: Montserrat, sans-serif; font-size: .11rem; letter-spacing: .015rem; color: #ccc; white-space: nowrap; }
.lcd__body { padding: .44rem .48rem .48rem; border: 1px solid #333; border-top: 0; border-radius: 0 0 .10rem .10rem; background: #1b1b1b; }
.lcd__cap { font-size: .13rem; font-weight: 700; letter-spacing: .02rem; color: #999; }
.chat { width: 9.08rem; max-width: 100%; margin: .30rem auto 0; padding: .10rem .18rem .20rem; border-radius: .20rem; background: #262626; box-shadow: 0 .20rem .40rem rgba(0,0,0,.35); }
.chat__head { display: flex; align-items: center; gap: .12rem; padding: .06rem 0 .14rem; border-bottom: 1px solid #3a3a3a; }
.chat__head b { display: block; font-size: .15rem; font-weight: 500; }
.chat__head small { display: block; font-size: .10rem; color: #999; }
.chat__av { flex: none; display: flex; align-items: center; justify-content: center; width: .32rem; height: .32rem; border-radius: 50%; background: #fd6a05; color: #fff; font-size: .14rem; }
.chat__log { height: 2.10rem; overflow-y: auto; padding: .20rem .08rem .10rem; display: flex; flex-direction: column; gap: .16rem; scrollbar-width: thin; }
.msg { display: flex; align-items: flex-start; gap: .12rem; }
.msg p { max-width: 7.2rem; font-size: .15rem; line-height: 1.65; color: #e6e6e6; }
.msg--me { justify-content: flex-end; }
.msg--me p { padding: .08rem .16rem; border-radius: .14rem; background: #3a3a3a; color: #fff; }
.msg.is-typing p { display: flex; gap: .05rem; padding-top: .10rem; }
.msg.is-typing p i { width: .06rem; height: .06rem; border-radius: 50%; background: #999; animation: dot 1s infinite; }
.msg.is-typing p i:nth-child(2) { animation-delay: .15s; } .msg.is-typing p i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.chat__form { position: relative; margin-top: .10rem; }
.chat__in { width: 100%; height: .56rem; padding: 0 .64rem 0 .20rem; border: 1px solid #555; border-radius: .30rem; background: #2e2e2e; color: #fff; font: inherit; font-size: .15rem; font-weight: 700; outline: none; }
.chat__in:focus { border-color: #fd6a05; }
.chat__send { position: absolute; right: .08rem; top: 50%; transform: translateY(-50%); width: .40rem; height: .40rem; border: 0; border-radius: 50%; background: #fff; color: #222; font-size: .20rem; }
.chat__hint { margin-top: .12rem; text-align: center; font-size: .10rem; color: #777; }
.lcd__cap2 { margin-top: .38rem; font-size: .11rem; color: #999; }
.lcd__ex { margin-top: .10rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .08rem; }
.lcd__ex button { min-height: .60rem; padding: .10rem .18rem; border: 1px solid #3a3a3a; border-radius: .06rem; background: #1e1e1e; color: #fff; font-size: .14rem; font-weight: 700; text-align: left; transition: border-color .2s, background .2s; }
.lcd__ex button:hover, .lcd__ex button.is-on { border-color: #fd6a05; background: #2a1d14; }
.lcd__note { margin-top: .14rem; font-size: .13rem; color: #999; }
.ana { margin-top: .20rem; display: grid; grid-template-columns: 5.00rem minmax(0, 1fr); min-height: 5.72rem; border: 1px solid #333; border-radius: .06rem; overflow: hidden; }
.ana__l { display: flex; flex-direction: column; background: #0b0b0b; }
.ana__h { display: flex; justify-content: space-between; align-items: center; padding: .14rem .18rem; border-bottom: 1px solid #2a2a2a; }
.ana__h span { font-family: Montserrat, sans-serif; font-weight: 700; font-size: .12rem; letter-spacing: .018rem; color: #fd6a05; }
.ana__h small { font-size: .11rem; color: #aaa; }
.ana__steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.ana__steps li { padding: .24rem .18rem; border-right: 1px solid #1e1e1e; transition: background .3s; }
.ana__steps li:last-child { border-right: 0; }
.ana__steps .n { display: block; font-family: Montserrat, sans-serif; font-size: .12rem; letter-spacing: .018rem; color: rgba(253,106,5,.45); }
.ana__steps b { display: block; margin-top: .10rem; font-size: .16rem; color: #777; }
.ana__steps small { display: block; margin-top: .06rem; font-size: .11rem; line-height: 1.5; color: #444; }
.ana__steps li.is-on { background: #1d140e; }
.ana__steps li.is-on .n, .ana__steps li.is-done .n { color: #fd6a05; }
.ana__steps li.is-on b, .ana__steps li.is-done b { color: #fff; }
.ana__steps li.is-on small, .ana__steps li.is-done small { color: #999; }
.ana__bar { position: relative; display: flex; justify-content: space-between; padding: .08rem .14rem; border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; font-family: var(--mono); font-size: .11rem; letter-spacing: .012rem; color: #ccc; }
.ana__bar i { position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--p, 0) * 100%); background: #fd6a05; transition: width .5s; }
.ana__trace { display: flex; justify-content: space-between; align-items: center; padding: .12rem .16rem; border-bottom: 1px solid #1e1e1e; }
.ana__dots { display: flex; gap: .05rem; } .ana__dots i { width: .06rem; height: .06rem; border-radius: 50%; background: #555; } .ana__dots i:first-child { background: #fd6a05; }
.ana__live { display: flex; align-items: center; gap: .06rem; font-family: var(--mono); font-size: .10rem; letter-spacing: .015rem; color: #bbb; }
.ana__live::before { content: ""; width: .06rem; height: .06rem; border-radius: 50%; background: #fd6a05; }
.ana__log { flex: 1; min-height: 1.60rem; max-height: 2.60rem; overflow-y: auto; padding: .20rem .16rem; font-family: var(--mono); font-size: .12rem; line-height: 1.8; color: #bbb; }
.ana__log time { margin-right: .08rem; color: #666; }
.ana__log b { margin-right: .08rem; color: #fd6a05; }
.ana__cur { display: inline-block; width: .07rem; height: .13rem; margin-left: .04rem; vertical-align: -.02rem; background: #fd6a05; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.kapp { display: flex; flex-direction: column; background: #fff; color: #333; }
.kapp__bar { display: flex; justify-content: space-between; align-items: center; height: .52rem; padding: 0 .18rem; background: #243a47; color: #fff; }
.kapp__logo { display: flex; align-items: flex-end; gap: .02rem; font-size: .19rem; font-weight: 500; }
.kapp__logo i { width: .04rem; margin-bottom: .05rem; border-radius: .01rem; }
.kapp__logo i:nth-child(1) { height: .10rem; background: #fbc02d; } .kapp__logo i:nth-child(2) { height: .16rem; background: #26a69a; } .kapp__logo i:nth-child(3) { height: .12rem; margin-right: .08rem; background: #ef6c00; }
.kapp__nav { display: flex; align-items: center; gap: .12rem; font-size: .11rem; color: #cfd8dc; }
.kapp__nav b { display: flex; align-items: center; justify-content: center; width: .30rem; height: .30rem; border-radius: 50%; background: #fd8d05; color: #fff; font-size: .11rem; }
.kapp__app { display: flex; align-items: center; gap: .12rem; padding: .16rem .20rem; border-bottom: 1px solid #e5e5e5; }
.kapp__icon { display: flex; align-items: center; justify-content: center; width: .42rem; height: .42rem; border-radius: .04rem; background: #f28b3c; color: #fff; font-weight: 700; font-size: .17rem; }
.kapp__app small { display: block; font-size: .10rem; color: #999; }
.kapp__app b { display: block; font-size: .17rem; }
.kapp__cnt { margin-left: auto; padding: .07rem .10rem; border-radius: .04rem; background: #f1f3f4; font-family: var(--mono); font-size: .11rem; color: #666; }
.kapp__cnt b { color: #fd6a05; }
.kapp__q { padding: .22rem .18rem; border-bottom: 1px solid #e5e5e5; background: #f5f7f8; font-family: var(--mono); font-size: .12rem; line-height: 1.6; color: #333; }
.kapp__q b { margin-right: .10rem; font-size: .11rem; letter-spacing: .012rem; color: #fd6a05; }
.kapp__tbl { overflow-x: auto; }
.kapp__tbl table { width: 100%; border-collapse: collapse; }
.kapp__tbl th { padding: .14rem; border-bottom: 1px solid #e5e5e5; background: #f5f7f8; font-size: .12rem; font-weight: 700; color: #666; text-align: left; white-space: nowrap; }
.kapp__tbl td { padding: .12rem .14rem; border-bottom: 1px solid #eee; font-size: .13rem; white-space: nowrap; animation: rowin .3s ease both; }
.kapp__tbl tr:not(.kapp__empty) td:first-child { font-weight: 700; }
.kapp__empty td { padding: .40rem 0; text-align: center; font-family: var(--mono); font-size: .12rem; letter-spacing: .015rem; color: #aaa; animation: none; }
@keyframes rowin { from { opacity: 0; transform: translateY(.06rem); } }

/* ---- LIVE DEMO 01〜03 ---- */
.off__imgs.ldemo { display: flex; flex-direction: column; gap: .60rem; }
.ld__h { display: flex; align-items: flex-start; gap: .18rem; margin-bottom: .22rem; }
.ld__n { font-family: Montserrat, sans-serif; font-weight: 700; font-size: .24rem; line-height: .36rem; color: #fd6a05; }
.ld__h h3 { font-size: .26rem; line-height: 1.4; }
.ld__h p { margin-top: .04rem; font-size: .15rem; color: #888; }
.ld__b { display: flex; align-items: flex-start; gap: .22rem; }
.ld__q { flex: none; width: 3.85rem; overflow: hidden; border-radius: .14rem; background: #111; color: #fff; }
.ld__qh { display: flex; justify-content: space-between; align-items: flex-start; gap: .10rem; padding: .22rem .20rem .18rem; border-bottom: 1px solid #2a2a2a; }
.ld__qh > span { width: 1.9rem; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .14rem; line-height: 1.7; letter-spacing: .021rem; color: #fd6a05; }
.ld__st { display: flex; align-items: flex-start; gap: .08rem; font-size: .13rem; line-height: 1.8; color: #bbb; }
.ld__st i { flex: none; width: .10rem; height: .10rem; margin-top: .07rem; border-radius: 50%; background: #fd6a05; box-shadow: 0 0 0 .04rem rgba(253,106,5,.25); }
.ld.is-busy .ld__st i { animation: blink .6s steps(1) infinite; }
.ld__cap { padding: .26rem .20rem .12rem; font-size: .12rem; letter-spacing: .012rem; color: #aaa; }
.ld__chips { display: flex; flex-wrap: wrap; gap: .08rem; padding: 0 .20rem; }
.ld__chips button { padding: .08rem .12rem; border: 1px solid #555; border-radius: .30rem; background: transparent; color: #fff; font-size: .12rem; font-weight: 700; transition: border-color .2s, background .2s; }
.ld__chips button:hover, .ld__chips button.is-on { border-color: #fd6a05; background: #2a1a10; }
.ld__form { padding: .14rem .20rem 0; }
.ld__in { width: 100%; height: .62rem; padding: 0 .18rem; border: 1px solid #444; border-radius: .06rem; background: #1a1a1a; color: #fff; font: inherit; font-size: .17rem; outline: none; }
.ld__in:focus { border-color: #fd6a05; }
.ld__go { width: 100%; height: .52rem; margin-top: .14rem; border: 0; border-radius: .06rem; background: #ff7a00; color: #fff; font-size: .15rem; font-weight: 700; transition: filter .2s; }
.ld__go:hover { filter: brightness(1.08); }
.ld__steps { margin: .20rem .20rem 0; border: 1px solid #444; border-radius: .06rem; }
.ld__steps li { padding: .12rem .14rem; border-top: 1px solid #333; font-size: .14rem; font-weight: 700; transition: background .3s; }
.ld__steps li:first-child { border-top: 0; }
.ld__steps li span { display: block; margin-bottom: .04rem; font-family: var(--mono); font-size: .12rem; font-weight: 400; letter-spacing: .012rem; color: #fd6a05; }
.ld__steps li.is-on { background: #2a1a10; }
.ld__log { margin-top: .22rem; padding: .12rem .20rem; background: #0a0a0a; font-family: var(--mono); font-size: .12rem; color: #fd6a05; }
.ld__log span { color: #bbb; }
.ld__ans { margin: 0 .20rem .20rem; padding: .20rem .18rem; border-left: .05rem solid #fd6a05; background: #fff; color: #222; }
.ld__ans:not(.is-on) { display: none; }
.ld__al { font-family: Montserrat, sans-serif; font-weight: 600; font-size: .14rem; letter-spacing: .018rem; color: #fd6a05; }
.ld__at { margin-top: .10rem; font-size: .15rem; font-weight: 700; line-height: 1.6; }
.kt { flex: 1; min-width: 0; overflow: hidden; border-radius: .14rem; background: #fff; box-shadow: 0 0 0 1px #e5e5e5; color: #333; }
.kt__bar { display: flex; justify-content: space-between; align-items: center; height: .58rem; padding: 0 .20rem; background: #111; }
.kt__bar span { font-family: Montserrat, sans-serif; font-weight: 500; font-size: .18rem; color: #fd8d05; }
.kt__bar b { font-size: .16rem; color: #fff; }
.kt__h { display: flex; justify-content: space-between; align-items: flex-end; padding: .20rem .18rem .16rem; }
.kt__h small { display: block; font-family: Montserrat, sans-serif; font-weight: 600; font-size: .12rem; letter-spacing: .018rem; color: #fd6a05; }
.kt__h p > b { display: block; margin-top: .04rem; font-size: .20rem; }
.kt__n { display: flex; align-items: baseline; gap: .06rem; font-family: Montserrat, sans-serif; font-size: .12rem; letter-spacing: .015rem; color: #888; }
.kt__n b { font-weight: 700; font-size: .36rem; letter-spacing: 0; color: #fd6a05; }
.kt__scroll { overflow-x: auto; }
.kt__tbl { min-width: 6.10rem; width: 100%; border-collapse: collapse; }
.kt__tbl th { padding: .16rem .14rem; background: #f7f4f0; font-size: .15rem; font-weight: 400; color: #888; text-align: left; white-space: nowrap; }
.kt__tbl td { height: .49rem; padding: 0 .14rem; border-top: 1px solid #eee; font-size: .15rem; white-space: nowrap; transition: background .3s, color .3s; }
.kt__tbl tr.is-hit td { background: #fde9df; border-top-color: #f6c7ae; border-bottom: 1px solid #f6c7ae; }
.kt__tbl tr.is-dim td { color: #c8c8c8; }
.kt__tbl tr.is-dim .kt__b, .kt__tbl tr.is-dim .kt__tag { opacity: .4; }
.kt__b { display: inline-flex; align-items: center; justify-content: center; width: .28rem; height: .28rem; border-radius: 50%; background: #fff1e3; color: #e85d04; font-size: .13rem; font-weight: 700; }
.kt__tag { display: inline-block; padding: .02rem .08rem; border-radius: .04rem; background: #fff1e3; color: #e85d04; font-size: .11rem; font-weight: 700; }
.kt__foot { display: flex; justify-content: space-between; padding: .14rem .18rem; background: #faf8f5; font-size: .11rem; color: #777; }
.kt__foot i { display: inline-block; width: .08rem; height: .08rem; margin-right: .08rem; border-radius: 50%; background: #fd6a05; }
.kapp__cnt { white-space: nowrap; }
.chat__log { height: 1.90rem; }
.ld__b { align-items: stretch; }
.kt { display: flex; flex-direction: column; }
.kt__scroll { flex: 1; }
/* デモ3件の合計高を Figma（画像 3,082.7px）に合わせる */
.ld { display: flex; flex-direction: column; min-height: calc((30.8267rem - 2 * .60rem) / 3); }
.ld__b { flex: 1; }
.lcd__body { padding-bottom: calc(.48rem - .093rem); } /* 合計高を Figma（1,502.5px）に合わせる */

/* 業種タグ：カーソルでオレンジ地・白文字（Figma「カーソル当てて変わる」340:6252） */
.kcase__tags a { transition: background-color .3s, color .3s, box-shadow .3s; }
@media (hover: hover) { .kcase__tags a:hover, .kcase__tags a:focus-visible { background: #fd6a05; color: #fff; box-shadow: inset 0 0 0 .01703rem #fd6a05; } }