/* =====================================================================
   バーチャル保健室 — 固有スタイル
   style.css の「後に」読み込む。トークン（--brand / --ink / --ease 等）は
   すべて style.css の :root を継承して使う。ここで再定義しない。
   ---------------------------------------------------------------------
   ■ 4層ルール（これを守らないと「サイトの中の別サイト」になる）
     ① 器   … ヘッダ/フッタ/ボタン/見出しタイポ = コーポレートと完全同一。触らない
     ② 室内 … 保健室セクションの地色・カード = クリーム系。彩度は低く
     ③ 絵   … イラスト（キャラ・ルーム俯瞰）= かわいさの主戦場。CSSではなく画像側
     ④ 話し言葉 … 吹き出し・こども向け注記だけ Zen Maru Gothic
   禁じ手: ボタンをパステルにする / 見出しを丸ゴシックにする / 全面クリーム

   ■ 見取り図の設計方針
     ホットスポットは「雰囲気とナビ」であって唯一の導線にしない。
     各ゾーンのパネルは常時表示で下に積んであり、ホットスポットはそこへの
     アンカーリンクにすぎない。だから絵が読めない人（スクリーンリーダー・
     高齢者・低速回線）でも、スクロールすれば同じ内容にたどり着く。
     ※パネル自体は JS が JSON から描く。JS 無効時は hokenshitsu.html の
       <noscript> が店舗への導線を出す。
   ===================================================================== */

:root {
  /* ② 室内の層でだけ使う色。①の器には絶対に使わない */
  --hk-cream:     #fbf8f3;   /* 保健室の地色 */
  --hk-cream-2:   #f5efe6;   /* カード/帯のわずかな段差 */
  --hk-line:      #e8ded0;   /* 暖色系のヘアライン */
  --hk-sky:       #a9cbee;   /* ③の絵と揃える淡い空色 */
  --hk-apricot:   #f2b49a;   /* アクセント。面積は小さく保つ */
  --hk-radius:    20px;      /* 保健室内のカードだけ 18px → 20px にゆるめる */
  --font-round:   "Zen Maru Gothic", var(--font-jp);  /* ④の層専用 */
}

/* ---------- ② 室内の層 ----------------------------------------------- */
.bg-hk { background: var(--hk-cream); }
.bg-hk .card,
.bg-hk .hk-card {
  background: #fff;
  border-color: var(--hk-line);
  border-radius: var(--hk-radius);
  box-shadow: 0 10px 30px -22px rgba(124, 45, 18, .30);
}

/* ---------- ④ 話し言葉の層 -------------------------------------------
   丸ゴシックはここだけ。見出し・本文・ボタンには絶対に使わない。 */
.hk-speech,
.hk-kids {
  font-family: var(--font-round);
  font-weight: 500;
  line-height: 1.9;
}

/* =====================================================================
   見取り図（ステージ）
   ===================================================================== */
.hk-stage {
  position: relative;
  aspect-ratio: 16 / 9;             /* %座標が常に絵と一致する箱 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--hk-cream-2);
  box-shadow: var(--shadow);
  border: 1px solid var(--hk-line);
}
.hk-stage__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ホットスポット。親が % 基準なのでレスポンシブでも座標がズレない */
.hk-hot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;                 /* iOS のタップ最小サイズ */
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
  color: var(--brand-deep);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.hk-hot:hover,
.hk-hot:focus-visible {
  transform: translate(-50%, -50%) scale(1.07);
  background: #fff;
  box-shadow: var(--shadow);
}
.hk-hot__dot {
  position: relative;                /* ::after の基準。無いとリングが親の隅に飛ぶ */
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand); flex: 0 0 auto;
}
.hk-hot__dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
  animation: hk-ping 2.4s var(--ease) infinite;
}
@keyframes hk-ping {
  0%   { transform: scale(1);   opacity: .9; }
  70%  { transform: scale(2.6); opacity: 0;  }
  100% { transform: scale(2.6); opacity: 0;  }
}
.hk-stage__caption {
  margin-top: 14px;
  text-align: center;
  color: var(--text-mute);
  font-size: .84rem;
}

/* SP：見取り図は雰囲気だけ担わせ、操作はチップ列に一本化する。
   overflow-x を使うのはこのチップ列だけ（幅の狭い帯）。ページ全体の
   縦スクロールと奪い合わないので body{overflow-x:hidden} と喧嘩しない。 */
