/* TOP専用。共通CSSと詳細5ページの見た目は維持する。 */
.hpa-top .hpa-jp-phrase { display:inline-block; white-space:nowrap; max-width:100%; }
.hpa-top .hpa-top-title-line { display:block; }
.hpa-top h1 { font-size:28px; text-wrap:wrap; }
.hpa-top .hpa-top-visual { position:relative; }
.hpa-top .hpa-top-visual>img { width:100%; }
.hpa-top .hpa-top-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hpa-top .hpa-info-grid { grid-template-columns:minmax(0,1fr); }
.hpa-top .hpa-top-illustrated-head { display:grid; gap:20px; margin-bottom:32px; }
.hpa-top-illustrated-head .hpa-section-head { margin-bottom:0; }
.hpa-top-illustrated-head>img { width:140px; justify-self:end; }
.hpa-top .hpa-top-section-note { margin-top:24px; color:var(--hpa-sub); font-size:14px; }
.hpa-top .hpa-top-flow-panel { margin-top:48px; padding:24px; background:#fff; border:1px solid var(--hpa-line); border-radius:var(--hpa-radius); }
.hpa-top-flow-head h3 { font-size:clamp(20px,2.2vw,28px); margin-block:10px 14px; }
.hpa-top .hpa-top-flow { display:grid; gap:28px; margin-top:28px; }
.hpa-top-flow>li { position:relative; padding:20px; min-width:0; background:var(--hpa-soft); border:1px solid var(--hpa-line); border-radius:12px; }
.hpa-top-flow>li:not(:last-child)::after { content:'↓'; position:absolute; left:50%; bottom:-31px; transform:translateX(-50%); color:var(--hpa-action); }
.hpa-top .hpa-top-actor-human { background:var(--hpa-yellow); color:#65491a; }
.hpa-top-flow-number { float:right; font-size:12px; color:var(--hpa-sub); }
.hpa-top-flow h4 { margin-block:14px 8px; }
.hpa-top-flow p { font-size:14px; color:var(--hpa-sub); }
.hpa-top .hpa-top-tool-note { max-width:850px; margin-top:28px; padding-left:20px; border-left:3px solid #b2cfc2; color:var(--hpa-sub); font-size:14px; }
.hpa-top-tool-note p+p { margin-top:14px; }
.hpa-top .hpa-top-approach-intro { display:grid; gap:32px; align-items:center; margin-bottom:40px; }
.hpa-top-approach-intro .hpa-section-head { margin-bottom:24px; }
.hpa-top-approach-intro>img { width:min(100%,300px); justify-self:center; }
.hpa-top-approach-copy p { color:var(--hpa-sub); }
.hpa-top-approach-copy p+p { margin-top:16px; }
.hpa-top .hpa-top-principles { display:grid; gap:0; border-top:1px solid var(--hpa-line); }
.hpa-top-principles>li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:16px; padding-block:28px; border-bottom:1px solid var(--hpa-line); }
.hpa-top-principles h3 { margin-bottom:12px; }
.hpa-top-principles p { color:var(--hpa-sub); max-width:55em; }
.hpa-top .hpa-top-process-layout { display:grid; gap:36px; }
.hpa-top .hpa-top-process { display:grid; gap:0; }
.hpa-top-process>li { display:grid; grid-template-columns:40px minmax(0,1fr); gap:18px; padding-block:24px; border-bottom:1px solid var(--hpa-line); position:relative; }
.hpa-top-process>li:first-child { padding-top:0; }
.hpa-top-process-number { background:#fff; border:1px solid #b2cfc2; border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--hpa-action); }
.hpa-top-process h3 { font-size:18px; margin-block:6px 10px; }
.hpa-top-process p { font-size:15px; color:var(--hpa-sub); }
.hpa-top-line-consult { margin-bottom:28px; }
.hpa-top .hpa-top-line-consult .hpa-btn { margin-bottom:12px; }
@media (max-width:599px) { .hpa-top-line-consult .hpa-btn { width:100%; } }
.hpa-top .hpa-top-faq { max-width:960px; display:grid; gap:12px; }
.hpa-top-faq-item { border:1px solid var(--hpa-line); border-radius:12px; background:#fff; }
.hpa-top-faq-item summary { display:grid; grid-template-columns:22px minmax(0,1fr) 16px; gap:12px; align-items:start; min-height:56px; padding:22px 20px; cursor:pointer; font-weight:700; line-height:1.8; list-style:none; }
.hpa-top-faq-item summary::-webkit-details-marker { display:none; }
.hpa-top-faq-item summary:focus-visible { outline:3px solid #203d36; outline-offset:4px; border-radius:12px; }
.hpa-top-faq-q { color:var(--hpa-action); }
.hpa-top-faq-toggle { width:16px; height:16px; position:relative; margin-top:6px; }
.hpa-top-faq-toggle::before,.hpa-top-faq-toggle::after { content:''; position:absolute; top:7px; left:0; width:16px; height:2px; background:var(--hpa-action); }
.hpa-top-faq-toggle::after { transform:rotate(90deg); transition:transform .2s var(--hpa-ease); }
.hpa-top-faq-item[open] .hpa-top-faq-toggle::after { transform:rotate(0deg); }
.hpa-top-faq-item[open] { background:var(--hpa-accent); border-color:#c6dbd0; }
.hpa-top-faq-answer { padding:0 20px 22px 54px; color:var(--hpa-sub); font-size:15px; }
@media (max-width:374px) {
  .hpa-top h1 { font-size:26px; }
  .hpa-top .hpa-top-flow-panel { padding:20px; }
  .hpa-top-flow-head h3 { font-size:18px; }
  .hpa-top-faq-item summary { padding:20px 16px; gap:10px; }
  .hpa-top-faq-answer { padding:0 16px 20px; }
}
@media (min-width:600px) {
  .hpa-top .hpa-top-illustrated-head { grid-template-columns:minmax(0,1fr) 170px; gap:36px; align-items:center; }
  .hpa-top-illustrated-head>img { width:170px; }
}
@media (min-width:700px) { .hpa-top .hpa-info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px) {
  .hpa-top h1 { font-size:clamp(30px,3.25vw,42px); }
  .hpa-top .hpa-top-illustrated-head { grid-template-columns:minmax(0,1fr) 220px; }
  .hpa-top-illustrated-head>img { width:220px; }
  .hpa-top .hpa-top-approach-intro { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:64px; }
  .hpa-top-approach-intro>img { width:360px; }
  .hpa-top .hpa-top-process-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:80px; }
  .hpa-top .hpa-top-flow-panel { padding:36px; }
}
@media (min-width:1100px) {
  .hpa-top .hpa-info-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hpa-top .hpa-top-flow { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
  .hpa-top-flow>li:not(:last-child)::after { content:'→'; left:auto; right:-21px; top:50%; bottom:auto; transform:translateY(-50%); }
}
/* 入力→台帳→通知を一度だけ描く。JS無効時は完成状態の図が残る。 */
@media (prefers-reduced-motion:no-preference) {
  .hpa-top-visual.is-running .hpa-top-row { animation:hpa-top-row .65s .6s both; }
  .hpa-top-visual.is-running .hpa-top-route { stroke-dasharray:1; animation:hpa-top-route .7s both; }
  .hpa-top-visual.is-running .hpa-top-route-one { animation-delay:.1s; }
  .hpa-top-visual.is-running .hpa-top-route-two { animation-delay:1s; }
  .hpa-top-visual.is-running .hpa-top-route-three { animation-delay:1.45s; }
  .hpa-top-visual.is-running .hpa-top-notice { animation:hpa-top-notice .4s 1.8s both; }
  .hpa-top-visual.is-running .hpa-top-check { stroke-dasharray:1; animation:hpa-top-route .35s 2.15s both; }
}
@keyframes hpa-top-row { from { opacity:0; } to { opacity:1; } }
@keyframes hpa-top-route { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes hpa-top-notice { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }