/* トップのヒーロー（3枚のスライド＋文字の動き）。左に文字面、右に画像。 */
/* 文字は画像の上に載せない（画像に左右されず読める）。 */
body.home-v2 main { padding-block-start: 0; }
.hs-hero {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: 600px; background: var(--color-info); overflow: hidden;
}
.hs-hero__text {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 56px 24px 56px max(48px, calc((100% - 1280px) / 2 + 48px));
  min-width: 0;
}
.hs-hero h1 { font-size: 40px; }
.hs-hero h1 .accent { color: var(--color-primary); }

.hs-media { position: relative; margin: 0; min-width: 0; min-height: 360px; }
.hs-slides { position: absolute; inset: 0; }
.hs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hs-slide.is-active { opacity: 1; }
.hs-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-slide[data-pos="left"] img { object-position: 20% center; }
.hs-slide[data-pos="center"] img { object-position: 50% center; }
/* soft fade from the text panel into the image */
.hs-media::before {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -1px; width: 96px; pointer-events: none;
  background: linear-gradient(90deg, var(--color-info), rgba(232, 243, 250, 0));
}

.hs-media__cap { position: absolute; z-index: 2; top: 16px; right: 16px; margin: 0; }
.hs-media__cap .work__ai-badge { background: rgba(255, 255, 255, .92); }

/* controls: each target is 52px or more */
.hs-ctrl {
  position: absolute; z-index: 2; left: 112px; bottom: 16px;
  display: flex; align-items: center; gap: 0;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--color-border); border-radius: 10px; padding: 0 4px;
}
.hs-dot, .hs-toggle {
  min-width: 52px; min-height: 52px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; border-radius: 8px; color: var(--color-primary);
}
.hs-dot span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-primary); background: #fff; transition: background .2s, transform .2s; }
.hs-dot.is-active span { background: var(--color-primary); transform: scale(1.15); }
.hs-toggle { border-left: 1px solid var(--color-border); border-radius: 0 8px 8px 0; margin-left: 4px; }
.hs-toggle svg { width: 22px; height: 22px; }
.hs-toggle .i-play { display: none; }
.hs-toggle[aria-pressed="true"] .i-play { display: block; }
.hs-toggle[aria-pressed="true"] .i-pause { display: none; }
.hs-dot:focus-visible, .hs-toggle:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }

/* ---- dynamic text (only when JS added .js-anim; never under reduced motion) ---- */
.hs-hero h1 .ch { display: inline-block; }
.hs-hero.js-anim { --dx: 0px; --dy: 56px; --rot: 0deg; }
.hs-hero.js-anim[data-dir="side"] { --dx: -70px; --dy: 0px; --rot: -6deg; }
.hs-hero.js-anim[data-dir="drop"] { --dx: 0px; --dy: -56px; --rot: 5deg; }
.hs-hero.js-anim h1 .ch { opacity: 0; }
.hs-hero.js-anim h1 .accent .ch {
  color: var(--color-primary);
  background: linear-gradient(100deg, var(--color-primary) 40%, #4b8ab3 50%, var(--color-primary) 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hs-hero.is-play h1 .ch {
  animation: hs-pop .7s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i) * .05s);
}
.hs-hero.is-play[data-dir="side"] h1 .ch:nth-child(even) { --dx: 70px; --rot: 6deg; }
.hs-hero.is-play h1 .accent .ch {
  animation: hs-pop-big .8s cubic-bezier(.34, 1.56, .64, 1) both, hs-shine 6s ease-in-out 1.6s infinite;
  animation-delay: calc(var(--i) * .05s), calc(1.6s + var(--i) * .12s);
}
.hs-hero.js-anim .lead, .hs-hero.js-anim .btn-row, .hs-hero.js-anim .hero__tel { opacity: 0; }
.hs-hero.is-play .lead { animation: hs-rise .7s cubic-bezier(.22, 1, .36, 1) .85s both; }
.hs-hero.is-play .btn-row { animation: hs-rise .7s cubic-bezier(.34, 1.4, .64, 1) 1.05s both; }
.hs-hero.is-play .hero__tel { animation: hs-rise .6s ease-out 1.25s both; }
.hs-hero.is-play .btn-row .btn--cta { animation: hs-pulse 3.6s ease-in-out 2.4s infinite; }
@keyframes hs-pop {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
  to { opacity: 1; transform: none; }
}
@keyframes hs-pop-big {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.6) rotate(var(--rot)); }
  60% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: none; }
}
@keyframes hs-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hs-shine { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes hs-pulse { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(201, 69, 59, 0); } 85% { box-shadow: 0 0 0 10px rgba(201, 69, 59, .18); } }

@media (prefers-reduced-motion: reduce) {
  .hs-hero .ch, .hs-hero .lead, .hs-hero .btn-row, .hs-hero .hero__tel, .hs-hero .btn--cta { animation: none !important; opacity: 1 !important; }
  .hs-slide { transition: none; }
  .hs-toggle { display: none; }
}

@media (max-width: 900px) {
  .hs-hero { grid-template-columns: 1fr; min-height: 0; }
  /* image first, then text on the solid panel */
  .hs-media { order: -1; min-height: 0; display: flex; flex-direction: column; }
  .hs-slides { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .hs-slide { inset: 0; }
  .hs-media::before { display: none; }
  .hs-hero__text { padding: 16px 16px 40px; gap: 16px; }
  .hs-hero h1 { font-size: 28px; }
  .hs-hero .lead { font-size: 15.5px; }
  .hs-hero .btn-row { flex-direction: column; align-items: stretch; }
  .hs-hero .btn-row .btn { width: 100%; justify-content: center; }
  .hs-media__cap { top: 8px; right: 8px; }
  /* controls sit below the image so they never cover faces */
  .hs-ctrl { position: static; align-self: center; margin-top: 8px; }
}