.hk-chips { display: none; }
@media (max-width: 720px) {
  .hk-stage { aspect-ratio: 4 / 3; }
  .hk-hot   { display: none; }
  .hk-chips {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-bottom: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hk-chips::-webkit-scrollbar { display: none; }
  .hk-chip {
    scroll-snap-align: start;
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 100px;
    border: 1px solid var(--line-2);
    background: #fff;
    color: var(--brand-deep);
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
  }
}

/* =====================================================================
   ゾーンのパネル（常時表示。ホットスポットのスクロール先）
   ===================================================================== */
.hk-panel { scroll-margin-top: calc(var(--header-h) + 24px); }
.hk-panel__head { max-width: 62ch; }
.hk-panel__label {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px; border-radius: 100px;
  background: var(--bg-tint); color: var(--brand-deep);
  font-family: var(--font-en); font-size: .72rem;
  font-weight: 700; letter-spacing: .12em;
}
.hk-panel h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--ink); line-height: 1.4; }
.hk-panel__lead { margin-top: 14px; color: var(--text-soft); line-height: 2; }

/* 入口の3ステップ */
.hk-steps { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 721px) { .hk-steps { grid-template-columns: repeat(3, 1fr); } }
.hk-step {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: var(--hk-radius);
  background: #fff; border: 1px solid var(--hk-line);
}
.hk-step__n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-family: var(--font-en); font-size: .82rem; font-weight: 700;
}

/* 店舗カードのタグ */
.hk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hk-tag {
  padding: 4px 12px; border-radius: 100px;
  background: var(--bg-tint); color: var(--brand-deep);
  font-size: .74rem; font-weight: 600;
}

/* CTA。.btn-row は .cta-band / .hero の中でしか flex にならないので独自に持つ */
.hk-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* 準備中の印（P2〜P4 で中身が入ったら消す） */
.hk-todo {
  margin-top: 22px; padding: 16px 20px;
  border: 1px dashed var(--line-2); border-radius: var(--hk-radius);
  color: var(--text-mute); font-size: .86rem;
}

/* =====================================================================
   バッジ（共通）
   ===================================================================== */
