/*
 * BloomoreHR site shell: the floating header and the footer.
 *
 * One owner for the header and footer on every page that opts into the bloom
 * presentation. Geometry is measured from the approved staging redesign: a
 * fixed pill min(1220px, 96.5vw) wide, 84px tall, 10px from the top.
 *
 * bloom-tokens.css と bloom-base.css は @import せず、inc/bloom-shell.php が
 * この前に enqueue する（@import の URL には版が付かず、古いものがブラウザに残るため）。
 */

/* Header ------------------------------------------------------------------ */

.bloom-header {
  position: fixed;
  z-index: 100;
  top: var(--bloom-header-offset);
  left: 50%;
  width: var(--bloom-header-width);
  height: var(--bloom-header-height);
  padding: 8px 12px 8px 8px;
  transform: translateX(-50%);
  border: 1px solid rgba(23, 63, 69, .1);
  border-radius: var(--bloom-radius-pill);
  background: rgba(255, 255, 255, .93);
  box-shadow: var(--bloom-shadow-shell);
  backdrop-filter: blur(16px);
}

.bloom-header-inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bloom-logo {
  display: flex;
  min-width: 150px;
  align-items: center;
  padding: 10px 13px;
}

.bloom-logo img { width: auto; max-height: 36px; object-fit: contain; }

.bloom-wordmark {
  color: var(--bloom-ink);
  font-size: 1rem;
  font-weight: 700;
}

.bloom-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  white-space: nowrap;
}

.bloom-nav a {
  position: relative;
  padding: 10px 13px;
  /*
   * 花びらは z-index -1 で文字の後ろに入る。isolation でこのリンクの中に
   * 閉じ込め、隣の項目やヘッダーの下に潜り込ませない。
   */
  isolation: isolate;
  border-radius: var(--bloom-radius-pill);
  color: var(--bloom-ink);
  font-size: 12px;
  line-height: 1;
  transition: background var(--bloom-motion) var(--bloom-ease),
              transform var(--bloom-motion) var(--bloom-ease);
}

/* 花は文字そのものに乗る。行の幅が変わっても、いつも文字の中心で咲く。 */
.bloom-nav-label {
  position: relative;
  display: inline-block;
}

/* 押したとき・載せたときに咲く花（承認済みデザインの .v42-nav-bloom）------------ */

/*
 * 花の大きさはヘッダーのカプセルの高さで決まる。花びらは自分の向きへ
 * 半分の長さだけ滑り出すので、外に出る量は花びらの長さそのもの。カプセルの
 * 中心から縁までが約40pxなので、花びらは36pxに収めている。
 */
