/* =====================================================================
   OG Home - front-page section styles
   ---------------------------------------------------------------------
   Page-specific section classes converted from the mockup. The global
   reset, page wrapper, and shared header/footer rules now live in
   main.css and are stripped here. Hero keyframes are kept.
   ===================================================================== */

/* ---- animations / helpers lifted from inline <style> ---- */
@keyframes heroFadeUpB { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: none;} }
          @keyframes heroProgressB { from { transform: scaleX(0);} to { transform: scaleX(1);} }

/* ---------- Hero banner ---------- */

.hero__section {
  position: relative;
  height: 450px;
  overflow: hidden;
  background: rgb(6, 22, 41);
}

.hero__box {
  position: absolute;
  inset: 0px;
  opacity: 0;
  transition: opacity 900ms;
}

.hero__box-2 {
  position: absolute;
  inset: 0px;
  overflow: hidden;
}

.hero__box-3 {
  position: absolute;
  inset: 0px;
  background: linear-gradient(rgba(6, 22, 41, 0.05) 0%, rgba(6, 22, 41, 0.35) 55%, rgba(6, 22, 41, 0.78) 100%);
}

.hero__box-4 {
  position: absolute;
  inset: 0px;
  opacity: 1;
  transition: opacity 900ms;
}

.hero__box-5 {
  position: absolute;
  inset: 0px;
  z-index: 1;
  background: radial-gradient(rgba(6, 22, 41, 0.35) 0%, rgba(6, 22, 41, 0.7) 100%);
  pointer-events: none;
}

.hero__box-6 {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 3;
}

.hero__box-7 {
  height: 100%;
  background: rgb(200, 16, 46);
  animation: 6500ms linear 0s 1 normal forwards running heroProgressB;
  transform-origin: left center;
}

.hero__box-8 {
  position: relative;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0px 24px;
}

.hero__box-9 {
  animation: 700ms ease 0s 1 normal both running heroFadeUpB;
  max-width: 880px;
}

.hero__box-10 {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  justify-content: center;
}

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

.hero__label-2 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  display: inline-block;
}

.hero__title {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 800;
  font-size: 46px;
  color: rgb(255, 255, 255);
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0px auto;
  max-width: 860px;
  text-wrap: balance;
  text-shadow: rgba(6, 16, 30, 0.55) 0px 2px 20px;
}

.hero__text {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  margin: 18px auto 0px;
  max-width: 640px;
  line-height: 1.75;
  /* The slide text is escaped, so a break has to come from the text itself: a
     newline in the Text box (or a typed <br>, turned into one in front-page.php)
     breaks the line here. `pre-line`, not `pre-wrap`, so only the newlines
     count - runs of spaces and the template's own indentation still collapse. */
  white-space: pre-line;
}

.hero__box-11 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Only the active slide's button row is shown; [hidden] has to beat display:flex. */
.hero__box-11[hidden] {
  display: none;
}

/* Same reason: a slide with no eyebrow hides the row, and inline-flex would
   otherwise win over the browser's own [hidden] rule. */
.hero__box-10[hidden] {
  display: none;
}

.hero__btn {
  background: rgb(200, 16, 46);
  color: rgb(255, 255, 255);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  height: 46px;
  padding: 0px 22px;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero__link {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  color: rgb(255, 255, 255);
  height: 46px;
  padding: 0px 18px;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
}

/* ---- Hero CTA hover -------------------------------------------------
   Quiet feedback only: the primary deepens, the secondary's glass firms up.
   No lift, no sheen - this is an information site, and the buttons should
   answer the cursor without asking for attention. */
.hero__btn,
.hero__link {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hero__btn:hover { background: rgb(168, 12, 38); }

.hero__link:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}

.hero__btn:focus-visible,
.hero__link:focus-visible {
  outline: 2px solid rgb(255, 255, 255);
  outline-offset: 3px;
}

/* ---------- Stats / ticker bar ---------- */

.ticker__section {
  background: rgb(6, 22, 41);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgb(255, 255, 255);
}

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

.ticker__box-2 {
  padding: 18px 0px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ticker__box-3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.ticker__label-2 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgb(255, 255, 255);
}

.ticker__label-3 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}

