/* =====================================================================
   Industrial park detail (single-industrial_park) - page section styles.
   Shared chrome (reset, header, footer, breadcrumb, lead) lives in main.css.
   ===================================================================== */

/* ---- animations / helpers lifted from inline <style> ---- */
.ipd-body { font-family: 'Noto Sans JP', system-ui, sans-serif; color: #3A3A3A; }
    /* Zero-specificity margin reset for every paragraph in the body, so the
       design's class-driven paragraphs (stat values, spec rows, card copy) don't
       pick up the browser's default block margin. Any class that sets its own
       margin (e.g. .detail__text-2) still wins over this. */
    :where(.ipd-body p) { margin: 0; }
    /* Editable prose paragraphs only - the ones authored in Gutenberg with no
       design class. These get the body-copy scale and rhythm; class-driven
       paragraphs keep their own type (size/colour/margin from their class), which
       is what makes values like "3,400 ha" render big and dark as designed. */
    .ipd-body p:not([class]) { font-size: 16px; line-height: 1.95; margin: 0 0 20px; color: #3A3A3A; }
    /* A lone / trailing prose paragraph shouldn't add space below its wrapper. */
    .ipd-body p:not([class]):last-child { margin-bottom: 0; }
    .ipd-body strong { color: #1A1A1A; font-weight: 700; }
    .ipd-share { transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
    .ipd-share:hover { transform: translateY(-3px); }
    .ipd-back { transition: gap .2s ease, color .15s ease; }
    .ipd-back:hover { color: #C8102E; }
    .ind-tag { transition: border-color .15s ease, color .15s ease; }
    .ind-tag:hover { border-color: #0C2D5E; color: #0C2D5E; }
    .ipd-slider__thumb:hover { transform: translateY(-2px); }
    .ipd-fac { transition: border-color .2s ease, transform .2s ease; }
    .ipd-fac:hover { transform: translateY(-2px); }
    .ipd-related { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .2s ease; }
    .ipd-related:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(6,22,41,0.28); }

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

/* ---------- Park hero ---------- */

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

/* Tinted band behind the name block: the breadcrumb, the park name and the photo
   read as three steps rather than one white run. Full-bleed, so the tint meets
   the navy breadcrumb edge to edge. */
.hero__band {
  background: rgb(244, 247, 252);
  border-bottom: 1px solid rgb(227, 231, 238);
}

.hero__box-2 {
  max-width: 1280px;
  margin: 0px auto;
  padding: 40px 24px 0px;
}

/* Inside the band the block needs a bottom edge of its own; the last-update row
   carries 26px of it already. */
.hero__band .hero__box-2 {
  padding-bottom: 10px;
}

.hero__box-3 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.hero__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgb(12, 45, 94);
  color: rgb(255, 255, 255);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 3px;
}

.hero__label-2 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.hero__label-3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgb(232, 238, 247);
  color: rgb(12, 45, 94);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid rgba(12, 45, 94, 0.08);
}

.hero__label-4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: rgb(12, 45, 94);
  background: rgb(244, 247, 252);
  border: 1px solid rgb(227, 231, 238);
  border-radius: 100px;
  padding: 4px 12px;
}

.hero__title {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 800;
  font-size: 40px;
  color: rgb(6, 22, 41);
  margin: 0px;
  line-height: 1.24;
  letter-spacing: 0.01em;
}

/* Operator logo beside the park name - lifted out of the body figure, where the
   import files it, so it reads first as it did on the old site. */
.hero__box-9 {
  display: flex;
  align-items: center;
  gap: 26px;
}

.hero__box-10 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 104px;
  padding: 14px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(227, 231, 238);
  border-radius: 8px;
}

.hero__box-10 img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* min-width:0 so a long name wraps inside the row instead of pushing the plate. */
.hero__box-11 {
  min-width: 0;
}

.hero__box-4 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: rgb(58, 58, 58);
  margin-top: 10px;
  letter-spacing: 0.01em;
}

.hero__box-5 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgb(107, 114, 128);
  margin-top: 5px;
  font-style: italic;
}

.hero__text {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 16.5px;
  font-weight: 400;
  color: rgb(58, 58, 58);
  line-height: 1.9;
  margin: 22px 0px 0px;
  /* Park descriptions carry the full text from the old site, so the summary is
     not held to the 820px measure - but 80% of the hero keeps the line length
     readable rather than running edge to edge. Full width below the tablet
     breakpoint, where 80% would just waste the column. */
  max-width: 80%;
}

.hero__box-6 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 20px 0px 26px;
}

