@charset "utf-8";

/* =====================================================
   共通パーツのアイコンアクセント（2026年9月追加）

   素材：デジタル庁「イラストレーション・アイコン素材」の線画版
         （商用利用可・出典表記不要）を、花のやのアクセント色
         #c9ac6f に着色して images/src/parts/icon/ に配置。

   既存CSSは書き換えていません。このファイルの読み込みを外し、
   HTMLの deco-ic クラスを消せば、追加前の見た目に戻ります。
===================================================== */

/* -----------------------------------------------------
   アイコンは見出しの「行の中」に置きます。
   上に単独で置くと行の高さが増え、高さの決まったブロックで
   末尾の文字が欠けるためです。
   em 指定にしてあるため、見出しの文字サイズに追従します。
----------------------------------------------------- */
.deco-ic::before {
  content: "";
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin-right: 0.42em;
  vertical-align: -0.06em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.deco-ic.ic-add::before {
  background-image: url(../../images/src/parts/icon/add.svg);
}
.deco-ic.ic-arrival::before {
  background-image: url(../../images/src/parts/icon/arrival.svg);
}
.deco-ic.ic-attention::before {
  background-image: url(../../images/src/parts/icon/attention.svg);
}
.deco-ic.ic-certification::before {
  background-image: url(../../images/src/parts/icon/certification.svg);
}
.deco-ic.ic-complete::before {
  background-image: url(../../images/src/parts/icon/complete.svg);
}
.deco-ic.ic-documents::before {
  background-image: url(../../images/src/parts/icon/documents.svg);
}
.deco-ic.ic-e_application::before {
  background-image: url(../../images/src/parts/icon/e_application.svg);
}
.deco-ic.ic-health::before {
  background-image: url(../../images/src/parts/icon/health.svg);
}
.deco-ic.ic-help::before {
  background-image: url(../../images/src/parts/icon/help.svg);
}
.deco-ic.ic-history::before {
  background-image: url(../../images/src/parts/icon/history.svg);
}
.deco-ic.ic-house::before {
  background-image: url(../../images/src/parts/icon/house.svg);
}
.deco-ic.ic-immunization::before {
  background-image: url(../../images/src/parts/icon/immunization.svg);
}
.deco-ic.ic-information::before {
  background-image: url(../../images/src/parts/icon/information.svg);
}
.deco-ic.ic-itinerary::before {
  background-image: url(../../images/src/parts/icon/itinerary.svg);
}
.deco-ic.ic-mailing::before {
  background-image: url(../../images/src/parts/icon/mailing.svg);
}
.deco-ic.ic-medicine::before {
  background-image: url(../../images/src/parts/icon/medicine.svg);
}
.deco-ic.ic-money::before {
  background-image: url(../../images/src/parts/icon/money.svg);
}
.deco-ic.ic-smartphone::before {
  background-image: url(../../images/src/parts/icon/smartphone.svg);
}
.deco-ic.ic-specialist::before {
  background-image: url(../../images/src/parts/icon/specialist.svg);
}
.deco-ic.ic-update::before {
  background-image: url(../../images/src/parts/icon/update.svg);
}

/* -----------------------------------------------------
   パーツごとの微調整
----------------------------------------------------- */

/* 注記・所要時間：本文より小さい文字のため、アイコンをやや大きめに取る。
   注記は <p class="common-note"> と <div class="common-note"><p> の2通りの書き方がある */
.common-note.deco-ic::before,
.common-note .deco-ic::before {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.35em;
  vertical-align: -0.12em;
}

/* パンくずの HOME */
.breadcrumbs a.home.deco-ic::before {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.3em;
  vertical-align: -0.1em;
}

/* STEP番号：小さめのラベルのため控えめに */
.p-flow__num.deco-ic::before,
.list-num.deco-ic::before {
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.32em;
  vertical-align: -0.18em;
}

/* 診療の流れのSTEP番号は金地に白文字のため、白のアイコンに差し替える */
.p-flow__num.deco-ic.ic-arrival::before {
  background-image: url(../../images/src/parts/icon/wh/arrival.svg);
}
.p-flow__num.deco-ic.ic-complete::before {
  background-image: url(../../images/src/parts/icon/wh/complete.svg);
}
.p-flow__num.deco-ic.ic-documents::before {
  background-image: url(../../images/src/parts/icon/wh/documents.svg);
}
.p-flow__num.deco-ic.ic-e_application::before {
  background-image: url(../../images/src/parts/icon/wh/e_application.svg);
}
.p-flow__num.deco-ic.ic-health::before {
  background-image: url(../../images/src/parts/icon/wh/health.svg);
}
.p-flow__num.deco-ic.ic-mailing::before {
  background-image: url(../../images/src/parts/icon/wh/mailing.svg);
}
.p-flow__num.deco-ic.ic-money::before {
  background-image: url(../../images/src/parts/icon/wh/money.svg);
}
.p-flow__num.deco-ic.ic-smartphone::before {
  background-image: url(../../images/src/parts/icon/wh/smartphone.svg);
}
.p-flow__num.deco-ic.ic-specialist::before {
  background-image: url(../../images/src/parts/icon/wh/specialist.svg);
}

/* 施術カードの名称：見出しより一段小さく、文字の頭にそろえる */
.p-treat__name.deco-ic::before {
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.35em;
  vertical-align: -0.08em;
}

@media screen and (max-width: 767px) {
  /* SPは文字が詰まるため、アイコンとの間隔を少し詰める */
  .deco-ic::before {
    margin-right: 0.34em;
  }
}