/*
 * 下層ページの presentation — お問い合わせ / 法務ページ。
 *
 * 記事の器（.bloom-article-shell / .bloom-article-content）は
 * bloom-knowledge.css が持つ。法務ページはその器をそのまま使う。
 */

/* お問い合わせ --------------------------------------------------------------- */

.bloom-contact-form { background: var(--bloom-white); }

/*
 * フォーム本体は固定ページの本文が持つ。中のタグが何であっても読めるよう、
 * 器の側で最低限の型だけ与える（要素セレクタはこの器の中だけ）。
 */
.bloom-form-card {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--bloom-line);
  border-radius: var(--bloom-radius-card);
  background: var(--bloom-white);
  box-shadow: var(--bloom-shadow-card);
  color: var(--bloom-ink-soft);
  font-size: 15px;
  line-height: 1.95;
}

.bloom-form-card label {
  display: block;
  margin-bottom: 7px;
  color: var(--bloom-ink-deep);
  font-size: 13px;
  font-weight: 500;
}

.bloom-form-card p { margin: 0 0 22px; }
.bloom-form-card p:last-child { margin-bottom: 0; }

.bloom-form-card input[type="text"],
.bloom-form-card input[type="email"],
.bloom-form-card input[type="tel"],
.bloom-form-card input[type="url"],
.bloom-form-card select,
.bloom-form-card textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--bloom-line);
  border-radius: 12px;
  background: var(--bloom-white);
  color: var(--bloom-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
}

.bloom-form-card textarea { min-height: 160px; }

.bloom-form-card input:focus,
.bloom-form-card select:focus,
.bloom-form-card textarea:focus {
  border-color: rgba(83, 184, 222, .55);
  outline: 2px solid rgba(83, 184, 222, .18);
  outline-offset: 1px;
}

.bloom-form-card input[type="submit"],
.bloom-form-card button[type="submit"] {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  border: 0;
  border-radius: var(--bloom-radius-pill);
  background: var(--bloom-pine);
  color: var(--bloom-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--bloom-motion) var(--bloom-ease);
}

.bloom-form-card input[type="submit"]:hover,
.bloom-form-card button[type="submit"]:hover { background: var(--bloom-deep); }

/*
 * Contact Form 7 の本文が持つクラス（.contact-form-wrap ほか）の見た目。
 *
 * もとは Customizer の追加CSSが水色のボタンと二重の白い箱で描いていた。
 * テーマが引き取り、器は .bloom-form-card の1枚、ボタンはサイトの
 * ボタンと同じ色にする。フォームの中身（タグ・項目）には触れない。
 * 追加CSS側の規則より必ず詳細度を高くしておく（!important は使わない）。
 */
.bloom-form-card .contact-form-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 見出しと前置きは、ページの題名と本文がすでに言っている。二度は出さない。 */
.bloom-form-card .contact-form-lead { display: none; }

.bloom-form-card .contact-form-grid {
  display: grid;
  gap: 18px 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bloom-form-card .contact-form-grid .form-field-full { grid-column: 1 / -1; }

.bloom-form-card .contact-form-grid p { margin: 0; }

.bloom-form-card .contact-form-wrap .contact_pic {
  display: block;
  margin: 0;
  color: var(--bloom-ink-deep);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
}

.bloom-form-card .contact-form-wrap .required,
.bloom-form-card .contact-form-wrap .optional {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--bloom-radius-pill);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .04em;
  vertical-align: middle;
}

.bloom-form-card .contact-form-wrap .required {
  background: rgba(232, 128, 122, .14);
  color: #b9534c;
}

.bloom-form-card .contact-form-wrap .optional {
  background: rgba(83, 184, 222, .12);
  color: var(--bloom-deep);
}

.bloom-form-card .contact-form-wrap .wpcf7-form-control-wrap {
  display: block;
  margin-top: 6px;
}

.bloom-form-card .contact-form-wrap input[type="text"],
.bloom-form-card .contact-form-wrap input[type="email"],
.bloom-form-card .contact-form-wrap input[type="tel"],
.bloom-form-card .contact-form-wrap select,
.bloom-form-card .contact-form-wrap textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--bloom-line);
  border-radius: 12px;
  background: var(--bloom-white);
  color: var(--bloom-ink);
  font-size: 15px;
  line-height: 1.7;
  box-shadow: none;
  appearance: none;
  transition: border-color var(--bloom-motion) var(--bloom-ease);
}

