/* トップ専用（2026-09-29 構成の作り直し・第2版）。
   コンセプト: 複雑 → 整理 → シンプル。細い流れがガラスを通って1本になる。
   主軸は Stripe（罫線は紫寄りの line、影は浮くものだけ・青みの影、角丸 6/8、光とガラスはヒーローと切替だけ）。
   色は styles.css の既存トークンと、ヒーローのリボンで使っている紫〜ミント（#7B6CF0 #8FA8F5 #8CCFF0 #8EE0CC）だけ。
   背景は paper と surface の2種。セクションごとにレイアウトを変え、カードUIを並べ続けない。
   文字サイズは 14 / 16 / 25 / 40 / 64 の5段。 */

:root { --fs-home-hero: clamp(40px, 5.2vw, 64px); }

/* --- ヒーロー -------------------------------------------------------------- */
.h-hero { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.h-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; }
.h-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-note); font-weight: 700; line-height: 1.5; letter-spacing: .08em; color: var(--brand);
}
.h-eyebrow::before { content: ""; width: var(--s-5); height: 2px; background-color: var(--brand); }
.h-title {
  margin-top: var(--s-4);
  font-family: var(--font-display); font-size: var(--fs-home-hero); font-weight: 700;
  line-height: var(--lh-display); letter-spacing: -.01em; color: var(--ink);
}
.h-offer { display: flex; flex-wrap: wrap; margin-top: var(--s-5); font-size: var(--fs-base); font-weight: 700; line-height: 1.5; color: var(--ink); }
.h-offer span + span::before { content: "／"; margin-inline: var(--s-3); color: var(--rule-strong); font-weight: 400; }
.h-lead { margin-top: var(--s-4); max-width: 28em; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--body); }