.hero__label-5 {
  width: 3px;
  height: 13px;
  background: rgb(200, 16, 46);
}

.hero__label-6 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: rgb(107, 114, 128);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Japanese in a label slot built for English small caps - same treatment the
   article labels use (.article__label--ja): Barlow has no kana or kanji, and
   0.12em tracking is wide for them. */
.hero__label--ja {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: none;
}

.hero__label-7 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgb(58, 58, 58);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

.hero__box-7 {
  max-width: 1280px;
  margin: 0px auto;
  padding: 0px 24px;
}

/* Air between the band and the photo below it. */
.hero__band + .hero__box-7 {
  padding-top: 34px;
}

.hero__box-8 {
  position: relative;
  border: 1px solid rgb(227, 231, 238);
  border-radius: 8px;
  overflow: hidden;
  background: rgb(6, 22, 41);
}

/* Scoped to the hero: .related__img still crops inside the related-park cards. */
.hero__box-8 .related__img {
  position: static;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- Park details ---------- */

.detail__box {
  max-width: 1280px;
  margin: 0px auto;
  padding: 50px 24px 20px;
}

.detail__box-2 {
  max-width: 1000px;
  margin: 0px auto;
}

.detail__card {
  min-width: 0px;
}

.detail__box-3 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgb(244, 247, 252);
  border: 1px solid rgb(227, 231, 238);
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 36px;
}

.detail__icon {
  flex-shrink: 0;
  /* Center the 18px icon on the first text line (line-height 1.7 × 13.5px). */
  margin-top: calc((13.5px * 1.7 - 18px) / 2);
}

.detail__text {
  margin: 0px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgb(58, 58, 58);
}

.detail__section {
  margin-bottom: 48px;
}

.detail__box-4 {
  scroll-margin-top: 24px;
  margin: 6px 0px 22px;
}

.detail__box-5 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.detail__label {
  width: 22px;
  height: 2px;
  background: rgb(200, 16, 46);
}

.detail__label-2 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(200, 16, 46);
}

.detail__heading {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 800;
  font-size: 27px;
  color: rgb(6, 22, 41);
  margin: 0px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.detail__box-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}

.detail__box-7 {
  border: 1px solid rgb(227, 231, 238);
  border-radius: 6px;
  padding: 16px 18px;
  background: rgb(255, 255, 255);
}

.detail__box-8 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: rgb(107, 114, 128);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.detail__box-9 {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.detail__label-3 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: rgb(6, 22, 41);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.detail__label-4 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgb(58, 58, 58);
}

.detail__box-10 {
  border: 1px solid rgb(227, 231, 238);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 8px;
}

.detail__box-11 {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 20px;
  padding: 15px 20px;
  border-bottom: 1px solid rgb(239, 242, 247);
  align-items: start;
}

.detail__box-12 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: rgb(12, 45, 94);
}

.detail__box-13 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  color: rgb(58, 58, 58);
  line-height: 1.7;
}

.detail__box-14 {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 20px;
  padding: 15px 20px;
  border-bottom-width: medium;
  border-bottom-style: none;
  border-bottom-color: currentcolor;
  align-items: start;
}

.detail__box-15 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}

.detail__box-16 {
  border: 1px solid rgb(227, 231, 238);
  border-radius: 6px;
  padding: 18px 18px 16px;
  background: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.detail__label-5 {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: rgb(244, 247, 252);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(12, 45, 94);
}

.detail__box-17 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: rgb(26, 26, 26);
}

.detail__box-18 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgb(107, 114, 128);
  line-height: 1.68;
}

.detail__box-19 {
  background: rgb(251, 246, 236);
  border: 1px solid rgb(232, 220, 194);
  border-radius: 8px;
  padding: 26px 28px;
}

.detail__text-2 {
  margin: 0px 0px 18px;
  font-size: 15px;
  color: rgb(58, 58, 58);
}

.detail__box-20 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.detail__box-21 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: rgb(107, 114, 128);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.detail__box-22 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: rgb(26, 26, 26);
}

.detail__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgb(12, 45, 94);
  color: rgb(255, 255, 255);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .18s ease;
}

/* The button had no hover of its own: it was borrowing the body's inline-link
   hover, which turns text navy - invisible on a navy button. Deepen the ground
   and slide the arrow, the same as the CTA on About and the ad landing page. */
.detail__link:hover {
  background: rgb(6, 22, 41);
  color: rgb(255, 255, 255);
}

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

.article__box-15 {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid rgb(227, 231, 238);
}

