/* ① Remix Icon の擬似要素調整
   ───────────────────────────── */
:where([class^="ri-"])::before {
  /* Remix Icon CDN を使うと一部テーマでアイコンが消えることがあるため念のため固定 */
  content: "\f3c2";
}

/* ② 基本フォント & テキストカラー
   ───────────────────────────── */
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
}

/* ③ Hero セクションの背景
   ───────────────────────────── */
.hero-section {
  background-image: url("https://ladialign.open-in.jp/wp-content/uploads/2025/06/top-background.jpg");
  background-size: cover;
  background-position: center;
}

/* ④ OPEN バッジのデザイン
   ───────────────────────────── */
.open-badge {
  background-color: rgba(90, 59, 147, 0.9);
  transform: rotate(-5deg);
}

/* ⑤ 各カード（サービス・料金）のホバー効果
   ───────────────────────────── */
.service-card:hover,
.price-card:hover {
  background-color: #f4f0f8;     /* theme secondary */
  transition: all 0.3s ease;
}

/* price-card 自体のトランジションを常に有効化 */
.price-card {
  transition: all 0.3s ease;
}

/* ⑥ カスタムチェックボックス
   ───────────────────────────── */
.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--primary, #5a3b93);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  position: relative;
}

.custom-checkbox:checked {
  background-color: var(--primary, #5a3b93);
}

.custom-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ⑦ ナビゲーション用の簡易クラス（任意）
   ─────────────────────────────
   CDN 版 Tailwind だけを使う場合は @apply が動かないため
   普通の CSS で書く or 各 a タグに Tailwind クラスを
   直接並べてください。PostCSS ビルド環境がある場合は
   以下のコメントアウトを外して @apply を使うとスッキリします。

.nav-link {
  @apply text-gray-700 hover:text-primary transition-colors;
}
.mobile-link {
  @apply text-gray-700 hover:text-primary transition-colors py-2 border-b border-gray-100;
}
*/

/* ==== OPEN!! バッジのはみ出し防止 ==== */
.open-badge {
  right: 0;                 /* モバイルは画面内に収める */
  transform-origin: 100% 50%;
}

@media (min-width: 640px) { /* sm: 640px〜 */
  .open-badge { right: -2rem; }         /* sm:-right-8 と同等 */
}

@media (min-width: 768px) { /* md: 768px〜 */
  .open-badge { right: -6rem; }         /* md:-right-24 と同等 */
}