/* =====================================================================
   About this site (このサイトについて) - page-specific section styles.
   Shared chrome (header/footer/breadcrumb/lead + globals) lives in main.css.
   ===================================================================== */

/* ---- animations / helpers lifted from inline <style> ---- */
.abt-body { font-family: 'Noto Sans JP', system-ui, sans-serif; }
    .abt-body p { font-size: 16px; line-height: 1.95; margin: 0 0 20px; color: #3A3A3A; }
    .abt-body p.lead { font-size: 18px; line-height: 1.92; color: #1A1A1A; font-weight: 500; }
    .abt-body strong { color: #1A1A1A; font-weight: 700; }

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

    .abt-link { transition: color .15s ease; }
    .abt-link:hover { color: #C8102E; }

/* =====================================================================
   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: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: rgb(26, 26, 26);
  margin: 8px 0px 0px;
  letter-spacing: 0.02em;
  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
   The legacy 会社情報 rows in the page's light palette - same 220px key
   column and hairline rules, dark text instead of white.
   ===================================================================== */

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

.abt-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;
}

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

.abt-meta__key {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgb(107, 114, 128);
}

.abt-meta__val {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: rgb(26, 26, 26);
  line-height: 1.7;
}

.abt-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.
   ===================================================================== */

.abt-lead-line {
  font-family: "Noto Sans JP", 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;
}

.abt-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. */
.abt-fcard__title {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: rgb(6, 22, 41);
  margin: 0;
  line-height: 1.5;
}

.abt-fcard__body {
  font-family: "Noto Sans JP", 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
   ===================================================================== */

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

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

.abt-col__head {
  font-family: "Noto Sans JP", 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);
}

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

.abt-tag {
  font-family: "Noto Sans JP", 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
   ===================================================================== */

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

.abt-editorial__head {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgb(26, 26, 26);
  margin: 0 0 10px;
}

.abt-editorial__body {
  font-family: "Noto Sans JP", 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. */
.abt-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: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  color: rgb(90, 62, 66);
  line-height: 1.8;
}

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

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

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

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

.abt-cta__body {
  font-family: "Noto Sans JP", 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;
}

.abt-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: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s ease;
}

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

.abt-cta__btn svg { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.abt-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,
  .abt-cols,
  .abt-meta__row { grid-template-columns: 1fr; }
  .abt-meta__row { gap: 4px; }
  .abt-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.
   --------------------------------------------------------------------- */

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

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

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

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

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

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

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

.abt-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. Centring put the badge halfway down a two-line
   heading, level with nothing; it sits beside the first line instead. */
.intro__box-3--tight {
  align-items: flex-start;
}

/* The heading's 8px top margin plus the half-leading of its 33.6px line box -
   without this the badge floats above the first line rather than sitting on it. */
.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.
   --------------------------------------------------------------------- */

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

.abt-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;
}

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

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