/*
 * Knowledge / News の presentation。
 *
 * 共通の型・色・余白は bloom-tokens.css、シェルは bloom-shell.css が持つ。
 * ここは一覧の行と記事本文だけ。記事本文（.bloom-article-content）は
 * WordPress のエディタが出すタグを相手にするので、要素セレクタを使う。
 */

/* 一覧の見出し行 ------------------------------------------------------------ */

.bloom-knowledge-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}

.bloom-knowledge-count {
  flex: none;
  color: var(--bloom-faint);
  font-size: var(--bloom-eyebrow);
  font-weight: 500;
  letter-spacing: var(--bloom-eyebrow-tracking);
  white-space: nowrap;
}

/* Knowledge の行 ------------------------------------------------------------ */

.bloom-knowledge-items {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bloom-line);
}

.bloom-knowledge-item { border-bottom: 1px solid var(--bloom-line); }

.bloom-knowledge-item > a {
  display: grid;
  align-items: baseline;
  gap: 6px 28px;
  padding: 28px 4px;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  transition: background var(--bloom-motion) var(--bloom-ease);
}

.bloom-knowledge-item > a:hover { background: rgba(83, 184, 222, .05); }

.bloom-knowledge-id {
  color: var(--bloom-faint);
  font-size: var(--bloom-eyebrow);
  font-weight: 500;
  letter-spacing: var(--bloom-eyebrow-tracking);
}

.bloom-knowledge-main h3 {
  margin: 0 0 8px;
  color: var(--bloom-ink-deep);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
}

.bloom-knowledge-main p {
  margin: 0;
  color: #5f7b80;
  font-size: 13px;
  line-height: 1.9;
}

.bloom-knowledge-read {
  color: var(--bloom-title);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.bloom-knowledge-empty {
  padding: 40px 0;
  color: var(--bloom-muted);
  font-size: 14px;
}

/* News の行 ----------------------------------------------------------------- */

.bloom-news-items {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bloom-line);
}

.bloom-news-item { border-bottom: 1px solid var(--bloom-line); }

.bloom-news-item > a {
  display: grid;
  align-items: baseline;
  gap: 6px 24px;
  padding: 22px 4px;
  grid-template-columns: 88px 120px minmax(0, 1fr);
  transition: background var(--bloom-motion) var(--bloom-ease);
}

.bloom-news-item > a:hover { background: rgba(83, 184, 222, .05); }

.bloom-news-date {
  color: var(--bloom-faint);
  font-size: 11px;
  letter-spacing: .06em;
}

.bloom-news-cat {
  justify-self: start;
  padding: 4px 11px;
  border-radius: var(--bloom-radius-pill);
  background: rgba(126, 214, 204, .14);
  color: var(--bloom-deep);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  white-space: nowrap;
}

.bloom-news-title {
  color: var(--bloom-ink);
  font-size: 15px;
  line-height: 1.75;
}

/* ページ送り ---------------------------------------------------------------- */

.bloom-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 52px;
}

.bloom-pagination .page-numbers {
  display: inline-flex;
  min-width: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid var(--bloom-line);
  border-radius: var(--bloom-radius-pill);
  color: var(--bloom-ink);
  font-size: 12px;
  transition: background var(--bloom-motion) var(--bloom-ease);
}

.bloom-pagination .page-numbers:hover { background: rgba(83, 184, 222, .08); }

.bloom-pagination .page-numbers.current {
  border-color: transparent;
  background: var(--bloom-pine);
  color: var(--bloom-white);
}

.bloom-pagination .page-numbers.dots {
  border-color: transparent;
  color: var(--bloom-faint);
}

/* 記事 ---------------------------------------------------------------------- */

.bloom-article-shell {
  width: min(760px, 88vw);
  margin: 0 auto;
}

.bloom-article-hero {
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(1.75rem, 3vw, 2.75rem);
  background: var(--bloom-ground-tint);
}

.bloom-article-back {
  display: inline-block;
  margin-bottom: 26px;
  color: var(--bloom-muted);
  font-size: 12px;
}

.bloom-article-back:hover { color: var(--bloom-title); }

.bloom-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  color: var(--bloom-faint);
  font-size: 11px;
}

.bloom-article-meta .bloom-eyebrow { margin: 0; }

.bloom-article-cat {
  padding: 4px 11px;
  border-radius: var(--bloom-radius-pill);
  background: rgba(126, 214, 204, .14);
  color: var(--bloom-deep);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
}

.bloom-article-title {
  margin: 0;
  color: var(--bloom-ink-deep);
  font-family: var(--bloom-font-hand);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .015em;
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: balance;
}

/* 狭い画面では文節より、はみ出さないことを優先する。 */
@media (max-width: 640px) {
  .bloom-article-title { word-break: normal; }
}

.bloom-article-body { padding: clamp(2.75rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 7rem); }

/* 本文。WordPress が出すタグを相手にするので要素セレクタを使う。 */
.bloom-article-content {
  color: var(--bloom-ink-soft);
  font-size: 16px;
  line-height: 2.05;
}

