/* M61/M63：通常版の最終カスケード。PC（901px以上）は既存CSSのまま。 */
/* 本文の包みはPCではレイアウトを変えず、スマホだけスクロール領域にする。 */
.denki-ai-body { display: contents; }
.next-nav .mobile-nav-extra { display: none; }
@media (max-width: 900px) {
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .next-hero { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; }
  .next-hero .next-header { position: relative; order: -1; padding: 12px 16px; gap: 10px; background: #050f28; }
  .next-hero .next-header .next-brand { flex: 1 1 155px; gap: 8px; }
  .next-hero .next-header .next-bolt { flex-basis: 32px; width: 32px; height: 36px; }
  .next-brand strong { font-size: 1rem; }
  .next-brand small { font-size: .625rem; letter-spacing: .06em; }
  .next-header .version-switch-btn { min-height: 48px; padding: 6px 10px; gap: 6px; }
  .next-header .version-switch-btn strong { font-size: .95rem; }
  .next-header .version-switch-btn small { font-size: .75rem; }
  .next-hero hero-particle-carousel { position: relative; inset: auto; width: 100%; aspect-ratio: auto; }
  .next-hero hero-particle-carousel[random-per-page] .hpc-frame { position: relative; inset: auto; display: block; width: 100%; height: auto; }
  .next-hero .hpc-error { position: relative; inset: auto; padding: 24px 16px; }
  .next-hero .hero-static-fallback { position: relative; inset: auto; display: block; width: 100%; height: auto; }
  .next-hero .next-header .next-nav { display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: 4px 12px; order: 3; }
  .next-hero .next-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; }
  .mobile-nav-ready .next-hero .next-header .next-nav { display: none; }
  .mobile-nav-ready #back-to-top { display: none; }
  #denki-ai-launcher { display: flex; flex-direction: row; justify-content: center; gap: 6px; left: max(16px, env(safe-area-inset-left)); right: auto; bottom: max(12px, env(safe-area-inset-bottom)); width: min(144px, calc(50% - 24px)); height: auto; min-height: 52px; padding: 6px 8px; border-radius: 12px; }
  #denki-ai-launcher .denki-ai-launcher-bolt img { width: 28px; height: 28px; }
  #denki-ai-launcher .denki-ai-launcher-text { font-size: .875rem; letter-spacing: 0; }
  .mobile-menu-toggle { max-width: calc(50% - 24px); min-height: 52px; padding-inline: 12px; }
  body.mobile-menu-open #denki-ai-launcher, body.modal-open #denki-ai-launcher, body.elec-consult-open #denki-ai-launcher { visibility: hidden; }
  #denki-ai-modal:not([hidden]) ~ .mobile-menu-toggle { display: none; }
  .next-info-inner { width: calc(100% - 32px); padding: 28px 0; }
  .next-copy { width: 100%; text-align: left; }
  .next-copy h1 { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.25; }
  .next-eyebrow { margin-bottom: 12px; font-size: .7rem; letter-spacing: .06em; }
  .next-logo-card { margin-bottom: 12px; }
  .next-logo-card img { height: 34px; }
  .next-lead { margin-top: 16px; font-size: 1rem; line-height: 1.8; }
  .next-info-panel .next-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; }
  .next-info-panel .next-video-link { order: 0; grid-template-columns: 54px minmax(0, 1fr); min-height: 0; padding: 14px; gap: 12px; text-align: left; }
  .next-info-panel .denken-badge-mark { width: 50px; height: 50px; }
  .next-info-panel .denken-badge-copy { align-items: flex-start; }
  .next-info-panel .next-video-link strong { display: block; }
  .next-info-panel .next-video-link strong b { font-size: 1.125rem; }
  .next-info-panel .next-video-link .denken-play { font-size: 1rem; }
  .next-info-panel .next-video-link small { font-size: .8rem; }
  .next-info-panel .next-text-link { min-height: 44px; padding: 8px 12px; border: 0; justify-content: flex-start; text-decoration: underline; }
  .next-info-panel .next-primary { min-height: 48px; padding: 12px 16px; font-size: 1rem; }
  .next-info-panel .map-btn-wrap { margin-top: 4px; }
  .next-info-panel .map-btn, .next-info-panel .map-btn::before, .next-info-panel .map-btn-arrow { animation: none; }
  .next-info-panel .map-btn-main { font-size: 1.1rem; flex-wrap: wrap; justify-content: center; }
  .next-info-panel .map-disclaimer-note { margin: 0; font-size: .8rem; }
  .news-flash-bar { padding-inline: 16px; }
  .news-flash-title { font-size: 1rem; }
  .news-flash-meta { white-space: normal; }
  .visual-entry { margin-inline: 16px; }
  #discover { padding: 20px 16px; }
  #discover .discover-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #discover .discover-link { min-height: 64px; padding: 10px; }
  #discover .discover-link strong { font-size: 1rem; }
  #discover .discover-link small { font-size: .8rem; }
  #main .section, #main .reading-section, #ai-value-message { padding-block: 36px; }
  #main .section > .container, #ai-value-message > .container { width: 100%; max-width: 100%; padding-inline: 16px; }
  #main .section-head h2, #main .reading-section .section-head h2, #ai-value-message .ai-doc-head h2 { font-size: clamp(1.6rem, 5.5vw, 2rem); line-height: 1.45; overflow-wrap: anywhere; }
  #main .section :is(.keep, h2, h3) { white-space: normal; }
  #main .section :is(.section-head > p, .info-card p, .career-card p, .message-copy p, .cta-copy p) { font-size: 1rem; line-height: 1.8; }
  #main :is(.card-grid, .card-grid.five, .license-grid, .career-grid, .career-highlight-grid, .comparison-grid, .practice-category-grid, .success-feature-card, .video-grid, .achievement-grid, .message-grid, .footer-inner) { grid-template-columns: minmax(0, 1fr); }
  #main .lab-photo-grid, #main .lab-photo-grid--three, #main .success-photo-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #main :is(.info-card, .license-card, .career-card, .story-card, .practice-category-body, .success-feature-body) { min-width: 0; padding: 20px; }
  #main .reading-details > summary { padding: 14px 16px; font-size: 1rem; }
  #main .reading-details-body { padding-inline: 16px; }
  #main .lab-photo-card figcaption { padding: 16px; }
  .field-divider { padding-top: 18px; }
  .field-divider-label { flex: 0 1 auto; white-space: normal; }
  .site-footer .footer-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .site-footer a { display: inline-block; min-height: 44px; padding-block: 8px; overflow-wrap: anywhere; }
  .site-footer .container { width: calc(100% - 32px); }
  #denki-ai-modal { padding: 0; align-items: stretch; }
  #denki-ai-modal .denki-ai-modal__panel { box-sizing: border-box; width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); overflow: hidden; }
  #denki-ai-modal .denki-ai-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #denki-ai-modal .denki-ai-log { flex: 0 0 auto; overflow: visible; }
  #denki-ai-modal .denki-ai-head { position: relative; top: auto; flex: 0 0 auto; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); gap: 8px; }
  #denki-ai-modal .denki-ai-avatar, #denki-ai-modal .denki-ai-avatar img { width: 32px; height: 32px; }
  #denki-ai-modal .denki-ai-head-text h2 { color: #fff; font-size: 1rem; line-height: 1.5; }
  #denki-ai-modal .denki-ai-status { display: none; }
  #denki-ai-modal .denki-ai-head-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  #denki-ai-modal .denki-ai-close { min-width: 76px; min-height: 48px; padding: 8px 12px; margin: 0; white-space: nowrap; font-size: 1rem; font-weight: 700; line-height: 1.5; color: #0b1d35; background: #fff; border: 2px solid #fff; touch-action: manipulation; }
  #denki-ai-modal .denki-ai-close:hover { color: #0b1d35; background: #d9f7ff; border-color: #d9f7ff; }
  #denki-ai-modal .denki-ai-close:focus-visible, #denki-ai-launcher:focus-visible { outline: 3px solid #ffd27c; outline-offset: 2px; }
  #denki-ai-modal :is(.denki-ai-msg, .denki-ai-choice, input, textarea) { font-size: 1rem; line-height: 1.75; }
  #denki-ai-modal .denki-ai-choice { min-height: 48px; white-space: normal; }
  #denki-ai-modal .denki-ai-choices { flex-wrap: wrap; }
  #denki-ai-modal .elec-guide-copy p { font-size: 1rem; }
  #denki-ai-modal #elec-portrait { width: 96px; height: 96px; }
  .intro-loader { display: none; }
  body.is-loading { overflow: auto; }
  body.is-loading .next-hero, body.is-loading .next-info-panel { opacity: 1; visibility: visible; }
  .section-head, .reveal, [data-reveal] { scroll-margin-top: 16px; }
  .reveal { opacity: 1; transform: none; transition: none; }
  #main :is(.message-panel, .cta-panel) { padding: 24px 20px; }
  #main :is(.message-panel, .cta-panel) h2 { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.5; }
  #main :is(.message-panel, .cta-panel) p { font-size: 1rem; line-height: 1.8; }
  #main .cta-actions .btn { min-height: 48px; font-size: 1rem; white-space: normal; }
  #main :is(.stat-label, .stat-note) { font-size: .875rem; letter-spacing: .02em; }
  #main .drawing-entry { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  #main .drawing-entry img { width: min(100%, 320px); margin-inline: auto; }
  .denki-ai-launcher, .denki-ai-avatar, .scroll-current-line { animation: none; }
}
@media (max-width: 900px) and (max-height: 480px) {
  #denki-ai-modal #elec-portrait { width: 64px; height: 64px; }
}
@media (max-width: 360px) {
  /* 拡大時もヘッダーの高さをタイトルの折返しに左右させない。 */
  #denki-ai-modal .denki-ai-head { grid-template-columns: minmax(0, 1fr) auto; }
  #denki-ai-modal .denki-ai-avatar { display: none; }
  #denki-ai-modal .denki-ai-head-text h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .next-hero .next-header .next-brand { flex-basis: 100%; }
  #discover .discover-links { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .next-hero, .next-info-panel, .reveal, [data-reveal], .section-head { opacity: 1; visibility: visible; transform: none; transition: none; animation: none; }
}

