/* components/theme-head.css */
@layer components {
/* 支援テーマのページの冒頭（左に題とボタン、右に傾いた札のアイコン） */
.theme-page-head {
  padding-top: var(--s-28);
  padding-bottom: var(--s-48);
}
.theme-title-row {
  grid-template-columns: 1.7fr 0.8fr;
  align-items: center;
  gap: var(--gap-xl);
  display: grid;
}
.theme-title-row h1 {
  line-height: var(--lh-heading);
  text-wrap: balance;
}
.theme-specialty {
  color: var(--c-blue-deep);
  border: 1px solid var(--c-blue-line);
  border-radius: var(--r-s);
  margin-top: var(--s-18);
  padding: var(--s-6) var(--s-12);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  display: inline-block;
}
.theme-head-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-18) var(--s-24);
  margin-top: var(--s-28);
  display: flex;
}
.theme-emblem {
  height: var(--emblem-h);
  box-shadow: var(--shadow-soft);
  color: var(--c-blue);
  background: linear-gradient(140deg, var(--c-blue-white), var(--c-emblem-end));
  border-radius: var(--r-emblem);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  transform: rotate(calc(var(--emblem-tilt) * -1));
}
.theme-emblem > span {
  color: var(--c-blue-pale);
  font: var(--fw-normal) var(--t2) / var(--lh-ui) var(--font-number);
  position: absolute;
  top: var(--s-20);
  left: var(--s-28);
}
.theme-emblem > svg {
  transform: rotate(var(--emblem-tilt));
  animation: theme-icon-arrive var(--dur-arrive) var(--ease-arrive) both;
}
@keyframes theme-icon-arrive {
  0% {
    transform: rotate(0) scale(var(--emblem-from));
  }
  100% {
    transform: rotate(var(--emblem-tilt)) scale(1);
  }
}
@media (max-width: 1050px) {
  .theme-title-row {
    grid-template-columns: 1fr var(--emblem-w-tablet);
    gap: var(--s-36);
  }
}
@media (max-width: 767px) {
  .theme-page-head {
    padding-top: var(--s-20);
    padding-bottom: var(--s-12);
  }
  .theme-title-row {
    display: block;
  }
  .theme-specialty {
    margin-top: var(--s-14);
  }
  .theme-head-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-14);
    margin-top: var(--s-24);
  }
  .theme-emblem {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-emblem > svg {
    animation: none;
  }
}
}
/* components/detail-concerns.css */
@layer components {
/* 支援テーマのページの「こんな課題はありませんか。」（左に見出し、右にチェックの一覧）。短い一覧なので、上下の余白は .section より小さい --sec-s にする */
.detail-concerns {
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--gap-m);
  padding-block: var(--sec-s);
  display: grid;
}
.detail-concerns > .section-heading {
  align-self: start;
}
.detail-concerns h2 {
  font-size: var(--t3);
}
.large-checks li {
  align-items: flex-start;
  gap: var(--s-16);
  padding: var(--s-10) 0;
  font-size: var(--t5);
  line-height: var(--lh-body);
  display: flex;
}
.large-checks svg {
  color: var(--c-blue);
  margin-top: var(--s-6);
}
@media (max-width: 767px) {
  .detail-concerns {
    display: block;
  }
  .detail-concerns > .section-heading {
    margin-bottom: var(--s-16);
  }
  .large-checks li {
    gap: var(--s-12);
    padding: var(--s-8) 0;
  }
}
}
/* components/support-list.css */
@layer components {
/* 支援テーマのページの「SYSLABOが、ともに進めること。」（左に題と説明、右に図） */
.support-section {
  background: var(--c-band);
  padding-block: var(--sec);
}
.support-list--visual {
  gap: var(--s-24);
  display: grid;
}
.support-item {
  background: var(--c-surface-bright);
  border-radius: var(--r-3xl);
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: start;
  gap: var(--s-20) var(--gap-m);
  min-width: 0;
  padding: var(--s-32);
  display: grid;
}
.support-item-heading {
  grid-area: 1 / 1;
  grid-template-columns: var(--icon-box-l) minmax(0, 1fr);
  align-items: start;
  gap: var(--s-18);
  display: grid;
}
.support-item-heading h3 {
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  font-size: var(--t3);
  line-height: var(--lh-title);
}
.support-item-symbol {
  color: var(--c-blue);
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  display: flex;
}
.support-item-symbol > svg {
  background: var(--c-blue-tint);
  border-radius: var(--r-xl);
  width: var(--icon-box-l);
  height: var(--icon-box-l);
  padding: var(--s-12);
}
.support-number {
  letter-spacing: var(--ls-label);
  font: var(--fw-medium) var(--fs-ui) / var(--lh-tight) var(--font-number);
}
.support-item-description {
  color: var(--c-body);
  grid-area: 2 / 1;
  min-width: 0;
  font-size: var(--t5);
  line-height: var(--lh-body);
}
.support-item-description p + p {
  margin-top: var(--s-12);
}
.support-item-description .link-chips {
  margin-top: var(--s-20);
}
.support-item-visual {
  grid-area: 1 / 2 / 3;
  align-self: center;
  width: 100%;
  min-width: 0;
}
@media (max-width: 1050px) {
  .support-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-28);
    padding: var(--s-28);
  }
}
@media (max-width: 767px) {
  .support-list--visual {
    gap: var(--s-20);
  }
  .support-item {
    flex-direction: column;
    gap: 0;
    padding: var(--s-24) var(--s-20);
    display: flex;
  }
  .support-item-heading {
    grid-template-columns: var(--icon-box-sp) minmax(0, 1fr);
    gap: var(--s-12);
    width: 100%;
  }
  .support-item-heading h3 {
    letter-spacing: var(--ls-none);
  }
  .support-item-symbol {
    gap: var(--s-4);
  }
  .support-item-symbol > svg {
    border-radius: var(--r-l);
    width: var(--icon-box-sp);
    height: var(--icon-box-sp);
    padding: var(--s-10);
  }
  .support-item-visual {
    margin: var(--s-18) 0;
  }
}
/* 支援テーマのページ：支援内容の後の案内（共同開発・AI環境の見直し） */
.theme-note-link {
  margin-top: calc(var(--sec-s) * -1);
  padding-bottom: var(--sec);
}
@media (max-width: 767px) {
  .theme-note-link {
    margin-top: calc(var(--s-24) * -1);
  }
}
}
/* components/secure-environment.css */
@layer components {
/* データ整備のページ：社外に出せない情報の扱い方（2つの構成をカードで並べ、その後に補足と案内） */
.secure-environment__closing {
  color: var(--c-body);
  max-width: var(--lead-w);
  margin-top: var(--s-28);
  font-size: var(--t5);
  line-height: var(--lh-body);
}
.secure-environment .text-link {
  margin-top: var(--s-16);
}
}
/* components/decision-summary.css */
@layer components {
/* 支援テーマのページの「支援を通じて整理すること」（左に題とリンク、右に3つの項目） */
.theme-decision-summary {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-18) var(--sec-s);
  margin-top: var(--s-40);
  padding-top: var(--s-32);
  display: grid;
}
.theme-decision-heading {
  grid-area: 1 / 1;
}
.theme-decision-heading .mini-label {
  color: var(--c-slate);
}
.theme-decision-heading h3 {
  text-wrap: balance;
  margin: var(--s-12) 0 0;
  font-size: var(--t3);
  line-height: var(--lh-heading);
}
.theme-decision-summary > ul {
  grid-area: 1 / 2 / 3;
  align-content: start;
  gap: var(--s-14);
  display: grid;
}
.theme-decision-summary > ul > li {
  color: var(--c-slate-deep);
  align-items: flex-start;
  gap: var(--s-12);
  font-size: var(--t5);
  line-height: var(--lh-title);
  display: flex;
}
.theme-decision-summary > ul > li > svg {
  color: var(--c-blue);
  margin-top: var(--s-4);
}
.theme-decision-link {
  width: fit-content;
  min-height: var(--touch);
  color: var(--c-blue);
  text-align: center;
  grid-area: 2 / 1;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  display: flex;
}
.theme-decision-link:hover {
  color: var(--c-blue-strong);
  border-color: currentColor;
}
.theme-decision-link:focus-visible {
  outline: var(--focus-ring-s) solid var(--c-blue);
  outline-offset: var(--s-4);
}
@media (max-width: 767px) {
  .theme-decision-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-20);
    margin-top: var(--s-28);
    padding-top: var(--s-28);
  }
  .theme-decision-heading,
  .theme-decision-summary > ul,
  .theme-decision-link {
    grid-area: auto;
  }
  .theme-decision-summary > ul {
    gap: var(--s-10);
  }
  .theme-decision-link {
    background: var(--c-surface-bright);
    border: 1px solid var(--c-blue-line);
    border-radius: var(--r-m);
    width: 100%;
    min-height: var(--control-h-s);
    padding: var(--s-12) var(--s-16);
  }
}
}
/* components/field-example.css */
@layer components {
/* 「現場のデータをAIで活かす」だけの部品：駐車場の例の並び（表示例と進め方）、ほかの現場、当社の役割の帯。表示例そのものは parking-screen.css */
.field-parking-layout {
  grid-template-columns: 1.08fr 1fr;
  align-items: start;
  gap: var(--sec-s);
  display: grid;
}
.field-example-steps > .mini-label {
  color: var(--c-slate);
  margin-bottom: var(--s-24);
}
.field-example-steps > div {
  grid-template-columns: var(--s-28) 1fr;
  gap: var(--s-8) var(--s-16);
  padding-block: var(--s-24);
  display: grid;
}
.field-step-number {
  color: var(--c-subtle);
  padding-top: var(--s-4);
  font: var(--fw-medium) var(--fs-ui) / var(--lh-body) var(--font-number);
}
.field-example-steps h3 {
  font-size: var(--t4);
  line-height: var(--lh-title);
}
.field-example-steps p {
  color: var(--c-body);
  grid-column: 2;
  font-size: var(--t5);
  line-height: var(--lh-body);
}
.field-other-examples {
  margin-top: var(--s-64);
}
.field-other-heading {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-32);
  margin-bottom: var(--s-24);
  display: flex;
}
.field-other-heading .mini-label {
  white-space: nowrap;
  color: var(--c-slate-deep);
  margin: 0;
  font-size: var(--t5);
}
.field-other-heading p {
  color: var(--c-muted);
  max-width: var(--field-other-w);
  font-size: var(--fs-ui);
  line-height: var(--lh-title);
}
.field-example-cards {
  grid-template-columns: 1fr 1fr;
  gap: var(--s-28);
  display: grid;
}
.field-example-cards article {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-2xl);
  padding: var(--s-32);
}
.field-example-cards svg {
  color: var(--c-slate-blue);
  margin-bottom: var(--s-18);
}
.field-example-cards h3 {
  font-size: var(--t4);
  line-height: var(--lh-title);
}
.field-example-cards p {
  color: var(--c-body);
  margin-top: var(--s-14);
  font-size: var(--t5);
  line-height: var(--lh-body);
}
/* 当社の役割の帯 */
.field-scope-section {
  background: var(--c-band);
  padding-block: var(--sec-s);
}
.field-scope-section .section-heading {
  align-items: center;
  margin-bottom: var(--s-36);
}
.field-scope-section .section-heading > svg {
  color: var(--c-slate-blue);
  margin-right: var(--s-36);
}
.field-scope-section .section-lead {
  max-width: var(--reading);
}
.field-role-grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--s-56);
  padding-top: var(--s-28);
  display: grid;
}
.field-role-grid h3 {
  margin-bottom: var(--s-12);
  font-size: var(--fs-item);
}
.field-role-grid p {
  color: var(--c-body);
  font-size: var(--t5);
  line-height: var(--lh-body);
}
.field-scope-note {
  color: var(--c-slate);
  margin-top: var(--s-28);
  font-size: var(--t6);
}
@media (max-width: 1050px) {
  .field-parking-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-28);
  }
  .field-example-steps > div {
    grid-template-columns: var(--s-24) 1fr;
    gap: var(--s-8) var(--s-12);
  }
  .field-other-heading {
    display: block;
  }
  .field-other-heading p {
    margin-top: var(--s-12);
  }
  .field-example-cards article {
    padding: var(--s-24);
  }
  .field-scope-section .section-heading > svg {
    display: none;
  }
  .field-role-grid {
    gap: var(--s-32);
  }
}
@media (max-width: 767px) {
  .field-parking-layout {
    grid-template-columns: 1fr;
    gap: var(--s-36);
  }
  .field-example-steps > .mini-label {
    margin-bottom: var(--s-20);
  }
  .field-example-steps > div {
    padding-block: var(--s-20);
  }
  .field-other-examples {
    margin-top: var(--s-48);
  }
  .field-example-cards {
    grid-template-columns: 1fr;
    gap: var(--s-16);
  }
  .field-example-cards article {
    padding: var(--s-24) var(--s-24);
  }
  .field-role-grid {
    grid-template-columns: 1fr;
    gap: var(--s-28);
    padding-top: var(--s-24);
  }
}
}
/* components/related-themes.css */
@layer components {
/* 支援テーマのページの「ほかのテーマも見る。」（ほかの8つのテーマへのリンク） */
.related-themes {
  padding-top: 0;
}
.related-themes .section-heading {
  margin-bottom: var(--s-36);
}
.theme-index-links {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-16) var(--s-28);
  display: grid;
}
.theme-index-links a {
  align-items: center;
  gap: var(--s-14);
  padding: var(--s-18) 0;
  font-size: var(--t5);
  font-weight: var(--fw-bold);
  display: flex;
}
.theme-index-links a > span {
  color: var(--c-blue);
  font: var(--fw-medium) var(--fs-ui) / var(--lh-ui) var(--font-number);
}
.theme-index-links a:hover {
  color: var(--c-blue);
}
/* 関連するAIの活用方法（「業務でのAI活用」の各説明へ） */
.related-themes__uses {
  margin-top: var(--s-40);
}
@media (max-width: 1050px) {
  .theme-index-links {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .related-themes {
    padding-top: var(--s-20);
  }
  .theme-index-links {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-8) var(--s-20);
  }
  .theme-index-links:lang(en) {
    grid-template-columns: 1fr;
  }
  .related-themes__uses {
    margin-top: var(--s-32);
  }
  .theme-index-links a {
    gap: var(--s-10);
    padding: var(--s-16) 0;
    font-size: var(--t6);
  }
}
}