/* 台本（話してチェック）— しゃべっちゃいな 2026-10-18
   見た目はトップ・場面選びと同じ（白基調・明朝の見出し・角8px・緑）。PCは「会話」と「あなたの番」を左右に、スマホは縦に。 */
:root{
  --g:#3f7d5e; --g2:#2f6248; --gl:#eef5f0; --ink:#2a2f2c; --mut:#6a716a; --line:#e6e9e6; --bg:#f6f8f6; --card:#fff;
  --ok:#25985a; --bad:#d64545; --miss:#a3aaa5; --gold:#d9a21b; --serif:'Noto Serif SC','Noto Serif JP',serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:linear-gradient(180deg,#f6f8f6,#eff3f1);min-height:100vh;color:var(--ink);font-family:"M PLUS Rounded 1c","Noto Sans JP","Noto Sans SC",sans-serif;-webkit-text-size-adjust:100%}
#ckApp{max-width:1040px;margin:0 auto;padding:0 24px 70px}
.zh{font-family:"Noto Sans SC","Noto Sans JP",sans-serif;font-size:19px;line-height:1.65;letter-spacing:.02em}
.zh.big{font-size:30px;line-height:1.6}
.py{font-family:"Noto Sans",sans-serif;color:#4d6b5b;font-size:14px;line-height:1.5}
.ja{color:var(--mut);font-size:13.5px;line-height:1.6}

/* 上の帯（トップと同じ） */
.ck-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 2px 14px;flex-wrap:wrap}
.ck-brand{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:1px;color:var(--ink)}
.ck-brand small{display:block;font-family:"M PLUS Rounded 1c",sans-serif;font-weight:500;font-size:11px;color:#9aa39c;letter-spacing:.5px}
.ck-top-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ck-gen{font-size:11px;color:var(--mut);background:#fff;border:1px solid var(--line);padding:4px 9px;border-radius:99px}
.ck-gen:empty{display:none}
.ck-snd{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:99px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer}
.ck-snd:hover{background:var(--gl)}
.ck-backbtn{background:#fff;border:1px solid #e3e6e3;border-radius:6px;padding:9px 15px;font-size:13px;font-weight:700;color:#52585f;text-decoration:none}
.ck-backbtn:hover{background:#f3f6f4}

/* 場面の見出し */
.ck-scene{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid #ececec;border-radius:8px;padding:14px 16px;flex-wrap:wrap}
.ck-thumb{flex:0 0 auto;width:120px;aspect-ratio:2/1;border-radius:6px;background:#f2f2ee center/cover no-repeat;display:grid;place-items:center;font-size:30px}
.ck-scene-t{flex:1;min-width:180px}
.ck-scene-sub{font-size:12px;color:#9aa39c}
.ck-scene-t h1{margin:2px 0 0;font-family:var(--serif);font-size:22px;letter-spacing:1px}
.ck-scene-t p{margin:3px 0 0;font-size:12.5px;color:var(--mut)}
.ck-rolebox{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.ck-rolebox>span{font-size:11.5px;color:var(--mut)}
.ck-seg{display:flex;background:#f2f4f2;border-radius:99px;padding:3px}
.ck-role{border:0;background:none;border-radius:99px;padding:8px 14px;font:inherit;font-size:13.5px;font-weight:700;color:var(--mut);cursor:pointer}
.ck-role.on{background:var(--g);color:#fff;box-shadow:0 2px 6px rgba(47,98,72,.25)}

/* STEP（番号つきの横並び・クリアで✦） */
.ck-steps{display:flex;align-items:stretch;margin:16px 0 18px;background:#fff;border:1px solid #ececec;border-radius:8px;overflow-x:auto;scrollbar-width:none}
.ck-steps::-webkit-scrollbar{display:none}
.ck-st-i{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-right:1px solid #f0f0f0;background:none;padding:12px 14px;font:inherit;color:var(--mut);cursor:pointer;white-space:nowrap}
.ck-st-i:last-child{border-right:0}
.ck-st-i:hover{background:#fafbfa}
.ck-st-n{width:24px;height:24px;border-radius:50%;border:1.5px solid #cdd5cf;display:grid;place-items:center;font-size:12px;font-weight:700}
.ck-st-t{font-size:13.5px;font-weight:700}
.ck-clr{font-style:normal;font-size:16px;color:#cfd5d1;line-height:1}
.ck-clr.on{color:var(--gold);text-shadow:0 0 8px rgba(217,162,27,.45)}
.ck-st-i.on{background:var(--gl);color:var(--g2);box-shadow:inset 0 -3px 0 var(--g)}
.ck-st-i.on .ck-st-n{background:var(--g);border-color:var(--g);color:#fff}

.ck-card{background:var(--card);border:1px solid #ececec;border-radius:8px;padding:20px 22px;box-shadow:0 1px 0 #f0f0f0}
.ck-step{font-size:12px;font-weight:800;color:var(--g);letter-spacing:.06em}
.ck-note{font-size:13.5px;color:var(--mut);line-height:1.8}
.ck-row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:14px;flex-wrap:wrap}
.ck-btn{appearance:none;border:0;background:var(--g);color:#fff;border-radius:6px;padding:12px 20px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.ck-btn:hover{background:var(--g2)}
.ck-btn.sub{background:#fff;color:var(--g2);border:1px solid #c9d8ce}
.ck-btn.sub:hover{background:var(--gl)}
.ck-btn.go{background:#c96a22}
.ck-btn.go:hover{background:#b05a1a}
.ck-link{border:0;background:none;color:var(--mut);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}

/* はじめに */
.ck-intro{}
.ck-intro h2{margin:6px 0 4px;font-family:var(--serif);font-size:21px;letter-spacing:1px}
.ck-items{list-style:none;margin:12px 0 0;padding:0}
.ck-items li{display:flex;gap:14px;align-items:flex-start;padding:12px 4px;border-top:1px dashed var(--line)}
.ck-items li:first-child{border-top:0}
.ck-say{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid #c9d8ce;background:var(--gl);cursor:pointer;font-size:16px}
.ck-how{margin-top:16px;background:#fafaf8;border:1px solid #eee;border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.9;color:#4a524c}

/* 色分け */
.ck-c{position:relative;display:inline-block;border-radius:4px;padding:0 1px}
.ck-c.ok{color:var(--ok)}
.ck-c.bad{color:var(--bad);background:#fdeaea}
.ck-c.miss{color:var(--miss);text-decoration:underline dotted;text-underline-offset:4px}
.ck-c.opt{color:#b9c2bc}
.ck-how .ck-c{font-weight:700}

/* STEP の画面：左＝会話・右＝あなたの番 */
.ck-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
.ck-col-turn{position:sticky;top:14px}
.ck-stagehead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:12px}
.ck-stagehead h2{margin:0;font-family:var(--serif);font-size:18px;letter-spacing:1px}
.ck-sub{font-size:12.5px;color:var(--mut)}
.ck-dots{margin-left:auto;display:flex;gap:5px}
.ck-dots i{width:11px;height:11px;border-radius:50%;background:#dfe6e1;display:inline-block}
.ck-dots i.d-now{background:#fff;border:2px solid var(--g)}
.ck-dots i.d-great,.ck-dots i.d-good{background:var(--ok)}
.ck-dots i.d-bad{background:var(--bad)}
.ck-ticket{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;background:#fffaf1;border:1px dashed #e3b979;border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:14px}
.ck-ticket b{color:#a0631c}
.ck-ticket span{background:#fff;border:1px solid #efd3a8;border-radius:6px;padding:3px 9px;font-weight:700}
.ck-ticket small{width:100%;color:#a07a4a;font-size:11.5px}
.ck-menu table{width:100%;border-collapse:collapse;margin:2px 0 0;font-size:13.5px;background:#fff}
.ck-menu th,.ck-menu td{border:1px solid #efd3a8;padding:5px 8px;text-align:center}
.ck-menu th{background:#fff4e2;color:#a0631c;font-size:12px}
.ck-menu td:first-child{text-align:left;font-weight:700}
.ck-menu td small{display:block;font-weight:400;color:#a07a4a;font-family:"Noto Sans SC",sans-serif;font-size:11px}

.ck-chatbox{min-height:220px}
.ck-chat{display:flex;flex-direction:column;gap:12px}
.ck-empty{color:#a3aaa5;font-size:13px;text-align:center;padding:30px 0}
.ck-msg{display:flex;gap:9px;align-items:flex-end}
.ck-msg.you{justify-content:flex-end}
.ck-av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#f4f6f4;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:20px}
.ck-bub{max-width:86%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 13px}
.ck-msg.them .ck-bub{border-bottom-left-radius:3px}
.ck-msg.you .ck-bub{background:var(--gl);border-color:#d3e5d9;border-bottom-right-radius:3px}
.ck-msg.you .ck-bub.v-bad{background:#fff4f4;border-color:#f3cfcf}
.ck-who{font-size:11.5px;font-weight:700;color:var(--mut);margin-bottom:2px;display:flex;align-items:center;gap:6px}
.ck-vmk{font-size:14px;color:var(--ok)}
.v-bad .ck-vmk{color:var(--bad)}
.ck-mini{border:0;background:none;cursor:pointer;font-size:13px;padding:0 2px}

/* あなたの番 */
.ck-turn{border-top:3px solid var(--g)}
.ck-turn.v-great,.ck-turn.v-good{border-top-color:var(--ok);background:#fbfefc}
.ck-turn.v-bad{border-top-color:var(--bad);background:#fffafa}
.ck-turn-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--g2);margin-bottom:6px}
.ck-turn-h span{background:var(--gl);border-radius:99px;padding:2px 9px;font-weight:700}
.ck-turn-h small{margin-left:auto;color:var(--mut);font-weight:500}
.ck-wait{text-align:center;color:var(--mut);font-size:14px;padding:26px 0}
.ck-wait b{display:block;font-size:26px;margin-bottom:6px}
.ck-hide{color:#b3bcb6;font-size:17px;font-family:"M PLUS Rounded 1c",sans-serif}
.ck-result{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.ck-verdict{font-size:17px;font-weight:800;color:var(--ok);display:flex;align-items:center;gap:8px}
.ck-verdict b{font-size:30px;line-height:1}
.ck-verdict small{font-weight:500;color:var(--mut);font-size:12px}
.v-bad .ck-verdict{color:var(--bad)}
.ck-keymiss{margin-top:4px;font-size:13px;font-weight:700;color:var(--bad)}
.ck-heard{font-size:12.5px;color:var(--mut);margin-top:4px;line-height:1.6}
.ck-alt{color:var(--ok)}
.ck-msgline{margin-top:10px;background:#fff6e5;border:1px solid #f1d9a6;color:#7a5a1a;border-radius:8px;padding:8px 10px;font-size:13px;line-height:1.6}
.ck-micbox{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}
.ck-mic{width:84px;height:84px;border-radius:50%;border:0;background:linear-gradient(180deg,#e07a2e,#c9601b);color:#fff;font-size:34px;cursor:pointer;box-shadow:0 6px 18px rgba(200,96,27,.35);transition:transform .1s}
.ck-mic:active{transform:scale(.96)}
.ck-mic.on{background:linear-gradient(180deg,#d64545,#b02f2f);animation:ckPulse 1.1s infinite}
@keyframes ckPulse{0%{box-shadow:0 0 0 0 rgba(214,69,69,.45)}100%{box-shadow:0 0 0 20px rgba(214,69,69,0)}}
.ck-live{font-size:13.5px;color:var(--mut);min-height:22px;text-align:center;font-family:"Noto Sans SC","M PLUS Rounded 1c",sans-serif}
.ck-actions{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-top:14px}
.ck-actions .ck-btn{flex:1}
.ck-type{margin-top:12px;font-size:12.5px;color:var(--mut)}
.ck-type summary{cursor:pointer}
.ck-type input{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:10px 11px;font:inherit;font-size:16px}

/* おわり */
.ck-done{text-align:center}
.ck-clear{font-size:46px;line-height:1.1;margin:8px 0 2px;color:#d3d8d4}
.ck-clear.on{color:var(--gold);text-shadow:0 0 18px rgba(217,162,27,.45)}
.ck-clear-t{font-family:var(--serif);font-size:20px;font-weight:700;margin:2px 0 4px}
.ck-score{margin:0 0 12px;color:var(--mut)}
.ck-list{list-style:none;margin:0;padding:0;text-align:left}
.ck-list li{display:flex;gap:10px;align-items:flex-start;padding:10px 4px;border-top:1px dashed var(--line)}
.ck-list li>b{flex:0 0 22px;font-size:18px;color:var(--ok);text-align:center}
.ck-list li.v-bad>b{color:var(--bad)}
.ck-list .zh{font-size:18px}
.ck-done .ck-row{justify-content:center}
.ck-done .ck-note{text-align:left}
/* 2026-10-21 本人「コース・もう一度・次へ が一番下で、スクロールしないと出てこない」「フッターに寄せて見やすく」
   → おわりの画面のボタンは、カードの下いっぱいの白い帯（フッター）にして画面の下に貼りつける */
   2026-10-22 本人「もどる・オレンジのボタン、ここにかぎらずずっと下に出ておいてほしい。毎回スクロールして探すのがしんどい」
   → おわりだけでなく、説明（kintro）・会話の前（intro）・アバタートークの前（vbrief）の下のボタン列（.ck-row.ck-act）と、
     練習中の道具の列（お手本・オート・とばす/次へ＝.ck-turn .ck-tools）も同じ白い帯にして画面の下に貼りつける */
.ck-done,.ck-kintro,.ck-intro{padding-bottom:0}
.ck-card .ck-row.ck-act{position:sticky;bottom:0;z-index:5;margin:16px -22px 0;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);
  border-radius:0 0 8px 8px;box-shadow:0 -8px 18px rgba(0,0,0,.07);justify-content:flex-start;gap:10px;flex-wrap:nowrap}
.ck-card .ck-row.ck-act .ck-btn{padding:12px 18px;white-space:nowrap}
.ck-card .ck-row.ck-act .ck-btn.go{margin-left:auto;padding:12px 24px;font-size:15px}   /* 次へ＝右端に大きく */
.ck-vbrief .ck-row.ck-act{margin-left:0}   /* アバタートークの前＝右の列の中なので、左のアバターの列にはみ出さない */
.ck-turn .ck-tools{position:sticky;bottom:0;z-index:5;margin:14px -18px 0;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;box-shadow:0 -8px 18px rgba(0,0,0,.06)}
.ck-turn .ck-type{position:relative;z-index:1}
body.ck-has-mini .ck-card .ck-row.ck-act{padding-right:108px}   /* スマホ: 右下の过过に重ならない */
@media (max-width:640px){
  .ck-done .ck-row.ck-act{display:grid;grid-template-columns:1fr 1fr;gap:8px}   /* おわり＝3つ（コース・もう一度・次へ）は2段に */
  .ck-done .ck-row.ck-act .ck-btn.go{grid-column:1/-1;margin-left:0}
  .ck-card .ck-row.ck-act{padding-left:12px;padding-right:12px}
  .ck-vbrief .ck-row.ck-act{margin-left:-22px}
  .ck-card .ck-row.ck-act .ck-btn{padding:12px 14px}
  .ck-card .ck-row.ck-act .ck-btn.go{padding:12px 18px}
  body.ck-has-mini .ck-card .ck-row.ck-act,body.ck-has-mini .ck-turn .ck-tools{padding-right:96px}
}

/* 判子（2026-10-21 本人「TODO中国語のスタンプみたいなレトロなスタンプ」「中国語だとどうなるか」「イラストが中に入っているほうが」）
   ＝朱肉色・丸い二重の輪・上の弧に 说得真棒・真ん中にパンダ・帯に大きく 过关（クリア）・下に日付。少し傾く・かすれ（mask）・multiply。図柄は check_app.js の stampSvg */
.ck-sealbox{position:relative;display:block;margin:4px auto 2px}
.ck-sealbox:has(.ck-stamp){height:170px}   /* 判子のぶんの高さ（✦ は判子の左上に小さく） */
.ck-sealbox:has(.ck-stamp) .ck-clear{position:absolute;left:50%;margin-left:-124px;top:10px;font-size:30px}
.ck-stamp{--sc:#c9463b;position:absolute;display:block;color:var(--sc);font-family:var(--serif);line-height:0;transform:rotate(-10deg);pointer-events:none;mix-blend-mode:multiply;opacity:.93;
  -webkit-mask-image:radial-gradient(circle at 32% 38%,#000 50%,rgba(0,0,0,.84) 66%,#000 80%,rgba(0,0,0,.9) 100%);mask-image:radial-gradient(circle at 32% 38%,#000 50%,rgba(0,0,0,.84) 66%,#000 80%,rgba(0,0,0,.9) 100%)}
.ck-stamp-svg{display:block;width:100%;height:100%;font-family:var(--serif)}
.ck-stamp.big{left:50%;top:0;margin-left:-82px;width:164px;height:164px}
.ck-stamp.pop{animation:ckstamp .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes ckstamp{from{transform:rotate(-10deg) scale(1.9);opacity:0}to{transform:rotate(-10deg) scale(1);opacity:.93}}
.ck-fs .ck-stamp.sm{top:auto;bottom:70px;right:10px;width:92px;height:92px;z-index:1}   /* カードの空いている下側（説明文に重ねない） */
@media (prefers-reduced-motion:reduce){.ck-stamp.pop{animation:none}}
@media (max-width:860px){   /* スマホ: カードが低いので、判子は右上に小さく・文はその左で折り返す */
  .ck-fs .ck-stamp.sm{top:52px;bottom:auto;right:8px;width:72px;height:72px}
  .ck-fs.done .ck-fs-name,.ck-fs.done .ck-fs-sub{padding-right:84px}
}
/* 🐛 2026-10-22 本人のスマホのスクショ「会話の画面が左右2列のまま縮む」: ここに余分な行と閉じかっこ } が残っていて、
   すぐ下の @media（スマホは1列）が丸ごと無視されていた → 余分な2行を消した */

@media (max-width:860px){
  .ck-stage{grid-template-columns:1fr}
  .ck-col-turn{position:static}
}
@media (max-width:560px){
  #ckApp{padding:0 14px 60px}
  .ck-scene{gap:12px}
  .ck-thumb{width:84px}
  .ck-scene-t h1{font-size:19px}
  .ck-rolebox{align-items:flex-start;width:100%}
  .ck-st-i{padding:10px 10px;gap:6px}
  .ck-st-t{font-size:12.5px}
  .ck-st-i:not(.on) .ck-st-t{display:none}   /* スマホ: 選んでいない STEP は番号と✦だけ＝1列に収める */
  .zh.big{font-size:25px}
  .ck-mic{width:74px;height:74px;font-size:30px}
}

/* ---- 全幅のときの並べ方（PC は2列で見やすく） ---- */
@media (min-width:861px){
  .ck-intro .ck-items{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .ck-intro .ck-items li:nth-child(2){border-top:0}
  .ck-done .ck-list{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .ck-done .ck-list li:nth-child(2){border-top:0}
}


/* ---- ことば・フレーズの一覧（左） ---- */
.ck-dlist{list-style:none;margin:0;padding:0}
.ck-dlist li{display:flex;align-items:center;gap:10px;padding:8px 6px;border-top:1px dashed var(--line);border-radius:6px}
.ck-dlist li:first-child{border-top:0}
.ck-dlist li>b{flex:0 0 20px;text-align:center;color:#b9c2bc;font-size:15px}
.ck-dlist li.now{background:var(--gl)}
.ck-dlist li.now>b{color:var(--g)}
.ck-dlist li.v-great>b,.ck-dlist li.v-good>b{color:var(--ok)}
.ck-dlist li.v-bad>b{color:var(--bad)}
.ck-dlist .zh{font-size:18px;min-width:5em}
.ck-dlist .ja{flex:1}
.ck-dl-em{font-size:20px}
.ck-dlist li.ck-dl-h{display:block;border-top:0;padding:10px 6px 2px;font-size:12px;font-weight:800;color:var(--g2);letter-spacing:.04em}
.ck-count{margin-left:auto;font-size:13px;font-weight:700;color:var(--g2)}
.ck-emoji{font-size:44px;line-height:1.1;margin:2px 0 4px}

/* ---- 台本会話のレベル ---- */
.ck-lv{display:flex;gap:6px;margin:-2px 0 12px;flex-wrap:wrap}
.ck-lv-b{border:1px solid #d6e0d9;background:#fff;border-radius:99px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:700;color:var(--mut);cursor:pointer;display:flex;align-items:center;gap:5px}
.ck-lv-b.on{background:var(--g);border-color:var(--g);color:#fff}
.ck-lv-b.on .ck-clr{color:#cfe8d8}
.ck-lv-b.on .ck-clr.on{color:#ffd76a}


/* ---- 並び：単語・文・〔会話 1〜4〕・アバタートーク（2026-10-18 本人「単語→文→会話（会話は前と同じ）」・10-19 AIトーク→アバタートーク） ---- */
.ck-st-g{display:flex;align-items:stretch;flex:4 0 auto;background:#fafbfa;border-right:1px solid #f0f0f0;border-left:1px solid #f0f0f0}
.ck-st-gl{display:flex;align-items:center;padding:0 12px;font-size:12.5px;font-weight:800;color:var(--g2);background:var(--gl);white-space:nowrap}   /* 横書き（縦書きは崩れる＝本人指摘） */
.ck-st-g .ck-st-i:last-child{border-right:0}
.ck-st-i.nonum{flex:0 0 auto;padding:12px 16px}
@media (max-width:560px){
  .ck-st-i.nonum .ck-st-t{display:inline}
  .ck-st-i.nonum{padding:10px 10px}
  .ck-st-gl{padding:0 7px;font-size:11.5px}
}

/* ---- コース＝左から右へ4枚のカード（2026-10-19 本人「配置がわかりにくい」） ---- */
.ck-path-h h2{margin:0 0 4px;font-family:var(--serif);font-size:21px;letter-spacing:1px}
.ck-path-h .ck-note{margin:0 0 14px}
.ck-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.ck-fs{position:relative;display:flex;flex-direction:column;background:#fafbfa;border:1px solid #e6ebe7;border-radius:10px;padding:14px 14px 14px}
.ck-fs:not(:last-child)::after{content:"›";position:absolute;right:-21px;top:50%;transform:translateY(-50%);font-size:30px;line-height:1;color:#b9c7bd;font-weight:700}
.ck-fs.next{background:#fff;border:2px solid var(--g);box-shadow:0 4px 14px rgba(63,125,94,.14);padding:13px}
.ck-fs.done{background:#fffcf3;border-color:#efe0b6}
.ck-fs-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.ck-fs-n{width:30px;height:30px;border-radius:50%;background:#e3e9e5;color:#4a524c;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:16px}
.ck-fs.next .ck-fs-n{background:var(--g);color:#fff}
.ck-fs.done .ck-fs-n{background:#f6e4b0;color:#8a5a12}
.ck-fs-st{font-size:11.5px;font-weight:700;color:#a3aaa5}
.ck-fs-st.on{color:#b8860b}
.ck-fs-st.nx{background:var(--g);color:#fff;border-radius:99px;padding:2px 9px}
.ck-fs-name{font-family:var(--serif);font-size:18px;letter-spacing:1px;color:var(--ink)}
.ck-fs-sub{margin:4px 0 10px;font-size:12.5px;line-height:1.65;color:var(--mut);flex:1}
.ck-fs-chips{display:flex;flex-direction:column;gap:5px;margin:-2px 0 10px}
.ck-chip{display:flex;align-items:center;gap:6px;border:1px solid #dfe7e1;background:#fff;border-radius:6px;padding:5px 8px;font:inherit;font-size:12.5px;font-weight:700;color:#4a524c;cursor:pointer;text-align:left}
.ck-chip span{width:18px;height:18px;border-radius:50%;border:1.5px solid #cdd5cf;display:grid;place-items:center;font-size:10.5px;flex:0 0 auto}
.ck-chip .ck-clr{margin-left:auto;font-size:14px}
.ck-chip:hover{background:var(--gl)}
.ck-chip.nx{border-color:var(--g);background:var(--gl)}
.ck-chip.nx span{background:var(--g);border-color:var(--g);color:#fff}
.ck-fs-go{width:100%;padding:10px 12px;font-size:13.5px}

/* ---- やりかた（3つの手順＋印の意味） ---- */
.ck-howto{margin-top:16px}
.ck-howto h3{margin:0 0 12px;font-family:var(--serif);font-size:17px;letter-spacing:1px}
.ck-how3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ck-how3 li{display:flex;gap:11px;align-items:flex-start;background:#fafbfa;border:1px solid #eef1ee;border-radius:8px;padding:12px}
.ck-how-ic{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--gl);display:grid;place-items:center;font-size:19px;color:var(--g2);font-weight:800}
.ck-how3 b{display:block;font-size:14.5px;margin-bottom:2px}
.ck-how3 p{margin:0;font-size:12.5px;line-height:1.65;color:var(--mut)}
.ck-how-sample{margin:6px 0 4px;font-size:22px;line-height:1.5}
.ck-how-sample .ck-c{font-weight:700}
.ck-how-leg{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:#4a524c}
.ck-how-leg span{display:inline-flex;align-items:center;gap:4px}
.ck-how-leg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.ck-how-leg i.ok{background:var(--ok)} .ck-how-leg i.bad{background:var(--bad)} .ck-how-leg i.miss{background:var(--miss)}
.ck-how-marks{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;padding:10px 12px;border-radius:8px;background:#fff;border:1px dashed var(--line);font-size:13px;color:#4a524c}
.ck-how-marks span{display:inline-flex;align-items:center;gap:5px}
.ck-how-marks b{font-size:17px;line-height:1}
.ck-how-marks b.ok{color:var(--ok)} .ck-how-marks b.bad{color:var(--bad)} .ck-how-marks b.gold{color:var(--gold)}
.ck-how-foot{margin:10px 0 0;font-size:12px;color:#8a918a;line-height:1.7}

@media (max-width:860px){
  .ck-flow{grid-template-columns:1fr;gap:18px}
  .ck-fs:not(:last-child)::after{content:"⌄";right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%);font-size:22px}
  .ck-fs-chips{display:grid;grid-template-columns:1fr 1fr}
  .ck-how3{grid-template-columns:1fr}
}

/* ---- 会話の相手（アバター）の枠 ---- */
.ck-avbox{position:relative;height:230px;border-radius:8px;overflow:hidden;margin-bottom:12px;border:1px solid #e6e9e6;background:#eef0ec center/cover no-repeat}
.ck-avbox::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 45%,rgba(0,0,0,.18))}
.ck-av-host{position:absolute;inset:0}
.ck-av-host[hidden],.ck-av-fb[hidden]{display:none}
.ck-av-host canvas{width:100%;height:100%;display:block}
.ck-av-fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.ck-av-fb span{font-size:64px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.ck-av-fb small{font-size:12px;color:#fff;background:rgba(0,0,0,.35);border-radius:99px;padding:3px 10px}
.ck-av-fb.loading span{opacity:.6}
.ck-avbox.talking .ck-av-fb span{animation:ckTalk .35s ease-in-out infinite alternate}
@keyframes ckTalk{to{transform:translateY(-4px) scale(1.04)}}
.ck-av-tag{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);border-radius:99px;padding:3px 11px;font-size:12px;font-weight:700;color:#4a524c}
.ck-avbox.talking .ck-av-tag::after{content:" 🔊";}
.ck-avbox.big{height:auto;aspect-ratio:4/3;max-height:62vh}
.ck-av-sub{position:absolute;left:12px;right:12px;bottom:56px;text-align:center}
.ck-av-sub:empty{display:none}
.ck-av-sub>div{display:inline-block}
.ck-av-sub .zh{display:block;width:fit-content;margin:0 auto;background:rgba(20,26,22,.72);color:#fff;border-radius:6px;padding:3px 12px;font-size:20px}
.ck-av-sub .ja{display:block;width:fit-content;margin:3px auto 0;background:rgba(20,26,22,.6);color:#f1f4f2;border-radius:6px;padding:2px 10px;font-size:12.5px}
.ck-av-ctl{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.ck-av-b{border:0;background:rgba(255,255,255,.94);color:var(--g2);border-radius:99px;padding:8px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ck-av-b:hover{background:#fff}
.ck-vstage .ck-ticket{margin-top:0}
/* アバタートークの前の説明 */
.ck-vbrief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:center}
.ck-vbrief .ck-avbox{margin:0;height:260px}
.ck-vb-tips{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.9;color:#4a524c}
@media (max-width:860px){
  .ck-avbox{height:190px}
  .ck-avbox.big{aspect-ratio:auto;height:250px}
  .ck-vbrief{grid-template-columns:1fr}
  .ck-vbrief .ck-avbox{height:200px}
}

/* 会話の記録は枠の中でスクロール（ページが伸びてアバターが上に流れないように・2026-10-20） */
.ck-convbox{max-height:calc(100vh - 430px);min-height:200px;overflow-y:auto;overscroll-behavior:contain}
@media (max-width:860px){ .ck-convbox{max-height:42vh;min-height:160px} }

/* ---- 2026-10-20 本人「役の切り替えがわかりにくい・タブとコースの流れの関係・やりかたが下・マイクがださい」 ---- */
/* ① あなたの役（コースの画面の一番上に大きく） */
.ck-rolepick h2{margin:0 0 4px;font-family:var(--serif);font-size:20px;letter-spacing:1px}
.ck-rolepick .ck-note{margin:0 0 12px}
.ck-rolecards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ck-rolecard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 12px;text-align:left;border:2px solid #e3e8e4;background:#fafbfa;border-radius:12px;padding:14px 16px;font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.ck-rolecard:hover{border-color:#bcd3c4}
.ck-rolecard.on{border-color:var(--g);background:#fff;box-shadow:0 4px 14px rgba(63,125,94,.15)}
.ck-rc-em{font-size:34px;line-height:1;grid-row:span 2}
.ck-rc-t b{display:block;font-size:17px}
.ck-rc-t small{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.ck-rc-p{font-size:12.5px;color:var(--mut);white-space:nowrap}
.ck-rc-sel{grid-column:2 / 4;font-style:normal;font-size:12px;font-weight:800;color:var(--g)}
.ck-rc-sel.off{color:#8a918a;font-weight:600}
/* ステップの中の「あなたの役」（表示だけ） */
.ck-role-now{display:inline-block;background:var(--gl);color:var(--g2);border-radius:99px;padding:6px 14px;font-size:14px}
.ck-rolebox small{font-size:10.5px;color:#9aa39c}
.ck-st-back{color:var(--g2)}
/* ② やりかた（コースの流れの前・たためる） */
.ck-howto{margin-top:16px}
.ck-howto>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}
.ck-howto>summary::-webkit-details-marker{display:none}
.ck-howto>summary h3{margin:0}
.ck-how-tg{font-size:12px;color:var(--g2);border:1px solid #cfe0d5;border-radius:99px;padding:3px 10px}
.ck-howto[open]>summary{margin-bottom:12px}
.ck-howto + .ck-path{margin-top:16px}
/* ③ マイク（文字つきの横長ボタン＋音量メーター） */
.ck-mic2{display:inline-flex;align-items:center;gap:10px;min-width:240px;justify-content:center;border:0;border-radius:99px;padding:14px 22px;font:inherit;font-size:16px;font-weight:800;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,#3f8a64,#2f6b4c);box-shadow:0 6px 16px rgba(47,98,72,.3);transition:transform .1s}
.ck-mic2:active{transform:scale(.98)}
.ck-mic-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18)}
.ck-meter{display:none;align-items:center;gap:3px;height:22px}
.ck-meter i{display:block;width:4px;height:22px;border-radius:2px;background:#fff;transform:scaleY(.12);transform-origin:center;transition:transform .08s}
.ck-mic2.on{background:linear-gradient(180deg,#d65454,#b03636);box-shadow:0 0 0 0 rgba(214,69,69,.45);animation:ckPulse 1.1s infinite}
.ck-mic2.on .ck-meter{display:inline-flex}
.ck-mic2.busy{background:#8a918a;box-shadow:none}
.ck-micbox .ck-live{font-size:12.5px}
/* ④ 一覧の🔊 */
.ck-dl-say{margin-left:auto;flex:0 0 auto;font-size:15px;opacity:.8}
.ck-dl-say:hover{opacity:1}
.ck-list li .ck-dl-say{align-self:center}
@media (max-width:860px){
  .ck-rolecards{grid-template-columns:1fr}
  .ck-mic2{min-width:0;width:100%}
}

/* マイクテストの帯（2026-10-20・本体は assets/mic_test.js） */
.ck-mtbar{display:flex;align-items:center;gap:12px;border-radius:14px;padding:12px 16px;margin-bottom:14px;border:1px solid #d5e6dc;background:#f3f8f5}
.ck-mtbar.first{background:#fff8e6;border:2px solid #f0c75e}
.ck-mtbar.ng{background:#fdf0ee;border-color:#f3c7c1}
.ck-mtbar.ok{padding:8px 14px}
.ck-mt-ic{font-size:26px;flex:none}
.ck-mtbar.ok .ck-mt-ic{font-size:20px}
.ck-mt-t{flex:1;min-width:0}
.ck-mt-t b{display:block;font-size:15px}
.ck-mtbar.ok .ck-mt-t b{font-size:14px;color:#23784a}
.ck-mt-t small{display:block;font-size:12.5px;color:#5f6b64;line-height:1.6;margin-top:2px}
.ck-mtbar .ck-btn{flex:none;white-space:nowrap}
.ck-mt-link{display:inline-block;margin:6px 0 0;border:1px solid #3f7d5e;background:#fff;color:#2f6248;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.ck-msgline .ck-mt-link{display:block;margin-top:8px}
@media (max-width:640px){.ck-mtbar{flex-wrap:wrap}.ck-mtbar .ck-btn{width:100%}}

/* ▶▶ オートモード（2026-10-20） */
.ck-autotg{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #c9d6cf;background:#fff;color:#56635b;border-radius:999px;padding:5px 6px 5px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.ck-autotg .ck-at-i{font-size:11px;letter-spacing:-2px}
.ck-autotg .ck-at-s{background:#e9eeeb;color:#6b766e;border-radius:999px;padding:2px 9px;font-size:12px}
.ck-autotg.on{border-color:#3f7d5e;background:#eef7f1;color:#2f6248}
.ck-autotg.on .ck-at-s{background:#3f7d5e;color:#fff}
.ck-autotg.big{font-size:14.5px;padding:7px 8px 7px 14px}
.ck-autorow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.ck-autorow small{font-size:11.5px;color:#7b867f}
.ck-autobox{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;border:1px dashed #cfdcd4;border-radius:12px;background:#f8fbf9}
.ck-autobox b{display:block;font-size:14px}
.ck-autobox small{display:block;font-size:12.5px;color:#5f6b64;line-height:1.6}
@media (max-width:640px){.ck-autobox{flex-direction:column;align-items:flex-start}}

/* 🧩 基本の型（2026-10-20）: コースの画面の型のカード・型の説明（スライド） */
.ck-kata{display:flex;align-items:center;gap:16px;margin-bottom:14px;border:2px solid #cfe3d6;background:linear-gradient(180deg,#fff,#f5faf7)}
.ck-kata-n{flex:none;width:58px;height:58px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:800;box-shadow:0 3px 0 var(--g2)}
.ck-kata-n.cp{background:#d9a21b;box-shadow:0 3px 0 #b5850f;font-size:24px}
.ck-kata-t{flex:1;min-width:0}
.ck-kata-t small{display:block;font-size:12px;color:var(--mut)}
.ck-kata-p{display:block;font-family:"Noto Sans SC",sans-serif;font-size:26px;letter-spacing:.06em;color:var(--ink);line-height:1.4}
.ck-kata-j{display:block;font-size:14px;color:#4a5850}
.ck-kata-g{display:block;font-style:normal;font-size:12.5px;color:var(--g2);margin-top:4px}
.ck-kintro{max-width:720px;margin:0 auto}
.ck-kintro h2{font-size:22px;margin:10px 0 6px}
.ck-kdots{display:flex;align-items:center;gap:6px;margin-top:6px}
.ck-kdots i{width:28px;height:6px;border-radius:99px;background:#e3e9e5}
.ck-kdots i.done{background:#9cc8ae}.ck-kdots i.on{background:var(--g)}
.ck-kdots span{margin-left:6px;font-size:12px;color:var(--mut)}
.ck-kp{font-size:15px;line-height:1.9;color:#33403a;margin:4px 0 12px}
.ck-kex{list-style:none;margin:0;padding:0}
.ck-kex li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fbfdfc}
.ck-kex .zh{font-size:24px}
.ck-knote{background:#fff8e6;border:1px solid #f1dfae;border-radius:8px;padding:10px 12px;font-size:13.5px;line-height:1.8;color:#5f4a17}
.ck-kintro .ck-row{margin-top:16px}
.ck-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:rgba(36,49,42,.92);color:#fff;font-size:13px;line-height:1.6;padding:10px 16px;border-radius:10px;max-width:min(92vw,560px);transition:.25s;z-index:9000}
.ck-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){.ck-kata{flex-wrap:wrap}.ck-kata-open{width:100%}.ck-kata-p{font-size:22px}}
.ck-kp,.ck-knote{font-family:"Noto Sans","M PLUS Rounded 1c","Noto Sans JP",sans-serif}   /* 説明の中の拼音（shì・bú shì）＝Noto Sans を先に（Noto Sans JP は声調符号がずれる） */

/* 練習の画面の上の並び（2026-10-20 作り直し・本人「区別がつきにくい」）＝ ← コース ｜ 1 単語 › 2 文 › 3 会話 › 4 アバタートーク ／（会話の中だけ）会話の4段階 */
.ck-stepbar{margin:16px 0 18px}
.ck-sp-row{display:flex;align-items:center;gap:14px}
.ck-sp-back{flex:none;border:0;background:none;font:inherit;font-size:13.5px;font-weight:700;color:var(--g2);cursor:pointer;padding:8px 4px;white-space:nowrap}
.ck-sp-back:hover{text-decoration:underline}
.ck-sp-main{flex:1;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;overflow-x:auto;scrollbar-width:none}
.ck-sp-main::-webkit-scrollbar{display:none}
.ck-sp{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:none;border-radius:999px;padding:8px 14px;font:inherit;color:var(--mut);cursor:pointer;white-space:nowrap}
.ck-sp:hover{background:#f3f6f4}
.ck-sp-n{width:24px;height:24px;border-radius:50%;border:1.5px solid #cdd5cf;display:grid;place-items:center;font-size:12.5px;font-weight:800;background:#fff}
.ck-sp-t{font-size:14px;font-weight:700}
.ck-sp-clr{font-style:normal;color:var(--gold);font-size:13px}
.ck-sp.done .ck-sp-n{border-color:var(--gold);color:#9a7410;background:#fff8e1}
.ck-sp.on{background:var(--g);color:#fff;box-shadow:0 2px 8px rgba(63,125,94,.25)}
.ck-sp.on .ck-sp-n{background:#fff;border-color:#fff;color:var(--g2)}
.ck-sp.on .ck-sp-clr{color:#ffe08a}
.ck-sp-arr{flex:none;font-style:normal;color:#c3ccc6;font-size:16px}
.ck-sp-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 0 auto;padding:8px 10px;background:var(--gl);border-radius:12px;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
.ck-sp-sl{font-size:12px;font-weight:800;color:var(--g2);margin-right:4px}
.ck-ss{display:inline-flex;align-items:center;gap:6px;border:1px solid #d6e3db;background:#fff;border-radius:999px;padding:5px 12px 5px 6px;font:inherit;font-size:13px;font-weight:700;color:var(--mut);cursor:pointer;white-space:nowrap}
.ck-ss span{width:20px;height:20px;border-radius:50%;background:#eef2ef;display:grid;place-items:center;font-size:11.5px}
.ck-ss i{font-style:normal;color:var(--gold)}
.ck-ss.on{border-color:var(--g);background:var(--g);color:#fff}
.ck-ss.on span{background:#fff;color:var(--g2)}
.ck-ss.on i{color:#ffe08a}
@media (max-width:640px){
  .ck-sp-row{gap:8px}
  .ck-sp-back{font-size:12.5px;padding:6px 0}
  .ck-sp{padding:7px 9px;gap:5px}
  .ck-sp:not(.on) .ck-sp-t{display:none}   /* スマホ: 今のステップだけ名前を出す（ほかは番号と✦）＝1行に収める */
  .ck-sp-arr{font-size:13px}
  .ck-ss{padding:4px 10px 4px 5px;font-size:12px}
}

/* 前半をたたんだ行（後半の最中・2026-10-20） */
.ck-dlist li.ck-dl-fold{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;padding:8px 10px;background:#f6f8f7;border:1px dashed #dde4df;border-radius:10px;font-weight:700;color:var(--g2);font-size:14px}
.ck-dlist li.ck-dl-fold small{flex-basis:100%;font-weight:500;color:var(--mut);font-size:12px}

/* 「あなたの番」のカード（2026-10-20 作り直し・本人「文字の大きさやバランスがかっこよくない・カードっぽくない」） */
.ck-turn{border-top:0;border-radius:16px;padding:16px 18px 14px;box-shadow:0 10px 28px rgba(38,64,50,.08);border:1px solid #e3e9e5}
.ck-turn.v-great,.ck-turn.v-good,.ck-turn.v-bad{background:#fff}
.ck-turn-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px}
.ck-turn-h b{font-weight:800;color:var(--g2);letter-spacing:.04em}
.ck-turn-h span{background:var(--gl);border-radius:99px;padding:3px 10px;font-weight:700;font-size:12.5px;color:var(--g2)}
.ck-turn-h small{margin-left:auto;color:var(--mut);font-weight:500;font-size:12px}
.ck-flash{position:relative;text-align:center;border:1px solid #e1e9e4;border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#f6faf7 100%);
  box-shadow:0 1px 0 #fff inset,0 6px 16px rgba(40,70,55,.07);padding:26px 18px 22px;min-height:168px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.ck-flash::before{content:"";position:absolute;left:18px;right:18px;top:0;height:4px;border-radius:0 0 4px 4px;background:var(--g);opacity:.85}
.ck-turn.v-great .ck-flash,.ck-turn.v-good .ck-flash{border-color:#bfe2cd;background:linear-gradient(180deg,#fff,#f0faf4)}
.ck-turn.v-great .ck-flash::before,.ck-turn.v-good .ck-flash::before{background:var(--ok)}
.ck-turn.v-bad .ck-flash{border-color:#f1c9c9;background:linear-gradient(180deg,#fff,#fff5f5)}
.ck-turn.v-bad .ck-flash::before{background:var(--bad)}
.ck-flash .zh.big{font-size:36px;line-height:1.4;font-weight:500;letter-spacing:.06em}
.ck-flash .py{font-size:17px;color:#4d6b5b}
.ck-flash .ja{font-size:14.5px;color:#5f6b64;margin-top:2px}
.ck-flash-q{font-size:12.5px;font-weight:700;color:#93a098;letter-spacing:.12em}
.ck-flash-ja{font-size:26px;font-weight:800;color:var(--ink);line-height:1.45}
.ck-flash-v{align-self:center;display:inline-flex;align-items:center;gap:6px;padding:3px 14px 3px 8px;border-radius:999px;background:#e6f5ec;color:var(--ok);font-weight:800;font-size:15px;margin-bottom:4px}
.ck-flash-v b{font-size:22px;line-height:1}
.ck-flash-v small{font-weight:600;font-size:12px;opacity:.75;margin-left:2px}
.v-bad .ck-flash-v{background:#fdeceb;color:var(--bad)}
.ck-flash .ck-keymiss,.ck-flash .ck-heard{margin-top:6px}
.ck-turn .ck-micbox{margin-top:18px}
.ck-turn .ck-mic2{width:100%;max-width:420px}
.ck-tools{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #eef1ef}
.ck-tool{border:1px solid #d6e0da;background:#fff;color:var(--g2);border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.ck-tool:hover{background:var(--gl)}
.ck-tools>:first-child{justify-self:start}
.ck-tools>:last-child{justify-self:end}
.ck-tool.ck-skip{border-color:transparent;color:var(--mut);font-weight:600}
.ck-tool.ck-skip:hover{background:#f3f5f4;color:var(--ink)}
.ck-tools .ck-next{border-radius:999px;padding:9px 20px}
.ck-turn .ck-type{margin-top:10px;text-align:center}
.ck-turn .ck-type[open]{text-align:left}
@media (max-width:640px){
  .ck-flash{min-height:140px;padding:22px 14px 18px}
  .ck-flash .zh.big{font-size:30px}
  .ck-flash-ja{font-size:22px}
  .ck-tools{grid-template-columns:auto auto auto;justify-content:space-between}
}
@media (max-width:640px){
  .ck-sp-main{gap:2px;padding:4px}
  .ck-sp-arr{display:none}   /* スマホ: 矢印をはずして4つを1行に */
  .ck-sp{padding:6px 8px}
}

/* 結果の帯（2026-10-20 本人「正解や違いが、ちょろっと出るだけで分かりにくい」）＝カードの下に大きく。色の見方はその結果に出ている色だけ */
.ck-fb{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px 16px;border-radius:14px;border:2px solid;animation:ckFbIn .28s ease-out}
.ck-fb.great,.ck-fb.good{background:#e9f7ef;border-color:#9fd5b5;color:#1d6b40}
.ck-fb.bad{background:#fdf0ef;border-color:#f0b9b4;color:#a3271f}
.ck-fb-mk{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:800;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.06)}
.ck-fb.great .ck-fb-mk{background:#25985a;color:#fff}
.ck-fb-t{flex:1;min-width:0;text-align:left}
.ck-fb-t b{display:block;font-size:21px;line-height:1.3}
.ck-fb-t span{display:block;font-size:13.5px;line-height:1.6;color:#3d4a43;margin-top:2px}
.ck-fb-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:currentColor;opacity:.35;transform-origin:left;animation:ckFbBar linear forwards}
@keyframes ckFbIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ckFbBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ck-leg{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:6px;font-size:12px;color:var(--mut)}
.ck-leg span{display:inline-flex;align-items:center;gap:4px}
.ck-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.ck-leg i.ok{background:var(--ok)}.ck-leg i.bad{background:var(--bad)}.ck-leg i.miss{background:var(--miss)}
@media (max-width:640px){.ck-fb{padding:12px}.ck-fb-mk{width:44px;height:44px;font-size:26px}.ck-fb-t b{font-size:18px}}
.ck-kata-n.ex{background:#7b5bb5;box-shadow:0 3px 0 #5e4391;font-size:24px}   /* 💬 会話表現ユニット（2026-10-21） */

/* 🐼 基本トレーニングのナビゲーター「过过」（Rive・assets/check_rive.js）2026-10-21 */
.ck-nav{position:relative;width:120px;height:120px;flex:none;pointer-events:none}
.ck-nav-canvas{display:block;width:100%;height:100%}
.ck-nav-bub{position:absolute;right:88%;top:8%;white-space:nowrap;background:#fff;border:2px solid #f0c75e;color:#5f4512;font-weight:800;font-size:13.5px;
  padding:5px 11px;border-radius:14px;box-shadow:0 3px 10px rgba(0,0,0,.08);opacity:0;transform:translateY(6px) scale(.9);transition:.22s;pointer-events:none;z-index:2}
.ck-nav-bub::after{content:"";position:absolute;right:-8px;top:50%;margin-top:-6px;border:6px solid transparent;border-left-color:#f0c75e}
.ck-nav-bub.on{opacity:1;transform:none}
/* 練習（単語・文）: カードの右上に小さく */
.ck-turn{position:relative}
.ck-turn .ck-nav.corner{position:absolute;right:8px;top:40px;width:96px;height:96px;z-index:3}
/* 型の説明: スライドの右上に先生役で */
.ck-kintro{position:relative}
.ck-kintro .ck-nav.teach{position:absolute;right:6px;top:-20px;width:140px;height:140px}
.ck-kintro h2{padding-right:120px}
/* コースの画面: 型のカードの右に */
.ck-kata .ck-nav.card{width:104px;height:104px;margin:-10px -6px -10px 0}
.ck-kata .ck-nav-bub{right:92%;top:2%}
/* 終わりの画面: 大きく */
.ck-done .ck-nav.done{width:180px;height:180px;margin:-8px auto -4px}
.ck-done .ck-nav.done .ck-nav-bub{right:auto;left:78%;top:4%}
.ck-done .ck-nav.done .ck-nav-bub::after{right:auto;left:-8px;border-left-color:transparent;border-right-color:#f0c75e}
/* 会話の相手が过过のとき（ステージの箱の中） */
.ck-avbox.riv .ck-av-host{display:flex;align-items:flex-end;justify-content:center}
.ck-avbox.riv .ck-nav-canvas{width:auto;height:100%;aspect-ratio:1/1;max-width:100%}
.ck-avbox.riv .ck-nav-bub{right:auto;left:56%;top:10%}
.ck-avbox.riv .ck-nav-bub::after{right:auto;left:-8px;border-left-color:transparent;border-right-color:#f0c75e}
@media (max-width:640px){
  .ck-turn .ck-nav.corner{width:74px;height:74px;top:40px;right:4px}
  .ck-kintro .ck-nav.teach{width:96px;height:96px;top:-10px}
  .ck-kintro h2{padding-right:80px}
  .ck-nav-bub{font-size:12px;padding:4px 9px}
}

/* 線のアイコン（assets/ck_icons.js・2026-10-21 本人「絵文字のアイコンが安っぽい」） */
.cki{width:1.08em;height:1.08em;vertical-align:-.17em;flex:none;margin-right:.3em}
.ck-ri{display:inline-grid;place-items:center;width:1.75em;height:1.75em;border-radius:50%;color:#fff;margin-right:.4em;vertical-align:middle;flex:none}
.ck-ri .cki{width:62%;height:62%;margin:0;vertical-align:0}
.ck-ri.r-you{background:linear-gradient(160deg,#4f9673,#2f6248)}
.ck-ri.r-them{background:linear-gradient(160deg,#4a6795,#2a4166)}
.ck-pl{display:inline-flex;align-items:center}
.ck-pl .cki{margin-right:.22em;opacity:.85}
.ck-rc-em{font-size:22px}
.ck-rc-em .ck-ri{width:48px;height:48px;margin:0}
.ck-av .ck-ri{width:100%;height:100%;margin:0}
.ck-av-fb .ck-ri{width:96px;height:96px;margin:0}
.ck-how-ic .cki,.ck-mt-ic .cki{margin:0;width:22px;height:22px}
.ck-mt-ic{color:#3f7d5e}
.ck-wait b .cki{width:30px;height:30px;margin:0;color:var(--g)}
.ck-kata-n .cki{width:28px;height:28px;margin:0}
.ck-kata-g .cki{color:#c96a22}
.ck-thumb-ic{background:linear-gradient(160deg,#eaf5f0,#d6eadf);color:var(--g2)}
.ck-thumb-ic .cki{width:38px;height:38px;margin:0}
.ck-mini .cki,.ck-say .cki,.ck-dl-say .cki{margin:0}
.ck-tool .cki,.ck-snd .cki,.ck-av-b .cki,.ck-kata-open .cki{width:1.05em;height:1.05em}
.ck-ticket b .cki{margin-right:.15em}
.ck-role-now{display:inline-flex;align-items:center}
.ck-role-now .ck-ri{width:1.5em;height:1.5em}
.ck-turn-h span{display:inline-flex;align-items:center}
.ck-turn-h span .ck-ri{width:1.45em;height:1.45em;margin-right:.3em}

/* 🐼 过过は画面の余白に（CkRive.dock・2026-10-21 本人「ナビゲーターなら画面の余白に。PC はメインの横で遊んでしゃべる、スマホは下で用事があるときに」） */
.ck-dock{position:fixed;z-index:60;pointer-events:none}
.ck-dock.empty{display:none}
.ck-dock-in{position:relative;width:100%;height:100%;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}   /* 2026-10-21 さわれる・ドラッグで動かせる */
.ck-dock.drag .ck-dock-in{cursor:grabbing}
.ck-dock .ck-nav-bub{pointer-events:none}
.ck-dock.moved{transition:none}
.ck-dock.mini.moved{transform:none}
.ck-dock.mini.moved.up{transform:scale(1.28)}
.ck-dock.drag{opacity:.92;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}
.ck-dock .ck-nav-canvas{display:block;width:100%;height:100%}
.ck-dock.wide{bottom:16px;width:200px;height:200px}
.ck-dock.peek{right:6px;bottom:0;width:118px;height:118px;transform:translateY(108%);transition:transform .38s cubic-bezier(.2,.9,.3,1.25)}
.ck-dock.peek.up{transform:translateY(16%)}
/* 吹き出し（中国語＋拼音＋小さく日本語） */
.ck-nav-bub b{display:block;font-family:"Noto Sans SC",sans-serif;font-size:15px;color:#3b2f12;letter-spacing:.02em}
.ck-nav-bub i{display:block;font-style:normal;font-family:"Noto Sans",sans-serif;font-weight:500;font-size:11.5px;color:#7a6326}
.ck-nav-bub small{display:block;font-weight:500;font-size:11px;color:#8a7d5c;margin-top:1px}
.ck-dock .ck-nav-bub{right:auto;top:auto;left:50%;bottom:92%;white-space:normal;width:max-content;max-width:210px;text-align:center;line-height:1.35;
  transform:translateX(-50%) translateY(8px) scale(.92)}
.ck-dock .ck-nav-bub.on{transform:translateX(-50%)}
.ck-dock .ck-nav-bub::after{right:auto;top:auto;left:50%;bottom:-14px;margin:0 0 0 -7px;border:7px solid transparent;border-top-color:#f0c75e}
.ck-dock.peek .ck-nav-bub{left:auto;right:4px;transform:translateY(8px) scale(.92);max-width:min(240px,80vw)}
.ck-dock.peek .ck-nav-bub.on{transform:none}
.ck-dock.peek .ck-nav-bub::after{left:auto;right:40px}

/* スマホ・せまい画面の过过＝右下にいつも小さく（mini）。用事・話しているあいだは大きく（up）（2026-10-21 本人「ひとこと言ってすぐ消えちゃう」「無駄な動きとかしないんだね」） */
.ck-dock.mini{right:2px;bottom:0;width:96px;height:96px;transform:translateY(22%);transform-origin:bottom right;transition:transform .38s cubic-bezier(.2,.9,.3,1.25)}
.ck-dock.mini.up{transform:translateY(0) scale(1.28)}
.ck-dock.mini .ck-nav-bub{left:auto;right:6px;transform:translateY(8px) scale(.92);max-width:min(240px,78vw)}
.ck-dock.mini .ck-nav-bub.on{transform:none}
.ck-dock.mini .ck-nav-bub::after{left:auto;right:34px}
.ck-dock.mini.up .ck-nav-bub{transform-origin:bottom right;scale:.8}
body.ck-has-mini #ckApp,body.ck-has-mini #ktApp{padding-bottom:110px}   /* いちばん下の中身が过过に隠れないように */
body.ck-has-mini #ckTurn,body.ck-has-mini .ck-turn,body.ck-has-mini .ck-done{scroll-margin-bottom:118px}   /* スマホ: カードを下まで動かすとき、过过の分だけ上に止める（ボタンに重ならない） */