@charset "utf-8";

/* ==========================================================================
   components.css ─ 全ページ共通パーツ
   base.css → layout.css の後に読み込むこと。
   --------------------------------------------------------------------------
   収録モジュール
     1. Section     .sec           セクションの外枠と背景
     2. SectionHead .sec-head      バッジ＋見出し＋リード
     3. Badge       .badge         セクションラベル
     4. Button      .btn           CTA
     5. Card        .card          白カード
     6. IconCircle  .icon-circle   カード上部の丸アイコン
     7. List        .list-dot / .list-check
     8. Alert       .alert         注意喚起ボックス
   --------------------------------------------------------------------------
   ■ セマンティック色（safe / caution / urgent / emergency / info）は
     「受診の緊急度」を表す。装飾目的で使い回さないこと。
   ■ 面用の色を文字に使わないこと。文字には -text 付きの変数を使う。
   ========================================================================== */


/* ==========================================================================
   1. Section
   ========================================================================== */
.sec {
  padding: var(--sec-pad) 0;
  position: relative;
}

/* クリーム地は全面ドット。ブランドのピンクを薄く敷いて、
   広い面が単調にならないようにする。
     --dot-size  … ドットの直径
     --dot-gap   … 間隔（小さいほど密）
     --dot-color … 色（薄くすること。濃いと本文がざらついて見える） */
.sec--cream {
  --dot-size: 1.2px;
  --dot-gap: 13px;
  --dot-color: rgba(232, 130, 154, .14);

  background-color: var(--cream);
  background-image: radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
}

.sec--mint {
  background: var(--mint-light);
}

.sec--pink {
  background: var(--pink-light);
}


/* 同色のセクションが続くときに余白が二重にならないように */
.sec--cream + .sec--cream,
.sec--mint + .sec--mint {
  padding-top: 0;
}

/* 見出し（.sec-head）を持たないセクション用。
   バッジも見出し文もない帯に通常の余白を与えると、
   中身より余白のほうが厚くなって、置いてあるだけに見える */
.sec--tight {
  --sec-pad: clamp(32px, 4vw, 52px);
}


/* ==========================================================================
   2. Section Head（バッジ＋見出し＋リード）
   --------------------------------------------------------------------------
   バッジがある場合はバッジが主役、見出しは補足サイズになる。
   バッジを置かないセクションは .sec-head--solo を付け、見出しを主役にする。
   ========================================================================== */
.sec-head {
  text-align: center;
  margin-bottom: clamp(32px, 4.5vw, 56px);
}

/* セクションラベルとしてのバッジ。カード内の .badge には影響しない */
.sec-head .badge {
  padding: 8px 30px;
  font-size: clamp(0.9375rem, 2vw, 1.25rem);
  letter-spacing: .1em;
  line-height: 1.6;
}

.sec-head__ttl {
  font-size: clamp(1.0625rem, 2.2vw, 1.5625rem);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  letter-spacing: .04em;
  margin-top: 16px;
}

/* バッジを持たないセクション。見出しが主役に戻る */
.sec-head--solo .sec-head__ttl {
  font-size: clamp(1.5rem, 3.6vw, 2.375rem);
  line-height: 1.45;
  letter-spacing: .05em;
  margin-top: 0;
}

/* 見出しの一部を色替えする。<em> は装飾用途なので font-style を戻す */
.sec-head__ttl em {
  font-style: normal;
  color: var(--pink-text);
}

/* --------------------------------------------------------------------------
   見出しの行内に置く小さなイラスト。
   使い方： <h2 class="sec-head__ttl">
              <span class="sec-head__fig use-badge-topic"></span>発熱は何度から？
            </h2>
   ※ テキストと一緒に折り返すので、SPでも消えない
   -------------------------------------------------------------------------- */
.sec-head__fig {
  display: inline-block;
  vertical-align: -.3em;
  width: clamp(36px, 4.4vw, 58px);
  aspect-ratio: 1 / 1;
  margin-right: .35em;
  background: var(--il) center / contain no-repeat;
}

/* --solo（バッジなし）では見出しが大きいので、イラストも合わせて大きく */
.sec-head--solo .sec-head__fig {
  width: clamp(46px, 5.6vw, 76px);
}