/* ビジュアル：細い流れ → ガラス → 1本の流れ */
.h-art { position: relative; padding-bottom: var(--s-7); }
.h-art .home-ribbon { top: 88%; left: -40%; width: 170%; z-index: -1; opacity: .7; }
.h-converge { position: relative; aspect-ratio: 600 / 440; perspective: 1200px; --gx: 0deg; --gy: 0deg; }
.h-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h-in { fill: none; stroke: url(#h-in); stroke-width: 1.5; }
.h-out { fill: none; stroke: url(#h-out); stroke-width: 5; stroke-linecap: round; }
.h-dots circle { fill: #7B6CF0; }
.h-dots .h-dot-out { fill: #FFFFFF; stroke: #5B4BD6; stroke-width: 2; }
.h-sources { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.h-sources li {
  position: absolute; left: 0; top: calc(var(--y) / 440 * 100%); transform: translateY(-50%);
  padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm);
  background-color: var(--surface); font-size: var(--fs-note); font-weight: 700; line-height: 1.5; color: var(--meta); white-space: nowrap;
}
.h-glass {
  position: absolute; left: 53%; top: 50%; width: 22%; height: 46%;
  display: grid; place-items: center; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .95);
  background-color: rgba(255, 255, 255, .34);
  background-image: linear-gradient(135deg, rgba(123, 108, 240, .28), rgba(143, 168, 245, .12) 48%, rgba(142, 224, 204, .26));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 50px 100px -20px rgba(50, 50, 93, .25), 0 30px 60px -30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .9);
  transform: translate(-50%, -50%) rotateY(calc(-16deg + var(--gx))) rotateX(var(--gy));
  transition: transform .4s var(--ease);
}
.h-glass-label { writing-mode: vertical-rl; font-size: var(--fs-note); font-weight: 700; letter-spacing: .2em; color: var(--brand-strong); }
.h-result { position: absolute; right: 0; top: calc(50% - var(--s-9)); text-align: right; }
.h-result b { display: block; font-size: var(--fs-base); line-height: 1.5; color: var(--ink); }
.h-result span { font-size: var(--fs-note); line-height: 1.5; color: var(--meta); }
.h-art .home-hand { right: 0; bottom: 0; font-size: var(--fs-h3); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .h-glass { animation: h-float 7s ease-in-out infinite alternate; }
}
@keyframes h-float {
  from { transform: translate(-50%, -50%) rotateY(calc(-16deg + var(--gx))) rotateX(var(--gy)); }
  to   { transform: translate(-50%, calc(-50% - 8px)) rotateY(calc(-16deg + var(--gx))) rotateX(var(--gy)); }
}

/* --- セクション共通 --------------------------------------------------------- */
.h-sec { padding-block: var(--s-9); }
.h-sec-surface { background-color: var(--surface); border-block: 1px solid var(--rule-soft); }
.h-head { max-width: 40em; }
.h-head h2 {
  margin-top: var(--s-4);
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1.35; color: var(--ink);
}
.h-head > p:not(.eyebrow) { margin-top: var(--s-5); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--body); }

/* --- 考え方と数字：大きな文字で1つの主張 ---------------------------------- */
.h-statement {
  margin-top: var(--s-5); max-width: 24em;
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1.35; color: var(--ink);
}
.h-statement span { display: block; margin-top: var(--s-5); max-width: 30em; font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 400; line-height: 1.7; color: var(--body); }
.h-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-8); padding: 0; list-style: none; border-top: 1px solid var(--line); }
.h-proof li { padding: var(--s-5) var(--s-5) 0; }
.h-proof li:first-child { padding-left: 0; }
.h-proof li + li { border-left: 1px solid var(--line); }
.h-proof-num { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; color: var(--brand); font-variant-numeric: tabular-nums; }
.h-proof-num .plus { margin-left: var(--s-1); font-size: var(--fs-base); vertical-align: 50%; }
.h-proof-label { margin-top: var(--s-2); font-size: var(--fs-base); font-weight: 700; line-height: 1.5; color: var(--ink); }
.h-proof-note { margin-top: var(--s-5); font-size: var(--fs-note); line-height: 1.5; color: var(--meta); }

/* --- 課題：左に見出しを固定し、右に行で並べる ------------------------------- */
.h-issues { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.h-issues .h-head { position: sticky; top: calc(64px + var(--s-7)); }
.h-issue-list { padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.h-issue-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--line); }
.h-issue-no { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; color: var(--brand); font-variant-numeric: tabular-nums; }
.h-issue-list h3 { font-size: var(--fs-base); font-weight: 700; line-height: 1.6; color: var(--ink); }
.h-issue-list p { margin-top: var(--s-1); font-size: var(--fs-base); line-height: 1.8; color: var(--body); }

/* --- 解決：1本の線でつながる4段階 --------------------------------------- */
.h-solve { position: relative; margin-top: var(--s-8); --p: 1; }
.h-solve-line { position: absolute; left: 6px; right: 0; top: 5px; height: 2px; background-color: var(--line); }
.h-solve-line i { position: absolute; inset: 0; background-image: linear-gradient(90deg, #5B4BD6, #8FA8F5 70%, #8EE0CC); transform: scaleX(var(--p)); transform-origin: left center; }
.h-solve-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); padding: 0; list-style: none; }
.h-solve-steps li { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-6); }
.h-solve-steps li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--brand-fill); background-color: var(--paper); transition: background-color .3s ease, box-shadow .3s ease;
}
.h-solve-steps li.is-on::before { background-color: var(--brand-fill); box-shadow: 0 0 0 6px rgba(91, 75, 214, .12); }
html:not(.js) .h-solve-steps li::before { background-color: var(--brand-fill); }
.h-solve-no { font-size: var(--fs-note); font-weight: 700; letter-spacing: .08em; color: var(--brand); }
.h-solve-steps b { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.4; color: var(--ink); }
.h-solve-steps li > span:last-child { font-size: var(--fs-base); line-height: 1.8; color: var(--body); }

.h-why { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; margin-top: var(--s-9); padding-top: var(--s-8); border-top: 1px solid var(--line); }
.h-why-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.4; color: var(--ink); }
.h-why > div > p { margin-top: var(--s-4); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--body); }
.h-why > div > p.h-why-note { color: var(--meta); }
.h-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); }
.h-compare-col { padding-top: var(--s-4); border-top: 2px solid var(--line); }
.h-compare-col.is-aclab { border-top-color: var(--brand-fill); }
.h-compare-title { font-size: var(--fs-base); font-weight: 700; line-height: 1.5; color: var(--meta); }
.is-aclab .h-compare-title { color: var(--brand); }
.h-compare ol { margin-top: var(--s-3); padding: 0; list-style: none; counter-reset: cmp; }
.h-compare li { counter-increment: cmp; position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-6); border-top: 1px solid var(--rule-soft); font-size: var(--fs-base); line-height: 1.8; color: var(--body); }
.h-compare li::before { content: counter(cmp); position: absolute; left: 0; top: var(--s-3); font-weight: 700; color: var(--meta); font-variant-numeric: tabular-nums; }
.is-aclab li { color: var(--ink); font-weight: 700; }
.is-aclab li::before { color: var(--brand); }

