/* ============================================================
   V4 — Professional polish pass
   Loads AFTER v3.css. Overrides v3 where needed.
   - Hero: A モチーフを主役化、左に可読マスク
   - Services: 抽象UIパネル差し替え（M07v4_*）
   - impact-band: 数字訴求 → 提供価値3カード
   - CTA: コピー背面マスク追加、可読性確保
   - Page-Hero: ページ別 modifier で出し分け
   ============================================================ */

/* ============ HERO ============ */
.hero {
  min-height: clamp(660px, 84vh, 920px) !important;
  overflow: hidden;
}
.hero-bg-mesh {
  background-image:
    linear-gradient(90deg, rgba(246,251,255,.96) 0%, rgba(246,251,255,.78) 38%, rgba(246,251,255,.18) 64%, rgba(246,251,255,0) 80%),
    url("../images/bg/v4/M01v4_hero_aurora_loop_01.webp") !important;
  background-size: cover !important;
  background-position: center !important;
}
.hero h1 {
  font-size: clamp(40px, 5.2vw, 76px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.05em !important;
  font-weight: 900 !important;
}

/* Aモチーフを主役化：Hero中央右寄り、大型・前面（ただしH1領域は確保） */
.hero-inner { grid-template-columns: 1.25fr .75fr !important; }
.hero-visual { z-index: 4; position: relative; }
.hero-visual img {
  width: min(48vw, 620px) !important;
  max-width: none !important;
  margin-right: -8%;
  opacity: .98 !important;
  filter: drop-shadow(0 48px 90px rgba(15,36,68,.30)) drop-shadow(0 12px 30px rgba(46,123,214,.18)) !important;
  animation: kvFloatV4 9s ease-in-out infinite alternate;
}
@keyframes kvFloatV4 {
  0%   { transform: translateY(-6px) rotate(-1.2deg); }
  100% { transform: translateY( 10px) rotate( 1.6deg); }
}

/* ============ SERVICES — abstract panel thumbnails ============ */
/* Cancel v3's image crop hack — v4 panels are clean (no baked text) */
.service-card .thumb img,
.case-card .thumb img {
  object-position: 50% 50% !important;
  transform: none !important;
}
.service-card .thumb {
  background: linear-gradient(180deg, #F7FBFE 0%, #E6F2FB 100%);
}
.service-card .thumb img {
  filter: saturate(1.05) contrast(1.03);
}
.service-card {
  border-radius: 26px !important;
  background: #fff !important;
  border: 1px solid rgba(123,188,239,.28) !important;
  box-shadow:
    0 24px 60px rgba(15,36,68,.10),
    0 4px 14px rgba(46,123,214,.06) !important;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 32px 80px rgba(15,36,68,.14),
    0 8px 20px rgba(46,123,214,.10) !important;
}

/* ============ IMPACT BAND — value pivot ============ */
.impact-band {
  background-image:
    linear-gradient(90deg, rgba(5,15,36,.94) 0%, rgba(5,15,36,.78) 50%, rgba(5,15,36,.62) 100%),
    url("../images/bg/v4/M03v4_impact_section_bg.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  padding: clamp(112px, 13vw, 176px) 0 !important;
}
.impact-band::before { display: none !important; }
.impact-band::after { display: none !important; }

/* Value cards override the numeric stat cards */
.impact-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin-top: 8px !important;
}
.impact-stat {
  padding: 36px 30px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(154,216,255,.22) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.impact-stat::before {
  background-image: url("../images/bg/v4/M06v4_number_ornament.png") !important;
  opacity: .14 !important;
  width: 180px !important; height: 180px !important;
  top: -30px !important; right: -30px !important;
}
.impact-value-num {
  font-family: ui-serif, "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--electric-aqua);
  letter-spacing: 0;
  margin: 0 0 14px;
  opacity: .85;
}
.impact-value-title {
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
  color: #fff !important;
  margin: 0 0 14px !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.impact-value-desc {
  font-size: 15px !important;
  color: rgba(255,255,255,.78) !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

/* ============ CTA ============ */
.cta-band {
  background-image:
    radial-gradient(circle at 38% 50%, rgba(5,15,36,.72), transparent 56%),
    linear-gradient(90deg, rgba(5,15,36,.92) 0%, rgba(5,15,36,.62) 100%),
    url("../images/bg/v4/M04v4_cta_climax_bg.webp") !important;
  background-size: cover !important;
  background-position: center !important;
}
.cta-bg-streak {
  background-image: url("../images/bg/v4/M04v4_cta_climax_bg.webp") !important;
  opacity: 0 !important; /* base already includes the image */
}
.cta-band h2 {
  font-size: clamp(38px, 6vw, 76px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.052em !important;
  font-weight: 900 !important;
}
.cta-band .btn-primary {
  padding: 18px 44px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.35),
    0 24px 70px rgba(53,199,255,.45),
    inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* ============ Page-Hero per-page modifiers ============ */
/* Default base already set in v3. Add subtle differentiation by page class. */
.page-training .page-hero { background-image: linear-gradient(180deg, #F4FAFE 0%, #EAF4FC 100%); }
.page-training .page-hero .ph-mesh { background-image: url("../images/bg/v4/M01v4_hero_aurora_loop_02.webp") !important; opacity: .65 !important; }
.page-training .page-hero .ph-motif { top: -60px; right: -20px; opacity: .14 !important; }

.page-dx .page-hero .ph-mesh { background-image: url("../images/bg/v4/M01v4_hero_aurora_loop_03.webp") !important; opacity: .68 !important; }
.page-dx .page-hero .ph-motif { top: 10px; right: -120px; opacity: .12 !important; transform: rotate(8deg); }

.page-cases .page-hero .ph-mesh { background-image: url("../images/bg/v4/M01v4_hero_aurora_loop_04.webp") !important; opacity: .60 !important; }
.page-cases .page-hero .ph-motif { top: -20px; right: 6%; width: 380px; height: 380px; opacity: .16 !important; }

.page-company .page-hero .ph-mesh { background-image: url("../images/bg/v4/M01v4_hero_aurora_loop_02.webp") !important; opacity: .55 !important; filter: hue-rotate(-6deg); }
.page-company .page-hero .ph-motif { top: -80px; right: -80px; width: 420px; height: 420px; opacity: .12 !important; }

.page-contact .page-hero .ph-mesh { background-image: url("../images/bg/v4/M01v4_hero_aurora_loop_01.webp") !important; opacity: .50 !important; }
.page-contact .page-hero .ph-motif { top: 40px; right: 4%; width: 320px; height: 320px; opacity: .14 !important; }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .hero-visual img { animation: none !important; }
}

/* ============ Mobile ============ */
@media (max-width: 740px) {
  .hero h1 { font-size: clamp(34px, 9.6vw, 60px) !important; }
  .hero-visual img { width: 90% !important; margin-right: 0 !important; }
  .cta-band h2 { font-size: clamp(28px, 8vw, 44px) !important; }
  .impact-stats { grid-template-columns: 1fr !important; }
  .impact-stat { padding: 28px 22px !important; }
}

/* ============ Re-add motion lost in v4 ============ */

/* impact-band: shift background and add a moving sheen */
.impact-band {
  background-position: center, 0% center !important;
  background-size: cover, 110% 110% !important;
  animation: impactDriftV4 28s ease-in-out infinite alternate;
}
.impact-band::after {
  /* sheen sweep overlay */
  display: block !important;
  content: "" !important;
  position: absolute; inset: -10% -20%;
  background: linear-gradient(110deg, transparent 30%, rgba(53,199,255,.08) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: impactSheenV4 18s ease-in-out infinite;
  background-size: 220% 100%;
  background-position: -40% 0;
}
@keyframes impactDriftV4 {
  0%   { background-position: center, 0% center; }
  100% { background-position: center, 100% center; }
}
@keyframes impactSheenV4 {
  0%   { background-position: -60% 0; opacity: .5; }
  50%  { background-position: 110% 0; opacity: .9; }
  100% { background-position: 220% 0; opacity: .5; }
}

/* CTA: drift background + glow pulse retained */
.cta-band {
  background-position: center, 0% center, 0% center !important;
  background-size: cover, 100% 100%, 110% 110% !important;
  animation: ctaDriftV4 22s ease-in-out infinite alternate;
}
.cta-band::after {
  display: block !important;
  content: "" !important;
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(53,199,255,.10) 50%, transparent 65%);
  background-size: 220% 100%;
  background-position: -50% 0;
  pointer-events: none;
  z-index: 0;
  animation: ctaSheenV4 14s ease-in-out infinite;
}
@keyframes ctaDriftV4 {
  0%   { background-position: center, center, 0% center; }
  100% { background-position: center, center, 100% center; }
}
@keyframes ctaSheenV4 {
  0%   { background-position: -60% 0; opacity: .55; }
  50%  { background-position: 110% 0; opacity: 1; }
  100% { background-position: 220% 0; opacity: .55; }
}

/* Hero mesh — re-confirm drift on v4 image */
.hero-bg-mesh {
  animation: meshDriftV4 18s ease-in-out infinite alternate !important;
  will-change: transform;
}
@keyframes meshDriftV4 {
  0%   { transform: translate3d(-3%,  1%, 0) scale(1.03); }
  100% { transform: translate3d( 4%, -2%, 0) scale(1.10); }
}

@media (prefers-reduced-motion: reduce) {
  .impact-band, .cta-band, .hero-bg-mesh,
  .impact-band::after, .cta-band::after { animation: none !important; }
}