/* --------------------------------------------------------------------------
   見出しの「上」に置く版（第27回・アレルギー科）
   使い方： <h2 class="sec-head__ttl">
              <span class="sec-head__fig sec-head__fig--block use-care-meal"></span>食物アレルギー
            </h2>
   ▼ 行内版は見出しが1行のときに収まりが良いが、
     見出しが長いページでは、イラストと文字が同じ行に並ぶと
     折り返し位置が読みにくくなる。上に置く版はその回避
   ▼ .sec-head は text-align: center なので、margin: auto で中央にそろう
   -------------------------------------------------------------------------- */
.sec-head__fig--block {
  display: block;
  width: clamp(64px, 7vw, 92px);
  margin: 0 auto .35em;
  vertical-align: baseline;
}

.sec-head__ttl em.is-safe      { color: var(--safe-text); }
.sec-head__ttl em.is-caution   { color: var(--caution-text); }
.sec-head__ttl em.is-urgent    { color: var(--urgent-text); }
.sec-head__ttl em.is-emergency { color: var(--emergency-text); }
.sec-head__ttl em.is-info      { color: var(--info-text); }
.sec-head__ttl em.is-mint      { color: var(--mint-text); }

/* リード文は本文なので左揃え。バッジと見出しは中央のまま。
   width: fit-content により、
   ・長いリードは 46em で折り返し、左揃えのブロックが中央に置かれる
   ・1行で収まる短いリードは文字幅まで縮むので、中央に見える
   .wrap（最大1120px）いっぱいに伸びて1行が長くなるのを防ぐ */
.sec-head__lead {
  margin-top: 18px;
  font-size: var(--fs-lead);
  line-height: 2;
  color: var(--text);
  text-align: left;
  width: fit-content;
  max-width: 46em;
  margin-inline: auto;
}

.sec-head--left {
  text-align: left;
}


/* ==========================================================================
   3. Badge（セクションラベル）
   ========================================================================== */
