/*
 * BloomoreHR base presentation.
 *
 * Typography scale, layout shell and the few primitives every page reuses.
 * Values are taken from the approved staging redesign's own stylesheet
 * (css/site-redesign-preview-v1-pages.css) and from browser measurements of
 * ?bh_site_redesign_preview=1&bh_redesign_view=services.
 *
 * Scoped to body.bloom so it can never reach a page still rendered by the
 * parent theme. No !important; every rule has exactly one owner.
 */
/* bloom-tokens.css は @import しない。inc/bloom-shell.php がこの前に enqueue する。 */

body.bloom {
  margin: 0;
  background: var(--bloom-ground);
  color: var(--bloom-ink);
  font-family: var(--bloom-font-body);
  font-size: 16px;
  line-height: var(--bloom-lead-leading);
  overflow-wrap: anywhere;
}

body.bloom *,
body.bloom *::before,
body.bloom *::after { box-sizing: border-box; }

:where(body.bloom) img,
:where(body.bloom) svg { display: block; max-width: 100%; height: auto; }

/*
 * The link reset is wrapped in :where() so it carries zero specificity. A
 * plain "body.bloom a" selector (0,1,2) outranks every single-class primitive
 * below it, which silently painted .bloom-button's label dark on a dark pill.
 * Resets are the weakest thing in this file, by construction.
 */
:where(body.bloom) a { color: inherit; text-decoration: none; }

body.bloom a:focus-visible,
body.bloom button:focus-visible {
  outline: 3px solid var(--bloom-blue);
  outline-offset: 4px;
  border-radius: .25rem;
}

/* Layout ------------------------------------------------------------------ */

.bloom-shell {
  width: var(--bloom-shell);
  margin-inline: auto;
}

.bloom-shell--wide { width: var(--bloom-shell-wide); }

.bloom-main {
  display: block;
  padding-top: calc(var(--bloom-header-height) + (var(--bloom-header-offset) * 2));
}

.bloom-section {
  position: relative;
  padding-block: var(--bloom-section-pad);
  overflow: hidden;
}

.bloom-section--soft { background: var(--bloom-ground-soft); }
.bloom-section--tint { background: var(--bloom-ground-tint); }

/*
 * The hero is a section with its own ground and its own vertical rhythm: it
 * sits directly under the fixed header, so it pads for the header rather than
 * being spaced like a mid-page section.
 */
.bloom-hero {
  position: relative;
  display: grid;
  min-height: 78vh;
  align-items: center;
  padding-block: var(--bloom-hero-pad-top) var(--bloom-hero-pad-bottom);
  background: var(--bloom-ground-hero);
  overflow: hidden;
}

@media (max-width: 900px) {
  .bloom-hero { min-height: 0; }
}

/* Hero petals ------------------------------------------------------------- */

/*
 * The floating watercolour field behind the hero copy. Rendered server-side
 * by bh_bloom_hero_petals(); this owns nothing but its motion and its box.
 */
.bloom-petal-field {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  perspective: 1100px;
  pointer-events: none;
}

/* The copy always sits above the field. */
.bloom-hero > .bloom-shell {
  position: relative;
  z-index: 2;
}

/* 見出しと、花びらが集まる舞台を重ねる器。 */
.bloom-gather-field {
  position: relative;
}

.bloom-petal {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  opacity: var(--opacity);
  transform-origin: 50% 50%;
  animation: bloom-float var(--duration) ease-in-out var(--delay) infinite alternate;
  filter: drop-shadow(0 3px 7px rgba(63, 77, 84, .035)) saturate(.88) contrast(.87);
}

@keyframes bloom-float {
  0% {
    transform: translate(calc(-50% + var(--dx1)), calc(-50% + var(--dy1))) rotate(calc(var(--rot) - 14deg)) scale(.94);
  }
  50% {
    transform: translate(calc(-50% + var(--dx2)), calc(-50% + var(--dy2))) rotate(calc(var(--rot) + 8deg)) scale(1.01);
  }
  100% {
    transform: translate(calc(-50% + var(--dx3)), calc(-50% + var(--dy3))) rotate(calc(var(--rot) + 20deg)) scale(.97);
  }
}

/* 花びらが集まって見出しになる ------------------------------------------------ */

/*
 * 文字は既定で完全に表示されている。js/bloom-gather.js が動く場合だけ
 * 一時的に散らばった状態から戻る。JSが無ければ普通の見出しとして読める。
 */
.bloom-gather-char,
.bloom-reveal-char {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* 文節のまとまり（inc/bloom-shell.php の bh_bloom_reveal_text）。折り返しはこの間でだけ起こる。 */
.bloom-reveal-phrase { display: inline-block; }

.bloom-gather-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.bloom-gather-petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size, 32px);
  height: var(--size, 32px);
  opacity: 0;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 4px 8px rgba(65, 75, 95, .05)) saturate(.94) contrast(.92);
  will-change: transform, opacity;
}

/*
 * 動きを減らす設定では、スクリプトが何もしない。文字はHTMLのまま出る。
 * 念のため、舞台が空でも場所を取らないようにしておく。
 */