.article__box-16 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: rgb(107, 114, 128);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.article__box-17 {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.article__link-5 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: rgb(58, 58, 58);
  border: 1px solid rgb(227, 231, 238);
  border-radius: 100px;
  padding: 6px 14px;
  text-decoration: none;
  white-space: nowrap;
}

.detail__box-23 {
  border-top: 1px solid rgb(227, 231, 238);
  margin-top: 30px;
  padding-top: 30px;
}

.detail__box-24 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.detail__label-6 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgb(107, 114, 128);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.detail__box-25 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Match the 44px social buttons on this page (default utility size is 40px). */
.ipd-share.og-share-util {
  width: 44px;
  height: 44px;
}

.detail__link-2 {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.detail__link-3 {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgb(24, 119, 242);
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.detail__link-4 {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgb(10, 102, 194);
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.detail__link-5 {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgb(6, 199, 85);
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.detail__box-26 {
  border-top: 1px solid rgb(227, 231, 238);
  margin-top: 36px;
  padding-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.detail__link-6 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgb(12, 45, 94);
  text-decoration: none;
}

.detail__link-7 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgb(6, 22, 41);
  text-decoration: none;
  border-bottom: 2px solid rgb(200, 16, 46);
  padding-bottom: 3px;
}

.detail__box-27 {
  height: 56px;
}

/* ---------- Related parks ---------- */

.related__label {
  font-size: 13px;
}

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

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

.related__box {
  max-width: 1280px;
  margin: 0px auto;
  padding: 40px 24px 44px;
}

.related__box-2 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.related__box-3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}

.related__heading {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 800;
  font-size: 25px;
  color: rgb(6, 22, 41);
  margin: 0px;
  letter-spacing: 0.01em;
}

.related__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: rgb(6, 22, 41);
  text-decoration: none;
  border-bottom: 2px solid rgb(200, 16, 46);
  padding-bottom: 3px;
}

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

.related__link-2 {
  display: flex;
  flex-direction: column;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(227, 231, 238);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  min-width: 0px;
  /* The card is not one anchor: the title's link is stretched over it, so the
     country chip can be a link of its own. */
  position: relative;
}

.related__card-link {
  color: inherit;
  text-decoration: none;
}
/* The click target for the card as a whole. */
.related__card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Above that overlay, so the chip keeps its own destination. */
.related__link-2 .og-chip {
  position: relative;
  z-index: 2;
}
/* The ring the wrapping anchor used to get on focus. */
.related__link-2:focus-within {
  outline: 2px solid rgb(12, 45, 94);
  outline-offset: 2px;
}

.related__box-5 {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgb(6, 22, 41);
}

.related__box-6 {
  position: absolute;
  inset: 0px;
  background: linear-gradient(rgba(6, 22, 41, 0.05) 0%, rgba(6, 22, 41, 0.62) 100%);
}

.related__box-7 {
  position: absolute;
  left: 11px;
  bottom: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.related__label-2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: rgb(255, 255, 255);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.related__label-3 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(6, 22, 41, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgb(255, 255, 255);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 100px;
}

.related__box-8 {
  padding: 15px 17px 16px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}

.related__label-4 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: rgb(200, 16, 46);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.related__card-title {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  color: rgb(26, 26, 26);
  margin: 7px 0px 0px;
  line-height: 1.42;
}

.related__box-9 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.related__label-5 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: rgb(58, 58, 58);
  border: 1px solid rgb(227, 231, 238);
  border-radius: 3px;
  padding: 3px 9px;
}

.related__box-10 {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid rgb(239, 242, 247);
}

.related__label-6 {
  width: 3px;
  height: 12px;
  background: rgb(200, 16, 46);
}

.related__label-7 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgb(107, 114, 128);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

.related__label-8 {
  flex: 1 1 0%;
}

/* PARK-ICONS:START - generated by tools/generate-park-icons.php - do not edit by hand */
.ipd-ico::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--ipd-ico) center / contain no-repeat;
  mask: var(--ipd-ico) center / contain no-repeat;
}
.ipd-ico--admin { --ipd-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%203h9l3%203v11H4z%22%2F%3E%3Cpath%20d%3D%22M7%209h6%22%2F%3E%3Cpath%20d%3D%22M7%2012h6%22%2F%3E%3C%2Fsvg%3E"); }
.ipd-ico--comms { --ipd-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%208a10%2010%200%200114%200%22%2F%3E%3Cpath%20d%3D%22M6%2011a6%206%200%20018%200%22%2F%3E%3Cpath%20d%3D%22M9%2014a1.5%201.5%200%20012%200%22%2F%3E%3C%2Fsvg%3E"); }
.ipd-ico--eco { --ipd-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2016c0-6%205-10%2011-11%200%206-4%2011-11%2011z%22%2F%3E%3Cpath%20d%3D%22M5%2016c2-4%204-6%207-7%22%2F%3E%3C%2Fsvg%3E"); }
.ipd-ico--factory { --ipd-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017h14%22%2F%3E%3Cpath%20d%3D%22M4%2017V9l4%202V9l4%202V6h2v11%22%2F%3E%3C%2Fsvg%3E"); }
.ipd-ico--globe { --ipd-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M2%2010h16%22%2F%3E%3Cpath%20d%3D%22M10%202c3%203%203%2013%200%2016%22%2F%3E%3Cpath%20d%3D%22M10%202c-3%203-3%2013%200%2016%22%2F%3E%3C%2Fsvg%3E"); }
.ipd-ico--incentive { --ipd-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%228%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M7%2012l-1%206%204-2%204%202-1-6%22%2F%3E%3C%2Fsvg%3E"); }
.ipd-ico--location { --ipd-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2018s6-5.6%206-10a6%206%200%2010-12%200c0%204.4%206%2010%206%2010z%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%228%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
.ipd-ico--logistics { --ipd-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%206h9v7H2z%22%2F%3E%3Cpath%20d%3D%22M11%208h4l3%203v2h-7z%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2215%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%221.4%22%2F%3E%3C%2Fsvg%3E"); }
.ipd-ico--power { --ipd-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%202L4%2011h5l-1%207%207-9h-5l1-7z%22%2F%3E%3C%2Fsvg%3E"); }
.ipd-ico--water { --ipd-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202s5%205.5%205%209a5%205%200%2001-10%200c0-3.5%205-9%205-9z%22%2F%3E%3C%2Fsvg%3E"); }
/* PARK-ICONS:END */

/* =====================================================================
   IMAGE SLIDER  (og/park-section-slider - see industrial-park-detail.js)
   The pattern is a core Gallery tagged `.ipd-slider`. Front end: JS adds
   `.is-ready`, moves the gallery's images into a scroll-snap viewport and wires
   arrows + dots. In the Gutenberg editor there's no JS, so the native gallery
   grid is left alone - only a caption is added (further down) to signal that it
   becomes a carousel live. The overrides below beat core's gallery flex layout.
   ===================================================================== */

.ipd-slider {
  position: relative;
  margin-top: 8px;
}

/* Once enhanced, override core Gallery's flex-row grid: stack the viewport and
   the dots in a column so the dots sit BELOW the image (not laid out beside /
   over it). `!important` beats core's generated layout container class. */
.ipd-body .ipd-slider.is-ready {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.ipd-slider__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 8px;
  background: rgb(6, 22, 41);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ipd-slider__viewport::-webkit-scrollbar { display: none; }

/* One full-width slide per view. Specificity is deliberately high to beat core's
   `.wp-block-gallery.has-nested-images .wp-block-image { width: calc(...) }`. */
.ipd-body .ipd-slider.is-ready .ipd-slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  scroll-snap-align: start;
  margin: 0;
}
.ipd-body .ipd-slider .ipd-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Captions would break the uniform slide height; the alt text still surfaces in
   the lightbox. */
.ipd-slider.is-ready .ipd-slide figcaption { display: none; }

.ipd-slider__nav {
  position: absolute;
  top: calc(50% - 26px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: rgb(6, 22, 41);
  box-shadow: 0 4px 14px -4px rgba(6, 22, 41, 0.45);
  cursor: pointer;
  z-index: 2;
  transition: background .2s ease, opacity .2s ease;
}
.ipd-slider__nav:hover { background: rgb(255, 255, 255); }
.ipd-slider__nav--prev { left: 12px; }
.ipd-slider__nav--next { right: 12px; }
.ipd-slider__nav:disabled { opacity: 0; pointer-events: none; }

/* Thumbnail navigation strip - one small preview per slide. Specificity note:
   core's `.is-layout-flex > :is(*, div) { margin: 0 }` (0,1,1) would zero the top
   margin, so it's scoped under `.ipd-body .ipd-slider` (0,3,0) to win. */
.ipd-body .ipd-slider .ipd-slider__thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* flex-start, not the default stretch: a stretched button leaves its dark
     ground showing under an image that keeps its own 16:9. */
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}
.ipd-slider__thumb {
  flex: 0 0 auto;
  /* Big enough to tell two aerial shots apart - 72px was a swatch, not a
     preview. Caps so a 7-image gallery still holds one row in the article
     column. */
  width: clamp(88px, 12vw, 116px);
  padding: 0;
  border: 1px solid rgb(227, 231, 238);
  border-radius: 6px;
  overflow: hidden;
  background: rgb(6, 22, 41);
  cursor: pointer;
  opacity: 0.62;
  transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ipd-slider__thumb:hover {
  opacity: 1;
  border-color: rgb(190, 199, 212);
}
.ipd-slider__thumb:focus-visible {
  outline: 2px solid rgb(12, 45, 94);
  outline-offset: 2px;
}
/* The one on screen: the site's red, as everywhere else a current item is
   marked, plus a soft ring so it reads at a glance in a row of similar shots. */
.ipd-slider__thumb.is-active {
  opacity: 1;
  border-color: rgb(200, 16, 46);
  box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.18);
}
.ipd-slider__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---- Editor-only: label the gallery so it's clearly the slider -------------
   `.editor-styles-wrapper` exists only inside the Gutenberg canvas, never on
   the front end. The native gallery grid (thumbnails + Add button + drag to
   reorder) is exactly the management UI we want, so it's left untouched - we
   only prepend a caption noting it renders as a carousel live. The full-width
   flex-basis puts the label on its own row above the thumbnails. */
.editor-styles-wrapper .ipd-slider::before {
  content: "Image slider — displays as a carousel on the live page";
  flex-basis: 100%;
  width: 100%;
  margin-bottom: 6px;
  font: 700 10.5px/1.4 Barlow, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(107, 114, 128);
}
/* Compact thumbnails in the editor: a 10-20 image slider should read as a tidy
   grid, not one image per row. The block editor wraps each nested image, so we
   force the gallery itself to wrap and size its DIRECT children (whatever the
   wrapper is) to a small fixed tile. `!important` beats core's gallery layout;
   editor-only + cosmetic. */
.editor-styles-wrapper .ipd-slider {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: flex-start;
}
.editor-styles-wrapper .ipd-slider > * {
  flex: 0 0 120px !important;
  width: 120px !important;
  max-width: 120px !important;
  margin: 0 !important;
}
.editor-styles-wrapper .ipd-slider img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
}

/* =====================================================================
   VIDEO  (og/park-section-video + any core Video / Embed block)
   ===================================================================== */

.ipd-video { margin-top: 8px; }
.ipd-video .wp-block-embed__wrapper {
  border-radius: 8px;
  overflow: hidden;
  background: rgb(6, 22, 41);
}
/* Imported videos carry their own iframe, so the aspect ratio is set here rather
   than relying on core's embed classes. */
.ipd-video .wp-block-embed__wrapper iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
/* Self-hosted core Video block. */
.ipd-body video {
  display: block;
  width: 100%;
  border-radius: 8px;
  background: rgb(6, 22, 41);
}

/* =====================================================================
   IMAGE LIGHTBOX  (view + download - see assets/js/industrial-park-detail.js)
   ===================================================================== */

/* Body images get a subtle affordance that they're clickable. */
.ipd-body .ipd-zoomable {
  cursor: zoom-in;
  transition: filter .2s ease;
}
.ipd-body .ipd-zoomable:hover { filter: brightness(0.94); }
.ipd-body .ipd-zoomable:focus-visible {
  outline: 2px solid rgb(12, 45, 94);
  outline-offset: 3px;
}

.ipd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s ease;
}
.ipd-lightbox.is-open { opacity: 1; }
.ipd-lightbox[hidden] { display: none; }

.ipd-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 22, 41, 0.88);
  backdrop-filter: blur(2px);
}

.ipd-lightbox__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(1100px, 100%);
  max-height: 100%;
  transform: scale(0.98);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.ipd-lightbox.is-open .ipd-lightbox__stage { transform: scale(1); }

.ipd-lightbox__bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ipd-lightbox__caption {
  flex: 1 1 0%;
  min-width: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ipd-lightbox__dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgb(12, 45, 94);
  color: rgb(255, 255, 255);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease;
}
.ipd-lightbox__dl:hover { background: rgb(9, 34, 71); }

.ipd-lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgb(255, 255, 255);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.ipd-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}

/* The PDF reader inside the viewer: a big fixed stage rather than the image's
   own proportions, since a parcel plan is read by zooming into it. */
.ipd-lightbox__pdf {
  display: block;
  width: min(1100px, 92vw);
  height: calc(100vh - 120px);
  border: 0;
  border-radius: 6px;
  background: rgb(255, 255, 255);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}
.ipd-lightbox__pdf[hidden] { display: none; }

.ipd-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  margin: 0 auto;
  object-fit: contain;
  border-radius: 6px;
  background: rgb(6, 22, 41);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .ipd-lightbox,
  .ipd-lightbox__stage { transition: none; }
}

/* =====================================================================
   GROUPED SPEC TABLE  (og/park-section-grouped-table)
   A term/value table with an OPTIONAL category column that groups several
   rows - the new-design equivalent of the old rowspan'd park-info tables.
   No true rowspan: the category label sits in a left column beside its stack
   of rows, which reads the same without needing merged cells. A group with no
   category ("--plain") is a normal full-width term/value block in the same
   table, so grouped and plain rows mix freely.
   ===================================================================== */
.ipd-spec {
  border: 1px solid rgb(227, 231, 238);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 8px;
}
.ipd-spec__group {
  display: grid;
  grid-template-columns: 190px 1fr;
  border-bottom: 1px solid rgb(227, 231, 238);
}
.ipd-spec__group:last-child { border-bottom: none; }
/* A category-less block spans the full width - the "normal" table row. */
.ipd-spec__group--plain { grid-template-columns: 1fr; }

.ipd-spec__cat {
  /* Vertically centred so it reads like a merged cell spanning its rows. */
  display: flex;
  align-items: center;
  padding: 15px 18px;
  background: rgb(248, 250, 252);
  border-right: 1px solid rgb(227, 231, 238);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: rgb(12, 45, 94);
}
.ipd-spec__rows { min-width: 0; }

.ipd-spec__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid rgb(239, 242, 247);
  align-items: start;
}
.ipd-spec__rows > .ipd-spec__row:last-child { border-bottom: none; }
.ipd-spec__term {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: rgb(26, 26, 26);
}
.ipd-spec__val {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  color: rgb(58, 58, 58);
  line-height: 1.7;
}

/* =====================================================================
   INFO TABLE  (core WordPress Table block, themed)
   The easy-to-edit table: a normal Table block - which has native add / remove
   row & column buttons - carrying the park design with nothing to tag and no
   inline CSS to type. Every rule here keys off the block's own markup, so a
   table inserted from the pattern and a table typed from scratch come out the
   same, and the migrated sheets - whose labels are real <th> - are styled as
   they stand. The migrated sheets still carry an `.ipd-table` class from the
   import; nothing keys off it any more, so it is harmless either way.

   Not scoped by `.ipd-body`, so the same design shows inside the editor, where
   the content isn't wrapped in it. This stylesheet is only loaded on the park
   detail view and the park editing screen (see inc/enqueue.php), so it cannot
   reach another post type's tables.
   ===================================================================== */
/* Light grey: visible but not heavy. */
.wp-block-table {
  margin-top: 8px;
  overflow-x: auto;
}
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgb(218, 224, 232);
  font-family: "Noto Sans JP", system-ui, sans-serif;
}
/* `.wp-block-table table td` (0,2,1) beats core's `.wp-block-table td` (0,2,0),
   and each side is set explicitly so the column (left/right) borders can't be
   stripped by a competing rule - the grid shows rows AND columns. */
.wp-block-table table td,
.wp-block-table table th {
  border-top: 1px solid rgb(224, 229, 236);
  border-bottom: 1px solid rgb(224, 229, 236);
  border-left: 1px solid rgb(224, 229, 236);
  border-right: 1px solid rgb(224, 229, 236);
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: rgb(58, 58, 58);
  vertical-align: top;
  text-align: left;
}
/* Header row (Table block » Settings » "Header section") - navy bar, for a
   title row like the old "工業団地情報" or for column names. */
.wp-block-table thead th {
  background: rgb(12, 45, 94);
  color: rgb(255, 255, 255);
  font-weight: 700;
  font-size: 13.5px;
}
/* The label column - tinted, navy, bold. It is reached two ways, because two
   shapes of table live on this page and neither should have to be tagged:

   1. the migrated sheets, whose labels are real <th> (including the nested
      ones: 主要都市・インフラからの距離 » 港). No width is forced on them - a
      sheet two panels wide sets its own.
   2. a table typed in the editor, where the core Table block writes every body
      cell as a <td>: there the first column is the label. Only applied when the
      body has no <th> of its own, so it cannot tint the continuation row of a
      migrated sheet's rowspan. */
.wp-block-table tbody th {
  background: rgb(248, 250, 252);
  font-weight: 700;
  color: rgb(12, 45, 94);
  text-align: center;
  vertical-align: middle;
}
.wp-block-table table:not(:has(tbody th)) tbody td:first-child {
  width: 28%;
  background: rgb(248, 250, 252);
  font-weight: 700;
  color: rgb(12, 45, 94);
}
/* Values sit centred against their label rather than riding the top of a tall
   merged cell - the imported sheets' look, now every table's. */
.wp-block-table tbody td {
  vertical-align: middle;
}
/* Shape the author put inside a cell - paragraphs, lists, bold - carried over
   from the old site. `.ipd-body p:not([class])` would otherwise render a cell's
   paragraphs at the body's 16px with a 20px gap, which is bigger than the table
   around them, so inside a cell they take the table's own size and a tighter
   gap. The last one has no trailing gap: it would read as padding. */
.wp-block-table td > p,
.wp-block-table th > p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 0 8px;
}
.wp-block-table td > p:last-child,
.wp-block-table th > p:last-child {
  margin-bottom: 0;
}
.wp-block-table td ul,
.wp-block-table td ol {
  margin: 0 0 8px;
  padding-left: 1.35em;
}
.wp-block-table td ul:last-child,
.wp-block-table td ol:last-child {
  margin-bottom: 0;
}
.wp-block-table td li {
  margin: 0 0 2px;
}
/* A contact photo the author dropped into a cell (18 parks carry one). */
.wp-block-table td img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 6px;
}
/* Phone view of the sheet (built by assets/js/industrial-park-detail.js, shown
   instead of the table below 782px - see MOBILE / RESPONSIVE). Each label/value
   pair becomes its own card, so the sheet reads straight down the column with
   no sideways scroll. Hidden by default: the table is the desktop view, and
   `display:none` keeps the copy out of the accessibility tree too. */