.hk-badge {
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: 100px;
  font-size: .72rem; font-weight: 700; line-height: 1.5;
}
.hk-badge.is-cat    { background: var(--bg-tint);  color: var(--brand-deep); }
.hk-badge.is-type   { background: #e7f7f4;         color: #0a6f6c; }
.hk-badge.is-draft  { background: #fff7ed;         color: #9a3412; }
.hk-badge.is-sample { background: #fef2f2;         color: #9f1239; }

/* 注意書き（法定掲示との切り分けなど） */
.hk-caveat {
  margin-top: 20px; padding: 14px 18px;
  border-left: 3px solid var(--line-2); border-radius: 0 10px 10px 0;
  background: var(--bg-alt);
  color: var(--text-mute); font-size: .84rem; line-height: 1.9;
}

/* =====================================================================
   健康だよりコーナー（記事）
   開閉は <details>。JS を書かずに済み、キーボード・SR でも動く。
   ===================================================================== */
.hk-articles { display: grid; gap: 16px; margin-top: 28px; }
.hk-article {
  border: 1px solid var(--hk-line); border-radius: var(--hk-radius);
  background: #fff; overflow: hidden;
  transition: box-shadow .35s var(--ease), border-color .35s;
}
.hk-article[open],
.hk-article:hover { box-shadow: 0 14px 36px -26px rgba(124,45,18,.4); border-color: var(--line-2); }
.hk-article__sum {
  list-style: none; cursor: pointer;
  padding: 22px 24px; position: relative; padding-right: 60px;
}
.hk-article__sum::-webkit-details-marker { display: none; }
.hk-article__sum::after {
  content: ""; position: absolute; right: 24px; top: 28px;
  width: 11px; height: 11px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform .35s var(--ease);
}
.hk-article[open] .hk-article__sum::after { transform: rotate(-135deg); }
.hk-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.hk-article__date { font-family: var(--font-en); font-size: .78rem; color: var(--text-mute); }
.hk-article__sum h3 { font-size: 1.14rem; color: var(--ink); line-height: 1.55; }
.hk-article__sm { margin-top: 8px; color: var(--text-soft); font-size: .9rem; }
.hk-article__body { padding: 4px 24px 26px; border-top: 1px solid var(--hk-line); }
.hk-article__body > * { max-width: 68ch; }
.hk-article__body h2,
.hk-article__body h3 {
  font-size: 1.02rem; color: var(--ink); margin: 26px 0 10px;
  padding-left: 12px; border-left: 3px solid var(--brand);
}
.hk-article__body p  { margin: 12px 0; color: var(--text-soft); line-height: 2.05; }
/* style.css:91 で ul{list-style:none} が効いているので、記事本文だけ戻す */
.hk-article__body ul { margin: 12px 0 12px 1.3em; color: var(--text-soft); line-height: 2.05; list-style: disc; }
.hk-article__body li { margin: 4px 0; }
.hk-article__body li::marker { color: var(--brand); }
.hk-article__body strong,
.hk-article__body b { color: var(--ink); }

/* =====================================================================
   お知らせ掲示板（コルクボード風）
   健康だよりとは見た目のトーンを変え、別の掲示板だと一目でわかるようにする
   ===================================================================== */
.hk-board {
  display: grid; gap: 14px; margin-top: 28px;
  padding: 22px; border-radius: var(--hk-radius);
  background: #f7f0e4; border: 1px solid #e4d3ba;
}
.hk-note {
  background: #fffdf7; border: 1px solid #ece0cc;
  border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 6px 18px -14px rgba(124,45,18,.5);
}
.hk-note__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.hk-note__store { font-size: .82rem; font-weight: 700; color: var(--ink); }
.hk-note__date  { font-family: var(--font-en); font-size: .78rem; color: var(--text-mute); margin-left: auto; }
.hk-note h3 { font-size: 1.02rem; color: var(--ink); line-height: 1.6; }
.hk-note__body p { margin-top: 8px; color: var(--text-soft); font-size: .88rem; line-height: 1.95; }

/* =====================================================================
   市販薬の棚（ダミー）
   「売っているように見せない」ための注意帯を、棚の直前に必ず出す
   ===================================================================== */
.hk-shelf__notice {
  margin-top: 26px; padding: 14px 18px;
  border: 1px solid #fecaca; border-radius: 12px;
  background: #fef2f2; color: #9f1239;
  font-size: .86rem; font-weight: 600; line-height: 1.9;
}
.hk-shelfrow { margin-top: 34px; }
.hk-shelfrow__label {
  font-size: 1rem; color: var(--ink); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 2px solid var(--hk-line);
}
/* align-items:start がないと、1枚開いたときに同じ行の他カードまで一緒に伸びる */
.hk-goods { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); align-items: start; }
@media (max-width: 1080px) { .hk-goods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .hk-goods { grid-template-columns: 1fr; } }

.hk-good {
  border: 1px solid var(--hk-line); border-radius: 14px;
  background: #fff; overflow: hidden;
}
.hk-good__sum {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
}
.hk-good__sum::-webkit-details-marker { display: none; }
/* 文字を一切入れない無地の箱。実物のパッケージを模さない */
.hk-good__box {
  flex: 0 0 auto; width: 46px; height: 58px; border-radius: 6px;
  background: linear-gradient(160deg, var(--hk-sky) 0%, #cfe0f2 100%);
  border: 1px solid #b9cfe4;
  position: relative;
}
.hk-good__box::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: 16px; height: 8px;
  border-radius: 4px; background: rgba(255,255,255,.75);
}
.hk-good__txt   { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hk-good__name  { font-size: .92rem; font-weight: 700; color: var(--ink); }
.hk-good__var   { font-size: .78rem; color: var(--text-mute); }
.hk-good__price { font-size: .78rem; color: var(--text-mute); }
.hk-good__note {
  padding: 0 16px 16px; border-top: 1px solid var(--hk-line); padding-top: 14px;
}
.hk-good__note p { color: var(--text-soft); font-size: .84rem; line-height: 1.9; margin-bottom: 12px; }
.hk-good__note .btn { font-size: .8rem; padding: 10px 16px; }

/* =====================================================================
   相談カウンター（チャット）
   ===================================================================== */
.hk-chat {
  margin-top: 28px; border: 1px solid var(--hk-line);
  border-radius: var(--hk-radius); background: #fff; overflow: hidden;
}
/* 免責はチャット枠の上端に固定。スクロールしても消えない */
.hk-chat__disclaimer {
  margin: 0; padding: 12px 18px;
  background: var(--bg-tint); border-bottom: 1px solid var(--line);
  color: var(--brand-deep); font-size: .78rem; line-height: 1.8;
}
.hk-chat__log {
  padding: 20px 18px; max-height: 460px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--hk-cream);
}
/* 吹き出しとCTAは縦積み。横並び flex のままだとCTAが吹き出しの右に出てしまう */
.hk-msg { display: flex; flex-direction: column; align-items: flex-start; }
.hk-msg.is-me { align-items: flex-end; }
.hk-msg__body {
  max-width: 82%; padding: 13px 17px; border-radius: 16px;
  font-size: .92rem; line-height: 1.95;
}
.hk-msg.is-bot .hk-msg__body {
  background: #fff; border: 1px solid var(--hk-line);
  border-bottom-left-radius: 5px; color: var(--text);
}
.hk-msg.is-me .hk-msg__body {
  background: var(--brand); color: #fff; border-bottom-right-radius: 5px;
}
.hk-msg__body p + p { margin-top: 10px; }
/* 緊急案内の番号。タップで発信できることが見て分かるようにする */
.hk-tel {
  display: inline-block; padding: 1px 8px; margin: 0 1px;
  border-radius: 6px; background: var(--bg-tint);
  color: var(--brand-deep); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid rgba(37, 99, 235, .35);
}
.hk-tel:hover, .hk-tel:focus-visible { background: var(--brand); color: #fff; }
.hk-msg__body strong { font-weight: 700; }
.hk-msg.is-bot .hk-msg__body strong { color: var(--brand-deep); }
.hk-msg__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.hk-msg__cta .btn { font-size: .8rem; padding: 10px 16px; }
.hk-msg__note {
  margin-top: 10px; padding-left: 2px;
  color: var(--text-mute); font-size: .76rem; line-height: 1.8; max-width: 44ch;
}

/* 店舗カードの電話リンク。「薬剤師へ」の案内が行き止まりにならないための実体 */
.hk-store h3 a { color: var(--ink); text-decoration: none; }
.hk-store h3 a:hover { color: var(--brand); }
/* 営業時間は複数行（曜日ごと＋休業日）。1行に詰めず、行のまま読ませる */
.hk-store__addr  { font-size: .86rem; color: var(--text-soft); margin-top: 6px; }
.hk-store__hours { font-size: .82rem; color: var(--text-mute); margin-top: 6px; line-height: 1.75; }
.hk-store__hours p { margin: 0; }
.hk-store__closed { margin-top: 3px; color: var(--text-soft); font-weight: 600; }
.hk-store__tel {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 9px 15px; border-radius: 100px;
  background: var(--bg-tint); color: var(--brand-deep);
  font-family: var(--font-en); font-size: .9rem; font-weight: 700;
  text-decoration: none; letter-spacing: .01em;
  transition: background .3s, color .3s;
}
.hk-store__tel::before { content: "☎"; font-family: var(--font-jp); font-size: .95rem; }
.hk-store__tel:hover { background: var(--brand); color: #fff; }

/* 入力中のインジケータ */
.hk-msg--typing .hk-msg__body { display: flex; gap: 5px; padding: 16px 18px; }
.hk-msg--typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-2);
  animation: hk-dot 1.3s var(--ease) infinite;
}
.hk-msg--typing span:nth-child(2) { animation-delay: .16s; }
.hk-msg--typing span:nth-child(3) { animation-delay: .32s; }
@keyframes hk-dot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-4px); }
}