.bloom-article-content > * { margin: 0 0 1.55em; }
.bloom-article-content > *:last-child { margin-bottom: 0; }

.bloom-article-content h2 {
  margin: 2.6em 0 .9em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--bloom-line);
  color: var(--bloom-ink-deep);
  font-family: var(--bloom-font-hand);
  font-size: clamp(1.375rem, 2.3vw, 1.75rem);
  font-weight: 400;
  line-height: 1.55;
}

.bloom-article-content h3 {
  margin: 2.1em 0 .8em;
  color: var(--bloom-ink-deep);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.7;
}

.bloom-article-content h4 {
  margin: 1.8em 0 .7em;
  color: var(--bloom-pine);
  font-size: 1rem;
  font-weight: 600;
}

.bloom-article-content a {
  color: var(--bloom-title);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bloom-article-content ul,
.bloom-article-content ol { padding-left: 1.4em; }

.bloom-article-content li { margin-bottom: .55em; }

.bloom-article-content blockquote {
  padding: 1.1em 1.4em;
  border-left: 3px solid rgba(126, 214, 204, .5);
  border-radius: 0 12px 12px 0;
  background: var(--bloom-ground-warm);
  color: var(--bloom-muted);
  font-size: .95em;
}

.bloom-article-content img {
  height: auto;
  border-radius: 14px;
}

/*
 * 表は本文の幅を超えることがある。ページ全体を横に伸ばすのではなく、
 * 表そのものの中でだけ横スクロールさせる。
 */
.bloom-article-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .9em;
}

.bloom-article-content thead,
.bloom-article-content tbody { display: table; width: 100%; }

.bloom-article-content th,
.bloom-article-content td {
  padding: 11px 13px;
  border: 1px solid var(--bloom-line);
  text-align: left;
  white-space: nowrap;
}

.bloom-article-content th {
  background: var(--bloom-ground-warm);
  color: var(--bloom-ink-deep);
  font-weight: 600;
}

.bloom-article-content code {
  padding: .15em .45em;
  border-radius: 5px;
  background: rgba(41, 76, 80, .06);
  font-size: .9em;
}

/*
 * 会社概要 / 企業理念の本文 --------------------------------------------------
 *
 * この2ページの中身は WordPress の編集画面で書かれていて、親テーマの器
 * （.tcdce-body）に包まれて出てくる。中身（沿革・住所・理念の文言）は正本
 * なので触らず、見た目だけを bloom に合わせる。
 */

.bloom-article-content .tcdce-body > * { margin: 0 0 1.55em; }
.bloom-article-content .tcdce-body > *:last-child { margin-bottom: 0; }

/* 編集画面が残す空の見出しは、余白だけを作るので出さない。 */
.bloom-article-content .tcdce-body h6:empty { display: none; }

.bloom-article-content .tcdce-body hr {
  height: 1px;
  margin: 2.6em 0;
  border: 0;
  background: var(--bloom-line);
}

/* 会社概要の表。罫線で囲うのをやめ、行の区切りと見出し列の色だけで読ませる。 */
.bloom-article-content .s_table { overflow-x: auto; }

.bloom-article-content .s_table table {
  display: table;
  border: 0;
  font-size: .95em;
}

.bloom-article-content .s_table td {
  border: 0;
  border-bottom: 1px solid var(--bloom-line);
  vertical-align: top;
  /* 住所は長い。1行に押し込めず、狭い画面では折り返す。 */
  white-space: normal;
}

.bloom-article-content .s_table tr:first-child td { border-top: 1px solid var(--bloom-line); }

.bloom-article-content .s_table td:first-child {
  background: var(--bloom-ground-warm);
  color: var(--bloom-ink-deep);
  font-size: .92em;
  font-weight: 600;
}

/* 地図。埋め込みの幅と高さの属性を無視して、器いっぱいに置く。 */
.bloom-article-content .tcdce-body iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  /* 埋め込みの height 属性を無効にしないと、縦横比が効かない。 */
  height: auto;
  min-height: 260px;
  border: 0;
  border-radius: 16px;
  aspect-ratio: 16 / 9;
}

/*
 * 本文の中のボタン。サイトのボタンに揃える。
 *
 * 親テーマは色を ::before に置いていて、ボタン要素そのものは透明。文字だけ白い
 * ので、疑似要素を止めて要素に色を置く。セレクタに .tcdce-body を挟むのは、
 * 親テーマの :is(.tcdce-body, …) :is(.tcdce-button, …) と詳細度が並ぶと
 * 読み込み順で負けるため（!important は使わない）。
 */
.bloom-article-content .tcdce-button-wrapper { text-align: center; }

.bloom-article-content .tcdce-body .tcdce-button::before,
.bloom-article-content .tcdce-body .tcdce-button::after { content: none; }

.bloom-article-content .tcdce-body .tcdce-button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0 1.9rem;
  border: 0;
  border-radius: var(--bloom-radius-pill);
  background: var(--bloom-ink-deep);
  box-shadow: var(--bloom-shadow-card);
  color: var(--bloom-white);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: transform var(--bloom-motion) var(--bloom-ease), background var(--bloom-motion) var(--bloom-ease);
}