.ipd-tstack {
  display: none;
  border: 1px solid rgb(218, 224, 232);
  border-radius: 6px;
  overflow: hidden;
  font-family: "Noto Sans JP", system-ui, sans-serif;
}
/* The rowspan group header (主要都市・インフラからの距離 etc.) - the navy bar
   the table's own header row uses, so the two views read the same. */
.ipd-tstack__group {
  background: rgb(12, 45, 94);
  color: rgb(255, 255, 255);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  padding: 9px 14px;
}
.ipd-tstack__row {
  padding: 11px 14px;
  border-top: 1px solid rgb(224, 229, 236);
}
/* Rows under a group header are tinted and indented, so it is clear how far the
   group reaches without repeating its label on every row. */
.ipd-tstack__row.is-sub {
  background: rgb(248, 250, 252);
  padding-left: 22px;
}
.ipd-tstack > :first-child {
  border-top: 0;
}
/* The label column of the table, now the line above the value. */
.ipd-tstack__term {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: rgb(12, 45, 94);
  margin-bottom: 3px;
}
.ipd-tstack__term:empty {
  display: none;
}
.ipd-tstack__val {
  font-size: 14px;
  line-height: 1.7;
  color: rgb(58, 58, 58);
  /* A URL or a long English address has no break points of its own and would
     otherwise push the card wider than the screen. */
  overflow-wrap: anywhere;
}
.ipd-tstack__val a {
  color: rgb(200, 16, 46);
}

