/* ===================================================================
   jpinv.com — the full-bleed homepage hero.

   Four slides that crossfade. Slide 1 carries the live capital-policy
   panel; slides 2 to 4 are photographs under a heavy navy wash.

   The slide markup lives in index.html and en/index.html (so the h1 is
   in the HTML and crawlable). assets/hero.js only rotates the slides
   and fills the panel.

   Created August 3, 2026.
   =================================================================== */

.jh {
  position: relative;
  width: 100%;
  /* The navigation is fixed and 64px tall. The hero replaced the old #top
     section, which was the element that used to reserve that space, so the
     hero has to reserve it itself or its first 64px sit under the bar. */
  margin-top: 64px;
  min-height: 620px;
  height: calc(100vh - 64px);
  max-height: 780px;
  overflow: hidden;
  background: #0f1f3a;
}

/* ---- slides ---- */
.jh-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease;
}
.jh-slide.is-on { opacity: 1; visibility: visible; }
.jh-slide:first-child { opacity: 1; visibility: visible; }

.jh-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The diagonal wash. Two polygons, so the type side stays dark enough to
   read while the far side keeps some of the photograph. */
.jh-cut { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- content ---- */
.jh-in {
  position: relative;
  height: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 72px;
  display: flex;
  align-items: center;
  gap: 56px;
}
.jh-copy { flex: 1 1 auto; max-width: 720px; }

.jh-kick {
  font-family: var(--sans, 'Noto Sans JP', sans-serif);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #c9a464;
  margin-bottom: 20px;
}
.jh h1, .jh-h {
  font-family: var(--serif, 'Noto Serif JP', serif);
  font-size: clamp(28px, 3.1vw, 46px);
  font-weight: 300;
  line-height: 1.44;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
  /* Japanese has no spaces, so without this the browser breaks a headline
     wherever the line happens to end — which is how 意図まで伝える。 came to
     wrap after 伝え and leave る。 alone on the second line. `strict` also
     stops small kana and 、。 from starting a line. */
  line-break: strict;
}

/* Each clause of a headline is wrapped in <span class="ln"> in the markup.
   inline-block means the browser will only break BETWEEN clauses while they
   still fit, so a headline lands on clean grammatical lines. A clause wider
   than the column still breaks inside itself, so nothing overflows. */
.jh h1 .ln, .jh-h .ln { display: inline-block; }
.jh-lead {
  font-family: var(--sans, 'Noto Sans JP', sans-serif);
  font-size: 15px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 24px;
  max-width: 520px;
}
.jh-btn {
  display: inline-block;
  margin-top: 32px;
  background: #c9a464;
  color: #12203a;
  font-family: var(--sans, 'Noto Sans JP', sans-serif);
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 15px 38px;
  text-decoration: none;
  transition: background 0.15s;
}
.jh-btn:hover { background: #fff; }

/* ---- the live panel ---- */
.jh-panel {
  flex: 0 0 420px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 24px 26px;
  font-family: var(--sans, 'Noto Sans JP', sans-serif);
  text-decoration: none;
  display: block;
  transition: border-color 0.2s, background 0.2s;
}
.jh-panel:hover { border-color: rgba(201, 164, 100, 0.6); background: rgba(255, 255, 255, 0.09); }

.jh-plabel {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: #c9a464;
  margin-bottom: 16px;
}
.jh-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #5dcaa5;
  animation: jh-pulse 2.4s ease-in-out infinite;
}
@keyframes jh-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.jh-rows { margin: 0; padding: 0; list-style: none; min-height: 210px; }
.jh-rows li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
}
.jh-date {
  flex: 0 0 52px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  padding-top: 2px;
}
.jh-tag {
  flex: 0 0 auto;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #12203a;
  background: #c9a464;
  padding: 2px 8px;
  margin-top: 1px;
  white-space: nowrap;
}
.jh-name { min-width: 0; }
.jh-tick { font-family: var(--mono, monospace); font-size: 11px; color: rgba(255, 255, 255, 0.55); margin-right: 6px; }

