/* components/themes-index.css */
@layer components {
/* ご支援内容の一覧：選んだご支援内容の説明（番号と名前・見出し・説明 ｜ 絵 → 判断の材料の帯と3つの項目 → 下のリンク）と、組み合わせの例
   9つの札と下のリンクは choice.css、帯は decision-band.css。JS が動かないときは、9つの説明を間をあけて順に並べる */
.theme-overviews {
  gap: var(--sec);
  padding-bottom: var(--sec);
  display: grid;
}
/* 左に説明、右に絵（半々） */
.theme-overview__main {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--s-32) var(--gap-l);
  display: grid;
}
.theme-overview__label {
  color: var(--c-blue);
  align-items: baseline;
  gap: var(--s-10);
  margin-bottom: var(--s-16);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
  display: flex;
}
.theme-overview__label span {
  letter-spacing: var(--ls-label);
  font-family: var(--font-number);
}
.theme-overview__text h2 {
  text-wrap: balance;
}
.theme-overview__lead {
  color: var(--c-body);
  gap: var(--s-20);
  margin-top: var(--s-28);
  font-size: var(--t5);
  line-height: var(--lh-body);
  display: grid;
}
/* 絵は白い面にそのまま置く（枠や影を重ねない）。比率を保って全体を見せる */
.theme-overview__image img,
.themes-example__result img {
  width: 100%;
  height: auto;
  display: block;
}
.theme-overview .decision-band {
  margin-top: var(--s-40);
}
/* 判断の材料の3つの項目（横に並べ、細い縦線で分ける。1つ目の線は、帯の縦線の下にそろえる） */
.theme-overview__points {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-20) var(--s-24);
  padding: var(--s-28) var(--s-40) 0;
  display: grid;
}
.theme-overview__points li {
  border-left: 1px solid var(--c-line-strong);
  padding-left: var(--s-24);
  font-size: var(--fs-ui);
  line-height: var(--lh-title);
}

/* 複数の課題をまとめて相談できること（淡い地の帯）と、組み合わせの例（白い面） */
.themes-combine.is-band {
  background: var(--c-surface);
}
.themes-combine__copy {
  max-width: var(--reading);
  margin-bottom: var(--s-40);
}
.themes-combine__copy h2 {
  margin-bottom: var(--s-24);
}
.themes-combine__copy p {
  color: var(--c-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}
.themes-combine__copy p + p {
  margin-top: var(--s-14);
}
/* 左に実現したいこと・一緒に進める作業、細い縦線をはさんで、右に絵と担当者が受け取るもの */
.themes-example {
  background: var(--c-white);
  border-radius: var(--r-panel);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: var(--s-48) var(--s-56);
  display: grid;
}
/* 縦線は面の高さいっぱいに引き、左の文は高さの中央に置く */
.themes-example__ask {
  border-right: 1px solid var(--c-line);
  align-content: center;
  padding-right: var(--gap-l);
  display: grid;
}
.themes-example__result {
  padding-left: var(--gap-l);
}
.themes-example__head {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8) var(--s-12);
  margin-bottom: var(--s-28);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
  display: flex;
}
.themes-example dl > div + div {
  margin-top: var(--s-28);
}
.themes-example dt {
  color: var(--c-blue);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
}
.themes-example dd {
  color: var(--c-body);
  margin-top: var(--s-8);
  font-size: var(--t5);
  line-height: var(--lh-body);
}
/* 実現したいことは、大きく見せる */
.themes-example__want dd {
  color: var(--c-ink);
  font-size: var(--t3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-wrap: balance;
}
.themes-example__result dl {
  margin-top: var(--s-8);
}
.themes-combine .link-chips {
  margin-top: var(--s-32);
}
@media (max-width: 1050px) {
  .theme-overview__main {
    column-gap: var(--s-32);
  }
  .themes-example {
    padding: var(--s-36);
  }
  .themes-example__ask {
    padding-right: var(--s-32);
  }
  .themes-example__result {
    padding-left: var(--s-32);
  }
}
/* スマホ：番号と名前・見出し・説明、絵、判断の材料、リンクの順に縦に並べる。組み合わせの例も縦に並べる */
@media (max-width: 767px) {
  .theme-overview__main {
    grid-template-columns: minmax(0, 1fr);
  }
  .theme-overview__lead {
    gap: var(--s-14);
    margin-top: var(--s-20);
  }
  .theme-overview__image,
  .themes-example__result img {
    width: min(100%, var(--visual-w-sp));
    margin-inline: auto;
  }
  .theme-overview .decision-band {
    margin-top: var(--s-24);
  }
  .theme-overview__points {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-14);
    padding: var(--s-20) var(--s-20) 0;
  }
  .theme-overview__points li {
    padding-left: var(--s-16);
  }
  .themes-combine__copy {
    margin-bottom: var(--s-28);
  }
  .themes-combine__copy h2 {
    margin-bottom: var(--s-16);
  }
  .themes-example {
    border-radius: var(--r-card);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-28);
    padding: var(--s-28) var(--s-20);
  }
  .themes-example__ask {
    border-right: 0;
    padding-right: 0;
  }
  .themes-example__result {
    padding-left: 0;
  }
  .themes-example__head {
    margin-bottom: var(--s-20);
  }
  .themes-example dl > div + div {
    margin-top: var(--s-20);
  }
  .themes-combine .link-chips {
    margin-top: var(--s-24);
  }
}
}