.ticker__label-4 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

/* Thumbnails keep a quarter-width column each, so a short set (1-3 slides)
   centres rather than hugging the left. --ticker-cols is set per-render from
   the slide count, capped at 4; more than four wrap onto a second row. */
.ticker__box-4 {
  display: grid;
  grid-template-columns: repeat(var(--ticker-cols, 4), minmax(0, 25%));
  justify-content: center;
  gap: 0px;
}

.ticker__link {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 18px;
  /* A <button>, so it is keyboard-reachable: reset the UA chrome it brings. */
  appearance: none;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: background 250ms;
}

/* The trailing divider sat flush against the container edge at four slides;
   once the set is centred it would float mid-canvas. */
.ticker__box-4 > :last-child {
  border-right: none;
}

.ticker__box-5 {
  position: relative;
  width: 96px;
  height: 64px;
  overflow: hidden;
  border-radius: 2px;
  outline: rgba(255, 255, 255, 0.06) solid 1px;
}

.ticker__img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(40%) brightness(0.7);
  transition: filter 300ms;
}

.ticker__box-6 {
  min-width: 0px;
}

.ticker__box-7 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ticker__box-8 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---------- Latest news ---------- */

.news__section {
  background: rgb(246, 241, 231);
  padding: 96px 0px;
  position: relative;
}

.news__box {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 280px;
  background: linear-gradient(rgb(236, 227, 208) 0%, rgb(246, 241, 231) 100%);
  z-index: 0;
}

.news__box-2 {
  position: relative;
  max-width: 1280px;
  margin: 0px auto;
  padding: 0px 24px;
  z-index: 1;
}

.news__box-3 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgb(227, 231, 238);
}

.news__box-4 {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.news__box-5 {
  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 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  height: 26px;
  line-height: 1;
}

.news__label {
  opacity: 0.7;
  font-size: 10px;
}

.news__box-6 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: rgb(26, 26, 26);
  margin-top: 0px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.news__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Barlow, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgb(26, 26, 26);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.news__box-7 {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 32px;
  align-items: stretch;
}

/* Right column: the 3 thumbnail rows, stretched to match the feature card. */
.news__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

.news__card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgb(227, 217, 197);
  background: rgb(28, 26, 23);
  cursor: pointer;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(28, 26, 23, 0.1) 0px 8px 24px;
}

.news__box-8 {
  position: relative;
  flex: 1 1 0%;
  min-height: 0px;
}

.news__box-9 {
  position: absolute;
  inset: 0px;
  background: linear-gradient(rgba(28, 26, 23, 0.1) 0%, rgba(28, 26, 23, 0.25) 45%, rgba(28, 26, 23, 0.94) 100%);
}

.news__box-10 {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.news__label-2 {
  background: rgb(200, 16, 46);
  color: rgb(255, 255, 255);
  font-family: Barlow, system-ui, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 5px 10px;
  text-transform: uppercase;
}

.news__label-3 {
  background: rgb(200, 16, 46);
  color: rgb(255, 255, 255);
  font-family: Barlow, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}

.news__label-4 {
  background: rgb(31, 138, 91);
  color: rgb(255, 255, 255);
  font-family: Barlow, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}

.news__box-11 {
  flex: 1 1 0%;
}

.news__label-5 {
  background: rgba(255, 255, 255, 0.12);
  color: rgb(255, 255, 255);
  font-family: Barlow, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
}

.news__box-12 {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding: 32px 36px;
}

/* The feature byline carries country + date + every tag on the post, and it sits
   over the hero image where there is no room to overflow. Editors control how
   many tags a post has, so let the line wrap rather than push content out of the
   card. (The thumbnail rows' badge line, .news__box-17, already wraps.) */
.news__box-13 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.news__label-6 {
  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);
}

.news__label-7 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.news__label-8 {
  width: 16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.news__label-9 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgb(200, 16, 46);
  letter-spacing: 0.16em;
}

