/* ==========================================================================
   c-note-01 — 補足注記（小さな一言）
   電話番号の直後に添える「※ご予約はWEBからのみ」など、
   直前の要素の条件を示す短い注記。出力は akie_clinic_tel_note_html() から。
   色は inherit（載せる面の文字色に追従）。濃い背景の上でもそのまま使える。
   ========================================================================== */

.c-note-01 {
  display: block;
  margin-block-start: var(--space-4-xs);
  font-size: var(--font-size-3-xs);
  line-height: var(--line-height-sm);
  color: inherit;
  opacity: 0.85;
}

/* 番号や区分ラベルの右へ続けて置くとき。行を変えない。 */
.c-note-01--inline {
  display: inline;
  margin-block-start: 0;
  margin-inline-start: var(--space-2-xs);
  white-space: nowrap;
}

/* ボタンを並べた flex / grid の中に置くとき、注記だけで1行を占有させる。
   （flex-basis は grid で、grid-column は flex で無視されるため両方書く） */
.c-note-01--full {
  flex-basis: 100%;
  width: 100%;
  grid-column: 1 / -1;
  margin-block-start: calc(var(--space-2-xs) * -1);
  text-align: center;
}

/* リンクは下線付き。ブロックエディタの本文に置くときは
   `<a>` に class を付けられない（属性が落ちて検証エラーになる）ため、
   子孫セレクタでも同じ見た目にする。 */
.c-note-01__link,
.c-note-01 a {
  color: inherit;
  /* 置いた先（例: c-clinic-01__tel a）が大きな文字サイズを当てていても、
     注記の中のリンクだけは注記と同じ大きさに保つ。 */
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: var(--space-4-xs);
}

.c-note-01__link:hover,
.c-note-01 a:hover {
  opacity: 0.7;
}