/* AIと声で英会話（/ai/voice/）。aihub.css の上に重ねる。太枠＋ずらし影・藍・ライム・朱 */
.av-narrow{max-width:900px}
.av-h2{font:900 clamp(22px,3vw,30px)/1.35 var(--t-disp);margin:44px 0 16px}
.av .a-3s{margin-top:18px}
.av .a-uroko details{background:var(--t-card)}
.av-hero .h-h1 .s{font-size:clamp(15px,1.8vw,19px)}

/* 実際の画面（ブラウザ風の枠） */
.av-shot{margin:0;border:var(--t-bd);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--t-sh)}
.av-shot-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--t-bg2);border-bottom:2px solid var(--t-edge)}
.av-shot-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57;display:block}
.av-shot-bar i:nth-child(2){background:#febc2e}.av-shot-bar i:nth-child(3){background:#28c840}
.av-shot-bar span{margin-left:10px;padding:2px 12px;border-radius:99px;background:var(--t-card);font:800 12px var(--t-en);color:var(--t-sub);border:1.5px solid var(--t-line)}
.av-shot-img{display:block;background:#fff}
.av-shot-img img{display:block;width:100%;height:auto}
.av-shot figcaption{padding:8px 14px;font-size:12.5px;font-weight:700;color:var(--t-sub);background:var(--t-card);border-top:2px solid var(--t-line)}
.av-shot.phone{max-width:300px;border-radius:34px;border-width:7px;padding:0}
.av-shot.phone .av-shot-bar{justify-content:center;background:var(--t-edge);border:0;padding:8px}
.av-shot.phone .av-shot-bar i{display:none}
.av-shot.phone .av-shot-bar span{margin:0;background:#2b2f4d;color:#c9cdf5;border:0}

/* ChatGPT の手順（左に説明、右に画面） */
.av-steps{list-style:none;padding:0;margin:0;display:grid;gap:40px}
.av-step{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:28px;align-items:start}
.av-step-t{display:flex;gap:14px;align-items:flex-start;position:sticky;top:90px}
.av-step h3{font:900 clamp(18px,2.2vw,22px)/1.4 var(--t-disp);margin-bottom:8px}
.av-step p{line-height:1.9;font-weight:500}
.av-no{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--t-lime);border:var(--t-bd);box-shadow:var(--t-sh-s);font:900 22px var(--t-en)}
.av-step:nth-child(3) .av-no{background:var(--t-red);color:#fff}
.av-mobile{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start;margin-top:48px}
.av-dl{display:grid;gap:10px;margin:14px 0 0}
.av-dl div{padding:12px 16px;border-radius:14px;background:var(--t-card);border:2px solid var(--t-line)}
.av-dl dt{font:900 15px var(--t-disp);margin-bottom:4px}
.av-dl dd{margin:0;line-height:1.8;font-size:14.5px}
.av-data{margin-top:28px;padding:16px 20px;border-radius:16px;background:var(--t-blue-bg);border:2px dashed var(--t-blue);line-height:1.85;font-size:14.5px}
.av-data b{display:inline-block;margin-right:10px;padding:1px 10px;border-radius:99px;background:var(--t-blue);color:#fff;font-size:12.5px}
.av-vdate{font:800 12px var(--t-en);color:var(--t-sub);margin-top:4px}
.av .a-vid-how b{margin-right:6px;color:var(--t-red2)}

/* 2列・画面2枚 */
.av-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.av-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.av-pair .ai-h3{margin-top:18px}
.av-art{margin:0 0 20px;border:var(--t-bd);border-radius:22px;overflow:hidden;box-shadow:var(--t-sh)}
.av-art img{display:block;width:100%;height:auto}
.av-tip{padding:18px 20px;border-radius:18px;background:var(--t-sun-bg);border:var(--t-bd);box-shadow:var(--t-sh-s)}
.av-tip b{font:900 16px var(--t-disp)}
.av-tip p{margin-top:6px;line-height:1.85}
.av-tip mark{background:linear-gradient(transparent 55%,var(--t-lime) 55%);color:inherit}
.av-gsteps li{font-weight:500}
.av-gsteps li b{display:block;font:900 16px var(--t-disp)}

/* どれを使う？ */
.av-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.av-pick fieldset{border:var(--t-bd);border-radius:18px;padding:14px 16px 16px;background:var(--t-card);box-shadow:var(--t-sh-s);margin:0;min-width:0}
.av-pick legend{font:900 16px var(--t-disp);padding:0 6px}
.av-pick legend span{display:inline-block;margin-right:8px;padding:0 9px;border-radius:99px;background:var(--t-ink);color:var(--t-bg);font:900 13px var(--t-en)}
.av-pick-opts{display:grid;gap:8px;margin-top:8px}
.av-pick-opts label{display:block;cursor:pointer}
.av-pick-opts input{position:absolute;opacity:0;pointer-events:none}
.av-pick-opts span{display:block;padding:10px 14px;border-radius:12px;border:2px solid var(--t-line);font-weight:800;transition:transform .12s}
.av-pick-opts label:hover span{transform:translate(-1px,-1px);border-color:var(--t-edge)}
.av-pick-opts input:checked+span{background:var(--t-lime);border-color:var(--t-edge);box-shadow:var(--t-sh-s)}
.av-pick-opts input:focus-visible+span{outline:3px solid var(--t-blue);outline-offset:2px}
.av-pick-out{grid-column:1/-1;padding:20px 24px;border-radius:20px;border:2.5px dashed var(--t-line);color:var(--t-sub);font-weight:700}
.av-pick-out.on{border:var(--t-bd);border-style:solid;background:var(--t-card);color:var(--t-ink);box-shadow:var(--t-sh)}
.av-pick-out h3{font:900 clamp(24px,3vw,32px) var(--t-disp);margin:2px 0 8px}
.av-pick-out p{line-height:1.85}
.av-pick-out .t-btn{margin:12px 10px 0 0}
.av-res-k{font:900 13px var(--t-en);color:var(--t-red2);letter-spacing:.06em}
.av-res-warn{margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--t-red-bg)}
.av-res-sub{margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--t-bg)}
.av-tbl table{min-width:760px}
.av-tbl tbody tr:last-child td{font-weight:900;background:var(--t-lime-bg)}
.av-tbl thead th:nth-child(4){color:var(--t-red2)}

/* セットアップ */
.av-check{list-style:none;padding:0;margin:0;display:grid;gap:10px;counter-reset:ck}
.av-check label{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:16px;background:var(--t-card);border:2px solid var(--t-line);cursor:pointer}
.av-check input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--t-mint)}
.av-check b{display:block;font:900 16px var(--t-disp)}
.av-check small{display:block;margin-top:4px;font-size:14px;line-height:1.8;color:var(--t-sub)}
.av-check input:checked~span b{text-decoration:line-through;text-decoration-color:var(--t-mint);text-decoration-thickness:3px}

