/*
 * TOPと /service/ が共有する2つの節 — 「一本の線」と「特許出願中」。
 *
 * template-parts/bloom/shared/loop.php と shared/patent.php の presentation。
 * どちらのページからも読み込む。片方のページのCSSに置くと、もう片方では
 * まったく素の状態で出てしまう（実際にTOPでそうなっていた）。
 */

/* ONE LOOP ------------------------------------------------------------------ */

.bloom-loop { background: var(--bloom-ground-warm); }

/* この節のラベルとリードだけ、章の既定より一段淡く小さい（実測）。 */
.bloom-loop .bloom-eyebrow {
  color: var(--bloom-faint);
  font-weight: 400;
}

.bloom-loop-lead {
  color: #3b6268;
  font-size: clamp(.9375rem, 1.25vw, 1.125rem);
  line-height: 1.9;
}

/* この節の見出しだけ行間が広く、中央寄せ（実測 1.45 / center）。 */
.bloom-loop-heading {
  line-height: 1.45;
  text-align: center;
}

.bloom-loop-grid,
.bloom-patent-grid {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 100px);
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
}

.bloom-loop-visual {
  position: relative;
  min-height: 560px;
}

/* 蔓の周りに散る花びら3枚（参照 .ed-petal a/d/c、位置は参照の inline 値）。 */
.bloom-loop-petal {
  position: absolute;
  border-radius: 70% 62% 72% 58%;
  pointer-events: none;
}

.bloom-loop-petal.is-a { top: 42%; left: 22%;  width: 84px; height: 30px; background: rgba(120, 207, 196, .25); transform: rotate(-20deg); }
.bloom-loop-petal.is-d { top: 18%; left: 56%;  width: 62px; height: 23px; background: rgba(231, 201, 103, .22); transform: rotate(14deg); }
.bloom-loop-petal.is-c { top: 28%; right: 5%;  width: 68px; height: 25px; background: rgba(181, 154, 207, .21); transform: rotate(-16deg); }

.bloom-loop-vine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bloom-loop-vine .vine-main,
.bloom-loop-vine .vine-branch {
  fill: none;
  stroke: var(--bloom-pastel-green);
  stroke-linecap: round;
}

.bloom-loop-vine .vine-main { stroke-width: 2.4; stroke-opacity: .5; }
.bloom-loop-vine .vine-branch { stroke-width: 1.4; stroke-opacity: .32; }

.bloom-loop-points {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bloom-loop-point {
  position: absolute;
  width: 135px;
}

.bloom-loop-point::before {
  content: "";
  position: absolute;
  top: .35em;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--dot, var(--bloom-pastel-green));
}

.bloom-loop-point b {
  display: block;
  padding-left: 22px;
  color: var(--bloom-ink-deep);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.bloom-loop-point small {
  display: block;
  padding-left: 22px;
  margin-top: 5px;
  color: var(--bloom-faint);
  font-size: 11px;
  line-height: 1.45;
}

/*
 * つるの曲線に沿った位置。SVG の viewBox 760x570 に対する割合。
 * 右側の2つは right で留める。left で置くと、ラベルの幅ぶんが器から
 * はみ出して注記が切れる（実機で確認）。
 */
.bloom-loop-point.p1 { left: 1%;  top: 71%; --dot: var(--bloom-pastel-coral); }
.bloom-loop-point.p2 { left: 20%; top: 41%; --dot: var(--bloom-pastel-yellow); }
.bloom-loop-point.p3 { left: 40%; top: 62%; --dot: var(--bloom-pastel-teal); }
.bloom-loop-point.p4 { left: 58%; top: 40%; --dot: var(--bloom-pastel-blue); }
.bloom-loop-point.p5 { right: 2%; top: 27%; --dot: var(--bloom-pastel-green); }
.bloom-loop-point.p6 { right: 0;  top: 49%; --dot: var(--bloom-pastel-purple); }

/* 特許出願中の仕組み --------------------------------------------------------- */

.bloom-patent { background: var(--bloom-ground-warm); }

/*
 * 「特許出願中」のバッジ。bloom-base.css を書き直したときに落としていた。
 * 実測値: 背景 #173f45 / 白 / 11px / letter-spacing 1.32px / padding 9px 15px。
 */
.bloom-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 9px 15px;
  border-radius: var(--bloom-radius-pill);
  background: var(--bloom-ink-deep);
  color: var(--bloom-white);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
}

/* 先頭の黄色い点（参照 .v23-patent-badge::before）。 */
.bloom-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bloom-pastel-yellow);
  box-shadow: 0 0 0 5px rgba(232, 203, 103, .16);
}

.bloom-patent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.5rem;
}