/* Feature-card tags sit directly on the hero photo, where bare red text only
   survives against the gradient's dark end - a post with several tags pushes the
   last ones into whatever bright region the image happens to have. Give them the
   same translucent pill the country chip beside them already uses, so every tag
   stays legible over any image. Scoped to .news__card: the thumbnail rows render
   these on cream and need no help. */
.news__card .news__label-9 {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgb(255, 255, 255);
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.news__card-title {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: rgb(255, 255, 255);
  margin: 0px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.news__text {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  margin: 14px 0px 0px;
  line-height: 1.75;
  max-width: 580px;
}

.news__box-14 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.news__link-2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0px 20px;
  background: rgb(246, 241, 231);
  color: rgb(28, 26, 23);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  border-radius: 3px;
  cursor: pointer;
}

.news__card-2 {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  align-items: stretch;
  background: rgb(255, 252, 246);
  border: 1px solid rgb(227, 217, 197);
  border-radius: 6px;
  padding: 16px;
  cursor: pointer;
  flex: 1 1 0%;
  min-height: 0px;
}

.news__box-15 {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: rgb(236, 227, 208);
}

.news__label-10 {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(28, 26, 23, 0.88);
  color: rgb(246, 241, 231);
  font-family: Barlow, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
}

.news__box-16 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0px;
}

.news__box-17 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.news__item-title {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: rgb(28, 26, 23);
  margin: 0px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

.news__box-18 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgb(239, 231, 215);
}

.news__label-11 {
  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);
}

/* Bundled 4:3 country flag inside a byline chip (og_country_chip()). The chips
   are inline-flex with a 6px gap, so the img just slots in. Fixed box, so a
   missing or odd-ratio flag can never change the pill's height; the hairline
   ring keeps white-heavy flags (Indonesia, Singapore) from bleeding into a
   light chip background. */
.og-flag {
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
  display: block;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}

/* The feature chip sits on the dark hero image, where a dark ring vanishes.
   The park card's country chip sits on its photograph for the same reason. */
.news__label-6 .og-flag,
.parks__label-5 .og-flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Card-wide link for the feature card. The card used to be one big <a>, but the
   byline chips are links now and nesting anchors is invalid. So the whole-card
   link is this transparent overlay: it covers the card at z-index 1, sitting
   above the (z-index:auto) text boxes - clicks on the title, summary or CTA fall
   through to it - while .og-chip lifts the real links to z-index 2 so they stay
   individually clickable. */
.og-card-overlay {
  position: absolute;
  inset: 0px;
  z-index: 1;
}

/* A byline chip that links somewhere of its own (country, tag) - must out-rank
   the card overlay to be clickable at all. */
.og-chip {
  position: relative;
  z-index: 2;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .2s ease, color .2s ease;
}

.og-chip:hover {
  opacity: 0.75;
}

/* Outbound marker on a News item with an External URL - the card leaves the
   site, so say so before the click. Trails the title inline; the muted tone
   keeps it a hint rather than a second focal point next to the NEW/HOT pills. */
.og-ext {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  color: rgb(122, 110, 94);
  flex: 0 0 auto;
}

.news__card-2:hover .og-ext {
  color: rgb(200, 16, 46);
}

/* A date and a read time are single tokens: "2026.07.15", "4分". Left to wrap
   they split between the number and its 分, which reads as two stray
   characters. They are short - they never need to break. */
.news__label-12 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgb(122, 110, 94);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.news__label-13 {
  flex: 0 0 auto; /* A 4px dot, so it must not be squeezed into an oval. */
  width: 4px;
  height: 4px;
  background: rgb(227, 217, 197);
  border-radius: 50%;
}

/* ---------- Featured industrial parks ---------- */

.parks__img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

/* Consistent image zoom on hover across homepage list cards.
   The image is absolutely positioned inside an overflow:hidden box,
   so scaling only affects the image - no surrounding text moves. */
