/* =====================================================================
   About (English) - page-specific styles (slug: about-en)
   Shared chrome (header/footer/breadcrumb/lead + global resets) lives in
   main.css and the shared template parts; only page-section styles remain.
   ===================================================================== */

/* ---- animations / helpers lifted from inline <style> ---- */
.aen-body { font-family: 'Barlow', system-ui, sans-serif; }
    .aen-body p { font-size: 16.5px; line-height: 1.85; margin: 0 0 20px; color: #3A3A3A; }
    .aen-body p.lead { font-size: 18.5px; line-height: 1.82; color: #1A1A1A; font-weight: 500; }
    .aen-body strong { color: #1A1A1A; font-weight: 700; }

    /* Card hover - red rule on the leading edge, no border tint. */
    .aen-cc { transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
    .aen-cc:hover { box-shadow: inset 4px 0 0 #C8102E, 0 12px 26px -18px rgba(6, 22, 41, .45); }

    .aen-link { transition: color .15s ease; }
    .aen-link:hover { color: #C8102E; }
    @keyframes aenKenburns { from { transform: scale(1.06); } to { transform: scale(1.13); } }

/* =====================================================================
   SECTION CLASSES  (converted from inline styles)
   ===================================================================== */

/* ---------- Introduction ---------- */

.intro__section {
  background: rgb(255, 255, 255);
}

.intro__box {
  max-width: 1080px;
  margin: 0px auto;
  padding: 72px 24px 76px;
}

.intro__box-2 {
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgb(227, 231, 238);
}

.intro__box-3 {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.intro__box-4 {
  background: rgb(200, 16, 46);
  color: rgb(255, 255, 255);
  font-family: Barlow, system-ui, sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  height: 26px;
  line-height: 1;
  flex-shrink: 0;
}

.intro__box-5 {
  display: flex;
  align-items: center;
  gap: 14px;
}

.intro__label {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgb(200, 16, 46);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.intro__label-2 {
  width: 32px;
  height: 2px;
  background: rgb(200, 16, 46);
  flex-shrink: 0;
}

.intro__heading {
  font-family: Barlow, system-ui, sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: rgb(26, 26, 26);
  margin: 8px 0px 0px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.intro__figure {
  margin: 12px 0px 0px;
}

.intro__box-6 {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: 6px;
  overflow: hidden;
  background: rgb(6, 22, 41);
}

.intro__img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.intro__box-7 {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 4px;
  background: rgb(200, 16, 46);
}

/* ---------- Group companies ---------- */

.group__section {
  background: rgb(244, 247, 252);
  border-top: 1px solid rgb(227, 231, 238);
  border-bottom: 1px solid rgb(227, 231, 238);
}

.group__box {
  max-width: 1280px;
  margin: 0px auto;
  padding: 72px 24px 76px;
}

.group__box-2 {
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgb(227, 231, 238);
}

.group__box-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.company__box {
  max-width: 1080px;
  margin: 0px auto;
  padding: 72px 24px 80px;
}

/* =====================================================================
   SITE OVERVIEW - label / value table  (English page)
   The legacy 会社情報 rows in the page's light palette - same 220px key
   column and hairline rules, dark text instead of white.
   ===================================================================== */

.aen-meta {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(227, 231, 238);
  border-radius: 6px;
  overflow: hidden;
}

.aen-meta__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 16px 24px;
  border-bottom: 1px solid rgb(240, 242, 246);
  align-items: baseline;
}

.aen-meta__row:last-child { border-bottom: none; }

.aen-meta__key {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgb(107, 114, 128);
}

.aen-meta__val {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: rgb(26, 26, 26);
  line-height: 1.7;
}

.aen-meta__link {
  color: rgb(12, 45, 94);
  font-weight: 700;
  text-decoration: none;
}

/* =====================================================================
   WHY THIS SITE - numbered feature cards
   Same card shell as the group-company grid; the red number chip replaces
   the logo panel, so the grid keeps its rhythm without an image.
   ===================================================================== */

.aen-lead-line {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: rgb(26, 26, 26);
  margin: 18px 0 0;
  line-height: 1.6;
  max-width: 760px;
}

.aen-fcard {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(227, 231, 238);
  border-radius: 6px;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* --- Card icons -------------------------------------------------------
   Same masked-icon trick and the same 20x20 / 1.6-stroke drawings as the
   park detail cards (.ipd-ico), so a feature card looks like it belongs to
   the same family. The mask paints in currentColor, so the tile sets the
   colour. "update" is the one shape the park set had no equivalent for. */
.aen-fcard__title {
  font-family: Barlow, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: rgb(6, 22, 41);
  margin: 0;
  line-height: 1.5;
}

.aen-fcard__body {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgb(58, 58, 58);
  margin: 10px 0 0;
  line-height: 1.8;
}

/* =====================================================================
   CONTENTS - tag columns
   ===================================================================== */

.aen-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.aen-col {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(227, 231, 238);
  border-radius: 6px;
  padding: 22px 22px 24px;
}

.aen-col__head {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgb(6, 22, 41);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(240, 242, 246);
}

.aen-col__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aen-tag {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1;
  color: rgb(58, 58, 58);
  background: rgb(248, 250, 252);
  border: 1px solid rgb(227, 231, 238);
  border-radius: 3px;
  padding: 7px 10px;
}

/* =====================================================================
   EDITORIAL POLICY
   ===================================================================== */

.aen-editorial {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(227, 231, 238);
  border-radius: 6px;
  padding: 28px 28px 26px;
}

.aen-editorial__head {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgb(26, 26, 26);
  margin: 0 0 10px;
}

.aen-editorial__body {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  color: rgb(58, 58, 58);
  margin: 0;
  line-height: 1.95;
}

/* The caution box: a red rule on the leading edge, the same signal the card
   hover uses, rather than a second accent colour. */
.aen-editorial__note {
  margin-top: 18px;
  padding: 12px 16px;
  background: rgb(250, 246, 246);
  border-left: 3px solid rgb(200, 16, 46);
  border-radius: 0 4px 4px 0;
  font-family: Barlow, system-ui, sans-serif;
  font-size: 13px;
  color: rgb(90, 62, 66);
  line-height: 1.8;
}

/* =====================================================================
   CLOSING CTA
   ===================================================================== */

.aen-cta__section {
  background: rgb(6, 22, 41);
  border-top: 1px solid rgb(12, 45, 94);
}

.aen-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.aen-cta__head {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin: 0 0 8px;
  line-height: 1.45;
}

.aen-cta__body {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  line-height: 1.85;
  max-width: 640px;
}

.aen-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: rgb(200, 16, 46);
  color: rgb(255, 255, 255);
  font-family: Barlow, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s ease;
}

.aen-cta__btn:hover {
  background: rgb(168, 12, 38);
  color: rgb(255, 255, 255);
}

.aen-cta__btn svg { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.aen-cta__btn:hover svg { transform: translateX(5px); }

/* =====================================================================
   MOBILE / RESPONSIVE
   ===================================================================== */
/* Four feature cards get cramped before the phone breakpoint. */
@media (max-width: 1024px) {
  .group__box-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .group__box-3,
  .aen-cols,
  .aen-meta__row { grid-template-columns: 1fr; }
  .aen-meta__row { gap: 4px; }
  .aen-cta { flex-direction: column; align-items: flex-start; }
}

/* The client's headings run long - a question, a sentence - where the shipped
   ones were two or three words. Let them wrap instead of overflowing. */
.intro__heading { white-space: normal; }

/* ---------------------------------------------------------------------
   Dark palette, restored from the original 会社情報 design comp
   (_incoming/about/index.html - .company__*). Values are the comp's, not
   re-derived: navy band, translucent card, 220px key column, and a small
   caps English line under each Japanese label.
   --------------------------------------------------------------------- */

.aen-overview--dark {
  background: rgb(6, 22, 41);
  border-top: 1px solid rgb(12, 45, 94);
}

.aen-overview--dark .intro__box-4 { background: rgb(200, 16, 46); color: #fff; }
.aen-overview--dark .intro__label { color: rgb(200, 16, 46); }
.aen-overview--dark .intro__heading { color: rgb(255, 255, 255); }

.aen-overview--dark .aen-meta {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
}

.aen-overview--dark .aen-meta__row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  align-items: start;
}

.aen-overview--dark .aen-meta__key { color: rgba(255, 255, 255, 0.5); }
.aen-overview--dark .aen-meta__val { color: rgba(255, 255, 255, 0.85); }
.aen-overview--dark .aen-meta__link { color: rgba(255, 255, 255, 0.95); }

/* Two-line key cell: Japanese label, then the English one beneath it. */
.aen-meta__key {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.aen-meta__key-ja {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: rgb(255, 255, 255);
}

.aen-meta__key-en {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* With no English eyebrow above it, the heading is the only line in the block,
   so flex-start left the number badge pinned to the heading's cap-height and
   reading high. Centre the two against each other instead. */

/* No eyebrow above the heading - see about.css. Same 12px nudge: the heading's
   8px top margin plus the half-leading of its 33.6px line box. */
.intro__box-3--tight {
  align-items: flex-start;
}

.intro__box-3--tight .intro__box-4 {
  margin-top: 12px;
}

/* ---------------------------------------------------------------------
   Feature card with a logo panel - the group-company card from the design
   comp (_incoming/about/index.html - .group__box-4/-5/-6). Values are the
   comp's. The card keeps its own padding on the copy only, so the panel can
   run full width to the card edge.
   --------------------------------------------------------------------- */

.aen-fcard--logo {
  padding: 0;
  overflow: hidden;
}

.aen-fcard__panel {
  height: 116px;
  background: rgb(248, 250, 252);
  border-bottom: 1px solid rgb(227, 231, 238);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  flex-shrink: 0;
}

.aen-fcard__logo {
  max-height: 56px;
  max-width: 70%;
  width: auto;
  height: auto;
  display: block;
}

.aen-fcard__body-wrap {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}