.bloom-form-card .contact-form-wrap textarea {
  min-height: 160px;
  resize: vertical;
}

.bloom-form-card .contact-form-wrap input:focus,
.bloom-form-card .contact-form-wrap select:focus,
.bloom-form-card .contact-form-wrap textarea:focus {
  border-color: rgba(83, 184, 222, .55);
  outline: 2px solid rgba(83, 184, 222, .18);
  outline-offset: 1px;
  box-shadow: none;
}

.bloom-form-card .contact-form-wrap ::placeholder { color: var(--bloom-faint); }

.bloom-form-card .contact-form-wrap select {
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bloom-faint) 50%),
    linear-gradient(135deg, var(--bloom-faint) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 15px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.bloom-form-card .contact-form-wrap .cf-check-wrap {
  margin-top: 6px;
  padding: 14px 16px 6px;
  border: 1px solid var(--bloom-line);
  border-radius: 12px;
  background: var(--bloom-ground-tint);
}

.bloom-form-card .contact-form-wrap .cf-check-wrap .wpcf7-list-item {
  display: inline-block;
  margin: 0 18px 8px 0;
}

.bloom-form-card .contact-form-wrap .cf-check-wrap label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--bloom-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  cursor: pointer;
}

.bloom-form-card .contact-form-wrap input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--bloom-pine);
}

/* 送信。サイトのボタンと同じ塗り。リセットは要らない。 */
.bloom-form-card .contact-btn-wrap {
  padding-top: 10px;
  text-align: center;
}

.bloom-form-card .contact-btn-wrap p { margin: 0; }
.bloom-form-card .contact-btn-wrap br { display: none; }
.bloom-form-card .contact-btn-wrap .wpcf7-spinner { display: none; }
.bloom-form-card .contact-btn-wrap button[type="reset"] { display: none; }

.bloom-form-card .contact-btn-wrap input[type="submit"] {
  display: inline-flex;
  width: auto;
  min-width: 220px;
  height: auto;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 30px;
  border: 0;
  border-radius: var(--bloom-radius-pill);
  background-color: var(--bloom-pine);
  background-image: none;
  color: var(--bloom-white);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .04em;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--bloom-motion) var(--bloom-ease), transform var(--bloom-motion) var(--bloom-ease);
}

.bloom-form-card .contact-btn-wrap input[type="submit"]:hover {
  background-color: var(--bloom-deep);
  transform: translateY(-2px);
}

.bloom-form-card .contact-btn-wrap input[type="submit"]:focus-visible {
  outline: 2px solid rgba(83, 184, 222, .5);
  outline-offset: 3px;
}

/* 検証メッセージ */
.bloom-form-card .contact-form-wrap .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: #b9534c;
  font-size: 12px;
}

.bloom-form-card .contact-form-wrap .wpcf7-response-output {
  margin: 22px 0 0;
  padding: 13px 16px;
  border: 1px solid var(--bloom-line);
  border-radius: 12px;
  font-size: 14px;
}

.bloom-form-card .wpcf7-form.sent .contact-form-wrap .wpcf7-response-output {
  border-color: rgba(83, 184, 222, .4);
  background: var(--bloom-ground-tint);
  color: var(--bloom-deep);
}

.bloom-form-card .wpcf7-form.invalid .contact-form-wrap .wpcf7-response-output,
.bloom-form-card .wpcf7-form.failed .contact-form-wrap .wpcf7-response-output {
  border-color: rgba(232, 128, 122, .5);
  background: rgba(232, 128, 122, .08);
  color: #b9534c;
}

@media (max-width: 640px) {
  .bloom-form-card .contact-form-grid { grid-template-columns: minmax(0, 1fr); }
  .bloom-form-card .contact-btn-wrap input[type="submit"] { width: 100%; }
}

/* お問い合わせ後の流れ -------------------------------------------------------- */

.bloom-contact-steps {
  overflow: hidden;
  background: var(--bloom-ground-warm);
}

/*
 * 見出し「お問い合わせ後の流れ。」は、390px で1行に 4px 足りず「流れ。」だけが次の行に落ちる。
 * スマートフォンでは .bloom-heading（430px 以下は 8.2vw）より少しだけ小さくして1行に収める。
 */