@media (max-width: 300px) {
  /* 200%拡大などで有効幅が狭い場合は、常設入口同士の重なりを防ぐ。 */
  body { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
  #denki-ai-launcher { left: max(8px, env(safe-area-inset-left)); bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100% - 16px); }
  .mobile-menu-toggle { right: max(8px, env(safe-area-inset-right)); width: calc(100% - 16px); max-width: none; }
}

/* M74：スマホでは長い写真・資料のまとまりを「押すと開く」形にする（details.m-fold）。
   PC（901px以上）は直後の1行のインラインscriptが最初から開き、ボタンは隠す。PCの見た目は変えない。 */
.m-fold > summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 16px; border: 1px solid #0b5f80; border-radius: 10px; background: rgba(11, 95, 128, .06); color: #0b5f80; font-size: 1rem; font-weight: 800; line-height: 1.5; cursor: pointer; list-style: none; }
.m-fold > summary::-webkit-details-marker { display: none; }
.m-fold > summary::after { content: "＋"; margin-left: auto; font-weight: 900; }
.m-fold[open] > summary::after { content: "－"; }
.m-fold > summary:focus-visible { outline: 3px solid #0878ba; outline-offset: 3px; }
@media (min-width: 901px) { .m-fold[open] > summary { display: none; } }
@media (max-width: 900px) { .m-fold { margin-block: 20px; } .m-fold[open] > summary { margin-bottom: 16px; } }
.m-fold--dark > summary { border-color: #8fd8ff; background: rgba(143, 216, 255, .1); color: #e8f6ff; }
@media (max-width: 900px) {
  /* M74：スマホの文字は最低14px。装飾の「電験３種」マーク内だけ例外。 */
  .next-scroll-cue, .next-scroll-cue span, .next-brand small, .hero-ai-image-note, .hero-ai-image-note.hero-ai-image-note--top, .next-copy .next-eyebrow,
  .news-flash-link .news-flash-meta, .news-flash-link .news-flash-sub, .version-switch-copy small, .map-btn .map-btn-label, .map-btn .map-btn-sub,
  #main .stats-dashboard .upper-badge, #main .video-kicker, #main p.tag, #main .tag, #main .duration, #main .video-status, #main .eyebrow, #main p.eyebrow,
  .discover-link small, .denken-badge-copy small, .denken-badge-copy strong em, .next-actions .map-disclaimer-note,
  #main .drawing-entry small, #main .drawing-entry .drawing-eyebrow, #main .denki-ai-inline-btn { font-size: .875rem; }
  html body .next-header .version-switch-btn small, html body #discover .discover-link small, html body .next-video-link .denken-badge-copy small, html body #main .drawing-entry small, html body #main .drawing-entry .drawing-eyebrow, html body .denki-ai-inline-btn { font-size: .875rem; }
  /* M74：押しにくい場所を44px以上に。 */
  .next-scroll-cue { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  html body .power-future-source a, html body .power-future dt > a, html body dt > a { display: inline-block; padding-block: 10px; }
  #main .achievement-video-copy .video-coming-soon { display: inline-flex; align-items: center; min-height: 44px; }
  /* M74：動画の一覧と合格者の写真は、縦に積まず横に指で送る。 */
  #main .video-grid, #main .success-photo-grid { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scroll-padding-inline: 2px; }
  #main .video-grid > *, #main .success-photo-grid > * { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
  #main .video-grid::after, #main .success-photo-grid::after { content: ""; flex: 0 0 1px; }
}

/* M76：通常版の資格実績カードも、スマホ（360〜480px）で2列に。1枚目は横いっぱい、残り4枚は2×2。 */
@media (min-width: 360px) and (max-width: 480px) {
  #main .stats-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #main .stats-dashboard .stat-cell:first-child { grid-column: 1 / -1; }
  #main .stats-dashboard .stat-cell:last-child { grid-column: auto; }
  #main .stats-dashboard .stat-cell:not(:first-child) { padding: 14px 12px 12px; }
  #main .stats-dashboard .stat-cell.stat-license:not(:first-child) .stat-label { font-size: .9375rem; }
}