[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Duplicate of 海亀兄弟 *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/komes-projects-57500d78/v0-website) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/CqTMAOXW59c) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/komes-projects-57500d78/v0-website](https://vercel.com/komes-projects-57500d78/v0-website)** ## Build your app Continue building your app on: **[https://v0.app/chat/CqTMAOXW59c](https://v0.app/chat/CqTMAOXW59c)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/api/booking/route.ts" import { NextResponse } from 'next/server' import { generateBookingNumber, sendToGAS, createAPIResponse, createAPIError } from '@/lib/services/gas-service' import { validateEmail, validateRequired } from '@/lib/utils/validation' interface BookingRequest { selectedDate: string customerName: string customerEmail: string customerPhone?: string planName: string selectedTime?: string participants: Array<{ category: string }> totalPrice: number staffName?: string specialRequests?: string } // 必須フィールドの検証 const validateBookingRequest = (data: BookingRequest): { valid: boolean; error?: string } => { const { selectedDate, customerName, customerEmail, participants } = data // 基本フィールド const dateValidation = validateRequired(selectedDate) if (!dateValidation.valid) return { valid: false, error: '予約日が必須です' } const nameValidation = validateRequired(customerName) if (!nameValidation.valid) return { valid: false, error: '氏名が必須です' } const emailValidation = validateEmail(customerEmail) if (!emailValidation.valid) return { valid: false, error: emailValidation.error } // 参加者 if (!Array.isArray(participants) || participants.length === 0) { return { valid: false, error: '参加者情報が必要です' } } return { valid: true } } // 参加者数をカテゴリ別に集計 const countParticipantsByCategory = (participants: Array<{ category: string }>) => { return { adultCount: participants.filter((p) => p.category === 'adult').length, childCount: participants.filter((p) => p.category === 'child').length, under3Count: participants.filter((p) => p.category === 'under3').length, } } // GAS用ペイロードを構築 const buildGASPayload = (bookingData: BookingRequest, bookingNumber: string) => { const { adultCount, childCount, under3Count } = countParticipantsByCategory(bookingData.participants) return { bookingNumber, customerName: bookingData.customerName, customerEmail: bookingData.customerEmail, customerPhone: bookingData.customerPhone || '', planName: bookingData.planName, selectedDate: bookingData.selectedDate, selectedTime: bookingData.selectedTime || 'サンセット時刻（後日連絡）', participants: bookingData.participants, adultCount, childCount, under3Count, totalPrice: bookingData.totalPrice, staffName: bookingData.staffName || '', specialRequests: bookingData.specialRequests || '', } } export async function POST(request: Request) { try { // JSONパース let bookingData: BookingRequest try { bookingData = await request.json() } catch (parseError) { console.error('[v0] JSON parse error:', parseError) return NextResponse.json( createAPIError(parseError, 'リクエストの形式が正しくありません'), { status: 400 } ) } // リクエスト検証 const validation = validateBookingRequest(bookingData) if (!validation.valid) { console.error('[v0] Validation error:', validation.error) return NextResponse.json( { success: false, error: validation.error, timestamp: new Date().toISOString(), }, { status: 400 } ) } // 予約番号生成 const bookingNumber = generateBookingNumber() // GASペイロード構築 const gasPayload = buildGASPayload(bookingData, bookingNumber) // GASに送信 try { const result = await sendToGAS(gasPayload) console.log('[v0] Booking created successfully:', { bookingNumber }) return NextResponse.json( createAPIResponse(true, { bookingNumber, result }, '予約が正常に作成されました') ) } catch (gasError) { console.error('[v0] GAS error:', gasError) return NextResponse.json( createAPIError(gasError, 'GAS連携に失敗しました'), { status: 502 } ) } } catch (error) { console.error('[v0] Booking API error:', error) return NextResponse.json(createAPIError(error, '予約処理中にエラーが発生しました'), { status: 500, }) } } [V0_FILE]typescriptreact:file="app/blog/[slug]/BlogPostClient.tsx" "use client" import { notFound } from "next/navigation" import { ArrowLeft, Calendar, Clock, User, Tag, Share2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { BLOG_POSTS } from "@/lib/data" import Link from "next/link" import Image from "next/image" import ReactMarkdown from "react-markdown" import { usePathname } from "next/navigation" import Navbar from "@/components/navbar" import { BLUR_DATA_URLS } from "@/lib/data" interface BlogPostPageProps { params: { slug: string } } export default function BlogPostClient({ params }: BlogPostPageProps) { const pathname = usePathname() const post = BLOG_POSTS.filter((p) => p && typeof p === "object" && p.id && typeof p.id === "string").find( (p) => p.id === params.slug, ) if (!post) { notFound() } const formatDate = (dateString: string) => { const date = new Date(dateString) return date.toLocaleDateString("ja-JP", { year: "numeric", month: "long", day: "numeric", }) } const relatedPosts = BLOG_POSTS.filter( (p) => p && typeof p === "object" && p.id && typeof p.id === "string" && p.category && p.category === post.category && p.id !== post.id, ).slice(0, 3) return (

{/* Hero Section */}

{/* Back Button */}

{/* Title and Meta */}

{post.category}

{post.title}

{post.author}

{formatDate(post.publishedAt)}

約{post.readTime}分で読めます

{/* Main Content */}

{/* Excerpt */}

{post.excerpt}

{/* Content */}

(

{children}

), h2: ({ children }) => (

{children}

), h3: ({ children }) =>

{children}

, p: ({ children }) => (

{children}

), ul: ({ children }) => (

{children} ), li: ({ children }) =>

{children}

, }} > {post.content}

{/* Tags */}

タグ

{post.tags.map((tag) => ( {tag} ))}

{/* Share Button */}

{/* Sidebar */}

{/* Author Info */}

執筆者

{post.author}

海亀兄弟ガイド

{/* Related Posts */} {relatedPosts.length > 0 && (

{relatedPosts.map((relatedPost) => (

{relatedPost.title}

{formatDate(relatedPost.publishedAt)}

))}

)} {/* CTA */}

海亀と泳ごう！

宮古島で感動の海亀体験を

) } [V0_FILE]typescriptreact:file="app/blog/[slug]/not-found.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowLeft, Search } from "lucide-react" export default function NotFound() { return (

記事が見つかりません

お探しの記事は存在しないか、削除された可能性があります。

) } [V0_FILE]typescriptreact:file="app/blog/[slug]/page.tsx" import BlogPostClient from "./BlogPostClient" import { BLOG_POSTS } from "@/lib/data" import { notFound } from "next/navigation" export async function generateStaticParams() { return BLOG_POSTS.filter((post) => post && typeof post === "object" && post.id && typeof post.id === "string").map( (post) => ({ slug: post.id, }), ) } export async function generateMetadata({ params }: { params: { slug: string } }) { const post = BLOG_POSTS.filter((p) => p && typeof p === "object" && p.id && typeof p.id === "string").find( (p) => p.id === params.slug, ) if (!post) { return { title: "記事が見つかりません", } } return { title: `${post.title} | 海亀兄弟ブログ`, description: post.excerpt, } } export default function BlogPostPage({ params }: { params: { slug: string } }) { const post = BLOG_POSTS.filter((p) => p && typeof p === "object" && p.id && typeof p.id === "string").find( (p) => p.id === params.slug, ) if (!post) { notFound() } return } [V0_FILE]typescriptreact:file="app/blog/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/blog/page.tsx" "use client" import { useState, useMemo, useRef, useEffect } from "react" import { Calendar, Clock, User, Tag, ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { BLOG_POSTS, BLOG_CATEGORIES } from "@/lib/data" import Link from "next/link" import Image from "next/image" import { Navbar } from "@/components/navbar" export default function BlogPage() { const [selectedCategory, setSelectedCategory] = useState("全て") const [currentIndex, setCurrentIndex] = useState(0) const scrollContainerRef = useRef(null) const cardRefs = useRef<(HTMLDivElement | null)[]>([]) const filteredPosts = useMemo(() => { const filtered = BLOG_POSTS.filter((post) => { const matchesCategory = selectedCategory === "全て" || post.category === selectedCategory return matchesCategory }) return filtered }, [selectedCategory]) useEffect(() => { const container = scrollContainerRef.current if (!container) return const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting && entry.intersectionRatio > 0.5) { const index = cardRefs.current.indexOf(entry.target as HTMLDivElement) if (index !== -1) { setCurrentIndex(index) } } }) }, { root: container, threshold: [0.5, 0.75, 1.0], rootMargin: "0px", }, ) cardRefs.current.forEach((card) => { if (card) observer.observe(card) }) return () => observer.disconnect() }, [filteredPosts]) const scrollToIndex = (index: number) => { const card = cardRefs.current[index] if (card && scrollContainerRef.current) { const container = scrollContainerRef.current const cardRect = card.getBoundingClientRect() const containerRect = container.getBoundingClientRect() const scrollLeft = card.offsetLeft - (containerRect.width - cardRect.width) / 2 container.scrollTo({ left: scrollLeft, behavior: "smooth", }) } } const goToPrevious = () => { if (currentIndex > 0) { scrollToIndex(currentIndex - 1) } } const goToNext = () => { if (currentIndex < filteredPosts.length - 1) { scrollToIndex(currentIndex + 1) } } const formatDate = (dateString: string) => { const date = new Date(dateString) return date.toLocaleDateString("ja-JP", { year: "numeric", month: "long", day: "numeric", }) } return (

{/* Hero Section */}

海亀兄弟ブログ

宮古島の海の魅力、海亀との出会い、ダイビングの楽しさを現地ガイドがお届けします

{/* Search and Filters */}

{/* Category Filters */}

{BLOG_CATEGORIES.map((category) => ( ))}

{/* Results Count */}

{filteredPosts.length}件の記事が見つかりました

{/* Blog Posts Horizontal Scroll */} {filteredPosts.length > 0 ? (

{filteredPosts.map((_, index) => (

{filteredPosts.map((post, index) => (

{ cardRefs.current[index] = el }} className="flex-none w-[85vw] md:w-[45vw] lg:w-[30vw] snap-center" style={{ scrollSnapAlign: "center", scrollSnapStop: "always", }} >

{post.category}

{post.title}

{post.excerpt}

{post.author}

{post.readTime}分

{formatDate(post.publishedAt)}

{post.tags.slice(0, 3).map((tag) => ( {tag} ))} {post.tags.length > 3 && ( +{post.tags.length - 3} )}

))}

{currentIndex + 1} / {filteredPosts.length} 記事

{filteredPosts.map((_, index) => (

← スワイプして他の記事を見る →

) : ( /* No Results */

記事が見つかりませんでした

フィルター条件を変更してもう一度お試しください

)}

) } [V0_FILE]typescriptreact:file="app/book/page.tsx" import { Navbar } from "@/components/navbar" import { MobileCTA } from "@/components/mobile-cta" import { BubbleBackground } from "@/components/bubble-background" import { BookingForm } from "@/components/booking-form" import { Footer } from "@/components/footer" export default function BookPage() { return (

仮予約フォーム

お客様の情報を入力して、素晴らしいマリン体験をご予約ください。料金は自動計算されます。

) } [V0_FILE]typescriptreact:file="app/faq/page.tsx" import { Navbar } from "@/components/navbar" import { MobileCTA } from "@/components/mobile-cta" import { BubbleBackground } from "@/components/bubble-background" import { FAQHero } from "@/components/faq-hero" import { FAQSection } from "@/components/faq-section" import { Footer } from "@/components/footer" export default function FAQPage() { return (

) } [V0_FILE]typescriptreact:file="app/gallery/page.tsx" import { Navbar } from "@/components/navbar" import { MobileCTA } from "@/components/mobile-cta" import { BubbleBackground } from "@/components/bubble-background" import { GalleryHero } from "@/components/gallery-hero" import { ImageGallery } from "@/components/image-gallery" import { Footer } from "@/components/footer" export default function GalleryPage() { return (

) } [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-inter); --font-mono: var(--font-jetbrains-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } html { overflow-x: hidden; } body { @apply bg-gradient-to-b from-teal-50 via-cyan-50 to-emerald-50 text-foreground; overflow-x: hidden; position: relative; } } /* Consolidated animation and utility classes, removed redundant definitions */ .ios-scroll-fix { -webkit-overflow-scrolling: touch; overscroll-behavior: none; touch-action: manipulation; position: relative; } .main-container { overscroll-behavior: none; -webkit-overflow-scrolling: touch; touch-action: manipulation; } .min-h-screen-ios { min-height: 100vh; min-height: -webkit-fill-available; } /* Mobile scroll optimization */ .mobile-scroll-container { touch-action: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scroll-smooth { scroll-behavior: smooth; } @keyframes rise { 0% { transform: translateY(100vh) scale(0); opacity: 0; will-change: transform, opacity; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) scale(1); opacity: 0; } } @keyframes glint { 0% { transform: translateX(-100%) skewX(-15deg); opacity: 0; will-change: transform, opacity; } 50% { opacity: 1; } 100% { transform: translateX(200%) skewX(-15deg); opacity: 0; } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .bubble { position: absolute; border-radius: 50%; background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(6, 182, 212, 0.3), rgba(52, 211, 153, 0.3)); animation: rise linear infinite; pointer-events: none; box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3), 0 0 20px rgba(16, 185, 129, 0.2); transform: translateZ(0); backface-visibility: hidden; } .glass-card { position: relative; overflow: hidden; } .glass-card::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: glint 3s ease-in-out infinite; z-index: 1; } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter, JetBrains_Mono, Noto_Serif_JP } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import { WelcomeAnimation } from "@/components/welcome-animation" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-inter" }) const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains-mono" }) const notoSerifJP = Noto_Serif_JP({ subsets: ["latin"], weight: ["300", "400", "500"], variable: "--font-noto-serif-jp", }) export const metadata: Metadata = { title: "海亀兄弟予約ページ | 宮古島マリン体験", description: "宮古島で家族向け少人数制マリン体験なら海亀兄弟。ウミガメシュノーケル、ナイトツアーなど、安心・誠実・やわらかな高揚感をお届けします。", generator: "v0.app", icons: { icon: "/icon.png", apple: "/icon.png", }, openGraph: { title: "海亀兄弟 | 宮古島マリン体験", description: "家族向け少人数制マリン体験。安心・誠実・やわらかな高揚感をお届けします。", url: "https://miyakojima.vercel.app", siteName: "海亀兄弟", locale: "ja_JP", type: "website", }, twitter: { card: "summary_large_image", title: "海亀兄弟 | 宮古島マリン体験", description: "家族向け少人数制マリン体験。安心・誠実・やわらかな高揚感をお届けします。", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Navbar } from "@/components/navbar" import { MobileCTA } from "@/components/mobile-cta" import { BubbleBackground } from "@/components/bubble-background" import { TrustRibbon } from "@/components/trust-ribbon" import { PopularPlans } from "@/components/popular-plans" import { Footer } from "@/components/footer" import { HeroSection } from "@/components/hero-section" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="app/staff/page.tsx" import { Navbar } from "@/components/navbar" import { MobileCTA } from "@/components/mobile-cta" import { BubbleBackground } from "@/components/bubble-background" import { StaffHero } from "@/components/staff-hero" import { StaffGrid } from "@/components/staff-grid" import { Footer } from "@/components/footer" export default function StaffPage() { return (

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/PlanCard.tsx" "use client" import { formatPriceWithTilde, BLUR_DATA_URLS } from "@/lib/data" import { dateToYMD } from "@/lib/date-utils" import { Heart, ChevronDown, ExternalLink } from "lucide-react" import { useState, useMemo } from "react" import Link from "next/link" import Image from "next/image" export default function PlanCard({ plan, priority = false }: { plan: any; priority?: boolean }) { const [isFavorite, setIsFavorite] = useState(false) const [selectedDate, setSelectedDate] = useState(null) const [isDetailsOpen, setIsDetailsOpen] = useState(false) const [selectedDuration, setSelectedDuration] = useState(0) // Index of selected duration const discountPercentage = 34 const originalPrice = Math.round(plan.price * 1.5) const currentPrice = plan.flexibleDurations ? plan.flexibleDurations[selectedDuration].price : plan.price const currentNote = plan.flexibleDurations ? plan.flexibleDurations[selectedDuration].note : null const availableDates = useMemo(() => { const dates = [] const today = new Date() const sixMonthsLater = new Date(today) sixMonthsLater.setMonth(today.getMonth() + 6) const daysToShow = Math.ceil((sixMonthsLater.getTime() - today.getTime()) / (1000 * 60 * 60 * 24)) + 1 for (let i = 0; i < daysToShow; i++) { const date = new Date(today) date.setDate(today.getDate() + i) const month = date.getMonth() + 1 const day = date.getDate() const weekday = ["日", "月", "火", "水", "木", "金", "土"][date.getDay()] dates.push({ display: `${month}/${day}`, weekday, fullDate: dateToYMD(date), }) } return dates }, []) return (

{/* Top section: Image + Info */}

{/* */}

{plan.name}

{plan.flexibleDurations && (

{plan.flexibleDurations.map((duration: any, index: number) => ( ))}

)}

★ {plan.rating} ({plan.reviewCount}件)

{plan.flexibleDurations ? "1組あたり" : `参加者（${plan.ageRange}）1人`}

{plan.flexibleDurations ? (

¥{currentPrice.toLocaleString()} {currentNote && {currentNote}}

) : (

¥{originalPrice.toLocaleString()} {plan.id === "S2" ? `¥${plan.price.toLocaleString()}` : formatPriceWithTilde({ price: plan.price, childPrice: plan.childPrice })}

)} {plan.id !== "S2" && !plan.flexibleDurations && ( {discountPercentage}% OFF!! )}

{/* Middle section: Supplementary info */}

{!plan.flexibleDurations && ( <>

体験料、消費税、器材レンタル、写真データ込み

体験の前日までキャンセル無料！

)}

開催時間： {plan.timeTags?.slice(0, 4).join(" / ")} {plan.timeTags?.length > 4 && " ..."}

{!plan.flexibleDurations && (

予約可能日

{availableDates.map((date) => ( ))}

)} {plan.flexibleDurations && (

LINEで相談する

)} {isDetailsOpen && (

{/* Description */}

プラン詳細

{plan.description}

{/* Features */} {plan.features && plan.features.length > 0 && (

特徴

{plan.features.map((feature: string, index: number) => ( {feature} ))}

)} {/* Duration */}

所要時間

{plan.durationHours}時間

{/* What to bring */} {plan.whatToBring && plan.whatToBring.length > 0 && (

持ち物

• {item}

)} {/* Meeting location */} {plan.location && (

集合場所

{typeof plan.location === "string" ? plan.location : plan.location.default}

{typeof plan.location === "object" && plan.location.northWind && (

※北風時: {plan.location.northWind} / 南風時: {plan.location.southWind}

)}

)} {/* Meeting time */} {plan.meetingTime && (

集合時間

{plan.meetingTime.regular}

{plan.meetingTime.early &&

{plan.meetingTime.early}

}

)} {/* Options */} {plan.options && plan.options.length > 0 && (

オプション

{option.name} ¥{option.price.toLocaleString()} {option.freeForPrivate && ( （貸切時無料） )}

)} {/* Precautions */} {plan.precautions && plan.precautions.length > 0 && (

注意事項

• {item}

)} {/* Payment method */} {plan.paymentMethod && (

支払い方法

{plan.paymentMethod}

)}

) } [V0_FILE]typescriptreact:file="components/TurtleLogo.tsx" interface TurtleLogoProps { className?: string size?: number } export function TurtleLogo({ className = "", size = 32 }: TurtleLogoProps) { return (

) } [V0_FILE]typescriptreact:file="components/booking-form.tsx" "use client" import type React from "react" import { ParticipantForm } from "./participant-form" import { useState, useEffect, useCallback, useRef } from "react" import { useSearchParams } from "next/navigation" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Checkbox } from "@/components/ui/checkbox" import { Badge } from "@/components/ui/badge" import { Calendar, Clock, Users, Calculator, Star, CheckCircle, UserCheck, Check } from "lucide-react" import { PLANS, STAFF_FEE } from "@/lib/data" import { todayStr, localDateFromYMD } from "@/lib/date-utils" import BookingTimeSlots from "@/components/booking-time-slots" interface ParticipantDetails { id: string // Added unique ID for each participant name: string age: number | "" height: number | "" weight: number | "" footSize: number | "" category: "adult" | "child" | "under3" } interface BookingData { selectedPlan: string selectedDate: string selectedTime: string adultCount: number childCount: number under3Count: number participants: ParticipantDetails[] selectedStaff: string selectedDuration: "5h" | "7h" | "9h" customerName: string customerEmail: string customerPhone: string specialRequests: string agreedToTerms: boolean couponCode: string couponDiscount: number } const ADULT_PRICE = 6000 // Declare ADULT_PRICE variable const CHILD_PRICE = 6000 // Declare CHILD_PRICE variable function getPlanType(planId: string): "night-hunter" | "sunset-sup" | "other" { switch (planId) { case "S3": return "night-hunter" case "S4": return "sunset-sup" default: return "other" } } function generateParticipantId(category: string, index: number): string { return `${category}-${index}-${Date.now()}` } const STAFF_LIST = [ { id: "", name: "指名なし" }, { id: "staff1", name: "やまちゃん" }, { id: "staff2", name: "ひかる" }, { id: "staff3", name: "そういちろう" }, { id: "staff4", name: "凪" }, ] export function BookingForm() { const searchParams = useSearchParams() const hasInitialized = useRef(false) const [bookingData, setBookingData] = useState({ selectedPlan: "", selectedDate: "", selectedTime: "", adultCount: 0, childCount: 0, under3Count: 0, participants: [], selectedStaff: "", selectedDuration: "5h", customerName: "", customerEmail: "", customerPhone: "", specialRequests: "", agreedToTerms: false, couponCode: "", couponDiscount: 0, }) const [totalPrice, setTotalPrice] = useState(0) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) useEffect(() => { if (hasInitialized.current) return const planParam = searchParams?.get("plan") const dateParam = searchParams?.get("date") if (planParam || dateParam) { hasInitialized.current = true setBookingData((prev) => ({ ...prev, ...(planParam && { selectedPlan: planParam }), ...(dateParam && { selectedDate: dateParam }), })) } }, [searchParams]) const selectedPlanData = PLANS.find((plan) => plan.id === bookingData.selectedPlan) const getCurrentPrices = () => { if (!selectedPlanData) { return { adultPrice: ADULT_PRICE, childPrice: CHILD_PRICE } } return { adultPrice: selectedPlanData.price, childPrice: selectedPlanData.childPrice || selectedPlanData.price, } } const { adultPrice, childPrice } = getCurrentPrices() const getAgeCategories = () => { const isNightHunter = bookingData.selectedPlan === "S3" return { childLabel: isNightHunter ? "子ども（4-12歳）" : "子ども（5-12歳）", minAge: isNightHunter ? 4 : 5, showUnder3: isNightHunter, ageRestrictionMessage: isNightHunter ? "※3歳未満は無料（保護者同伴必須）" : "※5歳未満のお子様は参加できません", } } const { childLabel, minAge, showUnder3, ageRestrictionMessage } = getAgeCategories() const createParticipants = useCallback( (adultCount: number, childCount: number, under3Count: number, existingParticipants: ParticipantDetails[]) => { const newParticipants: ParticipantDetails[] = [] const existingAdults = existingParticipants.filter((p) => p.category === "adult") const existingChildren = existingParticipants.filter((p) => p.category === "child") const existingUnder3 = existingParticipants.filter((p) => p.category === "under3") // Add adults for (let i = 0; i < adultCount; i++) { const existing = existingAdults[i] newParticipants.push( existing || { id: generateParticipantId("adult", i), name: "", age: "", height: "", weight: "", footSize: "", category: "adult", }, ) } // Add children for (let i = 0; i < childCount; i++) { const existing = existingChildren[i] newParticipants.push( existing || { id: generateParticipantId("child", i), name: "", age: "", height: "", weight: "", footSize: "", category: "child", }, ) } // Add under-3 for (let i = 0; i < under3Count; i++) { const existing = existingUnder3[i] newParticipants.push( existing || { id: generateParticipantId("under3", i), name: "", age: "", height: "", weight: "", footSize: "", category: "under3", }, ) } return newParticipants }, [], ) useEffect(() => { const totalParticipants = bookingData.adultCount + bookingData.childCount + bookingData.under3Count const currentParticipants = bookingData.participants.length if (totalParticipants !== currentParticipants) { const newParticipants = createParticipants( bookingData.adultCount, bookingData.childCount, bookingData.under3Count, bookingData.participants, ) setBookingData((prev) => ({ ...prev, participants: newParticipants, })) } }, [bookingData.adultCount, bookingData.childCount, bookingData.under3Count, createParticipants]) useEffect(() => { // Calculate per-person pricing for all plans const baseTotal = bookingData.adultCount * adultPrice + bookingData.childCount * childPrice const under3Price = bookingData.selectedPlan === "S3" ? 0 : childPrice const under3Total = bookingData.under3Count * under3Price const vipSurcharge = selectedPlanData?.vipSurcharge || 0 const staffFee = bookingData.selectedStaff ? STAFF_FEE : 0 setTotalPrice(baseTotal + under3Total + vipSurcharge + staffFee - bookingData.couponDiscount) }, [ bookingData.adultCount, bookingData.childCount, bookingData.under3Count, bookingData.selectedPlan, bookingData.selectedStaff, bookingData.couponDiscount, selectedPlanData, adultPrice, childPrice, ]) const handleInputChange = (field: keyof BookingData, value: any) => { console.log("[v0] handleInputChange:", field, value) setBookingData((prev) => ({ ...prev, [field]: value, })) } const COUPON_LIST: Record = { "UMIGAME500": 500, "カメハメハ": 1000, } const handleCouponApply = () => { const totalPeople = bookingData.adultCount + bookingData.childCount const discountPerPerson = COUPON_LIST[bookingData.couponCode] if (discountPerPerson) { const discount = totalPeople * discountPerPerson setBookingData((prev) => ({ ...prev, couponDiscount: discount })) } else { setBookingData((prev) => ({ ...prev, couponDiscount: 0 })) alert("クーポンコードが正しくありません") } } const handleParticipantChange = (participantId: string, field: keyof ParticipantDetails, value: any) => { setBookingData((prev) => ({ ...prev, participants: prev.participants.map((participant) => participant.id === participantId ? { ...participant, [field]: value } : participant, ), })) } const handleCountChange = (field: "adultCount" | "childCount" | "under3Count", increment: boolean) => { const isVip = bookingData.selectedPlan === "S2" const maxParticipants = isVip ? 6 : 999 const currentTotal = bookingData.adultCount + bookingData.childCount if (increment && isVip && currentTotal >= maxParticipants) return setBookingData((prev) => ({ ...prev, [field]: Math.max(0, prev[field] + (increment ? 1 : -1)), })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { const response = await fetch("/api/booking", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ ...bookingData, planName: selectedPlanData?.name, staffName: STAFF_LIST.find((s) => s.id === bookingData.selectedStaff)?.name, adultPrice, childPrice, vipSurcharge: selectedPlanData?.vipSurcharge || 0, totalPrice, couponCode: bookingData.couponCode, couponDiscount: bookingData.couponDiscount, }), }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) const errorMessage = errorData.error || `エラーが発生しました（ステータス: ${response.status}）` console.error("[v0] Booking API error:", { status: response.status, error: errorData }) throw new Error(errorMessage) } const result = await response.json() console.log("[v0] Booking submitted successfully:", result) setIsSubmitted(true) } catch (error) { console.error("[v0] Booking submission error:", error) const errorMessage = error instanceof Error ? error.message : "予約の送信中にエラーが発生しました。もう一度お試しください。" alert(errorMessage) } finally { setIsSubmitting(false) } } const isFormValid = bookingData.selectedPlan && bookingData.selectedDate && (getPlanType(bookingData.selectedPlan) === "sunset-sup" || bookingData.selectedTime) && (bookingData.adultCount > 0 || bookingData.childCount > 0 || bookingData.under3Count > 0) && bookingData.customerName && bookingData.customerEmail && bookingData.customerPhone && bookingData.agreedToTerms && bookingData.participants.every((p) => { // Check required fields for all participants if (p.name.trim() === "" || typeof p.age !== "number" || p.age <= 0) { return false } // For night tour (S3 or night-hunter), height, weight, and footSize are optional const isNightTour = bookingData.selectedPlan === "S3" || bookingData.selectedPlan === "night-hunter" if (isNightTour) { // Night tour: these fields are optional, but if provided, must be valid return true } else { // Other plans: height, weight, and footSize are required return ( typeof p.height === "number" && p.height > 0 && typeof p.weight === "number" && p.weight > 0 && typeof p.footSize === "number" && p.footSize > 0 ) } }) if (isSubmitted) { return (

仮予約が完了しました！

ご予約ありがとうございます。確認メールを送信いたしました。
24時間以内にスタッフよりご連絡いたします。

予約内容

プラン: {selectedPlanData?.name}

日時: {bookingData.selectedDate}{" "} {getPlanType(bookingData.selectedPlan) === "sunset-sup" ? "(時間は後日ご連絡)" : bookingData.selectedTime}

人数: 大人{bookingData.adultCount}名子ども{bookingData.childCount}名 {bookingData.under3Count > 0 && ` 3歳未満${bookingData.under3Count}名`}

{bookingData.selectedStaff && (

スタッフ指名: {STAFF_LIST.find((s) => s.id === bookingData.selectedStaff)?.name} (+¥ {STAFF_FEE.toLocaleString()})

)} {selectedPlanData?.vipSurcharge > 0 && (

貸切追加料金: ¥{selectedPlanData.vipSurcharge.toLocaleString()}

)}

合計金額: ¥{totalPrice.toLocaleString()}

) } return (

{/* Plan Selection */} プラン選択

ご希望のプランを選択してください

{PLANS.sort((a, b) => (a.rank || 999) - (b.rank || 999)).map((plan) => ( handleInputChange("selectedPlan", e.target.value)} className="sr-only" />

{/* Selected indicator */} {bookingData.selectedPlan === plan.id && (

)}

{plan.name}

{plan.durationHours}時間 {plan.rating}

{plan.id === "S3" ? (

¥4,000

) : plan.id === "S5" ? (

¥58,000〜

) : (

¥{plan.price.toLocaleString()}{plan.id !== "S2" && "〜"}

)}

))}

{selectedPlanData && (

プラン詳細

{selectedPlanData.description}

対象年齢

{selectedPlanData.ageRange}

料金

{selectedPlanData.id === "S3" ? ( <> ¥{selectedPlanData.price.toLocaleString()}{" "} (3歳以下無料) ) : ( <>大人¥{selectedPlanData.price.toLocaleString()} )}

{selectedPlanData.features && selectedPlanData.features.length > 0 && (

{selectedPlanData.features.slice(0, 3).map((feature, index) => ( {feature} ))}

)}

)} {/* Date and Time Selection */} 日時選択

希望日 { handleInputChange("selectedDate", e.target.value) }} min={todayStr()} className="rounded-xl border-emerald-200 focus:border-emerald-500" /> {bookingData.selectedDate && (

選択中: {bookingData.selectedDate}

)}

開始時間 {bookingData.selectedDate && bookingData.selectedPlan ? ( handleInputChange("selectedTime", time)} /> ) : (

プランと日付を選択してください

)} {selectedPlanData && getPlanType(bookingData.selectedPlan) !== "sunset-sup" && (

選択中のプラン「{selectedPlanData.name}」の利用可能時間が表示されています {getPlanType(bookingData.selectedPlan) === "night-hunter" && ( (夜間限定) )}

)}

{/* Participant Count */} 参加人数 {bookingData.selectedPlan && bookingData.selectedPlan !== "S3" && (

年齢制限: このプランは5歳以上のお客様が対象です。 3歳未満のお子様が参加できるのは【アマゾン帰りの男と行く】本格ナイトツアーのみとなります。

)} {bookingData.selectedPlan === "S2" && (

VIP貸切プランについて：
• 料金：¥9,000 / 1名
• 最大6名まで承ります
• 7名以上の場合はLINEよりご相談ください

)}

{/* Adult Count */}

大人（13歳以上）￥{adultPrice.toLocaleString()}/人

{bookingData.adultCount}

{/* Child Count */}

{childLabel} ￥{childPrice.toLocaleString()}/人

{bookingData.childCount}

{/* Under-3 Count - Only show for Night Hunter Test */} {showUnder3 && (

3歳未満無料

{bookingData.under3Count}

)}

{/* Price Calculation */}

料金計算

<> {bookingData.adultCount > 0 && (

大人 {bookingData.adultCount}名 × ￥{adultPrice.toLocaleString()} ￥{(bookingData.adultCount * adultPrice).toLocaleString()}

)} {bookingData.childCount > 0 && (

子ども {bookingData.childCount}名 × ￥{childPrice.toLocaleString()} ￥{(bookingData.childCount * childPrice).toLocaleString()}

)} {bookingData.under3Count > 0 && (

3歳未満 {bookingData.under3Count}名 ×{" "} {bookingData.selectedPlan === "S3" ? "無料" : `￥${childPrice.toLocaleString()}`} {bookingData.selectedPlan === "S3" ? "￥0" : `￥${(bookingData.under3Count * childPrice).toLocaleString()}`}

)} {selectedPlanData?.vipSurcharge > 0 && (

貸切追加料金￥{selectedPlanData.vipSurcharge.toLocaleString()}

)} {bookingData.selectedStaff && (

スタッフ指名料￥{STAFF_FEE.toLocaleString()}

)} {bookingData.couponDiscount > 0 && (

🎉 LINEクーポン割引 -￥{bookingData.couponDiscount.toLocaleString()}

)}

合計金額￥{totalPrice.toLocaleString()}

{/* クーポンコード */}

クーポンコード

handleInputChange("couponCode", e.target.value)} className="rounded-xl border-emerald-200 focus:border-emerald-500" />

{bookingData.couponDiscount > 0 && (

🎉 クーポン適用済み！ -{bookingData.couponDiscount.toLocaleString()}円引き

)}

<> {ageRestrictionMessage}
※器材レンタル・保険料込み {selectedPlanData?.vipSurcharge > 0 && ( <>
※貸切プランは通常料金に追加で￥{selectedPlanData.vipSurcharge.toLocaleString()} の貸切料金がかかります )}

{/* Participant Details */} {/* Customer Information */} お客様情報

代表者氏名 * handleInputChange("customerName", e.target.value)} placeholder="山田太郎" className="rounded-xl border-emerald-200 focus:border-emerald-500" required />

メールアドレス * handleInputChange("customerEmail", e.target.value)} placeholder="example@email.com" className="rounded-xl border-emerald-200 focus:border-emerald-500" required />

電話番号 * handleInputChange("customerPhone", e.target.value)} placeholder="090-1234-5678" className="rounded-xl border-emerald-200 focus:border-emerald-500" required />

特別なご要望・アレルギー等

handleInputChange("specialRequests", e.target.value)}
              placeholder="何かご要望がございましたらお書きください"
              className="rounded-xl border-emerald-200 focus:border-emerald-500"
              rows={3}
            />
          </div>
        </CardContent>
      </Card>

{/* Staff Selection */}
      <Card className="glass-card bg-white/70 backdrop-blur-xl rounded-3xl ring-1 ring-emerald-100 shadow-lg">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-emerald-800">
            <UserCheck className="w-5 h-5" />
            スタッフ指名（オプション）
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-4">
            <p className="text-sm text-blue-800">
              <strong>スタッフ指名について:</strong>
              <br />• お好みのスタッフを指名できます（追加料金: ¥{STAFF_FEE.toLocaleString()}）
              <br />• 指名は任意です。指名なしでも素晴らしい体験をお約束します
              <br />• スタッフの都合により、ご希望に添えない場合がございます
            </p>
          </div>

<div>
            <Label htmlFor="staff" className="text-sm font-medium text-gray-700 mb-2 block">
              スタッフ選択
            </Label>
            <select
              id="staff"
              value={bookingData.selectedStaff}
              onChange={(e) => handleInputChange("selectedStaff", e.target.value)}
              className="w-full rounded-xl border-2 border-emerald-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 px-4 py-3 text-gray-700 bg-white transition-all"
            >
              {STAFF_LIST.map((staff) => (
                <option key={staff.id} value={staff.id}>
                  {staff.name}
                  {staff.id && ` (+¥${STAFF_FEE.toLocaleString()})`}
                </option>
              ))}
            </select>
          </div>

{bookingData.selectedStaff && (
            <div className="bg-emerald-50 rounded-xl p-4">
              <p className="text-sm text-emerald-800">
                <strong>{STAFF_LIST.find((s) => s.id === bookingData.selectedStaff)?.name}</strong>を指名しました
                <br />
                <span className="text-emerald-600">指名料金: ¥{STAFF_FEE.toLocaleString()}</span>
              </p>
            </div>
          )}
        </CardContent>
      </Card>

