/**
 * Phase 2.1 (About re-audit) finding, 2026-09-18:
 *
 * Production injects a third, previously-undiscovered CSS source alongside
 * kakeai-service-site.webflow.css and kk-chrome.css: an inline `<style>`
 * block inside the shared header's Webflow "embed" component (visible only
 * by fetching live HTML, never present in the static webflow-export/
 * snapshot's linked .css files). Confirmed via `curl` against
 * https://kakeai.co.jp/about on 2026-09-18.
 *
 * Only the rules needed so far are ported here, verbatim, grouped by the
 * Phase that needed them. The rest of that embed block (Case/Contact/
 * Policy/Tool/Training hover states, tables, TOP's now-superseded
 * bl_top_* grid borders, etc.) is intentionally NOT ported yet and is
 * catalogued in docs/migration-spec.md for the phases that touch those
 * pages.
 *
 * Phase 2.1 (About): .ly_body h1, .border-dashed, .bl_path.
 * Phase 2.2 (News Visual Matching): icon hover, News card/item hover,
 * CMS pagination current-page state — all confirmed generic (not
 * News-specific) via their source comments/selectors below, so any future
 * Case/Event/Download/Contact work should find them already here.
 */

/* .el_page_ttl (kakeai-service-site.webflow.css) declares Manrope, and that
 * declaration is correct/unchanged on production too — but this global,
 * higher-specificity `.ly_body h1` rule always wins the cascade for any h1
 * nested in `.ly_body` (every Corporate subpage; not TOP), which is why
 * "Company" renders serif on production despite .el_page_ttl saying Manrope. */
.ly_body h1 {
  font-family: "Shippori Mincho B1", "Noto Sans JP", sans-serif;
}

/* Verbatim source comment reads "== C0MPANY ==" (zero for "O", a typo in the
 * original). Draws the dashed row/card separators via a background-image
 * tiled gradient, not a `border` property — this is why no `.border-dashed`
 * rule with an actual border/background could be found in either of the
 * other two stylesheets. Used identically by both Company Overview
 * (.bl_about_ov_item.border-dashed) and Advisors (.bl_about_card_h.border-dashed);
 * page-about.php already carries this class on the correct elements. */
.border-dashed {
  background-image: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 4px);
  background-size: 4px 0.5px;
  background-position: left bottom;
  background-repeat: repeat-x;
}

/* Phase 9-5N finding: this rule previously applied production's MOBILE-only
 * value (8px) unconditionally at every width, because the desktop value
 * (32px) had never been captured — confirmed by reading production's own
 * embed <style> block (identical on every sampled page: about/case/
 * download/news/event/contact/infosec-policy/infosec-declaration):
 *   .bl_path{padding-top:32px}
 *   @media screen and (max-width:767px){.bl_path{padding-top:8px}}
 * This is why the breadcrumb sat flush under the header on PC (Human
 * Review's "ヘッダー直下に近すぎる" finding on /event) while SP was already
 * correct. */
.bl_path {
  padding-top: 32px;
}
@media screen and (max-width: 767px) {
  .bl_path {
    padding-top: 8px;
  }
}

/* Phase 9-5N finding: production's own `.ly_body` embed rule (confirmed via
 * its live inline <style> block, present verbatim on every sampled
 * Corporate subpage) sets this font-family — previously not ported here,
 * so any text inside `.ly_body` with no more specific font-family rule of
 * its own (e.g. `.el_page_ttl_txt`, the page-header lede) fell through by
 * inheritance all the way to kk-chrome.css's generic `body{font-family:
 * var(--gothic)}` (Zen Kaku Gothic New) instead of production's real
 * Manrope. Scoped to `.ly_body` only (never applied to the front page, LP,
 * Guide, or Media — see functions.php's kakeai_body_class(), which never
 * adds this class to those contexts), and every element inside Guide's own
 * `.kx` wrapper already declares its own font-family explicitly, so this
 * has no effect there even on the rare page where `.ly_body` and `.kx`
 * might both be present on `<body>`. */
.ly_body {
  font-family: "Manrope", "Noto Sans JP", sans-serif;
}

/* Phase 9-5N finding: production's own page-header title size was reduced
 * site-wide at some point after this theme's kakeai-service-site.webflow.css
 * snapshot was taken — confirmed by downloading production's CURRENTLY
 * linked stylesheet (cdn.prod.website-files.com/.../kakeai-service-site.
 * webflow.shared.e002dc86b.min.css, a different filename/hash than this
 * theme's own copy) and finding `.el_page_ttl{font-size:78px}` there,
 * where this theme's older snapshot still has `96px`. Production's
 * tablet/mobile overrides for the same selector (`@media(max-width:767px)
 * {font-size:3rem}` / `@media(max-width:479px){font-size:1.8rem}`) are
 * UNCHANGED between the two snapshots, so only the desktop value is
 * corrected here, scoped to `min-width:768px` so it never touches the
 * already-correct (and already Human-Review-approved-adjacent) narrower
 * breakpoints governed by kakeai-service-site.webflow.css's own media
 * rules. `.el_page_ttl2` (Contact's own H1 class) was checked too and
 * already matches production's current 54px — not touched. */