@media (max-width: 430px) {
  .bloom-contact-steps .bloom-heading { font-size: clamp(1.75rem, 8vw, 2.25rem); }
}

.bloom-steps {
  display: grid;
  gap: 18px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bloom-step {
  --accent: var(--bloom-pastel-blue);
  position: relative;
  padding: 32px 26px 28px;
  isolation: isolate;
  transform: translate(var(--cv-x, 0), var(--cv-y, 0)) scale(var(--cv-s, 1));
  will-change: transform, opacity;
}

.bloom-step::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 65% 44% 68% 43% / 53% 65% 42% 59%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  transform: rotate(-3deg);
}

.bloom-step.is-teal { --accent: var(--bloom-pastel-teal); }
.bloom-step.is-green { --accent: var(--bloom-pastel-green); }

.bloom-step .num {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
}

.bloom-step b {
  display: block;
  margin-top: 16px;
  color: var(--bloom-pine);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}

.bloom-contact-closing {
  background: var(--bloom-ground-hero);
  text-align: center;
}

.bloom-contact-closing-line {
  max-width: none;
  margin: 0;
  color: var(--bloom-title);
  font-size: clamp(1.75rem, 4.2vw, 3.25rem);
}

/* 法務ページ ------------------------------------------------------------------ */

.bloom-legal-hero { background: var(--bloom-ground-tint); }

.bloom-legal-title {
  max-width: 20em;
  color: var(--bloom-ink-deep);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.5;
  letter-spacing: .015em;
}

.bloom-legal-body { background: var(--bloom-white); }

/* ~900px ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .bloom-steps { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .bloom-step { will-change: auto; }

  .bloom-form-card input[type="submit"],
  .bloom-form-card button[type="submit"] { transition: none; }
}

/* 会社概要 -------------------------------------------------------------------- */

.bloom-company-intro { background: var(--bloom-white); }

/* 見出し「人が咲く仕組みを、社会へ。」は読点で折る（文節で折ると「人が咲く／仕組みを、社会へ。」になる）。 */
body.bloom .bloom-company-intro .bloom-heading { word-break: keep-all; }
.bloom-company-core { background: var(--bloom-ground-warm); }
.bloom-company-links { background: var(--bloom-white); }
.bloom-company-news { background: var(--bloom-ground-warm); }
.bloom-company-partners { background: var(--bloom-white); }