/* --- サービス：主1つ＋従2つ（1.6fr : 1fr） ------------------------------ */
/* 4本柱を 1.6fr : 1fr の2段で。左の広い枠（業務アプリ・AI研修）だけ淡い紫の面にして、主と従を作る */
.h-svc-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-7); }
.h-svc {
  display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-md); background-color: var(--paper); color: var(--body); text-decoration: none;
  transition: border-color var(--dur-micro) ease, box-shadow var(--dur-micro) ease, transform var(--dur-micro) ease;
}
.h-svc-wide { padding: var(--s-7); background-color: var(--tint); border-color: var(--tint); }
.h-svc-no { font-size: var(--fs-note); font-weight: 700; line-height: 1.5; letter-spacing: .08em; color: var(--brand); }
.h-svc h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.4; color: var(--ink); }
.h-svc-text { font-size: var(--fs-base); line-height: var(--lh-body); }
.h-svc-list { display: grid; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.h-svc-list span { position: relative; padding-left: var(--s-5); font-size: var(--fs-base); font-weight: 700; line-height: 1.8; color: var(--ink); }
.h-svc-list span::before { content: ""; position: absolute; left: 0; top: .85em; width: var(--s-3); height: 2px; background-color: var(--brand); }
.h-svc-more { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); min-height: 44px; font-size: var(--fs-base); font-weight: 700; color: var(--brand); }
.h-svc-more .i { width: 16px; height: 16px; stroke-width: 2; transition: transform var(--dur-micro) ease; }
@media (hover: hover) {
  .h-svc:hover { border-color: var(--brand); box-shadow: 0 18px 36px -24px rgba(50, 50, 93, .25); transform: translateY(-2px); }
  .h-svc:hover .h-svc-more .i { transform: translateX(4px); }
}
.h-svc:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.h-midcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.h-midcta p { max-width: 34em; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--body); }
.h-midcta .button { gap: var(--s-3); min-height: 52px; }
.h-midcta .button .i { width: 16px; height: 16px; stroke-width: 2; }

/* --- 事例：導入前／導入後の業務フロー --------------------------------------- */
.h-works-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.h-switch {
  display: inline-flex; padding: var(--s-1); border: 1px solid rgba(255, 255, 255, .95); border-radius: var(--r-md);
  background-color: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 36px -24px rgba(50, 50, 93, .25), inset 0 0 0 1px var(--rule-strong);
}
.h-switch button {
  min-width: 96px; min-height: 44px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-sm);
  background-color: transparent; font: inherit; font-size: var(--fs-base); font-weight: 700; color: var(--meta); cursor: pointer;
  transition: background-color var(--dur-micro) ease, color var(--dur-micro) ease;
}
.h-switch button[aria-pressed="true"] { background-color: var(--brand-fill); color: var(--on-dark); }
.h-switch button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html:not(.js) .h-switch { display: none; }

