@charset "UTF-8";
/* Mobile usability layer for mutarisu.net (2026-08-12).
   Loaded after page-specific styles. Desktop layout is unchanged. */

html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; }
img, picture, video, iframe, canvas, svg { max-width: 100%; }
a, code, pre { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow-x: auto; }
button, a, input, select, textarea { touch-action: manipulation; }
.mobile-menu-toggle { display: none; }
.mobile-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 14px 0 22px;
  border: 1px solid var(--line, #d5e1e9);
  border-radius: 12px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.mobile-table-scroll > table {
  margin: 0 !important;
  min-width: 100%;
  width: max-content;
  max-width: none;
}
.mobile-scroll-hint {
  display: none;
  margin: 12px 0 5px;
  color: #5b6d7a;
  font-size: .78rem;
}

@media (max-width: 840px) {
  html, body { max-width: 100%; overflow-x: clip; }
  body { font-size: 16px; line-height: 1.72; }

  /* Compact, tap-friendly navigation. Without JavaScript the original
     horizontally scrollable menu remains available. */
  header.mobile-nav-ready,
  header.site-header.mobile-nav-ready,
  header.snow-global-header.mobile-nav-ready {
    position: sticky !important;
    inset: 0 0 auto 0 !important;
    top: 0 !important;
    z-index: 1200 !important;
  }
  header.mobile-nav-ready .nav-container,
  header.site-header.mobile-nav-ready .nav-container,
  header.snow-global-header.mobile-nav-ready .snow-global-nav-container {
    width: min(100% - 24px, 1180px) !important;
    min-height: 58px !important;
    padding: 7px 0 !important;
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  header.mobile-nav-ready .logo,
  header.snow-global-header.mobile-nav-ready .snow-global-logo {
    min-width: 0;
    max-width: calc(100% - 118px);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .98rem !important;
    white-space: nowrap;
  }
  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 102px;
    min-height: 44px;
    margin-left: auto;
    padding: 8px 12px;
    border: 1px solid #a9becb;
    border-radius: 999px;
    background: #fff;
    color: #173747;
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:focus-visible,
  header.is-menu-open .mobile-menu-toggle {
    background: #123b63;
    border-color: #123b63;
    color: #fff;
    outline: none;
  }
  .mobile-menu-symbol { width: 1.1em; font-size: 1.2rem; line-height: 1; text-align: center; }

  header.mobile-nav-ready .site-nav,
  header.mobile-nav-ready .nav-container > .nav-links,
  header.snow-global-header.mobile-nav-ready .snow-global-nav {
    display: none !important;
    width: 100% !important;
  }
  header.mobile-nav-ready.is-menu-open .site-nav { display: block !important; }
  header.mobile-nav-ready.is-menu-open .nav-container > .nav-links,
  header.snow-global-header.mobile-nav-ready.is-menu-open .snow-global-nav {
    display: grid !important;
  }
  header.mobile-nav-ready .site-nav .nav-links,
  header.mobile-nav-ready.is-menu-open .nav-container > .nav-links,
  header.snow-global-header.mobile-nav-ready.is-menu-open .snow-global-nav {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px 0 4px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  header.mobile-nav-ready .nav-links li { min-width: 0; }
  header.mobile-nav-ready .nav-links a,
  header.snow-global-header.mobile-nav-ready .snow-global-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 8px 9px !important;
    border: 1px solid #d5e1e9;
    border-radius: 10px !important;
    background: #f5f9fb;
    color: #173747 !important;
    font-size: .88rem !important;
    line-height: 1.35 !important;
    text-align: center;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  header.mobile-nav-ready .nav-links a[aria-current="page"],
  header.snow-global-header.mobile-nav-ready .snow-global-nav a[aria-current="page"] {
    background: #123b63 !important;
    border-color: #123b63 !important;
    color: #fff !important;
  }

  /* Main pages */
  .page-shell, .container {
    width: min(100% - 24px, var(--content, 1160px)) !important;
    margin-inline: auto !important;
    padding-top: 16px !important;
  }
  .page-title {
    max-width: 100%;
    font-size: clamp(1.65rem, 7vw, 2.15rem) !important;
    line-height: 1.34 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-break: strict;
  }
  .page-lead { font-size: 1rem !important; line-height: 1.72; }
  .meta-line { text-align: left !important; line-height: 1.6; }
  .breadcrumb { margin-bottom: 13px !important; font-size: .8rem !important; }
  .breadcrumb ol { gap: 3px 6px !important; }
  .breadcrumb li:not(:last-child)::after { margin-left: 6px !important; }
  .hero {
    padding: 29px 19px !important;
    border-radius: 20px !important;
  }
  .hero h1 { font-size: clamp(1.8rem, 8.1vw, 2.45rem) !important; line-height: 1.32 !important; }
  .hero .lead { font-size: 1rem !important; line-height: 1.72; }
  .hero-actions { display: grid !important; gap: 10px !important; }
  .section {
    margin-top: 18px !important;
    padding: 18px 16px !important;
    border-radius: 15px !important;
  }
  .section h2 { font-size: clamp(1.3rem, 5.8vw, 1.7rem) !important; line-height: 1.38; overflow-wrap: anywhere; }
  .section h3, .card__body h3 { overflow-wrap: anywhere; }
  .section-header { display: block !important; margin-bottom: 14px !important; }
  .section-header > a { display: inline-flex; min-height: 44px; align-items: center; margin-top: 4px; }
  .card__body { padding: 17px !important; }
  .card__media { aspect-ratio: 16 / 10; }
  .button {
    min-height: 46px;
    max-width: 100%;
    padding: 10px 15px !important;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }
  .hero-actions .button,
  .card__body > .button,
  .video-library-link .button,
  .section-header .button { width: 100% !important; }
  .resource-position a { display: block; margin: 8px 0 0 !important; }
  .link-cluster a,
  .language-switch a,
  .video-detail-link a,
  .section-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 8px;
  }
  .media-grid, .card-grid, .five-entry-grid, .card-grid--two, .card-grid--three,
  .video-index-grid, .research-card-grid, .profile-link-grid, .article-link-grid,
  .intent-grid, .auxiliary-grid { grid-template-columns: 1fr !important; }
  .media-label, figcaption { font-size: .92rem !important; line-height: 1.65; }
  .route-flow { grid-template-columns: 1fr !important; }
  .route-arrow { transform: rotate(90deg); justify-self: center; }
  .numbered-steps li { padding-left: 50px; }
  .update-list li { grid-template-columns: auto 1fr !important; gap: 6px 10px !important; }
  .update-list li a { grid-column: 1 / -1; }
  .site-footer { padding: 28px 14px !important; }
  .site-footer nav { gap: 7px 14px !important; }
  .site-footer a { display: inline-flex; min-height: 38px; align-items: center; }

  /* Video and tabular content */
  .video-watch-grid { grid-template-columns: 1fr !important; gap: 17px !important; }
  .video-player-frame { border-radius: 11px !important; }
  .video-summary-card h3, .video-summary-card p { margin-inline: 15px !important; }
  .video-facts { grid-template-columns: 1fr !important; }
  .video-prevnext { grid-template-columns: 1fr !important; gap: 11px !important; }
  .video-prevnext a:last-child { text-align: left !important; }
  .table-scroll, .scroll-x, .mobile-table-scroll {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-scroll-hint { display: block; }
  .diagram-scroll-hint { margin-top: 14px; margin-bottom: 6px; }
  .diagram-scroll--face img { width: 900px !important; max-width: none !important; height: auto !important; }
  .video-observation-table { min-width: 600px !important; }
  .video-observation-table th, .video-observation-table td { padding: 11px 12px !important; }
  .youtube-lite__label { left: 11px !important; right: 11px !important; bottom: 9px !important; font-size: .86rem; }

  /* Gallery page, whose original header is fixed. */
  body > header.mobile-nav-ready { position: sticky !important; }
  .header-section {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    padding: 36px 16px 30px !important;
  }
  .header-section h1 { font-size: clamp(1.75rem, 7.5vw, 2.25rem) !important; line-height: 1.35; }
  .header-section .lead { font-size: .98rem !important; line-height: 1.72 !important; }
  .header-section .gallery-rights-note,
  .header-section .media-credit { color: rgba(255,255,255,.88) !important; }
  .classification-note { margin: 0 12px 22px !important; padding: 16px !important; }
  .gallery-container { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 12px 48px !important; }
  .photo-caption { padding: 15px !important; }
  #lightbox { padding: 8px !important; }
  .lightbox-panel { width: 100% !important; max-height: calc(100dvh - 16px) !important; overflow-y: auto !important; }
  #lightbox-img { max-height: 55dvh !important; }
  .lightbox-caption { padding: 14px 15px 16px !important; }
  .close-btn { width: 44px !important; height: 44px !important; top: 10px !important; right: 10px !important; }

  /* Snow 12-stage pages and interactive 3D models. */
  .wrap, .model-main {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .wrap h1, .model-main h1 {
    font-size: clamp(1.45rem, 6.6vw, 1.85rem) !important;
    line-height: 1.42 !important;
    overflow-wrap: anywhere;
  }
  .wrap h2, .model-main h2 { font-size: 1.18rem !important; margin-top: 38px !important; line-height: 1.48; }
  .lead { font-size: 1rem !important; }
  .quick-answer { padding: 14px 15px !important; }
  .note, .note-model { padding: 11px 13px !important; }
  .model .stage, .cv { height: clamp(260px, 82vw, 340px) !important; }
  .growx .stage { height: clamp(280px, 90vw, 360px) !important; }
  .model .stage .readout { max-width: 58%; right: 8px !important; top: 8px !important; font-size: 10.5px !important; }
  .model .stage .hint { left: 8px !important; bottom: 7px !important; max-width: 72%; font-size: 10.5px !important; }
  .model .stage .tag3d { max-width: 44vw; padding: 2px 6px !important; font-size: 10px !important; overflow: hidden; text-overflow: ellipsis; }
  .ctrl { align-items: stretch !important; gap: 8px !important; }
  .ctrl .lab { flex: 1 0 100%; white-space: normal !important; }
  .ctrl input[type="range"] { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; }
  .ctrl .end { white-space: normal !important; }
  button.b, .ctrl button { min-height: 44px !important; padding: 8px 12px !important; }
  .growpanel { padding: 13px !important; }
  .growpanel .prow { display: grid !important; grid-template-columns: 1fr !important; }
  .growpanel button.b.gpre, .growpanel button.b.gact { width: 100%; }
  .stages a { grid-template-columns: 34px minmax(0, 1fr) !important; gap: 10px !important; padding: 13px 4px !important; }
  .stages .sc { grid-column: 2 !important; white-space: normal !important; }
  .pager { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 42px !important; }
  .pager a { display: flex; min-height: 44px; align-items: center; }
  .topbar .wrap { gap: 8px !important; padding-top: 7px !important; padding-bottom: 7px !important; }
  .topbar .sep { display: none; }
  .snow-global-breadcrumb { width: min(100% - 24px, 860px) !important; font-size: .75rem !important; }
  .snow-global-aux { margin-top: 30px !important; padding: 14px !important; justify-content: flex-start !important; }
  input:not([type="range"]), select, textarea { font-size: 16px !important; }
}

@media (max-width: 360px) {
  header.mobile-nav-ready .site-nav .nav-links,
  header.mobile-nav-ready.is-menu-open .nav-container > .nav-links,
  header.snow-global-header.mobile-nav-ready.is-menu-open .snow-global-nav {
    grid-template-columns: 1fr !important;
  }
  .page-shell, .container { width: min(100% - 18px, var(--content, 1160px)) !important; }
  .section { padding: 16px 13px !important; }
  .hero { padding-inline: 16px !important; }
  .classification-note, .gallery-container { margin-inline: 9px !important; padding-inline: 0 !important; }
}

@media print {
  .mobile-menu-toggle, .mobile-scroll-hint { display: none !important; }
}

/* 顔の縦横比の模式図は、狭い画面では縦長版へ切り替える。 */
@media (max-width: 640px) {
  .diagram-scroll--face {
    overflow: visible !important;
  }
  .diagram-scroll--face .face-diagram-picture,
  .diagram-scroll--face .face-diagram-picture img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}


/* Preserve the linear article layout on narrow screens (2026-08-13) */
@media (max-width: 840px) {
  .article-page > .section { margin-top:0 !important; padding:32px 0 !important; border:0 !important; border-top:1px solid var(--line,#d5e1e9) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
  .article-page > .section:first-of-type { margin-top:18px !important; }
  .article-page .diagram-figure,.article-page .data-figure { max-width:100% !important; margin:18px auto !important; }
  .article-page .diagram-figure img,.article-page .data-figure img,.face-diagram-picture img,.diagram-scroll--face img { width:100% !important; max-width:100% !important; height:auto !important; }
  .field-section,.reading-section,.sitemap-section { padding:32px 0 !important; }
}