.badge {
  display: inline-block;
  padding: 5px 20px;
  border-radius: var(--r-pill);
  background: var(--pink);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   バッジの中に置く小さなイラスト。
   使い方： <span class="badge badge--info">
              <span class="badge__fig use-badge-topic"></span>発熱の目安
            </span>
   ※ 幅は em 指定なので、バッジの文字サイズに追従して拡縮する
   -------------------------------------------------------------------------- */
.badge__fig {
  display: inline-block;
  vertical-align: -.42em;
  width: 1.55em;
  aspect-ratio: 1 / 1;
  margin-right: .34em;
  margin-left: -.34em;                    /* 左右の余白を見た目で揃える */
  background: var(--il) center / contain no-repeat;
}

.badge--safe      { background: var(--safe); }
.badge--caution   { background: var(--caution); }
.badge--urgent    { background: var(--urgent); }
.badge--emergency { background: var(--emergency); }
.badge--info      { background: var(--info); }
.badge--mint      { background: var(--mint); }

/* 淡色版。カード内の小さいラベルに使う */
.badge--soft {
  background: var(--pink-light);
  color: var(--pink-text);
}

.badge--soft.badge--safe      { background: var(--safe-light);      color: var(--safe-text); }
.badge--soft.badge--caution   { background: var(--caution-light);   color: var(--caution-text); }
.badge--soft.badge--urgent    { background: var(--urgent-light);    color: var(--urgent-text); }
.badge--soft.badge--emergency { background: var(--emergency-light); color: var(--emergency-text); }
.badge--soft.badge--info      { background: var(--info-light);      color: var(--info-text); }
.badge--soft.badge--mint      { background: var(--mint-light);      color: var(--mint-text); }


/* ==========================================================================
   4. Button
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 34px;
  border: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--pink), var(--pink-dark));
  color: var(--white);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  line-height: 1.5;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(232, 130, 154, .32);
}

.btn::after {
  content: "→";
  font-size: 0.8125rem;
}


/* --- 色バリエーション --- */
.btn--mint {
  background: linear-gradient(135deg, var(--mint), #63BCAD);
  box-shadow: 0 4px 14px rgba(126, 206, 193, .35);
}

.btn--info {
  background: linear-gradient(135deg, var(--info), #3690CB);
  box-shadow: 0 4px 14px rgba(78, 167, 223, .35);
}

/* 白背景に枠線だけ。副次的な導線に使う */
.btn--outline {
  background: var(--white);
  color: var(--pink-text);
  border: 1.5px solid var(--pink);
  box-shadow: none;
}

/* 無彩色の枠線ボタン。予約（ピンク）と並べるときに使う。
   副ボタンに色を持たせると視線が分散し、主要な導線が分かりにくくなるため、
   色を持つのは主ボタンだけにする。

   ■ 枠線は --line（#EADFD7）ではなく --line-strong（#C0AEA0）。
     クリーム地（#FFFBF7）と白い面（#FFFFFF）のコントラストは 1.03:1 で、
     面では区別できない。輪郭線だけが頼りなのに、
     --line ではクリーム地に対して 1.27:1 しかなく、ボタンが溶けていた。
     --line-strong で 2.08:1。
   ■ 無彩色のままでは、どこまで濃くしても 3:1（非テキストの基準）に届かない。
     #A89486 で 2.81:1 だが、そこまで濃くするとサイトのトーンから外れる。
     線だけで解決しようとせず、影と組み合わせている。
   ■ 影は --shadow-sm（.card と同じ）。新しい値は増やさない。
   ■ 色は持たせないこと。ピンクにすると視認性は上がるが、
     隣に並ぶ主ボタン（来院予約）と同じ強さで競り合ってしまう。 */
.btn--outline-plain {
  background: var(--white);
  color: var(--text);
  border: 1.5px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}

/* 電話ボタン。tel: リンクのボタンには必ず付ける。

   ■ 矢印（→）は「次のページへ進む」記号なので、発信するボタンには出さない。
     付いているとリンク先があるように見える。
   ■ ラベルが電話番号だけのときは、番号の前に受話器（.btn__fig）を置く。
     「電話する」「お電話でご連絡ください」のように文言で分かる場合は置かない。

     <a href="tel:0667653650" class="btn btn--outline-plain btn--tel">
       <span class="btn__fig use-tel"></span>06-6765-3650
     </a> */
.btn--tel::after {
  content: none;
}

/* イラスト版（水彩・色付き）。

   ■ 受話器を置くのは、ラベルが電話番号だけのボタン。
     「#8000 に電話する」「お電話でご連絡ください」のように
     文言で電話だと分かるボタンには置かない。同じことを2回言うことになる。

     ▼ 現在このサイトでは未使用（06-6765-3650 はボタンをやめて本文に置いたため）。
       診療時間・アクセスのページで代表番号を出すときに使える。

   ■ 置けるのは白い面のボタンだけ。
     受話器のイラストがピンクなので、ピンクの塗りボタン（.btn）に置くと
     完全に同化して消える。

   ■ 1.15em ではなく 1.75em なのは、水彩の絵柄が小さいと潰れるため。
     単色アイコンは細くても形が残るが、イラストはそうならない。
   ■ 上下の負マージンは、絵柄のぶんボタンが高くならないようにするもの */
.btn__fig {
  flex: none;
  width: 1.75em;
  height: 1.75em;
  margin: -.4em 0;
  background: var(--il) center / contain no-repeat;
}


/* --- サイズ --- */
.btn--lg {
  padding: 18px 44px;
  font-size: 1.03125rem;
}

.btn--sm {
  padding: 11px 24px;
  font-size: 0.84375rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* 矢印を出さない（アイコン付きボタンなど） */
.btn--noarrow::after {
  content: none;
}

/* ボタンを横並びにする器 */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* 幅を揃える版。文字数が違うボタンを並べるときに使う */
.btn-row--even {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 300px));
  gap: 14px;
  justify-content: flex-start;
}

.btn-row--even .btn {
  width: 100%;
  padding-inline: 16px;
}

/* ボタンが1つだけのときに中央へ置く版 */
.btn-row--center {
  justify-content: center;
}

@media (max-width: 480px) {
  .btn-row {
    flex-direction: column;
  }

  .btn-row .btn {
    width: 100%;
  }
}


/* ==========================================================================
   4-2. Fee（自費料金の表示）
   検査・処置などの自費料金を並べる。金額はピンク文字（--pink-text）。
   面用の --pink は文字に使わない。
   ========================================================================== */
.fee-list {
  display: grid;
  gap: 12px;
}

.fee-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 24px;
  background: var(--white);
  border-radius: var(--r-md);
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.6vw, 30px);
  box-shadow: var(--shadow-sm);
}

