/* エス・エー・ヒューズ・エンタープライゼズ株式会社 — corporate site
   One stylesheet, no build step, no JavaScript, no external requests.

   Direction 2a (Anniversary), adopted 2026-08-30. Palette N1, chosen 2026-08-30:
   a cool grey ground with a navy accent, and a white band behind the timeline.

   The ground must stay visibly different from the band — that separation is what makes the
   timeline read as its own section rather than as more page. The whole neutral ramp is cool;
   the warm greys this direction started with looked muddy against a cool ground.

   Fonts are the system stack deliberately: the site makes no third-party request,
   which matters for institutional networks and for a page meant to still work in
   ten years. Webfonts (Noto Serif JP / Noto Sans JP / IBM Plex Mono) are a separate
   decision — see TODO.md. */

:root {
  --ink:        #1b1f24;
  --ink-soft:   #46505a;
  --ink-faint:  #646c77; /* floor: 4.5:1 on --paper (4.90 measured; #6b7480 was 4.37) */
  --ink-fainter:#6a7077; /* floor: 4.5:1 on --paper (4.62 measured; #8b939c was 2.87) */
  --accent:     #1f4b6e;
  --rule:       #dfe3e8;
  --rule-soft:  #eceff2;
  --paper:      #f4f6f8;
  --paper-tint: #ffffff;
  --measure:    60rem;
  --prose:      42em;

  --sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
          "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
          "Yu Gothic", Meiryo, sans-serif;
  /* "Noto Serif JP" is the Google-webfont family name; the DESKTOP packages are
     named differently, and on Linux nothing in the old stack matched -- every
     other entry was a macOS or Windows font, so the generic `serif` fell through
     to Noto Sans CJK JP and every mincho heading rendered gothic. Measured on
     rimini 2026-09-01: fc-match "Noto Serif JP" -> Noto Sans CJK JP. The Linux
     names go AFTER the platform ones so Mac and Windows rendering is unchanged. */
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
           "MS PMincho", "Noto Serif CJK JP", "Source Han Serif JP", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.9;
  text-align: left;
}

/* ---- skip link ------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ---- shell ----------------------------------------------------------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---- masthead -------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  padding: 1.4rem 0 1.2rem;
}

/* Two rows: the name alone, then a rule, then the product link and the nav facing each
   other across the second row. Giving the name a line to itself is what makes this read as a
   masthead rather than a nav bar with a title stuck on the front. */
.masthead .wrap {
  display: block;
}

.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule-soft);
}

/* The product site: present on every page, but facing the nav from the opposite end of the
   second row rather than sitting inside it. The nav is this site's own structure; the product
   site is somewhere else, and the distance across the row is what says so. */
.utility {
  /* Matches .nav exactly — same size, same colour. The two face each other across this row as
     peers; setting either one smaller or lighter ranks it below the other, which is the
     opposite of what putting them at opposite ends was for. Moves with .nav. */
  font-size: 1rem;
}
.utility a {
  color: var(--ink-soft);
  text-decoration: none;
}
.utility a:hover { color: var(--accent); }

.wordmark {
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.5;
  /* On a phone the name cannot fit one line at any readable size. Without this it breaks
     mid-word (エンタープライゼ / ズ株式会社); keep-all moves the break to the ・, giving
     エス・エー・ヒューズ・ / エンタープライゼズ株式会社, which holds at every width down to 320px. */
  word-break: keep-all;
}
.wordmark:hover { color: var(--accent); }

/* The masthead must hold the full name and every link on ONE line on a desktop screen.
   Because .wrap is capped at --measure, that is a fixed 912px of room at every width from
   1008px up — a 1920px screen has no more room than a 1024px one, so the fit is decided
   here, once, and not by the viewport. The name is 24 full-width glyphs and therefore the
   same width in any Japanese font, so the nav is the part that would have to give. It does
   not have to: moving the product-site link out of the nav bought back the room, and the
   nav keeps its designed size. Adding a fifth item would put the fit back in question. */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.3rem;
  /* 1rem, matching body text, not the 0.9rem a Latin-first default would give. 代表者紹介 packs
     five kanji of stroke density into the space Latin uses for a short word, and this readership
     is institutional and often older. The row uses 527px of 912px at this size, so it costs
     nothing — checked across five pages and eight widths, 1920 down to 320. */
  font-size: 1rem;
}
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover      { color: var(--accent); }
.nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* Marks a link that leaves this site, and that opens in a new tab — which is what makes
   this particular glyph honest rather than approximate. Not nav-only: it lives in the footer
   and in body text now that the product site is no longer a main-nav item. */
