/* components/hero.css */
@layer components {
/* トップの最初の画面（左に題、右に書類とリボンの図） */
.hero {
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: var(--s-16);
  min-height: var(--hero-min);
  padding-top: var(--s-24);
  padding-bottom: var(--s-80);
  display: grid;
  position: relative;
}
.hero-copy {
  z-index: var(--z-raise);
  position: relative;
}
.hero-eyebrow {
  align-items: center;
  gap: var(--s-10);
  margin-bottom: var(--s-32);
  display: flex;
}
.status-dot {
  background: var(--c-blue);
  border-radius: var(--r-round);
  width: var(--s-6);
  height: var(--s-6);
  box-shadow: var(--shadow-dot);
}
.hero h1 {
  font-size: var(--t1);
  line-height: var(--lh-heading);
}
.hero-lead {
  white-space: pre-line;
  color: var(--c-body);
  margin-top: var(--s-24);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}
.hero-buttons {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-24);
  margin-top: var(--s-36);
  display: flex;
}
.hero-art {
  margin: 0 var(--hero-art-pull) 0 calc(var(--s-8) * -1);
  position: relative;
}
.hero-art-caption {
  color: var(--c-subtle);
  letter-spacing: var(--ls-label);
  justify-content: center;
  align-items: center;
  gap: var(--s-20);
  margin-top: calc(var(--s-20) * -1);
  font: var(--fw-bold) var(--fs-ui) / var(--lh-ui) var(--font-label);
  display: flex;
}
.caption-plus {
  color: var(--c-blue);
  font-size: var(--t5);
  font-weight: var(--fw-normal);
}
/* 書類とリボンの図（ゆっくり浮かび、リボンに光が流れる） */
.partnership-scene {
  isolation: isolate;
  aspect-ratio: 6 / 5;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  max-width: var(--hero-art-max);
  position: relative;
}
.partnership-scene__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.partnership-scene__assembly {
  transform-box: fill-box;
  transform-origin: 50% 55%;
  animation: partnership-scene-float var(--dur-scene) var(--ease-in-out) infinite;
}
.partnership-scene__ground {
  transform-box: fill-box;
  transform-origin: 50%;
  animation: partnership-scene-shadow var(--dur-scene) var(--ease-in-out) infinite;
}
.partnership-scene__ribbon-light {
  stroke-dasharray: var(--scene-ribbon-dash);
  opacity: var(--scene-ribbon-light);
  animation: partnership-scene-ribbon var(--dur-ribbon) linear infinite;
}
@keyframes partnership-scene-float {
  0%,
  100% {
    transform: var(--float-low);
  }
  50% {
    transform: var(--float-high);
  }
}
@keyframes partnership-scene-shadow {
  0%,
  100% {
    opacity: var(--scene-shadow-low);
    transform: scaleX(1.02);
  }
  50% {
    opacity: var(--scene-shadow-high);
    transform: scaleX(0.95);
  }
}
@keyframes partnership-scene-ribbon {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1000px;
  }
}
@media (max-width: 1050px) {
  .hero {
    min-height: var(--hero-min-tablet);
  }
  .hero-art {
    margin: 0 calc(var(--s-20) * -1) 0 calc(var(--s-24) * -1);
  }
  .hero-art-caption {
    gap: var(--s-12);
  }
}
@media (max-width: 767px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-10);
    min-height: 0;
    padding-top: var(--s-40);
    padding-bottom: var(--s-64);
    display: flex;
  }
  .hero-eyebrow {
    margin-bottom: var(--s-20);
  }
  .hero-lead {
    margin-top: var(--s-20);
  }
  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-18);
    margin-top: var(--s-24);
  }
  .hero-art {
    align-self: center;
    width: 100%;
    max-width: var(--hero-art-max-sp);
    max-height: var(--hero-art-h-sp);
    margin: var(--s-10) auto 0;
  }
  .hero-art .partnership-scene {
    max-height: var(--hero-art-h-sp);
  }
  .hero-art-caption {
    margin-top: calc(var(--s-32) * -1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .partnership-scene__assembly,
  .partnership-scene__ground,
  .partnership-scene__ribbon-light {
    animation: none;
  }
  .partnership-scene__ribbon-light {
    opacity: 0;
  }
}
}
/* components/trust-strip.css */
@layer components {
/* トップの信頼の帯（4つの事実。押すと出典のページが開く） */
.trust-strip {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  grid-template-columns: repeat(4, 1fr);
  padding: var(--s-24) var(--s-6);
  display: grid;
  box-shadow: var(--shadow-soft-s);
}
.trust-fact {
  border-right: 1px solid var(--c-line);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: var(--trust-fact-h);
  padding: var(--s-4) var(--s-18);
  display: flex;
}
.trust-fact:last-child {
  border: 0;
}
.fact-label {
  letter-spacing: var(--ls-label);
  color: var(--c-muted);
  font: var(--fw-bold) var(--fs-ui) / var(--lh-ui) var(--font-label);
}
.trust-fact strong {
  text-align: center;
  align-items: center;
  gap: var(--s-8);
  margin-top: var(--s-8);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  display: flex;
}
.trust-fact b {
  letter-spacing: var(--ls-number);
  color: var(--c-blue);
  font: var(--fw-semibold) var(--t3) / var(--lh-none) var(--font-number);
}
.trust-fact:hover strong {
  color: var(--c-blue);
}
@media (max-width: 1050px) {
  .trust-fact {
    padding-inline: var(--s-10);
  }
}
@media (max-width: 767px) {
  .trust-strip {
    grid-template-columns: 1fr 1fr;
    padding: var(--s-8) var(--s-6);
  }
  .trust-fact {
    min-height: var(--trust-fact-h-sp);
    padding: var(--s-18) var(--s-10);
  }
  .trust-fact:nth-child(2) {
    border-right: 0;
  }
  .trust-fact strong {
    margin-top: var(--s-6);
  }
}
}
/* components/guide.css */
@layer components {
/* トップの「いまの状況から、次の一歩を選ぶ。」（状況のタブと、選んだ状況の説明） */
.next-step-section .section-heading {
  align-items: flex-end;
}
.guide-counter {
  color: var(--c-blue);
  letter-spacing: var(--ls-number);
  white-space: nowrap;
  align-items: baseline;
  gap: var(--s-12);
  padding-bottom: var(--s-10);
  font: var(--fw-normal) var(--t3) / var(--lh-none) var(--font-number);
  display: flex;
}
.guide-counter i {
  color: var(--c-muted);
  letter-spacing: var(--ls-none);
  font-size: var(--t6);
  font-style: normal;
}
.guide-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-12);
  margin-bottom: var(--s-20);
  display: grid;
}
.guide-tabs button {
  text-align: left;
  color: var(--c-slate-deep);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-xl);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-12);
  padding: var(--s-20);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
  transition:
    background var(--dur-base),
    color var(--dur-base),
    border-color var(--dur-base);
  display: flex;
}
.guide-tabs button > span:last-child {
  text-wrap: balance;
}
.guide-tabs button:hover {
  background: var(--c-blue-wash);
  border-color: var(--c-blue-pale);
}
.guide-tabs button[aria-selected="true"] {
  color: var(--c-on-blue);
  background: var(--c-blue);
  border-color: var(--c-blue);
}
.guide-tab-top {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-14);
  width: 100%;
  display: flex;
}
.guide-tab-number {
  color: var(--c-slate-blue);
  font: var(--fw-medium) var(--fs-ui) / var(--lh-none) var(--font-number);
}
.guide-tabs button[aria-selected="true"] .guide-tab-number {
  color: var(--c-on-blue-muted);
}
.guide-tab-top > svg {
  color: var(--c-slate-blue);
  transition:
    color var(--dur-slow),
    transform var(--dur-slow);
}
.guide-tabs [aria-selected="true"] .guide-tab-top > svg {
  color: var(--c-on-blue);
  transform: translateY(var(--lift-s));
}
/* スマホでは、タブの代わりに選ぶ欄（押すと、青い一覧が開く） */
.guide-picker {
  display: none;
  position: relative;
}
.guide-picker__label {
  color: var(--c-slate);
  margin-bottom: var(--s-10);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  display: block;
}
.guide-picker__button {
  width: 100%;
  min-height: var(--select-h);
  color: var(--c-blue-deep);
  text-align: left;
  background: var(--c-white);
  border: 1px solid var(--c-blue-soft);
  border-radius: var(--r-m);
  justify-content: space-between;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-14) var(--s-16);
  font-size: var(--t5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
  display: flex;
}
.guide-picker__button > svg {
  color: var(--c-blue);
  flex-shrink: 0;
  transition: transform var(--dur-base);
}
.guide-picker__button[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}
.guide-picker__list {
  z-index: var(--z-popover);
  color: var(--c-on-blue);
  background: var(--c-blue);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  position: absolute;
  top: calc(100% + var(--s-8));
  left: 0;
  right: 0;
  box-shadow: var(--shadow-popover);
}
.guide-picker__list:focus {
  outline: none;
}
.guide-picker__list [role="option"] {
  cursor: pointer;
  border-radius: var(--r-m);
  grid-template-columns: var(--s-20) minmax(0, 1fr);
  align-items: start;
  gap: var(--s-10);
  padding: var(--s-12);
  font-size: var(--t5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
  display: grid;
}
.guide-picker__list [role="option"] > svg {
  visibility: hidden;
  margin-top: var(--s-2);
}
.guide-picker__list [aria-selected="true"] > svg {
  visibility: visible;
}
.guide-picker__list :is(.is-active, [role="option"]:hover) {
  background: var(--c-blue-strong);
}
/* 選んだ状況の説明 */
.guide-panel {
  background: var(--c-blue-white);
  border: 1px solid var(--c-white);
  border-radius: var(--r-card);
  padding: var(--s-36) var(--s-40);
  box-shadow: var(--shadow-panel);
}
.guide-panel-intro {
  align-items: flex-start;
  gap: var(--s-28);
  padding-bottom: var(--s-28);
  display: flex;
}
.guide-result-label {
  color: var(--c-blue);
  white-space: nowrap;
  padding-top: var(--s-4);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
}
.guide-panel-intro h3 {
  max-width: var(--reading);
  font-size: var(--t4);
  line-height: var(--lh-title);
}
.guide-work-grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-m);
  padding-block: var(--s-28);
  display: grid;
}
.guide-work-grid h4,
.guide-decisions h4 {
  color: var(--c-slate-deep);
  align-items: center;
  gap: var(--s-10);
  margin: 0 0 var(--s-12);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
  display: flex;
}
.guide-work-grid h4 > svg,
.guide-decisions h4 > svg {
  color: var(--c-blue);
}
.guide-panel:not([hidden]) .guide-work-grid h4 > svg {
  animation: guide-icon-settle var(--dur-settle) var(--ease-out) both;
}
.guide-work-grid p {
  color: var(--c-body);
  font-size: var(--t5);
  line-height: var(--lh-body);
}
.guide-decisions {
  background: var(--c-blue-tint);
  border-radius: var(--r-l);
  padding: var(--s-24) var(--s-28);
}
.guide-decisions ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-24);
  display: grid;
}
.guide-decisions li {
  gap: var(--s-10);
  font-size: var(--fs-ui);
  line-height: var(--lh-title);
  display: flex;
}
.guide-decisions li svg {
  color: var(--c-blue);
  margin-top: var(--s-6);
}
/* 関連するAIの活用方法・サポート（「業務でのAI活用」の各説明へ）：名前を左に小さく、札を右に並べる。
   名前の列は一番長い名前の幅にそろえる（行は subgrid）。スマホは名前の下に札 */