.fee-row__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.7;
}

.fee-row__price {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  color: var(--pink-text);
  white-space: nowrap;
}

/* 「（税込）」は金額そのものではないので、一段落として添える */
.fee-row__tax {
  font-size: var(--fs-note);
  font-weight: var(--fw-medium);
  margin-left: 2px;
}

@media (max-width: 560px) {
  .fee-row {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   4-3. Note List（1つのブロックに複数の注意事項を並べる）
   --------------------------------------------------------------------------
   カードを分けずに区切り線でまとめる。項目どうしの関係が近く、
   ひとかたまりとして読ませたいときに使う（例：お薬についての注意）。

   イラストを添える場合は、ブロックの中ではなく
   見出しの直下に .sec-fig で置く。各行の本文の左端が揃う。
   ========================================================================== */
.note-list {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 0 clamp(22px, 3vw, 38px);
}

/* カードの中に入れるときは、面を持たない。
   白の上に白を重ねると、影だけが見えて枠が二重になる */
.card .note-list {
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.note-row {
  padding: clamp(26px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--line);
}

.note-row:last-child {
  border-bottom: 0;
}

/* 見出しの色は変えず、印だけを足す。
   セマンティック色（緑・オレンジ・紫・赤）は受診の緊急度に予約されているため、
   見出しに使うと「このセクションは夜間受診レベル」という誤読の余地が出る。
   ブランド色のピンクを面（--pink）で置き、文字は --heading のままにしている。 */
.note-row__ttl {
  position: relative;
  padding-left: 20px;
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

.note-row__ttl::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--pink);
}

/* --------------------------------------------------------------------------
   番号付きの手順として使う版。
   順番に実行することに意味がある手順（けいれん時の対応など）に限って使う。
   並列の注意事項には使わない（番号が優先順位に見えてしまうため）。

     <div class="note-list note-list--step">
       <div class="note-row"><h3 class="note-row__ttl">安全な場所に寝かせる</h3> … </div>
     </div>

   ピンクの角丸を、番号入りの丸に置き換える。
   -------------------------------------------------------------------------- */
.note-list--step {
  counter-reset: step;
}

.note-list--step .note-row {
  counter-increment: step;
}

.note-list--step .note-row__ttl {
  padding-left: 40px;
}

.note-list--step .note-row__ttl::before {
  content: counter(step);
  top: .04em;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  line-height: 28px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   セクション見出しの下に置く単独のイラスト。
   使い方： <span class="sec-fig use-care-medicine"></span>
   ※ 装飾。情報はテキストで伝えること
   -------------------------------------------------------------------------- */
.sec-fig {
  display: block;
  width: clamp(120px, 15vw, 190px);
  aspect-ratio: 1 / 1;
  margin: 0 auto clamp(22px, 2.6vw, 32px);
  background: var(--il) center / contain no-repeat;
}

/* 見出しの直後に置く場合、.sec-head の下余白（最大56px）が効いて空きすぎる。
   イラストは見出しに属する装飾なので、間隔を詰めて一体に見せる */
.sec-head + .sec-fig {
  margin-top: calc(-1 * clamp(18px, 2.6vw, 34px));
}


/* ==========================================================================
   Section 背景のルール
   --------------------------------------------------------------------------
   ■ 基本セクションの背景は固定する。ページごとに変えない。

     導入                    .sec                白
     まず確認すること        .sec .sec--cream    クリーム
     受診の目安（＋119番）   .sec .sec--mint     ミント
     おうちでのケア          .sec                白
     受診の準備              .sec .sec--cream    クリーム
     よくある質問            .sec                白
     受診導線                .sec .sec--cream    クリーム
     関連するページ          .sec                白

   ■ ページ固有のセクション（症状一覧・経過・脱水・お薬・検査など）は固定せず、
     白とクリームが交互に並ぶよう調整する側に使う。

   ■ 固有セクションの数によっては交互配置にできないことがある。
     その場合は「白を連続させる」。
     クリームには淡いピンクのドット背景が入るため、2つ続くと
     ドットの帯がつながって境目が消える。白どうしなら余白が続くだけで済む。

     ※ 現時点で白が連続しているのは次の2箇所
        風邪ページ      おうちでのケア → お薬について
        嘔吐・下痢ページ 検査 → よくある質問
   ========================================================================== */

/* ==========================================================================
   5. Card
   ========================================================================== */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--shadow-sm);
}

/* カードの中の小見出し（医師紹介の「経歴」「資格・認定」など） */
.card__ttl {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--line);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  color: var(--heading);
}