.news__card:hover .parks__img,
.news__card-2:hover .parks__img,
.parks__card:hover .parks__img,
.media__card:hover .parks__img {
  transform: scale(1.05);
}

.parks__section {
  background: rgb(6, 22, 41);
  padding: 84px 0px 92px;
  overflow: hidden;
}

.parks__box {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 34px;
  padding-bottom: 22px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
}

.parks__heading {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 800;
  font-size: 34px;
  color: rgb(255, 255, 255);
  margin: 0px;
  letter-spacing: 0.01em;
  line-height: 1.15;
  white-space: nowrap;
}

.parks__box-2 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.parks__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Barlow, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgb(255, 255, 255);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.parks__label-2 {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
}

.parks__label-3 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

.parks__label-4 {
  color: rgba(255, 255, 255, 0.4);
}

.parks__box-3 {
  display: flex;
  gap: 4px;
}

.parks__btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgb(255, 255, 255);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.parks__btn-2 {
  width: 40px;
  height: 40px;
  background: rgb(255, 255, 255);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  color: rgb(6, 22, 41);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.parks__box-4 {
  overflow: hidden;
  margin: 0px -4px;
  padding: 4px;
}

/* --og-cards and --og-slide-ms are written onto the track by front-page.php from
   OG Hub » Homepage » Featured Parks (Parks Per Row, Slide Speed). The fallbacks
   here are the design defaults, so the section still looks right if the options
   are never touched. */
.parks__box-5 {
  display: grid;
  grid-auto-flow: column;
  /* n cards and (n-1) gaps fill the row. */
  grid-auto-columns: calc((100% - (var(--og-cards, 3) - 1) * 24px) / var(--og-cards, 3));
  gap: 24px;
  transform: translateX(calc(0% + 0px));
  /* Ease-out-expo, the same curve the header reveal uses: it leaves quickly and
     arrives slowly, so the cards settle instead of stopping. */
  transition: transform var(--og-slide-ms, 820ms) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  backface-visibility: hidden;   /* keeps the card text crisp mid-slide */
}

/* Static (OG Hub » Featured Parks -> Show as Carousel = off). The track stops
   being a single sliding row and wraps into rows of three, so every selected
   park is on the page. home.js leaves this track alone (data-carousel="off"),
   so nothing would ever scroll it - without this, park 4 onwards is rendered
   but clipped by .parks__box-4's overflow. */
.parks__box-5[data-carousel="off"] {
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--og-cards, 3), 1fr);
  grid-auto-columns: auto;
  row-gap: 24px;
  transform: none;
  transition: none;
}

.parks__card {
  position: relative;
  height: 470px;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  background: rgb(6, 22, 41);
  min-width: 0px;
}

.parks__box-6 {
  position: absolute;
  inset: 0px;
  background: linear-gradient(rgba(6, 22, 41, 0.22) 0%, rgba(6, 22, 41, 0) 30%, rgba(6, 22, 41, 0.55) 60%, rgba(6, 22, 41, 0.94) 100%);
}

.parks__box-7 {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.parks__label-5 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgb(255, 255, 255);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
}

.parks__label-6 {
  background: rgb(12, 45, 94);
  color: rgb(255, 255, 255);
  font-family: Barlow, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 4px 9px;
  text-transform: uppercase;
}

.parks__box-8 {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding: 0px 22px 24px;
}

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

.parks__label-7 {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  flex-shrink: 0;
  background: oklch(0.6 0.13 200);
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Barlow, system-ui, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: -0.02em;
}