@media screen and (min-width: 768px) {
  .el_page_ttl {
    font-size: 78px;
  }
}

/* Phase 9-5N finding: production's page-header background is no longer the
 * original per-page-type pastel color (yellow/pink/lilac/red/mint/orange/
 * aqua) — confirmed by downloading production's current linked stylesheet,
 * where every one of these `.el_page_header_bg` modifier classes (the
 * complete set this theme's own callers use: archive-case.php/archive-
 * download.php/archive-event.php/archive-news.php/page-about.php/page-
 * contact.php/page-information-security-policy.php/page-infosec-
 * declaration.php/template-infosec-external.php/single-case.php/single-
 * download.php/single-event.php/single-news.php/page.php) now resolves to
 * the SAME color: `background-color:var(--nk_blue)` where
 * `--nk_blue:#244dae` — this is not a guessed unification, every page type
 * was individually confirmed via a live fetch, and the value is the exact
 * KAKEAI blue already defined as `--accent` in kk-chrome.css's own `:root`
 * (reused here rather than introducing a duplicate value). */
.el_page_header_bg.bg-yellow,
.el_page_header_bg.bg-orange,
.el_page_header_bg.bg-pred,
.el_page_header_bg.bg-plilac,
.el_page_header_bg.bg-pink,
.el_page_header_bg.bg-aqua,
.el_page_header_bg.bg-pmint {
  background-color: var(--accent);
}

/* Phase 9-5N finding: production's current `.el_page_ttl` rule also carries
 * `color:var(--white)` (confirmed in the same downloaded stylesheet as the
 * font-size fix above), which this theme's older snapshot never had —
 * without it, the H1 fell through to `.ly_body{color:var(--text)}` /
 * `body{color:var(--ink)}`'s dark navy instead of white against the now-
 * correctly-blue background. Same drift pattern for the lede's `.is-dl`/
 * `.is-event`/`.is-case` modifiers (production: `color:var(--white)` on
 * all three; `.is-case` additionally carries `margin-top:32px`, also
 * missing here) — the base `.el_page_ttl_txt` (no modifier) is left alone
 * since no current caller renders a lede without one of these three
 * modifier classes (confirmed by reading every page-header call site). */
.el_page_ttl,
.el_page_ttl2 {
  color: var(--white);
}
.el_page_ttl_txt.is-dl,
.el_page_ttl_txt.is-event,
.el_page_ttl_txt.is-case {
  color: var(--white);
}
.el_page_ttl_txt.is-case {
  margin-top: 32px;
}

/* Phase 9-5N.1 finding: this theme's `kakeai-service-site.webflow.css`
 * snapshot has `.el_path_txt{color:var(--text)}` (dark navy) — production's
 * CURRENT CSS (same downloaded stylesheet as the other 9-5N/9-5N.1
 * findings) has `color:var(--white)` instead (plus a redundant
 * `.el_path_txt.is-upper{color:var(--white)}`, same value, not needed
 * separately since the base rule already covers it). This is why the
 * breadcrumb read as dark navy against the now-correctly-blue background
 * instead of white. */
.el_path_txt {
  color: var(--white);
}

/* Phase 9-5O.3 breadcrumb-click-bug fix: `.bl_page_ttl_box`'s own
 * `margin-top:-6rem` (Phase 9-5N.1, added to match production's real
 * pixel position) makes it geometrically overlap the breadcrumb row above
 * it by ~16px — confirmed PRESENT ON PRODUCTION ITSELF via
 * document.elementFromPoint() hit-testing on a live fetch of
 * https://kakeai.co.jp/event (not a Local-only regression): production's
 * own `.bl_page_ttl_box` is `position:static;z-index:auto`, so in its
 * stacking context a later-painted static sibling normally wins hit-
 * testing over an earlier one — except `.bl_path` is EARLIER in DOM order
 * than `.bl_page_ttl`, so production's own breadcrumb genuinely loses this
 * exact hit-test too at this one spot. Per this Phase's explicit fix
 * priority ("必要に応じてパンくず側のstacking contextを調整"), `.bl_path`
 * is lifted into its own stacking context via `position:relative` (no
 * `top`/`left` offset, so this has zero visual effect — confirmed via a
 * before/after getBoundingClientRect() comparison) with a low `z-index`,
 * which makes it paint above the later, still-position:static
 * `.bl_page_ttl_box` in the overlap region — an intentional, disclosed
 * improvement OVER production's own real (if minor) click dead-zone, not
 * a guessed `z-index:9999` and not a blanket `pointer-events:none` on the
 * title area. */