/* 影ではなく枠線で見せる版。背景が白のセクションで使う */
.card--flat {
  box-shadow: none;
  border: 1.5px solid var(--line);
}

/* 上辺に色帯を付ける版。セマンティック色と組み合わせる */
.card--top {
  border-top: 5px solid var(--pink);
  border-radius: var(--r-md);
  overflow: hidden;
}

.card--top.is-safe      { border-top-color: var(--safe); }
.card--top.is-caution   { border-top-color: var(--caution); }
.card--top.is-urgent    { border-top-color: var(--urgent); }
.card--top.is-emergency { border-top-color: var(--emergency); }
.card--top.is-info      { border-top-color: var(--info); }

/* クリックできるカード */
.card--link {
  display: block;
}

.card__ttl {
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  font-weight: var(--fw-bold);
  line-height: 1.55;
  margin-bottom: 10px;
}

.card__txt {
  font-size: var(--fs-note);
  line-height: 1.95;
  color: var(--text);
}

/* カード下部の「詳しく見る」 */
.card__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  color: var(--pink-text);
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
}

.card__more::after {
  content: "›";
  font-size: 0.9375rem;
}

/* カードを並べる器。最小幅を下回ると自動で折り返す */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}

.card-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.card-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}


/* ==========================================================================
   6. Icon Circle（カード上部の丸アイコン）
   --------------------------------------------------------------------------
   アイコンは CSS の mask で描画している。
   SVG は単色（黒）1枚だけ用意すればよく、色は CSS 側が当てる。
   <img> だと色を変えられないため、この方式を採用している。

   使い方：円の色クラスと、アイコンのクラスを併記する
     <span class="icon-circle icon-circle--safe ico-genki"></span>

   アイコンを追加するときは、末尾の一覧に1行足すだけでよい。
   ========================================================================== */
.icon-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pink-light);
  color: var(--pink-text);                /* アイコン本体の色 */
  margin-bottom: 14px;
}

