@charset "UTF-8";
/* ==========================================================================
   top-custom.css — TOPページ固有（メインビュー）
   ========================================================================== */

.ai-hero { position: relative; min-height: 620px; display: flex; align-items: center; z-index: 4; }

/* 背景スライド（CMSスライダー枠） */
.ai-hero__slideshow { position: absolute; inset: 0; z-index: 0; height: 100%; overflow: hidden; }
/* CMSスライダー（Swiper）を外枠に追従させ、画像は cover 表示。
   CMSは .slider_wrapper / .main_slider__outer / .main_slider の独自クラスで出力するため、
   それらにも height:100% を効かせないと写真がヒーロー高さいっぱいに広がらない（SPで下が余る）。 */
.ai-hero__slideshow #cms-slider-1-1-area,
.ai-hero__slideshow #cms-slider-1-1-area > div,
.ai-hero__slideshow .slider_wrapper,
.ai-hero__slideshow .main_slider__outer,
.ai-hero__slideshow .main_slider,
.ai-hero__slideshow .swiper,
.ai-hero__slideshow .swiper-container,
.ai-hero__slideshow .swiper-wrapper,
.ai-hero__slideshow .swiper-slide {
  /* Swiper の auto-height を打ち消して外枠（ヒーロー）高さに追従させる */
  height: 100% !important;
}
.ai-hero__slideshow .swiper-slide img,
.ai-hero__slideshow .main_slider img { width: 100%; height: 100% !important; object-fit: cover; display: block; }

/* グラデーション暗幕（テキスト可読性） */
.ai-hero__grad { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(74,44,30,0.34) 0%, rgba(74,44,30,0) 40%),
    linear-gradient(100deg, rgba(74,44,30,0.68) 0%, rgba(200,90,48,0.42) 42%, rgba(243,156,75,0.12) 70%, rgba(243,156,75,0) 100%);
}

.ai-hero__inner { position: relative; z-index: 2; max-width: 1180px; width: 100%; margin: 0 auto; padding: 90px 24px; }
.ai-hero__copy { max-width: 620px; }
.ai-hero__badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,253,251,0.92); color: #E8613C; font-weight: 700; font-size: 1.3rem;
  padding: 8px 16px; border-radius: 999px; margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(74,44,30,0.18);
}
.ai-hero__title { font-size: 5.6rem; line-height: 1.3; font-weight: 700; letter-spacing: 0.01em; margin: 0 0 22px; color: #fff; text-shadow: 0 2px 20px rgba(74,44,30,0.4); }
.ai-hero__title span { color: #FFDCA8; }
.ai-hero__sub { font-size: 1.7rem; line-height: 2; color: rgba(255,253,251,0.96); margin: 0 0 34px; max-width: 500px; text-shadow: 0 1px 10px rgba(74,44,30,0.4); }
.ai-hero__btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* 看板猫（切り抜きイラスト） */
.ai-hero__neko { position: absolute; right: 24px; bottom: -30px; z-index: 5; width: 380px; height: auto; margin: 0; pointer-events: none; }

.ai-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; line-height: 0; pointer-events: none; }
.ai-hero__wave svg { display: block; width: 100%; height: 58px; }

/* ---------- SP ---------- */
@media (max-width: 896px) {
  .ai-hero { min-height: 520px; }
  .ai-hero__title { font-size: 4rem; }
  .ai-hero__neko { width: 260px; right: 12px; bottom: -18px; }
}
@media (max-width: 639px) {
  .ai-hero__inner { padding: 70px 22px; }
  .ai-hero__title { font-size: 3.2rem; }
  .ai-hero__sub { font-size: 1.5rem; }
  .ai-hero__neko { display: none; }
}