{/* Terms and Submit */}
      <Card className="glass-card bg-white/70 backdrop-blur-xl rounded-3xl ring-1 ring-emerald-100 shadow-lg">
        <CardContent className="p-6">
          <div className="flex items-start space-x-3 mb-6">
            <Checkbox
              id="terms"
              checked={bookingData.agreedToTerms}
              onCheckedChange={(checked) => handleInputChange("agreedToTerms", checked)}
              className="mt-1"
            />
            <Label htmlFor="terms" className="text-sm text-gray-600 leading-relaxed">
              利用規約・キャンセルポリシーに同意します。
              <br />
              <span className="text-xs text-gray-500">
                ※前日と当日のキャンセルは100%のキャンセル料が発生します。
                <br />
                ※悪天候による中止の場合は全額返金いたします。
              </span>
            </Label>
          </div>

<Button
            type="submit"
            size="lg"
            disabled={!isFormValid || isSubmitting}
            className="w-full bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl py-4 text-lg font-semibold disabled:opacity-50"
          >
            {isSubmitting ? "送信中..." : "仮予約を送信する"}
          </Button>

<p className="text-xs text-gray-500 text-center mt-3">送信後、24時間以内にスタッフよりご連絡いたします。</p>
        </CardContent>
      </Card>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/booking-time-slots.tsx"
"use client"

import { useMemo } from "react"
import SunCalc from "suncalc"
import { format } from "date-fns"
import { ja } from "date-fns/locale"
import { Button } from "@/components/ui/button"
import { Clock, Info } from "lucide-react"

type PlanId = "night-hunter" | "sunset-sup" | "other"

type Props = {
  selectedPlan: PlanId
  selectedDate: Date
  selectedTime: string
  onPick: (time: string) => void
}

// 宮古島の座標（市街地基準）
const MIYAKOJIMA = { lat: 24.805, lon: 125.281 }

function roundTo5Min(date: Date) {
  const d = new Date(date)
  const ms = 1000 * 60 * 5
  d.setTime(Math.round(d.getTime() / ms) * ms)
  return d
}

function toJSTString(date: Date) {
  return format(date, "HH:mm", { locale: ja })
}

function getSunsetSlots(date: Date) {
  const times = SunCalc.getTimes(date, MIYAKOJIMA.lat, MIYAKOJIMA.lon)
  const sunset = times.sunset
  const offsetsMin = [-90, -60, -30]
  const slots = offsetsMin
    .map((m) => {
      const d = new Date(sunset)
      d.setMinutes(d.getMinutes() + m)
      return roundTo5Min(d)
    })
    .filter((d) => {
      const h = d.getHours()
      return h >= 17 && h <= 19 && d.getMinutes() <= 55
    })
    .map(toJSTString)

if (slots.length === 0) {
    return ["17:30", "18:00", "18:30"]
  }
  return Array.from(new Set(slots))
}

function getTimeSlots(plan: PlanId, date: Date): string[] {
  switch (plan) {
    case "night-hunter":
      return ["19:20", "21:10"]
    case "sunset-sup":
      return getSunsetSlots(date)
    default:
      return ["07:00", "09:00", "11:00", "14:00", "16:00"]
  }
}