.external::after {
  content: "\29C9";
  font-size: 0.85em;
  margin-left: 0.15em;
  color: var(--ink-faint);
  /* No vertical-align: this glyph already fills x-height to cap-height, so it reads centred
     from the baseline. The diagonal arrows it replaced did not, and needed lifting. */
  /* Keep the marker out of the link's underline. Inside it, mid-sentence, the rule runs
     under the mark and 製品サイト»をご覧ください reads as one broken word. */
  display: inline-block;
  text-decoration: none;
}

/* ---- lede ------------------------------------------------------------ */

.lede {
  padding: 4.75rem 0 3.75rem;
}
.lede h1 {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  margin: 0 0 0.9rem;
  font-weight: 600;
  text-wrap: pretty;
}
.lede p {
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: 34em;
}

/* hero call to action (2a) */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  align-items: center;
  margin-top: 2.5rem;
}
.button {
  display: inline-block;
  background: var(--accent);
  color: var(--paper-tint);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.85rem 1.9rem;
  border-radius: 2px;
  text-decoration: none;
}
.button:hover { background: var(--ink); color: var(--paper-tint); }
.cta-tel { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; }
.cta-tel:hover { color: var(--accent); }
.lede p:last-child { margin-bottom: 0; }
.lede strong { color: var(--ink); font-weight: 600; }

/* ---- page body ------------------------------------------------------- */

main { padding-bottom: 4rem; }

.page-head {
  border-bottom: 1px solid var(--rule);
  padding: 3rem 0 0.5rem;
}
.page-head h1 {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin: 0 0 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.page-head p {
  margin: 0;
  color: var(--ink-soft);
}
/* A second paragraph in a page-head would otherwise butt straight against the
   first: the margin: 0 above was written when every page-head held one. Only
   お問い合わせ has two today, which is why the 0px gap went unnoticed. Tighter
   than body spacing (1.1rem) so the head still reads as one intro block. */
.page-head p + p { margin-top: 0.7rem; }

section { padding: 2.6rem 0 0; }

h2 {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  letter-spacing: 0.01em;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.9rem 0 0.6rem;
  color: var(--ink);
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); }
a:hover { color: var(--ink); }

ul { margin: 0 0 1.1rem; padding-left: 1.3rem; }
li { margin-bottom: 0.4rem; }
li:last-child { margin-bottom: 0; }

/* ---- capability cards on the front page ------------------------------ */

.areas { padding: 2.9rem 0 1rem; }
.areas .wrap > .area-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 2.75rem;
}

.area {
  padding: 0;
}

.area h3 {
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  color: var(--ink);
}
.area p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.more {
  /* A grid item inside .area-grid: without spanning both columns it renders at
     half width beside an empty cell on desktop. */
  grid-column: 1 / -1;
  margin: 2rem 0 0;
  font-size: 0.96rem;
  color: var(--ink-soft);
}

/* ---- definition table (会社概要) ------------------------------------- */

.facts {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
}
.facts th,
.facts td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.facts th {
  width: 11rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding-right: 1.2rem;
}
.facts ul { margin: 0; padding-left: 1.2rem; }

/* ---- history --------------------------------------------------------- */

