/**
 * コンポーネント固有スタイル
 *
 * このファイルは style.css を補完するコンポーネント固有のスタイルを定義します。
 * 注意: style.css は index.html で既に読み込まれているため、ここではインポートしません。
 */

/* Components specific overrides */
.main_worries,
.main_recommend {
  padding-top: 0;
  margin-top: 0;
}

/* Ensure proper image paths */
.main_recommend_item .block_img img {
  max-width: 100%;
  height: auto;
}

/* Maintain existing styles for worries section */
.worries_wrap li {
  list-style: none;
  padding: 15px 0;
  padding-left: 2em;
  text-indent: -2em;
}

.worries_graph {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.worries_graph img {
  max-width: 30%;
  height: auto;
  object-fit: contain;
}

/* Recommendation section - デスクトップ用上書き */
/* 注意: 基本スタイルは style.css で定義済み */
.main_recommend_prof_left {
  text-align: left;
  padding-left: 10px;
}

/* Responsive adjustments */
@media screen and (max-width: 767px) {
  .worries_graph {
    flex-direction: column;
    align-items: center;
  }

  .worries_graph img {
    max-width: 80%;
  }
}