/* Shared, HTML-only navigation layer. Visual copy remains inside the approved images. */
.mobile-nav {
  display: none;
  position: relative;
  flex: 0 0 auto;
  z-index: 5;
}

.mobile-nav summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #c8d3d8;
  border-radius: 6px;
  background: #fff;
  color: #08295a;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}

.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::before { content: "☰"; margin-inline-end: 6px; font-size: 16px; }
.mobile-nav[open] summary::before { content: "×"; font-size: 20px; }

.mobile-nav__panel {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  width: min(280px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid #c8d3d8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgb(8 41 90 / .18);
}

.mobile-nav__panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 5px;
  color: #08295a;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.mobile-nav__panel a:hover,
.mobile-nav__panel a:focus-visible { background: #eaf4f2; color: #087b80; }
.mobile-nav__panel a[aria-current="page"] { background: #eaf4f2; color: #087b80; }
.mobile-nav__panel .mobile-nav__cta { margin-top: 6px; justify-content: center; background: #08b85a; color: #fff; }
.mobile-nav__panel .mobile-nav__cta:hover,
.mobile-nav__panel .mobile-nav__cta:focus-visible { background: #079b4d; color: #fff; }

@media (max-width: 1000px) {
  .mobile-nav { display: block; }
}

/* Reserve the correct portrait geometry before mobile images finish loading. */
.picture-frame { display: block; }
@media (max-width: 700px) {
  .picture-frame--map { aspect-ratio: 941 / 1672; }
  .picture-frame--overview { aspect-ratio: 864 / 1821; }
  .picture-frame--map-footer { aspect-ratio: 1064 / 1478; }
  .picture-frame--portrait { aspect-ratio: 2 / 3; }
  .picture-frame--recruitment-hero { aspect-ratio: 864 / 1821; }
  .picture-frame--support-diagnostic { aspect-ratio: 1086 / 1448; }
  .picture-frame img { height: auto; }
  /* Pages whose generated-image markup predates the shared class still get a
     reserved portrait box; the diagnostic guide keeps its own source ratio. */
  .page .panel picture:not(.picture-frame--recruitment-hero) { aspect-ratio: 2 / 3; }
  .diagnosis-guide picture { aspect-ratio: 1086 / 1448; }
}

/* Production corporate header (map-header) integration: the menu sits at the
   far right, after the jobseeker / employer CTAs, and collapses to an icon on
   phones so the header never overflows at 360-390px. */
.map-header .mobile-nav { order: 1; }
@media (max-width: 700px) {
  .map-header .mobile-nav summary { min-width: 38px; min-height: 38px; padding: 0 8px; font-size: 0; }
  .map-header .mobile-nav summary::before { margin: 0; font-size: 18px; }
  .map-header .mobile-nav[open] summary::before { font-size: 20px; }
}
@media (max-width: 400px) {
  .map-header { gap: 6px; }
  .map-header .map-brand { flex: 0 0 auto; }
  .map-header .map-brand img { width: 104px; }
  .map-header .map-jobs, .map-header .map-line { padding: 0 5px; }
  .map-header .mobile-nav { margin-inline-start: auto; }
  .map-header .mobile-nav summary { min-width: 34px; padding: 0 6px; }
}
/* The corporate header carries 7 nav links plus two CTAs; below 1180px the
   inline nav no longer fits (it produced horizontal scroll at 1001-1180px),
   so the menu takes over from there. */
@media (max-width: 1180px) {
  .map-header .map-nav { display: none; }
  .map-header .map-brand { flex: 1; }
  .map-header .mobile-nav { display: block; }
}
/* 2026-09-25: the inline nav gained an 8th link (コラム → /blog/). Just above
   the 1180px switch it would push the employer CTA 6-8px past the header, so
   tighten the link gap in that narrow band. */
@media (min-width: 1181px) and (max-width: 1260px) {
  .map-header .map-nav { gap: 14px; }
}