.history {
  list-style: none;
  margin: 0;
  padding: 0;
}
.history li {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule-soft);
  margin: 0;
}
.history .when {
  display: block;
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- callout --------------------------------------------------------- */

.note {
  background: var(--paper-tint);
  border-left: 3px solid var(--accent);
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0;
  font-size: 0.96rem;
}
/* keep-all so a line cannot break inside a kanji compound. Default CJK wrapping
   breaks between any two characters, which split 「ご判断」 as ご判 / 断 at every
   desktop width -- in the one block on the page that most wants reading. With
   keep-all the breaks fall at the 。 instead.
   Scoped to .note deliberately: measured 2026-09-01, `word-break: keep-all` on
   body overflows four of five pages at 390px and all five at 320px (the front
   page's .area, an h3, and 会社概要's facts table), because Japanese has no
   spaces and long runs become unbreakable. Verified no overflow here at 1200,
   760 and 390px. */
.note p { margin-bottom: 0.7rem; word-break: keep-all; }
.note p:last-child { margin-bottom: 0; }

/* ---- contact --------------------------------------------------------- */

.contact-line {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---- footer ---------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  padding: 1.8rem 0 2.6rem;
  font-size: 0.86rem;
  color: var(--ink-faint);
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  justify-content: space-between;
}
.foot a { color: var(--ink-faint); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 1.2rem; }

/* ---- narrow screens -------------------------------------------------- */

@media (max-width: 34rem) {
  body { font-size: 15px; }
  .lede { padding: 2.6rem 0 2.2rem; }
  .facts th,
  .facts td { display: block; width: auto; padding: 0; border: 0; }
  .facts th { padding-top: 0.9rem; }
  .facts td { padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule-soft); }
}


/* ---- dateline (2a) ---------------------------------------------------- */

.dateline {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: 1.4rem;
}

.lede p.lede-sub {
  font-family: var(--serif);
  /* 1.8rem, not 2.05rem: at 2.05 the sub rendered 98% of the h1's width and the pair read as
     two equal lines. 1.8 puts it at 86%, matching the 85% the previous hero had, and it widens
     the step from the 2.5rem h1 so the heading is clearly primary. Proportional problem,
     proportional fix — cutting words would have cost meaning sah deliberately chose. */
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--accent);
  margin: 0 0 1.6rem;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .lede h1        { font-size: 1.6rem; }
  .lede p.lede-sub { font-size: 1.6rem; }
}

/* ---- timeline (2a) ---------------------------------------------------- */

.timeline {
  border-top: 1px solid var(--rule);
  background: var(--paper-tint);
}

.timeline .wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

.timeline .year {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.45rem;
}

.timeline p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---- focus states ----------------------------------------------------- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- small screens ---------------------------------------------------- */

@media (max-width: 760px) {
  .timeline .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
  .wordmark { font-size: 1.3rem; }
}

@media (max-width: 30rem) {
  .timeline .wrap { grid-template-columns: 1fr; }
}

/* ---- small section label (2a) ----------------------------------------- */

/* Used on an <h2>, not a <p>: the six cards beneath it are h3, so without a real heading here
   the document outline jumps h1 -> h3 and the page's main section has no heading at all. These
   two resets undo what the h2 rule brings and this label must not keep. */
.section-label {
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-fainter);
  margin: 0 0 1.5rem;
}

@media (max-width: 760px) {
  .areas .wrap > .area-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .lede { padding: 2.6rem 0 2.2rem; }
}

/* prose measure on the inner pages, now that the column is 960px */
main p, main li { max-width: var(--prose); }
.lede p.lede-sub, .facts p, .timeline p, .area p { max-width: none; }

/* Off-screen but still announced. A link that opens a new tab should say so; the ⧉ is CSS
   content and cannot be relied on to reach a screen reader. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A small secondary line under a contact value — the 特定電子メール法 refusal notice that must be
   printed beside every published address, and the phone's 受付時間. Renamed from .optout when the
   second use appeared: one visual role, one class. */
.field-note {
  display: inline-block;
  font-family: var(--sans);
  /* .contact-line sets weight 600 for the address and phone number; a note under one is
     secondary and must not inherit it. */
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--ink-fainter);
  margin-top: 0.2rem;
}

/* ---- quiet links ------------------------------------------------------ */

/* tel:/mailto: links on the printed contact values: the affordance is
   tap-to-call on a phone, not a navy link — the text keeps the colour of the
   value around it. */
a.quiet { color: inherit; text-decoration: none; }
a.quiet:hover { color: var(--accent); }

/* ---- print ------------------------------------------------------------ */

/* 会社概要 is a page procurement staff print. Chrome that only navigates is
   dropped, and ink goes full black on white for paper. */
@media print {
  .skip, .nav, .utility, .cta-row, .foot nav { display: none; }
  body { background: #fff; color: #000; }
  .timeline { background: #fff; }
  a { color: inherit; text-decoration: none; }
}