/* components/use-section.css */
@layer components {
/* 業務でのAI活用：選んだ説明（画面のイメージ・開いて読む項目）、組み合わせの例、共通のサポート
   冒頭の曲線は page-head.css、6つの活用方法の札は choice.css、開いて読む項目の形は disclosure.css。区切りは横線ではなく、淡い地の札で分ける */

/* 選んだ説明（JS が動くときは1つだけ見せる。動かないときは6つを順に並べる） */
.use-section {
  padding-bottom: var(--sec);
}
.use-section__head {
  text-align: center;
  margin-bottom: var(--s-40);
}
.use-section__name {
  color: var(--c-blue);
  margin-bottom: var(--s-20);
  font-size: var(--t3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.use-section__lead {
  text-align: left;
  color: var(--c-body);
  max-width: var(--use-demo-w);
  margin: var(--s-24) auto 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}
/* 画面のイメージ（題・代表的な質問・画面の絵・流れ） */
.use-demo {
  max-width: var(--use-demo-w);
  margin: 0 auto;
}
.use-demo__frame {
  background: var(--c-white);
  border: 1px solid var(--c-line-ink);
  border-radius: var(--r-l);
  overflow: hidden;
}
.use-demo__title {
  background: var(--c-surface);
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-16) var(--s-24);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
  display: flex;
}
.use-demo__title svg {
  color: var(--c-blue);
}
.use-demo__question {
  align-items: baseline;
  gap: var(--s-14);
  padding: var(--s-20) var(--s-28) var(--s-12);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
  display: flex;
}
.use-demo__question > span {
  color: var(--c-slate);
  flex-shrink: 0;
  font-size: var(--t6);
  font-weight: var(--fw-semibold);
}
.use-demo img {
  width: 100%;
  height: auto;
  display: block;
}
/* 流れ（人が確かめる段階は青く太く） */
.use-demo__legend {
  justify-content: space-between;
  gap: var(--s-16);
  padding: var(--s-8) var(--s-28) var(--s-20);
  display: flex;
}
.use-demo__legend li {
  color: var(--c-slate-deep);
  align-items: center;
  gap: var(--s-8);
  font-size: var(--t6);
  line-height: var(--lh-title);
  display: flex;
}
.use-demo__legend svg {
  color: var(--c-blue);
}
.use-demo__legend li.is-human {
  color: var(--c-blue-deep);
  font-weight: var(--fw-bold);
}
.use-demo figcaption {
  text-align: center;
  color: var(--c-muted);
  margin-top: var(--s-12);
  font-size: var(--t6);
  line-height: var(--lh-ui);
}
/* どのような仕事に使えるか */
.use-examples {
  gap: var(--s-12);
  max-width: var(--use-demo-w);
  margin: var(--s-32) auto var(--s-40);
  display: grid;
}
.use-examples li {
  align-items: flex-start;
  gap: var(--s-16);
  font-size: var(--t5);
  line-height: var(--lh-title);
  display: flex;
}
.use-examples svg {
  color: var(--c-blue);
  margin-top: var(--s-4);
}
/* 開いて読む項目（「導入済みのAIがある場合」「業務で使う前の確認」「使い始めるまで」） */
.use-details {
  gap: var(--s-8);
  max-width: var(--use-demo-w);
  margin: 0 auto;
  display: grid;
}
.use-section__note {
  color: var(--c-muted);
  margin-top: var(--s-20);
  font-size: var(--t6);
  line-height: var(--lh-title);
}
.use-section__actions {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-20) var(--s-32);
  margin-top: var(--s-40);
  display: flex;
}
.use-section__related {
  max-width: var(--use-demo-w);
  margin: var(--s-32) auto 0;
}
.use-section__related .link-chips {
  text-align: center;
}
.use-section__related .link-chips ul {
  justify-content: center;
}

/* 地の色の帯（組み合わせの例・共通のサポート） */
:is(.use-combos, .use-supports).is-band {
  background: var(--c-surface);
}
/* 組み合わせの例（開いて読む。使う活用方法を、画面のイメージと矢印でつなぐ） */
.combo-list,
.use-supports__list {
  gap: var(--s-8);
  display: grid;
}
.combo-item,
.use-common {
  background: var(--c-white);
  border-radius: var(--r-l);
}
.combo-item__body {
  padding: 0 var(--s-24) var(--s-28);
}
.combo-item__body > p {
  color: var(--c-body);
  max-width: var(--reading);
  font-size: var(--t5);
  line-height: var(--lh-body);
}
.combo-visual {
  justify-content: center;
  gap: var(--s-48);
  margin: var(--s-4) 0 var(--s-24);
  display: flex;
}
.combo-visual > li {
  flex: 1;
  min-width: 0;
  max-width: var(--combo-use-w);
  position: relative;
}
.combo-visual a {
  text-align: center;
  background: var(--c-surface);
  border-radius: var(--r-m);
  padding: var(--s-16) var(--s-12) var(--s-8);
  transition: background-color var(--dur-base);
  display: block;
}
.combo-visual a:hover {
  background: var(--c-blue-white);
}
.combo-visual a > span {
  color: var(--c-blue);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
}
.combo-visual img {
  width: 100%;
  height: auto;
  margin-top: var(--s-12);
  display: block;
}
.combo-connector {
  color: var(--c-slate-blue);
  display: flex;
  position: absolute;
  top: 50%;
  right: calc(var(--s-48) / -2);
  translate: 50% -50%;
}

/* 共通のサポート：3つへのリンクと、開いて読む説明（題・説明・表・続きの説明・リンク） */
.use-supports__links {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-16);
  margin-bottom: var(--s-32);
  display: grid;
}
.use-supports__links a {
  color: var(--c-ink);
  background: var(--c-white);
  border-radius: var(--r-m);
  justify-content: space-between;
  align-items: center;
  gap: var(--s-16);
  height: 100%;
  padding: var(--s-16) var(--s-20);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  transition: color var(--dur-base);
  display: flex;
}
.use-supports__links a svg {
  color: var(--c-blue);
}
.use-supports__links a:hover {
  color: var(--c-blue);
}
.use-common {
  scroll-margin-top: var(--s-24);
}
.use-common__body {
  padding: var(--s-4) var(--s-24) var(--s-32);
}
.use-common__body h3 {
  white-space: pre-line;
  font-size: var(--t3);
  line-height: var(--lh-heading);
}
.use-common__lead,
.use-common__after,
.use-common__partners p {
  color: var(--c-body);
  max-width: var(--lead-w);
  font-size: var(--t5);
  line-height: var(--lh-body);
}
.use-common__lead {
  margin: var(--s-16) 0 var(--s-24);
}
.use-common__after,
.use-common__partners p {
  margin-top: var(--s-20);
}
.use-common__partners h4 {
  margin-top: var(--s-32);
  font-size: var(--fs-item);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.use-common__links {
  flex-wrap: wrap;
  gap: var(--s-12) var(--s-28);
  margin-top: var(--s-24);
  display: flex;
}

@media (max-width: 767px) {
  .use-section__head {
    margin-bottom: var(--s-24);
  }
  .use-section__name {
    margin-bottom: var(--s-16);
  }
  .use-section__lead {
    margin-top: var(--s-20);
  }
  .use-demo__title {
    gap: var(--s-8);
    padding: var(--s-12) var(--s-16);
  }
  .use-demo__question {
    padding: var(--s-16) var(--s-16) var(--s-8);
    display: block;
  }
  .use-demo__question > span {
    margin-bottom: var(--s-4);
    display: block;
  }
  /* 流れは、アイコンを上に置いて3つを横に並べる */
  .use-demo__legend {
    align-items: start;
    gap: var(--s-8);
    padding: var(--s-6) var(--s-12) var(--s-16);
  }
  .use-demo__legend li {
    text-align: center;
    flex-direction: column;
    flex: 1;
    gap: var(--s-4);
  }
  .use-examples {
    gap: var(--s-14);
    margin: var(--s-24) 0 var(--s-32);
  }
  .use-examples li {
    gap: var(--s-10);
  }
  .use-section__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-16);
    margin-top: var(--s-28);
  }
  .use-section__actions .text-link {
    justify-content: center;
  }
  .use-section__related {
    margin-top: var(--s-24);
  }
  .combo-item__body {
    padding: 0 var(--s-16) var(--s-24);
  }
  /* 組み合わせの例は、縦に並べて下向きの矢印でつなぐ */
  .combo-visual {
    flex-direction: column;
    align-items: center;
    gap: var(--s-24);
    margin-bottom: var(--s-20);
  }
  .combo-visual > li {
    width: min(100%, var(--combo-use-w-sp));
  }
  .combo-visual img {
    object-fit: contain;
    max-height: var(--combo-image-h-sp);
    margin-top: var(--s-4);
  }
  .combo-connector {
    top: auto;
    bottom: calc(var(--s-24) / -2);
    right: 50%;
    translate: 50% 50%;
    rotate: 90deg;
  }
  .use-supports__links {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
    margin-bottom: var(--s-24);
  }
  .use-common__body {
    padding: 0 var(--s-16) var(--s-24);
  }
  .use-common__links {
    flex-direction: column;
    gap: var(--s-12);
  }
}

/* 印刷：ボタンは出さず、6つの説明をすべて出す（札を出さないのは choice.css、隠した説明を出すのは states.css） */
@media print {
  .use-section__actions {
    display: none;
  }
  .use-section + .use-section {
    break-before: page;
  }
}
}