/* Documents: the PDF preview with a download button matching the page's own
   buttons (.detail__link) rather than core's pill. */
.ipd-doc .wp-block-file__embed {
  border: 1px solid rgb(227, 231, 238);
  border-radius: 8px;
  margin-bottom: 16px;
  /* The browser's own PDF viewer paints a dark ground that we cannot restyle,
     so the frame gets a white rim of its own and the dark block sits inside it
     rather than reading as one heavy slab. */
  background: rgb(255, 255, 255);
  padding: 10px;
}
/* The download button also sits under the parcel map, where the PDF is the map's
   own copy (og_park_map_download) - same button, one step out of .ipd-doc. */
.ipd-map-dl {
  margin-top: 16px;
}
.ipd-doc .wp-block-file__button,
.ipd-map-dl .wp-block-file__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgb(12, 45, 94);
  color: rgb(255, 255, 255);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 4px;
  text-decoration: none;
  margin-left: 0;
}
.ipd-doc .wp-block-file__button:hover,
.ipd-doc .wp-block-file__button:focus-visible,
.ipd-map-dl .wp-block-file__button:hover,
.ipd-map-dl .wp-block-file__button:focus-visible {
  background: rgb(9, 34, 71);
  color: rgb(255, 255, 255);
}
/* Full screen (industrial-park-detail.js). The secondary of the pair: outlined,
   so the download button stays the primary action. */