.h-cases2 { margin-top: var(--s-7); border-bottom: 1px solid var(--line); }
.h-case { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); gap: var(--s-6); align-items: center; padding-block: var(--s-6); border-top: 1px solid var(--line); }
.h-case-meta h3 { margin-top: var(--s-2); font-size: var(--fs-h3); line-height: 1.4; color: var(--ink); }
.h-flows { display: grid; }
.h-flow-row { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--s-3); margin: 0; padding: 0; list-style: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.h-flow-row li {
  position: relative; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm);
  background-color: var(--surface); font-size: var(--fs-base); line-height: 1.5; color: var(--ink);
}
.h-flow-row li + li { margin-left: var(--s-6); }
.h-flow-row li + li::before { content: ""; position: absolute; left: calc(var(--s-6) * -1); top: 50%; width: var(--s-6); height: 2px; background-color: var(--line); }
.h-flow-row.is-before li { color: var(--meta); }
.h-flow-row li.is-auto { border-color: var(--brand-fill); background-color: var(--tint); font-weight: 700; color: var(--brand-strong); }
.h-flow-row.is-after li + li::before { background-image: linear-gradient(90deg, #5B4BD6, #8EE0CC); }
.h-case-time { display: grid; justify-items: end; }
.h-case-time span { grid-area: 1 / 1; transition: opacity .5s var(--ease); font-variant-numeric: tabular-nums; }
.h-case-time .is-before { font-size: var(--fs-h3); font-weight: 700; color: var(--meta); }
.h-case-time .is-after { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; color: var(--brand); }
/* 状態の切替（JSあり）。JSなしでは両方を上下に並べて読める */
.js [data-h-works][data-state="after"] .is-before, .js [data-h-works][data-state="before"] .is-after { opacity: 0; visibility: hidden; }
.js [data-h-works][data-state="after"] .h-flow-row.is-before { transform: translateY(calc(var(--s-2) * -1)); }
.js [data-h-works][data-state="before"] .h-flow-row.is-after { transform: translateY(var(--s-2)); }
.js [data-h-works] .is-before, .js [data-h-works] .is-after { transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s; }
.js [data-h-works][data-state="after"] .is-after, .js [data-h-works][data-state="before"] .is-before { transition-delay: 0s; }
html:not(.js) .h-flow-row, html:not(.js) .h-case-time span { grid-area: auto; }
html:not(.js) .h-flow-row + .h-flow-row { margin-top: var(--s-3); }
html:not(.js) .h-flow-row::before { content: attr(aria-label); width: 100%; font-size: var(--fs-note); font-weight: 700; color: var(--meta); }

/* --- 支援プロセス：表のように左右に並べる ---------------------------------- */
.h-how { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.h-steps { padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.h-steps li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--line); }
.h-step-no { font-size: var(--fs-note); font-weight: 700; line-height: 1.8; letter-spacing: .08em; color: var(--brand); }
.h-steps b { display: block; font-size: var(--fs-base); line-height: 1.6; color: var(--ink); }
.h-steps li span:not(.h-step-no) { display: block; margin-top: var(--s-1); font-size: var(--fs-base); line-height: 1.8; color: var(--body); }

/* --- プロフィール ---------------------------------------------------------- */
.h-profile { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
.h-profile-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.h-profile-body h2 { margin-top: var(--s-4); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1.35; color: var(--ink); }
.h-profile-role { margin-top: var(--s-2); font-size: var(--fs-base); font-weight: 700; color: var(--meta); }
.h-profile-body > p:not(.eyebrow):not(.h-profile-role):not(.block-more) { margin-top: var(--s-4); max-width: 34em; line-height: var(--lh-body); }
.h-profile .spec .row { grid-template-columns: 120px minmax(0, 1fr); }

/* --- FAQ・相談 ------------------------------------------------------------- */
.h-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.h-faq .faq-list summary { max-width: none; }
.h-contact .contact-inner { max-width: none; }
.h-contact h2, .h-contact .lead { max-width: 34em; }

/* 和文の改行は文節で（1〜2字だけの行を作らない） */
.h-title, .h-lead, .h-head h2, .h-head > p, .h-statement, .h-issue-list h3, .h-issue-list p,
.h-solve-steps span, .h-why p, .h-compare li, .h-svc-text, .h-midcta p, .h-flow-row li,
.h-steps span, .h-profile-body p, .h-contact h2, .h-contact p, .h-proof-label, .h-proof-note { word-break: auto-phrase; }

/* --- タブレット ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .h-hero-grid, .h-issues, .h-why, .h-how, .h-profile, .h-faq { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .h-issues .h-head { position: static; }
  .h-converge { max-width: 600px; }
  .h-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-proof li:nth-child(3) { padding-left: 0; border-left: 0; }
  .h-proof li:nth-child(n+3) { margin-top: var(--s-5); }
  .h-solve-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); }
  .h-case { grid-template-columns: minmax(0, 1fr) auto; }
  .h-flows { grid-column: 1 / -1; grid-row: 2; }
  .h-case-time { grid-column: 2; grid-row: 1; }
  .h-profile-photo { max-width: 400px; }
}

/* --- スマホ ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .h-hero { padding-top: var(--s-6); padding-bottom: var(--s-7); }
  .h-sec { padding-block: var(--s-8); }
  .h-statement span { font-size: var(--fs-base); }
  .h-proof-num { font-size: var(--fs-h3); }
  .h-issue-list li { grid-template-columns: 40px minmax(0, 1fr); }
  .h-issue-no { font-size: var(--fs-base); }
  .h-solve-line { left: 5px; right: auto; top: 6px; bottom: 0; width: 2px; height: auto; }
  .h-solve-line i { transform: scaleY(var(--p)); transform-origin: center top; }
  .h-solve-steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .h-solve-steps li { padding-top: 0; padding-left: var(--s-6); }
  .h-compare { grid-template-columns: minmax(0, 1fr); }
  .h-svc-grid { grid-template-columns: minmax(0, 1fr); }
  .h-svc-wide { padding: var(--s-6); }
  .h-midcta .button { width: 100%; justify-content: center; }
  .h-flow-row { flex-direction: column; align-items: flex-start; }
  .h-flow-row li + li { margin-left: 0; margin-top: var(--s-4); }
  .h-flow-row li + li::before { left: var(--s-5); top: calc(var(--s-4) * -1); width: 2px; height: var(--s-4); }
  .h-steps li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .h-profile .spec .row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .h-art .home-hand { position: static; display: block; margin-top: var(--s-4); text-align: right; font-size: var(--fs-base); }
  .h-art { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .h-svc, .h-svc-more .i, .h-glass, .h-flow-row, .h-case-time span { transition: none; animation: none; }
}
.h-case-time .is-after small { display: block; font-size: var(--fs-note); font-weight: 700; line-height: 1.5; color: var(--meta); text-align: right; }
.h-contact .lead { font-size: var(--fs-base); }