.bloom-company-link-grid {
  display: grid;
  gap: 26px;
  /* 2枚（会社概要・企業理念）のときは従来どおり2列。役員紹介が加わると3枚が1行に並ぶ。 */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.bloom-company-link-card {
  display: block;
  padding: 40px 36px 34px;
  border: 1px solid var(--bloom-line);
  border-radius: var(--bloom-radius-card);
  background: var(--bloom-white);
  transition: border-color var(--bloom-motion) var(--bloom-ease),
              transform var(--bloom-motion) var(--bloom-ease);
}

.bloom-company-link-card:hover {
  border-color: rgba(83, 184, 222, .4);
  transform: translateY(-2px);
}

.bloom-company-link-card small {
  display: block;
  color: var(--bloom-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--bloom-eyebrow-tracking);
}

.bloom-company-link-card strong {
  display: block;
  margin: 20px 0 12px;
  color: var(--bloom-ink-deep);
  font-family: var(--bloom-font-hand);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.5;
}

.bloom-company-link-card p {
  margin: 0 0 22px;
  color: #5c787d;
  font-size: 13px;
  line-height: 1.85;
}

.bloom-company-link-card em {
  color: var(--bloom-title);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.bloom-company-news .bloom-news-items { margin-top: 40px; }

.bloom-partner-grid {
  display: grid;
  gap: 20px;
  margin-top: 44px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.bloom-partner-card {
  display: flex;
  min-height: 116px;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border: 1px solid var(--bloom-line);
  border-radius: var(--bloom-radius-card);
  background: var(--bloom-white);
}

.bloom-partner-logo {
  width: auto;
  max-height: 46px;
}

.bloom-partner-name {
  color: var(--bloom-ink-soft);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

/* 業務提携先。1 社 1 行（ロゴ・名称・説明）。社数が増えても同じ行が下へ並ぶ。 */
.bloom-company-alliances { background: var(--bloom-ground-warm); }

.bloom-alliance-list {
  display: grid;
  gap: 20px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.bloom-alliance-card {
  display: grid;
  align-items: center;
  gap: 18px 36px;
  padding: 28px 32px;
  border: 1px solid var(--bloom-line);
  border-radius: var(--bloom-radius-card);
  background: var(--bloom-white);
  grid-template-columns: 240px minmax(0, 1fr);
}

/* ロゴが無い提携先は、名称と説明だけを全幅で。 */
.bloom-alliance-card > .bloom-alliance-body:only-child { grid-column: 1 / -1; }

.bloom-alliance-logo-link { display: block; }

.bloom-alliance-logo {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
}

.bloom-alliance-name {
  margin: 0;
  color: var(--bloom-ink-deep);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}

.bloom-alliance-name a { color: inherit; }

.bloom-alliance-name a:hover { color: var(--bloom-title); }

.bloom-alliance-text {
  margin: 8px 0 0;
  color: #5c787d;
  font-size: 14px;
  line-height: 1.85;
}

@media (max-width: 640px) {
  .bloom-alliance-card {
    padding: 24px 22px;
    grid-template-columns: minmax(0, 1fr);
  }

  .bloom-alliance-logo { max-width: 200px; }
}

/*
 * 会社概要「BloomoreHRの強み」の中央揃えの段落（本文は DB。TCD エディタの style="text-align: center;"）。
 * スマートフォンで「人事制度／設計まで、」のように語の途中で折り返すので、折り返しを語の切れ目に寄せる。
 * 対応ブラウザは auto-phrase（日本語の文節で折り返す。html の lang="ja" が前提）。
 * 対応していないブラウザは keep-all で、句読点やスペースの位置で折り返す。
 * それでも1行に収まらない長さのときだけ、overflow-wrap で途中でも折り返してはみ出しを防ぐ。
 * 範囲は会社概要の本文の中央揃えの段落だけ（会社概要に中央揃えの段落はこの1つだけ）。
 */
.bloom-article-content--company_overview p[style*="text-align: center"] {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@supports (word-break: auto-phrase) {
  .bloom-article-content--company_overview p[style*="text-align: center"] { word-break: auto-phrase; }
}

/*
 * 会社概要の本文の見出し（DB）は読点・句点で折る。文節で折ると「組織の成長は、人の／成長から始まる。」
 * 「私たちは、Human／Growth Companyです。」のように意味の途中で折れる。どれも読点・句点の間は1行に収まる。
 */
.bloom-article-content--company_overview h2 { word-break: keep-all; }

/* 役員紹介（/about-bloomorehr/leadership/）。本文は記事の器のまま、人ごとの区切りだけを足す。 */
.bloom-article-content + .bloom-leadership { margin-top: clamp(2rem, 4vw, 3rem); }
/*
 * 肩書き（「代表取締役CEO」「取締役COO」）は氏名の上に、氏名とひとまとまりで置く。
 * 章のラベル（10px）のままでは読みにくいので、PC 15px・スマホ 14px にする（氏名は 28px / 22px なので、氏名より目立たない）。
 */
.bloom-leadership > .bloom-eyebrow {
  margin-bottom: .3em;
  color: var(--bloom-muted);
  font-size: .9375rem;
  letter-spacing: .08em;
  line-height: 1.4;
}

/* #representative などへ飛んだとき、役職の行が固定ヘッダーの裏に隠れないようにする（ヘッダーの高さ＋上下の余白＋少しの間）。 */
.bloom-leadership > .bloom-eyebrow[id] { scroll-margin-top: calc(var(--bloom-header-height) + var(--bloom-header-offset) * 2 + 24px); }
.bloom-leadership > .bloom-eyebrow ~ .bloom-eyebrow { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
/* 記事の本文の h2（bloom-knowledge.css の .bloom-article-content h2、上の余白 2.6em）が後から読まれて勝つので、一段強く打ち消す。 */
.bloom-article-content.bloom-leadership > h2 { margin-top: 0; }

@media (max-width: 700px) {
  .bloom-company-link-grid { grid-template-columns: minmax(0, 1fr); }

  .bloom-leadership > .bloom-eyebrow { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bloom-company-link-card { transition: none; }
  .bloom-company-link-card:hover { transform: none; }
}