/* 医療技術職のみちさき案内 — Phase 0 base styles.
   Theme: 静かなキャリア案内所. Independent implementation for this line
   (no runtime dependency on any other みちさき案内 line's assets) --
   values/roles inspired by the same successful design language proven
   on the リハビリ職 line, reimplemented here from scratch per this
   line's own Phase 0 instructions. */

:root {
  --color-bg: #ffffff;
  --color-surface: #f6f9f9;
  --color-text: #1f2a2c;
  --color-text-muted: #45565a;
  --color-border: #dbe6e6;
  --color-accent: #2c6e7a;
  --color-focus: #1a5c9c;
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif;
  --max-width: 780px;
  --lede-width: 680px;
  --space-section: 3rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
}

img { max-width: 100%; }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-bg);
  color: var(--color-text);
  padding: 0.5em 1em;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---- Header ---- */
.site-header { border-bottom: 1px solid var(--color-border); }
.site-header__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0.85rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 3.25rem;
}
.site-header__brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.site-header__brand-mark { flex-shrink: 0; color: var(--color-accent); }
.site-header__brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.site-header__site-name { font-size: 0.8rem; color: var(--color-text-muted); }
.site-header__line-name { font-size: 1.15rem; font-weight: 700; color: var(--color-text); }

/* PC nav (site-nav__list--pc) is a plain, always-rendered <ul>
   OUTSIDE the <details> -- deliberately NOT dependent on overriding a
   closed <details>'s internal content layout (verified live: a closed
   <details> box measures 0x0 regardless of any `display` override placed
   on its children, in this environment's Chromium; that is native
   per-element layout behavior, not just a UA stylesheet rule, so no CSS
   override on the child can win it back). The <details>/<summary> below
   is used only for its one genuinely reliable job: the <640px mobile
   toggle, where "closed = truly collapsed, open = truly expanded" is
   exactly the native behavior we want, no override needed either way. */
.site-nav__list { list-style: none; margin: 0; padding: 0; }
.site-nav__list a { text-decoration: none; color: var(--color-text); font-size: 0.95rem; }
.site-nav__list a:hover { color: var(--color-accent); }

/* Family Shell: Active Navigation -- the header nav item matching the
   current page's category (see Layout::ACTIVE_NAV_TYPE_BY_PAGE_TYPE).
   Applies to both the PC and SP <ul> (both render from the same $links
   string). Color + weight + underline, no background chrome, consistent
   with this site's LOW visual intensity. */
.site-nav__list a.is-active {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-nav__list--pc { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-nav__list--pc a { display: inline-block; padding: 0.25em 0; }

.site-nav__details { display: none; }
.site-nav__list--sp { display: none; }

@media (max-width: 640px) {
  .site-nav__list--pc { display: none; }
  .site-nav__details { display: block; }
  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.55em 0.9em;
    font-size: 0.95rem;
    user-select: none;
  }
  .site-nav__toggle::-webkit-details-marker { display: none; }
  .site-nav__toggle::after {
    content: "";
    display: inline-block;
    margin-left: 0.4em;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
  }
  .site-nav__details[open] .site-nav__toggle::after { transform: rotate(-135deg); }
  .site-nav__list--sp { flex-direction: column; width: 100%; gap: 0; padding-top: 0.5rem; }
  .site-nav__list--sp a { display: block; padding: 0.75em 0.25em; border-top: 1px solid var(--color-border); min-height: 44px; }
  .site-nav__details[open] .site-nav__list--sp { display: flex; }
}

/* ---- Breadcrumb ---- */
.breadcrumb { max-width: var(--max-width); margin: 1rem auto 0; padding: 0 1rem; }
.breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; font-size: 0.85rem; color: var(--color-text-muted); }
.breadcrumb__item:not(:last-child)::after { content: "›"; margin-left: 0.35rem; }
.breadcrumb__item a { color: var(--color-text-muted); }

/* ---- Family Root Return (Wave B, Top page only) ----
   Same position/size/muted-text treatment as .breadcrumb above (Top has
   no breadcrumb trail, just this single link back to the Family Shell),
   kept as its own class so it never collides with the "Top has no
   breadcrumb" structural check. */