@media (prefers-reduced-motion: reduce) {
  .bloom-gather-stage { display: none; }
  .bloom-gather-char,
  .bloom-reveal-char { will-change: auto; }
}

/* Type -------------------------------------------------------------------- */

.bloom-eyebrow {
  margin: 0 0 17px;
  color: var(--bloom-faint);
  font-size: var(--bloom-eyebrow);
  font-weight: 400;
  /* 参照は行間を指定しない。body の 1.95 を継がせない。 */
  line-height: normal;
  letter-spacing: var(--bloom-eyebrow-tracking);
  text-transform: uppercase;
}

/*
 * 章の小見出しラベル。実測 10px / 行間 13px / 太さ500 / 字送り 1.8px /
 * 色 rgb(113,142,147)。ヒーロー（.bloom-hero）のラベルは既定のまま淡い。
 */
.bloom-section .bloom-eyebrow {
  color: #718e93;
  font-weight: 500;
  line-height: 1.3;
}

.bloom-display {
  /* 幅は器（.bloom-shell）が決める。ここで狭めると「つくる。動かす。改善する／。」のように末尾だけ折れる。 */
  margin: 0;
  color: var(--bloom-title);
  font-family: var(--bloom-font-hand);
  font-size: var(--bloom-display);
  font-weight: 400;
  line-height: var(--bloom-display-leading);
  letter-spacing: var(--bloom-display-tracking);
}

.bloom-display--ink { color: var(--bloom-ink); }

.bloom-heading {
  margin: 0 0 25px;
  /* 見出しのインクは本文より濃い（実測 #173f45）。 */
  color: var(--bloom-ink-deep);
  font-family: var(--bloom-font-hand);
  font-size: var(--bloom-h2);
  font-weight: 400;
  line-height: var(--bloom-h2-leading);
  letter-spacing: var(--bloom-h2-tracking);
  /*
   * 参照と同じ折り方。日本語の見出しを文節の途中で折らない（keep-all）、
   * 行の長さを揃える（balance）。これが無いと「育て／る。」のように折れる。
   */
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: balance;
}

/*
 * 狭い画面では keep-all を解く。文節を保つより、画面からはみ出さないことが
 * 先。1行に収まらない見出しがあると、ページ全体が横に動いてしまう。
 */
/* 参照は 820px 以下で見出しを一段落とす（実測 390px で 32.76px = 8.4vw）。 */
@media (max-width: 820px) {
  .bloom-heading {
    font-size: clamp(1.875rem, 8.4vw, 2.375rem);
    line-height: 1.4;
  }
}

@media (max-width: 640px) {
  .bloom-heading {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

@media (max-width: 430px) {
  .bloom-heading { font-size: clamp(1.75rem, 8.2vw, 2.25rem); }
}

.bloom-lead {
  max-width: 960px;
  margin: 25px 0 0;
  color: var(--bloom-ink-soft);
  font-size: var(--bloom-lead);
  line-height: var(--bloom-lead-leading);
}

.bloom-section-lead {
  max-width: 820px;
  margin: 0;
  /* 実測: 1024px→15px、1280px→16.64px、1440px以上→18px。 */
  color: #4f7075;
  font-size: clamp(.9375rem, 1.3vw, 1.125rem);
  line-height: var(--bloom-lead-leading);
}

/*
 * 本文のかたまり。下層ページの説明文はこの器に入る。
 * 実測に合わせて 16px / 行間 2.0 / #5a757c。
 */
.bloom-prose {
  max-width: 820px;
  margin: 28px 0 0;
  color: #5a757c;
  font-size: clamp(.9375rem, 1.25vw, 1rem);
  line-height: 2;
}

.bloom-prose p { margin: 0 0 1.5em; }
.bloom-prose p:last-child { margin-bottom: 0; }

/* 節の言い切り。手書き体で一段大きい（実測 35.84px = 2.8vw / 行間 1.55）。 */
.bloom-statement {
  max-width: 24em;
  margin: 44px 0 0;
  color: var(--bloom-pine);
  font-family: var(--bloom-font-hand);
  font-size: clamp(1.375rem, 2.8vw, 2.25rem);
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: balance;
}

/* 補足の一文。本文より小さく、淡い。 */
.bloom-note {
  max-width: 820px;
  margin: 36px 0 0;
  color: var(--bloom-muted);
  font-size: 13px;
  line-height: 1.95;
}

/* 文中に置く導線。 */
.bloom-inline-actions {
  margin: 32px 0 0;
  font-size: 14px;
  font-weight: 500;
}

.bloom-inline-actions a {
  color: var(--bloom-ink-deep);
  border-bottom: 1px solid rgba(23, 63, 69, .23);
  padding-bottom: 4px;
}

.bloom-inline-actions a:hover { color: var(--bloom-title); }

/* Primitives -------------------------------------------------------------- */

.bloom-button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--bloom-radius-pill);
  background: var(--bloom-deep);
  color: var(--bloom-white);
  font-size: 12px;
  line-height: 1.4;
  transition: transform var(--bloom-motion) var(--bloom-ease);
}