.bloom-patent-actions a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid rgba(36, 75, 80, .12);
  border-radius: var(--bloom-radius-pill);
  background: var(--bloom-white);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

/*
 * 3行は <br> で決めている。text-wrap: balance は <br> の行をさらに均そうとして
 * 「を、／データで見る。」と4行にするので、この見出しだけ通常の折り方に戻す。
 */
.bloom-patent-heading {
  /* 参照は 1440px で3行。520px の列に「を、データで見る。」(9字) が入る大きさ。 */
  font-size: clamp(2.125rem, 3.8vw, 3.4rem);
  text-wrap: wrap;
}

.bloom-patent-actions a:hover { border-color: rgba(36, 75, 80, .3); }

.bloom-evidence { position: relative; }

/*
 * 5つの運用証拠が中心に集まる図（参照 .v23-evidence の構造そのまま）。
 * 花びら5枚は 40 秒で1周、逆回り（参照 .v59-evidence-rotor）。
 * --ev-k は狭い画面で図全体を縮める係数。
 */
.bloom-evidence-ring {
  --ev-k: 1;
  position: relative;
  aspect-ratio: 1;
  max-width: 570px;
  margin-inline: auto;
  isolation: isolate;
}

.bloom-evidence-track {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 88%;
  height: 88%;
  border: 2px solid rgba(114, 183, 142, .3);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(83, 184, 222, .055);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.bloom-evidence-track::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(83, 184, 222, .13);
  border-radius: 50%;
}

