/* 骨粗鬆症ページ固有スタイル */

/* 「気づかないうちに骨折していることも」の付箋（メモ）イラスト。
   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;
  padding-right: 220px;
}

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

/* 「気づかないうちに骨折していることも」: 注意喚起の意味で赤系配色にする修飾子 */
.sticky-note--alert .sticky-note__line {
  background: rgba(193, 57, 43, .45);
}
.sticky-note--alert .sticky-note__title {
  color: #C1392B;
}

/* メモに添える手描き風イラスト。
   デスクトップは付箋右下すみに大きく収め、本文（.sticky-note__text）側の
   padding-rightで occupying する分の折り返し幅を確保する。モバイルは
   dis-listが1カラムになって3行の右側に生まれる余白へ配置する
   （.sticky-note__list-row 参照）。 */
.sticky-note__doodle {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 173px;
  height: auto;
  opacity: .85;
  transform: rotate(4deg);
  pointer-events: none;
}

@media (max-width: 680px) {
  .sticky-note__list-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sticky-note__list-row .dis-list {
    flex: 1 1 auto;
    min-width: 0;
  }
  .sticky-note__doodle {
    position: static;
    flex: none;
    width: 108px;
  }
}

/* 上端のマスキングテープ */
.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);
}