.family-return { max-width: var(--max-width); margin: 1rem auto 0; padding: 0 1rem; font-size: 0.85rem; }
.family-return__link { color: var(--color-text-muted); }

/* ---- Main content ---- */
main { max-width: var(--max-width); margin: 0 auto; padding: 1.75rem 1rem 3.5rem; }
.page-lede { max-width: var(--lede-width); }

.page-type-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-accent); margin: 0 0 0.5em; }

/* FAMILY-VISUAL-1: LOW-intensity, CSS/geometry-only Route/Node accent on
   the Hero region (H1 + intro only -- deliberately not on the
   key-points box below, or on the qualification-card section further
   down, so it stays a single quiet cue and does not compete with
   either). A thin route line + one node dot, no image. */
.hero { position: relative; padding-left: 1.05rem; border-left: 2px solid var(--color-accent); }
.hero::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.4em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

h1 { font-size: 1.7rem; line-height: 1.5; margin: 0.2em 0 0.8em; max-width: 18em; }
h2 { font-size: 1.25rem; margin: var(--space-section) 0 0.7em; }
h3 { font-size: 1.05rem; margin: 1.4em 0 0.5em; }
p { max-width: 34em; }

/* Typography fix: the intro's first paragraph (.lead) previously had no
   styling distinct from body text. Modestly larger + muted, consistent
   with this site's LOW-MEDIUM visual weight -- not a loud pull-quote. */
.lead { font-size: 1.08rem; line-height: 1.75; color: var(--color-text-muted); }

/* Key Visual (Family Design System Phase 2): TOP-only 2-column Hero
   (~60% text / ~40% visual on wider viewports). Single column below the
   existing <details> mobile-nav breakpoint (640px) so it never competes
   with the compact SP layout; the Delivery image is capped to a modest
   width on mobile to keep this LOW-MEDIUM weight there too. */
.hub-hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.hub-hero__visual { display: flex; justify-content: center; }
.hub-hero__map { display: block; width: 100%; max-width: 320px; height: auto; object-fit: contain; }
@media (min-width: 641px) {
  .hub-hero { grid-template-columns: 3fr 2fr; gap: 2.25rem; }
  .hub-hero__map { max-width: 100%; }
}

/* FAMILY-VISUAL-1 item 4 / Card Role Phase 2: a lightweight card
   treatment (border/radius/spacing reusing this repo's own tokens, the
   same visual weight as .key-points -- deliberately no box-shadow) so
   each h3 sub-item under a card-eligible Top section reads as a
   structured comparison rather than plain running text. Originally only
   "3つの資格から見る" (3 items); Phase 2 extends the same class to
   "仕事内容・業務から見る" (Areas, this site's largest/most distinctive
   category) via PageRenderer::CARD_SECTION_HEADINGS. Text/links/order
   unchanged; PageRenderer only adds this wrapper div per item. */
.qualification-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.1rem 1.35rem;
  margin: 1.25rem 0;
}
.qualification-card h3 { margin-top: 0; }
.qualification-card p:last-child { margin-bottom: 0; }
.qualification-card p a::after { content: " \203A"; color: var(--color-accent); font-weight: 700; }

/* ---- Top body: Presentation Normalization (PM Supplemental Review) ----
   Point-of-Mention links (Wave C) render as plain link-colored text with
   no visual distinction from surrounding prose. Reuses two patterns
   already established elsewhere in the Family, at the same restrained
   weight (border + hover fill, no shadow/elevation) -- no new visual
   system, no card-ification of every section:
     - .section-heading kicker bar: same accent-bar motif as Rehab's
       .entry-group__heading, applied to Top's 5 H2 sections only
       (PageRenderer sets this class only when $isTop).
     - .entry-rows: a bordered-row affordance for the areas/workplaces/
       methods/services item lists, the same visual language as this
       site's own .related-links__list pill-chip (below) -- rows instead
       of pills because several items carry trailing description text
       after the link, which a pill shape does not accommodate.
   h3-with-link only ever occurs on Top (workplaces sub-headings), so the
   arrow-suffix rule below is safe unscoped within .main-content. */
