/* 2026-10-31 新しい切り絵を polls.jp に入れる（下書き kirie_draft.css を本番用にしたもの） */
/* パターン：A＝タイルで見せる／B＝人の場面で見せる／C＝全部入り */
html[data-kp="a"] .kb:not(.ka),html[data-kp="b"] .ka:not(.kb){display:none!important}

/* 切り替えの札（下書きの時だけ） */
.kpick{position:fixed;left:16px;bottom:16px;z-index:9999;display:flex;gap:4px;align-items:center;background:#1f2a44;color:#fff;border-radius:999px;padding:6px 8px 6px 14px;font:700 12px "M PLUS 1",sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.kpick button{border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:800 12px "M PLUS 1",sans-serif;padding:6px 12px;cursor:pointer;white-space:nowrap}
.kpick button.on{background:#fff;color:#1f2a44}
.kprop{display:inline-block;background:#FFE58A;color:#5a4300;font:700 11px "M PLUS 1",sans-serif;border-radius:6px;padding:2px 8px;white-space:nowrap}

/* 場面：人と物を重ねる箱 */
.ksc{position:relative;aspect-ratio:5/4}
.ksc img{position:absolute;display:block;pointer-events:none;height:auto}
.ksc .p{opacity:0;transform:translateY(18%);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.k-in .ksc .p{opacity:1;transform:none}
.k-in .ksc .p.d1{transition-delay:.15s}.k-in .ksc .p.d2{transition-delay:.3s}.k-in .ksc .p.d3{transition-delay:.45s}
.ksc .ksw{transform-origin:50% 0;animation:kSway 4s ease-in-out infinite}
.ksc .bb{animation:kBob 3.2s ease-in-out infinite}
@keyframes kSway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@keyframes kBob{0%,100%{translate:0 0}50%{translate:0 -4px}}

/* ENGINE：1人の1枚が描き足される */
#talk .sol-chatbox{position:relative}
.ktile4{position:absolute;right:-28px;top:-34px;width:128px;aspect-ratio:1;z-index:3;filter:drop-shadow(0 6px 10px rgba(60,40,10,.18));transform:rotate(4deg)}
.ktile4 img{position:absolute;inset:0;width:100%;opacity:0;transition:opacity .8s ease}
.ktile4 img.on{opacity:1}
.ktalk-b{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:560px;margin:26px auto 0}
.ktalk-b .st{position:relative;aspect-ratio:1;opacity:.25;transform:scale(.94);transition:opacity .6s,transform .6s}
.ktalk-b .st.on{opacity:1;transform:none}
.ktalk-b .st img{width:100%;display:block}
.ktalk-b .ar{display:none}

/* ポジショニング：1人＝1枚のタイル */
.kpos{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:end;max-width:820px;margin:26px auto 0}
.kpos .g{display:flex;flex-direction:column;align-items:center;gap:10px}
.kpos .nm{font:800 14px "M PLUS 1",sans-serif;color:var(--ink,#1f2a44);white-space:nowrap}
.kpos .nm.p{color:#0EA36E}
.kmos{display:grid;gap:4px;width:100%}
.kmos i{display:block;aspect-ratio:1;background-size:cover;background-position:center;opacity:0;transform:translateY(-10px) scale(.7);transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1)}
.k-in .kmos i{opacity:1;transform:none}
.kpos .one{width:120px}
.kpos .one img{width:100%;display:block}

/* 流れ：好きな時間と場所で答える（朝・電車・夜） */
.kwhen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin:28px auto 0}
.kwhen .ksc{aspect-ratio:5/4}

/* 活用領域：聞く相手の人が入れ替わる */
.kstage{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 6px}
.kstage .ksc{aspect-ratio:1/1}

/* 知見を組織に残す：タイルが降りて積もる */
.kgather{max-width:620px;margin:30px auto 0;grid-template-columns:repeat(14,1fr)}

/* 導入事例：カードの絵（差し替え案） */
html[data-kp] #cases .case::after{display:none}
#cases .case .kcart{position:absolute;left:0;right:0;bottom:0;height:56%;z-index:1;pointer-events:none;transition:transform .6s cubic-bezier(.22,1,.36,1)}
#cases .case:hover .kcart{transform:translateY(-8px) scale(1.03)}
#cases .case .kcart.ka img{position:absolute;left:50%;bottom:10px;width:46%;max-width:150px;transform:translateX(-50%) rotate(-3deg)}
#cases .case .kcart.kb .ksc{position:absolute;left:8%;right:8%;bottom:0;aspect-ratio:auto;height:100%}
.kcase-note{text-align:center;margin:12px 0 0}

/* 冒頭の鳥・締めの葉（差し替え案） */
.khero-birds{position:absolute;pointer-events:none}

@media (max-width:900px){
  .ktile4{width:92px;right:-6px;top:-30px}
  .kpos{grid-template-columns:1fr;gap:18px}
  .kwhen{grid-template-columns:1fr;max-width:340px}
  .kstage{grid-template-columns:repeat(2,1fr)}
  .kgather{grid-template-columns:repeat(10,1fr)}
  .ktalk-b{gap:8px}
}
@media (prefers-reduced-motion:reduce){.ksc .p,.kmos i{transition:none;opacity:1;transform:none}.ksc .ksw,.ksc .bb{animation:none}}
.kmos.k-in i{opacity:1;transform:none}
html[data-kp="c"] #cases .kcart.ka{display:none}
@media (max-width:900px){.kpos .kmos{max-width:240px}.kpos .one{width:96px}.kgather{max-width:320px}}
/* 2026-10-31 jota：会話は日焼けの話・タイルは会話の横（吹き出しにかぶせない） */
#talk .ktile4{position:relative;right:auto;top:auto;width:150px;margin:0 auto 16px;transform:rotate(3deg)}
html[data-kp="c"] .ktalk-b{display:none!important}
@media (max-width:900px){#talk .ktile4{width:120px;margin:16px auto}}
/* 2026-10-31 jota「切り絵をグラフの中に入れたほうが良い。レイアウトに気をつけろ」 */
html:not([data-kp="b"]) #positioning .matrix .emoji{display:none}
#positioning .kcell{margin:0 auto 18px}
#positioning .kone{width:min(132px,38%)}
#positioning .kone img,#positioning .kblank img{width:100%;display:block}
#positioning .kone img{transform:rotate(-3deg);filter:drop-shadow(0 6px 10px rgba(30,60,140,.16))}
#positioning .kplain{width:min(264px,70%);gap:6px}
#positioning .krich{width:min(380px,84%);gap:6px;margin:18px auto 22px}
#positioning .kblank{width:min(96px,30%);opacity:.55;margin-bottom:12px}
#positioning .cell-polls img[alt="POLLS Logo"]{max-height:96px;width:auto}
#positioning .cell-gray{flex-direction:column}
@media (max-width:900px){#positioning .kone{width:84px}#positioning .kplain{width:180px;gap:4px}#positioning .krich{width:220px;gap:4px;margin:10px auto 14px}#positioning .kblank{width:64px}}
#positioning .krich{width:min(400px,92%);gap:5px;margin:12px auto 16px}
#positioning .cell-polls img[alt="POLLS Logo"]{max-height:76px;margin-bottom:4px}
@media (max-width:900px){
  #positioning .matrix-cell,#positioning .cell-polls,#positioning .cell-gray{min-width:0}
  #positioning .kone{width:56%}#positioning .kblank{width:40%}
  #positioning .kplain{width:92%;gap:3px}#positioning .krich{width:94%;gap:3px;margin:6px auto 8px}
  #positioning .cell-polls img[alt="POLLS Logo"]{max-height:40px}
}
@media (max-width:900px){#positioning .kmos{grid-template-columns:repeat(3,1fr)!important;width:80%!important;gap:4px!important}#positioning .kmos i:nth-child(n+7){display:none}}
/* 2026-10-31 jota「絵が近すぎる・人間が同じ方向を見すぎ・いつでも・どこでも回答できる にしろ」 */
.ksc img.f{scale:-1 1}
.kwhen-t{text-align:center;font:800 clamp(22px,3vw,30px)/1.4 "M PLUS 1",sans-serif;color:var(--ink,#1f2a44);margin:56px 0 0;white-space:nowrap}
.kwhen{max-width:1040px;gap:clamp(40px,7vw,96px);margin-top:28px}
.kwhen .ksc{width:86%;justify-self:center}
@media (max-width:900px){.kwhen{gap:36px;max-width:300px}.kwhen-t{margin-top:40px}}
/* 2026-10-31 jota：フロントの人はお辞儀をくり返す */
.ksc .bow{transform-origin:50% 100%;animation:kBow 4.5s ease-in-out infinite}
@keyframes kBow{0%,35%{rotate:0deg}50%,68%{rotate:8deg}85%,100%{rotate:0deg}}
/* 2026-10-31 jota「タイルの群れは花瓶の右に・大きさのバランス」 */
.kvase-row{display:flex;align-items:flex-end;gap:clamp(24px,4vw,56px);margin:10px 0 -42px 3%}
.kvase-row .art-beat.vase{margin:0!important;flex:0 0 auto;width:min(240px,30%)}
.kvase-row .kgather{margin:0 0 54px;flex:0 1 auto;width:min(460px,52%);max-width:none;grid-template-columns:repeat(12,1fr)!important}
@media (max-width:900px){.kvase-row{margin:18px 0 -20px}.kvase-row .art-beat.vase{width:38%}.kvase-row .kgather{width:56%;margin-bottom:24px;grid-template-columns:repeat(8,1fr)!important}.kvase-row .kgather i:nth-child(n+33){display:none}}
/* 2026-10-31 jota「活用領域の場面が大きすぎ・もう少し小さく・間を少し空けて」 */
.kstage{gap:clamp(18px,3vw,40px);padding:0 3%;margin:22px 0 10px}
.kstage .ksc{width:80%;justify-self:center}
.kvase-row .kgather{margin-bottom:46px}
/* 2026-10-31 jota「ふきだしのベクターが繋がっていない」：半透明の地で、しっぽの付け根に枠の線が透けていた（本番も同じ）。地を不透明の同じ色にして、しっぽで線を隠す */
#split .side.hr .chips span{background:#2d333e;border-color:#506387}
#split .side.mk .chips span{background:#3b2e2f;border-color:#845050}
#split .chips span::after{bottom:-5px}
/* 2026-10-31 jota「返るもの いらない」 */
#split .ret .k{display:none}
.kvase-row{align-items:flex-end}.kvase-row .kgather{margin-top:0!important}
/* 2026-10-31 jota「真ん中左右反転」：電車の場面は丸ごと反転 */
.ksc.kflip{scale:-1 1}
/* 顧客側は3場面：大きさは従業員側の4場面とそろえる */
.kstage.k3{grid-template-columns:repeat(3,1fr);padding:0 13%}
@media (max-width:900px){.kstage.k3{grid-template-columns:repeat(2,1fr);padding:0}}
/* 2026-10-31 jota（スマホだけ）「POLLSは白背景に」「挿絵が大きすぎ・小さくなってもいいから横に並列に」 */
@media (max-width:900px){
  #positioning .pn-green{background:#fff}
  .kwhen{grid-template-columns:repeat(3,1fr);max-width:none;gap:12px;margin-top:18px}
  .kwhen .ksc{width:100%}
  .kwhen-t{font-size:20px;margin-top:36px}
}
/* 2026-10-31 jota（スマホだけ）冒頭の絵：太陽は左上・下半分だけ見える（ヘッダーの裏に隠れてよい）／山は少し大きく／鳥は少し上の空に／人はもっと大きく */
@media (max-width:860px){
  #hero .scene .sun{left:-10%;top:-30%;width:42%}
  #hero .scene .hills{width:72%;left:22%;top:3%}
  #hero .scene .birds{width:24%;left:44%;top:-16%}
  #hero .scene .person{width:21%;left:10%}
}
@media (max-width:860px){#hero .scene .birds{top:-9%}#hero .scene .person{width:30%;left:6%}}