.bloom-nav-bloom {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.bloom-nav-contact .bloom-nav-bloom { width: 82px; height: 82px; }

.bloom-nav-petal {
  --c: var(--tone, var(--bloom-pastel-blue));
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 13px;
  margin: -6.5px 0 0 -18px;
  border-radius: 72% 48% 72% 46% / 62% 54% 66% 50%;
  background: color-mix(in srgb, var(--c) 26%, transparent);
  opacity: 0;
  /* 畳まれた状態。開くと自分の向きへ滑り出す。 */
  transform: rotate(var(--r, 0deg)) translateX(0) scale(.18);
  transform-origin: center;
  transition: transform .42s cubic-bezier(.18, .9, .22, 1), opacity .28s ease;
}

.bloom-nav-contact .bloom-nav-petal {
  width: 40px;
  height: 14px;
  margin: -7px 0 0 -20px;
  background: color-mix(in srgb, var(--c) 30%, transparent);
}

.bloom-nav-petal:nth-child(1) { --r: 0deg; }
.bloom-nav-petal:nth-child(2) { --r: 36deg; }
.bloom-nav-petal:nth-child(3) { --r: 72deg; }
.bloom-nav-petal:nth-child(4) { --r: 108deg; }
.bloom-nav-petal:nth-child(5) { --r: 144deg; }
.bloom-nav-petal:nth-child(6) { --r: 180deg; }
.bloom-nav-petal:nth-child(7) { --r: 216deg; }
.bloom-nav-petal:nth-child(8) { --r: 252deg; }

/* 今いるページは、花びら1枚だけを静かに残して居場所を示す。 */
.bloom-nav a[aria-current="page"] .bloom-nav-petal:first-child {
  opacity: .3;
  transform: rotate(-6deg) translateX(9px) scale(.72);
}

/* カーソルのある画面。指の画面には hover が無いので押したときの規則で咲かせる。 */
@media (hover: hover) and (pointer: fine) {
  .bloom-nav a:hover,
  .bloom-nav a:focus-visible { transform: translateY(-1px); }

  .bloom-nav a:hover .bloom-nav-petal,
  .bloom-nav a:focus-visible .bloom-nav-petal {
    opacity: .34;
    transform: rotate(var(--r, 0deg)) translateX(18px) scale(1);
  }

  .bloom-nav-contact:hover .bloom-nav-petal,
  .bloom-nav-contact:focus-visible .bloom-nav-petal {
    opacity: .42;
    transform: rotate(var(--r, 0deg)) translateX(20px) scale(1.08);
  }
}

.bloom-nav a.is-blooming .bloom-nav-petal {
  opacity: .34;
  transform: rotate(var(--r, 0deg)) translateX(17px) scale(.96);
}

.bloom-nav-contact.is-blooming .bloom-nav-petal {
  opacity: .42;
  transform: rotate(var(--r, 0deg)) translateX(19px) scale(1.04);
}

.bloom-nav a:hover { background: rgba(83, 184, 222, .08); }

.bloom-nav a[aria-current="page"] { background: rgba(83, 184, 222, .11); }

.bloom-nav .bloom-nav-contact {
  margin-left: 7px;
  padding: 11px 18px;
  border: 1px solid rgba(0, 174, 239, .24);
  background: var(--bloom-pine);
  color: var(--bloom-white);
}

.bloom-nav .bloom-nav-contact:hover { background: var(--bloom-ink); }

/*
 * 相談の導線は、そのページを開いているときも塗りを保つ。
 * 現在地の薄い塗り（上の a[aria-current]）が勝つと、白い文字が
 * ほぼ白の背景に乗って読めなくなるため。
 */
.bloom-nav .bloom-nav-contact[aria-current="page"] { background: var(--bloom-pine); }

.bloom-menu-button { display: none; }

/* Footer ------------------------------------------------------------------ */

.bloom-footer {
  padding-block: 60px 35px;
  border-top: 1px solid var(--bloom-line);
}

.bloom-footer-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
}

.bloom-footer-brand p {
  margin: .9rem 0 0;
  color: #7b9094;
  font-size: 11px;
  line-height: 1.9;
}

.bloom-footer-column b {
  display: block;
  margin-bottom: .8rem;
  color: var(--bloom-ink);
  font-size: 16px;
  font-weight: 700;
  /* 参照は行間を指定しない。body の 1.95 を継がせない。 */
  line-height: normal;
}

.bloom-footer-column a {
  display: block;
  padding-block: .35rem;
  color: #7b9094;
  font-size: 11px;
  line-height: 1.9;
}

.bloom-footer-column a:hover { color: var(--bloom-ink); }

.bloom-copyright {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bloom-line);
  color: var(--bloom-faint);
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  .bloom-nav a { transition: none; }
}

/* Mobile ------------------------------------------------------------------ */

/*
 * The approved preview hides its header entirely below 980px and never shows
 * a working menu, so there is nothing to copy here: this drawer is the
 * smallest thing that keeps the same navigation reachable on a phone.
 */