.bloom-evidence-node,
.bloom-evidence-arrow {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.bloom-evidence-node {
  --c: var(--bloom-pastel-green);
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 3px solid rgba(255, 255, 255, .96);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 3px 12px rgba(23, 63, 69, .12);
}

.bloom-evidence-node.n1 { --c: var(--bloom-pastel-coral);  top: 6%;    left: 50%; }
.bloom-evidence-node.n2 { --c: var(--bloom-pastel-blue);   top: 36.7%; left: 91.8%; }
.bloom-evidence-node.n3 { --c: var(--bloom-pastel-green);  top: 85.6%; left: 75.8%; }
.bloom-evidence-node.n4 { --c: var(--bloom-pastel-yellow); top: 85.6%; left: 24.2%; }
.bloom-evidence-node.n5 { --c: var(--bloom-pastel-purple); top: 36.7%; left: 8.2%; }

.bloom-evidence-arrow {
  display: grid;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  place-items: center;
  border: 1px solid rgba(114, 183, 142, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 5px 14px rgba(23, 63, 69, .055);
  color: #72b78e;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.bloom-evidence-arrow.a1 { top: 13%; left: 77%; transform: rotate(36deg); }
.bloom-evidence-arrow.a2 { top: 65%; left: 94%; transform: rotate(108deg); }
.bloom-evidence-arrow.a3 { top: 96%; left: 50%; transform: rotate(180deg); }
.bloom-evidence-arrow.a4 { top: 65%; left: 6%;  transform: rotate(252deg); }
.bloom-evidence-arrow.a5 { top: 13%; left: 23%; transform: rotate(324deg); }

.bloom-evidence-rotor {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform-origin: 50% 50%;
  animation: bloom-evidence-spin 40s linear infinite;
  pointer-events: none;
  will-change: transform;
}

@keyframes bloom-evidence-spin { to { transform: rotate(360deg); } }

.bloom-ev-petal {
  --petal: var(--bloom-pastel-blue);
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(265px * var(--ev-k));
  height: calc(112px * var(--ev-k));
  margin: calc(-56px * var(--ev-k)) 0 0 calc(-132px * var(--ev-k));
  border-radius: 72% 58% 72% 54%;
  background: color-mix(in srgb, var(--petal) 21%, transparent);
  transform-origin: 50% 50%;
}

.bloom-ev-petal.p1 { --petal: var(--bloom-pastel-coral);  transform: translateY(calc(-153px * var(--ev-k))) rotate(-90deg); }
.bloom-ev-petal.p2 { --petal: var(--bloom-pastel-blue);   transform: translate(calc(145px * var(--ev-k)), calc(-46px * var(--ev-k))) rotate(-18deg); }
.bloom-ev-petal.p3 { --petal: var(--bloom-pastel-green);  transform: translate(calc(92px * var(--ev-k)), calc(133px * var(--ev-k))) rotate(54deg); }
.bloom-ev-petal.p4 { --petal: var(--bloom-pastel-yellow); transform: translate(calc(-96px * var(--ev-k)), calc(135px * var(--ev-k))) rotate(126deg); }
.bloom-ev-petal.p5 { --petal: var(--bloom-pastel-purple); transform: translate(calc(-151px * var(--ev-k)), calc(-48px * var(--ev-k))) rotate(198deg); }

.bloom-evidence-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 7;
  display: grid;
  width: 180px;
  height: 180px;
  align-content: center;
  justify-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(114, 183, 142, .24);
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 18px 50px rgba(23, 63, 69, .075);
  color: var(--bloom-ink-deep);
  font-family: var(--bloom-font-hand);
  font-size: clamp(1.4rem, 2.2vw, 1.875rem);
  line-height: 1.3;
  text-align: center;
}

/* 6文字は円に収まらないので、意味の切れ目で折る。 */
.bloom-evidence-core b {
  display: block;
  font-weight: 400;
}

.bloom-evidence-core small {
  margin-top: .4rem;
  /* 実測 12px / 18.6px / rgb(102,128,134)。 */
  color: #668086;
  font-family: var(--bloom-font-body);
  font-size: 12px;
  line-height: 1.55;
}

.bloom-evidence-label {
  position: absolute;
  z-index: 8;
  padding: 9px 15px;
  border: 1px solid rgba(23, 63, 69, .07);
  border-radius: var(--bloom-radius-pill);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 24px rgba(23, 63, 69, .07);
  color: var(--bloom-ink-deep);
  /* 実測 16px / 20px / 字送り .01em / 中央寄せ。 */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* 中心のまわりに5つ、等間隔。 */
.bloom-evidence-label.l1 { top: 6%;  left: 50%; }
.bloom-evidence-label.l2 { top: 33%; left: 92%; }
.bloom-evidence-label.l3 { top: 79%; left: 76%; }
.bloom-evidence-label.l4 { top: 79%; left: 24%; }
.bloom-evidence-label.l5 { top: 33%; left: 8%; }

.bloom-evidence-caption {
  margin: 1rem 0 0;
  color: #51767b;
  font-family: var(--bloom-font-hand);
  /* 実測 25.6px（2vw）/ 37.12px。 */
  font-size: clamp(1.1875rem, 2vw, 1.75rem);
  line-height: 1.45;
  text-align: center;
}

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

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

  /* つるの図は座標が固定なので、狭い画面では図をやめて縦に並べる。 */
  .bloom-loop-visual { min-height: 0; }
  .bloom-loop-vine { display: none; }

  .bloom-loop-points {
    position: static;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bloom-loop-point {
    position: static;
    width: auto;
  }

  .bloom-loop-point.p5,
  .bloom-loop-point.p6 { right: auto; }

  .bloom-loop-point::before { top: .5em; }

  .bloom-evidence-ring { --ev-k: .6; max-width: 340px; }
  .bloom-evidence-core { width: 132px; height: 132px; }
  .bloom-evidence-label { font-size: 11px; padding: 7px 11px; }
}

/* ~600px ------------------------------------------------------------------- */

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

@media (prefers-reduced-motion: reduce) {
  .bloom-evidence-rotor { animation: none; will-change: auto; }
}

/* 歯科 LP への入口 ------------------------------------------------------------ */

/*
 * template-parts/bloom/shared/dental-entry.php。TOP と /service/ のカードの下に添える 1 行。
 * カードより一段静かに（地色は付けず、線と小さな文字だけ）。
 */
.bloom-dental-entry {
  display: grid;
  align-items: center;
  gap: 4px 22px;
  margin-top: 40px;
  padding: 18px 26px;
  border: 1px solid var(--bloom-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  color: var(--bloom-ink);
  grid-template-areas:
    "label title arrow"
    "label text  arrow";
  grid-template-columns: auto minmax(0, 1fr) auto;
  transition: border-color var(--bloom-motion) var(--bloom-ease);
}

.bloom-dental-entry:hover { border-color: rgba(85, 200, 191, .55); }

.bloom-dental-entry small {
  grid-area: label;
  padding: 6px 12px;
  border-radius: var(--bloom-radius-pill);
  background: rgba(85, 200, 191, .12);
  color: var(--bloom-deep);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.bloom-dental-entry strong {
  grid-area: title;
  color: var(--bloom-ink-deep);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.bloom-dental-entry span {
  grid-area: text;
  color: var(--bloom-muted);
  font-size: 13px;
  line-height: 1.7;
}

.bloom-dental-entry em {
  grid-area: arrow;
  color: var(--bloom-title);
  font-style: normal;
  font-size: 18px;
}

@media (max-width: 640px) {
  .bloom-dental-entry {
    padding: 16px 18px;
    grid-template-areas:
      "label arrow"
      "title title"
      "text  text";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .bloom-dental-entry small { justify-self: start; margin-bottom: 6px; }
}

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