/* Final brand-specific overrides and conflict resolution */

/* Card: LUCEY sharp style */
.card {
  border-radius: 0;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: none;
  transition: transform .15s ease, opacity .15s ease;
}
.card:hover { transform: translateY(-2px); opacity: .9; }

/* Thumb aspect preference for LUCEY */
.thumb { aspect-ratio: 3 / 4; object-fit: cover; }

/* Card text tweaks */
.card-title { font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.card-sub { font-size: 11px; opacity: .6; }

/* Center staff final adjustments */
.center-staff-text { white-space: normal; font-size: clamp(24px, 7.5vw, 48px); }

/* Footer visibility safety */
.footer p, .footer a { color: #fff !important; }

/* Header non-shrink safety */
.lucey-header, header.lucey-header { flex: 0 0 auto; width: 100%; }

/* Any remaining global fixes */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* ========================================================
   📱 AWS本番・スマホ実機での巨大化＆文字割れクラッシュ完全修正
   ======================================================== */
@media (max-width: 768px) {
  
  /* 1. 巨大文字（LU... NEW...）がでかいまま縦に割れるバグを強制解決 */
  .center-staff-text,
  .lucey-staff-heading,
  .hero-title,
  .award-title,
  .af-title {
    font-size: clamp(22px, 6vw, 30px) !important; /* スマホに最適なサイズに美しく縮小[cite: 21, 27, 32, 33, 35] */
    white-space: nowrap !important;              /* ⚠️ 絶対に途中で文字をぶつ切りに割らない */
    letter-spacing: 0.08em !important;           /* 文字の間隔をスマホ幅に最適化[cite: 21, 27, 33, 35] */
    line-height: 1.2 !important;
    transform: none !important;
  }

  /* デザインの下線もスマホ向けに細くスマートに自動調整 */
  .center-staff-underline,
  .lucey-staff-heading::after,
  .award-underline,
  .af-title::after {
    width: 140px !important;
    height: 3px !important;
    margin: 8px auto 0 !important;
  }

  /* 2. スマホ画面で顔がでかいまんま（ドアップ）になる背景画像の修正 */
  .hero-slideshow {
    height: 45vh !important;       /* 高さを抑えて画面全体の圧迫感を解消[cite: 21, 32] */
    min-height: 280px !important;  /*[cite: 21, 32] */
  }
  
  .hero-slide {
    background-position: center 20% !important; /* ⚠️ 顔がドアップで切れないよう、少し上寄りに配置[cite: 21, 32] */
  }

  .hero-inner {
    padding: 30px 16px 40px !important; /* 内側の余白をスリムに[cite: 21, 32] */
    text-align: center !important;
  }

  /* アワードやバナーなどの光オブジェクトもはみ出さないように縮小 */
  .award-float-right {
    height: 60px !important; /*[cite: 27] */
  }
  .af-glow {
    display: none !important; /* スマホでは眩しすぎるため非表示[cite: 27] */
  }
}
/* ========================================================
   📱 【画像文字クラッシュ完全修正】スマホ実機で左右を絶対に切らない設定
   ======================================================== */
@media (max-width: 768px) {
  
  /* ① ヒーロー slideshow 全体の形を、元画像と同じ「正方形」に強制変形 */
  .hero-slideshow {
    height: auto !important;
    min-height: auto !important;
    aspect-ratio: 1 / 1 !important; /* 💡 縦長にせず、1:1の正方形枠にする */
  }
  
  /* ② 左右を絶対に切り落とさず、枠の中にぴったり100%綺麗に収める */
  .hero-slide {
    background-size: contain !important;     /* 💡 coverからcontain（全体表示）に変更 */
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  /* ③ もし下部の店舗情報パネルなどの画像バナーも切れる場合の対策 */
  .top-panel {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  .top-panel-img {
    object-fit: contain !important; /* 💡 拡大させず、正方形の中に文字ごと全部収める */
    background-color: #0b0b0b !important;
  }

  /* 通常のHTMLテキスト用の保険（念のため残します） */
  .center-staff-text,
  .lucey-staff-heading,
  .hero-title,
  .award-title,
  .af-title {
    font-size: clamp(20px, 5.5vw, 28px) !important;
    white-space: nowrap !important;
    transform: none !important;
  }
}
/* ========================================================
   ✨ モダンスクロールエフェクト（高級フェードイン演出）
   ======================================================== */

/* 単体セクションの下からふわっと浮き上がるベース */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px) translateZ(0);
  will-change: opacity, transform;
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1), 
              transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 画面内に入ってアクティブになった瞬間 */
.scroll-reveal.is-active {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

/* ファーストビュー（HERO用）の即時フェードイン */
.scroll-reveal.fade-in-quick {
  transform: translateY(0);
  transition-duration: 0.6s;
}

/* --------------------------------------------------------
   📦 グループ系（2枚のバナーや写真群）の時間差（スタッガー）演出
   -------------------------------------------------------- */
.scroll-reveal-group > * {
  opacity: 0;
  transform: translateY(35px) scale(0.98) translateZ(0);
  will-change: opacity, transform;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* JavaScriptによって時間差のインデックス（--delay-idx）が配られて出現 */
.scroll-reveal-group > .child-active {
  opacity: 1;
  transform: translateY(0) scale(1) translateZ(0);
  /* 💡 1つにつき0.18秒ずつ遅らせて順番に出す高級演出 */
  transition-delay: calc(var(--delay-idx, 0) * 0.18s);
}

/* モーション軽減環境（アクセシビリティ対応）への配慮 */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal, .scroll-reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========================================================
   👥 被り防止型：プレミアム・フォトグリッドスタッフスタイル
   ======================================================== */

.hgs-section {
  width: 100%;
  padding: 60px 0 80px;
  background: #fff;
}

.hgs-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.hgs-header {
  text-align: center;
  margin-bottom: 35px;
}

.hgs-title {
  font-size: clamp(28px, 4.5vw, 42px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  color: #111 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

/* 💡 PC大画面で横6列を美しく隙間なく敷き詰める超解像グリッド */
.hgs-photo-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px !important; /* 画像の空気感を再現するミニマルな隙間 */
  margin-bottom: 40px;
}

/* カード単体の設計 */
.hgs-card {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden;
  position: relative;
}

.hgs-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1 !important; /* どんな画像が来ても絶対に綺麗な正方形を死守 */
  overflow: hidden;
  background: #f7f7f7;
  border-radius: 4px; /* サロンのシャープな世界観に合わせた微細な角丸 */
}

.hgs-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important; /* 顔が切れないように頭頂部を基準に固定 */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ホバー時に写真がじわーっと奥から拡大 */
.hgs-card:hover .hgs-img {
  transform: scale(1.05) !important;
}

/* マウスを乗せた瞬間に映画のスタッフロールのように浮かぶスモークオーバーレイ */
.hgs-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 60%, transparent 100%) !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 12px !important;
  opacity: 0;
  transition: opacity 0.35s ease !important;
  z-index: 2;
}

.hgs-overlay-info {
  transform: translateY(8px);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  text-align: left;
}

.hgs-overlay-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
}

.hgs-overlay-title {
  display: block;
  font-size: 10px;
  color: #ccc;
  margin-top: 2px;
}

.hgs-card:hover .hgs-overlay { opacity: 1; }
.hgs-card:hover .hgs-overlay-info { transform: translateY(0); }

/* 💡 画像のデザインを完全トレースした横長ミニマル細枠ボタン */
.hgs-more-wrap {
  text-align: center;
}

.hgs-more-btn {
  display: inline-block !important;
  width: 100%;
  max-width: 580px; /* 画面に対して長すぎず短すぎない絶妙なバランス */
  padding: 13px 0 !important;
  border: 1px solid #111 !important; /* LUCEYの漆黒デザインに合わせてシックな黒に変更 */
  color: #111 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-decoration: none !important;
  text-align: center;
  transition: background 0.3s ease, color 0.3s ease !important;
}

/* ホバーすると反転して漆黒に染まる極上エフェクト */
.hgs-more-btn:hover {
  background: #111 !important;
  color: #fff !important;
}

/* ========================================================
   📱 レスポンシブ（スマホ・タブレットでも絶対に崩さない可変ルール）
   ======================================================== */
@media (max-width: 1024px) {
  .hgs-photo-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; }
}

@media (max-width: 768px) {
  .hgs-photo-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .hgs-inner { padding: 0 16px; }
  .hgs-section { padding: 40px 0; }
}

@media (max-width: 480px) {
  /* スマホなどの極小モバイル画面では、窮屈にならないようオシャレな2列に自動最適化 */
  .hgs-photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .hgs-more-btn { max-width: 100%; }
}