/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --font-size: 14px;
    --background: #ffffff;
    --foreground: #1a1a1a;
    --border: rgba(0, 0, 0, 0.1);
    --input-background: #f3f3f5;
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

html {
    font-size: var(--font-size);
    scroll-behavior: smooth;
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--leading-normal);
}

/* Typography */
h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 1.5rem;
}

h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 1.25rem;
}

h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
    margin-bottom: 1rem;
}

h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-normal);
    margin-bottom: 0.875rem;
}

p {
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--leading-relaxed);
    margin-bottom: 1rem;
}

/* Utility Classes */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.text-xs { font-size: var(--text-xs); line-height: var(--leading-normal); }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.text-base { font-size: var(--text-base); line-height: var(--leading-relaxed); }
.text-lg { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.text-xl { font-size: var(--text-xl); line-height: var(--leading-relaxed); }
.text-2xl { font-size: var(--text-2xl); line-height: var(--leading-snug); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--leading-snug); }
.text-4xl { font-size: var(--text-4xl); line-height: var(--leading-tight); }

.leading-normal { line-height: var(--leading-normal); }
.leading-snug { line-height: var(--leading-snug); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.tracking-tight { letter-spacing: var(--tracking-tight); }

/* Colors */
.text-foreground { color: var(--foreground); }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-900 { color: #111827; }
.text-red-600 { color: #dc2626; }
.text-white { color: #ffffff; }

.bg-white { background-color: #ffffff; }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-red-600 { background-color: #dc2626; }

/* Layout */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1 1 0%; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.bottom-3 { bottom: 0.75rem; }
.bottom-6 { bottom: 1.5rem; }
.right-6 { right: 1.5rem; }
.left-3 { left: 0.75rem; }

/* Spacing */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }

.pt-1 { padding-top: 0.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }
.pt-24 { padding-top: 6rem; }
.pt-100 { padding-top: 100px; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-20 { padding-bottom: 5rem; }

.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.-mt-4 { margin-top: -1rem; }
.mt-auto { margin-top: auto; }

.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }

.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* Sizing */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-72 { height: 18rem; }
.h-full { height: 100%; }

.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-md { max-width: 28rem; }

.min-h-screen { min-height: 100vh; }

/* Borders and Rounded */
.border { border-width: 1px; border-style: solid; }
.border-0 { border: 0; }
.border-2 { border-width: 2px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-gray-200 { border-color: #e5e7eb; }

.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-t-3xl { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Object Fit */
.object-cover { object-fit: cover; }
.object-center { object-position: center; }

/* Z-Index */
.z-50 { z-index: 50; }

/* Backdrop Blur */
.backdrop-blur-md { backdrop-filter: blur(12px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-80 { opacity: 0.8; }

/* Transform */
.translate-y-4 { transform: translateY(1rem); }
.scale-105 { transform: scale(1.05); }
.-translate-y-2 { transform: translateY(-0.5rem); }

/* Transition */
.transition-colors { 
    transition-property: color, background-color, border-color; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    transition-duration: 150ms; 
}

.transition-all { 
    transition-property: all; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    transition-duration: 300ms; 
}

.transition-opacity { 
    transition-property: opacity; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    transition-duration: 200ms; 
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-600 { transition-duration: 600ms; }

/* Shadow */
.shadow-lg { 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
}

.shadow-xl { 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
}

.shadow-2xl { 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-purple-500\/30 {
    box-shadow: 0 10px 15px -3px rgba(168, 85, 247, 0.3);
}

/* Hover States */
.hover\:opacity-80:hover { opacity: 0.8; }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:transform:hover { transform: translateZ(0); }
.hover\:-translate-y-2:hover { transform: translateY(-0.5rem); }
.hover\:border-blue-300:hover { border-color: #93c5fd; }
.hover\:border-blue-400:hover { border-color: #60a5fa; }

/* Focus States */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.focus\:border-blue-500:focus { border-color: #3b82f6; }

/* Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Line clamp */
.line-through { text-decoration: line-through; }

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flex shrink */
.flex-shrink-0 { flex-shrink: 0; }

/* White space */
.whitespace-nowrap { white-space: nowrap; }

/* No underline */
.no-underline { text-decoration: none; }

/* Hero Section - スキー早割専用 */
.hero-desktop-height {
    min-height: 25vh;
}

/* Gradient backgrounds */
.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-blue-50\/30 {
    --tw-gradient-from: rgba(239, 246, 255, 0.3);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0));
}

.to-white {
    --tw-gradient-to: #ffffff;
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-orange-500 {
    --tw-gradient-from: #f97316;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0));
}

.to-pink-500 {
    --tw-gradient-to: #ec4899;
}

.hover\:from-orange-600:hover {
    --tw-gradient-from: #ea580c;
}

.hover\:to-pink-600:hover {
    --tw-gradient-to: #db2777;
}

.from-blue-500 {
    --tw-gradient-from: #3b82f6;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
}

.to-purple-600 {
    --tw-gradient-to: #9333ea;
}

.hover\:from-blue-600:hover {
    --tw-gradient-from: #2563eb;
}

.hover\:to-purple-700:hover {
    --tw-gradient-to: #7e22ce;
}

/* Active button state - remove border for gradient buttons */
.region-filter-btn.active,
.sort-btn.active {
    border: none !important;
    border-width: 0 !important;
}

/* Announcement section h2 margin override */
.flex h2 {
    margin-bottom: 0 !important;
}

/* エリア見出しの上余白 */
.region-section-heading {
    margin-top: 3rem !important; /* 48px */
}

/* 最初のエリアの見出しには上余白を付けない */
#plansContainer > div:first-child .region-section-heading {
    margin-top: 0 !important;
}

/* タッチデバイス（スマホ・タブレット）でホバー効果を無効化 */
@media (hover: none) and (pointer: coarse) {
    /* カードのホバー効果を無効化 */
    .hover\:transform:hover,
    .hover\:-translate-y-2:hover,
    .hover\:shadow-2xl:hover,
    .hover\:scale-105:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
    
    /* ボタンのホバー効果を無効化 */
    .hover\:border-blue-300:hover,
    .hover\:shadow-md:hover,
    .hover\:shadow-xl:hover {
        border-color: inherit !important;
        box-shadow: inherit !important;
    }
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Responsive */
@media (min-width: 768px) {
    .md\:hidden { display: none; }
    .md\:block { display: block; }
    .md\:flex { display: flex; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:h-10 { height: 2.5rem; }
    .md\:h-20 { height: 5rem; }
    .md\:text-lg { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
    .md\:text-3xl { font-size: var(--text-3xl); line-height: var(--leading-snug); }
    .md\:text-4xl { font-size: var(--text-4xl); line-height: var(--leading-tight); }
    .md\:mb-5 { margin-bottom: 1.25rem; }
    .md\:pt-24 { padding-top: 6rem; }
    
    /* Hero Section - デスクトップ */
    .hero-desktop-height {
        height: 80vh !important;
        min-height: 80vh !important;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Plan Card Styles */
.plan-card {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.plan-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(-0.5rem);
}

/* スマホ用プランカードスタイル */
@media (max-width: 767px) {
    /* 2列グリッド用のgapを狭く */
    .grid.grid-cols-1 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important; /* 12px */
    }
    
    /* カードの角丸を小さく */
    .plan-card-mobile {
        border-radius: 0.75rem !important; /* 12px */
    }
    
    /* 画像の高さを小さく */
    .plan-card-mobile .h-72 {
        height: 8rem !important; /* 128px */
    }
    
    /* コンテンツパディングを小さく（画像とタイトルの余白を狭める） */
    .plan-card-mobile .py-6 {
        padding-top: 0.375rem !important; /* 6px */
        padding-bottom: 0.375rem !important; /* 6px */
    }
    
    .plan-card-mobile .px-8 {
        padding-left: 0.75rem !important; /* 12px */
        padding-right: 0.75rem !important; /* 12px */
    }
    
    /* タイトルを小さく + 2行固定 */
    .plan-card-mobile h3 {
        font-size: 1rem !important; /* 16px */
        margin-bottom: 0.25rem !important; /* 4px */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.3 !important; /* 2行表示に最適化 */
        min-height: 2.6rem !important; /* 1行でも2行分の高さを確保（1rem * 1.3 * 2） */
    }
    
    /* 場所アイコン・テキストを小さく */
    .plan-card-mobile .location-info {
        font-size: 10px !important;
        gap: 0.125rem !important; /* 2px */
        margin-bottom: 0.5rem !important; /* 8px */
        min-width: 0 !important;
    }
    
    .plan-card-mobile .location-info svg {
        width: 10px !important;
        height: 10px !important;
        flex-shrink: 0 !important;
    }
    
    /* エリア名を省略表示 */
    .plan-card-mobile .location-info span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* 割引バッジを小さく */
    .plan-card-mobile .discount-badge {
        padding: 0.125rem 0.375rem !important; /* 2px 6px */
        border-radius: 0.25rem !important; /* 4px */
        margin-bottom: 0.25rem !important; /* 4px */
    }
    
    .plan-card-mobile .discount-badge span {
        font-size: 9px !important;
    }
    
    /* 価格ラベルを小さく */
    .plan-card-mobile .price-label {
        font-size: 8px !important;
    }
    
    /* 通常価格を小さく */
    .plan-card-mobile .original-price {
        font-size: 10px !important;
        gap: 0.25rem !important; /* 4px */
        margin-bottom: 0.125rem !important; /* 2px */
    }
    
    /* 早割価格を調整（通常価格より大きく、でも元よりは小さく） */
    .plan-card-mobile .early-price {
        font-size: 1rem !important; /* 16px → 通常価格（10px）より大きいが、元の18pxより小さい */
        gap: 0.25rem !important; /* 4px */
    }
    
    .plan-card-mobile .early-price-suffix {
        font-size: 10px !important;
    }
    
    /* 早割価格の数字サイズを調整 */
    .plan-card-mobile .early-price .text-4xl {
        font-size: 1.5rem !important; /* 24px → 通常価格の打ち消し線（10px）より大きく、でもPC（36px）より小さく */
    }
    
    /* ボタンを小さく */
    .plan-card-mobile .detail-button {
        font-size: 10px !important;
        padding: 0.375rem 0.5rem !important; /* 6px 8px */
        height: 1.75rem !important; /* 28px */
        border-radius: 0.5rem !important; /* 8px */
    }
    
    /* フッターパディングを小さく */
    .plan-card-mobile .card-footer {
        padding: 0.5rem !important; /* 8px */
        padding-top: 0.125rem !important; /* 2px */
        padding-bottom: 0.5rem !important; /* 8px */
    }
}