/* dpg-firstrun.css — はじめての5問・案内（コーチマーク）・できること一覧（2026-10-15 Cowork）。dpg-guide.css の決まり（トークン）を使う。 T3 案1: 地はクリーム・カードは線なしの白い面＋影・文字は 40/22/17/14px の4段・余白は8の倍数・押す物は44px以上。 紫＝押す物と選択中、緑＝正解、赤＝不正解（緑と赤は、結果の ✓✕ の丸にだけ使う）。紫の塗りボタンは足さない（主ボタンは各画面の持ち主のもの）。 ★ 詳細度: theme-dpg.css は :root[data-quiz-theme] の前置きで見出し・ボタンを決めているので、ここも同じ前置きで上書きする。 */ :root{ --fr-face:64px; /* コースの吹き出しのキャラの顔（PC は 80px） */ --fr-face-small:44px; /* 案内（コーチマーク）の顔 */ --fr-tile-art:72px; /* 分野のタイルの絵（スマホ） */ --fr-tile-art-wide:88px; /* 同（PC） */ --fr-row-cover:56px; /* 資格の行の表紙 */ --fr-scrim:rgb(41 38 34 / 40%); /* できることのシートの後ろの幕（ホームの検索の幕と同じ濃さ） */ --fr-sheet-shadow:0 -12px 32px rgb(41 38 34 / 16%); --fr-z-coach:60; /* 画面に固定された物の上に浮かせる吹き出し */ --fr-z-sheet:10003; /* できることのシート（ホームの検索 10002 の上） */ } /* キャラの丸（既存の character/dopagaki.webp を背景で出す。飾りなので にしない＝紹介ページへのリンクで包まれない） */ :root[data-quiz-theme] .dpg-face{display:block;flex:none;border-radius:50%;background:var(--accent-soft) url("character/dopagaki.webp") 50% 30%/cover no-repeat} /* ===== コースの画面（app.js の buildFirstRunPage） ===================================== */ :root[data-quiz-theme] .qz-page.dpg-fr{width:100%;max-width:960px;margin:0 auto;gap:var(--g-s3);padding:var(--g-s2) 0 var(--g-s5)} /* 上の段: キャラの一言（横幅いっぱい）。⚙ は見出しの行の右に置く */ :root[data-quiz-theme] .dpg-fr .dpg-fr__top{display:flex} :root[data-quiz-theme] .dpg-fr-say{display:flex;align-items:center;gap:var(--g-s2);min-width:0} :root[data-quiz-theme] .dpg-fr-face{width:var(--fr-face);height:var(--fr-face);box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--accent-soft)} :root[data-quiz-theme] .dpg-fr-bubble{position:relative;margin:0 0 0 var(--g-s1);padding:12px var(--g-s2);border-radius:20px;background:var(--accent-soft);color:var(--text);font-size:var(--g-fs-body);font-weight:800;line-height:1.5} :root[data-quiz-theme] .dpg-fr-bubble::before{content:"";position:absolute;left:-7px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:3px;background:inherit;transform:rotate(45deg)} :root[data-quiz-theme] .dpg-fr-bubble span{display:inline-block;text-wrap:pretty} :root[data-quiz-theme] .dpg-fr .dpg-fr__gear{flex:none;display:grid;place-items:center;width:var(--g-hit);height:var(--g-hit);border:0;border-radius:var(--g-radius-btn);background:var(--surface);box-shadow:var(--g-card-shadow);color:var(--text-2);font-size:22px;line-height:1;cursor:pointer} /* 2026-10-16 区間6の組み込み: 歯車は線の絵（app.js が views.js の lineIcon("gear") で出す。ほかの歯車と同じ1つの絵）。大きさは今までの字の大きさ（22px） */ :root[data-quiz-theme] .dpg-fr .dpg-fr__gear .dpg-ico{display:block;width:1em;height:1em} :root[data-quiz-theme] .dpg-fr .dpg-fr__head{display:flex;flex-direction:column;gap:var(--g-s1)} :root[data-quiz-theme] .dpg-fr .dpg-fr__headline{display:flex;align-items:center;justify-content:space-between;gap:var(--g-s1)} :root[data-quiz-theme] .dpg-fr .dpg-fr__title{margin:0;font-size:var(--g-fs-title);line-height:1.4;font-weight:900;color:var(--text)} :root[data-quiz-theme] .dpg-fr .dpg-fr__title:focus{outline:none} :root[data-quiz-theme] .dpg-fr .dpg-fr__lead{margin:0;font-size:var(--g-fs-small);line-height:1.6;color:var(--text-2)} :root[data-quiz-theme] .dpg-fr .dpg-fr__kicker{margin:0;font-size:var(--g-fs-small);font-weight:800;color:var(--accent)} /* ① 分野のタイル（スマホは横長の行、PC は横に3つの縦長のカード） */ :root[data-quiz-theme] .dpg-fr .dpg-fr-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--g-s2)} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile{display:grid;grid-template-columns:var(--fr-tile-art) minmax(0,1fr) var(--g-s3);align-items:center;gap:var(--g-s2);min-height:104px;padding:var(--g-s2);border:0;border-radius:var(--g-radius);background:var(--surface);box-shadow:var(--g-card-shadow);color:var(--text);text-align:left;cursor:pointer} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile:hover{box-shadow:var(--g-card-shadow-lift)} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile__art{display:block;width:var(--fr-tile-art);height:var(--fr-tile-art);border-radius:18px;overflow:hidden;background:var(--accent-soft)} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile__art img, :root[data-quiz-theme] .dpg-fr .dpg-fr-row__cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile__body{display:flex;flex-direction:column;gap:4px;min-width:0} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile__name{font-size:var(--g-fs-title);line-height:1.35;font-weight:900} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile__sample{display:block;font-size:var(--g-fs-small);line-height:1.5;color:var(--text-2)} :root[data-quiz-theme] .dpg-fr .dpg-fr-keep{display:inline-block} :root[data-quiz-theme] .dpg-fr .dpg-fr-keep--more{margin-left:.3em} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile__chev{font-size:28px;line-height:1;color:var(--accent);text-align:center} /* ① ② の下の文字リンク（3番手） */ :root[data-quiz-theme] .dpg-fr__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--g-s3)} :root[data-quiz-theme] .dpg-fr-link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--g-hit);padding:0 var(--g-s1);border:0;background:none;color:var(--accent);font-size:var(--g-fs-body);font-weight:700;line-height:1.4;text-decoration:underline;text-underline-offset:4px;cursor:pointer} /* ② どの資格？ */ :root[data-quiz-theme] .dpg-fr .dpg-fr-back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:var(--g-hit);padding:0 var(--g-s1) 0 0;border:0;background:none;color:var(--text);font-size:var(--g-fs-body);font-weight:800;cursor:pointer} :root[data-quiz-theme] .dpg-fr .dpg-fr-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--g-s1) var(--g-s2);padding:var(--g-s2);border-radius:var(--g-radius);background:var(--surface);box-shadow:var(--g-card-shadow);font-size:var(--g-fs-body)} :root[data-quiz-theme] .dpg-fr .dpg-fr-status p{margin:0} :root[data-quiz-theme] .dpg-fr .dpg-fr-sections{display:flex;flex-direction:column;gap:var(--g-s3)} :root[data-quiz-theme] .dpg-fr .dpg-fr-section{display:flex;flex-direction:column;gap:var(--g-s1)} :root[data-quiz-theme] .dpg-fr .dpg-fr-section__title{margin:0;font-size:var(--g-fs-small);font-weight:800;line-height:1.5;color:var(--text-2)} :root[data-quiz-theme] .dpg-fr .dpg-fr-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--g-s1)} :root[data-quiz-theme] .dpg-fr .dpg-fr-row{display:grid;grid-template-columns:var(--fr-row-cover) minmax(0,1fr) auto;align-items:center;gap:12px;min-height:80px;padding:12px;border:0;border-radius:var(--g-radius);background:var(--surface);box-shadow:var(--g-card-shadow);color:var(--text);text-align:left;cursor:pointer} :root[data-quiz-theme] .dpg-fr .dpg-fr-row:hover{box-shadow:var(--g-card-shadow-lift)} :root[data-quiz-theme] .dpg-fr .dpg-fr-row__cover{display:block;width:var(--fr-row-cover);height:var(--fr-row-cover);border-radius:14px;overflow:hidden;background:var(--accent-soft)} :root[data-quiz-theme] .dpg-fr .dpg-fr-row__body{display:flex;flex-direction:column;gap:2px;min-width:0} :root[data-quiz-theme] .dpg-fr .dpg-fr-row__name{font-size:var(--g-fs-body);line-height:1.4;font-weight:800;overflow-wrap:anywhere;word-break:auto-phrase} :root[data-quiz-theme] .dpg-fr .dpg-fr-row__meta{display:block;font-size:var(--g-fs-small);line-height:1.5;color:var(--text-2)} /* 行の右の「はじめる ›（5問・約3分）」。押すのは行全体（ボタン1つ）。紫の塗りは使わず、白地に紫の枠で押せることを示す。 言い方は「はじめる（5問・約3分）」にそろえる: 上に「はじめる ›」（17px）、下に所要（14px）。 */ :root[data-quiz-theme] .dpg-fr .dpg-fr-row__go{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:96px;min-height:var(--g-hit);padding:4px 12px;border:2px solid var(--accent);border-radius:var(--g-radius-btn);background:var(--surface);color:var(--accent);line-height:1.25;white-space:nowrap} :root[data-quiz-theme] .dpg-fr .dpg-fr-row__go-main{display:inline-flex;align-items:center;gap:4px;font-size:var(--g-fs-body);font-weight:800} :root[data-quiz-theme] .dpg-fr .dpg-fr-row__go-sub{font-size:var(--g-fs-small);font-weight:700;color:var(--text-2)} :root[data-quiz-theme] .dpg-fr .dpg-fr-row__chev{font-size:var(--g-fs-body);line-height:1} :root[data-quiz-theme] .dpg-fr .dpg-fr-row:hover .dpg-fr-row__go, :root[data-quiz-theme] .dpg-fr .dpg-fr-row:focus-visible .dpg-fr-row__go{background:var(--accent-soft)} :root[data-quiz-theme] .dpg-fr button:focus-visible, :root[data-quiz-theme] .dpg-fr-hint button:focus-visible{outline:3px solid var(--accent);outline-offset:3px} @media (min-width:480px){ :root[data-quiz-theme] .dpg-fr .dpg-fr-row{padding:12px var(--g-s2) 12px 12px;gap:var(--g-s2)} :root[data-quiz-theme] .dpg-fr .dpg-fr-row__go{padding:4px var(--g-s2)} } @media (min-width:768px){ :root{--fr-face:80px} :root[data-quiz-theme] .dpg-fr-bubble{padding:var(--g-s2) var(--g-s3)} :root[data-quiz-theme] .dpg-fr .dpg-fr-tiles{grid-template-columns:repeat(3,minmax(0,1fr))} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile{grid-template-columns:minmax(0,1fr) var(--g-s3);grid-template-rows:auto 1fr;align-items:end;gap:var(--g-s2) var(--g-s1);min-height:216px;padding:var(--g-s3)} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile__art{grid-column:1 / -1;align-self:start;width:var(--fr-tile-art-wide);height:var(--fr-tile-art-wide)} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile__chev{align-self:end;padding-bottom:4px} :root[data-quiz-theme] .dpg-fr .dpg-fr__links{justify-content:flex-start} } @media (min-width:1024px){ :root[data-quiz-theme] .qz-page.dpg-fr{padding-top:var(--g-s4)} :root[data-quiz-theme] .dpg-fr .dpg-fr-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g-s2)} } /* 2026-10-16 後戻りの直し（本人の答え: すり合わせ第2版 Q3「直してよい」。見ているテスト: tools/qa-dpg-design.mjs 節10・187px と 375px＋zoom 2）: 設定を2倍に拡大した幅（187px。画面は 375px のまま documentElement.style.zoom=2 でも同じ）で、キャラの横の吹き出しは幅 66px まで潰れて1〜2文字ずつの縦長になり、 分野のタイルは絵・›・余白で本文の列が 0px になって「IT・クラウド」が1文字ずつ折れていた。 2026-09 の決まり（R3「横2枚だと文字が1語ずつ折れる」。dpg-home.css・dpg-answer.css と同じ考え）で、画面の幅（@media）ではなく入れ物の幅（@container）で、 入れ物が 260px 未満のときだけ積む。吹き出しの段（.dpg-fr__top・結果の .dpg-fr-cheer）とタイルの並び（.dpg-fr-tiles）を入れ物にする （段の幅は 390px で約 354px・320px で約 284px なので、ふつうの幅は変わらない。187px は約 151px）。 上の @media より後ろに置いて、PC 用の並び（min-width:768px）にも同じ強さで勝たせる。 */ :root[data-quiz-theme] .dpg-fr .dpg-fr__top, :root[data-quiz-theme] .dpg-fr-cheer, :root[data-quiz-theme] .dpg-fr .dpg-fr-tiles{container-type:inline-size} @container (max-width:259.98px){ /* キャラの吹き出し: キャラの下に吹き出しを積む（吹き出しの ◆ は上の端へ。顔の輪の分、隙間を広げる） */ :root[data-quiz-theme] .dpg-fr-say{flex-direction:column;align-items:flex-start;gap:var(--g-s3)} :root[data-quiz-theme] .dpg-fr-bubble{box-sizing:border-box;max-width:100%;margin:0} :root[data-quiz-theme] .dpg-fr-bubble::before{left:var(--g-s3);top:-7px;margin-top:0} /* 分野のタイル: 1段目に絵と ›、2段目に名前と例（絵の横に本文の列を取らない）。名前は本文の大きさ（17px）にして1行に収める */ :root[data-quiz-theme] .dpg-fr .dpg-fr-tile{grid-template-columns:minmax(0,1fr) var(--g-s3);grid-template-rows:auto auto;grid-template-areas:"art chev" "body body";align-items:center;gap:var(--g-s1) var(--g-s1);min-height:0} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile__art{grid-area:art;align-self:start;justify-self:start} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile__body{grid-area:body} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile__chev{grid-area:chev;align-self:center;padding-bottom:0} :root[data-quiz-theme] .dpg-fr .dpg-fr-tile__name{font-size:var(--g-fs-body);text-wrap:balance} } /* 2026-10-16 すり合わせ第2版 Q3（はじめての5問のはみ出し）: 2画面目「どの資格？」の行（.dpg-fr-row）も、187px では表紙・［始める］の間で名前の列が 0px になり、 行が 37px はみ出していた。並び（.dpg-fr-rows）の幅が 260px 未満のときだけ、表紙 → 名前 → ［始める］の順に縦に積む（tools/qa-dpg-design.mjs 節10） */ :root[data-quiz-theme] .dpg-fr .dpg-fr-rows{container-type:inline-size} @container (max-width:259.98px){ :root[data-quiz-theme] .dpg-fr .dpg-fr-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"cover" "body" "go";justify-items:start;row-gap:var(--g-s1)} :root[data-quiz-theme] .dpg-fr .dpg-fr-row__cover{grid-area:cover} :root[data-quiz-theme] .dpg-fr .dpg-fr-row__body{grid-area:body} :root[data-quiz-theme] .dpg-fr .dpg-fr-row__go{grid-area:go;min-width:0;justify-self:stretch} } /* ===== コースの結果の飾り（app.js の decorateFirstRun） ================================ */ :root[data-quiz-theme] .dpg-fr-cheer{display:flex;flex-direction:column;gap:var(--g-s2)} /* 2026-10-15 周3: 得点を主役にするため、キャラの顔 72 → 56px、5問の ✓✕ は 48px の塗りの丸 → 20px の小さな点（批評役「✕の列は小さな点に」）。 ✓ は緑の塗りの点、✕ は赤い輪だけ（塗らない）。形でも見分けられる。字は 14px（14px 未満にしない）。読み上げは今までどおり sr-only の文 */ :root[data-quiz-theme] .dpg-fr-say--result .dpg-fr-face{--fr-face:56px} :root[data-quiz-theme] .dpg-fr-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g-s1);margin:var(--g-s1) 0 0;padding:0;list-style:none} :root[data-quiz-theme] .qz-result-hero__score + .dpg-fr-dots{margin:0 0 var(--g-s1)} :root[data-quiz-theme] .dpg-fr-dot{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:var(--g-fs-small);font-weight:900;line-height:1} :root[data-quiz-theme] .dpg-fr-dot--ok{background:var(--success);color:var(--qz-on-accent)} :root[data-quiz-theme] .dpg-fr-dot--ng{background:transparent;box-shadow:inset 0 0 0 2px var(--danger);color:var(--danger)} /* 「続きから」のヒント1行の箱（区間4 で「もっと使いこなす（発展の案内）」の文字リンクを外した。発展の案内はホームの「？」＝できることから） */ :root[data-quiz-theme] .dpg-fr-hint{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 var(--g-s2);padding:var(--g-s1) var(--g-s2);border-radius:var(--g-radius);background:var(--surface-2);text-align:center} :root[data-quiz-theme] .dpg-fr-hint__text{display:flex;align-items:center;gap:var(--g-s1);margin:0;font-size:var(--g-fs-small);line-height:1.6;color:var(--text-2);text-align:left} /* 区間4（本人 Q4「はじめての5問の結果: 押せる物を減らす」）: コースの結果（app.js の decorateFirstRun が .dpg-fr-result を付ける）は 主ボタン・「次の5問へ」・「トップへ」とヒント1行だけ。ほかの解き方・勉強ログの1行・間違えた問題の一覧・読んで覚える（2番手）は見せない （いつもの結果では今までどおり出る。読んで覚えるの出口は結果の出口の関数の側でも外す＝別の担当）。 */ :root[data-quiz-theme] .qz-page.dpg-fr-result :is([data-role="result-more"], [data-role="auto-log"], [data-role="practice"]):not(#_), :root[data-quiz-theme] .qz-page.dpg-fr-result > .qz-wrong-list:not(#_){display:none} /* ===== ③ 5問を読み終えた後の1画面（区間4。app.js の buildFirstRunReady）: キャラの一言・見出し・所要・主ボタン1つ ===== */ :root[data-quiz-theme] .qz-page.dpg-fr--ready{max-width:640px} :root[data-quiz-theme] .dpg-fr--ready .dpg-fr-ready__go{min-height:var(--g-btn-h);margin-top:var(--g-s1);font-size:var(--g-fs-body)} :root[data-quiz-theme] .dpg-fr--ready .dpg-fr-ready__go:focus-visible{outline:2px solid var(--accent);outline-offset:2px} :root[data-quiz-theme] .dpg-fr-hint__icon{flex:none;display:grid;place-items:center;color:var(--accent)} :root[data-quiz-theme] .dpg-fr-hint__icon svg{width:24px;height:24px} :root[data-quiz-theme] .dpg-guide-note{margin:0;font-size:var(--g-fs-small);line-height:1.6;color:var(--text-2)} /* ===== ゲームのような案内（コーチマーク。dpg-guide.js） =============================== */ /* 吹き出しは対象の前後の流れに入る（押せる物を覆わない）。画面に固定された物にだけ --float で上に浮かせる。 */ /* scroll-margin: 見える所まで動かすとき、上の見出しの帯・下に固定された「次の問題へ」や下のメニューの裏に入らないように空ける */ :root[data-quiz-theme] .dpg-coach{--dpg-coach-arrow-x:40px;position:relative;display:flex;align-items:flex-start;gap:12px;box-sizing:border-box;max-width:560px;margin:var(--g-s2) 0;padding:12px var(--g-s2) 12px 12px;border-radius:var(--g-radius);background:var(--accent-soft);box-shadow:var(--g-card-shadow-lift);color:var(--text);text-align:left;scroll-margin:88px 0 136px} :root[data-quiz-theme] .dpg-coach__face{width:var(--fr-face-small);height:var(--fr-face-small);box-shadow:0 0 0 2px var(--surface)} :root[data-quiz-theme] .dpg-coach__body{display:flex;flex-direction:column;gap:var(--g-s1);min-width:0} :root[data-quiz-theme] .dpg-coach .dpg-coach__text{margin:0;font-size:var(--g-fs-body);line-height:1.55;font-weight:700;color:var(--text);text-wrap:pretty} :root[data-quiz-theme] .dpg-coach__acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--g-s2)} :root[data-quiz-theme] .dpg-coach .dpg-coach__ok{min-width:96px;min-height:var(--g-hit);padding:0 var(--g-s3);border:2px solid var(--accent);border-radius:999px;background:var(--surface);color:var(--accent);font-size:var(--g-fs-body);font-weight:800;cursor:pointer} :root[data-quiz-theme] .dpg-coach .dpg-coach__off{min-height:var(--g-hit);padding:0 4px;border:0;background:none;color:var(--text-2);font-size:var(--g-fs-small);text-decoration:underline;text-underline-offset:3px;cursor:pointer} :root[data-quiz-theme] .dpg-coach button:focus-visible{outline:3px solid var(--accent);outline-offset:3px} :root[data-quiz-theme] .dpg-coach__arrow{position:absolute;left:calc(var(--dpg-coach-arrow-x) - 9px);width:18px;height:18px;border-radius:3px;background:var(--accent-soft);transform:rotate(45deg)} :root[data-quiz-theme] .dpg-coach--down .dpg-coach__arrow{bottom:-8px} :root[data-quiz-theme] .dpg-coach--up .dpg-coach__arrow{top:-8px} /* 2026-10-18 レビューの指摘（Android・幅 360px、はじめての5問の問1）: 吹き出しの下の余白が 8px の所（dpg-tabs.css の .qz-practice-question > .dpg-coach--down）では、 菱形の上側が吹き出しの中へ入り、DOM で後ろにある菱形が［OK］の下の枠に重なって描かれていた。本文（文・［OK］・案内を消す）を菱形より手前に出す。 菱形は吹き出しと同じ色なので、隠れた所は見えず、外へ出る先だけが残る */ :root[data-quiz-theme] .dpg-coach__body{position:relative;z-index:1} :root[data-quiz-theme] .dpg-coach--float{position:fixed;z-index:var(--fr-z-coach);margin:0;max-width:none} /* 指している物の紫の輪（形はそのまま。outline は角の丸みに沿う） */ /* 2026-10-16 周10（批評役「角ばった紫の四角い枠は選び済みか不具合に見える」）: 濃い3pxの線をやめ、指す物と同じ角丸の薄い紫の光にする （半透明の紫の細い輪。color-mix が使えない端末は今までの紫の線のまま）。角の丸みが無いまとまりは dpg-guide.js の ringOn が --box を付け、 中のカードと同じ丸み（--dpg-coach-ring-r。無ければ --g-radius）にする。選択肢のまとまり・「理解した」・「次の問題へ」など、輪の付く所はすべてこの形。 */ :root[data-quiz-theme] .dpg-coach-ring{outline:3px solid var(--accent)!important;outline-color:color-mix(in srgb,var(--accent) 38%,transparent)!important;outline-offset:3px!important} :root[data-quiz-theme] .dpg-coach-ring.dpg-coach-ring--box{border-radius:var(--dpg-coach-ring-r,var(--g-radius))} /* 2026-10-16 周11（番人役「案内の輪の付いた［理解した］［次の問題へ］に Tab で来ても、焦点の輪が薄い案内の輪のまま」）: キーで焦点が来たときは、いつもの濃い紫の実線の輪に戻す（キーボードの人が今どこにいるか分かるように）。 */ :root[data-quiz-theme] .dpg-coach-ring:focus-visible{outline-color:var(--accent)!important} @media (prefers-reduced-motion:no-preference){ :root[data-quiz-theme] .dpg-coach.is-new{animation:dpg-coach-in .22s ease-out both} :root[data-quiz-theme] .dpg-coach-ring.is-pulse{animation:dpg-coach-ring .8s ease-in-out 3} } @keyframes dpg-coach-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes dpg-coach-ring{0%,100%{outline-offset:3px}50%{outline-offset:6px}} /* ===== 「できること」の一覧（dpg-guide.js の openAbilities）。スマホは下から、PC は真ん中のシート ===== */ html.dpg-abil-open body{overflow:hidden} :root[data-quiz-theme] .dpg-abil{position:fixed;inset:0;z-index:var(--fr-z-sheet)} :root[data-quiz-theme] .dpg-abil__scrim{position:absolute;inset:0;background:var(--fr-scrim)} :root[data-quiz-theme] .dpg-abil__sheet{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:88vh;max-height:88dvh;border-radius:24px 24px 0 0;background:var(--bg);color:var(--text);box-shadow:var(--fr-sheet-shadow);overflow:hidden} :root[data-quiz-theme] .dpg-abil__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--g-s2);padding:var(--g-s3) var(--g-s2) var(--g-s2) var(--g-s3);border-bottom:1px solid var(--separator)} :root[data-quiz-theme] .dpg-abil .dpg-abil__title{margin:0;font-size:var(--g-fs-title);line-height:1.4;font-weight:900;color:var(--text)} :root[data-quiz-theme] .dpg-abil .dpg-abil__title:focus{outline:none} :root[data-quiz-theme] .dpg-abil__lead{margin:4px 0 0;font-size:var(--g-fs-small);line-height:1.5;color:var(--text-2)} :root[data-quiz-theme] .dpg-abil .dpg-abil__close{flex:none;min-width:var(--g-hit);min-height:var(--g-hit);padding:0 var(--g-s2);border:0;border-radius:var(--g-radius-btn);background:none;color:var(--accent);font-size:var(--g-fs-body);font-weight:800;cursor:pointer} :root[data-quiz-theme] .dpg-abil__body{display:flex;flex-direction:column;gap:var(--g-s3);overflow-y:auto;overscroll-behavior:contain;padding:var(--g-s2) var(--g-s2) calc(var(--g-s3) + env(safe-area-inset-bottom,0px))} :root[data-quiz-theme] .dpg-abil .dpg-abil__sec-title{display:flex;align-items:center;gap:var(--g-s1);margin:0 0 var(--g-s1);font-size:var(--g-fs-body);line-height:1.4;font-weight:900;color:var(--text)} :root[data-quiz-theme] .dpg-abil__icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--accent-soft);color:var(--accent)} :root[data-quiz-theme] .dpg-abil__icon svg{width:20px;height:20px} :root[data-quiz-theme] .dpg-abil__list{display:flex;flex-direction:column;gap:var(--g-s1);margin:0;padding:0;list-style:none} :root[data-quiz-theme] .dpg-abil__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--g-s1) var(--g-s2);padding:12px var(--g-s2);border-radius:var(--g-radius);background:var(--surface);box-shadow:var(--g-card-shadow)} :root[data-quiz-theme] .dpg-abil__text{flex:1 1 240px;min-width:0} :root[data-quiz-theme] .dpg-abil__name{display:block;font-size:var(--g-fs-body);line-height:1.45;font-weight:800} :root[data-quiz-theme] .dpg-abil .dpg-abil__desc{margin:2px 0 0;font-size:var(--g-fs-small);line-height:1.6;color:var(--text-2)} :root[data-quiz-theme] .dpg-abil .dpg-abil__where{margin:4px 0 0;font-size:var(--g-fs-small);line-height:1.5;font-weight:700;color:var(--accent)} :root[data-quiz-theme] .dpg-abil__acts{display:flex;flex-wrap:wrap;gap:var(--g-s1)} :root[data-quiz-theme] .dpg-abil .dpg-abil__btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--g-hit);padding:0 var(--g-s2);border:2px solid var(--accent);border-radius:var(--g-radius-btn);background:var(--surface);color:var(--accent);font-size:var(--g-fs-body);font-weight:800;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer} :root[data-quiz-theme] .dpg-abil .dpg-abil__btn:hover{background:var(--accent-soft)} :root[data-quiz-theme] .dpg-abil :is(button,a):focus-visible{outline:3px solid var(--accent);outline-offset:3px} :root[data-quiz-theme] .dpg-abil__adv{display:flex;flex-direction:column;align-items:flex-start;gap:var(--g-s1);padding:var(--g-s2);border-radius:var(--g-radius);background:var(--accent-soft)} :root[data-quiz-theme] .dpg-abil .dpg-abil__adv .dpg-abil__sec-title{margin:0} :root[data-quiz-theme] .dpg-abil__status{margin:0;font-size:var(--g-fs-small);line-height:1.6;font-weight:700;color:var(--text)} :root[data-quiz-theme] .dpg-abil__status:empty{display:none} @media (min-width:720px){ :root[data-quiz-theme] .dpg-abil__sheet{left:50%;right:auto;top:50%;bottom:auto;width:min(640px,calc(100vw - 48px));max-height:min(86vh,880px);border-radius:24px;transform:translate(-50%,-50%);box-shadow:var(--g-card-shadow-lift)} :root[data-quiz-theme] .dpg-abil__body{padding:var(--g-s3)} } /* 2026-10-16 後戻りの直し（本人の答え: すり合わせ第2版 Q3「直してよい」。見ているテスト: tools/qa-dpg-design.mjs 節10・187px と 375px＋zoom 2）: 設定を2倍に拡大した幅（187px）で、［発展の案内を始める］が枠から 50px、「自分の問題集を作る」の［打ち込む・貼る］が 16px はみ出していた （ボタンが white-space:nowrap で、カードの中身（約 119px）より長い名前が折れなかった）。 画面の幅ではなくシートの中身の幅（.dpg-abil__body を入れ物にする。@container）で、260px 未満のときだけ、ボタンを縦に1列・カードの幅いっぱいにする。 名前は小さい字（14px。4段の1つ）にして［打ち込む・貼る］が1行に収まるようにし、それでも長い［発展の案内を始める］はボタンの中で語のまとまりごとに折り返す （行の長さをそろえるので「始める」のように1〜2文字が取り残されない）。 ふつうの幅は変わらない（390px は約 358px、320px は約 288px。PC のシートは 640px）。ボタンの高さは 44px 以上のまま。 */ :root[data-quiz-theme] .dpg-abil__body{container-type:inline-size} @container (max-width:259.98px){ :root[data-quiz-theme] .dpg-abil__acts{flex-direction:column;align-items:stretch;flex:1 1 100%;min-width:0} :root[data-quiz-theme] .dpg-abil__adv .dpg-abil__btn{align-self:stretch} :root[data-quiz-theme] .dpg-abil .dpg-abil__btn{box-sizing:border-box;max-width:100%;padding:6px var(--g-s1);font-size:var(--g-fs-small);white-space:normal;text-align:center;text-wrap:balance;word-break:auto-phrase} } /* 2026-10-19 区間16 FIX5（本人「メニューの『できること』のところが文字が途切れていたり、ちょっときれてる」・写真は PC の幅のマイページ）: ① 語の途中で折れていた（PC: 「制限時｜間」「プラス（有｜料）」「使えま｜す」、390: 「正｜答率」「［ここ｜を聞く］」「か｜ら」など）。 名前・説明・使う場所・見出しは、語のまとまりで折る（word-break:auto-phrase。Chrome・Edge。効かない Safari は今までの折り方のまま）。 説明と使う場所は、最後の行に1〜2字だけ残さない（text-wrap:pretty）。名前と見出しは行の長さをそろえる（balance）。 まとまりが1行より長い時だけ、どこででも折る（overflow-wrap:anywhere。はみ出さない）。字の大きさ・行の高さ・並びは変えない。 ② 中身を送る所（.dpg-abil__body）の上と下の端で、字が横に切れて見えていた（PC で開いた時の一番下の行など）。 端に地の色へ溶ける 16px の帯を重ね（position:sticky。押す・選ぶの邪魔をしない pointer-events:none）、続きがあると分かるようにする。 いちばん上・いちばん下まで送った時は、帯は余白の上に重なるだけで、字にはかからない（余白・間隔の分だけ負の margin で、送れる長さは変えない）。 ③ 拡大した幅（187px＝200%）で、見出しの横に［閉じる］が並んで「でき｜るこ｜と」と1〜2字ずつ折れ、見出しが高くなって 中身の見える所が 89px しかなかった。シートの幅が 260px 未満の時だけ、［閉じる］を見出しの上の右に置き、見出しと一言を幅いっぱいにする。 */ :root[data-quiz-theme] .dpg-abil :is(.dpg-abil__title,.dpg-abil__lead,.dpg-abil__sec-title,.dpg-abil__name,.dpg-abil__desc,.dpg-abil__where,.dpg-abil__status){overflow-wrap:anywhere;word-break:auto-phrase} :root[data-quiz-theme] .dpg-abil :is(.dpg-abil__lead,.dpg-abil__desc,.dpg-abil__where,.dpg-abil__status){text-wrap:pretty} :root[data-quiz-theme] .dpg-abil :is(.dpg-abil__title,.dpg-abil__sec-title,.dpg-abil__name){text-wrap:balance} :root[data-quiz-theme] .dpg-abil__body::before,:root[data-quiz-theme] .dpg-abil__body::after{content:"";position:sticky;z-index:1;display:block;flex:none;height:var(--g-s2);pointer-events:none} /* （sticky の位置は、送る箱の余白の内側から測られるので、top・bottom を余白の分だけ負にして、見えている所の端そのものに付ける） */ :root[data-quiz-theme] .dpg-abil__body::before{top:calc(-1 * var(--g-s2));margin:calc(-1 * var(--g-s2)) 0 calc(-1 * var(--g-s3));background:linear-gradient(var(--bg),transparent)} :root[data-quiz-theme] .dpg-abil__body::after{bottom:calc(-1 * (var(--g-s3) + env(safe-area-inset-bottom,0px)));margin:calc(-1 * var(--g-s3)) 0 calc(-1 * var(--g-s2));background:linear-gradient(transparent,var(--bg))} @media (min-width:720px){ :root[data-quiz-theme] .dpg-abil__body::before{top:calc(-1 * var(--g-s3))} :root[data-quiz-theme] .dpg-abil__body::after{bottom:calc(-1 * var(--g-s3))} } :root[data-quiz-theme] .dpg-abil__sheet{container:dpg-abil-sheet / inline-size} @container dpg-abil-sheet (max-width:259.98px){ :root[data-quiz-theme] .dpg-abil__head{flex-direction:column-reverse;align-items:stretch;gap:0;padding:var(--g-s1) var(--g-s2) var(--g-s2)} :root[data-quiz-theme] .dpg-abil .dpg-abil__close{align-self:flex-end;margin-right:calc(-1 * var(--g-s1))} } /* ===== 3日目の「勉強計画」のヒント（T2 案1。ホームの home-hint-slot の中） ============== */ :root[data-quiz-theme] .dpg-plan-hint{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:var(--g-s2);padding:var(--g-s2) var(--g-s5) var(--g-s2) var(--g-s2);border-radius:var(--g-radius);background:var(--surface);box-shadow:var(--g-card-shadow)} :root[data-quiz-theme] .dpg-plan-hint__face{width:56px;height:56px} :root[data-quiz-theme] .dpg-plan-hint__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--g-s1);min-width:0} :root[data-quiz-theme] .dpg-plan-hint .dpg-plan-hint__text{margin:0;font-size:var(--g-fs-body);line-height:1.5;font-weight:800;color:var(--text)} :root[data-quiz-theme] .dpg-plan-hint .dpg-plan-hint__go{display:inline-flex;align-items:center;justify-content:center;min-height:var(--g-hit);padding:0 var(--g-s3);border:2px solid var(--accent);border-radius:var(--g-radius-btn);background:var(--surface);color:var(--accent);font-size:var(--g-fs-body);font-weight:800;text-decoration:none} :root[data-quiz-theme] .dpg-plan-hint .dpg-plan-hint__close{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:var(--g-hit);height:var(--g-hit);border:0;border-radius:50%;background:none;color:var(--text-2);font-size:var(--g-fs-body);cursor:pointer} :root[data-quiz-theme] .dpg-plan-hint :is(a,button):focus-visible{outline:3px solid var(--accent);outline-offset:3px} /* ===== 2026-10-16 r10-study ============================================================ ① 案内の段 study の吹き出しを、読んで覚えるの「正解」の1行（practice-answer-card）のすぐ下に重ねる（dpg-guide.js の where "over"）。 場所を取らない（下の選択肢を押し下げない）＝1画面目に入る。縦の位置は dpg-guide.js が対象の下の端に合わせる（top）。 下に固定した「理解した」（z-index 8）より下に置く（固定のボタンを隠さない）。 */ :root[data-quiz-theme] .qz-practice-question:has(> .dpg-coach--over){position:relative} :root[data-quiz-theme] .dpg-coach.dpg-coach--over{position:absolute;left:var(--g-s2);right:var(--g-s2);z-index:7;margin:var(--g-s2) 0 0;max-width:none} /* 2026-10-16 周9（批評役 1280「吹き出しが選択肢 A を隠す」）: PC の2列では重ねずに、右の列の「理解した」のすぐ下の流れに置く（dpg-guide.js の "side"）。 右の列の並び（dpg-tabs.css の order。解説以外は 4）で解説の後ろへ回らないように、「理解した」と同じ順（0）にする。 */ :root[data-quiz-theme] .qz-page > .qz-side > .dpg-coach.dpg-coach--side:not(#_){order:0;margin:0;max-width:none} /* ② 「では、同じ5問を解いてみよう」（firstrun-ready）: PC では中身を真ん中にそろえる（幅は 560px まで。批評役 PC「左に寄って右が空き」）。 戻る「‹ トップへ」は左上のまま。スマホは今のまま（左そろえ）。 */ @media (min-width:600px){ :root[data-quiz-theme] .qz-page.dpg-fr--ready{max-width:560px} :root[data-quiz-theme] .dpg-fr--ready .dpg-fr__top{justify-content:center} :root[data-quiz-theme] .dpg-fr--ready .dpg-fr__head{align-items:center;text-align:center} }