.bloom-article-content .tcdce-body .tcdce-button:hover {
  background: var(--bloom-pine);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .bloom-article-content .s_table td { padding: 9px 10px; }
  .bloom-article-content .tcdce-body iframe { min-height: 220px; }
}

/*
 * Knowledge 記事の Quick Answer と Related Knowledge -------------------------
 *
 * どちらも inc/knowledge-seo.php が本文の前後に足す囲み（本文データではない）。
 * 9/5 のリデザインで記事が .bloom-article-content に載ってから、
 * css/knowledge-seo.css の #bh-news-single 向けの指定が当たらず、
 * 囲みもラベルの装飾も外れていた。ここで bloom の型に合わせて付け直す。
 */

.bloom-article-content .bh-ko-answer {
  margin: 0 0 2.4em;
  padding: 22px 26px;
  border: 1px solid rgba(39, 189, 179, .22);
  border-radius: 18px;
  background: rgba(39, 189, 179, .06);
}

/*
 * ラベルは記事下の導線（RELATED SERVICE）と同じ小さな見出し。色は、薄い地色の上の
 * 11px でも AA（4.5:1）を満たす ink-soft（Quick Answer の地で 5.2:1）。
 */
.bloom-article-content .bh-ko-answer-label,
.bloom-article-content .bh-ko-related-label {
  margin: 0 0 9px;
  color: var(--bloom-ink-soft);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--bloom-eyebrow-tracking);
  line-height: 1.6;
  text-transform: uppercase;
}

.bloom-article-content .bh-ko-answer p:not(.bh-ko-answer-label) {
  margin: 0;
  color: var(--bloom-ink);
  font-size: 15px;
  line-height: 1.95;
}

.bloom-article-content .bh-ko-related {
  margin-top: clamp(2.75rem, 5vw, 3.5rem);
  padding: 24px 26px 18px;
  border: 1px solid var(--bloom-line);
  border-radius: var(--bloom-radius-card);
  background: var(--bloom-white);
}

/* 本文の h2（上の大きな余白と下線）は、この囲みの中では使わない。 */
.bloom-article-content .bh-ko-related h2 {
  margin: 0 0 6px;
  padding: 0;
  border-bottom: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.5;
}

.bloom-article-content .bh-ko-related ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bloom-article-content .bh-ko-related li {
  margin: 0;
  border-top: 1px solid var(--bloom-line);
}

.bloom-article-content .bh-ko-related li:first-child { border-top: 0; }

.bloom-article-content .bh-ko-related a {
  display: block;
  padding: 12px 0;
  color: var(--bloom-ink-deep);
  font-size: 15px;
  line-height: 1.7;
  text-decoration: none;
  transition: color var(--bloom-motion) var(--bloom-ease);
}

.bloom-article-content .bh-ko-related a::after {
  content: " →";
  color: var(--bloom-faint);
}

.bloom-article-content .bh-ko-related a:hover,
.bloom-article-content .bh-ko-related a:focus-visible { color: var(--bloom-title); }

@media (max-width: 640px) {
  .bloom-article-content .bh-ko-answer { padding: 18px 18px; }
  .bloom-article-content .bh-ko-related { padding: 20px 18px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bloom-article-content .bh-ko-related a { transition: none; }
}

/* 記事の下の導線 ------------------------------------------------------------ */

.bloom-article-actions {
  display: grid;
  gap: 14px;
  margin-top: 56px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bloom-article-action {
  display: block;
  padding: 22px 24px;
  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-article-action:hover {
  border-color: rgba(83, 184, 222, .4);
  transform: translateY(-2px);
}

/* 歯科の記事だけに出る、歯科 LP への入口。関連サービス・相談の 2 枚の下に横幅いっぱいで置く。 */
.bloom-article-action--dental { grid-column: 1 / -1; }

.bloom-article-action small {
  display: block;
  margin-bottom: 9px;
  color: var(--bloom-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--bloom-eyebrow-tracking);
}

.bloom-article-action strong {
  color: var(--bloom-ink-deep);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
}

.bloom-article-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--bloom-line);
}

.bloom-article-nav a {
  color: var(--bloom-muted);
  font-size: 12px;
}

.bloom-article-nav a:hover { color: var(--bloom-title); }

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

@media (max-width: 900px) {
  .bloom-knowledge-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .bloom-knowledge-item > a {
    gap: 8px;
    padding: 22px 2px;
    grid-template-columns: minmax(0, 1fr);
  }

  .bloom-knowledge-read { justify-self: start; }

  .bloom-news-item > a {
    gap: 7px;
    padding: 18px 2px;
    grid-template-columns: minmax(0, 1fr);
  }

  .bloom-article-actions { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .bloom-article-action,
  .bloom-knowledge-item > a,
  .bloom-news-item > a,
  .bloom-pagination .page-numbers { transition: none; }

  .bloom-article-action:hover { transform: none; }
}