@media (max-width: 900px) {
  .bloom-header { padding: 6px 8px; }

  .bloom-logo { min-width: 0; padding: 6px; }
  .bloom-logo img { max-height: 30px; }

  .bloom-menu-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 0;
    border-radius: var(--bloom-radius-pill);
    background: transparent;
    color: var(--bloom-ink);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .1em;
    cursor: pointer;
  }

  .bloom-menu-button i {
    position: relative;
    width: 18px;
    height: 1px;
    background: currentColor;
  }

  .bloom-menu-button i::before,
  .bloom-menu-button i::after {
    position: absolute;
    left: 0;
    width: 18px;
    height: 1px;
    background: currentColor;
    content: "";
  }

  .bloom-menu-button i::before { top: -6px; }
  .bloom-menu-button i::after { top: 6px; }

  .bloom-nav {
    position: absolute;
    z-index: 90;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--bloom-line);
    border-radius: var(--bloom-radius-card);
    /* A drawer that overlays page content is opaque. */
    background: var(--bloom-white);
    box-shadow: var(--bloom-shadow-card);
  }

  .bloom-header.is-open .bloom-nav { display: flex; }

  .bloom-nav a { padding: .7rem .25rem; font-size: 14px; }

  /*
   * 引き出しの中では行が縦に並ぶ。メニューを開いた瞬間に上から順に一度だけ
   * 咲き、そのまま静かに閉じる。咲いたまま残すと文字が読みにくいため。
   * 押したときは別の規則（.is-blooming）で開く。
   */
  .bloom-nav-bloom,
  .bloom-nav-contact .bloom-nav-bloom { width: 64px; height: 64px; }

  .bloom-nav-petal,
  .bloom-nav-contact .bloom-nav-petal {
    width: 30px;
    height: 11px;
    margin: -5.5px 0 0 -15px;
  }

  .bloom-header.is-open .bloom-nav-petal {
    animation: bloom-nav-open .9s cubic-bezier(.18, .9, .22, 1) both;
  }

  .bloom-header.is-open .bloom-nav a:nth-child(1) .bloom-nav-petal { animation-delay: .02s; }
  .bloom-header.is-open .bloom-nav a:nth-child(2) .bloom-nav-petal { animation-delay: .09s; }
  .bloom-header.is-open .bloom-nav a:nth-child(3) .bloom-nav-petal { animation-delay: .16s; }
  .bloom-header.is-open .bloom-nav a:nth-child(4) .bloom-nav-petal { animation-delay: .23s; }
  .bloom-header.is-open .bloom-nav a:nth-child(5) .bloom-nav-petal { animation-delay: .30s; }
  .bloom-header.is-open .bloom-nav a:nth-child(6) .bloom-nav-petal { animation-delay: .37s; }

  /* 押したときは、その項目だけがはっきり咲く。 */
  .bloom-nav a.is-blooming .bloom-nav-petal,
  .bloom-nav-contact.is-blooming .bloom-nav-petal {
    animation: none;
    opacity: .5;
    transform: rotate(var(--r, 0deg)) translateX(15px) scale(.96);
  }

  .bloom-nav .bloom-nav-contact {
    margin: .75rem 0 0;
    justify-content: center;
    min-height: 2.75rem;
  }

  .bloom-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloom-footer-brand { grid-column: 1 / -1; }
}

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

/* 無料相談のポップアップ ------------------------------------------------------
 *
 * 承認済みデザインの .v41-flower-itself。四角いカードは無く、ポップアップ
 * そのものが花になっている。8枚の花びらが開き、中心に用件が乗る。
 *
 * --k は花全体の縮尺。狭い画面ではこれだけを下げるので、形が崩れずに収まる。
 * 花の直径（花びらの伸び + 花びらの高さの半分）は必ず器の幅より小さく保つ。
 * そうしないと固定要素が画面からはみ出し、横スクロールが生まれる。
 */

.bloom-consult {
  --k: 1;
  position: fixed;
  z-index: 95;
  right: 14px;
  bottom: 14px;
  width: min(calc(296px * var(--k)), calc(100vw - 20px));
  height: calc(318px * var(--k));
  visibility: hidden;
  opacity: 0;
  transform: translateY(24px) scale(.92);
  transform-origin: 78% 88%;
  transition: opacity .42s ease, transform .58s cubic-bezier(.18, .9, .22, 1), visibility .42s;
  pointer-events: none;
}

