/* sections/target-disease.css — 対象疾患（2×2の疾患名リスト＋補足）
   Figma: p-target_disease (node 1208:9669)

   外枠は shell の l-section（gray背景・上下120px）を流用する。ただしFigmaは
   左上・右上の両方を120pxで丸める（shell は左上のみ）ため、p-target-disease で
   右上の角丸を足す。左側に背景ロゴを薄く敷く（Figma: logo_img）。 */

.p-target-disease {
  position: relative; /* 背景ロゴ（絶対配置）の基準 */
  overflow: clip;     /* はみ出す背景ロゴをセクション端でクリップ */
  border-start-end-radius: var(--radius-2xl); /* Figma: 右上も120px（shellの左上に加える）*/
}

/* 背景装飾のロゴ。左側に薄く敷く（Figma: logo_img の inset 実測値）*/
.p-target-disease__deco {
  position: absolute;
  inset: 5.8% 51.42% 23.02% 5.28%;
  pointer-events: none;
}

.p-target-disease__deco img {
  width: 100%;
  height: 100%;
}

/* Figma: 幅1200px・左右padding120px（実効960px）・縦gap24 */
.p-target-disease__inner {
  position: relative; /* 装飾ロゴより前面 */
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-24);
  align-items: center;
  width: 100%;
  max-width: var(--layout-content-width);
  margin-inline: auto;
  padding-inline: var(--space-120);
}

.p-target-disease__lead {
  width: 100%;
  color: var(--color-tertiary);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  text-align: center;
}

.p-target-disease__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: flex-start;
  width: 100%;
}

/* 疾患名ボックスの1行（2列）*/
.p-target-disease__list {
  display: flex;
  gap: var(--space-24);
  align-items: stretch;
  width: 100%;
}

/* Figma: 白背景・角丸16・px16/py24。罫線ではなく塗りボックス */
.p-target-disease__item {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--space-24) var(--space-16);
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

.p-target-disease__name {
  width: 100%;
  color: var(--color-ink);
  font-size: var(--font-size-h2-xs);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wider); /* Figma: 5%（1.0665px / 21.33px）*/
  text-align: center;
}

/* 補足テキスト（その他気になる症状があれば…）*/
.p-target-disease__note {
  width: 100%;
  color: var(--color-ink);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
  text-align: center;
}

/* ==========================================================================
   SP（767px以下）— 疾患名ボックスを1カラムに
   ========================================================================== */
@media (max-width: 767px) {
  .p-target-disease__inner { padding-inline: var(--space-24); }

  /* 見出しは c-section-header__title のSPと同じサイズ */
  .p-target-disease__lead { font-size: var(--font-size-h2); }

  /* 疾患名ボックスは2カラム（wrap＋50%幅） */
  .p-target-disease__list {
    flex-wrap: wrap;
    gap: var(--space-16);
  }

  .p-target-disease__item {
    flex: none;
    width: calc((100% - var(--space-16)) / 2);
  }

  .p-target-disease__note { text-align: left; }

  /* 装飾ロゴは p-feature（banded）と同じ右下配置に */
  .p-target-disease__deco {
    inset: 68.55% -4.97% 2.85% 61.67%;
  }

  .p-target-disease__deco img {
    object-fit: contain;
    object-position: bottom right;
  }
}