/* Grok */
.av-adult{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 12px;border-radius:99px;background:var(--t-red);color:#fff;font:900 14px var(--t-disp)}
.av-rules{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.av-rules li{padding:16px 18px;border-radius:16px;background:var(--t-card);border:var(--t-bd);box-shadow:var(--t-sh-s)}
.av-rules li b{font:900 16px var(--t-disp)}
.av-rules li p{margin-top:6px;line-height:1.8;font-size:14.5px}
.av-rules li.warn{background:var(--t-red-bg)}

/* 指示文 */
.av-prs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px;margin-top:28px}
.av-pr{scroll-margin-top:90px}
.av-pr-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;color:#fff}
.av-pr-hd b{font:900 17px var(--t-disp)}
.av-pr-hd small{padding:1px 10px;border-radius:99px;background:var(--t-lime);color:var(--t-ink);font-weight:900;font-size:12px}

/* ロールプレイ */
.av-scenes{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 22px}
.av-scenes button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:99px;border:2px solid var(--t-edge);background:var(--t-card);font:800 14.5px var(--t-jp);color:var(--t-ink);cursor:pointer}
.av-scenes button span{font-size:18px}
.av-scenes button[aria-pressed=true]{background:var(--t-lime);box-shadow:var(--t-sh-s)}
.av-scene-list{display:grid;gap:18px}
.av-scene{padding:20px 22px;border-radius:20px;background:var(--t-card);border:var(--t-bd);box-shadow:var(--t-sh)}
.av-scene h3{font:900 22px var(--t-disp);display:flex;gap:10px;align-items:center}
.av-scene-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 14px;font-weight:700}
.av-scene-meta b,.av-scene-ft b{margin-right:6px;padding:1px 9px;border-radius:99px;background:var(--t-ink);color:var(--t-bg);font-size:12px}
.av-scene-ft{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;font-weight:700;line-height:1.8}
.av-scene-ft q{font-family:var(--t-en)}
.av.av-js .av-scene[data-later]:not([hidden]){display:block}

/* 15分メニュー */
.av-menu{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.av-menu li{position:relative;padding:18px;border-radius:18px;background:var(--t-card);border:var(--t-bd);box-shadow:var(--t-sh-s)}
.av-menu .m{display:inline-block;padding:2px 12px;border-radius:99px;background:var(--t-red);color:#fff;font:900 14px var(--t-en)}
.av-menu b{display:block;margin-top:10px;font:900 18px var(--t-disp)}
.av-menu p{margin-top:6px;line-height:1.8;font-size:14.5px}
.av-lv details>*:not(summary){padding:0 20px 16px}
.av-week li{grid-template-columns:44px 1fr}

/* 試験 */
.av-exams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.av-exam{padding:20px 22px;border-radius:20px;background:var(--t-card);border:var(--t-bd);box-shadow:var(--t-sh-s)}
.av-exam h3{font:900 20px var(--t-disp);margin-bottom:8px}
.av-exam p{line-height:1.85;font-size:14.5px}
.av-exam .ai-reads{margin-top:12px}

/* 安全 */
.av-safe{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.av-safe li{padding:12px 16px 12px 46px;position:relative;border-radius:14px;background:var(--t-card);border:2px solid var(--t-line);font-weight:800;line-height:1.7}
.av-safe li::before{content:"✓";position:absolute;left:14px;top:11px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--t-mint);color:#fff;font:900 13px var(--t-en)}

@media (max-width:900px){
  .av-step,.av-two,.av-pair,.av-mobile{grid-template-columns:1fr}
  .av-step-t{position:static}
  .av-pick,.av-exams{grid-template-columns:1fr}
  .av-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .av-mobile .av-shot.phone{margin:0 auto}
}
@media (max-width:560px){
  .av-menu{grid-template-columns:1fr}
  .av-step{gap:16px}
  .av-shot.phone{max-width:240px}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .av-shot-img{background:#fff}
  :root:not([data-theme=light]) .av-data{background:rgba(61,107,255,.14)}
  :root:not([data-theme=light]) .av-tip{background:rgba(255,201,60,.14)}
}
:root[data-theme=dark] .av-data{background:rgba(61,107,255,.14)}
:root[data-theme=dark] .av-tip{background:rgba(255,201,60,.14)}
.av .ai-tbl td:last-child{font-weight:inherit;color:inherit}
.av .av-tbl tbody tr:nth-child(7) td,.av .av-tbl tbody tr:nth-child(8) td:last-child{font-weight:800;color:var(--t-red2)}