.hk-chat__starters {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 18px 0; background: #fff;
}
.hk-starter {
  min-height: 40px; padding: 0 14px; border-radius: 100px;
  border: 1px solid var(--line-2); background: #fff;
  color: var(--brand-deep); font-family: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.hk-starter:hover { background: var(--bg-tint); border-color: var(--brand); transform: translateY(-2px); }

.hk-chat__form { display: flex; gap: 10px; padding: 16px 18px; background: #fff; }
.hk-chat__input {
  flex: 1 1 auto; min-width: 0; min-height: 46px;
  padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--line-2); background: #fff;
  font-family: inherit; font-size: 16px; color: var(--text);   /* iOSの自動ズーム回避のため16px未満にしない */
}
.hk-chat__input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.hk-chat__send { flex: 0 0 auto; }
.hk-chat__privacy {
  margin: 0; padding: 0 18px 10px; background: #fff;
  color: var(--text-mute); font-size: .78rem; line-height: 1.8;
}

/* データの取り扱い（開閉式の明文） */
.hk-datapolicy { background: #fff; padding: 0 18px 18px; }
.hk-datapolicy summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--brand-deep); font-size: .78rem; font-weight: 700;
}
.hk-datapolicy summary::-webkit-details-marker { display: none; }
.hk-datapolicy summary::before {
  content: ""; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .3s var(--ease);
}
.hk-datapolicy[open] summary::before { transform: rotate(45deg); }
.hk-datapolicy ul {
  margin: 10px 0 0; padding: 14px 16px 14px 32px;
  background: var(--bg-alt); border-radius: 12px;
  list-style: disc;
}
.hk-datapolicy li {
  color: var(--text-soft); font-size: .8rem; line-height: 1.9; margin: 6px 0;
}
.hk-datapolicy li::marker { color: var(--brand); }
@media (max-width: 620px) {
  .hk-msg__body { max-width: 92%; }
  .hk-chat__log { max-height: 60vh; }
}

