@charset "utf-8";
/* =========================================================
   kintone×AI 経営（Figma 613:18799／2026-10 改訂デザイン）
   1rem = 100 design-px（PC 1440 基準）。新規部品は接頭辞 kai-
   - 比較表（.kvs__*）は前回の kai.css から移植（Figma 同一を画素比較で確認）
   - 事例カードは top.css の .ncard、相談フォーム付き CTA は form.css の .ccta を流用
   ========================================================= */
main { text-spacing-trim: space-all; } /* Figma は約物を詰めない */

/* ---------- ヒーロー（Frame 744：613:18801） ---------- */
.kai-hero .lhero__in { top: calc(50% - .0038rem); gap: .44rem; }
.kai-hero__txt { display: flex; flex-direction: column; align-items: center; gap: .27rem; }
.kai-hero__sub { margin-bottom: calc(.3536rem - .27rem); font-weight: 500; font-size: .24568rem; line-height: .37796rem; letter-spacing: .034395rem; white-space: nowrap; }
.kai-hero__ttl { position: relative; top: -.07rem; font-weight: 900; font-size: .88377rem; line-height: 1.22rem; letter-spacing: .061864rem; white-space: nowrap; }
.kai-hero__ttl > span { display: block; }
.kai-hero__ttl .l2 { padding-left: .34rem; color: #fd6a05; } /* Figma は末尾の空白まで含めて中央揃え → 実測で右へ 17px */
.kai-hero__ttl .p { letter-spacing: -.0736rem; } /* 見出し・リードの字面の縦位置はカンプ実測で補正（Black の字面が Chrome で下寄り） */
.kai-hero__lead { position: relative; top: -.04rem; font-weight: 400; font-size: .17603rem; line-height: .39rem; letter-spacing: .026404rem; white-space: nowrap; }
.kai-hero__btns { display: flex; align-items: center; gap: .49rem; }
.btn.kai-hbtn { gap: 0; padding: .2294rem .48747rem; font-size: .172rem; line-height: .24547rem; letter-spacing: .0258rem; }
.btn.kai-hbtn > span { width: 2.45645rem; }
.btn.kai-hbtn--line { background: #fff; color: #fd6a05; box-shadow: inset 0 0 0 .03rem #fd6a05; }
.kai-hero .fv__scroll { top: 7.06rem; }

/* ---------- 暗い地（Frame 233：613:18842） ---------- */
.kai-dark { padding-top: 1.00rem; background: #352e2e; color: #fff; }
.kai-arw { display: block; width: .15rem; height: 1.56923rem; background: url(../img/kai/arrow-v.svg) no-repeat 0 0 / 105.93% 101.14%; }

/* データベース化すると（613:18843） */
.kai-chg { width: 10.39rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.kai-chg__ttl { height: 2.08rem; padding-left: .049279rem; font-weight: 700; font-size: .70398rem; line-height: 1.03755rem; letter-spacing: .049279rem; text-align: center; white-space: nowrap; }
.kai-chg__lead { margin-top: .53rem; height: .78rem; font-size: .17603rem; line-height: .39rem; letter-spacing: .026404rem; text-align: center; white-space: nowrap; }
.kai-chg__tri { margin-top: .38rem; width: .74rem; height: .307261rem; background: #d9d9d9; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.kai-chg__list { width: 10.39rem; margin-top: .53rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .38rem; }
.kai-chg__list > li { width: 3.15rem; height: 1.47rem; display: flex; flex-direction: column; align-items: flex-start; gap: .09rem; padding: .21rem; background: #4b4344; box-shadow: inset 0 0 0 .01rem #fff; }
.kai-chg__list h3 { height: .40rem; font-weight: 700; font-size: .20rem; line-height: .39844rem; letter-spacing: .014rem; white-space: nowrap; }
.kai-chg__list h3 > span { background: linear-gradient(90deg, currentColor .02rem, transparent .02rem) left bottom / .052rem .02rem repeat-x; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* 点線：文字の下 5px・2px の点を約 5px 間隔（カンプ実測） */
.kai-chg__list p { width: calc(2.73rem + .0112rem); font-size: .16rem; line-height: .28rem; letter-spacing: .0112rem; }
.kai-chg__list > .is-ai { padding: .25rem; background: #4d3529; box-shadow: inset 0 0 0 .05rem #fd6a05; }

/* どの位置にいますか（613:18863） */
.kai-stp { position: relative; margin-top: 1.48rem; padding: 1.00rem 0; display: flex; flex-direction: column; align-items: center; background: #4b4344; }
.kai-stp__ttl { padding-left: .030397rem; font-weight: 700; font-size: .43424rem; line-height: .64rem; letter-spacing: .030397rem; white-space: nowrap; }
.kai-stp__ttl em { color: #fd6a05; font-style: normal; }
.kai-stp__lead { width: 4.79rem; height: .79rem; margin-top: .29rem; font-size: .17603rem; line-height: .39117rem; letter-spacing: .026404rem; text-align: center; }
.kai-stp__row { margin-top: .54rem; display: flex; align-items: center; gap: .22rem; }
.kai-stp__row > li { width: 2.26528rem; display: flex; flex-direction: column; align-items: center; padding: .33rem .17264rem; background: #352e2e; box-shadow: inset 0 0 0 .01rem #fff; text-align: center; }
.kai-stp__row b { display: flex; align-items: center; justify-content: center; height: .18763rem; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .20507rem; line-height: .48951rem; letter-spacing: .022557rem; color: #fd6a05; white-space: nowrap; }
.kai-stp__row h3 { display: flex; align-items: center; height: .47rem; margin-top: .14rem; font-weight: 700; font-size: .31478rem; line-height: .46393rem; letter-spacing: .022035rem; white-space: nowrap; }
.kai-stp__row p { width: 1.92rem; height: .48rem; margin-top: .10rem; font-weight: 700; font-size: .15rem; line-height: .24rem; letter-spacing: .0225rem; }
.kai-stp__row > .is-on { width: 2.38528rem; height: 1.99rem; justify-content: center; padding: 0 .23264rem; box-shadow: inset 0 0 0 .07rem #fd6a05; }
.kai-stp__row > .is-on h3 { font-size: .2548rem; letter-spacing: .017836rem; }
.kai-stp__msg { width: 8.65139rem; margin-top: .30rem; display: flex; flex-direction: column; align-items: flex-end; }
.kai-stp__tail { width: .29rem; height: .50rem; margin: 0 1.55rem -.02rem 0; background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.kai-stp__pill { align-self: stretch; height: 1.613942rem; display: flex; align-items: center; justify-content: center; border-radius: .83029rem; background: #fff; color: #352e2e; font-weight: 700; font-size: .22292rem; line-height: .47rem; letter-spacing: .015604rem; text-align: center; white-space: nowrap; }
.kai-stp__pill strong { font-weight: 900; font-size: .44rem; color: #fd6a05; }
.kai-stp__pill em { font-weight: 900; font-style: normal; color: #fd6a05; }
.kai-stp__arw { position: absolute; left: 7.12rem; top: 6.8927rem; }

/* Excel と kintone データベース（613:18881） */
.kai-vs { width: 9.73rem; margin: 1.48rem auto 0; display: flex; flex-direction: column; align-items: center; }
.kai-vs__ttl { height: 1.42rem; padding-left: .030397rem; font-weight: 700; font-size: .43424rem; line-height: .71rem; letter-spacing: .030397rem; text-align: center; white-space: nowrap; }
.kai-vs__lead { height: .79rem; margin: .29rem 0 .49rem; font-size: .17603rem; line-height: .39117rem; letter-spacing: .026404rem; text-align: center; white-space: nowrap; }
.kai-vs__next { height: 1.18rem; margin: .43rem 0; padding-left: .049377rem; font-weight: 700; font-size: .32918rem; line-height: .58733rem; letter-spacing: .049377rem; text-align: center; white-space: nowrap; }

/* ---------- AIへ質問〜課題〜動画（Frame 246：613:18931） ---------- */
.kai-ai { position: relative; overflow: clip; display: flex; flex-direction: column; align-items: center; gap: .58rem; padding: 2.53rem .62rem 1.00rem; color: #352e2e; }
.kai-ai__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.kai-ai__dome { position: absolute; left: 0; top: -2px; width: 100%; height: calc(1.07042rem + 2px); } /* 上の暗い面と 2px 重ねて、幅によって出る 1px のすき間を防ぐ */
.kai-ai__blk { position: relative; display: flex; flex-direction: column; align-items: center; }
.kai-ai__blk + .kai-ai__blk { margin-top: .42rem; } /* ブロック間 100px（親の gap 58 + 42） */
.kai-h { padding-left: .030397rem; font-weight: 700; font-size: .43424rem; line-height: .64rem; letter-spacing: .030397rem; text-align: center; white-space: nowrap; }
.kai-h--l { padding-left: 0; text-align: left; }
.kai-ai__lead { margin-top: .29rem; font-size: .17603rem; line-height: .39117rem; letter-spacing: .026404rem; text-align: center; white-space: nowrap; }
.kai-ai__but { margin-top: .58rem; height: 1.18rem; padding-left: .049377rem; font-weight: 700; font-size: .32918rem; line-height: .58733rem; letter-spacing: .049377rem; text-align: center; white-space: nowrap; }

/* デモの枠（613:18943：Figma どおり「AIシステム」の白い空箱 834×448） */
.kai-demo { position: relative; width: 8.34rem; height: 4.48rem; margin-top: .63rem; overflow: clip; background: #fff; }
.kai-demo > p { position: absolute; left: calc(50% - .005rem); top: 1.9614rem; transform: translateX(-50%); color: #000; font-size: .17603rem; line-height: .39117rem; letter-spacing: .026404rem; text-align: center; white-space: nowrap; }

/* AI → MCP → kintone */
.kai-flow { margin-top: .63rem; display: flex; align-items: center; gap: .27466rem; }
.kai-flow > li:not(.kai-flow__arw) { height: 2.0008rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .09656rem; padding: .33796rem .19631rem; border-radius: .21973rem; background: #4b4344; box-shadow: inset 0 0 0 .02414rem #fff; color: #fff; text-align: center; white-space: nowrap; }
.kai-flow h3, .kai-flow p { width: 2.02776rem; }
.kai-flow h3 { font-weight: 700; font-size: .2731rem; line-height: .40248rem; letter-spacing: .019117rem; }
.kai-flow p { font-weight: 700; font-size: .1448rem; line-height: .25347rem; letter-spacing: .02172rem; }
.kai-flow > li.s { gap: .08789rem; padding: .30762rem .17868rem; box-shadow: inset 0 0 0 .02197rem #fff; }
.kai-flow > li.s h3, .kai-flow > li.s p { width: 1.84571rem; }
.kai-flow > li.s h3 { font-size: .24856rem; line-height: .36634rem; letter-spacing: .017399rem; }
.kai-flow > li.s p { font-size: .13184rem; line-height: .23071rem; letter-spacing: .019775rem; }
.kai-flow__arw { width: .280152rem; height: .494752rem; background: #fd6a05; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* 課題 6 つ（613:18964） */
.kai-ai__blk--gap { gap: .54rem; }
.kai-ai__blk--gap > .kai-h--l { width: 11rem; }
.kai-gap { width: 11rem; display: flex; flex-direction: column; align-items: flex-start; }
.kai-gap__row { display: flex; align-items: flex-start; gap: .4349rem; filter: drop-shadow(0 .11104rem .14805rem rgba(0,0,0,.08)); }
.kai-gap__row + .kai-gap__row { margin-top: .66623rem; }
.kai-gap__row > li { 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; }
.kai-gap__row h3 { width: 2.51688rem; height: .86rem; font-weight: 700; font-size: .2961rem; line-height: .42565rem; letter-spacing: .020727rem; color: #fd6a05; white-space: nowrap; }
.kai-gap__row p { width: 2.85924rem; height: .47rem; font-size: .1481rem; line-height: .23133rem; letter-spacing: .022215rem; white-space: nowrap; }
.kai-gap__row .n { position: absolute; left: -.1712rem; top: -.2312rem; width: .69399rem; height: .69399rem; display: flex; align-items: center; justify-content: center; padding-bottom: .032rem; border-radius: 50%; background: #fd6a05; color: #fff; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .37rem; line-height: .28649rem; letter-spacing: .0407rem; text-indent: calc(.0407rem - .042rem); }
.kai-gap__goal { width: 11rem; margin-top: .57rem; font-weight: 700; font-size: .31842rem; line-height: .80rem; letter-spacing: .022289rem; text-align: center; white-space: nowrap; }
.kai-gap__goal > span { display: block; height: .80rem; } /* 大きい字（42.84px）が混ざる行も行高 80px のまま */
.kai-gap__goal .l1, .kai-gap__goal .l2 { text-decoration: underline; text-decoration-thickness: 11%; }
.kai-gap__goal b { font-weight: 900; font-size: .4284rem; text-decoration-thickness: 8%; }

/* 動画（613:18989） */
.kai-mv { position: relative; display: flex; align-items: center; gap: .46rem; padding: .47rem .51rem; border-radius: .20rem; background: #fff; filter: drop-shadow(0 .12rem .16rem rgba(0,0,0,.08)); }
.kai-mv__thumb { flex: none; display: block; width: 4.86rem; height: 2.74199rem; overflow: hidden; border-radius: .07267rem; }
.kai-mv__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kai-mv__txt { display: flex; flex-direction: column; align-items: flex-start; gap: .28rem; }
.kai-mv__ttl { font-weight: 700; font-size: .36318rem; line-height: .53527rem; letter-spacing: .025423rem; white-space: nowrap; }
.kai-mv__p { width: 5.25rem; margin-top: calc(.18rem - .28rem); font-size: .16rem; line-height: .34rem; letter-spacing: .024rem; }
.kai-mv .btn { --k: .955556; }

/* ---------- 導入企業様の変化・FAQ（613:18998） ---------- */
.kai-case { display: flex; flex-direction: column; align-items: center; gap: .70rem; padding: 1.00rem .62rem; background: #fff; color: #352e2e; }
.kai-case__head { width: 11rem; display: flex; flex-direction: column; align-items: flex-start; gap: .24rem; }
.kai-case__lead { font-size: .16rem; line-height: .34rem; letter-spacing: .024rem; white-space: nowrap; }
.kai-case__body { width: 11.24rem; display: flex; flex-direction: column; gap: .37rem; }
.kai-case__tags { display: flex; flex-wrap: wrap; gap: .13rem; }
.kai-case__tags a { display: flex; align-items: center; height: .41924rem; padding: 0 calc(.22995rem + .01703rem); border-radius: .28463rem; background: #fff; box-shadow: inset 0 0 0 .01703rem #9f9f9f; font-weight: 500; font-size: .18116rem; line-height: .29125rem; letter-spacing: .012681rem; white-space: nowrap; }
.ncards.kai-case__cards { flex-direction: row; justify-content: center; align-items: flex-start; gap: .34rem; }
.kai-case .ncard {
  width: 3.5198rem; height: 4.40716rem; gap: .16522rem; padding: calc(.27rem + .02754rem) calc(.16522rem + .02754rem) calc(.19rem + .02754rem);
  border-radius: .17601rem; background: #ffead7; box-shadow: inset 0 0 0 .02754rem #f1a36e; filter: drop-shadow(0 .09694rem .12925rem rgba(0,0,0,.08)); color: #352e2e;
}
.kai-case .ncard__img { width: 3.13428rem; height: 1.76101rem; }
.kai-case .ncard__body { gap: .08261rem; }
.kai-case .ncard__tags { gap: .11567rem; min-height: .32707rem; }
.kai-case .ncard__tags > span { padding: .03524rem .20259rem; font-size: .141rem; line-height: .25659rem; letter-spacing: .01551rem; }
.kai-case .ncard__ttl { font-size: .1928rem; line-height: .30697rem; letter-spacing: .013496rem; }
.kai-case .ncard__meta { margin-top: calc(.05783rem - .08261rem); font-size: .1542rem; line-height: .30697rem; letter-spacing: .010794rem; }
.kai-case .ncard__co { min-height: .30697rem; margin-bottom: -.05507rem; }
.kai-case .ncard__date { height: .30697rem; }
.kai-case__foot { display: flex; flex-direction: column; align-items: center; gap: .34rem; }
.kai-case__dev { display: flex; gap: .08rem; font-weight: 700; font-size: .21rem; line-height: .34rem; letter-spacing: .0147rem; white-space: nowrap; }
.kai-case__dev a { color: #fd6a05; text-decoration: underline; text-decoration-thickness: 10.5%; }
.kai-faq { margin-top: .01rem; }
.kai-faq .faq__item { background: #ffead7; }
.kai-faq .faq__q > span::before { color: #ffead7; }

/* ---------- 相談フォーム付き CTA（Frame 637：白地） ---------- */
.kai-cta { background: #fff; }

/* =========================================================
   以下、前回デザイン（kai.css）からの移植
   ========================================================= */
.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; }


.kvs__td--db { box-shadow: 0 .01319rem 0 #fd6a05; } /* 行間 2.6px の下地が暗色になったため、DB 列は枠線色を下へ延ばす（カンプ実測） */

/* 事例カード：Figma にホバー表現が無いので top.css のホバー（画像拡大・下線）を打ち消す */
.kai-case .ncard:hover .ncard__img img { transform: none; }
.kai-case .ncard:hover .ncard__ttl { text-decoration: none; }
/* 業種タグ：Figma 注記「カーソルあてて色変更」（旧版 kai.css と同じ） */
.kai-case__tags a { transition: background-color .3s, color .3s, box-shadow .3s; }
@media (hover: hover) { .kai-case__tags a:hover, .kai-case__tags a:focus-visible { background: #fd6a05; color: #fff; box-shadow: inset 0 0 0 .01703rem #fd6a05; } }

/* ---------- AIデモ（ai-demo.js）：業種を選ぶ → 左 kintone（モデル）／右 AI チャット ---------- */
.aid { --or: #fd6a05; --or-l: #fff1e6; --ink: #352e2e; --mute: #8a8380; --line: #e8e4e1; --bad: #e5484d; --good: #1f9d6b; --kb: #3498db;
  width: 11.6rem; height: auto; min-height: 0; overflow: hidden; border-radius: .18rem; color: var(--ink); text-align: left; box-shadow: 0 .3rem .7rem rgba(0, 0, 0, .35); }
.aid button { font-family: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; }
.aid__nojs { padding: .4rem; text-align: center; }
.aid__step { display: flex; align-items: center; gap: .08rem; font-weight: 700; font-size: .13rem; white-space: nowrap; }
.aid__step b { padding: .02rem .08rem; border-radius: .04rem; background: var(--or); color: #fff; font-family: Montserrat, sans-serif; font-size: .1rem; letter-spacing: .02rem; }

/* 業種 */
.aid__launch, .aid__close { display: none; }
.aid__top { display: flex; align-items: center; gap: .2rem; padding: .14rem .28rem .1rem; }
.aid__qbar { display: flex; align-items: center; gap: .2rem; padding: .04rem .28rem .14rem; border-bottom: .01rem solid var(--line); }
.aid__inds { display: flex; gap: .08rem; }
.aid__ind { display: flex; align-items: center; gap: .08rem; padding: .09rem .22rem; border: .015rem solid var(--line); border-radius: .4rem; background: #fff; font-weight: 700; font-size: .15rem; transition: background .25s, color .25s, border-color .25s; }
.aid__ind span { color: var(--or); font-size: .16rem; }
.aid__ind:hover { border-color: var(--or); }
.aid__ind[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.aid__model { margin-left: auto; color: var(--mute); font-size: .11rem; white-space: nowrap; }
.aid__main { display: grid; grid-template-columns: 6.2rem 1fr; height: clamp(4.6rem, calc(100vh - 2.4rem), 5.7rem); } /* 画面の高さに合わせて、デモ全体がスクロールなしで収まるように */

/* 左：kintone のアプリ画面（モデル） */
.kt { display: flex; flex-direction: column; min-width: 0; background: #eef1f3; }
.kt__bar { display: flex; align-items: center; gap: .14rem; height: .42rem; padding: 0 .18rem; background: #fff; border-bottom: .01rem solid #dfe4e7; }
.kt__logo { font-family: Montserrat, sans-serif; font-weight: 800; font-size: .15rem; letter-spacing: .01rem; color: #4a4a4a; }
.kt__crumb { overflow: hidden; color: #8b9399; font-size: .11rem; white-space: nowrap; text-overflow: ellipsis; }
.kt__apps { display: flex; gap: .04rem; padding: .12rem .18rem 0; overflow-x: auto; }
.kt__app { display: flex; align-items: center; gap: .06rem; padding: .07rem .12rem; border-radius: .06rem .06rem 0 0; background: #dde3e7; color: #5b656c !important; font-size: .12rem; white-space: nowrap; transition: background .2s; }
.kt__app[aria-selected="true"] { background: #fff; color: #222 !important; font-weight: 700; }
.kt__ic { flex: none; width: .16rem; height: .16rem; border-radius: .04rem; background: var(--or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4'%3E%3Crect x='5' y='5' width='14' height='14' rx='1'/%3E%3Cpath d='M5 10h14M10 10v9'/%3E%3C/svg%3E") center / 80% no-repeat; }
.kt__ic[data-app="1"], .aid-app[data-app="1"] { background-color: #3d4a54; }
.kt__ic[data-app="2"], .aid-app[data-app="2"] { background-color: #2f9e8f; }
.kt__ic[data-app="3"], .aid-app[data-app="3"] { background-color: #7a62c9; }
.kt__head { display: flex; align-items: center; gap: .1rem; padding: .16rem .18rem .12rem; background: #fff; }
.kt__head .kt__ic { width: .3rem; height: .3rem; border-radius: .06rem; }
.kt__name { font-size: .18rem; }
.kt__view { padding: .03rem .1rem; border: .01rem solid #d3d9dd; border-radius: .04rem; color: #555; font-size: .11rem; }
.kt__cnt { margin-left: auto; color: #8b9399; font-size: .11rem; }
.kt__plus { display: grid; place-items: center; width: .3rem; height: .3rem; border-radius: 50%; background: var(--kb); color: #fff; font-size: .2rem; line-height: 1; }
.kt__tblw { flex: 1; min-height: 0; overflow: auto; padding: 0 .18rem .18rem; background: #fff; }
.kt__tbl { width: 100%; border-collapse: collapse; font-size: .12rem; }
.kt__tbl th { position: sticky; top: 0; padding: .08rem .1rem; background: #f3f5f6; border-bottom: .01rem solid #dfe4e7; color: #6b747a; font-weight: 500; text-align: left; white-space: nowrap; }
.kt__tbl td { padding: .1rem .1rem; border-bottom: .01rem solid #edf0f2; white-space: nowrap; transition: background-color .25s, opacity .35s; }
.kt__doc { width: .2rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b0b6' stroke-width='2'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E") center / .14rem no-repeat; }
.kt__row.is-scan td { background-color: #fff3e8; }
.kt.is-hit .kt__row td { opacity: .38; }
.kt.is-hit .kt__row.is-hit td, .kt.is-hit .kt__row.is-up td { opacity: 1; animation: kt-hit .6s var(--d, 0s) both; }
.kt__row.is-hit td { background-color: var(--or-l); font-weight: 700; }
.kt__row.is-up td { background-color: #e8f6ef; font-weight: 700; }
.kt__tbl .kt__ai { color: var(--or); font-weight: 700; }
.kt__g { display: inline-grid; place-items: center; width: .24rem; height: .24rem; border-radius: .05rem; background: #eef1f3; color: #555; font-family: Montserrat, sans-serif; font-weight: 800; animation: aid-flip .6s calc(var(--d, 0s) + .2s) both; }
.kt__g.is-chg { background: var(--bad); color: #fff; }
.kt__row.is-up .kt__g.is-chg { background: var(--good); }

/* 右：AI チャット */
.ai { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; background: #faf8f7; }
.ai__h { display: flex; align-items: center; gap: .1rem; padding: .1rem .2rem; background: #fff; border-bottom: .01rem solid var(--line); }
.ai__ic { flex: none; width: .3rem; height: .3rem; 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 / 60% no-repeat, linear-gradient(135deg, #fd6a05, #ffb46b); }
.ai__h p { display: flex; flex-direction: column; }
.ai__h b { font-size: .15rem; }
.ai__h small { display: flex; align-items: center; gap: .05rem; color: var(--mute); font-size: .11rem; }
.ai__on { width: .07rem; height: .07rem; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 .03rem rgba(31, 157, 107, .2); }
.ai__log { position: relative; display: flex; flex-direction: column; gap: .08rem; min-height: 0; overflow-y: auto; padding: .1rem .2rem; scrollbar-width: thin; }
.ai-msg { font-size: .13rem; line-height: .21rem; animation: aid-pop .35s both; }
.ai-msg.is-me { align-self: flex-end; max-width: 85%; padding: .08rem .14rem; border-radius: .14rem .14rem .04rem .14rem; background: var(--ink); color: #fff; font-weight: 700; }
.ai-msg.is-ai { padding: .1rem .14rem; border-radius: .04rem .14rem .14rem .14rem; background: #fff; box-shadow: 0 .02rem .1rem rgba(53, 46, 46, .07); }
.ai-think__h { display: flex; align-items: center; gap: .07rem; color: var(--mute); font-weight: 700; font-size: .12rem; }
.ai-think.is-done .ai-think__h { flex-wrap: wrap; gap: .05rem; color: var(--ink); font-weight: 500; font-size: .11rem; }
.ai-dot { width: .08rem; height: .08rem; border-radius: 50%; background: var(--or); animation: aid-blink 1s infinite; }
.ai-dot.is-done { background: var(--good); animation: none; }
.ai-steps li { display: flex; align-items: center; gap: .07rem; margin-top: .07rem; font-size: .12rem; animation: aid-pop .3s both; }
.ai-steps b { font-family: Montserrat, sans-serif; }
.ai-ok { color: var(--good); font-style: normal; font-weight: 800; }
.aid-app { flex: none; padding: .01rem .07rem; border-radius: .04rem; background: var(--or); color: #fff; font-weight: 700; font-size: .1rem; line-height: .18rem; white-space: nowrap; }
.ai-ans__s { font-weight: 700; font-size: .14rem; line-height: .22rem; }
.aid-num { color: var(--or); font-family: Montserrat, sans-serif; font-size: 1.3em; font-feature-settings: "tnum"; }
.ai-ans__note { margin-top: .1rem; padding: .08rem .1rem; border-radius: .06rem; background: var(--or-l); font-size: .12rem; line-height: .2rem; }
.ai-ans__src { margin-top: .08rem; color: var(--mute); font-size: .1rem; }
.ai__qs { display: flex; gap: .08rem; }
.ai__q { display: flex; align-items: center; gap: .08rem; padding: .08rem .14rem .08rem .08rem; border: .01rem solid var(--line); border-radius: .3rem; white-space: nowrap; background: #fff; font-weight: 700; font-size: .13rem; text-align: left; transition: border-color .2s, background .2s; }
.ai__q:hover { border-color: var(--or); }
.ai__q.is-on { border-color: var(--or); background: var(--or-l); }
.aid-tag { flex: none; padding: .01rem .07rem; border-radius: .04rem; background: var(--ink); color: #fff; font-size: .1rem; line-height: .18rem; }

/* 回答のグラフィック（出るときに順に浮かぶ） */
.ai-ans .aid-card, .ai-ans .aid-bar, .ai-ans .aid-gauge, .ai-ans .aid-tbl tr, .ai-ans .aid-up, .ai-ans .ai-ans__note { opacity: 0; transform: translateY(.1rem); transition: opacity .45s var(--d, 0s), transform .45s var(--d, 0s); }
.ai-ans.is-in .aid-card, .ai-ans.is-in .aid-bar, .ai-ans.is-in .aid-gauge, .ai-ans.is-in .aid-tbl tr, .ai-ans.is-in .aid-up, .ai-ans.is-in .ai-ans__note { opacity: 1; transform: none; }
.aid-cards { display: grid; gap: .06rem; margin-top: .08rem; }
.aid-card { padding: .08rem .12rem; border: .01rem solid var(--line); border-radius: .08rem; background: #fff; }
.aid-card__h { display: flex; align-items: center; gap: .08rem; }
.aid-card__h > p { flex: 1; min-width: 0; }
.aid-card__h b { font-size: .14rem; }
.aid-card__h small { margin-left: .06rem; color: var(--mute); font-size: .11rem; }
.aid-card__f { display: flex; flex-wrap: wrap; align-items: center; gap: .06rem .08rem; margin-top: .06rem; }
.aid-pill { display: inline-block; padding: .01rem .08rem; border-radius: .2rem; background: #efeae6; font-weight: 700; font-size: .1rem; line-height: .18rem; white-space: nowrap; }
.aid-pill.is-bad { background: #fde8e8; color: var(--bad); }
.aid-next { font-weight: 700; font-size: .12rem; line-height: .18rem; }
.aid-next::before { content: "次の一手"; margin-right: .06rem; padding: .01rem .06rem; border-radius: .04rem; background: var(--or); color: #fff; font-size: .09rem; }
.aid-grade { display: inline-flex; align-items: center; gap: .05rem; font-family: Montserrat, sans-serif; font-weight: 800; }
.aid-grade > span { display: grid; place-items: center; width: .24rem; height: .24rem; border-radius: .05rem; font-size: .13rem; }
.aid-grade .aid-grade__from { background: #efeae6; color: var(--mute); }
.aid-grade .aid-grade__to { background: var(--bad); color: #fff; animation: aid-flip .6s calc(var(--d, 0s) + .5s) both; }
.aid-grade.is-up .aid-grade__to { background: var(--good); }
.aid-grade i { position: relative; width: .14rem; height: .02rem; background: var(--mute); }
.aid-grade i::after { content: ""; position: absolute; right: -.01rem; top: -.035rem; border: .045rem solid transparent; border-left-color: var(--mute); border-right: 0; }
.aid-tl { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: .06rem; }
.aid-tl li { position: relative; padding: .15rem .06rem 0 0; font-size: .11rem; line-height: .16rem; }
.aid-tl li::before { content: ""; position: absolute; left: 0; right: 0; top: .045rem; height: .015rem; background: var(--line); }
.aid-tl li::after { content: ""; position: absolute; left: 0; top: 0; width: .1rem; height: .1rem; border-radius: 50%; }
.aid-tl li.is-good::after { background: var(--good); }
.aid-tl li.is-warn::after { background: #f1b33b; }
.aid-tl li.is-bad::after { background: var(--bad); }
.aid-tl time { margin-right: .04rem; color: var(--mute); font-weight: 700; font-size: .1rem; }
.aid-up { display: flex; align-items: center; gap: .08rem; padding: .06rem .1rem; border-radius: .06rem; background: #e8f6ef; font-size: .11rem; }
.aid-up .aid-grade > span { width: .2rem; height: .2rem; font-size: .11rem; }
.aid-bars { display: grid; gap: .08rem; margin-top: .12rem; }
.aid-bar { display: grid; grid-template-columns: 1.6rem 1fr; align-items: center; gap: .08rem; }
.aid-bar__l { display: flex; flex-direction: column; font-size: .12rem; line-height: .16rem; }
.aid-bar__l small { color: var(--mute); font-size: .1rem; }
.aid-bar__t { display: flex; align-items: center; gap: .06rem; }
.aid-bar__trk { position: relative; flex: 1; height: .2rem; }
.aid-bar__v { display: block; height: 100%; width: 0; border-radius: 0 .05rem .05rem 0; background: #d9d2cd; transition: width .9s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0s) + .15s); }
.ai-ans.is-in .aid-bar__v { width: var(--w); }
.aid-bar.is-hit .aid-bar__v { background: var(--or); }
.aid-bar__trk i { position: absolute; top: -.04rem; bottom: -.04rem; width: 0; border-left: .015rem dashed var(--bad); }
.aid-bar:first-child .aid-bar__trk i::before { content: attr(data-label); position: absolute; bottom: 100%; left: .03rem; color: var(--bad); font-style: normal; font-weight: 700; font-size: .1rem; white-space: nowrap; }
.aid-bars { padding-top: .14rem; }
.aid-bar__t em { flex: none; width: .5rem; font-style: normal; font-weight: 700; font-size: .12rem; font-family: Montserrat, sans-serif; }
.aid-bar:not(.is-hit) { color: var(--mute); }
.aid-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: .08rem; margin-top: .1rem; }
.aid-gauge { display: flex; flex-direction: column; align-items: center; gap: .06rem; padding: .12rem .08rem; border: .01rem solid var(--line); border-radius: .08rem; background: #fff; text-align: center; }
@property --pp { syntax: "<number>"; inherits: false; initial-value: 0; }
.aid-gauge__ring { --pp: 0; display: grid; place-items: center; width: .8rem; height: .8rem; border-radius: 50%; background: conic-gradient(var(--or) calc(var(--pp) * 1%), #efeae6 0); transition: --pp 1.2s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0s) + .2s); }
.ai-ans.is-in .aid-gauge__ring { --pp: var(--p); }
.aid-gauge__ring b { display: grid; place-items: center; width: .62rem; height: .62rem; border-radius: 50%; background: #fff; }
.aid-gauge__ring .aid-num { color: var(--ink); font-size: .2rem; }
.aid-gauge__ring .aid-num::after { content: "%"; font-size: .1rem; }
.aid-gauge__n { display: flex; flex-direction: column; align-items: center; gap: .02rem; }
.aid-gauge__n b { font-size: .13rem; }
.aid-gauge__n small { color: var(--mute); font-size: .1rem; }
.aid-gauge__w { font-size: .1rem; line-height: .15rem; }
.aid-tbl { margin-top: .1rem; overflow-x: auto; }
.aid-tbl table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .12rem; }
.aid-tbl th, .aid-tbl td { padding: .07rem .08rem; border-bottom: .01rem solid var(--line); text-align: center; white-space: nowrap; }
.aid-tbl tbody th { color: var(--mute); font-weight: 700; font-size: .11rem; text-align: left; }
.aid-tbl thead th { position: relative; padding-top: .22rem; font-size: .13rem; }
.aid-tbl .is-best { background: var(--or-l); }
.aid-tbl thead .is-best { background: var(--or); color: #fff; border-radius: .06rem .06rem 0 0; }
.aid-best { position: absolute; top: .04rem; left: 50%; transform: translateX(-50%); padding: 0 .07rem; border-radius: .2rem; background: #fff; color: var(--or); font-size: .09rem; line-height: .15rem; }
.aid-mini { display: block; width: .7rem; height: .05rem; margin: 0 auto .04rem; border-radius: .03rem; background: linear-gradient(var(--or), var(--or)) 0 0 / var(--w) 100% no-repeat, #efeae6; }
.aid-join { display: grid; grid-template-columns: repeat(3, 1fr); gap: .06rem; margin-top: .08rem; }
.aid-join li { display: flex; flex-direction: column; align-items: flex-start; gap: .04rem; padding: .07rem .08rem; border-radius: .06rem; background: #f6f3f1; font-size: .11rem; line-height: .16rem; }

@keyframes aid-pop { from { opacity: 0; transform: translateY(.08rem); } }
@keyframes aid-blink { 50% { opacity: .25; } }
@keyframes aid-flip { 0% { transform: rotateX(90deg); opacity: 0; } 60% { transform: rotateX(-15deg); opacity: 1; } 100% { transform: none; } }
@keyframes kt-hit { 0% { filter: brightness(1.08); } 40% { filter: brightness(.94); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .aid *, .aid *::before, .aid *::after { animation: none !important; transition: none !important; }
  .ai-ans .aid-card, .ai-ans .aid-bar, .ai-ans .aid-gauge, .ai-ans .aid-tbl tr, .ai-ans .aid-up, .ai-ans .ai-ans__note { opacity: 1; transform: none; }
}