.jh-stats {
  display: flex;
  gap: 30px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.jh-stats b {
  display: block;
  font-family: var(--mono, monospace);
  font-size: 23px;
  font-weight: 400;
  color: #fff;
  line-height: 1.25;
}
.jh-stats span { font-size: 10.5px; color: rgba(255, 255, 255, 0.55); }

/* ---- slide indicators ---- */
.jh-dots {
  position: absolute;
  left: 72px;
  bottom: 34px;
  display: flex;
  gap: 9px;
  z-index: 3;
}
.jh-dots button {
  width: 52px; height: 2px;
  background: rgba(255, 255, 255, 0.28);
  border: none; padding: 0; cursor: pointer;
  transition: background 0.25s;
}
.jh-dots button[aria-current="true"] { background: #c9a464; }

.jh-scroll {
  position: absolute;
  right: 40px; bottom: 34px;
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.45);
  writing-mode: vertical-rl;
  z-index: 3;
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .jh-panel { flex-basis: 340px; }
  .jh-in { padding: 0 44px; gap: 34px; }
  .jh-dots { left: 44px; }
}
@media (max-width: 900px) {
  .jh { height: auto; max-height: none; min-height: 0; }
  .jh-slide { position: relative; opacity: 1; visibility: visible; display: none; }
  .jh-slide.is-on, .jh-slide:first-child { display: block; }
  .jh-slide:first-child:not(.is-on) { display: none; }
  .jh-in { flex-direction: column; align-items: stretch; padding: 56px 24px 92px; gap: 30px; }
  .jh-copy { max-width: none; }
  .jh-panel { flex-basis: auto; }
  .jh-dots { left: 24px; bottom: 30px; }
  .jh-dots button { width: 38px; }
  .jh-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jh-slide { transition: none; }
  .jh-dot { animation: none; }
}

/* ===================================================================
   The band directly under the hero - two cards, Nikkato's banner shape.

   White, not navy: the hero above is navy, so a navy band read as one
   continuous block with no break. Nikkato's banners sit on white with a
   hairline border, and that is what separates them from the hero.

   Neither card carries a photograph. Both left panels are type: a step
   list and the newsletter masthead. Stock photography read as generic,
   and a real post cover names one company and dates the moment that post
   stops being the newest. Type ages at nobody's pace and cannot be
   cropped. One line of copy per card - these are doors, not paragraphs.
   =================================================================== */
.jb { background: #fff; padding: 64px 0 68px; }
.jb-in { max-width: 1100px; margin: 0 auto; padding: 0 48px; }
.jb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.jb-card {
  display: flex; align-items: stretch;
  border: 1px solid var(--rule, #d6dee8);
  background: #fff; text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.jb-card:hover { border-color: var(--ink-mid, #172641); box-shadow: 0 6px 22px rgba(15,31,58,.07); }

.jb-fig { flex: 0 0 44%; position: relative; overflow: hidden; background: #f5f7fa; }
.jb-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Card 01 has no photograph. A tile in the same cream-and-navy register as
   the newsletter cover, so the pair reads as one house style rather than
   stock photography next to a designed cover. */
.jb-steps {
  position: absolute; inset: 0; background: #fbfaf7;
  display: flex; flex-direction: column; justify-content: center;
  gap: 9px; padding: 20px 22px;
}
.jb-steps span {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--sans, 'Noto Sans JP', sans-serif);
  font-size: 12px; color: var(--ink, #1a2a4a); line-height: 1.4;
}
.jb-steps b {
  font-family: var(--mono, monospace); font-size: 10.5px; font-weight: 400;
  color: var(--accent, #9a7838); letter-spacing: .1em; flex: 0 0 auto;
}

.jb-body { flex: 1 1 auto; padding: 22px 24px; display: flex; flex-direction: column;
  justify-content: center; gap: 10px; }
.jb-t { font-family: var(--serif, 'Noto Serif JP', serif); font-size: 19px; font-weight: 400;
  color: var(--ink, #1a2a4a); line-height: 1.5; }
.jb-d { font-family: var(--sans, 'Noto Sans JP', sans-serif); font-size: 13px;
  color: var(--text-mid, #4a5566); line-height: 1.7; }
.jb-go { align-self: flex-start; margin-top: 4px;
  font-family: var(--sans, 'Noto Sans JP', sans-serif); font-size: 12px; letter-spacing: .06em;
  color: #fff; background: var(--ink, #1a2a4a); padding: 9px 20px; transition: background .15s; }
.jb-card:hover .jb-go { background: var(--accent, #9a7838); }

@media (max-width: 900px) { .jb-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .jb { padding: 44px 0 48px; }
  .jb-in { padding: 0 22px; }
  .jb-card { flex-direction: column; }
  .jb-fig { flex: 0 0 auto; aspect-ratio: 3 / 2; }
}

/* Card titles break between clauses, not inside a word — same device as the
   hero headline. 海外投資家向けニュースレター was wrapping as ...ニュース / レター. */
.jb-t .ln { display: inline-block; }

/* Card 02's visual. Deliberately NOT a post cover: any single cover names one
   company and dates the moment that post stops being the newest. This is the
   masthead every cover carries, rebuilt in type, so it never goes stale and
   nothing can be cropped out of it. */
.jb-mast {
  position: absolute; inset: 0; background: #fbfaf7;
  display: flex; flex-direction: column; justify-content: center;
  gap: 14px; padding: 22px 26px;
}
.jb-mast i {
  font-style: normal;
  font-family: var(--sans, 'Noto Sans JP', sans-serif);
  font-size: 12px; letter-spacing: 0.22em; color: var(--accent, #9a7838);
}
.jb-mast hr { width: 74px; height: 1px; border: 0; background: var(--accent, #9a7838); margin: 0; }
.jb-mast em {
  font-style: normal;
  font-family: var(--mono, monospace); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--text-dim, #5f6875);
}


/* ===================================================================
   The news block - Nikkato's shape: heading left, tabs and rows right.

   Three tabs and deliberately no すべて: the two machine feeds run at
   roughly 300 and 85 rows a month against a handful of JII reports, so
   a merged list would drown the one tab that is JII's own news. The
   default tab is the reports.
   =================================================================== */
.nw { background: var(--bg-soft, #fafbfc); border-top: 1px solid var(--rule, #d6dee8); padding: 72px 0 76px; }
.nw-in { max-width: 1100px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
.nw-head h2 { font-family: var(--serif, 'Noto Serif JP', serif); font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 300; color: var(--ink, #1a2a4a); letter-spacing: .06em; margin: 0 0 8px; }
.nw-head .label { display: block; margin-bottom: 10px; }
.nw-more { display: inline-block; margin-top: 22px; font-family: var(--sans, 'Noto Sans JP', sans-serif);
  font-size: 12.5px; letter-spacing: .06em; color: var(--ink, #1a2a4a);
  border: 1px solid var(--ink-mid, #172641); padding: 11px 26px; text-decoration: none; transition: all .15s; }
.nw-more:hover { background: var(--ink, #1a2a4a); color: #fff; }
.nw-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule, #d6dee8); margin-bottom: 6px; }
.nw-tabs button { font-family: var(--sans, 'Noto Sans JP', sans-serif); font-size: 13px; letter-spacing: .04em;
  color: var(--text-mid, #4a5566); background: none; border: none; cursor: pointer;
  padding: 10px 22px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
.nw-tabs button:hover { color: var(--ink, #1a2a4a); }
.nw-tabs button[aria-selected="true"] { color: var(--ink, #1a2a4a);
  border-bottom-color: var(--accent, #9a7838); font-weight: 500; }
.nw-list { list-style: none; margin: 0; padding: 0; }
.nw-list[hidden] { display: none; }
.nw-list li { border-bottom: 1px solid var(--rule, #d6dee8); }
.nw-list li, .nw-list li a { display: flex; align-items: baseline; gap: 16px;
  padding: 15px 4px; font-size: 13.5px; color: var(--text, #1f2937); text-decoration: none; }
.nw-list li a { padding: 15px 4px; margin: -15px -4px; flex: 1 1 auto; transition: background .15s; }
.nw-list li a:hover { background: #fff; }
.nw-date { flex: 0 0 84px; font-family: var(--mono, monospace); font-size: 11.5px; color: var(--text-dim, #5f6875); }
.nw-tag { flex: 0 0 auto; font-family: var(--sans, 'Noto Sans JP', sans-serif); font-size: 10.5px;
  letter-spacing: .05em; color: var(--ink, #1a2a4a); border: 1px solid var(--rule, #d6dee8);
  background: #fff; padding: 2px 10px; white-space: nowrap; }
.nw-tx { min-width: 0; line-height: 1.6; }
.nw-tx b { font-family: var(--mono, monospace); font-size: 11.5px; font-weight: 400;
  color: var(--text-dim, #5f6875); margin-right: 2px; }
@media (max-width: 860px) {
  .nw { padding: 48px 0 52px; }
  .nw-in { grid-template-columns: 1fr; gap: 26px; padding: 0 22px; }
  .nw-tabs { overflow-x: auto; }
  .nw-tabs button { padding: 10px 14px; white-space: nowrap; }
  .nw-date { flex-basis: 70px; }
}


/* ---- English page type fitting ----
   The JP letter-spacing and line-height are for kanji; on the EN page the
   same values make the serif look loose. */
html[lang="en"] .jh h1, html[lang="en"] .jh-h { letter-spacing: 0; line-height: 1.3; }
html[lang="en"] .jh-lead { max-width: 560px; line-height: 1.8; }
html[lang="en"] .jb-t { letter-spacing: 0; }

/* ===================================================================
   Services - Nikkato's full-width alternating rows. Photo one side,
   navy text block the other, photo zooms slightly on row hover.
   =================================================================== */
.svr { padding: 0; }
.svr-head { padding: 72px 0 40px; }
.svr-row { display: grid; grid-template-columns: 55% 45%; text-decoration: none; min-height: 340px; }
.svr-row.rev .svr-img { order: 2; }
.svr-row.rev .svr-tx { order: 1; }
.svr-img { overflow: hidden; background: #0f1f3a; }
.svr-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s ease; }
.svr-row:hover .svr-img img { transform: scale(1.05); }
.svr-tx { background: var(--ink, #1a2a4a); display: flex; flex-direction: column;
  justify-content: center; gap: 14px; padding: 56px 64px; }
.svr-tx i { font-style: normal; font-family: var(--mono, monospace); font-size: 11px;
  letter-spacing: .22em; color: #c9a464; }
.svr-tx h3 { font-family: var(--serif, 'Noto Serif JP', serif); font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 300; color: #fff; margin: 0; letter-spacing: .05em; }
.svr-tx p { font-family: var(--sans, 'Noto Sans JP', sans-serif); font-size: 14px;
  line-height: 1.9; color: rgba(255, 255, 255, .78); margin: 0; max-width: 420px; }
.svr-go { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.svr-btn { font-family: var(--sans, 'Noto Sans JP', sans-serif); font-size: 13px;
  letter-spacing: .08em; color: #fff; border: 1px solid rgba(255, 255, 255, .7);
  padding: 13px 38px; white-space: nowrap; transition: all .2s; }
.svr-row:hover .svr-btn { background: #fff; color: var(--ink, #1a2a4a); }
.svr-go::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(255, 255, 255, .35); }
html[lang="en"] .svr-tx h3 { letter-spacing: 0; }
@media (max-width: 860px) {
  .svr-row, .svr-row.rev { grid-template-columns: 1fr; min-height: 0; }
  .svr-row.rev .svr-img { order: 0; }
  .svr-row.rev .svr-tx { order: 1; }
  .svr-img { aspect-ratio: 16 / 9; }
  .svr-tx { padding: 34px 24px 40px; }
  .svr-head { padding: 48px 0 26px; }
}