/* 住まいを買うページ セクション3(一戸建てとマンション/新築と中古住宅)専用リデザイン。
   既存の .features-hux-12 とは独立させ、このページのこのセクションだけに適用する。 */
.kau-compare-sec { padding: 5.5rem 0; }
.kau-compare-head { max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.kau-compare-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 1rem;
}
.kau-compare-eyebrow::before, .kau-compare-eyebrow::after {
  content: ''; width: 24px; height: 1px; background: var(--color-accent); opacity: 0.5;
}

.kau-compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 1240px; margin: 0 auto;
}
.kau-compare-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 4px 24px -8px rgba(35, 48, 87, 0.14);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s ease;
}
.kau-compare-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 56px -20px rgba(35, 48, 87, 0.32);
}

.kau-compare-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.kau-compare-media img {
  width: 100%; height: 100%; object-fit: cover; max-height: none;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.kau-compare-card:hover .kau-compare-media img { transform: scale(1.06); }
.kau-compare-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(35,48,87,0.55) 0%, rgba(35,48,87,0) 42%);
}
.kau-compare-num {
  position: absolute; top: 1.25rem; left: 1.25rem; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--color-primary);
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.kau-compare-tag {
  position: absolute; bottom: 1.1rem; left: 1.25rem; right: 1.25rem; z-index: 2;
  display: flex; align-items: center; gap: 0.55rem;
  color: #fff; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600;
}
.kau-compare-tag svg { width: 22px; height: 22px; flex: none; color: #fff; }

.kau-compare-body {
  flex: 1 1 auto; display: flex; flex-direction: column;
  padding: 1.9rem 1.9rem 2.1rem;
  border-top: 3px solid var(--color-accent);
}
.kau-compare-title {
  font-size: var(--fs-mod-title); color: var(--color-heading-ink);
  margin-bottom: 0.9rem; line-height: 1.4;
}
.kau-compare-text {
  font-size: 0.98rem; line-height: 1.9; color: var(--color-text-muted);
  margin-bottom: 1.5rem; flex: 1 1 auto;
}
.kau-compare-link {
  display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem;
  color: var(--color-primary); padding-bottom: 0.2rem;
  border-bottom: 2px solid var(--color-primary-light);
  transition: var(--transition);
}
.kau-compare-link svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.kau-compare-link:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); opacity: 1; }
.kau-compare-link:hover svg { transform: translateX(4px); }

@media (max-width: 860px) {
  .kau-compare-grid { grid-template-columns: 1fr; }
}