/* サービス別LP(/service/*)専用スタイル。共通部品は main.css を使う */

/* ===== ヒーロー共通 =====
   背景は2枚重ね：section 自身が「使う前」、::before が「使ったあと」。::before の opacity だけを動かす。
   各部品の素のスタイルは「使ったあと」の状態にしてあり、動きは prefers-reduced-motion: no-preference の中だけで付ける。
   そのため動きを減らす設定では、何もしなくても「使ったあと」の絵で止まる。 */
.ah-svc-hero {
  --ah-cycle: 6s;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  padding: 12px 0 28px;
  text-align: left;
  background: var(--ah-hero-before);
}
.ah-svc-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: var(--ah-hero-after);
}
.ah-svc-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}
.ah-svc-hero-stage {
  order: -1;
  height: 176px;
}
.ah-svc-hero-stage svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: inherit;
}
.ah-svc-hero-copy {
  text-shadow: 0 1px 12px rgba(10, 25, 45, 0.28);
}
.ah-svc-hero h1 {
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.35;
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
  margin-bottom: 10px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.ah-svc-hero-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
  text-shadow: none;
}
.ah-svc-hero-price {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.ah-svc-hero-price strong {
  background: none;
  font-size: 1.7rem;
  font-weight: 800;
  color: #ffd27a;
  margin-left: 4px;
}
.ah-svc-hero .ah-hero-btns {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 0;
  text-shadow: none;
}
.ah-svc-hero .ah-hero-btns > a {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  padding: 14px 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
/* 暑い（オレンジ）背景の上でも埋もれないよう白い縁を付ける */
.ah-svc-hero .btn-ah-order {
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.ah-svc-hero .btn-ah-tel {
  border: 2px solid #fff;
  background: #fff;
  color: var(--color-primary);
}
.ah-svc-hero .btn-ah-tel:hover {
  color: var(--color-primary);
}

@media (min-width: 992px) {
  .ah-svc-hero {
    padding: 56px 0 64px;
  }
  .ah-svc-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
  }
  .ah-svc-hero-stage {
    order: 0;
    height: 340px;
  }
  .ah-svc-hero-eyebrow {
    font-size: 0.9rem;
  }
  .ah-svc-hero-price {
    font-size: 1.15rem;
    margin-bottom: 28px;
  }
  .ah-svc-hero-price strong {
    font-size: 2.2rem;
  }
  .ah-svc-hero .ah-hero-btns > a {
    flex: 0 0 auto;
    padding: 16px 28px;
  }
}

/* 動かす SVG 部品は自分の箱を基準に変形させる（transform 属性を持つ静的な部品には付けない） */
.ah-ac-heat-line,
.ah-ac-flap,
.ah-ac-wind,
.ah-ac-bar,
.ah-tv-set,
.ah-tv-spark path,
.ah-cam-ripple,
.ah-cam-rec {
  transform-box: fill-box;
}

/* ===== エアコン：暑い部屋(34℃)が快適(25℃)になる ===== */
.ah-svc-hero--aircon {
  --ah-hero-before: linear-gradient(0deg, #d9532d 0%, #e8613a 45%, #f39a4a 100%);
  --ah-hero-after: linear-gradient(0deg, #13304f 0%, #1A3A5C 45%, #2D88EF 100%);
}
/* オレンジと青を重ねると途中が濁るので、切り替わりの途中だけ夕暮れ色を挟む */
.ah-svc-hero--aircon::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(0deg, #3a2f5e 0%, #6a3f74 45%, #c0607a 100%);
}
.ah-ac-heat { opacity: 0; }
.ah-ac-heat-line { opacity: 0.5; }
.ah-ac-flap {
  transform-origin: 50% 0;
  transform: rotate(-4deg) translateY(2px);
}
.ah-ac-wind {
  opacity: 0.6;
  transform-origin: 50% 0;
}
.ah-ac-plume { opacity: 1; }
.ah-ac-temp-roll {
  transform: translateY(-184px);
}
.ah-ac-bar {
  transform-origin: 0 50%;
  transform: scaleX(0.42);
}
.ah-ac-bar-hot { opacity: 0; }
.ah-ac-mode { opacity: 1; }

/* ===== 壁掛け：床置きのテレビが壁に掛かる ===== */
.ah-svc-hero--tvwall {
  --ah-cycle: 7s;
  --ah-hero-before: linear-gradient(0deg, #0c1a2b 0%, #13263c 50%, #1d3550 100%);
  --ah-hero-after: linear-gradient(0deg, #15314f 0%, #1f4a76 50%, #3f86cc 100%);
}
.ah-tv-board,
.ah-tv-cables,
.ah-tv-feet { opacity: 0; }
.ah-tv-light,
.ah-tv-spark { opacity: 1; }
.ah-tv-spark path { transform-origin: 50% 50%; }

/* ===== 防犯カメラ：夜の家を見守り、録画中になる ===== */
.ah-svc-hero--camera {
  --ah-hero-before: linear-gradient(0deg, #050b15 0%, #08131f 50%, #0e1f33 100%);
  --ah-hero-after: linear-gradient(0deg, #10243c 0%, #1A3A5C 50%, #2a5a8c 100%);
}
.ah-svc-hero-stage .ah-cam-view {
  transform-box: view-box;
  transform-origin: 152px 128px;
}
.ah-cam-ripple {
  opacity: 0;
  transform-origin: 50% 50%;
}
.ah-cam-star { opacity: 0.8; }

/* ===== 動き（動きを減らす設定では付けない） ===== */
@media (prefers-reduced-motion: no-preference) {
  .ah-svc-hero::before {
    animation: ah-svc-after var(--ah-cycle) ease-in-out infinite alternate;
  }

  /* エアコン */
  .ah-svc-hero--aircon::after { animation: ah-ac-dusk var(--ah-cycle) ease-in-out infinite alternate; }
  .ah-ac-heat { animation: ah-svc-before var(--ah-cycle) ease-in-out infinite alternate; }
  .ah-ac-heat-line { animation: ah-ac-heat 2.4s ease-in-out infinite; }
  .ah-ac-heat-line:nth-child(2) { animation-delay: 0.8s; }
  .ah-ac-heat-line:nth-child(3) { animation-delay: 1.6s; }
  .ah-ac-flap { animation: ah-ac-flap var(--ah-cycle) ease-in-out infinite alternate; }
  .ah-ac-led { animation: ah-svc-blink 2.4s ease-in-out infinite; }
  .ah-ac-wind {
    opacity: 0;
    animation: ah-ac-wind 2.2s cubic-bezier(0.25, 0.6, 0.4, 1) infinite;
  }
  .ah-ac-wind--2 { animation-delay: 0.35s; }
  .ah-ac-wind--3 { animation-delay: 0.7s; }
  .ah-ac-wind--4 { animation-delay: 1.05s; }
  .ah-ac-wind--5 { animation-delay: 1.4s; }
  .ah-ac-wind--6 { animation-delay: 1.75s; }
  .ah-ac-wind--7 { animation-delay: 1.1s; }
  .ah-ac-plume { animation: ah-ac-plume var(--ah-cycle) ease-in-out infinite alternate; }
  .ah-ac-temp-roll { animation: ah-ac-temp var(--ah-cycle) ease-in-out infinite alternate; }
  .ah-ac-bar { animation: ah-ac-bar var(--ah-cycle) ease-in-out infinite alternate; }
  .ah-ac-bar-hot { animation: ah-svc-before var(--ah-cycle) ease-in-out infinite alternate; }
  .ah-ac-mode { animation: ah-svc-after var(--ah-cycle) ease-in-out infinite alternate; }

  /* 壁掛け */
  .ah-tv-set { animation: ah-tv-lift var(--ah-cycle) cubic-bezier(0.45, 0, 0.2, 1) infinite alternate; }
  .ah-tv-feet,
  .ah-tv-cables { animation: ah-tv-early-out var(--ah-cycle) ease-in-out infinite alternate; }
  .ah-tv-board { animation: ah-tv-late-out var(--ah-cycle) ease-in-out infinite alternate; }
  .ah-tv-light { animation: ah-svc-after var(--ah-cycle) ease-in-out infinite alternate; }
  .ah-tv-spark { animation: ah-tv-spark var(--ah-cycle) ease-out infinite alternate; }
  .ah-tv-spark path { animation: ah-svc-twinkle 1.8s ease-in-out infinite; }
  .ah-tv-spark path:nth-child(2) { animation-delay: 0.6s; }

  /* 防犯カメラ */
  .ah-cam-view { animation: ah-cam-view var(--ah-cycle) cubic-bezier(0.3, 0, 0.2, 1) infinite alternate; }
  .ah-cam-ripple { animation: ah-cam-ripple 2.4s ease-out infinite; }
  .ah-cam-ripple--2 { animation-delay: 1.2s; }
  .ah-cam-rec { animation: ah-cam-rec var(--ah-cycle) ease-in-out infinite alternate; }
  .ah-cam-rec-dot { animation: ah-svc-blink 1.4s ease-in-out infinite; }
  .ah-cam-star { animation: ah-svc-blink 3s ease-in-out infinite; }
  .ah-cam-star--2 { animation-delay: 1s; }
  .ah-cam-star--3 { animation-delay: 2s; }
}

/* main.css の CTA の脈動も含め、ヒーロー内の動きをすべて止める */
@media (prefers-reduced-motion: reduce) {
  .ah-svc-hero,
  .ah-svc-hero *,
  .ah-svc-hero::before,
  .ah-svc-hero::after,
  .ah-svc-hero *::before,
  .ah-svc-hero *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 共通：「使う前」で少し止まり、「使ったあと」で少し止まる */
@keyframes ah-svc-after {
  0%, 15% { opacity: 0; }
  85%, 100% { opacity: 1; }
}
@keyframes ah-svc-before {
  0%, 15% { opacity: 1; }
  85%, 100% { opacity: 0; }
}
@keyframes ah-svc-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes ah-svc-twinkle {
  0%, 100% { transform: scale(0.7); }
  50% { transform: scale(1.15); }
}

@keyframes ah-ac-heat {
  0% { opacity: 0; transform: translateY(8px); }
  40% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes ah-ac-flap {
  0%, 15% { transform: rotate(0deg) translateY(0); }
  40%, 100% { transform: rotate(-4deg) translateY(2px); }
}
@keyframes ah-ac-wind {
  0% { opacity: 0; transform: translateY(-10px) scaleY(0.6); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(22px) scaleY(1.05); }
}
@keyframes ah-ac-dusk {
  0%, 15% { opacity: 0; }
  50% { opacity: 0.75; }
  85%, 100% { opacity: 0; }
}
@keyframes ah-ac-plume {
  0%, 10% { opacity: 0.25; }
  70%, 100% { opacity: 1; }
}
@keyframes ah-ac-temp {
  0%, 15% { transform: translateY(0); }
  30% { transform: translateY(-46px); }
  45% { transform: translateY(-92px); }
  62% { transform: translateY(-138px); }
  80%, 100% { transform: translateY(-184px); }
}
@keyframes ah-ac-bar {
  0%, 15% { transform: scaleX(0.9); }
  80%, 100% { transform: scaleX(0.42); }
}

@keyframes ah-tv-lift {
  0%, 18% { transform: translateY(40px); }
  62% { transform: translateY(-3px); }
  72%, 100% { transform: translateY(0); }
}
@keyframes ah-tv-early-out {
  0%, 18% { opacity: 1; }
  40%, 100% { opacity: 0; }
}
@keyframes ah-tv-late-out {
  0%, 40% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes ah-tv-spark {
  0%, 68% { opacity: 0; }
  90%, 100% { opacity: 1; }
}

@keyframes ah-cam-view {
  0%, 15% { opacity: 0; transform: scale(0.12); }
  25% { opacity: 1; }
  70%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ah-cam-ripple {
  0% { opacity: 0; transform: scale(0.15); }
  20% { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes ah-cam-rec {
  0%, 60% { opacity: 0; transform: translateY(-4px); }
  80%, 100% { opacity: 1; transform: translateY(0); }
}

.ah-svc-flow {
  list-style: none;
  margin: 24px auto 0;
  padding: 0;
  max-width: 640px;
}
.ah-svc-flow-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.ah-svc-flow-num {
  flex: none;
  font-weight: 700;
  color: var(--color-accent);
  font-size: 0.85rem;
}