.guide-related {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: var(--s-12) var(--s-20);
  margin-top: var(--s-24);
  display: grid;
}
.guide-related-row {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  row-gap: var(--s-8);
  display: grid;
}
.guide-related-label {
  color: var(--c-muted);
  font-size: var(--t6);
  line-height: var(--lh-title);
}
/* 支援テーマの説明へのリンク（文言にテーマの名前を入れる）と、ご相談のボタンを右にそろえる */
.guide-panel-footer {
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-20);
  margin-top: var(--s-24);
  display: flex;
}
.guide-panel-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-16) var(--s-24);
  display: flex;
}
.guide-consult-link {
  min-height: var(--touch);
  color: var(--c-blue);
  text-align: center;
  background: var(--c-white);
  border: 1px solid var(--c-blue-pale);
  border-radius: var(--r-m);
  justify-content: center;
  align-items: center;
  padding: var(--s-10) var(--s-16);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
  display: flex;
}
.guide-consult-link:hover {
  border-color: var(--c-blue);
  background: var(--c-blue-wash);
}
.guide-note {
  color: var(--c-muted);
  margin-top: var(--s-20);
  font-size: var(--t6);
  line-height: var(--lh-title);
}
@keyframes guide-icon-settle {
  0% {
    transform: var(--settle-from);
  }
  100% {
    transform: none;
  }
}
@media (max-width: 1050px) {
  .guide-tabs {
    gap: var(--s-8);
  }
  .guide-tabs button {
    padding: var(--s-16) var(--s-14);
  }
  .guide-panel {
    padding: var(--s-32);
  }
  .guide-panel-intro {
    gap: var(--s-20);
  }
  .guide-decisions ul {
    grid-template-columns: 1fr;
    gap: var(--s-12);
  }
}
@media (max-width: 767px) {
  .next-step-section .section-heading {
    display: block;
  }
  .guide-counter,
  .guide-tabs {
    display: none;
  }
  .guide-picker {
    margin-bottom: var(--s-18);
    display: block;
  }
  .guide-panel {
    border-radius: var(--r-2xl);
    padding: var(--s-24) var(--s-20);
  }
  .guide-panel-intro {
    padding-bottom: var(--s-24);
    display: block;
  }
  .guide-result-label {
    margin-bottom: var(--s-12);
    padding: 0;
    display: block;
  }
  .guide-work-grid {
    grid-template-columns: 1fr;
    gap: var(--s-24);
    padding-block: var(--s-24);
  }
  .guide-decisions {
    padding: var(--s-20) var(--s-16);
  }
  .guide-decisions li {
    gap: var(--s-8);
  }
  .guide-related {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-16);
  }
  .guide-panel-footer {
    margin-top: var(--s-20);
    display: block;
  }
  .guide-panel-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-14);
    width: 100%;
  }
  .guide-consult-link {
    min-height: var(--control-h-s);
    padding: var(--s-12) var(--s-16);
  }
}
@media (prefers-reduced-motion: reduce) {
  .guide-panel:not([hidden]) .guide-work-grid h4 > svg {
    animation: none;
  }
  :is(.guide-tab-top, .guide-picker__button) > svg {
    transition: none;
  }
}
}
/* components/partnership.css */
@layer components {
/* トップの「一緒に考える。一緒につくる。」の帯（PCは題と説明を左右に並べる） */
.partnership-section {
  background: var(--c-band);
  padding-block: var(--sec);
  position: relative;
  overflow: hidden;
}
.partnership-top {
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--gap-l);
  display: grid;
}
.partnership-top h2 {
  font-size: var(--t2);
  line-height: var(--lh-heading);
}
.partnership-top p {
  white-space: pre-line;
  color: var(--c-body);
  max-width: var(--partnership-lead-w);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}