/* =====================================================================
   アバター
   ===================================================================== */
/* 背景は透過にしていない（案2は白背景で、薬剤師が白い上衣を着ているため、
   白を抜くと制服まで消える）。角丸の枠に収めて「小さな肖像カード」として見せる。 */
.hk-avatar {
  position: relative; aspect-ratio: 3 / 4; width: min(320px, 45vw);
  border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid var(--hk-line);
}
.hk-avatar__layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%;   /* 顔を上寄りに置いて見切れを防ぐ */
  opacity: 0; transition: opacity .28s var(--ease);
}
.hk-avatar__layer.is-on { opacity: 1; }

/* チャット欄のアバター。小さく表示されるので、腰上の絵をそのまま入れると顔が読めない。
   正方形＋上寄せで頭と肩だけを見せる（画像は上部に頭がある構図で生成してある）。 */
.hk-avatar--chat {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  border-color: var(--line-2);
}
.hk-avatar--chat .hk-avatar__layer { object-position: 50% 0%; }
.hk-avatar-slot { flex: 0 0 auto; width: 54px; }
@media (max-width: 620px) { .hk-avatar-slot { width: 42px; } }
.hk-msg__row { display: flex; align-items: flex-end; gap: 10px; width: 100%; }
.hk-msg__row .hk-msg__body { max-width: none; flex: 0 1 auto; }

/* 入口のキャラクター紹介
   ⚠ 88px まで縮めたら細線が灰色に溶けて「荒い・ぼやける」状態になった。
      案2は細線画なので、これ以上小さくしないこと。画像側も360pxに
      シャープネスをかけて用意してある。 */
.hk-cast { display: grid; gap: 16px; margin-top: 30px; }
@media (min-width: 721px) { .hk-cast { grid-template-columns: repeat(2, 1fr); } }
.hk-cast__item {
  display: flex; gap: 18px; align-items: center;
  padding: 20px 22px; border-radius: var(--hk-radius);
  background: #fff; border: 1px solid var(--hk-line);
}
.hk-cast .hk-avatar--cast { width: 150px; flex: 0 0 auto; }
@media (max-width: 480px) { .hk-cast .hk-avatar--cast { width: 118px; } }
.hk-cast__txt h3 { font-size: 1.06rem; color: var(--ink); }
.hk-cast__role { font-size: .8rem; color: var(--brand-deep); font-weight: 700; margin-top: 2px; }
.hk-cast__note { font-size: .78rem; color: var(--text-mute); line-height: 1.8; margin-top: 8px; }

.hk-avatar--float { animation: hk-float 5.2s var(--ease) infinite; }
@keyframes hk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hk-avatar--float { animation: none; }
  .hk-hot__dot::after { animation: none; }
  /* style.css:72 の html{scroll-behavior:smooth} が残っていると、
     ホットスポットを押すたびに画面が流れる。保健室は見取り図から各ゾーンへ
     何度も飛ぶページなので、動きを減らしたい人には一番効く箇所。 */
  html { scroll-behavior: auto; }
}

/* 準備中の告知（市販薬の棚など）。中身が無いことを隠さず、
   それでも寂しく見えないように印だけ添える。 */
.hk-coming { text-align: center; padding: 34px 24px; }
.hk-coming__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 14px;
  border-radius: 100px;
  background: var(--bg-tint);
  color: var(--brand-deep);
  font-family: var(--font-en);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.hk-coming__title {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 1.15rem;
}
.hk-coming p { max-width: 46ch; margin-inline: auto; line-height: 1.95; }
.hk-coming p + p { margin-top: 12px; }