.bl_path {
  position: relative;
  z-index: 1;
}

/* Phase 9-5O.3: production's current CSS has `.el_event_info_dt{min-width:
 * 7.5rem}` (confirmed via a live fetch of /event/20261105's linked
 * stylesheet) — this theme's `kakeai-service-site.webflow.css` snapshot
 * still has the older `min-width:4.5rem`, the same "snapshot predates a
 * production republish" drift pattern already found/fixed for several
 * other selectors this project (Phase 9-5N's `.el_page_ttl` font-size,
 * `.bl_page_ttl_box` margin-top, etc.). Since no row's label text is wider
 * than 7.5rem (confirmed: all 5 rows render at the identical 120px on
 * production — a `min-width` floor, not an explicit `width`), raising the
 * floor to match is all that's needed: every row's `.el_event_info_dt`
 * naturally renders at the same width again, so every row's value column
 * starts at the same x position regardless of label length — including
 * "オフィス住所", the longest label, and including events where that row
 * doesn't exist at all (the floor is a property of the class itself, not
 * dependent on which rows a given event happens to show). `.el_event_
 * info_dt` is used only by this one table (single-event.php) — confirmed
 * no other caller — so this cannot affect any other table. */
.el_event_info_dt {
  min-width: 7.5rem;
}

/* Phase 9-5N.1 finding: this theme's snapshot has `.bl_page_ttl_box{
 * margin-top:-1rem}`; production's current CSS has `margin-top:-6rem}`
 * instead (confirmed unconditional at >767px; production's own <=767px
 * override already sets `margin-top:0` and is unchanged/already correct
 * in this theme, so this correction is scoped to not touch it). This pulls
 * the H1/lede block up against the breadcrumb row exactly as much as
 * production does — this theme's shallower -1rem left a visibly larger
 * gap between the breadcrumb and "Seminar" etc. than production. */
@media screen and (min-width: 768px) {
  .bl_page_ttl_box {
    margin-top: -6rem;
  }
}

/* Phase 9-5O finding: this theme's `kakeai-service-site.webflow.css`
 * snapshot has `.bl_pick_badge{background-color:var(--nk_blue)}` (KAKEAI
 * blue, #244dae); production's current CSS (same downloaded stylesheet
 * used throughout Phase 9-5N/9-5N.1) has `background-color:var(--text)`
 * (#141432, dark navy) instead — confirmed via a live fetch of /case's own
 * PICK UP ribbon markup and the matching CSS rule, not a guess. `.bl_pick_
 * badge` is used only by archive-case.php's Case Pickup ribbon (confirmed
 * — no other template references this class), so this override cannot
 * affect any other card, header, CTA, Guide, or Media element. `color`
 * (white) and the clip-path triangle shape already match production and
 * are left untouched. */
.bl_pick_badge {
  background-color: var(--text);
}

/* Phase 9-5O.3 (Human-approved): Case Digest Image アコーディオン。
 * Production実機（/case/will）の実CSS・インラインembedから確認した値を
 * そのまま移植（linked stylesheetの.digest-image-container/.open-digest-
 * wrapper,.close-digest-wrapper/.open-digest,.close-digest/.digest-image、
 * embedの矢印::before/hide-digest）。`.digest-image.is-open`のみ本テーマ
 * 独自の追加（Vanilla JS側のクラストグル用 — single-case.php/case-
 * single.jsの実装に合わせたフック、Production自身はjQueryのslideDown/
 * slideUpでアニメーションするが、本テーマは単純なdisplay切替。巨大画像
 * （実測10,707px）に対する疑似slideDownは過剰実装と判断し採用せず）。
 * `.open-digest`/`.close-digest`はCase詳細（single-case.php）でのみ
 * 使用されるクラス名で、他ページとの衝突はない。 */