.bloom-consult.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.bloom-consult-stage {
  position: absolute;
  z-index: 2;
  inset: 0;
  filter: drop-shadow(0 16px 34px rgba(23, 63, 69, .08));
  pointer-events: none;
}

.bloom-consult-petal {
  --c: var(--bloom-pastel-blue);
  position: absolute;
  top: 45%;
  left: 50%;
  width: calc(126px * var(--k));
  height: calc(72px * var(--k));
  margin: calc(-36px * var(--k)) 0 0 calc(-63px * var(--k));
  border-radius: 76% 46% 72% 48% / 62% 54% 68% 46%;
  background: color-mix(in srgb, var(--c) 25%, transparent);
  transform-origin: center;
  transition: transform .72s cubic-bezier(.18, .9, .22, 1), opacity .46s ease;
}

.bloom-consult-petal.p1 { --c: var(--bloom-pastel-blue);   transform: rotate(0deg)   translateY(calc(-97px * var(--k))); }
.bloom-consult-petal.p2 { --c: var(--bloom-pastel-teal);          transform: rotate(45deg)  translateY(calc(-101px * var(--k))); }
.bloom-consult-petal.p3 { --c: var(--bloom-pastel-yellow); transform: rotate(90deg)  translateY(calc(-99px * var(--k))); }
.bloom-consult-petal.p4 { --c: var(--bloom-pastel-coral);  transform: rotate(135deg) translateY(calc(-97px * var(--k))); }
.bloom-consult-petal.p5 { --c: var(--bloom-pastel-green);  transform: rotate(180deg) translateY(calc(-100px * var(--k))); }
.bloom-consult-petal.p6 { --c: var(--bloom-pastel-purple); transform: rotate(225deg) translateY(calc(-98px * var(--k))); }
.bloom-consult-petal.p7 { --c: var(--bloom-pastel-coral);  transform: rotate(270deg) translateY(calc(-99px * var(--k))); }
.bloom-consult-petal.p8 { --c: var(--bloom-pastel-blue);   transform: rotate(315deg) translateY(calc(-100px * var(--k))); }

/* 閉じているあいだ、花びらは中心に畳まれている。 */
.bloom-consult:not(.is-open) .bloom-consult-petal {
  opacity: 0;
  transform: rotate(0deg) translateY(0) scale(.18);
}

.bloom-consult-heart {
  position: absolute;
  z-index: 4;
  top: 45%;
  left: 50%;
  display: flex;
  width: calc(252px * var(--k));
  height: calc(206px * var(--k));
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* 左右の余白は狭めに。「まずは聞かせてください。」を1行で収めるため。 */
  padding: calc(20px * var(--k)) calc(17px * var(--k)) calc(16px * var(--k));
  border: 1px solid rgba(114, 183, 142, .16);
  /* 日本語の見出しが1行で収まるよう、正円ではなく横に広い楕円にしている。 */
  border-radius: 50%;
  background: radial-gradient(circle at 48% 42%, rgba(255, 255, 255, .99), rgba(255, 253, 248, .98) 68%, rgba(126, 214, 204, .06) 100%);
  box-shadow: 0 16px 38px rgba(23, 63, 69, .12);
  isolation: isolate;
  transform: translate(-50%, -50%) rotate(-1deg);
  pointer-events: auto;
}

.bloom-consult-heart::before,
.bloom-consult-heart::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 70% 48% 70% 48%;
  opacity: .18;
}

.bloom-consult-heart::before {
  top: calc(16px * var(--k));
  left: calc(18px * var(--k));
  width: calc(80px * var(--k));
  height: calc(28px * var(--k));
  background: var(--bloom-pastel-blue);
  transform: rotate(-28deg);
}

.bloom-consult-heart::after {
  right: calc(12px * var(--k));
  bottom: calc(22px * var(--k));
  width: calc(74px * var(--k));
  height: calc(27px * var(--k));
  background: var(--bloom-pastel-teal);
  transform: rotate(28deg);
}

.bloom-consult-brand { display: block; width: calc(92px * var(--k)); margin-bottom: calc(6px * var(--k)); }
.bloom-consult-brand img { display: block; width: 100%; height: auto; }