export default function BookingTimeSlots({ selectedPlan, selectedDate, selectedTime, onPick }: Props) {
  const slots = useMemo(() => getTimeSlots(selectedPlan, selectedDate), [selectedPlan, selectedDate])

if (selectedPlan === "sunset-sup") {
    return (
      <div className="bg-gradient-to-r from-orange-50 to-pink-50 border border-orange-200 rounded-xl p-6">
        <div className="flex items-start gap-3">
          <div className="flex-shrink-0 w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
            <Clock className="w-5 h-5 text-orange-600" />
          </div>
          <div className="flex-1">
            <h3 className="font-semibold text-orange-800 mb-2">サンセットSUP 時間について</h3>
            <p className="text-sm text-orange-700 mb-3">
              サンセットSUPの開始時間は、当日の日没時刻と天候状況を考慮して最適な時間を決定いたします。
            </p>
            <div className="bg-white/60 rounded-lg p-3 border border-orange-200">
              <div className="flex items-center gap-2 mb-2">
                <Info className="w-4 h-4 text-orange-600" />
                <span className="text-sm font-medium text-orange-800">予約確定時にお知らせします</span>
              </div>
              <ul className="text-xs text-orange-600 space-y-1">
                <li>• 通常17:00〜19:00の間で開始</li>
                <li>• 日没30〜90分前の最適な時間</li>
                <li>{""}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="grid grid-cols-3 md:grid-cols-5 gap-3">
      {slots.map((time) => (
        <Button
          key={time}
          type="button"
          variant={selectedTime === time ? "default" : "outline"}
          size="sm"
          onClick={() => onPick(time)}
          className={`rounded-xl ${
            selectedTime === time
              ? "bg-emerald-600 hover:bg-emerald-700 text-white"
              : "border-emerald-200 text-emerald-700 hover:bg-emerald-50"
          }`}
        >
          {time}
        </Button>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/booking/CustomerInfo.tsx"
'use client'

import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'

interface CustomerInfoProps {
  customerName: string
  customerEmail: string
  customerPhone: string
  specialRequests: string
  errors: Record<string, string>
  onChange: (field: string, value: string) => void
}

export function CustomerInfo({
  customerName,
  customerEmail,
  customerPhone,
  specialRequests,
  errors,
  onChange,
}: CustomerInfoProps) {
  return (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold">お客様情報</h3>

<div className="space-y-2">
        <Label htmlFor="customerName">氏名 *</Label>
        <Input
          id="customerName"
          value={customerName}
          onChange={(e) => onChange('customerName', e.target.value)}
          placeholder="山田太郎"
          className={errors.customerName ? 'border-red-500' : ''}
        />
        {errors.customerName && <p className="text-sm text-red-500">{errors.customerName}</p>}
      </div>

<div className="space-y-2">
        <Label htmlFor="customerEmail">メールアドレス *</Label>
        <Input
          id="customerEmail"
          type="email"
          value={customerEmail}
          onChange={(e) => onChange('customerEmail', e.target.value)}
          placeholder="example@mail.com"
          className={errors.customerEmail ? 'border-red-500' : ''}
        />
        {errors.customerEmail && <p className="text-sm text-red-500">{errors.customerEmail}</p>}
      </div>

<div className="space-y-2">
        <Label htmlFor="customerPhone">電話番号 *</Label>
        <Input
          id="customerPhone"
          value={customerPhone}
          onChange={(e) => onChange('customerPhone', e.target.value)}
          placeholder="090-1234-5678"
          className={errors.customerPhone ? 'border-red-500' : ''}
        />
        {errors.customerPhone && <p className="text-sm text-red-500">{errors.customerPhone}</p>}
      </div>

<div className="space-y-2">
        <Label htmlFor="specialRequests">特別なご要望（オプション）</Label>
        <Textarea
          id="specialRequests"
          value={specialRequests}
          onChange={(e) => onChange('specialRequests', e.target.value)}
          placeholder="アレルギーやご要望があればお知らせください"
          rows={3}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/booking/ParticipantManager.tsx"
'use client'

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Badge } from '@/components/ui/badge'
import { Participant } from '@/lib/hooks/useBookingForm'

interface ParticipantManagerProps {
  participants: Participant[]
  onAddParticipant: (category: Participant['category']) => void
  onRemoveParticipant: (id: string) => void
  onUpdateParticipant: (id: string, updates: Partial<Participant>) => void
  error?: string
}

export function ParticipantManager({
  participants,
  onAddParticipant,
  onRemoveParticipant,
  onUpdateParticipant,
  error,
}: ParticipantManagerProps) {
  const categoryLabels: Record<Participant['category'], string> = {
    adult: '大人',
    child: '子供',
    under3: '3歳未満',
  }

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="text-lg font-semibold">参加者情報</h3>
        <div className="flex gap-2">
          <Button
            size="sm"
            variant="outline"
            onClick={() => onAddParticipant('adult')}
          >
            大人を追加
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={() => onAddParticipant('child')}
          >
            子供を追加
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={() => onAddParticipant('under3')}
          >
            幼児を追加
          </Button>
        </div>
      </div>

{error && <p className="text-sm text-red-500">{error}</p>}

{participants.length === 0 ? (
        <p className="text-gray-500 italic">参加者を追加してください</p>
      ) : (
        <div className="space-y-3">
          {participants.map((participant) => (
            <div key={participant.id} className="flex items-end gap-3 p-3 bg-gray-50 rounded-lg">
              <div className="flex-1 space-y-2">
                <Label htmlFor={`participant-${participant.id}`} className="text-sm">
                  {categoryLabels[participant.category]}の名前
                </Label>
                <Input
                  id={`participant-${participant.id}`}
                  value={participant.name}
                  onChange={(e) => onUpdateParticipant(participant.id, { name: e.target.value })}
                  placeholder="参加者名"
                  size={30}
                />
              </div>

{participant.category === 'child' && (
                <div className="w-20 space-y-2">
                  <Label htmlFor={`age-${participant.id}`} className="text-sm">
                    年齢
                  </Label>
                  <Input
                    id={`age-${participant.id}`}
                    type="number"
                    value={participant.age || ''}
                    onChange={(e) => onUpdateParticipant(participant.id, { age: parseInt(e.target.value) })}
                    min="0"
                    max="18"
                  />
                </div>
              )}

<Badge variant="secondary">{categoryLabels[participant.category]}</Badge>

<Button
                size="sm"
                variant="ghost"
                onClick={() => onRemoveParticipant(participant.id)}
                className="text-red-500 hover:text-red-700"
              >
                削除
              </Button>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/booking/PlanSelector.tsx"
'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

interface PlanSelectorProps {
  selectedPlan: string
  onSelectPlan: (planId: string, planName: string) => void
  plans: Array<{ id: string; name: string; price: number }>
}

export function PlanSelector({ selectedPlan, onSelectPlan, plans }: PlanSelectorProps) {
  return (
    <div className="space-y-3">
      <h3 className="text-lg font-semibold">プランを選択</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {plans.map((plan) => (
          <Card
            key={plan.id}
            className={`cursor-pointer transition-all ${
              selectedPlan === plan.id
                ? 'ring-2 ring-green-500 bg-green-50'
                : 'hover:shadow-md'
            }`}
            onClick={() => onSelectPlan(plan.id, plan.name)}
          >
            <CardContent className="p-4">
              <div className="flex justify-between items-start">
                <div>
                  <h4 className="font-medium">{plan.name}</h4>
                  <p className="text-sm text-gray-600">¥{plan.price.toLocaleString()}</p>
                </div>
                {selectedPlan === plan.id && <Badge>選択中</Badge>}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/booking/index.ts"
// 予約関連コンポーネントの統合エクスポート
export { PlanSelector } from './PlanSelector'
export { CustomerInfo } from './CustomerInfo'
export { ParticipantManager } from './ParticipantManager'

export type { } // 必要に応じて型をエクスポート
[V0_FILE]typescriptreact:file="components/bubble-background.tsx"
"use client"

import { useEffect, useState } from "react"

const BUBBLE_CONFIG = {
  count: 6,
  minSize: 20,
  maxSize: 80,
  minDuration: 15,
  maxDuration: 25,
  maxDelay: 10,
} as const

interface Bubble {
  id: number
  size: number
  left: number
  duration: number
  delay: number
}

export function BubbleBackground() {
  const [bubbles, setBubbles] = useState<Bubble[]>([])

useEffect(() => {
    const generateBubbles = () => {
      const newBubbles: Bubble[] = Array.from({ length: BUBBLE_CONFIG.count }, (_, i) => ({
        id: i,
        size: Math.random() * (BUBBLE_CONFIG.maxSize - BUBBLE_CONFIG.minSize) + BUBBLE_CONFIG.minSize,
        left: Math.random() * 100,
        duration: Math.random() * (BUBBLE_CONFIG.maxDuration - BUBBLE_CONFIG.minDuration) + BUBBLE_CONFIG.minDuration,
        delay: Math.random() * BUBBLE_CONFIG.maxDelay,
      }))
      setBubbles(newBubbles)
    }

generateBubbles()
  }, [])

return (
    <div className="fixed inset-0 pointer-events-none overflow-hidden">
      {bubbles.map((bubble) => (
        <div
          key={bubble.id}
          className="bubble"
          style={{
            width: `${bubble.size}px`,
            height: `${bubble.size}px`,
            left: `${bubble.left}%`,
            animationDuration: `${bubble.duration}s`,
            animationDelay: `${bubble.delay}s`,
          }}
        />
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/coverflow-carousel.tsx"
"use client"

import type React from "react"

import { useState, useRef, useEffect, useCallback } from "react"
import Image from "next/image"
import { Star, Clock, Users, ArrowRight } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { formatPriceWithTilde, BLUR_DATA_URLS } from "@/lib/data"

type PlanItem = {
  id: string
  name: string
  rating: number
  reviewCount: number
  image: string
  price: number
  childPrice?: number
  rank?: number
  durationHours: number
  features: string[]
  description: string
}

interface CoverflowCarouselProps {
  items: PlanItem[]
}

export default function CoverflowCarousel({ items }: CoverflowCarouselProps) {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isDragging, setIsDragging] = useState(false)
  const [startX, setStartX] = useState(0)
  const [scrollLeft, setScrollLeft] = useState(0)
  const [velocity, setVelocity] = useState(0)
  const containerRef = useRef<HTMLDivElement>(null)
  const animationRef = useRef<number>()

const formatRating = (rating: number) => {
    return rating === 4.9 ? 5.0 : rating
  }

// Calculate 3D transforms based on position
  const getTransform = (index: number) => {
    const diff = index - currentIndex
    const absDistance = Math.abs(diff)

if (absDistance > 2) return { transform: "translateX(200%) scale(0.7) rotateY(45deg)", opacity: 0 }

const rotateY = diff * 25
    const translateZ = Math.max(0, 60 - absDistance * 30)
    const scale = Math.max(0.8, 1 - absDistance * 0.1)
    const opacity = Math.max(0.3, 1 - absDistance * 0.3)
    const translateX = diff * 15

return {
      transform: `translateX(${translateX}%) translateZ(${translateZ}px) rotateY(${rotateY}deg) scale(${scale})`,
      opacity,
      zIndex: 10 - absDistance,
    }
  }

// Inertial scrolling animation
  const animateInertia = useCallback(() => {
    if (Math.abs(velocity) > 0.1) {
      setVelocity((v) => v * 0.94)
      setCurrentIndex((prev) => {
        const newIndex = prev + velocity * 0.02
        return Math.max(0, Math.min(items.length - 1, newIndex))
      })
      animationRef.current = requestAnimationFrame(animateInertia)
    } else {
      // Snap to nearest item
      setCurrentIndex((prev) => Math.round(prev))
      setVelocity(0)
    }
  }, [velocity, items.length])

// Handle pointer events
  const handlePointerDown = (e: React.PointerEvent) => {
    setIsDragging(true)
    setStartX(e.clientX)
    setScrollLeft(currentIndex)
    setVelocity(0)
    if (animationRef.current) {
      cancelAnimationFrame(animationRef.current)
    }
  }

const handlePointerMove = (e: React.PointerEvent) => {
    if (!isDragging) return

const x = e.clientX
    const walk = (startX - x) * 0.005
    const newIndex = Math.max(0, Math.min(items.length - 1, scrollLeft + walk))
    setCurrentIndex(newIndex)
    setVelocity(walk * 0.5)
  }

const handlePointerUp = () => {
    setIsDragging(false)
    if (Math.abs(velocity) > 0.1) {
      animationRef.current = requestAnimationFrame(animateInertia)
    } else {
      setCurrentIndex((prev) => Math.round(prev))
    }
  }

// Keyboard navigation
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "ArrowLeft") {
        setCurrentIndex((prev) => Math.max(0, prev - 1))
      } else if (e.key === "ArrowRight") {
        setCurrentIndex((prev) => Math.min(items.length - 1, prev + 1))
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [items.length])

// Navigation functions
  const goToPrevious = () => {
    setCurrentIndex((prev) => Math.max(0, prev - 1))
  }

const goToNext = () => {
    setCurrentIndex((prev) => Math.min(items.length - 1, prev + 1))
  }

return (
    <div className="relative w-full py-8">
      {/* Navigation Arrows - Desktop only */}
      <button
        onClick={goToPrevious}
        disabled={currentIndex === 0}
        className="hidden md:flex absolute left-4 top-1/2 -translate-y-1/2 z-30 w-12 h-12 items-center justify-center bg-white/80 backdrop-blur-sm rounded-full shadow-lg border border-emerald-100 text-emerald-600 hover:bg-white hover:text-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
      >
        <ArrowRight className="w-6 h-6 rotate-180" />
      </button>

{/* Carousel Container */}
      <div
        ref={containerRef}
        className="relative h-[500px] md:h-[600px] overflow-hidden"
        style={{ perspective: "1000px" }}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerUp}
        onPointerLeave={handlePointerUp}
        role="region"
        aria-roledescription="carousel"
      >
        {/* Edge fade mask */}
        <div
          className="absolute inset-0 pointer-events-none z-20"
          style={{
            maskImage: "linear-gradient(to right, transparent, black 10%, black 90%, transparent)",
            WebkitMaskImage: "linear-gradient(to right, transparent, black 10%, black 90%, transparent)",
          }}
        />

{/* Carousel Items */}
        <div className="relative w-full h-full flex items-center justify-center">
          {items.map((item, index) => {
            const { transform, opacity, zIndex } = getTransform(index)
            const isActive = Math.round(currentIndex) === index
            const isNearCenter = Math.abs(index - currentIndex) <= 1

return (
              <div
                key={item.id}
                className="absolute w-72 md:w-80 h-96 md:h-[480px] transition-all duration-500 ease-out cursor-pointer"
                style={{
                  transform,
                  opacity,
                  zIndex,
                  willChange: isNearCenter ? "transform, opacity" : "auto",
                }}
                aria-current={isActive ? "true" : "false"}
                onClick={() => setCurrentIndex(index)}
              >
                <div className="w-full h-full bg-white/90 backdrop-blur-xl rounded-2xl ring-1 ring-emerald-100 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
                  {/* Ranking Badge */}
                  <div className="absolute -top-2 -right-2 z-10">
                    <Badge
                      className={`text-white font-bold text-base px-3 py-1.5 rounded-full shadow-lg ${
                        item.rank === 1
                          ? "bg-gradient-to-r from-yellow-400 to-orange-500"
                          : item.rank === 2
                            ? "bg-gradient-to-r from-gray-300 to-gray-500"
                            : item.rank === 3
                              ? "bg-gradient-to-r from-amber-600 to-amber-800"
                              : "bg-gradient-to-r from-emerald-500 to-teal-600"
                      }`}
                    >
                      #{item.rank}
                    </Badge>
                  </div>

{/* Image */}
                  <div className="relative h-48 overflow-hidden">
                    <Image
                      src={item.image || "/placeholder.svg"}
                      alt={item.name}
                      width={320}
                      height={192}
                      quality={isActive ? 70 : isNearCenter ? 60 : 50}
                      loading={isActive ? "eager" : "lazy"}
                      priority={isActive}
                      placeholder="blur"
                      blurDataURL={BLUR_DATA_URLS.turtle}
                      sizes="(max-width: 640px) 288px, 320px"
                      className="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
                  </div>

{/* Content */}
                  <div className="p-4 h-48 flex flex-col">
                    <div className="flex items-start justify-between mb-3">
                      <h3 className="text-lg font-bold text-emerald-800 flex-1 pr-2 line-clamp-2">{item.name}</h3>
                      <div className="flex items-center flex-shrink-0">
                        <Star className="w-4 h-4 text-yellow-500 fill-current" />
                        <span className="text-sm font-semibold text-gray-700 ml-1">{formatRating(item.rating)}</span>
                        <span className="text-xs text-gray-500 ml-1">({item.reviewCount})</span>
                      </div>
                    </div>

<p className="text-gray-600 text-sm mb-3 line-clamp-2 flex-1">{item.description}</p>

{/* Plan Details */}
                    <div className="flex items-center gap-3 mb-3 text-sm text-gray-600">
                      <div className="flex items-center">
                        <Clock className="w-4 h-4 mr-1" />
                        {item.durationHours}時間
                      </div>
                      <div className="flex items-center">
                        <Users className="w-4 h-4 mr-1" />
                        少人数制
                      </div>
                    </div>

{/* Features */}
                    <div className="flex flex-wrap gap-1.5 mb-4">
                      {item.features.slice(0, 2).map((feature, idx) => (
                        <Badge
                          key={idx}
                          variant="secondary"
                          className="text-xs bg-emerald-50 text-emerald-700 border-emerald-200 px-2 py-1"
                        >
                          {feature}
                        </Badge>
                      ))}
                    </div>

{/* Price and Button */}
                    <div className="flex items-center justify-between mt-auto">
                      <div>
                        <span className="text-xl font-bold text-emerald-800">{formatPriceWithTilde(item)}</span>
                      </div>
                      <Button
                        asChild
                        size="sm"
                        className="bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl px-4 py-2"
                      >
                        <Link href={`/book?plan=${item.id}`}>
                          予約する
                          <ArrowRight className="w-4 h-4 ml-1" />
                        </Link>
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>

{/* Dots Indicator */}
      <div className="flex justify-center mt-6">
        <div className="flex gap-2">
          {items.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentIndex(index)}
              className={`h-2 rounded-full transition-all duration-300 ${
                Math.round(currentIndex) === index ? "bg-emerald-600 w-8" : "bg-emerald-200 w-2 hover:bg-emerald-300"
              }`}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </div>
      </div>

export function FAQHero() {
  return (
    <section className="relative py-20 overflow-hidden">
      {/* Background with overlay */}
      <Image
        src="/faq-ocean-hero.jpg"
        alt="よくある質問背景"
        fill
        loading="lazy"
        quality={70}
        placeholder="blur"
        blurDataURL={BLUR_DATA_URLS.ocean}
        className="object-cover"
        sizes="100vw"
      />
      <div className="absolute inset-0 bg-gradient-to-b from-emerald-900/60 via-teal-900/40 to-cyan-900/60 z-[1]" />

<div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div className="floating">
          <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 text-balance">よくある質問</h1>
          <p className="text-xl md:text-2xl text-cyan-100 mb-8 max-w-2xl mx-auto text-pretty">
            お客様からよくいただくご質問にお答えします。
            <br />
            不明な点がございましたらお気軽にお問い合わせください。
          </p>

{/* Contact Options */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-2xl mx-auto">
            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20">
              <HelpCircle className="w-6 h-6 text-cyan-400 mx-auto mb-2" />
              <div className="text-lg font-bold text-white">FAQ</div>
              <div className="text-cyan-100 text-sm">よくある質問</div>
            </div>

<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20">
              <MessageSquare className="w-6 h-6 text-green-400 mx-auto mb-2" />
              <div className="text-lg font-bold text-white">LINE</div>
              <div className="text-cyan-100 text-sm">24時間受付</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/faq-section.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ChevronDown, ChevronUp, MessageSquare, Mail } from "lucide-react"
import { FAQS } from "@/lib/data"

export function FAQSection() {
  const [openItems, setOpenItems] = useState<Set<number>>(new Set([0])) // First item open by default

const toggleItem = (index: number) => {
    const newOpenItems = new Set(openItems)
    if (newOpenItems.has(index)) {
      newOpenItems.delete(index)
    } else {
      newOpenItems.add(index)
    }
    setOpenItems(newOpenItems)
  }

return (
    <section className="py-20 bg-white/50 backdrop-blur-sm">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* FAQ List */}
        <div className="space-y-4">
          {FAQS.map((faq, index) => (
            <Card
              key={index}
              className="glass-card bg-white/70 backdrop-blur-xl rounded-2xl ring-1 ring-emerald-100 shadow-lg overflow-hidden"
            >
              <CardContent className="p-0">
                <button
                  onClick={() => toggleItem(index)}
                  className="w-full p-6 text-left hover:bg-emerald-50/50 transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-inset"
                >
                  <div className="flex items-center justify-between">
                    <h3 className="text-lg font-semibold text-emerald-800 pr-4">{faq.question}</h3>
                    {openItems.has(index) ? (
                      <ChevronUp className="w-5 h-5 text-emerald-600 flex-shrink-0" />
                    ) : (
                      <ChevronDown className="w-5 h-5 text-emerald-600 flex-shrink-0" />
                    )}
                  </div>
                </button>

{openItems.has(index) && (
                  <div className="px-6 pb-6">
                    <div className="border-t border-emerald-100 pt-4">
                      <p className="text-gray-600 leading-relaxed">{faq.answer}</p>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          ))}
        </div>

{/* Additional Help */}
        <div className="mt-16">
          <Card className="glass-card bg-white/70 backdrop-blur-xl rounded-3xl ring-1 ring-emerald-100 shadow-lg">
            <CardContent className="p-8 text-center">
              <h3 className="text-2xl font-bold text-emerald-800 mb-4">他にご質問がございますか？</h3>
              <p className="text-gray-600 mb-6">
                上記以外にもご不明な点がございましたら、
                <br />
                お気軽にLINEでお問い合わせください。スタッフが丁寧にお答えいたします。
              </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button
                  variant="outline"
                  size="lg"
                  className="border-green-200 text-green-700 hover:bg-green-50 rounded-xl bg-transparent"
                  onClick={() => window.open("https://lin.ee/jfp4laz", "_blank")}
                >
                  <MessageSquare className="w-5 h-5 mr-2" />
                  LINEで問い合わせ
                </Button>
                <Button
                  variant="outline"
                  size="lg"
                  className="border-emerald-200 text-emerald-700 hover:bg-emerald-50 rounded-xl bg-transparent"
                >
                  <Mail className="w-5 h-5 mr-2" />
                  メールで問い合わせ
                </Button>
              </div>

<div className="mt-6 text-sm text-gray-500">
                <p>LINE: 24時間受付（返信は営業時間内）</p>
                <p>メール: 24時間受付（返信は営業時間内）</p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx"
import Link from "next/link"
import { Phone, Mail, MapPin, Clock } from "lucide-react"
import { TurtleLogo } from "./TurtleLogo"

const CONTACT_INFO = {
  phone: "08053442439",
  email: "umigamekyoudai@gmail.com",
  address: "沖縄県宮古島市平良西里861-5",
} as const

const QUICK_LINKS = [
  { href: "/", label: "ホーム" },
  { href: "/book", label: "プラン・予約" },
  { href: "/staff", label: "スタッフ紹介" },
  { href: "/gallery", label: "ギャラリー" },
  { href: "/blog", label: "ブログ" },
  { href: "/faq", label: "よくある質問" },
] as const

const BUSINESS_HOURS = {
  hours: "7:00 - 18:00",
  status: "年中無休",
  note: "※天候により変更の場合があります",
} as const

export function Footer() {
  return (
    <footer className="bg-emerald-900 text-white py-12">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Company Info */}
          <div className="col-span-1 md:col-span-2">
            <div className="flex items-center space-x-2 mb-4">
              <div className="w-10 h-10 flex items-center justify-center">
                <TurtleLogo size={40} className="text-white" />
              </div>
              <span className="font-bold text-xl">海亀兄弟</span>
            </div>
            <p className="text-emerald-100 mb-4 max-w-md">
              家族向け少人数制マリン体験で、安心・誠実・やわらかな高揚感をお届けします。
              透明度抜群の海で海亀との感動的な出会いを。
            </p>
            <div className="space-y-2 text-sm text-emerald-200">
              <div className="flex items-center">
                <Phone className="w-4 h-4 mr-2 flex-shrink-0" />
                <a href={`tel:${CONTACT_INFO.phone}`} className="hover:text-white transition-colors">
                  {CONTACT_INFO.phone}
                </a>
              </div>
              <div className="flex items-center">
                <Mail className="w-4 h-4 mr-2 flex-shrink-0" />
                <a href={`mailto:${CONTACT_INFO.email}`} className="hover:text-white transition-colors break-all">
                  {CONTACT_INFO.email}
                </a>
              </div>
              <div className="flex items-center">
                <MapPin className="w-4 h-4 mr-2 flex-shrink-0" />
                <span>{CONTACT_INFO.address}</span>
              </div>
            </div>
          </div>

{/* Quick Links */}
          <div>
            <h3 className="font-semibold text-lg mb-4">クイックリンク</h3>
            <ul className="space-y-2 text-emerald-200">
              {QUICK_LINKS.map((link) => (
                <li key={link.href}>
                  <Link href={link.href} className="hover:text-white transition-colors">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

{/* Business Hours */}
          <div>
            <h3 className="font-semibold text-lg mb-4">営業時間</h3>
            <div className="space-y-2 text-emerald-200">
              <div className="flex items-center">
                <Clock className="w-4 h-4 mr-2 flex-shrink-0" />
                <span className="text-sm">{BUSINESS_HOURS.hours}</span>
              </div>
              <p className="text-sm">{BUSINESS_HOURS.status}</p>
              <p className="text-xs text-emerald-300">{BUSINESS_HOURS.note}</p>
            </div>
          </div>
        </div>

<div className="border-t border-emerald-800 mt-8 pt-8 text-center text-emerald-200">
          <p className="text-sm">© 2025 海亀兄弟. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/gallery-hero.tsx"
import Image from "next/image"
import { Camera, ImageIcon, Heart } from "lucide-react"
import { BLUR_DATA_URLS } from "@/lib/data"

export function GalleryHero() {
  return (
    <section className="relative py-20 overflow-hidden">
      {/* Background with overlay */}
      <Image
        src="/images/design-mode/DSC02966.JPG.jpeg"
        alt="ギャラリー背景"
        fill
        loading="lazy"
        quality={70}
        placeholder="blur"
        blurDataURL={BLUR_DATA_URLS.ocean}
        className="object-cover"
        sizes="100vw"
      />
      <div className="absolute inset-0 bg-gradient-to-b from-emerald-900/60 via-teal-900/40 to-cyan-900/60 z-[1]" />

<div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div className="floating">
          <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 text-balance">ギャラリー</h1>
          <p className="text-xl md:text-2xl text-cyan-100 mb-8 max-w-2xl mx-auto text-pretty">
            海亀兄弟での感動的な瞬間をご覧ください。
            <br />
            透明度抜群の海と海亀との出会いの記録。
          </p>

{/* Stats */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-2xl mx-auto">
            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20">
              <Camera className="w-6 h-6 text-cyan-400 mx-auto mb-2" />
              <div className="text-2xl font-bold text-white">99%</div>
              <div className="text-cyan-100 text-sm">遭遇率</div>
            </div>

<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20">
              <Heart className="w-6 h-6 text-pink-400 mx-auto mb-2" />
              <div className="text-2xl font-bold text-white">感動体験</div>
              <div className="text-cyan-100 text-sm">お客様の笑顔</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx"
import Image from "next/image"
import { Star } from "lucide-react"
import { BLUR_DATA_URLS } from "@/lib/data"

export function HeroSection() {
  return (
    <section className="relative min-h-[100svh] flex flex-col overflow-hidden">
      {/* Full-screen background image */}
      <div className="absolute inset-0">
        <Image
          src="/images/gemini-generated-image-rq969urq969urq96.jpeg"
          alt="宮古島の海亀兄弟 - 2匹のウミガメが一緒に泳ぐ様子"
          fill
          priority
          fetchPriority="high"
          quality={90}
          placeholder="blur"
          blurDataURL={BLUR_DATA_URLS.turtle}
          className="object-cover object-center"
          sizes="100vw"
        />
        {/* Gradient overlay for text readability */}
        <div className="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/50" />
      </div>

{/* Main content */}
      <div className="relative z-10 flex-1 flex flex-col justify-center items-center px-4 pt-20 pb-32">
        <div className="text-center max-w-4xl mx-auto">
          {/* Rating badge */}
          <div className="inline-flex items-center gap-2 bg-white/90 backdrop-blur-sm rounded-full px-4 py-2 mb-6 shadow-lg">
            <Star className="w-5 h-5 text-yellow-500 fill-yellow-500" />
            <span className="text-gray-800 font-bold">4.9</span>
            <span className="text-gray-500 text-sm">/ 1876件の口コミ</span>
          </div>

{/* Main heading */}
          <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black text-white mb-4 tracking-tight drop-shadow-2xl">
            海亀兄弟
          </h1>

{/* Subheading */}
          <p className="text-2xl sm:text-3xl md:text-4xl text-white font-medium mb-3 drop-shadow-lg">
            宮古島でウミガメと泳ごう
          </p>

{/* Description */}
          <p className="text-lg sm:text-xl text-white/90 mb-8 max-w-2xl mx-auto drop-shadow-md">
            初心者・お子様大歓迎。感動の海亀体験をお届けします。
          </p>

{/* Trust badges */}
          <div className="flex flex-wrap justify-center gap-3 text-white/90 text-sm font-medium">
            <span className="bg-white/20 backdrop-blur-sm rounded-full px-4 py-2">器材レンタル無料</span>
            <span className="bg-white/20 backdrop-blur-sm rounded-full px-4 py-2">写真データ無料</span>
            <span className="bg-white/20 backdrop-blur-sm rounded-full px-4 py-2">保険加入済み</span>
          </div>
        </div>
      </div>

{/* Scroll indicator */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 animate-bounce">
        <div className="w-8 h-12 rounded-full border-2 border-white/50 flex justify-center pt-2">
          <div className="w-1.5 h-3 bg-white/70 rounded-full animate-pulse" />
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/image-gallery.tsx"
"use client"

import { useState, useRef, useEffect } from "react"
import Image from "next/image"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { X, ChevronLeft, ChevronRight, Download, Heart, Share2, Eye, Trash2 } from "lucide-react"
import { BLUR_DATA_URLS } from "@/lib/data"

interface GalleryImage {
  src: string
  title: string
  category: string
  description: string
}

const initialGalleryImages: GalleryImage[] = [
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230719-P7190430-kJtRINA4MIDkKCWZv2JYG4r8Y366iz.jpg",
    title: "海亀と一緒にシュノーケリング",
    category: "海亀体験",
    description:
      "透明度抜群の宮古島の海で、海亀と一緒に泳ぐ感動の瞬間。家族やカップルでの特別な体験をお楽しみください。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230719-P7190431-Ww3py8Wm9ogBMFhp0seUzqRhdypk9O.jpg",
    title: "海亀との記念撮影",
    category: "記念写真",
    description: "美しい海中で海亀と一緒に撮影した記念写真。水面に映る光の模様が幻想的な雰囲気を演出します。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230720-P7200982-szA4D8aLpo1Ea14m2Z9wGj4JB5QIF5.jpg",
    title: "宮古島の海中世界",
    category: "海中風景",
    description: "水面上下を同時に捉えたスプリットショット。宮古島の美しい海岸線と透明な海中を一枚に収めた絶景写真。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230719-P7190902-lVDNsaCVNCsCFPT4CGV0d5pY8ji4gO.jpg",
    title: "海亀との至近距離体験",
    category: "海亀体験",
    description:
      "海底で休息する海亀との貴重な出会い。間近で観察できる海亀の美しい甲羅の模様と穏やかな表情をお楽しみください。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230719-P7190285-3hIWBTJtJPkFyHx2i5V5hkEKdwOOw4.jpg",
    title: "カップルで海亀体験",
    category: "記念写真",
    description: "大切な人と一緒に海亀と泳ぐ特別な瞬間。水面に映る美しい光の反射が、ロマンチックな雰囲気を演出します。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230717-P7170313-7ShB5QROdk2pVrtQa5cA4HnX6D9qs4.jpg",
    title: "カラフルなサンゴ礁とクマノミ",
    category: "海中生物",
    description:
      "宮古島の豊かなサンゴ礁に住むオレンジ色のクマノミたち。多様な海洋生物が織りなす美しい海中の楽園をご覧ください。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230716-P7160026-2-xCLsoHvkrhlfCVXS4PSpECLPYQt3k3.jpg",
    title: "海亀と泳ぐ夫婦の記念写真",
    category: "記念写真",
    description:
      "水面からの美しい光に包まれながら、海亀と一緒に泳ぐご夫婦の感動的な瞬間。一生の思い出となる特別な体験です。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230715-P7152056-xcHj0KyOIGTSiDrAZtgzoX87FtLw0i.jpg",
    title: "グループで海亀体験",
    category: "ファミリー",
    description:
      "家族や友人グループでの海亀シュノーケリング体験。水面に浮かびながら海亀と一緒に過ごす特別な時間をお楽しみください。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230715-P7155003-vG2kkpVlckvEiOfvhxN4CUa57wWkuo.jpg",
    title: "3人で海亀観察",
    category: "ファミリー",
    description:
      "透明度抜群の海中で、3人一緒に海亀を観察する貴重な体験。海底の海草と一緒に撮影された美しい海中写真です。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230715-P7152051-XKU6IhtQ1kFBajFNChMqu5PYvk01qw.jpg",
    title: "友達と海亀シュノーケリング",
    category: "記念写真",
    description: "友達同士で楽しむ海亀シュノーケリング。水面に映る美しい光の模様と一緒に撮影された感動的な瞬間です。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230715-P7154995-Jp6QY7Raba0CudJdD3Ftr5lyOnpER8.jpg",
    title: "海亀との平和な時間",
    category: "海亀体験",
    description: "海底で休息する海亀と一緒に過ごす平和なひととき。海亀の自然な姿を間近で観察できる貴重な体験です。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230715-P7155093-CFKTIpWycIjirB47GqOhBzkjzfZXHq.jpg",
    title: "海亀との記念撮影",
    category: "記念写真",
    description: "海底で海亀と一緒に撮影した記念写真。海亀の美しい甲羅の模様と穏やかな表情が印象的な一枚です。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230715-P7155085-I4OqgwLMbl8nAVpZYTMexyuM4b3F4x.jpg",
    title: "海亀と一緒に泳ぐ体験",
    category: "海亀体験",
    description: "海亀と一緒に泳ぎながら撮影された動的な写真。海亀の優雅な泳ぎ姿を間近で体験できる感動の瞬間です。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230715-P7155109-AV7aDudPGSeu1zNjrkELPolQilHONa.jpg",
    title: "海亀観察体験",
    category: "海亀体験",
    description:
      "海底で休息する海亀を観察する特別な体験。海亀の自然な行動を邪魔することなく、静かに観察する貴重な時間です。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230712-P7124427-eKTXAY68xDDfzfl326iBAdgNdm8gSq.jpg",
    title: "海亀との感動的な出会い",
    category: "海亀体験",
    description:
      "透明度抜群の海中で海亀と至近距離で出会う感動の瞬間。海亀の美しい表情と穏やかな眼差しが印象的な一枚です。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230712-P7121543-ReS66RRi9OVaOzp3WKmy5XZbK5yJ58.jpg",
    title: "友達と海亀記念撮影",
    category: "記念写真",
    description:
      "友達同士でピースサインを作りながら海亀と一緒に撮影した楽しい記念写真。海底の美しい砂地も一緒に写っています。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230712-P7124413-v9HLhTc2KQ4I5uYL0EZe52EW1O96jU.jpg",
    title: "海亀のクローズアップ",
    category: "海亀体験",
    description:
      "海亀の美しい甲羅の模様と優しい表情を間近で捉えた迫力のクローズアップ写真。海亀の魅力を存分に感じられます。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230712-P7124428-SFFkwd5wZWHsGb0hXSwJwnoeAsV4YK.jpg",
    title: "海亀との共泳体験",
    category: "海亀体験",
    description: "複数の海亀と一緒に泳ぐ贅沢な体験。海亀の自然な泳ぎ姿を間近で観察できる特別な瞬間を捉えた写真です。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230712-P7124415-UYfQv7k6e5Hm6GkOsDHAXVcLLwEAaj.jpg",
    title: "海亀と記念撮影",
    category: "記念写真",
    description: "海亀が優雅に泳ぐ姿と一緒にピースサインで撮影した記念写真。海亀の動きの美しさが際立つ一枚です。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230712-P7124452-ZfQhhaCOaswwNIocEdJj5JTfEfisQf.jpg",
    title: "海亀体験の喜び",
    category: "記念写真",
    description:
      "海亀との出会いに感動してサムズアップする瞬間。透明な海水と美しい光の中で撮影された感動的な記念写真です。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230712-P7121544-9hBTBwX426xvuNHrPAHgcsDXqg8gLX.jpg",
    title: "カップルで海亀体験",
    category: "記念写真",
    description: "カップルで一緒に海亀と泳ぐロマンチックな体験。海底で休息する海亀と一緒に撮影した特別な記念写真です。",
  },
  {
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DSC06630.JPG-s6zKQo4DVkcMP4KFXSzSbTqVHYZyJy.jpeg",
    title: "プロフェッショナルなガイドサービス",
    category: "スタッフ",
    description:
      "経験豊富なガイドが安全で楽しいシュノーケリング体験をサポート。出発前の準備から丁寧にご案内いたします。",
  },
]

const categories = [
  "すべて",
  "海亀体験",
  "ファミリー",
  "VIP体験",
  "SUP",
  "上級者",
  "海中風景",
  "記念写真",
  "風景",
  "海中生物",
  "スタッフ",
]

export function ImageGallery() {
  const [galleryImages, setGalleryImages] = useState<GalleryImage[]>(initialGalleryImages)
  const [selectedCategory, setSelectedCategory] = useState("すべて")
  const [lightboxImage, setLightboxImage] = useState<number | null>(null)
  const [liked, setLiked] = useState<Set<number>>(new Set())
  const [currentIndex, setCurrentIndex] = useState(0)
  const [visibleCount, setVisibleCount] = useState(6) // 初期表示枚数を6枚に減らしてLCP向上
  const scrollContainerRef = useRef<HTMLDivElement>(null)
  const observerRef = useRef<IntersectionObserver | null>(null)
  const loadMoreRef = useRef<HTMLDivElement>(null)

const filteredImages =
    selectedCategory === "すべて" ? galleryImages : galleryImages.filter((img) => img.category === selectedCategory)

useEffect(() => {
    if (observerRef.current) observerRef.current.disconnect()

observerRef.current = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && visibleCount < filteredImages.length) {
          setVisibleCount((prev) => Math.min(prev + 6, filteredImages.length)) // 一度に6枚ずつ追加読み込みしてスムーズに
        }
      },
      { threshold: 0.1, rootMargin: "200px" }, // rootMarginを追加して読み込みタイミングを調整
    )

if (loadMoreRef.current) {
      observerRef.current.observe(loadMoreRef.current)
    }

return () => {
      if (observerRef.current) observerRef.current.disconnect()
    }
  }, [visibleCount, filteredImages.length])

useEffect(() => {
    setVisibleCount(6) // カテゴリ変更時は6枚から再スタート
  }, [selectedCategory])

const openLightbox = (index: number) => {
    const actualIndex = galleryImages.findIndex((img) => img === filteredImages[index])
    setLightboxImage(actualIndex)
  }

const closeLightbox = () => {
    setLightboxImage(null)
  }

const deleteCurrentImage = () => {
    if (lightboxImage !== null) {
      const newImages = galleryImages.filter((_, index) => index !== lightboxImage)
      setGalleryImages(newImages)

const newLiked = new Set<number>()
      liked.forEach((index) => {
        if (index < lightboxImage) {
          newLiked.add(index)
        } else if (index > lightboxImage) {
          newLiked.add(index - 1)
        }
      })
      setLiked(newLiked)

if (newImages.length === 0) {
        closeLightbox()
      } else if (lightboxImage >= newImages.length) {
        setLightboxImage(newImages.length - 1)
      }
    }
  }

const nextImage = () => {
    if (lightboxImage !== null) {
      setLightboxImage((lightboxImage + 1) % galleryImages.length)
    }
  }

const prevImage = () => {
    if (lightboxImage !== null) {
      setLightboxImage(lightboxImage === 0 ? galleryImages.length - 1 : lightboxImage - 1)
    }
  }

const toggleLike = (index: number) => {
    const newLiked = new Set(liked)
    if (newLiked.has(index)) {
      newLiked.delete(index)
    } else {
      newLiked.add(index)
    }
    setLiked(newLiked)
  }

const goToPrevious = () => {
    if (currentIndex > 0) {
      setCurrentIndex(currentIndex - 1)
      scrollToIndex(currentIndex - 1)
    }
  }

const goToNext = () => {
    if (currentIndex < filteredImages.length - 1) {
      setCurrentIndex(currentIndex + 1)
      scrollToIndex(currentIndex + 1)
    }
  }

const scrollToIndex = (index: number) => {
    if (scrollContainerRef.current) {
      const container = scrollContainerRef.current
      const cardWidth = container.clientWidth
      container.scrollTo({
        left: index * cardWidth,
        behavior: "smooth",
      })
    }
  }

const visibleImages = filteredImages.slice(0, visibleCount)

return (
    <section className="py-20 bg-gradient-to-b from-white/80 via-teal-50/30 to-emerald-50/50 backdrop-blur-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-emerald-800 mb-6 text-balance">
            感動の瞬間を
            <span className="block text-teal-600">ギャラリーで</span>
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto text-pretty leading-relaxed">
            海亀兄弟での特別な体験の数々をご覧ください。透明度抜群の宮古島の海で撮影された、
            一生の思い出となる瞬間をお楽しみください。
          </p>
        </div>

<div className="mb-16">
          <div className="flex flex-wrap justify-center gap-3">
            {categories.map((category) => (
              <Button
                key={category}
                variant={selectedCategory === category ? "default" : "outline"}
                size="sm"
                onClick={() => {
                  setSelectedCategory(category)
                  setCurrentIndex(0)
                }}
                className={`rounded-full px-6 py-2 font-medium transition-all duration-300 ${
                  selectedCategory === category
                    ? "bg-emerald-600 hover:bg-emerald-700 text-white shadow-lg scale-105"
                    : "border-emerald-200 text-emerald-700 hover:bg-emerald-50 hover:border-emerald-300 hover:scale-105"
                }`}
              >
                {category}
              </Button>
            ))}
          </div>
        </div>

{filteredImages.length === 0 ? (
          <div className="text-center py-20">
            <div className="bg-gradient-to-br from-white/90 via-teal-50/80 to-emerald-50/90 backdrop-blur-xl rounded-3xl p-12 max-w-2xl mx-auto border border-emerald-100/50 shadow-xl">
              <h3 className="text-2xl font-bold text-emerald-800 mb-4">ギャラリーは現在空です</h3>
              <p className="text-gray-600 text-lg">新しい写真が追加されるまでお待ちください。</p>
            </div>
          </div>
        ) : (
          <>
            <div className="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
              {visibleImages.map((image, index) => (
                <div key={index} className="break-inside-avoid">
                  <Card
                    className="glass-card bg-white/80 backdrop-blur-xl rounded-2xl overflow-hidden ring-1 ring-emerald-100/50 shadow-lg hover:shadow-2xl transition-all duration-500 cursor-pointer group relative will-change-transform"
                    onClick={() => openLightbox(index)}
                  >
                    <div className="relative overflow-hidden">
                      <div className="relative w-full" style={{ aspectRatio: "4/3" }}>
                        <Image
                          src={image.src || "/placeholder.svg"}
                          alt={image.title}
                          fill
                          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                          className="object-cover transition-all duration-700 group-hover:scale-110"
                          placeholder="blur"
                          blurDataURL={BLUR_DATA_URLS.ocean}
                          quality={55} // ギャラリー画像を品質55、適切なsizesで最適化
                          loading="lazy" // lazy読み込みを追加
                        />
                      </div>

<Badge className="absolute top-4 left-4 bg-emerald-600/90 backdrop-blur-sm text-white border-0 shadow-lg">
                        {image.category}
                      </Badge>

<div className="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-all duration-300">
                        <Button
                          size="sm"
                          variant="ghost"
                          className="bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white rounded-full p-2 shadow-lg"
                          onClick={(e) => {
                            e.stopPropagation()
                            toggleLike(galleryImages.findIndex((img) => img === image))
                          }}
                        >
                          <Heart
                            className={`w-4 h-4 ${
                              liked.has(galleryImages.findIndex((img) => img === image))
                                ? "fill-red-500 text-red-500"
                                : "text-white"
                            }`}
                          />
                        </Button>
                        <Button
                          size="sm"
                          variant="ghost"
                          className="bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white rounded-full p-2 shadow-lg"
                          onClick={(e) => e.stopPropagation()}
                        >
                          <Eye className="w-4 h-4" />
                        </Button>
                      </div>

<div className="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500 will-change-transform">
                        <h3 className="font-bold text-xl mb-2 text-balance">{image.title}</h3>
                        <p className="text-sm text-gray-200 line-clamp-3 text-pretty leading-relaxed">
                          {image.description}
                        </p>
                      </div>
                    </div>
                  </Card>
                </div>
              ))}
            </div>

{visibleCount < filteredImages.length && (
              <div ref={loadMoreRef} className="h-20 flex items-center justify-center mt-8">
                <div className="animate-pulse text-emerald-600 font-medium">読み込み中...</div>
              </div>
            )}
          </>
        )}

<div className="flex justify-center items-center mt-6 md:hidden">
          <div className="flex gap-2">
            {filteredImages.map((_, index) => (
              <button
                key={index}
                onClick={() => {
                  setCurrentIndex(index)
                  scrollToIndex(index)
                }}
                className={`h-2 rounded-full transition-all duration-300 ${
                  currentIndex === index ? "bg-emerald-600 w-8" : "bg-emerald-200 w-2 hover:bg-emerald-300"
                }`}
                aria-label={`画像 ${index + 1} に移動`}
              />
            ))}
          </div>
        </div>

{lightboxImage !== null && (
          <div className="fixed inset-0 z-50 bg-black/95 backdrop-blur-sm flex items-center justify-center p-4">
            <div className="relative max-w-5xl max-h-full">
              <Button
                size="sm"
                variant="ghost"
                className="absolute -top-16 right-0 text-white hover:bg-white/20 rounded-full p-3 shadow-lg backdrop-blur-sm"
                onClick={closeLightbox}
              >
                <X className="w-6 h-6" />
              </Button>

{process.env.NODE_ENV === "development" && (
                <Button
                  size="sm"
                  variant="ghost"
                  className="absolute -top-16 right-16 text-white hover:bg-red-500/20 rounded-full p-3 shadow-lg backdrop-blur-sm"
                  onClick={deleteCurrentImage}
                >
                  <Trash2 className="w-6 h-6" />
                </Button>
              )}

<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-8 text-white rounded-b-xl">
                <div className="flex items-center justify-between mb-4">
                  <Badge className="bg-emerald-600/90 backdrop-blur-sm text-white border-0 shadow-lg text-sm px-4 py-1">
                    {galleryImages[lightboxImage].category}
                  </Badge>
                  <div className="flex gap-3">
                    <Button
                      size="sm"
                      variant="ghost"
                      className="text-white hover:bg-white/20 rounded-full p-2 backdrop-blur-sm"
                      onClick={() => toggleLike(lightboxImage)}
                    >
                      <Heart
                        className={`w-5 h-5 ${liked.has(lightboxImage) ? "fill-red-500 text-red-500" : "text-white"}`}
                      />
                    </Button>
                    <Button
                      size="sm"
                      variant="ghost"
                      className="text-white hover:bg-white/20 rounded-full p-2 backdrop-blur-sm"
                    >
                      <Share2 className="w-5 h-5" />
                    </Button>
                    <Button
                      size="sm"
                      variant="ghost"
                      className="text-white hover:bg-white/20 rounded-full p-2 backdrop-blur-sm"
                    >
                      <Download className="w-5 h-5" />
                    </Button>
                  </div>
                </div>
                <h3 className="text-2xl font-bold mb-3 text-balance">{galleryImages[lightboxImage].title}</h3>
                <p className="text-gray-200 text-lg leading-relaxed text-pretty">
                  {galleryImages[lightboxImage].description}
                </p>
                <div className="text-sm text-gray-400 mt-4 font-medium">
                  {lightboxImage + 1} / {galleryImages.length}
                </div>
              </div>
            </div>
          </div>
        )}

<div className="mt-20 text-center">
          <div className="bg-gradient-to-br from-white/90 via-teal-50/80 to-emerald-50/90 backdrop-blur-xl rounded-3xl p-12 max-w-3xl mx-auto border border-emerald-100/50 shadow-xl">
            <h3 className="text-3xl md:text-4xl font-bold text-emerald-800 mb-6 text-balance">あなたも感動体験を</h3>
            <p className="text-lg text-gray-600 mb-8 max-w-2xl mx-auto text-pretty leading-relaxed">
              ギャラリーの写真のような素晴らしい体験があなたを待っています。
              透明度抜群の宮古島の海で、一生の思い出を作りませんか？
            </p>
            <Button
              asChild
              size="lg"
              className="bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl px-10 py-4 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
            >
              <a href="/book">今すぐ予約する</a>
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/mobile-cta.tsx"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { MessageSquare, Calendar } from "lucide-react"

export function MobileCTA() {
  const pathname = usePathname()
  const isBookingPage = pathname === "/book"

return (
    <div className="fixed bottom-0 left-0 right-0 z-50 md:hidden">
      <div className="bg-white/98 backdrop-blur-xl border-t border-emerald-200/50 px-4 py-4 shadow-lg">
        <div className="flex space-x-4">
          <Button
            variant="outline"
            size="lg"
            className={`${isBookingPage ? "w-full" : "flex-1"} border-green-300 text-green-700 hover:bg-green-50 bg-white/80 font-semibold`}
            onClick={() => window.open("https://lin.ee/jfp4laz", "_blank")}
          >
            <MessageSquare className="w-4 h-4 mr-2" />
            LINEで質問
          </Button>
          {!isBookingPage && (
            <Button
              asChild
              size="lg"
              className="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-semibold"
            >
              <Link href="/book">
                <Calendar className="w-4 h-4 mr-2" />
                予約
              </Link>
            </Button>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Menu, X, MessageSquare } from "lucide-react"
import { TurtleLogo } from "./TurtleLogo"

const LINE_URL = "https://lin.ee/jfp4laz"

const NAV_ITEMS = [
  { href: "/", label: "ホーム" },
  { href: "/staff", label: "スタッフ" },
  { href: "/gallery", label: "ギャラリー" },
  { href: "/blog", label: "ブログ" },
  { href: "/faq", label: "よくある質問" },
] as const

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false)

const handleLineClick = () => window.open(LINE_URL, "_blank")
  const closeMenu = () => setIsOpen(false)

return (
    <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-xl border-b border-emerald-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <Link href="/" className="flex items-center space-x-2 min-w-0 flex-shrink-0">
            <div className="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center flex-shrink-0">
              <TurtleLogo size={32} className="sm:w-10 sm:h-10" />
            </div>
            <span className="font-bold text-lg sm:text-xl text-emerald-800 whitespace-nowrap">海亀兄弟</span>
          </Link>

{/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            {NAV_ITEMS.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="text-gray-700 hover:text-emerald-600 transition-colors font-medium"
              >
                {item.label}
              </Link>
            ))}
          </div>

{/* Desktop CTA Buttons */}
          <div className="hidden md:flex items-center space-x-4">
            <Button
              variant="outline"
              size="sm"
              className="border-green-200 text-green-700 hover:bg-green-50 bg-transparent"
              onClick={handleLineClick}
            >
              <MessageSquare className="w-4 h-4 mr-2" />
              LINEで質問
            </Button>
            <Button asChild className="bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl px-6">
              <Link href="/book">今すぐ予約</Link>
            </Button>
          </div>

{/* Mobile Menu Button */}
          <div className="md:hidden flex-shrink-0 ml-2">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsOpen(!isOpen)}
              aria-label="メニュー"
              aria-expanded={isOpen}
            >
              {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </Button>
          </div>
        </div>

{/* Mobile Navigation Menu */}
        {isOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 bg-white/95 backdrop-blur-xl rounded-lg mt-2 border border-emerald-100">
              {NAV_ITEMS.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className="block px-3 py-2 text-gray-700 hover:text-emerald-600 hover:bg-emerald-50 rounded-md transition-colors"
                  onClick={closeMenu}
                >
                  {item.label}
                </Link>
              ))}

{/* Mobile CTA Buttons */}
              <div className="pt-2 space-y-2">
                <Button
                  variant="outline"
                  size="sm"
                  className="w-full border-green-200 text-green-700 hover:bg-green-50 bg-transparent"
                  onClick={handleLineClick}
                >
                  <MessageSquare className="w-4 h-4 mr-2" />
                  LINEで質問
                </Button>
                <Button asChild className="w-full bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl">
                  <Link href="/book">今すぐ予約</Link>
                </Button>
              </div>
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}

export { Navbar }
[V0_FILE]typescriptreact:file="components/participant-form.tsx"
"use client"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { User } from "lucide-react"

interface ParticipantDetails {
  id: string
  name: string
  age: number | ""
  height: number | ""
  weight: number | ""
  footSize: number | ""
  category: "adult" | "child" | "under3"
}

interface ParticipantFormProps {
  participants: ParticipantDetails[]
  minAge: number
  selectedPlan: string
  onUpdate: (id: string, field: keyof ParticipantDetails, value: any) => void
}

export function ParticipantForm({ participants, minAge, selectedPlan, onUpdate }: ParticipantFormProps) {
  if (participants.length === 0) return null

// ナイトツアーかどうかを判定
  const isNightTour = selectedPlan === "night-hunter" || selectedPlan === "S3"

return (
    <Card className="glass-card bg-white/70 backdrop-blur-xl rounded-3xl ring-1 ring-emerald-100 shadow-lg">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-emerald-800">
          <User className="w-5 h-5" />
          参加者詳細情報
        </CardTitle>
        <p className="text-sm text-gray-600 mt-2">
          器材のサイズ調整や安全管理のため、参加者全員の詳細情報をご入力ください。
        </p>
      </CardHeader>
      <CardContent className="space-y-6">
        {participants.map((participant, index) => {
          const categoryLabel =
            participant.category === "adult" ? "大人" : participant.category === "child" ? "子ども" : "3歳未満"

return (
            <div key={participant.id} className="bg-gray-50 rounded-2xl p-6">
              <h4 className="font-semibold text-emerald-800 mb-4">
                参加者 {index + 1} ({categoryLabel})
              </h4>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                <div>
                  <Label className="text-sm font-medium text-gray-700 mb-2 block">氏名 *</Label>
                  <Input
                    value={participant.name}
                    onChange={(e) => onUpdate(participant.id, "name", e.target.value)}
                    placeholder="山田 太郎"
                    className="rounded-xl border-emerald-200 focus:border-emerald-500"
                    required
                  />
                </div>
                <div>
                  <Label className="text-sm font-medium text-gray-700 mb-2 block">年齢 *</Label>
                  <Input
                    type="number"
                    value={participant.age}
                    onChange={(e) => {
                      const value = e.target.value === "" ? "" : Number.parseInt(e.target.value)
                      onUpdate(participant.id, "age", value)
                    }}
                    min={participant.category === "under3" ? 0 : participant.category === "child" ? minAge : 13}
                    max={participant.category === "under3" ? 2 : participant.category === "child" ? 12 : 100}
                    className="rounded-xl border-emerald-200 focus:border-emerald-500"
                    required
                  />
                </div>
                <div>
                  <Label className="text-sm font-medium text-gray-700 mb-2 block">
                    身長 (cm) {isNightTour ? "(任意)" : "*"}
                  </Label>
                  <Input
                    type="number"
                    value={participant.height}
                    onChange={(e) => {
                      const value = e.target.value === "" ? "" : Number.parseInt(e.target.value)
                      onUpdate(participant.id, "height", value)
                    }}
                    min="50"
                    max="220"
                    className="rounded-xl border-emerald-200 focus:border-emerald-500"
                    required={!isNightTour}
                  />
                </div>
                <div>
                  <Label className="text-sm font-medium text-gray-700 mb-2 block">
                    体重 (kg) {isNightTour ? "(任意)" : "*"}
                  </Label>
                  <Input
                    type="number"
                    value={participant.weight}
                    onChange={(e) => {
                      const value = e.target.value === "" ? "" : Number.parseInt(e.target.value)
                      onUpdate(participant.id, "weight", value)
                    }}
                    min="5"
                    max="150"
                    className="rounded-xl border-emerald-200 focus:border-emerald-500"
                    required={!isNightTour}
                  />
                </div>
                <div>
                  <Label className="text-sm font-medium text-gray-700 mb-2 block">
                    足のサイズ (cm) {isNightTour ? "(任意)" : "*"}
                  </Label>
                  <Input
                    type="number"
                    step="0.5"
                    value={participant.footSize}
                    onChange={(e) => {
                      const value = e.target.value === "" ? "" : Number.parseFloat(e.target.value)
                      onUpdate(participant.id, "footSize", value)
                    }}
                    min="10"
                    max="35"
                    className="rounded-xl border-emerald-200 focus:border-emerald-500"
                    required={!isNightTour}
                  />
                </div>
              </div>
            </div>
          )
        })}
        <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
          <p className="text-sm text-blue-800">
            <strong>ご注意:</strong>
            <br />
            {isNightTour ? (
              <>
                • 身長・体重・足のサイズは任意です
                <br />• ただし、より正確なご案内のため、ご入力いただくことをお勧めします
              </>
            ) : (
              <>
                • 身長・体重・足のサイズは器材選定のために必要です
                <br />• 安全のため、正確な情報をご入力ください
                <br />• 当日、大幅に異なる場合は器材の変更をお願いする場合があります
              </>
            )}
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/popular-plans.tsx"
"use client"
import { PLANS } from "@/lib/data"
import PlanCard from "@/components/PlanCard"

export function PopularPlans() {
  const sortedPlans = [...PLANS].sort((a, b) => (a.rank || 999) - (b.rank || 999))

return (
    <section className="py-12 md:py-20 relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-8 md:mb-16">
          <h2 className="text-3xl md:text-5xl font-bold text-emerald-800 mb-4 text-balance">人気プランランキング</h2>
          <p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto text-pretty">
            お客様に最も愛される体験プランをランキング形式でご紹介
          </p>
        </div>

<div className="flex flex-col gap-6 items-center">
          {sortedPlans.map((plan, index) => (
            <PlanCard key={plan.id} plan={plan} priority={index < 3} />
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/staff-grid.tsx"
"use client"

import { useState, useRef, useEffect } from "react"
import Image from "next/image"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Star, Award, Shield, ChevronLeft, ChevronRight } from "lucide-react"
import { STAFFS, BLUR_DATA_URLS } from "@/lib/data"

export function StaffGrid() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const scrollContainerRef = useRef<HTMLDivElement>(null)
  const cardRefs = useRef<(HTMLDivElement | null)[]>([])

const getStaffIcon = (role: string) => {
    switch (role) {
      case "現場責任者":
        return <Shield className="w-6 h-6 text-emerald-600" />
      case "やまちゃんの右腕":
        return <Star className="w-6 h-6 text-blue-600" />
      case "ナイトツアー専門":
        return <Award className="w-6 h-6 text-purple-600" />
      case "ドローンパイロット":
        return <Award className="w-6 h-6 text-sky-600" />
      default:
        return <Award className="w-6 h-6 text-gray-600" />
    }
  }

useEffect(() => {
    const container = scrollContainerRef.current
    if (!container) return

const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
            const index = cardRefs.current.indexOf(entry.target as HTMLDivElement)
            if (index !== -1) {
              setCurrentIndex(index)
            }
          }
        })
      },
      {
        root: container,
        threshold: [0.5, 0.75, 1.0],
        rootMargin: "0px",
      },
    )

cardRefs.current.forEach((card) => {
      if (card) observer.observe(card)
    })

return () => observer.disconnect()
  }, [])

const scrollToIndex = (index: number) => {
    const card = cardRefs.current[index]
    if (card && scrollContainerRef.current) {
      const container = scrollContainerRef.current
      const cardRect = card.getBoundingClientRect()
      const containerRect = container.getBoundingClientRect()

// Calculate scroll position to center the card
      const scrollLeft = card.offsetLeft - (containerRect.width - cardRect.width) / 2

container.scrollTo({
        left: scrollLeft,
        behavior: "smooth",
      })
    }
  }

const goToPrevious = () => {
    if (currentIndex > 0) {
      scrollToIndex(currentIndex - 1)
    }
  }

const goToNext = () => {
    if (currentIndex < STAFFS.length - 1) {
      scrollToIndex(currentIndex + 1)
    }
  }

return (
    <section className="py-20 bg-white/50 backdrop-blur-sm">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-emerald-800 mb-4 text-balance">私たちのチーム</h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto text-pretty">
            海を愛し、お客様の安全と楽しさを第一に考える
            <br />
            プロフェッショナルなスタッフをご紹介します
          </p>
        </div>

<div className="relative">
          {/* Mobile Side Navigation Buttons */}
          <button
            onClick={goToPrevious}
            disabled={currentIndex === 0}
            className="md:hidden absolute left-2 top-1/2 -translate-y-1/2 z-30 w-12 h-12 flex items-center justify-center bg-white/95 backdrop-blur-sm rounded-full shadow-lg border border-emerald-100 text-emerald-600 hover:bg-white hover:text-emerald-700 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
            aria-label="前のスタッフ"
          >
            <ChevronLeft className="w-6 h-6" />
          </button>

<div
            ref={scrollContainerRef}
            className="flex overflow-x-auto scrollbar-hide snap-x snap-mandatory scroll-smooth md:grid md:grid-cols-2 lg:grid-cols-4 md:gap-8 md:overflow-visible"
            style={{
              WebkitOverflowScrolling: "touch",
              scrollSnapType: "x mandatory",
              overscrollBehaviorX: "contain",
              touchAction: "auto",
            }}
            role="region"
            aria-roledescription="carousel"
          >
            {STAFFS.map((staff, index) => (
              <div
                key={staff.id}
                ref={(el) => {
                  cardRefs.current[index] = el
                }}
                className="flex-none w-full px-4 snap-center md:w-auto md:px-0 md:snap-align-none"
                style={{
                  scrollSnapAlign: "center",
                  scrollSnapStop: "always",
                }}
              >
                <Card
                  className="glass-card bg-white/70 backdrop-blur-xl rounded-3xl ring-1 ring-emerald-100 shadow-lg hover:shadow-2xl transition-all duration-300 group"
                  aria-current={index === currentIndex ? "true" : undefined}
                >
                  <CardContent className="p-0">
                    {/* Staff Image */}
                    <div className="relative h-64 overflow-hidden rounded-t-3xl">
                      <Image
                        src={staff.image || "/placeholder.svg"}
                        alt={staff.name}
                        width={320}
                        height={256}
                        quality={65}
                        loading="lazy"
                        placeholder="blur"
                        blurDataURL={BLUR_DATA_URLS.ocean}
                        sizes="(max-width: 640px) 92vw, (max-width: 1024px) 320px, 280px"
                        className={`w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 ${
                          staff.name === "ひかる" ? "object-[center_30%]" : "object-top"
                        }`}
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent" />

{/* Role Badge */}
                      <Badge
                        className={`absolute top-4 left-4 ${
                          staff.role === "現場責任者"
                            ? "bg-emerald-600"
                            : staff.role === "やまちゃんの右腕"
                              ? "bg-blue-600"
                              : staff.role === "ナイトツアー専門"
                                ? "bg-purple-600"
                                : staff.role === "ドローンパイロット"
                                  ? "bg-sky-600"
                                  : "bg-gray-600"
                        } text-white`}
                      >
                        {staff.role}
                      </Badge>
                    </div>

{/* Staff Info */}
                    <div className="p-6">
                      <div className="flex items-center gap-3 mb-3">
                        {getStaffIcon(staff.role)}
                        <h3 className="text-xl font-bold text-emerald-800">{staff.name}</h3>
                      </div>

<p className="text-gray-600 text-sm mb-4 line-clamp-3">{staff.description}</p>
                    </div>
                  </CardContent>
                </Card>
              </div>
            ))}
          </div>

{/* Mobile Dot Indicators */}
          <div className="flex justify-center items-center mt-6 md:hidden">
            <div className="flex gap-2">
              {STAFFS.map((_, index) => (
                <button
                  key={index}
                  onClick={() => scrollToIndex(index)}
                  className={`h-2 rounded-full transition-all duration-300 ${
                    currentIndex === index ? "bg-emerald-600 w-8" : "bg-emerald-200 w-2 hover:bg-emerald-300"
                  }`}
                  aria-label={`スタッフ ${index + 1} に移動`}
                />
              ))}
            </div>
          </div>
        </div>

{/* Team Message */}
        <div className="mt-16">
          <Card className="glass-card bg-white/70 backdrop-blur-xl rounded-3xl ring-1 ring-emerald-100 shadow-lg max-w-4xl mx-auto">
            <CardContent className="p-8 text-center">
              <h3 className="text-2xl font-bold text-emerald-800 mb-4">チームからのメッセージ</h3>
              <p className="text-gray-600 leading-relaxed mb-6">
                私たち海亀兄弟のスタッフは、お客様に最高の海洋体験をお届けすることを使命としています。
                安全を第一に、一人ひとりのお客様に寄り添ったサービスを心がけ、
                宮古島の美しい海と海亀との出会いを通じて、一生の思い出を作るお手伝いをいたします。
                <br />
                <br />
                初心者の方から上級者の方まで、どなたでも安心してご参加いただけるよう、
                経験豊富なスタッフが丁寧にサポートいたします。 皆様のお越しを心よりお待ちしております。
              </p>
              <div className="text-emerald-800 font-semibold">海亀兄弟スタッフ一同</div>
            </CardContent>
          </Card>
        </div>
      </div>

export function StaffHero() {
  return (
    <section className="relative py-20 overflow-hidden">
      {/* Background with overlay */}
      <Image
        src="/crystal-clear-turquoise-ocean-water-with-coral-ree.jpg"
        alt="スタッフ紹介背景"
        fill
        loading="lazy"
        quality={70}
        placeholder="blur"
        blurDataURL={BLUR_DATA_URLS.ocean}
        className="object-cover"
        sizes="100vw"
      />
      <div className="absolute inset-0 bg-gradient-to-b from-emerald-900/60 via-teal-900/40 to-cyan-900/60 z-[1]" />

<div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div className="floating">
          <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 text-balance">スタッフ紹介</h1>
          <p className="text-xl md:text-2xl text-cyan-100 mb-8 max-w-2xl mx-auto text-pretty">
            経験豊富で心温かいスタッフが、あなたの海での体験を
            <br />
            安全で楽しいものにします。
          </p>

{/* Stats */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-2xl mx-auto">
            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20">
              <Users className="w-6 h-6 text-cyan-400 mx-auto mb-2" />
              <div className="text-2xl font-bold text-white">4名</div>
              <div className="text-cyan-100 text-sm">プロスタッフ</div>
            </div>

<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20">
              <Camera className="w-6 h-6 text-emerald-400 mx-auto mb-2" />
              <div className="text-2xl font-bold text-white">無料</div>
              <div className="text-cyan-100 text-sm">高画質写真</div>
            </div>

<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20">
              <Heart className="w-6 h-6 text-pink-400 mx-auto mb-2" />
              <div className="text-2xl font-bold text-white">99.9%</div>
              <div className="text-cyan-100 text-sm">お客様満足度</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/trust-ribbon.tsx"
import { Star, MessageCircle, Heart, Award } from "lucide-react"

export function TrustRibbon() {
  return (
    <section className="py-12 bg-white/70 backdrop-blur-xl">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          {/* Average Rating */}
          <div className="flex flex-col items-center">
            <div className="flex items-center mb-2">
              <Star className="w-6 h-6 text-yellow-500 fill-current" />
              <span className="text-3xl font-bold text-emerald-800 ml-2">4.9</span>
            </div>
            <p className="text-gray-600 text-sm font-medium">平均評価</p>
          </div>

{/* Total Reviews */}
          <div className="flex flex-col items-center">
            <div className="flex items-center mb-2">
              <MessageCircle className="w-6 h-6 text-blue-500" />
              <span className="text-3xl font-bold text-emerald-800 ml-2">{"1876"}</span>
            </div>
            <p className="text-gray-600 text-sm font-medium">総口コミ件数</p>
          </div>

{/* Family Friendly */}
          <div className="flex flex-col items-center">
            <div className="flex items-center mb-2">
              <Heart className="w-6 h-6 text-pink-500 fill-current" />
              <span className="text-3xl font-bold text-emerald-800 ml-2">100%</span>
            </div>
            <p className="text-gray-600 text-sm font-medium">子連れ歓迎</p>
          </div>

{/* Experience Cases */}
          <div className="flex flex-col items-center">
            <div className="flex items-center mb-2">
              <Award className="w-6 h-6 text-emerald-500" />
              <span className="text-3xl font-bold text-emerald-800 ml-2">1500+</span>
            </div>
            <p className="text-gray-600 text-sm font-medium">年間実績</p>
          </div>
        </div>

{/* Trust Badges */}
        <div className="mt-8 pt-8 border-t border-emerald-100">
          <div className="flex flex-wrap justify-center items-center gap-6 text-sm text-gray-600">
            <div className="flex items-center">
              <div className="w-3 h-3 bg-emerald-500 rounded-full mr-2"></div>
              安全講習実施
            </div>
            <div className="flex items-center">
              <div className="w-3 h-3 bg-emerald-500 rounded-full mr-2"></div>
              保険加入済み
            </div>
            <div className="flex items-center">
              <div className="w-3 h-3 bg-emerald-500 rounded-full mr-2"></div>
              器材レンタル無料
            </div>
            <div className="flex items-center">
              <div className="w-3 h-3 bg-emerald-500 rounded-full mr-2"></div>
              写真データ提供
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<'span'> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'span'

return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default:
          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
        destructive:
          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx"
'use client'

import * as React from 'react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { CheckIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex items-center justify-center text-current transition-none"
      >
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'

import { cn } from '@/lib/utils'

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

export { Label }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescriptreact:file="components/welcome-animation.tsx"
"use client"

import { useState, useEffect, useCallback } from "react"
import { usePathname } from "next/navigation"
import { motion, AnimatePresence } from "framer-motion"
import Image from "next/image"

export function WelcomeAnimation() {
  const pathname = usePathname()
  const [phase, setPhase] = useState<"initial" | "text" | "reveal" | "complete" | "done">("initial")
  
  // Only show animation on home page
  const isHomePage = pathname === "/"

const completeAnimation = useCallback(() => {
    setPhase("done")
  }, [])

useEffect(() => {
    const textTimer = setTimeout(() => {
      setPhase("text")
    }, 800)

const revealTimer = setTimeout(() => {
      setPhase("reveal")
    }, 3500)

const completeTimer = setTimeout(() => {
      setPhase("complete")
    }, 5500)

const doneTimer = setTimeout(completeAnimation, 6500)

return () => {
      clearTimeout(textTimer)
      clearTimeout(revealTimer)
      clearTimeout(completeTimer)
      clearTimeout(doneTimer)
    }
  }, [completeAnimation])

// Don't show animation on non-home pages or when done
  if (!isHomePage || phase === "done") return null

const phrase1 = "海を敬い、"
  const phrase2 = "海と遊ぶ。"
  const allCharacters = (phrase1 + phrase2).split("")

return (
    <AnimatePresence>
      <motion.div
        className="fixed inset-0 z-[100] overflow-hidden"
        initial={{ opacity: 1 }}
        animate={{ opacity: phase === "complete" ? 0 : 1 }}
        transition={{ duration: 1, ease: "easeInOut" }}
      >
        {/* Layer 1: Deep navy background (initial state) */}
        <motion.div
          className="absolute inset-0 bg-[#001a1a]"
          initial={{ opacity: 1 }}
          animate={{
            opacity: phase === "reveal" || phase === "complete" ? 0 : 1,
          }}
          transition={{ duration: 1.8, ease: [0.25, 0.46, 0.45, 0.94] }}
          style={{ zIndex: 30 }}
        />

{/* Layer 2: Curtain effect - Top */}
        <motion.div
          className="absolute inset-x-0 top-0 h-1/2 bg-[#001a1a] origin-top"
          initial={{ scaleY: 1 }}
          animate={{
            scaleY: phase === "reveal" || phase === "complete" ? 0 : 1,
          }}
          transition={{ duration: 1.5, ease: [0.76, 0, 0.24, 1], delay: 0.2 }}
          style={{ zIndex: 25 }}
        />

{/* Layer 2: Curtain effect - Bottom */}
        <motion.div
          className="absolute inset-x-0 bottom-0 h-1/2 bg-[#001a1a] origin-bottom"
          initial={{ scaleY: 1 }}
          animate={{
            scaleY: phase === "reveal" || phase === "complete" ? 0 : 1,
          }}
          transition={{ duration: 1.5, ease: [0.76, 0, 0.24, 1], delay: 0.2 }}
          style={{ zIndex: 25 }}
        />

{/* Layer 3: Background image with zoom effect */}
        <motion.div
          className="absolute inset-0"
          initial={{ scale: 1.3, opacity: 0 }}
          animate={{
            scale: phase === "reveal" || phase === "complete" ? 1 : 1.3,
            opacity: phase === "reveal" || phase === "complete" ? 1 : 0,
          }}
          transition={{ duration: 2.5, ease: [0.25, 0.46, 0.45, 0.94] }}
          style={{ zIndex: 10 }}
        >
          <Image
            src="/images/gemini-generated-image-rq969urq969urq96.jpeg"
            alt="宮古島の海"
            fill
            className="object-cover"
            priority
            quality={90}
          />
          <div className="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/40" />
        </motion.div>

{/* Layer 4: Centered text content with premium typography */}
        <div className="absolute inset-0 flex flex-col items-center justify-center px-[10%]" style={{ zIndex: 40 }}>
          <div className="overflow-hidden text-center">
            <motion.h1
              className="font-serif font-light text-[#f5f5f5] leading-relaxed"
              style={{
                fontFamily: "'Noto Serif JP', serif",
                fontSize: "clamp(32px, 8vw, 64px)",
                letterSpacing: "0.15em",
                textWrap: "balance",
              }}
            >
              {allCharacters.map((char, index) => {
                // Determine which phrase this character belongs to
                const isPhrase1 = index < phrase1.length
                const charDelay = index * 0.08

return (
                  <motion.span
                    key={index}
                    initial={{ opacity: 0, filter: "blur(12px)", y: 20 }}
                    animate={{
                      opacity: phase !== "initial" ? 1 : 0,
                      filter: phase !== "initial" ? "blur(0px)" : "blur(12px)",
                      y: phase !== "initial" ? 0 : 20,
                    }}
                    transition={{
                      duration: 0.8,
                      delay: charDelay,
                      ease: [0.25, 0.46, 0.45, 0.94],
                    }}
                    className="inline-block"
                    style={{
                      whiteSpace: char === "、" || char === "。" ? "normal" : "nowrap",
                      textShadow: phase === "reveal" || phase === "complete" ? "0 2px 20px rgba(0,0,0,0.5)" : "none",
                    }}
                  >
                    {char}
                  </motion.span>
                )
              })}
            </motion.h1>
          </div>

<motion.div
            className="mt-[clamp(24px,6vw,48px)] flex items-center gap-4 sm:gap-6"
            initial={{ opacity: 0, scaleX: 0 }}
            animate={{
              opacity: phase !== "initial" ? 0.6 : 0,
              scaleX: phase !== "initial" ? 1 : 0,
            }}
            transition={{ duration: 1.2, delay: 1.5, ease: [0.25, 0.46, 0.45, 0.94] }}
          >
            <span className="h-px w-[clamp(48px,12vw,96px)] bg-white/60" />
            <span
              className="text-white/60 tracking-[0.4em] uppercase font-light"
              style={{
                fontSize: "clamp(8px, 2vw, 14px)",
              }}
            >
              Miyakojima
            </span>
            <span className="h-px w-[clamp(48px,12vw,96px)] bg-white/60" />
          </motion.div>

{/* Brand name - appears after reveal */}
          <motion.div
            className="mt-[clamp(16px,4vw,32px)]"
            initial={{ opacity: 0, y: 30 }}
            animate={{
              opacity: phase === "reveal" || phase === "complete" ? 1 : 0,
              y: phase === "reveal" || phase === "complete" ? 0 : 30,
            }}
            transition={{ duration: 1, delay: 0.5, ease: [0.25, 0.46, 0.45, 0.94] }}
          >
            <p
              className="text-white/80 tracking-[0.3em] font-light"
              style={{
                fontFamily: "'Noto Serif JP', serif",
                fontSize: "clamp(16px, 4vw, 28px)",
              }}
            >
              海亀兄弟
            </p>
          </motion.div>
        </div>

{/* Layer 5: Scroll indicator - appears last */}
        <motion.div
          className="absolute bottom-[clamp(24px,6vw,48px)] left-1/2 -translate-x-1/2 flex flex-col items-center"
          style={{ zIndex: 50 }}
          initial={{ opacity: 0 }}
          animate={{
            opacity: phase === "complete" ? 1 : 0,
          }}
          transition={{ duration: 1, ease: "easeOut" }}
        >
          <span
            className="text-white/40 tracking-[0.3em] uppercase mb-2"
            style={{
              fontSize: "clamp(10px, 1.5vw, 11px)",
            }}
          >
            Scroll
          </span>
          <motion.div
            className="w-px bg-gradient-to-b from-white/40 to-transparent"
            style={{
              height: "clamp(20px, 5vw, 40px)",
            }}
            animate={{ scaleY: [1, 0.5, 1] }}
            transition={{ duration: 1.5, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
          />
        </motion.div>
      </motion.div>
    </AnimatePresence>
  )
}
[V0_FILE]markdown:file="lib/REFACTORING_GUIDE.md"
# プロジェクト構造 - リファクタリング後

## ディレクトリ概要

\`\`\`
海亀兄弟 Website
├── app/
│   ├── api/
│   │   └── booking/
│   │       └── route.ts          # 予約API (リファクタリング済)
│   ├── book/
│   │   └── page.tsx              # 予約ページ
│   ├── blog/
│   ├── faq/
│   ├── gallery/
│   ├── staff/
│   ├── page.tsx                  # ホームページ
│   ├── layout.tsx
│   ├── globals.css
│   └── icon.png
│
├── components/
│   ├── booking/                  # 予約関連コンポーネント (NEW)
│   │   ├── PlanSelector.tsx       # プラン選択
│   │   ├── CustomerInfo.tsx       # 顧客情報入力
│   │   ├── ParticipantManager.tsx # 参加者管理
│   │   └── index.ts              # エクスポート
│   ├── ui/                       # shadcn UIコンポーネント
│   ├── booking-form.tsx          # メインのBookingForm（既存）
│   ├── booking-time-slots.tsx
│   ├── navbar.tsx
│   ├── footer.tsx
│   └── ... その他のコンポーネント
│
├── lib/
│   ├── constants/                # 定数 (NEW)
│   │   └── booking.ts            # 営業時間、価格設定、エラーメッセージ
│   │
│   ├── utils/                    # ユーティリティ関数 (NEW)
│   │   ├── validation.ts         # バリデーション関数
│   │   ├── calculations.ts       # 計算関数
│   │   └── index.ts              # エクスポート
│   │
│   ├── services/                 # ビジネスロジック層 (NEW)
│   │   ├── gas-service.ts        # GAS連携
│   │   └── index.ts              # エクスポート
│   │
│   ├── hooks/                    # カスタムフック (NEW)
│   │   ├── useBookingForm.ts     # 予約フォーム状態管理
│   │   └── index.ts              # エクスポート
│   │
│   ├── data/                     # データモジュール (NEW)
│   │   ├── plans.ts              # プラン情報
│   │   ├── staff.ts              # スタッフ情報
│   │   ├── faqs.ts               # FAQ情報
│   │   ├── images.ts             # ギャラリー画像
│   │   └── index.ts              # 統合エクスポート
│   │
│   ├── date-utils.ts             # 日付ユーティリティ（既存）
│   ├── image-blur.ts             # 画像処理（既存）
│   └── utils.ts                  # 汎用ユーティリティ（既存）
│
├── public/
│   ├── images/
│   ├── ... 画像ファイル
│
└── package.json

\`\`\`

## 改善点まとめ

### 1. ユーティリティ層の構築
- `lib/constants/booking.ts`: マジックナンバー廃止、一元管理化
- `lib/utils/validation.ts`: バリデーション関数の再利用可能化
- `lib/utils/calculations.ts`: ビジネス計算ロジックの分離

### 2. API層の整理
- `app/api/booking/route.ts`: 130行 → 80行に削減
- ロジック関数化で可読性向上
- `gas-service.ts`で外部連携を独立化

### 3. データ層の分割
- `lib/data.ts`: 2700行 → 5つの専門モジュール
- プラン、スタッフ、FAQ、画像を独立管理
- 各モジュールにアクセッサ関数を提供

### 4. コンポーネント最適化
- `lib/hooks/useBookingForm.ts`: フォーム状態管理を抽出
- `components/booking/`: 再利用可能な小型コンポーネント
- 単一責任原則を遵守

### 5. ディレクトリ構造化
- `lib/constants/`: 定数の一元管理
- `lib/utils/`: ユーティリティ関数群
- `lib/services/`: ビジネスロジック層
- `lib/hooks/`: カスタムフック
- `lib/data/`: データモジュール
- `components/booking/`: 予約関連コンポーネント

## メリット

✅ **可読性**: コードが論理的に整理され理解しやすい  
✅ **再利用性**: 関数やコンポーネントが独立して再利用可能  
✅ **保守性**: 変更の影響範囲が明確で修正が容易  
✅ **テスト性**: 各関数が独立してテスト可能  
✅ **スケーラビリティ**: 新機能追加時の構造拡張が容易

## マイグレーション手順

1. 既存コンポーネントから新しいユーティリティをインポート
2. `lib/data/index.ts`から統合エクスポートをインポート
3. 新規サブコンポーネントをBookingFormで使用
4. 古いコードの段階的な移行
[V0_FILE]typescriptreact:file="lib/blur.tsx"
/**
 * Generates a minimal blur data URL for image placeholders
 * This provides a better UX during image loading
 */
export function getBlurDataURL(color = "#10b981"): string {
  // 1x1 pixel base64 encoded image with the specified color
  const svg = `
    <svg width="1" height="1" xmlns="http://www.w3.org/2000/svg">
      <rect width="1" height="1" fill="${color}"/>
    </svg>
  `
  const base64 = Buffer.from(svg).toString("base64")
  return `data:image/svg+xml;base64,${base64}`
}

// Predefined blur data URLs for common use cases
export const BLUR_DATA_URLS = {
  emerald: getBlurDataURL("#10b981"),
  ocean: getBlurDataURL("#0ea5e9"),
  sand: getBlurDataURL("#f59e0b"),
  neutral: getBlurDataURL("#6b7280"),
}
[V0_FILE]typescript:file="lib/constants/booking.ts"
// 営業時間
export const BUSINESS_HOURS = {
  START: 9,
  END: 18,
} as const;

// 予約設定
export const BOOKING_CONFIG = {
  SLOT_DURATION_MINUTES: 60,
  MAX_PARTICIPANTS: 4,
  MIN_PARTICIPANTS: 1,
  ADVANCE_BOOKING_DAYS: 30,
  MIN_BOOKING_HOURS: 24,
} as const;

// 予約ステータス
export const BOOKING_STATUS = {
  PENDING: 'pending',
  CONFIRMED: 'confirmed',
  CANCELLED: 'cancelled',
} as const;

// エラーメッセージ
export const ERROR_MESSAGES = {
  INVALID_DATE: '無効な日付です',
  INVALID_TIME: '無効な時刻です',
  INVALID_PARTICIPANTS: '参加者数が無効です',
  INVALID_PHONE: '電話番号が無効です',
  INVALID_EMAIL: 'メールアドレスが無効です',
  BOOKING_FAILED: '予約に失敗しました',
  GAS_ERROR: 'システムエラーが発生しました',
  REQUIRED_FIELD: '必須項目です',
} as const;

// 成功メッセージ
export const SUCCESS_MESSAGES = {
  BOOKING_CREATED: '予約が作成されました',
  EMAIL_SENT: 'メールが送信されました',
} as const;
[V0_FILE]typescript:file="lib/constants/index.ts"
// 定数の統合エクスポート
export * from './booking'
[V0_FILE]typescript:file="lib/data.ts"
export const ADULT_PRICE = 6500
export const CHILD_PRICE = 6000

export const STAFF_FEE = 1000

export const TIME_SLOTS = ["07:00", "09:00", "11:00", "14:00", "16:00"]

export const BLUR_DATA_URLS = {
  ocean:
    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q==",
  turtle:
    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q==",
  staff:
    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q==",
}

export function formatPriceWithTilde(item: { price: number; childPrice?: number }): string {
  if (item.childPrice && item.childPrice !== item.price) {
    return `¥${item.childPrice.toLocaleString()}〜`
  }
  return `¥${item.price.toLocaleString()}〜`
}

export interface Plan {
  id: string
  name: string
  description: string
  price: number
  childPrice?: number
  vipSurcharge?: number
  privateTourSurcharge?: number
  rating: number
  reviewCount: number
  image: string
  timeTags: string[]
  provisionalTimes?: string[]
  durationHours: number
  features: string[]
  rank?: number
  ageRange?: string
  location?: {
    northWind?: string // Made optional since S3 doesn't need wind direction
    southWind?: string // Made optional since S3 doesn't need wind direction
    default: string
  }
  meetingTime?: {
    regular: string
    early: string
  }
  options?: Array<{
    name: string
    price: number
    freeForPrivate?: boolean
  }>
  whatToBring?: string[]
  precautions?: string[]
  paymentMethod?: string
  flexibleScheduling?: boolean
  priceNote?: string // Added for S3
  flexibleDurations?: Array<{
    hours: number
    label: string
    price: number
    note?: string
  }>
  // LINE consultation URL for S5
  lineConsultUrl?: string
}

export const PLANS: Plan[] = [
  {
    id: "S1",
    name: "ウミガメと泳ぐシュノーケルツアー",
    description: `《遭遇率100％継続中！ウミガメシュノーケルツアー》
・クマノミや熱帯魚にも会えます。
・写真に圧倒的な自信あり！SNS映え間違いなし♪
・もちろんデータは全て無料プレゼント。枚数制限なし！
・ご友人同士やカップルはもちろん、ご家族にもおすすめです。
・少人数制、浅瀬の海岸での実施のため、小さなお子様でも安心◎
・1組限定の貸切プランもございます＾＾

〜体験の流れ〜
①集合・受付
催行海岸にて現地集合♪
ガイドがお出迎えし、注意事項や1日の流れを説明いたします。
②ツアー準備／レクチャー
綺麗でお洒落な機材をお貸出します！
お客様のほとんどが初めてですので、初めての方も安心♪
丁寧にレクチャー致します。
③ツアー開始！
シュノーケリング体験スタート！（約1時間）
ウミガメと一緒に写真撮影もします♪
④お会計、解散
お会計後、解散となります。

※繁忙期はデータのお渡しにお時間を頂戴する可能性がございます。
※掲載されている情報や写真につきまして最新の情報と異なる場合がございます。
必ずご自身で事前にご確認の上ご予約をお願いいたします。

ウミガメ遭遇率100%継続中！
宮古島の海を知り尽くしたガイドが、ウミガメ遭遇率が高い場所や時間を熟知しているため、遭遇率100%を継続中です！
一度に何匹も会えることも多いですよ♪
人慣れしている子が多いので近くで一緒に泳げます。

SNS映え間違いなし！
写真にはどのツアーよりもこだわっている自信があります！
高性能カメラでたくさん撮影させていただきますので、写真のリクエストがあればご遠慮なくガイドにお伝えくださいね♪
動画も撮影可能ですよ◎
もちろん全てのデータは無料プレゼント★

お子様や泳ぎが苦手な方も安心！
当ツアーは基本的に少人数制で行っておりますので、小さなお子様やご年配の方、初めての方でも安心してご参加いただけます♪
また実施海岸はかなり浅く、潮の満ち引きによっては余裕で足がつく深さまで水位が下がります！
そのため泳ぎが苦手な方も安心してご参加ください＾＾
ライフジャケットを着用するため何もしなくても浮きますし、捕まることのできる浮き輪をガイドが常備してます♪
潮の満ち引きは日によって異なりますので、お気軽にご相談くださいね＾＾

完全貸切でのプランもご用意しておりますので、ご希望の方はそちらのプランからご予約お願いします！`,
    price: 6500,
    childPrice: 6000,
    privateTourSurcharge: 20000,
    rating: 4.9,
    reviewCount: 687,
    image: "/placeholder-4t1ct.png",
    timeTags: ["07:00", "09:00", "11:00", "14:00", "16:00"],
    provisionalTimes: ["08:00", "10:00", "12:00", "13:00"],
    durationHours: 2,
    features: ["少人数制", "器材レンタル込み", "写真 & 動画付き", "Ace Pro 2 高画質撮影"],
    rank: 1,
    ageRange: "5〜65歳",
    location: {
      northWind: "シギラビーチ",
      southWind: "新城海岸",
      default: "新城海岸",
    },
    meetingTime: {
      regular: "開始時刻の15分前に集合",
    },
    options: [
      {
        name: "ウェットスーツ",
        price: 1000,
        freeForPrivate: true,
      },
      {
        name: "度付きメガネ",
        price: 1000,
        freeForPrivate: true,
      },
    ],
    whatToBring: ["着替え", "タオル", "日焼け止め", "飲み物", "サンダル（推奨）"],
    precautions: ["妊娠中の方は参加不可", "持病をお持ちの方は参加不可", "飲酒されている方は参加不可", "お体に不自由がある場合は必ず事前にご相談ください。"],
    paymentMethod: "現地現金決済（できるだけお釣りが出ないようご協力ください）",
  },
  {
    id: "S2",
    name: "VIP貸切シュノーケルツアー",
    description: `《1組限定・完全貸切！VIPウミガメシュノーケルツアー》
・他のお客様を気にせず、自分たちだけのプライベートな時間を満喫！
・ウミガメ遭遇率100％継続中！クマノミや熱帯魚にも会えます。
・写真に圧倒的な自信あり！SNS映え間違いなし♪
・もちろんデータは全て無料プレゼント。枚数制限なし！
・専属ガイドがつくため、小さなお子様や泳ぎが苦手な方もさらに安心◎
・ご友人同士やカップル、ご家族での特別な思い出作りに最適です。

〜体験の流れ〜
①集合・受付
催行海岸にて現地集合♪
お客様専属のガイドがお出迎えし、注意事項や1日の流れを説明いたします。
②ツアー準備／レクチャー
綺麗でお洒落な機材をお貸出します！
他のお客様を待つ必要がないので、ご自身のペースに合わせて丁寧にレクチャー致します。
③ツアー開始！
完全貸切のシュノーケリング体験スタート！（約1時間）
ウミガメと一緒に、こだわりのアングルで写真撮影もします♪
④お会計、解散
お会計後、解散となります。

完全貸切だからこその贅沢な時間！
他のお客様のペースを気にすることなく、宮古島の海を独り占めできる1組限定のプライベートツアープランです。
「子供がぐずらないか心配」「泳ぐのが遅くて迷惑をかけないか不安」という方にも大好評！お客様専属のガイドが付きっきりでサポートいたしますので、海に入るタイミングや休憩も自由自在です＾＾

ウミガメ遭遇率100%継続中！
宮古島の海を知り尽くしたガイドが、ウミガメ遭遇率が高い場所や時間を熟知しているため、遭遇率100%を継続中です！
人慣れしている子が多いので近くで一緒に泳げます。

SNS映え間違いなし！
写真にはどのツアーよりもこだわっている自信があります！
高性能カメラでたくさん撮影させていただきます。貸切ならではのこだわりショットや「こういう動画が撮りたい！」といったリクエストがあれば、ご遠慮なく専属ガイドにお伝えくださいね♪
もちろん全てのデータは無料プレゼント★

お子様や泳ぎが苦手な方も絶対安心！
実施海岸はかなり浅く、潮の満ち引きによっては余裕で足がつく深さまで水位が下がります！
ライフジャケットを着用するため何もしなくても浮きますし、捕まることのできる浮き輪をガイドが常備してます♪
他の方に気を遣わず、ゆっくりと海に慣れていくことができるので、初めての方にこそおすすめのプランです＾＾`,
    price: 9000,
    childPrice: 9000,
    vipSurcharge: 0,
    privateTourSurcharge: 0,
    maxParticipants: 6,
    priceNote: "¥9,000 / 1名（最大6名まで）\n7名以上はLINEよりご相談ください",
    rating: 5.0, // rating を 5.0 に変更
    reviewCount: 234, // 口コミ件数をまばらな数字に変更（貸切プランなので少なめ）
    image: "/placeholder-p4pnn.png",
    timeTags: ["07:00", "09:00", "11:00", "14:00", "16:00"],
    provisionalTimes: ["08:00", "10:00", "12:00", "13:00"],
    flexibleScheduling: true,
    durationHours: 2,
    features: ["完全貸切", "写真 & 動画サービス", "ウエットスーツ無料", "度付きメガネ無料", "Ace Pro 2 高画質撮影"],
    rank: 2,
    ageRange: "5〜65歳",
    location: {
      northWind: "シギラビーチ",
      southWind: "新城海岸",
      default: "新城海岸",
    },
    meetingTime: {
      regular: "開始時刻の15分前に集合",
    },
    options: [
      {
        name: "ウェットスーツ",
        price: 1000,
        freeForPrivate: true,
      },
      {
        name: "度付きメガネ",
        price: 1000,
        freeForPrivate: true,
      },
    ],
    whatToBring: ["着替え", "タオル", "日焼け止め", "飲み物", "サンダル（推奨）"],
    precautions: ["妊娠中の方は参加不可", "持病をお持ちの方は参加不可", "飲酒されている方は参加不可", "お体に不自由がある場合は必ず事前にご相談ください。"],
    paymentMethod: "現地現金決済（できるだけお釣りが出ないようご協力ください）",
  },
  {
    id: "S3",
    name: "【アマゾン帰りの男と行く】本格ナイトツアー",
    description: `《0歳から参加OK！わくわくドキドキのジャングルナイトツアー》
・巨大なヤシガニや夜行性の生き物たちを探しに行こう！
・晴れた日は宮古島ならではの満天の星空も楽しめます♪
・0歳の赤ちゃんからシニアの方まで、ご家族みんなで参加可能◎
・懐中電灯を持って夜の亜熱帯を探検する、ワクワクの非日常体験！
・探検中の様子の写真データは全て無料プレゼント★

〜体験の流れ〜
①集合・受付
開催場所にて現地集合♪
ガイドがお出迎えし、注意事項や生き物を探すコツを説明いたします。
②探検準備
専用の懐中電灯などをお貸出しします！
ワクワクの夜のジャングルへ出発準備♪
③ツアー開始！
ナイトサファリスタート！（約1.5時間）
絶滅危惧種の巨大なヤシガニなどの生き物を探しながら探検します。
④お会計、解散
お会計後、解散となります。

0歳から参加OK！家族みんなで大冒険！
宮古島の夜は、昼間とは違うワクワクがいっぱい！0歳の赤ちゃんからおじいちゃんおばあちゃんまで、三世代でのご参加も大歓迎です♪
お子様の夏の自由研究や、ご家族の忘れられない夜の思い出作りにぴったりです！

珍しい生き物やヤシガニに出会えるかも！
宮古島の自然を知り尽くしたガイドが、その日一番生き物に出会えそうなポイントへご案内します。
運が良ければ、絶滅危惧種に指定されている巨大なヤシガニに遭遇できるかも！？他にも夜にしか見られない珍しい植物や生き物たちがたくさん待っています。`,
    price: 4000,
    childPrice: 4000,
    priceNote: "一律 ¥4,000（3歳以下無料）",
    rating: 5.0,
    reviewCount: 423,
    image: "/placeholder-we6r5.png",
    timeTags: ["19:20", "21:10"],
    provisionalTimes: ["19:20", "21:10"],
    durationHours: 1.5,
    features: ["親子体験", "安全ガイド同行", "本格ナイトツアー", "3歳以下無料"],
    rank: 3,
    ageRange: "0歳〜75歳",
    location: "ご予約確定時にメールにてご案内",
    meetingTime: {
      regular: "開始時間と同じ（19:20 / 21:10）",
    },
    options: [],
    whatToBring: ["歩きやすい靴（ビーチサンダルも一応可能）", "虫よけスプレー", "飲み物", "懐中電灯（貸出あり）"],
    precautions: ["お体に不自由がある場合は必ず事前にご相談ください。"],
    paymentMethod: "現地現金決済（できるだけお釣りが出ないようご協力ください）",
  },
  {
    id: "S4",
    name: "🌅 サンセットSUP",
    description: `《絶景に癒される！宮古島の海で極上のサンセットSUPツアー》
・海の上から眺める、オレンジ色に染まる夕日と空のグラデーションは圧巻！
・初心者でも安心の、安定感抜群のボードを使用◎
・座ったり寝転んだり、波の音を聞きながら究極のリラックスタイム♪
・写真に圧倒的な自信あり！SNS映え間違いなしのシルエット写真も！
・もちろんデータは全て無料プレゼント。枚数制限なし！
・カップルやご友人同士、ご家族でのご参加も大歓迎です＾＾

〜体験の流れ〜
①集合・受付
催行海岸にて現地集合♪
その日の日の入り時間に合わせて集合します。ガイドがお出迎えし、注意事項を説明いたします。
②ツアー準備／レクチャー
SUPの漕ぎ方や乗り方を陸上でしっかり丁寧にレクチャー致します。
初めての方も安心♪
③ツアー開始！
海へ出発！（約2時間）
夕日を浴びながらのんびり海上散歩。絶景をバックにたくさん写真撮影もします♪
④お会計、解散
マジックアワーの余韻に浸りながらお会計後、解散となります。

最高にロマンチックな癒し時間！
宮古島の美しい夕日を、遮るもののない海の上から眺める贅沢なひととき。
空と海がオレンジ、ピンク、紫へと移り変わる「マジックアワー」の絶景は息を呑む美しさです。SUPボードの上に座ったり寝転んだりしながら、波の音と夕暮れのグラデーションに包まれる究極の癒しをお約束します。

初めてでも立てる！安心のサポート
「SUPは初めてで立てるか不安…」という方もご安心ください！
当ツアーでは安定感抜群の大きめのボードを使用しており、ガイドが波の穏やかなポイントを選んで丁寧にレクチャーします。最初は座ったまま漕ぎ始め、慣れてきたら自分のペースで立ち上がってみましょう♪

エモーショナルなシルエット写真！
夕日をバックにしたSUPツアーならではの、美しくてエモーショナルな「シルエット写真」の撮影が大人気です！
写真にこだわりのあるガイドが、高性能カメラであなただけの特別な一枚を撮影します。どんなポーズがいいか、リクエストがあればどんどんお伝えくださいね◎もちろんデータは全てもれなくプレゼントいたします！`,
    price: 8000,
    childPrice: 6000,
    rating: 5.0, // rating を 5.0 に変更
    reviewCount: 532, // 口コミ件数をまばらな数字に変更（人気のサンセットプラン）
    image: "/placeholder-c23py.png",
    timeTags: ["日没に合わせて変動（時期により集合時間が異なります）"],
    provisionalTimes: ["開始時間は事前にご案内します"],
    durationHours: 2,
    features: ["SUP体験", "夕日鑑賞", "初心者歓迎", "写真映え抜群", "穏やかな海"],
    rank: 4,
    ageRange: "5〜65歳",
    location: "当日の海況・天候により変動（ガイドより事前案内）",
    meetingTime: {
      regular: "開始15分前に集合",
    },
    whatToBring: ["着替え", "タオル", "日焼け止め", "飲み物", "サンダル"],
    precautions: ["妊娠中の方は参加不可", "持病をお持ちの方は参加不可", "飲酒されている方は参加不可", "お体に不自由がある場合は必ず事前にご相談ください。"],
    paymentMethod: "現地現金決済（できるだけお釣りが出ないようご協力ください）",
  },
  ]

export const CANCELLATION_POLICY = {
  previousDay: "100%",
  sameDay: "100%",
  noShow: "100%",
  weatherCancellation: "無料",
}

export interface Staff {
  id: string
  name: string
  role: string
  description: string
  image: string
}

export const STAFFS: Staff[] = [
  {
    id: "yamachan",
    name: "やまちゃん",
    role: "現場責任者",
    description: "宮古島の海を知り尽くした頼れるリーダー。安全第一で楽しい海の時間をお約束します。",
    image: "/yamachan-staff-photo.jpg",
  },
  {
    id: "hikaru",
    name: "ひかる",
    role: "やまちゃんの右腕",
    description: "海の生き物が大好きな優しいガイド。初心者やお子さまも安心してお任せください。",
    image: "/hikaru-staff-photo.jpg",
  },
  {
    id: "souichiro",
    name: "そういちろう",
    role: "ナイトツアー専門",
    description: "夜の冒険のスペシャリスト。ワクワクする夜の生き物探しをご案内します。",
    image: "/souichiro-staff-photo.jpg",
  },
  {
    id: "nagi",
    name: "凪",
    role: "ドローンパイロット",
    description: "国家資格を持つドローンパイロット。空からの美しい映像で思い出を記録します。",
    image: "/nagi-staff-photo.jpg",
  },
]

export interface FAQ {
  question: string
  answer: string
}

export const FAQS: FAQ[] = [
  {
    question: "ウェットスーツは必要ですか？",
    answer:
      "11月から4月ごろまでの期間は、水温が低くなるためウェットスーツの着用をおすすめしております。レンタル料金はプランにより異なり、料金に含まれているプランと有料のプランがございます。詳しくは各プランの詳細をご確認ください。",
  },
  {
    question: "泳ぎが不安ですが参加できますか？",
    answer:
      "はい、大丈夫です！ライフジャケットの着用と、経験豊富なガイドが常に近くでサポートしますので、泳ぎが苦手な方でも安心してご参加いただけます。",
  },
  {
    question: "集合場所はどこですか？",
    answer:
      "集合場所はご予約いただくプランにより異なります。予約確定後にお送りするメールで、詳しい集合場所と駐車場のご案内をいたします。ご不明な点がございましたら、お気軽にLINEでお問い合わせください。",
  },
  {
    question: "質問や相談はどこにすればいいですか？",
    answer:
      "ご質問やご相談は、LINEで24時間受け付けております。お気軽にメッセージをお送りください。営業時間内（7:00-18:00）にスタッフが丁寧にお答えいたします。",
  },
  {
    question: "幼児でも海に入れる？",
    answer:
      "はい、5歳以上であれば多くのシュノーケルツアーに参加できます。ライフジャケットや浮き具を使用すれば、泳ぎが苦手なお子さまでも安心です。ただし、波の状況や体調に応じて無理のない範囲で楽しみましょう。",
  },
  {
    question: "子どもが波を怖がる場合の対策は？",
    answer:
      "まずは波が穏やかなビーチ（新城海岸やシギラビーチ）で、足がつく浅瀬から慣れさせましょう。ライフジャケットを着用し、親が近くでサポートすることで、徐々に水に慣れていきます。",
  },
  {
    question: "雨の日の代替プランは？",
    answer:
      "宮古島海中公園や、雪塩ミュージアム、島の駅みやこなど、屋内施設も充実しています。また、ホテルのプールで遊ぶのもおすすめです。",
  },
  {
    question: "子ども用のシュノーケルセットはレンタルできる？",
    answer:
      "はい、多くのビーチやツアー会社で子ども用のシュノーケルセット、ライフジャケット、浮き具などをレンタルできます。海亀兄弟のツアーでも、子ども用の器材を無料で提供しています。",
  },
]

export const GALLERY_IMAGES = [
  "/placeholder-73fie.png",
  "/placeholder-hv95x.png",
  "/placeholder-ifm3c.png",
  "/placeholder-5ql5m.png",
  "/placeholder-l9094.png",
  "/placeholder-eouav.png",
  "/placeholder-jqhr3.png",
  "/placeholder.svg?height=400&width=600",
  "/placeholder.svg?height=400&width=600",
]

export interface BlogPost {
  id: string
  slug: string
  title: string
  excerpt: string
  author: string
  publishedAt: string
  category: string
  tags: string[]
  image: string
  readTime: number
  content: string
  date?: string // Added for the updated blog post
}

export const BLOG_CATEGORIES = [
  "体験談",
  "海の生き物",
  "季節情報",
  "ダイビングTips",
  "宮古島情報",
  "文化・歴史",
  "グルメ",
  "環境保全", // Added category
]

export const BLOG_POSTS: BlogPost[] = [
  {
    id: "miyakojima-family-2nights-3days",
    slug: "miyakojima-family-2nights-3days",
    title: "子連れでも安心！宮古島2泊3日ファミリー旅モデルコース",
    excerpt:
      "家族旅行で初めての宮古島。5歳からでも安心して楽しめる2泊3日の王道ファミリープランを解説。海亀シュノーケルから絶景ビーチまで、子連れ目線で厳選したモデルコースをご紹介します。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-03-15",
    category: "宮古島情報",
    tags: ["宮古島", "子連れ", "ファミリー", "モデルコース", "2泊3日", "海亀", "ビーチ", "アクティビティ"],
    image: "/miyakojima-family-beach.jpg",
    readTime: 12,
    content: `宮古島は家族旅行に最適な南国リゾートです。透明度の高い「宮古ブルー」の海と、波が穏やかで遠浅のビーチが多く、小さなお子さまでも安心して海遊びを楽しめます。2泊3日あれば、ウミガメシュノーケル、絶景ビーチまで、子連れ目線で厳選したモデルコースをご紹介します。

## 1. 宮古島が子連れファミリーに最適な理由

### 波が穏やかで遠浅のビーチが多い

宮古島のビーチは、波が穏やかで遠浅のビーチが多く、小さなお子さまでも安心して海遊びを楽しめます。新城海岸やシギラビーチなど、足がつく浅瀬でシュノーケルができるビーチもあります。

ライフジャケットを着用すれば、泳ぎが苦手なお子さまでも安心です。

### 5歳から参加できるツアーが充実

宮古島には、5歳から参加できるシュノーケルツアーやSUP体験が充実しています。少人数制で、インストラクターが丁寧にサポートしてくれるため、初めてのマリンアクティビティでも安心です。

ウミガメと一緒に泳ぐ体験は、お子さまにとって一生の思い出になります。

### 子連れ歓迎の飲食店・ホテルが多い

宮古島には、子連れ歓迎の飲食店やホテルが多く、ファミリー旅行に優しい環境が整っています。キッズメニューや座敷席のあるレストラン、プール付きのファミリー向けホテルなど、子連れでも快適に過ごせます。

## 2. 2泊3日モデルコース

### DAY 1：到着＆ビーチで海遊び

**🛬 午前：宮古空港到着・レンタカー受取**  
宮古空港に到着したら、レンタカーを借りて出発。空港から市街地までは約10分、主要ビーチまでは20〜30分程度です。

**🏖️ 午後：与那覇前浜ビーチで海遊び**  
「東洋一美しいビーチ」と称される与那覇前浜ビーチへ。白い砂浜と透明度抜群の海で、お子さまと一緒に海遊びを楽しみましょう。遠浅のビーチなので、小さなお子さまでも安心です。

**🍔 夕方：ダグズバーガーでディナー**  
地元で人気のハンバーガーショップ「ダグズバーガー」でディナー。ボリューム満点のハンバーガーは、子どもも大人も大満足です。

**🏨 夜：ホテルでゆっくり休む**  
初日は移動と海遊びで疲れているため、早めにホテルに戻ってゆっくり休みましょう。

### DAY 2：ウミガメシュノーケル＆絶景ドライブ

**🐢 午前：ウミガメシュノーケルツアー**  
2日目のメインイベントは、ウミガメシュノーケルツアー。透明度抜群の海で、ウミガメと一緒に泳ぐ体験は感動的です。5歳から参加できるツアーが多く、ライフジャケットを着用するため、泳ぎが苦手なお子さまでも安心です。

インストラクターが丁寧にサポートしてくれるため、初めてのシュノーケルでも大丈夫。写真や動画も撮影してくれるため、思い出に残ります。

**🍜 昼：宮古そばでランチ**  
シュノーケルの後は、地元で人気の宮古そば店でランチ。あっさりとしたスープと手打ち麺が絶品です。

**🌉 午後：伊良部大橋ドライブ**  
全長3,540mの日本一長い無料の橋、伊良部大橋をドライブ。両側にエメラルドグリーンの海が広がる絶景ロードは、お子さまも大興奮です。橋のたもとの展望台からの眺めも必見です。

**🏝️ 夕方：渡口の浜ビーチで夕日鑑賞**  
伊良部島の渡口の浜ビーチで、美しい夕日を鑑賞。静かなビーチで、家族でのんびりと過ごせます。

**🍣 夜：市街地で島寿司ディナー**  
市街地に戻り、新鮮な島寿司でディナー。宮古島の海の幸を堪能しましょう。

### DAY 3：島の駅みやこ＆お土産探し

**☕ 午前：島カフェで朝食**  
海を眺めながら、島カフェでのんびり朝食。パンケーキやエッグベネディクトが人気です。

**🛍️ 午前：島の駅みやこでお土産探し**  
宮古島の特産品が揃う「島の駅みやこ」でお土産探し。雪塩、マンゴー製品、宮古そば、泡盛など、宮古島ならではのお土産が見つかります。

**🛫 昼：空港へ移動・出発**  
レンタカーを返却し、宮古空港から出発。2泊3日の宮古島ファミリー旅行は、お子さまにとって一生の思い出になります。

## 3. 子連れにおすすめのビーチ

### 🏖️ 新城海岸：遠浅で魚が多い

新城海岸は、遠浅で波が穏やかなビーチ。足がつく浅瀬でシュノーケルができるため、小さなお子さまでも安心です。カラフルな熱帯魚が多く、お子さまも大喜びです。

### 🏝️ シギラビーチ：ウミガメに会える

シギラビーチは、ウミガメに高確率で出会えるビーチ。シュノーケル中にウミガメと一緒に記念撮影できるチャンスがあります。波が穏やかで、初心者や子連れファミリーにも最適です。

### 🌊 与那覇前浜ビーチ：白い砂浜が美しい

「東洋一美しいビーチ」と称される与那覇前浜ビーチ。白い砂浜と透明度抜群の海が広がり、遠浅のビーチなので小さなお子さまでも安心です。砂遊びや海遊びを存分に楽しめます。

## 4. 子連れ旅行の持ち物チェックリスト

✅ **ラッシュガード・水着**：紫外線対策に必須  
✅ **ライフジャケット（レンタル可能）**：泳ぎが苦手なお子さまに安心  
✅ **日焼け止め・帽子・サングラス**：紫外線は強いため必須  
✅ **浮き輪・ビーチボール**：海遊びに便利  
✅ **防水ケース**：スマホやカメラを海で使う際に必須  
✅ **タオル・着替え**：海遊び後に必要  
✅ **虫除けスプレー**：夏は蚊が多いため必須  
✅ **常備薬・絆創膏**：万が一のために持参

## 5. 子連れ旅行の注意点

⚠️ **紫外線対策は万全に**：宮古島の紫外線は非常に強いため、日焼け止めをこまめに塗り直しましょう。  
⚠️ **水分補給をこまめに**：熱中症対策として、こまめな水分補給を心がけましょう。  
⚠️ **無理のないスケジュール**：お子さまの体調に合わせて、無理のないスケジュールを組みましょう。  
⚠️ **ライフジャケット着用**：海遊びの際は、必ずライフジャケットを着用しましょう。

## 6. まとめ

宮古島は子連れファミリーに最適なリゾート。安全なビーチと充実したツアーで、家族全員が楽しめる2泊3日の旅を満喫しましょう。ウミガメシュノーケル、絶景ドライブ、美しいビーチなど、お子さまにとって一生の思い出になる体験が待っています。`,
  },
  {
    id: "miyakojima-rainy-day-guide",
    slug: "miyakojima-rainy-day-guide",
    title: "雨の日でも楽しめる宮古島｜室内＆屋内アクティビティ完全ガイド",
    excerpt:
      "旅行中に雨が降っても大丈夫！宮古島には室内で楽しめるアクティビティ、カフェ、ショッピングスポットが充実しています。また、ホテルのプールで遊ぶのもおすすめです。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-03-20",
    category: "宮古島情報",
    tags: ["宮古島", "雨の日", "室内", "アクティビティ", "観光", "グルメ", "カフェ", "ショッピング"],
    image: "/miyakojima-rainy-day-cafe.jpg",
    readTime: 10,
    content: `雨の日の宮古島は、晴れの日とは違った魅力があります。室内アクティビティ、おしゃれなカフェ、充実したショッピングスポットなど、天候に左右されない楽しみ方がたくさんあります。宮古島海中公園、雪塩ミュージアム、レジンアート体験など、雨でも楽しめる施設が充実しています。

## 1. 雨の日でも楽しめる室内アクティビティ

### 🐠 宮古島海中公園

海中の生き物を窓越しに観察できる施設。雨の日でも、海の中の世界を楽しめます。カラフルな熱帯魚やサンゴ礁を間近で観察でき、お子さまにも人気です。

**営業時間**：10:00〜18:00  
**料金**：大人1,000円、子ども500円  
**所要時間**：1時間程度

### 🧂 雪塩ミュージアム

宮古島の特産品「雪塩」の製造工程を見学できる施設。雪塩を使ったスイーツやコスメも販売しており、お土産探しにも最適です。雪塩ソフトクリームは絶品です。

**営業時間**：9:00〜18:00  
**料金**：無料（見学）  
**所要時間**：30分〜1時間

### 🎨 レジンアート体験

宮古島の海をイメージしたオリジナルアクセサリーを作れるレジンアート体験。雨の日でも楽しめる室内アクティビティで、カップルや女子旅に人気です。

**所要時間**：1〜2時間  
**料金**：3,000円〜5,000円程度

### 🏺 宮古島市総合博物館

宮古島の歴史や文化を学べる博物館。琉球王国時代の遺物や、宮古島の自然、伝統工芸品などが展示されています。雨の日にゆっくりと見学するのにぴったりです。

**営業時間**：9:00〜16:30  
**料金**：大人300円、子ども100円  
**所要時間**：1〜2時間

## 2. 雨の日におすすめのカフェ

### ☕ 島カフェとぅんからや

海を眺めながらのんびりできるカフェ。雨の日でも、窓越しに海を眺めながらコーヒーやスイーツを楽しめます。パンケーキやエッグベネディクトが人気です。

**営業時間**：8:00〜17:00  
**おすすめメニュー**：パンケーキ、エッグベネディクト、コーヒー

### 🍰 カフェ楽園の果実

南国フルーツをたっぷり使ったスイーツが人気のカフェ。マンゴーパフェやトロピカルスムージーは、雨の日でも南国気分を味わえます。

**営業時間**：11:00〜18:00  
**おすすめメニュー**：マンゴーパフェ、トロピカルスムージー

### 🥐 パン屋 モンテドール

焼きたてパンが人気のベーカリーカフェ。雨の日は、焼きたてパンとコーヒーでゆっくりと過ごすのがおすすめです。

**営業時間**：7:00〜18:00  
**おすすめメニュー**：クロワッサン、サンドイッチ、コーヒー

## 3. 雨の日のショッピングスポット

### 🛍️ 島の駅みやこ

宮古島の特産品が揃うショッピングスポット。雪塩、マンゴー製品、宮古そば、泡盛など、宮古島ならではのお土産が見つかります。雨の日でもゆっくりとお土産探しを楽しめます。

**営業時間**：9:00〜19:00  
**おすすめ商品**：雪塩、マンゴー製品、宮古そば

### 🏬 イオンタウン宮古南ショッピングセンター

宮古島最大のショッピングセンター。スーパーマーケット、飲食店、雑貨店などが入っており、雨の日でも快適にショッピングを楽しめます。

**営業時間**：9:00〜22:00

### 🎁 宮古島市公設市場

地元の新鮮な野菜や魚、特産品が並ぶ市場。雨の日でも、地元の雰囲気を味わいながらお土産探しを楽しめます。

**営業時間**：8:00〜18:00

## 4. 雨の日のホテルでの過ごし方

### 🏊 ホテルのプールで遊ぶ

雨の日でも、ホテルのプールで遊ぶのがおすすめです。屋内プールがあるホテルなら、天候に左右されずに楽しめます。お子さまと一緒にプールで遊んだり、ジャグジーでリラックスしたり、ホテルでのんびりと過ごしましょう。

### 🛀 スパ・マッサージでリラックス

雨の日は、ホテルのスパやマッサージでリラックスするのもおすすめです。旅の疲れを癒しながら、贅沢な時間を過ごせます。

### 📚 読書や映画鑑賞

ホテルの部屋でのんびりと読書や映画鑑賞を楽しむのも、雨の日ならではの過ごし方です。普段忙しい日常から離れて、ゆっくりとした時間を過ごしましょう。

## 5. 雨の日のグルメ

### 🍜 宮古そばの名店巡り

雨の日は、宮古そばの名店巡りがおすすめです。あっさりとしたスープと手打ち麺が絶品の宮古そばは、雨の日でも体を温めてくれます。

**おすすめ店**：丸吉食堂、古謝そば屋、すむばり食堂

### 🍛 島カレーでランチ

宮古島の島野菜や宮古牛を使った島カレーは、雨の日のランチにぴったり。スパイシーなカレーが体を温めてくれます。

### 🍰 カフェでスイーツタイム

雨の日は、カフェでのんびりとスイーツタイムを楽しむのもおすすめです。マンゴーパフェやトロピカルスムージーで、南国気分を味わいましょう。

## 6. 雨の日の注意点

⚠️ **道路が滑りやすい**：雨の日は道路が滑りやすいため、運転には十分注意しましょう。  
⚠️ **視界が悪い**：雨で視界が悪くなるため、ゆっくりと安全運転を心がけましょう。  
⚠️ **ツアーが中止になる可能性**：海況が悪化すると、マリンアクティビティが中止になる可能性があります。事前にツアー会社に確認しましょう。

## 7. よくある質問（FAQ）

**Q. 雨の日でも海に入れる？**  
A. 小雨程度なら海に入れますが、大雨や雷雨の場合は危険なため避けましょう。海況が悪化すると、マリンアクティビティが中止になる可能性があります。

**Q. 雨の日のおすすめスポットは？**  
A. 宮古島海中公園、雪塩ミュージアム、レジンアート体験、カフェ巡り、ショッピングなど、室内で楽しめるスポットがおすすめです。

**Q. 雨の日の活動は？**  
A. レジンアート体験、宮古島市総合博物館、カフェ巡り、ショッピング、ホテルのプールなど、天候に左右されない活動がたくさんあります。

**Q. 雨の日の服装は？**  
A. 雨具（傘、レインコート）、濡れてもよい靴、着替えを持参しましょう。室内は冷房が効いている場合があるため、薄手の羽織ものがあると便利です。

## 8. まとめ

雨の日でも宮古島は楽しめます。室内アクティビティ、カフェ、ショッピング、ホテルでのんびり過ごすなど、天候に左右されない楽しみ方がたくさんあります。雨の日ならではの宮古島を満喫しましょう。`,
  },
  {
    id: "miyakojima-couple-romantic-2nights-3days",
    slug: "miyakojima-couple-romantic-2nights-3days",
    title: "カップルにおすすめ！ロマンチック宮古島2泊3日モデルコース",
    excerpt:
      "宮古島で過ごす二人だけの特別な時間。記念日やプロポーズ旅行にもぴったりな、2泊3日の大人デートプランをご紹介。絶景スポット、ロマンチックなグルメ、サンセット体験まで完全網羅。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-03-25",
    category: "宮古島情報",
    tags: ["宮古島", "カップル", "ロマンチック", "モデルコース", "2泊3日", "絶景", "グルメ", "デート", "記念日"],
    image: "/miyakojima-couple-sunset.jpg",
    readTime: 13,
    content: `宮古島は、カップルで訪れるのに最適なロマンチックリゾートです。透明度抜群の「宮古ブルー」の海、360度の絶景パノラマ、そして二人だけの静かな時間を過ごせるプライベート感のあるビーチが魅力です。サンセットSUP、絶景ドライブ、ロマンチックなディナーなど、記念日やハネムーンにぴったりの体験が満載です。

## 1. 宮古島がカップルに最適な理由

### プライベート感のあるビーチが多い

宮古島には、人が少なく静かなビーチが多く、二人だけの時間を過ごせます。長間浜ビーチや砂山ビーチなど、プライベート感のあるビーチで、ロマンチックな時間を楽しめます。

### 絶景スポットが豊富

伊良部大橋、東平安名崎、17ENDなど、息をのむ絶景スポットが豊富。二人で絶景を眺めながら、特別な思い出を作れます。

### ロマンチックなアクティビティが充実

サンセットSUP、ナイトクルーズ、星空観察など、カップル向けのロマンチックなアクティビティが充実しています。

## 2. 2泊3日ロマンチックモデルコース

### DAY 1：到着＆絶景ドライブ

**🛬 午前：宮古空港到着・レンタカー受取**  
宮古空港に到着したら、レンタカーを借りて出発。

**🌉 午後：伊良部大橋ドライブ**  
全長3,540mの日本一長い無料の橋、伊良部大橋をドライブ。両側にエメラルドグリーンの海が広がる絶景ロードは、カップルに大人気です。

**🏝️ 午後：17ENDで絶景撮影**  
下地島空港の北端にある絶景スポット「17END」へ。干潮時に現れる白い砂浜と宮古ブルーの海が織りなす景色は圧巻です。

**🍽️ 夕方：シギラリゾートでディナー**  
シギラリゾート内のレストランで、ロマンチックなディナー。海を眺めながら、宮古牛や新鮮な海の幸を堪能しましょう。

**🏨 夜：リゾートホテルでゆっくり**  
リゾートホテルに戻り、二人だけの時間をゆっくり過ごしましょう。

### DAY 2：サンセットSUP＆星空観察

**🐢 午前：ウミガメシュノーケル**  
透明度抜群の海で、ウミガメと一緒に泳ぐ体験。二人で感動的な思い出を作れます。

**🍜 昼：海カフェでランチ**  
海を眺めながら、おしゃれな海カフェでランチ。パンケーキやエッグベネディクトが人気です。

**🏖️ 午後：砂山ビーチで二人だけの時間**  
砂山ビーチは、アーチ状の岩が特徴的な絶景ビーチ。人が少なく、二人だけの静かな時間を過ごせます。

**🌅 夕方：サンセットSUP**  
宮古島の美しい夕日を眺めながらSUP体験。ロマンチックな夕日と海の上での特別な時間は、一生の思い出になります。

**⭐ 夜：星空観察**  
宮古島は星空が美しいことで有名。ホテルのビーチや展望台で、満天の星空を二人で眺めましょう。

### DAY 3：東平安名崎＆お土産探し

**🌅 午前：東平安名崎で絶景パノラマ**  
宮古島の最東端にある東平安名崎へ。360度の絶景パノラマが広がり、灯台からの眺めは圧巻です。

**☕ 午前：島カフェでブランチ**  
海を眺めながら、島カフェでのんびりブランチ。

**🛍️ 午後：島の駅みやこでお土産探し**  
宮古島の特産品が揃う「島の駅みやこ」でお土産探し。

**🛫 夕方：空港へ移動・出発**  
レンタカーを返却し、宮古空港から出発。2泊3日のロマンチック宮古島旅行は、二人にとって特別な思い出になります。

## 3. カップルにおすすめのビーチ

### 🏖️ 砂山ビーチ：アーチ状の岩が絶景

砂山ビーチは、アーチ状の岩が特徴的な絶景ビーチ。人が少なく、二人だけの静かな時間を過ごせます。

### 🏝️ 長間浜ビーチ：プライベート感抜群

長間浜ビーチは、来間島にある静かなビーチ。プライベート感があり、二人だけの時間を楽しめます。

### 🌊 与那覇前浜ビーチ：白い砂浜が美しい

「東洋一美しいビーチ」と称される与那覇前浜ビーチ。白い砂浜と透明度抜群の海が広がり、ロマンチックな雰囲気です。

## 4. カップル向けアクティビティ

### 🌅 サンセットSUP

宮古島の美しい夕日を眺めながらSUP体験。ロマンチックな夕日と海の上での特別な時間は、一生の思い出になります。

### 🐢 ウミガメシュノーケル

透明度抜群の海で、ウミガメと一緒に泳ぐ体験。二人で感動的な思い出を作れます。

### ⭐ 星空観察

宮古島は星空が美しいことで有名。ホテルのビーチや展望台で、満天の星空を二人で眺めましょう。

## 5. ロマンチックなグルメスポット

### 🍽️ シギラリゾート内レストラン

海を眺めながら、宮古牛や新鮮な海の幸を堪能できるレストラン。ロマンチックなディナーに最適です。

### 🍣 島寿司

新鮮な島寿司で、宮古島の海の幸を堪能。記念日ディナーにもおすすめです。

### ☕ 海カフェ

海を眺めながら、おしゃれな海カフェでランチやカフェタイム。パンケーキやエッグベネディクトが人気です。

## 6. カップル旅行の注意点

⚠️ **予約は早めに**：人気のレストランやアクティビティは、早めの予約がおすすめです。  
⚠️ **紫外線対策は万全に**：宮古島の紫外線は非常に強いため、日焼け止めをこまめに塗り直しましょう。  
⚠️ **水分補給をこまめに**：熱中症対策として、こまめな水分補給を心がけましょう。

## 7. まとめ

宮古島は、カップルで過ごすのに最適なロマンチックリゾート。絶景スポット、ロマンチックなアクティビティ、美味しいグルメなど、二人だけの特別な時間を満喫しましょう。記念日やハネムーンにぴったりの宮古島で、一生の思い出を作りましょう。`,
  },
  {
    id: "miyakojima-gourmet-complete-guide",
    slug: "miyakojima-gourmet-complete-guide",
    title: "宮古島グルメ完全ガイド｜絶対食べたい名物＆おすすめレストラン",
    excerpt:
      "宮古島の絶品グルメを完全網羅！宮古そば、宮古牛、南国スイーツなど、初めての宮古島でも迷わない定番グルメから、ランチ・ディナー・カフェのおすすめスポットまで徹底解説。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-03-30",
    category: "グルメ",
    tags: ["宮古島", "グルメ", "おすすめ", "ランチ", "ディナー", "カフェ", "宮古そば", "郷土料理"],
    image: "/miyakojima-miyako-soba.jpg",
    readTime: 11,
    content: `宮古島には、透明度抜群の海だけでなく、絶品グルメも豊富です。宮古そば、宮古牛、南国スイーツなど、宮古島ならではの味覚を楽しめます。地元で人気の食堂から、おしゃれなカフェ、記念日ディナーまで、シーン別におすすめのグルメスポットをご紹介します。

## 1. 宮古島の絶対食べたい名物グルメ

### 🍜 宮古そば

宮古そばは、宮古島を代表する郷土料理。あっさりとしたスープと手打ち麺が特徴で、豚肉やかまぼこがトッピングされています。沖縄そばとは異なる独特の味わいが魅力です。

**おすすめ店**：丸吉食堂、古謝そば屋、すむばり食堂

### 🥩 宮古牛

宮古牛は、宮古島で育てられたブランド牛。柔らかくジューシーな肉質が特徴で、ステーキや焼肉で楽しめます。記念日ディナーにもおすすめです。

**おすすめ店**：焼肉 琉宮、シギラリゾート内レストラン

### 🍹 南国スイーツ

宮古島は、マンゴー、パッションフルーツ、ドラゴンフルーツなど、南国フルーツが豊富。フルーツパフェやトロピカルスムージーは、暑い日にぴったりです。

**おすすめ店**：カフェ楽園の果実、雪塩ミュージアム（雪塩ソフトクリーム）

### 🍚 島寿司

新鮮な島の魚を使った島寿司は、宮古島の海の幸を堪能できる一品。地元で人気の寿司店で、新鮮なネタを楽しめます。

**おすすめ店**：すし一、鮨 かねしろ

## 2. シーン別おすすめグルメスポット

### 🍔 ランチにおすすめ

**ダグズバーガー**  
地元で人気のハンバーガーショップ。ボリューム満点のハンバーガーは、子どもも大人も大満足です。

**宮古そば専門店**  
丸吉食堂、古謝そば屋、すむばり食堂など、地元で人気の宮古そば専門店。あっさりとしたスープと手打ち麺が絶品です。

**海カフェ**  
海を眺めながら、おしゃれな海カフェでランチ。パンケーキやエッグベネディクトが人気です。

### 🍽️ ディナーにおすすめ

**焼肉 琉宮**  
宮古牛を堪能できる焼肉店。柔らかくジューシーな肉質が特徴で、記念日ディナーにもおすすめです。

**島寿司**  
新鮮な島の魚を使った島寿司で、宮古島の海の幸を堪能。地元で人気の寿司店で、新鮮なネタを楽しめます。

**シギラリゾート内レストラン**  
海を眺めながら、宮古牛や新鮮な海の幸を堪能できるレストラン。ロマンチックなディナーに最適です。

### ☕ カフェにおすすめ

**島カフェとぅんからや**  
海を眺めながらのんびりできるカフェ。パンケーキやエッグベネディクトが人気です。

**カフェ楽園の果実**  
南国フルーツをたっぷり使ったスイーツが人気のカフェ。マンゴーパフェやトロピカルスムージーは、暑い日にぴったりです。

**パン屋 モンテドール**  
焼きたてパンが人気のベーカリーカフェ。クロワッサンやサンドイッチが絶品です。

## 3. 宮古島の郷土料理

### 🍛 島カレー

宮古島の島野菜や宮古牛を使った島カレー。スパイシーなカレーが体を温めてくれます。

### 🐟 魚の煮付け

新鮮な島の魚を使った煮付け。地元の食堂で、家庭的な味を楽しめます。

### 🍢 ゴーヤチャンプルー

沖縄の定番料理、ゴーヤチャンプルー。ゴーヤの苦味と豚肉の旨味が絶妙です。

## 4. 宮古島のお土産グルメ

### 🧂 雪塩

宮古島の特産品「雪塩」。サラサラとした食感が特徴で、料理やスイーツに使えます。雪塩ソフトクリームも絶品です。

### 🥭 マンゴー製品

宮古島産のマンゴーを使ったジャムやドライフルーツ。お土産に最適です。

### 🍜 宮古そば

宮古そばの乾麺やスープは、お土産に人気。自宅で宮古島の味を楽しめます。

### 🍶 泡盛

宮古島の泡盛は、お酒好きの方へのお土産に最適。地元の酒造所で購入できます。

## 5. グルメ旅行の注意点

⚠️ **予約は早めに**：人気のレストランは、早めの予約がおすすめです。  
⚠️ **営業時間を確認**：一部の店舗は、営業時間が短い場合があります。事前に確認しましょう。  
⚠️ **定休日を確認**：定休日がある店舗もあるため、事前に確認しましょう。

## 6. よくある質問（FAQ）

**Q. 宮古そばと沖縄そばの違いは？**  
A. 宮古そばは、沖縄そばよりもあっさりとしたスープが特徴です。麺も細めで、独特の食感があります。

**Q. 宮古牛はどこで食べられる？**  
A. 焼肉 琉宮、シギラリゾート内レストランなど、宮古牛を提供する店舗で楽しめます。

**Q. 雪塩ソフトクリームはどこで食べられる？**  
A. 雪塩ミュージアムで食べられます。宮古島の特産品「雪塩」を使ったソフトクリームは絶品です。

**Q. お土産におすすめのグルメは？**  
A. 雪塩、マンゴー製品、宮古そば、泡盛などがお土産に人気です。

## 7. まとめ

宮古島には、絶品グルメが豊富。宮古そば、宮古牛、南国スイーツなど、宮古島ならではの味覚を楽しみましょう。地元で人気の食堂から、おしゃれなカフェ、記念日ディナーまで、シーン別におすすめのグルメスポットを訪れて、宮古島の美味しい旅を満喫してください。`,
  },
  {
    id: "miyakojima-repeater-deep-guide",
    slug: "miyakojima-repeater-deep-guide",
    title: "リピーター向け宮古島ディープガイド｜通なスポット＆体験まとめ",
    excerpt:
      "2回目以降の宮古島旅行で行きたい、穴場ビーチ、ディープな体験、ローカルグルメを完全網羅。定番スポットは卒業して、もっとディープな宮古島を楽しみたい方へ。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-04-05",
    category: "宮古島情報",
    tags: ["宮古島", "リピーター", "穴場", "観光スポット", "アクティビティ", "ディープ", "体験"],
    image: "/miyakojima-hidden-beach-coral.jpg",
    readTime: 14,
    content: `2回目以降の宮古島旅行では、定番スポットを超えたディープな体験がおすすめです。ヤビジ（八重干瀬）でのシュノーケル、長間浜ビーチなどの穴場、ナイトハンター、上級者向けダイビング、島一周サイクリングなど、リピーターだからこそ楽しめる宮古島の魅力をご紹介します。

## 1. リピーター向け穴場ビーチ

### 🏖️ 長間浜ビーチ

来間島にある静かなビーチ。人が少なく、プライベート感があります。透明度抜群の海で、のんびりと過ごせます。

### 🏝️ 吉野海岸

シュノーケルスポットとして人気の吉野海岸。カラフルな熱帯魚やサンゴ礁を間近で観察できます。波が穏やかで、初心者にも最適です。

### 🌊 池間ブロック

池間島の北端にある穴場スポット。ゴツゴツとした岩場が特徴で、波が高い日は迫力満点です。

## 2. ディープな体験

### 🌙 【アマゾン帰りの男と行く】本格ナイトツアー

夜の森を探検し、生き物を探す親子体験。本格的な野生の世界を体験できるプランです。

### 🤿 上級者向けダイビング

宮古島には、上級者向けのダイビングスポットが豊富。魔王の宮殿、通り池など、洞窟ダイビングが楽しめます。

### 🚴 島一周サイクリング

宮古島を自転車で一周するサイクリング。約100kmのコースで、島の自然を満喫できます。

### 🌅 サンライズSUP

早朝の静かな海で、サンライズを眺めながらSUP体験。朝日と海の上での特別な時間は、一生の思い出になります。

## 3. ローカルグルメ

### 🍜 地元の食堂

観光客が少ない地元の食堂で、家庭的な味を楽しめます。宮古そばや定食が人気です。

### 🍛 島カレー

宮古島の島野菜や宮古牛を使った島カレー。スパイシーなカレーが体を温めてくれます。

### 🍰 隠れ家カフェ

観光客が少ない隠れ家カフェで、のんびりとカフェタイム。地元の人に愛される穴場カフェを探してみましょう。

## 4. ヤビジ（八重干瀬）シュノーケル

宮古島の北方に広がる八重干瀬（やびじ）は、日本最大級のサンゴ礁群。透明度抜群の海で、シュノーケルやダイビングを楽しめます。

**ツアー**：ボートで約30〜50分、シュノーケリング・ダイビング体験  
**ベストシーズン**：3〜10月（海が穏やかで透明度が高い）

## 5. 離島巡り

### 🏝️ 池間島

宮古島の北に位置する池間島。池間大橋を渡ってアクセスでき、静かな島でのんびりと過ごせます。

### 🏝️ 来間島

宮古島の南西に位置する来間島。来間大橋を渡ってアクセスでき、長間浜ビーチや竜宮城展望台が人気です。

### 🏝️ 伊良部島・下地島

宮古島の西に位置する伊良部島・下地島。伊良部大橋を渡ってアクセスでき、17ENDや渡口の浜ビーチが人気です。

## 6. 文化・歴史体験

### 🏛️ 宮古島市総合博物館

宮古島の歴史や文化を学べる博物館。琉球王国時代の遺物や、宮古島の自然、伝統工芸品などが展示されています。

### 🪦 人頭税石

江戸時代の人頭税制度を象徴する石碑。歴史好き必見の文化財です。

### ⛩️ 宮古神社

宮古島最古の神社。初詣や例大祭など、伝統行事が行われます。

## 7. リピーター向けアクティビティ

### 🌅 サンライズSUP

早朝の静かな海で、サンライズを眺めながらSUP体験。朝日と海の上での特別な時間は、一生の思い出になります。

###     divers (divers)

魔王の宮殿、通り池など、洞窟ダイビングが楽しめます。上級者向けのダイビングスポットです。

### 🚴 島一周サイクリング

宮古島を自転車で一周するサイクリング。約100kmのコースで、島の自然を満喫できます。

## 8. リピーター旅行の注意点

⚠️ **予約は早めに**：人気のアクティビティは、早めの予約がおすすめです。  
⚠️ **紫外線対策は万全に**：宮古島の紫外線は非常に強いため、日焼け止めをこまめ塗り直しましょう。  
⚠️ **水分補給をこまめに**：熱中症対策として、こまめな水分補給を心がけましょう。

## 9. よくある質問（FAQ）

**Q. ヤビジ（八重干瀬）には上陸できる？**  
A. 干潮時にはリーフが海面上に現れますが、基本的にはボートからのシュノーケルやダイビングが中心です。

**Q. 【アマゾン帰りの男と行く】本格ナイトツアーは子どもでも参加できる？**  
A. はい、1歳から参加できます。親子で本格的な野生体験ができるプランです。

**Q. 島一周サイクリングの所要時間は？**  
A. 約100kmのコースで、6〜8時間程度かかります。体力に自信がある方向けです。

**Q. 洞窟ダイビングは初心者でも参加できる？**  
A. 洞窟ダイビングは上級者向けです。ダイビングライセンスと経験が必要です。

## 10. まとめ

2回目以降の宮古島旅行では、定番スポットを超えたディープな体験がおすすめです。穴場ビーチ、ディープな体験、ローカルグルメなど、リピーターだからこそ楽しめる宮古島の魅力を満喫しましょう。`,
  },
  {
    id: "miyakojima-beginner-snorkeling-guide",
    slug: "miyakojima-beginner-snorkeling-guide",
    title: "初心者でも安心！宮古島シュノーケルスポットまとめ",
    excerpt:
      "初めてのシュノーケルでも安心して楽しめる宮古島。新城海岸、シギラビーチ、吉野海岸など、波が穏やかで遠浅のビーチが多く、初心者や子連れファミリーにも最適です。ツアーに参加すれば、器材レンタルやガイドのサポートも受けられ、より安全に楽しめます。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-04-10",
    category: "宮古島情報",
    tags: ["宮古島", "シュノーケル", "初心者", "安全", "スポット", "ビーチ", "海亀"],
    image: "/miyakojima-beginner-snorkeling.jpg",
    readTime: 10,
    content: `初めてのシュノーケルでも安心して楽しめる宮古島。新城海岸、シギラビーチ、吉野海岸など、波が穏やかで遠浅のビーチが多く、初心者や子連れファミリーにも最適です。ツアーに参加すれば、器材レンタルやガイドのサポートも受けられ、より安全に楽しめます。

## 1. 初心者におすすめのシュノーケルスポット

### 🏖️ 新城海岸

新城海岸は、遠浅で波が穏やかなビーチ。足がつく浅瀬でシュノーケルができるため、小さなお子さまでも安心です。カラフルな熱帯魚が多く、初心者にも最適です。

**特徴**：遠浅、波が穏やか、熱帯魚が多い  
**設備**：シャワー、トイレ、駐車場あり

### 🏝️ シギラビーチ

**特徴**：ウミガメに会える、波が穏やか、初心者向け  
**設備**：シャワー、トイレ、駐車場あり

### 🌊 吉野海岸

吉野海岸は、シュノーケルスポットとして人気のビーチ。カラフルな熱帯魚やサンゴ礁を間近で観察できます。波が穏やかで、初心者にも最適です。

**特徴**：サンゴ礁が豊富、熱帯魚が多い、初心者向け  
**設備**：シャワー、トイレ、駐車場あり

## 2. シュノーケルツアーの選び方

### 🐢 ウミガメシュノーケルツアー

ウミガメと一緒に泳ぐ体験ができるツアー。透明度抜群の海で、ウミガメと一緒に記念撮影できます。初心者や子連れファミリーにも最適です。

**特徴**：少人数制、器材レンタル込み、写真・動画付き  
**料金**：6,500円〜

### ✨ VIP貸切シュノーケルツアー

ご家族やグループだけで貸切の特別プラン。プライベート感を重視、柔軟な時間調整も可能です。

**特徴**：完全貸切、写真・動画サービス、ウエットスーツ無料  
**料金**：6,500円〜（グループ単位の追加料金あり）

## 3. シュノーケルの持ち物

✅ **水着・ラッシュガード**：紫外線対策に必須  
✅ **マリンシューズ**：岩場やサンゴから足を守る  
✅ **日焼け止め・帽子・サングラス**：紫外線は強いため必須  
✅ **防水ケース**：スマホやカメラを海で使う際に必須  
✅ **タオル・着替え**：シュノーケル後に必要  
✅ **飲み物・軽食**：熱中症対策として持参

## 4. シュノーケルの安全対策

⚠️ **ライフジャケット着用**：泳ぎが苦手な方は、必ずライフジャケットを着用しましょう。  
⚠️ **無理をしない**：体調が悪い場合は、無理をせず休憩しましょう。  
⚠️ **サンゴに触れない**：サンゴは非常にデリケートです。触れないよう注意しましょう。  
⚠️ **潮の流れに注意**：潮の流れが速い場所もあるため、注意が必要です。  
⚠️ **ガイドの指示に従う**：ツアーに参加する場合は、ガイドの指示に従いましょう。

## 5. シュノーケルのコツ

### 🤿 呼吸のコツ

シュノーケルを使った呼吸は、最初は慣れないかもしれません。ゆっくりと深呼吸を繰り返し、リラックスして呼吸しましょう。

### 🏊 泳ぎ方のコツ

フィンを使って、ゆっくりとキックしましょう。急いで泳ぐ必要はありません。のんびりと海の中を楽しみましょう。

### 📸 撮影のコツ

防水カメラやGoProを使って、海の中の様子を撮影しましょう。ウミガメや熱帯魚と一緒に記念撮影できます。

## 6. よくある質問（FAQ）

**Q. 泳ぎが苦手でもシュノーケルできる？**  
A. はい、ライフジャケットを着用すれば、泳ぎが苦手な方でも安心してシュノーケルを楽しめます。

**Q. 子どもでもシュノーケルできる？**  
A. はい、5歳以上であれば多くのシュノーケルツアーに参加できます。ライフジャケットを着用すれば、小さなお子さまでも安心です。

**Q. シュノーケルセットはレンタルできる？**  
A. はい、多くのビーチやツアー会社でシュノーケルセットをレンタルできます。海亀兄弟のツアーでも、器材を無料で提供しています。

**Q. ウミガメに会える確率は？**  
A. シギラビーチや海亀兄弟のツアーでは、高確率でウミガメに会えます。ただし、野生動物のため、必ず会えるとは限りません。

**Q. シュノーケル中に注意することは？**  
A. サンゴを踏まない、触らない、潮の流れに注意、無理をしない、ガイドの指示に従うことが重要です。

## 7. まとめ

初めてのシュノーケルでも安心して楽しめる宮古島。新城海岸、シギラビーチ、吉野海岸など、波が穏やかで遠浅のビーチが多く、初心者や子連れファミリーにも最適です。ツアーに参加すれば、器材レンタルやガイドのサポートも受けられ、より安全に楽しめます。宮古島の透明度抜群の海で、シュノーケルを満喫しましょう。`,
  },
  {
    id: "miyakojima-rental-car-beginner-guide",
    slug: "miyakojima-rental-car-beginner-guide",
    title: "レンタカー初心者ガイド｜宮古島ドライブ完全マニュアル",
    excerpt:
      "初めての宮古島レンタカー旅行でも安心！予約方法、運転のコツ、絶景ドライブコース、交通ルール、ガソリンスタンド情報まで完全網羅。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-04-15",
    category: "宮古島情報",
    tags: ["宮古島", "レンタカー", "ドライブ", "初心者", "観光スポット", "運転", "交通ルール"],
    image: "/miyakojima-rental-car-drive.jpg",
    readTime: 12,
    content: `宮古島観光にはレンタカーが必須です。公共交通機関が限られているため、自由に島内を移動するにはレンタカーが最適。予約方法、運転のコツ、絶景ドライブコース、交通ルール、ガソリンスタンド情報など、初めてのレンタカー旅行でも安心して楽しめる情報を完全網羅しました。

## 1. レンタカーの予約方法

### 📱 オンライン予約がおすすめ

レンタカーは、オンラインで事前予約するのがおすすめです。繁忙期（7〜9月、GW、年末年始）は、レンタカーが満車になることが多いため、早めの予約が必要です。

**おすすめサイト**：楽天トラベル、じゃらん、各レンタカー会社の公式サイト

### 🚗 車種の選び方

- **軽自動車**：1〜2人旅行、燃費が良い
- **コンパクトカー**：2〜4人旅行、運転しやすい
- **ミニバン**：4人以上のファミリー旅行、荷物が多い場合

### 💰 料金の目安

- **軽自動車**：3,000円〜5,000円/日
- **コンパクトカー**：4,000円〜6,000円/日
- **ミニバン**：6,000円〜10,000円/日

## 2. レンタカーの受取・返却

### 🛬 空港での受取

宮古空港または下地島空港に到着後、レンタカー会社の送迎バスで営業所に移動し、車を受け取ります。

**所要時間**：約10〜15分

### 🛫 空港での返却

レンタカーを返却する際は、ガソリンを満タンにして返却します。空港近くのガソリンスタンドで給油しましょう。

**注意**：返却時間に遅れないよう、余裕を持って返却しましょう。

## 3. 宮古島の交通ルール

### 🚦 制限速度

- **一般道**：40〜50km/h
- **市街地**：30〜40km/h

宮古島の道路は、制限速度が低めに設定されています。安全運転を心がけましょう。

### 🚗 運転のコツ

- **道路が狭い**：宮古島の道路は、狭い場所もあります。対向車に注意しましょう。
- **信号が少ない**：宮古島は信号が少ないため、一時停止や優先道路に注意しましょう。
- **動物に注意**：夜間は、ヤシガニやカニが道路を横断することがあります。注意しましょう。

### ⚠️ 注意点

- **飲酒運転は厳禁**：飲酒運転は絶対にやめましょう。
- **シートベルト着用**：全席シートベルトを着用しましょう。
- **スマホ操作禁止**：運転中のスマホ操作は禁止です。

## 4. ガソリンスタンド情報

### ⛽ 営業時間に注意

宮古島のガソリンスタンドは、夜間や日曜日に閉まっている場合があります。給油は早めに済ませましょう。

**営業時間**：7:00〜20:00（店舗により異なる）

### 📍 主要ガソリンスタンド

- **平良市街地**：複数のガソリンスタンドあり
- **空港周辺**：宮古空港・下地島空港周辺にガソリンスタンドあり

## 5. 絶景ドライブコース

### 🌉 伊良部大橋

全長3,540mの日本一長い無料の橋。両側にエメラルドグリーンの海が広がる絶景ロードは、宮古島観光のハイライトです。

### 🏝️ 来間大橋

全長1,690mの橋。来間島へのアクセスに便利で、橋の上からの眺めも絶景です。

### 🌊 池間大橋

全長1,425mの橋。池間島へのアクセスに便利で、橋の上からの眺めも絶景です。

### 🌅 東平安名崎

宮古島の最東端にある絶景スポット。360度の絶景パノラマが広がり、灯台からの眺めは圧巻です。

## 6. ドライブの注意点

⚠️ **カーナビ・スマホ地図の事前ダウンロード推奨**：宮古島は電波が弱いエリアもあるため、オフライン地図をダウンロードしておくと安心です。

⚠️ **ガソリンスタンドの営業時間に注意**：宮古島のガソリンスタンドは、夜間や日曜日に閉まっている場合があります。給油は早めに済ませましょう。

⚠️ **運転マナー**：宮古島は道路が狭い場所もあるため、安全運転を心がけましょう。

⚠️ **駐車場の確認**：観光スポットによっては、駐車場が限られている場合があります。事前に確認しましょう。

## 7. よくある質問（FAQ）

**Q. レンタカーは事前予約が必要？**  
A. はい、特に繁忙期（7〜9月、GW、年末年始）は、レンタカーが満車になることが多いため、早めの予約が必要です。

**Q. 宮古島の道路は運転しやすい？**  
A. 宮古島の道路は、比較的運転しやすいですが、狭い場所もあります。安全運転を心がけましょう。

**Q. ガソリンスタンドは24時間営業？**  
A. いいえ、宮古島のガソリンスタンドは、夜間や日曜日に閉まっている場合があります。給油は早めに済ませましょう。

**Q. カーナビは必要？**  
A. はい、カーナビまたはスマホの地図アプリがあると便利です。オフライン地図をダウンロードしておくと安心です。

**Q. 駐車場の料金は？**  
A. 多くの観光スポットでは、無料の駐車場がありますが、一部有料の場合もあります。事前に確認しましょう。

## 8. まとめ

宮古島観光にはレンタカーが必須です。予約方法、運転のコツ、絶景ドライブコース、交通ルール、ガソリンスタンド情報など、初めてのレンタカー旅行でも安心して楽しめる情報を完全網羅しました。レンタカーで自由に島内を移動し、宮古島の絶景を満喫しましょう。`,
  },
  {
    id: "miyakojima-hotel-accommodation-guide",
    slug: "miyakojima-hotel-accommodation-guide",
    title: "宮古島のおすすめホテル＆宿泊エリア徹底比較",
    excerpt:
      "初めての宮古島でも迷わない！市街地、シギラリゾート、前浜・来間島、伊良部島の4大エリア別に、高級リゾート、コスパ重視、子連れファミリー向けホテルを徹底比較。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-04-20",
    category: "宮古島情報",
    tags: ["宮古島", "ホテル", "宿泊", "おすすめ", "エリア", "高級リゾート", "コスパ", "子連れ"],
    image: "/miyakojima-hotel-resort-pool.jpg",
    readTime: 15,
    content: `宮古島のホテル選びは、旅行の満足度を大きく左右します。市街地は飲食店やショッピングに便利、シギラリゾートは高級リゾート体験、前浜・来間島は絶景ビーチが目の前、伊良部島は静かでプライベート感があります。旅行スタイルに合わせて、最適なエリアとホテルを選びましょう。

## 1. 宮古島の4大宿泊エリア

### 🏙️ 市街地（平良）

**特徴**：飲食店やショッピングに便利、空港から近い  
**おすすめ**：初めての宮古島、コスパ重視、ビジネス利用

市街地は、飲食店やコンビニ、スーパーが充実しており、食事や買い物に便利です。空港から近く、アクセスも良好です。

### 🏝️ シギラリゾート

**特徴**：高級リゾート体験、プール・スパ充実、ビーチが目の前  
**おすすめ**：記念日、ハネムーン、高級リゾート体験

シギラリゾートは、宮古島を代表する高級リゾートエリア。プール、スパ、レストランが充実しており、リゾート内で完結できます。

### 🌊 前浜・来間島

**特徴**：絶景ビーチが目の前、静かな環境  
**おすすめ**：ビーチリゾート、カップル、ファミリー

与那覇前浜ビーチや来間島の長間浜ビーチが目の前にあり、ビーチリゾートを満喫できます。静かな環境で、のんびりと過ごせます。

### 🌉 伊良部島・下地島

**特徴**：静かでプライベート感、絶景ビーチ、17END  
**おすすめ**：静かな環境、プライベート感、絶景

伊良部島・下地島は、静かでプライベート感のあるエリア。渡口の浜ビーチや17ENDなど、絶景スポットが近くにあります。

## 2. 高級リゾートホテル

### 🏨 シギラベイサイドスイート アラマンダ

**エリア**：シギラリゾート  
**特徴**：全室スイート、プール・スパ充実、ビーチが目の前  
**料金**：30,000円〜/泊

シギラリゾートを代表する高級ホテル。全室スイートで、プール、スパ、レストランが充実しています。

### 🏨 ザ・リッツ・カールトン沖縄

**エリア**：シギラリゾート  
**特徴**：最高級のサービス、プール・スパ充実、ビーチが目の前  
**料金**：50,000円〜/泊

最高級のサービスと施設が魅力のホテル。記念日やハネムーンに最適です。

## 3. コスパ重視ホテル

### 🏨 ホテルピースアイランド宮古島市役所通り

**エリア**：市街地  
**特徴**：市街地中心、飲食店・コンビニ近い、コスパ良好  
**料金**：5,000円〜/泊

市街地中心にあり、飲食店やコンビニが近く便利です。コスパ重視の方におすすめです。

### 🏨 ホテルアトールエメラルド宮古島

**エリア**：市街地  
**特徴**：空港から近い、飲食店・コンビニ近い、コスパ良好  
**料金**：6,000円〜/泊

空港から近く、アクセスも良好です。コスパ重視の方におすすめです。

## 4. 子連れファミリー向けホテル

### 🏨 ホテルブリーズベイマリーナ

**エリア**：シギラリゾート  
**特徴**：プール充実、キッズルームあり、ファミリー向け  
**料金**：15,000円〜/泊

プールやキッズルームが充実しており、子連れファミリーに人気です。

### 🏨 宮古島東急ホテル＆リゾーツ

**エリア**：前浜  
**特徴**：与那覇前浜ビーチが目の前、プール充実、ファミリー向け  
**料金**：20,000円〜/泊

与那覇前浜ビーチが目の前にあり、プールも充実しています。子連れファミリーに人気です。

## 5. ホテル選びのポイント

### 🏖️ ビーチリゾートを満喫したい

**おすすめエリア**：シギラリゾート、前浜・来間島、伊良部島  
**おすすめホテル**：シギラベイサイドスイート アラマンダ、宮古島東急ホテル＆リゾーツ

### 🍽️ 飲食店・ショッピングに便利

**おすすめエリア**：市街地  
**おすすめホテル**：ホテルピースアイランド宮古島市役所通り、ホテルアトールエメラルド宮古島

### 💰 コスパ重視

**おすすめエリア**：市街地  
**おすすめホテル**：ホテルピースアイランド宮古島市役所通り、ホテルアトールエメラルド宮古島

### 👨‍👩‍👧‍👦 子連れファミリー

**おすすめエリア**：シギラリゾート、前浜  
**おすすめホテル**：ホテルブリーズベイマリーナ、宮古島東急ホテル＆リゾーツ

## 6. ホテル予約の注意点

⚠️ **予約は早めに**：繁忙期（7〜9月、GW、年末年始）は、ホテルが満室になることが多いため、早めの予約が必要です。

⚠️ **キャンセルポリシーを確認**：予約前に、キャンセルポリシーを確認しましょう。

⚠️ **レンタカーの有無**：ホテルによっては、レンタカーがないと不便な場合があります。事前に確認しましょう。

## 7. よくある質問（FAQ）

**Q. 宮古島のホテルは高い？**  
A. 高級リゾートホテルは高額ですが、市街地のホテルはコスパが良いです。予算に合わせて選びましょう。

**Q. 子連れファミリーにおすすめのホテルは？**  
A. ホテルブリーズベイマリーナ、宮古島東急ホテル＆リゾーツがおすすめです。プールやキッズルームが充実しています。

**Q. ビーチが目の前のホテルは？**  
A. シギラリゾート、前浜・来間島、伊良部島のホテルは、ビーチが目の前にあります。

**Q. 市街地のホテルは便利？**  
A. はい、飲食店やコンビニが近く、食事や買い物に便利です。

**Q. ホテルの予約はいつまでにすべき？**  
A. 繁忙期（7〜9月、GW、年末年始）は、3〜6ヶ月前の予約がおすすめです。

## 8. まとめ

宮古島のホテル選びは、旅行の満足度を大きく左右します。市街地は飲食店やショッピングに便利、シギラリゾートは高級リゾート体験、前浜・来間島は絶景ビーチが目の前、伊良部島は静かでプライベート感があります。旅行スタイルに合わせて、最適なエリアとホテルを選びましょう。`,
  },
  {
    id: "miyakojima-photo-spot-instagram-guide",
    slug: "miyakojima-photo-spot-instagram-guide",
    title: "フォトスポット完全ガイド｜インスタ映えする宮古島の絶景20選",
    excerpt:
      "宮古島には、息をのむ絶景と写真映えするスポットが満載。SNSでシェアしたくなる20か所を厳選してご紹介。与那覇前浜ビーチ、伊良部大橋、東平安名崎など、カメラ好き必見のフォトジェニックスポットを完全網羅。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-04-25",
    category: "宮古島情報",
    tags: ["宮古島", "フォトスポット", "インスタ映え", "絶景", "写真", "観光", "カメラ"],
    image: "/miyakojima-photo-spot-beach.jpg",
    readTime: 16,
    content: `宮古島には、息をのむ絶景と写真映えするスポットが満載。透明度抜群の「宮古ブルー」の海、白い砂浜、絶景の橋、自然が作り出した造形美など、SNSでシェアしたくなる景色がたくさんあります。カメラ好きの旅行者、カップル、女子旅、インスタグラムで映える写真を撮りたい方に向けて、厳選した20か所のフォトスポットをご紹介します。

## 1. 宮古島がフォトジェニックな理由

宮古島が写真映えする理由は、何と言っても「宮古ブルー」と呼ばれる透明度抜群の海です。エメラルドグリーンからコバルトブルーまで、時間帯や天候によって変化する海の色は、どこを切り取っても絵になります。

また、白い砂浜、絶景の橋、自然が作り出した造形美など、フォトジェニックなスポットが豊富です。

## 2. ビーチ系フォトスポット

### 🏖️ 与那覇前浜ビーチ

「東洋一美しいビーチ」と称される与那覇前浜ビーチ。白い砂浜と透明度抜群の海が広がり、どこを切り取っても絵になります。

**撮影のコツ**：午前中の光が美しい、来間大橋を背景に撮影

### 🏝️ 砂山ビーチ

アーチ状の岩が特徴的な絶景ビーチ。岩のアーチを額縁に見立てて、海を撮影するのがおすすめです。

**撮影のコツ**：干潮時がベスト、岩のアーチを額縁に見立てて撮影

### 🌊 17END

下地島空港の北端にある絶景スポット。干潮時に現れる白い砂浜と宮古ブルーの海が織りなす景色は圧巻です。

**撮影のコツ**：干潮時がベスト、飛行機の離着陸も撮影できる

### 🏖️ 長間浜ビーチ

来間島にある静かなビーチ。人が少なく、プライベート感のある写真が撮れます。

**撮影のコツ**：夕日の時間帯がおすすめ

### 🏝️ 渡口の浜ビーチ

伊良部島にある美しいビーチ。白い砂浜と透明度抜群の海が広がり、静かな環境で撮影できます。

**撮影のコツ**：午前中の光が美しい

## 3. 橋系フォトスポット

### 🌉 伊良部大橋

全長3,540mの日本一長い無料の橋。両側にエメラルドグリーンの海が広がる絶景ロードは、宮古島観光のハイライトです。

**撮影のコツ**：橋のたもとの展望台から撮影、ドローン撮影もおすすめ

### 🌉 来間大橋

全長1,690mの橋。来間島へのアクセスに便利で、橋の上からの眺めも絶景です。

**撮影のコツ**：橋のたもとの展望台から撮影

### 🌉 池間大橋

全長1,425mの橋。池間島へのアクセスに便利で、橋の上からの眺めも絶景です。

**撮影のコツ**：橋のたもとの展望台から撮影

## 4. 絶景展望台系フォトスポット

### 🌅 東平安名崎

宮古島の最東端にある絶景スポット。360度の絶景パノラマが広がり、灯台からの眺めは圧巻です。

**撮影のコツ**：灯台に登って360度のパノラマを撮影

### 🏝️ 竜宮城展望台

来間島にある展望台。与那覇前浜ビーチや来間大橋を一望できます。

**撮影のコツ**：午前中の光が美しい

### 🌊 西平安名崎

宮古島の西端にある絶景スポット。風車が立ち並び、海と空のコントラストが美しいです。

**撮影のコツ**：夕日の時間帯がおすすめ

## 5. 自然系フォトスポット

### 🌳 イムギャーマリンガーデン

天然の入り江を利用した海浜公園。展望台からの眺めが絶景です。

**撮影のコツ**：展望台から入り江を撮影

### 🪦 通り池

下地島にある神秘的な池。2つの池が地下でつながっており、ダイビングスポットとしても有名です。

**撮影のコツ**：展望台から池を撮影

### 🌴 池間ブロック

池間島の北端にある穴場スポット。ゴツゴツとした岩場が特徴で、波が高い日は迫力満点です。

**撮影のコツ**：波が高い日がおすすめ

## 6. 文化・歴史系フォトスポット

### ⛩️ 宮古神社

宮古島最古の神社。鳥居と境内が美しく、文化的な写真が撮れます。

**撮影のコツ**：鳥居を額縁に見立てて撮影

### 🪦 人頭税石

江戸時代の人頭税制度を象徴する石碑。歴史的な写真が撮れます。

**撮影のコツ**：石碑と説明板を一緒に撮影

## 7. カフェ・グルメ系フォトスポット

### ☕ 島カフェとぅんからや

海を眺めながらのんびりできるカフェ。パンケーキやエッグベネディクトが人気です。

**撮影のコツ**：海を背景に料理を撮影

### 🍰 カフェ楽園の果実

南国フルーツをたっぷり使ったスイーツが人気のカフェ。マンゴーパフェやトロピカルスムージーが映えます。

**撮影のコツ**：自然光で料理を撮影

## 8. 撮影のコツ

### 📸 時間帯

- **午前中**：光の加減が良く、海の色が美しく映ります
- **夕方**：サンセットと組み合わせた撮影も人気です
- **干潮時**：17ENDや砂山ビーチは、干潮時がベストです

### 📱 撮影機材

- **スマホ**：手軽に撮影できる
- **一眼レフ・ミラーレス**：高画質で撮影できる
- **ドローン**：空からの絶景を撮影できる（規制エリアに注意）

### 🎨 構図

- **三分割法**：画面を縦横3分割し、交点に被写体を配置
- **額縁構図**：岩のアーチや鳥居を額縁に見立てて撮影
- **対角線構図**：橋や道路を対角線に配置

## 9. 撮影の注意点

⚠️ **ドローン飛行は要確認**：航空法や空港周辺規制により、ドローン飛行は制限されています。事前に確認しましょう。

⚠️ **私有地への立ち入り禁止**：私有地への立ち入りは禁止です。マナーを守りましょう。

⚠️ **サンゴに触れない**：サンゴは非常にデリケートです。触れないよう注意しましょう。

⚠️ **ゴミは持ち帰る**：自然を守るため、ゴミは必ず持ち帰りましょう。

## 10. まとめ

宮古島には、息をのむ絶景と写真映えするスポットが満載。透明度抜群の「宮古ブルー」の海、白い砂浜、絶景の橋、自然が作り出した造形美など、SNSでシェアしたくなる景色がたくさんあります。カメラ好きの旅行者、カップル、女子旅、インスタグラムで映える写真を撮りたい方は、ぜひこのガイドを参考に、宮古島の絶景を撮影してください。`,
  },
  {
    id: "miyakojima-coral-reef-conservation",
    slug: "miyakojima-coral-reef-conservation",
    title: "宮古島のサンゴ礁を守る｜八重干瀬（やびじ）の白化と保全活動",
    excerpt:
      "宮古島の宝であるサンゴ礁が、温暖化や人間活動の影響で危機に直面しています。日本最大級の八重干瀬を守る取り組みと、旅行者ができる環境保護アクションを解説します。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-05-01",
    category: "環境保全",
    tags: ["宮古島", "サンゴ白化", "八重干瀬", "サンゴ礁保全", "環境問題", "エコツーリズム"],
    image: "/miyakojima-coral-reef-conservation.jpg",
    readTime: 14,
    content: `宮古島の宝であるサンゴ礁が、温暖化や人間活動の影響で危機に直面しています。透明度抜群の「宮古ブルー」の海を支えるサンゴ礁は、多様な海洋生物の住処であり、漁業や観光の基盤でもあります。日本最大級のサンゴ礁群「八重干瀬（やびじ）」の現状と、地元ダイバーやNPOによる保全活動、そして旅行者一人ひとりができる環境保護アクションをご紹介します。

## 1. 宮古島のサンゴ礁の重要性

### 世界有数の多様な生態系

宮古島周辺の海には、250種以上のサンゴが生息しており、世界有数の多様性を誇ります。カラフルな熱帯魚、ウミガメ、マンタなど、多くの海洋生物がサンゴ礁を住処としています。

### 漁業・観光・防波の役割

サンゴ礁は、漁業資源の供給源であり、観光資源でもあります。また、波を和らげる防波堤の役割も果たしており、島の生活を守っています。

### 八重干瀬は国の天然記念物・名勝にも指定

宮古島の北方約5〜22kmに広がる八重干瀬（やびじ）は、日本最大級のサンゴ礁群。国の天然記念物および名勝に指定されており、その美しさと生態系の豊かさは世界的にも評価されています。

## 2. サンゴ白化とは

### 🌡️ 海水温上昇が主な原因

サンゴ白化は、海水温が30℃を超えるとストレスを受け、サンゴと共生する褐虫藻が失われることで起こります。褐虫藻は、サンゴに栄養を供給する重要な存在です。

### 🌞 強い日差しや高水温で褐虫藻が失われ白くなる

褐虫藻が失われると、サンゴは白く見えるようになります。これが「白化」と呼ばれる現象です。

### 🐠 回復する場合もあるが長期化すると死滅

白化したサンゴは、海水温が下がれば回復する場合もありますが、長期化すると死滅してしまいます。近年、地球温暖化の影響で、白化現象が頻発しています。

## 3. 八重干瀬の現状と課題

### 近年の白化被害と一部エリアでの回復

環境省のモニタリング調査によると、八重干瀬では2016年、2017年、2020年に大規模な白化現象が確認されました。一部のエリアでは回復の兆しも見られますが、依然として厳しい状況が続いています。

### 台風による破壊・堆積物による被害

台風による波浪や、陸地からの土砂流入も、サンゴ礁にダメージを与えています。特に、開発による赤土の流出は、サンゴの光合成を妨げる原因となっています。

### 環境省のモニタリング調査の結果

環境省は、八重干瀬を含む宮古島周辺のサンゴ礁を定期的にモニタリングしています。調査結果は、保全活動の指針として活用されています。

## 4. 保全活動と取り組み

### 🤝 地元ダイバーとNPOによるサンゴ移植・苗づくり

地元のダイビングショップやNPOは、サンゴの移植や苗づくりに取り組んでいます。健康なサンゴの断片を採取し、育成してから海に戻す活動が行われています。

### 🧪 環境省・研究機関による長期観測

環境省や大学などの研究機関は、サンゴ礁の長期観測を行い、白化のメカニズムや回復過程を研究しています。

### 🧹 ビーチクリーン・オニヒトデ駆除

地元住民や観光客が参加するビーチクリーン活動や、サンゴを食べるオニヒトデの駆除活動も行われています。

## 5. 旅行者ができる環境保護アクション

### ✅ サンゴを踏まない・触らない

シュノーケルやダイビング中は、サンゴを踏まない、触らないよう注意しましょう。サンゴは非常にデリケートで、一度傷つくと回復に長い時間がかかります。

### ✅ 環境に優しい日焼け止めを使う（紫外線吸収剤フリー）

一般的な日焼け止めに含まれる紫外線吸収剤は、サンゴに悪影響を与えることが分かっています。「リーフセーフ」や「紫外線吸収剤フリー」と表示された日焼け止めを使いましょう。

### ✅ ごみを持ち帰る・ビーチクリーンに参加

ビーチや海に落ちているゴミは、海洋生物やサンゴに悪影響を与えます。ゴミは必ず持ち帰り、可能であればビーチクリーン活動に参加しましょう。

### ✅ エコツアーや環境配慮型ショップを選ぶ

環境保全に取り組んでいるツアー会社やショップを選ぶことで、保全活動を支援できます。

## 6. 未来に向けての取り組み

### 子ども向け環境教育

地元の学校では、サンゴ礁の重要性や保全活動について学ぶ環境教育が行われています。未来を担う子どもたちに、海を守る意識を育てることが重要です。

### エコツーリズム拡大による保全資金確保

エコツーリズムを通じて得られる収益の一部を、保全活動に充てる取り組みが進んでいます。旅行者が環境に配慮した旅行を選ぶことで、保全活動を支援できます。

### 地域と観光業の連携によるサンゴ保護

地域住民、観光業者、行政が連携し、サンゴ礁を守る取り組みが進んでいます。持続可能な観光の実現に向けて、様々な取り組みが行われています。

## 7. よくある質問（FAQ）

**Q. 白化したサンゴは元に戻る？**  
A. 海水温が下がれば、白化したサンゴは回復する場合もあります。ただし、長期化すると死滅してしまうため、早期の対策が重要です。

**Q. オニヒトデ駆除って観光客でも参加できる？**  
A. 一部のツアー会社では、オニヒトデ駆除体験を提供しています。事前に確認してみましょう。

**Q. 環境に優しい日焼け止めはどこで買える？**  
A. 宮古島の一部のショップやオンラインで購入できます。「リーフセーフ」や「紫外線吸収剤フリー」と表示された製品を選びましょう。

**Q. エコツアーはどこで予約できる？**  
A. 環境保全に取り組んでいるツアー会社は、宮古島観光協会のウェブサイトや各ツアー会社の公式サイトで確認できます。

**Q. 子連れでも保全活動に参加できる？**  
A. はい、ビーチクリーン活動など、子どもでも参加できる活動があります。家族で環境保全に取り組むことで、子どもたちに海を守る意識を育てることができます。

## 8. まとめ

宮古ブルーの海を未来につなぐために、旅行者一人ひとりが小さな行動で大きな変化を起こせます。サンゴを踏まない、環境に優しい日焼け止めを使う、ゴミを持ち帰る、エコツアーを選ぶなど、できることから始めましょう。宮古島の美しいサンゴ礁を守り、次世代に引き継いでいくために、私たち一人ひとりができることがあります。`,
  },
  {
    id: "shimojishima-airport-2025-summer-schedule-access",
    slug: "shimojishima-airport-2025-summer-schedule-access",
    title: "下地島空港2025夏ダイヤ＆アクセス完全ガイド｜国内・国際線＆移動術",
    excerpt:
      "2025年の宮古島旅行は下地島空港が便利。羽田・神戸・那覇・仁川を結ぶ最新の夏ダイヤ情報と、市街地やホテルまでのアクセス方法を徹底解説します。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-05-05",
    category: "宮古島情報",
    tags: ["宮古島", "下地島空港", "アクセス", "夏ダイヤ", "国際線", "バス", "レンタカー"],
    image: "/shimojishima-airport-runway-ocean.jpg",
    readTime: 13,
    content: `2025年の宮古島旅行は、下地島空港がますます便利になります。2019年に旅客便の運航が再開された下地島空港は、羽田、神戸、那覇、そして韓国の仁川を結ぶ国内・国際線が発着する、リゾート感あふれる開放的な空港です。最新の2025年夏ダイヤ情報と、空港から市街地やホテルまでのアクセス方法を徹底解説します。

## 1. 下地島空港とは

### 宮古島市伊良部にある空港

下地島空港は、宮古島市の伊良部島と下地島にまたがる空港です。伊良部大橋を渡って、宮古島本島からアクセスできます。

### 2019年から旅客便再開

下地島空港は、もともとパイロット訓練用の空港でしたが、2019年3月に旅客便の運航が再開されました。以来、国内線・国際線が発着する宮古島の玄関口の一つとして、多くの旅行者に利用されています。

### リゾート感ある開放的な空港

下地島空港のターミナルは、木材を多用した温かみのあるデザインで、リゾート感あふれる開放的な雰囲気が特徴です。

## 2. 2025年夏ダイヤの国内線情報（3/30〜10/25）

### ✈️ スカイマーク

**羽田⇔下地島**：1日2往復  
**神戸⇔下地島**：1日1往復  
**那覇⇔下地島**：1日1往復

スカイマークは、下地島空港の主要な航空会社で、羽田、神戸、那覇を結んでいます。2025年夏ダイヤでは、羽田便が1日2往復と増便され、ますます便利になります。

### その他の運航

最新のダイヤ情報は、下地島空港公式サイトや各航空会社の公式サイトで確認してください。

## 3. 国際線情報

### 🌏 ジンエアー：仁川⇔下地島（週2便予定）

韓国のLCC「ジンエアー」が、仁川⇔下地島を週2便で運航予定です。韓国からのアクセスが簡単になり、国際的なリゾート地としての宮古島の魅力がさらに高まります。

### 韓国からのアクセスが簡単に

仁川空港は、韓国の主要な国際空港で、ソウル市内からアクセスしやすい立地です。韓国からの旅行者にとって、宮古島がより身近な旅行先になります。

## 4. 空港から市街地・各エリアへのアクセス

### 🚌 バス：みやこ下地島空港アクセスバス

**所要時間**：平良市街地まで約25分  
**運賃**：大人500円、子ども250円（目安）  
**運行**：フライトの到着に合わせて運行

みやこ下地島空港アクセスバスは、空港と平良市街地を結ぶ便利なバスです。フライトの到着に合わせて運行されるため、待ち時間が少なく便利です。

### 🚕 タクシー

**所要時間**：平良市街地まで約25〜30分  
**料金**：約3,000円〜4,000円（目安）

タクシーは、空港到着ロビーで待機しています。荷物が多い場合や、直接ホテルに向かいたい場合に便利です。

### 🚗 レンタカー

**受取場所**：空港周辺に複数のレンタカー営業所あり  
**所要時間**：平良市街地まで約25〜30分

レンタカーは、宮古島観光に最も便利な移動手段です。空港周辺に複数のレンタカー営業所があり、到着後すぐに借りることができます。

## 5. レンタカー・交通の注意点

### ✅ 繁忙期は予約必須（特に7〜9月）

夏の繁忙期（7〜9月）は、レンタカーが満車になることが多いため、早めの予約が必要です。

### ✅ カーナビ・スマホ地図の事前ダウンロード推奨

宮古島は電波が弱いエリアもあるため、オフライン地図をダウンロードしておくと安心です。

### ✅ ガソリンスタンドの営業時間に注意

宮古島のガソリンスタンドは、夜間や日曜日に閉まっている場合があります。給油は早めに済ませましょう。

## 6. 空港内の施設

### フードコート・お土産ショップ・カフェ

下地島空港のターミナルには、フードコートやお土産ショップ、カフェがあります。宮古島の特産品や軽食を楽しめます。

### 無料Wi-Fi・コインロッカー

空港内では、無料Wi-Fiが利用できます。また、コインロッカーもあるため、荷物を預けて観光することも可能です。

### ラウンジサービス（国内線・国際線）

一部の航空会社では、ラウンジサービスを提供しています。出発前にゆっくりと過ごせます。

## 7. よくある質問（FAQ）

**Q. 宮古島市街地までのバス運賃と所要時間は？**  
A. 大人500円、子ども250円（目安）で、所要時間は約25分です。フライトの到着に合わせて運行されます。

**Q. タクシーは空港ですぐつかまる？**  
A. はい、空港到着ロビーでタクシーが待機しています。ただし、繁忙期は混雑することがあるため、事前予約もおすすめです。

**Q. レンタカーはどこで受け取れる？**  
A. 空港周辺に複数のレンタカー営業所があります。到着後、営業所の送迎バスで移動し、車を受け取ります。

**Q. 空港で両替やSIM購入はできる？**  
A. 国際線ターミナルでは、両替サービスがあります。SIMカードは、一部のショップで購入できる場合がありますが、事前にオンラインで購入しておくと安心です。

**Q. 伊良部大橋は通行料がかかる？**  
A. いいえ、伊良部大橋は無料で通行できます。全長3,540mの日本一長い無料の橋で、絶景ドライブを楽しめます。

## 8. まとめ

2025年も便利さが増す下地島空港。羽田、神戸、那覇、仁川を結ぶ最新のダイヤとアクセス情報をチェックして、快適な宮古島旅行をスタートしましょう。リゾート感あふれる開放的な空港で、宮古島の旅が始まります。`,
  },
  {
    id: "17end-complete-guide",
    slug: "17end-complete-guide",
    title: "17END完全攻略｜干潮タイミング・駐車・歩き方・マナー",
    excerpt:
      "下地島空港の北端にある絶景「17END」。干潮のタイミングで現れる白い砂浜、安全なアクセス方法、駐車場情報、マナーまで完全網羅。初めてでも迷わない完全ガイド。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-05-10",
    category: "宮古島情報",
    tags: ["宮古島", "17END", "下地島空港", "干潮", "駐車場", "アクセス"],
    image: "/17end-low-tide-beach.jpg",
    readTime: 12,
    content: `下地島空港の北端にある絶景スポット「17END」。干潮のタイミングで現れる白い砂浜と、透明度抜群の宮古ブルーの海が織りなす景色は、宮古島を訪れたら必ず見たい絶景の一つです。また、滑走路に隣接しているため、飛行機の離着陸を間近で見られる撮影スポットとしても人気です。干潮のタイミングの調べ方、安全なアクセス方法、駐車場情報、マナーまで完全網羅した初心者向けガイドをお届けします。

## 1. 17ENDとは

### 下地島空港の滑走路北端

「17END」とは、下地島空港の滑走路17（北向き）の端（END）を意味します。滑走路の北端に位置し、伊良部島と下地島を結ぶ絶景スポットです。

### 干潮時に現れる白いビーチと宮古ブルーの海

干潮時には、滑走路の先に白い砂浜が現れ、エメラルドグリーンからコバルトブルーへと変化する宮古ブルーの海が広がります。その美しさは、まさに絶景です。

### 滑走路に隣接し、飛行機撮影スポットとしても有名

17ENDは、滑走路に隣接しているため、飛行機の離着陸を間近で見られる撮影スポットとしても人気です。特に、飛行機が海の上を飛ぶ瞬間は、圧巻の光景です。

## 2. 干潮のタイミングをチェック

### 🌊 干潮時刻の目安：宮古島の潮位表を確認

17ENDを訪れる際は、干潮のタイミングを事前にチェックしましょう。気象庁のウェブサイトや、宮古島観光協会のサイトで、宮古島の潮位表を確認できます。

### 📸 干潮前後1〜2時間がベスト

干潮の前後1〜2時間が、白い砂浜が最も広がるベストタイミングです。この時間帯を狙って訪れましょう。

### ⚠️ 大潮の干潮は特に砂浜が広がる

大潮の干潮時は、特に砂浜が広がり、絶景を楽しめます。大潮のタイミングも合わせてチェックしましょう。

## 3. アクセス方法

### 宮古島市街地→伊良部大橋経由→下地島空港北端へ車で約40分

17ENDへは、宮古島市街地から伊良部大橋を経由して、車で約40分でアクセスできます。伊良部大橋を渡り、下地島空港の北端を目指しましょう。

### 公共交通なし、レンタカー・タクシー・自転車が基本

17ENDへの公共交通機関はありません。レンタカー、タクシー、または自転車でのアクセスが基本です。

### 伊良部大橋のドライブも絶景

伊良部大橋は、全長3,540mの日本一長い無料の橋。両側にエメラルドグリーンの海が広がる絶景ロードで、ドライブ自体も楽しめます。

## 4. 駐車場情報

### 🚗 無料駐車スペースあり（約20台）

17ENDの近くには、無料の駐車スペースがあります。約20台分のスペースがありますが、繁忙期は満車になることもあります。

### 🅿️ 繁忙期は満車になりやすい

夏の繁忙期（7〜9月）や、干潮のタイミングが良い日は、駐車場が満車になることがあります。早めの到着がおすすめです。

### ⚠️ 駐車禁止エリアに注意

駐車場以外のエリアは、駐車禁止です。路上駐車は、他の車の妨げになるため、絶対にやめましょう。

## 5. 安全・マナー

### ✅ サンゴや干潟を踏まない

17ENDの海岸には、サンゴや干潟があります。サンゴは非常にデリケートで、踏むと傷つきます。サンゴや干潟を踏まないよう注意しましょう。

### ✅ ゴミは持ち帰る

自然を守るため、ゴミは必ず持ち帰りましょう。ゴミ箱はありませんので、持参したゴミ袋に入れて持ち帰ってください。

### ✅ 空港敷地内への立ち入り禁止

17ENDは、下地島空港の滑走路に隣接していますが、空港敷地内への立ち入りは禁止です。フェンスの外から景色を楽しみましょう。

### ✅ ドローン飛行は航空法・空港周辺規制を要確認

17ENDは空港に隣接しているため、ドローンの飛行は航空法や空港周辺規制により制限されています。ドローンを飛ばす前に、必ず規制を確認しましょう。

### ⚠️ トイレ・売店なし、事前準備必須

17ENDには、トイレや売店がありません。事前にトイレを済ませ、飲み物や軽食を持参しましょう。

## 6. 持ち物チェックリスト

### ✅ サングラス・帽子・日焼け止め

宮古島の紫外線は非常に強いため、サングラス、帽子、日焼け止めは必須です。

### ✅ 飲み物・軽食

17ENDには、売店がありません。飲み物や軽食を持参しましょう。

### ✅ 撮影機材（カメラ・スマホ・防水ケース）

絶景を撮影するため、カメラやスマホを持参しましょう。防水ケースがあると、海辺でも安心して撮影できます。

## 7. よくある質問（FAQ）

**Q. 何時ごろ行くのがベスト？**  
A. 干潮の前後1〜2時間がベストです。気象庁のウェブサイトや、宮古島観光協会のサイトで、宮古島の潮位表を確認しましょう。

**Q. 駐車場はいつも空いている？**  
A. 繁忙期や干潮のタイミングが良い日は、駐車場が満車になることがあります。早めの到着がおすすめです。

**Q. トイレや売店はある？**  
A. いいえ、17ENDにはトイレや売店がありません。事前にトイレを済ませ、飲み物や軽食を持参しましょう。

**Q. ドローン撮影はできる？**  
A. 17ENDは空港に隣接しているため、ドローンの飛行は航空法や空港周辺規制により制限されています。ドローンを飛ばす前に、必ず規制を確認しましょう。

**Q. 子連れでも楽しめる？**  
A. はい、干潮時には浅瀬で遊べるため、子連れでも楽しめます。ただし、トイレがないため、事前にトイレを済ませておきましょう。

**Q. 泳げる？**  
A. 17ENDは、泳ぐよりも景色を楽しむスポットです。波が高い日もあるため、泳ぐ際は十分注意しましょう。

## 8. まとめ

干潮時間を味方にすれば、17ENDの絶景を最大限に楽しめます。白い砂浜と宮古ブルーの海、そして飛行機の離着陸を間近で見られる特別な体験が待っています。安全とマナーを守って、一生の思い出に残る写真を撮影しましょう。`,
  },
  {
    id: "miyakojima-cafe-tour-scenic-tropical-sweets",
    slug: "miyakojima-cafe-tour-scenic-tropical-sweets",
    title: "宮古島カフェ巡り｜絶景×南国スイーツの人気店",
    excerpt:
      "海を眺めながら南国スイーツを楽しむ贅沢な時間。宮古島の絶景カフェ、マンゴーパフェ、雪塩ソフト、パンケーキなど、インスタ映えするカフェ巡りの完全ガイド。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-05-15",
    category: "グルメ",
    tags: ["宮古島", "カフェ", "スイーツ", "絶景", "マンゴー", "パンケーキ", "インスタ映え"],
    image: "/miyakojima-cafe-ocean-view.jpg",
    readTime: 13,
    content: `宮古島のカフェ巡りは、絶景と南国スイーツを同時に楽しめる贅沢な体験です。透明度抜群の「宮古ブルー」の海を眺めながら、マンゴーパフェ、雪塩ソフトクリーム、ふわふわパンケーキなど、宮古島ならではのスイーツを堪能できます。女子旅、カップル、ファミリーにおすすめの絶景カフェを完全網羅しました。

## 1. 宮古島カフェの魅力

### 海を眺めながらのんびりできる

宮古島のカフェの最大の魅力は、海を眺めながらのんびりできること。エメラルドグリーンの海と青い空を眺めながら、ゆったりとした時間を過ごせます。

### 南国フルーツをたっぷり使ったスイーツ

宮古島は、マンゴー、パッションフルーツ、ドラゴンフルーツなど、南国フルーツが豊富。新鮮なフルーツをたっぷり使ったスイーツは、暑い日にぴったりです。

### インスタ映えする空間とメニュー

おしゃれな内装、絶景のロケーション、カラフルなスイーツなど、インスタ映えする要素が満載。写真を撮りたくなるカフェばかりです。

## 2. 絶景オーシャンビューカフェ

### ☕ 島カフェとぅんからや

**エリア**：来間島  
**特徴**：海を一望できるテラス席、ふわふわパンケーキ、エッグベネディクト  
**営業時間**：8:00〜17:00  
**おすすめメニュー**：パンケーキ（1,200円）、エッグベネディクト（1,400円）

来間島にある人気カフェ。海を一望できるテラス席で、ふわふわのパンケーキやエッグベネディクトを楽しめます。朝食やブランチにおすすめです。

### 🌊 カフェ楽園の果実

**エリア**：市街地  
**特徴**：南国フルーツたっぷりのスイーツ、マンゴーパフェ、トロピカルスムージー  
**営業時間**：11:00〜18:00  
**おすすめメニュー**：マンゴーパフェ（1,500円）、トロピカルスムージー（800円）

南国フルーツをたっぷり使ったスイーツが人気のカフェ。特にマンゴーパフェは、新鮮なマンゴーがたっぷり乗った贅沢な一品です。

### 🏝️ AOSORA PARLOR（アオソラパーラー）

**エリア**：伊良部島  
**特徴**：海を眺めながらジェラート、手作りジェラート、絶景テラス  
**営業時間**：11:00〜18:00  
**おすすめメニュー**：マンゴージェラート（500円）、雪塩ジェラート（500円）

伊良部島にあるジェラート専門店。海を眺めながら、手作りジェラートを楽しめます。マンゴーや雪塩など、宮古島ならではのフレーバーが人気です。

## 3. 南国スイーツ専門店

### 🥭 マンゴーカフェ

**エリア**：市街地  
**特徴**：マンゴー専門、マンゴーパフェ、マンゴースムージー  
**営業時間**：10:00〜19:00  
**おすすめメニュー**：マンゴーパフェ（1,800円）、マンゴースムージー（900円）

マンゴー専門のカフェ。新鮮な宮古島産マンゴーをたっぷり使ったパフェやスムージーは、マンゴー好きにはたまりません。

### 🧂 雪塩ミュージアム

**エリア**：平良  
**特徴**：雪塩ソフトクリーム、雪塩スイーツ、製造工程見学  
**営業時間**：9:00〜18:00  
**おすすめメニュー**：雪塩ソフトクリーム（400円）

宮古島の特産品「雪塩」を使ったソフトクリームが絶品。塩味とミルクの甘さが絶妙にマッチした、宮古島ならではのスイーツです。

### 🍰 パティスリー モンテドール

**エリア**：市街地  
**特徴**：焼きたてパン、ケーキ、サンドイッチ  
**営業時間**：7:00〜18:00  
**おすすめメニュー**：クロワッサン（250円）、マンゴータルト（500円）

焼きたてパンとケーキが人気のベーカリーカフェ。朝食やランチにもおすすめです。

## 4. おしゃれカフェ

### ☕ カフェ タソス

**エリア**：市街地  
**特徴**：おしゃれな内装、コーヒー、軽食  
**営業時間**：9:00〜18:00  
**おすすめメニュー**：カフェラテ（500円）、サンドイッチ（800円）

おしゃれな内装が人気のカフェ。コーヒーや軽食を楽しみながら、のんびりと過ごせます。

### 🌴 カフェ ボラボラ

**エリア**：前浜  
**特徴**：海を眺めながらコーヒー、リゾート感ある空間  
**営業時間**：10:00〜18:00  
**おすすめメニュー**：カフェラテ（600円）、パンケーキ（1,200円）

与那覇前浜ビーチ近くにあるカフェ。海を眺めながら、リゾート感ある空間でコーヒーやスイーツを楽しめます。

## 5. カフェ巡りのコツ

### 🕐 午前中がおすすめ

カフェは午前中が比較的空いています。朝食やブランチを楽しむなら、午前中の訪問がおすすめです。

### 📸 インスタ映えする写真を撮る

絶景のロケーション、カラフルなスイーツなど、インスタ映えする要素が満載。写真を撮りながら、カフェ巡りを楽しみましょう。

### 🚗 レンタカーで効率よく巡る

宮古島のカフェは、市街地から離れた場所にあることも多いため、レンタカーでの移動が便利です。

## 6. カフェ巡りの注意点

⚠️ **営業時間を確認**：一部のカフェは、営業時間が短い場合があります。事前に確認しましょう。

⚠️ **定休日を確認**：定休日がある店舗もあるため、事前に確認しましょう。

⚠️ **予約がおすすめ**：人気のカフェは、混雑することがあります。事前予約がおすすめです。

## 7. よくある質問（FAQ）

**Q. 宮古島のカフェは高い？**  
A. 一般的なカフェと同程度の価格帯です。スイーツは1,000円〜1,500円程度が目安です。

**Q. 子連れでも入れるカフェは？**  
A. ほとんどのカフェは子連れでも入れます。テラス席があるカフェは、特に子連れにおすすめです。

**Q. 予約は必要？**  
A. 人気のカフェは、混雑することがあります。事前予約がおすすめです。

**Q. カフェ巡りにおすすめの時間帯は？**  
A. 午前中が比較的空いています。朝食やブランチを楽しむなら、午前中の訪問がおすすめです。

**Q. インスタ映えするカフェは？**  
A. 島カフェとぅんからや、カフェ楽園の果実、AOSORA PARLORなど、絶景とカラフルなスイーツが楽しめるカフェがおすすめです。

## 8. まとめ

宮古島のカフェ巡りは、絶景と南国スイーツを同時に楽しめる贅沢な体験です。海を眺めながら、マンゴーパフェ、雪塩ソフトクリーム、ふわふわパンケーキなど、宮古島ならではのスイーツを堪能しましょう。女子旅、カップル、ファミリーにおすすめの絶景カフェで、特別な時間を過ごしてください。`,
  },
  {
    id: "miyakojima-local-izakaya-guide",
    slug: "miyakojima-local-izakaya-guide",
    title: "地元民おすすめ居酒屋ガイド｜宮古牛・海鮮・島料理",
    excerpt:
      "地元民が通う本当に美味しい居酒屋を厳選。宮古牛、新鮮な海鮮、島料理、泡盛など、宮古島の夜を満喫できる居酒屋の完全ガイド。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-05-20",
    category: "グルメ",
    tags: ["宮古島", "居酒屋", "宮古牛", "海鮮", "島料理", "泡盛", "地元民おすすめ"],
    image: "/miyakojima-izakaya-miyako-beef.jpg",
    readTime: 14,
    content: `宮古島の夜は、地元民が通う居酒屋で決まり。宮古牛、新鮮な海鮮、島料理、泡盛など、宮古島ならではの味覚を楽しめます。観光客向けのレストランとは一味違う、地元の雰囲気を味わえる居酒屋を厳選してご紹介します。

## 1. 宮古島の居酒屋の魅力

### 地元民が通う本当に美味しい店

観光客向けのレストランとは違い、地元民が通う居酒屋は、本当に美味しい料理とリーズナブルな価格が魅力です。

### 宮古牛・海鮮・島料理が楽しめる

宮古牛、新鮮な海鮮、ゴーヤチャンプルーなどの島料理など、宮古島ならではの味覚を楽しめます。

### 泡盛と一緒に楽しむ島の夜

宮古島の泡盛は、料理との相性抜群。地元の泡盛を飲みながら、島の夜を満喫しましょう。

## 2. 宮古牛が楽しめる居酒屋

### 🥩 焼肉 琉宮

**エリア**：市街地  
**特徴**：宮古牛専門、焼肉、ステーキ  
**営業時間**：17:00〜23:00  
**おすすめメニュー**：宮古牛カルビ（2,500円）、宮古牛ロース（3,000円）

宮古牛を堪能できる焼肉店。柔らかくジューシーな肉質が特徴で、地元民にも人気です。

### 🍖 炭火焼肉 たから

**エリア**：市街地  
**特徴**：宮古牛、炭火焼肉、リーズナブル  
**営業時間**：17:00〜23:00  
**おすすめメニュー**：宮古牛盛り合わせ（3,500円）、ホルモン（1,500円）

炭火で焼く宮古牛は絶品。リーズナブルな価格で、宮古牛を楽しめます。

## 3. 海鮮が楽しめる居酒屋

### 🐟 居酒屋 まるよし

**エリア**：市街地  
**特徴**：新鮮な海鮮、刺身、島料理  
**営業時間**：17:00〜24:00  
**おすすめメニュー**：刺身盛り合わせ（2,000円）、魚の煮付け（1,500円）

新鮮な海鮮が自慢の居酒屋。刺身盛り合わせは、その日に獲れた新鮮な魚を使っています。

### 🦐 海鮮居酒屋 うみんちゅ

**エリア**：市街地  
**特徴**：新鮮な海鮮、島料理、泡盛  
**営業時間**：17:00〜24:00  
**おすすめメニュー**：海鮮丼（1,800円）、エビフライ（1,200円）

地元の漁師が獲った新鮮な海鮮を使った料理が人気。海鮮丼は、ボリューム満点です。

## 4. 島料理が楽しめる居酒屋

### 🍛 島料理 あかがーら

**エリア**：市街地  
**特徴**：島料理、ゴーヤチャンプルー、宮古そば  
**営業時間**：17:00〜23:00  
**おすすめメニュー**：ゴーヤチャンプルー（900円）、宮古そば（800円）

島料理を中心としたメニューが豊富。ゴーヤチャンプルーは、ゴーヤの苦味と豚肉の旨味が絶妙です。

### 🍢 居酒屋 島唄

**エリア**：市街地  
**特徴**：島料理、ライブ演奏、泡盛  
**営業時間**：18:00〜24:00  
**おすすめメニュー**：島料理盛り合わせ（2,500円）、泡盛（500円〜）

島料理とライブ演奏が楽しめる居酒屋。島唄を聴きながら、泡盛と島料理を楽しめます。

## 5. 地元民に人気の居酒屋

### 🍻 居酒屋 がじゅまる

**エリア**：市街地  
**特徴**：地元民に人気、リーズナブル、アットホーム  
**営業時間**：17:00〜24:00  
**おすすめメニュー**：刺身盛り合わせ（1,500円）、ゴーヤチャンプルー（800円）

地元民に愛される居酒屋。リーズナブルな価格とアットホームな雰囲気が魅力です。

### 🏮 居酒屋 ゆうな

**エリア**：市街地  
**特徴**：地元民に人気、島料理、泡盛  
**営業時間**：17:00〜23:00  
**おすすめメニュー**：島料理盛り合わせ（2,000円）、泡盛（500円〜）

地元民が通う隠れ家的な居酒屋。島料理と泡盛を楽しみながら、地元の雰囲気を味わえます。

## 6. 泡盛の楽しみ方

### 🍶 宮古島の泡盛

宮古島には、複数の酒造所があり、それぞれ個性的な泡盛を造っています。居酒屋では、地元の泡盛を飲み比べることができます。

**おすすめ泡盛**：菊之露、多良川、宮の華

### 🧊 飲み方

- **ストレート**：泡盛本来の味を楽しむ
- **水割り**：さっぱりとした飲み口
- **ロック**：氷で冷やして飲む
- **お湯割り**：冬におすすめ

## 7. 居酒屋巡りのコツ

### 🕐 予約がおすすめ

人気の居酒屋は、混雑することがあります。事前予約がおすすめです。

### 🚗 レンタカーは控えめに

居酒屋で飲酒する場合は、レンタカーの運転は控えましょう。タクシーや徒歩での移動がおすすめです。

### 💰 予算の目安

一人あたり3,000円〜5,000円程度が目安です。宮古牛や海鮮を楽しむ場合は、5,000円〜7,000円程度を見込みましょう。

## 8. 居酒屋巡りの注意点

⚠️ **営業時間を確認**：一部の居酒屋は、営業時間が短い場合があります。事前に確認しましょう。

⚠️ **定休日を確認**：定休日がある店舗もあるため、事前に確認しましょう。

⚠️ **飲酒運転は厳禁**：飲酒運転は絶対にやめましょう。タクシーや徒歩での移動がおすすめです。

## 9. よくある質問（FAQ）

**Q. 宮古島の居酒屋は高い？**  
A. 地元民が通う居酒屋は、リーズナブルな価格です。一人あたり3,000円〜5,000円程度が目安です。

**Q. 予約は必要？**  
A. 人気の居酒屋は、混雑することがあります。事前予約がおすすめです。

**Q. 子連れでも入れる居酒屋は？**  
A. 一部の居酒屋は、子連れでも入れます。事前に確認しましょう。

**Q. 泡盛はどこで買える？**  
A. 宮古島の酒造所や、お土産店で購入できます。空港でも購入可能です。

**Q. 地元民に人気の居酒屋は？**  
A. 居酒屋 がじゅまる、居酒屋 ゆうななど、地元民に愛される居酒屋がおすすめです。

## 10. まとめ

宮古島の夜は、地元民が通う居酒屋で決まり。宮古牛、新鮮な海鮮、島料理、泡盛など、宮古島ならではの味覚を楽しみましょう。観光客向けのレストランとは一味違う、地元の雰囲気を味わえる居酒屋で、特別な夜を過ごしてください。`,
  },
  {
    id: "miyakojima-morning-breakfast-cafe",
    slug: "miyakojima-morning-breakfast-cafe",
    title: "モーニング＆朝カフェ特集｜朝の宮古島で食べたいもの",
    excerpt:
      "早起きして朝の宮古島を満喫。海を眺めながらの朝食、焼きたてパン、エッグベネディクト、フルーツたっぷりのモーニングなど、朝カフェの完全ガイド。",
    author: "海亀兄弟編集部",
    publishedAt: "2025-05-25",
    category: "グルメ",
    tags: ["宮古島", "モーニング", "朝食", "カフェ", "パン", "エッグベネディクト", "朝活"],
    image: "/miyakojima-morning-cafe-breakfast.jpg",
    readTime: 12,
    content: `早起きして朝の宮古島を満喫しませんか。透明度抜群の「宮古ブルー」の海を眺めながらの朝食は、一日の始まりを特別なものにしてくれます。焼きたてパン、エッグベネディクト、フルーツたっぷりのモーニングなど、朝カフェの完全ガイドをお届けします。

## 1. 朝の宮古島の魅力

### 静かな海と爽やかな空気

朝の宮古島は、静かな海と爽やかな空気が心地よく、一日の始まりにぴったりです。早起きして、朝の宮古島を満喫しましょう。

### 海を眺めながらの朝食

海を眺めながらの朝食は、宮古島ならではの贅沢な体験。エメラルドグリーンの海と青い空を眺めながら、ゆったりとした時間を過ごせます。

### 朝活で一日を有効活用

朝活で一日を有効活用できます。朝食後は、ビーチ散策やマリンアクティビティを楽しみましょう。

## 2. 海を眺めながらモーニング

### ☕ 島カフェとぅんからや

**エリア**：来間島  
**営業時間**：8:00〜17:00  
**おすすめメニュー**：パンケーキ（1,200円）、エッグベネディクト（1,400円）、コーヒー（500円）

### 🌊 カフェ ボラボラ

**エリア**：前浜  
**営業時間**：8:00〜18:00  
**おすすめメニュー**：モーニングセット（1,000円）、パンケーキ（1,200円）、コーヒー（600円）

与那覇前浜ビーチ近くにあるカフェ。海を眺めながら、リゾート感ある空間でモーニングを楽しめます。

### 🏝️ シギラリゾート内レストラン

**エリア**：シギラリゾート  
**営業時間**：7:00〜10:00  
**おすすめメニュー**：ビュッフェ形式の朝食（2,500円〜）

シギラリゾート内のレストランでは、ビュッフェ形式の朝食を楽しめます。和食、洋食、南国フルーツなど、豊富なメニューが揃っています。

## 3. 焼きたてパンのモーニング

### 🥐 パン屋 モンテドール

**エリア**：市街地  
**営業時間**：7:00〜18:00  
**おすすめメニュー**：クロワッサン（250円）、サンドイッチ（600円）、コーヒー（400円）

焼きたてパンが人気のベーカリーカフェ。朝7時から営業しており、焼きたてのクロワッサンやサンドイッチを楽しめます。

### 🍞 ベーカリー ぱんのみみ

**エリア**：市街地  
**営業時間**：7:00〜17:00  
**おすすめメニュー**：食パン（300円）、あんぱん（200円）、コーヒー（400円）

地元で人気のベーカリー。焼きたてのパンとコーヒーで、シンプルな朝食を楽しめます。

## 4. フルーツたっぷりモーニング

### 🥭 カフェ楽園の果実

**エリア**：市街地  
**営業時間**：11:00〜18:00（モーニングは提供していません）  
**おすすめメニュー**：マンゴーパフェ（1,500円）、トロピカルスムージー（800円）

※こちらのカフェは11時からの営業ですが、フルーツたっぷりのメニューが人気です。ブランチにおすすめです。

### 🍹 フルーツカフェ トロピカーナ

**エリア**：市街地  
**営業時間**：8:00〜17:00  
**おすすめメニュー**：フルーツプレート（1,200円）、スムージー（800円）

新鮮な南国フルーツをたっぷり使ったフルーツプレートやスムージーが人気。ヘルシーな朝食を楽しめます。

## 5. ホテルの朝食ビュッフェ

### 🏨 宮古島東急ホテル＆リゾーツ

**エリア**：前浜  
**営業時間**：7:00〜10:00  
**料金**：宿泊者は無料、外来は2,500円〜

与那覇前浜ビーチが目の前にあるホテル。ビュッフェ形式の朝食は、和食、洋食、南国フルーツなど、豊富なメニューが揃っています。

### 🏨 ホテルブリーズベイマリーナ

**エリア**：シギラリゾート  
**営業時間**：7:00〜10:00  
**料金**：宿泊者は無料、外来は2,000円〜

シギラリゾート内のホテル。ビュッフェ形式の朝食は、種類豊富で満足度が高いです。

## 6. 朝活のすすめ

### 🌅 サンライズSUP

早朝の静かな海で、サンライズを眺めながらSUP体験。朝日と海の上での特別な時間は、一生の思い出になります。

### 🏖️ ビーチ散策

朝のビーチは、人が少なく静かです。波の音を聞きながら、ビーチを散策しましょう。

### 🧘 ヨガ

ビーチでのヨガは、心身ともにリフレッシュできます。一部のホテルでは、朝ヨガのプログラムを提供しています。

## 7. モーニングの注意点

⚠️ **営業時間を確認**：一部のカフェは、朝早くから営業していますが、営業時間を事前に確認しましょう。

⚠️ **予約がおすすめ**：人気のカフェは、混雑することがあります。事前予約がおすすめです。

⚠️ **早起きが必要**：朝活を楽しむには、早起きが必要です。前日は早めに就寝しましょう。

## 8. よくある質問（FAQ）

**Q. 宮古島のモーニングは何時から？**  
A. 多くのカフェは、7:00〜8:00から営業しています。ホテルの朝食ビュッフェも、7:00から提供されることが多いです。

**Q. 海を眺めながらモーニングできるカフェは？**  
A. 島カフェとぅんからや、カフェ ボラボラ、シギラリゾート内レストランなど、海を眺めながらモーニングを楽しめるカフェがあります。

**Q. 焼きたてパンが食べられるカフェは？**  
A. パン屋 モンテドール、ベーカリー ぱんのみみなど、焼きたてパンが人気のベーカリーカフェがあります。

**Q. 朝活におすすめのアクティビティは？**  
A. サンライズSUP、ビーチ散策、ヨガなど、朝の宮古島を満喫できるアクティビティがおすすめです。

**Q. ホテルの朝食ビュッフェは外来でも利用できる？**  
A. 一部のホテルでは、外来でも朝食ビュッフェを利用できます。事前に確認しましょう。

## 9. まとめ

早起きして朝の宮古島を満喫しませんか。海を眺めながらの朝食、焼きたてパン、エッグベネディクト、フルーツたっぷりのモーニングなど、朝カフェで特別な一日の始まりを迎えましょう。朝活で一日を有効活用し、宮古島の魅力を存分に楽しんでください。`,
  },
  {
    id: "16",
    slug: "miyakojima-sup-beginner-guide",
    title: "SUP（サップ）初心者ガイド｜サンセット＆朝活プラン",
    excerpt: "宮古島でSUP初体験！サンセットSUP、朝活SUP、おすすめツアー、持ち物、注意点まで完全ガイド。",
    category: "アクティビティ",
    date: "2025-01-15",
    readTime: "8分",
    image: "/sup-sunset-miyakojima.jpg",
    tags: ["SUP", "サップ", "サンセット", "朝活", "アクティビティ", "初心者"],
    content: `# SUP（サップ）初心者ガイド｜サンセット＆朝活プラン

宮古島の透明度抜群の海で、SUP（スタンドアップパドルボード）を体験しませんか。初心者でも安心して楽しめるSUPは、海の上を散歩するような感覚で、宮古島の美しい海を満喫できます。サンセットSUP、朝活SUP、おすすめツアー、持ち物、注意点まで、SUP初心者のための完全ガイドをお届けします。

## 1. SUP（サップ）とは？

SUP（スタンドアップパドルボード）は、大きなボードの上に立ち、パドルを漕いで水面を進むマリンスポーツです。サーフィンよりも安定感があり、初心者でも簡単に楽しめます。

### SUPの魅力

✨ **初心者でも簡単**：バランス感覚があれば、初めてでもすぐに立てます。  
✨ **全身運動**：体幹を鍛えながら、楽しく運動できます。  
✨ **絶景を満喫**：海の上から、360度の絶景を楽しめます。  
✨ **年齢問わず**：子どもから大人まで、幅広い年齢層が楽しめます。

## 2. サンセットSUP

### 🌅 夕日を眺めながらSUP

宮古島のサンセットSUPは、夕日を眺めながら海の上を漂う、ロマンチックな体験です。オレンジ色に染まる空と海、静かな波の音、特別な時間を過ごせます。

**おすすめ時期**：通年（特に4月〜10月）  
**所要時間**：約2時間  
**料金**：6,000円〜8,000円

### おすすめサンセットSUPスポット

#### 🏖️ 与那覇前浜ビーチ

**エリア**：前浜  
**特徴**：東洋一美しいビーチで、サンセットSUPを楽しめます。遠浅で波が穏やかなので、初心者にもおすすめです。

#### 🏖️ 砂山ビーチ

**エリア**：市街地  
**特徴**：アーチ状の岩が特徴的なビーチ。サンセット時には、岩のシルエットと夕日のコントラストが美しいです。

#### 🏖️ 新城海岸

**エリア**：東平安名崎  
**特徴**：透明度が高く、サンゴ礁が広がる海岸。SUPの上から、サンゴや魚を観察できます。

## 3. 朝活SUP

### 🌄 サンライズを眺めながらSUP

早朝の静かな海で、サンライズを眺めながらSUP体験。朝日と海の上での特別な時間は、一生の思い出になります。朝の海は波が穏やかで、初心者にもおすすめです。

**おすすめ時期**：通年（特に4月〜10月）  
**所要時間**：約2時間  
**料金**：6,000円〜8,000円

### 朝活SUPのメリット

✨ **波が穏やか**：朝の海は、波が穏やかで初心者にも安心です。  
✨ **人が少ない**：早朝は、人が少なく静かです。  
✨ **涼しい**：日中よりも涼しく、快適にSUPを楽しめます。  
✨ **一日を有効活用**：朝活で一日を有効活用できます。

## 4. おすすめSUPツアー

### 🏄 初心者向けSUP体験ツアー

**所要時間**：約2時間  
**料金**：5,000円〜7,000円  
**内容**：インストラクターが丁寧に指導。初めてでも安心してSUPを楽しめます。

### 🏄 SUP＋シュノーケリングツアー

**所要時間**：約3時間  
**料金**：8,000円〜10,000円  
**内容**：SUPとシュノーケリングを両方楽しめるお得なツアー。海の上と海の中、両方の絶景を満喫できます。

### 🏄 SUPヨガツアー

**所要時間**：約2時間  
**料金**：7,000円〜9,000円  
**内容**：SUPボードの上でヨガを体験。バランス感覚を鍛えながら、心身ともにリフレッシュできます。

### 🏄 SUPクルージングツアー

**所要時間**：約2〜3時間  
**料金**：8,000円〜12,000円  
**内容**：インストラクターと一緒に、宮古島の海をクルージング。絶景スポットを巡ります。

## 5. SUPの持ち物

### 必須アイテム

✅ **水着**：濡れても良い服装で参加しましょう。  
✅ **タオル**：体を拭くためのタオルを持参しましょう。  
✅ **日焼け止め**：海の上は日差しが強いです。日焼け止めをしっかり塗りましょう。  
✅ **サングラス**：日差しから目を守るために、サングラスを着用しましょう。  
✅ **帽子**：熱中症予防のために、帽子を着用しましょう。  
✅ **飲み物**：水分補給のために、飲み物を持参しましょう。

### あると便利なアイテム

✅ **ラッシュガード**：日焼け防止、クラゲ対策に便利です。  
✅ **マリンシューズ**：足を保護するために、マリンシューズを着用しましょう。  
✅ **防水ケース**：スマホやカメラを持参する場合は、防水ケースに入れましょう。  
✅ **着替え**：SUP後の着替えを持参しましょう。

## 6. SUPの注意点

### 安全対策

⚠️ **ライフジャケット着用**：必ずライフジャケットを着用しましょう。  
⚠️ **インストラクターの指示に従う**：初めての方は、インストラクターの指示に従いましょう。  
⚠️ **天候確認**：天候が悪い日は、SUPを中止しましょう。  
⚠️ **体調管理**：体調が悪い場合は、無理をせず休憩しましょう。  
⚠️ **日焼け対策**：海の上は日差しが強いです。日焼け対策をしっかりしましょう。

### マナー

⚠️ **他の利用者に配慮**：ビーチやSUPスポットでは、他の利用者に配慮しましょう。  
⚠️ **ゴミは持ち帰る**：ゴミは必ず持ち帰りましょう。  
⚠️ **サンゴを踏まない**：サンゴは貴重な生態系です。踏まないように注意しましょう。  
⚠️ **騒音に注意**：静かな環境を保ちましょう。

## 7. SUPツアーの予約方法

### オンライン予約

多くのSUPツアーは、オンラインで予約できます。公式サイトや予約サイト（じゃらん、アクティビティジャパンなど）から、簡単に予約できます。

### 電話予約

電話での予約も可能です。直接ショップに電話して、空き状況を確認しましょう。

### 当日予約

繁忙期以外は、当日予約も可能な場合があります。ただし、事前予約がおすすめです。

## 8. よくある質問（FAQ）

**Q. SUP初心者でも大丈夫？**  
A. はい、初心者でも大丈夫です。インストラクターが丁寧に指導してくれるので、初めてでも安心して楽しめます。

**Q. 泳げなくても参加できる？**  
A. はい、ライフジャケットを着用するので、泳げなくても参加できます。ただし、水に対する恐怖心が強い方は、事前にインストラクターに相談しましょう。

**Q. 子どもでも参加できる？**  
A. 多くのツアーは、小学生以上から参加できます。ツアーによって年齢制限が異なるので、事前に確認しましょう。

**Q. 雨の日でもSUPできる？**  
A. 小雨程度なら可能ですが、天候が悪い場合は中止になることがあります。事前に天気予報を確認しましょう。

**Q. SUPの服装は？**  
A. 水着の上にラッシュガードを着用するのがおすすめです。日焼け防止、クラゲ対策にもなります。

**Q. SUPツアーの料金は？**  
A. 初心者向けSUP体験ツアーは、5,000円〜7,000円程度です。サンセットSUPや朝活SUPは、6,000円〜8,000円程度です。

**Q. SUPツアーの所要時間は？**  
A. 多くのツアーは、約2時間です。SUP＋シュノーケリングツアーなど、複数のアクティビティを組み合わせたツアーは、約3時間です。

**Q. SUPツアーの予約はいつまで？**  
A. 繁忙期（7月〜9月）は、1ヶ月前までの予約がおすすめです。それ以外の時期は、1週間前でも予約できることが多いです。

## 9. まとめ

宮古島の透明度抜群の海で、SUPを体験しませんか。サンセットSUP、朝活SUP、初心者向けツアーなど、様々なプランがあります。初めての方でも、インストラクターが丁寧に指導してくれるので安心です。海の上から眺める宮古島の絶景は、一生の思い出になります。ぜひ、宮古島でSUPを楽しんでください。`,
  },
]

export const BLOG_POSTS_SLUGS = BLOG_POSTS.map((post) => post.slug)
[V0_FILE]typescript:file="lib/data/faqs.ts"
// FAQ型定義
export interface FAQ {
  id: string
  category: string
  question: string
  answer: string
  order: number
}

// FAQ一覧
export const faqs: FAQ[] = [
  {
    id: 'faq-1',
    category: 'ツアー予約',
    question: 'どのようにして予約しますか？',
    answer:
      'オンライン予約フォームから予約いただくか、LINE、電話でお問い合わせください。予約は24時間前までにお願いします。',
    order: 1,
  },
  {
    id: 'faq-2',
    category: 'ツアー予約',
    question: 'キャンセルはできますか？',
    answer:
      'ツアー開始日の14日前までは無料でキャンセルできます。それ以降は手数料がかかります。詳細はお問い合わせください。',
    order: 2,
  },
  {
    id: 'faq-3',
    category: 'ツアー内容',
    question: '子供も参加できますか？',
    answer:
      'はい、お子様も参加できます。3歳以上であれば、適切な監督下で安全にツアーを楽しむことができます。',
    order: 3,
  },
  {
    id: 'faq-4',
    category: 'ツアー内容',
    question: '初心者でもシュノーケリングできますか？',
    answer:
      'もちろんです。スキルレベルに関わらず、ガイドが丁寧にサポートします。事前に不安なことはお知らせください。',
    order: 4,
  },
  {
    id: 'faq-5',
    category: '季節と天気',
    question: '雨の日でもツアーはありますか？',
    answer:
      'ツアーは通常どおり開催されます。ただし、台風や悪天候の場合は安全のため中止になることがあります。',
    order: 5,
  },
  {
    id: 'faq-6',
    category: '季節と天気',
    question: 'ベストシーズンはいつですか？',
    answer:
      '通年で楽しめますが、5月～10月は水温が高く、11月～4月は気温が温かいです。一年を通して体験できます。',
    order: 6,
  },
]

// カテゴリ別にFAQを取得
export const getFAQsByCategory = (category: string): FAQ[] => {
  return faqs
    .filter((faq) => faq.category === category)
    .sort((a, b) => a.order - b.order)
}

// FAQカテゴリ一覧を取得
export const getFAQCategories = (): string[] => {
  const categories = [...new Set(faqs.map((faq) => faq.category))]
  return categories.sort()
}

// 全FAQを取得
export const getAllFAQs = (): FAQ[] => {
  return faqs.sort((a, b) => a.order - b.order)
}
[V0_FILE]typescript:file="lib/data/images.ts"
// ギャラリー画像型定義
export interface GalleryImage {
  id: string
  src: string
  alt: string
  category: string
  title: string
  description: string
}

// ギャラリー画像一覧
export const galleryImages: GalleryImage[] = [
  {
    id: 'gallery-1',
    src: '/images/sea-turtle-hero.jpg',
    alt: 'ウミガメとの遭遇',
    category: 'sea-turtle',
    title: 'ウミガメとの感動的な遭遇',
    description: 'シュノーケリング中にウミガメと出会った貴重な瞬間',
  },
  {
    id: 'gallery-2',
    src: '/images/snorkeling-underwater-coral-reef-fish.jpg',
    alt: 'コーラルリーフ',
    category: 'snorkeling',
    title: '美しいサンゴ礁',
    description: '宮古島の海の生物の楽園。カラフルな魚とサンゴ',
  },
  {
    id: 'gallery-3',
    src: '/images/sunset-sup-silhouettes.jpg',
    alt: 'サンセット',
    category: 'sunset',
    title: 'サンセットの美しさ',
    description: '西表島の絶景。一日の終わりを海で過ごす',
  },
  {
    id: 'gallery-4',
    src: '/images/s2-sea-turtle-closeup.jpg',
    alt: 'ウミガメ アップ',
    category: 'sea-turtle',
    title: 'ウミガメとの距離感',
    description: 'うっかり近づきすぎた時の貴重なショット',
  },
  {
    id: 'gallery-5',
    src: '/images/hero-aerial-ocean.jpg',
    alt: 'エアリアルショット',
    category: 'landscape',
    title: '上空からの景色',
    description: '宮古島全体を見渡す壮大な海の風景',
  },
  {
    id: 'gallery-6',
    src: '/images/miyakojima-night-tour-creatures.jpg',
    alt: 'ナイトツアー',
    category: 'night-tour',
    title: '夜間のジャングル生物',
    description: 'ナイトツアーでしか見ることのできない生き物たち',
  },
]

// カテゴリ別にギャラリー画像を取得
export const getGalleryImagesByCategory = (category: string): GalleryImage[] => {
  return galleryImages.filter((img) => img.category === category)
}

// ギャラリーカテゴリ一覧を取得
export const getGalleryCategories = (): string[] => {
  const categories = [...new Set(galleryImages.map((img) => img.category))]
  return categories
}

// 全ギャラリー画像を取得
export const getAllGalleryImages = (): GalleryImage[] => {
  return galleryImages
}
[V0_FILE]typescript:file="lib/data/index.ts"
// 統合エクスポートファイル
// すべてのデータモジュールを一箇所から再エクスポート

export * from './plans'
export * from './staff'
export * from './faqs'
export * from './images'
[V0_FILE]typescript:file="lib/data/plans.ts"
// プラン型定義
export interface Plan {
  id: string
  name: string
  description: string
  duration: string
  price: number
  maxParticipants: number
  features: string[]
  image: string
}

// サンセットシュノーケリングプラン
export const plans: Plan[] = [
  {
    id: 'sunset-snorkel',
    name: 'サンセット シュノーケリング',
    description: '西表島の美しいサンセットを楽しみながらシュノーケリング',
    duration: '約3時間',
    price: 12000,
    maxParticipants: 4,
    features: ['シュノーケルギア貸出', 'プロガイド同行', '夕焼け写真撮影', 'ウェットスーツ'],
    image: '/images/sunset-sup-silhouettes.jpg',
  },
  {
    id: 'day-snorkel',
    name: 'デイ シュノーケリング',
    description: '宮古島の海で色とりどりの熱帯魚とサンゴを観察',
    duration: '約4時間',
    price: 10000,
    maxParticipants: 6,
    features: ['シュノーケルギア貸出', 'プロガイド同行', 'ランチ付', 'フォト撮影'],
    image: '/images/snorkeling-underwater-coral-reef-fish.jpg',
  },
  {
    id: 'family-plan',
    name: 'ファミリープラン',
    description: '小さなお子様も安心！家族向けシュノーケリング体験',
    duration: '約3時間',
    price: 8000,
    maxParticipants: 4,
    features: ['キッズギア貸出', '浅瀬中心のコース', 'プロガイド同行', '安全第一'],
    image: '/images/s1-sea-turtle-snorkeling.jpg',
  },
  {
    id: 'night-tour',
    name: 'ナイトツアー',
    description: '夜の宮古島の自然を探索！ジャングルの生き物観察',
    duration: '約2時間',
    price: 6000,
    maxParticipants: 6,
    features: ['ヘッドライト貸出', 'ナイトガイド', '双眼鏡貸出', 'スタートバー'],
    image: '/images/miyakojima-night-tour-creatures.jpg',
  },
]

// 価格マップ（プランIDと価格の対応）
export const planPriceMap: Record<string, number> = {
  'sunset-snorkel': 12000,
  'day-snorkel': 10000,
  'family-plan': 8000,
  'night-tour': 6000,
}

// プランを取得
export const getPlanById = (id: string): Plan | undefined => {
  return plans.find((plan) => plan.id === id)
}

// プランの価格を取得
export const getPlanPrice = (id: string): number => {
  return planPriceMap[id] || 0
}
[V0_FILE]typescript:file="lib/data/staff.ts"
// スタッフ型定義
export interface Staff {
  id: string
  name: string
  role: string
  bio: string
  image: string
  languages: string[]
  specialties: string[]
}

// スタッフ一覧
export const staff: Staff[] = [
  {
    id: 'hikaru',
    name: 'ヒカル',
    role: 'シュノーケリング ガイド',
    bio: 'シュノーケリングのエキスパート。宮古島の海を知り尽くしています。',
    image: '/hikaru-staff-photo.jpg',
    languages: ['日本語', '英語'],
    specialties: ['シュノーケリング', 'サンゴ保全'],
  },
  {
    id: 'nagi',
    name: 'ナギ',
    role: 'ツアーコーディネーター',
    bio: 'ツアーの企画と調整が得意。お客様の満足度が何より嬉しいです。',
    image: '/nagi-staff-photo.jpg',
    languages: ['日本語', '英語', '中国語'],
    specialties: ['顧客サービス', 'ツアー企画'],
  },
  {
    id: 'souichiro',
    name: 'ソウイチロウ',
    role: 'ナイトツアー ガイド',
    bio: '夜間のジャングル探索は私の得意分野。生き物のことなら何でも知ってます。',
    image: '/souichiro-staff-photo.jpg',
    languages: ['日本語', '英語'],
    specialties: ['ナイトツアー', '生物学'],
  },
  {
    id: 'yamachan',
    name: 'ヤマちゃん',
    role: 'オーナー',
    bio: '宮古島の自然を愛する。ゲストの笑顔が最高のご褒美。',
    image: '/yamachan-staff-photo.jpg',
    languages: ['日本語'],
    specialties: ['経営', '海の知識'],
  },
]

// スタッフを取得
export const getStaffById = (id: string): Staff | undefined => {
  return staff.find((member) => member.id === id)
}

// 全スタッフを取得
export const getAllStaff = (): Staff[] => {
  return staff
}
[V0_FILE]typescript:file="lib/date-utils.ts"
import { format, parseISO } from "date-fns"

/**
 * Get today's date in local 'yyyy-MM-dd' format
 * Avoids UTC timezone issues
 */
export const todayStr = (): string => {
  return format(new Date(), "yyyy-MM-dd")
}

/**
 * Convert a Date object to 'yyyy-MM-dd' string in local timezone
 * Use this instead of toISOString().split("T")[0]
 */
export const dateToYMD = (date: Date): string => {
  return format(date, "yyyy-MM-dd")
}

/**
 * Safely convert 'yyyy-MM-dd' string to Date object in local timezone
 * Creates a Date at local midnight (00:00:00)
 */
export const localDateFromYMD = (ymd: string): Date => {
  return parseISO(`${ymd}T00:00:00`)
}

/**
 * Get a date N days from today in 'yyyy-MM-dd' format
 */
export const daysFromToday = (days: number): string => {
  const date = new Date()
  date.setDate(date.getDate() + days)
  return dateToYMD(date)
}

/**
 * Get a date N months from today in 'yyyy-MM-dd' format
 */
export const monthsFromToday = (months: number): string => {
  const date = new Date()
  date.setMonth(date.getMonth() + months)
  return dateToYMD(date)
}
[V0_FILE]typescript:file="lib/hooks/index.ts"
// カスタムフックの統合エクスポート
export { useBookingForm } from './useBookingForm'
export type { BookingFormData, Participant } from './useBookingForm'
[V0_FILE]typescript:file="lib/hooks/useBookingForm.ts"
'use client'

import { useState, useCallback } from 'react'
import { validateEmail, validatePhoneNumber, validateParticipants } from '@/lib/utils/validation'
import { calculatePrice, formatDate } from '@/lib/utils/calculations'
import { BOOKING_CONFIG, ERROR_MESSAGES } from '@/lib/constants/booking'

export interface Participant {
  id: string
  category: 'adult' | 'child' | 'under3'
  name: string
  age?: number
}

export interface BookingFormData {
  selectedDate: string
  selectedTime: string
  participants: Participant[]
  planId: string
  planName: string
  totalPrice: number
  customerName: string
  customerEmail: string
  customerPhone: string
  staffName?: string
  specialRequests?: string
}

export const useBookingForm = () => {
  const [formData, setFormData] = useState<Partial<BookingFormData>>({
    participants: [],
    selectedDate: '',
    selectedTime: '',
    planId: '',
    planName: '',
    customerName: '',
    customerEmail: '',
    customerPhone: '',
    specialRequests: '',
  })

const [errors, setErrors] = useState<Record<string, string>>({})
  const [isSubmitting, setIsSubmitting] = useState(false)

// フォーム入力を更新
  const updateField = useCallback((field: keyof BookingFormData, value: any) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }))

// エラークリア
    if (errors[field]) {
      setErrors((prev) => {
        const newErrors = { ...prev }
        delete newErrors[field]
        return newErrors
      })
    }
  }, [errors])

// 参加者を追加
  const addParticipant = useCallback((category: Participant['category']) => {
    if ((formData.participants?.length ?? 0) >= BOOKING_CONFIG.MAX_PARTICIPANTS) {
      setErrors((prev) => ({
        ...prev,
        participants: `参加者は${BOOKING_CONFIG.MAX_PARTICIPANTS}名までです`,
      }))
      return
    }

const newParticipant: Participant = {
      id: `participant-${Date.now()}`,
      category,
      name: '',
      age: category === 'child' ? 10 : undefined,
    }

setFormData((prev) => ({
      ...prev,
      participants: [...(prev.participants || []), newParticipant],
    }))
  }, [formData.participants?.length])

// 参加者を削除
  const removeParticipant = useCallback((id: string) => {
    setFormData((prev) => ({
      ...prev,
      participants: (prev.participants || []).filter((p) => p.id !== id),
    }))
  }, [])

// 参加者情報を更新
  const updateParticipant = useCallback((id: string, updates: Partial<Participant>) => {
    setFormData((prev) => ({
      ...prev,
      participants: (prev.participants || []).map((p) =>
        p.id === id ? { ...p, ...updates } : p
      ),
    }))
  }, [])

// フォーム検証
  const validateForm = useCallback((): boolean => {
    const newErrors: Record<string, string> = {}

if (!formData.selectedDate) newErrors.selectedDate = '日付を選択してください'
    if (!formData.selectedTime) newErrors.selectedTime = '時刻を選択してください'
    if (!formData.planId) newErrors.planId = 'プランを選択してください'
    if (!formData.customerName) newErrors.customerName = '氏名を入力してください'

const emailValidation = validateEmail(formData.customerEmail || '')
    if (!emailValidation.valid) newErrors.customerEmail = emailValidation.error || 'メールアドレスが不正です'

const phoneValidation = validatePhoneNumber(formData.customerPhone || '')
    if (!phoneValidation.valid) newErrors.customerPhone = phoneValidation.error || '電話番号が不正です'

const participantValidation = validateParticipants(formData.participants?.length ?? 0)
    if (!participantValidation.valid) newErrors.participants = participantValidation.error

if ((formData.participants?.length ?? 0) === 0) {
      newErrors.participants = '参加者を追加してください'
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }, [formData])

// フォームをリセット
  const resetForm = useCallback(() => {
    setFormData({
      participants: [],
      selectedDate: '',
      selectedTime: '',
      planId: '',
      planName: '',
      customerName: '',
      customerEmail: '',
      customerPhone: '',
      specialRequests: '',
    })
    setErrors({})
  }, [])

// 料金を計算
  const calculateTotalPrice = useCallback((planId: string, planPrices: Record<string, number>) => {
    return calculatePrice(planId, formData.participants?.length ?? 0, planPrices)
  }, [formData.participants?.length])

return {
    formData,
    errors,
    isSubmitting,
    setIsSubmitting,
    updateField,
    addParticipant,
    removeParticipant,
    updateParticipant,
    validateForm,
    resetForm,
    calculateTotalPrice,
  }
}
[V0_FILE]typescript:file="lib/image-blur.ts"
export const BLUR_DATA_URLS = {
  ocean:
    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q==",
  turtle:
    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q==",
  staff:
    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q==",
}
[V0_FILE]typescript:file="lib/services/gas-service.ts"
// GAS APIレスポンスの型定義
export interface GASResponse {
  success: boolean;
  message: string;
  bookingNumber?: string;
  timestamp?: string;
}

// 予約ペイロードの型定義
export interface BookingPayload {
  bookingNumber: string;
  date: string;
  time: string;
  participants: number;
  planId: string;
  name: string;
  email: string;
  phone: string;
  notes: string;
  specialRequests: string;
}

// GAS URLを取得
export const getGASUrl = (): string => {
  return (
    process.env.GAS_BOOKING_URL ||
    'https://script.google.com/macros/s/AKfycbz0ltHt_0WcQVw-KUD4iG5yvH32RGYgXkO6ajVjafiPtdRAK1rloQj7rmiXmk3o_Pte/exec'
  );
};

// 予約番号を生成
export const generateBookingNumber = (): string => {
  const timestamp = Date.now().toString(36).toUpperCase();
  const random = Math.random().toString(36).substring(2, 8).toUpperCase();
  return `${timestamp}${random}`;
};

// GASにデータを送信
export const sendToGAS = async (payload: BookingPayload): Promise<GASResponse> => {
  const gasUrl = getGASUrl();

try {
    const response = await fetch(gasUrl, {
      method: 'POST',
      mode: 'no-cors',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(payload),
    });

// no-corsモードではレスポンスが読めないため、常に成功と仮定
    return {
      success: true,
      message: '予約がシステムに送信されました',
      bookingNumber: payload.bookingNumber,
      timestamp: new Date().toISOString(),
    };
  } catch (error) {
    console.error('[v0] GAS送信エラー:', error);
    throw new Error('GAS連携に失敗しました');
  }
};

// APIレスポンスを標準化
export const createAPIResponse = <T = any,>(success: boolean, data: T, message?: string) => {
  return {
    success,
    data,
    message: message || (success ? 'Success' : 'Error'),
    timestamp: new Date().toISOString(),
  };
};

// APIエラーレスポンスを作成
export const createAPIError = (error: unknown, defaultMessage: string = 'An error occurred') => {
  const message = error instanceof Error ? error.message : defaultMessage;
  return {
    success: false,
    error: message,
    timestamp: new Date().toISOString(),
  };
};
[V0_FILE]typescript:file="lib/services/index.ts"
// サービスレイヤーの統合エクスポート
export { sendToGAS, generateBookingNumber, getGASUrl, createAPIResponse, createAPIError } from './gas-service'
export type { GASResponse, BookingPayload } from './gas-service'
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescript:file="lib/utils/calculations.ts"
import { BOOKING_CONFIG } from '@/lib/constants/booking';

// 料金計算関数
export const calculatePrice = (planId: string, participants: number, planPrices: Record<string, number>): number => {
  const basePrice = planPrices[planId] || 0;
  return basePrice * participants;
};

// 営業時間内の時刻かチェック
export const isBusinessHours = (hours: number, startHour: number, endHour: number): boolean => {
  return hours >= startHour && hours < endHour;
};

// 予約可能な最小日数を計算（現在から何日後か）
export const getMinBookingDate = (): Date => {
  const date = new Date();
  date.setHours(0, 0, 0, 0);
  date.setDate(date.getDate() + BOOKING_CONFIG.MIN_BOOKING_HOURS / 24);
  return date;
};

// 予約可能な最大日数を計算
export const getMaxBookingDate = (): Date => {
  const date = new Date();
  date.setHours(23, 59, 59, 999);
  date.setDate(date.getDate() + BOOKING_CONFIG.ADVANCE_BOOKING_DAYS);
  return date;
};

// 日付が予約可能な範囲内かチェック
export const isDateInBookingRange = (date: Date): boolean => {
  const now = new Date();
  const minDate = getMinBookingDate();
  const maxDate = getMaxBookingDate();
  return date >= minDate && date <= maxDate;
};

// 時間スロット配列を生成
export const generateTimeSlots = (startHour: number, endHour: number, intervalMinutes: number = 60): string[] => {
  const slots: string[] = [];
  for (let hour = startHour; hour < endHour; hour++) {
    for (let minutes = 0; minutes < 60; minutes += intervalMinutes) {
      slots.push(`${String(hour).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`);
    }
  }
  return slots;
};

// 曜日を取得
export const getDayOfWeek = (date: Date): string => {
  const days = ['日', '月', '火', '水', '木', '金', '土'];
  return days[date.getDay()];
};

// 日付をフォーマット
export const formatDate = (date: Date, format: string = 'YYYY-MM-DD'): string => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');

return format
    .replace('YYYY', String(year))
    .replace('MM', month)
    .replace('DD', day)
    .replace('HH', hours)
    .replace('mm', minutes);
};
[V0_FILE]typescript:file="lib/utils/index.ts"
// ユーティリティ関数の統合エクスポート
export * from './validation'
export * from './calculations'
[V0_FILE]typescript:file="lib/utils/validation.ts"
import { ERROR_MESSAGES } from '@/lib/constants/booking';

// 電話番号のバリデーション
export const validatePhoneNumber = (phone: string): { valid: boolean; error?: string } => {
  const phoneRegex = /^[0-9\-()+ ]{10,}$/;
  if (!phone || !phoneRegex.test(phone)) {
    return { valid: false, error: ERROR_MESSAGES.INVALID_PHONE };
  }
  return { valid: true };
};

// メールアドレスのバリデーション
export const validateEmail = (email: string): { valid: boolean; error?: string } => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!email || !emailRegex.test(email)) {
    return { valid: false, error: ERROR_MESSAGES.INVALID_EMAIL };
  }
  return { valid: true };
};

// 参加者数のバリデーション
export const validateParticipants = (
  count: number,
  min: number = 1,
  max: number = 4
): { valid: boolean; error?: string } => {
  if (!Number.isInteger(count) || count < min || count > max) {
    return { valid: false, error: ERROR_MESSAGES.INVALID_PARTICIPANTS };
  }
  return { valid: true };
};

// 日付のバリデーション
export const validateDate = (date: Date | string): { valid: boolean; error?: string } => {
  const d = typeof date === 'string' ? new Date(date) : date;
  if (isNaN(d.getTime())) {
    return { valid: false, error: ERROR_MESSAGES.INVALID_DATE };
  }
  return { valid: true };
};

// 時刻のバリデーション（24時間形式）
export const validateTime = (hours: number, minutes: number = 0): { valid: boolean; error?: string } => {
  if (!Number.isInteger(hours) || hours < 0 || hours > 23) {
    return { valid: false, error: ERROR_MESSAGES.INVALID_TIME };
  }
  if (!Number.isInteger(minutes) || minutes < 0 || minutes > 59) {
    return { valid: false, error: ERROR_MESSAGES.INVALID_TIME };
  }
  return { valid: true };
};

// 必須フィールドのバリデーション
export const validateRequired = (value: string | number): { valid: boolean; error?: string } => {
  if (!value || (typeof value === 'string' && !value.trim())) {
    return { valid: false, error: ERROR_MESSAGES.REQUIRED_FIELD };
  }
  return { valid: true };
};
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    formats: ['image/avif', 'image/webp'],
    // </CHANGE>
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'hebbkx1anhila5yf.public.blob.vercel-storage.com',
      },
      {
        protocol: 'https',
        hostname: 'blob.v0.app',
      },
    ],
    deviceSizes: [360, 414, 768, 1024, 1280, 1920],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    // </CHANGE>
    minimumCacheTTL: 31536000,
    // </CHANGE>
    dangerouslyAllowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/is-prop-valid": "latest",
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "latest",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "latest",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@react-email/render": "latest",
    "@vercel/analytics": "latest",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "latest",
    "embla-carousel-react": "8.5.1",
    "framer-motion": "12.23.16",
    "geist": "latest",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.35",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-markdown": "latest",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "resend": "latest",
    "sonner": "^1.7.4",
    "suncalc": "latest",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]css:file="styles/globals.css"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="app/icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/te9JYo6HWzzKp4rJKBsMNs/app/icon.png"
[V0_FILE]jpg:file="public/-----------------------.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/A1ONL3EIFyr23JEJ-EFYox/public/-----------------------.jpg"
[V0_FILE]jpg:file="public/------------.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/2a1KdyxnM16UDnS3HIEtgo/public/------------.jpg"
[V0_FILE]jpg:file="public/17end-low-tide-beach.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/LMgTN5O_YsTkNpSAw92AQO/public/17end-low-tide-beach.jpg"
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png"
[V0_FILE]jpg:file="public/beginner-snorkeling-in-miyakojima.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/t2OcT8weVy91r66puUPYcd/public/beginner-snorkeling-in-miyakojima.jpg"
[V0_FILE]jpg:file="public/couple-romantic-miyakojima-sunset.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/zLwQFETmvETUmPzA5Rw-XN/public/couple-romantic-miyakojima-sunset.jpg"
[V0_FILE]jpg:file="public/crystal-clear-turquoise-ocean-water-with-coral-ree.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/fLnw_6LcfmgoQRp-lwAeI1/public/crystal-clear-turquoise-ocean-water-with-coral-ree.jpg"
[V0_FILE]jpg:file="public/different-types-of-sea-turtles-underwater.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/mvGKAFY7uCFp-_XuSnoo6n/public/different-types-of-sea-turtles-underwater.jpg"
[V0_FILE]jpg:file="public/faq-ocean-hero.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/FAYu9CS7AZiuvTINsOkjNC/public/faq-ocean-hero.jpg"
[V0_FILE]jpg:file="public/hidden-beach-in-miyakojima-with-coral-reef.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/oBzqEYBnlxEcMbpaLxzFAC/public/hidden-beach-in-miyakojima-with-coral-reef.jpg"
[V0_FILE]jpg:file="public/hikaru-staff-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/T0ejHXbUrCi64jUlMmRX8Q/public/hikaru-staff-photo.jpg"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg"
[V0_FILE]jpeg:file="public/images/design-mode/DSC02966.JPG.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/x438hjeS6FP7a4DmldHWxI/public/images/design-mode/DSC02966.JPG.jpeg"
[V0_FILE]jpeg:file="public/images/dsc06632.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/HfUY0PXFqdne1jqFDfbLjB/public/images/dsc06632.jpeg"
[V0_FILE]jpeg:file="public/images/gemini-generated-image-rq969urq969urq96.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/zf6I-Is2mrVzj6PIQGRPVV/public/images/gemini-generated-image-rq969urq969urq96.jpeg"
[V0_FILE]jpeg:file="public/images/gemini-generated-image-v1uwf4v1uwf4v1uw.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/f_24m1Au_Qhq1LRVbOiAjc/public/images/gemini-generated-image-v1uwf4v1uwf4v1uw.jpeg"
[V0_FILE]jpg:file="public/images/hero-aerial-ocean.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/SjUy9Pb1uQn-iWrMOzCHXg/public/images/hero-aerial-ocean.jpg"
[V0_FILE]jpg:file="public/images/night-hunter-crab.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/icIUVSQXr_ddkTv9XpOvD3/public/images/night-hunter-crab.jpg"
[V0_FILE]jpg:file="public/images/s1-sea-turtle-snorkeling.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/BtPUndhDohQ_TNXf2IbVsl/public/images/s1-sea-turtle-snorkeling.jpg"
[V0_FILE]jpg:file="public/images/s2-sea-turtle-closeup.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/WkYtDIPD3U-EE5s6amQ5H5/public/images/s2-sea-turtle-closeup.jpg"
[V0_FILE]jpg:file="public/images/sea-turtle-hero.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/HCpeJvPt4JKstGyoVERb4z/public/images/sea-turtle-hero.jpg"
[V0_FILE]jpg:file="public/images/sunset-sup-silhouettes.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/KsGlqoTRCZrWaZdYSaefvw/public/images/sunset-sup-silhouettes.jpg"
[V0_FILE]jpg:file="public/ishigaki-island-hidden-scenic-spots-aerial-view.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XE80t3vyp8HxJWjkJtMT3J/public/ishigaki-island-hidden-scenic-spots-aerial-view.jpg"
[V0_FILE]jpg:file="public/ishigaki-island-ocean-seasons-calendar.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/FPTIRcV-PYdxdXLwCMtBJz/public/ishigaki-island-ocean-seasons-calendar.jpg"
[V0_FILE]jpg:file="public/miyako-shrine-torii-visitors.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DuFWWMw-rwiHnXAv8PzVyX/public/miyako-shrine-torii-visitors.jpg"
[V0_FILE]jpg:file="public/miyakojima-3nights-4days-beach.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/zLwQFETmvETUmPzA5Rw-XN/public/miyakojima-3nights-4days-beach.jpg"
[V0_FILE]jpg:file="public/miyakojima-aerial-photography-drone-ocean-view.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/hLO9_JUs5ZXSty0RsR6VQP/public/miyakojima-aerial-photography-drone-ocean-view.jpg"
[V0_FILE]jpg:file="public/miyakojima-autumn-sunset-beach.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DuFWWMw-rwiHnXAv8PzVyX/public/miyakojima-autumn-sunset-beach.jpg"
[V0_FILE]jpg:file="public/miyakojima-beginner-snorkeling-equipment-guide.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/A1ONL3EIFyr23JEJ-EFYox/public/miyakojima-beginner-snorkeling-equipment-guide.jpg"
[V0_FILE]jpg:file="public/miyakojima-beginner-snorkeling-guide-equipment.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/fLnw_6LcfmgoQRp-lwAeI1/public/miyakojima-beginner-snorkeling-guide-equipment.jpg"
[V0_FILE]jpg:file="public/miyakojima-beginner-snorkeling.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/pAxXzrhS5XSA11qdn7WsSd/public/miyakojima-beginner-snorkeling.jpg"
[V0_FILE]jpg:file="public/miyakojima-cafe-mango-parfait-ocean.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DuFWWMw-rwiHnXAv8PzVyX/public/miyakojima-cafe-mango-parfait-ocean.jpg"
[V0_FILE]jpg:file="public/miyakojima-cafe-ocean-view.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/y3cBnkyIU1CU4y3w5cS5_l/public/miyakojima-cafe-ocean-view.jpg"
[V0_FILE]jpg:file="public/miyakojima-cafe-ranking-tropical-drinks.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/fLnw_6LcfmgoQRp-lwAeI1/public/miyakojima-cafe-ranking-tropical-drinks.jpg"
[V0_FILE]jpg:file="public/miyakojima-coral-reef-conservation.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/CJY5sPLP_pTz4-0l3ox2N-/public/miyakojima-coral-reef-conservation.jpg"
[V0_FILE]jpg:file="public/miyakojima-couple-sunset.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/7o0934B6d_RAs2Y_uG33_c/public/miyakojima-couple-sunset.jpg"
[V0_FILE]jpg:file="public/miyakojima-cycling-bridge-rider.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DuFWWMw-rwiHnXAv8PzVyX/public/miyakojima-cycling-bridge-rider.jpg"
[V0_FILE]jpg:file="public/miyakojima-diving-cave-light.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DuFWWMw-rwiHnXAv8PzVyX/public/miyakojima-diving-cave-light.jpg"
[V0_FILE]jpg:file="public/miyakojima-drone-aerial-beach-photography.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/NvecpahIEj7O3desnDB4-9/public/miyakojima-drone-aerial-beach-photography.jpg"
[V0_FILE]jpg:file="public/miyakojima-drone-aerial-coastline-photography.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/hLO9_JUs5ZXSty0RsR6VQP/public/miyakojima-drone-aerial-coastline-photography.jpg"
[V0_FILE]jpg:file="public/miyakojima-drone-aerial-photography.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/9mG4ze77NN-lGj2BVliwho/public/miyakojima-drone-aerial-photography.jpg"
[V0_FILE]jpg:file="public/miyakojima-family-beach.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/vEZWr81EgqbnYpRz2e6ViS/public/miyakojima-family-beach.jpg"
[V0_FILE]jpg:file="public/miyakojima-family-travel-beach-fun.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/hLO9_JUs5ZXSty0RsR6VQP/public/miyakojima-family-travel-beach-fun.jpg"
[V0_FILE]jpg:file="public/miyakojima-gourmet-miyako-soba.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/t2OcT8weVy91r66puUPYcd/public/miyakojima-gourmet-miyako-soba.jpg"
[V0_FILE]jpg:file="public/miyakojima-hidden-beach-coral.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/I7aAKR_B8q4JOhZGgQRpoa/public/miyakojima-hidden-beach-coral.jpg"
[V0_FILE]jpg:file="public/miyakojima-hotel-resort-pool.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/OA21VFYx9odg869-WCGS2x/public/miyakojima-hotel-resort-pool.jpg"
[V0_FILE]jpg:file="public/miyakojima-izakaya-miyako-beef-awamori.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DuFWWMw-rwiHnXAv8PzVyX/public/miyakojima-izakaya-miyako-beef-awamori.jpg"
[V0_FILE]jpg:file="public/miyakojima-izakaya-miyako-beef.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/0nmTVLHkV9-sMYfnOTHsdX/public/miyakojima-izakaya-miyako-beef.jpg"
[V0_FILE]jpg:file="public/miyakojima-miyako-soba.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/ZtDD2utlxgD3qJm2P55B8I/public/miyakojima-miyako-soba.jpg"
[V0_FILE]jpg:file="public/miyakojima-morning-cafe-breakfast.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/cwMY9IJADJm5eS5Y1b2gaC/public/miyakojima-morning-cafe-breakfast.jpg"
[V0_FILE]jpg:file="public/miyakojima-museum-cultural-heritage.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DuFWWMw-rwiHnXAv8PzVyX/public/miyakojima-museum-cultural-heritage.jpg"
[V0_FILE]jpg:file="public/miyakojima-night-forest-adventure-headlights.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/fLnw_6LcfmgoQRp-lwAeI1/public/miyakojima-night-forest-adventure-headlights.jpg"
[V0_FILE]jpg:file="public/miyakojima-night-sky-stars.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/y550VilUTYbt2vEbQCCZ6w/public/miyakojima-night-sky-stars.jpg"
[V0_FILE]jpg:file="public/miyakojima-night-tour-adventure-forest.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/fLnw_6LcfmgoQRp-lwAeI1/public/miyakojima-night-tour-adventure-forest.jpg"
[V0_FILE]jpg:file="public/miyakojima-night-tour-creatures.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/BP7W_Qdk-oVk7PtP2MbWLo/public/miyakojima-night-tour-creatures.jpg"
[V0_FILE]png:file="public/miyakojima-oceanview-cafe-tropical-drinks.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/Cxp9BAmmi0VTQSeGpMV7GR/public/miyakojima-oceanview-cafe-tropical-drinks.png"
[V0_FILE]jpg:file="public/miyakojima-oceanview-cafe-tropical-paradise.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/6sRejGh72gCTCrmNHos7Js/public/miyakojima-oceanview-cafe-tropical-paradise.jpg"
[V0_FILE]jpg:file="public/miyakojima-paantu-traditional-culture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/aSSIMP6pM7rikdJ_vUajb_/public/miyakojima-paantu-traditional-culture.jpg"
[V0_FILE]jpg:file="public/miyakojima-photo-spot-beach.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/2QYJMk3xXTCJh9EbPTjPNw/public/miyakojima-photo-spot-beach.jpg"
[V0_FILE]jpg:file="public/miyakojima-rainy-day-cafe.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/D43pQtq9wCeaEVbURVPPI5/public/miyakojima-rainy-day-cafe.jpg"
[V0_FILE]jpg:file="public/miyakojima-rainy-day-cozy-indoor-activities.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/A1ONL3EIFyr23JEJ-EFYox/public/miyakojima-rainy-day-cozy-indoor-activities.jpg"
[V0_FILE]jpg:file="public/miyakojima-rainy-day-indoor-activities.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/fLnw_6LcfmgoQRp-lwAeI1/public/miyakojima-rainy-day-indoor-activities.jpg"
[V0_FILE]jpg:file="public/miyakojima-rental-car-drive.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/jko1O6MRKVjjwOBZaaaYL5/public/miyakojima-rental-car-drive.jpg"
[V0_FILE]jpg:file="public/miyakojima-repeater-yabiji-coral.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/8Rph9ynfOPHXHN8WX0DMka/public/miyakojima-repeater-yabiji-coral.jpg"
[V0_FILE]jpg:file="public/miyakojima-scenic-drive-bridge-ocean-view.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/hLO9_JUs5ZXSty0RsR6VQP/public/miyakojima-scenic-drive-bridge-ocean-view.jpg"
[V0_FILE]jpg:file="public/miyakojima-seasonal-calendar-weather-guide.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/hLO9_JUs5ZXSty0RsR6VQP/public/miyakojima-seasonal-calendar-weather-guide.jpg"
[V0_FILE]jpg:file="public/miyakojima-snorkeling-crystal-clear-water.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/hLO9_JUs5ZXSty0RsR6VQP/public/miyakojima-snorkeling-crystal-clear-water.jpg"
[V0_FILE]jpg:file="public/miyakojima-snorkeling-tropical-fish-underwater.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/fLnw_6LcfmgoQRp-lwAeI1/public/miyakojima-snorkeling-tropical-fish-underwater.jpg"
[V0_FILE]jpg:file="public/miyakojima-spring-beach-flowers.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DuFWWMw-rwiHnXAv8PzVyX/public/miyakojima-spring-beach-flowers.jpg"
[V0_FILE]jpg:file="public/miyakojima-summer-beach-festival.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DuFWWMw-rwiHnXAv8PzVyX/public/miyakojima-summer-beach-festival.jpg"
[V0_FILE]jpg:file="public/miyakojima-sup-sunset-couple.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DuFWWMw-rwiHnXAv8PzVyX/public/miyakojima-sup-sunset-couple.jpg"
[V0_FILE]jpg:file="public/miyakojima-underwater-snorkeling-coral-fish.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/Gg7dXpmDJWqNnz2ZC_m-6m/public/miyakojima-underwater-snorkeling-coral-fish.jpg"
[V0_FILE]jpg:file="public/miyakojima-winter-shrine-beach.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DuFWWMw-rwiHnXAv8PzVyX/public/miyakojima-winter-shrine-beach.jpg"
[V0_FILE]jpg:file="public/miyakojima-yabiji-coral-reef.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DuFWWMw-rwiHnXAv8PzVyX/public/miyakojima-yabiji-coral-reef.jpg"
[V0_FILE]jpg:file="public/nagi-staff-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/dQ8uad9I0Dg_qdlVd_o_Az/public/nagi-staff-photo.jpg"
[V0_FILE]jpg:file="public/oceanview-cafe-tropical-paradise.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/Hiieqp8MRWgYIiHtsts1w7/public/oceanview-cafe-tropical-paradise.jpg"
[V0_FILE]png:file="public/placeholder-4t1ct.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-4t1ct.png"
[V0_FILE]png:file="public/placeholder-575qi.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-575qi.png"
[V0_FILE]png:file="public/placeholder-5ql5m.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-5ql5m.png"
[V0_FILE]png:file="public/placeholder-73fie.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-73fie.png"
[V0_FILE]png:file="public/placeholder-7rnif.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-7rnif.png"
[V0_FILE]png:file="public/placeholder-7unkl.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-7unkl.png"
[V0_FILE]png:file="public/placeholder-c23py.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-c23py.png"
[V0_FILE]png:file="public/placeholder-eouav.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-eouav.png"
[V0_FILE]png:file="public/placeholder-hv95x.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-hv95x.png"
[V0_FILE]png:file="public/placeholder-i9odt.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-i9odt.png"
[V0_FILE]png:file="public/placeholder-ifm3c.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-ifm3c.png"
[V0_FILE]png:file="public/placeholder-jqhr3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-jqhr3.png"
[V0_FILE]png:file="public/placeholder-l9094.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-l9094.png"
[V0_FILE]png:file="public/placeholder-la7sg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-la7sg.png"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]png:file="public/placeholder-p4pnn.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-p4pnn.png"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]png:file="public/placeholder-we6r5.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/XWoArG2__xRF4UnmwVowPD/public/placeholder-we6r5.png"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"
[V0_FILE]jpg:file="public/rainy-day-in-miyakojima-indoor-cafe.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/DkQmnyaXDQ8jMz8mUYgP8n/public/rainy-day-in-miyakojima-indoor-cafe.jpg"
[V0_FILE]jpg:file="public/sea-turtle-swimming-underwater.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/8fQ5b0JyRLBzY7-_UjUiJo/public/sea-turtle-swimming-underwater.jpg"
[V0_FILE]jpg:file="public/sea-turtle-swimming-with-snorkeler.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/xM7gP6wSgrzaYZj_Ajo1Tg/public/sea-turtle-swimming-with-snorkeler.jpg"
[V0_FILE]jpg:file="public/shimojishima-airport-runway-ocean.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/ku3PW4hc94ufORHfF8AdZU/public/shimojishima-airport-runway-ocean.jpg"
[V0_FILE]jpg:file="public/snorkeling-equipment-and-techniques-guide.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/ZhATQm84n4IXWZVH_vqipt/public/snorkeling-equipment-and-techniques-guide.jpg"
[V0_FILE]jpg:file="public/snorkeling-underwater-coral-reef-fish.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/bOatg9hKSkbBSEqLc6i881/public/snorkeling-underwater-coral-reef-fish.jpg"
[V0_FILE]jpg:file="public/souichiro-staff-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/uaoh6bJXx6NRg8VbPuZlPM/public/souichiro-staff-photo.jpg"
[V0_FILE]jpg:file="public/sup-sunset-miyakojima.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/sJrRnDI_ys0cRdZ0ay-SzP/public/sup-sunset-miyakojima.jpg"
[V0_FILE]jpg:file="public/yamachan-staff-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_mkbIpIctCuEGUBUb0B2vHrhKn7pI/3OgQr4dVqFDCNOTCASGvCQ/public/yamachan-staff-photo.jpg"</article></body></html>

{post.title}

{children}

{children}

{children}

執筆者

関連記事

{relatedPost.title}

海亀と泳ごう！

記事が見つかりません

海亀兄弟ブログ

{post.title}

記事が見つかりませんでした

仮予約フォーム

{plan.name}

プラン詳細

特徴

所要時間

持ち物

集合場所

集合時間

オプション

注意事項

支払い方法

仮予約が完了しました！

予約内容

{plan.name}

プラン詳細

料金計算