.digest-image-container {
  text-align: left;
  margin-top: 24px;
  margin-bottom: 0;
  display: block;
}
.open-digest-wrapper,
.close-digest-wrapper {
  text-align: center;
  justify-content: center;
  margin-bottom: 24px;
  display: flex;
}
.open-digest-wrapper.hide-digest,
.close-digest-wrapper.hide-digest {
  display: none;
}
.open-digest,
.close-digest {
  cursor: pointer;
  border: 0 solid #d1d1d1;
  border-radius: 0;
  align-items: center;
  padding: 0 32px 0 8px;
  display: flex;
  position: relative;
}
.open-digest::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border: solid 1px #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 7px;
  right: 8px;
}
.close-digest::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border: solid 1px #333333;
  border-width: 0 2px 2px 0;
  transform: rotate(-135deg);
  position: absolute;
  top: 12px;
  right: 8px;
}
.digest-image {
  margin-top: 0;
  display: none;
}
.digest-image.is-open {
  display: block;
}
.digest-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Phase 4-4.5: generic line-clamp utilities (source comment "show
 * line") ----
 * Verbatim from production's embed <style> block — never ported before, so
 * every `show-1line`..`show-4line` / `sp-line-full` class already written
 * into this theme's PHP (Event Archive/Thanks cards, Phase 4-3/4-4) was a
 * no-op: the class names existed in markup but no matching rule existed
 * anywhere in this project's CSS. Confirmed generic (title-clamp utility
 * used across News/Case/Download/Event cards, not Event-specific), so
 * ported here rather than into an Event-only file. */
.show-1line, .show-2line, .show-3line, .show-4line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.show-1line {
  -webkit-line-clamp: 1;
}
.show-2line {
  -webkit-line-clamp: 2;
}
.show-3line {
  -webkit-line-clamp: 3;
}
.show-4line {
  -webkit-line-clamp: 4;
}
@media screen and (max-width: 767px) {
  .sp-line-full {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    text-overflow: unset;
  }
}

/* ---- Phase 2.2: generic icon hover (source comment "ICON hover") ----
 * .bl_news_card_h_btn_svg (News list row arrow) carries `svg-reverse`, so
 * on row hover (paired with .bl_news_item:hover below, which darkens the
 * circle) the arrow needs to flip to white — without this rule it would
 * stay dark-on-dark. */
.bl_svg {
  transition: .15s;
}
a:hover .bl_svg {
  fill: var(--text);
}
a:hover .svg-reverse .bl_svg {
  fill: var(--white);
}

/* ---- Phase 2.2: generic CMS card hover (source comment "CARD hover") ----
 * Confirmed generic across News/Event/Download/Case pickup cards by its
 * own multi-selector list; only .bl_news_card is exercised so far. */
.bl_news_card:hover .bl_btn_small,
.bl_event_card:hover .bl_btn_small,
.bl_dl_card:hover .bl_btn_small,
.bl_case_card:hover .bl_btn_small,
.bl_pick_card_h1:hover .bl_btn_regular,
.bl_pick_card_h2:hover .bl_btn_small,
.bl_cms_card:hover .bl_btn_small {
  background-color: var(--white);
  border-color: var(--text);
  color: var(--text);
}

/* ---- Phase 4-3: Event card button icon hover (confirmed via a real
 * mouse-hover test on production kakeai.co.jp/event — the SVG's own inline
 * fill="var(--white)" would otherwise disappear against the white hover
 * background above, the same bug class already fixed for Case). ---- */
.bl_event_card:hover .bl_svg {
  fill: var(--text);
}

/* ---- Phase 2.2: News list-row hover (source comment "== NEWS ==") ---- */
.bl_news_item:hover .el_news_card_ttl {
  color: var(--primary);
  text-decoration: underline;
}
.bl_news_item:hover .bl_news_card_h_btn {
  background-color: var(--text);
}

/* ---- Phase 2.2: CMS pagination current-page state (source comment
 * "CMS pagenation") — generic across News/Case/Event/Download archives. */
.bl_cms_pn_num.w--current {
  background-color: var(--text);
  color: var(--white);
}

/* ---- Phase 2.2: filter pill checked state (source comment "Filter") ----
 * Generic across News/Case/Seminar filter UIs. This theme renders the
 * checked pill server-side (no client-side filtering library), so the
 * checkbox itself is decorative — only `.el_filter_form_check` carrying
 * `.w--redirected-checked` (added conditionally by PHP) drives this. */
.bl_filter_form_check > .el_filter_form_check.w--redirected-checked + input + .el_filter_form_check_label {
  background-color: var(--text);
  color: var(--white);
}

/* Production hides this same native checkbox via an inline
 * `style="opacity:0;position:absolute;z-index:-1"` (Webflow's own
 * generated markup) — reproduced here as a class rule instead of an
 * inline style so the pill shows only its text label, never the browser's
 * native checkbox box/check-mark. */
.bl_filter_form_check input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

/* Not present in the production embed (Finsweet renders no visible dots in
 * production's 7-page News archive, so its exact styling is unconfirmed) —
 * a minimal, self-consistent style so pagination doesn't look broken once
 * enough News items exist to truncate the page-number list. */
.bl_cms_pn_dots {
  color: var(--dull-gray46);
  padding: 0 .25rem;
}