.parks__label-8 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.parks__card-title {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: rgb(255, 255, 255);
  margin: 0px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.parks__text {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  margin: 8px 0px 0px;
  line-height: 1.7;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.parks__box-10 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.parks__label-9 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.12em;
}

.parks__label-10 {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  font-variant-numeric: tabular-nums;
}

.parks__box-11 {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- On-site promotion ---------- */

.promo__section {
  background: rgb(255, 255, 255);
  padding: 78px 0px 84px;
}

.promo__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
}

.promo__box-2 {
  display: flex;
  align-items: stretch;
  gap: 18px;
}

.promo__label {
  width: 6px;
  align-self: stretch;
  background: rgb(200, 16, 46);
  flex-shrink: 0;
}

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

.promo__box-3 {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

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

.promo__label-3 {
  color: rgb(227, 231, 238);
}

.promo__box-4 {
  display: flex;
  gap: 6px;
}

.promo__btn {
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(227, 231, 238);
  color: rgb(12, 45, 94);
}

.promo__btn-2 {
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(12, 45, 94);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  color: rgb(255, 255, 255);
}

.promo__box-5 {
  display: grid;
  grid-auto-flow: column;
  /* Same --og-cards / --og-slide-ms contract as .parks__box-5, written on by
     front-page.php from OG Hub » Promotions & Partners. Wider gap, hence 30px. */
  grid-auto-columns: calc((100% - (var(--og-cards, 3) - 1) * 30px) / var(--og-cards, 3));
  gap: 30px;
  transform: translateX(calc(0% + 0px));
  transition: transform var(--og-slide-ms, 820ms) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  backface-visibility: hidden;
}

/* Static (Show as Carousel = off): wrap into rows instead of one sliding row. */
.promo__box-5[data-carousel="off"] {
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--og-cards, 3), 1fr);
  grid-auto-columns: auto;
  row-gap: 30px;
  transform: none;
  transition: none;
}

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

/* One line for the title, two for the text under it. Longer copy is ellipsised,
   not refused - the field takes any length. */
.promo__card-title {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 800;
  font-size: 21px;
  color: rgb(26, 26, 26);
  margin: 16px 0px 10px;
  line-height: 1.42;
  letter-spacing: 0.01em;
  /* A title is not an excerpt: it is the one line that says what the thing is,
     so it wraps in full rather than stopping at an ellipsis. The text beneath it
     still clamps - that is a summary, and shortening a summary loses nothing. */
  text-wrap: pretty;
}

.promo__text {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgb(107, 114, 128);
  margin: 0px 0px 18px;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.promo__label-5 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  font-family: Barlow, system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(12, 45, 94);
}

.promo__box-6 {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Carousel page dots ---------- */
.promo__btn-3,
.promo__btn-4,
.parks__btn-3,
.parks__btn-4 {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

.promo__btn-3,
.parks__btn-3 {
  width: 28px;
  background: rgb(200, 16, 46);
  cursor: default;
}

.promo__btn-4 {
  background: rgb(210, 214, 222);
}

.promo__btn-4:hover {
  background: rgb(12, 45, 94);
}

.parks__btn-4 {
  background: rgba(255, 255, 255, 0.3);
}

.parks__btn-4:hover {
  background: rgba(255, 255, 255, 0.7);
}

.promo__btn-3:focus-visible,
.promo__btn-4:focus-visible,
.parks__btn-3:focus-visible,
.parks__btn-4:focus-visible {
  outline: 2px solid rgb(200, 16, 46);
  outline-offset: 3px;
}

/* ---------- inline <style> from on-site promotion section ---------- */

.ogB-promo {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.ogB-promo__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.ogB-promo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), filter .5s ease;
}

.ogB-promo:hover .ogB-promo__img {
  transform: scale(1.05);
}

.ogB-promo__num {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
  color: #061629;
  fontFamily: 'Barlow', system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  line-height: 1;
}

.ogB-promo__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
}

