/* 下のメニューを小さくする（2026-10-01 本人の依頼「もっと小さくてもいい」「下にスクロールすると少し小さく」。
   参考は本人が送った Instagram の画面収録）。問題集の .appnav（mode-switch.css）と勉強ログの .tabbar（log.css）の
   両方に効かせる。どのページでも最後に読む（mode-switch.css・log.css・v4.css・native-shell.css の後）。
   ・スマホ（<1024px）: 画面の端から浮いた角丸の帯。アイコンだけを出し、文字は読み上げ用に残す（font-size:0）。
     今いる画面だけ薄い丸で囲む。真ん中（問題集・撮る）は帯からはみ出さない 44px の丸。
     （2026-10-15: 問題集の .appnav はアイコンの下に文字も出し、出題中は帯ごと隠す。下の「文字を付ける」の段が上書きする）
     下へスクロールしている間は nav-compact.js が html に .is-nav-compact を付け、帯を 88% に縮めて少し透かす
     （押せる所は 50px × 0.88 = 44px を保つ）。動きを減らす設定では縮めない。
   ・PC（≥1024px）: 左のメニューを 232→208px（1400px 以上は 256→224px）に細くし、行と文字を一回り小さく。
   ・勉強ログの .tabbar は TikTok 型の5つ（2026-10-01 本人決定「A」）: みんな・ルーム・撮る・通知・自分。問題集の .appnav と同じ5列・同じ幅
     （390px で 366px）。真ん中の「撮る」は帯からはみ出さない 60px の紫の丸、帯の高さは 80px（問題集は 58px）。
     通知の未読の赤い点（.tab__dot）は通知のタブに付ける。押せる所は縮んでも 44px 以上（50〜56px × 0.88）。 */
:root{--dpg-nav-h:58px;--dpg-nav-gap:10px}

