/* M86・M87：スマホ版の強化。mobile-boost.js と組で使う。 */
/* M86：長い区画の折りたたみ（通常版・900px以下。クラスは mobile-boost.js が付け外しする） */
/* overflow は clip（hidden だと、畳んだ中へ焦点やリンクが移った時に区画の内側だけがずれて表示が崩れる） */
.mb-fold { position: relative; max-height: var(--mb-keep, 1100px); overflow: hidden; overflow: clip; }
.mb-fold::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 150px; background: linear-gradient(rgba(7, 17, 38, 0), rgba(7, 17, 38, .94) 62%); pointer-events: none; }
.mb-more { display: none; }
.mb-fold > .mb-more { all: unset; box-sizing: border-box; position: absolute; left: 50%; bottom: 20px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px; transform: translateX(-50%); border-radius: 24px; background: #ffd24a; color: #071126; font-size: 16px; font-weight: 800; line-height: 1.2; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mb-fold > .mb-more:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.mb-fold > .mb-more::after { content: ""; width: 9px; height: 9px; margin-top: -5px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); }

/* M87：HP内の動画小窓（#video-modal が無いページ＝ビジュアル版で使う） */
dialog.mbv { width: min(94vw, 960px); max-width: none; margin: auto; padding: 0; border: 1px solid #2a2a2a; border-radius: 14px; background: #0a0a0a; color: #fff; overflow: hidden; }
dialog.mbv.is-vertical { width: min(94vw, 420px); }
dialog.mbv::backdrop { background: rgba(0, 0, 0, .8); }
.mbv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; }
.mbv-head p { min-width: 0; margin: 0; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbv-head button { all: unset; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 0 14px; border: 1px solid #fff6; border-radius: 22px; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.mbv-head button:focus-visible { outline: 3px solid #c6ff2e; outline-offset: 2px; }
.mbv-frame { background: #000; }
.mbv-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
dialog.mbv.is-vertical .mbv-frame iframe { aspect-ratio: 9 / 16; max-height: 76vh; }

/* M89：横に並んだ動画の位置を示す細い棒（mobile-boost.js が横並びのすぐ下に入れる。表示だけで、つまんで動かすものではない） */
.mb-bar { display: none; }
@media (max-width: 900px) {
  .mb-bar { display: block; position: relative; height: 6px; margin: 12px 16px 0; border-radius: 3px; background: rgba(120, 140, 170, .35); overflow: hidden; }
  .mb-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: #1f6feb; }
  [data-shorts-strip] .mb-bar i { background: #ffd24a; }
  body.editorial-home .mb-bar i { background: #c6ff2e; }
}

/* M90：スマホ用「トップへ戻る」。下の常設メニュー（高さ約57px）の上、左端に出す */
.mb-top { display: none; }
@media (max-width: 900px) {
  .mb-top:not([hidden]) { all: unset; box-sizing: border-box; position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 925; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 0 14px 0 10px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 22px; background: rgba(7, 17, 38, .92); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); -webkit-tap-highlight-color: transparent; }
  .mb-top svg { width: 20px; height: 20px; }
  .mb-top:focus-visible { outline: 3px solid #ffd24a; outline-offset: 2px; }
  body.editorial-home .mb-top:not([hidden]) { background: rgba(10, 10, 10, .92); border-color: #c6ff2e; }
  html.sf-open .mb-top { display: none !important; }
}

/* M93：開いた区画の「たたむ」 */
.mb-less { display: none; }
@media (max-width: 900px) {
  .mb-less { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; min-height: 48px; margin: 28px auto 0; padding: 0 28px; border: 2px solid #1f6feb; border-radius: 24px; background: #fff; color: #0b2a5b; font-size: 16px; font-weight: 800; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mb-less::after { content: ""; width: 9px; height: 9px; margin-top: 5px; border-left: 3px solid currentColor; border-top: 3px solid currentColor; transform: rotate(45deg); }
  .mb-less:focus-visible { outline: 3px solid #ffd24a; outline-offset: 3px; }
}

/* M93：読み進み具合の線（画面いちばん上・スマホのみ） */
.mb-progress { display: none; }
@media (max-width: 900px) {
  .mb-progress { display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 935; height: 3px; pointer-events: none; }
  .mb-progress i { display: block; height: 100%; background: #ffd24a; transform: scaleX(0); transform-origin: 0 50%; }
  body.editorial-home .mb-progress i, html[data-mobile-theme="visual"] .mb-progress i { background: #c6ff2e; }
  html.sf-open .mb-progress { display: none; }
}

/* M93：資格の数字カードを、スマホでは1枚ずつ大きく横スワイプで見せる（下に位置の棒が出る） */
@media (max-width: 900px) {
  #main #achievements .stats-dashboard { display: flex; gap: 12px; margin-inline: -16px; padding: 4px 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #main #achievements .stats-dashboard::-webkit-scrollbar { display: none; }
  #main #achievements .stats-dashboard .stat-cell, #main #achievements .stats-dashboard .stat-cell:not(:first-child) { flex: 0 0 78%; min-height: 230px; padding: 22px 20px 20px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; }
  #main #achievements .stats-dashboard .stat-cell .stat-label, #main #achievements .stats-dashboard .stat-cell.stat-license:not(:first-child) .stat-label { font-size: 1.125rem; }
  #main #achievements .stats-dashboard .stat-number { font-size: clamp(4rem, 22vw, 5.5rem); line-height: 1; }
  #main #achievements .stats-dashboard .stat-unit { font-size: 1.25rem; }
  #main #achievements .stats-dashboard .stat-note { font-size: 1rem; line-height: 1.6; }
  #achievements .stats-dashboard + .mb-bar { margin-top: 8px; }
  /* 入口の小さなラベルが 11px だったので読める大きさに */
  .denken-label { font-size: 14px; }
}

/* M93：数字カードの自動送りを止める／再開するボタン（棒の下・右寄せ） */
.mb-auto { display: none; }
@media (max-width: 900px) {
  .mb-auto { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: max-content; min-height: 44px; margin: 8px 0 0 auto; padding: 0 16px; border: 1px solid #1f6feb; border-radius: 22px; background: #fff; color: #0b2a5b; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mb-auto:focus-visible { outline: 3px solid #ffd24a; outline-offset: 2px; }
}