@charset "utf-8";
/* =========================================================
   kintone×AI 経営 SP（767px 以下・SP基準 430）
   Figma に SP 版は無いため PC の構成から推論（縦積み・文字を読める大きさに）
   ========================================================= */

/* ヒーロー */
.kai-hero .lhero__in { top: calc(50% - .34rem); gap: .26rem; }
.kai-hero__txt { gap: .14rem; }
.kai-hero__sub { margin-bottom: 0; font-size: .15rem; line-height: .24rem; letter-spacing: .021rem; }
.kai-hero__ttl { top: 0; font-size: .36rem; line-height: .52rem; letter-spacing: .018rem; }
.kai-hero__ttl .l2 { padding-left: 0; }
.kai-hero__ttl .p { letter-spacing: -.03rem; }
.kai-hero__lead { top: 0; font-size: .13rem; line-height: .24rem; letter-spacing: .013rem; white-space: normal; }
.kai-hero__lead br { display: none; }
.kai-hero__btns { flex-direction: column; gap: .12rem; }
.btn.kai-hbtn { padding: .15rem .30rem; font-size: .15rem; line-height: .24rem; letter-spacing: .02rem; }
.btn.kai-hbtn > span { width: 2.40rem; }
.kai-hero .fv__scroll { top: 5.66rem; }

/* 暗い地 */
.kai-dark { padding-top: .60rem; }
.kai-chg { width: 3.70rem; }
.kai-chg__ttl { height: auto; padding-left: 0; font-size: .30rem; line-height: .46rem; letter-spacing: .015rem; }
.kai-chg__lead { height: auto; margin-top: .20rem; font-size: .14rem; line-height: .26rem; letter-spacing: .014rem; white-space: normal; }
.kai-chg__lead br { display: none; }
.kai-chg__tri { margin-top: .20rem; width: .50rem; height: .21rem; }
.kai-chg__list { width: 3.70rem; margin-top: .26rem; gap: .14rem; }
.kai-chg__list > li, .kai-chg__list > .is-ai { width: 100%; height: auto; gap: .04rem; padding: .16rem .18rem; }
.kai-chg__list > .is-ai { padding: .20rem .22rem; }
.kai-chg__list h3 { height: auto; font-size: .17rem; line-height: .30rem; letter-spacing: .012rem; }
.kai-chg__list p { width: auto; font-size: .14rem; line-height: .24rem; letter-spacing: .01rem; }

