/* ハイドロリリースページ固有スタイル */

/* 「従来の局所注射との違い」「筋膜が癒着・短縮・緊張すると…」
   「向かないケース・注意が必要な方」「施術後の過ごし方」の付箋（メモ）イラスト。
   herniated-disc.css / tendonitis.css の .sticky-note を移植。罫線入りメモ用紙・
   左のマージンライン・上端のマスキングテープで、本物の付箋を貼ったような
   見た目にする。本文フォントはサイト標準の本文と統一。 */
.sticky-note {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 34px auto 40px;
  transform: rotate(-2deg);
}

.sticky-note__paper {
  position: relative;
  padding: 30px 34px 26px;
  border-radius: 2px;
  background-image: repeating-linear-gradient(#FFFDF4 0px, #FFFDF4 30px, #EAE2C8 30px, #EAE2C8 31px);
  background-color: #FFFDF4;
  box-shadow: 0 14px 26px rgba(16, 43, 73, .15), 0 2px 6px rgba(16, 43, 73, .08);
}

@media (max-width: 680px) {
  .sticky-note {
    max-width: 100%;
  }
  .sticky-note__paper {
    padding: 24px 22px 20px;
    background-image: repeating-linear-gradient(#FFFDF4 0px, #FFFDF4 25px, #EAE2C8 25px, #EAE2C8 26px);
  }
}

/* ノートの罫線マージンのような縦線 */
.sticky-note__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  width: 1px;
  background: rgba(221, 124, 47, .4);
}

.sticky-note__body {
  padding-left: 16px;
}

.sticky-note__title {
  font-family: 'BIZ UDPGothic', var(--font-body);
  font-weight: 700;
  font-size: 19px;
  line-height: 31px;
  color: var(--ink);
  margin: 0;
}

.sticky-note__text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 31px;
  color: #333D4A;
  margin: 0;
}

@media (max-width: 680px) {
  .sticky-note__title {
    font-size: 17px;
    line-height: 26px;
  }
  .sticky-note__text {
    line-height: 26px;
  }
}

/* 「向かないケース・注意が必要な方」: 注意喚起の意味で赤系配色にする修飾子 */
.sticky-note--alert .sticky-note__line {
  background: rgba(193, 57, 43, .45);
}
.sticky-note--alert .sticky-note__title {
  color: #C1392B;
}

/* 上端のマスキングテープ */
.sticky-note__tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 110px;
  height: 30px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(196, 205, 214, .55);
  box-shadow: 0 2px 3px rgba(16, 43, 73, .08);
  border-left: 2px dotted rgba(255, 255, 255, .7);
  border-right: 2px dotted rgba(255, 255, 255, .7);
}

/* 効果見出しの注射器。針・目盛り付きの筒・指掛け・押し子を描画する。 */
.hydro-effect__syringe {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--accent, #DD7C2F);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Cpath d='M9 2h6M12 2v4M7 6h10M9 6v10h6V6M9 9h2M9 12h2M11 16v2h2v-2M12 18v4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}