.ipd-doc__full {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgb(255, 255, 255);
  color: rgb(12, 45, 94);
  border: 1px solid rgb(12, 45, 94);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
}
/* The two actions on one row (industrial-park-detail.js moves them here), so
   full screen does not stack them. */
.ipd-doc__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ipd-doc__full:hover,
.ipd-doc__full:focus-visible {
  background: rgb(244, 247, 252);
}
/* In full screen the frame is the whole screen, so the embed fills it and the
   two buttons sit over it rather than below the fold. */
.ipd-doc.is-full {
  background: rgb(6, 22, 41);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Navy on navy would disappear against the full-screen ground. */
.ipd-doc.is-full .wp-block-file__button {
  background: rgb(255, 255, 255);
  color: rgb(12, 45, 94);
}
.ipd-doc.is-full .wp-block-file__button:hover,
.ipd-doc.is-full .wp-block-file__button:focus-visible {
  background: rgb(232, 238, 247);
  color: rgb(12, 45, 94);
}
.ipd-doc.is-full .wp-block-file__embed {
  width: 100%;
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  border-color: rgba(255, 255, 255, 0.2);
  margin-bottom: 14px;
}
.ipd-doc.is-full .ipd-doc__bar {
  flex: 0 0 auto;
  justify-content: center;
}

/* The video sits above the body, where the old site had it inside the
   description, so it needs the section rhythm of its own. */

/* Reference figures - the import pairs the map with the operator logo in one
   row, but the logo is lifted into the hero (og_strip_park_operator_figure()),
   so in practice this row holds the map alone. */
.ipd-figures {
  gap: 28px;
}
/* The operator column is taken out of this row for the hero, so a map left on its
   own runs the full width instead of holding half. */
.ipd-figures.is-single .wp-block-column {
  flex-basis: 100% !important;
}
/* A light plate around a plan drawing, and a cap so a tall one does not
   dominate the page. */
.ipd-figure {
  border: 1px solid rgb(227, 231, 238);
  border-radius: 8px;
  background: rgb(252, 253, 255);
  padding: 18px;
  margin-top: 8px;
}
.ipd-figure img {
  display: block;
  margin: 0 auto;
  max-height: 420px;
  width: auto;
  max-width: 100%;
}

/* =====================================================================
   MOBILE / RESPONSIVE
   ===================================================================== */
/* Facilities cards: three across, two on tablets, one on phones (below). */
@media (max-width: 1024px) {
  .detail__box-15 { grid-template-columns: repeat(2, 1fr); }
}
/* Phones: a spec sheet cannot compress into a 390px column - cells wrap one
   character at a time and the far column is cut off. Same treatment the article
   tables use: a readable minimum, and the block's own frame scrolls. The
   minimum follows the column count, so a plain label/value sheet is never
   forced wider than it needs. */
@media (max-width: 782px) {
  .ipd-body .wp-block-table { -webkit-overflow-scrolling: touch; }
  .ipd-body .wp-block-table table { min-width: 520px; }
  .ipd-body .wp-block-table table:has(tr > :nth-child(3)) { min-width: 660px; }
  .ipd-body .wp-block-table table:has(tr > :nth-child(4)) { min-width: 780px; }
  /* A label/value sheet does not scroll at all: the stacked copy replaces it.
     Only tables the script could convert carry `has-stack`, so a matrix table
     (real column headers) still falls back to the scrolling frame above. */
  .ipd-body .wp-block-table.has-stack { overflow-x: visible; }
  .ipd-body .wp-block-table.has-stack > table { display: none; }
  .ipd-body .wp-block-table.has-stack .ipd-tstack { display: block; }
}
@media (max-width: 768px) {
  .hero__title { font-size: clamp(24px, 7vw, 40px); }
  .hero__text { max-width: none; }
  /* A 7-image strip would stack into three rows on a phone; scroll it instead. */
  .ipd-body .ipd-slider .ipd-slider__thumbs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ipd-body .ipd-slider .ipd-slider__thumbs::-webkit-scrollbar { display: none; }
  /* The operator plate stacks above the name rather than squeezing it. */
  .hero__box-9 { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__box-10 { width: 150px; height: 84px; padding: 11px; }
  .detail__box-6,
  .detail__box-15,
  .detail__box-20,
  .related__box-4 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .detail__box-11,
  .detail__box-14 { grid-template-columns: 1fr; gap: 4px; }
  /* Stack the grouped table: category on top of its rows, terms over values. */
  .ipd-spec__group { grid-template-columns: 1fr; }
  .ipd-spec__cat {
    border-right: none;
    border-bottom: 1px solid rgb(227, 231, 238);
  }
  .ipd-spec__row { grid-template-columns: 1fr; gap: 4px; }
}