.ogB-promo__tick {
  width: 3px;
  height: 15px;
  background: #C8102E;
  flex-shrink: 0;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.ogB-promo:hover .ogB-promo__tick {
  transform: scaleY(1.47);
}

.ogB-promo__arrow {
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.ogB-promo:hover .ogB-promo__arrow {
  transform: translateX(6px);
}

.ogB-promo:hover .ogB-promo__title {
  color: #C8102E;
}

.ogB-promo__title {
  transition: color .25s ease;
}

/* ---------- Partner media ---------- */

.media__section {
  background: rgb(246, 241, 231);
  padding: 78px 0px 84px;
}

.media__card {
  background: rgb(255, 255, 255);
  border: none;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  min-width: 0px;
}

.media__link {
  display: flex;
  flex-direction: column;
  min-width: 0px;
  color: inherit;
  text-decoration: none;
}

.media__box {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.media__label {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.95);
  color: rgb(26, 26, 26);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media__box-2 {
  padding: 20px 22px 22px;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}

/* Both card texts stop at two lines and end in an ellipsis: the cards share one
   grid row, so an over-long entry would otherwise stretch every card beside it. */
.media__card-title {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: rgb(26, 26, 26);
  margin: 0px;
  letter-spacing: 0.01em;
  line-height: 1.4;
  /* A title is not an excerpt: it is the one line that says what the thing is,
     so it wraps in full rather than stopping at an ellipsis. The text beneath it
     still clamps - that is a summary, and shortening a summary loses nothing. */
  text-wrap: pretty;
}

.media__text {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: rgb(107, 114, 128);
  margin: 8px 0px 0px;
  line-height: 1.7;
  flex: 1 1 0%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* .media__card is shared by サイト外プロモーション (inside .promo__section) and
   パートナーメディア (inside .media__section). The promo titles were cut to one
   line here; a title reading "ミャンマーの建設事情と…" says nothing, so both wrap
   in full now. The description under each still stops at two lines. */

/* ---------- Hero thumbnail nav (active state, driven by home.js) ---------- */
.ticker__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgb(200, 16, 46);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ticker__num {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.ticker__link.is-active { background: rgba(255, 255, 255, 0.05); }
.ticker__link.is-active .ticker__bar { opacity: 1; }
.ticker__link.is-active .ticker__img { filter: none; }
.ticker__link.is-active .ticker__box-5 { outline-color: rgba(255, 255, 255, 0.2); }
.ticker__link.is-active .ticker__num { color: rgb(200, 16, 46); }
.ticker__link.is-active .ticker__box-8 { color: #fff; font-weight: 700; }

/* ---------- Promotion / Partner media: no link underline, no card border ---------- */
.ogB-promo,
.ogB-promo:hover,
.ogB-promo:hover .ogB-promo__title,
.media__card,
.media__card a {
  text-decoration: none;
}

/* =====================================================================
   MOBILE / RESPONSIVE - front page
   ===================================================================== */
/* --- News: stack before the list column gets too narrow to read ---------
   The section is a 1.35fr / 1fr split - one big featured card beside a list of
   smaller ones. The split holds on a desktop, but as the window narrows the
   list column is squeezed first: by ~1150px each card's tags, title and meta
   are all wrapping, and the row of country / date / read time breaks apart.
   There is no width left to take from the cards, so the two parts stop sharing
   the row and each take the full width instead. */
@media (max-width: 1150px) {
  .news__box-7 { grid-template-columns: 1fr; }

  /* The featured card no longer has a tall column to match, so it does not need
     to hold a 560px height of its own. */
  .news__card { min-height: 460px; }
}

@media (max-width: 768px) {
  .hero__title { font-size: 30px; }
  .parks__heading,
  .promo__heading { font-size: 24px; white-space: normal; }
  .news__label-6,
  .news__label-11,
  .parks__link,
  .promo__label-4 { white-space: normal; }

  /* --- Section headings ---------------------------------------------
     Every section head is one flex row: the heading, and the "view all"
     link (plus carousel controls) pushed to the far end. There is no room
     for both on a phone, and the row does not wrap - so the heading gets
     squeezed into a column one or two characters wide while the link keeps
     its size. Stack them instead: the heading takes the full width, and
     what sat beside it sits under it. */
  .news__box-3,
  .parks__box,
  .promo__box {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* The heading now owns the row, so it can use it. */
  .news__box-4,
  .parks__box > div:first-child,
  .promo__box-2 {
    width: 100%;
    min-width: 0; /* Let the text wrap instead of forcing the flex item wide. */
  }
  .news__box-6,
  .parks__heading,
  .promo__heading {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere; /* Long JP headings break between characters, not mid-word. */
  }

  /* The trailing controls line up under the heading, not off to one side. */
  .parks__box-2,
  .promo__box-3 {
    width: 100%;
    justify-content: flex-start;
  }
  .ticker__box-4 { grid-template-columns: 1fr; }
  .news__box-7 { grid-template-columns: 1fr; }
  .news__card-2 { grid-template-columns: 1fr; }

  /* The news thumbnail is positioned absolutely inside this wrapper, so the
     wrapper carries no height of its own - across two columns the grid row
     stretched it to the height of the text beside it. Stacked, there is nothing
     left to stretch against: it collapses to a hairline and the picture
     disappears. Give it a shape of its own. */
  .news__box-15 {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  /* --- Featured news card ---
     Same badges, byline and summary, sized for one narrow column. */
  .news__card { min-height: 420px; }

  /* The spacer pushing 読了 right is what forces this row to one line. */
  .news__box-10 {
    top: 14px;
    left: 16px;
    right: 16px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .news__box-11 { display: none; }

  .news__box-12 { padding: 22px 18px; }

  .news__box-13 {
    gap: 8px;
    margin-bottom: 10px;
  }

  /* The dash costs a wrap and separates nothing once the row has wrapped. */
  .news__label-8 { display: none; }

  .news__card-title {
    font-size: 20px;
    line-height: 1.45;
    /* Was clamped to three lines on a phone. A title is not an excerpt - it is
       the line that says what the thing is - so it wraps in full. */
    text-wrap: pretty;
  }

  /* Three lines keeps the headline and the button on screen together. */
  .news__text {
    font-size: 13px;
    line-height: 1.7;
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .news__box-14 { margin-top: 16px; }

  /* Darker, higher scrim: the text block reaches the bright part of the photo at
     this width, and white on pale sky is unreadable. */
  .news__box-9 {
    background: linear-gradient(rgba(28, 26, 23, 0.2) 0%, rgba(28, 26, 23, 0.5) 35%, rgba(28, 26, 23, 0.96) 100%);
  }

  /* Featured Parks / Promo stay CAROUSELS - don't stack. Widen each card so
     ~1 shows per page (with a peek of the next); home.js re-pages from the
     card width automatically. */
  .parks__box-5 { grid-auto-columns: calc(85% - 16px); }
  .promo__box-5 { grid-auto-columns: calc(85% - 20px); }

  /* ...but a STATIC list has no paging, so it stacks one card per row. */
  .parks__box-5[data-carousel="off"],
  .promo__box-5[data-carousel="off"] { grid-template-columns: 1fr; }

  /* --- Promotion / Partner Media sections ---
     Three carousels of the same shape: heading row, cards, dots. Each card is
     sized for a third of a desktop row, so at 85% of a phone the picture alone
     runs most of a screen before any text shows. */
  .promo__section,
  .media__section { padding: 52px 0 58px; }
  .promo__box { margin-bottom: 22px; }

  /* 16:10 at this width is ~210px of picture above the fold. */
  .ogB-promo__media,
  .media__box { aspect-ratio: 16 / 9; }

  /* The featured park card is a fixed 470px built for a 3-up desktop row. One
     card at 85% of a phone is a tall dark slab with its text pinned to the
     bottom - most of the height is empty photograph. */
  .parks__card { height: 380px; }
  .parks__card-title { font-size: 18px; }

  .ogB-promo__head { margin-top: 16px; }
  .promo__card-title { margin: 10px 0 8px; }
  .promo__text { margin-bottom: 14px; }
  .media__box-2 { padding: 16px 16px 18px; }

  /* The counter and its two arrows are a group; left-aligned under the heading
     they read as one control rather than three. */
  .promo__box-3 { width: 100%; }
  .parks__box-2 { gap: 12px; }
}

/* Carousels: no sliding for visitors who ask for less motion. The cards still
   change - home.js reads this 0s duration and skips its wait - they just cut
   rather than travel. */
@media (prefers-reduced-motion: reduce) {
  .parks__box-5,
  .promo__box-5 { transition-duration: 0s; }
}