@media(max-width:1023.98px){
  .appnav,.tabbar{
    left:50%;right:auto;bottom:calc(var(--dpg-nav-gap) + env(safe-area-inset-bottom,0px));
    width:min(calc(100% - 24px),440px);max-width:none;height:var(--dpg-nav-h);
    transform:translateX(-50%);transform-origin:50% 100%;
    display:grid;grid-template-columns:repeat(5,1fr);align-items:center;gap:0;
    padding:3px 4px;box-sizing:border-box;
    border:1px solid rgb(229 205 184 / 70%);border-radius:999px;
    background:rgb(255 255 255 / 88%);
    -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
    box-shadow:0 8px 24px rgb(41 38 34 / 12%),0 1px 3px rgb(41 38 34 / 8%);
    transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .3s ease,box-shadow .3s ease
  }
  /* 勉強ログの帯は白ベース（2026-10-01 本人決定「A」）: 白・うすい灰色の線・色のない影（問題集の .appnav は紙色のまま） */
  .tabbar{background:rgb(255 255 255 / 92%);border-color:rgb(17 17 20 / 8%);box-shadow:0 8px 24px rgb(17 17 20 / 10%),0 1px 3px rgb(17 17 20 / 6%)}
  .is-nav-compact .appnav,.is-nav-compact .tabbar{
    transform:translateX(-50%) scale(.88);
    background:rgb(255 255 255 / 76%);
    box-shadow:0 4px 14px rgb(41 38 34 / 10%)
  }
  .is-nav-compact .tabbar{background:rgb(255 255 255 / 80%);box-shadow:0 4px 14px rgb(17 17 20 / 8%)}

  /* 1つずつの押せる所。文字は見せず（読み上げには残る）、アイコンを真ん中に。 */
  .appnav__item,.tabbar .tab{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
    height:50px;min-height:0;padding:0;border-radius:999px;
    font-size:0;line-height:0;letter-spacing:0;background:none
  }
  .appnav__item[aria-current=page],.tabbar .tab[aria-current=page]{background:none}
  .appnav__item>svg,.tabbar .tab>svg{position:relative;width:26px;height:26px}
  .tabbar .tab>.chara{position:relative;width:30px;height:30px}
  /* 今いる画面だけ、アイコンの後ろに薄い丸。 */
  .appnav__item::before,.tabbar .tab::before{
    content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
    border-radius:50%;background:transparent;transition:background-color .2s ease
  }
  .appnav__item[aria-current=page]::before,.tabbar .tab[aria-current=page]::before{background:#f3edff}
  .appnav__item .dot{top:6px;right:calc(50% - 20px)}

  /* 真ん中（問題集・撮る）。帯の中に収まる 44px の丸。 */
  .appnav__item--main::before,.tabbar .tab--plus::before{display:none}
  .appnav__disc,.tab__disc{width:44px;height:44px;margin:0;border:0}
  .appnav__disc svg,.tab__disc svg{width:24px;height:24px}
  .appnav__disc{box-shadow:0 2px 0 #4215a8,0 4px 10px rgb(101 53 181 / 26%)}
  .appnav__item--main:not([aria-current=page]) .appnav__disc{box-shadow:inset 0 0 0 2px #6535b5}
  .tab__disc{box-shadow:0 4px 12px rgb(101 53 181 / 30%)}

  /* 勉強ログの帯（5つ）。幅と5列は上の .appnav と同じ。高さ 80px・真ん中は 60px の紫の丸。 */
  .tabbar{height:80px;padding:4px}
  .tabbar .tab{height:56px}
  .tabbar .tab--plus{height:60px}
  .tabbar .tab__disc{width:60px;height:60px}
  .tabbar .tab__disc svg{width:28px;height:28px}
  .tabbar .tab::before{width:48px;height:48px;margin:-24px 0 0 -24px}
  /* 通知のタブの赤い点（アイコンの右上） */
  .tabbar .tab .tab__dot{position:absolute;top:8px;right:calc(50% - 21px)}

  /* 本文の下の空き（最後の行が帯に隠れないように）。帯 58px（勉強ログは 80px）＋下の隙間 10px＋余裕。 */
  :root{--tabbar:68px}
  body:has(.tabbar){--tabbar:92px}
  body:has(.appnav){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body:has(.appnav) .dpg-site-status{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}

/* 2026-10-15 下のメニュー（問題集の .appnav）に文字を付ける（本人選択「5つのまま文字を付け、出題中は隠す」）。
   文字は今のマークアップの素のテキスト（勉強計画・ランキング・問題集・合格体験記・マイページ）のまま、アイコンの下に出す。
   大きさは帯の幅で決める（12〜14px）。5文字（合格体験記・マイページ・ランキング）が隣の文字とくっつかずに1列の幅へ収まる大きさ
   （帯の幅 ÷ 27。390px の画面で 13px 前後、帯がいちばん広い 440px で 14px）。帯の幅を測るので、帯を container にする。
   帯は 58→64px、1つずつの押せる所は 50→56px（下へスクロールして 88% に縮んでも 49px で 44px 以上）。真ん中の丸は文字の分だけ 44→36px。
   両端の文字が角の丸みに掛からないよう、帯の角丸は 999px → 22px。5列は同じ幅（minmax(0,1fr)。文字の長さで列の幅が揺れない）。
   今いる画面の印は、アイコンの後ろの横長の丸（文字に掛からない）。勉強ログの .tabbar は今まで通り（アイコンだけ）。
   どのページでも読むファイルなので、勉強計画・ランキング・合格体験記などのページの下のメニューにも同じく出る。 */
:root{--dpg-nav-bg-compact:rgb(255 255 255 / 88%)}
@media(max-width:1023.98px){
  :root{--dpg-nav-h:64px}
  .appnav{container-type:inline-size;grid-template-columns:repeat(5,minmax(0,1fr));border-radius:22px}
  /* 縮んだ帯（下へスクロール中）も、文字が後ろの本文に負けないよう透け具合は縮む前と同じにする */
  .is-nav-compact .appnav{background:var(--dpg-nav-bg-compact)}
  /* font-size は2回書く: container の単位（cqw）が使えない古いブラウザでは1つ目の 13px が残る */
  /* アイコン（真ん中は丸）の段 36px と文字の段 16px の2段。アイコンと丸の中心、文字の行が5つとも同じ高さにそろう */
  .appnav__item{display:grid;grid-template-rows:36px 16px;row-gap:2px;align-content:center;align-items:center;justify-items:center;
    height:56px;font-size:13px;font-size:clamp(12px,calc(100cqw / 27),14px);line-height:16px;letter-spacing:-.02em}
  .appnav__item>svg{width:24px;height:24px}
  .appnav__item::before{top:5px;width:56px;height:28px;margin:0 0 0 -28px;border-radius:14px}
  .appnav__item .dot{top:4px;right:calc(50% - 22px)}
  .appnav__disc{width:36px;height:36px}
  .appnav__disc svg{width:20px;height:20px}
  /* 本文の下の空き: 帯 64px＋下の隙間 10px＋余裕 16px */
  body:has(.appnav){padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  body:has(.appnav) .dpg-site-status{bottom:calc(86px + env(safe-area-inset-bottom,0px))}

  /* 出題中（解いている間 data-screen="quiz"・読んで覚えるの解説 "practice-study"）は下のメニューを出さない。
     戻るのは出題の見出しの「トップへ」（data-role="exit" / "practice-exit"）。index.html では #site-navigation が #app より前に
     あるので :has で決める（先例: mode-switch.css の赤い点）。帯を消したら、本文の下の空きとトーストの高さも帯が無い時に戻す。
     PC（1024px 以上）の左の縦のメニューは出題中も出したまま。 */
  body:has(#app:is([data-screen="quiz"],[data-screen="practice-study"])) .appnav{display:none}
  body:has(#app:is([data-screen="quiz"],[data-screen="practice-study"])){
    padding-bottom:env(safe-area-inset-bottom,0px);--dpg-nav-h:0px;--dpg-nav-gap:0px
  }
  body:has(#app:is([data-screen="quiz"],[data-screen="practice-study"])) .dpg-site-status{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}

/* 2026-10-16 後戻りの直し（本人の答え: すり合わせ第2版 Q3「直してよい」。見ているテスト: tools/qa-nav-compact.mjs の「187px」「375px＋zoom 2」）:
   2026-10-16 に名前の文字（12〜14px）を足したので、設定を2倍に拡大した幅（187px。帯は 163px で1列が約 31px）では5つの名前（最長5文字＝約 59px）が
   隣と重なって読めなかった（375px の画面を zoom 2 にしても同じ）。文字を12px より小さくはせず、帯の幅（@container。.appnav が container-type:inline-size）が
   1列 56px 未満（5文字が12pxで並ばない＝280px 未満）のときだけ、名前を隠して絵だけにする（今いる画面の薄い丸は 36px の円・真ん中の丸は 36→32px）。
   名前は消さずに font-size:0 で残す（読み上げには今までどおり「勉強計画」「ランキング」「問題集」「合格体験記」「マイページ」と読まれる。2026-10-01 の絵だけの帯と同じやり方）。
   ふつうの幅は変わらない（390px の帯の中身は約 356px、320px は約 286px）。1つずつの高さは 56px（44px 以上）のまま。1列の幅は 187px で約 31px
   （5つを 163px の帯に並べるので 44px にはならない。2倍に拡大した実際の大きさでは約 61px）。 */
@media(max-width:1023.98px){
  @container (max-width:279.98px){
    .appnav__item{grid-template-rows:36px;row-gap:0;font-size:0;line-height:0;letter-spacing:0}
    .appnav__item::before{top:10px;width:36px;height:36px;margin:0 0 0 -18px;border-radius:50%}
    /* 真ん中の丸は 36→32px（1列が約 31px。隣の絵とくっつかない） */
    .appnav__disc{width:32px;height:32px}
  }
}

@media(max-width:1023.98px) and (prefers-reduced-motion:reduce){
  .appnav,.tabbar,.appnav__item::before,.tabbar .tab::before{transition:none}
  .is-nav-compact .appnav,.is-nav-compact .tabbar{transform:translateX(-50%)}
}

@media(min-width:1024px){
  body:has(.appnav),body:has(.tabbar){padding-left:208px}
  .appnav,.tabbar{width:208px;gap:2px;padding:14px 10px}
  .appnav__switch,.tabbar__switch{margin:0 0 8px}
  .appnav__switch .switcher,.tabbar__switch .switcher{min-height:44px;gap:6px}
  .appnav__switch .switcher .face,.tabbar__switch .switcher .face{width:32px;height:32px}
  .appnav__switch .switcher__name,.tabbar__switch .switcher__name{font-size:16px}
  .appnav__switch .switcher--log .switcher__name,.tabbar__switch .switcher--log .switcher__name{font-size:17px;text-underline-offset:5px}
  .appnav__switch .switcher__down,.tabbar__switch .switcher__down{width:18px;height:18px}
  .appnav__item,.tabbar .tab{min-height:44px;gap:10px;padding:0 12px;font-size:15px;border-radius:12px}
  .appnav__item svg,.tabbar .tab svg{width:22px;height:22px}
  .tabbar .tab .chara{width:26px;height:26px}
  .appnav__disc{width:26px;height:26px}
  .appnav__disc svg{width:18px;height:18px}
  .appnav--quiz .appnav__item--main .appnav__disc,.appnav--quiz .appnav__item--main:not([aria-current=page]) .appnav__disc{width:22px;height:22px}
  .appnav--quiz .appnav__item--main .appnav__disc svg{width:22px;height:22px}
  .tabbar .tab--plus{min-height:46px;margin-top:8px;border-radius:12px}
}
@media(min-width:1400px){
  body:has(.appnav),body:has(.tabbar){padding-left:224px}
  .appnav,.tabbar{width:224px}
}

/* ---- PC の左の縦メニュー（.appnav--quiz）を「広い／アイコンだけ／隠す」の3つにする（2026-10-08 本人承認。動きは assets/sidebar-collapse.js）。
   状態は <html data-appnav="icons|hidden">（無ければ広い）。1024px 未満（下のメニュー）と iOS の殻（html.is-native）には何も効かない。
   色・角丸・影は上のメニューと同じ値（新しい色は作らない）。このファイルはどのページでも最後に読むので、上の幅の規則に勝つ。
   幅は --dpg-appnav-w（本文の左の余白とメニューの幅と仕切りの位置が全部これ）。広いときの幅は今まで通り（208px、1400px 以上は 224px）。 */
:root{--dpg-appnav-wide:208px}
@media(min-width:1400px){:root{--dpg-appnav-wide:224px}}

.appnav__resize,.appnav__reveal,.appnav__fold{display:none}

@media(min-width:1024px){
  html:not(.is-native){--dpg-appnav-w:var(--dpg-appnav-wide)}
  html:not(.is-native)[data-appnav="icons"]{--dpg-appnav-w:64px}
  html:not(.is-native)[data-appnav="hidden"]{--dpg-appnav-w:0px}
  html:not(.is-native) body:has(.appnav--quiz){padding-left:var(--dpg-appnav-w);transition:padding-left .2s ease}
  html:not(.is-native) .appnav--quiz{width:var(--dpg-appnav-w);transition:width .2s ease,transform .2s ease,visibility 0s}

  /* アイコンだけ（幅 64px）。文字は見せず（読み上げには残す）、名前はホバー／フォーカスの札で出す。
     アイコンは広いときと同じ位置から動かさない（幅の移り変わりの途中で横にずれない）。 */
  html:not(.is-native)[data-appnav="icons"] .appnav--quiz{padding:14px 10px;overflow:visible}
  html:not(.is-native)[data-appnav="icons"] .appnav--quiz .appnav__item{
    justify-content:flex-start;gap:0;padding:0 11px;font-size:0;line-height:0;letter-spacing:0
  }
  html:not(.is-native)[data-appnav="icons"] .appnav--quiz .appnav__switch .switcher{
    justify-content:flex-start;gap:0;padding:0 6px
  }
  html:not(.is-native)[data-appnav="icons"] .appnav--quiz .switcher__name,
  html:not(.is-native)[data-appnav="icons"] .appnav--quiz .switcher__down{display:none}
  html:not(.is-native)[data-appnav="icons"] .appnav--quiz .appnav__fold{gap:0;padding:0 11px;font-size:0;line-height:0;letter-spacing:0}
  html:not(.is-native)[data-appnav="icons"] .appnav--quiz .appnav__fold svg{transform:scaleX(-1)}
  /* 赤い点（勉強ログの案内）は顔の右上にそのまま残す。 */
  html:not(.is-native)[data-appnav="icons"] .appnav--quiz .switcher .dot{top:2px;left:34px}
  html:not(.is-native)[data-appnav="icons"] .appnav--quiz .appnav__item:is(:hover,:focus-visible)[data-tip]::after,
  html:not(.is-native)[data-appnav="icons"] .appnav--quiz .appnav__fold:is(:hover,:focus-visible)[data-tip]::after,
  html:not(.is-native)[data-appnav="icons"] .appnav--quiz .switcher:is(:hover,:focus-visible)[data-tip]::after{
    content:attr(data-tip);position:absolute;left:calc(100% + 18px);top:50%;transform:translateY(-50%);z-index:40;
    padding:6px 10px;border-radius:8px;background:#292622;color:#fff;
    font-size:14px;font-weight:800;line-height:1.3;letter-spacing:0;white-space:nowrap;pointer-events:none;
    box-shadow:0 8px 24px rgb(41 38 34 / 12%)
  }

  /* メニューの一番下の「畳む」ボタン（広い⇄アイコンだけ）。見た目は上の行（.appnav__item）と同じ色・角丸・文字で、押すと薄い紫。
     アイコンは広いときは ‹‹ 、アイコンだけのときは左右を返して ››（広げる）。位置は2つの状態で同じ（メニューの下の端）。 */
  html:not(.is-native) .appnav--quiz .appnav__fold{
    display:flex;align-items:center;justify-content:flex-start;gap:10px;position:relative;box-sizing:border-box;min-height:44px;margin:auto 0 0;padding:0 12px;
    border:0;border-radius:12px;background:none;color:#65594d;font:inherit;font-size:15px;font-weight:800;line-height:1.3;white-space:nowrap;text-align:left;cursor:pointer
  }
  .appnav__fold svg{width:22px;height:22px;flex:none}
  .appnav__fold:hover{background:#f3edff;color:#6535b5}
  .appnav__fold:focus-visible{outline:3px solid #6535b5;outline-offset:3px}

  /* 隠す。メニューは左へ出して見えなくし（フォーカスも飛ばさない）、左上に「☰」だけ出す。
     ☰ が本文（上端いっぱいの帯や、左端から始まる欄）に被らないよう、本文の上に 48px の空きを取ってそこへ置く。 */
  html:not(.is-native)[data-appnav="hidden"] body:has(.appnav--quiz) #site-navigation{height:48px}
  html:not(.is-native)[data-appnav="hidden"] .appnav--quiz{
    width:64px;transform:translateX(-100%);visibility:hidden;pointer-events:none;
    transition:width .2s ease,transform .2s ease,visibility 0s .2s
  }
  html:not(.is-native)[data-appnav="hidden"] .appnav__reveal{
    display:grid;place-items:center;position:fixed;top:6px;left:8px;z-index:30;box-sizing:border-box;width:36px;height:36px;min-width:0;min-height:0;margin:0;padding:0;
    border:1px solid #eee5da;border-radius:12px;background:#fff;color:#65594d;cursor:pointer;
    box-shadow:0 8px 24px rgb(41 38 34 / 12%)
  }
  .appnav__reveal svg{width:20px;height:20px}
  .appnav__reveal:hover{background:#f3edff;color:#6535b5}
  .appnav__reveal:focus-visible{outline:3px solid #6535b5;outline-offset:3px}
}

/* メニューの右の端の仕切り（ドラッグで幅を変える）。解説との間の仕切り（quiz.css の .qz-split-handle）と同じ見た目・操作感。
   マウスの端末（PC のブラウザと Mac 版）だけ。隠したときは出さない（ドラッグの最中だけ残す）。
   押せる幅は 16px で、メニューの縁（border）をその中ほどに置く。 */
@media(min-width:1024px) and (hover:hover) and (pointer:fine){
  html:not(.is-native):not([data-appnav="hidden"]) .appnav__resize,
  html.dpg-sidebar-dragging .appnav__resize{
    display:block;position:fixed;top:0;bottom:0;left:calc(var(--dpg-appnav-w) - 12px);z-index:31;width:16px;margin:0;padding:0;
    border-radius:8px;cursor:col-resize;touch-action:none;transition:left .2s ease
  }
  .appnav__resize::before{
    content:"";position:absolute;top:0;bottom:0;left:7px;width:2px;border-radius:1px;background:transparent;transition:background .15s ease
  }
  .appnav__resize:hover::before,
  .appnav__resize:focus-visible::before,
  html.dpg-sidebar-dragging .appnav__resize::before{background:#6535b5}
  .appnav__resize:focus-visible{outline:3px solid #6535b5;outline-offset:2px}
  /* 握る所の目印（解説との間の仕切りと同じ 8×44px）。メニューの高さの中ほど。 */
  .appnav__resize-grip{
    position:absolute;top:45%;left:4px;display:block;width:8px;height:44px;border-radius:4px;
    background:#e5cdb8;box-shadow:inset 2px 0 0 #fff,inset -2px 0 0 #fff
  }
  .appnav__resize:hover .appnav__resize-grip,
  html.dpg-sidebar-dragging .appnav__resize-grip{background:#6535b5}
  html.dpg-sidebar-dragging,html.dpg-sidebar-dragging *{cursor:col-resize!important;user-select:none!important}
}

/* 動きを減らす設定では、幅の移り変わり・札の色の変化を止める。 */
@media(prefers-reduced-motion:reduce){
  html body:has(.appnav--quiz),
  html .appnav--quiz,
  html[data-appnav="hidden"] .appnav--quiz,
  .appnav__resize,.appnav__resize::before{transition:none!important}
}

/* 2026-10-16 周8（使い込んでいる人役 スマホ「棚の『＋今の冊に足す』が下のメニューの裏」「復習の準備の『まとめて』が張り付いた『復習をはじめる』の裏」）:
   下に固定の物（下のメニュー・張り付いた［はじめる］［理解した］）の高さを --dpg-fixed-bottom の1か所にまとめ、スクロールして出す時
   （Tab で進む・scrollIntoView・ページ内の移動）の下の余白にする。出した物が固定の物の裏で止まらない。本文の下の空き（body の padding-bottom）と同じ考え。 */
@media(max-width:1023.98px){
  html{--dpg-fixed-bottom:calc(var(--dpg-nav-gap,10px) + var(--dpg-nav-h,64px) + var(--g-s1,8px));scroll-padding-bottom:calc(var(--dpg-fixed-bottom) + env(safe-area-inset-bottom,0px))}
  /* 出題中・読んで覚えるの解説は下のメニューを出さない（上の規則）ので、メニューの分は足さない */
  html:has(#app:is([data-screen="quiz"],[data-screen="practice-study"])){--dpg-fixed-bottom:var(--g-s1,8px)}
}
@media(max-width:599.98px){
  /* 張り付いた［はじめる］（出題の設定・復習の準備・読んで覚えるの設定。dpg-result.css）と［理解した］（dpg-tabs.css）は、ボタンの高さと上下の隙間の分を足す */
  html:has(#app .qz-setup > .qz-setup__start){--dpg-fixed-bottom:calc(var(--dpg-nav-gap,10px) + var(--dpg-nav-h,64px) + var(--g-s1,8px) + var(--g-btn-h,52px) + var(--g-s2,16px))}
  html:has(#app[data-screen="practice-study"] .qz-page > [data-role="practice-understood"]){--dpg-fixed-bottom:calc(var(--g-btn-h,52px) + var(--g-s2,16px))}
}

/* 2026-10-18 区間11 D1（決まりの外の案。関所で採否を聞く）: 下のメニュー（スマホ）の1つ目は「今日」（絵は今日の印のカレンダー）。
   PC の左のメニューは「勉強計画」のまま。名前と絵は2つずつ DOM にあり、幅で片方を隠す（display:none なので読み上げも見えている方だけ）。
   行き先（スマホは dashboard#dpl-today）は site-shell.js の syncTodayNav が幅で付け替える。 */
.appnav__item .appnav__ico--short,.appnav__item .appnav__lbl--short{display:none}
@media(max-width:1023.98px){
  .appnav__item .appnav__ico--wide,.appnav__item .appnav__lbl--wide{display:none}
  .appnav__item .appnav__ico--short{display:block}
  .appnav__item .appnav__lbl--short{display:inline}
}

/* 2026-10-19 区間13 NAV（本人の依頼 10-19 0:45「下へスクロールすると隠れ、上へ戻すと出る」「問題集とか勉強計画をアイコンだけにした方がいいかも」。
   参考は本人の画面録画の YouTube と X。測った数と案の比べは 区間13/nav/報告.md）。スマホの下のメニュー（問題集の .appnav）だけ。勉強ログの .tabbar・PC の左のメニューは変えない。
   1) アイコンだけ: 名前（今日・ランキング・問題集・合格体験記・マイページ）は .appnav__lbl（site-shell.js）に入れ、1px の見えない箱にして読み上げに残す
      （読み上げの名前は前と同じ。aria-hidden にはしない）。13.2px の名前（細い幅の例外）は無くなる。寸法は 2026-10-01 のアイコンだけの帯と同じ:
      帯 64→58px・角は丸く（999px）・1つずつの押せる所 56→50px（44px 以上）・アイコン 26px・真ん中の丸 44px・今いる画面はアイコンの後ろの 46px の薄い紫の丸。
   2) 隠す・出す: nav-compact.js が html に .is-nav-hidden を付けたら、帯の高さ＋下の隙間＋影の分だけ下（画面の外）へ。動かすのは transform だけ（0.2秒。
      隠す時はだんだん速く・出す時はだんだんゆっくり＝本人の動画の YouTube の帯と同じ形）。本文の下の空き・ほかの張り付いた物の高さは変えない（中身はずれない）。
      問題集の帯は前の「縮める」（.is-nav-compact の 88%）をやめ、隠す・出すに替える。下のメニューの中にフォーカスがある時は必ず出す（:focus-within。JS の前でも）。
      動きを減らす設定では隠さない（JS も付けない。下の段は念のため）。 */
@media(max-width:1023.98px){
  :root{--dpg-nav-h:58px}
  .appnav{border-radius:999px;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
  .appnav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50px;row-gap:0}
  .appnav__item>svg{width:26px;height:26px}
  .appnav__item::before{top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%}
  .appnav__item .dot{top:6px;right:calc(50% - 20px)}
  .appnav__disc{width:44px;height:44px}
  .appnav__disc svg{width:24px;height:24px}
  .appnav__lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  /* 本文の下の空き: 帯 58px＋下の隙間 10px＋余裕 16px（2026-10-01 と同じ） */
  body:has(.appnav){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body:has(.appnav) .dpg-site-status{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  /* 縮めない（隠す・出すに替えた） */
  .is-nav-compact .appnav{transform:translateX(-50%);box-shadow:0 8px 24px rgb(41 38 34 / 12%),0 1px 3px rgb(41 38 34 / 8%)}
  .is-nav-hidden .appnav{
    transform:translate(-50%,calc(100% + var(--dpg-nav-gap,10px) + 24px + env(safe-area-inset-bottom,0px)));
    transition-timing-function:cubic-bezier(.4,0,1,1)
  }
  .is-nav-hidden .appnav:focus-within{transform:translateX(-50%)}
  /* 設定を2倍に拡大した幅（帯が 280px 未満。1列が約 31px）: 丸を 36px・真ん中の丸を 32px に（2026-10-16 の決まりと同じ） */
  @container (max-width:279.98px){
    .appnav__item::before{width:36px;height:36px;margin:-18px 0 0 -18px}
    .appnav__item>svg{width:24px;height:24px}
    .appnav__disc{width:32px;height:32px}
    .appnav__disc svg{width:20px;height:20px}
  }
}
@media(max-width:1023.98px) and (prefers-reduced-motion:reduce){
  .appnav{transition:none}
  .is-nav-hidden .appnav{transform:translateX(-50%)}
}

/* 2026-10-19 区間15 FIX3（評価役 EVAL の直す所1「アイコンだけで、今いる所の印が弱い」。本人の頼みはアイコンだけなので、名前は出さずアイコンで分かるようにする）:
   スマホの下のメニュー（問題集の .appnav）で、今いる所（aria-current="page"）は 3つで示す。色だけに頼らない（形も変える）。
   ①アイコンが塗りつぶしの形になる（site-shell.js の .appnav__fill。ふだんは線の絵）②色は紫（mode-switch.css の今までの色 #6535b5）③アイコンの下に小さな点。
   後ろの薄い紫の丸（46px）は今までどおり。真ん中の問題集は、今までどおり紫に塗った丸（今いない時は白い丸に紫の輪）が印なので、点は付けない。
   PC の左のメニューは変えない（塗りの絵は出さない）。高コントラスト（forced-colors）では塗りの絵をやめ、点だけを字の色で出す。 */
@media(max-width:1023.98px){
  .appnav__item[aria-current=page] .appnav__fill{display:inline}
  .appnav__item[aria-current=page]:not(.appnav__item--main)::after{
    content:"";position:absolute;left:50%;bottom:4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:currentColor;pointer-events:none
  }
}
@media(max-width:1023.98px) and (forced-colors:active){
  .appnav__item[aria-current=page] .appnav__fill{display:none}
  .appnav__item[aria-current=page]:not(.appnav__item--main)::after{forced-color-adjust:none;background:CanvasText}
}

/* 2026-10-19 区間15 FIX4（評価役 EVAL2 の新2「200%（187px）で、今いる所の印が帯の端からはみ出す・真ん中の問題集の丸に重なる」）:
   設定を2倍に拡大した幅（帯が 280px 未満。1列が約 28px）では、今いる所のアイコンの後ろの薄い紫の丸（36px）が列より大きく、
   1つ目（今日）では帯の左の端に掛かり、2つ目（ランキング）では真ん中の問題集の丸（32px）に重なっていた。丸を列の中に収めるとアイコン（24px）と
   同じ大きさになって丸に見えないので、この幅だけ薄い丸を出さない。今いる所は FIX3 の ①塗りつぶしの形 ②紫 ③下の点 の3つで示す
   （点は 5px・列の真ん中・帯の内側。ほかのアイコンにも真ん中の丸にも掛からない）。320・390・1280 は変えない（この @container の外は前のまま）。 */
@media(max-width:1023.98px){
  @container (max-width:279.98px){
    .appnav__item[aria-current=page]::before{background:transparent}
  }
}

/* 2026-10-19 区間16 NAV2（関所P の Q11 本人の選択: 指に1:1（X 型）・上の帯も隠す・浮いた［続きを解く］・勉強ログの帯も隠す。動きは nav-compact.js。
   「今のまま（時間で 0.2秒）」も選ばれたので仮置きで、指に1:1でついて動き、指を離した時は半分を境に 0.2秒で出し切る／隠し切る）:
   1) 下の帯（問題集の .appnav・勉強ログの .tabbar）は、JS が渡す「動いた量」--dpg-nav-shift（px）だけ下へ。変数が無い時は .is-nav-hidden の有る無しで
      全部出た形・全部隠れた形（前と同じ値）。指で動かしている間と慣性で動く間（html.is-nav-moving）は 0.2秒の動きを止める（指に遅れない）。
      勉強ログの帯は前の「縮める」（.is-nav-compact の 88%）をやめ、問題集の帯と同じに隠れる・出る（0.3→0.2秒）。.is-nav-compact の印は前のまま付く。
   2) 上の帯（.phead--quiz）: html.is-head-auto（スマホの幅で、動きを減らす設定でない時に JS が付ける）の間は、#site-navigation の箱を外して
      （display:contents。中の物の並び・読み上げ・Tab の順は変わらない）上の帯を本文の上に留める（もとの sticky のまま）。--dpg-head-shift（px）だけ上へ、
      全部隠れた時は帯の高さだけ上へ（iPhone アプリでは時刻の下の帯の裏へ）。出題中・読んで覚えるの解説（下の帯を出さない画面）は前のまま留めない。
      キーボードで上の帯の中に来たら出す（:has(:focus-visible)）。赤い点・名前ボタン（押すと切り替えのシート）は帯と一緒に動く。
   3) 浮いた［続きを解く］（.dpg-nav-fab。ホームの紫のカードの「続きから」の1冊目が画面の外へ出た時だけ JS が出す）: 右下・帯の上 12px。
      帯が動くと同じ量だけ下へ（帯が全部隠れた時は画面の下から 16px で止まって残る＝X の［＋］と同じ）。押す所 48px・字 16px・白い字に紫（#6535b5。7.6:1）。
      文字を打っている間（html.is-nav-typing）・出題中は出さない。PC は出さない。動きを減らす設定では動かない（出る・消えるも動きなし）。 */
.dpg-nav-fab{display:none}
@media(max-width:1023.98px){
  .appnav,.is-nav-compact .appnav{transform:translate(-50%,var(--dpg-nav-shift,0px))}
  .is-nav-hidden .appnav{transform:translate(-50%,var(--dpg-nav-shift,calc(100% + var(--dpg-nav-gap,10px) + 24px + env(safe-area-inset-bottom,0px))))}
  .tabbar{transition:transform .2s cubic-bezier(.2,.8,.2,1),background-color .3s ease,box-shadow .3s ease}
  .tabbar,.is-nav-compact .tabbar{transform:translate(-50%,var(--dpg-nav-shift,0px))}
  .is-nav-compact .tabbar{background:rgb(255 255 255 / 92%);box-shadow:0 8px 24px rgb(17 17 20 / 10%),0 1px 3px rgb(17 17 20 / 6%)}
  .is-nav-compact body.lg .tabbar{box-shadow:var(--pb-nav-shadow)}
  .is-nav-hidden .tabbar{transform:translate(-50%,var(--dpg-nav-shift,calc(100% + var(--dpg-nav-gap,10px) + 24px + env(safe-area-inset-bottom,0px))));transition-timing-function:cubic-bezier(.4,0,1,1)}
  .is-nav-hidden .appnav:focus-within,.is-nav-hidden .tabbar:focus-within{transform:translateX(-50%)}

  html.is-head-auto body:not(:has(#app:is([data-screen="quiz"],[data-screen="practice-study"]))) #site-navigation{display:contents}
  html.is-head-auto body:not(:has(#app:is([data-screen="quiz"],[data-screen="practice-study"]))) .phead--quiz{
    transform:translateY(calc(-1 * var(--dpg-head-shift,0px)));transition:transform .2s cubic-bezier(.2,.8,.2,1)}
  html.is-head-auto.is-nav-hidden body:not(:has(#app:is([data-screen="quiz"],[data-screen="practice-study"]))) .phead--quiz{
    transform:translateY(calc(-1 * var(--dpg-head-shift,100%)));transition-timing-function:cubic-bezier(.4,0,1,1)}
  html.is-head-auto body:not(:has(#app:is([data-screen="quiz"],[data-screen="practice-study"]))) .phead--quiz:has(:focus-visible){transform:none}

  .dpg-nav-fab{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(var(--dpg-nav-gap,10px) + var(--dpg-nav-h,58px) + 12px + env(safe-area-inset-bottom,0px));z-index:29;
    display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;min-width:44px;min-height:48px;margin:0;padding:0 18px 0 14px;
    border:0;border-radius:999px;background:#6535b5;color:#fff;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
    font-size:16px;font-weight:800;line-height:1.2;letter-spacing:0;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
    box-shadow:0 3px 0 #4215a8,0 8px 18px rgb(101 53 181 / 30%);
    transform:translateY(min(var(--dpg-nav-shift,0px),calc(var(--dpg-nav-h,58px) + var(--dpg-nav-gap,10px) - 4px)));
    transition:transform .2s cubic-bezier(.2,.8,.2,1);animation:dpg-nav-fab-in .2s cubic-bezier(.2,.8,.2,1)}
  .is-nav-hidden .dpg-nav-fab{transform:translateY(calc(var(--dpg-nav-h,58px) + var(--dpg-nav-gap,10px) - 4px));transition-timing-function:cubic-bezier(.4,0,1,1)}
  .dpg-nav-fab:hover{background:#5a2ea6}
  .dpg-nav-fab:focus-visible{outline:3px solid #292622;outline-offset:3px}
  .dpg-nav-fab__ico{flex:none;width:20px;height:20px}
  .dpg-nav-fab[hidden],.is-nav-typing .dpg-nav-fab,body:has(#app:is([data-screen="quiz"],[data-screen="practice-study"])) .dpg-nav-fab{display:none}

  html.is-nav-moving :is(.appnav,.tabbar,.phead--quiz,.dpg-nav-fab),
  html.is-head-auto.is-nav-moving body:not(:has(#app:is([data-screen="quiz"],[data-screen="practice-study"]))) .phead--quiz{transition:none}
}
@keyframes dpg-nav-fab-in{from{opacity:0;scale:.92}}
/* 区間16 NAV2 第2の組（帯が隠れた時に動く物は、指に1:1の途中の位置でも帯と重ならないように、帯が動いた量について動く）:
   張り付いた［はじめる］（出題の設定・復習の準備・読んで覚えるの設定。dpg-result.css の .qz-setup__start。599px 以下だけ張り付く）も、
   帯が動いた量（--dpg-nav-shift）だけ下へ。帯が全部隠れた時は画面の下から 8px（帯の分を詰める）。動きは帯と同じ 0.2秒・指で動かす間は止める。
   transition は .qz-btn の押した時の縮み（transform・opacity）を残して bottom を足す。動きを減らす設定では帯が隠れないので前のまま。
   ほかの浮いた物（ホームとダッシュボードの知らせ）は帯が隠れても動かない（帯から離れるだけで重ならない）ので前のまま。 */
@media(max-width:599.98px) and (prefers-reduced-motion:no-preference){
  html:not(.is-nav-hidden) #app .qz-setup > .qz-setup__start{
    bottom:calc(var(--dpg-nav-gap,10px) + var(--dpg-nav-h,58px) + var(--g-s1,8px) + env(safe-area-inset-bottom,0px) - min(var(--dpg-nav-shift,0px),calc(var(--dpg-nav-h,58px) + var(--dpg-nav-gap,10px))));
    transition:transform var(--dur-fast,.12s) var(--ease-out,ease-out),opacity var(--dur-fast,.12s) var(--ease-out,ease-out),bottom .2s cubic-bezier(.2,.8,.2,1)}
  html.is-nav-hidden #app .qz-setup > .qz-setup__start{bottom:calc(var(--g-s1,8px) + env(safe-area-inset-bottom,0px));
    transition:transform var(--dur-fast,.12s) var(--ease-out,ease-out),opacity var(--dur-fast,.12s) var(--ease-out,ease-out),bottom .2s cubic-bezier(.4,0,1,1)}
  html.is-nav-moving #app .qz-setup > .qz-setup__start{transition:transform var(--dur-fast,.12s) var(--ease-out,ease-out),opacity var(--dur-fast,.12s) var(--ease-out,ease-out)}
}
@media(max-width:1023.98px) and (prefers-reduced-motion:reduce){
  .appnav,.is-nav-compact .appnav,.is-nav-hidden .appnav,.tabbar,.is-nav-compact .tabbar,.is-nav-hidden .tabbar{transform:translateX(-50%);transition:none}
  html.is-head-auto body .phead--quiz,html.is-head-auto.is-nav-hidden body .phead--quiz{transform:none;transition:none}
  .dpg-nav-fab,.is-nav-hidden .dpg-nav-fab{transform:none;transition:none;animation:none}
}
@media(max-width:1023.98px) and (forced-colors:active){
  .dpg-nav-fab{border:2px solid ButtonText}
}

/* ---- iPhone アプリの入口（PC の左のメニューの下。2026-10-22 本人決定 Q5 の B。site-shell.js の .appnav__app）。
   PC の幅の Web だけ。スマホの下のメニュー・iPhone アプリ（is-native）・Mac アプリ（is-desktop）では出さない。
   メニューを畳んだ時（アイコンだけ）と、画面の高さが 640px 未満の時は QR をしまい、アイコンに載せたとき（ホバー・フォーカス）だけ右に QR を出す。 */
.appnav__app{display:none}
@media(min-width:1024px){
  html:not(.is-native):not(.is-desktop) .appnav--quiz .appnav__app{
    display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;box-sizing:border-box;margin:auto 0 8px;padding:12px 10px;
    border:1px solid #f0e2d0;border-radius:16px;background:#fff7ee;color:#292622;text-decoration:none;text-align:center
  }
  html:not(.is-native):not(.is-desktop) .appnav--quiz .appnav__app + .appnav__fold{margin-top:0}
  .appnav__app:hover{border-color:#cdb6ef}
  .appnav__app:focus-visible{outline:3px solid #6535b5;outline-offset:3px}
  .appnav__app-head{display:flex;align-items:center;gap:8px;align-self:stretch;font-size:15px;font-weight:800;line-height:1.3;white-space:nowrap}
  .appnav__app-icon{display:block;width:28px;height:28px;border-radius:7px;flex:none}
  .appnav__app-qr{display:block;width:112px;height:112px;padding:6px;box-sizing:content-box;background:#fff;border-radius:8px}
  .appnav__app-note{font-size:12px;line-height:1.5;color:#65594d}
  /* しまった形: アイコンと名前の1行（高さ 44px）。QR はホバー・フォーカスで右に出す。 */
  html:not(.is-native):not(.is-desktop)[data-appnav="icons"] .appnav--quiz .appnav__app{padding:7px 7px;min-height:44px;justify-content:center}
  html:not(.is-native):not(.is-desktop)[data-appnav="icons"] .appnav--quiz .appnav__app-name,
  html:not(.is-native):not(.is-desktop)[data-appnav="icons"] .appnav--quiz .appnav__app-note{display:none}
  html:not(.is-native):not(.is-desktop)[data-appnav="icons"] .appnav--quiz .appnav__app-qr{
    display:none;position:absolute;left:calc(100% + 14px);bottom:0;z-index:40;box-shadow:0 8px 24px rgb(41 38 34 / 16%);border:1px solid #f0e2d0
  }
  html:not(.is-native):not(.is-desktop)[data-appnav="icons"] .appnav--quiz .appnav__app:is(:hover,:focus-visible) .appnav__app-qr{display:block}
}
@media(min-width:1024px) and (max-height:639.98px){
  html:not(.is-native):not(.is-desktop) .appnav--quiz .appnav__app{padding:7px 12px;min-height:44px;justify-content:center}
  html:not(.is-native):not(.is-desktop) .appnav--quiz .appnav__app-note{display:none}
  html:not(.is-native):not(.is-desktop) .appnav--quiz .appnav__app-qr{
    display:none;position:absolute;left:calc(100% + 14px);bottom:0;z-index:40;box-shadow:0 8px 24px rgb(41 38 34 / 16%);border:1px solid #f0e2d0
  }
  html:not(.is-native):not(.is-desktop) .appnav--quiz .appnav__app:is(:hover,:focus-visible) .appnav__app-qr{display:block}
}