@media (max-width: 1050px) {
  .partnership-top {
    gap: var(--s-32);
  }
}
@media (max-width: 767px) {
  .partnership-top {
    grid-template-columns: 1fr;
    gap: var(--s-20);
  }
  .partnership-top p {
    max-width: 100%;
  }
}
}
/* components/work-section.css */
@layer components {
/* トップの「業務でのAI活用」の帯 */
.work-section {
  background: var(--c-band);
  padding-block: var(--sec);
}
}
/* components/approach-preview.css */
@layer components {
/* トップの「納得して、次の開発を決められるように。」（左に題、右に3つの進め方） */
.approach-preview {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--gap-xl);
  display: grid;
}
.approach-preview .section-lead {
  max-width: var(--approach-lead-w);
}
.approach-preview .button {
  margin-top: var(--s-36);
}
.process-preview {
  padding-top: var(--s-8);
}
.process-preview > a {
  align-items: flex-start;
  gap: var(--s-24);
  padding-block: var(--s-28);
  display: flex;
}
.process-preview > a > span {
  color: var(--c-blue);
  padding-top: var(--s-2);
  font: var(--fw-medium) var(--t3) / var(--lh-tight) var(--font-number);
}
.process-preview > a > div {
  flex: 1;
}
.process-preview h3 {
  font-size: var(--fs-item);
  line-height: var(--lh-title);
}
.process-preview p {
  color: var(--c-body);
  margin-top: var(--s-12);
  font-size: var(--t5);
  line-height: var(--lh-body);
}
.process-preview > a:hover h3 {
  color: var(--c-blue);
}
@media (max-width: 1050px) {
  .approach-preview {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--s-40);
  }
  .process-preview > a {
    gap: var(--s-16);
  }
}
@media (max-width: 767px) {
  .approach-preview {
    display: block;
  }
  .approach-preview .button {
    margin-top: var(--s-24);
  }
  .process-preview {
    margin-top: var(--s-28);
  }
  .process-preview > a {
    gap: var(--s-14);
    padding-block: var(--s-24);
  }
}
}