.bloom-consult-title {
  margin: 0;
  color: var(--bloom-ink-deep);
  font-family: var(--bloom-font-hand);
  /* 縮尺に連れて小さくするが、読める下限で止める。 */
  font-size: max(14px, calc(15px * var(--k)));
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}

.bloom-consult-copy {
  margin: calc(6px * var(--k)) 0 calc(8px * var(--k));
  color: var(--bloom-muted);
  font-size: max(11px, calc(11.5px * var(--k)));
  line-height: 1.6;
  text-align: center;
}

.bloom-consult-cta {
  display: flex;
  width: calc(168px * var(--k));
  min-height: calc(38px * var(--k));
  align-items: center;
  justify-content: center;
  padding: 0 calc(12px * var(--k));
  border-radius: 72% 42% 69% 45% / 62% 52% 68% 48%;
  background: linear-gradient(135deg, #f6a287, #ef8d72);
  box-shadow: 0 9px 20px rgba(242, 154, 127, .22);
  color: var(--bloom-white);
  font-size: max(11px, calc(11.5px * var(--k)));
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transform: rotate(-1.5deg);
  transition: transform var(--bloom-motion) var(--bloom-ease), box-shadow var(--bloom-motion) var(--bloom-ease);
}

.bloom-consult-cta:hover {
  box-shadow: 0 13px 25px rgba(242, 154, 127, .29);
  transform: translateY(-2px) rotate(-.8deg) scale(1.015);
}

.bloom-consult-stem {
  position: absolute;
  z-index: 1;
  top: 68%;
  left: 63%;
  width: calc(4px * var(--k));
  height: calc(52px * var(--k));
  border-radius: 5px;
  background: linear-gradient(#83c59b, #64a87d);
  opacity: .58;
  transform: rotate(18deg);
  pointer-events: none;
}

.bloom-consult-leaf {
  position: absolute;
  z-index: 1;
  top: 80%;
  left: 62%;
  width: calc(56px * var(--k));
  height: calc(25px * var(--k));
  border-radius: 82% 36% 80% 38%;
  background: rgba(114, 183, 142, .28);
  transform: rotate(-28deg);
  pointer-events: none;
}

.bloom-consult-close {
  position: absolute;
  z-index: 9;
  top: calc(22px * var(--k));
  right: 0;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(23, 63, 69, .05);
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 16px rgba(23, 63, 69, .1);
  color: var(--bloom-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.bloom-consult-close:hover { color: var(--bloom-ink-deep); }

@media (max-width: 900px) {
  .bloom-consult { --k: .94; }
}

@media (max-width: 430px) {
  .bloom-consult { --k: .82; right: 10px; bottom: 10px; }
}

@media (max-width: 370px) {
  .bloom-consult { --k: .74; right: 8px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .bloom-consult,
  .bloom-consult-petal,
  .bloom-consult-cta,
  .bloom-nav-petal { transition: none; }
}

@keyframes bloom-nav-open {
  0%   { opacity: 0;   transform: rotate(var(--r, 0deg)) translateX(0) scale(.18); }
  45%  { opacity: .6;  transform: rotate(var(--r, 0deg)) translateX(15px) scale(1); }
  100% { opacity: 0;   transform: rotate(var(--r, 0deg)) translateX(15px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bloom-header.is-open .bloom-nav-petal { animation: none; }
}

/*
 * 旧デザインの花びら（bh-gf-*）を bloom のページには出さない。
 *
 * これはサーバ側 mu-plugin のインラインスクリプトが、お知らせ／ナレッジの
 * ページで実行時に組み立てている。bloom シェルはその CSS を外しているので、
 * 塗りの指定を失った SVG が既定の黒・1512px で描かれてしまう（2026-09-05）。
 * スクリプトはテーマから止められないため、描かせないことで確実に消す。
 */
.bloom-page [class*="bh-gf"],
.bloom-page .bh-roundflower-svg,
.bloom-page .bh-pointflower-svg { display: none; }