/* === Tailwind CSS 設定 === */
/* Tailwind CSS CDNを使用している場合、以下は参考用 */

/* === 基本設定 === */
:where([class^="ri-"])::before { 
  content: "\f3c2"; 
}

body {
  font-family: 'Noto Serif JP', serif;
  background-color: #F5F2E9;
  color: #333;
}

/* === フォントファミリー === */
.japanese-title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
}

/* === 背景テクスチャ === */
.paper-texture {
  background-image: url('https://readdy.ai/api/search-image?query=Japanese%2520washi%2520paper%2520texture%2C%2520light%2520beige%2520color%2C%2520subtle%2520fiber%2520patterns%2C%2520traditional%2520handmade%2520appearance%2C%2520delicate%2520and%2520natural%2520looking%2520surface%2C%2520minimal%2520design%2C%2520soft%2520and%2520warm%2520tone%2C%2520elegant%2520and%2520refined%2520texture&width=1920&height=1080&seq=paper-texture&orientation=landscape');
  background-size: cover;
  background-position: center;
}

.wood-texture {
  background-image: url('./img/Whisk_8d48d53b9c.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* === アニメーション === */
.scroll-down-arrow {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

/* === カルーセル設定 === */
.room-carousel {
  scrollbar-width: none;
}

.room-carousel::-webkit-scrollbar {
  display: none;
}

/* === フォーム要素 === */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* === カスタムスイッチ === */
.custom-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.custom-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .switch-slider {
  background-color: #4A5D23;
}

input:checked + .switch-slider:before {
  transform: translateX(24px);
}

/* === カスタムカラー（Tailwind設定補完） === */
:root {
  --primary: #4A5D23;
  --secondary: #1A472A;
  --accent: #8D5524;
  --paper: #F5F2E9;
}

/* === レスポンシブ対応 === */
@media (max-width: 768px) {
  /* モバイル用の追加スタイル */
}

@media (max-width: 480px) {
  /* 小画面モバイル用の追加スタイル */
}