.icon-circle::before {
  content: "";
  width: 32px;
  height: 32px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

/* アイコンを指定していない場合は空円のままにする */
.icon-circle:not([class*="ico-"])::before {
  content: none;
}

/* インラインSVGや画像を直接入れたい場合の受け皿 */
.icon-circle img,
.icon-circle svg {
  width: 32px;
  height: 32px;
}

/* --- 円の背景色とアイコン色（セマンティック） --- */
.icon-circle--safe {
  background: var(--safe-light);
  color: var(--safe-text);
}

.icon-circle--caution {
  background: var(--caution-light);
  color: var(--caution-text);
}

.icon-circle--urgent {
  background: var(--urgent-light);
  color: var(--urgent-text);
}

.icon-circle--emergency {
  background: var(--emergency-light);
  color: var(--emergency-text);
}

.icon-circle--info {
  background: var(--info-light);
  color: var(--info-text);
}

.icon-circle--mint {
  background: var(--mint-light);
  color: var(--mint-text);
}

.icon-circle--center {
  margin-inline: auto;
}

/* アイコンを中央に置くカードでは、見出しも中央にそろえる。
   本文は左のまま（中央だと行末がばらついて読みにくい） */
.card__ttl--center {
  text-align: center;
}

/* カード上部のイラスト。.icon-circle（単色アイコン）のイラスト版。
   ■ 丸の下地は敷かない。水彩の絵の後ろに色の面を置くと、絵が沈んで見える。
   ■ .icon-circle（62px）より大きいのは、水彩の絵が小さいと潰れるため */
.card__fig {
  display: block;
  width: clamp(78px, 8.2vw, 98px);
  height: clamp(78px, 8.2vw, 98px);
  margin: 0 auto 12px;
  background: var(--il) center / contain no-repeat;
}

/* --- サイズ --- */
.icon-circle--sm {
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
}

.icon-circle--sm::before {
  width: 24px;
  height: 24px;
}

.icon-circle--lg {
  width: 76px;
  height: 76px;
}

.icon-circle--lg::before {
  width: 40px;
  height: 40px;
}

/* --------------------------------------------------------------------------
   アイコン一覧（/assets/img/icon/ に単色SVGを置く）
   ファイル名を変えずに差し替えれば、全ページに反映される。
   -------------------------------------------------------------------------- */

/* 観察ポイント */
.ico-genki    { --ico: url("/assets/img/icon/genki.svg"); }
.ico-water    { --ico: url("/assets/img/icon/water.svg"); }
.ico-breath   { --ico: url("/assets/img/icon/breath.svg"); }
.ico-face     { --ico: url("/assets/img/icon/face.svg"); }
.ico-sleep    { --ico: url("/assets/img/icon/sleep.svg"); }
.ico-appetite { --ico: url("/assets/img/icon/appetite.svg"); }

/* 受診タイミング */
.ico-home      { --ico: url("/assets/img/icon/home.svg"); }
.ico-clinic    { --ico: url("/assets/img/icon/clinic.svg"); }
.ico-night     { --ico: url("/assets/img/icon/night.svg"); }
.ico-ambulance { --ico: url("/assets/img/icon/ambulance.svg"); }

/* 原因 */
.ico-virus    { --ico: url("/assets/img/icon/virus.svg"); }
.ico-bacteria { --ico: url("/assets/img/icon/bacteria.svg"); }
.ico-allergy  { --ico: url("/assets/img/icon/allergy.svg"); }
.ico-other    { --ico: url("/assets/img/icon/other.svg"); }

/* おうちでのケア */
.ico-drink    { --ico: url("/assets/img/icon/drink.svg"); }
.ico-meal     { --ico: url("/assets/img/icon/meal.svg"); }
.ico-clothes  { --ico: url("/assets/img/icon/clothes.svg"); }
.ico-rest     { --ico: url("/assets/img/icon/rest.svg"); }
.ico-medicine { --ico: url("/assets/img/icon/medicine.svg"); }
.ico-bath     { --ico: url("/assets/img/icon/bath.svg"); }
.ico-cool     { --ico: url("/assets/img/icon/cool.svg"); }

/* 当院での診療 */
.ico-interview { --ico: url("/assets/img/icon/interview.svg"); }
.ico-exam      { --ico: url("/assets/img/icon/exam.svg"); }
.ico-test      { --ico: url("/assets/img/icon/test.svg"); }
.ico-explain   { --ico: url("/assets/img/icon/explain.svg"); }

/* その他 */
.ico-memo { --ico: url("/assets/img/icon/memo.svg"); }
.ico-faq  { --ico: url("/assets/img/icon/faq.svg"); }


/* ==========================================================================
   7. List
   ========================================================================== */
.list-dot {
  display: grid;
  gap: 9px;
}

.list-dot li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-body);
  line-height: 1.85;
}

.list-dot li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .68em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
}

.list-dot--safe      li::before { background: var(--safe); }
.list-dot--caution   li::before { background: var(--caution); }
.list-dot--urgent    li::before { background: var(--urgent); }
.list-dot--emergency li::before { background: var(--emergency); }
.list-dot--info      li::before { background: var(--info); }

/* --------------------------------------------------------------------------
   チェック版。「すべて当てはまるか確認する」項目に使う。
   チェックマークは回転ではなく SVG マスクで描いている。
   border を rotate(-45deg) で作る方法は、線幅と文字サイズの組み合わせで
   中心がずれるため使わない。
   -------------------------------------------------------------------------- */
