/* 腰部脊柱管狭窄症ページ固有スタイル */

/* 「間欠跛行とは」の付箋（メモ）イラスト。
   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__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);
}