/* ------------------------------------------------------------------
   extras.css

   styles.css は元サイトのビルド済み Tailwind CSS です。
   そこに「入っていない」クラスだけを、ここに手書きで足しています。

   新しく Tailwind 風のクラスを HTML に書き足したのに効かないときは、
   このファイルに同じ名前で定義を追記してください。
   ブレークポイント: sm = 640px / lg = 1024px
------------------------------------------------------------------ */

/* レイアウト */
.top-10 { top: 2.5rem; }
.pb-1 { padding-bottom: .25rem; }
.w-6 { width: 1.5rem; }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .625rem; }

/* 地図まわり */
.h-\[300px\] { height: 300px; }
.rounded-\[\.95rem\] { border-radius: .95rem; }
.bg-\[\#f3e3d0\] { background-color: #f3e3d0; }
.bg-\[\#f6c26f\]\/30 { background-color: #f6c26f4d; }

/* ボタンを少し小さくする用（!importantつき） */
.\!px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.\!py-2\.5 { padding-top: .625rem !important; padding-bottom: .625rem !important; }
.\!text-xs { font-size: .75rem !important; line-height: 1rem !important; }

/* 文字・色 */
.text-\[\.66rem\] { font-size: .66rem; }
.text-\[\#3d5442\] { color: #3d5442; }
.underline-offset-2 { text-underline-offset: 2px; }
.opacity-40 { opacity: .4; }
.hover\:text-\[\#8d4230\]:hover { color: #8d4230; }
.hover\:text-\[\#1e3027\]:hover { color: #1e3027; }
.hover\:text-white:hover { color: #fff; }

/* 予約完了ボックス */
.bg-\[\#f2f7ee\] { background-color: #f2f7ee; }
.border-\[\#496c51\]\/25 { border-color: #496c5140; }

/* レスポンシブ */
@media (min-width: 640px) {
  .sm\:h-\[360px\] { height: 360px; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-\[1\.05fr_\.95fr\] { grid-template-columns: 1.05fr .95fr; }
}