/*20260916*/
/* -----------------------------------
   四十肩・五十肩セクション（基本設定）
----------------------------------- */
.shoulder-sec {
  line-height: 1.8;
  font-size: 15px;
  color: #333;
}

/* オレンジ背景の囲み枠 */
.shoulder-sec .shoulder-box {
  background-color: #fffbf7;
  border: 1px solid var(--clr-orange);
  border-radius: 6px;
  padding: 24px 20px;
  margin-bottom: 30px;
}

.shoulder-sec .shoulder-box p {
  margin: 0 0 15px;
}

/* リスト（文字を太字＋頭文字をオレンジ） */
.shoulder-sec .shoulder-box ul {
  list-style: none;
  padding: 0;
  margin: 0 0 15px;
}

.shoulder-sec .shoulder-box li {
  position: relative;
  padding-left: 1.3em;
  margin-bottom: 10px;
  font-weight: bold;
}

.shoulder-sec .shoulder-box li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--clr-orange);
}

.shoulder-sec .shoulder-box .bold {
  color: var(--clr-orange);
  font-weight: bold;
  margin-bottom: 0;
}

.shoulder-sec .shoulder-txt p {
  margin-bottom: 1.5em;
}

.shoulder-sec .shoulder-txt p:last-child {
  margin-bottom: 0;
}

/* 関節イラストと文章の横並び配置 */
.shoulder-detail-flex {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 25px;
}

.shoulder-img {
  flex: 0 0 260px;
  text-align: center;
}

.shoulder-img img {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.shoulder-txt {
  flex: 1;
}

/* 原因リスト（■表記＋左寄せ） */
.shoulder-cause-list {
  margin: 0 auto;
  padding: 0;
}

.shoulder-cause-list > div {
  padding: 25px 0;
  border-bottom: 1px dashed #dbe4dd;
}

.shoulder-cause-list > div:last-child {
  border-bottom: none;
}

.shoulder-cause-list dt {
  text-align: left;
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--clr-orange);
  margin-bottom: 12px;
}

.shoulder-cause-list dt::before {
  content: "■";
  margin-right: 6px;
  font-size: 0.9em;
  vertical-align: 1px;
}

.shoulder-cause-list dd {
  margin: 0;
  line-height: 1.8;
  font-size: 15px;
  color: #333;
  text-align: left;
}

/* お悩み箇条書き＋右画像レイアウト */
.trouble__flex {
  display: flex;
  align-items: center;
  gap: 25px;
}

.trouble__flex .trouble__inner {
  flex: 1;
}

.trouble__flex .trouble__img {
  flex: 0 0 280px;
  text-align: center;
}

.trouble__flex .trouble__img img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
}

/* -----------------------------------
   当院のアプローチ（STEP1・2部分のみ横並び）
----------------------------------- */
.cause__lead {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

.shoulder-approach-alert {
  background-color: #fceee3;
  border-left: 4px solid var(--clr-orange);
  padding: 12px 15px;
  margin-bottom: 1.2em;
  border-radius: 0 4px 4px 0;
}

.shoulder-txt-block {
  margin-bottom: 1.5em;
}

/* STEP1・2と画像のフレックス配置 */
.shoulder-step-flex {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 1.5em;
}

.shoulder-step-list {
  flex: 1;
}

.shoulder-step-item {
  position: relative;
  background: #fffbf7;
  border: 1px solid #f2e3d5;
  padding: 12px 15px 12px 75px;
  margin-bottom: 12px;
  border-radius: 6px;
}

.shoulder-step-item:last-child {
  margin-bottom: 0;
}

.shoulder-step-item .step-label {
  position: absolute;
  left: 10px;
  top: 12px;
  background-color: var(--clr-orange);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
}

.shoulder-approach-img {
  flex: 0 0 180px;
}

.shoulder-approach-img img {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
}

.shoulder-approach-summary {
  font-weight: bold;
  margin-top: 1.2em;
  margin-bottom: 40px;
}

.shoulder-highlight {
  background: linear-gradient(transparent 60%, #ffd8b3 60%);
}

/* -----------------------------------
   レスポンシブ（スマホ表示：599px以下）
----------------------------------- */
@media screen and (max-width: 599px) {
  .shoulder-sec {
    font-size: 14px;
    line-height: 1.7;
  }

  .shoulder-sec .shoulder-box {
    padding: 18px 15px;
    margin-bottom: 25px;
  }

  .shoulder-sec .shoulder-box li {
    margin-bottom: 12px;
  }

  .shoulder-detail-flex,
  .trouble__flex {
    flex-direction: column;
    gap: 20px;
  }

  .shoulder-img,
  .trouble__flex .trouble__img,
  .shoulder-approach-img {
    flex: none;
    width: 100%;
  }

  .shoulder-img img {
    max-width: 180px;
  }

  .trouble__flex .trouble__img img {
    max-width: 200px;
    margin: 0 auto;
  }

  .shoulder-step-flex {
    flex-direction: column;
    gap: 15px;
  }

  .shoulder-approach-img img {
    max-width: 150px;
    margin: 0 auto;
  }

  .shoulder-step-item {
    padding: 38px 12px 12px 12px;
  }

  .shoulder-step-item .step-label {
    top: 10px;
    left: 12px;
  }
}

.img20 {
  margin-top:20px;   
  margin-bottom: 20px; 
}