.list-check {
  --check: var(--mint);
  display: grid;
  gap: 11px;
}

.list-check li {
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-body);
  line-height: 1.8;
}

/* 枠 */
.list-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--check);
  background: var(--white);
}

/* チェックマーク。枠と同じ矩形に重ね、中央に配置する */
.list-check li::after {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 20px;
  height: 20px;
  background: var(--check);
  -webkit-mask: var(--check-mark) center / 11px 11px no-repeat;
  mask: var(--check-mark) center / 11px 11px no-repeat;
}

/* 色バリエーション。枠・チェックが同時に変わる */
.list-check--safe      { --check: var(--safe); }
.list-check--caution   { --check: var(--caution); }
.list-check--urgent    { --check: var(--urgent); }
.list-check--emergency { --check: var(--emergency); }
.list-check--info      { --check: var(--info); }

/* リストを複数列に流し込む器 --------------------------------------------------
   .list-cols  … 幅に応じて列数が増える。項目が短いときに使う
   .list-cols2 … 2列で固定。項目が長く、行の途中で折り返させたくないときに使う
   -------------------------------------------------------------------------- */
/* align-content: start は必須。
   これらのリストは親（.memo-row など）の中で高さが余ることがあり、
   既定の stretch のままだと行間が引き伸ばされて間延びする。 */
.list-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 30px;
  align-content: start;
}

.list-cols2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px 32px;
  align-content: start;
}