.bloom-button:hover { transform: translateY(-2px); }

.bloom-button--quiet {
  border-color: var(--bloom-line);
  background: var(--bloom-white);
  color: var(--bloom-ink);
}

.bloom-pill {
  display: inline-flex;
  padding: 7px 11px;
  border: 1px solid rgba(26, 169, 121, .18);
  border-radius: var(--bloom-radius-pill);
  background: var(--bloom-white);
  color: #507478;
  font-size: 11px;
  line-height: 1.5;
}

/*
 * The design's card grids: 3 or 4 across, 2 from 980px, 1 from 640px.
 */
.bloom-grid-3,
.bloom-grid-4 {
  display: grid;
  gap: 18px;
  margin-top: 38px;
}

.bloom-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bloom-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

@media (max-width: 980px) {
  .bloom-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bloom-grid-3,
  .bloom-grid-4 { grid-template-columns: 1fr; }
}

.bloom-card {
  position: relative;
  padding: 29px;
  border: 1px solid var(--bloom-line);
  border-radius: var(--bloom-radius-card);
  background: rgba(255, 255, 255, .92);
  overflow: hidden;
}

.bloom-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
}

.bloom-card p {
  margin: 0;
  color: #647c80;
  font-size: 13px;
  line-height: 1.85;
}

.bloom-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: .75rem 1.25rem;
  background: var(--bloom-white);
  color: var(--bloom-ink);
}

.bloom-skip-link:focus { left: 1rem; z-index: 200; }

/*
 * Reduced motion: this stylesheet owns every transition it declares, so the
 * preference is honoured by naming them rather than by blanket !important.
 */
@media (prefers-reduced-motion: reduce) {
  .bloom-button { transition: none; }
  .bloom-button:hover { transform: none; }

  /*
   * The petals stay as a still arrangement rather than vanishing: the design
   * reads as bare without them. The approved preview's own script never
   * checks this preference at all.
   */
  .bloom-petal {
    animation: none;
    transform: translate(-50%, -50%) rotate(var(--rot));
  }
}

/* Line breaks -------------------------------------------------------------- */

/*
 * 改行の決まり（2026-10-03 の全体見直し）。
 * - 1行に収まる文は1行で出す。折り返すときは文節・意味の切れ目で折る。次の行に1〜2文字だけを残さない。
 * - 見出し・リード・カードの短い文は、文節で折り（word-break: auto-phrase。html lang="ja" が前提）、
 *   行の長さをそろえる（text-wrap: balance）。これをサイト全体の既定にする。
 * - 本文（記事・会社情報の段落と箇条書き、.bloom-prose）は、文節では折らず行末まで詰めて組み、
 *   text-wrap: pretty で最後の行が短くなりすぎないようにする。文節で折ると右端が大きく不ぞろいになり、
 *   長い記事が読みにくくなるため。
 *   （Chrome の pretty は和文の「ます。」のような2〜3文字の最後の行までは直さない。本文で文節折りを
 *   使えば直るが、右端がそろわなくなる。）
 * - 表のセルは、文節の途中で折らない（overflow-wrap: break-word）。anywhere のままだと、狭い画面で
 *   「要／改／善」のように1文字ずつ折れる。収まらないときは .s_table の横スクロールに任せる。
 * - auto-phrase に対応していないブラウザ（Safari など）は、折り方は今までどおり（keep-all／normal）。
 *   はみ出しを防ぐ overflow-wrap: anywhere（body.bloom）もそのまま。
 * 個々の見出しの keep-all・normal（.bloom-heading の 640px 以下など）は、対応ブラウザではここで auto-phrase に揃える。
 * 句読点で折るほうが意味の切れ目に合う見出しだけは、各ページの CSS で keep-all に戻している。
 */
body.bloom { text-wrap: balance; }

body.bloom :where(.bloom-article-content, .bloom-prose) :where(p, li, dd, blockquote) { text-wrap: pretty; }

body.bloom :where(td, th) { overflow-wrap: break-word; }

/*
 * 文節で折っても意味のまとまりの途中で折れる箇所だけ、語句を span で包んで折り返さない
 * （inc/bloom-shell.php の bh_bloom_nobr()・bh_bloom_nobr_quotes()、テンプレートの直書き）。
 * どれも1行に収まる短い語句に限る。
 */
.bloom-nobr { white-space: nowrap; }

@supports (word-break: auto-phrase) {
  /* :where() で詳細度を body.bloom + 1クラスに抑え、ページ側の個別の指定（keep-all など）が上に来られるようにする。 */
  body.bloom,
  body.bloom :where(.bloom-heading, .bloom-statement, .bloom-article-title, .bloom-sd-title) {
    word-break: auto-phrase;
  }

  body.bloom .bloom-mv-card strong { word-break: auto-phrase; }

  body.bloom :where(.bloom-article-content, .bloom-prose) :where(p, li, dd, blockquote) { word-break: normal; }
}