.kai-stp { margin-top: .80rem; padding: .60rem .20rem; }
.kai-stp__ttl { padding-left: 0; font-size: .24rem; line-height: .38rem; letter-spacing: .0168rem; white-space: normal; text-align: center; }
.kai-stp__lead { width: auto; height: auto; margin-top: .14rem; font-size: .13rem; line-height: .24rem; letter-spacing: .013rem; }
.kai-stp__row { margin-top: .30rem; flex-wrap: wrap; justify-content: center; gap: .10rem; }
.kai-stp__row > li { width: 1.75rem; padding: .18rem .08rem; }
.kai-stp__row b { height: .20rem; font-size: .15rem; line-height: .20rem; letter-spacing: .015rem; }
.kai-stp__row h3 { height: .34rem; margin-top: .06rem; font-size: .22rem; line-height: .34rem; letter-spacing: .015rem; }
.kai-stp__row p { width: auto; height: auto; margin-top: .04rem; font-size: .12rem; line-height: .19rem; letter-spacing: .012rem; }
.kai-stp__row > .is-on { width: 1.75rem; height: auto; padding: .18rem .08rem; box-shadow: inset 0 0 0 .05rem #fd6a05; }
.kai-stp__row > .is-on h3 { font-size: .18rem; letter-spacing: .01rem; }
.kai-stp__msg { width: 3.70rem; margin-top: .20rem; }
.kai-stp__tail { width: .22rem; height: .36rem; margin-right: .76rem; }
.kai-stp__pill { height: auto; padding: .18rem .16rem; border-radius: .40rem; font-size: .14rem; line-height: .26rem; letter-spacing: .01rem; white-space: normal; }
.kai-stp__pill strong { font-size: .26rem; line-height: .40rem; }
.kai-stp__arw { display: none; }

.kai-vs { width: 3.70rem; margin-top: .80rem; }
.kai-vs__ttl { height: auto; padding-left: 0; font-size: .24rem; line-height: .38rem; letter-spacing: .0168rem; white-space: normal; }
.kai-vs__ttl br, .kai-vs__lead br { display: none; }
.kai-vs__lead { height: auto; margin: .14rem 0 .30rem; font-size: .13rem; line-height: .24rem; letter-spacing: .013rem; white-space: normal; }
.hscroll--kvs { height: 4.68rem; }
.hscroll--kvs .kvs__fig { zoom: .60259; }
.kai-vs .hscroll__bar { align-self: center; margin-top: .14rem; }
.kai-vs__next { height: auto; margin: .36rem 0 .30rem; padding-left: 0; font-size: .18rem; line-height: .32rem; letter-spacing: .018rem; white-space: normal; }
.kai-vs__next br { display: none; }
.kai-arw { height: 1.00rem; background-size: 100% 100%; }

/* AIへ質問〜課題〜動画 */
.kai-ai { gap: .50rem; padding: 1.00rem .20rem .60rem; }
.kai-ai__dome { height: .32rem; }
.kai-ai__blk { width: 100%; }
.kai-ai__blk + .kai-ai__blk { margin-top: .30rem; }
.kai-h { padding-left: 0; font-size: .24rem; line-height: .38rem; letter-spacing: .0168rem; white-space: normal; }
.kai-ai__lead { margin-top: .14rem; font-size: .13rem; line-height: .24rem; letter-spacing: .013rem; white-space: normal; }
.kai-ai__lead br, .kai-ai__but br { display: none; }
.kai-demo { width: 100%; height: 2.20rem; margin-top: .24rem; }
.kai-demo > p { top: calc(50% - .195rem); font-size: .14rem; }
.kai-flow { margin-top: .24rem; flex-direction: column; gap: .10rem; }
.kai-flow > li:not(.kai-flow__arw), .kai-flow > li.s { width: 2.80rem; height: auto; padding: .18rem .16rem; }
.kai-flow h3, .kai-flow p, .kai-flow > li.s h3, .kai-flow > li.s p { width: auto; }
.kai-flow h3, .kai-flow > li.s h3 { font-size: .22rem; line-height: .32rem; }
.kai-flow p, .kai-flow > li.s p { font-size: .13rem; line-height: .22rem; }
.kai-flow__arw { width: .40rem; height: .22rem; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.kai-ai__but { height: auto; margin-top: .30rem; padding-left: 0; font-size: .18rem; line-height: .32rem; letter-spacing: .018rem; white-space: normal; }
.kai-ai__blk--gap { gap: .30rem; }
.kai-ai__blk--gap > .kai-h--l, .kai-gap { width: 100%; }
.kai-gap__row { flex-direction: column; gap: .30rem; width: 100%; }
.kai-gap__row + .kai-gap__row { margin-top: .30rem; }
.kai-gap__row > li { width: calc(100% - .12rem); margin-left: .12rem; padding: .20rem .20rem .18rem; }
.kai-gap__row h3 { width: auto; height: auto; font-size: .22rem; line-height: .32rem; letter-spacing: .015rem; }
.kai-gap__row p { width: auto; height: auto; font-size: .13rem; line-height: .21rem; letter-spacing: .013rem; white-space: normal; }
.kai-gap__row p br { display: none; }
.kai-gap__row .n { left: -.12rem; top: -.14rem; width: .48rem; height: .48rem; padding-bottom: .02rem; font-size: .26rem; line-height: .26rem; letter-spacing: 0; text-indent: 0; }
.kai-gap__goal { width: 100%; margin-top: .40rem; font-size: .16rem; line-height: .40rem; letter-spacing: .01rem; white-space: normal; }
.kai-gap__goal > span { height: auto; }
.kai-gap__goal b { font-size: .20rem; }
.kai-mv { width: 100%; flex-direction: column; align-items: stretch; gap: .20rem; padding: .20rem; border-radius: .16rem; }
.kai-mv__thumb { width: 100%; height: auto; aspect-ratio: 486 / 274.2; }
.kai-mv__txt { align-items: center; gap: .20rem; }
.kai-mv__ttl { align-self: stretch; font-size: .22rem; line-height: .34rem; letter-spacing: .015rem; white-space: normal; }
.kai-mv__p { width: auto; margin-top: -.08rem; font-size: .13rem; line-height: .24rem; letter-spacing: .013rem; }
.kai-mv__p br { display: none; }

/* 導入企業様の変化・FAQ */
.kai-case { gap: .40rem; padding: .60rem .20rem; }
.kai-case__head { width: 100%; gap: .10rem; }
.kai-case__lead { font-size: .13rem; line-height: .24rem; letter-spacing: .013rem; white-space: normal; }
.kai-case__body { width: 100%; gap: .24rem; }
.kai-case__tags { gap: .08rem; }
.kai-case__tags a { height: .34rem; padding: 0 .16rem; font-size: .14rem; line-height: .24rem; }
.ncards.kai-case__cards { flex-direction: column; align-items: center; gap: .24rem; }
.kai-case .ncard { width: 3.70rem; height: auto; }
.kai-case .ncard__img { width: 100%; height: auto; aspect-ratio: 313.428 / 176.101; }
.kai-case__foot { gap: .24rem; }
.kai-case__dev { flex-wrap: wrap; justify-content: center; font-size: .15rem; line-height: .26rem; letter-spacing: .01rem; white-space: normal; text-align: center; }
/* AIデモ：ページ内はカードだけ。押すと全画面のモーダル（業種 → 質問 → kintone → AI を 1 画面に） */
.aid { width: 100%; height: auto; margin-top: .24rem; overflow: visible; border-radius: .14rem; box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .3); }
.aid__launch { display: flex; flex-wrap: wrap; align-items: center; gap: .12rem; width: 100%; padding: .2rem .16rem; text-align: left; }
.aid__launch-ic { flex: none; width: .48rem; height: .48rem; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2l2.2 6.3L20 10l-5.8 1.8L12 18l-2.2-6.2L4 10l5.8-1.7z'/%3E%3Ccircle cx='19' cy='19' r='2'/%3E%3C/svg%3E") center / 58% no-repeat, linear-gradient(135deg, #fd6a05, #ffb46b); }
.aid__launch-t { flex: 1; display: flex; flex-direction: column; gap: .04rem; }
.aid__launch-t b { font-size: .15rem; line-height: .22rem; }
.aid__launch-t small { color: var(--mute); font-size: .11rem; line-height: .17rem; }
.aid__launch-btn { flex: 1 1 100%; padding: .12rem; border-radius: .4rem; background: var(--or); color: #fff; font-weight: 700; font-size: .14rem; text-align: center; }
.aid:not(.aid--modal) .aid__panel { display: none; }
.aid--modal { position: fixed; inset: 0; z-index: 10000; width: auto; margin: 0; border-radius: 0; box-shadow: none; background: #fff; }
.aid--modal .aid__panel { display: flex; flex-direction: column; height: 100dvh; }
html.aid-lock { overflow: hidden; }
.aid__top { position: relative; flex-wrap: wrap; gap: .06rem; padding: .1rem .12rem .06rem; }
.aid__top > .aid__step { display: none; }
.aid__inds { width: calc(100% - .44rem); }
.aid__ind { flex: 1; justify-content: center; padding: .06rem .02rem; font-size: .13rem; }
.aid__model { margin: 0; font-size: .1rem; }
.aid__close { display: grid; place-items: center; position: absolute; top: .1rem; right: .1rem; width: .34rem; height: .34rem; border-radius: 50%; background: #efeae6; font-size: .2rem; line-height: 1; }
.aid__qbar { padding: .04rem 0 .08rem .12rem; }
.aid__qbar > .aid__step { display: none; }
.ai__qs { overflow-x: auto; padding-right: .12rem; scrollbar-width: none; }
.ai__q { font-size: .12rem; padding: .06rem .12rem .06rem .06rem; }
.aid__main { flex: 1; min-height: 0; height: auto; grid-template-columns: 1fr; grid-template-rows: 36% 1fr; }
.kt { min-height: 0; }
.kt__bar { display: none; }
.kt__apps { padding: .06rem .12rem 0; }
.kt__app { padding: .05rem .1rem; font-size: .11rem; }
.kt__head { padding: .08rem .12rem .06rem; }
.kt__head .kt__ic { width: .24rem; height: .24rem; }
.kt__name { font-size: .14rem; }
.kt__view { display: none; }
.kt__plus { width: .24rem; height: .24rem; font-size: .16rem; }
.kt__tblw { padding: 0 .12rem .08rem; }
.kt__tbl { font-size: .11rem; }
.kt__tbl td { padding: .07rem .08rem; }
.ai { border-top: .01rem solid var(--line); }
.ai__h { display: none; }
.ai__log { padding: .1rem .12rem .2rem; }
.aid-gauges, .aid-join { grid-template-columns: 1fr; }
.aid-gauge { flex-direction: row; flex-wrap: wrap; text-align: left; }
.aid-gauge__ring { width: .64rem; height: .64rem; }
.aid-gauge__ring b { width: .5rem; height: .5rem; }
.aid-gauge__n { flex: 1; align-items: flex-start; }
.aid-gauge__w { flex: 1 1 100%; }
.aid-tl { grid-auto-flow: row; gap: .03rem; }
.aid-tl li { padding: 0 0 0 .16rem; }
.aid-tl li::before { display: none; }
.aid-tl li::after { top: .03rem; }
.aid-bar { grid-template-columns: 1.1rem 1fr; }
.aid-join { gap: .04rem; }
.aid-join li { flex-direction: row; align-items: center; gap: .06rem; padding: .05rem .08rem; }
.kt { overflow: hidden; }