/* ============================================
   Greasetrap Meister | スタイルシート
   モバイルファースト・レスポンシブ対応
   ============================================ */

/* 基本設定 */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
  font-family: 'Noto Sans JP', 'Manrope', sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* タッチターゲット（44px以上） */
button,
[role="button"],
a[href],
.btn-touch {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* 🔥 ロゴレスポンシブ用 */
.logo-responsive {
  width: clamp(80px, 18vw, 240px);
  max-height: clamp(64px, 12vw, 96px);
  min-width: 72px;
}

/* ヒーローセクション：SP最適化 */
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column !important;
    gap: 2rem;
  }

  .hero-left,
  .hero-right {
    position: static !important;
    transform: none !important;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  .hero-main-copy {
    bottom: 8% !important;
  }
}

/* グリッド：SP縦並び */
@media (max-width: 640px) {
  .sp-stack {
    flex-direction: column !important;
  }

  .grid-cols-1\.5 {
    grid-template-columns: 1fr;
  }
}

/* テキストサイズ階層化 */
.text-hero-sp {
  font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
}

.text-hero-md {
  font-size: clamp(2.5rem, 8vw, 4rem) !important;
}

/* CTAバナー画像の位置調整（デスクトップ） */
@media (min-width: 1024px) {
  .lg\:-mt-24 {
    margin-top: 0rem !important;
  }
}

/* 報告書リンク位置調整（デスクトップ） */
@media (min-width: 1024px) {
  .lg\:mt-20 {
    /* margin-top: 0rem; */
    margin-bottom: 5rem;
  }
}

/* カード間隔：SP縮小 */
@media (max-width: 768px) {
  .card-gap-sm {
    gap: 1.5rem !important;
  }

  .p-card-sm {
    padding: 1.5rem !important;
  }
}

/* ナビゲーション：ホバー除去＋タップ最適化 */
@media (hover: none) {
  .nav-link {
    padding: 12px 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
  }

  .nav-link:active {
    background: rgba(209, 0, 0, 0.1);
    transform: scale(0.98);
  }
}

/* フォーム：SPキーボード最適化 */
@media (max-width: 640px) {

  input,
  textarea,
  select {
    font-size: 16px;
    padding: 20px;
  }
}

/* ステップナンバー：SPサイズ調整 */
.step-number-sp {
  width: 56px !important;
  height: 56px !important;
  font-size: 1.25rem !important;
}

/* ナビゲーション最適化 */
@media (min-width: 1280px) {
  .nav-link {
    padding: 0.75rem 1.75rem;
    min-height: 52px;
  }
}

/* ハンバーガーアクティブ状態 */
.menu-icon.active {
  transform: rotate(90deg);
}

/* フォーカス管理 */
*:focus-visible {
  outline: 2px solid #d10000;
  outline-offset: 2px;
}

/* 高DPRデバイス用 */
@media (-webkit-min-device-pixel-ratio: 3),
(min-resolution: 288dpi) {
  img[src*="/img/oasis_logo.png"] {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ヒーロー特化スタイル */
.hero-slant {
  clip-path: polygon(0 40%, 100% 20%, 100% 80%, 0 100%);
}

.text-outline-white {
  -webkit-text-stroke: 1.5px white;
  paint-order: stroke fill;
}

.text-shadow-hero {
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.scrim-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
}

/* ベントカードホバー */
.bento-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px rgba(209, 0, 0, 0.2);
}

/* フォーム用 */
.contact-input,
.contact-textarea {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.contact-input:focus,
.contact-textarea:focus {
  border-color: #d10000;
  box-shadow: 0 0 0 4px rgba(209, 0, 0, 0.2);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: scale(1);
}

/* フッターボタン（お電話する・フォームで問い合わせ） */
footer a[href^='tel:'],
footer a[href='#contact'] {
  font-size: 0.95rem !important;
  line-height: 1.5rem !important;
  white-space: nowrap;
}

/* 🔥 ヒーロー背景アニメーション */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes float-delayed {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 3.5s ease-in-out infinite reverse;
}

.animate-fade-in-up {
  animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 🎯 ブラッシュアップ：カード立体感強化 */
.bg-white:has(.border-b) {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.bg-white:has(.border-b):hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* ヒーローセクション背景画像（モバイル最適化版） */
.hero-bg {
  position: relative;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%), url('../img/hero_2026_1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ソフトグレーのカスタム定義（より清潔感のある色味へ） */
.bg-soft-gray {
  background-color: #f8f9fa !important;
}

/* バグ要素の強制排除 */
div[class*="-top-[10%]"][class*="-right-[5%]"] {
  display: none !important;
}

/* reCAPTCHAバッジ非表示 */
.grecaptcha-badge {
  visibility: hidden;
}

/* カスタムヘッドライン */
.headline-unique {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  font-weight: bold;
  text-align: center;
}

@media (min-width: 768px) {
  .headline-unique {
    font-size: 2.0rem;
  }
}

/* ユーティリティ */
.red {
  color: #E02629;
}