@media (max-width: 700px) {
  .list-cols2 {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   8. Alert（注意喚起ボックス）
   --------------------------------------------------------------------------
   緊急度に応じて色を選ぶこと。
     .alert--safe       おうちで様子を見られる
     （既定）           診療時間内に相談 ＝ caution
     .alert--urgent     夜間・休日でも早めに受診
     .alert--emergency  迷わず119番
     .alert--info       補足・お知らせ
   ========================================================================== */
.alert {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  background: var(--caution-light);
}

.alert__ico {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--caution);
  color: var(--white);
  font-size: 1.4375rem;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   「!」の代わりにイラストを置く版。
   使い方： <div class="alert__ico alert__ico--il use-alert"></div>
   ※ 緊急度の高いアラートでは「!」を残すことを推奨（警告の記号性が下がるため）
   -------------------------------------------------------------------------- */
.alert__ico--il {
  width: clamp(64px, 8vw, 92px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: var(--il) center / contain no-repeat;
  align-self: center;
}

/* --------------------------------------------------------------------------
   「!」の代わりに共通アイコン27点を使う版。丸の色はそのまま残る。
   使い方： <div class="alert__ico alert__ico--icon ico-ambulance"></div>
   ※ 水彩イラストに該当する絵柄がない場合の受け皿
   -------------------------------------------------------------------------- */
.alert__ico--icon {
  width: clamp(56px, 6.6vw, 68px);
  height: auto;
  aspect-ratio: 1 / 1;
}

.alert__ico--icon::before {
  content: "";
  width: 56%;
  height: 56%;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.alert__body {
  flex: 1;
}

/* --------------------------------------------------------------------------
   アラート内のイラスト。右端に立たせる。
   使い方： <span class="alert__fig use-alert"></span>
   ※ 装飾なので、SPでは非表示にして本文の可読性を優先する
   -------------------------------------------------------------------------- */
.alert__fig {
  width: clamp(72px, 9vw, 116px);
  flex: none;
  align-self: flex-end;
  aspect-ratio: 1 / 1;
  background: var(--il) center bottom / contain no-repeat;
  margin-bottom: calc(-1 * clamp(20px, 2.4vw, 26px));
}

/* 見出しは通常色。赤は本文中の「行動指示」だけに絞る。
   見出しまで色を付けると、どこが要点か分からなくなる。 */
.alert__ttl {
  font-size: clamp(0.9375rem, 1.7vw, 1.125rem);
  font-weight: var(--fw-bold);
  color: var(--heading);
  line-height: 1.55;
  margin-bottom: 8px;
}

.alert__txt {
  font-size: var(--fs-body);
  line-height: 1.9;
}

.alert__txt strong {
  color: var(--caution-text);
}

/* --- 緊急度バリエーション --- */
.alert--safe {
  background: var(--safe-light);
}

.alert--safe .alert__ico:not(.alert__ico--il) {
  background: var(--safe);
}

.alert--safe .alert__txt strong {
  color: var(--safe-text);
}

.alert--urgent {
  background: var(--urgent-light);
}

.alert--urgent .alert__ico:not(.alert__ico--il) {
  background: var(--urgent);
}

.alert--urgent .alert__txt strong {
  color: var(--urgent-text);
}

.alert--emergency {
  background: var(--emergency-light);
}

.alert--emergency .alert__ico:not(.alert__ico--il) {
  background: var(--emergency);
}

.alert--emergency .alert__txt strong {
  color: var(--emergency-text);
}

.alert--info {
  background: var(--info-light);
}

.alert--info .alert__ico:not(.alert__ico--il) {
  background: var(--info);
}

.alert--info .alert__txt strong {
  color: var(--info-text);
}

/* アイコンなしの細い帯。文中の補足に使う */
.alert--slim {
  gap: 0;
  padding: 16px 22px;
  border-radius: var(--r-md);
}

.alert--slim .alert__ttl {
  margin-bottom: 4px;
}

@media (max-width: 560px) {
  .alert {
    flex-direction: column;
    gap: 12px;
  }

  .alert__fig {
    display: none;
  }
}


/* ==========================================================================
   9. Emergency Box（119番）
   --------------------------------------------------------------------------
   ページ内で最も緊急度が高いブロック。.alert とは別物として扱う。
   ・見出し帯だけベタ塗りにして、他のセクションと断ち切る
   ・項目は白いカードに切り出し、1つずつ独立して見えるようにする
   ・慌てた状況で読むため、項目の文字サイズは本文と同じにする
   ========================================================================== */
.emg-box {
  border: 2px solid var(--emergency);
  border-radius: var(--r-lg);
  margin-top: clamp(26px, 3.2vw, 42px);   /* はみ出したイラストのぶん */
}

/* 帯の上端からイラストを出すため overflow は切らない。
   角丸は帯と本文にそれぞれ持たせる（枠線2px ぶん内側に縮める） */
.emg-box__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(5px, 0.7vw, 7px) clamp(20px, 2.6vw, 28px);
  background: var(--emergency);
  color: var(--white);
  border-radius: calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0;
}

/* イラストを置く枠。単色アイコンではなく水彩イラストを使う。
   負の margin-top で帯の上に出す */
.emg-box__ico {
  width: clamp(72px, 8.4vw, 104px);
  aspect-ratio: 1 / 1;
  flex: none;
  background: var(--il) center / contain no-repeat;
  margin-top: clamp(-40px, -4.4vw, -26px);
  filter: drop-shadow(0 5px 10px rgba(120, 40, 38, .25));
}

.emg-box__ttl {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--white);
}

/* 「119番」だけ色を変えて、行動する番号を際立たせる */
.emg-box__num {
  color: var(--emergency-accent);
  font-weight: var(--fw-black);
  letter-spacing: .02em;
}

.emg-box__body {
  background: var(--emergency-light);
  border-radius: 0 0 calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px);
  padding: clamp(20px, 2.4vw, 24px) clamp(18px, 2.4vw, 24px) clamp(22px, 2.6vw, 26px);
}

/* --- 項目（白いカード） --- */
.emg-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.emg-list li {
  position: relative;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 17px 20px 17px 42px;
  font-size: var(--fs-body);
  line-height: 1.7;
  box-shadow: 0 2px 8px rgba(216, 86, 77, .10);
}

.emg-list li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 1.32em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--emergency);
}

/* --- 対応方法（行動指示なので地に溶かさない） --- */
.emg-box__note {
  margin-top: 20px;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-size: var(--fs-note);
  line-height: 1.9;
  box-shadow: 0 2px 8px rgba(216, 86, 77, .09);
}

.emg-box__note strong {
  color: var(--emergency-text);
  font-weight: var(--fw-bold);
}

@media (max-width: 620px) {
  .emg-list {
    grid-template-columns: 1fr;
  }
}