/* aima見学：バナーを押した先の画面（2026-10-13）
   アプリの画面そのものは iframe の中（trial-assets-v2/）。ここには、まわりの枠（kg-）だけを書く。 */
:root{--kg-green:#35794e;--kg-green-d:#255b39;--kg-green-l:#eef4f0;--kg-green-b:#cfe0d6;--kg-yellow:#f2cc3d;--kg-yellow-ink:#3a2f00;--kg-ink:#2A2E26;--kg-sub:#6B6F66;--kg-ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#e9e5dd;color:var(--kg-ink);font-family:'Noto Sans JP',sans-serif;overscroll-behavior:none;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer}
.kg{display:flex;flex-direction:column;width:min(100%,390px);height:100vh;height:100dvh;margin:0 auto;background:#fff;overflow:hidden}

/* 上の帯：戻る／名前と注記／登録 */
.kg-bar{flex:0 0 auto;display:flex;align-items:center;gap:6px;height:46px;padding:0 8px 0 2px;background:var(--kg-green-d);color:#fff}
.kg-back{flex:0 0 auto;display:flex;align-items:center;gap:1px;min-height:44px;padding:0 6px 0 4px;color:#ffffffe0;font-size:11px;font-weight:700;text-decoration:none}
.kg-name{flex:1 1 auto;min-width:0;margin:0;line-height:1.2}
.kg-name b{display:block;font-size:14px;font-weight:900;letter-spacing:.04em}
.kg-name b span{font-family:'Lato','Noto Sans JP',sans-serif;letter-spacing:0}
.kg-name small{display:block;margin-top:2px;font-size:8.5px;color:#ffffffbd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kg-join{flex:0 0 auto;display:flex;align-items:center;min-height:44px;text-decoration:none}
.kg-join span{display:flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:#06c755;color:#fff;font-size:11px;font-weight:700;white-space:nowrap}

/* 案内の行：いま見ている画面の番号・名前・役割 */
.kg-guide{flex:0 0 auto;display:flex;align-items:flex-start;background:var(--kg-green-l);border-bottom:1px solid var(--kg-green-b)}
.kg-guide__t{flex:1 1 0;min-width:0;display:flex;align-items:baseline;gap:7px;min-height:36px;padding:9px 4px 8px 14px;border:0;background:none;text-align:left}
.kg-guide__n{flex:0 0 auto;font-family:'Lato',sans-serif;font-size:11px;font-weight:900;color:var(--kg-green)}
.kg-guide__s{flex:0 0 auto;font-size:12px;font-weight:700;white-space:nowrap}
.kg-guide__s i{margin-left:5px;padding:1px 6px;border-radius:999px;background:var(--kg-yellow);color:var(--kg-yellow-ink);font-size:9px;font-style:normal;font-weight:900}
.kg-guide__r{flex:1 1 0;min-width:0;font-size:10.5px;line-height:1.6;color:#46705b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kg-guide.is-open .kg-guide__t{flex-wrap:wrap}
.kg-guide.is-open .kg-guide__r{flex-basis:100%;white-space:normal;overflow:visible}

/* アプリの画面を入れる枠。画面は iframe の中（trial-assets-v2/screens/*.html をそのまま開く） */
.kg-frame{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#fff}
.kg-view{display:block;width:100%;height:100%;border:0;background:#fff;transition:opacity .18s linear}
.kg-view.is-loading{opacity:0}
.kg-load{margin:0;padding:80px 24px;text-align:center;font-size:13px;line-height:2;color:var(--kg-sub)}
.kg-load a{color:var(--kg-green);font-weight:700}

/* 状態の違う画面の切り替え（合流前／合流中／解散後 など） */
.kg-guide{flex-wrap:wrap}
.kg-vars{flex:0 0 100%;display:flex;gap:6px;padding:0 10px 8px 14px}
.kg-vars[hidden]{display:none}
.kg-vars button{min-height:28px;padding:0 12px;border:1px solid var(--kg-green-b);border-radius:999px;background:#fff;color:#46705b;font-size:11px;font-weight:700}
.kg-vars button[aria-pressed="true"]{background:var(--kg-green);border-color:var(--kg-green);color:#fff}

/* 案内の吹き出し */
.kg-coach{position:absolute;inset:0;z-index:25;pointer-events:none}
.kg-coach[hidden]{display:none}
.kg-coach__ring{position:absolute;border-radius:14px;box-shadow:0 0 0 3px var(--kg-yellow),0 0 0 7px #f2cc3d55;animation:kg-pulse 1.4s ease-in-out infinite}
.kg-coach__b{position:absolute;display:flex;align-items:center;gap:9px;max-width:270px;padding:9px 9px 9px 13px;border:0;border-radius:12px;background:var(--kg-yellow);color:var(--kg-yellow-ink);font-size:12.5px;font-weight:700;line-height:1.5;text-align:left;box-shadow:0 6px 18px #00000038;pointer-events:auto;animation:kg-pop .3s var(--kg-ease)}
.kg-coach__b em{flex:0 0 auto;padding:3px 9px;border-radius:999px;background:var(--kg-yellow-ink);color:#fff;font:900 10px/1.4 'Lato',sans-serif;font-style:normal}
.kg-coach__b::after{content:"";position:absolute;left:var(--ax,24px);width:12px;height:12px;background:inherit;transform:translateX(-50%) rotate(45deg)}
.kg-coach__b.is-below::after{top:-5px}
.kg-coach__b.is-above::after{bottom:-5px}

/* ひとこと通知 */
.kg-toast{position:absolute;left:50%;bottom:96px;z-index:40;width:max-content;max-width:calc(100% - 40px);margin:0;padding:9px 16px;border-radius:999px;background:#1f2a24f0;color:#fff;font-size:12px;font-weight:500;line-height:1.5;text-align:center;opacity:0;transform:translate(-50%,8px);transition:opacity .2s,transform .2s;pointer-events:none}
.kg-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* 枠の中に出すシート（この画面のポイント） */
.kg-sheet{position:absolute;inset:0;z-index:30}
.kg-sheet[hidden]{display:none}
.kg-sheet__dim{position:absolute;inset:0;background:#0000006b;animation:kg-fade .2s linear}
.kg-sheet__p{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - 12px);overflow-y:auto;padding:22px 20px 20px;border-radius:18px 18px 0 0;background:#fff;animation:kg-up .36s var(--kg-ease)}
.kg-sheet__p--tall{padding-top:14px}
.kg-sheet__h{display:flex;align-items:center;justify-content:space-between}
.kg-sheet__h h2{margin:0;font-size:17px;font-weight:900}
.kg-sheet__h button{width:40px;height:40px;margin-right:-10px;border:0;background:none;font-size:22px;line-height:1;color:var(--kg-sub)}
.kg-sheet__s{margin:0 0 10px;font-size:11.5px;color:var(--kg-sub)}

@keyframes kg-fade{from{opacity:0}to{opacity:1}}
@keyframes kg-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes kg-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes kg-pulse{0%,100%{box-shadow:0 0 0 3px var(--kg-yellow),0 0 0 7px #f2cc3d55}50%{box-shadow:0 0 0 3px var(--kg-yellow),0 0 0 12px #f2cc3d00}}
@media(prefers-reduced-motion:reduce){.kg *,.kg *::before,.kg *::after{animation:none!important;transition:none!important}}

/* 画像の書き出し用（kengaku.html?shot=1） */
.kg-shot .kg-bar,.kg-shot .kg-guide,.kg-shot .kg-coach,.kg-shot .kg-toast{display:none!important}

/* 運営窓口を開いたときのひとこと（2026-10-14） */
.kg-pop{position:absolute;inset:0;z-index:45;display:grid;place-items:center;padding:24px}
.kg-pop[hidden]{display:none}
.kg-pop__dim{position:absolute;inset:0;background:#0000006b;animation:kg-fade .2s linear}
.kg-pop__card{position:relative;width:100%;max-width:300px;padding:22px 20px 18px;border-radius:18px;background:#fff;text-align:center;box-shadow:0 12px 32px #0000004d;animation:kg-pop .3s var(--kg-ease)}
.kg-pop__card img{display:block;width:64px;height:64px;margin:0 auto 8px;border-radius:50%;object-fit:cover;object-position:center 12%;background:var(--kg-green-l)}
.kg-pop__k{margin:0;font-size:10.5px;font-weight:700;color:var(--kg-green)}
.kg-pop__card h2{margin:4px 0 0;font-size:17px;font-weight:900;line-height:1.5}
.kg-pop__x{margin:8px 0 0;font-size:12.5px;line-height:1.8;color:var(--kg-sub)}
.kg-pop__card button{width:100%;min-height:44px;margin-top:16px;border:0;border-radius:999px;background:var(--kg-yellow);color:var(--kg-yellow-ink);font-size:14px;font-weight:900}

/* 2026-10-14 機能のメニュー（ヘッダーの下）：ソロマ／グルマ／ビデオ通話／ゆる募／運営サポート */
.kg-menu{flex:0 0 auto;display:flex;gap:5px;padding:7px 8px;background:#fff;border-bottom:1px solid var(--kg-green-b);overflow-x:auto;scrollbar-width:none}
.kg-menu::-webkit-scrollbar{display:none}
.kg-menu button{flex:1 0 auto;min-height:30px;padding:0 9px;border:1px solid var(--kg-green-b);border-radius:999px;background:#fff;color:var(--kg-green);font-size:11.5px;font-weight:700;white-space:nowrap}
.kg-menu button[aria-current="page"]{background:var(--kg-green);border-color:var(--kg-green);color:#fff}

/* 機能の説明ページ（枠の上に重ねる） */
.kg-page{position:absolute;inset:0;z-index:28;overflow-y:auto;background:#fff;animation:kg-fade .2s linear}
.kg-page[hidden]{display:none}
.kg-page__in{padding:20px 20px 32px}
.kg-page__k{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--kg-green)}
.kg-page h2{margin:4px 0 0;font-size:26px;font-weight:900;line-height:1.3;color:var(--kg-green)}
.kg-page h2 i{margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--kg-yellow);color:var(--kg-yellow-ink);font-size:11px;font-style:normal;vertical-align:5px}
.kg-page__lead{margin:6px 0 0;font-size:16px;font-weight:900;line-height:1.6}
.kg-page__v{margin:14px 0 0;border:1px solid var(--kg-green-b);border-radius:14px;overflow:hidden;background:var(--kg-green-l)}
.kg-page__v img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.kg-page__ph{display:grid;place-items:center;aspect-ratio:3/2;background:linear-gradient(150deg,var(--kg-green) 0%,var(--kg-green-d) 100%)}
.kg-page__ph span{width:84px;height:84px;border-radius:50%;background:#ffffff26 center/46px no-repeat}
.kg-page__ph--video span{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='13' height='12' rx='2.5'/%3E%3Cpath d='M15.5 10.5l6-3.5v10l-6-3.5z'/%3E%3C/svg%3E")}
.kg-page__ph--support span{background:#fff url(../trial-assets-v2/img/kengaku/staff.png) center 12%/150% no-repeat;box-shadow:0 0 0 6px #ffffff40}
.kg-page__fit{margin:14px 0 0;font-size:13px;font-weight:700;line-height:1.6}
.kg-page__fit b{display:inline-block;margin-right:8px;padding:1px 9px;border-radius:999px;background:var(--kg-green-l);color:var(--kg-green);font-size:10.5px}
.kg-page h3{margin:20px 0 0;font-size:14px;font-weight:900}
.kg-page ol{margin:10px 0 0;padding:0;list-style:none;counter-reset:kg-step}
.kg-page li{position:relative;margin-top:8px;padding:11px 12px 11px 46px;border-radius:12px;background:var(--kg-green-l);font-size:13px;font-weight:700;line-height:1.6;counter-increment:kg-step}
.kg-page li::before{content:counter(kg-step);position:absolute;left:12px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--kg-green);color:#fff;font:900 12px/24px 'Lato',sans-serif;text-align:center}
.kg-page__note{margin:12px 0 0;font-size:11.5px;line-height:1.7;color:var(--kg-sub)}
.kg-page__go{display:block;width:100%;min-height:48px;margin-top:18px;border:0;border-radius:999px;background:var(--kg-yellow);color:var(--kg-yellow-ink);font-size:14px;font-weight:900}

.kg-shot .kg-menu,.kg-shot .kg-foot,.kg-shot .kg-page,.kg-shot .kg-tips-btn{display:none!important}

/* 使い方を画像つきのカードに（ソロマ・グルマ・ビデオ通話）
   2026-10-14：画像が大きく文字が埋もれるため、左に小さな画像・右に番号と文字の横並びに */
.kg-page ol.is-img li{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:12px;padding:8px 12px 8px 8px;background:#fff;border:1px solid var(--kg-green-b)}
.kg-page ol.is-img li::before{position:static;grid-column:2;grid-row:1;align-self:end;margin:0}
.kg-page ol.is-img figure{grid-column:1;grid-row:1 / span 2;margin:0;border-radius:8px;overflow:hidden;border:1px solid var(--kg-green-b);background:var(--kg-green-l)}
.kg-page ol.is-img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.kg-page ol.is-img span{grid-column:2;grid-row:2;align-self:start;font-size:13.5px;line-height:1.55}
.kg-page ol.is-img li+li{margin-top:8px}

/* 2026-10-17 この画面のポイント（2列目の右のボタン → 一覧のシート → 選ぶと、その場所を枠で囲んで説明） */
.kg-tips-btn{flex:0 0 auto;display:flex;align-items:center;gap:5px;min-height:26px;margin:5px 8px 5px 2px;padding:0 4px 0 11px;border:0;border-radius:999px;background:var(--kg-yellow);color:var(--kg-yellow-ink);font-size:11px;font-weight:900;white-space:nowrap}
.kg-tips-btn[hidden]{display:none}
.kg-tips-btn em{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--kg-yellow-ink);color:var(--kg-yellow);font:900 10.5px/1 'Lato',sans-serif;font-style:normal}
.kg-tips{margin:0;padding:0;list-style:none}
.kg-tips button{display:grid;grid-template-columns:26px 1fr 12px;align-items:center;gap:1px 10px;width:100%;margin-top:7px;padding:10px 12px;border:1px solid var(--kg-green-b);border-radius:12px;background:#fff;text-align:left}
.kg-tips i{grid-row:1/3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--kg-yellow);color:var(--kg-yellow-ink);font:900 12px/1 'Lato',sans-serif;font-style:normal}
.kg-tips b{font-size:13.5px;font-weight:900;color:var(--kg-green-d)}
.kg-tips small{grid-column:2;font-size:11.5px;line-height:1.6;color:var(--kg-ink)}
.kg-tips em{grid-column:3;grid-row:1/3;font-style:normal;font-size:18px;color:var(--kg-green)}
.kg-tipring{position:absolute;z-index:26;border-radius:12px;box-shadow:0 0 0 3px var(--kg-yellow),0 0 0 9999px #00000059;pointer-events:none;transition:all .3s var(--kg-ease)}
.kg-tipring[hidden],.kg-tip[hidden]{display:none}
.kg-tip{position:absolute;left:12px;right:12px;z-index:27;padding:14px 14px 12px;border-radius:16px;background:#fff;box-shadow:0 10px 30px #0000004d;animation:kg-pop .25s var(--kg-ease)}
.kg-tip b{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:900;color:var(--kg-green-d)}
.kg-tip b i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--kg-yellow);color:var(--kg-yellow-ink);font:900 11.5px/1 'Lato',sans-serif;font-style:normal}
.kg-tip p{margin:4px 0 0;font-size:12.5px;line-height:1.75}
.kg-tip nav{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}
.kg-tip button{min-height:38px;padding:0 16px;border:1.5px solid var(--kg-green-b);border-radius:999px;background:#fff;color:var(--kg-green-d);font-size:12.5px;font-weight:700}
.kg-tip .is-ok{border-color:var(--kg-green-d);background:var(--kg-green-d);color:#fff}

/* 2026-10-17 下の帯（アプリの画面の外）：登録ボタン（黄色）／説明ページを開いている間は「〇〇 に戻る」 */
.kg-foot{flex:0 0 auto;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--kg-ink)}
.kg-reg{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 10px;min-height:54px;padding:7px 18px 7px 22px;border-radius:999px;background:var(--kg-yellow);color:var(--kg-yellow-ink);line-height:1.3;text-decoration:none}
.kg-reg small{font-size:10px;font-weight:700;color:#5c4b00}
.kg-reg b{grid-column:1;font-size:14px;font-weight:900}
.kg-reg span{grid-column:2;grid-row:1/3;font-size:24px;line-height:1}
.kg-reg[hidden],.kg-ret[hidden]{display:none}
.kg-ret{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;border:0;border-radius:999px;background:#fff;color:var(--kg-green-d);font-size:14px;font-weight:900}
/* 登録ボタン：数秒に1回、ふわっと浮き上がる（動きを減らす設定では止まる） */
.kg-reg{animation:kg-lift 4.5s ease-in-out 1.5s infinite}
@keyframes kg-lift{0%,70%,100%{transform:none;box-shadow:0 0 0 #0000}78%{transform:translateY(-6px) scale(1.02);box-shadow:0 12px 20px #00000066}86%{transform:translateY(-1px);box-shadow:0 4px 8px #00000040}92%{transform:translateY(-3px);box-shadow:0 8px 14px #00000052}}