.section-heading {
  position: relative;
  padding-top: 0.8rem;
}
.section-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}
.entry-rows { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.entry-rows li {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.6em 0.9em;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.entry-rows li:hover { border-color: var(--color-accent); background: var(--color-surface); }
.entry-rows a { font-weight: 600; text-decoration-thickness: 1.5px; }
.main-content h3 a { text-decoration: none; }
.main-content h3 a::after { content: " \203A"; color: var(--color-accent); font-weight: 700; }

/* Confirmed bug fix #1: pipe-table Markdown previously leaked as raw
   broken text (see PageRenderer::renderTable()). Wrapped in an
   overflow-x:auto container so a wide table never breaks mobile layout
   instead of forcing the whole page to scroll horizontally. */
.table-scroll { overflow-x: auto; margin: 1.25rem 0; }
.table-scroll table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 0.92rem; }
.table-scroll th,
.table-scroll td { border: 1px solid var(--color-border); padding: 0.55em 0.75em; text-align: left; vertical-align: top; }
.table-scroll thead th { background: var(--color-surface); font-weight: 700; }
.table-scroll tbody th[scope="row"] { background: var(--color-surface); font-weight: 600; white-space: nowrap; }

.key-points { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 1.1rem 1.35rem; margin: 1.75rem 0; }
.key-points__heading { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 0 0 0.6em; }
.key-points__list { margin: 0; padding-left: 1.2em; }
.key-points__list li { margin-bottom: 0.5em; }
.key-points__list li:last-child { margin-bottom: 0; }

.related-links { margin-top: var(--space-section); padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.related-links__group { margin-bottom: 1.25rem; }
.related-links__group-heading { color: var(--color-text-muted); font-size: 0.9rem; font-weight: 600; }
.related-links__list { list-style: none; padding: 0; margin: 0.4em 0 0; display: flex; flex-wrap: wrap; gap: 0.5em 1em; }
.related-links__list a { display: inline-block; padding: 0.4em 0.8em; border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; font-size: 0.9rem; }
.related-links__list a:hover { border-color: var(--color-accent); }

/* Top page only: this section doubles as the "選択肢を見る領域" (MT-P2
   section 4) -- a distinct surface + wider max-width + grid of its several
   groups sets it apart from the reading-focused prose above, without
   turning it into a wall of individual cards (still plain text/pills
   inside each group, just arranged side by side on desktop). */
.related-links--hub {
  max-width: var(--max-width);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
}
.related-links--hub .related-links__heading { margin-top: 0; }
@media (min-width: 780px) {
  .related-links--hub {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }
  .related-links--hub .related-links__heading { grid-column: 1 / -1; }
}

/* Deliberately NOT styled like Related Links' pill list (section 14: the
   two must not read as the same kind of thing) -- a bordered box with a
   left accent rule signals "one verified external source", distinct from
   "site-internal navigation". No button chrome (background/box on the
   link itself), so it can't be mistaken for a commercial CTA either. */
.official-info {
  margin-top: 2rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
}
.official-info__eyebrow { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 0.45em; }
.official-info__note { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; }
.official-info__link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.official-info__link::after { content: " \2197"; text-decoration: none; display: inline-block; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--color-border); padding: 1.5rem 1rem; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; }
.site-footer__inner { max-width: var(--width-shell, 960px); margin: 0 auto; }
.site-footer__brand { margin: 0 0 0.3em; font-weight: 700; }
.site-footer__tagline { margin: 0; }
.site-footer__legal-nav ul { list-style: none; margin: 0.85em 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; }
.site-footer__root-link,
.site-footer__company,
.site-footer__contact,
.site-footer__copyright { margin: 0.5em 0 0; }
.site-footer__root-link a,
.site-footer__company a { color: var(--color-text-muted); }

/* ---- Guardrails ---- */
h1, h2, h3, p, a { overflow-wrap: break-word; }