/* =========================================================
   ai-hp.css — AI×ホームページ制作 詳細ページ専用スタイル
   ========================================================= */

/* ---------- AI活用アプローチセクション ---------- */
.ai-approach {
  background: var(--bg-2);
}
.ai-approach__head {
  text-align: center;
  margin-bottom: 20px;
}
.ai-approach__lead {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 8px 0 56px;
}
.ai-approach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ai-approach-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition:
    transform 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.ai-approach-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity 0.3s;
}
.ai-approach-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-1);
  box-shadow: 0 16px 48px rgba(31, 108, 255, 0.12);
}
.ai-approach-card:hover::before {
  opacity: 1;
}
.ai-approach-card__icon {
  width: 64px;
  height: 56px;
  color: var(--brand-1);
  position: relative;
  margin: auto;
  z-index: 1;
}
.ai-approach-card__icon svg {
  width: 100%;
  height: 100%;
}
.ai-approach-card__title {
  font-size: 18px;
  text-align: center;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  position: relative;
  z-index: 1;
}
.ai-approach-card__desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.85;
  margin: 0;
  flex: 1;
  position: relative;
  z-index: 1;
}
.ai-approach-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.ai-approach-card__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.03em;
  color: var(--brand-1);
  font-weight: 600;
}
.ai-approach-card__list li::before {
  content: "→";
  font-size: 11px;
}

/* ---------- SVGアニメーション ---------- */

@keyframes ai-fade-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ai-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ai-sparkle-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.5);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes ai-bar-rise {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes ai-cursor-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* カード1：デザイン最適化 */
.anim-b1 {
  opacity: 0;
  animation: ai-fade-in 0.5s 0.15s ease both;
}
.anim-b2 {
  opacity: 0;
  animation: ai-fade-in 0.5s 0.45s ease both;
}
.anim-b3 {
  opacity: 0;
  animation: ai-fade-in 0.5s 0.7s ease both;
}
.anim-b4 {
  opacity: 0;
  animation: ai-fade-in 0.5s 0.9s ease both;
}
.anim-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: ai-sparkle-spin 4s 1.2s ease-in-out infinite;
}

/* カード2：コピーライティング */
.anim-l1 {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: ai-draw 0.5s 0.3s ease forwards;
}
.anim-l2 {
  stroke-dasharray: 29;
  stroke-dashoffset: 29;
  animation: ai-draw 0.4s 0.8s ease forwards;
}
.anim-l3 {
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
  animation: ai-draw 0.4s 1.1s ease forwards;
}
.anim-l4 {
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  animation: ai-draw 0.3s 1.4s ease forwards;
}
.anim-cursor {
  opacity: 0;
  animation: ai-cursor-blink 0.8s 1.4s step-end infinite;
}

/* カード3：SEO・AIO設計 */
.anim-bar1 {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: ai-bar-rise 0.5s 0.2s ease both;
}
.anim-bar2 {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: ai-bar-rise 0.5s 0.5s ease both;
}
.anim-bar3 {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: ai-bar-rise 0.5s 0.8s ease both;
}
.anim-trend {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: ai-draw 0.8s 1s ease forwards;
}
.anim-arrowhead {
  opacity: 0;
  animation: ai-fade-in 0.3s 1.8s ease both;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 860px) {
  .ai-approach__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .ai-approach__grid {
    grid-template-columns: 1fr;
  }
  .ai-approach-card {
    padding: 28px 24px;
  }
}